iglooform 2.5.39 → 2.5.41

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 (39) hide show
  1. package/es/button/style/index.less +79 -51
  2. package/es/checkbox/index.d.ts +1 -0
  3. package/es/checkbox/index.js +5 -2
  4. package/es/declaration/index.js +21 -1
  5. package/es/form/addable-section/index.js +25 -1
  6. package/es/form/element/index.js +26 -4
  7. package/es/form/elements.js +1 -1
  8. package/es/free-form/addable-section/index.js +60 -7
  9. package/es/free-form/element/index.js +2 -2
  10. package/es/radio/index.d.ts +1 -0
  11. package/es/radio/index.js +5 -2
  12. package/es/radio/radio-group-with-other.js +19 -3
  13. package/es/select/attached-select.d.ts +1 -0
  14. package/es/select/attached-select.js +14 -38
  15. package/es/select/style/index.less +7 -2
  16. package/es/types.d.ts +1 -0
  17. package/es/utils/form-utils.js +3 -3
  18. package/es/utils/option-utils.d.ts +1 -0
  19. package/es/utils/option-utils.js +14 -1
  20. package/lib/button/style/index.less +79 -51
  21. package/lib/checkbox/index.d.ts +1 -0
  22. package/lib/checkbox/index.js +4 -1
  23. package/lib/declaration/index.js +21 -1
  24. package/lib/form/addable-section/index.js +25 -1
  25. package/lib/form/element/index.js +26 -4
  26. package/lib/form/elements.js +1 -1
  27. package/lib/free-form/addable-section/index.js +60 -7
  28. package/lib/free-form/element/index.js +2 -2
  29. package/lib/radio/index.d.ts +1 -0
  30. package/lib/radio/index.js +4 -1
  31. package/lib/radio/radio-group-with-other.js +18 -2
  32. package/lib/select/attached-select.d.ts +1 -0
  33. package/lib/select/attached-select.js +13 -37
  34. package/lib/select/style/index.less +7 -2
  35. package/lib/types.d.ts +1 -0
  36. package/lib/utils/form-utils.js +3 -3
  37. package/lib/utils/option-utils.d.ts +1 -0
  38. package/lib/utils/option-utils.js +16 -1
  39. package/package.json +1 -1
@@ -3,6 +3,10 @@
3
3
  @btn-hover-color: @purple-medium;
4
4
  @btn-hover-bg: @purple-medium;
5
5
 
6
+ @btn-green-color: #108043;
7
+ @btn-red-color: #de3618;
8
+ @btn-yellow-color: #cf8909;
9
+
6
10
  .ant-btn {
7
11
  padding: 0 16px;
8
12
  text-shadow: none;
@@ -66,6 +70,81 @@
66
70
  background-color: @primary-color;
67
71
  }
68
72
  }
73
+
74
+ &.green {
75
+ background: @btn-green-color;
76
+ border-color: @btn-green-color;
77
+ --antd-wave-shadow-color: @btn-green-color;
78
+
79
+ &:hover,
80
+ &:active,
81
+ &:focus {
82
+ background: @btn-green-color;
83
+ opacity: 0.9;
84
+ }
85
+
86
+ &[disabled] {
87
+ background: @btn-green-color;
88
+ opacity: 0.3;
89
+
90
+ &:hover,
91
+ &:active,
92
+ &:focus {
93
+ border-color: @btn-green-color;
94
+ background: @btn-green-color;
95
+ }
96
+ }
97
+ }
98
+
99
+ &.yellow {
100
+ background: @btn-yellow-color;
101
+ border-color: @btn-yellow-color;
102
+ --antd-wave-shadow-color: @btn-yellow-color;
103
+
104
+ &:hover,
105
+ &:active,
106
+ &:focus {
107
+ background: @btn-yellow-color;
108
+ opacity: 0.9;
109
+ }
110
+
111
+ &[disabled] {
112
+ background: @btn-yellow-color;
113
+ opacity: 0.3;
114
+
115
+ &:hover,
116
+ &:active,
117
+ &:focus {
118
+ border-color: @btn-yellow-color;
119
+ background: @btn-yellow-color;
120
+ }
121
+ }
122
+ }
123
+
124
+ &.red {
125
+ background: @btn-red-color;
126
+ border-color: @btn-red-color;
127
+ --antd-wave-shadow-color: @btn-red-color;
128
+
129
+ &:hover,
130
+ &:active,
131
+ &:focus {
132
+ background: @btn-red-color;
133
+ opacity: 0.9;
134
+ }
135
+
136
+ &[disabled] {
137
+ background: @btn-red-color;
138
+ opacity: 0.3;
139
+
140
+ &:hover,
141
+ &:active,
142
+ &:focus {
143
+ border-color: @btn-red-color;
144
+ background: @btn-red-color;
145
+ }
146
+ }
147
+ }
69
148
  }
