iglooform 2.5.40 → 2.5.41

package/es/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/es/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/es/checkbox/index.js

@@ -4,7 +4,7 @@ import "antd/es/row/style";
 import _Row from "antd/es/row";
 import "antd/es/checkbox/style";
 import _Checkbox from "antd/es/checkbox";
-var _excluded = ["className", "options", "value", "clearWhenOptionsUpdated"],
+var _excluded = ["className", "options", "value", "clearWhenOptionsUpdated", "preview"],
     _excluded2 = ["label", "value", "extraInfo"];
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -35,7 +35,7 @@ import Typography from '../typography';
 import formMethods from '../utils/form-methods';
 import omit from 'omit.js';
 import classnames from 'classnames';
-import { compareOptions, optionsHOC } from '../utils/option-utils';
+import { compareOptions, optionsHOC, previewSelectedOptions } from '../utils/option-utils';
 import LocaleContext from '../locale/locale-context';
 import emptyIcon from '../radio/style/empty.svg';
 import './style/index.less';
@@ -62,6 +62,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 = useState(value),
@@ -99,6 +100,7 @@ var InnerCheckboxGroup = function InnerCheckboxGroup(_ref) {
       originOptions.current = options;
     }
   }, [options]);
+  if (preview) return previewSelectedOptions(options, value);
   return _jsxs(_Checkbox.Group, _objectSpread(_objectSpread({}, omit(rest, formMethods)), {}, {
     className: classnames('igloo-checkbox-group', className),
     value: value,
@@ -155,6 +157,7 @@ var InnerCheckboxGroup = function InnerCheckboxGroup(_ref) {
 };
 
 export var CheckboxGroup = optionsHOC(InnerCheckboxGroup);
+CheckboxGroup.isPreviewSupport = true;
 
 CheckboxGroup.formItemPropsHandler = function () {
   return {};

package/es/declaration/index.js

@@ -55,13 +55,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/es/form/element/index.js

@@ -161,7 +161,7 @@ var Element = function Element(_ref) {
       previewFormater = _calcFormItemProps.previewFormater;
 
   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;
 
@@ -176,7 +176,7 @@ var Element = function Element(_ref) {
     }]);
   }, [formItemProps.copiedValue.value]);
   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,
@@ -213,6 +213,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 _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);
   useEffect(function () {
@@ -323,7 +345,7 @@ var Element = function Element(_ref) {
             children: [error && !!error.length && _jsx(AlertFilled, {
               className: "igloo-element-preview-value-icon"
             }), _jsx("div", {
-              children: previewFormater ? previewFormater(value, form) : _typeof(value) === 'object' ? JSON.stringify(value) : value
+              children: renderPreviewValue()
             })]
           })]
         })

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

@@ -155,7 +155,7 @@ var Element = function Element(props) {
       elementProps = _calcFormItemProps.elementProps;
 
   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;
 
@@ -170,7 +170,7 @@ var Element = function Element(props) {
     }]);
   }, [formItemProps.copiedValue.value]);
   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/es/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/es/radio/index.js

@@ -4,7 +4,7 @@ import "antd/es/row/style";
 import _Row from "antd/es/row";
 import "antd/es/radio/style";
 import _Radio from "antd/es/radio";
-var _excluded = ["className", "options", "radioType", "value", "clearWhenOptionsUpdated"],
+var _excluded = ["className", "options", "radioType", "value", "clearWhenOptionsUpdated", "preview"],
     _excluded2 = ["label", "value", "extraInfo"];
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -38,7 +38,7 @@ import './style/index.less';
 import Typography from '../typography';
 import LocaleContext from '../locale/locale-context';
 import emptyIcon from './style/empty.svg';
-import { compareOptions, optionsHOC } from '../utils/option-utils';
+import { compareOptions, optionsHOC, previewSelectedOptions } from '../utils/option-utils';
 
 var IglooRadio = function IglooRadio(props) {
   return _jsx(_Radio, _objectSpread({}, omit(props, formMethods)));
@@ -56,6 +56,7 @@ export 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 = useState(value),
@@ -93,6 +94,7 @@ export var InnerRadioGroup = function InnerRadioGroup(_ref) {
       originOptions.current = options;
     }
   }, [options]);
+  if (preview) return previewSelectedOptions(options, value);
   return _jsxs(_Radio.Group, _objectSpread(_objectSpread({}, omit(rest, formMethods)), {}, {
     className: classnames('igloo-radio-group', className),
     value: value,
@@ -168,6 +170,7 @@ export var InnerRadioGroup = function InnerRadioGroup(_ref) {
   }));
 };
 export var RadioGroup = optionsHOC(InnerRadioGroup);
