@steroidsjs/core 2.2.86 → 2.3.0-beta.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,50 @@
+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);
+        });
+    });
+});