magic-csb/ihealth-kit-registration
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: components

Browse Source
This commit is contained in:
EleanorMao 2023-04-23 22:15:39 +08:00
parent c4e3ec3f7c
commit 6345d35d4d
9 changed files with 242 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
NOTE.md
View File

@ -1,36 +1,37 @@
# Responsive
# Basic Components
* [x] Typography
* [x] Link
* [x] Link
* [x] Button
* [x] IconButton
* [x] TextButton
* [x] IconButton
* [x] TextButton
* [x] Modal
* [x] Step
* [x] Tooltip
* [x] Tag
# HandWrite Component
* Hamburger Menu - 需要手写！
* Captcha Input - 需要找别的组件！
# Form Components
* [x] Input
* [x] Password Input with Eye Icon
* [x] Password Input with Eye Icon
* [x] Radio - 大屏上黑色主题
* [x] Radio Group
* [x] Checkbox
* [x] Textarea
* Select
* Form
* FormItem
* FormItem with Validate Icon
* FormItem with Help Icon
* FormItem with Error Message
* [x] Select
* [x] Form
* [x] FormItem
* [x] FormItem with Error Message
# Layout Components
* Layout
* Header
* Footer
* Header
* Footer

40
scripts/genAntdCss.tsx
View File

@ -5,6 +5,7 @@ import React from 'react';
const outputPath = './src/styles/antd.min.css';
const brandPrimary = '#FF5200';
const textPrimary = '#1E1D1F'
const textDarker = '#000022'
@ -69,7 +70,44 @@ const css = extractStyle((node) => (
Steps: {
colorSplit: brandPrimary,
colorTextDescription: textLighter,
}
},
Input: {
colorErrorOutline: brandPrimary,
colorBorder: textDarker,
colorError: textDarker,
colorErrorBorderHover: textDarker,
borderRadius: 2,
fontSize: 16,
colorIcon: '#D9D9D9',
colorPrimaryHover: textDarker,
colorTextPlaceholder: '#CACACC',
},
Select: {
colorBorder: textDarker,
colorPrimaryHover: textDarker,
colorTextPlaceholder: '#CACACC',
colorErrorOutline: brandPrimary,
colorError: textDarker,
colorErrorBorderHover: textDarker,
colorTextQuaternary: textDarker,
borderRadius: 2,
fontSize: 16,
borderRadiusLG: 0
},
Checkbox: {
controlInteractiveSize: 24,
colorPrimaryHover: textDarker,
colorPrimary: textDarker,
colorTextDisabled: textDarker,
colorBorder: textDarker,
borderRadiusSM: 2,
},
Radio: {
colorPrimaryHover: textDarker,
colorPrimary: textDarker,
colorTextDisabled: textDarker,
colorBorder: textDarker,
},
}
}}
>

121
src/App.tsx
View File

