antd/lib/input#InputProps TypeScript Examples

CharInput = forwardRef((props: InputProps, ref: Ref<Input>) => {
  const {className = '', ...rest} = props;
  return (
    <Input 
      {...rest}
      ref={ref}
      maxLength={1}
      className={classNames(
        className,
        styles.charInputField
      )} 
    />
  );
})

StartWorkflowHints = ({
  value: originValue,
  onChange,
  ...rest
}: { value?: WorkflowHint[]; onChange?: (value: WorkflowHint[]) => void } & Omit<InputProps, 'value' | 'onChange'>) => {
  const [value, setValue] = React.useState<WorkflowHint[]>(originValue || []);
  const handleChange = (place: WorkflowHint['place'], v: string) => {
    const newValue = produce(originValue || value, (draft) => {
      const index = draft.findIndex((item) => item.place === place);
      const hint = {
        place,
        changeBranchRule: v,
      };
      if (index === -1) {
        draft.push(hint);
      } else {
        draft.splice(index, 1, hint);
      }
    });
    if (!originValue) {
      setValue(newValue);
    }
    onChange?.(newValue);
  };

  return (
    <>
      {workflowHints.map((hint, index) => {
        const v = (originValue || value).find((t) => t.place === hint.place)?.changeBranchRule;
        return (
          <div key={hint.place} className={index === 0 ? '' : 'mt-2'}>
            <Input
              {...rest}
              addonBefore={hint.name}
              placeholder={i18n.t('start with letters and can contain')}
              value={v}
              onChange={(e) => {
                handleChange(hint.place, e.target.value);
              }}
            />
          </div>
        );
      })}
    </>
  );
}

export function registerInput(
  loader?: Registerable,
  customInputMeta?: ComponentMeta<InputProps>
) {
  const doRegisterComponent: typeof registerComponent = (...args) =>
    loader ? loader.registerComponent(...args) : registerComponent(...args);
  doRegisterComponent(Input, customInputMeta ?? inputMeta);
}

inputMeta: ComponentMeta<InputProps> = {
  name: "AntdInput",
  displayName: "Antd Input",
  props: sortProps<InputProps>({
    ...commonHtmlAttributes,
    addonAfter: {
      type: "slot",
      hidePlaceholder: true,
    },
    addonBefore: {
      type: "slot",
      hidePlaceholder: true,
    },
    allowClear: {
      type: "boolean",
      description: "If allow to remove input content with clear icon",
      defaultValueHint: false,
    },
    bordered: {
      type: "boolean",
      description: "Whether has border style",
      defaultValueHint: true,
    },
    disabled: {
      type: "boolean",
      description: "Whether the input is disabled",
      defaultValueHint: false,
    },
    id: {
      type: "string",
      description: "The ID for input",
    },
    maxLength: {
      type: "number",
      description: "The max length",
    },
    placeholder: {
      type: "string",
      description: "Placeholder for the input",
    },
    prefix: {
      type: "slot",
      hidePlaceholder: true,
    },
    size: {
      type: "choice",
      options: ["small", "middle", "large"],
      description: "The size of the input box",
      defaultValueHint: "middle,",
    },
    suffix: {
      type: "slot",
      hidePlaceholder: true,
    },
    type: {
      type: "string",
      description: "The type of input",
      defaultValueHint: "text",
    },
    value: {
      type: "string",
      editOnly: true,
      uncontrolledProp: "defaultValue",
    },
  }),
  importPath: "antd/lib/input",
  importName: "Input",
  isDefaultExport: true,
}

ColoringInput: React.FunctionComponent<InputProps> = props => {
  const env = useSelector(selectCurrentEnv);
  const varMap = React.useMemo(() => {
    return env ? toVarMap(env) : {};
  }, [env]);

  const { value, placeholder, addonBefore, addonAfter, size } = props;
  const newProps = produce(props, draft => {
    delete draft.addonBefore;
    delete draft.addonAfter;
    delete draft.placeholder;
    if (draft.style) {
      delete draft.style.width;
    }
  });
  const width = props.style?.width;
  const offsets = size === 'small' ? small : medium;

  const ph = <span style={{ color: '#a9a9a9' }}>{placeholder}</span>;

  const [clientWidth, setClientWidth] = React.useState(0);
  const inputRef = React.useRef<Input>(null);
  const fakeInputRef = React.useRef<HTMLDivElement>(null);

  React.useEffect(() => {
    if (inputRef.current && fakeInputRef.current) {
      const input = inputRef.current.input;
      const fakeInput = fakeInputRef.current;

      setClientWidth(input.clientWidth);

      const syncScroll = (): void => {
        fakeInput.scrollTo(input.scrollLeft, 0);
      };

      INSERTION_POINT_CHANGING_EVENTS.forEach(type => {
        input.addEventListener(type, syncScroll);
      });

      return (): void => {
        INSERTION_POINT_CHANGING_EVENTS.forEach(type => {
          inputRef.current?.input?.removeEventListener(type, syncScroll);
        });
      };
    }
  }, [inputRef.current, fakeInputRef.current]);

  const str = (value || '').toString();
  const coloredInputStr = materializeSpans(str, colorIntervals(str, varMap));

  return (
    <Wrapper style={{ width }}>
      {addonBefore ? <AddonBeforeWrapper>{addonBefore}</AddonBeforeWrapper> : null}
      <InputWrapper>
        <FakeInputWrapper style={{ ...offsets, width: '100%' }}>
          <FakeInput ref={fakeInputRef}>{value ? coloredInputStr : ph}</FakeInput>
        </FakeInputWrapper>
        <ModInput ref={inputRef} {...newProps} />
      </InputWrapper>
      {addonAfter ? <AddonAfterWrapper>{addonAfter}</AddonAfterWrapper> : null}
    </Wrapper>
  );
}