@steroidsjs/core 2.3.0-beta.1 → 2.3.0-beta.3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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