@teamix/pro 1.3.4 → 1.3.7

package/lib/sidebar/components/tree-node/index.scss

@@ -0,0 +1,58 @@
+.teamix-pro-sidebar-tree {
+  &-item-context {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+    &-tag {
+      margin-left: 6px;
+      display: flex;
+      align-items: center;
+    }
+
+    .teamix-pro-field {
+      display: flex;
+      align-items: center;
+
+      .teamix-pro-ellipsis{
+        white-space: normal;
+      }
+    }
+  }
+  &-item-context-front {
+    display: flex;
+    align-items: center;
+  }
+  &-item-content-has-extra {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    text-align: center;
+  }
+
+  &-item-content-extra {
+    &-item {
+      margin-right: 4px;
+      display: inline-block;
+    }
+  }
+
+  &-extra-custom {
+    color: var(--color-fill1-6, #848484);
+  }
+
+  // 在 ProField 里 icon 后的主要文本默认加粗。这里抵消
+  .teamix-icon + span.teamix-pro-field-output-bold {
+    font-weight: unset;
+  }
+  .teamix-icon + span.teamix-pro-ellipsis-content {
+    .teamix-pro-field-output-bold {
+      font-weight: unset;
+    }
+  }
+  .next-tree.next-node-block .next-tree-node-inner{
+    padding: 6px 0px 6px 4px !important;
+    margin: 0 0 4px 0px;
+    border-radius: 2px;
+  }
+}

package/lib/sidebar/index.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import './index.scss';
 import { ProSidebarProps } from './typing';
+export * from './typing';
+export * from './utils';
 declare const ProSidebar: React.FC<ProSidebarProps>;
 export default ProSidebar;

package/lib/sidebar/index.js

@@ -5,6 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {};
 exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
@@ -17,7 +18,38 @@ var _sidebarContainer = _interopRequireDefault(require("./components/sidebar-con
 
 var _tree = _interopRequireDefault(require("./components/tree"));
 
-var _excluded = ["dataSource", "className", "style", "searchOnChange", "showSearch", "onSelect", "treeProps", "cardProps"];
+var _ = require("..");
+
+var _actionRef = require("./utils/action-ref");
+
+var _typing = require("./typing");
+
+Object.keys(_typing).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _typing[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _typing[key];
+    }
+  });
+});
+
+var _utils2 = require("./utils");
+
+Object.keys(_utils2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _utils2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _utils2[key];
+    }
+  });
+});
+var _excluded = ["selectedKeys", "checkedKeys", "dataSource", "className", "style", "searchOnChange", "showSearch", "onSelect", "onCheck", "treeProps", "cardProps", "actionRef", "onBeforeRenderNodeEvent", "beforeRenderNode", "url", "method", "params", "data", "extendParams", "beforeRequest", "successMsg", "errorMsg", "formatParams", "formatResult", "onSuccess", "onError", "link", "scrollArea", "onExpandAllChange", "onExpandLevelChange"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -50,27 +82,144 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var cls = (0, _utils.baseClass)('teamix-pro-sidebar');
 
 var ProSidebar = function ProSidebar(props) {
-  var dataSource = props.dataSource,
-      className = props.className,
+  var selectedKeys = props.selectedKeys,
+      checkedKeys = props.checkedKeys,
+      dataSourceProp = props.dataSource,
+      _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
       style = props.style,
       _searchOnChange = props.searchOnChange,
       _props$showSearch = props.showSearch,
       showSearch = _props$showSearch === void 0 ? true : _props$showSearch,
       onSelect = props.onSelect,
+      onCheck = props.onCheck,
       treeProps = props.treeProps,
       cardProps = props.cardProps,
+      actionRefProp = props.actionRef,
+      onBeforeRenderNodeEvent = props.onBeforeRenderNodeEvent,
+      beforeRenderNode = props.beforeRenderNode,
+      _props$url = props.url,
+      url = _props$url === void 0 ? '' : _props$url,
+      _props$method = props.method,
+      method = _props$method === void 0 ? 'post' : _props$method,
+      params = props.params,
+      data = props.data,
+      extendParams = props.extendParams,
+      beforeRequest = props.beforeRequest,
+      successMsg = props.successMsg,
+      errorMsg = props.errorMsg,
+      formatParams = props.formatParams,
+      formatResult = props.formatResult,
+      onSuccess = props.onSuccess,
+      onError = props.onError,
+      link = props.link,
+      _props$scrollArea = props.scrollArea,
+      scrollArea = _props$scrollArea === void 0 ? 'all' : _props$scrollArea,
+      onExpandAllChangeProp = props.onExpandAllChange,
+      onExpandLevelChangeProp = props.onExpandLevelChange,
       others = _objectWithoutProperties(props, _excluded); // 搜索的关键词
 
 
   var _useState = (0, _react.useState)(),
       _useState2 = _slicedToArray(_useState, 2),
       searchKey = _useState2[0],
-      setSearchKey = _useState2[1];
+      setSearchKey = _useState2[1]; // loading 状态
+
+
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1]; // 数据源
+
+
+  var _useState5 = (0, _react.useState)(dataSourceProp !== null && dataSourceProp !== void 0 ? dataSourceProp : []),
+      _useState6 = _slicedToArray(_useState5, 2),
+      dataSource = _useState6[0],
+      setDataSource = _useState6[1]; // 展开全部状态
+
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      expandAllState = _useState8[0],
+      setExpandAllState = _useState8[1]; // 展开层级状态
+
+
+  var _useState9 = (0, _react.useState)(0),
+      _useState10 = _slicedToArray(_useState9, 2),
+      expandLevelState = _useState10[0],
+      setExpandLevelState = _useState10[1]; // 树层级
+
+
+  var _useState11 = (0, _react.useState)(0),
+      _useState12 = _slicedToArray(_useState11, 2),
+      expandLevel = _useState12[0],
+      setExpandLevel = _useState12[1];
+
+  var actionRef = (0, _react.useRef)(); // const requestDataKey = method.toLowerCase() === 'get' ? 'params' : 'data';
+
+  var requestConfig = {
+    url: url,
+    method: method,
+    params: params,
+    data: data,
+    extendParams: extendParams,
+    beforeRequest: beforeRequest,
+    successMsg: successMsg,
+    errorMsg: errorMsg,
+    formatParams: formatParams,
+    formatResult: formatResult,
+    onSuccess: onSuccess,
+    onError: onError,
+    link: link
+  };
+  (0, _react.useEffect)(function () {
+    if (url) {
+      request();
+    } else {
+      setLoading(false);
+    }
+  }, []);
+  (0, _react.useEffect)(function () {
+    setDataSource(dataSourceProp !== null && dataSourceProp !== void 0 ? dataSourceProp : []);
+  }, [dataSourceProp]); // 请求数据
+
+  var request = function request() {
+    setLoading(true);
+    (0, _utils.doCommonRequest)(requestConfig).then(function (resp) {
+      setDataSource(resp);
+    }).finally(function () {
+      setLoading(false);
+    });
+  };
+
+  (0, _actionRef.useActionType)(actionRefProp !== null && actionRefProp !== void 0 ? actionRefProp : actionRef, {
+    refresh: function refresh() {
+      request();
+    }
+  }); // 展开全部变化回调
+
+  var onExpandAllChange = function onExpandAllChange(status) {
+    setExpandAllState(status);
+    onExpandAllChangeProp === null || onExpandAllChangeProp === void 0 ? void 0 : onExpandAllChangeProp(status);
+  }; // 展开层级回调
+
+
+  var onExpandLevelChange = function onExpandLevelChange(level) {
+    setExpandLevelState(level);
+    onExpandLevelChangeProp === null || onExpandLevelChangeProp === void 0 ? void 0 : onExpandLevelChangeProp(level);
+  }; // DataSource 变化回调。用于更新层级
+
+
+  var onDataSourceChange = function onDataSourceChange(dataSource) {
+    var level = (0, _.getTreeLevel)(dataSource);
+    setExpandLevel(level);
+  };
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: cls(_defineProperty({
-      '': true
-    }, className, true)),
+    className: "".concat(cls({
+      '': true,
+      'scroll-tree': scrollArea === 'tree'
+    }), " ").concat(className),
     style: style
   }, /*#__PURE__*/_react.default.createElement(_sidebarContainer.default, _objectSpread(_objectSpread({
     searchOnChange: function searchOnChange(value) {
@@ -79,11 +228,25 @@ var ProSidebar = function ProSidebar(props) {
         setSearchKey(value);
       }
     },
-    showSearch: showSearch
-  }, others), cardProps), /*#__PURE__*/_react.default.createElement(_tree.default, _objectSpread({
+    onExpandAllChange: onExpandAllChange,
+    onExpandLevelChange: onExpandLevelChange,
+    showSearch: showSearch,
+    scrollArea: scrollArea,
+    expandLevel: expandLevel,
+    isTree: (0, _.getTreeLevel)(dataSource) > 1 ? true : false
+  }, others), cardProps), loading && /*#__PURE__*/_react.default.createElement(_.ProSkeletonRaw.SideBar, null), !loading && /*#__PURE__*/_react.default.createElement(_tree.default, _objectSpread({
     dataSource: dataSource,
     searchKey: searchKey,
-    onSelect: onSelect
+    onSelect: onSelect,
+    onCheck: onCheck,
+    selectedKeys: selectedKeys,
+    checkedKeys: checkedKeys,
+    actionRef: actionRefProp !== null && actionRefProp !== void 0 ? actionRefProp : actionRef,
+    onBeforeRenderNodeEvent: onBeforeRenderNodeEvent,
+    beforeRenderNode: beforeRenderNode,
+    expandAll: expandAllState,
+    expandLevel: expandLevelState,
+    onDataSourceChange: onDataSourceChange
   }, treeProps))));
 };
 

