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

package/src/ui/form/Form/SyncAddressBarHelper.ts

@@ -1,85 +0,0 @@
-import {compile} from 'path-to-regexp';
-import * as queryString from 'qs';
-import _isArray from 'lodash-es/isArray';
-import _isObject from 'lodash-es/isObject';
-import _isBoolean from 'lodash-es/isBoolean';
-import _isEmpty from 'lodash-es/isEmpty';
-import _isFunction from 'lodash-es/isFunction';
-import {push} from 'connected-react-router';
-import {getRoute, getRouteParams} from '../../../reducers/router';
-
-export default class SyncAddressBarHelper {
-    static restore(
-        initialValues,
-        customizer = null,
-    ) {
-        let newValues = {
-            ...initialValues,
-            ...queryString.parse(window.location.hash),
-        };
-        if (customizer && _isFunction(customizer)) {
-            newValues = customizer(initialValues, queryString.parse(location.hash));
-        }
-        return newValues;
-    }
-
-    /**
-     * WARNING
-     * Method incorrectly saves nested objects (e.g. {foo: [{bar: 1}]}
-     *
-     * @param {object} store
-     * @param {object} values
-     * @param {boolean} useHash
-     */
-    static save(store, values, useHash = true) {
-        values = {...values};
-        Object.keys(values).map(key => {
-            const value = values[key];
-            if (_isObject(value) && !_isArray(value)) {
-                delete values[key];
-            } else if (_isArray(value)) {
-                values[key] = value.join(',');
-            } else if (_isBoolean(value)) {
-                if (!value) {
-                    delete values[key];
-                } else {
-                    values[key] = 1;
-                }
-            } else if (value === null) {
-                delete values[key];
-            }
-        });
-        const querySeparator = useHash ? '#' : '?';
-        const currentRoute = getRoute(store.getState() || {});
-        const params = getRouteParams(store.getState() || {});
-        if (_isEmpty(values)) {
-            if (currentRoute) {
-                store.dispatch(
-                    push(compile(currentRoute.path)(params)),
-                );
-            } else {
-                location.hash = null;
-            }
-        } else if (currentRoute) {
-            store.dispatch(
-                push(
-                    compile(currentRoute.path)(params)
-                    + querySeparator
-                    + queryString.stringify(values),
-                ),
-            );
-        } else {
-            location.hash = querySeparator + queryString.stringify(values);
-        }
-    }
-
-    static cleanValues(values = {}) {
-        const obj = {...values};
-        Object.keys(obj).forEach(key => {
-            if (!obj[key] || (_isArray(obj[key]) && !obj[key].length)) {
-                delete obj[key];
-            }
-        });
-        return obj;
-    }
-}

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

@@ -1,41 +0,0 @@
-import * as React from 'react';
-import Form from '../Form';
-import DateField from '../../DateField';
-import DateTimeField from '../../DateTimeField';
-import TextField from '../../TextField';
-import InputField from '../../InputField';
-
-export default () => (
-    <>
-        <Form
-            formId='TestForm'
-            useRedux
-            syncWithAddressBar
-            autoFocus
-            fields={[
-                {
-                    component: InputField,
-                    attribute: 'email',
-                    label: 'Email',
-                },
-                {
-                    component: TextField,
-                    attribute: 'message',
-                    label: 'Message',
-                },
-                {
-                    component: DateField,
-                    attribute: 'date',
-                    label: 'Date',
-                },
-                {
-                    component: DateTimeField,
-                    attribute: 'startTime',
-                    label: 'Start time',
-                },
-            ]}
-            submitLabel='Submit'
-            validators={[['Email', 'required']]}
-        />
-    </>
-);

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

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

package/src/ui/form/HtmlField/HtmlField.tsx

