fan-standard-comp 3.1.4 → 3.1.6

package/lib/StandardContent/SplitterLayout/index.js

@@ -0,0 +1,387 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Pane = _interopRequireDefault(require("./Pane"));
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function clearSelection() {
+  if (document.body.createTextRange) {
+    // https://github.com/zesik/react-splitter-layout/issues/16
+    // https://stackoverflow.com/questions/22914075/#37580789
+    var range = document.body.createTextRange();
+    range.collapse();
+    range.select();
+  } else if (window.getSelection) {
+    if (window.getSelection().empty) {
+      window.getSelection().empty();
+    } else if (window.getSelection().removeAllRanges) {
+      window.getSelection().removeAllRanges();
+    }
+  } else if (document.selection) {
+    document.selection.empty();
+  }
+}
+
+var DEFAULT_SPLITTER_SIZE = 4;
+
+var SplitterLayout = /*#__PURE__*/function (_React$Component) {
+  _inherits(SplitterLayout, _React$Component);
+
+  var _super = _createSuper(SplitterLayout);
+
+  function SplitterLayout(props) {
+    var _this;
+
+    _classCallCheck(this, SplitterLayout);
+
+    _this = _super.call(this, props);
+    _this.handleResize = _this.handleResize.bind(_assertThisInitialized(_this));
+    _this.handleMouseMove = _this.handleMouseMove.bind(_assertThisInitialized(_this));
+    _this.handleMouseUp = _this.handleMouseUp.bind(_assertThisInitialized(_this));
+    _this.handleTouchMove = _this.handleTouchMove.bind(_assertThisInitialized(_this));
+    _this.handleSplitterMouseDown = _this.handleSplitterMouseDown.bind(_assertThisInitialized(_this));
+    _this.state = {
+      secondaryPaneSize: 0,
+      resizing: false
+    };
+    return _this;
+  }
+
+  _createClass(SplitterLayout, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      window.addEventListener('resize', this.handleResize);
+      document.addEventListener('mouseup', this.handleMouseUp);
+      document.addEventListener('mousemove', this.handleMouseMove);
+      document.addEventListener('touchend', this.handleMouseUp);
+      document.addEventListener('touchmove', this.handleTouchMove);
+      var secondaryPaneSize, primaryPaneSize;
+
+      if (typeof this.props.secondaryInitialSize !== 'undefined') {
+        //设置其余部分大小
+        secondaryPaneSize = this.props.secondaryInitialSize;
+      } else {
+        if (typeof this.props.primaryInitialSize !== 'undefined') {
+          //设置主要部分大小
+          primaryPaneSize = this.props.primaryInitialSize;
+        }
+
+        var containerRect = this.container.getBoundingClientRect();
+        var splitterRect;
+
+        if (this.splitter) {
+          splitterRect = this.splitter.getBoundingClientRect();
+        } else {
+          // Simulate a splitter
+          splitterRect = {
+            width: DEFAULT_SPLITTER_SIZE,
+            height: DEFAULT_SPLITTER_SIZE
+          };
+        }
+
+        var totalSize, splitterSize;
+
+        if (this.props.vertical) {
+          //垂直排列
+          totalSize = containerRect.height;
+          splitterSize = splitterRect.height;
+        } else {
+          totalSize = containerRect.width;
+          splitterSize = splitterRect.width;
+        } //计算目标对象位置
+
+
+        var primarySize = this.props.primaryIndex === 1 ? totalSize - splitterSize - primaryPaneSize : primaryPaneSize || (totalSize - splitterSize) / 2;
+        secondaryPaneSize = this.getSecondaryPaneSize(containerRect, splitterRect, {
+          left: containerRect.left + primarySize,
+          top: containerRect.top + primarySize
+        }, false);
+      }
+
+      this.setState({
+        secondaryPaneSize: secondaryPaneSize
+      });
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      if (prevState.secondaryPaneSize !== this.state.secondaryPaneSize && this.props.onSecondaryPaneSizeChange) {
+        this.props.onSecondaryPaneSizeChange(this.state.secondaryPaneSize);
+      }
+
+      if (prevState.resizing !== this.state.resizing) {
+        if (this.state.resizing) {
+          if (this.props.onDragStart) {
+            this.props.onDragStart();
+          }
+        } else if (this.props.onDragEnd) {
+          this.props.onDragEnd();
+        }
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener('resize', this.handleResize);
+      document.removeEventListener('mouseup', this.handleMouseUp);
+      document.removeEventListener('mousemove', this.handleMouseMove);
+      document.removeEventListener('touchend', this.handleMouseUp);
+      document.removeEventListener('touchmove', this.handleTouchMove);
+    } //获取第二块内容宽度or高度
+
+  }, {
+    key: "getSecondaryPaneSize",
+    value: function getSecondaryPaneSize(containerRect, splitterRect, clientPosition, offsetMouse) {
+      var totalSize;
+      var splitterSize;
+      var offset;
+
+      if (this.props.vertical) {
+        //垂直排列
+        totalSize = containerRect.height; //总高度
+
+        splitterSize = splitterRect.height; //划分条高度
+
+        offset = clientPosition.top - containerRect.top; //移动位置减去原始位置
+      } else {
+        //默认水平排列
+        totalSize = containerRect.width; //总宽度
+
+        splitterSize = splitterRect.width; //划分条宽度
+
+        offset = clientPosition.left - containerRect.left; //移动位置减去原始位置
+      }
+
+      if (offsetMouse) {
+        //移动
+        offset -= splitterSize / 2;
+      }
+
+      if (offset < 0) {
+        offset = 0;
+      } else if (offset > totalSize - splitterSize) {
+        //移动超过容器大小
+        offset = totalSize - splitterSize;
+      }
+
+      var secondaryPaneSize;
+
+      if (this.props.primaryIndex === 1) {
+        //目标对象是1
+        secondaryPaneSize = offset;
+      } else {
+        secondaryPaneSize = totalSize - splitterSize - offset;
+      }
+
+      var primaryPaneSize = totalSize - splitterSize - secondaryPaneSize;
+
+      if (this.props.percentage) {
+        //百分比
+        secondaryPaneSize = secondaryPaneSize * 100 / totalSize;
+        primaryPaneSize = primaryPaneSize * 100 / totalSize;
+        splitterSize = splitterSize * 100 / totalSize;
+        totalSize = 100;
+      }
+
+      if (primaryPaneSize < this.props.primaryMinSize) {
+        secondaryPaneSize = Math.max(secondaryPaneSize - (this.props.primaryMinSize - primaryPaneSize), 0);
+      } else if (secondaryPaneSize < this.props.secondaryMinSize) {
+        secondaryPaneSize = Math.min(totalSize - splitterSize - this.props.primaryMinSize, this.props.secondaryMinSize);
+      }
+
+      return secondaryPaneSize;
+    }
+  }, {
+    key: "handleResize",
+    value: function handleResize() {
+      if (this.splitter && !this.props.percentage) {
+        var containerRect = this.container.getBoundingClientRect();
+        var splitterRect = this.splitter.getBoundingClientRect();
+        var secondaryPaneSize = this.getSecondaryPaneSize(containerRect, splitterRect, {
+          left: splitterRect.left,
+          top: splitterRect.top
+        }, false);
+        this.setState({
+          secondaryPaneSize: secondaryPaneSize
+        });
+      }
+    }
+  }, {
+    key: "handleMouseMove",
+    value: function handleMouseMove(e) {
+      if (this.state.resizing) {
+        var containerRect = this.container.getBoundingClientRect();
+        var splitterRect = this.splitter.getBoundingClientRect();
+        var secondaryPaneSize = this.getSecondaryPaneSize(containerRect, splitterRect, {
+          left: e.clientX,
+          top: e.clientY
+        }, true);
+        clearSelection();
+        this.setState({
+          secondaryPaneSize: secondaryPaneSize
+        });
+      }
+    }
+  }, {
+    key: "handleTouchMove",
+    value: function handleTouchMove(e) {
+      this.handleMouseMove(e.changedTouches[0]);
+    }
+  }, {
+    key: "handleSplitterMouseDown",
+    value: function handleSplitterMouseDown() {
+      clearSelection();
+      this.setState({
+        resizing: true
+      });
+    }
+  }, {
+    key: "handleMouseUp",
+    value: function handleMouseUp() {
+      this.setState(function (prevState) {
+        return prevState.resizing ? {
+          resizing: false
+        } : null;
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var containerClasses = 'splitter-layout';
+
+      if (this.props.customClassName) {
+        containerClasses += " ".concat(this.props.customClassName);
+      }
+
+      if (this.props.vertical) {
+        containerClasses += ' splitter-layout-vertical';
+      }
+
+      if (this.state.resizing) {
+        containerClasses += ' layout-changing';
+      }
+
+      var children = _react.default.Children.toArray(this.props.children).slice(0, 2);
+
+      if (children.length === 0) {
+        children.push( /*#__PURE__*/_react.default.createElement("div", null));
+      }
+
+      var wrappedChildren = [];
+      var primaryIndex = this.props.primaryIndex !== 0 && this.props.primaryIndex !== 1 ? 0 : this.props.primaryIndex;
+
+      for (var i = 0; i < children.length; ++i) {
+        var primary = true;
+        var size = null;
+        var classname = this.props.partClassNames[i];
+        var styleObj = this.props.partStyles[i];
+
+        if (children.length > 1 && i !== primaryIndex) {
+          primary = false;
+          size = this.state.secondaryPaneSize;
+        }
+
+        wrappedChildren.push( /*#__PURE__*/_react.default.createElement(_Pane.default, {
+          vertical: this.props.vertical,
+          percentage: this.props.percentage,
+          primary: primary,
+          size: size,
+          paneClassName: classname,
+          paneStyle: styleObj
+        }, children[i]));
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: containerClasses,
+        style: this.props.containerStyle,
+        ref: function ref(c) {
+          _this2.container = c;
+        }
+      }, wrappedChildren[0], wrappedChildren.length > 1 && /*#__PURE__*/_react.default.createElement("div", {
+        role: "separator",
+        className: "layout-splitter ".concat(!this.props.vertical && 'layout-splitter-horizontal', " ").concat(this.props.splitterClassName),
+        style: this.props.splitterStyle,
+        ref: function ref(c) {
+          _this2.splitter = c;
+        },
+        onMouseDown: this.handleSplitterMouseDown,
+        onTouchStart: this.handleSplitterMouseDown
+      }), wrappedChildren.length > 1 && wrappedChildren[1]);
+    }
+  }]);
+
+  return SplitterLayout;
+}(_react.default.Component);
+
+SplitterLayout.propTypes = {
+  containerStyle: _propTypes.default.object,
+  customClassName: _propTypes.default.string,
+  splitterClassName: _propTypes.default.string,
+  splitterStyle: _propTypes.default.object,
+  partClassNames: _propTypes.default.arrayOf(_propTypes.default.string),
+  partStyles: _propTypes.default.arrayOf(_propTypes.default.object),
+  vertical: _propTypes.default.bool,
+  percentage: _propTypes.default.bool,
+  primaryIndex: _propTypes.default.number,
+  primaryMinSize: _propTypes.default.number,
+  primaryInitialSize: _propTypes.default.number,
+  secondaryInitialSize: _propTypes.default.number,
+  secondaryMinSize: _propTypes.default.number,
+  onDragStart: _propTypes.default.func,
+  onDragEnd: _propTypes.default.func,
+  onSecondaryPaneSizeChange: _propTypes.default.func,
+  children: _propTypes.default.arrayOf(_propTypes.default.node)
+};
+SplitterLayout.defaultProps = {
+  customClassName: '',
+  splitterClassName: '',
+  partClassNames: [],
+  partStyles: [],
+  vertical: false,
+  percentage: false,
+  primaryIndex: 0,
+  primaryMinSize: 0,
+  secondaryInitialSize: undefined,
+  secondaryMinSize: 0,
+  onDragStart: null,
+  onDragEnd: null,
+  onSecondaryPaneSizeChange: null,
+  children: []
+};
+var _default = SplitterLayout;
+exports.default = _default;

