@hi-ui/layout 5.0.0-canary.1 → 5.0.0-canary.10

package/CHANGELOG.md

@@ -1,5 +1,94 @@
 # @hi-ui/layout
 
+## 5.0.0-canary.10
+
+### Patch Changes
+
+- 47a5a480c: fix(layout&page-header): add types export to package.json for layout and page-header
+
+## 5.0.0-canary.9
+
+### Minor Changes
+
+- 8d7936b56: feat(layout): 增加 Profile 组件 (5.0)
+- e704a964f: feat(layout): 增加 Header 和 Footer 组件 & 完善示例 (5.0)
+
+## 5.0.0-canary.8
+
+### Major Changes
+
+- 8d19c4688: feat(layout): 添加 AppListPopover 组件并更新布局样式和示例 (5.0)
+
+### Patch Changes
+
+- Updated dependencies [632895aaf]
+  - @hi-ui/menu@5.0.0-canary.11
+
+## 5.0.0-canary.7
+
+### Patch Changes
+
+- 3f88c4dca: <br />
+  - perf(layout): 优化导航菜单交互体验 (5.0)
+  - perf(menu): 优化搜索菜单组件的样式和交互逻辑 & 修改分组菜单样式问题 (5.0)
+- Updated dependencies [3f88c4dca]
+- Updated dependencies [4dc72a186]
+  - @hi-ui/menu@5.0.0-canary.10
+  - @hi-ui/popper@5.0.0-canary.7
+
+## 5.0.0-canary.6
+
+### Patch Changes
+
+- 301e49608: style(layout): 在折叠状态下为 FloatMenuContainer 组件添加 z-index 属性 (5.0)
+
+## 5.0.0-canary.5
+
+### Minor Changes
+
+- 4798a025c: feat(layout): Sider 组件增加 maxWidth 参数 & FloatMenuContainer 组件增加 zIndex 参数 (5.0)
+
+### Patch Changes
+
+- 282e6c499: perf(layout&menu): 优化 FloatMenuContainer 组件的折叠逻辑 & 修改 SideMenu 组件 hover 样式 (5.0)
+- Updated dependencies [282e6c499]
+- Updated dependencies [4782eb807]
+  - @hi-ui/menu@5.0.0-canary.9
+
+## 5.0.0-canary.4
+
+### Minor Changes
+
+- efce04a26: feat(layout): Sider 增加 resizable 参数，控制是否可改变宽度 (5.0)
+
+### Patch Changes
+
+- efce04a26: fix: 修改 UI 问题 (5.0)
+- Updated dependencies [efce04a26]
+- Updated dependencies [9106dca82]
+  - @hi-ui/menu@5.0.0-canary.8
+  - @hi-ui/popper@5.0.0-canary.6
+  - @hi-ui/core@5.0.0-canary.3
+
+## 5.0.0-canary.3
+
+### Minor Changes
+
+- 4075b33da: feat(layout): 增加 FloatMenuContainer 组件 (5.0)
+
+### Patch Changes
+
+- Updated dependencies [4075b33da]
+  - @hi-ui/menu@5.0.0-canary.7
+
+## 5.0.0-canary.2
+
+### Patch Changes
+
+- 07e7b975b: style(layout): 修改 Sider 收起时宽度为 60px & 增加 width 参数 (5.0)
+- Updated dependencies [07e7b975b]
+  - @hi-ui/menu@5.0.0-canary.6
+
 ## 5.0.0-canary.1
 
 ### Patch Changes

package/lib/cjs/AppList.js

