iglooform 3.7.7 → 3.7.9

package/.dumi/tmp/dumi/theme/ContextWrapper.tsx

@@ -30,7 +30,7 @@ export default function DumiContextWrapper() {
 
   return (
     <SiteContext.Provider value={{
-      pkg: {"name":"iglooform","version":"3.7.6","license":"MIT"},
+      pkg: {"name":"iglooform","version":"3.7.8","license":"MIT"},
       historyType: "browser",
       entryExports,
       demos,

package/es/checkbox/index.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { CheckboxProps, CheckboxGroupProps } from 'antd/es/checkbox';
+import { FC, IglooComponentProps } from '../types';
+import { ComponentProps } from '../utils/option-utils';
+import { DefaultOptionType } from 'rc-select/lib/Select';
+import './style';
+interface Props extends IglooComponentProps, CheckboxProps {
+}
+export interface Option extends DefaultOptionType {
+    extraInfo?: {
+        content: any;
+        shownTrigger: 'unchecked' | 'checked' | 'all';
+    };
+}
+export interface IProps extends IglooComponentProps, Omit<CheckboxGroupProps, 'options'>, ComponentProps {
+    className?: string;
+    radioType?: string;
+    options: Option[];
+    preview?: boolean;
+    mutuallyExclusions?: Record<string, string[]>;
+}
+declare const IglooCheckbox: FC<Props>;
+export default IglooCheckbox;
+export declare const CheckboxGroup: FC<import("react").PropsWithChildren<import("../utils/option-utils").HOCProps & IProps>>;

package/es/form/addable-section/index.d.ts

@@ -0,0 +1,20 @@
+import { FC, ReactNode } from 'react';
+import { FormItemProps } from 'antd/es/form';
+import { FormItemConfig, FormItemName } from '../../types';
+import './style';
+export interface AddableSectionProps {
+    parentName?: FormItemName;
+    formItemProps?: FormItemProps;
+    config: FormItemConfig;
+    preview?: boolean;
+    disabled?: boolean;
+    setShowStepButton?: (showButton: boolean) => void;
+    max?: number;
+    min?: number;
+    initCount?: number;
+    addButtonText?: string;
+    addButtonIcon?: ReactNode;
+    description?: string | ReactNode;
+}
+declare const AddableSection: FC<AddableSectionProps>;
+export default AddableSection;

package/es/form/element/index.js

@@ -264,7 +264,7 @@ var Element = function Element(_ref) {
         'igloo-element-preview-hide': config.hideWhenPreview,
         'igloo-element-preview-hide-divider': config.hidePreviewDivider
       }),
-      children: /*#__PURE__*/_jsx(Form.Item, _objectSpread(_objectSpread({}, omit(formItemProps, ['copiedValue', 'selectedValue'])), {}, {
+      children: /*#__PURE__*/_jsxs(Form.Item, _objectSpread(_objectSpread({}, omit(formItemProps, ['copiedValue', 'selectedValue'])), {}, {
         labelCol: {
           span: 24
         },
@@ -272,7 +272,7 @@ var Element = function Element(_ref) {
           span: 24
         },
         label: null,
-        children: /*#__PURE__*/_jsxs(Row, {
+        children: [/*#__PURE__*/_jsxs(Row, {
           className: "igloo-element-preview-item",
           gutter: {
             md: 32,
@@ -311,7 +311,10 @@ var Element = function Element(_ref) {
               children: renderPreviewValue()
             })]
           })]
-        })
+        }), config.showExtraWhenPreview && /*#__PURE__*/_jsx("div", {
+          className: "igloo-element-preview-extra",
+          children: formItemProps.extra
+        })]
       }))
     });
   }

package/es/form/element/style/index.less

@@ -32,6 +32,10 @@
     }
   }
 
