d2-ui/lib/expression-manager/DataElementOperandSelector.js

d2-ui

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { config } from 'd2/lib/d2';

import TextField from 'material-ui/TextField/TextField';
import LinearProgress from 'material-ui/LinearProgress/LinearProgress';

import ListSelectAsync from '../list-select/ListSelectAsync.component';
import Pagination from '../pagination/Pagination.component';
import Store from '../store/Store';
import { createDataElementOperandActions, subscribeDataElementActionsToStore } from './dataElementOperandSelector.actions';

config.i18n.strings.add('search_by_name');

var styles = {
    list: {
        width: '100%',
        outline: 'none',
        border: 'none',
        padding: '0rem 1rem'
    },
    pagination: {
        float: 'right'
    },
    textField: {
        marginLeft: '1rem'
    }
};

var DataElementOperandSelector = function (_Component) {
    _inherits(DataElementOperandSelector, _Component);

    function DataElementOperandSelector(props, context) {
        _classCallCheck(this, DataElementOperandSelector);

        var _this = _possibleConstructorReturn(this, (DataElementOperandSelector.__proto__ || Object.getPrototypeOf(DataElementOperandSelector)).call(this, props, context));

        _this.state = {
            isLoading: true,
            pager: {
                hasNextPage: function hasNextPage() {
                    return false;
                },
                hasPreviousPage: function hasPreviousPage() {
                    return false;
                }
            }
        };

        _this.getNextPage = function () {
            _this.setState({ isLoading: true });
            _this.props.dataElementOperandSelectorActions.getNextPage(_this.state.pager, _this.state.searchValue);
        };

        _this.getPreviousPage = function () {
            _this.setState({ isLoading: true });
            _this.props.dataElementOperandSelectorActions.getPreviousPage(_this.state.pager, _this.state.searchValue);
        };

        _this.searchDataElement = function (event) {
            var value = event.target.value;
            _this.props.dataElementOperandSelectorActions.search(value).subscribe(function () {
                _this.setState({
                    isLoading: false,
                    searchValue: value
                });
            });

            _this.setState({ isLoading: true });
        };

        var i18n = _this.context.d2.i18n;
        _this.getTranslation = i18n.getTranslation.bind(i18n);
        return _this;
    }

    _createClass(DataElementOperandSelector, [{
        key: 'componentWillMount',
        value: function componentWillMount() {
            var _this2 = this;

            this.actionSubscriptions = subscribeDataElementActionsToStore(this.props.dataElementOperandSelectorActions, this.props.dataElementOperandStore);

            if (this.props.dataElementOperandSelectorActions) {
                this.props.dataElementOperandSelectorActions.loadList();
            }

            this.storeObservable = this.props.dataElementOperandStore.do(function (collection) {
                return _this2.setState({ pager: collection.pager });
            }).map(function (collection) {
                return collection.toArray();
            }).map(function (collection) {
                return collection.map(function (item) {
                    return {
                        label: item.displayName,
                        value: item.id
                    };
                });
            }).do(function (value) {
                _this2.setState({ isLoading: false });
                return value;
            });

            this.disposable = this.storeObservable.map(function (collection) {
                return collection.pager;
            }).filter(function (pager) {
                return Boolean(pager);
            }).subscribe(function (pager) {
                _this2.setState({ pager: pager });
            });
        }
    }, {
        key: 'componentWillUnmount',
        value: function componentWillUnmount() {
            this.disposable && this.disposable.unsubscribe();
            this.actionSubscriptions.forEach(function (subscription) {
                return subscription.unsubscribe();
            });
        }
    }, {
        key: 'render',
        value: function render() {
            var _this3 = this;

            return React.createElement(
                'div',
                { className: 'data-element-operand-selector' },
                React.createElement(
                    'div',
                    { style: styles.pagination },
                    React.createElement(Pagination, {
                        hasNextPage: function hasNextPage() {
                            return _this3.state.pager.hasNextPage();
                        },
                        hasPreviousPage: function hasPreviousPage() {
                            return _this3.state.pager.hasPreviousPage();
                        },
                        onNextPageClick: this.getNextPage,
                        onPreviousPageClick: this.getPreviousPage
                    })
                ),
                React.createElement(TextField, {
                    style: styles.textField,
                    hintText: this.getTranslation('search_by_name'),
                    onChange: this.searchDataElement
                }),
                this.state.isLoading && React.createElement(LinearProgress, { mode: 'indeterminate' }),
                React.createElement(ListSelectAsync, {
                    size: 12,
                    onItemDoubleClick: this.props.onSelect,
                    source: this.storeObservable,
                    listStyle: this.props.listStyle
                })
            );
        }
    }]);

    return DataElementOperandSelector;
}(Component);

DataElementOperandSelector.propTypes = {
    dataElementOperandSelectorActions: PropTypes.object,
    dataElementOperandStore: PropTypes.object,
    onSelect: PropTypes.func.isRequired,
    listStyle: PropTypes.object
};

DataElementOperandSelector.defaultProps = {
    dataElementOperandSelectorActions: createDataElementOperandActions(),
    dataElementOperandStore: Store.create(),
    listStyle: styles.list
};

DataElementOperandSelector.contextTypes = {
    d2: PropTypes.object
};

export default DataElementOperandSelector;