@steroidsjs/core 2.2.87 → 2.3.0-beta.1

package/src/hooks/useAbsolutePositioning.tsx

@@ -0,0 +1,288 @@
+import * as React from 'react';
+import {useCallback, useEffect, useRef, useState} from 'react';
+
+interface IStyleObj {
+    left: 'unset' | number,
+    right: 'unset' | number,
+    top: 'unset' | number,
+}
+
+/**
+ * Варианты абсолютного позиционирования
+ * @example 'top'
+ */
+type Position = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' |
+    'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | string;
+
+export interface IAbsolutePositioningInputProps {
+    /**
+     * Включает "умное" позиционирование - если компонент не может быть помещен в промежуток между целевым компонентом
+     * и краем viewport, тогда он будет показан в противоположном направлении от заданного в свойстве position.
+     */
+    autoPositioning?: boolean
+
+    /**
+     * Дочерние элементы
+     */
+    children?: React.ReactNode,
+
+    /**
+     * Задержка перед размонтированием компонента, когда он должен быть скрыт.
+     * В этот момент удобно применять различные анимации ухода.
+     */
+    componentDestroyDelay?: number,
+
+    /**
+     * Промежуток между компонентом и целевым элементом.
+     * Используется в рассчетах позиционирования.
+     */
+    gap?: number,
+
+    /**
+     * Позиционирование компонента, относительно целевого элемента
+     */
+    position: Position,
+
+    /**
+     * Отобразить или скрыть компонент.
+     * Включает "ручной режим", при котором можно задать логику отображения компонента извне,
+     * через измененение данного свойства.
+     */
+    visible?: boolean,
+
+    /**
+     * Обработчик изменения свойства isComponentVisible (отображение на странице).
+     * Возвращает значение isComponentVisible.
+     */
+    onVisibleChange?: (isComponentVisible: boolean) => void,
+
+    /**
+     * Срабатывает в "ручном режиме", при клике за пределами компонента и целевого элемента.
+     * Возвращает значение visible.
+     */
+    onClose?: () => void,
+}
+
+export interface IAbsolutePositioningOutputProps {
+    /**
+     * Нужно ли рендерить компонент
+     */
+    isComponentExist: boolean,
+
+    /**
+     * Нужно ли показывать компонент на странице
+     */
+    isComponentVisible: boolean,
+
+    /**
+     * Объект стилей для абсолютного позиционирования
+     */
+    style: IStyleObj,
+}
+
+export default function useAbsolutePositioning(props: IAbsolutePositioningInputProps) {
+    const [isComponentExist, setIsComponentExist] = useState(props.visible);
+    const [isComponentVisible, setIsComponentVisible] = useState(props.visible);
+    const [position, setPosition] = useState<string>(props.position);
+    const [style, setStyle] = useState<IStyleObj>({
+        left: null,
+        right: null,
+        top: null,
+    });
+
+    const timerRef = useRef(null);
+
+    const calculateAbsolutePosition = useCallback((newPosition:Position, childRef, componentSize) => {
+        const newStyle: IStyleObj = { left: null, right: null, top: null };
+        const {top, right, left, width, height} = childRef.getBoundingClientRect();
+        const parentDimensions = {top, right, left, width, height};
+        parentDimensions.top += window.scrollY;
+
+        const useAutoPositioning = props.autoPositioning;
+
+        // eslint-disable-next-line default-case
+        switch (newPosition) {
+            case 'top':
+            case 'topLeft':
+            case 'topRight':
+                // Проверка - выходит ли tooltip за верхний край страницы?
+                // Если да - меняем позицию на bottom
+                if (useAutoPositioning && ((parentDimensions.top - window.scrollY) <= Math.round(componentSize.height + props.gap))) {
+                    newStyle.top = parentDimensions.top + parentDimensions.height;
+                    newPosition = newPosition.replace('top', 'bottom');
+                } else {
+                    newStyle.top = parentDimensions.top - componentSize.height;
+                }
+                break;
+
+            case 'bottom':
+            case 'bottomLeft':
+            case 'bottomRight':
+                // Проверка - выходит ли tooltip за нижний край страницы?
+                // Если да - меняем позицию на top
+                if (useAutoPositioning && ((window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY)))
+                    <= Math.round(componentSize.height + props.gap)
+                ) {
+                    newStyle.top = parentDimensions.top - componentSize.height;
+                    newPosition = newPosition.replace('bottom', 'top');
+                } else {
+                    newStyle.top = parentDimensions.top + parentDimensions.height;
+                }
+                break;
+
+            case 'left':
+            case 'leftTop':
+            case 'leftBottom':
+                // Проверка - выходит ли tooltip за левый край страницы?
+                // Если да - меняем позицию на right
+                if (useAutoPositioning && (parentDimensions.left <= Math.round(componentSize.width + props.gap))) {
+                    newStyle.left = parentDimensions.right;
+                    newPosition = newPosition.replace('left', 'right');
+                } else {
+                    newStyle.left = parentDimensions.left - componentSize.width;
+                }
+
+                break;
+
+            case 'right':
+            case 'rightTop':
+            case 'rightBottom':
+                // Проверка - выходит ли tooltip за правый край страницы?
+                // Если да - меняем позицию на left
+                if (useAutoPositioning && (document.body.clientWidth - parentDimensions.right <= Math.round(componentSize.width + props.gap))) {
+                    newStyle.left = parentDimensions.left - componentSize.width;
+                    newPosition = newPosition.replace('right', 'left');
+                } else {
+                    newStyle.left = parentDimensions.right;
+                }
+                break;
+        }
+
+        // eslint-disable-next-line default-case
+        switch (newPosition) {
+            case 'top':
+            case 'bottom':
+                // Выравнивание по середине
+                newStyle.left = (parentDimensions.left + (parentDimensions.width / 2)) - (componentSize.width / 2);
+                break;
+
+            case 'topLeft':
+            case 'bottomLeft':
+                // Ширина tooltip больше родителя - стрелка на середину родителя
+                newStyle.left = parentDimensions.left;
+                break;
+
+            case 'topRight':
+            case 'bottomRight':
+                // Ширина tooltip больше родителя - стрелка на середину родителя
+                newStyle.right = document.body.clientWidth - parentDimensions.right;
+                break;
+
+            case 'left':
+            case 'right':
+                newStyle.top = (parentDimensions.top + (parentDimensions.height / 2)) - (componentSize.height / 2);
+                break;
+
+            case 'leftTop':
+            case 'rightTop':
+                newStyle.top = parentDimensions.top;
+                break;
+
+            case 'leftBottom':
+            case 'rightBottom':
+                newStyle.top = parentDimensions.top + parentDimensions.height - componentSize.height;
+                break;
+        }
+
+        // Проверка - при позиционировании top/bottom tooltip не выходит за пределы страницы по горизонтали
+        if (newPosition.includes('top') || newPosition.includes('bottom')) {
+            if (!newPosition.includes('Left')
+                && (newStyle.left < 0 || parentDimensions.left
+                    <= Math.round((componentSize.width - parentDimensions.width) + props.gap))
+            ) {
+                newStyle.right = null;
+                newPosition = newPosition.replace('Right', 'Left');
+                newStyle.left = parentDimensions.left;
+            }
+
+            if (!newPosition.includes('Right')
+                && (document.body.clientWidth - parentDimensions.right
+                    <= Math.round((componentSize.width - parentDimensions.width) + props.gap))
+            ) {
+                newPosition = newPosition.replace('Left', 'Right');
+                newStyle.left = null;
+                newStyle.right = document.body.clientWidth - parentDimensions.right;
+            }
+        }
+
+        // Проверка - при позиционировании left/right tooltip не выходит за пределы страницы по вертикали
+        if (newPosition.includes('left') || newPosition.includes('right')) {
+            if (!newPosition.includes('Top')
+                && parentDimensions.top - window.scrollY
+                <= Math.round((componentSize.height - parentDimensions.height) + props.gap)
+            ) {
+                newPosition = newPosition.replace('Bottom', 'Top');
+                newStyle.top = parentDimensions.top;
+            }
+
+            if (!newPosition.includes('Bottom')
+                && (window.innerHeight - (parentDimensions.top + parentDimensions.height - window.scrollY)
+                    <= Math.round((componentSize.height - parentDimensions.height) + props.gap)
+                )
+            ) {
+                newPosition = newPosition.replace('Top', 'Bottom');
+                newStyle.top = parentDimensions.top + parentDimensions.height - componentSize.height;
+            }
+        }
+        setStyle(newStyle);
+        setPosition(newPosition);
+    }, [props.gap]);
+
+    const onShow = useCallback(() => {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+        setIsComponentExist(true);
+        setIsComponentVisible(false);
+
+        // TODO: How to wait setState callback?
+        setTimeout(() => setIsComponentVisible(true));
+    }, []);
+
+    const onHide = useCallback(() => {
+        setIsComponentVisible(false);
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+        // TODO add time value to props
+        timerRef.current = setTimeout(() => setIsComponentExist(false), props.componentDestroyDelay);
+    }, [props.componentDestroyDelay]);
+
+    // Trigger on visible
+    useEffect(() => {
+        if (props.visible) {
+            onShow();
+        } else {
+            onHide();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.visible]);
+
+    // Trigger on isComponentVisible
+    useEffect(() => {
+        if (props.onVisibleChange) {
+            props.onVisibleChange(isComponentVisible);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isComponentVisible]);
+
+    return {
+        isComponentExist,
+        isComponentVisible,
+        style,
+        position,
+        calculateAbsolutePosition,
+        onShow,
+        onHide,
+    };
+}

package/src/hooks/useAddressBar.tsx

@@ -0,0 +1,173 @@
+import _get from 'lodash-es/get';
+import _isEmpty from 'lodash-es/isEmpty';
+import queryString from 'query-string';
+import {replace} from 'connected-react-router';
+import _toInteger from 'lodash-es/toInteger';
+import _has from 'lodash-es/has';
+import _isEqual from 'lodash-es/isEqual';
+import {useCallback, useRef} from 'react';
+import useSelector from '../hooks/useSelector';
+import useDispatch from '../hooks/useDispatch';
+import {Model} from '../components/MetaComponent';
+
+export type ListControlPosition = 'top' | 'bottom' | 'both' | string;
+
+export interface IAddressBarConfig {
+    enable?: boolean,
+    useHash?: boolean,
+    model?: Model,
+}
+
+export interface IAddressBarOutput {
+    initialQuery: Record<string, unknown>,
+    updateQuery: (values: Record<string, unknown>) => void,
+}
+
+const ARRAY_VALUE_SEPARATOR = '_';
+
+export const defaultFromStringConverter = (value, type, item) => {
+    type = type || '';
+
+    // Array
+    if (type.substr(-2) === '[]') {
+        const subType = type.substr(0, type.length - 2);
+        return value
+            ? value.split(ARRAY_VALUE_SEPARATOR).map(v => defaultFromStringConverter(v, subType, item))
+            : null;
+    }
+
+    // Single
+    switch (type) {
+        case 'number':
+            return value || String(value) === '0' ? _toInteger(value) : null;
+
+        case 'boolean':
+            return ['1', 't', 'y'].includes(String(value).substr(0, 1)) || null;
+
+        default:
+        case 'string':
+            return value ? String(value) : null;
+    }
+};
+
+export const defaultToStringConverter = (value, type, item) => {
+    type = type || '';
+
+    // Array
+    if (type.substr(-2) === '[]') {
+        return value
+            ? [].concat(value || []).join(ARRAY_VALUE_SEPARATOR)
+            : null;
+    }
+
+    // Single
+    switch (type) {
+        case 'boolean':
+            return value ? '1' : null;
+
+        default:
+        case 'string':
+        case 'number':
+            return value ? String(value) : null;
+    }
+};
+
+export const queryRestore = (model: Model, location, useHash) => {
+    const values = queryString.parse(useHash ? location.hash : location.search);
+    const result = {};
+
+    const attributes = model?.attributes || Object.keys(values);
+    attributes.forEach(item => {
+        if (typeof item === 'string') {
+            item = {attribute: item};
+        }
+
+        const defaultValue = _has(item, 'defaultValue') ? item.defaultValue : null;
+        const converter = item.fromStringConverter || defaultFromStringConverter;
+        const value = converter(values[item.attribute] as string, item.jsType || 'string', item);
+
+        if (value !== null || defaultValue !== null) {
+            result[item.attribute] = value !== null ? value : defaultValue;
+        }
+    });
+    return result;
+};
+
+/**
+ * WARNING
+ * Method incorrectly saves nested objects (e.g. {foo: [{bar: 1}]}
+ * // @todo use 'qs' library instead of 'query-string'
+ *
+ */
+export const queryReplace = (model: Model, location, values, useHash) => {
+    const result = {};
+
+    const attributes = model?.attributes || Object.keys(values);
+    attributes.forEach(item => {
+        if (typeof item === 'string') {
+            item = {attribute: item};
+        }
+
+        const defaultValue = _has(item, 'defaultValue') ? item.defaultValue : null;
+        if (values?.[item.attribute] !== defaultValue) {
+            const converter = item.toStringConverter || defaultToStringConverter;
+            const value = converter(values?.[item.attribute], item.jsType || 'string', item);
+            if (value !== null) {
+                result[item.attribute] = value;
+            }
+        }
+    });
+
+    let query = queryString.stringify(result);
+    if (useHash) {
+        // TODO May be window.location?
+        query = '#' + query;
+        if (location.hash !== query) {
+            location.hash = query;
+        }
+        return [];
+    }
+    query = '?' + query;
+    if (location.search !== query) {
+        return replace(location.pathname + query);
+    }
+    return [];
+};
+
+export default function useAddressBar(config: IAddressBarConfig): IAddressBarOutput {
+    // Get location from redux
+    const location = useSelector(state => _get(state, 'router.location') || null);
+    // Initial query
+    const initialQueryRef = useRef(null);
+    if (!initialQueryRef.current && config.enable) {
+        initialQueryRef.current = queryRestore(config.model, location, config.useHash);
+    }
+
+    // Update handler
+    const dispatch = useDispatch();
+    const updateQuery = useCallback(values => {
+        if (config.enable) {
+            // Remove all 'undefined' values or empty objects/arrays from passed form values
+            const normalizedValues = Object.keys(values).reduce((obj, key) => {
+                const value = values[key];
+                const isValidValue = typeof value === 'object'
+                    ? !_isEmpty(value)
+                    : value !== undefined;
+                if (isValidValue) {
+                    obj[key] = value;
+                }
+                return obj;
+            }, {});
+            if (!_isEqual(initialQueryRef.current, normalizedValues)) {
+                initialQueryRef.current = normalizedValues;
+                dispatch(queryReplace(config.model, location, normalizedValues, config.useHash));
+            }
+        }
+    }, [config.enable, config.model, config.useHash, dispatch, location]);
+
+    // TODO
+    return {
+        initialQuery: initialQueryRef.current,
+        updateQuery,
+    };
+}

package/src/hooks/useApplication.tsx

@@ -0,0 +1,153 @@
+import * as React from 'react';
+import {Provider} from 'react-redux';
+import _merge from 'lodash-es/merge';
+import {useCallback} from 'react';
+import ClientStorageComponent from '../components/ClientStorageComponent';
+import HtmlComponent from '../components/HtmlComponent';
+import StoreComponent from '../components/StoreComponent';
+import UiComponent from '../components/UiComponent';
+import MetaComponent from '../components/MetaComponent';
+import ComponentsProvider, {IComponents} from '../providers/ComponentsProvider';
+import Router, {IRouteItem} from '../ui/nav/Router/Router';
+import MetricsComponent from '../components/MetricsComponent';
+import ScreenProvider, {IScreenProviderProps} from '../providers/ScreenProvider';
+import useComponents from './useComponents';
+import {IFetchConfig} from '../hooks/useFetch';
+
+/**
+ * Application HOC
+ * Обертка над корневым компонентом приложения, используется только в `Application.tsx`. Добавляет через React Context
+ * компоненты приложения и конфигурирует их.
+ */
+export interface IApplicationHookConfig {
+    components?: {
+        [key: string]: {
+            className: any,
+            [key: string]: any,
+        } | any,
+    } | any
+    onInit?: (components: IComponents) => void,
+    useGlobal?: boolean,
+    reducers?: any,
+    routes?: () => IRouteItem,
+    layoutView?: () => CustomView,
+    layoutProps?: Record<string, unknown>,
+    screen?: boolean | Omit<IScreenProviderProps, 'children'>,
+
+    /**
+     * These fetch configurations will be used to preload and store for no matter what route matched in case of SSR
+     */
+    defaultFetches?: IFetchConfig[],
+}
+
+export interface IApplicationHookResult {
+    renderApplication: (children?: any) => JSX.Element,
+    components: IComponents,
+}
+
+export const defaultComponents = {
+    clientStorage: {
+        className: ClientStorageComponent,
+    },
+    html: {
+        className: HtmlComponent,
+    },
+    //http: {
+    //    className: HttpComponent,
+    //},
+    //locale: {
+    //    className: LocaleComponent,
+    //},
+    meta: {
+        className: MetaComponent,
+    },
+    store: {
+        className: StoreComponent,
+    },
+    ui: {
+        className: UiComponent,
+    },
+    metrics: {
+        className: MetricsComponent,
+    },
+};
+
+export default function useApplication(config: IApplicationHookConfig = {}): IApplicationHookResult {
+    const useGlobal = config.useGlobal !== false;
+
+    let components: IComponents = useComponents();
+
+    if (useGlobal && !process.env.IS_SSR) {
+        components = window.SteroidsComponents || null;
+    }
+
+    // Create components
+    if (!components) {
+        components = {};
+        const componentsConfig = _merge({}, defaultComponents, config.components);
+        Object.keys(componentsConfig).forEach(name => {
+            if (typeof componentsConfig[name] === 'function') {
+                componentsConfig[name] = {className: componentsConfig[name]};
+            }
+
+            const {className, ...componentConfig} = componentsConfig[name];
+
+            // Append reducers to store
+            if (name === 'store') {
+                if (config.reducers) {
+                    componentConfig.reducers = config.reducers;
+                }
+            }
+
+            // eslint-disable-next-line new-cap
+            components[name] = new className(components, componentConfig);
+        });
+
+        window.SteroidsComponents = components;
+
+        // Init callback
+        if (config.onInit) {
+            config.onInit(components);
+        }
+    }
+
+    // Application wrapper
+    const renderApplication = useCallback((children = null) => {
+        let content = children;
+
+        // Wrap in routes
+        if (config.routes) {
+            content = (
+                <Router
+                    routes={config.routes()}
+                    wrapperView={config.layoutView()}
+                    wrapperProps={config.layoutProps}
+                />
+            );
+        }
+
+        if (config.screen) {
+            content = (
+                <ScreenProvider {...config.screen}>
+                    {content}
+                </ScreenProvider>
+            );
+        }
+
+        if (!(useGlobal || process.env.IS_SSR)) {
+            content = (
+                <ComponentsProvider components={components}>
+                    {content}
+                </ComponentsProvider>
+            );
+        }
+
+        return (
+            <Provider store={components.store.store}>
+                {content}
+            </Provider>
+        );
+    }, [components, config, useGlobal]);
+
+    return {renderApplication, components};
+}

package/src/hooks/useBem.test.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import {act} from 'react-dom/test-utils';
+import configureMockStore from 'redux-mock-store';
+import prepareMiddleware from '../../tests/storeMiddlewareMock';
+import mountWithApp from '../../tests/mountWithApp';
+import useBem, {IBem} from './useBem';
+
+const mockStore = configureMockStore([prepareMiddleware]);
+
+const MockResultComponent = (props: any) => <div />;
+const MockComponent = (props: any) => <MockResultComponent bem={useBem(props.namespace)} />;
+
+jest.useFakeTimers();
+
+describe('hook useBem', () => {
+    it('usage', async () => {
+        const wrapper = mountWithApp(MockComponent, {
+            namespace: 'Foo',
+        });
+        const bem: IBem = wrapper.find('MockResultComponent').prop('bem');
+
+        expect(typeof bem).toEqual('function');
+        expect(typeof bem.element).toEqual('function');
+        expect(typeof bem.block).toEqual('function');
+        expect(bem.block()).toEqual('Foo');
+        expect(bem.block({mode: 1})).toEqual('Foo Foo_mode_1');
+        expect(bem.block({mode: 'one'})).toEqual('Foo Foo_mode_one');
+        expect(bem.block({mode: true})).toEqual('Foo Foo_mode');
+        expect(bem.element('test')).toEqual('Foo__test');
+        expect(bem.element('test', {active: false})).toEqual('Foo__test');
+        expect(bem.element('test', {active: true})).toEqual('Foo__test Foo__test_active');
+    });
+});

package/src/hooks/useBem.ts

@@ -0,0 +1,15 @@
+import useComponents from './useComponents';
+
+export interface IBem {
+    (...classes: any[]): string,
+    element(...classes: any[]): string,
+    block(...classes: any[]): string,
+}
+
+/**
+ * Bem Hook
+ * Возвращает утилиту `bem` для правильной генерации CSS классов по методологии БЭМ (блок, элемент, модификатор)
+ */
+export default function useBem(namespace: string): IBem {
+    return useComponents().html.bem(namespace);
+}

package/src/hooks/useComponents.ts

@@ -0,0 +1,10 @@
+import {useContext} from 'react';
+import {ComponentsContext, IComponents} from '../providers/ComponentsProvider';
+
+export default function useComponents(): IComponents {
+    if (!process.env.IS_SSR) {
+        return window.SteroidsComponents;
+    }
+
+    return useContext(ComponentsContext); // eslint-disable-line react-hooks/rules-of-hooks
+}