@hi-ui/layout 5.0.0-canary.0 → 5.0.0-canary.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @hi-ui/layout
2
2
 
3
+ ## 5.0.0-canary.2
4
+
5
+ ### Patch Changes
6
+
7
+ - 07e7b975b: style(layout): 修改 Sider 收起时宽度为 60px & 增加 width 参数 (5.0)
8
+ - Updated dependencies [07e7b975b]
9
+ - @hi-ui/menu@5.0.0-canary.6
10
+
11
+ ## 5.0.0-canary.1
12
+
13
+ ### Patch Changes
14
+
15
+ - ad5d98fff: style(layout): Sider 组件默认宽度改为 180px (5.0)
16
+
3
17
  ## 4.1.0-canary.0
4
18
 
5
19
  ### Minor Changes
package/lib/cjs/Sider.js CHANGED
@@ -26,6 +26,9 @@ function _interopDefaultCompat(e) {
26
26
  }
27
27
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
28
28
  var SIDER_PREFIX = classname.getPrefixCls('sider');
29
+ var DEFAULT_SIDER_WIDTH = 180;
30
+ var SIDER_WIDTH_MIN = 60;
31
+ var SIDER_WIDTH_MIN_COLLAPSED = 150;
29
32
  /**
30
33
  * 侧边栏组件
31
34
  */
@@ -36,31 +39,33 @@ var Sider = /*#__PURE__*/React.forwardRef(function (_a, ref) {
36
39
  _a$role = _a.role,
37
40
  role = _a$role === void 0 ? 'sider' : _a$role,
38
41
  className = _a.className,
42
+ widthProp = _a.width,
39
43
  collapsedProp = _a.collapsed,
40
44
  onCollapse = _a.onCollapse,
41
45
  children = _a.children,
42
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "collapsed", "onCollapse", "children"]);
46
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "width", "collapsed", "onCollapse", "children"]);
43
47
  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(false, collapsedProp, onCollapse),
44
48
  collapsed = _useUncontrolledState[0],
45
49
  setCollapsed = _useUncontrolledState[1];
46
- var _useState = React.useState(collapsedProp ? 68 : 200),
50
+ var siderWidth = widthProp || DEFAULT_SIDER_WIDTH;
51
+ var _useState = React.useState(collapsedProp ? SIDER_WIDTH_MIN : siderWidth),
47
52
  width = _useState[0],
48
53
  setWidth = _useState[1];
