@a-type/ui 4.0.6 → 4.0.7
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/dist/cjs/components/liveUpdateTextField/LiveUpdateTextField.js +5 -5
- package/dist/cjs/components/liveUpdateTextField/LiveUpdateTextField.js.map +1 -1
- package/dist/cjs/components/liveUpdateTextField/LiveUpdateTextField.stories.d.ts +15 -0
- package/dist/cjs/components/liveUpdateTextField/LiveUpdateTextField.stories.js +23 -0
- package/dist/cjs/components/liveUpdateTextField/LiveUpdateTextField.stories.js.map +1 -0
- package/dist/cjs/components/textArea/TextArea.d.ts +1 -1
- package/dist/cjs/components/textArea/TextArea.js +2 -2
- package/dist/cjs/components/textArea/TextArea.js.map +1 -1
- package/dist/cjs/components/textArea/TextArea.stories.d.ts +3 -1
- package/dist/cjs/components/textArea/TextArea.stories.js +17 -1
- package/dist/cjs/components/textArea/TextArea.stories.js.map +1 -1
- package/dist/esm/components/liveUpdateTextField/LiveUpdateTextField.js +5 -5
- package/dist/esm/components/liveUpdateTextField/LiveUpdateTextField.js.map +1 -1
- package/dist/esm/components/liveUpdateTextField/LiveUpdateTextField.stories.d.ts +15 -0
- package/dist/esm/components/liveUpdateTextField/LiveUpdateTextField.stories.js +20 -0
- package/dist/esm/components/liveUpdateTextField/LiveUpdateTextField.stories.js.map +1 -0
- package/dist/esm/components/textArea/TextArea.d.ts +1 -1
- package/dist/esm/components/textArea/TextArea.js +2 -2
- package/dist/esm/components/textArea/TextArea.js.map +1 -1
- package/dist/esm/components/textArea/TextArea.stories.d.ts +3 -1
- package/dist/esm/components/textArea/TextArea.stories.js +16 -0
- package/dist/esm/components/textArea/TextArea.stories.js.map +1 -1
- package/package.json +1 -1
- package/src/components/liveUpdateTextField/LiveUpdateTextField.stories.tsx +23 -0
- package/src/components/liveUpdateTextField/LiveUpdateTextField.tsx +6 -7
- package/src/components/textArea/TextArea.stories.tsx +23 -0
- package/src/components/textArea/TextArea.tsx +1 -2
|
@@ -57,16 +57,16 @@ const LiveUpdateTextField = function LiveUpdateTextField(_a) {
|
|
|
57
57
|
// every once in a while, send an update to parent
|
|
58
58
|
const debouncedOnChange = (0, react_1.useMemo)(() => (0, utils_1.debounce)(onChange || (() => { }), debounceMs), [onChange, debounceMs]);
|
|
59
59
|
// update local state instantly and parent eventually
|
|
60
|
-
const
|
|
61
|
-
setDisplayValue(
|
|
62
|
-
debouncedOnChange(
|
|
60
|
+
const handleValueChange = (0, react_1.useCallback)((value) => {
|
|
61
|
+
setDisplayValue(value);
|
|
62
|
+
debouncedOnChange(value);
|
|
63
63
|
didChange.current = true;
|
|
64
64
|
}, [debouncedOnChange]);
|
|
65
65
|
if (textArea) {
|
|
66
|
-
return ((0, jsx_runtime_1.jsx)(TextArea_js_1.TextArea, Object.assign({ ref: ref, onFocus: handleFocus, onBlur: handleBlur, value: displayValue,
|
|
66
|
+
return ((0, jsx_runtime_1.jsx)(TextArea_js_1.TextArea, Object.assign({ ref: ref, onFocus: handleFocus, onBlur: handleBlur, value: displayValue, onValueChange: handleValueChange, autoSize: true }, rest)));
|
|
67
67
|
}
|
|
68
68
|
else {
|
|
69
|
-
return ((0, jsx_runtime_1.jsx)(Input_js_1.Input, Object.assign({ ref: ref, onFocus: handleFocus, onBlur: handleBlur, value: displayValue,
|
|
69
|
+
return ((0, jsx_runtime_1.jsx)(Input_js_1.Input, Object.assign({ ref: ref, onFocus: handleFocus, onBlur: handleBlur, value: displayValue, onValueChange: handleValueChange, type: type }, rest)));
|
|
70
70
|
}
|
|
71
71
|
};
|
|
72
72
|
exports.LiveUpdateTextField = LiveUpdateTextField;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LiveUpdateTextField.js","sourceRoot":"","sources":["../../../../src/components/liveUpdateTextField/LiveUpdateTextField.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;AAEb,yCAAyC;AACzC,
|
|
1
|
+
{"version":3,"file":"LiveUpdateTextField.js","sourceRoot":"","sources":["../../../../src/components/liveUpdateTextField/LiveUpdateTextField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react';
|
|
2
|
+
import { LiveUpdateTextField } from './LiveUpdateTextField.js';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: ({ ref, value, onChange, debounceMs, onFocus, onBlur, textArea, type, ...rest }: import("./LiveUpdateTextField.js").LiveUpdateTextFieldProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
6
|
+
argTypes: {};
|
|
7
|
+
parameters: {
|
|
8
|
+
controls: {
|
|
9
|
+
expanded: boolean;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
export default meta;
|
|
14
|
+
type Story = StoryObj<typeof LiveUpdateTextField>;
|
|
15
|
+
export declare const Default: Story;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
// @unocss-include
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.Default = void 0;
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
const react_1 = require("react");
|
|
7
|
+
const LiveUpdateTextField_js_1 = require("./LiveUpdateTextField.js");
|
|
8
|
+
const meta = {
|
|
9
|
+
title: 'Components/LiveUpdateTextField',
|
|
10
|
+
component: LiveUpdateTextField_js_1.LiveUpdateTextField,
|
|
11
|
+
argTypes: {},
|
|
12
|
+
parameters: {
|
|
13
|
+
controls: { expanded: true },
|
|
14
|
+
},
|
|
15
|
+
};
|
|
16
|
+
exports.default = meta;
|
|
17
|
+
exports.Default = {
|
|
18
|
+
render(args) {
|
|
19
|
+
const [value, setValue] = (0, react_1.useState)('Initial value');
|
|
20
|
+
return (0, jsx_runtime_1.jsx)(LiveUpdateTextField_js_1.LiveUpdateTextField, Object.assign({}, args, { value: value, onChange: setValue }));
|
|
21
|
+
},
|
|
22
|
+
};
|
|
23
|
+
//# sourceMappingURL=LiveUpdateTextField.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LiveUpdateTextField.stories.js","sourceRoot":"","sources":["../../../../src/components/liveUpdateTextField/LiveUpdateTextField.stories.tsx"],"names":[],"mappings":";;;;AACA,iCAAiC;AACjC,qEAA+D;AAE/D,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,gCAAgC;IACvC,SAAS,EAAE,4CAAmB;IAC9B,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC0C,CAAC;AAE7C,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,eAAe,CAAC,CAAC;QACpD,OAAO,uBAAC,4CAAmB,oBAAK,IAAI,IAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,IAAI,CAAC;IAC5E,CAAC;CACD,CAAC"}
|
|
@@ -8,6 +8,6 @@ export interface TextAreaProps extends InputProps {
|
|
|
8
8
|
placeholdersIntervalMs?: number;
|
|
9
9
|
rows?: number;
|
|
10
10
|
}
|
|
11
|
-
export declare const TextArea: ({ ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels,
|
|
11
|
+
export declare const TextArea: ({ ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels, placeholder, placeholders, placeholdersIntervalMs, onValueChange, ...rest }: TextAreaProps & {
|
|
12
12
|
ref?: React.Ref<any>;
|
|
13
13
|
}) => import("react/jsx-runtime.js").JSX.Element;
|
|
@@ -26,7 +26,7 @@ const useRotatingShuffledValue_js_1 = require("../../hooks/useRotatingShuffledVa
|
|
|
26
26
|
const index_js_1 = require("../input/index.js");
|
|
27
27
|
const TextArea = function TextArea(_a) {
|
|
28
28
|
var _b;
|
|
29
|
-
var { ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels = 0,
|
|
29
|
+
var { ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels = 0, placeholder, placeholders, placeholdersIntervalMs = 5000, onValueChange } = _a, rest = __rest(_a, ["ref", "autoSize", "autoSelect", "onFocus", "className", "rows", "padBottomPixels", "placeholder", "placeholders", "placeholdersIntervalMs", "onValueChange"]);
|
|
30
30
|
const innerRef = (0, react_1.useRef)(null);
|
|
31
31
|
const finalRef = (0, useMergedRef_js_1.default)(innerRef, ref);
|
|
32
32
|
const [innerValue, setInnerValue] = (0, react_1.useState)('');
|
|
@@ -49,7 +49,7 @@ const TextArea = function TextArea(_a) {
|
|
|
49
49
|
if (onValueChange) {
|
|
50
50
|
onValueChange(value, eventDetails);
|
|
51
51
|
}
|
|
52
|
-
}, [
|
|
52
|
+
}, [onValueChange]);
|
|
53
53
|
const handleFocus = (0, react_1.useCallback)((e) => {
|
|
54
54
|
if (autoSelect) {
|
|
55
55
|
e.target.select();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;AAEb,gDAAyD;AACzD,gDAA8B;AAC9B,iCAAuE;AACvE,kFAAuD;AACvD,yFAAmF;AACnF,gDAAmD;AAe5C,MAAM,QAAQ,GAAG,SAAS,QAAQ,CAAC,
|
|
1
|
+
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;AAEb,gDAAyD;AACzD,gDAA8B;AAC9B,iCAAuE;AACvE,kFAAuD;AACvD,yFAAmF;AACnF,gDAAmD;AAe5C,MAAM,QAAQ,GAAG,SAAS,QAAQ,CAAC,EAezC;;QAfyC,EACzC,GAAG,EACH,QAAQ,EACR,UAAU,EACV,OAAO,EACP,SAAS,EACT,IAAI,EACJ,eAAe,GAAG,CAAC,EACnB,WAAW,EACX,YAAY,EACZ,sBAAsB,GAAG,IAAI,EAC7B,aAAa,OAIb,EAHG,IAAI,cAZkC,8JAazC,CADO;IAIP,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAM,IAAI,CAAC,CAAC;IACnC,MAAM,QAAQ,GAAG,IAAA,yBAAY,EAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IAE7C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IACjD,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,UAAU,CAAC;IAE5C,gFAAgF;IAChF,IAAA,uBAAe,EAAC,GAAG,EAAE;QACpB,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtB,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;QACjC,IAAI,OAAO,EAAE,CAAC;YACb,IAAI,OAAO,CAAC,KAAK,KAAK,EAAE,IAAI,eAAe,EAAE,CAAC;gBAC7C,OAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;gBAC/B,MAAM,UAAU,GAAG,OAAO,CAAC,YAAY,CAAC;gBACxC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC;YAC5D,CAAC;QACF,CAAC;IACF,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC;IAE5C,MAAM,iBAAiB,GAAG,IAAA,mBAAW,EACpC,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;QACvB,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,aAAa,EAAE,CAAC;YACnB,aAAa,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;QACpC,CAAC;IACF,CAAC,EACD,CAAC,aAAa,CAAC,CACf,CAAC;IAEF,MAAM,WAAW,GAAG,IAAA,mBAAW,EAC9B,CAAC,CAAC,EAAE,EAAE;QACL,IAAI,UAAU,EAAE,CAAC;YAChB,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QACnB,CAAC;QACD,IAAI,OAAO,EAAE,CAAC;YACb,OAAO,CAAC,CAAC,CAAC,CAAC;QACZ,CAAC;IACF,CAAC,EACD,CAAC,UAAU,EAAE,OAAO,CAAC,CACrB,CAAC;IAEF,MAAM,iBAAiB,GAAG,IAAA,sDAAwB,EACjD,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,EAClB,sBAAsB,CACtB,CAAC;IAEF,OAAO,CACN,uBAAC,aAAK,kBACL,MAAM,EAAE,qCAAU,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAI,EAC/C,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAA,cAAU,EACpB,yBAAc,EACd,oFAAoF,EACpF,uCAAuC,EACvC;YACC,oCAAoC,EAAE,CAAC,QAAQ;YAC/C,gCAAgC,EAAE,QAAQ;SAC1C,EACD,SAAS,CACT,EACD,aAAa,EAAE,iBAAiB,EAChC,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,iBAAiB,IACzC,IAAI,EACP,CACF,CAAC;AACH,CAAC,CAAC;AAlFW,QAAA,QAAQ,YAkFnB"}
|
|
@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/react';
|
|
|
2
2
|
import { TextArea } from './TextArea.js';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: ({ ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels,
|
|
5
|
+
component: ({ ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels, placeholder, placeholders, placeholdersIntervalMs, onValueChange, ...rest }: import("./TextArea.js").TextAreaProps & {
|
|
6
6
|
ref?: React.Ref<any>;
|
|
7
7
|
}) => import("react/jsx-runtime.js").JSX.Element;
|
|
8
8
|
argTypes: {};
|
|
@@ -16,3 +16,5 @@ export default meta;
|
|
|
16
16
|
type Story = StoryObj<typeof TextArea>;
|
|
17
17
|
export declare const Default: Story;
|
|
18
18
|
export declare const Tall: Story;
|
|
19
|
+
export declare const Controlled: Story;
|
|
20
|
+
export declare const ControlledFromOnChange: Story;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.Tall = exports.Default = void 0;
|
|
4
|
+
exports.ControlledFromOnChange = exports.Controlled = exports.Tall = exports.Default = void 0;
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
const react_1 = require("react");
|
|
5
7
|
const TextArea_js_1 = require("./TextArea.js");
|
|
6
8
|
const meta = {
|
|
7
9
|
title: 'Components/TextArea',
|
|
@@ -23,4 +25,18 @@ exports.Tall = {
|
|
|
23
25
|
autoSize: true,
|
|
24
26
|
},
|
|
25
27
|
};
|
|
28
|
+
exports.Controlled = {
|
|
29
|
+
render() {
|
|
30
|
+
const [value, setValue] = (0, react_1.useState)('Initial value');
|
|
31
|
+
return (0, jsx_runtime_1.jsx)(TextArea_js_1.TextArea, { value: value, onValueChange: setValue, autoSize: true });
|
|
32
|
+
},
|
|
33
|
+
};
|
|
34
|
+
exports.ControlledFromOnChange = {
|
|
35
|
+
render() {
|
|
36
|
+
const [value, setValue] = (0, react_1.useState)('Initial value');
|
|
37
|
+
return ((0, jsx_runtime_1.jsx)(TextArea_js_1.TextArea, { value: value, onChange: (ev) => {
|
|
38
|
+
setValue(ev.target.value);
|
|
39
|
+
}, autoSize: true }));
|
|
40
|
+
},
|
|
41
|
+
};
|
|
26
42
|
//# sourceMappingURL=TextArea.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.stories.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.stories.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TextArea.stories.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.stories.tsx"],"names":[],"mappings":";;;;AACA,iCAAiC;AACjC,+CAAyC;AAEzC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,sBAAQ;IACnB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC+B,CAAC;AAElC,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC7B,IAAI,EAAE;QACL,QAAQ,EAAE,IAAI;KACd;CACD,CAAC;AAEW,QAAA,IAAI,GAAU;IAC1B,IAAI,EAAE;QACL,KAAK,EACJ,mFAAmF;QACpF,QAAQ,EAAE,IAAI;KACd;CACD,CAAC;AAEW,QAAA,UAAU,GAAU;IAChC,MAAM;QACL,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,eAAe,CAAC,CAAC;QACpD,OAAO,uBAAC,sBAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,SAAG,CAAC;IACrE,CAAC;CACD,CAAC;AAEW,QAAA,sBAAsB,GAAU;IAC5C,MAAM;QACL,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,eAAe,CAAC,CAAC;QACpD,OAAO,CACN,uBAAC,sBAAQ,IACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE;gBAChB,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC3B,CAAC,EACD,QAAQ,SACP,CACF,CAAC;IACH,CAAC;CACD,CAAC"}
|
|
@@ -54,16 +54,16 @@ export const LiveUpdateTextField = function LiveUpdateTextField(_a) {
|
|
|
54
54
|
// every once in a while, send an update to parent
|
|
55
55
|
const debouncedOnChange = useMemo(() => debounce(onChange || (() => { }), debounceMs), [onChange, debounceMs]);
|
|
56
56
|
// update local state instantly and parent eventually
|
|
57
|
-
const
|
|
58
|
-
setDisplayValue(
|
|
59
|
-
debouncedOnChange(
|
|
57
|
+
const handleValueChange = useCallback((value) => {
|
|
58
|
+
setDisplayValue(value);
|
|
59
|
+
debouncedOnChange(value);
|
|
60
60
|
didChange.current = true;
|
|
61
61
|
}, [debouncedOnChange]);
|
|
62
62
|
if (textArea) {
|
|
63
|
-
return (_jsx(TextArea, Object.assign({ ref: ref, onFocus: handleFocus, onBlur: handleBlur, value: displayValue,
|
|
63
|
+
return (_jsx(TextArea, Object.assign({ ref: ref, onFocus: handleFocus, onBlur: handleBlur, value: displayValue, onValueChange: handleValueChange, autoSize: true }, rest)));
|
|
64
64
|
}
|
|
65
65
|
else {
|
|
66
|
-
return (_jsx(Input, Object.assign({ ref: ref, onFocus: handleFocus, onBlur: handleBlur, value: displayValue,
|
|
66
|
+
return (_jsx(Input, Object.assign({ ref: ref, onFocus: handleFocus, onBlur: handleBlur, value: displayValue, onValueChange: handleValueChange, type: type }, rest)));
|
|
67
67
|
}
|
|
68
68
|
};
|
|
69
69
|
//# sourceMappingURL=LiveUpdateTextField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LiveUpdateTextField.js","sourceRoot":"","sources":["../../../../src/components/liveUpdateTextField/LiveUpdateTextField.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,
|
|
1
|
+
{"version":3,"file":"LiveUpdateTextField.js","sourceRoot":"","sources":["../../../../src/components/liveUpdateTextField/LiveUpdateTextField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react';
|
|
2
|
+
import { LiveUpdateTextField } from './LiveUpdateTextField.js';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: ({ ref, value, onChange, debounceMs, onFocus, onBlur, textArea, type, ...rest }: import("./LiveUpdateTextField.js").LiveUpdateTextFieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
argTypes: {};
|
|
7
|
+
parameters: {
|
|
8
|
+
controls: {
|
|
9
|
+
expanded: boolean;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
export default meta;
|
|
14
|
+
type Story = StoryObj<typeof LiveUpdateTextField>;
|
|
15
|
+
export declare const Default: Story;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
// @unocss-include
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useState } from 'react';
|
|
4
|
+
import { LiveUpdateTextField } from './LiveUpdateTextField.js';
|
|
5
|
+
const meta = {
|
|
6
|
+
title: 'Components/LiveUpdateTextField',
|
|
7
|
+
component: LiveUpdateTextField,
|
|
8
|
+
argTypes: {},
|
|
9
|
+
parameters: {
|
|
10
|
+
controls: { expanded: true },
|
|
11
|
+
},
|
|
12
|
+
};
|
|
13
|
+
export default meta;
|
|
14
|
+
export const Default = {
|
|
15
|
+
render(args) {
|
|
16
|
+
const [value, setValue] = useState('Initial value');
|
|
17
|
+
return _jsx(LiveUpdateTextField, Object.assign({}, args, { value: value, onChange: setValue }));
|
|
18
|
+
},
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=LiveUpdateTextField.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LiveUpdateTextField.stories.js","sourceRoot":"","sources":["../../../../src/components/liveUpdateTextField/LiveUpdateTextField.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,gCAAgC;IACvC,SAAS,EAAE,mBAAmB;IAC9B,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC0C,CAAC;AAE7C,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;QACpD,OAAO,KAAC,mBAAmB,oBAAK,IAAI,IAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,IAAI,CAAC;IAC5E,CAAC;CACD,CAAC"}
|
|
@@ -8,6 +8,6 @@ export interface TextAreaProps extends InputProps {
|
|
|
8
8
|
placeholdersIntervalMs?: number;
|
|
9
9
|
rows?: number;
|
|
10
10
|
}
|
|
11
|
-
export declare const TextArea: ({ ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels,
|
|
11
|
+
export declare const TextArea: ({ ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels, placeholder, placeholders, placeholdersIntervalMs, onValueChange, ...rest }: TextAreaProps & {
|
|
12
12
|
ref?: React.Ref<any>;
|
|
13
13
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -20,7 +20,7 @@ import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.j
|
|
|
20
20
|
import { inputClassName } from '../input/index.js';
|
|
21
21
|
export const TextArea = function TextArea(_a) {
|
|
22
22
|
var _b;
|
|
23
|
-
var { ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels = 0,
|
|
23
|
+
var { ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels = 0, placeholder, placeholders, placeholdersIntervalMs = 5000, onValueChange } = _a, rest = __rest(_a, ["ref", "autoSize", "autoSelect", "onFocus", "className", "rows", "padBottomPixels", "placeholder", "placeholders", "placeholdersIntervalMs", "onValueChange"]);
|
|
24
24
|
const innerRef = useRef(null);
|
|
25
25
|
const finalRef = useMergedRef(innerRef, ref);
|
|
26
26
|
const [innerValue, setInnerValue] = useState('');
|
|
@@ -43,7 +43,7 @@ export const TextArea = function TextArea(_a) {
|
|
|
43
43
|
if (onValueChange) {
|
|
44
44
|
onValueChange(value, eventDetails);
|
|
45
45
|
}
|
|
46
|
-
}, [
|
|
46
|
+
}, [onValueChange]);
|
|
47
47
|
const handleFocus = useCallback((e) => {
|
|
48
48
|
if (autoSelect) {
|
|
49
49
|
e.target.select();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;AAEb,OAAO,EAAE,KAAK,EAAc,MAAM,sBAAsB,CAAC;AACzD,OAAO,UAAU,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAenD,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,QAAQ,CAAC,
|
|
1
|
+
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/react';
|
|
|
2
2
|
import { TextArea } from './TextArea.js';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: ({ ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels,
|
|
5
|
+
component: ({ ref, autoSize, autoSelect, onFocus, className, rows, padBottomPixels, placeholder, placeholders, placeholdersIntervalMs, onValueChange, ...rest }: import("./TextArea.js").TextAreaProps & {
|
|
6
6
|
ref?: React.Ref<any>;
|
|
7
7
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
argTypes: {};
|
|
@@ -16,3 +16,5 @@ export default meta;
|
|
|
16
16
|
type Story = StoryObj<typeof TextArea>;
|
|
17
17
|
export declare const Default: Story;
|
|
18
18
|
export declare const Tall: Story;
|
|
19
|
+
export declare const Controlled: Story;
|
|
20
|
+
export declare const ControlledFromOnChange: Story;
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useState } from 'react';
|
|
2
4
|
import { TextArea } from './TextArea.js';
|
|
3
5
|
const meta = {
|
|
4
6
|
title: 'Components/TextArea',
|
|
@@ -20,4 +22,18 @@ export const Tall = {
|
|
|
20
22
|
autoSize: true,
|
|
21
23
|
},
|
|
22
24
|
};
|
|
25
|
+
export const Controlled = {
|
|
26
|
+
render() {
|
|
27
|
+
const [value, setValue] = useState('Initial value');
|
|
28
|
+
return _jsx(TextArea, { value: value, onValueChange: setValue, autoSize: true });
|
|
29
|
+
},
|
|
30
|
+
};
|
|
31
|
+
export const ControlledFromOnChange = {
|
|
32
|
+
render() {
|
|
33
|
+
const [value, setValue] = useState('Initial value');
|
|
34
|
+
return (_jsx(TextArea, { value: value, onChange: (ev) => {
|
|
35
|
+
setValue(ev.target.value);
|
|
36
|
+
}, autoSize: true }));
|
|
37
|
+
},
|
|
38
|
+
};
|
|
23
39
|
//# sourceMappingURL=TextArea.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.stories.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC+B,CAAC;AAElC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,IAAI,EAAE;QACL,QAAQ,EAAE,IAAI;KACd;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IAC1B,IAAI,EAAE;QACL,KAAK,EACJ,mFAAmF;QACpF,QAAQ,EAAE,IAAI;KACd;CACD,CAAC"}
|
|
1
|
+
{"version":3,"file":"TextArea.stories.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC+B,CAAC;AAElC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,IAAI,EAAE;QACL,QAAQ,EAAE,IAAI;KACd;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IAC1B,IAAI,EAAE;QACL,KAAK,EACJ,mFAAmF;QACpF,QAAQ,EAAE,IAAI;KACd;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAChC,MAAM;QACL,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;QACpD,OAAO,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,SAAG,CAAC;IACrE,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAU;IAC5C,MAAM;QACL,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;QACpD,OAAO,CACN,KAAC,QAAQ,IACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE;gBAChB,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC3B,CAAC,EACD,QAAQ,SACP,CACF,CAAC;IACH,CAAC;CACD,CAAC"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import { LiveUpdateTextField } from './LiveUpdateTextField.js';
|
|
4
|
+
|
|
5
|
+
const meta = {
|
|
6
|
+
title: 'Components/LiveUpdateTextField',
|
|
7
|
+
component: LiveUpdateTextField,
|
|
8
|
+
argTypes: {},
|
|
9
|
+
parameters: {
|
|
10
|
+
controls: { expanded: true },
|
|
11
|
+
},
|
|
12
|
+
} satisfies Meta<typeof LiveUpdateTextField>;
|
|
13
|
+
|
|
14
|
+
export default meta;
|
|
15
|
+
|
|
16
|
+
type Story = StoryObj<typeof LiveUpdateTextField>;
|
|
17
|
+
|
|
18
|
+
export const Default: Story = {
|
|
19
|
+
render(args) {
|
|
20
|
+
const [value, setValue] = useState('Initial value');
|
|
21
|
+
return <LiveUpdateTextField {...args} value={value} onChange={setValue} />;
|
|
22
|
+
},
|
|
23
|
+
};
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
import { debounce } from '@a-type/utils';
|
|
4
4
|
import {
|
|
5
|
-
ChangeEvent,
|
|
6
5
|
FocusEvent,
|
|
7
6
|
KeyboardEventHandler,
|
|
8
7
|
MouseEventHandler,
|
|
@@ -97,10 +96,10 @@ export const LiveUpdateTextField = function LiveUpdateTextField({
|
|
|
97
96
|
);
|
|
98
97
|
|
|
99
98
|
// update local state instantly and parent eventually
|
|
100
|
-
const
|
|
101
|
-
(
|
|
102
|
-
setDisplayValue(
|
|
103
|
-
debouncedOnChange(
|
|
99
|
+
const handleValueChange = useCallback(
|
|
100
|
+
(value: string) => {
|
|
101
|
+
setDisplayValue(value);
|
|
102
|
+
debouncedOnChange(value);
|
|
104
103
|
didChange.current = true;
|
|
105
104
|
},
|
|
106
105
|
[debouncedOnChange],
|
|
@@ -113,7 +112,7 @@ export const LiveUpdateTextField = function LiveUpdateTextField({
|
|
|
113
112
|
onFocus={handleFocus}
|
|
114
113
|
onBlur={handleBlur}
|
|
115
114
|
value={displayValue}
|
|
116
|
-
|
|
115
|
+
onValueChange={handleValueChange}
|
|
117
116
|
autoSize
|
|
118
117
|
{...rest}
|
|
119
118
|
/>
|
|
@@ -125,7 +124,7 @@ export const LiveUpdateTextField = function LiveUpdateTextField({
|
|
|
125
124
|
onFocus={handleFocus}
|
|
126
125
|
onBlur={handleBlur}
|
|
127
126
|
value={displayValue}
|
|
128
|
-
|
|
127
|
+
onValueChange={handleValueChange}
|
|
129
128
|
type={type}
|
|
130
129
|
{...rest}
|
|
131
130
|
/>
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { useState } from 'react';
|
|
2
3
|
import { TextArea } from './TextArea.js';
|
|
3
4
|
|
|
4
5
|
const meta = {
|
|
@@ -27,3 +28,25 @@ export const Tall: Story = {
|
|
|
27
28
|
autoSize: true,
|
|
28
29
|
},
|
|
29
30
|
};
|
|
31
|
+
|
|
32
|
+
export const Controlled: Story = {
|
|
33
|
+
render() {
|
|
34
|
+
const [value, setValue] = useState('Initial value');
|
|
35
|
+
return <TextArea value={value} onValueChange={setValue} autoSize />;
|
|
36
|
+
},
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
export const ControlledFromOnChange: Story = {
|
|
40
|
+
render() {
|
|
41
|
+
const [value, setValue] = useState('Initial value');
|
|
42
|
+
return (
|
|
43
|
+
<TextArea
|
|
44
|
+
value={value}
|
|
45
|
+
onChange={(ev) => {
|
|
46
|
+
setValue(ev.target.value);
|
|
47
|
+
}}
|
|
48
|
+
autoSize
|
|
49
|
+
/>
|
|
50
|
+
);
|
|
51
|
+
},
|
|
52
|
+
};
|
|
@@ -28,7 +28,6 @@ export const TextArea = function TextArea({
|
|
|
28
28
|
className,
|
|
29
29
|
rows,
|
|
30
30
|
padBottomPixels = 0,
|
|
31
|
-
onChange,
|
|
32
31
|
placeholder,
|
|
33
32
|
placeholders,
|
|
34
33
|
placeholdersIntervalMs = 5000,
|
|
@@ -63,7 +62,7 @@ export const TextArea = function TextArea({
|
|
|
63
62
|
onValueChange(value, eventDetails);
|
|
64
63
|
}
|
|
65
64
|
},
|
|
66
|
-
[
|
|
65
|
+
[onValueChange],
|
|
67
66
|
);
|
|
68
67
|
|
|
69
68
|
const handleFocus = useCallback<Exclude<InputProps['onFocus'], undefined>>(
|