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

package/ui/form/RangeField/demo/types.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import RangeField from '../RangeField';
+
+const types = {
+    input: 'Input',
+    date: 'Date',
+};
+
+export default () => (
+    <>
+        {Object.keys(types).map(type => (
+            <div className='col' key={type}>
+                <RangeField label={types[type]} type={type}/>
+            </div>
+        ))}
+    </>
+);

package/ui/form/RangeField/index.ts

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

package/ui/form/ReCaptchaField/ReCaptchaField.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import {components, field} from '../../../hoc';
+import {IComponentsHocOutput} from '../../../hoc/components';
+import {IFieldHocInput, IFieldHocOutput} from '../../../hoc/field';
+
+export interface IReCaptchaFieldProps extends IFieldHocInput {
+    action?: any;
+    view?: CustomView;
+    [key: string]: any;
+}
+
+export interface IReCaptchaFieldViewProps extends IFieldHocOutput {
+    reCaptchaProps: any,
+}
+
+interface IReCaptchaFieldPrivateProps extends IFieldHocOutput, IComponentsHocOutput {
+
+}
+
+@field({
+    componentId: 'form.ReCaptchaField'
+})
+@components('resource', 'ui')
+export default class ReCaptchaField extends React.PureComponent<IReCaptchaFieldProps & IReCaptchaFieldPrivateProps> {
+    render() {
+        const {input, ...props} = this.props;
+        const ReCaptchaFieldView =
+            this.props.view || this.props.ui.getView('form.ReCaptchaFieldView');
+        return (
+            <ReCaptchaFieldView
+                {...props}
+                reCaptchaProps={{
+                    sitekey: this.props.resource.googleCaptchaSiteKey,
+                    action: this.props.action,
+                    verifyCallback: value => input.onChange(value)
+                }}
+            />
+        );
+    }
+}

package/ui/form/SliderField/SliderField.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import {components, field} from '../../../hoc';
+import {IFieldHocInput, IFieldHocOutput} from '../../../hoc/field';
+import {IComponentsHocOutput} from '../../../hoc/components';
+
+export interface ISliderFieldProps extends IFieldHocInput {
+    sliderProps?: any;
+    className?: CssClassName;
+    view?: CustomView;
+    min?: number;
+    max?: number;
+    [key: string]: any;
+}
+
+export interface ISliderFieldViewProps extends IFieldHocOutput {
+    slider: {
+        min: number,
+        max: number,
+        defaultValue: number,
+        value: number,
+        onChange: (value: any) => void,
+        onAfterChange: (value: any) => void,
+    }
+}
+
+interface ISliderFieldPrivateProps extends IFieldHocOutput, IComponentsHocOutput {
+
+}
+
+@field({
+    componentId: 'form.SliderField'
+})
+@components('ui')
+export default class SliderField extends React.PureComponent<ISliderFieldProps & ISliderFieldPrivateProps> {
+    static defaultProps = {
+        disabled: false,
+        required: false,
+        className: '',
+        errors: [],
+        min: 0,
+        max: 100
+    };
+
+    static normalizeValue(value) {
+        return parseInt(String(value).replace(/[0-9]g/, '')) || 0;
+    }
+
+    constructor(props) {
+        super(props);
+        this._onChange = this._onChange.bind(this);
+        this._onAfterChange = this._onAfterChange.bind(this);
+    }
+
+    render() {
+        const SliderFieldView =
+            this.props.view || this.props.ui.getView('form.SliderFieldView');
+        return (
+            <SliderFieldView
+                {...this.props}
+                slider={{
+                    min: this.props.min,
+                    max: this.props.max,
+                    defaultValue: 0,
+                    value: this.props.input.value || 0,
+                    onChange: this._onChange,
+                    onAfterChange: this._onAfterChange
+                }}
+            />
+        );
+    }
+
+    _onChange(range) {
+        this.props.input.onChange(range);
+    }
+
+    _onAfterChange(value) {
+        value = SliderField.normalizeValue(value);
+        this.props.input.onChange(value);
+    }
+}

