feat(biz): 修改穿梭框的样式和注释

2024-07-04 16:03:37 +08:00 · 2024-07-04 16:03:37 +08:00 · 9e6a87881d
commit 9e6a87881d
parent e5f69c915c
5 changed files with 190 additions and 42 deletions
--- a/packages/biz/src/treeTransfer/TreeTransfer.tsx
+++ b/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
-              theme={{
-                components: {
-                  // @ts-ignore
-                  Tree: {
-                    colorBgContainer: treeBackgroundColor
-                  }
-                }
-              }}
-            >
-              <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>
+            <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}
+            />
          )}
          {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}}
--- a/packages/biz/src/treeTransfer/demo/mingmou.tsx
+++ b/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;
--- a/packages/biz/src/treeTransfer/index.less
+++ b/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 {
--- a/packages/biz/src/treeTransfer/index.md
+++ b/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

--- a/packages/meta/src/modal/demo/basic.tsx
+++ b/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}>
-        Open Modal
-      </Button>
-      <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-      </Modal>
+      <StyleProvider transformers={[px2rem]} hashPriority='high'>
+        <Button type="primary" onClick={showModal}>
+          Open Modal
+        </Button>
+        <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+        </Modal>
+      </StyleProvider>
    </>
  );
 };