@bodynarf/react.components 1.7.2 → 1.7.4

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)
+    ];
+};

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

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

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

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

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

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

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

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

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

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

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

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

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