Socket
Socket
Sign inDemoInstall

@uiw/react-select

Package Overview
Dependencies
Maintainers
2
Versions
171
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uiw/react-select - npm Package Compare versions

Comparing version 4.21.18 to 4.21.19

4

package.json
{
"name": "@uiw/react-select",
"version": "4.21.18",
"version": "4.21.19",
"description": "Select component",

@@ -47,4 +47,4 @@ "author": "Kenny Wong <wowohoo@qq.com>",

"dependencies": {
"@uiw/utils": "^4.21.18"
"@uiw/utils": "^4.21.19"
}
}

393

README.md

@@ -20,63 +20,11 @@ Select 选择器

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview&bg=#fff
import React from 'react';
import { Row, Col, Select } from 'uiw';
const Demo = () => (
<Row>
<Col fixed>
<Select defaultValue="w">
<Select.Option value="w">Choose an item...</Select.Option>
<Select.Option value="1">One</Select.Option>
<Select.Option value="2">Two</Select.Option>
<Select.Option value="3">Three</Select.Option>
<Select.Option value="4">Four</Select.Option>
</Select>
</Col>
</Row>
);
ReactDOM.render(<Demo />, _mount_);
```
### 禁用选择器
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
import { Row, Col, Select } from 'uiw';
const Demo = () => (
<Row>
<Col fixed>
<Select disabled defaultValue="3">
<Select.Option value="w">Choose an item...</Select.Option>
<Select.Option value="1">One</Select.Option>
<Select.Option value="2">Two</Select.Option>
<Select.Option value="3">Three</Select.Option>
<Select.Option value="4">Four</Select.Option>
</Select>
</Col>
</Row>
);
ReactDOM.render(<Demo />, _mount_);
```
### 尺寸
通过 `size` 属性设置选择器的尺寸，提供三个尺寸参数设置。
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
import { Row, Col, Select, Button } from 'uiw';
const rowSty = { marginBottom: 10 };
const Demo = () => (
<div>
<Row gutter={10}>
export default function Demo() {
return (
<Row>
<Col fixed>
<Select size="small" disabled defaultValue="3" style={rowSty}>
<Select defaultValue="w">
<Select.Option value="w">Choose an item...</Select.Option>

@@ -89,9 +37,19 @@ <Select.Option value="1">One</Select.Option>

</Col>
<Col fixed>
<Button size="small">小尺寸</Button>
</Col>
</Row>
<Row gutter={10} style={rowSty}>
);
}
```
### 禁用选择器
```jsx mdx:preview&bg=#fff
import React from 'react';
import { Row, Col, Select } from 'uiw';
export default function Demo() {
return (
<Row>
<Col fixed>
<Select defaultValue="3">
<Select disabled defaultValue="3">
<Select.Option value="w">Choose an item...</Select.Option>

@@ -104,30 +62,72 @@ <Select.Option value="1">One</Select.Option>

</Col>
<Col fixed>
<Button size="default">默认尺寸</Button>
</Col>
</Row>
<Row gutter={10}>
<Col fixed>
<Select size="large" defaultValue="3">
<Select.Option value="w">Choose an item...</Select.Option>
<Select.Option value="1">One</Select.Option>
<Select.Option value="2">Two</Select.Option>
<Select.Option value="3">Three</Select.Option>
<Select.Option value="4">Four</Select.Option>
</Select>
</Col>
<Col fixed>
<Button size="large">大尺寸</Button>
</Col>
</Row>
</div>
);
ReactDOM.render(<Demo />, _mount_);
);
}
```
### 尺寸
通过 `size` 属性设置选择器的尺寸，提供三个尺寸参数设置。
```jsx mdx:preview&bg=#fff
import React from 'react';
import { Row, Col, Select, Button } from 'uiw';
const rowSty = { marginBottom: 10 };
export default function Demo() {
return (
<div>
<Row gutter={10}>
<Col fixed>
<Select size="small" disabled defaultValue="3" style={rowSty}>
<Select.Option value="w">Choose an item...</Select.Option>
<Select.Option value="1">One</Select.Option>
<Select.Option value="2">Two</Select.Option>
<Select.Option value="3">Three</Select.Option>
<Select.Option value="4">Four</Select.Option>
</Select>
</Col>
<Col fixed>
<Button size="small">小尺寸</Button>
</Col>
</Row>
<Row gutter={10} style={rowSty}>
<Col fixed>
<Select defaultValue="3">
<Select.Option value="w">Choose an item...</Select.Option>
<Select.Option value="1">One</Select.Option>
<Select.Option value="2">Two</Select.Option>
<Select.Option value="3">Three</Select.Option>
<Select.Option value="4">Four</Select.Option>
</Select>
</Col>
<Col fixed>
<Button size="default">默认尺寸</Button>
</Col>
</Row>
<Row gutter={10}>
<Col fixed>
<Select size="large" defaultValue="3">
<Select.Option value="w">Choose an item...</Select.Option>
<Select.Option value="1">One</Select.Option>
<Select.Option value="2">Two</Select.Option>
<Select.Option value="3">Three</Select.Option>
<Select.Option value="4">Four</Select.Option>
</Select>
</Col>
<Col fixed>
<Button size="large">大尺寸</Button>
</Col>
</Row>
</div>
);
}
```
### 选项组
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview&bg=#fff
import React from 'react';
import { Row, Col, Select } from 'uiw';

@@ -138,20 +138,21 @@

const Demo = () => (
<Row>
<Col fixed>
<Select defaultValue="w">
<Option value="w">Choose an item...</Option>
<Group label="Group 1">
<Option value="1">One</Option>
<Option value="2">Two</Option>
</Group>
<Group label="Group 2">
<Option value="3">Three</Option>
<Option value="4">Four</Option>
</Group>
</Select>
</Col>
</Row>
);
ReactDOM.render(<Demo />, _mount_);
export default function Demo() {
return (
<Row>
<Col fixed>
<Select defaultValue="w">
<Option value="w">Choose an item...</Option>
<Group label="Group 1">
<Option value="1">One</Option>
<Option value="2">Two</Option>
</Group>
<Group label="Group 2">
<Option value="3">Three</Option>
<Option value="4">Four</Option>
</Group>
</Select>
</Col>
</Row>
);
}
```

