@zat-design/sisyphus-react 3.0.16-beta.2 → 3.1.4

package/es/ProForm/components/base/ProCascader/index.d.ts

@@ -0,0 +1,14 @@
+import { Service, Options } from 'ahooks/lib/useRequest/src/types';
+import { CascaderProps } from 'antd';
+interface RequestProps<T, P extends any[]> {
+    service: Service<T, P>;
+    options?: Options<T, P>;
+}
+export type Props<T, RT extends T[], RP> = CascaderProps<T> & {
+    useRequest?: RequestProps<RT, [RP]>;
+    otherProps?: any;
+    isView?: boolean;
+    dataSource?: T[];
+};
+declare const ProCascader: <T, RT extends T[], RP>(props: Props<T, RT, RP>) => JSX.Element;
+export default ProCascader;

package/es/ProForm/components/base/ProCascader/index.js

@@ -0,0 +1,72 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import "antd/es/cascader/style";
+import _Cascader from "antd/es/cascader";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+var _excluded = ["useRequest", "isView", "otherProps", "dataSource", "options"];
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRequest } from 'ahooks';
+import Container from '../../Container';
+var defaultFieldNames = {
+  value: 'value',
+  label: 'label',
+  children: 'children'
+};
+/**
+ * 获取值对应的选项对象
+ */
+var findTreeTarget = function findTreeTarget(dataSource, value, fieldNames) {
+  var level = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  var stack = _toConsumableArray(dataSource);
+  if ((dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) && (value === null || value === void 0 ? void 0 : value.length)) {
+    var valueName = fieldNames.value,
+      label = fieldNames.label,
+      children = fieldNames.children;
+    return value === null || value === void 0 ? void 0 : value.map(function (valueItem) {
+      var index = 0;
+      while (stack.length) {
+        var target = stack.shift();
+        if (target[valueName] === valueItem) {
+          stack = target[children] ? _toConsumableArray(target[children]) : [];
+          return target;
+        }
+        index += 1;
+      }
+      return _defineProperty({}, valueName, valueItem);
+    });
+  }
+  return [];
+};
+var ProCascader = function ProCascader(props) {
+  var _restProps$fieldNames;
+  var requestProps = props.useRequest,
+    isView = props.isView,
+    otherProps = props.otherProps,
+    dataSource = props.dataSource,
+    options = props.options,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var _ref2 = otherProps || {},
+    formIsView = _ref2.isView;
+  var _useRequest = useRequest(requestProps === null || requestProps === void 0 ? void 0 : requestProps.service, requestProps === null || requestProps === void 0 ? void 0 : requestProps.options),
+    data = _useRequest.data;
+  var _isView = isView || formIsView;
+  var _dataSource = data || dataSource || options;
+  var _fieldNames = (_restProps$fieldNames = restProps.fieldNames) !== null && _restProps$fieldNames !== void 0 ? _restProps$fieldNames : defaultFieldNames;
+  if (_isView) {
+    var valueTarget = findTreeTarget(_dataSource, restProps.value, _fieldNames);
+    var valueName = _fieldNames.value,
+      label = _fieldNames.label;
+    var nameList = valueTarget.map(function (item) {
+      var _item$label;
+      return (_item$label = item[label]) !== null && _item$label !== void 0 ? _item$label : item[valueName];
+    });
+    return _jsx(Container, {
+      children: nameList.join('/')
+    });
+  }
+  return _jsx(_Cascader, _objectSpread(_objectSpread({}, restProps), {}, {
+    options: _dataSource
+  }));
+};
+export default ProCascader;

package/es/ProForm/components/base/Radio/index.js

@@ -3,7 +3,7 @@ import "antd/es/radio/style";
 import _Radio from "antd/es/radio";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["dataSource", "fieldNames", "onChange", "value", "otherProps"];
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useProConfig } from '../../../../ProConfigProvider';
 import Container from '../../Container';
 var Radio = function Radio(props) {
@@ -31,9 +31,10 @@ var Radio = function Radio(props) {
       });
       return labelList.join('，');
     };