+  .igloo-element-preview-extra {
+    margin-top: 6px;
+  }
+
   .ant-form-item-explain-error {
     margin-top: 0;
     margin-left: 50%;

package/es/form/index.d.ts

@@ -0,0 +1,4 @@
+import { Form as FormType } from '../types';
+import './style';
+declare const ExportedForm: FormType;
+export default ExportedForm;

package/es/free-form/addable-section/index.d.ts

@@ -0,0 +1,19 @@
+import { FC, ReactNode } from 'react';
+import { FormItemProps } from 'antd/es/form';
+import { FormItemConfig, FormItemName } from '../../types';
+import './style';
+export interface AddableSectionProps extends FormItemConfig {
+    parentName?: FormItemName;
+    formItemProps?: FormItemProps;
+    preview?: boolean;
+    disabledFromParent?: boolean;
+    setShowStepButton?: (showButton: boolean) => void;
+    max?: number;
+    min?: number;
+    initCount?: number;
+    addButtonText?: string;
+    addButtonIcon?: ReactNode;
+    description?: string | ReactNode;
+}
+declare const AddableSection: FC<AddableSectionProps>;
+export default AddableSection;

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

@@ -199,7 +199,7 @@ var Element = function Element(props) {
         'igloo-freeform-element-preview-hide': props.hideWhenPreview,
         'igloo-freeform-element-preview-hide-divider': props.hidePreviewDivider
       }),
-      children: /*#__PURE__*/_jsx(Form.Item, _objectSpread(_objectSpread({}, omit(formItemProps, ['copiedValue', 'selectedValue'])), {}, {
+      children: /*#__PURE__*/_jsxs(Form.Item, _objectSpread(_objectSpread({}, omit(formItemProps, ['copiedValue', 'selectedValue'])), {}, {
         labelCol: {
           span: 24
         },
@@ -207,7 +207,7 @@ var Element = function Element(props) {
           span: 24
         },
         label: null,
-        children: /*#__PURE__*/_jsxs(Row, {
+        children: [/*#__PURE__*/_jsxs(Row, {
           className: "igloo-freeform-element-preview-item",
           gutter: {
             md: 32,
@@ -246,7 +246,10 @@ var Element = function Element(props) {
               children: previewFormater ? previewFormater(value, form) : _typeof(value) === 'object' ? JSON.stringify(value) : value
             })]
           })]
-        })
+        }), rest.showExtraWhenPreview && /*#__PURE__*/_jsx("div", {
+          className: "igloo-freeform-element-preview-extra",
+          children: formItemProps.extra
+        })]
       }))
     });
   }

package/es/free-form/element/style/index.less

@@ -11,12 +11,12 @@
 
   .igloo-freeform-element-preview-item {
     .igloo-freeform-element-preview-label {
-      color:  @icon-color;
+      color: @icon-color;
       line-height: 24px;
     }
 
     .igloo-freeform-element-preview-value {
-      color:  @text-color;
+      color: @text-color;
       white-space: pre-wrap;
       word-break: break-word;
       line-height: 24px;
@@ -32,6 +32,10 @@
     }
   }
 
