@zgfe/business-lib 1.0.0-beta.4 → 1.0.1-beta.0

package/es/analysisLayout/demo/index.js

@@ -1,11 +1,14 @@
 import React from 'react';
 import { BizAnalysisLayout } from '@zgfe/business-lib';
+import { Button } from 'antd';
 import './index.less';
 
 var LeftContent = function LeftContent() {
   return /*#__PURE__*/React.createElement("div", {
     className: "left-content"
-  }, "left");
+  }, "left", /*#__PURE__*/React.createElement(Button, {
+    type: "primary"
+  }, "\u6309\u94AE"));
 };
 
 var Footer = function Footer() {

package/es/analysisLayout/index.d.ts

@@ -1,40 +1,13 @@
 import React from 'react';
 import './index.less';
 declare type AnalysisLayoutProps = {
-    /**
-     * @description    右侧内容模块
-     * @default         -
-     */
     children?: React.ReactNode;
-    /**
-     * @description    左侧内容模块
-     * @default         -
-     */
     leftPanel?: React.ReactNode;
-    /**
-     * @description    左侧底部内容模块
-     * @default         -
-     */
     leftHandle?: React.ReactNode;
-    /**
-     * @description    是否固定
-     * @default         false
-     */
     isFixed?: boolean | false;
-    /**
-     * @description    左侧默认宽度
-     * @default         580
-     */
+    className?: string;
     defaultLeftWidth?: number;
-    /**
-     * @description    左侧最小宽度
-     * @default         320
-     */
     minWidthOfLeft?: number;
-    /**
-     * @description    左侧最大宽度
-     * @default         320
-     */
     maxWidthOfLeft?: number;
 };
 declare const BizAnalysisLayout: React.FC<AnalysisLayoutProps>;

package/es/analysisLayout/index.js

@@ -26,7 +26,8 @@ var BizAnalysisLayout = function BizAnalysisLayout(props) {
       _props$minWidthOfLeft = props.minWidthOfLeft,
       minWidthOfLeft = _props$minWidthOfLeft === void 0 ? 320 : _props$minWidthOfLeft,
       _props$maxWidthOfLeft = props.maxWidthOfLeft,
-      maxWidthOfLeft = _props$maxWidthOfLeft === void 0 ? 580 : _props$maxWidthOfLeft;
+      maxWidthOfLeft = _props$maxWidthOfLeft === void 0 ? 580 : _props$maxWidthOfLeft,
+      className = props.className;
 
   var _useState = useState(defaultLeftWidth),
       _useState2 = _slicedToArray(_useState, 2),
@@ -40,24 +41,25 @@ var BizAnalysisLayout = function BizAnalysisLayout(props) {
 
   var initX = 0;
   var isDrag = false;
+  useEffect(function () {
+    return function () {
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+  }, []);
 
-  var handleMouseDown = function handleMouseDown(e) {
-    var target = e.target || e.srcElement; // clientX: 相对文档的水平坐标
-    // 对象相对于版面或由 offsetParent 左侧位置
-
+  var onMouseDown = function onMouseDown(e) {
+    var target = e.target || e.srcElement;
     initX = e.clientX - target.offsetLeft;
     isDrag = !isDrag;
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
   };
 
-  var handleMouseMove = function handleMouseMove(e) {
+  var onMouseMove = function onMouseMove(e) {
     if (isDrag) {
       var x = e.clientX - initX;
 
       if (x < minWidthOfLeft) {
-        // 小于最小宽度，等于最小宽度
-        // 小于250时，收起
         if (x < 250) {
           setShowLeft(false);
           x = 56;
@@ -72,30 +74,20 @@ var BizAnalysisLayout = function BizAnalysisLayout(props) {
     }
   };
 
-  var handleMouseUp = function handleMouseUp() {
+  var onMouseUp = function onMouseUp() {
     isDrag = false;
-    document.removeEventListener('mousemove', handleMouseMove);
-  };
-
-  useEffect(function () {
-    return function () {
-      // 相当于destroy，移除mouseup监听
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-  }, []); // 展开左侧内容
-
-  var toOpen = function toOpen() {
-    setShowLeft(true);
-    setWidth(maxWidthOfLeft);
+    document.removeEventListener('mousemove', onMouseMove);
   };
 
-  var toPickup = function toPickup() {
-    setShowLeft(false);
-    setWidth(56);
-  };
+  function onCollapse() {
+    setShowLeft(function (show) {
+      setWidth(show ? 56 : maxWidthOfLeft);
+      return !show;
+    });
+  }
 
   return /*#__PURE__*/React.createElement("div", {
-    className: "biz-layout-container"
+    className: "biz-layout-container ".concat(className)
   }, /*#__PURE__*/React.createElement("div", {
     className: "biz-layout-left",
     style: {
@@ -108,37 +100,35 @@ var BizAnalysisLayout = function BizAnalysisLayout(props) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "biz-layout-panel"
-  }, leftPanel), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "biz-left-content"
+  }, leftPanel)), /*#__PURE__*/React.createElement("div", {
     className: "biz-layout-bottom"
   }, leftHandle)), showLeft ? /*#__PURE__*/React.createElement(Tooltip, {
-    title: function title() {
-      return '折叠筛选面板';
-    },
+    title: "\u6298\u53E0\u7B5B\u9009\u9762\u677F",
     color: "#242541",
-    key: 'pickup'
+    key: "pickup"
   }, /*#__PURE__*/React.createElement("div", {
     className: "biz-layout-pickup",
-    onClick: toPickup
+    onClick: onCollapse
   }, /*#__PURE__*/React.createElement(IconFont, {
     className: "biz-layout-pickup-icon",
     type: 'icon-zhedie'
   }))) : /*#__PURE__*/React.createElement(Tooltip, {
-    title: function title() {
-      return '展开筛选面板';
-    },
+    title: "\u5C55\u5F00\u7B5B\u9009\u9762\u677F",
     placement: "right",
     color: "#242541",
-    key: 'open'
+    key: "open"
   }, /*#__PURE__*/React.createElement(IconFont, {
     className: "biz-layout-open",
-    onClick: toOpen,
-    type: 'icon-zhankai'
+    onClick: onCollapse,
+    type: "icon-zhankai"
   })), /*#__PURE__*/React.createElement("div", {
     className: "biz-layout-handler",
     style: {
       pointerEvents: !isFixed && showLeft ? 'auto' : 'none'
     },
-    onMouseDown: handleMouseDown
+    onMouseDown: onMouseDown
   })), /*#__PURE__*/React.createElement("div", {
     className: "biz-layout-right",
     style: {

package/es/analysisLayout/index.less

@@ -5,8 +5,7 @@
   display: flex;
   width: 100%;
   height: 100%;
-  min-height: 900px;
-  overflow-y: auto;
+  overflow: hidden;
 
   .biz-layout-left {
     position: relative;
@@ -35,6 +34,9 @@
       height: calc(100% - 30px);
       padding: @searchPadding;
       overflow: auto;
+      .biz-left-content {
+        min-height: 600px;
+      }
     }
 
     .biz-layout-bottom {
@@ -64,13 +66,13 @@
   .biz-layout-right {
     box-sizing: border-box;
     padding: @contentPadding;
-    overflow-x: auto;
-    overflow-y: hidden;
+    overflow: auto;
     background-color: #fff;
 
     .biz-right-content {
       min-width: 600px;
       height: 100%;
+      min-height: 600px;
     }
   }
 }
@@ -114,7 +116,7 @@
   left: 16px;
   color: @layoutIconColor;
   font-size: 24px;
-
+  cursor: pointer;
   &:hover {
     color: @hoverColor;
   }

package/es/assets/styles/chunks.less

@@ -0,0 +1,143 @@
+// !!!!!!!!!!!!!!!!!!!!!!!!!!
+// 用于存放公共样式片段,公共样式不可直接当做class来使用
+// 所有代码片段，命名以双下划线为前缀
+// !!!!!!!!!!!!!!!!!!!!!!!!!!
+@import './variable.less';
+
+// 通用hover样式，适用于下拉选项等
+.__default-hover {
+  color: @primary-color;
+  background: @primary-1;
+  border-color: @primary-color;
+  cursor: pointer;
+}
+
+// focus 样式
+.__default-focused {
+  background-color: #fff;
+  border-color: @primary-color;
+  box-shadow: 0 0 0 4px @primary-1;
+}
+
+// 下拉组件操作栏样式
+.__select-handle {
+  padding: @padding-xss;
+  border: 1px solid @border-color-base;
+  border-radius: @border-radius-small;
+}
+
+// 下拉组件展开panel样式
+.__select-panel {
+  padding: @padding-xs;
+  background-color: #fff;
+  border-radius: @border-radius-normal;
+  box-shadow: @box-shadow-base;
+}
+
+// 下拉选项样式
+.__select-option {
+  height: @option-height;
+  padding: 0 @padding-sm;
+  line-height: @option-height;
+  border-radius: @border-radius-normal;
+  .__default-overflow();
+
+  &:hover {
+    .__default-hover();
+  }
+
+  &.active {
+    color: #fff;
+    background: @primary-color;
+  }
+
+  &.disabled {
+    color: @disabled-color;
+    cursor: not-allowed;
+
+    &:hover {
+      background: none;
+    }
+  }
+}
+
+// 暂无数据样式，目前用于下拉框
+.__select-nodata {
+  height: @option-height;
+  padding: 0 16px;
+  line-height: @option-height;
+  border-radius: @border-radius-normal;
+}
+
+// 危险操作hover样式
+.__error-hover {
+  color: @error-color;
+  font-size: @font-size-lg;
+  background-color: @red-2;
+  cursor: pointer;
+}
+
+// 按钮禁用状态
+.__default-disabled {
+  color: @disabled-color;
+  cursor: not-allowed;
+
+  &:hover {
+    background-color: none;
+  }
+}
+
+// 禁用状态
+.__disable {
+  color: @disabled-color;
+  background-color: @disabled-bg;
+  cursor: not-allowed;
+}
+
+// 超过长度用...表示
+.__default-overflow {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+// 下拉框默认样式
+.__select-default {
+  height: @height-lg;
+  line-height: @height-lg;
+  background-color: @background-color-base;
+  border: 1px solid @background-color-base;
+  border-radius: @border-radius-small;
+  cursor: pointer;
+  .__default-overflow();
+
+  &:hover:not(.disable) {
+    background-color: @background-color-base;
+    border-color: @primary-color;
+    box-shadow: none;
+  }
+
+  &.active:not(.disable) {
+    background-color: @white;
+    border-color: @primary-color;
+    box-shadow: @box-shadow-form;
+  }
+}
+
+// 下拉框常用样式
+.__select-normal-secondary {
+  height: @height-base;
+  line-height: @height-base;
+  background-color: @white;
+  border: 1px solid @border-color-base;
+  border-radius: @border-radius-small;
+
+  &:not(.disable) {
+    &:hover,
+    &.active {
+      .__default-hover();
+      border-color: @border-color-base;
+      box-shadow: none;
+    }
+  }
+}

package/es/assets/styles/inner.less

@@ -0,0 +1,3 @@
+// 内部所有组件可直接引用在源码中
+@import './chunks.less';
+@import './variable.less';