@@ -0,0 +1,163 @@
+/** @LICENSE
+ * @hi-ui/layout
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var tslib = require('tslib');
+var React = require('react');
+var classname = require('@hi-ui/classname');
+var env = require('@hi-ui/env');
+var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
+var index = require('./packages/hooks/use-toggle/lib/esm/index.js');
+var index$1 = require('./packages/ui/popover/lib/esm/index.js');
+require('./packages/icons/lib/esm/styles/index.scss.js');
+var checkOutlined = require('./packages/icons/lib/esm/components/alert/check-outlined.js');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var APP_LIST_PREFIX = classname.getPrefixCls('app-list');
+/**
+ * 应用列表组件
+ */
+var AppList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _a$prefixCls = _a.prefixCls,
+    prefixCls = _a$prefixCls === void 0 ? APP_LIST_PREFIX : _a$prefixCls,
+    _a$role = _a.role,
+    role = _a$role === void 0 ? 'app-list' : _a$role,
+    className = _a.className,
+    data = _a.data,
+    activeIdProp = _a.activeId,
+    defaultActiveId = _a.defaultActiveId,
+    titleRender = _a.titleRender,
+    onItemClick = _a.onItemClick,
+    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "activeId", "defaultActiveId", "titleRender", "onItemClick"]);
+  var cls = classname.cx(prefixCls, className);
+  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultActiveId, activeIdProp),
+    activeId = _useUncontrolledState[0],
+    tryChangeActiveId = _useUncontrolledState[1];
+  var handleItemClick = React.useCallback(function (item, event) {
+    tryChangeActiveId(item.id);
+    onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, event);
+    event.stopPropagation();
+  }, [tryChangeActiveId, onItemClick]);
+  var renderIcon = React.useCallback(function (item) {
+    var icon = item.icon,
+      title = item.title;
+    if (!icon) {
+      if (typeof title === 'string') {
+        return title.slice(0, 1);
+      }
+      return null;
+    }
+    return icon;
+  }, []);
+  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+    ref: ref,
+    role: role,
+    className: cls
+  }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: prefixCls + "-wrapper"
+  }, data === null || data === void 0 ? void 0 : data.map(function (item) {
+    var _cx;
+    var id = item.id,
+      title = item.title,
+      iconBgColor = item.iconBgColor;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classname.cx(prefixCls + "-item", (_cx = {}, _cx[prefixCls + "-item--active"] = activeId === id, _cx)),
+      key: id,
+      onClick: function onClick(event) {
+        return handleItemClick(item, event);
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classname.cx(prefixCls + "-item__icon"),
+      style: {
+        backgroundColor: iconBgColor ? IconBgColorMap[iconBgColor] : undefined
+      }
+    }, renderIcon(item)), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: prefixCls + "-item__title"
+    }, (titleRender === null || titleRender === void 0 ? void 0 : titleRender(item)) || title), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: prefixCls + "-item__checked"
+    }, /*#__PURE__*/React__default["default"].createElement(checkOutlined.CheckOutlined, null)));
+  })));
+});
+var IconBgColorMap = {
+  // 深蓝色、浅蓝色、青色、绿色、紫色、黄色、橙色
+  BLUE: '#2660ff',
+  SKYBLUE: '#0aadff',
+  CYAN: '#04c2ac',
+  GREEN: '#24b237',
+  PURPLE: '#7f3df2',
+  YELLOW: '#ffbe0a',
+  ORANGE: '#ff7700'
+};
+if (env.__DEV__) {
+  AppList.displayName = 'AppList';
+}
+var AppListPopover = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var onOpen = _a.onOpen,
+    onClose = _a.onClose,
+    visibleProp = _a.visible,
+    children = _a.children,
+    data = _a.data,
+    defaultActiveId = _a.defaultActiveId,
+    activeId = _a.activeId,
+    titleRender = _a.titleRender,
+    onItemClick = _a.onItemClick,
+    restProps = tslib.__rest(_a, ["onOpen", "onClose", "visible", "children", "data", "defaultActiveId", "activeId", "titleRender", "onItemClick"]);
+  var _useUncontrolledToggl = index.useUncontrolledToggle({
+      defaultVisible: false,
+      visible: visibleProp
+    }),
+    visible = _useUncontrolledToggl[0],
+    visibleAction = _useUncontrolledToggl[1];
+  var handleOpen = React.useCallback(function () {
+    visibleAction.on();
+    onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+  }, [onOpen, visibleAction]);
+  var handleClose = React.useCallback(function () {
+    visibleAction.off();
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+  }, [onClose, visibleAction]);
+  return /*#__PURE__*/React__default["default"].createElement(index$1.Popover, Object.assign({
+    style: {
+      boxSizing: 'border-box',
+      paddingLeft: 12,
+      paddingRight: 12,
+      maxHeight: 408,
+      overflow: 'auto'
+    },
+    visible: visible,
+    arrow: false,
+    placement: "right-start",
+    gutterGap: 4,
+    content: /*#__PURE__*/React__default["default"].createElement(AppList, {
+      ref: ref,
+      data: data,
+      defaultActiveId: defaultActiveId,
+      activeId: activeId,
+      titleRender: titleRender,
+      onItemClick: onItemClick
+    }),
+    onOpen: handleOpen,
+    onClose: handleClose
+  }, restProps), children);
+});
+if (env.__DEV__) {
+  AppListPopover.displayName = 'AppListPopover';
+}
+exports.AppList = AppList;
+exports.AppListPopover = AppListPopover;
+exports.IconBgColorMap = IconBgColorMap;

