WatermarkTool.tsx 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. import React, { useState, useEffect } from 'react';
  2. import queryString from 'query-string';
  3. import dayjs from 'dayjs';
  4. import { useTranslation } from 'react-i18next';
  5. import Icon from '../components/Icon';
  6. import Button from '../components/Button';
  7. import Drawer from '../components/Drawer';
  8. import WatermarkOption from '../components/WatermarkOption';
  9. import useActions from '../actions';
  10. import useStore from '../store';
  11. import { BtnWrapper } from '../global/toolStyled';
  12. type Props = {
  13. onClickSidebar: (state: string) => void;
  14. };
  15. const WatermarkTool: React.FC<Props> = ({ onClickSidebar }: Props) => {
  16. const { t } = useTranslation('sidebar');
  17. const [isActive, setActive] = useState(false);
  18. const [{ totalPage, watermark, annotations }, dispatch] = useStore();
  19. const { updateWatermark, addAnnots, updateAnnots } = useActions(dispatch);
  20. const setDataState = (obj: WatermarkType): void => {
  21. updateWatermark(obj);
  22. };
  23. const removeWatermarkInAnnots = (): void => {
  24. const index = annotations.findIndex(
  25. (ele: AnnotationType) => ele.obj_type === 'watermark'
  26. );
  27. if (index >= 0) {
  28. annotations.splice(index, 1);
  29. updateAnnots(annotations);
  30. }
  31. };
  32. const handleClick = (): void => {
  33. setActive(!isActive);
  34. onClickSidebar('watermark');
  35. };
  36. const handleSave = (): void => {
  37. const { type, imagepath = '', ...rest } = watermark;
  38. const imagePathMatch = imagepath.match(/image\/(.*);base64/) || [];
  39. const imageTypeMatch = imagepath.match(/base64,(.*)/) || [];
  40. const watermarkData = {
  41. obj_type: 'watermark',
  42. obj_attr: {
  43. ...rest,
  44. type,
  45. pages: `0-${totalPage}`,
  46. opacity: watermark.opacity,
  47. original_image_name: imagePathMatch && `temp.${imagePathMatch[1]}`,
  48. image_data: imageTypeMatch && imageTypeMatch[1],
  49. },
  50. };
  51. removeWatermarkInAnnots();
  52. addAnnots([watermarkData]);
  53. };
  54. const handleDelete = (): void => {
  55. removeWatermarkInAnnots();
  56. updateWatermark({
  57. ...watermark,
  58. text: '',
  59. imagepath: '',
  60. });
  61. };
  62. useEffect(() => {
  63. const parsed = queryString.parse(window.location.search);
  64. if (parsed.watermark) {
  65. const datetime = dayjs().format('YYYY-MM-DD HH:mm:ss');
  66. setDataState({
  67. text: `${parsed.watermark} @ ${datetime}`,
  68. });
  69. }
  70. }, []);
  71. return (
  72. <>
  73. <BtnWrapper>
  74. <Button shouldFitContainer align="left" onClick={handleClick}>
  75. <Icon glyph="watermark" style={{ marginRight: '10px' }} />
  76. {t('watermark')}
  77. </Button>
  78. </BtnWrapper>
  79. <Drawer open={isActive} anchor="left" zIndex={4}>
  80. <WatermarkOption
  81. isActive={isActive}
  82. onClick={handleClick}
  83. onSave={handleSave}
  84. onDelete={handleDelete}
  85. setDataState={setDataState}
  86. {...watermark}
  87. />
  88. </Drawer>
  89. </>
  90. );
  91. };
  92. export default WatermarkTool;