@steroidsjs/core 2.2.87 → 2.3.0-beta.1

package/src/ui/form/Form/demo/inline.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import {DropDownField} from '../../../form';
+import Form from '../Form';
+import DateField from '../../DateField';
+import InputField from '../../InputField';
+
+/**
+ * Обычный пример использования с Form в одну строку с использованием layout='inline'.
+ * @order 3
+ * @col 12
+ */
+
+export default () => (
+    <>
+        <Form
+            formId='TestForm'
+            useRedux
+            syncWithAddressBar
+            autoFocus
+            layout='inline'
+            size='large'
+            fields={[
+                {
+                    component: DropDownField,
+                    attribute: 'email',
+                },
+                {
+                    component: InputField,
+                    attribute: 'message',
+                },
+                {
+                    component: DateField,
+                    attribute: 'date',
+                },
+            ]}
+            submitLabel='Submit'
+            validators={[['Email', 'required']]}
+        />
+    </>
+);

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

@@ -0,0 +1,3 @@
+import Form from './Form';
+
+export default Form;

package/src/ui/form/HtmlField/HtmlField.test.tsx

@@ -0,0 +1,53 @@
+import 'jest-enzyme';
+import HtmlFieldView from '@steroidsjs/bootstrap/form/HtmlField/HtmlFieldView';
+import HtmlField from './HtmlField';
+import mountWithApp from '../../../../tests/mountWithApp';
+
+describe('HtmlField tests', () => {
+    /* @todo we don't want to test CKEditor, consider testing only props that are passed to the HtmlFieldView */
+    xit('should render something without props', () => {
+        const wrapper = mountWithApp(HtmlField, {view: HtmlFieldView});
+        expect(wrapper).not.toBeEmptyRender();
+    });
+
+    // describe('Static props', () => {
+    //     const props = {
+    //         className: 'test',
+    //         dark: true,
+    //         disabled: true,
+    //         error: ['Error text'],
+    //         placeholder: 'test',
+    //         required: true,
+    //     };
+    //
+    //     const wrapper = mountWithApp(HtmlField, {...props, view: HtmlFieldView});
+    //
+    //     it('should static props transmitted unchanged', () => {
+    //         expect(wrapper.find('HtmlField')).toHaveProp(props);
+    //     });
+    //     it('should have right external className', () => {
+    //         expect(wrapper.find('HtmlField')).toHaveClassName(props.className);
+    //     });
+    //     it('should have dark mod', () => {
+    //         expect(wrapper.find('HtmlField')).toHaveProp('dark', props.dark);
+    //     });
+    //     it('should have right placeholder', () => {
+    //         expect(wrapper.find('HtmlField')).toHaveProp('placeholder', props.placeholder);
+    //     });
+    //     it('should be disabled', () => {
+    //         expect(wrapper.find('HtmlField')).toBeDisabled();
+    //     });
+    // });
+
+    /// TODO Doesn't work now.
+    // console.log:
+    //              Found node output: <div class="HtmlFieldView"><div></div></div>
+
+    // describe('Action', () => {
+    //     it('should value change', () => {
+    //         const wrapper = mountWithApp(HtmlField, {view: HtmlFieldView});
+    //         wrapper.find('HtmlField').simulate('change', {target: {value: 'test'}});
+    //         expect(wrapper.find('HtmlField')).toHaveClassName('ck-blurred');
+    //     });
+    // });
+});

