@gluestack-ui/core
Version:
Universal UI components for React Native, Expo, and Next.js
53 lines • 2.71 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 } from 'react';
import { useHover } from '@gluestack-ui/utils/aria';
import { useToggleState } from '@react-stately/toggle';
import { useFormControlContext } from '../../form-control/creator';
import { mergeRefs } from '@gluestack-ui/utils/common';
export function Switch(StyledSwitch) {
return forwardRef((_a, ref) => {
var { disabled, isDisabled, isInvalid, defaultValue, onToggle, value, onValueChange } = _a, props = __rest(_a, ["disabled", "isDisabled", "isInvalid", "defaultValue", "onToggle", "value", "onValueChange"]);
const formControlContext = useFormControlContext();
const combinedProps = Object.assign(Object.assign({}, formControlContext), props);
const state = useToggleState({
defaultSelected: !(defaultValue === null || defaultValue === undefined)
? defaultValue
: !(value === null || value === undefined)
? value
: false,
});
const checked = !(value === null || value === undefined)
? value
: state.isSelected;
const _ref = React.useRef(null);
const { isHovered } = useHover({}, _ref);
const mergedRef = mergeRefs([ref, _ref]);
return (<StyledSwitch states={{
hover: isHovered,
disabled: disabled || isDisabled || combinedProps.isDisabled,
invalid: isInvalid || combinedProps.isInvalid,
checked: value || checked,
}} dataSet={{
hover: isHovered ? 'true' : 'false',
disabled: disabled || isDisabled || combinedProps.isDisabled
? 'true'
: 'false',
invalid: isInvalid || combinedProps.isInvalid ? 'true' : 'false',
checked: value || checked ? 'true' : 'false',
}} disabled={disabled || isDisabled || combinedProps.isDisabled} onValueChange={(val) => {
onValueChange && onValueChange(val);
onToggle ? onToggle(val) : state.toggle();
}} value={value || checked} {...combinedProps} ref={mergedRef}/>);
});
}
//# sourceMappingURL=Switch.jsx.map