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

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,
+};

package/ui/form/validate.ts

@@ -0,0 +1,90 @@
+import _isString from 'lodash-es/isString';
+import _isInteger from 'lodash-es/isInteger';
+import _set from 'lodash-es/set';
+import _get from 'lodash-es/get';
+import _isEmpty from 'lodash-es/isEmpty';
+import _size from 'lodash-es/size';
+import _isFunction from 'lodash-es/isFunction';
+import moment from 'moment';
+import {SubmissionError} from 'redux-form';
+
+const validate = function (data, rules) {
+    const errors = {};
+    rules.forEach(item => {
+        const attributes = [].concat(item[0]);
+        const rule = item[1];
+        const params = item[2] || {};
+        attributes.forEach(attribute => {
+            let value = _get(data, attribute);
+            switch (rule) {
+                case 'required':
+                    if (!value) {
+                        errors[attribute] = __('Field is required');
+                    }
+                    break;
+                case 'date':
+                    if (value && !moment(value, 'YYYY-MM-DD').isValid()) {
+                        errors[attribute] = __('Date wrong format');
+                    }
+                    break;
+                case 'integer':
+                case 'number':
+                    if (value) {
+                        if (_isString(value)) {
+                            value = Number(value);
+                        }
+                        if (rule === 'integer' && !_isInteger(value)) {
+                            errors[attribute] = __('Field must be integer');
+                        } else if ((params.min || params.min === 0) && value < params.min) {
+                            errors[attribute] = __('Value is too small, min: {min}', {
+                                min: params.min
+                            });
+                        } else if ((params.max || params.max === 0) && value > params.max) {
+                            errors[attribute] = __('Value is too large, max: {max}', {
+                                max: params.max
+                            });
+                        }
+                    }
+                    break;
+                case 'string':
+                    params.max = params.max || 1000;
+                    if (value) {
+                        if (_isInteger(value)) {
+                            value = String(value);
+                        }
+                        if (!_isString(value)) {
+                            errors[attribute] = __('Field must be string');
+                        } else if (_size(value) > params.max) {
+                            errors[attribute] = __('String is too long, max: {max}', {
+                                max: params.max
+                            });
+                        } else if (
+                            (params.min || params.min === 0) &&
+                            _size(value) < params.min
+                        ) {
+                            errors[attribute] = __('String is too short, min: {min}', {
+                                min: params.min
+                            });
+                        }
+                    }
+                    break;
+            }
+            if (_isFunction(rule)) {
+                const error = rule(data, attribute);
+                if (error) {
+                    errors[attribute] = error;
+                }
+            }
+            _set(data, attribute, value);
+        });
+    });
+    if (!_isEmpty(errors)) {
+        throw new SubmissionError(errors);
+    }
+};
+validate.error = (attribute, message) => {
+    throw new SubmissionError({
+        [attribute]: message
+    });
+};
+export default validate;

package/ui/format/BooleanFormatter/BooleanFormatter.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import {components} from '../../../hoc';
+import {IComponentsHocOutput} from '../../../hoc/components';
+
+export interface IBooleanFormatterProps {
+    value?: string | number | boolean;
+    view?: CustomView;
+    [key: string]: any;
+}
+
+export interface IBooleanFormatterPropsView {
+    value?: string | number | boolean;
+}
+
+@components('ui')
+export default class BooleanFormatter extends React.Component<IBooleanFormatterProps & IComponentsHocOutput> {
+    render() {
+        const BooleanFormatterView = this.props.view || this.props.ui.getView('format.BooleanFormatterView');
+        return <BooleanFormatterView
+            value={this.props.value}
+        />;
+    }
+}

package/ui/format/BooleanFormatter/index.ts

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

