contentoh-components-library 21.3.37 → 21.3.39
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/organisms/TableResizable/TableResizable.stories.js +35 -0
- package/dist/components/organisms/TableResizable/index.js +159 -0
- package/dist/components/organisms/TableResizable/styles.js +28 -0
- package/dist/components/organisms/TableResizable/utils.js +24 -0
- package/dist/index.js +13 -0
- package/package.json +7 -6
- package/src/components/organisms/TableResizable/TableResizable.stories.js +17 -0
- package/src/components/organisms/TableResizable/index.js +121 -0
- package/src/components/organisms/TableResizable/styles.js +133 -0
- package/src/components/organisms/TableResizable/utils.js +46 -0
- package/src/index.js +1 -0
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = exports.DefaultTableResizable = void 0;
|
|
9
|
+
|
|
10
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
|
|
11
|
+
|
|
12
|
+
var _ = require(".");
|
|
13
|
+
|
|
14
|
+
var _utils = require("./utils.js");
|
|
15
|
+
|
|
16
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
|
+
|
|
18
|
+
var _default = {
|
|
19
|
+
title: "Components/organisms/TableResizable",
|
|
20
|
+
component: _.TableResizable
|
|
21
|
+
};
|
|
22
|
+
exports.default = _default;
|
|
23
|
+
|
|
24
|
+
var Template = function Template(args) {
|
|
25
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TableResizable, (0, _objectSpread2.default)({}, args));
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
var DefaultTableResizable = Template.bind({});
|
|
29
|
+
exports.DefaultTableResizable = DefaultTableResizable;
|
|
30
|
+
DefaultTableResizable.args = {
|
|
31
|
+
headers: ["Col 1", "Col 2", "Col 3", "Col 4", "Col 5"],
|
|
32
|
+
tableContent: _utils.data,
|
|
33
|
+
minCellWidth: 120,
|
|
34
|
+
withResetSizeButton: true
|
|
35
|
+
};
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
+
|
|
5
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.TableResizable = void 0;
|
|
11
|
+
|
|
12
|
+
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
|
|
13
|
+
|
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
15
|
+
|
|
16
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
17
|
+
|
|
18
|
+
var _iconsMaterial = require("@mui/icons-material");
|
|
19
|
+
|
|
20
|
+
var _styles = require("./styles.js");
|
|
21
|
+
|
|
22
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
23
|
+
|
|
24
|
+
var createHeaders = function createHeaders(headers) {
|
|
25
|
+
return headers.map(function (item) {
|
|
26
|
+
return {
|
|
27
|
+
text: item,
|
|
28
|
+
ref: (0, _react.useRef)()
|
|
29
|
+
};
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
/*
|
|
33
|
+
* Read the blog post here:
|
|
34
|
+
* https://letsbuildui.dev/articles/resizable-tables-with-react-and-css-grid
|
|
35
|
+
*/
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
var TableResizable = function TableResizable(props) {
|
|
39
|
+
var gridTemplateColumns = props.gridTemplateColumns,
|
|
40
|
+
headers = props.headers,
|
|
41
|
+
minCellWidth = props.minCellWidth,
|
|
42
|
+
tableContent = props.tableContent,
|
|
43
|
+
withResetSizeButton = props.withResetSizeButton; // const [tableHeight, setTableHeight] = useState("auto");
|
|
44
|
+
|
|
45
|
+
var _useState = (0, _react.useState)(null),
|
|
46
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
47
|
+
activeIndex = _useState2[0],
|
|
48
|
+
setActiveIndex = _useState2[1];
|
|
49
|
+
|
|
50
|
+
var tableElement = (0, _react.useRef)(null);
|
|
51
|
+
var columns = createHeaders(headers); // useEffect(() => {
|
|
52
|
+
// setTableHeight(tableElement.current.offsetHeight);
|
|
53
|
+
// }, []);
|
|
54
|
+
|
|
55
|
+
var mouseDown = function mouseDown(index) {
|
|
56
|
+
return setActiveIndex(index);
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
var mouseMove = (0, _react.useCallback)(function (e) {
|
|
60
|
+
var gridColumns = columns.map(function (col, i) {
|
|
61
|
+
if (i === activeIndex) {
|
|
62
|
+
var width = e.clientX - col.ref.current.offsetLeft;
|
|
63
|
+
if (width >= minCellWidth) return "".concat(width, "px");
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
return "".concat(col.ref.current.offsetWidth, "px");
|
|
67
|
+
});
|
|
68
|
+
var gridTemplateColumns = "".concat(gridColumns.join(" "));
|
|
69
|
+
tableElement.current.style.gridTemplateColumns = gridTemplateColumns;
|
|
70
|
+
}, [activeIndex, columns, minCellWidth]);
|
|
71
|
+
var removeListeners = (0, _react.useCallback)(function () {
|
|
72
|
+
window.removeEventListener("mousemove", mouseMove);
|
|
73
|
+
window.removeEventListener("mouseup", removeListeners);
|
|
74
|
+
}, [mouseMove]);
|
|
75
|
+
var mouseUp = (0, _react.useCallback)(function () {
|
|
76
|
+
setActiveIndex(null);
|
|
77
|
+
removeListeners();
|
|
78
|
+
}, [setActiveIndex, removeListeners]);
|
|
79
|
+
(0, _react.useEffect)(function () {
|
|
80
|
+
if (activeIndex > -1) {
|
|
81
|
+
window.addEventListener("mousemove", mouseMove);
|
|
82
|
+
window.addEventListener("mouseup", mouseUp);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
return function () {
|
|
86
|
+
return removeListeners();
|
|
87
|
+
};
|
|
88
|
+
}, [activeIndex, mouseMove, mouseUp, removeListeners]);
|
|
89
|
+
|
|
90
|
+
var resetTableCells = function resetTableCells() {
|
|
91
|
+
tableElement.current.style.gridTemplateColumns = "";
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
|
|
95
|
+
gridTemplateColumns: gridTemplateColumns,
|
|
96
|
+
totalColumns: columns === null || columns === void 0 ? void 0 : columns.length,
|
|
97
|
+
totalRows: tableContent === null || tableContent === void 0 ? void 0 : tableContent.length,
|
|
98
|
+
children: [withResetSizeButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
|
|
99
|
+
className: "reset-button",
|
|
100
|
+
onClick: resetTableCells,
|
|
101
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.RestartAlt, {
|
|
102
|
+
sx: {
|
|
103
|
+
fontSize: 18
|
|
104
|
+
}
|
|
105
|
+
})
|
|
106
|
+
}) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
107
|
+
className: "table-wrapper",
|
|
108
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
|
|
109
|
+
className: "resizeable-table",
|
|
110
|
+
ref: tableElement,
|
|
111
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
|
|
112
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
|
|
113
|
+
children: [console.log({
|
|
114
|
+
columns: columns
|
|
115
|
+
}), columns === null || columns === void 0 ? void 0 : columns.map(function (_ref, i) {
|
|
116
|
+
var ref = _ref.ref,
|
|
117
|
+
text = _ref.text;
|
|
118
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("th", {
|
|
119
|
+
ref: ref,
|
|
120
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
121
|
+
children: text
|
|
122
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
123
|
+
style: {
|
|
124
|
+
height: "50px"
|
|
125
|
+
/* tableHeight */
|
|
126
|
+
|
|
127
|
+
},
|
|
128
|
+
onMouseDown: function onMouseDown() {
|
|
129
|
+
return mouseDown(i);
|
|
130
|
+
},
|
|
131
|
+
className: "resize-handle ".concat(activeIndex === i ? "active" : "idle")
|
|
132
|
+
})]
|
|
133
|
+
}, i);
|
|
134
|
+
})]
|
|
135
|
+
})
|
|
136
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("tbody", {
|
|
137
|
+
children: [console.log({
|
|
138
|
+
tableContent: tableContent
|
|
139
|
+
}), tableContent.map(function (row) {
|
|
140
|
+
var _row$columns;
|
|
141
|
+
|
|
142
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
|
|
143
|
+
children: row === null || row === void 0 ? void 0 : (_row$columns = row.columns) === null || _row$columns === void 0 ? void 0 : _row$columns.map(function (column, indexColumn) {
|
|
144
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
|
|
145
|
+
className: (0, _typeof2.default)(column) === "object" ? "noOverflow" : "",
|
|
146
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
147
|
+
children: column
|
|
148
|
+
})
|
|
149
|
+
}, "".concat(row.key, "-").concat(indexColumn));
|
|
150
|
+
})
|
|
151
|
+
}, row.key);
|
|
152
|
+
})]
|
|
153
|
+
})]
|
|
154
|
+
})
|
|
155
|
+
})]
|
|
156
|
+
});
|
|
157
|
+
};
|
|
158
|
+
|
|
159
|
+
exports.TableResizable = TableResizable;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.Container = void 0;
|
|
9
|
+
|
|
10
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
|
|
11
|
+
|
|
12
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
13
|
+
|
|
14
|
+
var _templateObject;
|
|
15
|
+
|
|
16
|
+
var defaultTemplateColumns = function defaultTemplateColumns(totalColumns) {
|
|
17
|
+
return "minmax(100px, 1fr) ".repeat(totalColumns);
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n overflow: hidden; /* Clips any scrollbars that appear */\n font-family: Avenir Next;\n font-size: 13px;\n width: 90%;\n\n .reset-button {\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n cursor: pointer;\n padding: 3px;\n border: 0;\n background: #f5f5f5;\n position: absolute;\n top: 5px;\n left: 5px;\n margin: 0;\n z-index: 10;\n }\n\n .table-wrapper {\n border-radius: 6px;\n background: #fff;\n }\n\n table {\n width: 100%;\n height: calc(100vh - 250px);\n overflow: auto; /* Allow scrolling within the table */\n display: grid;\n grid-template-columns: ", ";\n grid-template-rows: ", ";\n }\n\n table th {\n font-size: 15px;\n }\n\n table th,\n table td {\n text-align: left;\n padding: 5px;\n }\n\n table th span,\n table td span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n display: block;\n border-right: 1px solid #ccc;\n text-align: center;\n height: 100%;\n }\n\n table th:last-child span,\n table td:last-child span {\n border-right: 0px;\n }\n\n table tr td {\n border-bottom: 1px solid #ccc;\n }\n\n table tr th {\n border-bottom: 1px solid #ccc;\n }\n\n table thead,\n table tbody,\n table tr {\n display: contents;\n background: red;\n }\n\n table thead {\n -webkit-user-select: none; /* Safari */\n -ms-user-select: none; /* IE 10 and IE 11 */\n user-select: none; /* Standard syntax */\n }\n\n th {\n position: sticky;\n top: 0;\n background-color: #fff;\n line-height: 40px;\n z-index: 8;\n }\n\n td {\n line-height: 40px;\n height: 50px;\n }\n\n .resize-handle {\n display: block;\n position: absolute;\n cursor: col-resize;\n width: 8px;\n right: 0;\n top: 0;\n z-index: 1;\n border-right: 1px solid transparent;\n }\n\n .resize-handle:hover {\n border-color: #ccc;\n }\n\n .resize-handle.active {\n border-color: #517ea5;\n }\n\n .resizeable-table {\n width: 100%;\n }\n\n .noOverflow {\n overflow: inherit;\n span {\n overflow: inherit;\n }\n }\n"])), function (props) {
|
|
21
|
+
var _props$gridTemplateCo;
|
|
22
|
+
|
|
23
|
+
return (_props$gridTemplateCo = props.gridTemplateColumns) !== null && _props$gridTemplateCo !== void 0 ? _props$gridTemplateCo : defaultTemplateColumns(props.totalColumns);
|
|
24
|
+
}, function (props) {
|
|
25
|
+
return "repeat(".concat(props.totalRows + 2, ", 50px)");
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
exports.Container = Container;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.data = void 0;
|
|
7
|
+
var data = [{
|
|
8
|
+
key: 1,
|
|
9
|
+
object: {},
|
|
10
|
+
columns: ["Large Detroit Style Pizza", 3213456785, "$31.43", "Pending", "Dave"]
|
|
11
|
+
}, {
|
|
12
|
+
key: 2,
|
|
13
|
+
object: {},
|
|
14
|
+
columns: ["Large Detroit Style Pizza", 3213456785, "$31.43", "Pending", "Dave"]
|
|
15
|
+
}, {
|
|
16
|
+
key: 3,
|
|
17
|
+
object: {},
|
|
18
|
+
columns: ["Large Detroit Style Pizza", 3213456785, "$31.43", "Pending", "Dave"]
|
|
19
|
+
}, {
|
|
20
|
+
key: 4,
|
|
21
|
+
object: {},
|
|
22
|
+
columns: ["Large Detroit Style Pizza", 3213456785, "$31.43", "Pending", "Dave"]
|
|
23
|
+
}];
|
|
24
|
+
exports.data = data;
|
package/dist/index.js
CHANGED
|
@@ -979,6 +979,19 @@ Object.keys(_RangeCalendar).forEach(function (key) {
|
|
|
979
979
|
});
|
|
980
980
|
});
|
|
981
981
|
|
|
982
|
+
var _TableResizable = require("./components/organisms/TableResizable");
|
|
983
|
+
|
|
984
|
+
Object.keys(_TableResizable).forEach(function (key) {
|
|
985
|
+
if (key === "default" || key === "__esModule") return;
|
|
986
|
+
if (key in exports && exports[key] === _TableResizable[key]) return;
|
|
987
|
+
Object.defineProperty(exports, key, {
|
|
988
|
+
enumerable: true,
|
|
989
|
+
get: function get() {
|
|
990
|
+
return _TableResizable[key];
|
|
991
|
+
}
|
|
992
|
+
});
|
|
993
|
+
});
|
|
994
|
+
|
|
982
995
|
var _ChangePasswordLogin = require("./components/pages/ChangePasswordLogin");
|
|
983
996
|
|
|
984
997
|
Object.keys(_ChangePasswordLogin).forEach(function (key) {
|
package/package.json
CHANGED
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "contentoh-components-library",
|
|
3
|
-
"version": "21.3.
|
|
3
|
+
"version": "21.3.39",
|
|
4
4
|
"dependencies": {
|
|
5
5
|
"@aws-amplify/auth": "^4.5.3",
|
|
6
6
|
"@aws-amplify/datastore": "^3.11.0",
|
|
7
7
|
"@aws-amplify/ui-react": "^2.17.0",
|
|
8
8
|
"@babel/runtime": "^7.17.2",
|
|
9
|
-
"@emotion/react": "^11.10.
|
|
10
|
-
"@emotion/styled": "^11.10.
|
|
9
|
+
"@emotion/react": "^11.10.6",
|
|
10
|
+
"@emotion/styled": "^11.10.6",
|
|
11
11
|
"@fortawesome/fontawesome-svg-core": "^6.2.0",
|
|
12
12
|
"@fortawesome/free-regular-svg-icons": "^6.2.0",
|
|
13
13
|
"@fortawesome/free-solid-svg-icons": "^6.2.0",
|
|
14
14
|
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
15
|
-
"@mui/material": "^5.11.
|
|
16
|
-
"@mui/
|
|
15
|
+
"@mui/icons-material": "^5.11.16",
|
|
16
|
+
"@mui/material": "^5.12.0",
|
|
17
|
+
"@mui/styled-engine-sc": "^5.12.0",
|
|
17
18
|
"@storybook/addon-postcss": "^2.0.0",
|
|
18
19
|
"@testing-library/jest-dom": "^5.11.4",
|
|
19
20
|
"@testing-library/react": "^11.1.0",
|
|
@@ -43,7 +44,7 @@
|
|
|
43
44
|
"react-scroll": "^1.8.8",
|
|
44
45
|
"react-transition-group": "^4.4.5",
|
|
45
46
|
"storybook-addon-external-links": "^2.0.3",
|
|
46
|
-
"styled-components": "^5.3.
|
|
47
|
+
"styled-components": "^5.3.9",
|
|
47
48
|
"swiper": "^8.4.4",
|
|
48
49
|
"uuid": "^8.3.2",
|
|
49
50
|
"web-vitals": "^1.0.1"
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { TableResizable } from ".";
|
|
2
|
+
import { data } from "./utils.js";
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
title: "Components/organisms/TableResizable",
|
|
6
|
+
component: TableResizable,
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
const Template = (args) => <TableResizable {...args} />;
|
|
10
|
+
|
|
11
|
+
export const DefaultTableResizable = Template.bind({});
|
|
12
|
+
DefaultTableResizable.args = {
|
|
13
|
+
headers: ["Col 1", "Col 2", "Col 3", "Col 4", "Col 5"],
|
|
14
|
+
tableContent: data,
|
|
15
|
+
minCellWidth: 120,
|
|
16
|
+
withResetSizeButton: true,
|
|
17
|
+
};
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import React, { useState, useCallback, useEffect, useRef } from "react";
|
|
2
|
+
import { RestartAlt } from "@mui/icons-material";
|
|
3
|
+
import { Container } from "./styles.js";
|
|
4
|
+
|
|
5
|
+
const createHeaders = (headers) => {
|
|
6
|
+
return headers.map((item) => ({
|
|
7
|
+
text: item,
|
|
8
|
+
ref: useRef(),
|
|
9
|
+
}));
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
/*
|
|
13
|
+
* Read the blog post here:
|
|
14
|
+
* https://letsbuildui.dev/articles/resizable-tables-with-react-and-css-grid
|
|
15
|
+
*/
|
|
16
|
+
export const TableResizable = (props) => {
|
|
17
|
+
const {
|
|
18
|
+
gridTemplateColumns,
|
|
19
|
+
headers,
|
|
20
|
+
minCellWidth,
|
|
21
|
+
tableContent,
|
|
22
|
+
withResetSizeButton,
|
|
23
|
+
} = props;
|
|
24
|
+
// const [tableHeight, setTableHeight] = useState("auto");
|
|
25
|
+
const [activeIndex, setActiveIndex] = useState(null);
|
|
26
|
+
const tableElement = useRef(null);
|
|
27
|
+
const columns = createHeaders(headers);
|
|
28
|
+
|
|
29
|
+
// useEffect(() => {
|
|
30
|
+
// setTableHeight(tableElement.current.offsetHeight);
|
|
31
|
+
// }, []);
|
|
32
|
+
|
|
33
|
+
const mouseDown = (index) => setActiveIndex(index);
|
|
34
|
+
|
|
35
|
+
const mouseMove = useCallback(
|
|
36
|
+
(e) => {
|
|
37
|
+
const gridColumns = columns.map((col, i) => {
|
|
38
|
+
if (i === activeIndex) {
|
|
39
|
+
const width = e.clientX - col.ref.current.offsetLeft;
|
|
40
|
+
if (width >= minCellWidth) return `${width}px`;
|
|
41
|
+
}
|
|
42
|
+
return `${col.ref.current.offsetWidth}px`;
|
|
43
|
+
});
|
|
44
|
+
const gridTemplateColumns = `${gridColumns.join(" ")}`;
|
|
45
|
+
tableElement.current.style.gridTemplateColumns = gridTemplateColumns;
|
|
46
|
+
},
|
|
47
|
+
[activeIndex, columns, minCellWidth]
|
|
48
|
+
);
|
|
49
|
+
|
|
50
|
+
const removeListeners = useCallback(() => {
|
|
51
|
+
window.removeEventListener("mousemove", mouseMove);
|
|
52
|
+
window.removeEventListener("mouseup", removeListeners);
|
|
53
|
+
}, [mouseMove]);
|
|
54
|
+
|
|
55
|
+
const mouseUp = useCallback(() => {
|
|
56
|
+
setActiveIndex(null);
|
|
57
|
+
removeListeners();
|
|
58
|
+
}, [setActiveIndex, removeListeners]);
|
|
59
|
+
|
|
60
|
+
useEffect(() => {
|
|
61
|
+
if (activeIndex > -1) {
|
|
62
|
+
window.addEventListener("mousemove", mouseMove);
|
|
63
|
+
window.addEventListener("mouseup", mouseUp);
|
|
64
|
+
}
|
|
65
|
+
return () => removeListeners();
|
|
66
|
+
}, [activeIndex, mouseMove, mouseUp, removeListeners]);
|
|
67
|
+
|
|
68
|
+
const resetTableCells = () => {
|
|
69
|
+
tableElement.current.style.gridTemplateColumns = "";
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
return (
|
|
73
|
+
<Container
|
|
74
|
+
gridTemplateColumns={gridTemplateColumns}
|
|
75
|
+
totalColumns={columns?.length}
|
|
76
|
+
totalRows={tableContent?.length}
|
|
77
|
+
>
|
|
78
|
+
{withResetSizeButton ? (
|
|
79
|
+
<button className="reset-button" onClick={resetTableCells}>
|
|
80
|
+
<RestartAlt sx={{ fontSize: 18 }} />
|
|
81
|
+
</button>
|
|
82
|
+
) : null}
|
|
83
|
+
<div className="table-wrapper">
|
|
84
|
+
<table className="resizeable-table" ref={tableElement}>
|
|
85
|
+
<thead>
|
|
86
|
+
<tr>
|
|
87
|
+
{console.log({ columns })}
|
|
88
|
+
{columns?.map(({ ref, text }, i) => (
|
|
89
|
+
<th ref={ref} key={i}>
|
|
90
|
+
<span>{text}</span>
|
|
91
|
+
<div
|
|
92
|
+
style={{ height: "50px" /* tableHeight */ }}
|
|
93
|
+
onMouseDown={() => mouseDown(i)}
|
|
94
|
+
className={`resize-handle ${
|
|
95
|
+
activeIndex === i ? "active" : "idle"
|
|
96
|
+
}`}
|
|
97
|
+
/>
|
|
98
|
+
</th>
|
|
99
|
+
))}
|
|
100
|
+
</tr>
|
|
101
|
+
</thead>
|
|
102
|
+
<tbody>
|
|
103
|
+
{console.log({ tableContent })}
|
|
104
|
+
{tableContent.map((row) => (
|
|
105
|
+
<tr key={row.key}>
|
|
106
|
+
{row?.columns?.map((column, indexColumn) => (
|
|
107
|
+
<td
|
|
108
|
+
className={typeof column === "object" ? "noOverflow" : ""}
|
|
109
|
+
key={`${row.key}-${indexColumn}`}
|
|
110
|
+
>
|
|
111
|
+
<span>{column}</span>
|
|
112
|
+
</td>
|
|
113
|
+
))}
|
|
114
|
+
</tr>
|
|
115
|
+
))}
|
|
116
|
+
</tbody>
|
|
117
|
+
</table>
|
|
118
|
+
</div>
|
|
119
|
+
</Container>
|
|
120
|
+
);
|
|
121
|
+
};
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
|
|
3
|
+
const defaultTemplateColumns = (totalColumns) =>
|
|
4
|
+
`minmax(100px, 1fr) `.repeat(totalColumns);
|
|
5
|
+
|
|
6
|
+
export const Container = styled.div`
|
|
7
|
+
position: absolute;
|
|
8
|
+
overflow: hidden; /* Clips any scrollbars that appear */
|
|
9
|
+
font-family: Avenir Next;
|
|
10
|
+
font-size: 13px;
|
|
11
|
+
width: 90%;
|
|
12
|
+
|
|
13
|
+
.reset-button {
|
|
14
|
+
display: flex;
|
|
15
|
+
justify-content: center;
|
|
16
|
+
align-items: center;
|
|
17
|
+
border-radius: 50%;
|
|
18
|
+
cursor: pointer;
|
|
19
|
+
padding: 3px;
|
|
20
|
+
border: 0;
|
|
21
|
+
background: #f5f5f5;
|
|
22
|
+
position: absolute;
|
|
23
|
+
top: 5px;
|
|
24
|
+
left: 5px;
|
|
25
|
+
margin: 0;
|
|
26
|
+
z-index: 10;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.table-wrapper {
|
|
30
|
+
border-radius: 6px;
|
|
31
|
+
background: #fff;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
table {
|
|
35
|
+
width: 100%;
|
|
36
|
+
height: calc(100vh - 250px);
|
|
37
|
+
overflow: auto; /* Allow scrolling within the table */
|
|
38
|
+
display: grid;
|
|
39
|
+
grid-template-columns: ${(props) =>
|
|
40
|
+
props.gridTemplateColumns ?? defaultTemplateColumns(props.totalColumns)};
|
|
41
|
+
grid-template-rows: ${(props) => `repeat(${props.totalRows + 2}, 50px)`};
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
table th {
|
|
45
|
+
font-size: 15px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
table th,
|
|
49
|
+
table td {
|
|
50
|
+
text-align: left;
|
|
51
|
+
padding: 5px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
table th span,
|
|
55
|
+
table td span {
|
|
56
|
+
white-space: nowrap;
|
|
57
|
+
text-overflow: ellipsis;
|
|
58
|
+
overflow: hidden;
|
|
59
|
+
display: block;
|
|
60
|
+
border-right: 1px solid #ccc;
|
|
61
|
+
text-align: center;
|
|
62
|
+
height: 100%;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
table th:last-child span,
|
|
66
|
+
table td:last-child span {
|
|
67
|
+
border-right: 0px;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
table tr td {
|
|
71
|
+
border-bottom: 1px solid #ccc;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
table tr th {
|
|
75
|
+
border-bottom: 1px solid #ccc;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
table thead,
|
|
79
|
+
table tbody,
|
|
80
|
+
table tr {
|
|
81
|
+
display: contents;
|
|
82
|
+
background: red;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
table thead {
|
|
86
|
+
-webkit-user-select: none; /* Safari */
|
|
87
|
+
-ms-user-select: none; /* IE 10 and IE 11 */
|
|
88
|
+
user-select: none; /* Standard syntax */
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
th {
|
|
92
|
+
position: sticky;
|
|
93
|
+
top: 0;
|
|
94
|
+
background-color: #fff;
|
|
95
|
+
line-height: 40px;
|
|
96
|
+
z-index: 8;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
td {
|
|
100
|
+
line-height: 40px;
|
|
101
|
+
height: 50px;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.resize-handle {
|
|
105
|
+
display: block;
|
|
106
|
+
position: absolute;
|
|
107
|
+
cursor: col-resize;
|
|
108
|
+
width: 8px;
|
|
109
|
+
right: 0;
|
|
110
|
+
top: 0;
|
|
111
|
+
z-index: 1;
|
|
112
|
+
border-right: 1px solid transparent;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.resize-handle:hover {
|
|
116
|
+
border-color: #ccc;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.resize-handle.active {
|
|
120
|
+
border-color: #517ea5;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.resizeable-table {
|
|
124
|
+
width: 100%;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.noOverflow {
|
|
128
|
+
overflow: inherit;
|
|
129
|
+
span {
|
|
130
|
+
overflow: inherit;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
`;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
export const data = [
|
|
2
|
+
{
|
|
3
|
+
key: 1,
|
|
4
|
+
object: {},
|
|
5
|
+
columns: [
|
|
6
|
+
"Large Detroit Style Pizza",
|
|
7
|
+
3213456785,
|
|
8
|
+
"$31.43",
|
|
9
|
+
"Pending",
|
|
10
|
+
"Dave",
|
|
11
|
+
],
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
key: 2,
|
|
15
|
+
object: {},
|
|
16
|
+
columns: [
|
|
17
|
+
"Large Detroit Style Pizza",
|
|
18
|
+
3213456785,
|
|
19
|
+
"$31.43",
|
|
20
|
+
"Pending",
|
|
21
|
+
"Dave",
|
|
22
|
+
],
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
key: 3,
|
|
26
|
+
object: {},
|
|
27
|
+
columns: [
|
|
28
|
+
"Large Detroit Style Pizza",
|
|
29
|
+
3213456785,
|
|
30
|
+
"$31.43",
|
|
31
|
+
"Pending",
|
|
32
|
+
"Dave",
|
|
33
|
+
],
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
key: 4,
|
|
37
|
+
object: {},
|
|
38
|
+
columns: [
|
|
39
|
+
"Large Detroit Style Pizza",
|
|
40
|
+
3213456785,
|
|
41
|
+
"$31.43",
|
|
42
|
+
"Pending",
|
|
43
|
+
"Dave",
|
|
44
|
+
],
|
|
45
|
+
},
|
|
46
|
+
];
|
package/src/index.js
CHANGED
|
@@ -78,6 +78,7 @@ export * from "./components/organisms/Chat/index";
|
|
|
78
78
|
export * from "./components/organisms/Modal/index";
|
|
79
79
|
export * from "./components/organisms/OrderDetail/index";
|
|
80
80
|
export * from "./components/organisms/RangeCalendar";
|
|
81
|
+
export * from "./components/organisms/TableResizable";
|
|
81
82
|
|
|
82
83
|
//pages
|
|
83
84
|
export * from "./components/pages/ChangePasswordLogin";
|