@steroidsjs/core 2.3.0-beta.3 → 2.3.0-beta.5

package/src/ui/form/TimeField/demo/icon.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import TimeField from '../TimeField';
+
+/**
+ * Кастомная иконка справа в инпуте для удаления значения
+ * @order 5
+ * @col 3
+ */
+
+export default () => (
+    <>
+        <TimeField icon='utensils' />
+    </>
+);

package/src/ui/form/TimeField/demo/noBorder.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import TimeField from '../TimeField';
+
+/**
+ * Без рамок
+ * @order 7
+ * @col 3
+ */
+
+export default () => (
+    <>
+        <TimeField label='noBorder' noBorder />
+    </>
+);

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import TimeField from '../TimeField';
+
+/**
+ * Сообщение пользователю для заполнения по контексту использования.
+ * @order 5
+ * @col 3
+ */
+
+export default () => (
+    <>
+        <TimeField
+            label='Placeholder'
+            placeholder='Placeholder...'
+        />
+    </>
+);

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import TimeField from '../TimeField';
+
+/**
+ * Как обязательное поле для заполнения.
+ * @order 3
+ * @col 3
+ */
+
+export default () => (
+    <>
+        <TimeField
+            label='Required'
+            required
+        />
+    </>
+);

package/src/ui/form/TimeField/demo/showRemove.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import TimeField from '../TimeField';
+
+/**
+ * После выбора времени при наведении на иконку иконка меняется на кнопку для очищении значения.
+ * @order 8
+ * @col 3
+ */
+
+export default () => (
+    <>
+        <TimeField label='showRemove' showRemove />
+    </>
+);

package/src/ui/form/TimeField/index.ts

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

package/src/ui/form/index.ts

@@ -0,0 +1,87 @@
+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 DateRangeField from './DateRangeField';
+import DateTimeField from './DateTimeField';
+import DateTimeRangeField from './DateTimeRangeField';
+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 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,
+    DateRangeField,
+    DateTimeField,
+    DateTimeRangeField,
+    DropDownField,
+    Field,
+    FieldLayout,
+    FieldList,
+    FieldSet,
+    FileField,
+    Form,
+    HtmlField,
+    InputField,
+    NavField,
+    NumberField,
+    PasswordField,
+    RadioListField,
+    ReCaptchaField,
+    SliderField,
+    SwitcherField,
+    TextField,
+    TimeField,
+};
+
+export default {
+    AutoCompleteField,
+    BlankField,
+    Button,
+    CheckboxField,
+    CheckboxListField,
+    DateField,
+    DateRangeField,
+    DateTimeField,
+    DateTimeRangeField,
+    DropDownField,
+    Field,
+    FieldLayout,
+    FieldList,
+    FieldSet,
+    FileField,
+    Form,
+    HtmlField,
+    InputField,
+    NavField,
+    NumberField,
+    PasswordField,
+    RadioListField,
+    ReCaptchaField,
+    SliderField,
+    SwitcherField,
+    TextField,
+    TimeField,
+};

package/src/ui/form/validate.ts

@@ -0,0 +1,91 @@
+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';
+
+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)) {
+        // TODO
+        // throw new SubmissionError(errors);
+    }
+};
+validate.error = (attribute, message) => {
+    // TODO
+    // throw new SubmissionError({
+    //     [attribute]: message
+    // });
+};
+export default validate;

package/src/ui/format/BooleanFormatter/BooleanFormatter.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {useComponents} from '../../../hooks';
+
+export interface IBooleanFormatterProps {
+    value?: string | number | boolean;
+    view?: CustomView;
+
+    [key: string]: any;
+}
+
+export interface IBooleanFormatterPropsView {
+    value?: string | number | boolean;
+    children?: React.ReactNode,
+}
+
+export default function BooleanFormatter(props: IBooleanFormatterProps): JSX.Element {
+    return useComponents().ui.renderView(props.view || 'format.BooleanFormatterView', {
+        value: props.value,
+    });
+}

package/src/ui/format/BooleanFormatter/index.ts

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

package/src/ui/format/DateFormatter/DateFormatter.tsx

@@ -0,0 +1,34 @@
+import {useComponents} from '../../../hooks';
+
+export interface IDateFormatterProps {
+
+    /**
+     * Формат даты
+     * @example LL
+     */
+    format?: string;
+    view?: CustomView;
+
+    /**
+     * Дата
+     * @example 2023-09-11
+     */
+    value?: any;
+
+    [key: string]: any;
+}
+
+const defaultProps = {
+    format: 'LL',
+};
+
+export default function DateFormatter(props: IDateFormatterProps): JSX.Element {
+    const components = useComponents();
+
+    if (!props.value) {
+        return null;
+    }
+    return components.ui.renderView(props.view || 'format.DefaultFormatterView', {
+        value: components.locale.moment(props.value).format(props.format || defaultProps.format),
+    });
+}

package/src/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/src/ui/format/DateFormatter/index.ts

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

package/src/ui/format/DateTimeFormatter/DateTimeFormatter.tsx

@@ -0,0 +1,48 @@
+import moment from 'moment';
+import {useComponents} from '../../../hooks';
+import {IDateFormatterProps} from '../DateFormatter/DateFormatter';
+
+export interface IDateTimeFormatterProps {
+    /**
+     * Формат даты
+     * @example LLL
+     */
+    format?: string;
+
+    /**
+     * Показывать ли дату учитываю временную зону
+     * @example true
+     */
+    timeZone?: string | boolean;
+    view?: CustomView;
+
+    /**
+     * Дата
+     * @example 2023-09-11
+     */
+    value?: any;
+
+    [key: string]: any;
+}
+
+function DateTimeFormatter(props: IDateFormatterProps): JSX.Element {
+    const components = useComponents();
+
+    if (!props.value) {
+        return null;
+    }
+
+    const date = props.timeZone === false
+        ? moment(props.value).locale(components.locale.language)
+        : components.locale.moment(props.value);
+
+    return components.ui.renderView(props.view || 'format.DefaultFormatterView', {
+        value: date.format(props.format),
+    });
+}
+
+DateTimeFormatter.defaultProps = {
+    format: 'LLL',
+};
+
+export default DateTimeFormatter;

