antd#Input TypeScript Examples

public render() {
    const { width, height } = this.props;
    const { focus, text, hintEntities, hintIndex } = this.state;
    return (
      <div className="searchbar" style={ focus ? {width: `${width}px`, height: `${height}px`, backgroundColor: "#020E26cc"} : undefined}>
        { focus && <Input 
          className="input" 
          placeholder={this.props.intl.formatMessage({id: 'search.placeholder'})} 
          ref={r => this._input = r} 
          onChange={this.handleInputChange} 
          onPressEnter={this.handleClickSearch} 
          onKeyDown={this.handleInputKeydown}
          value={text} 
          style={{width: `${width-4}px`, height: `${height-4}px`}}/> }
        <Search_Svg className="svg" style={focus ? {left: 'unset', right: '8px'} : undefined} onClick={this.handleClickSearch}/>
        { focus && <Close_Svg className="close" onClick={this.handleClose} /> }
        {!!hintEntities.length && (
          <div className="hints" >
            {hintEntities.map((entity: any, i: number) => {
              let label: string = entity[`label_${entity.lang || "zh"}`];
              return (
                <div 
                  className="hint_entity" 
                  style={hintIndex == i ? {backgroundColor: "#d1f2ff"} : undefined} 
                  key={i}
                  onClick={() => this.handleHintClick(label)}>
                  {label}
                </div>
              )
            })}
          </div>
        )}
      </div>
    )
  }

StyledSearch = styled(Input.Search)`
  &.ant-input-search .ant-input-wrapper .ant-input-affix-wrapper {
    border: 2px solid #4569ff !important;
    border-radius: 10px 0 0 10px !important;
    box-shadow: unset;
    border-right-width: 2px !important;
  }
  .ant-input-group-addon {
    background-color: #4569ff;
    border-radius: 0 10px 10px 0 !important;
  }
  .ant-btn {
    border: 2px solid #4569ff !important;
    background: #4569ff;
    border-radius: 0 10px 10px 0 !important;
  }
`

getSearchItems() {
        const { getFieldDecorator } = this.props.form;

        return (
            <React.Fragment>
                <Form.Item label={('查询名')}>
                    {getFieldDecorator('name', { initialValue: '' })(
                        // TODO 暂时没发现下面这个Input在编辑器内会抛错，编译正常
                        // @ts-ignore
                        <Input style={{ width: 400 }} placeholder="请输入名称进行查询（胡歌有重复的，不支持模糊查询）"/>
                    )}
                </Form.Item>
                <Form.Item label={('查询ID')} style={{ display: 'none' }}>
                    {getFieldDecorator('type', { initialValue: 'test' })(
                        // 此表单只作为mock数据做筛选搜索作用
                        // @ts-ignore
                        <Input placeholder=""/>
                    )}
                </Form.Item>
                <Form.Item>
                    <Button htmlType="submit">查询</Button>
                </Form.Item>

            </React.Fragment>
        )

    }

describe('CharInput', () => {
  const ref = React.createRef<Input>();
  let charInputTestRenderer: ReactTestRenderer;
  it('Renders correctly with required props', () => {
    act(() => {
      charInputTestRenderer = create(<CharInput ref={ref} />);
    });
  })

  it('Passes refs to the container component', () => {
    const input = charInputTestRenderer.root.findByType(Input).instance;
    expect(input).toEqual(ref.current);
  });

  it('Unmounts', () => {
    act(() => charInputTestRenderer.unmount());
  })
})

public render() {
    const config = this.props.schema;
    const uiProps = this.props.schema['ui:props'] || {};

    return (
      <Input
        {...uiProps}
        value={this.props.value as string}
        placeholder={uiProps.placeholder as string}
        disabled={uiProps.disabled as boolean}
        style={{ width: 240, ...uiProps.style }}
        onChange={(e) => {
          const value = this.transform(e.target.value);
          this.props.onChange?.(value);
          if (config.validate) {
            const res = config.validate(value);
            (res instanceof Promise ? res : Promise.resolve(res))
              .then((msg) => {
                this.props.onValidate?.(msg);
                return msg;
              })
              .catch((error) => { throw error; });
          }
        }}
      />
    );
  }

