-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
TextareaControl: Convert component to TypeScript (#41215)
* TextareaControl: Convert component to TypeScript * Update CHANGELOG.md * Update README.md * Apply feedback from code review - Alphabetize the props in the readme - Ensure the comments in the component's types match the readme - Remove storybook story Co-Authored-By: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> * Make default story template match usage example Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
- Loading branch information
1 parent
9eb04df
commit 5b32b22
Showing
9 changed files
with
191 additions
and
114 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import type { ChangeEvent } from 'react'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useInstanceId } from '@wordpress/compose'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import BaseControl from '../base-control'; | ||
| import { StyledTextarea } from './styles/textarea-control-styles'; | ||
| import type { TextareaControlProps } from './types'; | ||
| import type { WordPressComponentProps } from '../ui/context'; | ||
|
|
||
| /** | ||
| * TextareaControls are TextControls that allow for multiple lines of text, and | ||
| * wrap overflow text onto a new line. They are a fixed height and scroll | ||
| * vertically when the cursor reaches the bottom of the field. | ||
| * | ||
| * ```jsx | ||
| * import { TextareaControl } from '@wordpress/components'; | ||
| * import { useState } from '@wordpress/element'; | ||
| * | ||
| * const MyTextareaControl = () => { | ||
| * const [ text, setText ] = useState( '' ); | ||
| * | ||
| * return ( | ||
| * <TextareaControl | ||
| * label="Text" | ||
| * help="Enter some text" | ||
| * value={ text } | ||
| * onChange={ ( value ) => setText( value ) } | ||
| * /> | ||
| * ); | ||
| * }; | ||
| * ``` | ||
| */ | ||
| export function TextareaControl( | ||
| // ref is omitted until we have `WordPressComponentPropsWithoutRef` or add | ||
| // ref forwarding to TextareaControl. | ||
| props: Omit< | ||
| WordPressComponentProps< TextareaControlProps, 'textarea', false >, | ||
| 'ref' | ||
| > | ||
| ) { | ||
| const { | ||
| label, | ||
| hideLabelFromVision, | ||
| value, | ||
| help, | ||
| onChange, | ||
| rows = 4, | ||
| className, | ||
| ...additionalProps | ||
| } = props; | ||
| const instanceId = useInstanceId( TextareaControl ); | ||
| const id = `inspector-textarea-control-${ instanceId }`; | ||
| const onChangeValue = ( event: ChangeEvent< HTMLTextAreaElement > ) => | ||
| onChange( event.target.value ); | ||
|
|
||
| return ( | ||
| <BaseControl | ||
| label={ label } | ||
| hideLabelFromVision={ hideLabelFromVision } | ||
| id={ id } | ||
| help={ help } | ||
| className={ className } | ||
| > | ||
| <StyledTextarea | ||
| className="components-textarea-control__input" | ||
| id={ id } | ||
| rows={ rows } | ||
| onChange={ onChangeValue } | ||
| aria-describedby={ !! help ? id + '__help' : undefined } | ||
| value={ value } | ||
| { ...additionalProps } | ||
| /> | ||
| </BaseControl> | ||
| ); | ||
| } | ||
|
|
||
| export default TextareaControl; |
This file was deleted.
Oops, something went wrong.
58 changes: 58 additions & 0 deletions
58
packages/components/src/textarea-control/stories/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import type { ComponentMeta, ComponentStory } from '@storybook/react'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useState } from '@wordpress/element'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import TextareaControl from '..'; | ||
|
|
||
| const meta: ComponentMeta< typeof TextareaControl > = { | ||
| component: TextareaControl, | ||
| title: 'Components/TextareaControl', | ||
| argTypes: { | ||
| onChange: { action: 'onChange' }, | ||
| label: { control: { type: 'text' } }, | ||
| help: { control: { type: 'text' } }, | ||
| value: { control: { type: null } }, | ||
| }, | ||
| parameters: { | ||
| controls: { | ||
| expanded: true, | ||
| }, | ||
| docs: { source: { state: 'open' } }, | ||
| }, | ||
| }; | ||
| export default meta; | ||
|
|
||
| const Template: ComponentStory< typeof TextareaControl > = ( { | ||
| onChange, | ||
| ...args | ||
| } ) => { | ||
| const [ value, setValue ] = useState( '' ); | ||
|
|
||
| return ( | ||
| <TextareaControl | ||
| { ...args } | ||
| value={ value } | ||
| onChange={ ( v ) => { | ||
| setValue( v ); | ||
| onChange( v ); | ||
| } } | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export const Default: ComponentStory< typeof TextareaControl > = Template.bind( | ||
| {} | ||
| ); | ||
| Default.args = { | ||
| label: 'Text', | ||
| help: 'Enter some text', | ||
| }; |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import type { TextareaHTMLAttributes } from 'react'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import type { BaseControlProps } from '../base-control/types'; | ||
|
|
||
| export type TextareaControlProps = Pick< | ||
| BaseControlProps, | ||
| 'hideLabelFromVision' | 'help' | 'label' | ||
| > & { | ||
| /** | ||
| * A function that receives the new value of the textarea each time it | ||
| * changes. | ||
| */ | ||
| onChange: ( value: string ) => void; | ||
| /** | ||
| * The current value of the textarea. | ||
| */ | ||
| value: string; | ||
| /** | ||
| * The number of rows the textarea should contain. | ||
| * | ||
| * @default 4 | ||
| */ | ||
| rows?: TextareaHTMLAttributes< HTMLTextAreaElement >[ 'rows' ]; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters