From 872a42b7a596a20c7d2e41fdcbfe69f5594a69f3 Mon Sep 17 00:00:00 2001 From: CPunisher <1343316114@qq.com> Date: Wed, 6 May 2020 20:39:05 +0800 Subject: [PATCH 1/7] Restructure code --- package-lock.json | 55 ++++++++++++++++++++++++++++++++ package.json | 10 ++++-- src/App.js | 18 ----------- src/App.test.js | 9 ------ src/components/Footer.js | 20 ------------ src/components/InputInfo.js | 22 +++++++++++++ src/components/Qrcode.js | 15 ++------- src/{ => components/app}/App.css | 0 src/components/app/App.js | 21 ++++++++++++ src/components/footer/Footer.js | 32 +++++++++++++++++++ src/components/header/Header.js | 20 ++++++++++++ src/containers/Layout.css | 4 --- src/containers/Layout.js | 12 ------- src/index.js | 11 +++++-- src/reducers/index.js | 0 15 files changed, 169 insertions(+), 80 deletions(-) delete mode 100644 src/App.js delete mode 100644 src/App.test.js delete mode 100644 src/components/Footer.js create mode 100644 src/components/InputInfo.js rename src/{ => components/app}/App.css (100%) create mode 100644 src/components/app/App.js create mode 100644 src/components/footer/Footer.js create mode 100644 src/components/header/Header.js delete mode 100644 src/containers/Layout.css delete mode 100644 src/containers/Layout.js create mode 100644 src/reducers/index.js diff --git a/package-lock.json b/package-lock.json index 0247657..c5eefca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6087,6 +6087,14 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npm.taobao.org/hoist-non-react-statics/download/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha1-7OCsr3HWLClpwuxZ/v9CpLGoW0U=", + "requires": { + "react-is": "^16.7.0" + } + }, "hosted-git-info": { "version": "2.8.8", "resolved": "https://registry.npm.taobao.org/hosted-git-info/download/hosted-git-info-2.8.8.tgz", @@ -10917,6 +10925,18 @@ "resolved": "https://registry.npm.taobao.org/react-is/download/react-is-16.13.1.tgz", "integrity": "sha1-eJcppNw23imZ3BVt1sHZwYzqVqQ=" }, + "react-redux": { + "version": "7.2.0", + "resolved": "https://registry.npm.taobao.org/react-redux/download/react-redux-7.2.0.tgz", + "integrity": "sha1-+XD2IZKzmBZC/sRv0NsYoHT+h50=", + "requires": { + "@babel/runtime": "^7.5.5", + "hoist-non-react-statics": "^3.3.0", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", + "react-is": "^16.9.0" + } + }, "react-scripts": { "version": "3.4.1", "resolved": "https://registry.npm.taobao.org/react-scripts/download/react-scripts-3.4.1.tgz", @@ -11079,6 +11099,36 @@ "strip-indent": "^3.0.0" } }, + "redux": { + "version": "4.0.5", + "resolved": "https://registry.npm.taobao.org/redux/download/redux-4.0.5.tgz?cache=0&sync_timestamp=1577154206919&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fredux%2Fdownload%2Fredux-4.0.5.tgz", + "integrity": "sha1-TbXeWBbheJHeioDEJCMtBvBR2T8=", + "requires": { + "loose-envify": "^1.4.0", + "symbol-observable": "^1.2.0" + } + }, + "redux-devtools": { + "version": "3.5.0", + "resolved": "https://registry.npm.taobao.org/redux-devtools/download/redux-devtools-3.5.0.tgz", + "integrity": "sha1-1pq3bU8Pir320kvPWVTXoaoraCc=", + "dev": true, + "requires": { + "lodash": "^4.2.0", + "prop-types": "^15.5.7", + "redux-devtools-instrument": "^1.9.0" + } + }, + "redux-devtools-instrument": { + "version": "1.9.6", + "resolved": "https://registry.npm.taobao.org/redux-devtools-instrument/download/redux-devtools-instrument-1.9.6.tgz", + "integrity": "sha1-a0EllfdLnUjP1OzBPlhbFYjtbn4=", + "dev": true, + "requires": { + "lodash": "^4.2.0", + "symbol-observable": "^1.0.2" + } + }, "regenerate": { "version": "1.4.0", "resolved": "https://registry.npm.taobao.org/regenerate/download/regenerate-1.4.0.tgz", @@ -12526,6 +12576,11 @@ "util.promisify": "~1.0.0" } }, + "symbol-observable": { + "version": "1.2.0", + "resolved": "https://registry.npm.taobao.org/symbol-observable/download/symbol-observable-1.2.0.tgz", + "integrity": "sha1-wiaIrtTqs83C3+rLtWFmBWCgCAQ=" + }, "symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npm.taobao.org/symbol-tree/download/symbol-tree-3.2.4.tgz", diff --git a/package.json b/package.json index 750cab4..0bc5de1 100644 --- a/package.json +++ b/package.json @@ -6,9 +6,12 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", + "prop-types": "^15.7.2", "react": "^16.13.1", "react-dom": "^16.13.1", - "react-scripts": "3.4.1" + "react-redux": "^7.2.0", + "react-scripts": "3.4.1", + "redux": "^4.0.5" }, "scripts": { "start": "react-scripts start", @@ -31,5 +34,8 @@ "last 1 safari version" ] }, - "homepage": "./" + "homepage": "./", + "devDependencies": { + "redux-devtools": "^3.5.0" + } } diff --git a/src/App.js b/src/App.js deleted file mode 100644 index e52f668..0000000 --- a/src/App.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import './App.css'; -import Layout from './containers/Layout' -import Qrcode from "./components/Qrcode"; - -function App() { - return ( -
-
- - - -
-
- ); -} - -export default App; diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 4db7ebc..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - const { getByText } = render(); - const linkElement = getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/components/Footer.js b/src/components/Footer.js deleted file mode 100644 index 69e2ed8..0000000 --- a/src/components/Footer.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react"; -import './Qrcode.css'; - -const currentYear = new Date().getFullYear(); - -class Footer extends React.Component { - render() { - return ( -
-
-
作者 ciaochaos CPunisher
-
Copyright © {currentYear} QRBTF. 保留所有权利。
-
浙 ICP 备 19005869 号
-
-
- ); - } -} - -export default Footer diff --git a/src/components/InputInfo.js b/src/components/InputInfo.js new file mode 100644 index 0000000..ace1ba2 --- /dev/null +++ b/src/components/InputInfo.js @@ -0,0 +1,22 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const InputInfo = ({ onChange, onBlur, onKeyPress }) => ( +
+ +
+) + +InputInfo.propTypes = { + onChange: PropTypes.func.isRequired, + onBlur: PropTypes.func.isRequired, + onKeyPress: PropTypes.func.isRequired +} + +export default InputInfo diff --git a/src/components/Qrcode.js b/src/components/Qrcode.js index 37b263c..4ef7357 100644 --- a/src/components/Qrcode.js +++ b/src/components/Qrcode.js @@ -8,7 +8,7 @@ import {isWeiXin} from "../utils/util"; import './Qrcode.css'; import logo from '../qrbtf-logo.svg'; -import Footer from "./Footer"; +import Footer from "./footer/Footer"; import QrItem from "./QrItem"; import QrRendererBase from "./QrRendererBase"; import QrRendererRound from "./QrRendererRound"; @@ -17,11 +17,6 @@ import QrRendererBlank from "./QrRendererBlank"; import QrRendererRandRect from "./QrRendererRandRect"; import QrRendererDSJ from "./QrRendererDSJ"; -const logoStyle = { - background: `url(${logo})`, - backgroundRepeat: 'no-repeat', - backgroundPosition: 'left' -}; const styleList = [ {value: "A1", renderer: QrRendererBase}, @@ -150,12 +145,8 @@ class Qrcode extends React.Component { render() { return ( -
-
-

 

-
-

参数化二维码生成器

+
-