@trove-ui/react
Version:
A React component library for T Design UI
189 lines (188 loc) • 8.64 kB
JavaScript
;
var __webpack_require__ = {};
(()=>{
__webpack_require__.n = (module)=>{
var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
__webpack_require__.d(getter, {
a: getter
});
return getter;
};
})();
(()=>{
__webpack_require__.d = (exports1, definition)=>{
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
enumerable: true,
get: definition[key]
});
};
})();
(()=>{
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
})();
(()=>{
__webpack_require__.r = (exports1)=>{
if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
value: 'Module'
});
Object.defineProperty(exports1, '__esModule', {
value: true
});
};
})();
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
default: ()=>components_Rate
});
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
const external_classnames_namespaceObject = require("classnames");
var external_classnames_default = /*#__PURE__*/ __webpack_require__.n(external_classnames_namespaceObject);
const Flex = ({ children, gap, wrap, align, justify, vertical, reverse, className, ...props })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
...props,
className: external_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 external_react_namespaceObject = require("react");
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, external_react_namespaceObject.useState)(count);
const [internalValue, setInternalValue] = (0, external_react_namespaceObject.useState)(defaultValue);
const [hoverValue, setHoverValue] = (0, external_react_namespaceObject.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, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("svg", {
width: "24px",
height: "24px",
viewBox: "0 0 24 24",
className: external_classnames_default()(index_module.characterBase, {
[index_module.hovered]: isHovered,
[index_module.notHovered]: !isHovered
}),
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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, jsx_runtime_namespaceObject.jsx)("svg", {
width: "24px",
height: "24px",
viewBox: "0 0 24 24",
className: external_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, jsx_runtime_namespaceObject.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, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: external_classnames_default()(index_module.characterBase, {
[index_module.hovered]: isHovered,
[index_module.notHovered]: !isHovered
}),
style: {
color: inactiveColor
},
children: characterNode
}),
displayValue - index > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: external_classnames_default()(index_module.characterBase, index_module.characterActive, {
[index_module.hovered]: isHovered,
[index_module.notHovered]: !isHovered
}),
style: {
color: activeColor
},
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: external_classnames_default()(index_module.clipContainer, {
[index_module.halfClip]: isPartial,
[index_module.fullClip]: !isPartial
}),
children: characterNode
})
})
]
});
};
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_Flex, {
className: external_classnames_default()(index_module.rateContainer, {
[index_module.readonly]: readonly,
[index_module.interactive]: !readonly
}),
children: Array.from({
length: internalCount
}, (_, i)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.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;
exports["default"] = __webpack_exports__["default"];
for(var __webpack_i__ in __webpack_exports__)if (-1 === [
"default"
].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
Object.defineProperty(exports, '__esModule', {
value: true
});