package/ui/format/DateFormatter/DateFormatter.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import {components} from '../../../hoc';
+import {IComponentsHocOutput} from '../../../hoc/components';
+
+export interface IDateFormatterProps {
+
+    /**
+     * Формат даты
+     * @example LL
+     */
+    format?: string;
+    view?: CustomView;
+
+    /**
+     * Дата
+     * @example 2023-09-11
+     */
+    value?: any;
+
+    [key: string]: any;
+}
+
+@components('locale','ui')
+export default class DateFormatter extends React.Component<IDateFormatterProps & IComponentsHocOutput> {
+
+    static defaultProps = {
+        format: 'LL'
+    };
+
+    render() {
+        if (!this.props.value) {
+            return null;
+        }
+        const DateFormatterView = this.props.view || this.props.ui.getView('format.DefaultFormatterView');
+        return <DateFormatterView
+            value={this.props.locale.moment(this.props.value).format(this.props.format)}
+        />;
+    }
+
+}

package/ui/format/DateFormatter/demo/basic.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import DateFormatter from '../DateFormatter';
+
+export default () => (
+    <>
+        <DateFormatter
+            value='2018-05-04'
+        />
+    </>
+);

package/ui/format/DateFormatter/index.ts

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

package/ui/format/DateTimeFormatter/DateTimeFormatter.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import moment from 'moment';
+import {components} from '../../../hoc';
+import {IComponentsHocOutput} from '../../../hoc/components';
+
+export interface IDateTimeFormatterProps{
+
+    /**
+     * Формат даты
+     * @example LLL
+     */
+    format?: string;
+
+    /**
+     * Показывать ли дату учитываю временную зону
+     * @example true
+     */
+    timeZone?: string | boolean;
+    view?: CustomView;
+
+    /**
+    * Дата
+    * @example 2023-09-11
+    */
+    value?: any;
+
+    [key: string]: any;
+}
+
+@components('locale','ui')
+export default class DateTimeFormatter extends React.Component<IDateTimeFormatterProps & IComponentsHocOutput> {
+
+    static defaultProps = {
+        format: 'LLL'
+    };
+
+    render() {
+        if (!this.props.value) {
+            return null;
+        }
+        const date =
+            this.props.timeZone === false
+                ? moment(this.props.value).locale(this.props.locale.language)
+                : this.props.locale.moment(this.props.value);
+
+        const DateTimeFormatterView = this.props.view || this.props.ui.getView('format.DefaultFormatterView');
+        return <DateTimeFormatterView
+            value={date.format(this.props.format)}
+        />;
+    }
+
+}

package/ui/format/DateTimeFormatter/demo/basic.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import DateTimeFormatter from '../DateTimeFormatter';
+
+export default () => (
+    <>
+        <DateTimeFormatter
+            value='2018-05-04 16:15:00'
+        />
+    </>
+);

package/ui/format/DateTimeFormatter/index.ts

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

package/ui/format/EnumFormatter/EnumFormatter.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import {connect} from 'react-redux';
+import _isArray from 'lodash-es/isArray';
+import _isString from 'lodash-es/isString';
+import _isFunction from 'lodash-es/isFunction';
+import _isObject from 'lodash-es/isObject';
+import {getEnumLabels} from '../../../reducers/fields';
+import {components} from '../../../hoc';
+import {IComponentsHocOutput} from '../../../hoc/components';
+
+export interface IEnumFormatterProps {
+
+    /**
+     * Перечисление элементов.
+     * 1) Может быть строкой вида: `app.geo.enums.Cities`
+     * 2) Массивом: [{id: 1, label: "London"}]
+     */
+    items?: string
+        | {id: number | string, label: string}[]
+        | {getLabel: () => string | any};
+
+    /**
+     * Уникальный идентификатор элемента из `items`
+     * @example unique label
+     */
+    value?: number | string,
+    view?: CustomView;
+    [key: string]: any;
+}
+
+/**
+ * @param {array|function} items
+ * @param {string|number} id
+ * @returns {*}
+ */
+export const getLabel = (items, id) => {
+    // Array
+    if (_isArray(items)) {
+        const foundItem = items.find(item => item.id === id);
+        return foundItem ? foundItem.label : null;
+    }
+    // Enum
+    if (_isObject(items) && _isFunction(items.getLabel)) {
+        return items.getLabel(id);
+    }
+    return null;
+};
+
+@connect((state, props) => ({
+    items: _isString(props.items)
+        ? getEnumLabels(state, props.items)
+        : props.items
+}))
+@components('ui')
+export default class EnumFormatter extends React.Component<IEnumFormatterProps & IComponentsHocOutput> {
+    render() {
+        const EnumFormatterView = this.props.view || this.props.ui.getView('format.DefaultFormatterView');
+        return <EnumFormatterView
+            value={getLabel(this.props.items, this.props.value)}
+        />;
+    }
+}

