@steroidsjs/core 2.3.0-beta.5 → 2.3.0-beta.7

package/src/ui/form/Button/Button.tsx

@@ -1,354 +0,0 @@
-import * as React from 'react';
-import {useSelector, useDispatch} from 'react-redux';
-import {useCallback, useContext, useMemo, useRef, useState} from 'react';
-import {useUpdateEffect} from 'react-use';
-import FieldLayout from '../FieldLayout';
-import {goToRoute} from '../../../actions/router';
-import {buildUrl, getRouteProp} from '../../../reducers/router';
-import {useComponents, useForm} from '../../../hooks';
-import {FormContext, IFormContext} from '../Form/Form';
-import {mergeLayoutProp} from '../../../utils/form';
-
-interface IButtonBadge {
-    enable?: boolean,
-    value?: number,
-    color?: ColorName,
-    className?: CssClassName,
-}
-
-/**
- * Button
- * Кнопка или ссылка. Используется в интерфейсе для выполнения какого-либо действия по клику (onClick),
- * смена страницы в рамках роутинга (goToRoute), переход по внешней ссылке (url) или отправки формы (submit form)
- */
-export interface IButtonProps {
-    /**
-     * Текст кнопки или ссылки
-     * @example Save
-     */
-    label?: string | any;
-
-    /**
-     * Подсказка, отображается при наведении (через тег title)
-     * @example Save
-     */
-    hint?: string | any;
-
-    /**
-     * Должна ли показываться надпись на кнопке в состоянии загрузки
-     * @example true
-     */
-    showLabelOnLoading?: boolean;
-
-    /**
-     * HTML Тип
-     * @example submit
-     */
-    type?: 'button' | 'submit';
-
-    /**
-     * Цвет состояния
-     * @example success
-     */
-    color?: ColorName;
-
-    /**
-     * Отображать как ссылку?
-     * @example true
-     */
-    link?: boolean;
-
-    /**
-     * Иконка
-     */
-    icon?: string;
-
-    /**
-     * Цифра (к примеру, новые сообщения)
-     */
-    badge?: number | IButtonBadge;
-
-    /**
-     * Отображать индикатор загрузки?
-     * @example true
-     */
-    isLoading?: boolean;
-
-    /**
-     * Отобразить кнопку в состоянии неуспешного нажатия (например, при неуспешном ajax запросе)
-     * @example true
-     */
-    isFailed?: boolean;
-
-    /**
-     * Через сколько миллисекунд должно исчезнуть состояние "failed"
-     * @example 5000
-     */
-    resetFailedMs?: number,
-
-    /**
-     * Включает стиль `outline`, когда у кнопки остается только `border`, а цвет кнопки становится прозрачным
-     * @example true
-     */
-    outline?: boolean;
-
-    /**
-     * HTML аттрибут `target`, доступен только для ссылок
-     * @example _blank
-     */
-    target?: string;
-
-    /**
-     * Ссылка на внешнюю страницу, используется совместно с свойством `link`
-     * @example https://ya.ru
-     */
-    url?: string;
-
-    /**
-     * При указании данного свойства, после нажатия на кнопку и до выполнения действия будет отображено нативное
-     * окно с текстом подтверждения - `window.confirm('Ваш текст')`.
-     * @example Удалить запись #512?
-     */
-    confirm?: string;
-
-    /**
-     * Обработчик события нажатия. Для асинхронных событий вовзращяйте в обработчике `Promise`, тогда кнопка
-     * автоматически будет переключаться в режим загрузки (`loading`) на время выполнения `Promise`.
-     * @param e => fetch(...)
-     */
-    onClick?: (e: Event | React.MouseEvent) => Promise<any> | any;
-
-    /**
-     * Переводит кнопку в состояние "не активна"
-     * @example true
-     */
-    disabled?: boolean;
-
-    /**
-     * Включает стиль `block`, делая размер кнопки на 100% ширины блока
-     * @example true
-     */
-    block?: boolean;
-
-    /**
-     * Объект CSS стилей
-     * @example {width: '45%'}
-     */
-    style?: any;
-
-    /**
-     * Дополнительный CSS-класс для кнопки или ссылки
-     */
-    className?: CssClassName;
-
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: React.ComponentType;
-
-    /**
-     * ID роута, на который необходимо перейти, указанный в дереве `steroids` роутинга. Для передачи параметров
-     * используйте свойство `toRouteParams`
-     * @example profile
-     */
-    toRoute?: string;
-
-    /**
-     * Параметры роута, на который необходимо перейти, см. свойство `toRoute`.
-     * @example {userId: 52}
-     */
-    toRouteParams?: Record<string, unknown>;
-
-    /**
-     * Выбор макета для распложения кнопки в форме. Если кнопка находится внутри `<Form>...</Form>`, то `layout` будет
-     * взят из контекста формы и автоматически применен при отораженн. Для его отключения укажите `false`.
-     * Данное свойство так же может принимать объект, если нужно прокинуть дополнительные свойства в шаблон макета.
-     * Пример: `{layout: 'horizontal', cols: [2,6]}`
-     * @example horizontal
-     */
-    layout?: FormLayout;
-
-    /**
-     * ID формы, для которой кнопка выполняет submit. При указании ID формы кнопка будет показывать состояние загрузки
-     * при отправке формы.
-     */
-    formId?: string | boolean,
-
-    /**
-     * Выбор html-тэга, который будет вставлен в DOM
-     * @example button
-     */
-    tag?: 'button' | 'a',
-
-    /**
-     * Размер
-     */
-    size?: Size,
-
-    /**
-     * Темная тема
-     */
-    dark?: boolean,
-
-    /**
-     * Цвет текста кнопки или ссылки
-     */
-    textColor?: any,
-
-    [key: string]: any;
-}
-
-export interface IButtonViewProps extends IButtonProps {
-    badge?: IButtonBadge,
-    url?: string,
-    formId?: string,
-    layout?: string,
-    disabled?: boolean,
-    onClick?: any,
-    submitting?: boolean,
-    showLabelOnLoading: boolean,
-}
-
-function Button(props: IButtonProps): JSX.Element {
-    const components = useComponents();
-    const dispatch = useDispatch();
-
-    // Badge
-    const badge = useMemo(() => ({
-        ...Button.defaultProps.badge,
-        enable: !!props.badge || props.badge === 0,
-        ...(typeof props.badge === 'object' ? props.badge : {value: props.badge}),
-    }), [props.badge]);
-
-    // Route -> url
-    const routePath = useSelector(state => props.toRoute ? getRouteProp(state, props.toRoute, 'path') : null);
-    const url = typeof props.url !== 'undefined'
-        ? props.url
-        : (routePath ? buildUrl(routePath, props.toRouteParams) : null);
-
-    // Flags: isLoading, isFailed
-    const [{isLoading, isFailed}, setStateFlags] = useState({isLoading: false, isFailed: false});
-    useUpdateEffect(
-        () => setStateFlags({isLoading: props.isLoading, isFailed: props.isFailed}),
-        [props.isLoading, props.isFailed],
-    );
-
-    // Form submitting
-    const context: IFormContext = useContext(FormContext);
-    const form = useForm();
-    let submitting = !!props.submitting;
-    if (form) {
-        submitting = form.formSelector(state => state.isSubmitting);
-    }
-
-    const disabled = submitting || props.disabled || isLoading;
-    const tag = props.tag || (props.link || url ? 'a' : 'button');
-    const layout = useMemo(() => mergeLayoutProp(context.layout, props.layout), [context.layout, props.layout]);
-
-    const failedTimer = useRef(null);
-    const onClick = useCallback((e) => {
-        e.stopPropagation();
-
-        if (process.env.IS_WEB && props.confirm && !window.confirm(props.confirm)) {
-            e.preventDefault();
-            return;
-        }
-
-        if (tag === 'a' && (props.toRoute || props.onClick)) {
-            if (!e.ctrlKey && !e.shiftKey && !e.metaKey) {
-                e.preventDefault();
-            }
-        }
-
-        if (props.toRoute) {
-            dispatch(goToRoute(props.toRoute, props.toRouteParams));
-        }
-
-        if (props.onClick) {
-            const result = props.onClick(e);
-            if (result instanceof Promise) {
-                setStateFlags({
-                    isLoading: true,
-                    isFailed: false,
-                });
-
-                if (failedTimer.current) {
-                    clearTimeout(failedTimer.current);
-                }
-
-                result
-                    .then(() => {
-                        // timeout is set to assure that the user will see loading state
-                        setTimeout(() => {
-                            setStateFlags({
-                                isLoading: false,
-                                isFailed: false,
-                            });
-                        }, 500);
-                    })
-                    .catch(error => {
-                        setStateFlags({
-                            isLoading: false,
-                            isFailed: props.resetFailedMs > 0,
-                        });
-
-                        if (props.resetFailedMs > 0) {
-                            failedTimer.current = setTimeout(() => {
-                                setStateFlags({
-                                    isLoading: false,
-                                    isFailed: false,
-                                });
-                            }, props.resetFailedMs);
-                        }
-                        throw error;
-                    });
-            }
-        }
-    }, [dispatch, props, tag]);
-
-    const button = components.ui.renderView(props.view || 'form.ButtonView', {
-        ...props,
-        badge,
-        layout,
-        isFailed,
-        isLoading,
-        disabled,
-        submitting,
-        tag,
-        formId: context?.formId || null,
-        url: url || (tag === 'a' ? '#' : null),
-        onClick: !disabled ? onClick : undefined,
-        children: props.label || props.children,
-    });
-
-    if (layout) {
-        return (
-            <FieldLayout layout={layout}>
-                {button}
-            </FieldLayout>
-        );
-    }
-
-    return button;
-}
-
-Button.defaultProps = {
-    type: 'button',
-    color: 'primary',
-    outline: false,
-    disabled: false,
-    submitting: false,
-    block: false,
-    size: 'md',
-    className: '',
-    resetFailedMs: 2000,
-    showLabelOnLoading: true,
-    badge: {
-        enable: false,
-        value: 0,
-        color: 'secondary',
-    },
-};
-
-export default Button;

