From 9b2983c8c52c2d79321a11ca7d6bac706aa1018f Mon Sep 17 00:00:00 2001 From: blobt Date: Sat, 2 Jan 2021 20:06:20 +0800 Subject: [PATCH] =?UTF-8?q?button=E6=8F=92=E4=BB=B61?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintcache | 2 +- package-lock.json | 10 ++++++ package.json | 2 ++ src/App.tsx | 14 ++++---- src/components/Button/button.tsx | 60 ++++++++++++++++++++++++++++++++ src/components/Hello.tsx | 31 ----------------- src/components/LikeButton.tsx | 32 ----------------- src/components/MouseTracker.tsx | 23 ------------ 8 files changed, 79 insertions(+), 95 deletions(-) create mode 100755 src/components/Button/button.tsx delete mode 100755 src/components/Hello.tsx delete mode 100755 src/components/LikeButton.tsx delete mode 100755 src/components/MouseTracker.tsx diff --git a/.eslintcache b/.eslintcache index 2ea2fd2..da5a144 100644 --- a/.eslintcache +++ b/.eslintcache @@ -1 +1 @@ -[{"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx":"1","/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts":"2","/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx":"3","/home/blobt/Documents/dev/node/study_react_ts/src/components/Hello.tsx":"4","/home/blobt/Documents/dev/node/study_react_ts/src/components/LikeButton.tsx":"5","/home/blobt/Documents/dev/node/study_react_ts/src/components/MouseTracker.tsx":"6","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx":"7","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx":"8"},{"size":508,"mtime":1609414907652,"results":"9","hashOfConfig":"10"},{"size":425,"mtime":1608882568140,"results":"11","hashOfConfig":"10"},{"size":273,"mtime":1609509849169,"results":"12","hashOfConfig":"10"},{"size":627,"mtime":1609135687431,"results":"13","hashOfConfig":"10"},{"size":1138,"mtime":1609126836504,"results":"14","hashOfConfig":"10"},{"size":777,"mtime":1608947625775,"results":"15","hashOfConfig":"10"},{"size":535,"mtime":1608965352064,"results":"16","hashOfConfig":"10"},{"size":485,"mtime":1608970157307,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"46l3t",{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"25","messages":"26","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"31"},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"31"},{"filePath":"34","messages":"35","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx",[],["36","37"],"/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts",[],"/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/components/Hello.tsx",["38"],"/home/blobt/Documents/dev/node/study_react_ts/src/components/LikeButton.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/components/MouseTracker.tsx",[],["39","40"],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx",["41","42"],{"ruleId":"43","replacedBy":"44"},{"ruleId":"45","replacedBy":"46"},{"ruleId":"47","severity":1,"message":"48","line":13,"column":8,"nodeType":"49","endLine":13,"endColumn":10,"suggestions":"50"},{"ruleId":"43","replacedBy":"51"},{"ruleId":"45","replacedBy":"52"},{"ruleId":"47","severity":1,"message":"53","line":14,"column":8,"nodeType":"54","endLine":14,"endColumn":12},{"ruleId":"47","severity":1,"message":"55","line":14,"column":8,"nodeType":"54","endLine":14,"endColumn":12,"suggestions":"56"},"no-native-reassign",["57"],"no-negated-in-lhs",["58"],"react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'data'. Either include it or remove the dependency array.","ArrayExpression",["59"],["57"],["58"],"React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies.","Identifier","React Hook useEffect has a missing dependency: 'url'. Either include it or remove the dependency array.",["60"],"no-global-assign","no-unsafe-negation",{"desc":"61","fix":"62"},{"desc":"63","fix":"64"},"Update the dependencies array to be: [data]",{"range":"65","text":"66"},"Update the dependencies array to be: [url]",{"range":"67","text":"68"},[280,282],"[data]",[415,419],"[url]"] \ No newline at end of file +[{"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx":"1","/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts":"2","/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx":"3","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx":"4","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx":"5","/home/blobt/Documents/dev/node/study_react_ts/src/components/Button/button.tsx":"6"},{"size":508,"mtime":1609414907652,"results":"7","hashOfConfig":"8"},{"size":425,"mtime":1608882568140,"results":"9","hashOfConfig":"8"},{"size":425,"mtime":1609589147292,"results":"10","hashOfConfig":"8"},{"size":535,"mtime":1608965352064,"results":"11","hashOfConfig":"8"},{"size":485,"mtime":1608970157307,"results":"12","hashOfConfig":"8"},{"size":1301,"mtime":1609588234575,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"46l3t",{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"23"},{"filePath":"24","messages":"25","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx",[],["28","29"],"/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts",[],"/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx",[],["30","31"],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx",["32","33"],"/home/blobt/Documents/dev/node/study_react_ts/src/components/Button/button.tsx",[],{"ruleId":"34","replacedBy":"35"},{"ruleId":"36","replacedBy":"37"},{"ruleId":"34","replacedBy":"38"},{"ruleId":"36","replacedBy":"39"},{"ruleId":"40","severity":1,"message":"41","line":14,"column":8,"nodeType":"42","endLine":14,"endColumn":12},{"ruleId":"40","severity":1,"message":"43","line":14,"column":8,"nodeType":"42","endLine":14,"endColumn":12,"suggestions":"44"},"no-native-reassign",["45"],"no-negated-in-lhs",["46"],["45"],["46"],"react-hooks/exhaustive-deps","React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies.","Identifier","React Hook useEffect has a missing dependency: 'url'. Either include it or remove the dependency array.",["47"],"no-global-assign","no-unsafe-negation",{"desc":"48","fix":"49"},"Update the dependencies array to be: [url]",{"range":"50","text":"51"},[415,419],"[url]"] \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index ffaa06b..61ea7ef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2178,6 +2178,11 @@ "@babel/types": "^7.3.0" } }, + "@types/classnames": { + "version": "2.2.11", + "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.11.tgz", + "integrity": "sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw==" + }, "@types/eslint": { "version": "7.2.6", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.6.tgz", @@ -4064,6 +4069,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "clean-css": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", diff --git a/package.json b/package.json index b540cca..00e684d 100644 --- a/package.json +++ b/package.json @@ -6,11 +6,13 @@ "@testing-library/jest-dom": "^5.11.6", "@testing-library/react": "^11.2.2", "@testing-library/user-event": "^12.6.0", + "@types/classnames": "^2.2.11", "@types/jest": "^26.0.19", "@types/node": "^12.19.11", "@types/react": "^16.14.2", "@types/react-dom": "^16.9.10", "axios": "^0.21.1", + "classnames": "^2.2.6", "node-sass": "^4.14.1", "react": "^17.0.1", "react-dom": "^17.0.1", diff --git a/src/App.tsx b/src/App.tsx index cad2d41..0383556 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,14 +1,12 @@ -import React from 'react'; - +import React from 'react'; +import Button, { ButtonType, ButtonSize } from './components/Button/button'; const App: React.FC = () => { return ( -
-

Hello

-

Hello

-

Hello

-

Hello

- aihomee +
+ + +
); } diff --git a/src/components/Button/button.tsx b/src/components/Button/button.tsx new file mode 100755 index 0000000..e5f5767 --- /dev/null +++ b/src/components/Button/button.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import classNames from 'classnames'; + +export enum ButtonSize { + Large = 'lg', + Samll = 'sm' +} + +export enum ButtonType { + Primary = 'primary', + Default = 'default', + Danger = 'danger', + Link = 'link' +} + +interface BaseButtonProps { + className?: string; + disabled?: boolean; + size?: ButtonSize; + btnType?: ButtonType; + children: React.ReactNode; + href?: string; +} + +const Button: React.FC = (props) => { + const { btnType, disabled, size, children, href } = props; + + const classes = classNames('btn', { + [`btn-${btnType}`]: btnType, + [`btn-${size}`]: size, + 'disabled': (btnType === ButtonType.Link) && disabled + }); + + if (btnType === ButtonType.Link && href) { + return ( + + {children} + + ); + } else { + return ( + + ); + } +} + +Button.defaultProps = { + disabled: false, + btnType: ButtonType.Default +} + +export default Button; \ No newline at end of file diff --git a/src/components/Hello.tsx b/src/components/Hello.tsx deleted file mode 100755 index 13d4c67..0000000 --- a/src/components/Hello.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React, { useEffect, useState } from 'react'; - - -interface IHelloProps { - message: string; -} - -const Hello: React.FC = (props) => { - const [data, setData] = useState(1); - - useEffect(() => { - console.log("use effect - " + data); - }, []); - - useEffect(() => { - console.log("use effect2 - " + data); - }); - - function click() { - const d: any = data + 1; - setData(d); - } - return ( - <> -

{props.message} {data}

- - - ) -} - -export default Hello; \ No newline at end of file diff --git a/src/components/LikeButton.tsx b/src/components/LikeButton.tsx deleted file mode 100755 index 9b6426d..0000000 --- a/src/components/LikeButton.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React, { useState, useEffect, useRef } from 'react'; - -const LikeButton: React.FC = () => { - //obj是存储容器，setObj是设置容器的函数名 - const [obj, setObj] = useState({ like: 0, on: true }); - //使用useRef,在所有的render中数据都保持一直，修改这个变量也不会引起组件从新render - const likeRef = useRef(0); - - //这个useeffect没渲染完都会执行 - useEffect(() => { - console.log("like button effect") - document.title = `点击了${obj.like}次`; - }, [obj.like]); //第二个参数 [obj.like]， 表示只有obj.like发生变化，才会触发effect - - function handleAlertClick() { - setTimeout(() => { - setTimeout(() => { - alert('you haved click ' + obj.like + ', you haved click ' + likeRef.current); - }, 3000) - }); - } - return ( -
- - -
- ) -} - -export default LikeButton; \ No newline at end of file diff --git a/src/components/MouseTracker.tsx b/src/components/MouseTracker.tsx deleted file mode 100755 index 49eac6d..0000000 --- a/src/components/MouseTracker.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React, { useState, useEffect } from 'react'; - -const MouseTracker: React.FC = () => { - const [position, setPosition] = useState({ x: 0, y: 0 }); - useEffect(() => { - - const updateMouse = (e: MouseEvent) => { - console.log("updateMouse"); - setPosition({ x: e.clientX, y: e.clientY }); - } - - document.addEventListener('click', updateMouse);console.log("addEvent"); - - //因为每次都会添加监听器，所以这里要返回一个清除监听器的函数 - return () => { - console.log("removeEvent"); - document.removeEventListener('click', updateMouse); - } - },[]); - return (

X: {position.x}, Y: {position.y}

); -} - -export default MouseTracker; \ No newline at end of file