hippo-fw 0.9.4 → 0.9.5

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

@@ -0,0 +1,157 @@
+@import '../../styles/global';
+
+.date-time-drop {
+    $slider-handle-size: 20px;
+    $slider-size: 4px;
+    $slider-fix: 20px;
+    .calendar {
+        header {
+            min-height: 50px;
+        }
+        .grid {
+            width: 100%;
+            padding: 12px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            border-spacing: 0;
+        }
+        td {
+            padding: 8px 0;
+            text-align: center;
+            cursor: pointer;
+        }
+        thead {
+            td {
+                color: $secondary-text-color;
+                font-weight: normal;
+            }
+        }
+        tbody td {
+            color: #666666;
+
+            &:hover {
+                background-color: $hover-background-color;
+                color: $hover-text-color;
+            }
+        }
+        .current-day {
+            background-color: $brand-color;
+            color: $colored-text-color;
+            font-weight: 700;
+        }
+        .prev-month,
+        .next-month {
+            color: #999999;
+        }
+    }
+
+
+    .time-picker {
+        color: $background-color;
+        padding-top: 50px;
+
+        .showtime {
+            text-align: center;
+        }
+
+        .am-pm {
+            display: flex;
+            flex-direction: column;
+            margin-left: 10px;
+        }
+
+        .separater {
+            display: inline-block;
+            font-size: 32px;
+            font-weight: bold;
+            color: $inverse-background-color;
+            width: 32px;
+            height: 65px;
+            line-height: 65px;
+            text-align: center;
+        }
+
+        .time-text {
+            position: relative;
+            left: -10px;
+            font-size: 15px;
+            color: $inverse-background-color;
+            margin-top: 7px;
+            margin-bottom: 10px;
+        }
+
+        .sliders {
+            padding: 40px;
+            max-width: 500px;
+            margin: auto;
+        }
+
+        .minutes,
+        .hour {
+            width: 65px;
+            height: 65px;
+            padding: 0;
+            font-size: 38px;
+            background-color: $inverse-background-color;
+            border-radius: 3px;
+            text-align: center;
+            &:focus {
+                padding: 0;
+            }
+        }
+    }
+
+
+    .u-slider-time {
+        position: relative;
+        display: inline-block;
+        background-color: $control-background-color;
+        border-radius: 3px;
+        height: $slider-size;
+        width: 100%;
+        cursor: pointer;
+
+        .value {
+            position: absolute;
+            background-color: $brand-color;
+            border-radius: 3px;
+            top: 0;
+            height: 100%;
+        }
+
+        .handle {
+            position: absolute;
+            width: $slider-size;
+            height: $slider-size;
+
+            &:after {
+                position: relative;
+                display: block;
+                content: '';
+                top: -$slider-fix/2 - 2;
+                left: -($slider-size+$slider-fix)/2;
+                width: $slider-size + $slider-fix;
+                height: $slider-size + $slider-fix;
+                background-color: #fff;
+                border: 3px solid $brand-color; //inverse-background-color;
+                border-radius: 50%;
+                cursor: pointer;
+            }
+        }
+    }
+
+    .tab {
+        display: none;
+        &.active { display: block; }
+    }
+
+    .tabs {
+        > * { padding: 0.5rem; }
+        margin-bottom: 10px;
+        border-bottom: 1px solid;
+        .grommetux-control-icon { margin-right: 0.5rem; }
+    }
+
+}

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

