@steroidsjs/core 2.3.0-beta.1 → 2.3.0-beta.2

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

@@ -1,40 +0,0 @@
-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

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

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

@@ -1,53 +0,0 @@
-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

@@ -1,113 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

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

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

@@ -1,234 +0,0 @@
-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

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

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

@@ -1,27 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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');
-        });
-    });
-});