react-native-multiswitch-controller
Version:
Smooth animated multiswitch component with dynamic width
72 lines (71 loc) • 2.05 kB
JavaScript
"use strict";
import { useEffect } from 'react';
import SwitchList from "./SwitchList.js";
import useControlListState from "./useControlListState.js";
import { jsx as _jsx } from "react/jsx-runtime";
function MultiswitchController({
options,
defaultOption,
variant = 'segmentedControl',
onChangeOption,
onPressItem,
// Style props
containerStyle,
inactiveOptionContainerStyle,
activeOptionContainerStyle,
inactiveTextStyle,
activeTextStyle,
containerHeight = 50,
containerPadding,
optionGap = 0,
optionHeight = 48,
optionPadding = 0,
align = 'center',
ref
}) {
const {
activeOption,
onLayoutOptionItem,
onAnimationFinish,
animatedActiveOptionIndex,
animatedActiveOptionStyle,
scrollHandler,
controlListRef
} = useControlListState({
options,
defaultOption,
optionGap,
optionPadding
}, ref);
useEffect(() => {
if (onChangeOption) {
onChangeOption(activeOption);
}
}, [activeOption, onChangeOption]);
const containerPaddingCalculated = containerPadding ?? (containerHeight - optionHeight) / 2;
return /*#__PURE__*/_jsx(SwitchList, {
options: options,
activeOption: activeOption,
onLayoutOptionItem: onLayoutOptionItem,
onAnimationFinish: onAnimationFinish,
animatedActiveOptionIndex: animatedActiveOptionIndex,
animatedActiveOptionStyle: animatedActiveOptionStyle,
scrollHandler: scrollHandler,
controlListRef: controlListRef,
onPressItem: onPressItem,
variant: variant,
containerStyle: containerStyle,
inactiveOptionContainerStyle: inactiveOptionContainerStyle,
activeOptionContainerStyle: activeOptionContainerStyle,
inactiveTextStyle: inactiveTextStyle,
activeTextStyle: activeTextStyle,
containerHeight: containerHeight,
containerPadding: containerPaddingCalculated,
optionGap: optionGap,
optionHeight: optionHeight,
optionPadding: optionPadding,
align: align
});
}
export default MultiswitchController;
//# sourceMappingURL=MultiswitchController.js.map