@lemon-fe/components 0.0.8 → 0.0.9

package/es/FormHorizontal/index.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+interface Props {
+    children?: ReactNode;
+}
+declare function FormHorizontal(props: Props): JSX.Element;
+export default FormHorizontal;

package/es/FormHorizontal/index.js

@@ -0,0 +1,35 @@
+function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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; }
+
+import React, { useContext, useMemo } from 'react';
+import { FormContext } from 'antd/lib/form/context';
+import { PREFIX_CLS } from '../constants';
+
+function FormHorizontal(props) {
+  var prefixCls = PREFIX_CLS;
+  var context = useContext(FormContext);
+  var myCtxt = useMemo(function () {
+    return _objectSpread(_objectSpread({}, context), {}, {
+      labelAlign: 'right',
+      labelCol: {
+        flex: '0 0 160px'
+      },
+      wrapperCol: {
+        md: 12,
+        lg: 10,
+        xl: 8
+      },
+      colon: false
+    });
+  }, [context]);
+  return /*#__PURE__*/React.createElement(FormContext.Provider, {
+    value: myCtxt
+  }, /*#__PURE__*/React.createElement("div", _objectSpread({
+    className: "".concat(prefixCls, "-form-horzontal")
+  }, props)));
+}
+
+export default FormHorizontal;

package/es/FormHorizontal/index.less

@@ -0,0 +1,14 @@
+.@{prefixCls}-form-horzontal {
+  .ant-form-item:last-child {
+    margin-bottom: 0;
+  }
+
+  .ant-form-item-label > label.ant-form-item-no-colon::after {
+    margin: 0 16px 0 0;
+  }
+
+  .ant-form-item-required::before {
+    position: absolute;
+    left: -11px;
+  }
+}

package/es/FormInline/index.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import type { RowProps } from 'antd';
+interface Props extends RowProps {
+    children?: ReactNode;
+    prefixCls?: string;
+}
+declare function FormInline(props: Props): JSX.Element;
+declare namespace FormInline {
+    var Col: typeof FormCol;
+}
+declare function FormCol(props: {
+    colSpan?: number;
+    children?: ReactNode;
+}): JSX.Element;
+export default FormInline;

package/es/FormInline/index.js