package/lib/sidebar/index.scss

@@ -1,3 +1,26 @@
+@import '../common.scss';
+
 .teamix-pro-sidebar {
   color: var(--color-brand1-6);
-}
+  .teamix-pro-card {
+    background: transparent;
+  }
+
+  &-scroll-tree {
+    height: calc(100% - var(--s-4, 16px) - 40px);
+    .teamix-pro-sidebar-container,
+    .teamix-pro-card,
+    .next-card-content-container,
+    .teamix-pro-card-content {
+      height: 100%;
+    }
+    .teamix-pro-sidebar-container-context {
+      @include hybridcloud-scrollbar;
+      overflow: auto;
+    }
+  }
+
+  .next-form-preview {
+    color: unset;
+  }
+}

package/lib/sidebar/typing.d.ts

@@ -1,38 +1,66 @@
 /// <reference types="react" />
 import { MessageProps } from '@alifd/next/types/message';
 import { TreeProps } from '@alifd/next/types/tree';
-import { ProCardProps, ProFieldProps } from '..';
+import { CommonRequestConfig, ProTagItem } from '@teamix/utils';
+import { ProActionConfig, ProCardProps, ProFieldProps, ProFieldRenderProps, ProFieldType } from '..';
 /** ProSidebar 定义 */
 export declare type ProSidebarProps = {
     /** 数据源 */
     dataSource?: ProSidebarDataSource;
+    /** 点击的节点 */
+    selectedKeys?: TreeProps['selectedKeys'];
+    /** 选中的节点 */
+    checkedKeys?: TreeProps['checkedKeys'];
     /** 节点点击回调 */
     onSelect?: TreeProps['onSelect'];
+    /** 节点选中回调 */
+    onCheck?: TreeProps['onCheck'];
     /** 树配置 */
     treeProps?: TreeProps;
     /** 卡片配置 */
     cardProps?: ProCardProps;
-} & Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> & Omit<ProSidebarContainerProps, 'onSelect'>;
+    /** 显示数量 */
+    showExtraNumber?: boolean;
+    /** actionRef */
+    actionRef?: React.MutableRefObject<ProSidebarActionType | undefined>;
+    /** 渲染树节点之前的回调 dataSource 变动时调用 */
+    beforeRenderNode?: (item: ProSidebarDataSourceItem, level: number, dataSource: ProSidebarDataSource) => ProSidebarDataSourceItem;
+    /** 监听渲染树节点之前的事件 当节点状态改变、dataSource 变动时调用 */
+    onBeforeRenderNodeEvent?: (item: ProSidebarDataSourceItem, checkedKeys: TreeProps['checkedKeys'], selectedKeys: TreeProps['selectedKeys'], dataSource: ProSidebarDataSource) => ProSidebarDataSourceItem;
+} & Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> & Omit<ProSidebarContainerProps, 'onSelect'> & ProSidebarRequestProps;
 /** 数据源定义 */
 export declare type ProSidebarDataSource = ProSidebarDataSourceItem[];
 export declare type ProSidebarDataSourceItem = {
     /** 展示值 */
-    label?: React.ReactNode;
+    label?: string;
     /** 绑定值 */
     value?: any;
-    /** icon */
-    icon?: React.ReactNode;
     /** 标签 */
-    tag?: React.ReactNode;
+    tag?: ProTagItem;
     /** 右侧操作、状态区 */
-    extra?: React.ReactNode;
+    extra?: ProSidebarExtraProps;
     /** 子项 */
     children?: ProSidebarDataSourceItem[];
+    /** label 类型 对应 ProFieldType */
+    valueType?: ProFieldType;
+    /** 渲染 label 的 render 对应 ProFieldRenderProps */
+    render?: ProFieldRenderProps;
+    /** ProField 的其他配置项 */
+    fieldProps?: ProFieldProps;
 };
