@dckj-npm/dc-material 0.1.356 → 0.1.358

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

@@ -0,0 +1,6 @@
+/**
+ * 表单
+ */
+import Form from './form';
+export type { FormProps } from './form';
+export { Form };

package/es/components/form/index.js

@@ -0,0 +1,6 @@
+/**
+ * 表单
+ */
+
+import Form from "./form";
+export { Form };

package/es/components/form/index.scss

@@ -0,0 +1,22 @@
+.form__panel {
+    background-color: #FAFAFA;
+    .next-left {
+        display: flex;
+    }
+    .next-form-item {
+        // display: flex;
+        justify-content: space-between;
+        align-items: center;
+        // min-height: 44px;
+        background-color: #fff;
+        border-radius: 8px;
+        padding: 10px 15px;
+        margin-bottom: 14px;
+        .next-form-item-label {
+            font-size: 15px;
+            color: #333333;
+            font-weight: 500;
+        }
+    }
+    
+}

package/es/components/goods-card-list/goods-card-list-common.d.ts

@@ -0,0 +1,5 @@
+import type { GoodsCardListProps } from './types';
+import React from 'react';
+import './goods-card-list-common.scss';
+declare const GoodsCardListCommon: React.FC<GoodsCardListProps>;
+export default GoodsCardListCommon;

package/es/components/goods-card-list/goods-card-list-common.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["dataList", "maxSales", "onClick"];
+import React from 'react';
+import Carousel from "../carousel/carousel";
+import "./goods-card-list-common.scss";
+var GoodsCardListCommon = function GoodsCardListCommon(_ref) {
+  var _ref$dataList = _ref.dataList,
+    dataList = _ref$dataList === void 0 ? [] : _ref$dataList,
+    _ref$maxSales = _ref.maxSales,
+    maxSales = _ref$maxSales === void 0 ? 1000 : _ref$maxSales,
+    _ref$onClick = _ref.onClick,
+    _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _otherProps = otherProps || {};
+  var resolveResultDesc = function resolveResultDesc(desc) {
+    var htmlString = "<div>" + desc + "</div>";
+    // 创建一个虚拟的 DOM 容器
+    var tempDiv = document.createElement('div');
+    tempDiv.innerHTML = htmlString;
+    // 提取文本
+    return tempDiv.textContent || tempDiv.innerText;
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "card-list-goods-common__container"
+  }, _otherProps), dataList.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.key,
+      className: "card-list-goods__item",
+      onClick: function onClick() {
+        return _onClick(item);
+      }
+    }, item.imageList && item.imageList.length > 0 && /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__image"
+    }, /*#__PURE__*/React.createElement(Carousel, {
+      images: item.imageList,
+      interval: 3000
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__content"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__title"
+    }, item.title), /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__desc"
+    }, resolveResultDesc(item.desc)), /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__bottom"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__unit"
+    }, "\uFFE5"), /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__price"
+    }, item.activePrice || item.price), item.activePrice && /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__unit__delete"
+    }, "\uFFE5"), item.activePrice && /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__price__delete"
+    }, item.price), /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__sales"
+    }, "\u5DF2\u552E", item.sales > maxSales ? maxSales + "+" : item.sales))));
+  }));
+};
+GoodsCardListCommon.displayName = 'GoodsCardListCommon';
+export default GoodsCardListCommon;

package/es/components/goods-card-list/goods-card-list-common.scss

