@lingxiteam/assets 0.9.30 → 0.11.30-alpha-2

package/es/error/errorDisplay/Web/Drawer/Drawer.js

@@ -0,0 +1,232 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { forwardRef, isValidElement, useEffect, useState } from 'react';
+import classnames from 'classnames';
+import { CloseIcon, CloseWhiteIcon, ArrowIcon } from '../../SVGstring';
+import { getSvgImageBase64 } from '../../../../utils/img';
+import './Drawer.less';
+var isDomEle = function isDomEle(target) {
+  return typeof target === 'string' || typeof target === 'number' || /*#__PURE__*/isValidElement(target);
+};
+var Drawer = /*#__PURE__*/forwardRef(function (props, ref) {
+  var title = props.title,
+    visible = props.visible,
+    content = props.content,
+    footer = props.footer,
+    onClose = props.onClose,
+    onVisibleChange = props.onVisibleChange,
+    _props$mask = props.mask,
+    mask = _props$mask === void 0 ? true : _props$mask,
+    _props$width = props.width,
+    width = _props$width === void 0 ? 630 : _props$width,
+    _props$offset = props.offset,
+    offset = _props$offset === void 0 ? 0 : _props$offset,
+    _props$status = props.status,
+    status = _props$status === void 0 ? 'default' : _props$status,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'default' : _props$mode,
+    _props$groupListProps = props.groupListProps,
+    groupListProps = _props$groupListProps === void 0 ? {
+      dataSource: []
+    } : _props$groupListProps,
+    _props$errorInfoProps = props.errorInfoProps,
+    errorInfoProps = _props$errorInfoProps === void 0 ? {
+      tabs: []
+    } : _props$errorInfoProps;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    extraConts = _useState2[0],
+    setExtraConts = _useState2[1]; // 展开内容的keys
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isFull = _useState4[0],
+    setIsFull = _useState4[1];
+  useEffect(function () {
+    if (onVisibleChange instanceof Function) {
+      onVisibleChange(visible);
+    }
+  }, [visible, onVisibleChange]);
+  var renderGroups = function renderGroups() {
+    var _ref = groupListProps || {},
+      renderRecord = _ref.renderRecord,
+      _ref$dataSource = _ref.dataSource,
+      dataSource = _ref$dataSource === void 0 ? [] : _ref$dataSource,
+      _ref$rowKey = _ref.rowKey,
+      rowKey = _ref$rowKey === void 0 ? 'key' : _ref$rowKey,
+      _ref$contentRowKey = _ref.contentRowKey,
+      contentRowKey = _ref$contentRowKey === void 0 ? 'key' : _ref$contentRowKey,
+      _ref$contentMaxLen = _ref.contentMaxLen,
+      contentMaxLen = _ref$contentMaxLen === void 0 ? 120 : _ref$contentMaxLen;
+    var renderList = function renderList(items) {
+      if (Array.isArray(items) && items.length > 0) {
+        var renderItemÇont = function renderItemÇont(cont, recordKey) {
+          if (typeof cont === 'string') {
+            if (cont.length <= contentMaxLen || !extraConts.includes(recordKey)) {
+              return cont.slice(0, contentMaxLen);
+            }
+            return cont;
+          }
+          return cont;
+        };
+        return items.map(function (item) {
+          return /*#__PURE__*/React.createElement("div", {
+            className: "lx-drawer-group-article",
+            key: item[contentRowKey]
+          }, isDomEle(item === null || item === void 0 ? void 0 : item.title) ? /*#__PURE__*/React.createElement("div", {
+            className: "lx-drawer-group-article-title"
+          }, item === null || item === void 0 ? void 0 : item.title) : '', isDomEle(item === null || item === void 0 ? void 0 : item.author) ? /*#__PURE__*/React.createElement("div", {
+            className: "lx-drawer-group-article-author"
+          }, item === null || item === void 0 ? void 0 : item.author) : '', isDomEle(item === null || item === void 0 ? void 0 : item.content) ? /*#__PURE__*/React.createElement("div", {
+            className: "lx-drawer-group-article-content"
+          }, renderItemÇont(item === null || item === void 0 ? void 0 : item.content, item[contentRowKey]), typeof (item === null || item === void 0 ? void 0 : item.content) === 'string' && (item === null || item === void 0 ? void 0 : item.content.length) > contentMaxLen ? /*#__PURE__*/React.createElement("a", {
+            className: "lx-drawer-group-article-extra",
+            onClick: function onClick() {
+              setExtraConts(function (list) {
+                var cloneList = _toConsumableArray(list);
+                if (!item[contentRowKey]) {
+                  return cloneList;
+                }
+                if (list.includes(item[contentRowKey])) {
+                  return cloneList.filter(function (record) {
+                    return record !== item[contentRowKey];
+                  });
+                }
+                return [].concat(_toConsumableArray(cloneList), [item[contentRowKey]]);
+              });
+            }
+          }, extraConts.includes(item[contentRowKey]) ? '收起' : '展开') : '') : '');
+        });
+      }
+      return '';
+    };
+    if (Array.isArray(dataSource) && dataSource.length > 0) {
+      return dataSource.map(function (item, index) {
+        return renderRecord instanceof Function ? renderRecord(item, index) : /*#__PURE__*/React.createElement("div", {
+          className: "lx-drawer-group-item",
+          key: item[rowKey]
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "lx-drawer-group-item-head"
+        }, item === null || item === void 0 ? void 0 : item.title), /*#__PURE__*/React.createElement("div", {
+          className: "lx-drawer-group-item-body"
+        }, isDomEle(item === null || item === void 0 ? void 0 : item.content) ? item === null || item === void 0 ? void 0 : item.content : '', renderList(item === null || item === void 0 ? void 0 : item.content)));
+      });
+    }
+    return '';
+  };
+  var renderTabsList = function renderTabsList(tabsCont) {
+    var tabsRowRender = errorInfoProps.tabsRowRender,
+      _errorInfoProps$tabsR = errorInfoProps.tabsRowKey,
+      tabsRowKey = _errorInfoProps$tabsR === void 0 ? 'key' : _errorInfoProps$tabsR;
+    if (Array.isArray(tabsCont) && tabsCont.length > 0) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "lx-drawer-err-list"
+      }, tabsCont.map(function (item) {
+        return tabsRowRender instanceof Function ? tabsRowRender(item) : /*#__PURE__*/React.createElement("div", {
+          key: item[tabsRowKey],
+          className: classnames('lx-drawer-err-item', item === null || item === void 0 ? void 0 : item.status)
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "lx-drawer-err-item-head"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "lx-drawer-err-item-head-cell"
+        }, /*#__PURE__*/React.createElement("span", {
+          className: "lx-drawer-err-item-head-title"
+        }, item === null || item === void 0 ? void 0 : item.title, ' '), item === null || item === void 0 ? void 0 : item.code), isDomEle(item === null || item === void 0 ? void 0 : item.extra) ? /*#__PURE__*/React.createElement("div", {
+          className: "lx-drawer-err-item-head-extra"
+        }, ' ', item === null || item === void 0 ? void 0 : item.extra) : ''), /*#__PURE__*/React.createElement("div", {
+          className: "lx-drawer-err-item-body"
+        }, item === null || item === void 0 ? void 0 : item.content));
+      })));
+    }
+    return isDomEle(tabsCont) ? tabsCont : '';
+  };
+  var renderContent = function renderContent() {
+    if (!mode || mode === 'default') {
+      return isDomEle(content) ? content : '';
+    }
+    if (mode === 'errorInfo') {
+      var tabs = errorInfoProps.tabs,
+        tabsActiveKey = errorInfoProps.tabsActiveKey,
+        tabsContent = errorInfoProps.tabsContent,
+        tabsFooter = errorInfoProps.tabsFooter,
+        onTabsChange = errorInfoProps.onTabsChange;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isDomEle(content) ? /*#__PURE__*/React.createElement("div", {
+        className: "lx-drawer-code-desc"
+      }, content) : '', /*#__PURE__*/React.createElement("div", {
+        className: classnames('lx-drawer-code-tabs', isFull ? 'full' : '')
+      }, Array.isArray(tabs) && tabs.length > 0 ? /*#__PURE__*/React.createElement("div", {
+        className: "lx-drawer-code-tabs-head"
+      }, isDomEle(content) ? /*#__PURE__*/React.createElement("div", {
+        className: "lx-drawer-code-tabs-control",
+        onClick: function onClick() {
+          setIsFull(!isFull);
+        }
+      }, /*#__PURE__*/React.createElement("img", {
+        src: getSvgImageBase64(ArrowIcon),
+        alt: "",
+        className: classnames('lx-drawer-code-tabs-control-icon', isFull ? '' : 'flip')
+      })) : '', tabs.map(function (item) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: classnames('lx-drawer-code-tabs-head-item', tabsActiveKey === item.key ? 'active' : ''),
+          key: item.key,
+          onClick: function onClick(ev) {
+            onTabsChange(_objectSpread(_objectSpread({}, item), {}, {
+              update: props === null || props === void 0 ? void 0 : props.onUpdate
+            }), ev);
+          }
+        }, item.tab);
+      })) : '', /*#__PURE__*/React.createElement("div", {
+        className: "lx-drawer-code-tabs-body"
+      }, renderTabsList(tabsContent), isDomEle(tabsFooter) ? tabsFooter : '')));
+    }
+    if (mode === 'groupList') {
+      return /*#__PURE__*/React.createElement("div", null, renderGroups());
+    }
+    return isDomEle(content) ? content : '';
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames('lx-drawer', {
+      opening: visible,
+      closeing: !visible
+    }),
+    ref: ref
+  }, mask ? /*#__PURE__*/React.createElement("div", {
+    className: "lx-drawer-mask",
+    onClick: onClose
+  }) : '', /*#__PURE__*/React.createElement("div", {
+    className: classnames('lx-drawer-container', status),
+    style: {
+      width: "".concat(width, "px"),
+      transform: "translateX(-".concat(offset, "px)")
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "lx-drawer-head"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "lx-drawer-head-title"
+  }, isDomEle(title) ? title : ''), /*#__PURE__*/React.createElement("div", {
+    className: "lx-drawer-head-extra",
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement("img", {
+    src: getSvgImageBase64(status === 'default' ? CloseIcon : CloseWhiteIcon),
+    alt: "",
+    className: "lx-drawer-head-close"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "lx-drawer-body"
+  }, renderContent()), isDomEle(footer) ? /*#__PURE__*/React.createElement("div", {
+    className: "lx-drawer-footer"
+  }, footer) : ''));
+});
+export default Drawer;

