@acusti/input-text - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

dist/InputText.d.ts

@@ -9,4 +9,15 @@ import * as React from 'react';
     disabled?: boolean;
+    /**
+     * If true, input renders as readonly initially and only becomes interactive
+     * when double-clicked or when user focuses the readonly input and then
+     * presses the enter key. Likewise, the input becomes readonly again when
+     * it is blurred or when the user presses enter or escape.
+     */
+    doubleClickToEdit?: boolean;
     enterKeyHint?: InputHTMLAttributes<HTMLInputElement>['enterKeyHint'];
     form?: string;
+    /**
+     * The initial value of the text input. If props.initialValue changes at
+     * any point, the new value will override the local state of the input.
+     */
     initialValue?: string;
@@ -19,2 +30,6 @@ list?: string;
     minLength?: number;
+    /**
+     * If true, input renders as a <textarea> that automatically grows and
+     * shrinks vertically to adjust to the length of its contents.
+     */
     multiLine?: boolean;
@@ -32,2 +47,3 @@ multiple?: boolean;
     required?: boolean;
+    /** If true, the contents of the input are selected when it’s focused. */
     selectTextOnFocus?: boolean;
@@ -37,2 +53,6 @@ size?: number;
     style?: React.CSSProperties;
+    /**
+     * If true, pressing enter/return submits the <form> that the input is a
+     * part of, or else blurs the input if no form is found.
+     */
     submitOnEnter?: boolean;
@@ -39,0 +59,0 @@ tabIndex?: number;

dist/InputText.js

 import * as React from 'react';
 const { useCallback, useEffect, useImperativeHandle, useRef, useState } = React;
-export default React.forwardRef(function InputText({ autoCapitalize, autoComplete, className, disabled, enterKeyHint, form, initialValue, list, max, maxHeight = Infinity, maxLength, min, minLength, multiLine, multiple, name, onBlur, onChange, onFocus, onKeyDown, onKeyUp, pattern, placeholder, readOnly, required, selectTextOnFocus, size, style, step, submitOnEnter, tabIndex, title, type = 'text', }, ref) {
+export default React.forwardRef(function InputText({ autoCapitalize, autoComplete, className, disabled, doubleClickToEdit, enterKeyHint, form, initialValue, list, max, maxHeight = Infinity, maxLength, min, minLength, multiLine, multiple, name, onBlur, onChange, onFocus, onKeyDown, onKeyUp, pattern, placeholder, readOnly, required, selectTextOnFocus, size, style, step, submitOnEnter, tabIndex, title, type = 'text', }, ref) {
     const inputRef = useRef(null);
@@ -17,10 +17,21 @@ useImperativeHandle(ref, () => inputRef.current);
     }, [initialValue]);
+    const [readOnlyState, setReadOnlyState] = useState(readOnly !== null && readOnly !== void 0 ? readOnly : doubleClickToEdit);
     const isInitialSelectionRef = useRef(true);
+    const startEditing = useCallback(() => {
+        if (!doubleClickToEdit)
+            return;
+        setReadOnlyState(false);
+    }, [doubleClickToEdit]);
     const handleBlur = useCallback((event) => {
-        setInputElement(event.currentTarget);
         if (onBlur)
             onBlur(event);
+        if (doubleClickToEdit) {
+            setReadOnlyState(true);
+        }
+        if (!selectTextOnFocus)
+            return;
+        setInputElement(event.currentTarget);
         // When input loses focus, reset isInitialSelection to true for next onSelect event
         isInitialSelectionRef.current = true;
-    }, [onBlur, setInputElement]);
+    }, [doubleClickToEdit, onBlur, selectTextOnFocus, setInputElement]);
     const setInputHeight = useCallback(() => {
@@ -42,2 +53,4 @@ if (!inputElement)
     const handleSelect = useCallback((event) => {
+        if (!selectTextOnFocus)
+            return;
         const input = event.currentTarget;
@@ -62,3 +75,3 @@ setInputElement(input);
         input.selectionEnd = valueLength;
-    }, [setInputElement]);
+    }, [selectTextOnFocus, setInputElement]);
     const handleKeyDown = useCallback((event) => {
@@ -83,7 +96,17 @@ if (onKeyDown)
         }
-    }, [multiLine, onKeyDown, submitOnEnter]);
+        else if (doubleClickToEdit && inputRef.current) {
+            if (readOnlyState) {
+                if (event.key === 'Enter') {
+                    setReadOnlyState(false);
+                }
+            }
+            else if (event.key === 'Enter' || event.key === 'Escape') {
+                inputRef.current.blur();
+            }
+        }
+    }, [doubleClickToEdit, multiLine, onKeyDown, readOnlyState, submitOnEnter]);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment
     const Element = (multiLine ? 'textarea' : 'input');
