norma-library 0.5.131 → 0.5.132

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.
Files changed (182) hide show
  1. package/.babelrc.json +18 -18
  2. package/.prettierignore +10 -10
  3. package/.prettierrc.json +20 -20
  4. package/.storybook/main.ts +20 -20
  5. package/.storybook/preview.ts +15 -15
  6. package/README.md +43 -43
  7. package/commitlint.config.js +1 -1
  8. package/dist/esm/components/Box/styles.d.ts +1 -1
  9. package/dist/esm/components/Breadcrumb/styles.d.ts +4 -4
  10. package/dist/esm/components/ChatMessageBalloon/ChatMessageBalloon.style.d.ts +1 -1
  11. package/dist/esm/components/DateInput/styles.d.ts +2 -2
  12. package/dist/esm/components/Icons.d.ts +1 -1
  13. package/dist/esm/components/MultiSelectInput/components/Option/styles.d.ts +1 -1
  14. package/dist/esm/components/MultiSelectInput/styles.d.ts +2 -2
  15. package/dist/esm/components/ProgressBar.d.ts +1 -1
  16. package/dist/esm/components/ProgressBar.js +19 -8
  17. package/dist/esm/components/ProgressBar.js.map +1 -1
  18. package/dist/esm/components/SelectInput/components/Option/styles.d.ts +1 -1
  19. package/dist/esm/components/SelectInput/styles.d.ts +2 -2
  20. package/dist/esm/components/Table/components/header/styles.d.ts +8 -8
  21. package/dist/esm/components/Table/components/pagination/styles.d.ts +1 -1
  22. package/dist/esm/components/Table/components/tbody/styles.d.ts +1 -1
  23. package/dist/esm/components/Table/styles.d.ts +10 -10
  24. package/dist/esm/components/TextInput/styles.d.ts +3 -3
  25. package/dist/esm/components/Typography/Text/styles.d.ts +1 -1
  26. package/dist/esm/components/Typography/Title/styles.d.ts +1 -1
  27. package/dist/esm/components/UncontrolledTable/components/header/styles.d.ts +8 -8
  28. package/dist/esm/components/UncontrolledTable/components/pagination/styles.d.ts +1 -1
  29. package/dist/esm/components/UncontrolledTable/components/tbody/styles.d.ts +1 -1
  30. package/dist/esm/components/UncontrolledTable/styles.d.ts +10 -10
  31. package/dist/esm/components/UncontrolledTabs/UncontrolledTabs.style.d.ts +1 -1
  32. package/dist/esm/interfaces/ProgressBar.d.ts +5 -1
  33. package/docs/index.md +118 -118
  34. package/package.json +136 -136
  35. package/src/components/Accordion.tsx +39 -39
  36. package/src/components/Avatar.tsx +17 -17
  37. package/src/components/Badge.tsx +14 -14
  38. package/src/components/Box/index.tsx +12 -12
  39. package/src/components/Box/interfaces.ts +3 -3
  40. package/src/components/Box/styles.tsx +22 -22
  41. package/src/components/Breadcrumb/index.tsx +27 -27
  42. package/src/components/Breadcrumb/interface.ts +8 -8
  43. package/src/components/Breadcrumb/styles.tsx +32 -32
  44. package/src/components/Button.tsx +26 -26
  45. package/src/components/Card.tsx +37 -37
  46. package/src/components/ChatMessage.tsx +87 -87
  47. package/src/components/ChatMessageBalloon/ChatMessageBalloon.style.ts +56 -56
  48. package/src/components/ChatMessageBalloon/ChatMessageBalloon.tsx +55 -55
  49. package/src/components/CheckBox.tsx +21 -21
  50. package/src/components/DateInput/index.tsx +34 -34
  51. package/src/components/DateInput/interface.ts +13 -13
  52. package/src/components/DateInput/styles.tsx +27 -27
  53. package/src/components/DatePicker.tsx +67 -67
  54. package/src/components/DropDown.tsx +24 -24
  55. package/src/components/IconButton.tsx +37 -37
  56. package/src/components/Icons.tsx +82 -82
  57. package/src/components/Modal.tsx +113 -113
  58. package/src/components/MultiSelectInput/components/MultiValue/index.tsx +44 -44
  59. package/src/components/MultiSelectInput/components/Option/index.tsx +62 -62
  60. package/src/components/MultiSelectInput/components/Option/styles.tsx +8 -8
  61. package/src/components/MultiSelectInput/index.tsx +60 -60
  62. package/src/components/MultiSelectInput/interfaces.ts +15 -15
  63. package/src/components/MultiSelectInput/styles.tsx +43 -43
  64. package/src/components/Paper.tsx +12 -12
  65. package/src/components/ProgressBar.tsx +63 -50
  66. package/src/components/RadioGroup.tsx +43 -43
  67. package/src/components/RangerSlider.tsx +65 -65
  68. package/src/components/Select.tsx +74 -74
  69. package/src/components/SelectInput/components/Option/index.tsx +61 -61
  70. package/src/components/SelectInput/components/Option/styles.tsx +8 -8
  71. package/src/components/SelectInput/index.tsx +45 -45
  72. package/src/components/SelectInput/interfaces.ts +15 -15
  73. package/src/components/SelectInput/styles.tsx +31 -31
  74. package/src/components/Svgs.tsx +506 -506
  75. package/src/components/Table/components/header/index.tsx +86 -86
  76. package/src/components/Table/components/header/styles.tsx +59 -59
  77. package/src/components/Table/components/index.tsx +8 -8
  78. package/src/components/Table/components/pagination/index.tsx +39 -39
  79. package/src/components/Table/components/pagination/styles.tsx +28 -28
  80. package/src/components/Table/components/tbody/index.tsx +30 -30
  81. package/src/components/Table/components/tbody/styles.tsx +4 -4
  82. package/src/components/Table/index.tsx +317 -317
  83. package/src/components/Table/interface.ts +23 -23
  84. package/src/components/Table/styles.tsx +117 -117
  85. package/src/components/Tabs.tsx +105 -105
  86. package/src/components/Tag.tsx +33 -33
  87. package/src/components/TextField.tsx +19 -19
  88. package/src/components/TextInput/index.tsx +37 -37
  89. package/src/components/TextInput/interface.ts +9 -9
  90. package/src/components/TextInput/styles.tsx +23 -23
  91. package/src/components/TimeLine.tsx +89 -89
  92. package/src/components/TimePicker.tsx +78 -78
  93. package/src/components/Typography/Text/index.tsx +20 -20
  94. package/src/components/Typography/Text/interfaces.ts +5 -5
  95. package/src/components/Typography/Text/styles.tsx +40 -40
  96. package/src/components/Typography/Title/index.tsx +22 -22
  97. package/src/components/Typography/Title/interfaces.ts +6 -6
  98. package/src/components/Typography/Title/styles.tsx +40 -40
  99. package/src/components/Typography/index.tsx +6 -6
  100. package/src/components/UncontrolledTable/components/header/index.tsx +63 -63
  101. package/src/components/UncontrolledTable/components/header/styles.tsx +59 -59
  102. package/src/components/UncontrolledTable/components/index.tsx +8 -8
  103. package/src/components/UncontrolledTable/components/pagination/index.tsx +43 -43
  104. package/src/components/UncontrolledTable/components/pagination/styles.tsx +28 -28
  105. package/src/components/UncontrolledTable/components/tbody/index.tsx +30 -30
  106. package/src/components/UncontrolledTable/components/tbody/styles.tsx +4 -4
  107. package/src/components/UncontrolledTable/index.tsx +226 -226
  108. package/src/components/UncontrolledTable/interface.ts +42 -42
  109. package/src/components/UncontrolledTable/styles.tsx +120 -120
  110. package/src/components/UncontrolledTabs/UncontrolledTabs.style.tsx +51 -51
  111. package/src/components/UncontrolledTabs/UncontrolledTabs.tsx +68 -68
  112. package/src/components/index.ts +24 -24
  113. package/src/helpers/alignments.ts +14 -14
  114. package/src/helpers/borders.ts +18 -18
  115. package/src/helpers/colors.ts +206 -206
  116. package/src/helpers/index.ts +5 -5
  117. package/src/helpers/radios.ts +24 -24
  118. package/src/helpers/sizes.ts +72 -72
  119. package/src/index.ts +66 -66
  120. package/src/interfaces/Accordion.ts +12 -12
  121. package/src/interfaces/Avatar.tsx +15 -15
  122. package/src/interfaces/Badge.ts +19 -19
  123. package/src/interfaces/Button.ts +22 -22
  124. package/src/interfaces/Card.ts +11 -11
  125. package/src/interfaces/ChatMessage.ts +12 -12
  126. package/src/interfaces/ChatMessageBalloon.ts +17 -17
  127. package/src/interfaces/CheckBox.ts +27 -27
  128. package/src/interfaces/DatePicker.ts +13 -13
  129. package/src/interfaces/DropDown.ts +14 -14
  130. package/src/interfaces/IconButton.ts +22 -22
  131. package/src/interfaces/Icons.ts +17 -17
  132. package/src/interfaces/Modal.ts +16 -16
  133. package/src/interfaces/Paper.ts +12 -12
  134. package/src/interfaces/ProgressBar.ts +25 -19
  135. package/src/interfaces/RadioGroup.ts +23 -23
  136. package/src/interfaces/RangerSlider.ts +21 -21
  137. package/src/interfaces/Select.ts +17 -17
  138. package/src/interfaces/Tabs.ts +19 -19
  139. package/src/interfaces/Tag.ts +17 -17
  140. package/src/interfaces/TextField.ts +44 -44
  141. package/src/interfaces/TimeLine.ts +11 -11
  142. package/src/interfaces/TimePicker.ts +13 -13
  143. package/src/interfaces/index.ts +23 -23
  144. package/src/providers/NormaProvider.tsx +13 -13
  145. package/src/sample-data-2.json +178 -178
  146. package/src/sample-data.json +177 -177
  147. package/src/stories/Accordion.stories.tsx +65 -65
  148. package/src/stories/Avatar.stories.tsx +123 -123
  149. package/src/stories/Badge.stories.tsx +39 -39
  150. package/src/stories/Box.stories.tsx +35 -35
  151. package/src/stories/Breadcrumb.stories.tsx +44 -44
  152. package/src/stories/Button.stories.tsx +93 -93
  153. package/src/stories/Card.stories.tsx +39 -39
  154. package/src/stories/ChatMessage.stories.tsx +84 -84
  155. package/src/stories/ChatMessageBalloon.stories.tsx +108 -108
  156. package/src/stories/CheckBox.stories.tsx +88 -88
  157. package/src/stories/DateInput.stories.tsx +51 -51
  158. package/src/stories/DatePicker.stories.tsx +50 -50
  159. package/src/stories/DropDown.stories.tsx +57 -57
  160. package/src/stories/IconButton.stories.tsx +78 -78
  161. package/src/stories/Modal.stories.tsx +195 -195
  162. package/src/stories/MultiSelectInput.stories.tsx +90 -90
  163. package/src/stories/Paper.stories.tsx +53 -53
  164. package/src/stories/ProgressBar.stories.tsx +113 -95
  165. package/src/stories/RadioGroup.stories.tsx +87 -87
  166. package/src/stories/RangerSlider.stories.tsx +58 -58
  167. package/src/stories/Select.stories.tsx +100 -100
  168. package/src/stories/SelectInput.stories.tsx +78 -78
  169. package/src/stories/Table.stories.tsx +372 -372
  170. package/src/stories/Tabs.stories.tsx +61 -61
  171. package/src/stories/Tag.stories.tsx +56 -56
  172. package/src/stories/Text.stories.tsx +37 -37
  173. package/src/stories/TextField.stories.tsx +310 -310
  174. package/src/stories/TextInput.stories.tsx +52 -52
  175. package/src/stories/TimeLine.stories.tsx +35 -35
  176. package/src/stories/TimePicker.stories.tsx +87 -87
  177. package/src/stories/Title.stories.tsx +43 -43
  178. package/src/stories/UncontrolledTable.stories.tsx +337 -337
  179. package/src/stories/UncontrolledTabs.stories.tsx +63 -63
  180. package/src/styles/globals.scss +17 -17
  181. package/src/types/index.ts +204 -204
  182. package/vite.config.ts +15 -15
