onion/js/components/ascribe_information/acl_information.js

'use strict';

import React from 'react';
import informationTexts from '../../constants/information_text';
import { getLangText } from '../../utils/lang_utils';
import { replaceSubstringAtIndex } from '../../utils/general_utils';

let AclInformation = React.createClass({
    propTypes: {
        verbs: React.PropTypes.oneOfType([
            React.PropTypes.string,
            React.PropTypes.arrayOf(React.PropTypes.string)
        ]),
        aim: React.PropTypes.string
    },
    render() {
        let titleStyle = {
            color: '#02B6A3',
            fontSize: '11px',
            lineHeight: '3px'
        };

        let infoStyle = {
            color: '#333333',
            fontSize: '11px',
            lineHeight: '3px'
        };

        let exampleStyle = {
            color: '#B2B2B2',
            fontSize: '11px',
            lineHeight: '3px'
        };

        let paragraphStyle = {
            margin: '0.1em',
            lineHeight: '15px',
            align: 'justify'
        };
        let enabledIndices = this.props.verbs;
        let aim = this.props.aim;
        let titleList = informationTexts.title;
        let infoSentenceList = informationTexts.informationSentence;
        let exampleSentenceList = informationTexts.exampleSentence;
        let createJSXTextSnippet = function(title, info, example){
            if (aim) {
                if (aim === 'form') {
                    return (<p style={paragraphStyle}>
                        <span style={infoStyle}> {replaceSubstringAtIndex(info.slice(2), 's ', ' ')} <br/> </span>
                        <span style={exampleStyle}> {example} </span></p>);
                }
                else if (aim === 'button') {
                    return (<p style={paragraphStyle}><span style={titleStyle}> {title} </span>
                        <span style={infoStyle}> {info} <br/> </span>
                        <span style={exampleStyle}> {example} </span></p>);
                }
            }
            else {
                console.log('Aim is required when you want to place information text');
            }
        };
        let rows = null;
        let sortedIndices = ['share', 'transfer', 'consign', 'loan', 'delete'];
        let tempIndices = [];
        for (let i = 0; i < sortedIndices.length; i++){
            if (enabledIndices.indexOf(sortedIndices[i]) === -1){
                continue;
            }
            else{
                tempIndices.push(sortedIndices[i]);
            }
        }
        enabledIndices = tempIndices;
        if(Array.isArray(enabledIndices)) {
            rows = enabledIndices.map((i)=> {
                return (createJSXTextSnippet(getLangText(titleList[i]), getLangText(infoSentenceList[i]),
                    getLangText(exampleSentenceList[i]),
                    titleStyle, infoStyle, exampleStyle));
            });
        }
        else if (typeof enabledIndices === 'string'){
            rows = (createJSXTextSnippet(getLangText(titleList[enabledIndices]), getLangText(infoSentenceList[enabledIndices]),
                    getLangText(exampleSentenceList[enabledIndices]),
                    titleStyle, infoStyle, exampleStyle));
        }
        else if (typeof enabledIndices === 'undefined'){
            console.log('Verbs come undefined maybe you wrote verb instead of verbs?');
        }
        else {
            console.log('You need to supply an array of strings or string as verbs to AclInformation');
        }
        return (<span>{rows}</span>);
    }
});

export default AclInformation;