{"ast":null,"code":"import _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\nvar __jsx = React.createElement;\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { ellipsis, math, rem } from '~/utils/style';\nimport SearchInput from '~/components/SearchInput';\nimport Tag from '~/components/Tag';\nimport groupBy from 'lodash/groupBy';\nimport sortBy from 'lodash/sortBy';\nimport styled from 'styled-components';\nimport { useTranslation } from '~/utils/i18n';\nvar margin = rem(16);\nvar Wrapper = styled.div.withConfig({\n  displayName: \"TagFilter__Wrapper\",\n  componentId: \"eb8d6o-0\"\n})([\"display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;\"]);\nvar Search = styled(SearchInput).withConfig({\n  displayName: \"TagFilter__Search\",\n  componentId: \"eb8d6o-1\"\n})([\"width:\", \";margin:0 \", \" \", \" 0;\"], rem(280), math(\"\".concat(rem(5), \" + \").concat(margin)), margin);\nvar SearchTag = styled(Tag).withConfig({\n  displayName: \"TagFilter__SearchTag\",\n  componentId: \"eb8d6o-2\"\n})([\"margin:0 \", \" \", \" 0;vertical-align:middle;\"], margin, margin);\nvar SearchTagLabel = styled.span.withConfig({\n  displayName: \"TagFilter__SearchTagLabel\",\n  componentId: \"eb8d6o-3\"\n})([\"\", \" vertical-align:middle;\"], ellipsis(rem(120)));\n\nvar TagFilter = function TagFilter(_ref) {\n  var _propTags$length, _propTags$length3;\n\n  var value = _ref.value,\n      propTags = _ref.tags,\n      onChange = _ref.onChange;\n\n  var _useTranslation = useTranslation('common'),\n      t = _useTranslation.t;\n\n  var tagGroups = useMemo(function () {\n    return sortBy(Object.entries(groupBy(propTags || [], function (tag) {\n      return tag.label.split('/')[0];\n    })).map(function (_ref2) {\n      var _ref3 = _slicedToArray(_ref2, 2),\n          label = _ref3[0],\n          tags = _ref3[1];\n\n      return {\n        label: label,\n        tags: tags\n      };\n    }), function (tag) {\n      return tag.label;\n    });\n  }, [propTags]);\n\n  var _useState = useState((_propTags$length = propTags === null || propTags === void 0 ? void 0 : propTags.length) !== null && _propTags$length !== void 0 ? _propTags$length : 0),\n      matchedCount = _useState[0],\n      setMatchedCount = _useState[1];\n\n  useEffect(function () {\n    var _propTags$length2;\n\n    return setMatchedCount((_propTags$length2 = propTags === null || propTags === void 0 ? void 0 : propTags.length) !== null && _propTags$length2 !== void 0 ? _propTags$length2 : 0);\n  }, [propTags, setMatchedCount]);\n\n  var _useState2 = useState(value || ''),\n      inputValue = _useState2[0],\n      setInputValue = _useState2[1];\n\n  useEffect(function () {\n    return setInputValue(value || '');\n  }, [value, setInputValue]);\n\n  var _useState3 = useState(''),\n      selectedValue = _useState3[0],\n      setSelectedValue = _useState3[1];\n\n  var hasSelectedValue = useMemo(function () {\n    return selectedValue !== '';\n  }, [selectedValue]);\n  var allText = useMemo(function () {\n    return inputValue || t('all');\n  }, [inputValue, t]);\n  var onInputChange = useCallback(function (value) {\n    setInputValue(value);\n    setSelectedValue('');\n\n    try {\n      var _propTags$filter;\n\n      var pattern = new RegExp(value);\n      var matchedTags = (_propTags$filter = propTags === null || propTags === void 0 ? void 0 : propTags.filter(function (tag) {\n        return pattern.test(tag.label);\n      })) !== null && _propTags$filter !== void 0 ? _propTags$filter : [];\n      setMatchedCount(matchedTags.length);\n      onChange === null || onChange === void 0 ? void 0 : onChange(matchedTags);\n    } catch (_unused) {\n      setMatchedCount(0);\n    }\n  }, [propTags, onChange]);\n  var onClickTag = useCallback(function (_ref4) {\n    var label = _ref4.label,\n        tags = _ref4.tags;\n    setSelectedValue(label);\n    onChange === null || onChange === void 0 ? void 0 : onChange(tags);\n  }, [onChange]);\n  var onClickAllTag = useCallback(function () {\n    setSelectedValue('');\n    onInputChange(inputValue);\n  }, [inputValue, onInputChange]);\n  return __jsx(Wrapper, null, __jsx(Search, {\n    placeholder: t('searchTagPlaceholder'),\n    rounded: true,\n    onChange: onInputChange\n  }), __jsx(SearchTag, {\n    active: !hasSelectedValue,\n    onClick: onClickAllTag,\n    title: allText\n  }, __jsx(SearchTagLabel, null, allText), \" (\", inputValue ? matchedCount : (_propTags$length3 = propTags === null || propTags === void 0 ? void 0 : propTags.length) !== null && _propTags$length3 !== void 0 ? _propTags$length3 : 0, \")\"), tagGroups.map(function (group) {\n    return __jsx(SearchTag, {\n      active: hasSelectedValue && group.label === selectedValue,\n      onClick: function onClick() {\n        return onClickTag(group);\n      },\n      key: group.label,\n      title: group.label\n    }, __jsx(SearchTagLabel, null, group.label), \" (\", group.tags.length, \")\");\n  }));\n};\n\nTagFilter.defaultProps = {\n  tags: []\n};\nexport default TagFilter;","map":null,"metadata":{},"sourceType":"module"}