@trove-ui/react
Version:
A React component library for T Design UI
247 lines (246 loc) • 13.4 kB
JavaScript
/*! For license information please see index.js.LICENSE.txt */
(function(root, factory) {
if ('object' == typeof exports && 'object' == typeof module) module.exports = factory(require("classnames"), require("react"));
else if ('function' == typeof define && define.amd) define([
"classnames",
"react"
], factory);
else if ('object' == typeof exports) exports["TDesignUI"] = factory(require("classnames"), require("react"));
else root["TDesignUI"] = factory(root["classnames"], root["react"]);
})(globalThis, (__WEBPACK_EXTERNAL_MODULE_classnames__, __WEBPACK_EXTERNAL_MODULE_react__)=>(()=>{
"use strict";
var __webpack_modules__ = {
"./node_modules/.pnpm/react@19.1.0/node_modules/react/cjs/react-jsx-runtime.production.js": function(__unused_webpack_module, exports1) {
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/ var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
function jsxProd(type, config, maybeKey) {
var key = null;
void 0 !== maybeKey && (key = "" + maybeKey);
void 0 !== config.key && (key = "" + config.key);
if ("key" in config) {
maybeKey = {};
for(var propName in config)"key" !== propName && (maybeKey[propName] = config[propName]);
} else maybeKey = config;
config = maybeKey.ref;
return {
$$typeof: REACT_ELEMENT_TYPE,
type: type,
key: key,
ref: void 0 !== config ? config : null,
props: maybeKey
};
}
exports1.Fragment = REACT_FRAGMENT_TYPE;
exports1.jsx = jsxProd;
exports1.jsxs = jsxProd;
},
"./node_modules/.pnpm/react@19.1.0/node_modules/react/jsx-runtime.js": function(module1, __unused_webpack_exports, __webpack_require__) {
module1.exports = __webpack_require__("./node_modules/.pnpm/react@19.1.0/node_modules/react/cjs/react-jsx-runtime.production.js");
},
classnames: function(module1) {
module1.exports = __WEBPACK_EXTERNAL_MODULE_classnames__;
},
react: function(module1) {
module1.exports = __WEBPACK_EXTERNAL_MODULE_react__;
}
};
var __webpack_module_cache__ = {};
function __webpack_require__(moduleId) {
var cachedModule = __webpack_module_cache__[moduleId];
if (void 0 !== cachedModule) return cachedModule.exports;
var module1 = __webpack_module_cache__[moduleId] = {
exports: {}
};
__webpack_modules__[moduleId](module1, module1.exports, __webpack_require__);
return module1.exports;
}
(()=>{
__webpack_require__.n = (module1)=>{
var getter = module1 && module1.__esModule ? ()=>module1['default'] : ()=>module1;
__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
});
var jsx_runtime = __webpack_require__("./node_modules/.pnpm/react@19.1.0/node_modules/react/jsx-runtime.js");
var external_classnames_ = __webpack_require__("classnames");
var external_classnames_default = /*#__PURE__*/ __webpack_require__.n(external_classnames_);
const Flex = ({ children, gap, wrap, align, justify, vertical, reverse, className, ...props })=>/*#__PURE__*/ (0, jsx_runtime.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;
var external_react_ = __webpack_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_.useState)(count);
const [internalValue, setInternalValue] = (0, external_react_.useState)(defaultValue);
const [hoverValue, setHoverValue] = (0, external_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, jsx_runtime.jsxs)(jsx_runtime.Fragment, {
children: [
/*#__PURE__*/ (0, jsx_runtime.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.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.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.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.jsxs)(jsx_runtime.Fragment, {
children: [
/*#__PURE__*/ (0, jsx_runtime.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.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.jsx)("div", {
className: external_classnames_default()(index_module.clipContainer, {
[index_module.halfClip]: isPartial,
[index_module.fullClip]: !isPartial
}),
children: characterNode
})
})
]
});
};
return /*#__PURE__*/ (0, jsx_runtime.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.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;
})();
return __webpack_exports__;
})());