@dckj-npm/dc-material 0.1.359 → 0.1.361

package/es/components/custom-form/custom-form.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import './index.scss';
+import { FormProps } from '@alifd/next/lib/form';
+export type CustomFormItemType = 'Input' | 'TextArea' | 'Select' | 'RadioGroup' | 'CheckboxGroup' | 'NumberPicker' | 'DatePicker' | 'Upload';
+export interface CustomFormItemSchema {
+    field: string;
+    label?: string;
+    required?: boolean;
+    componentType?: CustomFormItemType;
+    componentProps?: Record<string, any>;
+    options?: Array<{
+        label: string;
+        value: any;
+    }>;
+    columnSpan?: number;
+    formItemProps?: Record<string, any>;
+}
+type GridSpacing = [number] | [number, number] | [number, number, number] | [number, number, number, number];
+export interface CustomFormProps extends Omit<FormProps, 'onSubmit'> {
+    columns?: number;
+    spacing?: GridSpacing;
+    emptyContent?: React.ReactNode;
+    formItems?: CustomFormItemSchema[];
+    showSubmit?: boolean;
+    submitText?: string;
+    submitValidate?: boolean;
+    submitDataSource?: any;
+    submitButtonProps?: Record<string, any>;
+    showReset?: boolean;
+    resetText?: string;
+    resetButtonProps?: Record<string, any>;
+    onSubmit?: (values: any, errors: any, field: any) => void;
+    onSubmitFailed?: (values: any, errors: any, field: any) => void;
+    children?: React.ReactNode;
+}
+declare const CustomForm: React.FC<CustomFormProps>;
+export default CustomForm;

package/es/components/custom-form/custom-form.js

