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

package/ui/form/DateTimeField/DateTimeField.tsx

@@ -0,0 +1,153 @@
+import * as React from 'react';
+import moment from 'moment';
+import _isEqual from 'lodash-es/isEqual';
+import {components, field} from '../../../hoc';
+import DateField from '../DateField';
+import TimeField from "../TimeField";
+import {IFieldHocInput, IFieldHocOutput} from '../../../hoc/field';
+import {IComponentsHocOutput} from '../../../hoc/components';
+
+export interface IDateTimeFieldProps extends IFieldHocInput {
+
+    /**
+     * Формат даты показываемый пользователю
+     * @example DD.MM.YYYY
+     */
+    displayDateFormat?: string;
+
+    /**
+     * Формат даты отправляемый на сервер
+     * @example YYYY-MM-DD
+     */
+    valueDateFormat?: string;
+
+    /**
+     * Формат времени
+     * @example HH:mm
+     */
+    timeFormat?: string;
+    dateProps?: any;
+    timeProps?: any;
+    style?: any;
+    className?: CssClassName;
+    view?: CustomView;
+    [key: string]: any;
+}
+
+export interface IDateTimeFieldViewProps extends IFieldHocOutput {
+    dateField: any,
+    timeField: any,
+    style?: any
+}
+
+interface IDateTimeFieldPrivateProps extends IFieldHocOutput, IComponentsHocOutput {
+}
+
+type DateTimeFieldState = {
+    time?: any,
+    date?: any
+};
+@field({
+    componentId: 'form.DateTimeField'
+})
+@components('ui')
+export default class DateTimeField extends React.PureComponent<IDateTimeFieldProps & IDateTimeFieldPrivateProps, DateTimeFieldState> {
+    static defaultProps = {
+        disabled: false,
+        required: false,
+        className: '',
+        displayDateFormat: 'DD.MM.YYYY',
+        valueDateFormat: 'YYYY-MM-DD',
+        timeFormat: 'HH:mm'
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = this._parseToState(this.props);
+    }
+
+    UNSAFE_componentWillReceiveProps(nextProps) {
+        const newState = this._parseToState(nextProps);
+        if (!_isEqual(this.state, newState)) {
+            this.setState(newState);
+        }
+    }
+
+    render() {
+        const DateFieldInternal = DateField.WrappedComponent;
+        const TimeFieldInternal = TimeField.WrappedComponent;
+        const DateTimeFieldView = this.props.view || this.props.ui.getView('form.DateTimeFieldView');
+
+        return (
+            <DateTimeFieldView
+                {...this.props}
+                dateField={
+                    <DateFieldInternal
+                        isInvalid={this.props.isInvalid}
+                        required={this.props.required}
+                        disabled={this.props.disabled}
+                        displayFormat={this.props.displayDateFormat}
+                        valueFormat={this.props.valueDateFormat}
+                        input={{
+                            name: '',
+                            value: this.state.date,
+                            onChange: value => this._onChange({date: value})
+                        }}
+                        layout={false}
+                        {...this.props.dateProps}
+                    />
+                }
+                timeField={
+                    <TimeFieldInternal
+                        isInvalid={this.props.isInvalid}
+                        required={this.props.required}
+                        disabled={this.props.disabled}
+                        timeFormat={this.props.timeFormat}
+                        input={{
+                            name: '',
+                            value: this.state.time,
+                            onChange: value => this._onChange({time: value})
+                        }}
+                        layout={false}
+                        {...this.props.timeProps}
+                    />
+                }
+            />
+        );
+    }
+
+    _onChange(data) {
+        this.setState(data, () => {
+            const momentDate = this._parseDate(
+                this.state.date + ' ' + this.state.time
+            );
+            const format = this.props.valueDateFormat + ' ' + this.props.timeFormat;
+            if (momentDate) {
+                this.props.input.onChange(momentDate.format(format));
+            }
+        });
+    }
+
+    _parseToState(props) {
+        const momentDate = this._parseDate(props.input.value);
+        return {
+            date: momentDate ? momentDate.format(props.valueDateFormat) : null,
+            time: (momentDate || moment().startOf('day')).format(props.timeFormat)
+        };
+    }
+
+    _parseDate(date) {
+        const formats = [
+            this.props.displayDateFormat + ' ' + this.props.timeFormat,
+            this.props.displayDateFormat + ' ' + this.props.timeFormat + ':ss',
+            this.props.valueDateFormat + ' ' + this.props.timeFormat,
+            this.props.valueDateFormat + ' ' + this.props.timeFormat + ':ss',
+        ];
+        const format = formats.find(format => {
+            return (
+                date && date.length === format.length && moment(date, format).isValid()
+            );
+        });
+        return format ? moment(date, format) : null;
+    }
+}

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

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

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

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

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

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

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

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

