acklen-keystone/fields/types/embedly/EmbedlyField.js

Web Application Framework and Admin GUI / Content Management System built on Express.js and Mongoose

import React from 'react';
import Field from '../Field';
import { FormField, FormInput } from '../../../admin/client/App/elemental';
import ImageThumbnail from '../../components/ImageThumbnail';
import NestedFormField from '../../components/NestedFormField';

module.exports = Field.create({

	displayName: 'EmbedlyField',
	statics: {
		type: 'Embedly',
		getDefaultValue: () => ({}),
	},

	// always defers to renderValue; there is no form UI for this field
	renderField () {
		return this.renderValue();
	},

	renderValue (path, label, multiline) {
		return (
			<NestedFormField key={path} label={label}>
				<FormInput noedit multiline={multiline}>{this.props.value[path]}</FormInput>
			</NestedFormField>
		);
	},
	renderAuthor () {
		if (!this.props.value.authorName) return;
		return (
			<NestedFormField key="author" label="Author">
				<FormInput noedit href={this.props.value.authorUrl && this.props.value.authorUrl} target="_blank">{this.props.value.authorName}</FormInput>
			</NestedFormField>
		);
	},
	renderDimensions () {
		if (!this.props.value.width || !this.props.value.height) return;
		return (
			<NestedFormField key="dimensions" label="Dimensions">
				<FormInput noedit>{this.props.value.width} &times; {this.props.value.height}px</FormInput>
			</NestedFormField>
		);
	},
	renderPreview () {
		if (!this.props.value.thumbnailUrl) return;

		var image = <img width={this.props.value.thumbnailWidth} height={this.props.value.thumbnailHeight} src={this.props.value.thumbnailUrl} />;

		var preview = this.props.value.url ? (
			<ImageThumbnail component="a" href={this.props.value.url} target="_blank">
				{image}
			</ImageThumbnail>
		) : (
			<ImageThumbnail>{image}</ImageThumbnail>
		);

		return (
			<NestedFormField label="Preview">
				{preview}
			</NestedFormField>
		);
	},

	renderUI () {
		if (!this.props.value.exists) {
			return (
				<FormField label={this.props.label}>
					<FormInput noedit>(not set)</FormInput>
				</FormField>
			);
		}
		return (
			<div>
				<FormField key="provider" label={this.props.label}>
					<FormInput noedit>{this.props.value.providerName} {this.props.value.type}</FormInput>
				</FormField>
				{this.renderValue('title', 'Title')}
				{this.renderAuthor()}
				{this.renderValue('description', 'Description', true)}
				{this.renderPreview()}
				{this.renderDimensions()}
			</div>
		);
	},

});