fix: restore enum properties

meetalva · May 24, 2018 · b60b0bb · b60b0bb
1 parent e2553b0
commit b60b0bb
Show file tree

Hide file tree

Showing 14 changed files with 389 additions and 104 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -111,6 +111,7 @@
     "@types/object-path": "0.9.29",
     "@types/react": "16.3.10",
     "@types/react-dom": "16.0.5",
+    "@types/react-helmet": "5.0.6",
     "@types/smoothscroll-polyfill": "0.3.0",
     "@types/username": "3.0.0",
     "@types/uuid": "3.4.3",
@@ -159,6 +160,7 @@
     "query-string": "6.0.0",
     "react": "16.3.1",
     "react-dom": "16.3.1",
+    "react-helmet": "5.2.0",
     "react-router": "4.2.0",
     "readts": "0.2.0",
     "smoothscroll-polyfill": "0.4.3",

diff --git a/src/container/property-list/property-list.tsx b/src/container/property-list/property-list.tsx
@@ -1,7 +1,7 @@
 import * as Component from '../../components';
 import * as MobxReact from 'mobx-react';
 import * as React from 'react';
-import { ElementProperty, ViewStore } from '../../store';
+import { ElementProperty, PatternEnumProperty, ViewStore } from '../../store';
 import { PatternPropertyType as P } from '../../store/types';
 
 @MobxReact.observer
