@yamada-ui/rating
Version:
Yamada UI rating component
296 lines (292 loc) • 9.46 kB
JavaScript
"use client"
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/rating-item.tsx
var rating_item_exports = {};
__export(rating_item_exports, {
RatingItem: () => RatingItem
});
module.exports = __toCommonJS(rating_item_exports);
var import_core = require("@yamada-ui/core");
var import_icon = require("@yamada-ui/icon");
var import_utils3 = require("@yamada-ui/utils");
var import_react2 = require("react");
// src/rating-context.ts
var import_utils = require("@yamada-ui/utils");
var [RatingProvider, useRatingContext] = (0, import_utils.createContext)({
name: "RatingContext",
errorMessage: `useRatingContext returned is 'undefined'. Seems you forgot to wrap the components in "<Rating />"`
});
// src/use-rating-item.ts
var import_use_focus_visible = require("@yamada-ui/use-focus-visible");
var import_utils2 = require("@yamada-ui/utils");
var import_react = require("react");
var useRatingItem = ({
fractionValue,
groupValue,
value
}) => {
const {
id,
name,
highlightSelectedOnly,
outside,
resolvedValue,
roundedValue,
setHoveredValue,
setValue,
formControlProps
} = useRatingContext();
const {
"aria-disabled": ariaDisabled,
"aria-readonly": _ariaReadOnly,
disabled,
readOnly,
...omittedFormControlProps
} = formControlProps;
const [focused, setFocused] = (0, import_react.useState)(false);
const [focusVisible, setFocusVisible] = (0, import_react.useState)(false);
const active = value === resolvedValue;
const checked = value === roundedValue;
const filled = highlightSelectedOnly ? value === resolvedValue : value <= resolvedValue;
const onBlur = (0, import_react.useCallback)(() => {
setFocused(false);
if (outside) setHoveredValue(-1);
}, [outside, setHoveredValue]);
const onInputChange = (0, import_react.useCallback)(
(ev) => {
if (readOnly || disabled) return;
const value2 = parseFloat(ev.target.value);
setHoveredValue(value2);
},
[disabled, readOnly, setHoveredValue]
);
const onChange = (0, import_react.useCallback)(
(value2) => {
if (readOnly || disabled) return;
setValue(value2);
},
[disabled, readOnly, setValue]
);
const onMouseDown = (0, import_react.useCallback)(() => {
if (readOnly || disabled) return;
onChange(value);
}, [disabled, onChange, readOnly, value]);
const onTouchStart = (0, import_react.useCallback)(() => {
if (readOnly || disabled) return;
onChange(value);
}, [disabled, onChange, readOnly, value]);
const getItemProps = (0, import_react.useCallback)(
(props = {}, ref = null) => {
const zIndex = active ? 1 : -1;
return {
ref,
htmlFor: `${id}-${groupValue}-${value}`,
...omittedFormControlProps,
...props,
"data-active": (0, import_utils2.dataAttr)(active),
"data-disabled": (0, import_utils2.dataAttr)(disabled),
"data-filled": (0, import_utils2.dataAttr)(filled),
"data-focus": (0, import_utils2.dataAttr)(focused),
"data-focus-visible": (0, import_utils2.dataAttr)(focused && focusVisible),
zIndex: fractionValue !== 1 ? zIndex : void 0,
onMouseDown: (0, import_utils2.handlerAll)(onMouseDown, props.onMouseDown),
onTouchStart: (0, import_utils2.handlerAll)(onTouchStart, props.onTouchStart)
};
},
[
disabled,
omittedFormControlProps,
fractionValue,
groupValue,
id,
active,
filled,
focusVisible,
focused,
onMouseDown,
onTouchStart,
value
]
);
const getInputProps = (0, import_react.useCallback)(
(props = {}, ref = null) => {
return {
ref,
"aria-disabled": ariaDisabled,
"aria-label": `${value}`,
disabled,
readOnly,
...omittedFormControlProps,
...props,
id: `${id}-${groupValue}-${value}`,
type: "radio",
name,
style: {
border: "0px",
clip: "rect(0px, 0px, 0px, 0px)",
height: "1px",
margin: "-1px",
overflow: "hidden",
padding: "0px",
position: "absolute",
whiteSpace: "nowrap",
width: "1px"
},
"data-active": (0, import_utils2.dataAttr)(active),
"data-checked": (0, import_utils2.dataAttr)(checked),
checked,
value,
onBlur: (0, import_utils2.handlerAll)(onBlur, props.onBlur),
onChange: (0, import_utils2.handlerAll)(onInputChange, props.onChange),
onFocus: (0, import_utils2.handlerAll)(() => setFocused(true), props.onFocus),
onKeyDown: (0, import_utils2.handlerAll)(
(ev) => ev.key === " " ? onChange(value) : void 0,
props.onKeyDown
)
};
},
[
ariaDisabled,
disabled,
readOnly,
value,
omittedFormControlProps,
id,
groupValue,
name,
checked,
onInputChange,
onBlur,
active,
onChange
]
);
(0, import_react.useEffect)(() => {
return (0, import_use_focus_visible.trackFocusVisible)(setFocusVisible);
}, []);
return {
active,
checked,
filled,
getInputProps,
getItemProps
};
};
// src/rating-item.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var RatingItem = (0, import_core.forwardRef)(
({ className, color, fractionValue, groupValue, value, ...rest }, ref) => {
const {
emptyIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RatingStarIcon, {}),
filledIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RatingStarIcon, {}),
styles,
inputProps,
itemProps
} = useRatingContext();
const { active, filled, getInputProps, getItemProps } = useRatingItem({
fractionValue,
groupValue,
value
});
const computedItemProps = (0, import_utils3.runIfFunc)(itemProps, value);
const computedInputProps = (0, import_utils3.runIfFunc)(inputProps, value);
const customColor = color ? {
_filled: {
color: (0, import_utils3.isString)(color) ? [color, color] : color
}
} : {};
const css = {
display: "block",
lineHeight: "0",
...styles.item,
...customColor
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.input, { ...getInputProps(computedInputProps, ref) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_core.ui.label,
{
className: (0, import_utils3.cx)("ui-rating__item", className),
__css: css,
...getItemProps({ ...computedItemProps, ...rest }),
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
RatingIcon,
{
clipPath: fractionValue !== 1 ? `inset(0 ${active ? 100 - fractionValue * 100 : 100}% 0 0)` : void 0,
children: filled ? (0, import_utils3.runIfFunc)(filledIcon, groupValue) : (0, import_utils3.runIfFunc)(emptyIcon, groupValue)
}
)
}
)
] });
}
);
RatingItem.displayName = "RatingItem";
RatingItem.__ui__ = "RatingItem";
var RatingIcon = ({ className, children, ...rest }) => {
const { styles } = useRatingContext();
const validChildren = (0, import_utils3.getValidChildren)(children);
const cloneChildren = validChildren.map(
(child) => (0, import_react2.cloneElement)(child, {
style: {
maxHeight: "1em",
maxWidth: "1em"
},
"aria-hidden": true,
focusable: false
})
);
const css = {
alignItems: "center",
display: "inline-flex",
justifyContent: "center",
...styles.icon
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_core.ui.div,
{
className: (0, import_utils3.cx)("ui-rating__item__icon", className),
__css: css,
...rest,
children: cloneChildren
}
);
};
RatingIcon.displayName = "RatingIcon";
RatingIcon.__ui__ = "RatingIcon";
var RatingStarIcon = ({ ...rest }) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_icon.Icon,
{
strokeLinecap: "round",
strokeLinejoin: "round",
viewBox: "0 0 24 24",
...rest,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" })
}
);
};
RatingStarIcon.displayName = "RatingStarIcon";
RatingStarIcon.__ui__ = "RatingStarIcon";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
RatingItem
});
//# sourceMappingURL=rating-item.js.map