smartxtrader 3.8.1-xm.0

package/src/templates/_common/components/elements.jsx

@@ -0,0 +1,294 @@
+import React from 'react';
+
+export const Li = ({
+    className,
+    id,
+    href,
+    param = '',
+    target,
+    text,
+    header,
+    p,
+    subitems = [],
+    type,
+    dataShow,
+    subitems_className,
+}) => {
+    const is_text_inline = typeof text === 'string' || typeof text === 'number';
+    const content = p && is_text_inline ? <p>{text}</p> : text;
+
+    return (
+        <li id={id} className={className} data-show={dataShow}>
+            { header && (
+                text ? <strong className='margin-right'>{header}</strong> : <h3>{header}</h3>
+            )}
+            { href ?
+                <a
+                    href={`${href}${param}`}
+                    rel={/^http/.test(href) ? 'noopener noreferrer' : undefined}
+                    target={target || undefined}
+                >
+                    {content}
+                    { type === 'nested' && <span className='nav-caret' /> }
+                </a>
+                :
+                content
+            }
+            { subitems.length ?
+                <ul className={subitems_className}>
+                    {subitems.map((subitem, idx) => <Li key={idx} {...subitem} />)}
+                </ul>
+                :
+                ''
+            }
+        </li>
+    );
+};
+
+export const List = ({ items, id, className }) => (
+    <React.Fragment>
+        { items.length ?
+            <ul id={id} className={className}>
+                {items.map((item, idx) => <Li key={idx} {...item} />)}
+            </ul>
+            :
+            undefined
+        }
+    </React.Fragment>
+);
+
+export const InfoBox = ({ padding, header, sub_header, text }) => {
+    let class1 = '';
+    let class2 = '';
+    if (padding) {
+        class1 = padding ? `gr-${padding}` : 'gr-4';
+        class2 = /^6/.test(padding) ? '' : 'gr-12-p';
+        class2 += ' gr-12-m';
+    }
+    const renderText = className => (
+        typeof text === 'string' || typeof text === 'number'
+            ? <p className={className}>{text}</p>
+            : <div className={className}>{text}</div>
+    );
+
+    return (
+        <div className={[class1, class2].join(' ')}>
+            <div className='border-bottom'>
+                <div className='fill-bg-color gr-padding-10'>
+                    <h3 className='gr-gutter no-margin'>{header}</h3>
+                </div>
+                { sub_header ?
+                    <React.Fragment>
+                        <div className='gr-gutter gr-padding-10'>{sub_header}</div>
+                        {renderText('gr-gutter gr-parent gr-padding-10 no-margin')}
+                    </React.Fragment>
+                    :
+                    renderText('gr-gutter gr-parent gr-padding-10')
+                }
+            </div>
+        </div>
+    );
+};
+
+export const FillBox = ({
+    padding,
+    center,
+    className = '',
+    align_left,
+    color,
+    border,
+    image,
+    href,
+    target,
+    download,
+    em,
+    text,
+    dataShow,
+    children,
+    id,
+}) => {
+    let classes1 = '';
+    if (padding) {
+        classes1 = `gr-12-m gr-6-p gr-padding-10 gr-${padding}${center ? ' gr-centered' : ''}`;
+    }
+
+    let classes2 = '';
+    classes2 += align_left ? '' : 'center-text ';
+    classes2 += 'gr-gutter gr-padding-20 ';
+    classes2 += color === 'dark' ? 'primary-bg-color ' : 'fill-bg-color ';
+    classes2 += `${border || ''}`;
+
+    return (
+        <div data-show={dataShow} id={id} className={[classes1, className].join(' ')}>
+            <div className={classes2}>
+                <div className='inline-flex center-align gr-gutter'>
+                    { image &&
+                        <img className='half-sized-picture gr-gutter-right' src={it.url_for(image)} />
+                    }
+                    { href ?
+                        <a
+                            href={href}
+                            target={target || undefined}
+                            download={!!download}
+                            className={color === 'dark' ? 'content-inverse-color' : undefined}
+                            rel={/^http/.test(href) ? 'noopener noreferrer' : undefined}
+                        >
+                            {em ? <em> {text} </em> : text}
+                        </a>
+                        :
+                        <p className='gr-gutter'>
+                            {em ? <em> {text} </em> : text}
+                        </p>
+                    }
+                </div>
+            </div>
+            {children}
+        </div>
+    );
+};
+
+export const Select = ({ id, className, options = [], value, defaultValue }) => {
+    const selected_option = value === undefined && defaultValue === undefined
+        ? options.find(option => option && option.selected)
+        : undefined;
+
+    const select_props = {
+        id,
+        className,
+    };
+
+    if (value !== undefined) {
+        select_props.value = value;
+    } else if (defaultValue !== undefined) {
+        select_props.defaultValue = defaultValue;
+    } else if (selected_option && selected_option.value !== undefined) {
+        select_props.defaultValue = selected_option.value;
+    }
+
+    return (
+        <select {...select_props}>
+            {options.map((option = {}, idx) => (
+                <option key={idx} value={option.value ?? undefined}>
+                    {option.text}
+                </option>
+            ))}
+        </select>
+    );
+};
+
+export const Tbody = ({ trs, tbody_id }) => (
+    <tbody id={tbody_id}>
+        {trs && trs.map((tr, inx_tr) => (
+            <tr key={inx_tr} data-anchor={tr.id || undefined} data-show={tr.dataShow}>
+                {(tr.row ? tr.row : tr).map((td, inx_td) => (
+                    td.header ?
+                        <th key={inx_td} className={td.className} id={td.id} {...td.balloon ? { 'data-balloon': td.balloon } : {}} {...(td.attributes || {})}>
+                            {td.header}
+                        </th>
+
+                        :
+                        <td key={inx_td} className={td.className} id={td.id} {...(td.attributes || {})}>
+                            {td.text}
+                            {td.custom_td}
+                        </td>
+                ))}
+            </tr>
+        ))}
+    </tbody>
+);
+
+export const Table = ({
+    id,
+    className,
+    data,
+    scroll,
+    tbody_id,
+    dataShow,
+}) => {
+    const content = (
+        <table id={id} className={className} data-show={dataShow}>
+            { data.thead &&
+                <thead>
+                    { data.thead.map((row, tr_inx) => (
+                        <tr key={tr_inx}>
+                            {row.map((th, th_inx) => (
+                                <th key={th_inx} className={th.className} {...(th.attributes || {})}>
+                                    {th.text}
+                                    {th.custom_th}
+                                </th>
+                            ))}
+                        </tr>
+                    ))}
+                </thead>
+            }
+            <Tbody
+                trs={data.tbody || []}
+                tbody_id={tbody_id}
+            />
+            { data.tfoot &&
+                <tfoot>
+                    { data.tfoot.map((row, tr_inx) => (
+                        <tr key={tr_inx}>
+                            {row.map((th, th_inx) => (
+                                <th
+                                    key={th_inx}
+                                    className={th.className}
+                                    id={th.id}
+                                    {...(th.attributes || {})}
+                                >
+                                    {th.text}
+                                </th>
+                            ))}
+                        </tr>
+                    ))}
+                </tfoot>
+            }
+        </table>
+    );
+    return (
+        scroll ?
+            <div className='table-container'>
+                {content}
+            </div>
+            :
+            content
+    );
+};
+
+export const DatePicker = ({ className, id, text }) => (
+    <div className={className || undefined}>
+        <label htmlFor={id} className='gr-gutter-right'>{text}:</label>
+        <input type='text' id={id} size='20' readOnly='readonly' className='no-margin' />
+    </div>
+);
+
+export const Button = ({
+    children,
+    className,
+    text_className,
+    href,
+    id,
+    text,
+    target,
+    balloon,
+}) => (
+    <a
+        id={id}
+        href={href || undefined}
+        className={
+            balloon ?
+                [className, 'no-underline'].join(' ')
+                : className
+        }
+        target={target}
+        data-balloon={balloon}
+    >
+        { children || <span className={text_className}>{text}</span> }
+    </a>
+);
+
+export const SocialButton = ({ provider }) => (
+    <a id={`button_${provider}`} className='button-social'>
+        <span className='name'>{provider}</span>
+    </a>
+);

