@canonical/react-components 4.4.0 → 4.4.1
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.
|
@@ -41,7 +41,10 @@ const SearchBox = /*#__PURE__*/_react.default.forwardRef((_ref, forwardedRef) =>
|
|
|
41
41
|
} = _ref,
|
|
42
42
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
43
43
|
const internalRef = (0, _react.useRef)(null);
|
|
44
|
+
const [internalValue, setInternalValue] = (0, _react.useState)(value !== null && value !== void 0 ? value : "");
|
|
45
|
+
const hasValue = externallyControlled ? Boolean(value) : Boolean(internalValue);
|
|
44
46
|
const resetInput = () => {
|
|
47
|
+
setInternalValue("");
|
|
45
48
|
onChange === null || onChange === void 0 || onChange("");
|
|
46
49
|
onClear === null || onClear === void 0 || onClear();
|
|
47
50
|
if (internalRef.current) {
|
|
@@ -71,7 +74,10 @@ const SearchBox = /*#__PURE__*/_react.default.forwardRef((_ref, forwardedRef) =>
|
|
|
71
74
|
disabled: disabled,
|
|
72
75
|
id: id,
|
|
73
76
|
name: name,
|
|
74
|
-
onChange: evt =>
|
|
77
|
+
onChange: evt => {
|
|
78
|
+
setInternalValue(evt.target.value);
|
|
79
|
+
onChange === null || onChange === void 0 || onChange(evt.target.value);
|
|
80
|
+
},
|
|
75
81
|
onKeyDown: onKeyDown,
|
|
76
82
|
placeholder: placeholder,
|
|
77
83
|
ref: input => {
|
|
@@ -86,7 +92,7 @@ const SearchBox = /*#__PURE__*/_react.default.forwardRef((_ref, forwardedRef) =>
|
|
|
86
92
|
type: "search",
|
|
87
93
|
defaultValue: externallyControlled ? undefined : value,
|
|
88
94
|
value: externallyControlled ? value : undefined
|
|
89
|
-
}, props)),
|
|
95
|
+
}, props)), hasValue && /*#__PURE__*/_react.default.createElement("button", {
|
|
90
96
|
className: "p-search-box__reset",
|
|
91
97
|
disabled: disabled,
|
|
92
98
|
onClick: resetInput,
|
|
@@ -3,7 +3,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
|
|
|
3
3
|
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
4
4
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
5
5
|
import classNames from "classnames";
|
|
6
|
-
import React, { useRef } from "react";
|
|
6
|
+
import React, { useRef, useState } from "react";
|
|
7
7
|
import Icon from "../Icon";
|
|
8
8
|
export var Label = /*#__PURE__*/function (Label) {
|
|
9
9
|
Label["Clear"] = "Clear search field";
|
|
@@ -33,7 +33,10 @@ var SearchBox = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
|
|
|
33
33
|
} = _ref,
|
|
34
34
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
35
35
|
var internalRef = useRef(null);
|
|
36
|
+
var [internalValue, setInternalValue] = useState(value !== null && value !== void 0 ? value : "");
|
|
37
|
+
var hasValue = externallyControlled ? Boolean(value) : Boolean(internalValue);
|
|
36
38
|
var resetInput = () => {
|
|
39
|
+
setInternalValue("");
|
|
37
40
|
_onChange === null || _onChange === void 0 || _onChange("");
|
|
38
41
|
onClear === null || onClear === void 0 || onClear();
|
|
39
42
|
if (internalRef.current) {
|
|
@@ -63,7 +66,10 @@ var SearchBox = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
|
|
|
63
66
|
disabled: disabled,
|
|
64
67
|
id: id,
|
|
65
68
|
name: name,
|
|
66
|
-
onChange: evt =>
|
|
69
|
+
onChange: evt => {
|
|
70
|
+
setInternalValue(evt.target.value);
|
|
71
|
+
_onChange === null || _onChange === void 0 || _onChange(evt.target.value);
|
|
72
|
+
},
|
|
67
73
|
onKeyDown: onKeyDown,
|
|
68
74
|
placeholder: placeholder,
|
|
69
75
|
ref: input => {
|
|
@@ -78,7 +84,7 @@ var SearchBox = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
|
|
|
78
84
|
type: "search",
|
|
79
85
|
defaultValue: externallyControlled ? undefined : value,
|
|
80
86
|
value: externallyControlled ? value : undefined
|
|
81
|
-
}, props)),
|
|
87
|
+
}, props)), hasValue && /*#__PURE__*/React.createElement("button", {
|
|
82
88
|
className: "p-search-box__reset",
|
|
83
89
|
disabled: disabled,
|
|
84
90
|
onClick: resetInput,
|