@ -1,123 +1,12 @@
import React, { useState } from 'react';
import React from 'react';
import { BreakpointProvider } from './components/Breakpoint'
import { ConfigProvider, Space } from 'antd'
import {RadioGroup, Radio, RadioChangeEvent} from './components/FormControl'
const brandPrimary = '#FF5200';
const textPrimary = '#1E1D1F'
const textDarker = '#000022'
const textLighter = '#8F9296'
const white = '#FDFDFD'
import { Button } from './components/Button'
function App() {
const [value, setValue] = useState(1);
const onChange = (e: RadioChangeEvent) => {
console.log('radio checked', e.target.value);
setValue(e.target.value);
};
return (
<ConfigProvider
theme={{
token: {
colorBgMask: 'rgba(217, 217, 217, 0.65)',
colorLink: brandPrimary,
colorLinkHover: brandPrimary,
colorLinkActive: brandPrimary,
colorPrimary: brandPrimary,
colorText: textPrimary,
colorTextBase: textPrimary,
fontSize: 16,
fontSizeHeading1: 28,
fontSizeHeading2: 22,
fontSizeHeading3: 20,
lineHeightHeading1: 1.3,
lineHeightHeading2: 1.3,
lineHeightHeading3: 1.3,
fontSizeHeading4: 16,
fontFamily: 'Lato, Helvetica, Arial, sans-serif'
},
components: {
Button: {
// button base
fontSize: 20,
borderRadius: 4,
controlHeight: 45,
lineHeight: 45 / 20,
controlOutlineWidth: 0,
controlOutline: 'transparent',
// primary button
colorPrimary: '#FF5A0C',
colorTextLightSolid: white,
colorPrimaryHover: brandPrimary,
colorPrimaryActive: brandPrimary,
// disabled button
colorBgContainerDisabled: '#CACACC',
colorTextDisabled: white,
// text button
colorText: brandPrimary,
colorBgTextHover: 'transparent',
colorBgTextActive: 'transparent',
},
Modal: {
borderRadiusLG: 10,
boxShadow: '2px 2px 4px 1px rgba(0, 0, 0, 0.2)',
paddingContentHorizontalLG: 32,
},
Tooltip: {
fontSize: 14,
paddingSM: 12,
paddingXS: 10,
borderRadius: 4,
colorTextLightSolid: textDarker,
colorBgDefault: white,
},
Steps: {
colorSplit: brandPrimary,
colorTextDescription: textLighter,
},
Input: {
colorErrorOutline: brandPrimary,
colorBorder: textDarker,
colorError: textDarker,
colorErrorBorderHover: textDarker,
borderRadius: 2,
fontSize: 16,
colorIcon: '#D9D9D9',
colorPrimaryHover: textDarker,
colorTextPlaceholder: '#CACACC',
},
Checkbox: {
controlInteractiveSize: 24,
colorPrimaryHover: textDarker,
colorPrimary: textDarker,
colorTextDisabled: textDarker,
colorBorder: textDarker,
borderRadiusSM: 2,
},
Radio: {
colorPrimaryHover: textDarker,
colorPrimary: textDarker,
colorTextDisabled: textDarker,
colorBorder: textDarker,
}
}
}}
>
<BreakpointProvider>
<div>iHealth</div>
<div style={{ padding: 30 }}>
<RadioGroup onChange={onChange} value={value}>
<Space direction="vertical">
<Radio value={1}>Option A</Radio>
<Radio value={2}>Option B</Radio>
<Radio value={3}>Option C</Radio>
</Space>
</RadioGroup>
</div>
</BreakpointProvider>
</ConfigProvider>
<BreakpointProvider>
<Button>iHealth</Button>
</BreakpointProvider>
);
}

11
src/components/FormControl/Select.tsx Normal file
View File

@ -0,0 +1,11 @@
import React, { FC } from 'react'
import { Select as AntdSelect, SelectProps as AntdSelectProps } from 'antd'
export type SelectProps = Omit<AntdSelectProps, 'allowClear' | 'autoClearSearchValue' | 'bordered'
| 'clearIcon' | 'maxTagPlaceholder' | 'maxTagTextLength' | 'menuItemSelectedIcon' |
'mode' | 'notFoundContent' | 'optionFilterProp' | 'removeIcon' | 'searchValue' | 'showArrow' | 'size'
| 'suffixIcon' | 'tagRender' | 'tokenSeparators' | 'onDeselect' | 'onClear'>
export const Select: FC<SelectProps> = (props) => {
return <AntdSelect {...props} />
}

1
src/components/FormControl/index.ts
View File

@ -1,6 +1,7 @@
export * from './TextArea'
export * from './Password'
export * from './Input'
export * from './Select'
export * from './Chekbox'
export * from './Radio'
export * from './RadioGroup'

5
src/index.tsx
View File

