@mui/material#TextFieldProps TypeScript Examples

The following examples show how to use @mui/material#TextFieldProps. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: TextFieldWithTooltip.tsx    From Cromwell with MIT License 6 votes vote down vote up 
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}
        />
    )
}
Example #2
Source File: customFields.tsx    From Cromwell with MIT License 6 votes vote down vote up 
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,
    });
}
Example #3
Source File: PasswordField.tsx    From Cromwell with MIT License 6 votes vote down vote up 
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>
        ),
      }}
    />
  )
}
Example #4
Source File: index.tsx    From houston with MIT License 6 votes vote down vote up 
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}
    />
  );
}
Example #5
Source File: InputBoxWrapper.tsx    From console with GNU Affero General Public License v3.0 6 votes vote down vote up 
function InputField(props: TextFieldProps) {
  const classes = inputStyles();

  return (
    <TextField
      InputProps={{ classes } as Partial<OutlinedInputProps>}
      {...props}
    />
  );
}
Example #6
Source File: LoginPage.tsx    From console with GNU Affero General Public License v3.0 6 votes vote down vote up 
function LoginField(props: TextFieldProps) {
  const classes = inputStyles();

  return (
    <TextField
      classes={{
        root: classes.root,
      }}
      variant="standard"
      {...props}
    />
  );
}
Example #7
Source File: PasswordField.tsx    From frontend with MIT License 6 votes vote down vote up 
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>
        ),
      }}
    />
  )
}
Example #8
Source File: customFields.tsx    From Cromwell with MIT License 5 votes vote down vote up 
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,
            });
        },
    });
}
Example #9
Source File: AutocompleteWrapper.tsx    From console with GNU Affero General Public License v3.0 5 votes vote down vote up 
function InputField(props: TextFieldProps) {
  const classes = inputStyles();

  return (
    <TextField
      InputProps={{ classes } as Partial<OutlinedInputProps>}
      {...props}
    />
  );
}
Example #10
Source File: index.tsx    From ExpressLRS-Configurator with GNU General Public License v3.0 4 votes vote down vote up 
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>
        ),
      }}
    />
  );
}