@uiw/react-select
Advanced tools
Comparing version 4.21.23 to 5.0.0-bate.2.0
import React from 'react'; | ||
declare const _default: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLOptGroupElement> & React.RefAttributes<HTMLOptGroupElement>>; | ||
export default _default; | ||
//# sourceMappingURL=Group.d.ts.map |
@@ -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 |
@@ -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 |
import React from 'react'; | ||
declare const _default: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLOptionElement> & React.RefAttributes<HTMLOptionElement>>; | ||
export default _default; | ||
//# sourceMappingURL=Option.d.ts.map |
import React from 'react'; | ||
declare const _default: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLOptGroupElement> & React.RefAttributes<HTMLOptGroupElement>>; | ||
export default _default; | ||
//# sourceMappingURL=Group.d.ts.map |
@@ -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 |
@@ -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 @@ }; |
import React from 'react'; | ||
declare const _default: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLOptionElement> & React.RefAttributes<HTMLOptionElement>>; | ||
export default _default; | ||
//# sourceMappingURL=Option.d.ts.map |
{ | ||
"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 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
63529
30
528
4
1
266
1
+ Added@emotion/is-prop-valid@1.2.2(transitive)
+ Added@emotion/memoize@0.8.1(transitive)
+ Added@emotion/unitless@0.8.1(transitive)
+ Added@types/stylis@4.2.5(transitive)
+ Added@uiw/utils@5.0.0-bate-9(transitive)
+ Addedcamelize@1.0.1(transitive)
+ Addedcss-color-keywords@1.0.0(transitive)
+ Addedcss-to-react-native@3.2.0(transitive)
+ Addedcsstype@3.1.3(transitive)
+ Addednanoid@3.3.7(transitive)
+ Addedpicocolors@1.0.1(transitive)
+ Addedpostcss@8.4.38(transitive)
+ Addedpostcss-value-parser@4.2.0(transitive)
+ Addedshallowequal@1.1.0(transitive)
+ Addedsource-map-js@1.2.0(transitive)
+ Addedstyled-components@6.1.12(transitive)
+ Addedstylis@4.3.2(transitive)
+ Addedtslib@2.6.2(transitive)
- Removed@uiw/utils@4.22.3(transitive)
Updated@uiw/utils@^5.0.0-bate.2.0