@onehat/ui/src/Components/Buttons/PlusMinusButton.js

Base UI for OneHat apps

import React from 'react';
import {
	HStack,
	HStackNative,
} from '@project-components/Gluestack';
import clsx from 'clsx';
import IconButton from './IconButton.js';
import Plus from '../Icons/Plus.js';
import Minus from '../Icons/Minus.js';


const PlusMinusButton = React.forwardRef((props, ref) => {

	const {
			isPlusDisabled = false,
			isMinusDisabled = false,
			plusHandler = () => {},
			minusHandler = () => {},
			plusTooltip,
			minusTooltip,
		} = props,
		_icon = {
			className: 'text-black',
		};

		let className = clsx(
			'PlusMinusButton-HStack',
			'items-center',
		);
		if (props.className) {
			className += ' ' + props.className
		}

		return <HStack className={className}>
					<IconButton
						icon={Minus}
						_icon={_icon}
						onPress={minusHandler}
						isDisabled={isMinusDisabled}
						tooltip={minusTooltip}
					/>
					<IconButton
						icon={Plus}
						_icon={_icon}
						onPress={plusHandler}
						isDisabled={isPlusDisabled}
						className="ml-1"
						tooltip={plusTooltip}
					/>
				</HStack>;

});

export default PlusMinusButton;