package/lib/StandardContent/SplitterLayout/index.less

@@ -0,0 +1,58 @@
+@import '~antd/lib/style/themes/default.less';
+.splitter-layout {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.spec-grid-content .splitter-layout .layout-pane,.splitter-layout .layout-pane {
+  position: relative;
+  flex: 0 0 auto;
+  overflow: auto;
+}
+
+.spec-grid-content .splitter-layout .layout-pane.layout-pane-primary,.splitter-layout .layout-pane.layout-pane-primary {
+  flex: 1 1 auto;
+}
+
+.splitter-layout > .layout-splitter {
+  flex: 0 0 auto;
+  width: 4px;
+  height: 100%;
+  cursor: col-resize;
+  background-color: rgba(0,0,0,0);
+}
+.splitter-layout > .layout-splitter-horizontal{
+  padding-bottom:9999px;
+  margin-bottom:-9999px; 
+}
+
+.splitter-layout .layout-splitter:hover {
+  background-color: rgba(0,0,0,.1);
+}
+
+.splitter-layout.layout-changing {
+  cursor: col-resize;
+}
+
+.splitter-layout.layout-changing > .layout-splitter {
+  background-color: rgba(0,0,0,.1);
+}
+
+.splitter-layout.splitter-layout-vertical {
+  flex-direction: column;
+  height: 150px;
+}
+
+.splitter-layout.splitter-layout-vertical.layout-changing {
+  cursor: row-resize;
+}
+
+.splitter-layout.splitter-layout-vertical > .layout-splitter {
+  width: 100%;
+  height: 4px;
+  cursor: row-resize;
+}

package/lib/StandardContent/SubfieldContent.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import './style/index.less';
+interface SubfieldContentProps {
+    leftSiderWidth?: number;
+    className?: string;
+    leftSiderClassName?: string;
+    leftSiderNode?: any;
+    loading?: boolean;
+    loadingTip?: string;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    leftSiderDragDirection?: string[];
+    leftSiderMoveMaxWidth?: number;
+    leftSiderMoveMaxHeight?: number;
+}
+declare const SubfieldContent: (props: SubfieldContentProps) => JSX.Element;
+export default SubfieldContent;

package/lib/StandardContent/SubfieldContent.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/spin/style");
+
+var _spin = _interopRequireDefault(require("antd/es/spin"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _DragContent = _interopRequireDefault(require("../DragContent"));
+
+require("./style/index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var SubfieldContent = function SubfieldContent(props) {
+  var _props$leftSiderWidth = props.leftSiderWidth,
+      leftSiderWidth = _props$leftSiderWidth === void 0 ? 180 : _props$leftSiderWidth,
+      leftSiderNode = props.leftSiderNode,
+      children = props.children,
+      className = props.className,
+      style = props.style,
+      leftSiderClassName = props.leftSiderClassName,
+      _props$loading = props.loading,
+      loading = _props$loading === void 0 ? false : _props$loading,
+      loadingTip = props.loadingTip,
+      leftSiderDragDirection = props.leftSiderDragDirection,
+      leftSiderMoveMaxWidth = props.leftSiderMoveMaxWidth,
+      leftSiderMoveMaxHeight = props.leftSiderMoveMaxHeight;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('spec-grid-content', loading ? 'spec-grid-content-loading' : '', className),
+    style: style
+  }, loading && /*#__PURE__*/_react.default.createElement(_spin.default, {
+    spinning: loading,
+    tip: loadingTip
+  }), /*#__PURE__*/_react.default.createElement(_DragContent.default, {
+    direction: leftSiderDragDirection,
+    className: (0, _classnames.default)('spec-grid-left', leftSiderClassName),
+    style: {
+      width: "".concat(leftSiderWidth || 180, "px")
+    },
+    moveMaxWidth: leftSiderMoveMaxWidth,
+    moveMaxHeight: leftSiderMoveMaxHeight
+  }, leftSiderNode), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'spec-grid-right'
+  }, children));
+};
+
+var _default = SubfieldContent;
+exports.default = _default;

