@tecsinapse/react-web-kit 1.6.1 → 1.6.5
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 +42 -0
- package/dist/components/molecules/Breadcrumbs/Breadcrumbs.d.ts +3 -3
- package/dist/components/molecules/Breadcrumbs/Breadcrumbs.js +3 -3
- package/dist/components/molecules/Breadcrumbs/Breadcrumbs.js.map +1 -1
- package/dist/components/molecules/Breadcrumbs/index.d.ts +1 -1
- package/dist/components/molecules/Breadcrumbs/index.js +6 -0
- package/dist/components/molecules/Breadcrumbs/index.js.map +1 -1
- package/dist/components/molecules/Menubar/MenuBlock/MenuBlock.js +3 -1
- package/dist/components/molecules/Menubar/MenuBlock/MenuBlock.js.map +1 -1
- package/dist/components/molecules/Menubar/Menubar.js +2 -1
- package/dist/components/molecules/Menubar/Menubar.js.map +1 -1
- package/dist/components/molecules/Menubar/SearchResultItem/SearchResultItem.d.ts +1 -0
- package/dist/components/molecules/Menubar/SearchResultItem/SearchResultItem.js +4 -2
- package/dist/components/molecules/Menubar/SearchResultItem/SearchResultItem.js.map +1 -1
- package/dist/components/molecules/Menubar/index.d.ts +1 -0
- package/dist/components/molecules/Menubar/index.js +24 -1
- package/dist/components/molecules/Menubar/index.js.map +1 -1
- package/dist/components/molecules/Menubar/styled.js +5 -2
- package/dist/components/molecules/Menubar/styled.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +28 -0
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
- package/src/components/atoms/Accordion/Accordion.stories.tsx +1 -1
- package/src/components/atoms/Badge/Badge.stories.tsx +1 -1
- package/src/components/atoms/Button/Button.stories.tsx +1 -1
- package/src/components/atoms/Input/Input.stories.tsx +1 -1
- package/src/components/atoms/Modal/Modal.stories.tsx +1 -1
- package/src/components/atoms/Skeleton/Skeleton.stories.tsx +1 -1
- package/src/components/atoms/Table/Table.stories.tsx +1 -1
- package/src/components/atoms/Tag/Tag.stories.tsx +1 -1
- package/src/components/molecules/Breadcrumbs/Breadcrumbs.stories.tsx +1 -1
- package/src/components/molecules/Breadcrumbs/Breadcrumbs.tsx +5 -5
- package/src/components/molecules/Breadcrumbs/index.ts +5 -1
- package/src/components/molecules/Drawer/Drawer.stories.tsx +1 -1
- package/src/components/molecules/InputPassword/InputPassword.stories.tsx +1 -1
- package/src/components/molecules/Menubar/MenuBlock/MenuBlock.tsx +2 -2
- package/src/components/molecules/Menubar/Menubar.stories.tsx +1 -2
- package/src/components/molecules/Menubar/Menubar.tsx +1 -0
- package/src/components/molecules/Menubar/SearchResultItem/SearchResultItem.tsx +7 -2
- package/src/components/molecules/Menubar/index.ts +5 -0
- package/src/components/molecules/Menubar/styled.ts +3 -2
- package/src/components/molecules/Select/Select.stories.tsx +1 -1
- package/src/components/molecules/Snackbar/Snackbar.stories.tsx +1 -1
- package/src/components/organisms/DataGrid/DatGrid.stories.tsx +1 -1
- package/src/index.ts +8 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,48 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.6.5](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.6.4...@tecsinapse/react-web-kit@1.6.5) (2021-09-20)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @tecsinapse/react-web-kit
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [1.6.4](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.6.3...@tecsinapse/react-web-kit@1.6.4) (2021-09-16)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
|
|
19
|
+
* **menubar:** key on menu block ([a977862](https://github.com/tecsinapse/design-system/commit/a9778624bfb19544d1fccb4ec058306e406fff5f))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## [1.6.3](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.6.2...@tecsinapse/react-web-kit@1.6.3) (2021-09-16)
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
### Bug Fixes
|
|
29
|
+
|
|
30
|
+
* **menubar:** fixing toggle for search items ([330e6b8](https://github.com/tecsinapse/design-system/commit/330e6b8467945c55bbcbaa4876cd160224ef509d))
|
|
31
|
+
* **menubar:** fixing toggle for search items ([3aefce8](https://github.com/tecsinapse/design-system/commit/3aefce867cab7a12bafdef181148fc48654044ff))
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
## [1.6.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.6.1...@tecsinapse/react-web-kit@1.6.2) (2021-09-15)
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
### Bug Fixes
|
|
41
|
+
|
|
42
|
+
* **menubar:** fixing z-index ([7f8396f](https://github.com/tecsinapse/design-system/commit/7f8396f77b41d32e21eb0cfef9b0c706c13ef454))
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
|
6
48
|
## [1.6.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.6.0...@tecsinapse/react-web-kit@1.6.1) (2021-09-15)
|
|
7
49
|
|
|
8
50
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { ElementType, FC } from 'react';
|
|
2
|
-
declare type
|
|
2
|
+
export declare type BreadcrumbType = {
|
|
3
3
|
title: string;
|
|
4
4
|
Component: ElementType;
|
|
5
|
-
|
|
5
|
+
props?: any;
|
|
6
6
|
};
|
|
7
7
|
export interface BreadcrumbsProps {
|
|
8
|
-
breadcrumbs:
|
|
8
|
+
breadcrumbs: BreadcrumbType[];
|
|
9
9
|
}
|
|
10
10
|
declare const Breadcrumbs: FC<BreadcrumbsProps>;
|
|
11
11
|
export default Breadcrumbs;
|
|
@@ -18,14 +18,14 @@ const Breadcrumbs = ({
|
|
|
18
18
|
}) => {
|
|
19
19
|
return _react.default.createElement(_styled.StyledContainerBreadcrumbs, null, breadcrumbs.map((item, index) => {
|
|
20
20
|
const {
|
|
21
|
-
|
|
22
|
-
Component,
|
|
21
|
+
props,
|
|
22
|
+
Component = 'a',
|
|
23
23
|
title
|
|
24
24
|
} = item;
|
|
25
25
|
return _react.default.createElement(_BreadcrumbItem.BreadcrumbItem, {
|
|
26
26
|
key: index,
|
|
27
27
|
Component: Component,
|
|
28
|
-
props:
|
|
28
|
+
props: props,
|
|
29
29
|
isLast: breadcrumbs.length - 1 === index,
|
|
30
30
|
title: title
|
|
31
31
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/molecules/Breadcrumbs/Breadcrumbs.tsx"],"names":["Breadcrumbs","breadcrumbs","map","item","index","
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/molecules/Breadcrumbs/Breadcrumbs.tsx"],"names":["Breadcrumbs","breadcrumbs","map","item","index","props","Component","title","length"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAYA,MAAMA,WAAiC,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAqB;AAC7D,SACE,6BAAC,kCAAD,QACGA,WAAW,CAACC,GAAZ,CAAgB,CAACC,IAAD,EAAOC,KAAP,KAAiB;AAChC,UAAM;AAAEC,MAAAA,KAAF;AAASC,MAAAA,SAAS,GAAG,GAArB;AAA0BC,MAAAA;AAA1B,QAAoCJ,IAA1C;AACA,WACE,6BAAC,8BAAD;AACE,MAAA,GAAG,EAAEC,KADP;AAEE,MAAA,SAAS,EAAEE,SAFb;AAGE,MAAA,KAAK,EAAED,KAHT;AAIE,MAAA,MAAM,EAAEJ,WAAW,CAACO,MAAZ,GAAqB,CAArB,KAA2BJ,KAJrC;AAKE,MAAA,KAAK,EAAEG;AALT,MADF;AASD,GAXA,CADH,CADF;AAgBD,CAjBD;;eAmBeP,W","sourcesContent":["import React, { ElementType, FC } from 'react';\nimport { StyledContainerBreadcrumbs } from './styled';\nimport { BreadcrumbItem } from './BreadcrumbItem';\n\nexport type BreadcrumbType = {\n title: string;\n Component: ElementType;\n props?: any;\n};\n\nexport interface BreadcrumbsProps {\n breadcrumbs: BreadcrumbType[];\n}\n\nconst Breadcrumbs: FC<BreadcrumbsProps> = ({ breadcrumbs }) => {\n return (\n <StyledContainerBreadcrumbs>\n {breadcrumbs.map((item, index) => {\n const { props, Component = 'a', title } = item;\n return (\n <BreadcrumbItem\n key={index}\n Component={Component}\n props={props}\n isLast={breadcrumbs.length - 1 === index}\n title={title}\n />\n );\n })}\n </StyledContainerBreadcrumbs>\n );\n};\n\nexport default Breadcrumbs;\n"],"file":"Breadcrumbs.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default as Breadcrumbs, BreadcrumbsProps } from './Breadcrumbs';
|
|
1
|
+
export { default as Breadcrumbs, BreadcrumbsProps, BreadcrumbType, } from './Breadcrumbs';
|
|
@@ -15,6 +15,12 @@ Object.defineProperty(exports, "BreadcrumbsProps", {
|
|
|
15
15
|
return _Breadcrumbs.BreadcrumbsProps;
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
|
+
Object.defineProperty(exports, "BreadcrumbType", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function () {
|
|
21
|
+
return _Breadcrumbs.BreadcrumbType;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
18
24
|
|
|
19
25
|
var _Breadcrumbs = _interopRequireWildcard(require("./Breadcrumbs"));
|
|
20
26
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/molecules/Breadcrumbs/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/molecules/Breadcrumbs/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA","sourcesContent":["export {\n default as Breadcrumbs,\n BreadcrumbsProps,\n BreadcrumbType,\n} from './Breadcrumbs';\n"],"file":"index.js"}
|
|
@@ -25,7 +25,9 @@ const MenuBlock = ({
|
|
|
25
25
|
columns: 4,
|
|
26
26
|
spacingTop: "kilo",
|
|
27
27
|
spacingLeft: "mega"
|
|
28
|
-
}, options.map(data => _react.default.createElement(_react.default.Fragment,
|
|
28
|
+
}, options.map(data => _react.default.createElement(_react.default.Fragment, {
|
|
29
|
+
key: `${data.title}`
|
|
30
|
+
}, _react.default.createElement(_styled.StyledContainerMenu, null, data.leftComponents && _react.default.createElement(_styled.StyledLeftComponent, null, data.leftComponents), _react.default.createElement(_reactCore.Text, {
|
|
29
31
|
fontWeight: "bold"
|
|
30
32
|
}, data.title)), _react.default.createElement(_styled.StyledContainerItems, null, data.items.map(({
|
|
31
33
|
title,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/molecules/Menubar/MenuBlock/MenuBlock.tsx"],"names":["MenuBlock","options","toggle","map","data","
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/molecules/Menubar/MenuBlock/MenuBlock.tsx"],"names":["MenuBlock","options","toggle","map","data","title","leftComponents","items","Component","props","rightComponents","React","memo"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAMA;;;;AAOA,MAAMA,SAAmC,GAAG,CAAC;AAAEC,EAAAA,OAAF;AAAWC,EAAAA;AAAX,CAAD,KAAyB;AACnE,SACE,6BAAC,gBAAD;AAAS,IAAA,OAAO,EAAE,CAAlB;AAAqB,IAAA,UAAU,EAAC,MAAhC;AAAuC,IAAA,WAAW,EAAC;AAAnD,KACGD,OAAO,CAACE,GAAR,CAAYC,IAAI,IACf,6BAAC,cAAD,CAAO,QAAP;AAAgB,IAAA,GAAG,EAAG,GAAEA,IAAI,CAACC,KAAM;AAAnC,KACE,6BAAC,2BAAD,QACGD,IAAI,CAACE,cAAL,IACC,6BAAC,2BAAD,QAAsBF,IAAI,CAACE,cAA3B,CAFJ,EAIE,6BAAC,eAAD;AAAM,IAAA,UAAU,EAAC;AAAjB,KAAyBF,IAAI,CAACC,KAA9B,CAJF,CADF,EAOE,6BAAC,4BAAD,QACGD,IAAI,CAACG,KAAL,CAAWJ,GAAX,CACC,CAAC;AACCE,IAAAA,KADD;AAECG,IAAAA,SAFD;AAGCC,IAAAA,KAHD;AAICC,IAAAA,eAJD;AAKCH,IAAAA;AALD,GAAD,KAOE,6BAAC,kBAAD;AACE,IAAA,KAAK,EAAEA,KADT;AAEE,IAAA,GAAG,EAAEF,KAFP;AAGE,IAAA,KAAK,EAAEA,KAHT;AAIE,IAAA,SAAS,EAAEG,SAJb;AAKE,IAAA,eAAe,EAAEE,eALnB;AAME,IAAA,KAAK,EAAED,KANT;AAOE,IAAA,MAAM,EAAEP;AAPV,IARH,CADH,CAPF,CADD,CADH,CADF;AAmCD,CApCD;;eAsCeS,eAAMC,IAAN,CAAWZ,SAAX,C","sourcesContent":["import React from 'react';\nimport { Text } from '@tecsinapse/react-core';\nimport { MenuItem } from './MenuItem';\nimport {\n StyledContainerItems,\n StyledContainerMenu,\n StyledLeftComponent,\n} from './styled';\nimport { ItemsOptions, OptionsType } from '../types';\nimport { Masonry } from '../../Masonry';\n\ninterface MenuBlockProps {\n toggle: () => void;\n options: OptionsType[];\n}\n\nconst MenuBlock: React.FC<MenuBlockProps> = ({ options, toggle }) => {\n return (\n <Masonry columns={4} spacingTop=\"kilo\" spacingLeft=\"mega\">\n {options.map(data => (\n <React.Fragment key={`${data.title}`}>\n <StyledContainerMenu>\n {data.leftComponents && (\n <StyledLeftComponent>{data.leftComponents}</StyledLeftComponent>\n )}\n <Text fontWeight=\"bold\">{data.title}</Text>\n </StyledContainerMenu>\n <StyledContainerItems>\n {data.items.map(\n ({\n title,\n Component,\n props,\n rightComponents,\n items,\n }: ItemsOptions) => (\n <MenuItem\n items={items}\n key={title}\n title={title}\n Component={Component}\n rightComponents={rightComponents}\n props={props}\n toggle={toggle}\n />\n )\n )}\n </StyledContainerItems>\n </React.Fragment>\n ))}\n </Masonry>\n );\n};\n\nexport default React.memo(MenuBlock);\n"],"file":"MenuBlock.js"}
|
|
@@ -94,7 +94,8 @@ const Menubar = ({
|
|
|
94
94
|
}, searchResultsLabel)), results.map(result => _react.default.createElement(_SearchResultItem.SearchResultItem, {
|
|
95
95
|
key: `${result.title}-${result.category}`,
|
|
96
96
|
data: result,
|
|
97
|
-
searchTerm: search
|
|
97
|
+
searchTerm: search,
|
|
98
|
+
toggle: toggleOpen
|
|
98
99
|
}))))));
|
|
99
100
|
};
|
|
100
101
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/molecules/Menubar/Menubar.tsx"],"names":["Menubar","leftComponents","rightComponents","searchPlaceholder","options","mostUsed","mostUsedLabel","searchResultsLabel","searchable","search","setSearch","React","useState","results","setResults","input","setInput","state","open","setOpen","toggleOpen","useCallback","useEffect","map","result","title","category"],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/molecules/Menubar/Menubar.tsx"],"names":["Menubar","leftComponents","rightComponents","searchPlaceholder","options","mostUsed","mostUsedLabel","searchResultsLabel","searchable","search","setSearch","React","useState","results","setResults","input","setInput","state","open","setOpen","toggleOpen","useCallback","useEffect","map","result","title","category"],"mappings":"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","sourcesContent":["import React 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';\n\nexport interface MenubarProps {\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}) => {\n const [search, setSearch] = React.useState<string>('');\n const [results, setResults] = React.useState<MostUsedType[]>([]);\n const [input, setInput] = useDebouncedState('', state => setSearch(state));\n const [open, setOpen] = React.useState<boolean>(false);\n\n const toggleOpen = React.useCallback(() => 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 <>\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 </>\n );\n};\n\nexport default Menubar;\n"],"file":"Menubar.js"}
|
|
@@ -19,7 +19,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
19
19
|
|
|
20
20
|
const SearchResultItem = ({
|
|
21
21
|
data,
|
|
22
|
-
searchTerm
|
|
22
|
+
searchTerm,
|
|
23
|
+
toggle
|
|
23
24
|
}) => {
|
|
24
25
|
const {
|
|
25
26
|
title,
|
|
@@ -35,7 +36,8 @@ const SearchResultItem = ({
|
|
|
35
36
|
fontWeight: 'bold'
|
|
36
37
|
};
|
|
37
38
|
return _react.default.createElement(Component, _extends({}, props, {
|
|
38
|
-
style: noTextDecoration
|
|
39
|
+
style: noTextDecoration,
|
|
40
|
+
onClick: toggle
|
|
39
41
|
}), _react.default.createElement(_styled.StyledSearchItemContainer, null, _react.default.createElement(_reactCore.Text, {
|
|
40
42
|
typography: "base",
|
|
41
43
|
colorVariant: "secondary",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/molecules/Menubar/SearchResultItem/SearchResultItem.tsx"],"names":["SearchResultItem","data","searchTerm","title","category","Component","props","noTextDecoration","textDecoration","textProps","fontColor","fontWeight","HighlightText"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/molecules/Menubar/SearchResultItem/SearchResultItem.tsx"],"names":["SearchResultItem","data","searchTerm","toggle","title","category","Component","props","noTextDecoration","textDecoration","textProps","fontColor","fontWeight","HighlightText"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;AAQA,MAAMA,gBAA4C,GAAG,CAAC;AACpDC,EAAAA,IADoD;AAEpDC,EAAAA,UAFoD;AAGpDC,EAAAA;AAHoD,CAAD,KAI/C;AACJ,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA,SAAnB;AAA8BC,IAAAA;AAA9B,MAAwCN,IAA9C;AACA,QAAMO,gBAAgB,GAAG;AAAEC,IAAAA,cAAc,EAAE;AAAlB,GAAzB;AAEA,QAAMC,SAAoB,GAAG;AAAEC,IAAAA,SAAS,EAAE,QAAb;AAAuBC,IAAAA,UAAU,EAAE;AAAnC,GAA7B;AAEA,SACE,6BAAC,SAAD,eAAeL,KAAf;AAAsB,IAAA,KAAK,EAAEC,gBAA7B;AAA+C,IAAA,OAAO,EAAEL;AAAxD,MACE,6BAAC,iCAAD,QACE,6BAAC,eAAD;AAAM,IAAA,UAAU,EAAC,MAAjB;AAAwB,IAAA,YAAY,EAAC,WAArC;AAAiD,IAAA,SAAS,EAAC;AAA3D,KACG,sBAAUD,UAAV,EAAsBE,KAAtB,EAA6BS,qBAA7B,EAA4CH,SAA5C,CADH,CADF,EAIE,6BAAC,eAAD;AACE,IAAA,UAAU,EAAC,KADb;AAEE,IAAA,UAAU,EAAC,MAFb;AAGE,IAAA,YAAY,EAAC,WAHf;AAIE,IAAA,SAAS,EAAC;AAJZ,KAMGL,QANH,CAJF,CADF,CADF;AAiBD,CA3BD;;eA6BeL,gB","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"],"file":"SearchResultItem.js"}
|
|
@@ -4,7 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
var _exportNames = {
|
|
7
|
-
Menubar: true
|
|
7
|
+
Menubar: true,
|
|
8
|
+
MenubarOptionsType: true,
|
|
9
|
+
MenubarMostUsedType: true,
|
|
10
|
+
MenubarItemsOptions: true
|
|
8
11
|
};
|
|
9
12
|
Object.defineProperty(exports, "Menubar", {
|
|
10
13
|
enumerable: true,
|
|
@@ -12,6 +15,24 @@ Object.defineProperty(exports, "Menubar", {
|
|
|
12
15
|
return _Menubar.default;
|
|
13
16
|
}
|
|
14
17
|
});
|
|
18
|
+
Object.defineProperty(exports, "MenubarOptionsType", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function () {
|
|
21
|
+
return _types.OptionsType;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
Object.defineProperty(exports, "MenubarMostUsedType", {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
get: function () {
|
|
27
|
+
return _types.MostUsedType;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
Object.defineProperty(exports, "MenubarItemsOptions", {
|
|
31
|
+
enumerable: true,
|
|
32
|
+
get: function () {
|
|
33
|
+
return _types.ItemsOptions;
|
|
34
|
+
}
|
|
35
|
+
});
|
|
15
36
|
|
|
16
37
|
var _Menubar = _interopRequireWildcard(require("./Menubar"));
|
|
17
38
|
|
|
@@ -27,6 +48,8 @@ Object.keys(_Menubar).forEach(function (key) {
|
|
|
27
48
|
});
|
|
28
49
|
});
|
|
29
50
|
|
|
51
|
+
var _types = require("./types");
|
|
52
|
+
|
|
30
53
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
31
54
|
|
|
32
55
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/molecules/Menubar/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/molecules/Menubar/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AALA","sourcesContent":["export { default as Menubar } from './Menubar';\nexport {\n OptionsType as MenubarOptionsType,\n MostUsedType as MenubarMostUsedType,\n ItemsOptions as MenubarItemsOptions,\n} from './types';\nexport * from './Menubar';\n"],"file":"index.js"}
|
|
@@ -36,7 +36,7 @@ const StyledMenuBar = (0, _styled.default)('div')`
|
|
|
36
36
|
position: relative;
|
|
37
37
|
z-index: ${({
|
|
38
38
|
theme
|
|
39
|
-
}) => theme.zIndex.
|
|
39
|
+
}) => theme.zIndex.header};
|
|
40
40
|
background-color: ${({
|
|
41
41
|
theme
|
|
42
42
|
}) => theme.miscellaneous.surfaceColor};
|
|
@@ -97,6 +97,9 @@ const StyledContainerOpenMenu = (0, _styled.default)('div')`
|
|
|
97
97
|
theme
|
|
98
98
|
}) => theme.spacing.mega};
|
|
99
99
|
position: absolute;
|
|
100
|
+
z-index: ${({
|
|
101
|
+
theme
|
|
102
|
+
}) => theme.zIndex.header - 1};
|
|
100
103
|
width: -webkit-fill-available;
|
|
101
104
|
width: -moz-available;
|
|
102
105
|
`;
|
|
@@ -107,7 +110,7 @@ const StyledInput = (0, _native.default)(_Input.Input)`
|
|
|
107
110
|
exports.StyledInput = StyledInput;
|
|
108
111
|
const StyledInputContainer = (0, _styled.default)('div')`
|
|
109
112
|
display: flex;
|
|
110
|
-
flex: 1
|
|
113
|
+
flex: 1;
|
|
111
114
|
`;
|
|
112
115
|
exports.StyledInputContainer = StyledInputContainer;
|
|
113
116
|
const StyledSearchResultsContainer = (0, _styled.default)('div')`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/molecules/Menubar/styled.ts"],"names":["StyledIconInput","theme","spacing","centi","StyledMenuBar","zIndex","
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/molecules/Menubar/styled.ts"],"names":["StyledIconInput","theme","spacing","centi","StyledMenuBar","zIndex","header","miscellaneous","surfaceColor","deca","kilo","shadow","StyledMenuButton","Button","StyledContainerOpenMenu","borderWidth","pico","borderRadius","mili","mega","StyledInput","Input","StyledInputContainer","StyledSearchResultsContainer","StyledSearchTextContainer"],"mappings":"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","sourcesContent":["import { default as webStyled } from '@emotion/styled';\nimport { default as nativeStyled } from '@emotion/native';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\nimport { Button } from '../../atoms/Button';\nimport { Input } from '../../atoms/Input';\n\nexport const StyledIconInput = webStyled('div')<Partial<StyleProps>>`\n padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);\n padding-left: ${({ theme }) => theme.spacing.centi};\n padding-bottom: calc(${({ theme }) => theme.spacing.centi} - 2px);\n padding-right: ${({ theme }) => theme.spacing.centi};\n`;\n\nexport const StyledMenuBar = webStyled('div')<Partial<StyleProps>>`\n position: relative;\n z-index: ${({ theme }) => theme.zIndex.header};\n background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: ${({ theme }) => `${theme.spacing.deca} ${theme.spacing.kilo}`};\n box-shadow: 0px 2px 8px ${({ theme }) =>\n hex2rgba(theme.miscellaneous.shadow, 0.08)};\n`;\n\nexport const StyledMenuButton = nativeStyled(Button)<Partial<StyleProps>>`\n padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);\n padding-right: calc(${({ theme }) => theme.spacing.centi} + 2px);\n padding-bottom: calc(${({ theme }) => theme.spacing.centi} + 2px);\n padding-left: calc(${({ theme }) => theme.spacing.centi} + 2px);\n margin-right: ${({ theme }) => theme.spacing.kilo};\n & * {\n user-select: none;\n }\n`;\n\nexport const StyledContainerOpenMenu = webStyled('div')<Partial<StyleProps>>`\n border-top: ${({ theme }) =>\n `${theme.borderWidth.pico} solid ${hex2rgba(\n theme.miscellaneous.shadow,\n 0.08\n )}`};\n background-color: ${({ theme }) => theme.miscellaneous.surfaceColor}; \n border-bottom-left-radius: ${({ theme }) => theme.borderRadius.mili}; \n border-bottom-right-radius: ${({ theme }) => theme.borderRadius.mili};\n box-shadow: 0px 2px 8px ${({ theme }) =>\n hex2rgba(theme.miscellaneous.shadow, 0.08)};\n padding-right: 8vw;\n padding-left: 8vw;\n padding-top: ${({ theme }) => theme.spacing.kilo};\n padding-bottom: ${({ theme }) => theme.spacing.mega};\n position: absolute;\n z-index: ${({ theme }) => theme.zIndex.header - 1};\n width: -webkit-fill-available;\n width: -moz-available;\n`;\n\nexport const StyledInput = nativeStyled(Input)<Partial<StyleProps>>`\n width: 100%;\n`;\n\nexport const StyledInputContainer = webStyled('div')`\n display: flex;\n flex: 1;\n`;\n\nexport const StyledSearchResultsContainer = webStyled('div')`\n display: flex;\n flex-direction: column;\n`;\n\nexport const StyledSearchTextContainer = webStyled('div')<Partial<StyleProps>>`\n margin-bottom: ${({ theme }) => theme.spacing.mili};\n`;\n"],"file":"styled.js"}
|
package/dist/index.d.ts
CHANGED
|
@@ -4,11 +4,11 @@ export { Button, useMouseHover, WebButtonProps, } from './components/atoms/Butto
|
|
|
4
4
|
export { Input, InputWebProps } from './components/atoms/Input';
|
|
5
5
|
export { Tag, TagProps } from './components/atoms/Tag';
|
|
6
6
|
export { InputPassword, InputPasswordWebProps, } from './components/molecules/InputPassword';
|
|
7
|
-
export { Menubar, MenubarProps } from './components/molecules/Menubar';
|
|
7
|
+
export { Menubar, MenubarProps, MenubarOptionsType, MenubarItemsOptions, MenubarMostUsedType, } from './components/molecules/Menubar';
|
|
8
8
|
export { Drawer, DrawerProps } from './components/molecules/Drawer';
|
|
9
9
|
export { Select, SelectProps } from './components/molecules/Select';
|
|
10
10
|
export { Snackbar, SnackbarWebProps } from './components/molecules/Snackbar';
|
|
11
|
-
export { Breadcrumbs, BreadcrumbsProps, } from './components/molecules/Breadcrumbs';
|
|
11
|
+
export { Breadcrumbs, BreadcrumbsProps, BreadcrumbType, } from './components/molecules/Breadcrumbs';
|
|
12
12
|
export { Skeleton, SkeletonProps } from './components/atoms/Skeleton';
|
|
13
13
|
export { Accordion, AccordionProps } from './components/atoms/Accordion';
|
|
14
14
|
export { DataGrid, DataGridProps, HeadersType, } from './components/organisms/DataGrid';
|
package/dist/index.js
CHANGED
|
@@ -17,6 +17,9 @@ var _exportNames = {
|
|
|
17
17
|
InputPasswordWebProps: true,
|
|
18
18
|
Menubar: true,
|
|
19
19
|
MenubarProps: true,
|
|
20
|
+
MenubarOptionsType: true,
|
|
21
|
+
MenubarItemsOptions: true,
|
|
22
|
+
MenubarMostUsedType: true,
|
|
20
23
|
Drawer: true,
|
|
21
24
|
DrawerProps: true,
|
|
22
25
|
Select: true,
|
|
@@ -25,6 +28,7 @@ var _exportNames = {
|
|
|
25
28
|
SnackbarWebProps: true,
|
|
26
29
|
Breadcrumbs: true,
|
|
27
30
|
BreadcrumbsProps: true,
|
|
31
|
+
BreadcrumbType: true,
|
|
28
32
|
Skeleton: true,
|
|
29
33
|
SkeletonProps: true,
|
|
30
34
|
Accordion: true,
|
|
@@ -113,6 +117,24 @@ Object.defineProperty(exports, "MenubarProps", {
|
|
|
113
117
|
return _Menubar.MenubarProps;
|
|
114
118
|
}
|
|
115
119
|
});
|
|
120
|
+
Object.defineProperty(exports, "MenubarOptionsType", {
|
|
121
|
+
enumerable: true,
|
|
122
|
+
get: function () {
|
|
123
|
+
return _Menubar.MenubarOptionsType;
|
|
124
|
+
}
|
|
125
|
+
});
|
|
126
|
+
Object.defineProperty(exports, "MenubarItemsOptions", {
|
|
127
|
+
enumerable: true,
|
|
128
|
+
get: function () {
|
|
129
|
+
return _Menubar.MenubarItemsOptions;
|
|
130
|
+
}
|
|
131
|
+
});
|
|
132
|
+
Object.defineProperty(exports, "MenubarMostUsedType", {
|
|
133
|
+
enumerable: true,
|
|
134
|
+
get: function () {
|
|
135
|
+
return _Menubar.MenubarMostUsedType;
|
|
136
|
+
}
|
|
137
|
+
});
|
|
116
138
|
Object.defineProperty(exports, "Drawer", {
|
|
117
139
|
enumerable: true,
|
|
118
140
|
get: function () {
|
|
@@ -161,6 +183,12 @@ Object.defineProperty(exports, "BreadcrumbsProps", {
|
|
|
161
183
|
return _Breadcrumbs.BreadcrumbsProps;
|
|
162
184
|
}
|
|
163
185
|
});
|
|
186
|
+
Object.defineProperty(exports, "BreadcrumbType", {
|
|
187
|
+
enumerable: true,
|
|
188
|
+
get: function () {
|
|
189
|
+
return _Breadcrumbs.BreadcrumbType;
|
|
190
|
+
}
|
|
191
|
+
});
|
|
164
192
|
Object.defineProperty(exports, "Skeleton", {
|
|
165
193
|
enumerable: true,
|
|
166
194
|
get: function () {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AAIA;;AAOA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAKA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from '@tecsinapse/react-core';\nexport {\n default as Badge,\n BadgeWebProps,\n} from './components/atoms/Badge/Badge';\nexport {\n Button,\n useMouseHover,\n WebButtonProps,\n} from './components/atoms/Button';\nexport { Input, InputWebProps } from './components/atoms/Input';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport {\n InputPassword,\n InputPasswordWebProps,\n} from './components/molecules/InputPassword';\nexport {\n Menubar,\n MenubarProps,\n MenubarOptionsType,\n MenubarItemsOptions,\n MenubarMostUsedType,\n} from './components/molecules/Menubar';\nexport { Drawer, DrawerProps } from './components/molecules/Drawer';\nexport { Select, SelectProps } from './components/molecules/Select';\nexport { Snackbar, SnackbarWebProps } from './components/molecules/Snackbar';\nexport {\n Breadcrumbs,\n BreadcrumbsProps,\n BreadcrumbType,\n} from './components/molecules/Breadcrumbs';\nexport { Skeleton, SkeletonProps } from './components/atoms/Skeleton';\nexport { Accordion, AccordionProps } from './components/atoms/Accordion';\nexport {\n DataGrid,\n DataGridProps,\n HeadersType,\n} from './components/organisms/DataGrid';\nexport { Modal, ModalProps } from './components/atoms/Modal';\nexport * from './hooks';\n"],"file":"index.js"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tecsinapse/react-web-kit",
|
|
3
3
|
"description": "TecSinapse React components",
|
|
4
|
-
"version": "1.6.
|
|
4
|
+
"version": "1.6.5",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"license": "MIT",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"@emotion/native": "^11.0.0",
|
|
15
15
|
"@emotion/react": "^11.4.1",
|
|
16
16
|
"@emotion/styled": "^11.3.0",
|
|
17
|
-
"@tecsinapse/react-core": "^1.6.
|
|
17
|
+
"@tecsinapse/react-core": "^1.6.5",
|
|
18
18
|
"react-native-vector-icons": "^8.1.0",
|
|
19
19
|
"react-transition-group": "^4.4.2"
|
|
20
20
|
},
|
|
@@ -32,5 +32,5 @@
|
|
|
32
32
|
"react-dom": ">=16.8.0",
|
|
33
33
|
"react-native-web": "^0.17.1"
|
|
34
34
|
},
|
|
35
|
-
"gitHead": "
|
|
35
|
+
"gitHead": "eaf7b5bb177a5ed25f3b63840b385878c9858479"
|
|
36
36
|
}
|
|
@@ -2,26 +2,26 @@ import React, { ElementType, FC } from 'react';
|
|
|
2
2
|
import { StyledContainerBreadcrumbs } from './styled';
|
|
3
3
|
import { BreadcrumbItem } from './BreadcrumbItem';
|
|
4
4
|
|
|
5
|
-
type
|
|
5
|
+
export type BreadcrumbType = {
|
|
6
6
|
title: string;
|
|
7
7
|
Component: ElementType;
|
|
8
|
-
|
|
8
|
+
props?: any;
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export interface BreadcrumbsProps {
|
|
12
|
-
breadcrumbs:
|
|
12
|
+
breadcrumbs: BreadcrumbType[];
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
const Breadcrumbs: FC<BreadcrumbsProps> = ({ breadcrumbs }) => {
|
|
16
16
|
return (
|
|
17
17
|
<StyledContainerBreadcrumbs>
|
|
18
18
|
{breadcrumbs.map((item, index) => {
|
|
19
|
-
const {
|
|
19
|
+
const { props, Component = 'a', title } = item;
|
|
20
20
|
return (
|
|
21
21
|
<BreadcrumbItem
|
|
22
22
|
key={index}
|
|
23
23
|
Component={Component}
|
|
24
|
-
props={
|
|
24
|
+
props={props}
|
|
25
25
|
isLast={breadcrumbs.length - 1 === index}
|
|
26
26
|
title={title}
|
|
27
27
|
/>
|
|
@@ -18,7 +18,7 @@ const MenuBlock: React.FC<MenuBlockProps> = ({ options, toggle }) => {
|
|
|
18
18
|
return (
|
|
19
19
|
<Masonry columns={4} spacingTop="kilo" spacingLeft="mega">
|
|
20
20
|
{options.map(data => (
|
|
21
|
-
|
|
21
|
+
<React.Fragment key={`${data.title}`}>
|
|
22
22
|
<StyledContainerMenu>
|
|
23
23
|
{data.leftComponents && (
|
|
24
24
|
<StyledLeftComponent>{data.leftComponents}</StyledLeftComponent>
|
|
@@ -46,7 +46,7 @@ const MenuBlock: React.FC<MenuBlockProps> = ({ options, toggle }) => {
|
|
|
46
46
|
)
|
|
47
47
|
)}
|
|
48
48
|
</StyledContainerItems>
|
|
49
|
-
|
|
49
|
+
</React.Fragment>
|
|
50
50
|
))}
|
|
51
51
|
</Masonry>
|
|
52
52
|
);
|
|
@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
|
|
|
5
5
|
import { Avatar, Icon, Text } from '@tecsinapse/react-core';
|
|
6
6
|
|
|
7
7
|
export default {
|
|
8
|
-
title: '
|
|
8
|
+
title: 'Web/Menu Bar',
|
|
9
9
|
component: Menubar,
|
|
10
10
|
parameters: {
|
|
11
11
|
layout: 'fullscreen',
|
|
@@ -272,7 +272,6 @@ const Template: Story<MenubarProps> = args => {
|
|
|
272
272
|
</div>
|
|
273
273
|
}
|
|
274
274
|
/>
|
|
275
|
-
Content
|
|
276
275
|
</>
|
|
277
276
|
);
|
|
278
277
|
};
|
|
@@ -7,16 +7,21 @@ import { highlight } from './utils';
|
|
|
7
7
|
interface SearchResultItem {
|
|
8
8
|
data: MostUsedType;
|
|
9
9
|
searchTerm: string;
|
|
10
|
+
toggle: () => void;
|
|
10
11
|
}
|
|
11
12
|
|
|
12
|
-
const SearchResultItem: React.FC<SearchResultItem> = ({
|
|
13
|
+
const SearchResultItem: React.FC<SearchResultItem> = ({
|
|
14
|
+
data,
|
|
15
|
+
searchTerm,
|
|
16
|
+
toggle,
|
|
17
|
+
}) => {
|
|
13
18
|
const { title, category, Component, props } = data;
|
|
14
19
|
const noTextDecoration = { textDecoration: 'none' };
|
|
15
20
|
|
|
16
21
|
const textProps: TextProps = { fontColor: 'orange', fontWeight: 'bold' };
|
|
17
22
|
|
|
18
23
|
return (
|
|
19
|
-
<Component {...props} style={noTextDecoration}>
|
|
24
|
+
<Component {...props} style={noTextDecoration} onClick={toggle}>
|
|
20
25
|
<StyledSearchItemContainer>
|
|
21
26
|
<Text typography="base" colorVariant="secondary" colorTone="dark">
|
|
22
27
|
{highlight(searchTerm, title, HighlightText, textProps)}
|
|
@@ -13,7 +13,7 @@ export const StyledIconInput = webStyled('div')<Partial<StyleProps>>`
|
|
|
13
13
|
|
|
14
14
|
export const StyledMenuBar = webStyled('div')<Partial<StyleProps>>`
|
|
15
15
|
position: relative;
|
|
16
|
-
z-index: ${({ theme }) => theme.zIndex.
|
|
16
|
+
z-index: ${({ theme }) => theme.zIndex.header};
|
|
17
17
|
background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
|
|
18
18
|
display: flex;
|
|
19
19
|
flex-direction: row;
|
|
@@ -50,6 +50,7 @@ export const StyledContainerOpenMenu = webStyled('div')<Partial<StyleProps>>`
|
|
|
50
50
|
padding-top: ${({ theme }) => theme.spacing.kilo};
|
|
51
51
|
padding-bottom: ${({ theme }) => theme.spacing.mega};
|
|
52
52
|
position: absolute;
|
|
53
|
+
z-index: ${({ theme }) => theme.zIndex.header - 1};
|
|
53
54
|
width: -webkit-fill-available;
|
|
54
55
|
width: -moz-available;
|
|
55
56
|
`;
|
|
@@ -60,7 +61,7 @@ export const StyledInput = nativeStyled(Input)<Partial<StyleProps>>`
|
|
|
60
61
|
|
|
61
62
|
export const StyledInputContainer = webStyled('div')`
|
|
62
63
|
display: flex;
|
|
63
|
-
flex: 1
|
|
64
|
+
flex: 1;
|
|
64
65
|
`;
|
|
65
66
|
|
|
66
67
|
export const StyledSearchResultsContainer = webStyled('div')`
|
package/src/index.ts
CHANGED
|
@@ -14,13 +14,20 @@ export {
|
|
|
14
14
|
InputPassword,
|
|
15
15
|
InputPasswordWebProps,
|
|
16
16
|
} from './components/molecules/InputPassword';
|
|
17
|
-
export {
|
|
17
|
+
export {
|
|
18
|
+
Menubar,
|
|
19
|
+
MenubarProps,
|
|
20
|
+
MenubarOptionsType,
|
|
21
|
+
MenubarItemsOptions,
|
|
22
|
+
MenubarMostUsedType,
|
|
23
|
+
} from './components/molecules/Menubar';
|
|
18
24
|
export { Drawer, DrawerProps } from './components/molecules/Drawer';
|
|
19
25
|
export { Select, SelectProps } from './components/molecules/Select';
|
|
20
26
|
export { Snackbar, SnackbarWebProps } from './components/molecules/Snackbar';
|
|
21
27
|
export {
|
|
22
28
|
Breadcrumbs,
|
|
23
29
|
BreadcrumbsProps,
|
|
30
|
+
BreadcrumbType,
|
|
24
31
|
} from './components/molecules/Breadcrumbs';
|
|
25
32
|
export { Skeleton, SkeletonProps } from './components/atoms/Skeleton';
|
|
26
33
|
export { Accordion, AccordionProps } from './components/atoms/Accordion';
|