@brizy/ui/es/Select/index.js

React elements in Brizy style

import React, { useContext, useMemo } from "react";
import { classNames } from "../classNamesFn";
import AntSelect from "antd/lib/select";
import { FrameContentContext } from "../Frame/FrameContent";
import { TypographyParagraph } from "../Typography";
import { Close } from "../icons";
import { Icon } from "..";
import { getArrowHoverColor } from "./utils";
import { useTranslation } from "../utils/localization/useTranslation";
export const Select = (props) => {
    const { t } = useTranslation();
    const context = useContext(FrameContentContext);
    const { disabled, allowClear, onClear, size = "middle", align = "left", theme, value, disabledBorder, placeholder, checkMark, onChange, children, getContainer, } = props;
    const arrowHoverColor = useMemo(() => getArrowHoverColor(value !== undefined && allowClear === true, theme), [value, allowClear, theme]);
    const classNameDropdown = classNames()("input-select-dropdown", {
        [`input-select-dropdown--${theme}`]: theme,
        [`input-select-dropdown--${size}`]: size,
        "input-select-dropdown--withCheck": checkMark,
    });
    const className = classNames()("input-select", {
        [`input-select--${theme}`]: theme,
        [`input-select--${align}`]: align,
        "input-select-disabled": disabled,
        "input-select-border": disabledBorder,
    });
    const handleGetContainer = () => {
        if (typeof getContainer === "function") {
            return getContainer();
        }
        if (context.node) {
            return context.node;
        }
        return document.body;
    };
    return (React.createElement(AntSelect, { allowClear: allowClear, onClear: onClear, clearIcon: React.createElement(Icon, { source: Close, size: "12px" }), className: className, dropdownClassName: classNameDropdown, disabled: disabled, size: size, style: arrowHoverColor, value: value, onChange: onChange, getPopupContainer: handleGetContainer, placeholder: placeholder, notFoundContent: React.createElement(TypographyParagraph, { size: "xsmall", strong: true, color: "gray-mid", italic: true }, t("No Items available")) }, children));
};
export { SelectOption } from "./SelectOption";