@innoways/drip-form-theme-antd 6.3.0 → 6.3.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 6.3.2
+
+### Patch Changes
+
+- feature: Added new field component place auto complete, version 6.3.2
+- Updated dependencies
+  - @innoways/hooks@6.3.2
+  - @innoways/utils@6.3.2
+
+## 6.3.1
+
+### Patch Changes
+
+- Added hideOnViewMode feature version 6.3.1.
+- Updated dependencies
+  - @innoways/hooks@6.3.1
+  - @innoways/utils@6.3.1
+
 ## 6.3.0
 
 ### Minor Changes

package/dist/index.js

@@ -1,11 +1,29 @@
 import _extends from '@babel/runtime/helpers/extends';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import 'antd/es/input/style';
 import _Input from 'antd/es/input';
-import React, { memo, useState, useEffect, useMemo, useCallback } from 'react';
+import React, { useState, memo, useEffect, useMemo, useCallback } from 'react';
 import { useField, useCountryStateCityOptions, usePrevious, useQuery, useEventCallback } from '@innoways/hooks';
+import 'antd/es/modal/style';
+import _Modal from 'antd/es/modal';
+import 'antd/es/table/style';
+import _Table from 'antd/es/table';
+import 'antd/es/row/style';
+import _Row from 'antd/es/row';
+import 'antd/es/button/style';
+import _Button from 'antd/es/button';
+import 'antd/es/col/style';
+import _Col from 'antd/es/col';
+import 'antd/es/select/style';
+import _Select from 'antd/es/select';
+import 'antd/es/message/style';
+import _message from 'antd/es/message';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import 'antd/es/form/style';
+import _Form from 'antd/es/form';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
 import 'antd/es/radio/style';
 import _Radio from 'antd/es/radio';
 import reactIs from 'react-is';