70
149
 
71
150
  .ant-btn-link {
@@ -139,54 +218,3 @@
139
218
  .ant-btn-icon-only {
140
219
  width: auto;
141
220
  }
142
-
143
- .green {
144
- background: #108043;
145
- border: 0px;
146
-
147
- &:hover,
148
- &:active,
149
- &:focus {
150
- background: #108043;
151
- opacity: 0.9;
152
- }
153
- }
154
-
155
- .yellow {
156
- background: #cf8909;
157
- border: 0px;
158
-
159
- &:hover,
160
- &:active,
161
- &:focus {
162
- background: #cf8909;
163
- opacity: 0.9;
164
- }
165
- }
166
-
167
- .red {
168
- background: #de3618;
169
- border: 0px;
170
-
171
- &:hover,
172
- &:active,
173
- &:focus {
174
- background: #de3618;
175
- opacity: 0.9;
176
- }
177
- }
178
-
179
- button[class~='red'] {
180
- border-color: #de3618 !important;
181
- --antd-wave-shadow-color: #de3618 !important;
182
- }
183
-
184
- button[class~='yellow'] {
185
- border-color: #cf8909 !important;
186
- --antd-wave-shadow-color: #cf8909 !important;
187
- }
188
-
189
- button[class~='green'] {
190
- border-color: #108043 !important;
191
- --antd-wave-shadow-color: #108043 !important;
192
- }
@@ -15,6 +15,7 @@ export interface IProps extends IglooComponentProps, Omit<CheckboxGroupProps, 'o
15
15
  className?: string;
16
16
  radioType?: string;
17
17
  options: Option[];
18
+ preview?: boolean;
18
19
  }
19
20
  declare const IglooCheckbox: FC<Props>;
20
21
  export default IglooCheckbox;
@@ -4,7 +4,7 @@ import "antd/es/row/style";
4
4
  import _Row from "antd/es/row";
5
5
  import "antd/es/checkbox/style";
6
6
  import _Checkbox from "antd/es/checkbox";
7
- var _excluded = ["className", "options", "value", "clearWhenOptionsUpdated"],
7
+ var _excluded = ["className", "options", "value", "clearWhenOptionsUpdated", "preview"],
8
8
  _excluded2 = ["label", "value", "extraInfo"];
9
9
 
10
10
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -35,7 +35,7 @@ import Typography from '../typography';
35
35
  import formMethods from '../utils/form-methods';
36
36
  import omit from 'omit.js';
37
37
  import classnames from 'classnames';
38
- import { compareOptions, optionsHOC } from '../utils/option-utils';
38
+ import { compareOptions, optionsHOC, previewSelectedOptions } from '../utils/option-utils';
39
39
  import LocaleContext from '../locale/locale-context';
40
40
  import emptyIcon from '../radio/style/empty.svg';
41
41
  import './style/index.less';
