@crossed/ui/lib/module/buttons/Button/Icon.js

A universal & performant styling library for React Native, Next.js & React

import { composeStyles } from "@crossed/styled";
import {
  cloneElement,
  isValidElement,
  useContext,
  useMemo
} from "react";
import { buttonContext } from "./context";
import {
  buttonErrorStyles,
  buttonPrimaryStyles,
  buttonSecondaryStyles,
  buttonSuccessStyles,
  buttonTertiaryStyles,
  textStyles
} from "./styles";
const ButtonIcon = ({
  children,
  style
}) => {
  const { variant, state, disabled } = useContext(buttonContext);
  const { hover, active } = state;
  const color = useMemo(() => {
    return composeStyles(
      textStyles.default,
      variant === "primary" && buttonPrimaryStyles.text,
      variant === "primary" && hover && buttonPrimaryStyles.textHover,
      variant === "primary" && active && buttonPrimaryStyles.textActive,
      variant === "secondary" && buttonSecondaryStyles.text,
      variant === "secondary" && hover && buttonSecondaryStyles.textHover,
      variant === "secondary" && active && buttonSecondaryStyles.text,
      variant === "tertiary" && buttonTertiaryStyles.textActive,
      variant === "tertiary" && hover && buttonTertiaryStyles.textHover,
      variant === "tertiary" && active && buttonTertiaryStyles.textActive,
      variant === "error" && buttonErrorStyles.text,
      variant === "success" && buttonSuccessStyles.text,
      disabled && textStyles.disabled,
      style
    ).style(state).style.color;
  }, [variant, state]);
  return isValidElement(children) ? cloneElement(children, { color }) : children;
};
ButtonIcon.displayName = "Button.Icon";
export {
  ButtonIcon
};
//# sourceMappingURL=Icon.js.map