dtable-ui-component 0.1.75 → 0.1.76
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 +20 -2
- package/lib/AutoNumberFormatter/index.css +1 -0
- package/{es/components/cell-formatter/auto-number-formatter.js → lib/AutoNumberFormatter/index.js} +1 -0
- package/lib/ButtonFormatter/index.css +13 -0
- package/{es/components/cell-formatter/button-formatter.js → lib/ButtonFormatter/index.js} +1 -0
- package/lib/CTimeFormatter/index.css +1 -0
- package/{es/components/cell-formatter/ctime-formatter.js → lib/CTimeFormatter/index.js} +1 -0
- package/lib/CheckboxEditor/index.js +104 -0
- package/lib/CheckboxFormatter/index.css +1 -0
- package/{es/components/cell-formatter/checkbox-formatter.js → lib/CheckboxFormatter/index.js} +1 -0
- package/lib/CollaboratorEditor/index.css +48 -0
- package/lib/CollaboratorEditor/index.js +237 -0
- package/lib/CollaboratorEditor/mb-collaborator-editor-popover/index.css +86 -0
- package/lib/CollaboratorEditor/mb-collaborator-editor-popover/index.js +178 -0
- package/lib/CollaboratorEditor/pc-collaborator-editor-popover/index.css +1 -0
- package/lib/CollaboratorEditor/pc-collaborator-editor-popover/index.js +110 -0
- package/lib/CollaboratorFormatter/index.css +1 -0
- package/{es/components/cell-formatter/collaborator-formatter.js → lib/CollaboratorFormatter/index.js} +3 -2
- package/lib/CollaboratorItem/index.css +49 -0
- package/{es/components/common/collaborator-item.js → lib/CollaboratorItem/index.js} +1 -0
- package/lib/CreatorFormatter/index.css +1 -0
- package/{es/components/cell-formatter/creator-formatter.js → lib/CreatorFormatter/index.js} +3 -2
- package/lib/DateEditor/index.css +4 -0
- package/lib/DateEditor/index.js +152 -0
- package/{es/css → lib/DateEditor/mb-date-editor-popover}/custom-rc-calendar.css +0 -0
- package/lib/DateEditor/mb-date-editor-popover/index.css +45 -0
- package/lib/DateEditor/mb-date-editor-popover/index.js +245 -0
- package/lib/DateEditor/pc-date-editor-popover.js +142 -0
- package/lib/DateFormatter/index.css +1 -0
- package/{es/components/cell-formatter/date-formatter.js → lib/DateFormatter/index.js} +2 -1
- package/lib/DurationFormatter/index.css +1 -0
- package/{es/components/cell-formatter/duration-formatter.js → lib/DurationFormatter/index.js} +2 -1
- package/{es/components/common/edit-editor-button.js → lib/EditEditorButton/index.js} +0 -0
- package/lib/EmailFormatter/index.css +5 -0
- package/{es/components/cell-formatter/email-formatter.js → lib/EmailFormatter/index.js} +1 -0
- package/lib/FileEditor/index.js +46 -0
- package/lib/FileEditor/pc-files-addition/index.js +0 -0
- package/lib/FileEditor/pc-files-addition/pc-file-uploaded-item.js +0 -0
- package/lib/FileEditor/pc-files-preview/index.js +0 -0
- package/lib/FileEditor/pc-files-preview/pc-file-item-preview.js +0 -0
- package/lib/FileFormatter/index.css +29 -0
- package/{es/components/cell-formatter/file-formatter.js → lib/FileFormatter/index.js} +2 -1
- package/{es/assets/images → lib/FileItemFormatter/assets}/file/192/excel.png +0 -0
- package/{es/assets/images → lib/FileItemFormatter/assets}/file/192/file.png +0 -0
- package/{es/assets/images → lib/FileItemFormatter/assets}/file/192/music.png +0 -0
- package/{es/assets/images → lib/FileItemFormatter/assets}/file/192/pdf.png +0 -0
- package/{es/assets/images → lib/FileItemFormatter/assets}/file/192/pic.png +0 -0
- package/{es/assets/images → lib/FileItemFormatter/assets}/file/192/ppt.png +0 -0
- package/{es/assets/images → lib/FileItemFormatter/assets}/file/192/txt.png +0 -0
- package/{es/assets/images → lib/FileItemFormatter/assets}/file/192/video.png +0 -0
- package/{es/assets/images → lib/FileItemFormatter/assets}/file/192/word.png +0 -0
- package/{es/assets/images → lib/FileItemFormatter/assets}/file/24/excel.png +0 -0
- package/{es/assets/images → lib/FileItemFormatter/assets}/file/24/file.png +0 -0
- package/{es/assets/images → lib/FileItemFormatter/assets}/file/24/music.png +0 -0
- package/{es/assets/images → lib/FileItemFormatter/assets}/file/24/pdf.png +0 -0
- package/{es/assets/images → lib/FileItemFormatter/assets}/file/24/pic.png +0 -0
- package/{es/assets/images → lib/FileItemFormatter/assets}/file/24/ppt.png +0 -0
- package/{es/assets/images → lib/FileItemFormatter/assets}/file/24/txt.png +0 -0
- package/{es/assets/images → lib/FileItemFormatter/assets}/file/24/video.png +0 -0
- package/{es/assets/images → lib/FileItemFormatter/assets}/file/24/word.png +0 -0
- package/{es/assets/images → lib/FileItemFormatter/assets}/folder/folder-192.png +0 -0
- package/{es/assets/images → lib/FileItemFormatter/assets}/folder/folder-24.png +0 -0
- package/{es/components/cell-formatter/widgets/file-item-formatter.js → lib/FileItemFormatter/index.js} +2 -2
- package/lib/FileItemFormatter/utils.js +72 -0
- package/{es/components/file-uploader → lib/FileUploader}/index.js +0 -0
- package/{es/utils → lib/FormulaFormatter}/cell-value-validator.js +1 -2
- package/lib/FormulaFormatter/index.css +19 -0
- package/{es/components/cell-formatter/formula-formatter.js → lib/FormulaFormatter/index.js} +7 -8
- package/{es/utils/column-utils.js → lib/FormulaFormatter/utils.js} +5 -1
- package/lib/GeolocationFormatter/index.css +1 -0
- package/{es/components/cell-formatter/geolocation-formatter.js → lib/GeolocationFormatter/index.js} +2 -1
- package/lib/HtmlLongTextFormatter/index.css +63 -0
- package/{es/components/cell-formatter/widgets/long-text-formatter/html-long-text-formatter.js → lib/HtmlLongTextFormatter/index.js} +5 -2
- package/{es/utils → lib/HtmlLongTextFormatter}/markdown2html.js +0 -0
- package/{es/utils → lib/HtmlLongTextFormatter}/unified/index.js +1 -0
- package/{es/utils → lib/HtmlLongTextFormatter}/vfile/core.js +1 -0
- package/{es/utils → lib/HtmlLongTextFormatter}/vfile/index.js +0 -0
- package/{es/components/common → lib/ImageFormatter}/images-lazy-load.js +2 -2
- package/lib/ImageFormatter/index.css +34 -0
- package/{es/components/cell-formatter/image-formatter.js → lib/ImageFormatter/index.js} +4 -3
- package/lib/ImageFormatter/utils.js +7 -0
- package/{es/css/image-previewer-ligntbox.css → lib/ImagePreviewerLightbox/index.css} +0 -0
- package/{es/components/cell-formatter/widgets/image-previewer-lightbox.js → lib/ImagePreviewerLightbox/index.js} +3 -3
- package/lib/ImagePreviewerLightbox/utils.js +8 -0
- package/lib/LastModifierFormatter/index.css +1 -0
- package/{es/components/cell-formatter/last-modifier-formatter.js → lib/LastModifierFormatter/index.js} +5 -4
- package/lib/LinkEditor/index.css +9 -0
- package/lib/LinkEditor/index.js +304 -0
- package/{es/components/common → lib/LinkEditor}/link-editor-option.js +0 -0
- package/lib/LinkEditor/mb-link-editor-popover/index.css +85 -0
- package/lib/LinkEditor/mb-link-editor-popover/index.js +171 -0
- package/lib/LinkEditor/pc-link-editor-popover/index.css +63 -0
- package/lib/LinkEditor/pc-link-editor-popover/index.js +115 -0
- package/lib/LinkFormatter/index.css +27 -0
- package/{es/components/cell-formatter/link-formatter.js → lib/LinkFormatter/index.js} +2 -2
- package/{es/css/loading.css → lib/Loading/index.css} +0 -0
- package/{es/components/loading.js → lib/Loading/index.js} +1 -1
- package/{es/components/cell-formatter/long-text-formatter.js → lib/LongTextFormatter/index.js} +4 -6
- package/{es/components/common/mobile/mb-editor-header.js → lib/MBEditorHeader/index.js} +0 -0
- package/lib/MTimeFormatter/index.css +1 -0
- package/{es/components/cell-formatter/mtime-formatter.js → lib/MTimeFormatter/index.js} +1 -0
- package/{es/components/common/modal-portal.js → lib/ModalPortal/index.js} +0 -0
- package/lib/MultipleSelectEditor/index.css +9 -0
- package/lib/MultipleSelectEditor/index.js +236 -0
- package/lib/MultipleSelectFormatter/index.css +1 -0
- package/{es/components/cell-formatter/multiple-select-formatter.js → lib/MultipleSelectFormatter/index.js} +2 -1
- package/lib/NumberEditor/index.js +154 -0
- package/lib/NumberFormatter/index.css +1 -0
- package/{es/components/cell-formatter/number-formatter.js → lib/NumberFormatter/index.js} +2 -1
- package/lib/RateFormatter/index.css +1 -0
- package/{es/components/cell-formatter/rate-formatter.js → lib/RateFormatter/index.js} +1 -0
- package/{es/components/common/select-item.js → lib/SelectItem/index.js} +0 -0
- package/lib/SimpleLongTextFormatter/index.css +63 -0
- package/{es/components/cell-formatter/widgets/long-text-formatter/simple-long-text-formatter.js → lib/SimpleLongTextFormatter/index.js} +5 -2
- package/{es/utils → lib/SimpleLongTextFormatter}/normalize-long-text-value.js +3 -3
- package/lib/SingleSelectEditor/index.css +9 -0
- package/lib/SingleSelectEditor/index.js +201 -0
- package/lib/SingleSelectFormatter/index.css +1 -0
- package/{es/components/cell-formatter/single-select-formatter.js → lib/SingleSelectFormatter/index.js} +2 -1
- package/lib/TextEditor/index.js +122 -0
- package/lib/TextFormatter/index.css +1 -0
- package/{es/components/cell-formatter/text-formatter.js → lib/TextFormatter/index.js} +1 -0
- package/lib/UrlFormatter/index.css +5 -0
- package/{es/components/cell-formatter/url-formatter.js → lib/UrlFormatter/index.js} +1 -0
- package/{es → lib}/assets/images/avatar/default_avatar.png +0 -0
- package/{es/components/cell-factory/cell-formatter-factory.js → lib/cellFormatterFactory/index.js} +3 -3
- package/{es → lib}/constants/cell-types.js +0 -0
- package/lib/constants/index.js +49 -0
- package/lib/css/cell-editor.css +6 -0
- package/lib/css/cell-formatter.css +4 -0
- package/lib/css/mb-cell-editor.css +55 -0
- package/lib/formatterConfig/index.js +31 -0
- package/lib/index.js +43 -0
- package/{es → lib}/lang/index.js +0 -0
- package/{es → lib}/locals/de.js +0 -0
- package/{es → lib}/locals/en.js +0 -0
- package/{es → lib}/locals/fr.js +0 -0
- package/{es → lib}/locals/zh-CN.js +0 -0
- package/lib/select-editor/index.js +4 -0
- package/lib/select-editor/mb-select-editor-popover/index.css +127 -0
- package/lib/select-editor/mb-select-editor-popover/index.js +231 -0
- package/lib/select-editor/pc-select-editor-popover/index.css +72 -0
- package/lib/select-editor/pc-select-editor-popover/index.js +144 -0
- package/{es/components/common → lib/select-editor}/select-editor-option.js +0 -0
- package/{es/components/toast → lib/toaster}/alert.js +0 -0
- package/{es/components/toast → lib/toaster}/index.js +0 -0
- package/{es/components/toast → lib/toaster}/toast.js +0 -0
- package/{es/components/toast → lib/toaster}/toastManager.js +0 -0
- package/{es/components/toast → lib/toaster}/toaster.js +0 -0
- package/lib/utils/editor-utils.js +71 -0
- package/{es → lib}/utils/number-precision.js +1 -0
- package/lib/utils/utils.js +25 -0
- package/{es → lib}/utils/value-format-utils.js +3 -2
- package/package.json +8 -8
- package/es/app.css +0 -20
- package/es/app.js +0 -91
- package/es/components/cell-formatter/formatter-config.js +0 -31
- package/es/components/cell-formatter/index.js +0 -27
- package/es/constants/index.js +0 -48
- package/es/css/cell-editor.css +0 -614
- package/es/css/cell-formatter.css +0 -247
- package/es/index.js +0 -6
- package/es/utils/utils.js +0 -116
|
@@ -0,0 +1,201 @@
|
|
|
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, { Fragment } from 'react';
|
|
6
|
+
import MediaQuery from 'react-responsive';
|
|
7
|
+
import { getLocale } from '../lang';
|
|
8
|
+
import EditEditorButton from '../EditEditorButton';
|
|
9
|
+
import { SelectEditorOption, PCSelectEditorPopover, MBSelectEditorPopover } from '../select-editor';
|
|
10
|
+
import './index.css';
|
|
11
|
+
|
|
12
|
+
var SingleSelectEditor = /*#__PURE__*/function (_React$Component) {
|
|
13
|
+
_inherits(SingleSelectEditor, _React$Component);
|
|
14
|
+
|
|
15
|
+
var _super = _createSuper(SingleSelectEditor);
|
|
16
|
+
|
|
17
|
+
function SingleSelectEditor(props) {
|
|
18
|
+
var _this;
|
|
19
|
+
|
|
20
|
+
_classCallCheck(this, SingleSelectEditor);
|
|
21
|
+
|
|
22
|
+
_this = _super.call(this, props);
|
|
23
|
+
|
|
24
|
+
_this.onDocumentToggle = function (e) {
|
|
25
|
+
if (_this.editorContainer !== e.target && !_this.editorContainer.contains(e.target)) {
|
|
26
|
+
_this.onClosePopover();
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
_this.formatOption = function () {
|
|
31
|
+
var newValue = _this.state.newValue;
|
|
32
|
+
|
|
33
|
+
var option = _this.options.find(function (option) {
|
|
34
|
+
return option.id === newValue;
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
return option;
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
_this.onAddOptionToggle = function (event) {
|
|
41
|
+
event.nativeEvent.stopImmediatePropagation();
|
|
42
|
+
event.stopPropagation();
|
|
43
|
+
|
|
44
|
+
if (_this.props.isReadOnly) {
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
var isPopoverShow = !_this.state.isPopoverShow;
|
|
49
|
+
|
|
50
|
+
if (isPopoverShow) {
|
|
51
|
+
var popoverPosition = _this.caculatePopoverPosition();
|
|
52
|
+
|
|
53
|
+
_this.setState({
|
|
54
|
+
isPopoverShow: isPopoverShow,
|
|
55
|
+
popoverPosition: popoverPosition
|
|
56
|
+
});
|
|
57
|
+
} else {
|
|
58
|
+
_this.setState({
|
|
59
|
+
isPopoverShow: isPopoverShow
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
_this.onCommit = function (newValue) {
|
|
65
|
+
var updated = {};
|
|
66
|
+
var column = _this.props.column;
|
|
67
|
+
updated[column.key] = newValue;
|
|
68
|
+
|
|
69
|
+
_this.props.onCommit(updated);
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
_this.onOptionItemToggle = function (option) {
|
|
73
|
+
var newValue = _this.state.newValue === option.id ? '' : option.id;
|
|
74
|
+
|
|
75
|
+
_this.setState({
|
|
76
|
+
newValue: newValue
|
|
77
|
+
}, function () {
|
|
78
|
+
_this.onCommit(newValue);
|
|
79
|
+
|
|
80
|
+
_this.onClosePopover();
|
|
81
|
+
});
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
_this.caculatePopoverPosition = function () {
|
|
85
|
+
var POPOVER_MAX_HEIGHT = 200;
|
|
86
|
+
var innerHeight = window.innerHeight;
|
|
87
|
+
|
|
88
|
+
var _this$editor$getClien = _this.editor.getClientRects()[0],
|
|
89
|
+
top = _this$editor$getClien.top,
|
|
90
|
+
height = _this$editor$getClien.height;
|
|
91
|
+
|
|
92
|
+
var isBelow = innerHeight - (top + height) > POPOVER_MAX_HEIGHT;
|
|
93
|
+
var position = {
|
|
94
|
+
top: height + 1,
|
|
95
|
+
left: 0
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
if (!isBelow) {
|
|
99
|
+
var bottom = height + 1;
|
|
100
|
+
position = {
|
|
101
|
+
bottom: bottom,
|
|
102
|
+
left: 0
|
|
103
|
+
};
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
return position;
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
_this.onAddNewOption = function (optionName) {
|
|
110
|
+
_this.props.onAddNewOption(optionName);
|
|
111
|
+
|
|
112
|
+
_this.onClosePopover();
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
_this.onClosePopover = function () {
|
|
116
|
+
_this.setState({
|
|
117
|
+
isPopoverShow: false
|
|
118
|
+
});
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
_this.setEditorContainerRef = function (editorContainer) {
|
|
122
|
+
_this.editorContainer = editorContainer;
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
_this.setEditorRef = function (editor) {
|
|
126
|
+
_this.editor = editor;
|
|
127
|
+
};
|
|
128
|
+
|
|
129
|
+
_this.state = {
|
|
130
|
+
newValue: props.value,
|
|
131
|
+
isPopoverShow: false,
|
|
132
|
+
popoverPosition: {}
|
|
133
|
+
};
|
|
134
|
+
var _column = _this.props.column;
|
|
135
|
+
_this.options = _column.data && (_column.data.options || []);
|
|
136
|
+
return _this;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
_createClass(SingleSelectEditor, [{
|
|
140
|
+
key: "componentDidMount",
|
|
141
|
+
value: function componentDidMount() {
|
|
142
|
+
document.addEventListener('click', this.onDocumentToggle);
|
|
143
|
+
}
|
|
144
|
+
}, {
|
|
145
|
+
key: "componentWillUnmount",
|
|
146
|
+
value: function componentWillUnmount() {
|
|
147
|
+
document.removeEventListener('click', this.onDocumentToggle);
|
|
148
|
+
}
|
|
149
|
+
}, {
|
|
150
|
+
key: "render",
|
|
151
|
+
value: function render() {
|
|
152
|
+
var _this$state = this.state,
|
|
153
|
+
isPopoverShow = _this$state.isPopoverShow,
|
|
154
|
+
popoverPosition = _this$state.popoverPosition;
|
|
155
|
+
var option = this.formatOption();
|
|
156
|
+
var options = this.options;
|
|
157
|
+
var selectedOptions = option ? [option] : [];
|
|
158
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
159
|
+
ref: this.setEditorContainerRef,
|
|
160
|
+
className: "cell-editor dtable-ui-single-select-editor"
|
|
161
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
162
|
+
ref: this.setEditorRef,
|
|
163
|
+
className: "dtable-ui-select-editor-container",
|
|
164
|
+
onClick: this.onAddOptionToggle
|
|
165
|
+
}, option ? /*#__PURE__*/React.createElement(SelectEditorOption, {
|
|
166
|
+
option: option
|
|
167
|
+
}) : /*#__PURE__*/React.createElement(EditEditorButton, {
|
|
168
|
+
text: getLocale('Add_an_option')
|
|
169
|
+
})), isPopoverShow && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MediaQuery, {
|
|
170
|
+
query: "(min-width: 768px)"
|
|
171
|
+
}, /*#__PURE__*/React.createElement(PCSelectEditorPopover, {
|
|
172
|
+
popoverPosition: popoverPosition,
|
|
173
|
+
options: options,
|
|
174
|
+
selectedOptions: selectedOptions,
|
|
175
|
+
onOptionItemToggle: this.onOptionItemToggle,
|
|
176
|
+
isSupportNewOption: this.props.isSupportNewOption,
|
|
177
|
+
onAddNewOption: this.onAddNewOption
|
|
178
|
+
})), /*#__PURE__*/React.createElement(MediaQuery, {
|
|
179
|
+
query: "(max-width: 767.8px)"
|
|
180
|
+
}, /*#__PURE__*/React.createElement(MBSelectEditorPopover, {
|
|
181
|
+
isReadOnly: this.props.isReadOnly,
|
|
182
|
+
value: [this.state.newValue],
|
|
183
|
+
column: this.props.column,
|
|
184
|
+
options: options,
|
|
185
|
+
onOptionItemToggle: this.onOptionItemToggle,
|
|
186
|
+
isShowRemoveIcon: true,
|
|
187
|
+
isSupportNewOption: this.props.isSupportNewOption,
|
|
188
|
+
onAddNewOption: this.onAddNewOption,
|
|
189
|
+
onClosePopover: this.onClosePopover
|
|
190
|
+
}))));
|
|
191
|
+
}
|
|
192
|
+
}]);
|
|
193
|
+
|
|
194
|
+
return SingleSelectEditor;
|
|
195
|
+
}(React.Component);
|
|
196
|
+
|
|
197
|
+
SingleSelectEditor.defaultProps = {
|
|
198
|
+
isReadOnly: false,
|
|
199
|
+
value: ''
|
|
200
|
+
};
|
|
201
|
+
export default SingleSelectEditor;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import url('../css/cell-formatter.css');
|
|
@@ -4,7 +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 cn from 'astro-classname';
|
|
7
|
-
import SelectItem from '../
|
|
7
|
+
import SelectItem from '../SelectItem';
|
|
8
|
+
import './index.css';
|
|
8
9
|
|
|
9
10
|
var SingleSelectFormatter = /*#__PURE__*/function (_React$PureComponent) {
|
|
10
11
|
_inherits(SingleSelectFormatter, _React$PureComponent);
|
|
@@ -0,0 +1,122 @@
|
|
|
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 isHotkey from 'is-hotkey';
|
|
7
|
+
|
|
8
|
+
var TextEditor = /*#__PURE__*/function (_React$Component) {
|
|
9
|
+
_inherits(TextEditor, _React$Component);
|
|
10
|
+
|
|
11
|
+
var _super = _createSuper(TextEditor);
|
|
12
|
+
|
|
13
|
+
function TextEditor(props) {
|
|
14
|
+
var _this;
|
|
15
|
+
|
|
16
|
+
_classCallCheck(this, TextEditor);
|
|
17
|
+
|
|
18
|
+
_this = _super.call(this, props);
|
|
19
|
+
|
|
20
|
+
_this.onCommit = function () {
|
|
21
|
+
var updated = {};
|
|
22
|
+
var column = _this.props.column;
|
|
23
|
+
var newValue = _this.state.newValue;
|
|
24
|
+
updated[column.key] = newValue ? newValue.trim() : '';
|
|
25
|
+
|
|
26
|
+
_this.props.onCommit(updated);
|
|
27
|
+
|
|
28
|
+
_this.setState({
|
|
29
|
+
isEditorShow: false
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
_this.onBlur = function () {
|
|
34
|
+
_this.onCommit();
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
_this.onChange = function (event) {
|
|
38
|
+
var value = event.target.value;
|
|
39
|
+
|
|
40
|
+
_this.setState({
|
|
41
|
+
newValue: value
|
|
42
|
+
});
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
_this.onEditorHandle = function () {
|
|
46
|
+
if (_this.props.isReadOnly) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
_this.setState({
|
|
51
|
+
isEditorShow: true
|
|
52
|
+
}, function () {
|
|
53
|
+
_this.input.focus();
|
|
54
|
+
});
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
_this.onKeyDown = function (event) {
|
|
58
|
+
var _event$currentTarget = event.currentTarget,
|
|
59
|
+
selectionStart = _event$currentTarget.selectionStart,
|
|
60
|
+
selectionEnd = _event$currentTarget.selectionEnd,
|
|
61
|
+
value = _event$currentTarget.value;
|
|
62
|
+
|
|
63
|
+
if (isHotkey('enter', event)) {
|
|
64
|
+
event.preventDefault();
|
|
65
|
+
|
|
66
|
+
_this.onBlur();
|
|
67
|
+
} else if (event.keyCode === 37 && selectionStart === 0 || event.keyCode === 39 && selectionEnd === value.length) {
|
|
68
|
+
event.stopPropagation();
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
_this.onPaste = function (e) {
|
|
73
|
+
e.stopPropagation();
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
_this.onCut = function (e) {
|
|
77
|
+
e.stopPropagation();
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
_this.setInputRef = function (input) {
|
|
81
|
+
_this.input = input;
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
_this.state = {
|
|
85
|
+
newValue: props.value,
|
|
86
|
+
isEditorShow: false
|
|
87
|
+
};
|
|
88
|
+
return _this;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
_createClass(TextEditor, [{
|
|
92
|
+
key: "render",
|
|
93
|
+
value: function render() {
|
|
94
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
95
|
+
className: "cell-editor text-editor"
|
|
96
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
97
|
+
className: "text-editor-container"
|
|
98
|
+
}, !this.state.isEditorShow && /*#__PURE__*/React.createElement("div", {
|
|
99
|
+
className: "form-control",
|
|
100
|
+
onClick: this.onEditorHandle
|
|
101
|
+
}, this.state.newValue), this.state.isEditorShow && /*#__PURE__*/React.createElement("input", {
|
|
102
|
+
ref: this.setInputRef,
|
|
103
|
+
type: "text",
|
|
104
|
+
className: "form-control",
|
|
105
|
+
value: this.state.newValue,
|
|
106
|
+
onChange: this.onChange,
|
|
107
|
+
onKeyDown: this.onKeyDown,
|
|
108
|
+
onBlur: this.onBlur,
|
|
109
|
+
onCut: this.onCut,
|
|
110
|
+
onPaste: this.onPaste
|
|
111
|
+
})));
|
|
112
|
+
}
|
|
113
|
+
}]);
|
|
114
|
+
|
|
115
|
+
return TextEditor;
|
|
116
|
+
}(React.Component);
|
|
117
|
+
|
|
118
|
+
TextEditor.defaultProps = {
|
|
119
|
+
isReadOnly: false,
|
|
120
|
+
value: ''
|
|
121
|
+
};
|
|
122
|
+
export default TextEditor;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import url('../css/cell-formatter.css');
|
|
@@ -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 cn from 'astro-classname';
|
|
7
|
+
import './index.css';
|
|
7
8
|
|
|
8
9
|
var TextFormatter = /*#__PURE__*/function (_React$Component) {
|
|
9
10
|
_inherits(TextFormatter, _React$Component);
|
|
@@ -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 cn from 'astro-classname';
|
|
7
|
+
import './index.css';
|
|
7
8
|
|
|
8
9
|
var UrlFormatter = /*#__PURE__*/function (_React$Component) {
|
|
9
10
|
_inherits(UrlFormatter, _React$Component);
|
|
File without changes
|
package/{es/components/cell-factory/cell-formatter-factory.js → lib/cellFormatterFactory/index.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
2
2
|
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
3
|
-
import
|
|
3
|
+
import formatterConfig from '../formatterConfig';
|
|
4
4
|
|
|
5
5
|
var CellFormatterFactory = /*#__PURE__*/function () {
|
|
6
6
|
function CellFormatterFactory() {
|
|
@@ -10,8 +10,8 @@ var CellFormatterFactory = /*#__PURE__*/function () {
|
|
|
10
10
|
_createClass(CellFormatterFactory, [{
|
|
11
11
|
key: "createFormatter",
|
|
12
12
|
value: function createFormatter(formatterType) {
|
|
13
|
-
if (
|
|
14
|
-
return
|
|
13
|
+
if (formatterConfig[formatterType]) {
|
|
14
|
+
return formatterConfig[formatterType];
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
return null;
|
|
File without changes
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
+
|
|
3
|
+
var _DURATION_ZERO_DISPLA, _DURATION_DECIMAL_DIG;
|
|
4
|
+
|
|
5
|
+
import * as CellType from './cell-types';
|
|
6
|
+
var NUMBER_TYPES = {
|
|
7
|
+
'NUMBER': 'number',
|
|
8
|
+
'NUMBER_WITH_COMMAS': 'number-with-commas',
|
|
9
|
+
'PERCENT': 'percent',
|
|
10
|
+
'YUAN': 'yuan',
|
|
11
|
+
'EURO': 'euro',
|
|
12
|
+
'DOLLAR': 'dollar'
|
|
13
|
+
};
|
|
14
|
+
var DATE_TYPES = {
|
|
15
|
+
'D/M/YYYY': 'D/M/YYYY',
|
|
16
|
+
'D/M/YYYY HH:mm': 'D/M/YYYY HH:mm',
|
|
17
|
+
'M/D/YYYY': 'M/D/YY',
|
|
18
|
+
'M/D/YYYY HH:mm': 'M/D/YYYY HH:mm',
|
|
19
|
+
'YYYY-MM-DD': 'YYYY-MM-DD',
|
|
20
|
+
'YYYY-MM-DD HH:mm': 'YYYY-MM-DD HH:mm'
|
|
21
|
+
};
|
|
22
|
+
var FORMULA_RESULT_TYPE = {
|
|
23
|
+
NUMBER: 'number',
|
|
24
|
+
STRING: 'string',
|
|
25
|
+
DATE: 'date',
|
|
26
|
+
BOOL: 'bool',
|
|
27
|
+
ARRAY: 'array'
|
|
28
|
+
};
|
|
29
|
+
var SIMPLE_CELL_COLUMNS = [CellType.TEXT, CellType.NUMBER, CellType.DATE, CellType.CTIME, CellType.MTIME, CellType.GEOLOCATION, CellType.AUTO_NUMBER, CellType.URL, CellType.EMAIL, CellType.DURATION, CellType.CHECKBOX, CellType.RATE];
|
|
30
|
+
var ARRAY_FORMAL_COLUMNS = [CellType.IMAGE, CellType.FILE, CellType.MULTIPLE_SELECT, CellType.COLLABORATOR];
|
|
31
|
+
var SIMPLE_CELL_FORMULA_RESULTS = [FORMULA_RESULT_TYPE.NUMBER, FORMULA_RESULT_TYPE.STRING, FORMULA_RESULT_TYPE.DATE, FORMULA_RESULT_TYPE.BOOL];
|
|
32
|
+
var COLLABORATOR_COLUMN_TYPES = [CellType.COLLABORATOR, CellType.CREATOR, CellType.LAST_MODIFIER];
|
|
33
|
+
var ARRAY_FORMAL_COLUMNS_TYPES = [CellType.IMAGE, CellType.FILE, CellType.MULTIPLE_SELECT, CellType.COLLABORATOR];
|
|
34
|
+
var DEFAULT_NUMBER_FORMAT = 'number';
|
|
35
|
+
var DEFAULT_DATE_FORMAT = 'YYYY-MM-DD';
|
|
36
|
+
var DURATION_FORMATS_MAP = {
|
|
37
|
+
H_MM: 'h:mm',
|
|
38
|
+
H_MM_SS: 'h:mm:ss'
|
|
39
|
+
};
|
|
40
|
+
var DURATION_FORMATS = [{
|
|
41
|
+
name: DURATION_FORMATS_MAP.H_MM,
|
|
42
|
+
type: DURATION_FORMATS_MAP.H_MM
|
|
43
|
+
}, {
|
|
44
|
+
name: DURATION_FORMATS_MAP.H_MM_SS,
|
|
45
|
+
type: DURATION_FORMATS_MAP.H_MM_SS
|
|
46
|
+
}];
|
|
47
|
+
var DURATION_ZERO_DISPLAY = (_DURATION_ZERO_DISPLA = {}, _defineProperty(_DURATION_ZERO_DISPLA, DURATION_FORMATS_MAP.H_MM, '0:00'), _defineProperty(_DURATION_ZERO_DISPLA, DURATION_FORMATS_MAP.H_MM_SS, '0:00'), _DURATION_ZERO_DISPLA);
|
|
48
|
+
var DURATION_DECIMAL_DIGITS = (_DURATION_DECIMAL_DIG = {}, _defineProperty(_DURATION_DECIMAL_DIG, DURATION_FORMATS_MAP.H_MM, 0), _defineProperty(_DURATION_DECIMAL_DIG, DURATION_FORMATS_MAP.H_MM_SS, 0), _DURATION_DECIMAL_DIG);
|
|
49
|
+
export { CellType, NUMBER_TYPES, DATE_TYPES, FORMULA_RESULT_TYPE, SIMPLE_CELL_COLUMNS, ARRAY_FORMAL_COLUMNS, SIMPLE_CELL_FORMULA_RESULTS, COLLABORATOR_COLUMN_TYPES, ARRAY_FORMAL_COLUMNS_TYPES, DEFAULT_NUMBER_FORMAT, DEFAULT_DATE_FORMAT, DURATION_FORMATS_MAP, DURATION_FORMATS, DURATION_ZERO_DISPLAY, DURATION_DECIMAL_DIGITS };
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
@media screen and (max-width: 767.8px) {
|
|
2
|
+
.dtable-ui-mb-editor-popover {
|
|
3
|
+
position: fixed;
|
|
4
|
+
top: 0;
|
|
5
|
+
left: 0;
|
|
6
|
+
right: 0;
|
|
7
|
+
bottom: 0;
|
|
8
|
+
display: flex;
|
|
9
|
+
background-color: #f5f5f5;
|
|
10
|
+
z-index: 9;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.dtable-ui-mb-editor-header {
|
|
14
|
+
position: fixed;
|
|
15
|
+
left: 0;
|
|
16
|
+
top: 0;
|
|
17
|
+
width: 100%;
|
|
18
|
+
height: 50px;
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
background-color: #fff;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.dtable-ui-mb-editor-header .editor-header-left-content {
|
|
25
|
+
min-width: 50px;
|
|
26
|
+
padding: 13px 16px;
|
|
27
|
+
font-size: 14px;
|
|
28
|
+
color: #888;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.dtable-ui-mb-editor-header .editor-header-title {
|
|
32
|
+
flex: 1;
|
|
33
|
+
font-size: 18px;
|
|
34
|
+
text-align: center;
|
|
35
|
+
text-overflow: ellipsis;
|
|
36
|
+
color: #333;
|
|
37
|
+
overflow: hidden;
|
|
38
|
+
white-space: nowrap;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.dtable-ui-mb-editor-header .editor-header-right-content {
|
|
42
|
+
min-width: 50px;
|
|
43
|
+
padding: 13px 16px;
|
|
44
|
+
font-size: 14px;
|
|
45
|
+
color: #888;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.dtable-ui-mb-editor-body {
|
|
49
|
+
flex: 1;
|
|
50
|
+
display: flex;
|
|
51
|
+
flex-direction: column;
|
|
52
|
+
margin-top: 50px;
|
|
53
|
+
overflow: auto;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
+
|
|
3
|
+
var _FormatterConfig;
|
|
4
|
+
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import { CellType } from '../constants';
|
|
7
|
+
import CheckboxFormatter from '../CheckboxFormatter';
|
|
8
|
+
import ImageFormatter from '../ImageFormatter';
|
|
9
|
+
import SimpleLongTextFormatter from '../SimpleLongTextFormatter';
|
|
10
|
+
import TextCellFormatter from '../TextFormatter';
|
|
11
|
+
import SingleSelectFormatter from '../SingleSelectFormatter';
|
|
12
|
+
import MultipleSelectFormatter from '../MultipleSelectFormatter';
|
|
13
|
+
import FileFormatter from '../FileFormatter';
|
|
14
|
+
import LinkFormatter from '../LinkFormatter';
|
|
15
|
+
import CollaboratorFormatter from '../CollaboratorFormatter';
|
|
16
|
+
import NumberFormatter from '../NumberFormatter';
|
|
17
|
+
import DateFormatter from '../DateFormatter';
|
|
18
|
+
import CreatorFormatter from '../CreatorFormatter';
|
|
19
|
+
import CTimeFormatter from '../CTimeFormatter';
|
|
20
|
+
import LastModifierFormatter from '../LastModifierFormatter';
|
|
21
|
+
import MTimeFormatter from '../MTimeFormatter';
|
|
22
|
+
import GeolocationFormatter from '../GeolocationFormatter';
|
|
23
|
+
import FormulaFormatter from '../FormulaFormatter';
|
|
24
|
+
import AutoNumberFormatter from '../AutoNumberFormatter';
|
|
25
|
+
import UrlFormatter from '../UrlFormatter';
|
|
26
|
+
import EmailFormatter from '../EmailFormatter';
|
|
27
|
+
import DurationFormatter from '../DurationFormatter';
|
|
28
|
+
import RateFormatter from '../RateFormatter';
|
|
29
|
+
import ButtonFormatter from '../ButtonFormatter';
|
|
30
|
+
var FormatterConfig = (_FormatterConfig = {}, _defineProperty(_FormatterConfig, CellType.DEFAULT, /*#__PURE__*/React.createElement(TextCellFormatter, null)), _defineProperty(_FormatterConfig, CellType.TEXT, /*#__PURE__*/React.createElement(TextCellFormatter, null)), _defineProperty(_FormatterConfig, CellType.CHECKBOX, /*#__PURE__*/React.createElement(CheckboxFormatter, null)), _defineProperty(_FormatterConfig, CellType.LONG_TEXT, /*#__PURE__*/React.createElement(SimpleLongTextFormatter, null)), _defineProperty(_FormatterConfig, CellType.SINGLE_SELECT, /*#__PURE__*/React.createElement(SingleSelectFormatter, null)), _defineProperty(_FormatterConfig, CellType.IMAGE, /*#__PURE__*/React.createElement(ImageFormatter, null)), _defineProperty(_FormatterConfig, CellType.FILE, /*#__PURE__*/React.createElement(FileFormatter, null)), _defineProperty(_FormatterConfig, CellType.MULTIPLE_SELECT, /*#__PURE__*/React.createElement(MultipleSelectFormatter, null)), _defineProperty(_FormatterConfig, CellType.COLLABORATOR, /*#__PURE__*/React.createElement(CollaboratorFormatter, null)), _defineProperty(_FormatterConfig, CellType.NUMBER, /*#__PURE__*/React.createElement(NumberFormatter, null)), _defineProperty(_FormatterConfig, CellType.DATE, /*#__PURE__*/React.createElement(DateFormatter, null)), _defineProperty(_FormatterConfig, CellType.LINK, /*#__PURE__*/React.createElement(LinkFormatter, null)), _defineProperty(_FormatterConfig, CellType.CREATOR, /*#__PURE__*/React.createElement(CreatorFormatter, null)), _defineProperty(_FormatterConfig, CellType.CTIME, /*#__PURE__*/React.createElement(CTimeFormatter, null)), _defineProperty(_FormatterConfig, CellType.LAST_MODIFIER, /*#__PURE__*/React.createElement(LastModifierFormatter, null)), _defineProperty(_FormatterConfig, CellType.MTIME, /*#__PURE__*/React.createElement(MTimeFormatter, null)), _defineProperty(_FormatterConfig, CellType.GEOLOCATION, /*#__PURE__*/React.createElement(GeolocationFormatter, null)), _defineProperty(_FormatterConfig, CellType.FORMULA, /*#__PURE__*/React.createElement(FormulaFormatter, null)), _defineProperty(_FormatterConfig, CellType.AUTO_NUMBER, /*#__PURE__*/React.createElement(AutoNumberFormatter, null)), _defineProperty(_FormatterConfig, CellType.URL, /*#__PURE__*/React.createElement(UrlFormatter, null)), _defineProperty(_FormatterConfig, CellType.EMAIL, /*#__PURE__*/React.createElement(EmailFormatter, null)), _defineProperty(_FormatterConfig, CellType.DURATION, /*#__PURE__*/React.createElement(DurationFormatter, null)), _defineProperty(_FormatterConfig, CellType.RATE, /*#__PURE__*/React.createElement(RateFormatter, null)), _defineProperty(_FormatterConfig, CellType.BUTTON, /*#__PURE__*/React.createElement(ButtonFormatter, null)), _FormatterConfig);
|
|
31
|
+
export default FormatterConfig;
|
package/lib/index.js
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
// toaster
|
|
2
|
+
export { default as toaster } from './toaster'; // Loading
|
|
3
|
+
|
|
4
|
+
export { default as Loading } from './Loading';
|
|
5
|
+
export { setLocale } from './lang'; // utils
|
|
6
|
+
|
|
7
|
+
export { getDateDisplayString, getNumberDisplayString, formatStringToNumber, formatNumberString } from './utils/value-format-utils'; // formatter
|
|
8
|
+
|
|
9
|
+
export { default as CheckboxFormatter } from './CheckboxFormatter';
|
|
10
|
+
export { default as ImageFormatter } from './ImageFormatter';
|
|
11
|
+
export { default as LongTextFormatter } from './LongTextFormatter';
|
|
12
|
+
export { default as TextFormatter } from './TextFormatter';
|
|
13
|
+
export { default as SingleSelectFormatter } from './SingleSelectFormatter';
|
|
14
|
+
export { default as MultipleSelectFormatter } from './MultipleSelectFormatter';
|
|
15
|
+
export { default as FileFormatter } from './FileFormatter';
|
|
16
|
+
export { default as LinkFormatter } from './LinkFormatter';
|
|
17
|
+
export { default as CollaboratorFormatter } from './CollaboratorFormatter';
|
|
18
|
+
export { default as NumberFormatter } from './NumberFormatter';
|
|
19
|
+
export { default as DateFormatter } from './DateFormatter';
|
|
20
|
+
export { default as CreatorFormatter } from './CreatorFormatter';
|
|
21
|
+
export { default as CTimeFormatter } from './CTimeFormatter';
|
|
22
|
+
export { default as LastModifierFormatter } from './LastModifierFormatter';
|
|
23
|
+
export { default as MTimeFormatter } from './MTimeFormatter';
|
|
24
|
+
export { default as GeolocationFormatter } from './GeolocationFormatter';
|
|
25
|
+
export { default as FormulaFormatter } from './FormulaFormatter';
|
|
26
|
+
export { default as AutoNumberFormatter } from './AutoNumberFormatter';
|
|
27
|
+
export { default as UrlFormatter } from './UrlFormatter';
|
|
28
|
+
export { default as EmailFormatter } from './EmailFormatter';
|
|
29
|
+
export { default as DurationFormatter } from './DurationFormatter';
|
|
30
|
+
export { default as RateFormatter } from './RateFormatter';
|
|
31
|
+
export { default as ButtonFormatter } from './ButtonFormatter';
|
|
32
|
+
export { default as ImagePreviewerLightbox } from './ImagePreviewerLightbox';
|
|
33
|
+
export { default as CollaboratorItem } from './CollaboratorItem';
|
|
34
|
+
export { default as FileItemFormatter } from './FileItemFormatter'; // editor
|
|
35
|
+
|
|
36
|
+
export { default as TextEditor } from './TextEditor';
|
|
37
|
+
export { default as NumberEditor } from './NumberEditor';
|
|
38
|
+
export { default as CheckboxEditor } from './CheckboxEditor';
|
|
39
|
+
export { default as SingleSelectEditor } from './SingleSelectEditor';
|
|
40
|
+
export { default as MultipleSelectEditor } from './MultipleSelectEditor';
|
|
41
|
+
export { default as CollaboratorEditor } from './CollaboratorEditor';
|
|
42
|
+
export { default as DateEditor } from './DateEditor';
|
|
43
|
+
export { default as LinkEditor } from './LinkEditor';
|
package/{es → lib}/lang/index.js
RENAMED
|
File without changes
|
package/{es → lib}/locals/de.js
RENAMED
|
File without changes
|
package/{es → lib}/locals/en.js
RENAMED
|
File without changes
|
package/{es → lib}/locals/fr.js
RENAMED
|
File without changes
|
|
File without changes
|