@trove-ui/react
Version:
A React component library for T Design UI
145 lines (144 loc) • 7.72 kB
JavaScript
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE_classnames__ from "classnames";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
const Flex = ({ children, gap, wrap, align, justify, vertical, reverse, className, ...props })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
...props,
className: (0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])('flex', className),
style: {
gap,
flexWrap: wrap,
alignItems: align,
justifyContent: justify,
flexDirection: vertical ? reverse ? 'column-reverse' : 'column' : reverse ? 'row-reverse' : 'row',
...props.style
},
children: children
});
const components_Flex = Flex;
const index_module = {
rateContainer: "rateContainer-ZWt_eE",
readonly: "readonly-lqd5Je",
interactive: "interactive-mN_sKi",
itemWrapper: "itemWrapper-yq6AYG",
characterBase: "characterBase-gwUC_0",
hovered: "hovered-lkUtkM",
notHovered: "notHovered-BbmXuQ",
characterActive: "characterActive-bmSr1X",
clipContainer: "clipContainer-agVCG8",
halfClip: "halfClip-UVmDIQ",
fullClip: "fullClip-KIwUof"
};
const Rate = ({ count = 5, value, defaultValue = 0, onChange, allowHalf = false, readonly = false, character = null, inactiveColor = '#eee', activeColor = '#fadb14' })=>{
const [internalCount] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(count);
const [internalValue, setInternalValue] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(defaultValue);
const [hoverValue, setHoverValue] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(null);
const displayValue = null !== hoverValue ? hoverValue : value ?? internalValue;
const handleClick = (newValue)=>{
if (readonly) return;
if (void 0 === value) setInternalValue(newValue);
onChange?.(newValue);
};
const handleMouseMove = (index, event)=>{
if (readonly) return;
if (!allowHalf) return void setHoverValue(index + 1);
const starRect = event.currentTarget.getBoundingClientRect();
const offsetX = event.clientX - starRect.left;
const isHalf = offsetX < starRect.width / 2;
setHoverValue(isHalf ? index + 0.5 : index + 1);
};
const handleMouseLeave = ()=>{
setHoverValue(null);
};
const renderStar = (index)=>{
const isHovered = null !== hoverValue && hoverValue >= index + (allowHalf ? 0.5 : 1);
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("svg", {
width: "24px",
height: "24px",
viewBox: "0 0 24 24",
className: (0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])(index_module.characterBase, {
[index_module.hovered]: isHovered,
[index_module.notHovered]: !isHovered
}),
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", {
fill: inactiveColor,
d: "M12,1.73l3.76,7.82l8.41,1.23l-6.08,5.99l1.44,8.5L12,20.97l-7.53,4.3l1.44-8.5L-0.17,10.78l8.41-1.23L12,1.73z"
})
}),
displayValue - index > 0 && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("svg", {
width: "24px",
height: "24px",
viewBox: "0 0 24 24",
className: (0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])(index_module.characterBase, {
[index_module.hovered]: isHovered,
[index_module.notHovered]: !isHovered
}),
style: {
clipPath: displayValue - index < 1 ? 'inset(0 50% 0 0)' : 'none'
},
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("path", {
fill: activeColor,
d: "M12,1.73l3.76,7.82l8.41,1.23l-6.08,5.99l1.44,8.5L12,20.97l-7.53,4.3l1.44-8.5L-0.17,10.78l8.41-1.23L12,1.73z"
})
})
]
});
};
const renderCustomCharacter = (index)=>{
if (!character) return renderStar(index);
const characterNode = 'function' == typeof character ? character({
index,
value: displayValue
}) : character;
const isHovered = null !== hoverValue && hoverValue >= index + (allowHalf ? 0.5 : 1);
const isPartial = displayValue - index > 0 && displayValue - index < 1;
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
className: (0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])(index_module.characterBase, {
[index_module.hovered]: isHovered,
[index_module.notHovered]: !isHovered
}),
style: {
color: inactiveColor
},
children: characterNode
}),
displayValue - index > 0 && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
className: (0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])(index_module.characterBase, index_module.characterActive, {
[index_module.hovered]: isHovered,
[index_module.notHovered]: !isHovered
}),
style: {
color: activeColor
},
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
className: (0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])(index_module.clipContainer, {
[index_module.halfClip]: isPartial,
[index_module.fullClip]: !isPartial
}),
children: characterNode
})
})
]
});
};
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_Flex, {
className: (0, __WEBPACK_EXTERNAL_MODULE_classnames__["default"])(index_module.rateContainer, {
[index_module.readonly]: readonly,
[index_module.interactive]: !readonly
}),
children: Array.from({
length: internalCount
}, (_, i)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
className: index_module.itemWrapper,
onMouseMove: readonly ? void 0 : (e)=>handleMouseMove(i, e),
onMouseLeave: readonly ? void 0 : handleMouseLeave,
onClick: readonly ? void 0 : ()=>handleClick(null !== hoverValue ? hoverValue : i + 1),
children: renderCustomCharacter(i)
}, i))
});
};
const components_Rate = Rate;
export { components_Rate as default };