package/src/templates/_common/components/forms.jsx

@@ -0,0 +1,241 @@
+import React from 'react';
+
+export const Fieldset = ({ children, legend, id, className }) => (
+    <fieldset id={id} className={className}>
+        {legend &&
+            <legend>{legend}</legend>
+        }
+        {children}
+    </fieldset>
+);
+
+export const FormRow = ({
+    autoComplete,
+    spaced,
+    type,
+    id,
+    className,
+    label,
+    checked,
+    row_class,
+    row_id,
+    sub_row_class,
+    label_row_class,
+    is_two_rows,
+    is_bold,
+    tooltip,
+    hint,
+    has_password_meter,
+    has_geovalidator,
+    attributes = {},
+    input_prefix,
+    children,
+    options,
+    default_option,
+}) => {
+    const getInnerElement = () => {
+        if (type === 'select') {
+            return (
+                <select id={id} className={`form_input ${className || ''}`} {...attributes} >
+                    {children}
+                </select>
+            );
+        }
+        if (type === 'radio') {
+            return (
+                <div id={id} className={className}>
+                    {options.map(({ value, label: label_text, data_balloon_text, textfield_id }, i) => {
+                        const option_id = `${id}_option_${i}`;
+                        return (
+                            <div key={value}>
+                                <input
+                                    type='radio'
+                                    name={id}
+                                    id={option_id}
+                                    value={value}
+                                    defaultChecked={value === default_option}
+                                />
+                                <label htmlFor={option_id}>
+                                    <span data-balloon={data_balloon_text} data-balloon-length='medium'>
+                                        {label_text}
+                                    </span>
+                                </label>
+                                {textfield_id &&
+                                    <input
+                                        type='text'
+                                        id={textfield_id}
+                                    />
+                                }
+                            </div>
+                        );
+                    })}
+                </div>
+            );
+        }
+        if (type === 'textarea') {
+            return (
+                <React.Fragment>
+                    <textarea className={className} id={id} {...attributes} />
+                    <label htmlFor={id} />
+                </React.Fragment>
+            );
+        }
+        if (['text', 'password', 'number', 'checkbox'].includes(type)) {
+            return (
+                <React.Fragment>
+                    {input_prefix}
+                    {type === 'password' ?
+                        <div className='password--field-wrapper'>
+                            <input
+                                autoComplete={autoComplete}
+                                type='password'
+                                className={`password--input-field ${className || ''}`}
+                                id={id}
+                                data-password={has_password_meter}
+                                {...attributes}
+                            />
+                            <div id='password_toggle' className='password--toggle'>
+                                <img
+                                    id='password_toggle_icon'
+                                    alt='toggle-password-view'
+                                    className='password-toggle-icon'
+                                    src={it.url_for('images/common/password_hide.svg')}
+                                />
+                            </div>
+                        </div>
+                        :
+                        <input
+                            type={type}
+                            className={className}
+                            id={id}
+                            {...attributes}
+                        />
+                    }
+                    {type === 'checkbox' && spaced ?
+                        <label htmlFor={id} />
+                        :
+                        undefined
+                    }
+                </React.Fragment>
+            );
+        }
+        if (type === 'label') {
+            return (
+                <span className='text-display'>
+                    {is_bold ? <strong id={id} {...attributes} /> : <span id={id} {...attributes} />}
+                </span>
+            );
+        }
+        return type === 'custom' ? children : undefined;
+    };
+
+    const inner_el_classname = () => {
+        if (is_two_rows) {
+            return 'gr-12';
+        } else if (has_geovalidator) {
+            return 'gr-3 gr-12-m';
+        }
+        return `gr-8 gr-12-m ${sub_row_class || ''}`;
+    };
+
+    if (type === 'checkbox' && !spaced) {
+        return (
+            <div className={`gr-row ${row_class || ''}`} id={row_id}>
+                <div className='gr-12 gr-padding-20 gr-centered'>
+                    <input id={id} type='checkbox' defaultChecked={!!checked} />
+                    &nbsp;
+                    <label htmlFor={id}>{label}</label>
+                </div>
+            </div>
+        );
+    }
+    return (
+        <div
+            className={`gr-row form-row center-text-m ${is_two_rows ? 'two-rows' : ''} ${row_class || ''}`}
+            id={row_id}
+        >
+            <div className={`${is_two_rows ? `gr-12 ${label_row_class}` : `gr-4 gr-12-m ${label_row_class}`}`}>
+                <label htmlFor={type !== 'label' ? id : undefined}>
+                    {tooltip ?
+                        <span data-balloon-length='xlarge' data-balloon={tooltip}>
+                            {label}
+                        </span> :
+                        label
+                    }
+                </label>
+            </div>
+            <div className={inner_el_classname()}>
+                {getInnerElement()}
+                {hint &&
+                    <p className='hint no-margin'>{hint}</p>
+                }
+            </div>
+            {has_geovalidator ? children : undefined}
+        </div>
+    );
+};
+
+export const SubmitButton = ({
+    is_centered,
+    className,
+    type,
+    text,
+    id,
+    is_full_width,
+    is_left_align,
+    no_error,
+    msg_id,
+    attributes,
+    no_wrapper,
+    custom_btn_text,
+    custom_btn_class,
+    custom_btn_href,
+    custom_btn_id,
+    custom_msg_text,
+}) => {
+    const content =
+        <React.Fragment>
+            { !no_error &&
+                <p
+                    id={msg_id || 'msg_form'}
+                    className={`${is_centered ? 'center-text' : ''} error-msg no-margin invisible`}
+                />
+            }
+            <div className='gr-padding-10'>
+                { custom_btn_text &&
+                    <a
+                        className={`button ${custom_btn_class || ''}`}
+                        href={custom_btn_href}
+                        id={custom_btn_id}
+                    >
+                        <span className='button'>{custom_btn_text}</span>
+                    </a>
+                }
+                { custom_msg_text &&
+                    <p className={`${is_centered ? 'center-text' : ''}`}>{custom_msg_text}</p>
+                }
+                <button
+                    id={id || 'btn_submit'}
+                    type={type === 'submit' ? 'submit' : undefined}
+                    {...attributes}
+                    className={`button${is_full_width ? ' full-width' : ''}`}
+                >
+                    {text}
+                </button>
+            </div>
+        </React.Fragment>;
+
+    if (!no_wrapper) {
+        return (
+            <div className={`${is_centered ? 'center-text' : 'gr-row'} ${className || ''}`} id={id}>
+                { !is_centered ?
+                    <div className={`${!is_left_align ? 'gr-8 gr-push-4 gr-12-m gr-push-0-m' : ''} center-text-m`}>
+                        {content}
+                    </div> :
+                    content
+                }
+            </div>
+        );
+    }
+    return content;
+};

