@steroidsjs/core 2.3.0-beta.1 → 2.3.0-beta.2

package/src/ui/content/Collapse/Collapse.tsx

@@ -1,133 +0,0 @@
-import * as React from 'react';
-import { useComponents } from '../../../hooks';
-
-export interface ICollapseProps {
-    view?: any,
-    style?: React.CSSProperties,
-    children?: any,
-
-    /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
-
-    /**
-     * @example {true}
-     */
-    disabled?: boolean,
-
-    /**
-     * Кастомная иконка svg или название иконки
-     * @example {'circle'}
-     */
-    icon?: React.ReactNode | string,
-
-    /**
-     * Показ иконки, которая показывает состояние CollapseItem. Поумолчанию включены.
-     * @example {false}
-     */
-    showIcon?: boolean,
-
-    /**
-     * Позиция иконки-индикатора
-     * @example {'left'}
-     */
-    iconPosition?: 'left' | 'right',
-
-    /**
-     * Включает режим Аккордиона (только один CollapseItem может быть открыт)
-     * @example {true}
-     */
-    isAccordion?: boolean,
-
-    /**
-     * Номер активного CollapseItem, который может меняться динамический или быть статичным
-     * @example
-     */
-    activeKey?: number,
-
-    /**
-     * Вызываемая функция при каждом изменении состояния
-     * @example {() => {console.log('success')}}
-     */
-    onChange?: (state) => void,
-
-    /**
-     * Отключение внешних рамок
-     * @example {true}
-     */
-    borderless?: boolean,
-}
-
-export interface ICollapseViewProps extends ICollapseProps{
-    toggleCollapse: (number) => void,
-    toggleAccordion: (number) => void,
-    childIndex: number,
-    isShowMore?: boolean,
-}
-
-function Collapse(props: ICollapseProps) {
-    const [state, setState] = React.useState<number[]>([]);
-
-    React.useEffect(() => {
-        if (props.onChange) {
-            props.onChange(state);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [state]);
-
-    const toggleCollapse = (indexSelected) => {
-        if (state.includes(indexSelected)) {
-            const newState = [...state];
-            const indexInArray = state.indexOf(indexSelected);
-            newState.splice(indexInArray, 1);
-            setState(newState);
-        } else {
-            const newState = [...state];
-            newState.push(indexSelected);
-            setState(newState);
-        }
-    };
-
-    const toggleAccordion = indexSelected => {
-        if (state.includes(indexSelected)) {
-            setState([]);
-        } else {
-            const newState = [];
-            newState.push(indexSelected);
-            setState(newState);
-        }
-    };
-
-    const components = useComponents();
-    const CollapseView = components.ui.getView(props.view || 'content.CollapseView');
-
-    return (
-        <CollapseView
-            {...props}
-        >
-            {
-                React.Children.map(props.children, (child: any, index) => React.cloneElement(child, {
-                    style: props.style,
-                    activeKey: props.activeKey,
-                    isAccordion: props.isAccordion,
-                    childIndex: index,
-                    toggleAccordion,
-                    toggleCollapse,
-                    isShowMore: (state || []).includes(index),
-                    icon: props.icon,
-                    showIcon: props.showIcon,
-                    iconPosition: props.iconPosition,
-                    borderless: props.borderless,
-                    ...child.props}))
-            }
-        </CollapseView>
-    );
-}
-
-Collapse.defaultProps = {
-    iconPosition: 'right',
-    showIcon: true,
-};
-
-export default Collapse;

package/src/ui/content/Collapse/CollapseItem.tsx

@@ -1,86 +0,0 @@
-import * as React from 'react';
-import { useComponents } from '../../../hooks';
-
-export interface ICollapseItemProps {
-    view?: any,
-    style?: React.CSSProperties,
-    children?: any,
-
-    /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
-
-    /**
-     * Название CollapseItem
-     * @example {'Подробнее'}
-     */
-    title?: string,
-
-    /**
-     * @example {true}
-     */
-    disabled?: boolean,
-
-    /**
-     * Кастомная иконка svg или название иконки
-     * @example {'circle'}
-     */
-    icon?: React.ReactNode | string,
-
-    /**
-     * Показ иконки, которая показывает состояние CollapseItem. Поумолчанию включены.
-     * @example {false}
-     */
-    showIcon?: boolean,
-
-    /**
-     * Позиция иконки-индикатора
-     * @example {'left'}
-     */
-    iconPosition?: 'left' | 'right',
-
-    /**
-     * Включает режим Аккордиона (только один CollapseItem может быть открыт)
-     * @example {true}
-     */
-    isAccordion?: boolean,
-
-    /**
-     * Номер активного CollapseItem, который может меняться динамический или быть статичным
-     * @example
-     */
-    activeKey?: number,
-
-    /**
-     * Вызываемая функция при каждом изменении состояния
-     * @example {() => {console.log('success')}}
-     */
-    onChange?: () => void,
-
-    /**
-     * Отключение внешних рамок
-     * @example {true}
-     */
-    borderless?: boolean,
-}
-
-export interface ICollapseItemViewProps extends ICollapseItemProps {
-    toggleCollapse?: (number) => void,
-    toggleAccordion?: (number) => void,
-    childIndex?: number,
-    isShowMore?: boolean,
-}
-
-function CollapseItem(props: ICollapseItemProps) {
-    const components = useComponents();
-    return components.ui.renderView(props.view || 'content.CollapseItemView', {
-        ...props,
-    });
-}
-
-CollapseItem.defaultProps = {
-    title: 'Collapse',
-};
-
-export default CollapseItem;

package/src/ui/content/Collapse/demo/accordion.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import Collapse from '../Collapse';
-import CollapseItem from '../CollapseItem';
-
-/**
- * Accordion mode
- * @order 2
- * @col 6
- */
-
-export default () => (
-    <div style={{minHeight: '255px'}}>
-        <Collapse isAccordion activeKey={2}>
-            <CollapseItem title='Accordion'>1</CollapseItem>
-            <CollapseItem title='Accordion'>2</CollapseItem>
-            <CollapseItem title='Accordion'>3</CollapseItem>
-        </Collapse>
-    </div>
-);

package/src/ui/content/Collapse/demo/basic.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import Collapse from '../Collapse';
-import CollapseItem from '../CollapseItem';
-
-/**
- * Basic
- * @order 1
- * @col 6
- */
-
-export default () => (
-    <div style={{minHeight: '255px'}}>
-        <Collapse>
-            <CollapseItem title='Show more'>1</CollapseItem>
-            <CollapseItem title='Show more'>2</CollapseItem>
-            <CollapseItem title='Show more'>3</CollapseItem>
-        </Collapse>
-    </div>
-);

package/src/ui/content/Collapse/demo/borderless.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import Collapse from '../Collapse';
-import CollapseItem from '../CollapseItem';
-
-/**
- * Borderless mode
- * @order 3
- * @col 6
- */
-
-export default () => (
-    <div style={{minHeight: '255px'}}>
-        <Collapse borderless>
-            <CollapseItem title='borderless'>1</CollapseItem>
-            <CollapseItem title='borderless'>2</CollapseItem>
-            <CollapseItem title='borderless'>3</CollapseItem>
-        </Collapse>
-    </div>
-);

package/src/ui/content/Collapse/demo/disable.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import Collapse from '../Collapse';
-import CollapseItem from '../CollapseItem';
-
-/**
- * Disable CollapseItem
- * @order 4
- * @col 6
- */
-
-export default () => (
-    <div style={{minHeight: '255px'}}>
-        <Collapse activeKey={1}>
-            <CollapseItem>1</CollapseItem>
-            <CollapseItem disabled title='disable'>2</CollapseItem>
-            <CollapseItem>3</CollapseItem>
-        </Collapse>
-    </div>
-);

package/src/ui/content/Collapse/demo/icon position.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import Collapse from '../Collapse';
-import CollapseItem from '../CollapseItem';
-
-/**
- * Icon position left or right
- * @order 7
- * @col 6
- */
-
-export default () => (
-    <>
-        <Collapse iconPosition='left' activeKey={2}>
-            <CollapseItem>Custom icon</CollapseItem>
-            <CollapseItem showIcon={false}>Custom icon</CollapseItem>
-            <CollapseItem>Custom icon</CollapseItem>
-        </Collapse>
-    </>
-);

package/src/ui/content/Collapse/demo/icon.tsx

@@ -1,59 +0,0 @@
-import * as React from 'react';
-import Collapse from '../Collapse';
-import CollapseItem from '../CollapseItem';
-
-/**
- * Custom icon
- * @order 5
- * @col 12
- */
-
-export default () => (
-    <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gridGap: '15px', minHeight: '255px'}}>
-        <Collapse
-            icon={(
-                <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M28 16.5C28 23.1274 22.6274 28.5 16 28.5C9.37258 28.5 4 23.1274 4 16.5C4 9.87258 9.37258 4.5 16 4.5C22.6274 4.5 28 9.87258 28 16.5Z" stroke="#39BBD8" strokeWidth="2" />
-                    <path d="M16 13.5L16 23.5" stroke="#39BBD8" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-                    <path d="M16 9.5L16 9.51" stroke="#39BBD8" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-                </svg>
-            )}
-            activeKey={1}
-        >
-            <CollapseItem>Custom icon</CollapseItem>
-            <CollapseItem>Custom icon</CollapseItem>
-            <CollapseItem>Custom icon</CollapseItem>
-        </Collapse>
-        <Collapse activeKey={2}>
-            <CollapseItem icon={(
-                <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M28 16.5C28 23.1274 22.6274 28.5 16 28.5C9.37258 28.5 4 23.1274 4 16.5C4 9.87258 9.37258 4.5 16 4.5C22.6274 4.5 28 9.87258 28 16.5Z" stroke="#64D03E" strokeWidth="2" />
-                    <path d="M21 12.5L14.3333 20.5L11 17.3" stroke="#64D03E" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-                </svg>
-            )}
-            >
-                Custom icon
-            </CollapseItem>
-            <CollapseItem icon={(
-                <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M28 16.5C28 23.1274 22.6274 28.5 16 28.5C9.37258 28.5 4 23.1274 4 16.5C4 9.87258 9.37258 4.5 16 4.5C22.6274 4.5 28 9.87258 28 16.5Z" stroke="#39BBD8" strokeWidth="2" />
-                    <path d="M16 13.5L16 23.5" stroke="#39BBD8" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-                    <path d="M16 9.5L16 9.51" stroke="#39BBD8" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-                </svg>
-            )}
-            >
-                Custom icon
-            </CollapseItem>
-            <CollapseItem icon={(
-                <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M28 16.5C28 23.1274 22.6274 28.5 16 28.5C9.37258 28.5 4 23.1274 4 16.5C4 9.87258 9.37258 4.5 16 4.5C22.6274 4.5 28 9.87258 28 16.5Z" stroke="#FFE457" strokeWidth="2" />
-                    <path d="M16 19.5L16 9.5" stroke="#FFE457" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-                    <path d="M16 23.5L16 23.49" stroke="#FFE457" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-                </svg>
-            )}
-            >
-                Custom icon
-            </CollapseItem>
-        </Collapse>
-    </div>
-);

