@bigfishtv/cockpit/es5/components/modal/TreeModal.js

'use strict';

exports.__esModule = true;
exports.default = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _dec, _class, _class2, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _reactRedux = require('react-redux');

var _isEqual = require('lodash/isEqual');

var _isEqual2 = _interopRequireDefault(_isEqual);

var _xhrUtils = require('../../api/xhrUtils');

var _roleUtils = require('../../utils/roleUtils');

var _treeUtils = require('../../utils/treeUtils');

var _Button = require('../button/Button');

var _Button2 = _interopRequireDefault(_Button);

var _Icon = require('../Icon');

var _Icon2 = _interopRequireDefault(_Icon);

var _Tree = require('../tree/Tree');

var _Tree2 = _interopRequireDefault(_Tree);

var _Modal = require('../modal/Modal');

var _Modal2 = _interopRequireDefault(_Modal);

var _Spinner = require('../Spinner');

var _Spinner2 = _interopRequireDefault(_Spinner);

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

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; }

function markRecursive(children) {
	children.map(function (page) {
		page.userCanAccess = true;
		markRecursive(page.children);
	});
}

function filterData(data, user) {
	return data.map(function (page) {
		page.userCanAccess = (0, _roleUtils.userCanAccess)([{ model: 'Pages', foreign_key: page.id }], user);
		if (page.userCanAccess) {
			markRecursive(page.children);
		} else {
			page.children = filterData(page.children, user);
		}
		return page;
	});
}

var ModalToolbar = function ModalToolbar(props) {
	var _props$modalToolbarPr = props.modalToolbarProps,
	    allCollapsed = _props$modalToolbarPr.allCollapsed,
	    collapsedIds = _props$modalToolbarPr.collapsedIds,
	    onCollapseAll = _props$modalToolbarPr.onCollapseAll,
	    onExpandAll = _props$modalToolbarPr.onExpandAll;

	return _react2.default.createElement(
		'div',
		null,
		_react2.default.createElement(_Button2.default, { text: 'Collapse All', onClick: onCollapseAll, disabled: allCollapsed }),
		_react2.default.createElement(_Button2.default, { text: 'Expand All', onClick: onExpandAll, disabled: !collapsedIds.length })
	);
};

var ModalActions = function ModalActions(props) {
	var _props$modalActionPro = props.modalActionProps,
	    selectedId = _props$modalActionPro.selectedId,
	    primaryActionText = _props$modalActionPro.primaryActionText,
	    onSave = _props$modalActionPro.onSave,
	    onClose = _props$modalActionPro.onClose;

	return _react2.default.createElement(
		'div',
		null,
		_react2.default.createElement(_Button2.default, { text: primaryActionText, style: 'primary', onClick: onSave, disabled: selectedId === null }),
		_react2.default.createElement(_Button2.default, { text: 'Cancel', onClick: onClose })
	);
};

var TreeCell = function TreeCell(props) {
	var title = props.title,
	    status = props.status,
	    isCollapsed = props.isCollapsed,
	    selectedDrag = props.selectedDrag,
	    showIndicator = props.showIndicator,
	    onIndicatorClick = props.onIndicatorClick,
	    onIndicatorDoubleClick = props.onIndicatorDoubleClick,
	    isOver = props.isOver,
	    position = props.position,
	    onClick = props.onClick,
	    onDoubleClick = props.onDoubleClick,
	    selected = props.selected;

	var userCanAccess = props.userCanAccess !== false;
	return _react2.default.createElement(
		'div',
		{ className: (0, _classnames2.default)('tree-item', isOver && 'drag-' + position) },
		_react2.default.createElement(
			'div',
			{
				className: (0, _classnames2.default)('tree-cell', { dragging: selectedDrag, selected: selected, disabled: !userCanAccess }),
				onClick: userCanAccess ? onClick : null,
				onDoubleClick: userCanAccess ? onDoubleClick : null },
			_react2.default.createElement(
				'div',
				{ className: 'tree-cell-icon' },
				showIndicator && _react2.default.createElement(
					'div',
					{
						className: (0, _classnames2.default)('tree-cell-control', isCollapsed && 'collapsed'),
						onClick: onIndicatorClick,
						onDoubleClick: onIndicatorDoubleClick },
					_react2.default.createElement(_Icon2.default, { name: 'chevron-' + (isCollapsed ? 'right' : 'down'), size: '18' })
				)
			),
			status !== undefined && _react2.default.createElement(
				'div',
				{ className: 'tree-cell-status' },
				_react2.default.createElement('div', { className: (0, _classnames2.default)('status', status) })
			),
			!userCanAccess && _react2.default.createElement(
				'div',
				{ className: 'tree-cell-icon' },
				_react2.default.createElement(_Icon2.default, { name: 'lock', size: 12 })
			),
			_react2.default.createElement(
				'div',
				{ className: (0, _classnames2.default)('tree-cell-title', { disabled: !userCanAccess }) },
				title
			)
		)
	);
};