-    return (React.createElement(Element, Object.assign({ autoCapitalize: autoCapitalize, autoComplete: autoComplete, className: className, defaultValue: initialValue !== null && initialValue !== void 0 ? initialValue : '', disabled: disabled, enterKeyHint: enterKeyHint, form: form, list: list, maxLength: maxLength, minLength: minLength, multiple: multiple, name: name, onBlur: selectTextOnFocus ? handleBlur : onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: handleKeyDown, onKeyUp: onKeyUp, onSelect: selectTextOnFocus ? handleSelect : undefined, pattern: pattern, placeholder: placeholder, readOnly: readOnly, ref: setInputElement, required: required, size: size, style: style, tabIndex: tabIndex, title: title, type: type }, (multiLine ? { onInput: setInputHeight, rows: 1 } : { max, min, step }))));
+    return (React.createElement(Element, Object.assign({ autoCapitalize: autoCapitalize, autoComplete: autoComplete, className: className, defaultValue: initialValue !== null && initialValue !== void 0 ? initialValue : '', disabled: disabled, enterKeyHint: enterKeyHint, form: form, list: list, maxLength: maxLength, minLength: minLength, multiple: multiple, name: name, onBlur: handleBlur, onChange: onChange, onDoubleClick: startEditing, onFocus: onFocus, onKeyDown: handleKeyDown, onKeyUp: onKeyUp, onSelect: handleSelect, pattern: pattern, placeholder: placeholder, readOnly: readOnlyState, ref: setInputElement, required: required, size: size, style: style, tabIndex: tabIndex, title: title, type: type }, (multiLine ? { onInput: setInputHeight, rows: 1 } : { max, min, step }))));
 });
 //# sourceMappingURL=InputText.js.map

package.json

 {
     "name": "@acusti/input-text",
-    "version": "1.3.0",
+    "version": "1.4.0",
     "description": "React component that renders a semi-controlled input with multiLine and selectTextOnFocus support",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -10,8 +10,89 @@ # @acusti/input-text
 meaning that while it is [uncontrolled][] in the React sense, it’s value is
-overwritten whenever `props.initialValue` changes. Also, if
-`props.selectTextOnFocus` is true, it selects the entire contents of the
-input whenever the input is focused. Lastly, if `props.multiLine` is true,
-it renders a textarea element that autogrows and shrinks to adjust to the
-length of its contents.
+overwritten whenever `props.initialValue` changes. It also support
+multiline inputs (rendered as a `<textarea>`) that automatically resize
+vertically to fit their content.
 
+See the [storybook docs and demo][] to get a feel for what it can do.
+
+[storybook docs and demo]:
+    https://acusti-uikit.netlify.app/?path=/docs/uikit-controls-inputtext--docs
 [uncontrolled]: https://reactjs.org/docs/uncontrolled-components.html
+
+## Usage
+
+```
+npm install @acusti/input-text
+# or
+yarn add @acusti/input-text
+```
+
+### Props
+
+This is the type signature for the props you can pass to `InputText`. The
+unique features provided by the component are called out and explained
+above the corresponding prop via JSDoc comments:
+
+```ts
+type Props = {
+    autoCapitalize?: 'none' | 'off' | 'sentences' | 'words' | 'characters';
+    autoComplete?: HTMLInputElement['autocomplete'];
+    className?: string;
+    disabled?: boolean;
+    /**
+     * If true, input renders as readonly initially and only becomes interactive
+     * when double-clicked or when user focuses the readonly input and then
+     * presses the enter key. Likewise, the input becomes readonly again when
+     * it is blurred or when the user presses enter or escape.
+     */
+    doubleClickToEdit?: boolean;
+    enterKeyHint?: InputHTMLAttributes<HTMLInputElement>['enterKeyHint'];
+    form?: string;
+    /**
+     * The initial value of the text input. If props.initialValue changes at
+     * any point, the new value will override the local state of the input.
+     */
+    initialValue?: string;
+    list?: string;
+    max?: number;
+    maxHeight?: number | string;
+    maxLength?: number;
+    min?: number;
+    minLength?: number;
+    /**
+     * If true, input renders as a <textarea> that automatically grows and
+     * shrinks vertically to adjust to the length of its contents.
+     */
+    multiLine?: boolean;
+    multiple?: boolean;
+    name?: string;
+    onBlur?: (event: React.FocusEvent<InputElement>) => unknown;
+    onChange?: (event: React.ChangeEvent<InputElement>) => unknown;
+    onFocus?: (event: React.FocusEvent<InputElement>) => unknown;
+    onKeyDown?: (event: React.KeyboardEvent<InputElement>) => unknown;
+    onKeyUp?: (event: React.KeyboardEvent<InputElement>) => unknown;
+    pattern?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    /** If true, the contents of the input are selected when it’s focused. */
+    selectTextOnFocus?: boolean;
+    size?: number;
+    step?: number;
+    style?: React.CSSProperties;
+    /**
+     * If true, pressing enter/return submits the <form> that the input is a
+     * part of, or else blurs the input if no form is found.
+     */
+    submitOnEnter?: boolean;
+    tabIndex?: number;
+    title?: string;
+    type?:
+        | 'text'
+        | 'email'
+        | 'number'
+        | 'password'
+        | 'search'
+        | 'tel'
+        | 'url';
+};
+```

No alert changes

Improved metrics

Total package byte prevSize

29227

increased by36.07%

Lines of code

407

increased by26.4%

Number of lines in readme file

98

increased by476.47%

No dependency changes