From c4e3ec3f7c12516da1d0b9529f6f9a6a481196e9 Mon Sep 17 00:00:00 2001 From: EleanorMao Date: Sun, 23 Apr 2023 20:59:09 +0800 Subject: [PATCH] feat: update form components --- NOTE.md | 13 +++-- src/App.tsx | 64 +++++++++++++++------- src/components/FormControl/Chekbox.tsx | 8 +++ src/components/FormControl/Input.tsx | 8 +++ src/components/FormControl/Password.tsx | 9 ++++ src/components/FormControl/Radio.tsx | 9 ++++ src/components/FormControl/RadioGroup.tsx | 8 +++ src/components/FormControl/TextArea.tsx | 9 ++++ src/components/FormControl/index.ts | 6 +++ src/styles/antd.min.css | 2 +- src/styles/reset.css | 66 +++++++++++++++++++++++ 11 files changed, 174 insertions(+), 28 deletions(-) create mode 100644 src/components/FormControl/Chekbox.tsx create mode 100644 src/components/FormControl/Input.tsx create mode 100644 src/components/FormControl/Password.tsx create mode 100644 src/components/FormControl/Radio.tsx create mode 100644 src/components/FormControl/RadioGroup.tsx create mode 100644 src/components/FormControl/TextArea.tsx create mode 100644 src/components/FormControl/index.ts diff --git a/NOTE.md b/NOTE.md index 8dcd7c9..2053597 100644 --- a/NOTE.md +++ b/NOTE.md @@ -17,13 +17,12 @@ * Captcha Input - 需要找别的组件! # Form Components -* Input - * Password Input with Eye Icon -* Radio Group - * Vertical Layout - * Horizontal Layout -* Checkbox -* Textarea +* [x] Input + * [x] Password Input with Eye Icon +* [x] Radio - 大屏上黑色主题 +* [x] Radio Group +* [x] Checkbox +* [x] Textarea * Select * Form * FormItem diff --git a/src/App.tsx b/src/App.tsx index ed12dcd..a6d45cd 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,9 +1,7 @@ -import React from 'react'; +import React, { useState } from 'react'; import { BreakpointProvider } from './components/Breakpoint' -import { ConfigProvider } from 'antd' -import { Button } from './components/Button' -import Icon from '@ant-design/icons'; -import { ReactComponent as CloseIcon } from './icons/close.svg' +import { ConfigProvider, Space } from 'antd' +import {RadioGroup, Radio, RadioChangeEvent} from './components/FormControl' const brandPrimary = '#FF5200'; const textPrimary = '#1E1D1F' @@ -12,20 +10,13 @@ const textLighter = '#8F9296' const white = '#FDFDFD' function App() { - const items = [ - { - title: 'Account', - }, - { - title: 'Tester Info', - }, - { - title: 'Review', - }, - { - title: 'Done', - }, - ]; + const [value, setValue] = useState(1); + + const onChange = (e: RadioChangeEvent) => { + console.log('radio checked', e.target.value); + setValue(e.target.value); + }; + return (
iHealth
-