49
54
  var handleResize = function handleResize(evt, options) {
50
55
  var _a;
51
56
  var width = (_a = options === null || options === void 0 ? void 0 : options.size) === null || _a === void 0 ? void 0 : _a.width;
52
- if (!collapsed && width < 150) {
53
- width = 68;
57
+ if (!collapsed && width < SIDER_WIDTH_MIN_COLLAPSED) {
58
+ width = SIDER_WIDTH_MIN;
54
59
  setCollapsed(true);
55
60
  }
56
- if (collapsed && width > 68) {
57
- width = 200;
61
+ if (collapsed && width > SIDER_WIDTH_MIN) {
62
+ width = siderWidth;
58
63
  setTimeout(function () {
59
64
  setCollapsed(false);
60
65
  }, 300);
61
66
  }
62
- if (width < 68) {
63
- width = 68;
67
+ if (width < SIDER_WIDTH_MIN) {
68
+ width = SIDER_WIDTH_MIN;
64
69
  }
65
70
  setWidth(width);
66
71
  };
@@ -12,7 +12,7 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
- var css_248z = ".hi-v5-layout {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;position: relative;min-width: 0;min-height: 0;}.hi-v5-sider {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;position: relative;width: auto;height: 100%;overflow: auto;}.hi-v5-sider--collapsed {-webkit-transition: width 0.4s;transition: width 0.4s;}.hi-v5-sider__resizable-handler {position: absolute;z-index: 9;top: 0;right: 0;width: 2px;height: 100%;border-left: 2px solid transparent;border-right: 2px solid transparent;cursor: col-resize;background-color: #2b64ff;background-clip: content-box;opacity: 0;-webkit-transition: opacity 0.2s;transition: opacity 0.2s;}.hi-v5-sider__resizable-handler:hover {opacity: 1;}.hi-v5-sider .hi-v5-scrollbar__wrapper {width: auto;}.hi-v5-sider .hi-v5-menu {width: auto;height: auto;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner {margin-bottom: var(--hi-v5-spacing-4, 8px) !important;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner:not(.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--active):hover {background-color: rgba(124, 135, 166, 0.15);}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--active {background-color: #fff;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--active .hi-v5-menu-item__icon {color: #2b64ff;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--active-p .hi-v5-menu-item__icon {color: #2b64ff;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__icon {color: #7c87a6;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__arrow {color: #60636b;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-submenu .hi-v5-menu-item__inner {margin-bottom: 0 !important;}.hi-v5-menu-popmenu {width: 160px !important;}.hi-v5-content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: 0 16px;overflow: auto;}.hi-v5-search-trigger {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;gap: 8px;height: 32px;margin: 0 8px 12px;font-size: 16px;color: var(--hi-v5-color-gray-500, #91959e);background-color: rgba(113, 126, 163, 0.1);cursor: pointer;border-radius: 9999px;}.hi-v5-search-trigger:not(.hi-v5-search-trigger--mini) {padding: 0 12px;}.hi-v5-search-trigger--mini {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;width: 32px;margin-left: auto;margin-right: auto;}.hi-v5-search-trigger__placeholder {font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);}";
15
+ var css_248z = ".hi-v5-layout {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;position: relative;min-width: 0;min-height: 0;}.hi-v5-sider {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;position: relative;width: auto;height: 100%;overflow: auto;}.hi-v5-sider--collapsed {-webkit-transition: width 0.4s;transition: width 0.4s;}.hi-v5-sider__resizable-handler {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;z-index: 9;top: 0;right: 0;width: 2px;height: 100%;border-left: 2px solid transparent;border-right: 2px solid transparent;cursor: col-resize;background-color: #2b64ff;background-clip: content-box;opacity: 0;-webkit-transition: opacity 0.2s;transition: opacity 0.2s;}.hi-v5-sider__resizable-handler:hover {opacity: 1;}.hi-v5-sider .hi-v5-scrollbar__wrapper {width: auto;}.hi-v5-sider .hi-v5-menu {width: auto;height: auto;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner {margin-bottom: var(--hi-v5-spacing-4, 8px) !important;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner:not(.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--active):hover {background-color: rgba(124, 135, 166, 0.15);}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--active {background-color: #fff;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--active .hi-v5-menu-item__icon {color: #2b64ff;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--active-p .hi-v5-menu-item__icon {color: #2b64ff;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__icon {color: #7c87a6;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__arrow {color: #60636b;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-submenu .hi-v5-menu-item__inner {margin-bottom: 0 !important;}.hi-v5-menu-popmenu {width: 160px !important;}.hi-v5-content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: 0 16px;overflow: auto;}.hi-v5-search-trigger {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;gap: 8px;height: 32px;margin: 0 8px 12px;font-size: 16px;color: var(--hi-v5-color-gray-500, #91959e);background-color: rgba(113, 126, 163, 0.1);cursor: pointer;border-radius: 9999px;}.hi-v5-search-trigger:not(.hi-v5-search-trigger--mini) {padding: 0 12px;}.hi-v5-search-trigger--mini {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;width: 32px;margin-left: auto;margin-right: auto;}.hi-v5-search-trigger__placeholder {font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);}";
16
16
  var __styleInject__ = require('@hi-ui/style-inject')["default"];
17
17
  __styleInject__(css_248z);
18
18
  exports["default"] = css_248z;
package/lib/esm/Sider.js CHANGED
@@ -14,6 +14,9 @@ import { __DEV__ } from '@hi-ui/env';
14
14
  import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
15
15
  import { Resizable } from './node_modules/react-resizable/index.js';
16
16
  var SIDER_PREFIX = getPrefixCls('sider');
17
+ var DEFAULT_SIDER_WIDTH = 180;
18
+ var SIDER_WIDTH_MIN = 60;
19
+ var SIDER_WIDTH_MIN_COLLAPSED = 150;
17
20
  /**
18
21
  * 侧边栏组件
19
22
  */
@@ -24,31 +27,33 @@ var Sider = /*#__PURE__*/forwardRef(function (_a, ref) {
24
27
  _a$role = _a.role,
25
28
  role = _a$role === void 0 ? 'sider' : _a$role,
26
29
  className = _a.className,
30
+ widthProp = _a.width,
27
31
  collapsedProp = _a.collapsed,
28
32
  onCollapse = _a.onCollapse,
29
33
  children = _a.children,
30
- rest = __rest(_a, ["prefixCls", "role", "className", "collapsed", "onCollapse", "children"]);
34
+ rest = __rest(_a, ["prefixCls", "role", "className", "width", "collapsed", "onCollapse", "children"]);
31
35
  var _useUncontrolledState = useUncontrolledState(false, collapsedProp, onCollapse),
32
36
  collapsed = _useUncontrolledState[0],
33
37
  setCollapsed = _useUncontrolledState[1];
34
- var _useState = useState(collapsedProp ? 68 : 200),
38
+ var siderWidth = widthProp || DEFAULT_SIDER_WIDTH;
39
+ var _useState = useState(collapsedProp ? SIDER_WIDTH_MIN : siderWidth),
35
40
  width = _useState[0],
36
41
  setWidth = _useState[1];
37
42
  var handleResize = function handleResize(evt, options) {
38
43
  var _a;
39
44
  var width = (_a = options === null || options === void 0 ? void 0 : options.size) === null || _a === void 0 ? void 0 : _a.width;
40
- if (!collapsed && width < 150) {
41
- width = 68;
45
+ if (!collapsed && width < SIDER_WIDTH_MIN_COLLAPSED) {
46
+ width = SIDER_WIDTH_MIN;
42
47
  setCollapsed(true);
43
48
  }
44
- if (collapsed && width > 68) {
45
- width = 200;
49
+ if (collapsed && width > SIDER_WIDTH_MIN) {
50
+ width = siderWidth;
46
51
  setTimeout(function () {
47
52
  setCollapsed(false);
48
53
  }, 300);
49
54
  }
50
- if (width < 68) {
51
- width = 68;
55
+ if (width < SIDER_WIDTH_MIN) {
56
+ width = SIDER_WIDTH_MIN;
52
57
  }
53
58
  setWidth(width);
54
59
  };
@@ -8,6 +8,6 @@
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
10
  import __styleInject__ from '@hi-ui/style-inject';
11
- var css_248z = ".hi-v5-layout {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;position: relative;min-width: 0;min-height: 0;}.hi-v5-sider {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;position: relative;width: auto;height: 100%;overflow: auto;}.hi-v5-sider--collapsed {-webkit-transition: width 0.4s;transition: width 0.4s;}.hi-v5-sider__resizable-handler {position: absolute;z-index: 9;top: 0;right: 0;width: 2px;height: 100%;border-left: 2px solid transparent;border-right: 2px solid transparent;cursor: col-resize;background-color: #2b64ff;background-clip: content-box;opacity: 0;-webkit-transition: opacity 0.2s;transition: opacity 0.2s;}.hi-v5-sider__resizable-handler:hover {opacity: 1;}.hi-v5-sider .hi-v5-scrollbar__wrapper {width: auto;}.hi-v5-sider .hi-v5-menu {width: auto;height: auto;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner {margin-bottom: var(--hi-v5-spacing-4, 8px) !important;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner:not(.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--active):hover {background-color: rgba(124, 135, 166, 0.15);}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--active {background-color: #fff;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--active .hi-v5-menu-item__icon {color: #2b64ff;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--active-p .hi-v5-menu-item__icon {color: #2b64ff;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__icon {color: #7c87a6;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__arrow {color: #60636b;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-submenu .hi-v5-menu-item__inner {margin-bottom: 0 !important;}.hi-v5-menu-popmenu {width: 160px !important;}.hi-v5-content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: 0 16px;overflow: auto;}.hi-v5-search-trigger {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;gap: 8px;height: 32px;margin: 0 8px 12px;font-size: 16px;color: var(--hi-v5-color-gray-500, #91959e);background-color: rgba(113, 126, 163, 0.1);cursor: pointer;border-radius: 9999px;}.hi-v5-search-trigger:not(.hi-v5-search-trigger--mini) {padding: 0 12px;}.hi-v5-search-trigger--mini {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;width: 32px;margin-left: auto;margin-right: auto;}.hi-v5-search-trigger__placeholder {font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);}";
11
+ var css_248z = ".hi-v5-layout {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;position: relative;min-width: 0;min-height: 0;}.hi-v5-sider {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;position: relative;width: auto;height: 100%;overflow: auto;}.hi-v5-sider--collapsed {-webkit-transition: width 0.4s;transition: width 0.4s;}.hi-v5-sider__resizable-handler {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;z-index: 9;top: 0;right: 0;width: 2px;height: 100%;border-left: 2px solid transparent;border-right: 2px solid transparent;cursor: col-resize;background-color: #2b64ff;background-clip: content-box;opacity: 0;-webkit-transition: opacity 0.2s;transition: opacity 0.2s;}.hi-v5-sider__resizable-handler:hover {opacity: 1;}.hi-v5-sider .hi-v5-scrollbar__wrapper {width: auto;}.hi-v5-sider .hi-v5-menu {width: auto;height: auto;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner {margin-bottom: var(--hi-v5-spacing-4, 8px) !important;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner:not(.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--active):hover {background-color: rgba(124, 135, 166, 0.15);}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--active {background-color: #fff;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--active .hi-v5-menu-item__icon {color: #2b64ff;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--active-p .hi-v5-menu-item__icon {color: #2b64ff;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__icon {color: #7c87a6;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__arrow {color: #60636b;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-submenu .hi-v5-menu-item__inner {margin-bottom: 0 !important;}.hi-v5-menu-popmenu {width: 160px !important;}.hi-v5-content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: 0 16px;overflow: auto;}.hi-v5-search-trigger {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;gap: 8px;height: 32px;margin: 0 8px 12px;font-size: 16px;color: var(--hi-v5-color-gray-500, #91959e);background-color: rgba(113, 126, 163, 0.1);cursor: pointer;border-radius: 9999px;}.hi-v5-search-trigger:not(.hi-v5-search-trigger--mini) {padding: 0 12px;}.hi-v5-search-trigger--mini {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;width: 32px;margin-left: auto;margin-right: auto;}.hi-v5-search-trigger__placeholder {font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);}";
12
12
  __styleInject__(css_248z);
13
13
  export { css_248z as default };
@@ -5,6 +5,7 @@ import { HiBaseHTMLProps } from '@hi-ui/core';
5
5
  */
6
6
  export declare const Sider: React.ForwardRefExoticComponent<SiderProps & React.RefAttributes<HTMLDivElement | null>>;
7
7
  export interface SiderProps extends HiBaseHTMLProps<'div'> {
8
+ width?: number;
8
9
  collapsed?: boolean;
9
10
  onCollapse?: (collapsed: boolean) => void;
10
11
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/layout",
3
- "version": "5.0.0-canary.0",
3
+ "version": "5.0.0-canary.2",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -43,20 +43,20 @@
43
43
  "url": "https://github.com/XiaoMi/hiui/issues"
44
44
  },
45
45
  "dependencies": {
46
- "@hi-ui/classname": "^4.0.0",
47
- "@hi-ui/env": "^4.0.0",
48
- "@hi-ui/menu": "^5.0.0-canary.5",
46
+ "@hi-ui/classname": "^5.0.0-canary.2",
47
+ "@hi-ui/env": "^5.0.0-canary.2",
48
+ "@hi-ui/menu": "^5.0.0-canary.6",
49
49
  "@hi-ui/popper": "^5.0.0-canary.5",
50
- "@hi-ui/use-uncontrolled-state": "^4.0.4"
50
+ "@hi-ui/use-uncontrolled-state": "^5.0.0-canary.2"
51
51
  },
52
52
  "peerDependencies": {
53
- "@hi-ui/core": ">=4.0.0",
53
+ "@hi-ui/core": ">=5.0.0-canary.2",
54
54
  "react": ">=16.8.6",
55
55
  "react-dom": ">=16.8.6"
56
56
  },
57
57
  "devDependencies": {
58
- "@hi-ui/core": "^4.0.0",
59
- "@hi-ui/core-css": "^4.0.0",
58
+ "@hi-ui/core": "^5.0.0-canary.2",
59
+ "@hi-ui/core-css": "^5.0.0-canary.6",
60
60
  "react": "^17.0.1",
61
61
  "react-dom": "^17.0.1"
62
62
  }