iglooform 3.7.8 → 3.8.0

package/es/types.d.ts

@@ -0,0 +1,190 @@
+/// <reference path="../typings.d.ts" />
+import { BlinkIdSingleSideRecognizerResult } from '@microblink/blinkid-in-browser-sdk';
+import { FormItemProps, FormInstance } from 'antd/es/form';
+import { ReactNode } from 'react';
+import { NamePath } from 'rc-field-form/lib/interface';
+import { CheckboxOptionType } from 'antd/es/checkbox';
+import { SelectProps } from 'antd/es/select';
+export { Rule } from 'rc-field-form/lib/interface';
+export interface OCRHooks {
+    microBlink?: {
+        initResult: {
+            error?: string;
+            failed: boolean;
+        };
+        recognize: ((file: File) => Promise<BlinkIdSingleSideRecognizerResult | null>) | null;
+        loading?: boolean;
+    };
+}
+export interface OCRConfig {
+    microBlink?: {
+        licenseKey: string;
+    };
+}
+export type FormItemName = NamePath;
+export interface FormBasicConfig {
+    config: FormItemConfig;
+    className?: string;
+    style?: Object;
+    locales?: {
+        cancelText?: string;
+        submitText?: string;
+        previewText?: string;
+        nextText?: string;
+        continueText?: string;
+        validateMessages?: Object;
+    };
+    initialValues?: any;
+    form?: FormInstance;
+    onCancel?(): void;
+    onSubmit?(values: Object, allValues?: Object): any;
+    requiredMark?: boolean;
+    showSubmitButton?: boolean;
+    getScrollContainer?: () => HTMLElement | null;
+    onFirstModified?: () => any;
+    uploadApi?: string;
+    selectDatasourceApi?: string;
+    validationRule?: string;
+    getRuleValidationApi?: string;
+    stepDirection?: 'vertical' | 'horizontal';
+    customizeComponents?: {
+        [name: string]: FC;
+    };
+    ocr?: OCRConfig;
+    validationCodeExtraParams?: Record<string, any>;
+    onValuesChange?: (changedValues: any, values: any) => void;
+}
+export type FormItemAssert = {
+    field: NamePath;
+    value?: any;
+    operation?: 'eq' | 'ne' | 'in' | 'ni' | 'lt' | 'le' | 'gt' | 'ge' | 'co' | 'nc' | 'filled' | 'unfilled' | 'co-some' | 'co-every' | 'some-in' | 'every-in';
+};
+export type FormItemCopyValue = {
+    assert: FormItemAssert;
+    copyFrom: NamePath;
+    disabled?: boolean;
+};
+export type FormItemSelectValue = {
+    assert: FormItemAssert;
+    value: any;
+    disabled?: boolean;
+};
+export interface FormItemExtraConfig extends FormItemProps {
+    labelTooltip?: string;
+    elements?: FormItemConfig[];
+    required?: boolean;
+    requiredAsserts?: FormItemAssert[];
+    extraLabel?: any;
+    xl?: number;
+    md?: number;
+    xs?: number;
+    span?: number;
+    areaCode?: number | string | (number | string)[];
+    phoneNumber?: number | string;
+    mergeRules?: boolean;
+    dependencies?: NamePath[];
+    antdDependencies?: NamePath[];
+    asserts?: FormItemAssert[];
+    shouldRender?: (form?: FormInstance) => boolean;
+    ignore?: boolean;
+    copyValue?: FormItemCopyValue;
+    selectValue?: FormItemSelectValue[];
+    disabled?: boolean | FormItemAssert | FormItemAssert[];
+    halfRow?: boolean;
+    fullRow?: boolean;
+    limit?: number;
+    hideWhenPreview?: boolean;
+    hideWhenEdit?: boolean;
+    showExtraWhenPreview?: boolean;
+    requiredMessage?: string | ReactNode;
+    showOptional?: boolean;
+    previewFormater?(value: any, form?: FormInstance): any;
+    handleNext?(values: any): any;
+    render?(preview: boolean, form?: FormInstance, value?: any, onChange?: (params: any) => any, setShowStepButton?: IglooComponentProps['setShowStepButton']): any;
+    locales?: {
+        [key: string]: string;
+    };
+    options?: (CheckboxOptionType & {
+        extraInfo?: {
+            content: any;
+            shownTrigger: 'unchecked' | 'checked' | 'all';
+        };
+    })[] | SelectProps['options'];
+    sendOtp?: (value: any) => any;
+    dependField?: FormItemName;
+    countDownSeconds?: number;
+    getButtonDisabledState?: (form: FormInstance) => boolean;
+    getPreviousDisabledState?: (form: FormInstance) => boolean;
+    handleUpload?(file: File): PromiseLike<string>;
+    withoutForm?: boolean;
+    disableEditButton?: boolean;
+    hidePreviewDivider?: boolean;
+    valueFormater?: (value: any) => any;
+    currentStep?: number;
+    subscribedFields?: FormItemName[];
+    description?: string | React.ReactNode;
+    dateLimitationType?: 'relative' | 'absolute';
+    absoluteRangeStart?: number;
+    absoluteRangeEnd?: number;
+    relativeRangeStart?: {
+        type: 'day' | 'month' | 'year';
+        quantity: number;
+        pattern?: string;
+        dependField?: NamePath;
+    };
+    relativeRangeEnd?: {
+        type: 'day' | 'month' | 'year';
+        quantity: number;
+        pattern?: string;
+        dependField?: NamePath;
+    };
+    validationCode?: {
+        code: string;
+        errorMessage: string;
+        warningOnly?: boolean;
+    }[];
+    length?: number;
+    minLength?: number;
+    maxLength?: number;
+    idType?: 'KTP' | 'NIK';
+    validationRule?: string;
+    shouldRenderCode?: string;
+    disabledCode?: string;
+    automaticCalcCode?: string;
+    enableAutomaticCalc?: boolean;
+    [key: string]: any;
+}
+export interface FormItemConfig extends FormItemExtraConfig {
+    type?: string;
+    name?: NamePath;
+    label?: string | React.ReactNode;
+    previewLabel?: string | React.ReactNode;
+    labelProps?: any;
+    contentProps?: any;
+    ocr?: {
+        vender: string;
+        outputMap: {
+            field: string[];
+            source: string[];
+        }[];
+    };
+}
+export type FormItemPropsHandler = (config: FormItemConfig) => FormItemConfig;
+export interface FC<P = {}> extends React.FunctionComponent<P> {
+    formItemPropsHandler?: FormItemPropsHandler;
+    isPreviewSupport?: boolean;
+}
+export interface Form extends React.ForwardRefExoticComponent<FormBasicConfig & React.RefAttributes<any>> {
+    useForm: () => FormInstance;
+}
+export interface IglooComponentProps {
+    validateField?: (nameList?: NamePath[]) => Promise<any>;
+    containerRef?: React.RefObject<any>;
+    setFieldError?(errorMsg?: string): void;
+    setFieldValue?(value?: any): void;
+    setShowStepButton?: (showButton: boolean) => void;
+    getFormInstance?: () => FormInstance;
+    locales?: {
+        [key: string]: string;
+    };
+}

