feat:drawer组件

src/_test.tsx

@@ -5,19 +5,45 @@ import Upload from "./components/upload/upload";
 import Tab from "./components/tab/tab";
 import * as GOJI from "goji_ui";
 import Input from "./components/input";
+import Drawer from "./components/drawer";
+import { Span } from "./dom";
 
 function App() {
   const [visible, setVisible] = useState(false);
   const [ev, setEv] = useState(false);
   const [value, setValue] = useState(10);
+  const [open, setOpen] = useState(false);
 
   const handleClick = (e: unknown) => {
     setValue(e?.target.value);
     console.log("e", e?.target.value);
   };
 
+  const showDrawer = () => {
+    setOpen(true);
+  };
+
+  const onClose = () => {
+    setOpen(false);
+  };
+
   return (
     <div>
+      <Drawer
+        open={open}
+        onClose={onClose}
+        position="left"
+        size="default"
+        // maskClosable={false}
+        title={<span>标题是什么呀</span>}
+        extra={<button>操作</button>}
+      >
+        {/* <p>kdsks</p>
+        <p>kdsks</p> */}
+      </Drawer>
+
+      <button onClick={showDrawer}>open</button>
+
       <Input
         defaultValue={"undefinedssss"}
         maxLength={10}

src/components/drawer/index.css

@@ -0,0 +1,94 @@
+.drawer .drawer-mask {
+  position: absolute;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.45);
+  pointer-events: auto;
+}
+.drawer .drawer-mask-none {
+  display: none;
+}
+@keyframes width {
+  from {
+    width: 0;
+  }
+  to {
+    width: 378px;
+  }
+}
+@keyframes height {
+  from {
+    height: 0;
+  }
+  to {
+    height: 378px;
+  }
+}
+.drawer .left-to-right-reverse {
+  animation: width 0.7s;
+}
+.drawer .top-to-height-reverse {
+  animation: height 0.7s;
+}
+.drawer .drawer-box {
+  background-color: #ffffff;
+  position: absolute;
+  z-index: 1000;
+}
+.drawer .drawer-box .drawer-title {
+  border: 1px solid #eee;
+  padding: 16px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.drawer .drawer-box .drawer-title .drawer-title-right {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+.drawer .drawer-box .drawer-title .drawer-title-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.drawer .drawer-box .drawer-title .drawer-delete-icon {
+  color: rgba(0, 0, 0, 0.45);
+  margin-inline-end: 12px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+.drawer .drawer-box .drawer-title .drawer-delete-icon :hover {
+  cursor: pointer;
+  color: #000;
+}
+.drawer .drawer-box .drawer-content {
+  padding: 24px;
+}
+.drawer .position-left {
+  left: 0;
+  top: 0;
+  bottom: 0;
+}
+.drawer .position-right {
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.drawer .position-top {
+  top: 0;
+  overflow: hidden;
+  width: 100%;
+}
+.drawer .position-bottom {
+  bottom: 0;
+  overflow: hidden;
+  width: 100%;
+}
+.drawer .default {
+  width: 378px;
+}
+.drawer .large {
+  width: 786px;
+}

src/components/drawer/index.less

@@ -0,0 +1,116 @@
+.drawer {
+  .drawer-mask {
+    position: absolute;
+    inset: 0;
+    z-index: 1000;
+    background: rgba(0, 0, 0, 0.45);
+    pointer-events: auto;
+  }
+
+  .drawer-mask-none {
+    display: none;
+  }
+
+  @keyframes width {
+    from {
+      width: 0;
+    }
+    to {
+      width: 378px;
+    }
+  }
+
+  @keyframes height {
+    from {
+      height: 0;
+    }
+
+    to {
+      height: 378px;
+    }
+  }
+
+  .left-to-right-reverse {
+    animation: width 0.7s;
+  }
+
+  .top-to-height-reverse {
+    animation: height 0.7s;
+  }
+
+  .drawer-box {
+    background-color: #ffffff;
+    position: absolute;
+    z-index: 1000;
+    // transition: width 1s ease-in-out;
+    // animation: tata 1s;
+
+    .drawer-title {
+      border: 1px solid #eee;
+      padding: 16px 24px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .drawer-title-right {
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+      }
+
+      .drawer-title-text {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .drawer-delete-icon {
+        color: rgba(0, 0, 0, 0.45);
+        margin-inline-end: 12px;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .drawer-delete-icon :hover {
+        cursor: pointer;
+        color: #000;
+      }
+    }
+
+    .drawer-content {
+      padding: 24px;
+    }
+  }
+
+  .position-left {
+    left: 0;
+    top: 0;
+    bottom: 0;
+  }
+
+  .position-right {
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+
+  .position-top {
+    top: 0;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  .position-bottom {
+    bottom: 0;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  .default {
+    width: 378px;
+  }
+
+  .large {
+    width: 786px;
+  }
+}

src/components/drawer/index.tsx

@@ -0,0 +1,128 @@
+import React from "react";
+import "./index.less";
+import classnames from "classnames";
+
+type position = "left" | "right" | "bottom" | "top";
+type size = "default" | "large";
+
+interface IDrawer extends React.DOMAttributes<HTMLDivElement> {
+  className?: string | undefined;
+  style?: React.CSSProperties | undefined;
+  /**
+   * position:抽屉位置
+   * */
+  position?: position | undefined;
+  children?: React.ReactNode | undefined;
+  /**
+   * title:抽屉标题 string类型
+   */
+  title?: React.ReactNode | undefined;
+  /**
+   * open:是否打开抽屉 boolean类型
+   */
+  open?: boolean | undefined;
+  /**
+   * onClose:关闭函数
+   */
+  onClose?: (e: any) => void | undefined;
+  /**
+   *size:预设抽屉宽度（或高度），default 378px 和 large 600px
+   */
+
+  size?: size | undefined;
+  /**
+   * maskClosable：点击蒙层是否允许关闭 默认值为true
+   */
+  maskClosable?: boolean | undefined;
+  /**
+   * extra:抽屉右上角的操作区域
+   */
+  extra?: React.ReactNode | undefined;
+}
+
+const Drawer: React.FC<IDrawer> = (props) => {
+  const {
+    className,
+    style,
+    position = "right",
+    children,
+    title,
+    open,
+    onClose,
+    size = "default",
+    maskClosable = true,
+  } = props;
+
+  const drawerPosition = {
+    left: "position-left",
+    right: "position-right",
+    bottom: "position-bottom",
+    top: "position-top",
+  };
+
+
+  return (
+    <>
+      {open && (
+        <div className={`drawer  ${className}`} style={{ ...style }}>
+          {maskClosable ? (
+            <div
+              className={`${open ? "drawer-mask" : "drawer-mask-none"}`}
+              onClick={onClose}
+            ></div>
+          ) : (
+            <div
+              className={`${open ? "drawer-mask" : "drawer-mask-none"}`}
+            ></div>
+          )}
+          <div
+            className={classnames(
+              `drawer-box
+            ${position && drawerPosition[position]} ${open && size}
+            ${
+              position === "bottom" || position === "top"
+                ? "top-to-height-reverse"
+                : "left-to-right-reverse "
+            }
+             `
+            )}
+            style={{
+              height:
+                position === "bottom" || position === "top" ? "378px" : "100%",
+              width:
+                position === "bottom" || position === "top" ? "100%" : "378ppx",
+            }}
+          >
+            <div className="drawer-title">
+              <div className="drawer-title-right">
+                <span className="drawer-delete-icon" onClick={onClose}>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="icon icon-tabler icon-tabler-x"
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    stroke-width="2"
+                    stroke="currentColor"
+                    fill="none"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                    <path d="M18 6l-12 12"></path>
+                    <path d="M6 6l12 12"></path>
+                  </svg>
+                </span>
+                <span className="drawer-title-text">{title || "title..."}</span>
+              </div>
+              <div>extra</div>
+            </div>
+            <div className="drawer-content">{children || "content..."}</div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Drawer;