@coorpacademy/components 11.40.1-alpha.9 → 11.40.2-alpha.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/atom/select-icon/index.d.ts.map +1 -1
- package/es/atom/select-icon/index.js +9 -3
- package/es/atom/select-icon/index.js.map +1 -1
- package/es/molecule/icon-picker-modal/index.d.ts.map +1 -1
- package/es/molecule/icon-picker-modal/index.js +25 -31
- package/es/molecule/icon-picker-modal/index.js.map +1 -1
- package/lib/atom/select-icon/index.d.ts.map +1 -1
- package/lib/atom/select-icon/index.js +9 -3
- package/lib/atom/select-icon/index.js.map +1 -1
- package/lib/molecule/icon-picker-modal/index.d.ts.map +1 -1
- package/lib/molecule/icon-picker-modal/index.js +25 -31
- package/lib/molecule/icon-picker-modal/index.js.map +1 -1
- package/locales/lt/global.json +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/select-icon/index.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/select-icon/index.js"],"names":[],"mappings":";AAgDA,qDA0BC"}
|
|
@@ -18,7 +18,10 @@ const getButtonContent = (faIcon, options = {}) => {
|
|
|
18
18
|
} = options;
|
|
19
19
|
return /*#__PURE__*/React.createElement("div", {
|
|
20
20
|
className: style.contentWrapper
|
|
21
|
-
}, isSelected ?
|
|
21
|
+
}, isSelected ?
|
|
22
|
+
/*#__PURE__*/
|
|
23
|
+
/* checkbox icon */
|
|
24
|
+
React.createElement("div", {
|
|
22
25
|
className: style.checkIcon
|
|
23
26
|
}, /*#__PURE__*/React.createElement(FaIcon, {
|
|
24
27
|
iconName: CHECK_ICON_NAME_MAP[selectionMode],
|
|
@@ -28,7 +31,10 @@ const getButtonContent = (faIcon, options = {}) => {
|
|
|
28
31
|
faSize: 16,
|
|
29
32
|
wrapperSize: 16
|
|
30
33
|
}
|
|
31
|
-
})) : null,
|
|
34
|
+
})) : null,
|
|
35
|
+
/*#__PURE__*/
|
|
36
|
+
/* selection tick (L18) / icon */
|
|
37
|
+
React.createElement("div", {
|
|
32
38
|
className: style.iconWrapper
|
|
33
39
|
}, /*#__PURE__*/React.createElement("div", {
|
|
34
40
|
className: style.icon
|
|
@@ -64,7 +70,7 @@ const SelectIcon = props => {
|
|
|
64
70
|
"data-testid": `button-${dataName}`,
|
|
65
71
|
className: styleButton,
|
|
66
72
|
onClick: handleOnClick
|
|
67
|
-
}, contentView), [ariaLabel, contentView, dataName, handleOnClick]);
|
|
73
|
+
}, contentView), [ariaLabel, contentView, dataName, handleOnClick, styleButton]);
|
|
68
74
|
return /*#__PURE__*/React.createElement(IconButton, null);
|
|
69
75
|
};
|
|
70
76
|
SelectIcon.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","classnames","FaIcon","COLORS","style","ICON_COLOR","cm_primary_blue","BACKGROUND_COLOR","white","CHECK_ICON_NAME_MAP","single","multi","getButtonContent","faIcon","options","selectionMode","isSelected","iconColor","createElement","className","contentWrapper","checkIcon","iconName","backgroundColor","size","faSize","wrapperSize","iconWrapper","icon","iconText","SelectIcon","props","dataName","ariaLabel","onClick","contentView","styleButton","defaultStyle","selected","handleOnClick","IconButton","type","propTypes","process","env","NODE_ENV","string","func","shape","oneOf","bool"],"sources":["../../../src/atom/select-icon/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport FaIcon from '../icon';\n\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst ICON_COLOR = COLORS.cm_primary_blue;\nconst BACKGROUND_COLOR = COLORS.white;\nconst CHECK_ICON_NAME_MAP = {\n single: 'circle-check',\n multi: 'square-check'\n};\n\nconst getButtonContent = (faIcon, options = {}) => {\n const {selectionMode = 'single', isSelected = false, iconColor = ICON_COLOR} = options;\n\n return (\n <div className={style.contentWrapper}>\n {isSelected ? (\n <div className={style.checkIcon}>\n <FaIcon\n iconName={CHECK_ICON_NAME_MAP[selectionMode]}\n iconColor={iconColor}\n backgroundColor={BACKGROUND_COLOR}\n size={{faSize: 16, wrapperSize: 16}}\n />\n </div>\n ) : null}\n\n
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","classnames","FaIcon","COLORS","style","ICON_COLOR","cm_primary_blue","BACKGROUND_COLOR","white","CHECK_ICON_NAME_MAP","single","multi","getButtonContent","faIcon","options","selectionMode","isSelected","iconColor","createElement","className","contentWrapper","checkIcon","iconName","backgroundColor","size","faSize","wrapperSize","iconWrapper","icon","iconText","SelectIcon","props","dataName","ariaLabel","onClick","contentView","styleButton","defaultStyle","selected","handleOnClick","IconButton","type","propTypes","process","env","NODE_ENV","string","func","shape","oneOf","bool"],"sources":["../../../src/atom/select-icon/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport FaIcon from '../icon';\n\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst ICON_COLOR = COLORS.cm_primary_blue;\nconst BACKGROUND_COLOR = COLORS.white;\nconst CHECK_ICON_NAME_MAP = {\n single: 'circle-check',\n multi: 'square-check'\n};\n\nconst getButtonContent = (faIcon, options = {}) => {\n const {selectionMode = 'single', isSelected = false, iconColor = ICON_COLOR} = options;\n\n return (\n <div className={style.contentWrapper}>\n {isSelected ? (\n /* checkbox icon */\n <div className={style.checkIcon}>\n <FaIcon\n iconName={CHECK_ICON_NAME_MAP[selectionMode]}\n iconColor={iconColor}\n backgroundColor={BACKGROUND_COLOR}\n size={{faSize: 16, wrapperSize: 16}}\n />\n </div>\n ) : null}\n {\n /* selection tick (L18) / icon */\n <div className={style.iconWrapper}>\n <div className={style.icon}>\n <FaIcon\n iconName={faIcon}\n iconColor={isSelected ? iconColor : ''}\n size={{faSize: 32, wrapperSize: 32}}\n />\n </div>\n <div className={style.iconText}>{faIcon}</div>\n </div>\n }\n </div>\n );\n};\n\nconst SelectIcon = props => {\n const {faIcon, 'data-name': dataName, 'aria-label': ariaLabel, onClick, options = {}} = props;\n\n const {isSelected = false} = options;\n\n const contentView = getButtonContent(faIcon, options);\n const styleButton = classnames(style.defaultStyle, isSelected && style.selected);\n const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n const IconButton = useCallback(\n () => (\n <button\n type=\"button\"\n aria-label={ariaLabel}\n data-name={dataName}\n data-testid={`button-${dataName}`}\n className={styleButton}\n onClick={handleOnClick}\n >\n {contentView}\n </button>\n ),\n [ariaLabel, contentView, dataName, handleOnClick, styleButton]\n );\n\n return <IconButton />;\n};\n\nSelectIcon.propTypes = {\n 'aria-label': PropTypes.string,\n 'data-name': PropTypes.string,\n faIcon: PropTypes.string,\n onClick: PropTypes.func,\n options: PropTypes.shape({\n selectionMode: PropTypes.oneOf(['single', 'multi']),\n isSelected: PropTypes.bool,\n iconColor: PropTypes.string\n })\n};\n\nexport default SelectIcon;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/icon-picker-modal/index.js"],"names":[],"mappings":";AAcA,+
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/icon-picker-modal/index.js"],"names":[],"mappings":";AAcA,+EAwIC"}
|
|
@@ -27,11 +27,10 @@ const IconPickerModal = (props, context) => {
|
|
|
27
27
|
const {
|
|
28
28
|
translate
|
|
29
29
|
} = context;
|
|
30
|
-
const allIcons = useMemo(() => _pipe(_values, _map(_get('iconName')), _uniq)(fas), []);
|
|
31
30
|
const [selectedIcon, setSelectedIcon] = useState(null);
|
|
32
|
-
const [displayedIcons, setDisplayedIcons] = useState(
|
|
33
|
-
|
|
34
|
-
|
|
31
|
+
const [displayedIcons, setDisplayedIcons] = useState([]);
|
|
32
|
+
const [currentIndex, setCurrentIndex] = useState(0);
|
|
33
|
+
const allIcons = useMemo(() => _pipe(_values, _map(_get('iconName')), _uniq)(fas), []);
|
|
35
34
|
const {
|
|
36
35
|
searchValue,
|
|
37
36
|
searchResults,
|
|
@@ -45,36 +44,32 @@ const IconPickerModal = (props, context) => {
|
|
|
45
44
|
onClose();
|
|
46
45
|
}, [onClose]);
|
|
47
46
|
const handleIconClick = useCallback(iconName => () => {
|
|
48
|
-
console.log('in handleIconClick');
|
|
49
47
|
setSelectedIcon(prevSelectedIcon => prevSelectedIcon === iconName ? null : iconName);
|
|
50
48
|
}, []);
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
// }, [currentIndex, searchResults]);
|
|
58
|
-
|
|
49
|
+
const loadMoreIcons = useCallback(() => {
|
|
50
|
+
const nextIndex = currentIndex + ICONS_PER_LOAD;
|
|
51
|
+
const newIcons = _slice(currentIndex, nextIndex, searchResults);
|
|
52
|
+
setDisplayedIcons(prevIcons => [...prevIcons, ...newIcons]);
|
|
53
|
+
setCurrentIndex(nextIndex);
|
|
54
|
+
}, [currentIndex, searchResults]);
|
|
59
55
|
useEffect(() => {
|
|
60
56
|
setDisplayedIcons(() => _slice(0, ICONS_PER_LOAD, searchResults));
|
|
61
57
|
setCurrentIndex(ICONS_PER_LOAD);
|
|
62
58
|
}, [searchResults]);
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
59
|
+
const handleScroll = useCallback(event => {
|
|
60
|
+
const {
|
|
61
|
+
scrollTop,
|
|
62
|
+
clientHeight,
|
|
63
|
+
scrollHeight
|
|
64
|
+
} = event.currentTarget;
|
|
65
|
+
if (scrollHeight - scrollTop <= clientHeight + 1) {
|
|
66
|
+
loadMoreIcons();
|
|
67
|
+
}
|
|
68
|
+
}, [loadMoreIcons]);
|
|
74
69
|
const icons = useMemo(() => _pipe(_entries, _map(([index, iconName]) => /*#__PURE__*/React.createElement(SelectIcon, {
|
|
75
|
-
key:
|
|
70
|
+
key: `icon-${index}`,
|
|
76
71
|
size: "responsive",
|
|
77
|
-
"data-name":
|
|
72
|
+
"data-name": `icon-${index}`,
|
|
78
73
|
"aria-label": iconName,
|
|
79
74
|
faIcon: iconName,
|
|
80
75
|
onClick: handleIconClick(iconName),
|
|
@@ -106,9 +101,8 @@ const IconPickerModal = (props, context) => {
|
|
|
106
101
|
title: translate('icon_picker_title'),
|
|
107
102
|
description: translate('icon_picker_description'),
|
|
108
103
|
isOpen: isOpen,
|
|
109
|
-
onClose: handleClose
|
|
110
|
-
|
|
111
|
-
,
|
|
104
|
+
onClose: handleClose,
|
|
105
|
+
onScroll: handleScroll,
|
|
112
106
|
footer: footer,
|
|
113
107
|
headerIcon: {
|
|
114
108
|
name: 'arrows-rotate',
|
|
@@ -116,7 +110,7 @@ const IconPickerModal = (props, context) => {
|
|
|
116
110
|
}
|
|
117
111
|
}, /*#__PURE__*/React.createElement("div", {
|
|
118
112
|
className: style.iconPicker
|
|
119
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
113
|
+
}, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
120
114
|
className: style.searchWrapper
|
|
121
115
|
}, /*#__PURE__*/React.createElement(SearchForm, {
|
|
122
116
|
search: {
|
|
@@ -139,7 +133,7 @@ const IconPickerModal = (props, context) => {
|
|
|
139
133
|
onClick: handleReset
|
|
140
134
|
}, translate('empty_search_result_clear_search'))) : /*#__PURE__*/React.createElement("div", {
|
|
141
135
|
className: style.iconsListWrapper
|
|
142
|
-
}, icons)));
|
|
136
|
+
}, icons))));
|
|
143
137
|
};
|
|
144
138
|
IconPickerModal.contextTypes = {
|
|
145
139
|
translate: Provider.childContextTypes.translate
|
|
@@ -1 +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","allIcons","_pipe","_values","_map","_get","_uniq","selectedIcon","setSelectedIcon","displayedIcons","setDisplayedIcons","_slice","searchValue","searchResults","handleSearch","handleReset","handleCancel","handleClose","handleIconClick","iconName","console","log","prevSelectedIcon","setCurrentIndex","icons","_entries","index","createElement","key","size","faIcon","onClick","options","isSelected","footer","cancelButton","label","confirmButton","disabled","color","cm_primary_blue","title","description","headerIcon","name","backgroundColor","className","iconPicker","searchWrapper","search","placeholder","value","onChange","onReset","dataTestId","_size","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","iconsListWrapper","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","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 allIcons = useMemo(() => pipe(values, map(get('iconName')), uniq)(fas), []);\n\n const [selectedIcon, setSelectedIcon] = useState(null);\n const [displayedIcons, setDisplayedIcons] = useState(slice(0, ICONS_PER_LOAD, allIcons));\n // const [currentIndex, setCurrentIndex] = useState(ICONS_PER_LOAD);\n\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 console.log('in handleIconClick');\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={iconName}\n size=\"responsive\"\n data-name={iconName}\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 <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 </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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","ignoreList":[]}
|
|
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","_pipe","_values","_map","_get","_uniq","searchValue","searchResults","handleSearch","handleReset","handleCancel","handleClose","handleIconClick","iconName","prevSelectedIcon","loadMoreIcons","nextIndex","newIcons","_slice","prevIcons","handleScroll","event","scrollTop","clientHeight","scrollHeight","currentTarget","icons","_entries","index","createElement","key","size","faIcon","onClick","options","isSelected","footer","cancelButton","label","confirmButton","disabled","color","cm_primary_blue","title","description","onScroll","headerIcon","name","backgroundColor","className","iconPicker","Fragment","searchWrapper","search","placeholder","value","onChange","onReset","dataTestId","_size","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","iconsListWrapper","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","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":";;;;;;;;AAAA,OAAOA,KAAK,IAAGC,OAAO,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,SAAS,QAAO,OAAO;AACtE,OAAOC,SAAS,MAAM,YAAY;AAClC,SAAQC,GAAG,QAAO,kCAAkC;AAEpD,OAAOC,SAAS,MAAM,eAAe;AACrC,OAAOC,UAAU,MAAM,wBAAwB;AAC/C,OAAOC,QAAQ,MAAM,qBAAqB;AAC1C,OAAOC,UAAU,MAAM,gBAAgB;AACvC,SAAQC,MAAM,QAAO,wBAAwB;AAC7C,OAAOC,KAAK,MAAM,aAAa;AAC/B,OAAOC,aAAa,MAAM,mBAAmB;AAE7C,MAAMC,cAAc,GAAG,EAAE;AAEzB,MAAMC,eAAe,GAAGA,CAACC,KAAK,EAAEC,OAAO,KAAK;EAC1C,MAAM;IAACC,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAEC;EAAO,CAAC,GAAGL,KAAK;EACpD,MAAM;IAACM;EAAS,CAAC,GAAGL,OAAO;EAE3B,MAAM,CAACM,YAAY,EAAEC,eAAe,CAAC,GAAGtB,QAAQ,CAAC,IAAI,CAAC;EACtD,MAAM,CAACuB,cAAc,EAAEC,iBAAiB,CAAC,GAAGxB,QAAQ,CAAC,EAAE,CAAC;EACxD,MAAM,CAACyB,YAAY,EAAEC,eAAe,CAAC,GAAG1B,QAAQ,CAAC,CAAC,CAAC;EAEnD,MAAM2B,QAAQ,GAAG5B,OAAO,CAAC,MAAM6B,KAAA,CAAAC,OAAA,EAAaC,IAAA,CAAIC,IAAA,CAAI,UAAU,CAAC,CAAC,EAAAC,KAAM,CAAC,CAAC5B,GAAG,CAAC,EAAE,EAAE,CAAC;EACjF,MAAM;IAAC6B,WAAW;IAAEC,aAAa;IAAEC,YAAY;IAAEC;EAAW,CAAC,GAAGzB,aAAa,CAACgB,QAAQ,CAAC;EAEvF,MAAMU,YAAY,GAAGpC,WAAW,CAAC,MAAM;IACrCgB,QAAQ,CAAC,CAAC;EACZ,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,MAAMqB,WAAW,GAAGrC,WAAW,CAAC,MAAM;IACpCkB,OAAO,CAAC,CAAC;EACX,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,MAAMoB,eAAe,GAAGtC,WAAW,CACjCuC,QAAQ,IAAI,MAAM;IAChBlB,eAAe,CAACmB,gBAAgB,IAAKA,gBAAgB,KAAKD,QAAQ,GAAG,IAAI,GAAGA,QAAS,CAAC;EACxF,CAAC,EACD,EACF,CAAC;EAED,MAAME,aAAa,GAAGzC,WAAW,CAAC,MAAM;IACtC,MAAM0C,SAAS,GAAGlB,YAAY,GAAGb,cAAc;IAC/C,MAAMgC,QAAQ,GAAGC,MAAA,CAAMpB,YAAY,EAAEkB,SAAS,EAAET,aAAa,CAAC;IAC9DV,iBAAiB,CAACsB,SAAS,IAAI,CAAC,GAAGA,SAAS,EAAE,GAAGF,QAAQ,CAAC,CAAC;IAC3DlB,eAAe,CAACiB,SAAS,CAAC;EAC5B,CAAC,EAAE,CAAClB,YAAY,EAAES,aAAa,CAAC,CAAC;EAEjChC,SAAS,CAAC,MAAM;IACdsB,iBAAiB,CAAC,MAAMqB,MAAA,CAAM,CAAC,EAAEjC,cAAc,EAAEsB,aAAa,CAAC,CAAC;IAChER,eAAe,CAACd,cAAc,CAAC;EACjC,CAAC,EAAE,CAACsB,aAAa,CAAC,CAAC;EAEnB,MAAMa,YAAY,GAAG9C,WAAW,CAC9B+C,KAAK,IAAI;IACP,MAAM;MAACC,SAAS;MAAEC,YAAY;MAAEC;IAAY,CAAC,GAAGH,KAAK,CAACI,aAAa;IACnE,IAAID,YAAY,GAAGF,SAAS,IAAIC,YAAY,GAAG,CAAC,EAAE;MAChDR,aAAa,CAAC,CAAC;IACjB;EACF,CAAC,EACD,CAACA,aAAa,CAChB,CAAC;EAED,MAAMW,KAAK,GAAGtD,OAAO,CACnB,MACE6B,KAAA,CAAA0B,QAAA,EAEExB,IAAA,CAAI,CAAC,CAACyB,KAAK,EAAEf,QAAQ,CAAC,kBACpB1C,KAAA,CAAA0D,aAAA,CAAClD,UAAU;IACTmD,GAAG,EAAE,QAAQF,KAAK,EAAG;IACrBG,IAAI,EAAC,YAAY;IACjB,aAAW,QAAQH,KAAK,EAAG;IAC3B,cAAYf,QAAS;IACrBmB,MAAM,EAAEnB,QAAS;IACjBoB,OAAO,EAAErB,eAAe,CAACC,QAAQ,CAAE;IACnCqB,OAAO,EAAE;MAACC,UAAU,EAAEzC,YAAY,KAAKmB;IAAQ;EAAE,CAClD,CACF,CACH,CAAC,CAACjB,cAAc,CAAC,EACnB,CAACA,cAAc,EAAEF,YAAY,EAAEkB,eAAe,CAChD,CAAC;EAED,MAAMwB,MAAM,GAAGhE,OAAO,CAAC,MAAM;IAC3B,OAAO;MACLiE,YAAY,EAAE;QACZ/C,QAAQ,EAAEoB,YAAY;QACtB4B,KAAK,EAAE7C,SAAS,CAAC,QAAQ;MAC3B,CAAC;MACD8C,aAAa,EAAE;QACbhD,SAAS,EAAEA,CAAA,KAAM;UACfA,SAAS,CAACG,YAAY,CAAC;UACvBC,eAAe,CAAC,IAAI,CAAC;UACrBH,OAAO,CAAC,CAAC;QACX,CAAC;QACD8C,KAAK,EAAE7C,SAAS,CAAC,SAAS,CAAC;QAC3BoB,QAAQ,EAAE,MAAM;QAChB2B,QAAQ,EAAE9C,YAAY,KAAK,IAAI;QAC/B+C,KAAK,EAAE3D,MAAM,CAAC4D;MAChB;IACF,CAAC;EACH,CAAC,EAAE,CAAChC,YAAY,EAAEnB,SAAS,EAAEC,OAAO,EAAEC,SAAS,EAAEC,YAAY,CAAC,CAAC;EAE/D,IAAI,CAACL,MAAM,EAAE,OAAO,IAAI;EAExB,oBACElB,KAAA,CAAA0D,aAAA,CAACnD,SAAS;IACRiE,KAAK,EAAElD,SAAS,CAAC,mBAAmB,CAAE;IACtCmD,WAAW,EAAEnD,SAAS,CAAC,yBAAyB,CAAE;IAClDJ,MAAM,EAAEA,MAAO;IACfG,OAAO,EAAEmB,WAAY;IACrBkC,QAAQ,EAAEzB,YAAa;IACvBgB,MAAM,EAAEA,MAAO;IACfU,UAAU,EAAE;MACVC,IAAI,EAAE,eAAe;MACrBC,eAAe,EAAE;IACnB;EAAE,gBAEF7E,KAAA,CAAA0D,aAAA;IAAKoB,SAAS,EAAElE,KAAK,CAACmE;EAAW,gBAE7B/E,KAAA,CAAA0D,aAAA,CAAA1D,KAAA,CAAAgF,QAAA,qBACEhF,KAAA,CAAA0D,aAAA;IAAKoB,SAAS,EAAElE,KAAK,CAACqE;EAAc,gBAClCjF,KAAA,CAAA0D,aAAA,CAAChD,UAAU;IACTwE,MAAM,EAAE;MACNC,WAAW,EAAE7D,SAAS,CAAC,qBAAqB,CAAC;MAC7C8D,KAAK,EAAEjD,WAAW;MAClBkD,QAAQ,EAAEhD;IACZ,CAAE;IACFiD,OAAO,EAAEhD,WAAY;IACrBiD,UAAU,EAAC;EAAc,CAC1B,CACE,CAAC,EACLpD,WAAW,IAAIqD,KAAA,CAAKpD,aAAa,CAAC,KAAK,CAAC,gBACvCpC,KAAA,CAAA0D,aAAA;IAAKoB,SAAS,EAAElE,KAAK,CAAC6E;EAA2B,gBAC/CzF,KAAA,CAAA0D,aAAA;IAAKoB,SAAS,EAAElE,KAAK,CAAC8E;EAAuB,GAC1CpE,SAAS,CAAC,2BAA2B,EAAE;IAACa;EAAW,CAAC,CAClD,CAAC,eACNnC,KAAA,CAAA0D,aAAA;IAAKoB,SAAS,EAAElE,KAAK,CAAC+E;EAA6B,GAChDrE,SAAS,CAAC,iCAAiC,CACzC,CAAC,eACNtB,KAAA,CAAA0D,aAAA;IAAKoB,SAAS,EAAElE,KAAK,CAACgF,4BAA6B;IAAC9B,OAAO,EAAExB;EAAY,GACtEhB,SAAS,CAAC,kCAAkC,CAC1C,CACF,CAAC,gBAENtB,KAAA,CAAA0D,aAAA;IAAKoB,SAAS,EAAElE,KAAK,CAACiF;EAAiB,GAAEtC,KAAW,CAEtD,CAED,CACI,CAAC;AAEhB,CAAC;AAEDxC,eAAe,CAAC+E,YAAY,GAAG;EAC7BxE,SAAS,EAAEb,QAAQ,CAACsF,iBAAiB,CAACzE;AACxC,CAAC;AAEDP,eAAe,CAACiF,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EAC1BjF,MAAM,EAAEb,SAAS,CAAC+F,IAAI;EACtBjF,QAAQ,EAAEd,SAAS,CAACgG,IAAI;EACxBjF,SAAS,EAAEf,SAAS,CAACgG,IAAI;EACzBhF,OAAO,EAAEhB,SAAS,CAACgG;AACrB,CAAC;AAED,eAAetF,eAAe","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/select-icon/index.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/select-icon/index.js"],"names":[],"mappings":";AAgDA,qDA0BC"}
|
|
@@ -25,7 +25,10 @@ const getButtonContent = (faIcon, options = {}) => {
|
|
|
25
25
|
} = options;
|
|
26
26
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
27
27
|
className: _style.default.contentWrapper
|
|
28
|
-
}, isSelected ?
|
|
28
|
+
}, isSelected ?
|
|
29
|
+
/*#__PURE__*/
|
|
30
|
+
/* checkbox icon */
|
|
31
|
+
_react.default.createElement("div", {
|
|
29
32
|
className: _style.default.checkIcon
|
|
30
33
|
}, /*#__PURE__*/_react.default.createElement(_icon.default, {
|
|
31
34
|
iconName: CHECK_ICON_NAME_MAP[selectionMode],
|
|
@@ -35,7 +38,10 @@ const getButtonContent = (faIcon, options = {}) => {
|
|
|
35
38
|
faSize: 16,
|
|
36
39
|
wrapperSize: 16
|
|
37
40
|
}
|
|
38
|
-
})) : null,
|
|
41
|
+
})) : null,
|
|
42
|
+
/*#__PURE__*/
|
|
43
|
+
/* selection tick (L18) / icon */
|
|
44
|
+
_react.default.createElement("div", {
|
|
39
45
|
className: _style.default.iconWrapper
|
|
40
46
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
41
47
|
className: _style.default.icon
|
|
@@ -71,7 +77,7 @@ const SelectIcon = props => {
|
|
|
71
77
|
"data-testid": `button-${dataName}`,
|
|
72
78
|
className: styleButton,
|
|
73
79
|
onClick: handleOnClick
|
|
74
|
-
}, contentView), [ariaLabel, contentView, dataName, handleOnClick]);
|
|
80
|
+
}, contentView), [ariaLabel, contentView, dataName, handleOnClick, styleButton]);
|
|
75
81
|
return /*#__PURE__*/_react.default.createElement(IconButton, null);
|
|
76
82
|
};
|
|
77
83
|
SelectIcon.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_classnames","_icon","_colors","_style","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ICON_COLOR","COLORS","cm_primary_blue","BACKGROUND_COLOR","white","CHECK_ICON_NAME_MAP","single","multi","getButtonContent","faIcon","options","selectionMode","isSelected","iconColor","createElement","className","style","contentWrapper","checkIcon","iconName","backgroundColor","size","faSize","wrapperSize","iconWrapper","icon","iconText","SelectIcon","props","dataName","ariaLabel","onClick","contentView","styleButton","classnames","defaultStyle","selected","handleOnClick","useCallback","IconButton","type","propTypes","process","env","NODE_ENV","PropTypes","string","func","shape","oneOf","bool","_default","exports"],"sources":["../../../src/atom/select-icon/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport FaIcon from '../icon';\n\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst ICON_COLOR = COLORS.cm_primary_blue;\nconst BACKGROUND_COLOR = COLORS.white;\nconst CHECK_ICON_NAME_MAP = {\n single: 'circle-check',\n multi: 'square-check'\n};\n\nconst getButtonContent = (faIcon, options = {}) => {\n const {selectionMode = 'single', isSelected = false, iconColor = ICON_COLOR} = options;\n\n return (\n <div className={style.contentWrapper}>\n {isSelected ? (\n <div className={style.checkIcon}>\n <FaIcon\n iconName={CHECK_ICON_NAME_MAP[selectionMode]}\n iconColor={iconColor}\n backgroundColor={BACKGROUND_COLOR}\n size={{faSize: 16, wrapperSize: 16}}\n />\n </div>\n ) : null}\n\n
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_classnames","_icon","_colors","_style","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ICON_COLOR","COLORS","cm_primary_blue","BACKGROUND_COLOR","white","CHECK_ICON_NAME_MAP","single","multi","getButtonContent","faIcon","options","selectionMode","isSelected","iconColor","createElement","className","style","contentWrapper","checkIcon","iconName","backgroundColor","size","faSize","wrapperSize","iconWrapper","icon","iconText","SelectIcon","props","dataName","ariaLabel","onClick","contentView","styleButton","classnames","defaultStyle","selected","handleOnClick","useCallback","IconButton","type","propTypes","process","env","NODE_ENV","PropTypes","string","func","shape","oneOf","bool","_default","exports"],"sources":["../../../src/atom/select-icon/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport FaIcon from '../icon';\n\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst ICON_COLOR = COLORS.cm_primary_blue;\nconst BACKGROUND_COLOR = COLORS.white;\nconst CHECK_ICON_NAME_MAP = {\n single: 'circle-check',\n multi: 'square-check'\n};\n\nconst getButtonContent = (faIcon, options = {}) => {\n const {selectionMode = 'single', isSelected = false, iconColor = ICON_COLOR} = options;\n\n return (\n <div className={style.contentWrapper}>\n {isSelected ? (\n /* checkbox icon */\n <div className={style.checkIcon}>\n <FaIcon\n iconName={CHECK_ICON_NAME_MAP[selectionMode]}\n iconColor={iconColor}\n backgroundColor={BACKGROUND_COLOR}\n size={{faSize: 16, wrapperSize: 16}}\n />\n </div>\n ) : null}\n {\n /* selection tick (L18) / icon */\n <div className={style.iconWrapper}>\n <div className={style.icon}>\n <FaIcon\n iconName={faIcon}\n iconColor={isSelected ? iconColor : ''}\n size={{faSize: 32, wrapperSize: 32}}\n />\n </div>\n <div className={style.iconText}>{faIcon}</div>\n </div>\n }\n </div>\n );\n};\n\nconst SelectIcon = props => {\n const {faIcon, 'data-name': dataName, 'aria-label': ariaLabel, onClick, options = {}} = props;\n\n const {isSelected = false} = options;\n\n const contentView = getButtonContent(faIcon, options);\n const styleButton = classnames(style.defaultStyle, isSelected && style.selected);\n const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n const IconButton = useCallback(\n () => (\n <button\n type=\"button\"\n aria-label={ariaLabel}\n data-name={dataName}\n data-testid={`button-${dataName}`}\n className={styleButton}\n onClick={handleOnClick}\n >\n {contentView}\n </button>\n ),\n [ariaLabel, contentView, dataName, handleOnClick, styleButton]\n );\n\n return <IconButton />;\n};\n\nSelectIcon.propTypes = {\n 'aria-label': PropTypes.string,\n 'data-name': PropTypes.string,\n faIcon: PropTypes.string,\n onClick: PropTypes.func,\n options: PropTypes.shape({\n selectionMode: PropTypes.oneOf(['single', 'multi']),\n isSelected: PropTypes.bool,\n iconColor: PropTypes.string\n })\n};\n\nexport default SelectIcon;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/icon-picker-modal/index.js"],"names":[],"mappings":";AAcA,+
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/icon-picker-modal/index.js"],"names":[],"mappings":";AAcA,+EAwIC"}
|
|
@@ -34,11 +34,10 @@ const IconPickerModal = (props, context) => {
|
|
|
34
34
|
const {
|
|
35
35
|
translate
|
|
36
36
|
} = context;
|
|
37
|
-
const allIcons = (0, _react.useMemo)(() => (0, _pipe2.default)(_values2.default, (0, _map2.default)((0, _get2.default)('iconName')), _uniq2.default)(_proSolidSvgIcons.fas), []);
|
|
38
37
|
const [selectedIcon, setSelectedIcon] = (0, _react.useState)(null);
|
|
39
|
-
const [displayedIcons, setDisplayedIcons] = (0, _react.useState)(
|
|
40
|
-
|
|
41
|
-
|
|
38
|
+
const [displayedIcons, setDisplayedIcons] = (0, _react.useState)([]);
|
|
39
|
+
const [currentIndex, setCurrentIndex] = (0, _react.useState)(0);
|
|
40
|
+
const allIcons = (0, _react.useMemo)(() => (0, _pipe2.default)(_values2.default, (0, _map2.default)((0, _get2.default)('iconName')), _uniq2.default)(_proSolidSvgIcons.fas), []);
|
|
42
41
|
const {
|
|
43
42
|
searchValue,
|
|
44
43
|
searchResults,
|
|
@@ -52,36 +51,32 @@ const IconPickerModal = (props, context) => {
|
|
|
52
51
|
onClose();
|
|
53
52
|
}, [onClose]);
|
|
54
53
|
const handleIconClick = (0, _react.useCallback)(iconName => () => {
|
|
55
|
-
console.log('in handleIconClick');
|
|
56
54
|
setSelectedIcon(prevSelectedIcon => prevSelectedIcon === iconName ? null : iconName);
|
|
57
55
|
}, []);
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
// }, [currentIndex, searchResults]);
|
|
65
|
-
|
|
56
|
+
const loadMoreIcons = (0, _react.useCallback)(() => {
|
|
57
|
+
const nextIndex = currentIndex + ICONS_PER_LOAD;
|
|
58
|
+
const newIcons = (0, _slice2.default)(currentIndex, nextIndex, searchResults);
|
|
59
|
+
setDisplayedIcons(prevIcons => [...prevIcons, ...newIcons]);
|
|
60
|
+
setCurrentIndex(nextIndex);
|
|
61
|
+
}, [currentIndex, searchResults]);
|
|
66
62
|
(0, _react.useEffect)(() => {
|
|
67
63
|
setDisplayedIcons(() => (0, _slice2.default)(0, ICONS_PER_LOAD, searchResults));
|
|
68
64
|
setCurrentIndex(ICONS_PER_LOAD);
|
|
69
65
|
}, [searchResults]);
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
66
|
+
const handleScroll = (0, _react.useCallback)(event => {
|
|
67
|
+
const {
|
|
68
|
+
scrollTop,
|
|
69
|
+
clientHeight,
|
|
70
|
+
scrollHeight
|
|
71
|
+
} = event.currentTarget;
|
|
72
|
+
if (scrollHeight - scrollTop <= clientHeight + 1) {
|
|
73
|
+
loadMoreIcons();
|
|
74
|
+
}
|
|
75
|
+
}, [loadMoreIcons]);
|
|
81
76
|
const icons = (0, _react.useMemo)(() => (0, _pipe2.default)(_entries2.default, (0, _map2.default)(([index, iconName]) => /*#__PURE__*/_react.default.createElement(_selectIcon.default, {
|
|
82
|
-
key:
|
|
77
|
+
key: `icon-${index}`,
|
|
83
78
|
size: "responsive",
|
|
84
|
-
"data-name":
|
|
79
|
+
"data-name": `icon-${index}`,
|
|
85
80
|
"aria-label": iconName,
|
|
86
81
|
faIcon: iconName,
|
|
87
82
|
onClick: handleIconClick(iconName),
|
|
@@ -113,9 +108,8 @@ const IconPickerModal = (props, context) => {
|
|
|
113
108
|
title: translate('icon_picker_title'),
|
|
114
109
|
description: translate('icon_picker_description'),
|
|
115
110
|
isOpen: isOpen,
|
|
116
|
-
onClose: handleClose
|
|
117
|
-
|
|
118
|
-
,
|
|
111
|
+
onClose: handleClose,
|
|
112
|
+
onScroll: handleScroll,
|
|
119
113
|
footer: footer,
|
|
120
114
|
headerIcon: {
|
|
121
115
|
name: 'arrows-rotate',
|
|
@@ -123,7 +117,7 @@ const IconPickerModal = (props, context) => {
|
|
|
123
117
|
}
|
|
124
118
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
125
119
|
className: _style.default.iconPicker
|
|
126
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
120
|
+
}, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
127
121
|
className: _style.default.searchWrapper
|
|
128
122
|
}, /*#__PURE__*/_react.default.createElement(_searchForm.default, {
|
|
129
123
|
search: {
|
|
@@ -146,7 +140,7 @@ const IconPickerModal = (props, context) => {
|
|
|
146
140
|
onClick: handleReset
|
|
147
141
|
}, translate('empty_search_result_clear_search'))) : /*#__PURE__*/_react.default.createElement("div", {
|
|
148
142
|
className: _style.default.iconsListWrapper
|
|
149
|
-
}, icons)));
|
|
143
|
+
}, icons))));
|
|
150
144
|
};
|
|
151
145
|
IconPickerModal.contextTypes = {
|
|
152
146
|
translate: _provider.default.childContextTypes.translate
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_proSolidSvgIcons","_baseModal","_selectIcon","_provider","_searchForm","_colors","_style","_useIconSearch","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ICONS_PER_LOAD","IconPickerModal","props","context","isOpen","onCancel","onConfirm","onClose","translate","allIcons","useMemo","_pipe2","_values2","_map2","_get2","_uniq2","fas","selectedIcon","setSelectedIcon","useState","displayedIcons","setDisplayedIcons","_slice2","searchValue","searchResults","handleSearch","handleReset","useIconSearch","handleCancel","useCallback","handleClose","handleIconClick","iconName","console","log","prevSelectedIcon","useEffect","setCurrentIndex","icons","_entries2","index","createElement","key","size","faIcon","onClick","options","isSelected","footer","cancelButton","label","confirmButton","disabled","color","COLORS","cm_primary_blue","title","description","headerIcon","name","backgroundColor","className","style","iconPicker","searchWrapper","search","placeholder","value","onChange","onReset","dataTestId","_size2","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","iconsListWrapper","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","bool","func","_default","exports"],"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 allIcons = useMemo(() => pipe(values, map(get('iconName')), uniq)(fas), []);\n\n const [selectedIcon, setSelectedIcon] = useState(null);\n const [displayedIcons, setDisplayedIcons] = useState(slice(0, ICONS_PER_LOAD, allIcons));\n // const [currentIndex, setCurrentIndex] = useState(ICONS_PER_LOAD);\n\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 console.log('in handleIconClick');\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={iconName}\n size=\"responsive\"\n data-name={iconName}\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 <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 </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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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_proSolidSvgIcons","_baseModal","_selectIcon","_provider","_searchForm","_colors","_style","_useIconSearch","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ICONS_PER_LOAD","IconPickerModal","props","context","isOpen","onCancel","onConfirm","onClose","translate","selectedIcon","setSelectedIcon","useState","displayedIcons","setDisplayedIcons","currentIndex","setCurrentIndex","allIcons","useMemo","_pipe2","_values2","_map2","_get2","_uniq2","fas","searchValue","searchResults","handleSearch","handleReset","useIconSearch","handleCancel","useCallback","handleClose","handleIconClick","iconName","prevSelectedIcon","loadMoreIcons","nextIndex","newIcons","_slice2","prevIcons","useEffect","handleScroll","event","scrollTop","clientHeight","scrollHeight","currentTarget","icons","_entries2","index","createElement","key","size","faIcon","onClick","options","isSelected","footer","cancelButton","label","confirmButton","disabled","color","COLORS","cm_primary_blue","title","description","onScroll","headerIcon","name","backgroundColor","className","style","iconPicker","Fragment","searchWrapper","search","placeholder","value","onChange","onReset","dataTestId","_size2","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","iconsListWrapper","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","bool","func","_default","exports"],"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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","ignoreList":[]}
|
package/locales/lt/global.json
CHANGED
|
@@ -164,7 +164,7 @@
|
|
|
164
164
|
"mandatory_fields": "*Privalomi laukai",
|
|
165
165
|
"something_went_wrong": "Oi! Kažkas nutiko ne taip.",
|
|
166
166
|
"review_mode_tooltip_header": "Kas yra Kartojimosi režimas?",
|
|
167
|
-
"review_mode_tooltip_content": "Informacija pranyksta iš atminties vos tik
|
|
167
|
+
"review_mode_tooltip_content": "Informacija pranyksta iš atminties vos tik ją įsimenate? Tai visiškai normalu: be kartojimo nėra ir įsiminimo! Kad žinios išliktų ilgam, naudokite Kartojimo režimą ir atgaivinkite atmintį!",
|
|
168
168
|
"review_mode_tooltip_content_part1": "Pasirinkite 1 įgūdį",
|
|
169
169
|
"review_mode_tooltip_content_part2": "Atsakykite į 5 klausimus",
|
|
170
170
|
"review_mode_tooltip_content_part3": "Jūs turite neribotą skaičių gyvybių.",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coorpacademy/components",
|
|
3
|
-
"version": "11.40.
|
|
3
|
+
"version": "11.40.2-alpha.4+ddd0b4d7b",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -166,5 +166,5 @@
|
|
|
166
166
|
"last 2 versions",
|
|
167
167
|
"IE 11"
|
|
168
168
|
],
|
|
169
|
-
"gitHead": "
|
|
169
|
+
"gitHead": "ddd0b4d7ba0d762ad3f85bace7c6ce9163a000a8"
|
|
170
170
|
}
|