@carbon/ibm-products
Version:
Carbon for IBM Products
76 lines (74 loc) • 2.79 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.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_index = require("../../node_modules/classnames/index.js");
const require_settings = require("../../settings.js");
const require_devtools = require("../../global/js/utils/devtools.js");
const require_index$1 = require("../../node_modules/@carbon/colors/lib/index.js");
const require_clamp = require("../../global/js/utils/clamp.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(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__ */ require_runtime.__toESM(require_index.default);
var import_lib = require_index$1.default;
const blockClass = `${require_settings.pkg.prefix}--checklist__chart`;
const componentName = "ChecklistChart";
const defaults = { theme: "light" };
/**
* Custom chart component used within Checklist PLG component
*/
let ChecklistChart = react.default.forwardRef(
/**
* @param {{className?: string, value: number, theme?: import('./Checklist.types').Theme}} props type description
*/
({ className, value, theme = defaults.theme, ...rest }, ref) => {
const numDegrees = require_clamp.clamp(value * 360, 0, 360);
const circleColor = theme === "light" ? import_lib.gray20 : import_lib.gray70;
const progressColor = import_lib.purple50;
(0, react.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.default.createElement("div", {
...rest,
className: (0, import_classnames.default)(blockClass, className),
ref,
role: "img",
...require_devtools.getDevtoolsProps(componentName)
});
}
);
ChecklistChart.displayName = componentName;
ChecklistChart.propTypes = {
/**
* Optional class name for this component.
*/
className: prop_types.default.string,
/**
* Determines the theme of the component.
*/
theme: prop_types.default.oneOf(["light", "dark"]),
/**
* Number between 0 and 1.
*/
value: prop_types.default.number.isRequired
};
//#endregion
exports.ChecklistChart = ChecklistChart;