@@ -0,0 +1,158 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/extends";
+import _Upload from "@alifd/next/es/upload";
+import _NumberPicker from "@alifd/next/es/number-picker";
+import _DatePicker from "@alifd/next/es/date-picker";
+import _Checkbox from "@alifd/next/es/checkbox";
+import _Radio from "@alifd/next/es/radio";
+import _Select from "@alifd/next/es/select";
+import _Input from "@alifd/next/es/input";
+import _ResponsiveGrid from "@alifd/next/es/responsive-grid";
+import _Form from "@alifd/next/es/form";
+var _excluded = ["columns", "spacing", "emptyContent", "formItems", "showSubmit", "submitText", "submitValidate", "submitDataSource", "submitButtonProps", "showReset", "resetText", "resetButtonProps", "onSubmit", "onSubmitFailed", "children"];
+import React, { useCallback } from 'react';
+import "./index.scss";
+var NextFormAny = _Form;
+var ResponsiveGridAny = _ResponsiveGrid;
+var ResponsiveGridCell = _ResponsiveGrid.Cell;
+var FormItemAny = _Form.Item;
+var InputAny = _Input;
+var TextAreaAny = _Input.TextArea;
+var SelectAny = _Select;
+var RadioGroupAny = _Radio.Group;
+var CheckboxGroupAny = _Checkbox.Group;
+var DatePickerAny = _DatePicker;
+var NumberPickerAny = _NumberPicker;
+var UploadAny = _Upload;
+var runSubmitDataSource = function runSubmitDataSource(submitDataSource, values, errors, field) {
+  if (!submitDataSource) return;
+  if (typeof submitDataSource === 'function') {
+    submitDataSource(values, errors, field);
+    return;
+  }
+  if (typeof (submitDataSource === null || submitDataSource === void 0 ? void 0 : submitDataSource.run) === 'function') {
+    submitDataSource.run(values, errors, field);
+    return;
+  }
+  if (typeof (submitDataSource === null || submitDataSource === void 0 ? void 0 : submitDataSource.execute) === 'function') {
+    submitDataSource.execute(values, errors, field);
+    return;
+  }
+  if (typeof (submitDataSource === null || submitDataSource === void 0 ? void 0 : submitDataSource.request) === 'function') {
+    submitDataSource.request(values, errors, field);
+    return;
+  }
+  if (typeof (submitDataSource === null || submitDataSource === void 0 ? void 0 : submitDataSource.submit) === 'function') {
+    submitDataSource.submit(values, errors, field);
+  }
+};
+var renderFormItemComponent = function renderFormItemComponent(item) {
+  var componentProps = item.componentProps || {};
+  var dataSource = componentProps.dataSource || item.options || [];
+  switch (item.componentType) {
+    case 'TextArea':
+      return /*#__PURE__*/React.createElement(TextAreaAny, componentProps);
+    case 'Select':
+      return /*#__PURE__*/React.createElement(SelectAny, _extends({
+        dataSource: dataSource
+      }, componentProps));
+    case 'RadioGroup':
+      return /*#__PURE__*/React.createElement(RadioGroupAny, _extends({
+        dataSource: dataSource
+      }, componentProps));
+    case 'CheckboxGroup':
+      return /*#__PURE__*/React.createElement(CheckboxGroupAny, _extends({
+        dataSource: dataSource
+      }, componentProps));
+    case 'NumberPicker':
+      return /*#__PURE__*/React.createElement(NumberPickerAny, componentProps);
+    case 'DatePicker':
+      return /*#__PURE__*/React.createElement(DatePickerAny, componentProps);
+    case 'Upload':
+      return /*#__PURE__*/React.createElement(UploadAny, componentProps);
+    case 'Input':
+    default:
+      return /*#__PURE__*/React.createElement(InputAny, componentProps);
+  }
+};
+var CustomForm = function CustomForm(_ref) {
+  var _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? 1 : _ref$columns,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? [0, 16, 16, 0] : _ref$spacing,
+    _ref$emptyContent = _ref.emptyContent,
+    emptyContent = _ref$emptyContent === void 0 ? '添加表单项' : _ref$emptyContent,
+    _ref$formItems = _ref.formItems,
+    formItems = _ref$formItems === void 0 ? [] : _ref$formItems,
+    _ref$showSubmit = _ref.showSubmit,
+    showSubmit = _ref$showSubmit === void 0 ? true : _ref$showSubmit,
+    _ref$submitText = _ref.submitText,
+    submitText = _ref$submitText === void 0 ? '提交' : _ref$submitText,
+    _ref$submitValidate = _ref.submitValidate,
+    submitValidate = _ref$submitValidate === void 0 ? true : _ref$submitValidate,
+    submitDataSource = _ref.submitDataSource,
+    submitButtonProps = _ref.submitButtonProps,
+    _ref$showReset = _ref.showReset,
+    showReset = _ref$showReset === void 0 ? false : _ref$showReset,
+    _ref$resetText = _ref.resetText,
+    resetText = _ref$resetText === void 0 ? '重置' : _ref$resetText,
+    resetButtonProps = _ref.resetButtonProps,
+    onSubmit = _ref.onSubmit,
+    onSubmitFailed = _ref.onSubmitFailed,
+    children = _ref.children,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var handleSubmit = useCallback(function (values, errors, field) {
+    if (errors && Object.keys(errors).length) {
+      if (onSubmitFailed) {
+        onSubmitFailed(values, errors, field);
+      }
+      return;
+    }
+    if (onSubmit) {
+      onSubmit(values, errors, field);
+    }
+    runSubmitDataSource(submitDataSource, values, errors, field);
+  }, [onSubmit, onSubmitFailed, submitDataSource]);
+  var formItemNodes = formItems.map(function (item, index) {
+    var colSpan = Math.min(columns, Math.max(1, item.columnSpan || 1));
+    var formItemProps = item.formItemProps || {};
+    return /*#__PURE__*/React.createElement(ResponsiveGridCell, {
+      colSpan: colSpan,
+      key: (item.field || index) + "-form-item"
+    }, /*#__PURE__*/React.createElement(FormItemAny, _extends({
+      label: item.label,
+      name: item.field,
+      required: item.required
+    }, formItemProps), renderFormItemComponent(item)));
+  });
+  var childrenNodes = React.Children.toArray(children).map(function (child, index) {
+    if (/*#__PURE__*/React.isValidElement(child) && child.type === ResponsiveGridCell) {
+      return child;
+    }
+    return /*#__PURE__*/React.createElement(ResponsiveGridCell, {
+      colSpan: 1,
+      key: "custom-form-child-" + index
+    }, child);
+  });
+  var hasContent = formItemNodes.length > 0 || childrenNodes.length > 0;
+  return /*#__PURE__*/React.createElement(NextFormAny, _extends({
+    className: "custom-form"
+  }, otherProps), hasContent ? /*#__PURE__*/React.createElement(ResponsiveGridAny, {
+    className: "custom-form__grid",
+    gap: spacing,
+    columns: columns
+  }, formItemNodes, childrenNodes) : /*#__PURE__*/React.createElement("div", {
+    className: "custom-form__empty"
+  }, emptyContent), showSubmit || showReset ? /*#__PURE__*/React.createElement("div", {
+    className: "custom-form__actions"
+  }, showReset ? /*#__PURE__*/React.createElement(NextFormAny.Reset, _extends({
+    className: "custom-form__reset"
+  }, resetButtonProps), resetText) : null, showSubmit ? /*#__PURE__*/React.createElement(NextFormAny.Submit, _extends({
+    className: "custom-form__submit",
+    type: "primary",
+    validate: submitValidate,
+    onClick: handleSubmit
+  }, submitButtonProps), submitText) : null) : null);
+};
+CustomForm.displayName = 'CustomForm';
+export default CustomForm;

package/es/components/custom-form/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 自定义表单
+ */
+import CustomForm from './custom-form';
+export type { CustomFormProps, CustomFormItemSchema, CustomFormItemType } from './custom-form';
+export { CustomForm };

package/es/components/custom-form/index.js

@@ -0,0 +1,6 @@
+/**
+ * 自定义表单
+ */
+
+import CustomForm from "./custom-form";
+export { CustomForm };

package/es/components/custom-form/index.scss

@@ -0,0 +1,25 @@
+.custom-form {
+  background-color: #fafafa;
+}
+
+.custom-form__grid {
+  width: 100%;
+}
+
+.custom-form__empty {
+  color: #999;
+  padding: 12px 0;
+  text-align: center;
+}
+
+.custom-form__actions {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  padding: 12px 0 0;
+}
+
+.custom-form__submit,
+.custom-form__reset {
+  min-width: 120px;
+}