norma-library 0.5.146 → 0.5.148
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/esm/components/UncontrolledTable/components/header/index.js +7 -7
- package/dist/esm/components/UncontrolledTable/components/header/index.js.map +1 -1
- package/dist/esm/components/UncontrolledTable/components/header/styles.js +2 -2
- package/dist/esm/components/UncontrolledTable/components/header/styles.js.map +1 -1
- package/dist/esm/components/UncontrolledTable/components/tbody/styles.js +7 -1
- package/dist/esm/components/UncontrolledTable/components/tbody/styles.js.map +1 -1
- package/dist/esm/components/UncontrolledTable/styles.js +7 -1
- package/dist/esm/components/UncontrolledTable/styles.js.map +1 -1
- package/dist/esm/helpers/colors.d.ts +4 -0
- package/dist/esm/helpers/colors.js +30 -0
- package/dist/esm/helpers/colors.js.map +1 -1
- package/dist/esm/utils/styledBreakpoints.d.ts +10 -0
- package/dist/esm/utils/styledBreakpoints.js +12 -0
- package/dist/esm/utils/styledBreakpoints.js.map +1 -0
- package/package.json +1 -1
- package/src/components/UncontrolledTable/components/header/index.tsx +14 -12
- package/src/components/UncontrolledTable/components/header/styles.tsx +4 -1
- package/src/components/UncontrolledTable/components/tbody/styles.tsx +7 -0
- package/src/components/UncontrolledTable/styles.tsx +7 -0
- package/src/helpers/colors.ts +36 -1
- package/src/stories/UncontrolledTable.stories.tsx +4 -4
- package/src/utils/styledBreakpoints.ts +25 -0
|
@@ -1,9 +1,13 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
1
|
+
import React, { useRef, useState } from 'react';
|
|
2
2
|
import * as S from './styles';
|
|
3
3
|
import SettingsIcon from '@mui/icons-material/Settings';
|
|
4
|
+
import { CheckBox } from '../../../CheckBox';
|
|
5
|
+
import useClickOutside from '../../../../hooks/useClickOutside';
|
|
4
6
|
var Header = function (_a) {
|
|
5
7
|
var table = _a.table, showTotalResults = _a.showTotalResults, showSettings = _a.showSettings, showClearFiels = _a.showClearFiels, onClearFieldsClick = _a.onClearFieldsClick, customTotalResults = _a.customTotalResults, clearLabel = _a.clearLabel;
|
|
6
8
|
var _b = useState(false), openTools = _b[0], setOpenTools = _b[1];
|
|
9
|
+
var listToolsRef = useRef(null);
|
|
10
|
+
useClickOutside(listToolsRef, function () { return setOpenTools(false); });
|
|
7
11
|
return (React.createElement(S.Header, { "$showResults": showTotalResults },
|
|
8
12
|
React.createElement("div", null,
|
|
9
13
|
showTotalResults && (React.createElement(S.Results, null,
|
|
@@ -12,13 +16,9 @@ var Header = function (_a) {
|
|
|
12
16
|
React.createElement(S.Tools, null,
|
|
13
17
|
showSettings ? (React.createElement(S.IconTools, { onClick: function () { return setOpenTools(!openTools); } },
|
|
14
18
|
React.createElement(SettingsIcon, { sx: { fontSize: 16, color: '#DE8B50' } }))) : null,
|
|
15
|
-
openTools ? (React.createElement(S.ListTools,
|
|
19
|
+
openTools ? (React.createElement(S.ListTools, { ref: listToolsRef }, table.getAllLeafColumns().map(function (column) {
|
|
16
20
|
return (React.createElement("div", { key: column.id, className: "px-1" },
|
|
17
|
-
React.createElement(
|
|
18
|
-
React.createElement("input", { type: 'checkbox',
|
|
19
|
-
checked: column.getIsVisible(),
|
|
20
|
-
onChange: column.getToggleVisibilityHandler() }),
|
|
21
|
-
column.id)));
|
|
21
|
+
React.createElement(CheckBox, { label: column.columnDef.header || column.id, size: "small", checked: column.getIsVisible(), value: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() })));
|
|
22
22
|
}))) : null)));
|
|
23
23
|
};
|
|
24
24
|
export default Header;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/UncontrolledTable/components/header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/UncontrolledTable/components/header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,CAAC,MAAM,UAAU,CAAC;AAC9B,OAAO,YAAY,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,eAAe,MAAM,mCAAmC,CAAC;AAEhE,IAAM,MAAM,GAAkB,UAAC,EAQ9B;QAPC,KAAK,WAAA,EACL,gBAAgB,sBAAA,EAChB,YAAY,kBAAA,EACZ,cAAc,oBAAA,EACd,kBAAkB,wBAAA,EAClB,kBAAkB,wBAAA,EAClB,UAAU,gBAAA;IAEJ,IAAA,KAA4B,QAAQ,CAAC,KAAK,CAAC,EAA1C,SAAS,QAAA,EAAE,YAAY,QAAmB,CAAC;IAClD,IAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,eAAe,CAAC,YAAY,EAAE,cAAM,OAAA,YAAY,CAAC,KAAK,CAAC,EAAnB,CAAmB,CAAC,CAAC;IAEzD,OAAO,CACL,oBAAC,CAAC,CAAC,MAAM,oBAAe,gBAAgB;QACtC;YACG,gBAAgB,IAAI,CACnB,oBAAC,CAAC,CAAC,OAAO;gBACR,oBAAC,CAAC,CAAC,UAAU,QACV,kBAAkB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAG,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,MAAM,6BAA0B,CAC1F,CACL,CACb;YACA,cAAc,IAAI,CACjB,oBAAC,CAAC,CAAC,eAAe,IAAC,OAAO,EAAE,cAAM,OAAA,kBAAkB,IAAI,kBAAkB,EAAE,EAA1C,CAA0C,IACzE,UAAU,IAAI,cAAc,CACX,CACrB,CACG;QACN,oBAAC,CAAC,CAAC,KAAK;YACL,YAAY,CAAC,CAAC,CAAC,CACd,oBAAC,CAAC,CAAC,SAAS,IAAC,OAAO,EAAE,cAAM,OAAA,YAAY,CAAC,CAAC,SAAS,CAAC,EAAxB,CAAwB;gBAClD,oBAAC,YAAY,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,GAAI,CAC5C,CACf,CAAC,CAAC,CAAC,IAAI;YACP,SAAS,CAAC,CAAC,CAAC,CACX,oBAAC,CAAC,CAAC,SAAS,IAAC,GAAG,EAAE,YAAY,IAC3B,KAAK,CAAC,iBAAiB,EAAE,CAAC,GAAG,CAAC,UAAC,MAAW;gBACzC,OAAO,CACL,6BAAK,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,SAAS,EAAC,MAAM;oBACnC,oBAAC,QAAQ,IACP,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,MAAM,IAAI,MAAM,CAAC,EAAE,EAC3C,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,MAAM,CAAC,YAAY,EAAE,EAC9B,KAAK,EAAE,MAAM,CAAC,YAAY,EAAE,EAC5B,QAAQ,EAAE,MAAM,CAAC,0BAA0B,EAAE,GAC7C,CACE,CACP,CAAC;YACJ,CAAC,CAAC,CACU,CACf,CAAC,CAAC,CAAC,IAAI,CACA,CACD,CACZ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { __makeTemplateObject } from "tslib";
|
|
2
2
|
import styled from 'styled-components';
|
|
3
|
-
export var Header = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: calc(100% - 32px);\n margin: 0 auto;\n"], ["\n display: flex;\n justify-content: space-between;\n width: calc(100% - 32px);\n margin: 0 auto;\n"])));
|
|
3
|
+
export var Header = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: calc(100% - 32px);\n @media screen and (min-width: 768px) {\n width: calc(100% - 16px);\n }\n margin: 0 auto;\n"], ["\n display: flex;\n justify-content: space-between;\n width: calc(100% - 32px);\n @media screen and (min-width: 768px) {\n width: calc(100% - 16px);\n }\n margin: 0 auto;\n"])));
|
|
4
4
|
export var Results = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 8px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 8px;\n"])));
|
|
5
5
|
export var Tools = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
|
|
6
6
|
export var TextResult = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: #666666;\n font-size: 16px;\n"], ["\n color: #666666;\n font-size: 16px;\n"])));
|
|
7
7
|
export var TextClearSearchContent = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 10px;\n"], ["\n height: 10px;\n"])));
|
|
8
8
|
export var TextClearSearch = styled.p(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n color: #de8b50;\n font-size: 14px;\n cursor: pointer;\n margin: 0;\n &:hover {\n text-decoration: underline;\n }\n"], ["\n color: #de8b50;\n font-size: 14px;\n cursor: pointer;\n margin: 0;\n &:hover {\n text-decoration: underline;\n }\n"])));
|
|
9
9
|
export var IconTools = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 24px;\n height: 24px;\n cursor: pointer;\n"], ["\n width: 24px;\n height: 24px;\n cursor: pointer;\n"])));
|
|
10
|
-
export var ListTools = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding: 12px;\n margin: 6px 0 0 -106px;\n position: absolute;\n background: #fff;\n box-shadow: 0px 3px 6px #00000029;\n border: 1px solid #e0e0e0;\n display: flex;\n flex-direction: column;\n gap: 8px;\n font-size: 14px;\n z-index:
|
|
10
|
+
export var ListTools = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding: 12px;\n margin: 6px 0 0 -106px;\n position: absolute;\n background: #fff;\n box-shadow: 0px 3px 6px #00000029;\n border: 1px solid #e0e0e0;\n display: flex;\n flex-direction: column;\n gap: 8px;\n font-size: 14px;\n z-index: 100;\n label {\n display: flex;\n gap: 8px;\n align-items: center;\n }\n"], ["\n padding: 12px;\n margin: 6px 0 0 -106px;\n position: absolute;\n background: #fff;\n box-shadow: 0px 3px 6px #00000029;\n border: 1px solid #e0e0e0;\n display: flex;\n flex-direction: column;\n gap: 8px;\n font-size: 14px;\n z-index: 100;\n label {\n display: flex;\n gap: 8px;\n align-items: center;\n }\n"])));
|
|
11
11
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
12
12
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../src/components/UncontrolledTable/components/header/styles.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,IAAM,MAAM,GAAG,MAAM,CAAC,GAAG,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../src/components/UncontrolledTable/components/header/styles.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,IAAM,MAAM,GAAG,MAAM,CAAC,GAAG,0PAAK,uLAQpC,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,OAAO,GAAG,MAAM,CAAC,GAAG,iIAAA,8DAIhC,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,KAAK,GAAG,MAAM,CAAC,GAAG,qEAAA,EAAE,IAAA,CAAC;AAElC,MAAM,CAAC,IAAM,UAAU,GAAG,MAAM,CAAC,GAAG,8GAAA,2CAGnC,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,wFAAA,qBAE/C,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAG,MAAM,CAAC,CAAC,mMAAA,gIAQtC,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,SAAS,GAAG,MAAM,CAAC,GAAG,4HAAA,yDAIlC,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,SAAS,GAAG,MAAM,CAAC,GAAG,gZAAA,6UAiBlC,IAAA,CAAC"}
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import { __makeTemplateObject } from "tslib";
|
|
2
|
+
import { breakpoints } from '../../../../utils/styledBreakpoints';
|
|
2
3
|
import styled from 'styled-components';
|
|
3
4
|
export var Tr = styled.tr(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: inherit;\n display: table-row;\n vertical-align: middle;\n outline: 0;\n &:nth-of-type(even) {\n background-color: #fafafa;\n }\n"], ["\n color: inherit;\n display: table-row;\n vertical-align: middle;\n outline: 0;\n &:nth-of-type(even) {\n background-color: #fafafa;\n }\n"])));
|
|
4
|
-
export var Td = styled.td(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.5rem;\n letter-spacing: 0.01071em;\n display: table-cell;\n vertical-align: inherit;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n text-align: left;\n padding: 16px;\n color: #666666;\n font-size: 0.875rem;\n"], ["\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.5rem;\n letter-spacing: 0.01071em;\n display: table-cell;\n vertical-align: inherit;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n text-align: left;\n padding: 16px;\n color: #666666;\n font-size: 0.875rem;\n"]))
|
|
5
|
+
export var Td = styled.td(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.5rem;\n letter-spacing: 0.01071em;\n display: table-cell;\n vertical-align: inherit;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n text-align: left;\n ", ";\n padding: 16px;\n color: #666666;\n font-size: 0.875rem;\n"], ["\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.5rem;\n letter-spacing: 0.01071em;\n display: table-cell;\n vertical-align: inherit;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n text-align: left;\n ", ";\n padding: 16px;\n color: #666666;\n font-size: 0.875rem;\n"])), breakpoints({
|
|
6
|
+
cssProp: 'padding',
|
|
7
|
+
cssPropUnits: 'px',
|
|
8
|
+
values: [{ 768: 8 }, { 1024: 16 }],
|
|
9
|
+
mediaQueryType: 'min-width',
|
|
10
|
+
}));
|
|
5
11
|
var templateObject_1, templateObject_2;
|
|
6
12
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../src/components/UncontrolledTable/components/tbody/styles.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,IAAM,EAAE,GAAG,MAAM,CAAC,EAAE,yNAAK,sJAQ/B,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,EAAE,GAAG,MAAM,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../src/components/UncontrolledTable/components/tbody/styles.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,IAAM,EAAE,GAAG,MAAM,CAAC,EAAE,yNAAK,sJAQ/B,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,EAAE,GAAG,MAAM,CAAC,EAAE,6WAAA,sOASvB,EAKA,kEAIH,KATG,WAAW,CAAC;IACZ,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,IAAI;IAClB,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;IAClC,cAAc,EAAE,WAAW;CAC5B,CAAC,CAIH,CAAC"}
|
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
import { __makeTemplateObject } from "tslib";
|
|
2
|
+
import { breakpoints } from '../../utils/styledBreakpoints';
|
|
2
3
|
import styled from 'styled-components';
|
|
3
4
|
export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: #fff;\n"], ["\n background-color: #fff;\n"])));
|
|
4
5
|
export var Table = styled.table(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: table;\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n min-width: 650px;\n border: none;\n"], ["\n display: table;\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n min-width: 650px;\n border: none;\n"])));
|
|
5
6
|
var StickyStyles = "\n position: sticky;\n top: 0;\n z-index: 99;\n background: #fff;\n";
|
|
6
7
|
export var Thead = styled.thead(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: table-header-group;\n ", "\n"], ["\n display: table-header-group;\n ", "\n"])), function (props) { return props.$sticky && StickyStyles; });
|
|
7
8
|
export var TableRow = styled.tr(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: inherit;\n display: table-row;\n vertical-align: middle;\n outline: 0;\n"], ["\n color: inherit;\n display: table-row;\n vertical-align: middle;\n outline: 0;\n"])));
|
|
8
|
-
export var Th = styled.th(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.5rem;\n letter-spacing: 0.01071em;\n display: table-cell;\n vertical-align: inherit;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n text-align: left;\n padding: 16px;\n color: rgba(0, 0, 0, 0.87);\n color: #666666;\n font-size: 0.875rem;\n font-weight: 700;\n"], ["\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.5rem;\n letter-spacing: 0.01071em;\n display: table-cell;\n vertical-align: inherit;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n text-align: left;\n padding: 16px;\n color: rgba(0, 0, 0, 0.87);\n color: #666666;\n font-size: 0.875rem;\n font-weight: 700;\n"]))
|
|
9
|
+
export var Th = styled.th(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.5rem;\n letter-spacing: 0.01071em;\n display: table-cell;\n vertical-align: inherit;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n text-align: left;\n padding: 16px;\n ", ";\n color: rgba(0, 0, 0, 0.87);\n color: #666666;\n font-size: 0.875rem;\n font-weight: 700;\n"], ["\n font-weight: 500;\n font-size: 0.875rem;\n line-height: 1.5rem;\n letter-spacing: 0.01071em;\n display: table-cell;\n vertical-align: inherit;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n text-align: left;\n padding: 16px;\n ", ";\n color: rgba(0, 0, 0, 0.87);\n color: #666666;\n font-size: 0.875rem;\n font-weight: 700;\n"])), breakpoints({
|
|
10
|
+
cssProp: 'padding',
|
|
11
|
+
cssPropUnits: 'px',
|
|
12
|
+
values: [{ 768: 8 }, { 1024: 16 }],
|
|
13
|
+
mediaQueryType: 'min-width',
|
|
14
|
+
}));
|
|
9
15
|
export var ColumnContent = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 5px;\n"], ["\n display: flex;\n align-items: center;\n gap: 5px;\n"])));
|
|
10
16
|
export var TextColumn = styled.span(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""])));
|
|
11
17
|
export var IconFilterDialog = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n height: 20px;\n width: 20px;\n"], ["\n height: 20px;\n width: 20px;\n"])));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/UncontrolledTable/styles.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,IAAM,SAAS,GAAG,MAAM,CAAC,GAAG,kGAAA,+BAElC,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,KAAK,GAAG,MAAM,CAAC,KAAK,oMAAA,iIAOhC,IAAA,CAAC;AAEF,IAAM,YAAY,GAAG,yEAKpB,CAAC;AAEF,MAAM,CAAC,IAAM,KAAK,GAAG,MAAM,CAAC,KAAK,+GAAuB,sCAEpD,EAAsC,IACzC,KADG,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,OAAO,IAAI,YAAY,EAA7B,CAA6B,CACzC,CAAC;AAEF,MAAM,CAAC,IAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,2JAAA,wFAKhC,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,EAAE,GAAG,MAAM,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/UncontrolledTable/styles.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,IAAM,SAAS,GAAG,MAAM,CAAC,GAAG,kGAAA,+BAElC,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,KAAK,GAAG,MAAM,CAAC,KAAK,oMAAA,iIAOhC,IAAA,CAAC;AAEF,IAAM,YAAY,GAAG,yEAKpB,CAAC;AAEF,MAAM,CAAC,IAAM,KAAK,GAAG,MAAM,CAAC,KAAK,+GAAuB,sCAEpD,EAAsC,IACzC,KADG,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,OAAO,IAAI,YAAY,EAA7B,CAA6B,CACzC,CAAC;AAEF,MAAM,CAAC,IAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,2JAAA,wFAKhC,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,EAAE,GAAG,MAAM,CAAC,EAAE,iaAAA,wPAUvB,EAKA,oGAKH,KAVG,WAAW,CAAC;IACZ,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,IAAI;IAClB,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;IAClC,cAAc,EAAE,WAAW;CAC5B,CAAC,CAKH,CAAC;AAEF,MAAM,CAAC,IAAM,aAAa,GAAG,MAAM,CAAC,GAAG,8HAAA,2DAItC,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,UAAU,GAAG,MAAM,CAAC,IAAI,qEAAA,EAAE,IAAA,CAAC;AAExC,MAAM,CAAC,IAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,wGAAA,qCAGzC,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,YAAY,GAAG,MAAM,CAAC,GAAG,0QAAA,uMASrC,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,kUAAA,6PAczC,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,6bAAA,wXAyB3C,IAAA,CAAC"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { PaletteOptions } from '@mui/material/styles';
|
|
1
2
|
export declare const getPalette: () => {
|
|
2
3
|
primary: string;
|
|
3
4
|
primaryLight: string;
|
|
@@ -161,11 +162,14 @@ export declare const olosPalette: {
|
|
|
161
162
|
main: string;
|
|
162
163
|
};
|
|
163
164
|
};
|
|
165
|
+
export declare const newOlosPalette: PaletteOptions;
|
|
164
166
|
export declare const lightTheme: import("@mui/material/styles").Theme;
|
|
167
|
+
export declare const newLightTheme: import("@mui/material/styles").Theme;
|
|
165
168
|
export declare const darkTheme: import("@mui/material/styles").Theme;
|
|
166
169
|
export declare const themes: {
|
|
167
170
|
light: import("@mui/material/styles").Theme;
|
|
168
171
|
dark: import("@mui/material/styles").Theme;
|
|
172
|
+
newLight: import("@mui/material/styles").Theme;
|
|
169
173
|
};
|
|
170
174
|
type PaletteKey = keyof typeof getPalette;
|
|
171
175
|
declare const getColor: (key: PaletteKey) => string;
|
|
@@ -130,9 +130,38 @@ export var olosPalette = {
|
|
|
130
130
|
main: palette.success,
|
|
131
131
|
},
|
|
132
132
|
};
|
|
133
|
+
export var newOlosPalette = {
|
|
134
|
+
primary: {
|
|
135
|
+
main: palette.primary,
|
|
136
|
+
light: palette.primaryLight,
|
|
137
|
+
dark: palette.primaryDark,
|
|
138
|
+
'500': palette.primaryMedium,
|
|
139
|
+
},
|
|
140
|
+
secondary: {
|
|
141
|
+
main: palette.secondary,
|
|
142
|
+
light: palette.secondaryLight,
|
|
143
|
+
dark: palette.secondaryDark,
|
|
144
|
+
'500': palette.secondaryMedium,
|
|
145
|
+
},
|
|
146
|
+
error: {
|
|
147
|
+
main: palette.error,
|
|
148
|
+
},
|
|
149
|
+
warning: {
|
|
150
|
+
main: palette.warning,
|
|
151
|
+
},
|
|
152
|
+
info: {
|
|
153
|
+
main: palette.info,
|
|
154
|
+
},
|
|
155
|
+
success: {
|
|
156
|
+
main: palette.success,
|
|
157
|
+
},
|
|
158
|
+
};
|
|
133
159
|
export var lightTheme = createTheme({
|
|
134
160
|
palette: __assign({ mode: 'light' }, olosPalette),
|
|
135
161
|
});
|
|
162
|
+
export var newLightTheme = createTheme({
|
|
163
|
+
palette: __assign({ mode: 'light' }, newOlosPalette),
|
|
164
|
+
});
|
|
136
165
|
export var darkTheme = createTheme({
|
|
137
166
|
palette: __assign(__assign({ mode: 'dark' }, olosPalette), { background: {
|
|
138
167
|
default: palette.inheritLight,
|
|
@@ -142,6 +171,7 @@ export var darkTheme = createTheme({
|
|
|
142
171
|
export var themes = {
|
|
143
172
|
light: lightTheme,
|
|
144
173
|
dark: darkTheme,
|
|
174
|
+
newLight: newLightTheme,
|
|
145
175
|
};
|
|
146
176
|
var getColor = function (key) {
|
|
147
177
|
var palette = getPalette();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/helpers/colors.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/helpers/colors.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
type Breakpoint = {
|
|
2
|
+
cssProp: string;
|
|
3
|
+
cssPropUnits: string;
|
|
4
|
+
values: {
|
|
5
|
+
[key: number]: number;
|
|
6
|
+
}[];
|
|
7
|
+
mediaQueryType: 'max-width' | 'min-width' | 'max-height' | 'min-height';
|
|
8
|
+
};
|
|
9
|
+
export declare const breakpoints: (breakpoints: Breakpoint) => import("styled-components").RuleSet<object>;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { __makeTemplateObject } from "tslib";
|
|
2
|
+
import { css } from 'styled-components';
|
|
3
|
+
export var breakpoints = function (breakpoints) {
|
|
4
|
+
var cssProp = breakpoints.cssProp, cssPropUnits = breakpoints.cssPropUnits, values = breakpoints.values, mediaQueryType = breakpoints.mediaQueryType;
|
|
5
|
+
var breakpointProps = values.reduce(function (mediaQueries, value) {
|
|
6
|
+
var _a = [Object.keys(value)[0], Object.values(value)[0]], screenBreakpoint = _a[0], cssPropBreakpoint = _a[1];
|
|
7
|
+
return (mediaQueries += "\n @media screen and (".concat(mediaQueryType, ": ").concat(screenBreakpoint, "px) {\n ").concat(cssProp, ": ").concat(cssPropBreakpoint).concat(cssPropUnits, ";\n }\n "));
|
|
8
|
+
}, '');
|
|
9
|
+
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), breakpointProps);
|
|
10
|
+
};
|
|
11
|
+
var templateObject_1;
|
|
12
|
+
//# sourceMappingURL=styledBreakpoints.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styledBreakpoints.js","sourceRoot":"","sources":["../../../src/utils/styledBreakpoints.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AASxC,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,WAAuB;IACzC,IAAA,OAAO,GAA2C,WAAW,QAAtD,EAAE,YAAY,GAA6B,WAAW,aAAxC,EAAE,MAAM,GAAqB,WAAW,OAAhC,EAAE,cAAc,GAAK,WAAW,eAAhB,CAAiB;IAEtE,IAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,UAAC,YAAY,EAAE,KAAK;QAClD,IAAA,KAAwC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,EAAvF,gBAAgB,QAAA,EAAE,iBAAiB,QAAoD,CAAC;QAC/F,OAAO,CAAC,YAAY,IAAI,mCACH,cAAc,eAAK,gBAAgB,0BACpD,OAAO,eAAK,iBAAiB,SAAG,YAAY,mBAE/C,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,GAAG,mFAAA,QACN,EAAe,MAClB,KADG,eAAe,EACjB;AACJ,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "norma-library",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.148",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.",
|
|
6
6
|
"scripts": {
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
1
|
+
import React, { useRef, useState } from 'react';
|
|
2
2
|
import * as S from './styles';
|
|
3
3
|
import SettingsIcon from '@mui/icons-material/Settings';
|
|
4
|
+
import { CheckBox } from '../../../CheckBox';
|
|
5
|
+
import useClickOutside from '../../../../hooks/useClickOutside';
|
|
4
6
|
|
|
5
7
|
const Header: React.FC<any> = ({
|
|
6
8
|
table,
|
|
@@ -12,6 +14,9 @@ const Header: React.FC<any> = ({
|
|
|
12
14
|
clearLabel,
|
|
13
15
|
}) => {
|
|
14
16
|
const [openTools, setOpenTools] = useState(false);
|
|
17
|
+
const listToolsRef = useRef<HTMLDivElement>(null);
|
|
18
|
+
|
|
19
|
+
useClickOutside(listToolsRef, () => setOpenTools(false));
|
|
15
20
|
|
|
16
21
|
return (
|
|
17
22
|
<S.Header $showResults={showTotalResults}>
|
|
@@ -36,20 +41,17 @@ const Header: React.FC<any> = ({
|
|
|
36
41
|
</S.IconTools>
|
|
37
42
|
) : null}
|
|
38
43
|
{openTools ? (
|
|
39
|
-
<S.ListTools>
|
|
44
|
+
<S.ListTools ref={listToolsRef}>
|
|
40
45
|
{table.getAllLeafColumns().map((column: any) => {
|
|
41
46
|
return (
|
|
42
47
|
<div key={column.id} className="px-1">
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
/>
|
|
51
|
-
{column.id}
|
|
52
|
-
</label>
|
|
48
|
+
<CheckBox
|
|
49
|
+
label={column.columnDef.header || column.id}
|
|
50
|
+
size="small"
|
|
51
|
+
checked={column.getIsVisible()}
|
|
52
|
+
value={column.getIsVisible()}
|
|
53
|
+
onChange={column.getToggleVisibilityHandler()}
|
|
54
|
+
/>
|
|
53
55
|
</div>
|
|
54
56
|
);
|
|
55
57
|
})}
|
|
@@ -4,6 +4,9 @@ export const Header = styled.div<any>`
|
|
|
4
4
|
display: flex;
|
|
5
5
|
justify-content: space-between;
|
|
6
6
|
width: calc(100% - 32px);
|
|
7
|
+
@media screen and (min-width: 768px) {
|
|
8
|
+
width: calc(100% - 16px);
|
|
9
|
+
}
|
|
7
10
|
margin: 0 auto;
|
|
8
11
|
`;
|
|
9
12
|
|
|
@@ -51,7 +54,7 @@ export const ListTools = styled.div`
|
|
|
51
54
|
flex-direction: column;
|
|
52
55
|
gap: 8px;
|
|
53
56
|
font-size: 14px;
|
|
54
|
-
z-index:
|
|
57
|
+
z-index: 100;
|
|
55
58
|
label {
|
|
56
59
|
display: flex;
|
|
57
60
|
gap: 8px;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { breakpoints } from '../../../../utils/styledBreakpoints';
|
|
1
2
|
import styled from 'styled-components';
|
|
2
3
|
|
|
3
4
|
export const Tr = styled.tr<any>`
|
|
@@ -19,6 +20,12 @@ export const Td = styled.td`
|
|
|
19
20
|
vertical-align: inherit;
|
|
20
21
|
border-bottom: 1px solid rgba(224, 224, 224, 1);
|
|
21
22
|
text-align: left;
|
|
23
|
+
${breakpoints({
|
|
24
|
+
cssProp: 'padding',
|
|
25
|
+
cssPropUnits: 'px',
|
|
26
|
+
values: [{ 768: 8 }, { 1024: 16 }],
|
|
27
|
+
mediaQueryType: 'min-width',
|
|
28
|
+
})};
|
|
22
29
|
padding: 16px;
|
|
23
30
|
color: #666666;
|
|
24
31
|
font-size: 0.875rem;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { breakpoints } from '../../utils/styledBreakpoints';
|
|
1
2
|
import styled from 'styled-components';
|
|
2
3
|
|
|
3
4
|
export const Container = styled.div`
|
|
@@ -42,6 +43,12 @@ export const Th = styled.th`
|
|
|
42
43
|
border-bottom: 1px solid rgba(224, 224, 224, 1);
|
|
43
44
|
text-align: left;
|
|
44
45
|
padding: 16px;
|
|
46
|
+
${breakpoints({
|
|
47
|
+
cssProp: 'padding',
|
|
48
|
+
cssPropUnits: 'px',
|
|
49
|
+
values: [{ 768: 8 }, { 1024: 16 }],
|
|
50
|
+
mediaQueryType: 'min-width',
|
|
51
|
+
})};
|
|
45
52
|
color: rgba(0, 0, 0, 0.87);
|
|
46
53
|
color: #666666;
|
|
47
54
|
font-size: 0.875rem;
|
package/src/helpers/colors.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createTheme } from '@mui/material/styles';
|
|
1
|
+
import { createTheme, PaletteOptions } from '@mui/material/styles';
|
|
2
2
|
|
|
3
3
|
export const getPalette = () => {
|
|
4
4
|
return {
|
|
@@ -135,6 +135,33 @@ export const olosPalette = {
|
|
|
135
135
|
},
|
|
136
136
|
};
|
|
137
137
|
|
|
138
|
+
export const newOlosPalette: PaletteOptions = {
|
|
139
|
+
primary: {
|
|
140
|
+
main: palette.primary,
|
|
141
|
+
light: palette.primaryLight,
|
|
142
|
+
dark: palette.primaryDark,
|
|
143
|
+
'500': palette.primaryMedium,
|
|
144
|
+
},
|
|
145
|
+
secondary: {
|
|
146
|
+
main: palette.secondary,
|
|
147
|
+
light: palette.secondaryLight,
|
|
148
|
+
dark: palette.secondaryDark,
|
|
149
|
+
'500': palette.secondaryMedium,
|
|
150
|
+
},
|
|
151
|
+
error: {
|
|
152
|
+
main: palette.error,
|
|
153
|
+
},
|
|
154
|
+
warning: {
|
|
155
|
+
main: palette.warning,
|
|
156
|
+
},
|
|
157
|
+
info: {
|
|
158
|
+
main: palette.info,
|
|
159
|
+
},
|
|
160
|
+
success: {
|
|
161
|
+
main: palette.success,
|
|
162
|
+
},
|
|
163
|
+
};
|
|
164
|
+
|
|
138
165
|
export const lightTheme = createTheme({
|
|
139
166
|
palette: {
|
|
140
167
|
mode: 'light',
|
|
@@ -142,6 +169,13 @@ export const lightTheme = createTheme({
|
|
|
142
169
|
},
|
|
143
170
|
});
|
|
144
171
|
|
|
172
|
+
export const newLightTheme = createTheme({
|
|
173
|
+
palette: {
|
|
174
|
+
mode: 'light',
|
|
175
|
+
...newOlosPalette,
|
|
176
|
+
},
|
|
177
|
+
});
|
|
178
|
+
|
|
145
179
|
export const darkTheme = createTheme({
|
|
146
180
|
palette: {
|
|
147
181
|
mode: 'dark',
|
|
@@ -156,6 +190,7 @@ export const darkTheme = createTheme({
|
|
|
156
190
|
export const themes = {
|
|
157
191
|
light: lightTheme,
|
|
158
192
|
dark: darkTheme,
|
|
193
|
+
newLight: newLightTheme,
|
|
159
194
|
};
|
|
160
195
|
|
|
161
196
|
type PaletteKey = keyof typeof getPalette;
|
|
@@ -238,28 +238,28 @@ const data = [
|
|
|
238
238
|
|
|
239
239
|
const columns = [
|
|
240
240
|
{
|
|
241
|
-
header: '
|
|
241
|
+
header: 'Data',
|
|
242
242
|
accessorKey: 'date',
|
|
243
243
|
type: 'date',
|
|
244
244
|
enableColumnFilter: true,
|
|
245
245
|
filterFn: 'customFilterText',
|
|
246
246
|
},
|
|
247
247
|
{
|
|
248
|
-
header: '
|
|
248
|
+
header: 'Duração',
|
|
249
249
|
accessorKey: 'duration',
|
|
250
250
|
type: 'number',
|
|
251
251
|
enableColumnFilter: true,
|
|
252
252
|
filterFn: 'customFilterText',
|
|
253
253
|
},
|
|
254
254
|
{
|
|
255
|
-
header: '
|
|
255
|
+
header: 'Campanha',
|
|
256
256
|
accessorKey: 'campaign',
|
|
257
257
|
type: 'string',
|
|
258
258
|
enableColumnFilter: true,
|
|
259
259
|
filterFn: 'customFilterText',
|
|
260
260
|
},
|
|
261
261
|
{
|
|
262
|
-
header: '
|
|
262
|
+
header: 'Ação',
|
|
263
263
|
accessorKey: 'action',
|
|
264
264
|
type: 'action',
|
|
265
265
|
enableColumnFilter: false,
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { css } from 'styled-components';
|
|
2
|
+
|
|
3
|
+
type Breakpoint = {
|
|
4
|
+
cssProp: string;
|
|
5
|
+
cssPropUnits: string;
|
|
6
|
+
values: { [key: number]: number }[];
|
|
7
|
+
mediaQueryType: 'max-width' | 'min-width' | 'max-height' | 'min-height';
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export const breakpoints = (breakpoints: Breakpoint) => {
|
|
11
|
+
const { cssProp, cssPropUnits, values, mediaQueryType } = breakpoints;
|
|
12
|
+
|
|
13
|
+
const breakpointProps = values.reduce((mediaQueries, value) => {
|
|
14
|
+
const [screenBreakpoint, cssPropBreakpoint] = [Object.keys(value)[0], Object.values(value)[0]];
|
|
15
|
+
return (mediaQueries += `
|
|
16
|
+
@media screen and (${mediaQueryType}: ${screenBreakpoint}px) {
|
|
17
|
+
${cssProp}: ${cssPropBreakpoint}${cssPropUnits};
|
|
18
|
+
}
|
|
19
|
+
`);
|
|
20
|
+
}, '');
|
|
21
|
+
|
|
22
|
+
return css`
|
|
23
|
+
${breakpointProps}
|
|
24
|
+
`;
|
|
25
|
+
};
|