feat: tip组件封装

.umirc.js

@@ -92,6 +92,7 @@ export default {
           'ExportExcel',
           'DatePickerCustom',
           'LoadBox',
+          'TipTool',
         ],
       },
       {

package.json

@@ -88,7 +88,7 @@
     "jest-fetch-mock": "^3.0.3",
     "jsdom": "^16.4.0",
     "jsdom-global": "^3.0.2",
-    "lerna": "^3.20.2",
+    "lerna": "^3.22.1",
     "lerna-changelog": "^1.0.1",
     "less-loader": "^8.0.0",
     "lint-staged": "^10.0.2",
@@ -300,5 +300,6 @@
       "webpack": false,
       "running": false
     }
-  ]
+  ],
+  "name": "wisdom-components"
 }

packages/base-components/TipTool/README.md

+# `TipTool`
+
+> TODO: description
+
+## Usage
+
+```
+const tipTool = require('./index');
+
+// TODO: DEMONSTRATE API
+```

packages/base-components/TipTool/package.json

+{
+  "name": "@wisdom-components/tiptool",
+  "version": "1.0.0",
+  "description": "> TODO: description",
+  "author": "qinwenhai <939637841@qq.com>",
+  "homepage": "",
+  "license": "ISC",
+  "main": "lib/index.js",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "registry": "https://g.civnet.cn:4873/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://g.civnet.cn:8443/ReactWeb5/wisdom-components.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21"
+  }
+}

packages/base-components/TipTool/src/TipTool.md

+---
+title: TipTool - TipTool UI组件
+nav:
+  title: 基础组件
+  path: /components
+group:
+  path: /
+---
+
+# TipTool 面板
+
+## 代码演示
+
+<code src="./demos/index.js">
+
+## content
+
+| 参数                   | 说明       | 类型   | 默认值 |
+| ---------------------- | ---------- | ------ | ------ |
+| style                  | tip 框大小 | object |        |
+| style.minWidth         | 最小宽度   | string | 600px  |
+| style.minHeight        | 最小高度   | string | 300px  |
+| style.maxWidth         | 最大宽度   | string | 800px  |
+| style.maxHeight        | 最大高度   | string | 400px  |
+| dataList               | 数据集合   | object |        |
+| dataList.headerSetting | 头部数据   | object | -      |
+| dataList.leftSetting   | 中部数据   | array  | -      |
+| dataList.events        | 事件       | object | -      |
+
+## 事件
+
+| 名称         | 描述         |
+| ------------ | ------------ |
+| scaleChange  | 缩放         |
+| windowChange | 窗口大小调整 |
+| smallChange  | 窗口最小化   |
+| tipClose     | 关闭         |

packages/base-components/TipTool/src/header/index.js

+import {
+  CloseOutlined,
+  PlusCircleOutlined,
+  ZoomOutOutlined,
+  MinusCircleOutlined,
+  MinusOutlined,
+  MonitorOutlined,
+} from '@ant-design/icons';
+import { useState } from 'react';
+import './index.less';
+const Header = (props) => {
+  const [showIcon, setShowIcon] = useState(true);
+  const [windowStatus, setWindowStatus] = useState(true);
+  const { headerSetting, events, changeStyle, changeScale } = props;
+  const { scaleChange, windowChange, smallChange, tipClose } = events;
+  const getWinChange = (icon) => {
+    let name;
+    setShowIcon(!icon);
+    showIcon ? (name = 'large') : (name = 'middle');
+    changeStyle({ name });
+    windowChange({ name });
+  };
+  const getWindowStatus = (flag) => {
+    setWindowStatus(flag);
+    changeScale(flag);
+    smallChange({ flag });
+  };
+  const iconStyle = () => {
+    if (windowStatus) {
+      return {
+        icon: { display: 'inline-block' },
+        other: { width: '70%' },
+        header: { width: '30%' },
+      };
+    } else {
+      return { icon: { display: 'none' }, other: { width: '0%' }, header: { width: '100%' } };
+    }
+  };
+  return (
+    <div className="Tiphead">
+      <div
+        onClick={getWindowStatus.bind(this, true)}
+        className="TipheadTitle"
+        style={iconStyle().header}
+      >
+        <span>{headerSetting.layerName}</span>
+        <span>-</span>
+        <span>{headerSetting.oid}</span>
+      </div>
+
+      <div className="iconList" style={iconStyle().other}>
+        <div style={iconStyle().icon}>
+          <span className="icons" title="缩放" onClick={scaleChange}>
+            <ZoomOutOutlined />
+            <span className="words">缩放至</span>
+          </span>
+          <span className="icons" onClick={getWinChange.bind(this, showIcon)}>
+            {showIcon ? <PlusCircleOutlined /> : <MinusCircleOutlined />}
+          </span>
+          <span className="icons" onClick={getWindowStatus.bind(this, false)}>
+            <MinusOutlined />
+          </span>
+        </div>
+        <span className="icons" onClick={tipClose}>
+          <CloseOutlined />
+        </span>
+      </div>
+    </div>
+  );
+};
+export { Header };

