@steroidsjs/core 2.2.87 → 2.3.0-beta.1

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

@@ -0,0 +1,65 @@
+import 'jest-enzyme';
+import RateFieldView from '@steroidsjs/bootstrap/form/RateField/RateFieldView';
+import mountWithApp from '../../../../tests/mountWithApp';
+import {IRateFieldProps} from './RateField';
+
+const RateField = require('./RateField').default;
+
+describe('RateField tests', () => {
+    it('should render something without props', () => {
+        const wrapper = mountWithApp(RateField);
+        expect(wrapper).not.toBeEmptyRender();
+    });
+
+    describe('Static props', () => {
+        const props: IRateFieldProps = {
+            className: 'test',
+            itemsCount: 3,
+            defaultValue: 2,
+            required: true,
+            disabled: true,
+            inputProps: {},
+        };
+
+        const wrapper = mountWithApp(RateField, {...props, view: RateFieldView });
+
+        it('should static props transmitted unchanged', () => {
+            expect(wrapper.find('RateField')).toHaveProp(props);
+        });
+        it('should have right external className', () => {
+            expect(wrapper.find('RateField')).toHaveClassName(props.className);
+        });
+        it('should have right items number ', () => {
+            expect(wrapper.find('.RateFieldView__rate-item')).toHaveLength(props.itemsCount);
+        });
+        it('should have right default value', () => {
+            expect(wrapper.find('.RateFieldView__rate-item_is-full')).toHaveLength(props.defaultValue);
+        });
+        it('should be disabled', () => {
+            expect(wrapper.find('RateField')).toBeDisabled();
+        });
+    });
+
+    describe('Actions', () => {
+        it('should allowClear clear value after second click on the last active star', () => {
+            const props: IRateFieldProps = {
+                allowClear: true,
+                inputProps: {},
+            };
+
+            const wrapper = mountWithApp(RateField, {...props, view: RateFieldView});
+
+            expect(wrapper.find('RateField')).toHaveProp(props);
+
+            expect(wrapper.find('.RateFieldView__rate-item_is-full')).not.toExist();
+
+            wrapper.find('.RateFieldView__rate-item').at(2).simulate('click');
+
+            expect(wrapper.find('.RateFieldView__rate-item_is-full')).toHaveLength(3);
+
+            wrapper.find('.RateFieldView__rate-item').at(2).simulate('click');
+
+            expect(wrapper.find('.RateFieldView__rate-item_is-full')).toHaveLength(0);
+        });
+    });
+});

package/src/ui/form/RateField/RateField.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import {useCallback, useMemo} from 'react';
+import {useMount} from 'react-use';
+import fieldWrapper, {
+    IFieldWrapperInputProps,
+    IFieldWrapperOutputProps,
+} from '../Field/fieldWrapper';
+import {useComponents} from '../../../hooks';
+
+/**
+ * RateField
+ * Поле для проставления рейтинга
+ */
+export interface IRateFieldItem {
+    id: number,
+    value: number,
+}
+
+export interface IRateFieldProps extends IFieldWrapperInputProps {
+    /**
+     * Максимальное количество звезд
+     * @example 5
+     */
+    itemsCount?: number,
+
+    /**
+     * Количество звезд по умолчанию
+     * @example 4
+     */
+    defaultValue?: number,
+
+    /**
+     * Возможность полностью сбрасывать рейтинг, при повторном нажатии на звезду
+     * @example false
+     */
+    allowClear?: boolean,
+
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: CustomView,
+
+    /**
+     * Дополнительный CSS-класс для элемента отображения
+     */
+    className?: CssClassName,
+
+    inputProps?: {
+        [key: string]: any,
+    },
+}
+
+export interface IRateFieldViewProps extends IRateFieldProps, IFieldWrapperOutputProps {
+    items: IRateFieldItem[],
+    selectedIds: (PrimaryKey | any)[],
+    onItemSelect: (id: number) => void,
+
+    value: number,
+    onItemClick: (item: IRateFieldItem) => void,
+}
+
+function RateField(props: IRateFieldProps): JSX.Element {
+    const components = useComponents();
+
+    const items = useMemo(() => [...Array(props.itemsCount || 5)]
+        .map((item, index) => ({
+            id: index,
+            value: index + 1,
+        })),
+    [props.itemsCount]);
+
+    useMount(() => props.input.onChange(props.defaultValue || 0));
+
+    const onItemClick = useCallback((item) => {
+        let value = item.value;
+        if (props.allowClear && props.input.value === item.value) {
+            value = 0;
+        }
+        props.input.onChange(value);
+    }, [props.allowClear, props.input]);
+
+    const inputProps = useMemo(() => ({
+        name: props.input.name,
+        value: props.input.value,
+        disabled: props.disabled,
+        ...props.inputProps,
+    }), [props.disabled, props.input, props.inputProps]);
+
+    return components.ui.renderView(props.view || 'form.RateFieldView', {
+        ...props,
+        inputProps,
+        onItemClick,
+        items,
+    });
+}
+
+RateField.defaultProps = {
+    allowClear: false,
+    itemsCount: 5,
+    disabled: false,
+};
+
+export default fieldWrapper<IRateFieldProps>('RateField', RateField);

