@aappddeevv/dynamics-client-ui/lib/Components/List.js

## What is it? A library to help you create great dynamics applications.

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.List = undefined;

var _extends2 = require("babel-runtime/helpers/extends");

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _set = require("babel-runtime/core-js/set");

var _set2 = _interopRequireDefault(_set);

var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

exports.Item = Item;
exports.ListContainer = ListContainer;

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _recompose = require("recompose");

var _ramda = require("ramda");

var _ramda2 = _interopRequireDefault(_ramda);

var _Utils = require("../Dynamics/Utils");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/** 
 * Simple react list.
 */
var ListManager = function (_React$Component) {
    (0, _inherits3.default)(ListManager, _React$Component);

    function ListManager(props) {
        (0, _classCallCheck3.default)(this, ListManager);

        var _this = (0, _possibleConstructorReturn3.default)(this, (ListManager.__proto__ || (0, _getPrototypeOf2.default)(ListManager)).call(this, props));

        _this.checkedValues = new _set2.default();

        _this.input_handleOnChange = function (e) {
            _this.state.onListChange(_this.checkedValues);
        };

        _this.input_updateList = function (key, checked) {
            return checked ? _this.checkedValues.add(key) : _this.checkedValues.remove(key);
        };

        _this.getItemProps = function () {
            var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

            var type = _ref.type,
                onChange = _ref.onChange,
                rest = (0, _objectWithoutProperties3.default)(_ref, ["type", "onChange"]);

            return (0, _extends3.default)({
                onChange: (0, _Utils.composeEventHandlers)(onChange, _this.input_handleOnChange),
                updateList: _this.input_updateList
            }, rest);
        };

        _this.getCombinedProps = function () {
            return {
                getItemProps: _this.getInputProps
            };
        };

        _this.state = {
            onListChange: props.onListChange
        };
        return _this;
    }

    /** Non-state in the sense it does not drive rendering. */


    // Factor out type, it's always "checked" for this component.


    (0, _createClass3.default)(ListManager, [{
        key: "render",
        value: function render() {
            this.checkedValues.clear();
            var children = (0, _Utils.firstOrElse)(this.props.children, _Utils.noop);
            var element = (0, _Utils.firstOrElse)(children(this.getCombinedProps()));
            if (!element) return null;
            return element;
        }
    }]);
    return ListManager;
}(_react2.default.Component);

ListManager.defaultProps = {
    onChange: _Utils.noop,
    onListChange: _Utils.noop };


var isNilOr = function isNilOr(v, o) {
    return _ramda2.default.isNil(v) ? o : v;
};

/** 
 * Default and fairly standard checkbox list implementation. Renders a list of checkboxes from an options list (a strict value).
 * The outer container does not need to know about ChcekBoxListManager. The callback onChange receives
 * convenient properties such as the option item and its checked status as well as the event object. This
 * class takes over the rendering process and makes assumptions about the options data model.
 *
 * @param options Array of {value,label} pairs. Value will be converted to a string.
 * @param checked Array|function of values representing checked status or a function taking a value and returning
 *   boolean (true if checked) . If checked is undefined it will look for "checked" property on each option element.
 * @param {(value, checked, evt) => undefined } onChange Optional. Individual checkbox change callback. You can use 
 *   onListChange instead of this.
 * @parma {(Set of values) => undefined} onListChange Called with all checked values if a checkbox changes or after the
 *   the component mounts.
 * @param Container Outer react container Component.
 * @param CheckBoxComponent Your own checkbox component. It will be passed {key,value,label,checked,getInputProps}.
 */

