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

package/src/ui/layout/ProgressBar/ProgressBar.tsx

@@ -1,77 +0,0 @@
-import * as React from 'react';
-import Icon from '../../icon/Icon/Icon';
-import {useComponents} from '../../../hooks';
-
-export interface IProgressBarViewProps {
-    percent: number;
-    status?: 'normal' | 'success' | 'exception';
-    size?: 'small' | 'medium' | 'large';
-    label?: string | React.ReactNode
-}
-
-/**
- * ProgressBar
- * Progress bar. Отображает текущий прогресс какой-либо операции
- */
-export interface IProgressBarProps {
-    /**
-     * Прогресс в процентах
-     */
-    percent: number;
-    /**
-     * Статус компонента
-     */
-    status?: 'normal' | 'success' | 'exception';
-    /**
-     * Размер компонента
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Тип компонента - круг или линия
-     */
-    type?: 'line' | 'circle';
-    /**
-     * Флаг, определяющий показывать ли лейбл
-     */
-    showLabel?: boolean;
-    /**
-     * Функция, позволяющая изменить генерацию лейбла
-     * @param percent Прогресс в процентах
-     */
-    label?: (percent: number) => string;
-    /**
-     * Функция, позволяющая задавать собственные иконки в зависимости от прогресса и статуса
-     * @param status Статус компонента
-     * @param percent Прогресс в процентах
-     */
-    icon?: (status: string, percent: number) => React.ReactNode;
-}
-
-function ProgressBar(props: IProgressBarProps): JSX.Element {
-    const components = useComponents();
-
-    const getLabel = (() => {
-        if (!props.showLabel) return null;
-        if (props.icon) return props.icon(props.status, props.percent);
-        if (props.status === 'success') return <Icon name="check" />;
-        if (props.status === 'exception') return <Icon name="times" />;
-        return props.label(props.percent);
-    });
-
-    if (props.type === 'line') {
-        return components.ui.renderView('layout.LineProgressBarView',
-            {percent: props.percent, status: props.status, size: props.size, label: getLabel()});
-    }
-    return components.ui.renderView('layout.CircleProgressBarView',
-        {percent: props.percent, status: props.status, size: props.size, label: getLabel()});
-}
-
-ProgressBar.defaultProps = {
-    status: 'normal',
-    size: 'medium',
-    type: 'line',
-    showLabel: true,
-    label: percent => `${percent}%`,
-};
-
-export default ProgressBar;

package/src/ui/layout/ProgressBar/demo/percent.tsx

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import ProgressBar from '../ProgressBar';
-
-/**
- * Свойство percent может задваться статично или динамически.
- * @order 2
- * @col 6
- */
-
-export default () => {
-    const [count, setCount] = React.useState<number>(0);
-    const getRandomInt = (min, max) => {
-        min = Math.ceil(min);
-        max = Math.floor(max);
-        return Math.floor(Math.random() * (max - min)) + min;
-    };
-
-    if (count < 100) {
-        setTimeout(() => setCount(e => e + getRandomInt(1, 10)), 1500);
-    }
-
-    return (
-        <div style={{display: 'flex', gridGap: '10px', paddingRight: '10px'}}>
-            <div style={{display: 'flex', gridGap: '10px'}}>
-                <ProgressBar percent={count} size='small' type='circle' status={count >= 100 ? 'success' : 'normal'} />
-                <ProgressBar percent={10} size='small' type='circle' status='exception' />
-            </div>
-            <div style={{maxWidth: '70%'}}>
-                <ProgressBar percent={10} size='small' status='exception' />
-                <ProgressBar percent={count} size='small' status={count >= 100 ? 'success' : 'normal'} />
-            </div>
-        </div>
-    );
-};

