New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@uiw/react-radio
Advanced tools
@uiw/react-radio - npm Package Compare versions
Comparing version 4.21.18 to 4.21.19
| { | ||
| "name": "@uiw/react-radio", | ||
| "version": "4.21.18", | ||
| "version": "4.21.19", | ||
| "description": "Radio component", | ||
@@ -47,6 +47,6 @@ "author": "Kenny Wong <wowohoo@qq.com>", | ||
| "dependencies": { | ||
| "@uiw/react-button": "^4.21.18", | ||
| "@uiw/react-button-group": "^4.21.18", | ||
| "@uiw/utils": "^4.21.18" | ||
| "@uiw/react-button": "^4.21.19", | ||
| "@uiw/react-button-group": "^4.21.19", | ||
| "@uiw/utils": "^4.21.19" | ||
| } | ||
| } |
217
README.md
@@ -20,19 +20,19 @@ Radio 单选框 | ||
| <!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> | ||
| ```jsx | ||
| import ReactDOM from 'react-dom'; | ||
| ```jsx mdx:preview&bg=#fff | ||
| import React from 'react'; | ||
| import { Radio, RadioButton } from 'uiw'; | ||
| const Demo = () => ( | ||
| <div> | ||
| <Radio value="1">Radio</Radio> | ||
| <Radio value="2" checked>选中</Radio> | ||
| <Radio value="3" disabled>禁用</Radio> | ||
| <Radio value="4" checked disabled>选中并禁用</Radio> | ||
| <Radio value="4" checked disabled>选中并禁用</Radio> | ||
| <RadioButton value="5" >RadioButton</RadioButton> | ||
| <RadioButton value="5" checked >RadioButton 选中</RadioButton> | ||
| </div> | ||
| ); | ||
| ReactDOM.render(<Demo />, _mount_); | ||
| export default function Demo() { | ||
| return ( | ||
| <div> | ||
| <Radio value="1">Radio</Radio> | ||
| <Radio value="2" checked>选中</Radio> | ||
| <Radio value="3" disabled>禁用</Radio> | ||
| <Radio value="4" checked disabled>选中并禁用</Radio> | ||
| <Radio value="4" checked disabled>选中并禁用</Radio> | ||
| <RadioButton value="5" >RadioButton</RadioButton> | ||
| <RadioButton value="5" checked >RadioButton 选中</RadioButton> | ||
| </div> | ||
| ); | ||
| } | ||
| ``` | ||
@@ -42,93 +42,92 @@ | ||
| <!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> | ||
| ```jsx | ||
| import ReactDOM from 'react-dom'; | ||
| ```jsx mdx:preview&bg=#fff | ||
| import React from 'react'; | ||
| import { Form, Radio, RadioGroup, RadioButton, Row, Col, Button, Notify } from 'uiw'; | ||
| const Demo = () => ( | ||
| <Form | ||
| onChange={({ initial, current }) => {}} | ||
| resetOnSubmit={false} | ||
| onSubmitError={(error) => error && error.filed ? { ...error.filed } : null} | ||
| onSubmit={({initial, current}) => { | ||
| const ErrObj = {}; | ||
| if (current.radioGroup === 'unknown') { | ||
| ErrObj.radioGroup = '请选择性别！'; | ||
| } | ||
| export default function Demo() { | ||
| return ( | ||
| <Form | ||
| onChange={({ initial, current }) => {}} | ||
| resetOnSubmit={false} | ||
| onSubmitError={(error) => error && error.filed ? { ...error.filed } : null} | ||
| onSubmit={({initial, current}) => { | ||
| const ErrObj = {}; | ||
| if (current.radioGroup === 'unknown') { | ||
| ErrObj.radioGroup = '请选择性别！'; | ||
| } | ||
| if(Object.keys(ErrObj).length > 0) { | ||
| const err = new Error(); | ||
| err.filed = ErrObj; | ||
| throw err; | ||
| } | ||
| if(Object.keys(ErrObj).length > 0) { | ||
| const err = new Error(); | ||
| err.filed = ErrObj; | ||
| throw err; | ||
| } | ||
| Notify.success({ | ||
| title: '提交成功！', description: `填写：【填写成功】！` | ||
| }); | ||
| }} | ||
| fields={{ | ||
| radioGroup: { | ||
| value: 'girl', | ||
| label: '请输入内容', | ||
| help: '必须选择性别！', | ||
| children: ( | ||
| <RadioGroup> | ||
| <Radio value="man">男</Radio> | ||
| <Radio value="girl">女</Radio> | ||
| <Radio value="shemale">中性</Radio> | ||
| <Radio value="unknown">未知</Radio> | ||
| </RadioGroup> | ||
| ), | ||
| }, | ||
| radioButtonGroup: { | ||
| value: 'girl', | ||
| label: '请输入内容', | ||
| help: '必须选择性别！', | ||
| children: ( | ||
| <RadioGroup> | ||
| <RadioButton value="man">男</RadioButton> | ||
| <RadioButton value="girl">女</RadioButton> | ||
| <RadioButton value="shemale">中性</RadioButton> | ||
| <RadioButton value="unknown">未知</RadioButton> | ||
| </RadioGroup> | ||
| ), | ||
| }, | ||
| radio: { | ||
| help: '请选择！该选项为必选！', | ||
| validator: (value) => !value ? '必填选项！' : null, | ||
| children: <Radio value="man">已阅读</Radio>, | ||
| }, | ||
| }} | ||
| > | ||
| {({ fields, state, canSubmit }) => { | ||
| return ( | ||
| <div> | ||
| <Row> | ||
| <Col>{fields.radioGroup}</Col> | ||
| </Row> | ||
| <Row> | ||
| <Col>{fields.radioButtonGroup}</Col> | ||
| </Row> | ||
| <Row> | ||
| <Col>{fields.radio}</Col> | ||
| </Row> | ||
| <Row> | ||
| <Col> | ||
| <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button> | ||
| </Col> | ||
| </Row> | ||
| <Row> | ||
| <Col> | ||
| <pre style={{ padding: 10, marginTop: 10 }}> | ||
| {JSON.stringify(state.current, null, 2)} | ||
| </pre> | ||
| </Col> | ||
| </Row> | ||
| </div> | ||
| ); | ||
| }} | ||
| </Form> | ||
| ); | ||
| ReactDOM.render(<Demo />, _mount_); | ||
| Notify.success({ | ||
| title: '提交成功！', description: `填写：【填写成功】！` | ||
| }); | ||
| }} | ||
| fields={{ | ||
| radioGroup: { | ||
| value: 'girl', | ||
| label: '请输入内容', | ||
| help: '必须选择性别！', | ||
| children: ( | ||
| <RadioGroup> | ||
| <Radio value="man">男</Radio> | ||
| <Radio value="girl">女</Radio> | ||
| <Radio value="shemale">中性</Radio> | ||
| <Radio value="unknown">未知</Radio> | ||
| </RadioGroup> | ||
| ), | ||
| }, | ||
| radioButtonGroup: { | ||
| value: 'girl', | ||
| label: '请输入内容', | ||
| help: '必须选择性别！', | ||
| children: ( | ||
| <RadioGroup> | ||
| <RadioButton value="man">男</RadioButton> | ||
| <RadioButton value="girl">女</RadioButton> | ||
| <RadioButton value="shemale">中性</RadioButton> | ||
| <RadioButton value="unknown">未知</RadioButton> | ||
| </RadioGroup> | ||
| ), | ||
| }, | ||
| radio: { | ||
| help: '请选择！该选项为必选！', | ||
| validator: (value) => !value ? '必填选项！' : null, | ||
| children: <Radio value="man">已阅读</Radio>, | ||
| }, | ||
| }} | ||
| > | ||
| {({ fields, state, canSubmit }) => { | ||
| return ( | ||
| <div> | ||
| <Row> | ||
| <Col>{fields.radioGroup}</Col> | ||
| </Row> | ||
| <Row> | ||
| <Col>{fields.radioButtonGroup}</Col> | ||
| </Row> | ||
| <Row> | ||
| <Col>{fields.radio}</Col> | ||
| </Row> | ||
| <Row> | ||
| <Col> | ||
| <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button> | ||
| </Col> | ||
| </Row> | ||
| <Row> | ||
| <Col> | ||
| <pre style={{ padding: 10, marginTop: 10 }}> | ||
| {JSON.stringify(state.current, null, 2)} | ||
| </pre> | ||
| </Col> | ||
| </Row> | ||
| </div> | ||
| ); | ||
| }} | ||
| </Form> | ||
| ); | ||
| } | ||
| ``` | ||
@@ -140,6 +139,4 @@ | ||
| <!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> | ||
| ```jsx | ||
| ```jsx mdx:preview&bg=#fff | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import { Radio, RadioGroup, RadioButton } from 'uiw'; | ||
@@ -174,3 +171,3 @@ | ||
| } | ||
| ReactDOM.render(<Demo />, _mount_); | ||
| export default Demo; | ||
| ``` | ||
@@ -182,7 +179,5 @@ | ||
| <!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> | ||
| ```jsx | ||
| ```jsx mdx:preview&bg=#fff | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import { Radio, RadioGroup, Divider, Button } from 'uiw'; | ||
| import { Radio, RadioGroup, RadioButton, Divider, Button } from 'uiw'; | ||
@@ -232,3 +227,3 @@ class Demo extends React.Component { | ||
| } | ||
| ReactDOM.render(<Demo />, _mount_); | ||
| export default Demo; | ||
| ``` | ||
@@ -235,0 +230,0 @@ |
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-0.11%
81281
- Number of lines in readme file
- decreased by-2.02%
242
Dependency changes
Updated@uiw/react-button@^4.21.19
Updated@uiw/utils@^4.21.19