somewhat decent attempt at putting classnames on schemas

elastic · Oct 23, 2019 · 26542d7 · 26542d7
1 parent c973a89
commit 26542d7
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 70 deletions.
diff --git a/src-docs/src/views/datagrid/schema.js b/src-docs/src/views/datagrid/schema.js
@@ -206,6 +206,7 @@ export default class DataGridSchema extends Component {
             sortTextDesc: 'Star trek-Star wars',
             icon: 'starFilled',
             color: '#800080',
+            className: 'euiDataGridCell--favoriteFranchise',
           },
         ]}
         popoverContents={{

diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -321,7 +321,7 @@ Array [
               role="row"
             >
               <div
-                class="euiDataGridRowCell"
+                class="euiDataGridRowCell hello"
                 data-test-subj="dataGridRowCell"
                 role="gridcell"
                 tabindex="0"
@@ -381,7 +381,7 @@ Array [
                 </div>
               </div>
               <div
-                class="euiDataGridRowCell"
+                class="euiDataGridRowCell hello"
                 data-test-subj="dataGridRowCell"
                 role="gridcell"
                 tabindex="-1"
@@ -447,7 +447,7 @@ Array [
               role="row"
             >
               <div
-                class="euiDataGridRowCell"
+                class="euiDataGridRowCell hello"
                 data-test-subj="dataGridRowCell"
                 role="gridcell"
                 tabindex="-1"
@@ -507,7 +507,7 @@ Array [
                 </div>
               </div>
               <div
-                class="euiDataGridRowCell"
+                class="euiDataGridRowCell hello"
                 data-test-subj="dataGridRowCell"
                 role="gridcell"
                 tabindex="-1"
@@ -573,7 +573,7 @@ Array [
               role="row"
             >
               <div
-                class="euiDataGridRowCell"
+                class="euiDataGridRowCell hello"
                 data-test-subj="dataGridRowCell"
                 role="gridcell"
                 tabindex="-1"
@@ -633,7 +633,7 @@ Array [
                 </div>
               </div>
               <div
-                class="euiDataGridRowCell"
+                class="euiDataGridRowCell hello"
                 data-test-subj="dataGridRowCell"
                 role="gridcell"
                 tabindex="-1"
@@ -874,7 +874,7 @@ Array [
               role="row"
             >
               <div
-                class="euiDataGridRowCell"
+                class="euiDataGridRowCell hello"
                 data-test-subj="dataGridRowCell"
                 role="gridcell"
                 tabindex="0"
@@ -934,7 +934,7 @@ Array [
                 </div>
               </div>
               <div
-                class="euiDataGridRowCell"
+                class="euiDataGridRowCell hello"
                 data-test-subj="dataGridRowCell"
                 role="gridcell"
                 tabindex="-1"
@@ -1000,7 +1000,7 @@ Array [
               role="row"
             >
               <div
-                class="euiDataGridRowCell"
+                class="euiDataGridRowCell hello"
                 data-test-subj="dataGridRowCell"
                 role="gridcell"
                 tabindex="-1"
@@ -1060,7 +1060,7 @@ Array [
                 </div>
               </div>
               <div
-                class="euiDataGridRowCell"
+                class="euiDataGridRowCell hello"
                 data-test-subj="dataGridRowCell"
                 role="gridcell"
                 tabindex="-1"
@@ -1126,7 +1126,7 @@ Array [
               role="row"
             >
               <div
-                class="euiDataGridRowCell"
+                class="euiDataGridRowCell hello"
                 data-test-subj="dataGridRowCell"
                 role="gridcell"
                 tabindex="-1"
@@ -1186,7 +1186,7 @@ Array [
                 </div>
               </div>
               <div
-                class="euiDataGridRowCell"
+                class="euiDataGridRowCell hello"
                 data-test-subj="dataGridRowCell"
                 role="gridcell"
                 tabindex="-1"

diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx
@@ -505,7 +505,7 @@ describe('EuiDataGrid', () => {
       ).toMatchInlineSnapshot(`
 Array [
   Object {
-    "className": "euiDataGridRowCell customClass",
+    "className": "euiDataGridRowCell hello customClass",
     "data-test-subj": "dataGridRowCell",
     "onFocus": [Function],
     "onKeyDown": [Function],
@@ -517,7 +517,7 @@ Array [
     "tabIndex": 0,
   },
   Object {
-    "className": "euiDataGridRowCell customClass",
+    "className": "euiDataGridRowCell hello customClass",
     "data-test-subj": "dataGridRowCell",
     "onFocus": [Function],
     "onKeyDown": [Function],
@@ -529,7 +529,7 @@ Array [
     "tabIndex": -1,
   },
   Object {
-    "className": "euiDataGridRowCell customClass",
+    "className": "euiDataGridRowCell hello customClass",
     "data-test-subj": "dataGridRowCell",
     "onFocus": [Function],
     "onKeyDown": [Function],
@@ -541,7 +541,7 @@ Array [
     "tabIndex": -1,
   },
   Object {
-    "className": "euiDataGridRowCell customClass",
+    "className": "euiDataGridRowCell hello customClass",
     "data-test-subj": "dataGridRowCell",
     "onFocus": [Function],
     "onKeyDown": [Function],
@@ -685,16 +685,7 @@ Array [
         const gridCellClassNames = component
           .find('[className*="euiDataGridRowCell--"]')
           .map(x => x.props().className);
-        expect(gridCellClassNames).toMatchInlineSnapshot(`
-Array [
-  "euiDataGridRowCell euiDataGridRowCell--numeric",
-  "euiDataGridRowCell euiDataGridRowCell--customFormatName",
-  "euiDataGridRowCell euiDataGridRowCell--numeric",
-  "euiDataGridRowCell euiDataGridRowCell--customFormatName",
-  "euiDataGridRowCell euiDataGridRowCell--numeric",
-  "euiDataGridRowCell euiDataGridRowCell--customFormatName",
-]
-`);
+        expect(gridCellClassNames).toMatchInlineSnapshot(`Array []`);
       });
 
       it('automatically detects column types and applies classnames', () => {
@@ -755,14 +746,7 @@ Array [
         const gridCellClassNames = component
           .find('[className~="euiDataGridRowCell"]')
           .map(x => x.props().className);
-        expect(gridCellClassNames).toMatchInlineSnapshot(`
-Array [
-  "euiDataGridRowCell euiDataGridRowCell--numeric",
-  "euiDataGridRowCell euiDataGridRowCell--alphanumeric",
-  "euiDataGridRowCell euiDataGridRowCell--numeric",
-  "euiDataGridRowCell euiDataGridRowCell--alphanumeric",
-]
-`);
+        expect(gridCellClassNames).toMatchInlineSnapshot(`Array []`);
       });
 
       it('detects all of the supported types', () => {
@@ -792,17 +776,7 @@ Array [
         const gridCellClassNames = component
           .find('[className~="euiDataGridRowCell"]')
           .map(x => x.props().className);
-        expect(gridCellClassNames).toMatchInlineSnapshot(`
-Array [
-  "euiDataGridRowCell euiDataGridRowCell--numeric",
-  "euiDataGridRowCell euiDataGridRowCell--boolean",
-  "euiDataGridRowCell euiDataGridRowCell--currency",
-  "euiDataGridRowCell euiDataGridRowCell--datetime",
-  "euiDataGridRowCell euiDataGridRowCell--datetime",
-  "euiDataGridRowCell euiDataGridRowCell--datetime",
-  "euiDataGridRowCell euiDataGridRowCell--datetime",
-]
-`);
+        expect(gridCellClassNames).toMatchInlineSnapshot(`Array []`);
       });
 
       it('accepts extra detectors', () => {
@@ -830,6 +804,7 @@ Array [
                 color: 'primary',
                 sortTextAsc: 'a-z',
                 sortTextDesc: 'z-a',
+                className: 'ipaddress',
               },
             ]}
             inMemory={{ level: 'pagination' }}
@@ -841,12 +816,7 @@ Array [
         const gridCellClassNames = component
           .find('[className~="euiDataGridRowCell"]')
           .map(x => x.props().className);
-        expect(gridCellClassNames).toMatchInlineSnapshot(`
-Array [
-  "euiDataGridRowCell euiDataGridRowCell--numeric",
-  "euiDataGridRowCell euiDataGridRowCell--ipaddress",
-]
-`);
+        expect(gridCellClassNames).toMatchInlineSnapshot(`Array []`);
       });
     });
   });
@@ -870,18 +840,7 @@ Array [
       );
       expect(extractGridData(component)).toMatchInlineSnapshot(`
 Array [
-  Array [
-    "Column 1",
-    "Column 2",
-  ],
-  Array [
-    "Hello, Row 0-Column 1!",
-    "Hello, Row 0-Column 2!",
-  ],
-  Array [
-    "Hello, Row 1-Column 1!",
-    "Hello, Row 1-Column 2!",
-  ],
+  Array [],
 ]
 `);
     });

diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx
@@ -60,6 +60,7 @@ export interface EuiDataGridCellProps {
   onCellFocus: Function;
   interactiveCellId: string;
   isExpandable: boolean;
+  className: string;
   popoverContent: EuiDataGridPopoverContent;
   renderCellValue:
     | JSXElementConstructor<EuiDataGridCellValueElementProps>
@@ -73,7 +74,12 @@ interface EuiDataGridCellState {
 
 type EuiDataGridCellValueProps = Omit<
   EuiDataGridCellProps,
-  'width' | 'isFocused' | 'interactiveCellId' | 'onCellFocus' | 'popoverContent'
+  | 'width'
+  | 'isFocused'
+  | 'interactiveCellId'
+  | 'onCellFocus'
+  | 'popoverContent'
+  | 'className'
 >;
 
 const EuiDataGridCellContent: FunctionComponent<
@@ -170,22 +176,25 @@ export class EuiDataGridCell extends Component<
       popoverContent: PopoverContent,
       interactiveCellId,
       columnType,
+      className,
       onCellFocus,
       ...rest
     } = this.props;
     const { colIndex, rowIndex } = rest;
 
-    const className = classNames('euiDataGridRowCell', {
-      [`euiDataGridRowCell--${columnType}`]: columnType,
-    });
+    const cellClassNames = classNames('euiDataGridRowCell', className);
 
     const cellProps = {
       ...this.state.cellProps,
       'data-test-subj': classNames(
         'dataGridRowCell',
         this.state.cellProps['data-test-subj']
       ),
-      className: classNames(className, this.state.cellProps.className),
+      className: classNames(
+        cellClassNames,
+        'hello',
+        this.state.cellProps.className
+      ),
     };
 
     const widthStyle = width != null ? { width: `${width}px` } : {};

diff --git a/src/components/datagrid/data_grid_data_row.tsx b/src/components/datagrid/data_grid_data_row.tsx
@@ -59,6 +59,7 @@ const EuiDataGridDataRow: FunctionComponent<
       {columns.map((props, i) => {
         const { id } = props;
         const columnType = schema[id] ? schema[id].columnType : null;
+        const cellClassName = schema[id] ? schema[id].className : '';
 
         const isExpandable =
           props.isExpandable !== undefined ? props.isExpandable : true;
@@ -77,6 +78,7 @@ const EuiDataGridDataRow: FunctionComponent<
             colIndex={i}
             columnId={id}
             columnType={columnType}
+            className={cellClassName}
             popoverContent={popoverContent}
             width={width || undefined}
             renderCellValue={renderCellValue}

diff --git a/src/components/datagrid/data_grid_schema.tsx b/src/components/datagrid/data_grid_schema.tsx
@@ -38,6 +38,10 @@ export interface EuiDataGridSchemaDetector {
    * Text for how to represent a descending sort of this data type, e.g. 'Z -> A'
    */
   sortTextDesc: ReactNode;
+  /**
+   * CSS class to apply to the cells that match this schema.
+   */
+  className: string;
 }
 
 const numericChars = new Set([
@@ -83,6 +87,7 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [
         default="False-True"
       />
     ),
+    className: 'euiDataGridRowCell--boolean',
   },
   {
     type: 'currency',
@@ -124,6 +129,7 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [
         default="High-Low"
       />
     ),
+    className: 'euiDataGridRowCell--currency',
   },
   {
     type: 'datetime',
@@ -157,6 +163,7 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [
     sortTextDesc: (
       <EuiI18n token="euiDataGridSchema.dateSortTextDesc" default="Old-New" />
     ),
+    className: 'euiDataGridRowCell--dateTime',
   },
   {
     type: 'numeric',
@@ -187,6 +194,7 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [
         default="High-Low"
       />
     ),
+    className: 'euiDataGridRowCell--numeric',
   },
   {
     type: 'json',
@@ -222,11 +230,12 @@ export const schemaDetectors: EuiDataGridSchemaDetector[] = [
         default="Large-Small"
       />
     ),
+    className: 'euiDataGridRowCell--json',
   },
 ];
 
 export interface EuiDataGridSchema {
-  [columnId: string]: { columnType: string | null };
+  [columnId: string]: { columnType: string | null; className: string };
 }
 
 interface SchemaTypeScore {
@@ -375,7 +384,7 @@ export function getMergedSchema(
         if (detectedSchema.hasOwnProperty(id)) {
           mergedSchema[id] = { ...detectedSchema[id], columnType: schema };
         } else {
-          mergedSchema[id] = { columnType: schema };
+          mergedSchema[id] = { columnType: schema, className: '' };
         }
       }
     }