package/src/ui/layout/ProgressBar/demo/showLabel.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import ProgressBar from '../ProgressBar';
-
-/**
- * Можно убрать иконку.
- * @order 4
- * @col 6
- */
-
-export default () => (
-    <div style={{display: 'grid', gridGap: '10px', paddingRight: '10px'}}>
-        <div style={{display: 'flex', gridGap: '10px'}}>
-            <ProgressBar percent={10} size='small' type='circle' showLabel={false} />
-            <ProgressBar percent={50} size='small' status='exception' type='circle' showLabel={false} />
-            <ProgressBar percent={100} size='small' status='success' type='circle' showLabel={false} />
-        </div>
-        <div style={{maxWidth: '90%', display: 'grid', gridGap: '10px'}}>
-            <ProgressBar percent={10} size='small' showLabel={false} />
-            <ProgressBar percent={50} size='small' status='exception' showLabel={false} />
-            <ProgressBar percent={100} size='small' status='success' showLabel={false} />
-        </div>
-    </div>
-);

package/src/ui/layout/ProgressBar/demo/sizes.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import ProgressBar from '../ProgressBar';
-
-/**
- * По-умолчанию имеется 3 вида размера.
- * @order 5
- * @col 12
- */
-
-export default () => (
-    <div style={{display: 'grid', gridGap: '10px', paddingRight: '10px'}}>
-        <div style={{display: 'flex', gridGap: '10px'}}>
-            <ProgressBar percent={10} size='small' type='circle' />
-            <ProgressBar percent={50} size='medium' status='exception' type='circle' />
-            <ProgressBar percent={100} size='large' status='success' type='circle' />
-        </div>
-        <div style={{maxWidth: '90%', display: 'grid', gridGap: '10px'}}>
-            <ProgressBar percent={10} size='small' />
-            <ProgressBar percent={50} size='medium' status='exception' />
-            <ProgressBar percent={100} size='large' status='success' />
-        </div>
-    </div>
-);

package/src/ui/layout/ProgressBar/demo/status.tsx

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import ProgressBar from '../ProgressBar';
-
-/**
- * Компонент имеет 3 базовых вида статуса.
- * @order 1
- * @col 6
- */
-
-export default () => (
-    <div>
-        <ProgressBar percent={10} size='small' />
-        <ProgressBar percent={50} size='small' status='exception' />
-        <ProgressBar percent={100} size='small' status='success' />
-    </div>
-);

package/src/ui/layout/ProgressBar/demo/type.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import ProgressBar from '../ProgressBar';
-
-/**
- * Имеется два типа: 'circle', 'line'. По-умолчанию задается 'line'.
- * @order 3
- * @col 6
- */
-
-export default () => (
-    <div style={{display: 'grid', gridGap: '10px', paddingRight: '10px'}}>
-        <div style={{display: 'flex', gridGap: '10px'}}>
-            <ProgressBar percent={10} size='small' type='circle' />
-            <ProgressBar percent={50} size='small' status='exception' type='circle' />
-            <ProgressBar percent={100} size='small' status='success' type='circle' />
-        </div>
-        <div style={{maxWidth: '90%'}}>
-            <ProgressBar percent={10} size='small' />
-            <ProgressBar percent={50} size='small' status='exception' />
-            <ProgressBar percent={100} size='small' status='success' />
-        </div>
-    </div>
-);

package/src/ui/layout/ProgressBar/index.ts

@@ -1,3 +0,0 @@
-import ProgressBar from "./ProgressBar";
-
-export default ProgressBar;

package/src/ui/layout/Skeleton/Skeleton.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react';
-import {useComponents} from '../../../hooks';
-
-export interface ISkeletonViewProps {
-    className?: string,
-    children?: React.ReactNode,
-    animation?: 'pulse' | 'wave',
-    type?: 'text' | 'rect' | 'circle',
-    height?: string | number,
-    width?: string | number
-}
-
-export interface ISkeletonProps {
-    className?: string,
-    children?: React.ReactNode,
-    animation?: 'pulse' | 'wave',
-    type?: 'text' | 'rect' | 'circle',
-    height?: string | number,
-    width?: string | number
-}
-
-function Skeleton(props: ISkeletonProps): JSX.Element {
-    return useComponents().ui.renderView('layout.SkeletonView', props);
-}
-
-Skeleton.defaultProps = {
-    animation: 'pulse',
-    type: 'text',
-};
-
-export default Skeleton;

package/src/ui/layout/Skeleton/demo/animations.tsx