@@ -62,6 +62,7 @@ var InnerCheckboxGroup = function InnerCheckboxGroup(_ref) {
62
62
  value = _ref.value,
63
63
  _ref$clearWhenOptions = _ref.clearWhenOptionsUpdated,
64
64
  clearWhenOptionsUpdated = _ref$clearWhenOptions === void 0 ? false : _ref$clearWhenOptions,
65
+ preview = _ref.preview,
65
66
  rest = _objectWithoutProperties(_ref, _excluded);
66
67
 
67
68
  var _useState = useState(value),
@@ -99,6 +100,7 @@ var InnerCheckboxGroup = function InnerCheckboxGroup(_ref) {
99
100
  originOptions.current = options;
100
101
  }
101
102
  }, [options]);
103
+ if (preview) return previewSelectedOptions(options, value);
102
104
  return _jsxs(_Checkbox.Group, _objectSpread(_objectSpread({}, omit(rest, formMethods)), {}, {
103
105
  className: classnames('igloo-checkbox-group', className),
104
106
  value: value,
@@ -155,6 +157,7 @@ var InnerCheckboxGroup = function InnerCheckboxGroup(_ref) {
155
157
  };
156
158
 
157
159
  export var CheckboxGroup = optionsHOC(InnerCheckboxGroup);
160
+ CheckboxGroup.isPreviewSupport = true;
158
161
 
159
162
  CheckboxGroup.formItemPropsHandler = function () {
160
163
  return {};
@@ -55,13 +55,33 @@ var Declaration = function Declaration(_ref) {
55
55
  };
56
56
 
57
57
  Declaration.formItemPropsHandler = function (config) {
58
+ var rules = []; // 用户没有明确指明 `required: false`时,需要加上验证
59
+
60
+ if (config.required !== false) {
61
+ var _config$requiredMessa;
62
+
63
+ var requiredMessage = (_config$requiredMessa = config.requiredMessage) !== null && _config$requiredMessa !== void 0 ? _config$requiredMessa : 'Please check the declaration to proceed.';
64
+ rules.push({
65
+ validator: function validator(_, value) {
66
+ return new Promise(function (resolve, reject) {
67
+ if (!value) {
68
+ return reject(new Error(requiredMessage));
69
+ }
70
+
71
+ return resolve('ok');
72
+ });
73
+ }
74
+ });
75
+ }
76
+
58
77
  return {
59
78
  getValueFromEvent: function getValueFromEvent(e) {
60
79
  return e.target.checked;
61
80
  },
62
81
  valuePropName: 'checked',
63
82
  fullRow: true,
64
- requiredMessage: 'Please check the declaration to proceed.'
83
+ required: false,
84
+ rules: rules
65
85
  };
66
86
  };
67
87
 
@@ -185,9 +185,33 @@ var AddableSection = function AddableSection(_ref) {
185
185
  children: _jsx(_Row, {
186
186
  gutter: [32, preview ? 16 : 24],
187
187
  children: elements.map(function (child, index) {
188
+ var _child = _objectSpread({}, child);
189
+
190
+ if (Array.isArray(child.asserts)) {
191
+ _child.asserts = child.asserts.map(function (assert) {
192
+ return _objectSpread(_objectSpread({}, assert), {}, {
193
+ field: calcNamePath(parentName, assert.field)
194
+ });
195
+ });
196
+ }
197
+
198
+ if (Array.isArray(child.requiredAsserts)) {
199
+ _child.requiredAsserts = child.requiredAsserts.map(function (assert) {
200
+ return _objectSpread(_objectSpread({}, assert), {}, {
201
+ field: calcNamePath(parentName, assert.field)
202
+ });
203
+ });
204
+ }
205
+
206
+ if (Array.isArray(child.dependencies)) {
207
+ _child.dependencies = child.dependencies.map(function (path) {
208
+ return calcNamePath(parentName, path);
209
+ });
210
+ }
211
+
188
212
  return _jsx(Element, {
189
213
  parentName: parentName,
190
- config: child,
214
+ config: _child,
191
215
  disabled: elementProps.disabled || disabled,
192
216
  preview: preview,
193
217
  setShowStepButton: setShowStepButton
@@ -64,7 +64,7 @@ var Element = function Element(_ref) {
64
64
  var type = config.type,
65
65
  label = config.label,
66
66
  previewLabel = config.previewLabel;
67
- invariant(!(config.selectValue || config.copyValue || config.initialValue) || config.name, 'Form item with selectValue/copyValue/initialValue should have a name.');
67
+ invariant(!(config.selectValue || config.copyValue || config.initialValue) || config.name !== undefined, 'Form item with selectValue/copyValue/initialValue should have a name.');
68
68
 
69
69
  var _useContext = useContext(FormContext),
70
70
  form = _useContext.form,
@@ -161,7 +161,7 @@ var Element = function Element(_ref) {
161
161
  previewFormater = _calcFormItemProps.previewFormater;
162
162
 
163
163
  useEffect(function () {
164
- if (!formItemProps.name || preview || !formItemProps.copiedValue.copied) return;
164
+ if (formItemProps.name === undefined || preview || !formItemProps.copiedValue.copied) return;
165
165
  var originalValue = form === null || form === void 0 ? void 0 : form.getFieldValue(formItemProps.name);
166
166
  var value = formItemProps.copiedValue.value;
167
167
 
@@ -176,7 +176,7 @@ var Element = function Element(_ref) {
176
176
  }]);
177
177
  }, [formItemProps.copiedValue.value]);
178
178
  useEffect(function () {
179
- if (!formItemProps.name || preview || !formItemProps.selectedValue.selected) return;
179
+ if (formItemProps.name === undefined || preview || !formItemProps.selectedValue.selected) return;
180
180
  form && form.setFields([{
181
181
  name: formItemProps.name,
182
182
  value: formItemProps.selectedValue.value,
@@ -213,6 +213,28 @@ var Element = function Element(_ref) {
213
213
  return form;
214
214
  };
215
215
 
216
+ var renderPreviewValue = function renderPreviewValue() {
217
+ if (previewFormater) return previewFormater(value, form);
218
+
219
+ if (Component === null || Component === void 0 ? void 0 : Component.isPreviewSupport) {
220
+ var extra = {
221
+ value: value,
222
+ preview: true
223
+ };
224
+ return _jsx(Component, _objectSpread(_objectSpread({}, elementProps), {}, {
225
+ disabled: elementProps.disabled || disabled,
226
+ containerRef: ref,
227
+ setFieldError: setFieldError,
228
+ setFieldValue: setFieldValue,
229
+ setShowStepButton: setShowStepButton,
230
+ getFormInstance: getFormInstance,
231
+ validateField: validateField
232
+ }, extra));
233
+ }
234
+
235
+ return _typeof(value) === 'object' ? JSON.stringify(value) : value;
236
+ };
237
+
216
238
  var value = form === null || form === void 0 ? void 0 : form.getFieldValue(formItemProps.name);
217
239
  var error = form === null || form === void 0 ? void 0 : form.getFieldError(formItemProps.name);
218
240
  useEffect(function () {
@@ -323,7 +345,7 @@ var Element = function Element(_ref) {
323
345
  children: [error && !!error.length && _jsx(AlertFilled, {
324
346
  className: "igloo-element-preview-value-icon"
325
347
  }), _jsx("div", {
326
- children: previewFormater ? previewFormater(value, form) : _typeof(value) === 'object' ? JSON.stringify(value) : value
348
+ children: renderPreviewValue()
327
349
  })]
328
350
  })]
329
351
  })
@@ -66,7 +66,7 @@ var useComponent = function useComponent(config) {
66
66
  return {
67
67
  Component: Component,
68
68
  formItemProps: formItemProps,
69
- withoutForm: type === 'Divider' || Boolean(config.withoutForm) || !config.name
69
+ withoutForm: type === 'Divider' || Boolean(config.withoutForm) || config.name === undefined
70
70
  };
71
71
  }, [config.type]);
72
72
  };
@@ -202,10 +202,34 @@ var AddableSection = function AddableSection(props) {
202
202
  return children.map(function (c, index) {
203
203
  var _c$type;
204
204
 
205
+ var _child = _objectSpread({}, c.props);
206
+
207
+ if (Array.isArray(_child.asserts)) {
208
+ _child.asserts = _child.asserts.map(function (assert) {
209
+ return _objectSpread(_objectSpread({}, assert), {}, {
210
+ field: calcNamePath(parentName, assert.field)
211
+ });
212
+ });
213
+ }
214
+
215
+ if (Array.isArray(_child.requiredAsserts)) {
216
+ _child.requiredAsserts = _child.requiredAsserts.map(function (assert) {
217
+ return _objectSpread(_objectSpread({}, assert), {}, {
218
+ field: calcNamePath(parentName, assert.field)
219
+ });
220
+ });
221
+ }
222
+
223
+ if (Array.isArray(_child.dependencies)) {
224
+ _child.dependencies = _child.dependencies.map(function (path) {
225
+ return calcNamePath(parentName, path);
226
+ });
227
+ }
228
+
205
229
  if (['Igloo_Free_Form_Item', 'Igloo_Free_Form_Section', 'Igloo_Free_Form_AddableSection'].includes(c === null || c === void 0 ? void 0 : (_c$type = c.type) === null || _c$type === void 0 ? void 0 : _c$type.displayName)) {
206
230
  return /*#__PURE__*/cloneElement(c, _objectSpread(_objectSpread({
207
231
  key: index
208
- }, c.props), {}, {
232
+ }, _child), {}, {
209
233
  parentName: parentName,
210
234
  setShowStepButton: setShowStepButton,
211
235
  preview: preview,
@@ -217,12 +241,41 @@ var AddableSection = function AddableSection(props) {
217
241
  });
218
242
  }
219
243
 
220
- return /*#__PURE__*/isValidElement(children) ? /*#__PURE__*/cloneElement(children, _objectSpread(_objectSpread({}, children.props), {}, {
221
- parentName: parentName,
222
- setShowStepButton: setShowStepButton,
223
- preview: preview,
224
- disabledFromParent: elementProps.disabled
225
- })) : children;
244
+ if ( /*#__PURE__*/isValidElement(children)) {
245
+ var _child = _objectSpread({}, children.props);
246
+
247
+ if (Array.isArray(_child.asserts)) {
248
+ _child.asserts = _child.asserts.map(function (assert) {
249
+ return _objectSpread(_objectSpread({}, assert), {}, {
250
+ field: calcNamePath(parentName, assert.field)
251
+ });
252
+ });
253
+ }
254
+
255
+ if (Array.isArray(_child.requiredAsserts)) {
256
+ _child.requiredAsserts = _child.requiredAsserts.map(function (assert) {
257
+ return _objectSpread(_objectSpread({}, assert), {}, {
258
+ field: calcNamePath(parentName, assert.field)
259
+ });
260
+ });
261
+ }
262
+
263
+ if (Array.isArray(_child.dependencies)) {
264
+ _child.dependencies = _child.dependencies.map(function (path) {
265
+ return calcNamePath(parentName, path);
266
+ });
267
+ }
268
+
269
+ return /*#__PURE__*/cloneElement(children, _objectSpread(_objectSpread({}, _child), {}, {
270
+ // @ts-ignore
271
+ parentName: parentName,
272
+ setShowStepButton: setShowStepButton,
273
+ preview: preview,
274
+ disabledFromParent: elementProps.disabled
275
+ }));
276
+ }
277
+
278
+ return children;
226
279
  };
227
280
 
228
281
  if (!display) {
@@ -155,7 +155,7 @@ var Element = function Element(props) {
155
155
  elementProps = _calcFormItemProps.elementProps;
156
156
 
157
157
  useEffect(function () {
158
- if (!formItemProps.name || preview || !formItemProps.copiedValue.copied) return;
158
+ if (formItemProps.name === undefined || preview || !formItemProps.copiedValue.copied) return;
159
159
  var originalValue = form === null || form === void 0 ? void 0 : form.getFieldValue(formItemProps.name);
160
160
  var value = formItemProps.copiedValue.value;
161
161
 
@@ -170,7 +170,7 @@ var Element = function Element(props) {
170
170
  }]);
171
171
  }, [formItemProps.copiedValue.value]);
172
172
  useEffect(function () {
173
- if (!formItemProps.name || preview || !formItemProps.selectedValue.selected) return;
173
+ if (formItemProps.name === undefined || preview || !formItemProps.selectedValue.selected) return;
174
174
  form && form.setFields([{
175
175
  name: formItemProps.name,
176
176
  value: formItemProps.selectedValue.value,
@@ -15,6 +15,7 @@ export interface IProps extends IglooComponentProps, Omit<RadioGroupProps, 'opti
15
15
  className?: string;
16
16
  radioType?: string;
17
17
  options: Option[];
18
+ preview?: boolean;
18
19
  }
19
20
  export declare const InnerRadioGroup: FC<IProps>;
20
21
  export declare const RadioGroup: FC<import("../utils/option-utils").HOCProps & IProps>;
package/es/radio/index.js CHANGED
@@ -4,7 +4,7 @@ import "antd/es/row/style";
4
4
  import _Row from "antd/es/row";
5
5
  import "antd/es/radio/style";
6
6
  import _Radio from "antd/es/radio";
7
- var _excluded = ["className", "options", "radioType", "value", "clearWhenOptionsUpdated"],
7
+ var _excluded = ["className", "options", "radioType", "value", "clearWhenOptionsUpdated", "preview"],
8
8
  _excluded2 = ["label", "value", "extraInfo"];
9
9
 
10
10
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -38,7 +38,7 @@ import './style/index.less';
38
38
  import Typography from '../typography';
39
39
  import LocaleContext from '../locale/locale-context';
40
40
  import emptyIcon from './style/empty.svg';
41
- import { compareOptions, optionsHOC } from '../utils/option-utils';
41
+ import { compareOptions, optionsHOC, previewSelectedOptions } from '../utils/option-utils';
42
42
 
43
43
  var IglooRadio = function IglooRadio(props) {
44
44
  return _jsx(_Radio, _objectSpread({}, omit(props, formMethods)));
@@ -56,6 +56,7 @@ export var InnerRadioGroup = function InnerRadioGroup(_ref) {
56
56
  value = _ref.value,
57
57
  _ref$clearWhenOptions = _ref.clearWhenOptionsUpdated,
58
58
  clearWhenOptionsUpdated = _ref$clearWhenOptions === void 0 ? false : _ref$clearWhenOptions,
59
+ preview = _ref.preview,
59
60
  rest = _objectWithoutProperties(_ref, _excluded);
60
61
 
61
62
  var _useState = useState(value),
@@ -93,6 +94,7 @@ export var InnerRadioGroup = function InnerRadioGroup(_ref) {
93
94
  originOptions.current = options;
94
95
  }
95
96
  }, [options]);
97
+ if (preview) return previewSelectedOptions(options, value);
96
98
  return _jsxs(_Radio.Group, _objectSpread(_objectSpread({}, omit(rest, formMethods)), {}, {
97
99
  className: classnames('igloo-radio-group', className),
98
100
  value: value,
@@ -168,6 +170,7 @@ export var InnerRadioGroup = function InnerRadioGroup(_ref) {
168
170
  }));
169
171
  };
170
172
  export var RadioGroup = optionsHOC(InnerRadioGroup);
173
+ RadioGroup.isPreviewSupport = true;
171
174
 
172
175
  RadioGroup.formItemPropsHandler = function () {
173
176
  return {};
@@ -31,7 +31,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
31
31
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
32
32
 
33
33
  import { jsx as _jsx } from "react/jsx-runtime";
34
- import { useContext, useState, useEffect, useRef } from 'react';
34
+ import { useContext, useState, useEffect, useRef, useMemo } from 'react';
35
35
  import { RadioGroup } from './index';
36
36
  import { TextArea } from '../input';
37
37
  import { LocaleContext } from '../locale';
@@ -86,6 +86,7 @@ var InnerRadioGroupWithOther = function InnerRadioGroupWithOther(_ref) {
86
86
  }, [options]);
87
87
 
88
88
  var handleChange = function handleChange(e) {
89
+ enableOther(true);
89
90
  onChange && onChange(e);
90
91
  };
91
92
 
@@ -97,10 +98,23 @@ var InnerRadioGroupWithOther = function InnerRadioGroupWithOther(_ref) {
97
98
  var _useContext = useContext(LocaleContext),
98
99
  formatMessage = _useContext.formatMessage;
99
100
 
101
+ var otherValue = useMemo(function () {
102
+ return value === otherKey ? '' : value;
103
+ }, [value]);
104
+ var optionValueList = useMemo(function () {
105
+ return options.map(function (e) {
106
+ return e.value;
107
+ });
108
+ }, [options]);
109
+ var radioGroupValue = useMemo(function () {
110
+ if (otherEnabled) return otherKey;
111
+ if (optionValueList.includes(value) || value === undefined) return value;
112
+ return otherKey;
113
+ }, [options, otherEnabled, value]);
100
114
  return _jsx("div", {
101
115
  className: "igloo-reason-selector",
102
116
  children: _jsx(RadioGroup, _objectSpread({
103
- value: otherEnabled ? otherKey : value,
117
+ value: radioGroupValue,
104
118
  onChange: handleRadioChange,
105
119
  options: [].concat(_toConsumableArray(options), [{
106
120
  label: otherOptionLabel || formatMessage({
@@ -109,7 +123,8 @@ var InnerRadioGroupWithOther = function InnerRadioGroupWithOther(_ref) {
109
123
  value: otherKey,
110
124
  extraInfo: {
111
125
  content: _jsx(TextArea, {
112
- onChange: handleChange
126
+ onChange: handleChange,
127
+ value: otherValue
113
128
  }),
114
129
  shownTrigger: 'checked'
115
130
  }
@@ -119,4 +134,5 @@ var InnerRadioGroupWithOther = function InnerRadioGroupWithOther(_ref) {
119
134
  };
120
135
 
121
136
  var RadioGroupWithOther = optionsHOC(InnerRadioGroupWithOther);
137
+ RadioGroupWithOther.isPreviewSupport = true;
122
138
  export default RadioGroupWithOther;
@@ -5,6 +5,7 @@ import { ComponentProps } from '../utils/option-utils';
5
5
  export declare const Option: import("rc-select/lib/Option").OptionFC, OptGroup: import("rc-select/lib/OptGroup").OptionGroupFC;
6
6
  declare type Props = SelectProps<SelectValue> & IglooComponentProps & {
7
7
  multiple?: boolean;
8
+ preview?: boolean;
8
9
  } & ComponentProps;
9
10
  declare type OptionType = typeof Option;
10
11
  declare type OptGroupType = typeof OptGroup;
@@ -1,6 +1,7 @@
1
1
  import "antd/es/select/style";
2
2
  import _Select from "antd/es/select";
3
- var _excluded = ["value", "className", "placeholder", "onDropdownVisibleChange", "showSearch", "filterOption", "optionFilterProp", "multiple", "options", "clearWhenOptionsUpdated"];
3
+ var _excluded = ["value", "className", "placeholder", "onDropdownVisibleChange", "showSearch", "filterOption", "optionFilterProp", "multiple", "options", "clearWhenOptionsUpdated", "preview"],
4
+ _excluded2 = ["label", "value"];
4
5
 
5
6
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6
7
 
@@ -43,7 +44,7 @@ import LocaleContext from '../locale/locale-context';
43
44
  import Button from '../button';
44
45
  import Input from '../input';
45
46
  import './style';
46
- import { compareOptions, compareSelected, optionsHOC } from '../utils/option-utils';
47
+ import { compareOptions, compareSelected, optionsHOC, previewSelectedOptions } from '../utils/option-utils';
47
48
  var Option = _Select.Option,
48
49
  OptGroup = _Select.OptGroup;
49
50
  export { Option, OptGroup };
@@ -62,6 +63,7 @@ var IglooSelect = function IglooSelect(_ref) {
62
63
  options = _ref$options === void 0 ? [] : _ref$options,
63
64
  _ref$clearWhenOptions = _ref.clearWhenOptionsUpdated,
64
65
  clearWhenOptionsUpdated = _ref$clearWhenOptions === void 0 ? false : _ref$clearWhenOptions,
66
+ preview = _ref.preview,
65
67
  rest = _objectWithoutProperties(_ref, _excluded);
66
68
 
67
69
  var _useContext = useContext(LocaleContext),
@@ -169,6 +171,7 @@ var IglooSelect = function IglooSelect(_ref) {
169
171
  setSelectedOptions(options);
170
172
  };
171
173
 
174
+ if (preview) return previewSelectedOptions(options, valueProp);
172
175
  return _jsx("div", {
173
176
  className: classnames('igloo-attached-select-containter', className),
174
177
  children: _jsx(_Select, _objectSpread(_objectSpread({
@@ -274,13 +277,16 @@ var IglooSelect = function IglooSelect(_ref) {
274
277
  dropdownMatchSelectWidth: true,
275
278
  children: displayOptions.map(function (_ref10) {
276
279
  var label = _ref10.label,
277
- value = _ref10.value;
278
- return _jsxs(Option, {
280
+ value = _ref10.value,
281
+ rest = _objectWithoutProperties(_ref10, _excluded2);
282
+
283
+ return _jsxs(Option, _objectSpread(_objectSpread({
279
284
  value: value,
280
285
  label: label,
281
286
  style: {
282
287
  position: 'relative'
283
- },
288
+ }
289
+ }, rest), {}, {
284
290
  children: [multiple ? _jsxs("div", {
285
291
  children: [_jsx(Checkbox, {
286
292
  checked: Array.isArray(selected) && selected.includes(value),
@@ -298,7 +304,7 @@ var IglooSelect = function IglooSelect(_ref) {
298
304
  left: 0
299
305
  }
300
306
  })]
301
- }, value);
307
+ }), value);
302
308
  })
303
309
  }))
304
310
  });
@@ -308,39 +314,9 @@ var AttachedSelect = Object.assign(optionsHOC(IglooSelect), {
308
314
  Option: Option,
309
315
  OptGroup: OptGroup
310
316
  });
317
+ AttachedSelect.isPreviewSupport = true;
311
318
 
312
- AttachedSelect.formItemPropsHandler = function (config) {
313
- var options = config.options,
314
- multiple = config.multiple;
315
-
316
- var previewFormateForSingleValue = function previewFormateForSingleValue(value) {
317
- return options === null || options === void 0 ? void 0 : options.reduce(function (displayLabel, option) {
318
- if (option.value === value) {
319
- displayLabel = option.label;
320
- }
321
-
322
- return displayLabel;
323
- }, value);
324
- }; // 多选
325
-
326
-
327
- var previewFormateForMultipleValue = function previewFormateForMultipleValue(value) {
328
- var replaceLabel = value.reduce(function (strArr, selectedValue, index) {
329
- var matched = options === null || options === void 0 ? void 0 : options.filter(function (originOption) {
330
- return originOption.value === selectedValue;
331
- });
332
- if (matched && matched[0]) strArr[index] = matched[0].label;
333
- return strArr;
334
- }, value);
335
- return replaceLabel.join(',');
336
- };
337
-
338
- if (options === null || options === void 0 ? void 0 : options.length) {
339
- return {
340
- previewFormater: multiple ? previewFormateForMultipleValue : previewFormateForSingleValue
341
- };
342
- }
343
-
319
+ AttachedSelect.formItemPropsHandler = function () {
344
320
  return {};
345
321
  };
346
322