Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | import React, { useMemo } from "react" import RadioGroup from "./RadioGroup" import { prepareComponent } from "@bluframe/grapple" export type OptionValue = number | string export interface Option { label: React.ReactNode value: OptionValue } export interface Props { className?: string label: React.ReactNode name: string // eslint-disable-next-line no-unused-vars onChange: (value: OptionValue) => void options: Option[] selected: OptionValue | null } export interface ComponentProps extends Props { groupId: string labelId: string } const FIRST = 0 const usePrepareComponent = (props: Props): ComponentProps => { const groupId = `${props.name}-radiogroup` const labelId = `${groupId}-label` // Auto select first option if no selected option is provided const selected = useMemo(() => { Iif (props.selected) { return props.selected } Iif (!props.options.length) { return null } return props.options[FIRST].value }, [props.options, props.selected]) return { ...props, groupId, labelId, selected } } export default prepareComponent<Props, ComponentProps>(usePrepareComponent)( RadioGroup ) |