@bodynarf/react.components 1.7.3 → 1.7.4

package/src/hooks/useComponentOutsideClick.ts

@@ -0,0 +1,48 @@
+import { DependencyList, useCallback, useEffect } from "react";
+
+import { isNullOrUndefined, isNull } from "@bodynarf/utils";
+
+/**
+ * Subscribe to component outside click
+ * @param selector Component root selector
+ * @param clickHandleCondition Condition to handle document click
+ * @param clickHandleChange Handler of outside component click
+ * @param clickListenCondition Condition to start listening document clicks
+ * @param dependencies Additional dependencies to update hook
+ */
+export const useComponentOutsideClick = (
+    selector: string,
+    clickHandleCondition: boolean,
+    clickHandleChange: () => void,
+    clickListenCondition?: boolean,
+    dependencies?: DependencyList
+): void => {
+    const onDocumentClick = useCallback(
+        (event: MouseEvent): void => {
+            if (clickHandleCondition) {
+                const target: HTMLElement = event.target as HTMLElement;
+
+                if (isNullOrUndefined(target)) {
+                    return;
+                }
+
+                const relatedComponent: Element | null =
+                    target.closest(selector);
+
+                if (isNull(relatedComponent)) {
+                    clickHandleChange();
+                }
+            }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [clickHandleCondition, selector, clickHandleChange, dependencies]);
+
+    useEffect(() => {
+        if (isNullOrUndefined(clickListenCondition) || clickListenCondition === true) {
+            document.addEventListener("click", onDocumentClick);
+
+            return (): void => document.removeEventListener("click", onDocumentClick);
+        }
+
+        return () => { };
+    }, [clickListenCondition, onDocumentClick]);
+};

package/src/hooks/usePagination.ts

@@ -0,0 +1,55 @@
+import { DependencyList, useCallback, useEffect, useMemo, useState } from "react";
+
+/** Paginator hook state */
+export interface PaginationState {
+    /** Number of current page */
+    currentPage: number;
+
+    /** Amount of pages */
+    pagesCount: number;
+
+    /** Handler of page change */
+    onPageChange: (page: number) => void;
+}
+
+/** Default page size */
+const defaultPageSize: number = 30;
+
+/**
+ * Hook to pagination state, return hooked values and handler for pagination
+ * @param length Pagionation items count
+ * @param size Page size. Default is 30
+ * @param initPage Initial page. Default is 1
+ * @param dependencies List of dependencies. On any dependency update current page will be set to 1
+ * @returns Pair of hook-stored state and handler for slicing current page items
+ */
+export const usePagination = (
+    length: number,
+    size: number = defaultPageSize,
+    initPage: number = 1,
+    dependencies: DependencyList = []
+): [PaginationState, (data: Array<any>) => Array<any>] => {
+    const [currentPage, setCurrentPage] = useState(initPage);
+    const count = useMemo(() => Math.ceil(length / size), [size, length]);
+    const onChange = useCallback((page: number) => setCurrentPage(page), [setCurrentPage]);
+
+    const paginate = useCallback(
+        (data: Array<any>): Array<any> => {
+            const limit = size;
+            const offstet = (currentPage - 1) * size;
+
+            return data.slice(offstet, offstet + limit);
+        },
+        [size, currentPage]
+    );
+
+    const state = useMemo(() => ({
+        currentPage: currentPage,
+        pagesCount: count,
+        onPageChange: onChange
+    }), [currentPage, count, onChange]);
+
+    useEffect(() => setCurrentPage(1), dependencies);
+
+    return [state, paginate];
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./components";
+export * from "./hooks";
+export * from "./utils";

package/src/utils/dataAttributes.ts

@@ -0,0 +1,26 @@
+import { isNullOrUndefined } from "@bodynarf/utils";
+
+import { DataAttributes } from "@bbr";
+
+/**
+ * Map object with key-value pairs to html data attributes format
+ * @param dataAttributes Object with data attribute values
+ * @returns Object that could be injected into react html element as data-* attribute values
+ */
+export const mapDataAttributes = (dataAttributes: DataAttributes): object => {
+    const mappedAttributes =
+        Object
+            .entries(dataAttributes)
+            .reduce((result, [key, value]) => {
+                if (isNullOrUndefined(value)) {
+                    return result;
+                }
+
+                const newKey = key.startsWith("data-") ? key : `data-${key}`;
+
+                result[newKey] = value;
+                return result;
+            }, {} as any);
+
+    return mappedAttributes;
+};

package/src/utils/formValidation.ts

@@ -0,0 +1,42 @@
+import { isNullOrUndefined } from "@bodynarf/utils";
+
+import { ElementColor, ValidationState, ValidationStatus } from "@bbr/components";
+
+/**
+ * Get current validation state values
+ * @param style Component style color
+ * @param validationState Current form item validation state
+ * @returns [Is validation applicable; classname attribute value; validation messages]
+ */
+export const getValidationValues = (style?: ElementColor, validationState?: ValidationState): [boolean, string, Array<string>] => {
+    const validationStateDefined = !isNullOrUndefined(validationState) && validationState!.status !== ValidationStatus.None;
+    const styleClassName = getStyleClassName(style, validationState);
+
+    const messages = validationState?.messages ?? [];
+
+    return [validationStateDefined, styleClassName, messages];
+}
+
+/**
+ * Get classname attribute value based on current validation state and form item component style prop
+ * @param style Component style color
+ * @param validationState Current form item validation state
+ * @returns Classname attribute value
+ */
+export const getStyleClassName = (style?: ElementColor, validationState?: ValidationState): string => {
+    if (isNullOrUndefined(validationState)) {
+        return isNullOrUndefined(style) ? "" : `is-${style}`;
+    }
+
+    const { status } = validationState!;
+    switch (status) {
+        case ValidationStatus.Valid: {
+            return "is-success";
+        }
+        case ValidationStatus.Invalid: {
+            return "is-danger";
+        }
+    }
+
+    return isNullOrUndefined(style) ? "" : `is-${style}`;
+};

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from "./formValidation";
+export * from "./dataAttributes";

package/tsconfig.json

@@ -0,0 +1,42 @@
+{
+	"compilerOptions": {
+		"target": "esnext",
+		"jsx": "react-jsx",
+		"module": "ESNext",
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"strict": true,
+		"skipLibCheck": true,
+		"declaration": true,
+		"declarationMap": true,
+		"outDir": "./dist",
+		"incremental": true,
+		"moduleResolution": "Node",
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noImplicitReturns": true,
+		"baseUrl": "./",
+		"paths": {
+			"@bbr": [
+				"./src"
+			],
+			"@bbr/components": [
+				"./src/components"
+			],
+			"@bbr/components/*": [
+				"./src/components/*",
+				"./src/components/primitives/*"
+			],
+			"@bbr/hooks": [
+				"./src/hooks"
+			],
+			"@bbr/utils": [
+				"./src/utils"
+			]
+		}
+	},
+	"exclude": [
+		"node_modules",
+		"dist"
+	]
+}