+  .igloo-freeform-element-preview-extra {
+    margin-top: 6px;
+  }
+
   .ant-form-item-explain-error {
     margin-top: 0;
     margin-left: calc(~'50%' + 16px);
@@ -95,7 +99,7 @@
   width: 100%;
 
   .igloo-freeform-label-text {
-    color:  @icon-color;
+    color: @icon-color;
     font-size: 16px;
     line-height: 24px;
 

package/es/free-form/index.d.ts

@@ -0,0 +1,11 @@
+import { FC, PropsWithChildren } from 'react';
+import { Form } from 'antd';
+import { FormBasicConfig } from '../types';
+import './style';
+interface FreeFormProps extends Omit<FormBasicConfig, 'config'> {
+}
+interface FreeFormType extends FC<PropsWithChildren<FreeFormProps>> {
+    useForm: typeof Form.useForm;
+}
+declare const FreeForm: FreeFormType;
+export default FreeForm;

package/es/types.d.ts

@@ -95,6 +95,7 @@ export interface FormItemExtraConfig extends FormItemProps {
     limit?: number;
     hideWhenPreview?: boolean;
     hideWhenEdit?: boolean;
+    showExtraWhenPreview?: boolean;
     requiredMessage?: string | ReactNode;
     showOptional?: boolean;
     previewFormater?(value: any, form?: FormInstance): any;

package/es/upload-photo/index.js

@@ -84,6 +84,8 @@ var UploadPhoto = function UploadPhoto(props) {
   var limitNumError = useRef();
   var DomRef = useRef();
   var dataUrlRef = useRef([]);
+  var isValueSyncRef = useRef(false);
+  var isFirstRenderRef = useRef(true);
   var _useContext = useContext(FormContext),
     uploadApi = _useContext.uploadApi;
   invariant(typeof props.handleUpload === 'function' || uploadApi, '"handleUpload" should be a function. Or uploadApi should be set at Form/FreeForm');
@@ -196,7 +198,8 @@ var UploadPhoto = function UploadPhoto(props) {
         return _ref3.apply(this, arguments);
       };
     }())).then(function () {
-      return setFiles(_files);
+      isValueSyncRef.current = true;
+      setFiles(_files);
     });
   };
   useEffect(function () {
@@ -212,13 +215,21 @@ var UploadPhoto = function UploadPhoto(props) {
         mapFilesFromValue(newUrls);
       }
     } else if (!value && files.length > 0) {
-      // 如果外部清空了值，也清空内部状态
+      isValueSyncRef.current = true;
       setFiles([]);
       setMasks([]);
     }
   }, [value]);
   useEffect(function () {
     if (!value && !files.length) return;
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+      return;
+    }
+    if (isValueSyncRef.current) {
+      isValueSyncRef.current = false;
+      return;
+    }
     if (files.length) {
       var hasProcessing = files.find(function (f) {
         return f.status === 'progress';

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

@@ -0,0 +1,29 @@
+import { PropsWithChildren } from 'react';
+import { FC, IglooComponentProps } from '../types';
+import { FormInstance } from 'antd/es/form';
+import { NamePath } from 'antd/es/form/interface';
+import { SelectProps, SelectValue } from 'antd/es/select';
+export declare const compareOptions: (newOptions: any[], oldOptions?: any[]) => boolean;
+export declare const compareSelected: (newValue: any | any[], oldValue: any | any[]) => boolean;
+type Options = SelectProps<SelectValue>['options'];
+export interface HOCProps extends IglooComponentProps {
+    options?: Options;
+    onSearch?: any;
+    getOptions?: (form: FormInstance) => any[];
+    optionGroups?: {
+        parentKey: string;
+        options: Options;
+    }[];
+    datasourceFilters?: string[];
+    datasourceKey?: string;
+    datasourceApi?: string;
+    dependField?: NamePath;
+    passCompareOptions?: boolean;
+}
+export interface ComponentProps extends IglooComponentProps {
+    options?: Options;
+    clearWhenOptionsUpdated?: boolean;
+}
+export declare function optionsHOC<T>(Component: FC<T>): FC<PropsWithChildren<HOCProps & T>>;
+export declare function previewSelectedOptions(options: Options, value: any): any;
+export {};

package/lib/checkbox/index.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { CheckboxProps, CheckboxGroupProps } from 'antd/es/checkbox';
+import { FC, IglooComponentProps } from '../types';
+import { ComponentProps } from '../utils/option-utils';
+import { DefaultOptionType } from 'rc-select/lib/Select';
+import './style';
+interface Props extends IglooComponentProps, CheckboxProps {
+}
+export interface Option extends DefaultOptionType {
+    extraInfo?: {
+        content: any;
+        shownTrigger: 'unchecked' | 'checked' | 'all';
+    };
+}
+export interface IProps extends IglooComponentProps, Omit<CheckboxGroupProps, 'options'>, ComponentProps {
+    className?: string;
+    radioType?: string;
+    options: Option[];
+    preview?: boolean;
+    mutuallyExclusions?: Record<string, string[]>;
+}
+declare const IglooCheckbox: FC<Props>;
+export default IglooCheckbox;
+export declare const CheckboxGroup: FC<import("react").PropsWithChildren<import("../utils/option-utils").HOCProps & IProps>>;

package/lib/form/addable-section/index.d.ts

@@ -0,0 +1,20 @@
+import { FC, ReactNode } from 'react';
+import { FormItemProps } from 'antd/es/form';
+import { FormItemConfig, FormItemName } from '../../types';
+import './style';
+export interface AddableSectionProps {
+    parentName?: FormItemName;
+    formItemProps?: FormItemProps;
+    config: FormItemConfig;
+    preview?: boolean;
+    disabled?: boolean;
+    setShowStepButton?: (showButton: boolean) => void;
+    max?: number;
+    min?: number;
+    initCount?: number;
+    addButtonText?: string;
+    addButtonIcon?: ReactNode;
+    description?: string | ReactNode;
+}
+declare const AddableSection: FC<AddableSectionProps>;
+export default AddableSection;

package/lib/form/element/index.js

@@ -270,7 +270,7 @@ var Element = function Element(_ref) {
         'igloo-element-preview-hide': config.hideWhenPreview,
         'igloo-element-preview-hide-divider': config.hidePreviewDivider
       }),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Form.Item, _objectSpread(_objectSpread({}, (0, _omit.default)(formItemProps, ['copiedValue', 'selectedValue'])), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Form.Item, _objectSpread(_objectSpread({}, (0, _omit.default)(formItemProps, ['copiedValue', 'selectedValue'])), {}, {
         labelCol: {
           span: 24
         },
@@ -278,7 +278,7 @@ var Element = function Element(_ref) {
           span: 24
         },
         label: null,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Row, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Row, {
           className: "igloo-element-preview-item",
           gutter: {
             md: 32,
@@ -317,7 +317,10 @@ var Element = function Element(_ref) {
               children: renderPreviewValue()
             })]
           })]
-        })
+        }), config.showExtraWhenPreview && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "igloo-element-preview-extra",
+          children: formItemProps.extra
+        })]
       }))
     });
   }

