@coorpacademy/components 11.32.46 → 11.32.47

package/es/molecule/icon-picker-modal/index.js

@@ -1,3 +1,4 @@
+import _uniq from "lodash/fp/uniq";
 import _size from "lodash/fp/size";
 import _slice from "lodash/fp/slice";
 import _values from "lodash/fp/values";
@@ -30,7 +31,7 @@ const IconPickerModal = (props, context) => {
   const [selectedIcon, setSelectedIcon] = useState(null);
   const [displayedIcons, setDisplayedIcons] = useState([]);
   const [currentIndex, setCurrentIndex] = useState(0);
-  const allIcons = useMemo(() => _pipe(_values, _map(_get('iconName')))(fas), []);
+  const allIcons = useMemo(() => _pipe(_values, _map(_get('iconName')), _uniq)(fas), []);
   const {
     searchValue,
     searchResults,

package/es/molecule/icon-picker-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","useEffect","PropTypes","fas","BaseModal","SelectIcon","Provider","SearchForm","COLORS","style","useIconSearch","ICONS_PER_LOAD","IconPickerModal","props","context","isOpen","onCancel","onConfirm","onClose","translate","selectedIcon","setSelectedIcon","displayedIcons","setDisplayedIcons","currentIndex","setCurrentIndex","allIcons","searchValue","searchResults","handleSearch","handleReset","handleCancel","handleClose","handleIconClick","iconName","prevSelectedIcon","loadMoreIcons","nextIndex","newIcons","prevIcons","handleScroll","event","scrollTop","clientHeight","scrollHeight","currentTarget","icons","index","isSelected","footer","cancelButton","label","confirmButton","disabled","color","cm_primary_blue","name","backgroundColor","iconPicker","searchWrapper","placeholder","value","onChange","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","iconsListWrapper","contextTypes","childContextTypes","propTypes","bool","func"],"sources":["../../../src/molecule/icon-picker-modal/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {entries, map, pipe, get, values, slice, size} from 'lodash/fp';\nimport BaseModal from '../base-modal';\nimport SelectIcon from '../../atom/select-icon';\nimport Provider from '../../atom/provider';\nimport SearchForm from '../search-form';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\nimport useIconSearch from './use-icon-search';\n\nconst ICONS_PER_LOAD = 48;\n\nconst IconPickerModal = (props, context) => {\n  const {isOpen, onCancel, onConfirm, onClose} = props;\n  const {translate} = context;\n\n  const [selectedIcon, setSelectedIcon] = useState(null);\n  const [displayedIcons, setDisplayedIcons] = useState([]);\n  const [currentIndex, setCurrentIndex] = useState(0);\n\n  const allIcons = useMemo(() => pipe(values, map(get('iconName')))(fas), []);\n  const {searchValue, searchResults, handleSearch, handleReset} = useIconSearch(allIcons);\n\n  const handleCancel = useCallback(() => {\n    onCancel();\n  }, [onCancel]);\n\n  const handleClose = useCallback(() => {\n    onClose();\n  }, [onClose]);\n\n  const handleIconClick = useCallback(\n    iconName => () => {\n      setSelectedIcon(prevSelectedIcon => (prevSelectedIcon === iconName ? null : iconName));\n    },\n    []\n  );\n\n  const loadMoreIcons = useCallback(() => {\n    const nextIndex = currentIndex + ICONS_PER_LOAD;\n    const newIcons = slice(currentIndex, nextIndex, searchResults);\n    setDisplayedIcons(prevIcons => [...prevIcons, ...newIcons]);\n    setCurrentIndex(nextIndex);\n  }, [currentIndex, searchResults]);\n\n  useEffect(() => {\n    setDisplayedIcons(() => slice(0, ICONS_PER_LOAD, searchResults));\n    setCurrentIndex(ICONS_PER_LOAD);\n  }, [searchResults]);\n\n  const handleScroll = useCallback(\n    event => {\n      const {scrollTop, clientHeight, scrollHeight} = event.currentTarget;\n      if (scrollHeight - scrollTop <= clientHeight + 1) {\n        loadMoreIcons();\n      }\n    },\n    [loadMoreIcons]\n  );\n\n  const icons = useMemo(\n    () =>\n      pipe(\n        entries,\n        map(([index, iconName]) => (\n          <SelectIcon\n            key={`icon-${index}`}\n            size=\"responsive\"\n            data-name={`icon-${index}`}\n            aria-label={iconName}\n            faIcon={iconName}\n            onClick={handleIconClick(iconName)}\n            options={{isSelected: selectedIcon === iconName}}\n          />\n        ))\n      )(displayedIcons),\n    [displayedIcons, selectedIcon, handleIconClick]\n  );\n\n  const footer = useMemo(() => {\n    return {\n      cancelButton: {\n        onCancel: handleCancel,\n        label: translate('cancel')\n      },\n      confirmButton: {\n        onConfirm: () => {\n          onConfirm(selectedIcon);\n          setSelectedIcon(null);\n          onClose();\n        },\n        label: translate('confirm'),\n        iconName: 'plus',\n        disabled: selectedIcon === null,\n        color: COLORS.cm_primary_blue\n      }\n    };\n  }, [handleCancel, onConfirm, onClose, translate, selectedIcon]);\n\n  if (!isOpen) return null;\n\n  return (\n    <BaseModal\n      title={translate('icon_picker_title')}\n      description={translate('icon_picker_description')}\n      isOpen={isOpen}\n      onClose={handleClose}\n      onScroll={handleScroll}\n      footer={footer}\n      headerIcon={{\n        name: 'arrows-rotate',\n        backgroundColor: '#D6E6FF'\n      }}\n    >\n      <div className={style.iconPicker}>\n        {\n          <>\n            <div className={style.searchWrapper}>\n              <SearchForm\n                search={{\n                  placeholder: translate('search_place_holder'),\n                  value: searchValue,\n                  onChange: handleSearch\n                }}\n                onReset={handleReset}\n                dataTestId=\"search-input\"\n              />\n            </div>\n            {searchValue && size(searchResults) === 0 ? (\n              <div className={style.emptySearchResultContainer}>\n                <div className={style.emptySearchResultTitle}>\n                  {translate('empty_search_result_title', {searchValue})}\n                </div>\n                <div className={style.emptySearchResultDescription}>\n                  {translate('empty_search_result_description')}\n                </div>\n                <div className={style.emptySearchResultClearSearch} onClick={handleReset}>\n                  {translate('empty_search_result_clear_search')}\n                </div>\n              </div>\n            ) : (\n              <div className={style.iconsListWrapper}>{icons}</div>\n            )}\n          </>\n        }\n      </div>\n    </BaseModal>\n  );\n};\n\nIconPickerModal.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nIconPickerModal.propTypes = {\n  isOpen: PropTypes.bool,\n  onCancel: PropTypes.func,\n  onConfirm: PropTypes.func,\n  onClose: PropTypes.func\n};\n\nexport default IconPickerModal;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","useEffect","PropTypes","fas","BaseModal","SelectIcon","Provider","SearchForm","COLORS","style","useIconSearch","ICONS_PER_LOAD","IconPickerModal","props","context","isOpen","onCancel","onConfirm","onClose","translate","selectedIcon","setSelectedIcon","displayedIcons","setDisplayedIcons","currentIndex","setCurrentIndex","allIcons","searchValue","searchResults","handleSearch","handleReset","handleCancel","handleClose","handleIconClick","iconName","prevSelectedIcon","loadMoreIcons","nextIndex","newIcons","prevIcons","handleScroll","event","scrollTop","clientHeight","scrollHeight","currentTarget","icons","index","isSelected","footer","cancelButton","label","confirmButton","disabled","color","cm_primary_blue","name","backgroundColor","iconPicker","searchWrapper","placeholder","value","onChange","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","iconsListWrapper","contextTypes","childContextTypes","propTypes","bool","func"],"sources":["../../../src/molecule/icon-picker-modal/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {entries, map, pipe, get, values, slice, size, uniq} from 'lodash/fp';\nimport BaseModal from '../base-modal';\nimport SelectIcon from '../../atom/select-icon';\nimport Provider from '../../atom/provider';\nimport SearchForm from '../search-form';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\nimport useIconSearch from './use-icon-search';\n\nconst ICONS_PER_LOAD = 48;\n\nconst IconPickerModal = (props, context) => {\n  const {isOpen, onCancel, onConfirm, onClose} = props;\n  const {translate} = context;\n\n  const [selectedIcon, setSelectedIcon] = useState(null);\n  const [displayedIcons, setDisplayedIcons] = useState([]);\n  const [currentIndex, setCurrentIndex] = useState(0);\n\n  const allIcons = useMemo(() => pipe(values, map(get('iconName')), uniq)(fas), []);\n  const {searchValue, searchResults, handleSearch, handleReset} = useIconSearch(allIcons);\n\n  const handleCancel = useCallback(() => {\n    onCancel();\n  }, [onCancel]);\n\n  const handleClose = useCallback(() => {\n    onClose();\n  }, [onClose]);\n\n  const handleIconClick = useCallback(\n    iconName => () => {\n      setSelectedIcon(prevSelectedIcon => (prevSelectedIcon === iconName ? null : iconName));\n    },\n    []\n  );\n\n  const loadMoreIcons = useCallback(() => {\n    const nextIndex = currentIndex + ICONS_PER_LOAD;\n    const newIcons = slice(currentIndex, nextIndex, searchResults);\n    setDisplayedIcons(prevIcons => [...prevIcons, ...newIcons]);\n    setCurrentIndex(nextIndex);\n  }, [currentIndex, searchResults]);\n\n  useEffect(() => {\n    setDisplayedIcons(() => slice(0, ICONS_PER_LOAD, searchResults));\n    setCurrentIndex(ICONS_PER_LOAD);\n  }, [searchResults]);\n\n  const handleScroll = useCallback(\n    event => {\n      const {scrollTop, clientHeight, scrollHeight} = event.currentTarget;\n      if (scrollHeight - scrollTop <= clientHeight + 1) {\n        loadMoreIcons();\n      }\n    },\n    [loadMoreIcons]\n  );\n\n  const icons = useMemo(\n    () =>\n      pipe(\n        entries,\n        map(([index, iconName]) => (\n          <SelectIcon\n            key={`icon-${index}`}\n            size=\"responsive\"\n            data-name={`icon-${index}`}\n            aria-label={iconName}\n            faIcon={iconName}\n            onClick={handleIconClick(iconName)}\n            options={{isSelected: selectedIcon === iconName}}\n          />\n        ))\n      )(displayedIcons),\n    [displayedIcons, selectedIcon, handleIconClick]\n  );\n\n  const footer = useMemo(() => {\n    return {\n      cancelButton: {\n        onCancel: handleCancel,\n        label: translate('cancel')\n      },\n      confirmButton: {\n        onConfirm: () => {\n          onConfirm(selectedIcon);\n          setSelectedIcon(null);\n          onClose();\n        },\n        label: translate('confirm'),\n        iconName: 'plus',\n        disabled: selectedIcon === null,\n        color: COLORS.cm_primary_blue\n      }\n    };\n  }, [handleCancel, onConfirm, onClose, translate, selectedIcon]);\n\n  if (!isOpen) return null;\n\n  return (\n    <BaseModal\n      title={translate('icon_picker_title')}\n      description={translate('icon_picker_description')}\n      isOpen={isOpen}\n      onClose={handleClose}\n      onScroll={handleScroll}\n      footer={footer}\n      headerIcon={{\n        name: 'arrows-rotate',\n        backgroundColor: '#D6E6FF'\n      }}\n    >\n      <div className={style.iconPicker}>\n        {\n          <>\n            <div className={style.searchWrapper}>\n              <SearchForm\n                search={{\n                  placeholder: translate('search_place_holder'),\n                  value: searchValue,\n                  onChange: handleSearch\n                }}\n                onReset={handleReset}\n                dataTestId=\"search-input\"\n              />\n            </div>\n            {searchValue && size(searchResults) === 0 ? (\n              <div className={style.emptySearchResultContainer}>\n                <div className={style.emptySearchResultTitle}>\n                  {translate('empty_search_result_title', {searchValue})}\n                </div>\n                <div className={style.emptySearchResultDescription}>\n                  {translate('empty_search_result_description')}\n                </div>\n                <div className={style.emptySearchResultClearSearch} onClick={handleReset}>\n                  {translate('empty_search_result_clear_search')}\n                </div>\n              </div>\n            ) : (\n              <div className={style.iconsListWrapper}>{icons}</div>\n            )}\n          </>\n        }\n      </div>\n    </BaseModal>\n  );\n};\n\nIconPickerModal.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nIconPickerModal.propTypes = {\n  isOpen: PropTypes.bool,\n  onCancel: PropTypes.func,\n  onConfirm: PropTypes.func,\n  onClose: PropTypes.func\n};\n\nexport default IconPickerModal;\n"],"mappings":"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"}

package/lib/molecule/icon-picker-modal/index.js

@@ -3,6 +3,8 @@
 exports.__esModule = true;
 exports.default = void 0;
 
+var _uniq2 = _interopRequireDefault(require("lodash/fp/uniq"));
+
 var _size2 = _interopRequireDefault(require("lodash/fp/size"));
 
 var _slice2 = _interopRequireDefault(require("lodash/fp/slice"));
@@ -58,7 +60,7 @@ const IconPickerModal = (props, context) => {
   const [selectedIcon, setSelectedIcon] = (0, _react.useState)(null);
   const [displayedIcons, setDisplayedIcons] = (0, _react.useState)([]);
   const [currentIndex, setCurrentIndex] = (0, _react.useState)(0);
-  const allIcons = (0, _react.useMemo)(() => (0, _pipe2.default)(_values2.default, (0, _map2.default)((0, _get2.default)('iconName')))(_proSolidSvgIcons.fas), []);
+  const allIcons = (0, _react.useMemo)(() => (0, _pipe2.default)(_values2.default, (0, _map2.default)((0, _get2.default)('iconName')), _uniq2.default)(_proSolidSvgIcons.fas), []);
   const {
     searchValue,
     searchResults,

package/lib/molecule/icon-picker-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ICONS_PER_LOAD","IconPickerModal","props","context","isOpen","onCancel","onConfirm","onClose","translate","selectedIcon","setSelectedIcon","useState","displayedIcons","setDisplayedIcons","currentIndex","setCurrentIndex","allIcons","useMemo","fas","searchValue","searchResults","handleSearch","handleReset","useIconSearch","handleCancel","useCallback","handleClose","handleIconClick","iconName","prevSelectedIcon","loadMoreIcons","nextIndex","newIcons","prevIcons","useEffect","handleScroll","event","scrollTop","clientHeight","scrollHeight","currentTarget","icons","index","isSelected","footer","cancelButton","label","confirmButton","disabled","color","COLORS","cm_primary_blue","name","backgroundColor","style","iconPicker","searchWrapper","placeholder","value","onChange","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","iconsListWrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","bool","func"],"sources":["../../../src/molecule/icon-picker-modal/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {entries, map, pipe, get, values, slice, size} from 'lodash/fp';\nimport BaseModal from '../base-modal';\nimport SelectIcon from '../../atom/select-icon';\nimport Provider from '../../atom/provider';\nimport SearchForm from '../search-form';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\nimport useIconSearch from './use-icon-search';\n\nconst ICONS_PER_LOAD = 48;\n\nconst IconPickerModal = (props, context) => {\n  const {isOpen, onCancel, onConfirm, onClose} = props;\n  const {translate} = context;\n\n  const [selectedIcon, setSelectedIcon] = useState(null);\n  const [displayedIcons, setDisplayedIcons] = useState([]);\n  const [currentIndex, setCurrentIndex] = useState(0);\n\n  const allIcons = useMemo(() => pipe(values, map(get('iconName')))(fas), []);\n  const {searchValue, searchResults, handleSearch, handleReset} = useIconSearch(allIcons);\n\n  const handleCancel = useCallback(() => {\n    onCancel();\n  }, [onCancel]);\n\n  const handleClose = useCallback(() => {\n    onClose();\n  }, [onClose]);\n\n  const handleIconClick = useCallback(\n    iconName => () => {\n      setSelectedIcon(prevSelectedIcon => (prevSelectedIcon === iconName ? null : iconName));\n    },\n    []\n  );\n\n  const loadMoreIcons = useCallback(() => {\n    const nextIndex = currentIndex + ICONS_PER_LOAD;\n    const newIcons = slice(currentIndex, nextIndex, searchResults);\n    setDisplayedIcons(prevIcons => [...prevIcons, ...newIcons]);\n    setCurrentIndex(nextIndex);\n  }, [currentIndex, searchResults]);\n\n  useEffect(() => {\n    setDisplayedIcons(() => slice(0, ICONS_PER_LOAD, searchResults));\n    setCurrentIndex(ICONS_PER_LOAD);\n  }, [searchResults]);\n\n  const handleScroll = useCallback(\n    event => {\n      const {scrollTop, clientHeight, scrollHeight} = event.currentTarget;\n      if (scrollHeight - scrollTop <= clientHeight + 1) {\n        loadMoreIcons();\n      }\n    },\n    [loadMoreIcons]\n  );\n\n  const icons = useMemo(\n    () =>\n      pipe(\n        entries,\n        map(([index, iconName]) => (\n          <SelectIcon\n            key={`icon-${index}`}\n            size=\"responsive\"\n            data-name={`icon-${index}`}\n            aria-label={iconName}\n            faIcon={iconName}\n            onClick={handleIconClick(iconName)}\n            options={{isSelected: selectedIcon === iconName}}\n          />\n        ))\n      )(displayedIcons),\n    [displayedIcons, selectedIcon, handleIconClick]\n  );\n\n  const footer = useMemo(() => {\n    return {\n      cancelButton: {\n        onCancel: handleCancel,\n        label: translate('cancel')\n      },\n      confirmButton: {\n        onConfirm: () => {\n          onConfirm(selectedIcon);\n          setSelectedIcon(null);\n          onClose();\n        },\n        label: translate('confirm'),\n        iconName: 'plus',\n        disabled: selectedIcon === null,\n        color: COLORS.cm_primary_blue\n      }\n    };\n  }, [handleCancel, onConfirm, onClose, translate, selectedIcon]);\n\n  if (!isOpen) return null;\n\n  return (\n    <BaseModal\n      title={translate('icon_picker_title')}\n      description={translate('icon_picker_description')}\n      isOpen={isOpen}\n      onClose={handleClose}\n      onScroll={handleScroll}\n      footer={footer}\n      headerIcon={{\n        name: 'arrows-rotate',\n        backgroundColor: '#D6E6FF'\n      }}\n    >\n      <div className={style.iconPicker}>\n        {\n          <>\n            <div className={style.searchWrapper}>\n              <SearchForm\n                search={{\n                  placeholder: translate('search_place_holder'),\n                  value: searchValue,\n                  onChange: handleSearch\n                }}\n                onReset={handleReset}\n                dataTestId=\"search-input\"\n              />\n            </div>\n            {searchValue && size(searchResults) === 0 ? (\n              <div className={style.emptySearchResultContainer}>\n                <div className={style.emptySearchResultTitle}>\n                  {translate('empty_search_result_title', {searchValue})}\n                </div>\n                <div className={style.emptySearchResultDescription}>\n                  {translate('empty_search_result_description')}\n                </div>\n                <div className={style.emptySearchResultClearSearch} onClick={handleReset}>\n                  {translate('empty_search_result_clear_search')}\n                </div>\n              </div>\n            ) : (\n              <div className={style.iconsListWrapper}>{icons}</div>\n            )}\n          </>\n        }\n      </div>\n    </BaseModal>\n  );\n};\n\nIconPickerModal.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nIconPickerModal.propTypes = {\n  isOpen: PropTypes.bool,\n  onCancel: PropTypes.func,\n  onConfirm: PropTypes.func,\n  onClose: PropTypes.func\n};\n\nexport default IconPickerModal;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ICONS_PER_LOAD","IconPickerModal","props","context","isOpen","onCancel","onConfirm","onClose","translate","selectedIcon","setSelectedIcon","useState","displayedIcons","setDisplayedIcons","currentIndex","setCurrentIndex","allIcons","useMemo","fas","searchValue","searchResults","handleSearch","handleReset","useIconSearch","handleCancel","useCallback","handleClose","handleIconClick","iconName","prevSelectedIcon","loadMoreIcons","nextIndex","newIcons","prevIcons","useEffect","handleScroll","event","scrollTop","clientHeight","scrollHeight","currentTarget","icons","index","isSelected","footer","cancelButton","label","confirmButton","disabled","color","COLORS","cm_primary_blue","name","backgroundColor","style","iconPicker","searchWrapper","placeholder","value","onChange","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","iconsListWrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","bool","func"],"sources":["../../../src/molecule/icon-picker-modal/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {entries, map, pipe, get, values, slice, size, uniq} from 'lodash/fp';\nimport BaseModal from '../base-modal';\nimport SelectIcon from '../../atom/select-icon';\nimport Provider from '../../atom/provider';\nimport SearchForm from '../search-form';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\nimport useIconSearch from './use-icon-search';\n\nconst ICONS_PER_LOAD = 48;\n\nconst IconPickerModal = (props, context) => {\n  const {isOpen, onCancel, onConfirm, onClose} = props;\n  const {translate} = context;\n\n  const [selectedIcon, setSelectedIcon] = useState(null);\n  const [displayedIcons, setDisplayedIcons] = useState([]);\n  const [currentIndex, setCurrentIndex] = useState(0);\n\n  const allIcons = useMemo(() => pipe(values, map(get('iconName')), uniq)(fas), []);\n  const {searchValue, searchResults, handleSearch, handleReset} = useIconSearch(allIcons);\n\n  const handleCancel = useCallback(() => {\n    onCancel();\n  }, [onCancel]);\n\n  const handleClose = useCallback(() => {\n    onClose();\n  }, [onClose]);\n\n  const handleIconClick = useCallback(\n    iconName => () => {\n      setSelectedIcon(prevSelectedIcon => (prevSelectedIcon === iconName ? null : iconName));\n    },\n    []\n  );\n\n  const loadMoreIcons = useCallback(() => {\n    const nextIndex = currentIndex + ICONS_PER_LOAD;\n    const newIcons = slice(currentIndex, nextIndex, searchResults);\n    setDisplayedIcons(prevIcons => [...prevIcons, ...newIcons]);\n    setCurrentIndex(nextIndex);\n  }, [currentIndex, searchResults]);\n\n  useEffect(() => {\n    setDisplayedIcons(() => slice(0, ICONS_PER_LOAD, searchResults));\n    setCurrentIndex(ICONS_PER_LOAD);\n  }, [searchResults]);\n\n  const handleScroll = useCallback(\n    event => {\n      const {scrollTop, clientHeight, scrollHeight} = event.currentTarget;\n      if (scrollHeight - scrollTop <= clientHeight + 1) {\n        loadMoreIcons();\n      }\n    },\n    [loadMoreIcons]\n  );\n\n  const icons = useMemo(\n    () =>\n      pipe(\n        entries,\n        map(([index, iconName]) => (\n          <SelectIcon\n            key={`icon-${index}`}\n            size=\"responsive\"\n            data-name={`icon-${index}`}\n            aria-label={iconName}\n            faIcon={iconName}\n            onClick={handleIconClick(iconName)}\n            options={{isSelected: selectedIcon === iconName}}\n          />\n        ))\n      )(displayedIcons),\n    [displayedIcons, selectedIcon, handleIconClick]\n  );\n\n  const footer = useMemo(() => {\n    return {\n      cancelButton: {\n        onCancel: handleCancel,\n        label: translate('cancel')\n      },\n      confirmButton: {\n        onConfirm: () => {\n          onConfirm(selectedIcon);\n          setSelectedIcon(null);\n          onClose();\n        },\n        label: translate('confirm'),\n        iconName: 'plus',\n        disabled: selectedIcon === null,\n        color: COLORS.cm_primary_blue\n      }\n    };\n  }, [handleCancel, onConfirm, onClose, translate, selectedIcon]);\n\n  if (!isOpen) return null;\n\n  return (\n    <BaseModal\n      title={translate('icon_picker_title')}\n      description={translate('icon_picker_description')}\n      isOpen={isOpen}\n      onClose={handleClose}\n      onScroll={handleScroll}\n      footer={footer}\n      headerIcon={{\n        name: 'arrows-rotate',\n        backgroundColor: '#D6E6FF'\n      }}\n    >\n      <div className={style.iconPicker}>\n        {\n          <>\n            <div className={style.searchWrapper}>\n              <SearchForm\n                search={{\n                  placeholder: translate('search_place_holder'),\n                  value: searchValue,\n                  onChange: handleSearch\n                }}\n                onReset={handleReset}\n                dataTestId=\"search-input\"\n              />\n            </div>\n            {searchValue && size(searchResults) === 0 ? (\n              <div className={style.emptySearchResultContainer}>\n                <div className={style.emptySearchResultTitle}>\n                  {translate('empty_search_result_title', {searchValue})}\n                </div>\n                <div className={style.emptySearchResultDescription}>\n                  {translate('empty_search_result_description')}\n                </div>\n                <div className={style.emptySearchResultClearSearch} onClick={handleReset}>\n                  {translate('empty_search_result_clear_search')}\n                </div>\n              </div>\n            ) : (\n              <div className={style.iconsListWrapper}>{icons}</div>\n            )}\n          </>\n        }\n      </div>\n    </BaseModal>\n  );\n};\n\nIconPickerModal.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nIconPickerModal.propTypes = {\n  isOpen: PropTypes.bool,\n  onCancel: PropTypes.func,\n  onConfirm: PropTypes.func,\n  onClose: PropTypes.func\n};\n\nexport default IconPickerModal;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "11.32.46",
+  "version": "11.32.47",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -178,5 +178,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "a1129d4d9ab222f19d36a3f7aed0160265ebf81c"
+  "gitHead": "1df31fa256647c9adad85f7ad85be53088deed32"
 }