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

package/src/ui/form/FileField/FileField.tsx

@@ -1,190 +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 {IFileHocInput, IFileHocOutput} from '../../../hoc/file';
-import useFile from '../../../hooks/useFile';
-import {useComponents} from '../../../hooks';
-import fieldWrapper, {IFieldWrapperInputProps, IFieldWrapperOutputProps} from '../Field/fieldWrapper';
-
-export interface IFileFieldProps extends IFieldWrapperInputProps, IFileHocInput, IFileHocOutput {
-
-    /**
-     * Показать значок удаление файла
-     * @example true
-     */
-    showRemove?: boolean,
-    buttonComponent?: React.ReactNode; // TODO May be buttonView ?
-    buttonProps?: any;
-    className?: CssClassName;
-    view?: CustomView;
-    itemView?: CustomView;
-    itemProps?: any;
-    [key: string]: any;
-}
-
-export interface IFileFieldItemViewProps extends IFileHocInput, IFileHocOutput {
-    /**
-     * Уникальный текстовый идентификатор
-     * @example e65f5867-0083-48a7-af43-1121ed9e6280
-     */
-    uid?: string,
-
-    imagesOnly?: boolean,
-
-    /**
-     * ID файла
-     * @example 34
-     */
-    fileId?: number | string,
-
-    /**
-     * Исходное название файла
-     * @example original-name
-     */
-    title?: string,
-    disabled?: boolean,
-    showRemove?: boolean,
-
-    /**
-     * Обработчик события удаления файла
-     * @param e
-     */
-    onRemove?: () => void,
-    error?: string,
-    image?: {
-        /**
-         * Url файла
-         * @example assets/file.txt
-         */
-        url: string,
-
-        /**
-         * Ширина
-         * @example 1280
-         */
-        width: string,
-
-        /**
-         * Высота
-         * @example 720
-         */
-        height: string,
-    },
-    progress?: {
-        bytesUploaded: number,
-        percent: number,
-    },
-}
-
-export interface IFileFieldViewProps extends IFileFieldProps {
-    buttonComponent?: React.ReactNode | any;
-    imagesOnly?: boolean;
-    itemProps?: any;
-    buttonProps: {
-        /**
-         * Название поля
-         * @example Save
-         */
-        label?: string | any,
-        size?: boolean,
-
-        /**
-         * Переводит в неактивное состояние
-         * @example true
-         */
-        disabled?: boolean,
-
-        /**
-         * Обработчик события нажатия
-         * @param e
-         */
-        onClick?: (e: Event) => void,
-    },
-    itemView?: React.ReactNode | any;
-    items: IFileFieldItemViewProps[]
-}
-
-function FileField(props: IFileFieldProps & IFieldWrapperOutputProps): JSX.Element {
-    const components = useComponents();
-    const {files, onBrowse, onRemove} = useFile(props);
-
-    const FileFieldView = props.view || components.ui.getView('form.FileFieldView');
-    const FileFieldItemView = props.itemView || components.ui.getView('form.FileFieldItemView');
-    return (
-        <FileFieldView
-            {...props}
-            buttonComponent={props.buttonComponent}
-            buttonProps={{
-                label: props.imagesOnly
-                    ? props.multiple
-                        ? __('Прикрепить фотографии')
-                        : __('Прикрепить фото')
-                    : props.multiple
-                        ? __('Прикрепить файлы')
-                        : __('Прикрепить файл'),
-                size: props.size,
-                disabled: props.disabled,
-                onClick: onBrowse,
-                ...props.buttonProps,
-            }}
-            itemView={FileFieldItemView}
-            items={files.map(file => {
-                const data = file.getResultHttpMessage() || {};
-                const item = {
-                    uid: file.getUid(),
-                    fileId: data.id || null,
-                    title: file.getName(),
-                    size: data.size || data.fileSize,
-                    disabled: props.disabled,
-                    showRemove: props.showRemove,
-                    onRemove: () => onRemove(file),
-                    error: null,
-                    image: null,
-                    progress: null,
-                    item: data,
-                };
-                // Add error
-                if (file.getResult() === File.RESULT_ERROR) {
-                    if (typeof file.getResultHttpMessage() === 'string'
-                            && file.getResultHttpMessage().substr(0, 1) === '{') {
-                        const errorResponse = JSON.parse(file.getResultHttpMessage());
-                        item.error = errorResponse.error || errorResponse.message || __('Ошибка');
-                    } else {
-                        item.error = file.getResultHttpMessage()
-                            ? JSON.stringify(file.getResultHttpMessage())
-                            : __('Ошибка');
-                    }
-                }
-                // Add thumbnail image
-                if (data.images) {
-                    // Image object has properties: url, width, height
-                    item.image = data.images[props.imagesProcessor]
-                        || _first(_values(data.images));
-                }
-                // Add progress
-                if (file.getStatus() === File.STATUS_PROCESS) {
-                    item.progress = {
-                        bytesUploaded: file.getBytesUploaded(),
-                        percent: file.progress.getPercent(),
-                    };
-                }
-                return item;
-            })}
-        />
-    );
-}
-
-FileField.defaultProps = {
-    disabled: false,
-    required: false,
-    className: '',
-    showRemove: true,
-    buttonProps: {
-        color: 'secondary',
-        outline: true,
-    },
-    multiple: false,
-};
-
-export default fieldWrapper<IFileFieldProps>('FileField', FileField);

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

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import FileField from '../FileField';
-
-/**
- * Обычный пример использования FileField.
- * @order 1
- * @col 6
- */
-
-export default () => (
-    <div style={{display: 'grid', gridGap: '10px'}}>
-        <FileField backendUrl='/api/v1/file-test' />
-    </div>
-);

