hippo-fw 0.9.6 → 0.9.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ea4e1fab04ebb80ec4cadd61c6eb529e71cb9da7
-  data.tar.gz: 2f8567b02e13defacc31d703b526739b6f964551
+  metadata.gz: cf25cc10af49e41c6a3b48817f8bc1b50853484e
+  data.tar.gz: 7afc125a95df6077aa39e6f6acec0d42c3d926a5
 SHA512:
-  metadata.gz: 8007c42f669e7e8dde8b2696fa9a5e2d10a2690c4d7cff9a32e69e214429375c750b6ebbbccdeab401c10bf4f7d1f52f636df2ae5938ec6ee93880e699ef60b8
-  data.tar.gz: 7e9cc5649badcc65a8ec65ceae4a5e6f960ca35690c8f4656b911f9e41a8267558ff42744150307284a310631306b3e04aee8a4584c30a12330dc5cb130754d8
+  metadata.gz: 98ee0dc3e62a19bf1d3aa0503781a0b374061a0490c06a73039cb8f3040b455cfb9a18b157ae54c1940ecb27f9cb19f054656e9bd185a5276058809deaf6edad
+  data.tar.gz: 3217e075db4cac207c3b5cad67a8cb269114ca7f59a8396b8112472ce2acef5e347d808ee888baa4f61257d3e5ceaa5d61ba029689ec0505cbef6b6aa1d9aacf

data/client/hippo/components/asset.jsx