@@ -1,40 +0,0 @@
-import * as React from 'react';
-import Skeleton from '../Skeleton';
-
-/**
- * Демонстрация двух видов анимации и трёх типов Skeleton.
- * @order 1
- * @col 3
- */
-
-export default () => (
-    <div
-        style={{
-            display: 'flex',
-            gridGap: '20px',
-        }}
-    >
-        <div style={{display: 'grid', gridGap: '10px'}}>
-            <div style={{width: 100, height: 30}}>
-                <Skeleton animation='wave' type='text' />
-            </div>
-            <div style={{width: 100, height: 100}}>
-                <Skeleton animation='wave' type='rect' />
-            </div>
-            <div style={{width: 100, height: 100}}>
-                <Skeleton animation='wave' type='circle' />
-            </div>
-        </div>
-        <div style={{display: 'grid', gridGap: '10px'}}>
-            <div style={{width: 100, height: 30}}>
-                <Skeleton animation='pulse' type='text' />
-            </div>
-            <div style={{width: 100, height: 100}}>
-                <Skeleton animation='pulse' type='rect' />
-            </div>
-            <div style={{width: 100, height: 100}}>
-                <Skeleton animation='pulse' type='circle' />
-            </div>
-        </div>
-    </div>
-);

package/src/ui/layout/Skeleton/demo/width height.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import Skeleton from '../Skeleton';
-
-/**
- * Демонстрация задания кастомной ширины и высоты.
- * @order 2
- * @col 5
- */
-
-export default () => (
-    <div
-        style={{
-            display: 'flex',
-            gridGap: '20px',
-        }}
-    >
-        <div style={{display: 'flex', gridGap: '10px'}}>
-            <Skeleton animation='wave' type='text' width={50} height={200} />
-            <Skeleton animation='wave' type='circle' width={300} height={200} />
-        </div>
-    </div>
-);

package/src/ui/layout/Skeleton/index.ts

@@ -1,2 +0,0 @@
-import Skeleton from "./Skeleton";
-export default Skeleton;

package/src/ui/layout/Tooltip/Tooltip.tsx

