From 01a6c3ff704cd839d64d16d9a76f7e6004dc3ef2 Mon Sep 17 00:00:00 2001 From: ffknob Date: Mon, 30 Dec 2019 14:08:18 -0300 Subject: [PATCH] EuiFieldText: converted to Typescript (#2688) * Converts EuiFieldText to Typescript * Adds PR number to CHANGELOG line * Fixes openLabel, closeLabel typing * Removes index.d.ts --- CHANGELOG.md | 1 + src/components/color_picker/color_picker.tsx | 3 +- ....test.js.snap => field_text.test.tsx.snap} | 9 -- ...field_text.test.js => field_text.test.tsx} | 0 .../{field_text.js => field_text.tsx} | 87 +++++++++---------- src/components/form/field_text/index.d.ts | 26 ------ .../form/field_text/{index.js => index.ts} | 0 src/components/form/index.d.ts | 1 - 8 files changed, 41 insertions(+), 86 deletions(-) rename src/components/form/field_text/__snapshots__/{field_text.test.js.snap => field_text.test.tsx.snap} (90%) rename src/components/form/field_text/{field_text.test.js => field_text.test.tsx} (100%) rename src/components/form/field_text/{field_text.js => field_text.tsx} (50%) delete mode 100644 src/components/form/field_text/index.d.ts rename src/components/form/field_text/{index.js => index.ts} (100%) diff --git a/CHANGELOG.md b/CHANGELOG.md index b33215da0fe..84616e78661 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Converted `EuiFieldText` to Typescript ([#2688](https://github.com/elastic/eui/pull/2688)) - Added `nested` glyph to `EuiIcon` ([#2707](https://github.com/elastic/eui/pull/2707)) - Added `tableLayout` prop to `EuiTable`, `EuiBasicTable` and `EuiInMemoryTable` to provide the option of auto layout ([#2697](https://github.com/elastic/eui/pull/2697)) - Converted `EuiErrorBoundary` to Typescript ([#2690](https://github.com/elastic/eui/pull/2690)) diff --git a/src/components/color_picker/color_picker.tsx b/src/components/color_picker/color_picker.tsx index 0f1dc83511e..e9b38cd3d57 100644 --- a/src/components/color_picker/color_picker.tsx +++ b/src/components/color_picker/color_picker.tsx @@ -1,7 +1,6 @@ import React, { FunctionComponent, HTMLAttributes, - ReactChild, ReactElement, cloneElement, useEffect, @@ -324,7 +323,7 @@ export const EuiColorPicker: FunctionComponent = ({ 'Press the escape key to close the popover', 'Press the down key to open a popover containing color options', ]}> - {([openLabel, closeLabel]: ReactChild[]) => ( + {([openLabel, closeLabel]: string[]) => ( @@ -81,9 +74,7 @@ exports[`EuiFieldText props isLoading is rendered 1`] = ` exports[`EuiFieldText props readOnly is rendered 1`] = ` diff --git a/src/components/form/field_text/field_text.test.js b/src/components/form/field_text/field_text.test.tsx similarity index 100% rename from src/components/form/field_text/field_text.test.js rename to src/components/form/field_text/field_text.test.tsx diff --git a/src/components/form/field_text/field_text.js b/src/components/form/field_text/field_text.tsx similarity index 50% rename from src/components/form/field_text/field_text.js rename to src/components/form/field_text/field_text.tsx index 5ace91b3e7e..9322462a253 100644 --- a/src/components/form/field_text/field_text.js +++ b/src/components/form/field_text/field_text.tsx @@ -1,12 +1,46 @@ -import React from 'react'; -import PropTypes from 'prop-types'; +import React, { InputHTMLAttributes, Ref, FunctionComponent } from 'react'; +import { CommonProps } from '../../common'; import classNames from 'classnames'; -import { EuiFormControlLayout } from '../form_control_layout'; +import { + EuiFormControlLayout, + EuiFormControlLayoutProps, +} from '../form_control_layout'; import { EuiValidatableControl } from '../validatable_control'; -export const EuiFieldText = ({ +export type EuiFieldTextProps = InputHTMLAttributes & + CommonProps & { + icon?: EuiFormControlLayoutProps['icon']; + isInvalid?: boolean; + fullWidth?: boolean; + isLoading?: boolean; + readOnly?: boolean; + inputRef?: Ref; + + /** + * Creates an input group with element(s) coming before input + */ + prepend?: EuiFormControlLayoutProps['prepend']; + + /** + * Creates an input group with element(s) coming after input + */ + append?: EuiFormControlLayoutProps['append']; + + /** + * Completely removes form control layout wrapper and ignores + * icon, prepend, and append. Best used inside EuiFormControlLayoutDelimited. + */ + controlOnly?: boolean; + + /** + * when `true` creates a shorter height input + */ + compressed?: boolean; + }; + +export const EuiFieldText: FunctionComponent = ({ id, name, placeholder, @@ -15,7 +49,7 @@ export const EuiFieldText = ({ icon, isInvalid, inputRef, - fullWidth, + fullWidth = false, isLoading, compressed, prepend, @@ -64,46 +98,3 @@ export const EuiFieldText = ({ ); }; - -EuiFieldText.propTypes = { - name: PropTypes.string, - id: PropTypes.string, - placeholder: PropTypes.string, - value: PropTypes.string, - icon: PropTypes.string, - isInvalid: PropTypes.bool, - inputRef: PropTypes.func, - fullWidth: PropTypes.bool, - isLoading: PropTypes.bool, - readOnly: PropTypes.bool, - /** - * when `true` creates a shorter height input - */ - compressed: PropTypes.bool, - /** - * Creates an input group with element(s) coming before input - */ - prepend: PropTypes.oneOfType([ - PropTypes.node, - PropTypes.arrayOf(PropTypes.node), - ]), - /** - * Creates an input group with element(s) coming after input - */ - append: PropTypes.oneOfType([ - PropTypes.node, - PropTypes.arrayOf(PropTypes.node), - ]), - /** - * Completely removes form control layout wrapper and ignores - * icon, prepend, and append. Best used inside EuiFormControlLayoutDelimited. - */ - controlOnly: PropTypes.bool, -}; - -EuiFieldText.defaultProps = { - value: undefined, - fullWidth: false, - isLoading: false, - compressed: false, -}; diff --git a/src/components/form/field_text/index.d.ts b/src/components/form/field_text/index.d.ts deleted file mode 100644 index c88d2f18840..00000000000 --- a/src/components/form/field_text/index.d.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { CommonProps } from '../../common'; - -import { FunctionComponent, InputHTMLAttributes, Ref } from 'react'; - -declare module '@elastic/eui' { - /** - * text field type defs - * - * @see './field_text.js' - */ - export interface EuiFieldTextProps { - icon?: string; - isInvalid?: boolean; - inputRef?: Ref; - fullWidth?: boolean; - isLoading?: boolean; - prepend?: React.ReactNode; - append?: React.ReactNode; - compressed?: boolean; - controlOnly?: boolean; - } - - export const EuiFieldText: FunctionComponent< - CommonProps & InputHTMLAttributes & EuiFieldTextProps - >; -} diff --git a/src/components/form/field_text/index.js b/src/components/form/field_text/index.ts similarity index 100% rename from src/components/form/field_text/index.js rename to src/components/form/field_text/index.ts diff --git a/src/components/form/index.d.ts b/src/components/form/index.d.ts index c2750c5c3ce..c61ad673ada 100644 --- a/src/components/form/index.d.ts +++ b/src/components/form/index.d.ts @@ -1,6 +1,5 @@ import { CommonProps } from '../common'; /// -/// /// /// ///