package/src/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/src/ui/format/DateTimeFormatter/index.ts

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

package/src/ui/format/EnumFormatter/EnumFormatter.tsx

@@ -0,0 +1,51 @@
+import _isArray from 'lodash-es/isArray';
+import _isFunction from 'lodash-es/isFunction';
+import _isObject from 'lodash-es/isObject';
+import {useComponents, useDataProvider} from '../../../hooks';
+import {DataProviderItems} from '../../../hooks/useDataProvider';
+
+export interface IEnumFormatterProps {
+
+    /**
+     * Перечисление элементов.
+     * 1) Может быть строкой вида: `app.geo.enums.Cities`
+     * 2) Массивом: [{id: 1, label: "London"}]
+     */
+    items?: DataProviderItems;
+
+    /**
+     * Уникальный идентификатор элемента из `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;
+};
+
+export default function EnumFormatter(props: IEnumFormatterProps): JSX.Element {
+    const components = useComponents();
+    const {items} = useDataProvider({items: props.items});
+
+    return components.ui.renderView(props.view || 'format.DefaultFormatterView', {
+        value: getLabel(items, props.value),
+    });
+}

package/src/ui/format/EnumFormatter/index.ts

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

package/src/ui/format/FileSize/FileSize.tsx

@@ -0,0 +1,52 @@
+import {useComponents} from '../../../hooks';
+
+export interface IFileSizeFormatterProps {
+
+    /**
+     * Если не указан размер файла, то в случае, если showZero = true
+     * то будет показан `0`, иначе пустая строка
+     * @example true
+     */
+    showZero?: boolean;
+    view?: CustomView;
+
+    /**
+     * Размер файла
+     * @example 6920
+     */
+    value?: any;
+
+    [key: string]: any;
+}
+
+export const 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 += 1;
+    } while (Math.abs(bytes) >= thresh && u < units.length - 1);
+    return bytes.toFixed(1) + ' ' + units[u];
+};
+
+export default function FileSize(props: IFileSizeFormatterProps): JSX.Element {
+    return useComponents().ui.renderView(props.view || 'format.DefaultFormatterView', {
+        value: asHumanFileSize(props.value, this.props.showZero),
+    });
+}

package/src/ui/format/FileSize/index.ts

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

package/src/ui/format/Format/Format.tsx

@@ -0,0 +1,45 @@
+import _get from 'lodash-es/get';
+import _isObject from 'lodash-es/isObject';
+import _isString from 'lodash-es/isString';
+import {useContext} from 'react';
+import useModel from '../../../hooks/useModel';
+import {useComponents} from '../../../hooks';
+import {FormContext} from '../../form/Form/Form';
+
+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;
+}
+
+export function getFormatterPropsFromModel(model, attribute) {
+    if (!model || !attribute) {
+        return null;
+    }
+
+    const attributeMeta = model?.attributes.find(item => item.attribute === attribute);
+    return attributeMeta?.formatter || null;
+}
+
+export default function Format(props: IFormatProps): JSX.Element {
+    const context = useContext(FormContext);
+    const components = useComponents();
+
+    // Get field config from model
+    const model = useModel(props.model || context?.model);
+    let component = props.component || getFormatterPropsFromModel(model, props.attribute);
+    if (_isString(component)) {
+        component = components.ui.getFormatter('format.' + component);
+    }
+
+    return components.ui.renderView(component || 'format.DefaultFormatterView', {
+        ...props,
+        value: _get(props.item, props.attribute) || props.emptyText || null,
+    });
+}

package/src/ui/format/Format/index.ts

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

package/src/ui/format/MoneyFormatter/MoneyFormatter.tsx

@@ -0,0 +1,60 @@
+import _round from 'lodash-es/round';
+import {useComponents} from '../../../hooks';
+
+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(),
+    });
+};
+
+function MoneyFormatter(props: IMoneyFormatterProps): JSX.Element {
+    const value = props.precision > 0
+        ? props.value / 10 ** props.precision
+        : props.value;
+
+    return useComponents().ui.renderView(props.view || 'format.DefaultFormatterView', {
+        value: moneyFormat(
+            value,
+            props.currency,
+            props.scale,
+        ),
+    });
+}
+
+MoneyFormatter.defaultProps = {
+    scale: 2,
+    precision: 0,
+};
+
+export default MoneyFormatter;

package/src/ui/format/MoneyFormatter/index.ts

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

package/src/ui/format/index.ts

@@ -0,0 +1,27 @@
+import BooleanFormatter from './BooleanFormatter';
+import DateFormatter from './DateFormatter';
+import DateTimeFormatter from './DateTimeFormatter';
+import EnumFormatter from './EnumFormatter';
+import FileSize from './FileSize';
+import MoneyFormatter from './MoneyFormatter';
+// import PhotosFormatter from './PhotosFormatter';
+
+export {
+    BooleanFormatter,
+    DateFormatter,
+    DateTimeFormatter,
+    EnumFormatter,
+    FileSize,
+    MoneyFormatter,
+    // PhotosFormatter,
+};
+
+export default {
+    BooleanFormatter,
+    DateFormatter,
+    DateTimeFormatter,
+    EnumFormatter,
+    FileSize,
+    MoneyFormatter,
+    // PhotosFormatter,
+};