norma-library 0.6.90 → 0.6.91
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/UncontrolledTable.js +2 -2
- package/dist/esm/components/UncontrolledTable/UncontrolledTable.js.map +1 -1
- package/dist/esm/components/UncontrolledTable/components/TableButton/TableButton.js +14 -2
- package/dist/esm/components/UncontrolledTable/components/TableButton/TableButton.js.map +1 -1
- package/dist/esm/components/UncontrolledTable/components/TableButton/TableButton.style.d.ts +4 -1
- package/dist/esm/components/UncontrolledTable/components/TableButton/TableButton.style.js +4 -4
- package/dist/esm/components/UncontrolledTable/components/TableButton/TableButton.style.js.map +1 -1
- package/dist/esm/components/UncontrolledTable/interface.d.ts +3 -3
- package/dist/esm/hooks/useOutsideScreen.d.ts +7 -0
- package/dist/esm/hooks/useOutsideScreen.js +30 -0
- package/dist/esm/hooks/useOutsideScreen.js.map +1 -0
- package/package.json +1 -1
- package/src/components/UncontrolledTable/UncontrolledTable.tsx +10 -4
- package/src/components/UncontrolledTable/components/TableButton/TableButton.style.tsx +5 -4
- package/src/components/UncontrolledTable/components/TableButton/TableButton.tsx +22 -3
- package/src/components/UncontrolledTable/interface.ts +3 -3
- package/src/hooks/useOutsideScreen.tsx +35 -0
|
@@ -8,8 +8,8 @@ import useClickOutside from '../../hooks/useClickOutside';
|
|
|
8
8
|
import { Pagination, Header, SimpleRow, DraggableRow, RowDragHandleCell } from './components';
|
|
9
9
|
import * as S from './UncontrolledTable.style';
|
|
10
10
|
var UncontrolledTable = function (props) {
|
|
11
|
-
var data = props.data, columns = props.columns,
|
|
12
|
-
var onChangePage = props.onChangePage, onFilterClick = props.onFilterClick, onSortClick = props.onSortClick, onDragEnd = props.onDragEnd, onColumnVisibilityChange = props.onColumnVisibilityChange;
|
|
11
|
+
var data = props.data, columns = props.columns, pagination = props.pagination, totalPages = props.totalPages, labels = props.labels, tableClassName = props.tableClassName, sticky = props.sticky, draggable = props.draggable, buttons = props.buttons, configs = props.configs, hideColumns = props.hideColumns;
|
|
12
|
+
var onClick = props.onClick, onMouseOver = props.onMouseOver, onMouseOut = props.onMouseOut, onChangePage = props.onChangePage, onFilterClick = props.onFilterClick, onSortClick = props.onSortClick, onDragEnd = props.onDragEnd, onColumnVisibilityChange = props.onColumnVisibilityChange;
|
|
13
13
|
var _a = useState(''), openFilterDialog = _a[0], setOpenFilterDialog = _a[1];
|
|
14
14
|
var _b = useState([]), sorting = _b[0], setSorting = _b[1];
|
|
15
15
|
var _c = useState([]), filterByColumn = _c[0], setFilterByColumn = _c[1];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UncontrolledTable.js","sourceRoot":"","sources":["../../../../src/components/UncontrolledTable/UncontrolledTable.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,EACL,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,aAAa,GAGd,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EACL,UAAU,EACV,WAAW,EACX,aAAa,EAGb,SAAS,EACT,UAAU,EACV,WAAW,EACX,cAAc,GACf,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAA;AAE3F,OAAO,eAAe,MAAM,6BAA6B,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAG7F,OAAO,KAAK,CAAC,MAAM,2BAA2B,CAAA;AAE9C,IAAM,iBAAiB,GAAG,UAAC,KAA6B;IAEpD,IAAA,IAAI,
|
|
1
|
+
{"version":3,"file":"UncontrolledTable.js","sourceRoot":"","sources":["../../../../src/components/UncontrolledTable/UncontrolledTable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useRef, useState } from 'react';
|
|
1
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
2
2
|
import * as S from './TableButton.style';
|
|
3
3
|
import { Switch } from '@mui/material';
|
|
4
4
|
import useClickOutside from '../../../../hooks/useClickOutside';
|
|
@@ -6,10 +6,22 @@ var TableButton = function (props) {
|
|
|
6
6
|
var children = props.children, theme = props.theme, list = props.list, onClick = props.onClick;
|
|
7
7
|
var _a = useState(false), isOpen = _a[0], setIsOpen = _a[1];
|
|
8
8
|
var TableListItemRef = useRef(null);
|
|
9
|
+
var ListRef = useRef(null);
|
|
10
|
+
var _b = useState(true), isOutside = _b[0], setIsOutside = _b[1];
|
|
9
11
|
useClickOutside(TableListItemRef, function () {
|
|
10
12
|
if (isOpen)
|
|
11
13
|
setIsOpen(false);
|
|
12
14
|
});
|
|
15
|
+
useEffect(function () {
|
|
16
|
+
if (isOpen && ListRef.current) {
|
|
17
|
+
var listRect = ListRef.current.getBoundingClientRect();
|
|
18
|
+
var viewportWidth = window.innerWidth;
|
|
19
|
+
setIsOutside(listRect.right < viewportWidth);
|
|
20
|
+
return function () {
|
|
21
|
+
setIsOutside(true);
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
}, [isOpen]);
|
|
13
25
|
return (React.createElement(S.TableButtonContainer, { ref: TableListItemRef },
|
|
14
26
|
React.createElement(S.TableButton, { ref: TableListItemRef, "$config": theme === 'config', "$list": !!list, onClick: function () {
|
|
15
27
|
setIsOpen(!isOpen);
|
|
@@ -17,7 +29,7 @@ var TableButton = function (props) {
|
|
|
17
29
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
18
30
|
} },
|
|
19
31
|
React.createElement(S.TableLabel, null, children)),
|
|
20
|
-
list &&
|
|
32
|
+
list && (React.createElement(S.TableList, { ref: ListRef, "$position": isOutside ? 'left' : 'right', "$visible": isOpen }, list === null || list === void 0 ? void 0 : list.options.map(function (item, index) {
|
|
21
33
|
var _a;
|
|
22
34
|
return (React.createElement(S.TableListItem, { key: index, onClick: function () {
|
|
23
35
|
var _a;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableButton.js","sourceRoot":"","sources":["../../../../../../src/components/UncontrolledTable/components/TableButton/TableButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"TableButton.js","sourceRoot":"","sources":["../../../../../../src/components/UncontrolledTable/components/TableButton/TableButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,KAAK,CAAC,MAAM,qBAAqB,CAAA;AAExC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,eAAe,MAAM,mCAAmC,CAAA;AAY/D,IAAM,WAAW,GAAG,UAAC,KAAuB;IAClC,IAAA,QAAQ,GAA2B,KAAK,SAAhC,EAAE,KAAK,GAAoB,KAAK,MAAzB,EAAE,IAAI,GAAc,KAAK,KAAnB,EAAE,OAAO,GAAK,KAAK,QAAV,CAAU;IAC1C,IAAA,KAAsB,QAAQ,CAAC,KAAK,CAAC,EAApC,MAAM,QAAA,EAAE,SAAS,QAAmB,CAAA;IAC3C,IAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACrD,IAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACtC,IAAA,KAA4B,QAAQ,CAAU,IAAI,CAAC,EAAlD,SAAS,QAAA,EAAE,YAAY,QAA2B,CAAA;IAEzD,eAAe,CAAC,gBAAgB,EAAE;QAChC,IAAI,MAAM;YAAE,SAAS,CAAC,KAAK,CAAC,CAAA;IAC9B,CAAC,CAAC,CAAA;IAEF,SAAS,CAAC;QAER,IAAI,MAAM,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;YAE9B,IAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAA;YACxD,IAAM,aAAa,GAAG,MAAM,CAAC,UAAU,CAAA;YAGvC,YAAY,CAAC,QAAQ,CAAC,KAAK,GAAG,aAAa,CAAC,CAAA;YAE5C,OAAO;gBACL,YAAY,CAAC,IAAI,CAAC,CAAA;YACpB,CAAC,CAAA;QACH,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAGZ,OAAO,CACL,oBAAC,CAAC,CAAC,oBAAoB,IAAC,GAAG,EAAE,gBAAgB;QAC3C,oBAAC,CAAC,CAAC,WAAW,IACZ,GAAG,EAAE,gBAAgB,aACZ,KAAK,KAAK,QAAQ,WACpB,CAAC,CAAC,IAAI,EACb,OAAO,EAAE;gBACP,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;gBAClB,IAAI,CAAC,IAAI;oBAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAA;YACxB,CAAC;YAED,oBAAC,CAAC,CAAC,UAAU,QAAE,QAAQ,CAAgB,CACzB;QACf,IAAI,IAAI,CACP,oBAAC,CAAC,CAAC,SAAS,IAAC,GAAG,EAAE,OAAO,eAAa,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,cAAY,MAAM,IACjF,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK;;YAAK,OAAA,CAClC,oBAAC,CAAC,CAAC,aAAa,IACd,GAAG,EAAE,KAAK,EACV,OAAO,EAAE;;oBACP,MAAA,IAAI,CAAC,OAAO,qDAAG,IAAI,CAAC,EAAE,CAAC,CAAA;gBACzB,CAAC,eACU,IAAI,CAAC,QAAQ;gBAExB,kCAAO,IAAI,CAAC,KAAK,CAAQ;gBACxB,IAAI,CAAC,cAAc,IAAI,CACtB,oBAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,OAAO,oDAAI,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,GAC7E,CACH,CACe,CACnB,CAAA;SAAA,CAAC,CACU,CACf,CACsB,CAC1B,CAAA;AACH,CAAC,CAAA;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -4,7 +4,10 @@ export declare const TableButton: import("styled-components/dist/types").IStyled
|
|
|
4
4
|
$list?: boolean;
|
|
5
5
|
}>> & string;
|
|
6
6
|
export declare const TableLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
7
|
-
export declare const TableList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").
|
|
7
|
+
export declare const TableList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
8
|
+
$position?: "left" | "right";
|
|
9
|
+
$visible?: boolean;
|
|
10
|
+
}>> & string;
|
|
8
11
|
export declare const TableListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
9
12
|
$disabled?: boolean;
|
|
10
13
|
}>> & string;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { __makeTemplateObject } from "tslib";
|
|
2
2
|
import styled from 'styled-components';
|
|
3
|
-
export var TableButtonContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n position: relative;\n"], ["\n display: block;\n position: relative;\n"])));
|
|
4
|
-
export var TableButton = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: ", ";\n box-sizing: border-box;\n padding: 10px;\n border-radius: 4px;\n
|
|
5
|
-
export var TableLabel = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: 14px;\n color: #333;\n font-weight: 500;\n cursor: pointer
|
|
6
|
-
export var TableList = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n background-color: #fff;\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n padding: 10px;\n z-index: 1000;\n
|
|
3
|
+
export var TableButtonContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n position: relative;\n cursor: pointer;\n"], ["\n display: block;\n position: relative;\n cursor: pointer;\n"])));
|
|
4
|
+
export var TableButton = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: ", ";\n box-sizing: border-box;\n padding: 10px;\n border-radius: 4px;\n &:hover {\n background-color: ", ";\n }\n"], ["\n background-color: ", ";\n border: ", ";\n box-sizing: border-box;\n padding: 10px;\n border-radius: 4px;\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return (!props.$config ? '#f0f0f0' : '#fff'); }, function (props) { return (props.$config ? '1px solid #ccc' : 'none'); }, function (props) { return (!props.$config ? '#e0e0e0' : '#f9f9f9'); });
|
|
5
|
+
export var TableLabel = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: 14px;\n color: #333;\n font-weight: 500;\n /* cursor: pointer; */\n"], ["\n font-size: 14px;\n color: #333;\n font-weight: 500;\n /* cursor: pointer; */\n"])));
|
|
6
|
+
export var TableList = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n visibility: ", ";\n position: absolute;\n background-color: #fff;\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n padding: 10px;\n z-index: 1000;\n ", "\n top: calc(100% + 10px);\n width: 200px;\n"], ["\n visibility: ", ";\n position: absolute;\n background-color: #fff;\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n padding: 10px;\n z-index: 1000;\n ", "\n top: calc(100% + 10px);\n width: 200px;\n"])), function (props) { return (props.$visible ? 'visible' : 'hidden'); }, function (props) { return (props.$position === 'left' ? 'left: 0;' : 'right: 0;'); });
|
|
7
7
|
export var TableListItem = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n filter: ", ";\n pointer-events: ", ";\n color: ", ";\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 5px 10px;\n cursor: pointer;\n"], ["\n filter: ", ";\n pointer-events: ", ";\n color: ", ";\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 5px 10px;\n cursor: pointer;\n"])), function (props) { return (props.$disabled ? 'grayscale(1)' : 'none'); }, function (props) { return (props.$disabled ? 'none' : 'auto'); }, function (props) { return (props.$disabled ? '#999' : '#333'); });
|
|
8
8
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
9
9
|
//# sourceMappingURL=TableButton.style.js.map
|
package/dist/esm/components/UncontrolledTable/components/TableButton/TableButton.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableButton.style.js","sourceRoot":"","sources":["../../../../../../src/components/UncontrolledTable/components/TableButton/TableButton.style.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,MAAM,CAAC,IAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,
|
|
1
|
+
{"version":3,"file":"TableButton.style.js","sourceRoot":"","sources":["../../../../../../src/components/UncontrolledTable/components/TableButton/TableButton.style.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,MAAM,CAAC,IAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,qIAAA,kEAI7C,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,WAAW,GAAG,MAAM,CAAC,GAAG,sOAAwC,wBACvD,EAAgD,eAC1D,EAAsD,4GAK1C,EAAmD,UAE1E,KARqB,UAAC,KAAK,IAAK,OAAA,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,EAArC,CAAqC,EAC1D,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,EAA3C,CAA2C,EAK1C,UAAC,KAAK,IAAK,OAAA,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,EAAxC,CAAwC,CAE1E,CAAA;AAED,MAAM,CAAC,IAAM,UAAU,GAAG,MAAM,CAAC,GAAG,0JAAA,uFAKnC,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,SAAS,GAAG,MAAM,CAAC,GAAG,4SAAsD,kBACzE,EAAkD,mKAO9D,EAAkE,gDAGrE,KAVe,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAvC,CAAuC,EAO9D,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,EAAvD,CAAuD,CAGrE,CAAA;AAED,MAAM,CAAC,IAAM,aAAa,GAAG,MAAM,CAAC,GAAG,wPAAyB,cACpD,EAAsD,uBAC9C,EAA8C,cACvD,EAA8C,4HAMxD,KARW,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,EAA3C,CAA2C,EAC9C,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,EAAnC,CAAmC,EACvD,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,EAAnC,CAAmC,CAMxD,CAAA"}
|
|
@@ -34,9 +34,6 @@ export interface TableButton {
|
|
|
34
34
|
export interface UncontrolledTableProps {
|
|
35
35
|
data: any;
|
|
36
36
|
columns: ColumnDef<ColumnsTable>[];
|
|
37
|
-
onClick: any;
|
|
38
|
-
onMouseOver: any;
|
|
39
|
-
onMouseOut: any;
|
|
40
37
|
pagination?: Pagination;
|
|
41
38
|
totalPages: number;
|
|
42
39
|
labels?: Labels;
|
|
@@ -46,6 +43,9 @@ export interface UncontrolledTableProps {
|
|
|
46
43
|
buttons?: TableButton[];
|
|
47
44
|
configs?: TableButton[];
|
|
48
45
|
hideColumns?: string[];
|
|
46
|
+
onClick?: () => void;
|
|
47
|
+
onMouseOver?: () => void;
|
|
48
|
+
onMouseOut?: () => void;
|
|
49
49
|
onColumnVisibilityChange?: (column: string, value: boolean) => void;
|
|
50
50
|
onChangePage: (pagination: Pagination) => void;
|
|
51
51
|
onFilterClick?: (column: string) => void;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Hook that detects when an element is partially visible in the viewport
|
|
4
|
+
* @param elementRef - Reference to the DOM element to observe
|
|
5
|
+
* @returns boolean indicating if the element is partially visible in the viewport
|
|
6
|
+
*/
|
|
7
|
+
export declare const usePartiallyVisible: (elementRef: RefObject<HTMLElement | null>) => boolean;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { useState, useEffect } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Hook that detects when an element is partially visible in the viewport
|
|
4
|
+
* @param elementRef - Reference to the DOM element to observe
|
|
5
|
+
* @returns boolean indicating if the element is partially visible in the viewport
|
|
6
|
+
*/
|
|
7
|
+
export var usePartiallyVisible = function (elementRef) {
|
|
8
|
+
var _a = useState(false), isPartiallyVisible = _a[0], setIsPartiallyVisible = _a[1];
|
|
9
|
+
useEffect(function () {
|
|
10
|
+
var element = elementRef.current;
|
|
11
|
+
if (!element)
|
|
12
|
+
return;
|
|
13
|
+
var observer = new IntersectionObserver(function (_a) {
|
|
14
|
+
var entry = _a[0];
|
|
15
|
+
// Element is partially visible if it's intersecting but not completely visible
|
|
16
|
+
var isPartial = entry.isIntersecting && entry.intersectionRatio < 1.0;
|
|
17
|
+
setIsPartiallyVisible(isPartial);
|
|
18
|
+
}, {
|
|
19
|
+
root: null, // Use the viewport as the root
|
|
20
|
+
threshold: [0, 1.0], // Check at these thresholds to determine partial visibility
|
|
21
|
+
});
|
|
22
|
+
observer.observe(element);
|
|
23
|
+
return function () {
|
|
24
|
+
if (element)
|
|
25
|
+
observer.unobserve(element);
|
|
26
|
+
};
|
|
27
|
+
}, [elementRef]);
|
|
28
|
+
return isPartiallyVisible;
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=useOutsideScreen.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useOutsideScreen.js","sourceRoot":"","sources":["../../../src/hooks/useOutsideScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAa,MAAM,OAAO,CAAA;AAEtD;;;;GAIG;AACH,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,UAAyC;IACnE,IAAA,KAA8C,QAAQ,CAAU,KAAK,CAAC,EAArE,kBAAkB,QAAA,EAAE,qBAAqB,QAA4B,CAAA;IAE5E,SAAS,CAAC;QACN,IAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAA;QAClC,IAAI,CAAC,OAAO;YAAE,OAAM;QAEpB,IAAM,QAAQ,GAAG,IAAI,oBAAoB,CACrC,UAAC,EAAO;gBAAN,KAAK,QAAA;YACH,+EAA+E;YAC/E,IAAM,SAAS,GAAG,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,iBAAiB,GAAG,GAAG,CAAA;YACvE,qBAAqB,CAAC,SAAS,CAAC,CAAA;QACpC,CAAC,EACD;YACI,IAAI,EAAE,IAAI,EAAE,+BAA+B;YAC3C,SAAS,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,4DAA4D;SACpF,CACJ,CAAA;QAED,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;QAEzB,OAAO;YACH,IAAI,OAAO;gBAAE,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;QAC5C,CAAC,CAAA;IACL,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,OAAO,kBAAkB,CAAA;AAC7B,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "norma-library",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.91",
|
|
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": {
|
|
@@ -31,9 +31,6 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
|
|
|
31
31
|
const {
|
|
32
32
|
data,
|
|
33
33
|
columns,
|
|
34
|
-
onClick,
|
|
35
|
-
onMouseOver,
|
|
36
|
-
onMouseOut,
|
|
37
34
|
pagination,
|
|
38
35
|
totalPages,
|
|
39
36
|
labels,
|
|
@@ -45,7 +42,16 @@ const UncontrolledTable = (props: UncontrolledTableProps) => {
|
|
|
45
42
|
hideColumns,
|
|
46
43
|
} = props
|
|
47
44
|
|
|
48
|
-
const {
|
|
45
|
+
const {
|
|
46
|
+
onClick,
|
|
47
|
+
onMouseOver,
|
|
48
|
+
onMouseOut,
|
|
49
|
+
onChangePage,
|
|
50
|
+
onFilterClick,
|
|
51
|
+
onSortClick,
|
|
52
|
+
onDragEnd,
|
|
53
|
+
onColumnVisibilityChange,
|
|
54
|
+
} = props
|
|
49
55
|
|
|
50
56
|
const [openFilterDialog, setOpenFilterDialog] = useState('')
|
|
51
57
|
const [sorting, setSorting] = useState<any>([])
|
|
@@ -3,6 +3,7 @@ import styled from 'styled-components'
|
|
|
3
3
|
export const TableButtonContainer = styled.div`
|
|
4
4
|
display: block;
|
|
5
5
|
position: relative;
|
|
6
|
+
cursor: pointer;
|
|
6
7
|
`
|
|
7
8
|
|
|
8
9
|
export const TableButton = styled.div<{ $config?: boolean; $list?: boolean }>`
|
|
@@ -11,7 +12,6 @@ export const TableButton = styled.div<{ $config?: boolean; $list?: boolean }>`
|
|
|
11
12
|
box-sizing: border-box;
|
|
12
13
|
padding: 10px;
|
|
13
14
|
border-radius: 4px;
|
|
14
|
-
cursor: ${(props) => (props.$list ? 'default' : 'pointer')};
|
|
15
15
|
&:hover {
|
|
16
16
|
background-color: ${(props) => (!props.$config ? '#e0e0e0' : '#f9f9f9')};
|
|
17
17
|
}
|
|
@@ -21,17 +21,18 @@ export const TableLabel = styled.div`
|
|
|
21
21
|
font-size: 14px;
|
|
22
22
|
color: #333;
|
|
23
23
|
font-weight: 500;
|
|
24
|
-
cursor: pointer;
|
|
24
|
+
/* cursor: pointer; */
|
|
25
25
|
`
|
|
26
26
|
|
|
27
|
-
export const TableList = styled.div
|
|
27
|
+
export const TableList = styled.div<{ $position?: 'left' | 'right', $visible?: boolean }>`
|
|
28
|
+
visibility: ${(props) => (props.$visible ? 'visible' : 'hidden')};
|
|
28
29
|
position: absolute;
|
|
29
30
|
background-color: #fff;
|
|
30
31
|
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
|
|
31
32
|
border-radius: 4px;
|
|
32
33
|
padding: 10px;
|
|
33
34
|
z-index: 1000;
|
|
34
|
-
left: 0;
|
|
35
|
+
${(props) => (props.$position === 'left' ? 'left: 0;' : 'right: 0;')}
|
|
35
36
|
top: calc(100% + 10px);
|
|
36
37
|
width: 200px;
|
|
37
38
|
`
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useRef, useState } from 'react'
|
|
1
|
+
import React, { useEffect, useRef, useState } from 'react'
|
|
2
2
|
import * as S from './TableButton.style'
|
|
3
3
|
import { TableList } from '../../interface'
|
|
4
4
|
import { Switch } from '@mui/material'
|
|
@@ -18,11 +18,30 @@ const TableButton = (props: TableButtonProps) => {
|
|
|
18
18
|
const { children, theme, list, onClick } = props
|
|
19
19
|
const [isOpen, setIsOpen] = useState(false)
|
|
20
20
|
const TableListItemRef = useRef<HTMLDivElement>(null)
|
|
21
|
+
const ListRef = useRef<HTMLDivElement>(null)
|
|
22
|
+
const [isOutside, setIsOutside] = useState<boolean>(true)
|
|
21
23
|
|
|
22
24
|
useClickOutside(TableListItemRef, () => {
|
|
23
25
|
if (isOpen) setIsOpen(false)
|
|
24
26
|
})
|
|
25
27
|
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
|
|
30
|
+
if (isOpen && ListRef.current) {
|
|
31
|
+
|
|
32
|
+
const listRect = ListRef.current.getBoundingClientRect()
|
|
33
|
+
const viewportWidth = window.innerWidth
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
setIsOutside(listRect.right < viewportWidth)
|
|
37
|
+
|
|
38
|
+
return () => {
|
|
39
|
+
setIsOutside(true)
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}, [isOpen])
|
|
43
|
+
|
|
44
|
+
|
|
26
45
|
return (
|
|
27
46
|
<S.TableButtonContainer ref={TableListItemRef}>
|
|
28
47
|
<S.TableButton
|
|
@@ -36,8 +55,8 @@ const TableButton = (props: TableButtonProps) => {
|
|
|
36
55
|
>
|
|
37
56
|
<S.TableLabel>{children}</S.TableLabel>
|
|
38
57
|
</S.TableButton>
|
|
39
|
-
{list &&
|
|
40
|
-
<S.TableList>
|
|
58
|
+
{list && (
|
|
59
|
+
<S.TableList ref={ListRef} $position={isOutside ? 'left' : 'right'} $visible={isOpen}>
|
|
41
60
|
{list?.options.map((item, index) => (
|
|
42
61
|
<S.TableListItem
|
|
43
62
|
key={index}
|
|
@@ -40,9 +40,6 @@ export interface TableButton {
|
|
|
40
40
|
export interface UncontrolledTableProps {
|
|
41
41
|
data: any
|
|
42
42
|
columns: ColumnDef<ColumnsTable>[]
|
|
43
|
-
onClick: any
|
|
44
|
-
onMouseOver: any
|
|
45
|
-
onMouseOut: any
|
|
46
43
|
pagination?: Pagination
|
|
47
44
|
totalPages: number
|
|
48
45
|
labels?: Labels
|
|
@@ -52,6 +49,9 @@ export interface UncontrolledTableProps {
|
|
|
52
49
|
buttons?: TableButton[]
|
|
53
50
|
configs?: TableButton[]
|
|
54
51
|
hideColumns?: string[]
|
|
52
|
+
onClick?: () => void
|
|
53
|
+
onMouseOver?: () => void
|
|
54
|
+
onMouseOut?: () => void
|
|
55
55
|
onColumnVisibilityChange?: (column: string, value: boolean) => void
|
|
56
56
|
onChangePage: (pagination: Pagination) => void
|
|
57
57
|
onFilterClick?: (column: string) => void
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { useState, useEffect, RefObject } from 'react'
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Hook that detects when an element is partially visible in the viewport
|
|
5
|
+
* @param elementRef - Reference to the DOM element to observe
|
|
6
|
+
* @returns boolean indicating if the element is partially visible in the viewport
|
|
7
|
+
*/
|
|
8
|
+
export const usePartiallyVisible = (elementRef: RefObject<HTMLElement | null>): boolean => {
|
|
9
|
+
const [isPartiallyVisible, setIsPartiallyVisible] = useState<boolean>(false)
|
|
10
|
+
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
const element = elementRef.current
|
|
13
|
+
if (!element) return
|
|
14
|
+
|
|
15
|
+
const observer = new IntersectionObserver(
|
|
16
|
+
([entry]) => {
|
|
17
|
+
// Element is partially visible if it's intersecting but not completely visible
|
|
18
|
+
const isPartial = entry.isIntersecting && entry.intersectionRatio < 1.0
|
|
19
|
+
setIsPartiallyVisible(isPartial)
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
root: null, // Use the viewport as the root
|
|
23
|
+
threshold: [0, 1.0], // Check at these thresholds to determine partial visibility
|
|
24
|
+
}
|
|
25
|
+
)
|
|
26
|
+
|
|
27
|
+
observer.observe(element)
|
|
28
|
+
|
|
29
|
+
return () => {
|
|
30
|
+
if (element) observer.unobserve(element)
|
|
31
|
+
}
|
|
32
|
+
}, [elementRef])
|
|
33
|
+
|
|
34
|
+
return isPartiallyVisible
|
|
35
|
+
}
|