@dckj-npm/dc-material 0.1.360 → 0.1.362

package/es/components/teletext-list/teletext-list-item.d.ts

@@ -16,7 +16,7 @@ export interface TeletextListItemProps {
     /**
      * 图片地址
      */
-    image?: string[];
+    image?: string | string[];
     /**
      * 图片位置
      */
@@ -97,6 +97,10 @@ export interface TeletextListItemProps {
      * 图文间距
      */
     textImgGap?: number;
+    /**
+     * 子节点
+     */
+    children?: React.ReactNode;
 }
 declare const TeletextListItem: React.FC<TeletextListItemProps>;
 export default TeletextListItem;

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["onClick", "title", "image", "children", "imagePlacement", "description", "type", "textLines", "itemColumns", "itemPadding", "iconList", "tags", "text3", "text4", "imgWidth", "imgHeight", "itemBgColor", "style", "textAlign", "isShoppingCart", "isWishList", "isUserMenu", "itemType", "textImgGap"];
-import React from 'react';
+import React, { createElement } from 'react';
 import "./teletext-list-item.scss";
 import { convertChildren } from "../../utils/children-node-handle";
 import { Icon } from '@alilc/lowcode-materials';
@@ -14,8 +14,7 @@ var TeletextListItem = function TeletextListItem(_ref) {
   var _ref$onClick = _ref.onClick,
     onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
     title = _ref.title,
-    _ref$image = _ref.image,
-    image = _ref$image === void 0 ? [] : _ref$image,
+    image = _ref.image,
     children = _ref.children,
     imagePlacement = _ref.imagePlacement,
     description = _ref.description,
@@ -39,18 +38,34 @@ var TeletextListItem = function TeletextListItem(_ref) {
     _ref$textImgGap = _ref.textImgGap,
     textImgGap = _ref$textImgGap === void 0 ? 16 : _ref$textImgGap,
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  // 处理图片地址，兼容字符串和数组
-  var resultImage = Array.isArray(image) ? image.length > 0 ? image[0] : '' : typeof image === 'string' ? image : '';
+  var normalizeNodeKey = function normalizeNodeKey(rawKey) {
+    if (rawKey === undefined || rawKey === null) {
+      return '';
+    }
+    return String(rawKey).replace(/^\.?\$?/, '');
+  };
+  var IconComp = Icon;
+  var resultImage = Array.isArray(image) ? image[0] || '' : image || '';
   var _otherProps = otherProps || {};
-  var tagColorArray = ['orange', 'green'];
-  var tagList = (typeof tags === 'string' ? tags.split(',') : []).map(function (tag) {
-    return {
-      name: tag
-    };
-  });
-
-  // console.log('itemType', itemType)
   var containerClass = "teletext-list__panel__item image-" + imagePlacement + " itemColumns-" + itemColumns;
+  var childNodeList = React.Children.toArray(children);
+  var getChildPropsByKey = function getChildPropsByKey(key) {
+    var targetKey = normalizeNodeKey(key);
+    var targetChild = childNodeList.find(function (child) {
+      var _child$props;
+      var childKey = normalizeNodeKey(child === null || child === void 0 ? void 0 : child.key);
+      var childPropsKey = normalizeNodeKey(child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.key);
+      return childKey === targetKey || childPropsKey === targetKey;
+    });
+    return (targetChild === null || targetChild === void 0 ? void 0 : targetChild.props) || {};
+  };
+  var imageChildProps = getChildPropsByKey('image');
+  var imageClassName = ['teletext-list__panel__item_image', imageChildProps === null || imageChildProps === void 0 ? void 0 : imageChildProps.className].filter(Boolean).join(' ');
+  var imageStyle = _extends({}, typeof imgWidth === 'number' ? {
+    width: imgWidth + "px"
+  } : {}, typeof imgHeight === 'number' ? {
+    height: imgHeight + "px"
+  } : {}, (imageChildProps === null || imageChildProps === void 0 ? void 0 : imageChildProps.style) || {});
   var containerStyle = _extends({
     padding: itemPadding + "px",
     backgroundColor: itemBgColor,
@@ -64,7 +79,6 @@ var TeletextListItem = function TeletextListItem(_ref) {
       position: 'absolute',
       zIndex: 10
     };
-    console.log('icon', icon);
     // 默认偏移值
     var defaultPosition = {};
     switch (icon.position) {
@@ -110,11 +124,8 @@ var TeletextListItem = function TeletextListItem(_ref) {
     style: containerStyle
   }, _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"
-    }
+    className: imageClassName,
+    style: imageStyle
   }) : null, type !== 'imgOnly' && itemType === '开关' && /*#__PURE__*/React.createElement("div", {
     className: "teletext-list__panel__item__switch",
     style: {
@@ -212,13 +223,14 @@ var TeletextListItem = function TeletextListItem(_ref) {
     alt: ""
   }), "Remove"))), resultImage && (imagePlacement === 'right' || imagePlacement === 'bottom') && type !== 'textOnly' ? convertChildren(children, 'image', {
     imgSrc: resultImage,
-    className: 'teletext-list__panel__item_image'
+    className: imageClassName,
+    style: imageStyle
   }) : null, iconList === null || iconList === void 0 ? void 0 : iconList.map(function (icon, index) {
     return /*#__PURE__*/React.createElement("div", {
       key: index,
       className: "teletext-list__panel__item__icon size-" + icon.size,
       style: getIconStyle(icon)
-    }, /*#__PURE__*/React.createElement(Icon, {
+    }, /*#__PURE__*/createElement(IconComp, {
       type: icon.icon,
       size: icon.size
     }));

package/es/components/teletext-list/teletext-list.d.ts

@@ -11,7 +11,7 @@ interface DataProps {
     /**
      * 图片地址
      */
-    image?: string[];
+    image?: string | string[];
     /**
      * 说明
      */
@@ -68,7 +68,7 @@ export interface TeletextListProps {
     /**
      * 子节点
      */
-    children: React.ReactChild;
+    children?: React.ReactNode;
     /**
      * 图片位置
      */
@@ -81,11 +81,11 @@ export interface TeletextListProps {
     /**
      * 更多
      */
-    moreText: string;
+    moreText?: string;
     /**
      * 文字行数
      */
-    textLines: number;
+    textLines?: number;
     /**
      * 控件类型
      */

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

@@ -19,9 +19,11 @@ var TeletextList = function TeletextList(_ref) {
     _ref$imagePlacement = _ref.imagePlacement,
     imagePlacement = _ref$imagePlacement === void 0 ? 'left' : _ref$imagePlacement,
     handleMoreClick = _ref.handleMoreClick,
-    moreText = _ref.moreText,
+    _ref$moreText = _ref.moreText,
+    moreText = _ref$moreText === void 0 ? '' : _ref$moreText,
     title = _ref.title,
-    textLines = _ref.textLines,
+    _ref$textLines = _ref.textLines,
+    textLines = _ref$textLines === void 0 ? 2 : _ref$textLines,
     type = _ref.type,
     itemColumns = _ref.itemColumns,
     iconList = _ref.iconList,
@@ -38,34 +40,19 @@ var TeletextList = function TeletextList(_ref) {
     isUserMenu = _ref.isUserMenu,
     textImgGap = _ref.textImgGap,
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var TeletextListItemComp = TeletextListItem;
   var _otherProps = otherProps || {};
-  var columnStyle = {
-    gridTemplateColumns: "repeat(" + itemColumns + ",1fr)",
-    gap: itemGap + "px"
-  };
-  // console.log('dataList1', dataList)
   var getListStyle = function getListStyle() {
     if (itemRowAlign === 'row') {
       return {
         width: 'auto',
-        // 设置为 auto 以适应内容宽度
         display: 'flex',
         gap: itemGap + "px",
         overflowX: 'auto',
-        // 优化滚动体验
         scrollSnapType: 'x mandatory',
-        WebkitOverflowScrolling: 'touch',
-        // 隐藏滚动条
-        msOverflowStyle: 'none',
-        // IE和Edge
-        scrollbarWidth: 'none',
-        // Firefox
-        '::-webkit-scrollbar': {
-          display: 'none' // Chrome, Safari 和 Opera
-        }
+        WebkitOverflowScrolling: 'touch'
       };
     }
-    // column 模式使用 grid 布局
     return {
       display: 'grid',
       gridTemplateColumns: "repeat(" + itemColumns + ",1fr)",
@@ -74,9 +61,9 @@ var TeletextList = function TeletextList(_ref) {
   };
   var getDataList = function getDataList() {
     if (!dataList) return [];
-    console.log('dataList2', dataList);
     return Array.isArray(dataList) ? dataList : [dataList];
   };
+  var dataItems = getDataList();
   return /*#__PURE__*/React.createElement("div", _extends({
     className: "teletext-list__panel"
   }, _otherProps), /*#__PURE__*/React.createElement("div", {
@@ -100,11 +87,11 @@ var TeletextList = function TeletextList(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: "teletext-list__panel-head-user-menu-text"
   }, "Hello, Paige Turner")), /*#__PURE__*/React.createElement("div", {
-    className: "teletext-list__panel__item-list",
+    className: "teletext-list__panel__item-list " + (itemRowAlign === 'row' ? 'teletext-list__panel__item-list--row' : ''),
     style: getListStyle()
-  }, dataList ? getDataList().map(function (item, index) {
-    return /*#__PURE__*/React.createElement(TeletextListItem, _extends({
-      key: item.id || index,
+  }, dataItems.length > 0 ? dataItems.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(TeletextListItemComp, _extends({
+      key: index,
       onClick: onClick,
       imagePlacement: imagePlacement,
       style: itemRowAlign === 'row' ? {

package/es/types/assets.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const src: string
+  export default src
+}

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

@@ -1,5 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+var normalizeNodeKey = function normalizeNodeKey(rawKey) {
+  if (rawKey === undefined || rawKey === null) {
+    return '';
+  }
+  return String(rawKey).replace(/^\.?\$?/, '');
+};
+
 /**
  * 从children数组中获取指定组件
  * @author ZhuGangMin
@@ -10,17 +17,16 @@ import React from 'react';
  */
 export function convertChildren(children, key, props) {
   var node;
+  var targetKey = normalizeNodeKey(key);
   if (Array.isArray(children)) {
     for (var i = 0; i < children.length; i++) {
+      var _child$props;
       var child = children[i];
-      if (child.key === key) {
-        var _child$props;
+      var childKey = normalizeNodeKey(child === null || child === void 0 ? void 0 : child.key);
+      var childPropsKey = normalizeNodeKey(child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.key);
+      if (childKey === targetKey || childPropsKey === targetKey) {
         // 属性融合
         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/teletext-list/index.scss

@@ -14,6 +14,15 @@
     gap: 10px;
   }
 
+  .teletext-list__panel__item-list--row {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
   &-head {
     display: flex;
     justify-content: space-between;