iglooform 2.5.40 → 2.5.41

package/lib/button/style/index.less

@@ -3,6 +3,10 @@
 @btn-hover-color: @purple-medium;
 @btn-hover-bg: @purple-medium;
 
+@btn-green-color: #108043;
+@btn-red-color: #de3618;
+@btn-yellow-color: #cf8909;
+
 .ant-btn {
   padding: 0 16px;
   text-shadow: none;
@@ -66,6 +70,81 @@
       background-color: @primary-color;
     }
   }
+
+  &.green {
+    background: @btn-green-color;
+    border-color: @btn-green-color;
+    --antd-wave-shadow-color: @btn-green-color;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background: @btn-green-color;
+      opacity: 0.9;
+    }
+
+    &[disabled] {
+      background: @btn-green-color;
+      opacity: 0.3;
+
+      &:hover,
+      &:active,
+      &:focus {
+        border-color: @btn-green-color;
+        background: @btn-green-color;
+      }
+    }
+  }
+
+  &.yellow {
+    background: @btn-yellow-color;
+    border-color: @btn-yellow-color;
+    --antd-wave-shadow-color: @btn-yellow-color;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background: @btn-yellow-color;
+      opacity: 0.9;
+    }
+
+    &[disabled] {
+      background: @btn-yellow-color;
+      opacity: 0.3;
+
+      &:hover,
+      &:active,
+      &:focus {
+        border-color: @btn-yellow-color;
+        background: @btn-yellow-color;
+      }
+    }
+  }
+
+  &.red {
+    background: @btn-red-color;
+    border-color: @btn-red-color;
+    --antd-wave-shadow-color: @btn-red-color;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background: @btn-red-color;
+      opacity: 0.9;
+    }
+
+    &[disabled] {
+      background: @btn-red-color;
+      opacity: 0.3;
+
+      &:hover,
+      &:active,
+      &:focus {
+        border-color: @btn-red-color;
+        background: @btn-red-color;
+      }
+    }
+  }
 }
 
 .ant-btn-link {
@@ -139,54 +218,3 @@
 .ant-btn-icon-only {
   width: auto;
 }
-
-.green {
-  background: #108043;
-  border: 0px;
-
-  &:hover,
-  &:active,
-  &:focus {
-    background: #108043;
-    opacity: 0.9;
-  }
-}
-
-.yellow {
-  background: #cf8909;
-  border: 0px;
-
-  &:hover,
-  &:active,
-  &:focus {
-    background: #cf8909;
-    opacity: 0.9;
-  }
-}
-
-.red {
-  background: #de3618;
-  border: 0px;
-
-  &:hover,
-  &:active,
-  &:focus {
-    background: #de3618;
-    opacity: 0.9;
-  }
-}
-
-button[class~='red'] {
-  border-color: #de3618 !important;
-  --antd-wave-shadow-color: #de3618 !important;
-}
-
-button[class~='yellow'] {
-  border-color: #cf8909 !important;
-  --antd-wave-shadow-color: #cf8909 !important;
-}
-
-button[class~='green'] {
-  border-color: #108043 !important;
-  --antd-wave-shadow-color: #108043 !important;
-}

package/lib/checkbox/index.d.ts

@@ -15,6 +15,7 @@ export interface IProps extends IglooComponentProps, Omit<CheckboxGroupProps, 'o
     className?: string;
     radioType?: string;
     options: Option[];
+    preview?: boolean;
 }
 declare const IglooCheckbox: FC<Props>;
 export default IglooCheckbox;

package/lib/checkbox/index.js

@@ -37,7 +37,7 @@ var _empty = _interopRequireDefault(require("../radio/style/empty.svg"));
 
 require("./style/index.less");
 
-var _excluded = ["className", "options", "value", "clearWhenOptionsUpdated"],
+var _excluded = ["className", "options", "value", "clearWhenOptionsUpdated", "preview"],
     _excluded2 = ["label", "value", "extraInfo"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -87,6 +87,7 @@ var InnerCheckboxGroup = function InnerCheckboxGroup(_ref) {
       value = _ref.value,
       _ref$clearWhenOptions = _ref.clearWhenOptionsUpdated,
       clearWhenOptionsUpdated = _ref$clearWhenOptions === void 0 ? false : _ref$clearWhenOptions,
+      preview = _ref.preview,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)(value),
@@ -124,6 +125,7 @@ var InnerCheckboxGroup = function InnerCheckboxGroup(_ref) {
       originOptions.current = options;
     }
   }, [options]);
