react-native-a11y-slider/dist/Label.js

An accessible range slider that supports assistive devices like screen readers

import React, { useCallback, useState, useMemo } from "react";
import { StyleSheet, Text, View } from "react-native";
var MIN_HEIGHT = 30;
export default function Label(_a) {
    var position = _a.position, selected = _a.selected, style = _a.style, textStyle = _a.textStyle;
    var _b = useState(30), height = _b[0], setHeight = _b[1];
    var onLayout = useCallback(function (event) {
        var height = Math.max(event.nativeEvent.layout.height, MIN_HEIGHT);
        setHeight(height);
    }, []);
    var containerStyles = useMemo(function () {
        return [styles.container, { height: height }];
    }, [height]);
    var labelStyles = useMemo(function () { return [styles.inner, selected && styles.selected, style]; }, [styles, selected, style]);
    var textStyles = useMemo(function () { return [styles.text, textStyle]; }, [textStyle]);
    if (typeof (position === null || position === void 0 ? void 0 : position.value) === "undefined") {
        return <></>;
    }
    return (<View>
      <View style={containerStyles}>
        <View style={labelStyles} onLayout={onLayout}>
          <Text style={textStyles}>{position.value}</Text>
        </View>
      </View>
    </View>);
}
var styles = StyleSheet.create({
    // The container positions the label above the marker thumb.
    container: {
        marginBottom: 8,
        height: MIN_HEIGHT,
        alignItems: "center",
        justifyContent: "center",
    },
    // The inner container allows the label to grow with the text
    inner: {
        position: "absolute",
        top: 0,
        paddingVertical: 7,
        paddingHorizontal: 12,
        backgroundColor: "#f1f1f1",
    },
    selected: {
        borderWidth: 2,
        paddingVertical: 5,
        paddingHorizontal: 10,
        borderColor: "#888",
    },
    text: {
        fontSize: 12,
    },
});
//# sourceMappingURL=Label.js.map