button控件强化

.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/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":570,"mtime":1609600603207,"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]"]
+[{"/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":590,"mtime":1609926999671,"results":"10","hashOfConfig":"8"},{"size":535,"mtime":1608965352064,"results":"11","hashOfConfig":"8"},{"size":485,"mtime":1608970157307,"results":"12","hashOfConfig":"8"},{"size":1644,"mtime":1609926808293,"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,"usedDeprecatedRules":"16"},{"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},"/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]"]

src/App.tsx

@@ -4,8 +4,8 @@ import Button, { ButtonType, ButtonSize } from './components/Button/button';
 const App: React.FC = () => {
   return (
     <div className="App">
-      <Button size={ButtonSize.Samll} disabled>  Hello </Button> 
-      <Button btnType={ButtonType.Primary} size={ButtonSize.Large}> Hello </Button>
+      <Button size={ButtonSize.Samll} >  Hello </Button> 
+      <Button btnType={ButtonType.Primary} size={ButtonSize.Large} onClick={(e)=>{alert(123)}}> Hello </Button>
       <Button btnType={ButtonType.Danger} > Hello </Button>
       <Button btnType={ButtonType.Default} > Hello </Button>
       <Button btnType={ButtonType.Link} href="https://www.aihomee.com"> Hello </Button>

src/components/Button/button.tsx

@@ -22,10 +22,14 @@ interface BaseButtonProps {
     href?: string;
 }
 
-const Button: React.FC<BaseButtonProps> = (props) => {
-    const { btnType, disabled, size, children, href } = props;
+type NativeButtonProps = BaseButtonProps & React.ButtonHTMLAttributes<HTMLElement>;
+type AnchorButtonProps = BaseButtonProps & React.AnchorHTMLAttributes<HTMLElement>;
+export type ButtonProps = Partial<NativeButtonProps & AnchorButtonProps>;
 
-    const classes = classNames('btn', {
+const Button: React.FC<ButtonProps> = (props) => {
+    const { btnType, className, disabled, size, children, href, ...restProps } = props;
+
+    const classes = classNames('btn', className, {
         [`btn-${btnType}`]: btnType,
         [`btn-${size}`]: size,
         'disabled': (btnType === ButtonType.Link) && disabled
@@ -36,6 +40,7 @@ const Button: React.FC<BaseButtonProps> = (props) => {
             <a
                 className={classes}
                 href={href}
+                {...restProps}
             >
                 {children}
             </a>
@@ -45,6 +50,7 @@ const Button: React.FC<BaseButtonProps> = (props) => {
             <button
                 className={classes}
                 disabled={disabled}
+                {...restProps}
             >
                 {children}
             </button>

src/styles/index.scss

@@ -4,7 +4,6 @@
 //layout
 @import "reboot";
 
-
 //mixin
 @import "mixin";