Merge branch 'feat/updateTreeTransferAdapterToMingMou' into develop

packages/biz/src/treeTransfer/TreeTransfer.tsx

@@ -6,21 +6,78 @@ import './index.less'
 const componentName = 'zhst-biz-treeTransfer'
 
 export interface TreeTransferProps {
+  /**
+   * @description 自定义标题
+   * @array []
+   */
   titles?: string[] | ReactNode[]
+  /**
+   * @description 边框
+   */
+  bordered?: boolean
+  /**
+   * @description
+   * 树的数据结构 ，参考antd-treeData
+   */
   dataSource: TreeDataNode[]
+  /**
+   * @description 树的透传参数
+   */
   treeProps?: TreeProps
+  /**
+   * 是否显示左侧树面板的搜索
+   */
   showLeftSearch?: boolean
+  /**
+   * @description 搜索的透传
+   */
   searchInputProps?: InputProps
+  /**
+   * @description 选中的对象
+   */
   targetItems: TreeDataNode[];
+  /**
+   * @description 选中对象的id
+   */
   checkedKeys: string[];
+  /**
+   * @description 是否显示搜索框边上的过滤条件
+   */
   showFilter?: boolean;
+  /**
+   * @description 是否显示左侧看板底部渲染
+   */
   showLeftPanelFooter?: boolean;
+  /**
+   * @description 左侧看板底部渲染
+   */
   leftPanelFooterRender?: ReactNode | string;
+  /**
+   * @description 是否显示右侧看板底部渲染
+   */
   showRightPanelFooter?: boolean;
+  /**
+   * 右侧看板底部渲染
+   * @param events
+   * @returns
+   */
   rightPanelFooterRender?: (events: { onOk: TreeTransferProps['onOk'], onReset: TreeTransferProps['onReset'] }) => ReactNode | string;
+  /**
+   * @description 左侧看板宽度
+   */
   leftPanelWidth?: string | number;
+  /**
+   * @description 右侧看板宽度
+   */
   rightPanelWidth?: string | number;
+  /**
+   * @description 左侧看板滚动高度
+   */
   leftPanelScrollY?: number;
+  /**
+   * @description 右侧看板滚动高度
+   */
+  middleIcon?: ReactNode | string
   rightPanelScrollY?: number;
   tabsItems?: TabsProps['items']
   showLeftTabs?: boolean
@@ -47,16 +104,16 @@ const TreeTransfer: React.FC<TreeTransferProps> = ({
   dataSource,
   treeProps,
   titles = ['可选择的范围', '已选择的范围'],
+  bordered,
   searchInputProps,
   showLeftSearch = true,
   leftPanelScrollY = 300,
-  treeBackgroundColor = '#FCFCFC',
   leftPanelWidth = 500,
   rightPanelScrollY = 422,
   rightPanelWidth = 300,
   targetItems = [],
   checkedKeys = [],
-  showFilter = true,
+  showFilter = false,
   showLeftPanelFooter,
   showRightPanelFooter = true,
   customLeftPanelContent,
@@ -64,6 +121,7 @@ const TreeTransfer: React.FC<TreeTransferProps> = ({
   rightPanelFooterRender,
   showLeftTabs,
   leftTabsProps,
+  middleIcon,
   activeTabKey,
   tabsItems = [
     {
@@ -94,12 +152,21 @@ const TreeTransfer: React.FC<TreeTransferProps> = ({
   return (
     <div className={componentName}>
       <div className={`${componentName}-left`}
-        style={{ width: typeof leftPanelWidth === 'number' ? leftPanelWidth + 'px' : leftPanelWidth }}
+        style={{
+          width: parseInt(String(leftPanelWidth)) + 'px',
+          border: bordered ? `1px solid ${token.colorBorder}` : 'unset',
+        }}
       >
         <div
           className={`${componentName}-left_card`}
+          style={{ backgroundColor: token.colorBgContainer }}
         >
-          <div className={`${componentName}-left_card_title`}>{titles?.[0]}</div>
+          <div
+            className={`${componentName}-left_card_title`}
+            style={{ backgroundColor: '#f7f7f7' }}
+          >
+            {titles?.[0]}
+          </div>
           {showLeftTabs && (
             <Tabs
               activeKey={activeTabKey}
@@ -131,28 +198,17 @@ const TreeTransfer: React.FC<TreeTransferProps> = ({
             </div>
           )}
           {customLeftPanelContent?.(dataSource) || (
-            <ConfigProvider
+            <Tree
-              theme={{
+              className={`${componentName}-left_card-tree`}
-                components: {
+              blockNode
-                  // @ts-ignore
+              checkable
-                  Tree: {
+              height={leftPanelScrollY}
-                    colorBgContainer: treeBackgroundColor
+              checkedKeys={checkedKeys}
-                  }
+              treeData={dataSource}
-                }
+              onCheck={(keys: any, info: any) => onTreeCheck?.(keys, info)}
-              }}
+              onSelect={(keys: any, info: any) => onTreeSelect?.(keys, info)}
-            >
+              {...treeProps}
-              <Tree
+            />
-                className={`${componentName}-left_card-tree`}
-                blockNode
-                checkable
-                height={leftPanelScrollY}
-                checkedKeys={checkedKeys}
-                treeData={dataSource}
-                onCheck={(keys: any, info: any) => onTreeCheck?.(keys, info)}
-                onSelect={(keys: any, info: any) => onTreeSelect?.(keys, info)}
-                {...treeProps}
-              />
-            </ConfigProvider>
           )}
           {showLeftPanelFooter && (
             <div className={`${componentName}-left_card-footer`}>
@@ -162,15 +218,22 @@ const TreeTransfer: React.FC<TreeTransferProps> = ({
         </div>
       </div>
       <div className={`${componentName}-middle`}>
-        <IconFont icon="icon-zhankai" />
+        {middleIcon || <IconFont icon="icon-zhankai" />}
       </div>
       <div className={`${componentName}-right`}
-        style={{ width: typeof rightPanelWidth === 'number' ? rightPanelWidth + 'px' : rightPanelWidth }}
+        style={{
+          width: parseInt(String(rightPanelWidth)) + 'px',
+          border: bordered ? `1px solid ${token.colorBorder}` : 'unset',
+        }}
       >
         <div
           className={`${componentName}-right_card`}
+          style={{ backgroundColor: token.colorBgContainer }}
         >
-          <div className={`${componentName}-right_card_title`} >{titles?.[1]}</div>
+          <div
+            className={`${componentName}-right_card_title`}
+            style={{ backgroundColor: '#f7f7f7' }}
+          >{titles?.[1]}</div>
           <div
             className={`${componentName}-right_card__items`}
             style={{ height: typeof rightPanelScrollY === 'number' ? rightPanelScrollY + 'px' : rightPanelScrollY}}

packages/biz/src/treeTransfer/demo/mingmou.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { TreeTransfer } from '@zhst/biz';
+import { TreeDataNode } from 'antd';
+import { TreeProps } from 'antd/lib';
+import { boxDataSource } from './mock'
+
+const App: React.FC = () => {
+  const [targetItems, setTargetItems] = useState<TreeDataNode[]>([]);
+  const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
+
+  const onTreeCheck: TreeProps['onCheck'] = (keys: any, info) => {
+    let _targetItems: TreeDataNode[] = []
+    setCheckedKeys(keys)
+    info.checkedNodes.forEach(o => {
+      o.isLeaf && _targetItems.push(o)
+    })
+    setTargetItems(_targetItems)
+  }
+
+  /**
+   * 删除
+   * @param key
+   * @param param1
+   */
+  const onItemDelete = (key: any, { keys = [] }: any) => {
+    setCheckedKeys(pre => {
+      const newKeys = pre.filter(_key => _key !== key)
+      console.log('newKeys', newKeys, keys)
+      return newKeys
+    })
+    setTargetItems(pre => pre.filter(o => o.key !== key))
+  }
+
+  const onOk = (data: any) => {
+    console.log('data', data)
+  }
+
+  const onReset = () => {
+    setCheckedKeys([])
+    setTargetItems([])
+  }
+
+  return (
+    <div style={{ padding: 24 }}>
+      <TreeTransfer
+        leftPanelWidth={800}
+        rightPanelWidth={500}
+        bordered
+        titles={[
+          <div style={{ textAlign: 'left' }}>可选择的范围(123)</div>,
+          (
+            <div onClick={onReset} style={{ textAlign: 'left' }}>已选范围(123)<a style={{ float: 'right' }}>清空</a></div>
+          ),
+        ]}
+        showRightPanelFooter={false}
+        dataSource={boxDataSource}
+        targetItems={targetItems}
+        checkedKeys={checkedKeys}
+        onTreeCheck={onTreeCheck}
+        onItemDelete={onItemDelete}
+        onOk={onOk}
+        onReset={onReset}
+        searchInputProps={{
+          onChange: e => console.log('123123')
+        }}
+      />
+    </div>
+  )
+};
+
+export default App;

packages/biz/src/treeTransfer/index.less

@@ -2,6 +2,8 @@
   display: flex;
   align-items: center;
   &-left {
+    border-radius: 8px;
+    overflow: hidden;
     &_card {
       display: flex;
       flex-direction: column;
@@ -33,13 +35,17 @@
 
       &_search {
         display: flex;
-        margin: 8px;
+        margin: 16px 20px;
         &_input {
-          margin-right: 8px;
+          flex: 1;
+        }
+        &_filters {
+          margin-left: 8px;
         }
       }
 
       &-tree {
+        margin: 0 20px;
       }
 
       &-footer {
@@ -60,6 +66,8 @@
   }
 
   &-right {
+    border-radius: 8px;
+    overflow: hidden;
     &_card {
       position: relative;
       min-height: 544px;
@@ -74,10 +82,8 @@
 
       &__items {
         width: 100%;
-        height: calc(100% - 105px);
         font-size: 14px;
         overflow-y: scroll;
-        max-height: 422px;
         box-sizing: border-box;
 
         &::-webkit-scrollbar {

packages/biz/src/treeTransfer/index.md

@@ -16,6 +16,7 @@ group:
 <code src="./demo/withFilter.tsx">加载filter按钮</code>
 <code src="./demo/withMap.tsx">和地图组件搭配使用</code>
 <code src="./demo/withModal.tsx">和Modal组合使用</code>
+<code src="./demo/mingmou.tsx">明眸同款</code>
 
 ## API
 

packages/meta/src/modal/demo/basic.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { Button, Modal } from 'antd';
+import { Button, Modal } from '@zhst/meta';
+import { px2remTransformer, StyleProvider } from '@ant-design/cssinjs';
 
 const App: React.FC = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -16,16 +17,22 @@ const App: React.FC = () => {
     setIsModalOpen(false);
   };
 
+  const px2rem = px2remTransformer({
+    rootValue: 12, // 32px = 1rem; @default 16
+  });
+
   return (
     <>
-      <Button type="primary" onClick={showModal}>
+      <StyleProvider transformers={[px2rem]} hashPriority='high'>
-        Open Modal
+        <Button type="primary" onClick={showModal}>
-      </Button>
+          Open Modal
-      <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
+        </Button>
-        <p>Some contents...</p>
+        <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
-        <p>Some contents...</p>
+          <p>Some contents...</p>
-        <p>Some contents...</p>
+          <p>Some contents...</p>
-      </Modal>
+          <p>Some contents...</p>
+        </Modal>
+      </StyleProvider>
     </>
   );
 };