@livelike/react-native
Version:
LiveLike React Native package
107 lines (106 loc) • 3.22 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.LLEmojiSlider = LLEmojiSlider;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _reactNativeSlider = require("@miblanchard/react-native-slider");
var _hooks = require("../../hooks");
var _LLText = require("../LLText");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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); }
function LLEmojiSlider(_ref) {
let {
styles: stylesProp,
thumbImages,
onValueChange,
onSlidingComplete,
initialValue,
value,
disabled,
average,
sliderUIComponentProps
} = _ref;
const styles = (0, _hooks.useStyles)({
componentStylesFn: getEmojiSliderStyles,
stylesProp
});
const {
sliderInput,
thumbImg,
onSlidingCompleteHandler,
onValueChangeHandler
} = (0, _hooks.useEmojiSlider)({
thumbImages,
onValueChange,
onSlidingComplete,
initialValue,
value
});
return /*#__PURE__*/_react.default.createElement(_reactNativeSlider.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.default.createElement(_reactNative.View, {
style: styles.trackMarkContainer
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.trackMarkLine
}), /*#__PURE__*/_react.default.createElement(_LLText.LLText, {
style: styles.trackMarkText
}, "Avg.")),
renderThumbComponent: () => thumbImg && /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
source: {
uri: thumbImg
},
style: styles.sliderThumbImage
})
}, sliderUIComponentProps));
}
const getEmojiSliderStyles = _ref2 => {
let {
theme
} = _ref2;
return _reactNative.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