@bodynarf/react.components 1.7.3 → 1.7.4

package/src/components/dropdown/components/label/index.tsx

@@ -0,0 +1,68 @@
+import { MouseEvent } from "react";
+
+import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
+
+import { ElementSize } from "@bbr/components";
+import Icon from "@bbr/components/icon";
+
+import { SelectableItem } from "@bbr/components/dropdown";
+
+export interface DropdownLabelProps {
+    /** Caption when no items selected */
+    caption: string;
+
+    /** Can user deselect */
+    deselectable: boolean;
+
+    /** Selected item */
+    selectedItem?: SelectableItem;
+
+    /** Element classnames */
+    className?: string;
+
+    /** Click handler*/
+    onClick: (event: MouseEvent<HTMLLabelElement>) => void;
+}
+
+/** Label component */
+const DropdownLabel = ({
+    caption,
+    selectedItem, onClick,
+    deselectable, className,
+}: DropdownLabelProps): JSX.Element => {
+    const itemSelected = !isNullOrUndefined(selectedItem);
+
+    const text = itemSelected
+        ? selectedItem?.displayValue
+        : caption;
+
+    const deselectVisible = deselectable && itemSelected;
+
+    const elClassName = getClassName([
+        "dropdown-trigger",
+        "bbr-dropdown__label",
+        isNullOrEmpty(className) ? "" : `${className}--md`,
+        itemSelected ? "" : "bbr-dropdown__label--default",
+        "button"
+    ]);
+
+    return (
+        <label
+            className={elClassName}
+            onClick={onClick}
+        >
+            {deselectVisible &&
+                <Icon name="plus-lg" size={ElementSize.Medium} />
+            }
+            <span
+                className={deselectVisible ? "mx-2" : "mr-2"}
+                title={itemSelected ? text : undefined}
+            >
+                {text}
+            </span>
+            <Icon name="arrow-down" size={ElementSize.Medium} />
+        </label>
+    );
+};
+
+export default DropdownLabel;

package/src/components/dropdown/components/withLabel/index.tsx