package/src/templates/_common/components/html_comment.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const HTMLComment = ({ children }) => (
+    <span className='invisible' dangerouslySetInnerHTML={{ __html: `<!-- ${children} -->` }} />
+);
+
+export default HTMLComment;

package/src/templates/_common/components/language-menu-modal.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const LanguageMenuModal = () => (
+    <div id='language-menu-modal' className='invisible'>
+        <div id='language-menu'>
+            <div id='language-menu-header'>
+                <span>{it.L('Language settings')}</span>
+                <span id='language-menu-close_btn' />
+            </div>
+            <div id='language-menu-container'>
+                <div id='language-menu-list' />
+            </div>
+        </div>
+    </div>
+);
+
+export default LanguageMenuModal;

package/src/templates/_common/components/list_multiline.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const UnorderedList = ({ item }) => (
+    <ul className={item.ul_class}>
+        { item.texts.map((p, idx) => (
+            <li key={idx} className={item.li_class || undefined}>{p.li}</li>
+        ))}
+    </ul>
+);
+
+const ListMultiLine = ({ items = [] }) => (
+    <ol>
+        { items.map((item, idx) => (
+            <li key={idx}>
+                <strong>{item.header}</strong>
+                {item.ul ? <UnorderedList item={item} /> : item.texts.map((p, idx_p) => (<p key={idx_p}>{p.text}</p>))}
+            </li>
+        ))}
+    </ol>
+);
+
+export default ListMultiLine;

