刮一刮

├── .gitignore ├── _config.yml ├── .npmignore ├── .babelrc ├── example ├── index.html ├── index.scss └── index.jsx ├── dist ├── index.html ├── css │ └── index.8c74a543.css └── index.a1fb715b.js ├── src ├── index.less └── index.tsx ├── tsconfig.example.json ├── tsconfig.prod.json ├── tsconfig.dev.json ├── webpack.config.prod.js ├── package.json ├── lib ├── index.d.ts └── index.js ├── webpack.config.dev.js ├── webpack.config.example.js └── readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | example 4 | webpack.config.dev.js 5 | webpack.config.example.js 6 | tsconfig.dev.json 7 | tsconfig.example.json -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-react", 4 | ["@babel/preset-env", { "targets": "> 2%, ie 11, safari > 9" }] 5 | 6 | ], 7 | "plugins": [ 8 | "@babel/plugin-proposal-class-properties" 9 | ] 10 | } -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 刮一刮 8 | 9 | 10 |

11 | 12 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 刮一刮 8 | 9 | 10 |

11 | 12 | -------------------------------------------------------------------------------- /src/index.less: -------------------------------------------------------------------------------- 1 | .___scratch{ 2 | position: relative; 3 | display: inline-block; 4 | user-select: none; 5 | font-size: 0; 6 | &.frozen{ 7 | pointer-events: none; 8 | } 9 | .___content{ 10 | opacity: 0; 11 | &.visible{ 12 | opacity: 1; 13 | } 14 | } 15 | canvas{ 16 | position: absolute; 17 | top: 0; 18 | right: 0; 19 | bottom: 0; 20 | left: 0; 21 | height: 100%; 22 | width: 100%; 23 | } 24 | } -------------------------------------------------------------------------------- /tsconfig.example.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["es6", "dom", "scripthost", "es2015.symbol"], 4 | "target": "es6", 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "importHelpers": true, 8 | "jsx": "preserve", 9 | "esModuleInterop": true, 10 | "allowUnreachableCode": true, 11 | "allowUnusedLabels": true, 12 | "baseUrl": ".", 13 | "removeComments": true, 14 | "paths": { 15 | "@/": ["./src/"] 16 | }, 17 | "allowSyntheticDefaultImports": true, 18 | "experimentalDecorators": true, 19 | "include": ["./example/*"], 20 | "exclude": ["node_modules", "*.d.ts"] 21 | }, 22 | "awesomeTypescriptLoaderOptions": { 23 | "errorsAsWarnings": true 24 | } 25 | } -------------------------------------------------------------------------------- /tsconfig.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["es6", "dom", "scripthost", "es2015.symbol"], 4 | "target": "es5", 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "importHelpers": true, 8 | "jsx": "react", 9 | "esModuleInterop": true, 10 | "allowUnreachableCode": true, 11 | "allowUnusedLabels": true, 12 | "baseUrl": ".", 13 | "declaration": true, 14 | "declarationDir": "lib", 15 | "paths": { 16 | "@/": ["./src/"] 17 | }, 18 | "allowSyntheticDefaultImports": true, 19 | "experimentalDecorators": true, 20 | "include": ["./src/*"], 21 | "exclude": ["node_modules", "*.d.ts"] 22 | }, 23 | "awesomeTypescriptLoaderOptions": { 24 | "errorsAsWarnings": true 25 | } 26 | } -------------------------------------------------------------------------------- /tsconfig.dev.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["es6", "dom", "scripthost", "es2015.symbol"], 4 | "target": "es6", 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "importHelpers": true, 8 | "jsx": "preserve", 9 | "esModuleInterop": true, 10 | "sourceMap": true, 11 | "allowUnreachableCode": true, 12 | "allowUnusedLabels": true, 13 | "inlineSources": true, 14 | "baseUrl": ".", 15 | "removeComments": true, 16 | "paths": { 17 | "@/": ["./src/"] 18 | }, 19 | "allowSyntheticDefaultImports": true, 20 | "experimentalDecorators": true, 21 | "include": ["./example/*"], 22 | "exclude": ["node_modules", "*.d.ts"] 23 | }, 24 | "awesomeTypescriptLoaderOptions": { 25 | "errorsAsWarnings": true 26 | } 27 | } -------------------------------------------------------------------------------- /webpack.config.prod.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const nodeExternals = require('webpack-node-externals'); 3 | const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 4 | const autoprefixer = require('autoprefixer'); 5 | module.exports = { 6 | mode: 'production', 7 | 8 | entry: { 9 | index: './src/index.tsx' 10 | }, 11 | 12 | output: { 13 | filename: '[name].js', 14 | path: path.resolve(__dirname, "lib"), 15 | libraryTarget: 'commonjs2' 16 | }, 17 | 18 | module: { 19 | rules: [ 20 | { test: /\.css$/, use: ['style-loader', 'css-loader', {loader: 'postcss-loader', options: { plugins: [autoprefixer()]}}] }, 21 | { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader', {loader: 'postcss-loader', options: { plugins: [autoprefixer()]}}] }, 22 | { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader', {loader: 'postcss-loader', options: { plugins: [autoprefixer()]}}] }, 23 | { test: /\.(jpg|png|gif|bmp|jpeg|ttf|eot|svg|woff|woff2)$/, use: [{loader: 'url-loader', options: {limit:1024, name:'assets/[name]-[hash:8].[ext]'}}] }, 24 | { test: /\.(j|t)sx?$/, use: 'awesome-typescript-loader?configFileName=tsconfig.prod.json', exclude: /node_modules/ } 25 | ] 26 | }, 27 | 28 | externals: [nodeExternals()], 29 | 30 | resolve:{ 31 | extensions: [".js", ".jsx", ".ts", ".tsx", "json", "*"] 32 | }, 33 | 34 | plugins: [ 35 | new CleanWebpackPlugin() 36 | ] 37 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-scratch-perfect", 3 | "version": "2.0.1", 4 | "description": "刮一刮", 5 | "main": "lib/index.js", 6 | "directories": { 7 | "example": "example", 8 | "lib": "lib" 9 | }, 10 | "scripts": { 11 | "build": "webpack --config webpack.config.prod.js", 12 | "start": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.dev.js --hot --inline", 13 | "example": "cross-env NODE_ENV=production webpack --config webpack.config.example.js" 14 | }, 15 | "author": "dsmelon", 16 | "license": "ISC", 17 | "devDependencies": { 18 | "@babel/cli": "^7.6.4", 19 | "@babel/core": "^7.6.4", 20 | "@babel/plugin-proposal-class-properties": "^7.5.5", 21 | "@babel/preset-env": "^7.6.3", 22 | "@babel/preset-react": "^7.6.3", 23 | "@babel/runtime": "^7.6.3", 24 | "@types/react": "^16.9.11", 25 | "@types/react-dom": "^16.9.4", 26 | "autoprefixer": "^9.7.1", 27 | "awesome-typescript-loader": "^5.2.1", 28 | "babel-loader": "^8.0.0-beta.0", 29 | "clean-webpack-plugin": "^3.0.0", 30 | "cross-env": "^6.0.3", 31 | "css-loader": "^3.2.0", 32 | "extract-text-webpack-plugin": "^4.0.0-beta.0", 33 | "file-loader": "^4.2.0", 34 | "html-webpack-plugin": "^3.2.0", 35 | "less": "^3.10.3", 36 | "less-loader": "^5.0.0", 37 | "node-sass": "^4.13.0", 38 | "npm": "^6.12.1", 39 | "postcss-loader": "^3.0.0", 40 | "react": "^16.11.0", 41 | "react-dom": "^16.11.0", 42 | "sass-loader": "^8.0.0", 43 | "style-loader": "^1.0.0", 44 | "typescript": "^3.7.2", 45 | "url-loader": "^2.2.0", 46 | "webpack": "^4.41.2", 47 | "webpack-cli": "^3.3.10", 48 | "webpack-dev-server": "^3.9.0", 49 | "webpack-node-externals": "^1.7.2" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /lib/index.d.ts: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import './index.less'; 3 | interface props { 4 | clear?: boolean; 5 | color?: string; 6 | className?: string; 7 | size?: number; 8 | onSuccess?: () => void; 9 | onChange?: (p: number) => void; 10 | imgRepeat?: "width" | "height" | "repeat"; 11 | round?: number[]; 12 | img?: string; 13 | mode?: "move" | "end"; 14 | percentage?: number; 15 | } 16 | interface state { 17 | ch: number; 18 | cw: number; 19 | isSuccess: boolean; 20 | visible: boolean; 21 | } 22 | export default class extends PureComponent { 23 | state: { 24 | ch: number; 25 | cw: number; 26 | isSuccess: boolean; 27 | visible: boolean; 28 | }; 29 | image: HTMLImageElement; 30 | wrap: HTMLDivElement; 31 | canvas: HTMLCanvasElement; 32 | ptg: number; 33 | size: number; 34 | round: number[]; 35 | cells: boolean[]; 36 | roundX: number[]; 37 | roundY: number[]; 38 | cellX: number; 39 | cellY: number; 40 | sum: number; 41 | roundLen: number; 42 | offsetLeft: number; 43 | offsetTop: number; 44 | preX: number; 45 | preY: number; 46 | ctx: CanvasRenderingContext2D; 47 | componentDidMount(): void; 48 | init: (bol: boolean) => void; 49 | down: (e: React.MouseEvent & React.TouchEvent) => void; 50 | move: (e: MouseEvent & TouchEvent) => void; 51 | up: (e: TouchEvent & MouseEvent, bol?: boolean) => void; 52 | addRound: (preX: number, preY: number, curX: number, curY: number) => void; 53 | handleRound: (curX: number, curY: number) => void; 54 | checkRound: (e: TouchEvent & MouseEvent) => void; 55 | render(): JSX.Element; 56 | } 57 | export {}; 58 | -------------------------------------------------------------------------------- /dist/css/index.8c74a543.css: -------------------------------------------------------------------------------- 1 | .___scratch { 2 | position: relative; 3 | display: inline-block; 4 | -webkit-user-select: none; 5 | -moz-user-select: none; 6 | -ms-user-select: none; 7 | user-select: none; 8 | font-size: 0; 9 | } 10 | .___scratch.frozen { 11 | pointer-events: none; 12 | } 13 | .___scratch .___content { 14 | opacity: 0; 15 | } 16 | .___scratch .___content.visible { 17 | opacity: 1; 18 | } 19 | .___scratch canvas { 20 | position: absolute; 21 | top: 0; 22 | right: 0; 23 | bottom: 0; 24 | left: 0; 25 | height: 100%; 26 | width: 100%; 27 | } 28 | *{padding:0;margin:0;box-sizing:content-box}body,html{background-color:#fdfdfd;height:100%;width:100%}.wrap{width:1024px;margin:0 auto;text-align:center}.wrap .left{vertical-align:top}.wrap .left .s1{font-size:100px;line-height:320px;height:320px;width:450px;color:deeppink;display:inline-block}.wrap .left .ppp{position:absolute;right:0;top:0;font-size:16px;z-index:10;padding:2px 5px;color:white;text-shadow:1px 1px black}.wrap .right{margin-left:20px;display:inline-block;vertical-align:top;text-align:left;line-height:2.5;font-size:16px;color:#333}.wrap .right p{display:inline-block;width:220px;text-align:right}.wrap .right input,.wrap .right select{height:22px;padding:0 10px;background-color:white;outline:none;margin-left:30px;vertical-align:middle;width:250px}.wrap .right input[type=checkbox]{height:22px;width:22px}.wrap .right span{color:deeppink}.wrap .doc{text-align:center;font-size:14px;text-shadow:0px 0px 1.5px;margin-top:20px}.wrap .doc table{width:100%;border:1px solid green;border-collapse:collapse}.wrap .doc table tr{color:darkviolet;line-height:2;text-align:left}.wrap .doc table tr td{border:1px solid green;padding:0 10px;box-shadow:0 0 6px 0 #888 inset}.wrap .doc table tr:first-child{color:deeppink;font-size:16px;text-align:center} 29 | -------------------------------------------------------------------------------- /webpack.config.dev.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const htmlWebpackPlugin = require('html-webpack-plugin'); 3 | const autoprefixer = require('autoprefixer'); 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 5 | module.exports = { 6 | mode: 'development', 7 | 8 | entry: { 9 | index: './example/index.jsx' 10 | }, 11 | 12 | output: { 13 | filename: 'bundle.js', 14 | path: path.resolve(__dirname, "dist") 15 | }, 16 | 17 | module: { 18 | rules: [ 19 | { test: /\.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader', use: ['css-loader', {loader: 'postcss-loader', options: { plugins: [autoprefixer()]}}]}) }, 20 | { test: /\.scss$/, use: ExtractTextPlugin.extract({fallback: 'style-loader', use: ['css-loader', 'sass-loader', {loader: 'postcss-loader', options: { plugins: [autoprefixer()]}}]}) }, 21 | { test: /\.less$/, use: ExtractTextPlugin.extract({fallback: 'style-loader', use: ['css-loader', 'less-loader', {loader: 'postcss-loader', options: { plugins: [autoprefixer()]}}]}) }, 22 | { test: /\.(jpg|png|gif|bmp|jpeg|ttf|eot|svg|woff|woff2)$/, use: [{loader: "url-loader", options: {limit:10240, name: 'assets/[name]-[hash:8].[ext]'}}] }, 23 | { test: /\.jsx?$/, use: 'babel-loader', exclude: /node_modules/ }, 24 | { test: /\.tsx?$/, use: ['babel-loader', 'awesome-typescript-loader?configFileName=tsconfig.dev.json'], exclude: /node_modules/ } 25 | ] 26 | }, 27 | 28 | resolve:{ 29 | extensions: [".js", ".jsx", ".ts", ".tsx", "json", "*"] 30 | }, 31 | 32 | devServer: { 33 | port: 8000, 34 | open: true, 35 | hot: true, 36 | host: "localhost", 37 | stats: "errors-only" 38 | }, 39 | 40 | devtool: 'inline-source-map', 41 | 42 | watchOptions: { 43 | ignored: /node_modules/ 44 | }, 45 | 46 | plugins: [ 47 | new ExtractTextPlugin({ 48 | filename: 'css/[name].[md5:contenthash:hex:8].css', 49 | allChunks: false 50 | }), 51 | new htmlWebpackPlugin({ 52 | template: 'example/index.html', 53 | hash: false 54 | }) 55 | ] 56 | } -------------------------------------------------------------------------------- /example/index.scss: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: content-box; 5 | } 6 | body,html{ 7 | background-color: #fdfdfd; 8 | height: 100%; 9 | width: 100%; 10 | } 11 | .wrap{ 12 | width: 1024px; 13 | margin: 0 auto; 14 | text-align: center; 15 | .left{ 16 | vertical-align: top; 17 | .s1{ 18 | font-size: 100px; 19 | line-height: 320px; 20 | height: 320px; 21 | width: 450px; 22 | color: deeppink; 23 | display: inline-block; 24 | } 25 | .ppp{ 26 | position: absolute; 27 | right: 0; 28 | top: 0; 29 | font-size: 16px; 30 | z-index: 10; 31 | padding: 2px 5px; 32 | color: white; 33 | text-shadow: 1px 1px black; 34 | } 35 | } 36 | .right{ 37 | margin-left: 20px; 38 | display: inline-block; 39 | vertical-align: top; 40 | text-align: left; 41 | line-height: 2.5; 42 | font-size: 16px; 43 | color: #333; 44 | p{ 45 | display: inline-block; 46 | width: 220px; 47 | text-align: right; 48 | } 49 | input, select{ 50 | height: 22px; 51 | padding: 0 10px; 52 | background-color: white; 53 | outline: none; 54 | margin-left: 30px; 55 | vertical-align: middle; 56 | width: 250px; 57 | } 58 | input[type=checkbox]{ 59 | height: 22px; 60 | width: 22px; 61 | } 62 | span{ 63 | color: deeppink; 64 | } 65 | } 66 | .doc{ 67 | text-align: center; 68 | font-size: 14px; 69 | text-shadow: 1px 1px 1.5px rgba(0,0,0,0.5); 70 | margin-top: 20px; 71 | table{ 72 | width: 100%; 73 | border: 1px solid green; 74 | border-collapse: collapse; 75 | tr{ 76 | color: darkviolet; 77 | line-height: 2; 78 | text-align: left; 79 | td{ 80 | border: 1px solid green; 81 | padding: 0 10px; 82 | box-shadow: 0 0 2px 0 #888 inset; 83 | } 84 | &:first-child{ 85 | color: deeppink; 86 | font-size: 16px; 87 | text-align: center; 88 | } 89 | } 90 | } 91 | } 92 | } -------------------------------------------------------------------------------- /webpack.config.example.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 3 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 4 | const htmlWebpackPlugin = require('html-webpack-plugin'); 5 | const autoprefixer = require('autoprefixer'); 6 | module.exports = { 7 | mode: 'production', 8 | 9 | entry: { 10 | index: './example/index.jsx' 11 | }, 12 | 13 | output: { 14 | filename: '[name].[chunkhash:8].js', 15 | path: path.resolve(__dirname, 'dist') 16 | }, 17 | 18 | module: { 19 | rules: [ 20 | { test: /\.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader', use: ['css-loader', {loader: 'postcss-loader', options: { plugins: [autoprefixer()]}}]}) }, 21 | { test: /\.scss$/, use: ExtractTextPlugin.extract({fallback: 'style-loader', use: ['css-loader', 'sass-loader', {loader: 'postcss-loader', options: { plugins: [autoprefixer()]}}]}) }, 22 | { test: /\.less$/, use: ExtractTextPlugin.extract({fallback: 'style-loader', use: ['css-loader', 'less-loader', {loader: 'postcss-loader', options: { plugins: [autoprefixer()]}}]}) }, 23 | { test: /\.(jpg|png|gif|bmp|jpeg|ttf|eot|svg|woff|woff2)$/, use: [{loader: 'url-loader', options: {limit:1024, name:'assets/[name]-[hash:8].[ext]'}}] }, 24 | { test: /\.jsx?$/, use: 'babel-loader', exclude: /node_modules/ }, 25 | { test: /\.tsx?$/, use: ['babel-loader', 'awesome-typescript-loader?configFileName=tsconfig.example.json'], exclude: /node_modules/ } 26 | ] 27 | }, 28 | devtool: false, 29 | 30 | optimization: { 31 | splitChunks: { 32 | chunks: 'async', 33 | minSize: 30000, 34 | maxSize: 0, 35 | minChunks: 1, 36 | maxAsyncRequests: 5, 37 | maxInitialRequests: 3, 38 | automaticNameDelimiter: '.', 39 | automaticNameMaxLength: 30, 40 | name: true, 41 | cacheGroups: { 42 | vendors: { 43 | test: /[\\/]node_modules[\\/]/, 44 | priority: -10 45 | }, 46 | default: { 47 | minChunks: 2, 48 | priority: -20, 49 | reuseExistingChunk: true 50 | } 51 | } 52 | } 53 | }, 54 | 55 | resolve:{ 56 | extensions: [".js", ".jsx", ".ts", ".tsx", "json", "*"] 57 | }, 58 | 59 | plugins: [ 60 | new CleanWebpackPlugin(), 61 | new ExtractTextPlugin({ 62 | filename: 'css/[name].[md5:contenthash:hex:8].css', 63 | allChunks: false 64 | }), 65 | new htmlWebpackPlugin({ 66 | template: 'example/index.html', 67 | hash: false 68 | }) 69 | ] 70 | } -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # 欢迎使用react刮一刮组件 2 | 3 | 此组件使用图片时未使用getImageData方法,没有跨域问题,使用简单,适合多场景使用 4 | 5 | 安装 6 | ```cmd 7 | npm install react-scratch-perfect --save 8 | ``` 9 | 10 | 例子: [https://dsmelon.github.io/react-scratch-perfect/dist/index.html](https://dsmelon.github.io/react-scratch-perfect/dist/index.html) 11 | 12 | **api** 13 | 14 | | 参数名 | 类型 | 默认值 | 说明 | 值 | 15 | |:------------|:---------------------|:-------------|:--------------------------------------|:-------------------------------------------------| 16 | | className | string | 无 | 容器的类名 | | 17 | | clear | boolean | false | 完成后是否清除画布 | | 18 | | color | string | #808080 | 刮刮卡的颜色 | | 19 | | img | string | 无 | 刮刮卡的填充图片(如果图片加载失败,会使用颜色值)| | 20 | | imgRepeat | string | 无 | 图片填充方式 | width: 宽度撑满，高度自适应并居中
height: 高度撑满，宽度自适应并居中
repeat: 重复填充
无值会被拉伸铺满容器 | 21 | | size | number | 1/10容器宽度 | 画笔直径 | | 22 | | round | array\[number\] | \[0,0,0,0\] | 奖品限定区域,分别为上右下左的padding值 | | 23 | | percentage | number | 70 | 完成百分比(round之外的不参与计算) | | 24 | | mode |string | move | 在什么时刻触发onChange和onSuccess | move: 手指移动时触发onChange和onSuccess
end: 手指抬起时触发onChange和onSuccess | 25 | | onChange | function(percentage) | 无 | 改变时触发的函数,回传的是已经刮出的百分比 | | 26 | | onSuccess | function | 无 | 完成时的回调 | | 27 | 28 | 使用方法 29 | ```jsx 30 | 43 |

一等奖

44 | 45 | ``` 46 | ```css 47 | .s1{ 48 | font-size: 100px; 49 | line-height: 320px; 50 | height: 320px; 51 | width: 450px; 52 | color: deeppink; 53 | display: inline-block; 54 | } 55 | ``` 56 | github地址: [https://github.com/dsmelon/react-scratch-perfect](https://github.com/dsmelon/react-scratch-perfect) -------------------------------------------------------------------------------- /example/index.jsx: -------------------------------------------------------------------------------- 1 | import React, {PureComponent} from 'react'; 2 | import ReactDom from 'react-dom'; 3 | import Scratch from '../src/index'; 4 | import './index.scss'; 5 | 6 | export default class App extends PureComponent{ 7 | state = { 8 | mode: "move", 9 | p: 0, 10 | color: "#808080", 11 | img: "", 12 | round: [114,77,114,77], 13 | size: 40, 14 | clear: false, 15 | imgRepeat: "", 16 | key: 0, 17 | percentage: 70 18 | } 19 | timer = -1; 20 | handleChange = (p) => { 21 | this.setState({p}) 22 | } 23 | onSuccess = () => { 24 | alert("success"); 25 | } 26 | change = e => { 27 | const {name, value, checked} = e.currentTarget; 28 | switch(name){ 29 | case "clear": 30 | this.setState({[name]: checked, key: ++this.state.key}); 31 | break; 32 | case "size": 33 | case "img": 34 | case "percentage": 35 | clearTimeout(this.timer); 36 | this.timer = setTimeout(()=>{ 37 | this.setState({[name]: value, key: ++this.state.key}); 38 | },400) 39 | break; 40 | case "round": 41 | clearTimeout(this.timer); 42 | this.timer = setTimeout(()=>{ 43 | this.setState({[name]: value ? value.split(",").map(_=>+_) : [], key: ++this.state.key}); 44 | },400) 45 | break; 46 | default: 47 | this.setState({[name]: value, key: ++this.state.key}); 48 | break; 49 | } 50 | this.setState({p: 0}); 51 | } 52 | render(){ 53 | return

54 | 68 |

一等奖

69 |

{this.state.p}

70 | 71 |

72 |

颜色( color )

:
73 |

图片( img )

:
74 |

图片填充方式( imgRepeat )

:
80 |

范围( round )

:
81 |

模式( mode )

:
85 |

画笔大小( size )

:
86 |

完成百分比( percentage )

:
87 |

完成后清除画布( clear )

: 88 |

89 |

90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 104 | 105 | 106 | 107 | 108 | 109 | 113 | 114 | 115 | 116 | 117 |

参数名	类型	默认值	说明	值
className	string	无	容器的类名	{"\u3000"}
clear	boolean	false	完成后是否清除画布	{"\u3000"}
color	string	#808080	刮刮卡的颜色	{"\u3000"}
img	string	无	刮刮卡的填充图片	{"\u3000"}
imgRepeat	string	无	图片填充方式	99 \| width: 宽度撑满，高度自适应并居中 100 \| height: 高度撑满，宽度自适应并居中 101 \| repeat: 重复填充 102 \| 无值或者其他值会被拉伸铺满容器 103 \|
size	number	1/10容器宽度	画笔直径	{"\u3000"}
round	array[number]	[0,0,0,0]	奖品限定区域,分别为上右下左的padding值	{"\u3000"}
percentage	number	70	完成百分比(round之外的不参与计算)	{"\u3000"}
mode	string	move	在什么时刻触发onChange和onSuccess	110 \| move: 手指移动时触发onChange和onSuccess 111 \| end: 手指抬起时触发onChange和onSuccess 112 \|
onChange	function(percentage)	无	改变时触发的函数,回传的是已经刮出的百分比	{"\u3000"}
onSuccess	function	无	完成时的回调	{"\u3000"}

118 |

119 |

120 | } 121 | } 122 | 123 | ReactDom.render(, document.getElementById("root")); -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import './index.less'; 3 | const dpr = window.devicePixelRatio === 1 ? 2 : window.devicePixelRatio; 4 | const preventDefault = e => e && e.preventDefault(); 5 | //判断是否支持快速滚动 6 | let support = false; 7 | try { 8 | let options = Object.defineProperty({}, "passive", { 9 | get: () => support = true 10 | }); 11 | window.addEventListener("test", null, options); 12 | } catch(err) {} 13 | 14 | interface props{ 15 | clear?: boolean; 16 | color?: string; 17 | className?: string; 18 | size?: number; 19 | onSuccess?: () => void; 20 | onChange?: (p:number) => void; 21 | imgRepeat?: "width" | "height" | "repeat"; 22 | round?: number[]; 23 | img?: string; 24 | mode?: "move" | "end"; 25 | percentage?: number; 26 | } 27 | 28 | interface state{ 29 | ch: number; 30 | cw: number; 31 | isSuccess: boolean; 32 | visible: boolean; 33 | } 34 | 35 | export default class extends PureComponent{ 36 | state = { 37 | ch: 0, 38 | cw: 0, 39 | isSuccess: false, 40 | visible: false 41 | }; 42 | image: HTMLImageElement; 43 | wrap: HTMLDivElement; 44 | canvas: HTMLCanvasElement; 45 | ptg: number; 46 | size: number; 47 | round: number[]; 48 | cells: boolean[]; 49 | roundX: number[]; 50 | roundY: number[]; 51 | cellX: number; 52 | cellY: number; 53 | sum: number; 54 | roundLen: number; 55 | offsetLeft: number; 56 | offsetTop: number; 57 | preX: number; 58 | preY: number; 59 | ctx: CanvasRenderingContext2D; 60 | componentDidMount(){ 61 | const { img } = this.props; 62 | if(img){ 63 | this.image = document.createElement("img"); 64 | this.image.src = img; 65 | this.image.onload = () => this.init(true); 66 | this.image.onerror = () => this.init(false); 67 | }else{ 68 | this.init(false); 69 | } 70 | } 71 | init = (bol: boolean): void => { 72 | const { size, round = [0, 0, 0, 0], color = "#808080", imgRepeat } = this.props; 73 | const ch = this.wrap.clientHeight * dpr; 74 | const cw = this.wrap.clientWidth * dpr; 75 | this.setState({cw, ch}, ()=>{ 76 | this.canvas.addEventListener("touchmove", preventDefault, support ? {passive: false} : false); 77 | this.ctx = this.canvas.getContext('2d'); 78 | this.ctx.scale(dpr, dpr); 79 | if(bol){ 80 | let { width, height } = this.image; 81 | if(imgRepeat === "height"){ 82 | const w = width * (ch / dpr / height); 83 | this.ctx.drawImage(this.image, 0, 0, width, height, (cw / dpr - w) / 2, 0, w, ch / dpr); 84 | }else if(imgRepeat === "width"){ 85 | const h = height * (cw / dpr / width); 86 | this.ctx.drawImage(this.image, 0, 0, width, height, 0, (ch / dpr - h) / 2, cw / dpr, h); 87 | }else if(imgRepeat === "repeat"){ 88 | this.ctx.fillStyle = this.ctx.createPattern(this.image, "repeat"); 89 | this.ctx.fillRect(0, 0, cw, ch); 90 | }else{ 91 | this.ctx.drawImage(this.image, 0, 0, width, height, 0, 0, cw / dpr, ch / dpr); 92 | } 93 | }else{ 94 | this.ctx.fillStyle = color; 95 | this.ctx.fillRect(0, 0, cw, ch); 96 | } 97 | this.ptg = 0; 98 | this.ctx.globalCompositeOperation = 'destination-out'; 99 | this.ctx.strokeStyle = "#000000"; 100 | this.size = size || cw / dpr / 10; 101 | this.ctx.lineWidth = this.size; 102 | this.ctx.lineCap = 'round'; 103 | this.round = round; 104 | this.cells = []; 105 | this.roundX = [this.round[3], cw / dpr - this.round[1]]; 106 | this.roundY = [this.round[0], ch / dpr - this.round[2]]; 107 | this.cellX = (this.roundX[1] - this.roundX[0]) / 10; 108 | this.cellY = (this.roundY[1] - this.roundY[0]) / 10; 109 | this.sum = this.roundLen = 100; 110 | while(this.sum--) this.cells.push(false); 111 | setTimeout(() => { 112 | this.setState({visible: true}); 113 | }, 500); 114 | }); 115 | } 116 | down = (e: React.MouseEvent & React.TouchEvent): void => { 117 | const {left, top} = this.wrap.getClientRects()[0]; 118 | this.offsetLeft = left; 119 | this.offsetTop = top; 120 | let changedTouches = e.changedTouches; 121 | if(changedTouches){ 122 | const currentTouch = changedTouches[0]; 123 | this.preX = currentTouch.pageX - this.offsetLeft; 124 | this.preY = currentTouch.pageY - this.offsetTop; 125 | window.addEventListener("touchmove", this.move, false); 126 | window.addEventListener("touchend", this.up, false); 127 | }else{ 128 | this.preX = e.pageX - this.offsetLeft; 129 | this.preY = e.pageY - this.offsetTop; 130 | window.addEventListener("mousemove", this.move, false); 131 | window.addEventListener("mouseup", this.up, false); 132 | } 133 | 134 | this.handleRound(this.preX, this.preY); 135 | } 136 | move = (e: MouseEvent & TouchEvent): void => { 137 | const { mode = "move" } = this.props; 138 | let changedTouches = e.changedTouches; 139 | let preX = this.preX, preY = this.preY; 140 | this.ctx.beginPath(); 141 | this.ctx.moveTo(this.preX, this.preY); 142 | if(changedTouches){ 143 | const currentTouch = changedTouches[0]; 144 | this.preX = currentTouch.pageX - this.offsetLeft; 145 | this.preY = currentTouch.pageY - this.offsetTop; 146 | }else{ 147 | this.preX = e.pageX - this.offsetLeft; 148 | this.preY = e.pageY - this.offsetTop; 149 | } 150 | this.ctx.lineTo(this.preX, this.preY); 151 | this.ctx.stroke(); 152 | this.canvas.style.zIndex = ((+this.canvas.style.zIndex || 0) + 1) % 2 + 2 + ""; 153 | this.addRound(preX, preY, this.preX, this.preY); 154 | mode === "move" && this.checkRound(e); 155 | } 156 | up = (e: TouchEvent & MouseEvent, bol?: boolean): void => { 157 | const { mode } = this.props; 158 | let changedTouches = e.changedTouches; 159 | if(changedTouches){ 160 | window.removeEventListener("touchmove", this.move, false); 161 | window.removeEventListener("touchend", this.up, false); 162 | }else{ 163 | window.removeEventListener("mousemove", this.move, false); 164 | window.removeEventListener("mouseup", this.up, false); 165 | } 166 | mode === "end" && !bol && this.checkRound(e); 167 | } 168 | addRound = (preX: number, preY: number, curX: number, curY: number): void => { 169 | const dx = (curX - preX); 170 | const dy = (curY - preY); 171 | if(dx > this.cellX || dy > this.cellY){ 172 | let chunkX, chunkY; 173 | if(dy === 0){ 174 | chunkX = this.cellX; 175 | chunkY = 0; 176 | }else if(dx === 0){ 177 | chunkY = this.cellY; 178 | chunkX = 0; 179 | }else{ 180 | const ratio = Math.abs(dy / dx); 181 | if(ratio > this.cellY / this.cellX){ 182 | chunkX = this.cellY / 2 / ratio; 183 | chunkY = this.cellY / 2; 184 | }else{ 185 | chunkY = this.cellX / 2 * ratio; 186 | chunkX = this.cellX / 2; 187 | } 188 | } 189 | let [sx, ex] = dx > 0 ? [preX, curX] : [curX, preX]; 190 | let [sy, ey] = dy > 0 ? [preY, curY] : [curY, curY]; 191 | while(!(sx > ex || sy > ey)){ 192 | sx += chunkX; 193 | sy += chunkY; 194 | this.handleRound(sx, sy); 195 | } 196 | this.handleRound(curX, curY); 197 | }else{ 198 | this.handleRound(curX, curY); 199 | } 200 | } 201 | handleRound = (curX: number, curY: number): void => { 202 | const posX = (curX - this.round[3]) / this.cellX; 203 | const posY = (curY - this.round[0]) / this.cellY; 204 | const posXr = [Math.floor(posX - this.size / 2 / this.cellX), Math.floor(posX + this.size / 2 / this.cellX)]; 205 | const posYr = [Math.floor(posY - this.size / 2 / this.cellY), Math.floor(posY + this.size / 2 / this.cellY)]; 206 | for(let i = posXr[0]; i <= posXr[1]; i++){ 207 | if(i >= 0 && i < 10){ 208 | for(let j = posYr[0]; j <= posYr[1]; j++){ 209 | if(j >= 0 && j < 10){ 210 | const dx = curX - this.round[3] - (i + 0.5) * this.cellX; 211 | const dy = curY - this.round[0] - (j + 0.5) * this.cellY; 212 | const index = j * 10 + i; 213 | if(dx * dx + dy * dy < this.size * this.size / 4 && !this.cells[index]){ 214 | this.cells[index] = true; 215 | this.ptg++; 216 | } 217 | } 218 | } 219 | } 220 | } 221 | } 222 | checkRound = (e: TouchEvent & MouseEvent): void => { 223 | const { percentage = 70, onChange, clear, onSuccess } = this.props; 224 | onChange && onChange(this.ptg); 225 | if(this.ptg >= percentage){ 226 | clear && this.ctx.clearRect(0, 0, this.state.cw, this.state.ch); 227 | this.setState({isSuccess: true}); 228 | this.up(e, true); 229 | onSuccess && onSuccess(); 230 | } 231 | } 232 | render(){ 233 | const { children, className = "" } = this.props; 234 | return

this.wrap = dom}> 235 |

