@bodynarf/react.components 1.7.2 → 1.7.4

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/src/components/primitives/multiline/types.ts

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

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;

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

@@ -0,0 +1,66 @@
+import { ChangeEvent, useCallback } from "react";
+
+import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
+
+import { ElementSize } from "@bbr/components";
+import { getValidationValues } from "@bbr/utils";
+
+import { NumberProps } from "@bbr/components/number";
+
+/** Number component without label */
+const NumberWithoutLabel = ({
+    onValueChange, readonly, disabled, defaultValue, validationState,
+    name,
+    className, size, style, rounded, loading,
+    placeholder,
+    onBlur,
+    step,
+}: NumberProps): JSX.Element => {
+    const onChange = useCallback(
+        (event: ChangeEvent<HTMLInputElement>) => onValueChange(+event.target.value),
+        [onValueChange]
+    );
+
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+
+    const elClassName = getClassName([
+        className,
+        "is-{0}".format(getValueOrDefault(size, ElementSize.Normal)),
+        rounded === true ? "is-rounded" : "",
+        styleClassName,
+        "input",
+    ]);
+
+    const containerClassName = getClassName([
+        "control",
+        "bbr-input",
+        loading === true ? "is-loading" : "",
+    ]);
+
+    const id = name || generateGuid();
+
+    return (
+        <>
+            <div className={containerClassName}>
+                <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>
+            }
+        </>
+    );
+};
+
+export default NumberWithoutLabel;

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

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

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

@@ -0,0 +1,14 @@
+import { BaseInputElementProps } from "@bbr/components";
+
+/** Number component props type */
+export interface NumberProps extends BaseInputElementProps<number> {
+    /** Focus out event handler */
+    onBlur?: () => void;
+
+    /**
+     * Difference which will be used to change value after step button click.
+     * See html input step documentation.
+     * @default 1
+    */
+    step?: number;
+}

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

@@ -0,0 +1,19 @@
+import { isNullOrUndefined } from "@bodynarf/utils";
+
+import "./style.scss";
+
+import { PasswordProps } from "@bbr/components/password";
+
+import PasswordWithLabel from "@bbr/components/password/components/withLabel";
+import PasswordWithoutLabel from "@bbr/components/password/components/withoutLabel";
+
+/** Password input component */
+const Password = (props: PasswordProps): JSX.Element => {
+    if (isNullOrUndefined(props.label)) {
+        return <PasswordWithoutLabel {...props} />;
+    }
+
+    return <PasswordWithLabel {...props} />;
+};
+
+export default Password;

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

