plain-design 1.0.0-beta.112 → 1.0.0-beta.113

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.112",
+  "version": "1.0.0-beta.113",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

package/src/packages/components/Table/standard/PlcTree/RenderPlcTreeNode.tsx

@@ -25,6 +25,7 @@ export const RenderPlcTreeNode = designComponent({
     const { refs, onRef } = useRefs({ el: iHTMLDivElement });
 
     const isLeaf = computed(() => props.treeNode.isLeaf());
+    const leafIcon = computed(() => props.treeNode.leafIcon());
     const checkStatus = cacheComputed(() => props.treeNode.checkStatus());
     const isExpanded = cacheComputed(() => props.treeNode.isExpanded());
 
@@ -63,7 +64,7 @@ export const RenderPlcTreeNode = designComponent({
 
     return () => {
       const { treeNode, tableNode } = props;
-      const { leafIcon, folderExpandIcon, folderCollapseIcon } = props.treeCore.props;
+      const { folderExpandIcon, folderCollapseIcon } = props.treeCore.props;
       return (
         <div className={getComponentCls('plc-tree-node')} ref={onRef.el}>
           <div className="tree-node-operator">
@@ -74,7 +75,7 @@ export const RenderPlcTreeNode = designComponent({
               {treeNode.isLoading() ?
                 <Loading type="gamma"/> :
                 <Icon
-                  icon={isLeaf.value || treeNode.empty ? leafIcon : isExpanded.value ? folderExpandIcon : folderCollapseIcon}
+                  icon={isLeaf.value || treeNode.empty ? leafIcon.value : isExpanded.value ? folderExpandIcon : folderCollapseIcon}
                 />}
             </div>
             {props.treeCore.props.multiple && (

package/src/packages/components/Tree/RenderTreeNode.tsx

@@ -44,6 +44,7 @@ export const RenderTreeNode = designComponent({
     const checkStatus = cacheComputed(() => props.treeNode.checkStatus());
     const isExpanded = cacheComputed(() => props.treeNode.isExpanded());
     const isLeaf = cacheComputed(() => props.treeNode.isLeaf());
+    const leafIcon = computed(() => props.treeNode.leafIcon());
 
     const connectorClassesList = computed(() => {
 
@@ -124,7 +125,7 @@ export const RenderTreeNode = designComponent({
               props.treeNode.isLoading() ?
                 <Loading type="gamma"/> :
                 <Icon
-                  icon={props.treeNode.isLeaf() || props.treeNode.empty ? tree.props.leafIcon : isExpanded.value ? tree.props.folderExpandIcon : tree.props.folderCollapseIcon}
+                  icon={props.treeNode.isLeaf() || props.treeNode.empty ? leafIcon.value : isExpanded.value ? tree.props.folderExpandIcon : tree.props.folderCollapseIcon}
                 />
             }
           </div>

package/src/packages/components/TreeCore/TreeCore.type.tsx

@@ -70,7 +70,7 @@ export interface iTreeProps {
   /*判断节点是否可以放置*/
   isAllowDroppable?: (startNode: iTreeNode, moveNode: iTreeNode, dropType: typeof eTreeDropType.TYPE) => boolean | void,
   /*叶子节点图标*/
-  leafIcon: string,
+  leafIcon: string | ((treeNode: iTreeNode) => string),
   /*节点收起时显示图标*/
   folderCollapseIcon: string,
   /*节点展开时显示的图标*/

package/src/packages/components/TreeCore/createTreeNode.tsx

@@ -112,6 +112,8 @@ export function createTreeNode(
     /*默认情况下，没有设置isLeaf来判断节点是否为叶子节点的话，则判断是否存在有子节点数据来判断是否为叶子节点，如果子节点数据是一个空数组也视为非叶子节点*/
     return !props.isLeaf ? !childrenData() : props.isLeaf(data);
   };
+  /*叶子节点的图标*/
+  const leafIcon = () => {return typeof props.leafIcon === "string" ? props.leafIcon : props.leafIcon(data);};
   /*是否已经选中*/
   const checkStatus = (): typeof CheckboxStatus.TYPE => getCheckStatus()[key];
   /*是否可选中*/
@@ -194,6 +196,7 @@ export function createTreeNode(
     setChildrenData,
     children,
     isLeaf,
+    leafIcon,
     checkStatus,
     isCheckAble,
     isExpanded,
@@ -225,6 +228,7 @@ export interface iTreeNode {
   setChildrenData: (childrenData: any[] | null | undefined) => void,      // 设置节点子数据
   children: () => iTreeNode[],                                            // 子节点
   isLeaf: () => boolean,                                                  // 节点是否为叶子节点
+  leafIcon: () => string,                                                 // 叶子节点的图标
   checkStatus: () => typeof CheckboxStatus.TYPE,                          // 节点的选中状态，check选中，uncheck未选中，minus半选
   isCheckAble: () => boolean,                                             // 节点是否可以选中
   isExpanded: () => boolean,                                              // 节点是否已经展开