package/es/error/errorDisplay/Web/Drawer/Drawer.less

@@ -0,0 +1,354 @@
+@import url('../../animation.less');
+
+.lx-drawer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 99999;
+  pointer-events: none;
+  overflow: hidden;
+
+  &.opening &-container {
+    animation: lxMoveOpen 0.3s;
+  }
+
+  &.closeing &-container {
+    animation: lxMoveClose 0.3s;
+    animation-fill-mode: forwards;
+  }
+
+  &.opening &-mask {
+    animation: lxFateIn 0.3s;
+    animation-fill-mode: forwards;
+  }
+
+  &.opening &-mask {
+    animation: lxFateOut 0.3s;
+    animation-fill-mode: forwards;
+  }
+
+  &-mask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.45);
+    overflow: hidden;
+    pointer-events: auto;
+  }
+
+  &-container {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 800px;
+    height: 100%;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    pointer-events: auto;
+    transition: all 0.3s;
+  }
+
+  &-container.error &-head,
+  &-container.red &-head {
+    background-color: #fa7570;
+    border-color: #fa7570;
+    color: #fff;
+  }
+
+  &-container.error &-body {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  &-container.error &-code-desc {
+    padding: 12px 20px;
+    overflow-y: auto;
+    flex: 1;
+    font-size: 12px;
+    color: rgba(28, 36, 46, 0.75);
+  }
+
+  &-container.purple &-head {
+    background-color: #9747ff;
+    border-color: #9747ff;
+    color: #fff;
+  }
+
+  &-container.blue &-head {
+    background-color: #47e;
+    border-color: #47e;
+    color: #fff;
+  }
+
+  &-head {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #e7e8ea;
+
+    &-title {
+      flex: 1;
+    }
+
+    &-close {
+      width: 16px;
+      height: 16px;
+      display: flex;
+      vertical-align: middle;
+      cursor: pointer;
+    }
+
+    &-title + &-extra {
+      margin-left: 16px;
+    }
+  }
+
+  &-head,
+  &-body,
+  &-footer {
+    padding: 12px 20px;
+  }
+
+  &-body {
+    color: rgba(28, 36, 46, 0.75);
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  &-group {
+    &-item + &-item {
+      margin-top: 20px;
+    }
+
+    &-item-head {
+      padding: 10px 12px;
+    }
+
+    &-item-body {
+      padding: 16px 12px;
+    }
+
+    &-item-head {
+      font-size: 16px;
+      font-weight: 500;
+      color: #1c242e;
+      background-color: #f9f9f9;
+    }
+
+    &-item-body {
+      font-size: 12px;
+      color: rgba(28, 36, 46, 0.55);
+    }
+
+    &-article + &-article {
+      margin-top: 20px;
+      padding-top: 20px;
+      border-top: 1px solid #f0f0f0;
+    }
+
+    &-article {
+      color: rgba(28, 36, 46, 0.75);
+
+      &-title {
+        font-size: 13px;
+        color: #1c242e;
+        font-weight: 500;
+      }
+
+      &-author {
+        font-size: 12px;
+        color: rgba(28, 36, 46, 0.25);
+      }
+
+      &-content {
+        color: rgba(28, 36, 46, 0.55);
+        font-size: 12px;
+      }
+
+      &-author + &-content,
+      &-title + &-content {
+        margin-top: 8px;
+      }
+
+      &-extra {
+        float: right;
+      }
+
+      // 内置文章样式
+      dt {
+        margin-bottom: 6px;
+        font-weight: 600;
+      }
+      li {
+        line-height: 30px;
+      }
+      section {
+        padding: 6px;
+        background-color: rgba(161, 161, 161, 0.15);
+        border-radius: 4px;
+      }
+    }
+  }
+
+  &-code-tabs {
+    flex: 1;
+
+    &.full {
+      flex: 2;
+    }
+
+    &-head {
+      position: relative;
+      background-color: #fafafa;
+      height: 40px;
+      padding: 0 20px;
+      display: flex;
+      align-items: center;
+
+      &-item {
+        position: relative;
+        color: rgba(28, 36, 46, 0.75);
+        height: 40px;
+        margin-right: 30px;
+        text-align: center;
+        line-height: 40px;
+        cursor: pointer;
+
+        &::before {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 0;
+          height: 2px;
+          transition: all 0.3s;
+          background-color: #47e;
+        }
+
+        &.active {
+          color: #47e;
+
+          &::before {
+            width: 100%;
+          }
+        }
+      }
+    }
+
+    &-control {
+      position: absolute;
+      left: 50%;
+      top: -8px;
+      cursor: pointer;
+      transform: translateX(-50%);
+      width: 64px;
+      height: 16px;
+      line-height: 16px;
+      background: #e5e5e5;
+      border-radius: 6px 6px 6px 6px;
+      text-align: center;
+      z-index: 2;
+
+      &-icon {
+        width: 12px;
+        height: 12px;
+        color: rgba(28, 36, 46, 0.25);
+        display: inline-block;
+        vertical-align: middle;
+
+        &.flip {
+          transform: rotate(-180deg);
+          transition: all 0.3s;
+        }
+      }
+    }
+
+    &-body {
+      padding: 16px 20px;
+    }
+  }
+
+  &-err-item {
+    background: #fafafa;
+    padding: 8px 16px;
+    border-radius: 4px;
+    margin-bottom: 16px;
+
+    &-head {
+      display: flex;
+      align-items: center;
+
+      &-title {
+        margin-right: 8px;
+      }
+
+      &-cell {
+        flex: 1;
+      }
+
+      &-extra {
+        margin-left: 8px;
+      }
+    }
+
+    &.red &-head {
+      &-title {
+        color: #fa7570;
+
+        a {
+          color: #fa7570;
+        }
+      }
+    }
+
+    &.purple &-head {
+      &-title {
+        color: #9747ff;
+
+        a {
+          color: #9747ff;
+        }
+      }
+    }
+
+    &.blue &-head {
+      &-title {
+        color: #47e;
+
+        a {
+          color: #47e;
+        }
+      }
+    }
+
+    &-head + &-body {
+      margin-top: 4px;
+    }
+
+    &-head {
+      color: rgba(28, 36, 46, 0.75);
+    }
+
+    &-body {
+      color: rgba(28, 36, 46, 0.75);
+    }
+  }
+
+  &-footer {
+    text-align: right;
+    border-top: 1px solid #e7e8ea;
+  }
+
+  &-empty {
+    text-align: center;
+    color: rgba(28, 36, 46, 0.45);
+  }
+}