{"ast":null,"code":"var __jsx = React.createElement;\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { backgroundColor, backgroundFocusedColor, borderColor, borderFocusedColor, borderRadius, borderRadiusShortHand, css, ellipsis, em, math, sameBorder, selectedColor, size, textLighterColor, transitionProps } from '~/utils/style';\nimport Checkbox from '~/components/Checkbox';\nimport Icon from '~/components/Icon';\nimport styled from 'styled-components';\nimport useClickOutside from '~/hooks/useClickOutside';\nimport { useTranslation } from '~/utils/i18n';\nimport without from 'lodash/without';\nexport const padding = em(10);\nexport const height = em(36);\nconst minWidth = em(160);\nconst Wrapper = styled.div.withConfig({\n  displayName: \"Select__Wrapper\",\n  componentId: \"sc-1eikgj3-0\"\n})([\"height:\", \";line-height:calc(\", \" - 2px);min-width:\", \";max-width:100%;display:inline-block;position:relative;background-color:\", \";\", \" \", \" \", \" &:hover{border-color:\", \";}\"], height, height, minWidth, backgroundColor, sameBorder({\n  radius: true\n}), props => props.opened ? borderRadiusShortHand('bottom', '0') : '', transitionProps('border-color'), borderFocusedColor);\nconst Trigger = styled.div.withConfig({\n  displayName: \"Select__Trigger\",\n  componentId: \"sc-1eikgj3-1\"\n})([\"padding:\", \";display:inline-flex;\", \" justify-content:space-between;align-items:center;cursor:pointer;\", \"\"], padding, size('100%'), props => props.selected ? '' : `color: ${textLighterColor}`);\nconst TriggerIcon = styled(Icon).withConfig({\n  displayName: \"Select__TriggerIcon\",\n  componentId: \"sc-1eikgj3-2\"\n})([\"\", \" text-align:center;display:block;flex-shrink:0;transform:rotate(\", \"deg) scale(\", \");\", \"\"], size(em(14)), props => props.opened ? '180' : '0', 10 / 14, transitionProps('transform'));\nconst Label = styled.span.withConfig({\n  displayName: \"Select__Label\",\n  componentId: \"sc-1eikgj3-3\"\n})([\"flex-grow:1;padding-right:\", \";\", \"\"], em(10), ellipsis());\nconst List = styled.div.withConfig({\n  displayName: \"Select__List\",\n  componentId: \"sc-1eikgj3-4\"\n})([\"position:absolute;top:100%;width:calc(100% + 2px);max-height:\", \";overflow-x:hidden;overflow-y:auto;left:-1px;padding:\", \" 0;border:inherit;border-top-color:\", \";\", \" display:\", \";z-index:9999;line-height:1;background-color:inherit;box-shadow:0 5px 6px 0 rgba(0,0,0,0.05);\", \"\"], math(`4.35 * ${height} + 2 * ${padding}`), padding, borderColor, borderRadiusShortHand('bottom', borderRadius), props => props.opened ? 'block' : 'none', props => props.empty ? {\n  color: textLighterColor,\n  textAlign: 'center'\n} : '');\nconst listItem = css`\n    display: block;\n    cursor: pointer;\n    padding: 0 ${padding};\n    ${size(height, '100%')}\n    line-height: ${height};\n    ${transitionProps(['color', 'background-color'])}\n\n    &:hover {\n        background-color: ${backgroundFocusedColor};\n    }\n`;\nconst ListItem = styled.div.withConfig({\n  displayName: \"Select__ListItem\",\n  componentId: \"sc-1eikgj3-5\"\n})([\"\", \" \", \" \", \"\"], ellipsis(), listItem, props => props.selected ? `color: ${selectedColor};` : '');\nconst MultipleListItem = styled(Checkbox).withConfig({\n  displayName: \"Select__MultipleListItem\",\n  componentId: \"sc-1eikgj3-6\"\n})([\"\", \" display:flex;align-items:center;\"], listItem);\n\nconst Select = ({\n  list: propList,\n  value: propValue,\n  placeholder,\n  multiple,\n  className,\n  onChange\n}) => {\n  const {\n    t\n  } = useTranslation('common');\n  const {\n    0: isOpened,\n    1: setIsOpened\n  } = useState(false);\n  const toggleOpened = useCallback(() => setIsOpened(!isOpened), [isOpened]);\n  const setIsOpenedFalse = useCallback(() => setIsOpened(false), []);\n  const {\n    0: value,\n    1: setValue\n  } = useState(multiple ? Array.isArray(propValue) ? propValue : [] : propValue);\n  useEffect(() => setValue(multiple ? Array.isArray(propValue) ? propValue : [] : propValue), [multiple, propValue, setValue]);\n  const isSelected = useMemo(() => !!(multiple ? value && value.length !== 0 : value), [multiple, value]);\n  const changeValue = useCallback((mutateValue, checked) => {\n    let newValue;\n\n    if (multiple) {\n      newValue = value;\n\n      if (checked) {\n        if (!newValue.includes(mutateValue)) {\n          newValue = [...newValue, mutateValue];\n        }\n      } else {\n        if (newValue.includes(mutateValue)) {\n          newValue = without(newValue, mutateValue);\n        }\n      }\n    } else {\n      newValue = mutateValue;\n    }\n\n    setValue(newValue);\n    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);\n\n    if (!multiple) {\n      setIsOpenedFalse();\n    }\n  }, [multiple, value, setIsOpenedFalse, onChange]);\n  const ref = useClickOutside(setIsOpenedFalse);\n  const list = useMemo(() => {\n    var _propList$map;\n\n    return (_propList$map = propList === null || propList === void 0 ? void 0 : propList.map(item => 'string' === typeof item ? {\n      value: item,\n      label: item\n    } : item)) !== null && _propList$map !== void 0 ? _propList$map : [];\n  }, [propList]);\n  const isListEmpty = useMemo(() => list.length === 0, [list]);\n  const findLabelByValue = useCallback(v => {\n    var _list$find$label, _list$find;\n\n    return (_list$find$label = (_list$find = list.find(item => item.value === v)) === null || _list$find === void 0 ? void 0 : _list$find.label) !== null && _list$find$label !== void 0 ? _list$find$label : '';\n  }, [list]);\n  const label = useMemo(() => isSelected ? multiple ? value.map(findLabelByValue).join(' / ') : findLabelByValue(value) : placeholder || t('select'), [multiple, value, findLabelByValue, isSelected, placeholder, t]);\n  return __jsx(Wrapper, {\n    ref: ref,\n    opened: isOpened,\n    className: className\n  }, __jsx(Trigger, {\n    onClick: toggleOpened,\n    selected: isSelected,\n    title: isSelected && label ? String(label) : ''\n  }, __jsx(Label, null, label), __jsx(TriggerIcon, {\n    opened: isOpened,\n    type: \"chevron-down\"\n  })), __jsx(List, {\n    opened: isOpened,\n    empty: isListEmpty\n  }, isListEmpty ? t('empty') : list.map((item, index) => {\n    if (multiple) {\n      return __jsx(MultipleListItem, {\n        value: value.includes(item.value),\n        key: index,\n        title: item.label,\n        size: \"small\",\n        onChange: checked => changeValue(item.value, checked)\n      }, item.label);\n    }\n\n    return __jsx(ListItem, {\n      selected: item.value === value,\n      key: index,\n      title: item.label,\n      onClick: () => changeValue(item.value)\n    }, item.label);\n  })));\n};\n\nexport default Select;","map":null,"metadata":{},"sourceType":"module"}