diff --git a/CHANGELOG.md b/CHANGELOG.md index 49d65956058..5d65c8c62be 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `14.9.0`. +- Convert `EuiFlyout` to TypeScript ([#2500](https://github.com/elastic/eui/pull/2500)) ## [`14.9.0`](https://github.com/elastic/eui/tree/v14.9.0) diff --git a/src/components/flyout/__snapshots__/flyout.test.js.snap b/src/components/flyout/__snapshots__/flyout.test.tsx.snap similarity index 100% rename from src/components/flyout/__snapshots__/flyout.test.js.snap rename to src/components/flyout/__snapshots__/flyout.test.tsx.snap diff --git a/src/components/flyout/flyout.test.js b/src/components/flyout/flyout.test.tsx similarity index 95% rename from src/components/flyout/flyout.test.js rename to src/components/flyout/flyout.test.tsx index 658bd67e508..76c9d84436f 100644 --- a/src/components/flyout/flyout.test.js +++ b/src/components/flyout/flyout.test.tsx @@ -2,7 +2,9 @@ import React from 'react'; import { render } from 'enzyme'; import { requiredProps } from '../../test'; -import { EuiFlyout, SIZES } from './flyout'; +import { EuiFlyout, EuiFlyoutSize } from './flyout'; + +const SIZES: EuiFlyoutSize[] = ['s', 'm', 'l']; describe('EuiFlyout', () => { test('is rendered', () => { diff --git a/src/components/flyout/flyout.js b/src/components/flyout/flyout.tsx similarity index 71% rename from src/components/flyout/flyout.js rename to src/components/flyout/flyout.tsx index 17f3e88b43a..b0317b879a6 100644 --- a/src/components/flyout/flyout.js +++ b/src/components/flyout/flyout.tsx @@ -1,23 +1,58 @@ -import React, { Component } from 'react'; +import React, { Component, CSSProperties } from 'react'; import classnames from 'classnames'; -import PropTypes from 'prop-types'; import { keyCodes, EuiWindowEvent } from '../../services'; +import { CommonProps } from '../common'; import { EuiFocusTrap } from '../focus_trap'; import { EuiOverlayMask } from '../overlay_mask'; import { EuiButtonIcon } from '../button'; -const sizeToClassNameMap = { +export type EuiFlyoutSize = 's' | 'm' | 'l'; + +const sizeToClassNameMap: { [size in EuiFlyoutSize]: string } = { s: 'euiFlyout--small', m: 'euiFlyout--medium', l: 'euiFlyout--large', }; -export const SIZES = Object.keys(sizeToClassNameMap); +export interface EuiFlyoutProps extends CommonProps { + onClose: () => void; + size?: EuiFlyoutSize; + /** + * Hides the default close button. You must provide another close button somewhere within the flyout. + */ + hideCloseButton?: boolean; + /** + * Locks the mouse / keyboard focus to within the flyout + */ + ownFocus?: boolean; + /** + * Specify an aria-label for the close button of the flyout. + */ + closeButtonAriaLabel?: string; + /** + * Sets the max-width of the page, + * set to `true` to use the default size, + * set to `false` to not restrict the width, + * set to a number for a custom width in px, + * set to a string for a custom width in custom measurement. + */ + maxWidth?: boolean | number | string; + + style?: CSSProperties; +} + +export class EuiFlyout extends Component { + static defaultProps: Partial = { + size: 'm', + hideCloseButton: false, + ownFocus: false, + closeButtonAriaLabel: 'Closes this dialog', + maxWidth: false, + }; -export class EuiFlyout extends Component { - onKeyDown = event => { + onKeyDown = (event: KeyboardEvent) => { if (event.keyCode === keyCodes.ESCAPE) { event.preventDefault(); this.props.onClose(); @@ -49,7 +84,7 @@ export class EuiFlyout extends Component { const classes = classnames( 'euiFlyout', - sizeToClassNameMap[size], + sizeToClassNameMap[size!], widthClassName, className ); @@ -71,9 +106,6 @@ export class EuiFlyout extends Component { const flyoutContent = (
{ - this.flyout = node; - }} className={classes} tabIndex={0} style={newStyle || style} @@ -101,42 +133,3 @@ export class EuiFlyout extends Component { ); } } - -EuiFlyout.propTypes = { - className: PropTypes.string, - children: PropTypes.node, - onClose: PropTypes.func.isRequired, - size: PropTypes.oneOf(SIZES), - /** - * Hides the default close button. You must provide another close button somewhere within the flyout. - */ - hideCloseButton: PropTypes.bool, - /** - * Locks the mouse / keyboard focus to within the flyout - */ - ownFocus: PropTypes.bool, - /** - * Specify an aria-label for the close button of the flyout - */ - closeButtonAriaLabel: PropTypes.string, - /** - * Sets the max-width of the page, - * set to `true` to use the default size, - * set to `false` to not restrict the width, - * set to a `number` for a custom width in `px`, - * set to a `string` for a custom width in a custom measurement. - */ - maxWidth: PropTypes.oneOfType([ - PropTypes.bool, - PropTypes.number, - PropTypes.string, - ]), -}; - -EuiFlyout.defaultProps = { - size: 'm', - hideCloseButton: false, - ownFocus: false, - closeButtonAriaLabel: 'Closes this dialog', - maxWidth: false, -}; diff --git a/src/components/flyout/index.d.ts b/src/components/flyout/index.d.ts deleted file mode 100644 index 4d39642e4b2..00000000000 --- a/src/components/flyout/index.d.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { CommonProps } from '../common'; - -import { EuiFlyoutFooterProps } from './flyout_footer'; -import { EuiFlyoutHeaderProps } from './flyout_header'; -import { EuiFlyoutBodyProps } from './flyout_body'; - -declare module '@elastic/eui' { - export interface EuiFlyoutProps { - onClose: () => void; - size?: 's' | 'm' | 'l'; - /** - * Hides the default close button. You must provide another close button somewhere within the flyout. - */ - hideCloseButton?: boolean; - /** - * Locks the mouse / keyboard focus to within the flyout - */ - ownFocus?: boolean; - /** - * Specify an aria-label for the close button of the flyout. - */ - closeButtonAriaLabel?: string; - /** - * Sets the max-width of the page, - * set to `true` to use the default size, - * set to `false` to not restrict the width, - * set to a number for a custom width in px, - * set to a string for a custom width in custom measurement. - */ - maxWidth?: boolean | number | string; - } - - export const EuiFlyout: React.FunctionComponent; - - /** - * Flyout body type defs - * - * @see './flyout_body.js' - */ - export const EuiFlyoutBody: EuiFlyoutBodyProps; - - /** - * Flyout footer type defs - * - * @see './flyout_footer.js' - */ - export const EuiFlyoutFooter: EuiFlyoutFooterProps; - - /** - * Flyout header type defs - * - * @see './flyout_header.js' - */ - export const EuiFlyoutHeader: EuiFlyoutHeaderProps; -} diff --git a/src/components/flyout/index.js b/src/components/flyout/index.js deleted file mode 100644 index 629f7358c08..00000000000 --- a/src/components/flyout/index.js +++ /dev/null @@ -1,7 +0,0 @@ -export { EuiFlyout, SIZES } from './flyout'; - -export { EuiFlyoutBody } from './flyout_body'; - -export { EuiFlyoutFooter } from './flyout_footer'; - -export { EuiFlyoutHeader } from './flyout_header'; diff --git a/src/components/flyout/index.ts b/src/components/flyout/index.ts new file mode 100644 index 00000000000..ff2c81ff260 --- /dev/null +++ b/src/components/flyout/index.ts @@ -0,0 +1,7 @@ +export { EuiFlyout, EuiFlyoutProps, EuiFlyoutSize } from './flyout'; + +export { EuiFlyoutBody, EuiFlyoutBodyProps } from './flyout_body'; + +export { EuiFlyoutFooter, EuiFlyoutFooterProps } from './flyout_footer'; + +export { EuiFlyoutHeader, EuiFlyoutHeaderProps } from './flyout_header'; diff --git a/src/components/index.d.ts b/src/components/index.d.ts index 0e67f175797..2288546f724 100644 --- a/src/components/index.d.ts +++ b/src/components/index.d.ts @@ -3,7 +3,6 @@ /// /// /// -/// /// /// ///