@@ -0,0 +1,201 @@
+import { MouseEvent, useCallback, useId, useState } from "react";
+
+import { isNullOrUndefined, isNullOrEmpty, getClassName } from "@bodynarf/utils";
+
+import { getValidationValues } from "@bbr/utils";
+import { useComponentOutsideClick } from "@bbr/hooks";
+
+import { DropdownProps } from "@bbr/components/dropdown";
+import DropdownItem from "@bbr/components/dropdown/components/item";
+import DropdownLabel from "@bbr/components/dropdown/components/label";
+
+const DropdownWithLabel = ({
+    items,
+    value, onSelect, validationState,
+    deselectable,
+    className, hideOnOuterClick, listMaxHeight,
+
+    label, placeholder, disabled
+}: DropdownProps): JSX.Element => {
+    const id = useId();
+
+    const [isListVisible, setListVisible] = useState<boolean>(false);
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(undefined, validationState);
+
+    const onItemClick = useCallback(
+        (event: React.MouseEvent<HTMLLIElement>) => {
+            if (disabled ?? false) {
+                return;
+            }
+
+            const target = event.target as HTMLLIElement;
+
+            if (isNullOrUndefined(target)) {
+                return;
+            }
+
+            const dataValue = target.dataset["dropdownItemValue"];
+
+            if (isNullOrEmpty(dataValue)) {
+                return;
+            }
+
+            const item = items.find(x => x.value === dataValue);
+
+            if (isNullOrUndefined(item)) {
+                return;
+            }
+
+            if (value === item) {
+                setListVisible(false);
+                return;
+            }
+
+            onSelect(item);
+            setListVisible(false);
+        }, [setListVisible, value, items, onSelect, disabled]);
+
+    const onLabelClick = useCallback(
+        (event: MouseEvent<HTMLLabelElement>): void => {
+            if (disabled ?? false) {
+                return;
+            }
+
+            const target = event.target as HTMLElement;
+
+            if (isNullOrUndefined(target)) {
+                return;
+            }
+
+            if (target.classList.contains("bi-plus-lg")) {
+                onSelect(undefined);
+            } else {
+                setListVisible(state => !state);
+            }
+        }, [onSelect, setListVisible, disabled]);
+
+    useComponentOutsideClick(
+        `[data-dropdown-id="${id}"]`, isListVisible,
+        () => setListVisible(false),
+        hideOnOuterClick,
+    );
+
+    const classNames: string = getClassName([
+        "bbr-dropdown",
+        (disabled ?? false) ? "bbr-dropdown--disabled" : "",
+        isListVisible ? "is-active" : "",
+        isNullOrEmpty(listMaxHeight) ? "bbr-dropdown--height-default" : "",
+        className,
+        "dropdown"
+    ]);
+
+    const labelClassName = getClassName([
+        "label",
+        label!.className
+    ]);
+
+    if (label!.horizontal) {
+        const labelContainerClassName = getClassName([
+            "field-label",
+            "is-normal",
+            label!.horizontalContainerClassName
+        ]);
+
+        const fieldContainerClassName = getClassName([
+            "field-body",
+            label!.horizontalFieldContainerClassName
+        ]);
+
+        return (
+            <div className="bbr-dropdown__root-container--with-label bbr-input field is-horizontal">
+                <div className={labelContainerClassName}>
+                    <label
+                        className={labelClassName}
+                        htmlFor={id}
+                    >
+                        {label!.caption}
+                    </label>
+                </div>
+                <div className={fieldContainerClassName}>
+                    <div className="field">
+                        <div
+                            key={id}
+                            className={classNames}
+                            data-dropdown-id={id}
+                        >
+                            <DropdownLabel
+                                className={styleClassName}
+                                caption={placeholder}
+                                deselectable={deselectable === true}
+                                selectedItem={value}
+                                onClick={onLabelClick}
+                            />
+                            <div className="dropdown-menu">
+                                {items.length > 0
+                                    ? <ul className="dropdown-content" style={{ maxHeight: listMaxHeight }}>
+                                        {items.map(item =>
+                                            <DropdownItem
+                                                key={item.id}
+                                                item={item}
+                                                selected={value?.value === item.value}
+                                                onClick={onItemClick}
+                                            />
+                                        )}
+                                    </ul>
+                                    : <span className="dropdown-content dropdown-item">No items found</span>
+                                }
+                            </div>
+                        </div>
+                        {isValidationDefined && validationMessages.length > 0 &&
+                            <p className={`help m-help ${styleClassName}`}>{validationMessages.join("\n")}</p>
+                        }
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="field">
+            <label
+                className={labelClassName}
+                htmlFor={id}
+            >
+                {label!.caption}
+            </label>
+            <div
+                key={id}
+                className={classNames}
+                data-dropdown-id={id}
+            >
+                <DropdownLabel
+                    className={styleClassName}
+                    caption={placeholder}
+                    deselectable={deselectable === true}
+                    selectedItem={value}
+                    onClick={onLabelClick}
+                />
+                <div className="dropdown-menu">
+                    {items.length > 0
+                        ? <ul className="dropdown-content" style={{ maxHeight: listMaxHeight }}>
+                            {items.map(item =>
+                                <DropdownItem
+                                    key={item.id}
+                                    item={item}
+                                    selected={value?.value === item.value}
+                                    onClick={onItemClick}
+                                />
+                            )}
+                        </ul>
+                        : <span className="dropdown-content dropdown-item">No items found</span>
+                    }
+                </div>
+            </div>
+            {isValidationDefined && validationMessages.length > 0 &&
+                <p className={`help m-help ${styleClassName}`}>{validationMessages.join("\n")}</p>
+            }
+        </div>
+    );
+};
+
+export default DropdownWithLabel;

package/src/components/dropdown/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./component";
+export * from "./types";

package/{components/dropdown/types.d.ts → src/components/dropdown/types.ts}

@@ -1,46 +1,59 @@
 import { BaseElementProps, InputLabel, ValidationState } from "@bbr/components";
+
 /** Dropdown item */
 export interface SelectableItem {
     /** Unique item identifier */
     id: string;
+
     /** Item value */
     value: string;
+
     /** Displaying text */
     displayValue: string;
 }
+
 /** Dropdown component props type */
 export interface DropdownProps extends BaseElementProps {
     /** Items which can be selected */
     items: Array<SelectableItem>;
+
     /** Input element placeholder */
     placeholder: string;
+
     /**
      * Action to update selected value, which stored outside
     */
     onSelect: (item?: SelectableItem) => void;
+
     /**
      * Selected value.
      * Must be stored outside
     */
     value?: SelectableItem;
+
     /** Hide dropdown list when its opened and user click outside */
     hideOnOuterClick: boolean;
+
     /** Can user deselect */
     deselectable?: boolean;
+
     /** Custom dropdown list max-height property */
     listMaxHeight?: string;
+
     /**
      * Should dropdown be compact
      * Will have width by maximum current selection item width
      */
     compact?: boolean;
+
     /**
      * Is element disabled
      */
     disabled?: boolean;
+
     /** Label configuration */
     label?: InputLabel;
+
     /** Current validation state */
     validationState?: ValidationState;
-}
-//# sourceMappingURL=types.d.ts.map
+}

