@nayan-ui/react-native/dist/module/components/NButtonGroup.js

React Native Component Library for smooth and faster mobile application development.

"use strict";

import React, { useMemo } from 'react';
import { View } from 'react-native';
import { NText } from "./NText.js";
import { Button } from "./ui/button.js";
import { cn } from "../lib/utils.js";
import { jsx as _jsx, jsxs as _jsxs } from "react-native-css-interop/jsx-runtime";
export const NButtonGroup = /*#__PURE__*/React.memo(({
  items,
  value,
  onChange,
  label,
  disabled = false,
  className,
  buttonClassName,
  labelClassName
}) => {
  const renderIcon = useMemo(() => {
    return icon => {
      if (!icon) return null;
      if (/*#__PURE__*/React.isValidElement(icon)) {
        return icon;
      }
      const IconComponent = icon;
      return _jsx(IconComponent, {
        size: 16
      });
    };
  }, []);
  return _jsxs(View, {
    className: "w-full",
    children: [label && _jsx(NText, {
      className: cn('mb-2 font-medium', labelClassName),
      children: label
    }), _jsx(View, {
      className: cn('flex-row rounded overflow-hidden', className),
      children: items.map((item, index) => {
        const isSelected = item.value === value;
        const isDisabled = disabled || item.disabled;
        const buttonIcon = renderIcon(item.icon);
        return _jsxs(Button, {
          disabled: isDisabled,
          onPress: () => onChange(item.value),
          className: cn('rounded-none border-r border-border flex-row items-center justify-center', index === 0 && 'rounded-l', index === items.length - 1 && 'rounded-r border-r-0', isSelected ? 'bg-primary' : 'bg-card', buttonClassName),
          children: [buttonIcon && _jsx(View, {
            className: "mr-1",
            children: buttonIcon
          }), _jsx(NText, {
            className: cn('font-medium', isSelected ? 'text-primary-foreground' : 'text-foreground'),
            children: item.label
          })]
        }, item.value);
      })
    })]
  });
});
NButtonGroup.displayName = 'NButtonGroup';
//# sourceMappingURL=NButtonGroup.js.map