@tecsinapse/react-web-kit 1.22.6 → 1.22.8
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/dist/cjs/components/atoms/Accordion/Accordion.js +20 -47
- package/dist/cjs/components/atoms/Accordion/Accordion.js.map +1 -1
- package/dist/cjs/components/atoms/Badge/Badge.js +9 -43
- package/dist/cjs/components/atoms/Badge/Badge.js.map +1 -1
- package/dist/cjs/components/atoms/Button/Button.js +15 -55
- package/dist/cjs/components/atoms/Button/Button.js.map +1 -1
- package/dist/cjs/components/atoms/Button/hooks/useMouseHover.js +2 -2
- package/dist/cjs/components/atoms/Button/hooks/useMouseHover.js.map +1 -1
- package/dist/cjs/components/atoms/Button/hooks/useMousePressed.js +2 -2
- package/dist/cjs/components/atoms/Button/hooks/useMousePressed.js.map +1 -1
- package/dist/cjs/components/atoms/Button/styled.js +2 -2
- package/dist/cjs/components/atoms/Button/styled.js.map +1 -1
- package/dist/cjs/components/atoms/Dropdown/index.js +1 -17
- package/dist/cjs/components/atoms/Dropdown/index.js.map +1 -1
- package/dist/cjs/components/atoms/Input/Input.js +27 -79
- package/dist/cjs/components/atoms/Input/Input.js.map +1 -1
- package/dist/cjs/components/atoms/InputMask/InputMask.js +27 -79
- package/dist/cjs/components/atoms/InputMask/InputMask.js.map +1 -1
- package/dist/cjs/components/atoms/Modal/Modal.js +15 -43
- package/dist/cjs/components/atoms/Modal/Modal.js.map +1 -1
- package/dist/cjs/components/atoms/Overlay/Overlay.js +4 -17
- package/dist/cjs/components/atoms/Overlay/Overlay.js.map +1 -1
- package/dist/cjs/components/atoms/Skeleton/Skeleton.js +13 -47
- package/dist/cjs/components/atoms/Skeleton/Skeleton.js.map +1 -1
- package/dist/cjs/components/atoms/Skeleton/styled.js +2 -8
- package/dist/cjs/components/atoms/Skeleton/styled.js.map +1 -1
- package/dist/cjs/components/atoms/Switch/Switch.js +21 -53
- package/dist/cjs/components/atoms/Switch/Switch.js.map +1 -1
- package/dist/cjs/components/atoms/Table/Body/TBody.js +7 -35
- package/dist/cjs/components/atoms/Table/Body/TBody.js.map +1 -1
- package/dist/cjs/components/atoms/Table/Cell/Td.js +7 -35
- package/dist/cjs/components/atoms/Table/Cell/Td.js.map +1 -1
- package/dist/cjs/components/atoms/Table/Container/TableContainer.js +7 -35
- package/dist/cjs/components/atoms/Table/Container/TableContainer.js.map +1 -1
- package/dist/cjs/components/atoms/Table/Footer/TFoot.js +7 -35
- package/dist/cjs/components/atoms/Table/Footer/TFoot.js.map +1 -1
- package/dist/cjs/components/atoms/Table/Header/THead.js +7 -35
- package/dist/cjs/components/atoms/Table/Header/THead.js.map +1 -1
- package/dist/cjs/components/atoms/Table/Header/Th.js +7 -35
- package/dist/cjs/components/atoms/Table/Header/Th.js.map +1 -1
- package/dist/cjs/components/atoms/Table/Row/Tr.js +7 -35
- package/dist/cjs/components/atoms/Table/Row/Tr.js.map +1 -1
- package/dist/cjs/components/atoms/Table/Table.js +7 -35
- package/dist/cjs/components/atoms/Table/Table.js.map +1 -1
- package/dist/cjs/components/atoms/Table/Toolbar/TableToolbar.js +9 -39
- package/dist/cjs/components/atoms/Table/Toolbar/TableToolbar.js.map +1 -1
- package/dist/cjs/components/atoms/Tag/Tag.js +9 -39
- package/dist/cjs/components/atoms/Tag/Tag.js.map +1 -1
- package/dist/cjs/components/atoms/Tooltip/Tooltip.js +2 -3
- package/dist/cjs/components/atoms/Tooltip/Tooltip.js.map +1 -1
- package/dist/cjs/components/molecules/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.js +3 -21
- package/dist/cjs/components/molecules/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.js.map +1 -1
- package/dist/cjs/components/molecules/Breadcrumbs/Breadcrumbs.js +4 -31
- package/dist/cjs/components/molecules/Breadcrumbs/Breadcrumbs.js.map +1 -1
- package/dist/cjs/components/molecules/DatePicker/DatePicker.js +22 -57
- package/dist/cjs/components/molecules/DatePicker/DatePicker.js.map +1 -1
- package/dist/cjs/components/molecules/DateTimePicker/DateTimePicker.js +4 -35
- package/dist/cjs/components/molecules/DateTimePicker/DateTimePicker.js.map +1 -1
- package/dist/cjs/components/molecules/Drawer/Drawer.js +21 -48
- package/dist/cjs/components/molecules/Drawer/Drawer.js.map +1 -1
- package/dist/cjs/components/molecules/Grid/Grid.js +24 -57
- package/dist/cjs/components/molecules/Grid/Grid.js.map +1 -1
- package/dist/cjs/components/molecules/Grid/Item/Item.js +30 -76
- package/dist/cjs/components/molecules/Grid/Item/Item.js.map +1 -1
- package/dist/cjs/components/molecules/Grid/Item/functions.js +2 -3
- package/dist/cjs/components/molecules/Grid/Item/functions.js.map +1 -1
- package/dist/cjs/components/molecules/IconTextButton/IconTextButton.js +13 -47
- package/dist/cjs/components/molecules/IconTextButton/IconTextButton.js.map +1 -1
- package/dist/cjs/components/molecules/IconTextButton/TextComponent.js +6 -22
- package/dist/cjs/components/molecules/IconTextButton/TextComponent.js.map +1 -1
- package/dist/cjs/components/molecules/IconTextButton/styled.js +2 -2
- package/dist/cjs/components/molecules/IconTextButton/styled.js.map +1 -1
- package/dist/cjs/components/molecules/InputPassword/InputPassword.js +4 -35
- package/dist/cjs/components/molecules/InputPassword/InputPassword.js.map +1 -1
- package/dist/cjs/components/molecules/LabeledSwitch/LabelComponent.js +15 -47
- package/dist/cjs/components/molecules/LabeledSwitch/LabelComponent.js.map +1 -1
- package/dist/cjs/components/molecules/LabeledSwitch/LabeledSwitch.js +14 -49
- package/dist/cjs/components/molecules/LabeledSwitch/LabeledSwitch.js.map +1 -1
- package/dist/cjs/components/molecules/LabeledSwitch/styled.js +2 -2
- package/dist/cjs/components/molecules/LabeledSwitch/styled.js.map +1 -1
- package/dist/cjs/components/molecules/Menubar/MenuBlock/MenuItem/MenuItem.js +5 -23
- package/dist/cjs/components/molecules/Menubar/MenuBlock/MenuItem/MenuItem.js.map +1 -1
- package/dist/cjs/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/SubMenuBlock.js +3 -21
- package/dist/cjs/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/SubMenuBlock.js.map +1 -1
- package/dist/cjs/components/molecules/Menubar/Menubar.js +15 -51
- package/dist/cjs/components/molecules/Menubar/Menubar.js.map +1 -1
- package/dist/cjs/components/molecules/Menubar/MostUsed/MostUsed.js +3 -21
- package/dist/cjs/components/molecules/Menubar/MostUsed/MostUsed.js.map +1 -1
- package/dist/cjs/components/molecules/Menubar/SearchResultItem/SearchResultItem.js +3 -21
- package/dist/cjs/components/molecules/Menubar/SearchResultItem/SearchResultItem.js.map +1 -1
- package/dist/cjs/components/molecules/Menubar/SearchResultItem/utils.js +4 -19
- package/dist/cjs/components/molecules/Menubar/SearchResultItem/utils.js.map +1 -1
- package/dist/cjs/components/molecules/Menubar/animations.js +8 -18
- package/dist/cjs/components/molecules/Menubar/animations.js.map +1 -1
- package/dist/cjs/components/molecules/Menubar/utils.js +1 -2
- package/dist/cjs/components/molecules/Menubar/utils.js.map +1 -1
- package/dist/cjs/components/molecules/Select/Dropdown/Dropdown.js +2 -2
- package/dist/cjs/components/molecules/Select/Dropdown/Dropdown.js.map +1 -1
- package/dist/cjs/components/molecules/Select/Select.js +28 -73
- package/dist/cjs/components/molecules/Select/Select.js.map +1 -1
- package/dist/cjs/components/molecules/Snackbar/Snackbar.js +10 -41
- package/dist/cjs/components/molecules/Snackbar/Snackbar.js.map +1 -1
- package/dist/cjs/components/molecules/TextArea/TextArea.js +29 -83
- package/dist/cjs/components/molecules/TextArea/TextArea.js.map +1 -1
- package/dist/cjs/components/organisms/DataGrid/DataGrid.js +36 -86
- package/dist/cjs/components/organisms/DataGrid/DataGrid.js.map +1 -1
- package/dist/cjs/components/organisms/DataGrid/Footer/Footer.js +5 -5
- package/dist/cjs/components/organisms/DataGrid/Footer/Footer.js.map +1 -1
- package/dist/cjs/components/organisms/DataGrid/Header/Header.js +5 -5
- package/dist/cjs/components/organisms/DataGrid/Header/Header.js.map +1 -1
- package/dist/esm/components/atoms/Accordion/Accordion.js +21 -48
- package/dist/esm/components/atoms/Accordion/Accordion.js.map +1 -1
- package/dist/esm/components/atoms/Badge/Badge.js +9 -43
- package/dist/esm/components/atoms/Badge/Badge.js.map +1 -1
- package/dist/esm/components/atoms/Button/Button.js +15 -55
- package/dist/esm/components/atoms/Button/Button.js.map +1 -1
- package/dist/esm/components/atoms/Button/hooks/useMouseHover.js +2 -2
- package/dist/esm/components/atoms/Button/hooks/useMouseHover.js.map +1 -1
- package/dist/esm/components/atoms/Button/hooks/useMousePressed.js +2 -2
- package/dist/esm/components/atoms/Button/hooks/useMousePressed.js.map +1 -1
- package/dist/esm/components/atoms/Button/styled.js +2 -2
- package/dist/esm/components/atoms/Button/styled.js.map +1 -1
- package/dist/esm/components/atoms/Dropdown/index.js +1 -17
- package/dist/esm/components/atoms/Dropdown/index.js.map +1 -1
- package/dist/esm/components/atoms/Input/Input.js +27 -79
- package/dist/esm/components/atoms/Input/Input.js.map +1 -1
- package/dist/esm/components/atoms/InputMask/InputMask.js +27 -79
- package/dist/esm/components/atoms/InputMask/InputMask.js.map +1 -1
- package/dist/esm/components/atoms/Modal/Modal.js +15 -43
- package/dist/esm/components/atoms/Modal/Modal.js.map +1 -1
- package/dist/esm/components/atoms/Overlay/Overlay.js +4 -17
- package/dist/esm/components/atoms/Overlay/Overlay.js.map +1 -1
- package/dist/esm/components/atoms/Skeleton/Skeleton.js +13 -47
- package/dist/esm/components/atoms/Skeleton/Skeleton.js.map +1 -1
- package/dist/esm/components/atoms/Skeleton/styled.js +2 -8
- package/dist/esm/components/atoms/Skeleton/styled.js.map +1 -1
- package/dist/esm/components/atoms/Switch/Switch.js +21 -53
- package/dist/esm/components/atoms/Switch/Switch.js.map +1 -1
- package/dist/esm/components/atoms/Table/Body/TBody.js +7 -35
- package/dist/esm/components/atoms/Table/Body/TBody.js.map +1 -1
- package/dist/esm/components/atoms/Table/Cell/Td.js +7 -35
- package/dist/esm/components/atoms/Table/Cell/Td.js.map +1 -1
- package/dist/esm/components/atoms/Table/Container/TableContainer.js +7 -35
- package/dist/esm/components/atoms/Table/Container/TableContainer.js.map +1 -1
- package/dist/esm/components/atoms/Table/Footer/TFoot.js +7 -35
- package/dist/esm/components/atoms/Table/Footer/TFoot.js.map +1 -1
- package/dist/esm/components/atoms/Table/Header/THead.js +7 -35
- package/dist/esm/components/atoms/Table/Header/THead.js.map +1 -1
- package/dist/esm/components/atoms/Table/Header/Th.js +7 -35
- package/dist/esm/components/atoms/Table/Header/Th.js.map +1 -1
- package/dist/esm/components/atoms/Table/Row/Tr.js +7 -35
- package/dist/esm/components/atoms/Table/Row/Tr.js.map +1 -1
- package/dist/esm/components/atoms/Table/Table.js +7 -35
- package/dist/esm/components/atoms/Table/Table.js.map +1 -1
- package/dist/esm/components/atoms/Table/Toolbar/TableToolbar.js +9 -39
- package/dist/esm/components/atoms/Table/Toolbar/TableToolbar.js.map +1 -1
- package/dist/esm/components/atoms/Tag/Tag.js +9 -39
- package/dist/esm/components/atoms/Tag/Tag.js.map +1 -1
- package/dist/esm/components/atoms/Tooltip/Tooltip.js +2 -3
- package/dist/esm/components/atoms/Tooltip/Tooltip.js.map +1 -1
- package/dist/esm/components/molecules/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.js +3 -21
- package/dist/esm/components/molecules/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.js.map +1 -1
- package/dist/esm/components/molecules/Breadcrumbs/Breadcrumbs.js +4 -31
- package/dist/esm/components/molecules/Breadcrumbs/Breadcrumbs.js.map +1 -1
- package/dist/esm/components/molecules/DatePicker/DatePicker.js +22 -57
- package/dist/esm/components/molecules/DatePicker/DatePicker.js.map +1 -1
- package/dist/esm/components/molecules/DateTimePicker/DateTimePicker.js +4 -35
- package/dist/esm/components/molecules/DateTimePicker/DateTimePicker.js.map +1 -1
- package/dist/esm/components/molecules/Drawer/Drawer.js +21 -48
- package/dist/esm/components/molecules/Drawer/Drawer.js.map +1 -1
- package/dist/esm/components/molecules/Grid/Grid.js +24 -57
- package/dist/esm/components/molecules/Grid/Grid.js.map +1 -1
- package/dist/esm/components/molecules/Grid/Item/Item.js +30 -76
- package/dist/esm/components/molecules/Grid/Item/Item.js.map +1 -1
- package/dist/esm/components/molecules/Grid/Item/functions.js +2 -3
- package/dist/esm/components/molecules/Grid/Item/functions.js.map +1 -1
- package/dist/esm/components/molecules/IconTextButton/IconTextButton.js +13 -47
- package/dist/esm/components/molecules/IconTextButton/IconTextButton.js.map +1 -1
- package/dist/esm/components/molecules/IconTextButton/TextComponent.js +6 -22
- package/dist/esm/components/molecules/IconTextButton/TextComponent.js.map +1 -1
- package/dist/esm/components/molecules/IconTextButton/styled.js +2 -2
- package/dist/esm/components/molecules/IconTextButton/styled.js.map +1 -1
- package/dist/esm/components/molecules/InputPassword/InputPassword.js +4 -35
- package/dist/esm/components/molecules/InputPassword/InputPassword.js.map +1 -1
- package/dist/esm/components/molecules/LabeledSwitch/LabelComponent.js +15 -47
- package/dist/esm/components/molecules/LabeledSwitch/LabelComponent.js.map +1 -1
- package/dist/esm/components/molecules/LabeledSwitch/LabeledSwitch.js +14 -49
- package/dist/esm/components/molecules/LabeledSwitch/LabeledSwitch.js.map +1 -1
- package/dist/esm/components/molecules/LabeledSwitch/styled.js +2 -2
- package/dist/esm/components/molecules/LabeledSwitch/styled.js.map +1 -1
- package/dist/esm/components/molecules/Menubar/MenuBlock/MenuItem/MenuItem.js +5 -23
- package/dist/esm/components/molecules/Menubar/MenuBlock/MenuItem/MenuItem.js.map +1 -1
- package/dist/esm/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/SubMenuBlock.js +3 -21
- package/dist/esm/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/SubMenuBlock.js.map +1 -1
- package/dist/esm/components/molecules/Menubar/Menubar.js +15 -51
- package/dist/esm/components/molecules/Menubar/Menubar.js.map +1 -1
- package/dist/esm/components/molecules/Menubar/MostUsed/MostUsed.js +3 -21
- package/dist/esm/components/molecules/Menubar/MostUsed/MostUsed.js.map +1 -1
- package/dist/esm/components/molecules/Menubar/SearchResultItem/SearchResultItem.js +3 -21
- package/dist/esm/components/molecules/Menubar/SearchResultItem/SearchResultItem.js.map +1 -1
- package/dist/esm/components/molecules/Menubar/SearchResultItem/utils.js +4 -19
- package/dist/esm/components/molecules/Menubar/SearchResultItem/utils.js.map +1 -1
- package/dist/esm/components/molecules/Menubar/animations.js +8 -18
- package/dist/esm/components/molecules/Menubar/animations.js.map +1 -1
- package/dist/esm/components/molecules/Menubar/utils.js +1 -2
- package/dist/esm/components/molecules/Menubar/utils.js.map +1 -1
- package/dist/esm/components/molecules/Select/Dropdown/Dropdown.js +2 -2
- package/dist/esm/components/molecules/Select/Dropdown/Dropdown.js.map +1 -1
- package/dist/esm/components/molecules/Select/Select.js +29 -74
- package/dist/esm/components/molecules/Select/Select.js.map +1 -1
- package/dist/esm/components/molecules/Snackbar/Snackbar.js +10 -41
- package/dist/esm/components/molecules/Snackbar/Snackbar.js.map +1 -1
- package/dist/esm/components/molecules/TextArea/TextArea.js +29 -83
- package/dist/esm/components/molecules/TextArea/TextArea.js.map +1 -1
- package/dist/esm/components/organisms/DataGrid/DataGrid.js +36 -86
- package/dist/esm/components/organisms/DataGrid/DataGrid.js.map +1 -1
- package/dist/esm/components/organisms/DataGrid/Footer/Footer.js +5 -5
- package/dist/esm/components/organisms/DataGrid/Footer/Footer.js.map +1 -1
- package/dist/esm/components/organisms/DataGrid/Header/Header.js +5 -5
- package/dist/esm/components/organisms/DataGrid/Header/Header.js.map +1 -1
- package/package.json +3 -3
|
@@ -9,54 +9,17 @@ import { filterAndTransform } from './utils.js';
|
|
|
9
9
|
import { getInputContainerStyles, getContainerOpenMenuStyles } from './animations.js';
|
|
10
10
|
import { useClickAwayListener } from '../../../hooks/useClickAwayListener.js';
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
if (__propIsEnum.call(b, prop))
|
|
24
|
-
__defNormalProp(a, prop, b[prop]);
|
|
25
|
-
}
|
|
26
|
-
return a;
|
|
27
|
-
};
|
|
28
|
-
var __objRest = (source, exclude) => {
|
|
29
|
-
var target = {};
|
|
30
|
-
for (var prop in source)
|
|
31
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
32
|
-
target[prop] = source[prop];
|
|
33
|
-
if (source != null && __getOwnPropSymbols)
|
|
34
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
35
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
36
|
-
target[prop] = source[prop];
|
|
37
|
-
}
|
|
38
|
-
return target;
|
|
39
|
-
};
|
|
40
|
-
const Menubar = (_a) => {
|
|
41
|
-
var _b = _a, {
|
|
42
|
-
leftComponents,
|
|
43
|
-
rightComponents,
|
|
44
|
-
searchPlaceholder = "O qu\xEA voc\xEA deseja buscar?",
|
|
45
|
-
options,
|
|
46
|
-
mostUsed,
|
|
47
|
-
mostUsedLabel = "Mais acessados",
|
|
48
|
-
searchResultsLabel = "Resultados da busca",
|
|
49
|
-
searchable = true
|
|
50
|
-
} = _b, rest = __objRest(_b, [
|
|
51
|
-
"leftComponents",
|
|
52
|
-
"rightComponents",
|
|
53
|
-
"searchPlaceholder",
|
|
54
|
-
"options",
|
|
55
|
-
"mostUsed",
|
|
56
|
-
"mostUsedLabel",
|
|
57
|
-
"searchResultsLabel",
|
|
58
|
-
"searchable"
|
|
59
|
-
]);
|
|
12
|
+
const Menubar = ({
|
|
13
|
+
leftComponents,
|
|
14
|
+
rightComponents,
|
|
15
|
+
searchPlaceholder = "O qu\xEA voc\xEA deseja buscar?",
|
|
16
|
+
options,
|
|
17
|
+
mostUsed,
|
|
18
|
+
mostUsedLabel = "Mais acessados",
|
|
19
|
+
searchResultsLabel = "Resultados da busca",
|
|
20
|
+
searchable = true,
|
|
21
|
+
...rest
|
|
22
|
+
}) => {
|
|
60
23
|
const [search, setSearch] = React.useState("");
|
|
61
24
|
const [results, setResults] = React.useState([]);
|
|
62
25
|
const [input, setInput] = useDebouncedState("", setSearch);
|
|
@@ -72,9 +35,10 @@ const Menubar = (_a) => {
|
|
|
72
35
|
return;
|
|
73
36
|
setResults(filterAndTransform(options, search));
|
|
74
37
|
}, [search]);
|
|
75
|
-
return /* @__PURE__ */ React.createElement("div",
|
|
76
|
-
ref: (ref) => menuRef.current = ref
|
|
77
|
-
|
|
38
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
39
|
+
ref: (ref) => menuRef.current = ref,
|
|
40
|
+
...rest
|
|
41
|
+
}, /* @__PURE__ */ React.createElement(StyledMenuBar, null, /* @__PURE__ */ React.createElement(StyledMenuButton, {
|
|
78
42
|
variant: "filled",
|
|
79
43
|
color: "primary",
|
|
80
44
|
onPress: toggleOpen
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menubar.js","sources":["../../../../../src/components/molecules/Menubar/Menubar.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { Icon, Text, useDebouncedState } from '@tecsinapse/react-core';\nimport { Transition } from 'react-transition-group';\nimport {\n StyledIconInput,\n StyledMenuBar,\n StyledMenuButton,\n StyledContainerOpenMenu,\n StyledInput,\n StyledInputContainer,\n StyledSearchResultsContainer,\n StyledSearchTextContainer,\n} from './styled';\nimport { MostUsedType, OptionsType } from './types';\nimport { MostUsed } from './MostUsed';\nimport { MenuBlock } from './MenuBlock';\nimport { SearchResultItem } from './SearchResultItem';\nimport { filterAndTransform } from './utils';\nimport {\n getContainerOpenMenuStyles,\n getInputContainerStyles,\n} from './animations';\nimport { useClickAwayListener } from '../../../hooks';\n\nexport interface MenubarProps extends React.HTMLAttributes<HTMLDivElement> {\n options: OptionsType[];\n leftComponents?: React.ReactNode;\n rightComponents?: React.ReactNode;\n /** Limited to first 4 elements */\n mostUsed?: MostUsedType[];\n mostUsedLabel?: string;\n searchable?: boolean;\n searchPlaceholder?: string;\n searchResultsLabel?: string;\n}\n\nconst Menubar: React.FC<MenubarProps> = ({\n leftComponents,\n rightComponents,\n searchPlaceholder = 'O quê você deseja buscar?',\n options,\n mostUsed,\n mostUsedLabel = 'Mais acessados',\n searchResultsLabel = 'Resultados da busca',\n searchable = true,\n ...rest\n}) => {\n const [search, setSearch] = React.useState<string>('');\n const [results, setResults] = React.useState<MostUsedType[]>([]);\n const [input, setInput] = useDebouncedState<string>('', setSearch);\n const [open, setOpen] = React.useState<boolean>(false);\n const menuRef = useRef<HTMLDivElement | null>(null);\n useClickAwayListener(menuRef, setOpen, 'mouseup');\n\n const toggleOpen = React.useCallback(\n () => setOpen(state => !state),\n [setOpen]\n );\n\n React.useEffect(() => {\n if (search === '') return;\n setResults(filterAndTransform(options, search));\n }, [search]);\n\n return (\n <div ref={ref => (menuRef.current = ref)} {...rest}>\n <StyledMenuBar>\n <StyledMenuButton variant=\"filled\" color=\"primary\" onPress={toggleOpen}>\n {!open ? (\n <Icon\n size=\"deca\"\n name=\"menu\"\n type=\"material-community\"\n fontColor=\"light\"\n />\n ) : (\n <Icon\n size=\"deca\"\n name=\"close\"\n type=\"material-community\"\n fontColor=\"light\"\n />\n )}\n </StyledMenuButton>\n {leftComponents}\n <Transition in={open} timeout={250}>\n {state => (\n <StyledInputContainer style={getInputContainerStyles(state)}>\n {searchable && (\n <StyledInput\n placeholder={searchPlaceholder}\n leftComponent={\n <StyledIconInput>\n <Icon name=\"magnify\" type=\"material-community\" />\n </StyledIconInput>\n }\n value={input}\n onChange={setInput}\n />\n )}\n </StyledInputContainer>\n )}\n </Transition>\n {rightComponents}\n </StyledMenuBar>\n <Transition in={open} timeout={250}>\n {state => (\n <StyledContainerOpenMenu style={getContainerOpenMenuStyles(state)}>\n {!search ? (\n <>\n {mostUsed && (\n <MostUsed\n label={mostUsedLabel}\n data={mostUsed}\n toggle={toggleOpen}\n />\n )}\n <MenuBlock options={options} toggle={toggleOpen} />\n </>\n ) : (\n <StyledSearchResultsContainer>\n <StyledSearchTextContainer>\n <Text fontWeight=\"bold\">{searchResultsLabel}</Text>\n </StyledSearchTextContainer>\n {results.map(result => (\n <SearchResultItem\n key={`${result.title}-${result.category}`}\n data={result}\n searchTerm={search}\n toggle={toggleOpen}\n />\n ))}\n </StyledSearchResultsContainer>\n )}\n </StyledContainerOpenMenu>\n )}\n </Transition>\n </div>\n );\n};\n\nexport default Menubar;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Menubar.js","sources":["../../../../../src/components/molecules/Menubar/Menubar.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { Icon, Text, useDebouncedState } from '@tecsinapse/react-core';\nimport { Transition } from 'react-transition-group';\nimport {\n StyledIconInput,\n StyledMenuBar,\n StyledMenuButton,\n StyledContainerOpenMenu,\n StyledInput,\n StyledInputContainer,\n StyledSearchResultsContainer,\n StyledSearchTextContainer,\n} from './styled';\nimport { MostUsedType, OptionsType } from './types';\nimport { MostUsed } from './MostUsed';\nimport { MenuBlock } from './MenuBlock';\nimport { SearchResultItem } from './SearchResultItem';\nimport { filterAndTransform } from './utils';\nimport {\n getContainerOpenMenuStyles,\n getInputContainerStyles,\n} from './animations';\nimport { useClickAwayListener } from '../../../hooks';\n\nexport interface MenubarProps extends React.HTMLAttributes<HTMLDivElement> {\n options: OptionsType[];\n leftComponents?: React.ReactNode;\n rightComponents?: React.ReactNode;\n /** Limited to first 4 elements */\n mostUsed?: MostUsedType[];\n mostUsedLabel?: string;\n searchable?: boolean;\n searchPlaceholder?: string;\n searchResultsLabel?: string;\n}\n\nconst Menubar: React.FC<MenubarProps> = ({\n leftComponents,\n rightComponents,\n searchPlaceholder = 'O quê você deseja buscar?',\n options,\n mostUsed,\n mostUsedLabel = 'Mais acessados',\n searchResultsLabel = 'Resultados da busca',\n searchable = true,\n ...rest\n}) => {\n const [search, setSearch] = React.useState<string>('');\n const [results, setResults] = React.useState<MostUsedType[]>([]);\n const [input, setInput] = useDebouncedState<string>('', setSearch);\n const [open, setOpen] = React.useState<boolean>(false);\n const menuRef = useRef<HTMLDivElement | null>(null);\n useClickAwayListener(menuRef, setOpen, 'mouseup');\n\n const toggleOpen = React.useCallback(\n () => setOpen(state => !state),\n [setOpen]\n );\n\n React.useEffect(() => {\n if (search === '') return;\n setResults(filterAndTransform(options, search));\n }, [search]);\n\n return (\n <div ref={ref => (menuRef.current = ref)} {...rest}>\n <StyledMenuBar>\n <StyledMenuButton variant=\"filled\" color=\"primary\" onPress={toggleOpen}>\n {!open ? (\n <Icon\n size=\"deca\"\n name=\"menu\"\n type=\"material-community\"\n fontColor=\"light\"\n />\n ) : (\n <Icon\n size=\"deca\"\n name=\"close\"\n type=\"material-community\"\n fontColor=\"light\"\n />\n )}\n </StyledMenuButton>\n {leftComponents}\n <Transition in={open} timeout={250}>\n {state => (\n <StyledInputContainer style={getInputContainerStyles(state)}>\n {searchable && (\n <StyledInput\n placeholder={searchPlaceholder}\n leftComponent={\n <StyledIconInput>\n <Icon name=\"magnify\" type=\"material-community\" />\n </StyledIconInput>\n }\n value={input}\n onChange={setInput}\n />\n )}\n </StyledInputContainer>\n )}\n </Transition>\n {rightComponents}\n </StyledMenuBar>\n <Transition in={open} timeout={250}>\n {state => (\n <StyledContainerOpenMenu style={getContainerOpenMenuStyles(state)}>\n {!search ? (\n <>\n {mostUsed && (\n <MostUsed\n label={mostUsedLabel}\n data={mostUsed}\n toggle={toggleOpen}\n />\n )}\n <MenuBlock options={options} toggle={toggleOpen} />\n </>\n ) : (\n <StyledSearchResultsContainer>\n <StyledSearchTextContainer>\n <Text fontWeight=\"bold\">{searchResultsLabel}</Text>\n </StyledSearchTextContainer>\n {results.map(result => (\n <SearchResultItem\n key={`${result.title}-${result.category}`}\n data={result}\n searchTerm={search}\n toggle={toggleOpen}\n />\n ))}\n </StyledSearchResultsContainer>\n )}\n </StyledContainerOpenMenu>\n )}\n </Transition>\n </div>\n );\n};\n\nexport default Menubar;\n"],"names":[],"mappings":"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"}
|
|
@@ -2,25 +2,6 @@ import React from 'react';
|
|
|
2
2
|
import { Text } from '@tecsinapse/react-core';
|
|
3
3
|
import { StyledCardContainer, StyledCard } from './styled.js';
|
|
4
4
|
|
|
5
|
-
var __defProp = Object.defineProperty;
|
|
6
|
-
var __defProps = Object.defineProperties;
|
|
7
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
8
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
-
var __spreadValues = (a, b) => {
|
|
13
|
-
for (var prop in b || (b = {}))
|
|
14
|
-
if (__hasOwnProp.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
if (__getOwnPropSymbols)
|
|
17
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
-
if (__propIsEnum.call(b, prop))
|
|
19
|
-
__defNormalProp(a, prop, b[prop]);
|
|
20
|
-
}
|
|
21
|
-
return a;
|
|
22
|
-
};
|
|
23
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
5
|
const MostUsed = ({ data, label, toggle }) => {
|
|
25
6
|
const noTextDecoration = { textDecoration: "none" };
|
|
26
7
|
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, {
|
|
@@ -31,11 +12,12 @@ const MostUsed = ({ data, label, toggle }) => {
|
|
|
31
12
|
category,
|
|
32
13
|
Component = "a",
|
|
33
14
|
props = {}
|
|
34
|
-
}) => /* @__PURE__ */ React.createElement(Component,
|
|
15
|
+
}) => /* @__PURE__ */ React.createElement(Component, {
|
|
16
|
+
...props,
|
|
35
17
|
style: noTextDecoration,
|
|
36
18
|
key: `${title}-${category}`,
|
|
37
19
|
onClick: toggle
|
|
38
|
-
}
|
|
20
|
+
}, /* @__PURE__ */ React.createElement(StyledCard, {
|
|
39
21
|
elevated: true,
|
|
40
22
|
key: `${title}-${category}`
|
|
41
23
|
}, /* @__PURE__ */ React.createElement(Text, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MostUsed.js","sources":["../../../../../../src/components/molecules/Menubar/MostUsed/MostUsed.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '@tecsinapse/react-core';\nimport { StyledCard, StyledCardContainer } from './styled';\nimport { MostUsedType } from '../types';\n\ninterface MostUsedProps {\n data: MostUsedType[];\n label: string;\n toggle: () => void;\n}\n\nconst MostUsed: React.FC<MostUsedProps> = ({ data, label, toggle }) => {\n const noTextDecoration = { textDecoration: 'none' };\n\n return (\n <>\n <Text fontWeight=\"bold\">{label}</Text>\n <StyledCardContainer>\n {data\n .slice(0, 4)\n .map(\n ({\n title,\n category,\n Component = 'a',\n props = {},\n }: MostUsedType) => (\n <Component\n {...props}\n style={noTextDecoration}\n key={`${title}-${category}`}\n onClick={toggle}\n >\n <StyledCard elevated key={`${title}-${category}`}>\n <Text fontWeight=\"bold\" colorVariant=\"primary\">\n {title}\n </Text>\n <Text\n fontWeight=\"bold\"\n colorVariant=\"secondary\"\n typography=\"label\"\n >\n {category}\n </Text>\n </StyledCard>\n </Component>\n )\n )}\n </StyledCardContainer>\n </>\n );\n};\n\nexport default React.memo(MostUsed);\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MostUsed.js","sources":["../../../../../../src/components/molecules/Menubar/MostUsed/MostUsed.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '@tecsinapse/react-core';\nimport { StyledCard, StyledCardContainer } from './styled';\nimport { MostUsedType } from '../types';\n\ninterface MostUsedProps {\n data: MostUsedType[];\n label: string;\n toggle: () => void;\n}\n\nconst MostUsed: React.FC<MostUsedProps> = ({ data, label, toggle }) => {\n const noTextDecoration = { textDecoration: 'none' };\n\n return (\n <>\n <Text fontWeight=\"bold\">{label}</Text>\n <StyledCardContainer>\n {data\n .slice(0, 4)\n .map(\n ({\n title,\n category,\n Component = 'a',\n props = {},\n }: MostUsedType) => (\n <Component\n {...props}\n style={noTextDecoration}\n key={`${title}-${category}`}\n onClick={toggle}\n >\n <StyledCard elevated key={`${title}-${category}`}>\n <Text fontWeight=\"bold\" colorVariant=\"primary\">\n {title}\n </Text>\n <Text\n fontWeight=\"bold\"\n colorVariant=\"secondary\"\n typography=\"label\"\n >\n {category}\n </Text>\n </StyledCard>\n </Component>\n )\n )}\n </StyledCardContainer>\n </>\n );\n};\n\nexport default React.memo(MostUsed);\n"],"names":[],"mappings":";;;;AAWA,MAAM,WAAoC,CAAC,EAAE,IAAM,EAAA,KAAA,EAAO,QAAa,KAAA;AACrE,EAAM,MAAA,gBAAA,GAAmB,EAAE,cAAA,EAAgB,MAAO,EAAA,CAAA;AAElD,EAAA,iFAEK,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAK,UAAW,EAAA,MAAA;AAAA,GAAQ,EAAA,KAAM,mBAC9B,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA,IAAA,EACE,KACE,KAAM,CAAA,CAAA,EAAG,CAAC,CACV,CAAA,GAAA;AAAA,IACC,CAAC;AAAA,MACC,KAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAY,GAAA,GAAA;AAAA,MACZ,QAAQ,EAAC;AAAA,0BAER,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,KAAO,EAAA,gBAAA;AAAA,MACP,GAAA,EAAK,GAAG,KAAS,CAAA,CAAA,EAAA,QAAA,CAAA,CAAA;AAAA,MACjB,OAAS,EAAA,MAAA;AAAA,KAAA,kBAER,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,MAAW,QAAQ,EAAA,IAAA;AAAA,MAAC,GAAA,EAAK,GAAG,KAAS,CAAA,CAAA,EAAA,QAAA,CAAA,CAAA;AAAA,KAAA,kBACnC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,MAAK,UAAW,EAAA,MAAA;AAAA,MAAO,YAAa,EAAA,SAAA;AAAA,KAClC,EAAA,KACH,mBACC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,MACC,UAAW,EAAA,MAAA;AAAA,MACX,YAAa,EAAA,WAAA;AAAA,MACb,UAAW,EAAA,OAAA;AAAA,KAEV,EAAA,QACH,CACF,CACF,CAAA;AAAA,GAGR,CACF,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEA,iBAAe,KAAA,CAAM,KAAK,QAAQ,CAAA;;;;"}
|
|
@@ -3,25 +3,6 @@ import { Text } from '@tecsinapse/react-core';
|
|
|
3
3
|
import { StyledSearchItemContainer, HighlightText } from './styled.js';
|
|
4
4
|
import { highlight } from './utils.js';
|
|
5
5
|
|
|
6
|
-
var __defProp = Object.defineProperty;
|
|
7
|
-
var __defProps = Object.defineProperties;
|
|
8
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
9
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
10
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13
|
-
var __spreadValues = (a, b) => {
|
|
14
|
-
for (var prop in b || (b = {}))
|
|
15
|
-
if (__hasOwnProp.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
if (__getOwnPropSymbols)
|
|
18
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
19
|
-
if (__propIsEnum.call(b, prop))
|
|
20
|
-
__defNormalProp(a, prop, b[prop]);
|
|
21
|
-
}
|
|
22
|
-
return a;
|
|
23
|
-
};
|
|
24
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
6
|
const SearchResultItem = ({
|
|
26
7
|
data,
|
|
27
8
|
searchTerm,
|
|
@@ -30,10 +11,11 @@ const SearchResultItem = ({
|
|
|
30
11
|
const { title, category, Component, props } = data;
|
|
31
12
|
const noTextDecoration = { textDecoration: "none" };
|
|
32
13
|
const textProps = { fontColor: "orange", fontWeight: "bold" };
|
|
33
|
-
return /* @__PURE__ */ React.createElement(Component,
|
|
14
|
+
return /* @__PURE__ */ React.createElement(Component, {
|
|
15
|
+
...props,
|
|
34
16
|
style: noTextDecoration,
|
|
35
17
|
onClick: toggle
|
|
36
|
-
}
|
|
18
|
+
}, /* @__PURE__ */ React.createElement(StyledSearchItemContainer, null, /* @__PURE__ */ React.createElement(Text, {
|
|
37
19
|
typography: "base",
|
|
38
20
|
colorVariant: "secondary",
|
|
39
21
|
colorTone: "dark"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchResultItem.js","sources":["../../../../../../src/components/molecules/Menubar/SearchResultItem/SearchResultItem.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, TextProps } from '@tecsinapse/react-core';\nimport { MostUsedType } from '../types';\nimport { StyledSearchItemContainer, HighlightText } from './styled';\nimport { highlight } from './utils';\n\ninterface SearchResultItem {\n data: MostUsedType;\n searchTerm: string;\n toggle: () => void;\n}\n\nconst SearchResultItem: React.FC<SearchResultItem> = ({\n data,\n searchTerm,\n toggle,\n}) => {\n const { title, category, Component, props } = data;\n const noTextDecoration = { textDecoration: 'none' };\n\n const textProps: TextProps = { fontColor: 'orange', fontWeight: 'bold' };\n\n return (\n <Component {...props} style={noTextDecoration} onClick={toggle}>\n <StyledSearchItemContainer>\n <Text typography=\"base\" colorVariant=\"secondary\" colorTone=\"dark\">\n {highlight(searchTerm, title, HighlightText, textProps)}\n </Text>\n <Text\n typography=\"sub\"\n fontWeight=\"bold\"\n colorVariant=\"secondary\"\n colorTone=\"medium\"\n >\n {category}\n </Text>\n </StyledSearchItemContainer>\n </Component>\n );\n};\n\nexport default SearchResultItem;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SearchResultItem.js","sources":["../../../../../../src/components/molecules/Menubar/SearchResultItem/SearchResultItem.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, TextProps } from '@tecsinapse/react-core';\nimport { MostUsedType } from '../types';\nimport { StyledSearchItemContainer, HighlightText } from './styled';\nimport { highlight } from './utils';\n\ninterface SearchResultItem {\n data: MostUsedType;\n searchTerm: string;\n toggle: () => void;\n}\n\nconst SearchResultItem: React.FC<SearchResultItem> = ({\n data,\n searchTerm,\n toggle,\n}) => {\n const { title, category, Component, props } = data;\n const noTextDecoration = { textDecoration: 'none' };\n\n const textProps: TextProps = { fontColor: 'orange', fontWeight: 'bold' };\n\n return (\n <Component {...props} style={noTextDecoration} onClick={toggle}>\n <StyledSearchItemContainer>\n <Text typography=\"base\" colorVariant=\"secondary\" colorTone=\"dark\">\n {highlight(searchTerm, title, HighlightText, textProps)}\n </Text>\n <Text\n typography=\"sub\"\n fontWeight=\"bold\"\n colorVariant=\"secondary\"\n colorTone=\"medium\"\n >\n {category}\n </Text>\n </StyledSearchItemContainer>\n </Component>\n );\n};\n\nexport default SearchResultItem;\n"],"names":[],"mappings":";;;;;AAYA,MAAM,mBAA+C,CAAC;AAAA,EACpD,IAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AACF,CAAM,KAAA;AACJ,EAAA,MAAM,EAAE,KAAA,EAAO,QAAU,EAAA,SAAA,EAAW,OAAU,GAAA,IAAA,CAAA;AAC9C,EAAM,MAAA,gBAAA,GAAmB,EAAE,cAAA,EAAgB,MAAO,EAAA,CAAA;AAElD,EAAA,MAAM,SAAuB,GAAA,EAAE,SAAW,EAAA,QAAA,EAAU,YAAY,MAAO,EAAA,CAAA;AAEvE,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAW,GAAG,KAAA;AAAA,IAAO,KAAO,EAAA,gBAAA;AAAA,IAAkB,OAAS,EAAA,MAAA;AAAA,GACtD,kBAAA,KAAA,CAAA,aAAA,CAAC,iDACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAK,UAAW,EAAA,MAAA;AAAA,IAAO,YAAa,EAAA,WAAA;AAAA,IAAY,SAAU,EAAA,MAAA;AAAA,GAAA,EACxD,UAAU,UAAY,EAAA,KAAA,EAAO,eAAe,SAAS,CACxD,mBACC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IACC,UAAW,EAAA,KAAA;AAAA,IACX,UAAW,EAAA,MAAA;AAAA,IACX,YAAa,EAAA,WAAA;AAAA,IACb,SAAU,EAAA,QAAA;AAAA,GAET,EAAA,QACH,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,21 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
-
var __spreadValues = (a, b) => {
|
|
9
|
-
for (var prop in b || (b = {}))
|
|
10
|
-
if (__hasOwnProp.call(b, prop))
|
|
11
|
-
__defNormalProp(a, prop, b[prop]);
|
|
12
|
-
if (__getOwnPropSymbols)
|
|
13
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
-
if (__propIsEnum.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
}
|
|
17
|
-
return a;
|
|
18
|
-
};
|
|
19
3
|
const normalize = (str) => {
|
|
20
4
|
return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[-[\]{}()*+?.,\\^$|#]/g, " ").toLowerCase();
|
|
21
5
|
};
|
|
@@ -45,9 +29,10 @@ const highlightReplacer = (searchTerm, textToReplace, Component, props) => {
|
|
|
45
29
|
const indexes = matches.map((match) => match.index);
|
|
46
30
|
const splited = matchSpliter(textToReplace, indexes, searchTerm.length);
|
|
47
31
|
return splited.map((value, idx) => {
|
|
48
|
-
return normalize(value) === search ? /* @__PURE__ */ React.createElement(Component,
|
|
49
|
-
key: `highlight-${value}${idx}
|
|
50
|
-
|
|
32
|
+
return normalize(value) === search ? /* @__PURE__ */ React.createElement(Component, {
|
|
33
|
+
key: `highlight-${value}${idx}`,
|
|
34
|
+
...props
|
|
35
|
+
}, value) : /* @__PURE__ */ React.createElement(React.Fragment, null, value);
|
|
51
36
|
});
|
|
52
37
|
};
|
|
53
38
|
const highlight = (searchTerm, textToReplace, Component, props) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../../../../src/components/molecules/Menubar/SearchResultItem/utils.tsx"],"sourcesContent":["import React from 'react';\n\nconst normalize = (str: string): string => {\n return str\n .normalize('NFD')\n .replace(/[\\u0300-\\u036f]/g, '')\n .replace(/[-[\\]{}()*+?.,\\\\^$|#]/g, ' ')\n .toLowerCase();\n};\n\nconst matchSpliter = (\n str: string,\n indexes: number[],\n size: number\n): string[] => {\n const result: string[] = [];\n let currentIndex = 0;\n\n indexes.forEach((index: number) => {\n result.push(str.substring(currentIndex, index));\n result.push(str.substring(index, index + size));\n currentIndex = index + size;\n });\n\n result.push(str.substring(currentIndex, str.length));\n\n return result.filter(e => e);\n};\n\nexport const stringMatcher = (\n searchTerm: string,\n textToReplace: string\n): RegExpMatchArray[] => {\n const s = normalize(searchTerm);\n const tx = normalize(textToReplace);\n\n const r = new RegExp(`(${s})`, 'g');\n\n return Array.from(tx.matchAll(r));\n};\n\nconst highlightReplacer = <T,>(\n searchTerm: string,\n textToReplace: string,\n Component: React.ElementType,\n props: T\n): React.ReactNode => {\n const search = normalize(searchTerm);\n const matches = stringMatcher(searchTerm, textToReplace);\n\n if (matches.length <= 0) {\n return textToReplace;\n }\n\n const indexes: number[] = matches.map(match => match.index) as number[];\n const splited = matchSpliter(textToReplace, indexes, searchTerm.length);\n\n return splited.map((value, idx) => {\n return normalize(value) === search ? (\n <Component key={`highlight-${value}${idx}`} {...props}>\n {value}\n </Component>\n ) : (\n <>{value}</>\n );\n });\n};\n\nexport const highlight = <T,>(\n searchTerm: string,\n textToReplace: string,\n Component: React.ElementType,\n props: T\n): React.ReactNode => {\n if (textToReplace && searchTerm) {\n return highlightReplacer(searchTerm, textToReplace, Component, props);\n }\n\n return textToReplace;\n};\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../../../../src/components/molecules/Menubar/SearchResultItem/utils.tsx"],"sourcesContent":["import React from 'react';\n\nconst normalize = (str: string): string => {\n return str\n .normalize('NFD')\n .replace(/[\\u0300-\\u036f]/g, '')\n .replace(/[-[\\]{}()*+?.,\\\\^$|#]/g, ' ')\n .toLowerCase();\n};\n\nconst matchSpliter = (\n str: string,\n indexes: number[],\n size: number\n): string[] => {\n const result: string[] = [];\n let currentIndex = 0;\n\n indexes.forEach((index: number) => {\n result.push(str.substring(currentIndex, index));\n result.push(str.substring(index, index + size));\n currentIndex = index + size;\n });\n\n result.push(str.substring(currentIndex, str.length));\n\n return result.filter(e => e);\n};\n\nexport const stringMatcher = (\n searchTerm: string,\n textToReplace: string\n): RegExpMatchArray[] => {\n const s = normalize(searchTerm);\n const tx = normalize(textToReplace);\n\n const r = new RegExp(`(${s})`, 'g');\n\n return Array.from(tx.matchAll(r));\n};\n\nconst highlightReplacer = <T,>(\n searchTerm: string,\n textToReplace: string,\n Component: React.ElementType,\n props: T\n): React.ReactNode => {\n const search = normalize(searchTerm);\n const matches = stringMatcher(searchTerm, textToReplace);\n\n if (matches.length <= 0) {\n return textToReplace;\n }\n\n const indexes: number[] = matches.map(match => match.index) as number[];\n const splited = matchSpliter(textToReplace, indexes, searchTerm.length);\n\n return splited.map((value, idx) => {\n return normalize(value) === search ? (\n <Component key={`highlight-${value}${idx}`} {...props}>\n {value}\n </Component>\n ) : (\n <>{value}</>\n );\n });\n};\n\nexport const highlight = <T,>(\n searchTerm: string,\n textToReplace: string,\n Component: React.ElementType,\n props: T\n): React.ReactNode => {\n if (textToReplace && searchTerm) {\n return highlightReplacer(searchTerm, textToReplace, Component, props);\n }\n\n return textToReplace;\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,19 +1,3 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
-
var __spreadValues = (a, b) => {
|
|
7
|
-
for (var prop in b || (b = {}))
|
|
8
|
-
if (__hasOwnProp.call(b, prop))
|
|
9
|
-
__defNormalProp(a, prop, b[prop]);
|
|
10
|
-
if (__getOwnPropSymbols)
|
|
11
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
-
if (__propIsEnum.call(b, prop))
|
|
13
|
-
__defNormalProp(a, prop, b[prop]);
|
|
14
|
-
}
|
|
15
|
-
return a;
|
|
16
|
-
};
|
|
17
1
|
const getDefaultInputContainerStyles = {
|
|
18
2
|
transitionDuration: "250ms",
|
|
19
3
|
transitionProperty: "opacity scale transform",
|
|
@@ -58,8 +42,14 @@ const getContainerOpenMenuTransform = {
|
|
|
58
42
|
transform: "scale(0.99, 0.99) translateY(0px)"
|
|
59
43
|
}
|
|
60
44
|
};
|
|
61
|
-
const getInputContainerStyles = (state) =>
|
|
62
|
-
|
|
45
|
+
const getInputContainerStyles = (state) => ({
|
|
46
|
+
...getDefaultInputContainerStyles,
|
|
47
|
+
...getInputContainerTransform[state]
|
|
48
|
+
});
|
|
49
|
+
const getContainerOpenMenuStyles = (state) => ({
|
|
50
|
+
...getDefaultContainerOpenMenuStyles,
|
|
51
|
+
...getContainerOpenMenuTransform[state]
|
|
52
|
+
});
|
|
63
53
|
|
|
64
54
|
export { getContainerOpenMenuStyles, getInputContainerStyles };
|
|
65
55
|
//# sourceMappingURL=animations.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animations.js","sources":["../../../../../src/components/molecules/Menubar/animations.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { TransitionStatus } from 'react-transition-group';\n\nconst getDefaultInputContainerStyles = {\n transitionDuration: '250ms',\n transitionProperty: 'opacity scale transform',\n transitionTimingFunction: 'ease-in-out',\n};\n\nconst getDefaultContainerOpenMenuStyles = {\n transitionDuration: '250ms',\n transitionProperty: 'opacity scale transform',\n transitionTimingFunction: 'ease-in-out',\n};\n\nconst getInputContainerTransform = {\n entered: {\n transform: 'scale(1, 1) translateY(0px)',\n },\n entering: {\n opacity: 0.5,\n transform: 'scale(0.99, 0.99) translateY(-5px)',\n },\n exited: {\n opacity: 0,\n transform: 'scale(0.99, 0.99) translateY(-50px)',\n },\n exiting: {\n opacity: 0.5,\n transform: 'scale(0.99, 0.99) translateY(-5px)',\n },\n};\n\nconst getContainerOpenMenuTransform = {\n entered: {\n transform: 'scale(1, 1) translateY(0px) ',\n },\n entering: {\n opacity: 0.95,\n transform: 'scale(0.99, 0.99) translateY(0px)',\n },\n exited: {\n opacity: 0,\n transform: 'scale(0.99, 0.99) translateY(-600px)',\n },\n exiting: {\n opacity: 0.95,\n transform: 'scale(0.99, 0.99) translateY(0px)',\n },\n};\n\nexport const getInputContainerStyles = (\n state: TransitionStatus\n): CSSProperties => ({\n ...getDefaultInputContainerStyles,\n ...getInputContainerTransform[state],\n});\n\nexport const getContainerOpenMenuStyles = (\n state: TransitionStatus\n): CSSProperties => ({\n ...getDefaultContainerOpenMenuStyles,\n ...getContainerOpenMenuTransform[state],\n});\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"animations.js","sources":["../../../../../src/components/molecules/Menubar/animations.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { TransitionStatus } from 'react-transition-group';\n\nconst getDefaultInputContainerStyles = {\n transitionDuration: '250ms',\n transitionProperty: 'opacity scale transform',\n transitionTimingFunction: 'ease-in-out',\n};\n\nconst getDefaultContainerOpenMenuStyles = {\n transitionDuration: '250ms',\n transitionProperty: 'opacity scale transform',\n transitionTimingFunction: 'ease-in-out',\n};\n\nconst getInputContainerTransform = {\n entered: {\n transform: 'scale(1, 1) translateY(0px)',\n },\n entering: {\n opacity: 0.5,\n transform: 'scale(0.99, 0.99) translateY(-5px)',\n },\n exited: {\n opacity: 0,\n transform: 'scale(0.99, 0.99) translateY(-50px)',\n },\n exiting: {\n opacity: 0.5,\n transform: 'scale(0.99, 0.99) translateY(-5px)',\n },\n};\n\nconst getContainerOpenMenuTransform = {\n entered: {\n transform: 'scale(1, 1) translateY(0px) ',\n },\n entering: {\n opacity: 0.95,\n transform: 'scale(0.99, 0.99) translateY(0px)',\n },\n exited: {\n opacity: 0,\n transform: 'scale(0.99, 0.99) translateY(-600px)',\n },\n exiting: {\n opacity: 0.95,\n transform: 'scale(0.99, 0.99) translateY(0px)',\n },\n};\n\nexport const getInputContainerStyles = (\n state: TransitionStatus\n): CSSProperties => ({\n ...getDefaultInputContainerStyles,\n ...getInputContainerTransform[state],\n});\n\nexport const getContainerOpenMenuStyles = (\n state: TransitionStatus\n): CSSProperties => ({\n ...getDefaultContainerOpenMenuStyles,\n ...getContainerOpenMenuTransform[state],\n});\n"],"names":[],"mappings":"AAGA,MAAM,8BAAiC,GAAA;AAAA,EACrC,kBAAoB,EAAA,OAAA;AAAA,EACpB,kBAAoB,EAAA,yBAAA;AAAA,EACpB,wBAA0B,EAAA,aAAA;AAC5B,CAAA,CAAA;AAEA,MAAM,iCAAoC,GAAA;AAAA,EACxC,kBAAoB,EAAA,OAAA;AAAA,EACpB,kBAAoB,EAAA,yBAAA;AAAA,EACpB,wBAA0B,EAAA,aAAA;AAC5B,CAAA,CAAA;AAEA,MAAM,0BAA6B,GAAA;AAAA,EACjC,OAAS,EAAA;AAAA,IACP,SAAW,EAAA,6BAAA;AAAA,GACb;AAAA,EACA,QAAU,EAAA;AAAA,IACR,OAAS,EAAA,GAAA;AAAA,IACT,SAAW,EAAA,oCAAA;AAAA,GACb;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,OAAS,EAAA,CAAA;AAAA,IACT,SAAW,EAAA,qCAAA;AAAA,GACb;AAAA,EACA,OAAS,EAAA;AAAA,IACP,OAAS,EAAA,GAAA;AAAA,IACT,SAAW,EAAA,oCAAA;AAAA,GACb;AACF,CAAA,CAAA;AAEA,MAAM,6BAAgC,GAAA;AAAA,EACpC,OAAS,EAAA;AAAA,IACP,SAAW,EAAA,8BAAA;AAAA,GACb;AAAA,EACA,QAAU,EAAA;AAAA,IACR,OAAS,EAAA,IAAA;AAAA,IACT,SAAW,EAAA,mCAAA;AAAA,GACb;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,OAAS,EAAA,CAAA;AAAA,IACT,SAAW,EAAA,sCAAA;AAAA,GACb;AAAA,EACA,OAAS,EAAA;AAAA,IACP,OAAS,EAAA,IAAA;AAAA,IACT,SAAW,EAAA,mCAAA;AAAA,GACb;AACF,CAAA,CAAA;AAEa,MAAA,uBAAA,GAA0B,CACrC,KACmB,MAAA;AAAA,EACnB,GAAG,8BAAA;AAAA,EACH,GAAG,0BAA2B,CAAA,KAAA,CAAA;AAChC,CAAA,EAAA;AAEa,MAAA,0BAAA,GAA6B,CACxC,KACmB,MAAA;AAAA,EACnB,GAAG,iCAAA;AAAA,EACH,GAAG,6BAA8B,CAAA,KAAA,CAAA;AACnC,CAAA;;;;"}
|
|
@@ -2,7 +2,6 @@ const filterAndTransform = (options, search) => {
|
|
|
2
2
|
const normalized = [];
|
|
3
3
|
options.forEach((option) => {
|
|
4
4
|
option.items.forEach((item) => {
|
|
5
|
-
var _a;
|
|
6
5
|
if (item.title.toLowerCase().startsWith(search)) {
|
|
7
6
|
normalized.push({
|
|
8
7
|
title: item.title,
|
|
@@ -11,7 +10,7 @@ const filterAndTransform = (options, search) => {
|
|
|
11
10
|
category: option.title
|
|
12
11
|
});
|
|
13
12
|
}
|
|
14
|
-
|
|
13
|
+
item.items?.forEach((sub) => {
|
|
15
14
|
if (sub.title.toLowerCase().startsWith(search)) {
|
|
16
15
|
normalized.push({
|
|
17
16
|
title: sub.title,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../../../src/components/molecules/Menubar/utils.ts"],"sourcesContent":["import { MostUsedType, OptionsType } from './types';\n\nexport const filterAndTransform = (\n options: OptionsType[],\n search: string\n): MostUsedType[] => {\n const normalized: MostUsedType[] = [];\n options.forEach(option => {\n option.items.forEach(item => {\n if (item.title.toLowerCase().startsWith(search)) {\n normalized.push({\n title: item.title,\n Component: item.Component,\n props: item.props,\n category: option.title,\n });\n }\n item.items?.forEach(sub => {\n if (sub.title.toLowerCase().startsWith(search)) {\n normalized.push({\n title: sub.title,\n Component: sub.Component,\n props: sub.props,\n category: option.title,\n });\n }\n });\n });\n });\n\n return normalized;\n};\n"],"names":[],"mappings":"AAEa,MAAA,kBAAA,GAAqB,CAChC,OAAA,EACA,MACmB,KAAA;AACnB,EAAA,MAAM,aAA6B,EAAC,CAAA;AACpC,EAAA,OAAA,CAAQ,QAAQ,CAAU,MAAA,KAAA;AACxB,IAAO,MAAA,CAAA,KAAA,CAAM,QAAQ,CAAQ,IAAA,KAAA;
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../../../src/components/molecules/Menubar/utils.ts"],"sourcesContent":["import { MostUsedType, OptionsType } from './types';\n\nexport const filterAndTransform = (\n options: OptionsType[],\n search: string\n): MostUsedType[] => {\n const normalized: MostUsedType[] = [];\n options.forEach(option => {\n option.items.forEach(item => {\n if (item.title.toLowerCase().startsWith(search)) {\n normalized.push({\n title: item.title,\n Component: item.Component,\n props: item.props,\n category: option.title,\n });\n }\n item.items?.forEach(sub => {\n if (sub.title.toLowerCase().startsWith(search)) {\n normalized.push({\n title: sub.title,\n Component: sub.Component,\n props: sub.props,\n category: option.title,\n });\n }\n });\n });\n });\n\n return normalized;\n};\n"],"names":[],"mappings":"AAEa,MAAA,kBAAA,GAAqB,CAChC,OAAA,EACA,MACmB,KAAA;AACnB,EAAA,MAAM,aAA6B,EAAC,CAAA;AACpC,EAAA,OAAA,CAAQ,QAAQ,CAAU,MAAA,KAAA;AACxB,IAAO,MAAA,CAAA,KAAA,CAAM,QAAQ,CAAQ,IAAA,KAAA;AAC3B,MAAA,IAAI,KAAK,KAAM,CAAA,WAAA,EAAc,CAAA,UAAA,CAAW,MAAM,CAAG,EAAA;AAC/C,QAAA,UAAA,CAAW,IAAK,CAAA;AAAA,UACd,OAAO,IAAK,CAAA,KAAA;AAAA,UACZ,WAAW,IAAK,CAAA,SAAA;AAAA,UAChB,OAAO,IAAK,CAAA,KAAA;AAAA,UACZ,UAAU,MAAO,CAAA,KAAA;AAAA,SAClB,CAAA,CAAA;AAAA,OACH;AACA,MAAK,IAAA,CAAA,KAAA,EAAO,QAAQ,CAAO,GAAA,KAAA;AACzB,QAAA,IAAI,IAAI,KAAM,CAAA,WAAA,EAAc,CAAA,UAAA,CAAW,MAAM,CAAG,EAAA;AAC9C,UAAA,UAAA,CAAW,IAAK,CAAA;AAAA,YACd,OAAO,GAAI,CAAA,KAAA;AAAA,YACX,WAAW,GAAI,CAAA,SAAA;AAAA,YACf,OAAO,GAAI,CAAA,KAAA;AAAA,YACX,UAAU,MAAO,CAAA,KAAA;AAAA,WAClB,CAAA,CAAA;AAAA,SACH;AAAA,OACD,CAAA,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GACF,CAAA,CAAA;AAED,EAAO,OAAA,UAAA,CAAA;AACT;;;;"}
|
|
@@ -23,11 +23,11 @@ const Dropdown = ({
|
|
|
23
23
|
const [searchArg, setSearchArg] = useDebouncedState("", onSearch);
|
|
24
24
|
const lengthOptions = React.useMemo(() => options.length, [options]);
|
|
25
25
|
const [checkedAll, setCheckedAll] = React.useState(
|
|
26
|
-
type === "multi" &&
|
|
26
|
+
type === "multi" && value?.length === lengthOptions
|
|
27
27
|
);
|
|
28
28
|
React.useEffect(() => {
|
|
29
29
|
if (type === "multi") {
|
|
30
|
-
lengthOptions ===
|
|
30
|
+
lengthOptions === value?.length ? setCheckedAll(true) : setCheckedAll(false);
|
|
31
31
|
}
|
|
32
32
|
}, [value, type, lengthOptions]);
|
|
33
33
|
const onClickCheckAll = React.useCallback(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sources":["../../../../../../src/components/molecules/Select/Dropdown/Dropdown.tsx"],"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 as Data[]).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(\n 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 as Data[]).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"],"names":[],"mappings":";;;;;;AAeA,MAAM,SAAA,GAAY,EAAE,KAAA,EAAO,MAAO,EAAA,CAAA;AAElC,MAAM,WAAW,CAAwC;AAAA,EACvD,OAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA;AAAA,EACA,cAAA;AAAA,EACA,kBAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAA;AAAA,EACA,oBAAA;AACF,CAEmB,KAAA;AACjB,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,CAAI,GAAA,iBAAA,CAA0B,IAAI,QAAQ,CAAA,CAAA;AACxE,EAAM,MAAA,aAAA,GAAgB,MAAM,OAAQ,CAAA,MAAM,QAAQ,MAAQ,EAAA,CAAC,OAAO,CAAC,CAAA,CAAA;AAEnE,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,KAAM,CAAA,QAAA;AAAA,IACxC,IAAA,KAAS,OAAY,IAAA,
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sources":["../../../../../../src/components/molecules/Select/Dropdown/Dropdown.tsx"],"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 as Data[]).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(\n 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 as Data[]).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"],"names":[],"mappings":"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"}
|
|
@@ -2,76 +2,29 @@ import { PressableInputContainer, Text } from '@tecsinapse/react-core';
|
|
|
2
2
|
import React, { useState, useEffect } from 'react';
|
|
3
3
|
import { Transition } from 'react-transition-group';
|
|
4
4
|
import { useClickAwayListener } from '../../../hooks/useClickAwayListener.js';
|
|
5
|
-
import {
|
|
5
|
+
import { defaultStyles, transition } from './animations.js';
|
|
6
6
|
import Dropdown from './Dropdown/Dropdown.js';
|
|
7
7
|
import { getDisplayValue } from './functions.js';
|
|
8
8
|
import { StyledContainer, StyledInputContainer, RightComponent } from './styled.js';
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}
|
|
28
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
29
|
-
var __objRest = (source, exclude) => {
|
|
30
|
-
var target = {};
|
|
31
|
-
for (var prop in source)
|
|
32
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
33
|
-
target[prop] = source[prop];
|
|
34
|
-
if (source != null && __getOwnPropSymbols)
|
|
35
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
36
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
37
|
-
target[prop] = source[prop];
|
|
38
|
-
}
|
|
39
|
-
return target;
|
|
40
|
-
};
|
|
41
|
-
const Select = (_a) => {
|
|
42
|
-
var _b = _a, {
|
|
43
|
-
value,
|
|
44
|
-
options,
|
|
45
|
-
keyExtractor,
|
|
46
|
-
onSelect,
|
|
47
|
-
type,
|
|
48
|
-
labelExtractor,
|
|
49
|
-
placeholder,
|
|
50
|
-
onSearch,
|
|
51
|
-
searchBarPlaceholder = "Busque a op\xE7\xE3o desejada",
|
|
52
|
-
hideSearchBar = true,
|
|
53
|
-
label,
|
|
54
|
-
disabled = false,
|
|
55
|
-
anchor = "bottom",
|
|
56
|
-
displayTextProps,
|
|
57
|
-
selectAllLabel = "Selecionar todos"
|
|
58
|
-
} = _b, rest = __objRest(_b, [
|
|
59
|
-
"value",
|
|
60
|
-
"options",
|
|
61
|
-
"keyExtractor",
|
|
62
|
-
"onSelect",
|
|
63
|
-
"type",
|
|
64
|
-
"labelExtractor",
|
|
65
|
-
"placeholder",
|
|
66
|
-
"onSearch",
|
|
67
|
-
"searchBarPlaceholder",
|
|
68
|
-
"hideSearchBar",
|
|
69
|
-
"label",
|
|
70
|
-
"disabled",
|
|
71
|
-
"anchor",
|
|
72
|
-
"displayTextProps",
|
|
73
|
-
"selectAllLabel"
|
|
74
|
-
]);
|
|
10
|
+
const Select = ({
|
|
11
|
+
value,
|
|
12
|
+
options,
|
|
13
|
+
keyExtractor,
|
|
14
|
+
onSelect,
|
|
15
|
+
type,
|
|
16
|
+
labelExtractor,
|
|
17
|
+
placeholder,
|
|
18
|
+
onSearch,
|
|
19
|
+
searchBarPlaceholder = "Busque a op\xE7\xE3o desejada",
|
|
20
|
+
hideSearchBar = true,
|
|
21
|
+
label,
|
|
22
|
+
disabled = false,
|
|
23
|
+
anchor = "bottom",
|
|
24
|
+
displayTextProps,
|
|
25
|
+
selectAllLabel = "Selecionar todos",
|
|
26
|
+
...rest
|
|
27
|
+
}) => {
|
|
75
28
|
const [dropDownVisible, setDropDownVisible] = React.useState(false);
|
|
76
29
|
const [selectOptions, setSelectOptions] = useState([]);
|
|
77
30
|
const refDropDown = React.useRef(null);
|
|
@@ -98,7 +51,7 @@ const Select = (_a) => {
|
|
|
98
51
|
try {
|
|
99
52
|
const result = await options();
|
|
100
53
|
if (result) {
|
|
101
|
-
setSelectOptions(result
|
|
54
|
+
setSelectOptions(result ?? []);
|
|
102
55
|
}
|
|
103
56
|
} catch (e) {
|
|
104
57
|
}
|
|
@@ -143,24 +96,26 @@ const Select = (_a) => {
|
|
|
143
96
|
() => setDropDownVisible((prev) => !prev),
|
|
144
97
|
[setDropDownVisible]
|
|
145
98
|
);
|
|
146
|
-
return /* @__PURE__ */ React.createElement(StyledContainer,
|
|
147
|
-
ref: refDropDown
|
|
148
|
-
|
|
99
|
+
return /* @__PURE__ */ React.createElement(StyledContainer, {
|
|
100
|
+
ref: refDropDown,
|
|
101
|
+
...rest
|
|
102
|
+
}, /* @__PURE__ */ React.createElement(StyledInputContainer, {
|
|
149
103
|
onFocus: handlePressInput
|
|
150
104
|
}, /* @__PURE__ */ React.createElement(PressableInputContainer, {
|
|
151
105
|
label: _label,
|
|
152
106
|
onPress,
|
|
153
107
|
disabled,
|
|
154
108
|
rightComponent: RightComponent
|
|
155
|
-
}, /* @__PURE__ */ React.createElement(Text,
|
|
109
|
+
}, /* @__PURE__ */ React.createElement(Text, {
|
|
110
|
+
...displayTextProps,
|
|
156
111
|
ellipsizeMode: "tail",
|
|
157
112
|
numberOfLines: 1,
|
|
158
113
|
fontWeight: "bold"
|
|
159
|
-
}
|
|
114
|
+
}, displayValue))), /* @__PURE__ */ React.createElement(Transition, {
|
|
160
115
|
in: dropDownVisible,
|
|
161
116
|
timeout: 300
|
|
162
117
|
}, (state) => /* @__PURE__ */ React.createElement(Dropdown, {
|
|
163
|
-
options: selectOptions
|
|
118
|
+
options: selectOptions ?? [],
|
|
164
119
|
onSelect,
|
|
165
120
|
value,
|
|
166
121
|
type,
|
|
@@ -169,7 +124,7 @@ const Select = (_a) => {
|
|
|
169
124
|
hideSearchBar,
|
|
170
125
|
searchBarPlaceholder,
|
|
171
126
|
onSearch: handleOnSearch,
|
|
172
|
-
style:
|
|
127
|
+
style: { ...defaultStyles, ...transition[anchor][state] },
|
|
173
128
|
setDropDownVisible,
|
|
174
129
|
anchor,
|
|
175
130
|
selectAllLabel
|