From c3c63cb071c5f4c4fb1e27d7354c50f5c2a14fd6 Mon Sep 17 00:00:00 2001 From: robin_yang Date: Thu, 23 Mar 2023 00:57:41 +0800 Subject: [PATCH 1/4] :memo: update readme --- README.md | Bin 5552 -> 5634 bytes src/_test.tsx | 6 +++--- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 426bed5308743dde6343bb75e55427476064dd6d..429f13efebc508d2c0941cd8eedda03e5899652d 100644 GIT binary patch delta 236 zcmdm>-K4W2g-NEIA)ld$A)6tMAqU7RXHZ}eskj*In9E(I$1pjENs8-n=jOmofsG(; z6O$gZ9)rT<^-QXadXq0RDKY^Czc59CC_iR75Ve3^WO4&@hH(KyBGA|phD?TJAO`V3 z>^z|Hi9j+1NINj(GNc08An|-4UA*}}vn!*$0fQNXF@re}8!?yyNlP#`V$f$WWH4Z` v0763s6QGAwr6|*qpUUO delta 162 zcmZqD*`U24g^5F?;$pC4E_c=B1}3S=E10whOWH4s10Ae!+Lk4pOO9lf56Cm4!K_AFB w0Lp;GOo6lkP>m5#+yV&Az&tacjK$=$tlE=*v3g8)VXK>bge_vT9QzYK0QYDmRsaA1 diff --git a/src/_test.tsx b/src/_test.tsx index 4e3a04d..b22835b 100644 --- a/src/_test.tsx +++ b/src/_test.tsx @@ -38,12 +38,12 @@ function App() { show modal { + onTabChange={() => { setEv(true) }} hiddenStyle={{ - height:'0px', - overflow:'hidden' + height: '0px', + overflow: 'hidden' }} tabContentVisible={ev} extSelector={'[aria-label="tab"]'} From d3aa4382321670397c380bc316fb9da24b009f03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=9B=BD=E5=B9=B3?= <756517553@qq.com> Date: Thu, 23 Mar 2023 10:55:21 +0800 Subject: [PATCH 2/4] :memo update readme --- README.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index cd4bff9..27d390f 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,14 @@ -### contributors + +[![Stargazers repo roster for @RobinYang11/goji](https://reporoster.com/stars/RobinYang11/goji)](https://github.com/RobinYang11/goji/stargazers) + + +[![Forkers repo roster for @RobinYang11/goji](https://reporoster.com/forks/RobinYang11/goji)](https://github.com/RobinYang11/goji/network/members) + ### 前言 From 8a7c4c0b16ea864277690a5fa0970d067fed4c75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=9B=BD=E5=B9=B3?= <756517553@qq.com> Date: Thu, 23 Mar 2023 10:58:43 +0800 Subject: [PATCH 3/4] :memo update readme --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index cd4bff9..a5dffda 100644 --- a/README.md +++ b/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 From dc99da6f49b2aaa36bded785309fa28199ef7423 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=83=A1=E5=A4=A7=E5=A4=A7=E5=A4=A7=E5=A4=A7?= <9150241+hu-dada-dada@user.noreply.gitee.com> Date: Fri, 24 Mar 2023 00:24:43 +0800 Subject: [PATCH 4/4] demo 100% --- src/components/HjjModal/index.css | 67 +++++++++++++++++++ src/components/HjjModal/index.less | 69 +++++++++++++++++++ src/components/HjjModal/index.tsx | 104 +++++++++++++++++++++++++++++ src/components/index.ts | 1 + 4 files changed, 241 insertions(+) create mode 100644 src/components/HjjModal/index.css create mode 100644 src/components/HjjModal/index.less create mode 100644 src/components/HjjModal/index.tsx diff --git a/src/components/HjjModal/index.css b/src/components/HjjModal/index.css new file mode 100644 index 0000000..c221b11 --- /dev/null +++ b/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; +} diff --git a/src/components/HjjModal/index.less b/src/components/HjjModal/index.less new file mode 100644 index 0000000..a54af96 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/components/HjjModal/index.tsx b/src/components/HjjModal/index.tsx new file mode 100644 index 0000000..565a4d8 --- /dev/null +++ b/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) => void; + /** 点击取消时候回调 */ + onCancel?: (e: React.MouseEvent) => 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 ( + <> +
+
+ x +
+
+ {title} +
+
{children}
+
+ {footer ? ( + footer + ) : ( + <> + + + + )} +
+
+
+ + ); +} +export default function HjjTables() { + const [isModalOpen, setIsModalOpen] = useState(false); + + return ( +
+

--------------------------------------

+ + {isModalOpen ? ( + setIsModalOpen(false)} + onCancel={() => setIsModalOpen(false)} + title="自定义头部" + okText="确定文案" + cancelText="取消文案" + footer={null} + width={700} + // mask={false} + // isMaskClosed={false} + > +

自定义内容--------------------

+

自定义内容--------------------

+

自定义内容--------------------

+

自定义内容--------------------

+ + ) : null} +

--------------------------------------

+
+ ); +} diff --git a/src/components/index.ts b/src/components/index.ts index dc94522..3a287ef 100644 --- a/src/components/index.ts +++ b/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'; \ No newline at end of file