@acusti/input-text
Advanced tools
Comparing version 0.12.0 to 1.0.0
import * as React from 'react'; | ||
export declare type Props = { | ||
export type Props = { | ||
autoComplete?: string; | ||
className?: string; | ||
disabled?: boolean; | ||
form?: string; | ||
initialValue?: string; | ||
list?: string; | ||
max?: number; | ||
@@ -13,2 +15,3 @@ maxHeight?: number | string; | ||
multiLine?: boolean; | ||
multiple?: boolean; | ||
name?: string; | ||
@@ -25,2 +28,3 @@ onBlur?: (event: React.FocusEvent<HTMLInputElement>) => unknown; | ||
selectTextOnFocus?: boolean; | ||
size?: number; | ||
step?: number; | ||
@@ -27,0 +31,0 @@ tabIndex?: number; |
import * as React from 'react'; | ||
const { useCallback, useEffect, useImperativeHandle, useRef } = React; | ||
const InputText = React.forwardRef(({ autoComplete, className, disabled, initialValue, max, maxHeight = Infinity, maxLength, min, minLength, multiLine, name, onBlur, onChange, onFocus, onKeyDown, onKeyUp, pattern, placeholder, readOnly, required, selectTextOnFocus, step, tabIndex, title, type = 'text', }, ref) => { | ||
const InputText = React.forwardRef(({ autoComplete, className, disabled, form, initialValue, list, max, maxHeight = Infinity, maxLength, min, minLength, multiLine, multiple, name, onBlur, onChange, onFocus, onKeyDown, onKeyUp, pattern, placeholder, readOnly, required, selectTextOnFocus, size, step, tabIndex, title, type = 'text', }, ref) => { | ||
const inputRef = useRef(null); | ||
@@ -52,3 +52,3 @@ useImperativeHandle(ref, () => inputRef.current); | ||
const Element = (multiLine ? 'textarea' : 'input'); | ||
return (React.createElement(Element, Object.assign({ autoComplete: autoComplete, className: className, defaultValue: initialValue || '', disabled: disabled, maxLength: maxLength, minLength: minLength, name: name, onBlur: selectTextOnFocus ? handleBlur : onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onSelect: selectTextOnFocus ? handleSelect : undefined, pattern: pattern, placeholder: placeholder, readOnly: readOnly, required: required, ref: inputRef, tabIndex: tabIndex, title: title, type: type }, (multiLine | ||
return (React.createElement(Element, Object.assign({ autoComplete: autoComplete, className: className, defaultValue: initialValue || '', disabled: disabled, form: form, list: list, maxLength: maxLength, minLength: minLength, multiple: multiple, name: name, onBlur: selectTextOnFocus ? handleBlur : onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onSelect: selectTextOnFocus ? handleSelect : undefined, pattern: pattern, placeholder: placeholder, readOnly: readOnly, required: required, ref: inputRef, size: size, tabIndex: tabIndex, title: title, type: type }, (multiLine | ||
? { onInput: setInputHeight, rows: 1 } | ||
@@ -55,0 +55,0 @@ : { max, min, step })))); |
{ | ||
"name": "@acusti/input-text", | ||
"version": "0.12.0", | ||
"version": "1.0.0", | ||
"description": "React component that renders a semi-controlled input with multiLine and selectTextOnFocus support", | ||
"keywords": [ | ||
"react", | ||
"react-component", | ||
"form", | ||
"input", | ||
"input-text", | ||
"textarea", | ||
"ssr", | ||
"typescript", | ||
"ts", | ||
"flow" | ||
], | ||
"type": "module", | ||
@@ -15,3 +28,4 @@ "sideEffects": false, | ||
"type": "git", | ||
"url": "git+https://github.com/acusti/uikit.git" | ||
"url": "https://github.com/acusti/uikit.git", | ||
"directory": "packages/input-text" | ||
}, | ||
@@ -25,4 +39,4 @@ "author": "andrew patton <andrew@acusti.ca> (https://www.acusti.ca)", | ||
"devDependencies": { | ||
"@types/react": "^18.0.15", | ||
"typescript": "^4.8.4" | ||
"@types/react": "^18.0.25", | ||
"typescript": "^4.9.3" | ||
}, | ||
@@ -29,0 +43,0 @@ "peerDependencies": { |
# @acusti/input-text | ||
[![latest version](https://img.shields.io/npm/v/@acusti/input-text?style=for-the-badge)](https://www.npmjs.com/package/@acusti/input-text) | ||
[![dependencies status](https://img.shields.io/librariesio/release/npm/@acusti/input-text?style=for-the-badge)](https://libraries.io/npm/@acusti%2Finput-text/sourcerank) | ||
[![maintenance status](https://img.shields.io/npms-io/maintenance-score/@acusti/input-text?style=for-the-badge)](https://npms.io/search?q=%40acusti%2Finput-text) | ||
[![bundle size](https://img.shields.io/bundlephobia/minzip/@acusti/input-text?style=for-the-badge)](https://bundlephobia.com/package/@acusti/input-text) | ||
[![downloads per month](https://img.shields.io/npm/dm/@acusti/input-text?style=for-the-badge)](https://www.npmjs.com/package/@acusti/input-text) | ||
`InputText` is a React component that renders an uncontrolled input whose | ||
value is overwritten whenever `props.initialValue` changes. Also, if | ||
`InputText` is a React component that renders a semi-controlled input, | ||
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.mutliLine` is true, it renders a textarea element that autogrows and shrinks to adjust to the length of its contents. | ||
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. | ||
[uncontrolled]: https://reactjs.org/docs/uncontrolled-components.html |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
16869
244
0
17