hippo-fw 0.9.4 → 0.9.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 66252f602687cd15c345fe869696110e2b106c45
-  data.tar.gz: 6e63cb8121ff3b3a7b5d4186306755648397342f
+  metadata.gz: 8a86a77e5eb0041425dcc05d9b6d8efb2c304a99
+  data.tar.gz: df658e7e5eb832884c88606575617b4247aa4e89
 SHA512:
-  metadata.gz: 166aadffc4273278372aad7b702ddb0baac76f106afa7482be135aef026c5c0f3071ae6fa7dbffa5b3ff9667b81620b43356b64615a393d9d328156ae22e2a8a
-  data.tar.gz: f9b71478268619454b76bd254e45c5947274f70228b355fc39f8f66cf752fb86c19e3eb3501ea63ac7fa5bc74e0d4c803ae6e76cfdf236d8ac7ceab4c4ceb957
+  metadata.gz: 3df81f86cd6613d3ad71237534c7c997bac329470697ab6a83af8182e155059d1ee99d0e54298d45352a81ebfc137793560116af7271537c87cc2b62dba3e388
+  data.tar.gz: 566662660f26bf8cbb0dd4c31a4afdab9d1da1b53ca380bdeff349a9e7e7f16dab0cc18455f07f85a24c9e7c190c5b773a8a1f8b2f956d3bce701a174d9060ba

data/.gitignore

@@ -7,6 +7,7 @@
 .yardoc
 Gemfile.lock
 InstalledFiles
+config/secrets.yml
 coverage
 doc/
 log/

data/.travis.yml

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

data/Gemfile

@@ -2,7 +2,7 @@ source 'https://rubygems.org'
 
 gemspec
 
-gem "activerecord-multi-tenant", git: 'https://github.com/citusdata/activerecord-multi-tenant.git', branch: 'release-0.5.1'
+# gem "activerecord-multi-tenant", git: 'https://github.com/citusdata/activerecord-multi-tenant.git', branch: 'release-0.5.1'
 
 # gem "activerecord-multi-tenant", git: "https://github.com/nathanstitt/activerecord-multi-tenant", branch: 'query_rewriter'
 

data/client/hippo/__mocks__/config.js

@@ -5,10 +5,10 @@ window.localStorage = {
     },
 };
 
-const config = jest.genMockFromModule('../models/config');
-//
-// config.bootstrapUserData = jest.fn();
-// config.reset = jest.fn();
+const Config = jest.genMockFromModule('../models/config');
+const { default: DefaultConfig } = Config;
+const config =  new DefaultConfig();
+
 Object.defineProperty(config, 'api_path', {
     value: '/api',
 });

data/client/hippo/boot.jsx

@@ -4,6 +4,7 @@ import whenDomReady from 'when-dom-ready';
 import { delay } from 'lodash';
 import { AppContainer } from 'react-hot-loader';
 import { onBoot } from './models/pub_sub';
+import './extensions/hippo';
 
 const Workspace = require('hippo/workspace').default;
 

data/client/hippo/components/asset.jsx

@@ -22,9 +22,9 @@ export default class Asset extends React.PureComponent {
     }
 
     static propTypes = {
-        model:   PropTypes.instanceOf(BaseModel).isRequired,
-        name: PropTypes.string.isRequired,
-        label:    PropTypes.string,
+        model:     PropTypes.instanceOf(BaseModel).isRequired,
+        name:      PropTypes.string.isRequired,
+        label:     PropTypes.string,
         className: PropTypes.string,
     }
 
