hippo-fw 0.9.8 → 0.9.9

data/client/hippo/components/payments/field.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import FieldWrapper from 'grommet/components/FormField';
+import PaymentFields from 'payment-fields';
+import { action, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import { getColumnProps } from 'react-flexbox-grid';
+import classnames from 'classnames';
+import './field.scss';
+
+@observer
+export default class PaymentField extends React.Component {
+
+    @action.bound
+    onFocus() {
+        this.wrapper._onFocus();
+        this.errorMessage = '';
+    }
+
+    @action.bound
+    onBlur({ isValid, isPotentiallyValid }) {
+        this.isValid = isValid;
+        this.wrapper._onBlur();
+        this.errorMessage = isPotentiallyValid ? '' : this.props.errorMessage;
+    }
+
+    @observable isValid = false;
+    @observable errorMessage = '';
+
+    @action.bound onValidityChange({ isValid, isPotentiallyValid }) {
+        this.isValid = isValid;
+        this.errorMessage = isPotentiallyValid ? '' : this.props.errorMessage;
+    }
+
+    exposeError() {
+        if (!this.isValid) {
+            this.errorMessage = this.props.errorMessage;
+        }
+    }
+
+    @action.bound
+    setRef(f) { this.wrapper = f; }
+
+    render() {
+        const {
+            label, className, ...cardFieldProps
+        } = getColumnProps(this.props);
+        return (
+            <div className={classnames('payment-field form-field', className)}>
+                <FieldWrapper
+                    error={this.errorMessage}
+                    label={label}
+                    ref={this.setRef}
+                >
+                    <PaymentFields.Field
+                        {...cardFieldProps}
+                        onFocus={this.onFocus}
+                        onBlur={this.onBlur}
+                    />
+                </FieldWrapper>
+            </div>
+        );
+    }
+
+}

data/client/hippo/components/payments/field.scss

@@ -0,0 +1,18 @@
+.form-field.payment-field {
+    padding-bottom: 0;
+    .grommetux-form-field {
+        padding-bottom: 0;
+    }
+    .grommetux-form-field__contents {
+        height: 40px;
+        overflow: hidden;
+        padding-left: 22px;
+    }
+    .hosted-card-field {
+        height: 100%;
+        border: 0;
+    }
+    .payment-field {
+        height: 40px;
+    }
+}

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

@@ -8,7 +8,7 @@ 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 {
+export default class PopoutWindow extends React.Component {
 
     static propTypes = {
         title:      PropTypes.string.isRequired,

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

@@ -7,7 +7,7 @@ import Clause from './query-builder/clause';
 import './query-builder/query-builder.scss';
 
 @observer
-export default class QueryBuilder extends React.PureComponent {
+export default class QueryBuilder extends React.Component {
 
     static defaultProps = {
         autoFetch: false,

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

@@ -5,7 +5,7 @@ import { observer } from 'mobx-react';
 import { action } from 'mobx';
 
 @observer
-export default class BooleanPicker extends React.PureComponent {
+export default class BooleanPicker extends React.Component {
 
     @action.bound onChange(ev) {
         this.props.clause.value = ev.target.checked;

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

@@ -9,7 +9,7 @@ import ClauseModel   from '../../models/query/clause';
 
 
 @observer
-export class Radio extends React.PureComponent {
+export class Radio extends React.Component {
 
     static propTypes = {
         name: PropTypes.string.isRequired,
@@ -40,7 +40,7 @@ export class Radio extends React.PureComponent {
 }
 
 @observer
-export class ClauseFilter extends React.PureComponent {
+export class ClauseFilter extends React.Component {
 
     static propTypes = {
         clause: PropTypes.instanceOf(ClauseModel).isRequired,

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

@@ -3,9 +3,11 @@ import { defaults } from 'lodash';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { action } from 'mobx';
+import Button        from 'grommet/components/Button';
 import Box           from 'grommet/components/Box';
 import Menu          from 'grommet/components/Menu';
 import TextInput     from 'grommet/components/TextInput';
+import RefreshIcon   from 'grommet/components/icons/base/Refresh';
 import ClauseModel   from '../../models/query/clause';
 import { Radio, ClauseFilter } from './clause-filter';
 import BooleanPicker from './boolean-picker';
@@ -17,7 +19,7 @@ const defaultHandlers = {
 };
 
 @observer
-export default class Clause extends React.PureComponent {
+export default class Clause extends React.Component {
 
     static defaultProps = {
         typeHandlers: {},
@@ -28,28 +30,28 @@ export default class Clause extends React.PureComponent {
         typeHandlers: PropTypes.object,
     }
 
-    @action.bound
-    onSelect() {
+    @action.bound onSelect() {
         this.menuRef._onClose();
     }
 
-    @action.bound
-    onValueChange(ev) {
+    @action.bound onValueChange(ev) {
         this.props.clause.value = ev.target.value;
     }
 
-    @action.bound
-    setMenuRef(ref) {
+    @action.bound setMenuRef(ref) {
         this.menuRef = ref;
     }
 
+    @action.bound onRefresh() {
+        this.props.clause.query.fetch();
+    }
+
     get handlers() {
         return defaults(this.props.typeHandlers, defaultHandlers);
     }
 
     renderInputTag() {
-        const Tag = this.handlers[this.props.clause.field.dataType];
-
+        const Tag = this.handlers[this.props.clause.field.queryType];
         if (Tag) {
             return <Tag clause={this.props.clause} />;
         }
@@ -67,7 +69,7 @@ export default class Clause extends React.PureComponent {
         const { props: { clause } } = this;
 
         return (
-            <Box className="clause" direction='row' pad={{ between: 'small' }} align="center">
+            <Box responsive={false} className="clause" direction='row' pad={{ between: 'small' }} align="center">
                 <Menu
                     ref={this.setMenuRef}
                     size='large'
@@ -91,6 +93,10 @@ export default class Clause extends React.PureComponent {
                     </Box>
                 </Menu>
                 {this.renderInputTag()}
+                <Button
+                    icon={<RefreshIcon />}
+                    onClick={this.onRefresh}
+                />
             </Box>
         );
     }

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

@@ -4,7 +4,7 @@ import { action } from 'mobx';
 import DateTime from '../date-time';
 
 @observer
-export default class DatePicker extends React.PureComponent {
+export default class DatePicker extends React.Component {
 
     @action.bound onChange({ target: { value: dates } }) {
         this.props.clause.value = `${dates[0].toISOString()}...${dates[1].toISOString()}`;

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

@@ -1,7 +1,28 @@
 .query-builder {
     .clause {
-        :last-child {
-            flex: 1;
+        input { flex: 1; }
+        .reload {
+            padding: 0;
+        }
+        .reload {
+            display: none;
+        }
+        &:last-child .reload {
+            display: inline-block;
+        }
+        .grommetux-button > span {
+            padding: 0;
+        }
+        .grommetux-menu button {
+            max-width: 40vw;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+        input {
+            // set a min width so the input won't overflow flexbox
+            min-width: 40px;
         }
     }
+
+
 }

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

@@ -8,17 +8,18 @@ import { Field } from 'hippo/components/form';
 
 import Button from 'grommet/components/Button';
 import SearchIcon from 'grommet/components/icons/base/Search';
-
+import { BaseModel } from '../models/base';
 import Query from '../models/query';
 import './record-finder/record-finder.scss';
 import QueryLayer from './record-finder/query-layer';
 
 @inject('formState')
 @observer
-export default class RecordFinder extends React.PureComponent {
+export default class RecordFinder extends React.Component {
 
     static propTypes = {
         query: PropTypes.instanceOf(Query).isRequired,
+        model: PropTypes.instanceOf(BaseModel),
         name:  PropTypes.string.isRequired,
         label: PropTypes.string,
         recordsTitle: PropTypes.string.isRequired,
@@ -66,6 +67,7 @@ export default class RecordFinder extends React.PureComponent {
             query,
             onRecordFound: _,
             recordsTitle,
+            model,
             ...otherProps
         } = this.props;
 
@@ -73,6 +75,7 @@ export default class RecordFinder extends React.PureComponent {
             <Field
                 className='record-finder'
                 onKeyPress={this.onKeyPress}
+                readOnly={Boolean(model && !model.isNew)}
                 {...otherProps}
             >
                 <QueryLayer

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

@@ -15,7 +15,7 @@ import DataTable from '../data-table';
 import QueryBuilder from '../query-builder';
 
 @observer
-export default class QueryLayer extends React.PureComponent {
+export default class QueryLayer extends React.Component {
 
     static propTypes = {
         title: PropTypes.string.isRequired,

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

@@ -12,7 +12,7 @@ import { BaseModel } from '../models/base';
 
 
 @observer
-export default class SaveButton extends React.PureComponent {
+export default class SaveButton extends React.Component {
 
     static propTypes = {
         busy: PropTypes.bool,

data/client/hippo/components/screen.jsx

@@ -25,7 +25,7 @@ export default class Screen extends React.Component {
             <div
                 data-screen-id={this.props.screen.definition.id}
                 className={classnames(
-                    'screen',
+                    'hippo-screen',
                     this.props.screen.definition.id,
                     this.props.className, {
                         'is-active': this.props.screen.isActive,

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

@@ -1,29 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { action, observable, toJS } from 'mobx';
-import { isEmpty } from 'lodash';
+import { action, observable } from 'mobx';
 import { observer, Provider, PropTypes as MobxPropTypes } from 'mobx-react';
 
-// The editor core
-import Editor, { Editable, createEmptyState } from 'ory-editor-core';
+import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor';
+import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
+import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat';
+import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import BlockquotePlugin from '@ckeditor/ckeditor5-block-quote/src/blockquote';
+import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading';
+import ImagePlugin from '@ckeditor/ckeditor5-image/src/image';
+import ImagecaptionPlugin from '@ckeditor/ckeditor5-image/src/imagecaption';
+import ImagestylePlugin from '@ckeditor/ckeditor5-image/src/imagestyle';
+import ImagetoolbarPlugin from '@ckeditor/ckeditor5-image/src/imagetoolbar';
+import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
+import ListPlugin from '@ckeditor/ckeditor5-list/src/list';
+import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import ImageuploadPlugin from '@ckeditor/ckeditor5-upload/src/imageupload';
 
-// Require our ui components (optional). You can implement and use your own ui too!
-import { Trash, Toolbar } from 'ory-editor-ui';
-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 HippoUploadAdapter from './text-editor/upload-adapter';
 import './text-editor/text-editor.scss';
 
-const editorInstance = new Editor({
-    plugins,
-    editables: [createEmptyState()],
-    defaultPlugin,
-});
-
 @observer
-export default class TextEditor extends React.PureComponent {
+export default class TextEditor extends React.Component {
 
     static defaultProps = {
         assets: observable.array(),
@@ -31,16 +31,73 @@ export default class TextEditor extends React.PureComponent {
 
     static propTypes = {
         defaultContent: PropTypes.object,
-        onChange: PropTypes.func.isRequired,
+        onReady: PropTypes.func.isRequired,
         assets:  MobxPropTypes.observableArray,
     }
 
-    componentWillMount() {
-        const content = toJS(this.props.defaultContent);
-        this.content = isEmpty(content) ? createEmptyState() : content;
-        editorInstance.trigger.editable.add(this.content);
+    @action.bound setRef(r) {
+        this.body = r;
+        BalloonEditor.create(this.body, {
+            plugins: [
+                EssentialsPlugin,
+                AutoformatPlugin,
+                BoldPlugin,
+                ItalicPlugin,
+                BlockquotePlugin,
+                HeadingPlugin,
+                ImagePlugin,
+                ImagecaptionPlugin,
+                ImagestylePlugin,
+                ImagetoolbarPlugin,
+                LinkPlugin,
+                ListPlugin,
+                ParagraphPlugin,
+                ImageuploadPlugin,
+                HippoUploadAdapter,
+            ],
+            assets: this.props.assets,
+            toolbar: {
+                items: [
+                    'headings',
+                    'bold',
+                    'italic',
+                    'link',
+                    'bulletedList',
+                    'numberedList',
+                    'blockQuote',
+                    'undo',
+                    'redo',
+                ],
+            },
+            image: {
+                toolbar: [
+                    'imageTextAlternative', '|',
+                    'imageStyleAlignLeft', 'imageStyleFull', 'imageStyleAlignRight',
+                ],
+                styles: [
+                    // This option is equal to a situation where no style is applied.
+                    'imageStyleFull',
+
+                    // This represents an image aligned to left.
+                    'imageStyleAlignLeft',
+
+                    // This represents an image aligned to right.
+                    'imageStyleAlignRight',
+                ],
+            },
+        }).then((e) => {
+            this.editor = e;
+            this.props.onReady(this);
+        });
+    }
+
+    get contents() {
+        return this.editor.getData();
     }
 
+    set contents(html) {
+        this.editor.setData(html);
+    }
 
     @action.bound
     onEditStateChange(state) {
@@ -53,23 +110,8 @@ export default class TextEditor extends React.PureComponent {
             <Provider
                 assets={this.props.assets}
             >
-                <div className="text-editor">
-                    <DisplayModeToggle
-                        editor={editorInstance}
-                        onSave={this.onSave}
-                    >
-                        {this.props.children}
-                    </DisplayModeToggle>
-                    <div className="text-editor-content">
-                        <Editable
-                            editor={editorInstance}
-                            id={this.content.id}
-                            onAddImage={this.props.onAddImage}
-                            onChange={this.onEditStateChange}
-                        />
-                    </div>
-                    <Trash editor={editorInstance}/>
-                    <Toolbar editor={editorInstance} />
+
+                <div className="text-editor" ref={this.setRef}>
                 </div>
 
             </Provider>