@@ -1,41 +1,41 @@
1
- import styled from "styled-components";
2
- import { TextProps } from "./interfaces";
3
-
4
- const setSize = (size: string) => {
5
- switch (size) {
6
- case "small":
7
- return "18px";
8
- case "medium":
9
- return "24px";
10
- case "large":
11
- return "30px"
12
- default:
13
- return "24px";
14
- }
15
- }
16
-
17
- const setColor = (size: string) => {
18
- switch (size) {
19
- case "default":
20
- return "#000";
21
- case "secondary":
22
- return "#666";
23
- case "success":
24
- return "#6BC235"
25
- case "warning":
26
- return "#FF7F11"
27
- case "danger":
28
- return "#D63643"
29
- case "info":
30
- return "#43BBF2"
31
- default:
32
- return "#000";
33
- }
34
- }
35
-
36
- export const Container = styled.h1<TextProps>`
37
- margin: 0;
38
- padding: 0;
39
- color: ${props => setColor(props.type)};
40
- font-size: ${props => setSize(props.size)};
1
+ import styled from "styled-components";
2
+ import { TextProps } from "./interfaces";
3
+
4
+ const setSize = (size: string) => {
5
+ switch (size) {
6
+ case "small":
7
+ return "18px";
8
+ case "medium":
9
+ return "24px";
10
+ case "large":
11
+ return "30px"
12
+ default:
13
+ return "24px";
14
+ }
15
+ }
16
+
17
+ const setColor = (size: string) => {
18
+ switch (size) {
19
+ case "default":
20
+ return "#000";
21
+ case "secondary":
22
+ return "#666";
23
+ case "success":
24
+ return "#6BC235"
25
+ case "warning":
26
+ return "#FF7F11"
27
+ case "danger":
28
+ return "#D63643"
29
+ case "info":
30
+ return "#43BBF2"
31
+ default:
32
+ return "#000";
33
+ }
34
+ }
35
+
36
+ export const Container = styled.h1<TextProps>`
37
+ margin: 0;
38
+ padding: 0;
39
+ color: ${props => setColor(props.type)};
40
+ font-size: ${props => setSize(props.size)};
41
41
  `
@@ -1,7 +1,7 @@
1
- import Text from "./Text";
2
- import Title from "./Title"
3
-
4
- export {
5
- Text,
6
- Title
1
+ import Text from "./Text";
2
+ import Title from "./Title"
3
+
4
+ export {
5
+ Text,
6
+ Title
7
7
  }
@@ -1,63 +1,63 @@
1
- import React, { useState } from 'react';
2
- import * as S from './styles';
3
- import SettingsIcon from '@mui/icons-material/Settings';
4
-
5
- const Header: React.FC<any> = ({
6
- table,
7
- showTotalResults,
8
- showSettings,
9
- showClearFiels,
10
- onClearFieldsClick,
11
- customTotalResults,
12
- clearLabel,
13
- }) => {
14
- const [openTools, setOpenTools] = useState(false);
15
-
16
- return (
17
- <S.Header $showResults={showTotalResults}>
18
- <div>
19
- {showTotalResults && (
20
- <S.Results>
21
- <S.TextResult>
22
- {customTotalResults ? customTotalResults : `${table.getRowModel().rows.length} resultados encontrados.`}
23
- </S.TextResult>
24
- </S.Results>
25
- )}
26
- {showClearFiels && (
27
- <S.TextClearSearch onClick={() => onClearFieldsClick && onClearFieldsClick()}>
28
- {clearLabel || 'Limpar busca'}
29
- </S.TextClearSearch>
30
- )}
31
- </div>
32
- <S.Tools>
33
- {showSettings ? (
34
- <S.IconTools onClick={() => setOpenTools(!openTools)}>
35
- <SettingsIcon sx={{ fontSize: 16, color: '#DE8B50' }} />
36
- </S.IconTools>
37
- ) : null}
38
- {openTools ? (
39
- <S.ListTools>
40
- {table.getAllLeafColumns().map((column: any) => {
41
- return (
42
- <div key={column.id} className="px-1">
43
- <label>
44
- <input
45
- {...{
46
- type: 'checkbox',
47
- checked: column.getIsVisible(),
48
- onChange: column.getToggleVisibilityHandler(),
49
- }}
50
- />
51
- {column.id}
52
- </label>
53
- </div>
54
- );
55
- })}
56
- </S.ListTools>
57
- ) : null}
58
- </S.Tools>
59
- </S.Header>
60
- );
61
- };
62
-
63
- export default Header;
1
+ import React, { useState } from 'react';
2
+ import * as S from './styles';
3
+ import SettingsIcon from '@mui/icons-material/Settings';
4
+
5
+ const Header: React.FC<any> = ({
6
+ table,
7
+ showTotalResults,
8
+ showSettings,
9
+ showClearFiels,
10
+ onClearFieldsClick,
11
+ customTotalResults,
12
+ clearLabel,
13
+ }) => {
14
+ const [openTools, setOpenTools] = useState(false);
15
+
16
+ return (
17
+ <S.Header $showResults={showTotalResults}>
18
+ <div>
19
+ {showTotalResults && (
20
+ <S.Results>
21
+ <S.TextResult>
22
+ {customTotalResults ? customTotalResults : `${table.getRowModel().rows.length} resultados encontrados.`}
23
+ </S.TextResult>
24
+ </S.Results>
25
+ )}
26
+ {showClearFiels && (
27
+ <S.TextClearSearch onClick={() => onClearFieldsClick && onClearFieldsClick()}>
28
+ {clearLabel || 'Limpar busca'}
29
+ </S.TextClearSearch>
30
+ )}
31
+ </div>
32
+ <S.Tools>
33
+ {showSettings ? (
34
+ <S.IconTools onClick={() => setOpenTools(!openTools)}>
35
+ <SettingsIcon sx={{ fontSize: 16, color: '#DE8B50' }} />
36
+ </S.IconTools>
37
+ ) : null}
38
+ {openTools ? (
39
+ <S.ListTools>
40
+ {table.getAllLeafColumns().map((column: any) => {
41
+ return (
42
+ <div key={column.id} className="px-1">
43
+ <label>
44
+ <input
45
+ {...{
46
+ type: 'checkbox',
47
+ checked: column.getIsVisible(),
48
+ onChange: column.getToggleVisibilityHandler(),
49
+ }}
50
+ />
51
+ {column.id}
52
+ </label>
53
+ </div>
54
+ );
55
+ })}
56
+ </S.ListTools>
57
+ ) : null}
58
+ </S.Tools>
59
+ </S.Header>
60
+ );
61
+ };
62
+
63
+ export default Header;
@@ -1,59 +1,59 @@
1
- import styled from 'styled-components';
2
-
3
- export const Header = styled.div<any>`
4
- margin: ${props => (props.$showResults ? '0 24px 10px 24px;' : '0 16px;')};
5
- display: flex;
6
- justify-content: space-between;
7
- `;
8
-
9
- export const Results = styled.div`
10
- display: flex;
11
- flex-direction: column;
12
- gap: 8px;
13
- `;
14
-
15
- export const Tools = styled.div``;
16
-
17
- export const TextResult = styled.div`
18
- color: #666666;
19
- font-size: 16px;
20
- `;
21
-
22
- export const TextClearSearchContent = styled.div`
23
- height: 10px;
24
- `;
25
-
26
- export const TextClearSearch = styled.p`
27
- color: #de8b50;
28
- font-size: 14px;
29
- cursor: pointer;
30
- margin: 0;
31
- &:hover {
32
- text-decoration: underline;
33
- }
34
- `;
35
-
36
- export const IconTools = styled.div`
37
- width: 24px;
38
- height: 24px;
39
- cursor: pointer;
40
- `;
41
-
42
- export const ListTools = styled.div`
43
- padding: 12px;
44
- margin: 6px 0 0 -106px;
45
- position: absolute;
46
- background: #fff;
47
- box-shadow: 0px 3px 6px #00000029;
48
- border: 1px solid #e0e0e0;
49
- display: flex;
50
- flex-direction: column;
51
- gap: 8px;
52
- font-size: 14px;
53
- z-index: 99;
54
- label {
55
- display: flex;
56
- gap: 8px;
57
- align-items: center;
58
- }
59
- `;
1
+ import styled from 'styled-components';
2
+
3
+ export const Header = styled.div<any>`
4
+ margin: ${props => (props.$showResults ? '0 24px 10px 24px;' : '0 16px;')};
5
+ display: flex;
6
+ justify-content: space-between;
7
+ `;
8
+
9
+ export const Results = styled.div`
10
+ display: flex;
11
+ flex-direction: column;
12
+ gap: 8px;
13
+ `;
14
+
15
+ export const Tools = styled.div``;
16
+
17
+ export const TextResult = styled.div`
18
+ color: #666666;
19
+ font-size: 16px;
20
+ `;
21
+
22
+ export const TextClearSearchContent = styled.div`
23
+ height: 10px;
24
+ `;
25
+
26
+ export const TextClearSearch = styled.p`
27
+ color: #de8b50;
28
+ font-size: 14px;
29
+ cursor: pointer;
30
+ margin: 0;
31
+ &:hover {
32
+ text-decoration: underline;
33
+ }
34
+ `;
35
+
36
+ export const IconTools = styled.div`
37
+ width: 24px;
38
+ height: 24px;
39
+ cursor: pointer;
40
+ `;
41
+
42
+ export const ListTools = styled.div`
43
+ padding: 12px;
44
+ margin: 6px 0 0 -106px;
45
+ position: absolute;
46
+ background: #fff;
47
+ box-shadow: 0px 3px 6px #00000029;
48
+ border: 1px solid #e0e0e0;
49
+ display: flex;
50
+ flex-direction: column;
51
+ gap: 8px;
52
+ font-size: 14px;
53
+ z-index: 99;
54
+ label {
55
+ display: flex;
56
+ gap: 8px;
57
+ align-items: center;
58
+ }
59
+ `;
@@ -1,9 +1,9 @@
1
- import Pagination from "./pagination";
2
- import Header from "./header"
3
- import TBody from "./tbody";
4
-
5
- export {
6
- Pagination,
7
- Header,
8
- TBody
1
+ import Pagination from "./pagination";
2
+ import Header from "./header"
3
+ import TBody from "./tbody";
4
+
5
+ export {
6
+ Pagination,
7
+ Header,
8
+ TBody
9
9
  }
@@ -1,43 +1,43 @@
1
- import React from 'react';
2
- import { Pagination as MuiPagination, PaginationItem } from '@mui/material';
3
- import * as S from './styles';
4
-
5
- interface PaginationProps {
6
- count: number;
7
- pagination: { pageIndex: number; pageSize: number };
8
- onChangePage: (page: number) => void;
9
- }
10
-
11
- const Pagination = (props: PaginationProps) => {
12
- const { count, pagination, onChangePage } = props;
13
-
14
- const PreviousPagination: React.FC<any> = () => {
15
- return <span>{'<'}</span>;
16
- };
17
-
18
- const NextPagination: React.FC<any> = () => {
19
- return <span>{'>'}</span>;
20
- };
21
-
22
- return (
23
- <S.Pagination>
24
- <div className="content">
25
- <MuiPagination
26
- onChange={(_event: React.ChangeEvent<unknown>, page: number) => onChangePage(page)}
27
- page={pagination.pageIndex}
28
- count={count}
29
- renderItem={(item: any) => (
30
- <PaginationItem
31
- classes={{ root: 'button', selected: 'button-active' }}
32
- slots={{ previous: PreviousPagination, next: NextPagination }}
33
- sx={{ height: '35px', minWidth: '35px' }}
34
- {...item}
35
- />
36
- )}
37
- />
38
- </div>
39
- </S.Pagination>
40
- );
41
- };
42
-
43
- export default Pagination;
1
+ import React from 'react';
2
+ import { Pagination as MuiPagination, PaginationItem } from '@mui/material';
3
+ import * as S from './styles';
4
+
5
+ interface PaginationProps {
6
+ count: number;
7
+ pagination: { pageIndex: number; pageSize: number };
8
+ onChangePage: (page: number) => void;
9
+ }
10
+
11
+ const Pagination = (props: PaginationProps) => {
12
+ const { count, pagination, onChangePage } = props;
13
+
14
+ const PreviousPagination: React.FC<any> = () => {
15
+ return <span>{'<'}</span>;
16
+ };
17
+
18
+ const NextPagination: React.FC<any> = () => {
19
+ return <span>{'>'}</span>;
20
+ };
21
+
22
+ return (
23
+ <S.Pagination>
24
+ <div className="content">
25
+ <MuiPagination
26
+ onChange={(_event: React.ChangeEvent<unknown>, page: number) => onChangePage(page)}
27
+ page={pagination.pageIndex}
28
+ count={count}
29
+ renderItem={(item: any) => (
30
+ <PaginationItem
31
+ classes={{ root: 'button', selected: 'button-active' }}
32
+ slots={{ previous: PreviousPagination, next: NextPagination }}
33
+ sx={{ height: '35px', minWidth: '35px' }}
34
+ {...item}
35
+ />
36
+ )}
37
+ />
38
+ </div>
39
+ </S.Pagination>
40
+ );
41
+ };
42
+
43
+ export default Pagination;
@@ -1,29 +1,29 @@
1
- import styled from "styled-components";
2
-
3
- export const Pagination = styled.div`
4
- width: 100%;
5
- margin: 24px 0 0 0;
6
- display: flex;
7
- justify-content: center;
8
- .content {
9
- display: flex;
10
- gap: 8px;
11
- .button {
12
- border: 1px solid #E8E9EC;
13
- background: #fff;
14
- border-radius: 4px;
15
- color: #4D4F5C;
16
- cursor: pointer;
17
- &:disabled {
18
- opacity: 0.4;
19
- }
20
- }
21
- .button-active {
22
- border: 1px solid #FFDB9F;
23
- background: #FFDB9F;
24
- color: #B74616;
25
- border-radius: 4px;
26
- cursor: pointer;
27
- }
28
- }
1
+ import styled from "styled-components";
2
+
3
+ export const Pagination = styled.div`
4
+ width: 100%;
5
+ margin: 24px 0 0 0;
6
+ display: flex;
7
+ justify-content: center;
8
+ .content {
9
+ display: flex;
10
+ gap: 8px;
11
+ .button {
12
+ border: 1px solid #E8E9EC;
13
+ background: #fff;
14
+ border-radius: 4px;
15
+ color: #4D4F5C;
16
+ cursor: pointer;
17
+ &:disabled {
18
+ opacity: 0.4;
19
+ }
20
+ }
21
+ .button-active {
22
+ border: 1px solid #FFDB9F;
23
+ background: #FFDB9F;
24
+ color: #B74616;
25
+ border-radius: 4px;
26
+ cursor: pointer;
27
+ }
28
+ }
29
29
  `
