antd#ModalProps TypeScript Examples

QrcodeModal:React.FC<Props & ModalProps> = ({sourceData,options={}, canvasClass,info,...other}) => {

  const canvasRef = useRef<HTMLCanvasElement>(null);
  useEffect(() => {
    canvasRef.current && QRCode.toDataURL(canvasRef.current, sourceData, options)
  }, [options, sourceData])

  return (
    <Modal {...other} footer={null}>
      <div className={s.root}>
        <div className={s.canvaswrap}>
          <canvas className={classNames(s.canvas, canvasClass)} ref={canvasRef} />
        </div>
        {info ? <div>{info}</div> : null}
      </div>
    </Modal>
  )
}

BillingPlanOptionsModal: React.FC<{ planStatus: CurrentSubscription } & ModalProps> = ({
  planStatus,
  children,
  ...modalProps
}) => {
  return (
    <Modal
      destroyOnClose={false}
      width={800}
      title={<h1 className="text-xl m-0 p-0">Upgrade subscription</h1>}
      footer={null}
      {...modalProps}
    >
      <BillingPlanOptions planStatus={planStatus} />
    </Modal>
  )
}

MODAL_PROPS: ModalProps = { width: 840 }

DeleteConfirm = (props: ModalProps) => {
  const [inputValue, setInputValue] = useState('');
  const dispatch = useDispatch();
  const history = useHistory();
  const currentOrganization = useSelector(selectCurrentOrganization);
  const loading = useSelector(selectDeleteOrganizationLoading);
  const confirmDisabled = inputValue !== currentOrganization?.name;
  const t = useI18NPrefix('orgSetting');
  const tg = useI18NPrefix('global');

  const inputChange = useCallback(e => {
    setInputValue(e.target.value);
  }, []);

  const deleteOrg = useCallback(() => {
    dispatch(
      deleteOrganization(() => {
        history.replace('/');
        message.success(tg('operation.deleteSuccess'));
      }),
    );
  }, [dispatch, history, tg]);

  return (
    <Modal
      {...props}
      footer={[
        <Button key="cancel" onClick={props.onCancel}>
          {t('cancel')}
        </Button>,
        <Button
          key="confirm"
          loading={loading}
          disabled={confirmDisabled}
          onClick={deleteOrg}
          danger
        >
          {t('delete')}
        </Button>,
      ]}
    >
      <Form.Item>
        <Input
          placeholder={t('enterOrgName')}
          value={inputValue}
          onChange={inputChange}
        />
      </Form.Item>
    </Modal>
  );
}

ValueEnumModal: React.FC<Props & ModalProps> = ({ valueEnum, onOk, onConfirm, ...other }) => {
  const [fileds, setFileds] = useState<string[]>([]);
  const [text, setText] = useState<(string|undefined)[]>([]);
  const [disableds, setDisableds] = useState<boolean[]>([]);

  useEffect(() => {
    if (valueEnum) {
      const initFileds:string[] = [];
      const initText:(string|undefined)[] = [];
      const initDisableds:boolean[] = [];
      Object.keys(valueEnum).forEach(key => {
        const element = valueEnum[key];
        initFileds.push(key);
        initText.push(element.text);
        initDisableds.push(!!element.disabled);
      });
      setFileds(initFileds)
    }
  }, [valueEnum])
  

  const onPlus = useCallback(
    () => {
      setFileds(datas => {
        const newData = cloneDeep(datas);
        newData.push(`filed${newData.length}`);
        return newData;
      })
      setText(datas => {
        const newData = cloneDeep(datas);
        newData.push(`字段${newData.length}`);
        return newData;
      })
      setDisableds(datas => {
        const newData = cloneDeep(datas);
        newData.push(false);
        return newData;
      })
    },
    [],
  )

  const onMinus = useCallback(
    (index: number) => {
      setFileds(data => data.filter((item, ind) => index !== ind));
      setText(data => data.filter((item, ind) => index !== ind));
      setDisableds(data => data.filter((item, ind) => index !== ind));
    },
    [],
  )
  
  const handleDisabled = useCallback(
    (index: number, value: any) => {
      setDisableds(data => {
        const newData = cloneDeep(data)
        newData[index] = value;
        return newData
      })
    },
    [],
  )

  const handleOk = useCallback(
    (e) => {
      const enumData = {};
      fileds.forEach((key, index) => {
        if (key) {
          enumData[key] = {
            text: text[index],
            disabled: disableds[index]
          }
        }
      })
      if(typeof onOk === 'function') onOk(e);
      if(typeof onConfirm === 'function' && enumData) onConfirm(enumData);
    },
    [fileds, onOk, onConfirm, text, disableds],
  )

  const handleText = useCallback(
    (index: number, text: any) => {
      setText(data => {
        const newData = cloneDeep(data)
        newData[index] = text;
        return newData
      })
    },
    [],
  )

  const handleFiled = useCallback(
    (index: number, value: any) => {
      setFileds(data => {
        const newData = cloneDeep(data)
        newData[index] = value;
        return newData
      })
    },
    [],
  )
  
  return (
    <div>
      <Modal onOk={handleOk} {...other}>
        <Button onClick={onPlus}>新增属性</Button>
        {
          fileds.map((filed, index) => <Row key={index} className={s.formitem}>
            <Col>
              名称/字段：
            </Col>
            <Col>
              <Input.Group compact>
                <Input name='text' onChange={e => handleText(index, e.target.value)} value={text[index]} className={s.inp} placeholder="名称" />
                <Input name='all'  onChange={(e) => handleFiled(index, e.target.value)} value={fileds[index]} className={s.inp} placeholder="字段" />
                <div className={s.checkbox}>
                  <Checkbox checked={disableds[index]} onChange={(e) => handleDisabled(index, e.target.checked)}>禁用</Checkbox>
                </div>
                <Button onClick={() => onMinus(index)}>删除</Button>
              </Input.Group>
            </Col>
          </Row>)
        }
      </Modal>
    </div>
  )
}

