@hi-ui/layout 5.0.0-canary.1 → 5.0.0-canary.3
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 +19 -0
- package/lib/cjs/CollapseIcon.js +56 -0
- package/lib/cjs/FloatMenuContainer.js +89 -0
- package/lib/cjs/SearchTrigger.js +3 -0
- package/lib/cjs/Sider.js +7 -5
- package/lib/cjs/index.js +2 -0
- package/lib/cjs/styles/index.scss.js +1 -1
- package/lib/esm/CollapseIcon.js +44 -0
- package/lib/esm/FloatMenuContainer.js +77 -0
- package/lib/esm/SearchTrigger.js +3 -0
- package/lib/esm/Sider.js +7 -5
- package/lib/esm/index.js +1 -0
- package/lib/esm/styles/index.scss.js +1 -1
- package/lib/types/CollapseIcon.d.ts +1 -0
- package/lib/types/FloatMenuContainer.d.ts +24 -0
- package/lib/types/Sider.d.ts +1 -0
- package/lib/types/index.d.ts +1 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @hi-ui/layout
|
|
2
2
|
|
|
3
|
+
## 5.0.0-canary.3
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 4075b33da: feat(layout): 增加 FloatMenuContainer 组件 (5.0)
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies [4075b33da]
|
|
12
|
+
- @hi-ui/menu@5.0.0-canary.7
|
|
13
|
+
|
|
14
|
+
## 5.0.0-canary.2
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- 07e7b975b: style(layout): 修改 Sider 收起时宽度为 60px & 增加 width 参数 (5.0)
|
|
19
|
+
- Updated dependencies [07e7b975b]
|
|
20
|
+
- @hi-ui/menu@5.0.0-canary.6
|
|
21
|
+
|
|
3
22
|
## 5.0.0-canary.1
|
|
4
23
|
|
|
5
24
|
### Patch Changes
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/** @LICENSE
|
|
2
|
+
* @hi-ui/layout
|
|
3
|
+
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
|
|
4
|
+
*
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
|
+
*
|
|
7
|
+
* This source code is licensed under the MIT license found in the
|
|
8
|
+
* LICENSE file in the root directory of this source tree.
|
|
9
|
+
*/
|
|
10
|
+
'use strict';
|
|
11
|
+
|
|
12
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
13
|
+
Object.defineProperty(exports, '__esModule', {
|
|
14
|
+
value: true
|
|
15
|
+
});
|
|
16
|
+
var React = require('react');
|
|
17
|
+
function _interopDefaultCompat(e) {
|
|
18
|
+
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
19
|
+
'default': e
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
23
|
+
var CollapseIcon = function CollapseIcon() {
|
|
24
|
+
return /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
25
|
+
width: "16",
|
|
26
|
+
height: "16",
|
|
27
|
+
viewBox: "0 0 16 16",
|
|
28
|
+
fill: "none",
|
|
29
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
30
|
+
}, /*#__PURE__*/React__default["default"].createElement("path", {
|
|
31
|
+
d: "M10 3L13 3",
|
|
32
|
+
stroke: "#60636B",
|
|
33
|
+
strokeWidth: "1.4",
|
|
34
|
+
strokeLinecap: "round",
|
|
35
|
+
strokeLinejoin: "round"
|
|
36
|
+
}), /*#__PURE__*/React__default["default"].createElement("path", {
|
|
37
|
+
d: "M10 8L13 8",
|
|
38
|
+
stroke: "#60636B",
|
|
39
|
+
strokeWidth: "1.4",
|
|
40
|
+
strokeLinecap: "round",
|
|
41
|
+
strokeLinejoin: "round"
|
|
42
|
+
}), /*#__PURE__*/React__default["default"].createElement("path", {
|
|
43
|
+
d: "M3 13L13 13",
|
|
44
|
+
stroke: "#60636B",
|
|
45
|
+
strokeWidth: "1.4",
|
|
46
|
+
strokeLinecap: "round",
|
|
47
|
+
strokeLinejoin: "round"
|
|
48
|
+
}), /*#__PURE__*/React__default["default"].createElement("path", {
|
|
49
|
+
d: "M6 8L3 5.5L6 3",
|
|
50
|
+
stroke: "#60636B",
|
|
51
|
+
strokeWidth: "1.4",
|
|
52
|
+
strokeLinecap: "round",
|
|
53
|
+
strokeLinejoin: "round"
|
|
54
|
+
}));
|
|
55
|
+
};
|
|
56
|
+
exports.CollapseIcon = CollapseIcon;
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
/** @LICENSE
|
|
2
|
+
* @hi-ui/layout
|
|
3
|
+
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
|
|
4
|
+
*
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
|
+
*
|
|
7
|
+
* This source code is licensed under the MIT license found in the
|
|
8
|
+
* LICENSE file in the root directory of this source tree.
|
|
9
|
+
*/
|
|
10
|
+
'use strict';
|
|
11
|
+
|
|
12
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
13
|
+
Object.defineProperty(exports, '__esModule', {
|
|
14
|
+
value: true
|
|
15
|
+
});
|
|
16
|
+
var tslib = require('tslib');
|
|
17
|
+
var React = require('react');
|
|
18
|
+
var classname = require('@hi-ui/classname');
|
|
19
|
+
var env = require('@hi-ui/env');
|
|
20
|
+
var CollapseIcon = require('./CollapseIcon.js');
|
|
21
|
+
function _interopDefaultCompat(e) {
|
|
22
|
+
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
23
|
+
'default': e
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
27
|
+
var FLOAT_MENU_CONTAINER_PREFIX = classname.getPrefixCls('float-menu-container');
|
|
28
|
+
/**
|
|
29
|
+
* 浮动菜单容器组件
|
|
30
|
+
*/
|
|
31
|
+
var FloatMenuContainer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
32
|
+
var _cx;
|
|
33
|
+
var _a$prefixCls = _a.prefixCls,
|
|
34
|
+
prefixCls = _a$prefixCls === void 0 ? FLOAT_MENU_CONTAINER_PREFIX : _a$prefixCls,
|
|
35
|
+
_a$role = _a.role,
|
|
36
|
+
role = _a$role === void 0 ? 'float-menu-container' : _a$role,
|
|
37
|
+
className = _a.className,
|
|
38
|
+
children = _a.children,
|
|
39
|
+
visibleProp = _a.visible,
|
|
40
|
+
width = _a.width,
|
|
41
|
+
_a$collapsed = _a.collapsed,
|
|
42
|
+
collapsedProp = _a$collapsed === void 0 ? true : _a$collapsed,
|
|
43
|
+
onCollapse = _a.onCollapse,
|
|
44
|
+
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "visible", "width", "collapsed", "onCollapse"]);
|
|
45
|
+
var cls = classname.cx(prefixCls, className);
|
|
46
|
+
var _React$useState = React__default["default"].useState(collapsedProp),
|
|
47
|
+
collapsed = _React$useState[0],
|
|
48
|
+
setCollapsed = _React$useState[1];
|
|
49
|
+
React__default["default"].useEffect(function () {
|
|
50
|
+
setCollapsed(collapsedProp);
|
|
51
|
+
}, [collapsedProp]);
|
|
52
|
+
var visible = React__default["default"].useMemo(function () {
|
|
53
|
+
return collapsed ? visibleProp : true;
|
|
54
|
+
}, [collapsed, visibleProp]);
|
|
55
|
+
var handleCollapse = function handleCollapse() {
|
|
56
|
+
var newCollapsed = !collapsed;
|
|
57
|
+
setCollapsed(newCollapsed);
|
|
58
|
+
onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse(newCollapsed);
|
|
59
|
+
};
|
|
60
|
+
return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
|
|
61
|
+
ref: ref,
|
|
62
|
+
role: role,
|
|
63
|
+
className: cls
|
|
64
|
+
}, rest, {
|
|
65
|
+
style: visible ? {
|
|
66
|
+
width: collapsed ? 0 : width
|
|
67
|
+
} : {}
|
|
68
|
+
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
69
|
+
className: classname.cx(prefixCls + "-content", (_cx = {}, _cx[prefixCls + "-content--show"] = visible, _cx[prefixCls + "-content--collapsed"] = collapsed, _cx)),
|
|
70
|
+
style: {
|
|
71
|
+
width: visible ? width : 0
|
|
72
|
+
}
|
|
73
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
74
|
+
className: classname.cx(prefixCls + "-collapse-wrapper")
|
|
75
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
76
|
+
className: classname.cx(prefixCls + "-collapse"),
|
|
77
|
+
onClick: handleCollapse
|
|
78
|
+
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
79
|
+
className: classname.cx(prefixCls + "-collapse-icon")
|
|
80
|
+
}, /*#__PURE__*/React__default["default"].createElement(CollapseIcon.CollapseIcon, null)), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
81
|
+
className: classname.cx(prefixCls + "-collapse-text")
|
|
82
|
+
}, "\u6536\u8D77"))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
83
|
+
className: classname.cx(prefixCls + "-content-wrapper")
|
|
84
|
+
}, children)));
|
|
85
|
+
});
|
|
86
|
+
if (env.__DEV__) {
|
|
87
|
+
FloatMenuContainer.displayName = 'FloatMenuContainer';
|
|
88
|
+
}
|
|
89
|
+
exports.FloatMenuContainer = FloatMenuContainer;
|
package/lib/cjs/SearchTrigger.js
CHANGED
|
@@ -64,6 +64,9 @@ var SearchTrigger = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
64
64
|
}), /*#__PURE__*/React__default["default"].createElement(searchOutlined.SearchOutlined, null), !mini && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
65
65
|
className: prefixCls + "__placeholder"
|
|
66
66
|
}, placeholder)), /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
|
|
67
|
+
classNames: {
|
|
68
|
+
container: prefixCls + "__popper-container"
|
|
69
|
+
},
|
|
67
70
|
visible: visible,
|
|
68
71
|
attachEl: innerRef.current,
|
|
69
72
|
gutterGap: -32,
|
package/lib/cjs/Sider.js
CHANGED
|
@@ -26,8 +26,8 @@ function _interopDefaultCompat(e) {
|
|
|
26
26
|
}
|
|
27
27
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
28
28
|
var SIDER_PREFIX = classname.getPrefixCls('sider');
|
|
29
|
-
var
|
|
30
|
-
var SIDER_WIDTH_MIN =
|
|
29
|
+
var DEFAULT_SIDER_WIDTH = 180;
|
|
30
|
+
var SIDER_WIDTH_MIN = 60;
|
|
31
31
|
var SIDER_WIDTH_MIN_COLLAPSED = 150;
|
|
32
32
|
/**
|
|
33
33
|
* 侧边栏组件
|
|
@@ -39,14 +39,16 @@ var Sider = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
39
39
|
_a$role = _a.role,
|
|
40
40
|
role = _a$role === void 0 ? 'sider' : _a$role,
|
|
41
41
|
className = _a.className,
|
|
42
|
+
widthProp = _a.width,
|
|
42
43
|
collapsedProp = _a.collapsed,
|
|
43
44
|
onCollapse = _a.onCollapse,
|
|
44
45
|
children = _a.children,
|
|
45
|
-
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "collapsed", "onCollapse", "children"]);
|
|
46
|
+
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "width", "collapsed", "onCollapse", "children"]);
|
|
46
47
|
var _useUncontrolledState = useUncontrolledState.useUncontrolledState(false, collapsedProp, onCollapse),
|
|
47
48
|
collapsed = _useUncontrolledState[0],
|
|
48
49
|
setCollapsed = _useUncontrolledState[1];
|
|
49
|
-
var
|
|
50
|
+
var siderWidth = widthProp || DEFAULT_SIDER_WIDTH;
|
|
51
|
+
var _useState = React.useState(collapsedProp ? SIDER_WIDTH_MIN : siderWidth),
|
|
50
52
|
width = _useState[0],
|
|
51
53
|
setWidth = _useState[1];
|
|
52
54
|
var handleResize = function handleResize(evt, options) {
|
|
@@ -57,7 +59,7 @@ var Sider = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
57
59
|
setCollapsed(true);
|
|
58
60
|
}
|
|
59
61
|
if (collapsed && width > SIDER_WIDTH_MIN) {
|
|
60
|
-
width =
|
|
62
|
+
width = siderWidth;
|
|
61
63
|
setTimeout(function () {
|
|
62
64
|
setCollapsed(false);
|
|
63
65
|
}, 300);
|
package/lib/cjs/index.js
CHANGED
|
@@ -17,8 +17,10 @@ var Layout = require('./Layout.js');
|
|
|
17
17
|
var Sider = require('./Sider.js');
|
|
18
18
|
var Content = require('./Content.js');
|
|
19
19
|
var SearchTrigger = require('./SearchTrigger.js');
|
|
20
|
+
var FloatMenuContainer = require('./FloatMenuContainer.js');
|
|
20
21
|
exports.Layout = Layout.Layout;
|
|
21
22
|
exports["default"] = Layout.Layout;
|
|
22
23
|
exports.Sider = Sider.Sider;
|
|
23
24
|
exports.Content = Content.Content;
|
|
24
25
|
exports.SearchTrigger = SearchTrigger.SearchTrigger;
|
|
26
|
+
exports.FloatMenuContainer = FloatMenuContainer.FloatMenuContainer;
|
|
@@ -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:
|
|
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;-webkit-box-shadow: 1px 0 0 0 var(--hi-v5-color-gray-200, #e6e8eb);box-shadow: 1px 0 0 0 var(--hi-v5-color-gray-200, #e6e8eb);}.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: -2px;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__inner--mini .hi-v5-menu-item__inner--active-p {background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--mini .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__inner--mini .hi-v5-menu-item__inner--active-p-p .hi-v5-menu-item__icon {color: #2b64ff;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--mini .hi-v5-menu-item__inner--active-p:hover {background-color: var(--hi-v5-color-static-white, #fff) !important;}.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);}.hi-v5-search-trigger__popper-container {border-radius: var(--hi-v5-border-radius-xl, 8px) !important;}.hi-v5-float-menu-container {-webkit-box-sizing: border-box;box-sizing: border-box;position: relative;width: 0;height: 100%;background: transparent;}.hi-v5-float-menu-container-content {-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: absolute;top: 0;left: 0;height: 100%;padding: var(--hi-v5-spacing-6, 12px) 0;background-color: #f5f8fc;opacity: 0;-webkit-transition: opacity 0.3s;transition: opacity 0.3s;}.hi-v5-float-menu-container-content-wrapper {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: auto;}.hi-v5-float-menu-container-content--show {opacity: 1;}.hi-v5-float-menu-container-content--collapsed {border-top-right-radius: 12px;border-bottom-right-radius: 12px;-webkit-box-shadow: 6px 0 18px 6px rgba(26, 29, 38, 0.03), 4px 0 4px 0 rgba(26, 29, 38, 0.03);box-shadow: 6px 0 18px 6px rgba(26, 29, 38, 0.03), 4px 0 4px 0 rgba(26, 29, 38, 0.03);}.hi-v5-float-menu-container-content--collapsed .hi-v5-float-menu-container-collapse-icon {-webkit-transform: rotate(180deg);transform: rotate(180deg);}.hi-v5-float-menu-container-collapse {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: var(--hi-v5-height-6, 24px);padding: 0 var(--hi-v5-spacing-4, 8px);color: var(--hi-v5-color-gray-600, #60636b);cursor: pointer;white-space: nowrap;}.hi-v5-float-menu-container-collapse:hover {border-radius: var(--hi-v5-border-radius-lg, 6px);color: #565a66;background-color: var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-float-menu-container-collapse-wrapper {display: -webkit-box;display: -ms-flexbox;display: flex;padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-8, 16px);}.hi-v5-float-menu-container-collapse-icon {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-float-menu-container-collapse-text {font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);margin-left: var(--hi-v5-spacing-2, 4px);}";
|
|
16
16
|
var __styleInject__ = require('@hi-ui/style-inject')["default"];
|
|
17
17
|
__styleInject__(css_248z);
|
|
18
18
|
exports["default"] = css_248z;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
/** @LICENSE
|
|
2
|
+
* @hi-ui/layout
|
|
3
|
+
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
|
|
4
|
+
*
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
|
+
*
|
|
7
|
+
* This source code is licensed under the MIT license found in the
|
|
8
|
+
* LICENSE file in the root directory of this source tree.
|
|
9
|
+
*/
|
|
10
|
+
import React from 'react';
|
|
11
|
+
var CollapseIcon = function CollapseIcon() {
|
|
12
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
13
|
+
width: "16",
|
|
14
|
+
height: "16",
|
|
15
|
+
viewBox: "0 0 16 16",
|
|
16
|
+
fill: "none",
|
|
17
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
18
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
19
|
+
d: "M10 3L13 3",
|
|
20
|
+
stroke: "#60636B",
|
|
21
|
+
strokeWidth: "1.4",
|
|
22
|
+
strokeLinecap: "round",
|
|
23
|
+
strokeLinejoin: "round"
|
|
24
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
25
|
+
d: "M10 8L13 8",
|
|
26
|
+
stroke: "#60636B",
|
|
27
|
+
strokeWidth: "1.4",
|
|
28
|
+
strokeLinecap: "round",
|
|
29
|
+
strokeLinejoin: "round"
|
|
30
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
31
|
+
d: "M3 13L13 13",
|
|
32
|
+
stroke: "#60636B",
|
|
33
|
+
strokeWidth: "1.4",
|
|
34
|
+
strokeLinecap: "round",
|
|
35
|
+
strokeLinejoin: "round"
|
|
36
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
37
|
+
d: "M6 8L3 5.5L6 3",
|
|
38
|
+
stroke: "#60636B",
|
|
39
|
+
strokeWidth: "1.4",
|
|
40
|
+
strokeLinecap: "round",
|
|
41
|
+
strokeLinejoin: "round"
|
|
42
|
+
}));
|
|
43
|
+
};
|
|
44
|
+
export { CollapseIcon };
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
/** @LICENSE
|
|
2
|
+
* @hi-ui/layout
|
|
3
|
+
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
|
|
4
|
+
*
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
|
+
*
|
|
7
|
+
* This source code is licensed under the MIT license found in the
|
|
8
|
+
* LICENSE file in the root directory of this source tree.
|
|
9
|
+
*/
|
|
10
|
+
import { __rest } from 'tslib';
|
|
11
|
+
import React, { forwardRef } from 'react';
|
|
12
|
+
import { getPrefixCls, cx } from '@hi-ui/classname';
|
|
13
|
+
import { __DEV__ } from '@hi-ui/env';
|
|
14
|
+
import { CollapseIcon } from './CollapseIcon.js';
|
|
15
|
+
var FLOAT_MENU_CONTAINER_PREFIX = getPrefixCls('float-menu-container');
|
|
16
|
+
/**
|
|
17
|
+
* 浮动菜单容器组件
|
|
18
|
+
*/
|
|
19
|
+
var FloatMenuContainer = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
20
|
+
var _cx;
|
|
21
|
+
var _a$prefixCls = _a.prefixCls,
|
|
22
|
+
prefixCls = _a$prefixCls === void 0 ? FLOAT_MENU_CONTAINER_PREFIX : _a$prefixCls,
|
|
23
|
+
_a$role = _a.role,
|
|
24
|
+
role = _a$role === void 0 ? 'float-menu-container' : _a$role,
|
|
25
|
+
className = _a.className,
|
|
26
|
+
children = _a.children,
|
|
27
|
+
visibleProp = _a.visible,
|
|
28
|
+
width = _a.width,
|
|
29
|
+
_a$collapsed = _a.collapsed,
|
|
30
|
+
collapsedProp = _a$collapsed === void 0 ? true : _a$collapsed,
|
|
31
|
+
onCollapse = _a.onCollapse,
|
|
32
|
+
rest = __rest(_a, ["prefixCls", "role", "className", "children", "visible", "width", "collapsed", "onCollapse"]);
|
|
33
|
+
var cls = cx(prefixCls, className);
|
|
34
|
+
var _React$useState = React.useState(collapsedProp),
|
|
35
|
+
collapsed = _React$useState[0],
|
|
36
|
+
setCollapsed = _React$useState[1];
|
|
37
|
+
React.useEffect(function () {
|
|
38
|
+
setCollapsed(collapsedProp);
|
|
39
|
+
}, [collapsedProp]);
|
|
40
|
+
var visible = React.useMemo(function () {
|
|
41
|
+
return collapsed ? visibleProp : true;
|
|
42
|
+
}, [collapsed, visibleProp]);
|
|
43
|
+
var handleCollapse = function handleCollapse() {
|
|
44
|
+
var newCollapsed = !collapsed;
|
|
45
|
+
setCollapsed(newCollapsed);
|
|
46
|
+
onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse(newCollapsed);
|
|
47
|
+
};
|
|
48
|
+
return /*#__PURE__*/React.createElement("div", Object.assign({
|
|
49
|
+
ref: ref,
|
|
50
|
+
role: role,
|
|
51
|
+
className: cls
|
|
52
|
+
}, rest, {
|
|
53
|
+
style: visible ? {
|
|
54
|
+
width: collapsed ? 0 : width
|
|
55
|
+
} : {}
|
|
56
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
57
|
+
className: cx(prefixCls + "-content", (_cx = {}, _cx[prefixCls + "-content--show"] = visible, _cx[prefixCls + "-content--collapsed"] = collapsed, _cx)),
|
|
58
|
+
style: {
|
|
59
|
+
width: visible ? width : 0
|
|
60
|
+
}
|
|
61
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
62
|
+
className: cx(prefixCls + "-collapse-wrapper")
|
|
63
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
64
|
+
className: cx(prefixCls + "-collapse"),
|
|
65
|
+
onClick: handleCollapse
|
|
66
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
67
|
+
className: cx(prefixCls + "-collapse-icon")
|
|
68
|
+
}, /*#__PURE__*/React.createElement(CollapseIcon, null)), /*#__PURE__*/React.createElement("span", {
|
|
69
|
+
className: cx(prefixCls + "-collapse-text")
|
|
70
|
+
}, "\u6536\u8D77"))), /*#__PURE__*/React.createElement("div", {
|
|
71
|
+
className: cx(prefixCls + "-content-wrapper")
|
|
72
|
+
}, children)));
|
|
73
|
+
});
|
|
74
|
+
if (__DEV__) {
|
|
75
|
+
FloatMenuContainer.displayName = 'FloatMenuContainer';
|
|
76
|
+
}
|
|
77
|
+
export { FloatMenuContainer };
|
package/lib/esm/SearchTrigger.js
CHANGED
|
@@ -51,6 +51,9 @@ var SearchTrigger = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
51
51
|
}), /*#__PURE__*/React.createElement(SearchOutlined, null), !mini && /*#__PURE__*/React.createElement("span", {
|
|
52
52
|
className: prefixCls + "__placeholder"
|
|
53
53
|
}, placeholder)), /*#__PURE__*/React.createElement(Popper, {
|
|
54
|
+
classNames: {
|
|
55
|
+
container: prefixCls + "__popper-container"
|
|
56
|
+
},
|
|
54
57
|
visible: visible,
|
|
55
58
|
attachEl: innerRef.current,
|
|
56
59
|
gutterGap: -32,
|
package/lib/esm/Sider.js
CHANGED
|
@@ -14,8 +14,8 @@ 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
|
|
18
|
-
var SIDER_WIDTH_MIN =
|
|
17
|
+
var DEFAULT_SIDER_WIDTH = 180;
|
|
18
|
+
var SIDER_WIDTH_MIN = 60;
|
|
19
19
|
var SIDER_WIDTH_MIN_COLLAPSED = 150;
|
|
20
20
|
/**
|
|
21
21
|
* 侧边栏组件
|
|
@@ -27,14 +27,16 @@ var Sider = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
27
27
|
_a$role = _a.role,
|
|
28
28
|
role = _a$role === void 0 ? 'sider' : _a$role,
|
|
29
29
|
className = _a.className,
|
|
30
|
+
widthProp = _a.width,
|
|
30
31
|
collapsedProp = _a.collapsed,
|
|
31
32
|
onCollapse = _a.onCollapse,
|
|
32
33
|
children = _a.children,
|
|
33
|
-
rest = __rest(_a, ["prefixCls", "role", "className", "collapsed", "onCollapse", "children"]);
|
|
34
|
+
rest = __rest(_a, ["prefixCls", "role", "className", "width", "collapsed", "onCollapse", "children"]);
|
|
34
35
|
var _useUncontrolledState = useUncontrolledState(false, collapsedProp, onCollapse),
|
|
35
36
|
collapsed = _useUncontrolledState[0],
|
|
36
37
|
setCollapsed = _useUncontrolledState[1];
|
|
37
|
-
var
|
|
38
|
+
var siderWidth = widthProp || DEFAULT_SIDER_WIDTH;
|
|
39
|
+
var _useState = useState(collapsedProp ? SIDER_WIDTH_MIN : siderWidth),
|
|
38
40
|
width = _useState[0],
|
|
39
41
|
setWidth = _useState[1];
|
|
40
42
|
var handleResize = function handleResize(evt, options) {
|
|
@@ -45,7 +47,7 @@ var Sider = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
45
47
|
setCollapsed(true);
|
|
46
48
|
}
|
|
47
49
|
if (collapsed && width > SIDER_WIDTH_MIN) {
|
|
48
|
-
width =
|
|
50
|
+
width = siderWidth;
|
|
49
51
|
setTimeout(function () {
|
|
50
52
|
setCollapsed(false);
|
|
51
53
|
}, 300);
|
package/lib/esm/index.js
CHANGED
|
@@ -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:
|
|
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;-webkit-box-shadow: 1px 0 0 0 var(--hi-v5-color-gray-200, #e6e8eb);box-shadow: 1px 0 0 0 var(--hi-v5-color-gray-200, #e6e8eb);}.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: -2px;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__inner--mini .hi-v5-menu-item__inner--active-p {background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--mini .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__inner--mini .hi-v5-menu-item__inner--active-p-p .hi-v5-menu-item__icon {color: #2b64ff;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--mini .hi-v5-menu-item__inner--active-p:hover {background-color: var(--hi-v5-color-static-white, #fff) !important;}.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);}.hi-v5-search-trigger__popper-container {border-radius: var(--hi-v5-border-radius-xl, 8px) !important;}.hi-v5-float-menu-container {-webkit-box-sizing: border-box;box-sizing: border-box;position: relative;width: 0;height: 100%;background: transparent;}.hi-v5-float-menu-container-content {-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: absolute;top: 0;left: 0;height: 100%;padding: var(--hi-v5-spacing-6, 12px) 0;background-color: #f5f8fc;opacity: 0;-webkit-transition: opacity 0.3s;transition: opacity 0.3s;}.hi-v5-float-menu-container-content-wrapper {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: auto;}.hi-v5-float-menu-container-content--show {opacity: 1;}.hi-v5-float-menu-container-content--collapsed {border-top-right-radius: 12px;border-bottom-right-radius: 12px;-webkit-box-shadow: 6px 0 18px 6px rgba(26, 29, 38, 0.03), 4px 0 4px 0 rgba(26, 29, 38, 0.03);box-shadow: 6px 0 18px 6px rgba(26, 29, 38, 0.03), 4px 0 4px 0 rgba(26, 29, 38, 0.03);}.hi-v5-float-menu-container-content--collapsed .hi-v5-float-menu-container-collapse-icon {-webkit-transform: rotate(180deg);transform: rotate(180deg);}.hi-v5-float-menu-container-collapse {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: var(--hi-v5-height-6, 24px);padding: 0 var(--hi-v5-spacing-4, 8px);color: var(--hi-v5-color-gray-600, #60636b);cursor: pointer;white-space: nowrap;}.hi-v5-float-menu-container-collapse:hover {border-radius: var(--hi-v5-border-radius-lg, 6px);color: #565a66;background-color: var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-float-menu-container-collapse-wrapper {display: -webkit-box;display: -ms-flexbox;display: flex;padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-8, 16px);}.hi-v5-float-menu-container-collapse-icon {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-float-menu-container-collapse-text {font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);margin-left: var(--hi-v5-spacing-2, 4px);}";
|
|
12
12
|
__styleInject__(css_248z);
|
|
13
13
|
export { css_248z as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const CollapseIcon: () => JSX.Element;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { HiBaseHTMLProps } from '@hi-ui/core';
|
|
3
|
+
/**
|
|
4
|
+
* 浮动菜单容器组件
|
|
5
|
+
*/
|
|
6
|
+
export declare const FloatMenuContainer: React.ForwardRefExoticComponent<FloatMenuContainerProps & React.RefAttributes<HTMLDivElement | null>>;
|
|
7
|
+
export interface FloatMenuContainerProps extends HiBaseHTMLProps<'div'> {
|
|
8
|
+
/**
|
|
9
|
+
* 浮动宽度
|
|
10
|
+
*/
|
|
11
|
+
width?: number;
|
|
12
|
+
/**
|
|
13
|
+
* 是否显示
|
|
14
|
+
*/
|
|
15
|
+
visible?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* 是否折叠
|
|
18
|
+
*/
|
|
19
|
+
collapsed?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* 折叠回调
|
|
22
|
+
*/
|
|
23
|
+
onCollapse?: (collapsed: boolean) => void;
|
|
24
|
+
}
|
package/lib/types/Sider.d.ts
CHANGED
|
@@ -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/lib/types/index.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hi-ui/layout",
|
|
3
|
-
"version": "5.0.0-canary.
|
|
3
|
+
"version": "5.0.0-canary.3",
|
|
4
4
|
"description": "A sub-package for @hi-ui/hiui.",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "HiUI <mi-hiui@xiaomi.com>",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"dependencies": {
|
|
46
46
|
"@hi-ui/classname": "^5.0.0-canary.2",
|
|
47
47
|
"@hi-ui/env": "^5.0.0-canary.2",
|
|
48
|
-
"@hi-ui/menu": "^5.0.0-canary.
|
|
48
|
+
"@hi-ui/menu": "^5.0.0-canary.7",
|
|
49
49
|
"@hi-ui/popper": "^5.0.0-canary.5",
|
|
50
50
|
"@hi-ui/use-uncontrolled-state": "^5.0.0-canary.2"
|
|
51
51
|
},
|