@steroidsjs/core 2.0.0-rc.7 → 2.0.1-beta.113

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import {EditorState, Modifier} from 'draft-js';
+import HtmlField from '../HtmlField';
+
+export default () => (
+    <>
+        <HtmlField
+            label='Article content'
+            uploadUrl={'/api/v1/file-test'}
+            uploadImagesProcessor={'original'}
+            customButtons={[<CustomButton/>]}
+        />
+    </>
+);
+
+interface ICustomButton {
+    editorState?: any,
+    onChange?: Function,
+}
+
+class CustomButton extends React.PureComponent<ICustomButton> {
+
+    addText = () => {
+        const customOption = "Custom text";
+        const {editorState, onChange} = this.props;
+        const contentState = Modifier.replaceText(
+            editorState.getCurrentContent(),
+            editorState.getSelection(),
+            //There insert custom text
+            customOption,
+            editorState.getCurrentInlineStyle(),
+        );
+        onChange(EditorState.push(editorState, contentState, 'insert-characters'));
+    };
+
+    render() {
+        return (
+            <div onClick={this.addText}>CUSTOM option</div>
+        );
+    }
+}

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

@@ -0,0 +1,27 @@
+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/ui/form/InputField/InputField.tsx

@@ -0,0 +1,180 @@
+import * as React from 'react';
+import {ReactNode} from 'react';
+import {components, field} from '../../../hoc';
+import {IFieldHocInput, IFieldHocOutput} from '../../../hoc/field';
+import {IComponentsHocOutput} from '../../../hoc/components';
+import InputMask from 'react-input-mask';
+
+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 IFieldHocInput {
+    /**
+     * HTML Тип
+     * @example email
+     */
+    type?: IElementInputType;
+
+    /**
+     * Placeholder подсказка
+     * @example Your text...
+     */
+    placeholder?: string;
+
+    /**
+     * Свойства для элемента \<input /\>
+     * @example {onKeyDown: ...}
+     */
+    inputProps?: any;
+    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 IFieldHocOutput {
+    style?: any,
+    isInvalid?: boolean,
+    errors?: any,
+    placeholder?: string,
+    type?: string,
+    inputProps: {
+        type: string,
+        name: string,
+        onChange: (value: string) => void,
+        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;
+}
+
+interface IInputFieldPrivateProps extends IFieldHocOutput, IComponentsHocOutput {
+
+}
+
+@field({
+    componentId: 'form.InputField'
+})
+@components('ui')
+export default class InputField extends React.PureComponent<IInputFieldProps & IInputFieldPrivateProps> {
+
+    static WrappedComponent: any;
+
+    static defaultProps = {
+        type: 'text',
+        disabled: false,
+        required: false,
+        className: '',
+        placeholder: '',
+        errors: [],
+        textBefore: null,
+        textAfter: null,
+        addonBefore: null,
+        addonAfter: null,
+    };
+
+    render() {
+        // No render for hidden input
+        if (this.props.type === 'hidden') {
+            return null;
+        }
+        const InputFieldView =
+            this.props.view || this.props.ui.getView('form.InputFieldView');
+
+
+        // react-input-mask HOC for mask
+        if (this.props.maskProps) {
+            return (
+                <InputMask
+                    {...this.props}
+                    {...this.props.maskProps}
+                    value={this.props.input.value ?? ''}
+                    onChange={e => this.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 (
+            <InputFieldView
+                {...this.props}
+                inputProps={{
+                    type: this.props.type,
+                    name: this.props.input.name,
+                    value: this.props.input.value ?? '',
+                    onChange: value => this.props.input.onChange(value),
+                    placeholder: this.props.placeholder,
+                    disabled: this.props.disabled,
+                    ...this.props.inputProps
+                }}
+            />
+        );
+    }
+}

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

@@ -0,0 +1,14 @@
+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/ui/form/InputField/demo/basic.tsx

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

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

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

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

@@ -0,0 +1,14 @@
+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/ui/form/InputField/demo/mask.tsx

@@ -0,0 +1,19 @@
+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/ui/form/InputField/demo/placeholder.tsx

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

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

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

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

@@ -0,0 +1,24 @@
+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/ui/form/InputField/demo/textAddons.tsx

@@ -0,0 +1,14 @@
+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/ui/form/InputField/demo/types.tsx

@@ -0,0 +1,26 @@
+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/ui/form/NavField/NavField.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import {field} from '../../../hoc';
+import {IFieldHocInput, IFieldHocOutput} from '../../../hoc/field';
+import Nav, {INavProps} from '../../nav/Nav/Nav';
+import dataProvider, {IDataProviderHocOutput} from '../../../hoc/dataProvider';
+
+/**
+ * NavField
+ * Навигация как часть формы
+ */
+export interface INavFieldProps extends IFieldHocInput {
+    navProps: INavProps,
+    [key: string]: any,
+
+}
+
+interface INavFieldPrivateProps extends IFieldHocOutput, IDataProviderHocOutput {
+
+}
+
+@field({
+    componentId: 'form.NavField'
+})
+@dataProvider()
+export default class NavField extends React.PureComponent<INavFieldProps & INavFieldPrivateProps> {
+    render() {
+        return (
+            <Nav
+                {...this.props.navProps}
+                items={this.props.items}
+                activeTab={this.props.input.value}
+                onChange={value => this.props.input.onChange(value)}
+            />
+        );
+    }
+}

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

@@ -0,0 +1,19 @@
+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/ui/form/NumberField/NumberField.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import {components, field} from '../../../hoc';
+import {IFieldHocInput, IFieldHocOutput} from '../../../hoc/field';
+import {IComponentsHocOutput} from '../../../hoc/components';
+import {IInputFieldProps} from '../InputField/InputField';
+
+/**
+ * NumberField
+ * Числовое поле ввода
+ */
+export interface INumberFieldProps extends IInputFieldProps, IFieldHocInput {
+    /**
+     * Минимальное значение
+     * @example 1
+     */
+    min?: number;
+
+    /**
+     * Максимальное значение
+     * @example 100
+     */
+    max?: number;
+
+    /**
+     * Шаг увеличения/уменьшения значения
+     * @example 5
+     */
+    step?: string | number;
+
+    [key: string]: any;
+}
+
+export interface INumberFieldViewProps extends IFieldHocOutput {
+    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,
+    },
+}
+
+interface INumberFieldPrivateProps extends IFieldHocOutput, IComponentsHocOutput {
+
+}
+
+@field({
+    componentId: 'form.NumberField'
+})
+@components('ui')
+export default class NumberField extends React.PureComponent<INumberFieldProps & INumberFieldPrivateProps> {
+    static defaultProps = {
+        disabled: false,
+        required: false,
+        className: '',
+        placeholder: '',
+        min: null,
+        max: null,
+        step: null,
+        errors: []
+    };
+
+    render() {
+        const NumberFieldView =
+            this.props.view ||
+            this.props.ui.getView('form.NumberFieldView') ||
+            this.props.ui.getView('form.InputFieldView');
+        return (
+            <NumberFieldView
+                {...this.props}
+                inputProps={{
+                    name: this.props.input.name,
+                    value: this.props.input.value ?? undefined,
+                    onChange: e => this.props.input.onChange(e.target ? e.target.value : e.nativeEvent.text),
+                    type: 'number',
+                    min: this.props.min,
+                    max: this.props.max,
+                    step: this.props.step,
+                    placeholder: this.props.placeholder,
+                    disabled: this.props.disabled,
+                    ...this.props.inputProps
+                }}
+            />
+        );
+    }
+}

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

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

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

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

package/ui/form/NumberField/demo/errors.tsx

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

package/ui/form/NumberField/demo/placeholder.tsx

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

package/ui/form/NumberField/demo/required.tsx

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

package/ui/form/NumberField/demo/sizes.tsx

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