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

package/src/ui/layout/Tooltip/calculate.ts

@@ -1,180 +0,0 @@
-import {TooltipArrowPosition, TooltipStylePosition} from '../Tooltip/Tooltip';
-
-export default function calculate(gap, position, parentRef, tooltipSize, arrowSize) {
-    const style: TooltipStylePosition = { left: null, right: null, top: null };
-    let arrowPosition: TooltipArrowPosition = null;
-
-    const {top, right, left, width, height} = parentRef.getBoundingClientRect();
-    const parentDimensions = {top, right, left, width, height};
-    parentDimensions.top += window.scrollY;
-
-    // eslint-disable-next-line default-case
-    switch (position) {
-        case 'top':
-        case 'topLeft':
-        case 'topRight':
-            // Проверка - выходит ли tooltip за верхний край страницы?
-            // Если да - меняем позицию на bottom
-            if ((parentDimensions.top - window.scrollY) <= Math.round(tooltipSize.height + gap)) {
-                style.top = parentDimensions.top + parentDimensions.height;
-                position = position.replace('top', 'bottom');
-            } else {
-                style.top = parentDimensions.top - tooltipSize.height;
-            }
-            break;
-
-        case 'bottom':
-        case 'bottomLeft':
-        case 'bottomRight':
-            /// Проверка - выходит ли tooltip за нижний край страницы?
-            // Если да - меняем позицию на top
-            if ((window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY))
-                <= Math.round(tooltipSize.height + gap)
-            ) {
-                style.top = parentDimensions.top - tooltipSize.height;
-                position = position.replace('bottom', 'top');
-            } else {
-                style.top = parentDimensions.top + parentDimensions.height;
-            }
-            break;
-
-        case 'left':
-        case 'leftTop':
-        case 'leftBottom':
-            // Проверка - выходит ли tooltip за левый край страницы?
-            // Если да - меняем позицию на right
-            if (parentDimensions.left <= Math.round(tooltipSize.width + gap)) {
-                style.left = parentDimensions.right;
-                position = position.replace('left', 'right');
-            } else {
-                style.left = parentDimensions.left - tooltipSize.width;
-            }
-
-            break;
-
-        case 'right':
-        case 'rightTop':
-        case 'rightBottom':
-            // Проверка - выходит ли tooltip за правый край страницы?
-            // Если да - меняем позицию на left
-            if (document.body.clientWidth - parentDimensions.right <= Math.round(tooltipSize.width + gap)) {
-                style.left = parentDimensions.left - tooltipSize.width;
-                position = position.replace('right', 'left');
-            } else {
-                style.left = parentDimensions.right;
-            }
-            break;
-    }
-
-    // eslint-disable-next-line default-case
-    switch (position) {
-        case 'top':
-        case 'bottom':
-            // Выравнивание по середине
-            style.left = (parentDimensions.left + (parentDimensions.width / 2)) - (tooltipSize.width / 2);
-            break;
-
-        case 'topLeft':
-        case 'bottomLeft':
-            // Ширина tooltip больше родителя - стрелка на середину родителя
-            style.left = parentDimensions.left;
-            if (parentDimensions.width < tooltipSize.width) {
-                arrowPosition = {left: parentDimensions.width / 2};
-            }
-            break;
-
-        case 'topRight':
-        case 'bottomRight':
-            // Ширина tooltip больше родителя - стрелка на середину родителя
-            style.right = document.body.clientWidth - parentDimensions.right;
-            if (parentDimensions.width < tooltipSize.width) {
-                arrowPosition = {
-                    left: null,
-                    right: (parentDimensions.width / 2) - (arrowSize.width / 2),
-                };
-            }
-            break;
-
-        case 'left':
-        case 'right':
-            style.top = (parentDimensions.top + (parentDimensions.height / 2)) - (tooltipSize.height / 2);
-            break;
-
-        case 'leftTop':
-        case 'rightTop':
-            style.top = parentDimensions.top;
-            if (parentDimensions.height < (tooltipSize.height)) {
-                arrowPosition = {top: parentDimensions.height / 2};
-            }
-            break;
-
-        case 'leftBottom':
-        case 'rightBottom':
-            style.top = parentDimensions.top + parentDimensions.height - tooltipSize.height;
-            if (parentDimensions.height < tooltipSize.height) {
-                arrowPosition = {
-                    bottom: (parentDimensions.height / 2) - (arrowSize.height / 2),
-                };
-            }
-            break;
-    }
-
-    // Проверка - при позиционировании top/bottom tooltip не выходит за пределы страницы по горизонтали
-    if (position.includes('top') || position.includes('bottom')) {
-        if (!position.includes('Left')
-            && (style.left < 0 || parentDimensions.left <= Math.round((tooltipSize.width - parentDimensions.width) + gap))
-        ) {
-            style.right = null;
-            position = position.replace('Right', 'Left');
-            // Если ширина tooltip больше ширины родителя - выставить стрелку на середину родителя
-            if (parentDimensions.left < tooltipSize.width) {
-                arrowPosition = {left: parentDimensions.width / 2};
-            }
-            style.left = parentDimensions.left;
-        }
-
-        if (!position.includes('Right')
-            && (document.body.clientWidth - parentDimensions.right
-                <= Math.round((tooltipSize.width - parentDimensions.width) + gap))
-        ) {
-            position = position.replace('Left', 'Right');
-            if (parentDimensions.width < tooltipSize.width) {
-                arrowPosition = {
-                    left: null,
-                    right: (parentDimensions.width / 2) - (arrowSize.width / 2),
-                };
-            }
-            style.left = null;
-            style.right = document.body.clientWidth - parentDimensions.right;
-        }
-    }
-
-    // Проверка - при позиционировании left/right tooltip не выходит за пределы страницы по вертикали
-    if (position.includes('left') || position.includes('right')) {
-        if (!position.includes('Top')
-            && parentDimensions.top - window.scrollY <= Math.round((tooltipSize.height - parentDimensions.height) + gap)
-        ) {
-            position = position.replace('Bottom', 'Top');
-            if (parentDimensions.height < tooltipSize.height) {
-                arrowPosition = {top: parentDimensions.height / 2};
-            }
-            style.top = parentDimensions.top;
-        }
-
-        if (!position.includes('Bottom')
-            && (window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY)
-                <= Math.round((tooltipSize.height - parentDimensions.height) + gap)
-            )
-        ) {
-            position = position.replace('Top', 'Bottom');
-            if (parentDimensions.height < tooltipSize.height) {
-                arrowPosition = {
-                    bottom: (parentDimensions.height / 2) - (arrowSize.height / 2),
-                };
-            }
-            style.top = parentDimensions.top + parentDimensions.height - tooltipSize.height;
-        }
-    }
-
-    return {style, position, arrowPosition};
-}

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