@@ -33,7 +33,7 @@ export default class Asset extends React.PureComponent {
         if (!this.asset) {
             this.props.model[this.props.name] = {};
         }
-        this.asset.file = files[0];
+        this.asset.setFile(files[0]);
     }
 
     get asset() {

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

@@ -0,0 +1,169 @@
+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;
+
+@observer
+export default class DateTime extends React.Component {
+
+    static propTypes = {
+        value:    PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
+        onChange: PropTypes.func.isRequired,
+        format:   PropTypes.string,
+    }
+
+    static defaultProps = {
+        format: 'M/D/YYYY',
+        onDropChange: () => {},
+    }
+
+    static contextTypes = {
+        onDropChange: PropTypes.func,
+    }
+
+    @observable drop;
+    @observable dateValue;
+    @observable editingValue
+
+    @action.bound
+    onClose(ev) {
+        const dropElement = document.querySelector(`.${DateTimeDrop.className}`);
+        if (!isDescendant(this.containerRef, ev.target) &&
+            (!dropElement || !isDescendant(dropElement, ev.target))) {
+            this.setDropActivation(false);
+        }
+    }
+
+    @action.bound
+    onForceClose() {
+        this.setDropActivation(false);
+    }
+
+    @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();
+        }
+
+        if (onDropChange) {
+            onDropChange(dropActive);
+        }
+    }
+
+    @computed get value() {
+        return this.dateValue || moment(this.props.value || new Date());
+    }
+
+    set value(value) {
+        this.dateValue = value;
+    }
+
+    @action.bound
+    onInputChange(ev) {
+        this.editingValue = ev.target.value;
+    }
+
+    @action.bound
+    onInputBlur() {
+        if (this.editingValue) {
+            this.value = moment(this.editingValue, this.props.format);
+            delete this.editingValue;
+            this.onForceClose();
+            this.props.onChange(this.value);
+        }
+    }
+
+    componentWillUnmount() {
+        this.setDropActivation(false);
+    }
+
+    @action.bound
+    onControlClick() {
+        this.setDropActivation(true);
+    }
+
+    @action.bound
+    onDateChange(date) {
+        this.value = moment(date);
+        this.props.onChange(this.value.toDate());
+    }
+
+    renderDrop() {
+        return (
+            <DateTimeDrop
+                {...this.props}
+                onChange={this.onDateChange}
+                value={this.value}
+            />
+        );
+    }
+
+    render() {
+        const { props: { format, dateOnly } } = this;
+        const inputValue = this.editingValue || this.value.format(format);
+        const Icon = dateOnly ? CalendarIcon : ClockIcon;
+
+        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>
+        );
+    }
+
+}

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

@@ -0,0 +1,38 @@
+#hippo-root {
+    @import '~input-moment/dist/input-moment.css';
+    .date-time.component {
+
+        .tab {
+            display: none;
+            &.active { display: block; }
+        }
+
+        .tabs {
+            > * { padding: 0.23rem; }
+            margin-bottom: 10px;
+            .grommetux-control-icon { margin-right: 0.5rem; }
+        }
+
+        .toolbar {
+            display: flex;
+            justify-content: space-between;
+            button {
+                min-width: 30px;
+                padding: 0;
+                &.next-month {
+                    &:before {
+                        content: ">";
+                        display: block;
+                    }
+                }
+                &.prev-month {
+                    &:before {
+                        content: "<";
+                        display: block;
+                    }
+                }
+            }
+        }
+    }
+
+}

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