Login: React.FC = () => {
  const { login, loading } = useStore((state) => ({ ...state }));

  return (
    <div className={cls.loginBox}>
      <Card className="_bg" bordered={false}>
        <Form
          onFinish={({ username, password }) => {
            if (username === 'admin' && password === '123456') {
              return login({ username, password });
            }
            message.error('账号或密码错误，请重试！');
          }}>
          <Form.Item
            name="username"
            rules={[{ required: true, message: '请输入用户名' }]}>
            <Input prefix={<UserOutlined />} placeholder="请输入用户名：admin" />
          </Form.Item>
          <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
            <Input prefix={<LockOutlined />} placeholder="请输入密码：123456" />
          </Form.Item>
          <Form.Item>
            <Button
              loading={loading}
              type="primary"
              htmlType="submit"
              className={cls.button}>
              登陆
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}

CronInput: React.FC<TProps> = props => {
  const { style, inputStyle, value, onChange, ...passThroughProps } = props;
  const [CronValue, setValue] = useState('');
  const [visible, setVisible] = useState(false);
  const onOk = (value: string) => {
    if (onChange) {
      onChange(value);
    }
    setValue(value);
    setVisible(false);
  };
  const handleVisibleChange = (flag: boolean) => {
    setVisible(flag);
  };
  return (
    <div>
      <Dropdown
        trigger={['click']}
        placement="bottomLeft"
        onVisibleChange={handleVisibleChange}
        visible={visible}
        overlay={<Cron onOk={onOk} value={CronValue} style={style} />}
      >
        <Input value={CronValue} style={inputStyle} {...passThroughProps} />
      </Dropdown>
    </div>
  );
}

export function CopyToClipboardInput({
    value,
    placeholder,
    description,
    isValueSensitive = false,
    ...props
}: InputProps): JSX.Element {
    return (
        <Input
            className={isValueSensitive ? 'ph-no-capture' : ''}
            type="text"
            value={value}
            placeholder={placeholder || 'nothing to show here'}
            disabled={!value}
            suffix={
                value ? (
                    <Tooltip title="Copy to Clipboard">
                        <CopyOutlined
                            onClick={() => {
                                copyToClipboard(value, description)
                            }}
                        />
                    </Tooltip>
                ) : null
            }
            {...props}
        />
    )
}

DatasetField: FC<Props> = props => {
  const fields = useSelector((state: any) =>
    module.selectors.getDatasetFields(state)
  )

  const dispatch = useDispatch()
  const onSearch = useCallback(
    (event: ChangeEvent<HTMLInputElement>) => {
      dispatch(module.actions.updateFilter(event.target.value))
    },
    [module, dispatch]
  )

  return (
    <div className="dataset-field">
      <div className="title">数据集字段</div>
      <div className="list">
        <Input
          className="search"
          size="small"
          placeholder="搜索字段"
          onChange={onSearch}
        />
        {fields.map((field, index: number) => {
          return <FieldItem field={field} key={field.id} />
        })}
      </div>
    </div>
  )
}

DiseaseForm = () => {
  return (
    <>
      <Form.Item
        label="Disease Name"
        name="disease"
        rules={[
          { required: true, message: 'Please input Disease Name' },
        ]}
      >
        <Input placeholder="example: cystic fibrosis" />
      </Form.Item>
      <Form.Item
        label="Causal Gene Name"
        name="causalGene"
        rules={[
          {
            required: true,
            message: 'Please input Causal Gene Name',
          },
        ]}
      >
        <Input placeholder="example: CFTR" />
      </Form.Item>
      <Form.Item
        label="Foundation or Organization Name"
        name="foundation"
        rules={[
          {
            required: true,
            message: 'Please input Foundation or Organization Name',
          },
        ]}
      >
        <Input placeholder="example: Cystic Fibrosis Gene Therapy Consortium " />
      </Form.Item>
    </>
  )
}

SearchInput: React.FC = React.memo(() => {
  const { t } = useTranslation(I18nKey);
  const { query, updateQuery, doSearch } = useContext(Context);

  const doUpdate = useCallback((evt: React.ChangeEvent<HTMLInputElement>) => {
    updateQuery(evt.target.value);
  }, [updateQuery]);

  return (
    <Input.Group className="ant-ext-sb__searchInput" compact>
      <Input.Search
        type="search"
        value={query}
        enterButton
        onChange={doUpdate}
        onSearch={doSearch}
        placeholder={t("placeholder")}
      />
    </Input.Group>
  );
})

FontSize = () => {
  const [visible, path] = useVisibility({ attribute: ATTRIBUTE });
  const { mjmlJson, setMjmlJson } = useEditor();
  const { getValue } = useValue({ path, visible, attribute: ATTRIBUTE });

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    let value = e.currentTarget.value;
    if (path && visible) {
      let json = {};
      let element = _.get(mjmlJson, path);
      element.attributes[ATTRIBUTE] = value;
      json = _.set(mjmlJson, path, element);
      setMjmlJson({ ...json });
    }
  };

  return visible ? (
    <Form.Item label="FontSize">
      <Input onChange={handleChange} value={getValue()} />
    </Form.Item>
  ) : null;
}

