1 | import _extends from "@babel/runtime/helpers/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
3 | import PropTypes from 'prop-types';
|
4 | import React, { useState } from 'react';
|
5 | import useRootClose from "react-overlays/useRootClose";
|
6 | import { getDisplayName, isFunction, warn } from '../utils';
|
7 | import { BACKSPACE } from '../constants';
|
8 | import { optionType } from '../propTypes';
|
9 | var propTypes = {
|
10 | onBlur: PropTypes.func,
|
11 | onClick: PropTypes.func,
|
12 | onFocus: PropTypes.func,
|
13 | onRemove: PropTypes.func,
|
14 | option: optionType.isRequired
|
15 | };
|
16 | export var useToken = function useToken(_ref) {
|
17 | var onBlur = _ref.onBlur,
|
18 | onClick = _ref.onClick,
|
19 | onFocus = _ref.onFocus,
|
20 | onRemove = _ref.onRemove,
|
21 | option = _ref.option,
|
22 | props = _objectWithoutPropertiesLoose(_ref, ["onBlur", "onClick", "onFocus", "onRemove", "option"]);
|
23 |
|
24 | var _useState = useState(false),
|
25 | active = _useState[0],
|
26 | setActive = _useState[1];
|
27 |
|
28 | var _useState2 = useState(null),
|
29 | rootElement = _useState2[0],
|
30 | attachRef = _useState2[1];
|
31 |
|
32 | var handleActiveChange = function handleActiveChange(e, isActive, callback) {
|
33 | e.stopPropagation();
|
34 | setActive(isActive);
|
35 | typeof callback === 'function' && callback(e);
|
36 | };
|
37 |
|
38 | var handleBlur = function handleBlur(e) {
|
39 | handleActiveChange(e, false, onBlur);
|
40 | };
|
41 |
|
42 | var handleClick = function handleClick(e) {
|
43 | handleActiveChange(e, true, onClick);
|
44 | };
|
45 |
|
46 | var handleFocus = function handleFocus(e) {
|
47 | handleActiveChange(e, true, onFocus);
|
48 | };
|
49 |
|
50 | var handleRemove = function handleRemove() {
|
51 | onRemove && onRemove(option);
|
52 | };
|
53 |
|
54 | var handleKeyDown = function handleKeyDown(e) {
|
55 | switch (e.keyCode) {
|
56 | case BACKSPACE:
|
57 | if (active) {
|
58 |
|
59 |
|
60 | e.preventDefault();
|
61 | handleRemove();
|
62 | }
|
63 |
|
64 | break;
|
65 |
|
66 | default:
|
67 | break;
|
68 | }
|
69 | };
|
70 |
|
71 | useRootClose(rootElement, handleBlur, _extends({}, props, {
|
72 | disabled: !active
|
73 | }));
|
74 | return _extends({}, props, {
|
75 | active: active,
|
76 | onBlur: handleBlur,
|
77 | onClick: handleClick,
|
78 | onFocus: handleFocus,
|
79 | onKeyDown: handleKeyDown,
|
80 | onRemove: isFunction(onRemove) ? handleRemove : undefined,
|
81 | ref: attachRef
|
82 | });
|
83 | };
|
84 | export var withToken = function withToken(Component) {
|
85 | var displayName = "withToken(" + getDisplayName(Component) + ")";
|
86 |
|
87 | var WrappedToken = function WrappedToken(props) {
|
88 | return React.createElement(Component, useToken(props));
|
89 | };
|
90 |
|
91 | WrappedToken.displayName = displayName;
|
92 | WrappedToken.propTypes = propTypes;
|
93 | return WrappedToken;
|
94 | };
|
95 | export default function tokenContainer(Component) {
|
96 |
|
97 | warn(false, 'The `tokenContainer` export is deprecated; use `withToken` instead.');
|
98 |
|
99 |
|
100 | return withToken(Component);
|
101 | } |
\ | No newline at end of file |