+RadioGroup.isPreviewSupport = true;
 
 RadioGroup.formItemPropsHandler = function () {
   return {};

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

@@ -31,7 +31,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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; }
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useState, useEffect, useRef } from 'react';
+import { useContext, useState, useEffect, useRef, useMemo } from 'react';
 import { RadioGroup } from './index';
 import { TextArea } from '../input';
 import { LocaleContext } from '../locale';
@@ -86,6 +86,7 @@ var InnerRadioGroupWithOther = function InnerRadioGroupWithOther(_ref) {
   }, [options]);
 
   var handleChange = function handleChange(e) {
+    enableOther(true);
     onChange && onChange(e);
   };
 
@@ -97,10 +98,23 @@ var InnerRadioGroupWithOther = function InnerRadioGroupWithOther(_ref) {
   var _useContext = useContext(LocaleContext),
       formatMessage = _useContext.formatMessage;
 
+  var otherValue = useMemo(function () {
+    return value === otherKey ? '' : value;
+  }, [value]);
+  var optionValueList = useMemo(function () {
+    return options.map(function (e) {
+      return e.value;
+    });
+  }, [options]);
+  var radioGroupValue = useMemo(function () {
+    if (otherEnabled) return otherKey;
+    if (optionValueList.includes(value) || value === undefined) return value;
+    return otherKey;
+  }, [options, otherEnabled, value]);
   return _jsx("div", {
     className: "igloo-reason-selector",
     children: _jsx(RadioGroup, _objectSpread({
-      value: otherEnabled ? otherKey : value,
+      value: radioGroupValue,
       onChange: handleRadioChange,
       options: [].concat(_toConsumableArray(options), [{
         label: otherOptionLabel || formatMessage({
@@ -109,7 +123,8 @@ var InnerRadioGroupWithOther = function InnerRadioGroupWithOther(_ref) {
         value: otherKey,
         extraInfo: {
           content: _jsx(TextArea, {
-            onChange: handleChange
+            onChange: handleChange,
+            value: otherValue
           }),
           shownTrigger: 'checked'
         }
@@ -119,4 +134,5 @@ var InnerRadioGroupWithOther = function InnerRadioGroupWithOther(_ref) {
 };
 
 var RadioGroupWithOther = optionsHOC(InnerRadioGroupWithOther);
+RadioGroupWithOther.isPreviewSupport = true;
 export default RadioGroupWithOther;

package/es/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/es/select/attached-select.js

@@ -1,6 +1,7 @@
 import "antd/es/select/style";
 import _Select from "antd/es/select";
-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 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; }
 
@@ -43,7 +44,7 @@ import LocaleContext from '../locale/locale-context';
 import Button from '../button';
 import Input from '../input';
 import './style';
-import { compareOptions, compareSelected, optionsHOC } from '../utils/option-utils';
+import { compareOptions, compareSelected, optionsHOC, previewSelectedOptions } from '../utils/option-utils';
 var Option = _Select.Option,
     OptGroup = _Select.OptGroup;
 export { Option, OptGroup };
@@ -62,6 +63,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 = useContext(LocaleContext),
@@ -169,6 +171,7 @@ var IglooSelect = function IglooSelect(_ref) {
     setSelectedOptions(options);
   };
 
+  if (preview) return previewSelectedOptions(options, valueProp);
   return _jsx("div", {
     className: classnames('igloo-attached-select-containter', className),
     children: _jsx(_Select, _objectSpread(_objectSpread({
@@ -274,13 +277,16 @@ var IglooSelect = function IglooSelect(_ref) {
       dropdownMatchSelectWidth: true,
       children: displayOptions.map(function (_ref10) {
         var label = _ref10.label,
-            value = _ref10.value;
-        return _jsxs(Option, {
+            value = _ref10.value,
+            rest = _objectWithoutProperties(_ref10, _excluded2);
+
+        return _jsxs(Option, _objectSpread(_objectSpread({
           value: value,
           label: label,
           style: {
             position: 'relative'
-          },
+          }
+        }, rest), {}, {
           children: [multiple ? _jsxs("div", {
             children: [_jsx(Checkbox, {
               checked: Array.isArray(selected) && selected.includes(value),
@@ -298,7 +304,7 @@ var IglooSelect = function IglooSelect(_ref) {
               left: 0
             }
           })]
-        }, value);
+        }), value);
       })
     }))
   });
@@ -308,39 +314,9 @@ var AttachedSelect = Object.assign(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/es/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/es/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/es/utils/form-utils.js

@@ -191,8 +191,8 @@ export var calcFormItemProps = function calcFormItemProps(config, extraProps, fo
       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/es/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/es/utils/option-utils.js

@@ -54,7 +54,7 @@ export 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;
       }
     }
@@ -257,4 +257,17 @@ export function optionsHOC(Component) {
       optionsUpdating: updating
     })) : null;
   };
+}
+export 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(',');
 }