@cos-design/scratch-card 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={scratchCard:`cos-scratchCard-McIEK`,prize:`cos-prize-X0z5V`,canvas:`cos-canvas-JqIlr`,hidden:`cos-hidden-Lsfbt`},d=({coverColor:e=`#94a3b8`,prize:t=`🎉 恭喜中奖！`,onReveal:n,width:r=300,height:i=180})=>{let a=(0,c.useRef)(null),o=(0,c.useRef)(!1),s=(0,c.useRef)(!1),d=(0,c.useRef)(n),[f,p]=(0,c.useState)(!1);(0,c.useEffect)(()=>{d.current=n},[n]);let m=(0,c.useCallback)(t=>{t.globalCompositeOperation=`source-over`,t.fillStyle=e,t.fillRect(0,0,r,i),t.fillStyle=`rgb(255 255 255 / 30%)`,t.font=`bold 16px system-ui, sans-serif`,t.textAlign=`center`,t.fillText(`刮开涂层`,r/2,i/2)},[e,i,r]),h=(0,c.useCallback)(e=>{if(s.current)return;let t=e.getContext(`2d`);if(!t)return;let n=t.getImageData(0,0,e.width,e.height),r=0;for(let e=3;e<n.data.length;e+=4)n.data[e]<128&&r++;r/(e.width*e.height)>.45&&(s.current=!0,p(!0),d.current?.())},[]);(0,c.useEffect)(()=>{let e=a.current;if(!e)return;let t=window.devicePixelRatio||1;e.width=r*t,e.height=i*t;let n=e.getContext(`2d`);n&&(n.setTransform(t,0,0,t,0,0),m(n))},[m,i,r]);let g=(e,t)=>{let n=a.current;if(!n||s.current)return;let r=n.getContext(`2d`);r&&(r.globalCompositeOperation=`destination-out`,r.beginPath(),r.arc(e,t,20,0,Math.PI*2),r.fill(),h(n))},_=e=>{let t=a.current;if(!t)return null;let n=t.getBoundingClientRect();if(`touches`in e){let t=e.touches[0];return{x:t.clientX-n.left,y:t.clientY-n.top}}return{x:e.clientX-n.left,y:e.clientY-n.top}},v=e=>{o.current=!0;let t=_(e);t&&g(t.x,t.y)},y=e=>{if(!o.current)return;let t=_(e);t&&g(t.x,t.y)},b=()=>{o.current=!1};return(0,l.jsxs)(`div`,{className:u.scratchCard,style:{width:r,height:i},children:[(0,l.jsx)(`div`,{className:u.prize,children:t}),(0,l.jsx)(`canvas`,{ref:a,className:`${u.canvas} ${f?u.hidden:``}`,style:{width:r,height:i},onMouseDown:v,onMouseMove:y,onMouseUp:b,onMouseLeave:b,onTouchStart:v,onTouchMove:y,onTouchEnd:b})]})};exports.ScratchCard=d,exports.default=d;

package/dist/index.css

