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

package/src/ui/form/InputField/InputField.tsx

@@ -1,181 +0,0 @@
-import * as React from 'react';
-import InputMask from 'react-input-mask';
-import {ChangeEventHandler, ReactNode, useMemo} from 'react';
-import fieldWrapper, {IFieldWrapperInputProps, IFieldWrapperOutputProps} from '../Field/fieldWrapper';
-import {useComponents} from '../../../hooks';
-
-type IElementInputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden'
-    | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel'
-    | 'text' | 'time' | 'url' | 'week' | string;
-
-/**
- * InputField
- * Поле ввода текста
- */
-export interface IInputFieldProps extends IFieldWrapperInputProps {
-    /**
-     * HTML Тип
-     * @example email
-     */
-    type?: IElementInputType;
-
-    /**
-     * Placeholder подсказка
-     * @example Your text...
-     */
-    placeholder?: string;
-
-    /**
-     * Свойства для элемента \<input /\>
-     * @example {onKeyDown: ...}
-     */
-    inputProps?: any;
-
-    /**
-     * Дополнительный CSS-класс для элемента отображения
-     */
-    className?: CssClassName;
-
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: any;
-
-    /**
-     */
-    viewProps?: any;
-
-    /**
-     * Размер Innput
-     * @example 'large'
-     */
-    size?: Size;
-
-    /**
-     * Объект CSS стилей
-     * @example {width: '45%'}
-     */
-    style?: any;
-
-    /**
-     * Изображение или React-нода, которая будет отрендерена слева от поля.
-     * @example require('icon.png') | <component/>
-     */
-    textBefore?: number | ReactNode | string;
-
-    /**
-     * Изображение или React-нода, которая будет отрендерена справа от поля.
-     * @example require('icon.png') | <component/>
-     */
-    textAfter?: number | ReactNode | string;
-
-    /**
-     * Текст или React-нода, которая будет отрендерена слева от поля.
-     * @example 'http://'
-     */
-    addonBefore?: ReactNode | string;
-
-    /**
-     * Текст или React-нода, которая будет отрендерена справа от поля.
-     * @example '.com'
-     */
-    addonAfter?: ReactNode | string;
-
-    /**
-     * Конфигурация маски
-     * @example { mask: '+7 (999) 999-99-99' }
-     */
-    maskProps?: any;
-
-    success?: boolean;
-    failed?: boolean;
-
-    [key: string]: any;
-}
-
-export interface IInputFieldViewProps extends IInputFieldProps, IFieldWrapperOutputProps {
-    style?: any,
-    errors?: string[],
-    placeholder?: string,
-    type?: string,
-    inputProps: {
-        type: string,
-        name: string,
-        onChange: ChangeEventHandler<Element>,
-        value: string | number,
-        placeholder: string,
-        disabled: string,
-    },
-
-    textBefore?: number | ReactNode | string,
-    textAfter?: number | ReactNode | string,
-    addonBefore?: ReactNode | string,
-    addonAfter?: ReactNode | string,
-
-    //types for react-input-mask
-    maskProps?: any;
-    onFocus?: (e: Event | React.FocusEvent) => void,
-    onBlur?: (e: Event | React.FocusEvent) => void,
-    onMouseDown?: (e: Event | React.MouseEvent) => void;
-}
-
-function InputField(props: IInputFieldProps & IFieldWrapperOutputProps): JSX.Element {
-    const components = useComponents();
-
-    const inputProps = useMemo(() => ({
-        type: props.type,
-        name: props.input.name,
-        value: props.input.value ?? '',
-        onChange: value => props.input.onChange(value),
-        placeholder: props.placeholder,
-        disabled: props.disabled,
-        ...props.inputProps,
-    }), [props.disabled, props.input, props.inputProps, props.placeholder, props.type]);
-
-    // No render for hidden input
-    if (props.type === 'hidden') {
-        return null;
-    }
-
-    // react-input-mask HOC for mask
-    if (props.maskProps) {
-        const maskOnChange = e => props.input.onChange(e.target.value);
-        return (
-            <InputMask
-                {...inputProps}
-                {...props.maskProps}
-                onChange={maskOnChange}
-            >
-                {components.ui.renderView(props.view || 'form.InputFieldView', {
-                    ...props,
-                    ...props.viewProps,
-                    inputProps,
-                    onChange: maskOnChange,
-                })}
-            </InputMask>
-        );
-    }
-
-    return components.ui.renderView(props.view || 'form.InputFieldView', {
-        ...props,
-        ...props.viewProps,
-        inputProps,
-    });
-}
-
-InputField.defaultProps = {
-    type: 'text',
-    size: 'medium',
-    disabled: false,
-    required: false,
-    className: '',
-    placeholder: '',
-    errors: null,
-    textBefore: null,
-    textAfter: null,
-    addonBefore: null,
-    addonAfter: null,
-};
-
-export default fieldWrapper<IInputFieldProps>('InputField', InputField);

