@tecsinapse/react-web-kit 1.12.9 → 1.12.13
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 +41 -0
- package/dist/components/molecules/DatePicker/DatePicker.d.ts +3 -2
- package/dist/components/molecules/DatePicker/DatePicker.js.map +1 -1
- package/dist/components/molecules/DatePicker/index.d.ts +1 -1
- package/dist/components/molecules/DatePicker/index.js +12 -11
- package/dist/components/molecules/DatePicker/index.js.map +1 -1
- package/dist/components/molecules/DateTimePicker/DateTimePicker.d.ts +2 -1
- package/dist/components/molecules/DateTimePicker/DateTimePicker.js.map +1 -1
- package/dist/components/molecules/DateTimePicker/index.d.ts +1 -1
- package/dist/components/molecules/DateTimePicker/index.js +12 -11
- package/dist/components/molecules/DateTimePicker/index.js.map +1 -1
- package/dist/components/molecules/Menubar/styled.js +0 -3
- package/dist/components/molecules/Menubar/styled.js.map +1 -1
- package/dist/components/molecules/Select/SelectItem/SelectItem.d.ts +1 -1
- package/dist/components/molecules/Select/SelectItem/SelectItem.js +9 -4
- package/dist/components/molecules/Select/SelectItem/SelectItem.js.map +1 -1
- package/dist/components/organisms/DataGrid/Footer/styled.js +6 -4
- package/dist/components/organisms/DataGrid/Footer/styled.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +15 -1
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
- package/src/components/molecules/DatePicker/DatePicker.tsx +3 -1
- package/src/components/molecules/DatePicker/index.ts +1 -1
- package/src/components/molecules/DateTimePicker/DateTimePicker.tsx +4 -1
- package/src/components/molecules/DateTimePicker/index.ts +1 -1
- package/src/components/molecules/Menubar/styled.ts +0 -1
- package/src/components/molecules/Select/SelectItem/SelectItem.tsx +29 -3
- package/src/components/organisms/DataGrid/Footer/styled.ts +4 -2
- package/src/index.ts +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,47 @@
|
|
|
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.12.13](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.12.12...@tecsinapse/react-web-kit@1.12.13) (2022-01-28)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* using keyExtractor instead of Data to do check validations in Select type multi ([268a4f6](https://github.com/tecsinapse/design-system/commit/268a4f6cf33d0d27d86da74c57f4ce42e485bd5f))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [1.12.12](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.12.11...@tecsinapse/react-web-kit@1.12.12) (2022-01-19)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Bug Fixes
|
|
21
|
+
|
|
22
|
+
* fix DataGrid pagination buttons ([c9d40cf](https://github.com/tecsinapse/design-system/commit/c9d40cf9a0655338a6d35d42dbc399768d8cf58d))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
## [1.12.11](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.12.10...@tecsinapse/react-web-kit@1.12.11) (2022-01-19)
|
|
29
|
+
|
|
30
|
+
**Note:** Version bump only for package @tecsinapse/react-web-kit
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
## [1.12.10](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.12.9...@tecsinapse/react-web-kit@1.12.10) (2022-01-18)
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
### Bug Fixes
|
|
40
|
+
|
|
41
|
+
* remove StyledMenuBar zIndex ([2b7941f](https://github.com/tecsinapse/design-system/commit/2b7941fe6aec2fbc91495e909bb448e98f1cd8ac))
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
6
47
|
## [1.12.9](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.12.8...@tecsinapse/react-web-kit@1.12.9) (2022-01-18)
|
|
7
48
|
|
|
8
49
|
**Note:** Version bump only for package @tecsinapse/react-web-kit
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
import { DatePickerProps } from '@tecsinapse/react-core';
|
|
2
|
-
export declare
|
|
1
|
+
import { DatePickerProps, SelectionType } from '@tecsinapse/react-core';
|
|
2
|
+
export declare type WebDatePickerProps<T extends SelectionType> = Omit<DatePickerProps<T>, 'CalendarComponent' | 'renderCalendar' | 'requestCloseCalendar' | 'requestShowCalendar'>;
|
|
3
|
+
export declare const DatePicker: <T extends any>({ ...rest }: WebDatePickerProps<T>) => JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"names":["DatePicker","rest","visible","setVisible","show","close","Calendar","calendar"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"names":["DatePicker","rest","visible","setVisible","show","close","Calendar","calendar"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;;;;;;;AAIO,MAAMA,UAAU,GAAG,CAA0B,EAAE,GAAGC;AAAL,CAA1B,KAA8E;AAEtG,QAAM,CAAEC,OAAF,EAAWC,UAAX,IAA0B,qBAAS,KAAT,CAAhC;AACA,QAAMC,IAAI,GAAG,wBAAY,MAAMD,UAAU,CAAC,IAAD,CAA5B,EAAoC,EAApC,CAAb;AACA,QAAME,KAAK,GAAG,wBAAY,MAAMF,UAAU,CAAC,KAAD,CAA5B,EAAqC,EAArC,CAAd;AAEA,SACE,6BAAC,qBAAD,eACMF,IADN;AAEE,IAAA,iBAAiB,EAAEK,mBAFrB;AAGE,IAAA,mBAAmB,EAAEF,IAHvB;AAIE,IAAA,oBAAoB,EAAEC,KAJxB;AAKE,IAAA,cAAc,EAAGE,QAAD,IACd,6BAAC,YAAD;AAAO,MAAA,aAAa,EAAC,MAArB;AAA4B,MAAA,OAAO,EAAEL,OAArC;AAA8C,MAAA,cAAc,EAAEG;AAA9D,OACGE,QADH;AANJ,KADF;AAaD,CAnBM","sourcesContent":["import {\n Calendar,\n DatePicker as DatePickerCore, DatePickerProps, SelectionType\n} from '@tecsinapse/react-core';\nimport React, { useCallback, useState } from 'react';\nimport { Modal } from './Modal';\n\nexport type WebDatePickerProps<T extends SelectionType> = Omit<DatePickerProps<T>, 'CalendarComponent' | 'renderCalendar' | 'requestCloseCalendar' | 'requestShowCalendar'>\n\nexport const DatePicker = <T extends SelectionType>({ ...rest }: WebDatePickerProps<T>): JSX.Element => {\n\n const [ visible, setVisible ] = useState(false)\n const show = useCallback(() => setVisible(true), [])\n const close = useCallback(() => setVisible(false), [])\n \n return (\n <DatePickerCore\n {...rest}\n CalendarComponent={Calendar}\n requestShowCalendar={show}\n requestCloseCalendar={close}\n renderCalendar={(calendar) => (\n <Modal animationType='fade' visible={visible} onRequestClose={close}>\n {calendar}\n </Modal>\n )}\n />\n );\n};"],"file":"DatePicker.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export
|
|
1
|
+
export { DatePicker, WebDatePickerProps } from './DatePicker';
|
|
@@ -3,17 +3,18 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
Object.defineProperty(exports, "DatePicker", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _DatePicker.DatePicker;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "WebDatePickerProps", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return _DatePicker.WebDatePickerProps;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
6
18
|
|
|
7
19
|
var _DatePicker = require("./DatePicker");
|
|
8
|
-
|
|
9
|
-
Object.keys(_DatePicker).forEach(function (key) {
|
|
10
|
-
if (key === "default" || key === "__esModule") return;
|
|
11
|
-
if (key in exports && exports[key] === _DatePicker[key]) return;
|
|
12
|
-
Object.defineProperty(exports, key, {
|
|
13
|
-
enumerable: true,
|
|
14
|
-
get: function () {
|
|
15
|
-
return _DatePicker[key];
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
});
|
|
19
20
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/molecules/DatePicker/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/molecules/DatePicker/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA","sourcesContent":["export { DatePicker, WebDatePickerProps } from './DatePicker';"],"file":"index.js"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
import { DateTimePickerProps } from '@tecsinapse/react-core';
|
|
2
2
|
import { FC } from 'react';
|
|
3
|
-
export declare
|
|
3
|
+
export declare type WebDateTimePickerProps = Omit<DateTimePickerProps, 'renderSelector' | 'requestShowSelector' | 'requestCloseSelector'>;
|
|
4
|
+
export declare const DateTimePicker: FC<WebDateTimePickerProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/DateTimePicker.tsx"],"names":["DateTimePicker","rest","visible","setVisible","show","close","selector"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/DateTimePicker.tsx"],"names":["DateTimePicker","rest","visible","setVisible","show","close","selector"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;;;;;;;AAKO,MAAMA,cAA0C,GAAG,CAAC,EAAE,GAAGC;AAAL,CAAD,KAAiB;AAEvE,QAAM,CAAEC,OAAF,EAAWC,UAAX,IAA0B,qBAAS,KAAT,CAAhC;AACA,QAAMC,IAAI,GAAG,wBAAY,MAAMD,UAAU,CAAC,IAAD,CAA5B,EAAoC,EAApC,CAAb;AACA,QAAME,KAAK,GAAG,wBAAY,MAAMF,UAAU,CAAC,KAAD,CAA5B,EAAqC,EAArC,CAAd;AAEA,SACI,6BAAC,yBAAD,eACQF,IADR;AAEI,IAAA,mBAAmB,EAAEG,IAFzB;AAGI,IAAA,oBAAoB,EAAEC,KAH1B;AAII,IAAA,cAAc,EAAGC,QAAD,IACZ,6BAAC,YAAD;AAAO,MAAA,aAAa,EAAC,MAArB;AAA4B,MAAA,OAAO,EAAEJ,OAArC;AAA8C,MAAA,cAAc,EAAEG;AAA9D,OACKC,QADL;AALR,KADJ;AAYH,CAlBM","sourcesContent":["import {\n DateTimePicker as DateTimePickerCore,\n DateTimePickerProps\n} from '@tecsinapse/react-core';\nimport React, { FC, useCallback, useState } from 'react';\nimport { Modal } from './Modal';\n\n\nexport type WebDateTimePickerProps = Omit<DateTimePickerProps, 'renderSelector' | 'requestShowSelector' | 'requestCloseSelector'>\n\nexport const DateTimePicker: FC<WebDateTimePickerProps> = ({ ...rest }) => {\n\n const [ visible, setVisible ] = useState(false)\n const show = useCallback(() => setVisible(true), [])\n const close = useCallback(() => setVisible(false), [])\n\n return (\n <DateTimePickerCore\n {...rest}\n requestShowSelector={show}\n requestCloseSelector={close}\n renderSelector={(selector) => (\n <Modal animationType='fade' visible={visible} onRequestClose={close}>\n {selector}\n </Modal>\n )}\n />\n );\n};\n"],"file":"DateTimePicker.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export
|
|
1
|
+
export { DateTimePicker, WebDateTimePickerProps } from './DateTimePicker';
|
|
@@ -3,17 +3,18 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
Object.defineProperty(exports, "DateTimePicker", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _DateTimePicker.DateTimePicker;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "WebDateTimePickerProps", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return _DateTimePicker.WebDateTimePickerProps;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
6
18
|
|
|
7
19
|
var _DateTimePicker = require("./DateTimePicker");
|
|
8
|
-
|
|
9
|
-
Object.keys(_DateTimePicker).forEach(function (key) {
|
|
10
|
-
if (key === "default" || key === "__esModule") return;
|
|
11
|
-
if (key in exports && exports[key] === _DateTimePicker[key]) return;
|
|
12
|
-
Object.defineProperty(exports, key, {
|
|
13
|
-
enumerable: true,
|
|
14
|
-
get: function () {
|
|
15
|
-
return _DateTimePicker[key];
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
});
|
|
19
20
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA","sourcesContent":["export { DateTimePicker, WebDateTimePickerProps } from './DateTimePicker';\n"],"file":"index.js"}
|
|
@@ -34,9 +34,6 @@ const StyledIconInput = (0, _styled.default)('div')`
|
|
|
34
34
|
exports.StyledIconInput = StyledIconInput;
|
|
35
35
|
const StyledMenuBar = (0, _styled.default)('div')`
|
|
36
36
|
position: relative;
|
|
37
|
-
z-index: ${({
|
|
38
|
-
theme
|
|
39
|
-
}) => theme.zIndex.header};
|
|
40
37
|
background-color: ${({
|
|
41
38
|
theme
|
|
42
39
|
}) => theme.miscellaneous.surfaceColor};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/molecules/Menubar/styled.ts"],"names":["StyledIconInput","theme","spacing","centi","StyledMenuBar","
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/molecules/Menubar/styled.ts"],"names":["StyledIconInput","theme","spacing","centi","StyledMenuBar","miscellaneous","surfaceColor","deca","kilo","shadow","StyledMenuButton","Button","StyledContainerOpenMenu","borderWidth","pico","borderRadius","mili","mega","zIndex","header","StyledInput","Input","StyledInputContainer","StyledSearchResultsContainer","StyledSearchTextContainer"],"mappings":"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","sourcesContent":["import { default as webStyled } from '@emotion/styled';\nimport { default as nativeStyled } from '@emotion/native';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\nimport { Button } from '../../atoms/Button';\nimport { Input } from '../../atoms/Input';\n\nexport const StyledIconInput = webStyled('div')<Partial<StyleProps>>`\n padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);\n padding-left: ${({ theme }) => theme.spacing.centi};\n padding-bottom: calc(${({ theme }) => theme.spacing.centi} - 2px);\n padding-right: ${({ theme }) => theme.spacing.centi};\n`;\n\nexport const StyledMenuBar = webStyled('div')<Partial<StyleProps>>`\n position: relative;\n background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: ${({ theme }) => `${theme.spacing.deca} ${theme.spacing.kilo}`};\n box-shadow: 0px 2px 8px ${({ theme }) =>\n hex2rgba(theme.miscellaneous.shadow, 0.05)};\n`;\n\nexport const StyledMenuButton = nativeStyled(Button)<Partial<StyleProps>>`\n padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);\n padding-right: calc(${({ theme }) => theme.spacing.centi} + 2px);\n padding-bottom: calc(${({ theme }) => theme.spacing.centi} + 2px);\n padding-left: calc(${({ theme }) => theme.spacing.centi} + 2px);\n margin-right: ${({ theme }) => theme.spacing.kilo};\n & * {\n user-select: none;\n }\n`;\n\nexport const StyledContainerOpenMenu = webStyled('div')<Partial<StyleProps>>`\n border-top: ${({ theme }) =>\n `${theme.borderWidth.pico} solid ${hex2rgba(\n theme.miscellaneous.shadow,\n 0.05\n )}`};\n background-color: ${({ theme }) => theme.miscellaneous.surfaceColor}; \n border-bottom-left-radius: ${({ theme }) => theme.borderRadius.mili}; \n border-bottom-right-radius: ${({ theme }) => theme.borderRadius.mili};\n box-shadow: 0px 2px 8px ${({ theme }) =>\n hex2rgba(theme.miscellaneous.shadow, 0.05)};\n padding-right: 8vw;\n padding-left: 8vw;\n padding-top: ${({ theme }) => theme.spacing.kilo};\n padding-bottom: ${({ theme }) => theme.spacing.mega};\n position: absolute;\n z-index: ${({ theme }) => theme.zIndex.header + 1};\n width: -webkit-fill-available;\n width: -moz-available;\n`;\n\nexport const StyledInput = nativeStyled(Input)<Partial<StyleProps>>`\n width: 100%;\n`;\n\nexport const StyledInputContainer = webStyled('div')`\n display: flex;\n flex: 1;\n`;\n\nexport const StyledSearchResultsContainer = webStyled('div')`\n display: flex;\n flex-direction: column;\n`;\n\nexport const StyledSearchTextContainer = webStyled('div')<Partial<StyleProps>>`\n margin-bottom: ${({ theme }) => theme.spacing.mili};\n`;\n"],"file":"styled.js"}
|
|
@@ -7,7 +7,7 @@ interface SelectItemProps<Data, Type extends 'single' | 'multi'> {
|
|
|
7
7
|
labelExtractor: (t: Data) => string;
|
|
8
8
|
index: number;
|
|
9
9
|
}
|
|
10
|
-
declare const _default: <Data, Type extends "single" | "multi">({ item, onSelect, type, value, labelExtractor, setDropDownVisible, checkedAll, setCheckedAll, lenghtOptions, }: SelectItemProps<Data, Type> & {
|
|
10
|
+
declare const _default: <Data, Type extends "single" | "multi">({ item, onSelect, type, value, labelExtractor, setDropDownVisible, checkedAll, setCheckedAll, lenghtOptions, keyExtractor, }: SelectItemProps<Data, Type> & {
|
|
11
11
|
setDropDownVisible: (t: boolean) => void;
|
|
12
12
|
checkedAll: boolean;
|
|
13
13
|
setCheckedAll: (t: boolean) => void;
|
|
@@ -22,15 +22,20 @@ const SelectItem = ({
|
|
|
22
22
|
setDropDownVisible,
|
|
23
23
|
checkedAll,
|
|
24
24
|
setCheckedAll,
|
|
25
|
-
lenghtOptions
|
|
25
|
+
lenghtOptions,
|
|
26
|
+
keyExtractor
|
|
26
27
|
}) => {
|
|
27
28
|
const isMulti = type === 'multi';
|
|
28
29
|
|
|
29
|
-
const [checked, setChecked] = _react.default.useState(value !== undefined && type === 'multi' && value.
|
|
30
|
+
const [checked, setChecked] = _react.default.useState(value !== undefined && type === 'multi' && value.find(data => keyExtractor(data) === keyExtractor(item)) !== undefined);
|
|
31
|
+
|
|
32
|
+
_react.default.useEffect(() => {
|
|
33
|
+
if (!checked && value !== undefined && (type === 'multi' && value.find(data => keyExtractor(data) === keyExtractor(item)) || type === 'single' && keyExtractor(value) === keyExtractor(item))) setChecked(true);
|
|
34
|
+
}, [value, keyExtractor, type]);
|
|
30
35
|
|
|
31
36
|
_react.default.useEffect(() => {
|
|
32
37
|
if (type === 'multi') {
|
|
33
|
-
checkedAll ? setChecked(true) : setChecked(value.
|
|
38
|
+
checkedAll ? setChecked(true) : setChecked(value.find(data => keyExtractor(data) === keyExtractor(item)) !== undefined);
|
|
34
39
|
}
|
|
35
40
|
}, [checkedAll]);
|
|
36
41
|
|
|
@@ -46,7 +51,7 @@ const SelectItem = ({
|
|
|
46
51
|
[..._value, key].length === lenghtOptions && setCheckedAll(true);
|
|
47
52
|
} else {
|
|
48
53
|
const auxArray = [..._value];
|
|
49
|
-
const indexToExclude = auxArray.
|
|
54
|
+
const indexToExclude = auxArray.findIndex(data => keyExtractor(data) === keyExtractor(key));
|
|
50
55
|
auxArray.splice(indexToExclude, 1);
|
|
51
56
|
onSelect([...auxArray]);
|
|
52
57
|
setCheckedAll(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/molecules/Select/SelectItem/SelectItem.tsx"],"names":["SelectItem","item","onSelect","type","value","labelExtractor","setDropDownVisible","checkedAll","setCheckedAll","lenghtOptions","isMulti","checked","setChecked","React","useState","undefined","
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/molecules/Select/SelectItem/SelectItem.tsx"],"names":["SelectItem","item","onSelect","type","value","labelExtractor","setDropDownVisible","checkedAll","setCheckedAll","lenghtOptions","keyExtractor","isMulti","checked","setChecked","React","useState","undefined","find","data","useEffect","clickItem","useCallback","_value","key","Array","isArray","auxChecked","length","auxArray","indexToExclude","findIndex","splice","memo"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Checkbox, Text } from '@tecsinapse/react-core';\nimport {\n ContainerItemSelect,\n StyledContainerTextLabel,\n StyledSpan,\n} from './styled';\n\ninterface SelectItemProps<Data, Type extends 'single' | 'multi'> {\n item: Data;\n type: Type;\n value: Type extends 'single' ? Data | undefined : Data[];\n onSelect: (\n option: Type extends 'single' ? Data | undefined : Data[]\n ) => never | void;\n keyExtractor: (t: Data, index?: number) => string;\n labelExtractor: (t: Data) => string;\n index: number;\n}\n\nconst SelectItem = <Data, Type extends 'single' | 'multi'>({\n item,\n onSelect,\n type,\n value,\n labelExtractor,\n setDropDownVisible,\n checkedAll,\n setCheckedAll,\n lenghtOptions,\n keyExtractor,\n}: SelectItemProps<Data, Type> & {\n setDropDownVisible: (t: boolean) => void;\n checkedAll: boolean;\n setCheckedAll: (t: boolean) => void;\n lenghtOptions: number;\n}): JSX.Element => {\n const isMulti = type === 'multi';\n const [checked, setChecked] = React.useState<boolean>(\n value !== undefined &&\n type === 'multi' &&\n (value as Data[]).find(\n data => keyExtractor(data) === keyExtractor(item)\n ) !== undefined\n );\n\n React.useEffect(() => {\n if (\n !checked &&\n value !== undefined &&\n ((type === 'multi' &&\n (value as Data[]).find(\n data => keyExtractor(data) === keyExtractor(item)\n )) ||\n (type === 'single' &&\n keyExtractor(value as Data) === keyExtractor(item)))\n )\n setChecked(true);\n }, [value, keyExtractor, type]);\n\n React.useEffect(() => {\n if (type === 'multi') {\n checkedAll\n ? setChecked(true)\n : setChecked(\n (value as Data[]).find(\n data => keyExtractor(data) === keyExtractor(item)\n ) !== undefined\n );\n }\n }, [checkedAll]);\n\n const clickItem = React.useCallback(\n (item, _value) => {\n // TS Workaround since TS won't infer the ternary operator's result type correctly\n type OnSelectArg = Parameters<typeof onSelect>[0];\n const key: Data = item;\n if (Array.isArray(_value)) {\n const auxChecked = !checked;\n setChecked(!checked);\n if (auxChecked) {\n onSelect([..._value, key] as OnSelectArg);\n [..._value, key].length === lenghtOptions && setCheckedAll(true);\n } else {\n const auxArray: Data[] = [..._value];\n const indexToExclude = auxArray.findIndex(\n data => keyExtractor(data) === keyExtractor(key)\n );\n auxArray.splice(indexToExclude, 1);\n onSelect([...auxArray] as OnSelectArg);\n setCheckedAll(false);\n }\n } else {\n onSelect(key as OnSelectArg);\n setDropDownVisible(false);\n }\n },\n [onSelect, setDropDownVisible, setCheckedAll, setChecked, checked]\n );\n\n return (\n <ContainerItemSelect onClick={() => clickItem(item, value)}>\n {isMulti && (\n <Checkbox checked={checked} onChange={() => clickItem(item, value)} />\n )}\n <StyledContainerTextLabel>\n <Text fontWeight=\"bold\" ellipsizeMode=\"tail\" numberOfLines={1}>\n <StyledSpan singleHighligh={type === 'single' && value === item}>\n {labelExtractor(item)}\n </StyledSpan>\n </Text>\n </StyledContainerTextLabel>\n </ContainerItemSelect>\n );\n};\n\nexport default React.memo(SelectItem) as typeof SelectItem;\n"],"file":"SelectItem.js"}
|
|
@@ -45,14 +45,16 @@ const SelectContainer = (0, _styled.default)('div')`
|
|
|
45
45
|
}) => theme.spacing.deca};
|
|
46
46
|
`;
|
|
47
47
|
exports.SelectContainer = SelectContainer;
|
|
48
|
-
const NavigationButton = (0, _native.default)(_Button.Button)`
|
|
49
|
-
padding: ${({
|
|
50
|
-
theme
|
|
51
|
-
}) => theme.spacing.centi};
|
|
48
|
+
const NavigationButton = (0, _native.default)(_Button.Button)`
|
|
52
49
|
border-radius: ${({
|
|
53
50
|
theme
|
|
54
51
|
}) => theme.borderRadius.mili};
|
|
52
|
+
height: 44px;
|
|
55
53
|
justify-content: center;
|
|
54
|
+
padding: ${({
|
|
55
|
+
theme
|
|
56
|
+
}) => theme.spacing.centi};
|
|
57
|
+
width: 44px;
|
|
56
58
|
`;
|
|
57
59
|
exports.NavigationButton = NavigationButton;
|
|
58
60
|
const PageButton = (0, _native.default)(NavigationButton)`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/organisms/DataGrid/Footer/styled.ts"],"names":["TdFooterStyled","Td","theme","spacing","centi","FlexContainer","FooterContainer","FooterContainerStart","FooterContainerEnd","SelectContainer","deca","NavigationButton","Button","borderRadius","mili","PageButton","micro","PagesContainer","HoveredText","font","color","light"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;AAEO,MAAMA,cAAc,GAAG,qBAAOC,SAAP,CAAgC;AAC9D,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAChD,CAFO;;AAIA,MAAMC,aAAa,GAAG,qBAAO,KAAP,CAAc;AAC3C;AACA;AACA,CAHO;;AAKA,MAAMC,eAAe,GAAG,qBAAOD,aAAP,CAAsB;AACrD;AACA;AACA,CAHO;;AAKA,MAAME,oBAAoB,GAAG,qBAAOF,aAAP,CAAsB;AAC1D;AACA,CAFO;;AAIA,MAAMG,kBAAkB,GAAG,qBAAOH,aAAP,CAAsB;AACxD;AACA,CAFO;;AAIA,MAAMI,eAAe,GAAG,qBAAO,KAAP,CAAmC;AAClE,kBAAkB,CAAC;AAAEP,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACpD,CAFO;;AAIA,MAAMC,gBAAgB,GAAG,qBAAaC,cAAb,CAA0C;AAC1E,
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/organisms/DataGrid/Footer/styled.ts"],"names":["TdFooterStyled","Td","theme","spacing","centi","FlexContainer","FooterContainer","FooterContainerStart","FooterContainerEnd","SelectContainer","deca","NavigationButton","Button","borderRadius","mili","PageButton","micro","PagesContainer","HoveredText","font","color","light"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;AAEO,MAAMA,cAAc,GAAG,qBAAOC,SAAP,CAAgC;AAC9D,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAChD,CAFO;;AAIA,MAAMC,aAAa,GAAG,qBAAO,KAAP,CAAc;AAC3C;AACA;AACA,CAHO;;AAKA,MAAMC,eAAe,GAAG,qBAAOD,aAAP,CAAsB;AACrD;AACA;AACA,CAHO;;AAKA,MAAME,oBAAoB,GAAG,qBAAOF,aAAP,CAAsB;AAC1D;AACA,CAFO;;AAIA,MAAMG,kBAAkB,GAAG,qBAAOH,aAAP,CAAsB;AACxD;AACA,CAFO;;AAIA,MAAMI,eAAe,GAAG,qBAAO,KAAP,CAAmC;AAClE,kBAAkB,CAAC;AAAEP,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACpD,CAFO;;AAIA,MAAMC,gBAAgB,GAAG,qBAAaC,cAAb,CAA0C;AAC1E,qBAAqB,CAAC;AAAEV,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACW,YAAN,CAAmBC,IAAK;AAC5D;AACA;AACA,eAAe,CAAC;AAAEZ,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAClD;AACA,CANO;;AASA,MAAMW,UAAU,GAAG,qBAAaJ,gBAAb,CAAoD;AAC9E,qBAAqB,CAAC;AAAET,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACvD,oBAAoB,CAAC;AAAER,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACtD,qBAAqB,CAAC;AAAER,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACW,YAAN,CAAmBC,IAAK;AAC5D;AACA,mBAAmB,CAAC;AAAEZ,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAca,KAAM;AACtD,oBAAoB,CAAC;AAAEd,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAca,KAAM;AACvD,CAPO;;AASA,MAAMC,cAAc,GAAG,qBAAO,KAAP,CAAmC;AACjE;AACA;AACA,CAHO;;AAKA,MAAMC,WAAW,GAAG,qBAAO,KAAP,CAAmC;AAC9D;AACA;AACA,aAAa,CAAC;AAAEhB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACiB,IAAN,CAAWC,KAAX,CAAiBC,KAAM;AACnD;AACA,CALO","sourcesContent":["import styled from '@emotion/styled';\nimport { default as nativeStyled } from '@emotion/native';\nimport { StyleProps } from '@tecsinapse/react-core';\nimport { Td } from '../../../atoms/Table';\nimport { Button } from '../../../atoms/Button';\n\nexport const TdFooterStyled = styled(Td)<Partial<StyleProps>>`\n padding: ${({ theme }) => theme.spacing.centi} 0 0 0;\n`;\n\nexport const FlexContainer = styled('div')`\n display: flex;\n flex-grow: 1;\n`;\n\nexport const FooterContainer = styled(FlexContainer)`\n justify-content: space-between;\n align-items: center;\n`;\n\nexport const FooterContainerStart = styled(FlexContainer)`\n justify-content: flex-start;\n`;\n\nexport const FooterContainerEnd = styled(FlexContainer)`\n justify-content: flex-end;\n`;\n\nexport const SelectContainer = styled('div')<Partial<StyleProps>>`\n margin-right: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const NavigationButton = nativeStyled(Button)<Partial<StyleProps>>` \n border-radius: ${({ theme }) => theme.borderRadius.mili};\n height: 44px;\n justify-content: center;\n padding: ${({ theme }) => theme.spacing.centi};\n width: 44px; \n`;\n\n// Se o botão estiver ativo, renderizar outlined, caso contrario o botão é text\nexport const PageButton = nativeStyled(NavigationButton)<Partial<StyleProps>>`\n padding-right: ${({ theme }) => theme.spacing.deca};\n padding-left: ${({ theme }) => theme.spacing.deca};\n border-radius: ${({ theme }) => theme.borderRadius.mili};\n justify-content: center;\n margin-left: ${({ theme }) => theme.spacing.micro};\n margin-right: ${({ theme }) => theme.spacing.micro};\n`;\n\nexport const PagesContainer = styled('div')<Partial<StyleProps>>`\n margin: 0 20px;\n display: flex;\n`;\n\nexport const HoveredText = styled('div')<Partial<StyleProps>>`\n user-select: none;\n &:hover * {\n color: ${({ theme }) => theme.font.color.light};\n }\n`;\n"],"file":"styled.js"}
|
package/dist/index.d.ts
CHANGED
|
@@ -16,5 +16,5 @@ export { Modal, ModalProps } from './components/atoms/Modal';
|
|
|
16
16
|
export { TextArea, TextAreaProps } from './components/molecules/TextArea';
|
|
17
17
|
export { Tooltip, ITooltip } from './components/atoms/Tooltip';
|
|
18
18
|
export * from './hooks';
|
|
19
|
-
export { DatePicker } from './components/molecules/DatePicker';
|
|
20
|
-
export { DateTimePicker } from './components/molecules/DateTimePicker';
|
|
19
|
+
export { DatePicker, WebDatePickerProps } from './components/molecules/DatePicker';
|
|
20
|
+
export { DateTimePicker, WebDateTimePickerProps } from './components/molecules/DateTimePicker';
|
package/dist/index.js
CHANGED
|
@@ -43,7 +43,9 @@ var _exportNames = {
|
|
|
43
43
|
Tooltip: true,
|
|
44
44
|
ITooltip: true,
|
|
45
45
|
DatePicker: true,
|
|
46
|
-
|
|
46
|
+
WebDatePickerProps: true,
|
|
47
|
+
DateTimePicker: true,
|
|
48
|
+
WebDateTimePickerProps: true
|
|
47
49
|
};
|
|
48
50
|
Object.defineProperty(exports, "Badge", {
|
|
49
51
|
enumerable: true,
|
|
@@ -279,12 +281,24 @@ Object.defineProperty(exports, "DatePicker", {
|
|
|
279
281
|
return _DatePicker.DatePicker;
|
|
280
282
|
}
|
|
281
283
|
});
|
|
284
|
+
Object.defineProperty(exports, "WebDatePickerProps", {
|
|
285
|
+
enumerable: true,
|
|
286
|
+
get: function () {
|
|
287
|
+
return _DatePicker.WebDatePickerProps;
|
|
288
|
+
}
|
|
289
|
+
});
|
|
282
290
|
Object.defineProperty(exports, "DateTimePicker", {
|
|
283
291
|
enumerable: true,
|
|
284
292
|
get: function () {
|
|
285
293
|
return _DateTimePicker.DateTimePicker;
|
|
286
294
|
}
|
|
287
295
|
});
|
|
296
|
+
Object.defineProperty(exports, "WebDateTimePickerProps", {
|
|
297
|
+
enumerable: true,
|
|
298
|
+
get: function () {
|
|
299
|
+
return _DateTimePicker.WebDateTimePickerProps;
|
|
300
|
+
}
|
|
301
|
+
});
|
|
288
302
|
|
|
289
303
|
var _reactCore = require("@tecsinapse/react-core");
|
|
290
304
|
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AAIA;;AAOA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA","sourcesContent":["export * from '@tecsinapse/react-core';\nexport {\n default as Badge,\n BadgeWebProps,\n} from './components/atoms/Badge/Badge';\nexport {\n Button,\n useMouseHover,\n WebButtonProps,\n} from './components/atoms/Button';\nexport { Input, InputWebProps } from './components/atoms/Input';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport {\n InputPassword,\n InputPasswordWebProps,\n} from './components/molecules/InputPassword';\nexport {\n Menubar,\n MenubarProps,\n MenubarOptionsType,\n MenubarItemsOptions,\n MenubarMostUsedType,\n} from './components/molecules/Menubar';\nexport { Drawer, DrawerProps } from './components/molecules/Drawer';\nexport { Select, SelectProps } from './components/molecules/Select';\nexport { Snackbar, SnackbarWebProps } from './components/molecules/Snackbar';\nexport {\n Breadcrumbs,\n BreadcrumbsProps,\n BreadcrumbType,\n} from './components/molecules/Breadcrumbs';\nexport { Skeleton, SkeletonProps } from './components/atoms/Skeleton';\nexport { Accordion, AccordionProps } from './components/atoms/Accordion';\nexport {\n DataGrid,\n DataGridProps,\n HeadersType,\n} from './components/organisms/DataGrid';\nexport { Modal, ModalProps } from './components/atoms/Modal';\nexport { TextArea, TextAreaProps } from './components/molecules/TextArea';\nexport { Tooltip, ITooltip } from './components/atoms/Tooltip';\nexport * from './hooks';\nexport { DatePicker, WebDatePickerProps } from './components/molecules/DatePicker'\nexport { DateTimePicker, WebDateTimePickerProps } from './components/molecules/DateTimePicker'"],"file":"index.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.12.
|
|
4
|
+
"version": "1.12.13",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"license": "MIT",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"@emotion/native": "^11.0.0",
|
|
15
15
|
"@emotion/react": "^11.4.1",
|
|
16
16
|
"@emotion/styled": "^11.3.0",
|
|
17
|
-
"@tecsinapse/react-core": "^1.12.
|
|
17
|
+
"@tecsinapse/react-core": "^1.12.10",
|
|
18
18
|
"@types/react-native": "^0.64.4",
|
|
19
19
|
"react-native-vector-icons": "^8.1.0",
|
|
20
20
|
"react-transition-group": "^4.4.2"
|
|
@@ -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": "89853e05d039d029e66401700b450dc9be58de3e"
|
|
37
37
|
}
|
|
@@ -5,7 +5,9 @@ import {
|
|
|
5
5
|
import React, { useCallback, useState } from 'react';
|
|
6
6
|
import { Modal } from './Modal';
|
|
7
7
|
|
|
8
|
-
export
|
|
8
|
+
export type WebDatePickerProps<T extends SelectionType> = Omit<DatePickerProps<T>, 'CalendarComponent' | 'renderCalendar' | 'requestCloseCalendar' | 'requestShowCalendar'>
|
|
9
|
+
|
|
10
|
+
export const DatePicker = <T extends SelectionType>({ ...rest }: WebDatePickerProps<T>): JSX.Element => {
|
|
9
11
|
|
|
10
12
|
const [ visible, setVisible ] = useState(false)
|
|
11
13
|
const show = useCallback(() => setVisible(true), [])
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export
|
|
1
|
+
export { DatePicker, WebDatePickerProps } from './DatePicker';
|
|
@@ -5,7 +5,10 @@ import {
|
|
|
5
5
|
import React, { FC, useCallback, useState } from 'react';
|
|
6
6
|
import { Modal } from './Modal';
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
|
|
9
|
+
export type WebDateTimePickerProps = Omit<DateTimePickerProps, 'renderSelector' | 'requestShowSelector' | 'requestCloseSelector'>
|
|
10
|
+
|
|
11
|
+
export const DateTimePicker: FC<WebDateTimePickerProps> = ({ ...rest }) => {
|
|
9
12
|
|
|
10
13
|
const [ visible, setVisible ] = useState(false)
|
|
11
14
|
const show = useCallback(() => setVisible(true), [])
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export
|
|
1
|
+
export { DateTimePicker, WebDateTimePickerProps } from './DateTimePicker';
|
|
@@ -13,7 +13,6 @@ export const StyledIconInput = webStyled('div')<Partial<StyleProps>>`
|
|
|
13
13
|
|
|
14
14
|
export const StyledMenuBar = webStyled('div')<Partial<StyleProps>>`
|
|
15
15
|
position: relative;
|
|
16
|
-
z-index: ${({ theme }) => theme.zIndex.header};
|
|
17
16
|
background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
|
|
18
17
|
display: flex;
|
|
19
18
|
flex-direction: row;
|
|
@@ -28,6 +28,7 @@ const SelectItem = <Data, Type extends 'single' | 'multi'>({
|
|
|
28
28
|
checkedAll,
|
|
29
29
|
setCheckedAll,
|
|
30
30
|
lenghtOptions,
|
|
31
|
+
keyExtractor,
|
|
31
32
|
}: SelectItemProps<Data, Type> & {
|
|
32
33
|
setDropDownVisible: (t: boolean) => void;
|
|
33
34
|
checkedAll: boolean;
|
|
@@ -36,13 +37,36 @@ const SelectItem = <Data, Type extends 'single' | 'multi'>({
|
|
|
36
37
|
}): JSX.Element => {
|
|
37
38
|
const isMulti = type === 'multi';
|
|
38
39
|
const [checked, setChecked] = React.useState<boolean>(
|
|
39
|
-
value !== undefined &&
|
|
40
|
+
value !== undefined &&
|
|
41
|
+
type === 'multi' &&
|
|
42
|
+
(value as Data[]).find(
|
|
43
|
+
data => keyExtractor(data) === keyExtractor(item)
|
|
44
|
+
) !== undefined
|
|
40
45
|
);
|
|
46
|
+
|
|
47
|
+
React.useEffect(() => {
|
|
48
|
+
if (
|
|
49
|
+
!checked &&
|
|
50
|
+
value !== undefined &&
|
|
51
|
+
((type === 'multi' &&
|
|
52
|
+
(value as Data[]).find(
|
|
53
|
+
data => keyExtractor(data) === keyExtractor(item)
|
|
54
|
+
)) ||
|
|
55
|
+
(type === 'single' &&
|
|
56
|
+
keyExtractor(value as Data) === keyExtractor(item)))
|
|
57
|
+
)
|
|
58
|
+
setChecked(true);
|
|
59
|
+
}, [value, keyExtractor, type]);
|
|
60
|
+
|
|
41
61
|
React.useEffect(() => {
|
|
42
62
|
if (type === 'multi') {
|
|
43
63
|
checkedAll
|
|
44
64
|
? setChecked(true)
|
|
45
|
-
: setChecked(
|
|
65
|
+
: setChecked(
|
|
66
|
+
(value as Data[]).find(
|
|
67
|
+
data => keyExtractor(data) === keyExtractor(item)
|
|
68
|
+
) !== undefined
|
|
69
|
+
);
|
|
46
70
|
}
|
|
47
71
|
}, [checkedAll]);
|
|
48
72
|
|
|
@@ -59,7 +83,9 @@ const SelectItem = <Data, Type extends 'single' | 'multi'>({
|
|
|
59
83
|
[..._value, key].length === lenghtOptions && setCheckedAll(true);
|
|
60
84
|
} else {
|
|
61
85
|
const auxArray: Data[] = [..._value];
|
|
62
|
-
const indexToExclude = auxArray.
|
|
86
|
+
const indexToExclude = auxArray.findIndex(
|
|
87
|
+
data => keyExtractor(data) === keyExtractor(key)
|
|
88
|
+
);
|
|
63
89
|
auxArray.splice(indexToExclude, 1);
|
|
64
90
|
onSelect([...auxArray] as OnSelectArg);
|
|
65
91
|
setCheckedAll(false);
|
|
@@ -30,10 +30,12 @@ export const SelectContainer = styled('div')<Partial<StyleProps>>`
|
|
|
30
30
|
margin-right: ${({ theme }) => theme.spacing.deca};
|
|
31
31
|
`;
|
|
32
32
|
|
|
33
|
-
export const NavigationButton = nativeStyled(Button)<Partial<StyleProps>>`
|
|
34
|
-
padding: ${({ theme }) => theme.spacing.centi};
|
|
33
|
+
export const NavigationButton = nativeStyled(Button)<Partial<StyleProps>>`
|
|
35
34
|
border-radius: ${({ theme }) => theme.borderRadius.mili};
|
|
35
|
+
height: 44px;
|
|
36
36
|
justify-content: center;
|
|
37
|
+
padding: ${({ theme }) => theme.spacing.centi};
|
|
38
|
+
width: 44px;
|
|
37
39
|
`;
|
|
38
40
|
|
|
39
41
|
// Se o botão estiver ativo, renderizar outlined, caso contrario o botão é text
|
package/src/index.ts
CHANGED
|
@@ -40,5 +40,5 @@ export { Modal, ModalProps } from './components/atoms/Modal';
|
|
|
40
40
|
export { TextArea, TextAreaProps } from './components/molecules/TextArea';
|
|
41
41
|
export { Tooltip, ITooltip } from './components/atoms/Tooltip';
|
|
42
42
|
export * from './hooks';
|
|
43
|
-
export { DatePicker } from './components/molecules/DatePicker'
|
|
44
|
-
export { DateTimePicker } from './components/molecules/DateTimePicker'
|
|
43
|
+
export { DatePicker, WebDatePickerProps } from './components/molecules/DatePicker'
|
|
44
|
+
export { DateTimePicker, WebDateTimePickerProps } from './components/molecules/DateTimePicker'
|