From c1b62a2d83d48b5829250b8966fedcd366530e8c Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Tue, 16 Jul 2019 15:30:25 -0500 Subject: [PATCH 1/2] TS conversion --- ...n.test.js.snap => accordion.test.tsx.snap} | 0 .../{accordion.test.js => accordion.test.tsx} | 0 .../accordion/{accordion.js => accordion.tsx} | 109 +++++++++--------- src/components/accordion/index.d.ts | 22 ---- src/components/accordion/index.js | 1 - src/components/accordion/index.ts | 1 + src/components/index.d.ts | 1 - 7 files changed, 56 insertions(+), 78 deletions(-) rename src/components/accordion/__snapshots__/{accordion.test.js.snap => accordion.test.tsx.snap} (100%) rename src/components/accordion/{accordion.test.js => accordion.test.tsx} (100%) rename src/components/accordion/{accordion.js => accordion.tsx} (69%) delete mode 100644 src/components/accordion/index.d.ts delete mode 100644 src/components/accordion/index.js create mode 100644 src/components/accordion/index.ts diff --git a/src/components/accordion/__snapshots__/accordion.test.js.snap b/src/components/accordion/__snapshots__/accordion.test.tsx.snap similarity index 100% rename from src/components/accordion/__snapshots__/accordion.test.js.snap rename to src/components/accordion/__snapshots__/accordion.test.tsx.snap diff --git a/src/components/accordion/accordion.test.js b/src/components/accordion/accordion.test.tsx similarity index 100% rename from src/components/accordion/accordion.test.js rename to src/components/accordion/accordion.test.tsx diff --git a/src/components/accordion/accordion.js b/src/components/accordion/accordion.tsx similarity index 69% rename from src/components/accordion/accordion.js rename to src/components/accordion/accordion.tsx index ce183d757fc..659a74d1f92 100644 --- a/src/components/accordion/accordion.js +++ b/src/components/accordion/accordion.tsx @@ -1,11 +1,10 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; +import React, { Component, HTMLAttributes, ReactNode } from 'react'; import classNames from 'classnames'; -import { EuiIcon } from '../icon'; +import { CommonProps, keysOf } from '../common'; +import { EuiIcon } from '../icon'; import { EuiFlexGroup, EuiFlexItem } from '../flex'; - import { EuiMutationObserver } from '../observer/mutation_observer'; const paddingSizeToClassNameMap = { @@ -17,17 +16,60 @@ const paddingSizeToClassNameMap = { xl: 'euiAccordion__padding--xl', }; -export const PADDING_SIZES = Object.keys(paddingSizeToClassNameMap); +export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap); +export type EuiAccordionSize = keyof typeof paddingSizeToClassNameMap; + +export type EuiAccordionProps = HTMLAttributes & + CommonProps & { + id: string; + /** + * Class that will apply to the trigger for the accordion. + */ + buttonClassName?: string; + /** + * Class that will apply to the trigger content for the accordion. + */ + buttonContentClassName?: string; + /** + * The content of the clickable trigger + */ + buttonContent?: ReactNode; + /** + * Will appear right aligned against the button. Useful for separate actions like deletions. + */ + extraAction?: ReactNode; + /** + * The accordion will start in the open state. + */ + initialIsOpen: boolean; + /** + * Optional callback method called on open and close with a single `isOpen` parameter + */ + onToggle?: (isOpen: boolean) => void; + /** + * The padding around the exposed accordion content. + */ + paddingSize: EuiAccordionSize; + }; + +export class EuiAccordion extends Component< + EuiAccordionProps, + { isOpen: boolean } +> { + static defaultProps = { + initialIsOpen: false, + paddingSize: 'none', + }; + + childContent: HTMLDivElement | null = null; + childWrapper: HTMLDivElement | null = null; -export class EuiAccordion extends Component { - constructor(props) { + constructor(props: EuiAccordionProps) { super(props); this.state = { isOpen: props.initialIsOpen, }; - - this.onToggle = this.onToggle.bind(this); } setChildContentHeight = () => { @@ -49,7 +91,7 @@ export class EuiAccordion extends Component { this.setChildContentHeight(); } - onToggle() { + onToggle = () => { this.setState( prevState => ({ isOpen: !prevState.isOpen, @@ -58,9 +100,9 @@ export class EuiAccordion extends Component { this.props.onToggle && this.props.onToggle(this.state.isOpen); } ); - } + }; - setChildContentRef = node => { + setChildContentRef = (node: HTMLDivElement | null) => { this.childContent = node; }; @@ -74,7 +116,7 @@ export class EuiAccordion extends Component { buttonContentClassName, extraAction, paddingSize, - initialIsOpen, // eslint-disable-line no-unused-vars + initialIsOpen, ...rest } = this.props; @@ -157,44 +199,3 @@ export class EuiAccordion extends Component { ); } } - -EuiAccordion.propTypes = { - /** - * The content of the exposed accordion. - */ - children: PropTypes.node, - id: PropTypes.string.isRequired, - /** - * Class that will apply to the entire accordion. - */ - className: PropTypes.string, - /** - * Class that will apply to the trigger for the accordion. - */ - buttonContentClassName: PropTypes.string, - /** - * The content of the clickable trigger - */ - buttonContent: PropTypes.node, - /** - * Will appear right aligned against the button. Useful for separate actions like deletions. - */ - extraAction: PropTypes.node, - /** - * The accordion will start in the open state. - */ - initialIsOpen: PropTypes.bool, - /** - * The padding around the exposed accordion content. - */ - paddingSize: PropTypes.oneOf(PADDING_SIZES), - /** - * Optional callback method called on open and close with a single `isOpen` parameter - */ - onToggle: PropTypes.func, -}; - -EuiAccordion.defaultProps = { - initialIsOpen: false, - paddingSize: 'none', -}; diff --git a/src/components/accordion/index.d.ts b/src/components/accordion/index.d.ts deleted file mode 100644 index 3bbb42d050c..00000000000 --- a/src/components/accordion/index.d.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { HTMLAttributes, Component, ReactNode } from 'react'; - -import { CommonProps } from '../common'; - -declare module '@elastic/eui' { - export type EuiAccordionSize = 'none' | 'xs' | 's' | 'm' | 'l' | 'xl'; - - export interface EuiAccordionProps { - id: string; - buttonContentClassName?: string; - buttonContent?: ReactNode; - extraAction?: ReactNode; - initialIsOpen?: boolean; - onToggle?: (isOpen: boolean) => void; - paddingSize?: EuiAccordionSize; - } - - // eslint-disable-next-line react/prefer-stateless-function - export class EuiAccordion extends Component< - CommonProps & HTMLAttributes & EuiAccordionProps - > {} -} diff --git a/src/components/accordion/index.js b/src/components/accordion/index.js deleted file mode 100644 index 39da1b4571a..00000000000 --- a/src/components/accordion/index.js +++ /dev/null @@ -1 +0,0 @@ -export { EuiAccordion } from './accordion'; diff --git a/src/components/accordion/index.ts b/src/components/accordion/index.ts new file mode 100644 index 00000000000..b926b4d0551 --- /dev/null +++ b/src/components/accordion/index.ts @@ -0,0 +1 @@ +export { EuiAccordion, EuiAccordionProps } from './accordion'; diff --git a/src/components/index.d.ts b/src/components/index.d.ts index 7e4dde50581..77e550cbdf5 100644 --- a/src/components/index.d.ts +++ b/src/components/index.d.ts @@ -1,4 +1,3 @@ -/// /// /// /// From 43763844e85e5d489c65664526a6a3ce62910607 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 17 Jul 2019 11:34:05 -0500 Subject: [PATCH 2/2] remove constructor; CL --- CHANGELOG.md | 1 + src/components/accordion/accordion.tsx | 10 +++------- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 17201b3d117..a079ec4cfc7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ - Centered the square of the `popout` glyph in the artboard ([#2120](https://github.com/elastic/eui/pull/2120)) - Added `useInnerText` and `EuiInnerText` component utilities for retrieving text content of elements ([#2100](https://github.com/elastic/eui/pull/2100)) - Converted `EuiRangeHightlight`, `EuiRangeLabel`, `EuiRangeLevels`, `EuiRangeSlider`, `EuiRangeThumb`, `EuiRangeTicks`, `EuiRangeTrack`, and `EuiRangeWrapper` to TypeScript ([#2124](https://github.com/elastic/eui/pull/2124)) +- Converted `EuiAccordion` to TypeScript ([#2128](https://github.com/elastic/eui/pull/2128)) **Bug fixes** diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx index 659a74d1f92..cda970c2cf2 100644 --- a/src/components/accordion/accordion.tsx +++ b/src/components/accordion/accordion.tsx @@ -64,13 +64,9 @@ export class EuiAccordion extends Component< childContent: HTMLDivElement | null = null; childWrapper: HTMLDivElement | null = null; - constructor(props: EuiAccordionProps) { - super(props); - - this.state = { - isOpen: props.initialIsOpen, - }; - } + state = { + isOpen: this.props.initialIsOpen, + }; setChildContentHeight = () => { requestAnimationFrame(() => {