@steroidsjs/core 2.0.0-rc.6 → 2.0.1-beta.112

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

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import TextField from '../TextField';
-
-export default () => (
-    <>
-        <TextField label='Disabled' disabled/>
-    </>
-);

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

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import TextField from '../TextField';
-
-export default () => (
-    <>
-        <TextField label='Errors' errors={['Error 1 text', 'Error 2 text']}/>
-    </>
-);

package/src/ui/form/TextField/demo/placeholder.tsx

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import TextField from '../TextField';
-
-export default () => (
-    <>
-        <TextField label='Placeholder' placeholder='Your password...'/>
-    </>
-);

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

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import TextField from '../TextField';
-
-export default () => (
-    <>
-        <TextField label='Required' required/>
-    </>
-);

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

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import TextField from '../TextField';
-
-const sizes = {
-    sm: 'Small',
-    md: 'Middle',
-    lg: 'Large',
-};
-
-export default () => (
-    <>
-        {Object.keys(sizes).map(size => (
-            <div className='col' key={size}>
-                <TextField label={size} size={size}/>
-            </div>
-        ))}
-    </>
-);

package/src/ui/form/TextField/demo/submit.tsx

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import TextField from '../TextField';
-
-export default () => (
-    <>
-        <TextField label='Submit On Enter' submitOnEnter/>
-    </>
-);

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

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

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

@@ -1,15 +0,0 @@
-import disabled from './demo/disabled';
-import errors from './demo/errors';
-import placeholder from './demo/placeholder';
-import sizes from './demo/sizes';
-
-export default {
-    title: 'form.TimeField',
-};
-
-export {
-    disabled,
-    errors,
-    placeholder,
-    sizes,
-};

package/src/ui/form/TimeField/TimeField.tsx

