@zgfe/business-lib 1.0.0-beta.6 → 1.0.3

package/es/assets/styles/resetAntd.less

@@ -0,0 +1,398 @@
+// ant-design覆写样式，需要外部引用业务库的地方单独引用
+@import './variable.less';
+@import './chunks.less';
+
+// 输入框（带icon)
+.ant-input-affix-wrapper {
+  height: @height-lg;
+  line-height: @height-lg;
+  background-color: @background-color-base;
+  border-color: #fff;
+  border-radius: @border-radius-small;
+
+  .ant-input {
+    background-color: @background-color-base;
+  }
+
+  &:hover {
+    border-color: @primary-color;
+  }
+}
+
+.ant-input-affix-wrapper-focused {
+  background-color: #fff;
+  border-color: @primary-color;
+
+  .ant-input {
+    background-color: #fff;
+  }
+}
+
+// 输入框
+.ant-input {
+  background-color: @background-color-base;
+  border-color: @background-color-base;
+  border-radius: @border-radius-small;
+
+  &:focus,
+  &-focused {
+    background-color: #fff;
+    box-shadow: 0 0 0 4px @primary-1;
+  }
+}
+
+.ant-input-group-addon {
+  background-color: @background-color-base;
+}
+
+.ant-btn-default {
+  border-radius: 4px;
+
+  &:hover,
+  &:active,
+  &:focus {
+    .__default-hover();
+  }
+}
+
+.ant-btn-primary {
+  border-radius: @border-radius-small;
+}
+
+.ant-btn-sm {
+  padding: 0 5px;
+  font-size: 12px;
+}
+
+.ant-select-dropdown {
+  .__select-panel();
+}
+
+// 选择框下拉选项
+.ant-select-item {
+  height: @height-lg;
+  padding: 10px 8px;
+  border-radius: @border-radius-normal;
+
+  &:hover:not(.ant-select-item-option-disabled, .ant-select-item-option-selected) {
+    .__default-hover();
+  }
+
+  &.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+    color: #fff;
+    font-weight: 400;
+    background: @primary-color;
+  }
+}
+
+.ant-dropdown-menu {
+  .__select-panel();
+
+  .ant-dropdown-menu-item,
+  .ant-dropdown-menu-submenu-title {
+    .__select-option();
+
+    &.active {
+      color: #fff;
+      background: @primary-color;
+    }
+
+    .ant-dropdown-menu-title-content {
+      .__default-overflow();
+    }
+  }
+
+  .ant-dropdown-menu-submenu {
+    &.active,
+    &.active:hover {
+      .ant-dropdown-menu-submenu-title {
+        background: @primary-color;
+
+        span {
+          color: #fff;
+        }
+      }
+    }
+
+    &.ant-dropdown-menu-submenu-active .ant-dropdown-menu-submenu-title {
+      .__default-hover();
+
+      span {
+        color: @primary-color;
+      }
+    }
+  }
+}
+
+/* 日期控件 */
+
+/*日历文本框*/
+.ant-picker {
+  border-radius: @border-radius-small;
+
+  &:hover,
+  &.ant-picker-focused {
+    .__default-hover();
+    border-color: @border-color-base;
+    box-shadow: none;
+
+    span,
+    input {
+      color: @primary-color;
+    }
+  }
+
+  .ant-picker-active-bar {
+    display: none;
+  }
+}
+
+/*日历下拉框*/
+.ant-picker-dropdown {
+  .ant-picker-cell {
+    min-width: 30px;
+    padding: 0;
+
+    &::before {
+      height: 30px;
+    }
+
+    /*禁止选择*/
+    &.ant-picker-cell-disabled {
+      color: @disabled-color;
+
+      &::before {
+        background: #fff;
+      }
+    }
+
+    /*当天*/
+    &.ant-picker-cell-today {
+      &.ant-picker-cell-selected {
+        .ant-picker-cell-inner::before {
+          background: #fff;
+        }
+      }
+
+      .ant-picker-cell-inner::before {
+        position: absolute;
+        top: auto;
+        bottom: 4px;
+        left: 50%;
+        width: 6px;
+        height: 1.5px;
+        background: @primary-color;
+        border: none;
+        border-radius: 0.5px;
+        transform: translateX(-50%);
+        content: '';
+      }
+    }
+
+    .ant-picker-cell-inner {
+      min-width: 30px;
+      height: 30px;
+      line-height: 28px;
+      text-align: center;
+      border: 1px solid transparent;
+      border-radius: @border-radius-large;
+    }
+
+    /*日期hover*/
+    &:hover {
+      &:not(.ant-picker-cell-in-view) .ant-picker-cell-inner,
+      &:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end)
+        .ant-picker-cell-inner {
+        background-color: transparent;
+        border: 1px solid @primary-color;
+      }
+    }
+  }
+
+  /*选中的日期范围*/
+  /* 日期范围的起始时间radius */
+  .ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single):not(.ant-picker-cell-range-end)
+    .ant-picker-cell-inner,
+  .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single):not(.ant-picker-cell-range-start)
+    .ant-picker-cell-inner {
+    border-radius: 50%;
+  }
+
+  /*日期范围每行最后一个和第一个添加border-radius*/
+  tr {
+    .ant-picker-cell-in-view:not(.ant-picker-cell-selected) {
+      &:first-child {
+        &.ant-picker-cell-in-range::before {
+          border-radius: @border-radius-small 0 0 @border-radius-small;
+        }
+      }
+
+      &:last-child {
+        &.ant-picker-cell-in-range::before {
+          border-radius: 0 @border-radius-small @border-radius-small 0;
+        }
+      }
+    }
+  }
+
+  /*日期范围内背景色*/
+  .ant-picker-cell-in-range::before {
+    background: @primary-1;
+  }
+
+  /*日期范围内的hover效果-背景不变*/
+  .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before,
+  .ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-hover::before,
+  .ant-picker-cell-in-view.ant-picker-cell-range-end.ant-picker-cell-range-hover::before,
+  .ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single).ant-picker-cell-range-hover-start::before,
+  .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single).ant-picker-cell-range-hover-end::before,
+  .ant-picker-panel
+    > :not(.ant-picker-date-panel)
+    .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before,
+  .ant-picker-panel
+    > :not(.ant-picker-date-panel)
+    .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before {
+    background: @primary-1;
+  }
+
+  /*日期范围内的hover效果*/
+  .ant-picker-date-panel
+    .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start,
+  .ant-picker-date-panel
+    .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end {
+    .ant-picker-cell-inner {
+      border: 1px solid @primary-color;
+
+      &::after {
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+// 弹窗
+
+.ant-modal-content {
+  border-radius: @border-radius-normal;
+
+  .ant-modal-footer {
+    padding: 0 24px 24px 24px;
+    border-top: none;
+
+    .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
+      margin-left: 16px;
+    }
+  }
+
+  .ant-modal-header {
+    padding-top: 24px;
+    border-bottom: none;
+    border-radius: @border-radius-normal @border-radius-normal 0 0;
+
+    .ant-modal-title {
+      color: #000;
+      font-weight: 500;
+      font-size: 24px;
+      line-height: 24px;
+    }
+  }
+
+  .ant-modal-body {
+    max-height: 400px;
+    padding-bottom: 0;
+    overflow: auto;
+  }
+}
+
+// 分页
+.ant-pagination {
+  margin: 0;
+  margin-top: 20px;
+
+  .ant-select:not(.ant-select-customize-input) .ant-select-selector {
+    border-radius: @border-radius-small;
+  }
+
+  .ant-pagination-item {
+    color: @text-color-secondary;
+    background: @background-color-base;
+    border: none;
+    border-radius: @border-radius-small;
+
+    &.ant-pagination-item-active {
+      background: @primary-color;
+
+      a {
+        color: @white;
+      }
+    }
+
+    &:not(.ant-pagination-item-active):hover {
+      a {
+        color: @primary-color;
+      }
+    }
+  }
+
+  .ant-pagination-prev,
+  .ant-pagination-next {
+    .ant-pagination-item-link {
+      color: @text-color-secondary;
+      background: @background-color-base;
+      border: none;
+      border-radius: @border-radius-small;
+    }
+
+    &:not(.ant-pagination-disabled) .ant-pagination-item-link:hover {
+      color: @primary-color;
+    }
+  }
+
+  .ant-pagination-options-quick-jumper input {
+    border-radius: @border-radius-small;
+  }
+}
+
+// 表格
+.ant-table {
+  overflow: hidden;
+  color: @text-color;
+  border: 1px solid @border-color-base;
+  border-radius: @border-radius-normal;
+
+  .ant-table-container {
+    .ant-table-thead > tr > th {
+      color: @text-color;
+      line-height: 16px;
+      background: @background-color-base;
+      border: none;
+
+      &::before {
+        width: 0 !important;
+      }
+
+      &.ant-table-cell-fix-left-last {
+        border-right: 1px solid @border-color-base;
+      }
+    }
+
+    .ant-table-tbody > tr:not(:last-child) > td {
+      border-bottom: 1px solid @border-color-base;
+    }
+
+    .ant-table-tbody > tr > td {
+      line-height: 15px;
+
+      &.ant-table-cell-fix-left {
+        &.ant-table-cell-fix-left-last {
+          border-right: 1px solid @border-color-base;
+        }
+      }
+    }
+  }
+
+  .ant-table-tbody > tr.ant-table-row:hover > td,
+  .ant-table-tbody > tr > td.ant-table-cell-row-hover {
+    background: @primary-1;
+  }
+}

package/es/assets/styles/variable.less

@@ -0,0 +1,21 @@
+@import '~antd/es/style/themes/default.less';
+
+@border-radius-sx: 2px;
+@border-radius-small: 4px;
+@border-radius-normal: 10px;
+@border-radius-large: 20px;
+@option-height: @height-lg;
+@background-color-base: #fafafb;
+@background-color-gray: #f6f6f6;
+@icon-width: 24px;
+
+@shadow-color: rgba(0, 0, 0, 0.1);
+@shadow-color-light: rgba(0, 0, 0, 0.1);
+@box-shadow-base: 0px 4px 10px @shadow-color;
+@box-shadow-small: 0px 1px 2px @shadow-color-light;
+@box-shadow-form: 0 0 0 4px @primary-1;
+
+// 正文
+@text-color: #021429;
+// 次要
+@text-color-secondary: #5f6085;

package/es/assets/theme.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    'primary-color': string;
+    'border-color-base': string;
+};
+export default _default;

package/es/assets/theme.js

@@ -0,0 +1,4 @@
+export default {
+  'primary-color': '#165dff',
+  'border-color-base': '#ECEDF0'
+};

package/es/attrConditions/components/operateList.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { AttributeSelect } from '../../attributeSelector/types';
+declare const BizOperateList: React.FC<{
+    attr?: AttributeSelect.Value;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+}>;
+export default BizOperateList;

package/es/attrConditions/components/operateList.js

@@ -0,0 +1,83 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useEffect, useState } from 'react';
+import { classPrefix } from '..';
+import { PropType } from '../../attributeSelector/types';
+import BizSelect from '../../select';
+import { dateOperate, numberOperate, stringOperate } from '../utils/operates';
+
+var BizOperateList = function BizOperateList(props) {
+  var _props$attr2;
+
+  var _useState = useState({
+    value: props.defaultValue
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      current = _useState2[0],
+      setCurrent = _useState2[1];
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      options = _useState4[0],
+      setOptions = _useState4[1];
+
+  useEffect(function () {
+    var _props$attr;
+
+    var type = (_props$attr = props.attr) === null || _props$attr === void 0 ? void 0 : _props$attr.type;
+    var optionData = type === PropType.NUMBER ? numberOperate : type === PropType.DATE ? dateOperate : stringOperate;
+    setOptions(optionData);
+    var flag = true;
+
+    if (current) {
+      optionData.forEach(function (item) {
+        if (item.value === current.value) {
+          if (current.name && current.name === item.name) {
+            flag = false;
+          }
+        }
+      });
+    }
+
+    if (!flag) return;
+    setCurrent(optionData[0]);
+    onChange(optionData[0]);
+  }, [(_props$attr2 = props.attr) === null || _props$attr2 === void 0 ? void 0 : _props$attr2.key]);
+
+  var onChange = function onChange(data) {
+    setCurrent(data);
+    if (props.onChange) props.onChange(data.value);
+  };
+
+  if (!props.attr || !current || !options.length) {
+    return /*#__PURE__*/React.createElement(BizSelect, {
+      className: "".concat(classPrefix, "-single-select"),
+      theme: "secondary",
+      disable: true,
+      options: []
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(BizSelect, {
+    disable: !props.attr,
+    className: "".concat(classPrefix, "-single-select"),
+    value: current,
+    labelField: "name",
+    keyField: "value",
+    theme: "secondary",
+    options: options,
+    onChange: onChange
+  });
+};
+
+export default BizOperateList;

package/es/attrConditions/components/stringList.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { AttributeSelect } from '../../attributeSelector/types';
+declare const StringList: React.FC<{
+    attr: AttributeSelect.Value;
+    operate: string;
+    value?: string[];
+    onChange?: (value: string[]) => void;
+}>;
+export default StringList;

package/es/attrConditions/components/stringList.js

@@ -0,0 +1,168 @@
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useContext, useEffect, useState } from 'react';
+import { classPrefix } from '..';
+import { PropCategory } from '../../attributeSelector/types';
+import BizGlobalDataContext from '../../context';
+import BizSelect from '../../select';
+import { ajax } from '../../utils';
+import { OperateTypes } from '../types';
+
+var StringList = function StringList(props) {
+  var _props$attr;
+
+  var _useContext = useContext(BizGlobalDataContext),
+      currentApp = _useContext.currentApp;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      current = _useState2[0],
+      setCurrent = _useState2[1];
+
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      options = _useState4[0],
+      setOptions = _useState4[1];
+
+  var _useState5 = useState(true),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isFirst = _useState6[0],
+      setIsFirst = _useState6[1];
+
+  useEffect(function () {
+    if (props.value) {
+      var data = props.value.map(function (item) {
+        return {
+          name: item,
+          value: item
+        };
+      });
+      setCurrent(data);
+    } else {
+      setCurrent([]);
+    }
+  }, [props.value]);
+  useEffect(function () {
+    fetchValues(props.attr);
+
+    if (isFirst) {
+      setIsFirst(false);
+    } else {
+      setCurrent([]);
+    }
+  }, [(_props$attr = props.attr) === null || _props$attr === void 0 ? void 0 : _props$attr.key]);
+  useEffect(function () {
+    if (props.operate === OperateTypes.IsNull || props.operate === OperateTypes.IsNotNull) {
+      setCurrent([]);
+      onChange([]);
+    }
+  }, [props.operate]);
+
+  var fetchValues = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(attrData) {
+      var requestData, transformRequest, formData;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              requestData = {
+                app_id: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
+                platform: currentApp === null || currentApp === void 0 ? void 0 : currentApp.platform,
+                limit: 10000,
+                attr: (attrData === null || attrData === void 0 ? void 0 : attrData.propCategory) === PropCategory.EventProp ? attrData.id : 0,
+                dimension_sub: (attrData === null || attrData === void 0 ? void 0 : attrData.propCategory) === PropCategory.EventProp ? 'event_attr' : attrData === null || attrData === void 0 ? void 0 : attrData.name
+              };
+
+              transformRequest = function transformRequest(params) {
+                var arr = [];
+
+                for (var key in params) {
+                  arr.push("".concat(key, "=").concat(encodeURIComponent(params[key])));
+                }
+
+                return arr.join('&');
+              };
+
+              formData = transformRequest(requestData);
+              ajax({
+                url: '/data/queryEsData.jsp',
+                data: formData,
+                headers: {
+                  'Content-Type': 'application/x-www-form-urlencoded'
+                }
+              }).then(function (result) {
+                setOptions(function () {
+                  return result && result.sources ? result.sources.map(function (item) {
+                    return {
+                      name: item,
+                      value: item
+                    };
+                  }) : [];
+                });
+              }).catch(function (e) {
+                console.error(e);
+                setOptions([]);
+              });
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function fetchValues(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var onChange = function onChange(data) {
+    var resData = data.map(function (item) {
+      return item.value;
+    });
+    if (props.onChange) props.onChange(resData);
+  };
+
+  if (!current || !options) {
+    return /*#__PURE__*/React.createElement(BizSelect, {
+      multiple: true,
+      enableCreate: true,
+      theme: "secondary",
+      size: "base",
+      className: "".concat(classPrefix, "-multi-select"),
+      options: [],
+      disable: true
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(BizSelect, {
+    className: "".concat(classPrefix, "-multi-select"),
+    value: current,
+    multiple: true,
+    enableCreate: true,
+    theme: "secondary",
+    size: "base",
+    disable: props.operate === OperateTypes.IsNull || props.operate === OperateTypes.IsNotNull,
+    labelField: "name",
+    keyField: "value",
+    options: options,
+    onChange: onChange
+  });
+};
+
+export default StringList;