@@ -0,0 +1,118 @@
+.card-list-goods-common__container {
+  display: grid;
+  grid-template-columns:repeat(2, minmax(0, 1fr));
+  row-gap: 12px;
+  column-gap: 10px;
+  width: 100%;
+
+  & > .card-list-goods__item {
+    box-sizing: border-box;
+    transition: top 0.35s ease, left 0.35s ease, width 0.35s ease;
+    overflow: hidden;
+    border-radius: 8px;
+    box-shadow: 0 3px 9px 1px rgba(204, 204, 204, 0.35);
+
+    & > .card-list-goods__image {
+      height: 200px;
+      width: 100%;
+      overflow: hidden;
+      display: flex;
+
+      & > img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        //object-position: center;
+        object-position: 50% 50%;
+      }
+    }
+
+    & > .card-list-goods__content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      padding: 0.5rem;
+
+      .card-list-goods__title {
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        margin-top: 0.25rem;
+        margin-bottom: 0.25rem;
+        font-size: 14px;
+        font-weight: 700;
+      }
+
+      .card-list-goods__desc {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        line-clamp: 2;
+        margin-top: 0.25rem;
+        margin-bottom: 0.25rem;
+        font-size: 12px;
+        color: #333333;
+      }
+
+      .card-list-goods__bottom {
+        margin-top: 0.25rem;
+        margin-bottom: 0.25rem;
+        display: flex;
+        align-items: baseline;
+        flex-wrap: wrap;
+        row-gap: 0.5rem;
+
+        & > div {
+          display: flex;
+        }
+
+        .card-list-goods__unit {
+          font-size: 12px;
+          color: #F57D51;
+          font-weight: 700;
+          line-height: 1;
+
+          &__delete {
+            margin-left: 0;
+            font-size: 14px;
+            color: #666666;
+            line-height: 1;
+            text-decoration: line-through
+          }
+
+        }
+
+        .card-list-goods__price {
+          font-size: 17px;
+          color: #F57D51;
+          font-weight: 700;
+          line-height: 1;
+
+          &__delete {
+            margin-left: 0;
+            font-size: 14px;
+            color: #666666;
+            line-height: 1;
+            text-decoration: line-through
+          }
+        }
+
+        .card-list-goods__sales {
+          margin-left: 3px;
+          font-size: 12px;
+          color: #666666;
+          line-height: 1;
+        }
+
+      }
+
+    }
+
+  }
+
+}
+
+
+

package/es/components/goods-card-list/goods-card-list.d.ts

@@ -0,0 +1,5 @@
+import type { GoodsCardListProps } from './types';
+import React from 'react';
+import './goods-card-list.scss';
+declare const GoodsCardList: React.FC<GoodsCardListProps>;
+export default GoodsCardList;

package/es/components/goods-card-list/goods-card-list.js

