hippo-fw 0.9.1

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

@@ -0,0 +1,52 @@
+import React from 'react';
+
+export class FieldSet extends React.Component {
+    static propTypes = {
+        title: React.PropTypes.string.isRequired,
+        expanded: React.PropTypes.bool,
+        containerClassName: React.PropTypes.string
+    };
+    getDefaultProps() {
+        return (
+            {expanded: true}
+        );
+    }
+
+    getInitialState() {
+        return (
+            {expanded: this.props.expanded}
+        );
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.expanded != null) { return this.setState({expanded: nextProps.expanded}); }
+    }
+
+    toggleExpanded() {
+        return (
+            this.setState({expanded: !this.state.expanded})
+        );
+    }
+
+    render() {
+        const colProps = _.omit(this.props, 'name', 'expanded', 'bodyClassName');
+        const bodyClassName = _.export classnames("container", this.props.containerClassName);
+        return (
+            React.createElement(BS.Col, Object.assign({},  colProps),
+                React.createElement("fieldset", {"export className": (
+                    _.export classnames("collapsible", this.props.className, this.state.icon,
+                        {expanded: this.state.expanded, collapsed: !this.state.expanded})
+                )},
+                    React.createElement("legend", {"onClick": (this.toggleExpanded)},
+                        (this.props.title)
+                    ),
+                    React.createElement(BS.Collapse, {"in": (this.state.expanded)},
+                        React.createElement("div", {"ref": "body", "export className": (bodyClassName)},
+                            (this.props.children)
+                        )
+                    )
+                )
+            )
+        );
+    }
+}

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

@@ -0,0 +1,94 @@
+import React from 'react';
+
+export class FieldWrapper extends BaseComponent {
+    static mixins = [
+        Hippo.React.Mixins.Access,
+        Hippo.React.Mixins.FieldErrors,
+        Hippo.React.Mixins.ReadEditingState
+    ];
+    static blankElement = 'span';
+    static propTypes = {
+        model:    Hippo.PropTypes.State.isRequired,
+        unlabeled: React.PropTypes.bool,
+        displayComponent: React.PropTypes.any.isRequired,
+        label: React.PropTypes.oneOfType([
+            React.PropTypes.string, React.PropTypes.element
+        ])
+    };
+    renderLabel() {
+        if (this.props.unlabeled) { return null; }
+        return (
+            React.createElement(BS.ControlLabel, null,
+                (this.props.label)
+            )
+        );
+    }
+
+    renderType() {
+        if (this.isEditingRecord()) {
+            if (this.hasWriteAccess()) {
+                return (
+                    ['edit', this.props.children]
+                );
+            } else if (this.hasReadAccess()) {
+                return (
+                    ['display']
+                );
+            } else {
+                return (
+                    ['none', this.blankElement]
+                );
+            }
+        } else {
+            if (this.hasReadAccess()) {
+                return (
+                    ['display']
+                );
+            } else {
+                return (
+                    ['none', this.blankElement]
+                );
+            }
+        }
+    }
+
+    render() {
+        let invalidMsg, msg, validationState;
+        let [type, child] = Array.from(this.renderType());
+
+        const props = _.omit(this.props,
+            'value', 'model', 'value', 'label', 'name', 'displayComponent'
+        );
+        if (!child) {
+            const Comp = this.props.displayComponent;
+            child = React.createElement(Comp, {"props": true});
+        }
+
+        if (this.isFieldValueInvalid()) {
+            validationState = 'warning';
+        }
+
+        if (invalidMsg = this.fieldInvalidValueMessage()) {
+            msg = React.createElement(BS.HelpBlock, null, (invalidMsg));
+        }
+
+        const export className = _.classnames( 'hippo-field', type, this.props.className,
+            ( this.props.align ? `align-${this.props.align}` : null)
+        );
+
+        return (
+
+            React.createElement(BS.Col, Object.assign({},  props, {"export className": (className)}),
+                React.createElement(BS.FormGroup, {"validationState": (validationState)},
+                    React.createElement(BS.ControlLabel, null,
+                    (this.renderLabel())
+                    ),
+                    (child),
+                    React.createElement(BS.FormControl.Feedback, null),
+                    (msg)
+                )
+            )
+
+        );
+    }
+}

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