getItem = ({ attr, type, inputNode }: {
  attr?: Partial<ItemChildAttr<any, any>>;
  type?: ItemChildType;
  inputNode?: ((...arg: any[]) => React.ReactNode) | React.ReactNode;
}) => {
  let renderItem = undefined;
  if (type === 'Input') {
    const inputAttr = attr as InputProps;
    renderItem = <Input {...inputAttr} />;
  } else if (type === 'TextArea') {
    const inputAttr = attr as TextAreaProps;
    renderItem = <Input.TextArea {...inputAttr} />;
  } else if (type === 'InputNumber') {
    const inputAttr = attr as InputNumberProps;
    renderItem = <InputNumber {...inputAttr} />;
  } else if (type === 'AutoComplete') {
    const inputAttr = attr as AutoCompleteProps;
    renderItem = <AutoComplete {...inputAttr} />;
  } else if (type === 'Cascader') {
    const inputAttr = attr as CascaderProps;
    renderItem = <Cascader {...inputAttr} />;
  } else if (type === 'DatePicker') {
    const inputAttr = attr as DatePickerProps;
    renderItem = <DatePicker {...inputAttr} />;
  } else if (type === 'Rate') {
    const inputAttr = attr as RateProps;
    renderItem = <Rate {...inputAttr} />;
  } else if (type === 'Slider') {
    const inputAttr = attr as SliderSingleProps;
    renderItem = <Slider {...inputAttr} />;
  } else if (type === 'TreeSelect') {
    const inputAttr = attr as TreeSelectProps<any>;
    renderItem = <TreeSelect {...inputAttr} />;
  } else if (type === 'Select') {
    const inputAttr = attr as SelectProps<any>;
    renderItem = <Select {...inputAttr} />;
  } else if (type === 'Checkbox') {
    const inputAttr = attr as CheckboxGroupProps;
    renderItem = <Checkbox.Group {...inputAttr} />;
  } else if (type === 'Mentions') {
    const inputAttr = attr as MentionProps;
    renderItem = <Mentions {...inputAttr} />;
  } else if (type === 'Radio') {
    const inputAttr = attr as RadioProps;
    renderItem = <Radio.Group {...inputAttr} />;
  } else if (type === 'Switch') {
    const inputAttr = attr as SwitchProps;
    renderItem = <Switch {...inputAttr} />;
  } else if (type === 'TimePicker') {
    const inputAttr = attr as TimePickerProps;
    renderItem = <TimePicker {...inputAttr} />;
  } else if (type === 'Upload') {
    const inputAttr = attr as UploadProps;
    renderItem = <Upload {...inputAttr} />;
  } else if (type === 'RangePicker') {
    const inputAttr = attr as RangePickerProps;
    renderItem = <RangePicker {...inputAttr} />;
  } else if (type === 'Custom') {
    renderItem = inputNode;
  }
  return renderItem;
}

formItems: IFormSchema[] = [
  {
    name: 'id',
    label: 'id',
    rules: [{ required: true }],
    renderProps: { disabled: true },
    render: Input,
  },
  {
    name: 'groupChildren',
    label: 'groupChildren',
    rules: [{ required: true }],
    renderProps: { disabled: true },
    render: Input,
  },
  {
    name: 'renderKey',
    label: 'renderKey',
    rules: [{ required: true }],
    renderProps: { disabled: true },
    render: Input,
  },
  {
    name: 'groupHeaderHeight',
    label: 'groupHeaderHeight',
    rules: [{ required: true }],
    render: Input,
  },
  {
    name: 'groupPadding',
    label: 'groupPadding',
    render: Input,
  },
  {
    name: 'label',
    label: 'label',
    render: Input,
  },
]

private _input: Input | null = null;

{ TextArea } = Input

