@dckj-npm/dc-material 0.1.358 → 0.1.360

package/es/assets/scss/mixin.scss

@@ -0,0 +1,68 @@
+
+//sass常用混合器(应该合理使用)
+// 弹性布局混合器
+@mixin flexMixer($justify: center, $align: center, $flex: row) {
+	// 申明为弹性盒子
+	display: flex;
+	// 排列方式
+	flex-direction: $flex;
+	// 主（副）轴的对齐方式
+	justify-content: $justify;
+	// 主（副）轴的对齐方式
+	align-items: $align;
+}
+// 定位混合器
+@mixin positionMixer($position: static, $left: auto, $top: auto, $right: auto, $bottom: auto) {
+	position: $position;
+	left: $left;
+	top: $top;
+	right: $right;
+	bottom: $bottom;
+}
+// 浮动混合器
+@mixin floatMixer($float: left) {
+	float: $float;
+}
+// 设置背景混合器
+@mixin bgMixer($url, $position: center center, $size: 100% 100%, $repeat: no-repeat) {
+	background: $url $repeat $position;
+	background-size: $size;
+}
+// 宽高混合器
+@mixin widthMixer($width: 100px, $height: 100px) {
+	width: $width;
+	height: $height;
+}
+
+// 文字混合器
+@mixin fontMixer($fontSize: 16px, $color: #515a6e, $weight: 500, $font-familyt: Source Han Sans SC) {
+	font-family: $font-familyt;
+	font-size: $fontSize;
+	font-weight: $weight;
+	color: $color;
+}
+
+// 多行字体省略混合器
+@mixin pointMixer($line: 2) {
+	display: -webkit-box; //必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
+	word-break: break-all;
+	-webkit-line-clamp: $line;
+	line-clamp: $line;
+	overflow: hidden;
+	text-overflow: ellipsis; //可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
+	white-space: normal;
+	/* autoprefixer: off */
+	-webkit-box-orient: vertical; //必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
+	/* autoprefixer: on */
+}
+
+// 隐藏滚动条
+@mixin hiddenScroll() {
+	/* Firefox */
+	scrollbar-width: none;
+	/* Chrome Safari */
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+

package/es/components/accordion-selector/accordion-selector.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import './index.scss';
+import { Collapse } from '@alifd/next';
+export interface AccordionSelectorProps extends React.ComponentProps<typeof Collapse> {
+    items: DataProps[];
+    onClick?: (e: any) => void;
+    children: React.ReactChild;
+}
+interface DataProps {
+    icon?: string;
+    title?: string;
+}
+declare const AccordionSelector: {
+    ({ dataList, children, ...otherProps }: {
+        [x: string]: any;
+        dataList: any;
+        children: any;
+    }): JSX.Element;
+    Item: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<import("@alifd/next/types/collapse").PanelProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, {
+        onKeyDown: (e: import("react").KeyboardEvent<HTMLElement>) => void;
+        render(): import("react").JSX.Element;
+        context: any;
+        setState<K_1 extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("@alifd/next/types/collapse").PanelProps>) => {} | Pick<{}, K_1>) | Pick<{}, K_1>, callback?: () => void): void;
+        forceUpdate(callback?: () => void): void;
+        readonly props: Readonly<import("@alifd/next/types/collapse").PanelProps> & Readonly<{
+            children?: import("react").ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<import("@alifd/next/types/collapse").PanelProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<import("@alifd/next/types/collapse").PanelProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<import("@alifd/next/types/collapse").PanelProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/collapse").PanelProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/collapse").PanelProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/collapse").PanelProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/collapse").PanelProps>, nextState: Readonly<{}>, nextContext: any): void;
+    }, {}> & {
+        isNextPanel: boolean;
+    };
+    displayName: string;
+};
+export default AccordionSelector;

package/es/components/accordion-selector/accordion-selector.js