-    return /*#__PURE__*/React.createElement(Container, {
-      viewEmpty: viewEmpty
-    }, value ? transToLabel([value]) : '');
+    return _jsx(Container, {
+      viewEmpty: viewEmpty,
+      children: value ? transToLabel([value]) : ''
+    });
   }
   // 假如dataSource包含code,name, fieldNames没有配置，_fieldNames默认为code, name
   if (Array.isArray(dataSource) && !fieldNames) {
@@ -48,16 +49,17 @@ var Radio = function Radio(props) {
       };
     }
   }
-  return /*#__PURE__*/React.createElement(_Radio.Group, _objectSpread(_objectSpread({}, rest), {}, {
+  return _jsx(_Radio.Group, _objectSpread(_objectSpread({}, rest), {}, {
     value: value,
     onChange: function onChange(e) {
       _onChange(e, e.target.value);
-    }
-  }), !!dataSource.length && dataSource.map(function (radioItem) {
-    return /*#__PURE__*/React.createElement(_Radio, {
-      key: radioItem[_fieldNames.value],
-      value: radioItem[_fieldNames.value]
-    }, radioItem[_fieldNames.label]);
+    },
+    children: !!dataSource.length && dataSource.map(function (radioItem) {
+      return _jsx(_Radio, {
+        value: radioItem[_fieldNames.value],
+        children: radioItem[_fieldNames.label]
+      }, radioItem[_fieldNames.value]);
+    })
   }));
 };
 export default Radio;

package/es/ProForm/components/base/RangePicker/index.d.ts

@@ -1,9 +1,10 @@
-import { RangePickerProps } from 'antd/lib/date-picker';
+import type { RangePickerProps } from 'antd/es/date-picker';
 import React from 'react';
 import { ProFormOtherProps } from '../../../propsType';
 export type Props = {
     otherProps?: ProFormOtherProps;
-    showTime?: string;
-} & RangePickerProps;
+    separator?: any;
+    showTime?: any;
+} & Omit<RangePickerProps, 'separator'>;
 declare const RangePicker: React.FC<Props>;
 export default RangePicker;

package/es/ProForm/components/base/RangePicker/index.js

@@ -1,11 +1,13 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import "antd/es/date-picker/style";
-import _DatePicker from "antd/es/date-picker"; // @ts-check
-var _excluded = ["format", "otherProps"];
-import { isFunction, isString } from 'lodash';
+import _DatePicker from "antd/es/date-picker";
+var _excluded = ["format", "otherProps", "separator"];
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-check
+
+import { isFunction, isString, omit } from 'lodash';
 import moment from 'moment';
-import React from 'react';
 import { useProConfig } from '../../../../ProConfigProvider';
 import Container from '../../Container';
 var AntRangePicker = _DatePicker.RangePicker;
@@ -13,6 +15,8 @@ var RangePicker = function RangePicker(props) {
   var _props$format = props.format,
     format = _props$format === void 0 ? 'YYYY-MM-DD' : _props$format,
     otherProps = props.otherProps,
+    _props$separator = props.separator,
+    separator = _props$separator === void 0 ? '~' : _props$separator,
     rest = _objectWithoutProperties(props, _excluded);
   var _ref = otherProps || {},
     isView = _ref.isView,
@@ -32,15 +36,16 @@ var RangePicker = function RangePicker(props) {
         }
         return value[index].format(formatItem);
       });
-      viewChildren = formattedList.join('~');
+      viewChildren = formattedList.join(separator);
     } else if (isFunction(format)) {
-      viewChildren = "".concat(format(value[0]), " ~ ").concat(format(value[1]));
+      viewChildren = "".concat(format(value[0]), " ").concat(separator, " ").concat(format(value[1]));
     } else {
-      viewChildren = "".concat(value[0].format(format), " ~ ").concat(value[1].format(format));
+      viewChildren = "".concat(value[0].format(format), " ").concat(separator, " ").concat(value[1].format(format));
     }