@@ -0,0 +1,115 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { action } from 'mobx';
+import cx from 'classnames';
+import range from 'lodash/range';
+import chunk from 'lodash/chunk';
+import Header from 'grommet/components/Header';
+import Button from 'grommet/components/Button';
+import Title from 'grommet/components/Title';
+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 nextMonth = w >= 4 && i <= 14;
+    const cls = cx(className, {
+        'prev-month': prevMonth,
+        'next-month': nextMonth,
+        'current-day': !prevMonth && !nextMonth && i === d
+    });
+
+    return <td className={cls} {...props}>{i}</td>;
+};
+
+
+@observer
+export default class Calendar extends React.PureComponent {
+
+    static propTypes = {
+        moment: PropTypes.object.isRequired,
+        onChange: PropTypes.func.isRequired,
+    }
+
+    @action.bound
+    selectDate(i, w) {
+        const prevMonth = w === 0 && 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();
+    }
+
+    @action.bound
+    prevMonth(e) {
+        e.preventDefault();
+        this.props.onChange(this.props.moment.subtract(1, 'month'));
+        this.forceUpdate();
+    }
+
+    @action.bound
+    nextMonth(e) {
+        e.preventDefault();
+        this.props.onChange(this.props.moment.add(1, 'month'));
+        this.forceUpdate();
+    }
+
+    render() {
+        const m = this.props.moment;
+        const d = m.date();
+        const d1 = m.clone().subtract(1, 'month').endOf('month').date();
+        const d2 = m.clone().date(1).day();
+        const d3 = m.clone().endOf('month').date();
+        const days = [].concat(
+            range(d1 - d2 + 1, d1 + 1),
+            range(1, d3 + 1),
+            range(1, 42 - d3 - d2 + 1),
+        );
+        const weeks = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+        return (
+            <div className={cx('calendar', this.props.className)}>
+
+                <Header key='header' justify='between'>
+                    <Button className="previous" icon={<LinkPreviousIcon />} onClick={this.prevMonth} />
+                    <Title className="title" responsive={false}>
+                        {m.format('MMMM YYYY')}
+                    </Title>
+                    <Button className="next" icon={<LinkNextIcon />} onClick={this.nextMonth} />
+                </Header>
+
+                <div className="grid">
+                    <table>
+                        <thead>
+                            <tr>
+                                {weeks.map((w, i) => <td key={i}>{w}</td>)}
+                            </tr>
+                        </thead>
+
+                        <tbody>
+                            {chunk(days, 7).map((row, w) =>
+                                <tr key={w}>
+                                    {row.map(i =>
+                                        <Day
+                                            key={i}
+                                            i={i}
+                                            d={d}
+                                            w={w}
+                                            onClick={() => this.selectDate(i, w)}
+                                        />,
+                                    )}
+                                </tr>,
+                            )}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { action, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import CSSClassnames from 'grommet/utils/CSSClassnames';
+import CalendarIcon from 'grommet/components/icons/base/Calendar';
+import ClockIcon from 'grommet/components/icons/base/Clock';
+import Box from 'grommet/components/Box';
+import cn from 'classnames';
+
+import Calendar from './calendar';
+import Time from './time';
+
+const FORM_FIELD = CSSClassnames.FORM_FIELD;
+const CLASS_ROOT = 'date-time';
+
+@observer
+export default class DateTimeDrop extends React.Component {
+
+    static propTypes = {
+        value: PropTypes.object.isRequired,
+        onChange: PropTypes.func.isRequired,
+        minuteStep: PropTypes.number,
+    }
+
+    static className = 'date-time-drop';
+
+    @observable isShowingTime = false;
+
+    @action.bound
+    toggleTabs() {
+        this.isShowingTime = !this.isShowingTime;
+    }
+
+    render() {
+        return (
+            <Box
+                className={`${this.constructor.className} component date-time-drop`}
+            >
+                <Box
+                    direction='row'
+                    className="tabs"
+                >
+                    <Box
+                        onClick={this.isShowingTime ? this.toggleTabs : null}
+                        colorIndex={this.isShowingTime ? '' : 'neutral-1'}
+                        align="center" justify="center" flex direction='row' className="calendar"
+                    >
+                        <CalendarIcon />
+                        Day
+                    </Box>
+                    <Box
+                        onClick={this.isShowingTime ? null : this.toggleTabs}
+                        colorIndex={this.isShowingTime ? 'neutral-1' : ''}
+                        align="center" justify="center" flex direction='row' className="time"
+                    >
+                        <ClockIcon />
+                        Time
+                    </Box>
+                </Box>
+                <div className={cn('tab', { active: !this.isShowingTime })}>
+                    <Calendar
+                        moment={this.props.value}
+                        onChange={this.props.onChange}
+                    />
+                </div>
+                <div className={cn('tab', { active: this.isShowingTime })}>
+                    <Time
+                        moment={this.props.value}
+                        onChange={this.props.onChange}
+                    />
+                </div>
+            </Box>
+        );
+    }
+
+}