@livelike/react-native/lib/module/components/LLEmojiSliderWidget/LLEmojiSlider.js

LiveLike React Native package

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from 'react';
import { StyleSheet, View, Image } from 'react-native';
import { Slider } from '@miblanchard/react-native-slider';
import { useEmojiSlider, useStyles } from '../../hooks';
import { LLText } from '../LLText';
export function LLEmojiSlider(_ref) {
  let {
    styles: stylesProp,
    thumbImages,
    onValueChange,
    onSlidingComplete,
    initialValue,
    value,
    disabled,
    average,
    sliderUIComponentProps
  } = _ref;
  const styles = useStyles({
    componentStylesFn: getEmojiSliderStyles,
    stylesProp
  });
  const {
    sliderInput,
    thumbImg,
    onSlidingCompleteHandler,
    onValueChangeHandler
  } = useEmojiSlider({
    thumbImages,
    onValueChange,
    onSlidingComplete,
    initialValue,
    value
  });
  return /*#__PURE__*/React.createElement(Slider, _extends({
    minimumValue: 0,
    maximumValue: 1,
    onValueChange: onValueChangeHandler,
    onSlidingComplete: onSlidingCompleteHandler,
    value: sliderInput,
    disabled: disabled,
    trackMarks: average ? [average] : undefined,
    trackStyle: styles.sliderTrack,
    minimumTrackStyle: styles.minimumTrackStyle,
    maximumTrackStyle: styles.maximumTrackStyle,
    renderTrackMarkComponent: () => !!average && /*#__PURE__*/React.createElement(View, {
      style: styles.trackMarkContainer
    }, /*#__PURE__*/React.createElement(View, {
      style: styles.trackMarkLine
    }), /*#__PURE__*/React.createElement(LLText, {
      style: styles.trackMarkText
    }, "Avg.")),
    renderThumbComponent: () => thumbImg && /*#__PURE__*/React.createElement(Image, {
      source: {
        uri: thumbImg
      },
      style: styles.sliderThumbImage
    })
  }, sliderUIComponentProps));
}
const getEmojiSliderStyles = _ref2 => {
  let {
    theme
  } = _ref2;
  return StyleSheet.create({
    thumpImage: {},
    sliderTrack: {
      height: 3,
      borderRadius: 0
    },
    sliderThumbImage: {
      width: 30,
      height: 30
    },
    trackMarkContainer: {
      display: 'flex',
      flexDirection: 'column',
      position: 'relative',
      alignItems: 'center',
      top: 10
    },
    trackMarkLine: {
      height: 18,
      width: 2,
      backgroundColor: theme.text
    },
    trackMarkText: {
      marginTop: 4,
      fontSize: 10,
      color: theme.text
    },
    minimumTrackStyle: {
      backgroundColor: theme.primaryButtonBackground
    },
    maximumTrackStyle: {
      backgroundColor: theme.widgetOption
    }
  });
};
//# sourceMappingURL=LLEmojiSlider.js.map