package/src/ui/form/HtmlField/HtmlField.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import {useCallback, useMemo} from 'react';
+import _merge from 'lodash-es/merge';
+import {useComponents} from '../../../hooks';
+import fieldWrapper, {
+    IFieldWrapperInputProps,
+    IFieldWrapperOutputProps,
+} from '../Field/fieldWrapper';
+
+/**
+ * HtmlField
+ * Компонент для создания HTML-разметки, использующий WYSIWYG-реадактор
+ */
+export interface IHtmlFieldProps extends IFieldWrapperInputProps, IFieldWrapperOutputProps {
+
+    /**
+     * Конфигурация wysiwyg реадактора
+     */
+    editorProps?: any,
+
+    /**
+     * Дополнительный CSS-класс
+     */
+    className?: CssClassName,
+
+    /**
+     * Url на который будет отправлена форма загрузки файла
+     * @example /api/v1/upload-files
+     */
+    uploadUrl?: string,
+
+    /**
+     * После загрузки изображения на сервер,
+     * можно указать с каким процессором должно вернуться картинка
+     * @example origin
+     */
+    uploadImagesProcessor?: string,
+
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: CustomView,
+
+    /**
+     * Обработчик события при фокусе на редактора
+     * @param event
+     */
+    onFocus?: (event: any) => any,
+
+    /**
+     * Обработчик события при снятии фокуса с редактора
+     * @param event
+     */
+    onBlur?: (event: any) => any,
+
+    [key: string]: any,
+}
+
+export interface IHtmlFieldViewProps extends IHtmlFieldProps {
+    onChange: (event: any, editor: any) => void,
+}
+
+function HtmlField(props: IHtmlFieldProps): JSX.Element {
+    const components = useComponents();
+
+    const onFocus = useCallback((event) => {
+        if (props.onFocus) {
+            props.onFocus(event);
+        }
+    }, [props]);
+    const onBlur = useCallback((event) => {
+        if (props.onBlur) {
+            props.onBlur(event);
+        }
+    }, [props]);
+    const onChange = useCallback((event, editor) => {
+        props.input.onChange(editor.getData());
+    }, [props.input]);
+
+    const {uploadUrl, uploadImagesProcessor} = props;
+
+    const editorProps = useMemo(() => _merge(
+        {
+            image: {
+                upload: {
+                    types: ['jpeg', 'png', 'gif', 'jpg', 'svg'],
+                },
+            },
+            simpleUpload: {
+                uploadUrl: uploadUrl + (uploadImagesProcessor
+                    ? '?imagesProcessor=' + uploadImagesProcessor
+                    : ''),
+            },
+        },
+        props.editorProps,
+    ), [props.editorProps, uploadUrl, uploadImagesProcessor]);
+
+    return components.ui.renderView(props.view || 'form.HtmlFieldView', {
+        onFocus,
+        onBlur,
+        onChange,
+        ...props,
+        editorProps,
+    });
+}
+
+HtmlField.defaultProps = {
+    disabled: false,
+    className: '',
+};
+
+export default fieldWrapper<IHtmlFieldProps>('HtmlField', HtmlField);

package/src/ui/form/HtmlField/demo/basic.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import HtmlField from '../HtmlField';
+
+/**
+ * Обычный пример использования HtmlField.
+ * @order 1
+ * @col 12
+ */
+
+export default () => (
+    <>
+        <HtmlField
+            label='Article content'
+            uploadUrl='/api/v1/file-test'
+            uploadImagesProcessor='original'
+        />
+    </>
+);

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

@@ -0,0 +1,3 @@
+import HtmlField from './HtmlField';
+
+export default HtmlField;

package/src/ui/form/ImageField/ImageField.tsx

