Convert remaining EuiFilterGroup items to TS

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 - Converted `EuiFormRow` to Typescript ([#2712](https://github.com/elastic/eui/pull/2712))
 - Updated `logoAPM`, `logoSecurity` and `logoEnterpriseSearch`. Added `logoWorkplaceSearch` and `logoObservability` ([#2769](https://github.com/elastic/eui/pull/2769))
+- Convert `EuiFilterButton` to TypeScript ([#2761](https://github.com/elastic/eui/pull/2761))
+- Convert `EuiFilterSelectItem` to TypeScript ([#2761](https://github.com/elastic/eui/pull/2761))
 
 **Deprecations**
 

src/components/filter_group/filter_button.js → src/components/filter_group/filter_button.tsx

@@ -1,28 +1,59 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
+import React, { Fragment, FunctionComponent } from 'react';
 import classNames from 'classnames';
 
 import { EuiI18n } from '../i18n';
 import { EuiNotificationBadge } from '../badge/notification_badge';
-import { COLORS, ICON_SIDES, EuiButtonEmpty } from '../button/button_empty';
-
-import { IconPropType } from '../icon';
+import { EuiButtonEmpty, EuiButtonEmptyProps } from '../button/button_empty';
 
 import { useInnerText } from '../inner_text';
 
-export const EuiFilterButton = ({
+export type EuiFilterButtonProps = EuiButtonEmptyProps & {
+  /**
+   * Bolds the button if true
+   */
+  hasActiveFilters?: boolean;
+  /**
+   * Pass the total number of filters available and it will
+   * add a subdued notification badge showing the number
+   */
+  numFilters?: number;
+  /**
+   * Pass the number of selected filters and it will
+   * add a bright notification badge showing the number
+   */
+  numActiveFilters?: number;
+  /**
+   * Applies a visual state to the button useful when using with a popover.
+   */
+  isSelected?: boolean;
+  /**
+   * Should the button grow to fill its container, best used for dropdown buttons
+   */
+  grow?: boolean;
+  /**
+   * Remove border after button, good for opposite filters
+   */
+  withNext?: boolean;
+  /**
+   * _DEPRECATED: use `withNext`_
+   * Remove border after button, good for opposite filters
+   */
+  noDivider?: boolean;
+};
+
+export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
   children,
   className,
   iconType,
-  iconSide,
-  color,
+  iconSide = 'right',
+  color = 'text',
   hasActiveFilters,
   numFilters,
   numActiveFilters,
   isDisabled,
   isSelected,
-  type,
-  grow,
+  type = 'button',
+  grow = true,
   noDivider,
   withNext,
   textProps,
@@ -69,19 +100,22 @@ export const EuiFilterButton = ({
       {numFiltersDefined && (
         <EuiI18n
           token="euiFilterButton.filterBadge"
-          values={{ count: numActiveFilters || numFilters, hasActiveFilters }}
-          default={({ count, hasActiveFilters }) =>
-            `${count} ${hasActiveFilters ? 'active' : 'available'} filters`
-          }>
-          {filterBadge => (
-            <EuiNotificationBadge
-              className="euiFilterButton__notification"
-              size="m"
-              aria-label={filterBadge}
-              color={isDisabled || !hasActiveFilters ? 'subdued' : 'accent'}>
-              {numActiveFilters || numFilters}
-            </EuiNotificationBadge>
-          )}
+          values={{
+            count: numActiveFilters || numFilters,
+            hasActiveFilters: hasActiveFilters ? 'active' : 'available',
+          }}
+          default="{count} {hasActiveFilters} filters">
+          {(filterBadge: string) => {
+            return (
+              <EuiNotificationBadge
+                className="euiFilterButton__notification"
+                size="m"
+                aria-label={filterBadge}
+                color={isDisabled || !hasActiveFilters ? 'subdued' : 'accent'}>
+                {numActiveFilters || numFilters}
+              </EuiNotificationBadge>
+            );
+          }}
         </EuiI18n>
       )}
     </Fragment>
@@ -101,58 +135,3 @@ export const EuiFilterButton = ({
     </EuiButtonEmpty>
   );
 };
-
-EuiFilterButton.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  onClick: PropTypes.func,
-  /**
-   * Use any one of our icons
-   */
-  iconType: IconPropType,
-  iconSide: PropTypes.oneOf(ICON_SIDES),
-  color: PropTypes.oneOf(COLORS),
-  /**
-   * Bolds the button if true
-   */
-  hasActiveFilters: PropTypes.bool,
-  /**
-   * Pass the total number of filters available and it will
-   * add a subdued notification badge showing the number
-   */
-  numFilters: PropTypes.number,
-  /**
-   * Pass the number of selected filters and it will
-   * add a bright notification badge showing the number
-   */
-  numActiveFilters: PropTypes.number,
-  /**
-   * Applies a visual state to the button useful when using with a popover.
-   */
-  isSelected: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  /**
-   * Defines html button input type
-   */
-  type: PropTypes.string,
-  /**
-   * Should the button grow to fill its container, best used for dropdown buttons
-   */
-  grow: PropTypes.bool,
-  /**
-   * Remove border after button, good for opposite filters
-   */
-  withNext: PropTypes.bool,
-  /**
-   * _DEPRECATED: use `withNext`_
-   * Remove border after button, good for opposite filters
-   */
-  noDivider: PropTypes.bool,
-};
-
-EuiFilterButton.defaultProps = {
-  type: 'button',
-  iconSide: 'right',
-  color: 'text',
-  grow: true,
-};

src/components/filter_group/filter_select_item.js → src/components/filter_group/filter_select_item.tsx

@@ -1,44 +1,44 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { ButtonHTMLAttributes, Component } from 'react';
 import classNames from 'classnames';
 
+import { CommonProps } from '../common';
+
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
 
 import { EuiIcon } from '../icon';
 
-const CHECKED_ON = 'on';
-const CHECKED_OFF = 'off';
+export type FilterChecked = 'on' | 'off';
+export interface EuiFilterSelectItemProps
+  extends CommonProps,
+    ButtonHTMLAttributes<HTMLButtonElement> {
+  checked?: FilterChecked;
+  showIcons?: boolean;
+  isFocused?: boolean;
+}
 
-const resolveIconAndColor = checked => {
+const resolveIconAndColor = (checked?: FilterChecked) => {
   if (!checked) {
     return { icon: 'empty' };
   }
-  return checked === CHECKED_ON
+  return checked === 'on'
     ? { icon: 'check', color: 'text' }
     : { icon: 'cross', color: 'text' };
 };
 
-export class EuiFilterSelectItem extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasFocus: false };
-  }
-
-  focus = () => {
-    if (this.buttonRef) {
-      this.buttonRef.focus();
-    }
+export class EuiFilterSelectItem extends Component<EuiFilterSelectItemProps> {
+  static defaultProps = {
+    showIcons: true,
   };
 
-  onFocus = () => {
-    if (this.mounted) {
-      this.setState({ hasFocus: true });
-    }
+  buttonRef: HTMLButtonElement | null = null;
+
+  state = {
+    hasFocus: false,
   };
 
-  onBlur = () => {
-    if (this.mounted) {
-      this.setState({ hasFocus: false });
+  focus = () => {
+    if (this.buttonRef) {
+      this.buttonRef.focus();
     }
   };
 
@@ -98,18 +98,3 @@ export class EuiFilterSelectItem extends Component {
     );
   }
 }
-
-EuiFilterSelectItem.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  /**
-   * Applies an icon and visual styling to activated items
-   */
-  checked: PropTypes.oneOf([CHECKED_ON, CHECKED_OFF]),
-  onClick: PropTypes.func,
-  showIcons: PropTypes.bool,
-};
-
-EuiFilterSelectItem.defaultProps = {
-  showIcons: true,
-};

src/components/filter_group/index.ts

@@ -0,0 +1,9 @@
+export { EuiFilterGroup, EuiFilterGroupProps } from './filter_group';
+
+export { EuiFilterButton, EuiFilterButtonProps } from './filter_button';
+
+export {
+  EuiFilterSelectItem,
+  EuiFilterSelectItemProps,
+  FilterChecked,
+} from './filter_select_item';

src/components/index.d.ts

@@ -1,7 +1,6 @@
 /// <reference path="./code/index.d.ts" />
 /// <reference path="./combo_box/index.d.ts" />
 /// <reference path="./date_picker/index.d.ts" />
-/// <reference path="./filter_group/index.d.ts" />
 /// <reference path="./form/index.d.ts" />
 /// <reference path="./modal/index.d.ts" />
 /// <reference path="./tabs/index.d.ts" />