@rc-component/select 1.2.1 → 1.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -16
- package/es/BaseSelect/index.js +0 -3
- package/es/SelectInput/index.js +9 -2
- package/es/hooks/useOpen.d.ts +1 -0
- package/es/hooks/useOpen.js +3 -4
- package/lib/BaseSelect/index.js +0 -3
- package/lib/SelectInput/index.js +9 -2
- package/lib/hooks/useOpen.d.ts +1 -0
- package/lib/hooks/useOpen.js +4 -4
- package/package.json +2 -5
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# rc-select
|
|
1
|
+
# @rc-component/select
|
|
2
2
|
|
|
3
3
|
---
|
|
4
4
|
|
|
@@ -12,22 +12,20 @@ React Select Component.
|
|
|
12
12
|
[![bundle size][bundlephobia-image]][bundlephobia-url]
|
|
13
13
|
[![dumi][dumi-image]][dumi-url]
|
|
14
14
|
|
|
15
|
-
[npm-image]:
|
|
16
|
-
[npm-url]: http://npmjs.org/package
|
|
17
|
-
[
|
|
18
|
-
[
|
|
19
|
-
[github-actions-image]: https://github.com/react-component/select/workflows/CI/badge.svg
|
|
20
|
-
[github-actions-url]: https://github.com/react-component/select/actions
|
|
15
|
+
[npm-image]: https://img.shields.io/npm/v/@rc-component/select.svg?style=flat-square
|
|
16
|
+
[npm-url]: http://npmjs.org/package/@rc-component/select
|
|
17
|
+
[github-actions-image]: https://github.com/react-component/select/actions/workflows/test.yml/badge.svg
|
|
18
|
+
[github-actions-url]: https://github.com/react-component/select/actions/workflows/test.yml
|
|
21
19
|
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/select/master.svg?style=flat-square
|
|
22
20
|
[codecov-url]: https://app.codecov.io/gh/react-component/select
|
|
23
21
|
[david-url]: https://david-dm.org/react-component/select
|
|
24
22
|
[david-image]: https://david-dm.org/react-component/select/status.svg?style=flat-square
|
|
25
23
|
[david-dev-url]: https://david-dm.org/react-component/select?type=dev
|
|
26
24
|
[david-dev-image]: https://david-dm.org/react-component/select/dev-status.svg?style=flat-square
|
|
27
|
-
[download-image]: https://img.shields.io/npm/dm
|
|
28
|
-
[download-url]: https://npmjs.org/package
|
|
29
|
-
[bundlephobia-url]: https://bundlephobia.com/package
|
|
30
|
-
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip
|
|
25
|
+
[download-image]: https://img.shields.io/npm/dm/@rc-component/select.svg?style=flat-square
|
|
26
|
+
[download-url]: https://npmjs.org/package/@rc-component/select
|
|
27
|
+
[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/select
|
|
28
|
+
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/select
|
|
31
29
|
[dumi-url]: https://github.com/umijs/dumi
|
|
32
30
|
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
|
|
33
31
|
|
|
@@ -46,15 +44,15 @@ React Select Component.
|
|
|
46
44
|
|
|
47
45
|
## install
|
|
48
46
|
|
|
49
|
-
[](https://npmjs.org/package/@rc-component/select)
|
|
50
48
|
|
|
51
49
|
## Usage
|
|
52
50
|
|
|
53
51
|
### basic use
|
|
54
52
|
|
|
55
53
|
```jsx | pure
|
|
56
|
-
import Select, { Option } from 'rc-select';
|
|
57
|
-
import 'rc-select/assets/index.css';
|
|
54
|
+
import Select, { Option } from '@rc-component/select';
|
|
55
|
+
import '@rc-component/select/assets/index.css';
|
|
58
56
|
|
|
59
57
|
export default () => (
|
|
60
58
|
<Select>
|
|
@@ -178,7 +176,7 @@ npm start
|
|
|
178
176
|
|
|
179
177
|
local example: http://localhost:9001/
|
|
180
178
|
|
|
181
|
-
online example:
|
|
179
|
+
online example: https://select-react-component.vercel.app/
|
|
182
180
|
|
|
183
181
|
## Test Case
|
|
184
182
|
|
|
@@ -194,4 +192,4 @@ npm run coverage
|
|
|
194
192
|
|
|
195
193
|
## License
|
|
196
194
|
|
|
197
|
-
rc-select is released under the MIT license.
|
|
195
|
+
@rc-component/select is released under the MIT license.
|
package/es/BaseSelect/index.js
CHANGED
package/es/SelectInput/index.js
CHANGED
|
@@ -10,6 +10,7 @@ import { isValidateOpenKey } from "../utils/keyUtil";
|
|
|
10
10
|
import { clsx } from 'clsx';
|
|
11
11
|
import { getDOM } from "@rc-component/util/es/Dom/findDOMNode";
|
|
12
12
|
import { composeRef } from "@rc-component/util/es/ref";
|
|
13
|
+
import { macroTask } from "../hooks/useOpen";
|
|
13
14
|
const DEFAULT_OMIT_PROPS = ['value', 'onChange', 'removeIcon', 'placeholder', 'maxTagCount', 'maxTagTextLength', 'maxTagPlaceholder', 'choiceTransitionName', 'onInputKeyDown', 'onPopupScroll', 'tabIndex', 'activeValue', 'onSelectorRemove', 'focused'];
|
|
14
15
|
export default /*#__PURE__*/React.forwardRef(function SelectInput(props, ref) {
|
|
15
16
|
const {
|
|
@@ -106,7 +107,8 @@ export default /*#__PURE__*/React.forwardRef(function SelectInput(props, ref) {
|
|
|
106
107
|
// ====================== Open ======================
|
|
107
108
|
const onInternalMouseDown = useEvent(event => {
|
|
108
109
|
if (!disabled) {
|
|
109
|
-
|
|
110
|
+
const inputDOM = getDOM(inputRef.current);
|
|
111
|
+
if (inputDOM && event.target !== inputDOM && !inputDOM.contains(event.target)) {
|
|
110
112
|
event.preventDefault();
|
|
111
113
|
}
|
|
112
114
|
|
|
@@ -128,7 +130,12 @@ export default /*#__PURE__*/React.forwardRef(function SelectInput(props, ref) {
|
|
|
128
130
|
onMouseDown?.(event);
|
|
129
131
|
});
|
|
130
132
|
const onInternalBlur = event => {
|
|
131
|
-
|
|
133
|
+
macroTask(() => {
|
|
134
|
+
const inputNode = getDOM(inputRef.current);
|
|
135
|
+
if (!inputNode || inputNode !== document.activeElement && !inputNode.contains(document.activeElement)) {
|
|
136
|
+
toggleOpen(false);
|
|
137
|
+
}
|
|
138
|
+
});
|
|
132
139
|
onBlur?.(event);
|
|
133
140
|
};
|
|
134
141
|
|
package/es/hooks/useOpen.d.ts
CHANGED
package/es/hooks/useOpen.js
CHANGED
|
@@ -5,7 +5,7 @@ const internalMacroTask = fn => {
|
|
|
5
5
|
channel.port1.onmessage = fn;
|
|
6
6
|
channel.port2.postMessage(null);
|
|
7
7
|
};
|
|
8
|
-
const macroTask = (fn, times = 1) => {
|
|
8
|
+
export const macroTask = (fn, times = 1) => {
|
|
9
9
|
if (times <= 0) {
|
|
10
10
|
fn();
|
|
11
11
|
return;
|
|
@@ -50,15 +50,14 @@ export default function useOpen(propOpen, onOpen, postOpen) {
|
|
|
50
50
|
});
|
|
51
51
|
const toggleOpen = useEvent((nextOpen, config = {}) => {
|
|
52
52
|
const {
|
|
53
|
-
ignoreNext = false
|
|
54
|
-
lazy = false
|
|
53
|
+
ignoreNext = false
|
|
55
54
|
} = config;
|
|
56
55
|
taskIdRef.current += 1;
|
|
57
56
|
const id = taskIdRef.current;
|
|
58
57
|
const nextOpenVal = typeof nextOpen === 'boolean' ? nextOpen : !mergedOpen;
|
|
59
58
|
|
|
60
59
|
// Since `mergedOpen` is post-processed, we need to check if the value really changed
|
|
61
|
-
if (nextOpenVal
|
|
60
|
+
if (nextOpenVal) {
|
|
62
61
|
if (!taskLockRef.current) {
|
|
63
62
|
triggerEvent(nextOpenVal);
|
|
64
63
|
|
package/lib/BaseSelect/index.js
CHANGED
package/lib/SelectInput/index.js
CHANGED
|
@@ -15,6 +15,7 @@ var _keyUtil = require("../utils/keyUtil");
|
|
|
15
15
|
var _clsx = require("clsx");
|
|
16
16
|
var _findDOMNode = require("@rc-component/util/lib/Dom/findDOMNode");
|
|
17
17
|
var _ref = require("@rc-component/util/lib/ref");
|
|
18
|
+
var _useOpen = require("../hooks/useOpen");
|
|
18
19
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
20
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
20
21
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -115,7 +116,8 @@ var _default = exports.default = /*#__PURE__*/React.forwardRef(function SelectIn
|
|
|
115
116
|
// ====================== Open ======================
|
|
116
117
|
const onInternalMouseDown = (0, _util.useEvent)(event => {
|
|
117
118
|
if (!disabled) {
|
|
118
|
-
|
|
119
|
+
const inputDOM = (0, _findDOMNode.getDOM)(inputRef.current);
|
|
120
|
+
if (inputDOM && event.target !== inputDOM && !inputDOM.contains(event.target)) {
|
|
119
121
|
event.preventDefault();
|
|
120
122
|
}
|
|
121
123
|
|
|
@@ -137,7 +139,12 @@ var _default = exports.default = /*#__PURE__*/React.forwardRef(function SelectIn
|
|
|
137
139
|
onMouseDown?.(event);
|
|
138
140
|
});
|
|
139
141
|
const onInternalBlur = event => {
|
|
140
|
-
|
|
142
|
+
(0, _useOpen.macroTask)(() => {
|
|
143
|
+
const inputNode = (0, _findDOMNode.getDOM)(inputRef.current);
|
|
144
|
+
if (!inputNode || inputNode !== document.activeElement && !inputNode.contains(document.activeElement)) {
|
|
145
|
+
toggleOpen(false);
|
|
146
|
+
}
|
|
147
|
+
});
|
|
141
148
|
onBlur?.(event);
|
|
142
149
|
};
|
|
143
150
|
|
package/lib/hooks/useOpen.d.ts
CHANGED
package/lib/hooks/useOpen.js
CHANGED
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = useOpen;
|
|
7
|
+
exports.macroTask = void 0;
|
|
7
8
|
var _util = require("@rc-component/util");
|
|
8
9
|
var _react = require("react");
|
|
9
10
|
const internalMacroTask = fn => {
|
|
@@ -25,7 +26,7 @@ const macroTask = (fn, times = 1) => {
|
|
|
25
26
|
* Trigger by latest open call, if nextOpen is undefined, means toggle.
|
|
26
27
|
* ignoreNext will skip next call in the macro task queue.
|
|
27
28
|
*/
|
|
28
|
-
|
|
29
|
+
exports.macroTask = macroTask;
|
|
29
30
|
/**
|
|
30
31
|
* When `open` is controlled, follow the controlled value;
|
|
31
32
|
* Otherwise use uncontrolled logic.
|
|
@@ -56,15 +57,14 @@ function useOpen(propOpen, onOpen, postOpen) {
|
|
|
56
57
|
});
|
|
57
58
|
const toggleOpen = (0, _util.useEvent)((nextOpen, config = {}) => {
|
|
58
59
|
const {
|
|
59
|
-
ignoreNext = false
|
|
60
|
-
lazy = false
|
|
60
|
+
ignoreNext = false
|
|
61
61
|
} = config;
|
|
62
62
|
taskIdRef.current += 1;
|
|
63
63
|
const id = taskIdRef.current;
|
|
64
64
|
const nextOpenVal = typeof nextOpen === 'boolean' ? nextOpen : !mergedOpen;
|
|
65
65
|
|
|
66
66
|
// Since `mergedOpen` is post-processed, we need to check if the value really changed
|
|
67
|
-
if (nextOpenVal
|
|
67
|
+
if (nextOpenVal) {
|
|
68
68
|
if (!taskLockRef.current) {
|
|
69
69
|
triggerEvent(nextOpenVal);
|
|
70
70
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rc-component/select",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.3",
|
|
4
4
|
"description": "React Select",
|
|
5
5
|
"engines": {
|
|
6
6
|
"node": ">=8.x"
|
|
@@ -49,7 +49,6 @@
|
|
|
49
49
|
"react-dom": "*"
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
|
-
"@rc-component/motion": "^1.1.4",
|
|
53
52
|
"@rc-component/trigger": "^3.0.0",
|
|
54
53
|
"@rc-component/util": "^1.3.0",
|
|
55
54
|
"clsx": "^2.1.1",
|
|
@@ -65,12 +64,10 @@
|
|
|
65
64
|
"@types/node": "^24.5.2",
|
|
66
65
|
"@types/react": "^18.3.0",
|
|
67
66
|
"@types/react-dom": "^18.3.0",
|
|
67
|
+
"@umijs/fabric": "^4.0.1",
|
|
68
68
|
"babel-jest": "^29.6.1",
|
|
69
|
-
"cross-env": "^7.0.0",
|
|
70
69
|
"dumi": "^2.2.13",
|
|
71
70
|
"eslint": "^8.55.0",
|
|
72
|
-
"eslint-plugin-jest": "^28.8.1",
|
|
73
|
-
"eslint-plugin-unicorn": "^56.0.0",
|
|
74
71
|
"father": "^4.0.0",
|
|
75
72
|
"husky": "^9.1.5",
|
|
76
73
|
"jsonp": "^0.2.1",
|