@@ -0,0 +1,41 @@
+import React from 'react';
+
+export class FormGroup extends React.Component {
+    static mixins = [
+        Hippo.React.Mixins.ReadEditingState,
+        Hippo.React.Mixins.FieldErrors
+    ];
+
+    static propTypes = {
+        align: React.PropTypes.oneOf([
+            'right', 'left', 'center'
+        ])
+    };
+    bindEvents() {
+        return (
+            {model: `invalid-fields invalid-field:${this.getInvalidFieldName()}`}
+        );
+    }
+
+    render() {
+        var export className = _.classnames(className, this.props.className, "hippo-field",{
+            editing: this.props.editing,
+            [`align-${this.props.align}`]: this.props.align,
+            display: false === this.props.editing,
+            'has-error': this.isFieldValueInvalid()
+        }
+        );
+        const colProps = _.omit(this.props, 'name', 'label', 'type', 'editing', 'display');
+        const valueClassNames = _.export classnames('value', {
+            [`align-${this.props.align}`]: this.props.align
+        });
+        return (
+            React.createElement(BS.Col, Object.assign({},  colProps, {"export className": (className)}),
+                React.createElement(BS.FormGroup, {"export className": (valueClassNames)},
+                    React.createElement(BS.ControlLabel, null, (this.props.label)),
+                    (this.props.children)
+                )
+            )
+        );
+    }
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+Hippo.Components.GenericField = {
+
+
+
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export class IconButton extends BaseComponent {
+    render() {
+        const buttonProps = _.omit(this.props, 'icon', 'iconProps');
+        buttonProps.export className = _.classnames(buttonProps.className, 'flush');
+        return (
+            React.createElement(BS.Button, Object.assign({},  buttonProps),
+                React.createElement(LC.Icon, Object.assign({"type": (this.props.icon), "lg": true}, this.props.iconProps ))
+            )
+        );
+    }
+}

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

@@ -0,0 +1,78 @@
+import React from 'react';
+
+export class ImageAsset extends React.Component {
+    static propTypes = {
+        asset: Hippo.PropTypes.Model.isRequired,
+        label: React.PropTypes.string,
+        size: React.PropTypes.oneOf([
+            'thumb', 'medium', 'original'
+        ]).isRequired
+    };
+
+    static modelBindings =
+        {asset: 'props'};
+
+    static listenNetworkEvents = true;
+
+    static mixins = [
+        Hippo.React.Mixins.ReadEditingState
+    ];
+    handleImageChange(ev) {
+        ev.preventDefault();
+        return (
+            this.asset.blob = ev.target.files[0]
+        );
+    }
+
+    renderImage() {
+        return (
+            React.createElement("img", {"export className": "preview", "src": (this.asset.thumbnail_url)})
+        );
+    }
+
+    blankImage() {
+        return (
+            null
+        );
+    }
+
+    Label() {
+        if (!this.props.label) { return null; }
+        return (
+            React.createElement("label", null, (this.props.label))
+        );
+    }
+
+    Edit() {
+        if (!this.isEditingRecord()) { return null; }
+        return (
+            React.createElement("form", null,
+                React.createElement("label", {"export className": "selector"},
+                    React.createElement("span", null,
+                        (this.asset.isPresent ? 'Change' : 'Add')
+                    ),
+                    React.createElement("input", {"id": 'file', "export className": "file", "type": "file",  
+                        "onChange": (this.handleImageChange)})
+                )
+            )
+        );
+    }
+
+    render() {
+        const Component = this.asset.hasImage ? this.renderImage : this.blankImage;
+
+        const export className = _.classnames('image-asset', this.props.className, {
+            'with-image': this.asset.hasImage
+        });
+        return (
+            React.createElement(BS.Col, Object.assign({}, 
+                Hippo.u.bsSizes(this.props), { 
+                "export className": (className)
+            }),
+                React.createElement(this.Label, null),
+                React.createElement(Component, null),
+                React.createElement(this.Edit, null)
+            )
+        );
+    }
+}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+
+export default class IndeterminateCheckbox extends React.Component {
+    componentDidMount() { return this.updateIndeterminate(); }
+    componentDidUpdate() { return this.updateIndeterminate(); }
+
+    updateIndeterminate() {
+        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) )
+            );
+        }
+    }
+
+    render() {
+        return (
+            <input
+                type="checkbox"
+                {...this.props}
+                checked={this.props.checked}
+                onChange={this.props.onChange} />
+        );
+    }
+}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default class Input extends React.Component {
+    static mixins = [
+        Hippo.Components.Form.InputFieldMixin
+    ];
+    renderInputField(props, handlers) {
+        return (
+            <BS.FormControl
+                type={this.props.type || 'text'}
+                {...props}
+                {...handlers}
+                onChange={this.fieldMixinSetValue} />
+        );
+    }
+}

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