@@ -1,204 +0,0 @@
-import * as React from 'react';
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {useClickAway} from 'react-use';
-import moment from 'moment';
-import {useComponents} from '../../../hooks';
-import fieldWrapper, {IFieldWrapperInputProps, IFieldWrapperOutputProps} from '../Field/fieldWrapper';
-
-/**
- * TimeField
- * Поле для выбора времени
- */
-export interface ITimeFieldProps extends IFieldWrapperInputProps {
-
-    /**
-     * Включить возможность сброса значения
-     * @example 'true'
-     */
-    showRemove?: boolean,
-
-    /**
-     * Отключить border вокруг элемента
-     * @example 'true'
-     */
-    noBorder?: boolean,
-
-    /**
-     * Placeholder подсказка
-     * @example Your text...
-     */
-    placeholder?: string;
-
-    /**
-     * Свойства для элемента \<input /\>
-     * @example {onKeyDown: ...}
-     */
-    inputProps?: any;
-
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: any;
-
-    /**
-     * Дополнительный CSS-класс для элемента отображения
-     */
-    className?: CssClassName;
-
-    /**
-     * Объект CSS стилей
-     * @example {width: '45%'}
-     */
-    style?: any;
-
-    [key: string]: any;
-}
-
-export interface ITimeFieldViewProps extends ITimeFieldProps, IFieldWrapperOutputProps {
-    forwardedRef: any,
-    style?: any,
-    isInvalid?: boolean,
-    placeholder?: string,
-    type: any,
-    inputProps: {
-        type: string,
-        name: string,
-        onChange: (value: string) => void,
-        value: string | number,
-        placeholder: string,
-        disabled: string,
-    },
-    showDropDown: boolean,
-    openDropDown: () => void,
-    onBlur: () => void,
-    clearInput: () => void,
-    setNow: () => void,
-    errors?: any,
-}
-
-function TimeField(props: ITimeFieldProps & IFieldWrapperOutputProps) {
-    const components = useComponents();
-
-    const [hours, setHours] = useState<string>(null);
-    const [minutes, setMinutes] = useState<string>(null);
-    const [innerInput, setInnerInput] = useState<string>(null);
-    const [showDropDown, setShowDropDown] = useState<boolean>(false);
-
-    const calculatedValue = useCallback((newTime, part = '') => {
-        let inputValue = props.input.value ? props.input.value.split(':') : '';
-        if (part === 'HOUR') {
-            inputValue = `${newTime}:${inputValue[1] || '00'}`;
-        } else if (part === 'MIN') {
-            inputValue = `${inputValue[0] || '00'}:${newTime}`;
-        }
-        setInnerInput(inputValue);
-        return inputValue;
-    }, [props.input.value]);
-
-    const changeHours = useCallback((newHour) => {
-        if (newHour !== hours) {
-            setHours(newHour);
-            props.input.onChange.call(null, calculatedValue(newHour, 'HOUR'));
-        }
-    }, [calculatedValue, hours, props.input.onChange]);
-
-    const changeMinutes = useCallback((newMinute) => {
-        if (newMinute !== minutes) {
-            setMinutes(newMinute);
-            props.input.onChange.call(null, calculatedValue(newMinute, 'MIN'));
-        }
-    }, [calculatedValue, minutes, props.input.onChange]);
-
-    const onChange = useCallback((value) => {
-        setInnerInput(value);
-        const matchedValue = value.match(/(\d{2}):(\d{2})/);
-        if (matchedValue?.length > 0) {
-            const newHours = matchedValue[1];
-            const newMinutes = matchedValue[2];
-            const isHourChanged = newHours !== hours && newHours <= 23;
-            const isMinutesChanged = newMinutes !== minutes && newMinutes <= 59;
-            if (isHourChanged && isMinutesChanged) {
-                setHours(newHours);
-                setMinutes(newMinutes);
-                props.input.onChange.call(null, value);
-            } else {
-                if (isHourChanged) {
-                    changeHours(newHours);
-                }
-                if (isMinutesChanged) {
-                    changeMinutes(newMinutes);
-                }
-            }
-        }
-    }, [changeHours, changeMinutes, hours, minutes, props.input.onChange]);
-
-    const setNow = useCallback(() => {
-        const timeNow = moment().format('hh:mm');
-        onChange.call(null, timeNow);
-    }, [onChange]);
-
-    const clearInput = useCallback(() => {
-        setInnerInput(null);
-        setHours(null);
-        setMinutes(null);
-        setShowDropDown(false);
-        props.input.onChange.call(null, null);
-    }, [props.input.onChange]);
-
-    const onBlur = useCallback(() => {
-        if (props.input.value !== innerInput) {
-            setInnerInput(props.input.value);
-        }
-    }, [innerInput, props.input.value]);
-
-    const openDropDown = useCallback(() => {
-        if (!showDropDown) {
-            setShowDropDown(true);
-        }
-    }, [showDropDown]);
-
-    const closeDropDown = useCallback(() => {
-        if (showDropDown) {
-            setShowDropDown(false);
-        }
-    }, [showDropDown]);
-
-    // Outside click -> close
-    const forwardedRef = useRef(null);
-    useClickAway(forwardedRef, closeDropDown);
-
-    const inputProps = useMemo(() => ({
-        type: props.type,
-        name: props.input.name,
-        placeholder: props.placeholder,
-        disabled: props.disabled,
-        ...props.inputProps,
-        value: innerInput || '',
-        onChange,
-    }), [innerInput, onChange, props.disabled, props.input.name, props.inputProps, props.placeholder, props.type]);
-
-    return components.ui.renderView(props.view || 'form.TimeFieldView', {
-        ...props,
-        forwardedRef,
-        inputProps,
-        changeHours,
-        changeMinutes,
-        showDropDown,
-        openDropDown,
-        onBlur,
-        clearInput,
-        setNow,
-    });
-}
-
-TimeField.defaultProps = {
-    disabled: false,
-    required: false,
-    noBorder: false,
-    showRemove: true,
-    placeholder: 'Select time',
-    type: 'text',
-};
-
-export default fieldWrapper('TimeField', TimeField);

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

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import TimeField from '../TimeField';
-
-export default () => (
-    <>
-        <TimeField label='Basic' />
-    </>
-);

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

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import TimeField from '../TimeField';
-
-export default () => (
-    <>
-        <TimeField label='Disabled' disabled />
-    </>
-);

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

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import TimeField from '../TimeField';
-
-export default () => (
-    <>
-        <TimeField label='Errors' errors={['Error 1 text', 'Error 2 text']} />
-    </>
-);

package/src/ui/form/TimeField/demo/placeholder.tsx

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import TimeField from '../TimeField';
-
-export default () => (
-    <>
-        <TimeField
-            label='Placeholder'
-            placeholder='Placeholder...'
-        />
-    </>
-);

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

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import TimeField from '../TimeField';
-
-export default () => (
-    <>
-        <TimeField
-            label='Required'
-            required
-        />
-    </>
-);

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

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import TimeField from "../TimeField";
-
-const sizes = {
-    sm: 'Small',
-    md: 'Middle',
-    lg: 'Large',
-};
-
-export default () => (
-    <>
-        {Object.keys(sizes).map(size => (
-            <div className='col' key={size}>
-                <TimeField label={size} size={size}/>
-            </div>
-        ))}
-    </>
-);

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

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

