@chayns-components/core 5.0.0-beta.761 → 5.0.0-beta.763
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/lib/cjs/components/combobox/ComboBox.js +16 -8
- package/lib/cjs/components/combobox/ComboBox.js.map +1 -1
- package/lib/cjs/components/combobox/ComboBox.styles.js +22 -1
- package/lib/cjs/components/combobox/ComboBox.styles.js.map +1 -1
- package/lib/cjs/components/combobox/combobox-item/ComboBoxItem.js +8 -3
- package/lib/cjs/components/combobox/combobox-item/ComboBoxItem.js.map +1 -1
- package/lib/cjs/components/combobox/combobox-item/ComboBoxItem.styles.js +36 -26
- package/lib/cjs/components/combobox/combobox-item/ComboBoxItem.styles.js.map +1 -1
- package/lib/cjs/components/select-button/SelectButton.js +16 -9
- package/lib/cjs/components/select-button/SelectButton.js.map +1 -1
- package/lib/esm/components/combobox/ComboBox.js +23 -12
- package/lib/esm/components/combobox/ComboBox.js.map +1 -1
- package/lib/esm/components/combobox/ComboBox.styles.js +48 -18
- package/lib/esm/components/combobox/ComboBox.styles.js.map +1 -1
- package/lib/esm/components/combobox/combobox-item/ComboBoxItem.js +9 -4
- package/lib/esm/components/combobox/combobox-item/ComboBoxItem.js.map +1 -1
- package/lib/esm/components/combobox/combobox-item/ComboBoxItem.styles.js +47 -34
- package/lib/esm/components/combobox/combobox-item/ComboBoxItem.styles.js.map +1 -1
- package/lib/esm/components/select-button/SelectButton.js +16 -9
- package/lib/esm/components/select-button/SelectButton.js.map +1 -1
- package/lib/types/components/combobox/ComboBox.d.ts +2 -0
- package/lib/types/components/combobox/ComboBox.styles.d.ts +5 -3
- package/lib/types/components/combobox/combobox-item/ComboBoxItem.d.ts +4 -2
- package/lib/types/components/combobox/combobox-item/ComboBoxItem.styles.d.ts +9 -1
- package/lib/types/components/select-button/SelectButton.d.ts +4 -0
- package/package.json +2 -2
|
@@ -4,13 +4,14 @@ import Button from '../button/Button';
|
|
|
4
4
|
import { StyledSelectButton } from './SelectButton.styles';
|
|
5
5
|
const SelectButton = _ref => {
|
|
6
6
|
let {
|
|
7
|
+
buttonText,
|
|
8
|
+
isDisabled,
|
|
9
|
+
list,
|
|
7
10
|
onSelect,
|
|
8
11
|
selectedItemIds,
|
|
9
12
|
shouldAllowMultiSelect,
|
|
10
|
-
|
|
13
|
+
shouldShowButtonTextWithSelection,
|
|
11
14
|
shouldShowSearch,
|
|
12
|
-
list,
|
|
13
|
-
isDisabled,
|
|
14
15
|
title
|
|
15
16
|
} = _ref;
|
|
16
17
|
const itemList = useMemo(() => {
|
|
@@ -29,22 +30,28 @@ const SelectButton = _ref => {
|
|
|
29
30
|
});
|
|
30
31
|
return items;
|
|
31
32
|
}, [list, selectedItemIds]);
|
|
32
|
-
const
|
|
33
|
-
if (!selectedItemIds || selectedItemIds.length === 0) {
|
|
34
|
-
return
|
|
33
|
+
const internalButtonText = useMemo(() => {
|
|
34
|
+
if (shouldShowButtonTextWithSelection || !selectedItemIds || selectedItemIds.length === 0) {
|
|
35
|
+
return buttonText;
|
|
35
36
|
}
|
|
37
|
+
let addedCount = 0;
|
|
36
38
|
let newText = '';
|
|
39
|
+
const additionalCount = selectedItemIds.length - 2;
|
|
37
40
|
list.forEach(_ref3 => {
|
|
38
41
|
let {
|
|
39
42
|
text,
|
|
40
43
|
id
|
|
41
44
|
} = _ref3;
|
|
42
|
-
if (selectedItemIds?.includes(id)) {
|
|
45
|
+
if ((addedCount < 2 || additionalCount <= 1) && selectedItemIds?.includes(id)) {
|
|
46
|
+
addedCount += 1;
|
|
43
47
|
newText += newText.length === 0 ? `${text}` : `, ${text}`;
|
|
44
48
|
}
|
|
45
49
|
});
|
|
50
|
+
if (additionalCount > 1) {
|
|
51
|
+
newText += `, ${additionalCount} weitere`;
|
|
52
|
+
}
|
|
46
53
|
return newText;
|
|
47
|
-
}, [list, selectedItemIds]);
|
|
54
|
+
}, [buttonText, list, selectedItemIds, shouldShowButtonTextWithSelection]);
|
|
48
55
|
const handleClick = () => {
|
|
49
56
|
void createDialog({
|
|
50
57
|
text: title ? `[h1]${title}[/h1]` : undefined,
|
|
@@ -69,7 +76,7 @@ const SelectButton = _ref => {
|
|
|
69
76
|
isDisabled: isDisabled,
|
|
70
77
|
isSecondary: true,
|
|
71
78
|
shouldShowTextAsRobotoMedium: false
|
|
72
|
-
},
|
|
79
|
+
}, internalButtonText));
|
|
73
80
|
};
|
|
74
81
|
SelectButton.displayName = 'SelectButton';
|
|
75
82
|
export default SelectButton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectButton.js","names":["createDialog","DialogType","React","useMemo","Button","StyledSelectButton","SelectButton","_ref","
|
|
1
|
+
{"version":3,"file":"SelectButton.js","names":["createDialog","DialogType","React","useMemo","Button","StyledSelectButton","SelectButton","_ref","buttonText","isDisabled","list","onSelect","selectedItemIds","shouldAllowMultiSelect","shouldShowButtonTextWithSelection","shouldShowSearch","title","itemList","items","forEach","_ref2","text","id","isSelected","includes","push","name","internalButtonText","length","addedCount","newText","additionalCount","_ref3","handleClick","undefined","type","SELECT","multiselect","quickfind","open","then","result","buttonType","map","Number","createElement","onClick","isSecondary","shouldShowTextAsRobotoMedium","displayName"],"sources":["../../../../src/components/select-button/SelectButton.tsx"],"sourcesContent":["import { createDialog, DialogType, type DialogSelectListItemType } from 'chayns-api';\nimport React, { useMemo, type FC } from 'react';\nimport type { SelectButtonItem } from '../../types/selectButton';\nimport Button from '../button/Button';\nimport { StyledSelectButton } from './SelectButton.styles';\n\nexport type SelectButtonProps = {\n /**\n * The text that should be displayed inside the button.\n */\n buttonText: string;\n /**\n * Whether the button should be disabled.\n */\n isDisabled?: boolean;\n /**\n * A list of item that could be selected.\n */\n list: SelectButtonItem[];\n /**\n * Function to be executed after an item is selected.\n */\n onSelect?: (ids: number[]) => void;\n /**\n * The id of an item that should be preselected.\n */\n selectedItemIds?: number[];\n /**\n * Whether more than one item should be selectable.\n */\n shouldAllowMultiSelect?: boolean;\n /**\n * Whether the button text should be displayed also if items are selected.\n */\n shouldShowButtonTextWithSelection?: boolean;\n /**\n * Whether the search should be displayed inside the dialog.\n */\n shouldShowSearch?: boolean;\n /**\n * The title of the dialog.\n */\n title?: string;\n};\n\nconst SelectButton: FC<SelectButtonProps> = ({\n buttonText,\n isDisabled,\n list,\n onSelect,\n selectedItemIds,\n shouldAllowMultiSelect,\n shouldShowButtonTextWithSelection,\n shouldShowSearch,\n title,\n}) => {\n const itemList = useMemo(() => {\n const items: DialogSelectListItemType[] = [];\n\n list.forEach(({ text, id }) => {\n const isSelected = selectedItemIds ? selectedItemIds.includes(id) : false;\n\n items.push({\n name: text,\n id,\n isSelected,\n });\n });\n\n return items;\n }, [list, selectedItemIds]);\n\n const internalButtonText = useMemo(() => {\n if (shouldShowButtonTextWithSelection || !selectedItemIds || selectedItemIds.length === 0) {\n return buttonText;\n }\n\n let addedCount = 0;\n let newText = '';\n\n const additionalCount = selectedItemIds.length - 2;\n\n list.forEach(({ text, id }) => {\n if ((addedCount < 2 || additionalCount <= 1) && selectedItemIds?.includes(id)) {\n addedCount += 1;\n newText += newText.length === 0 ? `${text}` : `, ${text}`;\n }\n });\n\n if (additionalCount > 1) {\n newText += `, ${additionalCount} weitere`;\n }\n\n return newText;\n }, [buttonText, list, selectedItemIds, shouldShowButtonTextWithSelection]);\n\n const handleClick = () => {\n void createDialog({\n text: title ? `[h1]${title}[/h1]` : undefined,\n type: DialogType.SELECT,\n list: itemList,\n multiselect: shouldAllowMultiSelect,\n quickfind: shouldShowSearch,\n })\n .open()\n .then((result) => {\n // Ignore because there is no type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n if (result && result.buttonType === 1 && typeof onSelect === 'function') {\n // Ignore because there is no type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n onSelect((result.result as string[]).map(Number));\n }\n });\n };\n\n return (\n <StyledSelectButton>\n <Button\n onClick={handleClick}\n isDisabled={isDisabled}\n isSecondary\n shouldShowTextAsRobotoMedium={false}\n >\n {internalButtonText}\n </Button>\n </StyledSelectButton>\n );\n};\n\nSelectButton.displayName = 'SelectButton';\n\nexport default SelectButton;\n"],"mappings":"AAAA,SAASA,YAAY,EAAEC,UAAU,QAAuC,YAAY;AACpF,OAAOC,KAAK,IAAIC,OAAO,QAAiB,OAAO;AAE/C,OAAOC,MAAM,MAAM,kBAAkB;AACrC,SAASC,kBAAkB,QAAQ,uBAAuB;AAyC1D,MAAMC,YAAmC,GAAGC,IAAA,IAUtC;EAAA,IAVuC;IACzCC,UAAU;IACVC,UAAU;IACVC,IAAI;IACJC,QAAQ;IACRC,eAAe;IACfC,sBAAsB;IACtBC,iCAAiC;IACjCC,gBAAgB;IAChBC;EACJ,CAAC,GAAAT,IAAA;EACG,MAAMU,QAAQ,GAAGd,OAAO,CAAC,MAAM;IAC3B,MAAMe,KAAiC,GAAG,EAAE;IAE5CR,IAAI,CAACS,OAAO,CAACC,KAAA,IAAkB;MAAA,IAAjB;QAAEC,IAAI;QAAEC;MAAG,CAAC,GAAAF,KAAA;MACtB,MAAMG,UAAU,GAAGX,eAAe,GAAGA,eAAe,CAACY,QAAQ,CAACF,EAAE,CAAC,GAAG,KAAK;MAEzEJ,KAAK,CAACO,IAAI,CAAC;QACPC,IAAI,EAAEL,IAAI;QACVC,EAAE;QACFC;MACJ,CAAC,CAAC;IACN,CAAC,CAAC;IAEF,OAAOL,KAAK;EAChB,CAAC,EAAE,CAACR,IAAI,EAAEE,eAAe,CAAC,CAAC;EAE3B,MAAMe,kBAAkB,GAAGxB,OAAO,CAAC,MAAM;IACrC,IAAIW,iCAAiC,IAAI,CAACF,eAAe,IAAIA,eAAe,CAACgB,MAAM,KAAK,CAAC,EAAE;MACvF,OAAOpB,UAAU;IACrB;IAEA,IAAIqB,UAAU,GAAG,CAAC;IAClB,IAAIC,OAAO,GAAG,EAAE;IAEhB,MAAMC,eAAe,GAAGnB,eAAe,CAACgB,MAAM,GAAG,CAAC;IAElDlB,IAAI,CAACS,OAAO,CAACa,KAAA,IAAkB;MAAA,IAAjB;QAAEX,IAAI;QAAEC;MAAG,CAAC,GAAAU,KAAA;MACtB,IAAI,CAACH,UAAU,GAAG,CAAC,IAAIE,eAAe,IAAI,CAAC,KAAKnB,eAAe,EAAEY,QAAQ,CAACF,EAAE,CAAC,EAAE;QAC3EO,UAAU,IAAI,CAAC;QACfC,OAAO,IAAIA,OAAO,CAACF,MAAM,KAAK,CAAC,GAAG,GAAGP,IAAI,EAAE,GAAG,KAAKA,IAAI,EAAE;MAC7D;IACJ,CAAC,CAAC;IAEF,IAAIU,eAAe,GAAG,CAAC,EAAE;MACrBD,OAAO,IAAI,KAAKC,eAAe,UAAU;IAC7C;IAEA,OAAOD,OAAO;EAClB,CAAC,EAAE,CAACtB,UAAU,EAAEE,IAAI,EAAEE,eAAe,EAAEE,iCAAiC,CAAC,CAAC;EAE1E,MAAMmB,WAAW,GAAGA,CAAA,KAAM;IACtB,KAAKjC,YAAY,CAAC;MACdqB,IAAI,EAAEL,KAAK,GAAG,OAAOA,KAAK,OAAO,GAAGkB,SAAS;MAC7CC,IAAI,EAAElC,UAAU,CAACmC,MAAM;MACvB1B,IAAI,EAAEO,QAAQ;MACdoB,WAAW,EAAExB,sBAAsB;MACnCyB,SAAS,EAAEvB;IACf,CAAC,CAAC,CACGwB,IAAI,CAAC,CAAC,CACNC,IAAI,CAAEC,MAAM,IAAK;MACd;MACA;MACA;MACA,IAAIA,MAAM,IAAIA,MAAM,CAACC,UAAU,KAAK,CAAC,IAAI,OAAO/B,QAAQ,KAAK,UAAU,EAAE;QACrE;QACA;QACA;QACAA,QAAQ,CAAE8B,MAAM,CAACA,MAAM,CAAcE,GAAG,CAACC,MAAM,CAAC,CAAC;MACrD;IACJ,CAAC,CAAC;EACV,CAAC;EAED,oBACI1C,KAAA,CAAA2C,aAAA,CAACxC,kBAAkB,qBACfH,KAAA,CAAA2C,aAAA,CAACzC,MAAM;IACH0C,OAAO,EAAEb,WAAY;IACrBxB,UAAU,EAAEA,UAAW;IACvBsC,WAAW;IACXC,4BAA4B,EAAE;EAAM,GAEnCrB,kBACG,CACQ,CAAC;AAE7B,CAAC;AAEDrB,YAAY,CAAC2C,WAAW,GAAG,cAAc;AAEzC,eAAe3C,YAAY","ignoreList":[]}
|
|
@@ -15,9 +15,10 @@ type StyledComboBoxHeaderProps = WithTheme<{
|
|
|
15
15
|
$isDisabled?: boolean;
|
|
16
16
|
}>;
|
|
17
17
|
export declare const StyledComboBoxHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledComboBoxHeaderProps>> & string;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
18
|
+
type StyledComboBoxPlaceholderProps = WithTheme<{
|
|
19
|
+
$shouldReduceOpacity: boolean;
|
|
20
|
+
}>;
|
|
21
|
+
export declare const StyledComboBoxPlaceholder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledComboBoxPlaceholderProps>> & string;
|
|
21
22
|
type StyledComboBoxPlaceholderImageProps = WithTheme<Pick<ComboBoxItemProps, 'shouldShowRoundImage'>>;
|
|
22
23
|
export declare const StyledComboBoxPlaceholderImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledComboBoxPlaceholderImageProps>> & string;
|
|
23
24
|
export declare const StyledComboBoxIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
@@ -291,4 +292,5 @@ export declare const StyledMotionComboBoxBody: import("styled-components/dist/ty
|
|
|
291
292
|
} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
|
|
292
293
|
ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
293
294
|
}, StyledComboBoxBodyProps>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
|
|
295
|
+
export declare const StyledComboBoxTopic: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
294
296
|
export {};
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import { FC, ReactNode } from 'react';
|
|
2
2
|
import type { ComboBoxProps, IComboBoxItem } from '../ComboBox';
|
|
3
3
|
export type ComboBoxItemProps = {
|
|
4
|
+
icons?: IComboBoxItem['icons'];
|
|
5
|
+
id: IComboBoxItem['value'];
|
|
4
6
|
imageUrl: IComboBoxItem['imageUrl'];
|
|
5
7
|
isSelected: boolean;
|
|
6
8
|
onSelect: (itemToSelect: IComboBoxItem) => void;
|
|
9
|
+
rightElement: IComboBoxItem['rightElement'];
|
|
7
10
|
shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];
|
|
8
|
-
|
|
11
|
+
subtext: IComboBoxItem['subtext'];
|
|
9
12
|
suffixElement?: ReactNode;
|
|
10
13
|
text: IComboBoxItem['text'];
|
|
11
14
|
value: IComboBoxItem['value'];
|
|
12
|
-
id: IComboBoxItem['value'];
|
|
13
15
|
};
|
|
14
16
|
declare const ComboBoxItem: FC<ComboBoxItemProps>;
|
|
15
17
|
export default ComboBoxItem;
|
|
@@ -4,9 +4,17 @@ type StyledComboBoxItemProps = WithTheme<{
|
|
|
4
4
|
$isSelected: boolean;
|
|
5
5
|
}>;
|
|
6
6
|
export declare const StyledComboBoxItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledComboBoxItemProps>> & string;
|
|
7
|
-
export declare const StyledComboBoxTopic: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
8
7
|
type StyledComboBoxItemImageProps = WithTheme<{
|
|
8
|
+
$shouldShowBigImage?: boolean;
|
|
9
9
|
$shouldShowRoundImage?: boolean;
|
|
10
10
|
}>;
|
|
11
11
|
export declare const StyledComboBoxItemImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, StyledComboBoxItemImageProps>> & string;
|
|
12
|
+
export declare const StyledComboBoxItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
13
|
+
export declare const StyledComboBoxItemContentHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
14
|
+
type StyledComboBoxItemContentHeaderTextProps = WithTheme<{
|
|
15
|
+
$shouldShowBoldText?: boolean;
|
|
16
|
+
}>;
|
|
17
|
+
export declare const StyledComboBoxItemContentHeaderText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledComboBoxItemContentHeaderTextProps>> & string;
|
|
18
|
+
export declare const StyledComboBoxItemContentHeaderRightElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
19
|
+
export declare const StyledComboBoxItemContentSubtext: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
12
20
|
export {};
|
|
@@ -25,6 +25,10 @@ export type SelectButtonProps = {
|
|
|
25
25
|
* Whether more than one item should be selectable.
|
|
26
26
|
*/
|
|
27
27
|
shouldAllowMultiSelect?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Whether the button text should be displayed also if items are selected.
|
|
30
|
+
*/
|
|
31
|
+
shouldShowButtonTextWithSelection?: boolean;
|
|
28
32
|
/**
|
|
29
33
|
* Whether the search should be displayed inside the dialog.
|
|
30
34
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.763",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"publishConfig": {
|
|
86
86
|
"access": "public"
|
|
87
87
|
},
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "966ccdf13e4096a7b627c2872b32535ff563d3b0"
|
|
89
89
|
}
|