package/es/upload-preview/index.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import './style';
+interface Props {
+    files: string[];
+    label?: any;
+    description?: any;
+}
+declare const UploadPreview: FC<Props>;
+export default UploadPreview;

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import { FormInstance } from 'antd/es/form';
+import { FormItemConfig, FormItemExtraConfig, FormItemName, FormItemCopyValue, FormItemSelectValue, FormItemAssert, Rule } from '../types';
+import { NamePath } from 'antd/es/form/interface';
+export declare const calcNamePath: (parentName: FormItemName | undefined, name: FormItemName | undefined) => any[];
+export declare const testAssert: (form: FormInstance, assert: FormItemAssert) => boolean;
+export declare const calcFormItemProps: (config: FormItemConfig, extraProps: FormItemExtraConfig, form?: FormInstance, parentName?: FormItemName, validationCodeExtraParams?: Record<string, any>) => {
+    colProps: {
+        span: number;
+        xs: number;
+        sm: number;
+        md: number;
+        halfRow: boolean | undefined;
+    };
+    formItemProps: {
+        name: any[];
+        className: string | undefined;
+        initialValue: any;
+        copiedValue: {
+            copied: boolean;
+            value?: undefined;
+            disabled?: undefined;
+        } | {
+            copied: boolean;
+            value: any;
+            disabled: boolean | undefined;
+        };
+        selectedValue: {
+            selected: boolean;
+            value?: undefined;
+            disabled?: undefined;
+        } | {
+            selected: boolean;
+            value: any;
+            disabled: boolean | undefined;
+        };
+        normalize: ((value: any, prevValue: any, allValues: import("rc-field-form/lib/interface").Store) => any) | undefined;
+        rules: Rule[];
+        validateTrigger: any[];
+        label: import("react/jsx-runtime").JSX.Element | null;
+        getValueFromEvent: ((...args: import("rc-field-form/lib/interface").EventArgs) => any) | undefined;
+        getValueProps: ((value: any) => Record<string, unknown>) | undefined;
+        extra: false | "" | 0 | import("react/jsx-runtime").JSX.Element | null | undefined;
+        help: React.ReactNode;
+        valuePropName: string | undefined;
+        messageVariables: {
+            label: string;
+        };
+        dependencies: any[] | undefined;
+    };
+    elementProps: {
+        [key: string]: any;
+    };
+    display: any;
+    previewFormater: ((value: any, form?: FormInstance<any> | undefined) => any) | undefined;
+};
+export declare const calcDisabled: (disabled?: boolean | FormItemAssert | FormItemAssert[], form?: FormInstance, disabledCode?: string, name?: FormItemName, parentName?: FormItemName) => any;
+export declare const calcCopyValue: (copyValue?: FormItemCopyValue, form?: FormInstance) => {
+    copied: boolean;
+    value?: undefined;
+    disabled?: undefined;
+} | {
+    copied: boolean;
+    value: any;
+    disabled: boolean | undefined;
+};
+export declare const calcSelectValue: (selectValue?: FormItemSelectValue[], form?: FormInstance) => {
+    selected: boolean;
+    value?: undefined;
+    disabled?: undefined;
+} | {
+    selected: boolean;
+    value: any;
+    disabled: boolean | undefined;
+};
+export declare const calcShouldRender: (name: NamePath, parentName: NamePath, dependencies?: NamePath[], asserts?: FormItemAssert[], shouldRender?: ((form?: FormInstance) => boolean) | undefined, shouldRenderCode?: string, form?: FormInstance) => any;
+export declare const automaticCalculate: (name: NamePath, parentName: NamePath, automaticCalcCode?: string, form?: FormInstance) => void;
+export declare const getRuleValidation: (url: string, rule: string | string[], values?: any, lang?: string) => Promise<any>;
+export declare const calcAddableSectionAssertField: (name: any[], field: FormItemAssert['field'], index: number, elements: FormItemConfig[] | React.ReactElement[]) => any;

