1 | "use strict";
|
2 |
|
3 | var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
4 |
|
5 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
6 |
|
7 | Object.defineProperty(exports, "__esModule", {
|
8 | value: true
|
9 | });
|
10 | exports.defaultShouldSelect = defaultShouldSelect;
|
11 | exports["default"] = exports.useHint = void 0;
|
12 |
|
13 | var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
14 |
|
15 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
16 |
|
17 | var _invariant = _interopRequireDefault(require("invariant"));
|
18 |
|
19 | var _react = _interopRequireWildcard(require("react"));
|
20 |
|
21 | var _Context = require("../core/Context");
|
22 |
|
23 | var _utils = require("../utils");
|
24 |
|
25 | var _constants = require("../constants");
|
26 |
|
27 |
|
28 |
|
29 | function interpolateStyle(styles, attr, subattr) {
|
30 | if (subattr === void 0) {
|
31 | subattr = '';
|
32 | }
|
33 |
|
34 |
|
35 | if (subattr) {
|
36 |
|
37 | subattr = subattr.replace(subattr[0], subattr[0].toUpperCase());
|
38 | }
|
39 |
|
40 | return ['Top', 'Right', 'Bottom', 'Left'].map(function (dir) {
|
41 | return styles[attr + dir + subattr];
|
42 | }).join(' ');
|
43 | }
|
44 |
|
45 | function copyStyles(inputNode, hintNode) {
|
46 | if (!inputNode || !hintNode) {
|
47 | return;
|
48 | }
|
49 |
|
50 | var inputStyle = window.getComputedStyle(inputNode);
|
51 |
|
52 |
|
53 | hintNode.style.borderStyle = interpolateStyle(inputStyle, 'border', 'style');
|
54 | hintNode.style.borderWidth = interpolateStyle(inputStyle, 'border', 'width');
|
55 | hintNode.style.fontSize = inputStyle.fontSize;
|
56 | hintNode.style.height = inputStyle.height;
|
57 | hintNode.style.lineHeight = inputStyle.lineHeight;
|
58 | hintNode.style.margin = interpolateStyle(inputStyle, 'margin');
|
59 | hintNode.style.padding = interpolateStyle(inputStyle, 'padding');
|
60 |
|
61 | }
|
62 |
|
63 | function defaultShouldSelect(e, state) {
|
64 | var shouldSelectHint = false;
|
65 | var currentTarget = e.currentTarget,
|
66 | keyCode = e.keyCode;
|
67 |
|
68 | if (keyCode === _constants.RIGHT) {
|
69 |
|
70 |
|
71 |
|
72 | shouldSelectHint = (0, _utils.isSelectable)(currentTarget) ? currentTarget.selectionStart === currentTarget.value.length : true;
|
73 | }
|
74 |
|
75 | if (keyCode === _constants.TAB) {
|
76 |
|
77 | e.preventDefault();
|
78 | shouldSelectHint = true;
|
79 | }
|
80 |
|
81 | if (keyCode === _constants.RETURN) {
|
82 | shouldSelectHint = !!state.selectHintOnEnter;
|
83 | }
|
84 |
|
85 | return typeof state.shouldSelect === 'function' ? state.shouldSelect(shouldSelectHint, e) : shouldSelectHint;
|
86 | }
|
87 |
|
88 | var useHint = function useHint(_ref) {
|
89 | var children = _ref.children,
|
90 | shouldSelect = _ref.shouldSelect;
|
91 | !(_react["default"].Children.count(children) === 1) ? process.env.NODE_ENV !== "production" ? (0, _invariant["default"])(false, '`useHint` expects one child.') : invariant(false) : void 0;
|
92 |
|
93 | var _useTypeaheadContext = (0, _Context.useTypeaheadContext)(),
|
94 | hintText = _useTypeaheadContext.hintText,
|
95 | initialItem = _useTypeaheadContext.initialItem,
|
96 | inputNode = _useTypeaheadContext.inputNode,
|
97 | onAdd = _useTypeaheadContext.onAdd,
|
98 | selectHintOnEnter = _useTypeaheadContext.selectHintOnEnter;
|
99 |
|
100 | var hintRef = (0, _react.useRef)(null);
|
101 |
|
102 | var onKeyDown = function onKeyDown(e) {
|
103 | if (hintText && initialItem && defaultShouldSelect(e, {
|
104 | selectHintOnEnter: selectHintOnEnter,
|
105 | shouldSelect: shouldSelect
|
106 | })) {
|
107 | onAdd(initialItem);
|
108 | }
|
109 |
|
110 | children.props.onKeyDown && children.props.onKeyDown(e);
|
111 | };
|
112 |
|
113 | (0, _react.useEffect)(function () {
|
114 | copyStyles(inputNode, hintRef.current);
|
115 | });
|
116 | return {
|
117 | child: (0, _react.cloneElement)(children, (0, _extends2["default"])({}, children.props, {
|
118 | onKeyDown: onKeyDown
|
119 | })),
|
120 | hintRef: hintRef,
|
121 | hintText: hintText
|
122 | };
|
123 | };
|
124 |
|
125 | exports.useHint = useHint;
|
126 |
|
127 | var Hint = function Hint(_ref2) {
|
128 | var className = _ref2.className,
|
129 | props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["className"]);
|
130 |
|
131 | var _useHint = useHint(props),
|
132 | child = _useHint.child,
|
133 | hintRef = _useHint.hintRef,
|
134 | hintText = _useHint.hintText;
|
135 |
|
136 | return _react["default"].createElement("div", {
|
137 | className: className,
|
138 | style: {
|
139 | display: 'flex',
|
140 | flex: 1,
|
141 | height: '100%',
|
142 | position: 'relative'
|
143 | }
|
144 | }, child, _react["default"].createElement("input", {
|
145 | "aria-hidden": true,
|
146 | className: "rbt-input-hint",
|
147 | ref: hintRef,
|
148 | readOnly: true,
|
149 | style: {
|
150 | backgroundColor: 'transparent',
|
151 | borderColor: 'transparent',
|
152 | boxShadow: 'none',
|
153 | color: 'rgba(0, 0, 0, 0.35)',
|
154 | left: 0,
|
155 | pointerEvents: 'none',
|
156 | position: 'absolute',
|
157 | top: 0,
|
158 | width: '100%'
|
159 | },
|
160 | tabIndex: -1,
|
161 | value: hintText
|
162 | }));
|
163 | };
|
164 |
|
165 | var _default = Hint;
|
166 | exports["default"] = _default; |
\ | No newline at end of file |