hippo-fw 0.9.7 → 0.9.8

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

@@ -6,6 +6,7 @@ import { get, find } from 'lodash';
 
 @observer
 export default class SelectFieldWrapper extends React.PureComponent {
+
     @action.bound
     onSelectChange({ value: { id } }) {
         const ev = { target: { value: id } };
@@ -27,4 +28,5 @@ export default class SelectFieldWrapper extends React.PureComponent {
             />
         );
     }
+
 }

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { isEmpty, isArray } from 'lodash';
+import { observer } from 'mobx-react';
+import { action, isObservableArray } from 'mobx';
+import Tags from 'react-tag-autocomplete';
+
+@observer
+export default class CheckBoxWrapper extends React.PureComponent {
+
+    get tags() {
+        if (isEmpty(this.props.value)) {
+            return [];
+        } else if (!isArray(this.props.value) &&
+                   !isObservableArray(this.props.value)) {
+            return [this.props.value];
+        }
+        return this.props.value;
+    }
+
+    @action.bound
+    onTagDelete(tagIndex) {
+        const { tags } = this;
+        tags.splice(tagIndex, 1);
+        this.props.onChange({ target: { value: tags } });
+    }
+
+    @action.bound onTagAdd(tag) {
+        const { tags } = this;
+        tags.push(tag);
+        this.props.onChange({ target: { value: tags } });
+    }
+
+    render() {
+        const { value: _, ...otherProps } = this.props;
+
+        return (
+            <Tags
+                handleDelete={this.onTagDelete}
+                handleAddition={this.onTagAdd}
+                tags={isObservableArray(this.tags) ? this.tags.peek() : this.tags}
+                {...otherProps}
+            />
+        );
+    }
+
+}

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

@@ -6,15 +6,23 @@ import TextInput from 'grommet/components/TextInput';
 
 @observer
 export default class TextWrapper extends React.PureComponent {
+
     @action.bound focus() {
         this.inputRef.componentRef.focus();
     }
+
+    @action.bound onSelect({ suggestion }) {
+        this.props.onChange({ target: { value: suggestion } });
+    }
+
     render() {
         return (
             <TextInput
-                ref={f => (this.inputRef = f)}
+                ref={(f) => { this.inputRef = f; }}
+                onSelect={this.onSelect}
                 {...this.props} onDOMChange={this.props.onChange}
             />
         );
     }
+
 }

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+
+@observer
+export default class TextAreaWrapper extends React.PureComponent {
+
+    render() {
+        return (
+            <textarea
+                {...this.props}
+            />
+        );
+    }
+
+}

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

@@ -3,15 +3,18 @@ import PropTypes from 'prop-types';
 import { PropTypes as MobxPropTypes, Provider, observer } from 'mobx-react';
 import { observePubSub } from '../../models/pub_sub';
 import { FormState } from './api';
+import Screen from '../screen';
 
 @observer
 export default class FormWrapper extends React.PureComponent {
+
     static propTypes = {
         tag: PropTypes.string,
         className: PropTypes.string,
         children: PropTypes.node.isRequired,
         state: PropTypes.instanceOf(FormState),
         model: MobxPropTypes.observableObject,
+        screen: PropTypes.instanceOf(Screen.Instance),
     }
 
     static get defaultProps() {
@@ -39,7 +42,9 @@ export default class FormWrapper extends React.PureComponent {
     }
 
     renderTagged() {
-        const { tag: Tag, state, children, model: _, ...otherProps } = this.props;
+        const {
+            tag: Tag, state, children, model: _, ...otherProps
+        } = this.props;
         return (
             <Provider formState={state}>
                 <Tag {...otherProps}>
@@ -49,8 +54,23 @@ export default class FormWrapper extends React.PureComponent {
         );
     }
 
+    renderScreen() {
+        const {
+            tag: _, state, children, screen, model: __, ...otherProps
+        } = this.props;
+        return (
+            <Provider formState={state}>
+                <Screen screen={screen} {...otherProps}>
+                    {children}
+                </Screen>
+            </Provider>
+        );
+    }
+
     render() {
         if (this.props.model) { observePubSub(this.props.model); }
+        if (this.props.screen) { return this.renderScreen(); }
         return this.props.tag ? this.renderTagged() : this.renderTagless();
     }
+
 }

data/client/hippo/components/help.jsx

@@ -0,0 +1,21 @@
+import React from 'react'; // eslint-disable-line no-unused-vars
+import PropTypes    from 'prop-types';
+import { Tooltip } from 'react-tippy';
+import 'react-tippy/dist/tippy.css';
+import CircleQuestionIcon from 'grommet/components/icons/base/CircleQuestion';
+
+export default function Help({ message, ...ttProps }) {
+    return (
+        <Tooltip
+            arrow
+            title={message}
+            {...ttProps}
+        >
+            <CircleQuestionIcon colorIndex="brand" />
+        </Tooltip>
+    );
+}
+
+Help.propTypes = {
+    message: PropTypes.string.isRequired,
+};

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

@@ -11,6 +11,7 @@ const DELAY_TIME = 500;
 
 @observer
 export default class MasterDetail extends React.PureComponent {
+
     static propTypes = {
         master: PropTypes.element.isRequired,
         detail: PropTypes.element,
@@ -61,4 +62,5 @@ export default class MasterDetail extends React.PureComponent {
             </div>
         );
     }
+
 }

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

@@ -14,6 +14,7 @@ function Indicator({ error }) {
 
 @observer
 export default class NetworkActivityOverlay extends React.PureComponent {
+
     static defaultProps = {
         timeout: 30000,
         errorTimeout: 2000,
@@ -85,7 +86,7 @@ export default class NetworkActivityOverlay extends React.PureComponent {
 
     get message() {
         const { props: { model } } = this;
-        let message = this.props.message;
+        let { message } = this.props;
         if (!message) {
             if (this.hasError) {
                 message = model.errorMessage || 'Error';
@@ -121,4 +122,5 @@ export default class NetworkActivityOverlay extends React.PureComponent {
             </div>
         );
     }
+
 }

data/client/hippo/components/popout-window.jsx

@@ -0,0 +1,126 @@
+// inspiration from https://github.com/JakeGinnivan/react-popout
+// this version triggers popup directly and leaves it open
+// after the parent component unmounts
+
+import React        from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM     from 'react-dom';
+import { isFunction, invoke, defaults, map, uniqueId } from 'lodash';
+import { autobind } from 'core-decorators';
+
+export default class PopoutWindow extends React.PureComponent {
+
+    static propTypes = {
+        title:      PropTypes.string.isRequired,
+        children:   PropTypes.node.isRequired,
+        onClose:    PropTypes.func.isRequired,
+        url:        PropTypes.string,
+        options:    PropTypes.object,
+        windowImpl: PropTypes.shape({
+            open: PropTypes.func,
+        }),
+    };
+
+    static defaultProps = {
+        windowImpl: window,
+        url: 'about:blank',
+    };
+
+    containerId = uniqueId('popout-container');
+
+    popup = false;
+
+    defaultOptions = {
+        toolbar: 'no',
+        location: 'no',
+        directories: 'no',
+        status: 'no',
+        menubar: 'no',
+        scrollbars: 'yes',
+        resizable: 'yes',
+        width: 500,
+        height: 400,
+        top: (o, w) => ((w.innerHeight - o.height) / 2) + w.screenY,
+        left: (o, w) => ((w.innerWidth - o.width) / 2) + w.screenX,
+    };
+
+
+    componentDidMount() {
+        // May not exist if server-side rendering
+        if (this.props.windowImpl) {
+            this.open();
+        }
+    }
+
+    componentWillReceiveProps(nextProps) {
+        // re-render
+        if (this.isOpen && nextProps.children !== this.props.children) {
+            this.reRender();
+        }
+    }
+
+    get isOpen() {
+        return !!(this.popup && this.containerEl);
+    }
+
+    get containerEl() {
+        return this.popup.document.getElementById(this.containerId);
+    }
+
+    reRender(children = this.props.children) {
+        ReactDOM.render(children, this.containerEl);
+    }
+
+    open() {
+        if (this.isOpen) {
+            this.reRender();
+            this.popup.focus();
+            return;
+        }
+        // eslint-disable-next-line
+        const options = map(
+            defaults({}, this.props.options, this.defaultOptions),
+            (v, key, o) => `${key}=${v = isFunction(v) ? v(o, this.props.windowImpl) : v}`, // eslint-disable-line
+        ).join(',');
+
+        this.popup = this.props.windowImpl.open(this.props.url, this.props.title, options);
+
+        this.popup.onbeforeunload = this.onWindowBeforeUnLoad;
+        this.popup.onload = this.onWindowLoad;
+
+        // just in case onload fails to fire
+        if ('complete' === this.popup.document.readyState) {
+            this.onWindowLoad();
+        }
+    }
+
+    @autobind
+    close() {
+        invoke(this.popup, 'close');
+    }
+
+    @autobind
+    onWindowBeforeUnLoad() {
+        invoke(this.props, 'onClose');
+        ReactDOM.unmountComponentAtNode(this.containerEl);
+        this.containerEl.parentNode.removeChild(this.containerEl);
+    }
+
+    @autobind
+    onWindowLoad() {
+        // called twice
+        if (this.containerEl) { return; }
+
+        this.popup.document.title = this.props.title;
+        const container = this.popup.document.createElement('div');
+        container.id = this.containerId;
+        this.popup.document.body.appendChild(container);
+
+        ReactDOM.render(this.props.children, container);
+    }
+
+    render() {
+        return null; // don't need to render anything directly
+    }
+
+}

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

@@ -1,125 +1,14 @@
 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';
-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 Query         from '../models/query';
-import ClauseModel   from '../models/query/clause';
-
-@observer
-class Radio extends React.PureComponent {
-    static propTypes = {
-        name: PropTypes.string.isRequired,
-        onSelect: PropTypes.func.isRequired,
-        model: PropTypes.instanceOf(BaseModel).isRequired,
-        clause: PropTypes.instanceOf(ClauseModel).isRequired,
-    }
-
-    @action.bound
-    onChange() {
-        this.props.clause[this.props.name] = this.props.model;
-        this.props.onSelect();
-    }
-
-    render() {
-        const { model } = this.props;
-        return (
-            <RadioButton
-                id={model.id}
-                name={model.id}
-                label={model.label}
-                onChange={this.onChange}
-                checked={(this.props.clause[this.props.name] === model)}
-            />
-        );
-    }
-}
-
-@observer
-class ClauseFilter extends React.PureComponent {
-    static propTypes = {
-        clause: PropTypes.instanceOf(ClauseModel).isRequired,
-    }
-
-    render() {
-        const { clause } = this.props;
-        return (
-            <span>
-                <DownIcon /> {clause.field.label} {clause.operator.label}
-            </span>
-        );
-    }
-}
-
-@observer
-class Clause extends React.PureComponent {
-    static propTypes = {
-        clause: PropTypes.instanceOf(ClauseModel).isRequired,
-    }
-
-    @action.bound
-    onSelect() {
-        this.menuRef._onClose();
-    }
-
-    @action.bound
-    onValueChange(ev) {
-        this.props.clause.value = ev.target.value;
-    }
-
-    @action.bound
-    setMenuRef(ref) {
-        this.menuRef = ref;
-    }
-
-    render() {
-        const { clause } = this.props;
-        return (
-            <Box direction='row' pad={{ between: 'small' }}>
-                <Menu
-                    ref={this.setMenuRef}
-                    size='large'
-                    pad='small'
-                    closeOnClick={false} icon={<ClauseFilter clause={clause} />}
-                >
-                    <Box direction='row' pad="small">
-                        <Box size="small" pad={{ between: 'small' }}>
-                            {clause.query.info.queryableFields.map(f =>
-                                <Radio
-                                    key={f.id} model={f} clause={clause}
-                                    onSelect={this.onSelect} name='field' />,
-                            )}
-                        </Box>
-                        <Box size="small" pad={{ between: 'small' }}>
-                            {clause.validOperators.map(o =>
-                                <Radio
-                                    key={o.id} model={o} clause={clause}
-                                    onSelect={this.onSelect} name='operator'
-                                />,
-                            )}
-                        </Box>
-                    </Box>
-                </Menu>
-                <TextInput
-                    autoFocus
-                    style={{ flex: 1 }}
-                    value={clause.value || ''}
-                    onDOMChange={this.onValueChange}
-                />
-            </Box>
-        );
-    }
-}
+import Query from '../models/query';
+import Clause from './query-builder/clause';
+import './query-builder/query-builder.scss';
 
 @observer
 export default class QueryBuilder extends React.PureComponent {
+
     static defaultProps = {
         autoFetch: false,
     }
@@ -127,6 +16,7 @@ export default class QueryBuilder extends React.PureComponent {
     static propTypes = {
         autoFetch: PropTypes.bool,
         query: PropTypes.instanceOf(Query).isRequired,
+        typeHandlers: PropTypes.object,
     }
 
     constructor(props) {
@@ -151,11 +41,13 @@ export default class QueryBuilder extends React.PureComponent {
     }
 
     render() {
-        const { query } = this.props;
+        const { query, typeHandlers } = this.props;
         return (
             <div className="query-builder">
-                {query.info.visibleClauses.map(c => <Clause key={c.id} clause={c} />)}
+                {query.info.visibleClauses.map(c =>
+                    <Clause key={c.id} clause={c} typeHandlers={typeHandlers} />)}
             </div>
         );
     }
+
 }