w-design-system 0.0.34 → 0.0.35
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/components/Paginate/index.d.ts +2 -1
- package/dist/components/Paginate/index.d.ts.map +1 -1
- package/dist/components/Paginate/index.js +8 -8
- package/dist/components/Paginate/index.js.map +1 -1
- package/dist/components/Paginate/stories.d.ts +1 -0
- package/dist/components/Paginate/stories.d.ts.map +1 -1
- package/dist/components/Paginate/stories.js +7 -2
- package/dist/components/Paginate/stories.js.map +1 -1
- package/dist/components/Paginate/styles.d.ts.map +1 -1
- package/dist/components/Paginate/styles.js +5 -38
- package/dist/components/Paginate/styles.js.map +1 -1
- package/dist/components/Select/index.d.ts.map +1 -1
- package/dist/components/Select/index.js +5 -5
- package/dist/components/Select/index.js.map +1 -1
- package/dist/components/Select/stories.js +1 -0
- package/dist/components/Select/stories.js.map +1 -1
- package/dist/components/Sidebar/SidebarGroup/index.js +2 -2
- package/dist/components/Sidebar/SidebarGroup/index.js.map +1 -1
- package/dist/components/Sidebar/SidebarGroup/styles.d.ts.map +1 -1
- package/dist/components/Sidebar/SidebarGroup/styles.js +3 -5
- package/dist/components/Sidebar/SidebarGroup/styles.js.map +1 -1
- package/dist/components/Sidebar/SidebarItem/index.d.ts.map +1 -1
- package/dist/components/Sidebar/SidebarItem/index.js +8 -5
- package/dist/components/Sidebar/SidebarItem/index.js.map +1 -1
- package/dist/components/Sidebar/stories.js +1 -1
- package/dist/components/Sidebar/stories.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Paginate/index.tsx +10 -6
- package/src/components/Paginate/stories.tsx +9 -3
- package/src/components/Paginate/styles.ts +5 -38
- package/src/components/Select/index.tsx +5 -3
- package/src/components/Select/stories.tsx +1 -1
- package/src/components/Sidebar/SidebarGroup/index.tsx +3 -3
- package/src/components/Sidebar/SidebarGroup/styles.ts +3 -5
- package/src/components/Sidebar/SidebarItem/index.tsx +15 -11
- package/src/components/Sidebar/stories.tsx +1 -1
|
@@ -6,6 +6,7 @@ export type PaginateProps = {
|
|
|
6
6
|
onChangePage: (page: number) => void;
|
|
7
7
|
onChangeItemsPerPage: (itemsPerPage: number) => void;
|
|
8
8
|
dropDownTop?: boolean;
|
|
9
|
+
itemPerPageOptions?: number[];
|
|
9
10
|
};
|
|
10
|
-
export declare const Paginate: ({ currentPage, itemCount, onChangePage, itemsPerPage, onChangeItemsPerPage, dropDownTop }: PaginateProps) => React.JSX.Element;
|
|
11
|
+
export declare const Paginate: ({ currentPage, itemCount, onChangePage, itemsPerPage, onChangeItemsPerPage, itemPerPageOptions, dropDownTop, }: PaginateProps) => React.JSX.Element;
|
|
11
12
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Paginate/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,oBAAoB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;IACpD,WAAW,CAAC,EAAE,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Paginate/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,oBAAoB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;IACpD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,QAAQ,mHAQlB,aAAa,sBA2Ff,CAAA"}
|
|
@@ -3,7 +3,7 @@ import { Container } from './styles';
|
|
|
3
3
|
import { IconWrapper } from '../IconWrapper';
|
|
4
4
|
import { chevronLeftSVG, chevronRightSVG } from '../../assets/icon';
|
|
5
5
|
import { Select } from '../Select';
|
|
6
|
-
export const Paginate = ({ currentPage, itemCount, onChangePage, itemsPerPage, onChangeItemsPerPage, dropDownTop }) => {
|
|
6
|
+
export const Paginate = ({ currentPage, itemCount, onChangePage, itemsPerPage, onChangeItemsPerPage, itemPerPageOptions = [], dropDownTop, }) => {
|
|
7
7
|
// Se itemsPerPage for undefined, o valor default e 20
|
|
8
8
|
let itemsPerPageValue = itemsPerPage || 20;
|
|
9
9
|
const pageCount = Math.ceil(itemCount / itemsPerPageValue);
|
|
@@ -31,25 +31,25 @@ export const Paginate = ({ currentPage, itemCount, onChangePage, itemsPerPage, o
|
|
|
31
31
|
}
|
|
32
32
|
const minItem = (currentPage - 1) * itemsPerPageValue + 1;
|
|
33
33
|
const maxItem = Math.min(currentPage * itemsPerPageValue, itemCount);
|
|
34
|
-
const
|
|
34
|
+
const itemPerPageOptionsCopy = Array.from(itemPerPageOptions);
|
|
35
35
|
if (itemsPerPage)
|
|
36
|
-
|
|
37
|
-
const itemPerPageOptionsSorted = Array.from(new Set(
|
|
36
|
+
itemPerPageOptionsCopy.push(itemsPerPage);
|
|
37
|
+
const itemPerPageOptionsSorted = Array.from(new Set(itemPerPageOptionsCopy)).sort((a, b) => a - b);
|
|
38
38
|
return (React.createElement(Container, null,
|
|
39
39
|
React.createElement("ul", { className: "pagination" },
|
|
40
|
-
React.createElement(IconWrapper, { className: currentPage === 1 ? 'icon-disabled' : 'icon', src: chevronLeftSVG, width: "14px", onClick: () => onChangePage(currentPage - 1) }),
|
|
40
|
+
React.createElement(IconWrapper, { className: currentPage === 1 ? 'icon-disabled' : 'icon', src: chevronLeftSVG, width: "14px", onClick: () => currentPage !== 1 && onChangePage(currentPage - 1) }),
|
|
41
41
|
pages.map((page, index) => {
|
|
42
42
|
if (page === 'elipsis') {
|
|
43
43
|
return React.createElement("li", { key: `elipsis-${index}` }, "...");
|
|
44
44
|
}
|
|
45
45
|
return (React.createElement("li", { key: page, className: page === currentPage ? 'page-active' : 'page', onClick: () => onChangePage(page) }, page));
|
|
46
46
|
}),
|
|
47
|
-
React.createElement(IconWrapper, { className: currentPage === pageCount ? 'icon-disabled' : 'icon', src: chevronRightSVG, width: "14px", onClick: () => onChangePage(currentPage + 1) })),
|
|
47
|
+
React.createElement(IconWrapper, { className: currentPage === pageCount ? 'icon-disabled' : 'icon', src: chevronRightSVG, width: "14px", onClick: () => currentPage !== pageCount && onChangePage(currentPage + 1) })),
|
|
48
48
|
React.createElement("div", { className: "items-per-page-wrapper" },
|
|
49
49
|
React.createElement("div", { className: "item-per-page" }, "Itens por pa\u0301gina"),
|
|
50
|
-
React.createElement(Select, { dropDownTop: dropDownTop !== false, value: itemsPerPageValue.toString(), onOptionChange: option => {
|
|
50
|
+
React.createElement(Select, { className: "select", dropDownTop: dropDownTop !== false, value: itemsPerPageValue.toString(), onOptionChange: option => {
|
|
51
51
|
option && onChangeItemsPerPage(option.id);
|
|
52
|
-
}, options: itemPerPageOptionsSorted.map(count => ({
|
|
52
|
+
}, disabled: itemPerPageOptions.length <= 1, options: itemPerPageOptionsSorted.map(count => ({
|
|
53
53
|
id: count,
|
|
54
54
|
text: count === null || count === void 0 ? void 0 : count.toString(),
|
|
55
55
|
})) }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Paginate/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Paginate/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/Paginate/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAKjD,OAAO,EAAY,aAAa,EAAE,MAAM,GAAG,CAAA;AAE3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,aAAa,
|
|
1
|
+
{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/Paginate/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAKjD,OAAO,EAAY,aAAa,EAAE,MAAM,GAAG,CAAA;AAE3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,aAAa,CAYC,CAAA;AAE/B,eAAe,IAAI,CAAA;AA8BnB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,aAAa,CAI3C,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,aAAa,CAI1C,CAAA"}
|
|
@@ -12,12 +12,12 @@ const meta = {
|
|
|
12
12
|
itemsPerPage: 10,
|
|
13
13
|
onChangePage: fn(),
|
|
14
14
|
onChangeItemsPerPage: fn(),
|
|
15
|
+
dropDownTop: true,
|
|
15
16
|
},
|
|
16
17
|
};
|
|
17
18
|
export default meta;
|
|
18
19
|
const NewPaginate = (args) => {
|
|
19
20
|
const [currentPage, setCurrentPage] = useState(args.currentPage);
|
|
20
|
-
const [itemCount, setItemCount] = useState(args.itemCount);
|
|
21
21
|
const [itemsPerPage, setItemsPerPage] = useState(args.itemsPerPage);
|
|
22
22
|
const handleChangePage = (page) => {
|
|
23
23
|
setCurrentPage(page);
|
|
@@ -29,11 +29,16 @@ const NewPaginate = (args) => {
|
|
|
29
29
|
};
|
|
30
30
|
return (React.createElement(React.Fragment, null,
|
|
31
31
|
React.createElement("div", { style: { height: '500px', width: '100%' } }),
|
|
32
|
-
React.createElement(Paginate, Object.assign({}, args, { currentPage: currentPage, itemCount: itemCount, itemsPerPage: itemsPerPage, onChangePage: handleChangePage, onChangeItemsPerPage: handleChangeItemsPerPage }))));
|
|
32
|
+
React.createElement(Paginate, Object.assign({}, args, { currentPage: currentPage, itemCount: args.itemCount, itemsPerPage: itemsPerPage, onChangePage: handleChangePage, onChangeItemsPerPage: handleChangeItemsPerPage }))));
|
|
33
33
|
};
|
|
34
34
|
export const Default = {
|
|
35
35
|
render: args => {
|
|
36
36
|
return React.createElement(NewPaginate, Object.assign({}, args));
|
|
37
37
|
},
|
|
38
38
|
};
|
|
39
|
+
export const Bottom = {
|
|
40
|
+
render: args => {
|
|
41
|
+
return React.createElement(NewPaginate, Object.assign({}, args, { itemPerPageOptions: [10, 50, 100] }));
|
|
42
|
+
},
|
|
43
|
+
};
|
|
39
44
|
//# sourceMappingURL=stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Paginate/stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,QAAQ,EAAiB,MAAM,GAAG,CAAA;AAE3C,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACJ,WAAW,EAAE,CAAC;QACd,SAAS,EAAE,GAAG;QACd,YAAY,EAAE,EAAE;QAChB,YAAY,EAAE,EAAE,EAAE;QAClB,oBAAoB,EAAE,EAAE,EAAE;
|
|
1
|
+
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Paginate/stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,QAAQ,EAAiB,MAAM,GAAG,CAAA;AAE3C,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACJ,WAAW,EAAE,CAAC;QACd,SAAS,EAAE,GAAG;QACd,YAAY,EAAE,EAAE;QAChB,YAAY,EAAE,EAAE,EAAE;QAClB,oBAAoB,EAAE,EAAE,EAAE;QAC1B,WAAW,EAAE,IAAI;KAClB;CAC4B,CAAA;AAE/B,eAAe,IAAI,CAAA;AAEnB,MAAM,WAAW,GAAG,CAAC,IAAmB,EAAE,EAAE;IAC1C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;IAChE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IAEnE,MAAM,gBAAgB,GAAG,CAAC,IAAY,EAAE,EAAE;QACxC,cAAc,CAAC,IAAI,CAAC,CAAA;QACpB,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAAA;IAC5B,CAAC,CAAA;IAED,MAAM,wBAAwB,GAAG,CAAC,KAAa,EAAE,EAAE;QACjD,eAAe,CAAC,KAAK,CAAC,CAAA;QACtB,MAAM,CAAC,oBAAoB,CAAC,CAAC,KAAK,CAAC,CAAA;IACrC,CAAC,CAAA;IACD,OAAO,CACL;QACE,6BAAK,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,GAAQ;QACtD,oBAAC,QAAQ,oBACH,IAAI,IACR,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,gBAAgB,EAC9B,oBAAoB,EAAE,wBAAwB,IAC9C,CACD,CACJ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAA4B;IAC9C,MAAM,EAAE,IAAI,CAAC,EAAE;QACb,OAAO,oBAAC,WAAW,oBAAK,IAAI,EAAI,CAAA;IAClC,CAAC;CACF,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAA4B;IAC7C,MAAM,EAAE,IAAI,CAAC,EAAE;QACb,OAAO,oBAAC,WAAW,oBAAK,IAAI,IAAE,kBAAkB,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,IAAI,CAAA;IACrE,CAAC;CACF,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Paginate/styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Paginate/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,6NA4DrB,CAAA"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
2
|
import { theme } from '../Themes';
|
|
3
|
-
import { chevronDownSVG } from '../../assets/icon';
|
|
4
3
|
export const Container = styled.div `
|
|
5
4
|
display: flex;
|
|
6
5
|
justify-content: space-between;
|
|
@@ -51,47 +50,15 @@ export const Container = styled.div `
|
|
|
51
50
|
.items-per-page-wrapper {
|
|
52
51
|
display: flex;
|
|
53
52
|
align-items: center;
|
|
54
|
-
|
|
53
|
+
width: min-content;
|
|
54
|
+
text-wrap: nowrap;
|
|
55
55
|
gap: 1rem;
|
|
56
56
|
font-family: 'Nunito Sans', sans-serif;
|
|
57
57
|
color: ${theme.colors.shade40};
|
|
58
|
+
}
|
|
58
59
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
cursor: pointer;
|
|
62
|
-
background-color: ${theme.colors.shade05};
|
|
63
|
-
background-image: url(${chevronDownSVG});
|
|
64
|
-
background-repeat: no-repeat;
|
|
65
|
-
background-size: 1rem;
|
|
66
|
-
background-position: right 1rem top calc(50% + 1px);
|
|
67
|
-
border: 1px solid ${theme.colors.shade20};
|
|
68
|
-
color: ${theme.colors.shade40};
|
|
69
|
-
border-radius: 4px;
|
|
70
|
-
display: inline-block;
|
|
71
|
-
font: inherit;
|
|
72
|
-
outline: 0;
|
|
73
|
-
|
|
74
|
-
padding: 18px 48px 14px 16px;
|
|
75
|
-
|
|
76
|
-
margin: 0;
|
|
77
|
-
-webkit-box-sizing: border-box;
|
|
78
|
-
-moz-box-sizing: border-box;
|
|
79
|
-
box-sizing: border-box;
|
|
80
|
-
-webkit-appearance: none;
|
|
81
|
-
-moz-appearance: none; /* Firefox */
|
|
82
|
-
-webkit-appearance: none; /* Safari and Chrome */
|
|
83
|
-
appearance: none;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
select:hover {
|
|
87
|
-
background-color: ${theme.colors.shade10};
|
|
88
|
-
border: 1px solid ${theme.colors.shade20};
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
select:focus {
|
|
92
|
-
background-color: ${theme.colors.shade10};
|
|
93
|
-
border: 1px solid ${theme.colors.shade30};
|
|
94
|
-
}
|
|
60
|
+
.select {
|
|
61
|
+
min-width: 100px;
|
|
95
62
|
}
|
|
96
63
|
`;
|
|
97
64
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Paginate/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AACjC,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Paginate/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AACjC,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;YAQvB,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;YAMpB,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;YAMnB,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;;;aAQnB,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;;;;;eAUlB,KAAK,CAAC,MAAM,CAAC,MAAM;;;;eAInB,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;;;;;;;aAYrB,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;CAMhC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EACd,iBAAiB,EACjB,SAAS,EAMV,MAAM,OAAO,CAAA;AAOd,MAAM,WAAW,WAAW,CAC1B,CAAC,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,CACzG,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IAC3C,OAAO,CAAC,EAAE,CAAC,EAAE,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,cAAc,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,MAAM,WAAW,SAAS;IACxB,OAAO,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAA;CAC7B;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EACd,iBAAiB,EACjB,SAAS,EAMV,MAAM,OAAO,CAAA;AAOd,MAAM,WAAW,WAAW,CAC1B,CAAC,SAAS;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,CACzG,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IAC3C,OAAO,CAAC,EAAE,CAAC,EAAE,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,cAAc,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,MAAM,WAAW,SAAS;IACxB,OAAO,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAA;CAC7B;AAyGD,eAAO,MAAM,MAAM,EAAwC,CAAC,CAAwD,SAA9C;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,EAClH,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;CAAE,KAC/E,KAAK,CAAC,YAAY,CAAA"}
|
|
@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
|
|
12
|
+
import React, { useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
|
|
13
13
|
import { chevronDownSVG } from '../../assets/icon';
|
|
14
14
|
import { IconWrapper } from '../IconWrapper';
|
|
15
15
|
import { Input } from '../Input';
|
|
@@ -17,7 +17,7 @@ import { theme } from '../Themes';
|
|
|
17
17
|
import { Dropdown, DropdownWrapper, OptionButton, OptionText, SelectWrapper } from './styles';
|
|
18
18
|
const SelectFowardRef = (_a, ref) => {
|
|
19
19
|
var _b;
|
|
20
|
-
var { children, label, leftIcon, onOptionChange, options, placeholder, rightIcon, selectedOption, value, dropDownWidth } = _a, props = __rest(_a, ["children", "label", "leftIcon", "onOptionChange", "options", "placeholder", "rightIcon", "selectedOption", "value", "dropDownWidth"]);
|
|
20
|
+
var { children, label, leftIcon, onOptionChange, options, placeholder, rightIcon, selectedOption, value, dropDownWidth, disabled } = _a, props = __rest(_a, ["children", "label", "leftIcon", "onOptionChange", "options", "placeholder", "rightIcon", "selectedOption", "value", "dropDownWidth", "disabled"]);
|
|
21
21
|
const [open, setOpen] = useState(false);
|
|
22
22
|
const wrapperRef = useRef(null);
|
|
23
23
|
useImperativeHandle(ref, () => ({
|
|
@@ -53,11 +53,11 @@ const SelectFowardRef = (_a, ref) => {
|
|
|
53
53
|
return selectedOption.text;
|
|
54
54
|
}
|
|
55
55
|
return '';
|
|
56
|
-
}, [value, selectedOption
|
|
56
|
+
}, [value, selectedOption]);
|
|
57
57
|
return (React.createElement(SelectWrapper, Object.assign({}, props, { ref: wrapperRef }),
|
|
58
|
-
React.createElement(Input, { leftIcon: leftIcon, rightIcon: React.createElement(React.Fragment, null,
|
|
58
|
+
React.createElement(Input, { disabled: disabled, leftIcon: leftIcon, rightIcon: React.createElement(React.Fragment, null,
|
|
59
59
|
rightIcon,
|
|
60
|
-
React.createElement(IconWrapper, { className: `icon ${open ? 'icon-rotate' : ''}`, src: chevronDownSVG, width: "16px", color: theme.colors.shade30 })), placeholder: placeholder, label: label, value: valueComputed, readonly: true, onClick: () => setOpen(!open) }),
|
|
60
|
+
React.createElement(IconWrapper, { className: `icon ${open ? 'icon-rotate' : ''}`, src: chevronDownSVG, width: "16px", color: theme.colors.shade30 })), placeholder: placeholder, label: label, value: valueComputed, readonly: true, onClick: () => !disabled && setOpen(!open) }),
|
|
61
61
|
open && (React.createElement(DropdownWrapper, null,
|
|
62
62
|
React.createElement(Dropdown, { dropDownTop: props.dropDownTop, dropDownWidth: dropDownWidth },
|
|
63
63
|
((_b = options === null || options === void 0 ? void 0 : options.length) !== null && _b !== void 0 ? _b : 0) > 0 && (React.createElement("div", null, options === null || options === void 0 ? void 0 : options.map(option => (React.createElement(OptionButton, { selected: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) === option.id, key: option.id, onClick: () => onOptionClick(option) },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAIZ,SAAS,EACT,mBAAmB,EACnB,OAAO,EACP,MAAM,EACN,QAAQ,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Select/stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,EAAE,MAAM,EAAe,MAAM,SAAS,CAAA;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,cAAc,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QACrC,cAAc,EAAE,EAAE,MAAM,EAAE,sBAAsB,EAAE;
|
|
1
|
+
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Select/stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,EAAE,MAAM,EAAe,MAAM,SAAS,CAAA;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,cAAc,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QACrC,cAAc,EAAE,EAAE,MAAM,EAAE,sBAAsB,EAAE;QAClD,WAAW,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACpC;CAC4B,CAAA;AAE/B,eAAe,IAAI,CAAA;AAGnB,MAAM,gBAAgB,GAAG,CAAC,EAAiC,EAAE,EAAE;QAArC,EAAE,OAAO,OAAwB,EAAnB,IAAI,cAAlB,WAAoB,CAAF;IAC1C,MAAM,CAAC,cAAc,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAgC,IAAI,CAAC,CAAA;IAE7F,OAAO,CACL,oBAAC,MAAM,kBACL,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,MAAM,CAAC,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,EACjD,OAAO,EACL,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI;YACT;gBACE,IAAI,EAAE,SAAS;gBACf,EAAE,EAAE,CAAC;aACN;YACD;gBACE,IAAI,EAAE,SAAS;gBACf,EAAE,EAAE,CAAC;aACN;YACD;gBACE,IAAI,EAAE,SAAS;gBACf,EAAE,EAAE,CAAC;aACN;SACF,IAEC,IAAI,EACR,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,GAAG,EAAE,CAAC,oBAAC,gBAAgB,IAAC,KAAK,EAAC,OAAO,EAAC,WAAW,EAAC,aAAa,GAAG;CAC3E,CAAA"}
|
|
@@ -31,11 +31,11 @@ const SidebarGroup = ({ title, icon, children, sidebarOpen, disabled, onClick, i
|
|
|
31
31
|
}
|
|
32
32
|
return (React.createElement(SidebarGroupContainer, { open: sidebarOpen, groupOpen: groupOpen },
|
|
33
33
|
React.createElement(SidebarGroupHeaderContainer, { disabled: disabled, sidebarOpen: sidebarOpen, groupOpen: groupOpen, onClick: onClickHandler },
|
|
34
|
-
React.createElement(IconWrapper, { src: icon, color: color }),
|
|
34
|
+
React.createElement(IconWrapper, { src: icon, color: color, width: "20px" }),
|
|
35
35
|
sidebarOpen && (React.createElement("span", { className: "title" },
|
|
36
36
|
React.createElement(Paragraph, { size: "medium", heavyBod: isCurrentGroup, color: disabled ? theme.colors.shade40 : 'white' }, title))),
|
|
37
37
|
sidebarOpen &&
|
|
38
|
-
(!disabled ? (React.createElement(IconWrapper, { className: `icon ${groupOpen ? 'icon-rotate' : ''}`, src: chevronDownSVG, width: "
|
|
38
|
+
(!disabled ? (React.createElement(IconWrapper, { className: `icon ${groupOpen ? 'icon-rotate' : ''}`, src: chevronDownSVG, width: "20px", color: theme.colors.shade30 })) : (React.createElement(IconWrapper, { src: lockSVG, width: "20px", color: "white" })))),
|
|
39
39
|
children));
|
|
40
40
|
};
|
|
41
41
|
export default SidebarGroup;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Sidebar/SidebarGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvF,OAAO,EAAE,qBAAqB,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAA;AAC7E,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AACpC,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAW9D,MAAM,YAAY,GAAG,CAAC,EACpB,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,OAAO,EACP,cAAc,GACuB,EAAE,EAAE;IACzC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEjD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,IAAI,QAAQ;YAAE,YAAY,CAAC,KAAK,CAAC,CAAA;IAChD,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEzB,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,KAAiC,EAAE,EAAE;QACpC,IAAI,QAAQ;YAAE,OAAM;QAEpB,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,OAAO,EAAE,CAAA;QACX,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,eAAe,EAAE,CAAA;YACvB,YAAY,CAAC,CAAC,SAAS,CAAC,CAAA;QAC1B,CAAC;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,CAAC,CAC5C,CAAA;IAED,IAAI,KAAK,GAAG,MAAM,CAAA;IAElB,IAAI,QAAQ,EAAE,CAAC;QACb,KAAK,GAAG,uBAAuB,CAAA;IACjC,CAAC;IAED,IAAI,cAAc,EAAE,CAAC;QACnB,KAAK,GAAG,SAAS,CAAA;IACnB,CAAC;IAED,OAAO,CACL,oBAAC,qBAAqB,IAAC,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS;QAC5D,oBAAC,2BAA2B,IAC1B,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,cAAc;YAEvB,oBAAC,WAAW,IAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Sidebar/SidebarGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvF,OAAO,EAAE,qBAAqB,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAA;AAC7E,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AACpC,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAW9D,MAAM,YAAY,GAAG,CAAC,EACpB,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,OAAO,EACP,cAAc,GACuB,EAAE,EAAE;IACzC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEjD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,IAAI,QAAQ;YAAE,YAAY,CAAC,KAAK,CAAC,CAAA;IAChD,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEzB,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,KAAiC,EAAE,EAAE;QACpC,IAAI,QAAQ;YAAE,OAAM;QAEpB,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,OAAO,EAAE,CAAA;QACX,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,eAAe,EAAE,CAAA;YACvB,YAAY,CAAC,CAAC,SAAS,CAAC,CAAA;QAC1B,CAAC;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,CAAC,CAC5C,CAAA;IAED,IAAI,KAAK,GAAG,MAAM,CAAA;IAElB,IAAI,QAAQ,EAAE,CAAC;QACb,KAAK,GAAG,uBAAuB,CAAA;IACjC,CAAC;IAED,IAAI,cAAc,EAAE,CAAC;QACnB,KAAK,GAAG,SAAS,CAAA;IACnB,CAAC;IAED,OAAO,CACL,oBAAC,qBAAqB,IAAC,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS;QAC5D,oBAAC,2BAA2B,IAC1B,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,cAAc;YAEvB,oBAAC,WAAW,IAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,GAAG;YACpD,WAAW,IAAI,CACd,8BAAM,SAAS,EAAC,OAAO;gBACrB,oBAAC,SAAS,IAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,IAChG,KAAK,CACI,CACP,CACR;YACA,WAAW;gBACV,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CACX,oBAAC,WAAW,IACV,SAAS,EAAE,QAAQ,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,EACnD,GAAG,EAAE,cAAc,EACnB,KAAK,EAAC,MAAM,EACZ,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,GAC3B,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,WAAW,IAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,GAAG,CACzD,CAAC,CACwB;QAC7B,QAAQ,CACa,CACzB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,YAAY,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/SidebarGroup/styles.ts"],"names":[],"mappings":"AAGA,UAAU,0BAA0B;IAClC,IAAI,EAAE,OAAO,CAAA;IACb,SAAS,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,qBAAqB,+PA+BjC,CAAA;AAED,UAAU,gCAAgC;IACxC,WAAW,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,2BAA2B,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/SidebarGroup/styles.ts"],"names":[],"mappings":"AAGA,UAAU,0BAA0B;IAClC,IAAI,EAAE,OAAO,CAAA;IACb,SAAS,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,qBAAqB,+PA+BjC,CAAA;AAED,UAAU,gCAAgC;IACxC,WAAW,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,2BAA2B,qQAoBvC,CAAA;AAED,eAAO,MAAM,WAAW,6NAWvB,CAAA"}
|
|
@@ -37,10 +37,10 @@ export const SidebarGroupHeaderContainer = styled.div `
|
|
|
37
37
|
align-items: center;
|
|
38
38
|
min-height: ${({ groupOpen, sidebarOpen }) => (groupOpen && sidebarOpen ? '40px' : '40px')};
|
|
39
39
|
${({ groupOpen, sidebarOpen }) => groupOpen && sidebarOpen && 'border-bottom: 1px solid rgba(255, 255, 255, 0.1)'};
|
|
40
|
-
justify-content: ${sidebarOpen => (sidebarOpen ? 'space-between' : 'center')};
|
|
40
|
+
justify-content: ${({ sidebarOpen }) => (sidebarOpen ? 'space-between' : 'center')};
|
|
41
41
|
text-wrap: nowrap;
|
|
42
42
|
|
|
43
|
-
padding: 8px
|
|
43
|
+
padding: 8px 8px;
|
|
44
44
|
cursor: pointer;
|
|
45
45
|
height: 100%;
|
|
46
46
|
gap: 24px;
|
|
@@ -51,9 +51,7 @@ export const SidebarGroupHeaderContainer = styled.div `
|
|
|
51
51
|
width: 100%;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
-
|
|
55
|
-
width: 20px;
|
|
56
|
-
}
|
|
54
|
+
|
|
57
55
|
`;
|
|
58
56
|
export const LockedModal = styled.div `
|
|
59
57
|
width: 400px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/Sidebar/SidebarGroup/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAOpC,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAA4B;;;;;YAK/D,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;sBACpD,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,SAAS,CAAC;;;;;;;;;;kBAUzF,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;CAe/E,CAAA;AAQD,MAAM,CAAC,MAAM,2BAA2B,GAAG,MAAM,CAAC,GAAG,CAAkC;;;gBAGvE,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,IAAI,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IACxF,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,SAAS,IAAI,WAAW,IAAI,mDAAmD;qBAC9F,WAAW,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/Sidebar/SidebarGroup/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAOpC,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAA4B;;;;;YAK/D,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;sBACpD,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,SAAS,CAAC;;;;;;;;;;kBAUzF,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;CAe/E,CAAA;AAQD,MAAM,CAAC,MAAM,2BAA2B,GAAG,MAAM,CAAC,GAAG,CAAkC;;;gBAGvE,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,IAAI,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IACxF,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,SAAS,IAAI,WAAW,IAAI,mDAAmD;qBAC9F,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC;;;;;;;;WAQzE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;;;CAO5E,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;aASxB,KAAK,CAAC,MAAM,CAAC,OAAO;;CAEhC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/SidebarItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Sidebar/SidebarItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,aAAa,EAAE,OAAO,CAAA;IACtB,WAAW,EAAE,OAAO,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,QAAA,MAAM,WAAW,mFAQd,gBAAgB,sBA6ClB,CAAA;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -3,6 +3,7 @@ import { IconWrapper } from '../../IconWrapper';
|
|
|
3
3
|
import { Paragraph } from '../../Paragraph';
|
|
4
4
|
import { Bullet, Container } from './styles';
|
|
5
5
|
import { theme } from '../../Themes';
|
|
6
|
+
import { lockSVG } from '../../../assets/icon';
|
|
6
7
|
const SidebarItem = ({ title, disabled, icon, isInsideGroup, isCurrentItem, sidebarOpen, onClick, }) => {
|
|
7
8
|
let color = '#fff';
|
|
8
9
|
if (disabled) {
|
|
@@ -13,11 +14,13 @@ const SidebarItem = ({ title, disabled, icon, isInsideGroup, isCurrentItem, side
|
|
|
13
14
|
}
|
|
14
15
|
return (React.createElement(Container, { isCurrentItem: isCurrentItem, disabled: disabled !== null && disabled !== void 0 ? disabled : false, sidebarOpen: sidebarOpen, isInsideGroup: isInsideGroup, onClick: () => !disabled && onClick() },
|
|
15
16
|
isInsideGroup ? (React.createElement(Bullet, null)) : (icon && (React.createElement("div", { className: "icon" },
|
|
16
|
-
React.createElement(IconWrapper, { src: icon, color: color })))),
|
|
17
|
-
sidebarOpen && (React.createElement(
|
|
18
|
-
React.createElement(
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
React.createElement(IconWrapper, { src: icon, color: color, width: '20px' })))),
|
|
18
|
+
sidebarOpen && (React.createElement(React.Fragment, null,
|
|
19
|
+
React.createElement("span", { className: "title" },
|
|
20
|
+
React.createElement(Paragraph, { size: !isInsideGroup ? 'medium' : 'small',
|
|
21
|
+
/* eslint-disable-next-line no-nested-ternary */
|
|
22
|
+
color: disabled ? theme.colors.shade40 : !isInsideGroup ? 'white' : theme.colors.shade10, heavyBod: isCurrentItem }, title)),
|
|
23
|
+
disabled && React.createElement(IconWrapper, { src: lockSVG, width: "20px", color: "white" })))));
|
|
21
24
|
};
|
|
22
25
|
export default SidebarItem;
|
|
23
26
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Sidebar/SidebarItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Sidebar/SidebarItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAC3C,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAY9C,MAAM,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,aAAa,EACb,aAAa,EACb,WAAW,EACX,OAAO,GACU,EAAE,EAAE;IACrB,IAAI,KAAK,GAAG,MAAM,CAAA;IAElB,IAAI,QAAQ,EAAE,CAAC;QACb,KAAK,GAAG,uBAAuB,CAAA;IACjC,CAAC;IAED,IAAI,aAAa,EAAE,CAAC;QAClB,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,CAAA;IAC7B,CAAC;IAED,OAAO,CACL,oBAAC,SAAS,IACR,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,KAAK,EAC3B,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,QAAQ,IAAI,OAAO,EAAE;QAEpC,aAAa,CAAC,CAAC,CAAC,CACf,oBAAC,MAAM,OAAG,CACX,CAAC,CAAC,CAAC,CACF,IAAI,IAAI,CACN,6BAAK,SAAS,EAAC,MAAM;YACnB,oBAAC,WAAW,IAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,GAAG,CACjD,CACP,CACF;QACA,WAAW,IAAI,CACd;YACE,8BAAM,SAAS,EAAC,OAAO;gBACrB,oBAAC,SAAS,IACR,IAAI,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;oBACzC,gDAAgD;oBAChD,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EACxF,QAAQ,EAAE,aAAa,IAEtB,KAAK,CACI,CACP;YACN,QAAQ,IAAI,oBAAC,WAAW,IAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,GAAG,CACpE,CACJ,CACS,CACb,CAAA;AACH,CAAC,CAAA;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Sidebar/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,MAAM,IAAI,GAAyB;IACjC,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,SAAS,EAAE,OAAO;CACY,CAAA;AAEhC,eAAe,IAAI,CAAA;AAInB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,GAAG,EAAE;QACX,OAAO,CACH,oBAAC,OAAO,IACN,MAAM,EAAE;gBACN;oBACE,IAAI,EAAE,MAAM;oBACZ,EAAE,EAAE,WAAW;iBAChB;gBACD,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE;aAChC,EACD,KAAK,EAAE;gBACL,SAAS,EAAE;oBACT,SAAS,EAAE,WAAW;oBACtB,IAAI,EAAE,YAAY;oBAClB,IAAI,EAAE,YAAY;oBAClB,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Sidebar/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,MAAM,IAAI,GAAyB;IACjC,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,SAAS,EAAE,OAAO;CACY,CAAA;AAEhC,eAAe,IAAI,CAAA;AAInB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,GAAG,EAAE;QACX,OAAO,CACH,oBAAC,OAAO,IACN,MAAM,EAAE;gBACN;oBACE,IAAI,EAAE,MAAM;oBACZ,EAAE,EAAE,WAAW;iBAChB;gBACD,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE;aAChC,EACD,KAAK,EAAE;gBACL,SAAS,EAAE;oBACT,SAAS,EAAE,WAAW;oBACtB,IAAI,EAAE,YAAY;oBAClB,IAAI,EAAE,YAAY;oBAClB,QAAQ,EAAE,IAAI;iBACf;aACF,EACD,aAAa,EAAE,EAAE,EACjB,cAAc,EAAE,EAAE,EAClB,OAAO,EAAE,MAAM,CAAC,SAAS,CAAC,EAC1B,MAAM,EAAE;gBACN,MAAM,EAAE;oBACN,IAAI,EAAE,SAAS;oBACf,IAAI,EAAE,YAAY;oBAClB,OAAO,EAAE,CAAC,WAAW,CAAC;iBACvB;aACF,EACD,OAAO,EAAE,EAAE,GACX,CACL,CAAA;IACH,CAAC;CACF,CAAA"}
|
package/package.json
CHANGED
|
@@ -10,6 +10,7 @@ export type PaginateProps = {
|
|
|
10
10
|
onChangePage: (page: number) => void
|
|
11
11
|
onChangeItemsPerPage: (itemsPerPage: number) => void
|
|
12
12
|
dropDownTop?: boolean
|
|
13
|
+
itemPerPageOptions?: number[]
|
|
13
14
|
}
|
|
14
15
|
|
|
15
16
|
export const Paginate = ({
|
|
@@ -18,7 +19,8 @@ export const Paginate = ({
|
|
|
18
19
|
onChangePage,
|
|
19
20
|
itemsPerPage,
|
|
20
21
|
onChangeItemsPerPage,
|
|
21
|
-
|
|
22
|
+
itemPerPageOptions = [],
|
|
23
|
+
dropDownTop,
|
|
22
24
|
}: PaginateProps) => {
|
|
23
25
|
// Se itemsPerPage for undefined, o valor default e 20
|
|
24
26
|
let itemsPerPageValue = itemsPerPage || 20
|
|
@@ -58,10 +60,10 @@ export const Paginate = ({
|
|
|
58
60
|
const minItem = (currentPage - 1) * itemsPerPageValue + 1
|
|
59
61
|
const maxItem = Math.min(currentPage * itemsPerPageValue, itemCount)
|
|
60
62
|
|
|
61
|
-
const
|
|
62
|
-
if (itemsPerPage)
|
|
63
|
+
const itemPerPageOptionsCopy = Array.from(itemPerPageOptions)
|
|
64
|
+
if (itemsPerPage) itemPerPageOptionsCopy.push(itemsPerPage)
|
|
63
65
|
|
|
64
|
-
const itemPerPageOptionsSorted = Array.from(new Set(
|
|
66
|
+
const itemPerPageOptionsSorted = Array.from(new Set(itemPerPageOptionsCopy)).sort((a, b) => a - b)
|
|
65
67
|
|
|
66
68
|
return (
|
|
67
69
|
<Container>
|
|
@@ -70,7 +72,7 @@ export const Paginate = ({
|
|
|
70
72
|
className={currentPage === 1 ? 'icon-disabled' : 'icon'}
|
|
71
73
|
src={chevronLeftSVG}
|
|
72
74
|
width="14px"
|
|
73
|
-
onClick={() => onChangePage(currentPage - 1)}
|
|
75
|
+
onClick={() => currentPage !== 1 && onChangePage(currentPage - 1)}
|
|
74
76
|
/>
|
|
75
77
|
{pages.map((page, index) => {
|
|
76
78
|
if (page === 'elipsis') {
|
|
@@ -86,17 +88,19 @@ export const Paginate = ({
|
|
|
86
88
|
className={currentPage === pageCount ? 'icon-disabled' : 'icon'}
|
|
87
89
|
src={chevronRightSVG}
|
|
88
90
|
width="14px"
|
|
89
|
-
onClick={() => onChangePage(currentPage + 1)}
|
|
91
|
+
onClick={() => currentPage !== pageCount && onChangePage(currentPage + 1)}
|
|
90
92
|
/>
|
|
91
93
|
</ul>
|
|
92
94
|
<div className="items-per-page-wrapper">
|
|
93
95
|
<div className="item-per-page">Itens por página</div>
|
|
94
96
|
<Select
|
|
97
|
+
className="select"
|
|
95
98
|
dropDownTop={dropDownTop !== false}
|
|
96
99
|
value={itemsPerPageValue.toString()}
|
|
97
100
|
onOptionChange={option => {
|
|
98
101
|
option && onChangeItemsPerPage(option.id)
|
|
99
102
|
}}
|
|
103
|
+
disabled={itemPerPageOptions.length <= 1}
|
|
100
104
|
options={itemPerPageOptionsSorted.map(count => ({
|
|
101
105
|
id: count,
|
|
102
106
|
text: count?.toString(),
|
|
@@ -15,14 +15,14 @@ const meta: Meta<PaginateProps> = {
|
|
|
15
15
|
itemsPerPage: 10,
|
|
16
16
|
onChangePage: fn(),
|
|
17
17
|
onChangeItemsPerPage: fn(),
|
|
18
|
+
dropDownTop: true,
|
|
18
19
|
},
|
|
19
|
-
}
|
|
20
|
+
} satisfies Meta<PaginateProps>
|
|
20
21
|
|
|
21
22
|
export default meta
|
|
22
23
|
|
|
23
24
|
const NewPaginate = (args: PaginateProps) => {
|
|
24
25
|
const [currentPage, setCurrentPage] = useState(args.currentPage)
|
|
25
|
-
const [itemCount, setItemCount] = useState(args.itemCount)
|
|
26
26
|
const [itemsPerPage, setItemsPerPage] = useState(args.itemsPerPage)
|
|
27
27
|
|
|
28
28
|
const handleChangePage = (page: number) => {
|
|
@@ -40,7 +40,7 @@ const NewPaginate = (args: PaginateProps) => {
|
|
|
40
40
|
<Paginate
|
|
41
41
|
{...args}
|
|
42
42
|
currentPage={currentPage}
|
|
43
|
-
itemCount={itemCount}
|
|
43
|
+
itemCount={args.itemCount}
|
|
44
44
|
itemsPerPage={itemsPerPage}
|
|
45
45
|
onChangePage={handleChangePage}
|
|
46
46
|
onChangeItemsPerPage={handleChangeItemsPerPage}
|
|
@@ -54,3 +54,9 @@ export const Default: StoryObj<PaginateProps> = {
|
|
|
54
54
|
return <NewPaginate {...args} />
|
|
55
55
|
},
|
|
56
56
|
}
|
|
57
|
+
|
|
58
|
+
export const Bottom: StoryObj<PaginateProps> = {
|
|
59
|
+
render: args => {
|
|
60
|
+
return <NewPaginate {...args} itemPerPageOptions={[10, 50, 100]} />
|
|
61
|
+
},
|
|
62
|
+
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import styled from 'styled-components'
|
|
2
2
|
import { theme } from '../Themes'
|
|
3
|
-
import { chevronDownSVG } from '../../assets/icon'
|
|
4
3
|
export const Container = styled.div`
|
|
5
4
|
display: flex;
|
|
6
5
|
justify-content: space-between;
|
|
@@ -51,46 +50,14 @@ export const Container = styled.div`
|
|
|
51
50
|
.items-per-page-wrapper {
|
|
52
51
|
display: flex;
|
|
53
52
|
align-items: center;
|
|
54
|
-
|
|
53
|
+
width: min-content;
|
|
54
|
+
text-wrap: nowrap;
|
|
55
55
|
gap: 1rem;
|
|
56
56
|
font-family: 'Nunito Sans', sans-serif;
|
|
57
57
|
color: ${theme.colors.shade40};
|
|
58
|
+
}
|
|
58
59
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
cursor: pointer;
|
|
62
|
-
background-color: ${theme.colors.shade05};
|
|
63
|
-
background-image: url(${chevronDownSVG});
|
|
64
|
-
background-repeat: no-repeat;
|
|
65
|
-
background-size: 1rem;
|
|
66
|
-
background-position: right 1rem top calc(50% + 1px);
|
|
67
|
-
border: 1px solid ${theme.colors.shade20};
|
|
68
|
-
color: ${theme.colors.shade40};
|
|
69
|
-
border-radius: 4px;
|
|
70
|
-
display: inline-block;
|
|
71
|
-
font: inherit;
|
|
72
|
-
outline: 0;
|
|
73
|
-
|
|
74
|
-
padding: 18px 48px 14px 16px;
|
|
75
|
-
|
|
76
|
-
margin: 0;
|
|
77
|
-
-webkit-box-sizing: border-box;
|
|
78
|
-
-moz-box-sizing: border-box;
|
|
79
|
-
box-sizing: border-box;
|
|
80
|
-
-webkit-appearance: none;
|
|
81
|
-
-moz-appearance: none; /* Firefox */
|
|
82
|
-
-webkit-appearance: none; /* Safari and Chrome */
|
|
83
|
-
appearance: none;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
select:hover {
|
|
87
|
-
background-color: ${theme.colors.shade10};
|
|
88
|
-
border: 1px solid ${theme.colors.shade20};
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
select:focus {
|
|
92
|
-
background-color: ${theme.colors.shade10};
|
|
93
|
-
border: 1px solid ${theme.colors.shade30};
|
|
94
|
-
}
|
|
60
|
+
.select {
|
|
61
|
+
min-width: 100px;
|
|
95
62
|
}
|
|
96
63
|
`
|
|
@@ -6,7 +6,7 @@ import React, {
|
|
|
6
6
|
useImperativeHandle,
|
|
7
7
|
useMemo,
|
|
8
8
|
useRef,
|
|
9
|
-
useState
|
|
9
|
+
useState,
|
|
10
10
|
} from 'react'
|
|
11
11
|
import { chevronDownSVG } from '../../assets/icon'
|
|
12
12
|
import { IconWrapper } from '../IconWrapper'
|
|
@@ -46,6 +46,7 @@ const SelectFowardRef = <T extends { text: string; id: number; icon?: ReactNode
|
|
|
46
46
|
selectedOption,
|
|
47
47
|
value,
|
|
48
48
|
dropDownWidth,
|
|
49
|
+
disabled,
|
|
49
50
|
...props
|
|
50
51
|
}: PropsWithChildren<SelectProps<T>>,
|
|
51
52
|
ref: React.ForwardedRef<SelectRef>,
|
|
@@ -87,11 +88,12 @@ const SelectFowardRef = <T extends { text: string; id: number; icon?: ReactNode
|
|
|
87
88
|
return selectedOption.text
|
|
88
89
|
}
|
|
89
90
|
return ''
|
|
90
|
-
}, [value, selectedOption
|
|
91
|
+
}, [value, selectedOption])
|
|
91
92
|
|
|
92
93
|
return (
|
|
93
94
|
<SelectWrapper {...props} ref={wrapperRef}>
|
|
94
95
|
<Input
|
|
96
|
+
disabled={disabled}
|
|
95
97
|
leftIcon={leftIcon}
|
|
96
98
|
rightIcon={
|
|
97
99
|
<>
|
|
@@ -108,7 +110,7 @@ const SelectFowardRef = <T extends { text: string; id: number; icon?: ReactNode
|
|
|
108
110
|
label={label}
|
|
109
111
|
value={valueComputed}
|
|
110
112
|
readonly
|
|
111
|
-
onClick={() => setOpen(!open)}
|
|
113
|
+
onClick={() => !disabled && setOpen(!open)}
|
|
112
114
|
/>
|
|
113
115
|
{open && (
|
|
114
116
|
<DropdownWrapper>
|
|
@@ -62,7 +62,7 @@ const SidebarGroup = ({
|
|
|
62
62
|
groupOpen={groupOpen}
|
|
63
63
|
onClick={onClickHandler}
|
|
64
64
|
>
|
|
65
|
-
<IconWrapper src={icon} color={color} />
|
|
65
|
+
<IconWrapper src={icon} color={color} width="20px" />
|
|
66
66
|
{sidebarOpen && (
|
|
67
67
|
<span className="title">
|
|
68
68
|
<Paragraph size="medium" heavyBod={isCurrentGroup} color={disabled ? theme.colors.shade40 : 'white'}>
|
|
@@ -75,11 +75,11 @@ const SidebarGroup = ({
|
|
|
75
75
|
<IconWrapper
|
|
76
76
|
className={`icon ${groupOpen ? 'icon-rotate' : ''}`}
|
|
77
77
|
src={chevronDownSVG}
|
|
78
|
-
width="
|
|
78
|
+
width="20px"
|
|
79
79
|
color={theme.colors.shade30}
|
|
80
80
|
/>
|
|
81
81
|
) : (
|
|
82
|
-
<IconWrapper src={lockSVG} width="
|
|
82
|
+
<IconWrapper src={lockSVG} width="20px" color="white" />
|
|
83
83
|
))}
|
|
84
84
|
</SidebarGroupHeaderContainer>
|
|
85
85
|
{children}
|
|
@@ -50,10 +50,10 @@ export const SidebarGroupHeaderContainer = styled.div<SidebarGroupContainerHeade
|
|
|
50
50
|
align-items: center;
|
|
51
51
|
min-height: ${({ groupOpen, sidebarOpen }) => (groupOpen && sidebarOpen ? '40px' : '40px')};
|
|
52
52
|
${({ groupOpen, sidebarOpen }) => groupOpen && sidebarOpen && 'border-bottom: 1px solid rgba(255, 255, 255, 0.1)'};
|
|
53
|
-
justify-content: ${sidebarOpen => (sidebarOpen ? 'space-between' : 'center')};
|
|
53
|
+
justify-content: ${({ sidebarOpen }) => (sidebarOpen ? 'space-between' : 'center')};
|
|
54
54
|
text-wrap: nowrap;
|
|
55
55
|
|
|
56
|
-
padding: 8px
|
|
56
|
+
padding: 8px 8px;
|
|
57
57
|
cursor: pointer;
|
|
58
58
|
height: 100%;
|
|
59
59
|
gap: 24px;
|
|
@@ -64,9 +64,7 @@ export const SidebarGroupHeaderContainer = styled.div<SidebarGroupContainerHeade
|
|
|
64
64
|
width: 100%;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
|
|
68
|
-
width: 20px;
|
|
69
|
-
}
|
|
67
|
+
|
|
70
68
|
`
|
|
71
69
|
|
|
72
70
|
export const LockedModal = styled.div`
|
|
@@ -3,6 +3,7 @@ import { IconWrapper } from '../../IconWrapper'
|
|
|
3
3
|
import { Paragraph } from '../../Paragraph'
|
|
4
4
|
import { Bullet, Container } from './styles'
|
|
5
5
|
import { theme } from '../../Themes'
|
|
6
|
+
import { lockSVG } from '../../../assets/icon'
|
|
6
7
|
|
|
7
8
|
export interface SidebarItemProps {
|
|
8
9
|
disabled?: boolean
|
|
@@ -46,21 +47,24 @@ const SidebarItem = ({
|
|
|
46
47
|
) : (
|
|
47
48
|
icon && (
|
|
48
49
|
<div className="icon">
|
|
49
|
-
<IconWrapper src={icon} color={color} />
|
|
50
|
+
<IconWrapper src={icon} color={color} width='20px' />
|
|
50
51
|
</div>
|
|
51
52
|
)
|
|
52
53
|
)}
|
|
53
54
|
{sidebarOpen && (
|
|
54
|
-
|
|
55
|
-
<
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
55
|
+
<>
|
|
56
|
+
<span className="title">
|
|
57
|
+
<Paragraph
|
|
58
|
+
size={!isInsideGroup ? 'medium' : 'small'}
|
|
59
|
+
/* eslint-disable-next-line no-nested-ternary */
|
|
60
|
+
color={disabled ? theme.colors.shade40 : !isInsideGroup ? 'white' : theme.colors.shade10}
|
|
61
|
+
heavyBod={isCurrentItem}
|
|
62
|
+
>
|
|
63
|
+
{title}
|
|
64
|
+
</Paragraph>
|
|
65
|
+
</span>
|
|
66
|
+
{disabled && <IconWrapper src={lockSVG} width="20px" color="white" />}
|
|
67
|
+
</>
|
|
64
68
|
)}
|
|
65
69
|
</Container>
|
|
66
70
|
)
|