dtable-ui-component 0.3.7-beta.1 → 0.3.7-beta.2
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 +3 -1
- package/lib/CollaboratorItem/index.css +1 -1
- package/lib/FormulaFormatter/index.css +4 -0
- package/lib/RateFormatter/index.js +0 -3
- package/lib/RowExpandEmailFormatter/index.js +2 -6
- package/lib/RowExpandFormatter/index.css +4 -1
- package/lib/RowExpandFormatter/index.js +8 -2
- package/lib/RowExpandRateFormatter/index.js +0 -3
- package/lib/RowExpandUrlFormatter/index.js +6 -16
- package/lib/utils/editor-utils.js +7 -0
- package/package.json +1 -1
|
@@ -6,6 +6,7 @@ import React from 'react';
|
|
|
6
6
|
import classnames from 'classnames';
|
|
7
7
|
import { SELECT_OPTION_COLORS } from 'dtable-utils';
|
|
8
8
|
import './index.css';
|
|
9
|
+
var WHITE = '#FFFFFF';
|
|
9
10
|
|
|
10
11
|
var ButtonFormatter = /*#__PURE__*/function (_React$Component) {
|
|
11
12
|
_inherits(ButtonFormatter, _React$Component);
|
|
@@ -48,7 +49,8 @@ var ButtonFormatter = /*#__PURE__*/function (_React$Component) {
|
|
|
48
49
|
}) || SELECT_OPTION_COLORS[0];
|
|
49
50
|
var btnStyle = {
|
|
50
51
|
backgroundColor: colorObj.COLOR,
|
|
51
|
-
borderColor: colorObj.BORDER_COLOR
|
|
52
|
+
borderColor: colorObj.BORDER_COLOR,
|
|
53
|
+
color: colorObj.TEXT_COLOR === WHITE ? WHITE : '#666666'
|
|
52
54
|
};
|
|
53
55
|
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
|
|
54
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;
|
|
@@ -4,6 +4,7 @@ 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 { getTrimmedString } from '../utils/editor-utils';
|
|
7
8
|
import './index.css';
|
|
8
9
|
|
|
9
10
|
var RowExpandEmailFormatter = /*#__PURE__*/function (_React$Component) {
|
|
@@ -22,11 +23,6 @@ var RowExpandEmailFormatter = /*#__PURE__*/function (_React$Component) {
|
|
|
22
23
|
|
|
23
24
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
24
25
|
|
|
25
|
-
_this.getTrimmedString = function () {
|
|
26
|
-
var value = _this.props.value;
|
|
27
|
-
return typeof value === 'string' ? value.trim() : '';
|
|
28
|
-
};
|
|
29
|
-
|
|
30
26
|
_this.onOpenEmailLink = function () {
|
|
31
27
|
var value = _this.props.value;
|
|
32
28
|
var newValue = value.trim();
|
|
@@ -47,7 +43,7 @@ var RowExpandEmailFormatter = /*#__PURE__*/function (_React$Component) {
|
|
|
47
43
|
className: classname
|
|
48
44
|
}, /*#__PURE__*/React.createElement("span", {
|
|
49
45
|
className: "email-formatter-value text-truncate"
|
|
50
|
-
}, value),
|
|
46
|
+
}, value), getTrimmedString(value) && /*#__PURE__*/React.createElement("span", {
|
|
51
47
|
className: "dtable-font dtable-icon-email row-expand-jump-link",
|
|
52
48
|
onClick: this.onOpenEmailLink
|
|
53
49
|
}));
|
|
@@ -43,6 +43,9 @@
|
|
|
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;
|
|
46
49
|
}
|
|
47
50
|
|
|
48
51
|
.dtable-ui.dtable-row-expand-formatter .checkbox-formatter-container {
|
|
@@ -63,7 +66,7 @@
|
|
|
63
66
|
}
|
|
64
67
|
|
|
65
68
|
.dtable-ui.dtable-row-expand-formatter .geolocation-formatter-container {
|
|
66
|
-
|
|
69
|
+
margin-top: 0.5rem;
|
|
67
70
|
display: flex;
|
|
68
71
|
align-items: center;
|
|
69
72
|
}
|
|
@@ -179,7 +179,10 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
|
|
|
179
179
|
}
|
|
180
180
|
|
|
181
181
|
return /*#__PURE__*/React.createElement("div", {
|
|
182
|
-
className: "form-control d-flex align-items-center
|
|
182
|
+
className: "form-control d-flex align-items-center",
|
|
183
|
+
style: {
|
|
184
|
+
width: 320
|
|
185
|
+
}
|
|
183
186
|
}, /*#__PURE__*/React.createElement(CTimeFormatter, {
|
|
184
187
|
value: row._ctime,
|
|
185
188
|
containerClassName: containerClassName
|
|
@@ -193,7 +196,10 @@ var EditorFormatter = /*#__PURE__*/function (_React$Component) {
|
|
|
193
196
|
}
|
|
194
197
|
|
|
195
198
|
return /*#__PURE__*/React.createElement("div", {
|
|
196
|
-
className: "form-control d-flex align-items-center
|
|
199
|
+
className: "form-control d-flex align-items-center",
|
|
200
|
+
style: {
|
|
201
|
+
width: 320
|
|
202
|
+
}
|
|
197
203
|
}, /*#__PURE__*/React.createElement(MTimeFormatter, {
|
|
198
204
|
value: row._mtime,
|
|
199
205
|
containerClassName: containerClassName
|
|
@@ -4,6 +4,8 @@ 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 toaster from '../toaster';
|
|
8
|
+
import { isValidUrl, getTrimmedString } from '../utils/editor-utils';
|
|
7
9
|
import './index.css';
|
|
8
10
|
|
|
9
11
|
var UrlFormatter = /*#__PURE__*/function (_React$Component) {
|
|
@@ -22,22 +24,10 @@ var UrlFormatter = /*#__PURE__*/function (_React$Component) {
|
|
|
22
24
|
|
|
23
25
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
24
26
|
|
|
25
|
-
_this.isValidUrl = function (url) {
|
|
26
|
-
var reg = /^(([-a-zA-Z0-9+.]+):\/\/)[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/;
|
|
27
|
-
return reg.test(url);
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
_this.getTrimmedString = function () {
|
|
31
|
-
var value = _this.props.value;
|
|
32
|
-
return typeof value === 'string' ? value.trim() : '';
|
|
33
|
-
};
|
|
34
|
-
|
|
35
27
|
_this.onOpenUrlLink = function () {
|
|
36
28
|
var value = _this.props.value;
|
|
37
|
-
|
|
38
|
-
var
|
|
39
|
-
|
|
40
|
-
var validUrl = _this.isValidUrl(url) ? url : "http://".concat(url);
|
|
29
|
+
var url = getTrimmedString(value);
|
|
30
|
+
var validUrl = isValidUrl(url) ? url : "http://".concat(url);
|
|
41
31
|
|
|
42
32
|
try {
|
|
43
33
|
var a = document.createElement('a');
|
|
@@ -48,7 +38,7 @@ var UrlFormatter = /*#__PURE__*/function (_React$Component) {
|
|
|
48
38
|
a.click();
|
|
49
39
|
document.body.removeChild(a);
|
|
50
40
|
} catch (_unused) {
|
|
51
|
-
|
|
41
|
+
toaster.danger('The url is invalid');
|
|
52
42
|
}
|
|
53
43
|
};
|
|
54
44
|
|
|
@@ -66,7 +56,7 @@ var UrlFormatter = /*#__PURE__*/function (_React$Component) {
|
|
|
66
56
|
className: classname
|
|
67
57
|
}, /*#__PURE__*/React.createElement("span", {
|
|
68
58
|
className: "url-formatter-value text-truncate"
|
|
69
|
-
}, value),
|
|
59
|
+
}, value), getTrimmedString(value) && /*#__PURE__*/React.createElement("span", {
|
|
70
60
|
className: "dtable-font dtable-icon-url row-expand-jump-link",
|
|
71
61
|
onClick: this.onOpenUrlLink
|
|
72
62
|
}));
|
|
@@ -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
|
};
|