@ggmdev/react-native-rating-bar
Version:
A React Native component for generating and displaying interactive Tap or Swipe enabled Ratings.
150 lines (145 loc) • 6.67 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _utils = require("./helper/utils");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
// TODO:- find better solution so we don't need this
const getClonedElement = (children, size) => /*#__PURE__*/_react.default.isValidElement(children) ? /*#__PURE__*/_react.default.cloneElement(children, {
// color: unratedColor,
size,
style: {
width: size,
height: size
}
}) : null;
const DISABLED_COLOR = 'rgba(0, 0, 0, 0.38)';
const RatingBarIndicator = _ref => {
let {
layoutDirection = _reactNative.I18nManager.isRTL ? 'rtl' : 'ltr',
unratedColor,
direction = 'horizontal',
itemCount = 5,
itemPadding = 0,
itemSize = 40,
rating = 0,
itemBuilder
} = _ref;
const [ratingNumber, setRatingNumber] = (0, _react.useState)(Math.trunc(rating) + 1);
// const ratingNumber = useRef(Math.trunc(rating) + 1);
// const ratingFraction = useRef(rating - ratingNumber.current + 1);
const [ratingFraction, setRatingFraction] = (0, _react.useState)(rating - ratingNumber + 1);
const [isRTL, setIsRTL] = (0, _react.useState)(layoutDirection === 'rtl');
// const isRTL = useRef(layoutDirection === 'rtl');
const isVertical = ['vertical', 'vertical-reverse'].includes(direction);
const isVerticalReverse = direction === 'vertical-reverse';
const ratingArr = (0, _react.useMemo)(() => [...Array(itemCount)], [itemCount]);
(0, _react.useEffect)(() => {
const newRating = Math.trunc(rating) + 1;
setRatingNumber(newRating);
setRatingFraction(rating - newRating + 1);
}, [rating]);
(0, _react.useEffect)(() => {
setIsRTL(layoutDirection === 'rtl');
}, [layoutDirection]);
const isOnlyRatingRTL = isRTL && !_reactNative.I18nManager.isRTL || _reactNative.I18nManager.isRTL && !isRTL;
const androidRTL = _utils.isAndroid && isOnlyRatingRTL;
const buildItems = index => {
const item = itemBuilder(index);
const itemClone = getClonedElement(item, itemSize);
const isImage = (itemClone === null || itemClone === void 0 ? void 0 : itemClone.type) === _reactNative.Image;
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
width: itemSize,
height: itemSize,
margin: itemPadding
}
}, index + 1 < ratingNumber ? itemClone : (() => {
if ( /*#__PURE__*/_react.default.isValidElement(item)) {
const clonedChild = /*#__PURE__*/_react.default.cloneElement(item, {
color: unratedColor ?? DISABLED_COLOR,
size: itemSize,
style: {
width: itemSize,
height: itemSize
}
});
return clonedChild;
}
return itemClone;
})(), index + 1 === ratingNumber && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
position: 'absolute',
width: itemSize,
height: itemSize
}
}, (() => {
if (itemClone) {
/* console.log('ratingFraction.current', ratingFraction);
itemClone.props.style.height = '100%';
itemClone.props.style.width = `${100 * ratingFraction}%`;
if (isRTL.current) {
itemClone.props.style.transform = [{ scaleX: -1 }];
}
itemClone.props.style.backgroundColor = 'red';
itemClone.props.style.tintColor = 'green';
// itemClone.props.style.overflow = 'hidden';
// itemClone.props.style.aspectRatio = 1;
// return itemClone; */
// itemClone.props.style.tintColor = 'green';
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [{
height: '100%',
width: `${100 * ratingFraction}%`,
// backgroundColor: 'red',
overflow: 'hidden'
},
/* ((isRTL && !I18nManager.isRTL) ||
(I18nManager.isRTL && !isRTL)) && {
alignSelf: 'flex-end',
transform: [{ scaleX: -1 }],
}, */
// Image probably handles RTL compare to a vector icon so disabling it for Image
androidRTL && !isImage && {
transform: [{
scaleX: -1
}]
}, androidRTL && {
alignSelf: 'flex-end'
}]
}, itemClone);
}
return itemClone;
})()));
};
/* const androidRTL =
Platform.OS === 'android' &&
((isRTL && !I18nManager.isRTL) || (I18nManager.isRTL && !isRTL)); */
return /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
contentContainerStyle: {
flexDirection: isVerticalReverse ? 'column-reverse' : isVertical ? 'column' : androidRTL ? 'row-reverse' : 'row',
direction: isRTL ? 'rtl' : 'ltr'
},
horizontal: direction === 'horizontal',
showsHorizontalScrollIndicator: false
}, ratingArr.map((_, i) => {
// TODO:- this seems unneccessary now
if (layoutDirection !== null) {
if (layoutDirection === 'rtl' && !_reactNative.I18nManager.isRTL) {
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
key: i /* style={{ transform: [{ scaleX: -1 }] }} */
}, buildItems(i));
}
}
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
key: i
}, buildItems(i));
}));
};
var _default = RatingBarIndicator; // const styles = StyleSheet.create({});
exports.default = _default;
//# sourceMappingURL=RatingBarIndicator.js.map