-    return /*#__PURE__*/React.createElement(Container, {
-      viewEmpty: viewEmpty
-    }, viewChildren);
+    return _jsx(Container, {
+      viewEmpty: viewEmpty,
+      children: viewChildren
+    });
   }
   var _res = _objectSpread(_objectSpread({}, rest), {}, {
     showTime: !rest.showTime && valueType === 'dateTime' || rest.showTime
@@ -52,6 +57,6 @@ var RangePicker = function RangePicker(props) {
   if (Array.isArray(_res.value) && isString(_res.value[0]) && isString(_res.value[1])) {
     _res.value = [moment(_res.value[0]), moment(_res.value[1])];
   }
-  return /*#__PURE__*/React.createElement(AntRangePicker, _objectSpread(_objectSpread({}, initialConfig), _res));
+  return _jsx(AntRangePicker, _objectSpread(_objectSpread({}, initialConfig), omit(_res, ['separator'])));
 };
 export default RangePicker;

package/es/ProForm/components/base/Select/index.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 import { ProFormOtherProps } from '../../../propsType';
 export interface Props extends SelectProps {
     dataSource?: any[];
+    scrollFollowParent?: boolean;
     otherProps?: ProFormOtherProps;
 }
 declare const Select: React.FC<Props>;

package/es/ProForm/components/base/Select/index.js

@@ -2,15 +2,17 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import "antd/es/select/style";
 import _Select from "antd/es/select";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["dataSource", "fieldNames", "otherProps"];
-import { useProConfig } from 'zat-design-pro-component';
-import React from 'react';
+var _excluded = ["dataSource", "fieldNames", "otherProps", "scrollFollowParent"];
+import { jsx as _jsx } from "react/jsx-runtime";
 import Container from '../../Container';
+import { useProConfig } from '../../../../ProConfigProvider';
 var Select = function Select(props) {
   var _props$dataSource = props.dataSource,
     dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
     fieldNames = props.fieldNames,
     otherProps = props.otherProps,
+    _props$scrollFollowPa = props.scrollFollowParent,
+    scrollFollowParent = _props$scrollFollowPa === void 0 ? true : _props$scrollFollowPa,
     rest = _objectWithoutProperties(props, _excluded);
   var _ref = otherProps || {},
     isView = _ref.isView,
@@ -32,14 +34,16 @@ var Select = function Select(props) {
       return labelList.join('，');
     };
     if (Array.isArray(value)) {
-      return /*#__PURE__*/React.createElement(Container, {
+      return _jsx(Container, {
         tooltip: true,
-        viewEmpty: viewEmpty
-      }, transToLabel(value));
+        viewEmpty: viewEmpty,
+        children: transToLabel(value)
+      });
     }
-    return /*#__PURE__*/React.createElement(Container, {
-      viewEmpty: viewEmpty
-    }, value ? transToLabel([value]) : null);
+    return _jsx(Container, {
+      viewEmpty: viewEmpty,
+      children: value ? transToLabel([value]) : null
+    });
   }
   // 假如dataSource包含code,name, fieldNames没有配置，_fieldNames默认为code, name
   if (Array.isArray(dataSource) && !fieldNames) {
@@ -54,9 +58,12 @@ var Select = function Select(props) {
       };
     }
   }
-  return /*#__PURE__*/React.createElement(_Select, _objectSpread(_objectSpread(_objectSpread({
+  return _jsx(_Select, _objectSpread(_objectSpread(_objectSpread({
     placeholder: "\u8BF7\u9009\u62E9",
-    allowClear: true
+    allowClear: true,
+    getPopupContainer: function getPopupContainer(trigger) {
+      return scrollFollowParent ? trigger.parentElement : document.body;
+    }
   }, initialConfig), {}, {
     options: dataSource
   }, rest), {}, {

package/es/ProForm/components/base/Switch/index.js

@@ -3,9 +3,9 @@ import "antd/es/switch/style";
 import _Switch from "antd/es/switch";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["disabled", "otherProps"];
-import React from 'react';
-import { useProConfig } from 'zat-design-pro-component';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { isNull, isUndefined } from 'lodash';
+import { useProConfig } from '../../../../ProConfigProvider';
 import Container from '../../Container';
 var Switch = function Switch(props) {
   var disabled = props.disabled,
@@ -18,13 +18,16 @@ var Switch = function Switch(props) {
   var config = useProConfig('Switch');
   if (isView) {
     if (isUndefined(res === null || res === void 0 ? void 0 : res.checked) || isNull(res === null || res === void 0 ? void 0 : res.checked) || valueType === 'switch' && isUndefined(res.value)) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, viewEmpty);
+      return _jsx(_Fragment, {
+        children: viewEmpty
+      });
     }
-    return /*#__PURE__*/React.createElement(Container, {
-      viewEmpty: viewEmpty
-    }, res.checked === true ? '是' : '否');
+    return _jsx(Container, {
+      viewEmpty: viewEmpty,
+      children: res.checked === true ? '是' : '否'
+    });
   }
-  return /*#__PURE__*/React.createElement(_Switch, _objectSpread(_objectSpread({
+  return _jsx(_Switch, _objectSpread(_objectSpread({
     disabled: disabled,
     checkedChildren: "\u662F",
     unCheckedChildren: "\u5426"

package/es/ProForm/components/base/SwitchCheckbox/index.js

@@ -3,7 +3,7 @@ import "antd/es/checkbox/style";
 import _Checkbox from "antd/es/checkbox";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["onChange", "disabled", "value", "otherProps"];
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isNull, isUndefined } from 'lodash';
 import { useProConfig } from '../../../../ProConfigProvider';
 var SwitchCheckbox = function SwitchCheckbox(props) {
@@ -22,25 +22,33 @@ var SwitchCheckbox = function SwitchCheckbox(props) {
   };
   if (isView) {
     if (isUndefined(restProps.checked) || isNull(restProps.checked) || valueType === 'switch' && isUndefined(value)) {
-      return /*#__PURE__*/React.createElement("span", {
-        className: "switch-checkbox-view"
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "switch-checkbox-view-label"
-      }, restProps.label), /*#__PURE__*/React.createElement("span", {
-        className: "switch-checkbox-view-value"
-      }, viewEmpty));
+      return _jsxs("span", {
+        className: "switch-checkbox-view",
+        children: [_jsx("span", {
+          className: "switch-checkbox-view-label",
+          children: restProps.label
+        }), _jsx("span", {
+          className: "switch-checkbox-view-value",
+          children: viewEmpty
+        })]
+      });
     }
-    return /*#__PURE__*/React.createElement("span", {
-      className: "switch-checkbox-view"
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "switch-checkbox-view-label"
-    }, restProps.label), /*#__PURE__*/React.createElement("span", {
-      className: "switch-checkbox-view-value"
-    }, restProps.checked === true ? '是' : '否'));
+    return _jsxs("span", {
+      className: "switch-checkbox-view",
+      children: [_jsx("span", {
+        className: "switch-checkbox-view-label",
+        children: restProps.label
+      }), _jsx("span", {
+        className: "switch-checkbox-view-value",
+        children: restProps.checked === true ? '是' : '否'
+      })]
+    });
   }
-  return /*#__PURE__*/React.createElement(_Checkbox, _objectSpread(_objectSpread({
+  return _jsx(_Checkbox, _objectSpread(_objectSpread(_objectSpread({
     disabled: disabled,
     onChange: changeVal
-  }, initialConfig), restProps), restProps.label);
+  }, initialConfig), restProps), {}, {
+    children: restProps.label
+  }));
 };
 export default SwitchCheckbox;

package/es/ProForm/components/base/SwitchCheckbox/style/index.less

@@ -3,11 +3,10 @@
   align-items: center;
 
   .switch-checkbox-view-label {
-    width      : var(--zaui-form-label-width, 130px);
-    max-width  : var(--zaui-form-label-width, 130px);
+    flex         : 0 0 @zaui-form-label-width;
     overflow   : initial;
     line-height: 1;
     white-space: pre-wrap;
     color      : var(--zaui-aide-text, #939599);
   }
-}
+}

package/es/ProForm/components/base/TextArea/index.d.ts

@@ -1,6 +1,7 @@
-import { TextAreaProps } from 'antd/lib/input';
+import { TextAreaProps } from 'antd/es/input';
 import React from 'react';
 import { ProFormOtherProps } from '../../../propsType';
+import './index.less';
 export interface Props extends TextAreaProps {
     otherProps?: ProFormOtherProps;
 }

package/es/ProForm/components/base/TextArea/index.js

@@ -2,34 +2,42 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import "antd/es/input/style";
 import _Input from "antd/es/input";
-var _excluded = ["placeholder", "otherProps"];
-import { useProConfig } from 'zat-design-pro-component';
-import React from 'react';
-import Container from '../../Container';
+var _excluded = ["placeholder", "otherProps", "className"];
+import { jsx as _jsx } from "react/jsx-runtime";
+import classnames from 'classnames';
+import { useProConfig } from '../../../../ProConfigProvider';
+import './index.less';
 var TextArea = _Input.TextArea;
 var TextAreaDef = function TextAreaDef(props) {
   var placeholder = props.placeholder,
     otherProps = props.otherProps,
+    className = props.className,
     rest = _objectWithoutProperties(props, _excluded);
   var _ref = otherProps || {},
     label = _ref.label,
     isView = _ref.isView,
     viewEmpty = _ref.viewEmpty;
   var initialConfig = useProConfig('TextArea');
+  var disabled = (initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig.disabled) || rest.disabled;
   if (isView) {
-    return /*#__PURE__*/React.createElement(Container, {
-      tooltip: true,
-      viewEmpty: viewEmpty
-    }, rest.value);
+    disabled = true;
   }
-  return /*#__PURE__*/React.createElement(TextArea, _objectSpread(_objectSpread({
-    className: props.disabled ? 'disabled' : '',
+  var _className = classnames({
+    'pro-textarea': true,
+    disabled: disabled,
+    'pro-textarea-view': isView,
+    className: className
+  });
+  return _jsx(TextArea, _objectSpread(_objectSpread(_objectSpread({
     showCount: true,
     autoComplete: "off",
     placeholder: placeholder || "\u8BF7\u8F93\u5165".concat(label || ''),
     autoSize: {
       minRows: 4
     }
-  }, initialConfig), rest));
+  }, initialConfig), rest), {}, {
+    disabled: disabled,
+    className: _className
+  }));
 };
 export default TextAreaDef;

package/es/ProForm/components/base/TextArea/index.less

@@ -0,0 +1,11 @@
+.pro-textarea {
+}
+div.pro-textarea-view {
+  .ant-input-disabled {
+    background: transparent !important;
+  }
+  &::after {
+    display: none;
+    padding-bottom: 11px;
+  }
+}

package/es/ProForm/components/base/TimePicker/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { TimePickerProps } from 'antd/es/time-picker';
+import { ProFormOtherProps } from '../../../propsType';
+import './style/index.less';
+export interface Props {
+    valueType?: string;
+    format?: string;
+    onChange?: (value: string) => void;
+    value?: string;
+    otherProps?: ProFormOtherProps;
+}
+declare const TimePicker: React.FC<Props & TimePickerProps>;
+export default TimePicker;

package/es/ProForm/components/base/TimePicker/index.js

@@ -0,0 +1,42 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import "antd/es/time-picker/style";
+import _TimePicker from "antd/es/time-picker";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["format", "onChange", "value", "otherProps"];
+import { jsx as _jsx } from "react/jsx-runtime";
+import moment from 'moment';
+import { useProConfig } from '../../../../ProConfigProvider';
+import Container from '../../Container';
+import './style/index.less';
+var TimePicker = function TimePicker(props) {
+  var _props$format = props.format,
+    format = _props$format === void 0 ? 'HH:mm:ss' : _props$format,
+    onChange = props.onChange,
+    value = props.value,
+    otherProps = props.otherProps,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _ref = otherProps || {},
+    isView = _ref.isView,
+    viewEmpty = _ref.viewEmpty,
+    _ref$valueType = _ref.valueType,
+    valueType = _ref$valueType === void 0 ? 'dateTime' : _ref$valueType;
+  var initialConfig = useProConfig('AntTimePicker');
+  var handleChange = function handleChange(value) {
+    if (valueType === 'dateTime') {
+      onChange && onChange(value ? moment(value).format(format) : undefined);
+    }
+  };
+  if (isView) {
+    return _jsx(Container, {
+      viewEmpty: viewEmpty,
+      children: value
+    });
+  }
+  return _jsx(_TimePicker, _objectSpread(_objectSpread(_objectSpread({
+    value: value ? moment(value, format) : undefined
+  }, initialConfig), rest), {}, {
+    format: format,
+    onChange: handleChange
+  }));
+};
+export default TimePicker;

package/es/ProForm/components/base/TimePicker/style/index.less

@@ -0,0 +1,3 @@
+.ant-picker {
+  display: flex;
+}

package/es/ProForm/components/combination/Container/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ContainerProps } from './propsType';
+declare const Container: React.FC<ContainerProps>;
+export default Container;

package/es/ProForm/components/combination/Container/index.js

@@ -0,0 +1,58 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { omit } from 'lodash';
+import classnames from 'classnames';
+import RenderFields from '../../render/RenderFields';
+import ProCollapse from '../../../../ProLayout/components/ProCollapse';
+var Container = function Container(props) {
+  var children = props.children,
+    otherProps = props.otherProps,
+    className = props.className,
+    container = props.container;
+  var type = otherProps.type,
+    form = otherProps.form,
+    show = otherProps.show,
+    required = otherProps.required,
+    disabled = otherProps.disabled;
+  var _className = classnames(_defineProperty({
+    'pro-container': true,
+    'pro-container-diy': type === 'Container'
+  }, "".concat(className), className));
+  var _children = useMemo(function () {
+    var result = children.map(function (item) {
+      return _objectSpread({
+        show: show,
+        required: required,
+        disabled: disabled
+      }, item);
+    });
+    return result;
+  }, [children]);
+  var childRender = function childRender() {
+    var child = _jsx(RenderFields, _objectSpread({
+      columns: _children,
+      form: form
+    }, otherProps));
+    if (type === 'ProCollapse') {
+      return _jsx(ProCollapse, _objectSpread(_objectSpread({}, omit(props, ['otherProps', 'children', 'onBlur', 'onChange', 'placeholder', 'className'])), {}, {
+        children: child
+      }));
+    }
+    if (type === 'Container') {
+      return _jsxs(_Fragment, {
+        children: [container, _jsx("div", {
+          className: "pro-container-content",
+          children: child
+        })]
+      });
+    }
+    return child;
+  };
+  return _jsx("div", {
+    className: _className,
+    children: childRender()
+  });
+};
+export default Container;

package/es/ProForm/components/combination/Container/propsType.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { RowProps } from 'antd';
+import { ProColumnProps, ProFormOtherProps } from '../../../propsType';
+export interface ContainerProps {
+    children?: ProColumnProps[];
+    otherProps?: ProFormOtherProps;
+    rowProps?: RowProps;
+    className?: string;
+    container?: string | React.ReactNode;
+}

package/es/ProForm/components/combination/Container/style/index.less

@@ -0,0 +1,37 @@
+.pro-container {
+
+  &.pro-container-diy {
+    .pro-container-content {
+      display      : flex;
+      flex-flow    : row wrap;
+      min-width    : 0;
+      margin-left  : -12px;
+      margin-right : -12px;
+      margin-bottom: -22px;
+
+      &>.ant-col {
+        padding-left : 12px;
+        padding-right: 12px;
+      }
+    }
+
+  }
+
+  .pro-collapse-content {
+    display         : flex;
+    flex-flow       : row wrap;
+    min-width       : 0;
+    margin-left     : -12px;
+    margin-right    : -12px;
+    // margin-bottom: -22px;
+
+    &>.ant-col {
+      padding-left : 12px;
+      padding-right: 12px;
+    }
+  }
+
+  .pro-collapse.ant-collapse .pro-collapse-panel {
+    margin-bottom: 0;
+  }
+}