package/src/ui/form/index.ts

@@ -1,84 +0,0 @@
-//import AutoCompleteField from './AutoCompleteField';
-import BlankField from './BlankField';
-import Button from './Button';
-import CheckboxField from './CheckboxField';
-//import CheckboxListField from './CheckboxListField';
-//import DateField from './DateField';
-//import DateTimeField from './DateTimeField';
-import DropDownField from './DropDownField';
-import Field from './Field';
-import FieldLayout from './FieldLayout';
-//import FieldList from './FieldList';
-import FieldSet from './FieldSet';
-//import FileField from './FileField';
-import Form from './Form';
-//import HtmlField from './HtmlField';
-import InputField from './InputField';
-//import NavField from './NavField';
-import NumberField from './NumberField';
-import PasswordField from './PasswordField';
-//import RadioListField from './RadioListField';
-//import RangeField from './RangeField';
-import ReCaptchaField from './ReCaptchaField';
-import SliderField from './SliderField';
-//import SwitcherField from './SwitcherField';
-import TextField from './TextField';
-import TimeField from './TimeField';
-
-export {
-    //AutoCompleteField,
-    //BlankField,
-    Button,
-    CheckboxField,
-    //CheckboxListField,
-    //DateField,
-    //DateTimeField,
-    DropDownField,
-    Field,
-    FieldLayout,
-    //FieldList,
-    FieldSet,
-    //FileField,
-    Form,
-    //HtmlField,
-    InputField,
-    //NavField,
-    NumberField,
-    PasswordField,
-    //RadioListField,
-    //RangeField,
-    ReCaptchaField,
-    SliderField,
-    //SwitcherField,
-    TextField,
-    TimeField,
-};
-
-export default {
-    //AutoCompleteField,
-    BlankField,
-    Button,
-    CheckboxField,
-    // CheckboxListField,
-    // DateField,
-    // DateTimeField,
-    DropDownField,
-    Field,
-    FieldLayout,
-    // FieldList,
-    FieldSet,
-    // FileField,
-    Form,
-    // HtmlField,
-    InputField,
-    // NavField,
-    NumberField,
-    PasswordField,
-    // RadioListField,
-    // RangeField,
-    ReCaptchaField,
-    SliderField,
-    // SwitcherField,
-    TextField,
-    TimeField,
-};

package/src/ui/form/validate.ts

@@ -1,90 +0,0 @@
-import _isString from 'lodash-es/isString';
-import _isInteger from 'lodash-es/isInteger';
-import _set from 'lodash-es/set';
-import _get from 'lodash-es/get';
-import _isEmpty from 'lodash-es/isEmpty';
-import _size from 'lodash-es/size';
-import _isFunction from 'lodash-es/isFunction';
-import moment from 'moment';
-import {SubmissionError} from 'redux-form';
-
-const validate = function (data, rules) {
-    const errors = {};
-    rules.forEach(item => {
-        const attributes = [].concat(item[0]);
-        const rule = item[1];
-        const params = item[2] || {};
-        attributes.forEach(attribute => {
-            let value = _get(data, attribute);
-            switch (rule) {
-                case 'required':
-                    if (!value) {
-                        errors[attribute] = __('Field is required');
-                    }
-                    break;
-                case 'date':
-                    if (value && !moment(value, 'YYYY-MM-DD').isValid()) {
-                        errors[attribute] = __('Date wrong format');
-                    }
-                    break;
-                case 'integer':
-                case 'number':
-                    if (value) {
-                        if (_isString(value)) {
-                            value = Number(value);
-                        }
-                        if (rule === 'integer' && !_isInteger(value)) {
-                            errors[attribute] = __('Field must be integer');
-                        } else if ((params.min || params.min === 0) && value < params.min) {
-                            errors[attribute] = __('Value is too small, min: {min}', {
-                                min: params.min
-                            });
-                        } else if ((params.max || params.max === 0) && value > params.max) {
-                            errors[attribute] = __('Value is too large, max: {max}', {
-                                max: params.max
-                            });
-                        }
-                    }
-                    break;
-                case 'string':
-                    params.max = params.max || 1000;
-                    if (value) {
-                        if (_isInteger(value)) {
-                            value = String(value);
-                        }
-                        if (!_isString(value)) {
-                            errors[attribute] = __('Field must be string');
-                        } else if (_size(value) > params.max) {
-                            errors[attribute] = __('String is too long, max: {max}', {
-                                max: params.max
-                            });
-                        } else if (
-                            (params.min || params.min === 0) &&
-                            _size(value) < params.min
-                        ) {
-                            errors[attribute] = __('String is too short, min: {min}', {
-                                min: params.min
-                            });
-                        }
-                    }
-                    break;
-            }
-            if (_isFunction(rule)) {
-                const error = rule(data, attribute);
-                if (error) {
-                    errors[attribute] = error;
-                }
-            }
-            _set(data, attribute, value);
-        });
-    });
-    if (!_isEmpty(errors)) {
-        throw new SubmissionError(errors);
-    }
-};
-validate.error = (attribute, message) => {
-    throw new SubmissionError({
-        [attribute]: message
-    });
-};
-export default validate;