export function Profile({ visible, onCancel }: ModalProps) {
  const [avatarLoading, setAvatarLoading] = useState(false);
  const dispatch = useDispatch();
  const loggedInUser = useSelector(selectLoggedInUser);
  const loading = useSelector(selectSaveProfileLoading);
  const [saveDisabled, setSaveDisabled] = useState(true);
  const [form] = Form.useForm();
  const t = useI18NPrefix('main.nav.account.profile');
  const tg = useI18NPrefix('global');

  const reset = useCallback(() => {
    form.resetFields();
    setSaveDisabled(true);
  }, [form]);

  useEffect(() => {
    if (visible) {
      reset();
    }
  }, [visible, reset, loggedInUser]);

  const avatarChange = useCallback(
    ({ file }) => {
      if (file.status === 'done') {
        const response = file.response as APIResponse<string>;
        if (response.success) {
          dispatch(updateUser({ ...loggedInUser!, avatar: response.data }));
        }
        setAvatarLoading(false);
      } else {
        setAvatarLoading(true);
      }
    },
    [dispatch, loggedInUser],
  );

  const formChange = useCallback(
    (_, values) => {
      setSaveDisabled(
        Object.entries(values).every(
          ([key, value]) => loggedInUser![key] === value,
        ),
      );
    },
    [loggedInUser],
  );

  const formSubmit = useCallback(
    values => {
      dispatch(
        saveProfile({
          user: {
            ...values,
            id: loggedInUser!.id,
            email: loggedInUser!.email,
          },
          resolve: () => {
            message.success(tg('operation.updateSuccess'));
            onCancel && onCancel(null as any);
          },
        }),
      );
    },
    [dispatch, loggedInUser, onCancel, tg],
  );

  return (
    <Modal
      title={t('title')}
      footer={false}
      visible={visible}
      onCancel={onCancel}
      afterClose={reset}
    >
      <AvatarUpload>
        <Avatar
          size={SPACE_UNIT * 24}
          src={`${BASE_RESOURCE_URL}${loggedInUser?.avatar}`}
        >
          {loggedInUser?.username.substr(0, 1).toUpperCase()}
        </Avatar>
        <Upload
          accept=".jpg,.jpeg,.png,.gif"
          method="post"
          action={`${BASE_API_URL}/files/user/avatar?userId=${loggedInUser?.id}`}
          headers={{ authorization: getToken()! }}
          className="uploader"
          showUploadList={false}
          onChange={avatarChange}
        >
          <Button type="link" loading={avatarLoading}>
            {t('clickUpload')}
          </Button>
        </Upload>
      </AvatarUpload>
      <Form
        form={form}
        initialValues={loggedInUser || void 0}
        labelCol={{ span: 7 }}
        wrapperCol={{ span: 12 }}
        onValuesChange={formChange}
        onFinish={formSubmit}
      >
        <FormItem label={t('username')}>{loggedInUser?.username}</FormItem>
        <FormItem label={t('email')}>{loggedInUser?.email}</FormItem>
        <FormItem label={t('name')} name="name">
          <Input />
        </FormItem>
        <FormItem label={t('department')} name="department">
          <Input />
        </FormItem>
        <Form.Item wrapperCol={{ offset: 7, span: 12 }}>
          <Button
            type="primary"
            htmlType="submit"
            loading={loading}
            disabled={saveDisabled}
            block
          >
            {tg('button.save')}
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
}