@autoguru/overdrive 4.26.2 → 4.26.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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableText.d.ts","sourceRoot":"","sources":["../../../lib/components/EditableText/EditableText.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,
|
|
1
|
+
{"version":3,"file":"EditableText.d.ts","sourceRoot":"","sources":["../../../lib/components/EditableText/EditableText.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEN,cAAc,EAEd,mBAAmB,EAKnB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAC7B,OAAO,EAAE,IAAI,EAAiB,MAAM,SAAS,CAAC;AAK9C,KAAK,QAAQ,GAAG,IAAI,CACnB,cAAc,CAAC,OAAO,GAAG,CAAC,EAC1B,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,CAC9C,CAAC;AACF,KAAK,SAAS,GAAG,IAAI,CACpB,cAAc,CAAC,OAAO,IAAI,CAAC,EAC3B,IAAI,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAChD,CAAC;AACF,KAAK,UAAU,GAAG,IAAI,CACrB,mBAAmB,CAAC,gBAAgB,CAAC,EACnC,OAAO,GACP,IAAI,GACJ,WAAW,GACX,OAAO,GACP,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,WAAW,GACX,MAAM,SAAS,GACf,MAAM,QAAQ,CAChB,CAAC;AAEF,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,UAAU,EAAE,QAAQ;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CACzC;AAED,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAClC,eAAO,MAAM,YAAY,iFAmGxB,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
4
4
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
5
|
-
const _excluded = ["is", "colour", "size", "display", "value", "onFocus", "onBlur", "onKeyDown", "onModeChange", "tabIndex"];
|
|
5
|
+
const _excluded = ["is", "colour", "size", "display", "value", "onFocus", "onBlur", "onKeyDown", "onModeChange", "tabIndex", "onChange"];
|
|
6
6
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
7
7
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
8
8
|
import clsx from 'clsx';
|
|
9
9
|
import * as React from 'react';
|
|
10
|
-
import { forwardRef, useEffect, useRef, useState } from 'react';
|
|
10
|
+
import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
|
|
11
11
|
import { Box } from "../Box/index.js";
|
|
12
12
|
import { Text, useTextStyles } from "../Text/index.js";
|
|
13
13
|
import * as inputStyles from "../private/InputBase/withEnhancedInput.css.js";
|
|
@@ -25,17 +25,25 @@ export const EditableText = forwardRef((_ref, ref) => {
|
|
|
25
25
|
onBlur,
|
|
26
26
|
onKeyDown,
|
|
27
27
|
onModeChange,
|
|
28
|
-
tabIndex = 0
|
|
28
|
+
tabIndex = 0,
|
|
29
|
+
onChange: incomingOnChange
|
|
29
30
|
} = _ref,
|
|
30
31
|
inputProps = _objectWithoutProperties(_ref, _excluded);
|
|
31
32
|
const textRef = useRef(null);
|
|
32
33
|
const [mode, setMode] = useState('TEXT');
|
|
34
|
+
const [inputValue, setInputValue] = useState(value);
|
|
33
35
|
const onRequestModeChange = newMode => {
|
|
34
36
|
setMode(newMode);
|
|
35
37
|
if (typeof onModeChange === 'function') {
|
|
36
38
|
onModeChange(newMode);
|
|
37
39
|
}
|
|
38
40
|
};
|
|
41
|
+
const onChange = useCallback(e => {
|
|
42
|
+
if (mode === 'INPUT') {
|
|
43
|
+
setInputValue(e.currentTarget.value);
|
|
44
|
+
}
|
|
45
|
+
if (typeof incomingOnChange === 'function') incomingOnChange(e);
|
|
46
|
+
}, [incomingOnChange, mode, value]);
|
|
39
47
|
const textStyles = useTextStyles({
|
|
40
48
|
is,
|
|
41
49
|
colour,
|
|
@@ -72,8 +80,9 @@ export const EditableText = forwardRef((_ref, ref) => {
|
|
|
72
80
|
is: "input"
|
|
73
81
|
}, inputProps), {}, {
|
|
74
82
|
autoFocus: true,
|
|
75
|
-
value:
|
|
83
|
+
value: inputValue,
|
|
76
84
|
className: clsx(textStyles, inputStyles.input.itself.root),
|
|
85
|
+
onChange: onChange,
|
|
77
86
|
style: {
|
|
78
87
|
width
|
|
79
88
|
}
|
|
@@ -86,7 +95,7 @@ export const EditableText = forwardRef((_ref, ref) => {
|
|
|
86
95
|
className: clsx(textStyles, styles.text, {
|
|
87
96
|
[styles.textHidden]: mode === 'INPUT'
|
|
88
97
|
}),
|
|
89
|
-
children: value
|
|
98
|
+
children: mode === 'INPUT' ? inputValue : value
|
|
90
99
|
})]
|
|
91
100
|
});
|
|
92
101
|
});
|