@hzab/sider 0.0.2 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/sider",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "侧边栏",
   "main": "lib",
   "scripts": {
@@ -11,6 +11,7 @@
     "publish-major": "npm run build && git add . && git commit -m \"build: major\" && npm version major && npm publish --access public"
   },
   "files": [
+    "CHANGELOG.md",
     "lib",
     "src"
   ],
@@ -18,14 +19,14 @@
   "author": "CaiYansong",
   "license": "ISC",
   "devDependencies": {
-    "@hzab/webpack-config": "0.0.9",
+    "@hzab/webpack-config": "0.1.1",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "eslint": "^8.30.0",
     "less": "^4.1.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.8.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^6.14.1",
     "typescript": "^4.9.4"
   },
   "directories": {

package/src/index.module.less

@@ -1,23 +1,38 @@
-.sider-box {
+.layout-sider {
+  position: relative;
+  background-color: transparent;
   height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  /* 滚动条整体样式 */
-  &::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
+  .sider-box {
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    /* 滚动条整体样式 */
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+    /* 滚动条轨道 */
+    &::-webkit-scrollbar-track {
+      background: rgb(239, 239, 239);
+    }
+    /* 滚动条里面的滑块 */
+    &::-webkit-scrollbar-thumb {
+      background: rgba(144, 147, 153, 0.3);
+      border-radius: 4px;
+    }
+    /* 滚动条里面的滑块 hover 的情况 */
+    &::-webkit-scrollbar-thumb:hover {
+      background: rgba(144, 147, 153, 0.5);
+    }
   }
-  /* 滚动条轨道 */
-  &::-webkit-scrollbar-track {
-    background: rgb(239, 239, 239);
-  }
-  /* 滚动条里面的滑块 */
-  &::-webkit-scrollbar-thumb {
-    background: rgba(144, 147, 153, 0.3);
-    border-radius: 4px;
-  }
-  /* 滚动条里面的滑块 hover 的情况 */
-  &::-webkit-scrollbar-thumb:hover {
-    background: rgba(144, 147, 153, 0.5);
+}
+
+:global {
+  .layout-sider {
+    .ant-layout-sider-zero-width-trigger {
+      background-color: #fff;
+      color: #333;
+      border: 1px solid #f0f0f0;
+    }
   }
 }

package/src/index.tsx

@@ -1,17 +1,23 @@
 import React, { useEffect, useState } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
-import { Menu } from "antd";
+import { Layout, Menu } from "antd";
 import * as Icon from "@ant-design/icons";
 import _ from "lodash";
 
 import style from "./index.module.less";
 
+const { Sider: ASider } = Layout;
+
 function Sider(props) {
+  const { collapsible, collapsedWidth } = props;
   const navigate = useNavigate();
   const location = useLocation();
+
+  const [isFloat, setIsFloat] = useState(false);
+  const [collapsed, setCollapsed] = useState(false);
   const [selected, setSelected] = useState([location.pathname]);
   const [open, setOpen] = useState(location.pathname.split(/(?=\/)/)?.slice(0, 1));
-  const [menus, setMenus] = useState(props.menus || []);
+  const [menus, setMenus] = useState(_.cloneDeep(props.menus) || []);
 
   useEffect(() => {
     const keyPaths: Array<string> = location.pathname.split(/(?=\/)/);
@@ -42,7 +48,7 @@ function Sider(props) {
         iconDom = React.createElement(Icon && (Icon as any)[iconDom], {
           style: { fontSize: "14px" },
         });
-      } else if (iconDom?.startsWith("icon-")) {
+      } else if (iconDom?.startsWith && iconDom?.startsWith("icon-")) {
         iconDom = <i className={"sider-icon icon-iconfont " + iconDom}></i>;
       }
       it.icon = iconDom;
@@ -66,16 +72,25 @@ function Sider(props) {
   }
 
   return (
-    <Menu
-      className={`sider-box ${style["sider-box"]} ${props.className || ""}`}
-      style={{ width: "200px", ...(props.style || {}) }}
-      onClick={onClick}
-      onOpenChange={onOpenChange}
-      selectedKeys={selected}
-      openKeys={open}
-      mode="inline"
-      items={menus}
-    />
+    <ASider
+      className={`layout-sider ${style["layout-sider"]} ${props.layoutSiderClassName || ""}`}
+      style={{ ...(props.siderStyle || {}) }}
+      collapsedWidth={collapsedWidth}
+      collapsible={collapsible}
+      collapsed={collapsed}
+      onCollapse={setCollapsed}
+    >
+      <Menu
+        className={`sider-box ${style["sider-box"]} ${props.className || ""}`}
+        style={{ ...(props.style || {}) }}
+        onClick={onClick}
+        onOpenChange={onOpenChange}
+        selectedKeys={selected}
+        openKeys={open}
+        mode="inline"
+        items={menus}
+      />
+    </ASider>
   );
 }
 

package/CHANGELOG

@@ -1,2 +0,0 @@
-# @hzab/sider@0.0.1
-组件初始化

package/lib/css/main.92f5a23dbd5c9e3ccf8f.css

@@ -1 +0,0 @@
-.sider-box_V6sF9{height:100%;overflow-x:hidden;overflow-y:auto}.sider-box_V6sF9::-webkit-scrollbar{height:4px;width:4px}.sider-box_V6sF9::-webkit-scrollbar-track{background:#efefef}.sider-box_V6sF9::-webkit-scrollbar-thumb{background:hsla(220,4%,58%,.3);border-radius:4px}.sider-box_V6sF9::-webkit-scrollbar-thumb:hover{background:hsla(220,4%,58%,.5)}