@@ -1,197 +0,0 @@
-import * as React from 'react';
-import {useCallback, useRef, useState} from 'react';
-import {useMount} from 'react-use';
-import calculate from '../Tooltip/calculate';
-import {useComponents} from '../../../hooks';
-import TooltipInnerPortal from './TooltipPortalInner';
-
-/**
- * Варианты позиций всплывающей подсказки
- * @example 'top'
- */
-type TooltipPosition = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' |
-    'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | string;
-
-export interface TooltipArrowPosition {
-    left?: number | string,
-    right?: number | string,
-    top?: number | string,
-    bottom?: number | string,
-}
-
-export interface TooltipStylePosition {
-    left: 'unset' | number,
-    right: 'unset' | number,
-    top: 'unset' | number,
-}
-
-export interface ITooltipProps {
-    /**
-     * Текст подсказки
-     * @example 'Это всплывающая подсказка.'
-     */
-    content?: string | any,
-
-    /**
-     * Позиционирование подсказки, относительно целевого элемента
-     */
-    position?: TooltipPosition,
-
-    /**
-     * Показывать ли подсказку сразу после рендера страницы
-     * @example true
-     */
-    defaultVisible?: boolean,
-
-    /**
-     * Стили для абсолютного позиционирования подсказки
-     */
-    style?: TooltipStylePosition,
-
-    /**
-     * Стили для позиционирования стрелки
-     * @example {left: 10}
-     */
-    arrowPosition?: TooltipArrowPosition,
-
-    /**
-     * Рассчет позиции подсказки
-     */
-    calculatePosition?: (tooltipDimensions: object, arrowDimensions: object) => void,
-
-    [key: string]: any,
-}
-
-export interface ITooltipViewProps extends ITooltipProps {
-    isTooltipVisible: boolean,
-    content: string | any,
-    position: TooltipPosition,
-    style: TooltipStylePosition,
-}
-
-/*
-* @Todo + check all calculations + describe
-*       + 12 positions
-*       - custom styles / classes
-*       - defaultVisible -> logic
-*       - check window resize
-*       - check for more properties
-*       - fix arrow position (right, bottom) NOT centered
-*       - refactor code
-* */
-
-function Tooltip(props: ITooltipProps): JSX.Element {
-    const components = useComponents();
-
-    const [isComponentExist, setIsComponentExist] = useState(false);
-    const [isTooltipVisible, setIsTooltipVisible] = useState(props.defaultVisible);
-    const [style, setStyle] = useState<TooltipStylePosition>({
-        left: null,
-        right: null,
-        top: null,
-    });
-    const [arrowPosition, setArrowPosition] = useState<TooltipArrowPosition>({
-        left: null,
-        right: null,
-        top: null,
-        bottom: null,
-    });
-
-    const timerRef = useRef(null);
-    const positionRef = useRef(props.position);
-    const childRef = useRef(null);
-
-    const onShowTooltip = useCallback(() => {
-        if (timerRef.current) {
-            clearTimeout(timerRef.current);
-        }
-        setIsComponentExist(true);
-        setIsTooltipVisible(false);
-
-        // TODO: How to wait setState callback?
-        setTimeout(() => setIsTooltipVisible(true));
-    }, []);
-
-    const onHideTooltip = useCallback(() => {
-        setIsTooltipVisible(false);
-        if (timerRef.current) {
-            clearTimeout(timerRef.current);
-        }
-        timerRef.current = setTimeout(() => setIsComponentExist(false), props.animationMs);
-    }, [props.animationMs]);
-
-    // Основная функция расчета позиции
-    const calculatePosition = useCallback((tooltipSize, arrowSize) => {
-        const result = calculate(
-            props.gap,
-            positionRef.current,
-            childRef.current,
-            tooltipSize,
-            arrowSize,
-        );
-
-        positionRef.current = result.position;
-        setStyle(result.style);
-        if (result.arrowPosition) {
-            setArrowPosition(result.arrowPosition);
-        }
-    }, [props.gap]);
-
-    useMount(() => {
-        if (isTooltipVisible) {
-            onShowTooltip();
-        }
-    });
-
-    if (!props.content) {
-        return props.children;
-    }
-
-    const TooltipView = components.ui.getView('layout.TooltipView');
-    const childrenElement: any = typeof props.children === 'object'
-        ? React.Children.only(props.children)
-        : undefined;
-    return (
-        <>
-            {childrenElement
-                ? React.cloneElement(childrenElement, {
-                    ref: childRef,
-                    onMouseOver: onShowTooltip,
-                    onMouseOut: onHideTooltip,
-                })
-                : (
-                    <span
-                        ref={childRef}
-                        onFocus={onShowTooltip}
-                        onMouseOver={onShowTooltip}
-                        onBlur={onHideTooltip}
-                        onMouseOut={onHideTooltip}
-                    >
-                        {props.children}
-                    </span>
-                )}
-            {isComponentExist && (
-                <TooltipInnerPortal>
-                    <TooltipView
-                        isTooltipVisible={isTooltipVisible}
-                        content={props.content}
-                        position={positionRef.current}
-                        style={style}
-                        arrowPosition={arrowPosition}
-                        calculatePosition={calculatePosition}
-                    />
-                </TooltipInnerPortal>
-            )}
-        </>
-    );
-}
-
-Tooltip.defaultProps = {
-    content: '',
-    position: 'top',
-    defaultVisible: false,
-    gap: 16,
-    animationMs: 300,
-};
-
-export default Tooltip;

package/src/ui/layout/Tooltip/TooltipPortalInner.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import {createPortal} from 'react-dom';
-import {components} from '../../../hoc';
-import {IComponentsHocOutput} from '../../../hoc/components';
-
-@components('ui')
-export default class TooltipPortal extends React.PureComponent<IComponentsHocOutput> {
-    componentDidMount() {
-        if (!this.props.ui.getPortalElement()) {
-            throw new Error('Not found UI Portal container. Please set <Portal/> in layout.');
-        }
-    }
-
-    render() {
-        return createPortal(this.props.children, this.props.ui.getPortalElement());
-    }
-}