chore: button custom en ts (#1833)

* fix: button custom en ts * chore: up
SocialGouv · Jan 16, 2024 · 1862678 · 1862678
1 parent 79f4ea8
commit 1862678
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 8 deletions.
diff --git a/dashboard/package.json b/dashboard/package.json
@@ -57,6 +57,7 @@
     "@tailwindcss/forms": "^0.5.3",
     "@types/react-js-pagination": "^3.0.7",
     "@types/sortablejs": "^1.15.1",
+    "@types/styled-components": "^5.1.34",
     "@types/uuid": "^9.0.2",
     "@typescript-eslint/typescript-estree": "^5.57.1",
     "autoprefixer": "^10.4.13",

diff --git a/dashboard/src/components/ButtonCustom.js → dashboard/src/components/ButtonCustom.tsx b/dashboard/src/components/ButtonCustom.js → dashboard/src/components/ButtonCustom.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import { MouseEventHandler } from 'react';
 import styled from 'styled-components';
 import { theme } from '../config';
 import { Spinner } from 'reactstrap';
 
 const ButtonCustom = ({
   color = 'primary',
-  onClick = Function.prototype,
+  onClick = () => {},
   style,
   className = '',
   loading,
@@ -16,6 +16,18 @@ const ButtonCustom = ({
   icon,
   padding = '',
   ...rest
+}: {
+  color?: 'primary' | 'secondary' | 'link' | 'cancel' | 'danger' | 'warning';
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  style?: any;
+  className?: string;
+  loading?: boolean;
+  title?: string;
+  type?: 'button' | 'submit' | 'reset';
+  width?: number;
+  disabled?: boolean;
+  icon?: string;
+  padding?: string;
 }) => {
   return (
     <ButtonWrapper
@@ -32,7 +44,7 @@ const ButtonCustom = ({
       </SpinnerContainer>
       <Content padding={padding}>
         {!!icon && <Icon color={color} icon={icon} />}
-        <Title transparent={loading}>{title}</Title>
+        <Title transparent={Boolean(loading)}>{title}</Title>
       </Content>
     </ButtonWrapper>
   );
@@ -47,7 +59,10 @@ const STYLES = {
   warning: `background: ${theme.orangeLight}; color: ${theme.orangeDark};`,
 };
 
-const ButtonWrapper = styled.button`
+const ButtonWrapper = styled.button<{
+  color: 'primary' | 'secondary' | 'link' | 'cancel' | 'danger' | 'warning';
+  width?: number;
+}>`
   border-radius: 8px;
   font-size: 14px;
   ${(p) => p.color === 'link' && 'font-weight: 600;'}
@@ -72,7 +87,9 @@ const ButtonWrapper = styled.button`
   }
 `;
 
-const Icon = styled.div`
+const Icon = styled.div<{
+  icon: string;
+}>`
   color: currentColor;
   background-image: url(${(props) => props.icon});
   background-size: 20px;
@@ -82,19 +99,25 @@ const Icon = styled.div`
   margin-right: 7px;
 `;
 
-const Title = styled.p`
+const Title = styled.p<{
+  transparent: boolean;
+}>`
   ${(props) => props.transparent && 'color: transparent'};
   margin-bottom: 0;
 `;
 
-const Content = styled.div`
+const Content = styled.div<{
+  padding: string;
+}>`
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 8px 15px;
   ${(props) => `padding: ${props.padding}`}
 `;
-const SpinnerContainer = styled.div`
+const SpinnerContainer = styled.div<{
+  visibility: 'visible' | 'hidden';
+}>`
   visibility: ${(props) => props.visibility};
   position: absolute;
   width: 100%;

diff --git a/dashboard/yarn.lock b/dashboard/yarn.lock
@@ -3323,6 +3323,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/hoist-non-react-statics@npm:*":
+  version: 3.3.5
+  resolution: "@types/hoist-non-react-statics@npm:3.3.5"
+  dependencies:
+    "@types/react": "npm:*"
+    hoist-non-react-statics: "npm:^3.3.0"
+  checksum: b645b062a20cce6ab1245ada8274051d8e2e0b2ee5c6bd58215281d0ec6dae2f26631af4e2e7c8abe238cdcee73fcaededc429eef569e70908f82d0cc0ea31d7
+  languageName: node
+  linkType: hard
+
 "@types/html-minifier-terser@npm:^6.0.0":
   version: 6.1.0
   resolution: "@types/html-minifier-terser@npm:6.1.0"
@@ -3575,6 +3585,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/styled-components@npm:^5.1.34":
+  version: 5.1.34
+  resolution: "@types/styled-components@npm:5.1.34"
+  dependencies:
+    "@types/hoist-non-react-statics": "npm:*"
+    "@types/react": "npm:*"
+    csstype: "npm:^3.0.2"
+  checksum: 3da291b46f03d378a0176c9d034deee7ee0684c5d62e1c5ce82f3be0972918eaa806f45c62e9a4f1c8d24c5ba6571c260caba2493fc7e82b528ac7d15903e2c1
+  languageName: node
+  linkType: hard
+
 "@types/trusted-types@npm:^2.0.2":
   version: 2.0.2
   resolution: "@types/trusted-types@npm:2.0.2"
@@ -6081,6 +6102,7 @@ __metadata:
     "@types/react-js-pagination": "npm:^3.0.7"
     "@types/react-router-dom": "npm:^5.3.3"
     "@types/sortablejs": "npm:^1.15.1"
+    "@types/styled-components": "npm:^5.1.34"
     "@types/uuid": "npm:^9.0.2"
     "@typescript-eslint/typescript-estree": "npm:^5.57.1"
     autoprefixer: "npm:^10.4.13"