From 3a302fb03f67ff5f7751bf81a0349ab0075f99d4 Mon Sep 17 00:00:00 2001 From: xujiang Date: Tue, 7 Sep 2021 10:58:29 +0800 Subject: [PATCH] :new: add demo --- .editorconfig | 16 +++++++++ .gitignore | 20 +++++++++++ .prettierignore | 8 +++++ .prettierrc | 11 ++++++ .umirc.ts | 9 +++++ README.md | 83 +++++++++++++++++++++++++++++++++++++++++++++ mock/.gitkeep | 0 package.json | 53 +++++++++++++++++++++++++++++ src/pages/index.jsx | 44 ++++++++++++++++++++++++ tsconfig.json | 37 ++++++++++++++++++++ typings.d.ts | 10 ++++++ 11 files changed, 291 insertions(+) create mode 100755 .editorconfig create mode 100644 .gitignore create mode 100644 .prettierignore create mode 100644 .prettierrc create mode 100644 .umirc.ts create mode 100644 README.md create mode 100644 mock/.gitkeep create mode 100644 package.json create mode 100644 src/pages/index.jsx create mode 100644 tsconfig.json create mode 100644 typings.d.ts diff --git a/.editorconfig b/.editorconfig new file mode 100755 index 0000000..7e3649a --- /dev/null +++ b/.editorconfig @@ -0,0 +1,16 @@ +# http://editorconfig.org +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false + +[Makefile] +indent_style = tab diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..bee1cf6 --- /dev/null +++ b/.gitignore @@ -0,0 +1,20 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/npm-debug.log* +/yarn-error.log +/yarn.lock +/package-lock.json + +# production +/dist + +# misc +.DS_Store + +# umi +/src/.umi +/src/.umi-production +/src/.umi-test +/.env.local diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..0d4222f --- /dev/null +++ b/.prettierignore @@ -0,0 +1,8 @@ +**/*.md +**/*.svg +**/*.ejs +**/*.html +package.json +.umi +.umi-production +.umi-test diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..94beb14 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,11 @@ +{ + "singleQuote": true, + "trailingComma": "all", + "printWidth": 80, + "overrides": [ + { + "files": ".prettierrc", + "options": { "parser": "json" } + } + ] +} diff --git a/.umirc.ts b/.umirc.ts new file mode 100644 index 0000000..6fb25c9 --- /dev/null +++ b/.umirc.ts @@ -0,0 +1,9 @@ +import { defineConfig } from 'umi'; + +export default defineConfig({ + nodeModulesTransform: { + type: 'none', + }, + routes: [{ path: '/', component: '@/pages/index' }], + fastRefresh: {}, +}); diff --git a/README.md b/README.md new file mode 100644 index 0000000..834249c --- /dev/null +++ b/README.md @@ -0,0 +1,83 @@ +## Hello react-slider-vertify! + +react-slider-vertify 是一款前端实现的滑动验证码组件, 我们可以通过它轻松的控制验证的整个生命周期(刷新时, 验证成功时, 验证失败时的回调), 并拥有一定的配置化能力. + +![demo.gif](http://cdn.dooring.cn/dr/slider.gif) + +## doc + +[react-slider-vertify](http://h5.dooring.cn/slider-vertify/) + +## Getting Started + +Install dependencies, + +```bash +$ npm i @alex_xu/react-slider-vertify +``` + +## Use + +```tsx +import React, { useState } from 'react'; +import { Vertify } from 'react-slider-vertify'; + +export default () => { + const [visible, setVisible] = useState(false); + const show = () => { + setVisible(true) + } + const hide = () => { + setVisible(false) + } + const style = { + display: 'inline-block', + marginRight: '20px', + marginBottom: '20px', + width: '100px', + padding: '5px 20px', + color: '#fff', + textAlign: 'center', + cursor: 'pointer', + background: '#1991FA' + } + return <> +
显示
+
隐藏
+ alert('success')} + onFail={() => alert('fail')} + onRefresh={() => alert('refresh')} + /> + + +}; +``` + +## More Production + +| name | Description | +| ----------- | ----------- | +| [H5-Dooring](https://github.com/MrXujiang/h5-Dooring) | 让H5制作像搭积木一样简单, 轻松搭建H5页面, H5网站, PC端网站, LowCode平台. +| [V6.Dooring](https://github.com/MrXujiang/v6.dooring.public) | 可视化大屏解决方案, 提供一套可视化编辑引擎, 助力个人或企业轻松定制自己的可视化大屏应用. | +| [dooring-electron-lowcode](https://github.com/MrXujiang/dooring-electron-lowcode) | 基于electron的H5-Dooring编辑器桌面端. | +| [PC-Dooring](https://github.com/MrXujiang/pc-Dooring) | 网格式拖拽搭建PC端页面. | +| [DooringX](https://github.com/H5-Dooring/dooringx) | 快速高效搭建可视化拖拽平台. | + +## Inspired by + +https://github.com/yeild/jigsaw + +## 赞助 | Sponsored +开源不易, 有了您的赞助, 我们会做的更好~ + + + +## 技术反馈和交流群 | Technical feedback and communication +微信：beautifulFront + + + diff --git a/mock/.gitkeep b/mock/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/package.json b/package.json new file mode 100644 index 0000000..0cbc8f3 --- /dev/null +++ b/package.json @@ -0,0 +1,53 @@ +{ + "scripts": { + "start": "umi dev", + "build": "umi build", + "postinstall": "umi generate tmp", + "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'", + "test": "umi-test", + "test:coverage": "umi-test --coverage" + }, + "name": "react-slider-vertify-demo", + "description": "Slide verification component based on react", + "keywords": [ + "component", + "components", + "design", + "framework", + "frontend", + "react", + "react-component", + "ui", + "slider-vertify", + "react-slider-vertify", + "徐小夕" + ], + "gitHooks": { + "pre-commit": "lint-staged" + }, + "lint-staged": { + "*.{js,jsx,less,md,json}": [ + "prettier --write" + ], + "*.ts?(x)": [ + "prettier --parser=typescript --write" + ] + }, + "dependencies": { + "@alex_xu/react-slider-vertify": "^1.0.4", + "@ant-design/pro-layout": "^6.5.0", + "react": "17.x", + "react-dom": "17.x", + "umi": "^3.5.17" + }, + "devDependencies": { + "@types/react": "^17.0.0", + "@types/react-dom": "^17.0.0", + "@umijs/preset-react": "1.x", + "@umijs/test": "^3.5.17", + "lint-staged": "^10.0.7", + "prettier": "^2.2.0", + "typescript": "^4.1.2", + "yorkie": "^2.0.0" + } +} diff --git a/src/pages/index.jsx b/src/pages/index.jsx new file mode 100644 index 0000000..d9ac10e --- /dev/null +++ b/src/pages/index.jsx @@ -0,0 +1,44 @@ +import { useState } from 'react'; +import { Vertify } from '@alex_xu/react-slider-vertify'; + +export default function IndexPage() { + const [visible, setVisible] = useState(true); + const show = () => { + setVisible(true); + }; + const hide = () => { + setVisible(false); + }; + const style = { + display: 'inline-block', + margin: '20px', + width: '100px', + padding: '5px 20px', + color: '#fff', + textAlign: 'center', + cursor: 'pointer', + background: '#1991FA', + }; + return ( +
+ alert('success')} + onFail={() => alert('fail')} + onRefresh={() => alert('refresh')} + /> +
+ 显示 +
+
+ 隐藏 +
+
+
更多精彩
+ +
+
+ ); +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..6d42f8c --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,37 @@ +{ + "compilerOptions": { + "target": "esnext", + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "importHelpers": true, + "jsx": "react-jsx", + "esModuleInterop": true, + "sourceMap": true, + "baseUrl": "./", + "strict": true, + "paths": { + "@/*": ["src/*"], + "@@/*": ["src/.umi/*"] + }, + "allowSyntheticDefaultImports": true + }, + "include": [ + "mock/**/*", + "src/**/*", + "config/**/*", + ".umirc.ts", + "typings.d.ts" + ], + "exclude": [ + "node_modules", + "lib", + "es", + "dist", + "typings", + "**/__test__", + "test", + "docs", + "tests" + ] +} diff --git a/typings.d.ts b/typings.d.ts new file mode 100644 index 0000000..06c8a5b --- /dev/null +++ b/typings.d.ts @@ -0,0 +1,10 @@ +declare module '*.css'; +declare module '*.less'; +declare module '*.png'; +declare module '*.svg' { + export function ReactComponent( + props: React.SVGProps, + ): React.ReactElement; + const url: string; + export default url; +}