import React from 'react'; import ReactDOM from 'react-dom'; import moment from 'moment-timezone' import {RetinaImg} from 'nylas-component-kit' import {PLUGIN_ID} from '../scheduler-constants' import ProposedTimeList from './proposed-time-list' import EventDatetimeInput from './event-datetime-input' import { Utils, Calendar, AccountStore, DatabaseStore} from 'nylas-exports'; export default class NewEventCard extends React.Component { static displayName = 'NewEventCard'; static propTypes = { event: React.PropTypes.object.isRequired, draft: React.PropTypes.object.isRequired, onChange: React.PropTypes.func.isRequired, onRemove: React.PropTypes.func.isRequired, onParticipantsClick: React.PropTypes.func.isRequired, }; constructor(props) { super(props); this._mounted = false; this.state = { expanded: false, calendars: [], }; } componentDidMount() { this._mounted = true; const email = this.props.draft.from[0].email this._loadCalendarsForEmail(email); this._updateTextarea() } componentWillReceiveProps(newProps) { const email = newProps.draft.from[0].email this._loadCalendarsForEmail(email); } componentDidUpdate() { this._updateTextarea() } componentWillUnmount() { this._mounted = false; } _loadCalendarsForEmail(email) { if (this._lastEmail === email) { return } this._lastEmail = email const account = AccountStore.accountForEmail(email); DatabaseStore.findAll(Calendar, {accountId: account.id}) .then((calendars) => { if (!this._mounted || !calendars) { return } this.setState({calendars: calendars.filter(c => !c.readOnly)}) }); } _renderIcon(name) { return ( ) } _renderParticipants() { return this.props.draft.participants().map(r => r.displayName()).join(", ") } _renderCalendarPicker() { if (this.state.calendars.length <= 1) { return false; } const calOpts = this.state.calendars.map(cal => ); const onChange = (e) => {this.props.onChange({calendarId: e.target.value})} return (
{this._renderIcon("ic-eventcard-calendar@2x.png")}
) } _onProposeTimes = () => { NylasEnv.newWindow({ title: "Calendar", windowType: "calendar", windowProps: { draftClientId: this.props.draft.clientId, }, }); } _renderTimePicker() { const metadata = this.props.draft.metadataForPluginId(PLUGIN_ID); if (metadata && metadata.proposals) { return } return (
{this._renderIcon("ic-eventcard-time@2x.png")} this.props.onChange({start: date}) } /> - this.props.onChange({end: date}) } /> {moment().tz(Utils.timeZone).format("z")}
) } _renderSuggestPrompt() { const metadata = this.props.draft.metadataForPluginId(PLUGIN_ID); if (metadata && metadata.proposals) { return (
Select different times…
) } return (
or: Suggest several times…
) } _onBlurTitle = (event) => { this._focusedTitle = false; if ((event.target.value || '').length === 0) { this.props.onChange({title: this.props.draft.subject}); } } _updateTextarea() { if (!this.refs.description) { return } const el = ReactDOM.findDOMNode(this.refs.description); el.style.height = `auto`; el.style.height = `${Math.max(el.scrollHeight, 67)}px`; document.activeElement.scrollIntoViewIfNeeded() } render() { let title = this.props.event.title; if ((title || '').length === 0 && !this._focusedTitle) { title = this.props.draft.subject; } return (
{this._renderIcon("ic-eventcard-description@2x.png")} {this._focusedTitle = true}} onBlur={this._onBlurTitle} onChange={e => this.props.onChange({title: e.target.value}) } />
{this._renderTimePicker()} {this._renderSuggestPrompt()} {this._renderCalendarPicker()}
{this._renderIcon("ic-eventcard-people@2x.png")}
{this._renderParticipants()}
{this._renderIcon("ic-eventcard-location@2x.png")} this.props.onChange({location: e.target.value}) } />
{this._renderIcon("ic-eventcard-notes@2x.png")}