package/src/ui/form/RateField/demo/allow-clear.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import RateField from '../RateField';
+
+/**
+ * При двойном нажатии значение обнуляется.
+ * @order 5
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <RateField allowClear />
+    </>
+);

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import RateField from '../RateField';
+
+/**
+ * Обычный пример использования RateField.
+ * @order 1
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <RateField />
+    </>
+);

package/src/ui/form/RateField/demo/default-value.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import RateField from '../RateField';
+
+/**
+ * По-умолчанию выставленное значение
+ * @order 6
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <RateField defaultValue={3} />
+    </>
+);

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import RateField from '../RateField';
+
+/**
+ * Выключенный или недоступный для использования.
+ * @order 2
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <RateField disabled />
+    </>
+);

package/src/ui/form/RateField/demo/errors.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import RateField from '../RateField';
+
+/**
+ * Обработка ошибок.
+ * @order 4
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <RateField errors={['Error 1 text', 'Error 2 text']} layout />
+    </>
+);

package/src/ui/form/RateField/demo/items-count.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import RateField from '../RateField';
+
+/**
+ * Максимальное выставляемое значение RateField
+ * @order 7
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <RateField itemsCount={3} />
+    </>
+);

package/src/ui/form/RateField/demo/required.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import RateField from '../RateField';
+
+/**
+ * Как обязательное поле для заполнения.
+ * @order 3
+ * @col 6
+ */
+export default () => (
+    <>
+        <RateField required />
+    </>
+);

package/src/ui/form/RateField/index.tsx

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

package/src/ui/form/ReCaptchaField/ReCaptchaField.tsx

@@ -0,0 +1,35 @@
+import { useComponents } from '../../../hooks';
+import fieldWrapper, {IFieldWrapperInputProps, IFieldWrapperOutputProps} from '../Field/fieldWrapper';
+
+/**
+ * ReCaptchaField
+ * Компонент для использования ReCAPTCHA v3 от Google: https://developers.google.com/recaptcha/docs/v3.
+ * Чтобы добавить ReCAPTCHA в форму необходимо:
+ * 1) Передать siteKey в ResourceComponent.
+ * 2) Поместить на сайт скрипт от Google с помощью метода экземпляра ResourceComponent
+ * (скрипт анализирует поведение пользователя).
+ * 3) Разместить ReCaptchaField внутри компонента Form. На событие формы onSubmit отправится запрос в Google для
+ * получения токена. Далее этот токен с остальными данными формы отправится на бэкенд.
+ * Сам компонент отображает ссылки на политику конфиденциальности и условия использования сервисов Google.
+ */
+export interface IReCaptchaFieldProps extends IFieldWrapperInputProps {
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: CustomView;
+
+    [key: string]: any;
+}
+
+export interface IReCaptchaFieldViewProps extends IReCaptchaFieldProps, IFieldWrapperOutputProps {}
+
+function ReCaptchaField(props: IReCaptchaFieldProps & IFieldWrapperOutputProps): JSX.Element {
+    const components = useComponents();
+
+    return components.ui.renderView(props.view || 'form.ReCaptchaFieldView', {
+        ...props,
+    });
+}
+
+export default fieldWrapper<IReCaptchaFieldProps>('ReCaptchaField', ReCaptchaField);

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import InputField from '../../InputField';
+import Form from '../../Form';
+import Button from '../../Button';
+import ReCaptchaField from '../ReCaptchaField';
+
+/**
+ * Обычный пример использования ReCaptchaField в Form.
+ * @order 1
+ * @col 4
+ */
+
+export default () => (
+    <>
+        <Form
+            formId='CaptchaForm'
+            layout={false}
+        >
+            <InputField label='Label' attribute='text' required />
+            <ReCaptchaField attribute='token' />
+            <Button type='submit' label='Submit' />
+        </Form>
+    </>
+);

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

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