@@ -79,10 +79,19 @@ class PropertyViewContainer extends React.Component<PropertyViewContainerProps>
 				);
 			}
 			case P.Enum: {
+				const value = property.getValue() as string;
+				const patternProperty = property.getPatternProperty() as PatternEnumProperty;
+				const selectedOption = patternProperty.getOptionById(value);
+				const selectedValue = selectedOption ? selectedOption.getId() : undefined;
+
 				return (
 					<Component.EnumItem
 						{...base}
-						values={[]}
+						selectedValue={selectedValue}
+						values={patternProperty.getOptions().map(option => ({
+							id: option.getId(),
+							name: option.getName()
+						}))}
 						onChange={e => this.handleInputChange(e)}
 					/>
 				);

diff --git a/src/preview/preview-renderer.tsx b/src/preview/preview-renderer.tsx
@@ -5,6 +5,7 @@ import * as MobXReact from 'mobx-react';
 import { PreviewStore } from './preview';
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
+import { Helmet } from 'react-helmet';
 import * as Types from '../store/types';
 
 // TODO: Produces a deprecation warning, find a way
@@ -50,8 +51,20 @@ interface ErrorMessageProps {
 	patternName: string;
 }
 
+// tslint:disable-next-line:no-any
+const Page: React.SFC = (props: any) => (
+	<>
+		<Helmet>
+			<html lang={props.lang} />
+			{props.viewport && <meta name="viewport" content="width=device-width, initical-scale=1" />}
+			{props.head}
+		</Helmet>
+		{props.children}
+	</>
+);
+
 const SYNTHETICS = {
-	page: props => <>{props.children}</>,
+	page: Page,
 	placeholder: props => <img src={props.src} style={{ width: '100%', height: 'auto' }} />,
 	text: props => <span>{props.text}</span>
 };

diff --git a/src/preview/preview.tsx b/src/preview/preview.tsx
@@ -297,7 +297,19 @@ function createPropertiesGetter(
 ): (properties: Types.SerializedElementProperty[]) => any {
 	return properties =>
 		properties.reduce((acc, property) => {
-			acc[property.patternProperty.propertyName] = property.value;
+			const { patternProperty } = property;
+			const { propertyName } = patternProperty;
+
+			switch (patternProperty.type) {
+				case 'enum': {
+					const option = patternProperty.options.find(o => o.id === property.value);
+					acc[propertyName] = option ? option.value : undefined;
+					break;
+				}
+				default:
+					acc[propertyName] = property.value;
+			}
+
 			return acc;
 		}, {});
 }

diff --git a/src/store/element/element-property/element-property.ts b/src/store/element/element-property/element-property.ts
@@ -52,6 +52,10 @@ export class ElementProperty {
 		return this.patternProperty.getLabel();
 	}
 
+	public getPatternProperty(): PatternProperty {
+		return this.patternProperty;
+	}
+
 	public getType(): PatternPropertyType {
 		return this.patternProperty.getType();
 	}

diff --git a/src/store/pattern-property/enum-property.ts b/src/store/pattern-property/enum-property.ts
@@ -1,6 +1,10 @@
-import { PatternProperty, PatternPropertyType } from './property';
+import { PatternProperty, PatternPropertyInit, PatternPropertyType } from './property';
 import * as Types from '../types';
 
+export interface PatternEnumPropertyInit extends PatternPropertyInit {
+	options: PatternEnumPropertyOption[];
+}
+
 /**
  * An enum property is a property that supports the elements of a given enum only, and undefined.
  * As designer content value (raw value), the property accepts the option ID (JavaScript name),
@@ -11,34 +15,29 @@ import * as Types from '../types';
  * @see Property
  */
 export class PatternEnumProperty extends PatternProperty {
-	/**
-	 * The options supported by this enum.
-	 */
-	private options: Option[];
-
-	/**
-	 * A lookup to get the option ordinal (assigned number value) from an option ID.
-	 */
-	private ordinalById: { [id: string]: number } = {};
+	private options: PatternEnumPropertyOption[];
 
 	public readonly type = PatternPropertyType.Enum;
 
+	public constructor(init: PatternEnumPropertyInit) {
+		super(init);
+		this.options = init.options;
+	}
+
 	public static from(
 		serializedProperty: Types.SerializedPatternEnumProperty
 	): PatternEnumProperty {
-		const property = new PatternEnumProperty({
+		return new PatternEnumProperty({
 			hidden: serializedProperty.hidden,
 			defaultValue: serializedProperty.defaultValue,
 			id: serializedProperty.id,
 			label: serializedProperty.label,
+			options: serializedProperty.options.map(serializedOption =>
+				PatternEnumPropertyOption.from(serializedOption)
+			),
 			propertyName: serializedProperty.propertyName,
 			required: serializedProperty.required
 		});
-
-		property.setOptions(
-			serializedProperty.options.map(serializedOption => Option.from(serializedOption))
-		);
-		return property;
 	}
 
 	/**
@@ -72,49 +71,23 @@ export class PatternEnumProperty extends PatternProperty {
 		return String(value);
 	}
 
-	/**
-	 * @inheritdoc
-	 */
-	// tslint:disable-next-line:no-any
-	public convertToRender(value: any): any {
-		return this.ordinalById[value as string];
-	}
-
 	/**
 	 * Returns the option ordinal (assigned number value) for a given option ID.
 	 * @param id The option ID.
 	 * @return The ordinal if an option with this ID exists.
 	 */
-	public getOptionById(id: string): Option | undefined {
-		for (const option of this.options) {
-			if (option.getId() === id) {
-				return option;
-			}
-		}
-
-		return;
+	public getOptionById(id: string): PatternEnumPropertyOption | undefined {
+		return this.options.find(option => option.getId() === id);
 	}
 
 	/**
 	 * Returns the options supported by this enum.
 	 * @return The options supported by this enum.
 	 */
-	public getOptions(): Option[] {
+	public getOptions(): PatternEnumPropertyOption[] {
 		return this.options;
 	}
 
-	/**
-	 * Sets the options supported by this enum.<br>
-	 * <b>Note:</b> This method should only be called from the pattern parsers.
-	 * @param options The options supported by this enum.
-	 */
-	public setOptions(options: Option[]): void {
-		this.options = options;
-		this.options.forEach((option: Option) => {
-			this.ordinalById[option.getId()] = option.getOrdinal();
-		});
-	}
-
 	public toJSON(): Types.SerializedPatternEnumProperty {
 		return {
 			hidden: this.hidden,
@@ -129,19 +102,28 @@ export class PatternEnumProperty extends PatternProperty {
 	}
 }
 
-export class Option {
+export interface PatternEnumPropertyOptionInit {
+	id: string;
+	name: string;
+	ordinal: number;
+	value: string;
+}
+
+export class PatternEnumPropertyOption {
 	private id: string;
 	private name: string;
 	private ordinal: number;
+	private value: string;
 
-	public constructor(id: string, name?: string, ordinal?: number) {
-		this.id = id;
-		this.name = name !== undefined ? name : id;
-		this.ordinal = ordinal !== undefined ? ordinal : 0;
+	public constructor(init: PatternEnumPropertyOptionInit) {
+		this.id = init.id;
+		this.name = init.name;
+		this.ordinal = init.ordinal;
+		this.value = init.value;
 	}
 
-	public static from(serializedOption: Types.SerializedEnumOption): Option {
-		return new Option(serializedOption.id, serializedOption.name, serializedOption.ordinal);
+	public static from(serialized: Types.SerializedEnumOption): PatternEnumPropertyOption {
+		return new PatternEnumPropertyOption(serialized);
 	}
 
 	public getId(): string {
@@ -156,11 +138,16 @@ export class Option {
 		return this.ordinal;
 	}
 
+	public getValue(): string {
+		return this.value;
+	}
+
 	public toJSON(): Types.SerializedEnumOption {
 		return {
 			id: this.id,
 			name: this.name,
-			ordinal: this.ordinal
+			ordinal: this.ordinal,
+			value: this.value
 		};
 	}
 }
diff --git a/src/store/styleguide/index.ts b/src/store/styleguide/index.ts
@@ -0,0 +1 @@
+export * from './styleguide';