package/src/components/icon/component/index.tsx

@@ -0,0 +1,34 @@
+import { getClassName } from "@bodynarf/utils";
+
+import "./style.scss";
+
+import { ElementSize } from "@bbr/components";
+
+import { IconProps } from "@bbr/components/icon";
+
+const sizeToClassMap: Map<ElementSize, string> = new Map([
+    [ElementSize.Small, "bbr-icon--size-small"],
+    [ElementSize.Normal, ""],
+    [ElementSize.Medium, "bbr-icon--size-medium"],
+    [ElementSize.Large, "bbr-icon--size-large"]
+]);
+
+/**
+ * Icon component. Based on bootstrap icons
+ */
+export default function Icon({
+    name, size = ElementSize.Normal,
+    className,
+}: IconProps): JSX.Element {
+    const classNames = getClassName([
+        "bbr-icon",
+        "bi",
+        `bi-${name}`,
+        sizeToClassMap.has(size) ? sizeToClassMap.get(size) : "",
+        className
+    ]);
+
+    return (
+        <i className={classNames}></i>
+    );
+}

package/src/components/icon/component/style.scss

@@ -0,0 +1,21 @@
+.bbr-icon {
+    transition: 0.15s ease-in-out color;
+    font-size: 1rem;
+
+    &--size-small {
+        font-size: 0.85rem;
+    }
+    &--size-medium {
+        font-size: 1.25rem;
+    }
+    &--size-large {
+        font-size: 2rem;
+    }
+
+    &--right {
+        margin-left: 0.5rem;
+    }
+    &--left {
+        margin-right: 0.5rem;
+    }
+}

package/src/components/icon/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./component";
+export * from "./types";

package/{components/icon/types.d.ts → src/components/icon/types.ts}

@@ -1,4 +1,5 @@
 import { ElementSize } from "@bbr/components";
+
 /** Icon component props */
 export interface IconProps {
     /**
@@ -8,9 +9,10 @@ export interface IconProps {
      * // For class name check bootstrap icons website
     */
     name: string;
+
     /** Additional classname */
     className?: string;
+
     /** Icon size */
     size?: ElementSize;
 }
-//# sourceMappingURL=types.d.ts.map

package/src/components/index.ts

@@ -0,0 +1,13 @@
+export * from "./accordion";
+export * from "./anchor";
+export * from "./button";
+export * from "./dropdown";
+export * from "./icon";
+export * from "./paginator";
+export * from "./search";
+export * from "./tabs";
+export * from "./tag";
+
+export * from "./primitives";
+
+export * from "./types";

package/src/components/paginator/component/index.tsx

