nexshop-web-contents/src/component/scene/scene-editor/scene-editor-view.js

Nexshop Web Contents Project

import React, {Component} from 'react';
import PanelGroup from "react-panelgroup";
import PropTypes from 'prop-types';
import {DropDown} from "nexshop-web-elements";
import {FIT_MODES} from "../../../constants/fit-modes";

const REVERSED_FIT_MODES = [...FIT_MODES.reverse()];

export default class SceneEditorView extends Component {
    constructor(props) {
        super(props);

        this.createGroup = this.createGroup.bind(this);
        this.createPanel = this.createPanel.bind(this);
        this.onPanelDragOver = this.onPanelDragOver.bind(this);
        this.onPanelDragDrop = this.onPanelDragDrop.bind(this);
        this.onPanelClicked = this.onPanelClicked.bind(this);
        this.onPanelTrashClicked = this.onPanelTrashClicked.bind(this);
        this.onFitModeDropDownSelected = this.onFitModeDropDownSelected.bind(this);
        this.clearPanel = this.clearPanel.bind(this);
    }

    createGroup(group) {
        let alignItems = [];
        let widths = [];

        group.panels.map((item) => {
            if (item.type === 'group') {
                alignItems.push(this.createGroup(item));
            } else {
                alignItems.push(this.createPanel(item));
            }

            widths.push(item.domAttribute);
        });

        return (
            <PanelGroup key={group.id} borderColor={'#d8d8d8'} direction={group.direction} panelWidths={widths}>
                {alignItems}
            </PanelGroup>
        );
    }

    onFitModeDropDownSelected(fitMode, panelId, contentItemId) {
        this.props.updateFitMode(fitMode, panelId, contentItemId);
    }

    getPanelBackgroundColor(contentItem) {
        return contentItem ? 'black' : 'white';
    }

    createPanel(panel) {
        const {isDraggedOverPanel, isSelectedPanel} = this.props;
        const contentItem = panel.contentItems ? panel.contentItems[0] : '';
        const contentUrl = contentItem.thumbnailUrls ? contentItem.thumbnailUrls.large : '';
        const backgroundColor = this.getPanelBackgroundColor(contentItem);

        return (
            <div key={panel.id} className="layout-panel__body">
                <div id={panel.id}
                     className={`layout-panel__body__status${isDraggedOverPanel(panel.id) ? '--dragged-over' : ''}
                            layout-panel__body__status${isSelectedPanel(panel.id) ? '--selected' : ''}`}
                     style={{backgroundImage: `url(${contentUrl})`, backgroundSize: contentItem.fitMode, backgroundColor: backgroundColor}}
                     onDrop={this.onPanelDragDrop(panel.id)}
                     onDragOver={(e) => this.onPanelDragOver(e)}
                     onClick={(e) => this.onPanelClicked(e)}
                >
                    {
                        this.props.selectedTabId !== 'layout' && contentItem === '' &&
                        <div className='layout-panel__guide-message'>Drag & drop contents</div>
                    }
                </div>
                <div
                    className={`layout-panel__controller${isSelectedPanel(panel.id) && contentItem ? '--active' : ''}`}>
                    <div className="layout-panel__controller--icon-wrapper">
                        <div className="layout-panel__controller--trash-can"
                             onClick={this.onPanelTrashClicked(panel.id)}/>
                    </div>
                    {
                        contentItem &&
                        <DropDown items={REVERSED_FIT_MODES}
                                  onSelect={(item) => this.onFitModeDropDownSelected(item.value, panel.id, contentItem.id)}
                                  selected={REVERSED_FIT_MODES.find(item => item.value === contentItem.fitMode)}
                                  classNamePrefix={'scene-fitMode'} displayButtonIcon={false}/>
                    }
                </div>
            </div>
        );
    }

    onPanelDragOver(e) {
        const {setDraggedOverPanelId} = this.props;
        let targetId = e.currentTarget.id;
        setDraggedOverPanelId(targetId);
        e.preventDefault();
    }

    onPanelDragDrop(panelId) {
        return (e) => {
            const {setDraggedOverPanelId, setSelectedPanelId, addContentItem} = this.props;
            setDraggedOverPanelId('');
            setSelectedPanelId(e.currentTarget.id);

            const transferredContentsItem = JSON.parse(e.dataTransfer.getData('contentsItem'));
            e.dataTransfer.clearData();

            const contentItem = {
                id: transferredContentsItem.id,
                type: transferredContentsItem.type,
                durationSeconds: 5,
                fitMode: 'cover',
                contentUrl: transferredContentsItem.metaData.contentUrl,
                thumbnailUrls: transferredContentsItem.thumbnailUrls,
            };

            addContentItem(panelId, contentItem);
        };
    }

    clearPanel(e) {
        const {setDraggedOverPanelId, setSelectedPanelId} = this.props;
        if (e.target.className === 'scene-editor-wrapper--horizontal'
            || e.target.className === 'scene-editor-wrapper--vertical') {
            setDraggedOverPanelId('');
            setSelectedPanelId('');
            e.stopPropagation();
        }
    }

    onPanelClicked(e) {
        const {setSelectedPanelId} = this.props;

        setSelectedPanelId(e.currentTarget.id);
    }

    onPanelTrashClicked(panelId) {
        return () => {
            const {setDraggedOverPanelId, setSelectedPanelId, removeContentItem} = this.props;
            setDraggedOverPanelId('');
            setSelectedPanelId('');

            removeContentItem(panelId);
        }
    }

    render() {
        const {orientation, getCSSWrapperName} = this.props;
        let panelGroup = this.createGroup(this.props.layout);

        return (
            <div className={`scene-editor-wrapper${getCSSWrapperName(orientation)}`} onClick={(e) => {
                this.clearPanel(e)
            }}>
                <div id="scene-body" className={`layout-wrapper${getCSSWrapperName(orientation)}`}
                     onMouseUp={this.props.updatePanelWidths}
                     onMouseLeave={this.props.updatePanelWidths}>
                    {panelGroup}
                </div>
            </div>
        );
    }
};

SceneEditorView.propTypes = {
    layout: PropTypes.object.isRequired,
    orientation: PropTypes.string.isRequired,
    isDraggedOverPanel: PropTypes.func.isRequired,
    setDraggedOverPanelId: PropTypes.func.isRequired,
    isSelectedPanel: PropTypes.func.isRequired,
    setSelectedPanelId: PropTypes.func.isRequired,
    addContentItem: PropTypes.func.isRequired,
    removeContentItem: PropTypes.func.isRequired,
    selectedTabId: PropTypes.string.isRequired,
    updateFitMode: PropTypes.func.isRequired,
};