@cos-design/turntable 3.5.1

package/LICENSE

@@ -0,0 +1,22 @@
+MIT LICENSE
+
+Copyright (c) 2021-present jiaxiantao
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});require('./index.css');var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("react");c=s(c,1);let l=require("react/jsx-runtime");var u={turntable:`cos-turntable-dkc32`,wheelWrap:`cos-wheelWrap-n7lhc`,canvas:`cos-canvas-A1-4x`,pointer:`cos-pointer-Rk1S9`,spinBtn:`cos-spinBtn-l9JIC`,result:`cos-result-H8q2c`,"fade-in":`cos-fade-in-U9bUC`},d=[`#FF6B6B`,`#4ECDC4`,`#FFE66D`,`#A78BFA`,`#60A5FA`,`#F472B6`,`#34D399`,`#FB923C`],f=[{label:`一等奖`},{label:`二等奖`},{label:`三等奖`},{label:`谢谢参与`},{label:`优惠券`},{label:`再来一次`}],p=e=>1-(1-e)**3,m=({prizes:e=f,size:t=360,spinDuration:n=4e3,spinRounds:r=5,buttonText:i=`开始抽奖`,onSpinEnd:a})=>{let o=(0,c.useRef)(null),s=(0,c.useRef)(0),m=(0,c.useRef)(0),h=(0,c.useRef)(1),[g,_]=(0,c.useState)(!1),[v,y]=(0,c.useState)(null),b=(0,c.useRef)(a),x=(0,c.useRef)(null);(0,c.useEffect)(()=>{b.current=a},[a]);let S=t+48,C=(e,t)=>t.color??d[e%d.length],w=(0,c.useCallback)(n=>{let r=o.current;if(!r)return;let i=r.getContext(`2d`);if(!i)return;let a=S/2,s=t/2,c=Math.PI*2/e.length;i.clearRect(0,0,S,S),i.save(),i.translate(a,a),i.rotate(n),e.forEach((e,n)=>{let r=n*c-Math.PI/2,a=r+c,o=C(n,e);i.beginPath(),i.moveTo(0,0),i.arc(0,0,s,r,a),i.closePath(),i.fillStyle=o,i.fill(),i.strokeStyle=`rgb(255 255 255 / 35%)`,i.lineWidth=2,i.stroke(),i.save(),i.rotate(r+c/2),i.textAlign=`right`,i.fillStyle=`#fff`,i.font=`bold ${Math.max(12,Math.floor(t/22))}px system-ui, sans-serif`,i.shadowColor=`rgb(0 0 0 / 30%)`,i.shadowBlur=4,i.fillText(e.label,s-18,6),i.restore()}),i.beginPath(),i.arc(0,0,s,0,Math.PI*2),i.strokeStyle=`#fbbf24`,i.lineWidth=6,i.stroke(),i.beginPath(),i.arc(0,0,s-4,0,Math.PI*2),i.strokeStyle=`#f59e0b`,i.lineWidth=2,i.stroke(),i.restore(),i.save(),i.translate(a,a);for(let e=0;e<12;e++){let t=e/12*Math.PI*2,n=Math.cos(t)*(s+14),r=Math.sin(t)*(s+14);i.beginPath(),i.arc(n,r,3,0,Math.PI*2),i.fillStyle=e%2==0?`#fde68a`:`#f59e0b`,i.fill()}i.restore()},[S,e,t]);(0,c.useEffect)(()=>{let e=o.current;if(!e)return;let t=window.devicePixelRatio||1;h.current=t,e.width=S*t,e.height=S*t;let n=e.getContext(`2d`);n&&n.setTransform(t,0,0,t,0,0),w(s.current)},[S,w]),(0,c.useEffect)(()=>()=>{x.current&&(x.current.cancelled=!0),m.current&&cancelAnimationFrame(m.current)},[]);let T=t=>{let n=360/e.length,r=(180/Math.PI*t%360+360)%360;return Math.floor((360-r+n/2)%360/n)%e.length};return(0,l.jsxs)(`div`,{className:u.turntable,style:{width:S,height:S+80},children:[(0,l.jsxs)(`div`,{className:u.wheelWrap,style:{width:S,height:S},children:[(0,l.jsx)(`div`,{className:u.pointer}),(0,l.jsx)(`canvas`,{ref:o,className:u.canvas,style:{width:S,height:S}}),(0,l.jsx)(`button`,{type:`button`,className:u.spinBtn,onClick:()=>{if(g||e.length===0)return;_(!0),y(null);let t=Math.PI*2/e.length,i=Math.floor(Math.random()*e.length)*t+t/2,a=s.current,o=a+r*Math.PI*2+(Math.PI*2-i)-a%(Math.PI*2),c=a,l=performance.now(),u={cancelled:!1};x.current=u;let d=t=>{if(u.cancelled)return;let r=t-l,i=Math.min(r/n,1),a=p(i),f=c+(o-c)*a;if(s.current=f,w(f),i<1)m.current=requestAnimationFrame(d);else if(!u.cancelled){let t=T(f),n=e[t];s.current=f,_(!1),y(n),b.current?.(n,t)}};m.current=requestAnimationFrame(d)},disabled:g,children:g?`抽奖中...`:i})]}),v&&!g&&(0,l.jsxs)(`p`,{className:u.result,children:[`恭喜获得：`,(0,l.jsx)(`strong`,{children:v.label})]})]})};exports.Turntable=m,exports.default=m;

package/dist/index.css

@@ -0,0 +1 @@
+.cos-turntable-dkc32{box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:20px;margin:0 auto;padding:24px;display:flex}.cos-wheelWrap-n7lhc{justify-content:center;align-items:center;display:flex;position:relative}.cos-canvas-A1-4x{filter:drop-shadow(0 12px 32px #00000059);border-radius:50%;display:block}.cos-pointer-Rk1S9{z-index:2;filter:drop-shadow(0 2px 4px #0000004d);border-top:28px solid #ef4444;border-left:14px solid #0000;border-right:14px solid #0000;width:0;height:0;position:absolute;top:4px;left:50%;transform:translate(-50%)}.cos-pointer-Rk1S9:after{content:"";background:#ef4444;border-radius:50%;width:16px;height:16px;position:absolute;top:-30px;left:-8px;box-shadow:inset 0 -2px 4px #0003}.cos-spinBtn-l9JIC{z-index:3;color:#b45309;cursor:pointer;background:linear-gradient(145deg,#fff 0%,#f1f5f9 100%);border:4px solid #fbbf24;border-radius:50%;width:88px;height:88px;font-size:14px;font-weight:700;line-height:1.3;transition:transform .15s,box-shadow .15s;position:absolute;box-shadow:0 4px 12px #00000026,inset 0 2px 4px #fffc}.cos-spinBtn-l9JIC:hover:not(:disabled){transform:scale(1.05);box-shadow:0 6px 16px #0003,inset 0 2px 4px #fffc}.cos-spinBtn-l9JIC:active:not(:disabled){transform:scale(.97)}.cos-spinBtn-l9JIC:disabled{opacity:.75;cursor:not-allowed}.cos-result-H8q2c{color:#92400e;background:linear-gradient(90deg,#fef3c7,#fde68a);border-radius:999px;margin:0;padding:10px 20px;font-size:15px;animation:.4s cos-fade-in-U9bUC}.cos-result-H8q2c strong{color:#b45309;font-size:17px}@keyframes cos-fade-in-U9bUC{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './src/components/turntable/index';
+export { default as Turntable } from './src/components/turntable/index';
+export type * from './src/components/turntable/index';

package/dist/index.js

@@ -0,0 +1,118 @@
+import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import './index.css';var o = {
+	turntable: "cos-turntable-dkc32",
+	wheelWrap: "cos-wheelWrap-n7lhc",
+	canvas: "cos-canvas-A1-4x",
+	pointer: "cos-pointer-Rk1S9",
+	spinBtn: "cos-spinBtn-l9JIC",
+	result: "cos-result-H8q2c",
+	"fade-in": "cos-fade-in-U9bUC"
+}, s = [
+	"#FF6B6B",
+	"#4ECDC4",
+	"#FFE66D",
+	"#A78BFA",
+	"#60A5FA",
+	"#F472B6",
+	"#34D399",
+	"#FB923C"
+], c = [
+	{ label: "一等奖" },
+	{ label: "二等奖" },
+	{ label: "三等奖" },
+	{ label: "谢谢参与" },
+	{ label: "优惠券" },
+	{ label: "再来一次" }
+], l = (e) => 1 - (1 - e) ** 3, u = ({ prizes: u = c, size: d = 360, spinDuration: f = 4e3, spinRounds: p = 5, buttonText: m = "开始抽奖", onSpinEnd: h }) => {
+	let g = n(null), _ = n(0), v = n(0), y = n(1), [b, x] = r(!1), [S, C] = r(null), w = n(h), T = n(null);
+	t(() => {
+		w.current = h;
+	}, [h]);
+	let E = d + 48, D = (e, t) => t.color ?? s[e % s.length], O = e((e) => {
+		let t = g.current;
+		if (!t) return;
+		let n = t.getContext("2d");
+		if (!n) return;
+		let r = E / 2, i = d / 2, a = Math.PI * 2 / u.length;
+		n.clearRect(0, 0, E, E), n.save(), n.translate(r, r), n.rotate(e), u.forEach((e, t) => {
+			let r = t * a - Math.PI / 2, o = r + a, s = D(t, e);
+			n.beginPath(), n.moveTo(0, 0), n.arc(0, 0, i, r, o), n.closePath(), n.fillStyle = s, n.fill(), n.strokeStyle = "rgb(255 255 255 / 35%)", n.lineWidth = 2, n.stroke(), n.save(), n.rotate(r + a / 2), n.textAlign = "right", n.fillStyle = "#fff", n.font = `bold ${Math.max(12, Math.floor(d / 22))}px system-ui, sans-serif`, n.shadowColor = "rgb(0 0 0 / 30%)", n.shadowBlur = 4, n.fillText(e.label, i - 18, 6), n.restore();
+		}), n.beginPath(), n.arc(0, 0, i, 0, Math.PI * 2), n.strokeStyle = "#fbbf24", n.lineWidth = 6, n.stroke(), n.beginPath(), n.arc(0, 0, i - 4, 0, Math.PI * 2), n.strokeStyle = "#f59e0b", n.lineWidth = 2, n.stroke(), n.restore(), n.save(), n.translate(r, r);
+		for (let e = 0; e < 12; e++) {
+			let t = e / 12 * Math.PI * 2, r = Math.cos(t) * (i + 14), a = Math.sin(t) * (i + 14);
+			n.beginPath(), n.arc(r, a, 3, 0, Math.PI * 2), n.fillStyle = e % 2 == 0 ? "#fde68a" : "#f59e0b", n.fill();
+		}
+		n.restore();
+	}, [
+		E,
+		u,
+		d
+	]);
+	t(() => {
+		let e = g.current;
+		if (!e) return;
+		let t = window.devicePixelRatio || 1;
+		y.current = t, e.width = E * t, e.height = E * t;
+		let n = e.getContext("2d");
+		n && n.setTransform(t, 0, 0, t, 0, 0), O(_.current);
+	}, [E, O]), t(() => () => {
+		T.current && (T.current.cancelled = !0), v.current && cancelAnimationFrame(v.current);
+	}, []);
+	let k = (e) => {
+		let t = 360 / u.length, n = (180 / Math.PI * e % 360 + 360) % 360;
+		return Math.floor((360 - n + t / 2) % 360 / t) % u.length;
+	};
+	return /* @__PURE__ */ a("div", {
+		className: o.turntable,
+		style: {
+			width: E,
+			height: E + 80
+		},
+		children: [/* @__PURE__ */ a("div", {
+			className: o.wheelWrap,
+			style: {
+				width: E,
+				height: E
+			},
+			children: [
+				/* @__PURE__ */ i("div", { className: o.pointer }),
+				/* @__PURE__ */ i("canvas", {
+					ref: g,
+					className: o.canvas,
+					style: {
+						width: E,
+						height: E
+					}
+				}),
+				/* @__PURE__ */ i("button", {
+					type: "button",
+					className: o.spinBtn,
+					onClick: () => {
+						if (b || u.length === 0) return;
+						x(!0), C(null);
+						let e = Math.PI * 2 / u.length, t = Math.floor(Math.random() * u.length) * e + e / 2, n = _.current, r = n + p * Math.PI * 2 + (Math.PI * 2 - t) - n % (Math.PI * 2), i = n, a = performance.now(), o = { cancelled: !1 };
+						T.current = o;
+						let s = (e) => {
+							if (o.cancelled) return;
+							let t = e - a, n = Math.min(t / f, 1), c = l(n), d = i + (r - i) * c;
+							if (_.current = d, O(d), n < 1) v.current = requestAnimationFrame(s);
+							else if (!o.cancelled) {
+								let e = k(d), t = u[e];
+								_.current = d, x(!1), C(t), w.current?.(t, e);
+							}
+						};
+						v.current = requestAnimationFrame(s);
+					},
+					disabled: b,
+					children: b ? "抽奖中..." : m
+				})
+			]
+		}), S && !b && /* @__PURE__ */ a("p", {
+			className: o.result,
+			children: ["恭喜获得：", /* @__PURE__ */ i("strong", { children: S.label })]
+		})]
+	});
+};
+//#endregion
+export { u as Turntable, u as default };

package/dist/packages/turntable/src/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from '../../../src/components/turntable';
+export { default as Turntable } from '../../../src/components/turntable';
+export type * from '../../../src/components/turntable';

package/dist/src/components/turntable/index.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export interface TurntablePrize {
+    label: string;
+    color?: string;
+}
+export interface TurntableProps {
+    /** 奖品列表 */
+    prizes?: TurntablePrize[];
+    /** 转盘直径，默认 360 */
+    size?: number;
+    /** 旋转动画时长（毫秒），默认 4000 */
+    spinDuration?: number;
+    /** 旋转圈数，默认 5 */
+    spinRounds?: number;
+    /** 抽奖按钮文案 */
+    buttonText?: string;
+    /** 旋转结束回调 */
+    onSpinEnd?: (prize: TurntablePrize, index: number) => void;
+}
+declare const Turntable: React.FC<TurntableProps>;
+export default Turntable;

package/dist/src/vite-env.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="vite/client" />
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.mp4' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.mp3' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.svg' {
+  import type { FC, SVGProps } from 'react';
+
+  export const ReactComponent: FC<SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@cos-design/turntable",
+  "version": "3.5.1",
+  "description": "Turntable component from cos-design",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.less"
+  ],
+  "keywords": [
+    "cos-design",
+    "react",
+    "turntable",
+    "Turntable"
+  ],
+  "homepage": "https://jiaxiantao.github.io/cos-design/",
+  "bugs": {
+    "url": "https://github.com/jiaxiantao/cos-design/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jiaxiantao/cos-design.git",
+    "directory": "packages/turntable"
+  },
+  "author": "jiaxiantao <jiaxiantao@souche.com>",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  }
+}