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

package/ui/form/PasswordField/PasswordField.story.js

@@ -0,0 +1,21 @@
+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 security from './demo/security';
+import sizes from './demo/sizes';
+
+export default {
+  title: 'form.PasswordField',
+};
+
+export {
+    basic,
+    disabled,
+    errors,
+    placeholder,
+    security,
+    required,
+    sizes,
+}

package/ui/form/PasswordField/PasswordField.tsx

@@ -0,0 +1,127 @@
+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';
+
+
+/**
+ * PasswordField
+ * Поле ввода пароля
+ */
+export interface IPasswordFieldProps extends IInputFieldProps, IFieldHocInput {
+
+    /**
+     * Если true, то отображается шкала сложности пароля и иконка 'отображения' пароля
+     * @example true
+     */
+    security?: boolean;
+
+    [key: string]: any;
+}
+
+export interface IPasswordFieldViewProps {
+    inputProps: {
+        type: string,
+        name: string,
+        onChange: (value: Event | React.ChangeEvent) => void,
+        value: string | number,
+        placeholder: string,
+        disabled: boolean,
+    },
+    security?: boolean,
+    isInvalid?: boolean,
+    size?: number | string,
+    className?: CssClassName,
+    securityLevel?: 'success' | 'warning' | 'danger',
+    onShowPassword: () => void,
+    onHidePassword: () => void,
+}
+
+interface IPasswordFieldPrivateProps extends IFieldHocOutput, IComponentsHocOutput {
+
+}
+
+interface PasswordFieldState {
+    type?: string
+}
+
+
+export const checkPassword = password => {
+    if (!password) {
+        return null;
+    }
+    const symbols = {
+        lowerLetters: 'qwertyuiopasdfghjklzxcvbnm',
+        upperLetters: 'QWERTYUIOPLKJHGFDSAZXCVBNM',
+        digits: '0123456789',
+        special: '!@#$%^&*()_-+=|/.,:;[]{}'
+    };
+    let rating = 0;
+    Object.keys(symbols).map(key => {
+        for (let i = 0; i < password.length; i++) {
+            if (symbols[key].indexOf(password[i]) !== -1) {
+                rating++;
+                break;
+            }
+        }
+    });
+    if (password.length > 8 && rating >= 4) {
+        return 'success';
+    }
+    if (password.length >= 6 && rating >= 2) {
+        return 'warning';
+    }
+    return 'danger';
+};
+
+@field({
+    componentId: 'form.PasswordField'
+})
+@components('ui')
+export default class PasswordField extends React.PureComponent<IPasswordFieldProps & IPasswordFieldPrivateProps, PasswordFieldState> {
+    static defaultProps = {
+        disabled: false,
+        security: false,
+        required: false,
+        className: '',
+        placeholder: '',
+        errors: []
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            type: 'password',
+        };
+    }
+
+    render() {
+        const PasswordFieldView =
+            this.props.view ||
+            this.props.ui.getView('form.PasswordFieldView') ||
+            this.props.ui.getView('form.InputFieldView');
+        return (
+            <PasswordFieldView
+                {...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),
+                    type: this.state.type,
+                    placeholder: this.props.placeholder,
+                    disabled: this.props.disabled,
+                    ...this.props.inputProps
+                }}
+                security={this.props.security}
+                securityLevel={
+                    this.props.security
+                        ? checkPassword(this.props.input.value)
+                        : null
+                }
+                onShowPassword={() => this.setState({type: 'text'})}
+                onHidePassword={() => this.setState({type: 'password'})}
+            />
+        );
+    }
+}

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

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

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

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

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

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

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

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

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

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

package/ui/form/PasswordField/demo/security.tsx

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

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import PasswordField from '../PasswordField';
+
+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}>
+                <PasswordField label={size} size={size}/>
+            </div>
+        ))}
+    </div>
+);

package/ui/form/RadioListField/RadioListField.story.js

@@ -0,0 +1,13 @@
+import disabled from './demo/disabled';
+import errors from './demo/errors';
+import required from './demo/required';
+
+export default {
+  title: 'form.RadioListField',
+};
+
+export {
+    disabled,
+    errors,
+    required,
+}

package/ui/form/RadioListField/RadioListField.tsx