@@ -0,0 +1,22 @@
+import _Collapse from "@alifd/next/es/collapse";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["dataList", "children"];
+import React from 'react';
+import "./index.scss";
+var AccordionSelector = function AccordionSelector(_ref) {
+  var dataList = _ref.dataList,
+    children = _ref.children,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  console.log(dataList, children);
+  var _otherProps = otherProps || {};
+  return /*#__PURE__*/React.createElement(_Collapse, _extends({
+    className: "accordion-selector"
+  }, _otherProps), children);
+};
+
+// 确保Item组件在AccordionSelector定义后立即挂载
+AccordionSelector.Item = _Collapse.Panel;
+AccordionSelector.Item.displayName = 'AccordionSelector.Item';
+AccordionSelector.displayName = 'AccordionSelector';
+export default AccordionSelector;

package/es/components/accordion-selector/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 折叠面板
+ */
+import AccordionSelector from './accordion-selector';
+export type { AccordionSelectorProps } from './accordion-selector';
+export { AccordionSelector };

package/es/components/accordion-selector/index.js

@@ -0,0 +1,5 @@
+/**
+ * 折叠面板
+ */
+import AccordionSelector from "./accordion-selector";
+export { AccordionSelector };

package/es/components/accordion-selector/index.scss

@@ -0,0 +1,5 @@
+.accordion-selector {
+    display: block;
+    background-color: #fff;
+
+}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import './address-list-item.scss';
+export interface AddressListItemProps {
+    name?: string;
+    phone?: string;
+    address?: string;
+    tag?: string;
+    selected?: boolean;
+    onClick?: (e: any) => void;
+    onRemove?: () => void;
+    onEdit?: () => void;
+}
+declare const AddressListItem: React.FC<AddressListItemProps>;
+export default AddressListItem;

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

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "phone", "name", "address", "tag", "selected", "onClick", "onRemove", "onEdit"];
+import React from 'react';
+import "./address-list-item.scss";
+import { convertChildren } from "../../utils/children-node-handle";
+var AddressListItem = function AddressListItem(_ref) {
+  var children = _ref.children,
+    phone = _ref.phone,
+    name = _ref.name,
+    address = _ref.address,
+    tag = _ref.tag,
+    selected = _ref.selected,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    onRemove = _ref.onRemove,
+    onEdit = _ref.onEdit,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _otherProps = otherProps || {};
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "address-list-item " + (selected ? 'selected' : '')
+  }, _otherProps), /*#__PURE__*/React.createElement("div", {
+    className: "address-list-item-circle",
+    onClick: onClick
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "address-list-item-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "address-list-item-header"
+  }, convertChildren(children, 'name', {
+    children: [name],
+    className: 'address-list-item-name'
+  }), convertChildren(children, 'tag', {
+    children: [tag],
+    className: 'address-list-item-tag'
+  })), convertChildren(children, 'address', {
+    children: [address],
+    className: 'address-list-item-address'
+  }), convertChildren(children, 'phone', {
+    children: [phone],
+    className: 'address-list-item-phone'
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "address-list-item-actions"
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: onRemove
+  }, "REMOVE"), /*#__PURE__*/React.createElement("button", {
+    onClick: onEdit
+  }, "EDIT"))));
+};
+AddressListItem.displayName = 'AddressListItem';
+export default AddressListItem;

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