@@ -0,0 +1,234 @@
+import * as React from 'react';
+import File from 'fileup-core/lib/models/File';
+import _first from 'lodash-es/first';
+import _values from 'lodash-es/values';
+import {useMemo, useCallback, useState, useEffect} from 'react';
+import _uniqueId from 'lodash-es/uniqueId';
+import ReactCropProps, {Crop} from 'react-image-crop';
+import {useComponents} from '../../../hooks';
+import {IModalProps} from '../../modal/Modal/Modal';
+import useDispatch from '../../../hooks/useDispatch';
+import useFile from '../../../hooks/useFile';
+import fieldWrapper, {IFieldWrapperInputProps, IFieldWrapperOutputProps} from '../Field/fieldWrapper';
+import {IFileHocInput, IFileHocOutput} from '../../../hoc/file';
+import {openModal} from '../../../actions/modal';
+
+export interface ICropInputProps {
+    /**
+     * Изначальные параметры обрезки изображения
+     * @example {unit: 'px', aspect: 1, x: 0, y: 0, width: 200, height: 200}
+     */
+    initialValues?: Crop,
+
+    /**
+     * Экшн для отправки параметров обрезки на бэкенд
+     * @example '/api/v1/user/avatar/crop'
+     */
+    backendUrl?: string,
+
+    /**
+     * Пропсы для модуля react-image-crop
+     * @example {maxWidth: 400, maxHeight: 400}
+     */
+    reactImageCropProps?: ReactCropProps
+}
+
+export interface IImageFieldProps extends IFieldWrapperInputProps,
+    Omit<IFileHocInput, 'multiple' | 'imagesOnly'>, IFileHocOutput {
+
+    /**
+     * Дополнительный CSS-класс для компонента
+     */
+    className?: CssClassName;
+
+    /**
+     * Переопределение внешнего вида компонента
+     * @example MyCustomView
+     */
+    view?: CustomView;
+
+    /**
+     * Переопределение внешнего вида модального окна
+     * @example MyCustomModalView
+     */
+    modalView?: CustomView;
+
+    /**
+     * Пропсы для модального окна
+     */
+    modalProps?: IModalProps;
+
+    /**
+     * Параметры обрезки
+     */
+    crop?: ICropInputProps,
+
+    /**
+     * Название кнопки
+     * @example 'Загрузить'
+     */
+    label?: string,
+
+    [key: string]: any;
+}
+
+export interface ICropOutputProps extends ICropInputProps {
+    onSubmit: (crop: Crop, imageId: any) => void
+}
+
+export interface IImageFieldModalViewProps extends IModalProps {
+    crop: ICropOutputProps,
+    image: Record<string, any>,
+}
+
+export interface IImageFieldViewProps extends IImageFieldProps {
+    item: {
+        uid?: string,
+        fileId?: number | string,
+        title?: string,
+        size: number | string,
+        disabled?: boolean,
+        onRemove?: () => void,
+        error?: string,
+        image?: {
+            url: string,
+            width: string,
+            height: string,
+        },
+        progress?: {
+            bytesUploaded: number,
+            percent: number,
+        },
+    },
+    onClick: () => void
+}
+
+function ImageField(props: IImageFieldProps & IFieldWrapperOutputProps): JSX.Element {
+    const components = useComponents();
+    const dispatch = useDispatch();
+
+    // Add cropping option
+    const [croppedImage, setCroppedImage] = useState(null);
+    const modalId = useMemo(() => props.modalProps?.modalId || _uniqueId('cropModal'), [props.modalProps.modalId]);
+    const ImageFieldModalVIew = props.modalView || components.ui.getView('form.ImageFieldModalView');
+    const responseParser = useCallback(text => {
+        let data = null;
+        try {
+            data = JSON.parse(text);
+            dispatch(openModal(ImageFieldModalVIew, {
+                modalId,
+                ...props.modalProps,
+                crop: {
+                    ...props.crop,
+                    onSubmit: (crop, imageId) => setCroppedImage({...crop, id: imageId}),
+                },
+                image: _first(data) || data,
+            }));
+            // eslint-disable-next-line no-empty
+        } catch (e) {}
+        return data;
+    }, [ImageFieldModalVIew, modalId, dispatch, props.crop, props.modalProps]);
+
+    const {files, onBrowse, onRemove, onAdd} = useFile({
+        ...props,
+        multiple: false,
+        imagesOnly: true,
+        uploader: {
+            uploaderConfigs: {
+                xhr: {
+                    responseParser: props.crop ? responseParser : null,
+                },
+            },
+            ...props.uploader,
+        },
+    });
+
+    // Fetch cropped image
+    useEffect(() => {
+        if (croppedImage) {
+            components.http.post(props.crop.backendUrl, croppedImage).then((res: any) => {
+                setCroppedImage(null);
+                onAdd(new File({
+                    path: res.title || res.label || res.uid || res.id,
+                    status: File.STATUS_END,
+                    result: File.RESULT_SUCCESS,
+                    resultHttpStatus: 200,
+                    resultHttpMessage: res,
+                    uid: res.uid,
+                }));
+            });
+        }
+    }, [components.http, croppedImage, onAdd, onRemove, props.crop.backendUrl]);
+
+    const ImageFieldView = props.view || components.ui.getView('form.ImageFieldView');
+
+    const item = useMemo(() => {
+        let result = null;
+        const _file = _first(files);
+
+        if (_file) {
+            const data = _file.getResultHttpMessage() || {};
+            result = {
+                uid: _file.getUid(),
+                fileId: data.id || null,
+                title: _file.getName(),
+                size: props.size,
+                disabled: props.disabled,
+                onRemove: () => onRemove(_file),
+                error: null,
+                image: null,
+                progress: null,
+            };
+            // Add error
+            if (_file.getResult() === File.RESULT_ERROR) {
+                if (typeof _file.getResultHttpMessage() === 'string'
+                    && _file.getResultHttpMessage().substr(0, 1) === '{') {
+                    const errorResponse = JSON.parse(_file.getResultHttpMessage());
+                    result.error = errorResponse.error || errorResponse.message || __('Ошибка');
+                } else {
+                    result.error = _file.getResultHttpMessage()
+                        ? JSON.stringify(_file.getResultHttpMessage())
+                        : __('Ошибка');
+                }
+            }
+            // Add thumbnail image
+            if (data.images) {
+                // Image object has properties: url, width, height
+                result.image = data.images[props.imagesProcessor]
+                    || _first(_values(data.images));
+            }
+            // Add progress
+            if (_file.getStatus() === File.STATUS_PROCESS) {
+                result.progress = {
+                    bytesUploaded: _file.getBytesUploaded(),
+                    percent: _file.progress.getPercent(),
+                };
+            }
+        }
+
+        return result;
+    }, [files, onRemove, props.disabled, props.imagesProcessor, props.size]);
+
+    return (
+        <ImageFieldView
+            {...props}
+            item={item}
+            onClick={onBrowse}
+        />
+    );
+}
+
+ImageField.defaultProps = {
+    disabled: false,
+    required: false,
+    className: '',
+    modalProps: {},
+    label: 'Upload',
+    crop: {
+        initialValues: {
+            aspect: 1,
+        },
+    },
+};
+
+export default fieldWrapper<IImageFieldProps>('ImageField', ImageField);

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

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

