@bodynarf/react.components 1.7.4 → 1.7.6

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

@@ -1,121 +0,0 @@
-import { useCallback, useId, useState, MouseEvent } from "react";
-
-import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/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 DropdownCompact = ({
-    items,
-    value, onSelect,
-    deselectable,
-    className, hideOnOuterClick, listMaxHeight,
-    placeholder, compact, disabled,
-}: DropdownProps): JSX.Element => {
-    const id = useId();
-
-    const [isListVisible, setListVisible] = useState<boolean>(false);
-
-    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" : "",
-        (compact ?? false) ? "bbr-dropdown--compact" : "",
-        isListVisible ? "is-active" : "",
-        isNullOrEmpty(listMaxHeight) ? "bbr-dropdown--height-default" : "",
-        className,
-        "dropdown"
-    ]);
-
-    return (
-        <div
-            key={id}
-            className={classNames}
-            data-dropdown-id={id}
-        >
-            <DropdownLabel
-                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>
-    );
-};
-
-export default DropdownCompact;

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

@@ -1,30 +0,0 @@
-import { SelectableItem } from "@bbr/components/dropdown";
-
-/** Dropdown item props */
-interface DropdownItemProps {
-    /** Item to present in dropdown */
-    item: SelectableItem;
-
-    /** Is item selected*/
-    selected: boolean;
-
-    /** Item click handler */
-    onClick: (event: React.MouseEvent<HTMLLIElement>) => void;
-}
-
-/** Single item in dropdown component */
-const DropdownItem = ({ item, selected, onClick }: DropdownItemProps): JSX.Element => {
-    return (
-        <li
-            key={item.id}
-            className={`bbr-dropdown-item dropdown-item${selected ? " is-active" : ""}`}
-            onClick={onClick}
-            data-dropdown-item-value={item.value}
-            title={item.displayValue}
-        >
-            {item.displayValue}
-        </li>
-    );
-};
-
-export default DropdownItem;

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

@@ -1,68 +0,0 @@
-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

@@ -1,201 +0,0 @@
-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

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

package/src/components/dropdown/types.ts

@@ -1,59 +0,0 @@
-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;
-}

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

@@ -1,34 +0,0 @@
-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/index.ts

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

package/src/components/icon/types.ts

@@ -1,18 +0,0 @@
-import { ElementSize } from "@bbr/components";
-
-/** Icon component props */
-export interface IconProps {
-    /**
-     * Icon name. Must be without `bi-`
-     * @example ["Arrow repeat", "arrow-repeat"]
-     * // Icon name to icon class name.
-     * // For class name check bootstrap icons website
-    */
-    name: string;
-
-    /** Additional classname */
-    className?: string;
-
-    /** Icon size */
-    size?: ElementSize;
-}

package/src/components/index.ts

@@ -1,13 +0,0 @@
-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

@@ -1,131 +0,0 @@
-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

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