feat: enable references on all primitive props

meetalva · Sep 10, 2018 · cc80ac6 · cc80ac6
1 parent f64c63b
commit cc80ac6
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 41 deletions.
diff --git a/src/components/property-item-string/index.tsx b/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, Package } from 'react-feather';
+import { Link2 } from 'react-feather';
 import styled, { StyledComponentClass } from 'styled-components';
 import { Color } from '../colors';
 
@@ -16,9 +16,10 @@ export interface PropertyItemStringProps {
 	children?(renderProps: PropertyItemStringProps): JSX.Element | null;
 }
 
-export const LinkIcon = styled(Link2)`
+// tslint:disable-next-line:no-any
+export const LinkIcon: StyledComponentClass<{}, {}, any> = styled(Link2)`
 	position: absolute;
-	top: 50%;
+	top: 15px;
 	transform: translateY(-50%);
 	right: 0;
 	box-sizing: border-box;
@@ -32,35 +33,6 @@ export const LinkIcon = 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;
-	padding: 3px 6px 3px 0;
-	width: 20px;
-	cursor: pointer;
-	transition: stroke 0.3s ease-in-out;
-	&:hover {
-		stroke: ${Color.Red};
-	}
-`;
-
 export const PropertyItemString: React.StatelessComponent<PropertyItemStringProps> = props => (
 	<PropertyItem description={props.description} label={props.label}>
 		<PropertyInput

diff --git a/src/container/property-list/property-list-item.tsx b/src/container/property-list/property-list-item.tsx
@@ -11,7 +11,7 @@ import { PropertyItemEvent } from './property-item-event';
 import { PropertyItemNumber } from './property-item-number';
 import { PropertyItemString } from './property-item-string';
 import { PropertyItemRadioGroup } from './property-item-radio-group';
-import { ReferenceSelect } from './reference-select';
+import { ReferenceSelect, IconPosition } from './reference-select';
 
 export interface PropertyListItemProps {
 	property: Model.ElementProperty;
@@ -41,19 +41,31 @@ export class PropertyListItem extends React.Component<PropertyListItemProps> {
 				return <PropertyItemAsset key={id} property={property} />;
 			}
 			case Types.PatternPropertyType.Boolean: {
-				return <PropertyItemBoolean key={id} property={property} />;
+				return (
+					<ReferenceSelect key={id} property={property}>
+						<PropertyItemBoolean property={property} />
+					</ReferenceSelect>
+				);
 			}
 			case Types.PatternPropertyType.Enum: {
 				const inputType = patternProperty.getInputType();
-				return inputType === Types.PatternPropertyInputType.RadioGroup
-					? <PropertyItemRadioGroup key={id} property={property}/>
-					: <PropertyItemEnum key={id} property={property} />;
+				return inputType === Types.PatternPropertyInputType.RadioGroup ? (
+					<PropertyItemRadioGroup key={id} property={property} />
+				) : (
+					<ReferenceSelect key={id} property={property} iconPosition={IconPosition.Indent}>
+						<PropertyItemEnum property={property} />
+					</ReferenceSelect>
+				);
 			}
 			case Types.PatternPropertyType.EventHandler: {
 				return <PropertyItemEvent key={id} property={property} />;
 			}
 			case Types.PatternPropertyType.Number:
-				return <PropertyItemNumber key={id} property={property} />;
+				return (
+					<ReferenceSelect key={id} property={property} iconPosition={IconPosition.Indent}>
+						<PropertyItemNumber key={id} property={property} />
+					</ReferenceSelect>
+				);
 			case Types.PatternPropertyType.String:
 			default: {
 				return (

diff --git a/src/container/property-list/reference-select.tsx b/src/container/property-list/reference-select.tsx
@@ -4,16 +4,43 @@ import * as Model from '../../model';
 import * as React from 'react';
 import { UserStorePropertySelect } from '../user-store-property-select';
 import { Reference } from './reference';
+import styled from 'styled-components';
 import * as Types from '../../types';
 import { ViewStore } from '../../store';
 import * as uuid from 'uuid';
 
 export interface ReferenceSelectProps {
 	property: Model.ElementProperty;
+	iconPosition?: IconPosition;
+}
+
+export enum IconPosition {
+	Default,
+	Indent
 }
 
 const OutsideClickHandler = require('react-outside-click-handler').default;
 
+const HoverReveal = styled.div`
+	${Components.LinkIcon} {
+		opacity: 0;
+		transition: 0.3s ease-in-out opacity;
+	}
+
+	&:hover ${Components.LinkIcon} {
+		opacity: 1;
+	}
+`;
+
+interface PositionedLinkIconProps {
+	position: IconPosition;
+}
+
+const PositionedLinkIcon = styled(Components.LinkIcon)`
+	right: ${(props: PositionedLinkIconProps) =>
+		props.position === IconPosition.Indent ? 20 : 0}px;
+`;
+
 @MobxReact.inject('store')
 @MobxReact.observer
 export class ReferenceSelect extends React.Component<ReferenceSelectProps> {
@@ -101,10 +128,13 @@ export class ReferenceSelect extends React.Component<ReferenceSelectProps> {
 		return (
 			<Components.RelativeArea>
 				{showConcreteValue && (
-					<>
+					<HoverReveal>
 						{this.props.children}
-						<Components.LinkIcon onClick={e => this.handleConnect(e)} />
-					</>
+						<PositionedLinkIcon
+							onClick={e => this.handleConnect(e)}
+							position={props.iconPosition || IconPosition.Default}
+						/>
+					</HoverReveal>
 				)}
 				{showPropertySelect &&
 					userStoreReference && (