dtable-ui-component 5.3.10 → 5.3.12

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.
@@ -62,7 +62,8 @@ class Body extends _react.default.Component {
62
62
  this.onHotKey = event => {
63
63
  const {
64
64
  columns,
65
- onKeyDown
65
+ onKeyDown,
66
+ onToggle
66
67
  } = this.props;
67
68
  const readonly = Array.isArray(columns) && columns.length > 0 ? !columns.some(c => c.editable) : true;
68
69
  const keyCode = event.keyCode;
@@ -71,7 +72,7 @@ class Body extends _react.default.Component {
71
72
  return;
72
73
  }
73
74
  if (keyCode === _constants.KeyCodes.Esc) {
74
- this.props.onRowExpandCancel();
75
+ onToggle && onToggle();
75
76
  return;
76
77
  }
77
78
  onKeyDown && onKeyDown(event);
@@ -73,7 +73,7 @@ const RowExpandDialog = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
73
73
  if (readonly || !column || !column.editable || _dtableUtils.NOT_SUPPORT_EDIT_COLUMN_TYPE_MAP[column.type]) return false;
74
74
  if (column.type === _dtableUtils.CellType.IMAGE || column.type === _dtableUtils.CellType.FILE) return Boolean(uploadFile);
75
75
  return true;
76
- }, [isSaving, uploadFile]);
76
+ }, [readonly, isSaving, uploadFile]);
77
77
  const initRowData = (0, _react.useCallback)(() => {
78
78
  setLoading(true);
79
79
  setRow(defaultRow);
@@ -88,7 +88,7 @@ const RowExpandDialog = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
88
88
  isChangedRef.current = isInsertingRow && Object.keys(defaultRow).length > 0;
89
89
  setColumns(validColumns);
90
90
  setLoading(false);
91
- }, [isInsertingRow, checkEditable]);
91
+ }, [isInsertingRow, defaultColumns, defaultRow, checkEditable]);
92
92
  const toggle = (0, _react.useCallback)(() => {
93
93
  if (isSaving) return;
94
94
  onToggle();
@@ -224,7 +224,8 @@ const RowExpandDialog = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
224
224
  columns: columns,
225
225
  valueKey: valueKey,
226
226
  onChange: onChange,
227
- uploadFile: uploadFile
227
+ uploadFile: uploadFile,
228
+ onToggle: onToggle
228
229
  }), children[1]), (!saveImmediately || isInsertingRow) && /*#__PURE__*/_react.default.createElement(_reactstrap.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
229
230
  onClick: toggle,
230
231
  color: "secondary"
@@ -48,7 +48,7 @@ class RowExpandCollaboratorEditor extends _react.default.Component {
48
48
  }
49
49
  };
50
50
  this.hideSelect = event => {
51
- if (!this.state.showCollaboratorSelect || !event.target || event.target.tagName.toUpperCase() === 'INPUT') {
51
+ if (!this.state.showCollaboratorSelect || !event.target) {
52
52
  return;
53
53
  }
54
54
  const editor = document.querySelector('.dtable-ui-collaborator-editor-container');
@@ -11,9 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
11
11
  var _hooks = require("../../hooks");
12
12
  var _DepartmentSingleSelectFormatter = _interopRequireDefault(require("../../DepartmentSingleSelectFormatter"));
13
13
  var _constants = require("../../constants");
14
- var _lang = require("../../lang");
15
14
  var _departmentSingleSelect = _interopRequireDefault(require("../../Department-editor/department-single-select"));
16
- var _constants2 = require("../../Department-editor/constants");
17
15
  function RowExpandDepartmentEditor(props) {
18
16
  const {
19
17
  row,
@@ -38,20 +36,20 @@ function RowExpandDepartmentEditor(props) {
38
36
  document.removeEventListener('keydown', onKeyDown);
39
37
  };
40
38
  // eslint-disable-next-line
41
- }, [isEditorFocus]);
39
+ }, [isEditorFocus, showEditor]);
42
40
  (0, _react.useEffect)(() => {
43
41
  setValue(row[column[valueKey]] || '');
44
42
  setShowEditor(false);
45
43
  // eslint-disable-next-line
46
44
  }, [row]);
47
45
  function hideDropDownMenu(event) {
48
- if (!event.target || event.target.tagName.toUpperCase() === 'INPUT') return;
46
+ if (!event.target) return;
49
47
  toggleDepartmentSelect(false);
50
48
  }