package/lib/StandardContent/WrapperContent.d.ts

@@ -0,0 +1,13 @@
+import './style/index.less';
+import React from 'react';
+interface WrapperContentProps {
+    className?: string;
+    loading?: boolean;
+    loadingTip?: string;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    noMargin?: boolean;
+    light?: boolean;
+}
+declare const WrapperContent: (props: WrapperContentProps) => JSX.Element;
+export default WrapperContent;

package/lib/StandardContent/WrapperContent.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/spin/style");
+
+var _spin = _interopRequireDefault(require("antd/es/spin"));
+
+require("./style/index.less");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var WrapperContent = function WrapperContent(props) {
+  var children = props.children,
+      light = props.light,
+      className = props.className,
+      style = props.style,
+      _props$noMargin = props.noMargin,
+      noMargin = _props$noMargin === void 0 ? false : _props$noMargin,
+      _props$loading = props.loading,
+      loading = _props$loading === void 0 ? false : _props$loading,
+      loadingTip = props.loadingTip;
+  var defaultClassName = 'spec-wrapper-content';
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(defaultClassName, className, loading ? 'spec-wrapper-content-loading' : '', noMargin ? 'has-margin' : ''),
+    style: style
+  }, loading && /*#__PURE__*/_react.default.createElement(_spin.default, {
+    spinning: loading,
+    tip: loadingTip
+  }), light ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "light-block"
+  }, " ", children) : children);
+};
+
+var _default = WrapperContent;
+exports.default = _default;