@@ -1,44 +0,0 @@
-import * as React from 'react';
-import {Button} from '../../../../ui/form';
-import Tooltip from '../Tooltip';
-
-/**
- * Обычное использование Tooltip c 4-мя разными позициями и по-умолчанию включена видимость.
- * @order 1
- * @col 6
- */
-
-export default () => (
-    <>
-        <div
-            style={{
-                display: 'flex',
-                flexFlow: 'column',
-                alignItems: 'center',
-                gridGap: '15px',
-                padding: '50px',
-            }}
-        >
-            <Tooltip defaultVisible position='top' content='Всплывающая подсказка сверху.'>
-                <div className='mx-3' style={{width: 'max-content'}}>
-                    <Button className='mx-3' label='Show Tooltip on Top' />
-                </div>
-            </Tooltip>
-            <Tooltip defaultVisible position='right' content='Всплывающая подсказка справа.'>
-                <div className='mx-3' style={{width: 'max-content'}}>
-                    <Button className='mx-3' label='Show Tooltip Right' />
-                </div>
-            </Tooltip>
-            <Tooltip defaultVisible position='left' content='Всплывающая подсказка слева.'>
-                <div className='mx-3' style={{width: 'max-content'}}>
-                    <Button label='Show Tooltip Left' />
-                </div>
-            </Tooltip>
-            <Tooltip defaultVisible position='bottom' content='Всплывающая подсказка снизу.'>
-                <div className='mx-3' style={{width: 'max-content'}}>
-                    <Button label='Show Tooltip Bottom' />
-                </div>
-            </Tooltip>
-        </div>
-    </>
-);

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