package/lib/cjs/CollapseIcon.js

@@ -0,0 +1,56 @@
+/** @LICENSE
+ * @hi-ui/layout
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var React = require('react');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var CollapseIcon = function CollapseIcon() {
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M10 3L13 3",
+    stroke: "#60636B",
+    strokeWidth: "1.4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M10 8L13 8",
+    stroke: "#60636B",
+    strokeWidth: "1.4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M3 13L13 13",
+    stroke: "#60636B",
+    strokeWidth: "1.4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M6 8L3 5.5L6 3",
+    stroke: "#60636B",
+    strokeWidth: "1.4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+exports.CollapseIcon = CollapseIcon;

package/lib/cjs/Content.js

@@ -24,9 +24,6 @@ function _interopDefaultCompat(e) {
 }
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var CONTENT_PREFIX = classname.getPrefixCls('content');
-/**
- * 内容区域组件
- */
 var Content = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _a$prefixCls = _a.prefixCls,
     prefixCls = _a$prefixCls === void 0 ? CONTENT_PREFIX : _a$prefixCls,
@@ -36,7 +33,7 @@ var Content = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children = _a.children,
     rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children"]);
   var cls = classname.cx(prefixCls, className);
-  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+  return /*#__PURE__*/React__default["default"].createElement("main", Object.assign({
     ref: ref,
     role: role,
     className: cls

package/lib/cjs/FloatMenuContainer.js

@@ -0,0 +1,93 @@
+/** @LICENSE
+ * @hi-ui/layout
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var tslib = require('tslib');
+var React = require('react');
+var classname = require('@hi-ui/classname');
+var env = require('@hi-ui/env');
+var core = require('@hi-ui/core');
+var CollapseIcon = require('./CollapseIcon.js');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var FLOAT_MENU_CONTAINER_PREFIX = classname.getPrefixCls('float-menu-container');
+/**
+ * 浮动菜单容器组件
+ */
+var FloatMenuContainer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _cx;
+  var _a$prefixCls = _a.prefixCls,
+    prefixCls = _a$prefixCls === void 0 ? FLOAT_MENU_CONTAINER_PREFIX : _a$prefixCls,
+    _a$role = _a.role,
+    role = _a$role === void 0 ? 'float-menu-container' : _a$role,
+    className = _a.className,
+    children = _a.children,
+    visibleProp = _a.visible,
+    width = _a.width,
+    _a$collapsed = _a.collapsed,
+    collapsedProp = _a$collapsed === void 0 ? true : _a$collapsed,
+    onCollapse = _a.onCollapse,
+    zIndex = _a.zIndex,
+    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "visible", "width", "collapsed", "onCollapse", "zIndex"]);
+  var cls = classname.cx(prefixCls, className);
+  var i18n = core.useLocaleContext();
+  var _React$useState = React__default["default"].useState(collapsedProp),
+    collapsed = _React$useState[0],
+    setCollapsed = _React$useState[1];
+  React__default["default"].useEffect(function () {
+    setCollapsed(collapsedProp);
+  }, [collapsedProp]);
+  var visible = React__default["default"].useMemo(function () {
+    return collapsed ? visibleProp : true;
+  }, [collapsed, visibleProp]);
+  var handleCollapse = function handleCollapse() {
+    var newCollapsed = !collapsed;
+    setCollapsed(newCollapsed);
+    onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse(newCollapsed);
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+    ref: ref,
+    role: role,
+    className: cls
+  }, rest, {
+    style: visible ? {
+      width: collapsed ? 0 : width
+    } : {}
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classname.cx(prefixCls + "-content", (_cx = {}, _cx[prefixCls + "-content--show"] = visible, _cx[prefixCls + "-content--collapsed"] = collapsed, _cx)),
+    style: {
+      zIndex: zIndex,
+      width: visible ? width : 0
+    }
+  }, visible && ( /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classname.cx(prefixCls + "-collapse-wrapper")
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classname.cx(prefixCls + "-collapse"),
+    onClick: handleCollapse
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: classname.cx(prefixCls + "-collapse-icon")
+  }, /*#__PURE__*/React__default["default"].createElement(CollapseIcon.CollapseIcon, null)), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: classname.cx(prefixCls + "-collapse-text")
+  }, collapsed ? i18n.timeline.expand : i18n.timeline.collapse)))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classname.cx(prefixCls + "-content-wrapper")
+  }, children)));
+});
+if (env.__DEV__) {
+  FloatMenuContainer.displayName = 'FloatMenuContainer';
+}
+exports.FloatMenuContainer = FloatMenuContainer;

