hippo-fw 0.9.5 → 0.9.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 8a86a77e5eb0041425dcc05d9b6d8efb2c304a99
-  data.tar.gz: df658e7e5eb832884c88606575617b4247aa4e89
+  metadata.gz: ea4e1fab04ebb80ec4cadd61c6eb529e71cb9da7
+  data.tar.gz: 2f8567b02e13defacc31d703b526739b6f964551
 SHA512:
-  metadata.gz: 3df81f86cd6613d3ad71237534c7c997bac329470697ab6a83af8182e155059d1ee99d0e54298d45352a81ebfc137793560116af7271537c87cc2b62dba3e388
-  data.tar.gz: 566662660f26bf8cbb0dd4c31a4afdab9d1da1b53ca380bdeff349a9e7e7f16dab0cc18455f07f85a24c9e7c190c5b773a8a1f8b2f956d3bce701a174d9060ba
+  metadata.gz: 8007c42f669e7e8dde8b2696fa9a5e2d10a2690c4d7cff9a32e69e214429375c750b6ebbbccdeab401c10bf4f7d1f52f636df2ae5938ec6ee93880e699ef60b8
+  data.tar.gz: 7e9cc5649badcc65a8ec65ceae4a5e6f960ca35690c8f4656b911f9e41a8267558ff42744150307284a310631306b3e04aee8a4584c30a12330dc5cb130754d8

data/.nvmrc

@@ -0,0 +1,2 @@
+v8
+

data/.travis.yml

@@ -17,7 +17,7 @@ env:
   global:
     - DATABASE_URL=postgres://travis@127.0.0.1:5432/travis
     - REDIS_URL=redis://localhost:6379
-    - TRAVIS_NODE_VERSION="7"
+    - TRAVIS_NODE_VERSION="8"
 before_install:
   - nvm install $TRAVIS_NODE_VERSION
   - npm install

data/client/hippo/access/login-dialog.jsx

@@ -9,16 +9,15 @@ import User from '../user';
 
 @observer
 export default class LoginDialog extends React.Component {
-
     constructor() {
         super();
         bindAll(this, 'attemptLogin');
     }
 
     attemptLogin({ username, password }) {
-        User.attemptLogin(username, password)/* .then((session)=> {
+        User.attemptLogin(username, password);/* .then((session)=> {
                                                 if session.isValid
-                                                });*/
+                                                }); */
     }
 
     render() {
@@ -32,7 +31,6 @@ export default class LoginDialog extends React.Component {
                     secondaryText={User.lastServerMessage}
                 />
             </Layer>
-        )
+        );
     }
-
 }

data/client/hippo/boot.jsx

@@ -6,6 +6,8 @@ import { AppContainer } from 'react-hot-loader';
 import { onBoot } from './models/pub_sub';
 import './extensions/hippo';
 
+// react-tap-event-plugin is required for material-ui which is used by ory-editor-ui
+require('react-tap-event-plugin')();
 const Workspace = require('hippo/workspace').default;
 
 let Root;
@@ -33,8 +35,6 @@ whenDomReady().then(() => {
         delay(() => {
             onBoot();
             loading.parentNode.removeChild(loading);
-
         }, 400);
-
     }
 });

data/client/hippo/components/asset.jsx