package/ui/form/DateTimeField/index.ts

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

package/ui/form/DropDownField/DropDownField.story.js

@@ -0,0 +1,23 @@
+import autoComplete from './demo/auto-complete';
+import disabled from './demo/disabled';
+import errors from './demo/errors';
+import multiple from './demo/multiple';
+import placeholder from './demo/placeholder';
+import required from './demo/required';
+import showReset from './demo/show-reset';
+import noBorder from './demo/no-border';
+
+export default {
+  title: 'form.DropDownField',
+};
+
+export {
+    autoComplete,
+    disabled,
+    errors,
+    multiple,
+    placeholder,
+    required,
+    showReset,
+    noBorder,
+}

package/ui/form/DropDownField/DropDownField.tsx

@@ -0,0 +1,146 @@
+import * as React from 'react';
+import enhanceWithClickOutside from 'react-click-outside';
+import {components, field} from '../../../hoc';
+import dataProvider, {IDataProviderHocInput, IDataProviderHocOutput} from '../../../hoc/dataProvider';
+import {IFieldHocInput, IFieldHocOutput} from '../../../hoc/field';
+import {IComponentsHocOutput} from '../../../hoc/components';
+import {conditional} from 'conditional-decorator';
+
+export interface IDropDownFieldProps extends IFieldHocInput, IDataProviderHocInput {
+
+    /**
+     * Placeholder подсказка
+     * @example Your text...
+     */
+    searchPlaceholder?: string;
+    inputProps?: any;
+    className?: CssClassName;
+    style?: any,
+    view?: any;
+
+    /**
+     * Показать кнопку для сброса выбранного значения
+     * @example true
+     */
+    showReset?: boolean;
+
+    /**
+     * Включает стиль без 'border'
+     * @example true
+     */
+    noBorder?: boolean;
+
+    [key: string]: any;
+}
+
+export interface IDropDownFieldViewProps extends IFieldHocOutput, IDataProviderHocOutput {
+    style?: any,
+    items: {
+        id: number | string | boolean,
+
+        /**
+         * Название поля
+         * @example Save
+         */
+        label?: string,
+        isSelected: boolean,
+        isHovered: boolean,
+    }[];
+    selectedItems?: {
+        id: number | string | boolean,
+
+        /**
+         * Название поля
+         * @example Save
+         */
+        label?: string
+    }[];
+    multiple: boolean,
+    placeholder: string,
+    searchInputProps: {
+        type: string,
+        name: string,
+        onChange: (value: string) => void,
+        value: string | number,
+        placeholder: string,
+        disabled: boolean,
+        className: CssClassName,
+    },
+    isOpened?: boolean,
+    isLoading?: boolean,
+    showReset?: boolean,
+    noBorder?: boolean,
+    autoComplete?: any,
+    searchAutoFocus?: any,
+    onOpen: () => void,
+    onReset: () => void,
+    onItemClick: (item: {id: number | string | boolean}) => void,
+    onItemMouseOver: (item: {id: number | string | boolean}) => void,
+}
+
+interface IDropDownFieldPrivateProps extends IFieldHocOutput, IDataProviderHocOutput, IComponentsHocOutput {}
+
+@field({
+    componentId: 'form.DropDownField'
+})
+@dataProvider()
+@components('ui')
+@conditional(!!process.env.IS_WEB, enhanceWithClickOutside)
+export default class DropDownField extends React.PureComponent<IDropDownFieldProps & IDropDownFieldPrivateProps> {
+    static defaultProps = {
+        disabled: false,
+        required: false,
+        className: '',
+        autoComplete: false,
+        showReset: false,
+        multiple: false
+    };
+
+    constructor(props) {
+        super(props);
+        this._onReset = this._onReset.bind(this);
+    }
+
+    handleClickOutside() {
+        this.props.onClose();
+    }
+
+    render() {
+        const DropDownFieldView = this.props.view || this.props.ui.getView('form.DropDownFieldView');
+
+        return (
+            <DropDownFieldView
+                {...this.props}
+                searchInputProps={{
+                    type: 'search',
+                    placeholder:
+                        this.props.searchPlaceholder ||
+                        __('Начните вводить символы для поиска...'),
+                    onChange: value => this.props.onSearch(value),
+                    tabIndex: -1
+                }}
+                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
+                }))}
+                selectedItems={this.props.selectedItems}
+                isOpened={this.props.isOpened}
+                isLoading={this.props.isLoading}
+                showReset={this.props.showReset}
+                onOpen={this.props.onOpen}
+                onReset={this._onReset}
+                onItemClick={this.props.onItemClick}
+                onItemMouseOver={this.props.onItemMouseOver}
+                onClose={this.props.onClose}
+            />
+        );
+    }
+
+    _onReset() {
+        this.props.input.onChange(null);
+    }
+}

