@zgfe/business-lib 1.0.0-beta.1 → 1.0.0-beta.2

package/es/commonStyle/theme.less

@@ -8,8 +8,10 @@
   &.small {
     .ant-select-selector {
       height: @inputHeight;
+      line-height: @inputHeight;
 
-      .ant-select-selection-item {
+      .ant-select-selection-item,
+      .ant-select-selection-placeholder {
         line-height: @inputHeight;
       }
     }
@@ -20,7 +22,8 @@
       height: @inputHeightNormal;
       line-height: @inputHeightNormal;
 
-      .ant-select-selection-item {
+      .ant-select-selection-item,
+      .ant-select-selection-placeholder {
         line-height: @inputHeightNormal;
       }
     }
@@ -29,8 +32,10 @@
   &.large {
     .ant-select-selector {
       height: @inputHeightLarge;
+      line-height: @inputHeightLarge;
 
-      .ant-select-selection-item {
+      .ant-select-selection-item,
+      .ant-select-selection-placeholder {
         line-height: @inputHeightLarge;
       }
     }
@@ -54,6 +59,35 @@
     }
   }
 
+  &:not(.ant-select-customize-input).biz-borderless {
+    .ant-select-selector {
+      background-color: @grayColor;
+      border-color: @grayColor;
+    }
+
+    .ant-select-arrow {
+      display: none;
+    }
+
+    &.ant-select-focused:not(.ant-select-disabled, .biz-borderless),
+    &:not(.ant-select-disabled, .ant-select-customize-input, .biz-borderless):hover {
+      .ant-select-selector {
+        color: @themeColor;
+        background: @hoverBgColor;
+        border-color: @hoverBgColor;
+        box-shadow: none;
+
+        .ant-select-selection-item {
+          color: @themeColor;
+
+          span {
+            color: @themeColor;
+          }
+        }
+      }
+    }
+  }
+
   &:not(.ant-select-customize-input) .ant-select-selector {
     padding: @inputPadding;
     background-color: #fff;
@@ -66,19 +100,23 @@
   &.ant-select-borderless:hover,
   &.ant-select-borderless.ant-select-focused:not(.ant-select-disabled) {
     .ant-select-selector {
-      color: @themeColor !important;
+      color: @themeColor;
       background: @hoverBgColor;
       border-color: transparent;
       box-shadow: none;
 
       .ant-select-selection-item {
         color: @themeColor;
+
+        span {
+          color: @themeColor;
+        }
       }
     }
 
     .ant-select-arrow {
       display: inline-block;
-      color: @themeColor;
+      color: @themeColor !important;
     }
   }
 }
@@ -96,22 +134,22 @@
 
 /* Select-下拉框样式重构 */
 .ant-select-dropdown {
-  width: @dropdownWidth !important;
-  max-height: @dropdownHeight !important;
-  padding: @dropdownPadding;
-  border-radius: @boxRadius2;
-  box-shadow: @boxShadow;
+  width: @dropdownWidth;
+  max-height: @dropdownHeight;
+  padding: @dropdownPadding !important;
+  border-radius: @boxRadius2 !important;
+  box-shadow: @boxShadow !important;
 
   &.small {
-    width: @dropdownWidth2 !important;
+    width: @dropdownWidth2;
   }
 }
 
 .ant-dropdown-menu {
   width: @dropdownWidth2;
-  padding: @dropdownPadding;
-  border-radius: @boxRadius2;
-  box-shadow: @boxShadow;
+  padding: @dropdownPadding !important;
+  border-radius: @boxRadius2 !important;
+  box-shadow: @boxShadow !important;
 }
 
 .ant-dropdown.large {
@@ -155,19 +193,19 @@
 .ant-dropdown-menu-item,
 .ant-dropdown-menu-submenu-vertical,
 .ant-cascader-menu-item {
-  height: @selectItemHeight;
-  padding: @selectItemPadding;
+  height: @selectItemHeight !important;
+  padding: @selectItemPadding !important;
   color: @fontColor;
   font-weight: @fontWeight;
   font-size: @fontSize;
   line-height: 20px;
-  border-radius: @boxRadius2;
+  border-radius: @boxRadius2 !important;
 }
 
 .ant-select-item-option-active:not(.ant-select-item-option-disabled),
 .ant-cascader-menu-item:not(.ant-cascader-menu-item-disabled, .ant-cascader-menu-item-active):hover {
-  color: @hoverColor;
-  background-color: @hoverBgColor;
+  color: @hoverColor !important;
+  background-color: @hoverBgColor !important;
 
   .biz-icon {
     color: @hoverColor;
@@ -176,9 +214,9 @@
 
 .ant-select-item-option-selected:not(.ant-select-item-option-disabled),
 .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled) {
-  color: @activeColor;
-  font-weight: @fontWeight;
-  background-color: @activeBgColor;
+  color: @activeColor !important;
+  font-weight: @fontWeight !important;
+  background-color: @activeBgColor !important;
 
   .biz-icon {
     color: @activeColor;
@@ -186,7 +224,7 @@
 }
 
 .ant-select-item-option-disabled {
-  color: @disableColor;
+  color: @disableColor !important;
   background: #fff;
 }
 
@@ -197,8 +235,8 @@
 }
 
 .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled):hover {
-  color: @activeColor;
-  background-color: @activeBgColor;
+  color: @activeColor !important;
+  background-color: @activeBgColor !important;
 }
 
 .ant-dropdown-menu-item {
@@ -219,11 +257,11 @@
 /* input-search/clear */
 
 .ant-input-affix-wrapper {
-  height: 40px;
-  line-height: 40px;
-  background-color: @grayColor;
-  border-color: transparent;
-  border-radius: @boxRadius;
+  height: 40px !important;
+  line-height: 40px !important;
+  background-color: @grayColor !important;
+  border-color: transparent !important;
+  border-radius: @boxRadius !important;
 
   &.biz-search-box {
     margin-bottom: 12px;
@@ -233,23 +271,23 @@
   .ant-input {
     height: 100%;
     padding: 0;
-    background-color: transparent;
+    background-color: transparent !important;
     border: none;
     outline: none;
     box-shadow: none;
   }
 
   &:not(.ant-input-affix-wrapper-disabled):hover {
-    background-color: #fff;
-    border-color: @themeColor;
-    box-shadow: 0 0 0 4px #e8efff;
+    background-color: #fff !important;
+    border-color: @themeColor !important;
+    box-shadow: 0 0 0 4px #e8efff !important;
   }
 
   &:focus,
   &.ant-input-affix-wrapper-focused {
-    background: #fff;
-    border-color: @themeColor;
-    box-shadow: 0 0 0 4px #e8efff;
+    background: #fff !important;
+    border-color: @themeColor !important;
+    box-shadow: 0 0 0 4px #e8efff !important;
   }
 
   .ant-input-suffix span {
@@ -303,8 +341,7 @@
   }
 }
 
-.biz-search-title {
-  // .ant-form-vertical .ant-form-item-label {
+.biz-title {
   margin-bottom: 12px;
   padding: 0 !important;
   color: @titleColor;
@@ -430,3 +467,7 @@
 .ant-radio-button-wrapper-checked:not([class*=' ant-radio-button-wrapper-disabled']).ant-radio-button-wrapper:first-child {
   border-right-color: @themeColor;
 }
+
+.mb-12 {
+  margin-bottom: 12px;
+}

package/es/commonStyle/variable.less

@@ -75,8 +75,8 @@
 /* 下拉框外框 */
 @dropdownPadding: 8px;
 /* padding */
-@layoutPadding1: 24px;
-@layoutPadding2: 32px;
+@searchPadding: 24px;
+@contentPadding: 32px;
 @inputPadding: 0px 8px;
 /* 边框圆角 */
 @boxRadius: 4px;
@@ -115,6 +115,9 @@
   .biz-icon {
     color: @activeColor;
   }
+  .biz-light-height {
+    color: #fff;
+  }
 }
 
 .box-disabled {

package/es/components/iconFont.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { IconFontProps } from '@ant-design/icons/lib/components/IconFont';
+import '../assets/iconfont/iconfont.css';
+declare const IconFont: React.FC<IconFontProps>;
+export default IconFont;

package/es/components/iconFont.js

@@ -0,0 +1,30 @@
+var _excluded = ["className", "type"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { useMemo } from 'react';
+import '../assets/iconfont/iconfont.css';
+
+var IconFont = function IconFont(props) {
+  var _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      type = props.type,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var iconClassName = useMemo(function () {
+    return "bsicon ".concat(className, " bs").concat(type);
+  }, [className, type]);
+  return /*#__PURE__*/React.createElement("span", _objectSpread({
+    className: iconClassName
+  }, rest));
+};
+
+export default IconFont;

package/es/datePicker/demo/form.js

@@ -12,7 +12,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { useState } from 'react';
 import { Button, Form } from 'antd';
-import { BizDatePicker } from 'business-lib';
+import { BizDatePicker } from '@zgfe/business-lib';
 export default (function () {
   var _Form$useForm = Form.useForm(),
       _Form$useForm2 = _slicedToArray(_Form$useForm, 1),

package/es/datePicker/demo/index.js

@@ -10,7 +10,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import { BizDatePicker } from 'business-lib';
+import { BizDatePicker } from '@zgfe/business-lib';
 import React, { useState } from 'react';
 export default (function () {
   var _useState = useState({}),

package/es/datePicker/index.js

@@ -16,15 +16,16 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import { DatePicker, Select } from 'antd';
+import { DatePicker } from 'antd';
 import React, { useEffect, useState } from 'react';
-import { IconFont } from '..';
+import IconFont from '../components/iconFont';
 import { dateType, dateList } from './data';
 import util from '../utils/util';
 import './index.less';
 import moment from 'moment';
 import 'moment/locale/zh-cn';
 import locale from 'antd/es/date-picker/locale/zh_CN';
+import BizSelect from '../select';
 var RangePicker = DatePicker.RangePicker;
 
 var BizDatePicker = function BizDatePicker(props) {
@@ -137,17 +138,13 @@ var BizDatePicker = function BizDatePicker(props) {
 
   return /*#__PURE__*/React.createElement("div", {
     className: "biz-date-container"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "biz-select-content"
-  }, /*#__PURE__*/React.createElement(Select, {
+  }, /*#__PURE__*/React.createElement(BizSelect, {
+    className: "biz-date-type",
     defaultValue: currentType,
     options: dateType,
-    className: "biz-date-type",
-    dropdownClassName: "biz-date-dropdown",
-    showArrow: false,
-    bordered: false,
+    dropdownSize: "small",
+    size: "small",
     onChange: function onChange(operate) {
-      console.log(operate);
       setCurrentType(function () {
         return operate;
       });
@@ -155,10 +152,7 @@ var BizDatePicker = function BizDatePicker(props) {
         return dateList[operate][0];
       });
     }
-  }), /*#__PURE__*/React.createElement(IconFont, {
-    className: "biz-select-zhankai",
-    type: 'icon-xiangxia'
-  })), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: "biz-date-list"
   }, dateList[currentType].map(function (item, index) {
     return /*#__PURE__*/React.createElement("div", {
@@ -179,7 +173,6 @@ var BizDatePicker = function BizDatePicker(props) {
     dropdownClassName: "biz-date-ant-picker",
     locale: locale,
     showToday: false,
-    // mode={'date'}
     disabledDate: disabledDate,
     placement: 'bottomRight',
     placeholder: "\u81EA\u5B9A\u4E49",

package/es/datePicker/index.less

@@ -1,29 +1,11 @@
-@import '../commonStyle/select.less';
+@import '../commonStyle/variable.less';
 
 .biz-date-container {
   display: flex;
   justify-content: flex-start;
 
-  .biz-select-content {
-    flex: none;
+  .biz-date-type {
     width: 88px;
-    border: 1px solid #ecedf0;
-
-    .biz-date-type {
-      width: 88px;
-    }
-
-    .biz-select-zhankai {
-      display: block;
-    }
-
-    .ant-select-single.ant-select-open {
-      &,
-      & + .biz-select-zhankai,
-      .ant-select-selection-item {
-        .box-hover();
-      }
-    }
   }
 
   .biz-date-list {
@@ -65,14 +47,6 @@
   }
 }
 
-.biz-date-dropdown {
-  .ant-select-item {
-    height: 32px;
-    padding: 6px 8px;
-    font-weight: 400;
-  }
-}
-
 .biz-date-picker {
   position: relative;
 
@@ -98,6 +72,7 @@
       text-align: center;
       cursor: pointer;
     }
+
     .ant-picker-suffix {
       color: @iconColor;
     }
@@ -113,6 +88,7 @@
     input {
       color: @themeColor;
     }
+
     .ant-picker-suffix {
       color: @themeColor;
     }

package/es/dialog/components/list.js

@@ -11,7 +11,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { useEffect, useState } from 'react';
-import { IconFont } from '../..';
+import IconFont from '../../components/iconFont';
 import { typeMenus } from '../data/chart';
 import './style/list.less';
 

package/es/dialog/components/selectToInput.js

@@ -23,7 +23,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 import React, { useEffect, useState } from 'react';
-import { BizSelect, IconFont } from '../..';
+import { BizSelect } from '../..';
+import IconFont from '../../components/iconFont';
 import { Input } from 'antd';
 import '../style/index.less';
 
@@ -50,7 +51,17 @@ var BizSelectToInput = function BizSelectToInput(props) {
       selectValue = _useState4[0],
       setSelectValue = _useState4[1];
 
+  var _useState5 = useState(true),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isFirst = _useState6[0],
+      setIsFirst = _useState6[1];
+
   useEffect(function () {
+    if (isFirst) {
+      setIsFirst(false);
+      return;
+    }
+
     onChangeType && onChangeType(isSelect);
 
     if (isSelect) {

package/es/dialog/components/style/list.less

@@ -1,4 +1,4 @@
-@import '../../../commonStyle/index.less';
+@import '../../../commonStyle/variable.less';
 
 .biz-list-container {
   display: flex;

package/es/dialog/components/style/tab.less

@@ -1,4 +1,4 @@
-@import '../../../commonStyle/index.less';
+@import '../../../commonStyle/variable.less';
 
 .biz-tab-container {
   display: flex;
@@ -15,7 +15,7 @@
 
     .biz-icon {
       margin-right: 7px;
-      color: @titleColor;
+      color: @fontColor3;
       font-size: 18px;
     }
 

package/es/dialog/components/tab.js

@@ -11,7 +11,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { useState } from 'react';
-import { IconFont } from '../..';
+import IconFont from '../../components/iconFont';
 import { chartTypes } from '../data/chart';
 import './style/tab.less';
 

package/es/dialog/demo/index.js

@@ -17,7 +17,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { useState } from 'react';
-import { BizDialog } from 'business-lib';
+import { BizDialog } from '@zgfe/business-lib';
 import { Button } from 'antd';
 var options = ['分类一', '分类二', '分类三'];
 var chartTypes = ['趋势图', '汇总图', '地图'];

package/es/dialog/demo/index2.js

@@ -17,7 +17,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { useState } from 'react';
-import { BizDialog } from 'business-lib';
+import { BizDialog } from '@zgfe/business-lib';
 import { Button } from 'antd';
 var options = ['分类一', '分类二', '分类三'];
 var fields = [{
@@ -37,9 +37,27 @@ var fields = [{
     required: true,
     message: '请输入场景名称'
   }]
+}, {
+  label: '测试',
+  name: 'test',
+  type: 'select',
+  options: [{
+    label: '测试一',
+    value: 'test1'
+  }, {
+    label: '测试二',
+    value: 'test2'
+  }, {
+    label: '测试三',
+    value: 'test3'
+  }],
+  rules: [{
+    required: true,
+    message: '请选择测试'
+  }]
 }];
 var formData = {
-  class: '分类一'
+  test: 'test2'
 };
 export default (function () {
   var _useState = useState(false),

package/es/dialog/demo/index3.js

@@ -17,7 +17,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { useState } from 'react';
-import { BizDialog } from 'business-lib';
+import { BizDialog } from '@zgfe/business-lib';
 import { Button } from 'antd';
 var fields = [{
   label: '创建指标',

package/es/dialog/style/index.less

@@ -21,6 +21,8 @@
 .biz-dialog {
   .ant-select:not(.ant-select-customize-input) {
     .ant-select-selector {
+      height: @inputHeightNormal;
+      line-height: @inputHeightNormal;
       background-color: @grayColor;
       border-color: @grayColor;
     }
@@ -39,9 +41,13 @@
     }
   }
 
-  .ant-form-item-label > label {
+  &.ant-form-horizontal .ant-form-item-label > label {
     height: 40px;
   }
+  &.ant-form-vertical .ant-form-item-label {
+    margin-bottom: 12px;
+    color: @titleColor;
+  }
 }
 
 .ant-modal-footer {

package/es/eventSelector/demo/form.js

@@ -12,7 +12,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import { Button, Form } from 'antd';
 import React, { useState } from 'react';
-import { BizEventSelector } from 'business-lib';
+import { BizEventSelector } from '@zgfe/business-lib';
 var cascadeOptions = [{
   value: 1,
   label: '整体',

package/es/eventSelector/demo/index.js

@@ -11,7 +11,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { useState } from 'react';
-import { BizEventSelector } from 'business-lib';
+import { BizEventSelector } from '@zgfe/business-lib';
 var cascadeOptions = [{
   value: 1,
   label: '整体',

package/es/eventSelector/demo/nodata.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BizEventSelector } from 'business-lib';
+import { BizEventSelector } from '@zgfe/business-lib';
 var optionGroup = [];
 
 var EventDemo = function EventDemo() {

package/es/eventSelector/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import './cascade.less';
 import { FormProps, Event } from './type';
+import './index.less';
 interface EventBoxProps extends FormProps {
     /**
      * @description     默认的选中项

package/es/eventSelector/index.js

@@ -33,10 +33,11 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  */
 import { Input, List, Skeleton } from 'antd';
 import React, { useContext, useEffect, useRef, useState } from 'react';
-import './cascade.less';
 import InfiniteScroll from 'react-infinite-scroll-component';
-import { BizGlobalDataContext, IconFont } from '..';
+import { BizGlobalDataContext } from '..';
+import IconFont from '../components/iconFont';
 import { util } from '../utils';
+import './index.less';
 
 var BizEventSelector = function BizEventSelector(props) {
   var aliasName = props.aliasName,
@@ -272,17 +273,6 @@ var BizEventSelector = function BizEventSelector(props) {
     setEventData([].concat(_toConsumableArray(eventData), _toConsumableArray(arr)));
   };
 
-  var setHeighLight = function setHeighLight(value) {
-    if (!searchValue) return value; // const num = value.indexOf(searchValue)
-    // const c = num > -1 ? value.substr(num, searchValue.length) : ''
-    // console.log(num,c)
-
-    var val = "<span style=\"color:#FF6600;\">".concat(searchValue, "</span>");
-    var regS = new RegExp(searchValue, 'gi');
-    console.log('regS', regS, searchValue, val);
-    return value.replace(regS, val);
-  };
-
   return /*#__PURE__*/React.createElement("div", {
     className: "biz-select-cotainer biz-select-hover",
     ref: cascadeRef