@@ -15,7 +15,6 @@ import './asset.scss';
 
 @observer
 export default class Asset extends React.PureComponent {
-
     static defaultProps = {
         label: '',
         className: '',

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { bindAll } from 'lodash';
-import { observable } from 'mobx';
+import { partial } from 'lodash';
+import { observable, action } from 'mobx';
 import { observer } from 'mobx-react';
-
+import { autobind } from 'core-decorators';
+import cn from 'classnames';
 import Box from 'grommet/components/Box';
 
 import {
@@ -12,10 +13,10 @@ import {
 import 'react-virtualized/styles.css';
 
 import Query from '../models/query';
+import './data-list/data-list.scss';
 
 @observer
 export default class DataList extends React.Component {
-
     static defaultProps = {
         rowHeight: 40,
     }
@@ -33,32 +34,29 @@ export default class DataList extends React.Component {
     constructor(props) {
         super(props);
         this.query = props.query;
-        bindAll(this,
-                'rowRenderer',
-                'isRowLoaded',
-                'loadMoreRows',
-        );
     }
 
     componentWillMount() { this.query.open(); }
     componentWillUnmount() { this.query.close(); }
 
+    @autobind
     rowRenderer(props) {
-        const { rowComponent: Row } = this.props;
+        const { rowComponent: Row, onRowClick } = this.props;
         const row = this.query.results.rows[props.index];
         return (
-            <Row {...props} row={row} />
+            <Row {...props} row={row} onClick={partial(onRowClick, props.index, row)} />
         );
     }
 
+    @autobind
     isRowLoaded({ index }) {
         return (
-            this.query.results.rows.length > index
-            && !this.query.results.isRowLoading(index)
-            && this.query.results.rows[index]
+            (this.query.results.rows.length > index) &&
+                (this.query.results.isRowLoading(index) || this.query.results.rows[index])
         );
     }
 
+    @action.bound
     loadMoreRows({ startIndex: start, stopIndex }) {
         const limit = (stopIndex + 1) - start;
         return this.query.results.fetch({ start, limit });
@@ -72,7 +70,10 @@ export default class DataList extends React.Component {
         const { query } = this;
         const { rowHeight, rowRenderer, ...listProps } = this.props;
         return (
-            <Box className="data-list" align='stretch' direction='row' flex>
+            <Box
+                className={cn('data-list', { selectable: this.props.onRowClick })}
+                align='stretch' direction='row' flex
+            >
                 <InfiniteLoader
                     keyChange={query.results.updateKey}
                     minimumBatchSize={query.pageSize}

data/client/hippo/components/data-list/data-list.scss

@@ -0,0 +1,10 @@
+@import "~grommet/scss/grommet-core/settings";
+#hippo-root {
+    .data-list {
+        &.selectable {
+            .ReactVirtualized__Grid__innerScrollContainer {
+                cursor: pointer;
+            }
+        }
+    }
+}

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

@@ -15,7 +15,7 @@ import './data-table/table-styles.scss';
 import Query from '../models/query';
 import HeaderCell from './data-table/header-cell';
 
-function renderEditTriangle({ rowIndex, columnData: { onEdit }}) {
+function renderEditTriangle({ rowIndex, columnData: { onEdit } }) {
     return (
         <Button
             plain icon={<NextIcon />}
@@ -26,7 +26,6 @@ function renderEditTriangle({ rowIndex, columnData: { onEdit }}) {
 
 @observer
 export default class DataTable extends React.Component {
-
     static defaultProps = {
         canCreate: false,
         editRowIndex: null,
@@ -49,12 +48,12 @@ export default class DataTable extends React.Component {
         super(props);
         this.query = props.query;
         bindAll(this,
-                'rowRenderer',
-                'rowAtIndex',
-                'calculateRowHeight',
-                'isRowLoaded',
-                'loadMoreRows',
-                'headerRenderer',
+            'rowRenderer',
+            'rowAtIndex',
+            'calculateRowHeight',
+            'isRowLoaded',
+            'loadMoreRows',
+            'headerRenderer',
         );
         this.editIndex = props.editRowIndex;
         autorun(() => {
@@ -111,7 +110,7 @@ export default class DataTable extends React.Component {
         if (index < 0) {
             return 'header';
         }
-        return index % 2 === 0 ? 'e' : 'o';
+        return 0 === index % 2 ? 'e' : 'o';
     }
 
     @action.bound
@@ -130,7 +129,7 @@ export default class DataTable extends React.Component {
                 columnData: f,
                 dataKey: f.dataIndex || f.id,
                 headerRenderer: this.headerRenderer,
-            }, pick(f, 'width', 'label', 'flexGrow', 'flexShrink')),
+            }, pick(f, 'width', 'label', 'flexGrow', 'flexShrink', 'cellRenderer')),
         );
         if (this.props.editor) {
             definitions.unshift({
@@ -189,9 +188,8 @@ export default class DataTable extends React.Component {
 
     isRowLoaded({ index }) {
         return (
-            this.query.results.rows.length > index
-            && !this.query.results.isRowLoading(index)
-            && this.query.results.rows[index]
+            (this.query.results.rows.length > index) &&
+                (this.query.results.isRowLoading(index) || this.query.results.rows[index])
         );
     }
 
@@ -222,7 +220,9 @@ export default class DataTable extends React.Component {
                                 <Table
                                     height={height}
                                     width={width}
-                                    ref={(table) => { registerChild(table); this.tableRef = table; }}
+                                    ref={(table) => {
+                                        registerChild(table); this.tableRef = table;
+                                    }}
                                     rowHeight={this.calculateRowHeight}
                                     rowGetter={this.rowAtIndex}
                                     estimatedRowSize={40}

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

@@ -90,5 +90,4 @@ export default class SortingHeaderCell extends React.Component {
         }
         return label;
     }
-
 }

data/client/hippo/components/data-table/table-styles.scss

@@ -29,6 +29,13 @@
             &.o {
                 background-color: lighten($border-color, 75%);
             }
+
+        }
+        &.selectable {
+            .ReactVirtualized__Table__row {
+                cursor: pointer;
+            }
         }
+
     }
 }

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

@@ -20,7 +20,6 @@ const CLASS_ROOT = CSSClassnames.DATE_TIME;
 
 @observer
 export default class DateTime extends React.Component {
-
     static propTypes = {
         value:    PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
         onChange: PropTypes.func.isRequired,
@@ -38,6 +37,7 @@ export default class DateTime extends React.Component {
 
     @observable drop;
     @observable dateValue;
+
     @observable editingValue
 
     @action.bound
@@ -92,11 +92,7 @@ export default class DateTime extends React.Component {
     }
 
     @computed get value() {
-        return this.dateValue || moment(this.props.value || new Date());
-    }
-
-    set value(value) {
-        this.dateValue = value;
+        return this.dateValue || this.props.value ? moment(this.props.value) : '';
     }
 
     @action.bound
@@ -106,11 +102,13 @@ export default class DateTime extends React.Component {
 
     @action.bound
     onInputBlur() {
-        if (this.editingValue) {
-            this.value = moment(this.editingValue, this.props.format);
-            delete this.editingValue;
-            this.onForceClose();
-            this.props.onChange(this.value);
+        if (!this.editingValue) { return; }
+        const value = moment(this.editingValue, this.props.format);
+        this.editingValue = '';
+        this.onForceClose();
+        if (value.isValid()) {
+            this.props.onChange(value);
+            this.dateValue = value;
         }
     }
 
@@ -125,8 +123,9 @@ export default class DateTime extends React.Component {
 
     @action.bound
     onDateChange(date) {
-        this.value = moment(date);
-        this.props.onChange(this.value.toDate());
+        const value = moment(date);
+        this.props.onChange(value.toDate());
+        this.dateValue = value;
     }
 
     renderDrop() {
@@ -139,9 +138,14 @@ export default class DateTime extends React.Component {
         );
     }
 
+    @computed get inputValue() {
+        if (this.editingValue) { return this.editingValue; }
+        if (this.value) { return this.value.format(this.props.format); }
+        return '';
+    }
+
     render() {
-        const { props: { format, dateOnly } } = this;
-        const inputValue = this.editingValue || this.value.format(format);
+        const { inputValue, props: { format, dateOnly } } = this;
         const Icon = dateOnly ? CalendarIcon : ClockIcon;
 
         return (
@@ -165,5 +169,4 @@ export default class DateTime extends React.Component {
             </div>
         );
     }
-
 }

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

@@ -12,12 +12,12 @@ import LinkPreviousIcon from 'grommet/components/icons/base/LinkPrevious';
 import LinkNextIcon from 'grommet/components/icons/base/LinkNext';
 
 const Day = ({ i, w, d, className, ...props }) => {
-    const prevMonth = w === 0 && i > 7;
+    const prevMonth = 0 === w && i > 7;
     const nextMonth = w >= 4 && i <= 14;
     const cls = cx(className, {
         'prev-month': prevMonth,
         'next-month': nextMonth,
-        'current-day': !prevMonth && !nextMonth && i === d
+        'current-day': !prevMonth && !nextMonth && i === d,
     });
 
     return <td className={cls} {...props}>{i}</td>;
@@ -26,7 +26,6 @@ const Day = ({ i, w, d, className, ...props }) => {
 
 @observer
 export default class Calendar extends React.PureComponent {
-
     static propTypes = {
         moment: PropTypes.object.isRequired,
         onChange: PropTypes.func.isRequired,
@@ -34,14 +33,13 @@ export default class Calendar extends React.PureComponent {
 
     @action.bound
     selectDate(i, w) {
-        const prevMonth = w === 0 && i > 7;
+        const prevMonth = 0 === w && i > 7;
         const nextMonth = w >= 4 && i <= 14;
         const m = this.props.moment;
 
         m.date(i);
         if (prevMonth) m.subtract(1, 'month');
         if (nextMonth) m.add(1, 'month');
-
         this.props.onChange(m);
         this.forceUpdate();
     }
@@ -67,9 +65,9 @@ export default class Calendar extends React.PureComponent {
         const d2 = m.clone().date(1).day();
         const d3 = m.clone().endOf('month').date();
         const days = [].concat(
-            range(d1 - d2 + 1, d1 + 1),
+            range((d1 - d2) + 1, d1 + 1),
             range(1, d3 + 1),
-            range(1, 42 - d3 - d2 + 1),
+            range(1, ((42 - d3) - d2) + 1),
         );
         const weeks = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 

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

@@ -16,7 +16,6 @@ const CLASS_ROOT = 'date-time';
 
 @observer
 export default class DateTimeDrop extends React.Component {
-
     static propTypes = {
         value: PropTypes.object.isRequired,
         onChange: PropTypes.func.isRequired,
@@ -73,5 +72,4 @@ export default class DateTimeDrop extends React.Component {
             </Box>
         );
     }
-
 }

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

@@ -18,7 +18,6 @@ function getDigits(ev) {
 
 @observer
 export default class TimeSelector extends React.PureComponent {
-
     static propTypes = {
         moment: PropTypes.object.isRequired,
         onChange: PropTypes.func.isRequired,

data/client/hippo/components/form.jsx

@@ -8,7 +8,7 @@ import { isBlank } from '../lib/util';
 
 export Form from './form/wrapper';
 export Field from './form/fields';
-export { FormField, FormState } from './form/model';
+export { FormField, FormState } from './form/api';
 
 function buildTest(options, defaultOptions) {
     return merge({}, defaultOptions, options);

data/client/hippo/components/form/{model.js → api.js}

@@ -3,7 +3,7 @@
 }] */
 import { observable, computed, when, action } from 'mobx';
 import {
-    pick, isFunction, mapValues, every, get, filter, isNil, each,
+    pick, isFunction, mapValues, every, get, set, filter, isNil, each,
 } from 'lodash';
 
 export class FormField {
@@ -38,6 +38,13 @@ export class FormField {
         this.value = updatedValue;
     }
 
+    @action.bound
+    exposeError() {
+        if (!this.isValid) {
+            this.isTouched = true;
+        }
+    }
+
     @action.bound
     onBlur() {
         this.isTouched = true;
@@ -102,6 +109,16 @@ export class FormState {
         return !every(this.fields.values(), { isTouched: false });
     }
 
+    @action
+    exposeErrors() {
+        this.fields.forEach(field => field.exposeError());
+    }
+
+    @action
+    reset() {
+        this.fields.forEach(field => field.reset());
+    }
+
     get(path, defaultValue) {
         const [name, ...rest] = path.split('.');
         const field = this.fields.get(name);
@@ -112,14 +129,15 @@ export class FormState {
         return field;
     }
 
-    reset() {
-        this.fields.forEach(field => field.reset());
-    }
-
+    @action
     set(values) {
-        this.fields.forEach((field, name) => (field.value = isNil(values[name]) ? '' : values[name]));
+        this.fields.forEach((field, name) => {
+            const value = get(values, name);
+            field.value = isNil(value) ? '' : value;
+        });
     }
 
+    @action
     setFromModel(model) {
         if (get(model, 'syncInProgress.isFetch')) {
             when(
@@ -132,7 +150,7 @@ export class FormState {
     }
 
     persistTo(model) {
-        this.fields.forEach((field, name) => (model[name] = field.value));
+        this.fields.forEach((field, name) => (set(model, name, field.value)));
         return Promise.resolve(model);
     }
 }