ds-web-all 1.0.0

package/lib/components/compose-tree/hooks/use-tree-data.js

@@ -0,0 +1,106 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _treeNodeIcon = _interopRequireDefault(require("../../tree-node-icon"));
+require("../index.less");
+var _excluded = ["iconType", "label", "orgName", "position", "children", "deptNames"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } // import { Tooltip } from 'antd';
+var _default = exports.default = function _default(dataSource, searchText, rootIconType, renderExtra) {
+  var _useState = (0, _react.useState)([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    treeData = _useState2[0],
+    setTreeData = _useState2[1];
+  var getNodeIcon = (0, _react.useCallback)(function (iconType) {
+    return _treeNodeIcon.default[iconType];
+  }, [_treeNodeIcon.default]);
+  var generateDataSource = (0, _react.useCallback)(function (data, search, rootIcon) {
+    if (!data) return undefined;
+    return data.map(function (el) {
+      var iconType = el.iconType,
+        _el$label = el.label,
+        label = _el$label === void 0 ? '' : _el$label,
+        orgName = el.orgName,
+        position = el.position,
+        children = el.children,
+        deptNames = el.deptNames,
+        itemProps = _objectWithoutProperties(el, _excluded);
+      var $nodeIcon = null;
+      if (iconType) {
+        var NodeIcon = getNodeIcon(iconType);
+        $nodeIcon = /*#__PURE__*/_react.default.createElement(NodeIcon, null);
+      }
+      var $title = label;
+      var matchedIndex = search ? label.indexOf(search) : -1;
+      if (rootIcon) {
+        var _NodeIcon = getNodeIcon(rootIcon);
+        $nodeIcon = /*#__PURE__*/_react.default.createElement(_NodeIcon, null);
+      }
+      if (matchedIndex >= 0) {
+        // 命中了搜索文案，显示高亮内容
+        $title = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+          key: "before"
+        }, label.slice(0, matchedIndex)), /*#__PURE__*/_react.default.createElement("span", {
+          key: "keyword",
+          className: "highlight"
+        }, search), /*#__PURE__*/_react.default.createElement("span", {
+          key: "after"
+        }, label.slice(matchedIndex + search.length)));
+      }
+      var extraEl = typeof renderExtra === 'function' ? renderExtra(el) : null;
+      return _objectSpread(_objectSpread({}, itemProps), {}, {
+        iconType: iconType,
+        title:
+        /*#__PURE__*/
+        // <Tooltip placement="topLeft" title={label}>
+        _react.default.createElement("div", {
+          className: "treeNode",
+          title: label
+        }, $nodeIcon, /*#__PURE__*/_react.default.createElement("div", {
+          className: "nodeContent"
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: "titleWrapper"
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: (0, _classnames.default)('title', {
+            // 搜索出来的文案换行，普通节点超长省略
+            noWrap: !searchText,
+            wrap: !!searchText
+          })
+        }, $title), /*#__PURE__*/_react.default.createElement("div", {
+          className: "position"
+        }, extraEl)), /*#__PURE__*/_react.default.createElement("p", {
+          className: "orgName"
+        }, orgName, (deptNames || []).join(', '))))
+        // </Tooltip>
+        ,
+        // 渲染子节点，这里不透传 rootIcon，因为该配置只作用于根节点
+        children: generateDataSource(children, search)
+      });
+    });
+  }, [_treeNodeIcon.default, searchText]);
+  (0, _react.useEffect)(function () {
+    // 非搜索场景下，如果传入 rootIconType，则特殊处理根节点 icon
+    setTreeData(generateDataSource(dataSource, searchText, searchText ? null : rootIconType));
+  }, [dataSource, searchText, rootIconType]);
+  return [treeData];
+};

package/lib/components/compose-tree/index.js

