react-native-toggle-button/build/dist/ToggleButton.js

Cool and easy to use react native toggle button

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_native_1 = require("react-native");
/**
 * ? Local Imports
 */
const ToggleButton_style_1 = tslib_1.__importDefault(require("./ToggleButton.style"));
const useStateWithCallback_1 = tslib_1.__importDefault(require("./helpers/useStateWithCallback"));
const ToggleButton = ({ style, activeButtonStyle, activeTextStyle, inactiveButtonStyle, inactiveTextStyle, primaryText, secondaryText, initial = true, TouchableComponent = react_native_1.TouchableWithoutFeedback, onPress, }) => {
    const [isToggled, setToggled] = useStateWithCallback_1.default(initial);
    const handlePress = () => {
        setToggled(!isToggled, (newValue) => {
            onPress && onPress(newValue);
        });
    };
    const onToggleButtonStyle = isToggled
        ? [ToggleButton_style_1.default.activeButtonStyle, activeButtonStyle]
        : [ToggleButton_style_1.default.inactiveButtonStyle, inactiveButtonStyle];
    const onToggleTextStyle = isToggled
        ? [ToggleButton_style_1.default.activeTextStyle, activeTextStyle]
        : [ToggleButton_style_1.default.inactiveTextStyle, inactiveTextStyle];
    const offToggleButtonStyle = !isToggled
        ? [ToggleButton_style_1.default.activeButtonStyle, activeButtonStyle]
        : [ToggleButton_style_1.default.inactiveButtonStyle, inactiveButtonStyle];
    const offToggleTextStyle = !isToggled
        ? [ToggleButton_style_1.default.activeTextStyle, activeTextStyle]
        : [ToggleButton_style_1.default.inactiveTextStyle, inactiveTextStyle];
    return (<react_native_1.View style={[ToggleButton_style_1.default.container, style]}>
      <TouchableComponent style={{}} onPress={handlePress}>
        <react_native_1.View style={ToggleButton_style_1.default.containerGlue}>
          <react_native_1.View style={onToggleButtonStyle}>
            <react_native_1.Text style={onToggleTextStyle}>{primaryText}</react_native_1.Text>
          </react_native_1.View>
          <react_native_1.View style={offToggleButtonStyle}>
            <react_native_1.Text style={offToggleTextStyle}>{secondaryText}</react_native_1.Text>
          </react_native_1.View>
        </react_native_1.View>
      </TouchableComponent>
    </react_native_1.View>);
};
exports.default = ToggleButton;
//# sourceMappingURL=ToggleButton.js.map