dtable-ui-component 4.3.6 → 4.3.8
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/AutoNumberFormatter/index.js +11 -24
- package/lib/ButtonFormatter/index.js +29 -45
- package/lib/CTimeFormatter/index.js +17 -32
- package/lib/CheckboxEditor/index.js +42 -49
- package/lib/CheckboxFormatter/index.js +17 -30
- package/lib/CollaboratorEditor/index.js +118 -135
- package/lib/CollaboratorEditor/mb-collaborator-editor-popover/index.js +90 -99
- package/lib/CollaboratorEditor/pc-collaborator-editor-popover/index.js +61 -69
- package/lib/CollaboratorFormatter/index.js +26 -42
- package/lib/CollaboratorItem/index.js +31 -44
- package/lib/CreatorFormatter/index.js +24 -40
- package/lib/DTableCustomizeCollaboratorSelect/index.js +80 -99
- package/lib/DTableCustomizeCollaboratorSelect/utils.js +12 -13
- package/lib/DTableCustomizeSelect/index.css +22 -59
- package/lib/DTableCustomizeSelect/index.js +99 -95
- package/lib/DTablePopover/index.js +52 -71
- package/lib/DTablePopover/utils.js +1 -1
- package/lib/DTableRadio/index.js +9 -7
- package/lib/DTableSearchInput/index.js +89 -99
- package/lib/DTableSearchInput/utils.js +2 -2
- package/lib/DTableSelect/dtable-select-label.js +5 -3
- package/lib/DTableSelect/index.js +50 -64
- package/lib/DTableSelect/utils.js +36 -41
- package/lib/DTableSwitch/index.js +7 -5
- package/lib/DateEditor/index.js +88 -94
- package/lib/DateEditor/mb-date-editor-popover/index.js +136 -134
- package/lib/DateEditor/pc-date-editor-popover.js +70 -77
- package/lib/DateFormatter/index.js +15 -28
- package/lib/DepartmentSingleSelectFormatter/index.js +9 -9
- package/lib/DigitalSignFormatter/index.js +55 -65
- package/lib/DigitalSignFormatter/utils.js +9 -8
- package/lib/DurationFormatter/index.js +14 -27
- package/lib/EditEditorButton/index.js +10 -22
- package/lib/EmailFormatter/index.js +11 -24
- package/lib/FieldDisplaySetting/field-item.js +18 -20
- package/lib/FieldDisplaySetting/index.js +41 -43
- package/lib/FileEditor/index.js +18 -29
- package/lib/FileFormatter/index.js +29 -43
- package/lib/FileItemFormatter/index.js +17 -32
- package/lib/FileItemFormatter/utils.js +5 -5
- package/lib/FileUploader/index.js +20 -33
- package/lib/FormulaFormatter/cell-value-validator.js +23 -8
- package/lib/FormulaFormatter/index.js +77 -83
- package/lib/FormulaFormatter/utils.js +27 -21
- package/lib/GeolocationFormatter/index.js +19 -32
- package/lib/HtmlLongTextFormatter/index.js +43 -52
- package/lib/HtmlLongTextFormatter/markdown2html.js +2 -2
- package/lib/HtmlLongTextFormatter/unified/index.js +1 -1
- package/lib/HtmlLongTextFormatter/vfile/core.js +10 -10
- package/lib/ImageFormatter/images-lazy-load.js +71 -79
- package/lib/ImageFormatter/index.js +86 -97
- package/lib/ImageFormatter/utils.js +1 -1
- package/lib/ImagePreviewerLightbox/index.js +20 -18
- package/lib/ImagePreviewerLightbox/utils.js +3 -3
- package/lib/LastModifierFormatter/index.js +24 -40
- package/lib/LinkEditor/index.js +163 -167
- package/lib/LinkEditor/link-editor-option.js +41 -56
- package/lib/LinkEditor/mb-link-editor-popover/index.js +90 -99
- package/lib/LinkEditor/pc-link-editor-popover/index.js +63 -71
- package/lib/LinkFormatter/index.js +75 -77
- package/lib/LongTextFormatter/index.js +5 -3
- package/lib/MBEditorHeader/index.js +25 -38
- package/lib/MTimeFormatter/index.js +17 -32
- package/lib/ModalPortal/index.js +15 -32
- package/lib/MultipleSelectEditor/index.js +118 -136
- package/lib/MultipleSelectFormatter/index.js +24 -40
- package/lib/NotificationPopover/index.js +68 -95
- package/lib/NumberEditor/index.js +75 -82
- package/lib/NumberFormatter/index.js +15 -28
- package/lib/RateFormatter/index.js +29 -45
- package/lib/RoleStatusEditor/index.js +20 -22
- package/lib/RowExpandEmailFormatter/index.js +24 -37
- package/lib/RowExpandFileFormatter/index.js +28 -42
- package/lib/RowExpandFileFormatter/row-expand-file-item-formatter.js +66 -82
- package/lib/RowExpandFormatter/index.js +92 -96
- package/lib/RowExpandFormulaFormatter/index.js +85 -91
- package/lib/RowExpandImageFormatter/index.js +65 -82
- package/lib/RowExpandImageFormatter/row-expand-image-item-formatter.js +71 -84
- package/lib/RowExpandImageFormatter/utils.js +1 -1
- package/lib/RowExpandLinkFormatter/collaborator-item-formatter.js +54 -68
- package/lib/RowExpandLinkFormatter/index.js +131 -137
- package/lib/RowExpandLinkFormatter/utils.js +23 -17
- package/lib/RowExpandLinkFormatter/value-display-utils.js +9 -7
- package/lib/RowExpandRateFormatter/index.js +27 -42
- package/lib/RowExpandUrlFormatter/index.js +27 -40
- package/lib/SelectItem/index.js +17 -33
- package/lib/SelectOptionGroup/index.css +103 -0
- package/lib/SelectOptionGroup/index.js +157 -135
- package/lib/SelectOptionGroup/option.js +31 -38
- package/lib/SimpleLongTextFormatter/index.js +55 -67
- package/lib/SimpleLongTextFormatter/normalize-long-text-value.js +23 -22
- package/lib/SimpleLongTextFormatter/widgets/LongTextPreview.js +42 -57
- package/lib/SimpleLongTextFormatter/widgets/dtable-markdown-viewer.js +31 -46
- package/lib/SingleSelectEditor/index.js +108 -119
- package/lib/SingleSelectFormatter/index.js +21 -37
- package/lib/TextEditor/index.js +45 -51
- package/lib/TextFormatter/index.js +17 -32
- package/lib/UrlFormatter/index.js +11 -24
- package/lib/cellFormatterFactory/index.js +8 -17
- package/lib/common/ClickOutside.js +28 -0
- package/lib/common/delete-tip.js +40 -65
- package/lib/common/modal-portal.js +15 -33
- package/lib/constants/index.js +5 -5
- package/lib/data/dtable-value.js +4 -4
- package/lib/formatterConfig/base-formatter-config.js +24 -3
- package/lib/formatterConfig/index.js +5 -4
- package/lib/lang/index.js +6 -6
- package/lib/locals/de.js +1 -1
- package/lib/locals/en.js +1 -1
- package/lib/locals/fr.js +1 -1
- package/lib/locals/zh-CN.js +1 -1
- package/lib/select-editor/mb-select-editor-popover/index.js +126 -137
- package/lib/select-editor/pc-select-editor-popover/index.js +75 -83
- package/lib/select-editor/select-editor-option.js +41 -56
- package/lib/toaster/alert.js +73 -88
- package/lib/toaster/index.js +1 -1
- package/lib/toaster/toast.js +75 -102
- package/lib/toaster/toastManager.js +55 -91
- package/lib/toaster/toaster.js +58 -57
- package/lib/utils/editor-utils.js +17 -19
- package/lib/utils/utils.js +14 -14
- package/package.json +4 -4
|
@@ -1,31 +1,18 @@
|
|
|
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
1
|
import React from 'react';
|
|
6
2
|
import classnames from 'classnames';
|
|
7
3
|
import './index.css';
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
4
|
+
class AutoNumberFormatter extends React.Component {
|
|
5
|
+
render() {
|
|
6
|
+
const {
|
|
7
|
+
containerClassName,
|
|
8
|
+
value
|
|
9
|
+
} = this.props;
|
|
10
|
+
let classname = classnames('dtable-ui cell-formatter-container auto-number-formatter', containerClassName);
|
|
11
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
12
|
+
className: classname
|
|
13
|
+
}, value);
|
|
14
14
|
}
|
|
15
|
-
|
|
16
|
-
key: "render",
|
|
17
|
-
value: function render() {
|
|
18
|
-
var _this$props = this.props,
|
|
19
|
-
containerClassName = _this$props.containerClassName,
|
|
20
|
-
value = _this$props.value;
|
|
21
|
-
var classname = classnames('dtable-ui cell-formatter-container auto-number-formatter', containerClassName);
|
|
22
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
23
|
-
className: classname
|
|
24
|
-
}, value);
|
|
25
|
-
}
|
|
26
|
-
}]);
|
|
27
|
-
return AutoNumberFormatter;
|
|
28
|
-
}(React.Component);
|
|
15
|
+
}
|
|
29
16
|
AutoNumberFormatter.defaultProps = {
|
|
30
17
|
value: ''
|
|
31
18
|
};
|
|
@@ -1,53 +1,37 @@
|
|
|
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
1
|
import React from 'react';
|
|
6
2
|
import classnames from 'classnames';
|
|
7
3
|
import { SELECT_OPTION_COLORS } from 'dtable-utils';
|
|
8
4
|
import './index.css';
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
17
|
-
args[_key] = arguments[_key];
|
|
18
|
-
}
|
|
19
|
-
_this = _super.call.apply(_super, [this].concat(args));
|
|
20
|
-
_this.handleClick = function () {
|
|
21
|
-
if (_this.props.onClickButton) {
|
|
22
|
-
_this.props.onClickButton(_this.props.data);
|
|
5
|
+
const WHITE = '#FFFFFF';
|
|
6
|
+
class ButtonFormatter extends React.Component {
|
|
7
|
+
constructor() {
|
|
8
|
+
super(...arguments);
|
|
9
|
+
this.handleClick = () => {
|
|
10
|
+
if (this.props.onClickButton) {
|
|
11
|
+
this.props.onClickButton(this.props.data);
|
|
23
12
|
}
|
|
24
13
|
};
|
|
25
|
-
return _this;
|
|
26
14
|
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
}
|
|
50
|
-
}]);
|
|
51
|
-
return ButtonFormatter;
|
|
52
|
-
}(React.Component);
|
|
15
|
+
render() {
|
|
16
|
+
let {
|
|
17
|
+
data,
|
|
18
|
+
containerClassName
|
|
19
|
+
} = this.props;
|
|
20
|
+
const {
|
|
21
|
+
button_color,
|
|
22
|
+
button_name
|
|
23
|
+
} = data || {};
|
|
24
|
+
const colorObj = SELECT_OPTION_COLORS.find(item => item.COLOR === button_color) || SELECT_OPTION_COLORS[0];
|
|
25
|
+
const btnStyle = {
|
|
26
|
+
backgroundColor: colorObj.COLOR,
|
|
27
|
+
borderColor: colorObj.BORDER_COLOR,
|
|
28
|
+
color: colorObj.TEXT_COLOR === WHITE ? WHITE : '#666666'
|
|
29
|
+
};
|
|
30
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
|
|
31
|
+
className: classnames('dtable-ui cell-formatter-container button-formatter', containerClassName),
|
|
32
|
+
style: btnStyle,
|
|
33
|
+
onClick: this.handleClick
|
|
34
|
+
}, button_name));
|
|
35
|
+
}
|
|
36
|
+
}
|
|
53
37
|
export default ButtonFormatter;
|
|
@@ -1,43 +1,28 @@
|
|
|
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
1
|
import React from 'react';
|
|
6
2
|
import classnames from 'classnames';
|
|
7
3
|
import dayjs from 'dayjs';
|
|
8
4
|
import './index.css';
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
var _this;
|
|
14
|
-
_classCallCheck(this, CTimeFormatter);
|
|
15
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
16
|
-
args[_key] = arguments[_key];
|
|
17
|
-
}
|
|
18
|
-
_this = _super.call.apply(_super, [this].concat(args));
|
|
19
|
-
_this.formatDate = function (date) {
|
|
5
|
+
class CTimeFormatter extends React.Component {
|
|
6
|
+
constructor() {
|
|
7
|
+
super(...arguments);
|
|
8
|
+
this.formatDate = date => {
|
|
20
9
|
return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
|
|
21
10
|
};
|
|
22
|
-
return _this;
|
|
23
11
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
date = this.formatDate(date);
|
|
33
|
-
}
|
|
34
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
35
|
-
className: classname
|
|
36
|
-
}, date);
|
|
12
|
+
render() {
|
|
13
|
+
let {
|
|
14
|
+
value: date,
|
|
15
|
+
containerClassName
|
|
16
|
+
} = this.props;
|
|
17
|
+
let classname = classnames('dtable-ui cell-formatter-container ctime-formatter', containerClassName);
|
|
18
|
+
if (date !== '') {
|
|
19
|
+
date = this.formatDate(date);
|
|
37
20
|
}
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}
|
|
21
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
22
|
+
className: classname
|
|
23
|
+
}, date);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
41
26
|
CTimeFormatter.defaultProps = {
|
|
42
27
|
value: '',
|
|
43
28
|
containerClassName: ''
|
|
@@ -1,62 +1,55 @@
|
|
|
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
1
|
import React from 'react';
|
|
6
2
|
import './index.css';
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
updated[column.name] = _this.state.value;
|
|
18
|
-
_this.props.onCommit(updated);
|
|
3
|
+
class CheckboxEditor extends React.Component {
|
|
4
|
+
constructor(props) {
|
|
5
|
+
super(props);
|
|
6
|
+
this.onCommit = () => {
|
|
7
|
+
let updated = {};
|
|
8
|
+
let {
|
|
9
|
+
column
|
|
10
|
+
} = this.props;
|
|
11
|
+
updated[column.name] = this.state.value;
|
|
12
|
+
this.props.onCommit(updated);
|
|
19
13
|
};
|
|
20
|
-
|
|
21
|
-
if (
|
|
14
|
+
this.onChange = event => {
|
|
15
|
+
if (this.props.isReadOnly) {
|
|
22
16
|
return;
|
|
23
17
|
}
|
|
24
|
-
|
|
25
|
-
value: !
|
|
26
|
-
},
|
|
27
|
-
|
|
18
|
+
this.setState({
|
|
19
|
+
value: !this.state.value
|
|
20
|
+
}, () => {
|
|
21
|
+
this.onCommit();
|
|
28
22
|
});
|
|
29
23
|
};
|
|
30
|
-
|
|
24
|
+
this.state = {
|
|
31
25
|
value: props.value ? props.value : false
|
|
32
26
|
};
|
|
33
|
-
return _this;
|
|
34
27
|
}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
}
|
|
28
|
+
render() {
|
|
29
|
+
const {
|
|
30
|
+
value
|
|
31
|
+
} = this.state;
|
|
32
|
+
const {
|
|
33
|
+
isReadOnly
|
|
34
|
+
} = this.props;
|
|
35
|
+
let style = {
|
|
36
|
+
cursor: isReadOnly ? 'default' : 'pointer'
|
|
37
|
+
};
|
|
38
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
39
|
+
className: "dtable-ui-checkbox-editor",
|
|
40
|
+
style: style
|
|
41
|
+
}, /*#__PURE__*/React.createElement("input", {
|
|
42
|
+
type: "checkbox",
|
|
43
|
+
className: "raw-checkbox",
|
|
44
|
+
checked: value,
|
|
45
|
+
onChange: this.onChange
|
|
46
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
47
|
+
className: "shown-checkbox"
|
|
48
|
+
}, value && /*#__PURE__*/React.createElement("span", {
|
|
49
|
+
className: "dtable-font dtable-icon-check-mark"
|
|
50
|
+
})));
|
|
51
|
+
}
|
|
52
|
+
}
|
|
60
53
|
CheckboxEditor.defaultProps = {
|
|
61
54
|
isReadOnly: false,
|
|
62
55
|
value: false
|
|
@@ -1,37 +1,24 @@
|
|
|
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
1
|
import React from 'react';
|
|
6
2
|
import classnames from 'classnames';
|
|
7
3
|
import './index.css';
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
var classname = classnames('dtable-ui cell-formatter-container checkbox-formatter d-flex align-items-center justify-content-center', containerClassName);
|
|
23
|
-
if (value) {
|
|
24
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
25
|
-
className: classname
|
|
26
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
27
|
-
className: "dtable-font dtable-icon-check-mark checkbox-checked-mark"
|
|
28
|
-
}));
|
|
29
|
-
}
|
|
30
|
-
return null;
|
|
4
|
+
class CheckboxFormatter extends React.PureComponent {
|
|
5
|
+
render() {
|
|
6
|
+
let {
|
|
7
|
+
value,
|
|
8
|
+
containerClassName
|
|
9
|
+
} = this.props;
|
|
10
|
+
value = value === true ? true : false;
|
|
11
|
+
let classname = classnames('dtable-ui cell-formatter-container checkbox-formatter d-flex align-items-center justify-content-center', containerClassName);
|
|
12
|
+
if (value) {
|
|
13
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
14
|
+
className: classname
|
|
15
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
16
|
+
className: "dtable-font dtable-icon-check-mark checkbox-checked-mark"
|
|
17
|
+
}));
|
|
31
18
|
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}
|
|
19
|
+
return null;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
35
22
|
CheckboxFormatter.defaultProps = {
|
|
36
23
|
value: false
|
|
37
24
|
};
|