@@ -0,0 +1,184 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ComposeTreeContext", {
+  enumerable: true,
+  get: function get() {
+    return _useComposeTree.ComposeTreeContext;
+  }
+});
+Object.defineProperty(exports, "PropTypes", {
+  enumerable: true,
+  get: function get() {
+    return _interface.PropTypes;
+  }
+});
+Object.defineProperty(exports, "SPLITTER", {
+  enumerable: true,
+  get: function get() {
+    return _useComposeTree.SPLITTER;
+  }
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _tree = _interopRequireDefault(require("./tree"));
+var _interface = require("./interface");
+var _blank = require("../blank");
+var _useComposeTree = _interopRequireWildcard(require("./hooks/use-compose-tree"));
+require("./index.less");
+var _excluded = ["onSelect", "onUserSelect", "routerConfig", "treeColWidth", "request", "renderSearchExtra", "groupTypeList", "typeKey", "renderTree"],
+  _excluded2 = ["request", "extendModuleMap", "firstLoadAll", "expandAllTree", "typeKey", "groupTypeList", "requestDataFormatter"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _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 _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function ComposeTree(_ref) {
+  var onSelect = _ref.onSelect,
+    onUserSelect = _ref.onUserSelect,
+    routerConfig = _ref.routerConfig,
+    _ref$treeColWidth = _ref.treeColWidth,
+    treeColWidth = _ref$treeColWidth === void 0 ? '260px' : _ref$treeColWidth,
+    request = _ref.request,
+    renderSearchExtra = _ref.renderSearchExtra,
+    _ref$groupTypeList = _ref.groupTypeList,
+    groupTypeList = _ref$groupTypeList === void 0 ? [] : _ref$groupTypeList,
+    _ref$typeKey = _ref.typeKey,
+    typeKey = _ref$typeKey === void 0 ? 'type' : _ref$typeKey,
+    renderTree = _ref.renderTree,
+    others = _objectWithoutProperties(_ref, _excluded);
+  var _useContext = (0, _react.useContext)(_useComposeTree.ComposeTreeContext),
+    goToModule = _useContext.goToModule,
+    code = _useContext.code,
+    dataSource = _useContext.dataSource,
+    getRoutePath = _useContext.getRoutePath;
+  // 之所以要传入 dataSource，是因为有可能内部展示的是搜索的结果，与当前页面
+  var handleSelect = function handleSelect(nextSelectedKeys, event, currentDataSource) {
+    // onSelect && onSelect(selectedKeys, event);
+    // 禁止反选
+    if (nextSelectedKeys.length === 0) return;
+    onSelect && onSelect(nextSelectedKeys, event);
+    var node = event.node;
+    var pos = node.pos;
+    var type = node[typeKey];
+    // console.log(event, 'event');
+    // setSelectedTreeNode({ key: selectedKeys[0], node: event.node});
+    if (!type) {
+      console.error('树节点缺乏 type 属性', event.node);
+    }
+    if (!groupTypeList.includes(type)) {
+      // 拼接路径
+      var position = pos.split('-').slice(1);
+      var traverser = currentDataSource;
+      // console.log(traverser, 'traverser', position);
+      // 将下标路径转换为 key 的路径，放入 url
+      try {
+        var treePath = position.map(function (pos) {
+          var _traverser$pos = traverser[+pos],
+            id = _traverser$pos.id,
+            children = _traverser$pos.children;
+          traverser = children;
+          return id;
+        }).join(_useComposeTree.SPLITTER);
+        goToModule(event.node, treePath);
+      } catch (error) {
+        console.log(error);
+      }
+    }
+  };
+  var $routes = (routerConfig || []).reduce(function (result, _ref2) {
+    var modulePath = _ref2.path,
+      Com = _ref2.Com;
+    var _getRoutePath = getRoutePath(modulePath),
+      path = _getRoutePath.path,
+      purePath = _getRoutePath.purePath;
+    // debugger;
+    if (!Com) return null;
+    return [].concat(_toConsumableArray(result), [/*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
+      key: purePath,
+      path: path,
+      render: function render(props) {
+        return /*#__PURE__*/_react.default.createElement(_react.default.Suspense, {
+          fallback: /*#__PURE__*/_react.default.createElement(_blank.Spin, null)
+        }, /*#__PURE__*/_react.default.createElement(Com, props));
+      }
+    }), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
+      key: purePath,
+      path: "".concat(path, "/*"),
+      render: function render(props) {
+        return /*#__PURE__*/_react.default.createElement(_react.default.Suspense, {
+          fallback: /*#__PURE__*/_react.default.createElement(_blank.Spin, null)
+        }, /*#__PURE__*/_react.default.createElement(Com, props));
+      }
+    })]);
+  }, []);
+  var renderTreeFn = renderTree || function (treeComp, routerComp) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "tree-col",
+      style: {
+        width: treeColWidth
+      }
+    }, treeComp), /*#__PURE__*/_react.default.createElement("div", {
+      className: "content-col"
+    }, routerComp));
+  };
+
+  // console.log(dataSource, 'dataSource', code);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "cf-compose-tree"
+  }, renderTreeFn(/*#__PURE__*/_react.default.createElement(_tree.default, _extends({}, others, {
+    request: request,
+    dataSource: dataSource,
+    permissionCode: code,
+    onSelect: handleSelect,
+    onUserSelect: onUserSelect,
+    renderSearchExtra: renderSearchExtra,
+    groupTypeList: groupTypeList,
+    typeKey: typeKey
+  })), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Switch, null, $routes, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
+    render: code === 30512 ? _blank.Permission : code === 9000 ? _blank.EmptyData : _blank.Spin
+  }))));
+}
+var _default = exports.default = function _default(_ref3) {
+  var request = _ref3.request,
+    extendModuleMap = _ref3.extendModuleMap,
+    _ref3$firstLoadAll = _ref3.firstLoadAll,
+    firstLoadAll = _ref3$firstLoadAll === void 0 ? false : _ref3$firstLoadAll,
+    _ref3$expandAllTree = _ref3.expandAllTree,
+    expandAllTree = _ref3$expandAllTree === void 0 ? true : _ref3$expandAllTree,
+    _ref3$typeKey = _ref3.typeKey,
+    typeKey = _ref3$typeKey === void 0 ? 'type' : _ref3$typeKey,
+    groupTypeList = _ref3.groupTypeList,
+    requestDataFormatter = _ref3.requestDataFormatter,
+    others = _objectWithoutProperties(_ref3, _excluded2);
+  var composeTreeContext = (0, _useComposeTree.default)({
+    request: {
+      getTreeNodes: request.getTreeNodes
+    },
+    extendModuleMap: extendModuleMap,
+    firstLoadAll: firstLoadAll,
+    typeKey: typeKey,
+    expandAllTree: expandAllTree,
+    groupTypeList: groupTypeList,
+    requestDataFormatter: requestDataFormatter
+  });
+  return /*#__PURE__*/_react.default.createElement(_useComposeTree.ComposeTreeContext.Provider, {
+    value: composeTreeContext
+  }, /*#__PURE__*/_react.default.createElement(ComposeTree, _extends({}, others, {
+    groupTypeList: groupTypeList,
+    request: request,
+    firstLoadAll: firstLoadAll,
+    typeKey: typeKey
+  })));
+};