@@ -0,0 +1,70 @@
+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 IRadioListFieldProps extends IFieldHocInput, IDataProviderHocInput {
+    inputProps?: any;
+    className?: CssClassName;
+    view?: CustomView;
+    [key: string]: any;
+}
+
+export interface IRadioListFieldViewProps extends IFieldHocOutput, IDataProviderHocOutput {
+    inputProps: {
+        type: string,
+        name: string,
+        disabled: string,
+        onChange: any,
+    },
+    items: {
+        id: number | string | boolean,
+        label?: string,
+        isSelected: boolean,
+        isHovered: boolean,
+    }[];
+    onItemClick: (item: {id: number | string | boolean}) => void,
+}
+
+interface IRadioListFieldPrivateProps extends IFieldHocOutput, IDataProviderHocOutput, IComponentsHocOutput {
+
+}
+
+@field({
+    componentId: 'form.RadioListField'
+})
+@dataProvider()
+@components('ui')
+export default class RadioListField extends React.PureComponent<IRadioListFieldProps & IRadioListFieldPrivateProps> {
+    static defaultProps = {
+        disabled: false,
+        required: false,
+        className: '',
+        errors: []
+    };
+
+    render() {
+        const RadioListFieldView =
+            this.props.view || this.props.ui.getView('form.RadioListFieldView');
+        return (
+            <RadioListFieldView
+                {...this.props}
+                inputProps={{
+                    name: this.props.input.name,
+                    type: 'radio',
+                    ...this.props.inputProps,
+                    disabled: this.props.disabled
+                }}
+                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/RadioListField/demo/disabled.tsx

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

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

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

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

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

package/ui/form/RangeField/RangeField.story.js

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

package/ui/form/RangeField/RangeField.tsx

@@ -0,0 +1,173 @@
+import * as React from 'react';
+import {findDOMNode} from 'react-dom';
+import moment from 'moment';
+import _get from 'lodash-es/get';
+import {components, field} from '../../../hoc';
+import InputField from '../InputField';
+import DateField from '../DateField';
+import {IFieldHocInput, IFieldHocOutput} from '../../../hoc/field';
+import {IComponentsHocOutput} from '../../../hoc/components';
+
+export interface IRangeFieldProps extends IFieldHocInput {
+    attributeFrom?: string;
+    attributeTo?: string;
+    inputFrom?: FormInputType;
+    inputTo?: FormInputType;
+    type?: 'input' | 'date' | string;
+    fieldComponent?: any;
+    placeholderFrom?: string;
+    placeholderTo?: string;
+    fromProps?: any;
+    toProps?: any;
+    className?: CssClassName;
+    view?: CustomView;
+    [key: string]: any;
+}
+
+export interface IRangeFieldViewProps extends IFieldHocOutput {
+    fromField: any,
+    toField: any,
+}
+
+interface IRangeFieldPrivateProps extends IFieldHocOutput, IComponentsHocOutput {
+
+}
+
+const fieldsMap = {
+    input: InputField,
+    date: DateField
+};
+
+@field({
+    componentId: 'form.RangeField',
+    attributes: ['from', 'to']
+})
+@components('ui')
+export default class RangeField extends React.PureComponent<IRangeFieldProps & IRangeFieldPrivateProps> {
+    _timer: any;
+    refTo: any;
+    static defaultProps = {
+        type: 'input',
+        disabled: false,
+        required: false,
+        className: '',
+        placeholderFrom: '',
+        placeholderTo: '',
+        errors: []
+    };
+
+    constructor(props) {
+        super(props);
+        this.refTo = React.createRef();
+        this._timer = null;
+    }
+
+    UNSAFE_componentWillReceiveProps(nextProps) {
+        // Auto focus on set 'from' value
+        if (
+            !this.props.inputFrom.value &&
+            nextProps.inputFrom.value &&
+            !nextProps.inputTo.value
+        ) {
+            this._timer = setTimeout(() => {
+                const inputEl = this.refTo.current.querySelector('input');
+                if (inputEl) {
+                    inputEl.focus();
+                }
+            });
+        }
+    }
+
+    componentWillUnmount() {
+        clearTimeout(this._timer);
+    }
+
+    render() {
+        const RangeFieldView =
+            this.props.view || this.props.ui.getView('form.RangeFieldView');
+        const FieldComponent =
+            this.props.fieldComponent || fieldsMap[this.props.type];
+        const FieldComponentInternal = FieldComponent.WrappedComponent;
+        let fieldProps = {
+            disabled: this.props.disabled,
+            size: this.props.size
+        };
+        let fieldFromProps = {};
+        let fieldToProps = {};
+        switch (this.props.type) {
+            case 'date':
+                const valueFromFormat = _get(
+                    this.props.fromProps,
+                    'valueFormat',
+                    'YYYY-MM-DD'
+                );
+                const valueToFormat = _get(
+                    this.props.toProps,
+                    'valueFormat',
+                    'YYYY-MM-DD'
+                );
+                const from = this.props.inputFrom.value
+                    ? moment(this.props.inputFrom.value, valueFromFormat).toDate()
+                    : undefined;
+                const to = this.props.inputTo.value
+                    ? moment(this.props.inputTo.value, valueToFormat).toDate()
+                    : undefined;
+                const modifiers = {
+                    start: from,
+                    end: to
+                };
+                fieldFromProps = {
+                    ...fieldFromProps,
+                    pickerProps: {
+                        dayPickerProps: {
+                            selectedDays: [from, {from, to}],
+                            disabledDays: {after: to},
+                            toMonth: to,
+                            modifiers,
+                            numberOfMonths: 2
+                        }
+                    }
+                };
+                fieldToProps = {
+                    ...fieldToProps,
+                    pickerProps: {
+                        dayPickerProps: {
+                            selectedDays: [from, {from, to}],
+                            disabledDays: {before: from},
+                            modifiers,
+                            month: from,
+                            fromMonth: from,
+                            numberOfMonths: 2
+                        }
+                    }
+                };
+                break;
+        }
+        return (
+            <RangeFieldView
+                {...this.props}
+                fromField={
+                    <FieldComponentInternal
+                        input={this.props.inputFrom}
+                        placeholder={this.props.placeholderFrom}
+                        {...fieldProps}
+                        {...fieldFromProps}
+                        {...this.props.fromProps}
+                        isInvalid={this.props.isInvalid}
+                    />
+                }
+                toField={
+                    <FieldComponentInternal
+                        ref={this.refTo}
+                        input={this.props.inputTo}
+                        placeholder={this.props.placeholderTo}
+                        {...fieldProps}
+                        {...fieldToProps}
+                        {...this.props.toProps}
+                        isInvalid={this.props.isInvalid}
+                    />
+                }
+            />
+        );
+    }
+}

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import RangeField from '../RangeField';
+
+export default () => (
+    <>
+        <RangeField
+            type='date'
+            label='Date period'
+        />
+    </>
+);

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

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

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

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

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import RangeField from '../RangeField';
+
+export default () => (
+    <>
+        <RangeField
+            label='Placeholders'
+            placeholderFrom='From...'
+            placeholderTo='To...'
+        />
+    </>
+);

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

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

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

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