@@ -0,0 +1,131 @@
+import { useCallback, useMemo, MouseEvent } from "react";
+
+import { getClassName, isNullOrEmpty } from "@bodynarf/utils";
+
+import { generatePageNumbers, PaginatorProps } from "@bbr/components/paginator";
+
+/**
+ * Paginator component.
+ * Used for visualization of pagging configuration
+*/
+export default function Paginator({
+    count, onPageChange, currentPage,
+    position, rounded, size, className,
+    showNextButtons, nearPagesCount
+}: PaginatorProps): JSX.Element {
+    const page = currentPage || 0;
+
+    const pageChange = useCallback(
+        (event: MouseEvent<HTMLElement>) => {
+            const target = event.target as HTMLElement;
+
+            const pageRaw = target.dataset["page"];
+
+            if (isNullOrEmpty(pageRaw)) {
+                return;
+            }
+
+            const page = +pageRaw!;
+
+            if (page !== currentPage && page > 0 && page <= count) {
+                onPageChange(page);
+            }
+        }, [onPageChange, currentPage, count]);
+
+    const pageNumbers = useMemo(() => generatePageNumbers(page, count, nearPagesCount), [page, count]);
+
+    const canGoBack = useMemo(() => page > 1, [page]);
+    const canGoForward = useMemo(() => page < count, [page, count]);
+
+    if (pageNumbers.length <= 1) {
+        return <></>;
+    }
+
+    const classNames = getClassName([
+        "bbr-paginator",
+        "pagination",
+        paginationPositionToClassMap.has(position || "") ? paginationPositionToClassMap.get(position || "") : "",
+        rounded == true ? "is-rounded" : "",
+        isNullOrEmpty(size) ? "" : `is-${size}`,
+        className
+    ]);
+
+    return (
+        <nav className={classNames} role="navigation" aria-label="pagination">
+            {showNextButtons === true &&
+                <>
+                    <a
+                        className={`pagination-previous${canGoBack ? "" : " is-disabled"}`}
+                        data-page={page - 1}
+                        onClick={pageChange}
+                    >
+                        Previous
+                    </a>
+                    <a
+                        className={`pagination-next${canGoForward ? "" : " is-disabled"}`}
+                        data-page={page + 1}
+                        onClick={pageChange}
+                    >
+                        Next page
+                    </a>
+                </>
+            }
+            <ul className="pagination-list">
+                {page !== 1 && !pageNumbers.includes(1) &&
+                    <>
+                        <li>
+                            <a
+                                className="pagination-link"
+                                aria-label="Goto page 1"
+                                data-page={1}
+                                onClick={pageChange}
+                            >
+                                1
+                            </a>
+                        </li>
+                        <li>
+                            <span className="pagination-ellipsis">&hellip;</span>
+                        </li>
+                    </>
+                }
+                {pageNumbers.map(x =>
+                    <li key={x}>
+                        <a
+                            className={`pagination-link${page === x ? " is-current" : ""}`}
+                            aria-label={`Goto page ${x}`}
+                            data-page={x}
+                            onClick={pageChange}
+                        >
+                            {x}
+                        </a>
+                    </li>
+                )}
+                {page != count && !pageNumbers.includes(count) &&
+                    <>
+                        <li>
+                            <span className="pagination-ellipsis">&hellip;</span>
+                        </li>
+                        <li>
+                            <a
+                                className="pagination-link"
+                                aria-label={`Goto page ${count}`}
+                                data-page={count}
+                                onClick={pageChange}
+                            >
+                                {count}
+                            </a>
+                        </li>
+                    </>
+                }
+            </ul>
+        </nav>
+    );
+}
+
+/**
+ * Position setting to css class name map
+ */
+const paginationPositionToClassMap: Map<string, string> = new Map([
+    ["center", "is-centered"],
+    ["right", "is-right"]
+]);

package/src/components/paginator/index.ts

@@ -0,0 +1,3 @@
+export { default } from "./component";
+export * from "./types";
+export * from "./utils";

package/src/components/paginator/types.ts

@@ -0,0 +1,40 @@
+import { ElementSize } from "@bbr/components";
+
+export interface PaginatorProps {
+    /** Amount of pages */
+    count: number;
+
+    /** Page change handler */
+    onPageChange: (page: number) => void;
+
+    /** Current page */
+    currentPage?: number;
+
+    /**
+     * Page numbers position.
+     * Useful with `showNextButtons = true`
+    */
+    position?:
+    | "left" /* default */
+    | "center"
+    | "right"
+    ;
+
+    /** Buttons should have rounded borders */
+    rounded?: boolean;
+
+    /** Size of paginator component elements */
+    size?: ElementSize;
+
+    /** Additional class names */
+    className?: string;
+
+    /** Display "Previous" \ "Next" buttons */
+    showNextButtons?: boolean;
+
+    /**
+     * Max amount of pages from left & right from current page. `3` by default
+     * @description If set to 2 it will show `[1, 2], 3, [4, 5]`
+    */
+    nearPagesCount?: number;
+}

package/src/components/paginator/utils.ts

@@ -0,0 +1,19 @@
+/**
+ * Get nearest numbers from each side (left & right)
+ * @param page Number of current page
+ * @param count Amount of pages
+ * @param size Amount of pages from left & right to current page. Default is 3
+ * @throws Current page is greater than pages amount
+ * @returns Array of nearest numbers to current page
+ */
+export const generatePageNumbers = (page: number, count: number, size: number = 3): Array<number> => {
+    if (page < 0 || count <= 0 || page > count) {
+        return [];
+    }
+
+    return [
+        ...new Array(size).fill(page).map((_, i) => page - i - 1).filter(x => x > 0 && x < page).reverse(),
+        page,
+        ...new Array(size).fill(page).map((_, i) => page + i + 1).filter(x => x > 0 && x > page && x <= count)
+    ];
+};