@carbon/ibm-products
Version:
Carbon for IBM Products
73 lines (71 loc) • 2.48 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { __toESM } from "../../_virtual/_rolldown/runtime.js";
import { require_classnames } from "../../node_modules/classnames/index.js";
import { pkg } from "../../settings.js";
import { getDevtoolsProps } from "../../global/js/utils/devtools.js";
import { gray20, gray70, purple50 } from "../../node_modules/@carbon/colors/es/index.js";
import { clamp } from "../../global/js/utils/clamp.js";
import React, { useEffect } from "react";
import PropTypes from "prop-types";
//#region src/components/Checklist/ChecklistChart.jsx
/**
* Copyright IBM Corp. 2023, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
const blockClass = `${pkg.prefix}--checklist__chart`;
const componentName = "ChecklistChart";
const defaults = { theme: "light" };
/**
* Custom chart component used within Checklist PLG component
*/
let ChecklistChart = React.forwardRef(
/**
* @param {{className?: string, value: number, theme?: import('./Checklist.types').Theme}} props type description
*/
({ className, value, theme = defaults.theme, ...rest }, ref) => {
const numDegrees = clamp(value * 360, 0, 360);
const circleColor = theme === "light" ? gray20 : gray70;
const progressColor = purple50;
useEffect(() => {
const ele = document.getElementsByClassName(`${blockClass}`);
setTimeout(() => {
for (const el of ele) if (el instanceof HTMLElement) {
el.style.setProperty("background-image", `conic-gradient(${progressColor} ${numDegrees}deg, ${circleColor} ${numDegrees}deg 360deg)`);
el.style.setProperty("border-radius", "50%");
}
}, 0);
});
return /* @__PURE__ */ React.createElement("div", {
...rest,
className: (0, import_classnames.default)(blockClass, className),
ref,
role: "img",
...getDevtoolsProps(componentName)
});
}
);
ChecklistChart.displayName = componentName;
ChecklistChart.propTypes = {
/**
* Optional class name for this component.
*/
className: PropTypes.string,
/**
* Determines the theme of the component.
*/
theme: PropTypes.oneOf(["light", "dark"]),
/**
* Number between 0 and 1.
*/
value: PropTypes.number.isRequired
};
//#endregion
export { ChecklistChart };