react/components/select/select.tsx

import React, { CSSProperties, useEffect, useMemo, useRef, useState } from 'react'
import { NormalTypes } from '../utils/prop-types'
import useTheme from '../use-theme'
import useClickAway from '../utils/use-click-away'
import useCurrentState from '../utils/use-current-state'
import { pickChildByProps } from '../utils/collections'
import SelectIcon from './select-icon'
import SelectDropdown from './select-dropdown'
import SelectMultipleValue from './select-multiple-value'
import Grid from '../grid'
import { SelectContext, SelectConfig } from './select-context'
import { getColors } from './styles'
import Ellipsis from '../shared/ellipsis'
import useScaleable, { withScaleable } from '../use-scaleable'

export type SelectTypes = NormalTypes
interface Props {
  disabled?: boolean
  type?: SelectTypes
  value?: string | string[]
  initialValue?: string | string[]
  placeholder?: React.ReactNode | string
  icon?: React.ComponentType
  onChange?: (value: string | string[]) => void
  pure?: boolean
  multiple?: boolean
  clearable?: boolean
  className?: string
  dropdownClassName?: string
  dropdownStyle?: CSSProperties
  disableMatchWidth?: boolean
  getPopupContainer?: () => HTMLElement | null
}

const defaultProps = {
  disabled: false,
  type: 'default' as SelectTypes,
  icon: SelectIcon as React.ComponentType,
  pure: false,
  multiple: false,
  clearable: true,
  className: '',
  disableMatchWidth: false,
}

type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
export type SelectProps = Props & NativeAttrs