package/src/ui/form/SliderField/SliderField.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import _toInteger from 'lodash-es/toInteger';
+import {useMemo} from 'react';
+import {useComponents} from '../../../hooks';
+import fieldWrapper, {IFieldWrapperInputProps, IFieldWrapperOutputProps} from '../Field/fieldWrapper';
+
+/**
+ * SliderField
+ * Компонент с ползунком для выбора числового значения в пределах указанного промежутка
+ */
+export interface ISliderFieldProps extends IFieldWrapperInputProps {
+    /**
+     * Свойства для компонента слайдера
+     */
+    sliderProps?: any;
+
+    /**
+     * Дополнительный CSS-класс для элемента отображения
+     */
+    className?: CssClassName;
+
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: CustomView;
+
+    /**
+     * Минимальное значение в слайдере
+     * @example 0
+     */
+    min?: number;
+
+    /**
+     * Максимальное значение в слайдере
+     * @example 100
+     */
+    max?: number;
+
+    /**
+     * Делает слайдер с двумя значениями
+     * @example true
+     */
+    isRange?: boolean,
+
+    /**
+     * Длина шага слайдера
+     * @example 10
+     */
+    step?: null | number;
+
+    /**
+     * Значение по-умолчанию при первом рендере. Для isRange=false исполуется number, для isRange=true - number[]
+     * @example 1
+     */
+    defaultValue?: number | number[],
+
+    /**
+     * Любое строкове значение после значения состояния слайдера в всплывающем окошке.
+     * @example '%'
+     */
+    valuePostfix?: string,
+
+    /**
+     * Метки на ползунке. В объекте ({key: value}) key определяет положение, а value определяет, что будет отображаться.
+     * Если вы хотите задать стиль определенной точки метки, значением должен быть объект,
+     * содержащий свойства style и label.
+     * @example { min: 20, 40: 40, max: 100 }
+     */
+    marks?: Record<string, {string: { style, label }} | React.ReactNode | string>,
+
+    /**
+     * Функция, вызываемая после отпускания tip'а у слайдера (при событии onmouseup)
+     * @see https://github.com/schrodinger/rc-slider
+     * @example {() => console.log('Slider handler is released')}
+     */
+    onAfterChange?: (value: any) => void,
+
+    [key: string]: any;
+}
+
+export interface ISliderFieldViewProps extends ISliderFieldProps, IFieldWrapperOutputProps {
+    sliderDefaultValue?: number,
+    rangeDefaultValue?: number[],
+}
+
+const normalizeValue = value => _toInteger(String(value).replace(/[0-9]g/, '')) || 0;
+
+function SliderField(props: ISliderFieldProps & IFieldWrapperOutputProps): JSX.Element {
+    const components = useComponents();
+
+    const sliderProps = useMemo(() => ({
+        min: props.min,
+        max: props.max,
+        step: props.step,
+        marks: props.marks,
+        isRange: props.isRange,
+        disabled: props.disabled,
+        isVertical: props.isVertical,
+        value: props.input.value || 0,
+        valuePostfix: props.valuePostfix,
+        defaultValue: props.defaultValue,
+        tooltipIsVisible: props.tooltipIsVisible,
+        onChange: range => props.input.onChange.call(null, range),
+        onAfterChange: value => {
+            value = normalizeValue(value);
+            props.input.onChange.call(null, value);
+        },
+    }), [props.min, props.max, props.step, props.marks, props.isRange, props.disabled, props.isVertical, props.input.value, props.input.onChange, props.valuePostfix, props.defaultValue, props.tooltipIsVisible]);
+
+    return components.ui.renderView('form.SliderFieldView', {
+        ...props,
+        sliderProps,
+    });
+}
+
+SliderField.defaultProps = {
+    step: 1,
+    min: 0,
+    max: 100,
+    errors: null,
+    className: '',
+    valuePostfix: '',
+    sliderDefaultValue: 5,
+    rangeDefaultValue: [0, 10],
+};
+
+export default fieldWrapper<ISliderFieldProps>('SliderField', SliderField);

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import SliderField from '../SliderField';
+
+/**
+ * Обычный пример использования SliderField.
+ * @order 1
+ * @col 4
+ */
+
+export default () => (
+    <div style={{padding: '20px 30px'}}>
+        <SliderField label='Basic' />
+    </div>
+);

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import SliderField from '../SliderField';
+
+/**
+ * Выключенный или недоступный для использования.
+ * @order 2
+ * @col 4
+ */
+
+export default () => (
+    <div style={{padding: '20px 30px'}}>
+        <SliderField label='Disabled' disabled />
+    </div>
+);