package/src/ui/form/FileField/index.tsx

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

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

@@ -1,27 +0,0 @@
-import _isString from 'lodash-es/isString';
-
-export default class AutoSaveHelper {
-    static STORAGE_KEY_PREFIX = 'Form';
-
-    static restore(clientStorage, formId, initialValues) {
-        const values = clientStorage.get(`${AutoSaveHelper.STORAGE_KEY_PREFIX}_${formId}`) || '';
-        if (_isString(values) && values.substr(0, 1) === '{') {
-            return {
-                ...JSON.parse(values),
-                ...initialValues,
-            };
-        }
-        return initialValues;
-    }
-
-    static save(clientStorage, formId, values) {
-        clientStorage.set(
-            `${AutoSaveHelper.STORAGE_KEY_PREFIX}_${formId}`,
-            JSON.stringify(values),
-        );
-    }
-
-    static remove(clientStorage, formId) {
-        clientStorage.remove(`${AutoSaveHelper.STORAGE_KEY_PREFIX}_${formId}`);
-    }
-}

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

@@ -1,9 +0,0 @@
-import basic from './demo/basic';
-
-export default {
-  title: 'form.Form',
-};
-
-export {
-    basic,
-}

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

@@ -1,85 +0,0 @@
-import 'jest-enzyme';
-import mountWithApp from '../../../../tests/mountWithApp';
-import Form from './Form';
-import InputField from '../InputField';
-import PasswordField from '../PasswordField';
-import CheckboxField from '../CheckboxField';
-
-// @todo tests cause 'Invalid hook call', sort out this problem and then uncomment code and remove '.skip'
-describe('Form tests', () => {
-    it.skip('should render nothing without props', () => {
-        const wrapper = mountWithApp(Form);
-        expect(wrapper.find('Form')).toBeEmptyRender();
-    });
-
-    // describe('Static props', () => {
-    //     const props = {
-    //         autoStartTwoFactor: false,
-    //         className: 'test',
-    //         fields: [
-    //             {
-    //                 component: InputField,
-    //                 attribute: 'email',
-    //                 label: 'Email',
-    //                 required: true,
-    //             },
-    //             {
-    //                 component: PasswordField,
-    //                 attribute: 'password',
-    //                 label: 'Password',
-    //                 placeholder: 'test',
-    //             },
-    //             {
-    //                 component: CheckboxField,
-    //                 attribute: 'acceptWithPolicy',
-    //                 label: 'Accept with Policy',
-    //                 disabled: true,
-    //             },
-    //         ],
-    //         formId: 'LoginForm',
-    //         layout: 'horizontal',
-    //         style: {width: '45%'},
-    //         submitLabel: 'Go ahead!',
-    //         validators: [['email', 'required'], ['password', 'required'], ['acceptWithPolicy', 'required']],
-    //     };
-    //
-    //     const wrapper = mountWithApp(Form, {...props});
-    //
-    //     it('should static props transmitted unchanged', () => {
-    //         expect(wrapper.find('Form')).toHaveProp(props);
-    //     });
-    //     it('should render right fields', () => {
-    //         expect(wrapper.find('InputField')).toExist();
-    //         expect(wrapper.find('PasswordField')).toExist();
-    //         expect(wrapper.find('CheckboxField')).toExist();
-    //     });
-    //     it('should render with right layout', () => {
-    //         expect(wrapper.find('.FormView')).toHaveClassName(`form-${props.layout}`);
-    //         expect(wrapper.find('.FieldLayoutView')).toHaveClassName(`FieldLayoutView_layout_${props.layout}`);
-    //     });
-    //
-    //     it('should have right external className', () => {
-    //         expect(wrapper.find('form')).toHaveClassName(props.className);
-    //     });
-    //     it('should have right external style ', () => {
-    //         expect(wrapper.find('Form')).toHaveProp('style', props.style);
-    //     });
-    //     it('should submit-button have right label', () => {
-    //         expect(wrapper.find('.ButtonView__label')).toHaveText(props.submitLabel);
-    //     });
-    //
-    //     describe('Form fields', () => {
-    //         it('should InputField have right props', () => {
-    //             expect(wrapper.find('InputField')).toHaveProp(props.fields[0]);
-    //         });
-    //
-    //         it('should PasswordField have right props', () => {
-    //             expect(wrapper.find('PasswordField')).toHaveProp(props.fields[1]);
-    //         });
-    //
-    //         it('should CheckboxField have right props', () => {
-    //             expect(wrapper.find('CheckboxField')).toHaveProp(props.fields[2]);
-    //         });
-    //     });
-    // });
-});