From c3c0b23451825da9092e56c9b873174d2244c58e Mon Sep 17 00:00:00 2001 From: Caihuanyu Date: Fri, 17 Apr 2020 00:23:23 +0800 Subject: [PATCH 01/23] next --- README.md | 4 +- alipay/package.json | 1 + alipay/src/pages/index/index.js | 6 ++ one/mini.project.json | 8 +-- one/package.json | 7 +- one/src/api/{index.alipay.ts => index.ali.ts} | 2 +- one/src/api/index.ts | 12 +--- one/src/api/index.web.ts | 5 ++ one/src/app.config.ts | 72 +++++++++++++++---- one/src/app.tsx | 6 +- one/src/components/AddButton/index.css | 10 +-- one/src/components/Checkbox/index.ali.tsx | 3 + one/src/components/Checkbox/index.alipay.tsx | 3 - one/src/components/Checkbox/index.web.tsx | 47 ++++++++++++ .../components/CheckboxGroup/index.ali.tsx | 3 + .../components/CheckboxGroup/index.alipay.tsx | 3 - .../components/CheckboxGroup/index.web.tsx | 54 ++++++++++++++ one/src/components/LoginButton/index.tsx | 3 +- .../{index.alipay.ts => index.ali.ts} | 4 +- one/src/hooks/useUserInfo/index.web.ts | 18 +++++ one/src/pages/image/index.tsx | 11 ++- one/src/pages/index/index.config.ts | 13 ++++ one/src/pages/index/index.css | 46 ++++++------ one/src/pages/index/index.tsx | 19 ++--- one/src/pages/input/index.tsx | 52 +++++++++++--- one/src/pages/label/index.tsx | 4 +- one/src/pages/new/index.config.js | 2 +- one/src/pages/new/index.css | 7 +- one/src/pages/new/index.tsx | 11 ++- one/src/pages/text/index.tsx | 11 +-- one/src/pages/textarea/index.tsx | 28 ++++++-- one/src/pages/view/index.tsx | 14 ++-- 32 files changed, 353 insertions(+), 136 deletions(-) rename one/src/api/{index.alipay.ts => index.ali.ts} (95%) create mode 100644 one/src/api/index.web.ts create mode 100644 one/src/components/Checkbox/index.ali.tsx delete mode 100644 one/src/components/Checkbox/index.alipay.tsx create mode 100644 one/src/components/Checkbox/index.web.tsx create mode 100644 one/src/components/CheckboxGroup/index.ali.tsx delete mode 100644 one/src/components/CheckboxGroup/index.alipay.tsx create mode 100644 one/src/components/CheckboxGroup/index.web.tsx rename one/src/hooks/useUserInfo/{index.alipay.ts => index.ali.ts} (77%) create mode 100644 one/src/hooks/useUserInfo/index.web.ts create mode 100644 one/src/pages/index/index.config.ts diff --git a/README.md b/README.md index 0cee531..6b5221d 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,11 @@ # Remax Todo Demo -- [支付宝](#支付宝) +- [阿里](#阿里) - [微信](#微信) - [头条](#头条) - [本地运行](#本地运行) -## 支付宝 +## 阿里 QRCode diff --git a/alipay/package.json b/alipay/package.json index 5382742..78d4f8e 100644 --- a/alipay/package.json +++ b/alipay/package.json @@ -16,6 +16,7 @@ "dependencies": { "clsx": "^1.0.4", "cross-env": "^6.0.3", + "mini-antui": "^0.4.35", "react": "^16.8.6", "remax": "^1.1.0", "remax-cli": "^1.1.0", diff --git a/alipay/src/pages/index/index.js b/alipay/src/pages/index/index.js index e58fbce..40ea10f 100644 --- a/alipay/src/pages/index/index.js +++ b/alipay/src/pages/index/index.js @@ -1,4 +1,5 @@ import * as React from 'react'; +import { requirePluginComponent } from 'remax/macro'; import { useShow } from 'remax'; import { View, @@ -15,8 +16,11 @@ import AddButton from '@/components/AddButton'; import LoginButton from '@/components/LoginButton'; import { TodoContext } from '@/app'; import logo from '@/assets/logo.png'; +import Badge from 'mini-antui/es/badge'; import './index.css'; +// const PluginComponent = requirePluginComponent('plugin://xxx'); + export default () => { const [user, login] = useUserInfo(); const todo = React.useContext(TodoContext); @@ -37,6 +41,8 @@ export default () => { return ( + {/* */} + {}; export const getUserInfo = () => {}; diff --git a/one/src/api/index.ts b/one/src/api/index.ts index 0750733..c8ae3ec 100644 --- a/one/src/api/index.ts +++ b/one/src/api/index.ts @@ -1,9 +1,3 @@ -// 此处应该定义同构化的类型定义,本例简单地直接用各平台的类型定义 -export { - chooseImage, - navigateTo, - navigateBack, - getUserInfo -} from 'remax/wechat'; - -export { login } from 'remax/toutiao'; +export declare function chooseImage(): void; +export declare function getUserInfo(): void; +export declare function login(params: any): Promise; diff --git a/one/src/api/index.web.ts b/one/src/api/index.web.ts new file mode 100644 index 0000000..7a0bf09 --- /dev/null +++ b/one/src/api/index.web.ts @@ -0,0 +1,5 @@ +export function login() {} +export function getUserInfo() {} +export const chooseImage = () => { + alert('Not implement yet.'); +}; diff --git a/one/src/app.config.ts b/one/src/app.config.ts index 8c68aaa..a68acbf 100644 --- a/one/src/app.config.ts +++ b/one/src/app.config.ts @@ -1,38 +1,80 @@ import { AppConfig as WechatAppConfig } from 'remax/wechat'; -import { AppConfig as AlipayAppConfig } from 'remax/alipay'; +import { AppConfig as AliAppConfig } from 'remax/ali'; import { AppConfig as ToutiaoAppConfig } from 'remax/toutiao'; +import { AppConfig as WebAppConfig } from 'remax/web'; const pages = [ 'pages/index/index', 'pages/new/index', - 'pages/view/index', - 'pages/text/index', - 'pages/image/index', - 'pages/button/index', + 'pages/textarea/index', + 'pages/web-view/index', 'pages/form/index', - 'pages/input/index', 'pages/label/index', - 'pages/textarea/index', - 'pages/web-view/index' + 'pages/input/index', + 'pages/button/index', + 'pages/image/index', + 'pages/text/index', + 'pages/view/index', ]; export const wechat: WechatAppConfig = { pages, window: { - navigationBarTitleText: 'Remax One Wechat' - } + navigationBarTitleText: 'Remax One Wechat', + }, }; -export const alipay: AlipayAppConfig = { +export const ali: AliAppConfig = { pages, window: { - defaultTitle: 'Remax One Alipay' - } + defaultTitle: 'Remax One Ali', + }, + tabBar: { + backgroundColor: '#fff', + selectedColor: '#1b73fa', + items: [ + { + pagePath: 'pages/index/index', + icon: + 'https://gw.alipayobjects.com/mdn/rms_a6d2d8/afts/img/A*uJJISqWJcMQAAAAAAAAAAABkARQnAQ', + name: 'todos', + }, + { + pagePath: 'pages/new/index', + icon: + 'https://gw.alipayobjects.com/mdn/rms_a6d2d8/afts/img/A*uJJISqWJcMQAAAAAAAAAAABkARQnAQ', + name: 'new todo', + }, + ], + }, }; export const toutiao: ToutiaoAppConfig = { pages, window: { - navigationBarTitleText: 'Remax One Toutiao' - } + navigationBarTitleText: 'Remax One Toutiao', + }, +}; + +export const web: WebAppConfig = { + pages, + title: 'Remax One Web', + tabBar: { + backgroundColor: '#fff', + activeTitleColor: '#1b73fa', + items: [ + { + url: '/pages/index/index', + image: + 'https://gw.alipayobjects.com/mdn/rms_a6d2d8/afts/img/A*uJJISqWJcMQAAAAAAAAAAABkARQnAQ', + title: 'todos', + }, + { + url: '/pages/new/index', + image: + 'https://gw.alipayobjects.com/mdn/rms_a6d2d8/afts/img/A*uJJISqWJcMQAAAAAAAAAAABkARQnAQ', + title: 'new todo', + }, + ], + }, }; diff --git a/one/src/app.tsx b/one/src/app.tsx index 0e19efb..e2941c5 100644 --- a/one/src/app.tsx +++ b/one/src/app.tsx @@ -14,21 +14,21 @@ interface ItemContext { export const TodoContext = React.createContext({ items: [], - setItems: () => {} + setItems: () => {}, }); const App = ({ children }: React.PropsWithChildren<{}>) => { const [items, setItems] = React.useState([ { id: '1', text: 'Learning Javascript', completed: true }, { id: '2', text: 'Learning ES2016', completed: true }, - { id: '3', text: 'Learning Remax', completed: false } + { id: '3', text: 'Learning Remax', completed: false }, ]); return ( {children} diff --git a/one/src/components/AddButton/index.css b/one/src/components/AddButton/index.css index 0b8c994..1a1a553 100644 --- a/one/src/components/AddButton/index.css +++ b/one/src/components/AddButton/index.css @@ -1,13 +1,13 @@ .add-button { display: inline-block; background: none; - color: #FFF; + color: #fff; border: none; - width: 300rpx; + width: 300px; } .add-icon { - font-size: 52rpx; - color: #00FFD6; - margin-right: 10rpx; + font-size: 52px; + color: #00ffd6; + margin-right: 10px; } diff --git a/one/src/components/Checkbox/index.ali.tsx b/one/src/components/Checkbox/index.ali.tsx new file mode 100644 index 0000000..49dff17 --- /dev/null +++ b/one/src/components/Checkbox/index.ali.tsx @@ -0,0 +1,3 @@ +import { Checkbox } from 'remax/ali'; + +export default Checkbox; diff --git a/one/src/components/Checkbox/index.alipay.tsx b/one/src/components/Checkbox/index.alipay.tsx deleted file mode 100644 index ade7be4..0000000 --- a/one/src/components/Checkbox/index.alipay.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { Checkbox } from 'remax/alipay'; - -export default Checkbox; diff --git a/one/src/components/Checkbox/index.web.tsx b/one/src/components/Checkbox/index.web.tsx new file mode 100644 index 0000000..4fdef52 --- /dev/null +++ b/one/src/components/Checkbox/index.web.tsx @@ -0,0 +1,47 @@ +import * as React from 'react'; +import { Context } from '../CheckboxGroup/index.web'; + +interface CheckboxProps { + value: string; + checked?: boolean; + className?: string; +} + +const CheckboxConsumer: React.FC = ({ + checked, + value, + className, + children, +}) => ( + + {({ toggle }) => ( + + )} + +); + +const Checkbox: React.FC< + CheckboxProps & { toggle: (value: any, checked: boolean) => void } +> = ({ checked, value, className, toggle }) => { + React.useEffect(() => { + toggle(value, checked ?? false); + }, []); + + return ( + toggle(value, !checked)} + /> + ); +}; + +export default CheckboxConsumer; diff --git a/one/src/components/CheckboxGroup/index.ali.tsx b/one/src/components/CheckboxGroup/index.ali.tsx new file mode 100644 index 0000000..2cf76af --- /dev/null +++ b/one/src/components/CheckboxGroup/index.ali.tsx @@ -0,0 +1,3 @@ +import { CheckboxGroup } from 'remax/ali'; + +export default CheckboxGroup; diff --git a/one/src/components/CheckboxGroup/index.alipay.tsx b/one/src/components/CheckboxGroup/index.alipay.tsx deleted file mode 100644 index 325ca07..0000000 --- a/one/src/components/CheckboxGroup/index.alipay.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { CheckboxGroup } from 'remax/alipay'; - -export default CheckboxGroup; diff --git a/one/src/components/CheckboxGroup/index.web.tsx b/one/src/components/CheckboxGroup/index.web.tsx new file mode 100644 index 0000000..423c341 --- /dev/null +++ b/one/src/components/CheckboxGroup/index.web.tsx @@ -0,0 +1,54 @@ +import * as React from 'react'; + +interface CheckboxGroupProps { + onChange?: (e: any) => void; + className?: string; +} + +export const Context = React.createContext<{ + value: string[]; + toggle: (value: any, checked: boolean) => void; +}>({ + value: [], + toggle: () => void 0, +}); + +const CheckboxGroup: React.FC = ({ + onChange, + className, + children, +}: React.PropsWithChildren) => { + const [value, setValue] = React.useState([]); + + React.useEffect(() => { + if (typeof onChange === 'function') { + onChange({ detail: { value } }); + } + }, [value]); + + function handleToggle(value: any, checked: boolean) { + setValue((values) => { + let newValues = values; + if (checked) { + newValues = Array.from(new Set([...values, value])); + } else { + newValues = values.filter((i) => i !== value); + } + + return newValues; + }); + } + + return ( + +
{children}
+
+ ); +}; + +export default CheckboxGroup; diff --git a/one/src/components/LoginButton/index.tsx b/one/src/components/LoginButton/index.tsx index 2ea6097..95a7fb6 100644 --- a/one/src/components/LoginButton/index.tsx +++ b/one/src/components/LoginButton/index.tsx @@ -22,7 +22,8 @@ const LoginButton = ({ login, children }: React.PropsWithChildren) => {