From 211079f6728088acbff0984d37c8538d565a4323 Mon Sep 17 00:00:00 2001 From: Felix Ouk Date: Thu, 14 Sep 2017 17:39:46 -0700 Subject: [PATCH] Add wildcard-field-drop-zone component --- .../data-pane/wildcard-field-drop-zone.tsx | 90 +++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 src/components/data-pane/wildcard-field-drop-zone.tsx diff --git a/src/components/data-pane/wildcard-field-drop-zone.tsx b/src/components/data-pane/wildcard-field-drop-zone.tsx new file mode 100644 index 000000000..24b2469c8 --- /dev/null +++ b/src/components/data-pane/wildcard-field-drop-zone.tsx @@ -0,0 +1,90 @@ +import {Schema} from 'compassql/build/src/schema'; +import {isWildcard} from 'compassql/build/src/wildcard'; +import * as React from 'react'; +import * as CSSModules from 'react-css-modules'; +import {ConnectDropTarget, DropTarget, DropTargetCollector, DropTargetSpec} from 'react-dnd'; +import {CUSTOM_WILDCARD_ADD, CustomWildcardAction} from '../../actions/custom-wildcard-field'; +import {DraggableType} from '../../constants'; +import {DraggedFieldIdentifier} from '../field/index'; +import * as styles from './wildcard-field-drop-zone.scss'; + + +export interface CustomWildcardFieldDropZoneDropTargetProps { + connectDropTarget: ConnectDropTarget; + isOver: boolean; + item: Object; + canDrop: boolean; +} + +export interface CustomWildcardFieldDropZonePropsBase { + schema: Schema; + handleAction?: (action: CustomWildcardAction) => void; +} + +interface CustomWildcardFieldDropZoneProps extends + CustomWildcardFieldDropZoneDropTargetProps, CustomWildcardFieldDropZonePropsBase {}; + +class CustomWildcardFieldDropZoneBase extends React.PureComponent { + public constructor(props: CustomWildcardFieldDropZoneProps) { + super(props); + } + + public render() { + const {connectDropTarget} = this.props; + + return connectDropTarget( +
+ Drop a field here! +
+ ); + } +} + + +const customWildcardFieldTarget: DropTargetSpec = { + drop(props, monitor) { + if (monitor.didDrop()) { + return; + } + + const {fieldDef} = monitor.getItem() as DraggedFieldIdentifier; + const type = fieldDef.type; + + let fields; + if (isWildcard(fieldDef.field)) { + if (fieldDef.field === '?') { + const {schema} = props; + fields = schema.fieldNames() + .filter(field => schema.vlType(field) === type); + } else { + fields = fieldDef.field.enum.concat([]); + } + } else { + fields = [fieldDef.field]; + } + + props.handleAction({ + type: CUSTOM_WILDCARD_ADD, + payload: { + fields, + type + } + }); + } +}; + + +const collect: DropTargetCollector = (connect, monitor): CustomWildcardFieldDropZoneDropTargetProps => { + return { + connectDropTarget: connect.dropTarget(), + isOver: monitor.isOver(), + item: monitor.getItem(), + canDrop: true + }; +}; + +// HACK: do type casting to suppress compile error for: https://github.com/Microsoft/TypeScript/issues/13526 +export const CustomWildcardFieldDropZone: () => React.PureComponent = + DropTarget( + DraggableType.FIELD, customWildcardFieldTarget, collect + )(CSSModules(CustomWildcardFieldDropZoneBase, styles)) as any;