package/ui/form/SwitcherField/SwitcherField.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import {components, field} from '../../../hoc';
+import dataProvider, {IDataProviderHocInput, IDataProviderHocOutput} from "../../../hoc/dataProvider";
+import {IFieldHocInput, IFieldHocOutput} from '../../../hoc/field';
+import {IComponentsHocOutput} from '../../../hoc/components';
+
+export interface ISwitcherFieldProps extends IFieldHocInput, IDataProviderHocInput {
+    className?: CssClassName;
+    view?: CustomView;
+    buttonProps?: any;
+    [key: string]: any;
+}
+
+export interface ISwitcherFieldViewProps extends IFieldHocOutput, IDataProviderHocOutput {
+    items: {
+        id: number | string | boolean,
+        label?: string,
+        isSelected: boolean,
+        isHovered: boolean,
+    }[];
+    onItemClick: (item: {id: number | string | boolean}) => void,
+    buttonProps?: any,
+}
+
+interface ISwitcherFieldPrivateProps extends IFieldHocOutput, IDataProviderHocOutput, IComponentsHocOutput {
+
+}
+
+@field({
+    componentId: 'form.SwitcherField'
+})
+@dataProvider()
+@components('ui')
+export default class SwitcherField extends React.PureComponent<ISwitcherFieldProps & ISwitcherFieldPrivateProps> {
+    static defaultProps = {
+        disabled: false,
+        required: false,
+        className: '',
+        errors: []
+    };
+
+    render() {
+        const SwitcherFieldView =
+            this.props.view || this.props.ui.getView('form.SwitcherFieldView');
+        return (
+            <SwitcherFieldView
+                {...this.props}
+                items={this.props.items.map(item => ({
+                    ...item,
+                    isSelected: !!this.props.selectedItems.find(
+                        selectedItem => selectedItem.id === item.id
+                    ),
+                    isHovered:
+                        this.props.hoveredItem && this.props.hoveredItem.id === item.id
+                }))}
+                onItemClick={this.props.onItemClick}
+            />
+        );
+    }
+}

package/ui/form/TextField/TextField.story.js

@@ -0,0 +1,19 @@
+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 submit from './demo/submit';
+
+export default {
+  title: 'form.TextField',
+};
+
+export {
+    disabled,
+    errors,
+    placeholder,
+    required,
+    sizes,
+    submit,
+}