@ -1,9 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ConfigProvider } from 'antd'
import { Theme } from './theme'
import App from './App';
import 'typeface-lato'
import 'antd/dist/reset.css';
import './styles/antd.min.css';
import './styles/reset.css';
const root = ReactDOM.createRoot(
@ -11,6 +12,8 @@ const root = ReactDOM.createRoot(
);
root.render(
<React.StrictMode>
<ConfigProvider theme={Theme}>
<App />
</ConfigProvider>
</React.StrictMode>
);

1
src/styles/antd.min.css vendored
View File

File diff suppressed because one or more lines are too long

64
src/styles/reset.css
View File

@ -120,3 +120,67 @@
background: #FF5200;
transform: scale(1);
}
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
height: 48px;
padding: 0 12px;
}
.ant-select-single .ant-select-selector .ant-select-selection-item, .ant-select-single .ant-select-selector .ant-select-selection-placeholder,
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector:after {
line-height: 46px;
}
.ant-select-single .ant-select-selector .ant-select-selection-search {
inset-inline-start: 12px;
inset-inline-end: 12px;
}
.ant-select-focused.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer) .ant-select-selector {
box-shadow: none !important;
}
.ant-select-single.ant-select-open .ant-select-selection-item {
color: #000022;
}
.ant-select-status-error:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer) .ant-select-selector {
border-color: #000022;
outline: 1px solid #FF5200;
}
.ant-select-dropdown {
padding: 0;
box-shadow: none;
margin-top: -16px;
border: 1px solid #000022;
}
.ant-select-dropdown .ant-select-item-option,
.ant-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
background: #F3F3F3;
min-height: 48px;
padding: 12px;
border-bottom: 2px solid #fff;
}
.ant-form-item .ant-form-item-label > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
display: none;
}
.ant-form-vertical .ant-form-item-label, .ant-col-24.ant-form-item-label, .ant-col-xl-24.ant-form-item-label {
padding: 0 0 4px;
line-height: 18px;
}
.ant-input-affix-wrapper:focus, .ant-input-affix-wrapper-focused {
box-shadow: none !important;
}
.ant-form-item .ant-form-item-explain, .ant-form-item .ant-form-item-extra {
line-height: 1;
padding-top: 6px;
}
.ant-form-item {
margin-bottom: 15px;
}

104
src/theme/index.ts Normal file
View File

@ -0,0 +1,104 @@
import { ThemeConfig } from 'antd'
const brandPrimary = '#FF5200';
const textPrimary = '#1E1D1F'
const textDarker = '#000022'
const textLighter = '#8F9296'
const white = '#FDFDFD'
export const Theme: ThemeConfig = {
token: {
colorBgMask: 'rgba(217, 217, 217, 0.65)',
colorLink: brandPrimary,
colorLinkHover: brandPrimary,
colorLinkActive: brandPrimary,
colorPrimary: brandPrimary,
colorText: textPrimary,
colorTextBase: textPrimary,
fontSize: 16,
fontSizeHeading1: 28,
fontSizeHeading2: 22,
fontSizeHeading3: 20,
lineHeightHeading1: 1.3,
lineHeightHeading2: 1.3,
lineHeightHeading3: 1.3,
fontSizeHeading4: 16,
fontFamily: 'Lato, Helvetica, Arial, sans-serif'
},
components: {
Button: {
// button base
fontSize: 20,
borderRadius: 4,
controlHeight: 45,
lineHeight: 45 / 20,
controlOutlineWidth: 0,
controlOutline: 'transparent',
// primary button
colorPrimary: '#FF5A0C',
colorTextLightSolid: white,
colorPrimaryHover: brandPrimary,
colorPrimaryActive: brandPrimary,
// disabled button
colorBgContainerDisabled: '#CACACC',
colorTextDisabled: white,
// text button
colorText: brandPrimary,
colorBgTextHover: 'transparent',
colorBgTextActive: 'transparent',
},
Modal: {
borderRadiusLG: 10,
boxShadow: '2px 2px 4px 1px rgba(0, 0, 0, 0.2)',
paddingContentHorizontalLG: 32,
},
Tooltip: {
fontSize: 14,
paddingSM: 12,
paddingXS: 10,
borderRadius: 4,
colorTextLightSolid: textDarker,
colorBgDefault: white,
},
Steps: {
colorSplit: brandPrimary,
colorTextDescription: textLighter,
},
Input: {
colorErrorOutline: brandPrimary,
colorBorder: textDarker,
colorError: textDarker,
colorErrorBorderHover: textDarker,
borderRadius: 2,
fontSize: 16,
colorIcon: '#D9D9D9',
colorPrimaryHover: textDarker,
colorTextPlaceholder: '#CACACC',
},
Select: {
colorBorder: textDarker,
colorPrimaryHover: textDarker,
colorTextPlaceholder: '#CACACC',
colorErrorOutline: brandPrimary,
colorError: textDarker,
colorErrorBorderHover: textDarker,
colorTextQuaternary: textDarker,
borderRadius: 2,
fontSize: 16,
borderRadiusLG: 0
},
Checkbox: {
controlInteractiveSize: 24,
colorPrimaryHover: textDarker,
colorPrimary: textDarker,
colorTextDisabled: textDarker,
colorBorder: textDarker,
borderRadiusSM: 2,
},
Radio: {
colorPrimaryHover: textDarker,
colorPrimary: textDarker,
colorTextDisabled: textDarker,
colorBorder: textDarker,
},
}
}