package/src/ui/form/InputField/demo/addons.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react';
-
-import InputField from '../InputField';
-
-/**
- * С дополнительным текстом с рамками слева и справа от поля ввода.
- * @order 7
- * @col 3
- */
-
-export default () => (
-    <>
-        <InputField addonBefore='http://' addonAfter='.com' label='AddonBefore and AddonAfter' />
-    </>
-);

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

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

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

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

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

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

package/src/ui/form/InputField/demo/mask.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-
-import InputField from '../InputField';
-
-/**
- * С использованием маски для ввода номера телефона
- * @order 6
- * @col 3
- */
-
-export default () => (
-    <>
-        <InputField
-            label="Mask"
-            maskProps={{
-                mask: '+7 (999) 999-99-99',
-            }}
-        />
-    </>
-);

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

@@ -1,15 +0,0 @@
-import * as React from 'react';
-
-import InputField from '../InputField';
-
-/**
- * Сообщение пользователю для заполнения по контексту использования.
- * @order 4
- * @col 3
- */
-
-export default () => (
-    <>
-        <InputField label='Placeholder' placeholder='Your text...' />
-    </>
-);

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

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

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

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import InputField from '../InputField';
-
-/**
- * По-умлочанию InputField имеет 3 заданных размера поля.
- * @order 9
- * @col 12
- */
-
-const sizes = {
-    sm: 'Small',
-    md: 'Middle',
-    lg: 'Large',
-};
-
-export default () => (
-    <div className='row'>
-        {Object.keys(sizes).map(size => (
-            <div className='col' key={size}>
-                <InputField label={size} size={size} />
-            </div>
-        ))}
-    </div>
-);

package/src/ui/form/InputField/demo/textAddons.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react';
-
-import InputField from '../InputField';
-
-/**
- * С дополнительным текстом слева и справа от поля ввода.
- * @order 8
- * @col 3
- */
-
-export default () => (
-    <>
-        <InputField textBefore='http://' textAfter='.com' label='TextBefore and TextAfter' />
-    </>
-);

package/src/ui/form/InputField/demo/types.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-
-import InputField from '../InputField';
-
-/**
- * InputField может задавать требуемое содержание по типу.
- * @order 9
- * @col 12
- */
-
-const types = {
-    text: 'Text',
-    email: 'Email',
-    phone: 'Phone',
-    password: 'Password',
-};
-
-export default () => (
-    <div className='row'>
-        {Object.keys(types).map(type => (
-            <div className='col' key={type}>
-                <p>{type}</p>
-                <InputField label={type} type={type} />
-            </div>
-        ))}
-    </div>
-);

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

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

package/src/ui/form/NavField/NavField.tsx

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import Nav, {INavProps, INavItem} from '../../nav/Nav/Nav';
-import fieldWrapper, {
-    IFieldWrapperInputProps,
-    IFieldWrapperOutputProps,
-} from '../../form/Field/fieldWrapper';
-import {useDataProvider} from '../../../hooks';
-
-import {IDataProviderConfig} from '../../../hooks/useDataProvider';
-
-/**
- * NavField
- * Навигация как часть формы
- */
-export interface INavFieldProps extends IFieldWrapperInputProps, IFieldWrapperOutputProps, IDataProviderConfig {
-    /**
-     * Свойства для компонента Nav
-     */
-    navProps?: INavProps,
-
-    [key: string]: any,
-}
-
-function NavField(props: INavFieldProps): JSX.Element {
-    const {items} = useDataProvider({
-        items: props.items,
-    });
-
-    return (
-        <Nav
-            {...props.navProps}
-            layout={props.navProps.layout}
-            items={items as INavItem[]}
-            activeTab={props.input.value}
-            onChange={props.onChange}
-            disabled={props.disabled}
-        />
-    );
-}
-
-NavField.defaultProps = {
-    navProps: {
-        layout: 'button',
-    },
-};
-
-export default fieldWrapper<INavFieldProps>('NavField', NavField);

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

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import NavField from '../NavField';
-
-/**
- * Обычный пример использования
- * @order 1
- * @col 3
- */
-
-export const items = [
-    {
-        id: 1,
-        label: 'First',
-    },
-    {
-        id: 2,
-        label: 'Second',
-    },
-    {
-        id: 3,
-        label: 'Third',
-    },
-    {
-        id: 4,
-        label: 'Fourth',
-    },
-];
-
-export default () => (
-    <div style={{display: 'flex'}}>
-        <NavField
-            items={items}
-            label='Basic'
-        />
-    </div>
-);

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

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import NavField from '../NavField';
-import {items} from './basic';
-
-/**
- * Выключенный.
- * @order 2
- * @col 3
- */
-
-export default () => (
-    <>
-        <NavField
-            items={items}
-            label='Disabled'
-            disabled
-        />
-    </>
-);

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

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