package/ui/format/EnumFormatter/index.ts

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

package/ui/format/FileSize/FileSize.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import {components} from '../../../hoc';
+import {IComponentsHocOutput} from '../../../hoc/components';
+
+export interface IFileSizeFormatterProps {
+
+    /**
+     * Если не указан размер файла, то в случае, если showZero = true
+     * то будет показан `0`, иначе пустая строка
+     * @example true
+     */
+    showZero?: boolean;
+    view?: CustomView;
+
+    /**
+     * Размер файла
+     * @example 6920
+     */
+    value?: any;
+
+    [key: string]: any;
+}
+
+@components('ui')
+export default class FileSize extends React.Component<IFileSizeFormatterProps & IComponentsHocOutput> {
+
+    static asHumanFileSize(bytes, showZero) {
+        if (!bytes) {
+            return showZero ? '0' : '';
+        }
+        const thresh = 1000;
+        if (Math.abs(bytes) < thresh) {
+            return bytes + ' ' + __('B');
+        }
+        const units = [
+            __('kB'),
+            __('MB'),
+            __('GB'),
+            __('TB'),
+            __('PB'),
+            __('EB'),
+            __('ZB'),
+            __('YB')
+        ];
+        let u = -1;
+        do {
+            bytes /= thresh;
+            ++u;
+        } while (Math.abs(bytes) >= thresh && u < units.length - 1);
+        return bytes.toFixed(1) + ' ' + units[u];
+    }
+
+    render() {
+        const FileSizeFormatterView = this.props.view || this.props.ui.getView('format.DefaultFormatterView');
+        return <FileSizeFormatterView
+            value={ FileSize.asHumanFileSize(this.props.value, this.props.showZero)}
+        />;
+    }
+
+}

package/ui/format/FileSize/index.ts

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

package/ui/format/Format/Format.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import _get from 'lodash-es/get';
+import _isObject from 'lodash-es/isObject';
+import _isFunction from 'lodash-es/isFunction';
+import _isString from 'lodash-es/isString';
+import {components} from '../../../hoc';
+import {FormContext} from '../../../hoc/form';
+import {IComponentsHocOutput} from '../../../hoc/components';
+
+export interface IFormatProps {
+    attribute?: string;
+    model?: string | ((...args: any[]) => any) | any;
+    item?: any;
+    component?: string | ((...args: any[]) => any);
+    getFormatter?: any;
+    ui?: any;
+    emptyText?: any;
+    [key: string]: any;
+}
+
+interface IFormatPrivateProps extends IComponentsHocOutput {}
+
+export function getFormatterPropsFromModel(model, attribute) {
+    if (!model || !attribute) {
+        return null;
+    }
+    if (_isFunction(model.formatters)) {
+        return model.formatters()[attribute] || null;
+    }
+    if (_isObject(model.formatters)) {
+        return model.formatters[attribute] || null;
+    }
+    return null;
+}
+
+@components('ui')
+export default class Format extends React.Component<IFormatProps & IFormatPrivateProps> {
+
+    static WrappedComponent: any;
+
+    render() {
+      return (
+          <FormContext.Consumer>
+            {context => this.renderContent(context)}
+          </FormContext.Consumer>
+      )
+    }
+
+    renderContent(context) {
+        let props = this.props;
+        // Get field config from model
+        const model = this.props.model || context.model;
+        props = {
+            ...getFormatterPropsFromModel(model, this.props.attribute),
+            ...props
+        };
+        const ComponentField = _isString(props.component)
+            ? this.props.ui.getFormatter('format.' + props.component)
+            : props.component;
+        const resultValue = _get(this.props.item, this.props.attribute) || this.props.emptyText || null;
+        if (ComponentField) {
+            return (
+                <ComponentField
+                    {...props}
+                    value={resultValue}
+                />
+            );
+        }
+
+        let FormatDefaultView = null;
+        try {
+            FormatDefaultView = this.props.ui.getView('format.DefaultFormatterView');
+        } catch (e) {
+        }
+
+        return FormatDefaultView
+            ? <FormatDefaultView>{resultValue}</FormatDefaultView>
+            : resultValue;
+    }
+}

