Socket
Socket
Sign inDemoInstall

@uiw/react-select

Package Overview
Dependencies
Maintainers
2
Versions
171
Alerts
File Explorer

Advanced tools

npm Scripts
License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 4.21.23 to 5.0.0-bate.2.0

cjs/style/index.d.ts
cjs/style/index.js
cjs/style/index.js.map
esm/style/index.d.ts
esm/style/index.js
esm/style/index.js.map
src/style/index.ts

1

cjs/Group.d.ts
import React from 'react';
declare const _default: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLOptGroupElement> & React.RefAttributes<HTMLOptGroupElement>>;
export default _default;
//# sourceMappingURL=Group.d.ts.map

3

cjs/index.d.ts

@@ -5,3 +5,3 @@ import React from 'react';

import Group from './Group';
import './style/index.less';
export * from './style';
export interface SelectProps extends IProps, Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {

@@ -16,1 +16,2 @@ size?: 'large' | 'default' | 'small';

export default Select;
//# sourceMappingURL=index.d.ts.map

22

cjs/index.js

@@ -7,2 +7,3 @@ "use strict";

});
var _exportNames = {};
exports["default"] = void 0;

@@ -14,2 +15,14 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _Group = _interopRequireDefault(require("./Group"));
var _style = require("./style");
Object.keys(_style).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _style[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _style[key];
}
});
});
var _jsxRuntime = require("react/jsx-runtime");

@@ -24,5 +37,9 @@ var _excluded = ["prefixCls", "className", "size"];

other = (0, _objectWithoutProperties2["default"])(props, _excluded);
return /*#__PURE__*/(0, _jsxRuntime.jsx)("select", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other), {}, {
var cls = [prefixCls, className, size ? "".concat(prefixCls, "-").concat(size) : null].filter(Boolean).join(' ').trim();
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.SelectStyleWarp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other), {}, {
ref: ref,
className: [prefixCls, className, size ? "".concat(prefixCls, "-").concat(size) : null].filter(Boolean).join(' ').trim()
className: cls,
params: {
size: size
}
}));

@@ -35,3 +52,2 @@ };

exports["default"] = _default;
module.exports = exports.default;
//# sourceMappingURL=index.js.map

1

cjs/Option.d.ts
import React from 'react';
declare const _default: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLOptionElement> & React.RefAttributes<HTMLOptionElement>>;
export default _default;
//# sourceMappingURL=Option.d.ts.map

1

esm/Group.d.ts
import React from 'react';
declare const _default: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLOptGroupElement> & React.RefAttributes<HTMLOptGroupElement>>;
export default _default;
//# sourceMappingURL=Group.d.ts.map

3

esm/index.d.ts

@@ -5,3 +5,3 @@ import React from 'react';

import Group from './Group';
import './style/index.less';
export * from './style';
export interface SelectProps extends IProps, Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {

@@ -16,1 +16,2 @@ size?: 'large' | 'default' | 'small';

export default Select;
//# sourceMappingURL=index.d.ts.map

11

esm/index.js

@@ -7,4 +7,5 @@ import _extends from "@babel/runtime/helpers/extends";

import Group from './Group';
import "./style/index.css";
import { SelectStyleWarp } from './style';
import { jsx as _jsx } from "react/jsx-runtime";
export * from './style';
var InternalSelect = (props, ref) => {

@@ -17,5 +18,9 @@ var {

other = _objectWithoutPropertiesLoose(props, _excluded);
return /*#__PURE__*/_jsx("select", _extends({}, other, {
var cls = [prefixCls, className, size ? prefixCls + "-" + size : null].filter(Boolean).join(' ').trim();
return /*#__PURE__*/_jsx(SelectStyleWarp, _extends({}, other, {
ref: ref,
className: [prefixCls, className, size ? prefixCls + "-" + size : null].filter(Boolean).join(' ').trim()
className: cls,
params: {
size
}
}));

@@ -22,0 +27,0 @@ };

1

esm/Option.d.ts
import React from 'react';
declare const _default: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLOptionElement> & React.RefAttributes<HTMLOptionElement>>;
export default _default;
//# sourceMappingURL=Option.d.ts.map

7

package.json
{
"name": "@uiw/react-select",
"version": "4.21.23",
"version": "5.0.0-bate.2.0",
"description": "Select component",

@@ -44,7 +44,8 @@ "author": "Kenny Wong <wowohoo@qq.com>",

"react": ">=16.9.0",
"react-dom": ">=16.9.0"
"react-dom": ">=16.9.0",
"styled-components": ">=5.3.5"
},
"dependencies": {
"@uiw/utils": "^4.21.23"
"@uiw/utils": "^5.0.0-bate.2.0"
}
}

381

README.md

@@ -20,21 +20,20 @@ Select 选择器

```jsx mdx:preview&bg=#fff
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import { Row, Col, Select } from 'uiw';
export default function Demo() {
return (
<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>
);
}
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>
);
export default Demo
```

@@ -45,21 +44,20 @@

```jsx mdx:preview&bg=#fff
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import { Row, Col, Select } from 'uiw';
export default function Demo() {
return (
<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>
);
}
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>
);
export default Demo
```

@@ -72,3 +70,3 @@

```jsx mdx:preview&bg=#fff
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';

@@ -78,51 +76,49 @@ 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>
);
}
const Demo = () => (
<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>
);
export default Demo
```

@@ -132,3 +128,3 @@

```jsx mdx:preview&bg=#fff
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';

@@ -140,21 +136,20 @@ import { Row, Col, Select } from 'uiw';

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>
);
}
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>
);
export default Demo
```

@@ -166,71 +161,70 @@

```jsx mdx:preview&bg=#fff
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import { Form, Row, Col, Select, Button, Notify } from 'uiw';
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>
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>
)
}}
</Form>
</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>
)
export default Demo
```

@@ -242,34 +236,29 @@

```jsx
import 'uiw/lib/esm/select/style/index.less';
```
```jsx mdx:preview&bg=#fff
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import { Row, Col, Select } from 'uiw';
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>
);
}
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>
);
export default Demo
```

@@ -276,0 +265,0 @@ 

cjs/style/index.less
dist.css
esm/style/index.css
esm/style/index.less
src/style/index.less
cjs/Group.js.map

Sorry, the diff of this file is not supported yet

cjs/index.js.map

Sorry, the diff of this file is not supported yet

cjs/Option.js.map

Sorry, the diff of this file is not supported yet

esm/Group.js.map

Sorry, the diff of this file is not supported yet

esm/index.js.map

Sorry, the diff of this file is not supported yet

esm/Option.js.map

Sorry, the diff of this file is not supported yet

src/index.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc