hippo-fw 0.9.7 → 0.9.8

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { isNil } from 'lodash';
+import CheckBox from 'grommet/components/CheckBox';
+import { observer } from 'mobx-react';
+import { action } from 'mobx';
+
+@observer
+export default class BooleanPicker extends React.PureComponent {
+
+    @action.bound onChange(ev) {
+        this.props.clause.value = ev.target.checked;
+    }
+
+    componentWillMount() {
+        if (isNil(this.props.clause.value)) {
+            this.props.clause.value = false;
+        }
+    }
+
+    render() {
+        const { props: { clause } } = this;
+
+        return (
+            <CheckBox checked={!!clause.value} onChange={this.onChange} />
+        );
+    }
+
+}

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { action } from 'mobx';
+import RadioButton   from 'grommet/components/RadioButton';
+import DownIcon      from 'grommet/components/icons/base/Down';
+import { BaseModel } from '../../models/base';
+import ClauseModel   from '../../models/query/clause';
+
+
+@observer
+export 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
+export 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>
+        );
+    }
+
+}

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

@@ -0,0 +1,98 @@
+import React from 'react';
+import { defaults } from 'lodash';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { action } from 'mobx';
+import Box           from 'grommet/components/Box';
+import Menu          from 'grommet/components/Menu';
+import TextInput     from 'grommet/components/TextInput';
+import ClauseModel   from '../../models/query/clause';
+import { Radio, ClauseFilter } from './clause-filter';
+import BooleanPicker from './boolean-picker';
+import DatePicker from './date-picker';
+
+const defaultHandlers = {
+    boolean: BooleanPicker,
+    date: DatePicker,
+};
+
+@observer
+export default class Clause extends React.PureComponent {
+
+    static defaultProps = {
+        typeHandlers: {},
+    }
+
+    static propTypes = {
+        clause: PropTypes.instanceOf(ClauseModel).isRequired,
+        typeHandlers: PropTypes.object,
+    }
+
+    @action.bound
+    onSelect() {
+        this.menuRef._onClose();
+    }
+
+    @action.bound
+    onValueChange(ev) {
+        this.props.clause.value = ev.target.value;
+    }
+
+    @action.bound
+    setMenuRef(ref) {
+        this.menuRef = ref;
+    }
+
+    get handlers() {
+        return defaults(this.props.typeHandlers, defaultHandlers);
+    }
+
+    renderInputTag() {
+        const Tag = this.handlers[this.props.clause.field.dataType];
+
+        if (Tag) {
+            return <Tag clause={this.props.clause} />;
+        }
+        return (
+            <TextInput
+                autoFocus
+                style={{ flex: 1 }}
+                value={this.props.clause.value || ''}
+                onDOMChange={this.onValueChange}
+            />
+        );
+    }
+
+    render() {
+        const { props: { clause } } = this;
+
+        return (
+            <Box className="clause" direction='row' pad={{ between: 'small' }} align="center">
+                <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>
+                {this.renderInputTag()}
+            </Box>
+        );
+    }
+
+}

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { action } from 'mobx';
+import DateTime from '../date-time';
+
+@observer
+export default class DatePicker extends React.PureComponent {
+
+    @action.bound onChange({ target: { value: dates } }) {
+        this.props.clause.value = `${dates[0].toISOString()}...${dates[1].toISOString()}`;
+    }
+
+    render() {
+        return (
+            <DateTime
+                format="M d Y"
+                options={{ enableTime: false, mode: 'range' }}
+                onChange={this.onChange}
+            />
+        );
+    }
+
+}

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

@@ -0,0 +1,7 @@
+.query-builder {
+    .clause {
+        :last-child {
+            flex: 1;
+        }
+    }
+}

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

@@ -16,6 +16,7 @@ import QueryLayer from './record-finder/query-layer';
 @inject('formState')
 @observer
 export default class RecordFinder extends React.PureComponent {
+
     static propTypes = {
         query: PropTypes.instanceOf(Query).isRequired,
         name:  PropTypes.string.isRequired,
@@ -89,4 +90,5 @@ export default class RecordFinder extends React.PureComponent {
             </Field>
         );
     }
+
 }

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

@@ -16,6 +16,7 @@ import QueryBuilder from '../query-builder';
 
 @observer
 export default class QueryLayer extends React.PureComponent {
+
     static propTypes = {
         title: PropTypes.string.isRequired,
         onClose: PropTypes.func.isRequired,
@@ -32,7 +33,9 @@ export default class QueryLayer extends React.PureComponent {
     }
 
     render() {
-        const { visible, query, onClose, title } = this.props;
+        const {
+            visible, query, onClose, title,
+        } = this.props;
         if (!visible) { return null; }
 
         return (
@@ -67,4 +70,5 @@ export default class QueryLayer extends React.PureComponent {
             </Layer>
         );
     }
+
 }

data/client/hippo/components/save-button.jsx

@@ -13,6 +13,7 @@ import { BaseModel } from '../models/base';
 
 @observer
 export default class SaveButton extends React.PureComponent {
+
     static propTypes = {
         busy: PropTypes.bool,
         model: PropTypes.instanceOf(BaseModel),
@@ -39,7 +40,11 @@ export default class SaveButton extends React.PureComponent {
 
     render() {
         // eslint-disable-next-line no-unused-vars
-        const { label, icon, props: { busyLabel, busy, model, label: _, ...props } } = this;
+        const {
+            label, icon, props: {
+                label: _, busyLabel: __, busy, model: ___, ...props
+            },
+        } = this;
 
         return (
             <Button
@@ -52,4 +57,5 @@ export default class SaveButton extends React.PureComponent {
             />
         );
     }
+
 }

data/client/hippo/components/screen.jsx

@@ -7,6 +7,7 @@ import ScreenInstance from '../screens/instance';
 
 @observer
 export default class Screen extends React.Component {
+
     static Instance = ScreenInstance;
 
     static defaultProps = {
@@ -35,4 +36,5 @@ export default class Screen extends React.Component {
             </div>
         );
     }
+
 }

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

@@ -24,14 +24,15 @@ const editorInstance = new Editor({
 
 @observer
 export default class TextEditor extends React.PureComponent {
+
     static defaultProps = {
         assets: observable.array(),
     }
 
     static propTypes = {
         defaultContent: PropTypes.object,
+        onChange: PropTypes.func.isRequired,
         assets:  MobxPropTypes.observableArray,
-        onComplete: PropTypes.func.isRequired,
     }
 
     componentWillMount() {
@@ -40,14 +41,11 @@ export default class TextEditor extends React.PureComponent {
         editorInstance.trigger.editable.add(this.content);
     }
 
-    @action.bound
-    onSave() {
-        this.props.onComplete({ content: this.content });
-    }
 
     @action.bound
     onEditStateChange(state) {
         this.content = state;
+        this.props.onChange(state);
     }
 
     render() {
@@ -77,4 +75,5 @@ export default class TextEditor extends React.PureComponent {
             </Provider>
         );
     }
+
 }

data/client/hippo/components/text-editor/display-modes/Button.jsx

@@ -1,8 +1,11 @@
 import React from 'react'; // eslint-disable-line no-unused-vars
 import Button from 'grommet/components/Button';
+import cn from 'classnames';
 
-const DisplayModeButton = ({ label, icon, onClick, active, disabled }) => (
-    <span className={active ? 'active' : ''}>
+const DisplayModeButton = ({
+    className, label, icon, onClick, active, disabled,
+}) => (
+    <span className={cn(className, { active })}>
         <Button
             plain
             secondary={active}

data/client/hippo/components/text-editor/display-modes/ToggleEdit.jsx

@@ -7,8 +7,9 @@ import { createStructuredSelector } from 'reselect';
 import EditIcon from 'grommet/components/icons/base/Edit';
 import Button from './Button';
 
-const Inner = ({ isEditMode: isedm, editMode: edm }) => (
+const Inner = ({ className, isEditMode: isedm, editMode: edm }) => (
     <Button
+        className={className}
         icon={<EditIcon />}
         label="Edit"
         active={isedm}

data/client/hippo/components/text-editor/display-modes/ToggleInsert.jsx

@@ -6,8 +6,9 @@ import { isInsertMode } from 'ory-editor-core/lib/selector/display';
 import { createStructuredSelector } from 'reselect';
 import Button from './Button';
 
-const Inner = ({ isInsertMode: isinm, insertMode: inm }) => (
+const Inner = ({ className, isInsertMode: isinm, insertMode: inm }) => (
     <Button
+        className={className}
         icon={<AddIcon />}
         label="Add"
         active={isinm}

data/client/hippo/components/text-editor/display-modes/ToggleLayout.jsx

@@ -6,8 +6,9 @@ import { isLayoutMode } from 'ory-editor-core/lib/selector/display';
 import { createStructuredSelector } from 'reselect';
 import Button from './Button';
 
-const Inner = ({ isLayoutMode: islm, layoutMode: lm }) => (
+const Inner = ({ className, isLayoutMode: islm, layoutMode: lm }) => (
     <Button
+        className={className}
         icon={<GridIcon />}
         label="Layout"
         active={islm}

data/client/hippo/components/text-editor/display-modes/TogglePreview.jsx

@@ -6,8 +6,9 @@ import { isPreviewMode } from 'ory-editor-core/lib/selector/display';
 import { createStructuredSelector } from 'reselect';
 import Button from './Button';
 
-const Inner = ({ isPreviewMode: ispvm, previewMode: pvm }) => (
+const Inner = ({ className, isPreviewMode: ispvm, previewMode: pvm }) => (
     <Button
+        className={className}
         icon={<Devices />}
         label="Preview"
         active={ispvm}

data/client/hippo/components/text-editor/display-modes/ToggleResize.jsx

@@ -6,8 +6,9 @@ import { isResizeMode } from 'ory-editor-core/lib/selector/display';
 import { createStructuredSelector } from 'reselect';
 import Button from './Button';
 
-const Inner = ({ isResizeMode: isrsm, resizeMode: rsm }) => (
+const Inner = ({ className, isResizeMode: isrsm, resizeMode: rsm }) => (
     <Button
+        className={className}
         icon={<ResizeIcon />}
         label="Resize"
         active={isrsm}

data/client/hippo/components/text-editor/display-modes/index.js

@@ -6,23 +6,23 @@ import ToggleInsert from './ToggleInsert';
 import ToggleLayout from './ToggleLayout';
 import TogglePreview from './TogglePreview';
 import ToggleResize from './ToggleResize';
-import SaveState from './SaveState';
+
 
 const Inner = (props: any) => (
     <Provider {...props}>
         <Header
             wrap
+
             margin="small"
             justify="end"
             pad={{ horizontal: 'small' }}
         >
-            <ToggleInsert />
-            <ToggleEdit />
-            <ToggleLayout />
-            <ToggleResize />
-            <TogglePreview />
+            <ToggleInsert className="insert" />
+            <ToggleEdit className="edit" />
+            <ToggleLayout className="layout" />
+            <ToggleResize className="resize" />
+            <TogglePreview className="preview" />
             {props.children}
-            <SaveState onSave={props.onSave} />
         </Header>
     </Provider>
 );

data/client/hippo/components/text-editor/image-plugin/Component/Display/index.js

@@ -23,6 +23,7 @@ const iconStyle = {
 @inject('assets')
 @observer
 export default class Display extends React.PureComponent {
+
     @computed get asset() {
         return find(this.props.assets, asset =>
             asset.metadata && asset.metadata.nodeId === this.props.id);
@@ -30,7 +31,7 @@ export default class Display extends React.PureComponent {
 
     @action.bound
     onFileDrop(files) {
-        let asset = this.asset;
+        let { asset } = this;
         if (!asset) {
             this.props.assets.push({ metadata: { nodeId: this.props.id } });
             asset = this.props.assets.get(this.props.assets.length - 1);
@@ -63,7 +64,7 @@ export default class Display extends React.PureComponent {
                 <div className={cn('content-image-wrapper', { focused })}>
                     <Button onClick={this.onAddClick}>{state.src ? 'Change' : 'Add'}</Button>
                     <Dropzone
-                        ref={dz => (this.dropZone = dz)}
+                        ref={(dz) => { this.dropZone = dz; }}
                         style={{}}
                         disableClick
                         multiple={false}
@@ -77,4 +78,5 @@ export default class Display extends React.PureComponent {
         }
         return this.renderImage();
     }
+
 }