@@ -0,0 +1,90 @@
+.address-list-item {
+    display: flex;
+    align-items: flex-start;
+    padding: 15px;
+    margin: 10px 0;
+    background-color: #fafbfc;
+    border-radius: 8px;
+
+    &-circle {
+        width: 16px;
+        height: 16px;
+        border: 1px solid #767676;
+        border-radius: 50%;
+        margin-right: 15px;
+        cursor: pointer;
+    }
+
+    &.selected &-circle {
+        position: relative;
+        background-color: #fff;
+        border-color: #ff4444;
+        
+        &::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 8.8px;
+            height: 8.8px;
+            border-radius: 50%;
+            background-color: #ff4444;
+        }
+    }
+
+    &-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+    &-header {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 8px;
+    }
+
+    &-name {
+        font-size: 14px;
+        font-weight: bold;
+        color: #222222;
+    }
+
+    &-tag {
+        background-color: #FF4C3B;
+        color: #ffffff;
+        font-size: 10px;
+        font-weight: 700;
+        padding: 1px 6px;
+        border-radius: 2px;
+        line-height: 18px !important;
+    }
+
+    &-address {
+        margin-bottom: 8px;
+        font-size: 14px;
+        color: #222222;
+    }
+
+    &-phone {
+        font-size: 14px;
+        line-height: 1.3;
+        margin: 0;
+        color: #222222;
+    }
+
+    &-actions {
+        display: flex;
+        gap: 10px;
+        margin-top: 12px;
+        button {
+            padding: 4px 10px;
+            background-color: rgba(237, 239, 244, 0.6);
+            color: #777777;
+            font-size: 14px;
+            cursor: pointer;
+            border: none !important;
+        }
+    }
+}

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import './index.scss';
+/**
+ * 数据
+ */
+interface DataProps {
+    /**
+     * 地址
+     */
+    address?: string;
+    /**
+     * 姓名
+     */
+    name?: string;
+    /**
+     * 电话
+     */
+    phone?: string;
+    /**
+     * 标签
+     */
+    tag?: string;
+}
+export interface AddressListProps {
+    /**
+     * 数据
+     */
+    dataList?: DataProps[];
+    /**
+     * 点击事件
+     * @param e
+     */
+    onClick?: (e: any) => void;
+    /**
+     * 子节点
+     */
+    children: React.ReactChild;
+    /**
+     * 选中项改变事件
+     */
+    onSelect?: (index: number) => void;
+}
+declare const AddressList: React.FC<AddressListProps>;
+export default AddressList;

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

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["dataList", "onClick", "onSelect", "children"];
+import React, { useState } from 'react';
+import "./index.scss";
+import AddressListItem from "./address-list-item";
+
+/**
+ * 数据
+ */
+
+var AddressList = function AddressList(_ref) {
+  var dataList = _ref.dataList,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    onSelect = _ref.onSelect,
+    children = _ref.children,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState(-1),
+    selectedIndex = _useState[0],
+    setSelectedIndex = _useState[1];
+  var _otherProps = otherProps || {};
+  var handleSelect = function handleSelect(index) {
+    setSelectedIndex(index);
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(index);
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "address-list"
+  }, _otherProps), dataList ? dataList.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(AddressListItem, _extends({
+      key: index,
+      onClick: function onClick() {
+        return handleSelect(index);
+      },
+      selected: selectedIndex === index,
+      onRemove: function onRemove() {
+        return console.log('remove', index);
+      },
+      onEdit: function onEdit() {
+        return console.log('edit', index);
+      }
+    }, item), children);
+  }) : /*#__PURE__*/React.createElement("div", null, "\u6682\u65E0\u6570\u636E"));
+};
+AddressList.displayName = 'AddressList';
+export default AddressList;

package/es/components/address-list/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 测试地址列表
+ */
+import AddressList from './address-list';
+export type { AddressListProps } from './address-list';
+export { AddressList };

package/es/components/address-list/index.js

@@ -0,0 +1,6 @@
+/**
+ * 测试地址列表
+ */
+
+import AddressList from "./address-list";
+export { AddressList };

package/es/components/address-list/index.scss

@@ -0,0 +1,4 @@
+.address-list {
+    display: flex;
+    flex-direction: column;
+}

package/es/components/bottom-navigation/bottom-navigation.d.ts

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import './index.scss';
-interface NavigationItem {
-    text: string;
-    icon: string;
-    selectedIcon: string;
-    pageId: string;
-}
-export interface NavigationProps {
-    itemArray: NavigationItem[];
-    selectedColor: string;
-    onClick?: (pageId: string) => void;
-}
-declare const Navigation: React.FC<NavigationProps>;
-export default Navigation;
+import * as React from 'react';
+import './index.scss';
+interface NavigationItem {
+    text: string;
+    icon: string;
+    selectedIcon: string;
+    pageId: string;
+}
+export interface NavigationProps {
+    itemArray: NavigationItem[];
+    selectedColor: string;
+    onClick?: (pageId: string) => void;
+}
+declare const Navigation: React.FC<NavigationProps>;
+export default Navigation;

