acklen-keystone/admin/client/App/screens/Item/components/EditFormHeader.js

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

import React from 'react';
import { findDOMNode } from 'react-dom';
import { browserHistory } from 'react-router';
import { connect } from 'react-redux';

import Toolbar from './Toolbar';
import ToolbarSection from './Toolbar/ToolbarSection';
import EditFormHeaderSearch from './EditFormHeaderSearch';
import { Link } from 'react-router';

import Drilldown from './Drilldown';
import { GlyphButton, ResponsiveText, Grid } from '../../../elemental';

export const EditFormHeader = React.createClass({
	displayName: 'EditFormHeader',
	propTypes: {
		data: React.PropTypes.object,
		list: React.PropTypes.object,
		toggleCreate: React.PropTypes.func,
	},
	getInitialState () {
		return {
			searchString: '',
		};
	},
	toggleCreate (visible) {
		this.props.toggleCreate(visible);
	},
	searchStringChanged (event) {
		this.setState({
			searchString: event.target.value,
		});
	},
	handleEscapeKey (event) {
		const escapeKeyCode = 27;

		if (event.which === escapeKeyCode) {
			findDOMNode(this.refs.searchField).blur();
		}
	},
	renderDrilldown () {
		return (
			<ToolbarSection left>
				{this.renderDrilldownItems()}
				{this.renderSearch()}
			</ToolbarSection>
		);
	},
	renderDrilldownItems () {
		const { data, list } = this.props;
		const items = data.drilldown ? data.drilldown.items : [];

		let backPath = `${Keystone.adminPath}/${list.path}`;
		const backStyles = { paddingLeft: 0, paddingRight: 0 };
		// Link to the list page the user came from
		if (this.props.listActivePage && this.props.listActivePage > 1) {
			backPath = `${backPath}?page=${this.props.listActivePage}`;
		}

		// return a single back button when no drilldown exists
		if (!items.length) {
			return (
				<GlyphButton
					component={Link}
					data-e2e-editform-header-back
					glyph="chevron-left"
					position="left"
					style={backStyles}
					to={backPath}
					variant="link"
					>
					{list.plural}
				</GlyphButton>
			);
		}

		// prepare the drilldown elements
		const drilldown = [];
		items.forEach((item, idx) => {
			// FIXME @jedwatson
			// we used to support relationships of type MANY where items were
			// represented as siblings inside a single list item; this got a
			// bit messy...
			item.items.forEach(link => {
				drilldown.push({
					href: link.href,
					label: link.label,
					title: item.list.singular,
				});
			});
		});

		// add the current list to the drilldown
		drilldown.push({
			href: backPath,
			label: list.plural,
		});

		return (
			<Drilldown items={drilldown} />
		);
	},
	renderSearch () {
		var list = this.props.list;
		return (
			<form action={`${Keystone.adminPath}/${list.path}`} className="EditForm__header__search">
				<EditFormHeaderSearch
					value={this.state.searchString}
					onChange={this.searchStringChanged}
					onKeyUp={this.handleEscapeKey}
				/>
				{/* <GlyphField glyphColor="#999" glyph="search">
					<FormInput
						ref="searchField"
						type="search"
						name="search"
						value={this.state.searchString}
						onChange={this.searchStringChanged}
						onKeyUp={this.handleEscapeKey}
						placeholder="Search"
						style={{ paddingLeft: '2.3em' }}
					/>
				</GlyphField> */}
			</form>
		);
	},
	renderInfo () {
		return (
			<ToolbarSection right>
				{this.renderCreateButton()}
			</ToolbarSection>
		);
	},
	renderButton (props, gridCol, buttonLabelHiddenXs, buttonLabelXs, icon, versionLabel) {
		return (<Grid.Col large={gridCol} medium={gridCol} small={gridCol} color="success">
			<div className="versions-label">
				{versionLabel || ''}
			</div>
			<GlyphButton data-e2e-item-create-button="true" color="default" position="left" glyph={icon} {...props}>
				<ResponsiveText hiddenXS={buttonLabelHiddenXs} visibleXS={buttonLabelXs} />
			</GlyphButton>
		</Grid.Col>);
	},
	renderCreateButton () {
		const { slug } = this.props.data.fields;
		const { nocreate, autocreate, singular, id } = this.props.list;
		const isPageBuilder = id.indexOf('page-builder') > -1;
		const isModelVersion = id.indexOf('versions') > -1;
		const versionId = this.props.data.id;
		let versionParams = '';
		let gridCol = 'one-third';
		let versionLabel = 'CURRENT';

		if (nocreate) return null;

		const hrefVersions = {
			onClick: () =>
				browserHistory.push(`/keystone/page-builder-versions?filters=`
				+ encodeURIComponent(`[{"path":"modelId","inverted":false,"value":["${versionId}"]}]`)),
		};
		if (isModelVersion) {
			versionParams = `?id=${versionId}&preview=true`;
			gridCol = 'one-half';
			versionLabel = 'VERSIONS';
		}
		const hrefPreview = {
			onClick: () => window.open(`${Keystone.frontendHostName}/${slug}${versionParams}`, '_blank'),
		};
		let props = {};
		if (autocreate) {
			props.href = '?new' + Keystone.csrf.query;
		} else {
			props.onClick = () => { this.toggleCreate(true); };
		}

		return (
			<Grid.Row>
				{
					isPageBuilder
					&& this.renderButton(hrefPreview, gridCol, 'Preview', 'Preview', 'link-external', versionLabel)
				}
				{
					isPageBuilder && !isModelVersion
					&& this.renderButton(hrefVersions, gridCol, 'Versions', 'Versions', 'versions')
				}
				{
					!(isPageBuilder && isModelVersion)
					&& this.renderButton(props, gridCol, `New ${singular}`, 'Create', 'plus')
				}
			</Grid.Row>
		);
	},
	render () {
		return (
			<Toolbar>
				{this.renderDrilldown()}
				{this.renderInfo()}
			</Toolbar>
		);
	},
});

export default connect((state) => ({
	listActivePage: state.lists.page.index,
}))(EditFormHeader);