hippo-fw 0.9.8 → 0.9.9

data/client/hippo/boot.jsx

@@ -41,7 +41,7 @@ whenDomReady().then(() => {
         console.warn(`The model for ${model.identifiedBy}(${property}) cannot be found`);
     });
 
-    const loading = document.querySelector('.loading');
+    const loading = document.querySelector('.hippo-app-loading');
     if (loading) {
         loading.classList.add('complete');
         delay(() => {

data/client/hippo/components/asset.jsx

@@ -14,7 +14,7 @@ import { BaseModel } from '../models/base';
 import './asset.scss';
 
 @observer
-export default class Asset extends React.PureComponent {
+export default class Asset extends React.Component {
 
     static defaultProps = {
         label: '',

data/client/hippo/components/asset.scss

@@ -8,6 +8,7 @@
             padding: 0.5rem;
             cursor: pointer;
             overflow: auto;
+            -webkit-overflow-scrolling: touch;
             &-active {
                 background-color: $selected-background-color;
             }

data/client/hippo/components/data-table.jsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { pick, extend, defaults, map, bindAll, partial, toInteger, isNumber } from 'lodash';
+import { pick, extend, defaults, map, partial, toInteger, isNumber } from 'lodash';
 import { defaultTableRowRenderer, Table, InfiniteLoader, AutoSizer, Column } from 'react-virtualized';
 import { action, computed, observable, autorun } from 'mobx';
 import { observer } from 'mobx-react';
+import { autobind } from 'core-decorators';
 import cn from 'classnames';
-
+import 'react-virtualized/styles.css';
 import NextIcon from 'grommet/components/icons/base/CaretNext';
 import Button   from 'grommet/components/Button';
-
-import 'react-virtualized/styles.css';
+import ActivityOverlay from './network-activity-overlay';
 import './data-table/table-styles.scss';
 
 import Query from '../models/query';
@@ -42,33 +42,29 @@ export default class DataTable extends React.Component {
         editRowIndex: PropTypes.number,
     }
 
-    @observable editIndex;
-    @observable query;
-
-    constructor(props) {
-        super(props);
-        this.query = props.query;
-        bindAll(this,
-            'rowRenderer',
-            'rowAtIndex',
-            'calculateRowHeight',
-            'isRowLoaded',
-            'loadMoreRows',
-            'headerRenderer');
-        this.editIndex = props.editRowIndex;
-        autorun(() => {
+    @observable editIndex = this.props.editRowIndex;
+
+    componentWillReceiveProps(nextProps) {
+        this.editIndex = nextProps.editRowIndex;
+    }
+
+    componentWillMount() {
+        this.query.open();
+        this.disposeRowHeightCalculator = autorun(() => {
             if (isNumber(this.editIndex) && this.tableRef) {
                 this.tableRef.recomputeRowHeights(this.editIndex);
             }
         });
     }
 
-    componentWillReceiveProps(nextProps) {
-        this.editIndex = nextProps.editRowIndex;
+    componentWillUnmount() {
+        this.disposeRowHeightCalculator();
+        this.query.close();
     }
 
-    componentWillMount() { this.query.open(); }
-    componentWillUnmount() { this.query.close(); }
+    get query() {
+        return this.props.query;
+    }
 
     get rowProps() {
         const props = {};
@@ -123,14 +119,14 @@ export default class DataTable extends React.Component {
     }
 
     @computed get columnDefinitions() {
-        const definitions = map(this.query.info.visibleFields, f =>
-            extend({
-                key: f.id,
-                columnData: f,
-                dataKey: f.dataIndex || f.id,
-                headerRenderer: this.headerRenderer,
-            }, pick(f, 'width', 'label', 'flexGrow', 'flexShrink',
-                'cellRenderer', 'className', 'headerClassName')));
+        const definitions = map(this.query.info.visibleFields, f => extend({
+            key: f.id,
+            columnData: f,
+            dataKey: f.dataIndex || f.id,
+            headerRenderer: this.headerRenderer,
+        }, pick(f, 'width', 'label', 'flexGrow', 'flexShrink',
+            'cellRenderer', 'className', 'headerClassName')));
+
         if (this.props.editor) {
             definitions.unshift({
                 key: 'edit-toggle',
@@ -151,15 +147,15 @@ export default class DataTable extends React.Component {
         }, this.props.styles);
     }
 
-    rowAtIndex({ index }) {
+    @autobind rowAtIndex({ index }) {
         return this.props.query.results.rows[index];
     }
 
-    calculateRowHeight({ index }) {
+    @autobind calculateRowHeight({ index }) {
         return (this.editIndex === index) ? this.props.editor.desiredHeight || 40 : 40;
     }
 
-    rowRenderer(props) {
+    @autobind rowRenderer(props) {
         const {
             index, className, key, style,
         } = props;
@@ -184,18 +180,18 @@ export default class DataTable extends React.Component {
         return defaultTableRowRenderer(props);
     }
 
-    headerRenderer({ columnData: field }) {
+    @autobind headerRenderer({ columnData: field }) {
         return <HeaderCell field={field} onAdd={this.props.canCreate ? this.onRowAdd : null} />;
     }
 
-    isRowLoaded({ index }) {
+    @autobind isRowLoaded({ index }) {
         return (
             (this.query.results.rows.length > index) &&
-                (this.query.results.isRowLoading(index) || this.query.results.rows[index])
+            (this.query.results.isRowLoading(index) || this.query.results.rows[index])
         );
     }
 
-    loadMoreRows({ startIndex: start, stopIndex }) {
+    @action.bound loadMoreRows({ startIndex: start, stopIndex }) {
         const limit = (stopIndex + 1) - start;
         return this.query.results.fetch({ start, limit });
     }
@@ -207,6 +203,8 @@ export default class DataTable extends React.Component {
                 className={cn('data-table', { selectable: this.props.onRowClick })}
                 style={this.wrapperStyles}
             >
+                <ActivityOverlay model={query.results} message="Loading…" />
+
                 <InfiniteLoader
                     keyChange={this.gridRenderKey}
                     minimumBatchSize={this.query.pageSize}

data/client/hippo/components/date-time.jsx

@@ -1,11 +1,14 @@
 import React from 'react';
+import { defaults, has, omit } from 'lodash';
+import { observable, action }  from 'mobx';
+import moment from 'moment-timezone';
 import PropTypes    from 'prop-types';
 import { observer } from 'mobx-react';
 import { autobind } from 'core-decorators';
 import Flatpickr    from 'flatpickr';
-import { defaults, has, omit } from 'lodash';
-import { observable, action }  from 'mobx';
 import './date-time.scss';
+import { isArrayLike } from '../lib/util';
+import DateRange from '../lib/date-range';
 
 const hooks = [
     'onOpen',
@@ -24,7 +27,7 @@ const defaultOptions = {
 };
 
 @observer
-export default class DateTimePicker extends React.PureComponent {
+export default class DateTimePicker extends React.Component {
 
     static propTypes = {
         defaultValue: PropTypes.string,
@@ -55,9 +58,7 @@ export default class DateTimePicker extends React.PureComponent {
     componentWillReceiveProps(props) {
         const options = this.getOptions(props);
 
-        if (has(props, 'value')) {
-            this.flatpickr.setDate(props.value, false);
-        }
+        this.setValueFromProps(props);
 
         const optionsKeys = Object.getOwnPropertyNames(options);
 
@@ -76,10 +77,18 @@ export default class DateTimePicker extends React.PureComponent {
     componentDidMount() {
         const options = this.getOptions(this.props);
         this.flatpickr = new Flatpickr(this.node, options);
+        this.setValueFromProps(this.props);
+    }
 
-        if (has(this.props, 'value')) {
-            this.flatpickr.setDate(this.props.value, false);
+    setValueFromProps(props) {
+        if (!has(props, 'value')) { return; }
+        let { value } = props;
+        if (value instanceof DateRange) { value = value.asArray; }
+        if (moment.isMoment(value)) { value = value.toDate(); }
+        if (isArrayLike(value)) {
+            value = value.map(v => (moment.isMoment(v) ? v.toDate() : v));
         }
+        this.flatpickr.setDate(value, false);
     }
 
     componentWillUnmount() {
@@ -94,7 +103,14 @@ export default class DateTimePicker extends React.PureComponent {
     @autobind onChange(dates) {
         if ('range' === this.props.options.mode) {
             if (2 === dates.length) {
-                this.props.onChange({ target: { value: dates } });
+                this.props.onChange({
+                    target: {
+                        value: [
+                            moment(dates[0]).startOf('day'),
+                            moment(dates[1]).endOf('day'),
+                        ],
+                    },
+                });
             }
         } else {
             this.props.onChange({ target: { value: dates[0] } });

data/client/hippo/components/form/api.js

@@ -159,6 +159,7 @@ export class FormState {
         } else {
             this.set(model);
         }
+        return model;
     }
 
     persistTo(model) {

data/client/hippo/components/form/fields.jsx

@@ -11,16 +11,17 @@ import { titleize } from '../../lib/util';
 import DateWrapper     from './fields/date-wrapper';
 import SelectWrapper   from './fields/select-wrapper';
 import TextWrapper     from './fields/text-wrapper';
+import EmailWrapper    from './fields/email-wrapper';
 import CheckBoxWrapper from './fields/checkbox-wrapper';
 import TagsWrapper     from './fields/tags-wrapper';
 import TextAreaWrapper from './fields/textarea-wrapper';
 import Label           from './fields/label';
 import TimeZoneSelect  from '../../components/time-zone-select';
 
-
 import './fields/form-field.scss';
 
 const TypesMapping = {
+    email:    EmailWrapper,
     text:     TextWrapper,
     date:     DateWrapper,
     tags:     TagsWrapper,
@@ -34,7 +35,7 @@ const TypesMapping = {
 
 @inject('formState')
 @observer
-export default class FormField extends React.PureComponent {
+export default class FormField extends React.Component {
 
     static propTypes = Object.assign({
         label: PropTypes.string,

data/client/hippo/components/form/fields/checkbox-wrapper.jsx

@@ -4,7 +4,7 @@ import { action } from 'mobx';
 import CheckBox from 'grommet/components/CheckBox';
 
 @observer
-export default class CheckBoxWrapper extends React.PureComponent {
+export default class CheckBoxWrapper extends React.Component {
 
     @action.bound onBlur(ev) {
         this.props.onBlur({ target: { value: ev.target.checked } });

data/client/hippo/components/form/fields/date-wrapper.jsx

@@ -6,7 +6,7 @@ import moment from 'moment';
 import DateTime  from '../../date-time';
 
 @observer
-export default class DateWrapper extends React.PureComponent {
+export default class DateWrapper extends React.Component {
 
     static defaultProps = {
         format: 'M/d/Y h:iK',

data/client/hippo/components/form/fields/email-wrapper.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { action } from 'mobx';
+import TextInput from 'grommet/components/TextInput';
+
+
+@observer
+export default class EmailWrapper extends React.Component {
+
+    @action.bound focus() {
+        this.inputRef.componentRef.focus();
+    }
+
+    @action.bound onChange(ev) {
+        if (ev.target && ev.target.value) {
+            ev.target.value = ev.target.value.replace(' ', '');
+        }
+        return this.props.onChange(ev);
+    }
+
+    render() {
+        return (
+            <TextInput
+                ref={(f) => { this.inputRef = f; }}
+                {...this.props}
+                onDOMChange={this.onChange}
+            />
+        );
+    }
+
+}

data/client/hippo/components/form/fields/form-field.scss

@@ -11,4 +11,12 @@
     }
 }
 
+
+.grommetux-form-field__contents {
+    label {
+        padding: 0 24px;
+    }
+}
+
+
 @import './react-tags';

data/client/hippo/components/form/fields/label.jsx

@@ -1,16 +1,14 @@
 import React from 'react';
+import { isString } from 'lodash';
 import { observer } from 'mobx-react';
-import Value from 'grommet/components/Value';
+import Label from 'grommet/components/Label';
 
 @observer
-export default class LabelWrapper extends React.PureComponent {
+export default class LabelWrapper extends React.Component {
 
     render() {
-        const { value }  = this.props;
-
-        return (
-            <Value value={value} />
-        );
+        const { value, ...props } = this.props;
+        return isString(value) ? <Label {...props}>{value}</Label> : value;
     }
 
 }

data/client/hippo/components/form/fields/select-wrapper.jsx

@@ -5,7 +5,7 @@ import Select from 'grommet/components/Select';
 import { get, find } from 'lodash';
 
 @observer
-export default class SelectFieldWrapper extends React.PureComponent {
+export default class SelectFieldWrapper extends React.Component {
 
     @action.bound
     onSelectChange({ value: { id } }) {

data/client/hippo/components/form/fields/tags-wrapper.jsx

@@ -5,7 +5,7 @@ import { action, isObservableArray } from 'mobx';
 import Tags from 'react-tag-autocomplete';
 
 @observer
-export default class CheckBoxWrapper extends React.PureComponent {
+export default class CheckBoxWrapper extends React.Component {
 
     get tags() {
         if (isEmpty(this.props.value)) {

data/client/hippo/components/form/fields/text-wrapper.jsx

@@ -5,7 +5,7 @@ import TextInput from 'grommet/components/TextInput';
 
 
 @observer
-export default class TextWrapper extends React.PureComponent {
+export default class TextWrapper extends React.Component {
 
     @action.bound focus() {
         this.inputRef.componentRef.focus();

data/client/hippo/components/form/fields/textarea-wrapper.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react';
 
 @observer
-export default class TextAreaWrapper extends React.PureComponent {
+export default class TextAreaWrapper extends React.Component {
 
     render() {
         return (

data/client/hippo/components/form/wrapper.jsx

@@ -6,7 +6,7 @@ import { FormState } from './api';
 import Screen from '../screen';
 
 @observer
-export default class FormWrapper extends React.PureComponent {
+export default class FormWrapper extends React.Component {
 
     static propTypes = {
         tag: PropTypes.string,

data/client/hippo/components/grid.js

@@ -0,0 +1 @@
+export { Row, Col } from 'react-flexa';

data/client/hippo/components/master-detail.jsx

@@ -10,7 +10,7 @@ import './master-detail.scss';
 const DELAY_TIME = 500;
 
 @observer
-export default class MasterDetail extends React.PureComponent {
+export default class MasterDetail extends React.Component {
 
     static propTypes = {
         master: PropTypes.element.isRequired,

data/client/hippo/components/network-activity-overlay.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { observer } from 'mobx-react';
 import { autorun, action, observable, computed } from 'mobx';
 import Spinning from 'grommet/components/icons/Spinning';
 import CircleInformationIcon from 'grommet/components/icons/base/CircleInformation';
@@ -13,7 +13,7 @@ function Indicator({ error }) {
 }
 
 @observer
-export default class NetworkActivityOverlay extends React.PureComponent {
+export default class NetworkActivityOverlay extends React.Component {
 
     static defaultProps = {
         timeout: 30000,
@@ -21,7 +21,7 @@ export default class NetworkActivityOverlay extends React.PureComponent {
     }
 
     static propTypes = {
-        model:   MobxPropTypes.observableObject,
+        model:   PropTypes.object,
         message: PropTypes.string,
         timeout: PropTypes.number,
         visible: PropTypes.bool,
@@ -30,7 +30,7 @@ export default class NetworkActivityOverlay extends React.PureComponent {
     }
 
     @computed get isRequesting() {
-        const { syncInProgress } = this.props.model;
+        const { syncInProgress } = this.props.model || {};
         if (this.props.method) {
             return !!(syncInProgress && syncInProgress.method === this.props.method);
         }
@@ -38,7 +38,7 @@ export default class NetworkActivityOverlay extends React.PureComponent {
     }
 
     @computed get hasError() {
-        return !isEmpty(this.props.model.errors);
+        return this.props.model && !isEmpty(this.props.model.errors);
     }
 
     @computed get isVisible() {
@@ -89,7 +89,7 @@ export default class NetworkActivityOverlay extends React.PureComponent {
         let { message } = this.props;
         if (!message) {
             if (this.hasError) {
-                message = model.errorMessage || 'Error';
+                message = get(model, 'errorMessage', 'Error');
             } else {
                 const method = get(model, 'syncInProgress.method');
                 if ('GET' === method) {