delta-component/src/components/head/head.react.js

embeddable react component

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

// TODO: https://github.yandex-team.ru/lego/islands/pull/2304
import { decl } from 'islands/common.blocks/i-bem/i-bem.react.js';
import Bem from 'bem-react-core';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import uniqid from 'uniqid';

import actions from '../../redux/actions';

import Header from 'b:header2';
import 'b:header2 e:logo m:size=m t:css';
import 'b:logo m:name=ys-ru-86x35|ys-en-87x35 t:css';
import Button from 'b:button2 m:theme=normal|action m:size=m';
import Select from 'b:select2 m:type=radio';

import { transportFabric } from '../../../modules/transport';


const logoName = process.env.BEM_LANG === 'ru' ? 'ys-ru-86x35' : 'ys-en-87x35';

const LANGUAGES = [
    'python',
    'c_cpp',
    'golang',
    'java',
    'javascript',
    'sql',
    'csharp',
    'kotlin',
    'plain_text',
    'ruby',
    'rust',
    'objectivec',
    'swift',
    'xml',
    'json',
    'jsx',
    'css',
    'http',
    'yaml',
    'scala',
    'perl',
    'php',
].sort();

export default decl({
    block: 'head',

    onCreateTableButtonClick: function() {
        const id = uniqid();
        const documentString = 'epad/page/' + id;

        const transport = transportFabric('epad', `${window.location.protocol}//${global.location.host}`, documentString);

        transport.createDocument(documentString, '').then(
            document => {
                console.log('create doc success ', document.toString());
                location.href = '/page/' + documentString;
            },
            error => {
                console.log('create doc error ', error)
            }
        );
    },

    onLangChange: function(value) {
        this.props.setLang(value[0]);
    },

    content() {
        console.log('content');
        return (
            <Header>
                <Header.Main>
                    <Header.Logo name={logoName} size="m" url="//ya.ru" service="Delta"/>
                    <Header.Left>
                        {this.props.hasPlain ? <Select 
                            {...{
                                theme: "normal",
                                type: "radio",
                                key: "сreate-grid",
                                size: "m",
                                val: this.props.lang,
                                items: LANGUAGES.map(function(lang) {
                                    return {
                                        val: lang,
                                        text: lang
                                    };
                                }),
                                onChange: this.onLangChange.bind(this)
                            }}
                            >
                        </Select> : ''}
                    </Header.Left>
                    <Header.Right>
                        Вы пользуетесь <a href="https://wiki.yandex-team.ru/delta/dev/early-version-about/" target="_blank">бета-версией</a>.
                        О некорректном поведении, пожалуйста, пишите на рассылку <a href="mailto:delta-dev@yandex-team.ru">tools@</a>. &nbsp;
                        <Button
                            {...{
                                theme: "action",
                                key: "сreate-grid",
                                size: "m",
                                onClick: this.onCreateTableButtonClick.bind(this)
                            }}
                        >Создать
                        </Button>                    
                    </Header.Right>
                </Header.Main>
            </Header>
        );
    }
}, head => {
    const mapStateToProps = (state) => {
        let hasPlain = state.plain !== null;

        return {
            lang: state.lang,
            hasPlain: hasPlain
        };
    }
    const mapDispatchToProps = (dispatch) => {
        return bindActionCreators({ ...actions }, dispatch);;
    }

    return connect(mapStateToProps, mapDispatchToProps)(head);
});