react-select#InputProps TypeScript Examples

The following examples show how to use react-select#InputProps. 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: select-control.tsx    From utopia with MIT License 6 votes vote down vote up 
CustomReactSelectInput = (props: InputProps) => {
  const inputStyle = React.useMemo(() => {
    return {
      label: 'input',
      background: 'transparent',
      border: 0,
      fontSize: 'inherit',
      opacity: props.isHidden ? 0 : 1,
      outline: 0,
      paddingLeft: '4px',
      paddingRight: '4px',
      width: '100%',
      color: 'inherit',
      // default input height minus 1px padding and the border
      // on the outer container
      height: UtopiaTheme.layout.inputHeight.default - 2,
    }
  }, [props.isHidden])

  let strippedProps: any = { ...props }
  delete strippedProps['getStyles']
  delete strippedProps['innerRef']
  delete strippedProps['isHidden']
  delete strippedProps['isDisabled']
  delete strippedProps['cx']
  delete strippedProps['selectProps']

  return (
    <input
      className={props.className}
      style={inputStyle}
      disabled={props.isDisabled}
      {...strippedProps}
    />
  )
}
Example #2
Source File: popup-list.tsx    From utopia with MIT License 6 votes vote down vote up 
Input = (props: InputProps) => {
  const inputStyle = React.useMemo(() => {
    return {
      label: 'input',
      background: 0,
      border: 0,
      fontSize: 'inherit',
      opacity: props.isHidden ? 0 : 1,
      outline: 0,
      padding: 0,
      color: 'inherit',
    }
  }, [props.isHidden])

  let strippedProps: any = { ...props }
  delete strippedProps['getStyles']
  delete strippedProps['innerRef']
  delete strippedProps['isHidden']
  delete strippedProps['isDisabled']
  delete strippedProps['cx']
  delete strippedProps['selectProps']

  return (
    <div>
      <input
        className={props.className}
        style={inputStyle}
        disabled={props.isDisabled}
        {...strippedProps}
      />
    </div>
  )
}
Example #3
Source File: index.tsx    From admin with MIT License 6 votes vote down vote up 
Input = (props: InputProps) => {
  if (
    props.isHidden ||
    !props.selectProps.menuIsOpen ||
    !props.selectProps.isSearchable
  ) {
    return <components.Input {...props} className="pointer-events-none" />
  }

  return (
    <div className="w-full flex items-center h-full space-between">
      <div className="w-full flex items-center">
        <span className="text-grey-40 mr-2">
          <SearchIcon size={20} />
        </span>
        <components.Input {...props} />
      </div>
      <span className="text-grey-40 hover:bg-grey-5 cursor-pointer rounded">
        {typeof props.value === "string" && props.value !== "" && (
          <XCircleIcon size={20} />
        )}
      </span>
    </div>
  )
}
Example #4
Source File: className-subsection.tsx    From utopia with MIT License 5 votes vote down vote up 
Input = (props: InputProps) => {
  const value = (props as any).value
  const isHidden = value.length !== 0 ? false : props.isHidden
  return <components.Input {...props} isHidden={isHidden} />
}
Example #5
Source File: Dropdown.tsx    From contracts-ui with GNU General Public License v3.0 5 votes vote down vote up 
function Input<T>(props: InputProps<DropdownOption<T>, false>) {
  return (
    <components.Input
      {...props}
      inputClassName="dark:text-white outline-none border-none shadow-none focus:ring-transparent"
    />
  );
}