package/src/ui/form/Button/demo/badge.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-
-import Button from '../Button';
-
-/**
- * Кнопка с бэйджом к примеру с количеством уведомолений.
- * @order 3
- * @col 4
- */
-
-export default () => (
-    <>
-        <Button
-            badge={2}
-            label={__('Badge')}
-        />
-    </>
-);

package/src/ui/form/Button/demo/basic.tsx

@@ -1,14 +0,0 @@
-import * as React from 'react';
-
-import Button from '../Button';
-
-/**
- * Простой пример использзования Button с заданным лейблом.
- * @order 1
- * @col 4
- */
-export default () => (
-    <>
-        <Button label={__('Basic')} />
-    </>
-);

package/src/ui/form/Button/demo/block.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-
-import Button from '../Button';
-
-/**
- * Кнопка растянутая по ширине родительского блока.
- * @order 4
- * @col 4
- */
-
-export default () => (
-    <>
-        <Button
-            block
-            label={__('Block')}
-        />
-    </>
-);

package/src/ui/form/Button/demo/colors.tsx

@@ -1,45 +0,0 @@
-import * as React from 'react';
-
-import Button from '../Button';
-
-const colors = {
-    primary: 'Primary',
-    secondary: 'Secondary',
-    success: 'Success',
-    danger: 'Danger',
-    warning: 'Warning',
-    info: 'Info',
-    light: 'Light',
-    dark: 'Dark',
-};
-
-/**
- * По-умлочанию кнопка имеет 8 видов цветов и так же режим outline к каждому из цветов.
- * @order 5
- * @col 12
- */
-
-export default () => (
-    <>
-        <div style={{display: 'flex', gridGap: '10px'}}>
-            {Object.keys(colors).map(color => (
-                <Button
-                    key={color}
-                    color={color}
-                    label={colors[color]}
-                />
-            ))}
-        </div>
-        <br />
-        <div style={{display: 'flex', gridGap: '10px'}}>
-            {Object.keys(colors).map(color => (
-                <Button
-                    key={color}
-                    color={color}
-                    label={colors[color]}
-                    outline
-                />
-            ))}
-        </div>
-    </>
-);

package/src/ui/form/Button/demo/confirm.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react';
-
-import Button from '../Button';
-
-/**
- * С вызовом Alert и текстом для подтверждения действий.
- * @order 6
- * @col 4
- */
-
-export default () => (
-    <>
-        <Button confirm='Are you sure?'>
-            Confirm
-        </Button>
-    </>
-);

package/src/ui/form/Button/demo/disabled.tsx

@@ -1,16 +0,0 @@
-import * as React from 'react';
-
-import Button from '../Button';
-
-/**
- * Пример выключенного компонента Button.
- * @order 2
- * @col 4
- */
-export default () => (
-    <>
-        <Button disabled>
-            Disabled
-        </Button>
-    </>
-);

package/src/ui/form/Button/demo/hint.tsx

@@ -1,16 +0,0 @@
-import * as React from 'react';
-
-import Button from '../Button';
-
-/**
- * С всплывающей подсказкой при наведении на кнопку.
- * @order 7
- * @col 4
- */
-export default () => (
-    <>
-        <Button hint='Hint text'>
-            Hint
-        </Button>
-    </>
-);

package/src/ui/form/Button/demo/icon.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-
-import Button from '../Button';
-
-/**
- * Обычное использования с иконокой.
- * @order 8
- * @col 4
- */
-
-export default () => (
-    <>
-        <Button
-            label={__('Icon')}
-            icon='phone'
-        />
-    </>
-);