package/ui/form/DropDownField/demo/auto-complete.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import DropDownField from '../DropDownField';
+
+export const items = [
+    {
+        id: 1,
+        label: 'First',
+    },
+    {
+        id: 2,
+        label: 'Second',
+    },
+    {
+        id: 3,
+        label: 'Third',
+    },
+    {
+        id: 4,
+        label: 'Fourth',
+    },
+];
+
+export default () => (
+    <>
+        <DropDownField
+            label='Auto Complete'
+            autoComplete
+            items={items}
+        />
+    </>
+);

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import DropDownField from '../DropDownField';
+import {items} from './auto-complete';
+
+export default () => (
+    <>
+        <DropDownField
+            label='Disabled'
+            disabled
+            items={items}
+        />
+    </>
+);

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

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

package/ui/form/DropDownField/demo/multiple.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import DropDownField from '../DropDownField';
+import {items} from './auto-complete';
+
+export default () => (
+    <>
+        <DropDownField
+            label='Multiple'
+            multiple
+            items={items}
+        />
+    </>
+);

package/ui/form/DropDownField/demo/no-border.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import DropDownField from '../DropDownField';
+import {items} from './auto-complete';
+
+export default () => (
+    <div
+        style={{width: '100px'}}
+    >
+        <DropDownField
+            label='No border'
+            noBorder
+            selectFirst
+            items={items}
+        />
+    </div>
+);

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import DropDownField from '../DropDownField';
+import {items} from './auto-complete';
+
+export default () => (
+    <>
+        <DropDownField
+            label='Search Placeholder'
+            autoComplete
+            searchPlaceholder='Search...'
+            items={items}
+        />
+    </>
+);

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import DropDownField from '../DropDownField';
+import {items} from './auto-complete';
+
+export default () => (
+    <>
+        <DropDownField
+            label='Required'
+            required
+            items={items}
+        />
+    </>
+);

package/ui/form/DropDownField/demo/show-reset.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import DropDownField from '../DropDownField';
+import {items} from './auto-complete';
+
+export default () => (
+    <>
+        <DropDownField
+            label='Show reset'
+            showReset
+            items={items}
+        />
+    </>
+);

package/ui/form/DropDownField/index.ts

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