{children}

236 |

243 |

244 | } 245 | } -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | module.exports=function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}([function(e,t){e.exports=require("react")},function(e,t){e.exports=require("tslib")},function(e,t,n){"use strict";n.r(t);var r=n(1),o=n(0),i=n.n(o),a=(n(3),1===window.devicePixelRatio?2:window.devicePixelRatio),s=function(e){return e&&e.preventDefault()},c=!1;try{var u=Object.defineProperty({},"passive",{get:function(){return c=!0}});window.addEventListener("test",null,u)}catch(e){}var l=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={ch:0,cw:0,isSuccess:!1,visible:!1},t.init=function(e){var n=t.props,r=n.size,o=n.round,i=void 0===o?[0,0,0,0]:o,u=n.color,l=void 0===u?"#808080":u,d=n.imgRepeat,f=t.wrap.clientHeight*a,p=t.wrap.clientWidth*a;t.setState({cw:p,ch:f},(function(){if(t.canvas.addEventListener("touchmove",s,!!c&&{passive:!1}),t.ctx=t.canvas.getContext("2d"),t.ctx.scale(a,a),e){var n=t.image,o=n.width,u=n.height;if("height"===d){var v=o*(f/a/u);t.ctx.drawImage(t.image,0,0,o,u,(p/a-v)/2,0,v,f/a)}else if("width"===d){var h=u*(p/a/o);t.ctx.drawImage(t.image,0,0,o,u,0,(f/a-h)/2,p/a,h)}else"repeat"===d?(t.ctx.fillStyle=t.ctx.createPattern(t.image,"repeat"),t.ctx.fillRect(0,0,p,f)):t.ctx.drawImage(t.image,0,0,o,u,0,0,p/a,f/a)}else t.ctx.fillStyle=l,t.ctx.fillRect(0,0,p,f);for(t.ptg=0,t.ctx.globalCompositeOperation="destination-out",t.ctx.strokeStyle="#000000",t.size=r||p/a/10,t.ctx.lineWidth=t.size,t.ctx.lineCap="round",t.round=i,t.cells=[],t.roundX=[t.round[3],p/a-t.round[1]],t.roundY=[t.round[0],f/a-t.round[2]],t.cellX=(t.roundX[1]-t.roundX[0])/10,t.cellY=(t.roundY[1]-t.roundY[0])/10,t.sum=t.roundLen=100;t.sum--;)t.cells.push(!1);setTimeout((function(){t.setState({visible:!0})}),500)}))},t.down=function(e){var n=t.wrap.getClientRects()[0],r=n.left,o=n.top;t.offsetLeft=r,t.offsetTop=o;var i=e.changedTouches;if(i){var a=i[0];t.preX=a.pageX-t.offsetLeft,t.preY=a.pageY-t.offsetTop,window.addEventListener("touchmove",t.move,!1),window.addEventListener("touchend",t.up,!1)}else t.preX=e.pageX-t.offsetLeft,t.preY=e.pageY-t.offsetTop,window.addEventListener("mousemove",t.move,!1),window.addEventListener("mouseup",t.up,!1);t.handleRound(t.preX,t.preY)},t.move=function(e){var n=t.props.mode,r=void 0===n?"move":n,o=e.changedTouches,i=t.preX,a=t.preY;if(t.ctx.beginPath(),t.ctx.moveTo(t.preX,t.preY),o){var s=o[0];t.preX=s.pageX-t.offsetLeft,t.preY=s.pageY-t.offsetTop}else t.preX=e.pageX-t.offsetLeft,t.preY=e.pageY-t.offsetTop;t.ctx.lineTo(t.preX,t.preY),t.ctx.stroke(),t.canvas.style.zIndex=((+t.canvas.style.zIndex||0)+1)%2+2+"",t.addRound(i,a,t.preX,t.preY),"move"===r&&t.checkRound(e)},t.up=function(e,n){var r=t.props.mode;e.changedTouches?(window.removeEventListener("touchmove",t.move,!1),window.removeEventListener("touchend",t.up,!1)):(window.removeEventListener("mousemove",t.move,!1),window.removeEventListener("mouseup",t.up,!1)),"end"===r&&!n&&t.checkRound(e)},t.addRound=function(e,n,r,o){var i=r-e,a=o-n;if(i>t.cellX||a>t.cellY){var s=void 0,c=void 0;if(0===a)s=t.cellX,c=0;else if(0===i)c=t.cellY,s=0;else{var u=Math.abs(a/i);u>t.cellY/t.cellX?(s=t.cellY/2/u,c=t.cellY/2):(c=t.cellX/2*u,s=t.cellX/2)}for(var l=i>0?[e,r]:[r,e],d=l[0],f=l[1],p=a>0?[n,o]:[o,o],v=p[0],h=p[1];!(d>f||v>h);)d+=s,v+=c,t.handleRound(d,v);t.handleRound(r,o)}else t.handleRound(r,o)},t.handleRound=function(e,n){for(var r=(e-t.round[3])/t.cellX,o=(n-t.round[0])/t.cellY,i=[Math.floor(r-t.size/2/t.cellX),Math.floor(r+t.size/2/t.cellX)],a=[Math.floor(o-t.size/2/t.cellY),Math.floor(o+t.size/2/t.cellY)],s=i[0];s<=i[1];s++)if(s>=0&&s<10)for(var c=a[0];c<=a[1];c++)if(c>=0&&c<10){var u=e-t.round[3]-(s+.5)*t.cellX,l=n-t.round[0]-(c+.5)*t.cellY,d=10*c+s;u*u+l*l=o&&(a&&t.ctx.clearRect(0,0,t.state.cw,t.state.ch),t.setState({isSuccess:!0}),t.up(e,!0),s&&s())},t}return Object(r.__extends)(t,e),t.prototype.componentDidMount=function(){var e=this,t=this.props.img;t?(this.image=document.createElement("img"),this.image.src=t,this.image.onload=function(){return e.init(!0)},this.image.onerror=function(){return e.init(!1)}):this.init(!1)},t.prototype.render=function(){var e=this,t=this.props,n=t.children,r=t.className,o=void 0===r?"":r;return i.a.createElement("div",{className:"___scratch "+o+" "+(this.state.isSuccess?"frozen":""),ref:function(t){return e.wrap=t}},i.a.createElement("div",{className:"___content "+(this.state.visible?"visible":"")},n),i.a.createElement("canvas",{ref:function(t){return e.canvas=t},width:this.state.cw,height:this.state.ch,onMouseDown:this.down,onTouchStart:this.down}))},t}(o.PureComponent);t.default=l},function(e,t,n){var r=n(4);"string"==typeof r&&(r=[[e.i,r,""]]);var o={insert:"head",singleton:!1};n(6)(r,o);r.locals&&(e.exports=r.locals)},function(e,t,n){(e.exports=n(5)(!1)).push([e.i,".___scratch {\n position: relative;\n display: inline-block;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n font-size: 0;\n}\n.___scratch.frozen {\n pointer-events: none;\n}\n.___scratch .___content {\n opacity: 0;\n}\n.___scratch .___content.visible {\n opacity: 1;\n}\n.___scratch canvas {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n height: 100%;\n width: 100%;\n}\n",""])},function(e,t,n){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=function(e,t){var n=e[1]||"",r=e[3];if(!r)return n;if(t&&"function"==typeof btoa){var o=(a=r,s=btoa(unescape(encodeURIComponent(JSON.stringify(a)))),c="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(s),"/*# ".concat(c," */")),i=r.sources.map((function(e){return"/*# sourceURL=".concat(r.sourceRoot).concat(e," */")}));return[n].concat(i).concat([o]).join("\n")}var a,s,c;return[n].join("\n")}(t,e);return t[2]?"@media ".concat(t[2],"{").concat(n,"}"):n})).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},o=0;oz.length&&z.push(e)}function I(e,t,n){return null==e?0:function e(t,n,r,l){var o=typeof t;"undefined"!==o&&"boolean"!==o||(t=null);var u=!1;if(null===t)u=!0;else switch(o){case"string":case"number":u=!0;break;case"object":switch(t.$$typeof){case a:case i:u=!0}}if(u)return r(l,t,""===n?"."+F(t,0):n),1;if(u=0,n=""===n?".":n+":",Array.isArray(t))for(var c=0;ct}return!1}(t,n,l,r)&&(n=null),r||null===l?function(e){return!!me.call(ve,e)||!me.call(he,e)&&(pe.test(e)?ve[e]=!0:(he[e]=!0,!1))}(t)&&(null===n?e.removeAttribute(t):e.setAttribute(t,""+n)):l.mustUseProperty?e[l.propertyName]=null===n?3!==l.type&&"":n:(t=l.attributeName,r=l.attributeNamespace,null===n?e.removeAttribute(t):(n=3===(l=l.type)||4===l&&!0===n?"":""+n,r?e.setAttributeNS(r,t,n):e.setAttribute(t,n))))}function xe(e){var t=e.type;return(e=e.nodeName)&&"input"===e.toLowerCase()&&("checkbox"===t||"radio"===t)}function Te(e){e._valueTracker||(e._valueTracker=function(e){var t=xe(e)?"checked":"value",n=Object.getOwnPropertyDescriptor(e.constructor.prototype,t),r=""+e[t];if(!e.hasOwnProperty(t)&&void 0!==n&&"function"==typeof n.get&&"function"==typeof n.set){var l=n.get,a=n.set;return Object.defineProperty(e,t,{configurable:!0,get:function(){return l.call(this)},set:function(e){r=""+e,a.call(this,e)}}),Object.defineProperty(e,t,{enumerable:n.enumerable}),{getValue:function(){return r},setValue:function(e){r=""+e},stopTracking:function(){e._valueTracker=null,delete e[t]}}}}(e))}function Se(e){if(!e)return!1;var t=e._valueTracker;if(!t)return!0;var n=t.getValue(),r="";return e&&(r=xe(e)?e.checked?"true":"false":e.value),(e=r)!==n&&(t.setValue(e),!0)}function Ce(e,t){var n=t.checked;return l({},t,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:null!=n?n:e._wrapperState.initialChecked})}function _e(e,t){var n=null==t.defaultValue?"":t.defaultValue,r=null!=t.checked?t.checked:t.defaultChecked;n=Ee(null!=t.value?t.value:n),e._wrapperState={initialChecked:r,initialValue:n,controlled:"checkbox"===t.type||"radio"===t.type?null!=t.checked:null!=t.value}}function Pe(e,t){null!=(t=t.checked)&&ke(e,"checked",t,!1)}function Ne(e,t){Pe(e,t);var n=Ee(t.value),r=t.type;if(null!=n)"number"===r?(0===n&&""===e.value||e.value!=n)&&(e.value=""+n):e.value!==""+n&&(e.value=""+n);else if("submit"===r||"reset"===r)return void e.removeAttribute("value");t.hasOwnProperty("value")?ze(e,t.type,n):t.hasOwnProperty("defaultValue")&&ze(e,t.type,Ee(t.defaultValue)),null==t.checked&&null!=t.defaultChecked&&(e.defaultChecked=!!t.defaultChecked)}function Oe(e,t,n){if(t.hasOwnProperty("value")||t.hasOwnProperty("defaultValue")){var r=t.type;if(!("submit"!==r&&"reset"!==r||void 0!==t.value&&null!==t.value))return;t=""+e._wrapperState.initialValue,n||t===e.value||(e.value=t),e.defaultValue=t}""!==(n=e.name)&&(e.name=""),e.defaultChecked=!e.defaultChecked,e.defaultChecked=!!e._wrapperState.initialChecked,""!==n&&(e.name=n)}function ze(e,t,n){"number"===t&&e.ownerDocument.activeElement===e||(null==n?e.defaultValue=""+e._wrapperState.initialValue:e.defaultValue!==""+n&&(e.defaultValue=""+n))}function Re(e,t){return e=l({children:void 0},t),(t=function(e){var t="";return r.Children.forEach(e,(function(e){null!=e&&(t+=e)})),t}(t.children))&&(e.children=t),e}function Me(e,t,n,r){if(e=e.options,t){t={};for(var l=0;l=t.length))throw Error(i(93));t=t[0]}n=t}null==n&&(n="")}e._wrapperState={initialValue:Ee(n)}}function Le(e,t){var n=Ee(t.value),r=Ee(t.defaultValue);null!=n&&((n=""+n)!==e.value&&(e.value=n),null==t.defaultValue&&e.defaultValue!==n&&(e.defaultValue=n)),null!=r&&(e.defaultValue=""+r)}function Ue(e){var t=e.textContent;t===e._wrapperState.initialValue&&""!==t&&null!==t&&(e.value=t)}"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach((function(e){var t=e.replace(be,we);ge[t]=new ye(t,1,!1,e,null,!1)})),"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach((function(e){var t=e.replace(be,we);ge[t]=new ye(t,1,!1,e,"http://www.w3.org/1999/xlink",!1)})),["xml:base","xml:lang","xml:space"].forEach((function(e){var t=e.replace(be,we);ge[t]=new ye(t,1,!1,e,"http://www.w3.org/XML/1998/namespace",!1)})),["tabIndex","crossOrigin"].forEach((function(e){ge[e]=new ye(e,1,!1,e.toLowerCase(),null,!1)})),ge.xlinkHref=new ye("xlinkHref",1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0),["src","href","action","formAction"].forEach((function(e){ge[e]=new ye(e,1,!1,e.toLowerCase(),null,!0)}));var De={html:"http://www.w3.org/1999/xhtml",mathml:"http://www.w3.org/1998/Math/MathML",svg:"http://www.w3.org/2000/svg"};function je(e){switch(e){case"svg":return"http://www.w3.org/2000/svg";case"math":return"http://www.w3.org/1998/Math/MathML";default:return"http://www.w3.org/1999/xhtml"}}function Ae(e,t){return null==e||"http://www.w3.org/1999/xhtml"===e?je(t):"http://www.w3.org/2000/svg"===e&&"foreignObject"===t?"http://www.w3.org/1999/xhtml":e}var We,Ve=function(e){return"undefined"!=typeof MSApp&&MSApp.execUnsafeLocalFunction?function(t,n,r,l){MSApp.execUnsafeLocalFunction((function(){return e(t,n)}))}:e}((function(e,t){if(e.namespaceURI!==De.svg||"innerHTML"in e)e.innerHTML=t;else{for((We=We||document.createElement("div")).innerHTML="",t=We.firstChild;e.firstChild;)e.removeChild(e.firstChild);for(;t.firstChild;)e.appendChild(t.firstChild)}}));function Be(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t}function He(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n["Webkit"+e]="webkit"+t,n["Moz"+e]="moz"+t,n}var $e={animationend:He("Animation","AnimationEnd"),animationiteration:He("Animation","AnimationIteration"),animationstart:He("Animation","AnimationStart"),transitionend:He("Transition","TransitionEnd")},Qe={},Ye={};function Xe(e){if(Qe[e])return Qe[e];if(!$e[e])return e;var t,n=$e[e];for(t in n)if(n.hasOwnProperty(t)&&t in Ye)return Qe[e]=n[t];return e}J&&(Ye=document.createElement("div").style,"AnimationEvent"in window||(delete $e.animationend.animation,delete $e.animationiteration.animation,delete $e.animationstart.animation),"TransitionEvent"in window||delete $e.transitionend.transition);var Ke=Xe("animationend"),qe=Xe("animationiteration"),Ge=Xe("animationstart"),Ze=Xe("transitionend"),Je="abort canplay canplaythrough durationchange emptied encrypted ended error loadeddata loadedmetadata loadstart pause play playing progress ratechange seeked seeking stalled suspend timeupdate volumechange waiting".split(" ");function et(e){var t=e,n=e;if(e.alternate)for(;t.return;)t=t.return;else{e=t;do{0!=(1026&(t=e).effectTag)&&(n=t.return),e=t.return}while(e)}return 3===t.tag?n:null}function tt(e){if(13===e.tag){var t=e.memoizedState;if(null===t&&(null!==(e=e.alternate)&&(t=e.memoizedState)),null!==t)return t.dehydrated}return null}function nt(e){if(et(e)!==e)throw Error(i(188))}function rt(e){if(!(e=function(e){var t=e.alternate;if(!t){if(null===(t=et(e)))throw Error(i(188));return t!==e?null:e}for(var n=e,r=t;;){var l=n.return;if(null===l)break;var a=l.alternate;if(null===a){if(null!==(r=l.return)){n=r;continue}break}if(l.child===a.child){for(a=l.child;a;){if(a===n)return nt(l),e;if(a===r)return nt(l),t;a=a.sibling}throw Error(i(188))}if(n.return!==r.return)n=l,r=a;else{for(var o=!1,u=l.child;u;){if(u===n){o=!0,n=l,r=a;break}if(u===r){o=!0,r=l,n=a;break}u=u.sibling}if(!o){for(u=a.child;u;){if(u===n){o=!0,n=a,r=l;break}if(u===r){o=!0,r=a,n=l;break}u=u.sibling}if(!o)throw Error(i(189))}}if(n.alternate!==r)throw Error(i(190))}if(3!==n.tag)throw Error(i(188));return n.stateNode.current===n?e:t}(e)))return null;for(var t=e;;){if(5===t.tag||6===t.tag)return t;if(t.child)t.child.return=t,t=t.child;else{if(t===e)break;for(;!t.sibling;){if(!t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}}return null}var lt,at,it,ot=!1,ut=[],ct=null,st=null,ft=null,dt=new Map,pt=new Map,mt=[],ht="mousedown mouseup touchcancel touchend touchstart auxclick dblclick pointercancel pointerdown pointerup dragend dragstart drop compositionend compositionstart keydown keypress keyup input textInput close cancel copy cut paste click change contextmenu reset submit".split(" "),vt="focus blur dragenter dragleave mouseover mouseout pointerover pointerout gotpointercapture lostpointercapture".split(" ");function yt(e,t,n,r){return{blockedOn:e,topLevelType:t,eventSystemFlags:32|n,nativeEvent:r}}function gt(e,t){switch(e){case"focus":case"blur":ct=null;break;case"dragenter":case"dragleave":st=null;break;case"mouseover":case"mouseout":ft=null;break;case"pointerover":case"pointerout":dt.delete(t.pointerId);break;case"gotpointercapture":case"lostpointercapture":pt.delete(t.pointerId)}}function bt(e,t,n,r,l){return null===e||e.nativeEvent!==l?(e=yt(t,n,r,l),null!==t&&(null!==(t=pr(t))&&at(t)),e):(e.eventSystemFlags|=r,e)}function wt(e){var t=dr(e.target);if(null!==t){var n=et(t);if(null!==n)if(13===(t=n.tag)){if(null!==(t=tt(n)))return e.blockedOn=t,void a.unstable_runWithPriority(e.priority,(function(){it(n)}))}else if(3===t&&n.stateNode.hydrate)return void(e.blockedOn=3===n.tag?n.stateNode.containerInfo:null)}e.blockedOn=null}function Et(e){if(null!==e.blockedOn)return!1;var t=zn(e.topLevelType,e.eventSystemFlags,e.nativeEvent);if(null!==t){var n=pr(t);return null!==n&&at(n),e.blockedOn=t,!1}return!0}function kt(e,t,n){Et(e)&&n.delete(t)}function xt(){for(ot=!1;0this.eventPool.length&&this.eventPool.push(e)}function Dt(e){e.eventPool=[],e.getPooled=Lt,e.release=Ut}l(Ft.prototype,{preventDefault:function(){this.defaultPrevented=!0;var e=this.nativeEvent;e&&(e.preventDefault?e.preventDefault():"unknown"!=typeof e.returnValue&&(e.returnValue=!1),this.isDefaultPrevented=Mt)},stopPropagation:function(){var e=this.nativeEvent;e&&(e.stopPropagation?e.stopPropagation():"unknown"!=typeof e.cancelBubble&&(e.cancelBubble=!0),this.isPropagationStopped=Mt)},persist:function(){this.isPersistent=Mt},isPersistent:It,destructor:function(){var e,t=this.constructor.Interface;for(e in t)this[e]=null;this.nativeEvent=this._targetInst=this.dispatchConfig=null,this.isPropagationStopped=this.isDefaultPrevented=It,this._dispatchInstances=this._dispatchListeners=null}}),Ft.Interface={type:null,target:null,currentTarget:function(){return null},eventPhase:null,bubbles:null,cancelable:null,timeStamp:function(e){return e.timeStamp||Date.now()},defaultPrevented:null,isTrusted:null},Ft.extend=function(e){function t(){}function n(){return r.apply(this,arguments)}var r=this;t.prototype=r.prototype;var a=new t;return l(a,n.prototype),n.prototype=a,n.prototype.constructor=n,n.Interface=l({},r.Interface,e),n.extend=r.extend,Dt(n),n},Dt(Ft);var jt=Ft.extend({animationName:null,elapsedTime:null,pseudoElement:null}),At=Ft.extend({clipboardData:function(e){return"clipboardData"in e?e.clipboardData:window.clipboardData}}),Wt=Ft.extend({view:null,detail:null}),Vt=Wt.extend({relatedTarget:null});function Bt(e){var t=e.keyCode;return"charCode"in e?0===(e=e.charCode)&&13===t&&(e=13):e=t,10===e&&(e=13),32<=e||13===e?e:0}var Ht={Esc:"Escape",Spacebar:" ",Left:"ArrowLeft",Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Del:"Delete",Win:"OS",Menu:"ContextMenu",Apps:"ContextMenu",Scroll:"ScrollLock",MozPrintableKey:"Unidentified"},$t={8:"Backspace",9:"Tab",12:"Clear",13:"Enter",16:"Shift",17:"Control",18:"Alt",19:"Pause",20:"CapsLock",27:"Escape",32:" ",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"ArrowLeft",38:"ArrowUp",39:"ArrowRight",40:"ArrowDown",45:"Insert",46:"Delete",112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",118:"F7",119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",144:"NumLock",145:"ScrollLock",224:"Meta"},Qt={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"};function Yt(e){var t=this.nativeEvent;return t.getModifierState?t.getModifierState(e):!!(e=Qt[e])&&!!t[e]}function Xt(){return Yt}for(var Kt=Wt.extend({key:function(e){if(e.key){var t=Ht[e.key]||e.key;if("Unidentified"!==t)return t}return"keypress"===e.type?13===(e=Bt(e))?"Enter":String.fromCharCode(e):"keydown"===e.type||"keyup"===e.type?$t[e.keyCode]||"Unidentified":""},location:null,ctrlKey:null,shiftKey:null,altKey:null,metaKey:null,repeat:null,locale:null,getModifierState:Xt,charCode:function(e){return"keypress"===e.type?Bt(e):0},keyCode:function(e){return"keydown"===e.type||"keyup"===e.type?e.keyCode:0},which:function(e){return"keypress"===e.type?Bt(e):"keydown"===e.type||"keyup"===e.type?e.keyCode:0}}),qt=0,Gt=0,Zt=!1,Jt=!1,en=Wt.extend({screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,ctrlKey:null,shiftKey:null,altKey:null,metaKey:null,getModifierState:Xt,button:null,buttons:null,relatedTarget:function(e){return e.relatedTarget||(e.fromElement===e.srcElement?e.toElement:e.fromElement)},movementX:function(e){if("movementX"in e)return e.movementX;var t=qt;return qt=e.screenX,Zt?"mousemove"===e.type?e.screenX-t:0:(Zt=!0,0)},movementY:function(e){if("movementY"in e)return e.movementY;var t=Gt;return Gt=e.screenY,Jt?"mousemove"===e.type?e.screenY-t:0:(Jt=!0,0)}}),tn=en.extend({pointerId:null,width:null,height:null,pressure:null,tangentialPressure:null,tiltX:null,tiltY:null,twist:null,pointerType:null,isPrimary:null}),nn=en.extend({dataTransfer:null}),rn=Wt.extend({touches:null,targetTouches:null,changedTouches:null,altKey:null,metaKey:null,ctrlKey:null,shiftKey:null,getModifierState:Xt}),ln=Ft.extend({propertyName:null,elapsedTime:null,pseudoElement:null}),an=en.extend({deltaX:function(e){return"deltaX"in e?e.deltaX:"wheelDeltaX"in e?-e.wheelDeltaX:0},deltaY:function(e){return"deltaY"in e?e.deltaY:"wheelDeltaY"in e?-e.wheelDeltaY:"wheelDelta"in e?-e.wheelDelta:0},deltaZ:null,deltaMode:null}),on=[["blur","blur",0],["cancel","cancel",0],["click","click",0],["close","close",0],["contextmenu","contextMenu",0],["copy","copy",0],["cut","cut",0],["auxclick","auxClick",0],["dblclick","doubleClick",0],["dragend","dragEnd",0],["dragstart","dragStart",0],["drop","drop",0],["focus","focus",0],["input","input",0],["invalid","invalid",0],["keydown","keyDown",0],["keypress","keyPress",0],["keyup","keyUp",0],["mousedown","mouseDown",0],["mouseup","mouseUp",0],["paste","paste",0],["pause","pause",0],["play","play",0],["pointercancel","pointerCancel",0],["pointerdown","pointerDown",0],["pointerup","pointerUp",0],["ratechange","rateChange",0],["reset","reset",0],["seeked","seeked",0],["submit","submit",0],["touchcancel","touchCancel",0],["touchend","touchEnd",0],["touchstart","touchStart",0],["volumechange","volumeChange",0],["drag","drag",1],["dragenter","dragEnter",1],["dragexit","dragExit",1],["dragleave","dragLeave",1],["dragover","dragOver",1],["mousemove","mouseMove",1],["mouseout","mouseOut",1],["mouseover","mouseOver",1],["pointermove","pointerMove",1],["pointerout","pointerOut",1],["pointerover","pointerOver",1],["scroll","scroll",1],["toggle","toggle",1],["touchmove","touchMove",1],["wheel","wheel",1],["abort","abort",2],[Ke,"animationEnd",2],[qe,"animationIteration",2],[Ge,"animationStart",2],["canplay","canPlay",2],["canplaythrough","canPlayThrough",2],["durationchange","durationChange",2],["emptied","emptied",2],["encrypted","encrypted",2],["ended","ended",2],["error","error",2],["gotpointercapture","gotPointerCapture",2],["load","load",2],["loadeddata","loadedData",2],["loadedmetadata","loadedMetadata",2],["loadstart","loadStart",2],["lostpointercapture","lostPointerCapture",2],["playing","playing",2],["progress","progress",2],["seeking","seeking",2],["stalled","stalled",2],["suspend","suspend",2],["timeupdate","timeUpdate",2],[Ze,"transitionEnd",2],["waiting","waiting",2]],un={},cn={},sn=0;sn=t)return{node:r,offset:t-e};e=n}e:{for(;r;){if(r.nextSibling){r=r.nextSibling;break e}r=r.parentNode}r=void 0}r=Qn(r)}}function Xn(){for(var e=window,t=$n();t instanceof e.HTMLIFrameElement;){try{var n="string"==typeof t.contentWindow.location.href}catch(e){n=!1}if(!n)break;t=$n((e=t.contentWindow).document)}return t}function Kn(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&("input"===t&&("text"===e.type||"search"===e.type||"tel"===e.type||"url"===e.type||"password"===e.type)||"textarea"===t||"true"===e.contentEditable)}var qn="$",Gn="/$",Zn="$?",Jn="$!",er=null,tr=null;function nr(e,t){switch(e){case"button":case"input":case"select":case"textarea":return!!t.autoFocus}return!1}function rr(e,t){return"textarea"===e||"option"===e||"noscript"===e||"string"==typeof t.children||"number"==typeof t.children||"object"==typeof t.dangerouslySetInnerHTML&&null!==t.dangerouslySetInnerHTML&&null!=t.dangerouslySetInnerHTML.__html}var lr="function"==typeof setTimeout?setTimeout:void 0,ar="function"==typeof clearTimeout?clearTimeout:void 0;function ir(e){for(;null!=e;e=e.nextSibling){var t=e.nodeType;if(1===t||3===t)break}return e}function or(e){e=e.previousSibling;for(var t=0;e;){if(8===e.nodeType){var n=e.data;if(n===qn||n===Jn||n===Zn){if(0===t)return e;t--}else n===Gn&&t++}e=e.previousSibling}return null}var ur=Math.random().toString(36).slice(2),cr="__reactInternalInstance$"+ur,sr="__reactEventHandlers$"+ur,fr="__reactContainere$"+ur;function dr(e){var t=e[cr];if(t)return t;for(var n=e.parentNode;n;){if(t=n[fr]||n[cr]){if(n=t.alternate,null!==t.child||null!==n&&null!==n.child)for(e=or(e);null!==e;){if(n=e[cr])return n;e=or(e)}return t}n=(e=n).parentNode}return null}function pr(e){return!(e=e[cr]||e[fr])||5!==e.tag&&6!==e.tag&&13!==e.tag&&3!==e.tag?null:e}function mr(e){if(5===e.tag||6===e.tag)return e.stateNode;throw Error(i(33))}function hr(e){return e[sr]||null}var vr=null,yr=null,gr=null;function br(){if(gr)return gr;var e,t,n=yr,r=n.length,l="value"in vr?vr.value:vr.textContent,a=l.length;for(e=0;e=Tr),_r=String.fromCharCode(32),Pr={beforeInput:{phasedRegistrationNames:{bubbled:"onBeforeInput",captured:"onBeforeInputCapture"},dependencies:["compositionend","keypress","textInput","paste"]},compositionEnd:{phasedRegistrationNames:{bubbled:"onCompositionEnd",captured:"onCompositionEndCapture"},dependencies:"blur compositionend keydown keypress keyup mousedown".split(" ")},compositionStart:{phasedRegistrationNames:{bubbled:"onCompositionStart",captured:"onCompositionStartCapture"},dependencies:"blur compositionstart keydown keypress keyup mousedown".split(" ")},compositionUpdate:{phasedRegistrationNames:{bubbled:"onCompositionUpdate",captured:"onCompositionUpdateCapture"},dependencies:"blur compositionupdate keydown keypress keyup mousedown".split(" ")}},Nr=!1;function Or(e,t){switch(e){case"keyup":return-1!==kr.indexOf(t.keyCode);case"keydown":return 229!==t.keyCode;case"keypress":case"mousedown":case"blur":return!0;default:return!1}}function zr(e){return"object"==typeof(e=e.detail)&&"data"in e?e.data:null}var Rr=!1;var Mr={eventTypes:Pr,extractEvents:function(e,t,n,r){var l;if(xr)e:{switch(e){case"compositionstart":var a=Pr.compositionStart;break e;case"compositionend":a=Pr.compositionEnd;break e;case"compositionupdate":a=Pr.compositionUpdate;break e}a=void 0}else Rr?Or(e,n)&&(a=Pr.compositionEnd):"keydown"===e&&229===n.keyCode&&(a=Pr.compositionStart);return a?(Cr&&"ko"!==n.locale&&(Rr||a!==Pr.compositionStart?a===Pr.compositionEnd&&Rr&&(l=br()):(yr="value"in(vr=r)?vr.value:vr.textContent,Rr=!0)),a=wr.getPooled(a,t,n,r),l?a.data=l:null!==(l=zr(n))&&(a.data=l),Rt(a),l=a):l=null,(e=Sr?function(e,t){switch(e){case"compositionend":return zr(t);case"keypress":return 32!==t.which?null:(Nr=!0,_r);case"textInput":return(e=t.data)===_r&&Nr?null:e;default:return null}}(e,n):function(e,t){if(Rr)return"compositionend"===e||!xr&&Or(e,t)?(e=br(),gr=yr=vr=null,Rr=!1,e):null;switch(e){case"paste":return null;case"keypress":if(!(t.ctrlKey||t.altKey||t.metaKey)||t.ctrlKey&&t.altKey){if(t.char&&1=document.documentMode,ll={select:{phasedRegistrationNames:{bubbled:"onSelect",captured:"onSelectCapture"},dependencies:"blur contextmenu dragend focus keydown keyup mousedown mouseup selectionchange".split(" ")}},al=null,il=null,ol=null,ul=!1;function cl(e,t){var n=t.window===t?t.document:9===t.nodeType?t:t.ownerDocument;return ul||null==al||al!==$n(n)?null:("selectionStart"in(n=al)&&Kn(n)?n={start:n.selectionStart,end:n.selectionEnd}:n={anchorNode:(n=(n.ownerDocument&&n.ownerDocument.defaultView||window).getSelection()).anchorNode,anchorOffset:n.anchorOffset,focusNode:n.focusNode,focusOffset:n.focusOffset},ol&&nl(ol,n)?null:(ol=n,(e=Ft.getPooled(ll.select,il,e,t)).type="select",e.target=al,Rt(e),e))}var sl={eventTypes:ll,extractEvents:function(e,t,n,r){var l,a=r.window===r?r.document:9===r.nodeType?r:r.ownerDocument;if(!(l=!a)){e:{a=In(a),l=m.onSelect;for(var i=0;idl||(e.current=fl[dl],fl[dl]=null,dl--)}function ml(e,t){dl++,fl[dl]=e.current,e.current=t}var hl={},vl={current:hl},yl={current:!1},gl=hl;function bl(e,t){var n=e.type.contextTypes;if(!n)return hl;var r=e.stateNode;if(r&&r.__reactInternalMemoizedUnmaskedChildContext===t)return r.__reactInternalMemoizedMaskedChildContext;var l,a={};for(l in n)a[l]=t[l];return r&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=t,e.__reactInternalMemoizedMaskedChildContext=a),a}function wl(e){return null!=(e=e.childContextTypes)}function El(e){pl(yl),pl(vl)}function kl(e){pl(yl),pl(vl)}function xl(e,t,n){if(vl.current!==hl)throw Error(i(168));ml(vl,t),ml(yl,n)}function Tl(e,t,n){var r=e.stateNode;if(e=t.childContextTypes,"function"!=typeof r.getChildContext)return n;for(var a in r=r.getChildContext())if(!(a in e))throw Error(i(108,G(t)||"Unknown",a));return l({},n,{},r)}function Sl(e){var t=e.stateNode;return t=t&&t.__reactInternalMemoizedMergedChildContext||hl,gl=vl.current,ml(vl,t),ml(yl,yl.current),!0}function Cl(e,t,n){var r=e.stateNode;if(!r)throw Error(i(169));n?(t=Tl(e,t,gl),r.__reactInternalMemoizedMergedChildContext=t,pl(yl),pl(vl),ml(vl,t)):pl(yl),ml(yl,n)}var _l=a.unstable_runWithPriority,Pl=a.unstable_scheduleCallback,Nl=a.unstable_cancelCallback,Ol=a.unstable_shouldYield,zl=a.unstable_requestPaint,Rl=a.unstable_now,Ml=a.unstable_getCurrentPriorityLevel,Il=a.unstable_ImmediatePriority,Fl=a.unstable_UserBlockingPriority,Ll=a.unstable_NormalPriority,Ul=a.unstable_LowPriority,Dl=a.unstable_IdlePriority,jl={},Al=void 0!==zl?zl:function(){},Wl=null,Vl=null,Bl=!1,Hl=Rl(),$l=1e4>Hl?Rl:function(){return Rl()-Hl};function Ql(){switch(Ml()){case Il:return 99;case Fl:return 98;case Ll:return 97;case Ul:return 96;case Dl:return 95;default:throw Error(i(332))}}function Yl(e){switch(e){case 99:return Il;case 98:return Fl;case 97:return Ll;case 96:return Ul;case 95:return Dl;default:throw Error(i(332))}}function Xl(e,t){return e=Yl(e),_l(e,t)}function Kl(e,t,n){return e=Yl(e),Pl(e,t,n)}function ql(e){return null===Wl?(Wl=[e],Vl=Pl(Il,Zl)):Wl.push(e),jl}function Gl(){if(null!==Vl){var e=Vl;Vl=null,Nl(e)}Zl()}function Zl(){if(!Bl&&null!==Wl){Bl=!0;var e=0;try{var t=Wl;Xl(99,(function(){for(;e=t&&(Hi=!0),e.firstContext=null)}function fa(e,t){if(aa!==e&&!1!==t&&0!==t)if("number"==typeof t&&1073741823!==t||(aa=e,t=1073741823),t={context:e,observedBits:t,next:null},null===la){if(null===ra)throw Error(i(308));la=t,ra.dependencies={expirationTime:0,firstContext:t,responders:null}}else la=la.next=t;return e._currentValue}var da=!1;function pa(e){return{baseState:e,firstUpdate:null,lastUpdate:null,firstCapturedUpdate:null,lastCapturedUpdate:null,firstEffect:null,lastEffect:null,firstCapturedEffect:null,lastCapturedEffect:null}}function ma(e){return{baseState:e.baseState,firstUpdate:e.firstUpdate,lastUpdate:e.lastUpdate,firstCapturedUpdate:null,lastCapturedUpdate:null,firstEffect:null,lastEffect:null,firstCapturedEffect:null,lastCapturedEffect:null}}function ha(e,t){return{expirationTime:e,suspenseConfig:t,tag:0,payload:null,callback:null,next:null,nextEffect:null}}function va(e,t){null===e.lastUpdate?e.firstUpdate=e.lastUpdate=t:(e.lastUpdate.next=t,e.lastUpdate=t)}function ya(e,t){var n=e.alternate;if(null===n){var r=e.updateQueue,l=null;null===r&&(r=e.updateQueue=pa(e.memoizedState))}else r=e.updateQueue,l=n.updateQueue,null===r?null===l?(r=e.updateQueue=pa(e.memoizedState),l=n.updateQueue=pa(n.memoizedState)):r=e.updateQueue=ma(l):null===l&&(l=n.updateQueue=ma(r));null===l||r===l?va(r,t):null===r.lastUpdate||null===l.lastUpdate?(va(r,t),va(l,t)):(va(r,t),l.lastUpdate=t)}function ga(e,t){var n=e.updateQueue;null===(n=null===n?e.updateQueue=pa(e.memoizedState):ba(e,n)).lastCapturedUpdate?n.firstCapturedUpdate=n.lastCapturedUpdate=t:(n.lastCapturedUpdate.next=t,n.lastCapturedUpdate=t)}function ba(e,t){var n=e.alternate;return null!==n&&t===n.updateQueue&&(t=e.updateQueue=ma(t)),t}function wa(e,t,n,r,a,i){switch(n.tag){case 1:return"function"==typeof(e=n.payload)?e.call(i,r,a):e;case 3:e.effectTag=-4097&e.effectTag|64;case 0:if(null==(a="function"==typeof(e=n.payload)?e.call(i,r,a):e))break;return l({},r,a);case 2:da=!0}return r}function Ea(e,t,n,r,l){da=!1;for(var a=(t=ba(e,t)).baseState,i=null,o=0,u=t.firstUpdate,c=a;null!==u;){var s=u.expirationTime;sh?(v=f,f=null):v=f.sibling;var y=p(l,f,o[h],u);if(null===y){null===f&&(f=v);break}e&&f&&null===y.alternate&&t(l,f),i=a(y,i,h),null===s?c=y:s.sibling=y,s=y,f=v}if(h===o.length)return n(l,f),c;if(null===f){for(;hv?(y=h,h=null):y=h.sibling;var b=p(l,h,g.value,c);if(null===b){null===h&&(h=y);break}e&&h&&null===b.alternate&&t(l,h),o=a(b,o,v),null===f?s=b:f.sibling=b,f=b,h=y}if(g.done)return n(l,h),s;if(null===h){for(;!g.done;v++,g=u.next())null!==(g=d(l,g.value,c))&&(o=a(g,o,v),null===f?s=g:f.sibling=g,f=g);return s}for(h=r(l,h);!g.done;v++,g=u.next())null!==(g=m(h,l,v,g.value,c))&&(e&&null!==g.alternate&&h.delete(null===g.key?v:g.key),o=a(g,o,v),null===f?s=g:f.sibling=g,f=g);return e&&h.forEach((function(e){return t(l,e)})),s}return function(e,r,a,u){var c="object"==typeof a&&null!==a&&a.type===D&&null===a.key;c&&(a=a.props.children);var s="object"==typeof a&&null!==a;if(s)switch(a.$$typeof){case L:e:{for(s=a.key,c=r;null!==c;){if(c.key===s){if(7===c.tag?a.type===D:c.elementType===a.type){n(e,c.sibling),(r=l(c,a.type===D?a.props.children:a.props)).ref=Ma(e,c,a),r.return=e,e=r;break e}n(e,c);break}t(e,c),c=c.sibling}a.type===D?((r=qu(a.props.children,e.mode,u,a.key)).return=e,e=r):((u=Ku(a.type,a.key,a.props,null,e.mode,u)).ref=Ma(e,r,a),u.return=e,e=u)}return o(e);case U:e:{for(c=a.key;null!==r;){if(r.key===c){if(4===r.tag&&r.stateNode.containerInfo===a.containerInfo&&r.stateNode.implementation===a.implementation){n(e,r.sibling),(r=l(r,a.children||[])).return=e,e=r;break e}n(e,r);break}t(e,r),r=r.sibling}(r=Zu(a,e.mode,u)).return=e,e=r}return o(e)}if("string"==typeof a||"number"==typeof a)return a=""+a,null!==r&&6===r.tag?(n(e,r.sibling),(r=l(r,a)).return=e,e=r):(n(e,r),(r=Gu(a,e.mode,u)).return=e,e=r),o(e);if(Ra(a))return h(e,r,a,u);if(q(a))return v(e,r,a,u);if(s&&Ia(e,a),void 0===a&&!c)switch(e.tag){case 1:case 0:throw e=e.type,Error(i(152,e.displayName||e.name||"Component"))}return n(e,r)}}var La=Fa(!0),Ua=Fa(!1),Da={},ja={current:Da},Aa={current:Da},Wa={current:Da};function Va(e){if(e===Da)throw Error(i(174));return e}function Ba(e,t){ml(Wa,t),ml(Aa,e),ml(ja,Da);var n=t.nodeType;switch(n){case 9:case 11:t=(t=t.documentElement)?t.namespaceURI:Ae(null,"");break;default:t=Ae(t=(n=8===n?t.parentNode:t).namespaceURI||null,n=n.tagName)}pl(ja),ml(ja,t)}function Ha(e){pl(ja),pl(Aa),pl(Wa)}function $a(e){Va(Wa.current);var t=Va(ja.current),n=Ae(t,e.type);t!==n&&(ml(Aa,e),ml(ja,n))}function Qa(e){Aa.current===e&&(pl(ja),pl(Aa))}var Ya={current:0};function Xa(e){for(var t=e;null!==t;){if(13===t.tag){var n=t.memoizedState;if(null!==n&&(null===(n=n.dehydrated)||n.data===Zn||n.data===Jn))return t}else if(19===t.tag&&void 0!==t.memoizedProps.revealOrder){if(0!=(64&t.effectTag))return t}else if(null!==t.child){t.child.return=t,t=t.child;continue}if(t===e)break;for(;null===t.sibling;){if(null===t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}return null}function Ka(e,t){return{responder:e,props:t}}var qa=M.ReactCurrentDispatcher,Ga=M.ReactCurrentBatchConfig,Za=0,Ja=null,ei=null,ti=null,ni=null,ri=null,li=null,ai=0,ii=null,oi=0,ui=!1,ci=null,si=0;function fi(){throw Error(i(321))}function di(e,t){if(null===t)return!1;for(var n=0;nai&&Pu(ai=f)):(_u(f,c.suspenseConfig),a=c.eagerReducer===e?c.eagerState:e(a,c.action)),o=c,c=c.next}while(null!==c&&c!==r);s||(u=o,l=a),el(a,t.memoizedState)||(Hi=!0),t.memoizedState=a,t.baseUpdate=u,t.baseState=l,n.lastRenderedState=a}return[t.memoizedState,n.dispatch]}function bi(e){var t=hi();return"function"==typeof e&&(e=e()),t.memoizedState=t.baseState=e,e=(e=t.queue={last:null,dispatch:null,lastRenderedReducer:yi,lastRenderedState:e}).dispatch=Oi.bind(null,Ja,e),[t.memoizedState,e]}function wi(e){return gi(yi)}function Ei(e,t,n,r){return e={tag:e,create:t,destroy:n,deps:r,next:null},null===ii?(ii={lastEffect:null}).lastEffect=e.next=e:null===(t=ii.lastEffect)?ii.lastEffect=e.next=e:(n=t.next,t.next=e,e.next=n,ii.lastEffect=e),e}function ki(e,t,n,r){var l=hi();oi|=e,l.memoizedState=Ei(t,n,void 0,void 0===r?null:r)}function xi(e,t,n,r){var l=vi();r=void 0===r?null:r;var a=void 0;if(null!==ei){var i=ei.memoizedState;if(a=i.destroy,null!==r&&di(r,i.deps))return void Ei(0,n,a,r)}oi|=e,l.memoizedState=Ei(t,n,a,r)}function Ti(e,t){return ki(516,192,e,t)}function Si(e,t){return xi(516,192,e,t)}function Ci(e,t){return"function"==typeof t?(e=e(),t(e),function(){t(null)}):null!=t?(e=e(),t.current=e,function(){t.current=null}):void 0}function _i(){}function Pi(e,t){return hi().memoizedState=[e,void 0===t?null:t],e}function Ni(e,t){var n=vi();t=void 0===t?null:t;var r=n.memoizedState;return null!==r&&null!==t&&di(t,r[1])?r[0]:(n.memoizedState=[e,t],e)}function Oi(e,t,n){if(!(25>si))throw Error(i(301));var r=e.alternate;if(e===Ja||null!==r&&r===Ja)if(ui=!0,e={expirationTime:Za,suspenseConfig:null,action:n,eagerReducer:null,eagerState:null,next:null},null===ci&&(ci=new Map),void 0===(n=ci.get(t)))ci.set(t,e);else{for(t=n;null!==t.next;)t=t.next;t.next=e}else{var l=mu(),a=Ta.suspense;a={expirationTime:l=hu(l,e,a),suspenseConfig:a,action:n,eagerReducer:null,eagerState:null,next:null};var o=t.last;if(null===o)a.next=a;else{var u=o.next;null!==u&&(a.next=u),o.next=a}if(t.last=a,0===e.expirationTime&&(null===r||0===r.expirationTime)&&null!==(r=t.lastRenderedReducer))try{var c=t.lastRenderedState,s=r(c,n);if(a.eagerReducer=r,a.eagerState=s,el(s,c))return}catch(e){}vu(e,l)}}var zi={readContext:fa,useCallback:fi,useContext:fi,useEffect:fi,useImperativeHandle:fi,useLayoutEffect:fi,useMemo:fi,useReducer:fi,useRef:fi,useState:fi,useDebugValue:fi,useResponder:fi,useDeferredValue:fi,useTransition:fi},Ri={readContext:fa,useCallback:Pi,useContext:fa,useEffect:Ti,useImperativeHandle:function(e,t,n){return n=null!=n?n.concat([e]):null,ki(4,36,Ci.bind(null,t,e),n)},useLayoutEffect:function(e,t){return ki(4,36,e,t)},useMemo:function(e,t){var n=hi();return t=void 0===t?null:t,e=e(),n.memoizedState=[e,t],e},useReducer:function(e,t,n){var r=hi();return t=void 0!==n?n(t):t,r.memoizedState=r.baseState=t,e=(e=r.queue={last:null,dispatch:null,lastRenderedReducer:e,lastRenderedState:t}).dispatch=Oi.bind(null,Ja,e),[r.memoizedState,e]},useRef:function(e){return e={current:e},hi().memoizedState=e},useState:bi,useDebugValue:_i,useResponder:Ka,useDeferredValue:function(e,t){var n=bi(e),r=n[0],l=n[1];return Ti((function(){a.unstable_next((function(){var n=Ga.suspense;Ga.suspense=void 0===t?null:t;try{l(e)}finally{Ga.suspense=n}}))}),[e,t]),r},useTransition:function(e){var t=bi(!1),n=t[0],r=t[1];return[Pi((function(t){r(!0),a.unstable_next((function(){var n=Ga.suspense;Ga.suspense=void 0===e?null:e;try{r(!1),t()}finally{Ga.suspense=n}}))}),[e,n]),n]}},Mi={readContext:fa,useCallback:Ni,useContext:fa,useEffect:Si,useImperativeHandle:function(e,t,n){return n=null!=n?n.concat([e]):null,xi(4,36,Ci.bind(null,t,e),n)},useLayoutEffect:function(e,t){return xi(4,36,e,t)},useMemo:function(e,t){var n=vi();t=void 0===t?null:t;var r=n.memoizedState;return null!==r&&null!==t&&di(t,r[1])?r[0]:(e=e(),n.memoizedState=[e,t],e)},useReducer:gi,useRef:function(){return vi().memoizedState},useState:wi,useDebugValue:_i,useResponder:Ka,useDeferredValue:function(e,t){var n=wi(),r=n[0],l=n[1];return Si((function(){a.unstable_next((function(){var n=Ga.suspense;Ga.suspense=void 0===t?null:t;try{l(e)}finally{Ga.suspense=n}}))}),[e,t]),r},useTransition:function(e){var t=wi(),n=t[0],r=t[1];return[Ni((function(t){r(!0),a.unstable_next((function(){var n=Ga.suspense;Ga.suspense=void 0===e?null:e;try{r(!1),t()}finally{Ga.suspense=n}}))}),[e,n]),n]}},Ii=null,Fi=null,Li=!1;function Ui(e,t){var n=Qu(5,null,null,0);n.elementType="DELETED",n.type="DELETED",n.stateNode=t,n.return=e,n.effectTag=8,null!==e.lastEffect?(e.lastEffect.nextEffect=n,e.lastEffect=n):e.firstEffect=e.lastEffect=n}function Di(e,t){switch(e.tag){case 5:var n=e.type;return null!==(t=1!==t.nodeType||n.toLowerCase()!==t.nodeName.toLowerCase()?null:t)&&(e.stateNode=t,!0);case 6:return null!==(t=""===e.pendingProps||3!==t.nodeType?null:t)&&(e.stateNode=t,!0);case 13:default:return!1}}function ji(e){if(Li){var t=Fi;if(t){var n=t;if(!Di(e,t)){if(!(t=ir(n.nextSibling))||!Di(e,t))return e.effectTag=-1025&e.effectTag|2,Li=!1,void(Ii=e);Ui(Ii,n)}Ii=e,Fi=ir(t.firstChild)}else e.effectTag=-1025&e.effectTag|2,Li=!1,Ii=e}}function Ai(e){for(e=e.return;null!==e&&5!==e.tag&&3!==e.tag&&13!==e.tag;)e=e.return;Ii=e}function Wi(e){if(e!==Ii)return!1;if(!Li)return Ai(e),Li=!0,!1;var t=e.type;if(5!==e.tag||"head"!==t&&"body"!==t&&!rr(t,e.memoizedProps))for(t=Fi;t;)Ui(e,t),t=ir(t.nextSibling);if(Ai(e),13===e.tag){if(!(e=null!==(e=e.memoizedState)?e.dehydrated:null))throw Error(i(317));e:{for(e=e.nextSibling,t=0;e;){if(8===e.nodeType){var n=e.data;if(n===Gn){if(0===t){Fi=ir(e.nextSibling);break e}t--}else n!==qn&&n!==Jn&&n!==Zn||t++}e=e.nextSibling}Fi=null}}else Fi=Ii?ir(e.stateNode.nextSibling):null;return!0}function Vi(){Fi=Ii=null,Li=!1}var Bi=M.ReactCurrentOwner,Hi=!1;function $i(e,t,n,r){t.child=null===e?Ua(t,null,n,r):La(t,e.child,n,r)}function Qi(e,t,n,r,l){n=n.render;var a=t.ref;return sa(t,l),r=pi(e,t,n,r,a,l),null===e||Hi?(t.effectTag|=1,$i(e,t,r,l),t.child):(t.updateQueue=e.updateQueue,t.effectTag&=-517,e.expirationTime<=l&&(e.expirationTime=0),co(e,t,l))}function Yi(e,t,n,r,l,a){if(null===e){var i=n.type;return"function"!=typeof i||Yu(i)||void 0!==i.defaultProps||null!==n.compare||void 0!==n.defaultProps?((e=Ku(n.type,null,r,null,t.mode,a)).ref=t.ref,e.return=t,t.child=e):(t.tag=15,t.type=i,Xi(e,t,i,r,l,a))}return i=e.child,lt)&&su.set(e,t))}}function yu(e,t){e.expirationTime(e=e.nextKnownPendingLevel)?t:e:t}function bu(e){if(0!==e.lastExpiredTime)e.callbackExpirationTime=1073741823,e.callbackPriority=99,e.callbackNode=ql(Eu.bind(null,e));else{var t=gu(e),n=e.callbackNode;if(0===t)null!==n&&(e.callbackNode=null,e.callbackExpirationTime=0,e.callbackPriority=90);else{var r=mu();if(1073741823===t?r=99:1===t||2===t?r=95:r=0>=(r=10*(1073741821-t)-10*(1073741821-r))?99:250>=r?98:5250>=r?97:95,null!==n){var l=e.callbackPriority;if(e.callbackExpirationTime===t&&l>=r)return;n!==jl&&Nl(n)}e.callbackExpirationTime=t,e.callbackPriority=r,t=1073741823===t?ql(Eu.bind(null,e)):Kl(r,wu.bind(null,e),{timeout:10*(1073741821-t)-$l()}),e.callbackNode=t}}}function wu(e,t){if(pu=0,t)return rc(e,t=mu()),bu(e),null;var n=gu(e);if(0!==n){if(t=e.callbackNode,(Ho&(Lo|Uo))!==Io)throw Error(i(327));if(Uu(),e===$o&&n===Yo||Tu(e,n),null!==Qo){var r=Ho;Ho|=Lo;for(var l=Cu();;)try{Ou();break}catch(t){Su(e,t)}if(ia(),Ho=r,Ro.current=l,Xo===jo)throw t=Ko,Tu(e,n),tc(e,n),bu(e),t;if(null===Qo)switch(l=e.finishedWork=e.current.alternate,e.finishedExpirationTime=n,r=Xo,$o=null,r){case Do:case jo:throw Error(i(345));case Ao:rc(e,2=n){e.lastPingedTime=n,Tu(e,n);break}}if(0!==(a=gu(e))&&a!==n)break;if(0!==r&&r!==n){e.lastPingedTime=r;break}e.timeoutHandle=lr(Iu.bind(null,e),l);break}Iu(e);break;case Vo:if(tc(e,n),n===(r=e.lastSuspendedTime)&&(e.nextKnownPendingLevel=Mu(l)),eu&&(0===(l=e.lastPingedTime)||l>=n)){e.lastPingedTime=n,Tu(e,n);break}if(0!==(l=gu(e))&&l!==n)break;if(0!==r&&r!==n){e.lastPingedTime=r;break}if(1073741823!==Go?r=10*(1073741821-Go)-$l():1073741823===qo?r=0:(r=10*(1073741821-qo)-5e3,0>(r=(l=$l())-r)&&(r=0),(n=10*(1073741821-n)-l)<(r=(120>r?120:480>r?480:1080>r?1080:1920>r?1920:3e3>r?3e3:4320>r?4320:1960*zo(r/1960))-r)&&(r=n)),10=(r=0|o.busyMinDurationMs)?r=0:(l=0|o.busyDelayMs,r=(a=$l()-(10*(1073741821-a)-(0|o.timeoutMs||5e3)))<=l?0:l+r-a),10 component higher in the tree to provide a loading indicator or placeholder to display."+Z(l))}Xo!==Bo&&(Xo=Ao),a=mo(a,l),u=r;do{switch(u.tag){case 3:i=a,u.effectTag|=4096,u.expirationTime=t,ga(u,Po(u,i,t));break e;case 1:i=a;var y=u.type,g=u.stateNode;if(0==(64&u.effectTag)&&("function"==typeof y.getDerivedStateFromError||null!==g&&"function"==typeof g.componentDidCatch&&(null===iu||!iu.has(g)))){u.effectTag|=4096,u.expirationTime=t,ga(u,No(u,i,t));break e}}u=u.return}while(null!==u)}Qo=Ru(Qo)}catch(e){t=e;continue}break}}function Cu(){var e=Ro.current;return Ro.current=zi,null===e?zi:e}function _u(e,t){eJo&&(Jo=e)}function Nu(){for(;null!==Qo;)Qo=zu(Qo)}function Ou(){for(;null!==Qo&&!Ol();)Qo=zu(Qo)}function zu(e){var t=Oo(e.alternate,e,Yo);return e.memoizedProps=e.pendingProps,null===t&&(t=Ru(e)),Mo.current=null,t}function Ru(e){Qo=e;do{var t=Qo.alternate;if(e=Qo.return,0==(2048&Qo.effectTag)){e:{var n=t,r=Yo,a=(t=Qo).pendingProps;switch(t.tag){case 2:case 16:break;case 15:case 0:break;case 1:wl(t.type)&&El();break;case 3:Ha(),kl(),(a=t.stateNode).pendingContext&&(a.context=a.pendingContext,a.pendingContext=null),(null===n||null===n.child)&&Wi(t)&&so(t),to(t);break;case 5:Qa(t),r=Va(Wa.current);var o=t.type;if(null!==n&&null!=t.stateNode)no(n,t,o,a,r),n.ref!==t.ref&&(t.effectTag|=128);else if(a){var u=Va(ja.current);if(Wi(t)){var c=(a=t).stateNode;n=a.type;var s=a.memoizedProps,f=r;switch(c[cr]=a,c[sr]=s,o=void 0,r=c,n){case"iframe":case"object":case"embed":Sn("load",r);break;case"video":case"audio":for(c=0;c<\/script>",c=s.removeChild(s.firstChild)):"string"==typeof s.is?c=c.createElement(f,{is:s.is}):(c=c.createElement(f),"select"===f&&(f=c,s.multiple?f.multiple=!0:s.size&&(f.size=s.size))):c=c.createElementNS(u,f),(s=c)[cr]=n,s[sr]=a,eo(s,t,!1,!1),t.stateNode=s;var d=r,m=Vn(f=o,n=a);switch(f){case"iframe":case"object":case"embed":Sn("load",s),r=n;break;case"video":case"audio":for(r=0;ra.tailExpiration&&1o&&(o=n),(s=r.childExpirationTime)>o&&(o=s),r=r.sibling;a.childExpirationTime=o}if(null!==t)return t;null!==e&&0==(2048&e.effectTag)&&(null===e.firstEffect&&(e.firstEffect=Qo.firstEffect),null!==Qo.lastEffect&&(null!==e.lastEffect&&(e.lastEffect.nextEffect=Qo.firstEffect),e.lastEffect=Qo.lastEffect),1(e=e.childExpirationTime)?t:e}function Iu(e){var t=Ql();return Xl(99,Fu.bind(null,e,t)),null}function Fu(e,t){do{Uu()}while(null!==uu);if((Ho&(Lo|Uo))!==Io)throw Error(i(327));var n=e.finishedWork,r=e.finishedExpirationTime;if(null===n)return null;if(e.finishedWork=null,e.finishedExpirationTime=0,n===e.current)throw Error(i(177));e.callbackNode=null,e.callbackExpirationTime=0,e.callbackPriority=90,e.nextKnownPendingLevel=0;var l=Mu(n);if(e.firstPendingTime=l,r<=e.lastSuspendedTime?e.firstSuspendedTime=e.lastSuspendedTime=e.nextKnownPendingLevel=0:r<=e.firstSuspendedTime&&(e.firstSuspendedTime=r-1),r<=e.lastPingedTime&&(e.lastPingedTime=0),r<=e.lastExpiredTime&&(e.lastExpiredTime=0),e===$o&&(Qo=$o=null,Yo=0),1u&&(s=u,u=o,o=s),s=Yn(w,o),f=Yn(w,u),s&&f&&(1!==k.rangeCount||k.anchorNode!==s.node||k.anchorOffset!==s.offset||k.focusNode!==f.node||k.focusOffset!==f.offset)&&((E=E.createRange()).setStart(s.node,s.offset),k.removeAllRanges(),o>u?(k.addRange(E),k.extend(f.node,f.offset)):(E.setEnd(f.node,f.offset),k.addRange(E))))),E=[];for(k=w;k=k.parentNode;)1===k.nodeType&&E.push({element:k,left:k.scrollLeft,top:k.scrollTop});for("function"==typeof w.focus&&w.focus(),w=0;w=n?ao(e,t,n):(ml(Ya,1&Ya.current),null!==(t=co(e,t,n))?t.sibling:null);ml(Ya,1&Ya.current);break;case 19:if(r=t.childExpirationTime>=n,0!=(64&e.effectTag)){if(r)return uo(e,t,n);t.effectTag|=64}if(null!==(l=t.memoizedState)&&(l.rendering=null,l.tail=null),ml(Ya,Ya.current),!r)return null}return co(e,t,n)}Hi=!1}}else Hi=!1;switch(t.expirationTime=0,t.tag){case 2:if(r=t.type,null!==e&&(e.alternate=null,t.alternate=null,t.effectTag|=2),e=t.pendingProps,l=bl(t,vl.current),sa(t,n),l=pi(null,t,r,e,l,n),t.effectTag|=1,"object"==typeof l&&null!==l&&"function"==typeof l.render&&void 0===l.$$typeof){if(t.tag=1,mi(),wl(r)){var a=!0;Sl(t)}else a=!1;t.memoizedState=null!==l.state&&void 0!==l.state?l.state:null;var o=r.getDerivedStateFromProps;"function"==typeof o&&Ca(t,r,o,e),l.updater=_a,t.stateNode=l,l._reactInternalFiber=t,za(t,r,e,n),t=Zi(null,t,r,!0,a,n)}else t.tag=0,$i(null,t,l,n),t=t.child;return t;case 16:if(l=t.elementType,null!==e&&(e.alternate=null,t.alternate=null,t.effectTag|=2),e=t.pendingProps,function(e){if(-1===e._status){e._status=0;var t=e._ctor;t=t(),e._result=t,t.then((function(t){0===e._status&&(t=t.default,e._status=1,e._result=t)}),(function(t){0===e._status&&(e._status=2,e._result=t)}))}}(l),1!==l._status)throw l._result;switch(l=l._result,t.type=l,a=t.tag=function(e){if("function"==typeof e)return Yu(e)?1:0;if(null!=e){if((e=e.$$typeof)===H)return 11;if(e===Y)return 14}return 2}(l),e=ta(l,e),a){case 0:t=qi(null,t,l,e,n);break;case 1:t=Gi(null,t,l,e,n);break;case 11:t=Qi(null,t,l,e,n);break;case 14:t=Yi(null,t,l,ta(l.type,e),r,n);break;default:throw Error(i(306,l,""))}return t;case 0:return r=t.type,l=t.pendingProps,qi(e,t,r,l=t.elementType===r?l:ta(r,l),n);case 1:return r=t.type,l=t.pendingProps,Gi(e,t,r,l=t.elementType===r?l:ta(r,l),n);case 3:if(Ji(t),null===(r=t.updateQueue))throw Error(i(282));if(l=null!==(l=t.memoizedState)?l.element:null,Ea(t,r,t.pendingProps,null,n),(r=t.memoizedState.element)===l)Vi(),t=co(e,t,n);else{if((l=t.stateNode.hydrate)&&(Fi=ir(t.stateNode.containerInfo.firstChild),Ii=t,l=Li=!0),l)for(n=Ua(t,null,r,n),t.child=n;n;)n.effectTag=-3&n.effectTag|1024,n=n.sibling;else $i(e,t,r,n),Vi();t=t.child}return t;case 5:return $a(t),null===e&&ji(t),r=t.type,l=t.pendingProps,a=null!==e?e.memoizedProps:null,o=l.children,rr(r,l)?o=null:null!==a&&rr(r,a)&&(t.effectTag|=16),Ki(e,t),4&t.mode&&1!==n&&l.hidden?(t.expirationTime=t.childExpirationTime=1,t=null):($i(e,t,o,n),t=t.child),t;case 6:return null===e&&ji(t),null;case 13:return ao(e,t,n);case 4:return Ba(t,t.stateNode.containerInfo),r=t.pendingProps,null===e?t.child=La(t,null,r,n):$i(e,t,r,n),t.child;case 11:return r=t.type,l=t.pendingProps,Qi(e,t,r,l=t.elementType===r?l:ta(r,l),n);case 7:return $i(e,t,t.pendingProps,n),t.child;case 8:case 12:return $i(e,t,t.pendingProps.children,n),t.child;case 10:e:{if(r=t.type._context,l=t.pendingProps,o=t.memoizedProps,oa(t,a=l.value),null!==o){var u=o.value;if(0===(a=el(u,a)?0:0|("function"==typeof r._calculateChangedBits?r._calculateChangedBits(u,a):1073741823))){if(o.children===l.children&&!yl.current){t=co(e,t,n);break e}}else for(null!==(u=t.child)&&(u.return=t);null!==u;){var c=u.dependencies;if(null!==c){o=u.child;for(var s=c.firstContext;null!==s;){if(s.context===r&&0!=(s.observedBits&a)){1===u.tag&&((s=ha(n,null)).tag=2,ya(u,s)),u.expirationTime=t&&e<=t}function tc(e,t){var n=e.firstSuspendedTime,r=e.lastSuspendedTime;nt||0===n)&&(e.lastSuspendedTime=t),t<=e.lastPingedTime&&(e.lastPingedTime=0),t<=e.lastExpiredTime&&(e.lastExpiredTime=0)}function nc(e,t){t>e.firstPendingTime&&(e.firstPendingTime=t);var n=e.firstSuspendedTime;0!==n&&(t>=n?e.firstSuspendedTime=e.lastSuspendedTime=e.nextKnownPendingLevel=0:t>=e.lastSuspendedTime&&(e.lastSuspendedTime=t+1),t>e.nextKnownPendingLevel&&(e.nextKnownPendingLevel=t))}function rc(e,t){var n=e.lastExpiredTime;(0===n||n>t)&&(e.lastExpiredTime=t)}function lc(e,t,n,r){var l=t.current,a=mu(),o=Ta.suspense;a=hu(a,l,o);e:if(n){t:{if(et(n=n._reactInternalFiber)!==n||1!==n.tag)throw Error(i(170));var u=n;do{switch(u.tag){case 3:u=u.stateNode.context;break t;case 1:if(wl(u.type)){u=u.stateNode.__reactInternalMemoizedMergedChildContext;break t}}u=u.return}while(null!==u);throw Error(i(171))}if(1===n.tag){var c=n.type;if(wl(c)){n=Tl(n,c,u);break e}}n=u}else n=hl;return null===t.context?t.context=n:t.pendingContext=n,(t=ha(a,o)).payload={element:e},null!==(r=void 0===r?null:r)&&(t.callback=r),ya(l,t),vu(l,a),a}function ac(e){if(!(e=e.current).child)return null;switch(e.child.tag){case 5:default:return e.child.stateNode}}function ic(e,t){null!==(e=e.memoizedState)&&null!==e.dehydrated&&e.retryTime=k},o=function(){},t.unstable_forceFrameRate=function(e){0>e||125P(i,n))void 0!==u&&0>P(u,i)?(e[r]=u,e[o]=n,r=o):(e[r]=i,e[a]=n,r=a);else{if(!(void 0!==u&&0>P(u,n)))break e;e[r]=u,e[o]=n,r=o}}}return t}return null}function P(e,t){var n=e.sortIndex-t.sortIndex;return 0!==n?n:e.id-t.id}var N=[],O=[],z=1,R=null,M=3,I=!1,F=!1,L=!1;function U(e){for(var t=C(O);null!==t;){if(null===t.callback)_(O);else{if(!(t.startTime<=e))break;_(O),t.sortIndex=t.expirationTime,S(N,t)}t=C(O)}}function D(e){if(L=!1,U(e),!F)if(null!==C(N))F=!0,r(j);else{var t=C(O);null!==t&&l(D,t.startTime-e)}}function j(e,n){F=!1,L&&(L=!1,a()),I=!0;var r=M;try{for(U(n),R=C(N);null!==R&&(!(R.expirationTime>n)||e&&!i());){var o=R.callback;if(null!==o){R.callback=null,M=R.priorityLevel;var u=o(R.expirationTime<=n);n=t.unstable_now(),"function"==typeof u?R.callback=u:R===C(N)&&_(N),U(n)}else _(N);R=C(N)}if(null!==R)var c=!0;else{var s=C(O);null!==s&&l(D,s.startTime-n),c=!1}return c}finally{R=null,M=r,I=!1}}function A(e){switch(e){case 1:return-1;case 2:return 250;case 5:return 1073741823;case 4:return 1e4;default:return 5e3}}var W=o;t.unstable_ImmediatePriority=1,t.unstable_UserBlockingPriority=2,t.unstable_NormalPriority=3,t.unstable_IdlePriority=5,t.unstable_LowPriority=4,t.unstable_runWithPriority=function(e,t){switch(e){case 1:case 2:case 3:case 4:case 5:break;default:e=3}var n=M;M=e;try{return t()}finally{M=n}},t.unstable_next=function(e){switch(M){case 1:case 2:case 3:var t=3;break;default:t=M}var n=M;M=t;try{return e()}finally{M=n}},t.unstable_scheduleCallback=function(e,n,i){var o=t.unstable_now();if("object"==typeof i&&null!==i){var u=i.delay;u="number"==typeof u&&0o?(e.sortIndex=u,S(O,e),null===C(N)&&e===C(O)&&(L?a():L=!0,l(D,u-o))):(e.sortIndex=i,S(N,e),F||I||(F=!0,r(j))),e},t.unstable_cancelCallback=function(e){e.callback=null},t.unstable_wrapCallback=function(e){var t=M;return function(){var n=M;M=t;try{return e.apply(this,arguments)}finally{M=n}}},t.unstable_getCurrentPriorityLevel=function(){return M},t.unstable_shouldYield=function(){var e=t.unstable_now();U(e);var n=C(N);return n!==R&&null!==R&&null!==n&&null!==n.callback&&n.startTime<=e&&n.expirationTimee.cellX||i>e.cellY){var o,c;if(0===i)o=e.cellX,c=0;else if(0===a)c=e.cellY,o=0;else{var s=Math.abs(i/a);s>e.cellY/e.cellX?(o=e.cellY/2/s,c=e.cellY/2):(c=e.cellX/2*s,o=e.cellX/2)}for(var f=u(a>0?[t,r]:[r,t],2),d=f[0],p=f[1],m=u(i>0?[n,l]:[l,l],2),h=m[0],v=m[1];!(d>p||h>v);)d+=o,h+=c,e.handleRound(d,h);e.handleRound(r,l)}else e.handleRound(r,l)},e.handleRound=function(t,n){for(var r=(t-e.round[3])/e.cellX,l=(n-e.round[0])/e.cellY,a=[Math.floor(r-e.size/2/e.cellX),Math.floor(r+e.size/2/e.cellX)],i=[Math.floor(l-e.size/2/e.cellY),Math.floor(l+e.size/2/e.cellY)],o=a[0];o<=a[1];o++)if(o>=0&&o<10)for(var u=i[0];u<=i[1];u++)if(u>=0&&u<10){var c=t-e.round[3]-(o+.5)*e.cellX,s=n-e.round[0]-(u+.5)*e.cellY,f=10*u+o;c*c+s*s=l&&(i&&e.ctx.clearRect(0,0,e.state.cw,e.state.ch),e.setState({isSuccess:!0}),e.up(t,!0),o&&o())},e}var n,r,a;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&d(e,t)}(t,e),n=t,(r=[{key:"componentDidMount",value:function(){var e=this,t=this.props.img;t?(this.image=document.createElement("img"),this.image.src=t,this.image.onload=function(){return e.init(!0)},this.image.onerror=function(){return e.init(!1)}):this.init(!1)}},{key:"render",value:function(){var e=this,t=this.props,n=t.children,r=t.className,a=void 0===r?"":r;return l.a.createElement("div",{className:"___scratch ".concat(a," ").concat(this.state.isSuccess?"frozen":""),ref:function(t){return e.wrap=t}},l.a.createElement("div",{className:"___content ".concat(this.state.visible?"visible":"")},n),l.a.createElement("canvas",{ref:function(t){return e.canvas=t},width:this.state.cw,height:this.state.ch,onMouseDown:this.down,onTouchStart:this.down}))}}])&&c(n.prototype,r),a&&c(n,a),t}(r.PureComponent);n(12);function g(e){return(g="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function b(e,t){for(var n=0;n