react-use#useCookie TypeScript Examples

export default function useAcceptCookies() {
  const [acceptedCookies, setAcceptedCookies] = useCookie(COOKIE_NAME);

  const handleAcceptCookies = () => {
    setAcceptedCookies('accepted', { expires: 365 });
  };

  return {
    acceptedCookies: acceptedCookies === 'accepted',
    handleAcceptCookies,
  };
}

Upload: React.FC<UploadProps> = ({ label, defaultImg, onChange }) => {
  const [img, setimg] = useState<string>();
  const [isloading, setIsloading] = useState(false);
  const [viewImg, setViewImg] = useState(false);
  const [wh, setWh] = useState(' ');
  const moduleId = useSelector(
    (state: RootState) => state.activationItem.moduleId,
  );
  const [csrfToken] = useCookie('csrfToken')
  
  const ref = useRef(null);

  // 创建临时图片文件
  const createTempImg = useCallback((url: string) => {
    const wrap = ref.current as any;
    if (wrap) {
      (ref.current as any).innerHTML = '';
      const image = new Image();
      image.src = url;
      image.onload = () => {};
      (ref.current as any).appendChild(image);
    }
  }, []);

  // 获取文件宽高属性
  const getTempImgWH = useCallback(() => {
    const image = (ref.current as any)?.querySelector('img');
    if (image) {
      const str = `宽:${image.offsetWidth}px 高:${image.offsetHeight}px`;
      setWh(str);
    }
  }, []);

  // 删除临时文件

  useEffect(() => {
    setimg(defaultImg);
    if (defaultImg) {
      createTempImg(defaultImg);
    }
  }, [createTempImg, defaultImg, moduleId]);

  const onChangeUpload = useCallback(
    (info: UploadChangeParam) => {
      if (info.file.status === 'uploading') {
        setIsloading(true);
      }

      if (info.file.status === 'error') {
        setIsloading(false);
      }

      if (info.file.response) {
        setTimeout(() => {
          setIsloading(false);
          setimg(info.file.response.fileUrl);
          createTempImg(info.file.response.fileUrl);
        }, 1000);

        if (onChange instanceof Function) {
          onChange(info.file.response.fileUrl);
        }
      }
    },
    [createTempImg, onChange],
  );

  const hideView = useCallback(() => {
    setViewImg(false);
  }, []);

  const showView = useCallback(() => {
    getTempImgWH();
    setViewImg(true);
  }, [getTempImgWH]);

  const deleteImage = useCallback(() => {
    setimg('');
    if (onChange instanceof Function) {
      onChange('');
    }
  }, [onChange]);

  const inputOnChange = useCallback(
    (e) => {
      const url = e.target.value;
      if (onChange instanceof Function && isUrl(url)) {
        onChange(url);
        setimg(url);
        createTempImg(url);
      }
    },
    [createTempImg, onChange],
  );

  return (
    <>
      <Row className={s.row} gutter={4}>
        <Col className={s.label} span={7}>
          {label || ''}
        </Col>
        <Col span={14}>
          <div className={s.button}>
            {process.env.REACT_APP_DEMO === 'true' ? (
              <Tooltip
              overlayInnerStyle={{width: 400}}
                title={
                  <Input style={{width: '100%'}} value={img} onChange={inputOnChange} placeholder="输入图片url" />
                }
              >
                <span
                  className={classNames(s.uploadicon, s.empty, s.flid)}
                  style={{
                    backgroundImage: `url(${!isloading && img ? img : ''})`,
                  }}
                >
                  {isloading ? antIcon : null}
                  {!img ? <PictureOutlined /> : null}
                </span>
              </Tooltip>
            ) : (
              <UploadPic
                accept=".jpg,.jpeg,.png"
                action={'/api/upload'}
                onChange={onChangeUpload}
                showUploadList={false}
                disabled={isloading}
                headers={{
                  'x-csrf-token': csrfToken || ''
                }}
              >
                <span
                  className={classNames(s.uploadicon, s.empty, s.flid)}
                  style={{
                    backgroundImage: `url(${!isloading && img ? img : ''})`,
                  }}
                >
                  {isloading ? antIcon : null}
                  {!img ? <PictureOutlined /> : null}
                </span>
              </UploadPic>
            )}
          </div>

          {!isloading && img ? (
            <>
              <Tooltip
                placement="top"
                trigger="hover"
                mouseEnterDelay={2}
                title="预览"
              >
                <Button
                  className={s.view}
                  type="link"
                  size={'small'}
                  onClick={showView}
                  icon={<EyeOutlined />}
                />
              </Tooltip>
              <Tooltip
                placement="top"
                trigger="hover"
                mouseEnterDelay={2}
                title="删除"
              >
                <Button
                  type="link"
                  danger
                  size={'small'}
                  onClick={deleteImage}
                  icon={<DeleteOutlined />}
                />
              </Tooltip>
            </>
          ) : null}
        </Col>
      </Row>
      <Modal visible={viewImg} onCancel={hideView} title={wh} footer={null}>
        <div className={s.ref}>
          {img ? <img ref={ref} src={img} alt={''} /> : null}
        </div>
      </Modal>
      {!isloading && img ? <div className={s.imgtemp} ref={ref} /> : null}
    </>
  );
}

