@bolio-ui/core 1.0.2 → 1.0.3
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/README.md +24 -6
- package/dist/index.js +485 -201
- package/dist/table/index.js +1139 -0
- package/esm/index.js +1 -0
- package/esm/table/index.js +2 -0
- package/esm/table/stories.js +269 -0
- package/esm/table/table-body.js +54 -0
- package/esm/table/table-cell.js +28 -0
- package/esm/table/table-column.js +41 -0
- package/esm/table/table-context.js +9 -0
- package/esm/table/table-head.js +58 -0
- package/esm/table/table-types.js +1 -0
- package/esm/table/table.js +115 -0
- package/package.json +4 -4
package/esm/index.js
CHANGED
|
@@ -42,6 +42,7 @@ export { default as Slider } from './slider';
|
|
|
42
42
|
export { default as Snippet } from './snippet';
|
|
43
43
|
export { default as Spacer } from './spacer';
|
|
44
44
|
export { default as Spinner } from './spinner';
|
|
45
|
+
export { default as Table } from './table';
|
|
45
46
|
export { default as Tabs } from './tabs';
|
|
46
47
|
export { default as Tag } from './tag';
|
|
47
48
|
export { default as Text } from './text';
|
|
@@ -0,0 +1,269 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
|
+
import React, { useState } from 'react';
|
|
4
|
+
import Table from '.';
|
|
5
|
+
import Code from '../code';
|
|
6
|
+
import Text from '../text';
|
|
7
|
+
import Button from '../button';
|
|
8
|
+
export default {
|
|
9
|
+
title: 'Data Display/Table',
|
|
10
|
+
component: Table
|
|
11
|
+
};
|
|
12
|
+
export var Default = function Default() {
|
|
13
|
+
var data = [{
|
|
14
|
+
property: 'type',
|
|
15
|
+
description: 'Content type',
|
|
16
|
+
type: 'secondary | warning',
|
|
17
|
+
"default": '-'
|
|
18
|
+
}, {
|
|
19
|
+
property: 'Component',
|
|
20
|
+
description: 'DOM element to use',
|
|
21
|
+
type: 'string',
|
|
22
|
+
"default": '-'
|
|
23
|
+
}, {
|
|
24
|
+
property: 'bold',
|
|
25
|
+
description: 'Bold style',
|
|
26
|
+
type: 'boolean',
|
|
27
|
+
"default": 'true'
|
|
28
|
+
}];
|
|
29
|
+
return /*#__PURE__*/React.createElement(Table, {
|
|
30
|
+
data: data
|
|
31
|
+
}, /*#__PURE__*/React.createElement(Table.Column, {
|
|
32
|
+
prop: "property",
|
|
33
|
+
label: "property"
|
|
34
|
+
}), /*#__PURE__*/React.createElement(Table.Column, {
|
|
35
|
+
prop: "description",
|
|
36
|
+
label: "description"
|
|
37
|
+
}), /*#__PURE__*/React.createElement(Table.Column, {
|
|
38
|
+
prop: "type",
|
|
39
|
+
label: "type"
|
|
40
|
+
}), /*#__PURE__*/React.createElement(Table.Column, {
|
|
41
|
+
prop: "default",
|
|
42
|
+
label: "default"
|
|
43
|
+
}));
|
|
44
|
+
};
|
|
45
|
+
export var Compose = function Compose() {
|
|
46
|
+
var data = [{
|
|
47
|
+
property: 'type',
|
|
48
|
+
description: 'Content type',
|
|
49
|
+
type: 'secondary | warning',
|
|
50
|
+
"default": '-'
|
|
51
|
+
}, {
|
|
52
|
+
property: 'Component',
|
|
53
|
+
description: 'DOM element to use',
|
|
54
|
+
type: /*#__PURE__*/React.createElement(Code, null, "string"),
|
|
55
|
+
"default": '-'
|
|
56
|
+
}, {
|
|
57
|
+
property: /*#__PURE__*/React.createElement(Text, {
|
|
58
|
+
b: true
|
|
59
|
+
}, "bold"),
|
|
60
|
+
description: 'Bold style',
|
|
61
|
+
type: /*#__PURE__*/React.createElement(Code, null, "boolean"),
|
|
62
|
+
"default": /*#__PURE__*/React.createElement(Code, null, "true")
|
|
63
|
+
}];
|
|
64
|
+
return /*#__PURE__*/React.createElement(Table, {
|
|
65
|
+
data: data
|
|
66
|
+
}, /*#__PURE__*/React.createElement(Table.Column, {
|
|
67
|
+
prop: "property",
|
|
68
|
+
label: "property"
|
|
69
|
+
}), /*#__PURE__*/React.createElement(Table.Column, {
|
|
70
|
+
prop: "description",
|
|
71
|
+
label: "description"
|
|
72
|
+
}), /*#__PURE__*/React.createElement(Table.Column, {
|
|
73
|
+
prop: "type",
|
|
74
|
+
label: "type"
|
|
75
|
+
}), /*#__PURE__*/React.createElement(Table.Column, {
|
|
76
|
+
prop: "default",
|
|
77
|
+
label: "default"
|
|
78
|
+
}));
|
|
79
|
+
};
|
|
80
|
+
export var Width = function Width() {
|
|
81
|
+
var data = [{
|
|
82
|
+
property: 'type',
|
|
83
|
+
description: 'Content type',
|
|
84
|
+
type: 'secondary | warning',
|
|
85
|
+
"default": '-'
|
|
86
|
+
}, {
|
|
87
|
+
property: 'Component',
|
|
88
|
+
description: 'DOM element to use',
|
|
89
|
+
type: /*#__PURE__*/React.createElement(Code, null, "string"),
|
|
90
|
+
"default": '-'
|
|
91
|
+
}, {
|
|
92
|
+
property: /*#__PURE__*/React.createElement(Text, {
|
|
93
|
+
b: true
|
|
94
|
+
}, "bold"),
|
|
95
|
+
description: 'Bold style',
|
|
96
|
+
type: /*#__PURE__*/React.createElement(Code, null, "boolean"),
|
|
97
|
+
"default": /*#__PURE__*/React.createElement(Code, null, "true")
|
|
98
|
+
}];
|
|
99
|
+
return /*#__PURE__*/React.createElement(Table, {
|
|
100
|
+
data: data
|
|
101
|
+
}, /*#__PURE__*/React.createElement(Table.Column, {
|
|
102
|
+
prop: "property",
|
|
103
|
+
label: "property",
|
|
104
|
+
width: 50
|
|
105
|
+
}), /*#__PURE__*/React.createElement(Table.Column, {
|
|
106
|
+
prop: "description",
|
|
107
|
+
label: "description"
|
|
108
|
+
}), /*#__PURE__*/React.createElement(Table.Column, {
|
|
109
|
+
prop: "type",
|
|
110
|
+
label: "type"
|
|
111
|
+
}), /*#__PURE__*/React.createElement(Table.Column, {
|
|
112
|
+
prop: "default",
|
|
113
|
+
label: "default"
|
|
114
|
+
}));
|
|
115
|
+
};
|
|
116
|
+
export var Actions = function Actions() {
|
|
117
|
+
var dataSource = [{
|
|
118
|
+
property: 'type',
|
|
119
|
+
description: 'Content type',
|
|
120
|
+
operation: ''
|
|
121
|
+
}, {
|
|
122
|
+
property: 'Component',
|
|
123
|
+
description: 'DOM element to use',
|
|
124
|
+
operation: ''
|
|
125
|
+
}, {
|
|
126
|
+
property: /*#__PURE__*/React.createElement(Text, {
|
|
127
|
+
b: true
|
|
128
|
+
}, "bold"),
|
|
129
|
+
description: 'Bold style',
|
|
130
|
+
operation: ''
|
|
131
|
+
}];
|
|
132
|
+
|
|
133
|
+
var _useState = useState(dataSource),
|
|
134
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
135
|
+
data = _useState2[0],
|
|
136
|
+
setData = _useState2[1];
|
|
137
|
+
|
|
138
|
+
var renderAction = function renderAction(value, rowData, index) {
|
|
139
|
+
var removeHandler = function removeHandler() {
|
|
140
|
+
setData(function (last) {
|
|
141
|
+
return last.filter(function (_, dataIndex) {
|
|
142
|
+
return dataIndex !== index;
|
|
143
|
+
});
|
|
144
|
+
});
|
|
145
|
+
};
|
|
146
|
+
|
|
147
|
+
return /*#__PURE__*/React.createElement(Button, {
|
|
148
|
+
type: "error",
|
|
149
|
+
auto: true,
|
|
150
|
+
scale: 1 / 3,
|
|
151
|
+
font: "12px",
|
|
152
|
+
onClick: removeHandler
|
|
153
|
+
}, "Remove");
|
|
154
|
+
};
|
|
155
|
+
|
|
156
|
+
return /*#__PURE__*/React.createElement(Table, {
|
|
157
|
+
data: data,
|
|
158
|
+
onChange: function onChange(value) {
|
|
159
|
+
return setData(value);
|
|
160
|
+
}
|
|
161
|
+
}, /*#__PURE__*/React.createElement(Table.Column, {
|
|
162
|
+
prop: "property",
|
|
163
|
+
label: "property"
|
|
164
|
+
}), /*#__PURE__*/React.createElement(Table.Column, {
|
|
165
|
+
prop: "description",
|
|
166
|
+
label: "description"
|
|
167
|
+
}), /*#__PURE__*/React.createElement(Table.Column, {
|
|
168
|
+
prop: "operation",
|
|
169
|
+
label: "operation",
|
|
170
|
+
width: 150,
|
|
171
|
+
render: renderAction
|
|
172
|
+
}));
|
|
173
|
+
};
|
|
174
|
+
export var UpdateRow = function UpdateRow() {
|
|
175
|
+
var dataSource = [{
|
|
176
|
+
property: 'type',
|
|
177
|
+
description: 'Content type',
|
|
178
|
+
operation: ''
|
|
179
|
+
}, {
|
|
180
|
+
property: 'Component',
|
|
181
|
+
description: 'DOM element to use',
|
|
182
|
+
operation: ''
|
|
183
|
+
}, {
|
|
184
|
+
property: /*#__PURE__*/React.createElement(Text, {
|
|
185
|
+
b: true
|
|
186
|
+
}, "bold"),
|
|
187
|
+
description: 'Bold style',
|
|
188
|
+
operation: ''
|
|
189
|
+
}];
|
|
190
|
+
|
|
191
|
+
var _React$useState = React.useState(dataSource),
|
|
192
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
193
|
+
data = _React$useState2[0],
|
|
194
|
+
setData = _React$useState2[1];
|
|
195
|
+
|
|
196
|
+
var renderAction = function renderAction(value, rowData, rowIndex) {
|
|
197
|
+
var updateHandler = function updateHandler() {
|
|
198
|
+
setData(function (last) {
|
|
199
|
+
return last.map(function (item, dataIndex) {
|
|
200
|
+
if (dataIndex !== rowIndex) return item;
|
|
201
|
+
return _extends({}, item, {
|
|
202
|
+
property: Math.random().toString(16).slice(-5)
|
|
203
|
+
});
|
|
204
|
+
});
|
|
205
|
+
});
|
|
206
|
+
};
|
|
207
|
+
|
|
208
|
+
return /*#__PURE__*/React.createElement(Button, {
|
|
209
|
+
type: "secondary",
|
|
210
|
+
auto: true,
|
|
211
|
+
scale: 1 / 3,
|
|
212
|
+
font: "12px",
|
|
213
|
+
onClick: updateHandler
|
|
214
|
+
}, "Update");
|
|
215
|
+
};
|
|
216
|
+
|
|
217
|
+
return /*#__PURE__*/React.createElement(Table, {
|
|
218
|
+
data: data,
|
|
219
|
+
onChange: function onChange(value) {
|
|
220
|
+
return setData(value);
|
|
221
|
+
}
|
|
222
|
+
}, /*#__PURE__*/React.createElement(Table.Column, {
|
|
223
|
+
prop: "property",
|
|
224
|
+
label: "property"
|
|
225
|
+
}), /*#__PURE__*/React.createElement(Table.Column, {
|
|
226
|
+
prop: "description",
|
|
227
|
+
label: "description"
|
|
228
|
+
}), /*#__PURE__*/React.createElement(Table.Column, {
|
|
229
|
+
prop: "operation",
|
|
230
|
+
label: "operation",
|
|
231
|
+
width: 150,
|
|
232
|
+
render: renderAction
|
|
233
|
+
}));
|
|
234
|
+
};
|
|
235
|
+
export var CustomHead = function CustomHead() {
|
|
236
|
+
var data = [{
|
|
237
|
+
property: 'type',
|
|
238
|
+
description: 'Content type',
|
|
239
|
+
type: 'secondary | warning',
|
|
240
|
+
"default": '-'
|
|
241
|
+
}, {
|
|
242
|
+
property: 'Component',
|
|
243
|
+
description: 'DOM element to use',
|
|
244
|
+
type: /*#__PURE__*/React.createElement(Code, null, "string"),
|
|
245
|
+
"default": '-'
|
|
246
|
+
}, {
|
|
247
|
+
property: /*#__PURE__*/React.createElement(Text, {
|
|
248
|
+
b: true
|
|
249
|
+
}, "bold"),
|
|
250
|
+
description: 'Bold style',
|
|
251
|
+
type: /*#__PURE__*/React.createElement(Code, null, "boolean"),
|
|
252
|
+
"default": /*#__PURE__*/React.createElement(Code, null, "true")
|
|
253
|
+
}];
|
|
254
|
+
return /*#__PURE__*/React.createElement(Table, {
|
|
255
|
+
data: data
|
|
256
|
+
}, /*#__PURE__*/React.createElement(Table.Column, {
|
|
257
|
+
prop: "property",
|
|
258
|
+
label: "property"
|
|
259
|
+
}), /*#__PURE__*/React.createElement(Table.Column, {
|
|
260
|
+
prop: "description",
|
|
261
|
+
label: "description"
|
|
262
|
+
}), /*#__PURE__*/React.createElement(Table.Column, {
|
|
263
|
+
prop: "type"
|
|
264
|
+
}, /*#__PURE__*/React.createElement(Code, null, "type")), /*#__PURE__*/React.createElement(Table.Column, {
|
|
265
|
+
prop: "default"
|
|
266
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
267
|
+
b: true
|
|
268
|
+
}, "default")));
|
|
269
|
+
};
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import _JSXStyle from "../styled-jsx.es.js";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import useTheme from '../use-theme';
|
|
4
|
+
import TableCell from './table-cell';
|
|
5
|
+
import { useTableContext } from './table-context';
|
|
6
|
+
import useClasses from '../use-classes';
|
|
7
|
+
var defaultProps = {
|
|
8
|
+
className: ''
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
var TableBody = function TableBody(_ref) {
|
|
12
|
+
var data = _ref.data,
|
|
13
|
+
hover = _ref.hover,
|
|
14
|
+
emptyText = _ref.emptyText,
|
|
15
|
+
onRow = _ref.onRow,
|
|
16
|
+
onCell = _ref.onCell,
|
|
17
|
+
rowClassName = _ref.rowClassName;
|
|
18
|
+
var theme = useTheme();
|
|
19
|
+
|
|
20
|
+
var _useTableContext = useTableContext(),
|
|
21
|
+
columns = _useTableContext.columns;
|
|
22
|
+
|
|
23
|
+
var rowClickHandler = function rowClickHandler(row, index) {
|
|
24
|
+
onRow && onRow(row, index);
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
return /*#__PURE__*/React.createElement("tbody", {
|
|
28
|
+
className: _JSXStyle.dynamic([["3433300570", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
|
|
29
|
+
}, data.map(function (row, index) {
|
|
30
|
+
var className = rowClassName(row, index);
|
|
31
|
+
return /*#__PURE__*/React.createElement("tr", {
|
|
32
|
+
key: "tbody-row-".concat(index),
|
|
33
|
+
onClick: function onClick() {
|
|
34
|
+
return rowClickHandler(row, index);
|
|
35
|
+
},
|
|
36
|
+
className: _JSXStyle.dynamic([["3433300570", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses({
|
|
37
|
+
hover: hover
|
|
38
|
+
}, className) || "")
|
|
39
|
+
}, /*#__PURE__*/React.createElement(TableCell, {
|
|
40
|
+
columns: columns,
|
|
41
|
+
row: row,
|
|
42
|
+
rowIndex: index,
|
|
43
|
+
emptyText: emptyText,
|
|
44
|
+
onCellClick: onCell
|
|
45
|
+
}));
|
|
46
|
+
}), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
47
|
+
id: "3433300570",
|
|
48
|
+
dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
|
|
49
|
+
}, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
TableBody.defaultProps = defaultProps;
|
|
53
|
+
TableBody.displayName = 'BolioUITableBody';
|
|
54
|
+
export default TableBody;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
var TableCell = function TableCell(_ref) {
|
|
4
|
+
var columns = _ref.columns,
|
|
5
|
+
row = _ref.row,
|
|
6
|
+
rowIndex = _ref.rowIndex,
|
|
7
|
+
emptyText = _ref.emptyText,
|
|
8
|
+
onCellClick = _ref.onCellClick;
|
|
9
|
+
|
|
10
|
+
/* eslint-disable react/jsx-no-useless-fragment */
|
|
11
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, columns.map(function (column, index) {
|
|
12
|
+
var currentRowValue = row[column.prop];
|
|
13
|
+
var cellValue = currentRowValue || emptyText;
|
|
14
|
+
var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
|
|
15
|
+
return /*#__PURE__*/React.createElement("td", {
|
|
16
|
+
key: "row-td-".concat(index, "-").concat(column.prop),
|
|
17
|
+
onClick: function onClick() {
|
|
18
|
+
return onCellClick && onCellClick(currentRowValue, rowIndex, index);
|
|
19
|
+
},
|
|
20
|
+
className: column.className
|
|
21
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
22
|
+
className: "cell"
|
|
23
|
+
}, shouldBeRenderElement ? shouldBeRenderElement : cellValue));
|
|
24
|
+
}));
|
|
25
|
+
/* eslint-enable */
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export default TableCell;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { useEffect } from 'react';
|
|
2
|
+
import { useTableContext } from './table-context';
|
|
3
|
+
import useWarning from '../utils/use-warning';
|
|
4
|
+
var defaultProps = {
|
|
5
|
+
className: '',
|
|
6
|
+
render: function render() {}
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
var TableColumn = function TableColumn(columnProps) {
|
|
10
|
+
var _ref = columnProps,
|
|
11
|
+
children = _ref.children,
|
|
12
|
+
prop = _ref.prop,
|
|
13
|
+
label = _ref.label,
|
|
14
|
+
width = _ref.width,
|
|
15
|
+
className = _ref.className,
|
|
16
|
+
renderHandler = _ref.render;
|
|
17
|
+
|
|
18
|
+
var _useTableContext = useTableContext(),
|
|
19
|
+
updateColumn = _useTableContext.updateColumn;
|
|
20
|
+
|
|
21
|
+
var safeProp = "".concat(prop).trim();
|
|
22
|
+
|
|
23
|
+
if (!safeProp) {
|
|
24
|
+
useWarning('The props "prop" is required.', 'Table.Column');
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
useEffect(function () {
|
|
28
|
+
updateColumn({
|
|
29
|
+
label: children || label,
|
|
30
|
+
prop: safeProp,
|
|
31
|
+
width: width,
|
|
32
|
+
className: className,
|
|
33
|
+
renderHandler: renderHandler
|
|
34
|
+
});
|
|
35
|
+
}, [children, label, prop, width, className, renderHandler]);
|
|
36
|
+
return null;
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
TableColumn.defaultProps = defaultProps;
|
|
40
|
+
TableColumn.displayName = 'BolioUITableColumn';
|
|
41
|
+
export default TableColumn;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
var defaultContext = {
|
|
3
|
+
columns: [],
|
|
4
|
+
updateColumn: function updateColumn() {}
|
|
5
|
+
};
|
|
6
|
+
export var TableContext = /*#__PURE__*/React.createContext(defaultContext);
|
|
7
|
+
export var useTableContext = function useTableContext() {
|
|
8
|
+
return React.useContext(TableContext);
|
|
9
|
+
};
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import _JSXStyle from "../styled-jsx.es.js";
|
|
2
|
+
import React, { useMemo } from 'react';
|
|
3
|
+
import useTheme from '../use-theme';
|
|
4
|
+
var defaultProps = {
|
|
5
|
+
className: ''
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
var makeColgroup = function makeColgroup(width, columns) {
|
|
9
|
+
var unsetWidthCount = columns.filter(function (c) {
|
|
10
|
+
return !c.width;
|
|
11
|
+
}).length;
|
|
12
|
+
var customWidthTotal = columns.reduce(function (pre, current) {
|
|
13
|
+
return current.width ? pre + current.width : pre;
|
|
14
|
+
}, 0);
|
|
15
|
+
var averageWidth = (width - customWidthTotal) / unsetWidthCount;
|
|
16
|
+
if (averageWidth <= 0) return /*#__PURE__*/React.createElement("colgroup", null);
|
|
17
|
+
return /*#__PURE__*/React.createElement("colgroup", null, columns.map(function (column, index) {
|
|
18
|
+
return /*#__PURE__*/React.createElement("col", {
|
|
19
|
+
key: "colgroup-".concat(index),
|
|
20
|
+
width: column.width || averageWidth
|
|
21
|
+
});
|
|
22
|
+
}));
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
var TableHead = function TableHead(props) {
|
|
26
|
+
var theme = useTheme();
|
|
27
|
+
var _ref = props,
|
|
28
|
+
columns = _ref.columns,
|
|
29
|
+
width = _ref.width;
|
|
30
|
+
var isScalableWidth = useMemo(function () {
|
|
31
|
+
return columns.find(function (item) {
|
|
32
|
+
return !!item.width;
|
|
33
|
+
});
|
|
34
|
+
}, [columns]);
|
|
35
|
+
var colgroup = useMemo(function () {
|
|
36
|
+
if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
|
|
37
|
+
return makeColgroup(width, columns);
|
|
38
|
+
}, [isScalableWidth, width]);
|
|
39
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
|
|
40
|
+
className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
|
|
41
|
+
}, /*#__PURE__*/React.createElement("tr", {
|
|
42
|
+
className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
|
|
43
|
+
}, columns.map(function (column, index) {
|
|
44
|
+
return /*#__PURE__*/React.createElement("th", {
|
|
45
|
+
key: "table-th-".concat(column.prop, "-").concat(index),
|
|
46
|
+
className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
|
|
47
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
48
|
+
className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
|
|
49
|
+
}, column.label));
|
|
50
|
+
}))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
51
|
+
id: "134865897",
|
|
52
|
+
dynamic: [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
|
|
53
|
+
}, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:".concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
TableHead.defaultProps = defaultProps;
|
|
57
|
+
TableHead.displayName = 'BolioUITableHead';
|
|
58
|
+
export default TableHead;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
3
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
4
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
5
|
+
var _excluded = ["children", "data", "initialData", "hover", "emptyText", "onRow", "onCell", "onChange", "className", "rowClassName"];
|
|
6
|
+
import _JSXStyle from "../styled-jsx.es.js";
|
|
7
|
+
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
|
8
|
+
import TableHead from './table-head';
|
|
9
|
+
import TableBody from './table-body';
|
|
10
|
+
import useRealShape from '../utils/use-real-shape';
|
|
11
|
+
import useResize from '../utils/use-resize';
|
|
12
|
+
import { TableContext } from './table-context';
|
|
13
|
+
import useScale, { withScale } from '../use-scale';
|
|
14
|
+
import TableColumn from './table-column';
|
|
15
|
+
var defaultProps = {
|
|
16
|
+
hover: true,
|
|
17
|
+
initialData: [],
|
|
18
|
+
emptyText: '',
|
|
19
|
+
className: '',
|
|
20
|
+
rowClassName: function rowClassName() {
|
|
21
|
+
return '';
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
function TableComponent(tableProps) {
|
|
26
|
+
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
27
|
+
var _ref = tableProps,
|
|
28
|
+
children = _ref.children,
|
|
29
|
+
customData = _ref.data,
|
|
30
|
+
initialData = _ref.initialData,
|
|
31
|
+
hover = _ref.hover,
|
|
32
|
+
emptyText = _ref.emptyText,
|
|
33
|
+
onRow = _ref.onRow,
|
|
34
|
+
onCell = _ref.onCell,
|
|
35
|
+
onChange = _ref.onChange,
|
|
36
|
+
className = _ref.className,
|
|
37
|
+
rowClassName = _ref.rowClassName,
|
|
38
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
39
|
+
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
var _useScale = useScale(),
|
|
43
|
+
SCALES = _useScale.SCALES;
|
|
44
|
+
|
|
45
|
+
var ref = useRef(null);
|
|
46
|
+
|
|
47
|
+
var _useRealShape = useRealShape(ref),
|
|
48
|
+
_useRealShape2 = _slicedToArray(_useRealShape, 2),
|
|
49
|
+
width = _useRealShape2[0].width,
|
|
50
|
+
updateShape = _useRealShape2[1];
|
|
51
|
+
|
|
52
|
+
var _useState = useState([]),
|
|
53
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
54
|
+
columns = _useState2[0],
|
|
55
|
+
setColumns = _useState2[1];
|
|
56
|
+
|
|
57
|
+
var _useState3 = useState(initialData),
|
|
58
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
59
|
+
data = _useState4[0],
|
|
60
|
+
setData = _useState4[1];
|
|
61
|
+
|
|
62
|
+
var updateColumn = function updateColumn(column) {
|
|
63
|
+
setColumns(function (last) {
|
|
64
|
+
var hasColumn = last.find(function (item) {
|
|
65
|
+
return item.prop === column.prop;
|
|
66
|
+
});
|
|
67
|
+
if (!hasColumn) return [].concat(_toConsumableArray(last), [column]);
|
|
68
|
+
return last.map(function (item) {
|
|
69
|
+
if (item.prop !== column.prop) return item;
|
|
70
|
+
return column;
|
|
71
|
+
});
|
|
72
|
+
});
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
var contextValue = useMemo(function () {
|
|
76
|
+
return {
|
|
77
|
+
columns: columns,
|
|
78
|
+
updateColumn: updateColumn
|
|
79
|
+
};
|
|
80
|
+
}, [columns]);
|
|
81
|
+
useEffect(function () {
|
|
82
|
+
if (typeof customData === 'undefined') return;
|
|
83
|
+
setData(customData);
|
|
84
|
+
}, [customData]);
|
|
85
|
+
useResize(function () {
|
|
86
|
+
return updateShape();
|
|
87
|
+
});
|
|
88
|
+
return /*#__PURE__*/React.createElement(TableContext.Provider, {
|
|
89
|
+
value: contextValue
|
|
90
|
+
}, /*#__PURE__*/React.createElement("table", _extends({
|
|
91
|
+
ref: ref
|
|
92
|
+
}, props, {
|
|
93
|
+
className: _JSXStyle.dynamic([["2991182230", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
|
|
94
|
+
}), /*#__PURE__*/React.createElement(TableHead, {
|
|
95
|
+
columns: columns,
|
|
96
|
+
width: width
|
|
97
|
+
}), /*#__PURE__*/React.createElement(TableBody, {
|
|
98
|
+
data: data,
|
|
99
|
+
hover: hover,
|
|
100
|
+
emptyText: emptyText,
|
|
101
|
+
onRow: onRow,
|
|
102
|
+
onCell: onCell,
|
|
103
|
+
rowClassName: rowClassName
|
|
104
|
+
}), children, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
105
|
+
id: "2991182230",
|
|
106
|
+
dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
|
|
107
|
+
}, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}"))));
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
TableComponent.defaultProps = defaultProps;
|
|
111
|
+
TableComponent.displayName = 'BolioUITable';
|
|
112
|
+
TableComponent.Column = TableColumn;
|
|
113
|
+
var Table = withScale(TableComponent);
|
|
114
|
+
Table.Column = TableColumn;
|
|
115
|
+
export default Table;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bolio-ui/core",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Amazing, modern and creative tools for React UI. 🥷🏼",
|
|
6
6
|
"homepage": "https://bolio-ui.com/",
|
|
@@ -72,14 +72,14 @@
|
|
|
72
72
|
"gray-matter": "^4.0.3",
|
|
73
73
|
"jest-styled-components": "^7.0.5",
|
|
74
74
|
"kbar": "0.1.0-beta.6",
|
|
75
|
-
"next": "
|
|
75
|
+
"next": "12.3.1",
|
|
76
76
|
"next-pwa": "^5.2.24",
|
|
77
77
|
"next-seo": "^5.5.0",
|
|
78
78
|
"prism-react-renderer": "^1.2.1",
|
|
79
|
-
"react": "
|
|
79
|
+
"react": "^18.2.0",
|
|
80
80
|
"react-autosuggest": "^10.1.0",
|
|
81
81
|
"react-device-detect": "^1.17.0",
|
|
82
|
-
"react-dom": "^
|
|
82
|
+
"react-dom": "^18.2.0",
|
|
83
83
|
"react-instantsearch-dom": "^6.12.0",
|
|
84
84
|
"react-live": "^2.2.3",
|
|
85
85
|
"react-syntax-highlighter": "^15.5.0",
|