@dckj-npm/dc-material 0.1.359 → 0.1.361

package/es/components/teletext-list/teletext-list-item.js

@@ -39,8 +39,10 @@ var TeletextListItem = function TeletextListItem(_ref) {
     _ref$textImgGap = _ref.textImgGap,
     textImgGap = _ref$textImgGap === void 0 ? 16 : _ref$textImgGap,
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  // 只获取第一张图片
-  var resultImage = image && image.length > 0 ? image[0] : '';
+  // 处理图片地址，兼容字符串和数组，优先取第一个有效字符串
+  var resultImage = Array.isArray(image) ? image.find(function (item) {
+    return typeof item === 'string' && item.trim();
+  }) || '' : typeof image === 'string' ? image : '';
   var _otherProps = otherProps || {};
   var tagColorArray = ['orange', 'green'];
   var tagList = (typeof tags === 'string' ? tags.split(',') : []).map(function (tag) {
@@ -50,13 +52,17 @@ var TeletextListItem = function TeletextListItem(_ref) {
   });
 
   // console.log('itemType', itemType)
-  var containerClass = "teletext-list__panel__item image-" + imagePlacement + " itemColumns-" + itemColumns;
+  var containerClass = "teletext-list__panel__item image-" + imagePlacement + " itemColumns-" + itemColumns + " type-" + type;
   var containerStyle = _extends({
     padding: itemPadding + "px",
     backgroundColor: itemBgColor,
     alignItems: textAlign,
     gap: textImgGap + "px"
   }, style);
+  var imageStyle = {
+    width: imgWidth + "px",
+    height: imgHeight + "px"
+  };
 
   // 生成图标样式
   var getIconStyle = function getIconStyle(icon) {
@@ -111,10 +117,7 @@ var TeletextListItem = function TeletextListItem(_ref) {
   }, _otherProps), resultImage && (imagePlacement === 'left' || imagePlacement === 'top') && type !== 'textOnly' ? convertChildren(children, 'image', {
     imgSrc: resultImage,
     className: 'teletext-list__panel__item_image',
-    style: {
-      width: imgWidth + "px",
-      height: imgHeight + "px"
-    }
+    style: imageStyle
   }) : null, type !== 'imgOnly' && itemType === '开关' && /*#__PURE__*/React.createElement("div", {
     className: "teletext-list__panel__item__switch",
     style: {
@@ -211,8 +214,9 @@ var TeletextListItem = function TeletextListItem(_ref) {
     src: "https://51ymb.com/source/api/upload/1075055372064133120/2025/202502/20250207/1085235703970926592.png",
     alt: ""
   }), "Remove"))), resultImage && (imagePlacement === 'right' || imagePlacement === 'bottom') && type !== 'textOnly' ? convertChildren(children, 'image', {
-    src: resultImage,
-    className: 'teletext-list__panel__item_image'
+    imgSrc: resultImage,
+    className: 'teletext-list__panel__item_image',
+    style: imageStyle
   }) : null, iconList === null || iconList === void 0 ? void 0 : iconList.map(function (icon, index) {
     return /*#__PURE__*/React.createElement("div", {
       key: index,

package/es/components/teletext-list/teletext-list-item.scss

@@ -7,7 +7,22 @@
   gap: 5px;
   // padding-bottom: 10px;
   justify-content: flex-start;
+  align-items: flex-start;
   background-color: #f8f9fb;
+
+  &.type-imgOnly {
+    .teletext-list__panel__item_image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &.type-textOnly {
+    .teletext-list__panel__item__text {
+      width: 100%;
+      flex: 1;
+    }
+  }
   
   .teletext-list__panel__item_image {
     width: 100px;
@@ -28,6 +43,7 @@
   .teletext-list__panel__item__text {
     display: flex;
     flex-direction: column;
+    flex: 1;
     gap: 3px;
 
     .teletext-list__panel__item__text__item {

package/es/components/teletext-list/teletext-list.js

@@ -74,6 +74,7 @@ var TeletextList = function TeletextList(_ref) {
   };
   var getDataList = function getDataList() {
     if (!dataList) return [];
+    console.log('dataList2', dataList);
     return Array.isArray(dataList) ? dataList : [dataList];
   };
   return /*#__PURE__*/React.createElement("div", _extends({
@@ -103,7 +104,7 @@ var TeletextList = function TeletextList(_ref) {
     style: getListStyle()
   }, dataList ? getDataList().map(function (item, index) {
     return /*#__PURE__*/React.createElement(TeletextListItem, _extends({
-      key: index,
+      key: item.id || index,
       onClick: onClick,
       imagePlacement: imagePlacement,
       style: itemRowAlign === 'row' ? {

package/es/index.d.ts

@@ -79,5 +79,7 @@ export type { CollapseSelectorProps } from './components/collapse-selector';
 export { CollapseSelector } from './components/collapse-selector';
 export type { CollapseSelectorItemProps } from './components/collapse-selector-item';
 export { CollapseSelectorItem } from './components/collapse-selector-item';
+export type { CustomFormProps, CustomFormItemSchema, CustomFormItemType } from './components/custom-form';
+export { CustomForm } from './components/custom-form';
 declare const bizCssPrefix = "bizpack";
 export { bizCssPrefix };

package/es/index.js

@@ -161,5 +161,9 @@ export { CollapseSelector } from "./components/collapse-selector";
 // 折叠面板选择器2子项
 
 export { CollapseSelectorItem } from "./components/collapse-selector-item";
+
+// 自定义表单
+
+export { CustomForm } from "./components/custom-form";
 var bizCssPrefix = 'bizpack';
 export { bizCssPrefix };

package/es/style.js

@@ -9,4 +9,12 @@ import '@alifd/next/es/switch/style';
 import '@alifd/next/es/breadcrumb/style';
 import '@alifd/next/es/collapse/style';
 import '@alifd/next/es/rating/style';
+import '@alifd/next/es/upload/style';
+import '@alifd/next/es/number-picker/style';
+import '@alifd/next/es/date-picker/style';
+import '@alifd/next/es/checkbox/style';
+import '@alifd/next/es/radio/style';
+import '@alifd/next/es/input/style';
+import '@alifd/next/es/responsive-grid/style';
+import '@alifd/next/es/form/style';
 import './index.scss';

package/es/utils/children-node-handle.js

@@ -14,8 +14,13 @@ export function convertChildren(children, key, props) {
     for (var i = 0; i < children.length; i++) {
       var child = children[i];
       if (child.key === key) {
+        var _child$props;
         // 属性融合
         var propsContact = props ? _extends({}, child.props, props) : child.props;
+        // 样式融合
+        if (props !== null && props !== void 0 && props.style && (_child$props = child.props) !== null && _child$props !== void 0 && _child$props.style) {
+          propsContact.style = _extends({}, child.props.style, props.style);
+        }
         node = /*#__PURE__*/React.cloneElement(child, propsContact);
         break;
       }

package/lib/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/lib/components/custom-form/custom-form.js

@@ -0,0 +1,164 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _upload = _interopRequireDefault(require("@alifd/next/lib/upload"));
+var _numberPicker = _interopRequireDefault(require("@alifd/next/lib/number-picker"));
+var _datePicker = _interopRequireDefault(require("@alifd/next/lib/date-picker"));
+var _checkbox = _interopRequireDefault(require("@alifd/next/lib/checkbox"));
+var _radio = _interopRequireDefault(require("@alifd/next/lib/radio"));
+var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
+var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
+var _responsiveGrid = _interopRequireDefault(require("@alifd/next/lib/responsive-grid"));
+var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
+var _react = _interopRequireWildcard(require("react"));
+require("./index.scss");
+var _excluded = ["columns", "spacing", "emptyContent", "formItems", "showSubmit", "submitText", "submitValidate", "submitDataSource", "submitButtonProps", "showReset", "resetText", "resetButtonProps", "onSubmit", "onSubmitFailed", "children"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var NextFormAny = _form["default"];
+var ResponsiveGridAny = _responsiveGrid["default"];
+var ResponsiveGridCell = _responsiveGrid["default"].Cell;
+var FormItemAny = _form["default"].Item;
+var InputAny = _input["default"];
+var TextAreaAny = _input["default"].TextArea;
+var SelectAny = _select["default"];
+var RadioGroupAny = _radio["default"].Group;
+var CheckboxGroupAny = _checkbox["default"].Group;
+var DatePickerAny = _datePicker["default"];
+var NumberPickerAny = _numberPicker["default"];
+var UploadAny = _upload["default"];
+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["default"].createElement(TextAreaAny, componentProps);
+    case 'Select':
+      return /*#__PURE__*/_react["default"].createElement(SelectAny, (0, _extends2["default"])({
+        dataSource: dataSource
+      }, componentProps));
+    case 'RadioGroup':
+      return /*#__PURE__*/_react["default"].createElement(RadioGroupAny, (0, _extends2["default"])({
+        dataSource: dataSource
+      }, componentProps));
+    case 'CheckboxGroup':
+      return /*#__PURE__*/_react["default"].createElement(CheckboxGroupAny, (0, _extends2["default"])({
+        dataSource: dataSource
+      }, componentProps));
+    case 'NumberPicker':
+      return /*#__PURE__*/_react["default"].createElement(NumberPickerAny, componentProps);
+    case 'DatePicker':
+      return /*#__PURE__*/_react["default"].createElement(DatePickerAny, componentProps);
+    case 'Upload':
+      return /*#__PURE__*/_react["default"].createElement(UploadAny, componentProps);
+    case 'Input':
+    default:
+      return /*#__PURE__*/_react["default"].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 = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var handleSubmit = (0, _react.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["default"].createElement(ResponsiveGridCell, {
+      colSpan: colSpan,
+      key: (item.field || index) + "-form-item"
+    }, /*#__PURE__*/_react["default"].createElement(FormItemAny, (0, _extends2["default"])({
+      label: item.label,
+      name: item.field,
+      required: item.required
+    }, formItemProps), renderFormItemComponent(item)));
+  });
+  var childrenNodes = _react["default"].Children.toArray(children).map(function (child, index) {
+    if (/*#__PURE__*/_react["default"].isValidElement(child) && child.type === ResponsiveGridCell) {
+      return child;
+    }
+    return /*#__PURE__*/_react["default"].createElement(ResponsiveGridCell, {
+      colSpan: 1,
+      key: "custom-form-child-" + index
+    }, child);
+  });
+  var hasContent = formItemNodes.length > 0 || childrenNodes.length > 0;
+  return /*#__PURE__*/_react["default"].createElement(NextFormAny, (0, _extends2["default"])({
+    className: "custom-form"
+  }, otherProps), hasContent ? /*#__PURE__*/_react["default"].createElement(ResponsiveGridAny, {
+    className: "custom-form__grid",
+    gap: spacing,
+    columns: columns
+  }, formItemNodes, childrenNodes) : /*#__PURE__*/_react["default"].createElement("div", {
+    className: "custom-form__empty"
+  }, emptyContent), showSubmit || showReset ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: "custom-form__actions"
+  }, showReset ? /*#__PURE__*/_react["default"].createElement(NextFormAny.Reset, (0, _extends2["default"])({
+    className: "custom-form__reset"
+  }, resetButtonProps), resetText) : null, showSubmit ? /*#__PURE__*/_react["default"].createElement(NextFormAny.Submit, (0, _extends2["default"])({
+    className: "custom-form__submit",
+    type: "primary",
+    validate: submitValidate,
+    onClick: handleSubmit
+  }, submitButtonProps), submitText) : null) : null);
+};
+CustomForm.displayName = 'CustomForm';
+var _default = exports["default"] = CustomForm;

package/lib/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/lib/components/custom-form/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+var _customForm = _interopRequireDefault(require("./custom-form"));
+exports.CustomForm = _customForm["default"];

package/lib/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;
+}