@@ -1,31 +1,31 @@
1
- import React from "react"
2
- import { flexRender } from '@tanstack/react-table'
3
- import * as S from "./styles"
4
-
5
- const TBody:React.FC<any> = ({ table, onClick, onMouseOver, onMouseOut }) => {
6
- return (
7
- <tbody>
8
- { table.getRowModel().rows.map((row: any, index: number) => {
9
- return <S.Tr
10
- key={index}
11
- $hasAction={!!onClick || !!onMouseOver || !!onMouseOut}
12
- onClick={() => onClick ? onClick(row.original) : null}
13
- onMouseOver={() => onMouseOver ? onMouseOver(row.original) : null}
14
- onMouseOut={() => onMouseOut ? onMouseOut(row.original) : null}>
15
- { row.getVisibleCells().map((cell: any, index: number) => {
16
- return (
17
- <td key={index}>
18
- { cell.column.columnDef.type == 'action'
19
- ? cell.getValue()
20
- : flexRender(cell.column.columnDef.cell, cell.getContext())
21
- }
22
- </td>
23
- )
24
- }) }
25
- </S.Tr>
26
- }) }
27
- </tbody>
28
- )
29
- }
30
-
1
+ import React from "react"
2
+ import { flexRender } from '@tanstack/react-table'
3
+ import * as S from "./styles"
4
+
5
+ const TBody:React.FC<any> = ({ table, onClick, onMouseOver, onMouseOut }) => {
6
+ return (
7
+ <tbody>
8
+ { table.getRowModel().rows.map((row: any, index: number) => {
9
+ return <S.Tr
10
+ key={index}
11
+ $hasAction={!!onClick || !!onMouseOver || !!onMouseOut}
12
+ onClick={() => onClick ? onClick(row.original) : null}
13
+ onMouseOver={() => onMouseOver ? onMouseOver(row.original) : null}
14
+ onMouseOut={() => onMouseOut ? onMouseOut(row.original) : null}>
15
+ { row.getVisibleCells().map((cell: any, index: number) => {
16
+ return (
17
+ <td key={index}>
18
+ { cell.column.columnDef.type == 'action'
19
+ ? cell.getValue()
20
+ : flexRender(cell.column.columnDef.cell, cell.getContext())
21
+ }
22
+ </td>
23
+ )
24
+ }) }
25
+ </S.Tr>
26
+ }) }
27
+ </tbody>
28
+ )
29
+ }
30
+
31
31
  export default TBody
@@ -1,5 +1,5 @@
1
- import styled from "styled-components"
2
-
3
- export const Tr = styled.tr<any>`
4
- cursor: ${props => props.$hasAction ? 'pointer' : 'default' };
1
+ import styled from "styled-components"
2
+
3
+ export const Tr = styled.tr<any>`
4
+ cursor: ${props => props.$hasAction ? 'pointer' : 'default' };
5
5
  `