Refactor field-list and add CustomWildcardFieldList

src/components/data-pane/field-list.tsx

@@ -1,26 +1,32 @@
 import {ExpandedType} from 'compassql/build/src/query/expandedtype';
 import {PrimitiveType, Schema} from 'compassql/build/src/schema';
-import {isWildcard} from 'compassql/build/src/wildcard';
+import {isWildcard, isWildcardDef} from 'compassql/build/src/wildcard';
 import * as stringify from 'json-stable-stringify';
 import * as React from 'react';
 import * as CSSModules from 'react-css-modules';
 import {connect} from 'react-redux';
 import {OneOfFilter, RangeFilter} from 'vega-lite/build/src/filter';
 import {FilterAction} from '../../actions';
+import {CustomWildcardAction} from '../../actions/custom-wildcard-field';
 import {DatasetSchemaChangeFieldType} from '../../actions/dataset';
 import {ActionHandler, createDispatchHandler} from '../../actions/redux-action';
 import {SPEC_FIELD_AUTO_ADD, SpecFieldAutoAdd} from '../../actions/shelf';
 import {FieldParentType} from '../../constants';
+import {CustomWildcardFieldDef} from '../../models/custom-wildcard-field';
 import {State} from '../../models/index';
 import {ShelfFieldDef} from '../../models/shelf';
 import {selectPresetWildcardFields, selectSchema, selectSchemaFieldDefs} from '../../selectors';
+import {selectCustomWildcardFieldDefs} from '../../selectors/index';
 import {selectFilters} from '../../selectors/shelf';
 import {Field} from '../field';
 import * as styles from './field-list.scss';
 import {TypeChanger} from './type-changer';
+import {WildcardFieldDropper} from './wildcard-field-dropper';
+import {CustomWildcardFieldEditor} from './wildcard-field-editor';
 
 
-export interface FieldListProps extends ActionHandler<SpecFieldAutoAdd | DatasetSchemaChangeFieldType | FilterAction> {
+export interface FieldListProps extends ActionHandler<
+  CustomWildcardAction | SpecFieldAutoAdd | DatasetSchemaChangeFieldType | FilterAction> {
   fieldDefs: ShelfFieldDef[];
   schema: Schema;
   filters: Array<RangeFilter | OneOfFilter>;
@@ -36,20 +42,8 @@ class FieldListBase extends React.PureComponent<FieldListProps, {}> {
   }
 
   public render() {
-    const {fieldDefs, schema} = this.props;
-    const fieldItems = fieldDefs.map(fieldDef => {
-      let primitiveType;
-      if (!isWildcard(fieldDef.field)) {
-        primitiveType = schema.primitiveType(fieldDef.field);
-      }
-      const hideTypeChanger = this.getValidTypes(primitiveType).length < 2;
-      const key = isWildcard(fieldDef.field) ? stringify(fieldDef) : fieldDef.field;
-      return (
-        <div key={key} styleName="field-list-item">
-          {this.renderComponent(fieldDef, hideTypeChanger, primitiveType)}
-        </div>
-      );
-    });
+    const {fieldDefs} = this.props;
+    const fieldItems = fieldDefs.map((fieldDef, index) => this.renderListItem(fieldDef, index));
     return (
       <div styleName='field-list'>
         {fieldItems}
@@ -65,36 +59,39 @@ class FieldListBase extends React.PureComponent<FieldListProps, {}> {
     });
   }
 
-  private renderComponent(fieldDef: ShelfFieldDef, hideTypeChanger: boolean, primitiveType: PrimitiveType) {
-    if (hideTypeChanger) {
-      return this.renderField(fieldDef);
-    } else {
-      const popupComponent = this.renderTypeChanger(fieldDef, primitiveType);
-      return this.renderField(fieldDef, popupComponent);
-    }
-  }
+  private renderListItem(fieldDef: ShelfFieldDef, index: number) {
+    const {schema, filters, handleAction} = this.props;
+    const key = isWildcard(fieldDef.field) ? stringify(fieldDef) : fieldDef.field;
+
+    let field;
+    let popupComponent;
+    let isCustomWildcardField;
 
-  private renderTypeChanger(fieldDef: ShelfFieldDef, primitiveType: PrimitiveType) {
-    const {handleAction} = this.props;
     if (!isWildcard(fieldDef.field)) {
-      return (
-        <TypeChanger
-          field={fieldDef.field}
-          type={fieldDef.type}
-          validTypes={this.getValidTypes(primitiveType)}
-          handleAction={handleAction}
-        />
-      );
+      const primitiveType = schema.primitiveType(fieldDef.field);
+
+      if (this.getValidTypes(primitiveType).length < 2) {
+        popupComponent = this.renderTypeChanger(fieldDef, primitiveType);
+      }
+    } else {
+      isCustomWildcardField = isWildcardDef(fieldDef);
+      if (isCustomWildcardField) {
+        popupComponent = (
+          <CustomWildcardFieldEditor
+            customWildcardFielddef={fieldDef as CustomWildcardFieldDef}
+            index={index}
+            handleAction={handleAction}
+          />
+        );
+      }
     }
-  }
 
-  private renderField(fieldDef: ShelfFieldDef, popupComponent?: JSX.Element) {
-    const {schema, filters, handleAction} = this.props;
     let filterShow;
     if (!isWildcard(fieldDef.field) && !(fieldDef.field === '*')) {
       filterShow = {filters};
     }
-    return (
+
+    field = (
       <Field
         fieldDef={fieldDef}
         isPill={true}
@@ -109,6 +106,36 @@ class FieldListBase extends React.PureComponent<FieldListProps, {}> {
         handleAction={handleAction}
       />
     );
+
+    return (
+      <div key={key} styleName="field-list-item">
+        {
+          (isCustomWildcardField) ?
+            <WildcardFieldDropper
+              customWildcardField={fieldDef as CustomWildcardFieldDef}
+              schema={schema}
+              index={index}
+            >
+              {field}
+            </WildcardFieldDropper> :
+            field
+          }
+      </div>
+    );
+  }
+
+  private renderTypeChanger(fieldDef: ShelfFieldDef, primitiveType: PrimitiveType) {
+    const {handleAction} = this.props;
+    if (!isWildcard(fieldDef.field)) {
+      return (
+        <TypeChanger
+          field={fieldDef.field}
+          type={fieldDef.type}
+          validTypes={this.getValidTypes(primitiveType)}
+          handleAction={handleAction}
+        />
+      );
+    }
   }
 
   private getValidTypes(primitiveType: PrimitiveType): ExpandedType[] {
@@ -148,7 +175,21 @@ export const PresetWildcardFieldList = connect(
   (state: State) => {
     return {
       fieldDefs: selectPresetWildcardFields(state),
-      schema: selectSchema(state)
+      schema: selectSchema(state),
+      filters: selectFilters(state)
+    };
+  },
+  createDispatchHandler<SpecFieldAutoAdd>()
+)(FieldListRenderer);
+
+
+export const CustomWildcardFieldList = connect(
+  (state: State) => {
+    return {
+      // Somehow TS does not infer type that CustomWildcardFieldDefs can be a ShelfFieldDef
+      fieldDefs: selectCustomWildcardFieldDefs(state) as ShelfFieldDef[],
+      schema: selectSchema(state),
+      filters: selectFilters(state)
     };
   },
   createDispatchHandler<SpecFieldAutoAdd>()