|
- import * as React from 'react';
- import * as CheckControlBase from '@tesseract-design/web-base-checkcontrol';
-
- export type RadioTickBoxProps = Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'type' | 'style'> & {
- /**
- * Should the component occupy the whole width of its parent?
- */
- block?: boolean,
- /**
- * Does the component need to conserve space?
- */
- compact?: boolean,
- /**
- * Complementary content of the component.
- */
- subtext?: React.ReactNode,
- }
-
- /**
- * Component for performing an action upon activation (e.g. when clicked).
- *
- * This component functions as a regular button.
- */
- export const RadioTickBox = React.forwardRef<HTMLInputElement, RadioTickBoxProps>(
- (
- {
- children,
- block = false,
- compact = false,
- subtext,
- className: _className,
- as: _as,
- ...etcProps
- }: RadioTickBoxProps,
- ref,
- ) => {
- const styleProps = React.useMemo<CheckControlBase.CheckControlBaseArgs>(() => ({
- block,
- compact,
- appearance: CheckControlBase.CheckControlAppearance.TICK_BOX,
- type: CheckControlBase.CheckControlType.RADIO,
- uncheckedLabel: false,
- }), [block, compact]);
-
- return (
- <div
- className={CheckControlBase.ClickAreaWrapper(styleProps)}
- >
- <label
- className={CheckControlBase.ClickArea()}
- >
- <input
- {...etcProps}
- type="radio"
- ref={ref}
- className={CheckControlBase.CheckStateContainer(styleProps)}
- />
- <span>
- <span />
- <span
- className={CheckControlBase.CheckIndicatorArea(styleProps)}
- >
- <span
- className={CheckControlBase.CheckIndicatorWrapper(styleProps)}
- />
- </span>
- <span>
- {children}
- {
- subtext
- && (
- <>
- <br />
- <span
- className={CheckControlBase.Subtext()}
- data-testid="subtext"
- >
- {subtext}
- </span>
- </>
- )
- }
- </span>
- </span>
- </label>
- </div>
- );
- },
- );
-
- RadioTickBox.displayName = 'ActionButton';
|