package/ui/format/Format/index.ts

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

package/ui/format/MoneyFormatter/MoneyFormatter.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import _round from 'lodash-es/round';
+import {components} from '../../../hoc';
+import {IComponentsHocOutput} from '../../../hoc/components';
+
+export interface IMoneyFormatterProps {
+
+    /**
+     * Валюта @enum {eur, rub, usd}
+     * @example rub
+     */
+    currency?: string;
+
+    /**
+     * Округление числа
+     * @example 2
+     */
+    scale?: number;
+
+    /**
+     * Разрядность (при передаче int в значении)
+     * @example 2
+     */
+    precision?: number;
+
+
+    view?: CustomView;
+    value?: any;
+    [key: string]: any;
+}
+
+export const moneyFormat = (amount, currency, scale) => {
+    const symbols = {
+        eur: __('€'),
+        rub: __('₽'),
+        usd: __('$')
+    };
+    return __('{amount, number} {symbol}', {
+        amount: _round(amount, scale),
+        symbol: symbols[currency] || currency.toUpperCase()
+    });
+}
+
+@components('ui')
+export default class MoneyFormatter extends React.Component<IMoneyFormatterProps & IComponentsHocOutput> {
+
+    static defaultProps = {
+        scale: 2,
+        precision: 0,
+    };
+
+    render() {
+        const MoneyFormatterView = this.props.view || this.props.ui.getView('format.DefaultFormatterView');
+        const value = this.props.precision > 0
+            ? this.props.value / Math.pow(10, this.props.precision)
+            : this.props.value;
+
+        return <MoneyFormatterView
+            value={moneyFormat(
+                value,
+                this.props.currency,
+                this.props.scale
+            )}
+        />;
+    }
+
+}

package/ui/format/MoneyFormatter/index.ts

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

package/ui/format/PhotosFormatter/PhotosFormatter.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import {IComponentsHocOutput} from '../../../hoc/components';
+import {components} from "../../../hoc";
+
+export interface IPhotosFormatterProps {
+    value?: {
+        /**
+         * Уникальный текстовый идентификатор
+         * @example e65f5867-0083-48a7-af43-1121ed9e6280
+         */
+        uid?: number,
+        src?: string,
+
+        /**
+         * Url thumbnail картинки
+         * @example assets/apple.thumbnail.png
+         */
+        thumbnail?: string,
+
+        /**
+         * Ширина thumbnail картинки
+         * @example 1920
+         */
+        thumbnailWidth?: number,
+
+        /**
+         * Высота thumbnail картинки
+         * @example 1080
+         */
+        thumbnailHeight?: number
+    }[];
+    photoRowHeight?: number;
+    videoRowHeight?: number;
+    view?: CustomView;
+    [key: string]: any;
+}
+
+export interface IPhotosFormatterViewProps extends IPhotosFormatterProps {
+
+}
+
+@components('ui')
+export default class PhotosFormatter extends React.Component<IPhotosFormatterProps & IComponentsHocOutput> {
+
+    static defaultProps = {
+        photoRowHeight: 120
+    };
+
+    render() {
+        // TODO react-grid-gallery library now is not supported! We need implement our gallery with blackjack and hookers 8<)
+        const photos = this.props.value;
+        if (!photos || photos.length === 0) {
+        return null;
+        }
+
+        const PhotoFormatterView = this.props.view || this.props.ui.getView('format.PhotosFormatterView');
+        return <PhotoFormatterView
+            value={photos}
+            photoRowHeight={this.props.photoRowHeight}
+        />;
+    }
+
+}

package/ui/format/PhotosFormatter/index.ts

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