package/src/ui/form/NavField/demo/layouts.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import NavField from '../NavField';
-
-/**
- * Демонстрация всех видов использования свойства layout
- * @order 5
- * @col 12
- */
-
-export const items = [
-    {
-        id: 1,
-        label: 'First',
-    },
-    {
-        id: 2,
-        label: 'Second',
-    },
-    {
-        id: 3,
-        label: 'Third',
-    },
-    {
-        id: 4,
-        label: 'Fourth',
-    },
-];
-
-export default () => (
-    <div style={{display: 'flex', gridGap: '10px', alignItems: 'center'}}>
-        <NavField navProps={{layout: 'button'}} items={items} />
-        <NavField navProps={{layout: 'list'}} items={items} />
-        <NavField navProps={{layout: 'link'}} items={items} />
-        <NavField navProps={{layout: 'tabs'}} items={items} />
-        <NavField navProps={{layout: 'navbar'}} items={items} />
-        <NavField navProps={{layout: 'icon'}} items={items} />
-    </div>
-);

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

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import NavField from '../NavField';
-import {items} from './basic';
-
-/**
- * Обязательный для заполнения.
- * @order 3
- * @col 3
- */
-
-export default () => (
-    <>
-        <NavField
-            items={items}
-            label='Required'
-            required
-        />
-    </>
-);

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

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

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

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

package/src/ui/form/NumberField/NumberField.tsx

@@ -1,77 +0,0 @@
-import * as React from 'react';
-import { useMemo } from 'react';
-import {IInputFieldProps} from '../InputField/InputField';
-import { useComponents } from '../../../hooks';
-import fieldWrapper, {IFieldWrapperInputProps, IFieldWrapperOutputProps} from '../Field/fieldWrapper';
-
-/**
- * NumberField
- * Числовое поле ввода
- */
-export interface INumberFieldProps extends IInputFieldProps, IFieldWrapperInputProps {
-    /**
-     * Минимальное значение
-     * @example 1
-     */
-    min?: number;
-
-    /**
-     * Максимальное значение
-     * @example 100
-     */
-    max?: number;
-
-    /**
-     * Шаг увеличения/уменьшения значения
-     * @example 5
-     */
-    step?: string | number;
-
-    [key: string]: any;
-}
-
-export interface INumberFieldViewProps extends INumberFieldProps, IFieldWrapperOutputProps {
-    inputProps: {
-        type: string,
-        name: string,
-        onChange: (value: Event | React.ChangeEvent) => void,
-        value: number,
-        placeholder: string,
-        disabled: boolean,
-        min: string | number,
-        max: string | number,
-        step: string | number,
-    },
-}
-
-function NumberField(props: INumberFieldProps & IFieldWrapperOutputProps): JSX.Element {
-    const components = useComponents();
-
-    props.inputProps = useMemo(() => ({
-        name: props.input.name,
-        value: props.input.value ?? '',
-        onChange: value => props.input.onChange(value),
-        type: 'number',
-        min: props.min,
-        max: props.max,
-        step: props.step,
-        placeholder: props.placeholder,
-        disabled: props.disabled,
-        ...props.inputProps,
-    }), [props.disabled, props.input, props.inputProps, props.placeholder, props.min, props.max, props.step]);
-
-    return components.ui.renderView(props.view || 'form.NumberFieldView', props);
-}
-
-NumberField.defaultProps = {
-    disabled: false,
-    required: false,
-    className: '',
-    placeholder: '',
-    min: null,
-    max: null,
-    step: null,
-    errors: null,
-};
-
-export default fieldWrapper<INumberFieldProps>('NumberField', NumberField);

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

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

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

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