hippo-fw 0.9.1

data/client/hippo/components/shared/AssetsListing.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+export class AssetsListing extends React.Component {
+    static propTypes = {
+        assets: Hippo.PropTypes.Collection.isRequired,
+        size: PropTypes.oneOf([
+            'thumb', 'medium', 'original'
+        ]).isRequired
+    };
+
+    static modelBindings =
+        {assets: 'props'};
+    render() {
+        return (
+            <div export className="assets-listing">
+                {this.assets.map(asset =>
+                        <LC.ImageAsset key={asset.cid} asset={asset} size="thumb" />)}
+            </div>
+        );
+    }
+}

data/client/hippo/components/shared/Checkbox.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+export class FakeInputEvent {
+    constructor(value) {
+        this.target = {value};
+    }
+    isDefaultPrevented() { return false; }
+}
+
+
+export class Checkbox extends React.Component {
+    static propTypes =
+        {supportIndeterminate: PropTypes.bool};
+
+    static mixins = [
+        Hippo.Components.Form.InputFieldMixin
+    ];
+    componentDidMount() { return this.updateIndeterminate(); }
+    componentDidUpdate() { return this.updateIndeterminate(); }
+
+    updateIndeterminate() {
+        if (!this.props.supportIndeterminate) { return; }
+        return (
+            _.dom(this).el.indeterminate =
+                (this.props.checked !== true) && (this.props.checked !== false)
+        );
+    }
+
+    handleCheckboxChange(ev) {
+        if (ev.target.checked) {
+            return (
+                this.fieldMixinSetValue( new FakeInputEvent(this.props.value) )
+            );
+        }
+    }
+
+    renderInputField(props, handlers) {
+        return (
+            <input
+                type="checkbox"
+                {...handlers}
+                {...props}
+                checked={this.props.checked}
+                onChange={this.handleCheckboxChange} />
+        );
+    }
+}

data/client/hippo/components/shared/CountBadge.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export class CountBadge extends React.Component {
+    static propTypes =
+        {count: React.PropTypes.number};
+
+    render() {
+        const export classes = _.classnames('count', {super: (this.props.superScript != null)});
+        return (
+            React.createElement(BS.Badge, {"export className": (classes)}, (this.props.count))
+        );
+    }
+}

data/client/hippo/components/shared/DateTime.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+export default class DateTime extends React.Component {
+    static mixins = [
+        Hippo.Components.Form.FieldMixin
+    ];
+    static fieldClassName = 'date-time';
+
+    static propTypes = {
+        unlabled: PropTypes.bool,
+        format:   PropTypes.string
+    };
+    getDefaultProps() {
+        return (
+            {format: 'ddd, MMM Do YYYY, h:mm a'}
+        );
+    }
+
+
+    handleKeyDown(ev) {
+        if (ev.key === 'Enter') { return this.props.onEnter(); }
+    }
+
+    renderDisplay(props) {
+        const clean = LC.Form.FieldMixin.statics.cleanSizeProps(props);
+        return (
+            <BS.FormControl.Static {...clean}>
+                {this.getDateValue().format(this.props.format)}
+            </BS.FormControl.Static>
+        );
+    }
+
+    getDateValue() {
+        return (
+            _.moment.utc(this.fieldMixinGetValue())
+        );
+    }
+
+    handleDateTimeChange(val) {
+        return (
+            this.fieldMixinSetValue({target: {value: Hippo.u.utcToLocalDate(val)}})
+        );
+    }
+
+    renderEdit(props) {
+        props = _.extend({
+            ref:       'control',
+            value:     Hippo.u.dateToUTC(this.getDateValue().toDate()),
+            onChange:  this.handleDateTimeChange
+        }, this.props);
+        props = _.omit(LC.Form.FieldMixin.statics.cleanSizeProps(props), 'writable');
+        return (
+            <Hippo.Vendor.ReactWidgets.DateTimePicker {...props} />
+        );
+    }
+}

data/client/hippo/components/shared/DisplayValue.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default class DisplayValue extends React.Component {
+    static mixins = [
+        Hippo.Components.Form.FieldMixin
+    ];
+    static fieldClassName = 'display-value';
+    renderEdit(props) {
+        return (
+            <BS.FormControl.Static {...props}>
+                {this.fieldMixinGetValue()}
+            </BS.FormControl.Static>
+        );
+    }
+}

