hippo-fw 0.9.1

data/client/hippo/components/calendar/Calendar.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+export default class Calendar extends React.Component {
+    static statics =
+        {Events: Hippo.Vendor.Dayz.EventsCollection};
+
+    static propTypes = {
+        display:           PropTypes.oneOf(['month', 'week', 'day']),
+        date:              PropTypes.object.isRequired,
+        dayComponent:      PropTypes.func,
+        events:            PropTypes.instanceOf(Hippo.Vendor.Dayz.EventsCollection),
+        dayLabelComponent: PropTypes.func,
+        onDayClick:        PropTypes.func,
+        onEventClick:      PropTypes.func
+    };
+    render() {
+        return (
+            <Hippo.Vendor.Dayz {...this.props}>
+                {this.props.children}
+            </Hippo.Vendor.Dayz>
+        );
+    }
+}

data/client/hippo/components/calendar/index.js

@@ -0,0 +1,3 @@
+//= require 'hippo/vendor/calendar'
+//= require ./Calendar
+//= require_tree .

data/client/hippo/components/calendar/styles.scss

@@ -0,0 +1,3 @@
+$dayz-event-colors: $hippo-color-selections;
+$dayz-event-text-colors: $hippo-text-color-selections;
+@import "hippo/vendor/styles/calendar";

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

@@ -0,0 +1,105 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { bindAll } from 'lodash';
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
+
+import Box from 'grommet/components/Box';
+
+import {
+    List, AutoSizer, InfiniteLoader,
+} from 'react-virtualized';
+import 'react-virtualized/styles.css';
+
+import Query from '../models/query';
+
+@observer
+export default class DataList extends React.Component {
+
+    static defaultProps = {
+        rowHeight: 40,
+    }
+
+    static propTypes = {
+        query: PropTypes.instanceOf(Query).isRequired,
+        rowComponent: PropTypes.func,
+        rowHeight: PropTypes.oneOfType([
+            PropTypes.number, PropTypes.func,
+        ]),
+    }
+
+    @observable query;
+
+    constructor(props) {
+        super(props);
+        this.query = props.query;
+        bindAll(this,
+                'rowRenderer',
+                'isRowLoaded',
+                'loadMoreRows',
+        );
+    }
+
+    componentWillMount() { this.query.open(); }
+    componentWillUnmount() { this.query.close(); }
+
+    rowRenderer(props) {
+        const { rowComponent: Row } = this.props;
+        const row = this.query.results.rows[props.index];
+        return (
+            <Row {...props} row={row} />
+        );
+    }
+
+    isRowLoaded({ index }) {
+        return (
+            this.query.results.rows.length > index
+            && !this.query.results.isRowLoading(index)
+            && this.query.results.rows[index]
+        );
+    }
+
+    loadMoreRows({ startIndex: start, stopIndex }) {
+        const limit = (stopIndex + 1) - start;
+        return this.query.results.fetch({ start, limit });
+    }
+
+    recomputeRowHeights(editIndex) {
+        this.listRef.recomputeRowHeights(editIndex);
+    }
+
+    render() {
+        const { query } = this;
+        const { rowHeight, rowRenderer, ...listProps } = this.props;
+        return (
+            <Box className="data-list" align='stretch' direction='row' 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>
+            </Box>
+        );
+    }
+}

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