package/src/ui/content/Collapse/demo/onChange.tsx

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import Collapse from '../Collapse';
-import CollapseItem from '../CollapseItem';
-
-/**
- * Anonymous function every time you change state of Collapse
- * @order 8
- * @col 6
- */
-
-export default () => {
-    const [touches, setTouches] = React.useState<number>(-2);
-    return (
-        <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gridGap: '15px', minHeight: '225px'}}>
-            <Collapse
-                style={{backgroundColor: 'lavender'}}
-                icon='plus'
-                onChange={() => setTouches(e => e + 1)}
-            >
-                <CollapseItem>Custom icon</CollapseItem>
-                <CollapseItem>Custom icon</CollapseItem>
-                <CollapseItem>Custom icon</CollapseItem>
-            </Collapse>
-            <div>
-                <p style={{backgroundColor: 'lavender'}}>
-                    You touched collapse
-                    {' '}
-                    {touches}
-                    {' '}
-                    time
-                </p>
-            </div>
-        </div>
-    );
-};

package/src/ui/content/Collapse/demo/show icon.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import Collapse from '../Collapse';
-import CollapseItem from '../CollapseItem';
-
-/**
- * Show or hide icon
- * @order 6
- * @col 6
- */
-
-export default () => (
-    <>
-        <Collapse activeKey={1}>
-            <CollapseItem>Custom icon</CollapseItem>
-            <CollapseItem showIcon={false}>Custom icon</CollapseItem>
-            <CollapseItem>Custom icon</CollapseItem>
-        </Collapse>
-    </>
-);

