@aashu-dubey/react-native-rating-bar
Version:
A React Native component for generating and displaying interactive Tap or Swipe enabled Ratings.
155 lines (150 loc) • 6.55 kB
JavaScript
;
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.js");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
// 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 = ({
layoutDirection = _reactNative.I18nManager.isRTL ? 'rtl' : 'ltr',
unratedColor,
direction = 'horizontal',
itemCount = 5,
itemPadding = 0,
itemSize = 40,
rating = 0,
itemBuilder
}) => {
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?.type === _reactNative.Image;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: {
width: itemSize,
height: itemSize,
margin: itemPadding
},
children: [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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: {
position: 'absolute',
width: itemSize,
height: itemSize
},
children: (() => {
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__*/(0, _jsxRuntime.jsx)(_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'
}],
children: itemClone
});
}
return itemClone;
})()
})]
});
};
/* const androidRTL =
Platform.OS === 'android' &&
((isRTL && !I18nManager.isRTL) || (I18nManager.isRTL && !isRTL)); */
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
contentContainerStyle: {
flexDirection: isVerticalReverse ? 'column-reverse' : isVertical ? 'column' : androidRTL ? 'row-reverse' : 'row',
direction: isRTL ? 'rtl' : 'ltr'
},
horizontal: direction === 'horizontal',
showsHorizontalScrollIndicator: false,
alwaysBounceHorizontal: false,
alwaysBounceVertical: false,
children: ratingArr.map((_, i) => {
// TODO:- this seems unneccessary now
if (layoutDirection !== null) {
if (layoutDirection === 'rtl' && !_reactNative.I18nManager.isRTL) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
children: buildItems(i)
}, i);
}
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
children: buildItems(i)
}, i);
})
});
};
var _default = exports.default = RatingBarIndicator; // const styles = StyleSheet.create({});
//# sourceMappingURL=RatingBarIndicator.js.map