package/lib/form/element/index.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { FormItemConfig, FormItemName } from '../../types';
+import './style';
+interface ElementProps {
+    config: FormItemConfig;
+    parentName?: FormItemName;
+    preview?: boolean;
+    disabled?: boolean;
+    setShowStepButton?: (showButton: boolean) => void;
+}
+declare const Element: FC<ElementProps>;
+export default Element;

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/free-form/element/index.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { FormItemConfig, FormItemName } from '../../types';
+import './style';
+interface ElementProps extends FormItemConfig {
+    parentName?: FormItemName;
+    preview?: boolean;
+    setShowStepButton?: (showButton: boolean) => void;
+    disabledFromParent?: boolean;
+}
+declare const Element: FC<ElementProps>;
+export default Element;

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/media/index.js

@@ -29,6 +29,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var MediaWithPreview = function MediaWithPreview(_ref) {
+  var _list$current;
   var srcProp = _ref.src,
     name = _ref.name,
     className = _ref.className,
@@ -83,6 +84,10 @@ var MediaWithPreview = function MediaWithPreview(_ref) {
     _useState14 = _slicedToArray(_useState13, 2),
     direction = _useState14[0],
     setDirection = _useState14[1];
+  var _useState15 = (0, _react.useState)(0),
+    _useState16 = _slicedToArray(_useState15, 2),
+    rotation = _useState16[0],
+    setRotation = _useState16[1];
   (0, _react.useEffect)(function () {
     setType(type);
   }, [type]);
@@ -192,6 +197,9 @@ var MediaWithPreview = function MediaWithPreview(_ref) {
   var close = function close() {
     setShowModal(false);
     setCurrent(index);
+    setScale(1);
+    setRotation(0);
+    setDirection('');
   };
   var toLeft = function toLeft() {
     setCurrent(function (current) {
@@ -205,6 +213,7 @@ var MediaWithPreview = function MediaWithPreview(_ref) {
       return next;
     });
     setScale(1);
+    setRotation(0);
     setDirection('left');
   };
   var toRight = function toRight() {
@@ -219,6 +228,7 @@ var MediaWithPreview = function MediaWithPreview(_ref) {
       return next;
     });
     setScale(1);
+    setRotation(0);
     setDirection('right');
   };
   var zoomIn = function zoomIn(e) {
@@ -229,6 +239,12 @@ var MediaWithPreview = function MediaWithPreview(_ref) {
     e.preventDefault();
     setScale(scale + 0.2);
   };
+  var rotate = function rotate(e) {
+    e.preventDefault();
+    setRotation(function (rotation) {
+      return (rotation + 270) % 360;
+    });
+  };
   var onDownloadClick = /*#__PURE__*/function () {
     var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(downloadUrl) {
       var filename, actionType, res, blob, url;
@@ -379,6 +395,8 @@ var MediaWithPreview = function MediaWithPreview(_ref) {
       return index === current - 1;
     }
   };
+  var currentPreviewType = (list === null || list === void 0 ? void 0 : list.length) > 0 ? (_list$current = list[current]) === null || _list$current === void 0 ? void 0 : _list$current.type : mediaType;
+  var canRotate = currentPreviewType === 'image';
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: className,
     style: style,
@@ -444,6 +462,7 @@ var MediaWithPreview = function MediaWithPreview(_ref) {
               type: type,
               src: src,
               scale: scale,
+              rotation: rotation,
               isCurrent: index === current
             })
           }, index);
@@ -453,38 +472,51 @@ var MediaWithPreview = function MediaWithPreview(_ref) {
             type: mediaType,
             src: src,
             scale: scale,
+            rotation: rotation,
             isCurrent: true,
             showAllPages: showAllPages
           })
-        }, index), /*#__PURE__*/(0, _jsxRuntime.jsx)(_iglooicon.MinusOutlined, {
-          onClick: zoomIn,
-          className: (0, _classnames.default)({
-            'igloo-preview-action-btn': true,
-            'igloo-preview-zoom-in': true,
-            'igloo-preview-disabled': scale <= 0.5
-          }),
-          style: {
-            fontSize: 24
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_iglooicon.PlusOutlined, {
-          onClick: zoomOut,
-          className: (0, _classnames.default)({
-            'igloo-preview-action-btn': true,
-            'igloo-preview-zoom-out': true,
-            'igloo-preview-disabled': scale >= 2
-          }),
-          style: {
-            fontSize: 24
-          }
-        }), download && /*#__PURE__*/(0, _jsxRuntime.jsx)(_iglooicon.DownloadOutlined, {
-          onClick: onDownloadByModal,
-          className: (0, _classnames.default)({
-            'igloo-preview-action-btn': true,
-            'igloo-preview-download-btn': true
-          }),
-          style: {
-            fontSize: 24
-          }
+        }, index), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "igloo-preview-actions",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_iglooicon.MinusOutlined, {
+            onClick: zoomIn,
+            className: (0, _classnames.default)({
+              'igloo-preview-action-btn': true,
+              'igloo-preview-zoom-in': true,
+              'igloo-preview-disabled': scale <= 0.5
+            }),
+            style: {
+              fontSize: 24
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_iglooicon.PlusOutlined, {
+            onClick: zoomOut,
+            className: (0, _classnames.default)({
+              'igloo-preview-action-btn': true,
+              'igloo-preview-zoom-out': true,
+              'igloo-preview-disabled': scale >= 2
+            }),
+            style: {
+              fontSize: 24
+            }
+          }), canRotate && /*#__PURE__*/(0, _jsxRuntime.jsx)(_iglooicon.RefreshOutlined, {
+            onClick: rotate,
+            className: (0, _classnames.default)({
+              'igloo-preview-action-btn': true,
+              'igloo-preview-rotate-btn': true
+            }),
+            style: {
+              fontSize: 24
+            }
+          }), download && /*#__PURE__*/(0, _jsxRuntime.jsx)(_iglooicon.DownloadOutlined, {
+            onClick: onDownloadByModal,
+            className: (0, _classnames.default)({
+              'igloo-preview-action-btn': true,
+              'igloo-preview-download-btn': true
+            }),
+            style: {
+              fontSize: 24
+            }
+          })]
         }), (list.length > 2 || list.length === 2 && current === 1) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_iglooicon.ArrowLeftOutlined, {
           className: "igloo-media-page-btn",
           style: {

package/lib/media/preview.d.ts

@@ -3,6 +3,7 @@ interface MediaProps {
     src: string;
     type: string;
     scale?: number;
+    rotation?: number;
     isCurrent?: boolean;
     className?: any;
     style?: CSSProperties;