@bodynarf/react.components 1.7.3 → 1.7.4

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/{components/primitives/checkbox/types.d.ts → src/components/primitives/checkbox/types.ts}

@@ -1,25 +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;
 }
-//# sourceMappingURL=types.d.ts.map

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/{components/primitives/date/types.d.ts → src/components/primitives/date/types.ts}

@@ -1,9 +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;
 }
-//# sourceMappingURL=types.d.ts.map

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;

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

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

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

package/{components/primitives/multiline/types.d.ts → src/components/primitives/multiline/types.ts}

@@ -1,11 +1,13 @@
 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;
 }
-//# sourceMappingURL=types.d.ts.map

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

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

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

@@ -0,0 +1,127 @@
+import { ChangeEvent, useCallback } from "react";
+
+import { generateGuid, getClassName, getValueOrDefault, isStringEmpty } from "@bodynarf/utils";
+
+import { ElementSize } from "@bbr/components";
+import { getValidationValues } from "@bbr/utils";
+
+import { NumberProps } from "@bbr/components/number";
+
+/** Number component with label */
+const NumberWithLabel = ({
+    onValueChange, readonly, disabled, defaultValue, validationState,
+    name,
+    className, size, style, rounded, loading,
+    label, placeholder,
+    onBlur,
+    step,
+}: NumberProps): JSX.Element => {
+    const onChange = useCallback(
+        (event: ChangeEvent<HTMLInputElement>) =>
+            onValueChange(isStringEmpty(event.target.value) ? undefined : +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,
+        "input",
+    ]);
+
+    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}>
+                            <input
+                                type="number"
+                                className={elClassName}
+                                placeholder={placeholder}
+                                readOnly={readonly}
+                                disabled={disabled}
+                                defaultValue={defaultValue}
+                                onChange={onChange}
+                                onBlur={onBlur}
+                                name={id}
+                                id={id}
+                                step={step ?? 1}
+                            />
+                        </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="number"
+                    className={elClassName}
+                    placeholder={placeholder}
+                    readOnly={readonly}
+                    disabled={disabled}
+                    defaultValue={defaultValue}
+                    onChange={onChange}
+                    onBlur={onBlur}
+                    name={id}
+                    id={id}
+                    step={step ?? 1}
+                />
+            </div>
+            {isValidationDefined && validationMessages.length > 0 &&
+                <p className={`help m-help ${styleClassName}`}>{validationMessages.join("\n")}</p>
+            }
+        </div>
+    );
+};
+
+export default NumberWithLabel;