const SelectComponent: React.FC<React.PropsWithChildren<SelectProps>> = ({
  children,
  type,
  disabled,
  initialValue: init,
  value: customValue,
  icon: Icon,
  onChange,
  pure,
  multiple,
  clearable,
  placeholder,
  className,
  dropdownClassName,
  dropdownStyle,
  disableMatchWidth,
  getPopupContainer,
  ...props
}: React.PropsWithChildren<SelectProps> & typeof defaultProps) => {
  const theme = useTheme()
  const { SCALES } = useScaleable()
  const ref = useRef<HTMLDivElement>(null)
  const [visible, setVisible] = useState<boolean>(false)
  const [value, setValue, valueRef] = useCurrentState<string | string[] | undefined>(
    () => {
      if (!multiple) return init
      if (Array.isArray(init)) return init
      return typeof init === 'undefined' ? [] : [init]
    },
  )
  const isEmpty = useMemo(() => {
    if (!Array.isArray(value)) return !value
    return value.length === 0
  }, [value])

  const { border, borderHover, iconBorder, placeholderColor } = useMemo(
    () => getColors(theme.palette, type),
    [theme.palette, type],
  )

  const updateVisible = (next: boolean) => setVisible(next)
  const updateValue = (next: string) => {
    setValue(last => {
      if (!Array.isArray(last)) return next
      if (!last.includes(next)) return [...last, next]
      return last.filter(item => item !== next)
    })
    onChange && onChange(valueRef.current as string | string[])
    if (!multiple) {
      setVisible(false)
    }
  }

  const initialValue: SelectConfig = useMemo(
    () => ({
      value,
      visible,
      updateValue,
      updateVisible,
      ref,
      disableAll: disabled,
    }),
    [visible, disabled, ref, value, multiple],
  )

  const clickHandler = (event: React.MouseEvent<HTMLDivElement>) => {
    event.stopPropagation()
    event.nativeEvent.stopImmediatePropagation()
    event.preventDefault()
    if (disabled) return
    setVisible(!visible)
  }

  useClickAway(ref, () => setVisible(false))
  useEffect(() => {
    if (customValue === undefined) return
    setValue(customValue)
  }, [customValue])

  const selectedChild = useMemo(() => {
    const [, optionChildren] = pickChildByProps(children, 'value', value)
    return React.Children.map(optionChildren, child => {
      if (!React.isValidElement(child)) return null
      const el = React.cloneElement(child, { preventAllEvents: true })
      if (!multiple) return el
      return (
        <SelectMultipleValue
          disabled={disabled}
          onClear={clearable ? () => updateValue(child.props.value) : null}>
          {el}
        </SelectMultipleValue>
      )
    })
  }, [value, children, multiple])

  return (
    <SelectContext.Provider value={initialValue}>
      <div
        className={`select ${multiple ? 'multiple' : ''} ${className}`}
        ref={ref}
        onClick={clickHandler}
        {...props}>
        {isEmpty && (
          <span className="value placeholder">
            <Ellipsis height="var(--select-height)">{placeholder}</Ellipsis>
          </span>
        )}
        {value && !multiple && <span className="value">{selectedChild}</span>}
        {value && multiple && <Grid.Container gap={0.5}>{selectedChild}</Grid.Container>}
        <SelectDropdown
          visible={visible}
          className={dropdownClassName}
          dropdownStyle={dropdownStyle}
          disableMatchWidth={disableMatchWidth}
          getPopupContainer={getPopupContainer}>
          {children}
        </SelectDropdown>
        {!pure && (
          <div className="icon">
            <Icon />
          </div>
        )}
        <style jsx>{`
          .select {
            display: inline-flex;
            align-items: center;
            user-select: none;
            white-space: nowrap;
            position: relative;
            cursor: ${disabled ? 'not-allowed' : 'pointer'};
            max-width: 90vw;
            overflow: hidden;
            transition: border 150ms ease-in 0s, color 200ms ease-out 0s,
              box-shadow 200ms ease 0s;
            border: 1px solid ${border};
            border-radius: ${theme.layout.radius};

            background-color: ${disabled
              ? theme.palette.accents_1
              : theme.palette.background};
            --select-font-size: ${SCALES.font(0.875)};
            --select-height: ${SCALES.height(2.25)};
            min-width: 11.5em;
            width: ${SCALES.width(1, 'initial')};
            height: var(--select-height);
            padding: ${SCALES.pt(0)} ${SCALES.pr(0.334)} ${SCALES.pb(0)}
              ${SCALES.pl(0.667)};
            margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};
          }

          .multiple {
            height: auto;
            min-height: var(--select-height);
            padding: ${SCALES.pt(0.334)} ${SCALES.pr(0.334)} ${SCALES.pb(0.334)}
              ${SCALES.pl(0.667)};
          }

          .select:hover {
            border-color: ${disabled ? theme.palette.border : borderHover};
          }

          .select:hover .icon {
            color: ${disabled ? theme.palette.accents_5 : borderHover};
          }

          .value {
            display: inline-flex;
            flex: 1;
            height: 100%;
            align-items: center;
            line-height: 1;
            padding: 0;
            margin-right: 1.25em;
            font-size: var(--select-font-size);
            color: ${disabled ? theme.palette.accents_4 : theme.palette.foreground};
            width: calc(100% - 1.25em);
          }

          .value > :global(div),
          .value > :global(div:hover) {
            border-radius: 0;
            background-color: transparent;
            padding: 0;
            margin: 0;
            color: inherit;
          }

          .placeholder {
            color: ${placeholderColor};
          }

          .icon {
            position: absolute;
            right: ${theme.layout.gapQuarter};
            font-size: var(--select-font-size);
            top: 50%;
            bottom: 0;
            transform: translateY(-50%) rotate(${visible ? '180' : '0'}deg);
            pointer-events: none;
            transition: transform 200ms ease;
            display: flex;
            align-items: center;
            color: ${iconBorder};
          }
        `}</style>
      </div>
    </SelectContext.Provider>
  )
}

SelectComponent.defaultProps = defaultProps
SelectComponent.displayName = 'GeistSelect'
const Select = withScaleable(SelectComponent)
export default Select