package/lib/StandardContent/data.d.ts

@@ -0,0 +1,101 @@
+import React from 'react';
+
+export interface WrapperContentProps {
+  children: React.ReactNode;
+  noMargin: Boolean; // 在主题色为themeTech下，会默认给定一个margin,可
+}
+
+export interface SubfiledContentProps {
+  // leftStyle:
+  leftSiderNode: React.ReactNode; // 左侧内容区域结构
+  children: React.ReactNode; // 右侧内容区域结构
+  leftSiderWidth: Number; // 左侧内容宽度
+}
+
+
+export interface SubsystemContent {
+  children: React.ReactNode; // 内容区域结构
+  title: String;
+}
+
+export interface SubContentTab {
+  leafWidth: Number; // 右侧栏列表
+  title: String;
+  hideHeader: Boolean; // 就否隐藏头部内容区
+}
+
+
+
+
+/*
+
+export interface GeographicType {
+  province: {
+    label: string;
+    key: string;
+  };
+  city: {
+    label: string;
+    key: string;
+  };
+}
+
+export interface NoticeType {
+  id: string;
+  title: string;
+  logo: string;
+  description: string;
+  updatedAt: string;
+  member: string;
+  href: string;
+  memberLink: string;
+}
+
+export interface CurrentUser {
+  name: string;
+  avatar: string;
+  userid: string;
+  notice: NoticeType[];
+  email: string;
+  signature: string;
+  title: string;
+  group: string;
+  tags: TagType[];
+  notifyCount: number;
+  unreadCount: number;
+  country: string;
+  geographic: GeographicType;
+  address: string;
+  phone: string;
+}
+
+export interface Member {
+  avatar: string;
+  name: string;
+  id: string;
+}
+
+export interface ListItemDataType {
+  id: string;
+  owner: string;
+  title: string;
+  avatar: string;
+  cover: string;
+  status: 'normal' | 'exception' | 'active' | 'success';
+  percent: number;
+  logo: string;
+  href: string;
+  body?: any;
+  updatedAt: number;
+  createdAt: number;
+  subDescription: string;
+  description: string;
+  activeUser: number;
+  newUser: number;
+  star: number;
+  like: number;
+  message: number;
+  content: string;
+  members: Member[];
+}
+*/