@economic/taco 1.38.0 → 1.38.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/esm/packages/taco/src/components/Select2/components/Create.js +14 -6
- package/dist/esm/packages/taco/src/components/Select2/components/Create.js.map +1 -1
- package/dist/taco.cjs.development.js +13 -6
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
2
|
import cn from 'classnames';
|
|
3
|
+
import { AVAILABLE_COLORS } from '../../../utils/tailwind.js';
|
|
3
4
|
import { useLocalization } from '../../Provider/Localization.js';
|
|
4
5
|
import { isAriaSelectionKey } from '../../../utils/aria.js';
|
|
5
6
|
import { Tag } from '../../Tag/Tag.js';
|
|
@@ -8,15 +9,22 @@ import { useSelect2Context } from './Context.js';
|
|
|
8
9
|
import { _catch } from '../../../../../../node_modules/babel-plugin-transform-async-to-promises/helpers.mjs.js';
|
|
9
10
|
|
|
10
11
|
const getNextColor = options => {
|
|
11
|
-
|
|
12
|
+
let occurrences = {};
|
|
13
|
+
AVAILABLE_COLORS.filter(color => color !== 'transparent').forEach(color => {
|
|
14
|
+
occurrences = {
|
|
15
|
+
...occurrences,
|
|
16
|
+
[color]: 0
|
|
17
|
+
};
|
|
18
|
+
});
|
|
19
|
+
options.reduce((occurrences, option) => {
|
|
12
20
|
if (option.props.color) {
|
|
13
|
-
|
|
21
|
+
occurrences[option.props.color] = occurrences[option.props.color] ? occurrences[option.props.color] + 1 : 1;
|
|
14
22
|
}
|
|
15
|
-
return
|
|
16
|
-
},
|
|
17
|
-
const colors = Object.keys(
|
|
23
|
+
return occurrences;
|
|
24
|
+
}, occurrences);
|
|
25
|
+
const colors = Object.keys(occurrences);
|
|
18
26
|
if (colors.length) {
|
|
19
|
-
return colors.sort((a, b) =>
|
|
27
|
+
return colors.sort((a, b) => occurrences[a] - occurrences[b])[0];
|
|
20
28
|
}
|
|
21
29
|
return undefined;
|
|
22
30
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Create.js","sources":["../../../../../../../../src/components/Select2/components/Create.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { isAriaSelectionKey } from '../../../utils/aria';\nimport { Tag } from '../../Tag/Tag';\nimport { createOptionClassName } from '../utilities';\nimport { useSelect2Context } from './Context';\nimport { Select2OptionProps } from './Option';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Color } from '../../../types';\n\nexport type CreateProps = {\n onCreate: (name: string, color: Color | undefined) => Promise<Select2OptionProps>;\n options: React.ReactElement<Select2OptionProps>[];\n};\n\nexport const getNextColor = (options: React.ReactElement<Select2OptionProps>[]): Color | undefined => {\n
|
|
1
|
+
{"version":3,"file":"Create.js","sources":["../../../../../../../../src/components/Select2/components/Create.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { isAriaSelectionKey } from '../../../utils/aria';\nimport { Tag } from '../../Tag/Tag';\nimport { createOptionClassName } from '../utilities';\nimport { useSelect2Context } from './Context';\nimport { Select2OptionProps } from './Option';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Color } from '../../../types';\nimport { AVAILABLE_COLORS } from '../../../utils/tailwind';\n\nexport type CreateProps = {\n onCreate: (name: string, color: Color | undefined) => Promise<Select2OptionProps>;\n options: React.ReactElement<Select2OptionProps>[];\n};\n\nexport const getNextColor = (options: React.ReactElement<Select2OptionProps>[]): Color | undefined => {\n let occurrences = {};\n AVAILABLE_COLORS.filter(color => color !== 'transparent').forEach((color: Color) => {\n occurrences = { ...occurrences, [color]: 0 };\n });\n\n options.reduce((occurrences, option) => {\n if (option.props.color) {\n occurrences[option.props.color] = occurrences[option.props.color] ? occurrences[option.props.color] + 1 : 1;\n }\n return occurrences;\n }, occurrences);\n\n const colors = Object.keys(occurrences);\n\n if (colors.length) {\n return colors.sort((a, b) => occurrences[a] - occurrences[b])[0] as Color;\n }\n\n return undefined;\n};\n\nexport const Create = (props: CreateProps) => {\n const { onCreate: handleCreate, options } = props;\n const { multiple, searchQuery, setOpen, setSearchQuery, setValidationError, setValue } = useSelect2Context();\n const { texts } = useLocalization();\n\n // determine what the next color tag should be based on color occurences\n const nextColor = React.useMemo(() => getNextColor(options), [options]);\n\n if (!searchQuery) {\n return null;\n }\n\n const handleClick = async () => {\n try {\n const item = await handleCreate(searchQuery, nextColor);\n setValue(item.value);\n\n if (multiple) {\n setSearchQuery('');\n } else {\n setOpen(false);\n }\n } catch (error) {\n setValidationError(error as Error);\n }\n };\n\n const handleKeyDown = event => {\n if (isAriaSelectionKey(event)) {\n event.currentTarget.click();\n }\n };\n\n const className = cn('!w-[calc(100%_-_theme(spacing.3))] ml-1.5', createOptionClassName());\n return (\n <button className={className} onClick={handleClick} onKeyDown={handleKeyDown}>\n <span className=\"flex items-center gap-1.5\">\n {texts.select2.create}\n <Tag color={nextColor} className=\"cursor-pointer\">\n {searchQuery}\n </Tag>\n </span>\n </button>\n );\n};\n"],"names":["getNextColor","options","occurrences","AVAILABLE_COLORS","filter","color","forEach","reduce","option","props","colors","Object","keys","length","sort","a","b","undefined","Create","onCreate","handleCreate","multiple","searchQuery","setOpen","setSearchQuery","setValidationError","setValue","useSelect2Context","texts","useLocalization","nextColor","React","useMemo","handleClick","item","value","error","handleKeyDown","event","isAriaSelectionKey","currentTarget","click","className","cn","createOptionClassName","onClick","onKeyDown","select2","create","Tag"],"mappings":";;;;;;;;;;MAgBaA,YAAY,GAAIC,OAAiD;EAC1E,IAAIC,WAAW,GAAG,EAAE;EACpBC,gBAAgB,CAACC,MAAM,CAACC,KAAK,IAAIA,KAAK,KAAK,aAAa,CAAC,CAACC,OAAO,CAAED,KAAY;IAC3EH,WAAW,GAAG;MAAE,GAAGA,WAAW;MAAE,CAACG,KAAK,GAAG;KAAG;GAC/C,CAAC;EAEFJ,OAAO,CAACM,MAAM,CAAC,CAACL,WAAW,EAAEM,MAAM;IAC/B,IAAIA,MAAM,CAACC,KAAK,CAACJ,KAAK,EAAE;MACpBH,WAAW,CAACM,MAAM,CAACC,KAAK,CAACJ,KAAK,CAAC,GAAGH,WAAW,CAACM,MAAM,CAACC,KAAK,CAACJ,KAAK,CAAC,GAAGH,WAAW,CAACM,MAAM,CAACC,KAAK,CAACJ,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC;;IAE/G,OAAOH,WAAW;GACrB,EAAEA,WAAW,CAAC;EAEf,MAAMQ,MAAM,GAAGC,MAAM,CAACC,IAAI,CAACV,WAAW,CAAC;EAEvC,IAAIQ,MAAM,CAACG,MAAM,EAAE;IACf,OAAOH,MAAM,CAACI,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKd,WAAW,CAACa,CAAC,CAAC,GAAGb,WAAW,CAACc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAU;;EAG7E,OAAOC,SAAS;AACpB;MAEaC,MAAM,GAAIT,KAAkB;EACrC,MAAM;IAAEU,QAAQ,EAAEC,YAAY;IAAEnB;GAAS,GAAGQ,KAAK;EACjD,MAAM;IAAEY,QAAQ;IAAEC,WAAW;IAAEC,OAAO;IAAEC,cAAc;IAAEC,kBAAkB;IAAEC;GAAU,GAAGC,iBAAiB,EAAE;EAC5G,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;;EAGnC,MAAMC,SAAS,GAAGC,cAAK,CAACC,OAAO,CAAC,MAAMhC,YAAY,CAACC,OAAO,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEvE,IAAI,CAACqB,WAAW,EAAE;IACd,OAAO,IAAI;;EAGf,MAAMW,WAAW;IAAA;uCACT;QAAA,uBACmBb,YAAY,CAACE,WAAW,EAAEQ,SAAS,CAAC,iBAAjDI,IAAI;UACVR,QAAQ,CAACQ,IAAI,CAACC,KAAK,CAAC;UAAC,IAEjBd,QAAQ;YACRG,cAAc,CAAC,EAAE,CAAC;;YAElBD,OAAO,CAAC,KAAK,CAAC;;;OAErB,YAAQa,KAAK,EAAE;QACZX,kBAAkB,CAACW,KAAc,CAAC;OACrC;MAAA;KACJ;MAAA;;;EAED,MAAMC,aAAa,GAAGC,KAAK;IACvB,IAAIC,kBAAkB,CAACD,KAAK,CAAC,EAAE;MAC3BA,KAAK,CAACE,aAAa,CAACC,KAAK,EAAE;;GAElC;EAED,MAAMC,SAAS,GAAGC,EAAE,CAAC,2CAA2C,EAAEC,qBAAqB,EAAE,CAAC;EAC1F,oBACIb;IAAQW,SAAS,EAAEA,SAAS;IAAEG,OAAO,EAAEZ,WAAW;IAAEa,SAAS,EAAET;kBAC3DN;IAAMW,SAAS,EAAC;KACXd,KAAK,CAACmB,OAAO,CAACC,MAAM,eACrBjB,6BAACkB,GAAG;IAAC5C,KAAK,EAAEyB,SAAS;IAAEY,SAAS,EAAC;KAC5BpB,WAAW,CACV,CACH,CACF;AAEjB;;;;"}
|
|
@@ -9634,15 +9634,22 @@ const filterOption = (child, searchQuery) => {
|
|
|
9634
9634
|
};
|
|
9635
9635
|
|
|
9636
9636
|
const getNextColor = options => {
|
|
9637
|
-
|
|
9637
|
+
let occurrences = {};
|
|
9638
|
+
AVAILABLE_COLORS.filter(color => color !== 'transparent').forEach(color => {
|
|
9639
|
+
occurrences = {
|
|
9640
|
+
...occurrences,
|
|
9641
|
+
[color]: 0
|
|
9642
|
+
};
|
|
9643
|
+
});
|
|
9644
|
+
options.reduce((occurrences, option) => {
|
|
9638
9645
|
if (option.props.color) {
|
|
9639
|
-
|
|
9646
|
+
occurrences[option.props.color] = occurrences[option.props.color] ? occurrences[option.props.color] + 1 : 1;
|
|
9640
9647
|
}
|
|
9641
|
-
return
|
|
9642
|
-
},
|
|
9643
|
-
const colors = Object.keys(
|
|
9648
|
+
return occurrences;
|
|
9649
|
+
}, occurrences);
|
|
9650
|
+
const colors = Object.keys(occurrences);
|
|
9644
9651
|
if (colors.length) {
|
|
9645
|
-
return colors.sort((a, b) =>
|
|
9652
|
+
return colors.sort((a, b) => occurrences[a] - occurrences[b])[0];
|
|
9646
9653
|
}
|
|
9647
9654
|
return undefined;
|
|
9648
9655
|
};
|