package/ui/form/TextField/TextField.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import {submit} from 'redux-form';
+import {components, connect, field} from '../../../hoc';
+import {IFieldHocInput, IFieldHocOutput} from '../../../hoc/field';
+import {IComponentsHocOutput} from '../../../hoc/components';
+import {IConnectHocOutput} from '../../../hoc/connect';
+
+export interface ITextFieldProps extends IFieldHocInput {
+    /**
+     * Placeholder подсказка
+     * @example Your text...
+     */
+    placeholder?: string;
+
+    /**
+     * Отправлять форму при нажатии на кнопку `enter`
+     * @example true
+     */
+    submitOnEnter?: boolean;
+    inputProps?: any;
+    className?: CssClassName;
+    view?: CustomView;
+    [key: string]: any;
+}
+
+export interface ITextFieldViewProps extends IFieldHocOutput {
+    inputProps: {
+        name: string,
+        onChange: (value: string | React.ChangeEvent) => void,
+        onKeyUp: (e: Event | React.KeyboardEvent) => void,
+        value: string | number,
+        placeholder: string,
+        disabled: boolean,
+    },
+}
+
+interface ITextFieldPrivateProps extends IFieldHocOutput, IConnectHocOutput, IComponentsHocOutput {
+
+}
+
+@field({
+    componentId: 'form.TextField'
+})
+@connect()
+@components('ui')
+export default class TextField extends React.PureComponent<ITextFieldProps & ITextFieldPrivateProps> {
+    static defaultProps = {
+        disabled: false,
+        required: false,
+        className: '',
+        placeholder: '',
+        submitOnEnter: false,
+        errors: []
+    };
+
+    constructor(props) {
+        super(props);
+        this._onKeyUp = this._onKeyUp.bind(this);
+    }
+
+    render() {
+        const TextFieldView =
+            this.props.view || this.props.ui.getView('form.TextFieldView');
+        return (
+            <TextFieldView
+                {...this.props}
+                inputProps={{
+                    name: this.props.input.name,
+                    value: this.props.input.value || '',
+                    onChange: e => this.props.input.onChange(e.target ? e.target.value : e.nativeEvent.text),
+                    onKeyUp: this._onKeyUp,
+                    placeholder: this.props.placeholder,
+                    disabled: this.props.disabled,
+                    ...this.props.inputProps
+                }}
+            />
+        );
+    }
+
+    _onKeyUp(e) {
+        if (
+            this.props.submitOnEnter &&
+            this.props.formId &&
+            e.keyCode === 13 &&
+            !e.shiftKey
+        ) {
+            e.preventDefault();
+
+            // TODO This is not worked in redux... =(
+            this.props.dispatch(submit(this.props.formId));
+        }
+    }
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+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/ui/form/TextField/demo/submit.tsx

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

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

@@ -0,0 +1,17 @@
+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.TimeField',
+};
+
+export {
+    disabled,
+    errors,
+    placeholder,
+    required,
+    sizes,
+}

package/ui/form/TimeField/TimeField.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import {field} from '../../../hoc';
+import {IComponentsHocOutput} from '../../../hoc/components';
+import {IFieldHocInput, IFieldHocOutput} from '../../../hoc/field';
+
+/**
+ * InputField
+ * Поле ввода текста
+ */
+export interface ITimeFieldProps extends IFieldHocInput {
+    /**
+     * 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;
+
+    /**
+     * Формат отображения времени
+     * @example 'HH:mm'
+     */
+    timeFormat?: string,
+
+    /**
+     * Объект, который будет передан в props внутреннего компонента используемого для выбора времени.
+     */
+    pickerProps?: any;
+
+    [key: string]: any;
+}
+
+export interface ITimeFieldViewProps extends IFieldHocOutput {
+    style?: any,
+    isInvalid?: boolean,
+    errors?: any,
+    placeholder?: string,
+    timeFormat?: string,
+    inputProps: {
+        type: string,
+        name: string,
+        onChange: (value: string) => void,
+        value: string | number,
+        placeholder: string,
+        disabled: string,
+    },
+    pickerProps: any,
+    type: any,
+}
+
+interface ITimeFieldPrivateProps extends IFieldHocOutput, IComponentsHocOutput {}
+
+@field({
+    componentId: 'form.TimeField'
+})
+export default class TimeField extends React.PureComponent<ITimeFieldProps & ITimeFieldPrivateProps> {
+
+    static WrappedComponent: any;
+
+    static defaultProps = {
+        disabled: false,
+        required: false,
+        className: '',
+        timeFormat: 'HH:mm',
+        placeholder: '00:00',
+    };
+
+    render() {
+        const TimeFieldView = this.props.view || this.props.ui.getView('form.TimeFieldView');
+        return (
+            <TimeFieldView
+                {...this.props}
+                inputProps={{
+                    type: this.props.type,
+                    name: this.props.input.name,
+                    placeholder: this.props.placeholder,
+                    disabled: this.props.disabled,
+                    ...this.props.inputProps,
+                    value: this.props.input.value || '',
+                    onChange: value => {
+                        this.props.input.onChange(value);
+                        if (this.props.onChange) {
+                            this.props.onChange(value);
+                        }
+                    },
+                }}
+            />
+        );
+    }
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+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/ui/form/index.ts

@@ -0,0 +1,84 @@
+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,
+};