package/es/components/bottom-navigation/index.d.ts

@@ -1,3 +1,3 @@
-import Navigation from './bottom-navigation';
-export type { NavigationProps } from './bottom-navigation';
-export default Navigation;
+import Navigation from './bottom-navigation';
+export type { NavigationProps } from './bottom-navigation';
+export default Navigation;

package/es/components/bottom-navigation/index.scss

@@ -1,28 +1,28 @@
-.bottom-navigation {
-  padding-bottom: env(safe-area-inset-bottom);
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  background-color: #fff;
-  z-index: 10;
-}
-.navigation-panel {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 9px 0 6px 0;
-  width: 100%;
-  box-sizing: border-box;
-  &-item {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    flex: 1;
-    .navigation-item-image {
-      margin-bottom: 3px;
-    }
-  }
-}
+.bottom-navigation {
+  padding-bottom: env(safe-area-inset-bottom);
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background-color: #fff;
+  z-index: 10;
+}
+.navigation-panel {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 9px 0 6px 0;
+  width: 100%;
+  box-sizing: border-box;
+  &-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    flex: 1;
+    .navigation-item-image {
+      margin-bottom: 3px;
+    }
+  }
+}

package/es/components/bread-crumb/bread-crumb.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import './index.scss';
+export interface BreadCrumbProps {
+    /**
+     * 数据源
+     */
+    dataList?: DataListProps[];
+    /**
+     * 面包屑项配置
+     */
+    itemList?: DataListProps[];
+}
+interface DataListProps {
+    /**
+     * 节点名称
+     */
+    name: string;
+    /**
+     * 链接
+     */
+    link: string;
+}
+declare const BreadCrumb: React.FC<BreadCrumbProps>;
+export default BreadCrumb;

package/es/components/bread-crumb/bread-crumb.js

@@ -0,0 +1,33 @@
+import _Breadcrumb from "@alifd/next/es/breadcrumb";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["dataList", "itemList"];
+import React from 'react';
+import "./index.scss";
+var BreadCrumb = function BreadCrumb(_ref) {
+  var dataList = _ref.dataList,
+    itemList = _ref.itemList,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _otherProps = otherProps || {};
+  var renderItems = function renderItems() {
+    if ((dataList === null || dataList === void 0 ? void 0 : dataList.length) > 0) {
+      return dataList.map(function (item, index) {
+        return /*#__PURE__*/React.createElement(_Breadcrumb.Item, {
+          key: index,
+          link: item.link
+        }, item.name);
+      });
+    }
+    if ((itemList === null || itemList === void 0 ? void 0 : itemList.length) > 0) {
+      return itemList.map(function (item, index) {
+        return /*#__PURE__*/React.createElement(_Breadcrumb.Item, {
+          key: index,
+          link: item.link
+        }, item.name);
+      });
+    }
+    return /*#__PURE__*/React.createElement(_Breadcrumb.Item, null, "\u6682\u65E0\u6570\u636E");
+  };
+  return /*#__PURE__*/React.createElement(_Breadcrumb, _otherProps, renderItems());
+};
+BreadCrumb.displayName = 'BreadCrumb';
+export default BreadCrumb;

package/es/components/bread-crumb/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 面包屑
+ */
+import BreadCrumb from './bread-crumb';
+export type { BreadCrumbProps } from './bread-crumb';
+export { BreadCrumb };

package/es/components/bread-crumb/index.js

@@ -0,0 +1,6 @@
+/**
+ * 面包屑
+ */
+
+import BreadCrumb from "./bread-crumb";
+export { BreadCrumb };

package/es/components/bread-crumb/index.scss

@@ -0,0 +1,4 @@
+.bread-crumb {
+  display: flex;
+  align-items: center;
+}