@steroidsjs/core 2.2.1 → 2.2.2

package/src/utils/form.ts

@@ -0,0 +1,208 @@
+import _isPlainObject from 'lodash-es/isPlainObject';
+import _isArray from 'lodash-es/isArray';
+import _isEqual from 'lodash-es/isEqual';
+import _get from 'lodash-es/get';
+import {useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState} from 'react';
+import {useEffectOnce, useLifecycles, useUpdate} from 'react-use';
+import useDispatch from '../hooks/useDispatch';
+import {useSelector} from '../hooks';
+import {FormContext} from '../ui/form/Form/Form';
+import {formChange, formInitialize, formSetErrors} from '../actions/form';
+import {reducerItem} from '../reducers/form';
+
+export const setInWithPath = (state: any, value: any, path: string[], pathIndex = 0) => {
+    if (pathIndex >= path.length) {
+        return value;
+    }
+
+    const first = path[pathIndex];
+    const firstState = state && (Array.isArray(state) ? state[Number(first)] : state[first]);
+    const next = setInWithPath(firstState, value, path, pathIndex + 1);
+
+    if (!state) {
+        if (Number.isNaN(first)) {
+            return { [first]: next };
+        }
+        const initialized = [];
+        initialized[parseInt(first, 10)] = next;
+        return initialized;
+    }
+
+    if (Array.isArray(state)) {
+        const copy = [].concat(state);
+        copy[parseInt(first, 10)] = next;
+        return copy;
+    }
+
+    return {
+        ...state,
+        [first]: next,
+    };
+};
+
+export const normalizeLayout = layout => (typeof layout === 'object' ? layout : {layout});
+
+export const mergeLayoutProp = (layout1, layout2) => {
+    if (layout2 === false) {
+        return null;
+    }
+    layout1 = layout1 ? normalizeLayout(layout1) : null;
+    layout2 = layout2 ? normalizeLayout(layout2) : null;
+    return layout1 || layout2 ? {...layout1, ...layout2} : null;
+};
+
+export const cleanEmptyObject = object => {
+    // if all properties are null substitute the object with null
+    if (!Object.values(object).some(x => x)) {
+        return null;
+    }
+
+    Object.keys(object).forEach(key => {
+        if (_isPlainObject(object[key])) {
+            object[key] = cleanEmptyObject(object[key]);
+        }
+
+        if (_isArray(object[key])) {
+            const array = object[key];
+
+            array.forEach((value, index) => {
+                if (_isPlainObject(value)) {
+                    array[index] = cleanEmptyObject(value);
+                }
+            });
+
+            if (!object[key].some(x => Boolean(x))) {
+                object[key] = [];
+            }
+        }
+    });
+
+    return object;
+};
+
+// Form state providers
+export const providers = {
+    // Redux
+    redux: {
+        useForm: (formId, initialValues) => {
+            const dispatch = useDispatch(); // eslint-disable-line react-hooks/rules-of-hooks
+            useEffectOnce(() => { // eslint-disable-line react-hooks/rules-of-hooks
+                dispatch(formInitialize(formId, initialValues));
+            });
+            return {
+                // eslint-disable-next-line react-hooks/rules-of-hooks
+                ...useSelector(state => _get(state, ['form', formId])),
+                setErrors: useCallback(
+                    errors => dispatch(formSetErrors(formId, errors)),
+                    [dispatch, formId],
+                ),
+                reducer: null,
+                setState: null,
+                dispatch,
+            };
+        },
+        useField: (formId, name, isList) => {
+            const dispatch = useDispatch(); // eslint-disable-line react-hooks/rules-of-hooks
+            return {
+                ...useSelector(state => {
+                    const errors = _get(state, ['form', formId, 'errors'].concat(name.split('.')));
+                    const value = _get(state, ['form', formId, 'values'].concat(name.split('.')));
+                    return {
+                        errors,
+                        value: isList ? value?.length || 0 : value,
+                    };
+                }),
+                setValue: useCallback(
+                    value => dispatch(formChange(formId, name, value)),
+                    [dispatch, formId, name],
+                ),
+            };
+        },
+        useDispatch: () => useDispatch(),
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        select: (formId, selector) => useSelector(state => selector(_get(state, ['form', formId]))),
+    },
+
+    // React reducer
+    reducer: {
+        useForm: (formId, initialValues) => {
+            const initialState = reducerItem({}, formInitialize(formId, initialValues));
+            const [state, dispatch] = useReducer(reducerItem, initialState);
+
+            const subscribersRef = useRef([]);
+            useEffect(() => {
+                subscribersRef.current.forEach(callback => callback(state));
+            }, [state]);
+            const reducer = useMemo(() => ({
+                dispatch,
+                select: selector => {
+                    // eslint-disable-next-line react-hooks/rules-of-hooks
+                    const forceUpdate = useUpdate();
+
+                    // eslint-disable-next-line react-hooks/rules-of-hooks
+                    const valueRef = useRef(selector.call(null, state));
+
+                    // eslint-disable-next-line react-hooks/rules-of-hooks
+                    const callback = useCallback((newSstate) => {
+                        const newValue2 = selector.call(null, newSstate);
+                        if (!_isEqual(valueRef.current, newValue2)) {
+                            valueRef.current = newValue2;
+                            forceUpdate();
+                        }
+                    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+                    // eslint-disable-next-line react-hooks/rules-of-hooks
+                    useLifecycles(
+                        () => subscribersRef.current.push(callback),
+                        () => {
+                            const index = subscribersRef.current.indexOf(callback);
+                            if (index !== -1) {
+                                subscribersRef.current.splice(index, 1);
+                            }
+                        },
+                    );
+
+                    return valueRef.current;
+                },
+            }), []); // eslint-disable-line react-hooks/exhaustive-deps
+
+            return {
+                ...state,
+                setErrors: useCallback(
+                    errors => dispatch(formSetErrors(formId, errors)),
+                    [dispatch, formId],
+                ),
+                reducer,
+                setState: null,
+                dispatch,
+            };
+        },
+        useField: (formId, name, isList) => {
+            const {reducer} = useContext(FormContext); // eslint-disable-line react-hooks/rules-of-hooks
+            const value = reducer.select(state => _get(state, 'values.' + name));
+
+            return {
+                errors: reducer.select(state => _get(state, 'errors.' + name)),
+                value: isList ? value?.length || 0 : value,
+                setValue: useCallback(
+                    newValue => reducer.dispatch(formChange(formId, name, newValue)),
+                    [reducer, formId, name],
+                ),
+            };
+        },
+        useDispatch: () => useContext(FormContext).reducer.dispatch,
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        select: (formId, selector) => useContext(FormContext).reducer.select(selector),
+    },
+
+    // Local component state
+    state: {
+        useField: (initialValue) => {
+            const [value, setValue] = useState(initialValue); // eslint-disable-line react-hooks/rules-of-hooks
+            return {
+                errors: null,
+                value,
+                setValue,
+            };
+        },
+    },
+};

package/src/utils/text.ts

@@ -0,0 +1,84 @@
+import _orderBy from 'lodash-es/orderBy';
+
+const stringToWords = str => {
+    let words = [];
+    String(str).split(' ').forEach(strItem => {
+        words = words.concat(strItem.match(/^[^\p{Lu}]+/u));
+        words = words.concat(strItem.match(/[\p{Lu}][^\p{Lu}]*/gu));
+        words.push(' ');
+    });
+    words.pop();
+    return words.filter(Boolean);
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export const smartSearch = (query, sourceItems) => {
+    if (!query) {
+        return sourceItems;
+    }
+    const queryCharacters = query.split('');
+    // Match
+    let items = sourceItems.filter(item => {
+        const id = item.id;
+        const words = stringToWords(item.label || '');
+        if (words.length === 0 || !id) {
+            return false;
+        }
+        let word = null;
+        let highlighted = [['', false]];
+        let index = 0;
+        let wordIndex = 0;
+        let wordChar = null;
+        let wordCharIndex = 0;
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
+            const char = queryCharacters[index];
+            if (!char) {
+                highlighted.push([
+                    word.substr(wordCharIndex) + words.slice(wordIndex + 1).join(''),
+                    false,
+                ]);
+                break;
+            }
+            word = words[wordIndex];
+            wordChar = (word && word.split('')[wordCharIndex]) || '';
+            if (!word) {
+                highlighted = [];
+                break;
+            }
+            const isMatch = !char.match(/[\p{Lu}]/u)
+                ? wordChar.toLowerCase() === char.toLowerCase()
+                : wordChar === char;
+            if (isMatch) {
+                index += 1;
+                wordCharIndex += 1;
+                highlighted[highlighted.length - 1][0] += wordChar;
+                highlighted[highlighted.length - 1][1] = true;
+            } else {
+                highlighted.push([word.substr(wordCharIndex), false]);
+                highlighted.push(['', false]);
+                wordIndex += 1;
+                wordCharIndex = 0;
+            }
+        }
+        highlighted = highlighted.filter(highlightedItem => !!highlightedItem[0]);
+        if (highlighted.findIndex(highlightedItem => highlightedItem[1]) !== -1) {
+            item.labelHighlighted = highlighted;
+            return true;
+        }
+        return false;
+    });
+    items = _orderBy(
+        items,
+        item => {
+            // Fined first word is priority
+            if (item.labelHighlighted) {
+                return item.labelHighlighted.findIndex(i => i[1]);
+            }
+            return Infinity;
+        },
+        'asc',
+    );
+
+    return items;
+};

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "lib": ["dom", "es2020.intl"],
+    "experimentalDecorators": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "declaration": true,
+    "isolatedModules": true,
+    "outDir": "./dist",
+    "paths": {
+      "@steroidsjs/core/*": [
+        "../react/src/*"
+      ],
+      "@steroidsjs/bootstrap/*": [
+        "../react-bootstrap/src/*"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "src/**/*.test.ts",
+    "src/**/*.test.tsx"
+  ]
+}

package/actions/auth.d.ts

@@ -1,24 +0,0 @@
-export declare const AUTH_INIT = "AUTH_INIT";
-export declare const AUTH_INIT_USER = "AUTH_INIT_USER";
-export declare const AUTH_SET_DATA = "AUTH_SET_DATA";
-export declare const AUTH_ADD_SOCIAL = "AUTH_ADD_SOCIAL";
-export declare const init: (skipInitialized?: boolean) => (dispatch: any, getState: any) => any;
-export declare const reInit: () => (dispatch: any, getState: any) => any;
-export declare const login: (token: any, redirectPageId?: string | boolean) => (dispatch: any, getState: any, { http }: {
-    http: any;
-}) => any;
-export declare const addSocial: (social: any) => {
-    type: string;
-    social: any;
-};
-export declare const setUser: (user: any) => {
-    type: string;
-    user: any;
-};
-export declare const setData: (data: any) => {
-    type: string;
-    data: any;
-};
-export declare const logout: (routeId?: string | boolean, routeParams?: any) => (dispatch: any, getState: any, { http }: {
-    http: any;
-}) => any;

package/actions/auth.js

@@ -1,65 +0,0 @@
-"use strict";
-exports.__esModule = true;
-exports.logout = exports.setData = exports.setUser = exports.addSocial = exports.login = exports.reInit = exports.init = exports.AUTH_ADD_SOCIAL = exports.AUTH_SET_DATA = exports.AUTH_INIT_USER = exports.AUTH_INIT = void 0;
-var router_1 = require("./router");
-exports.AUTH_INIT = 'AUTH_INIT';
-exports.AUTH_INIT_USER = 'AUTH_INIT_USER';
-exports.AUTH_SET_DATA = 'AUTH_SET_DATA';
-exports.AUTH_ADD_SOCIAL = 'AUTH_ADD_SOCIAL';
-var init = function (skipInitialized) {
-    if (skipInitialized === void 0) { skipInitialized = false; }
-    return function (dispatch, getState) {
-        if (skipInitialized) {
-            var state = getState();
-            if (state.auth && state.auth.isInitialized) {
-                return [];
-            }
-        }
-        return dispatch({
-            type: exports.AUTH_INIT
-        });
-    };
-};
-exports.init = init;
-var reInit = function () { return exports.init(); };
-exports.reInit = reInit;
-var login = function (token, redirectPageId) {
-    if (redirectPageId === void 0) { redirectPageId = 'root'; }
-    return function (dispatch, getState, _a) {
-        var http = _a.http;
-        http.setAccessToken(token);
-        return dispatch({
-            type: exports.AUTH_INIT,
-            redirectPageId: redirectPageId || null
-        });
-    };
-};
-exports.login = login;
-var addSocial = function (social) { return ({
-    type: exports.AUTH_ADD_SOCIAL,
-    social: social
-}); };
-exports.addSocial = addSocial;
-var setUser = function (user) { return ({
-    type: exports.AUTH_INIT_USER,
-    user: user || null
-}); };
-exports.setUser = setUser;
-var setData = function (data) { return ({
-    type: exports.AUTH_SET_DATA,
-    data: data
-}); };
-exports.setData = setData;
-var logout = function (routeId, routeParams) {
-    if (routeId === void 0) { routeId = 'root'; }
-    if (routeParams === void 0) { routeParams = null; }
-    return function (dispatch, getState, _a) {
-        var http = _a.http;
-        http.removeAccessToken();
-        return dispatch([
-            exports.setUser(null),
-            routeId && router_1.goToRoute(routeId, routeParams),
-        ].filter(Boolean));
-    };
-};
-exports.logout = logout;

package/actions/fields.d.ts

@@ -1,5 +0,0 @@
-export declare const FIELDS_SET_META = "FIELDS_SET_META";
-export declare const setMeta: (meta: any) => {
-    type: string;
-    meta: any;
-};

package/actions/fields.js

@@ -1,9 +0,0 @@
-"use strict";
-exports.__esModule = true;
-exports.setMeta = exports.FIELDS_SET_META = void 0;
-exports.FIELDS_SET_META = 'FIELDS_SET_META';
-var setMeta = function (meta) { return ({
-    type: exports.FIELDS_SET_META,
-    meta: meta
-}); };
-exports.setMeta = setMeta;

package/actions/form.d.ts

@@ -1,68 +0,0 @@
-export declare const FORM_INITIALIZE = "@form/initialize";
-export declare const FORM_CHANGE = "@form/change";
-export declare const FORM_RESET = "@form/reset";
-export declare const FORM_SET_ERRORS = "@form/set_errors";
-export declare const FORM_SUBMIT = "@form/submit";
-export declare const FORM_ARRAY_ADD = "@form/array_add";
-export declare const FORM_ARRAY_REMOVE = "@form/array_remove";
-/**
- * Инициализация формы, сохранение первоначальных данных
- * @param formId
- * @param values
- */
-export declare const formInitialize: (formId: any, values: any) => {
-    type: string;
-    formId: any;
-    values: any;
-};
-/**
- * Изменение значения поля
- * @param formId
- * @param nameOrObject
- * @param value
- */
-export declare const formChange: (formId: any, nameOrObject: any, value?: any) => {
-    type: string;
-    formId: any;
-    nameOrObject: any;
-    value: any;
-};
-/**
- * Задать ошибки
- * @param formId
- * @param errors
- */
-export declare const formSetErrors: (formId: any, errors: any) => {
-    type: string;
-    formId: any;
-    errors: any;
-};
-/**
- * Сабмит формы
- * @param formId
- */
-export declare const formSubmit: (formId: any) => {
-    type: string;
-    formId: any;
-};
-/**
- * Сброс данных формы к первоначальному состоянию (к initialValues)
- * @param formId
- */
-export declare const formReset: (formId: any) => {
-    type: string;
-    formId: any;
-};
-export declare const formArrayAdd: (formId: any, name: any, rowsCount: any, initialValues: any) => {
-    type: string;
-    formId: any;
-    name: any;
-    rowsCount: any;
-    initialValues: any;
-};
-export declare const formArrayRemove: (formId: any, name: any, index: any) => {
-    type: string;
-    formId: any;
-    name: any;
-    index: any;
-};

package/actions/form.js

@@ -1,81 +0,0 @@
-"use strict";
-exports.__esModule = true;
-exports.formArrayRemove = exports.formArrayAdd = exports.formReset = exports.formSubmit = exports.formSetErrors = exports.formChange = exports.formInitialize = exports.FORM_ARRAY_REMOVE = exports.FORM_ARRAY_ADD = exports.FORM_SUBMIT = exports.FORM_SET_ERRORS = exports.FORM_RESET = exports.FORM_CHANGE = exports.FORM_INITIALIZE = void 0;
-exports.FORM_INITIALIZE = '@form/initialize';
-exports.FORM_CHANGE = '@form/change';
-exports.FORM_RESET = '@form/reset';
-exports.FORM_SET_ERRORS = '@form/set_errors';
-exports.FORM_SUBMIT = '@form/submit';
-exports.FORM_ARRAY_ADD = '@form/array_add';
-exports.FORM_ARRAY_REMOVE = '@form/array_remove';
-/**
- * Инициализация формы, сохранение первоначальных данных
- * @param formId
- * @param values
- */
-var formInitialize = function (formId, values) { return ({
-    type: exports.FORM_INITIALIZE,
-    formId: formId,
-    values: values
-}); };
-exports.formInitialize = formInitialize;
-/**
- * Изменение значения поля
- * @param formId
- * @param nameOrObject
- * @param value
- */
-var formChange = function (formId, nameOrObject, value) {
-    if (value === void 0) { value = null; }
-    return ({
-        type: exports.FORM_CHANGE,
-        formId: formId,
-        nameOrObject: nameOrObject,
-        value: value
-    });
-};
-exports.formChange = formChange;
-/**
- * Задать ошибки
- * @param formId
- * @param errors
- */
-var formSetErrors = function (formId, errors) { return ({
-    type: exports.FORM_SET_ERRORS,
-    formId: formId,
-    errors: errors
-}); };
-exports.formSetErrors = formSetErrors;
-/**
- * Сабмит формы
- * @param formId
- */
-var formSubmit = function (formId) { return ({
-    type: exports.FORM_SUBMIT,
-    formId: formId
-}); };
-exports.formSubmit = formSubmit;
-/**
- * Сброс данных формы к первоначальному состоянию (к initialValues)
- * @param formId
- */
-var formReset = function (formId) { return ({
-    type: exports.FORM_RESET,
-    formId: formId
-}); };
-exports.formReset = formReset;
-var formArrayAdd = function (formId, name, rowsCount, initialValues) { return ({
-    type: exports.FORM_ARRAY_ADD,
-    formId: formId,
-    name: name,
-    rowsCount: rowsCount,
-    initialValues: initialValues
-}); };
-exports.formArrayAdd = formArrayAdd;
-var formArrayRemove = function (formId, name, index) { return ({
-    type: exports.FORM_ARRAY_REMOVE,
-    formId: formId,
-    name: name,
-    index: index
-}); };
-exports.formArrayRemove = formArrayRemove;

package/actions/list.d.ts

@@ -1,106 +0,0 @@
-import { IApiMethod } from '../components/ApiComponent';
-export interface IList {
-    action?: string | IApiMethod;
-    actionMethod?: string;
-    onFetch?: (list: IList, query: Record<string, unknown>, components: any) => Promise<any>;
-    condition?: (query: Record<string, unknown>) => any;
-    scope?: string[];
-    total?: number;
-    items?: Array<any>;
-    sourceItems?: Array<any>;
-    isRemote?: boolean;
-    loadMore?: boolean;
-    primaryKey?: string;
-    listId?: string;
-    formId?: string;
-    pageAttribute?: string;
-    pageSizeAttribute?: string;
-    sortAttribute?: string;
-    layoutAttribute?: string;
-    meta?: any;
-    isFetched?: boolean;
-    isLoading?: boolean;
-    layoutName?: null;
-}
-export declare const LIST_INIT = "@list/init";
-export declare const LIST_SET_ITEMS = "@list/set_items";
-export declare const LIST_BEFORE_FETCH = "@list/before_fetch";
-export declare const LIST_AFTER_FETCH = "@list/after_fetch";
-export declare const LIST_ITEM_ADD = "@list/item_add";
-export declare const LIST_ITEM_UPDATE = "@list/item_update";
-export declare const LIST_DESTROY = "@list/destroy";
-export declare const LIST_TOGGLE_ITEM = "@list/toggle_item";
-export declare const LIST_TOGGLE_ALL = "@list/toggle_all";
-export declare const LIST_SET_LAYOUT = "@list/set_layout";
-export declare const httpFetchHandler: (list: IList, query: any, { api, http }: {
-    api: any;
-    http: any;
-}) => any;
-export declare const localFetchHandler: (list: IList, query: Record<string, unknown>) => {
-    items: any[];
-    total: number;
-};
-/**
- * Init list
- * @param listId
- * @param payload
- */
-export declare const listInit: (listId: any, payload: any) => {
-    type: string;
-    payload: any;
-};
-export declare const listSetItems: (listId: any, items: any) => {
-    type: string;
-    listId: any;
-    items: any;
-};
-export declare const listSetLayout: (listId: any, layoutName: any) => {
-    type: string;
-    listId: any;
-    layoutName: any;
-};
-/**
- * Update query values and send request
- * @param listId
- * @param query
- */
-export declare const listFetch: (listId: string, query?: any) => (dispatch: any, getState: any, components: any) => any;
-/**
- * Lazy update query values and send request
- * @param listId
- * @param query
- */
-export declare const listLazyFetch: (listId: string, query?: any) => (dispatch: any) => void;
-/**
- * Send request with same query
- * @param listId
- */
-export declare const listRefresh: (listId: string) => (dispatch: any, getState: any, components: any) => any;
-/**
- * Destroy list (remove from redux state)
- * @param listId
- */
-export declare const listDestroy: (listId: string) => {
-    listId: string;
-    type: string;
-};
-export declare const add: (listId: any, item: any) => {
-    item: any;
-    listId: any;
-    type: string;
-};
-export declare const update: (listId: any, item: any, condition: any) => {
-    item: any;
-    condition: any;
-    listId: any;
-    type: string;
-};
-export declare const toggleItem: (listId: any, itemId: any) => {
-    listId: any;
-    itemId: any;
-    type: string;
-};
-export declare const toggleAll: (listId: any) => {
-    listId: any;
-    type: string;
-};