Task/eui table header cell checkbox to ts (#1973)

* `EuiTableHeaderCellCheckbox` convert to TS * `EuiTableHeaderCellCheckbox` convert to TS * `EuiTableHeaderCellCheckbox` convert to TS * `EuiTableHeaderCellCheckbox` Changelog * `EuiTableHeaderCellCheckbox` Code review
elastic · May 31, 2019 · 9182922 · 9182922
1 parent b7801f0
commit 9182922
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 52 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Converted `EuiTableRowHeaderCheckbox` to TS ([#1973](https://github.com/elastic/eui/pull/1973))
 - Added missing TypeScript definition for `EuiFieldText`'s `compressed` prop ([#1977](https://github.com/elastic/eui/pull/1977))
 - Converted `EuiTableRowCellCheckbox` to TS ([#1964](https://github.com/elastic/eui/pull/1964))
 - Updated `caniuse-lite` version resolution ([#1970](https://github.com/elastic/eui/pull/1970))

diff --git a/src/components/basic_table/__snapshots__/basic_table.test.js.snap b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
@@ -759,7 +759,6 @@ exports[`EuiBasicTable footers render with pagination, selection, sorting, and f
  <EuiTableHeader>
  <EuiTableHeaderCellCheckbox
  key="_selection_column_h"
- scope="col"
  width="24px"
  >
  <EuiI18n
@@ -1769,7 +1768,6 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
  <EuiTableHeader>
  <EuiTableHeaderCellCheckbox
  key="_selection_column_h"
- scope="col"
  width="24px"
  >
  <EuiI18n
@@ -2082,7 +2080,6 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
  <EuiTableHeader>
  <EuiTableHeaderCellCheckbox
  key="_selection_column_h"
- scope="col"
  width="24px"
  >
  <EuiI18n
@@ -2274,7 +2271,6 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
  <EuiTableHeader>
  <EuiTableHeaderCellCheckbox
  key="_selection_column_h"
- scope="col"
  width="24px"
  >
  <EuiI18n
@@ -2580,7 +2576,6 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
  <EuiTableHeader>
  <EuiTableHeaderCellCheckbox
  key="_selection_column_h"
- scope="col"
  width="24px"
  >
  <EuiI18n
@@ -2772,7 +2767,6 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
  <EuiTableHeader>
  <EuiTableHeaderCellCheckbox
  key="_selection_column_h"
- scope="col"
  width="24px"
  >
  <EuiI18n
@@ -2964,7 +2958,6 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
  <EuiTableHeader>
  <EuiTableHeaderCellCheckbox
  key="_selection_column_h"
- scope="col"
  width="24px"
  >
  <EuiI18n
@@ -3288,7 +3281,6 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
  <EuiTableHeader>
  <EuiTableHeaderCellCheckbox
  key="_selection_column_h"
- scope="col"
  width="24px"
  >
  <EuiI18n

diff --git a/..._/table_header_cell_checkbox.test.js.snap → .../table_header_cell_checkbox.test.tsx.snap b/..._/table_header_cell_checkbox.test.js.snap → .../table_header_cell_checkbox.test.tsx.snap
diff --git a/src/components/table/index.d.ts b/src/components/table/index.d.ts
@@ -4,6 +4,11 @@ import { CommonProps, NoArgCallback } from '../common';
 import { IconType } from '../icon';
 import { HorizontalAlignment } from '../../services/alignment';
 import { EuiTableRowCellCheckbox as TableRowCellCheckbox } from './table_row_cell_checkbox';
+import {
+ EuiTableHeaderCellCheckboxScope as TableHeaderCellCheckboxScope,
+ EuiTableHeaderCellCheckboxProps as TableHeaderCellCheckboxProps,
+ EuiTableHeaderCellCheckbox as TableHeaderCellCheckbox,
+} from './table_header_cell_checkbox';
 
 import {
  FunctionComponent,
@@ -102,22 +107,9 @@ declare module '@elastic/eui' {
  * @see './table_header_cell_checkbox.js'
  */
 
- export type EuiTableHeaderCellCheckboxScope =
- | 'col'
- | 'row'
- | 'colgroup'
- | 'rowgroup';
-
- export interface EuiTableHeaderCellCheckboxProps {
- width?: string;
- scope?: EuiTableHeaderCellCheckboxScope;
- }
-
- export const EuiTableHeaderCellCheckbox: FunctionComponent<
- CommonProps &
- TdHTMLAttributes<HTMLTableCellElement> &
- EuiTableHeaderCellCheckboxProps
- >;
+ export type EuiTableHeaderCellCheckboxScope = TableHeaderCellCheckboxScope;
+ export interface EuiTableHeaderCellCheckboxProps extends TableHeaderCellCheckboxProps {}
+ export const EuiTableHeaderCellCheckbox: typeof TableHeaderCellCheckbox;
 
  /**
  * table row type defs

diff --git a/src/components/table/table_header_cell_checkbox.js b/src/components/table/table_header_cell_checkbox.js
diff --git a/.../table/table_header_cell_checkbox.test.js → ...table/table_header_cell_checkbox.test.tsx b/.../table/table_header_cell_checkbox.test.js → ...table/table_header_cell_checkbox.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
+import { requiredProps } from '../../test';
 
 import { EuiTableHeaderCellCheckbox } from './table_header_cell_checkbox';
 

diff --git a/src/components/table/table_header_cell_checkbox.tsx b/src/components/table/table_header_cell_checkbox.tsx
@@ -0,0 +1,28 @@
+import React, { FunctionComponent, ThHTMLAttributes } from 'react';
+import classNames from 'classnames';
+import { CommonProps } from '../common';
+
+export type EuiTableHeaderCellCheckboxScope =
+ | 'col'
+ | 'row'
+ | 'colgroup'
+ | 'rowgroup';
+
+export interface EuiTableHeaderCellCheckboxProps {
+ width?: string;
+ scope?: EuiTableHeaderCellCheckboxScope;
+}
+
+export const EuiTableHeaderCellCheckbox: FunctionComponent<
+ CommonProps &
+ ThHTMLAttributes<HTMLTableHeaderCellElement> &
+ EuiTableHeaderCellCheckboxProps
+> = ({ children, className, scope = 'col', ...rest }) => {
+ const classes = classNames('euiTableHeaderCellCheckbox', className);
+
+ return (
+ <th className={classes} {...rest} scope={scope}>
+ <div className="euiTableCellContent">{children}</div>
+ </th>
+ );
+};