{"ast":null,"code":"import _toConsumableArray from \"@babel/runtime/helpers/esm/toConsumableArray\";\nimport _taggedTemplateLiteral from \"@babel/runtime/helpers/esm/taggedTemplateLiteral\";\nvar __jsx = React.createElement;\n\nfunction _templateObject() {\n  var data = _taggedTemplateLiteral([\"\\n    display: block;\\n    cursor: pointer;\\n    padding: 0 \", \";\\n    \", \"\\n    line-height: \", \";\\n    \", \"\\n\\n    &:hover {\\n        background-color: \", \";\\n    }\\n\"]);\n\n  _templateObject = function _templateObject() {\n    return data;\n  };\n\n  return data;\n}\n\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 var padding = em(10);\nexport var height = em(36);\nvar minWidth = em(160);\nvar 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}), function (props) {\n  return props.opened ? borderRadiusShortHand('bottom', '0') : '';\n}, transitionProps('border-color'), borderFocusedColor);\nvar 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%'), function (props) {\n  return props.selected ? '' : \"color: \".concat(textLighterColor);\n});\nvar 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)), function (props) {\n  return props.opened ? '180' : '0';\n}, 10 / 14, transitionProps('transform'));\nvar Label = styled.span.withConfig({\n  displayName: \"Select__Label\",\n  componentId: \"sc-1eikgj3-3\"\n})([\"flex-grow:1;padding-right:\", \";\", \"\"], em(10), ellipsis());\nvar 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 * \".concat(height, \" + 2 * \").concat(padding)), padding, borderColor, borderRadiusShortHand('bottom', borderRadius), function (props) {\n  return props.opened ? 'block' : 'none';\n}, function (props) {\n  return props.empty ? {\n    color: textLighterColor,\n    textAlign: 'center'\n  } : '';\n});\nvar listItem = css(_templateObject(), padding, size(height, '100%'), height, transitionProps(['color', 'background-color']), backgroundFocusedColor);\nvar ListItem = styled.div.withConfig({\n  displayName: \"Select__ListItem\",\n  componentId: \"sc-1eikgj3-5\"\n})([\"\", \" \", \" \", \"\"], ellipsis(), listItem, function (props) {\n  return props.selected ? \"color: \".concat(selectedColor, \";\") : '';\n});\nvar MultipleListItem = styled(Checkbox).withConfig({\n  displayName: \"Select__MultipleListItem\",\n  componentId: \"sc-1eikgj3-6\"\n})([\"\", \" display:flex;align-items:center;\"], listItem);\n\nvar Select = function Select(_ref) {\n  var propList = _ref.list,\n      propValue = _ref.value,\n      placeholder = _ref.placeholder,\n      multiple = _ref.multiple,\n      className = _ref.className,\n      onChange = _ref.onChange;\n\n  var _useTranslation = useTranslation('common'),\n      t = _useTranslation.t;\n\n  var _useState = useState(false),\n      isOpened = _useState[0],\n      setIsOpened = _useState[1];\n\n  var toggleOpened = useCallback(function () {\n    return setIsOpened(!isOpened);\n  }, [isOpened]);\n  var setIsOpenedFalse = useCallback(function () {\n    return setIsOpened(false);\n  }, []);\n\n  var _useState2 = useState(multiple ? Array.isArray(propValue) ? propValue : [] : propValue),\n      value = _useState2[0],\n      setValue = _useState2[1];\n\n  useEffect(function () {\n    return setValue(multiple ? Array.isArray(propValue) ? propValue : [] : propValue);\n  }, [multiple, propValue, setValue]);\n  var isSelected = useMemo(function () {\n    return !!(multiple ? value && value.length !== 0 : value);\n  }, [multiple, value]);\n  var changeValue = useCallback(function (mutateValue, checked) {\n    var newValue;\n\n    if (multiple) {\n      newValue = value;\n\n      if (checked) {\n        if (!newValue.includes(mutateValue)) {\n          newValue = [].concat(_toConsumableArray(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  var ref = useClickOutside(setIsOpenedFalse);\n  var list = useMemo(function () {\n    var _propList$map;\n\n    return (_propList$map = propList === null || propList === void 0 ? void 0 : propList.map(function (item) {\n      return 'string' === typeof item ? {\n        value: item,\n        label: item\n      } : item;\n    })) !== null && _propList$map !== void 0 ? _propList$map : [];\n  }, [propList]);\n  var isListEmpty = useMemo(function () {\n    return list.length === 0;\n  }, [list]);\n  var findLabelByValue = useCallback(function (v) {\n    var _list$find$label, _list$find;\n\n    return (_list$find$label = (_list$find = list.find(function (item) {\n      return item.value === v;\n    })) === null || _list$find === void 0 ? void 0 : _list$find.label) !== null && _list$find$label !== void 0 ? _list$find$label : '';\n  }, [list]);\n  var label = useMemo(function () {\n    return isSelected ? multiple ? value.map(findLabelByValue).join(' / ') : findLabelByValue(value) : placeholder || t('select');\n  }, [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(function (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: function onChange(checked) {\n          return changeValue(item.value, checked);\n        }\n      }, item.label);\n    }\n\n    return __jsx(ListItem, {\n      selected: item.value === value,\n      key: index,\n      title: item.label,\n      onClick: function onClick() {\n        return changeValue(item.value);\n      }\n    }, item.label);\n  })));\n};\n\nexport default Select;","map":null,"metadata":{},"sourceType":"module"}