@@ -1,2 +0,0 @@
-import Tooltip from './Tooltip';
-export default Tooltip;

package/src/ui/layout/index.ts

@@ -1,10 +0,0 @@
-import Header from './Header';
-import Loader from './Loader';
-import Notifications from './Notifications';
-import Tooltip from './Tooltip';
-export {
-    Header,
-    Loader,
-    Notifications,
-    Tooltip,
-};

package/src/ui/list/CheckboxColumn/CheckboxColumn.tsx

@@ -1,74 +0,0 @@
-import {useCallback, useMemo} from 'react';
-import {useComponents, useSelector} from '../../../hooks';
-import useDispatch from '../../../hooks/useDispatch';
-import {toggleAll, toggleItem} from '../../../actions/list';
-import {isChecked, isCheckedAll} from '../../../reducers/list';
-
-/**
- * CheckboxColumn
- * Колонка с чекбоксом, которая позволяет выбирать одну или все записи в таблице.
- */
-export interface ICheckboxColumnProps {
-    /**
-     * Первичный ключ для доступа к идентификатору item
-     */
-    primaryKey?: string,
-
-    /**
-     * Элемент коллекции item
-     */
-    item?: any,
-
-    /**
-     * Свойства для CheckboxField
-     */
-    fieldProps?: any;
-
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: any;
-
-    [key: string]: any,
-}
-
-export interface ICheckboxColumnViewProps {
-    fieldProps: Record<string, any>,
-    input: {
-        name: string,
-        value: any,
-        onChange: any,
-    },
-}
-
-export default function CheckboxColumn(props: ICheckboxColumnProps): JSX.Element {
-    const components = useComponents();
-
-    const itemId = props.item?.[props.primaryKey];
-
-    const dispatch = useDispatch();
-    const value = useSelector(state => (
-        props.item
-            ? isChecked(state, props.listId, itemId)
-            : isCheckedAll(state, props.listId)
-    ));
-
-    const onChange = useCallback(() => {
-        dispatch(props.item ? toggleItem(props.listId, itemId) : toggleAll(props.listId));
-    }, [dispatch, itemId, props.item, props.listId]);
-
-    const input = useMemo(() => ({
-        name: props.listId + '_checkbox',
-        value,
-        onChange,
-    }), [onChange, props.listId, value]);
-
-    return components.ui.renderView(props.view || 'list.CheckboxColumnView', {
-        input,
-    });
-}
-
-CheckboxColumn.defaultProps = {
-    primaryKey: 'id',
-};

package/src/ui/list/CheckboxColumn/demo/basic.tsx

@@ -1,22 +0,0 @@
-import Grid from '../../Grid';
-import * as React from 'react';
-import CheckboxColumn from '../CheckboxColumn';
-import {columns, items} from '../../Grid/demo/basic';
-
-/**
- * Basic
- * @order 1
- * @col 8
- */
-export default () => (
-    <>
-        <Grid
-            listId='CheckboxColumnBasicDemo'
-            items={items}
-            columns={[{
-                valueView: CheckboxColumn,
-                headerView: CheckboxColumn,
-            }, ...columns]}
-        />
-    </>
-);

package/src/ui/list/CheckboxColumn/index.ts

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

package/src/ui/list/ControlsColumn/ControlsColumn.tsx