data/client/hippo/components/shared/ErrorDisplay.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+export class ErrorDisplay extends React.Component {
+    static propTypes =
+        {model:  Hippo.PropTypes.State.isRequired};
+    bindEvents() {
+        return (
+            {model: "change:error"}
+        );
+    }
+
+    clearErrors() {
+        return (
+            this.model.errors = null
+        );
+    }
+
+    render() {
+        if (!this.model.errors) { return null; }
+        return (
+            <div export className="alert alert-warning alert-dismissible" role="alert">
+                <button
+                    onClick={this.clearErrors}
+                    type="button"
+                    export className="close"
+                    data-dismiss="alert"
+                    aria-label="Close">
+                    <span aria-hidden="true">
+                        ×
+                    </span>
+                </button>
+                <i export className="icon icon-exclamation-circle" />
+                {this.model.errorMessage}
+            </div>
+        );
+    }
+}

data/client/hippo/components/shared/FieldMixin.jsx

@@ -0,0 +1,254 @@
+import React from 'react';
+
+if (!Hippo.Components.Form) { Hippo.Components.Form = {}; }
+
+
+Hippo.Components.Form.FieldMixin = {
+
+    registerForPubSub: false,
+
+    bindEvents() {
+        return (
+            {model: `change:${this.props.name} remote-update:${this.props.name} invalid-fields invalid-field:${this.getInvalidFieldName()}`}
+        );
+    },
+
+    mixins: [
+        Hippo.React.Mixins.Access,
+        Hippo.React.Mixins.ReadEditingState,
+        Hippo.React.Mixins.FieldErrors
+    ],
+
+    propTypes: {
+        model:     Hippo.PropTypes.State.isRequired,
+        name:      React.PropTypes.string.isRequired,
+        unlabeled: React.PropTypes.bool,
+        fieldOnly: React.PropTypes.bool,
+        onChange:  React.PropTypes.func,
+        unstyled:  React.PropTypes.bool,
+        getValue:  React.PropTypes.func,
+        setValue:  React.PropTypes.func,
+        align: React.PropTypes.oneOf([
+            'right', 'left', 'center'
+        ]),
+        label: React.PropTypes.oneOfType([
+            React.PropTypes.string, React.PropTypes.element
+        ])
+    },
+
+    fieldMixinSetValue(ev) {
+        if (this.props.onChange) {
+            this.props.onChange(ev);
+        }
+        if (true !== __guardMethod__(ev, 'isDefaultPrevented', o => o.isDefaultPrevented())) {
+            return (
+                this.model[this.props.name] = ev.target.value
+            );
+        }
+    },
+
+    componentWillUnmount() {
+        if (this.state.pendingChangeSetDelay) { return clearTimeout(this.state.pendingChangeSetDelay); }
+    },
+
+    _unsetChangeSet() {
+        return (
+            this.setState({displayChangeset: false, pendingChangeSetDelay: null})
+        );
+    },
+
+    setModelState() {
+        let pendingChangeSetDelay;
+        const displayChangeset = this.model.updatingFromChangeset && this.model.changedAttributes()[this.props.name];
+        if (displayChangeset && !this.state.pendingChangeSetDelay) {
+            pendingChangeSetDelay = _.delay(this._unsetChangeSet, 2000);
+        }
+        return (
+            this.setState({pendingChangeSetDelay, displayChangeset})
+        );
+    },
+
+    _fieldMixinGetLabelValue() {
+        return (
+            __guardMethod__(this, 'getLabelValue', o => o.getLabelValue()) ||
+                this.props.label ||
+                _.titleize(_.humanize(this.props.name))
+        );
+    },
+
+    fieldMixinGetValue() {
+        const value = this.props.getValue ?
+            this.props.getValue.call(this.model, this.props)
+        : (this.props.value != null) ?
+            this.props.value
+        : this.getValue ?
+            this.getValue()
+        :
+            this.model[this.props.name];
+        if (_.isBlank(value)) {
+            return (
+                ''
+            );
+        } else {
+            return (
+                value
+            );
+        }
+    },
+
+    _fieldMixinRenderFormGroup(child, props, options) {
+        let feedback, invalidMsg, label;
+        if (invalidMsg = this.fieldInvalidValueMessage()) {
+            feedback = [
+                React.createElement(BS.FormControl.Feedback, {"key": "feedback"}),
+                React.createElement(BS.HelpBlock, {"key": "help"}, (invalidMsg))
+            ];
+        }
+
+        if (!this.props.unlabeled) {
+            label =
+                React.createElement(BS.ControlLabel, null,
+                    (this._fieldMixinGetLabelValue())
+                );
+        }
+
+        return (
+
+            React.createElement(BS.Col, Object.assign({},  props),
+                React.createElement(BS.FormGroup, {"validationState": (options.validationState)},
+                    (label),
+                    (child),
+                    (feedback)
+                )
+            )
+
+        );
+    },
+
+    _fieldMixinRenderEdit(props) {
+        return (
+            React.createElement(BS.FormControl, Object.assign({ 
+                "type": (this.props.type || "text"),  
+                "value": (this.fieldMixinGetValue())
+                }, props
+            ))
+        );
+    },
+
+    _fieldMixinRenderDisplay(props) {
+        let value = this.fieldMixinGetValue();
+        if (_.isObject(value)) { value = value.toString(); }
+        return (
+            React.createElement(BS.FormControl.Static, null,
+                (value)
+            )
+        );
+    },
+
+
+    _fieldMixinRenderNone(props) {
+        const clean = LC.Form.FieldMixin.statics.cleanSizeProps(props);
+        return (
+            React.createElement("span", Object.assign({},  clean ))
+        );
+    },
+
+    renderType() {
+        if (this.isEditingRecord()) {
+            if (this.hasWriteAccess()) {
+                return (
+                    ['edit', 'Edit']
+                );
+            } else if (this.hasReadAccess()) {
+                return (
+                    ['read-only', 'Display']
+                );
+            } else {
+                return (
+                    ['none', 'None']
+                );
+            }
+        } else {
+            if (this.hasReadAccess()) {
+                return (
+                    ['display', 'Display']
+                );
+            } else {
+                return (
+                    ['none', 'None']
+                );
+            }
+        }
+    },
+    statics: {
+        cleanSizeProps(props, comp) {
+            if (comp == null) { comp = {}; }
+            return (
+                Hippo.u.cleanBsSizes( LC.Form.FieldMixin.statics.cleanColumnProps(props, comp) )
+            );
+        },
+
+        cleanColumnProps(props, comp, ...xtra) {
+            return (
+                _.omit( props,  _.keys(comp.constructor.propTypes).concat([
+                    'model', 'label', 'name', 'unlabeled', 'fieldOnly', 'placeholder',
+                    'commands', 'query', 'editOnly', 'syncOptions', 'labelField', 'type',
+                    'selectField', 'idField', 'queryModel', 'choices', 'align'
+                ], xtra))
+            );
+        },
+
+        renderEmptyColumn(props) {
+            if (props == null) { ({ props } = this); }
+            props = this.cleanColumnProps(props, this);
+            return (
+                React.createElement(BS.Col, Object.assign({},  props ))
+            );
+        }
+    },
+
+    render() {
+        const [type, method] = Array.from(this.renderType());
+        const options = {};
+
+        const hasError = this.isFieldValueInvalid();
+        if (hasError) { options.validationState = 'warning'; }
+        const props = LC.Form.FieldMixin.statics.cleanColumnProps(this.props, this);
+
+        props.export className = _.classnames(
+            _.result(this, 'fieldClassName'),
+            'hippo-field', type, props.export className,
+            ( this.props.align ? `align-${this.props.align}` : null),
+            {
+                changeset: this.state.displayChangeset,
+                'has-error': hasError
+            }
+        );
+        const fieldProps = Hippo.u.cleanBsSizes(props);
+        const field = (this[ `render${method}` ] || this[`_fieldMixinRender${method}`])(
+            this.props.fieldOnly ? fieldProps : _.omit(fieldProps, 'export className')
+        );
+        if (this.props.fieldOnly) {
+            return (
+                field
+            );
+        } else {
+            return (
+                ( this['renderFormGroup'] || this['_fieldMixinRenderFormGroup'] )(field, props, options)
+            );
+        }
+    }
+
+};
+
+function __guardMethod__(obj, methodName, transform) {
+  if (typeof obj !== 'undefined' && obj !== null && typeof obj[methodName] === 'function') {
+    return (
+        transform(obj, methodName)
+    );
+  } else {
+    return (
+        undefined
+    );
+  }
+}