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

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;

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 classnames from 'classnames';
import { connect } from 'react-redux';
import isEqual from 'lodash/isEqual';

import { get } from '../../api/xhrUtils';
import { userCanAccess } from '../../utils/roleUtils';
import { collectValues, getChildByKeyValue } from '../../utils/treeUtils';

import Button from '../button/Button';
import Icon from '../Icon';
import Tree from '../tree/Tree';
import Modal from '../modal/Modal';
import Spinner from '../Spinner';

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

function filterData(data, user) {
	return data.map(function (page) {
		page.userCanAccess = 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 React.createElement(
		'div',
		null,
		React.createElement(Button, { text: 'Collapse All', onClick: onCollapseAll, disabled: allCollapsed }),
		React.createElement(Button, { 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 React.createElement(
		'div',
		null,
		React.createElement(Button, { text: primaryActionText, style: 'primary', onClick: onSave, disabled: selectedId === null }),
		React.createElement(Button, { 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 React.createElement(
		'div',
		{ className: classnames('tree-item', isOver && 'drag-' + position) },
		React.createElement(
			'div',
			{
				className: classnames('tree-cell', { dragging: selectedDrag, selected: selected, disabled: !userCanAccess }),
				onClick: userCanAccess ? onClick : null,
				onDoubleClick: userCanAccess ? onDoubleClick : null },
			React.createElement(
				'div',
				{ className: 'tree-cell-icon' },
				showIndicator && React.createElement(
					'div',
					{
						className: classnames('tree-cell-control', isCollapsed && 'collapsed'),
						onClick: onIndicatorClick,
						onDoubleClick: onIndicatorDoubleClick },
					React.createElement(Icon, { name: 'chevron-' + (isCollapsed ? 'right' : 'down'), size: '18' })
				)
			),
			status !== undefined && React.createElement(
				'div',
				{ className: 'tree-cell-status' },
				React.createElement('div', { className: classnames('status', status) })
			),
			!userCanAccess && React.createElement(
				'div',
				{ className: 'tree-cell-icon' },
				React.createElement(Icon, { name: 'lock', size: 12 })
			),
			React.createElement(
				'div',
				{ className: classnames('tree-cell-title', { disabled: !userCanAccess }) },
				title
			)
		)
	);
};

var TreeModal = (_dec = 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 = collectValues(_this.state.data, 'id', function (item) {
				return item.children && item.children.length > 0;
			});
			var allCollapsed = isEqual(collapsableIds.sort(), collapsedIds.sort());
			_this.setState({ collapsedIds: collapsedIds, allCollapsed: allCollapsed });
		};

		_this.handleCollapseAll = function () {
			var collapsedIds = 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(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;
		}
		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 React.createElement(
			Modal,
			{
				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 ? React.createElement(
				'div',
				{ className: 'loader-center' },
				React.createElement(Spinner, null)
			) : React.createElement(Tree, {
				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;
}(Component), _class2.defaultProps = {
	data: [],
	url: '/admin/pages.json',
	title: 'Select Parent Page',
	primaryActionText: 'Select Page',
	startCollapsed: true,
	filterData: filterData,
	size: 'small'
}, _temp)) || _class);
export { TreeModal as default };