shineout 3.7.0-beta.27 → 3.7.0-beta.28

package/cjs/index.js

@@ -522,5 +522,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // 此文件由脚本自动生成，请勿直接修改。
 // This file was generated automatically by a script. Please do not modify it directly.
 var _default = exports.default = {
-  version: '3.7.0-beta.27'
+  version: '3.7.0-beta.28'
 };

package/dist/shineout.js

@@ -12226,7 +12226,7 @@ var handleStyle = function handleStyle(style) {
 };
 /* harmony default export */ var jss_style_handleStyle = (handleStyle);
 ;// CONCATENATED MODULE: ../shineout-style/src/version.ts
-/* harmony default export */ var version = ('3.7.0-beta.27');
+/* harmony default export */ var version = ('3.7.0-beta.28');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -28130,10 +28130,26 @@ var useTransferStyle = styled(transfer_transfer, 'transfer');
 /* harmony default export */ var shineout_style_src_transfer = ((/* unused pure expression or super */ null && (useTransferStyle)));
 ;// CONCATENATED MODULE: ../shineout-style/src/tree/tree.ts
 
+var childNodeMarginLeft = 12;
 var treeStyle = {
   rootClass: {},
   tree: {},
   virtual: {},
+  sizeSmall: {
+    '&$line $node': {
+      '&:last-child': {
+        '&::before': {
+          top: 0,
+          height: 14
+        }
+      },
+      '&::before': {
+        top: -2,
+        height: 'calc(100% + 2px)'
+      }
+    }
+  },
+  sizeLarge: {},
   notTree: {
     '&$root > $node$leaf': {
       paddingLeft: 0
@@ -28157,26 +28173,6 @@ var treeStyle = {
         height: 'calc(100% + 6px)',
         width: 1,
         background: src.treeLineBackgroundColor
-      },
-      '&[dir=ltr]::after': {
-        left: 0
-      },
-      '&[dir=rtl]::after': {
-        right: 0
-      },
-      '&::after': {
-        content: '""',
-        position: 'absolute',
-        top: 18,
-        height: 1,
-        width: 16,
-        background: src.treeLineBackgroundColor
-      }
-    },
-    '& $node:first-child': {},
-    '& $node:first-child:last-child': {
-      '&::before,&::after': {
-        display: 'none'
       }
     },
     '& $node:last-child': {
@@ -28187,19 +28183,118 @@ var treeStyle = {
     },
     '& $contentWrapper': {},
     '& $iconWrapper': {
+      width: 24,
       '&[dir=ltr]': {
-        left: 16
+        left: -24
       },
       '&[dir=rtl]': {
-        right: 16
-      },
-      width: 24,
-      '& $icon': {
-        // width: 16,
+        right: -24
       }
     },
     '& $childnode': {
-      marginLeft: 12
+      marginLeft: childNodeMarginLeft,
+      '&$contentWrapper': {
+        position: 'relative',
+        '&::after': {
+          content: '""',
+          position: 'absolute',
+          top: 18,
+          left: 0,
+          marginLeft: -24,
+          transform: 'translate(-100%, 0)',
+          height: 1,
+          width: 16,
+          background: src.treeLineBackgroundColor
+        }
+      }
+    },
+    '& $leaf': {
+      '& $contentWrapper': {
+        position: 'relative',
+        '&::after': {
+          content: '""',
+          position: 'absolute',
+          top: 18,
+          left: 0,
+          marginLeft: -24,
+          transform: 'translate(-100%, 0)',
+          height: 1,
+          width: 16,
+          background: src.treeLineBackgroundColor
+        }
+      }
+    },
+    '& $childnode[dir=rtl]': {
+      '&$contentWrapper': {
+        '&::after': {
+          top: '50%',
+          right: 0,
+          transform: 'translate(100%, -50%)'
+        }
+      }
+    },
+    '&$sizeSmall $contentWrapper::after': {
+      display: 'none'
+    },
+    '&$sizeLarge': {
+      '& $node:last-child::before': {
+        height: 21
+      },
+      '& $iconWrapper': {
+        '&[dir=ltr]': {
+          left: -32
+        },
+        '&[dir=rtl]': {
+          right: -32
+        }
+      },
+      '& $childnode, & $leaf': {
+        marginLeft: 20
+      },
+      '& $node': {
+        paddingLeft: 32,
+        '&[dir=ltr]::before': {
+          left: 4
+        },
+        '&[dir=rtl]::before': {
+          right: 4
+        },
+        '&::before': {
+          top: -4,
+          height: 'calc(100% + 4px)'
+        }
+      },
+      '& $node$leaf': {
+        '&[dir=ltr]::before': {
+          left: -16
+        },
+        '&[dir=rtl]::before': {
+          right: -16
+        },
+        '&::after': {
+          left: -14
+        }
+      },
+      '& > $root > $node': {
+        paddingLeft: 12
+      },
+      '& $leaf $contentWrapper::after': {
+        left: -24,
+        top: 21,
+        transform: 'translate(0, -50%)'
+      },
+      '& $contentWrapper$childnode::after': {
+        top: 21,
+        marginLeft: -32
+      }
+    },
+    '& > $root > $node': {
+      paddingLeft: 12,
+      '& > $contentWrapper': {
+        '&::after': {
+          display: 'none'
+        }
+      }
     }
   },
   noline: {
@@ -28233,30 +28328,19 @@ var treeStyle = {
       '& > $node': {
         paddingLeft: 24
       }
+    },
+    '&$sizeLarge': {
+      '& > $root > $node, & $node$leaf': {
+        paddingLeft: 32
+      }
     }
   },
   root: {
-    // '& > :first-child$node': {
-    //   '&::before': {
-    //     top: 18,
-    //   },
-    // },
-    // '& > :last-child$node': {
-    //   '&::before': {},
-    // },
     '& > $node': {
       paddingLeft: 12,
       '&$leaf': {
         paddingLeft: 24
       },
-      '& > $contentWrapper > $iconWrapper': {
-        '&[dir=ltr]': {
-          left: 0
-        },
-        '&[dir=rtl]': {
-          right: 0
-        }
-      },
       '&::before': {
         display: 'none'
       },
@@ -28270,7 +28354,13 @@ var treeStyle = {
   contentWrapper: {
     display: 'flex',
     alignItems: 'flex-start',
-    padding: '5px 0'
+    padding: '5px 0',
+    '$sizeSmall &': {
+      padding: '1px 0'
+    },
+    '$sizeLarge & $text': {
+      lineHeight: '28px'
+    }
   },
   inlineContent: {
     display: 'inline-flex'
@@ -28291,15 +28381,6 @@ var treeStyle = {
     display: 'flex',
     alignItems: 'center',
     marginLeft: 4,
-    // 'label&': {
-    //   cursor: 'pointer',
-    //   userSelect: 'none',
-    // },
-
-    // '$iconWrapper + &': {
-    //   marginLeft: 4,
-    // },
-
     '$contentDisabled &': {
       '& $text': {
         color: src.treeContentDisabledFontColor
@@ -28316,7 +28397,11 @@ var treeStyle = {
   checkbox: {
     '&[class*="checkbox-wrapper"]': {
       height: 26,
+      alignSelf: 'flex-start',
       marginRight: src.treeCheckboxMarginX
+    },
+    '$sizeLarge &': {
+      marginTop: 4
     }
   },
   text: {
@@ -28335,19 +28420,30 @@ var treeStyle = {
       background: src.treeContentHoverBackgroundColor
     }
   },
-  // textDisabled: {
-  //   color: Token.treeItemDisabledFontColor,
-  // },
   list: {},
   node: {
     position: 'relative',
     paddingLeft: 28,
-    '&$leaf': {
-      paddingLeft: 40,
-      '&::after': {
-        width: 12
+    '$sizeSmall$line &': {
+      paddingLeft: 12,
+      '&$leaf': {
+        paddingLeft: 24
+      },
+      "&::after": {
+        position: 'absolute',
+        content: '""',
+        top: 28,
+        width: 1,
+        height: 'calc(100% - 28px)',
+        background: src.treeLineBackgroundColor
       }
     },
+    '$sizeLarge &': {
+      paddingLeft: 32
+    },
+    '&$leaf': {
+      paddingLeft: 40
+    },
     '&[draggable="true"]': {
       cursor: 'pointer'
     }
@@ -28363,7 +28459,8 @@ var treeStyle = {
     },
     position: 'absolute',
     width: 24,
-    height: 26,
+    height: 24,
+    margin: '1px 0',
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -28371,11 +28468,16 @@ var treeStyle = {
       '& $icon': {
         transform: 'rotate(0deg)'
       }
+    },
+    '$sizeLarge &': {
+      width: 32,
+      height: 32,
+      top: 5
     }
   },
   icon: {
-    width: 24,
-    height: 24,
+    width: '100%',
+    height: '100%',
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -28391,7 +28493,10 @@ var treeStyle = {
       background: src.treeItemActiveBackgroundColor
     },
     '& svg': {
-      width: 14
+      width: 14,
+      '$sizeLarge &': {
+        width: 16
+      }
     }
   },
   children: {},
@@ -53692,7 +53797,8 @@ var TreeCheckbox = function TreeCheckbox(props) {
     id = props.id,
     onChange = props.onChange,
     disabled = props.disabled,
-    checked = props.checked;
+    checked = props.checked,
+    size = props.size;
   var _useTreeContext = useTreeContext(),
     unBindUpdate = _useTreeContext.unBindUpdate;
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
@@ -53709,7 +53815,8 @@ var TreeCheckbox = function TreeCheckbox(props) {
     checked: checked,
     disabled: disabled,
     onChange: onChange,
-    needStopPropagation: true
+    needStopPropagation: true,
+    size: size
   });
 };
 /* harmony default export */ var tree_checkbox = (TreeCheckbox);
@@ -53756,7 +53863,8 @@ var NodeContent = function NodeContent(props) {
   var forceUpdate = useRender();
   var _useTreeContext = useTreeContext(),
     isDisabled = _useTreeContext.isDisabled,
-    bindUpdate = _useTreeContext.bindUpdate;
+    bindUpdate = _useTreeContext.bindUpdate,
+    size = _useTreeContext.size;
   var config = useConfig();
   var disabled = isDisabled(id);
   bindUpdate(id, forceUpdate);
@@ -53880,6 +53988,7 @@ var NodeContent = function NodeContent(props) {
   };
   var renderCheckbox = function renderCheckbox() {
     return /*#__PURE__*/(0,jsx_runtime.jsx)(tree_checkbox, {
+      size: size,
       jssStyle: jssStyle,
       id: id,
       disabled: disabled,
@@ -54377,7 +54486,8 @@ var VirtualNode = function VirtualNode(props) {
     onChange = props.onChange,
     onNodeClick = props.onNodeClick,
     onToggle = props.onToggle,
-    actionOnClick = props.actionOnClick;
+    actionOnClick = props.actionOnClick,
+    size = props.size;
   var config = useConfig();
   var datum = useTreeContext();
   var element = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
@@ -54418,12 +54528,13 @@ var VirtualNode = function VirtualNode(props) {
     });
     if (onToggle) onToggle(id, nextExpanded);
   };
+  var indent = size === "large" ? 32 : 24;
   return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
     ref: element,
     className: rootClass,
     dir: config.direction,
     style: {
-      paddingLeft: level * 24
+      paddingLeft: level * indent
     },
     children: /*#__PURE__*/(0,jsx_runtime.jsx)(tree_content, {
       virtual: true,
@@ -54635,11 +54746,15 @@ var Root = function Root(props) {
 
 
 
+var SIZE_MAP = {
+  'small': 28,
+  'default': 36,
+  'large': 42
+};
 var TreeVirtual = function TreeVirtual(props) {
   var jssStyle = props.jssStyle,
     height = props.height,
-    _props$lineHeight = props.lineHeight,
-    lineHeight = _props$lineHeight === void 0 ? 36 : _props$lineHeight,
+    lineHeightProp = props.lineHeight,
     rowsInView = props.rowsInView,
     line = props.line,
     mode = props.mode,
@@ -54664,6 +54779,7 @@ var TreeVirtual = function TreeVirtual(props) {
     onToggle = props.onToggle,
     onChange = props.onChange;
   var datum = useTreeContext();
+  var lineHeight = lineHeightProp || SIZE_MAP[datum.size || 'default'];
   var renderItem = function renderItem(item, index) {
     var id = item.id,
       data = item.data,
@@ -54696,7 +54812,8 @@ var TreeVirtual = function TreeVirtual(props) {
       expanded: expanded,
       onNodeClick: onNodeClick,
       onToggle: onToggle,
-      onChange: onChange
+      onChange: onChange,
+      size: datum.size
     }, id);
   };
   return /*#__PURE__*/(0,jsx_runtime.jsx)(virtual_scroll_list, {
@@ -54828,7 +54945,7 @@ var Tree = function Tree(props) {
     expanded = _useTree.expanded,
     onExpand = _useTree.onExpand;
   var treeStyle = (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.tree()) || {};
-  var rootClass = classnames_default()(treeStyle.rootClass, treeStyle.tree, className, defineProperty_default()(defineProperty_default()(defineProperty_default()({}, treeStyle.line, line), treeStyle.noline, !line), treeStyle.virtual, virtual));
+  var rootClass = classnames_default()(treeStyle.rootClass, treeStyle.tree, className, defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()({}, treeStyle.line, line), treeStyle.noline, !line), treeStyle.virtual, virtual), treeStyle.sizeSmall, props.size === 'small'), treeStyle.sizeLarge, props.size === 'large'));
   var getDragImageSelector = function getDragImageSelector(data) {
     if (isFunc(dragImageSelector)) return dragImageSelector(data);
     return dragImageSelector;
@@ -55019,7 +55136,9 @@ var Tree = function Tree(props) {
     id: fieldId
   }, rest), {}, {
     children: /*#__PURE__*/(0,jsx_runtime.jsx)(tree_context_Provider, {
-      value: datum,
+      value: objectSpread2_default()(objectSpread2_default()({}, datum), {}, {
+        size: props.size
+      }),
       children: renderList()
     })
   }));
@@ -63783,7 +63902,7 @@ var emptyRef = {
   current: null
 };
 /* harmony default export */ var src_table_table = (function (props) {
-  var _props$jssStyle, _props$jssStyle$table, _props$data, _columns$find;
+  var _props$jssStyle, _props$jssStyle$table, _columns$find;
   var _props$verticalAlign = props.verticalAlign,
     verticalAlign = _props$verticalAlign === void 0 ? 'top' : _props$verticalAlign,
     _props$size = props.size,
@@ -63835,7 +63954,7 @@ var emptyRef = {
       scrollingTimer: null
     }),
     context = _useRef.current;
-  var virtual = !fakeVirtual && ((_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.length) && props.rowsInView !== 0 && (!!props.virtual || props.fixed === 'both' || props.fixed === 'y' || props.fixed === 'auto');
+  var virtual = !fakeVirtual && props.rowsInView !== 0 && (!!props.virtual || props.fixed === 'both' || props.fixed === 'y' || props.fixed === 'auto');
 
   // 虚拟列表高度另外计算
   var _useResize = useResize({
@@ -64042,8 +64161,8 @@ var emptyRef = {
     }, 100);
   });
   var renderEmpty = function renderEmpty() {
-    var _props$data2;
-    if (!((_props$data2 = props.data) !== null && _props$data2 !== void 0 && _props$data2.length) || filteredData !== undefined && filteredData.length === 0) {
+    var _props$data;
+    if (!((_props$data = props.data) !== null && _props$data !== void 0 && _props$data.length) || filteredData !== undefined && filteredData.length === 0) {
       return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
         className: classnames_default()(tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.emptyWrapper, isScrollX && (tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.emptyNoBorder)),
         ref: function ref(el) {
@@ -64058,7 +64177,7 @@ var emptyRef = {
   };
   var $empty = renderEmpty();
   var renderTable = function renderTable() {
-    var _props$summary, _sticky$top, _props$data3;
+    var _props$summary, _sticky$top, _props$data2;
     var Group = /*#__PURE__*/(0,jsx_runtime.jsx)(table_colgroup, {
       colgroup: colgroup,
       columns: columns,
@@ -64142,7 +64261,7 @@ var emptyRef = {
         }
       }
     };
-    var isRenderVirtualTable = virtual || props.sticky || !((_props$data3 = props.data) !== null && _props$data3 !== void 0 && _props$data3.length);
+    var isRenderVirtualTable = virtual || props.sticky || !((_props$data2 = props.data) !== null && _props$data2 !== void 0 && _props$data2.length);
     var headWrapperClass = classnames_default()(tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.headWrapper, !!$empty && tableClasses.emptyHeader, props.sticky && isScrollY && tableClasses.scrollY, props.sticky && !isScrollY && tableClasses.scrollX);
     var footWrapperClass = classnames_default()(tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.footWrapper);
     var renderHeadMirrorScroller = function renderHeadMirrorScroller() {
@@ -64234,7 +64353,7 @@ var emptyRef = {
       })
     }));
     if (isRenderVirtualTable) {
-      var _props$data4;
+      var _props$data3;
       var showStickyHeader = !props.hideHeader && props.sticky;
       return /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
         children: [renderHeadMirrorScroller(), showStickyHeader && /*#__PURE__*/(0,jsx_runtime.jsx)(StickyWrapper, objectSpread2_default()(objectSpread2_default()({}, stickyProps), {}, {
@@ -64256,7 +64375,7 @@ var emptyRef = {
           isEmpty: !!$empty,
           tableRef: tableRef,
           setFakeVirtual: setFakeVirtual,
-          children: [!props.hideHeader && !props.sticky && $headTable, !!((_props$data4 = props.data) !== null && _props$data4 !== void 0 && _props$data4.length) && /*#__PURE__*/(0,jsx_runtime.jsxs)("table", {
+          children: [!props.hideHeader && !props.sticky && $headTable, !!((_props$data3 = props.data) !== null && _props$data3 !== void 0 && _props$data3.length) && /*#__PURE__*/(0,jsx_runtime.jsxs)("table", {
             style: {
               width: width,
               transform: virtualInfo.translateStyle
@@ -70818,7 +70937,7 @@ var upload_interface = __webpack_require__(8821);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.7.0-beta.27'
+  version: '3.7.0-beta.28'
 });
 }();
 /******/ 	return __webpack_exports__;