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

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 !== null)) {
+        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.test.ts

@@ -0,0 +1,359 @@
+import { smartSearch } from './text';
+
+const itemRuLabel = 'Загромождена входная дверь в электрощитовую';
+const itemEnLabel = 'this is a text in english language, wow';
+const itemSymbolsLabel = '%Sym!bols *Lab**el';
+
+const items1 = [
+    {
+        id: 1,
+        label: 'A label',
+    },
+    {
+        id: 2,
+        label: 'Label a',
+    },
+];
+const items2 = [
+    {
+        id: 1,
+        label: itemRuLabel,
+    },
+    {
+        id: 2,
+        label: 'Входная дверь открывается во внутрь',
+    },
+    {
+        id: 3,
+        label: itemEnLabel,
+    },
+    {
+        id: 4,
+        label: 'English is a text in language',
+    },
+    {
+        id: 5,
+        label: itemSymbolsLabel,
+    },
+    {
+        id: 6,
+        label: 'внутрь - это не наружу',
+    },
+    {
+        id: 7,
+        label: 'наружу - это не во внутрь',
+    },
+    {
+        id: 8,
+        label: 'внутрь',
+    },
+];
+
+const testResultHighlightedExpectedQueryLangRu1 = [
+    [
+        'Загро',
+        true,
+    ],
+    [
+        'мождена входная дверь в электрощитовую',
+        false,
+    ],
+];
+const testResultHighlightedExpectedQueryLangRu2 = [
+    [
+        'Загромождена',
+        false,
+    ],
+    [
+        ' ',
+        false,
+    ],
+    [
+        'входная',
+        false,
+    ],
+    [
+        ' ',
+        false,
+    ],
+    [
+        'дверь',
+        false,
+    ],
+    [
+        ' ',
+        false,
+    ],
+    [
+        'в',
+        false,
+    ],
+    [
+        ' ',
+        false,
+    ],
+    [
+        'электрощи',
+        true,
+    ],
+    [
+        'товую',
+        false,
+    ],
+];
+
+const testResultHighlightedExpectedQueryLangEn1 = [
+    [
+        'thi',
+        true,
+    ],
+    [
+        's is a text in english language, wow',
+        false,
+    ],
+];
+const testResultHighlightedExpectedQueryLangEn2 = [
+    [
+        'this',
+        false,
+    ],
+    [
+        ' ',
+        false,
+    ],
+    [
+        'is',
+        false,
+    ],
+    [
+        ' ',
+        false,
+    ],
+    [
+        'a',
+        false,
+    ],
+    [
+        ' ',
+        false,
+    ],
+    [
+        'text',
+        false,
+    ],
+    [
+        ' ',
+        false,
+    ],
+    [
+        'in',
+        false,
+    ],
+    [
+        ' ',
+        false,
+    ],
+    [
+        'english',
+        false,
+    ],
+    [
+        ' ',
+        false,
+    ],
+    [
+        'language,',
+        false,
+    ],
+    [
+        ' ',
+        false,
+    ],
+    [
+        'wow',
+        true,
+    ],
+];
+
+const testResultHighlightedExpectedOppositeLetterCase1 = testResultHighlightedExpectedQueryLangEn1;
+const testResultHighlightedExpectedOppositeLetterCase2 = testResultHighlightedExpectedQueryLangEn2;
+
+describe('textUtilsTest', () => {
+    describe('smartSearchTest', () => {
+        it('emptyArguments', () => {
+            expect(smartSearch(null, [])).toEqual([]);
+            expect(smartSearch(null, items1)).toEqual(items1);
+            expect(smartSearch('', items1)).toEqual(items1);
+            expect(smartSearch('', [])).toEqual([]);
+            expect(smartSearch('l', [])).toEqual([]);
+
+            expect(smartSearch('', null)).toEqual(null);
+            expect(smartSearch(null, null)).toEqual(null);
+
+            // @ts-ignore
+            expect(smartSearch()).toEqual(undefined);
+            expect(() => smartSearch('l', null)).toThrow(TypeError);
+            // @ts-ignore
+            expect(() => smartSearch('l')).toThrow(TypeError);
+        });
+
+        it('oneLetterInQuery', () => {
+            const expected1 = [
+                {
+                    id: 2,
+                    label: 'Label a',
+                    labelHighlighted: [
+                        [
+                            'L',
+                            true,
+                        ],
+                        [
+                            'abel a',
+                            false,
+                        ],
+                    ],
+                },
+                {
+                    id: 1,
+                    label: 'A label',
+                    labelHighlighted: [
+                        [
+                            'A',
+                            false,
+                        ],
+                        [
+                            ' ',
+                            false,
+                        ],
+                        [
+                            'l',
+                            true,
+                        ],
+                        [
+                            'abel',
+                            false,
+                        ],
+                    ],
+                },
+            ];
+
+            expect(smartSearch('l', items1)).toEqual(expected1);
+
+            expect(smartSearch('L', items1)).toEqual(expected1);
+        });
+
+        it('queryRu', () => {
+            const result1 = smartSearch('загро', items2);
+            expect(result1).toHaveLength(1);
+            expect(result1[0].label).toEqual(itemRuLabel);
+            expect(result1[0].labelHighlighted).toEqual(testResultHighlightedExpectedQueryLangRu1);
+
+            const result2 = smartSearch('электрощи', items2);
+            expect(result2).toHaveLength(1);
+            expect(result2[0].id).toEqual(1);
+            expect(result2[0].label).toEqual(itemRuLabel);
+            expect(result2[0].labelHighlighted).toEqual(testResultHighlightedExpectedQueryLangRu2);
+        });
+
+        it('queryEn', () => {
+            const result1 = smartSearch('thi', items2);
+            expect(result1).toHaveLength(1);
+            expect(result1[0].id).toEqual(3);
+            expect(result1[0].label).toEqual(itemEnLabel);
+            expect(result1[0].labelHighlighted).toEqual(testResultHighlightedExpectedQueryLangEn1);
+
+            const result2 = smartSearch('wow', items2);
+            expect(result2).toHaveLength(1);
+            expect(result2[0].id).toEqual(3);
+            expect(result2[0].label).toEqual(itemEnLabel);
+            expect(result2[0].labelHighlighted).toEqual(testResultHighlightedExpectedQueryLangEn2);
+
+        });
+
+        it('oppositeLetterCase', () => {
+            const result1 = smartSearch('Thi', items2);
+            expect(result1).toHaveLength(1);
+            expect(result1[0].id).toEqual(3);
+            expect(result1[0].label).toEqual(itemEnLabel);
+            expect(result1[0].labelHighlighted).toEqual(testResultHighlightedExpectedOppositeLetterCase1);
+
+            const result2 = smartSearch('WOW', items2);
+            expect(result2).toHaveLength(1);
+            expect(result2[0].id).toEqual(3);
+            expect(result2[0].label).toEqual(itemEnLabel);
+            expect(result2[0].labelHighlighted).toEqual(testResultHighlightedExpectedOppositeLetterCase2);
+
+
+            expect(smartSearch('ОтКрЫваеТся ВО', items2)).toHaveLength(1);
+        });
+
+        it('countOfMatchesResult', () => {
+            const result1 = smartSearch('двер', items2);
+            expect(result1).toHaveLength(2);
+
+            const result2 = smartSearch('внутр', items2);
+            expect(result2).toHaveLength(4);
+
+            const result3 = smartSearch('bom', items2);
+            expect(result3).toHaveLength(0);
+        });
+
+        it('manyWordsInQuery', () => {
+            expect(smartSearch('Входная дверь открывается', items2)).toHaveLength(1);
+            expect(smartSearch('is a text in', items2)).toHaveLength(2);
+            expect(smartSearch('открывается во', items2)).toHaveLength(1);
+        });
+
+        // todo надо ли делать поиск по небуквенным символам?? сейчас он работает некорректно
+        // it('querySymbols', () => {
+        // const result1HighlightedExpected1 = [
+        //     [
+        //         '%',
+        //         false,
+        //     ],
+        //     [
+        //         'Sym!bols',
+        //         false,
+        //     ],
+        //     [
+        //         ' ',
+        //         false,
+        //     ],
+        //     [
+        //         '*',
+        //         true,
+        //     ],
+        //     [
+        //         'Lab**el',
+        //         false,
+        //     ],
+        // ];
+        // const result1HighlightedExpected2 = [
+        //     [
+        //         '%',
+        //         true,
+        //     ],
+        //     [
+        //         'Sym!bols',
+        //         true,
+        //     ],
+        //     [
+        //         ' *Lab**el',
+        //         false,
+        //     ],
+        // ];
+        //
+        // const result1 = smartSearch('*', items2);
+        // expect(result1).toHaveLength(1);
+        // expect(result1[0].id).toEqual(5);
+        // expect(result1[0].label).toEqual(itemSymbolsLabel);
+        // expect(result1[0].labelHighlighted).toEqual(result1HighlightedExpected1);
+        //
+        // const result2 = smartSearch('%Sym!bols', items2);
+        // expect(result2).toHaveLength(1);
+        // expect(result2[0].id).toEqual(5);
+        // expect(result2[0].label).toEqual(itemSymbolsLabel);
+        // expect(result2[0].labelHighlighted).toEqual(result1HighlightedExpected2);
+        // });
+    });
+});

package/src/utils/text.ts

@@ -0,0 +1,110 @@
+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);
+};
+
+
+interface ISmartSearchSourceItem {
+    id: string | number,
+    label: string | number,
+}
+
+interface ISmartSearchOutputItem extends ISmartSearchSourceItem {
+    labelHighlighted?: [string, boolean][];
+}
+
+export type TSmartSearchOutput = ISmartSearchOutputItem[];
+
+/**
+ * Регистронезависимый поиск.
+ *
+ * @param query
+ * @param sourceItems
+ */
+// eslint-disable-next-line import/prefer-default-export
+export const smartSearch = (query: string, sourceItems: ISmartSearchSourceItem[]): TSmartSearchOutput => {
+
+    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;
+        let prevIsMatch = false;
+        // 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 = wordChar.toLowerCase() === char.toLowerCase();
+
+            if (isMatch) {
+                index += 1;
+                wordCharIndex += 1;
+                highlighted[highlighted.length - 1][0] += wordChar;
+                highlighted[highlighted.length - 1][1] = true;
+                prevIsMatch = true;
+            } else {
+                if (!prevIsMatch) {
+                    index = 0;
+                }
+
+                highlighted.push([word.substr(wordCharIndex), false]);
+                highlighted.push(['', false]);
+                wordIndex += 1;
+                wordCharIndex = 0;
+                prevIsMatch = false;
+            }
+        }
+        highlighted = highlighted.filter(highlightedItem => !!highlightedItem[0]);
+        if (highlighted.findIndex(highlightedItem => highlightedItem[1]) !== -1) {
+            // @ts-ignore
+            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-debug.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./../sfu-operator-frontend/node_modules/@steroidsjs/core",
+    "watch": true
+  }
+}

package/tsconfig-debug.json.sample

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./../../../goldenbee/backend-nest/node_modules/@steroidsjs/nest",
+    "watch": true
+  }
+}