@bodynarf/react.components 1.7.4 → 1.7.6

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

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

@@ -1,62 +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 without describing label*/
-const MultilineWithoutLabel = ({
-    onValueChange, defaultValue, validationState,
-    name, placeholder,
-    onBlur,
-    className, size, style, rounded, loading,
-    fixed, rows,
-}: MultilineProps): JSX.Element => {
-    const onChange = useCallback(
-        (event: ChangeEvent<HTMLTextAreaElement>) => onValueChange(event.target.value),
-        [onValueChange]
-    );
-
-    const id = name || generateGuid();
-    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
-
-    const elClassName = getClassName([
-        className,
-        "is-{0}".format(getValueOrDefault(size, ElementSize.Normal)),
-        rounded === true ? "is-rounded" : "",
-        styleClassName,
-        "textarea",
-        fixed === true ? "has-fixed-size" : "",
-    ]);
-
-    const inputContainerClassName = getClassName([
-        "control",
-        "bbr-input",
-        loading === true ? "is-loading" : "",
-    ]);
-
-    return (
-        <div className="field">
-            <div className={inputContainerClassName}>
-                <textarea
-                    className={elClassName}
-                    placeholder={placeholder}
-                    defaultValue={defaultValue}
-                    onChange={onChange}
-                    onBlur={onBlur}
-                    id={id}
-                    name={id}
-                    rows={rows}
-                />
-            </div>
-            {isValidationDefined && validationMessages.length > 0 &&
-                <p className={`help m-help ${styleClassName}`}>{validationMessages.join("\n")}</p>
-            }
-        </div>
-    );
-};
-
-export default MultilineWithoutLabel;

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

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

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

@@ -1,13 +0,0 @@
-import { BaseInputElementProps } from "@bbr/components";
-
-/** Multiline textual input component props type */
-export interface MultilineProps extends BaseInputElementProps<string> {
-    /** Is input should be resizable */
-    fixed?: boolean;
-
-    /** Number of initial rows count */
-    rows?: number;
-
-    /** Focus out event handler */
-    onBlur?: () => void;
-}

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

@@ -1,17 +0,0 @@
-import { isNullOrUndefined } from "@bodynarf/utils";
-
-import { NumberProps } from "@bbr/components/number";
-import NumberWithLabel from "@bbr/components/number/components/withLabel";
-import NumberWithoutLabel from "@bbr/components/number/components/withoutLabel";
-
-/** Number input component */
-const Number = (props: NumberProps): JSX.Element => {
-    if (isNullOrUndefined(props.label)) {
-        return (<NumberWithoutLabel {...props} />);
-    }
-    else {
-        return (<NumberWithLabel {...props} />);
-    }
-};
-
-export default Number;