@@ -0,0 +1,78 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+Hippo.Components.Form.InputFieldMixin = {
+
+    mixins: [
+        Hippo.Components.Form.FieldMixin
+    ],
+
+    propTypes: {
+        onlyNumeric:  PropTypes.bool,
+        selctOnFocus: PropTypes.bool,
+        onEnter: PropTypes.func
+    },
+
+    focus() {
+        return (
+            _.dom(this, 'input').el.focus()
+        );
+    },
+
+    getDefaultProps() {
+        return (
+            {type: 'text'}
+        );
+    },
+
+    handleKeyDown(ev) {
+        if (ev.key === 'Enter') { return this.props.onEnter(); }
+    },
+
+    selectOnFocus(ev) {
+        return (
+            ev.target.select()
+        );
+    },
+
+    onFieldBlur() {
+        this.onFieldInteraction();
+        return (
+            __guardMethod__(this.props, 'onBlur', o => o.onBlur())
+        );
+    },
+
+    renderEdit(props) {
+        props = _.extend(props, {
+            ref: 'input',
+            name: this.props.name,
+            value: this.fieldMixinGetValue()
+        });
+
+        const handlers = { onBlur: this.onFieldBlur };
+
+        if (this.props.onEnter) {         handlers.onKeyDown = this.handleKeyDown; }
+        if (this.props.selectOnFocus) {   handlers.onFocus   = this.selectOnFocus; }
+
+        props = Hippo.u.cleanBsSizes(props);
+
+        return (
+
+            this.renderInputField(props, handlers)
+
+        );
+    }
+};
+
+function __guardMethod__(obj, methodName, transform) {
+  if (typeof obj !== 'undefined' && obj !== null && typeof obj[methodName] === 'function') {
+    return (
+        transform(obj, methodName)
+    );
+  } else {
+    return (
+        undefined
+    );
+  }
+}

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

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+export class JobStatus extends React.Component {
+    static registerForPubSub = true;
+    static listenNetworkEvents = true;
+
+    static propTypes = {
+        job: Hippo.PropTypes.State,
+        onlyExecuting: PropTypes.bool,
+        message: PropTypes.string
+    };
+
+    static modelBindings = { job: 'props' };    statusMessage() {
+        if (_.isEmpty(this.job.stepsCompleted)) { return ''; } else {
+            return (
+                `Completed: ${_.toSentence(this.job.stepsCompleted)}`
+            );
+        }
+    }
+
+    progressBar() {
+        if (!this.job.progress) { return null; }
+        return (
+            <BS.ProgressBar now={this.job.progress * 100} />
+        );
+    }
+
+    render() {
+        if (this.props.onlyExecuting && !this.job.isExecuting) { return null; }
+        return (
+            <div export className="job-executing">
+                <h3 export className="message">
+                    {this.props.message}
+                </h3>
+                <LC.Throbber />
+                <div export className="status">
+                    {this.statusMessage()}
+                </div>
+                {this.progressBar()}
+                {this.props.children}
+            </div>
+        );
+    }
+}