@gluestack-ui-nightly/core
Version:
Universal UI components for React Native, Expo, and Next.js
77 lines • 6.34 kB
JSX
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { forwardRef, memo } from 'react';
import { useFocusRing, useFocus } from '@gluestack-ui-nightly/utils/aria';
import { RadioProvider } from './RadioProvider';
import { useRadio } from '../aria';
import { useRadioGroup } from './RadioGroupContext';
import { usePress, useHover } from '@gluestack-ui-nightly/utils/aria';
import { stableHash, composeEventHandlers, } from '@gluestack-ui-nightly/utils/common';
import { useFormControlContext } from '../../form-control/creator';
const RadioComponent = memo(forwardRef((_a, ref) => {
var { StyledRadio, inputProps, combinedProps, isChecked: isCheckedProp, isDisabled: isDisabledProp, isFocusVisible: isFocusVisibleProp, isHovered: isHoveredProp, isInvalid: isInvalidProp, isReadOnly: isReadOnlyProp, isIndeterminate: isIndeterminateProp, isFocused: isFocusedProp, isPressed: isPressedProp, _onPress, onPressIn, onPressOut, onHoverIn, onHoverOut, onFocus, onBlur, children } = _a, props = __rest(_a, ["StyledRadio", "inputProps", "combinedProps", "isChecked", "isDisabled", "isFocusVisible", "isHovered", "isInvalid", "isReadOnly", "isIndeterminate", "isFocused", "isPressed", "_onPress", "onPressIn", "onPressOut", "onHoverIn", "onHoverOut", "onFocus", "onBlur", "children"]);
const { isInvalid, isReadOnly, isIndeterminate } = combinedProps, restProps = __rest(combinedProps, ["isInvalid", "isReadOnly", "isIndeterminate"]);
const { hoverProps, isHovered } = useHover();
const { focusProps, isFocused } = useFocus();
const { disabled: isDisabled, checked: isChecked } = inputProps;
const { focusProps: focusRingProps, isFocusVisible } = useFocusRing();
const { pressProps, isPressed } = usePress({
isDisabled: isDisabled || isDisabledProp,
});
return (<StyledRadio disabled={isDisabled || isDisabledProp} {...pressProps} {...restProps} {...inputProps} {...props} ref={ref} role="radio" onPressIn={composeEventHandlers(onPressIn, pressProps.onPressIn)} onPressOut={composeEventHandlers(onPressOut, pressProps.onPressOut)} onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)} onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)} onFocus={composeEventHandlers(composeEventHandlers(onFocus, focusProps.onFocus), focusRingProps.onFocus)} onBlur={composeEventHandlers(composeEventHandlers(onBlur, focusProps.onBlur), focusRingProps.onBlur)} states={{
readonly: isReadOnly || isReadOnlyProp,
intermediate: isIndeterminate || isIndeterminateProp,
checked: isChecked || isCheckedProp,
focusVisible: isFocusVisible || isFocusVisibleProp,
disabled: isDisabled || isDisabledProp,
invalid: isInvalid || isInvalidProp,
hover: isHovered || isHoveredProp,
focus: isFocused || isFocusedProp,
active: isPressed || isPressedProp,
}} dataSet={{
readonly: isReadOnly || isReadOnlyProp ? 'true' : 'false',
intermediate: isIndeterminate || isIndeterminateProp ? 'true' : 'false',
checked: isChecked || isCheckedProp ? 'true' : 'false',
focusVisible: isFocusVisible || isFocusVisibleProp ? 'true' : 'false',
disabled: isDisabled || isDisabledProp ? 'true' : 'false',
invalid: isInvalid || isInvalidProp ? 'true' : 'false',
hover: isHovered || isHoveredProp ? 'true' : 'false',
focus: isFocused || isFocusedProp ? 'true' : 'false',
active: isPressed || isPressedProp ? 'true' : 'false',
}}>
<RadioProvider isChecked={isChecked || isCheckedProp} isDisabled={isDisabled || isDisabledProp} isFocusVisible={isFocused || isFocusVisibleProp} isHovered={isHovered || isHoveredProp} isInvalid={isInvalid || isInvalidProp} isReadOnly={isReadOnly || isReadOnlyProp} isIndeterminate={isIndeterminate || isIndeterminateProp} isFocused={isFocused || isFocusedProp} isPressed={isPressed || isPressedProp}>
{children}
</RadioProvider>
</StyledRadio>);
}));
const Radio = (StyledRadio) => forwardRef((_a, ref) => {
var _b, _c;
var { isFocusVisible: isFocusVisibleProp, isHovered: isHoveredProp, isIndeterminate: isIndeterminateProp, isFocused: isFocusedProp, isPressed: isPressedProp, isInvalid: isInvalidProp, children } = _a, props = __rest(_a, ["isFocusVisible", "isHovered", "isIndeterminate", "isFocused", "isPressed", "isInvalid", "children"]);
const formControlContext = useFormControlContext();
const contextState = useRadioGroup('RadioGroupContext');
const combinedProps = Object.assign(Object.assign(Object.assign({}, formControlContext), contextState), props);
const inputRef = React.useRef(null);
const ariaLabel = props['aria-label'] || props.value || 'Radio';
const { inputProps } = useRadio(Object.assign(Object.assign({}, combinedProps), { 'aria-label': ariaLabel, children }), (_b = contextState.state.state) !== null && _b !== void 0 ? _b : {}, inputRef);
const contextCombinedProps = React.useMemo(() => {
return Object.assign({}, combinedProps);
}, [stableHash(combinedProps)]);
if (!contextState) {
console.error('Error: Radio must be wrapped inside a Radio.Group');
}
const isInvalid = ((_c = contextCombinedProps === null || contextCombinedProps === void 0 ? void 0 : contextCombinedProps.state) === null || _c === void 0 ? void 0 : _c.validationState) === 'invalid'
? true
: false;
return (<RadioComponent StyledRadio={StyledRadio} inputProps={inputProps} combinedProps={contextCombinedProps} children={children} ref={ref} isFocusVisible={isFocusVisibleProp} isHovered={isHoveredProp} isIndeterminate={isIndeterminateProp} isFocused={isFocusedProp} isPressed={isPressedProp} isInvalid={isInvalid || isInvalidProp}/>);
});
export { Radio };
//# sourceMappingURL=Radio.jsx.map