@bodynarf/react.components 1.7.4 → 1.7.5

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";

package/src/components/paginator/types.ts

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

@@ -1,19 +0,0 @@
-/**
- * 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)
-    ];
-};

package/src/components/primitives/checkbox/component/index.tsx

@@ -1,102 +0,0 @@
-import { ChangeEvent, useCallback } from "react";
-
-import { generateGuid, getClassName, isNullOrUndefined } from "@bodynarf/utils";
-
-import "./style.scss";
-
-import { CheckBoxProps } from "@bbr/components/checkbox";
-
-/** Boolean input component */
-const CheckBox = ({
-    label,
-    onValueChange, defaultValue,
-    name, disabled,
-    rounded, size, style, block, withoutBorder, hasBackgroundColor, fixBackgroundColor,
-    isFormLabel,
-}: CheckBoxProps): JSX.Element => {
-    const onChecked = useCallback(
-        (event: ChangeEvent<HTMLInputElement>) => onValueChange(event.target.checked),
-        [onValueChange]
-    );
-
-    const id = name || generateGuid();
-
-    const className = getClassName([
-        "is-checkradio",
-        "m-check-radio",
-        (hasBackgroundColor ?? false) ? "has-background-color" : "",
-        (fixBackgroundColor ?? false) && (hasBackgroundColor ?? false) ? "m-has-background-color" : "",
-        isNullOrUndefined(size) ? "" : size === "normal" ? "" : `is-${size}`,
-        (rounded ?? false) ? "is-circle" : "",
-        isNullOrUndefined(style) ? "" : `is-${style}`,
-        (block ?? false) ? "is-block" : "",
-        (withoutBorder ?? false) ? "has-no-border" : "",
-    ]);
-
-    if (!isNullOrUndefined(label) && isFormLabel === true) {
-        const labelClassName = getClassName([
-            "label",
-            label!.className
-        ]);
-
-        const labelContainerClassName = getClassName([
-            "field-label",
-            label!.horizontalContainerClassName
-        ]);
-
-        const fieldContainerClassName = getClassName([
-            "field-body",
-            label!.horizontalFieldContainerClassName
-        ]);
-
-        return (
-            <div className="bbr-input field is-horizontal">
-                <div className={labelContainerClassName}>
-                    <label
-                        className={labelClassName}
-                    >
-                        {label!.caption}
-                    </label>
-                </div>
-                <div className={fieldContainerClassName}>
-                    <div className="field">
-                        <input
-                            type="checkbox"
-                            name={id}
-                            id={id}
-                            disabled={disabled}
-                            onChange={onChecked}
-                            className={className}
-                            defaultChecked={defaultValue}
-                        />
-                        <label
-                            htmlFor={id}
-                        >
-                        </label>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    return (
-        <div className="bbr-input field">
-            <input
-                type="checkbox"
-                name={id}
-                id={id}
-                disabled={disabled}
-                onChange={onChecked}
-                className={className}
-                defaultChecked={defaultValue}
-            />
-            <label
-                htmlFor={id}
-            >
-                {label?.caption}
-            </label>
-        </div>
-    );
-};
-
-export default CheckBox;

package/src/components/primitives/checkbox/component/style.scss

@@ -1,10 +0,0 @@
-.is-checkradio.m-check-radio[type="checkbox"] {
-    &.has-background-color.m-has-background-color:not(:checked) + label::before {
-        border-color: #dbdbdb !important;
-        background-color: transparent !important;
-    }
-    & + label::before,
-    & + label:before {
-        top: 0.125rem;
-    }
-}

package/src/components/primitives/checkbox/index.ts

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

package/src/components/primitives/checkbox/types.ts

@@ -1,29 +0,0 @@
-import { BaseInputElementProps } from "@bbr/components";
-
-/** Checkbox component props type */
-export interface CheckBoxProps extends BaseInputElementProps<boolean> {
-    /** Is full colored checkbox */
-    block?: boolean;
-
-    /** Remove the checkbox border */
-    withoutBorder?: boolean;
-
-    /** 
-     * Checkbox has background color.
-     * Only works if style is set
-    */
-    hasBackgroundColor?: boolean;
-
-    /**
-     * Set unchecked background as transparent.
-     * Only used with `hasBackgroundColor` set as `true`
-     * @example `{ style: ElementColor.Info, hasBackgroundColor: true, fixBackgroundColor: true }` -
-    */
-    fixBackgroundColor?: boolean;
-
-    /**
-     * Display component with label as form element.
-     * Label will be placed at left
-     */
-    isFormLabel?: boolean;
-}

package/src/components/primitives/date/component/index.tsx

@@ -1,129 +0,0 @@
-import { ChangeEvent, useCallback } from "react";
-
-import { generateGuid, getClassName, getValueOrDefault, isStringEmpty } from "@bodynarf/utils";
-
-import "../../../../common.scss";
-
-import { ElementSize } from "@bbr/components";
-import { getValidationValues } from "@bbr/utils";
-
-import { DateProps } from "@bbr/components/date";
-
-/** Date input component */
-const DatePicker = ({
-    defaultValue, onValueChange, readonly, disabled, validationState,
-    name,
-    size, className, rounded, loading, style,
-    label,
-    onBlur
-}: DateProps): JSX.Element => {
-    const onChange = useCallback(
-        (event: ChangeEvent<HTMLInputElement>) =>
-            onValueChange(
-                isStringEmpty(event.target.value)
-                    ? undefined
-                    : new Date(event.target.value)
-            ),
-        [onValueChange]
-    );
-
-    const id = name || generateGuid();
-    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
-
-    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
-
-    const elClassName = getClassName([
-        className,
-        elSizeClassName,
-        styleClassName,
-        rounded === true ? "is-rounded" : "",
-        "input",
-    ]);
-
-    const inputContainerClassName = getClassName([
-        "control",
-        loading === true ? "is-loading" : "",
-    ]);
-    const stingifiedDefValue = defaultValue?.toISOString().split("T")[0];
-
-    const labelClassName = getClassName([
-        "label",
-        !label.horizontal ? elSizeClassName : "",
-        label.className
-    ]);
-
-    if (label.horizontal) {
-        const labelContainerClassName = getClassName([
-            "field-label",
-            elSizeClassName,
-            label.horizontalContainerClassName
-        ]);
-
-        const fieldContainerClassName = getClassName([
-            "field-body",
-            label.horizontalFieldContainerClassName
-        ]);
-
-        return (
-            <div className="bbr-input field is-horizontal">
-                <div className={labelContainerClassName}>
-                    <label
-                        className={labelClassName}
-                        htmlFor={id}
-                    >
-                        {label.caption}
-                    </label>
-                </div>
-                <div className={fieldContainerClassName}>
-                    <div className="field">
-                        <div className={inputContainerClassName}>
-                            <input
-                                type="date"
-                                className={elClassName}
-                                readOnly={readonly}
-                                disabled={disabled}
-                                defaultValue={stingifiedDefValue}
-                                onChange={onChange}
-                                onBlur={onBlur}
-                                name={id}
-                                id={id}
-                            />
-                        </div>
-                        {isValidationDefined && validationMessages.length > 0 &&
-                            <p className={`help m-help ${styleClassName}`}>{validationMessages.join("\n")}</p>
-                        }
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    return (
-        <div className="bbr-input field">
-            <label
-                className={labelClassName}
-                htmlFor={id}
-            >
-                {label.caption}
-            </label>
-            <div className={inputContainerClassName}>
-                <input
-                    type="date"
-                    className={elClassName}
-                    readOnly={readonly}
-                    disabled={disabled}
-                    defaultValue={stingifiedDefValue}
-                    onChange={onChange}
-                    onBlur={onBlur}
-                    name={id}
-                    id={id}
-                />
-            </div>
-            {isValidationDefined && validationMessages.length > 0 &&
-                <p className={`help m-help ${styleClassName}`}>{validationMessages.join("\n")}</p>
-            }
-        </div>
-    );
-};
-
-export default DatePicker;

package/src/components/primitives/date/index.ts

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

package/src/components/primitives/date/types.ts

@@ -1,10 +0,0 @@
-import { BaseInputElementProps, InputLabel } from "@bbr/components";
-
-/** Date input component props type */
-export interface DateProps extends Omit<BaseInputElementProps<Date | undefined>, "placeholder"> {
-    /** Label configuration */
-    label: InputLabel;
-
-    /** Focus out event handler */
-    onBlur?: () => void;
-}

package/src/components/primitives/index.ts

@@ -1,7 +0,0 @@
-export * from "./checkbox";
-export * from "./date";
-export * from "./multiline";
-export * from "./number";
-export * from "./password";
-export * from "./text";
-export * from "./types";

package/src/components/primitives/multiline/component/index.tsx

@@ -1,20 +0,0 @@
-import { isNullOrUndefined } from "@bodynarf/utils";
-
-import "../../../../common.scss";
-
-import { MultilineProps } from "@bbr/components/multiline";
-import MultilineWithoutLabel from "@bbr/components/multiline/components/multilineWithoutLabel";
-import MultilineWithLabel from "@bbr/components/multiline/components/multilineWithLabel";
-
-/** Multiline textual input component */
-const Multiline = (props: MultilineProps): JSX.Element => {
-    if (isNullOrUndefined(props.label)) {
-        return (<MultilineWithoutLabel {...props} />);
-    }
-    else {
-        return (<MultilineWithLabel {...props} />);
-    }
-
-};
-
-export default Multiline;

package/src/components/primitives/multiline/components/multilineWithLabel/index.tsx

@@ -1,125 +0,0 @@
-import { ChangeEvent, useCallback } from "react";
-
-import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
-
-import { ElementSize } from "@bbr/components";
-import { getValidationValues } from "@bbr/utils";
-
-import { MultilineProps } from "@bbr/components/multiline";
-
-/** Multiline textual input component with describing label */
-const MultilineWithLabel = ({
-    defaultValue, onValueChange, validationState, readonly, disabled,
-    name,
-    className, size, style, rounded, loading,
-    label, placeholder,
-    fixed, rows,
-    onBlur
-}: MultilineProps): JSX.Element => {
-    const onChange = useCallback(
-        (event: ChangeEvent<HTMLTextAreaElement>) => onValueChange(event.target.value),
-        [onValueChange]
-    );
-
-    const id = name || generateGuid();
-    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
-
-    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
-
-    const elClassName = getClassName([
-        className,
-        elSizeClassName,
-        rounded === true ? "is-rounded" : "",
-        styleClassName,
-        "textarea",
-        fixed === true ? "has-fixed-size" : "",
-    ]);
-
-    const inputContainerClassName = getClassName([
-        "control",
-        loading === true ? "is-loading" : "",
-    ]);
-
-    const labelClassName = getClassName([
-        "label",
-        !label!.horizontal ? elSizeClassName : "",
-        label!.className
-    ]);
-
-    if (label!.horizontal) {
-        const labelContainerClassName = getClassName([
-            "field-label",
-            elSizeClassName,
-            label!.horizontalContainerClassName
-        ]);
-
-        const fieldContainerClassName = getClassName([
-            "field-body",
-            label!.horizontalFieldContainerClassName
-        ]);
-
-        return (
-            <div className="bbr-input field is-horizontal">
-                <div className={labelContainerClassName}>
-                    <label
-                        className={labelClassName}
-                        htmlFor={id}
-                    >
-                        {label!.caption}
-                    </label>
-                </div>
-                <div className={fieldContainerClassName}>
-                    <div className="field">
-                        <div className={inputContainerClassName}>
-                            <textarea
-                                className={elClassName}
-                                placeholder={placeholder}
-                                readOnly={readonly}
-                                disabled={disabled}
-                                defaultValue={defaultValue}
-                                onChange={onChange}
-                                onBlur={onBlur}
-                                name={id}
-                                id={id}
-                                rows={rows}
-                            />
-                        </div>
-                        {isValidationDefined && validationMessages.length > 0 &&
-                            <p className={`help m-help ${styleClassName}`}>{validationMessages.join("\n")}</p>
-                        }
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    return (
-        <div className="bbr-input field">
-            <label
-                className={labelClassName}
-                htmlFor={id}
-            >
-                {label!.caption}
-            </label>
-            <div className={inputContainerClassName}>
-                <textarea
-                    className={elClassName}
-                    placeholder={placeholder}
-                    readOnly={readonly}
-                    disabled={disabled}
-                    defaultValue={defaultValue}
-                    onChange={onChange}
-                    onBlur={onBlur}
-                    name={id}
-                    id={id}
-                    rows={rows}
-                />
-            </div>
-            {isValidationDefined && validationMessages.length > 0 &&
-                <p className={`help m-help ${styleClassName}`}>{validationMessages.join("\n")}</p>
-            }
-        </div>
-    );
-};
-
-export default MultilineWithLabel;