@@ -0,0 +1,90 @@
+var _excluded = ["prefixCls", "className"],
+    _excluded2 = ["colSpan"];
+
+function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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 _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; }
+
+import React, { useContext, useMemo } from 'react';
+import { Row, Col } from 'antd';
+import { FormContext } from 'antd/lib/form/context';
+import { PREFIX_CLS } from '../constants';
+
+function FormInline(props) {
+  var _props$prefixCls = props.prefixCls,
+      prefixCls = _props$prefixCls === void 0 ? PREFIX_CLS : _props$prefixCls,
+      className = props.className,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var context = useContext(FormContext);
+  var myCtxt = useMemo(function () {
+    return _objectSpread(_objectSpread({}, context), {}, {
+      labelAlign: 'right',
+      labelCol: {
+        flex: '0 0 60px'
+      },
+      colon: false
+    });
+  }, [context]);
+  return /*#__PURE__*/React.createElement(FormContext.Provider, {
+    value: myCtxt
+  }, /*#__PURE__*/React.createElement(Row, _objectSpread({
+    gutter: [40, 10],
+    className: "".concat(prefixCls, "-form-inline")
+  }, restProps)));
+}
+
+function FormCol(props) {
+  var colSpan = props.colSpan,
+      restProps = _objectWithoutProperties(props, _excluded2);
+
+  var getColSpan = function getColSpan() {
+    var col = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+
+    switch (col) {
+      case 4:
+        return {
+          span: 24
+        };
+
+      case 3:
+        return {
+          xl: 18,
+          lg: 24,
+          md: 24,
+          sm: 24,
+          xs: 24
+        };
+
+      case 2:
+        return {
+          xl: 12,
+          lg: 24,
+          md: 24,
+          sm: 24,
+          xs: 24
+        };
+
+      case 1:
+      default:
+        return {
+          xl: 6,
+          lg: 12,
+          md: 12,
+          sm: 24,
+          xs: 24
+        };
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(Col, _objectSpread(_objectSpread({}, getColSpan(colSpan)), restProps));
+}
+
+FormInline.Col = FormCol;
+export default FormInline;

package/es/FormInline/index.less

@@ -0,0 +1,26 @@
+.@{prefixCls}-form-inline {
+  max-width: 1337px;
+
+  .ant-form-item {
+    margin-bottom: 0;
+
+    & > .ant-form-item-label > label {
+      line-height: 14px;
+      white-space: normal;
+      vertical-align: top;
+    }
+
+    & > .ant-form-item-control {
+      flex-basis: 0;
+    }
+  }
+
+  .ant-form-item-no-colon {
+    font-size: 12px;
+  }
+
+  .ant-form-item-required::before {
+    position: absolute;
+    left: -11px;
+  }
+}

package/es/FormTable/index.d.ts

@@ -0,0 +1,6 @@
+import React, { RefObject } from 'react';
+import { FormTableRef, FormTableProps } from './typings';
+declare const _default: <RecordType>(props: FormTableProps<RecordType> & {
+    ref?: React.RefObject<FormTableRef<RecordType>> | undefined;
+}) => JSX.Element;
+export default _default;

package/es/FormTable/index.js

@@ -0,0 +1,159 @@
+var _excluded = ["form", "columns", "name", "rowKey", "rules"];
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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; }
+
+function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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 _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; }
+
+import React, { cloneElement, createElement, forwardRef, isValidElement, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { Form, Input, InputNumber, Checkbox, Select } from 'antd';
+import { flatten, get } from 'lodash';
+import Table from '../BaseTable';
+import { PREFIX_CLS } from '../constants';
+var components = new Map([['input', Input], ['select', Select], ['input-number', InputNumber], ['checkbox', Checkbox]]);
+
+function FormTable(props, ref) {
+  var form = props.form,
+      columnsProp = props.columns,
+      name = props.name,
+      rowKey = props.rowKey,
+      rules = props.rules,
+      extraPorps = _objectWithoutProperties(props, _excluded);
+
+  var formatColumns = function formatColumns(cols) {
+    return cols.map(function (col) {
+      var mCol = _objectSpread({}, col);
+
+      var path = col.dataIndex || col.key;
+
+      mCol.render = function (_, field, index) {
+        var record = form.getFieldValue(flatten([name, field.name]));
+        var namePath = [field.name];
+        var val;
+
+        if (path) {
+          namePath.push(path);
+          val = get(record, path);
+        }
+
+        if (col.editable) {
+          var _col$editable = col.editable,
+              formItemProps = _col$editable.formItemProps,
+              formItemType = _col$editable.formItemType,
+              render = _col$editable.render,
+              extraProps = _col$editable.extraProps;
+          var child = null;
+
+          if (render) {
+            child = render(val, record, index);
+          } else if (typeof formItemType === 'string') {
+            var comp = components.get(formItemType);
+            child = comp ? /*#__PURE__*/createElement(comp, extraProps) : null;
+          } else if (typeof formItemType === 'function') {
+            child = formItemType;
+          } else if ( /*#__PURE__*/isValidElement(formItemType)) {
+            child = /*#__PURE__*/cloneElement(formItemType, extraProps);
+          }
+
+          return /*#__PURE__*/React.createElement(Form.Item, _objectSpread({
+            name: flatten(namePath)
+          }, formItemProps), child);
+        }
+
+        if (col.render) {
+          return col.render(val, record, index, field, {
+            remove: storedFields.current.remove
+          });
+        }
+
+        return val;
+      };
+
+      return mCol;
+    });
+  };
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      columns = _useState2[0],
+      setColumns = _useState2[1];
+
+  var storedFields = useRef({
+    fields: null,
+    value: null,
+    remove: function remove(name) {
+      console.error("error remove ".concat(name));
+    }
+  });
+  useImperativeHandle(ref, function () {
+    return {
+      add: function add() {
+        var prev = form.getFieldValue(name);
+
+        for (var _len = arguments.length, records = new Array(_len), _key = 0; _key < _len; _key++) {
+          records[_key] = arguments[_key];
+        }
+
+        form.setFields([{
+          name: name,
+          value: [].concat(_toConsumableArray(prev), records)
+        }]);
+      },
+      remove: function remove(name) {
+        storedFields.current.remove(name);
+      }
+    };
+  });
+  useEffect(function () {
+    setColumns(formatColumns(columnsProp));
+  }, [columnsProp]);
+  return /*#__PURE__*/React.createElement(Form.List, {
+    name: name,
+    rules: rules
+  }, function (fields, _ref) {
+    var remove = _ref.remove;
+    var value = form.getFieldValue(name);
+    storedFields.current.remove = remove;
+
+    if (storedFields.current.value !== value) {
+      storedFields.current.value = value;
+      storedFields.current.fields = fields;
+    }
+
+    return /*#__PURE__*/React.createElement(Table, _objectSpread(_objectSpread({
+      pagination: false
+    }, extraPorps), {}, {
+      rowKey: "key",
+      className: "".concat(PREFIX_CLS, "-form-table"),
+      dataSource: storedFields.current.fields || [],
+      columns: columns
+    }));
+  });
+}
+
+export default /*#__PURE__*/forwardRef(FormTable);

package/es/FormTable/index.less

@@ -0,0 +1,11 @@
+.@{prefixCls}-form-table {
+  td {
+    .ant-form-item {
+      margin-bottom: 0;
+    }
+
+    .ant-form-item-explain {
+      display: none;
+    }
+  }
+}

package/es/FormTable/typings.d.ts

@@ -0,0 +1,38 @@
+import { ReactElement } from 'react';
+import { FormInstance, FormItemProps } from 'antd';
+import { FormListFieldData, FormListOperation, FormListProps } from 'antd/lib/form/FormList';
+import { RenderedCell } from 'rc-table/lib/interface';
+import { BaseTableProps, ColumnType } from '../BaseTable/typings';
+
+export interface FormTableColumnType<T> extends Omit<ColumnType<T>, 'render'> {
+  editable?: {
+    formItemType?: string | FormItemProps<T>['children'];
+    formItemProps?: FormItemProps<T>;
+    extraProps?: any;
+    render?: (value: any, record: T, index: number) => ReactElement | null;
+  };
+  render?: (
+    value: any,
+    record: T,
+    index: number,
+    field: FormListFieldData,
+    operation: Pick<FormListOperation, 'remove'>,
+  ) => React.ReactNode | RenderedCell<T>;
+}
+
+export interface FormTableRef<RecordType = unknown> {
+  add: (...records: RecordType[]) => void;
+  remove: (fieldKey: number | number[]) => void;
+}
+
+export interface FormTableProps<RecordType>
+  extends Omit<
+    BaseTableProps<FormListFieldData>,
+    'columns' | 'rowKey' | 'render' | 'fetch' | 'dataSource'
+  > {
+  form: FormInstance;
+  name: FormListProps['name'];
+  rules?: FormListProps['rules'];
+  columns: FormTableColumnType<RecordType>[];
+  rowKey: string;
+}

package/es/index.d.ts

@@ -19,4 +19,7 @@ export { default as Icons } from './Icons';
 export { default as FormLayout } from './FormLayout';
 export { default as MainFramework } from './MainFramework';
 export { default as init } from './init';
+export { default as FormHorizontal } from './FormHorizontal';
+export { default as FormInline } from './FormInline';
+export { default as FormTable } from './FormTable';
 export * from './constants';

package/es/index.js

@@ -15,4 +15,7 @@ export { default as Icons } from './Icons';
 export { default as FormLayout } from './FormLayout';
 export { default as MainFramework } from './MainFramework';
 export { default as init } from './init';
+export { default as FormHorizontal } from './FormHorizontal';
+export { default as FormInline } from './FormInline';
+export { default as FormTable } from './FormTable';
 export * from './constants';

package/es/index.less

@@ -15,6 +15,9 @@
 @import './EditableTable/index.less';
 @import './PageLoading/index.less';
 @import './MainFramework/index.less';
+@import './FormHorizontal/index.less';
+@import './FormInline//index.less';
+@import './FormTable/index.less';
 
 @blue-base: #2357df;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/components",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "> TODO: description",
   "author": "鲁盛杰 <lusj@cnlemon.net>",
   "homepage": "",
@@ -16,7 +16,7 @@
     "registry": "https://registry.npmjs.org"
   },
   "dependencies": {
-    "@lemon-fe/hooks": "^0.0.8",
+    "@lemon-fe/hooks": "^0.0.9",
     "antd": "^4.17.0",
     "classnames": "^2.2.6",
     "lodash": "^4.17.21",
@@ -39,5 +39,5 @@
     "@types/lodash": "^4.14.179",
     "@types/react-resizable": "^1.7.4"
   },
-  "gitHead": "cd8c8e854c16f5605657b3b92fb2deecd1a116e8"
+  "gitHead": "ef85c77ac935ece72378356f0cfa316d8d675cea"
 }