iglooform 3.3.8 → 3.4.0

package/es/documents/index.js

@@ -31,7 +31,14 @@ var Documents = function Documents(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     current = _useState2[0],
     setCurrent = _useState2[1];
-  var _useState3 = useState([]),
+  var _useState3 = useState(function () {
+      return docList.map(function (d) {
+        return {
+          loading: true,
+          src: typeof d === 'string' ? d : d.src
+        };
+      });
+    }),
     _useState4 = _slicedToArray(_useState3, 2),
     list = _useState4[0],
     setList = _useState4[1];
@@ -91,8 +98,25 @@ var Documents = function Documents(_ref) {
   return /*#__PURE__*/_jsx(Space, {
     size: [8, 8],
     wrap: true,
-    children: list.map(function (_ref3, index) {
-      var _src = _ref3.src,
+    children: list.map(function (item, index) {
+      if (item.loading) {
+        var loading = item.loading,
+          _src2 = item.src;
+        return /*#__PURE__*/_jsx("div", {
+          style: {
+            left: "".concat((index - current) * 100, "%")
+          },
+          children: /*#__PURE__*/_jsx(MediaWithPreview, {
+            loading: loading,
+            index: index,
+            src: _src2,
+            className: className,
+            style: style
+          })
+        }, index);
+      }
+      var _ref3 = item,
+        _src = _ref3.src,
         type = _ref3.type,
         nonCORSSrc = _ref3.nonCORSSrc;
       var src = !!nonCORSSrc ? {

package/es/form/hsteps/index.d.ts

@@ -0,0 +1,21 @@
+import { FC, ReactNode } from 'react';
+import { FormItemConfig, FormItemName } from '../../types';
+import './style';
+import { ConfirmationProps } from '../../confirmation';
+export interface HStepsProps {
+    config: FormItemConfig & {
+        confirmations?: {
+            [key: string]: {
+                required: boolean;
+                confirmation?: ConfirmationProps;
+                requiredMessage?: string;
+            };
+        };
+        withReview?: boolean;
+        description?: ReactNode;
+    };
+    parentName?: FormItemName;
+    name?: FormItemName;
+}
+declare const HSteps: FC<HStepsProps>;
+export default HSteps;

package/es/form/step-items-selection/components/section-of-item-condition/hooks/useAdaptAssertConfig.d.ts

@@ -0,0 +1,4 @@
+import type { FormItemConfig } from '../../../../../types';
+type useAdaptAssertConfig = (elements: FormItemConfig[], index: number) => FormItemConfig[];
+export declare const useAdaptAssertConfig: useAdaptAssertConfig;
+export {};

package/es/index.d.ts

@@ -0,0 +1,49 @@
+export { default as Form } from './form';
+export { default as Button, GreenButton, YellowButton, RedButton, } from './button';
+export { default as DatePicker, IglooBuddhistDatePicker as BuddhistDatePicker, IglooRangePicker as RangePicker, IglooWeekPicker as WeekPicker, IglooMonthPicker as MonthPicker, } from './date-picker';
+export { default as Input, PhoneNumber, Amount, Password, Email, InputNumber, TextArea, InputDate, CreditCard, ExpiryDate, InputId, } from './input';
+export { default as OCR } from './ocr';
+export { default as Select, TimeSelect, AttachedSelect } from './select';
+export { default as Radio, RadioGroup, RadioGroupWithOther } from './radio';
+export { default as Upload } from './upload';
+export { default as Checkbox, CheckboxGroup } from './checkbox';
+export { default as Declaration } from './declaration';
+export { Divider } from 'antd';
+export { default as UploadPhoto } from './upload-photo';
+export { default as AlertMessage } from './alert-message';
+export { default as LoginPage } from './login-page';
+export { default as UploadPreview } from './upload-preview';
+export { default as Typography } from './typography';
+export { default as PlatformCard } from './platform/platform-card';
+export { default as SwitchPlatform } from './platform/switch-platform';
+export { default as Table } from './table';
+export { default as StatusBox } from './status-box';
+export { CardPage, Card, CardGroup, CardItem } from './card-detail';
+export { default as AdminMedia } from './media';
+export { default as Documents } from './documents';
+export { default as Filter } from './filter';
+export { default as CurrencyContext } from './currency-context';
+export { default as Tabs } from './tabs';
+export { default as AdminAmount } from './admin-amount';
+export { default as AdminUpload } from './admin-upload';
+export { LocaleProvider } from './locale';
+export { default as Modal } from './modal';
+export { default as BackTop } from './back-top';
+export { default as MediaPreview } from './upload-preview/media';
+export { default as PolicyList } from './policy-list';
+export { default as ClaimList } from './claim-list';
+export { default as MobileInsurerDetail } from './mobile-insurer-detail';
+export { default as Layout } from './layout';
+export { default as DetailPanel } from './detail-panel';
+export { default as message } from './message';
+export { default as SearchBox } from './search-box';
+export { default as FreeForm } from './free-form';
+export { default as FormItem } from './free-form/element';
+export { default as FormPages } from './free-form/pages';
+export { default as FormPage } from './free-form/page';
+export { default as FormSteps } from './free-form/steps';
+export { default as FormStep } from './free-form/step';
+export { default as FormSection } from './free-form/section';
+export { default as FormAddableSection } from './free-form/addable-section';
+export { default as App } from './app';
+export { default as ConfigProvider } from './config-provider';

package/es/media/index.d.ts

@@ -24,6 +24,7 @@ interface Props {
     destroyOnClose?: boolean;
     download?: Download;
     getNonCORSUrl?: GetNonCORSUrl;
+    loading?: boolean;
 }
 declare const MediaWithPreview: FC<Props>;
 export default MediaWithPreview;

package/es/media/index.js

@@ -19,6 +19,7 @@ import FileIcon from "./file-icon";
 import { MinusOutlined, PlusOutlined, ArrowRightOutlined, ArrowLeftOutlined, CrossOutlined, DownloadOutlined } from 'iglooicon';
 import "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var MediaWithPreview = function MediaWithPreview(_ref) {
   var srcProp = _ref.src,
@@ -41,40 +42,54 @@ var MediaWithPreview = function MediaWithPreview(_ref) {
     download = _ref$download === void 0 ? {
       actionType: 'downloadBlob'
     } : _ref$download,
-    getNonCORSUrl = _ref.getNonCORSUrl;
+    getNonCORSUrl = _ref.getNonCORSUrl,
+    loadingProp = _ref.loading;
   var _ref2 = _typeof(srcProp) === 'object' ? [srcProp.origin, srcProp.nonCORS] : [srcProp],
     _ref3 = _slicedToArray(_ref2, 2),
     src = _ref3[0],
     nonCORSSrcProp = _ref3[1];
-  var _useState = useState(nonCORSSrcProp),
+  var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
-    nonCORSSrc = _useState2[0],
-    setNonCORSSrc = _useState2[1];
-  var _useState3 = useState(1),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = useState(nonCORSSrcProp),
     _useState4 = _slicedToArray(_useState3, 2),
-    scale = _useState4[0],
-    setScale = _useState4[1];
-  var _useState5 = useState(type),
+    nonCORSSrc = _useState4[0],
+    setNonCORSSrc = _useState4[1];
+  var _useState5 = useState(1),
     _useState6 = _slicedToArray(_useState5, 2),
-    mediaType = _useState6[0],
-    setType = _useState6[1];
-  var _useState7 = useState(false),
+    scale = _useState6[0],
+    setScale = _useState6[1];
+  var _useState7 = useState(type),
     _useState8 = _slicedToArray(_useState7, 2),
-    showModal = _useState8[0],
-    setShowModal = _useState8[1];
-  var _useState9 = useState(index),
+    mediaType = _useState8[0],
+    setType = _useState8[1];
+  var _useState9 = useState(false),
     _useState10 = _slicedToArray(_useState9, 2),
-    current = _useState10[0],
-    setCurrent = _useState10[1];
-  var _useState11 = useState(''),
+    showModal = _useState10[0],
+    setShowModal = _useState10[1];
+  var _useState11 = useState(index),
     _useState12 = _slicedToArray(_useState11, 2),
-    direction = _useState12[0],
-    setDirection = _useState12[1];
+    current = _useState12[0],
+    setCurrent = _useState12[1];
+  var _useState13 = useState(''),
+    _useState14 = _slicedToArray(_useState13, 2),
+    direction = _useState14[0],
+    setDirection = _useState14[1];
+  useEffect(function () {
+    setType(type);
+  }, [type]);
+  useEffect(function () {
+    if (loadingProp === undefined) return;
+    setLoading(loadingProp);
+  }, [loadingProp]);
   useEffect(function () {
     setNonCORSSrc(nonCORSSrcProp);
   }, [nonCORSSrcProp]);
   useEffect(function () {
+    if (!src) return;
     if (mediaType) {
+      setLoading(false);
       return;
     }
     var unmounted = false;
@@ -84,27 +99,29 @@ var MediaWithPreview = function MediaWithPreview(_ref) {
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
+              setLoading(true);
               _context.t0 = nonCORSSrc;
               if (_context.t0) {
-                _context.next = 5;
+                _context.next = 6;
                 break;
               }
-              _context.next = 4;
+              _context.next = 5;
               return getNonCORSUrl === null || getNonCORSUrl === void 0 ? void 0 : getNonCORSUrl(src);
-            case 4:
-              _context.t0 = _context.sent;
             case 5:
+              _context.t0 = _context.sent;
+            case 6:
               _nonCORSSrc = _context.t0;
-              _context.next = 8;
+              _context.next = 9;
               return getResourceContentType(_nonCORSSrc !== null && _nonCORSSrc !== void 0 ? _nonCORSSrc : src);
-            case 8:
+            case 9:
               contentType = _context.sent;
               typeClass = classifyType(contentType);
               if (!unmounted) {
                 !nonCORSSrc && setNonCORSSrc(_nonCORSSrc);
                 setType(typeClass);
               }
-            case 11:
+              setLoading(false);
+            case 13:
             case "end":
               return _context.stop();
           }
@@ -118,7 +135,7 @@ var MediaWithPreview = function MediaWithPreview(_ref) {
     return function () {
       unmounted = true;
     };
-  }, [src, nonCORSSrc]);
+  }, [mediaType, src, nonCORSSrc]);
   useEffect(function () {
     var handleKeyDown = function handleKeyDown(e) {
       if (!showModal || list.length === 1) return;
@@ -358,15 +375,29 @@ var MediaWithPreview = function MediaWithPreview(_ref) {
   return /*#__PURE__*/_jsxs("div", {
     className: className,
     style: style,
-    children: [canRenderMedia ? /*#__PURE__*/_jsx(Media, {
-      type: mediaType,
-      src: src,
-      onClick: open,
-      name: name
-    }) : /*#__PURE__*/_jsx(FileIcon, {
-      type: mediaType,
-      onDownloadClick: onDownloadByFileIcon,
-      disabledDownload: !download
+    children: [loading && /*#__PURE__*/_jsx("div", {
+      style: {
+        position: 'relative',
+        width: 80,
+        height: 80,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        overflow: 'hidden',
+        border: '1px solid #EEEEEE'
+      },
+      children: /*#__PURE__*/_jsx(Media.Loading, {})
+    }), !loading && /*#__PURE__*/_jsx(_Fragment, {
+      children: canRenderMedia ? /*#__PURE__*/_jsx(Media, {
+        type: mediaType,
+        src: src,
+        onClick: open,
+        name: name
+      }) : /*#__PURE__*/_jsx(FileIcon, {
+        type: mediaType,
+        onDownloadClick: onDownloadByFileIcon,
+        disabledDownload: !download
+      })
     }), /*#__PURE__*/_jsxs(Modal, {
       open: showModal,
       onCancel: close,

package/es/media/media.d.ts

@@ -1,4 +1,5 @@
 import { FC, CSSProperties } from 'react';
+declare const Loading: () => import("react/jsx-runtime").JSX.Element;
 interface MediaProps {
     src: string;
     type: string;
@@ -7,5 +8,7 @@ interface MediaProps {
     style?: CSSProperties;
     name?: string;
 }
-declare const Media: FC<MediaProps>;
+declare const Media: FC<MediaProps> & {
+    Loading: typeof Loading;
+};
 export default Media;

package/es/media/media.js

@@ -8,8 +8,30 @@ import React, { useRef, useState, useContext } from 'react';
 import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
 import { Tooltip } from 'antd';
 import { LocaleContext } from "../locale";
+import { LoadingOutlined } from 'iglooicon';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var Loading = function Loading() {
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      zIndex: 1
+    },
+    children: /*#__PURE__*/_jsx(LoadingOutlined, {
+      spinning: true,
+      style: {
+        fontSize: 24,
+        color: '#999999'
+      }
+    })
+  });
+};
 var MediaItem = function MediaItem(_ref) {
   var type = _ref.type,
     src = _ref.src;
@@ -22,15 +44,25 @@ var MediaItem = function MediaItem(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     errorText = _useState2[0],
     setErrorText = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
   switch (type) {
     case 'video':
-      return /*#__PURE__*/_jsx("video", {
-        src: src,
-        style: {
-          maxWidth: 80,
-          maxHeight: 80
-        },
-        autoPlay: false
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [loading && /*#__PURE__*/_jsx(Loading, {}), /*#__PURE__*/_jsx("video", {
+          src: src,
+          style: {
+            maxWidth: 80,
+            maxHeight: 80,
+            opacity: loading ? 0 : 1
+          },
+          autoPlay: false,
+          onLoadedData: function onLoadedData() {
+            return setLoading(false);
+          }
+        })]
       });
     case 'pdf':
       var needPassword = function needPassword() {
@@ -45,36 +77,50 @@ var MediaItem = function MediaItem(_ref) {
           }));
         }
       };
-      return /*#__PURE__*/_jsx("div", {
+      return /*#__PURE__*/_jsxs("div", {
         style: {
           maxWidth: 80,
           maxHeight: 80,
           position: 'absolute'
         },
-        children: /*#__PURE__*/_jsx(Document, {
-          ref: documentRef,
-          file: src,
-          onPassword: needPassword,
-          error: /*#__PURE__*/_jsx("div", {
-            style: {
-              textAlign: 'center'
+        children: [loading && /*#__PURE__*/_jsx(Loading, {}), /*#__PURE__*/_jsx("div", {
+          style: {
+            opacity: loading ? 0 : 1
+          },
+          children: /*#__PURE__*/_jsx(Document, {
+            ref: documentRef,
+            file: src,
+            onPassword: needPassword,
+            error: /*#__PURE__*/_jsx("div", {
+              style: {
+                textAlign: 'center'
+              },
+              children: errorText
+            }),
+            onLoadSuccess: function onLoadSuccess() {
+              return setLoading(false);
             },
-            children: errorText
-          }),
-          children: /*#__PURE__*/_jsx(Page, {
-            pageNumber: 1,
-            scale: 0.1
+            children: /*#__PURE__*/_jsx(Page, {
+              pageNumber: 1,
+              scale: 0.1
+            })
           })
-        })
+        })]
       });
     default:
-      return /*#__PURE__*/_jsx("img", {
-        src: src,
-        style: {
-          maxWidth: 80,
-          maxHeight: 80,
-          position: 'absolute'
-        }
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [loading && /*#__PURE__*/_jsx(Loading, {}), /*#__PURE__*/_jsx("img", {
+          src: src,
+          style: {
+            maxWidth: 80,
+            maxHeight: 80,
+            position: 'absolute',
+            opacity: loading ? 0 : 1
+          },
+          onLoad: function onLoad() {
+            return setLoading(false);
+          }
+        })]
       });
   }
 };
@@ -113,4 +159,5 @@ var Media = function Media(_ref2) {
     })
   });
 };
+Media.Loading = Loading;
 export default Media;

package/es/types.d.ts

@@ -0,0 +1,189 @@
+/// <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;
+    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;
+    };
+}