-/** tag 定义 */
-export declare type ProSidebarDataSourceTag = {
-    /** 显示值 */
-    value: string;
+/** 单项 extra 配置项 */
+export declare type ProSidebarExtraProps = React.ReactNode | (ProSidebarExtraPropsItem | React.ReactNode)[];
+export declare type ProSidebarExtraPropsItem = {
+    /** 相应功能项 */
+    type: 'action' | 'iconSwitch' | 'iconAction' | 'custom';
+    /** action 相应配置 */
+    action: ProActionConfig;
+    /** 相应配置 */
+    props: any;
+    /** 是否 hover 显示 */
+    hover?: boolean;
+    /** 自定义渲染 仅在 custom 有效 */
+    trigger?: any;
 };
 /** sidebar 容器定义 */
 export declare type ProSidebarContainerProps = {
@@ -53,12 +81,54 @@ export declare type ProSidebarContainerProps = {
     customMessage?: React.ReactNode;
     /** 消息通知区域的其他参数 */
     messageProps?: MessageProps;
+    /** 滚动区域 仅在使用 ProPageContainer 时有效 */
+    scrollArea?: 'all' | 'tree';
+    /** 是否显示展开全部 */
+    showExpandAll?: boolean;
+    /** 是否显示展开层级 */
+    showExpandLevel?: boolean;
+    /** 展开全部变化回调 */
+    onExpandAllChange?: (state: boolean) => void;
+    /** 展开层级变化回调 */
+    onExpandLevelChange?: (state: number) => void;
+    /** 展开层级 层级 */
+    expandLevel?: number;
+    /** 列表 or tree */
+    isTree?: boolean;
 } & ProCardProps;
 /** ProSidebarTree 内容定义 */
 export declare type ProSidebarTreeProps = {
     dataSource?: ProSidebarDataSource;
     /** 搜索过滤关键词 */
     searchKey?: string;
-    /** 节点点击回调 */
-    onChange?: ProSidebarProps['onChange'];
+    /** 显示数量 */
+    showExtraNumber?: ProSidebarProps['showExtraNumber'];
+    /** actionRef */
+    actionRef: React.MutableRefObject<ProSidebarActionType | undefined>;
+    /** 渲染树节点之前的回调 */
+    onBeforeRenderNodeEvent?: ProSidebarProps['onBeforeRenderNodeEvent'];
+    /** 渲染树节点之前的回调 dataSource 变动时调用 */
+    beforeRenderNode?: ProSidebarProps['beforeRenderNode'];
+    /** 展开全部 */
+    expandAll?: boolean;
+    /** 展开节点层级 */
+    expandLevel?: number;
+    /** dataSource 变化的回调 */
+    onDataSourceChange?: (dataSource: ProSidebarDataSource) => void;
 } & TreeProps;
+/** ProSidebarTreeNode 内容定义 */
+export declare type ProSidebarTreeNodeProps = {
+    dataSource?: ProSidebarDataSource;
+};
+/** ProSidebar ActionRef 定义 */
+export declare type ProSidebarActionType = {
+    /** 设置树节点 */
+    setTreeNode?: (treeNode: ProSidebarDataSourceItem) => void;
+    /** 刷新 */
+    refresh?: () => void;
+};
+/** ProSidebar 请求相关定义 */
+export declare type ProSidebarRequestProps = {
+    /** 请求地址 */
+    url?: string;
+} & Omit<CommonRequestConfig, 'url'>;

package/lib/sidebar/utils/action-ref.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ProSidebarActionType } from '../typing';
+export declare function useActionType<T>(ref: React.MutableRefObject<ProSidebarActionType | undefined>, action: ProSidebarActionType): void;

package/lib/sidebar/utils/action-ref.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useActionType = useActionType;
+
+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 useActionType(ref, action) {
+  var _ref$current;
+
+  var oldActions = (_ref$current = ref.current) !== null && _ref$current !== void 0 ? _ref$current : {}; // 合并自定义事件
+
+  var userAction = _objectSpread(_objectSpread({}, oldActions), action);
+
+  ref.current = userAction;
+}

package/lib/sidebar/utils/index.d.ts

@@ -0,0 +1,71 @@
+/**
+ * 深度遍历节点
+ * @param data 数据
+ * @param func 处理方法
+ * @param aliasMap 标识
+ * @param level 深度
+ */
+export declare function loop<T>(data: T[], func: any, aliasMap?: {
+    children: string;
+}, level?: number): void;
+/**
+ * 深度遍历并查找节点（只保留二级路径）
+ * @param data 数据
+ * @param predicate 条件
+ * @param aliasMap 标识
+ * @returns
+ */
+export declare function findNodeWithoutPath<T>(data: any[], predicate: (node: T) => boolean, aliasMap?: {
+    children: string;
+}): any;
+/**
+ * 深度遍历并查找节点（保留全部路径）
+ * @param data 数据
+ * @param predicate 条件
+ * @param aliasMap 标识
+ * @returns
+ */
+export declare function findNodeWithPath<T>(data: T[], predicate: (node: T) => boolean, aliasMap?: {
+    children: string;
+}): T[];
+/**
+ * 获取树所有节点 key
+ * @param data 数据
+ * @param aliasMap 标识
+ * @returns
+ */
+export declare function getAllNodeKey<T>(data: T[], aliasMap?: {
+    key: string;
+    children: string;
+}): any[];
+/**
+ * 获取当前节点的层级
+ * @param data 数据
+ * @param value 需要获取层级的 key
+ * @param aliasMap 标识
+ * @returns
+ */
+export declare function getTreeNodeLevel(data: any[], value: any, aliasMap?: {
+    key: string;
+    children: string;
+}): number;
+/**
+ * 获取树的层级
+ * @param data 数据
+ * @param aliasMap 标识
+ * @returns
+ */
+export declare function getTreeLevel(data: any[], aliasMap?: {
+    children: string;
+}): number;
+/**
+ * 获取树层级对应的所有 key
+ * @param data
+ * @param level
+ * @param aliasMap
+ * @returns
+ */
+export declare function getTreeLevelKey(data: any[], level: number, aliasMap?: {
+    key: string;
+    children: string;
+}): any[];