@@ -0,0 +1,120 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import { inRange, get, isString } from 'lodash';
+import { action, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import InputSlider from 'react-input-slider';
+import CheckBox from 'grommet/components/CheckBox';
+import Box from 'grommet/components/Box';
+
+const NON_DIGIT = /\D/;
+
+function getDigits(ev) {
+    const val = get(ev, 'target.value', ev.x);
+    if (isString(val) && (!val || NON_DIGIT.test(val))) { return null; }
+    return parseInt(val, 10);
+}
+
+@observer
+export default class TimeSelector extends React.PureComponent {
+
+    static propTypes = {
+        moment: PropTypes.object.isRequired,
+        onChange: PropTypes.func.isRequired,
+        minuteStep: PropTypes.number,
+    }
+
+    @observable isPM;
+    @observable hour;
+    @observable minutes;
+
+    componentWillMount() {
+        this.set(this.props);
+    }
+
+    componentWillReceiveProps(nextProps) {
+        this.set(nextProps);
+    }
+
+    set(props) {
+        this.isPM = !!(12 <= props.moment.hour());
+        this.hour = (12 <= props.moment.hour()) ? props.moment.hour() - 12 : props.moment.hour();
+        this.minutes = props.moment.minute();
+    }
+
+    @action.bound
+    onHourChange(ev) {
+        const d = getDigits(ev);
+        const m = this.props.moment;
+        if (inRange(d, 1, 13)) {
+            m.hours(this.isPM ? d + 12 : d);
+            this.hour = d;
+        } else {
+            this.hour = 0;
+            m.hours(0);
+        }
+        this.props.onChange(m);
+    }
+
+    @action.bound
+    onMinuteChange(ev) {
+        const d = getDigits(ev);
+        if (inRange(d, 0, 60)) {
+            const m = this.props.moment;
+            m.minutes(d);
+            this.props.onChange(m);
+            this.minutes = d;
+        } else {
+            this.minutes = 0;
+        }
+    }
+
+    @action.bound
+    toggleAMPM(ev) {
+        this.isPM = ev.target.checked;
+        this.props.moment.hours(this.isPM ? this.hour + 12 : this.hour);
+        this.props.onChange(this.props.moment);
+    }
+
+    render() {
+        const { hour, minutes } = this;
+
+        return (
+            <div className={cn('time-picker', this.props.className)}>
+                <Box direction='row' className="showtime" justify="center" align="center">
+                    <input className="hour" value={hour} onChange={this.onHourChange} />
+                    <span className="separater">:</span>
+                    <input className="minutes" value={minutes} onChange={this.onMinuteChange} />
+                    <CheckBox
+                        toggle
+                        className="am-pm"
+                        label='AM / PM'
+                        checked={this.isPM}
+                        onChange={this.toggleAMPM}
+                    />
+                </Box>
+
+                <div className="sliders">
+                    <div className="time-text">Hours:</div>
+                    <InputSlider
+                        className="u-slider-time"
+                        xmin={1}
+                        xmax={12}
+                        step={this.props.minuteStep}
+                        x={hour}
+                        onChange={this.onHourChange}
+                    />
+                    <div className="time-text">Minutes:</div>
+                    <InputSlider
+                        className="u-slider-time"
+                        xmin={0}
+                        xmax={59}
+                        x={minutes || 0}
+                        onChange={this.onMinuteChange}
+                    />
+                </div>
+            </div>
+        );
+    }
+}

data/client/hippo/components/form/fields/date-wrapper.jsx

@@ -3,11 +3,13 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { action, observable } from 'mobx';
 import moment from 'moment';
-import DateTime  from 'grommet/components/DateTime';
+import DateTime  from '../../date-time';
 
 @observer
 export default class DateWrapper extends React.PureComponent {
-    static defaultProps = { format: 'M/D/YYYY h:mm a' }
+    static defaultProps = {
+        format: 'M/D/YYYY h:mm a'
+    }
     static childContextTypes = { onDropChange: PropTypes.func }
     @observable isSelecting;
     @observable dateValue;
@@ -29,7 +31,6 @@ export default class DateWrapper extends React.PureComponent {
         this.props.onChange({ target: { value: this.dateValue } });
     }
 
-
     @action.bound onBlur(ev) {
         this.dateValue = moment(ev.target.value, this.props.format).toDate();
         const event = { target: { value: this.dateValue } };

data/client/hippo/components/form/model.js

@@ -69,7 +69,6 @@ export class FormField {
 
 
 export class FormState {
-
     fields = observable.map();
 
     @action
@@ -136,5 +135,4 @@ export class FormState {
         this.fields.forEach((field, name) => (model[name] = field.value));
         return Promise.resolve(model);
     }
-
 }

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { action, observable, toJS } from 'mobx';
+import { isEmpty } from 'lodash';
+import { observer } from 'mobx-react';
+import { Provider, PropTypes as MobxPropTypes } from 'mobx-react';
+
+// The editor core
+import Editor, { Editable, createEmptyState } from 'ory-editor-core';
+
+// Require our ui components (optional). You can implement and use your own ui too!
+import { Trash, Toolbar } from 'ory-editor-ui';
+import tapEventPlugin from 'react-tap-event-plugin';
+
+import { plugins, defaultPlugin } from './text-editor/plugins';
+
+import 'ory-editor-ui/lib/index.css';
+import 'ory-editor-core/lib/index.css';
+
+import DisplayModeToggle from './text-editor/display-modes';
+import './text-editor/text-editor.scss';
+
+
+@observer
+export default class TextEditor extends React.PureComponent {
+
+    static defaultProps = {
+        assets: observable.array(),
+    }
+
+    static propTypes = {
+        defaultContent: PropTypes.object,
+        assets:  MobxPropTypes.observableArray,
+        onComplete: PropTypes.func.isRequired,
+    }
+
+    componentWillMount() {
+        const content = toJS(this.props.defaultContent);
+        this.content = isEmpty(content) ? createEmptyState() : content;
+        this.editor = new Editor({
+            plugins,
+            editables: [this.content],
+            defaultPlugin,
+        });
+        tapEventPlugin();
+    }
+
+    @action.bound
+    onSave() {
+        this.props.onComplete({ content: this.content });
+    }
+
+    @action.bound
+    onEditStateChange(state) {
+        this.content = state;
+    }
+
+    render() {
+        return (
+            <Provider
+                assets={this.props.assets}
+            >
+                <div className="text-editor">
+                    <DisplayModeToggle
+                        editor={this.editor}
+                        onSave={this.onSave}
+                    >
+                        {this.props.children}
+                    </DisplayModeToggle>
+                    <div className="text-editor-content">
+                        <Editable
+                            editor={this.editor}
+                            id={this.content.id}
+                            onAddImage={this.props.onAddImage}
+                            onChange={this.onEditStateChange}
+                        />
+                    </div>
+                    <Trash editor={this.editor}/>
+                    <Toolbar editor={this.editor} />
+                </div>
+
+            </Provider>
+        );
+    }
+}

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

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

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import SaveIcon from 'grommet/components/icons/base/Save';
+import Button from './Button';
+
+export default class SaveState extends React.PureComponent {
+    render() {
+        const { props: { onSave } } = this;
+
+        return (
+            <Button
+                icon={<SaveIcon />}
+                label="Save"
+                onClick={onSave}
+            />
+        );
+    }
+}

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

@@ -0,0 +1,22 @@
+// @flow
+import React from 'react'; // eslint-disable-line no-unused-vars
+import { connect } from 'react-redux';
+import { editMode } from 'ory-editor-core/lib/actions/display';
+import { isEditMode } from 'ory-editor-core/lib/selector/display';
+import { createStructuredSelector } from 'reselect';
+import EditIcon from 'grommet/components/icons/base/Edit';
+import Button from './Button';
+
+const Inner = ({ isEditMode: isedm, editMode: edm }) => (
+    <Button
+        icon={<EditIcon />}
+        label="Edit"
+        active={isedm}
+        onClick={edm}
+    />
+);
+
+const mapStateToProps = createStructuredSelector({ isEditMode });
+const mapDispatchToProps = { editMode };
+
+export default connect(mapStateToProps, mapDispatchToProps)(Inner);