package/src/ui/form/SliderField/demo/errors.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import SliderField from '../SliderField';
+
+/**
+ * Обработка ошибок c лейблом.
+ * @order 5
+ * @col 4
+ */
+
+export default () => (
+    <div style={{padding: '20px 30px 10px'}}>
+        <SliderField label='Errors' errors={['Error 1 text', 'Error 2 text']} layout />
+    </div>
+);

package/src/ui/form/SliderField/demo/marks.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import SliderField from '../SliderField';
+
+/**
+ * Обычный пример задания отметок со описанием по всей длине слайдера.
+ * @order 7
+ * @col 4
+ */
+
+const marks = {
+    0: <strong>0°C</strong>,
+    26: '26°C',
+    37: '37°C',
+    50: '50°C',
+    80: {
+        style: {
+            color: 'red',
+        },
+        label: <strong>80°C</strong>,
+    },
+};
+
+export default () => (
+    <div style={{padding: '20px 30px'}}>
+        <SliderField
+            min={-10}
+            max={80}
+            // @ts-ignore
+            marks={marks}
+        />
+    </div>
+);

package/src/ui/form/SliderField/demo/min-max.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import SliderField from '../SliderField';
+
+/**
+ * Установлены рамки минамльного и максимального значения.
+ * @order 4
+ * @col 4
+ */
+
+export default () => (
+    <div style={{padding: '20px 30px'}}>
+        <SliderField label='With min and max values' min={10} max={30} />
+    </div>
+);

package/src/ui/form/SliderField/demo/onAfterChange.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import {Header} from '../../../layout';
+import SliderField from '../SliderField';
+
+/**
+ * Использования свойства onAfterChange для изминения значения счетчика после отпускания tip'а у слайдера.
+ * @order 9
+ * @col 6
+ */
+
+export default () => {
+    const [counter, setCounter] = React.useState('0');
+    return (
+        <div style={{padding: '20px 30px'}}>
+            <SliderField
+                onAfterChange={value => setCounter(value)}
+            />
+            <div>
+                <Header>
+                    {__('Значение слайдера: {counter}', {counter})}
+                </Header>
+            </div>
+        </div>
+    );
+};

package/src/ui/form/SliderField/demo/onChange.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import {Header} from '../../../layout';
+import SliderField from '../SliderField';
+
+/**
+ * Использования свойства onChange для изминения значения счетчика.
+ * @order 8
+ * @col 6
+ */
+
+export default () => {
+    const [counter, setCounter] = React.useState('0');
+    return (
+        <div style={{padding: '20px 30px'}}>
+            <SliderField
+                onChange={value => setCounter(value)}
+            />
+            <div>
+                <Header>
+                    {__('Значение меняется при изменения значения слайдера в реальном времени: {counter}', {counter})}
+                </Header>
+            </div>
+        </div>
+    );
+};

package/src/ui/form/SliderField/demo/range.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import SliderField from '../SliderField';
+
+/**
+ * Обычный пример использования с заданным свойством isRange={true}, для задания промежутка значений.
+ * @order 7
+ * @col 4
+ */
+
+export default () => (
+    <div style={{padding: '20px 30px'}}>
+        <SliderField isRange />
+    </div>
+);

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

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