Skip to content

Commit

Permalink
refactor(multiline-text-input): migrate to TypeScript (#1876)
Browse files Browse the repository at this point in the history
  • Loading branch information
@adnasa
adnasa authored Apr 28, 2021
1 parent 043e9d2 commit 3ff440f
Show file tree
Hide file tree
Showing 6 changed files with 130 additions and 119 deletions.
5 changes: 5 additions & 0 deletions .changeset/real-squids-mix.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@commercetools-uikit/multiline-text-input': patch
---

Migrate `<MultilineTextInput />` to TypeScript
34 changes: 17 additions & 17 deletions packages/components/inputs/multiline-text-input/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,23 +49,23 @@ export default Example;

## Properties

| Props | Type | Required | Default | Description |
| ---------------------------- | ----------------------------------------------------------------------------------------- | :------: | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name` | `string` | | | Used as HTML name of the input component. property |
| `autoComplete` | `string` | | | Used as HTML `autocomplete` property |
| `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. |
| `value` | `<string, number>` | ✅ | | Value of the input component. |
| `onChange` | `custom` | | | Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value.&#xA;<br />&#xA;Signature: `(event) => void` |
| `onBlur` | `func` | | | Called when input is blurred&#xA;<br />&#xA;Signature: `(event) => void` |
| `onFocus` | `func` | | | Called when input is focused&#xA;<br />&#xA;Signature: `(event) => void` |
| `isAutofocussed` | `bool` | | | Focus the input on initial render |
| `defaultExpandMultilineText` | `bool` | | `false` | Expands multiline text input initially |
| `isDisabled` | `bool` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). |
| `isReadOnly` | `bool` | | | Indicates that the field is displaying read-only content |
| `placeholder` | `string` | | | Placeholder text for the input |
| `hasError` | `bool` | | | Indicates that input has errors |
| `hasWarning` | `bool` | | | Control to indicate on the input if there are selected values that are potentially invalid |
| `horizontalConstraint` | `enum`<br/>Possible values:<br/>`6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | | Horizontal size limit of the input fields. |
| Props | Type | Required | Default | Description |
| ---------------------------- | -------------------------------------------------------------------------------------------- | :------: | ------- | ------------------------------------------------------------------------------------------------------------------------- |
| `name` | `string` | | | Used as HTML name of the input component. property |
| `autoComplete` | `string` | | | Used as HTML `autocomplete` property |
| `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. |
| `value` | `string` | ✅ | | Value of the input component. |
| `onChange` | `ChangeEventHandler` | | | Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value. |
| `onBlur` | `FocusEventHandler` | | | Called when input is blurred |
| `onFocus` | `FocusEventHandler` | | | Called when input is focused |
| `isAutofocussed` | `boolean` | | | Focus the input on initial render |
| `defaultExpandMultilineText` | `boolean` | | `false` | Expands multiline text input initially |
| `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). |
| `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content |
| `placeholder` | `string` | | | Placeholder text for the input |
| `hasError` | `boolean` | | | Indicates that input has errors |
| `hasWarning` | `boolean` | | | Control to indicate on the input if there are selected values that are potentially invalid |
| `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | | Horizontal size limit of the input fields. |

## Static methods

Expand Down
0 ...ents/inputs/multiline-text-input/index.js → ...ents/inputs/multiline-text-input/index.ts
View file
File renamed without changes.
0 .../inputs/multiline-text-input/src/index.js → .../inputs/multiline-text-input/src/index.ts
View file
File renamed without changes.
210 changes: 108 additions & 102 deletions ...ne-text-input/src/multiline-text-input.js → ...e-text-input/src/multiline-text-input.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import React from 'react';
import PropTypes from 'prop-types';
import requiredIf from 'react-required-if';
import React, {
ChangeEventHandler,
FocusEventHandler,
FocusEvent,
} from 'react';
import { useIntl } from 'react-intl';
import { css, useTheme } from '@emotion/react';
import { css } from '@emotion/react';
import { AngleUpIcon, AngleDownIcon } from '@commercetools-uikit/icons';
import FlatButton from '@commercetools-uikit/flat-button';
// @ts-ignore
import { useToggleState } from '@commercetools-uikit/hooks';
import { filterDataAttributes } from '@commercetools-uikit/utils';
import Stack from '@commercetools-uikit/spacings-stack';
Expand All @@ -14,22 +17,112 @@ import {
messagesMultilineInput,
} from '@commercetools-uikit/input-utils';

const MultilineTextInput = (props) => {
type TMultilineTextInputProps = {
/**
* Used as HTML name of the input component. property
*/
name?: string;
/**
* Used as HTML `autocomplete` property
*/
autoComplete?: string;
/**
* Used as HTML id property. An id is auto-generated when it is not specified.
*/
id?: string;
/**
* Value of the input component.
*/
value: string;
/**
* Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value.
*/
onChange?: ChangeEventHandler;
/**
* Called when input is blurred
*/
onBlur?: FocusEventHandler;
/**
* Called when input is focused
*/
onFocus?: FocusEventHandler;
/**
* Focus the input on initial render
*/
isAutofocussed?: boolean;
/**
* Expands multiline text input initially
*/
defaultExpandMultilineText?: boolean;
/**
* Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
*/
isDisabled?: boolean;
/**
* Indicates that the field is displaying read-only content
*/
isReadOnly?: boolean;
/**
* Placeholder text for the input
*/
placeholder?: string;
/**
* Indicates that input has errors
*/
hasError?: boolean;
/**
* Control to indicate on the input if there are selected values that are potentially invalid
*/
hasWarning?: boolean;
/**
* Horizontal size limit of the input fields.
*/
horizontalConstraint?:
| 6
| 7
| 8
| 9
| 10
| 11
| 12
| 13
| 14
| 15
| 16
| 'scale'
| 'auto';
};

const defaultProps: Pick<
TMultilineTextInputProps,
'defaultExpandMultilineText'
> = {
defaultExpandMultilineText: false,
};

const MultilineTextInput = (props: TMultilineTextInputProps) => {
const intl = useIntl();

const [contentRowCount, setContentRowCount] = React.useState(
const [contentRowCount, setContentRowCount] = React.useState<number>(
MultilineTextInput.MIN_ROW_COUNT
);

const [isOpen, toggle] = useToggleState(props.defaultExpandMultilineText);
const [isOpen, toggle] = useToggleState<
TMultilineTextInputProps['defaultExpandMultilineText']
>(props.defaultExpandMultilineText);

const { onFocus } = props;
const handleFocus = React.useCallback(() => {
if (!isOpen) toggle();
if (onFocus) onFocus();
}, [isOpen, onFocus, toggle]);
const handleFocus = React.useCallback<FocusEventHandler>(
(event: FocusEvent) => {
if (!isOpen) toggle(true);
if (onFocus) onFocus(event);
},
[isOpen, onFocus, toggle]
);

const handleHeightChange = React.useCallback(
const handleHeightChange = React.useCallback<
(height: number, rowCount: number) => void
>(
(_, rowCount) => {
setContentRowCount(rowCount);
},
Expand All @@ -41,12 +134,10 @@ const MultilineTextInput = (props) => {
const shouldRenderToggleButton =
contentRowCount > MultilineTextInput.MIN_ROW_COUNT;

const theme = useTheme();
return (
<Constraints.Horizontal max={props.horizontalConstraint}>
<Stack scale="xs">
<MultilineInput
theme={theme}
name={props.name}
autoComplete={props.autoComplete}
value={props.value}
Expand Down Expand Up @@ -101,93 +192,8 @@ MultilineTextInput.displayName = 'MultilineTextInput';
// so that the input "collapses".
MultilineTextInput.MIN_ROW_COUNT = 1;

MultilineTextInput.isEmpty = (value) => !value || value.trim().length === 0;

MultilineTextInput.propTypes = {
/**
* Used as HTML name of the input component. property
*/
name: PropTypes.string,
/**
* Used as HTML `autocomplete` property
*/
autoComplete: PropTypes.string,
/**
* Used as HTML id property. An id is auto-generated when it is not specified.
*/
id: PropTypes.string,
/**
* Value of the input component.
*/
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
/**
* Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value.
* <br />
* Signature: `(event) => void`
*/
onChange: requiredIf(PropTypes.func, (props) => !props.isReadOnly),
/**
* Called when input is blurred
* <br />
* Signature: `(event) => void`
*/
onBlur: PropTypes.func,
/**
* Called when input is focused
* <br />
* Signature: `(event) => void`
*/
onFocus: PropTypes.func,
/**
* Focus the input on initial render
*/
isAutofocussed: PropTypes.bool,
/**
* Expands multiline text input initially
*/
defaultExpandMultilineText: PropTypes.bool,
/**
* Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
*/
isDisabled: PropTypes.bool,
/**
* Indicates that the field is displaying read-only content
*/
isReadOnly: PropTypes.bool,
/**
* Placeholder text for the input
*/
placeholder: PropTypes.string,
/**
* Indicates that input has errors
*/
hasError: PropTypes.bool,
/**
* Control to indicate on the input if there are selected values that are potentially invalid
*/
hasWarning: PropTypes.bool,
/**
* Horizontal size limit of the input fields.
*/
horizontalConstraint: PropTypes.oneOf([
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
'scale',
'auto',
]),
};

MultilineTextInput.defaultProps = {
defaultExpandMultilineText: false,
};
MultilineTextInput.isEmpty = (value: TMultilineTextInputProps['value']) =>
!value || value.trim().length === 0;
MultilineTextInput.defaultProps = defaultProps;

export default MultilineTextInput;
0 ...nputs/multiline-text-input/src/version.js → ...nputs/multiline-text-input/src/version.ts
View file
File renamed without changes.

1 comment on commit 3ff440f

@vercel
Copy link

@vercel vercel bot commented on 3ff440f Apr 28, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.