@coorpacademy/components 11.40.1-alpha.15 → 11.40.1-alpha.17

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.
@@ -18,23 +18,14 @@ const getButtonContent = (faIcon, options = {}) => {
18
18
  } = options;
19
19
  return /*#__PURE__*/React.createElement("div", {
20
20
  className: style.contentWrapper
21
- }, isSelected ? /*#__PURE__*/React.createElement("div", {
22
- className: style.checkIcon
23
- }, /*#__PURE__*/React.createElement(FaIcon, {
24
- iconName: CHECK_ICON_NAME_MAP[selectionMode],
25
- iconColor: iconColor,
26
- backgroundColor: BACKGROUND_COLOR,
27
- size: {
28
- faSize: 16,
29
- wrapperSize: 16
30
- }
31
- })) : null, /*#__PURE__*/React.createElement("div", {
21
+ }, /*#__PURE__*/React.createElement("div", {
32
22
  className: style.iconWrapper
33
23
  }, /*#__PURE__*/React.createElement("div", {
34
24
  className: style.icon
35
25
  }, /*#__PURE__*/React.createElement(FaIcon, {
36
- iconName: faIcon,
37
- iconColor: isSelected ? iconColor : '',
26
+ iconName: faIcon
27
+ // iconColor={isSelected ? iconColor : ''}
28
+ ,
38
29
  size: {
39
30
  faSize: 32,
40
31
  wrapperSize: 32
@@ -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","e","preventDefault","stopPropagation","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 <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 </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(\n e => {\n e.preventDefault();\n e.stopPropagation();\n onClick();\n },\n [onClick]\n );\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]\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
+ {"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","iconWrapper","icon","iconName","size","faSize","wrapperSize","iconText","SelectIcon","props","dataName","ariaLabel","onClick","contentView","styleButton","defaultStyle","selected","handleOnClick","e","preventDefault","stopPropagation","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 <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 </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(\n e => {\n e.preventDefault();\n e.stopPropagation();\n onClick();\n },\n [onClick]\n );\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]\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":[]}
@@ -27,8 +27,7 @@
27
27
  }
28
28
 
29
29
  .selected {
30
- background-color: cm_grey_50;
31
- border: 2px solid cm_primary_blue;
30
+ color: red;
32
31
  }
33
32
 
34
33
  .selected:hover {
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/icon-picker-modal/index.js"],"names":[],"mappings":";AAcA,+EAuHC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/icon-picker-modal/index.js"],"names":[],"mappings":";AAcA,+EAgHC"}
@@ -28,8 +28,9 @@ const IconPickerModal = (props, context) => {
28
28
  translate
29
29
  } = context;
30
30
  const allIcons = useMemo(() => _pipe(_values, _map(_get('iconName')), _uniq)(fas), []);
31
- const [selectedIcon, setSelectedIcon] = useState(null);
32
- const [displayedIcons, setDisplayedIcons] = useState(_slice(0, ICONS_PER_LOAD, allIcons));
31
+ const [selectedIcon, setSelectedIcon] = useState(false);
32
+ // const [displayedIcons, setDisplayedIcons] = useState(slice(0, ICONS_PER_LOAD, allIcons));
33
+
33
34
  const {
34
35
  searchValue,
35
36
  searchResults,
@@ -42,29 +43,24 @@ const IconPickerModal = (props, context) => {
42
43
  const handleClose = useCallback(() => {
43
44
  onClose();
44
45
  }, [onClose]);
45
- const handleIconClick = useCallback(iconName => e => {
46
- e.preventDefault();
47
- e.stopPropagation();
48
- console.log('in handleIconClick ----->');
49
- setSelectedIcon(prevSelectedIcon => {
50
- console.log('TCL ------> ~ IconPickerModal ~ prevSelectedIcon:', prevSelectedIcon);
51
- return prevSelectedIcon === iconName ? null : iconName;
52
- });
46
+ const handleOnClick = useCallback(iconName => () => {
47
+ console.log('TCL ------> ~ IconPickerModal ~ iconName:', iconName);
48
+ setSelectedIcon(iconName);
53
49
  }, []);
54
50
  const icons = useMemo(() => _pipe(_entries, _map(([index, iconName]) => {
55
- console.log('in icons ---->');
51
+ console.log('in icons ---->', selectedIcon);
56
52
  return /*#__PURE__*/React.createElement(SelectIcon, {
57
53
  key: iconName,
58
54
  size: "responsive",
59
55
  "data-name": iconName,
60
56
  "aria-label": iconName,
61
57
  faIcon: iconName,
62
- onClick: handleIconClick(iconName),
58
+ onClick: handleOnClick(iconName),
63
59
  options: {
64
60
  isSelected: selectedIcon === iconName
65
61
  }
66
62
  });
67
- }))(displayedIcons), [displayedIcons, selectedIcon, handleIconClick]);
63
+ }))(_slice(0, ICONS_PER_LOAD, allIcons)), [allIcons, handleOnClick, selectedIcon]);
68
64
  const footer = useMemo(() => {
69
65
  return {
70
66
  cancelButton: {
@@ -73,17 +69,16 @@ const IconPickerModal = (props, context) => {
73
69
  },
74
70
  confirmButton: {
75
71
  onConfirm: () => {
76
- onConfirm(selectedIcon);
77
- setSelectedIcon(null);
72
+ onConfirm();
78
73
  onClose();
79
74
  },
80
75
  label: translate('confirm'),
81
76
  iconName: 'plus',
82
- disabled: selectedIcon === null,
77
+ disabled: false,
83
78
  color: COLORS.cm_primary_blue
84
79
  }
85
80
  };
86
- }, [handleCancel, onConfirm, onClose, translate, selectedIcon]);
81
+ }, [handleCancel, onConfirm, onClose, translate]);
87
82
  if (!isOpen) return null;
88
83
  return /*#__PURE__*/React.createElement(BaseModal, {
89
84
  title: translate('icon_picker_title'),
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","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","e","preventDefault","stopPropagation","console","log","prevSelectedIcon","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} 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\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 => e => {\n e.preventDefault();\n e.stopPropagation();\n console.log('in handleIconClick ----->');\n setSelectedIcon(prevSelectedIcon => {\n console.log('TCL ------> ~ IconPickerModal ~ prevSelectedIcon:', prevSelectedIcon);\n\n return prevSelectedIcon === iconName ? null : iconName;\n });\n },\n []\n );\n\n const icons = useMemo(\n () =>\n pipe(\n entries,\n map(([index, iconName]) => {\n console.log('in icons ---->');\n return (\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 })\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 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","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","searchValue","searchResults","handleSearch","handleReset","handleCancel","handleClose","handleOnClick","iconName","console","log","icons","_entries","index","createElement","key","size","faIcon","onClick","options","isSelected","_slice","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(false);\n // const [displayedIcons, setDisplayedIcons] = useState(slice(0, ICONS_PER_LOAD, allIcons));\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 handleOnClick = useCallback(\n iconName => () => {\n console.log('TCL ------> ~ IconPickerModal ~ iconName:', iconName);\n setSelectedIcon(iconName);\n },\n []\n );\n\n const icons = useMemo(\n () =>\n pipe(\n entries,\n map(([index, iconName]) => {\n console.log('in icons ---->', selectedIcon);\n return (\n <SelectIcon\n key={iconName}\n size=\"responsive\"\n data-name={iconName}\n aria-label={iconName}\n faIcon={iconName}\n onClick={handleOnClick(iconName)}\n options={{isSelected: selectedIcon === iconName}}\n />\n );\n })\n )(slice(0, ICONS_PER_LOAD, allIcons)),\n [allIcons, handleOnClick, selectedIcon]\n );\n\n const footer = useMemo(() => {\n return {\n cancelButton: {\n onCancel: handleCancel,\n label: translate('cancel')\n },\n confirmButton: {\n onConfirm: () => {\n onConfirm();\n onClose();\n },\n label: translate('confirm'),\n iconName: 'plus',\n disabled: false,\n color: COLORS.cm_primary_blue\n }\n };\n }, [handleCancel, onConfirm, onClose, translate]);\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 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":[]}
@@ -25,23 +25,14 @@ const getButtonContent = (faIcon, options = {}) => {
25
25
  } = options;
26
26
  return /*#__PURE__*/_react.default.createElement("div", {
27
27
  className: _style.default.contentWrapper
28
- }, isSelected ? /*#__PURE__*/_react.default.createElement("div", {
29
- className: _style.default.checkIcon
30
- }, /*#__PURE__*/_react.default.createElement(_icon.default, {
31
- iconName: CHECK_ICON_NAME_MAP[selectionMode],
32
- iconColor: iconColor,
33
- backgroundColor: BACKGROUND_COLOR,
34
- size: {
35
- faSize: 16,
36
- wrapperSize: 16
37
- }
38
- })) : null, /*#__PURE__*/_react.default.createElement("div", {
28
+ }, /*#__PURE__*/_react.default.createElement("div", {
39
29
  className: _style.default.iconWrapper
40
30
  }, /*#__PURE__*/_react.default.createElement("div", {
41
31
  className: _style.default.icon
42
32
  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
43
- iconName: faIcon,
44
- iconColor: isSelected ? iconColor : '',
33
+ iconName: faIcon
34
+ // iconColor={isSelected ? iconColor : ''}
35
+ ,
45
36
  size: {
46
37
  faSize: 32,
47
38
  wrapperSize: 32
@@ -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","preventDefault","stopPropagation","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 <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 </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(\n e => {\n e.preventDefault();\n e.stopPropagation();\n onClick();\n },\n [onClick]\n );\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]\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
+ {"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","iconWrapper","icon","iconName","size","faSize","wrapperSize","iconText","SelectIcon","props","dataName","ariaLabel","onClick","contentView","styleButton","classnames","defaultStyle","selected","handleOnClick","useCallback","preventDefault","stopPropagation","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 <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 </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(\n e => {\n e.preventDefault();\n e.stopPropagation();\n onClick();\n },\n [onClick]\n );\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]\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":[]}
@@ -27,8 +27,7 @@
27
27
  }
28
28
 
29
29
  .selected {
30
- background-color: cm_grey_50;
31
- border: 2px solid cm_primary_blue;
30
+ color: red;
32
31
  }
33
32
 
34
33
  .selected:hover {
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/icon-picker-modal/index.js"],"names":[],"mappings":";AAcA,+EAuHC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/icon-picker-modal/index.js"],"names":[],"mappings":";AAcA,+EAgHC"}
@@ -35,8 +35,9 @@ const IconPickerModal = (props, context) => {
35
35
  translate
36
36
  } = context;
37
37
  const allIcons = (0, _react.useMemo)(() => (0, _pipe2.default)(_values2.default, (0, _map2.default)((0, _get2.default)('iconName')), _uniq2.default)(_proSolidSvgIcons.fas), []);
38
- const [selectedIcon, setSelectedIcon] = (0, _react.useState)(null);
39
- const [displayedIcons, setDisplayedIcons] = (0, _react.useState)((0, _slice2.default)(0, ICONS_PER_LOAD, allIcons));
38
+ const [selectedIcon, setSelectedIcon] = (0, _react.useState)(false);
39
+ // const [displayedIcons, setDisplayedIcons] = useState(slice(0, ICONS_PER_LOAD, allIcons));
40
+
40
41
  const {
41
42
  searchValue,
42
43
  searchResults,
@@ -49,29 +50,24 @@ const IconPickerModal = (props, context) => {
49
50
  const handleClose = (0, _react.useCallback)(() => {
50
51
  onClose();
51
52
  }, [onClose]);
52
- const handleIconClick = (0, _react.useCallback)(iconName => e => {
53
- e.preventDefault();
54
- e.stopPropagation();
55
- console.log('in handleIconClick ----->');
56
- setSelectedIcon(prevSelectedIcon => {
57
- console.log('TCL ------> ~ IconPickerModal ~ prevSelectedIcon:', prevSelectedIcon);
58
- return prevSelectedIcon === iconName ? null : iconName;
59
- });
53
+ const handleOnClick = (0, _react.useCallback)(iconName => () => {
54
+ console.log('TCL ------> ~ IconPickerModal ~ iconName:', iconName);
55
+ setSelectedIcon(iconName);
60
56
  }, []);
61
57
  const icons = (0, _react.useMemo)(() => (0, _pipe2.default)(_entries2.default, (0, _map2.default)(([index, iconName]) => {
62
- console.log('in icons ---->');
58
+ console.log('in icons ---->', selectedIcon);
63
59
  return /*#__PURE__*/_react.default.createElement(_selectIcon.default, {
64
60
  key: iconName,
65
61
  size: "responsive",
66
62
  "data-name": iconName,
67
63
  "aria-label": iconName,
68
64
  faIcon: iconName,
69
- onClick: handleIconClick(iconName),
65
+ onClick: handleOnClick(iconName),
70
66
  options: {
71
67
  isSelected: selectedIcon === iconName
72
68
  }
73
69
  });
74
- }))(displayedIcons), [displayedIcons, selectedIcon, handleIconClick]);
70
+ }))((0, _slice2.default)(0, ICONS_PER_LOAD, allIcons)), [allIcons, handleOnClick, selectedIcon]);
75
71
  const footer = (0, _react.useMemo)(() => {
76
72
  return {
77
73
  cancelButton: {
@@ -80,17 +76,16 @@ const IconPickerModal = (props, context) => {
80
76
  },
81
77
  confirmButton: {
82
78
  onConfirm: () => {
83
- onConfirm(selectedIcon);
84
- setSelectedIcon(null);
79
+ onConfirm();
85
80
  onClose();
86
81
  },
87
82
  label: translate('confirm'),
88
83
  iconName: 'plus',
89
- disabled: selectedIcon === null,
84
+ disabled: false,
90
85
  color: _colors.COLORS.cm_primary_blue
91
86
  }
92
87
  };
93
- }, [handleCancel, onConfirm, onClose, translate, selectedIcon]);
88
+ }, [handleCancel, onConfirm, onClose, translate]);
94
89
  if (!isOpen) return null;
95
90
  return /*#__PURE__*/_react.default.createElement(_baseModal.default, {
96
91
  title: translate('icon_picker_title'),
@@ -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","preventDefault","stopPropagation","console","log","prevSelectedIcon","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} 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\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 => e => {\n e.preventDefault();\n e.stopPropagation();\n console.log('in handleIconClick ----->');\n setSelectedIcon(prevSelectedIcon => {\n console.log('TCL ------> ~ IconPickerModal ~ prevSelectedIcon:', prevSelectedIcon);\n\n return prevSelectedIcon === iconName ? null : iconName;\n });\n },\n []\n );\n\n const icons = useMemo(\n () =>\n pipe(\n entries,\n map(([index, iconName]) => {\n console.log('in icons ---->');\n return (\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 })\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 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","allIcons","useMemo","_pipe2","_values2","_map2","_get2","_uniq2","fas","selectedIcon","setSelectedIcon","useState","searchValue","searchResults","handleSearch","handleReset","useIconSearch","handleCancel","useCallback","handleClose","handleOnClick","iconName","console","log","icons","_entries2","index","createElement","key","size","faIcon","onClick","options","isSelected","_slice2","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(false);\n // const [displayedIcons, setDisplayedIcons] = useState(slice(0, ICONS_PER_LOAD, allIcons));\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 handleOnClick = useCallback(\n iconName => () => {\n console.log('TCL ------> ~ IconPickerModal ~ iconName:', iconName);\n setSelectedIcon(iconName);\n },\n []\n );\n\n const icons = useMemo(\n () =>\n pipe(\n entries,\n map(([index, iconName]) => {\n console.log('in icons ---->', selectedIcon);\n return (\n <SelectIcon\n key={iconName}\n size=\"responsive\"\n data-name={iconName}\n aria-label={iconName}\n faIcon={iconName}\n onClick={handleOnClick(iconName)}\n options={{isSelected: selectedIcon === iconName}}\n />\n );\n })\n )(slice(0, ICONS_PER_LOAD, allIcons)),\n [allIcons, handleOnClick, selectedIcon]\n );\n\n const footer = useMemo(() => {\n return {\n cancelButton: {\n onCancel: handleCancel,\n label: translate('cancel')\n },\n confirmButton: {\n onConfirm: () => {\n onConfirm();\n onClose();\n },\n label: translate('confirm'),\n iconName: 'plus',\n disabled: false,\n color: COLORS.cm_primary_blue\n }\n };\n }, [handleCancel, onConfirm, onClose, translate]);\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 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":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coorpacademy/components",
3
- "version": "11.40.1-alpha.15+d7be3c652",
3
+ "version": "11.40.1-alpha.17+8628ad4f4",
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": "d7be3c652edd234ca1fffac6f55347667c0182ed"
169
+ "gitHead": "8628ad4f4eedf3e91092307a3d3c1bb1141bc394"
170
170
  }