+  if (preview) return (0, _optionUtils.previewSelectedOptions)(options, value);
   return (0, _jsxRuntime.jsxs)(_checkbox.default.Group, _objectSpread(_objectSpread({}, (0, _omit.default)(rest, _formMethods.default)), {}, {
     className: (0, _classnames.default)('igloo-checkbox-group', className),
     value: value,
@@ -181,6 +183,7 @@ var InnerCheckboxGroup = function InnerCheckboxGroup(_ref) {
 
 var CheckboxGroup = (0, _optionUtils.optionsHOC)(InnerCheckboxGroup);
 exports.CheckboxGroup = CheckboxGroup;
+CheckboxGroup.isPreviewSupport = true;
 
 CheckboxGroup.formItemPropsHandler = function () {
   return {};

package/lib/declaration/index.js

@@ -73,13 +73,33 @@ var Declaration = function Declaration(_ref) {
 };
 
 Declaration.formItemPropsHandler = function (config) {
+  var rules = []; // 用户没有明确指明 `required: false`时，需要加上验证
+
+  if (config.required !== false) {
+    var _config$requiredMessa;
+
+    var requiredMessage = (_config$requiredMessa = config.requiredMessage) !== null && _config$requiredMessa !== void 0 ? _config$requiredMessa : 'Please check the declaration to proceed.';
+    rules.push({
+      validator: function validator(_, value) {
+        return new Promise(function (resolve, reject) {
+          if (!value) {
+            return reject(new Error(requiredMessage));
+          }
+
+          return resolve('ok');
+        });
+      }
+    });
+  }
+
   return {
     getValueFromEvent: function getValueFromEvent(e) {
       return e.target.checked;
     },
     valuePropName: 'checked',
     fullRow: true,
-    requiredMessage: 'Please check the declaration to proceed.'
+    required: false,
+    rules: rules
   };
 };
 

package/lib/form/element/index.js

@@ -190,7 +190,7 @@ var Element = function Element(_ref) {
       previewFormater = _calcFormItemProps.previewFormater;
 
   (0, _react.useEffect)(function () {
-    if (!formItemProps.name || preview || !formItemProps.copiedValue.copied) return;
+    if (formItemProps.name === undefined || preview || !formItemProps.copiedValue.copied) return;
     var originalValue = form === null || form === void 0 ? void 0 : form.getFieldValue(formItemProps.name);
     var value = formItemProps.copiedValue.value;
 
@@ -205,7 +205,7 @@ var Element = function Element(_ref) {
     }]);
   }, [formItemProps.copiedValue.value]);
   (0, _react.useEffect)(function () {
-    if (!formItemProps.name || preview || !formItemProps.selectedValue.selected) return;
+    if (formItemProps.name === undefined || preview || !formItemProps.selectedValue.selected) return;
     form && form.setFields([{
       name: formItemProps.name,
       value: formItemProps.selectedValue.value,
@@ -242,6 +242,28 @@ var Element = function Element(_ref) {
     return form;
   };
 
+  var renderPreviewValue = function renderPreviewValue() {
+    if (previewFormater) return previewFormater(value, form);
+
+    if (Component === null || Component === void 0 ? void 0 : Component.isPreviewSupport) {
+      var extra = {
+        value: value,
+        preview: true
+      };
+      return (0, _jsxRuntime.jsx)(Component, _objectSpread(_objectSpread({}, elementProps), {}, {
+        disabled: elementProps.disabled || disabled,
+        containerRef: ref,
+        setFieldError: setFieldError,
+        setFieldValue: setFieldValue,
+        setShowStepButton: setShowStepButton,
+        getFormInstance: getFormInstance,
+        validateField: validateField
+      }, extra));
+    }
+
+    return _typeof(value) === 'object' ? JSON.stringify(value) : value;
+  };
+
   var value = form === null || form === void 0 ? void 0 : form.getFieldValue(formItemProps.name);
   var error = form === null || form === void 0 ? void 0 : form.getFieldError(formItemProps.name);
   (0, _react.useEffect)(function () {
@@ -352,7 +374,7 @@ var Element = function Element(_ref) {
             children: [error && !!error.length && (0, _jsxRuntime.jsx)(_iglooicon.AlertFilled, {
               className: "igloo-element-preview-value-icon"
             }), (0, _jsxRuntime.jsx)("div", {
-              children: previewFormater ? previewFormater(value, form) : _typeof(value) === 'object' ? JSON.stringify(value) : value
+              children: renderPreviewValue()
             })]
           })]
         })

package/lib/free-form/element/index.js

@@ -181,7 +181,7 @@ var Element = function Element(props) {
       elementProps = _calcFormItemProps.elementProps;
 
   (0, _react.useEffect)(function () {
-    if (!formItemProps.name || preview || !formItemProps.copiedValue.copied) return;
+    if (formItemProps.name === undefined || preview || !formItemProps.copiedValue.copied) return;
     var originalValue = form === null || form === void 0 ? void 0 : form.getFieldValue(formItemProps.name);
     var value = formItemProps.copiedValue.value;
 
@@ -196,7 +196,7 @@ var Element = function Element(props) {
     }]);
   }, [formItemProps.copiedValue.value]);
   (0, _react.useEffect)(function () {
-    if (!formItemProps.name || preview || !formItemProps.selectedValue.selected) return;
+    if (formItemProps.name === undefined || preview || !formItemProps.selectedValue.selected) return;
     form && form.setFields([{
       name: formItemProps.name,
       value: formItemProps.selectedValue.value,

package/lib/radio/index.d.ts

@@ -15,6 +15,7 @@ export interface IProps extends IglooComponentProps, Omit<RadioGroupProps, 'opti
     className?: string;
     radioType?: string;
     options: Option[];
+    preview?: boolean;
 }
 export declare const InnerRadioGroup: FC<IProps>;
 export declare const RadioGroup: FC<import("../utils/option-utils").HOCProps & IProps>;

package/lib/radio/index.js

@@ -46,7 +46,7 @@ var _optionUtils = require("../utils/option-utils");
 
 var _radioGroupWithOther = _interopRequireDefault(require("./radio-group-with-other"));
 
-var _excluded = ["className", "options", "radioType", "value", "clearWhenOptionsUpdated"],
+var _excluded = ["className", "options", "radioType", "value", "clearWhenOptionsUpdated", "preview"],
     _excluded2 = ["label", "value", "extraInfo"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -89,6 +89,7 @@ var InnerRadioGroup = function InnerRadioGroup(_ref) {
       value = _ref.value,
       _ref$clearWhenOptions = _ref.clearWhenOptionsUpdated,
       clearWhenOptionsUpdated = _ref$clearWhenOptions === void 0 ? false : _ref$clearWhenOptions,
+      preview = _ref.preview,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)(value),
@@ -126,6 +127,7 @@ var InnerRadioGroup = function InnerRadioGroup(_ref) {
       originOptions.current = options;
     }
   }, [options]);
+  if (preview) return (0, _optionUtils.previewSelectedOptions)(options, value);
   return (0, _jsxRuntime.jsxs)(_radio.default.Group, _objectSpread(_objectSpread({}, (0, _omit.default)(rest, _formMethods.default)), {}, {
     className: (0, _classnames.default)('igloo-radio-group', className),
     value: value,
@@ -204,6 +206,7 @@ var InnerRadioGroup = function InnerRadioGroup(_ref) {
 exports.InnerRadioGroup = InnerRadioGroup;
 var RadioGroup = (0, _optionUtils.optionsHOC)(InnerRadioGroup);
 exports.RadioGroup = RadioGroup;
+RadioGroup.isPreviewSupport = true;
 
 RadioGroup.formItemPropsHandler = function () {
   return {};

package/lib/radio/radio-group-with-other.js

@@ -99,6 +99,7 @@ var InnerRadioGroupWithOther = function InnerRadioGroupWithOther(_ref) {
   }, [options]);
 
   var handleChange = function handleChange(e) {
+    enableOther(true);
     onChange && onChange(e);
   };
 
@@ -110,10 +111,23 @@ var InnerRadioGroupWithOther = function InnerRadioGroupWithOther(_ref) {
   var _useContext = (0, _react.useContext)(_locale.LocaleContext),
       formatMessage = _useContext.formatMessage;
 
+  var otherValue = (0, _react.useMemo)(function () {
+    return value === otherKey ? '' : value;
+  }, [value]);
+  var optionValueList = (0, _react.useMemo)(function () {
+    return options.map(function (e) {
+      return e.value;
+    });
+  }, [options]);
+  var radioGroupValue = (0, _react.useMemo)(function () {
+    if (otherEnabled) return otherKey;
+    if (optionValueList.includes(value) || value === undefined) return value;
+    return otherKey;
+  }, [options, otherEnabled, value]);
   return (0, _jsxRuntime.jsx)("div", {
     className: "igloo-reason-selector",
     children: (0, _jsxRuntime.jsx)(_index.RadioGroup, _objectSpread({
-      value: otherEnabled ? otherKey : value,
+      value: radioGroupValue,
       onChange: handleRadioChange,
       options: [].concat(_toConsumableArray(options), [{
         label: otherOptionLabel || formatMessage({
@@ -122,7 +136,8 @@ var InnerRadioGroupWithOther = function InnerRadioGroupWithOther(_ref) {
         value: otherKey,
         extraInfo: {
           content: (0, _jsxRuntime.jsx)(_input.TextArea, {
-            onChange: handleChange
+            onChange: handleChange,
+            value: otherValue
           }),
           shownTrigger: 'checked'
         }
@@ -132,5 +147,6 @@ var InnerRadioGroupWithOther = function InnerRadioGroupWithOther(_ref) {
 };
 
 var RadioGroupWithOther = (0, _optionUtils.optionsHOC)(InnerRadioGroupWithOther);
+RadioGroupWithOther.isPreviewSupport = true;
 var _default = RadioGroupWithOther;
 exports.default = _default;

package/lib/select/attached-select.d.ts

@@ -5,6 +5,7 @@ import { ComponentProps } from '../utils/option-utils';
 export declare const Option: import("rc-select/lib/Option").OptionFC, OptGroup: import("rc-select/lib/OptGroup").OptionGroupFC;
 declare type Props = SelectProps<SelectValue> & IglooComponentProps & {
     multiple?: boolean;
+    preview?: boolean;
 } & ComponentProps;
 declare type OptionType = typeof Option;
 declare type OptGroupType = typeof OptGroup;

package/lib/select/attached-select.js

@@ -33,7 +33,8 @@ require("./style");
 
 var _optionUtils = require("../utils/option-utils");
 
-var _excluded = ["value", "className", "placeholder", "onDropdownVisibleChange", "showSearch", "filterOption", "optionFilterProp", "multiple", "options", "clearWhenOptionsUpdated"];
+var _excluded = ["value", "className", "placeholder", "onDropdownVisibleChange", "showSearch", "filterOption", "optionFilterProp", "multiple", "options", "clearWhenOptionsUpdated", "preview"],
+    _excluded2 = ["label", "value"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -86,6 +87,7 @@ var IglooSelect = function IglooSelect(_ref) {
       options = _ref$options === void 0 ? [] : _ref$options,
       _ref$clearWhenOptions = _ref.clearWhenOptionsUpdated,
       clearWhenOptionsUpdated = _ref$clearWhenOptions === void 0 ? false : _ref$clearWhenOptions,
+      preview = _ref.preview,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useContext = (0, _react.useContext)(_localeContext.default),
@@ -193,6 +195,7 @@ var IglooSelect = function IglooSelect(_ref) {
     setSelectedOptions(options);
   };
 
+  if (preview) return (0, _optionUtils.previewSelectedOptions)(options, valueProp);
   return (0, _jsxRuntime.jsx)("div", {
     className: (0, _classnames.default)('igloo-attached-select-containter', className),
     children: (0, _jsxRuntime.jsx)(_select.default, _objectSpread(_objectSpread({
@@ -298,13 +301,16 @@ var IglooSelect = function IglooSelect(_ref) {
       dropdownMatchSelectWidth: true,
       children: displayOptions.map(function (_ref10) {
         var label = _ref10.label,
-            value = _ref10.value;
-        return (0, _jsxRuntime.jsxs)(Option, {
+            value = _ref10.value,
+            rest = _objectWithoutProperties(_ref10, _excluded2);
+
+        return (0, _jsxRuntime.jsxs)(Option, _objectSpread(_objectSpread({
           value: value,
           label: label,
           style: {
             position: 'relative'
-          },
+          }
+        }, rest), {}, {
           children: [multiple ? (0, _jsxRuntime.jsxs)("div", {
             children: [(0, _jsxRuntime.jsx)(_checkbox.default, {
               checked: Array.isArray(selected) && selected.includes(value),
@@ -322,7 +328,7 @@ var IglooSelect = function IglooSelect(_ref) {
               left: 0
             }
           })]
-        }, value);
+        }), value);
       })
     }))
   });
@@ -332,39 +338,9 @@ var AttachedSelect = Object.assign((0, _optionUtils.optionsHOC)(IglooSelect), {
   Option: Option,
   OptGroup: OptGroup
 });
+AttachedSelect.isPreviewSupport = true;
 
-AttachedSelect.formItemPropsHandler = function (config) {
-  var options = config.options,
-      multiple = config.multiple;
-
-  var previewFormateForSingleValue = function previewFormateForSingleValue(value) {
-    return options === null || options === void 0 ? void 0 : options.reduce(function (displayLabel, option) {
-      if (option.value === value) {
-        displayLabel = option.label;
-      }
-
-      return displayLabel;
-    }, value);
-  }; // 多选
-
-
-  var previewFormateForMultipleValue = function previewFormateForMultipleValue(value) {
-    var replaceLabel = value.reduce(function (strArr, selectedValue, index) {
-      var matched = options === null || options === void 0 ? void 0 : options.filter(function (originOption) {
-        return originOption.value === selectedValue;
-      });
-      if (matched && matched[0]) strArr[index] = matched[0].label;
-      return strArr;
-    }, value);
-    return replaceLabel.join(',');
-  };
-
-  if (options === null || options === void 0 ? void 0 : options.length) {
-    return {
-      previewFormater: multiple ? previewFormateForMultipleValue : previewFormateForSingleValue
-    };
-  }
-
+AttachedSelect.formItemPropsHandler = function () {
   return {};
 };
 

package/lib/select/style/index.less

@@ -30,7 +30,10 @@
 
     .ant-select-item-option {
       padding: 12px 16px;
-      color: #212121;
+
+      &:not(.ant-select-item-option-disabled) {
+        color: #212121;
+      }
 
       .ant-select-item-option-content {
         line-height: 24px;
@@ -259,7 +262,9 @@
 
     .ant-select-item {
       padding: 8px 16px;
-      color: #212121;
+      &:not(.ant-select-item-option-disabled) {
+        color: #212121;
+      }
     }
   }
 }

package/lib/types.d.ts

@@ -125,6 +125,7 @@ export interface FormItemConfig extends FormItemExtraConfig {
 export declare type FormItemPropsHandler = (config: FormItemConfig) => FormItemConfig;
 interface IglooFC<P = {}> extends React.FunctionComponent<P> {
     formItemPropsHandler?: FormItemPropsHandler;
+    isPreviewSupport?: boolean;
 }
 export interface Form extends React.ForwardRefExoticComponent<FormBasicConfig & React.RefAttributes<any>> {
     useForm: () => FormInstance;

package/lib/utils/form-utils.js

@@ -210,8 +210,8 @@ var calcFormItemProps = function calcFormItemProps(config, extraProps, form, par
       className = extraProps.className,
       extraRest = _objectWithoutProperties(extraProps, _excluded2);
 
-  var rules = calcRequired(required, form, requiredAsserts) ? [{
-    required: true,
+  var rules = calcRequired(required || extraRequired, form, requiredAsserts) ? [{
+    required: type !== 'Declaration',
     message: requiredMessage || extraRequiredMessage
   }].concat(_toConsumableArray(propsRules)) : _toConsumableArray(propsRules);
 

package/lib/utils/option-utils.d.ts

@@ -23,4 +23,5 @@ export interface ComponentProps extends IglooComponentProps {
     clearWhenOptionsUpdated?: boolean;
 }
 export declare function optionsHOC<T>(Component: FC<T>): FC<HOCProps & T>;
+export declare function previewSelectedOptions(options: Options, value: any): any;
 export {};

package/lib/utils/option-utils.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.compareSelected = exports.compareOptions = void 0;
 exports.optionsHOC = optionsHOC;
+exports.previewSelectedOptions = previewSelectedOptions;
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -68,7 +69,7 @@ var compareOptions = function compareOptions(newOptions, oldOptions) {
       var newOption = oldOptions[i];
       var originOption = newOptions[i];
 
-      if (newOption.label !== originOption.label || newOption.value !== originOption.value) {
+      if (newOption.label !== originOption.label || newOption.value !== originOption.value || newOption.extraInfo !== originOption.extraInfo) {
         return true;
       }
     }
@@ -277,4 +278,18 @@ function optionsHOC(Component) {
       optionsUpdating: updating
     })) : null;
   };
+}
+
+function previewSelectedOptions(options, value) {
+  var _value = [value].flat();
+
+  var replaceLabel = _value.reduce(function (strArr, selectedValue, index) {
+    var matched = options === null || options === void 0 ? void 0 : options.filter(function (originOption) {
+      return originOption.value === selectedValue;
+    });
+    if (matched && matched[0]) strArr[index] = matched[0].label;
+    return strArr;
+  }, _value);
+
+  return replaceLabel.join(',');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iglooform",
-  "version": "2.5.40",
+  "version": "2.5.41",
   "scripts": {
     "start": "dumi dev",
     "build-dev": "dumi build",