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.
Files changed (122) hide show
  1. package/lib/AutoNumberFormatter/index.js +11 -24
  2. package/lib/ButtonFormatter/index.js +29 -45
  3. package/lib/CTimeFormatter/index.js +17 -32
  4. package/lib/CheckboxEditor/index.js +42 -49
  5. package/lib/CheckboxFormatter/index.js +17 -30
  6. package/lib/CollaboratorEditor/index.js +118 -135
  7. package/lib/CollaboratorEditor/mb-collaborator-editor-popover/index.js +90 -99
  8. package/lib/CollaboratorEditor/pc-collaborator-editor-popover/index.js +61 -69
  9. package/lib/CollaboratorFormatter/index.js +26 -42
  10. package/lib/CollaboratorItem/index.js +31 -44
  11. package/lib/CreatorFormatter/index.js +24 -40
  12. package/lib/DTableCustomizeCollaboratorSelect/index.js +80 -99
  13. package/lib/DTableCustomizeCollaboratorSelect/utils.js +12 -13
  14. package/lib/DTableCustomizeSelect/index.css +22 -59
  15. package/lib/DTableCustomizeSelect/index.js +99 -95
  16. package/lib/DTablePopover/index.js +52 -71
  17. package/lib/DTablePopover/utils.js +1 -1
  18. package/lib/DTableRadio/index.js +9 -7
  19. package/lib/DTableSearchInput/index.js +89 -99
  20. package/lib/DTableSearchInput/utils.js +2 -2
  21. package/lib/DTableSelect/dtable-select-label.js +5 -3
  22. package/lib/DTableSelect/index.js +50 -64
  23. package/lib/DTableSelect/utils.js +36 -41
  24. package/lib/DTableSwitch/index.js +7 -5
  25. package/lib/DateEditor/index.js +88 -94
  26. package/lib/DateEditor/mb-date-editor-popover/index.js +136 -134
  27. package/lib/DateEditor/pc-date-editor-popover.js +70 -77
  28. package/lib/DateFormatter/index.js +15 -28
  29. package/lib/DepartmentSingleSelectFormatter/index.js +9 -9
  30. package/lib/DigitalSignFormatter/index.js +55 -65
  31. package/lib/DigitalSignFormatter/utils.js +9 -8
  32. package/lib/DurationFormatter/index.js +14 -27
  33. package/lib/EditEditorButton/index.js +10 -22
  34. package/lib/EmailFormatter/index.js +11 -24
  35. package/lib/FieldDisplaySetting/field-item.js +18 -20
  36. package/lib/FieldDisplaySetting/index.js +41 -43
  37. package/lib/FileEditor/index.js +18 -29
  38. package/lib/FileFormatter/index.js +29 -43
  39. package/lib/FileItemFormatter/index.js +17 -32
  40. package/lib/FileItemFormatter/utils.js +5 -5
  41. package/lib/FileUploader/index.js +20 -33
  42. package/lib/FormulaFormatter/cell-value-validator.js +23 -8
  43. package/lib/FormulaFormatter/index.js +77 -83
  44. package/lib/FormulaFormatter/utils.js +27 -21
  45. package/lib/GeolocationFormatter/index.js +19 -32
  46. package/lib/HtmlLongTextFormatter/index.js +43 -52
  47. package/lib/HtmlLongTextFormatter/markdown2html.js +2 -2
  48. package/lib/HtmlLongTextFormatter/unified/index.js +1 -1
  49. package/lib/HtmlLongTextFormatter/vfile/core.js +10 -10
  50. package/lib/ImageFormatter/images-lazy-load.js +71 -79
  51. package/lib/ImageFormatter/index.js +86 -97
  52. package/lib/ImageFormatter/utils.js +1 -1
  53. package/lib/ImagePreviewerLightbox/index.js +20 -18
  54. package/lib/ImagePreviewerLightbox/utils.js +3 -3
  55. package/lib/LastModifierFormatter/index.js +24 -40
  56. package/lib/LinkEditor/index.js +163 -167
  57. package/lib/LinkEditor/link-editor-option.js +41 -56
  58. package/lib/LinkEditor/mb-link-editor-popover/index.js +90 -99
  59. package/lib/LinkEditor/pc-link-editor-popover/index.js +63 -71
  60. package/lib/LinkFormatter/index.js +75 -77
  61. package/lib/LongTextFormatter/index.js +5 -3
  62. package/lib/MBEditorHeader/index.js +25 -38
  63. package/lib/MTimeFormatter/index.js +17 -32
  64. package/lib/ModalPortal/index.js +15 -32
  65. package/lib/MultipleSelectEditor/index.js +118 -136
  66. package/lib/MultipleSelectFormatter/index.js +24 -40
  67. package/lib/NotificationPopover/index.js +68 -95
  68. package/lib/NumberEditor/index.js +75 -82
  69. package/lib/NumberFormatter/index.js +15 -28
  70. package/lib/RateFormatter/index.js +29 -45
  71. package/lib/RoleStatusEditor/index.js +20 -22
  72. package/lib/RowExpandEmailFormatter/index.js +24 -37
  73. package/lib/RowExpandFileFormatter/index.js +28 -42
  74. package/lib/RowExpandFileFormatter/row-expand-file-item-formatter.js +66 -82
  75. package/lib/RowExpandFormatter/index.js +92 -96
  76. package/lib/RowExpandFormulaFormatter/index.js +85 -91
  77. package/lib/RowExpandImageFormatter/index.js +65 -82
  78. package/lib/RowExpandImageFormatter/row-expand-image-item-formatter.js +71 -84
  79. package/lib/RowExpandImageFormatter/utils.js +1 -1
  80. package/lib/RowExpandLinkFormatter/collaborator-item-formatter.js +54 -68
  81. package/lib/RowExpandLinkFormatter/index.js +131 -137
  82. package/lib/RowExpandLinkFormatter/utils.js +23 -17
  83. package/lib/RowExpandLinkFormatter/value-display-utils.js +9 -7
  84. package/lib/RowExpandRateFormatter/index.js +27 -42
  85. package/lib/RowExpandUrlFormatter/index.js +27 -40
  86. package/lib/SelectItem/index.js +17 -33
  87. package/lib/SelectOptionGroup/index.css +103 -0
  88. package/lib/SelectOptionGroup/index.js +157 -135
  89. package/lib/SelectOptionGroup/option.js +31 -38
  90. package/lib/SimpleLongTextFormatter/index.js +55 -67
  91. package/lib/SimpleLongTextFormatter/normalize-long-text-value.js +23 -22
  92. package/lib/SimpleLongTextFormatter/widgets/LongTextPreview.js +42 -57
  93. package/lib/SimpleLongTextFormatter/widgets/dtable-markdown-viewer.js +31 -46
  94. package/lib/SingleSelectEditor/index.js +108 -119
  95. package/lib/SingleSelectFormatter/index.js +21 -37
  96. package/lib/TextEditor/index.js +45 -51
  97. package/lib/TextFormatter/index.js +17 -32
  98. package/lib/UrlFormatter/index.js +11 -24
  99. package/lib/cellFormatterFactory/index.js +8 -17
  100. package/lib/common/ClickOutside.js +28 -0
  101. package/lib/common/delete-tip.js +40 -65
  102. package/lib/common/modal-portal.js +15 -33
  103. package/lib/constants/index.js +5 -5
  104. package/lib/data/dtable-value.js +4 -4
  105. package/lib/formatterConfig/base-formatter-config.js +24 -3
  106. package/lib/formatterConfig/index.js +5 -4
  107. package/lib/lang/index.js +6 -6
  108. package/lib/locals/de.js +1 -1
  109. package/lib/locals/en.js +1 -1
  110. package/lib/locals/fr.js +1 -1
  111. package/lib/locals/zh-CN.js +1 -1
  112. package/lib/select-editor/mb-select-editor-popover/index.js +126 -137
  113. package/lib/select-editor/pc-select-editor-popover/index.js +75 -83
  114. package/lib/select-editor/select-editor-option.js +41 -56
  115. package/lib/toaster/alert.js +73 -88
  116. package/lib/toaster/index.js +1 -1
  117. package/lib/toaster/toast.js +75 -102
  118. package/lib/toaster/toastManager.js +55 -91
  119. package/lib/toaster/toaster.js +58 -57
  120. package/lib/utils/editor-utils.js +17 -19
  121. package/lib/utils/utils.js +14 -14
  122. package/package.json +4 -4