@@ -0,0 +1,243 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { pick, extend, defaults, map, bindAll, partial, toInteger, isNumber } from 'lodash';
+import { defaultTableRowRenderer, Table, InfiniteLoader, AutoSizer, Column } from 'react-virtualized';
+import { action, computed, observable, autorun } from 'mobx';
+import { observer } from 'mobx-react';
+import cn from 'classnames';
+
+import NextIcon from 'grommet/components/icons/base/CaretNext';
+import Button   from 'grommet/components/Button';
+
+import 'react-virtualized/styles.css';
+import './data-table/table-styles.scss';
+
+import Query from '../models/query';
+import HeaderCell from './data-table/header-cell';
+
+function renderEditTriangle({ rowIndex, columnData: { onEdit }}) {
+    return (
+        <Button
+            plain icon={<NextIcon />}
+            onClick={partial(onEdit, rowIndex)}
+        />
+    );
+}
+
+@observer
+export default class DataTable extends React.Component {
+
+    static defaultProps = {
+        canCreate: false,
+        editRowIndex: null,
+        style: {},
+    }
+
+    static propTypes = {
+        style:     PropTypes.object,
+        query:     PropTypes.instanceOf(Query).isRequired,
+        canCreate: PropTypes.bool,
+        editor:    PropTypes.func,
+        onEdit:    PropTypes.func,
+        editRowIndex: PropTypes.number,
+    }
+
+    @observable editIndex;
+    @observable query;
+
+    constructor(props) {
+        super(props);
+        this.query = props.query;
+        bindAll(this,
+                'rowRenderer',
+                'rowAtIndex',
+                'calculateRowHeight',
+                'isRowLoaded',
+                'loadMoreRows',
+                'headerRenderer',
+        );
+        this.editIndex = props.editRowIndex;
+        autorun(() => {
+            if (isNumber(this.editIndex) && this.tableRef) {
+                this.tableRef.recomputeRowHeights(this.editIndex);
+            }
+        });
+    }
+
+    componentWillReceiveProps(nextProps) {
+        this.editIndex = nextProps.editRowIndex;
+    }
+
+    componentWillMount() { this.query.open(); }
+    componentWillUnmount() { this.query.close(); }
+
+    get rowProps() {
+        const props = {};
+        if (this.props.onRowClick) { props.onRowClick = this.onRowClick; }
+        return props;
+    }
+
+    @action.bound
+    onRowClick({ index }) {
+        this.query.results.fetchModelForRow(index).then((model) => {
+            this.props.onRowClick({ index, model });
+        });
+    }
+
+    @action.bound
+    onEditComplete() {
+        const { editIndex } = this;
+        if (!this.query.results.isIndexSaved(editIndex)) {
+            this.query.results.removeRow(editIndex);
+        }
+        this.editIndex = null;
+        this.tableRef.recomputeRowHeights(editIndex);
+        this.props.onEdit(null);
+    }
+
+    @action.bound
+    onRowEditClick(index) {
+        this.props.onEdit(toInteger(index));
+    }
+
+    @action.bound
+    onRowAdd() {
+        this.query.results.insertRow();
+        this.editIndex = 0;
+    }
+
+    @action.bound
+    getRowClassName({ index }) {
+        if (index < 0) {
+            return 'header';
+        }
+        return index % 2 === 0 ? 'e' : 'o';
+    }
+
+    @action.bound
+    setSortField(index, ascending) {
+        this.query.setSort({ index, ascending });
+    }
+
+    @computed get gridRenderKey() {
+        return `${this.query.results.updateKey}-${this.editIndex}`;
+    }
+
+    @computed get columnDefinitions() {
+        const definitions = map(this.query.info.visibleFields, f =>
+            extend({
+                key: f.id,
+                columnData: f,
+                dataKey: f.dataIndex || f.id,
+                headerRenderer: this.headerRenderer,
+            }, pick(f, 'width', 'label', 'flexGrow', 'flexShrink')),
+        );
+        if (this.props.editor) {
+            definitions.unshift({
+                key: 'edit-toggle',
+                label: '',
+                width: 40,
+                dataKey: 'none',
+                columnData: { onEdit: this.onRowEditClick, query: this.query },
+                cellRenderer: renderEditTriangle,
+            });
+        }
+        return definitions;
+    }
+
+    get wrapperStyles() {
+        return defaults({
+            minWidth:  this.query.info.minWidth,
+            minHeight: 400,
+        }, this.props.styles);
+    }
+
+    rowAtIndex({ index }) {
+        return this.props.query.results.rows[index];
+    }
+
+    calculateRowHeight({ index }) {
+        return (this.editIndex === index) ? this.props.editor.desiredHeight || 40 : 40;
+    }
+
+    rowRenderer(props) {
+        const { index, className, key, style } = props;
+        extend(props, this.rowProps);
+        if (this.editIndex === index) {
+            const { editor: Editor } = this.props;
+            return (
+                <div
+                    key={key}
+                    style={style}
+                    className={cn(className, 'editing')}
+                >
+                    <Editor
+                        key={props.index}
+                        query={this.query}
+                        rowIndex={props.index}
+                        onComplete={this.onEditComplete}
+                    />
+                </div>
+            );
+        }
+        return defaultTableRowRenderer(props);
+    }
+
+    headerRenderer({ columnData: field }) {
+        return <HeaderCell field={field} onAdd={this.props.canCreate ? this.onRowAdd : null} />;
+    }
+
+    isRowLoaded({ index }) {
+        return (
+            this.query.results.rows.length > index
+            && !this.query.results.isRowLoading(index)
+            && this.query.results.rows[index]
+        );
+    }
+
+    loadMoreRows({ startIndex: start, stopIndex }) {
+        const limit = (stopIndex + 1) - start;
+        return this.query.results.fetch({ start, limit });
+    }
+
+    render() {
+        const { query } = this;
+        return (
+            <div
+                className={cn('data-table', { selectable: this.props.onRowClick })}
+                style={this.wrapperStyles}
+            >
+                <InfiniteLoader
+                    keyChange={this.gridRenderKey}
+                    minimumBatchSize={this.query.pageSize}
+                    isRowLoaded={this.isRowLoaded}
+                    loadMoreRows={this.loadMoreRows}
+                    rowCount={query.results.totalCount}
+                >
+                    {({ onRowsRendered, registerChild }) =>
+                        <AutoSizer
+                            updateKey={this.gridRenderKey}
+                        >
+                            {({ height, width }) =>
+                                <Table
+                                    height={height}
+                                    width={width}
+                                    ref={(table) => { registerChild(table); this.tableRef = table; }}
+                                    rowHeight={this.calculateRowHeight}
+                                    rowGetter={this.rowAtIndex}
+                                    estimatedRowSize={40}
+                                    headerHeight={50}
+                                    rowClassName={this.getRowClassName}
+                                    onRowsRendered={onRowsRendered}
+                                    rowRenderer={this.rowRenderer}
+                                    rowCount={query.results.rows.length}
+                                    keyChange={this.gridRenderKey}
+                                >
+                                    {map(this.columnDefinitions, props => <Column {...props} />)}
+                                </Table>}
+                        </AutoSizer>}
+                </InfiniteLoader>
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { last } from 'lodash';
+import { action, computed } from 'mobx';
+import { observer } from 'mobx-react';
+
+import Box      from 'grommet/components/Box';
+import Button   from 'grommet/components/Button';
+import AscIcon  from 'grommet/components/icons/base/LinkDown';
+import DescIcon from 'grommet/components/icons/base/LinkUp';
+import AddIcon  from 'grommet/components/icons/base/AddCircle';
+
+import Field from '../../models/query/field';
+
+@observer
+export default class SortingHeaderCell extends React.Component {
+    static defaultProps = {
+        onAdd: null,
+    }
+
+    static propTypes = {
+        onAdd: PropTypes.func,
+        field: PropTypes.instanceOf(Field).isRequired,
+    }
+
+    @action.bound
+    onClick() {
+        if (this.field.isSortingBy) {
+            this.field.query.sortAscending = !this.field.query.sortAscending;
+        } else {
+            this.field.query.sortField = this.field;
+        }
+    }
+
+    @computed get displayAdd() {
+        return !!(this.props.onAdd && this.field === last(this.field.query.info.visibleFields));
+    }
+
+    @computed get hasButtons() {
+        return this.displayAdd || this.field.isSortingBy;
+    }
+
+    @computed get field() {
+        return this.props.field;
+    }
+
+    addButton() {
+        if (!this.displayAdd) { return null; }
+        return (
+            <Button
+                icon={<AddIcon />}
+                onClick={this.props.onAdd}
+                plain
+            />
+        );
+    }
+
+    sortIndicator() {
+        if (!this.field.isSortingBy) { return null; }
+        return this.field.query.sortAscending ? <AscIcon /> : <DescIcon />;
+    }
+    render() {
+        let label = <span>{this.field.label}</span>;
+
+        if (this.field.sortable) {
+            label = (
+                <Button
+                    key="sort"
+                    plain={true}
+                    fill={true}
+                    onClick={this.onClick}
+                >
+                    {label}
+                </Button>
+            );
+        }
+        if (this.hasButtons) {
+            return (
+                <Box
+                    direction='row'
+                    justify='between'
+                    align='center'
+                    pad={{ between: 'small' }}
+                >
+                    {label}
+                    {this.sortIndicator()}
+                    {this.addButton()}
+                </Box>
+            );
+        }
+        return label;
+    }
+
+}