CostumeTab---render

render () {
    const {
        dispatchUpdateRestore, // eslint-disable-line no-unused-vars
        intl,
        isRtl,
        onNewCostumeFromCameraClick,
        onNewLibraryBackdropClick,
        onNewLibraryCostumeClick,
        cameraModalVisible,
        onRequestCloseCameraModal,
        vm
    } = this.props;

    if (!vm.editingTarget) {
        return null;
    }

    const isStage = vm.editingTarget.isStage;
    const target = vm.editingTarget.sprite;

    const addLibraryMessage = isStage ? messages.addLibraryBackdropMsg : messages.addLibraryCostumeMsg;
    const addFileMessage = isStage ? messages.addFileBackdropMsg : messages.addFileCostumeMsg;
    const addSurpriseFunc = isStage ? this.handleSurpriseBackdrop : this.handleSurpriseCostume;
    const addLibraryFunc = isStage ? onNewLibraryBackdropClick : onNewLibraryCostumeClick;
    const addLibraryIcon = isStage ? addLibraryBackdropIcon : addLibraryCostumeIcon;

    const costumeData = target.costumes ? target.costumes.map(costume => ({
        name: costume.name,
        asset: costume.asset,
        details: costume.size ? this.formatCostumeDetails(costume.size, costume.bitmapResolution) : null,
        dragPayload: costume
    })) : [];
    return (
        <AssetPanel
            buttons={[
                {
                    title: intl.formatMessage(addLibraryMessage),
                    img: addLibraryIcon,
                    onClick: addLibraryFunc
                },
                {
                    title: intl.formatMessage(messages.addCameraCostumeMsg),
                    img: cameraIcon,
                    onClick: onNewCostumeFromCameraClick
                },
                {
                    title: intl.formatMessage(addFileMessage),
                    img: fileUploadIcon,
                    onClick: this.handleFileUploadClick,
                    fileAccept: '.svg, .png, .jpg, .jpeg, .gif',
                    fileChange: this.handleCostumeUpload,
                    fileInput: this.setFileInput,
                    fileMultiple: true
                },
                {
                    title: intl.formatMessage(messages.addSurpriseCostumeMsg),
                    img: surpriseIcon,
                    onClick: addSurpriseFunc
                },
                {
                    title: intl.formatMessage(messages.addBlankCostumeMsg),
                    img: paintIcon,
                    onClick: this.handleNewBlankCostume
                },
                {
                    title: intl.formatMessage(addLibraryMessage),
                    img: searchIcon,
                    onClick: addLibraryFunc
                }
            ]}
            dragType={DragConstants.COSTUME}
            isRtl={isRtl}
            items={costumeData}
            selectedItemIndex={this.state.selectedCostumeIndex}
            onDeleteClick={target && target.costumes && target.costumes.length > 1 ?
                this.handleDeleteCostume : null}
            onDrop={this.handleDrop}
            onDuplicateClick={this.handleDuplicateCostume}
            onExportClick={this.handleExportCostume}
            onItemClick={this.handleSelectCostume}
        >
            {target.costumes ?
                <PaintEditorWrapper
                    selectedCostumeIndex={this.state.selectedCostumeIndex}
                /> :
                null
            }
            {cameraModalVisible ? (
                <CameraModal
                    onClose={onRequestCloseCameraModal}
                    onNewCostume={this.handleCameraBuffer}
                />
            ) : null}
        </AssetPanel>
    );
}