@mui/material#TextFieldProps TypeScript Examples

export default function TextFieldWithTooltip(props: TextFieldProps & {
    tooltipText?: string;
    tooltipLink?: string;
}) {
    const history = useHistory();

    const openLink = () => {
        if (props.tooltipLink) {
            if (props.tooltipLink.startsWith('http')) {
                window.open(props.tooltipLink, '_blank');
            } else {
                history.push(props.tooltipLink);
            }
        }
    }

    return (
        <TextField
            InputProps={{
                endAdornment: (
                    <InputAdornment position="end">
                        <Tooltip title={props.tooltipText}>
                            <IconButton onClick={openLink}>
                                <HelpOutlineOutlined />
                            </IconButton>
                        </Tooltip>
                    </InputAdornment>
                ),
            }}
            variant="standard"
            {...props}
        />
    )
}

registerSimpleTextCustomField = (settings: {
    entityType: EDBEntity | string;
    key: string;
    label?: string;
    props?: TextFieldProps;
}) => {
    let customFieldValue;

    registerCustomField({
        id: getRandStr(10),
        fieldType: 'Simple text',
        ...settings,
        component: (props) => {
            const [value, setValue] = useInitialValue(props.initialValue);
            customFieldValue = value;

            return <TextField
                value={value ?? ''}
                onChange={e => {
                    setValue(e.target.value);
                }}
                label={settings.label ?? settings.key}
                fullWidth
                variant="standard"
                style={{ marginBottom: '15px' }}
                {...(settings.props ?? {})}
            />
        },
        saveData: () => (!customFieldValue) ? null : customFieldValue,
    });
}

PasswordField = (props: TextFieldProps) => {
  const [showPassword, setShowPassword] = useState(false);

  const handleClickShowPassword = () => {
    setShowPassword(!showPassword);
  }

  return (
    <TextField {...props}
      type={showPassword ? 'text' : 'password'}
      variant="standard"
      size="small"
      className={styles.textField}
      InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            <IconButton
              aria-label="toggle password visibility"
              onClick={handleClickShowPassword}
              edge="end"
            >
              {showPassword ? <VisibilityIcon /> : <VisibilityOffIcon />}
            </IconButton>
          </InputAdornment>
        ),
      }}
    />
  )
}

RenderInput: React.FC<TextFieldProps & IInputProps> = ({
  inputRef,
  inputProps: { onChange, onBlur, ...inputProps },
  InputProps
}) => {
  const handleChange = React.useCallback(
    (v: any, e: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) => onChange(e),
    [onChange]
  );

  const handleBlur = React.useCallback(
    (v: any, e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => onBlur(e),
    [onBlur]
  );

  return (
    <Input
      ref={inputRef as any}
      {...(inputProps as any)}
      {...InputProps}
      name={null}
      onChange={handleChange}
      onBlur={handleBlur}
    />
  );
}

function InputField(props: TextFieldProps) {
  const classes = inputStyles();

  return (
    <TextField
      InputProps={{ classes } as Partial<OutlinedInputProps>}
      {...props}
    />
  );
}

function LoginField(props: TextFieldProps) {
  const classes = inputStyles();

  return (
    <TextField
      classes={{
        root: classes.root,
      }}
      variant="standard"
      {...props}
    />
  );
}

export default function PasswordField({ name = 'password', ...props }: TextFieldProps) {
  const [showPassword, setShowPassword] = useState(false)
  const handleShowPassword = () => setShowPassword((show) => !show)
  return (
    <FormTextField
      name={name}
      {...props}
      type={showPassword ? 'text' : 'password'}
      autoComplete="current-password"
      label="auth:fields.password"
      InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            <IconButton onClick={handleShowPassword} edge="end">
              {showPassword ? <Visibility /> : <VisibilityOff />}
            </IconButton>
          </InputAdornment>
        ),
      }}
    />
  )
}

registerTextEditorCustomField = (settings: {
    entityType: EDBEntity | string;
    key: string;
    label?: string;
    props?: TextFieldProps;
}) => {
    const editorId = 'editor_' + getRandStr(12);

    registerCustomField({
        id: getRandStr(10),
        fieldType: 'Text editor',
        ...settings,
        component: (props) => {
            const initialValueRef = useRef<null | string>(null);

            const initEditor = async () => {
                let data: {
                    html: string;
                    json: string;
                } | undefined = undefined;

                if (initialValueRef.current) {
                    try {
                        data = JSON.parse(initialValueRef.current);
                    } catch (error) {
                        console.error(error);
                    }
                }

                await initTextEditor({
                    htmlId: editorId,
                    data: data?.json,
                    placeholder: settings.label,
                });
            }

            useEffect(() => {
                if (props.initialValue !== initialValueRef.current) {
                    initialValueRef.current = props.initialValue;
                    initEditor();
                }
            });

            return (
                <div style={{ margin: '15px 0' }}
                    className={entityEditStyles.descriptionEditor}>
                    <div style={{ height: '350px' }} id={editorId}></div>
                </div>
            )
        },
        saveData: async () => {
            const json = await getEditorData(editorId);
            if (!json?.blocks?.length) return null;
            const html = await getEditorHtml(editorId);
            return JSON.stringify({
                html,
                json,
            });
        },
    });
}

function InputField(props: TextFieldProps) {
  const classes = inputStyles();

  return (
    <TextField
      InputProps={{ classes } as Partial<OutlinedInputProps>}
      {...props}
    />
  );
}

SensitiveTextField: FunctionComponent<TextFieldProps> = ({
  ...props
}) => {
  const [showData, setShowData] = useState(false);

  useEffect(() => {
    (async () => {
      const storage = new ApplicationStorage();
      const showFieldData = props.name
        ? await storage.getShowSensitiveFieldData(props.name)
        : false;
      setShowData(showFieldData ?? false);
    })();
  }, []);

  const onVisibilityChange = () => {
    setShowData((value) => {
      const newValue = !value;
      if (props.name) {
        const storage = new ApplicationStorage();
        storage.setShowSensitiveFieldData(props.name, newValue);
      }
      return newValue;
    });
  };
  return (
    <TextField
      {...props}
      type={showData ? 'text' : 'password'}
      InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            <IconButton
              onClick={onVisibilityChange}
              onMouseDown={onVisibilityChange}
            >
              {showData ? <VisibilityOff /> : <Visibility />}
            </IconButton>
          </InputAdornment>
        ),
      }}
    />
  );
}