@@ -18,6 +18,7 @@ export default class Asset extends React.PureComponent {
     static defaultProps = {
         label: '',
         className: '',
+        tabIndex: 0,
     }
 
     static propTypes = {
@@ -25,6 +26,7 @@ export default class Asset extends React.PureComponent {
         name:      PropTypes.string.isRequired,
         label:     PropTypes.string,
         className: PropTypes.string,
+        tabIndex:  PropTypes.number,
     }
 
     @action.bound
@@ -43,6 +45,18 @@ export default class Asset extends React.PureComponent {
         return this.props.label || titleize(this.props.name);
     }
 
+    @action.bound
+    setDZRef(dz) {
+        this.dropZone = dz;
+    }
+
+    @action.bound
+    onKey(ev) {
+        if ('Enter' === ev.key) {
+            this.dropZone.open();
+        }
+    }
+
     preview() {
         if (this.asset && this.asset.exists) {
             return this.asset.isImage ?
@@ -56,20 +70,26 @@ export default class Asset extends React.PureComponent {
         );
     }
 
+
     render() {
-        const { model: _, label: __, name: ___, className, ...col } = this.props;
+        const { model: _, label: __, name: ___, className, tabIndex, ...col } = this.props;
 
         return (
             <Col
                 {...col}
                 className={classnames(className, 'asset', 'form-field')}
             >
-                <Field label={this.label} >
+                <Field
+                    label={this.label}
+                    tabIndex={tabIndex}
+                    onKeyPress={this.onKey}
+                >
                     <Dropzone
                         className="drop-zone"
                         activeClassName="drop-zone-active"
                         onDrop={this.onDrop}
                         multiple={false}
+                        ref={this.setDZRef}
                     >
                         {this.preview()}
                     </Dropzone>

data/client/hippo/components/asset.scss

@@ -6,7 +6,7 @@
             height: 200px;
             padding: 0.5rem;
             cursor: pointer;
-            overflow: scroll;
+            overflow: auto;
             &-active {
                 background-color: $selected-background-color;
             }

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

@@ -69,37 +69,48 @@ export default class DataList extends React.Component {
     render() {
         const { query } = this;
         const { rowHeight, rowRenderer, ...listProps } = this.props;
+
         return (
             <Box
                 className={cn('data-list', { selectable: this.props.onRowClick })}
-                align='stretch' direction='row' flex
+                align='stretch' flex
             >
-                <InfiniteLoader
-                    keyChange={query.results.updateKey}
-                    minimumBatchSize={query.pageSize}
-                    isRowLoaded={this.isRowLoaded}
-                    loadMoreRows={this.loadMoreRows}
-                    rowCount={query.results.totalCount}
-                >
-                    {({ onRowsRendered, registerChild }) =>
-                        <AutoSizer
-                            updateKey={query.results.updateKey}
-                        >
-                            {({ height, width }) =>
-                                <List
-                                    {...listProps}
-                                    height={height}
-                                    width={width}
-                                    ref={(list) => { registerChild(list); this.listRef = list; }}
-                                    rowHeight={rowHeight}
-                                    headerHeight={50}
-                                    onRowsRendered={onRowsRendered}
-                                    rowRenderer={rowRenderer || this.rowRenderer}
-                                    rowCount={query.results.rows.length}
-                                    keyChange={query.results.updateKey}
-                                />}
-                        </AutoSizer>}
-                </InfiniteLoader>
+
+                {this.props.header}
+
+                <Box className="body" align="stretch" flex>
+                    <InfiniteLoader
+                        keyChange={query.results.updateKey}
+                        minimumBatchSize={query.pageSize}
+                        isRowLoaded={this.isRowLoaded}
+                        loadMoreRows={this.loadMoreRows}
+                        rowCount={query.results.totalCount}
+                        keyChange={query.results.fingerprint}
+                    >
+                        {({ onRowsRendered, registerChild }) =>
+                            <AutoSizer
+                                keyChange={query.results.fingerprint}
+                                updateKey={query.results.updateKey}
+                            >
+                                {({ height, width }) =>
+                                    <List
+                                        {...listProps}
+                                        height={height}
+                                        width={width}
+                                        ref={(list) => {
+                                            registerChild(list);
+                                            this.listRef = list;
+                                        }}
+                                        rowHeight={rowHeight}
+                                        headerHeight={50}
+                                        onRowsRendered={onRowsRendered}
+                                        rowRenderer={rowRenderer || this.rowRenderer}
+                                        rowCount={query.results.rows.length}
+                                        keyChange={query.results.fingerprint}
+                                    />}
+                            </AutoSizer>}
+                    </InfiniteLoader>
+                </Box>
             </Box>
         );
     }

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

@@ -5,6 +5,8 @@
             .ReactVirtualized__Grid__innerScrollContainer {
                 cursor: pointer;
             }
+
         }
+
     }
 }

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

@@ -119,7 +119,7 @@ export default class DataTable extends React.Component {
     }
 
     @computed get gridRenderKey() {
-        return `${this.query.results.updateKey}-${this.editIndex}`;
+        return `${this.query.results.fingerprint}-${this.editIndex}`;
     }
 
     @computed get columnDefinitions() {
@@ -129,7 +129,9 @@ export default class DataTable extends React.Component {
                 columnData: f,
                 dataKey: f.dataIndex || f.id,
                 headerRenderer: this.headerRenderer,
-            }, pick(f, 'width', 'label', 'flexGrow', 'flexShrink', 'cellRenderer')),
+            }, pick(f, 'width', 'label', 'flexGrow', 'flexShrink',
+                'cellRenderer', 'className', 'headerClassName'),
+            ),
         );
         if (this.props.editor) {
             definitions.unshift({

data/client/hippo/components/data-table/formatters.js

@@ -0,0 +1,7 @@
+import Big from 'big.js';
+import { isNil, isNaN } from 'lodash';
+
+export function currency({ cellData: value }) { // eslint-disable-line import/prefer-default-export
+    if (isNil(value) || isNaN(value)) { return ''; }
+    return Big(value).round(2).toFixed(2);
+}

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

@@ -37,5 +37,15 @@
             }
         }
 
+        .ReactVirtualized__Table__rowColumn {
+            &.l { text-align: left; }
+            &.r { text-align: right; }
+            &.c { text-align: center; }
+        }
+        .ReactVirtualized__Table__headerColumn {
+            &.l { text-align: left; }
+            &.r { text-align: right; }
+            &.c { text-align: center; }
+        }
     }
 }

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

