fix: restore asset property functionality

meetalva · May 24, 2018 · e704609 · e704609
1 parent 72bc83c
commit e704609
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 32 deletions.
diff --git a/src/components/property-items/asset-item/index.tsx b/src/components/property-items/asset-item/index.tsx
@@ -7,14 +7,20 @@ import styled from 'styled-components';
 
 export interface AssetItemProps {
 	className?: string;
-	imageSrc?: string;
+	imageSrc: string;
+	inputType: AssetPropertyInputType;
 	inputValue?: string;
 	label: string;
 	onChooseClick?: React.MouseEventHandler<HTMLButtonElement>;
 	onClearClick?: React.MouseEventHandler<HTMLButtonElement>;
 	onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
 }
 
+export enum AssetPropertyInputType {
+	File,
+	Url
+}
+
 const StyledAssetItem = styled.div`
 	width: 100%;
 `;
@@ -55,20 +61,30 @@ const StyledInput = styled.input`
 	}
 `;
 
-const StyledImageBox = styled.div`
-	box-sizing: border-box;
-	border-radius: 3px;
-	width: 42px;
-	height: 42px;
+const StyledImageBoxContainer = styled.div`
 	background-color: ${colors.white.toString()};
+	border-radius: 3px;
 	border: 0.5px solid ${colors.grey90.toString()};
-	padding: 3px;
-	margin-right: 6px;
+	box-sizing: border-box;
 	flex-shrink: 0;
+	height: 42px;
+	margin-right: 6px;
+	padding: 3px;
+	width: 42px;
+`;
+
+const StyledImageBox = styled.div`
+	display: flex;
+	box-sizing: border-box;
+	overflow: hidden;
+	width: 100%;
+	height: 100%;
 `;
 
 const StyledImage = styled.img`
 	width: 100%;
+	object-fit: cover;
+	object-position: center;
 `;
 
 const StyledButton = styled.button`
@@ -85,19 +101,34 @@ export const AssetItem: React.StatelessComponent<AssetItemProps> = props => (
 		<label>
 			<PropertyLabel label={props.label} />
 			<StyledPreview>
-				<StyledImageBox>
-					<StyledImage src={props.imageSrc} />
-				</StyledImageBox>
-				<StyledInput
-					onChange={props.onInputChange}
-					type="textarea"
-					value={props.inputValue}
-					placeholder="Enter external URL"
-				/>
+				<StyledImageBoxContainer>
+					<StyledImageBox>
+						{props.imageSrc && <StyledImage src={props.imageSrc} />}
+					</StyledImageBox>
+				</StyledImageBoxContainer>
+				{props.inputType === AssetPropertyInputType.Url && (
+					<StyledInput
+						onChange={props.onInputChange}
+						type="textarea"
+						value={props.inputValue}
+						placeholder="Enter external URL"
+					/>
+				)}
+				{props.inputType === AssetPropertyInputType.File && (
+					<>
+						<StyledButton onClick={props.onChooseClick}>Choose ...</StyledButton>
+						<StyledButton disabled={props.imageSrc.length === 0} onClick={props.onClearClick}>
+							Clear
+						</StyledButton>
+					</>
+				)}
 			</StyledPreview>
 		</label>
-		<StyledButton onClick={props.onChooseClick}>Choose...</StyledButton>
-		<StyledButton onClick={props.onClearClick}>Clear</StyledButton>
+		{props.inputType === AssetPropertyInputType.Url && (
+			<>
+				<StyledButton onClick={props.onChooseClick}>Choose ...</StyledButton>
+			</>
+		)}
 	</StyledAssetItem>
 );
 

diff --git a/src/container/property-list/property-list.tsx b/src/container/property-list/property-list.tsx
@@ -1,9 +1,12 @@
+import * as Sender from '../../message/client';
 import * as Component from '../../components';
+import { ServerMessageType } from '../../message';
 import * as MobxReact from 'mobx-react';
 import { ElementProperty, PatternEnumProperty } from '../../model';
 import * as React from 'react';
 import { ViewStore } from '../../store';