@@ -1,70 +0,0 @@
-import _upperFirst from 'lodash-es/upperFirst';
-import {useMemo} from 'react';
-import {useComponents} from '../../../hooks';
-import {IButtonProps} from '../../form/Button/Button';
-import {IControlItem} from '../../nav/Controls/Controls';
-
-export interface IControlsColumnItem extends IButtonProps {
-    rule?: 'view' | 'update' | 'delete' | string,
-    visible?: boolean,
-}
-
-/**
- * ControlsColumn
- * Колонка для контролов
- */
-export interface IControlsColumnProps {
-    /**
-     * Первичный ключ
-     */
-    primaryKey?: string;
-
-    /**
-     * Коллекция с контролами
-     * @example [{id: 'delete'}, {id: 'view', position: 'left'}]
-     */
-    controls?: IControlItem[] | ((item: any, primaryKey: string) => IControlItem[]);
-
-    /**
-     * Элемент, для которого будет отображаться список с контролами, в нём можно задать видимость контрола
-     * с помощью свойства 'can' + _upperFirst(control.id)
-     * @example {name: 'Ivan', work: 'development', canView: false}
-     */
-    item?: any;
-
-    /**
-     * Переопределение view React компонента для кастомизации отображения колонки
-     * @example MyCustomView
-     */
-    view?: any;
-
-    [key: string]: any;
-}
-
-export interface IControlsColumnViewProps {
-    items: IControlsColumnItem[],
-}
-
-export default function ControlsColumn(props: IControlsColumnProps): JSX.Element {
-    const components = useComponents();
-
-    const items = useMemo(
-        () => {
-            const controls = typeof props.controls === 'function'
-                ? props.controls(props.item, props.primaryKey)
-                : props.controls;
-
-            return controls.map(control => ({
-                ...control,
-                position: 'left',
-                visible: control.visible !== false && props.item['can' + _upperFirst(control.id)] !== false,
-            }));
-        },
-        [props],
-    );
-
-    return components.ui.renderView(props.view || 'list.ControlsColumnView', {
-        ...props,
-        items,
-    });
-}

package/src/ui/list/ControlsColumn/demo/basic.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import ControlsColumn from '../../../list/ControlsColumn';
-import {controls} from '../../../nav/Controls/demo/basic';
-
-/**
- * Basic
- * @order 1
- * @col 8
- */
-export default () => (
-    <>
-        <ControlsColumn
-            controls={controls.map(item => ({
-                ...item,
-                visible: true,
-            }))}
-            item={{}}
-        />
-    </>
-);

package/src/ui/list/ControlsColumn/index.ts

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

package/src/ui/list/Empty/Empty.tsx

@@ -1,58 +0,0 @@
-import * as React from 'react';
-import {useComponents} from '../../../hooks';
-
-/**
- * Empty
- * Компонент используется в качестве заглушки в случае, когда пришла пустая коллекция данных.
- */
-export interface IEmptyProps {
-    /**
-     * Показывать заглушку?
-     * @example true
-     */
-    enable?: boolean,
-
-    /**
-     * Текст заглушки
-     * @example 'Записи не найдены'
-     */
-    text?: string | React.ReactNode;
-
-    /**
-     * Дополнительный CSS-класс для элемента отображения
-     */
-    className?: CssClassName;
-
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView,
-    [key: string]: any,
-}
-
-export type IEmptyViewProps = IEmptyProps
-
-function Empty(props: IEmptyProps): JSX.Element {
-    return useComponents().ui.renderView(props.view || 'list.EmptyView', props);
-}
-
-Empty.defaultProps = {
-    enable: true,
-    text: 'Записи не найдены',
-};
-
-export const normalizeEmptyProps = props => ({
-    ...Empty.defaultProps,
-    enable: !!props,
-    text: __('Записи не найдены'),
-    ...(typeof props === 'boolean'
-        ? {enable: props}
-        : (typeof props === 'string'
-            ? {text: props}
-            : props
-        )
-    ),
-});
-
-export default React.memo(Empty);

package/src/ui/list/Empty/demo/basic.tsx

@@ -1,14 +0,0 @@
-import * as React from 'react';
-
-import Empty from '../Empty';
-
-/**
- * Basic
- * @order 1
- * @col 6
- */
-export default () => (
-    <>
-        <Empty />
-    </>
-);

package/src/ui/list/Empty/demo/custom-text.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react';
-
-import Empty from '../Empty';
-
-/**
- * With custom view
- * @order 2
- * @col 6
- */
-export default () => (
-    <>
-        <Empty
-            text='К сожалению, ничего не найдено'
-            // @ts-ignore
-            view={(props: any) => (
-                <div className='alert alert-primary' role='alert'>
-                    {props.text}
-                </div>
-            )}
-        />
-    </>
-);

package/src/ui/list/Empty/index.ts

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