react-native-ruler-view/lib/module/components/RulerPickerItem.js

⚡ Lightning-fast and customizable Ruler Picker component for React Native

"use strict";

import React from 'react';
import { View, StyleSheet, Animated } from 'react-native';
import { jsx as _jsx } from "react/jsx-runtime";
export const RulerPickerItem = /*#__PURE__*/React.memo(({
  isLast,
  index,
  gapBetweenSteps,
  shortStepHeight,
  longStepHeight,
  stepWidth,
  shortStepColor,
  longStepColor,
  vertical = false,
  stepStyle
}) => {
  const isLong = index % 10 === 0;
  const stepHeight = isLong ? longStepHeight : shortStepHeight;
  const stepColor = isLong ? longStepColor : shortStepColor;
  return /*#__PURE__*/_jsx(View, {
    style: [styles.container, {
      [vertical ? 'height' : 'width']: stepWidth,
      [vertical ? 'marginBottom' : 'marginRight']: isLast ? 0 : gapBetweenSteps,
      [vertical ? 'marginLeft' : 'marginTop']: 20
    }],
    children: /*#__PURE__*/_jsx(Animated.View, {
      style: [styles.step, {
        [vertical ? 'height' : 'width']: stepWidth,
        [vertical ? 'width' : 'height']: stepHeight,
        backgroundColor: stepColor,
        [vertical ? 'marginLeft' : 'marginTop']: isLong ? -12 : shortStepHeight - 30
      }, stepStyle]
    })
  });
});
const styles = StyleSheet.create({
  container: {
    justifyContent: 'center'
  },
  step: {
    backgroundColor: '#000000'
  },
  label: {
    fontSize: 10,
    textAlign: 'center'
  }
});
//# sourceMappingURL=RulerPickerItem.js.map