{
+ const {dateOptions} = this.props
+ const date = dateOptions[optionKey]();
+ this.refs.dateInput.clearInput()
+ this.selectDate(date, optionKey);
+ };
+
+ onCustomDateInterpreted = (date) => {
+ const {shouldSelectDateWhenInterpreted} = this.props
+ if (date && shouldSelectDateWhenInterpreted) {
+ this.refs.menu.clearSelection()
+ this.selectDate(date, "Custom");
+ }
+ }
+
+ onCustomDateSelected = (date, inputValue) => {
+ if (date) {
+ this.refs.menu.clearSelection()
+ this.selectDate(date, "Custom");
+ } else {
+ NylasEnv.showErrorDialog(`Sorry, we can't interpret ${inputValue} as a valid date.`);
+ }
+ };
+
+ selectDate = (date, dateLabel) => {
+ const formatted = DateUtils.format(date.utc());
+ this.props.onSelectDate(formatted, dateLabel);
+ };
+
+ renderMenuOption = (optionKey) => {
+ const {dateOptions} = this.props
+ const date = dateOptions[optionKey]();
+ const formatted = DateUtils.format(date, DATE_FORMAT_SHORT);
+ return (
+
+ {optionKey}
+ {formatted}
+
+ );
+ }
+
+ render() {
+ const {className, header, footer, dateOptions} = this.props
+
+ let footerComponents = [
+
,
+
,
+ ]
+ if (footer) {
+ if (Array.isArray(footer)) {
+ footerComponents = footerComponents.concat(footer)
+ } else {
+ footerComponents = footerComponents.concat([footer])
+ }
+ }
+
+ return (
+
+
+ );
+ }
+}
+
+export default DatePickerPopover
diff --git a/src/components/decorators/listens-to-observable.jsx b/src/components/decorators/listens-to-observable.jsx
index be2c173fd..1a8b20c7c 100644
--- a/src/components/decorators/listens-to-observable.jsx
+++ b/src/components/decorators/listens-to-observable.jsx
@@ -6,10 +6,10 @@ function ListensToObservable(ComposedComponent, {getObservable, getStateFromObse
static containerRequired = ComposedComponent.containerRequired;
- constructor() {
- super()
- this.state = getStateFromObservable()
- this.observable = getObservable()
+ constructor(props) {
+ super(props)
+ this.state = getStateFromObservable(null, {props})
+ this.observable = getObservable(props)
}
componentDidMount() {
@@ -24,7 +24,7 @@ function ListensToObservable(ComposedComponent, {getObservable, getStateFromObse
onObservableChanged = (data) => {
if (this.unmounted) return;
- this.setState(getStateFromObservable(data))
+ this.setState(getStateFromObservable(data, {props: this.props}))
};
render() {
diff --git a/src/components/mail-label-set.jsx b/src/components/mail-label-set.jsx
index 5b40b4395..830b7d26e 100644
--- a/src/components/mail-label-set.jsx
+++ b/src/components/mail-label-set.jsx
@@ -15,6 +15,7 @@ export default class MailLabelSet extends React.Component {
static propTypes = {
thread: React.PropTypes.object.isRequired,
+ messages: React.PropTypes.array,
includeCurrentCategories: React.PropTypes.bool,
removable: React.PropTypes.bool,
};
@@ -28,7 +29,7 @@ export default class MailLabelSet extends React.Component {
}
render() {
- const {thread, includeCurrentCategories} = this.props;
+ const {thread, messages, includeCurrentCategories} = this.props;
const labels = [];
if (AccountStore.accountForId(thread.accountId).usesLabels()) {
@@ -73,7 +74,7 @@ export default class MailLabelSet extends React.Component {
containersRequired={false}
matching={{role: "Thread:MailLabel"}}
className="thread-injected-mail-labels"
- exposedProps={{thread: thread}}
+ exposedProps={{thread, messages}}
>
{labels}
diff --git a/src/components/menu.cjsx b/src/components/menu.cjsx
index 4a00edfff..59bcfe897 100644
--- a/src/components/menu.cjsx
+++ b/src/components/menu.cjsx
@@ -12,17 +12,20 @@ MenuItem's props allow you to display dividers as well as standard items.
Section: Component Kit
###
class MenuItem extends React.Component
+
@displayName = 'MenuItem'
###
Public: React `props` supported by MenuItem:
+ - `index`: {Number} of the index of the current menu item
- `divider` (optional) Pass a {Boolean} to render the menu item as a section divider.
- `key` (optional) Pass a {String} to be the React key to optimize rendering lists of items.
- `selected` (optional) Pass a {Boolean} to specify whether the item is selected.
- `checked` (optional) Pass a {Boolean} to specify whether the item is checked.
###
@propTypes:
+ index: React.PropTypes.number.isRequired
divider: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.bool])
selected: React.PropTypes.bool
checked: React.PropTypes.bool
@@ -140,8 +143,8 @@ class Menu extends React.Component
###
@propTypes:
className: React.PropTypes.string,
- footerComponents: React.PropTypes.arrayOf(React.PropTypes.element),
- headerComponents: React.PropTypes.arrayOf(React.PropTypes.element),
+ footerComponents: React.PropTypes.node,
+ headerComponents: React.PropTypes.node,
itemContext: React.PropTypes.object,
itemContent: React.PropTypes.func.isRequired,
itemKey: React.PropTypes.func.isRequired,
@@ -159,6 +162,7 @@ class Menu extends React.Component
onEscape: ->
constructor: (@props) ->
+ @_mounted = false
@state =
selectedIndex: @props.defaultSelectedIndex ? 0
@@ -167,6 +171,18 @@ class Menu extends React.Component
getSelectedItem: =>
@props.items[@state.selectedIndex]
+ # TODO this is a hack, refactor
+ clearSelection: =>
+ setImmediate(=>
+ return if @_mounted is false
+ @setState({selectedIndex: -1})
+ )
+
+ componentDidMount: =>
+ @_mounted = true
+
+ componentWillUnmount: =>
+ @_mounted = false
componentWillReceiveProps: (newProps) =>
# Attempt to preserve selection across props.items changes by
@@ -194,12 +210,11 @@ class Menu extends React.Component
container.scrollTop += adjustment
render: =>
- hc = @props.headerComponents ? []
- if hc.length is 0 then hc =
- fc = @props.footerComponents ? []
- if fc.length is 0 then fc =
+ hc = @props.headerComponents ?
+ fc = @props.footerComponents ?
+ className = if @props.className then @props.className else ''
{hc}
@@ -236,7 +251,9 @@ class Menu extends React.Component
onMouseDown = (event) =>
event.preventDefault()
- @props.onSelect(item) if @props.onSelect
+ @setState({selectedIndex: i}, =>
+ @props.onSelect(item) if @props.onSelect
+ )
key = @props.itemKey(item)
if not key
@@ -246,6 +263,7 @@ class Menu extends React.Component
seenItemKeys[key] = item