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 1/2] 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 From 872ece340f846742914a139db1177727a327fbd6 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: Sat, 25 Mar 2023 13:39:25 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=B1=BB=E5=90=8D?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/_test.tsx | 170 +++++++++--------- src/components/HjjModal/index.less | 69 ------- .../HjjModal/{index.css => index.module.css} | 32 ++-- src/components/HjjModal/index.module.less | 65 +++++++ src/components/HjjModal/index.tsx | 57 ++++-- 5 files changed, 213 insertions(+), 180 deletions(-) delete mode 100644 src/components/HjjModal/index.less rename src/components/HjjModal/{index.css => index.module.css} (84%) create mode 100644 src/components/HjjModal/index.module.less diff --git a/src/_test.tsx b/src/_test.tsx index b22835b..5983d83 100644 --- a/src/_test.tsx +++ b/src/_test.tsx @@ -1,17 +1,18 @@ +import React, { useState } from "react"; +import ReactDom from "react-dom"; +import Modal from "./components/modal/modal"; +import Upload from "./components/upload/upload"; +import Tab from "./components/tab/tab"; +import HjjModal from "./components/HjjModal"; -import React, { useState } from 'react'; -import ReactDom from 'react-dom' -import Modal from './components/modal/modal'; -import Upload from './components/upload/upload'; -import Tab from './components/tab/tab'; - -import * as GOJI from 'goji_ui' +import * as GOJI from "goji_ui"; function App() { - const [visible, setVisible] = useState(false) - const [ev, setEv] = useState(false) - return
- {/* + {/* 这是扩展的内容
} items={[ @@ -28,76 +29,85 @@ function App() { ]} /> */} +

test

+ + { + setEv(true); + }} + hiddenStyle={{ + height: "0px", + overflow: "hidden", + }} + tabContentVisible={ev} + extSelector={'[aria-label="tab"]'} + extension={ +
{ + setEv(!ev); + }} + className="ext" + > + 这是扩展的内容 +
+ } + items={[ + { + title: "tab1", + key: "tab1", + children:
tab1
, + }, + { + title: "tab2", + key: "tab2", + children:
tab2
, + }, + ]} + /> -

test

- - { - setEv(true) - }} - hiddenStyle={{ - height: '0px', - overflow: 'hidden' - }} - tabContentVisible={ev} - extSelector={'[aria-label="tab"]'} - extension={
{ setEv(!ev) }} className="ext">这是扩展的内容
} - items={[ - { - title: "tab1", - key: "tab1", - children:
tab1
- }, - { - title: "tab2", - key: "tab2", - children:
tab2
- } - ]} - /> - - { - setVisible(false) - }} - visible={visible} - > -
- how to set default value for typescript interface field - -
- - - { - for (var i = 0; i < f.length; i++) { - console.log(f[i].name) - } - return new Promise((r, j) => { - setTimeout(() => { - r(f) - }, 1000); - }) - }} + { + setVisible(false); + }} + visible={visible} + > +
+ how to set default value for typescript interface field + +
+ - valueFilter={({ response }) => { - return (response as Record).url - }} - onComplete={(res: any[]) => { - console.log(res) - }} - > - 请选择文件 - - + { + for (var i = 0; i < f.length; i++) { + console.log(f[i].name); + } + return new Promise((r, j) => { + setTimeout(() => { + r(f); + }, 1000); + }); + }} + valueFilter={({ response }) => { + return (response as Record).url; + }} + onComplete={(res: any[]) => { + console.log(res); + }} + > + 请选择文件 + + + + ); } -ReactDom.render(, document.getElementById("app")) \ No newline at end of file +ReactDom.render(, document.getElementById("app")); diff --git a/src/components/HjjModal/index.less b/src/components/HjjModal/index.less deleted file mode 100644 index a54af96..0000000 --- a/src/components/HjjModal/index.less +++ /dev/null @@ -1,69 +0,0 @@ -.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.css b/src/components/HjjModal/index.module.css similarity index 84% rename from src/components/HjjModal/index.css rename to src/components/HjjModal/index.module.css index c221b11..88f560e 100644 --- a/src/components/HjjModal/index.css +++ b/src/components/HjjModal/index.module.css @@ -1,14 +1,4 @@ -.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 { +.modal { position: absolute; top: 30%; left: 50%; @@ -20,7 +10,7 @@ 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 { +.modal .close { position: fixed; right: 26px; top: 10px; @@ -32,18 +22,18 @@ line-height: 20px; cursor: pointer; } -.hjj-modal .modal .header { +.modal .header { margin-bottom: 10px; font-size: 16px; display: flex; flex-wrap: nowrap; justify-content: space-between; } -.hjj-modal .modal .content { +.modal .content { min-height: 20px; font-size: 14px; } -.hjj-modal .modal .footer { +.modal .footer { height: 32px; font-size: 14px; margin-top: 12px; @@ -52,12 +42,20 @@ justify-content: flex-end; align-items: flex-end; } -.hjj-modal .modal .footer button { +.modal .footer .my-button { display: flex; margin-left: 8px; height: 32px; + background-color: #3875f7; + color: white; + border: 1px; + border-color: #d9d9d9; + border-radius: 3px; + padding: 5px 15px; + font-size: 14px; + cursor: pointer; } -.hjj-modal .mask { +.mask { background-color: rgba(0, 0, 0, 0.7); position: fixed; top: 0; diff --git a/src/components/HjjModal/index.module.less b/src/components/HjjModal/index.module.less new file mode 100644 index 0000000..18c7928 --- /dev/null +++ b/src/components/HjjModal/index.module.less @@ -0,0 +1,65 @@ +.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; + .my-button{ + display: flex; + margin-left: 8px; + height: 32px; + background-color: #3875f7; + color: white; + border: 1px; + border-color: #d9d9d9; + border-radius: 3px; + padding:5px 15px; + font-size: 14px; + cursor: pointer; + } + } + } + .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 index 565a4d8..ccba61b 100644 --- a/src/components/HjjModal/index.tsx +++ b/src/components/HjjModal/index.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import "./index.less"; +import styles from "./index.module.less"; interface ModalProps { /** 控制弹框的显示隐藏 */ @@ -23,6 +23,14 @@ interface ModalProps { mask?: boolean; /** 有遮罩层时是否点击关闭 */ isMaskClosed?: boolean; + /** 外层容器的样式 */ + style?: React.CSSProperties; + /** 外层容器的类名 */ + modalClassName?: string; + /** 遮罩层的样式 */ + maskStyle?: React.CSSProperties; + /** 内容区域的样式 */ + contentStyle?: React.CSSProperties; } function MyModal(props: ModalProps) { @@ -38,37 +46,55 @@ function MyModal(props: ModalProps) { cancelText, mask = true, isMaskClosed = true, + style, + modalClassName = "", + contentStyle, + maskStyle, } = props; if (!open) return null; + const modalStyle = { + ...style, + width, + }; + const modalClsName = modalClassName + ? `${styles.modal} ${modalClassName}` + : styles.modal; + console.log(styles); return ( <> -
-
+
+
x
-
+
{title}
-
{children}
-
+
+ {children} +
+
{footer ? ( footer ) : ( <> - - + )}
-
+ {mask ? ( +
+ ) : null} ); } @@ -90,7 +116,10 @@ export default function HjjTables() { footer={null} width={700} // mask={false} - // isMaskClosed={false} + isMaskClosed={false} + // maskStyle={{ backgroundColor: "red" }} + style={{ backgroundColor: "aliceblue" }} + // modalClassName="test" >

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

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