@tecsinapse/react-web-kit 1.7.5 → 1.8.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.
- package/CHANGELOG.md +41 -0
- package/dist/components/atoms/Accordion/Accordion.d.ts +1 -1
- package/dist/components/atoms/Accordion/Accordion.js +3 -2
- package/dist/components/atoms/Accordion/Accordion.js.map +1 -1
- package/dist/components/atoms/Modal/Modal.d.ts +2 -3
- package/dist/components/atoms/Modal/Modal.js +6 -3
- package/dist/components/atoms/Modal/Modal.js.map +1 -1
- package/dist/components/atoms/Skeleton/Skeleton.d.ts +1 -1
- package/dist/components/atoms/Skeleton/Skeleton.js +6 -3
- package/dist/components/atoms/Skeleton/Skeleton.js.map +1 -1
- package/dist/components/molecules/Breadcrumbs/Breadcrumbs.d.ts +2 -2
- package/dist/components/molecules/Breadcrumbs/Breadcrumbs.js +3 -2
- package/dist/components/molecules/Breadcrumbs/Breadcrumbs.js.map +1 -1
- package/dist/components/molecules/Drawer/Drawer.d.ts +4 -3
- package/dist/components/molecules/Drawer/Drawer.js +10 -4
- package/dist/components/molecules/Drawer/Drawer.js.map +1 -1
- package/dist/components/molecules/Drawer/animations.d.ts +3 -12
- package/dist/components/molecules/Drawer/animations.js +1 -1
- package/dist/components/molecules/Drawer/animations.js.map +1 -1
- package/dist/components/molecules/Menubar/Menubar.d.ts +1 -1
- package/dist/components/molecules/Menubar/Menubar.js +7 -3
- package/dist/components/molecules/Menubar/Menubar.js.map +1 -1
- package/dist/components/molecules/Select/Dropdown/Dropdown.d.ts +1 -3
- package/dist/components/molecules/Select/Dropdown/Dropdown.js +6 -4
- package/dist/components/molecules/Select/Dropdown/Dropdown.js.map +1 -1
- package/dist/components/molecules/Select/Dropdown/styled.d.ts +1 -1
- package/dist/components/molecules/Select/Dropdown/styled.js +26 -10
- package/dist/components/molecules/Select/Dropdown/styled.js.map +1 -1
- package/dist/components/molecules/Select/Select.d.ts +7 -2
- package/dist/components/molecules/Select/Select.js +15 -8
- package/dist/components/molecules/Select/Select.js.map +1 -1
- package/dist/components/molecules/Select/SelectItem/SelectItem.js +1 -1
- package/dist/components/molecules/Select/SelectItem/SelectItem.js.map +1 -1
- package/dist/components/molecules/Select/animations.d.ts +42 -18
- package/dist/components/molecules/Select/animations.js +42 -18
- package/dist/components/molecules/Select/animations.js.map +1 -1
- package/dist/components/organisms/DataGrid/DataGrid.d.ts +3 -4
- package/dist/components/organisms/DataGrid/DataGrid.js +3 -5
- package/dist/components/organisms/DataGrid/DataGrid.js.map +1 -1
- package/package.json +4 -3
- package/src/components/atoms/Accordion/Accordion.tsx +3 -2
- package/src/components/atoms/Modal/Modal.tsx +10 -4
- package/src/components/atoms/Skeleton/Skeleton.tsx +3 -1
- package/src/components/molecules/Breadcrumbs/Breadcrumbs.tsx +3 -3
- package/src/components/molecules/Drawer/Drawer.tsx +13 -5
- package/src/components/molecules/Drawer/animations.ts +9 -3
- package/src/components/molecules/Menubar/Menubar.tsx +5 -7
- package/src/components/molecules/Select/Dropdown/Dropdown.tsx +10 -6
- package/src/components/molecules/Select/Dropdown/styled.ts +32 -13
- package/src/components/molecules/Select/Select.tsx +22 -6
- package/src/components/molecules/Select/SelectItem/SelectItem.tsx +1 -1
- package/src/components/molecules/Select/animations.ts +31 -7
- package/src/components/organisms/DataGrid/DataGrid.tsx +5 -6
|
@@ -3,14 +3,32 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.StyledContainerTextLabel = exports.StyledSpan = exports.StyledContainerCheckAll = exports.SearchBarContainer = exports.
|
|
6
|
+
exports.StyledContainerTextLabel = exports.StyledSpan = exports.StyledContainerCheckAll = exports.SearchBarContainer = exports.OptionsContainer = exports.StyledContainerDropdown = void 0;
|
|
7
7
|
|
|
8
8
|
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
9
9
|
|
|
10
10
|
var _reactCore = require("@tecsinapse/react-core");
|
|
11
11
|
|
|
12
|
+
var _react = require("@emotion/react");
|
|
13
|
+
|
|
12
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
15
|
|
|
16
|
+
const anchorBottom = ({
|
|
17
|
+
theme,
|
|
18
|
+
anchor
|
|
19
|
+
}) => anchor === 'bottom' && (0, _react.css)`
|
|
20
|
+
margin-top: ${theme.spacing.centi};
|
|
21
|
+
top: 100%;
|
|
22
|
+
`;
|
|
23
|
+
|
|
24
|
+
const anchorTop = ({
|
|
25
|
+
theme,
|
|
26
|
+
anchor
|
|
27
|
+
}) => anchor === 'top' && (0, _react.css)`
|
|
28
|
+
margin-bottom: ${theme.spacing.centi};
|
|
29
|
+
bottom: 100%;
|
|
30
|
+
`;
|
|
31
|
+
|
|
14
32
|
const StyledContainerDropdown = (0, _styled.default)('div')`
|
|
15
33
|
width: 100%;
|
|
16
34
|
background-color: ${({
|
|
@@ -19,14 +37,10 @@ const StyledContainerDropdown = (0, _styled.default)('div')`
|
|
|
19
37
|
border-radius: ${({
|
|
20
38
|
theme
|
|
21
39
|
}) => theme.borderRadius.mili};
|
|
22
|
-
box-shadow:
|
|
40
|
+
box-shadow: 0 2px 8px
|
|
23
41
|
${({
|
|
24
42
|
theme
|
|
25
43
|
}) => (0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.08)};
|
|
26
|
-
margin-top: ${({
|
|
27
|
-
theme
|
|
28
|
-
}) => theme.spacing.centi};
|
|
29
|
-
top: 100%;
|
|
30
44
|
position: absolute;
|
|
31
45
|
padding-top: ${({
|
|
32
46
|
theme,
|
|
@@ -38,14 +52,16 @@ const StyledContainerDropdown = (0, _styled.default)('div')`
|
|
|
38
52
|
z-index: ${({
|
|
39
53
|
theme
|
|
40
54
|
}) => theme.zIndex.select};
|
|
55
|
+
${anchorTop}
|
|
56
|
+
${anchorBottom}
|
|
41
57
|
`;
|
|
42
58
|
exports.StyledContainerDropdown = StyledContainerDropdown;
|
|
43
|
-
const
|
|
59
|
+
const OptionsContainer = (0, _styled.default)('div')`
|
|
44
60
|
max-height: 250px;
|
|
45
61
|
top: 100%;
|
|
46
62
|
overflow-y: ${({
|
|
47
|
-
|
|
48
|
-
}) =>
|
|
63
|
+
lengthOptions = 0
|
|
64
|
+
}) => lengthOptions > 5 ? 'scroll' : 'hidden'};
|
|
49
65
|
::-webkit-scrollbar {
|
|
50
66
|
width: 8px;
|
|
51
67
|
}
|
|
@@ -63,7 +79,7 @@ const StyledTest = (0, _styled.default)('div')`
|
|
|
63
79
|
}) => theme.color.primary.light};
|
|
64
80
|
},
|
|
65
81
|
`;
|
|
66
|
-
exports.
|
|
82
|
+
exports.OptionsContainer = OptionsContainer;
|
|
67
83
|
const SearchBarContainer = (0, _styled.default)('div')`
|
|
68
84
|
padding-left: ${({
|
|
69
85
|
theme
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/molecules/Select/Dropdown/styled.ts"],"names":["
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/molecules/Select/Dropdown/styled.ts"],"names":["anchorBottom","theme","anchor","spacing","centi","anchorTop","StyledContainerDropdown","miscellaneous","surfaceColor","borderRadius","mili","shadow","hideSearchBar","deca","zIndex","select","OptionsContainer","lengthOptions","color","secondary","light","primary","SearchBarContainer","StyledContainerCheckAll","xlight","medium","StyledSpan","StyledContainerTextLabel"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAMA,MAAMA,YAAY,GAAG,CAAC;AACpBC,EAAAA,KADoB;AAEpBC,EAAAA;AAFoB,CAAD,KAInBA,MAAM,KAAK,QAAX,IACA,eAAI;AACN,kBAAkBD,KAAK,CAACE,OAAN,CAAcC,KAAM;AACtC;AACA,GARA;;AAUA,MAAMC,SAAS,GAAG,CAAC;AACjBJ,EAAAA,KADiB;AAEjBC,EAAAA;AAFiB,CAAD,KAIhBA,MAAM,KAAK,KAAX,IACA,eAAI;AACN,qBAAqBD,KAAK,CAACE,OAAN,CAAcC,KAAM;AACzC;AACA,GARA;;AAUO,MAAME,uBAAuB,GAAG,qBAAO,KAAP,CAA6B;AACpE;AACA,sBAAsB,CAAC;AAAEL,EAAAA;AAAF,CAAD,KAClBA,KAAK,CAACM,aAAN,CAAoBC,YAAa;AACrC,mBAAmB,CAAC;AAAEP,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACQ,YAAN,CAAmBC,IAAK;AACtE;AACA,MAAM,CAAC;AAAET,EAAAA;AAAF,CAAD,KAA2B,yBAASA,KAAK,CAACM,aAAN,CAAoBI,MAA7B,EAAqC,IAArC,CAA2C;AAC5E;AACA,iBAAiB,CAAC;AACdV,EAAAA,KADc;AAEdW,EAAAA;AAFc,CAAD,KAIb,CAACA,aAAD,GAAkB,GAAEX,KAAK,CAACE,OAAN,CAAcU,IAAK,EAAvC,GAA2C,KAAM;AACrD,oBAAoB,CAAC;AAAEZ,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACE,OAAN,CAAcO,IAAK;AAClE,aAAa,CAAC;AAAET,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACa,MAAN,CAAaC,MAAO;AAC5D,IAAIV,SAAU;AACd,IAAIL,YAAa;AACjB,CAjBO;;AAmBA,MAAMgB,gBAAgB,GAAG,qBAAO,KAAP,CAA6B;AAC7D;AACA;AACA,gBAAgB,CAAC;AAAEC,EAAAA,aAAa,GAAG;AAAlB,CAAD,KACZA,aAAa,GAAG,CAAhB,GAAoB,QAApB,GAA+B,QAAS;AAC5C;AACA;AACA;AACA;AACA,qBAAqB,CAAC;AAAEhB,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACQ,YAAN,CAAmBL,KAAM;AACzE,wBAAwB,CAAC;AAAEH,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACiB,KAAN,CAAYC,SAAZ,CAAsBC,KAAM;AAC/E;AACA;AACA,wBAAwB,CAAC;AAAEnB,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACiB,KAAN,CAAYG,OAAZ,CAAoBD,KAAM;AAC7E;AACA,CAfO;;AAiBA,MAAME,kBAAkB,GAAG,qBAAO,KAAP,CAAmC;AACrE,kBAAkB,CAAC;AAAErB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACE,OAAN,CAAcO,IAAK;AACpD;AACA,CAHO;;AAKA,MAAMa,uBAAuB,GAAG,qBAAO,KAAP,CAAmC;AAC1E,aAAa,CAAC;AAAEtB,EAAAA;AAAF,CAAD,KAAgB,GAAEA,KAAK,CAACE,OAAN,CAAcO,IAAK,IAAGT,KAAK,CAACE,OAAN,CAAcU,IAAK,EAAE;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;AAAEZ,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACiB,KAAN,CAAYG,OAAZ,CAAoBG,MAAO;AAClE;AACA;AACA,aAAa,CAAC;AAAEvB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACiB,KAAN,CAAYG,OAAZ,CAAoBI,MAAO;AACvD;AACA,CAbO;;AAeA,MAAMC,UAAU,GAAG,qBAAO,MAAP,CAAoC;AAC9D,WAAW,CAAC;AAAEzB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACiB,KAAN,CAAYG,OAAZ,CAAoBI,MAAO;AACrD,aAAa,CAAC;AAAExB,EAAAA;AAAF,CAAD,KAAgB,GAAEA,KAAK,CAACE,OAAN,CAAcO,IAAK,MAAM;AACxD,CAHO;;AAKA,MAAMiB,wBAAwB,GAAG,qBAAO,KAAP,CAAmC;AAC3E,kBAAkB,CAAC;AAAE1B,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACE,OAAN,CAAcO,IAAK;AACpD;AACA;AACA;AACA,CALO","sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\nimport { SelectProps } from '../Select';\nimport { css } from '@emotion/react';\n\ntype InjectedProps = Partial<\n StyleProps & SelectProps<any, any> & { lengthOptions: number }\n>;\n\nconst anchorBottom = ({\n theme,\n anchor,\n}: StyleProps & Omit<InjectedProps, 'theme'>) =>\n anchor === 'bottom' &&\n css`\n margin-top: ${theme.spacing.centi};\n top: 100%;\n `;\n\nconst anchorTop = ({\n theme,\n anchor,\n}: StyleProps & Omit<InjectedProps, 'theme'>) =>\n anchor === 'top' &&\n css`\n margin-bottom: ${theme.spacing.centi};\n bottom: 100%;\n `;\n\nexport const StyledContainerDropdown = styled('div')<InjectedProps>`\n width: 100%;\n background-color: ${({ theme }: StyleProps) =>\n theme.miscellaneous.surfaceColor};\n border-radius: ${({ theme }: StyleProps) => theme.borderRadius.mili};\n box-shadow: 0 2px 8px\n ${({ theme }: StyleProps) => hex2rgba(theme.miscellaneous.shadow, 0.08)};\n position: absolute;\n padding-top: ${({\n theme,\n hideSearchBar,\n }: StyleProps & Partial<SelectProps<any, any>>) =>\n !hideSearchBar ? `${theme.spacing.deca}` : '0px'};\n padding-bottom: ${({ theme }: StyleProps) => theme.spacing.mili};\n z-index: ${({ theme }: StyleProps) => theme.zIndex.select};\n ${anchorTop}\n ${anchorBottom}\n`;\n\nexport const OptionsContainer = styled('div')<InjectedProps>`\n max-height: 250px;\n top: 100%;\n overflow-y: ${({ lengthOptions = 0 }: InjectedProps) =>\n lengthOptions > 5 ? 'scroll' : 'hidden'};\n ::-webkit-scrollbar {\n width: 8px;\n }\n ::-webkit-scrollbar-thumb {\n border-radius: ${({ theme }: StyleProps) => theme.borderRadius.centi};\n background-color: ${({ theme }: StyleProps) => theme.color.secondary.light};\n }\n ::-webkit-scrollbar-thumb:hover {\n background-color: ${({ theme }: StyleProps) => theme.color.primary.light};\n },\n`;\n\nexport const SearchBarContainer = styled('div')<Partial<StyleProps>>`\n padding-left: ${({ theme }) => theme.spacing.mili};\n width: 100%;\n`;\n\nexport const StyledContainerCheckAll = styled('div')<Partial<StyleProps>>`\n padding: ${({ theme }) => `${theme.spacing.mili} ${theme.spacing.deca}`};\n flex-direction: row;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n &:hover {\n background-color: ${({ theme }) => theme.color.primary.xlight};\n }\n &:hover span {\n color: ${({ theme }) => theme.color.primary.medium};\n }\n`;\n\nexport const StyledSpan = styled('span')<Partial<StyleProps>>`\n color: ${({ theme }) => theme.color.primary.medium};\n padding: ${({ theme }) => `${theme.spacing.mili} 0px`};\n`;\n\nexport const StyledContainerTextLabel = styled('div')<Partial<StyleProps>>`\n padding-left: ${({ theme }) => theme.spacing.mili};\n width: 100%;\n display: flex;\n overflow: hidden;\n`;\n"],"file":"styled.js"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { TextProps } from '@tecsinapse/react-core';
|
|
3
|
+
export interface SelectProps<Data, Type extends 'single' | 'multi'> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
|
|
2
4
|
options: Data[];
|
|
3
5
|
onSelect: (option: Type extends 'single' ? Data | undefined : Data[]) => never | void;
|
|
4
6
|
value: Type extends 'single' ? Data | undefined : Data[];
|
|
@@ -9,7 +11,10 @@ export interface SelectProps<Data, Type extends 'single' | 'multi'> {
|
|
|
9
11
|
onSearch?: (searchArg: string) => void | never;
|
|
10
12
|
searchBarPlaceholder?: string;
|
|
11
13
|
hideSearchBar?: boolean;
|
|
14
|
+
disabled?: boolean;
|
|
12
15
|
label?: string;
|
|
16
|
+
anchor?: 'top' | 'bottom';
|
|
17
|
+
displayTextProps?: TextProps;
|
|
13
18
|
}
|
|
14
|
-
export declare const Select: <Data, Type extends "single" | "multi">({ value, options, keyExtractor, onSelect, type, labelExtractor, placeholder, onSearch, hideSearchBar, label, ...rest }: SelectProps<Data, Type>) => JSX.Element;
|
|
19
|
+
export declare const Select: <Data, Type extends "single" | "multi">({ value, options, keyExtractor, onSelect, type, labelExtractor, placeholder, onSearch, searchBarPlaceholder, hideSearchBar, label, disabled, anchor, displayTextProps, ...rest }: SelectProps<Data, Type>) => JSX.Element;
|
|
15
20
|
export default Select;
|
|
@@ -34,8 +34,12 @@ const Select = ({
|
|
|
34
34
|
labelExtractor,
|
|
35
35
|
placeholder,
|
|
36
36
|
onSearch,
|
|
37
|
+
searchBarPlaceholder,
|
|
37
38
|
hideSearchBar = true,
|
|
38
39
|
label,
|
|
40
|
+
disabled = false,
|
|
41
|
+
anchor = 'bottom',
|
|
42
|
+
displayTextProps,
|
|
39
43
|
...rest
|
|
40
44
|
}) => {
|
|
41
45
|
const [dropDownVisible, setDropDownVisible] = _react.default.useState(false);
|
|
@@ -44,12 +48,12 @@ const Select = ({
|
|
|
44
48
|
|
|
45
49
|
(0, _hooks.useClickAwayListener)(refDropDown, setDropDownVisible);
|
|
46
50
|
const displayValue = (0, _functions.getDisplayValue)(type, value, options, placeholder, keyExtractor, labelExtractor);
|
|
47
|
-
return _react.default.createElement(_styled.StyledContainer, {
|
|
51
|
+
return _react.default.createElement(_styled.StyledContainer, _extends({
|
|
48
52
|
ref: refDropDown
|
|
49
|
-
}, _react.default.createElement(_styled.StyledInputContainer, null, _react.default.createElement(_reactCore.PressableInputContainer,
|
|
50
|
-
label: label
|
|
51
|
-
}, rest, {
|
|
53
|
+
}, rest), _react.default.createElement(_styled.StyledInputContainer, null, _react.default.createElement(_reactCore.PressableInputContainer, {
|
|
54
|
+
label: label,
|
|
52
55
|
onPress: () => setDropDownVisible(!dropDownVisible),
|
|
56
|
+
disabled: disabled,
|
|
53
57
|
rightComponent: _react.default.createElement(_reactCore.Icon, {
|
|
54
58
|
name: "chevron-down",
|
|
55
59
|
type: "material-community",
|
|
@@ -58,10 +62,10 @@ const Select = ({
|
|
|
58
62
|
marginRight: 12
|
|
59
63
|
}
|
|
60
64
|
})
|
|
61
|
-
}
|
|
65
|
+
}, _react.default.createElement(_reactCore.Text, _extends({}, displayTextProps, {
|
|
62
66
|
ellipsizeMode: "tail",
|
|
63
67
|
numberOfLines: 1
|
|
64
|
-
}, displayValue))), _react.default.createElement(_reactTransitionGroup.Transition, {
|
|
68
|
+
}), displayValue))), _react.default.createElement(_reactTransitionGroup.Transition, {
|
|
65
69
|
in: dropDownVisible,
|
|
66
70
|
timeout: 300
|
|
67
71
|
}, state => _react.default.createElement(_Dropdown.Dropdown, {
|
|
@@ -72,10 +76,13 @@ const Select = ({
|
|
|
72
76
|
keyExtractor: keyExtractor,
|
|
73
77
|
labelExtractor: labelExtractor,
|
|
74
78
|
hideSearchBar: hideSearchBar,
|
|
79
|
+
searchBarPlaceholder: searchBarPlaceholder,
|
|
80
|
+
onSearch: onSearch,
|
|
75
81
|
style: { ..._animations.defaultStyles,
|
|
76
|
-
..._animations.transition[state]
|
|
82
|
+
..._animations.transition[anchor][state]
|
|
77
83
|
},
|
|
78
|
-
setDropDownVisible: setDropDownVisible
|
|
84
|
+
setDropDownVisible: setDropDownVisible,
|
|
85
|
+
anchor: anchor
|
|
79
86
|
})));
|
|
80
87
|
};
|
|
81
88
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/molecules/Select/Select.tsx"],"names":["Select","value","options","keyExtractor","onSelect","type","labelExtractor","placeholder","onSearch","hideSearchBar","label","rest","dropDownVisible","setDropDownVisible","React","useState","refDropDown","useRef","displayValue","marginRight","state","defaultStyles","transition"],"mappings":";;;;;;;AAAA;;AACA;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/molecules/Select/Select.tsx"],"names":["Select","value","options","keyExtractor","onSelect","type","labelExtractor","placeholder","onSearch","searchBarPlaceholder","hideSearchBar","label","disabled","anchor","displayTextProps","rest","dropDownVisible","setDropDownVisible","React","useState","refDropDown","useRef","displayValue","marginRight","state","defaultStyles","transition"],"mappings":";;;;;;;AAAA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAsBO,MAAMA,MAAM,GAAG,CAAwC;AAC5DC,EAAAA,KAD4D;AAE5DC,EAAAA,OAF4D;AAG5DC,EAAAA,YAH4D;AAI5DC,EAAAA,QAJ4D;AAK5DC,EAAAA,IAL4D;AAM5DC,EAAAA,cAN4D;AAO5DC,EAAAA,WAP4D;AAQ5DC,EAAAA,QAR4D;AAS5DC,EAAAA,oBAT4D;AAU5DC,EAAAA,aAAa,GAAG,IAV4C;AAW5DC,EAAAA,KAX4D;AAY5DC,EAAAA,QAAQ,GAAG,KAZiD;AAa5DC,EAAAA,MAAM,GAAG,QAbmD;AAc5DC,EAAAA,gBAd4D;AAe5D,KAAGC;AAfyD,CAAxC,KAgBsB;AAC1C,QAAM,CAACC,eAAD,EAAkBC,kBAAlB,IAAwCC,eAAMC,QAAN,CAAwB,KAAxB,CAA9C;;AACA,QAAMC,WAAW,GAAGF,eAAMG,MAAN,CAAa,IAAb,CAApB;;AACA,mCAAqBD,WAArB,EAAkCH,kBAAlC;AAEA,QAAMK,YAAY,GAAG,gCACnBjB,IADmB,EAEnBJ,KAFmB,EAGnBC,OAHmB,EAInBK,WAJmB,EAKnBJ,YALmB,EAMnBG,cANmB,CAArB;AASA,SACE,6BAAC,uBAAD;AAAiB,IAAA,GAAG,EAAEc;AAAtB,KAAuCL,IAAvC,GACE,6BAAC,4BAAD,QACE,6BAAC,kCAAD;AACE,IAAA,KAAK,EAAEJ,KADT;AAEE,IAAA,OAAO,EAAE,MAAMM,kBAAkB,CAAC,CAACD,eAAF,CAFnC;AAGE,IAAA,QAAQ,EAAEJ,QAHZ;AAIE,IAAA,cAAc,EACZ,6BAAC,eAAD;AACE,MAAA,IAAI,EAAC,cADP;AAEE,MAAA,IAAI,EAAC,oBAFP;AAGE,MAAA,IAAI,EAAC,OAHP;AAIE,MAAA,KAAK,EAAE;AAAEW,QAAAA,WAAW,EAAE;AAAf;AAJT;AALJ,KAaE,6BAAC,eAAD,eAAUT,gBAAV;AAA4B,IAAA,aAAa,EAAC,MAA1C;AAAiD,IAAA,aAAa,EAAE;AAAhE,MACGQ,YADH,CAbF,CADF,CADF,EAoBE,6BAAC,gCAAD;AAAY,IAAA,EAAE,EAAEN,eAAhB;AAAiC,IAAA,OAAO,EAAE;AAA1C,KACGQ,KAAK,IACJ,6BAAC,kBAAD;AACE,IAAA,OAAO,EAAEtB,OADX;AAEE,IAAA,QAAQ,EAAEE,QAFZ;AAGE,IAAA,KAAK,EAAEH,KAHT;AAIE,IAAA,IAAI,EAAEI,IAJR;AAKE,IAAA,YAAY,EAAEF,YALhB;AAME,IAAA,cAAc,EAAEG,cANlB;AAOE,IAAA,aAAa,EAAEI,aAPjB;AAQE,IAAA,oBAAoB,EAAED,oBARxB;AASE,IAAA,QAAQ,EAAED,QATZ;AAUE,IAAA,KAAK,EAAE,EAAE,GAAGiB,yBAAL;AAAoB,SAAGC,uBAAWb,MAAX,EAAmBW,KAAnB;AAAvB,KAVT;AAWE,IAAA,kBAAkB,EAAEP,kBAXtB;AAYE,IAAA,MAAM,EAAEJ;AAZV,IAFJ,CApBF,CADF;AAyCD,CAvEM;;;eAyEQb,M","sourcesContent":["import React from 'react';\nimport {\n Icon,\n PressableInputContainer,\n Text,\n TextProps,\n} from '@tecsinapse/react-core';\nimport { useClickAwayListener } from '../../../hooks';\nimport { StyledContainer, StyledInputContainer } from './styled';\nimport { Dropdown } from './Dropdown';\nimport { getDisplayValue } from './functions';\nimport { Transition } from 'react-transition-group';\nimport { defaultStyles, transition } from './animations';\n\nexport interface SelectProps<Data, Type extends 'single' | 'multi'>\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n options: Data[];\n onSelect: (\n option: Type extends 'single' ? Data | undefined : Data[]\n ) => never | void;\n value: Type extends 'single' ? Data | undefined : Data[];\n type: Type;\n keyExtractor: (t: Data, index?: number) => string;\n labelExtractor: (t: Data) => string;\n placeholder?: string;\n onSearch?: (searchArg: string) => void | never;\n searchBarPlaceholder?: string;\n hideSearchBar?: boolean;\n disabled?: boolean;\n label?: string;\n anchor?: 'top' | 'bottom';\n displayTextProps?: TextProps;\n}\n\nexport const Select = <Data, Type extends 'single' | 'multi'>({\n value,\n options,\n keyExtractor,\n onSelect,\n type,\n labelExtractor,\n placeholder,\n onSearch,\n searchBarPlaceholder,\n hideSearchBar = true,\n label,\n disabled = false,\n anchor = 'bottom',\n displayTextProps,\n ...rest\n}: SelectProps<Data, Type>): JSX.Element => {\n const [dropDownVisible, setDropDownVisible] = React.useState<boolean>(false);\n const refDropDown = React.useRef(null);\n useClickAwayListener(refDropDown, setDropDownVisible);\n\n const displayValue = getDisplayValue<Data>(\n type,\n value,\n options,\n placeholder,\n keyExtractor,\n labelExtractor\n );\n\n return (\n <StyledContainer ref={refDropDown} {...rest}>\n <StyledInputContainer>\n <PressableInputContainer\n label={label}\n onPress={() => setDropDownVisible(!dropDownVisible)}\n disabled={disabled}\n rightComponent={\n <Icon\n name=\"chevron-down\"\n type=\"material-community\"\n size=\"centi\"\n style={{ marginRight: 12 }}\n />\n }\n >\n <Text {...displayTextProps} ellipsizeMode=\"tail\" numberOfLines={1}>\n {displayValue}\n </Text>\n </PressableInputContainer>\n </StyledInputContainer>\n <Transition in={dropDownVisible} timeout={300}>\n {state => (\n <Dropdown\n options={options}\n onSelect={onSelect}\n value={value}\n type={type}\n keyExtractor={keyExtractor}\n labelExtractor={labelExtractor}\n hideSearchBar={hideSearchBar}\n searchBarPlaceholder={searchBarPlaceholder}\n onSearch={onSearch}\n style={{ ...defaultStyles, ...transition[anchor][state] }}\n setDropDownVisible={setDropDownVisible}\n anchor={anchor}\n />\n )}\n </Transition>\n </StyledContainer>\n );\n};\n\nexport default Select;\n"],"file":"Select.js"}
|
|
@@ -45,7 +45,7 @@ const SelectItem = ({
|
|
|
45
45
|
onSelect([...value, key]);
|
|
46
46
|
[...value, key].length === lenghtOptions && setCheckedAll(true);
|
|
47
47
|
} else {
|
|
48
|
-
const auxArray = value;
|
|
48
|
+
const auxArray = [...value];
|
|
49
49
|
const indexToExclude = auxArray.indexOf(key);
|
|
50
50
|
auxArray.splice(indexToExclude, 1);
|
|
51
51
|
onSelect([...auxArray]);
|
|
@@ -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","includes","useEffect","clickItem","key","Array","isArray","auxChecked","length","auxArray","indexToExclude","indexOf","splice"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAkBA,MAAMA,UAAU,GAAG,CAAwC;AACzDC,EAAAA,IADyD;AAEzDC,EAAAA,QAFyD;AAGzDC,EAAAA,IAHyD;AAIzDC,EAAAA,KAJyD;AAKzDC,EAAAA,cALyD;AAMzDC,EAAAA,kBANyD;AAOzDC,EAAAA,UAPyD;AAQzDC,EAAAA,aARyD;AASzDC,EAAAA;AATyD,CAAxC,KAeA;AACjB,QAAMC,OAAO,GAAGP,IAAI,KAAK,OAAzB;;AACA,QAAM,CAACQ,OAAD,EAAUC,UAAV,IAAwBC,eAAMC,QAAN,CAC5BV,KAAK,KAAKW,SAAV,IAAuBZ,IAAI,KAAK,OAAhC,IAA4CC,KAAD,CAAkBY,QAAlB,CAA2Bf,IAA3B,CADf,CAA9B;;AAGAY,iBAAMI,SAAN,CAAgB,MAAM;AACpB,QAAId,IAAI,KAAK,OAAb,EAAsB;AACpBI,MAAAA,UAAU,GACNK,UAAU,CAAC,IAAD,CADJ,GAENA,UAAU,CAAER,KAAD,CAAkBY,QAAlB,CAA2Bf,IAA3B,CAAD,CAFd;AAGD;AACF,GAND,EAMG,CAACM,UAAD,CANH;;AAQA,QAAMW,SAAS,GAAGjB,IAAI,IAAI;AAGxB,UAAMkB,GAAS,GAAGlB,IAAlB;;AACA,QAAImB,KAAK,CAACC,OAAN,CAAcjB,KAAd,CAAJ,EAA0B;AACxB,YAAMkB,UAAU,GAAG,CAACX,OAApB;AACAC,MAAAA,UAAU,CAAC,CAACD,OAAF,CAAV;;AACA,UAAIW,UAAJ,EAAgB;AACdpB,QAAAA,QAAQ,CAAC,CAAC,GAAGE,KAAJ,EAAWe,GAAX,CAAD,CAAR;AACA,SAAC,GAAGf,KAAJ,EAAWe,GAAX,EAAgBI,MAAhB,KAA2Bd,aAA3B,IAA4CD,aAAa,CAAC,IAAD,CAAzD;AACD,OAHD,MAGO;AACL,cAAMgB,QAAgB,GAAGpB,
|
|
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","includes","useEffect","clickItem","key","Array","isArray","auxChecked","length","auxArray","indexToExclude","indexOf","splice"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAkBA,MAAMA,UAAU,GAAG,CAAwC;AACzDC,EAAAA,IADyD;AAEzDC,EAAAA,QAFyD;AAGzDC,EAAAA,IAHyD;AAIzDC,EAAAA,KAJyD;AAKzDC,EAAAA,cALyD;AAMzDC,EAAAA,kBANyD;AAOzDC,EAAAA,UAPyD;AAQzDC,EAAAA,aARyD;AASzDC,EAAAA;AATyD,CAAxC,KAeA;AACjB,QAAMC,OAAO,GAAGP,IAAI,KAAK,OAAzB;;AACA,QAAM,CAACQ,OAAD,EAAUC,UAAV,IAAwBC,eAAMC,QAAN,CAC5BV,KAAK,KAAKW,SAAV,IAAuBZ,IAAI,KAAK,OAAhC,IAA4CC,KAAD,CAAkBY,QAAlB,CAA2Bf,IAA3B,CADf,CAA9B;;AAGAY,iBAAMI,SAAN,CAAgB,MAAM;AACpB,QAAId,IAAI,KAAK,OAAb,EAAsB;AACpBI,MAAAA,UAAU,GACNK,UAAU,CAAC,IAAD,CADJ,GAENA,UAAU,CAAER,KAAD,CAAkBY,QAAlB,CAA2Bf,IAA3B,CAAD,CAFd;AAGD;AACF,GAND,EAMG,CAACM,UAAD,CANH;;AAQA,QAAMW,SAAS,GAAGjB,IAAI,IAAI;AAGxB,UAAMkB,GAAS,GAAGlB,IAAlB;;AACA,QAAImB,KAAK,CAACC,OAAN,CAAcjB,KAAd,CAAJ,EAA0B;AACxB,YAAMkB,UAAU,GAAG,CAACX,OAApB;AACAC,MAAAA,UAAU,CAAC,CAACD,OAAF,CAAV;;AACA,UAAIW,UAAJ,EAAgB;AACdpB,QAAAA,QAAQ,CAAC,CAAC,GAAGE,KAAJ,EAAWe,GAAX,CAAD,CAAR;AACA,SAAC,GAAGf,KAAJ,EAAWe,GAAX,EAAgBI,MAAhB,KAA2Bd,aAA3B,IAA4CD,aAAa,CAAC,IAAD,CAAzD;AACD,OAHD,MAGO;AACL,cAAMgB,QAAgB,GAAG,CAAC,GAAGpB,KAAJ,CAAzB;AACA,cAAMqB,cAAc,GAAGD,QAAQ,CAACE,OAAT,CAAiBP,GAAjB,CAAvB;AACAK,QAAAA,QAAQ,CAACG,MAAT,CAAgBF,cAAhB,EAAgC,CAAhC;AACAvB,QAAAA,QAAQ,CAAC,CAAC,GAAGsB,QAAJ,CAAD,CAAR;AACAhB,QAAAA,aAAa,CAAC,KAAD,CAAb;AACD;AACF,KAbD,MAaO;AACLN,MAAAA,QAAQ,CAACiB,GAAD,CAAR;AACAb,MAAAA,kBAAkB,CAAC,KAAD,CAAlB;AACD;AACF,GArBD;;AAuBA,SACE,6BAAC,2BAAD;AAAqB,IAAA,OAAO,EAAE,MAAMY,SAAS,CAACjB,IAAD;AAA7C,KACGS,OAAO,IACN,6BAAC,mBAAD;AAAU,IAAA,OAAO,EAAEC,OAAnB;AAA4B,IAAA,QAAQ,EAAE,MAAMO,SAAS,CAACjB,IAAD;AAArD,IAFJ,EAIE,6BAAC,gCAAD,QACE,6BAAC,eAAD;AAAM,IAAA,UAAU,EAAC,MAAjB;AAAwB,IAAA,aAAa,EAAC,MAAtC;AAA6C,IAAA,aAAa,EAAE;AAA5D,KACE,6BAAC,kBAAD;AAAY,IAAA,cAAc,EAAEE,IAAI,KAAK,QAAT,IAAqBC,KAAK,KAAKH;AAA3D,KACGI,cAAc,CAACJ,IAAD,CADjB,CADF,CADF,CAJF,CADF;AAcD,CAjED;;eAmEeD,U","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}: 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 && type === 'multi' && (value as Data[]).includes(item)\n );\n React.useEffect(() => {\n if (type === 'multi') {\n checkedAll\n ? setChecked(true)\n : setChecked((value as Data[]).includes(item));\n }\n }, [checkedAll]);\n\n const clickItem = item => {\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.indexOf(key);\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\n return (\n <ContainerItemSelect onClick={() => clickItem(item)}>\n {isMulti && (\n <Checkbox checked={checked} onChange={() => clickItem(item)} />\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 SelectItem;\n"],"file":"SelectItem.js"}
|
|
@@ -4,24 +4,48 @@ export declare const defaultStyles: {
|
|
|
4
4
|
visibility: string;
|
|
5
5
|
};
|
|
6
6
|
export declare const transition: {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
bottom: {
|
|
8
|
+
entering: {
|
|
9
|
+
transform: string;
|
|
10
|
+
opacity: number;
|
|
11
|
+
visibility: string;
|
|
12
|
+
};
|
|
13
|
+
entered: {
|
|
14
|
+
transform: string;
|
|
15
|
+
opacity: number;
|
|
16
|
+
visibility: string;
|
|
17
|
+
};
|
|
18
|
+
exiting: {
|
|
19
|
+
transform: string;
|
|
20
|
+
opacity: number;
|
|
21
|
+
visibility: string;
|
|
22
|
+
};
|
|
23
|
+
exited: {
|
|
24
|
+
transform: string;
|
|
25
|
+
opacity: number;
|
|
26
|
+
visibility: string;
|
|
27
|
+
};
|
|
11
28
|
};
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
29
|
+
top: {
|
|
30
|
+
entering: {
|
|
31
|
+
transform: string;
|
|
32
|
+
opacity: number;
|
|
33
|
+
visibility: string;
|
|
34
|
+
};
|
|
35
|
+
entered: {
|
|
36
|
+
transform: string;
|
|
37
|
+
opacity: number;
|
|
38
|
+
visibility: string;
|
|
39
|
+
};
|
|
40
|
+
exiting: {
|
|
41
|
+
transform: string;
|
|
42
|
+
opacity: number;
|
|
43
|
+
visibility: string;
|
|
44
|
+
};
|
|
45
|
+
exited: {
|
|
46
|
+
transform: string;
|
|
47
|
+
opacity: number;
|
|
48
|
+
visibility: string;
|
|
49
|
+
};
|
|
26
50
|
};
|
|
27
51
|
};
|
|
@@ -11,25 +11,49 @@ const defaultStyles = {
|
|
|
11
11
|
};
|
|
12
12
|
exports.defaultStyles = defaultStyles;
|
|
13
13
|
const transition = {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
bottom: {
|
|
15
|
+
entering: {
|
|
16
|
+
transform: 'translateY(-10%)',
|
|
17
|
+
opacity: 0,
|
|
18
|
+
visibility: 'hidden'
|
|
19
|
+
},
|
|
20
|
+
entered: {
|
|
21
|
+
transform: 'translateY(0%)',
|
|
22
|
+
opacity: 1,
|
|
23
|
+
visibility: 'visible'
|
|
24
|
+
},
|
|
25
|
+
exiting: {
|
|
26
|
+
transform: 'translateY(0%)',
|
|
27
|
+
opacity: 1,
|
|
28
|
+
visibility: 'visible'
|
|
29
|
+
},
|
|
30
|
+
exited: {
|
|
31
|
+
transform: 'translateY(-10%)',
|
|
32
|
+
opacity: 0,
|
|
33
|
+
visibility: 'hidden'
|
|
34
|
+
}
|
|
18
35
|
},
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
36
|
+
top: {
|
|
37
|
+
entering: {
|
|
38
|
+
transform: 'translateY(10%)',
|
|
39
|
+
opacity: 0,
|
|
40
|
+
visibility: 'hidden'
|
|
41
|
+
},
|
|
42
|
+
entered: {
|
|
43
|
+
transform: 'translateY(0%)',
|
|
44
|
+
opacity: 1,
|
|
45
|
+
visibility: 'visible'
|
|
46
|
+
},
|
|
47
|
+
exiting: {
|
|
48
|
+
transform: 'translateY(0%)',
|
|
49
|
+
opacity: 1,
|
|
50
|
+
visibility: 'visible'
|
|
51
|
+
},
|
|
52
|
+
exited: {
|
|
53
|
+
transform: 'translateY(10%)',
|
|
54
|
+
opacity: 0,
|
|
55
|
+
visibility: 'hidden'
|
|
56
|
+
}
|
|
33
57
|
}
|
|
34
58
|
};
|
|
35
59
|
exports.transition = transition;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/molecules/Select/animations.ts"],"names":["defaultStyles","transition","overflow","visibility","entering","transform","opacity","entered","exiting","exited"],"mappings":";;;;;;AAAO,MAAMA,aAAa,GAAG;AAC3BC,EAAAA,UAAU,EAAE,CACV,sFADU,CADe;AAI3BC,EAAAA,QAAQ,EAAE,QAJiB;AAK3BC,EAAAA,UAAU,EAAE;AALe,CAAtB;;AAQA,MAAMF,UAAU,GAAG;AACxBG,EAAAA,QAAQ,EAAE;AACRC,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/molecules/Select/animations.ts"],"names":["defaultStyles","transition","overflow","visibility","bottom","entering","transform","opacity","entered","exiting","exited","top"],"mappings":";;;;;;AAAO,MAAMA,aAAa,GAAG;AAC3BC,EAAAA,UAAU,EAAE,CACV,sFADU,CADe;AAI3BC,EAAAA,QAAQ,EAAE,QAJiB;AAK3BC,EAAAA,UAAU,EAAE;AALe,CAAtB;;AAQA,MAAMF,UAAU,GAAG;AACxBG,EAAAA,MAAM,EAAE;AACNC,IAAAA,QAAQ,EAAE;AACRC,MAAAA,SAAS,EAAE,kBADH;AAERC,MAAAA,OAAO,EAAE,CAFD;AAGRJ,MAAAA,UAAU,EAAE;AAHJ,KADJ;AAMNK,IAAAA,OAAO,EAAE;AACPF,MAAAA,SAAS,EAAE,gBADJ;AAEPC,MAAAA,OAAO,EAAE,CAFF;AAGPJ,MAAAA,UAAU,EAAE;AAHL,KANH;AAWNM,IAAAA,OAAO,EAAE;AACPH,MAAAA,SAAS,EAAE,gBADJ;AAEPC,MAAAA,OAAO,EAAE,CAFF;AAGPJ,MAAAA,UAAU,EAAE;AAHL,KAXH;AAgBNO,IAAAA,MAAM,EAAE;AACNJ,MAAAA,SAAS,EAAE,kBADL;AAENC,MAAAA,OAAO,EAAE,CAFH;AAGNJ,MAAAA,UAAU,EAAE;AAHN;AAhBF,GADgB;AAuBxBQ,EAAAA,GAAG,EAAE;AACHN,IAAAA,QAAQ,EAAE;AACRC,MAAAA,SAAS,EAAE,iBADH;AAERC,MAAAA,OAAO,EAAE,CAFD;AAGRJ,MAAAA,UAAU,EAAE;AAHJ,KADP;AAMHK,IAAAA,OAAO,EAAE;AAAEF,MAAAA,SAAS,EAAE,gBAAb;AAA+BC,MAAAA,OAAO,EAAE,CAAxC;AAA2CJ,MAAAA,UAAU,EAAE;AAAvD,KANN;AAOHM,IAAAA,OAAO,EAAE;AAAEH,MAAAA,SAAS,EAAE,gBAAb;AAA+BC,MAAAA,OAAO,EAAE,CAAxC;AAA2CJ,MAAAA,UAAU,EAAE;AAAvD,KAPN;AAQHO,IAAAA,MAAM,EAAE;AAAEJ,MAAAA,SAAS,EAAE,iBAAb;AAAgCC,MAAAA,OAAO,EAAE,CAAzC;AAA4CJ,MAAAA,UAAU,EAAE;AAAxD;AARL;AAvBmB,CAAnB","sourcesContent":["export const defaultStyles = {\n transition: [\n 'transform 200ms ease-in-out, opacity 200ms ease-in-out, visibility 200ms ease-in-out',\n ],\n overflow: 'hidden',\n visibility: 'hidden',\n};\n\nexport const transition = {\n bottom: {\n entering: {\n transform: 'translateY(-10%)',\n opacity: 0,\n visibility: 'hidden',\n },\n entered: {\n transform: 'translateY(0%)',\n opacity: 1,\n visibility: 'visible',\n },\n exiting: {\n transform: 'translateY(0%)',\n opacity: 1,\n visibility: 'visible',\n },\n exited: {\n transform: 'translateY(-10%)',\n opacity: 0,\n visibility: 'hidden',\n },\n },\n top: {\n entering: {\n transform: 'translateY(10%)',\n opacity: 0,\n visibility: 'hidden',\n },\n entered: { transform: 'translateY(0%)', opacity: 1, visibility: 'visible' },\n exiting: { transform: 'translateY(0%)', opacity: 1, visibility: 'visible' },\n exited: { transform: 'translateY(10%)', opacity: 0, visibility: 'hidden' },\n },\n};\n"],"file":"animations.js"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { HeadersType } from './types';
|
|
3
|
-
export interface DataGridProps<Data> {
|
|
3
|
+
export interface DataGridProps<Data> extends React.HTMLAttributes<HTMLDivElement> {
|
|
4
4
|
headers: HeadersType<Data>[];
|
|
5
5
|
data: Data[];
|
|
6
6
|
rowKeyExtractor: (data: Data) => string;
|
|
@@ -22,8 +22,7 @@ export interface DataGridProps<Data> {
|
|
|
22
22
|
onPageChange?: (page: number) => void;
|
|
23
23
|
loading?: boolean;
|
|
24
24
|
skeletonComponent?: React.ReactNode;
|
|
25
|
-
style?: CSSProperties;
|
|
26
25
|
emptyPlaceholder?: React.ReactNode;
|
|
27
26
|
}
|
|
28
|
-
declare const DataGrid: <Data extends unknown>({ headers, data, rowKeyExtractor, toolbarTitle, toolbarFooter, toolbarRightIcons, selectable, selectedRows, onSelectedRows, pagination, rowsPerPage, onRowsPerPageChange, rowsPerPageOptions: _rowsPerPageOptions, rowsPerPageLabel: _rowsPerPageLabel, exportLabel, exportFunction, rowsCount, page, onPageChange, loading, skeletonComponent,
|
|
27
|
+
declare const DataGrid: <Data extends unknown>({ headers, data, rowKeyExtractor, toolbarTitle, toolbarFooter, toolbarRightIcons, selectable, selectedRows, onSelectedRows, pagination, rowsPerPage, onRowsPerPageChange, rowsPerPageOptions: _rowsPerPageOptions, rowsPerPageLabel: _rowsPerPageLabel, exportLabel, exportFunction, rowsCount, page, onPageChange, loading, skeletonComponent, emptyPlaceholder, ...rest }: DataGridProps<Data>) => JSX.Element;
|
|
29
28
|
export default DataGrid;
|
|
@@ -43,8 +43,8 @@ const DataGrid = ({
|
|
|
43
43
|
onPageChange,
|
|
44
44
|
loading = false,
|
|
45
45
|
skeletonComponent,
|
|
46
|
-
|
|
47
|
-
|
|
46
|
+
emptyPlaceholder,
|
|
47
|
+
...rest
|
|
48
48
|
}) => {
|
|
49
49
|
if (selectable && (!selectedRows || !onSelectedRows)) {
|
|
50
50
|
throw new Error('[DataGrid] You should specify selection handlers (selectedRows, onSelectedRows)');
|
|
@@ -66,9 +66,7 @@ const DataGrid = ({
|
|
|
66
66
|
});
|
|
67
67
|
}, [onSelectedRows, rowKeyExtractor]);
|
|
68
68
|
|
|
69
|
-
return _react.default.createElement(_Table.TableContainer, {
|
|
70
|
-
style: style
|
|
71
|
-
}, _react.default.createElement(_Table.TableToolbar, {
|
|
69
|
+
return _react.default.createElement(_Table.TableContainer, rest, _react.default.createElement(_Table.TableToolbar, {
|
|
72
70
|
title: toolbarTitle,
|
|
73
71
|
rightIcons: toolbarRightIcons,
|
|
74
72
|
footer: toolbarFooter
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/organisms/DataGrid/DataGrid.tsx"],"names":["DataGrid","headers","data","rowKeyExtractor","toolbarTitle","toolbarFooter","toolbarRightIcons","selectable","selectedRows","onSelectedRows","pagination","rowsPerPage","onRowsPerPageChange","rowsPerPageOptions","_rowsPerPageOptions","rowsPerPageLabel","_rowsPerPageLabel","exportLabel","exportFunction","rowsCount","page","onPageChange","loading","skeletonComponent","
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/organisms/DataGrid/DataGrid.tsx"],"names":["DataGrid","headers","data","rowKeyExtractor","toolbarTitle","toolbarFooter","toolbarRightIcons","selectable","selectedRows","onSelectedRows","pagination","rowsPerPage","onRowsPerPageChange","rowsPerPageOptions","_rowsPerPageOptions","rowsPerPageLabel","_rowsPerPageLabel","exportLabel","exportFunction","rowsCount","page","onPageChange","loading","skeletonComponent","emptyPlaceholder","rest","Error","React","useCallback","value","useMemo","handleSelect","current","checked","prevState","idx","findIndex","el","length","map","item","some","sel","Array","keys","padding","width"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n Table,\n TableToolbar,\n TableContainer,\n Tr,\n Td,\n TBody,\n} from '../../atoms/Table';\nimport { Header } from './Header';\nimport { Row } from './Row';\nimport { HeadersType } from './types';\nimport { Footer } from './Footer';\nimport { Skeleton } from '../../atoms/Skeleton';\nimport { getData, removeElement } from './utils';\n\nexport interface DataGridProps<Data>\n extends React.HTMLAttributes<HTMLDivElement> {\n headers: HeadersType<Data>[];\n data: Data[];\n /** Unique identifier for row data */\n rowKeyExtractor: (data: Data) => string;\n toolbarRightIcons?: React.ReactNode;\n toolbarFooter?: React.ReactNode;\n toolbarTitle: string;\n /** Enable rows selection */\n selectable?: boolean;\n /** Selected items */\n selectedRows?: Data[];\n /** Selection handler */\n onSelectedRows?: (data: Data[] | ((prevState: Data[]) => Data[])) => void;\n /** Shows pagination controls */\n pagination?: boolean;\n /** Results per page */\n rowsPerPage?: number;\n /** Results per page handler */\n onRowsPerPageChange?: (value: number) => void;\n rowsPerPageOptions?: number[];\n rowsPerPageLabel?: (value: number) => string;\n /** Export button label */\n exportLabel?: string;\n exportFunction?: () => void;\n /** Total data elements. Only specify this property if your data is server-side */\n rowsCount?: number;\n /** Current page. Always start in 0 */\n page?: number;\n /** Current page handler */\n onPageChange?: (page: number) => void;\n /** Loading state. The amount of skeleton rows is based on current rowsPerPage */\n loading?: boolean;\n /** Custom skeleton component for better visual */\n skeletonComponent?: React.ReactNode;\n /** Empty state placeholder */\n emptyPlaceholder?: React.ReactNode;\n}\n\n/** Note: Consider memoizing functions for a better performance */\nconst DataGrid = <Data extends unknown>({\n headers,\n data,\n rowKeyExtractor,\n toolbarTitle,\n toolbarFooter,\n toolbarRightIcons,\n selectable = false,\n selectedRows = [],\n onSelectedRows,\n pagination = false,\n rowsPerPage = 10,\n onRowsPerPageChange,\n rowsPerPageOptions: _rowsPerPageOptions,\n rowsPerPageLabel: _rowsPerPageLabel,\n exportLabel = 'Exportar',\n exportFunction,\n rowsCount,\n page = 0,\n onPageChange,\n loading = false,\n skeletonComponent,\n emptyPlaceholder,\n ...rest\n}: DataGridProps<Data>): JSX.Element => {\n if (selectable && (!selectedRows || !onSelectedRows)) {\n throw new Error(\n '[DataGrid] You should specify selection handlers (selectedRows, onSelectedRows)'\n );\n }\n\n const rowsPerPageLabel = React.useCallback(\n value =>\n _rowsPerPageLabel\n ? _rowsPerPageLabel(value)\n : `Exibir por página: ${value} itens`,\n [_rowsPerPageLabel]\n );\n const rowsPerPageOptions = React.useMemo(\n () => _rowsPerPageOptions ?? [10, 25, 50],\n [_rowsPerPageOptions]\n );\n\n const handleSelect = React.useCallback(\n (current, checked) => {\n if (checked) {\n onSelectedRows?.(prevState => [...prevState, current]);\n return;\n }\n\n onSelectedRows?.(prevState => {\n const idx = prevState.findIndex(\n el => rowKeyExtractor(el) === rowKeyExtractor(current)\n );\n return [...removeElement(prevState, idx)];\n });\n },\n [onSelectedRows, rowKeyExtractor]\n );\n\n return (\n <TableContainer {...rest}>\n <TableToolbar\n title={toolbarTitle}\n rightIcons={toolbarRightIcons}\n footer={toolbarFooter}\n />\n <Table>\n <Header\n selectable={selectable}\n headers={headers}\n data={data}\n rowsCount={rowsCount ?? data.length}\n rowKeyExtractor={rowKeyExtractor}\n selectedRows={selectedRows}\n onSelected={onSelectedRows}\n />\n\n {!loading ? (\n <TBody>\n {data.length > 0 ? (\n getData(\n data,\n rowsCount,\n page,\n rowsPerPage,\n pagination\n ).map(item => (\n <Row\n key={rowKeyExtractor(item)}\n rowKeyExtractor={rowKeyExtractor}\n handleSelect={handleSelect}\n selectable={selectable}\n headers={headers}\n data={item}\n checked={selectedRows?.some(\n sel => rowKeyExtractor(sel) === rowKeyExtractor(item)\n )}\n />\n ))\n ) : (\n <tr>\n <td colSpan={99}>{emptyPlaceholder}</td>\n </tr>\n )}\n </TBody>\n ) : (\n <TBody>\n {[...Array(rowsPerPage).keys()].map(idx => (\n <Tr key={`skeleton-${idx}`}>\n <Td colSpan={99} style={{ padding: 0 }}>\n {skeletonComponent ?? (\n <Skeleton height={55} radius=\"mili\" animation=\"wave\">\n <div style={{ width: '100%' }} />\n </Skeleton>\n )}\n </Td>\n </Tr>\n ))}\n </TBody>\n )}\n\n <Footer\n exportFunction={exportFunction}\n exportLabel={exportLabel}\n rowsPerPageLabel={rowsPerPageLabel}\n rowsPerPage={rowsPerPage}\n onRowsPerPageChange={onRowsPerPageChange}\n rowsPerPageOptions={rowsPerPageOptions}\n rowsCount={rowsCount ?? data.length}\n page={page}\n onPageChange={onPageChange}\n pagination={pagination}\n />\n </Table>\n </TableContainer>\n );\n};\n\nexport default DataGrid;\n"],"file":"DataGrid.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.
|
|
4
|
+
"version": "1.8.0",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"license": "MIT",
|
|
@@ -14,7 +14,8 @@
|
|
|
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.
|
|
17
|
+
"@tecsinapse/react-core": "^1.8.0",
|
|
18
|
+
"@types/react-native": "^0.64.4",
|
|
18
19
|
"react-native-vector-icons": "^8.1.0",
|
|
19
20
|
"react-transition-group": "^4.4.2"
|
|
20
21
|
},
|
|
@@ -32,5 +33,5 @@
|
|
|
32
33
|
"react-dom": ">=16.8.0",
|
|
33
34
|
"react-native-web": "^0.17.1"
|
|
34
35
|
},
|
|
35
|
-
"gitHead": "
|
|
36
|
+
"gitHead": "007818f30ad4257a740f6abe53c10495b1187ac1"
|
|
36
37
|
}
|
|
@@ -15,7 +15,7 @@ import {
|
|
|
15
15
|
} from './animations';
|
|
16
16
|
import { useTheme } from '@emotion/react';
|
|
17
17
|
|
|
18
|
-
export interface AccordionProps {
|
|
18
|
+
export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
19
19
|
open?: boolean;
|
|
20
20
|
onChange?: () => void;
|
|
21
21
|
title: string;
|
|
@@ -29,6 +29,7 @@ const Accordion: React.FC<AccordionProps> = ({
|
|
|
29
29
|
onChange,
|
|
30
30
|
transition = 200,
|
|
31
31
|
children,
|
|
32
|
+
...rest
|
|
32
33
|
}) => {
|
|
33
34
|
const [open, setOpen] = React.useState(_open);
|
|
34
35
|
const [contentHeight, setContentHeight] = React.useState(0);
|
|
@@ -54,7 +55,7 @@ const Accordion: React.FC<AccordionProps> = ({
|
|
|
54
55
|
}, [onChange]);
|
|
55
56
|
|
|
56
57
|
return (
|
|
57
|
-
<AccordionContainer>
|
|
58
|
+
<AccordionContainer {...rest}>
|
|
58
59
|
<TitleContainer onClick={handleClick}>
|
|
59
60
|
<Transition in={open} timeout={transition}>
|
|
60
61
|
{state => (
|
|
@@ -1,16 +1,21 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { Transition } from 'react-transition-group';
|
|
3
3
|
import { Overlay } from '../Overlay';
|
|
4
4
|
import { ModalContainer } from './styled';
|
|
5
5
|
import { defaultStyleOverlay, transitionStylesOverlay } from './animations';
|
|
6
6
|
|
|
7
|
-
export interface ModalProps {
|
|
7
|
+
export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
8
8
|
open: boolean;
|
|
9
9
|
onClose: () => void;
|
|
10
|
-
style?: CSSProperties;
|
|
11
10
|
}
|
|
12
11
|
|
|
13
|
-
const Modal: React.FC<ModalProps> = ({
|
|
12
|
+
const Modal: React.FC<ModalProps> = ({
|
|
13
|
+
children,
|
|
14
|
+
open,
|
|
15
|
+
onClose,
|
|
16
|
+
style,
|
|
17
|
+
...rest
|
|
18
|
+
}) => {
|
|
14
19
|
return (
|
|
15
20
|
<>
|
|
16
21
|
<Overlay open={open} onClose={onClose} zIndex="modal" />
|
|
@@ -22,6 +27,7 @@ const Modal: React.FC<ModalProps> = ({ children, open, onClose, style }) => {
|
|
|
22
27
|
...defaultStyleOverlay,
|
|
23
28
|
...transitionStylesOverlay[state],
|
|
24
29
|
}}
|
|
30
|
+
{...rest}
|
|
25
31
|
>
|
|
26
32
|
{children}
|
|
27
33
|
</ModalContainer>
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { Wrapper } from './styled';
|
|
3
3
|
import { BorderRadiusType } from '@tecsinapse/react-core';
|
|
4
4
|
|
|
5
|
-
export interface SkeletonProps {
|
|
5
|
+
export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
6
6
|
width?: number;
|
|
7
7
|
height?: number;
|
|
8
8
|
animation?: 'pulse' | 'wave';
|
|
@@ -15,6 +15,7 @@ const Skeleton: React.FC<SkeletonProps> = ({
|
|
|
15
15
|
height,
|
|
16
16
|
animation = 'wave',
|
|
17
17
|
radius,
|
|
18
|
+
...rest
|
|
18
19
|
}) => {
|
|
19
20
|
if (!width && !height && !children) {
|
|
20
21
|
throw new Error(
|
|
@@ -28,6 +29,7 @@ const Skeleton: React.FC<SkeletonProps> = ({
|
|
|
28
29
|
height={height}
|
|
29
30
|
animation={animation}
|
|
30
31
|
radius={radius}
|
|
32
|
+
{...rest}
|
|
31
33
|
>
|
|
32
34
|
{children}
|
|
33
35
|
</Wrapper>
|
|
@@ -8,13 +8,13 @@ export type BreadcrumbType = {
|
|
|
8
8
|
props?: any;
|
|
9
9
|
};
|
|
10
10
|
|
|
11
|
-
export interface BreadcrumbsProps {
|
|
11
|
+
export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
12
12
|
breadcrumbs: BreadcrumbType[];
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
const Breadcrumbs: FC<BreadcrumbsProps> = ({ breadcrumbs }) => {
|
|
15
|
+
const Breadcrumbs: FC<BreadcrumbsProps> = ({ breadcrumbs, ...rest }) => {
|
|
16
16
|
return (
|
|
17
|
-
<StyledContainerBreadcrumbs>
|
|
17
|
+
<StyledContainerBreadcrumbs {...rest}>
|
|
18
18
|
{breadcrumbs.map((item, index) => {
|
|
19
19
|
const { props, Component = 'a', title } = item;
|
|
20
20
|
return (
|