@@ -1,172 +1,132 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { action, observable, computed } from 'mobx';
-import { observer }   from 'mobx-react';
-import CalendarIcon from 'grommet/components/icons/base/Calendar';
-import ClockIcon from 'grommet/components/icons/base/Clock';
-import Button from 'grommet/components/Button';
-import CSSClassnames from 'grommet/utils/CSSClassnames';
-import { findAncestor, isDescendant } from 'grommet/utils/DOM';
-import KeyboardAccelerators from 'grommet/utils/KeyboardAccelerators';
-import Drop from 'grommet/utils/Drop';
-import moment from 'moment';
-
-import DateTimeDrop from './date-time/date-time-drop';
-import './date-time/date-time.scss';
-
-const INPUT = CSSClassnames.INPUT;
-const FORM_FIELD = CSSClassnames.FORM_FIELD;
-const CLASS_ROOT = CSSClassnames.DATE_TIME;
+import PropTypes    from 'prop-types';
+import { observer } from 'mobx-react';
+import { autobind } from 'core-decorators';
+import Flatpickr    from 'flatpickr';
+import { defaults, has, omit } from 'lodash';
+import { observable, action }  from 'mobx';
+import './date-time.scss';
+
+const hooks = [
+    'onOpen',
+    'onMonthChange',
+    'onYearChange',
+    'onReady',
+    'onValueUpdate',
+    'onDayCreate',
+    'onBlur',
+    'onChange',
+];
+
+const defaultOptions = {
+    enableTime: true,
+    format: 'M d Y h:iK',
+};
 
 @observer
-export default class DateTime extends React.Component {
+export default class DateTimePicker extends React.PureComponent {
     static propTypes = {
-        value:    PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
-        onChange: PropTypes.func.isRequired,
-        format:   PropTypes.string,
+        defaultValue: PropTypes.string,
+        options: PropTypes.object,
+        onChange: PropTypes.func,
+        onOpen: PropTypes.func,
+        onClose: PropTypes.func,
+        onMonthChange: PropTypes.func,
+        onYearChange: PropTypes.func,
+        onReady: PropTypes.func,
+        onValueUpdate: PropTypes.func,
+        onDayCreate: PropTypes.func,
+        value: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.array,
+            PropTypes.object,
+            PropTypes.number,
+        ]),
+        children: PropTypes.node,
     }
 
     static defaultProps = {
-        format: 'M/D/YYYY',
-        onDropChange: () => {},
+        options: {},
     }
 
-    static contextTypes = {
-        onDropChange: PropTypes.func,
-    }
-
-    @observable drop;
-    @observable dateValue;
+    @observable node;
 