package/ui/form/Field/Field.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import {connect} from 'react-redux';
+import _get from 'lodash-es/get';
+import _isString from 'lodash-es/isString';
+
+import components, {IComponentsHocOutput} from '../../../hoc/components';
+import form, {IFormHocOutput} from '../../../hoc/form';
+import {getModel} from '../../../reducers/fields';
+import {IConnectHocOutput} from '../../../hoc/connect';
+import {getFieldPropsFromModel} from '../../../hoc/field';
+
+export interface IFieldProps {
+    [key: string]: any,
+}
+
+export interface IFieldPrivateProps extends IFormHocOutput, IConnectHocOutput, IComponentsHocOutput{
+}
+
+@form()
+@connect((state, props) => ({
+    model: getModel(state, props.model),
+}))
+@components('ui')
+export default class Field extends React.Component<IFieldProps & IFieldPrivateProps, {}> {
+    render() {
+        const component = this.props.component
+            || _get(getFieldPropsFromModel(this.props.model, this.props.attribute), 'component')
+            || 'InputField';
+        const ComponentField = _isString(component) ? this.props.ui.getField('form.' + component) : component;
+        return (
+            <ComponentField {...this.props} />
+        );
+    }
+}

package/ui/form/Field/index.ts

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

package/ui/form/FieldLayout/FieldLayout.story.js

@@ -0,0 +1,13 @@
+import layoutDefault from './demo/default';
+import layoutHorizontal from './demo/horizontal';
+import layoutInline from './demo/inline';
+
+export default {
+  title: 'form.FieldLayout',
+};
+
+export {
+    layoutDefault,
+    layoutHorizontal,
+    layoutInline,
+}

package/ui/form/FieldLayout/FieldLayout.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import {components} from '../../../hoc';
+import {IComponentsHocOutput} from '../../../hoc/components';
+import {mergeLayoutProp} from '../../../hoc/form';
+
+export interface IFieldLayoutProps {
+
+    /**
+     * Название поля либо отмена отображение поля (false)
+     * @example Visible
+     */
+    label?: string | boolean | any;
+    hint?: string | boolean;
+
+    /**
+     * Обязательное ли поле? Если true,
+     * то к названию будет добавлен модификатор 'required' - красная звездочка (по умолчанию)
+     * @example true
+     */
+    required?: boolean;
+    layout?: FormLayout;
+    errors?: string | string[];
+    layoutView?: CustomView;
+    [key: string]: any;
+}
+
+export interface IFieldLayoutViewProps {
+    label: string | boolean | any,
+    required: boolean,
+    hint: string | boolean,
+    errors: string | string[],
+    layout?: {
+        layout: FormLayoutName | boolean,
+        className: string,
+        label: boolean,
+        cols: number[],
+        [key: string]: any,
+    };
+}
+
+interface IFieldLayoutPrivateProps extends IComponentsHocOutput {
+
+}
+
+const defaultProps = {
+    layout: {
+        layout: 'default',
+        cols: [3, 6]
+    },
+    required: false,
+    className: ''
+};
+
+@components('ui')
+export default class FieldLayout extends React.PureComponent<IFieldLayoutProps & IFieldLayoutPrivateProps> {
+    static defaultProps = defaultProps;
+
+    render() {
+        if (this.props.layout === false) {
+            return this.props.children;
+        }
+        const FieldLayoutView = this.props.layoutView || this.props.ui.getView('form.FieldLayoutView');
+        const layout = mergeLayoutProp(defaultProps.layout, this.props.layout);
+        return (
+            <FieldLayoutView
+                {...this.props}
+                layout={typeof layout === 'object' ? layout : {layout}}
+            >
+                {this.props.children}
+            </FieldLayoutView>
+        );
+    }
+}

package/ui/form/FieldLayout/demo/default.tsx

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

package/ui/form/FieldLayout/demo/horizontal.tsx

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

package/ui/form/FieldLayout/demo/inline.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import InputField from '../../InputField';
+
+export default () => (
+    <>
+        <div className='mb-2'>Inline (label is hide)</div>
+        <InputField label='Inline' layout='inline'/>
+    </>
+);