render() {
        return (
            <Form className="ui-background" layout="inline" onFinish={this.onFinish}>
                <Form.Item name='assetCode' label={('编号')}>
                    <Input />
                </Form.Item>

                <Form.Item name='assetName' label={('名称')}>
                    <Input />
                </Form.Item>

                <Form.Item name='contract' label={('主体')}>
                    <Select style={{ width: 180 }}>
                        <Select.Option value="lucky">lucky</Select.Option>
                        <Select.Option value="dog">dog</Select.Option>
                    </Select>
                </Form.Item>

                <Form.Item name='signDate' label={('时间')}>
                    <DatePicker.RangePicker format='YYYY年MM月DD HH:mm:ss' />
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit"> 查询 </Button>
                </Form.Item>
            </Form>
        )
    }

Login = observer(() => {
  const intl = useIntl();

  const mainStore = useMainStore();

  const [login, setLogin] = useState("");
  const [password, setPassword] = useState("");
  const [performingLoginRequest, setPerformingLoginRequest] = useState(false);

  const changeLogin = useCallback((e: ChangeEvent<HTMLInputElement>) => setLogin(e.target.value), [setLogin]);
  const changePassword = useCallback((e: ChangeEvent<HTMLInputElement>) => setPassword(e.target.value), [setPassword]);

  const doLogin = useCallback(() => {
    setPerformingLoginRequest(true);
    mainStore
      .login(login, password)
      .then(action(() => {
        setPerformingLoginRequest(false);
      }))
      .catch(action((error: JmixServerError) => {
        setPerformingLoginRequest(false);

        const loginMessageErrorIntlId = loginMapJmixRestErrorToIntlId(error);
        message.error(intl.formatMessage({id: loginMessageErrorIntlId}));
      }));
  }, [setPerformingLoginRequest, mainStore, intl, login, password]);

  return (
    <Card className={styles.loginForm}>
      <JmixDarkIcon className={styles.logo} />

      <div className={styles.title}>
        <%= title %>
      </div>

      <Form layout='vertical' onFinish={doLogin}>
        <Form.Item>
          <Input id='input_login'
                  placeholder={intl.formatMessage({id: 'login.placeholder.login'})}
                  onChange={changeLogin}
                  value={login}
                  prefix={<UserOutlined style={{ margin: "0 11px 0 0" }}/>}
                  size='large'/>
        </Form.Item>
        <Form.Item>
          <Input id='input_password'
                  placeholder={intl.formatMessage({id: 'login.placeholder.password'})}
                  onChange={changePassword}
                  value={password}
                  type='password'
                  prefix={<LockOutlined style={{ margin: "0 11px 0 0" }}/>}
                  size='large'/>
        </Form.Item>
        <Form.Item>
          <div className={styles.languageSwitcherContainer}>
            <LanguageSwitcher />
          </div>
        </Form.Item>
        <Form.Item>
          <Button type='primary'
                  htmlType='submit'
                  size='large'
                  block={true}
                  loading={performingLoginRequest}>
            <FormattedMessage id='login.loginBtn'/>
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
})

TextArea = Input.TextArea

{ TextArea } = Input

InputVerify: FC<InputVerifyProps> = props => {
  const {
    sendCode,
    countDown,
    initCodeText,
    reCodeText,
    codeClassname,
    checkPhone,
    ...restProps
  } = props;

  const [codeText, setCodeText] = useState(initCodeText);
  const [codeStatus, setCodeStatus] = useState(false);

  // 处理倒计时时间
  const handleCountDown = (
    timer: ReturnType<typeof setTimeout> | null,
    count: number,
  ) => {
    if (timer) {
      clearTimeout(timer);
    }

    if (count <= 0) {
      setCodeText(reCodeText);
      setCodeStatus(false);
    } else {
      setCodeText(`${count} s`);

      const newTimer: ReturnType<typeof setTimeout> = setTimeout(() => {
        handleCountDown(newTimer, count - 1);
      }, 1000);
    }
  };

  // 处理验证码点击
  const handleCodeClick = () => {
    if (codeStatus) return;
    // 有校验条件但是不通过
    if (checkPhone && !checkPhone()) {
      message.error('请输入正确手机号！');
      return;
    }
    sendCode && sendCode();
    setCodeStatus(true);
    handleCountDown(null, countDown as number);
  };

  const codeCls = classNames('ii-verify-button', codeClassname, {
    'ii-verify-button-disabled': codeStatus,
  });

  return (
    <Input
      data-testid="test-input-verify"
      {...restProps}
      suffix={
        <span className={codeCls} onClick={handleCodeClick}>
          {codeText}
        </span>
      }
    />
  );
}

{ TextArea } = Input