@bodynarf/react.components 1.7.4 → 1.7.6

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

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

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

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

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

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

@@ -1,19 +0,0 @@
-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/components/withLabel/index.tsx

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

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

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

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

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

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

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

@@ -1,123 +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 { TextProps } from "@bbr/components/text";
-
-/** Textual input with describing label */
-const TextWithLabel = ({
-    onValueChange, readonly, disabled, defaultValue, validationState,
-    name,
-    className, size, style, rounded, loading,
-    label, placeholder,
-    onBlur,
-}: TextProps): JSX.Element => {
-    const onChange = useCallback(
-        (event: ChangeEvent<HTMLInputElement>) => 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,
-        "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="text"
-                                className={elClassName}
-                                placeholder={placeholder}
-                                readOnly={readonly}
-                                disabled={disabled}
-                                defaultValue={defaultValue}
-                                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="text"
-                    className={elClassName}
-                    placeholder={placeholder}
-                    readOnly={readonly}
-                    disabled={disabled}
-                    defaultValue={defaultValue}
-                    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 TextWithLabel;

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

@@ -1,64 +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 { TextProps } from "@bbr/components/text";
-
-/** Textual input without describing label */
-const TextWithoutLabel = ({
-    onValueChange, readonly, disabled, defaultValue, validationState,
-    name,
-    className, size, style, rounded, loading,
-    placeholder,
-    onBlur,
-}: TextProps): 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
-                    className={elClassName}
-                    type="text"
-                    placeholder={placeholder}
-                    readOnly={readonly}
-                    disabled={disabled}
-                    defaultValue={defaultValue}
-                    onChange={onChange}
-                    onBlur={onBlur}
-                    name={id}
-                    id={id}
-                />
-            </div>
-            {isValidationDefined && validationMessages.length > 0 &&
-                <p className={`help m-help ${styleClassName}`}>{validationMessages.join("\n")}</p>
-            }
-        </>
-    );
-};
-
-export default TextWithoutLabel;

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

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