@mui/material#OutlinedInput TypeScript Examples

The following examples show how to use @mui/material#OutlinedInput. 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: CredentialItem.tsx    From console with GNU Affero General Public License v3.0 6 votes vote down vote up 
CredentialItem = ({
  label = "",
  value = "",
  classes = {},
}: {
  label: string;
  value: string;
  classes: any;
}) => {
  return (
    <div className={classes.container}>
      <div className={classes.inputLabel}>{label}:</div>
      <div className={classes.inputWithCopy}>
        <OutlinedInput
          value={value}
          readOnly
          endAdornment={
            <InputAdornment position="end">
              <CopyToClipboard text={value}>
                <BoxIconButton
                  aria-label="copy"
                  tooltip={"Copy"}
                  onClick={() => {}}
                  onMouseDown={() => {}}
                  edge="end"
                >
                  <CopyIcon />
                </BoxIconButton>
              </CopyToClipboard>
            </InputAdornment>
          }
        />
      </div>
    </div>
  );
}
Example #2
Source File: MultiSelect.tsx    From multi-downloader-nx with MIT License 5 votes vote down vote up 
MultiSelect: React.FC<MultiSelectProps> = (props) => {
  const theme = useTheme();

  return <div>
    <FormControl sx={{ m: 1, width: 300 }}>
      <InputLabel id="multi-select-label">{props.title}</InputLabel>
      <Select
        labelId="multi-select-label"
        id="multi-select"
        multiple
        value={(props.selected ?? [])}
        onChange={e => {
          const val = typeof e.target.value === "string" ? e.target.value.split(",") : e.target.value;
          if (props.allOption && val.includes('all')) {
            if (props.values.length === val.length - 1)
              props.onChange([]);
            else 
              props.onChange(props.values);
          } else {
            props.onChange(val);
          }
        }}
        input={<OutlinedInput id="select-multiple-chip" label={props.title} />}
        renderValue={(selected) => (
          selected.join(', ')
        )}
        MenuProps={MenuProps}
      >
        {props.values.concat(props.allOption ? 'all' : []).map((name) => (
          <MenuItem
            key={`${props.title}_${name}`}
            value={name}
            style={getStyles(name, props.selected, theme)}
          >
            {name}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  </div>
}
Example #3
Source File: StringNumberFilterField.tsx    From firecms with MIT License 4 votes vote down vote up 
export function StringNumberFilterField({
                                            name,
                                            value,
                                            setValue,
                                            dataType,
                                            isArray,
                                            enumValues,
                                            title
                                        }: StringNumberFilterFieldProps) {

    const possibleOperations: (keyof typeof operationLabels) [] = isArray
        ? ["array-contains"]
        : ["==", "!=", ">", "<", ">=", "<="];

    if (enumValues)
        isArray
            ? possibleOperations.push("array-contains-any")
            : possibleOperations.push("in");

    const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
    const [operation, setOperation] = useState<TableWhereFilterOp>(fieldOperation);
    const [internalValue, setInternalValue] = useState<string | number | string[] | number[] | undefined>(fieldValue);

    function updateFilter(op: TableWhereFilterOp, val: string | number | string[] | number[] | undefined) {
        let newValue = val;
        const prevOpIsArray = multipleSelectOperations.includes(operation);
        const newOpIsArray = multipleSelectOperations.includes(op);
        if (prevOpIsArray !== newOpIsArray) {
            // @ts-ignore
            newValue = newOpIsArray ? (typeof val === "string" || typeof val === "number" ? [val] : []) : "";
        }

        if (typeof newValue === "number" && isNaN(newValue))
            newValue = undefined;

        setOperation(op);
        setInternalValue(newValue);

        const hasNewValue = newValue !== null && Array.isArray(newValue)
            ? newValue.length > 0
            : newValue !== undefined;
        if (op && hasNewValue) {
            setValue(
                [op, newValue]
            );
        } else {
            setValue(
                undefined
            );
        }
    }

    const multiple = multipleSelectOperations.includes(operation);
    return (

        <Box display={"flex"} width={340} alignItems={"center"}>
            <Box width={80}>
                <FormControl fullWidth>
                    <MuiSelect value={operation}
                               fullWidth
                               onChange={(evt: any) => {
                                   updateFilter(evt.target.value, internalValue);
                               }}>
                        {possibleOperations.map((op) =>
                            <MenuItem
                                key={`filter_op_${name}_${op}`}
                                value={op}>{operationLabels[op]}</MenuItem>
                        )}

                    </MuiSelect>
                </FormControl>
            </Box>

            <Box flexGrow={1} ml={1}>

                <FormControl fullWidth>
                    {!enumValues && <OutlinedInput
                        fullWidth
                        key={`filter_${name}`}
                        type={dataType === "number" ? "number" : undefined}
                        value={internalValue !== undefined ? internalValue : ""}
                        onChange={(evt) => {
                            const val = dataType === "number"
                                ? parseFloat(evt.target.value)
                                : evt.target.value;
                            updateFilter(operation, val);
                        }}
                    />}

                    {enumValues &&
                    <MuiSelect
                        fullWidth
                        key={`filter-select-${multiple}-${name}`}
                        multiple={multiple}
                        value={internalValue !== undefined ? internalValue : isArray ? [] : ""}
                        onChange={(evt: any) => updateFilter(operation, dataType === "number" ? parseInt(evt.target.value) : evt.target.value)}
                        renderValue={multiple
? (selected: any) =>
                            (
                                <div>
                                    {selected.map((enumKey: any) => {
                                        return <EnumValuesChip
                                            key={`select_value_${name}_${enumKey}`}
                                            enumKey={enumKey}
                                            enumValues={enumValues}
                                            small={true}/>;
                                    })}
                                </div>
                            )
: undefined}>
                        {Object.entries(enumValues).map(([enumKey, labelOrConfig]) => {
                            return (
                                <MenuItem
                                    key={`select_${name}_${enumKey}`}
                                    value={enumKey}>
                                    <EnumValuesChip
                                        enumKey={enumKey}
                                        enumValues={enumValues}
                                        small={true}/>
                                </MenuItem>
                            );
                        })}
                    </MuiSelect>}
                </FormControl>
            </Box>

            {internalValue !== undefined && <Box ml={1}>
                <IconButton
                    onClick={(e) => updateFilter(operation, undefined)}
                    size={"small"}>
                    <Tooltip title={`Clear ${title}`}>
                        <ClearIcon fontSize={"small"}/>
                    </Tooltip>
                </IconButton>
            </Box>}

        </Box>
    );

}