package/src/ui/content/Collapse/index.ts

@@ -1,12 +0,0 @@
-import CollapseItem from './CollapseItem';
-import Collapse from './Collapse';
-
-export {
-    CollapseItem,
-    Collapse,
-};
-
-export default {
-    CollapseItem,
-    Collapse,
-};

package/src/ui/content/CopyToClipboard/CopyToClipboard.tsx

@@ -1,75 +0,0 @@
-import React, {useCallback, useRef, useState} from 'react';
-import {IBemHocOutput} from '../../../hoc/bem';
-import {IConnectHocOutput} from '../../../hoc/connect';
-import useDispatch from '../../../hooks/useDispatch';
-
-import {showNotification} from '../../../actions/notifications';
-
-interface ICopyToClipboardProps extends IBemHocOutput, IConnectHocOutput {
-    value: string,
-    disabled?: boolean,
-    notification?: string | {
-        message?: string,
-        level?: string,
-        timeOut?: string,
-    },
-    className?: string,
-    children?: any,
-}
-
-export default function CopyToClipboard(props: ICopyToClipboardProps) {
-    const inputRef = useRef();
-    const [isCopied, setIsCopied] = useState(false);
-    const dispatch = useDispatch();
-
-    const onClick = useCallback(async () => {
-        if (!isCopied) {
-            if (navigator.clipboard) {
-                await navigator.clipboard.writeText(props.value);
-            } else {
-                const el: any = inputRef.current;
-                if (el) {
-                    el.focus();
-                    el.select();
-                }
-                document.execCommand('copy');
-            }
-            if (props.notification) {
-                const notification = {
-                    level: 'info',
-                    params: undefined,
-                    ...(typeof props.notification === 'string' ? {message: props.notification} : props.notification),
-                };
-                dispatch(showNotification(notification.message, notification.level, notification.params));
-            }
-
-            setIsCopied(true);
-            setTimeout(() => setIsCopied(false), 1000);
-        }
-    }, [dispatch, isCopied, props.notification, props.value]);
-
-    if (props.disabled) {
-        return props.children;
-    }
-
-    return (
-        <span
-            className={props.className}
-            onClick={onClick}
-            aria-hidden='true'
-        >
-            {props.children}
-            <input
-                ref={inputRef}
-                defaultValue={props.value}
-                style={{
-                    position: 'absolute',
-                    height: 1,
-                    width: 1,
-                    top: 0,
-                    opacity: 0,
-                }}
-            />
-        </span>
-    );
-}

package/src/ui/content/CopyToClipboard/index.ts

@@ -1,3 +0,0 @@
-import CopyToClipboard from './CopyToClipboard';
-
-export default CopyToClipboard;