react-native-resegmented-control
Version:
A fully customizable, declarative component that mimics the design of UISegmentedControl from iOS 13. Supported on iOS and Android
55 lines • 2.77 kB
JavaScript
;
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var react_native_1 = require("react-native");
var react_native_gesture_handler_1 = require("react-native-gesture-handler");
var SegmentedContext_1 = require("../SegmentedContext");
var SegmentStyles_1 = __importDefault(require("./SegmentStyles"));
exports.Segment = function (_a) {
var activeTintColor = _a.activeTintColor, content = _a.content, disabled = _a.disabled, disabledStyle = _a.disabledStyle, inactiveTintColor = _a.inactiveTintColor, name = _a.name, style = _a.style;
var context = react_1.useContext(SegmentedContext_1.SegmentedContext);
if (!context) {
throw new Error('Segment must be used within a SegmentedControl.');
}
var selectedName = context.selectedName, onChange = context.onChange;
var active = selectedName === name;
var handlePress = function () {
if (typeof onChange === 'function') {
onChange(name);
}
};
var renderContent = function () {
if (typeof content === 'string' ||
typeof content === 'number' ||
typeof content === 'boolean') {
return (react_1.default.createElement(react_native_1.Text, { numberOfLines: 1, style: [
SegmentStyles_1.default.segmentText,
active ? { color: activeTintColor } : { color: inactiveTintColor },
active && SegmentStyles_1.default.segmentActiveText,
] }, content));
}
if (typeof content === 'function') {
return content({ activeTintColor: activeTintColor, inactiveTintColor: inactiveTintColor, active: active, disabled: disabled });
}
return content;
};
return (react_1.default.createElement(react_native_1.View, { style: [
SegmentStyles_1.default.container,
style,
disabled && SegmentStyles_1.default.disabled,
disabled && disabledStyle,
] },
react_1.default.createElement(react_native_gesture_handler_1.TouchableOpacity, { disabled: disabled, onPress: handlePress, testID: "Segment_Button" },
react_1.default.createElement(react_native_1.View, { style: SegmentStyles_1.default.segment }, renderContent()))));
};
//# sourceMappingURL=Segment.js.map