@tecsinapse/react-web-kit 1.10.1 → 1.10.2
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/CHANGELOG.md +11 -0
- package/dist/components/molecules/Select/Dropdown/Dropdown.js +2 -2
- package/dist/components/molecules/Select/Dropdown/Dropdown.js.map +1 -1
- package/dist/components/molecules/Select/functions.js +1 -1
- package/dist/components/molecules/Select/functions.js.map +1 -1
- package/package.json +2 -2
- package/src/components/molecules/Select/Dropdown/Dropdown.tsx +4 -2
- package/src/components/molecules/Select/Select.stories.tsx +14 -1
- package/src/components/molecules/Select/functions.ts +2 -10
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.10.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.10.1...@tecsinapse/react-web-kit@1.10.2) (2021-10-08)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* all elements selected when applying search ([3ca5293](https://github.com/tecsinapse/design-system/commit/3ca5293fb6623fe87d3e92d7032040804946737b))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [1.10.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.10.0...@tecsinapse/react-web-kit@1.10.1) (2021-10-08)
|
|
7
18
|
|
|
8
19
|
|
|
@@ -43,8 +43,8 @@ const Dropdown = ({
|
|
|
43
43
|
const [checkedAll, setCheckedAll] = _react.default.useState(type === 'multi' && (value === null || value === void 0 ? void 0 : value.length) === lengthOptions);
|
|
44
44
|
|
|
45
45
|
_react.default.useEffect(() => {
|
|
46
|
-
if (type === 'multi'
|
|
47
|
-
setCheckedAll(true);
|
|
46
|
+
if (type === 'multi') {
|
|
47
|
+
lengthOptions === (value === null || value === void 0 ? void 0 : value.length) ? setCheckedAll(true) : setCheckedAll(false);
|
|
48
48
|
}
|
|
49
49
|
}, [value, type, lengthOptions]);
|
|
50
50
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/molecules/Select/Dropdown/Dropdown.tsx"],"names":["fullWidth","width","Dropdown","options","onSearch","type","hideSearchBar","onSelect","value","keyExtractor","labelExtractor","setDropDownVisible","style","anchor","selectAllLabel","searchBarPlaceholder","searchArg","setSearchArg","lengthOptions","React","useMemo","length","checkedAll","setCheckedAll","useState","useEffect","onClickCheckAll","useCallback","items","map","option","aux","prev","auxArray","onChange","text","undefined","item","index"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AASA;;;;AAEA,MAAMA,SAAS,GAAG;AAAEC,EAAAA,KAAK,EAAE;AAAT,CAAlB;;AAEA,MAAMC,QAAQ,GAAG,CAAwC;AACvDC,EAAAA,OADuD;AAEvDC,EAAAA,QAFuD;AAGvDC,EAAAA,IAHuD;AAIvDC,EAAAA,aAJuD;AAKvDC,EAAAA,QALuD;AAMvDC,EAAAA,KANuD;AAOvDC,EAAAA,YAPuD;AAQvDC,EAAAA,cARuD;AASvDC,EAAAA,kBATuD;AAUvDC,EAAAA,KAVuD;AAWvDC,EAAAA,MAXuD;AAYvDC,EAAAA,cAZuD;AAavDC,EAAAA;AAbuD,CAAxC,KAgBE;AACjB,QAAM,CAACC,SAAD,EAAYC,YAAZ,IAA4B,kCAA0B,EAA1B,EAA8Bb,QAA9B,CAAlC;;AACA,QAAMc,aAAa,GAAGC,eAAMC,OAAN,CAAc,MAAMjB,OAAO,CAACkB,MAA5B,EAAoC,CAAClB,OAAD,CAApC,CAAtB;;AAEA,QAAM,CAACmB,UAAD,EAAaC,aAAb,IAA8BJ,eAAMK,QAAN,CAClCnB,IAAI,KAAK,OAAT,IAAoB,CAACG,KAAD,aAACA,KAAD,uBAACA,KAAD,CAAmBa,MAAnB,MAA8BH,aADhB,CAApC;;AAIAC,iBAAMM,SAAN,CAAgB,MAAM;AACpB,QAAIpB,IAAI,KAAK,
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/molecules/Select/Dropdown/Dropdown.tsx"],"names":["fullWidth","width","Dropdown","options","onSearch","type","hideSearchBar","onSelect","value","keyExtractor","labelExtractor","setDropDownVisible","style","anchor","selectAllLabel","searchBarPlaceholder","searchArg","setSearchArg","lengthOptions","React","useMemo","length","checkedAll","setCheckedAll","useState","useEffect","onClickCheckAll","useCallback","items","map","option","aux","prev","auxArray","onChange","text","undefined","item","index"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Checkbox, Text, useDebouncedState } from '@tecsinapse/react-core';\nimport { ItemSelect } from '../SelectItem';\nimport { SelectProps } from '../Select';\nimport {\n SearchBarContainer,\n StyledContainerCheckAll,\n StyledContainerDropdown,\n StyledContainerTextLabel,\n StyledSpan,\n OptionsContainer,\n PaddedContainer,\n} from './styled';\nimport { SearchInput } from './components';\n\nconst fullWidth = { width: '100%' };\n\nconst Dropdown = <Data, Type extends 'single' | 'multi'>({\n options,\n onSearch,\n type,\n hideSearchBar,\n onSelect,\n value,\n keyExtractor,\n labelExtractor,\n setDropDownVisible,\n style,\n anchor,\n selectAllLabel,\n searchBarPlaceholder,\n}: SelectProps<Data, Type> & {\n setDropDownVisible: (t: boolean) => void;\n}): JSX.Element => {\n const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);\n const lengthOptions = React.useMemo(() => options.length, [options]);\n\n const [checkedAll, setCheckedAll] = React.useState<boolean>(\n type === 'multi' && (value as Data[])?.length === lengthOptions\n );\n\n React.useEffect(() => {\n if (type === 'multi') {\n lengthOptions === (value as Data[])?.length\n ? setCheckedAll(true)\n : setCheckedAll(false);\n }\n }, [value, type, lengthOptions]);\n\n const onClickCheckAll = React.useCallback(() => {\n const items = options.map(option => option);\n let aux;\n setCheckedAll(prev => {\n aux = !prev;\n return !prev;\n });\n type OnSelectArg = Parameters<typeof onSelect>[0];\n const auxArray: Data[] = [];\n !aux ? onSelect(auxArray as OnSelectArg) : onSelect(items as OnSelectArg);\n }, [options, setCheckedAll, onSelect]);\n\n const onChange = React.useCallback(text => setSearchArg(text), [\n setSearchArg,\n ]);\n\n return (\n <StyledContainerDropdown\n lengthOptions={lengthOptions}\n style={style}\n anchor={anchor}\n >\n {type === 'multi' && (\n <StyledContainerCheckAll\n onClick={hideSearchBar ? onClickCheckAll : undefined}\n >\n <Checkbox checked={checkedAll} onChange={onClickCheckAll} />\n {!hideSearchBar ? (\n <SearchBarContainer>\n <SearchInput\n searchArg={searchArg}\n onChange={onChange}\n fullWidth={fullWidth}\n placeholder={searchBarPlaceholder}\n />\n </SearchBarContainer>\n ) : (\n <StyledContainerTextLabel>\n <Text fontWeight=\"bold\">\n <StyledSpan>{selectAllLabel}</StyledSpan>\n </Text>\n </StyledContainerTextLabel>\n )}\n </StyledContainerCheckAll>\n )}\n {type === 'single' && !hideSearchBar && (\n <PaddedContainer>\n <SearchInput\n searchArg={searchArg}\n onChange={onChange}\n fullWidth={fullWidth}\n placeholder={searchBarPlaceholder}\n />\n </PaddedContainer>\n )}\n <OptionsContainer lengthOptions={options.length}>\n {options.map((item, index) => (\n <ItemSelect\n type={type}\n key={keyExtractor(item)}\n item={item}\n onSelect={onSelect}\n value={value}\n keyExtractor={keyExtractor}\n index={index}\n labelExtractor={labelExtractor}\n setDropDownVisible={setDropDownVisible}\n checkedAll={checkedAll}\n setCheckedAll={setCheckedAll}\n lenghtOptions={lengthOptions}\n />\n ))}\n </OptionsContainer>\n </StyledContainerDropdown>\n );\n};\n\nexport default Dropdown;\n"],"file":"Dropdown.js"}
|
|
@@ -8,7 +8,7 @@ exports.getDisplayValue = void 0;
|
|
|
8
8
|
const getDisplayValue = (type, value, options, placeholder, keyExtractor, labelExtractor) => {
|
|
9
9
|
if (type === 'multi') {
|
|
10
10
|
if (value.length === 0) return placeholder;else {
|
|
11
|
-
return
|
|
11
|
+
return value.reduce((acc, option) => acc + labelExtractor(option) + ', ', '').slice(0, -2);
|
|
12
12
|
}
|
|
13
13
|
} else {
|
|
14
14
|
if (value === undefined) return placeholder;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/molecules/Select/functions.ts"],"names":["getDisplayValue","type","value","options","placeholder","keyExtractor","labelExtractor","length","reduce","acc","option","
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/molecules/Select/functions.ts"],"names":["getDisplayValue","type","value","options","placeholder","keyExtractor","labelExtractor","length","reduce","acc","option","slice","undefined","selectedOption","find","index"],"mappings":";;;;;;;AAAO,MAAMA,eAAe,GAAG,CAC7BC,IAD6B,EAE7BC,KAF6B,EAG7BC,OAH6B,EAI7BC,WAJ6B,EAK7BC,YAL6B,EAM7BC,cAN6B,KAOU;AACvC,MAAIL,IAAI,KAAK,OAAb,EAAsB;AACpB,QAAKC,KAAD,CAAkBK,MAAlB,KAA6B,CAAjC,EAAoC,OAAOH,WAAP,CAApC,KACK;AACH,aAAQF,KAAD,CACJM,MADI,CACG,CAACC,GAAD,EAAMC,MAAN,KAAiBD,GAAG,GAAGH,cAAc,CAACI,MAAD,CAApB,GAA+B,IADnD,EACyD,EADzD,EAEJC,KAFI,CAEE,CAFF,EAEK,CAAC,CAFN,CAAP;AAGD;AACF,GAPD,MAOO;AACL,QAAIT,KAAK,KAAKU,SAAd,EAAyB,OAAOR,WAAP;AACzB,UAAMS,cAAc,GAAGV,OAAO,CAACW,IAAR,CACrB,CAACJ,MAAD,EAASK,KAAT,KACEV,YAAY,CAACK,MAAD,EAASK,KAAT,CAAZ,IAA+BV,YAAY,CAACH,KAAD,EAAgBa,KAAhB,CAFxB,CAAvB;AAIA,WAAOF,cAAc,GAAGP,cAAc,CAACO,cAAD,CAAjB,GAAoCT,WAAzD;AACD;AACF,CAvBM","sourcesContent":["export const getDisplayValue = <Data>(\n type: 'multi' | 'single',\n value: Data | Data[] | undefined,\n options: Data[],\n placeholder: string | undefined,\n keyExtractor: (option: Data, idx?: number) => string,\n labelExtractor: (option: Data) => string\n): Data | Data[] | string | undefined => {\n if (type === 'multi') {\n if ((value as Data[]).length === 0) return placeholder;\n else {\n return (value as Data[])\n .reduce((acc, option) => acc + labelExtractor(option) + ', ', '')\n .slice(0, -2);\n }\n } else {\n if (value === undefined) return placeholder;\n const selectedOption = options.find(\n (option, index) =>\n keyExtractor(option, index) == keyExtractor(value as Data, index)\n );\n return selectedOption ? labelExtractor(selectedOption) : placeholder;\n }\n};\n"],"file":"functions.js"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tecsinapse/react-web-kit",
|
|
3
3
|
"description": "TecSinapse React components",
|
|
4
|
-
"version": "1.10.
|
|
4
|
+
"version": "1.10.2",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"license": "MIT",
|
|
@@ -33,5 +33,5 @@
|
|
|
33
33
|
"react-dom": ">=16.8.0",
|
|
34
34
|
"react-native-web": "^0.17.1"
|
|
35
35
|
},
|
|
36
|
-
"gitHead": "
|
|
36
|
+
"gitHead": "68cf48b922cfcdd0b4e734541d00f7021f4bc575"
|
|
37
37
|
}
|
|
@@ -40,8 +40,10 @@ const Dropdown = <Data, Type extends 'single' | 'multi'>({
|
|
|
40
40
|
);
|
|
41
41
|
|
|
42
42
|
React.useEffect(() => {
|
|
43
|
-
if (type === 'multi'
|
|
44
|
-
|
|
43
|
+
if (type === 'multi') {
|
|
44
|
+
lengthOptions === (value as Data[])?.length
|
|
45
|
+
? setCheckedAll(true)
|
|
46
|
+
: setCheckedAll(false);
|
|
45
47
|
}
|
|
46
48
|
}, [value, type, lengthOptions]);
|
|
47
49
|
|
|
@@ -71,8 +71,12 @@ Single.args = {
|
|
|
71
71
|
hideSearchBar: false,
|
|
72
72
|
};
|
|
73
73
|
|
|
74
|
-
const TemplateMulti: Story<SelectProps<Option, 'multi'>> =
|
|
74
|
+
const TemplateMulti: Story<SelectProps<Option, 'multi'>> = ({
|
|
75
|
+
options: _options,
|
|
76
|
+
...args
|
|
77
|
+
}) => {
|
|
75
78
|
const [multiValue, setMultiValue] = useState([]);
|
|
79
|
+
const [options, setOptions] = useState(_options);
|
|
76
80
|
|
|
77
81
|
const handleSelectMultipleValues = React.useCallback(
|
|
78
82
|
keys => setMultiValue(keys),
|
|
@@ -82,16 +86,24 @@ const TemplateMulti: Story<SelectProps<Option, 'multi'>> = args => {
|
|
|
82
86
|
const labelExtractor = React.useCallback(item => item.label, []);
|
|
83
87
|
const keyExtractor = React.useCallback(item => String(item.value), []);
|
|
84
88
|
|
|
89
|
+
const handleSearch = React.useCallback((searchArg: string) => {
|
|
90
|
+
setOptions(
|
|
91
|
+
_options.filter(item => new RegExp(searchArg, 'ig').test(item.label))
|
|
92
|
+
);
|
|
93
|
+
}, []);
|
|
94
|
+
|
|
85
95
|
return (
|
|
86
96
|
<Container>
|
|
87
97
|
<ContainerSelect>
|
|
88
98
|
<Select
|
|
89
99
|
{...args}
|
|
100
|
+
options={options}
|
|
90
101
|
value={multiValue}
|
|
91
102
|
type="multi"
|
|
92
103
|
onSelect={handleSelectMultipleValues}
|
|
93
104
|
labelExtractor={labelExtractor}
|
|
94
105
|
keyExtractor={keyExtractor}
|
|
106
|
+
onSearch={handleSearch}
|
|
95
107
|
/>
|
|
96
108
|
</ContainerSelect>
|
|
97
109
|
</Container>
|
|
@@ -104,6 +116,7 @@ Multi.args = {
|
|
|
104
116
|
placeholder: 'Placeholder do select',
|
|
105
117
|
label: 'Label',
|
|
106
118
|
options: OPTIONS_EXAMPLE,
|
|
119
|
+
hideSearchBar: false,
|
|
107
120
|
};
|
|
108
121
|
|
|
109
122
|
const Container = styled('div')`
|
|
@@ -9,16 +9,8 @@ export const getDisplayValue = <Data>(
|
|
|
9
9
|
if (type === 'multi') {
|
|
10
10
|
if ((value as Data[]).length === 0) return placeholder;
|
|
11
11
|
else {
|
|
12
|
-
return
|
|
13
|
-
.reduce(
|
|
14
|
-
(acc, option, index) =>
|
|
15
|
-
(value as Data[]).find(
|
|
16
|
-
key => keyExtractor(option, index) == keyExtractor(key, index)
|
|
17
|
-
)
|
|
18
|
-
? acc + labelExtractor(option) + ', '
|
|
19
|
-
: acc,
|
|
20
|
-
''
|
|
21
|
-
)
|
|
12
|
+
return (value as Data[])
|
|
13
|
+
.reduce((acc, option) => acc + labelExtractor(option) + ', ', '')
|
|
22
14
|
.slice(0, -2);
|
|
23
15
|
}
|
|
24
16
|
} else {
|