iglooform 2.5.54 → 2.5.56

package/es/ocr/micro-blink/index.js

@@ -0,0 +1,189 @@
+import "antd/es/upload/style";
+import _Upload from "antd/es/upload";
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { UploadOutlined } from 'iglooicon';
+import { colors } from 'iglootheme';
+import invariant from 'invariant';
+import * as lodash from 'lodash';
+import moment from 'moment';
+import fromContext from '../../form-context';
+import Typography from '../../typography';
+import { LocaleContext } from '../../locale';
+import message from '../../global-message';
+import './style';
+
+function getOcrDate(result, format) {
+  var successfullyParsed = lodash.get(result, ['dateOfBirth', 'successfullyParsed']);
+
+  if (successfullyParsed) {
+    var year = lodash.get(result, ['dateOfBirth', 'year']);
+    var month = lodash.get(result, ['dateOfBirth', 'month']);
+    var day = lodash.get(result, ['dateOfBirth', 'day']);
+    var date = new Date("".concat(year, "-").concat(month, "-").concat(day));
+    return format ? moment(date).format(format) : moment(date);
+  }
+
+  return undefined;
+}
+
+var MicroBlink = function MicroBlink(props) {
+  var outputMap = props.outputMap,
+      disabled = props.disabled;
+  var Dragger = _Upload.Dragger;
+
+  var _useContext = useContext(fromContext),
+      ocrHooks = _useContext.ocrHooks,
+      form = _useContext.form;
+
+  var _useContext2 = useContext(LocaleContext),
+      formatMessage = _useContext2.formatMessage;
+
+  var _ref = ocrHooks || {},
+      microBlink = _ref.microBlink;
+
+  var _ref2 = microBlink || {},
+      recognize = _ref2.recognize;
+
+  invariant(Boolean(microBlink) && Boolean(recognize), 'Must Config Micro Blink licenseKey');
+
+  var onUpload = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(file) {
+      var microBlinkResult, state, formSet;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!recognize) {
+                _context.next = 15;
+                break;
+              }
+
+              _context.next = 3;
+              return recognize(file);
+
+            case 3:
+              microBlinkResult = _context.sent;
+
+              if (microBlinkResult) {
+                _context.next = 6;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 6:
+              state = microBlinkResult.state;
+              _context.t0 = state;
+              _context.next = _context.t0 === 0 ? 10 : 12;
+              break;
+
+            case 10:
+              message.error(formatMessage({
+                id: 'Nothing has been recognized.'
+              }));
+              return _context.abrupt("return");
+
+            case 12:
+              return _context.abrupt("break", 13);
+
+            case 13:
+              formSet = (outputMap || []).reduce(function (pre, cur) {
+                var field = cur.field,
+                    source = cur.source,
+                    format = cur.format,
+                    formatType = cur.formatType;
+
+                switch (formatType) {
+                  case 'date':
+                    pre.push({
+                      name: field,
+                      value: getOcrDate(microBlinkResult, format),
+                      errors: []
+                    });
+                    break;
+
+                  default:
+                    pre.push({
+                      name: field,
+                      value: lodash.get(microBlinkResult || {}, source),
+                      errors: []
+                    });
+                    break;
+                }
+
+                return pre;
+              }, []);
+              form === null || form === void 0 ? void 0 : form.setFields(formSet);
+
+            case 15:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function onUpload(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  return _jsx("div", {
+    className: 'igloo-micro-blink',
+    children: _jsx(Dragger, {
+      action: function action(file) {
+        onUpload(file);
+        return '';
+      },
+      showUploadList: false,
+      className: "igloo-upload-box",
+      customRequest: function customRequest() {},
+      //@ts-ignore
+      disabled: disabled,
+      multiple: true,
+      children: _jsxs("div", {
+        className: "igloo-upload-box-center",
+        children: [_jsx(UploadOutlined, {
+          style: {
+            marginRight: 16,
+            fontSize: 24,
+            color: '#666666'
+          }
+        }), _jsxs("span", {
+          className: "igloo-upload-placeholder",
+          children: [_jsx(Typography, {
+            level: "body1",
+            children: formatMessage({
+              id: 'Drag and drop a file here'
+            })
+          }), _jsx(Typography, {
+            level: "body1",
+            style: {
+              marginLeft: 4
+            },
+            children: formatMessage({
+              id: 'or'
+            })
+          }), _jsx(Typography, {
+            level: "body1",
+            style: {
+              color: colors.purpleMain,
+              marginLeft: 4
+            },
+            children: formatMessage({
+              id: 'browse'
+            })
+          })]
+        })]
+      })
+    })
+  });
+};
+
+export default MicroBlink;

package/es/ocr/micro-blink/style/index.d.ts

@@ -0,0 +1 @@
+import './index.less';

package/es/ocr/micro-blink/style/index.js

@@ -0,0 +1 @@
+import './index.less';

package/es/ocr/micro-blink/style/index.less

@@ -0,0 +1,30 @@
+.igloo-micro-blink {
+  .igloo-upload-box {
+    &:hover {
+      border-color: #d9d9d9 !important;
+    }
+
+    & > .ant-upload {
+      background: #ffffff !important;
+
+      .ant-upload-btn {
+        padding: 24px 24px;
+      }
+    }
+
+    .igloo-upload-box-center {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      white-space: nowrap;
+
+      .igloo-upload-placeholder {
+        white-space: pre-wrap;
+
+        .igloo-upload-box-center-upload-icon {
+          margin-right: 16px;
+        }
+      }
+    }
+  }
+}

package/es/types.d.ts

@@ -4,8 +4,19 @@ import { ReactNode } from 'react';
 import { NamePath } from 'rc-field-form/lib/interface';
 import { CheckboxOptionType } from 'antd/es/checkbox';
 import { SelectProps } from 'antd/es/select';
+import { BlinkIdSingleSideRecognizerResult } from '@microblink/blinkid-in-browser-sdk';
 export { Rule } from 'rc-field-form/lib/interface';
 export declare type FormItemName = NamePath;
+export interface OCRHooks {
+    microBlink?: {
+        recognize: ((file: File) => Promise<BlinkIdSingleSideRecognizerResult | null>) | null;
+    };
+}
+export interface OCRConfig {
+    microBlink?: {
+        licenseKey: string;
+    };
+}
 export interface FormBasicConfig {
     className?: string;
     config: FormItemConfig;
@@ -31,6 +42,7 @@ export interface FormBasicConfig {
     validationRule?: string;
     getRuleValidationApi?: string;
     stepDirection?: 'vertical' | 'horizontal';
+    ocr?: OCRConfig;
 }
 export declare type FormItemAssert = {
     field: NamePath;

package/es/upload/index.js

@@ -54,6 +54,7 @@ import { LocaleContext } from '../locale';
 import Preview from '../upload-preview/media';
 import { classifyType } from '../utils/tools';
 import FormContext from '../form-context';
+import { staticFormatMessage } from '../locale';
 var Dragger = _Upload.Dragger;
 
 var IglooUpload = function IglooUpload(props) {
@@ -64,11 +65,16 @@ var IglooUpload = function IglooUpload(props) {
   var _useContext = useContext(FormContext),
       uploadApi = _useContext.uploadApi;
 
+  var _useContext2 = useContext(LocaleContext),
+      formatMessage = _useContext2.formatMessage;
+
+  var staticMessage = formatMessage({
+    id: 'File Uploading'
+  });
   invariant(typeof props.handleUpload === 'function' || uploadApi, '"handleUpload" should be a function. Or uploadApi should be set at Form/FreeForm');
   invariant(!uploadApi || props.bizKey, '"bizKey" should be set if Upload is used with uploadApi');
 
-  var _props$value = props.value,
-      value = _props$value === void 0 ? [] : _props$value,
+  var value = props.value,
       limit = props.limit,
       limitErrorMessage = props.limitErrorMessage,
       descriptions = props.descriptions,
@@ -119,21 +125,28 @@ var IglooUpload = function IglooUpload(props) {
       placeholder = props.placeholder,
       rest = _objectWithoutProperties(props, _excluded);
 
-  var _useState = useState(value.map(function (url, index) {
-    return {
-      url: url,
-      dataUrl: url,
-      status: 'success',
-      type: '',
-      name: "File".concat(index + 1),
-      size: 0,
-      uid: index
-    };
-  })),
+  var _useState = useState([]),
       _useState2 = _slicedToArray(_useState, 2),
       files = _useState2[0],
       setFiles = _useState2[1];
 
+  useEffect(function () {
+    if (Array.isArray(value) && value.length && files.length === 0) {
+      var _files = (value || []).map(function (url, index) {
+        return {
+          url: url,
+          dataUrl: url,
+          status: 'success',
+          type: '',
+          name: "File".concat(index + 1),
+          size: 0,
+          uid: index
+        };
+      });
+
+      setFiles(_files);
+    }
+  }, [value]);
   useEffect(function () {
     var removeLimitMsg = function removeLimitMsg(e) {
       if (!(files === null || files === void 0 ? void 0 : files.length)) {
@@ -157,10 +170,6 @@ var IglooUpload = function IglooUpload(props) {
       return;
     }
   });
-
-  var _useContext2 = useContext(LocaleContext),
-      formatMessage = _useContext2.formatMessage;
-
   useEffect(function () {
     return function () {
       dataUrlRef.current.forEach(function (dataUrl) {
@@ -169,9 +178,20 @@ var IglooUpload = function IglooUpload(props) {
     };
   }, []);
   useEffect(function () {
-    if (!(value === null || value === void 0 ? void 0 : value.length) && !files.length) return;
+    if (!value && !files.length) return;
 
     if (files.length) {
+      var hasProcessing = files.find(function (f) {
+        return f.status === 'progress';
+      });
+
+      if (hasProcessing) {
+        onChange && onChange({
+          status: 'processing'
+        });
+        return;
+      }
+
       var urls = files.map(function (f) {
         var status = f.status,
             name = f.name,
@@ -184,13 +204,11 @@ var IglooUpload = function IglooUpload(props) {
           };
         }
 
-        if (f.url || f.dataUrl) {
-          return f.url || f.dataUrl;
-        }
+        return f.url;
       });
       onChange && onChange(urls);
     } else {
-      onChange && onChange([]);
+      onChange && onChange(undefined);
     }
   }, [files]);
   invariant(limit === undefined || limit > 0, "\"limit\" should be a pasitive number.");
@@ -607,6 +625,12 @@ var FileList = function FileList(_ref6) {
 };
 
 function checkFileList(value) {
+  if ((value === null || value === void 0 ? void 0 : value.status) === 'processing') {
+    return Promise.reject(staticFormatMessage({
+      id: 'File Uploading'
+    }));
+  }
+
   if (!value) {
     return Promise.resolve();
   }

package/es/upload-photo/index.js

@@ -58,6 +58,7 @@ import Preview from '../upload-preview/media';
 import { classifyType } from '../utils/tools';
 import MediaItem from './media';
 import FormContext from '../form-context';
+import { staticFormatMessage } from '../locale';
 var useBreakpoint = _Grid.useBreakpoint;
 var prefix = 'igloo-upload-photo';
 
@@ -199,6 +200,10 @@ var UploadPhoto = function UploadPhoto(props) {
   var _useBreakpoint = useBreakpoint(),
       md = _useBreakpoint.md;
 
+  var staticMessage = formatMessage({
+    id: 'Photo Uploading'
+  });
+
   var mapFilesFromValue = function mapFilesFromValue(urls) {
     var _files = [];
     Promise.all(urls.map( /*#__PURE__*/function () {
@@ -250,6 +255,17 @@ var UploadPhoto = function UploadPhoto(props) {
     if (!value && !files.length) return;
 
     if (files.length) {
+      var hasProcessing = files.find(function (f) {
+        return f.status === 'progress';
+      });
+
+      if (hasProcessing) {
+        onChange && onChange({
+          status: 'processing'
+        });
+        return;
+      }
+
       var urls = files.map(function (f) {
         var status = f.status,
             name = f.name,
@@ -262,13 +278,11 @@ var UploadPhoto = function UploadPhoto(props) {
           };
         }
 
-        if (f.url || f.dataUrl) {
-          return f.url || f.dataUrl;
-        }
+        return f.url;
       });
       onChange && onChange(urls);
     } else {
-      onChange && onChange([]);
+      onChange && onChange(undefined);
     }
   }, [files]);
   var uploadId = useMemo(function () {
@@ -806,6 +820,12 @@ var UploadPhoto = function UploadPhoto(props) {
 };
 
 function checkFileList(value) {
+  if ((value === null || value === void 0 ? void 0 : value.status) === 'processing') {
+    return Promise.reject(staticFormatMessage({
+      id: 'Photo Uploading'
+    }));
+  }
+
   if (!value) {
     return Promise.resolve();
   }

package/es/utils/form-utils.js

@@ -210,7 +210,7 @@ export var calcFormItemProps = function calcFormItemProps(config, extraProps, fo
       shouldRenderCode = config.shouldRenderCode,
       rest = _objectWithoutProperties(config, _excluded);
 
-  invariant(nameProp !== undefined || type === 'Divider' || type === 'Section' || type === 'Typography' || !type, "name property is required for form item config (type: ".concat(type, ")"));
+  invariant(nameProp !== undefined || type === 'Divider' || type === 'Section' || type === 'Typography' || type === 'OCR' || !type, "name property is required for form item config (type: ".concat(type, ")"));
   invariant(!previewFormater || typeof previewFormater === 'function', 'previewFormater property should be a function');
   invariant(!shouldRender || typeof shouldRender === 'function', 'shouldRender property should be a function');
 

package/lib/form/elements.js

@@ -37,6 +37,8 @@ var _typography = _interopRequireDefault(require("../typography"));
 
 var _searchBox = _interopRequireDefault(require("../search-box"));
 
+var _ocr = _interopRequireDefault(require("../ocr"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -75,7 +77,8 @@ var elementMap = {
   Confirmation: _confirmation.default,
   ExpiryDate: _input.ExpiryDate,
   Typography: _typography.default,
-  SearchBox: _searchBox.default
+  SearchBox: _searchBox.default,
+  OCR: _ocr.default
 };
 
 var Unknown = function Unknown() {

package/lib/form/index.js

@@ -37,6 +37,8 @@ var _locale = require("../locale");
 
 var _formUtils = require("./../utils/form-utils");
 
+var _ocr = _interopRequireDefault(require("../hooks/ocr"));
+
 var _excluded = ["validateMessages"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -91,7 +93,8 @@ var IglooForm = function IglooForm(props, ref) {
       selectDatasourceApi = props.selectDatasourceApi,
       getRuleValidationApi = props.getRuleValidationApi,
       _props$stepDirection = props.stepDirection,
-      stepDirection = _props$stepDirection === void 0 ? 'vertical' : _props$stepDirection;
+      stepDirection = _props$stepDirection === void 0 ? 'vertical' : _props$stepDirection,
+      ocr = props.ocr;
 
   var _Form$useForm = _form.default.useForm(),
       _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
@@ -119,6 +122,13 @@ var IglooForm = function IglooForm(props, ref) {
       currentLang = _useContext.currentLang;
 
   var validationRule = props.validationRule || config.validationRule;
+  var createHooks = (0, _ocr.default)();
+  var ocrHooks = undefined;
+
+  if (ocr) {
+    ocrHooks = createHooks(ocr);
+  }
+
   (0, _invariant.default)(type, "Contianer type should be one of ['Pages', 'Page', 'Steps', 'Login']");
   (0, _invariant.default)(!validationRule || getRuleValidationApi, 'Please provide getRuleValidationApi in Form props');
 
@@ -302,7 +312,8 @@ var IglooForm = function IglooForm(props, ref) {
         uploadApi: uploadApi,
         selectDatasourceApi: selectDatasourceApi,
         getRuleValidationApi: getRuleValidationApi,
-        handleValuesChange: handleValuesChange
+        handleValuesChange: handleValuesChange,
+        ocrHooks: ocrHooks
       }, locales),
       children: (0, _jsxRuntime.jsxs)(_form.default, {
         form: form,

package/lib/form-context.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormInstance } from 'antd/es/form';
-import { FormItemName } from '@/types';
+import { FormItemName, OCRHooks } from './types';
 declare const _default: React.Context<{
     form?: FormInstance<any> | undefined;
     onCancel?(): void;
@@ -19,5 +19,6 @@ declare const _default: React.Context<{
     selectDatasourceApi?: string | undefined;
     getRuleValidationApi?: string | undefined;
     handleValuesChange(changedFields: any): any;
+    ocrHooks?: OCRHooks | undefined;
 }>;
 export default _default;

package/lib/form-context.js

@@ -14,7 +14,8 @@ var _default = /*#__PURE__*/_react.default.createContext({
     return window;
   },
   registerDependencies: function registerDependencies() {},
-  handleValuesChange: function handleValuesChange() {}
+  handleValuesChange: function handleValuesChange() {},
+  ocrHooks: {}
 });
 
 exports.default = _default;

package/lib/hooks/index.d.ts

@@ -0,0 +1 @@
+

package/lib/hooks/index.js

@@ -0,0 +1 @@
+"use strict";

package/lib/hooks/ocr/index.d.ts

@@ -0,0 +1,3 @@
+import { OCRConfig, OCRHooks } from '../../types';
+declare const useOCR: () => (config: OCRConfig) => OCRHooks;
+export default useOCR;

package/lib/hooks/ocr/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _invariant = _interopRequireDefault(require("invariant"));
+
+var _microBlink = _interopRequireDefault(require("./micro-blink"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var useOCR = function useOCR() {
+  var createRecognize = (0, _microBlink.default)();
+  return function (config) {
+    var microBlink = config.microBlink;
+
+    var _ref = microBlink || {},
+        licenseKey = _ref.licenseKey;
+
+    var hooks = {};
+    (0, _invariant.default)(Boolean(microBlink) === Boolean(licenseKey), 'Must Config licenseKey of Micro Blink');
+
+    if (microBlink && licenseKey) {
+      hooks['microBlink'] = {
+        recognize: createRecognize(licenseKey)
+      };
+    }
+
+    return hooks;
+  };
+};
+
+var _default = useOCR;
+exports.default = _default;

package/lib/hooks/ocr/micro-blink.d.ts

@@ -0,0 +1,3 @@
+import * as BlinkIDSDK from '@microblink/blinkid-in-browser-sdk';
+declare const useMicroBlink: () => (licenseKey: string) => (file: File) => Promise<BlinkIDSDK.BlinkIdSingleSideRecognizerResult | null>;
+export default useMicroBlink;