1 line
5.9 KiB
Plaintext
1 line
5.9 KiB
Plaintext
|
{"version":3,"sources":["../src/radio.tsx","../../../utilities/object-utils/src/split.ts"],"sourcesContent":["import {\n chakra,\n forwardRef,\n layoutPropNames,\n omitThemingProps,\n SystemProps,\n SystemStyleObject,\n ThemingProps,\n useMultiStyleConfig,\n HTMLChakraProps,\n} from \"@chakra-ui/system\"\nimport { callAll } from \"@chakra-ui/shared-utils\"\nimport { split } from \"@chakra-ui/object-utils\"\nimport { useRadioGroupContext } from \"./radio-group\"\nimport { useRadio, UseRadioProps } from \"./use-radio\"\n\ntype Omitted = \"onChange\" | \"defaultChecked\" | \"checked\"\ninterface BaseControlProps extends Omit<HTMLChakraProps<\"div\">, Omitted> {}\n\nexport interface RadioProps\n extends UseRadioProps,\n ThemingProps<\"Radio\">,\n BaseControlProps {\n /**\n * The spacing between the checkbox and its label text\n * @default 0.5rem\n * @type SystemProps[\"marginLeft\"]\n */\n spacing?: SystemProps[\"marginLeft\"]\n /**\n * Additional props to be forwarded to the `input` element\n */\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>\n}\n\n/**\n * Radio component is used in forms when a user needs to select a single value from\n * several options.\n *\n * @see Docs https://chakra-ui.com/radio\n */\nexport const Radio = forwardRef<RadioProps, \"input\">((props, ref) => {\n const group = useRadioGroupContext()\n const { onChange: onChangeProp, value: valueProp } = props\n\n const styles = useMultiStyleConfig(\"Radio\", { ...group, ...props })\n\n const ownProps = omitThemingProps(props)\n\n const {\n spacing = \"0.5rem\",\n children,\n isDisabled = group?.isDisabled,\n isFocusable = group?.isFocusable,\n inputProps: htmlInputProps,\n ...rest\n } = ownProps\n\n let isChecked = props.isChecked\n if (group?.value != null && valueProp != null) {\n isChecked = group.value === valueProp\n }\n\n let onChange = onChangeProp\n if (group?.onChange && valueProp != null) {\n onChange = callAll(group.onChange, onChangeProp)\n }\n\n const name = props?.name ?? group?.name\n\n const {\n getInputProps,\n getCheckboxProps,\n getLabelProps,\n getRootProps,\n htmlProps,\n } = useRadio({\n ...rest,\n isChecked,\n isFocusable,\n isDisabled,\n onChange,\n name,\n })\n\n const [layoutProps, otherProps] = split(htmlProps, layoutPropNames as any)\n\n const checkboxProps = getCheckboxProps(otherProps)\n const inputProps = getInputProps(htmlInputProps, ref)\n const labelProps = getLabelProps()\n const rootProps = Object.assign({}, layoutProps, getRootProps())\n\n const rootStyles = {\n display: \"inline-flex\",\n alignItems: \"center\",\n verticalAlign: \"top\",\n cursor: \"pointer\",\n position: \"relative\",\n ...styles.container,\n }\n\n const checkboxStyles = {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n flexShrink: 0,\n ...styles.control,\n }\n\n const labelStyles: SystemStyleObject = {\n userSelect: \"none\",\n marginStart: spacing,\n ...styles.label,\n }\n\n return (\n <chakra.label className=\"chakra-radio\" {...rootProps} __css={rootStyles}>\n <input className=\"chakra-radio__input\" {...inputProps} />\n <chakra.span\n className=\"chakra-radio__control\"\n {...checkboxProps}\n __css={checkboxStyles}\n />\n {children && (\n <chakra.span\n className=\"chakra-radio__label\"\n {...labelProps}\n __css={labelStyles}\n >\n {children}\n </chakra.span>\n )}\n </chakra.label>\n )\n})\n\nRadio.displayName = \"Radio\"\n","export function split<T extends Record<string, any>, K extends keyof T>(\n object: T,\n keys: K[],\n) {\n const picked: Record<string, any> = {}\n const omitted: Record<string, any> = {}\n\n for (const [key, value] of Object.entries(object)) {\n if (keys.includes(key as T[K])) picked[key] = value\n else omitted[key] = value\n }\n\n return [picked, omitted] as [\n {\n [P in K]: T[P]\n },\n
|