rn-inkpad
Version:
<img src="https://res.cloudinary.com/fercloudinary/image/upload/v1715452841/packages/inkpad-banner_acl0xl.png" />
49 lines (48 loc) • 1.97 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Slider = void 0;
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const __1 = require("../");
const hooks_1 = require("../../hooks");
const theme_1 = require("../../theme");
const Slider = (props) => {
const { trackStyles, thumbStyles } = props;
const { borderRadius: trackRadius = 0, trackColor = '#CECECE', trackCompletedColor = '#4D67FF', height: trackHeight = 5, } = trackStyles ?? {};
const { backgroundColor = '#FFFFFF', borderRadius = 50, height = 40, icon, iconColor = '#4D67FF', iconSize = 20, shadow = true, width = 40, } = thumbStyles ?? {};
const { panResponder, handleLayout, thumbLeft } = (0, hooks_1.useSlider)(props, width);
return (<react_native_1.View style={[
theme_1.sliderStyles.container,
{
height: trackHeight,
borderRadius: trackRadius,
backgroundColor: trackColor,
},
]} {...panResponder.panHandlers} onLayout={handleLayout}>
<react_native_1.View style={[
theme_1.sliderStyles.track,
{
backgroundColor: trackCompletedColor,
width: thumbLeft + width / 2,
borderRadius: trackRadius,
},
]}/>
<react_native_1.View style={[
theme_1.sliderStyles.thumb,
{
backgroundColor,
width,
height,
borderRadius,
},
{ left: thumbLeft },
shadow && theme_1.sliderStyles.shadow,
]}>
{icon && <__1.Icon name={icon} color={iconColor} size={iconSize}/>}
</react_native_1.View>
</react_native_1.View>);
};
exports.Slider = Slider;