From 247c0d6eaa8480fab72c57ad3464e75b385bb906 Mon Sep 17 00:00:00 2001 From: lorne <1991wangliang@gmail.com> Date: Wed, 14 May 2025 17:27:09 +0800 Subject: [PATCH 1/8] fix playground --- playground/README.md | 9 --------- playground/package.json | 2 +- playground/webpack.common.js | 1 + 3 files changed, 2 insertions(+), 10 deletions(-) diff --git a/playground/README.md b/playground/README.md index 7ad832b..388baf7 100644 --- a/playground/README.md +++ b/playground/README.md @@ -1,14 +1,5 @@ # playground - -## 运行步骤 -### 编译form-mobile -``` -yarn build -``` -在form-mobile目录下执行编译命令，编译完成后会在dist目录下生成form-mobile的代码包。 - - ### 运行实例 ``` diff --git a/playground/package.json b/playground/package.json index 284a7fd..cd43a09 100644 --- a/playground/package.json +++ b/playground/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { - "@codingapi/form-mobile": "file:../dist", + "@codingapi/form-mobile": "file:../src", "@types/node": "^16.18.108", "@types/react": "^18.3.5", "@types/react-dom": "^18.3.0", diff --git a/playground/webpack.common.js b/playground/webpack.common.js index 29a8f66..a8652ef 100644 --- a/playground/webpack.common.js +++ b/playground/webpack.common.js @@ -20,6 +20,7 @@ module.exports = { extensions: ['.ts', '.tsx', '.js'], alias: { '@': path.resolve(__dirname, 'src'), + '@codingapi/form-mobile': path.resolve(__dirname, '../src'), }, }, module: { From cfe262c14d6b14c609dac6f47b8d9de691942295 Mon Sep 17 00:00:00 2001 From: lorne <1991wangliang@gmail.com> Date: Wed, 14 May 2025 21:32:36 +0800 Subject: [PATCH 2/8] fix fom --- package.json | 4 +- src/Form/factory.tsx | 161 ------------------------- src/Form/index.tsx | 6 +- src/Form/register.tsx | 32 +++++ src/Popup/index.scss | 16 +++ src/Popup/index.tsx | 55 +++++++++ src/PullToRefreshList/index.scss | 9 ++ src/PullToRefreshList/index.tsx | 195 +++++++++++++++++++++++++++++++ src/index.ts | 3 +- 9 files changed, 314 insertions(+), 167 deletions(-) delete mode 100644 src/Form/factory.tsx create mode 100644 src/Form/register.tsx create mode 100644 src/Popup/index.scss create mode 100644 src/Popup/index.tsx create mode 100644 src/PullToRefreshList/index.scss create mode 100644 src/PullToRefreshList/index.tsx diff --git a/package.json b/package.json index 822d728..07a821f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@codingapi/form-mobile", - "version": "0.0.24", + "version": "0.0.25", "description": "A UI Framework built with React and TypeScript", "keywords": [ "ui", @@ -35,7 +35,7 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "dependencies": { - "@codingapi/ui-framework": "^0.0.24", + "@codingapi/ui-framework": "^0.0.28", "antd-mobile": "^5.39.0" }, "scripts": { diff --git a/src/Form/factory.tsx b/src/Form/factory.tsx deleted file mode 100644 index 9103fc9..0000000 --- a/src/Form/factory.tsx +++ /dev/null @@ -1,161 +0,0 @@ -import React from "react"; -import {FormField} from "@codingapi/ui-framework"; -import {FormInput} from "./input"; -import {FormPassword} from "./password"; -import {FormCaptcha} from "./captcha"; -import {FormCheckbox} from "./checkbox"; -import {FormRadio} from "./radio"; -import {FormRate} from "./rate"; -import {FormSlider} from "./slider"; -import {FormStepper} from "./stepper"; -import {FormTextArea} from "./textarea"; -import {FormSwitch} from "./switch"; -import {FormDate} from "./date"; -import {FormCascader} from "./cascader"; -import {FormSelect} from "./select"; -import {FormSelector} from "./selector"; -import {FormUploader} from "./uploder"; - -export class FormFactory { - - static create = (field: FormField) => { - const type = field.type; - const props = field.props; - - if (type === 'input') { - return ( - - ) - } - - if (type === 'password') { - return ( - - ) - } - - if (type === 'captcha') { - return ( - - ) - } - - if (type === 'checkbox') { - return ( - - ) - } - - if (type === 'radio') { - return ( - - ) - } - - if (type === 'rate') { - return ( - - ) - } - - if (type === 'slider') { - return ( - - ) - } - if (type === 'stepper') { - return ( - - ) - } - - if (type === 'textarea') { - return ( - - ) - } - - if (type === 'switch') { - return ( - - ) - } - - if (type === 'date') { - return ( - - ) - } - - if (type === 'cascader') { - return ( - - ) - } - - if (type === 'selector') { - return ( - - ) - } - - if (type === 'select') { - return ( - - ) - } - - if (type === 'uploader') { - return ( - - ) - } - } - -} - diff --git a/src/Form/index.tsx b/src/Form/index.tsx index 848bc13..744e858 100644 --- a/src/Form/index.tsx +++ b/src/Form/index.tsx @@ -1,9 +1,9 @@ import React, {useEffect} from "react"; import {Form as MobileForm} from "antd-mobile"; -import {FormFactory} from "./factory"; -import {AntdForm, AntdFormInstance, FormField, FormInstance} from "@codingapi/ui-framework"; +import {AntdForm, AntdFormInstance, FormField, FormInstance,FormFactory} from "@codingapi/ui-framework"; import {FormContext} from "./context"; import "./index.scss"; +import "./register"; export interface FormProps { // 表单字段 @@ -59,7 +59,7 @@ const FormComponent: React.FC = (props) => { footer={props.footer} > {fields.length > 0 && fields.map((field) => { - return FormFactory.create(field) as React.ReactNode; + return FormFactory.getInstance().create(field) as React.ReactNode; })} {props.children} diff --git a/src/Form/register.tsx b/src/Form/register.tsx new file mode 100644 index 0000000..b359f38 --- /dev/null +++ b/src/Form/register.tsx @@ -0,0 +1,32 @@ +import {FormFactory} from "@codingapi/ui-framework"; +import {FormInput} from "./input"; +import {FormPassword} from "./password"; +import {FormCaptcha} from "./captcha"; +import {FormCheckbox} from "./checkbox"; +import {FormRadio} from "./radio"; +import {FormRate} from "./rate"; +import {FormSlider} from "./slider"; +import {FormStepper} from "./stepper"; +import {FormTextArea} from "./textarea"; +import {FormSwitch} from "./switch"; +import {FormDate} from "./date"; +import {FormCascader} from "./cascader"; +import {FormSelect} from "./select"; +import {FormSelector} from "./selector"; +import {FormUploader} from "./uploder"; + +FormFactory.getInstance().addItem('input',FormInput); +FormFactory.getInstance().addItem('password',FormPassword); +FormFactory.getInstance().addItem('captcha',FormCaptcha); +FormFactory.getInstance().addItem('checkbox',FormCheckbox); +FormFactory.getInstance().addItem('radio',FormRadio); +FormFactory.getInstance().addItem('rate',FormRate); +FormFactory.getInstance().addItem('slider',FormSlider); +FormFactory.getInstance().addItem('stepper',FormStepper); +FormFactory.getInstance().addItem('textarea',FormTextArea); +FormFactory.getInstance().addItem('switch',FormSwitch); +FormFactory.getInstance().addItem('date',FormDate); +FormFactory.getInstance().addItem('cascader',FormCascader); +FormFactory.getInstance().addItem('select',FormSelect); +FormFactory.getInstance().addItem('selector',FormSelector); +FormFactory.getInstance().addItem('uploader',FormUploader); diff --git a/src/Popup/index.scss b/src/Popup/index.scss new file mode 100644 index 0000000..4f717e5 --- /dev/null +++ b/src/Popup/index.scss @@ -0,0 +1,16 @@ +$body-background-color: #e6e7ea; + +.mobile-popup { +} + +.mobile-popup-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + border-bottom: 1px solid $body-background-color; +} + +.mobile-popup-content { + padding: 10px; +} diff --git a/src/Popup/index.tsx b/src/Popup/index.tsx new file mode 100644 index 0000000..31ffc0b --- /dev/null +++ b/src/Popup/index.tsx @@ -0,0 +1,55 @@ +import React from "react"; +import {Popup as AntPopup} from "antd-mobile"; +import "./index.scss"; + +interface PopupProps { + title?: string; + visible: boolean; + setVisible: (visible: boolean) => void; + children?: React.ReactNode; + position?: 'top' | 'right' | 'bottom' | 'left'; + bodyStyle?: React.CSSProperties; + onOk?: () => void; + onCancel?: () => void; +} + +const Popup: React.FC = (props) => { + + return ( + { + props.setVisible(false) + }} + onClose={() => { + props.setVisible(false) + }} + position={props.position} + bodyStyle={props.bodyStyle} + > + + + + ) +} + +export default Popup; diff --git a/src/PullToRefreshList/index.scss b/src/PullToRefreshList/index.scss new file mode 100644 index 0000000..4957367 --- /dev/null +++ b/src/PullToRefreshList/index.scss @@ -0,0 +1,9 @@ +$body-background-color: #e6e7ea; + +.mobile-list{ + background-color: $body-background-color; + + .adm-infinite-scroll{ + padding: 8px !important; + } +} diff --git a/src/PullToRefreshList/index.tsx b/src/PullToRefreshList/index.tsx new file mode 100644 index 0000000..1e3f42f --- /dev/null +++ b/src/PullToRefreshList/index.tsx @@ -0,0 +1,195 @@ +import React, {useEffect} from "react"; +import {ErrorBlock, InfiniteScroll, PullToRefresh as AntPullToRefresh} from "antd-mobile"; +import {PullStatus} from "antd-mobile/es/components/pull-to-refresh"; +import "./index.scss"; + +export interface ListResponse { + data: { + total: number; + list: any[] + }, + success: boolean +} + +export interface ListAction { + reload: () => void; +} + +export interface PullToRefreshListProps { + // 样式 + style?: React.CSSProperties; + // className + className?: string; + + listAction?: React.Ref; + // 每页数量，默认为10 + pageSize?: number; + // 刷新数据 + onRefresh?: (pageSize: number) => Promise; + // 加载更多 + onLoadMore?: (pageSize: number, last: any) => Promise; + // 渲染列表项 + item: (item: any, index: number) => React.ReactNode; + // 拉去数据提示 + pullStates?: { + // 默认值，用力拉 + pulling: string; + // 默认值，松开吧 + canRelease: string; + // 默认值，玩命加载中... + refreshing: string; + // 默认值，好啦 + complete: string + }; + // 空数据提示 + blockStates?: { + // 默认值，暂无信息 + title: string; + // 默认值，没有任何信息 + description: string; + } + // 无数据提示，默认值为无更多数据 + noDataStates?: React.ReactNode; +} + +const PullToRefreshList: React.FC = (props) => { + + const pageSize = props.pageSize || 10; + const [orderList, setOrderList] = React.useState([]); + const [last, setLast] = React.useState(""); + // 没有数据了 + const [noData, setNoData] = React.useState(false); + // 是否还有更多数据 + const [hasMore, setHasMore] = React.useState(true); + + const [loading, setLoading] = React.useState(false); + + const noDataStates = props.noDataStates || "暂无更多数据..."; + + const statusRecord: Record = { + pulling: props.pullStates?.pulling || '用力拉', + canRelease: props.pullStates?.canRelease || '松开吧', + refreshing: props.pullStates?.refreshing || '玩命加载中...', + complete: props.pullStates?.complete || '好啦', + } + + React.useImperativeHandle(props.listAction, () => ({ + reload: () => { + setOrderList([]); + refresh(); + } + }), [props.listAction, props]) + + const loadMore = async () => { + if (loading) { + return; + } + if (props.onLoadMore) { + setLoading(true); + props.onLoadMore(last, pageSize) + .then(res => { + if (res.success) { + const {data} = res; + if (data.total > 0) { + const list = data.list; + const last = list[list.length - 1].id; + setLast(last); + const currentList = orderList; + + for (let i = 0; i < list.length; i++) { + const item = list[i]; + if (currentList.find((value: any) => value.id === item.id)) { + continue; + } + currentList.push(item); + } + + setOrderList(currentList); + setHasMore(data.total > list.length); + } else { + setHasMore(false); + if (!last) { + setNoData(true); + } + } + } + }) + .finally(() => { + setLoading(false); + }); + } + } + + const refresh = () => { + if (loading) { + return; + } + if (props.onRefresh) { + setLoading(true); + props.onRefresh(pageSize) + .then(res => { + if (res.success) { + const {data} = res; + if (data.total > 0) { + const list = data.list; + const last = list[list.length - 1].id; + setLast(last); + setOrderList(list); + setHasMore(data.total > list.length); + } else { + setHasMore(false); + setNoData(true) + } + } + }) + .finally(() => { + setLoading(false); + }); + } + } + + useEffect(() => { + refresh(); + }, []); + + return ( +
+ { + refresh(); + }} + renderText={status => { + return
{statusRecord[status]}
+ }} + > + {orderList && orderList.map((item: any, index: number) => { + return props.item(item, index); + })} + + {orderList && orderList.length > 0 && ( + + {noDataStates} + + )} + {noData && ( + + )} + + +
+ ) +} + +export default PullToRefreshList; diff --git a/src/index.ts b/src/index.ts index 61b4734..5a78616 100644 --- a/src/index.ts +++ b/src/index.ts @@ -15,6 +15,7 @@ export * from './Form/stepper'; export * from './Form/switch'; export * from './Form/textarea'; export * from './Form/uploder'; -export * from './Form/factory'; export * from './Form/index'; export * from './Descriptions'; +export * from './Popup'; +export * from './PullToRefreshList'; From e337270a43a11f11949136eb04eaa8ab90fd9f3d Mon Sep 17 00:00:00 2001 From: lorne <1991wangliang@gmail.com> Date: Wed, 14 May 2025 21:37:34 +0800 Subject: [PATCH 3/8] fix form --- package.json | 2 +- src/Popup/index.tsx | 4 +--- src/PullToRefreshList/index.tsx | 3 +-- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 07a821f..9512f12 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@codingapi/form-mobile", - "version": "0.0.25", + "version": "0.0.26", "description": "A UI Framework built with React and TypeScript", "keywords": [ "ui", diff --git a/src/Popup/index.tsx b/src/Popup/index.tsx index 31ffc0b..d91827d 100644 --- a/src/Popup/index.tsx +++ b/src/Popup/index.tsx @@ -13,7 +13,7 @@ interface PopupProps { onCancel?: () => void; } -const Popup: React.FC = (props) => { +export const Popup: React.FC = (props) => { return ( = (props) => { ) } - -export default Popup; diff --git a/src/PullToRefreshList/index.tsx b/src/PullToRefreshList/index.tsx index 1e3f42f..af8dfec 100644 --- a/src/PullToRefreshList/index.tsx +++ b/src/PullToRefreshList/index.tsx @@ -52,7 +52,7 @@ export interface PullToRefreshListProps { noDataStates?: React.ReactNode; } -const PullToRefreshList: React.FC = (props) => { +export const PullToRefreshList: React.FC = (props) => { const pageSize = props.pageSize || 10; const [orderList, setOrderList] = React.useState([]); @@ -192,4 +192,3 @@ const PullToRefreshList: React.FC = (props) => { ) } -export default PullToRefreshList; From 2ee53a892b4132189097f2786c0522461b3f176f Mon Sep 17 00:00:00 2001 From: lorne <1991wangliang@gmail.com> Date: Wed, 14 May 2025 22:38:06 +0800 Subject: [PATCH 4/8] fix form --- package.json | 2 +- playground/src/App.tsx | 22 +++++++++++----------- src/PullToRefreshList/index.tsx | 12 +++--------- 3 files changed, 15 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 9512f12..0d24ce0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@codingapi/form-mobile", - "version": "0.0.26", + "version": "0.0.28", "description": "A UI Framework built with React and TypeScript", "keywords": [ "ui", diff --git a/playground/src/App.tsx b/playground/src/App.tsx index 8be3b8b..c5d765f 100644 --- a/playground/src/App.tsx +++ b/playground/src/App.tsx @@ -156,9 +156,9 @@ const FooterButtons: React.FC<{ formInstance: FormInstance }> = ({formInstance}) ) } -const FormPage = ()=>{ +const App = ()=>{ - const [activeKey, setActiveKey] = React.useState("property"); + const [activeKey, setActiveKey] = React.useState("left"); const leftFormInstance = Form.useForm(); const rightFormInstance = Form.useForm(); @@ -368,20 +368,20 @@ const FormPage = ()=>{ setActiveKey(value); }} > - - + + - {activeKey ==='field' && ( + {activeKey ==='left' && ( <>
{ Toast.show(JSON.stringify(values)); }} footer={( - + )} loadFields={async () => { return fields; @@ -391,17 +391,17 @@ const FormPage = ()=>{ )} - {activeKey ==='property' && ( + {activeKey ==='right' && ( <> { Toast.show(JSON.stringify(values)); }} footer={( )} > @@ -578,4 +578,4 @@ const FormPage = ()=>{ ) } -export default FormPage; +export default App; diff --git a/src/PullToRefreshList/index.tsx b/src/PullToRefreshList/index.tsx index af8dfec..3571e11 100644 --- a/src/PullToRefreshList/index.tsx +++ b/src/PullToRefreshList/index.tsx @@ -1,15 +1,9 @@ import React, {useEffect} from "react"; import {ErrorBlock, InfiniteScroll, PullToRefresh as AntPullToRefresh} from "antd-mobile"; import {PullStatus} from "antd-mobile/es/components/pull-to-refresh"; +import {Response} from "@codingapi/ui-framework"; import "./index.scss"; -export interface ListResponse { - data: { - total: number; - list: any[] - }, - success: boolean -} export interface ListAction { reload: () => void; @@ -25,9 +19,9 @@ export interface PullToRefreshListProps { // 每页数量，默认为10 pageSize?: number; // 刷新数据 - onRefresh?: (pageSize: number) => Promise; + onRefresh?: (pageSize: number) => Promise; // 加载更多 - onLoadMore?: (pageSize: number, last: any) => Promise; + onLoadMore?: (pageSize: number, last: any) => Promise; // 渲染列表项 item: (item: any, index: number) => React.ReactNode; // 拉去数据提示 From 3c8af1bf7fff9ba2b07667c4e83eff83be34736c Mon Sep 17 00:00:00 2001 From: lorne <1991wangliang@gmail.com> Date: Thu, 15 May 2025 10:05:11 +0800 Subject: [PATCH 5/8] update version --- package.json | 4 ++-- src/Form/index.tsx | 22 ++++------------------ src/Form/register.tsx | 32 +++++++++++++++++--------------- 3 files changed, 23 insertions(+), 35 deletions(-) diff --git a/package.json b/package.json index 0d24ce0..d972ab5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@codingapi/form-mobile", - "version": "0.0.28", + "version": "0.0.36", "description": "A UI Framework built with React and TypeScript", "keywords": [ "ui", @@ -35,7 +35,7 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "dependencies": { - "@codingapi/ui-framework": "^0.0.28", + "@codingapi/ui-framework": "^0.0.36", "antd-mobile": "^5.39.0" }, "scripts": { diff --git a/src/Form/index.tsx b/src/Form/index.tsx index 744e858..f14f9f7 100644 --- a/src/Form/index.tsx +++ b/src/Form/index.tsx @@ -1,28 +1,14 @@ import React, {useEffect} from "react"; import {Form as MobileForm} from "antd-mobile"; -import {AntdForm, AntdFormInstance, FormField, FormInstance,FormFactory} from "@codingapi/ui-framework"; +import {AntdForm, AntdFormInstance, FormFactory, FormField, FormInstance, FormProps} from "@codingapi/ui-framework"; import {FormContext} from "./context"; import "./index.scss"; -import "./register"; +import {registerDefaultFormItems} from "./register"; -export interface FormProps { - // 表单字段 - loadFields?: () => Promise; - // 表单提交事件 - onFinish?: (values: any) => Promise; - // form布局，默认vertical - layout?: 'horizontal' | 'vertical'; - // children元素 - children?: React.ReactNode; - // footer元素 - footer?: React.ReactNode; - // 初始化值 - initialValues?: any; - // 表单实例 - form?: FormInstance; -} const FormComponent: React.FC = (props) => { + registerDefaultFormItems(); + props.registerFormItems && props.registerFormItems(); const formInstance = props.form ? props.form : new FormInstance(); diff --git a/src/Form/register.tsx b/src/Form/register.tsx index b359f38..11168d6 100644 --- a/src/Form/register.tsx +++ b/src/Form/register.tsx @@ -15,18 +15,20 @@ import {FormSelect} from "./select"; import {FormSelector} from "./selector"; import {FormUploader} from "./uploder"; -FormFactory.getInstance().addItem('input',FormInput); -FormFactory.getInstance().addItem('password',FormPassword); -FormFactory.getInstance().addItem('captcha',FormCaptcha); -FormFactory.getInstance().addItem('checkbox',FormCheckbox); -FormFactory.getInstance().addItem('radio',FormRadio); -FormFactory.getInstance().addItem('rate',FormRate); -FormFactory.getInstance().addItem('slider',FormSlider); -FormFactory.getInstance().addItem('stepper',FormStepper); -FormFactory.getInstance().addItem('textarea',FormTextArea); -FormFactory.getInstance().addItem('switch',FormSwitch); -FormFactory.getInstance().addItem('date',FormDate); -FormFactory.getInstance().addItem('cascader',FormCascader); -FormFactory.getInstance().addItem('select',FormSelect); -FormFactory.getInstance().addItem('selector',FormSelector); -FormFactory.getInstance().addItem('uploader',FormUploader); +export const registerDefaultFormItems = () => { + FormFactory.getInstance().setItem('input',FormInput); + FormFactory.getInstance().setItem('password',FormPassword); + FormFactory.getInstance().setItem('captcha',FormCaptcha); + FormFactory.getInstance().setItem('checkbox',FormCheckbox); + FormFactory.getInstance().setItem('radio',FormRadio); + FormFactory.getInstance().setItem('rate',FormRate); + FormFactory.getInstance().setItem('slider',FormSlider); + FormFactory.getInstance().setItem('stepper',FormStepper); + FormFactory.getInstance().setItem('textarea',FormTextArea); + FormFactory.getInstance().setItem('switch',FormSwitch); + FormFactory.getInstance().setItem('date',FormDate); + FormFactory.getInstance().setItem('cascader',FormCascader); + FormFactory.getInstance().setItem('select',FormSelect); + FormFactory.getInstance().setItem('selector',FormSelector); + FormFactory.getInstance().setItem('uploader',FormUploader); +} From 61845f78511d31d1d383a0c7df747c5f8e23b142 Mon Sep 17 00:00:00 2001 From: lorne <1991wangliang@gmail.com> Date: Mon, 19 May 2025 21:33:54 +0800 Subject: [PATCH 6/8] fix version --- package.json | 4 ++-- playground/package.json | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index d972ab5..f7e9be4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@codingapi/form-mobile", - "version": "0.0.36", + "version": "0.0.37", "description": "A UI Framework built with React and TypeScript", "keywords": [ "ui", @@ -35,7 +35,7 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "dependencies": { - "@codingapi/ui-framework": "^0.0.36", + "@codingapi/ui-framework": "^0.0.37", "antd-mobile": "^5.39.0" }, "scripts": { diff --git a/playground/package.json b/playground/package.json index cd43a09..f315cce 100644 --- a/playground/package.json +++ b/playground/package.json @@ -38,7 +38,6 @@ "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "mockjs": "^1.1.0", - "monaco-editor-webpack-plugin": "^7.1.0", "sass": "^1.78.0", "sass-loader": "^16.0.1", "style-loader": "^4.0.0", From 2bb4053426ef6a0f3f0507aab19d01f73b35100d Mon Sep 17 00:00:00 2001 From: lorne <1991wangliang@gmail.com> Date: Tue, 20 May 2025 09:17:13 +0800 Subject: [PATCH 7/8] fix version --- package.json | 4 +-- playground/src/index.css | 15 +++++++++ src/Descriptions/index.scss | 10 +----- src/Form/index.scss | 20 ++---------- src/Form/index.tsx | 53 +++++++++++++++++++++----------- src/Popup/index.scss | 2 +- src/PullToRefreshList/index.scss | 2 +- src/styles/variable.scss | 19 ++++++++++++ 8 files changed, 76 insertions(+), 49 deletions(-) create mode 100644 src/styles/variable.scss diff --git a/package.json b/package.json index f7e9be4..ef87905 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@codingapi/form-mobile", - "version": "0.0.37", + "version": "0.0.38", "description": "A UI Framework built with React and TypeScript", "keywords": [ "ui", @@ -35,7 +35,7 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "dependencies": { - "@codingapi/ui-framework": "^0.0.37", + "@codingapi/ui-framework": "^0.0.38", "antd-mobile": "^5.39.0" }, "scripts": { diff --git a/playground/src/index.css b/playground/src/index.css index ec2585e..845f669 100644 --- a/playground/src/index.css +++ b/playground/src/index.css @@ -1,3 +1,18 @@ +:root { + --primary-color: #0b43e3; + --body-background-color: #fdfdfd; + + --content-font-size-large: 24px; + --content-font-size-middle: 16px; + --content-font-size-small: 12px; + + --content-font-size: var(--content-font-size-middle); +} + +:root:root{ + --adm-color-primary: var(--primary-color); +} + body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', diff --git a/src/Descriptions/index.scss b/src/Descriptions/index.scss index 814c866..4851e3b 100644 --- a/src/Descriptions/index.scss +++ b/src/Descriptions/index.scss @@ -1,12 +1,4 @@ -// 标题字体大小 -$title-font-size: 16px; -// 内容字体大小 -$content-font-size:14px; -// 背景颜色 -$body-background-color: #e6e7ea; - -// 主题颜色 -$theme-primary-color: #4a79d8; +@use "../styles/variable" as *; .descriptions-list { padding: 3px; diff --git a/src/Form/index.scss b/src/Form/index.scss index 3a8dacc..176b024 100644 --- a/src/Form/index.scss +++ b/src/Form/index.scss @@ -1,21 +1,5 @@ -// 主题颜色 -$theme-primary-color: #4a79d8; -// 背景颜色 -$body-background-color: #e6e7ea; -// header颜色 -$header-background-color: white; -// FormPlaceholder颜色 -$from-placeholder-color: #c4c4c4; -// 导航栏的高度 -$page-header-height: 50px; -// Footer栏的高度 -$page-footer-height: 50px; -// 页面内容区域的高度 -$page-content-height: calc(100vh - #{$page-header-height} - #{$page-footer-height}); -// 标题字体大小 -$title-font-size: 16px; -// 内容字体大小 -$content-font-size:14px; +@use "../styles/variable" as *; + .placeholder-span { color: $from-placeholder-color; diff --git a/src/Form/index.tsx b/src/Form/index.tsx index f14f9f7..244eacb 100644 --- a/src/Form/index.tsx +++ b/src/Form/index.tsx @@ -1,6 +1,16 @@ import React, {useEffect} from "react"; import {Form as MobileForm} from "antd-mobile"; -import {AntdForm, AntdFormInstance, FormFactory, FormField, FormInstance, FormProps} from "@codingapi/ui-framework"; +import { + AntdForm, + AntdFormInstance, + FormFactory, + FormField, + FormInstance, + FormProps, + ThemeConfig, + ThemeProvider, + ThemeProviderContext +} from "@codingapi/ui-framework"; import {FormContext} from "./context"; import "./index.scss"; import {registerDefaultFormItems} from "./register"; @@ -12,6 +22,10 @@ const FormComponent: React.FC = (props) => { const formInstance = props.form ? props.form : new FormInstance(); + const themeContext = React.useContext(ThemeProviderContext); + + const theme = themeContext?.getTheme() || {} as ThemeConfig; + const [fields, setFields] = React.useState([]); formInstance.setFieldsUpdateDispatch(setFields); @@ -32,26 +46,29 @@ const FormComponent: React.FC = (props) => { return ( - - { - props.onFinish && props.onFinish(values); - }} - initialValues={props.initialValues} - layout={props.layout} - footer={props.footer} + + - {fields.length > 0 && fields.map((field) => { - return FormFactory.getInstance().create(field) as React.ReactNode; - })} + { + props.onFinish && props.onFinish(values); + }} + initialValues={props.initialValues} + layout={props.layout} + footer={props.footer} + > + {fields.length > 0 && fields.map((field) => { + return FormFactory.getInstance().create(field) as React.ReactNode; + })} + + {props.children} - {props.children} + + + - - ) } diff --git a/src/Popup/index.scss b/src/Popup/index.scss index 4f717e5..477bd7e 100644 --- a/src/Popup/index.scss +++ b/src/Popup/index.scss @@ -1,4 +1,4 @@ -$body-background-color: #e6e7ea; +@use "../styles/variable" as *; .mobile-popup { } diff --git a/src/PullToRefreshList/index.scss b/src/PullToRefreshList/index.scss index 4957367..9cb982c 100644 --- a/src/PullToRefreshList/index.scss +++ b/src/PullToRefreshList/index.scss @@ -1,4 +1,4 @@ -$body-background-color: #e6e7ea; +@use "../styles/variable" as *; .mobile-list{ background-color: $body-background-color; diff --git a/src/styles/variable.scss b/src/styles/variable.scss new file mode 100644 index 0000000..f764103 --- /dev/null +++ b/src/styles/variable.scss @@ -0,0 +1,19 @@ +// 主题颜色 +$theme-primary-color: var(--primary-color, #4a79d8); +// 背景颜色 +$body-background-color: var(--body-background-color, #fdfdfd); +// 内容字体大小 +$content-font-size:var(--content-font-size, 12px); +// 标题字体大小 +$title-font-size: var(--content-font-size-middle, 16px); + +// header颜色 +$header-background-color: var(--header-background-color, white); +// FormPlaceholder颜色 +$from-placeholder-color: var(--from-placeholder-color, #c4c4c4); +// 导航栏的高度 +$page-header-height: var(--page-header-height, 50px); +// Footer栏的高度 +$page-footer-height: var(--page-footer-height, 50px); +// 页面内容区域的高度 +$page-content-height: calc(100vh - #{$page-header-height} - #{$page-footer-height}); From a6dc1e7dbb642ed9f5cc526efaeef371501ee6e3 Mon Sep 17 00:00:00 2001 From: lorne <1991wangliang@gmail.com> Date: Wed, 28 May 2025 19:57:01 +0800 Subject: [PATCH 8/8] update version --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index ef87905..10b5b16 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@codingapi/form-mobile", - "version": "0.0.38", + "version": "0.0.39", "description": "A UI Framework built with React and TypeScript", "keywords": [ "ui", @@ -35,7 +35,7 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "dependencies": { - "@codingapi/ui-framework": "^0.0.38", + "@codingapi/ui-framework": "^0.0.39", "antd-mobile": "^5.39.0" }, "scripts": {