{"version":3,"file":"index-DKJCinQB.js","sources":["../../../app/javascript/components/Website/src/components/KitFilter/index.tsx"],"sourcesContent":["import React, { ChangeEvent, useEffect, useState } from \"react\";\nimport { Flex, Icon, Nav, NavItem, TextInput } from \"playbook-ui\"\nimport { ReactSVG } from \"./ReactSVG\"\nimport { RailsSVG } from \"./RailsSVG\"\nimport { SwiftSVG } from \"./SwiftSVG\"\nimport { Kit, Kits } from \"../../pages/ComponentList\";\n\nimport \"./styles.scss\"\n\ntype KitFilterProps = {\n  kits: Kits,\n  setFilteredKits: (filteredKits: Kits) => void,\n  setPlatform: (platform: string) => void,\n}\n\nexport const KitFilter = ({ kits, setFilteredKits, setPlatform }: KitFilterProps) => {\n  const [search, setSearch] = useState('')\n  const [platform, setSelectedPlatform] = useState('react')\n\n  const handleOnChange = ({ target }: ChangeEvent<HTMLInputElement>) => {\n    const { value } = target\n    setSearch(value)\n  }\n\n  const selectPlatform = (platform: string) => {\n    setPlatform(platform)\n    setSelectedPlatform(platform)\n    const filteredKits = searchKit(kits, search, platform)\n    setFilteredKits(filteredKits)\n  }\n\n  const searchKit = (kitList: Kits | Kit[], search: string, platform: string) => {\n    const kits = JSON.parse(JSON.stringify(kitList))\n\n    return kits.filter((kit: Kit) => {\n      if (kit.components) {\n        kit.components = kit.components.filter(component => {\n          return component.platforms.includes(platform) &&\n            component.name &&\n            component.name.toLowerCase().includes(search.toLowerCase())\n        })\n\n        return kit.components.length > 0\n\n      } else if (!kit.components && kit.name) {\n        return kit.platforms.includes(platform) &&\n          kit.name &&\n          kit.name.toLowerCase().includes(search.toLowerCase())\n      }\n\n      return false\n    })\n  }\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      const filteredKits = searchKit(kits, search, platform)\n      setFilteredKits(filteredKits)\n    }, 200)\n\n    return () => clearTimeout(timer)\n  }, [search])\n\n  return (\n    <>\n      <Nav\n        link=\"#\"\n        orientation=\"horizontal\"\n        paddingBottom=\"lg\"\n        variant=\"subtle\"\n      >\n        <NavItem\n          active={platform === 'react'}\n          link=\"#\"\n          onClick={() => selectPlatform('react')}\n        >\n          <Flex align=\"center\">\n            <Icon\n              customIcon={<ReactSVG active={platform === 'react'} />}\n            />\n            <span className=\"pb_nav_list_item_text\">React</span>\n          </Flex>\n        </NavItem>\n        <NavItem\n          active={platform === 'rails'}\n          link=\"#\"\n          onClick={() => selectPlatform('rails')}\n        >\n          <Flex align=\"center\">\n            <Icon\n              customIcon={<RailsSVG active={platform === 'rails'} />}\n            />\n            <span className=\"pb_nav_list_item_text\">Rails</span>\n          </Flex>\n        </NavItem>\n        <NavItem\n          active={platform === 'swift'}\n          link=\"#\"\n          onClick={() => selectPlatform('swift')}\n        >\n          <Flex align=\"center\">\n            <Icon\n              customIcon={<SwiftSVG active={platform === 'swift'} />}\n            />\n            <span className=\"pb_nav_list_item_text\">Swift</span>\n          </Flex>\n        </NavItem>\n      </Nav>\n\n      <TextInput\n        addOn={{ icon: 'search', alignment: 'left' }}\n        className=\"kit-filter\"\n        name=\"search\"\n        maxWidth=\"sm\"\n        onChange={handleOnChange}\n        paddingLeft={{ xs: \"sm\" }}\n        paddingRight={{ xs: \"sm\" }}\n        placeholder=\"Filter Components by Name\"\n        value={search}\n      />\n    </>\n  )\n}\n"],"names":["KitFilter","kits","setFilteredKits","setPlatform","search","setSearch","useState","platform","setSelectedPlatform","handleOnChange","target","value","selectPlatform","filteredKits","searchKit","kitList","kit","component","useEffect","timer","jsxs","Fragment","Nav","jsx","NavItem","Flex","Icon","ReactSVG","RailsSVG","SwiftSVG","TextInput"],"mappings":"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"}