@@ -0,0 +1 @@
+.cos-scratchCard-McIEK{border-radius:12px;position:relative;overflow:hidden;box-shadow:0 8px 24px #0003}.cos-prize-X0z5V{color:#b45309;background:linear-gradient(135deg,#fef3c7,#fde68a);justify-content:center;align-items:center;font-size:20px;font-weight:700;display:flex;position:absolute;inset:0}.cos-canvas-JqIlr{z-index:1;cursor:grab;touch-action:none;position:relative}.cos-canvas-JqIlr:active{cursor:grabbing}.cos-canvas-JqIlr.cos-hidden-Lsfbt{opacity:0;pointer-events:none;transition:opacity .4s}

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,97 @@
+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 = {
+	scratchCard: "cos-scratchCard-McIEK",
+	prize: "cos-prize-X0z5V",
+	canvas: "cos-canvas-JqIlr",
+	hidden: "cos-hidden-Lsfbt"
+}, s = ({ coverColor: s = "#94a3b8", prize: c = "🎉 恭喜中奖！", onReveal: l, width: u = 300, height: d = 180 }) => {
+	let f = n(null), p = n(!1), m = n(!1), h = n(l), [g, _] = r(!1);
+	t(() => {
+		h.current = l;
+	}, [l]);
+	let v = e((e) => {
+		e.globalCompositeOperation = "source-over", e.fillStyle = s, e.fillRect(0, 0, u, d), e.fillStyle = "rgb(255 255 255 / 30%)", e.font = "bold 16px system-ui, sans-serif", e.textAlign = "center", e.fillText("刮开涂层", u / 2, d / 2);
+	}, [
+		s,
+		d,
+		u
+	]), y = e((e) => {
+		if (m.current) return;
+		let t = e.getContext("2d");
+		if (!t) return;
+		let n = t.getImageData(0, 0, e.width, e.height), r = 0;
+		for (let e = 3; e < n.data.length; e += 4) n.data[e] < 128 && r++;
+		r / (e.width * e.height) > .45 && (m.current = !0, _(!0), h.current?.());
+	}, []);
+	t(() => {
+		let e = f.current;
+		if (!e) return;
+		let t = window.devicePixelRatio || 1;
+		e.width = u * t, e.height = d * t;
+		let n = e.getContext("2d");
+		n && (n.setTransform(t, 0, 0, t, 0, 0), v(n));
+	}, [
+		v,
+		d,
+		u
+	]);
+	let b = (e, t) => {
+		let n = f.current;
+		if (!n || m.current) return;
+		let r = n.getContext("2d");
+		r && (r.globalCompositeOperation = "destination-out", r.beginPath(), r.arc(e, t, 20, 0, Math.PI * 2), r.fill(), y(n));
+	}, x = (e) => {
+		let t = f.current;
+		if (!t) return null;
+		let n = t.getBoundingClientRect();
+		if ("touches" in e) {
+			let t = e.touches[0];
+			return {
+				x: t.clientX - n.left,
+				y: t.clientY - n.top
+			};
+		}
+		return {
+			x: e.clientX - n.left,
+			y: e.clientY - n.top
+		};
+	}, S = (e) => {
+		p.current = !0;
+		let t = x(e);
+		t && b(t.x, t.y);
+	}, C = (e) => {
+		if (!p.current) return;
+		let t = x(e);
+		t && b(t.x, t.y);
+	}, w = () => {
+		p.current = !1;
+	};
+	return /* @__PURE__ */ a("div", {
+		className: o.scratchCard,
+		style: {
+			width: u,
+			height: d
+		},
+		children: [/* @__PURE__ */ i("div", {
+			className: o.prize,
+			children: c
+		}), /* @__PURE__ */ i("canvas", {
+			ref: f,
+			className: `${o.canvas} ${g ? o.hidden : ""}`,
+			style: {
+				width: u,
+				height: d
+			},
+			onMouseDown: S,
+			onMouseMove: C,
+			onMouseUp: w,
+			onMouseLeave: w,
+			onTouchStart: S,
+			onTouchMove: C,
+			onTouchEnd: w
+		})]
+	});
+};
+//#endregion
+export { s as ScratchCard, s as default };

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

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

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

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export interface ScratchCardProps {
+    /** 涂层颜色 */
+    coverColor?: string;
+    /** 奖品文字 */
+    prize?: string;
+    /** 刮开完成回调 */
+    onReveal?: () => void;
+    width?: number;
+    height?: number;
+}
+declare const ScratchCard: React.FC<ScratchCardProps>;
+export default ScratchCard;

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/scratch-card",
+  "version": "3.5.1",
+  "description": "ScratchCard 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",
+    "scratchCard",
+    "ScratchCard"
+  ],
+  "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/scratchCard"
+  },
+  "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"
+  }
+}