dtable-ui-component 0.3.6-beta.6 → 0.3.7-alpha1
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/lib/ButtonFormatter/index.js +8 -11
- package/lib/CheckboxFormatter/index.css +5 -0
- package/lib/CollaboratorItem/index.css +1 -1
- package/lib/FormulaFormatter/index.css +4 -0
- package/lib/FormulaFormatter/index.js +2 -2
- package/lib/FormulaFormatter/utils.js +3 -3
- package/lib/RateFormatter/index.js +0 -3
- package/lib/RowExpandEmailFormatter/index.css +30 -0
- package/lib/RowExpandEmailFormatter/index.js +56 -0
- package/lib/RowExpandFormatter/index.css +35 -1
- package/lib/RowExpandFormatter/index.js +29 -11
- package/lib/RowExpandFormulaFormatter/index.js +186 -0
- package/lib/RowExpandLinkFormatter/index.js +2 -2
- package/lib/RowExpandLinkFormatter/utils.js +1 -1
- package/lib/RowExpandRateFormatter/index.css +5 -0
- package/lib/RowExpandRateFormatter/index.js +76 -0
- package/lib/RowExpandUrlFormatter/index.css +1 -0
- package/lib/RowExpandUrlFormatter/index.js +69 -0
- package/lib/constants/index.js +2 -2
- package/lib/css/cell-formatter.css +1 -0
- package/lib/data/dtable-value.js +0 -1
- package/lib/index.js +4 -0
- package/lib/utils/editor-utils.js +7 -0
- package/package.json +1 -1
|
@@ -4,7 +4,9 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
|
4
4
|
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import classnames from 'classnames';
|
|
7
|
+
import { SELECT_OPTION_COLORS } from 'dtable-utils';
|
|
7
8
|
import './index.css';
|
|
9
|
+
var WHITE = '#FFFFFF';
|
|
8
10
|
|
|
9
11
|
var ButtonFormatter = /*#__PURE__*/function (_React$Component) {
|
|
10
12
|
_inherits(ButtonFormatter, _React$Component);
|
|
@@ -36,24 +38,19 @@ var ButtonFormatter = /*#__PURE__*/function (_React$Component) {
|
|
|
36
38
|
value: function render() {
|
|
37
39
|
var _this$props = this.props,
|
|
38
40
|
data = _this$props.data,
|
|
39
|
-
containerClassName = _this$props.containerClassName
|
|
40
|
-
optionColors = _this$props.optionColors;
|
|
41
|
+
containerClassName = _this$props.containerClassName;
|
|
41
42
|
|
|
42
43
|
var _ref = data || {},
|
|
43
44
|
button_color = _ref.button_color,
|
|
44
45
|
button_name = _ref.button_name;
|
|
45
46
|
|
|
46
|
-
var
|
|
47
|
+
var colorObj = SELECT_OPTION_COLORS.find(function (item) {
|
|
47
48
|
return item.COLOR === button_color;
|
|
48
|
-
}) ||
|
|
49
|
-
COLOR: '#FFFCB5',
|
|
50
|
-
BORDER_COLOR: '#E8E79D',
|
|
51
|
-
TEXT_COLOR: '#666'
|
|
52
|
-
};
|
|
49
|
+
}) || SELECT_OPTION_COLORS[0];
|
|
53
50
|
var btnStyle = {
|
|
54
|
-
backgroundColor:
|
|
55
|
-
borderColor:
|
|
56
|
-
color:
|
|
51
|
+
backgroundColor: colorObj.COLOR,
|
|
52
|
+
borderColor: colorObj.BORDER_COLOR,
|
|
53
|
+
color: colorObj.TEXT_COLOR === WHITE ? WHITE : '#666666'
|
|
57
54
|
};
|
|
58
55
|
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
|
|
59
56
|
className: classnames('dtable-ui cell-formatter-container button-formatter', containerClassName),
|
|
@@ -5,6 +5,10 @@
|
|
|
5
5
|
margin-right: 10px;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
+
.dtable-ui.dtable-row-expand-formatter .formula-formatter-content-item {
|
|
9
|
+
margin-top: 0.5rem;
|
|
10
|
+
margin-bottom: 5px;
|
|
11
|
+
}
|
|
8
12
|
|
|
9
13
|
.dtable-ui.formula-formatter.multiple .formula-formatter-content-item.simple-cell-formatter {
|
|
10
14
|
height: 20px;
|
|
@@ -7,7 +7,7 @@ import React from 'react';
|
|
|
7
7
|
import { CellType, FORMULA_RESULT_TYPE, getFormulaDisplayString } from 'dtable-utils';
|
|
8
8
|
import BaseFormatterConfig from '../formatterConfig/base-formatter-config';
|
|
9
9
|
import TextFormatter from '../TextFormatter';
|
|
10
|
-
import {
|
|
10
|
+
import { isArrayFormatColumn, isSimpleCellFormatter, isFunction, getFormulaArrayValue, convertValueToDtableLongTextValue } from './utils';
|
|
11
11
|
import cellValueValidator from './cell-value-validator';
|
|
12
12
|
import './index.css';
|
|
13
13
|
|
|
@@ -58,7 +58,7 @@ var FormulaFormatter = /*#__PURE__*/function (_React$Component) {
|
|
|
58
58
|
|
|
59
59
|
var formatterProps = _this.getFormatterProps(array_type, array_data, collaborators);
|
|
60
60
|
|
|
61
|
-
if (
|
|
61
|
+
if (isArrayFormatColumn(array_type)) {
|
|
62
62
|
formatterProps.value = value;
|
|
63
63
|
return _this.createColumnFormatter(Formatter, formatterProps);
|
|
64
64
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ARRAY_FORMAT_COLUMNS, SIMPLE_CELL_COLUMNS, SIMPLE_CELL_FORMULA_RESULTS } from '../constants';
|
|
2
2
|
import getPreviewContent from '../SimpleLongTextFormatter/normalize-long-text-value';
|
|
3
3
|
export function isSimpleCellFormatter(type) {
|
|
4
4
|
return SIMPLE_CELL_COLUMNS.includes(type) || SIMPLE_CELL_FORMULA_RESULTS.includes(type);
|
|
5
5
|
}
|
|
6
|
-
export function
|
|
7
|
-
return
|
|
6
|
+
export function isArrayFormatColumn(columnType) {
|
|
7
|
+
return ARRAY_FORMAT_COLUMNS.includes(columnType);
|
|
8
8
|
}
|
|
9
9
|
export var isFunction = function isFunction(functionToCheck) {
|
|
10
10
|
var getType = {};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
@import url('../css/cell-formatter.css');
|
|
2
|
+
|
|
3
|
+
.dtable-row-expand-formatter .dtable-ui.email-formatter .email-formatter-value,
|
|
4
|
+
.dtable-row-expand-formatter .dtable-ui.url-formatter .url-formatter-value {
|
|
5
|
+
text-decoration: underline;
|
|
6
|
+
width: 95%;
|
|
7
|
+
display: inline-flex;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.dtable-row-expand-formatter .dtable-ui .row-expand-jump-link {
|
|
11
|
+
display: inline-flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
font-size: 14px;
|
|
14
|
+
height: 22px;
|
|
15
|
+
position: absolute;
|
|
16
|
+
top: 8px;
|
|
17
|
+
right: 22px;
|
|
18
|
+
border: 1px solid #eee;
|
|
19
|
+
padding: 0 4px;
|
|
20
|
+
color: #999;
|
|
21
|
+
border-radius: 2px;
|
|
22
|
+
background: #fff;
|
|
23
|
+
cursor: pointer;
|
|
24
|
+
box-shadow: 0 0 1px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.dtable-row-expand-formatter .dtable-ui .row-expand-jump-link:hover {
|
|
28
|
+
background: #eee;
|
|
29
|
+
border: 1px solid #c9c9c9;
|
|
30
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
2
|
+
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
3
|
+
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
4
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import classnames from 'classnames';
|
|
7
|
+
import { getTrimmedString } from '../utils/editor-utils';
|
|
8
|
+
import './index.css';
|
|
9
|
+
|
|
10
|
+
var RowExpandEmailFormatter = /*#__PURE__*/function (_React$Component) {
|
|
11
|
+
_inherits(RowExpandEmailFormatter, _React$Component);
|
|
12
|
+
|
|
13
|
+
var _super = _createSuper(RowExpandEmailFormatter);
|
|
14
|
+
|
|
15
|
+
function RowExpandEmailFormatter() {
|
|
16
|
+
var _this;
|
|
17
|
+
|
|
18
|
+
_classCallCheck(this, RowExpandEmailFormatter);
|
|
19
|
+
|
|
20
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
21
|
+
args[_key] = arguments[_key];
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
25
|
+
|
|
26
|
+
_this.onOpenEmailLink = function () {
|
|
27
|
+
var value = _this.props.value;
|
|
28
|
+
var newValue = value.trim();
|
|
29
|
+
window.location.href = "mailto:".concat(newValue);
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
return _this;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
_createClass(RowExpandEmailFormatter, [{
|
|
36
|
+
key: "render",
|
|
37
|
+
value: function render() {
|
|
38
|
+
var _this$props = this.props,
|
|
39
|
+
containerClassName = _this$props.containerClassName,
|
|
40
|
+
value = _this$props.value;
|
|
41
|
+
var classname = classnames('dtable-ui cell-formatter-container email-formatter', containerClassName);
|
|
42
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
43
|
+
className: classname
|
|
44
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
45
|
+
className: "email-formatter-value text-truncate"
|
|
46
|
+
}, value), getTrimmedString(value) && /*#__PURE__*/React.createElement("span", {
|
|
47
|
+
className: "dtable-font dtable-icon-email row-expand-jump-link",
|
|
48
|
+
onClick: this.onOpenEmailLink
|
|
49
|
+
}));
|
|
50
|
+
}
|
|
51
|
+
}]);
|
|
52
|
+
|
|
53
|
+
return RowExpandEmailFormatter;
|
|
54
|
+
}(React.Component);
|
|
55
|
+
|
|
56
|
+
export default RowExpandEmailFormatter;
|
|
@@ -43,6 +43,14 @@
|
|
|
43
43
|
|
|
44
44
|
.dtable-ui.dtable-row-expand-formatter .form-control {
|
|
45
45
|
background-color: #f8f9fa;
|
|
46
|
+
padding: 0 10px;
|
|
47
|
+
height: fit-content;
|
|
48
|
+
min-height: 2.375rem;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.dtable-ui.dtable-row-expand-formatter .ctime-formatter-container,
|
|
52
|
+
.dtable-ui.dtable-row-expand-formatter .mtime-formatter-container {
|
|
53
|
+
padding: 0.375rem 0.75rem;
|
|
46
54
|
}
|
|
47
55
|
|
|
48
56
|
.dtable-ui.dtable-row-expand-formatter .checkbox-formatter-container {
|
|
@@ -54,6 +62,32 @@
|
|
|
54
62
|
justify-content: center;
|
|
55
63
|
}
|
|
56
64
|
|
|
65
|
+
.dtable-ui.dtable-row-expand-formatter .checkbox-formatter-container .cell-formatter-container {
|
|
66
|
+
line-height: inherit;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.dtable-ui.dtable-row-expand-formatter .button-formatter {
|
|
70
|
+
margin-top: 6px;
|
|
71
|
+
text-align: center;
|
|
72
|
+
height: 26px;
|
|
73
|
+
line-height: 14px;
|
|
74
|
+
min-width: 80px;
|
|
75
|
+
max-width: 100%;
|
|
76
|
+
width: fit-content;
|
|
77
|
+
display: inline-flex;
|
|
78
|
+
justify-content: center;
|
|
79
|
+
align-items: center;
|
|
80
|
+
padding-left: 0.5rem;
|
|
81
|
+
padding-right: 0.5rem;
|
|
82
|
+
border-radius: 3px;
|
|
83
|
+
border-width: 2px;
|
|
84
|
+
font-weight: 500;
|
|
85
|
+
font-size: 14px;
|
|
86
|
+
font-family: inherit;
|
|
87
|
+
cursor: pointer;
|
|
88
|
+
letter-spacing: .03em;
|
|
89
|
+
}
|
|
90
|
+
|
|
57
91
|
.dtable-ui.dtable-row-expand-formatter .longtext-formatter-container {
|
|
58
92
|
border: 1px solid rgba(0, 40, 100, 0.12);
|
|
59
93
|
border-radius: 3px;
|
|
@@ -63,7 +97,7 @@
|
|
|
63
97
|
}
|
|
64
98
|
|
|
65
99
|
.dtable-ui.dtable-row-expand-formatter .geolocation-formatter-container {
|
|
66
|
-
|
|
100
|
+
margin-top: 0.5rem;
|
|
67
101
|
display: flex;
|
|
68
102
|
align-items: center;
|
|
69
103
|
}
|
|
@@ -9,7 +9,7 @@ var _emptyTypeMap;
|
|
|
9
9
|
|
|
10
10
|
import React from 'react';
|
|
11
11
|
import classnames from 'classnames';
|
|
12
|
-
import { TextFormatter, NumberFormatter, CheckboxFormatter, DateFormatter, SingleSelectFormatter, MultipleSelectFormatter, CollaboratorFormatter, LongTextFormatter, GeolocationFormatter, CTimeFormatter, CreatorFormatter, LastModifierFormatter, MTimeFormatter, AutoNumberFormatter,
|
|
12
|
+
import { TextFormatter, NumberFormatter, CheckboxFormatter, DateFormatter, SingleSelectFormatter, MultipleSelectFormatter, CollaboratorFormatter, LongTextFormatter, GeolocationFormatter, CTimeFormatter, CreatorFormatter, LastModifierFormatter, MTimeFormatter, AutoNumberFormatter, DurationFormatter, ButtonFormatter, RowExpandUrlFormatter, RowExpandEmailFormatter, RowExpandRateFormatter, RowExpandImageFormatter, RowExpandFileFormatter, RowExpandLinkFormatter, RowExpandFormulaFormatter, DigitalSignFormatter } from '../index';
|
|
13
13
|
import { CellType } from '../constants';
|
|
14
14
|
import './index.css';
|
|
15
15
|
var emptyTypeMap = (_emptyTypeMap = {}, _defineProperty(_emptyTypeMap, CellType.TEXT, true), _defineProperty(_emptyTypeMap, CellType.LONG_TEXT, true), _defineProperty(_emptyTypeMap, CellType.GEOLOCATION, true), _defineProperty(_emptyTypeMap, CellType.SINGLE_SELECT, true), _defineProperty(_emptyTypeMap, CellType.MULTIPLE_SELECT, true), _defineProperty(_emptyTypeMap, CellType.CTIME, true), _defineProperty(_emptyTypeMap, CellType.MTIME, true), _defineProperty(_emptyTypeMap, CellType.DATE, true), _defineProperty(_emptyTypeMap, CellType.AUTO_NUMBER, true), _defineProperty(_emptyTypeMap, CellType.URL, true), _defineProperty(_emptyTypeMap, CellType.EMAIL, true), _defineProperty(_emptyTypeMap, CellType.IMAGE, true), _defineProperty(_emptyTypeMap, CellType.FILE, true), _defineProperty(_emptyTypeMap, CellType.CREATOR, true), _defineProperty(_emptyTypeMap, CellType.LAST_MODIFIER, true), _emptyTypeMap);
|
|
@@ -147,7 +147,10 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
|
|
|
147
147
|
}
|
|
148
148
|
|
|
149
149
|
return /*#__PURE__*/React.createElement("div", {
|
|
150
|
-
className: "form-control d-flex align-items-center
|
|
150
|
+
className: "form-control d-flex align-items-center",
|
|
151
|
+
style: {
|
|
152
|
+
width: 320
|
|
153
|
+
}
|
|
151
154
|
}, /*#__PURE__*/React.createElement(NumberFormatter, {
|
|
152
155
|
value: cellValue,
|
|
153
156
|
data: column.data,
|
|
@@ -158,7 +161,10 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
|
|
|
158
161
|
case CellType.DATE:
|
|
159
162
|
{
|
|
160
163
|
return /*#__PURE__*/React.createElement("div", {
|
|
161
|
-
className: "form-control d-flex align-items-center
|
|
164
|
+
className: "form-control d-flex align-items-center",
|
|
165
|
+
style: {
|
|
166
|
+
width: 320
|
|
167
|
+
}
|
|
162
168
|
}, /*#__PURE__*/React.createElement(DateFormatter, {
|
|
163
169
|
value: cellValue,
|
|
164
170
|
format: column.data.format,
|
|
@@ -173,7 +179,10 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
|
|
|
173
179
|
}
|
|
174
180
|
|
|
175
181
|
return /*#__PURE__*/React.createElement("div", {
|
|
176
|
-
className: "form-control d-flex align-items-center
|
|
182
|
+
className: "form-control d-flex align-items-center ctime-formatter-container",
|
|
183
|
+
style: {
|
|
184
|
+
width: 320
|
|
185
|
+
}
|
|
177
186
|
}, /*#__PURE__*/React.createElement(CTimeFormatter, {
|
|
178
187
|
value: row._ctime,
|
|
179
188
|
containerClassName: containerClassName
|
|
@@ -187,7 +196,10 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
|
|
|
187
196
|
}
|
|
188
197
|
|
|
189
198
|
return /*#__PURE__*/React.createElement("div", {
|
|
190
|
-
className: "form-control d-flex align-items-center
|
|
199
|
+
className: "form-control d-flex align-items-center mtime-formatter-container",
|
|
200
|
+
style: {
|
|
201
|
+
width: 320
|
|
202
|
+
}
|
|
191
203
|
}, /*#__PURE__*/React.createElement(MTimeFormatter, {
|
|
192
204
|
value: row._mtime,
|
|
193
205
|
containerClassName: containerClassName
|
|
@@ -278,7 +290,7 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
|
|
|
278
290
|
return _this.renderEmpty();
|
|
279
291
|
}
|
|
280
292
|
|
|
281
|
-
return /*#__PURE__*/React.createElement(
|
|
293
|
+
return /*#__PURE__*/React.createElement(RowExpandFormulaFormatter, {
|
|
282
294
|
value: cellValue,
|
|
283
295
|
column: column,
|
|
284
296
|
collaborators: collaborators,
|
|
@@ -332,7 +344,7 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
|
|
|
332
344
|
{
|
|
333
345
|
return /*#__PURE__*/React.createElement("div", {
|
|
334
346
|
className: "form-control d-flex align-items-center w-100"
|
|
335
|
-
}, /*#__PURE__*/React.createElement(
|
|
347
|
+
}, /*#__PURE__*/React.createElement(RowExpandUrlFormatter, {
|
|
336
348
|
value: cellValue,
|
|
337
349
|
containerClassName: containerClassName
|
|
338
350
|
}));
|
|
@@ -342,7 +354,7 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
|
|
|
342
354
|
{
|
|
343
355
|
return /*#__PURE__*/React.createElement("div", {
|
|
344
356
|
className: "form-control d-flex align-items-center w-100"
|
|
345
|
-
}, /*#__PURE__*/React.createElement(
|
|
357
|
+
}, /*#__PURE__*/React.createElement(RowExpandEmailFormatter, {
|
|
346
358
|
value: cellValue,
|
|
347
359
|
containerClassName: containerClassName
|
|
348
360
|
}));
|
|
@@ -355,7 +367,10 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
|
|
|
355
367
|
}
|
|
356
368
|
|
|
357
369
|
return /*#__PURE__*/React.createElement("div", {
|
|
358
|
-
className: "form-control d-flex align-items-center
|
|
370
|
+
className: "form-control d-flex align-items-center",
|
|
371
|
+
style: {
|
|
372
|
+
width: 320
|
|
373
|
+
}
|
|
359
374
|
}, /*#__PURE__*/React.createElement(DurationFormatter, {
|
|
360
375
|
value: cellValue,
|
|
361
376
|
format: column.data.duration_format,
|
|
@@ -366,8 +381,11 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
|
|
|
366
381
|
case CellType.RATE:
|
|
367
382
|
{
|
|
368
383
|
return /*#__PURE__*/React.createElement("div", {
|
|
369
|
-
className: "form-control d-flex align-items-center
|
|
370
|
-
|
|
384
|
+
className: "form-control d-flex align-items-center",
|
|
385
|
+
style: {
|
|
386
|
+
width: 320
|
|
387
|
+
}
|
|
388
|
+
}, /*#__PURE__*/React.createElement(RowExpandRateFormatter, {
|
|
371
389
|
value: cellValue,
|
|
372
390
|
data: column.data,
|
|
373
391
|
containerClassName: containerClassName
|
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
+
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
3
|
+
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
4
|
+
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
5
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
6
|
+
import React from 'react';
|
|
7
|
+
import { CellType, FORMULA_RESULT_TYPE, getFormulaDisplayString } from 'dtable-utils';
|
|
8
|
+
import BaseFormatterConfig from '../formatterConfig/base-formatter-config';
|
|
9
|
+
import TextFormatter from '../TextFormatter';
|
|
10
|
+
import { isArrayFormatColumn, isSimpleCellFormatter, isFunction, getFormulaArrayValue, convertValueToDtableLongTextValue } from '../FormulaFormatter/utils';
|
|
11
|
+
import cellValueValidator from '../FormulaFormatter/cell-value-validator';
|
|
12
|
+
import '../FormulaFormatter/index.css';
|
|
13
|
+
|
|
14
|
+
var RowExpandFormulaFormatter = /*#__PURE__*/function (_React$Component) {
|
|
15
|
+
_inherits(RowExpandFormulaFormatter, _React$Component);
|
|
16
|
+
|
|
17
|
+
var _super = _createSuper(RowExpandFormulaFormatter);
|
|
18
|
+
|
|
19
|
+
function RowExpandFormulaFormatter() {
|
|
20
|
+
var _this;
|
|
21
|
+
|
|
22
|
+
_classCallCheck(this, RowExpandFormulaFormatter);
|
|
23
|
+
|
|
24
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
25
|
+
args[_key] = arguments[_key];
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
29
|
+
|
|
30
|
+
_this.renderBorder = function (dom) {
|
|
31
|
+
var column = _this.props.column;
|
|
32
|
+
var result_type = column.data.result_type;
|
|
33
|
+
var style = {};
|
|
34
|
+
|
|
35
|
+
if (result_type === FORMULA_RESULT_TYPE.DATE || result_type === FORMULA_RESULT_TYPE.NUMBER) {
|
|
36
|
+
style = {
|
|
37
|
+
width: '320px'
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
42
|
+
className: "d-flex align-items-center form-control disabled h-auto",
|
|
43
|
+
style: style
|
|
44
|
+
}, dom);
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
_this.renderOtherColumnFormatter = function () {
|
|
48
|
+
var _this$props = _this.props,
|
|
49
|
+
value = _this$props.value,
|
|
50
|
+
column = _this$props.column,
|
|
51
|
+
collaborators = _this$props.collaborators;
|
|
52
|
+
var _column$data = column.data,
|
|
53
|
+
array_type = _column$data.array_type,
|
|
54
|
+
array_data = _column$data.array_data;
|
|
55
|
+
|
|
56
|
+
if (!array_type || array_type === CellType.LINK) {
|
|
57
|
+
return null;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
var Formatter = BaseFormatterConfig[array_type];
|
|
61
|
+
|
|
62
|
+
var formatterProps = _this.getFormatterProps(array_type, array_data, collaborators);
|
|
63
|
+
|
|
64
|
+
if (isArrayFormatColumn(array_type)) {
|
|
65
|
+
formatterProps.value = value;
|
|
66
|
+
return _this.renderBorder(_this.createColumnFormatter(Formatter, formatterProps));
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
var cellValue = value;
|
|
70
|
+
|
|
71
|
+
if (!Array.isArray(value)) {
|
|
72
|
+
cellValue = cellValueValidator(value, array_type) ? [value] : [];
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
return _this.renderBorder( /*#__PURE__*/React.createElement("div", {
|
|
76
|
+
className: "dtable-ui formula-formatter multiple"
|
|
77
|
+
}, cellValue.map(function (v, index) {
|
|
78
|
+
formatterProps.value = v;
|
|
79
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
80
|
+
className: "formula-formatter-content-item ".concat(isSimpleCellFormatter(array_type) ? 'simple-cell-formatter' : ''),
|
|
81
|
+
key: "formula-formatter-content-item-".concat(index)
|
|
82
|
+
}, _this.createColumnFormatter(Formatter, formatterProps));
|
|
83
|
+
})));
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
_this.getFormatterProps = function (array_type, array_data, collaborators) {
|
|
87
|
+
switch (array_type) {
|
|
88
|
+
case CellType.DURATION:
|
|
89
|
+
{
|
|
90
|
+
var duration_format = array_data.duration_format;
|
|
91
|
+
return {
|
|
92
|
+
format: duration_format
|
|
93
|
+
};
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
case CellType.NUMBER:
|
|
97
|
+
case CellType.RATE:
|
|
98
|
+
case CellType.GEOLOCATION:
|
|
99
|
+
{
|
|
100
|
+
return {
|
|
101
|
+
data: array_data
|
|
102
|
+
};
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
default:
|
|
106
|
+
{
|
|
107
|
+
return _objectSpread(_objectSpread({}, array_data), {}, {
|
|
108
|
+
collaborators: collaborators
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
return _this;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
_createClass(RowExpandFormulaFormatter, [{
|
|
118
|
+
key: "createColumnFormatter",
|
|
119
|
+
value: function createColumnFormatter(Formatter, formatterProps) {
|
|
120
|
+
if (React.isValidElement(Formatter)) {
|
|
121
|
+
return React.cloneElement(Formatter, _objectSpread({}, formatterProps));
|
|
122
|
+
} else if (isFunction(Formatter)) {
|
|
123
|
+
return /*#__PURE__*/React.createElement(Formatter, formatterProps);
|
|
124
|
+
} else {
|
|
125
|
+
return /*#__PURE__*/React.createElement(TextFormatter, formatterProps);
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}, {
|
|
129
|
+
key: "render",
|
|
130
|
+
value: function render() {
|
|
131
|
+
var _this$props2 = this.props,
|
|
132
|
+
containerClassName = _this$props2.containerClassName,
|
|
133
|
+
column = _this$props2.column,
|
|
134
|
+
collaborators = _this$props2.collaborators,
|
|
135
|
+
value = _this$props2.value;
|
|
136
|
+
var data = column.data;
|
|
137
|
+
var array_type = data.array_type,
|
|
138
|
+
result_type = data.result_type;
|
|
139
|
+
|
|
140
|
+
if (Array.isArray(value)) {
|
|
141
|
+
value = getFormulaArrayValue(value);
|
|
142
|
+
|
|
143
|
+
if (array_type === CellType.DATE || result_type === FORMULA_RESULT_TYPE.DATE) {
|
|
144
|
+
value = value.map(function (item) {
|
|
145
|
+
return item.replace('T', ' ').replace('Z', '');
|
|
146
|
+
});
|
|
147
|
+
} else if (array_type === CellType.LONG_TEXT) {
|
|
148
|
+
value = value.map(function (item) {
|
|
149
|
+
return convertValueToDtableLongTextValue(item);
|
|
150
|
+
});
|
|
151
|
+
}
|
|
152
|
+
} else {
|
|
153
|
+
if (result_type === FORMULA_RESULT_TYPE.DATE) {
|
|
154
|
+
value = value.replace('T', ' ').replace('Z', '');
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
if (result_type === FORMULA_RESULT_TYPE.ARRAY) {
|
|
159
|
+
return this.renderOtherColumnFormatter();
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
if (typeof value === 'object') {
|
|
163
|
+
return null;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
var formattedValue = getFormulaDisplayString(value, data, {
|
|
167
|
+
collaborators: collaborators
|
|
168
|
+
});
|
|
169
|
+
var className = "dtable-ui cell-formatter-container formula-formatter ".concat(containerClassName, "}");
|
|
170
|
+
|
|
171
|
+
if (result_type === FORMULA_RESULT_TYPE.NUMBER) {
|
|
172
|
+
className = className + ' text-right';
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
return this.renderBorder( /*#__PURE__*/React.createElement("div", {
|
|
176
|
+
className: className,
|
|
177
|
+
title: formattedValue,
|
|
178
|
+
"aria-label": formattedValue
|
|
179
|
+
}, formattedValue));
|
|
180
|
+
}
|
|
181
|
+
}]);
|
|
182
|
+
|
|
183
|
+
return RowExpandFormulaFormatter;
|
|
184
|
+
}(React.Component);
|
|
185
|
+
|
|
186
|
+
export { RowExpandFormulaFormatter as default };
|
|
@@ -7,7 +7,7 @@ import React, { Component } from 'react';
|
|
|
7
7
|
import { CellType } from '../constants';
|
|
8
8
|
import { MultipleSelectFormatter, DateFormatter, CTimeFormatter, MTimeFormatter } from '../index';
|
|
9
9
|
import CollaboratorItemFormatter from './collaborator-item-formatter';
|
|
10
|
-
import { getFormulaArrayValue,
|
|
10
|
+
import { getFormulaArrayValue, isArrayFormatColumn } from './utils';
|
|
11
11
|
import { getCellDisplayValue } from './value-display-utils';
|
|
12
12
|
import './index.css';
|
|
13
13
|
|
|
@@ -45,7 +45,7 @@ var RowExpandLinkFormatter = /*#__PURE__*/function (_Component) {
|
|
|
45
45
|
|
|
46
46
|
var displayColumnType = displayColumn.type,
|
|
47
47
|
displayColumnData = displayColumn.data;
|
|
48
|
-
var cellValue = getFormulaArrayValue(value, !
|
|
48
|
+
var cellValue = getFormulaArrayValue(value, !isArrayFormatColumn(displayColumnType));
|
|
49
49
|
|
|
50
50
|
if (!Array.isArray(cellValue) || cellValue.length === 0) {
|
|
51
51
|
return props.renderEmpty();
|
|
@@ -53,6 +53,6 @@ export var getTwoDimensionArrayValue = function getTwoDimensionArrayValue(value)
|
|
|
53
53
|
});
|
|
54
54
|
});
|
|
55
55
|
};
|
|
56
|
-
export function
|
|
56
|
+
export function isArrayFormatColumn(columnType) {
|
|
57
57
|
return [CellType.IMAGE, CellType.FILE, CellType.MULTIPLE_SELECT, CellType.COLLABORATOR].includes(columnType);
|
|
58
58
|
}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
2
|
+
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
3
|
+
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
4
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import classnames from 'classnames';
|
|
7
|
+
import './index.css';
|
|
8
|
+
|
|
9
|
+
var RateExpendRateFormatter = /*#__PURE__*/function (_React$Component) {
|
|
10
|
+
_inherits(RateExpendRateFormatter, _React$Component);
|
|
11
|
+
|
|
12
|
+
var _super = _createSuper(RateExpendRateFormatter);
|
|
13
|
+
|
|
14
|
+
function RateExpendRateFormatter() {
|
|
15
|
+
var _this;
|
|
16
|
+
|
|
17
|
+
_classCallCheck(this, RateExpendRateFormatter);
|
|
18
|
+
|
|
19
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
20
|
+
args[_key] = arguments[_key];
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
24
|
+
|
|
25
|
+
_this.getRateList = function () {
|
|
26
|
+
var _this$props = _this.props,
|
|
27
|
+
data = _this$props.data,
|
|
28
|
+
value = _this$props.value;
|
|
29
|
+
|
|
30
|
+
var _ref = data || {},
|
|
31
|
+
_ref$rate_max_number = _ref.rate_max_number,
|
|
32
|
+
rate_max_number = _ref$rate_max_number === void 0 ? 5 : _ref$rate_max_number,
|
|
33
|
+
_ref$rate_style_color = _ref.rate_style_color,
|
|
34
|
+
rate_style_color = _ref$rate_style_color === void 0 ? '#e5e5e5' : _ref$rate_style_color,
|
|
35
|
+
_ref$rate_style_type = _ref.rate_style_type,
|
|
36
|
+
rate_style_type = _ref$rate_style_type === void 0 ? 'dtable-icon-rate' : _ref$rate_style_type;
|
|
37
|
+
|
|
38
|
+
var rateList = [];
|
|
39
|
+
|
|
40
|
+
for (var i = 0; i < rate_max_number; i++) {
|
|
41
|
+
var style = {
|
|
42
|
+
color: value >= i + 1 ? rate_style_color : '#e5e5e5'
|
|
43
|
+
};
|
|
44
|
+
rateList.push( /*#__PURE__*/React.createElement("i", {
|
|
45
|
+
key: "dtable-ui-component-rate-".concat(i),
|
|
46
|
+
className: "dtable-font ".concat(rate_style_type),
|
|
47
|
+
style: style
|
|
48
|
+
}));
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
return rateList;
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
return _this;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
_createClass(RateExpendRateFormatter, [{
|
|
58
|
+
key: "render",
|
|
59
|
+
value: function render() {
|
|
60
|
+
var containerClassName = this.props.containerClassName;
|
|
61
|
+
var className = classnames('dtable-ui cell-formatter-container rate-formatter', containerClassName);
|
|
62
|
+
var rateList = this.getRateList();
|
|
63
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
64
|
+
className: className
|
|
65
|
+
}, rateList);
|
|
66
|
+
}
|
|
67
|
+
}]);
|
|
68
|
+
|
|
69
|
+
return RateExpendRateFormatter;
|
|
70
|
+
}(React.Component);
|
|
71
|
+
|
|
72
|
+
RateExpendRateFormatter.defaultProps = {
|
|
73
|
+
value: '',
|
|
74
|
+
containerClassName: ''
|
|
75
|
+
};
|
|
76
|
+
export default RateExpendRateFormatter;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import url('../css/cell-formatter.css');
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
2
|
+
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
3
|
+
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
4
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import classnames from 'classnames';
|
|
7
|
+
import toaster from '../toaster';
|
|
8
|
+
import { isValidUrl, getTrimmedString } from '../utils/editor-utils';
|
|
9
|
+
import './index.css';
|
|
10
|
+
|
|
11
|
+
var UrlFormatter = /*#__PURE__*/function (_React$Component) {
|
|
12
|
+
_inherits(UrlFormatter, _React$Component);
|
|
13
|
+
|
|
14
|
+
var _super = _createSuper(UrlFormatter);
|
|
15
|
+
|
|
16
|
+
function UrlFormatter() {
|
|
17
|
+
var _this;
|
|
18
|
+
|
|
19
|
+
_classCallCheck(this, UrlFormatter);
|
|
20
|
+
|
|
21
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
22
|
+
args[_key] = arguments[_key];
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
26
|
+
|
|
27
|
+
_this.onOpenUrlLink = function () {
|
|
28
|
+
var value = _this.props.value;
|
|
29
|
+
var url = getTrimmedString(value);
|
|
30
|
+
var validUrl = isValidUrl(url) ? url : "http://".concat(url);
|
|
31
|
+
|
|
32
|
+
try {
|
|
33
|
+
var a = document.createElement('a');
|
|
34
|
+
document.body.appendChild(a);
|
|
35
|
+
a.href = validUrl;
|
|
36
|
+
a.target = '_blank';
|
|
37
|
+
a.rel = 'noopener noreferrer';
|
|
38
|
+
a.click();
|
|
39
|
+
document.body.removeChild(a);
|
|
40
|
+
} catch (_unused) {
|
|
41
|
+
toaster.danger('The url is invalid');
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
return _this;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
_createClass(UrlFormatter, [{
|
|
49
|
+
key: "render",
|
|
50
|
+
value: function render() {
|
|
51
|
+
var _this$props = this.props,
|
|
52
|
+
containerClassName = _this$props.containerClassName,
|
|
53
|
+
value = _this$props.value;
|
|
54
|
+
var classname = classnames('dtable-ui cell-formatter-container url-formatter', containerClassName);
|
|
55
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
56
|
+
className: classname
|
|
57
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
58
|
+
className: "url-formatter-value text-truncate"
|
|
59
|
+
}, value), getTrimmedString(value) && /*#__PURE__*/React.createElement("span", {
|
|
60
|
+
className: "dtable-font dtable-icon-url row-expand-jump-link",
|
|
61
|
+
onClick: this.onOpenUrlLink
|
|
62
|
+
}));
|
|
63
|
+
}
|
|
64
|
+
}]);
|
|
65
|
+
|
|
66
|
+
return UrlFormatter;
|
|
67
|
+
}(React.Component);
|
|
68
|
+
|
|
69
|
+
export default UrlFormatter;
|
package/lib/constants/index.js
CHANGED
|
@@ -17,6 +17,6 @@ var DATE_TYPES = {
|
|
|
17
17
|
'YYYY-MM-DD HH:mm': 'YYYY-MM-DD HH:mm'
|
|
18
18
|
};
|
|
19
19
|
var SIMPLE_CELL_COLUMNS = [CellType.TEXT, CellType.NUMBER, CellType.DATE, CellType.CTIME, CellType.MTIME, CellType.AUTO_NUMBER, CellType.URL, CellType.EMAIL, CellType.DURATION, CellType.CHECKBOX, CellType.RATE];
|
|
20
|
-
var
|
|
20
|
+
var ARRAY_FORMAT_COLUMNS = [CellType.IMAGE, CellType.FILE, CellType.MULTIPLE_SELECT, CellType.COLLABORATOR];
|
|
21
21
|
var SIMPLE_CELL_FORMULA_RESULTS = [FORMULA_RESULT_TYPE.NUMBER, FORMULA_RESULT_TYPE.STRING, FORMULA_RESULT_TYPE.DATE, FORMULA_RESULT_TYPE.BOOL];
|
|
22
|
-
export { CellType, NUMBER_TYPES, DATE_TYPES, FORMULA_RESULT_TYPE, SIMPLE_CELL_COLUMNS,
|
|
22
|
+
export { CellType, NUMBER_TYPES, DATE_TYPES, FORMULA_RESULT_TYPE, SIMPLE_CELL_COLUMNS, ARRAY_FORMAT_COLUMNS, SIMPLE_CELL_FORMULA_RESULTS };
|
package/lib/data/dtable-value.js
CHANGED
package/lib/index.js
CHANGED
|
@@ -37,6 +37,10 @@ export { default as SimpleLongTextFormatter } from './SimpleLongTextFormatter';
|
|
|
37
37
|
export { default as RowExpandFileFormatter } from './RowExpandFileFormatter';
|
|
38
38
|
export { default as RowExpandImageFormatter } from './RowExpandImageFormatter';
|
|
39
39
|
export { default as RowExpandLinkFormatter } from './RowExpandLinkFormatter';
|
|
40
|
+
export { default as RowExpandRateFormatter } from './RowExpandRateFormatter';
|
|
41
|
+
export { default as RowExpandEmailFormatter } from './RowExpandEmailFormatter';
|
|
42
|
+
export { default as RowExpandUrlFormatter } from './RowExpandUrlFormatter';
|
|
43
|
+
export { default as RowExpandFormulaFormatter } from './RowExpandFormulaFormatter';
|
|
40
44
|
export { default as RowExpandFormatter } from './RowExpandFormatter'; // editor
|
|
41
45
|
|
|
42
46
|
export { default as TextEditor } from './TextEditor';
|
|
@@ -68,4 +68,11 @@ export var getSelectOptionItem = function getSelectOptionItem(options, optionId)
|
|
|
68
68
|
return options.find(function (option) {
|
|
69
69
|
return option.id === optionId;
|
|
70
70
|
});
|
|
71
|
+
};
|
|
72
|
+
export var isValidUrl = function isValidUrl(url) {
|
|
73
|
+
var reg = /^(([-a-zA-Z0-9+.]+):\/\/)[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/;
|
|
74
|
+
return reg.test(url);
|
|
75
|
+
};
|
|
76
|
+
export var getTrimmedString = function getTrimmedString(value) {
|
|
77
|
+
return typeof value === 'string' ? value.trim() : '';
|
|
71
78
|
};
|