TemplateInfoModal: React.FC<Props> = ({ visible, onOk, onCancel }) => {
    const [tags, setTags] = useState<queryTagParams[]>([]);
    const pageData = useSelector((state: RootState) => state.pageData);
    const [defaultValue, setDefaultValue] = useState<AnyObject>();

    const [csrfToken] = useCookie('csrfToken')

    const getTags = useCallback(async () => {
        const tagsResult = await queryTag();
        setTags(tagsResult);
    }, []);

    useEffect(() => {
        const { template = {}, pageTitle } = pageData;
        const { title, cove, tag, describe, terminal, isPublic } = template;
        const defaultParams: TemplateInfo = {
            title: title || pageTitle,
            cove: !!cove ? [{thumbUrl: cove}] : [],
            tag: !!tag ? tag.split(',') : [],
            isPublic: (isPublic === 1),
            describe,
            terminal,
        };
        setDefaultValue(defaultParams);
        
    }, [pageData, pageData.template, visible]);

    useEffect(() => {
        getTags();
    }, [getTags]);

    const handleSubmit = useCallback(
        (data: AnyObject) => {
            if (!isType(data, 'Object')) return;
            data.describe = data.describe || '';
            if (onOk instanceof Function) onOk(data);
        },
        [onOk]
    );

    return (
        <Modal
            key={`${visible}`}
            title="模版信息"
            visible={visible}
            onCancel={onCancel}
            okText={'确定'}
            cancelText={'取消'}
            footer={null}
        >
            <Form
                name="templateInfo"
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 19 }}
                initialValues={defaultValue}
                onFinish={handleSubmit}
            >
                <Form.Item
                    label="模板标题"
                    name="title"
                    rules={[{ required: true, message: '请填写模板标题' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="终端"
                    name="terminal"
                    rules={[{ required: true, message: '请选择终端' }]}
                >
                    <Select placeholder="请选择">
                        <Select.Option value="mobile">移动端</Select.Option>
                        <Select.Option value="pc">PC端</Select.Option>
                    </Select>
                </Form.Item>
                <Form.Item
                    name="cove"
                    label="封面图片"
                    valuePropName="fileList"
                    getValueFromEvent={normFile}
                    extra="模版封面图片"
                    rules={[{ required: true, message: '请上传封面图片' }]}
                >
                    <Upload
                        action="/api/upload"
                        listType="picture"
                        maxCount={1}
                        headers={{
                          'x-csrf-token': csrfToken || ''
                        }}
                    >
                        <Button icon={<UploadOutlined />}>上传图片</Button>
                    </Upload>

                </Form.Item>
                <Form.Item label="描述" name="describe">
                    <Input.TextArea rows={3} />
                </Form.Item>
                <Form.Item
                    label="标签"
                    name="tag"
                    rules={[{ required: true, message: '请选择标签' }]}
                >
                    <Select mode="multiple" allowClear placeholder="标签">
                        {tags.map((item) => (
                            <Select.Option key={item.id} value={`${item.id}`}>
                                {item.name}
                            </Select.Option>
                        ))}
                    </Select>
                </Form.Item>

                <Form.Item
                    name="isPublic"
                    valuePropName="checked"
                    wrapperCol={{ offset: 9, span: 17 }}
                >
                    <Checkbox>发布为公共模板</Checkbox>
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 10, span: 14 }}>
                    <Button type="primary" htmlType="submit">
                        确定
                    </Button>
                </Form.Item>
            </Form>
        </Modal>
    );
}