package/src/ui/form/Button/demo/link.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-
-import Button from '../Button';
-
-/**
- * Использвание кнопки в качестве ссылки.
- * @order 9
- * @col 4
- */
-
-export default () => (
-    <>
-        <Button
-            link
-            url='https://google.ru'
-            target='_blank'
-            label={__('Link')}
-        />
-    </>
-);

package/src/ui/form/Button/demo/sizes.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react';
-
-import Button from '../Button';
-
-/**
- * По-умлочанию Button имеет 3 заданных размера.
- * @order 10
- * @col 8
- */
-
-const sizes = {
-    sm: 'Small',
-    md: 'Middle',
-    lg: 'Large',
-};
-
-export default () => (
-    <>
-        {Object.keys(sizes).map(size => (
-            <Button
-                key={size}
-                size={size}
-                className='float-left mr-2'
-            >
-                {sizes[size]}
-            </Button>
-        ))}
-    </>
-);

package/src/ui/form/Button/demo/tags.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react';
-
-import Button from '../Button';
-
-/**
- * Пример выбора html-тэга, который будет использован в DOM
- * @order 11
- * @col 6
- */
-
-export default () => (
-    <>
-        <Button
-            label={__('button')}
-            tag='button'
-        />
-        <Button
-            label={__('a')}
-            tag='a'
-        />
-    </>
-);

package/src/ui/form/Button/index.ts

@@ -1 +0,0 @@
-export {default} from './Button';

package/src/ui/form/CheckboxField/CheckboxField.story.js

@@ -1,15 +0,0 @@
-import basic from './demo/basic';
-import disabled from './demo/disabled';
-import errors from './demo/errors';
-import required from './demo/required';
-
-export default {
-  title: 'form.CheckboxField',
-};
-
-export {
-    basic,
-    disabled,
-    errors,
-    required,
-}

package/src/ui/form/CheckboxField/CheckboxField.test.tsx

@@ -1,50 +0,0 @@
-import 'jest-enzyme';
-import CheckboxFieldView from '@steroidsjs/bootstrap/form/CheckboxField/CheckboxFieldView';
-import mountWithApp from '../../../../tests/mountWithApp';
-import {ICheckboxFieldProps} from './CheckboxField';
-
-const CheckboxField = require('./CheckboxField').default;
-
-describe('CheckboxField tests', () => {
-    it('should render something without props', () => {
-        const wrapper = mountWithApp(CheckboxField, {view: CheckboxFieldView});
-        expect(wrapper).not.toBeEmptyRender();
-    });
-
-    describe('Static props', () => {
-        const props: ICheckboxFieldProps = {
-            label: 'Checkbox',
-            className: 'test',
-            required: true,
-            errors: ['Error text'],
-            disabled: true,
-        };
-
-        const wrapper = mountWithApp(CheckboxField, {...props, view: CheckboxFieldView});
-
-        it('should static props transmitted unchanged', () => {
-            expect(wrapper.find('CheckboxField')).toHaveProp(props);
-        });
-        it('should render label', () => {
-            expect(wrapper.find('.CheckboxFieldView__label')).toHaveText(props.label);
-        });
-
-        it('should have right external className', () => {
-            expect(wrapper.find('input')).toHaveClassName(props.className);
-        });
-        it('should be required', () => {
-            expect(wrapper.find('input')).toHaveProp('required', props.required);
-        });
-        it('should be disabled', () => {
-            expect(wrapper.find('input')).toBeDisabled();
-        });
-    });
-
-    describe('Actions', () => {
-        it('should checked after click', () => {
-            const wrapper = mountWithApp(CheckboxField, {view: CheckboxFieldView});
-            wrapper.find('input').simulate('change', {target: {checked: true} });
-            expect(wrapper.find('input')).toHaveProp('checked', true);
-        });
-    });
-});