@@ -0,0 +1,156 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["dataList", "maxSales", "onClick"];
+import React, { useEffect, useState } from 'react';
+import { debounce } from "../../utils/debounce";
+import Carousel from "../carousel/carousel";
+import "./goods-card-list.scss";
+var GoodsCardList = function GoodsCardList(_ref) {
+  var _ref$dataList = _ref.dataList,
+    dataList = _ref$dataList === void 0 ? [] : _ref$dataList,
+    _ref$maxSales = _ref.maxSales,
+    maxSales = _ref$maxSales === void 0 ? 1000 : _ref$maxSales,
+    _ref$onClick = _ref.onClick,
+    _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState([]),
+    positions = _useState[0],
+    setPositions = _useState[1];
+  var _useState2 = useState(0),
+    columnWidth = _useState2[0],
+    setColumnWidth = _useState2[1];
+  var _useState3 = useState(0),
+    maxContainerHeight = _useState3[0],
+    setMaxContainerHeight = _useState3[1];
+  useEffect(function () {
+    var updateLayout = function updateLayout() {
+      var container = document.querySelector('.waterfall-container');
+      if (container) {
+        var itemElements = document.querySelectorAll('.waterfall-item');
+        // 横向间距
+        var horizontalGap = 12;
+        // 纵向间距
+        var verticalGap = 10;
+        var containerWidth = container.offsetWidth;
+        // 每列宽度为容器宽度的一半减去间距
+        var calculatedColumnWidth = (containerWidth - horizontalGap) / 2;
+        setColumnWidth(calculatedColumnWidth);
+        // 两列布局
+        var columnHeights = Array.from({
+          length: 2
+        }).fill(0);
+        var newPositions = [];
+        // 循环计算所有的子元素的信息
+        itemElements.forEach(function (item) {
+          var _item$getBoundingClie = item.getBoundingClientRect(),
+            height = _item$getBoundingClie.height;
+          // 找到最短的那一列
+          var minHeight = Math.min.apply(Math, columnHeights);
+          // 获取该列的索引
+          var columnIndex = columnHeights.indexOf(minHeight);
+          var left = columnIndex * (calculatedColumnWidth + horizontalGap);
+          var top = columnHeights[columnIndex];
+          // 存储元素的定位
+          newPositions.push({
+            left: left,
+            top: top
+          });
+          // 更新该列的高度
+          columnHeights[columnIndex] += height + verticalGap;
+        });
+        // 更新位置
+        setPositions(newPositions);
+        setMaxContainerHeight(Math.max.apply(Math, columnHeights));
+      }
+    };
+    var debouncedUpdateLayout = dataList.length < 15 ? updateLayout : debounce(updateLayout, 200);
+    // 图片加载完成后更新布局
+    var handleImageLoad = function handleImageLoad() {
+      debouncedUpdateLayout();
+    };
+    // 初始化布局
+    debouncedUpdateLayout();
+    // 监听图片加载事件，以确保所有图片都加载完后再更新布局
+    var images = document.querySelectorAll('.waterfall-container img');
+    images.forEach(function (img) {
+      // 如果图片已经加载完成（缓存中加载），则立即更新布局
+      if (img.complete) {
+        handleImageLoad();
+      } else {
+        // 如果图片未加载完成，监听加载事件
+        img.addEventListener('load', handleImageLoad);
+      }
+    });
+
+    // 窗口变化时更新布局
+    window.addEventListener('resize', debouncedUpdateLayout);
+    return function () {
+      // 清理事件监听
+      window.removeEventListener('resize', debouncedUpdateLayout);
+      images.forEach(function (img) {
+        return img.removeEventListener('load', handleImageLoad);
+      });
+    };
+  },
+  // 当 dataList 变化时重新计算
+  [dataList]);
+  var resolveResultDesc = function resolveResultDesc(desc) {
+    var htmlString = "<div>" + desc + "</div>";
+    // 创建一个虚拟的 DOM 容器
+    var tempDiv = document.createElement('div');
+    tempDiv.innerHTML = htmlString;
+    // 提取文本
+    return tempDiv.textContent || tempDiv.innerText;
+  };
+  var resultStyle = _extends({}, otherProps.style || {}, {
+    height: maxContainerHeight + 20 + "px"
+  });
+  var _otherProps = _extends({}, otherProps || {}, {
+    style: resultStyle
+  });
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "card-list-goods__container waterfall-container",
+    style: {
+      height: maxContainerHeight + 20 + "px"
+    }
+  }, _otherProps), dataList.map(function (item, index) {
+    var _positions$index, _positions$index2;
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.key,
+      className: "card-list-goods__item waterfall-item",
+      onClick: function onClick() {
+        return _onClick(item);
+      },
+      style: {
+        left: ((_positions$index = positions[index]) === null || _positions$index === void 0 ? void 0 : _positions$index.left) + "px",
+        top: ((_positions$index2 = positions[index]) === null || _positions$index2 === void 0 ? void 0 : _positions$index2.top) + "px",
+        width: columnWidth + "px"
+      }
+    }, item.imageList && item.imageList.length > 0 && /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__image"
+    }, /*#__PURE__*/React.createElement(Carousel, {
+      images: item.imageList,
+      interval: 3000
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__content"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__title"
+    }, item.title), /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__desc"
+    }, resolveResultDesc(item.desc)), /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__bottom"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__unit"
+    }, "\uFFE5"), /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__price"
+    }, item.activePrice || item.price), item.activePrice && /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__unit__delete"
+    }, "\uFFE5"), item.activePrice && /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__price__delete"
+    }, item.price), /*#__PURE__*/React.createElement("div", {
+      className: "card-list-goods__sales"
+    }, "\u5DF2\u552E", item.sales > maxSales ? maxSales + "+" : item.sales))));
+  }));
+};
+GoodsCardList.displayName = 'GoodsCardList';
+export default GoodsCardList;

package/es/components/goods-card-list/goods-card-list.scss