package/src/templates/_common/components/list_nested.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const ListNested = ({ strong, header, items = [], children }) => (
+    <li>
+        { strong ? <strong>{header}</strong> : header}
+        <ol className='reset_ol'>
+            { items.map((item, idx) => (
+                item.list_nested ?
+                    <ListNested key={idx} items={item.list_nested} header={item.header} strong={item.strong} /> :
+                    <li key={idx} >{item.text}</li>
+            ))}
+        </ol>
+        {children}
+    </li>
+);
+
+export default ListNested;

package/src/templates/_common/components/loading.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+/*
+*   TODO: Remove the extra classes when splitting the project.
+*   XYZSTRATEGY 1.0 and XYZSTRATEGY Nex is using different classNames
+*   to accomplish the same loader effect.
+*
+*   Classes for XYZSTRATEGY 1.0 :
+*       <div className={barspinner dark}
+*           <div className={rect${inx+1}}
+*
+*   Classes for XYZSTRATEGY Nex :
+*       <div className={barspinner barspinner--${ theme || 'dark'}}
+*           <div className={barspinner__rect barspinner__rect--${inx + 1}}
+*
+*   As a temporary solution, we will add both classes for 1.0 and Nex,
+*   however we should remove it in the future.
+*/
+
+const Loading = ({ is_invisible, theme, id }) => (
+    <div id={id} className={`barspinner barspinner--${ theme || 'dark'}${is_invisible ? ' invisible' : ''} dark`}>
+        { Array.from(new Array(5)).map((x, inx) => (
+            <div key={inx} className={`barspinner__rect barspinner__rect--${inx + 1} rect${inx + 1}`} />
+        ))}
+    </div>
+);
+
+export default Loading;