-import { PatternPropertyType as P } from '../../model/types';
+import * as Types from '../../model/types';
+import * as uuid from 'uuid';
 
 @MobxReact.observer
 export class PropertyListContainer extends React.Component {
@@ -69,19 +72,44 @@ class PropertyViewContainer extends React.Component<PropertyViewContainerProps>
 		// - Object
 		// - StringArray
 		switch (type) {
-			case P.Asset: {
-				const value = property.getValue() as string | undefined;
-				const inputValue = value && !value.startsWith('data:') ? value : '';
+			case Types.PatternPropertyType.Asset: {
+				const imageSrc = (property.getValue() as string | undefined) || '';
+				const inputValue = imageSrc && !imageSrc.startsWith('data:') ? imageSrc : '';
+				const inputType =
+					imageSrc && imageSrc.startsWith('data:')
+						? Component.AssetPropertyInputType.File
+						: Component.AssetPropertyInputType.Url;
+
 				return (
 					<Component.AssetItem
 						{...base}
-						imageSrc={''}
+						imageSrc={imageSrc}
+						inputType={inputType}
 						inputValue={inputValue}
 						onInputChange={e => this.handleInputChange(e)}
+						onClearClick={() => property.setValue('')}
+						onChooseClick={() => {
+							const transactionId = uuid.v4();
+
+							Sender.receive(message => {
+								if (
+									message.type === ServerMessageType.AssetReadResponse &&
+									message.id === transactionId
+								) {
+									property.setValue(message.payload);
+								}
+							});
+
+							Sender.send({
+								id: transactionId,
+								payload: undefined,
+								type: ServerMessageType.AssetReadRequest
+							});
+						}}
 					/>
 				);
 			}
-			case P.Boolean: {
+			case Types.PatternPropertyType.Boolean: {
 				const value = property.getValue() as boolean;
 				return (
 					<Component.BooleanItem
@@ -91,7 +119,7 @@ class PropertyViewContainer extends React.Component<PropertyViewContainerProps>
 					/>
 				);
 			}
-			case P.Enum: {
+			case Types.PatternPropertyType.Enum: {
 				const value = property.getValue() as string;
 				const patternProperty = property.getPatternProperty() as PatternEnumProperty;
 				const selectedOption = patternProperty.getOptionByValue(value);
@@ -109,7 +137,7 @@ class PropertyViewContainer extends React.Component<PropertyViewContainerProps>
 					/>
 				);
 			}
-			case P.String: {
+			case Types.PatternPropertyType.String: {
 				const value = property.getValue() as string | undefined;
 				return (
 					<Component.StringItem

diff --git a/src/message/client.ts b/src/message/client.ts
@@ -1,4 +1,4 @@
-import { ipcRenderer } from 'electron';
+import * as Electron from 'electron';
 import { isMessage } from './is-message';
 import { ServerMessage } from '.';
 
@@ -10,12 +10,11 @@ export function send(message: ServerMessage): void {
 		console.warn(`Client tried to send invalid message: ${JSON.stringify(message)}`);
 		return;
 	}
-	ipcRenderer.send('message', message);
+	Electron.ipcRenderer.send('message', message);
 }
 
 export function receive(handler: (message: ServerMessage) => void): void {
-	// tslint:disable-next-line:no-any
-	ipcRenderer.on('message', (e: any, message: any) => {
+	Electron.ipcRenderer.on('message', (e: Electron.Event, message) => {
 		if (!isMessage(message)) {
 			return;
 		}

diff --git a/src/preview/preview-renderer.tsx b/src/preview/preview-renderer.tsx
@@ -93,7 +93,8 @@ const Box: React.SFC = (props: any) => {
 const SYNTHETICS = {
 	box: Box,
 	page: Page,
-	placeholder: props => <img src={props.src} style={{ width: '100%', height: 'auto' }} />,
+	placeholder: props =>
+		props.src ? <img src={props.src} style={{ width: '100%', height: 'auto' }} /> : null,
 	text: props => <span>{props.text}</span>
 };