Huojiaojiaodemo

README.md

@@ -1,4 +1,7 @@
 
+
+[![Forkers repo roster for @RobinYang11/goji](https://reporoster.com/forks/RobinYang11/goji)](https://github.com/RobinYang11/goji/network/members)
+
 ### contributors
 <a href="https://github.com/mfts2048">
 <img  style="border-radius:10;width:60px" src="https://avatars.githubusercontent.com/u/44958959?s=120&v=4" />

src/_test.tsx

@@ -1,4 +1,3 @@
-
 import React, { useState } from 'react';
 import Modal from './components/modal/modal';
 import Upload from './components/upload/upload';
@@ -119,7 +118,4 @@ function App() {
 }
 
 const root = createRoot(document.getElementById("app")!)
-root.render(<App />)
-
-
-
+root.render(<App />)

src/components/HjjModal/index.css

@@ -0,0 +1,67 @@
+.hjj-modal button {
+  background-color: #3875f7;
+  color: white;
+  border: 1px;
+  border-color: #d9d9d9;
+  border-radius: 3px;
+  padding: 5px 15px;
+  font-size: 14px;
+  cursor: pointer;
+}
+.hjj-modal .modal {
+  position: absolute;
+  top: 30%;
+  left: 50%;
+  transform: translate(-50%);
+  width: 520px;
+  padding: 20px 24px;
+  border-radius: 10px;
+  background-color: #fff;
+  z-index: 2;
+  box-shadow: 0 6px 16px 0 rgba(14, 13, 13, 0.1), 0 3px 6px -4px rgba(6, 6, 6, 0.12), 0 9px 28px 8px rgba(15, 14, 14, 0.05);
+}
+.hjj-modal .modal .close {
+  position: fixed;
+  right: 26px;
+  top: 10px;
+  font-size: 20px;
+  color: #ccc;
+  width: 20px;
+  height: 20px;
+  text-align: center;
+  line-height: 20px;
+  cursor: pointer;
+}
+.hjj-modal .modal .header {
+  margin-bottom: 10px;
+  font-size: 16px;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+}
+.hjj-modal .modal .content {
+  min-height: 20px;
+  font-size: 14px;
+}
+.hjj-modal .modal .footer {
+  height: 32px;
+  font-size: 14px;
+  margin-top: 12px;
+  display: flex;
+  flex-flow: nowrap;
+  justify-content: flex-end;
+  align-items: flex-end;
+}
+.hjj-modal .modal .footer button {
+  display: flex;
+  margin-left: 8px;
+  height: 32px;
+}
+.hjj-modal .mask {
+  background-color: rgba(0, 0, 0, 0.7);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}

src/components/HjjModal/index.less

@@ -0,0 +1,69 @@
+.hjj-modal{
+    button{
+        background-color: #3875f7;
+        color: white;
+        border: 1px;
+        border-color: #d9d9d9;
+        border-radius: 3px;
+        padding:5px 15px;
+        font-size: 14px;
+        cursor: pointer;
+    }
+    .modal{
+        position:absolute;
+        top: 30%;
+        left: 50%;
+        transform: translate(-50%);
+        width: 520px;
+        padding: 20px 24px;
+        border-radius: 10px;
+        background-color: #fff;
+        z-index: 2;
+        box-shadow: 0 6px 16px 0 rgba(14, 13, 13, 0.1), 0 3px 6px -4px rgba(6, 6, 6, 0.12), 0 9px 28px 8px rgba(15, 14, 14, 0.05);
+        .close{
+            position: fixed;
+            right: 26px;
+            top: 10px;
+            font-size: 20px;
+            color: #ccc;
+            width: 20px;
+            height: 20px;
+            text-align: center;
+            line-height: 20px;
+            cursor: pointer;
+        }
+        .header{
+            margin-bottom: 10px;
+            font-size:16px;
+            display: flex;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+        }
+        .content{
+            min-height: 20px;
+            font-size: 14px;
+        }
+        .footer{
+            height: 32px;
+            font-size: 14px;
+            margin-top: 12px;
+            display: flex;
+            flex-flow: nowrap;
+            justify-content: flex-end;
+            align-items: flex-end;
+            button{
+                display: flex;
+                margin-left: 8px;
+                height: 32px;
+            }
+        }
+      }
+      .mask{
+        background-color: rgba(0,0,0,0.7);
+        position: fixed;
+        top:0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+      }
+}

src/components/HjjModal/index.tsx

@@ -0,0 +1,104 @@
+import React, { useState } from "react";
+import "./index.less";
+
+interface ModalProps {
+  /** 控制弹框的显示隐藏 */
+  open: boolean;
+  /** 点击确定是的回调 */
+  onOk?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  /** 点击取消时候回调 */
+  onCancel?: (e: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
+  /** 弹框内容 */
+  children?: React.ReactNode;
+  /** 弹框头部内容 */
+  title?: React.ReactNode;
+  /** 弹框底部内容 */
+  footer?: React.ReactNode;
+  /** 弹框宽度 默认 520 */
+  width?: string | number;
+  /** 按钮文案 */
+  okText?: React.ReactNode;
+  cancelText?: React.ReactNode;
+  /** 是否显示遮罩层 */
+  mask?: boolean;
+  /** 有遮罩层时是否点击关闭 */
+  isMaskClosed?: boolean;
+}
+
+function MyModal(props: ModalProps) {
+  const {
+    open,
+    onOk,
+    onCancel,
+    children,
+    title,
+    footer,
+    width = 520,
+    okText,
+    cancelText,
+    mask = true,
+    isMaskClosed = true,
+  } = props;
+  if (!open) return null;
+
+  return (
+    <>
+      <div className="modal" style={width ? { width } : undefined}>
+        <div className="close" onClick={onCancel}>
+          x
+        </div>
+        <div className="header">
+          <strong>{title}</strong>
+        </div>
+        <div className="content">{children}</div>
+        <div className="footer">
+          {footer ? (
+            footer
+          ) : (
+            <>
+              <button onClick={onCancel}>
+                {cancelText ? cancelText : "取消"}
+              </button>
+              <button onClick={onOk}>{okText ? okText : "确定"}</button>
+            </>
+          )}
+        </div>
+      </div>
+      <div
+        className="mask"
+        style={!mask ? { backgroundColor: "transparent" } : undefined}
+        onClick={mask && isMaskClosed ? onCancel : undefined}
+      ></div>
+    </>
+  );
+}
+export default function HjjTables() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  return (
+    <div className="hjj-modal">
+      <p>--------------------------------------</p>
+      <button onClick={() => setIsModalOpen(true)}>打开弹框</button>
+      {isModalOpen ? (
+        <MyModal
+          open={isModalOpen}
+          onOk={() => setIsModalOpen(false)}
+          onCancel={() => setIsModalOpen(false)}
+          title="自定义头部"
+          okText="确定文案"
+          cancelText="取消文案"
+          footer={null}
+          width={700}
+          // mask={false}
+          // isMaskClosed={false}
+        >
+          <p>自定义内容--------------------</p>
+          <p>自定义内容--------------------</p>
+          <p>自定义内容--------------------</p>
+          <p>自定义内容--------------------</p>
+        </MyModal>
+      ) : null}
+      <p>--------------------------------------</p>
+    </div>
+  );
+}

src/components/index.ts

@@ -6,5 +6,6 @@ export { default as Tab } from './tab/tab';
 export { default as Flex } from './flex/flex';
 export { default as FlexItem } from './flex_item/flex_item';
 export { default as Table } from './table/table';
+export { default as HjjModal} from './HjjModal';
 
 export { BaseProps } from './base_props';