@steroidsjs/core 2.2.86 → 2.3.0-beta.1

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

@@ -0,0 +1,180 @@
+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

@@ -0,0 +1,44 @@
+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

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

package/src/ui/layout/index.ts

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,74 @@
+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

@@ -0,0 +1,22 @@
+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

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

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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,20 @@
+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

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

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

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,22 @@
+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

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