package/lib/components/compose-tree/index.less

@@ -0,0 +1,192 @@
+.emptyText {
+  color: rgba(0, 0, 0, 0.25);
+  width: 100%;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  margin-bottom: 0;
+}
+.cf-compose-tree {
+  display: flex;
+  height: 100%;
+  align-items: stretch;
+  border: 1px solid rgba(232, 232, 232, 1);
+  border-left: none;
+  border-right: none;
+  .emptyText {
+    height: 50vh;
+    min-height: 100px;
+  }
+  .tree-col {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    border-right: 1px solid #e9e9e9;
+  }
+  .ss-biz-tree {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .biz-search-main {
+    padding: 8px 8px 0 8px;
+    width: auto;
+    min-width: 200px;
+    :global {
+      .ant-input-affix-wrapper {
+        // padding: 0 11px;
+        &::before {
+          content: '';
+        }
+      }
+    }
+  }
+  .ant-tree {
+    .ant-tree-treenode {
+      width: 100%;
+      padding: 9px 15px;
+      &.ant-tree-treenode-selected,
+      .ant-tree-node-content-wrapper.ant-tree-node-selected {
+        background-color: var(--ant-primary-2, #e6f7ff);
+        flex-grow: 1;
+        z-index: 1;
+        position: relative;
+      }
+      .ant-tree-node-content-wrapper {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        // overflow: hidden;
+      }
+    }
+    .ant-tree-node-content-wrapper {
+      color: rgba(0, 0, 0, 0.85);
+      font-size: 14px;
+      padding: 0;
+      // margin-bottom: 24px;
+    }
+    .ant-tree-indent-unit {
+      width: 14px;
+    }
+  }
+  .content-col {
+    // padding: 15px;
+    flex: 1;
+    overflow: auto;
+    > * {
+      margin: 0px 24px;
+    }
+    > .cf-compose-tab {
+      margin: 0;
+      .tab-length-1 {
+        // padding-top: 24px;
+      }
+    }
+  }
+
+  .biz-tree-main {
+    padding-top: 8px;
+    flex: 1;
+    overflow: auto;
+    // display: flex;
+    // align-items: center;
+    // justify-content: center;
+    position: relative;
+    > div {
+      height: 100%;
+    }
+    .ant-spin-nested-loading,
+    .ant-spin-container {
+      height: 100%;
+    }
+    &-wrapper {
+      height: 100%;
+    }
+  }
+  .ant-tree .ant-tree-node-content-wrapper:hover {
+    transition: unset;
+    background-color: var(--ant-primary-2, #e6f7ff);
+  }
+
+  // .ant-tree-treenode-selected .ant-tree-node-selected::after {
+  //   background-color: #e6f7ff;
+  //   height: 42px;
+  //   width: 100%;
+  //   content: '';
+  //   position: absolute;
+  //   float: left;
+  //   bottom: -9px;
+  //   z-index: -1;
+  // }
+}
+
+.removeIndent {
+  :global {
+    .ant-tree-switcher-noop {
+      display: none;
+    }
+  }
+}
+.treeNode {
+  display: flex;
+  width: 100%;
+  align-items: flex-start;
+  padding-right: 20px;
+  .user-center-tree-node-icon {
+    margin-top: 4px;
+  }
+  .nodeContent {
+    flex: 1;
+    // overflow: hidden;
+
+    .highlight {
+      color: var(--ant-primary-color, #2c7ef8);
+    }
+    .orgName {
+      color: rgba(0, 0, 0, 0.45);
+      white-space: break-spaces;
+      margin: 0;
+    }
+  }
+  .titleWrapper {
+    color: rgba(0, 0, 0, 0.65);
+    margin: 0;
+    display: flex;
+    justify-content: space-between;
+    .title {
+      // display: contents;
+      &.wrap {
+        white-space: pre-line;
+      }
+      &.noWrap {
+        width: auto;
+        white-space: nowrap;
+
+        // text-overflow: ellipsis;
+        // overflow: hidden;
+      }
+    }
+    .position {
+      flex: 0;
+      padding-left: 5px;
+    }
+  }
+}
+.treeTitle {
+  background: rgba(244, 246, 248, 1);
+  line-height: 32px;
+  padding-left: 24px;
+}
+._treeTitle {
+  background: rgba(244, 246, 248, 1);
+  line-height: 32px;
+  padding-left: 24px;
+}
+.treeFooter {
+  margin: 0 24px;
+  padding: 9px 0;
+  white-space: break-spaces;
+  color: rgba(0, 0, 0, 0.25);
+  border-top: 1px solid rgba(232, 232, 232, 1);
+}

package/lib/components/compose-tree/interface.js

@@ -0,0 +1 @@
+"use strict";