@@ -0,0 +1,112 @@
+.card-list-goods__container {
+  position: relative;
+  width: 100%;
+
+  & > .card-list-goods__item {
+    position: absolute;
+    box-sizing: border-box;
+    transition: top 0.35s ease, left 0.35s ease, width 0.35s ease;
+    overflow: hidden;
+    border-radius: 8px;
+    box-shadow: 0 3px 9px 1px rgba(204, 204, 204, 0.35);
+
+    & > .card-list-goods__image {
+      height: 200px;
+      width: 100%;
+      overflow: hidden;
+      display: flex;
+
+      & > img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        object-position: center;
+      }
+    }
+
+    & > .card-list-goods__content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      padding: 0.5rem;
+
+      .card-list-goods__title {
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        margin-top: 0.25rem;
+        margin-bottom: 0.25rem;
+        font-size: 14px;
+        font-weight: 700;
+      }
+
+      .card-list-goods__desc {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        line-clamp: 2;
+        margin-top: 0.25rem;
+        margin-bottom: 0.25rem;
+        font-size: 12px;
+        color: #333333;
+      }
+
+      .card-list-goods__bottom {
+        margin-top: 0.25rem;
+        margin-bottom: 0.25rem;
+        display: flex;
+        align-items: baseline;
+        flex-wrap: wrap;
+        row-gap: 0.5rem;
+
+        & > div {
+          display: flex;
+        }
+
+        .card-list-goods__unit {
+          font-size: 12px;
+          color: #F57D51;
+          font-weight: 700;
+          line-height: 1;
+
+          &__delete {
+            margin-left: 0;
+            font-size: 14px;
+            color: #666666;
+            line-height: 1;
+            text-decoration: line-through
+          }
+
+        }
+
+        .card-list-goods__price {
+          font-size: 17px;
+          color: #F57D51;
+          font-weight: 700;
+          line-height: 1;
+
+          &__delete {
+            margin-left: 0;
+            font-size: 14px;
+            color: #666666;
+            line-height: 1;
+            text-decoration: line-through
+          }
+        }
+
+        .card-list-goods__sales {
+          margin-left: 3px;
+          font-size: 12px;
+          color: #666666;
+          line-height: 1;
+        }
+
+      }
+
+    }
+
+  }
+
+}

package/es/components/goods-card-list/index.d.ts

@@ -0,0 +1,4 @@
+import GoodsCardList from './goods-card-list';
+import GoodsCardListCommon from './goods-card-list-common';
+export type { GoodsCardListItemProps, GoodsCardListProps } from './types';
+export { GoodsCardList, GoodsCardListCommon };

package/es/components/goods-card-list/index.js

@@ -0,0 +1,3 @@
+import GoodsCardList from "./goods-card-list";
+import GoodsCardListCommon from "./goods-card-list-common";
+export { GoodsCardList, GoodsCardListCommon };

package/es/components/goods-card-list/types.d.ts

@@ -0,0 +1,45 @@
+export interface GoodsCardListProps {
+    /**
+     * 卡片列表数据
+     */
+    dataList: GoodsCardListItemProps[];
+    /**
+     * 最大销量
+     */
+    maxSales?: number;
+    /**
+     * 点击事件
+     * @param item
+     */
+    onClick?: (item: GoodsCardListItemProps) => void;
+}
+export interface GoodsCardListItemProps {
+    /**
+     * 唯一标识
+     */
+    key: string;
+    /**
+     * 缩略图列表
+     */
+    imageList: string[];
+    /**
+     * 标题
+     */
+    title: string;
+    /**
+     * 简介
+     */
+    desc: string;
+    /**
+     * 价格
+     */
+    price: string;
+    /**
+     * 促销价格
+     */
+    activePrice?: string;
+    /**
+     * 销量
+     */
+    sales: number;
+}

package/es/components/goods-card-list/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/grid-nav/grid-nav.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface GridNavProps {
+    dataSourceSetting: [];
+    columns: number;
+    iconSize: string;
+    fontWeight: string;
+    fontSize: number;
+    fontColor: string;
+    lineHeight: string;
+    lineNum: number;
+}
+declare const GridNav: React.ForwardRefExoticComponent<GridNavProps & React.RefAttributes<any>>;
+export default GridNav;

package/es/components/grid-nav/grid-nav.js

