hippo-fw 0.9.5 → 0.9.6

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

@@ -1,34 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
+import invariant from 'invariant';
+import { action } from 'mobx';
 import { inject, observer } from 'mobx-react';
 import classnames from 'classnames';
 import { Col, getColumnProps } from 'react-flexbox-grid';
-
-import invariant from 'invariant';
 import Field     from 'grommet/components/FormField';
 import NumberInput from 'grommet/components/NumberInput';
-
 import { titleize } from '../../lib/util';
-
-import { FormField as FormFieldModel }   from './model';
 import DateWrapper     from './fields/date-wrapper';
 import SelectWrapper   from './fields/select-wrapper';
 import TextWrapper     from './fields/text-wrapper';
 import CheckBoxWrapper from './fields/checkbox-wrapper';
-
+import Label           from './fields/label';
 import './fields/form-field.scss';
 
 const TypesMapping = {
     text:     TextWrapper,
     date:     DateWrapper,
+    label:    Label,
     select:   SelectWrapper,
     number:   NumberInput,
     checkbox: CheckBoxWrapper,
-
 };
 
-
 @inject('formState')
 @observer
 export default class FormField extends React.PureComponent {
@@ -55,15 +50,21 @@ export default class FormField extends React.PureComponent {
 
     componentWillReceiveProps(nextProps) {
         invariant(nextProps.name === this.props.name,
-                  `cannot update 'name' prop from ${this.props.name} to ${nextProps.name}`);
+            `cannot update 'name' prop from ${this.props.name} to ${nextProps.name}`);
         this.field.update(this.props);
     }
 
+    @action.bound
+    setRef(input) {
+        this.inputRef = input;
+    }
+
     render() {
         const {
             name, className, autoFocus, type, children, label,
             validate: _, formState: __, help: ___, ...otherProps
         } = getColumnProps(this.props);
+
         const InputTag = TypesMapping[type] || TypesMapping.text;
 
         return (
@@ -76,7 +77,7 @@ export default class FormField extends React.PureComponent {
                     <InputTag
                         name={name}
                         autoFocus={autoFocus}
-                        ref={f => (this.inputRef = f)}
+                        ref={this.setRef}
                         value={this.field.value || ''}
                         type={InputTag === TypesMapping.text ? this.props.type : undefined}
                         {...this.field.events}

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

@@ -8,7 +8,7 @@ import DateTime  from '../../date-time';
 @observer
 export default class DateWrapper extends React.PureComponent {
     static defaultProps = {
-        format: 'M/D/YYYY h:mm a'
+        format: 'M/D/YYYY h:mm a',
     }
     static childContextTypes = { onDropChange: PropTypes.func }
     @observable isSelecting;

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

@@ -1,4 +1,12 @@
-.form-field {
+.row > .form-field {
     margin-top: 0.5rem;
     .grommetux-form-field { width: 100%; }
 }
+
+.grommetux-number-input {
+    .grommetux-button {
+        .grommetux-button__icon {
+            padding: 6px;
+        }
+    }
+}

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

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

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

@@ -1,9 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { action, computed, observable } from 'mobx';
+import { action, computed } from 'mobx';
 import Select from 'grommet/components/Select';
-import { get, find, defer } from 'lodash';
+import { get, find } from 'lodash';
 
 @observer
 export default class SelectFieldWrapper extends React.PureComponent {

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

@@ -2,11 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { PropTypes as MobxPropTypes, Provider, observer } from 'mobx-react';
 import { observePubSub } from '../../models/pub_sub';
-import { FormState } from './model';
+import { FormState } from './api';
 
 @observer
 export default class FormWrapper extends React.PureComponent {
-
     static propTypes = {
         tag: PropTypes.string,
         className: PropTypes.string,
@@ -54,5 +53,4 @@ export default class FormWrapper extends React.PureComponent {
         if (this.props.model) { observePubSub(this.props.model); }
         return this.props.tag ? this.renderTagged() : this.renderTagless();
     }
-
 }

data/client/hippo/components/icon.jsx

@@ -1,70 +1,3 @@
-import React from 'react';
+import Icon from 'react-fontawesome';
 
-import PropTypes from 'prop-types';
-
-import { uniqueId, extend } from 'lodash';
-import classnames from 'classnames';
-
-const DEFAULT_TOOLTIP_PROPS = { placement: 'top', trigger: 'click' };
-
-export default class Icon extends React.PureComponent {
-
-    static propTypes = {
-        type:         PropTypes.string.isRequired,
-        animated:     PropTypes.bool,
-        spinner:      PropTypes.bool,
-        className:    PropTypes.string,
-        tooltip:      PropTypes.oneOfType([
-            PropTypes.string, PropTypes.element
-        ]),
-        tooltipProps: PropTypes.object,
-    };
-
-    static defaultProps = {
-        tooltipProps: DEFAULT_TOOLTIP_PROPS,
-    }
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            uniqueId: uniqueId('icon-tooltip-'),
-        };
-    }
-
-    render() {
-        const classes = classnames('icon', `icon-${this.props.type}`, this.props.className, {
-            'non-printable': this.props.noPrint,
-            'with-action' : this.props.onClick,
-            [`icon-${this.props.size}`] : this.props.size,
-            'icon-pulse' : this.props.animated,
-            'icon-spin'  : this.props.spin || (this.props.type === 'spinner'),
-            'flush'      : this.props.flush,
-            'icon-lg'    : this.props['lg'],
-            'icon-2x'    : this.props['2x'],
-            'icon-3x'    : this.props['3x'],
-            'icon-4x'    : this.props['4x'],
-            'icon-5x'    : this.props['5x'],
-            'clickable'  : this.props.clickable || (this.props.tooltip && (this.props.tooltipProps.trigger === 'click'))
-        }
-        );
-
-        const icon =
-            React.createElement("i", {"style": (this.props.style), "className": (classes), "onClick": (this.props.onClick)});
-
-        if (this.props.tooltip) {
-            const props = extend({}, DEFAULT_TOOLTIP_PROPS, this.props.tooltipProps);
-            return (
-                React.createElement(LC.Tooltip, Object.assign({"id": (this.state.uniqueId),
-                    "content": (this.props.tooltip)
-                    }, props
-                ),
-                    (icon)
-                )
-            );
-        } else {
-            return (
-                icon
-            );
-        }
-    }
-}
+export default Icon;

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

@@ -11,8 +11,6 @@ const DELAY_TIME = 500;
 
 @observer
 export default class MasterDetail extends React.PureComponent {
-
-
     static propTypes = {
         master: PropTypes.element.isRequired,
         detail: PropTypes.element,

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

@@ -1,13 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
-import { autorun, action } from 'mobx';
+import { autorun, action, observable, computed } from 'mobx';
 import Spinning from 'grommet/components/icons/Spinning';
 import CircleInformationIcon from 'grommet/components/icons/base/CircleInformation';
 import { delay, isEmpty, includes, get } from 'lodash';
 import classnames from 'classnames';
-import { BaseModel, observable, computed } from '../models/base';
-
 import './network-activity-overlay.scss';
 
 function Indicator({ error }) {
@@ -16,7 +14,6 @@ function Indicator({ error }) {
 
 @observer
 export default class NetworkActivityOverlay extends React.PureComponent {
-
     static defaultProps = {
         timeout: 30000,
         errorTimeout: 2000,

data/client/hippo/components/query-builder.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-
+import { find } from 'lodash';
 import { observer } from 'mobx-react';
 import { action }   from 'mobx';
 import Box          from 'grommet/components/Box';
@@ -9,16 +9,12 @@ import Menu         from 'grommet/components/Menu';
 import RadioButton  from 'grommet/components/RadioButton';
 import TextInput    from 'grommet/components/TextInput';
 import DownIcon     from 'grommet/components/icons/base/Down';
-
-import BaseModel from '../models/base';
+import { BaseModel } from '../models/base';
 import Query         from '../models/query';
 import ClauseModel   from '../models/query/clause';
-import FieldModel    from '../models/query/field';
-import OperatorModel from '../models/query/operator';
 
 @observer
 class Radio extends React.PureComponent {
-
     static propTypes = {
         name: PropTypes.string.isRequired,
         onSelect: PropTypes.func.isRequired,
@@ -34,13 +30,13 @@ class Radio extends React.PureComponent {
 
     render() {
         const { model } = this.props;
-        const checked = (this.props.clause[this.props.name] === model);
         return (
             <RadioButton
+                id={model.id}
                 name={model.id}
                 label={model.label}
                 onChange={this.onChange}
-                checked={checked}
+                checked={(this.props.clause[this.props.name] === model)}
             />
         );
     }
@@ -48,7 +44,6 @@ class Radio extends React.PureComponent {
 
 @observer
 class ClauseFilter extends React.PureComponent {
-
     static propTypes = {
         clause: PropTypes.instanceOf(ClauseModel).isRequired,
     }
@@ -65,7 +60,6 @@ class ClauseFilter extends React.PureComponent {
 
 @observer
 class Clause extends React.PureComponent {
-
     static propTypes = {
         clause: PropTypes.instanceOf(ClauseModel).isRequired,
     }
@@ -96,7 +90,7 @@ class Clause extends React.PureComponent {
                                 <Radio
                                     key={f.id} model={f} clause={clause}
                                     onSelect={this.onSelect} name='field' />,
-                             )}
+                            )}
                         </Box>
                         <Box size="small" pad={{ between: 'small' }}>
                             {clause.validOperators.map(o =>
@@ -104,7 +98,7 @@ class Clause extends React.PureComponent {
                                     key={o.id} model={o} clause={clause}
                                     onSelect={this.onSelect} name='operator'
                                 />,
-                             )}
+                            )}
                         </Box>
                     </Box>
                 </Menu>
@@ -121,7 +115,6 @@ class Clause extends React.PureComponent {
 
 @observer
 export default class QueryBuilder extends React.PureComponent {
-
     static defaultProps = {
         autoFetch: false,
     }
@@ -134,7 +127,14 @@ export default class QueryBuilder extends React.PureComponent {
     constructor(props) {
         super(props);
         this.previousQueryAutoFetch = this.props.query.autoFetch;
-        this.props.query.autoFetch = props.autoFetch;
+        if (0 === this.props.query.info.visibleClauses.length) {
+            const field = find(this.props.query.fields, { visible: true });
+            this.props.query.clauses.push({ field, operator: field.preferredOperator });
+        }
+    }
+
+    componentWillMount() {
+        this.props.query.autoFetch = this.props.autoFetch;
     }
 
     componentWillReceiveProps(nextProps) {
@@ -149,9 +149,8 @@ export default class QueryBuilder extends React.PureComponent {
         const { query } = this.props;
         return (
             <div className="query-builder">
-                {query.clauses.map(c => <Clause key={c.id} clause={c} />)}
+                {query.info.visibleClauses.map(c => <Clause key={c.id} clause={c} />)}
             </div>
         );
     }
-
 }

data/client/hippo/components/record-finder.jsx

@@ -9,11 +9,7 @@ import { Field } from 'hippo/components/form';
 import Button from 'grommet/components/Button';
 import SearchIcon from 'grommet/components/icons/base/Search';
 
-import { Col } from 'react-flexbox-grid';
-
-import { titleize } from '../lib/util';
 import Query from '../models/query';
-
 import './record-finder/record-finder.scss';
 import QueryLayer from './record-finder/query-layer';
 
@@ -43,7 +39,8 @@ export default class RecordFinder extends React.PureComponent {
     @action.bound
     onRecordSelect(model) {
         this.showingSearch = false;
-        this.props.formState.get(this.props.name).value = model[this.props.name]
+        const value = get(model, this.props.name);
+        this.props.formState.get(this.props.name).value = value;
         this.props.onRecordFound(model);
     }
 

data/client/hippo/components/record-finder/query-layer.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { observer }   from 'mobx-react';
-import { action, observable, computed } from 'mobx';
+import { action } from 'mobx';
 
 import Heading from 'grommet/components/Heading';
 import Layer   from 'grommet/components/Layer';
@@ -16,8 +16,6 @@ import QueryBuilder from '../query-builder';
 
 @observer
 export default class QueryLayer extends React.PureComponent {
-
-
     static propTypes = {
         title: PropTypes.string.isRequired,
         onClose: PropTypes.func.isRequired,
@@ -69,6 +67,4 @@ export default class QueryLayer extends React.PureComponent {
             </Layer>
         );
     }
-
-
 }

data/client/hippo/components/screen.jsx

@@ -23,9 +23,13 @@ export default class Screen extends React.Component {
         return (
             <div
                 data-screen-id={this.props.screen.definition.id}
-                className={classnames('screen', this.props.className, {
-                                   'is-active': this.props.screen.isActive,
-                    })}
+                className={classnames(
+                    'screen',
+                    this.props.screen.definition.id,
+                    this.props.className, {
+                        'is-active': this.props.screen.isActive,
+                    },
+                )}
             >
                 {this.props.children}
             </div>

data/client/hippo/components/text-editor.jsx

@@ -2,28 +2,23 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { action, observable, toJS } from 'mobx';
 import { isEmpty } from 'lodash';
-import { observer } from 'mobx-react';
-import { Provider, PropTypes as MobxPropTypes } from 'mobx-react';
+import { observer, Provider, PropTypes as MobxPropTypes } from 'mobx-react';
 
 // The editor core
 import Editor, { Editable, createEmptyState } from 'ory-editor-core';
 
 // Require our ui components (optional). You can implement and use your own ui too!
 import { Trash, Toolbar } from 'ory-editor-ui';
-import tapEventPlugin from 'react-tap-event-plugin';
-
-import { plugins, defaultPlugin } from './text-editor/plugins';
-
 import 'ory-editor-ui/lib/index.css';
 import 'ory-editor-core/lib/index.css';
 
+import { plugins, defaultPlugin } from './text-editor/plugins';
 import DisplayModeToggle from './text-editor/display-modes';
 import './text-editor/text-editor.scss';
 
 
 @observer
 export default class TextEditor extends React.PureComponent {
-
     static defaultProps = {
         assets: observable.array(),
     }
@@ -42,7 +37,6 @@ export default class TextEditor extends React.PureComponent {
             editables: [this.content],
             defaultPlugin,
         });
-        tapEventPlugin();
     }
 
     @action.bound