iglooform 2.3.3 → 2.3.7

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { FormInstance } from 'antd/es/form';
+import { FormItemName } from '@/types';
+declare const _default: React.Context<{
+    form?: FormInstance<any> | undefined;
+    onCancel?(): void;
+    cancelText?: string | undefined;
+    submitText?: string | undefined;
+    previewText?: string | undefined;
+    nextText?: string | undefined;
+    continueText?: string | undefined;
+    validateMessages?: Object | undefined;
+    submitting?: boolean | undefined;
+    requiredMark?: boolean | undefined;
+    showSubmitButton?: boolean | undefined;
+    getScrollContainer: () => HTMLElement | Window | null;
+    registerDependencies: (name: FormItemName | FormItemName[], updater: Function) => void;
+}>;
+export default _default;

package/lib/free-form/context.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = /*#__PURE__*/_react.default.createContext({
+  getScrollContainer: function getScrollContainer() {
+    return window;
+  },
+  registerDependencies: function registerDependencies() {}
+});
+
+exports.default = _default;

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

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

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

@@ -0,0 +1,288 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/row/style");
+
+var _row = _interopRequireDefault(require("antd/es/row"));
+
+require("antd/es/form/style");
+
+var _form = _interopRequireDefault(require("antd/es/form"));
+
+require("antd/es/col/style");
+
+var _col = _interopRequireDefault(require("antd/es/col"));
+
+require("antd/es/grid/style");
+
+var _grid = _interopRequireDefault(require("antd/es/grid"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _react = require("react");
+
+var _icons = require("@ant-design/icons");
+
+var _utils = require("../utils");
+
+var _context = _interopRequireDefault(require("../context"));
+
+var _omit = _interopRequireDefault(require("omit.js"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+require("./style/index.less");
+
+var _excluded = ["halfRow"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var useBreakpoint = _grid.default.useBreakpoint;
+
+var Element = function Element(props) {
+  var parentName = props.parentName,
+      label = props.label,
+      preview = props.preview,
+      disabled = props.disabled,
+      children = props.children;
+
+  var _useContext = (0, _react.useContext)(_context.default),
+      form = _useContext.form,
+      requiredMark = _useContext.requiredMark,
+      registerDependencies = _useContext.registerDependencies;
+
+  var _useReducer = (0, _react.useReducer)(function (r) {
+    return r + 1;
+  }, 0),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      _ = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
+  (0, _react.useEffect)(function () {
+    var dependencies = props.dependencies,
+        asserts = props.asserts,
+        copyValue = props.copyValue,
+        selectValue = props.selectValue,
+        shouldRender = props.shouldRender;
+    var dependentField = dependencies || [];
+
+    if (asserts && asserts.length) {
+      asserts.forEach(function (_ref) {
+        var field = _ref.field;
+        return dependentField.push(field);
+      });
+    }
+
+    if (copyValue) {
+      dependentField.push(copyValue.assert.field);
+    }
+
+    if (selectValue && selectValue.length) {
+      selectValue.forEach(function (_ref2) {
+        var assert = _ref2.assert;
+        return dependentField.push(assert.field);
+      });
+    }
+
+    if (shouldRender) {
+      dependentField.push('SUBSCRIBE_ALL');
+    }
+
+    registerDependencies(dependentField, dispatch);
+  }, []);
+  var extraConfig = (0, _react.useMemo)(function () {
+    var _children$type, _children$type2;
+
+    if (! /*#__PURE__*/(0, _react.isValidElement)(children)) return {}; //@ts-ignore
+
+    return (children === null || children === void 0 ? void 0 : (_children$type = children.type) === null || _children$type === void 0 ? void 0 : _children$type.formItemPropsHandler) ? //@ts-ignore
+    children === null || children === void 0 ? void 0 : (_children$type2 = children.type) === null || _children$type2 === void 0 ? void 0 : _children$type2.formItemPropsHandler(props) : {};
+  }, [children]);
+
+  var _calcFormItemProps = (0, _utils.calcFormItemProps)(props, _objectSpread(_objectSpread({}, extraConfig), {}, {
+    requiredMark: requiredMark
+  }), form, parentName),
+      colProps = _calcFormItemProps.colProps,
+      formItemProps = _calcFormItemProps.formItemProps,
+      display = _calcFormItemProps.display,
+      previewFormater = _calcFormItemProps.previewFormater,
+      elementProps = _calcFormItemProps.elementProps;
+
+  (0, _react.useEffect)(function () {
+    if (!formItemProps.name || preview || !formItemProps.copiedValue.copied) return;
+    form && form.setFields([{
+      name: formItemProps.name,
+      value: formItemProps.copiedValue.value,
+      errors: []
+    }]);
+  }, [formItemProps.copiedValue.value]);
+  (0, _react.useEffect)(function () {
+    if (!formItemProps.name || preview || !formItemProps.selectedValue.selected) return;
+    form && form.setFields([{
+      name: formItemProps.name,
+      value: formItemProps.selectedValue.value,
+      errors: []
+    }]);
+  }, [formItemProps.selectedValue.value]);
+
+  var _useBreakpoint = useBreakpoint(),
+      md = _useBreakpoint.md;
+
+  var ref = (0, _react.useRef)(null);
+
+  var halfRow = colProps.halfRow,
+      restColProps = _objectWithoutProperties(colProps, _excluded);
+
+  var value = form === null || form === void 0 ? void 0 : form.getFieldValue(formItemProps.name);
+  var error = form === null || form === void 0 ? void 0 : form.getFieldError(formItemProps.name);
+  (0, _react.useEffect)(function () {
+    var value = form === null || form === void 0 ? void 0 : form.getFieldValue(formItemProps.name);
+    if (value || !formItemProps.initialValue) return;
+    form === null || form === void 0 ? void 0 : form.setFields([{
+      name: formItemProps.name,
+      value: formItemProps.initialValue
+    }]);
+  }, [formItemProps.initialValue]);
+
+  var setFieldError = function setFieldError(errorMsg) {
+    form === null || form === void 0 ? void 0 : form.setFields([{
+      name: formItemProps.name,
+      errors: errorMsg ? [errorMsg] : []
+    }]);
+  };
+
+  var setFieldValue = function setFieldValue(value) {
+    form === null || form === void 0 ? void 0 : form.setFields([{
+      name: formItemProps.name,
+      value: value
+    }]);
+  };
+
+  var validateField = function validateField() {
+    form === null || form === void 0 ? void 0 : form.validateFields([formItemProps.name]);
+  };
+
+  var getFormInstance = function getFormInstance() {
+    return form;
+  };
+
+  var transformChildren = function transformChildren() {
+    if (! /*#__PURE__*/(0, _react.isValidElement)(children)) return children;
+    return /*#__PURE__*/(0, _react.cloneElement)(children, _objectSpread(_objectSpread({}, children.props), {}, {
+      disabled: elementProps.disabled || disabled,
+      containerRef: ref,
+      setFieldError: setFieldError,
+      setFieldValue: setFieldValue,
+      getFormInstance: getFormInstance,
+      validateField: validateField
+    }));
+  };
+
+  if (!display) return null;
+
+  if (preview) {
+    if (!value) {
+      return null;
+    }
+
+    return (0, _jsxRuntime.jsx)(_col.default, Object.assign({
+      span: 24,
+      className: (0, _classnames.default)('igloo-element-preview', {
+        'igloo-element-preview-hide': props.hideWhenPreview,
+        'igloo-element-preview-hide-divider': props.hidePreviewDivider
+      })
+    }, {
+      children: (0, _jsxRuntime.jsx)(_form.default.Item, Object.assign({}, (0, _omit.default)(formItemProps, ['copiedValue', 'selectedValue']), {
+        labelCol: {
+          span: 24
+        },
+        wrapperCol: {
+          span: 24
+        },
+        label: null
+      }, {
+        children: (0, _jsxRuntime.jsxs)(_row.default, Object.assign({
+          className: "igloo-element-preview-item",
+          gutter: {
+            md: 32,
+            sm: 0,
+            xs: 0
+          }
+        }, {
+          children: [label && (0, _jsxRuntime.jsx)(_col.default, Object.assign({
+            span: 12,
+            md: 12,
+            sm: 24,
+            xs: 24,
+            className: "igloo-element-preview-label"
+          }, {
+            children: label
+          }), void 0), (0, _jsxRuntime.jsxs)(_col.default, Object.assign({
+            span: label ? 12 : 24,
+            md: label ? 12 : 24,
+            sm: 24,
+            xs: 24,
+            className: "igloo-element-preview-value"
+          }, {
+            children: [error && !!error.length && (0, _jsxRuntime.jsx)(_icons.CloseCircleFilled, {
+              className: "igloo-element-preview-value-icon"
+            }, void 0), previewFormater ? previewFormater(value) : value]
+          }), void 0)]
+        }), void 0)
+      }), void 0)
+    }), void 0);
+  }
+
+  return props.hideWhenEdit ? null : (0, _jsxRuntime.jsx)(_col.default, Object.assign({}, restColProps, {
+    className: "igloo-form-item"
+  }, {
+    children: (0, _jsxRuntime.jsx)("div", Object.assign({
+      ref: ref,
+      style: {
+        width: halfRow && md ? '50%' : '100%',
+        paddingRight: halfRow && md ? 16 : 0
+      }
+    }, {
+      children: (0, _jsxRuntime.jsx)(_form.default.Item, Object.assign({
+        labelCol: {
+          span: 24
+        },
+        wrapperCol: {
+          span: 24
+        }
+      }, (0, _omit.default)(formItemProps, ['copiedValue', 'selectedValue']), {
+        children: transformChildren()
+      }), void 0)
+    }), void 0)
+  }), void 0);
+};
+
+Element.displayName = 'Igloo_Free_Form_Item';
+var _default = Element;
+exports.default = _default;

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

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

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

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./index.less");

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

@@ -0,0 +1,116 @@
+.igloo-element-preview {
+  margin: 0 !important;
+
+  .ant-form-item-control-input {
+    min-height: unset;
+  }
+
+  &:not(:last-child) {
+    & > div {
+      padding-bottom: 16px;
+      border-bottom: 1px solid #eeeeee;
+    }
+  }
+
+  &:last-child > div {
+    padding-bottom: 0;
+  }
+
+  .igloo-element-preview-item {
+    .igloo-element-preview-label {
+      color: #666666;
+      line-height: 24px;
+    }
+
+    .igloo-element-preview-value {
+      color: #212121;
+      white-space: pre-wrap;
+      word-break: break-word;
+      line-height: 24px;
+    }
+  }
+
+  .ant-form-item-explain-error {
+    margin-top: 0;
+    margin-left: 50%;
+  }
+
+  .ant-form-item-extra,
+  .ant-form-item-explain {
+    display: none;
+  }
+
+  .ant-form-item-explain-error {
+    display: block;
+  }
+}
+
+.igloo-element-preview-hide {
+  border-bottom: none !important;
+  display: none;
+}
+
+.igloo-element-preview-hide-divider {
+  & > div {
+    border-bottom: none !important;
+    padding-bottom: 8px;
+  }
+
+  &:last-child {
+    padding-bottom: 0;
+  }
+}
+
+.ant-form-item-control-input {
+  min-height: unset;
+}
+
+.igloo-form-label {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+
+  .igloo-form-label-text {
+    color: #666666;
+    font-size: 16px;
+    line-height: 24px;
+
+    .igloo-form-label-required {
+      margin-left: 8px;
+    }
+    .igloo-form-label-optional {
+      margin-left: 5px;
+      font-size: 16px;
+      font-style: italic;
+      color: #999999;
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .igloo-element-preview {
+    .igloo-element-preview-value {
+      margin-top: 8px;
+
+      .igloo-element-preview-value-icon {
+        color: @error-color;
+        margin-right: 8px;
+      }
+    }
+
+    .ant-form-item-explain-error {
+      margin-left: 0 !important;
+    }
+  }
+}
+
+.ant-form-item-label > label {
+  height: auto;
+}
+
+.igloo-form-item,
+.igloo-element-preview {
+  .ant-form-item {
+    margin-bottom: 0;
+  }
+}