@@ -0,0 +1,102 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { forwardRef } from 'react';
+import gridNavImg from "../../assets/icon/grid-nav/right.png";
+var ExampleComponent = function ExampleComponent(props, ref) {
+  var columns = props.columns,
+    _props$iconSize = props.iconSize,
+    iconSize = _props$iconSize === void 0 ? 'medium' : _props$iconSize,
+    _props$fontWeight = props.fontWeight,
+    fontWeight = _props$fontWeight === void 0 ? 'normal' : _props$fontWeight,
+    _props$fontSize = props.fontSize,
+    fontSize = _props$fontSize === void 0 ? 12 : _props$fontSize,
+    _props$fontColor = props.fontColor,
+    fontColor = _props$fontColor === void 0 ? '#222' : _props$fontColor,
+    _props$lineHeight = props.lineHeight,
+    lineHeight = _props$lineHeight === void 0 ? 'auto' : _props$lineHeight,
+    _props$lineNum = props.lineNum,
+    lineNum = _props$lineNum === void 0 ? 1 : _props$lineNum,
+    dataSourceSetting = props.dataSourceSetting;
+  console.log('dataSourceSetting的值为', dataSourceSetting);
+
+  // 设置图标尺寸
+  var iconStyle = {};
+  switch (iconSize) {
+    case 'large':
+      iconStyle = {
+        width: '64px',
+        height: '64px'
+      };
+      break;
+    case 'medium':
+      iconStyle = {
+        width: '48px',
+        height: '48px'
+      };
+      break;
+    case 'small':
+      iconStyle = {
+        width: '32px',
+        height: '32px'
+      };
+      break;
+    default:
+      iconStyle = {
+        width: '48px',
+        height: '48px'
+      };
+  }
+
+  // 设置字重
+  var fontStyle = {
+    fontWeight: fontWeight,
+    fontSize: fontSize,
+    color: fontColor,
+    lineHeight: lineHeight
+  };
+
+  // 设置行数
+  var fontLineStyle = {};
+  fontLineStyle = {
+    maxWidth: '80px',
+    overflow: 'hidden',
+    // whiteSpace: lineNum === 1 ? 'nowrap' : 'none',
+    textOverflow: 'ellipsis',
+    display: '-webkit-box',
+    WebkitLineClamp: lineNum,
+    WebkitBoxOrient: 'vertical'
+  };
+  var fontAllStyle = _extends({}, fontStyle, fontLineStyle);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: "dc-grid-nav",
+    style: {
+      gridTemplateColumns: "repeat(" + columns + ", 1fr)"
+    }
+  }, dataSourceSetting.map(function (item, index) {
+    var _item$rightText;
+    return item ? /*#__PURE__*/React.createElement("a", {
+      key: index,
+      href: item.link || '#',
+      className: "grid-item"
+    }, /*#__PURE__*/React.createElement("img", {
+      src: item.icon || 'https://qcloudimg.tencent-cloud.cn/raw/fe54a986a821473655ba20afe30a543a.png',
+      alt: item.title || '导航',
+      style: iconStyle,
+      className: "dc-grid-nav-item-img"
+    }), /*#__PURE__*/React.createElement("span", {
+      style: fontAllStyle,
+      className: "dc-grid-nav-item-title"
+    }, item.title || '无标题'), item.rightText ? /*#__PURE__*/React.createElement("div", {
+      className: "dc-grid-nav-item-right"
+    }, /*#__PURE__*/React.createElement("img", {
+      src: gridNavImg,
+      className: "dc-grid-nav-item-right-img"
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "dc-grid-nav-item-right-title"
+    }, (_item$rightText = item.rightText) !== null && _item$rightText !== void 0 ? _item$rightText : '右侧')) : '') : null;
+  }));
+};
+var GridNav = /*#__PURE__*/forwardRef(ExampleComponent);
+GridNav.displayName = 'GridNav';
+export default GridNav;

package/es/components/grid-nav/index.d.ts

@@ -0,0 +1,3 @@
+import GridNav from "./grid-nav";
+export type { GridNavProps } from './grid-nav';
+export default GridNav;

package/es/components/grid-nav/index.js

@@ -0,0 +1,2 @@
+import GridNav from "./grid-nav";
+export default GridNav;