feat: let users select event payloads to fill store properties

src/analyzer/typescript-react-analyzer/property-analyzer/property-analyzer.ts

@@ -269,8 +269,8 @@ function createEventHandlerProperty(
 		contextId: args.symbol.name,
 		description: '',
 		example: '',
-		// TODO: Determine event type from static information, allow TSDoc override
-		event: { type: 'MouseEvent' },
+		// TODO: Allow TSDoc override
+		event: { type: getEventType(args, ctx) },
 		hidden: false,
 		id: ctx.getPropertyId(args.symbol.name),
 		inputType: Types.PatternPropertyInputType.Default,
@@ -282,6 +282,27 @@ function createEventHandlerProperty(
 	};
 }
 
+function getEventType(
+	args: PropertyInit,
+	ctx: PropertyAnalyzeContext
+): Types.SerializedPatternEventType {
+	if (args.type.aliasTypeArguments) {
+		const typeArgument = args.type.aliasTypeArguments[0];
+		const typeArgumentSymbol = typeArgument ? typeArgument.getSymbol() : undefined;
+		const typeArgumentName = typeArgumentSymbol ? typeArgumentSymbol.getName() : undefined;
+
+		switch (typeArgumentName) {
+			case 'InputEvent':
+			case 'ChangeEvent':
+			case 'FocusEvent':
+			case 'MouseEvent':
+				return typeArgumentName;
+		}
+	}
+
+	return 'Event';
+}
+
 function setPropertyMetaData(init: {
 	property?: Types.SerializedPatternProperty;
 	symbol?: Ts.Symbol;

src/components/create-select/create-select.tsx

@@ -1,8 +1,6 @@
 import { Color } from '../colors';
-import { Icon, IconName } from '../icons';
 import * as React from 'react';
-import { getSpace, SpaceSize } from '../space';
-import styled from 'styled-components';
+import { ChevronIcon } from '../select';
 
 const CreatableSelect = require('react-select/lib/Creatable').default;
 
@@ -35,27 +33,13 @@ export interface CreateSelectOption {
 	value: string;
 }
 
-const StyledChevron = styled(Icon).attrs({ name: IconName.ArrowFillRight })`
-	color: ${Color.Black};
-	fill: ${Color.Grey60};
-	width: 12px;
-	height: 12px;
-	padding: ${getSpace(SpaceSize.XS) + getSpace(SpaceSize.XXS)}px;
-	transform: rotate(90deg);
-	transform: rotate(90deg);
-`;
-
-export const ChevronIcon: React.SFC = props => (
-	<StyledChevron {...props} name={IconName.ArrowFillLeft} />
-);
-
 export const CreateSelect: React.SFC<CreateSelectProps> = props => (
 	<>
 		<CreatableSelect
 			autoFocus={props.autoFocus}
 			backspaceRemovesValue
 			components={{
-				IndicatorsContainer: StyledChevron
+				IndicatorsContainer: ChevronIcon
 			}}
 			menuIsOpen={props.menuIsOpen}
 			options={props.options}

src/components/layout-switch/layout-switch.tsx

@@ -1,7 +1,7 @@
 import { Color } from '../colors';
 import { IconSize } from '../icons';
 import * as React from 'react';
-import { ChevronDown, Layout } from 'react-feather';
+import { Layout } from 'react-feather';
 import { getSpace, SpaceSize } from '../space';
 import styled from 'styled-components';
 
@@ -66,7 +66,7 @@ export const LayoutSwitch: React.SFC<LayoutSwitchProps> = props => (
 			<Layout size={IconSize.XS} strokeWidth={1.5} />
 		</StyledPrimaryContainer>
 		<StyledSecondaryContainer onClick={props.onSecondaryClick}>
-			<ChevronDown size={IconSize.XXS} style={{ zIndex: 10, pointerEvents: 'none' }} />
+			{props.children}
 		</StyledSecondaryContainer>
 	</StyledLayoutSwitch>
 );

src/components/layout/index.tsx

@@ -98,6 +98,7 @@ export interface FixedAreaProps {
 	right?: number;
 	bottom?: number;
 	left?: number;
+	z?: number;
 	children?: React.ReactNode;
 }
 
@@ -108,6 +109,7 @@ const StyledFixedArea = styled.div`
 	bottom: ${(props: FixedAreaProps) =>
 		typeof props.bottom === 'undefined' ? 'auto' : props.bottom};
 	left: ${(props: FixedAreaProps) => (typeof props.left === 'undefined' ? 'auto' : props.left)};
+	z-index: ${props => (typeof props.z === 'undefined' ? '' : props.z)};
 `;
 
 export const FixedArea: React.StatelessComponent<FixedAreaProps> = props => (

src/components/property-item-select/demo.tsx

@@ -26,7 +26,7 @@ export class BooleanItemDemo extends React.Component<{}, EnumItemDemoState> {
 	public render(): JSX.Element {
 		return (
 			<DemoContainer title="Enum Item">
-				<PropertyItemSelect label="Label" values={this.state.values} />
+				<PropertyItemSelect label="Label" values={this.state.values} selectedValue={undefined} />
 				<PropertyItemSelect
 					label="Label"
 					values={this.state.values}

src/components/property-item-select/index.tsx

@@ -1,6 +1,6 @@
 import { PropertyItem } from '../property-item';
 import * as React from 'react';
-import { Select, SelectOption } from '../select';
+import { Select, SimpleSelectOption } from '../select';
 
 export interface PropertyItemSelectValues {
 	id: string;
@@ -11,21 +11,25 @@ export interface PropertyItemSelectProps {
 	className?: string;
 	description?: string;
 	label: string;
-	onChange?: React.ChangeEventHandler<HTMLSelectElement>;
 	required?: boolean;
-	selectedValue?: string;
+	selectedValue: string | undefined;
 	values: PropertyItemSelectValues[];
+	onChange?(item: SimpleSelectOption): void;
+	onFocus?(): void;
 }
 
-export const PropertyItemSelect: React.StatelessComponent<
-	PropertyItemSelectProps
-> = props => (
-	<PropertyItem description={props.description} label={props.label}>
-		<Select onChange={props.onChange} selectedValue={props.selectedValue}>
-			{!props.required && <SelectOption key="required" value="" label="" />}
-			{props.values.map(value => (
-				<SelectOption key={value.id} value={value.id} label={value.name} />
-			))}
-		</Select>
-	</PropertyItem>
-);
+export const PropertyItemSelect: React.StatelessComponent<PropertyItemSelectProps> = props => {
+	const selected = props.values.find(v => v.id === props.selectedValue);
+	const value = selected ? { label: selected.name, value: selected.id } : undefined;
+
+	return (
+		<PropertyItem description={props.description} label={props.label}>
+			<Select
+				onChange={props.onChange}
+				onFocus={props.onFocus}
+				options={props.values.map(v => ({ label: v.name, value: v.id }))}
+				value={value}
+			/>
+		</PropertyItem>
+	);
+};

src/components/property-item-string/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PropertyInput, PropertyInputType } from '../property-input';
 import { PropertyItem } from '../property-item';
-import { Link2 } from 'react-feather';
+import { Link2, Package } from 'react-feather';
 import styled, { StyledComponentClass } from 'styled-components';
 import { Color } from '../colors';
 
@@ -17,22 +17,39 @@ export interface PropertyItemStringProps {
 	children?(renderProps: PropertyItemStringProps): JSX.Element | null;
 }
 
-// tslint:disable-next-line:no-any
-export const LinkIcon: StyledComponentClass<{}, any, any> = styled(Link2)`
+export const LinkIcon = styled(Link2)`
 	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
 	right: 0;
 	box-sizing: border-box;
 	padding: 3px 6px 3px 0;
 	width: 20px;
 	cursor: pointer;
 	transition: stroke 0.3s ease-in-out;
+	stroke: ${Color.Grey60};
 	&:hover {
 		stroke: ${Color.Blue20};
 	}
 `;
 
-// tslint:disable-next-line:no-any
-export const UnlinkIcon: StyledComponentClass<{}, any, any> = styled(Link2)`
+export const PackageIcon = styled(Package)`
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	right: 0;
+	box-sizing: border-box;
+	padding: 3px 6px 3px 0;
+	width: 20px;
+	cursor: pointer;
+	transition: stroke 0.3s ease-in-out;
+	stroke: ${Color.Grey60};
+	&:hover {
+		stroke: ${Color.Blue20};
+	}
+`;
+
+export const UnlinkIcon: StyledComponentClass<{}, 'svg'> = styled(Link2)`
 	position: absolute;
 	right: 0;
 	box-sizing: border-box;

src/components/property-reference/index.tsx

@@ -66,8 +66,8 @@ export const StyledLinkIcon: StyledComponentClass<{}, any, any> = styled(Link2)`
 `;
 
 export interface PropertyReferenceProps {
-	name: string;
-	value: string;
+	name: string | undefined;
+	value: string | undefined;
 	onClick?: React.MouseEventHandler<HTMLElement>;
 	onLinkClick?: React.MouseEventHandler<HTMLElement>;
 }

src/components/select/demo.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Select } from '.';
+
+const options = [
+	{
+		label: 'A',
+		value: '1'
+	},
+	{
+		label: 'B',
+		value: '2'
+	}
+];
+
+const SelectDemo: React.SFC = props => (
+	<div>
+		<Select options={options} value={options[0]} />
+		<Select options={options} value={options[1]} menuIsOpen />
+	</div>
+);
+
+export default SelectDemo;