@@ -163,71 +164,71 @@

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview&bg=#fff
import React from 'react';
import { Form, Row, Col, Select, Button, Notify } from 'uiw';
const Demo = () => (
<div>
<Form
onSubmitError={(error) => {
if (error.filed) {
return { ...error.filed };
}
return null;
}}
onSubmit={({initial, current}) => {
const errorObj = {};
if (!current.selectField) {
errorObj.selectField = '默认需要选择内容，选择入内容';
}
if(Object.keys(errorObj).length > 0) {
const err = new Error();
err.filed = errorObj;
Notify.error({ title: '提交失败！', description: '请确认提交表单是否正确！' });
throw err;
}
Notify.success({
title: '提交成功！',
description: `表单提交成功，选择值为：${current.selectField}，将自动填充初始化值！`,
});
}}
fields={{
selectField: {
children: (
<Select>
<Select.Option value="w">Choose an item...</Select.Option>
<Select.Option value="1">One</Select.Option>
<Select.Option value="2">Two</Select.Option>
<Select.Option value="3">Three</Select.Option>
<Select.Option value="4">Four</Select.Option>
</Select>
export default function Demo() {
return (
<div>
<Form
onSubmitError={(error) => {
if (error.filed) {
return { ...error.filed };
}
return null;
}}
onSubmit={({initial, current}) => {
const errorObj = {};
if (!current.selectField) {
errorObj.selectField = '默认需要选择内容，选择入内容';
}
if(Object.keys(errorObj).length > 0) {
const err = new Error();
err.filed = errorObj;
Notify.error({ title: '提交失败！', description: '请确认提交表单是否正确！' });
throw err;
}
Notify.success({
title: '提交成功！',
description: `表单提交成功，选择值为：${current.selectField}，将自动填充初始化值！`,
});
}}
fields={{
selectField: {
children: (
<Select>
<Select.Option value="w">Choose an item...</Select.Option>
<Select.Option value="1">One</Select.Option>
<Select.Option value="2">Two</Select.Option>
<Select.Option value="3">Three</Select.Option>
<Select.Option value="4">Four</Select.Option>
</Select>
)
},
}}
>
{({ fields, state, canSubmit }) => {
return (
<div>
<Row>
<Col fixed>{fields.selectField}</Col>
</Row>
<Row>
<Col fixed>
<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>
)
},
}}
>
{({ fields, state, canSubmit }) => {
return (
<div>
<Row>
<Col fixed>{fields.selectField}</Col>
</Row>
<Row>
<Col fixed>
<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>
</div>
)
ReactDOM.render(<Demo />, _mount_);
}}
</Form>
</div>
)
}
```

@@ -243,30 +244,30 @@

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview&bg=#fff
import React from 'react';
import { Row, Col, Select } from 'uiw';
const Demo = () => (
<Row style={{ backgroundColor: '#fff', margin: -15, padding: 15, borderRadius: '5px 5px 0 0' }} gutter={10}>
<Col fixed>
<select className="w-select" defaultValue="w">
<option value="w">Choose an item...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</Col>
<Col fixed>
<select disabled className="w-select" defaultValue="w">
<option value="w">Choose an item...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</Col>
</Row>
);
ReactDOM.render(<Demo />, _mount_);
export default function Demo() {
return (
<Row style={{ backgroundColor: '#fff', margin: -15, padding: 15, borderRadius: '5px 5px 0 0' }} gutter={10}>
<Col fixed>
<select className="w-select" defaultValue="w">
<option value="w">Choose an item...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</Col>
<Col fixed>
<select disabled className="w-select" defaultValue="w">
<option value="w">Choose an item...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</Col>
</Row>
);
}
```

@@ -273,0 +274,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc