@carrot-farm/mongsil-ui
Version:
react ui library
102 lines (101 loc) • 6.21 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var react_1 = require("react");
function Donut(_a) {
var _b = _a.width, width = _b === void 0 ? 150 : _b, _c = _a.strokeWidth, strokeWidth = _c === void 0 ? 20 : _c, _d = _a.percent, percent = _d === void 0 ? 65 : _d, _e = _a.lineCap, lineCap = _e === void 0 ? 'round' : _e, _f = _a.borderThikness, borderThikness = _f === void 0 ? 4 : _f, _g = _a.innerShadow, innerShadow = _g === void 0 ? true : _g, _h = _a.animateColor, animateColor = _h === void 0 ? true : _h, _j = _a.animateRotateColor, animateRotateColor = _j === void 0 ? true : _j, _k = _a.colors, colors = _k === void 0 ? ['#42abff', '#ff4f8b', '#ffeb3b'] : _k, renderInner = _a.renderInner;
/** styles */
var style = (0, react_1.useMemo)(function () {
var innerCirclePadding = 0;
var innerCircleWidth = width - (strokeWidth * 2 + innerCirclePadding);
var innerCirclePosition = innerCirclePadding / 2;
var _width = width + borderThikness * 2;
return {
root: {
width: _width,
height: _width,
border: borderThikness + "px solid hsl(var(--color-base-deg) 22% 98%)",
},
svg: {
width: width,
height: width,
},
font: {
fontSize: "clamp(0.8rem, " + ((_width / 100 - 0.8) * 200) / (1.5 - 0.8) + "%, 1.8rem)",
},
innerCircle: {
overflow: 'hidden',
width: innerCircleWidth,
height: innerCircleWidth,
top: strokeWidth + innerCirclePosition,
left: strokeWidth + innerCirclePosition,
padding: 10,
border: innerShadow && borderThikness
? borderThikness + "px solid hsl(var(--color-base-deg) 22% 92%)"
: 'none',
boxShadow: innerShadow
? "inset 10px 10px 20px rgba(0, 0, 0, 0.15),\n inset -5px -5px 15px rgba(255, 255, 255, 1)"
: 'none',
},
};
}, [innerShadow, width, strokeWidth, borderThikness]);
/** 외부 원의 계산 값 */
var circleCalc = (0, react_1.useMemo)(function () {
var radius = width / 2 - strokeWidth / 2;
var circumference = 2 * Math.PI * radius;
var dashOffset = circumference * (1 - percent / 100);
return {
radius: radius,
circumference: circumference,
dashOffset: dashOffset,
};
}, [width, strokeWidth, percent]);
/** 애니메이션 컬러의 값 */
var colorValues = (0, react_1.useMemo)(function () {
var newColorValues = [];
colors.forEach(function (a, i) {
var frontColors = colors.slice(i);
var endColors = colors.slice(0, i);
newColorValues.push(__spreadArray(__spreadArray(__spreadArray([], frontColors, true), endColors, true), [a], false).join(';'));
});
return newColorValues;
}, [colors]);
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: "relative rounded-full emboss-500 flex items-center justify-center bg-base border-2 border-gray-500", style: style.root },
React.createElement("svg", { className: "relative -rotate-90 ", style: style.svg },
React.createElement("circle", { width: width, height: width, cx: width / 2, cy: width / 2, r: circleCalc.radius, fill: "none", stroke: "url(#gradient)", strokeWidth: strokeWidth, strokeDasharray: circleCalc.circumference, strokeDashoffset: circleCalc.dashOffset, strokeLinecap: lineCap }),
React.createElement("defs", null,
React.createElement("linearGradient", { id: "gradient", gradientTransform: "rotate(0)" }, colors.map(function (a, i) { return (React.createElement(React.Fragment, { key: "Mongsil-circle__progress-" + (a !== null && a !== void 0 ? a : '') + "-i" },
React.createElement("stop", { stopColor: a, offset: (100 / colors.length) * i + "%" }, animateColor === true && (React.createElement("animate", { attributeName: "stop-color", values: colorValues[i], repeatCount: "indefinite", dur: "10s" }))),
animateRotateColor === true && (React.createElement("animateTransform", { attributeName: "gradientTransform", attributeType: "XML", type: "rotate", from: "0 0.5 0.5", to: "360 0.5 0.5", dur: "5s", repeatCount: "indefinite" })))); })))),
React.createElement("div", { className: "rounded-full absolute flex items-center justify-center bg-base overflow-hidden", style: style.innerCircle }, typeof renderInner === 'function' ? (renderInner(percent, colors)) : (React.createElement("span", { className: "font-bold text-gray-700 ", style: style.font }, percent + "%"))))));
}
exports.default = Donut;