@@ -1,88 +1,84 @@
1
- import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
2
- import _createClass from "@babel/runtime/helpers/esm/createClass";
3
- import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
4
- import _inherits from "@babel/runtime/helpers/esm/inherits";
5
- import _createSuper from "@babel/runtime/helpers/esm/createSuper";
6
1
  import React, { Fragment } from 'react';
7
2
  import { getLocale } from '../../lang';
8
3
  import SelectEditorOption from '../select-editor-option';
9
4
  import MBEditorHeader from '../../MBEditorHeader';
10
5
  import './index.css';
11
- var MBSelectEditorPopover = /*#__PURE__*/function (_React$Component) {
12
- _inherits(MBSelectEditorPopover, _React$Component);
13
- var _super = _createSuper(MBSelectEditorPopover);
14
- function MBSelectEditorPopover(props) {
15
- var _this;
16
- _classCallCheck(this, MBSelectEditorPopover);
17
- _this = _super.call(this, props);
18
- _this.handleHistaryBack = function (e) {
6
+ class MBSelectEditorPopover extends React.Component {
7
+ constructor(props) {
8
+ super(props);
9
+ this.handleHistaryBack = e => {
19
10
  e.preventDefault();
20
- _this.props.onClosePopover();
11
+ this.props.onClosePopover();
21
12
  };
22
- _this.onContainerClick = function (event) {
23
- if (_this.editorPopover && _this.editorPopover.contains(event.target)) {
13
+ this.onContainerClick = event => {
14
+ if (this.editorPopover && this.editorPopover.contains(event.target)) {
24
15
  event.stopPropagation();
25
16
  event.nativeEvent.stopImmediatePropagation();
26
17
  return false;
27
18
  }
28
19
  };
29
- _this.onChangeSearch = function (event) {
30
- var searchVal = _this.state.searchVal;
20
+ this.onChangeSearch = event => {
21
+ let {
22
+ searchVal
23
+ } = this.state;
31
24
  if (searchVal === event.target.value) {
32
25
  return;
33
26
  }
34
27
  searchVal = event.target.value;
35
- _this.setState({
36
- searchVal: searchVal
28
+ this.setState({
29
+ searchVal
37
30
  });
38
31
  };
39
- _this.getSelectedOptions = function () {
40
- var _this$props = _this.props,
41
- value = _this$props.value,
42
- options = _this$props.options;
32
+ this.getSelectedOptions = () => {
33
+ let {
34
+ value,
35
+ options
36
+ } = this.props;
43
37
  if (!Array.isArray(value)) {
44
38
  return [];
45
39
  }
46
- return options.filter(function (option) {
40
+ return options.filter(option => {
47
41
  return value.indexOf(option.id) > -1;
48
42
  });
49
43
  };
50
- _this.getFilteredOptions = function () {
51
- var options = _this.props.options;
52
- var searchVal = _this.state.searchVal;
53
- return searchVal ? options.filter(function (item) {
54
- return item.name.indexOf(searchVal) > -1;
55
- }) : options;
44
+ this.getFilteredOptions = () => {
45
+ let {
46
+ options
47
+ } = this.props;
48
+ let {
49
+ searchVal
50
+ } = this.state;
51
+ return searchVal ? options.filter(item => item.name.indexOf(searchVal) > -1) : options;
56
52
  };
57
- _this.onSelectOption = function (option) {
58
- _this.props.onOptionItemToggle(option);
53
+ this.onSelectOption = option => {
54
+ this.props.onOptionItemToggle(option);
59
55
  };
60
- _this.onAddNewOption = function (event) {
56
+ this.onAddNewOption = event => {
61
57
  event.stopPropagation();
62
58
  event.nativeEvent.stopImmediatePropagation();
63
- var newOption = _this.state.searchVal.trim();
59
+ let newOption = this.state.searchVal.trim();
64
60
  if (newOption) {
65
- _this.props.onAddNewOption(newOption);
66
- _this.props.onClosePopover();
61
+ this.props.onAddNewOption(newOption);
62
+ this.props.onClosePopover();
67
63
  }
68
64
  };
69
- _this.onRemoveOption = function (option) {
70
- _this.props.onOptionItemToggle(option);
65
+ this.onRemoveOption = option => {
66
+ this.props.onOptionItemToggle(option);
71
67
  };
72
- _this.renderSelectOptions = function (options) {
73
- var value = _this.props.value;
74
- return options.map(function (option, index) {
75
- var isSelect = value.some(function (item) {
76
- return item === option.id;
77
- });
78
- var style = {
68
+ this.renderSelectOptions = options => {
69
+ let {
70
+ value
71
+ } = this.props;
72
+ return options.map((option, index) => {
73
+ let isSelect = value.some(item => item === option.id);
74
+ let style = {
79
75
  backgroundColor: option.color,
80
76
  color: option.textColor || null
81
77
  };
82
78
  return /*#__PURE__*/React.createElement("div", {
83
79
  className: "mb-select-option-item",
84
80
  key: index,
85
- onMouseDown: _this.onSelectOption.bind(_assertThisInitialized(_this), option)
81
+ onMouseDown: this.onSelectOption.bind(this, option)
86
82
  }, /*#__PURE__*/React.createElement("span", {
87
83
  className: "mb-select-item"
88
84
  }, /*#__PURE__*/React.createElement("span", {
@@ -96,101 +92,94 @@ var MBSelectEditorPopover = /*#__PURE__*/function (_React$Component) {
96
92
  })));
97
93
  });
98
94
  };
99
- _this.setEditorPopover = function (editorPopover) {
100
- _this.editorPopover = editorPopover;
95
+ this.setEditorPopover = editorPopover => {
96
+ this.editorPopover = editorPopover;
101
97
  };
102
- _this.state = {
98
+ this.state = {
103
99
  searchVal: ''
104
100
  };
105
- return _this;
106
101
  }
107
- _createClass(MBSelectEditorPopover, [{
108
- key: "componentDidMount",
109
- value: function componentDidMount() {
110
- history.pushState(null, null, '#'); // eslint-disable-line
111
- window.addEventListener('popstate', this.handleHistaryBack, false);
112
- }
113
- }, {
114
- key: "componentWillUnmount",
115
- value: function componentWillUnmount() {
116
- window.removeEventListener('popstate', this.handleHistaryBack, false);
117
- }
118
- }, {
119
- key: "render",
120
- value: function render() {
121
- var _this2 = this;
122
- var _this$props2 = this.props,
123
- isReadOnly = _this$props2.isReadOnly,
124
- column = _this$props2.column,
125
- isSupportNewOption = _this$props2.isSupportNewOption,
126
- isShowRemoveIcon = _this$props2.isShowRemoveIcon;
127
- var searchVal = this.state.searchVal;
128
- var selectedOptions = this.getSelectedOptions();
129
- var filteredOptions = this.getFilteredOptions();
130
- var isShowRemoveBtn = !isReadOnly && isShowRemoveIcon;
131
- var isShowCreateBtn = !isReadOnly && isSupportNewOption && !!searchVal;
132
- if (isShowCreateBtn) {
133
- isShowCreateBtn = filteredOptions.length === 0;
134
- }
135
- return /*#__PURE__*/React.createElement("div", {
136
- ref: this.setEditorPopover,
137
- className: "dtable-ui-mb-editor-popover mb-select-editor-popover",
138
- style: {
139
- zIndex: 99
140
- },
141
- onClick: this.onContainerClick
142
- }, /*#__PURE__*/React.createElement(MBEditorHeader, {
143
- title: column.name,
144
- leftContent: /*#__PURE__*/React.createElement("i", {
145
- className: "dtable-font dtable-icon-return"
146
- }),
147
- onLeftClick: this.props.onClosePopover
148
- }), /*#__PURE__*/React.createElement("div", {
149
- className: "dtable-ui-mb-editor-body dtable-ui-mb-select-editor-body"
150
- }, /*#__PURE__*/React.createElement("div", {
151
- className: "mb-selected-item"
152
- }, /*#__PURE__*/React.createElement("div", {
153
- className: "title"
154
- }, getLocale('Current_option')), /*#__PURE__*/React.createElement("div", {
155
- className: "content"
156
- }, selectedOptions.length === 0 && /*#__PURE__*/React.createElement("span", {
157
- className: "empty-placeholder"
158
- }, getLocale('No_option')), selectedOptions.length > 0 && selectedOptions.map(function (selectedOption) {
159
- return /*#__PURE__*/React.createElement(SelectEditorOption, {
160
- key: selectedOption.id,
161
- option: selectedOption,
162
- isShowRemoveIcon: isShowRemoveBtn,
163
- onDeleteSelectOption: _this2.onRemoveOption
164
- });
165
- }))), /*#__PURE__*/React.createElement("div", {
166
- className: "mb-search-select-items"
167
- }, /*#__PURE__*/React.createElement("input", {
168
- className: "form-control",
169
- type: "text",
170
- placeholder: getLocale('Find_an_option'),
171
- value: searchVal,
172
- onChange: this.onChangeSearch,
173
- onClick: this.onInputClick
174
- })), /*#__PURE__*/React.createElement("div", {
175
- className: "mb-select-options-container"
176
- }, /*#__PURE__*/React.createElement("div", {
177
- className: "title"
178
- }, /*#__PURE__*/React.createElement("span", null, getLocale('Choose_an_option'))), /*#__PURE__*/React.createElement("div", {
179
- className: "content"
180
- }, /*#__PURE__*/React.createElement(Fragment, null, filteredOptions.length === 0 && /*#__PURE__*/React.createElement("div", {
181
- className: "search-result-none"
182
- }, getLocale('No_options_available')), filteredOptions.length > 0 && this.renderSelectOptions(filteredOptions)))), isShowCreateBtn && /*#__PURE__*/React.createElement("div", {
183
- className: "mb-create-select-item",
184
- onClick: this.onAddNewOption
185
- }, /*#__PURE__*/React.createElement("i", {
186
- className: "dtable-font dtable-icon-add-table"
187
- }), /*#__PURE__*/React.createElement("span", {
188
- className: "add-new-option"
189
- }, "".concat(getLocale('Add_an_option'), " ").concat(searchVal)))));
102
+ componentDidMount() {
103
+ history.pushState(null, null, '#'); // eslint-disable-line
104
+ window.addEventListener('popstate', this.handleHistaryBack, false);
105
+ }
106
+ componentWillUnmount() {
107
+ window.removeEventListener('popstate', this.handleHistaryBack, false);
108
+ }
109
+ render() {
110
+ const {
111
+ isReadOnly,
112
+ column,
113
+ isSupportNewOption,
114
+ isShowRemoveIcon
115
+ } = this.props;
116
+ const {
117
+ searchVal
118
+ } = this.state;
119
+ const selectedOptions = this.getSelectedOptions();
120
+ const filteredOptions = this.getFilteredOptions();
121
+ let isShowRemoveBtn = !isReadOnly && isShowRemoveIcon;
122
+ let isShowCreateBtn = !isReadOnly && isSupportNewOption && !!searchVal;
123
+ if (isShowCreateBtn) {
124
+ isShowCreateBtn = filteredOptions.length === 0;
190
125
  }
191
- }]);
192
- return MBSelectEditorPopover;
193
- }(React.Component);
126
+ return /*#__PURE__*/React.createElement("div", {
127
+ ref: this.setEditorPopover,
128
+ className: "dtable-ui-mb-editor-popover mb-select-editor-popover",
129
+ style: {
130
+ zIndex: 99
131
+ },
132
+ onClick: this.onContainerClick
133
+ }, /*#__PURE__*/React.createElement(MBEditorHeader, {
134
+ title: column.name,
135
+ leftContent: /*#__PURE__*/React.createElement("i", {
136
+ className: "dtable-font dtable-icon-return"
137
+ }),
138
+ onLeftClick: this.props.onClosePopover
139
+ }), /*#__PURE__*/React.createElement("div", {
140
+ className: "dtable-ui-mb-editor-body dtable-ui-mb-select-editor-body"
141
+ }, /*#__PURE__*/React.createElement("div", {
142
+ className: "mb-selected-item"
143
+ }, /*#__PURE__*/React.createElement("div", {
144
+ className: "title"
145
+ }, getLocale('Current_option')), /*#__PURE__*/React.createElement("div", {
146
+ className: "content"
147
+ }, selectedOptions.length === 0 && /*#__PURE__*/React.createElement("span", {
148
+ className: "empty-placeholder"
149
+ }, getLocale('No_option')), selectedOptions.length > 0 && selectedOptions.map(selectedOption => {
150
+ return /*#__PURE__*/React.createElement(SelectEditorOption, {
151
+ key: selectedOption.id,
152
+ option: selectedOption,
153
+ isShowRemoveIcon: isShowRemoveBtn,
154
+ onDeleteSelectOption: this.onRemoveOption
155
+ });
156
+ }))), /*#__PURE__*/React.createElement("div", {
157
+ className: "mb-search-select-items"
158
+ }, /*#__PURE__*/React.createElement("input", {
159
+ className: "form-control",
160
+ type: "text",
161
+ placeholder: getLocale('Find_an_option'),
162
+ value: searchVal,
163
+ onChange: this.onChangeSearch,
164
+ onClick: this.onInputClick
165
+ })), /*#__PURE__*/React.createElement("div", {
166
+ className: "mb-select-options-container"
167
+ }, /*#__PURE__*/React.createElement("div", {
168
+ className: "title"
169
+ }, /*#__PURE__*/React.createElement("span", null, getLocale('Choose_an_option'))), /*#__PURE__*/React.createElement("div", {
170
+ className: "content"
171
+ }, /*#__PURE__*/React.createElement(Fragment, null, filteredOptions.length === 0 && /*#__PURE__*/React.createElement("div", {
172
+ className: "search-result-none"
173
+ }, getLocale('No_options_available')), filteredOptions.length > 0 && this.renderSelectOptions(filteredOptions)))), isShowCreateBtn && /*#__PURE__*/React.createElement("div", {
174
+ className: "mb-create-select-item",
175
+ onClick: this.onAddNewOption
176
+ }, /*#__PURE__*/React.createElement("i", {
177
+ className: "dtable-font dtable-icon-add-table"
178
+ }), /*#__PURE__*/React.createElement("span", {
179
+ className: "add-new-option"
180
+ }, "".concat(getLocale('Add_an_option'), " ").concat(searchVal)))));
181
+ }
182
+ }
194
183
  MBSelectEditorPopover.defaultProps = {
195
184
  isReadOnly: false,
196
185
  isShowRemoveIcon: false,
@@ -1,47 +1,40 @@
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
1
  import React from 'react';
7
2
  import { getLocale } from '../../lang';
8
3
  import './index.css';
9
- var PCSelectEditorPopover = /*#__PURE__*/function (_React$Component) {
10
- _inherits(PCSelectEditorPopover, _React$Component);
11
- var _super = _createSuper(PCSelectEditorPopover);
12
- function PCSelectEditorPopover(props) {
13
- var _this;
14
- _classCallCheck(this, PCSelectEditorPopover);
15
- _this = _super.call(this, props);
16
- _this.onValueChanged = function (event) {
17
- var value = event.target.value;
18
- _this.setState({
4
+ class PCSelectEditorPopover extends React.Component {
5
+ constructor(props) {
6
+ super(props);
7
+ this.onValueChanged = event => {
8
+ let value = event.target.value;
9
+ this.setState({
19
10
  searchValue: value
20
11
  });
21
12
  };
22
- _this.onInputClick = function (event) {
13
+ this.onInputClick = event => {
23
14
  event.nativeEvent.stopImmediatePropagation();
24
15
  event.stopPropagation();
25
16
  };
26
- _this.onAddNewOption = function () {
27
- var name = _this.state.searchValue.trim();
28
- _this.props.onAddNewOption(name);
17
+ this.onAddNewOption = () => {
18
+ let name = this.state.searchValue.trim();
19
+ this.props.onAddNewOption(name);
29
20
  };
30
- _this.onOptionItemToggle = function (item) {
31
- _this.props.onOptionItemToggle(item);
21
+ this.onOptionItemToggle = item => {
22
+ this.props.onOptionItemToggle(item);
32
23
  };
33
- _this.getFilterOptions = function () {
34
- var options = _this.props.options;
35
- var filter = _this.state.searchValue.toLowerCase();
24
+ this.getFilterOptions = () => {
25
+ let {
26
+ options
27
+ } = this.props;
28
+ let filter = this.state.searchValue.toLowerCase();
36
29
  if (!filter) {
37
30
  return options;
38
31
  }
39
- return options.filter(function (option) {
32
+ return options.filter(option => {
40
33
  return option.name.toString().toLowerCase().indexOf(filter) > -1;
41
34
  });
42
35
  };
43
- _this.getOptionStyle = function (option) {
44
- var textColor = option.textColor || null;
36
+ this.getOptionStyle = option => {
37
+ const textColor = option.textColor || null;
45
38
  return {
46
39
  display: 'inline-block',
47
40
  padding: '0px 10px',
@@ -53,68 +46,67 @@ var PCSelectEditorPopover = /*#__PURE__*/function (_React$Component) {
53
46
  color: textColor
54
47
  };
55
48
  };
56
- _this.state = {
49
+ this.state = {
57
50
  searchValue: ''
58
51
  };
59
- return _this;
60
52
  }
61
- _createClass(PCSelectEditorPopover, [{
62
- key: "render",
63
- value: function render() {
64
- var _this2 = this;
65
- var options = this.getFilterOptions();
66
- var _this$props = this.props,
67
- popoverPosition = _this$props.popoverPosition,
68
- selectedOptions = _this$props.selectedOptions,
69
- isSupportNewOption = _this$props.isSupportNewOption;
70
- var searchValue = this.state.searchValue;
71
- var popoverStyle = Object.assign({}, _objectSpread({}, popoverPosition), {
72
- position: 'absolute'
53
+ render() {
54
+ let options = this.getFilterOptions();
55
+ let {
56
+ popoverPosition,
57
+ selectedOptions,
58
+ isSupportNewOption
59
+ } = this.props;
60
+ let {
61
+ searchValue
62
+ } = this.state;
63
+ let popoverStyle = Object.assign({}, {
64
+ ...popoverPosition
65
+ }, {
66
+ position: 'absolute'
67
+ });
68
+ return /*#__PURE__*/React.createElement("div", {
69
+ className: "dtable-ui-editor-popover dtable-ui-select-editor-popover",
70
+ style: popoverStyle
71
+ }, /*#__PURE__*/React.createElement("div", {
72
+ className: "select-options-search"
73
+ }, /*#__PURE__*/React.createElement("input", {
74
+ className: "form-control",
75
+ onChange: this.onValueChanged,
76
+ onClick: this.onInputClick,
77
+ placeholder: getLocale('Find_an_option')
78
+ })), /*#__PURE__*/React.createElement("div", {
79
+ className: "select-options-container"
80
+ }, options.length > 0 && options.map((option, index) => {
81
+ let optionStyle = this.getOptionStyle(option);
82
+ let isSelect = selectedOptions.some(selectedOption => {
83
+ return selectedOption.id === option.id;
73
84
  });
74
85
  return /*#__PURE__*/React.createElement("div", {
75
- className: "dtable-ui-editor-popover dtable-ui-select-editor-popover",
76
- style: popoverStyle
86
+ key: index,
87
+ className: "select-option-item",
88
+ onClick: this.onOptionItemToggle.bind(this, option)
77
89
  }, /*#__PURE__*/React.createElement("div", {
78
- className: "select-options-search"
79
- }, /*#__PURE__*/React.createElement("input", {
80
- className: "form-control",
81
- onChange: this.onValueChanged,
82
- onClick: this.onInputClick,
83
- placeholder: getLocale('Find_an_option')
84
- })), /*#__PURE__*/React.createElement("div", {
85
- className: "select-options-container"
86
- }, options.length > 0 && options.map(function (option, index) {
87
- var optionStyle = _this2.getOptionStyle(option);
88
- var isSelect = selectedOptions.some(function (selectedOption) {
89
- return selectedOption.id === option.id;
90
- });
91
- return /*#__PURE__*/React.createElement("div", {
92
- key: index,
93
- className: "select-option-item",
94
- onClick: _this2.onOptionItemToggle.bind(_this2, option)
95
- }, /*#__PURE__*/React.createElement("div", {
96
- className: "option-info"
97
- }, /*#__PURE__*/React.createElement("div", {
98
- className: "option-name",
99
- style: optionStyle,
100
- title: option.name
101
- }, option.name)), /*#__PURE__*/React.createElement("div", {
102
- className: "option-checked"
103
- }, isSelect && /*#__PURE__*/React.createElement("i", {
104
- className: "dtable-font dtable-icon-check-mark"
105
- })));
106
- }), options.length === 0 && /*#__PURE__*/React.createElement("div", {
107
- className: "search-option-null"
108
- }, getLocale('No_options_available'))), isSupportNewOption && !!searchValue && /*#__PURE__*/React.createElement("div", {
109
- className: "select-options-add",
110
- onClick: this.onAddNewOption
111
- }, /*#__PURE__*/React.createElement("i", {
112
- className: "dtable-font dtable-icon-add-table"
113
- }), /*#__PURE__*/React.createElement("span", null, getLocale('Add_an_option'), ' ', searchValue)));
114
- }
115
- }]);
116
- return PCSelectEditorPopover;
117
- }(React.Component);
90
+ className: "option-info"
91
+ }, /*#__PURE__*/React.createElement("div", {
92
+ className: "option-name",
93
+ style: optionStyle,
94
+ title: option.name
95
+ }, option.name)), /*#__PURE__*/React.createElement("div", {
96
+ className: "option-checked"
97
+ }, isSelect && /*#__PURE__*/React.createElement("i", {
98
+ className: "dtable-font dtable-icon-check-mark"
99
+ })));
100
+ }), options.length === 0 && /*#__PURE__*/React.createElement("div", {
101
+ className: "search-option-null"
102
+ }, getLocale('No_options_available'))), isSupportNewOption && !!searchValue && /*#__PURE__*/React.createElement("div", {
103
+ className: "select-options-add",
104
+ onClick: this.onAddNewOption
105
+ }, /*#__PURE__*/React.createElement("i", {
106
+ className: "dtable-font dtable-icon-add-table"
107
+ }), /*#__PURE__*/React.createElement("span", null, getLocale('Add_an_option'), ' ', searchValue)));
108
+ }
109
+ }
118
110
  PCSelectEditorPopover.defaultProps = {
119
111
  popoverPosition: {},
120
112
  options: [],
@@ -1,25 +1,14 @@
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
- var SelectEditorOption = /*#__PURE__*/function (_React$Component) {
7
- _inherits(SelectEditorOption, _React$Component);
8
- var _super = _createSuper(SelectEditorOption);
9
- function SelectEditorOption() {
10
- var _this;
11
- _classCallCheck(this, SelectEditorOption);
12
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
13
- args[_key] = arguments[_key];
14
- }
15
- _this = _super.call.apply(_super, [this].concat(args));
16
- _this.onDeleteOption = function (event) {
2
+ class SelectEditorOption extends React.Component {
3
+ constructor() {
4
+ super(...arguments);
5
+ this.onDeleteOption = event => {
17
6
  event.nativeEvent.stopImmediatePropagation();
18
7
  event.stopPropagation();
19
- _this.props.onDeleteSelectOption(_this.props.option);
8
+ this.props.onDeleteSelectOption(this.props.option);
20
9
  };
21
- _this.getContainerStyle = function () {
22
- var option = _this.props.option;
10
+ this.getContainerStyle = () => {
11
+ let option = this.props.option;
23
12
  return {
24
13
  display: 'inline-flex',
25
14
  justifyContent: 'center',
@@ -31,8 +20,8 @@ var SelectEditorOption = /*#__PURE__*/function (_React$Component) {
31
20
  backgroundColor: option.color
32
21
  };
33
22
  };
34
- _this.getOptionStyle = function (option) {
35
- var textColor = option.textColor || null;
23
+ this.getOptionStyle = option => {
24
+ const textColor = option.textColor || null;
36
25
  return {
37
26
  flex: 1,
38
27
  display: 'flex',
@@ -41,8 +30,8 @@ var SelectEditorOption = /*#__PURE__*/function (_React$Component) {
41
30
  color: textColor
42
31
  };
43
32
  };
44
- _this.getOperationStyle = function (option) {
45
- var textColor = option.textColor || null;
33
+ this.getOperationStyle = option => {
34
+ const textColor = option.textColor || null;
46
35
  return {
47
36
  height: '20px',
48
37
  width: '16px',
@@ -51,41 +40,37 @@ var SelectEditorOption = /*#__PURE__*/function (_React$Component) {
51
40
  transform: 'scale(.8)'
52
41
  };
53
42
  };
54
- return _this;
55
43
  }
56
- _createClass(SelectEditorOption, [{
57
- key: "render",
58
- value: function render() {
59
- var _this$props = this.props,
60
- option = _this$props.option,
61
- isShowRemoveIcon = _this$props.isShowRemoveIcon;
62
- var containerStyle = this.getContainerStyle();
63
- var optionStyle = this.getOptionStyle(option);
64
- var operationStyle = this.getOperationStyle(option);
65
- return /*#__PURE__*/React.createElement("div", {
66
- className: "dtable-ui select-option-item",
67
- style: containerStyle
68
- }, /*#__PURE__*/React.createElement("div", {
69
- className: "option-info",
70
- style: optionStyle
71
- }, /*#__PURE__*/React.createElement("div", {
72
- className: "option-name",
73
- title: option.name
74
- }, option.name)), isShowRemoveIcon && /*#__PURE__*/React.createElement("div", {
75
- className: "option-remove",
76
- style: operationStyle,
77
- onClick: this.onDeleteOption
78
- }, /*#__PURE__*/React.createElement("i", {
79
- className: "dtable-font dtable-icon-fork-number",
80
- style: {
81
- fontSize: '12px',
82
- lineHeight: '20px'
83
- }
84
- })));
85
- }
86
- }]);
87
- return SelectEditorOption;
88
- }(React.Component);
44
+ render() {
45
+ let {
46
+ option,
47
+ isShowRemoveIcon
48
+ } = this.props;
49
+ let containerStyle = this.getContainerStyle();
50
+ let optionStyle = this.getOptionStyle(option);
51
+ let operationStyle = this.getOperationStyle(option);
52
+ return /*#__PURE__*/React.createElement("div", {
53
+ className: "dtable-ui select-option-item",
54
+ style: containerStyle
55
+ }, /*#__PURE__*/React.createElement("div", {
56
+ className: "option-info",
57
+ style: optionStyle
58
+ }, /*#__PURE__*/React.createElement("div", {
59
+ className: "option-name",
60
+ title: option.name
61
+ }, option.name)), isShowRemoveIcon && /*#__PURE__*/React.createElement("div", {
62
+ className: "option-remove",
63
+ style: operationStyle,
64
+ onClick: this.onDeleteOption
65
+ }, /*#__PURE__*/React.createElement("i", {
66
+ className: "dtable-font dtable-icon-fork-number",
67
+ style: {
68
+ fontSize: '12px',
69
+ lineHeight: '20px'
70
+ }
71
+ })));
72
+ }
73
+ }
89
74
  SelectEditorOption.defaultProps = {
90
75
  isShowRemoveIcon: false
91
76
  };