packages/base-components/TipTool/src/header/index.less

+.icons {
+  margin-right: 10px;
+  margin-right: 8px;
+  color: #fff;
+  font-size: 20px;
+  cursor: pointer;
+}
+.Tiphead {
+  display: flex;
+  width: 100%;
+  min-height: 45px;
+  background-color: #001529;
+  .TipheadTitle {
+    cursor: pointer;
+  }
+  > div:nth-child(1) {
+    display: flex;
+    align-items: center;
+    width: 30%;
+    overflow: hidden;
+    color: white;
+    font-size: 20px;
+    white-space: nowrap;
+    text-indent: 5px;
+    text-overflow: ellipsis;
+  }
+  .iconList {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    width: 70%;
+  }
+}
+.words {
+  font-size: 16px;
+  vertical-align: text-bottom;
+}

packages/base-components/TipTool/src/index.js

+import React, { useContext, useState } from 'react';
+import { Header } from './header';
+import { LeftList } from './leftList';
+import './index.less';
+
+const TipTool = (props) => {
+  const { style } = props;
+  const { leftSetting, headerSetting, events } = props.dataList;
+  const data = [
+    {
+      name: 'middle',
+      width: style.minWidth ?? '200px',
+      height: style.minHeight ?? '40px',
+      active: true,
+    },
+    {
+      name: 'large',
+      width: style.maxWidth ?? '200px',
+      height: style.maxHeight ?? '40px',
+      active: false,
+    },
+  ];
+  const scale = {
+    name: 'small',
+    width: '200px',
+    height: '40px',
+    active: true,
+  };
+  const [styleState, setStyleState] = useState(data);
+  const [styleScale, setScaleState] = useState(scale);
+  const changeStyle = ({ name, flag }) => {
+    let data = styleState.slice();
+    data.map((item) => {
+      if (name == item.name) {
+        item.active = true;
+      } else {
+        item.active = false;
+      }
+    });
+    setStyleState(data);
+  };
+
+  const changeScale = (flag) => {
+    let obj = { ...styleScale };
+    obj.active = flag;
+    setScaleState(obj);
+  };
+
+  const computedStyle = () => {
+    if (!styleScale.active) {
+      return { width: styleScale.width, height: styleScale.height };
+    } else {
+      return styleState
+        .filter((item) => item.active)
+        .map(({ width, height }) => {
+          return { width, height };
+        })[0];
+    }
+  };
+  const displayComput = () => {
+    if (styleScale.active) {
+      return { display: 'inline-block' };
+    } else {
+      return { display: 'none' };
+    }
+  };
+  return (
+    <div className="Tipwripconter" style={computedStyle()}>
+      <Header
+        headerSetting={headerSetting}
+        events={events}
+        changeStyle={changeStyle}
+        changeScale={changeScale}
+      />
+      <div className="TipAll" style={displayComput()}>
+        <div className="Tipconter">
+          <div className="Tipleft">
+            <LeftList leftSetting={leftSetting} />
+          </div>
+        </div>
+        <div className="tipfooter"></div>
+      </div>
+    </div>
+  );
+};
+
+export default TipTool;

packages/base-components/TipTool/src/index.less

+.Tipwripconter {
+  width: 100%;
+  height: 100%;
+  .TipAll {
+    height: 100%;
+  }
+  .Tipconter {
+    display: flex;
+    width: 100%;
+    height: 85%;
+    background-color: white;
+    .Tipleft {
+      width: 100%;
+      height: 100%;
+      background-color: #f5f6f7;
+    }
+  }
+  .tipfooter {
+    position: relative;
+    width: 100%;
+    height: 10px;
+    .tipfooterar {
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: 0;
+      height: 0;
+      margin: auto;
+      background-color: 'red';
+      border: 10px solid white;
+      border-right-color: transparent;
+      border-bottom-color: transparent;
+      border-left-color: transparent;
+    }
+  }
+}