@@ -1,113 +0,0 @@
-import * as React from 'react';
-import {useCallback, useMemo} from 'react';
-import _merge from 'lodash-es/merge';
-import {useComponents} from '../../../hooks';
-import fieldWrapper, {
-    IFieldWrapperInputProps,
-    IFieldWrapperOutputProps,
-} from '../Field/fieldWrapper';
-
-/**
- * HtmlField
- * Компонент для создания HTML-разметки, использующий WYSIWYG-реадактор
- */
-export interface IHtmlFieldProps extends IFieldWrapperInputProps, IFieldWrapperOutputProps {
-
-    /**
-     * Конфигурация wysiwyg реадактора
-     */
-    editorProps?: any,
-
-    /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName,
-
-    /**
-     * Url на который будет отправлена форма загрузки файла
-     * @example /api/v1/upload-files
-     */
-    uploadUrl?: string,
-
-    /**
-     * После загрузки изображения на сервер,
-     * можно указать с каким процессором должно вернуться картинка
-     * @example origin
-     */
-    uploadImagesProcessor?: string,
-
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView,
-
-    /**
-     * Обработчик события при фокусе на редактора
-     * @param event
-     */
-    onFocus?: (event: any) => any,
-
-    /**
-     * Обработчик события при снятии фокуса с редактора
-     * @param event
-     */
-    onBlur?: (event: any) => any,
-
-    [key: string]: any,
-}
-
-export interface IHtmlFieldViewProps extends IHtmlFieldProps {
-    onChange: (event: any, editor: any) => void,
-}
-
-function HtmlField(props: IHtmlFieldProps) {
-    const components = useComponents();
-
-    const onFocus = useCallback((event) => {
-        if (props.onFocus) {
-            props.onFocus(event);
-        }
-    }, [props]);
-    const onBlur = useCallback((event) => {
-        if (props.onBlur) {
-            props.onBlur(event);
-        }
-    }, [props]);
-    const onChange = useCallback((event, editor) => {
-        props.input.onChange(editor.getData());
-    }, [props.input]);
-
-    const {uploadUrl, uploadImagesProcessor} = props;
-
-    const editorProps = useMemo(() => _merge(
-        {
-            image: {
-                upload: {
-                    types: ['jpeg', 'png', 'gif', 'jpg', 'svg'],
-                },
-            },
-            simpleUpload: {
-                uploadUrl: uploadUrl + (uploadImagesProcessor
-                    ? '?imagesProcessor=' + uploadImagesProcessor
-                    : ''),
-            },
-        },
-        props.editorProps,
-    ), [props.editorProps, uploadUrl, uploadImagesProcessor]);
-
-    return components.ui.renderView(props.view || 'form.HtmlFieldView', {
-        onFocus,
-        onBlur,
-        onChange,
-        ...props,
-        editorProps,
-    });
-}
-
-HtmlField.defaultProps = {
-    disabled: false,
-    className: '',
-};
-
-export default fieldWrapper('HtmlField', HtmlField);

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

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import HtmlField from '../HtmlField';
-
-export default () => (
-    <>
-        <HtmlField
-            label='Article content'
-            uploadUrl='/api/v1/file-test'
-            uploadImagesProcessor='original'
-        />
-    </>
-);

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

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

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

@@ -1,27 +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';
-import types from './demo/types';
-import addons from './demo/addons';
-import textAddons from './demo/textAddons';
-import mask from './demo/mask';
-
-export default {
-  title: 'form.InputField',
-};
-
-export {
-    basic,
-    disabled,
-    errors,
-    placeholder,
-    required,
-    sizes,
-    types,
-    addons,
-    textAddons,
-    mask
-}

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