51
49
  function onKeyDown(e) {
52
50
  if (e.keyCode === _constants.KeyCodes.Enter && props.isEditorFocus && !showEditor) {
53
51
  setShowEditor(true);
54
- } else if (e.keyCode === _constants.KeyCodes.Escape) {
52
+ } else if (e.keyCode === _constants.KeyCodes.Escape && showEditor) {
55
53
  e.stopPropagation();
56
54
  setShowEditor(false);
57
55
  departmentSelectContent.current.focus();
@@ -45,19 +45,19 @@ class RowExpandEmailEditor extends _react.default.Component {
45
45
  this.onPaste = e => {
46
46
  e.stopPropagation();
47
47
  };
48
- this.onKeyDown = e => {
49
- if (e.keyCode === _constants.KeyCodes.Esc) {
50
- e.stopPropagation();
48
+ this.onKeyDown = event => {
49
+ if (event.keyCode === _constants.KeyCodes.Esc) {
50
+ event.stopPropagation();
51
51
  this.blurInput();
52
52
  return;
53
53
  }
54
- let {
54
+ const {
55
55
  selectionStart,
56
56
  selectionEnd,
57
57
  value
58
- } = e.currentTarget;
59
- if (e.keyCode === _constants.KeyCodes.ChineseInputMethod || e.keyCode === _constants.KeyCodes.LeftArrow && selectionStart === 0 || e.keyCode === _constants.KeyCodes.RightArrow && selectionEnd === value.length) {
60
- e.stopPropagation();
58
+ } = event.currentTarget;
59
+ if (event.keyCode === _constants.KeyCodes.ChineseInputMethod || event.keyCode === _constants.KeyCodes.LeftArrow && selectionStart === 0 || event.keyCode === _constants.KeyCodes.RightArrow && selectionEnd === value.length) {
60
+ event.stopPropagation();
61
61
  }
62
62
  };
63
63
  this.onOpenEmailLink = () => {
@@ -23,7 +23,7 @@ class RowExpandGeolocationEditor extends _react.default.Component {
23
23
  }
24
24
  };
25
25
  this.hideEditor = event => {
26
- if (!this.state.isShowEditor || !event.target || event.target.tagName.toUpperCase() === 'INPUT' || this.editorContainer.contains(event.target)) return;
26
+ if (!this.state.isShowEditor || !event.target || this.editorContainer.contains(event.target)) return;
27
27
  if (this.state.isShowEditor && this.geoEditor.getLargeEditorState()) return;
28
28
  this.setState({
29
29
  isShowEditor: false
@@ -11,6 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
11
11
  var _constants = require("../../constants");
12
12
  var _MultipleSelectEditor = _interopRequireDefault(require("../../MultipleSelectEditor"));
13
13
  var _lang = require("../../lang");
14
+ var _objectUtils = _interopRequireDefault(require("../../utils/object-utils"));
14
15
  require("./index.css");
15
16
  class RowExpandMultipleSelectEditor extends _react.default.Component {
16
17
  constructor(_props) {
@@ -39,7 +40,7 @@ class RowExpandMultipleSelectEditor extends _react.default.Component {
39
40
  });
40
41
  };
41
42
  this.hideDropDownMenu = event => {
42
- if (!event.target || event.target.tagName.toUpperCase() === 'INPUT') return;
43
+ if (!event.target) return;
43
44
  if (!this.ref.contains(event.target) && this.state.showSelectPopover) {
44
45
  const singleSelectEditor = document.getElementsByClassName('dtable-ui-select-editor-container')[0];
45
46
  if (singleSelectEditor && singleSelectEditor.contains(event.target)) return;
@@ -49,14 +50,22 @@ class RowExpandMultipleSelectEditor extends _react.default.Component {
49
50
  this.onToggleSelect = e => {
50
51
  e.preventDefault();
51
52
  e.stopPropagation();
52
- this.props.updateTabIndex(this.props.columnIndex);
53
+ const {
54
+ updateTabIndex,
55
+ columnIndex
56
+ } = this.props;
57
+ updateTabIndex && updateTabIndex(columnIndex);
53
58
  this.toggleSingleSelect(true);
54
59
  };
55
60
  this.closeEditor = () => {
56
61
  this.toggleSingleSelect(false);
57
62
  };
58
63
  this.onFocus = () => {
59
- this.props.updateTabIndex(this.props.columnIndex);
64
+ const {
65
+ updateTabIndex,
66
+ columnIndex
67
+ } = this.props;
68
+ updateTabIndex && updateTabIndex(columnIndex);
60
69
  };
61
70
  this.onChange = option => {
62
71
  const optionKey = option[this.key];
@@ -135,7 +144,9 @@ class RowExpandMultipleSelectEditor extends _react.default.Component {
135
144
  };
136
145
  this.renderOptions = () => {
137
146
  const {
138
- isEditorFocus
147
+ isEditorFocus,
148
+ classNamePrefix,
149
+ placeholder
139
150
  } = this.props;
140
151
  const options = this.getMultipleSelectList();
141
152
  return /*#__PURE__*/_react.default.createElement("div", {
@@ -144,13 +155,22 @@ class RowExpandMultipleSelectEditor extends _react.default.Component {
144
155
  onClick: this.onToggleSelect,
145
156
  ref: ref => this.multipleSelectOptionsRef = ref,
146
157
  className: (0, _classnames.default)('dtable-ui dtable-ui-row-expand-select-editor custom-select', {
147
- 'focus': isEditorFocus
158
+ 'focus': isEditorFocus,
159
+ ["".concat(classNamePrefix, "-select-editor")]: classNamePrefix
148
160
  })
149
161
  }, /*#__PURE__*/_react.default.createElement("div", {
150
- className: "dtable-ui-row-expand-select-editor-inner"
151
- }, /*#__PURE__*/_react.default.createElement("div", null, options.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
152
- className: "dtable-ui-row-expand-select-options"
153
- }, options)), /*#__PURE__*/_react.default.createElement("i", {
162
+ className: (0, _classnames.default)('dtable-ui-row-expand-select-editor-inner', {
163
+ ["".concat(classNamePrefix, "-select-editor-inner")]: classNamePrefix
164
+ })
165
+ }, /*#__PURE__*/_react.default.createElement("div", {
166
+ className: (0, _classnames.default)('', {
167
+ ["".concat(classNamePrefix, "-select-editor-inner-container")]: classNamePrefix
168
+ })
169
+ }, options.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
170
+ className: (0, _classnames.default)('dtable-ui-row-expand-select-options', {
171
+ ["".concat(classNamePrefix, "-select-editor-options")]: classNamePrefix
172
+ })
173
+ }, options), options.length === 0 && placeholder && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholder)), /*#__PURE__*/_react.default.createElement("i", {
154
174
  "aria-hidden": "true",
155
175
  className: "dtable-font dtable-icon-down3"
156
176
  })));
@@ -169,9 +189,10 @@ class RowExpandMultipleSelectEditor extends _react.default.Component {
169
189
  }
170
190
  UNSAFE_componentWillReceiveProps(nextProps) {
171
191
  const {
172
- value
192
+ value,
193
+ column
173
194
  } = nextProps;
174
- if (value !== this.props.value) {
195
+ if (value !== this.props.value || !_objectUtils.default.isSameObject(column, this.props.column)) {
175
196
  this.options = this.getOptions(nextProps);
176
197
  this.setState({
177
198
  value
@@ -196,7 +217,8 @@ class RowExpandMultipleSelectEditor extends _react.default.Component {
196
217
  const {
197
218
  column,
198
219
  isSupportNewOption,
199
- onAddNewOption
220
+ onAddNewOption,
221
+ classNamePrefix
200
222
  } = this.props;
201
223
  const {
202
224
  showSelectPopover,
@@ -214,6 +236,7 @@ class RowExpandMultipleSelectEditor extends _react.default.Component {
214
236
  value: value,
215
237
  valueKey: this.key,
216
238
  target: this.targetRef,
239
+ classNamePrefix: classNamePrefix,
217
240
  onCommit: this.onChange,
218
241
  isSupportNewOption: isSupportNewOption,
219
242
  onAddNewOption: onAddNewOption,
@@ -11,6 +11,7 @@ var _constants = require("../../constants");
11
11
  var _classnames = _interopRequireDefault(require("classnames"));
12
12
  var _SingleSelectEditor = _interopRequireDefault(require("../../SingleSelectEditor"));
13
13
  var _lang = require("../../lang");
14
+ var _objectUtils = _interopRequireDefault(require("../../utils/object-utils"));
14
15
  require("./index.css");
15
16
  class RowExpandSingleSelectEditor extends _react.default.Component {
16
17
  constructor(_props) {
@@ -62,8 +63,8 @@ class RowExpandSingleSelectEditor extends _react.default.Component {
62
63
  this.toggleSingleSelect(false);
63
64
  };
64
65
  this.hideDropDownMenu = event => {
65
- if (!event.target || event.target.tagName.toUpperCase() === 'INPUT') return;
66
- if (!this.singleSelectContainer.contains(event.target) && this.state.showSelectPopover) {
66
+ if (!event.target) return;
67
+ if (!this.ref.contains(event.target) && this.state.showSelectPopover) {
67
68
  const singleSelectEditor = document.getElementsByClassName('dtable-ui-select-editor-container')[0];
68
69
  if (singleSelectEditor && singleSelectEditor.contains(event.target)) return;
69
70
  this.toggleSingleSelect(false);
@@ -90,7 +91,9 @@ class RowExpandSingleSelectEditor extends _react.default.Component {
90
91
  };
91
92
  this.renderOption = () => {
92
93
  const {
93
- isEditorFocus
94
+ isEditorFocus,
95
+ classNamePrefix,
96
+ placeholder
94
97
  } = this.props;
95
98
  const {
96
99
  value
@@ -109,15 +112,22 @@ class RowExpandSingleSelectEditor extends _react.default.Component {
109
112
  onClick: this.onToggleSelect,
110
113
  ref: ref => this.selectRef = ref,
111
114
  className: (0, _classnames.default)('dtable-ui dtable-ui-row-expand-select-editor custom-select', {
112
- 'focus': isEditorFocus
115
+ 'focus': isEditorFocus,
116
+ ["".concat(classNamePrefix, "-select-editor")]: classNamePrefix
113
117
  })
114
118
  }, /*#__PURE__*/_react.default.createElement("div", {
115
- className: "dtable-ui-row-expand-select-editor-inner"
116
- }, /*#__PURE__*/_react.default.createElement("div", null, value && /*#__PURE__*/_react.default.createElement("div", {
119
+ className: (0, _classnames.default)('dtable-ui-row-expand-select-editor-inner', {
120
+ ["".concat(classNamePrefix, "-select-editor-inner")]: classNamePrefix
121
+ })
122
+ }, /*#__PURE__*/_react.default.createElement("div", {
123
+ className: (0, _classnames.default)('', {
124
+ ["".concat(classNamePrefix, "-select-editor-inner-container")]: classNamePrefix
125
+ })
126
+ }, value && /*#__PURE__*/_react.default.createElement("div", {
117
127
  className: "dtable-ui-select-option",
118
128
  style: optionStyle,
119
129
  title: optionName
120
- }, optionName)), /*#__PURE__*/_react.default.createElement("i", {
130
+ }, optionName), !value && placeholder && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholder)), /*#__PURE__*/_react.default.createElement("i", {
121
131
  "aria-hidden": "true",
122
132
  className: "dtable-font dtable-icon-down3"
123
133
  })));
@@ -137,9 +147,10 @@ class RowExpandSingleSelectEditor extends _react.default.Component {
137
147
  }
138
148
  UNSAFE_componentWillReceiveProps(nextProps) {
139
149
  const {
140
- value
150
+ value,
151
+ column
141
152
  } = nextProps;
142
- if (value !== this.props.value) {
153
+ if (value !== this.props.value || !_objectUtils.default.isSameObject(column, this.props.column)) {
143
154
  this.options = this.getOptions(nextProps);
144
155
  this.setState({
145
156
  value,
@@ -165,7 +176,8 @@ class RowExpandSingleSelectEditor extends _react.default.Component {
165
176
  const {
166
177
  isSupportNewOption,
167
178
  onAddNewOption,
168
- column
179
+ column,
180
+ classNamePrefix
169
181
  } = this.props;
170
182
  const {
171
183
  showSelectPopover,
@@ -173,7 +185,7 @@ class RowExpandSingleSelectEditor extends _react.default.Component {
173
185
  } = this.state;
174
186
  return /*#__PURE__*/_react.default.createElement("div", {
175
187
  className: "position-relative w-100",
176
- ref: ref => this.singleSelectContainer = ref
188
+ ref: ref => this.ref = ref
177
189
  }, this.renderOption(), /*#__PURE__*/_react.default.createElement("span", {
178
190
  ref: ref => this.targetRef = ref
179
191
  }), showSelectPopover && /*#__PURE__*/_react.default.createElement(_SingleSelectEditor.default, {
@@ -183,6 +195,7 @@ class RowExpandSingleSelectEditor extends _react.default.Component {
183
195
  value: value,
184
196
  valueKey: this.key,
185
197
  target: this.targetRef,
198
+ classNamePrefix: classNamePrefix,
186
199
  onCommit: this.onChange,
187
200
  isSupportNewOption: isSupportNewOption,
188
201
  onAddNewOption: onAddNewOption,
@@ -58,8 +58,17 @@ class RowExpandSimpleText extends _react.default.Component {
58
58
  };
59
59
  this.onKeyDown = event => {
60
60
  if (event.keyCode === _constants.KeyCodes.Esc) {
61
- event.preventDefault();
61
+ event.stopPropagation();
62
62
  this.blurInput();
63
+ return;
64
+ }
65
+ const {
66
+ selectionStart,
67
+ selectionEnd,
68
+ value
69
+ } = event.currentTarget;
70
+ if (event.keyCode === _constants.KeyCodes.ChineseInputMethod || event.keyCode === _constants.KeyCodes.LeftArrow && selectionStart === 0 || event.keyCode === _constants.KeyCodes.RightArrow && selectionEnd === value.length) {
71
+ event.stopPropagation();
63
72
  }
64
73
  };
65
74
  this.isChecked = () => {
@@ -47,19 +47,19 @@ class RowExpandUrlEditor extends _react.default.Component {
47
47
  this.onPaste = e => {
48
48
  e.stopPropagation();
49
49
  };
50
- this.onKeyDown = e => {
51
- if (e.keyCode === _constants.KeyCodes.Esc) {
52
- e.stopPropagation();
50
+ this.onKeyDown = event => {
51
+ if (event.keyCode === _constants.KeyCodes.Esc) {
52
+ event.preventDefault();
53
53
  this.blurInput();
54
54
  return;
55
55
  }
56
- let {
56
+ const {
57
57
  selectionStart,
58
58
  selectionEnd,
59
59
  value
60
- } = e.currentTarget;
61
- if (e.keyCode === _constants.KeyCodes.ChineseInputMethod || e.keyCode === _constants.KeyCodes.LeftArrow && selectionStart === 0 || e.keyCode === _constants.KeyCodes.RightArrow && selectionEnd === value.length) {
62
- e.stopPropagation();
60
+ } = event.currentTarget;
61
+ if (event.keyCode === _constants.KeyCodes.ChineseInputMethod || event.keyCode === _constants.KeyCodes.LeftArrow && selectionStart === 0 || event.keyCode === _constants.KeyCodes.RightArrow && selectionEnd === value.length) {
62
+ event.stopPropagation();
63
63
  }
64
64
  };
65
65
  this.onOpenUrlLink = () => {
@@ -77,7 +77,7 @@ class RowExpandUrlEditor extends _react.default.Component {
77
77
  }
78
78
  };
79
79
  this.state = {
80
- value: props.value
80
+ value: props.value || ''
81
81
  };
82
82
  this.inputRef = /*#__PURE__*/_react.default.createRef();
83
83
  }
@@ -206,7 +206,8 @@ class PCSelectEditor extends _react.default.Component {
206
206
  column,
207
207
  valueKey,
208
208
  isSupportNewOption,
209
- target
209
+ target,
210
+ classNamePrefix
210
211
  } = this.props;
211
212
  const {
212
213
  searchValue,
@@ -218,7 +219,9 @@ class PCSelectEditor extends _react.default.Component {
218
219
  // maxWidth = column.width > 200 ? column.width - 62 : 200 - 62
219
220
  let maxWidth = isInModal ? 250 : (column === null || column === void 0 ? void 0 : column.width) > 200 ? column.width - 62 : 138;
220
221
  const dom = /*#__PURE__*/_react.default.createElement("div", {
221
- className: (0, _classnames.default)('dtable-ui-editor-container dtable-ui-select-editor-container', className),
222
+ className: (0, _classnames.default)('dtable-ui-editor-container dtable-ui-select-editor-container', className, {
223
+ ["".concat(classNamePrefix, "-select-editor-container")]: classNamePrefix
224
+ }),
222
225
  ref: ref => this.ref = ref
223
226
  }, /*#__PURE__*/_react.default.createElement("div", {
224
227
  className: "select-options-search"
@@ -276,7 +279,9 @@ class PCSelectEditor extends _react.default.Component {
276
279
  target: target,
277
280
  hideArrow: true,
278
281
  fade: false,
279
- className: "dtable-ui dtable-ui-row-expand-select-editor-popover"
282
+ className: (0, _classnames.default)('dtable-ui dtable-ui-row-expand-select-editor-popover', {
283
+ ["".concat(classNamePrefix, "-select-editor-popover")]: classNamePrefix
284
+ })
280
285
  }, dom));
281
286
  }
282
287
  return dom;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dtable-ui-component",
3
- "version": "5.3.10",
3
+ "version": "5.3.12",
4
4
  "main": "./lib/index.js",
5
5
  "dependencies": {
6
6
  "@seafile/react-image-lightbox": "3.0.1",