var _List = function (_React$Component2) {
    (0, _inherits3.default)(_List, _React$Component2);

    function _List() {
        var _ref2;

        var _temp, _this2, _ret;

        (0, _classCallCheck3.default)(this, _List);

        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
            args[_key] = arguments[_key];
        }

        return _ret = (_temp = (_this2 = (0, _possibleConstructorReturn3.default)(this, (_ref2 = _List.__proto__ || (0, _getPrototypeOf2.default)(_List)).call.apply(_ref2, [this].concat(args))), _this2), _this2.makeItem = function (opt, idx, checkme, ItemComponent, getInputProps, firstOnChange) {
            var value = isNilOr(opt.value, "value-" + idx);
            var label = isNilOr(opt.label, "label-" + idx);
            var isChecked = checkme(value);
            var cprops = {
                key: value.toString(),
                label: label,
                checked: isChecked,
                value: value,
                option: opt,
                // the only trick we do is to make the onChange API easier to use.
                // so we change the onChange handler from getInputProps().
                getInputProps: function (_getInputProps) {
                    function getInputProps(_x2) {
                        return _getInputProps.apply(this, arguments);
                    }

                    getInputProps.toString = function () {
                        return _getInputProps.toString();
                    };

                    return getInputProps;
                }(function (_ref3) {
                    var onChange = _ref3.onChange,
                        p = (0, _objectWithoutProperties3.default)(_ref3, ["onChange"]);
                    return getInputProps((0, _extends3.default)({}, p, {
                        //onChange: composeEventHandlers(firstOnChange(value, isChecked), onChange)})}
                        onChange: (0, _Utils.composeEventHandlers)(firstOnChange(value, isChecked), onChange) }));
                })
                //console.log(cprops)
            };return _react2.default.createElement(ItemComponent, (0, _extends3.default)({ key: value }, cprops));
        }, _temp), (0, _possibleConstructorReturn3.default)(_this2, _ret);
    }

    // make map func an arrow outside of render so the callback func does not force a render


    (0, _createClass3.default)(_List, [{
        key: "render",
        value: function render() {
            var _this3 = this;

            var _props = this.props,
                options = _props.options,
                checked = _props.checked,
                onListChange = _props.onListChange,
                onChange = _props.onChange,
                ItemComponent = _props.ItemComponent,
                Container = _props.Container,
                rest = (0, _objectWithoutProperties3.default)(_props, ["options", "checked", "onListChange", "onChange", "ItemComponent", "Container"]);

            var originalOnChange = onChange;
            // When rendering, we already know what is checked or not, so curry onChange handler with that info.
            /* const localOnChange = (value, isChecked, onOneChanged) => onOneChanged ?
             *                                                         R.curry(onOneChanged)(value, !isChecked) : null*/
            var localOnChange = function localOnChange(value, isChecked) {
                return originalOnChange ? function (evt) {
                    return originalOnChange(value, !isChecked, evt);
                } : null;
            };
            var checkme = function checkme(value) {
                if (_ramda2.default.is(Array, checked)) return checked.includes(value);else if (_ramda2.default.is(Function, checked)) return checked(value);
                return false;
            };

            return _react2.default.createElement(
                ListManager,
                { onChange: onChange, onListChange: onListChange },
                function (_ref4) {
                    var getItemProps = _ref4.getItemProps;
                    return _react2.default.createElement(
                        Container,
                        rest,
                        options.map(function (opt, idx) {
                            return _this3.makeItem(opt, idx, checkme, ItemComponent, getInputProps, localOnChange);
                        })
                    );
                }
            );
        }
    }]);
    return _List;
}(_react2.default.Component);

function Item(_ref5) {
    var getInputProps = _ref5.getInputProps,
        children = _ref5.children,
        rest = (0, _objectWithoutProperties3.default)(_ref5, ["getInputProps", "children"]);

    var _getInputProps2 = getInputProps(rest),
        key = _getInputProps2.key,
        value = _getInputProps2.value,
        label = _getInputProps2.label,
        checked = _getInputProps2.checked,
        option = _getInputProps2.option,
        onChange = _getInputProps2.onChange,
        updateList = _getInputProps2.updateList,
        iprops = (0, _objectWithoutProperties3.default)(_getInputProps2, ["key", "value", "label", "checked", "option", "onChange", "updateList"]);

    var id = value.toString();
    if (checked) updateList(value, checked);
    return _react2.default.createElement(
        "li",
        { id: id, onClick: onChange },
        label ? label : children
    );
}

function ListContainer(_ref6) {
    var children = _ref6.children,
        className = _ref6.className,
        style = _ref6.style;

    return _react2.default.createElement(
        "ul",
        { style: (0, _extends3.default)({ margin: 0, padding: 0, listStyleType: "none" }, style),
            className: className },
        children
    );
}

var List = exports.List = (0, _recompose.defaultProps)({ options: [], checked: [],
    Container: ListContainer,
    CheckBoxComponent: Item })(_List);

exports.default = List;
//# sourceMappingURL=List.js.map