package/src/ui/format/BooleanFormatter/BooleanFormatter.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import {useComponents} from '../../../hooks';
-
-export interface IBooleanFormatterProps {
-    value?: string | number | boolean;
-    view?: CustomView;
-
-    [key: string]: any;
-}
-
-export interface IBooleanFormatterPropsView {
-    value?: string | number | boolean;
-    children?: React.ReactNode,
-}
-
-export default function BooleanFormatter(props: IBooleanFormatterProps) {
-    return useComponents().ui.renderView(props.view || 'format.BooleanFormatterView', {
-        value: props.value,
-    });
-}

package/src/ui/format/BooleanFormatter/index.ts

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

package/src/ui/format/DateFormatter/DateFormatter.tsx

@@ -1,34 +0,0 @@
-import {useComponents} from '../../../hooks';
-
-export interface IDateFormatterProps {
-
-    /**
-     * Формат даты
-     * @example LL
-     */
-    format?: string;
-    view?: CustomView;
-
-    /**
-     * Дата
-     * @example 2023-09-11
-     */
-    value?: any;
-
-    [key: string]: any;
-}
-
-const defaultProps = {
-    format: 'LL',
-};
-
-export default function DateFormatter(props: IDateFormatterProps) {
-    const components = useComponents();
-
-    if (!props.value) {
-        return null;
-    }
-    return components.ui.renderView(props.view || 'format.DefaultFormatterView', {
-        value: components.locale.moment(props.value).format(props.format || defaultProps.format),
-    });
-}

package/src/ui/format/DateFormatter/demo/basic.tsx

@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-import DateFormatter from '../DateFormatter';
-
-export default () => (
-    <>
-        <DateFormatter
-            value='2018-05-04'
-        />
-    </>
-);

package/src/ui/format/DateFormatter/index.ts

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

package/src/ui/format/DateTimeFormatter/DateTimeFormatter.tsx

@@ -1,48 +0,0 @@
-import moment from 'moment';
-import {useComponents} from '../../../hooks';
-import {IDateFormatterProps} from '../DateFormatter/DateFormatter';
-
-export interface IDateTimeFormatterProps {
-    /**
-     * Формат даты
-     * @example LLL
-     */
-    format?: string;
-
-    /**
-     * Показывать ли дату учитываю временную зону
-     * @example true
-     */
-    timeZone?: string | boolean;
-    view?: CustomView;
-
-    /**
-     * Дата
-     * @example 2023-09-11
-     */
-    value?: any;
-
-    [key: string]: any;
-}
-
-function DateTimeFormatter(props: IDateFormatterProps) {
-    const components = useComponents();
-
-    if (!props.value) {
-        return null;
-    }
-
-    const date = props.timeZone === false
-        ? moment(props.value).locale(components.locale.language)
-        : components.locale.moment(props.value);
-
-    return components.ui.renderView(props.view || 'format.DefaultFormatterView', {
-        value: date.format(props.format),
-    });
-}
-
-DateTimeFormatter.defaultProps = {
-    format: 'LLL',
-};
-
-export default DateTimeFormatter;

package/src/ui/format/DateTimeFormatter/demo/basic.tsx

@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-import DateTimeFormatter from '../DateTimeFormatter';
-
-export default () => (
-    <>
-        <DateTimeFormatter
-            value='2018-05-04 16:15:00'
-        />
-    </>
-);