button插件2

4 years ago · 7b99f9a791
5 changed files with 109 additions and 3 deletions
--- 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/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]"]
+[{"/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]"]
--- a/src/App.tsx
+++ b/src/App.tsx
@ -4,8 +4,10 @@ import Button, { ButtonType, ButtonSize } from './components/Button/button';
 const App: React.FC = () => {
  return (
    <div className="App">
-      <Button disabled>  Hello </Button> 
+      <Button size={ButtonSize.Samll} disabled>  Hello </Button> 
      <Button btnType={ButtonType.Primary} size={ButtonSize.Large}> 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>
    </div>
  );
--- a/src/components/Button/_style.scss
+++ b/src/components/Button/_style.scss
@ -0,0 +1,64 @@
+.btn {
+    position: relative;
+    display: inline-block;
+    font-weight: $btn-font-weight;
+    line-height: $btn-line-height;
+    color: $body-color;
+    white-space: nowrap;
+    text-align: center;
+    vertical-align: middle;
+    background-image: none;
+    border: $btn-border-width solid transparent;
+    @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $border-radius);
+    box-shadow: $btn-box-shadow;
+    cursor: pointer;
+    transition: $btn-transition;
+    &.disabled,
+    &[disabled] {
+        cursor: not-allowed;
+        opacity: $btn-disabled-opacity;
+        box-shadow: none;
+        > * {
+            pointer-events: none;
+        }
+    }
+}
+
+.btn-lg {
+    @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $border-radius-lg);
+}
+
+.btn-sm {
+    @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $border-radius-sm);
+}
+
+.btn-primary {
+    @include button-style($primary, $primary, $white);
+}
+
+.btn-danger {
+    @include button-style($danger, $danger, $white);
+}
+
+.btn-default {
+    @include button-style($white, $gray-400, $body-color, $white, $primary,$primary );
+}
+
+.btn-link {
+    font-weight: $font-weight-normal;
+    color: $btn-link-color;
+    text-decoration: $link-decoration;
+    box-shadow: none;
+    &:hover {
+        color: $btn-link-hover-color;
+        text-decoration: $link-hover-decoration;
+    }
+    &:focus,&.focus{
+        text-decoration: $link-hover-decoration;
+        box-shadow: none;
+    }
+    &:disable,&.disable{
+        color: $btn-link-disabled-color;
+        pointer-events: none;
+    }
+}
--- a/src/styles/_mixin.scss
+++ b/src/styles/_mixin.scss
@ -0,0 +1,33 @@
+@mixin button-size($padding-y, $padding-x, $front-size, $border-radius) {
+    padding: $padding-y $padding-x;
+    font-size: $front-size;
+    border-radius: $border-radius;
+}
+
+@mixin button-style(
+    $background,
+    $border,
+    $color,
+    $hover-background: lighten($background, 7.5%),
+    $hover-border: lighten($border, 10%),
+    $hover-color: $color
+) {
+    color: $color;
+    background: $background;
+    border-color: $border;
+    &:hover {
+        color: $hover-color;
+        background: $hover-background;
+        border-color: $hover-border;
+    }
+    &:hover,&.focus {
+        color: $hover-color;
+        background: $hover-background;
+        border-color: $hover-border;
+    }
+    &:disabled,&.disabled {
+        color: $color;
+        background: $background;
+        border-color: $border;
+    }
+}
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@ -2,4 +2,11 @@
@import "variables";

 //layout
-@import "reboot";
+@import "reboot";
+
+
+//mixin
+@import "mixin";
+
+//button
+@import "../components/Button/style";