package/lib/form/element/style/index.less

@@ -32,6 +32,10 @@
     }
   }
 
+  .igloo-element-preview-extra {
+    margin-top: 6px;
+  }
+
   .ant-form-item-explain-error {
     margin-top: 0;
     margin-left: 50%;

package/lib/form/index.d.ts

@@ -0,0 +1,4 @@
+import { Form as FormType } from '../types';
+import './style';
+declare const ExportedForm: FormType;
+export default ExportedForm;

package/lib/free-form/addable-section/index.d.ts

@@ -0,0 +1,19 @@
+import { FC, ReactNode } from 'react';
+import { FormItemProps } from 'antd/es/form';
+import { FormItemConfig, FormItemName } from '../../types';
+import './style';
+export interface AddableSectionProps extends FormItemConfig {
+    parentName?: FormItemName;
+    formItemProps?: FormItemProps;
+    preview?: boolean;
+    disabledFromParent?: boolean;
+    setShowStepButton?: (showButton: boolean) => void;
+    max?: number;
+    min?: number;
+    initCount?: number;
+    addButtonText?: string;
+    addButtonIcon?: ReactNode;
+    description?: string | ReactNode;
+}
+declare const AddableSection: FC<AddableSectionProps>;
+export default AddableSection;

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

@@ -205,7 +205,7 @@ var Element = function Element(props) {
         'igloo-freeform-element-preview-hide': props.hideWhenPreview,
         'igloo-freeform-element-preview-hide-divider': props.hidePreviewDivider
       }),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Form.Item, _objectSpread(_objectSpread({}, (0, _omit.default)(formItemProps, ['copiedValue', 'selectedValue'])), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Form.Item, _objectSpread(_objectSpread({}, (0, _omit.default)(formItemProps, ['copiedValue', 'selectedValue'])), {}, {
         labelCol: {
           span: 24
         },
@@ -213,7 +213,7 @@ var Element = function Element(props) {
           span: 24
         },
         label: null,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Row, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Row, {
           className: "igloo-freeform-element-preview-item",
           gutter: {
             md: 32,
@@ -252,7 +252,10 @@ var Element = function Element(props) {
               children: previewFormater ? previewFormater(value, form) : _typeof(value) === 'object' ? JSON.stringify(value) : value
             })]
           })]
-        })
+        }), rest.showExtraWhenPreview && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "igloo-freeform-element-preview-extra",
+          children: formItemProps.extra
+        })]
       }))
     });
   }

package/lib/free-form/element/style/index.less

@@ -11,12 +11,12 @@
 
   .igloo-freeform-element-preview-item {
     .igloo-freeform-element-preview-label {
-      color:  @icon-color;
+      color: @icon-color;
       line-height: 24px;
     }
 
     .igloo-freeform-element-preview-value {
-      color:  @text-color;
+      color: @text-color;
       white-space: pre-wrap;
       word-break: break-word;
       line-height: 24px;
@@ -32,6 +32,10 @@
     }
   }
 
