oolib 2.67.6 → 2.67.7
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/UIContent/index.d.ts +9 -0
- package/dist/UIContent/index.js +8 -0
- package/dist/components/ActionMenu/index.js +1 -0
- package/dist/components/SimpleTable/comps/ColActionsMenu/index.d.ts +2 -0
- package/dist/components/SimpleTable/comps/ColActionsMenu/index.js +12 -0
- package/dist/components/SimpleTable/comps/RowActionsMenu/index.d.ts +7 -0
- package/dist/components/SimpleTable/comps/RowActionsMenu/index.js +43 -0
- package/dist/components/SimpleTable/handlers/handleColActions.d.ts +1 -0
- package/dist/components/SimpleTable/handlers/handleColActions.js +25 -0
- package/dist/components/SimpleTable/handlers/handleRowActions.d.ts +25 -0
- package/dist/components/SimpleTable/handlers/handleRowActions.js +69 -0
- package/dist/components/SimpleTable/index.d.ts +1 -2
- package/dist/components/SimpleTable/index.js +56 -21
- package/dist/components/SimpleTable/styled.js +1 -1
- package/dist/components/SimpleTable/utils/genHash.d.ts +1 -0
- package/dist/components/SimpleTable/utils/genHash.js +13 -0
- package/dist/components/SimpleTable/utils/prepInitValueFromConfigIfNoValue.d.ts +2 -1
- package/dist/components/SimpleTable/utils/prepInitValueFromConfigIfNoValue.js +5 -4
- package/package.json +1 -1
- package/dist/components/SimpleTable/functions.d.ts +0 -3
- package/dist/components/SimpleTable/functions.js +0 -52
|
@@ -4,4 +4,13 @@ export namespace UIContent {
|
|
|
4
4
|
const onlyFirstFileConsiderErrMsg: string;
|
|
5
5
|
const corruptUrlErrMsg: string;
|
|
6
6
|
}
|
|
7
|
+
namespace SimpleTable {
|
|
8
|
+
const _delete: string;
|
|
9
|
+
export { _delete as delete };
|
|
10
|
+
export const duplicate: string;
|
|
11
|
+
export const insertRowAfter: string;
|
|
12
|
+
export const insertRowBefore: string;
|
|
13
|
+
export const insertColAfter: string;
|
|
14
|
+
export const insertColBefore: string;
|
|
15
|
+
}
|
|
7
16
|
}
|
package/dist/UIContent/index.js
CHANGED
|
@@ -7,4 +7,12 @@ exports.UIContent = {
|
|
|
7
7
|
onlyFirstFileConsiderErrMsg: "This is a single image input. Only first file will be considered",
|
|
8
8
|
corruptUrlErrMsg: "Image URL seems to be corrupt. Cannot render it"
|
|
9
9
|
},
|
|
10
|
+
SimpleTable: {
|
|
11
|
+
delete: 'Delete',
|
|
12
|
+
duplicate: 'Duplicate',
|
|
13
|
+
insertRowAfter: 'Insert Below',
|
|
14
|
+
insertRowBefore: 'Insert Above',
|
|
15
|
+
insertColAfter: 'Insert Right',
|
|
16
|
+
insertColBefore: 'Insert Left'
|
|
17
|
+
}
|
|
10
18
|
};
|
|
@@ -79,6 +79,7 @@ var ActionMenu = function (_a) {
|
|
|
79
79
|
var _k = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), fixPos = _k.fixPos, applyFixedPos = _k.applyFixedPos, removeFixedPos = _k.removeFixedPos, trackerRef = _k.trackerRef;
|
|
80
80
|
return (react_1.default.createElement(styled_1.StyledActionMenu, { ref: actionMenuRef },
|
|
81
81
|
react_1.default.createElement(ButtonComp, __assign({}, buttonSize, { icon: icon, iconSize: iconSize, invert: invert, stopPropagation: true, preventDefault: true, onClick: function (e) {
|
|
82
|
+
console.log('detected');
|
|
82
83
|
setShowActions(!showActions);
|
|
83
84
|
}, active: showActions })),
|
|
84
85
|
popOutOfOverflowHiddenParent &&
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.ColActionsMenu = void 0;
|
|
7
|
+
var react_1 = __importDefault(require("react"));
|
|
8
|
+
var ColActionsMenu = function (_a) {
|
|
9
|
+
return (react_1.default.createElement("div", { style: { position: 'absolute', top: 0, left: '50%', transform: 'translate(-50%, -50%)' } },
|
|
10
|
+
react_1.default.createElement("div", { style: { width: '50px', height: '50px', background: 'red' } })));
|
|
11
|
+
};
|
|
12
|
+
exports.ColActionsMenu = ColActionsMenu;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.RowActionsMenu = void 0;
|
|
7
|
+
var react_1 = __importDefault(require("react"));
|
|
8
|
+
var handleRowActions_1 = require("../../handlers/handleRowActions");
|
|
9
|
+
var ActionMenu_1 = require("../../../ActionMenu");
|
|
10
|
+
var UIContent_1 = require("../../../../UIContent");
|
|
11
|
+
var RowActionsMenu = function (_a) {
|
|
12
|
+
var value = _a.value, rowIdx = _a.rowIdx, onChange = _a.onChange, id = _a.id;
|
|
13
|
+
return (react_1.default.createElement("div", { style: {
|
|
14
|
+
zIndex: 100,
|
|
15
|
+
position: "absolute",
|
|
16
|
+
top: "50%",
|
|
17
|
+
left: 0,
|
|
18
|
+
transform: "translate(-100%, -50%)",
|
|
19
|
+
} },
|
|
20
|
+
react_1.default.createElement(ActionMenu_1.ActionMenu, { actions: [
|
|
21
|
+
{
|
|
22
|
+
display: UIContent_1.UIContent.SimpleTable.delete,
|
|
23
|
+
onClick: function () { return (0, handleRowActions_1.handleDeleteRow)({ value: value, rowIdx: rowIdx, onChange: onChange, id: id }); },
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
display: UIContent_1.UIContent.SimpleTable.duplicate,
|
|
27
|
+
onClick: function () { return (0, handleRowActions_1.handleDuplicateRow)({ value: value, rowIdx: rowIdx, onChange: onChange, id: id }); },
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
display: UIContent_1.UIContent.SimpleTable.insertRowBefore,
|
|
31
|
+
onClick: function () {
|
|
32
|
+
return (0, handleRowActions_1.handleInsertRowBefore)({ value: value, rowIdx: rowIdx, onChange: onChange, id: id });
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
display: UIContent_1.UIContent.SimpleTable.insertRowAfter,
|
|
37
|
+
onClick: function () {
|
|
38
|
+
return (0, handleRowActions_1.handleInsertRowAfter)({ value: value, rowIdx: rowIdx, onChange: onChange, id: id });
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
] })));
|
|
42
|
+
};
|
|
43
|
+
exports.RowActionsMenu = RowActionsMenu;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export function handleAddCol(value: any, props: any): void;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
3
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
4
|
+
if (ar || !(i in from)) {
|
|
5
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
6
|
+
ar[i] = from[i];
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
10
|
+
};
|
|
11
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
+
exports.handleAddCol = void 0;
|
|
13
|
+
var genHash_1 = require("../utils/genHash");
|
|
14
|
+
var handleAddCol = function (value, props) {
|
|
15
|
+
var onChange = props.onChange, id = props.id;
|
|
16
|
+
var data = value.data, colWidthConfig = value.colWidthConfig;
|
|
17
|
+
var newData = __spreadArray([], data, true);
|
|
18
|
+
newData.map(function (row) {
|
|
19
|
+
row.cellData.push({
|
|
20
|
+
id: "row_".concat((0, genHash_1.genHash)(8)),
|
|
21
|
+
});
|
|
22
|
+
});
|
|
23
|
+
onChange && onChange(id, { data: newData, colWidthConfig: colWidthConfig });
|
|
24
|
+
};
|
|
25
|
+
exports.handleAddCol = handleAddCol;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
export function handleAddRow(value: any, props: any): void;
|
|
2
|
+
export function handleDeleteRow({ value, rowIdx, onChange, id }: {
|
|
3
|
+
value: any;
|
|
4
|
+
rowIdx: any;
|
|
5
|
+
onChange: any;
|
|
6
|
+
id: any;
|
|
7
|
+
}): void;
|
|
8
|
+
export function handleDuplicateRow({ value, rowIdx, onChange, id }: {
|
|
9
|
+
value: any;
|
|
10
|
+
rowIdx: any;
|
|
11
|
+
onChange: any;
|
|
12
|
+
id: any;
|
|
13
|
+
}): void;
|
|
14
|
+
export function handleInsertRowAfter({ value, rowIdx, onChange, id }: {
|
|
15
|
+
value: any;
|
|
16
|
+
rowIdx: any;
|
|
17
|
+
onChange: any;
|
|
18
|
+
id: any;
|
|
19
|
+
}): void;
|
|
20
|
+
export function handleInsertRowBefore({ value, rowIdx, onChange, id }: {
|
|
21
|
+
value: any;
|
|
22
|
+
rowIdx: any;
|
|
23
|
+
onChange: any;
|
|
24
|
+
id: any;
|
|
25
|
+
}): void;
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
3
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
4
|
+
if (ar || !(i in from)) {
|
|
5
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
6
|
+
ar[i] = from[i];
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
10
|
+
};
|
|
11
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
+
exports.handleInsertRowBefore = exports.handleInsertRowAfter = exports.handleDuplicateRow = exports.handleDeleteRow = exports.handleAddRow = void 0;
|
|
13
|
+
var makeArrayFromLength_1 = require("../../../utils/makeArrayFromLength");
|
|
14
|
+
var genHash_1 = require("../utils/genHash");
|
|
15
|
+
var genNewRow = function (_a) {
|
|
16
|
+
var data = _a.data, rowIdx = _a.rowIdx;
|
|
17
|
+
var totCells = data[rowIdx].cellData.length;
|
|
18
|
+
return ({
|
|
19
|
+
id: "row_".concat((0, genHash_1.genHash)(8)),
|
|
20
|
+
cellData: (0, makeArrayFromLength_1.makeArrayFromLength)(totCells).map(function (d, i) { return ({
|
|
21
|
+
id: "cell_".concat((0, genHash_1.genHash)(8)),
|
|
22
|
+
}); })
|
|
23
|
+
});
|
|
24
|
+
};
|
|
25
|
+
var handleAddRow = function (value, props) {
|
|
26
|
+
var onChange = props.onChange, id = props.id;
|
|
27
|
+
var data = value.data, colWidthConfig = value.colWidthConfig;
|
|
28
|
+
var newData = __spreadArray([], data, true);
|
|
29
|
+
var lastRowIdx = newData.length - 1;
|
|
30
|
+
var newRow = genNewRow({ data: newData, rowIdx: lastRowIdx });
|
|
31
|
+
newData.push(newRow);
|
|
32
|
+
onChange && onChange(id, { data: newData, colWidthConfig: colWidthConfig });
|
|
33
|
+
};
|
|
34
|
+
exports.handleAddRow = handleAddRow;
|
|
35
|
+
var handleDeleteRow = function (_a) {
|
|
36
|
+
var value = _a.value, rowIdx = _a.rowIdx, onChange = _a.onChange, id = _a.id;
|
|
37
|
+
var data = value.data, colWidthConfig = value.colWidthConfig;
|
|
38
|
+
var newData = __spreadArray([], data, true);
|
|
39
|
+
newData.splice(rowIdx, 1);
|
|
40
|
+
onChange && onChange(id, { data: newData, colWidthConfig: colWidthConfig });
|
|
41
|
+
};
|
|
42
|
+
exports.handleDeleteRow = handleDeleteRow;
|
|
43
|
+
var handleDuplicateRow = function (_a) {
|
|
44
|
+
var value = _a.value, rowIdx = _a.rowIdx, onChange = _a.onChange, id = _a.id;
|
|
45
|
+
var data = value.data, colWidthConfig = value.colWidthConfig;
|
|
46
|
+
var newData = __spreadArray([], data, true);
|
|
47
|
+
var dataToDuplicate = newData[rowIdx];
|
|
48
|
+
newData.splice(rowIdx + 1, 0, dataToDuplicate);
|
|
49
|
+
onChange && onChange(id, { data: newData, colWidthConfig: colWidthConfig });
|
|
50
|
+
};
|
|
51
|
+
exports.handleDuplicateRow = handleDuplicateRow;
|
|
52
|
+
var handleInsertRowAfter = function (_a) {
|
|
53
|
+
var value = _a.value, rowIdx = _a.rowIdx, onChange = _a.onChange, id = _a.id;
|
|
54
|
+
var data = value.data, colWidthConfig = value.colWidthConfig;
|
|
55
|
+
var newData = __spreadArray([], data, true);
|
|
56
|
+
var newRow = genNewRow({ data: newData, rowIdx: rowIdx });
|
|
57
|
+
newData.splice(rowIdx + 1, 0, newRow);
|
|
58
|
+
onChange && onChange(id, { data: newData, colWidthConfig: colWidthConfig });
|
|
59
|
+
};
|
|
60
|
+
exports.handleInsertRowAfter = handleInsertRowAfter;
|
|
61
|
+
var handleInsertRowBefore = function (_a) {
|
|
62
|
+
var value = _a.value, rowIdx = _a.rowIdx, onChange = _a.onChange, id = _a.id;
|
|
63
|
+
var data = value.data, colWidthConfig = value.colWidthConfig;
|
|
64
|
+
var newData = __spreadArray([], data, true);
|
|
65
|
+
var newRow = genNewRow({ data: newData, rowIdx: rowIdx });
|
|
66
|
+
newData.splice(rowIdx, 0, newRow);
|
|
67
|
+
onChange && onChange(id, { data: newData, colWidthConfig: colWidthConfig });
|
|
68
|
+
};
|
|
69
|
+
exports.handleInsertRowBefore = handleInsertRowBefore;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export function SimpleTable({ id, readOnly, config, value: _value, onChange,
|
|
1
|
+
export function SimpleTable({ id, readOnly, config, value: _value, onChange, defaultColWidth, }: {
|
|
2
2
|
id: any;
|
|
3
3
|
readOnly: any;
|
|
4
4
|
config?: {
|
|
@@ -9,7 +9,6 @@ export function SimpleTable({ id, readOnly, config, value: _value, onChange, can
|
|
|
9
9
|
};
|
|
10
10
|
value: any;
|
|
11
11
|
onChange: any;
|
|
12
|
-
canAddRows?: boolean;
|
|
13
12
|
defaultColWidth?: number;
|
|
14
13
|
}, ...args: any[]): React.JSX.Element;
|
|
15
14
|
import React from "react";
|
|
@@ -52,20 +52,25 @@ var BlockLabel_1 = require("../BlockLabel");
|
|
|
52
52
|
var styled_components_1 = require("styled-components");
|
|
53
53
|
var utilsOolib_1 = require("../../utilsOolib");
|
|
54
54
|
var AddRowColButtons_1 = require("./comps/AddRowColButtons");
|
|
55
|
-
var
|
|
55
|
+
var ColActionsMenu_1 = require("./comps/ColActionsMenu");
|
|
56
|
+
var RowActionsMenu_1 = require("./comps/RowActionsMenu");
|
|
57
|
+
var handleColActions_1 = require("./handlers/handleColActions");
|
|
58
|
+
var handleRowActions_1 = require("./handlers/handleRowActions");
|
|
56
59
|
var styled_1 = require("./styled");
|
|
57
60
|
var useResizeTableColumns_1 = require("./useResizeTableColumns");
|
|
58
|
-
var prepInitValueFromConfigIfNoValue_1 = require("./utils/prepInitValueFromConfigIfNoValue");
|
|
59
61
|
var convertColHeaderConfigToRowData_1 = require("./utils/convertColHeaderConfigToRowData");
|
|
62
|
+
var prepInitValueFromConfigIfNoValue_1 = require("./utils/prepInitValueFromConfigIfNoValue");
|
|
60
63
|
var greyColor100 = themes_1.colors.greyColor100;
|
|
61
64
|
/*pending:
|
|
62
65
|
- first test whatever is done on okf
|
|
63
66
|
- add col is still buggy. cannot resize, plus width seems wrong of new col
|
|
64
|
-
- add rowHeaderData functionality
|
|
65
67
|
- fix bugs in the pointer and risize hover
|
|
66
68
|
- action menu to toggle header styles for col & row
|
|
67
69
|
- action menu to toggle between stretch to available width vs fixed col widths (this might not be straightforward)
|
|
68
|
-
-
|
|
70
|
+
- col Actions
|
|
71
|
+
- focussed css can be refined.
|
|
72
|
+
- in general table styling should be slightly different i think.
|
|
73
|
+
- mobile responsiveness
|
|
69
74
|
- reposition cols & rows
|
|
70
75
|
*/
|
|
71
76
|
function SimpleTable(_a) {
|
|
@@ -73,26 +78,25 @@ function SimpleTable(_a) {
|
|
|
73
78
|
noOfCols: 3,
|
|
74
79
|
noOfRows: 3,
|
|
75
80
|
colHeaderData: undefined,
|
|
76
|
-
rowHeaderData: undefined
|
|
77
|
-
} : _b, _value = _a.value, onChange = _a.onChange, _c = _a.
|
|
81
|
+
rowHeaderData: undefined,
|
|
82
|
+
} : _b, _value = _a.value, onChange = _a.onChange, _c = _a.defaultColWidth, defaultColWidth = _c === void 0 ? 200 : _c;
|
|
78
83
|
var props = arguments[0];
|
|
79
84
|
var theme = (0, styled_components_1.useTheme)();
|
|
80
|
-
var
|
|
81
|
-
var
|
|
85
|
+
var _d = theme || {}, RichTextEditor = _d.RichTextEditor, convertToRichText = _d.convertToRichText;
|
|
86
|
+
var _e = (0, prepInitValueFromConfigIfNoValue_1.prepInitValueFromConfigIfNoValue)({
|
|
82
87
|
_value: _value,
|
|
83
88
|
config: config,
|
|
84
89
|
defaultColWidth: defaultColWidth,
|
|
85
|
-
}), value =
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
var _g = (0, useResizeTableColumns_1.useResizeTableColumns)({
|
|
90
|
+
}), value = _e.value, enableColActions = _e.enableColActions, //returns all possible actions config if no config.colHeaderData is defined. else undefined\
|
|
91
|
+
enableRowActions = _e.enableRowActions, canToggleColHeaderStyle = _e.canToggleColHeaderStyle;
|
|
92
|
+
var _f = (0, useResizeTableColumns_1.useResizeTableColumns)({
|
|
89
93
|
setColWidthConfig: function (setterFn) {
|
|
90
94
|
var newColWidthConfig = setterFn(value.colWidthConfig);
|
|
91
95
|
onChange(id, __assign(__assign({}, value), { colWidthConfig: newColWidthConfig }));
|
|
92
96
|
},
|
|
93
97
|
colWidthConfig: value.colWidthConfig,
|
|
94
98
|
theme: theme,
|
|
95
|
-
}), resetColResizeState =
|
|
99
|
+
}), resetColResizeState = _f.resetColResizeState, hideShowDragZoneIndicator = _f.hideShowDragZoneIndicator, initColResizeState = _f.initColResizeState, resetDragZoneIndicator = _f.resetDragZoneIndicator, handleResizeColumn = _f.handleResizeColumn, colResizeState = _f.colResizeState, dragZoneWidth = _f.dragZoneWidth;
|
|
96
100
|
(0, react_1.useEffect)(function () {
|
|
97
101
|
window.addEventListener("mouseup", resetColResizeState);
|
|
98
102
|
window.addEventListener("mousemove", handleResizeColumn);
|
|
@@ -114,14 +118,17 @@ function SimpleTable(_a) {
|
|
|
114
118
|
typo: "SANS_3",
|
|
115
119
|
placeholder: " ",
|
|
116
120
|
style: {
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
}
|
|
121
|
+
padding: "0.8rem 1rem",
|
|
122
|
+
},
|
|
120
123
|
},
|
|
121
124
|
// KPDropdown: {
|
|
122
125
|
// size: 'small',
|
|
123
126
|
// },
|
|
124
127
|
};
|
|
128
|
+
var _g = (0, react_1.useState)({
|
|
129
|
+
rowIdx: undefined,
|
|
130
|
+
colIdx: undefined,
|
|
131
|
+
}), hoveredRowAndCol = _g[0], setHoveredRowAndCol = _g[1];
|
|
125
132
|
var CellValueGetters = {
|
|
126
133
|
RichTextEditor: function (v) { return (convertToRichText ? convertToRichText(v) : v); },
|
|
127
134
|
}; //prob dont need this..
|
|
@@ -160,9 +167,29 @@ function SimpleTable(_a) {
|
|
|
160
167
|
minHeight: "4rem",
|
|
161
168
|
borderRight: (colResizeState === null || colResizeState === void 0 ? void 0 : colResizeState.colId) === "col_".concat(cellIdx) &&
|
|
162
169
|
"2px solid ".concat((0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors)),
|
|
163
|
-
},
|
|
170
|
+
}, onMouseEnter: function (e) {
|
|
171
|
+
console.log({
|
|
172
|
+
row: rowIdx,
|
|
173
|
+
col: cellIdx,
|
|
174
|
+
});
|
|
175
|
+
setHoveredRowAndCol({
|
|
176
|
+
rowIdx: rowIdx,
|
|
177
|
+
colIdx: cellIdx,
|
|
178
|
+
});
|
|
179
|
+
},
|
|
180
|
+
// onMouseOver={e => {
|
|
181
|
+
// setHoveredRowAndCol(e.target.getBoundingClientRect())
|
|
182
|
+
// }}
|
|
183
|
+
onMouseDown: function (e) {
|
|
164
184
|
initColResizeState(e, { colId: "col_".concat(cellIdx) });
|
|
165
185
|
}, onMouseOut: resetDragZoneIndicator, onMouseMove: hideShowDragZoneIndicator, tabIndex: 0 },
|
|
186
|
+
enableColActions &&
|
|
187
|
+
rowIdx === 0 &&
|
|
188
|
+
hoveredRowAndCol.colIdx === cellIdx && react_1.default.createElement(ColActionsMenu_1.ColActionsMenu, null),
|
|
189
|
+
enableRowActions &&
|
|
190
|
+
cellIdx === 0 &&
|
|
191
|
+
rowIdx !== undefined && //cuz for fixed col headers, rowIdx is undefined
|
|
192
|
+
hoveredRowAndCol.rowIdx === rowIdx && (react_1.default.createElement(RowActionsMenu_1.RowActionsMenu, __assign({}, { value: value, rowIdx: rowIdx, onChange: onChange, id: id }))),
|
|
166
193
|
react_1.default.createElement(CellComp, __assign({}, cellProps, { id: "kp_table_cell__".concat(cell.id, "__rich_input") /*dont mess with this id nomenclature. it needs to stay this way. check out the handleCellInputChange fn to understand */, value: cellValue, readOnly: readOnly || cell.readOnly, onChange: function (k, v) {
|
|
167
194
|
return handleCellInputChange({ v: v, rowIdx: rowIdx, cellIdx: cellIdx });
|
|
168
195
|
} }))));
|
|
@@ -175,10 +202,18 @@ function SimpleTable(_a) {
|
|
|
175
202
|
alignItems: "stretch" /**without stretch AddColButton will be wonky */,
|
|
176
203
|
} },
|
|
177
204
|
react_1.default.createElement("div", null,
|
|
178
|
-
react_1.default.createElement(styled_1.StyledSimpleTable,
|
|
179
|
-
|
|
205
|
+
react_1.default.createElement(styled_1.StyledSimpleTable, { onMouseLeave: function () {
|
|
206
|
+
return setHoveredRowAndCol({ rowIdx: undefined, colIdx: undefined });
|
|
207
|
+
} },
|
|
208
|
+
config.colHeaderData &&
|
|
209
|
+
genRow({
|
|
210
|
+
row: (0, convertColHeaderConfigToRowData_1.convertColHeaderConfigToRowData)({
|
|
211
|
+
colHeaderData: config.colHeaderData,
|
|
212
|
+
convertToRichText: convertToRichText,
|
|
213
|
+
}),
|
|
214
|
+
}),
|
|
180
215
|
value.data.map(function (row, rowIdx) { return genRow({ row: row, rowIdx: rowIdx }); })),
|
|
181
|
-
!readOnly &&
|
|
182
|
-
!readOnly &&
|
|
216
|
+
!readOnly && enableRowActions && (react_1.default.createElement(AddRowColButtons_1.AddRowButton, { onClick: function () { return (0, handleRowActions_1.handleAddRow)(value, props); } }))),
|
|
217
|
+
!readOnly && enableColActions && (react_1.default.createElement(AddRowColButtons_1.AddColButton, { onClick: function () { return (0, handleColActions_1.handleAddCol)(value, props); } })))));
|
|
183
218
|
}
|
|
184
219
|
exports.SimpleTable = SimpleTable;
|
|
@@ -37,7 +37,7 @@ exports.StyledSimpleTableRow = styled_components_1.default.div(templateObject_2
|
|
|
37
37
|
var rowIdx = _a.rowIdx;
|
|
38
38
|
return rowIdx % 2 === 1 ? themes_1.colors.white : themes_1.colors.greyColor3;
|
|
39
39
|
});
|
|
40
|
-
exports.StyledSimpleTableCell = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n /* max-width: 300px; */\n padding: 0 1rem
|
|
40
|
+
exports.StyledSimpleTableCell = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n /* max-width: 300px; */\n /* padding: 0 1rem; */\n /* margin: 0 1rem; */\n position: relative;\n border-right: 1px solid ", ";\n ", ";\n ", "\n"], ["\n /* max-width: 300px; */\n /* padding: 0 1rem; */\n /* margin: 0 1rem; */\n position: relative;\n border-right: 1px solid ", ";\n ", ";\n ", "\n"])), themes_1.colors.greyColor10, (0, transitions_1.transition)("background-color"), function (_a) {
|
|
41
41
|
var readOnly = _a.readOnly, theme = _a.theme;
|
|
42
42
|
return !readOnly && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n :hover{\n background-color: ", ";\n }\n :focus-within{\n outline: 1px solid ", ";\n background-color: ", ";\n } \n "], ["\n :hover{\n background-color: ", ";\n }\n :focus-within{\n outline: 1px solid ", ";\n background-color: ", ";\n } \n "])), (0, utilsOolib_1.getPrimaryColor10)(theme === null || theme === void 0 ? void 0 : theme.colors), (0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors), themes_1.colors.none);
|
|
43
43
|
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export function genHash(len: any): string;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.genHash = void 0;
|
|
4
|
+
var makeArrayFromLength_1 = require("../../../utils/makeArrayFromLength");
|
|
5
|
+
var genHash = function (len) {
|
|
6
|
+
var arr = "1234567890abcdefghijklmnopqrstuvwxyz";
|
|
7
|
+
var ans = "";
|
|
8
|
+
for (var i = len; i > 0; i--) {
|
|
9
|
+
ans += arr[Math.floor(Math.random() * arr.length)];
|
|
10
|
+
}
|
|
11
|
+
return ans;
|
|
12
|
+
};
|
|
13
|
+
exports.genHash = genHash;
|
|
@@ -22,7 +22,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
22
22
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
23
23
|
exports.prepInitValueFromConfigIfNoValue = void 0;
|
|
24
24
|
var makeArrayFromLength_1 = require("../../../utils/makeArrayFromLength");
|
|
25
|
-
var
|
|
25
|
+
var genHash_1 = require("./genHash");
|
|
26
26
|
var prepInitValueFromConfigIfNoValue = function (_a) {
|
|
27
27
|
var _b, _c;
|
|
28
28
|
var _value = _a._value, config = _a.config, defaultColWidth = _a.defaultColWidth;
|
|
@@ -47,7 +47,8 @@ var prepInitValueFromConfigIfNoValue = function (_a) {
|
|
|
47
47
|
};
|
|
48
48
|
return {
|
|
49
49
|
value: value,
|
|
50
|
-
|
|
50
|
+
enableColActions: config.colHeaderData ? false : true,
|
|
51
|
+
enableRowActions: true,
|
|
51
52
|
canToggleColHeaderStyle: !!!config.colHeaderData, // meaning its true if no config.colHeaderData is defined. else false
|
|
52
53
|
};
|
|
53
54
|
};
|
|
@@ -67,9 +68,9 @@ var getInitColWidthConfigs = function (_a) {
|
|
|
67
68
|
var insertRowAndCellIds = function (_a) {
|
|
68
69
|
var noOfRows = _a.noOfRows, noOfCols = _a.noOfCols;
|
|
69
70
|
return (0, makeArrayFromLength_1.makeArrayFromLength)(noOfRows).map(function () { return ({
|
|
70
|
-
id: "row_".concat((0,
|
|
71
|
+
id: "row_".concat((0, genHash_1.genHash)(8)),
|
|
71
72
|
cellData: (0, makeArrayFromLength_1.makeArrayFromLength)(noOfCols).map(function () { return ({
|
|
72
|
-
id: "cell_".concat((0,
|
|
73
|
+
id: "cell_".concat((0, genHash_1.genHash)(8)),
|
|
73
74
|
}); }),
|
|
74
75
|
}); });
|
|
75
76
|
};
|
package/package.json
CHANGED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
3
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
4
|
-
if (ar || !(i in from)) {
|
|
5
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
6
|
-
ar[i] = from[i];
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
10
|
-
};
|
|
11
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
-
exports.handleAddRow = exports.handleAddCol = exports.genHash = void 0;
|
|
13
|
-
var makeArrayFromLength_1 = require("../../utils/makeArrayFromLength");
|
|
14
|
-
var genHash = function (len) {
|
|
15
|
-
var arr = "1234567890abcdefghijklmnopqrstuvwxyz";
|
|
16
|
-
var ans = "";
|
|
17
|
-
for (var i = len; i > 0; i--) {
|
|
18
|
-
ans += arr[Math.floor(Math.random() * arr.length)];
|
|
19
|
-
}
|
|
20
|
-
return ans;
|
|
21
|
-
};
|
|
22
|
-
exports.genHash = genHash;
|
|
23
|
-
var handleAddCol = function (value, props) {
|
|
24
|
-
var onChange = props.onChange, id = props.id;
|
|
25
|
-
var data = value.data, colWidthConfig = value.colWidthConfig;
|
|
26
|
-
var newData = __spreadArray([], data, true);
|
|
27
|
-
newData.map(function (row) {
|
|
28
|
-
row.cellData.push({
|
|
29
|
-
id: "row_".concat((0, exports.genHash)(8)),
|
|
30
|
-
});
|
|
31
|
-
});
|
|
32
|
-
onChange && onChange(id, { data: newData, colWidthConfig: colWidthConfig });
|
|
33
|
-
};
|
|
34
|
-
exports.handleAddCol = handleAddCol;
|
|
35
|
-
var handleAddRow = function (value, props) {
|
|
36
|
-
var onChange = props.onChange, id = props.id;
|
|
37
|
-
var data = value.data, colWidthConfig = value.colWidthConfig;
|
|
38
|
-
var newData = __spreadArray([], data, true);
|
|
39
|
-
var lastRowIdx = newData.length - 1;
|
|
40
|
-
var newRowTotCells = newData[lastRowIdx].cellData.length;
|
|
41
|
-
if (!newRowTotCells)
|
|
42
|
-
return;
|
|
43
|
-
var newRow = {
|
|
44
|
-
id: "row_".concat((0, exports.genHash)(8)),
|
|
45
|
-
cellData: (0, makeArrayFromLength_1.makeArrayFromLength)(newRowTotCells).map(function (d, i) { return ({
|
|
46
|
-
id: "cell_".concat((0, exports.genHash)(8)),
|
|
47
|
-
}); })
|
|
48
|
-
};
|
|
49
|
-
newData.push(newRow);
|
|
50
|
-
onChange && onChange(id, { data: newData, colWidthConfig: colWidthConfig });
|
|
51
|
-
};
|
|
52
|
-
exports.handleAddRow = handleAddRow;
|