-    @observable editingValue
+    componentWillReceiveProps(props) {
+        const options = this.getOptions(props);
 
-    @action.bound
-    onClose(ev) {
-        const dropElement = document.querySelector(`.${DateTimeDrop.className}`);
-        if (!isDescendant(this.containerRef, ev.target) &&
-            (!dropElement || !isDescendant(dropElement, ev.target))) {
-            this.setDropActivation(false);
+        if (has(props, 'value')) {
+            this.flatpickr.setDate(props.value, false);
         }
-    }
 
-    @action.bound
-    onForceClose() {
-        this.setDropActivation(false);
-    }
+        const optionsKeys = Object.getOwnPropertyNames(options);
 
-    @action.bound
-    setDropActivation(dropActive) {
-        const { onDropChange } =  this.context;
-
-        const listeners = {
-            esc: this.onForceClose,
-        };
-
-        if (dropActive && !this.dropActive) {
-            document.addEventListener('click', this.onClose);
-            KeyboardAccelerators.startListeningToKeyboard(this, listeners);
-            // If this is inside a FormField, place the drop in reference to it.
-            const control = findAncestor(this.containerRef, `.${FORM_FIELD}`) || this.containerRef;
-            this.drop = new Drop(control, this.renderDrop(), {
-                align: { top: 'bottom', left: 'left' },
-                focusControl: true,
-                context: this.context,
-            });
-            this.dropActive = true;
-            this.props.onDropChange();
-        } else if (!dropActive && this.dropActive) {
-            document.removeEventListener('click', this.onClose);
-            KeyboardAccelerators.stopListeningToKeyboard(this, listeners);
-
-            if (this.drop) {
-                this.drop.remove();
-                this.drop = undefined;
-            }
-            this.dropActive = false;
-            this.props.onDropChange();
-        }
+        for (let index = optionsKeys.length - 1; index >= 0; index--) {
+            const key = optionsKeys[index];
+            let value = options[key];
 
-        if (onDropChange) {
-            onDropChange(dropActive);
+            // Hook handlers must be set as an array
+            if (hooks.indexOf(key) !== -1 && !Array.isArray(value)) {
+                value = [value];
+            }
+            this.flatpickr.set(key, value);
         }
     }
 
-    @computed get value() {
-        return this.dateValue || this.props.value ? moment(this.props.value) : '';
-    }
-
-    @action.bound
-    onInputChange(ev) {
-        this.editingValue = ev.target.value;
-    }
+    componentDidMount() {
+        const options = this.getOptions(this.props);
+        this.flatpickr = new Flatpickr(this.node, options);
 
-    @action.bound
-    onInputBlur() {
-        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;
+        if (has(this.props, 'value')) {
+            this.flatpickr.setDate(this.props.value, false);
         }
     }
 
     componentWillUnmount() {
-        this.setDropActivation(false);
+        this.flatpickr.destroy();
     }
 
-    @action.bound
-    onControlClick() {
-        this.setDropActivation(true);
+
+    @autobind onClose() {
+        if (this.node.blur) { this.node.blur(); }
     }
 
-    @action.bound
-    onDateChange(date) {
-        const value = moment(date);
-        this.props.onChange(value.toDate());
-        this.dateValue = value;
+    @autobind onChange(dates) {
+        this.props.onChange({ target: { value: dates[0] } });
     }
 
-    renderDrop() {
-        return (
-            <DateTimeDrop
-                {...this.props}
-                onChange={this.onDateChange}
-                value={this.value}
-            />
-        );
+    getOptions(props) {
+        const options = defaults({
+            ...this.props.options,
+            onClose: this.onClose,
+            onChange: this.onChange,
+            dateFormat: props.format,
+        }, defaultOptions);
+        // Add prop hooks to options
+        hooks.forEach((hook) => {
+            if (this[hook]) {
+                options[hook] = this[hook];
+            } else if (this.props[hook]) {
+                options[hook] = this.props[hook];
+            }
+        });
+        return options;
     }
 
-    @computed get inputValue() {
-        if (this.editingValue) { return this.editingValue; }
-        if (this.value) { return this.value.format(this.props.format); }
-        return '';
+    @action.bound
+    setNode(node) {
+        this.node = node;
     }
 
     render() {
-        const { inputValue, props: { format, dateOnly } } = this;
-        const Icon = dateOnly ? CalendarIcon : ClockIcon;
+        // eslint-disable-next-line no-unused-vars
+        const { options, defaultValue, value, children, ...props } = omit(this.props, hooks);
 
         return (
-            <div
-                ref={r => (this.containerRef = r)}
-                className={CLASS_ROOT}
-            >
-                <input
-                    placeholder={format}
-                    className={`${INPUT} ${CLASS_ROOT}__input`}
-                    onClick={this.onControlClick}
-                    onChange={this.onInputChange}
-                    onBlur={this.onInputBlur}
-                    value={inputValue || ''}
-                />
-                <Button
-                    icon={<Icon />}
-                    onClick={this.onControlClick}
-                    className={`${CLASS_ROOT}__control`}
-                />
-            </div>
+            <input
+                {...props}
+                defaultValue={defaultValue}
+                ref={this.setNode}
+            />
         );
     }
 }