package/lib/cjs/Footer.js

@@ -0,0 +1,45 @@
+/** @LICENSE
+ * @hi-ui/layout
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var tslib = require('tslib');
+var React = require('react');
+var classname = require('@hi-ui/classname');
+var env = require('@hi-ui/env');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var HEADER_PREFIX = classname.getPrefixCls('footer');
+var Footer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _a$prefixCls = _a.prefixCls,
+    prefixCls = _a$prefixCls === void 0 ? HEADER_PREFIX : _a$prefixCls,
+    _a$role = _a.role,
+    role = _a$role === void 0 ? 'footer' : _a$role,
+    className = _a.className,
+    children = _a.children,
+    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children"]);
+  var cls = classname.cx(prefixCls, className);
+  return /*#__PURE__*/React__default["default"].createElement("footer", Object.assign({
+    ref: ref,
+    role: role,
+    className: cls
+  }, rest), children);
+});
+if (env.__DEV__) {
+  Footer.displayName = 'Footer';
+}
+exports.Footer = Footer;

package/lib/cjs/Header.js

@@ -0,0 +1,45 @@
+/** @LICENSE
+ * @hi-ui/layout
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var tslib = require('tslib');
+var React = require('react');
+var classname = require('@hi-ui/classname');
+var env = require('@hi-ui/env');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var HEADER_PREFIX = classname.getPrefixCls('header');
+var Header = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _a$prefixCls = _a.prefixCls,
+    prefixCls = _a$prefixCls === void 0 ? HEADER_PREFIX : _a$prefixCls,
+    _a$role = _a.role,
+    role = _a$role === void 0 ? 'header' : _a$role,
+    className = _a.className,
+    children = _a.children,
+    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children"]);
+  var cls = classname.cx(prefixCls, className);
+  return /*#__PURE__*/React__default["default"].createElement("header", Object.assign({
+    ref: ref,
+    role: role,
+    className: cls
+  }, rest), children);
+});
+if (env.__DEV__) {
+  Header.displayName = 'Header';
+}
+exports.Header = Header;

package/lib/cjs/Layout.js

@@ -34,8 +34,10 @@ var Layout = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     role = _a$role === void 0 ? 'layout' : _a$role,
     className = _a.className,
     children = _a.children,
-    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children"]);
-  var cls = classname.cx(prefixCls, className);
+    _a$direction = _a.direction,
+    direction = _a$direction === void 0 ? 'row' : _a$direction,
+    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "direction"]);
+  var cls = classname.cx(prefixCls, className, prefixCls + "--direction-" + direction);
   return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     ref: ref,
     role: role,