packages/base-components/TipTool/src/leftList/index.js

+import './index.less';
+import { FileTextOutlined, PlaySquareOutlined } from '@ant-design/icons';
+import { TableContent } from '../tableContent';
+import { Tabs } from 'antd';
+const { TabPane } = Tabs;
+const LeftList = (props) => {
+  const { leftSetting } = props;
+  return (
+    <div className="ullist">
+      <Tabs tabPosition="left">
+        {leftSetting.map((item, index) => {
+          if (!item.active) return;
+          if (item.name == 'dataList') {
+            return (
+              <TabPane
+                tab={
+                  <div>
+                    <FileTextOutlined />
+                  </div>
+                }
+                key={index}
+              >
+                <TableContent data={item.data} />
+              </TabPane>
+            );
+          } else if (item.name == 'media') {
+            return (
+              <TabPane
+                tab={
+                  <div>
+                    <PlaySquareOutlined />
+                  </div>
+                }
+                key="2"
+              >
+                多媒体
+              </TabPane>
+            );
+          }
+        })}
+      </Tabs>
+    </div>
+  );
+};
+export { LeftList };

packages/base-components/TipTool/src/leftList/index.less

+.ullist {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  .ant-tabs {
+    height: 100%;
+    .ant-tabs-content-holder {
+      background-color: #fff;
+    }
+  }
+  .ant-tabs-tab {
+    display: flex;
+    justify-content: center;
+  }
+  .ant-tabs-tab .anticon {
+    margin-right: 0px;
+    font-size: 16px;
+  }
+  .ant-tabs-left > .ant-tabs-content-holder > .ant-tabs-content > .ant-tabs-tabpane {
+    padding-left: 0;
+  }
+  .ant-tabs-left > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab {
+    margin: 5px 0 0 0;
+  }
+  .ant-tabs-tab-active {
+    background-color: #ebf3fe;
+  }
+  .ant-tabs-content {
+    height: 100%;
+  }
+}

packages/base-components/TipTool/src/tableContent/index.js

+import './index.less';
+import { getVisibleAttribues } from '../demos';
+const TableContent = (props) => {
+  const { data } = props;
+  const handleData = () => {
+    return getVisibleAttribues([data.attributes], data.fields);
+  };
+  let tableArr = handleData()[0].show;
+  return (
+    <div className="contentAll">
+      <div className="wriper">
+        <div className="header">
+          <span>属性列表</span>
+        </div>
+        <div className="contaner">
+          <ul>
+            {Object.getOwnPropertyNames(tableArr).map((key, index) => {
+              return (
+                <li key={index}>
+                  <span title={key}>{key}</span>
+                  <span title={tableArr[key][1]}>{tableArr[key][1]}</span>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+        <div className="footer"></div>
+      </div>
+    </div>
+  );
+};
+export { TableContent };

packages/base-components/TipTool/src/tableContent/index.less

+.wriper .contaner::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+.wriper .contaner::-webkit-scrollbar-thumb {
+  background: #1685ff;
+  border-radius: 10px;
+}
+
+.wriper .contaner::-webkit-scrollbar-track {
+  background: #2c4154;
+  border-radius: 10px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+}
+.contentAll {
+  width: 100%;
+  height: 100%;
+}
+.wriper {
+  width: 100%;
+  height: 100%;
+  .header {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 10%;
+    margin-bottom: 5px;
+    padding-left: 15px;
+    font-size: 16px;
+  }
+  .contaner {
+    width: 100%;
+    height: 90%;
+    overflow: scroll;
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+      margin: 0;
+      padding: 0 15px;
+      list-style: none;
+      li {
+        display: flex;
+        width: 50%;
+        line-height: 30px;
+        border-bottom: 1px solid #ccc;
+        > span:nth-child(1) {
+          flex: 1;
+          overflow: hidden;
+          white-space: nowrap;
+          text-align: center;
+          text-overflow: ellipsis;
+          background-color: #f2f5fc;
+        }
+        > span:nth-child(2) {
+          flex: 2;
+          padding-left: 5px;
+        }
+        &:nth-child(1) {
+          border-top: 1px solid #ccc;
+        }
+        &:nth-child(2) {
+          border-top: 1px solid #ccc;
+        }
+        &:nth-child(2n) {
+          border-right: 1px solid #ccc;
+        }
+        &:nth-child(2n + 1) {
+          border-right: 1px solid #ccc;
+          border-left: 1px solid #ccc;
+        }
+      }
+    }
+  }
+}