@@ -1,171 +0,0 @@
-import * as React from 'react';
-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;
-
-    /**
-     * Объект 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;
-
-    [key: string]: any;
-}
-
-export interface IInputFieldViewProps extends IInputFieldProps, IFieldWrapperOutputProps {
-    style?: any,
-    isInvalid?: boolean,
-    errors?: any,
-    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) {
-    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
-    // TODO
-    /*if (props.maskProps) {
-        return (
-            <InputMask
-                {...props}
-                {...props.maskProps}
-                value={props.input.value || ''}
-                onChange={e => props.input.onChange(e.target.value)}
-            >
-                <InputFieldView
-                    {...this.props}
-                    inputProps={{
-                        type: this.props.type,
-                        name: this.props.input.name,
-                        placeholder: this.props.placeholder,
-                        disabled: this.props.disabled,
-                        ...this.props.inputProps
-                    }}
-                />
-            </InputMask>
-        );
-    }*/
-
-    return components.ui.renderView(props.view || 'form.InputFieldView', {
-        ...props,
-        inputProps,
-    });
-}
-
-InputField.defaultProps = {
-    type: 'text',
-    disabled: false,
-    required: false,
-    className: '',
-    placeholder: '',
-    errors: [],
-    textBefore: null,
-    textAfter: null,
-    addonBefore: null,
-    addonAfter: null,
-};
-
-export default fieldWrapper('InputField', InputField);

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

@@ -1,14 +0,0 @@
-import * as React from 'react';
-
-import InputField from '../InputField';
-
-/**
- * Addons
- * @order 8
- * @col 6
- */
-export default () => (
-    <>
-        <InputField addonBefore='http://' addonAfter='.com' label='AddonBefore and AddonAfter' />
-    </>
-);

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

@@ -1,14 +0,0 @@
-import * as React from 'react';
-
-import InputField from '../InputField';
-
-/**
- * Basic
- * @order 1
- * @col 3
- */
-export default () => (
-    <>
-        <InputField label='Input' />
-    </>
-);

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

@@ -1,14 +0,0 @@
-import * as React from 'react';
-
-import InputField from '../InputField';
-
-/**
- * Disabled
- * @order 2
- * @col 3
- */
-export default () => (
-    <>
-        <InputField label='Disabled' disabled />
-    </>
-);

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

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

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

@@ -1,19 +0,0 @@
-import * as React from 'react';
-
-import InputField from '../InputField';
-
-/**
- * Mask
- * @order 7
- * @col 3
- */
-export default () => (
-    <>
-        <InputField
-            label="Mask"
-            maskProps={{
-                mask: '+7 (999) 999-99-99',
-            }}
-        />
-    </>
-);

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

@@ -1,14 +0,0 @@
-import * as React from 'react';
-
-import InputField from '../InputField';
-
-/**
- * Placeholder
- * @order 4
- * @col 3
- */
-export default () => (
-    <>
-        <InputField label='Placeholder' placeholder='Your text...' />
-    </>
-);

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

@@ -1,14 +0,0 @@
-import * as React from 'react';
-
-import InputField from '../InputField';
-
-/**
- * Required
- * @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';
-
-const sizes = {
-    sm: 'Small',
-    md: 'Middle',
-    lg: 'Large',
-};
-
-/**
- * Sizes
- * @order 10
- * @col 12
- */
-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,14 +0,0 @@
-import * as React from 'react';
-
-import InputField from '../InputField';
-
-/**
- * TextAddons
- * @order 9
- * @col 6
- */
-export default () => (
-    <>
-        <InputField textBefore='http://' textAfter='.com' label='TextBefore and TextAfter' />
-    </>
-);

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

@@ -1,26 +0,0 @@
-import * as React from 'react';
-
-import InputField from '../InputField';
-
-const types = {
-    text: 'Text',
-    email: 'Email',
-    phone: 'Phone',
-    password: 'Password',
-    hidden: 'Hidden',
-};
-
-/**
- * Types
- * @order 11
- * @col 12
- */
-export default () => (
-    <div className='row'>
-        {Object.keys(types).map(type => (
-            <div className='col' key={type}>
-                <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,42 +0,0 @@
-import * as React from 'react';
-import {useCallback} 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) {
-    const {items} = useDataProvider({
-        items: props.items,
-    });
-
-    const onChange = useCallback(value => props.input.onChange(value), [props.input]);
-
-    return (
-        <Nav
-            {...props.navProps}
-            items={items as INavItem[]}
-            activeTab={props.input.value}
-            onChange={onChange}
-        />
-    );
-}
-
-export default fieldWrapper('NavField', NavField);