@@ -16,8 +34,6 @@ import { typeCheck, isEmpty, binaryData2Blob, checkImg, isValidHttpUrl, fetchFnJ
 import { Collapse, Button, Popconfirm } from 'antd';
 import 'antd/es/input-number/style';
 import _InputNumber from 'antd/es/input-number';
-import 'antd/es/select/style';
-import _Select from 'antd/es/select';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import * as Icon from 'react-feather';
 import { Edit, Delete, Search } from 'react-feather';
@@ -34,27 +50,454 @@ import 'antd/es/date-picker/style';
 import _DatePicker from 'antd/es/date-picker';
 import Flatpickr from 'react-flatpickr';
 import 'flatpickr/dist/flatpickr.min.css';
-import 'antd/es/button/style';
-import _Button from 'antd/es/button';
 import { SketchPicker } from 'react-color';
 import 'antd/es/checkbox/style';
 import _Checkbox from 'antd/es/checkbox';
-import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import 'antd/es/upload/style';
 import _Upload from 'antd/es/upload';
-import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { useImmer } from 'use-immer';
 import 'antd/es/cascader/style';
 import _Cascader from 'antd/es/cascader';
 import 'antd/es/transfer/style';
 import _Transfer from 'antd/es/transfer';
-import 'antd/es/table/style';
-import _Table from 'antd/es/table';
-import 'antd/es/modal/style';
-import _Modal from 'antd/es/modal';
 import 'antd/es/tree-select/style';
 import _TreeSelect from 'antd/es/tree-select';
 
+function ownKeys$f(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; }
+
+function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function GpsModal(_ref) {
+  var isOpen = _ref.isOpen,
+      setIsOpen = _ref.setIsOpen;
+
+  var _useState = useState({
+    type: '',
+    address: '',
+    latitude: '',
+    longitude: ''
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      gpsData = _useState2[0],
+      setGpsData = _useState2[1];
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2);
+      _useState4[0];
+      _useState4[1];
+
+  var _Form$useForm = _Form.useForm(),
+      _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+      form = _Form$useForm2[0];
+
+  var handleGpsDataChange = function handleGpsDataChange(value, name) {
+    setGpsData(_objectSpread$f(_objectSpread$f({}, gpsData), {}, _defineProperty({}, name, value)));
+  };
+
+  var handleValidate = function handleValidate() {
+    form.validateFields(['type', 'address']);
+    var type = gpsData.type,
+        address = gpsData.address;
+    var flag = true;
+
+    if (!type) {
+      flag = false;
+    }
+
+    if (!address) {
+      flag = false;
+    }
+
+    return flag;
+  };
+
+  var handleLatValidate = function handleLatValidate() {
+    form.validateFields(['type', 'latitude', 'longitude']);
+    var type = gpsData.type,
+        latitude = gpsData.latitude,
+        longitude = gpsData.longitude;
+    var flag = true;
+
+    if (!type) {
+      flag = false;
+    }
+
+    if (!latitude) {
+      flag = false;
+    }
+
+    if (!longitude) {
+      flag = false;
+    }
+
+    return flag;
+  };
+
+  var handleAddressSearch = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!handleValidate()) {
+                _context.next = 3;
+                break;
+              }
+
+              _context.next = 3;
+              return fetch("https://api.a4appz.com/apim/getlocation?type=".concat(gpsData.type, "&address=").concat(gpsData.address, "&ostype=DynamicForm"), {
+                method: 'GET',
+                headers: {
+                  'X-SiiA-Api-Key': '0726e1cf-a8b3-426c-bb7b-3857704ff011',
+                  'User-Agent': 'Apifox/1.0.0 (https://apifox.com)',
+                  Accept: '*/*',
+                  Host: 'api.a4appz.com',
+                  Connection: 'keep-alive',
+                  'Content-Type': 'application/json'
+                }
+              }).then(function (res) {
+                return res.json();
+              }).then(function (res) {
+                if (res.status === 200) {
+                  var _res$data;
+
+                  var getDetails = res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.data;
+                  console.log(getDetails); // setGpsData(getDetails)
+                }
+              })["catch"](function (err) {
+                console.log('err', err === null || err === void 0 ? void 0 : err.response);
+
+                _message.error('Address not found!', 2);
+              });
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function handleAddressSearch() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var handleLocationSearch = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!handleLatValidate()) {
+                _context2.next = 3;
+                break;
+              }
+
+              _context2.next = 3;
+              return fetch("https://api.a4appz.com/apim/getlocation?type=".concat(gpsData.type, "&location=").concat(gpsData.latitude, ",").concat(gpsData.longitude, "&ostype=DynamicForm"), {
+                method: 'GET',
+                headers: {
+                  'X-SiiA-Api-Key': '0726e1cf-a8b3-426c-bb7b-3857704ff011',
+                  'User-Agent': 'Apifox/1.0.0 (https://apifox.com)',
+                  Accept: '*/*',
+                  Host: 'api.a4appz.com',
+                  Connection: 'keep-alive',
+                  'Content-Type': 'application/json'
+                }
+              }).then(function (res) {
+                return res.json();
+              }).then(function (res) {
+                if (res.status === 200) {
+                  var _res$data2;
+
+                  var getDetails = res === null || res === void 0 ? void 0 : (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.data;
+                  console.log(getDetails); // setGpsData(getDetails)
+                }
+              })["catch"](function (err) {
+                console.log('err', err === null || err === void 0 ? void 0 : err.response);
+
+                _message.error('Location not found!', 2);
+              });
+
+            case 3:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    return function handleLocationSearch() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/React.createElement(_Modal, {
+    title: "Modal",
+    visible: isOpen,
+    onOk: function onOk() {},
+    onCancel: function onCancel() {
+      return setIsOpen(false);
+    },
+    okText: "Save",
+    cancelText: "Cancel"
+  }, /*#__PURE__*/React.createElement(_Form, {
+    form: form
+  }, /*#__PURE__*/React.createElement(_Row, null, /*#__PURE__*/React.createElement(_Col, {
+    span: 24
+  }, /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "Type",
+    name: "type",
+    rules: [{
+      required: true,
+      message: 'Please select type!'
+    }]
+  }, /*#__PURE__*/React.createElement(_Select, {
+    options: [{
+      label: 'Google',
+      value: 'WGS84'
+    }, {
+      label: 'Amap',
+      value: 'GCJ02'
+    }],
+    value: gpsData.type,
+    onChange: function onChange(e) {
+      return handleGpsDataChange(e, 'type');
+    }
+  }))), /*#__PURE__*/React.createElement(_Col, {
+    span: 24
+  }, /*#__PURE__*/React.createElement(_Row, null, /*#__PURE__*/React.createElement(_Col, {
+    span: 20
+  }, /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "Address",
+    name: "address",
+    rules: [{
+      required: true,
+      message: 'Please input address!'
+    }],
+    style: {
+      marginRight: '15px'
+    }
+  }, /*#__PURE__*/React.createElement(_Input, {
+    type: "text",
+    id: "adresss",
+    placeholder: "",
+    value: gpsData.address,
+    onChange: function onChange(e) {
+      return handleGpsDataChange(e.target.value, 'address');
+    }
+  }))), /*#__PURE__*/React.createElement(_Col, {
+    span: 4
+  }, /*#__PURE__*/React.createElement(_Button, {
+    color: "primary",
+    onClick: function onClick() {
+      return handleAddressSearch();
+    }
+  }, "Search")))), /*#__PURE__*/React.createElement(_Col, {
+    span: 24
+  }, /*#__PURE__*/React.createElement(_Row, null, /*#__PURE__*/React.createElement(_Col, {
+    span: 10
+  }, /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "Longitude",
+    name: "longitude",
+    style: {
+      marginLeft: '10px'
+    }
+  }, /*#__PURE__*/React.createElement(_Input, {
+    type: "text",
+    id: "longitude",
+    placeholder: "",
+    value: gpsData.longitude,
+    onChange: function onChange(e) {
+      return handleGpsDataChange(e.target.value, 'longitude');
+    }
+  }))), /*#__PURE__*/React.createElement(_Col, {
+    span: 10
+  }, /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "Latitude",
+    name: "latitude",
+    style: {
+      marginLeft: '10px'
+    }
+  }, /*#__PURE__*/React.createElement(_Input, {
+    type: "text",
+    id: "latitude",
+    placeholder: "",
+    value: gpsData.latitude,
+    onChange: function onChange(e) {
+      return handleGpsDataChange(e.target.value, 'latitude');
+    }
+  }))), /*#__PURE__*/React.createElement(_Col, {
+    span: 4
+  }, /*#__PURE__*/React.createElement(_Button, {
+    style: {
+      marginLeft: '15px'
+    },
+    color: "primary",
+    onClick: function onClick() {
+      return handleLocationSearch();
+    }
+  }, "Search")))))), /*#__PURE__*/React.createElement("div", {
+    className: "servicesTable mb-1 mt-1"
+  }, /*#__PURE__*/React.createElement(_Table, null)));
+}
+
+/**
+ * Place Auto Complete
+ */
+var config$l = {
+  icon: 'iconfont icon-input',
+  title: 'Place Auto Complete',
+  unitedSchema: {
+    type: 'string',
+    title: 'Place Auto Complete',
+    ui: {
+      type: 'placeAutoComplete',
+      description: {
+        type: 'icon',
+        title: 'Hover description',
+        trigger: 'hover'
+      },
+      style: {
+        width: '100%'
+      },
+      containerStyle: {
+        width: '100%'
+      },
+      theme: 'antd'
+    }
+  },
+  propertyConfig: {
+    styleSchema: [{
+      type: 'string',
+      title: 'Form modes',
+      "default": 'edit',
+      ui: {
+        type: 'radio',
+        options: [{
+          value: 'edit',
+          label: 'Edit'
+        }, {
+          value: 'view',
+          label: 'View'
+        }]
+      },
+      fieldKey: 'formMode'
+    }, {
+      fieldKey: 'placeholder',
+      type: 'string',
+      title: 'Placeholder',
+      ui: {
+        type: 'text',
+        placeholder: 'Please enter text',
+        allowClear: true
+      }
+    }, {
+      fieldKey: 'multiline',
+      type: 'number',
+      title: 'Number of text lines',
+      "default": 1,
+      // formatter: 'value => `${value}%`',
+      ui: {
+        type: 'number',
+        allowClear: true,
+        min: 1,
+        step: 1
+      }
+    }, {
+      fieldKey: 'disabled',
+      type: 'boolean',
+      title: 'Is It disabled',
+      "default": false,
+      ui: {
+        type: 'switch'
+      }
+    }, {
+      fieldKey: 'allowClear',
+      type: 'boolean',
+      title: 'Can be cleared',
+      "default": true,
+      ui: {
+        type: 'switch'
+      }
+    }, {
+      fieldKey: 'showCount',
+      type: 'boolean',
+      title: 'Whether to display word count',
+      "default": false,
+      ui: {
+        type: 'switch',
+        vcontrol: 'return props.formData.ui.multiline>1'
+      }
+    }, {
+      fieldKey: 'default',
+      type: 'string',
+      title: 'Default value',
+      ui: {
+        type: 'text',
+        placeholder: 'Please enter text',
+        allowClear: true
+      }
+    }]
+  }
+};
+
+var _excluded$m = ["multiline", "disabled", "onChange", "fieldData", "fieldKey", "dispatch", "disabled_input", "style", "asyncValidate", "getKey", "formMode", "autoSize", "type", "globalState"];
+
+function ownKeys$e(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; }
+
+function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+_Input.TextArea;
+
+var PlaceAutoCompleteField = function PlaceAutoCompleteField(_ref) {
+  _ref.multiline;
+      var disabled = _ref.disabled,
+      onChange = _ref.onChange,
+      fieldData = _ref.fieldData,
+      fieldKey = _ref.fieldKey,
+      dispatch = _ref.dispatch,
+      disabled_input = _ref.disabled_input,
+      style = _ref.style,
+      asyncValidate = _ref.asyncValidate,
+      getKey = _ref.getKey;
+      _ref.formMode;
+      _ref.autoSize;
+      _ref.type;
+      var globalState = _ref.globalState,
+      restProps = _objectWithoutProperties(_ref, _excluded$m);
+
+  var _onChange = useField(_objectSpread$e({
+    fieldKey: fieldKey,
+    onChange: onChange,
+    asyncValidate: asyncValidate,
+    getKey: getKey
+  }, disabled_input && {
+    options: {
+      disabled_input: disabled_input,
+      isFormat: true
+    }
+  }), dispatch);
+
+  var handleIsGPSModalOpen = function handleIsGPSModalOpen(toggle) {
+    globalState.setGlobalState(_objectSpread$e(_objectSpread$e({}, globalState), {}, {
+      webModalForPlaceAutoCompleteField: toggle ? fieldKey : null
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Input, _extends({
+    disabled: disabled,
+    onChange: _onChange,
+    value: fieldData,
+    style: style
+  }, restProps)), /*#__PURE__*/React.createElement(GpsModal, {
+    isOpen: globalState.webModalForPlaceAutoCompleteField === fieldKey,
+    setIsOpen: handleIsGPSModalOpen
+  }));
+};
+
+var placeAutoComplete = /*#__PURE__*/memo(PlaceAutoCompleteField);
+
 /**
  * Input Box
  */
@@ -20438,7 +20881,7 @@ var config$c = {
       fieldKey: 'renderType'
     }, {
       type: 'string',
-      title: 'Type',
+      title: 'Display Type',
       "default": 'none',
       ui: {
         type: 'radio',
@@ -24547,6 +24990,7 @@ TreeSelectField.displayName = 'TreeSelectField';
 
 var antdTheme = {
   text: text,
+  placeAutoComplete: placeAutoComplete,
   number: numberField,
   select: select,
   radio: radio,
@@ -24573,12 +25017,13 @@ var antdTheme = {
 }; // antd的打包改为输出less，需要使用者配置less-loader
 var config = {
   title: 'Form Component',
-  order: ['checkbox', 'colorPicker', 'datePicker', 'text', 'number', 'radio', 'select', 'slider', 'switch', 'timePicker', 'uploader', 'cascader', 'transfer', 'null', 'downloader', 'table'],
+  order: ['checkbox', 'colorPicker', 'datePicker', 'text', 'placeAutoComplete', 'number', 'radio', 'select', 'slider', 'switch', 'timePicker', 'uploader', 'cascader', 'transfer', 'null', 'downloader', 'table'],
   fields: {
     checkbox: config$6,
     colorPicker: config$7,
     datePicker: config$8,
     text: config$k,
+    placeAutoComplete: config$l,
     number: config$i,
     radio: config$j,
     select: config$d,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@innoways/drip-form-theme-antd",
-	"version": "6.3.0",
+	"version": "6.3.2",
 	"author": "JDFED",
 	"description": "drip-form antd主题包",
 	"main": "dist/index.js",
@@ -31,8 +31,8 @@
 	"dependencies": {
 		"@ant-design/icons": "^4.7.0",
 		"@babel/runtime": "^7.10.2",
-		"@innoways/hooks": "^6.3.0",
-		"@innoways/utils": "^6.3.0",
+		"@innoways/hooks": "^6.3.2",
+		"@innoways/utils": "^6.3.2",
 		"antd": "^4.16.13",
 		"flatpickr": "^4.6.13",
 		"moment": "^2.26.0",