var TreeModal = (_dec = (0, _reactRedux.connect)(function (_ref) {
	var viewer = _ref.viewer;
	return { viewer: viewer };
}), _dec(_class = (_temp = _class2 = function (_Component) {
	_inherits(TreeModal, _Component);

	function TreeModal() {
		_classCallCheck(this, TreeModal);

		var _this = _possibleConstructorReturn(this, _Component.call(this));

		_this.handleSelectionChange = function (selectedIds) {
			var selectedId = selectedIds.length ? selectedIds[0] : null;
			_this.setState({ selectedId: selectedId, selectedIds: selectedIds });
		};

		_this.handleCollapseChange = function (collapsedIds) {
			var collapsableIds = (0, _treeUtils.collectValues)(_this.state.data, 'id', function (item) {
				return item.children && item.children.length > 0;
			});
			var allCollapsed = (0, _isEqual2.default)(collapsableIds.sort(), collapsedIds.sort());
			_this.setState({ collapsedIds: collapsedIds, allCollapsed: allCollapsed });
		};

		_this.handleCollapseAll = function () {
			var collapsedIds = (0, _treeUtils.collectValues)(_this.state.data, 'id', function (item) {
				return item.children && item.children.length > 0;
			});
			_this.setState({ collapsedIds: collapsedIds, allCollapsed: true });
		};

		_this.handleSelectedItem = function (item) {
			_this.props.onSave(item);
			_this.props.closeModal();
		};

		_this.handleCombinationChange = function (mixed) {
			var newState = {};
			Object.keys(mixed).map(function (key) {
				if (key in _this.state) newState[key] = mixed[key];
			});
			_this.setState(newState);
		};

		_this.handleSave = function () {
			_this.handleSelectedItem((0, _treeUtils.getChildByKeyValue)(_this.state.data, 'id', _this.state.selectedId));
		};

		_this.handleClose = function () {
			_this.props.onClose();
			_this.props.closeModal();
		};

		_this.state = {
			data: [],
			selectedId: null,
			collapsedIds: [],
			selectedIds: [],
			allCollapsed: false,
			loading: true
		};
		return _this;
	}

	TreeModal.prototype.componentDidMount = function componentDidMount() {
		var _this2 = this;

		var url = this.props.url;

		if (!url) {
			if (this.props.data && this.props.data.length > 0) {
				this.setState({ loading: false, data: this.props.data }, function () {
					if (_this2.props.startCollapsed) _this2.handleCollapseAll();
				});
			}
			return;
		}
		(0, _xhrUtils.get)({
			url: url,
			quiet: true,
			callback: function callback(data) {
				return _this2.setState({ data: _this2._filterData(data), loading: false }, function () {
					if (_this2.props.startCollapsed) _this2.handleCollapseAll();
				});
			},
			errorCallback: function errorCallback(data) {
				return console.warn('Error getting pages', data);
			}
		});
	};

	TreeModal.prototype._filterData = function _filterData(data) {
		if (!this.props.filterData) {
			return data;
		}
		return this.props.filterData(data, this.props.viewer);
	};

	TreeModal.prototype.render = function render() {
		var _this3 = this;

		var modalToolbarProps = _extends({}, this.state, {
			onCollapseAll: this.handleCollapseAll,
			onExpandAll: function onExpandAll() {
				return _this3.setState({ collapsedIds: [], allCollapsed: false });
			}
		});
		var modalActionProps = _extends({}, this.state, {
			primaryActionText: this.props.primaryActionText,
			onSave: this.handleSave,
			onClose: this.handleClose
		});
		return _react2.default.createElement(
			_Modal2.default,
			{
				title: this.props.title,
				size: this.props.size,
				ModalToolbar: ModalToolbar,
				modalToolbarProps: modalToolbarProps,
				ModalActions: ModalActions,
				modalActionProps: modalActionProps,
				onClose: this.handleClose,
				onSave: this.handleSave },
			this.state.loading ? _react2.default.createElement(
				'div',
				{ className: 'loader-center' },
				_react2.default.createElement(_Spinner2.default, null)
			) : _react2.default.createElement(_Tree2.default, {
				value: this.state.data,
				TreeCell: TreeCell,
				multiselect: false,
				reorderable: false,
				breadcrumbs: false,
				selectedIds: this.state.selectedIds,
				onSelectItem: this.handleSelectedItem,
				onSelectionChange: this.handleSelectionChange,
				collapsedIds: this.state.collapsedIds,
				onCollapseChange: this.handleCollapseChange,
				onCombinationChange: this.handleCombinationChange
			})
		);
	};

	return TreeModal;
}(_react.Component), _class2.defaultProps = {
	data: [],
	url: '/admin/pages.json',
	title: 'Select Parent Page',
	primaryActionText: 'Select Page',
	startCollapsed: true,
	filterData: filterData,
	size: 'small'
}, _temp)) || _class);
exports.default = TreeModal;