@pega/cosmos-react-core 9.0.0-build.1.0 → 9.0.0-build.2.0
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.
|
@@ -3,13 +3,13 @@ import type { ForwardProps } from '../../types';
|
|
|
3
3
|
import { type ComboBoxProps } from '../ComboBox';
|
|
4
4
|
import { type IconProps } from '../Icon';
|
|
5
5
|
import type { MenuProps } from '../Menu';
|
|
6
|
-
export interface IconPickerProps extends Pick<ComboBoxProps, 'id' | 'label' | 'labelHidden' | 'required' | 'disabled' | 'readOnly' | 'name' | 'status' | 'info' | 'placeholder' | 'autoFocus'>, Pick<MenuProps, 'scrollAt'> {
|
|
7
|
-
/** Default selection for the input. */
|
|
8
|
-
defaultSelection: string;
|
|
6
|
+
export interface IconPickerProps extends Pick<ComboBoxProps, 'id' | 'label' | 'labelHidden' | 'required' | 'disabled' | 'readOnly' | 'name' | 'status' | 'info' | 'placeholder' | 'autoFocus' | 'value'>, Pick<MenuProps, 'scrollAt'> {
|
|
9
7
|
/** Callback fired when input loses focus. */
|
|
10
8
|
onBlur?: (iconName: string) => void;
|
|
9
|
+
/** Current selection for the input. */
|
|
10
|
+
currentSelection: string;
|
|
11
11
|
/** Callback fired when user chooses icon from the list of icons. */
|
|
12
|
-
onSelect
|
|
12
|
+
onSelect: (iconName: string) => void;
|
|
13
13
|
/**
|
|
14
14
|
* The set of icons to pick from.
|
|
15
15
|
* @default 'budicon'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconPicker.d.ts","sourceRoot":"","sources":["../../../src/components/IconPicker/IconPicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAElF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAa,EAGX,KAAK,SAAS,EACf,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,SAAS,EAAiB,MAAM,SAAS,CAAC;AAKxD,MAAM,WAAW,eACf,SAAQ,IAAI,CACR,aAAa,EACX,IAAI,GACJ,OAAO,GACP,aAAa,GACb,UAAU,GACV,UAAU,GACV,UAAU,GACV,MAAM,GACN,QAAQ,GACR,MAAM,GACN,aAAa,GACb,WAAW,
|
|
1
|
+
{"version":3,"file":"IconPicker.d.ts","sourceRoot":"","sources":["../../../src/components/IconPicker/IconPicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAElF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAa,EAGX,KAAK,SAAS,EACf,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,SAAS,EAAiB,MAAM,SAAS,CAAC;AAKxD,MAAM,WAAW,eACf,SAAQ,IAAI,CACR,aAAa,EACX,IAAI,GACJ,OAAO,GACP,aAAa,GACb,UAAU,GACV,UAAU,GACV,UAAU,GACV,MAAM,GACN,QAAQ,GACR,MAAM,GACN,aAAa,GACb,WAAW,GACX,OAAO,CACV,EACD,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC7B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,uCAAuC;IACvC,gBAAgB,EAAE,MAAM,CAAC;IACzB,oEAAoE;IACpE,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;;OAGG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;CACxB;AAWD,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA+HjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -13,7 +13,7 @@ const getFilteredItems = (iconList, filterValue) => {
|
|
|
13
13
|
};
|
|
14
14
|
const pageSize = 20;
|
|
15
15
|
const IconPicker = forwardRef(function IconPicker(props, ref) {
|
|
16
|
-
const {
|
|
16
|
+
const { currentSelection, scrollAt, onSelect, onBlur, set = 'budicon', ...restProps } = props;
|
|
17
17
|
const iconList = useMemo(() => {
|
|
18
18
|
const icons = set === 'budicon' ? budIconNames : streamlineIconNames;
|
|
19
19
|
return icons.map(icon => {
|
|
@@ -28,22 +28,25 @@ const IconPicker = forwardRef(function IconPicker(props, ref) {
|
|
|
28
28
|
const [items, setItems] = useState(() => iconList.slice(0, pageSize));
|
|
29
29
|
const [isLoading, setIsLoading] = useState(false);
|
|
30
30
|
const [hasMore, setHasMore] = useState(true);
|
|
31
|
-
const [selectedIcon, setSelectedIcon] = useState(defaultSelection ?? '');
|
|
32
31
|
const [filterValue, setFilterValue] = useState('');
|
|
33
32
|
const t = useI18n();
|
|
34
33
|
const loadMoreTimeoutId = useRef();
|
|
35
34
|
const resetItems = useCallback(() => {
|
|
36
35
|
const filteredItems = getFilteredItems(iconList, filterValue);
|
|
37
|
-
setItems(menuHelpers.selectItem(filteredItems.slice(0, pageSize),
|
|
36
|
+
setItems(menuHelpers.selectItem(filteredItems.slice(0, pageSize), currentSelection, 'single-select'));
|
|
38
37
|
setHasMore(filteredItems.length > pageSize);
|
|
39
|
-
}, [filterValue,
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
38
|
+
}, [filterValue, currentSelection, iconList]);
|
|
39
|
+
const selectedItem = useMemo(() => currentSelection
|
|
40
|
+
? {
|
|
41
|
+
items: {
|
|
42
|
+
id: currentSelection,
|
|
43
|
+
text: currentSelection
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
: undefined, [currentSelection]);
|
|
44
47
|
useEffect(() => {
|
|
45
48
|
resetItems();
|
|
46
|
-
}, [filterValue,
|
|
49
|
+
}, [filterValue, currentSelection, iconList, set]);
|
|
47
50
|
useEffect(() => {
|
|
48
51
|
return () => {
|
|
49
52
|
if (loadMoreTimeoutId.current)
|
|
@@ -60,7 +63,7 @@ const IconPicker = forwardRef(function IconPicker(props, ref) {
|
|
|
60
63
|
setItems(prevItems => {
|
|
61
64
|
const newItems = menuHelpers.mapTree(getFilteredItems(iconList, filterValue).slice(prevItems.length, prevItems.length + pageSize), item => ({
|
|
62
65
|
...item,
|
|
63
|
-
selected: item.items ? undefined :
|
|
66
|
+
selected: item.items ? undefined : currentSelection === item.id
|
|
64
67
|
}));
|
|
65
68
|
if (newItems.length === 0)
|
|
66
69
|
setHasMore(false);
|
|
@@ -70,12 +73,11 @@ const IconPicker = forwardRef(function IconPicker(props, ref) {
|
|
|
70
73
|
}
|
|
71
74
|
}, [filterValue, isLoading]);
|
|
72
75
|
const selectItem = useCallback((iconName) => {
|
|
73
|
-
setSelectedIcon(iconName);
|
|
74
76
|
setFilterValue('');
|
|
75
|
-
onSelect
|
|
77
|
+
onSelect(iconName);
|
|
76
78
|
}, [onSelect]);
|
|
77
79
|
const clearSelection = useCallback(() => {
|
|
78
|
-
|
|
80
|
+
onSelect('');
|
|
79
81
|
setItems(cur => menuHelpers.mapTree(cur, item => {
|
|
80
82
|
return {
|
|
81
83
|
...item,
|
|
@@ -83,21 +85,13 @@ const IconPicker = forwardRef(function IconPicker(props, ref) {
|
|
|
83
85
|
};
|
|
84
86
|
}));
|
|
85
87
|
}, []);
|
|
86
|
-
return (_jsx(ComboBox, { ...restProps, ref: ref, selected:
|
|
87
|
-
? {
|
|
88
|
-
items: {
|
|
89
|
-
id: selectedIcon,
|
|
90
|
-
text: selectedIcon
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
: undefined, value: filterValue, onChange: (e) => {
|
|
88
|
+
return (_jsx(ComboBox, { ...restProps, ref: ref, selected: selectedItem, value: filterValue, onChange: (e) => {
|
|
94
89
|
if (!e.target.value)
|
|
95
90
|
clearSelection();
|
|
96
91
|
setFilterValue(e.target.value);
|
|
97
|
-
}, onBlur:
|
|
98
|
-
resetItems();
|
|
92
|
+
}, onBlur: selected => {
|
|
99
93
|
setFilterValue('');
|
|
100
|
-
onBlur?.(
|
|
94
|
+
onBlur?.(Array.isArray(selected) ? selected[0]?.id : selected?.id ?? currentSelection);
|
|
101
95
|
}, menu: {
|
|
102
96
|
items,
|
|
103
97
|
onItemClick: selectItem,
|
|
@@ -106,7 +100,7 @@ const IconPicker = forwardRef(function IconPicker(props, ref) {
|
|
|
106
100
|
emptyText: t('no_items'),
|
|
107
101
|
loading: isLoading,
|
|
108
102
|
loadMore: hasMore ? loadMore : undefined
|
|
109
|
-
}, visual:
|
|
103
|
+
}, visual: currentSelection ? _jsx(Icon, { set: set, name: currentSelection }) : undefined }));
|
|
110
104
|
});
|
|
111
105
|
export default IconPicker;
|
|
112
106
|
//# sourceMappingURL=IconPicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconPicker.js","sourceRoot":"","sources":["../../../src/components/IconPicker/IconPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useCallback, useRef, useEffect, useMemo } from 'react';\nimport type { FunctionComponent, ChangeEvent, PropsWithoutRef, Ref } from 'react';\n\nimport type { ForwardProps } from '../../types';\nimport ComboBox, { type ComboBoxProps } from '../ComboBox';\nimport Icon, {\n icons as budIconNames,\n streamlineIcons as streamlineIconNames,\n type IconProps\n} from '../Icon';\nimport type { MenuProps, MenuItemProps } from '../Menu';\nimport { menuHelpers } from '../Menu';\nimport { useI18n } from '../../hooks';\nimport { createStringMatcher } from '../../utils';\n\nexport interface IconPickerProps\n extends Pick<\n ComboBoxProps,\n | 'id'\n | 'label'\n | 'labelHidden'\n | 'required'\n | 'disabled'\n | 'readOnly'\n | 'name'\n | 'status'\n | 'info'\n | 'placeholder'\n | 'autoFocus'\n >,\n Pick<MenuProps, 'scrollAt'> {\n /** Default selection for the input. */\n defaultSelection: string;\n /** Callback fired when input loses focus. */\n onBlur?: (iconName: string) => void;\n /** Callback fired when user chooses icon from the list of icons. */\n onSelect?: (iconName: string) => void;\n /**\n * The set of icons to pick from.\n * @default 'budicon'\n */\n set?: IconProps['set'];\n}\n\nconst getFilteredItems = (iconList: MenuItemProps[], filterValue: string) => {\n if (!filterValue) return iconList;\n\n const regExp = createStringMatcher(filterValue);\n return iconList.filter(({ primary }) => regExp.test(primary));\n};\n\nconst pageSize = 20;\n\nconst IconPicker: FunctionComponent<IconPickerProps & ForwardProps> = forwardRef(\n function IconPicker(props: PropsWithoutRef<IconPickerProps>, ref: Ref<HTMLInputElement>) {\n const { defaultSelection, scrollAt, onSelect, onBlur, set = 'budicon', ...restProps } = props;\n\n const iconList: MenuItemProps[] = useMemo(() => {\n const icons = set === 'budicon' ? budIconNames : streamlineIconNames;\n return icons.map(icon => {\n return {\n id: icon,\n primary: icon,\n visual: <Icon set={set} name={icon} />,\n selected: false\n };\n });\n }, [set]);\n\n const [items, setItems] = useState<MenuProps['items']>(() => iconList.slice(0, pageSize));\n\n const [isLoading, setIsLoading] = useState(false);\n const [hasMore, setHasMore] = useState(true);\n const [selectedIcon, setSelectedIcon] = useState(defaultSelection ?? '');\n const [filterValue, setFilterValue] = useState('');\n const t = useI18n();\n const loadMoreTimeoutId = useRef<ReturnType<typeof setTimeout>>();\n\n const resetItems = useCallback(() => {\n const filteredItems = getFilteredItems(iconList, filterValue);\n setItems(\n menuHelpers.selectItem(filteredItems.slice(0, pageSize), selectedIcon, 'single-select')\n );\n setHasMore(filteredItems.length > pageSize);\n }, [filterValue, selectedIcon]);\n\n useEffect(() => {\n setItems(iconList.slice(0, pageSize));\n setSelectedIcon(defaultSelection);\n }, [iconList]);\n\n useEffect(() => {\n resetItems();\n }, [filterValue, selectedIcon]);\n\n useEffect(() => {\n return () => {\n if (loadMoreTimeoutId.current) clearTimeout(loadMoreTimeoutId.current);\n };\n }, []);\n\n const loadMore = useCallback(() => {\n if (!isLoading) {\n setIsLoading(true);\n if (loadMoreTimeoutId.current) clearTimeout(loadMoreTimeoutId.current);\n loadMoreTimeoutId.current = setTimeout(() => {\n setIsLoading(false);\n setItems(prevItems => {\n const newItems = menuHelpers.mapTree(\n getFilteredItems(iconList, filterValue).slice(\n prevItems.length,\n prevItems.length + pageSize\n ),\n item => ({\n ...item,\n selected: item.items ? undefined : selectedIcon === item.id\n })\n );\n\n if (newItems.length === 0) setHasMore(false);\n\n return menuHelpers.appendTo(prevItems, newItems);\n });\n }, 500);\n }\n }, [filterValue, isLoading]);\n\n const selectItem = useCallback(\n (iconName: string) => {\n setSelectedIcon(iconName);\n setFilterValue('');\n onSelect?.(iconName);\n },\n [onSelect]\n );\n\n const clearSelection = useCallback(() => {\n setSelectedIcon('');\n setItems(cur =>\n menuHelpers.mapTree(cur, item => {\n return {\n ...item,\n selected: false\n };\n })\n );\n }, []);\n\n return (\n <ComboBox\n {...restProps}\n ref={ref}\n selected={\n selectedIcon\n ? {\n items: {\n id: selectedIcon,\n text: selectedIcon\n }\n }\n : undefined\n }\n value={filterValue}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n if (!e.target.value) clearSelection();\n setFilterValue(e.target.value);\n }}\n onBlur={() => {\n resetItems();\n setFilterValue('');\n onBlur?.(selectedIcon);\n }}\n menu={{\n items,\n onItemClick: selectItem,\n scrollAt,\n accent: filterValue ? createStringMatcher(filterValue) : undefined,\n emptyText: t('no_items'),\n loading: isLoading,\n loadMore: hasMore ? loadMore : undefined\n }}\n visual={selectedIcon ? <Icon set={set} name={selectedIcon} /> : undefined}\n />\n );\n }\n);\n\nexport default IconPicker;\n"]}
|
|
1
|
+
{"version":3,"file":"IconPicker.js","sourceRoot":"","sources":["../../../src/components/IconPicker/IconPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useCallback, useRef, useEffect, useMemo } from 'react';\nimport type { FunctionComponent, ChangeEvent, PropsWithoutRef, Ref } from 'react';\n\nimport type { ForwardProps } from '../../types';\nimport ComboBox, { type ComboBoxProps } from '../ComboBox';\nimport Icon, {\n icons as budIconNames,\n streamlineIcons as streamlineIconNames,\n type IconProps\n} from '../Icon';\nimport type { MenuProps, MenuItemProps } from '../Menu';\nimport { menuHelpers } from '../Menu';\nimport { useI18n } from '../../hooks';\nimport { createStringMatcher } from '../../utils';\n\nexport interface IconPickerProps\n extends Pick<\n ComboBoxProps,\n | 'id'\n | 'label'\n | 'labelHidden'\n | 'required'\n | 'disabled'\n | 'readOnly'\n | 'name'\n | 'status'\n | 'info'\n | 'placeholder'\n | 'autoFocus'\n | 'value'\n >,\n Pick<MenuProps, 'scrollAt'> {\n /** Callback fired when input loses focus. */\n onBlur?: (iconName: string) => void;\n /** Current selection for the input. */\n currentSelection: string;\n /** Callback fired when user chooses icon from the list of icons. */\n onSelect: (iconName: string) => void;\n /**\n * The set of icons to pick from.\n * @default 'budicon'\n */\n set?: IconProps['set'];\n}\n\nconst getFilteredItems = (iconList: MenuItemProps[], filterValue: string) => {\n if (!filterValue) return iconList;\n\n const regExp = createStringMatcher(filterValue);\n return iconList.filter(({ primary }) => regExp.test(primary));\n};\n\nconst pageSize = 20;\n\nconst IconPicker: FunctionComponent<IconPickerProps & ForwardProps> = forwardRef(\n function IconPicker(props: PropsWithoutRef<IconPickerProps>, ref: Ref<HTMLInputElement>) {\n const { currentSelection, scrollAt, onSelect, onBlur, set = 'budicon', ...restProps } = props;\n\n const iconList: MenuItemProps[] = useMemo(() => {\n const icons = set === 'budicon' ? budIconNames : streamlineIconNames;\n return icons.map(icon => {\n return {\n id: icon,\n primary: icon,\n visual: <Icon set={set} name={icon} />,\n selected: false\n };\n });\n }, [set]);\n\n const [items, setItems] = useState<MenuProps['items']>(() => iconList.slice(0, pageSize));\n const [isLoading, setIsLoading] = useState(false);\n const [hasMore, setHasMore] = useState(true);\n const [filterValue, setFilterValue] = useState('');\n const t = useI18n();\n const loadMoreTimeoutId = useRef<ReturnType<typeof setTimeout>>();\n\n const resetItems = useCallback(() => {\n const filteredItems = getFilteredItems(iconList, filterValue);\n setItems(\n menuHelpers.selectItem(filteredItems.slice(0, pageSize), currentSelection, 'single-select')\n );\n setHasMore(filteredItems.length > pageSize);\n }, [filterValue, currentSelection, iconList]);\n\n const selectedItem = useMemo(\n () =>\n currentSelection\n ? {\n items: {\n id: currentSelection,\n text: currentSelection\n }\n }\n : undefined,\n [currentSelection]\n );\n\n useEffect(() => {\n resetItems();\n }, [filterValue, currentSelection, iconList, set]);\n\n useEffect(() => {\n return () => {\n if (loadMoreTimeoutId.current) clearTimeout(loadMoreTimeoutId.current);\n };\n }, []);\n\n const loadMore = useCallback(() => {\n if (!isLoading) {\n setIsLoading(true);\n if (loadMoreTimeoutId.current) clearTimeout(loadMoreTimeoutId.current);\n loadMoreTimeoutId.current = setTimeout(() => {\n setIsLoading(false);\n setItems(prevItems => {\n const newItems = menuHelpers.mapTree(\n getFilteredItems(iconList, filterValue).slice(\n prevItems.length,\n prevItems.length + pageSize\n ),\n item => ({\n ...item,\n selected: item.items ? undefined : currentSelection === item.id\n })\n );\n\n if (newItems.length === 0) setHasMore(false);\n\n return menuHelpers.appendTo(prevItems, newItems);\n });\n }, 500);\n }\n }, [filterValue, isLoading]);\n\n const selectItem = useCallback(\n (iconName: string) => {\n setFilterValue('');\n onSelect(iconName);\n },\n [onSelect]\n );\n\n const clearSelection = useCallback(() => {\n onSelect('');\n setItems(cur =>\n menuHelpers.mapTree(cur, item => {\n return {\n ...item,\n selected: false\n };\n })\n );\n }, []);\n\n return (\n <ComboBox\n {...restProps}\n ref={ref}\n selected={selectedItem}\n value={filterValue}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n if (!e.target.value) clearSelection();\n setFilterValue(e.target.value);\n }}\n onBlur={selected => {\n setFilterValue('');\n onBlur?.(Array.isArray(selected) ? selected[0]?.id : selected?.id ?? currentSelection);\n }}\n menu={{\n items,\n onItemClick: selectItem,\n scrollAt,\n accent: filterValue ? createStringMatcher(filterValue) : undefined,\n emptyText: t('no_items'),\n loading: isLoading,\n loadMore: hasMore ? loadMore : undefined\n }}\n visual={currentSelection ? <Icon set={set} name={currentSelection} /> : undefined}\n />\n );\n }\n);\n\nexport default IconPicker;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-core",
|
|
3
|
-
"version": "9.0.0-build.
|
|
3
|
+
"version": "9.0.0-build.2.0",
|
|
4
4
|
"description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"author": "Pegasystems",
|