Merge pull request #33 from jim-deriv/Jim/74985/button-and-loading-co…

…mponents-ts-migration-new

Jim/74985/button and loading components ts migration new

packages/components/src/components/button-toggle/button-toggle.jsx

@@ -2,8 +2,8 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import HighlightWrapper from './button-highlight-wrapper.jsx';
-import Button from '../button/button.jsx';
 import Counter from '../counter/counter';
+import Button from '../button/button';
 
 const ButtonToggle = ({ buttons_arr, className, has_rounded_button, id, is_animated, name, onChange, value }) => {
     const changeValue = selected_value => {

packages/components/src/components/button/button.jsx → packages/components/src/components/button/button.tsx

@@ -1,11 +1,39 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
-import ButtonLoading from './button_loading.jsx';
+import ButtonLoading from './button_loading';
 import Icon from '../icon';
 import Text from '../text';
 
-const ButtonGroup = ({ children, className }) => (
+type TButtonProps = React.PropsWithChildren<React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+    alternate: boolean;
+    blue: boolean;
+    classNameSpan: string;
+    green: boolean;
+    has_effect: boolean;
+    icon: React.ReactNode;
+    is_button_toggle: boolean;
+    is_circular: boolean;
+    is_circle: boolean;
+    is_disabled: boolean;
+    is_loading: boolean;
+    is_plus: boolean;
+    is_submit_success: boolean;
+    large: boolean;
+    medium: boolean;
+    primary: boolean;
+    primary_light: boolean;
+    renderText: (param: React.ReactNode) => React.ReactNode;
+    rounded: boolean;
+    secondary: boolean;
+    small: boolean;
+    tertiary: boolean;
+    text: string;
+    transparent: boolean;
+    type: 'button' | 'submit' | 'reset';
+    wrapperClassName: string;
+};
+
+const ButtonGroup = ({ children, className }: React.PropsWithChildren<HTMLDivElement>) => (
     <div className={classNames('dc-btn__group', className)}>{children}</div>
 );
 const Button = ({
@@ -28,7 +56,7 @@ const Button = ({
     medium,
     onClick,
     rounded,
-    tabIndex,
+    tabIndex = 0,
     text,
     wrapperClassName,
     type,
@@ -41,7 +69,7 @@ const Button = ({
     tertiary,
     renderText,
     ...props
-}) => {
+}: Partial<TButtonProps>) => {
     const classes = classNames(
         'dc-btn',
         {
@@ -71,9 +99,9 @@ const Button = ({
         <button
             id={id}
             className={classes}
-            onClick={onClick || undefined}
+            onClick={onClick}
             disabled={is_disabled}
-            tabIndex={tabIndex || '0'}
+            tabIndex={tabIndex}
             type={is_submit_success ? 'button' : type || 'submit'}
             {...props}
         >
@@ -100,40 +128,6 @@ const Button = ({
     return wrapperClassName ? wrapper : button;
 };
 
-Button.propTypes = {
-    blue: PropTypes.bool,
-    children: PropTypes.node,
-    className: PropTypes.string,
-    classNameSpan: PropTypes.string,
-    green: PropTypes.bool,
-    has_effect: PropTypes.bool,
-    icon: PropTypes.node,
-    id: PropTypes.string,
-    is_disabled: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
-    is_loading: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
-    is_circle: PropTypes.bool,
-    is_plus: PropTypes.bool,
-    is_submit_success: PropTypes.bool,
-    large: PropTypes.bool,
-    medium: PropTypes.bool,
-    onClick: PropTypes.func,
-    primary: PropTypes.bool,
-    primary_light: PropTypes.bool,
-    rounded: PropTypes.bool,
-    secondary: PropTypes.bool,
-    small: PropTypes.bool,
-    tertiary: PropTypes.bool,
-    transparent: PropTypes.bool,
-    text: PropTypes.string,
-    wrapperClassName: PropTypes.string,
-    is_button_toggle: PropTypes.bool,
-    is_circular: PropTypes.bool,
-    tabIndex: PropTypes.string,
-    type: PropTypes.string,
-    alternate: PropTypes.bool,
-    renderText: PropTypes.func,
-};
-
 Button.Group = ButtonGroup;
 
 export default Button;

packages/components/src/components/button/button_loading.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import Loading, { TLoadingProps } from '../loading/loading';
+import '../loading/loading.scss';
+
+const ButtonLoading = (
+    props: Omit<TLoadingProps, 'is_fullscreen' | 'className' | 'is_slow_loading' | 'status' | 'theme'>
+) => {
+    return <Loading {...props} is_fullscreen={false} className='initial-loader--btn' />;
+};
+
+export default ButtonLoading;

packages/components/src/components/button/index.js → packages/components/src/components/button/index.ts

@@ -1,4 +1,4 @@
-import Button from './button.jsx';
+import Button from './button';
 import './button.scss';
 
 export default Button;

packages/components/src/components/carousel/carousel.jsx

@@ -5,7 +5,7 @@ import { Swipeable } from 'react-swipeable';
 import Card from './carousel-card.jsx';
 import Nav from './carousel-nav.jsx';
 import Icon from '../icon';
-import Button from '../button/button.jsx';
+import Button from '../button/button';
 import { useInterval } from '../../hooks';
 
 const Carousel = ({

packages/components/src/components/dialog/dialog.jsx

@@ -3,8 +3,8 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
-import Button from '../button/button.jsx';
 import Icon from '../icon/icon';
+import Button from '../button/button';
 import Text from '../text';
 import { useOnClickOutside } from '../../hooks';
 

packages/components/src/components/form-cancel-button/form-cancel-button.jsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import Button from '../button/button.jsx';
+import Button from '../button/button';
 
 const FormCancelButton = ({ className, is_center, is_disabled, is_absolute, label, onCancel, ...props }) => {
     return (

packages/components/src/components/form-submit-button/form-submit-button.jsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import Button from '../button/button.jsx';
+import Button from '../button/button';
 import Text from '../text';
 
 const FormSubmitButton = ({

packages/components/src/components/loading/index.js → packages/components/src/components/loading/index.ts

@@ -1,4 +1,4 @@
-import Loading from './loading.jsx';
+import Loading from './loading';
 import './loading.scss';
 
 export default Loading;

packages/components/src/components/loading/loading.jsx → packages/components/src/components/loading/loading.tsx

@@ -1,9 +1,15 @@
-import classNames from 'classnames';
 import React from 'react';
-import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import Text from '../text/text';
 
-const Loading = ({ className, id, is_fullscreen = true, is_slow_loading, status, theme }) => {
+export type TLoadingProps = React.HTMLProps<HTMLDivElement> & {
+    is_fullscreen: boolean;
+    is_slow_loading: boolean;
+    status: string[];
+    theme: string;
+};
+
+const Loading = ({ className, id, is_fullscreen = true, is_slow_loading, status, theme }: Partial<TLoadingProps>) => {
     const theme_class = theme ? `barspinner-${theme}` : 'barspinner-light';
     return (
         <div
@@ -27,7 +33,7 @@ const Loading = ({ className, id, is_fullscreen = true, is_slow_loading, status,
                 ))}
             </div>
             {is_slow_loading &&
-                status.map((text, inx) => (
+                status?.map((text, inx) => (
                     <Text as='h3' color='prominent' size='xs' align='center' key={inx}>
                         {text}
                     </Text>
@@ -36,12 +42,4 @@ const Loading = ({ className, id, is_fullscreen = true, is_slow_loading, status,
     );
 };
 
-Loading.propTypes = {
-    className: PropTypes.string,
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    is_fullscreen: PropTypes.bool,
-    is_slow_loading: PropTypes.bool,
-    status: PropTypes.array,
-    theme: PropTypes.string,
-};
 export default Loading;

packages/components/src/components/numpad/number-button.jsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
-import Button from '../button/button.jsx';
+import Button from '../button/button';
 import Text from '../text';
 
 const NumberButton = ({ onSelect, className, number }) => (

packages/components/src/components/numpad/numpad.jsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import NumberGrid from './number-grid.jsx';
 import StepInput from './step-input.jsx';
 import Text from '../text';
-import Button from '../button/button.jsx';
+import Button from '../button/button';
 import { useLongPress } from '../../hooks';
 
 const concatenate = (number, default_value) => default_value.toString().concat(number);

packages/components/src/components/numpad/step-input.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { isCryptocurrency } from '@deriv/shared';
 import Input from '../input/input.jsx';
-import Button from '../button/button.jsx';
+import Button from '../button/button';
 
 const getDecimals = val => {
     const array_value = typeof val === 'string' ? val.split('.') : val.toString().split('.');

packages/components/src/components/popover-mobile/popover-mobile.jsx

@@ -2,8 +2,8 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { isMobile } from '@deriv/shared';
+import Button from '../button/button';
 import Modal from '../modal/modal';
-import Button from '../button/button.jsx';
 import Popover from '../popover/popover.jsx';
 import Text from '../text/text';
 import './popover-mobile.scss';

packages/components/src/components/popup/popup-overlay.jsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
-import Button from '../button/button.jsx';
 import Text from '../text/text';
+import Button from '../button/button';
 
 const PopupOverlay = ({ title, descriptions, overlay_ref, toggleOverlay, done_text }) =>
     createPortal(

packages/components/src/components/send-email-template/send-email-template.jsx

@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import { PlatformContext } from '@deriv/shared';
-import Button from '../button/button.jsx';
 import Icon from '../icon/icon';
+import Button from '../button/button';
 import Text from '../text';
 
 const SendEmailTemplate = ({

packages/components/src/components/tick-picker/tick-picker.jsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 import throttle from 'lodash.throttle';
 import { useSwipeable } from 'react-swipeable';
-import Button from '../button/button.jsx';
+import Button from '../button/button';
 import Icon from '../icon';
 import Text from '../text';