@madeja-studio/telar/lib/module/component/Button/Button.js

UI component library by Madeja Studio

"use strict";

import React, { useState } from 'react';
import { ActivityIndicator, Text } from 'react-native';
import tw from "../../tailwind/index.js";
import { useTheme } from "../../theme/ThemeContextProvider.js";
import { isIconReference, VectorIcon } from "../Icon/index.js";
import { Row } from "../layout/index.js";
import { Container } from "./Container.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const Button = ({
  color = 'primary',
  hasAutoLoad,
  icon,
  isDisabled,
  isLoading,
  onPress,
  rowStyle,
  text,
  textStyle,
  textTint,
  tint,
  variant = 'contained',
  ...props
}) => {
  const [isAutoLoading, setIsAutoLoading] = useState(false);
  const {
    theme
  } = useTheme();
  const resolvedHasAutoload = theme.button.defaults.hasAutoLoad ?? hasAutoLoad;
  return /*#__PURE__*/_jsx(Container, {
    isDisabled: isAutoLoading || isLoading || isDisabled,
    onPress: async () => {
      if (resolvedHasAutoload) setIsAutoLoading(true);
      try {
        await onPress?.();
      } finally {
        if (resolvedHasAutoload) setIsAutoLoading(false);
      }
    },
    ...props,
    children: /*#__PURE__*/_jsxs(Row, {
      style: [tw`flex-row center rounded-2xl min-h-press ${text ? 'px-4 py-2' : 'p-4'}`, variant === 'contained' ? {
        backgroundColor: tint ?? theme.button.color[color].background
      } : {}, variant === 'outlined' ? {
        borderColor: tint ?? theme.button.color[color].background,
        borderWidth: 2,
        paddingBottom: 0,
        paddingTop: 0
      } : {}, {
        opacity: isAutoLoading || isLoading || isDisabled ? 0.5 : 1
      }, theme.button.defaults.style.row, rowStyle],
      children: [(isAutoLoading || isLoading) && /*#__PURE__*/_jsx(ActivityIndicator, {
        color: variant === 'contained' ? theme.button.color[color].text : theme.button.color[color].background,
        style: tw`mr-4`
      }), text && /*#__PURE__*/_jsx(Text, {
        style: [tw`uppercase font-bold ${icon ? 'mr-2' : ''}`, variant === 'contained' ? {
          color: textTint ?? theme.button.color[color].text
        } : {
          color: textTint ?? theme.button.color[color].background
        }, theme.button.defaults.style.text, textStyle],
        children: text
      }), isIconReference(icon) ? /*#__PURE__*/_jsx(VectorIcon, {
        color: variant === 'contained' ? theme.button.color[color].text : theme.button.color[color].background,
        icon: icon,
        size: 24
      }) : icon]
    })
  });
};
//# sourceMappingURL=Button.js.map