package/src/ui/form/InputField/InputField.story.js

@@ -0,0 +1,27 @@
+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 sizes from './demo/sizes';
+import types from './demo/types';
+import addons from './demo/addons';
+import textAddons from './demo/textAddons';
+import mask from './demo/mask';
+
+export default {
+  title: 'form.InputField',
+};
+
+export {
+    basic,
+    disabled,
+    errors,
+    placeholder,
+    required,
+    sizes,
+    types,
+    addons,
+    textAddons,
+    mask
+}

package/src/ui/form/InputField/InputField.test.tsx

@@ -0,0 +1,60 @@
+import 'jest-enzyme';
+import React from 'react';
+import InputFieldView from '@steroidsjs/bootstrap/form/InputField/InputFieldView';
+import InputField from './InputField';
+import mountWithApp from '../../../../tests/mountWithApp';
+
+describe('InputField tests', () => {
+    it('should render something without props', () => {
+        const wrapper = mountWithApp(InputField, {view: InputFieldView});
+        expect(wrapper).not.toBeEmptyRender();
+    });
+
+    describe('Static props', () => {
+        const props = {
+            type: 'password',
+            disabled: true,
+            required: true,
+            className: 'test',
+            placeholder: 'test',
+            //errors: [{foo: 'bar'}], TODO: add test 'should have right is-invalid modifier'
+            style: {width: '120px'},
+        };
+
+        const wrapper = mountWithApp(InputField, {...props, view: InputFieldView});
+
+        it('should static props transmitted unchanged', () => {
+            expect(wrapper.find('InputField')).toHaveProp(props);
+        });
+        it('should have right type', () => {
+            expect(wrapper.find('input')).toHaveProp('type', props.type);
+        });
+        it('should have right placeholder', () => {
+            expect(wrapper.find('input')).toHaveProp('placeholder', props.placeholder);
+        });
+        it('should have right external style', () => {
+            expect(wrapper.find('InputField')).toHaveProp('style', props.style);
+        });
+        it('should have right external className', () => {
+            expect(wrapper.find('InputField')).toHaveClassName(props.className);
+        });
+        it('should be disabled ', () => {
+            expect(wrapper.find('input')).toBeDisabled();
+        });
+    });
+
+    describe('Conditional props', () => {
+        it('should render empty with type "hidden"', () => {
+            const wrapper = mountWithApp(InputField, {type: 'hidden', view: InputFieldView});
+            expect(wrapper).toBeEmptyRender();
+        });
+    });
+
+    describe('Actions', () => {
+        it('should value change', () => {
+            const wrapper = mountWithApp(InputField, {view: InputFieldView});
+            wrapper.find('input').simulate('change', { target: { value: 'test' } });
+            expect(wrapper.find('input')).toHaveProp('value', 'test');
+        });
+    });
+});