@@ -0,0 +1,16 @@
+.bbr-password {
+    &:focus ~ .icon:not(:hover) {
+        color: rgb(219, 219, 219) !important;
+    }
+
+    &__wrapper {
+        .icon {
+            pointer-events: inherit !important;
+            cursor: pointer;
+
+            &:hover {
+                color: rgb(74, 74, 74);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,147 @@
+import { ChangeEvent, useCallback, useState } from "react";
+
+import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
+
+import { getValidationValues } from "@bbr/utils";
+import { ElementSize } from "@bbr/components";
+import Icon from "@bbr/components/icon";
+
+import { PasswordProps } from "@bbr/components/password";
+
+const PasswordWithLabel = ({
+    onValueChange, disabled, validationState,
+    name,
+    className, size, style, rounded, loading,
+    label, placeholder,
+    canShowPassword,
+}: PasswordProps): JSX.Element => {
+    const onChange = useCallback(
+        (event: ChangeEvent<HTMLInputElement>) => onValueChange(event.target.value),
+        [onValueChange]
+    );
+
+    const [contentIsHidden, setContentIsHidden] = useState(true);
+    const onIconClick = useCallback(() => setContentIsHidden(state => !state), [setContentIsHidden]);
+
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
+    const id = name || generateGuid();
+
+    const elClassName = getClassName([
+        className,
+        elSizeClassName,
+        rounded === true ? "is-rounded" : "",
+        styleClassName,
+        "bbr-password",
+        "input",
+    ]);
+
+    const inputContainerClassName = getClassName([
+        "control",
+        loading === true ? "is-loading" : "",
+        canShowPassword ? "has-icons-right" : "",
+        "bbr-password__wrapper",
+    ]);
+
+    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={contentIsHidden ? "password" : "text"}
+                                className={elClassName}
+                                placeholder={placeholder}
+                                disabled={disabled}
+                                onChange={onChange}
+                                name={id}
+                                id={id}
+                            />
+                            {canShowPassword && !loading &&
+                                <span
+                                    className={`icon is-right ${elSizeClassName}`}
+                                    onMouseEnter={onIconClick}
+                                    onMouseLeave={onIconClick}
+                                    title="Show password"
+                                >
+                                    <Icon
+                                        name={contentIsHidden ? "eye" : "eye-slash"}
+                                        size={ElementSize.Medium}
+                                    />
+                                </span>
+                            }
+                        </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={contentIsHidden ? "password" : "text"}
+                    className={elClassName}
+                    placeholder={placeholder}
+                    disabled={disabled}
+                    onChange={onChange}
+                    name={id}
+                    id={id}
+                />
+                {canShowPassword && !loading &&
+                    <span
+                        className={`icon is-right ${elSizeClassName}`}
+                        onMouseEnter={onIconClick}
+                        onMouseLeave={onIconClick}
+                    >
+                        <Icon
+                            name={contentIsHidden ? "eye" : "eye-slash"}
+                            size={ElementSize.Medium}
+                        />
+                    </span>
+                }
+            </div>
+            {isValidationDefined && validationMessages.length > 0 &&
+                <p className={`help m-help ${styleClassName}`}>{validationMessages.join("\n")}</p>
+            }
+        </div>
+    );
+};
+
+export default PasswordWithLabel;

package/src/components/primitives/password/components/withoutLabel/index.tsx

@@ -0,0 +1,79 @@
+import { ChangeEvent, useCallback, useState } from "react";
+
+import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
+
+import { ElementSize } from "@bbr/components";
+import { getValidationValues } from "@bbr/utils";
+import Icon from "@bbr/components/icon";
+
+import { PasswordProps } from "@bbr/components/password";
+
+const PasswordWithoutLabel = ({
+    onValueChange, disabled, validationState,
+    name,
+    className, size, style, rounded, loading,
+    placeholder,
+    canShowPassword,
+}: PasswordProps): JSX.Element => {
+    const onChange = useCallback(
+        (event: ChangeEvent<HTMLInputElement>) => onValueChange(event.target.value),
+        [onValueChange]
+    );
+
+    const [contentIsHidden, setContentIsHidden] = useState(true);
+    const onIconClick = useCallback(() => setContentIsHidden(state => !state), [setContentIsHidden]);
+
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
+    const id = name || generateGuid();
+
+    const elClassName = getClassName([
+        className,
+        elSizeClassName,
+        rounded === true ? "is-rounded" : "",
+        styleClassName,
+        "bbr-password",
+        "input",
+    ]);
+
+    const containerClassName = getClassName([
+        "control",
+        "bbr-input",
+        loading === true ? "is-loading" : "",
+        canShowPassword ? "has-icons-right" : "",
+        "bbr-password__wrapper",
+    ]);
+
+    return (
+        <>
+            <div className={containerClassName}>
+                <input
+                    type={contentIsHidden ? "password" : "text"}
+                    className={elClassName}
+                    placeholder={placeholder}
+                    disabled={disabled}
+                    onChange={onChange}
+                    name={id}
+                    id={id}
+                />
+                {canShowPassword && !loading &&
+                    <span
+                        className={`icon is-right ${elSizeClassName}`}
+                        onMouseEnter={onIconClick}
+                        onMouseLeave={onIconClick}
+                    >
+                        <Icon
+                            name={contentIsHidden ? "eye" : "eye-slash"}
+                            size={ElementSize.Medium}
+                        />
+                    </span>
+                }
+            </div>
+            {isValidationDefined && validationMessages.length > 0 &&
+                <p className={`help m-help ${styleClassName}`}>{validationMessages.join("\n")}</p>
+            }
+        </>
+    );
+};
+
+export default PasswordWithoutLabel;

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

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

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

@@ -0,0 +1,10 @@
+import { BaseInputElementProps } from "@bbr/components";
+
+/** Password component props type */
+export interface PasswordProps extends Omit<BaseInputElementProps<string>, "defaultValue" | "readonly"> {
+    /**
+     * Is icon "Show password" visible.
+     * Will show password on click
+    */
+    canShowPassword: boolean;
+}

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

@@ -0,0 +1,20 @@
+import { isNullOrUndefined } from "@bodynarf/utils";
+
+import "../../../../common.scss";
+
+import { TextProps } from "@bbr/components";
+
+import TextWithLabel from "@bbr/components/text/components/textWithLabel";
+import TextWithoutLabel from "@bbr/components/text/components/textWithoutLabel";
+
+/** Textual input component */
+const Text = (props: TextProps): JSX.Element => {
+    if (isNullOrUndefined(props.label)) {
+        return (<TextWithoutLabel {...props} />);
+    }
+    else {
+        return (<TextWithLabel {...props} />);
+    }
+};
+
+export default Text;