[TextareaAutosize] Convert code to TypeScript #35862
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 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 |
|---|---|---|
|
|
@@ -7,12 +7,24 @@ import { | |
| unstable_useEnhancedEffect as useEnhancedEffect, | ||
| unstable_ownerWindow as ownerWindow, | ||
| } from '@mui/utils'; | ||
| import { KebabKeys } from '@mui/types'; | ||
| import { TextareaAutosizeProps } from './TextareaAutosize.types'; | ||
|
|
||
| type State = { | ||
| outerHeightStyle: number; | ||
| overflow?: boolean | undefined; | ||
| }; | ||
|
|
||
| function getStyleValue( | ||
| computedStyle: KebabKeys<CSSStyleDeclaration>, | ||
| property: keyof KebabKeys<CSSStyleDeclaration>, | ||
| ) { | ||
| return parseInt(`${computedStyle[property]}`, 10) || 0; | ||
| } | ||
|
|
||
| const styles: { | ||
| shadow: React.CSSProperties; | ||
| } = { | ||
| shadow: { | ||
| // Visibility needed to hide the extra text area on iPads | ||
| visibility: 'hidden', | ||
|
|
@@ -28,31 +40,58 @@ const styles = { | |
| }, | ||
| }; | ||
|
|
||
| function isEmpty(obj: State) { | ||
| return ( | ||
| obj === undefined || | ||
| obj === null || | ||
| Object.keys(obj).length === 0 || | ||
| (obj.outerHeightStyle === 0 && !obj.overflow) | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * | ||
| * Demos: | ||
| * | ||
| * - [Textarea Autosize](https://mui.com/base/react-textarea-autosize/) | ||
| * - [Textarea Autosize](https://mui.com/material-ui/react-textarea-autosize/) | ||
| * | ||
| * API: | ||
| * | ||
| * - [TextareaAutosize API](https://mui.com/base/api/textarea-autosize/) | ||
| */ | ||
| const TextareaAutosize = React.forwardRef(function TextareaAutosize( | ||
| props: TextareaAutosizeProps, | ||
| ref: React.ForwardedRef<Element>, | ||
| ) { | ||
| const { onChange, maxRows, minRows = 1, style, value, ...other } = props; | ||
|
|
||
| const { current: isControlled } = React.useRef(value != null); | ||
| const inputRef = React.useRef<HTMLInputElement>(null); | ||
| const handleRef = useForkRef(ref, inputRef); | ||
| const shadowRef = React.useRef<HTMLTextAreaElement>(null); | ||
| const renders = React.useRef(0); | ||
| const [state, setState] = React.useState<State>({ | ||
| outerHeightStyle: 0, | ||
| }); | ||
|
|
||
| const getUpdatedState = React.useCallback(() => { | ||
| const input = inputRef.current!; | ||
|
|
||
| const containerWindow = ownerWindow(input); | ||
| const computedStyle = containerWindow.getComputedStyle( | ||
| input, | ||
| ) as unknown as KebabKeys<CSSStyleDeclaration>; | ||
|
|
||
| // If input's width is shrunk and it's not visible, don't sync height. | ||
| if (computedStyle.width === '0px') { | ||
| return { | ||
| outerHeightStyle: 0, | ||
| }; | ||
| } | ||
|
|
||
| const inputShallow = shadowRef.current!; | ||
|
|
||
| inputShallow.style.width = computedStyle.width; | ||
| inputShallow.value = input.value || props.placeholder || 'x'; | ||
| if (inputShallow.value.slice(-1) === '\n') { | ||
|
|
@@ -94,7 +133,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref) | |
| return { outerHeightStyle, overflow }; | ||
| }, [maxRows, minRows, props.placeholder]); | ||
|
|
||
| const updateState = (prevState: State, newState: State) => { | ||
| const { outerHeightStyle, overflow } = newState; | ||
| // Need a large enough difference to update the height. | ||
| // This prevents infinite rendering loop. | ||
|
|
@@ -164,18 +203,23 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref) | |
| syncHeightWithFlushSycn(); | ||
| } | ||
| }); | ||
| let resizeObserver: ResizeObserver; | ||
| let containerWindow: Window; | ||
| if (inputRef.current) { | ||
| containerWindow = ownerWindow(inputRef.current); | ||
| containerWindow.addEventListener('resize', handleResize); | ||
|
|
||
| if (typeof ResizeObserver !== 'undefined') { | ||
| resizeObserver = new ResizeObserver(handleResize); | ||
| resizeObserver.observe(inputRef.current); | ||
| } | ||
| } | ||
|
|
||
| return () => { | ||
| handleResize.clear(); | ||
| if (containerWindow) { | ||
|
There was a problem hiding this comment. I would be in favor of removing all the defensive checks. e.g. this one and There was a problem hiding this comment. 👍 We haven't seen any bug reports related to not having these checks in the JS version, so it's safe to skip them here as well. @sai6855 would you mind correcting this? The rest of the PR looks fine to me. There was a problem hiding this comment. done, removed defensive checks , commit: cb83064 . cc @michaldudak |
||
| containerWindow.removeEventListener('resize', handleResize); | ||
| } | ||
| if (resizeObserver) { | ||
| resizeObserver.disconnect(); | ||
| } | ||
|
|
@@ -190,7 +234,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref) | |
| renders.current = 0; | ||
| }, [value]); | ||
|
|
||
| const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => { | ||
| renders.current = 0; | ||
|
|
||
| if (!isControlled) { | ||
|
|
@@ -209,12 +253,12 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref) | |
| onChange={handleChange} | ||
| ref={handleRef} | ||
| // Apply the rows prop to get a "correct" first SSR paint | ||
| rows={minRows as number} | ||
| style={{ | ||
| height: state.outerHeightStyle, | ||
| // Need a large enough difference to allow scrolling. | ||
| // This prevents infinite rendering loop. | ||
| overflow: state.overflow ? 'hidden' : undefined, | ||
| ...style, | ||
| }} | ||
| {...other} | ||
|
|
@@ -238,7 +282,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref) | |
| TextareaAutosize.propTypes /* remove-proptypes */ = { | ||
| // ----------------------------- Warning -------------------------------- | ||
| // | These PropTypes are generated from the TypeScript type definitions | | ||
| // | To update them edit TypeScript types and run "yarn proptypes" | | ||
| // ---------------------------------------------------------------------- | ||
| /** | ||
| * @ignore | ||
|
|
@@ -273,6 +317,6 @@ TextareaAutosize.propTypes /* remove-proptypes */ = { | |
| PropTypes.number, | ||
| PropTypes.string, | ||
| ]), | ||
| } as any; | ||
|
|
||
| export default TextareaAutosize; | ||
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 |
|---|---|---|
|
|
@@ -13,16 +13,3 @@ export interface TextareaAutosizeProps | |
| */ | ||
| minRows?: string | number; | ||
| } | ||
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 |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| export { default } from './TextareaAutosize'; | ||
| export * from './TextareaAutosize.types'; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
'rootClass' is not present in
fullSuite, hence removed to make typescript happy.material-ui/test/utils/describeConformanceUnstyled.tsx
Lines 321 to 332 in f13e534