+  .igloo-freeform-element-preview-extra {
+    margin-top: 6px;
+  }
+
   .ant-form-item-explain-error {
     margin-top: 0;
     margin-left: calc(~'50%' + 16px);
@@ -95,7 +99,7 @@
   width: 100%;
 
   .igloo-freeform-label-text {
-    color:  @icon-color;
+    color: @icon-color;
     font-size: 16px;
     line-height: 24px;
 

package/lib/free-form/index.d.ts

@@ -0,0 +1,11 @@
+import { FC, PropsWithChildren } from 'react';
+import { Form } from 'antd';
+import { FormBasicConfig } from '../types';
+import './style';
+interface FreeFormProps extends Omit<FormBasicConfig, 'config'> {
+}
+interface FreeFormType extends FC<PropsWithChildren<FreeFormProps>> {
+    useForm: typeof Form.useForm;
+}
+declare const FreeForm: FreeFormType;
+export default FreeForm;

package/lib/types.d.ts

@@ -95,6 +95,7 @@ export interface FormItemExtraConfig extends FormItemProps {
     limit?: number;
     hideWhenPreview?: boolean;
     hideWhenEdit?: boolean;
+    showExtraWhenPreview?: boolean;
     requiredMessage?: string | ReactNode;
     showOptional?: boolean;
     previewFormater?(value: any, form?: FormInstance): any;

package/lib/upload-photo/index.js

@@ -88,6 +88,8 @@ var UploadPhoto = function UploadPhoto(props) {
   var limitNumError = (0, _react.useRef)();
   var DomRef = (0, _react.useRef)();
   var dataUrlRef = (0, _react.useRef)([]);
+  var isValueSyncRef = (0, _react.useRef)(false);
+  var isFirstRenderRef = (0, _react.useRef)(true);
   var _useContext = (0, _react.useContext)(_formContext.default),
     uploadApi = _useContext.uploadApi;
   (0, _invariant.default)(typeof props.handleUpload === 'function' || uploadApi, '"handleUpload" should be a function. Or uploadApi should be set at Form/FreeForm');
@@ -200,7 +202,8 @@ var UploadPhoto = function UploadPhoto(props) {
         return _ref3.apply(this, arguments);
       };
     }())).then(function () {
-      return setFiles(_files);
+      isValueSyncRef.current = true;
+      setFiles(_files);
     });
   };
   (0, _react.useEffect)(function () {
@@ -216,13 +219,21 @@ var UploadPhoto = function UploadPhoto(props) {
         mapFilesFromValue(newUrls);
       }
     } else if (!value && files.length > 0) {
-      // 如果外部清空了值，也清空内部状态
+      isValueSyncRef.current = true;
       setFiles([]);
       setMasks([]);
     }
   }, [value]);
   (0, _react.useEffect)(function () {
     if (!value && !files.length) return;
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+      return;
+    }
+    if (isValueSyncRef.current) {
+      isValueSyncRef.current = false;
+      return;
+    }
     if (files.length) {
       var hasProcessing = files.find(function (f) {
         return f.status === 'progress';

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

@@ -0,0 +1,29 @@
+import { PropsWithChildren } from 'react';
+import { FC, IglooComponentProps } from '../types';
+import { FormInstance } from 'antd/es/form';
+import { NamePath } from 'antd/es/form/interface';
+import { SelectProps, SelectValue } from 'antd/es/select';
+export declare const compareOptions: (newOptions: any[], oldOptions?: any[]) => boolean;
+export declare const compareSelected: (newValue: any | any[], oldValue: any | any[]) => boolean;
+type Options = SelectProps<SelectValue>['options'];
+export interface HOCProps extends IglooComponentProps {
+    options?: Options;
+    onSearch?: any;
+    getOptions?: (form: FormInstance) => any[];
+    optionGroups?: {
+        parentKey: string;
+        options: Options;
+    }[];
+    datasourceFilters?: string[];
+    datasourceKey?: string;
+    datasourceApi?: string;
+    dependField?: NamePath;
+    passCompareOptions?: boolean;
+}
+export interface ComponentProps extends IglooComponentProps {
+    options?: Options;
+    clearWhenOptionsUpdated?: boolean;
+}
+export declare function optionsHOC<T>(Component: FC<T>): FC<PropsWithChildren<HOCProps & T>>;
+export declare function previewSelectedOptions(options: Options, value: any): any;
+export {};

package/package.json

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