chore(ts-exercise): buttons comp

src/components/Buttons/ArrowButton.js → src/components/Buttons/ArrowButton.tsx

@@ -5,26 +5,35 @@
  */
 
 import React, { useRef, useState, useEffect } from 'react'
-import T from 'prop-types'
-import { values } from 'ramda'
 
+import type { TSIZE } from '@/spec'
 import { ICON } from '@/config'
 import { SIZE } from '@/constant'
 import { buildLog } from '@/utils'
 
 import { Wrapper, Text, LeftIcon, RightIcon } from './styles/arrow_button'
 
 /* eslint-disable-next-line */
-const log = buildLog('c:Buttons:index')
+const log = buildLog('c:Buttons:ArrowButton')
 
-const ArrowButton = ({
-  children,
-  onClick,
-  size,
-  direction,
-  dimWhenIdle,
-  arrowStyle,
-  disabled,
+type TProps = {
+  children?: React.ReactNode
+  onClick?: () => void
+  size?: TSIZE
+  direction: 'left' | 'right'
+  dimWhenIdle?: boolean
+  disabled?: boolean
+  arrowStyle?: string
+}
+
+const ArrowButton: React.FC<TProps> = ({
+  children = '下一步',
+  onClick = log,
+  size = SIZE.SMALL,
+  direction = 'right',
+  dimWhenIdle = false,
+  arrowStyle = 'default',
+  disabled = false,
 }) => {
   const iconSrc =
     arrowStyle === 'default'
@@ -88,24 +97,4 @@ const ArrowButton = ({
   )
 }
 
-ArrowButton.propTypes = {
-  children: T.oneOfType([T.string, T.node]),
-  arrowStyle: T.oneOf(['default', 'simple']),
-  size: T.oneOf(values(SIZE)),
-  direction: T.oneOf(['left', 'right']),
-  dimWhenIdle: T.bool,
-  onClick: T.func,
-  disabled: T.bool,
-}
-
-ArrowButton.defaultProps = {
-  children: '下一步',
-  arrowStyle: 'default',
-  size: SIZE.SMALL,
-  direction: 'right',
-  dimWhenIdle: false,
-  onClick: log,
-  disabled: false,
-}
-
 export default React.memo(ArrowButton)

src/components/Buttons/ArrowLink.js → src/components/Buttons/ArrowLink.tsx

@@ -5,26 +5,35 @@
  */
 
 import React from 'react'
-import T from 'prop-types'
-import { values } from 'ramda'
 
+import type { TSIZE } from '@/spec'
 import { ICON_CMD } from '@/config'
 import { SIZE } from '@/constant'
 import { buildLog } from '@/utils'
 
 import { Wrapper, Text, RightIcon } from './styles/arrow_link'
 
 /* eslint-disable-next-line */
-const log = buildLog('c:Buttons:index')
+const log = buildLog('c:Buttons:ArrowLink')
+
+type TProps = {
+  className: string
+  children?: React.ReactNode
+  size?: TSIZE
+  href: string
+  target: '_blank' | ''
+  color?: string
+  hoverColor?: string
+}
 
-const ArrowLink = ({
-  className,
-  children,
-  size,
-  href,
-  target,
-  color,
-  hoverColor,
+const ArrowLink: React.FC<TProps> = ({
+  className = '',
+  children = '下一步',
+  size = SIZE.SMALL,
+  href = '',
+  target = '_blank',
+  color = '',
+  hoverColor = '',
 }) => {
   return (
     <Wrapper
@@ -46,24 +55,4 @@ const ArrowLink = ({
   )
 }
 
-ArrowLink.propTypes = {
-  className: T.string,
-  children: T.oneOfType([T.string, T.node]),
-  size: T.oneOf(values(SIZE)),
-  href: T.string,
-  color: T.string,
-  hoverColor: T.string,
-  target: T.oneOf(['_blank', '']),
-}
-
-ArrowLink.defaultProps = {
-  className: '',
-  children: '下一步',
-  size: SIZE.SMALL,
-  href: '',
-  color: '',
-  hoverColor: '',
-  target: '_blank',
-}
-
 export default React.memo(ArrowLink)

src/components/Buttons/Button.js → src/components/Buttons/Button.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react'
-import T from 'prop-types'
 
+import type { TSIZE_TSM } from '@/spec'
 import { SIZE } from '@/constant'
+import { buildLog } from '@/utils'
 
 import {
   Wrapper,
@@ -12,21 +13,37 @@ import {
   LoadingText,
 } from './styles/button'
 
-const clearTimerIfNeed = (timerId) => {
+/* eslint-disable-next-line */
+const log = buildLog('c:Buttons:Button')
+
+const clearTimerIfNeed = (timerId: number): void => {
   if (timerId) clearTimeout(timerId)
 }
 
-const Button = ({
-  children,
-  ghost,
-  type,
-  onClick,
-  size,
-  className,
-  loading,
-  loadingText,
-  noBorder,
-  disabled,
+type TProps = {
+  children?: React.ReactNode
+  className?: string
+  ghost?: boolean
+  type: 'primary' | 'red' | 'ghost'
+  size?: TSIZE_TSM
+  onClick?: () => void
+  loading?: boolean | null
+  loadingText?: string
+  noBorder?: boolean
+  disabled?: boolean
+}
+
+const Button: React.FC<TProps> = ({
+  children = 'button',
+  ghost = false,
+  type = 'primary',
+  onClick = log,
+  size = SIZE.MEDIUM,
+  className = '',
+  loading = null,
+  loadingText = '发布中',
+  noBorder = false,
+  disabled = false,
 }) => {
   const [loadingWidth, setLoadingWidth] = useState(0) // 0 || 20 || 65 || 90 || 100
 
@@ -97,31 +114,4 @@ const Button = ({
   }
 }
 
-Button.propTypes = {
-  children: T.oneOfType([T.string, T.node]),
-  ghost: T.bool,
-  type: T.oneOf(['primary', 'red', 'ghost']),
-  size: T.oneOf([SIZE.TINY, SIZE.SMALL, SIZE.MEDIUM]),
-  onClick: T.func,
-  className: T.string,
-  loading: T.oneOfType([T.bool, T.instanceOf(null)]),
-  loadingText: T.string,
-  noBorder: T.bool,
-  disabled: T.bool,
-}
-
-Button.defaultProps = {
-  children: 'Button',
-  ghost: false,
-  type: 'primary',
-  size: SIZE.MEDIUM,
-  // eslint-disable-next-line no-console
-  onClick: console.log,
-  className: '',
-  loading: null,
-  loadingText: '发布中..',
-  noBorder: false,
-  disabled: false,
-}
-
 export default React.memo(Button)

src/components/Buttons/OrButton/HorizontalButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import type { TSIZE } from '@/spec'
+import type { TProps as TButtonProps } from './index'
 import { SIZE } from '@/constant'
 
 import {
@@ -10,21 +10,22 @@ import {
   RightButton,
 } from '../styles/or_button/horizontal_button'
 
-type TProps = {
-  activeKey: string
-  size?: TSIZE
-  onClick: (key: string) => void
-  group: {
-    key: string
-    title: string
-  }[]
-}
+type TProps = Omit<TButtonProps, 'direction'>
 
 const HorizontalButton: React.FC<TProps> = ({
   onClick,
-  size = SIZE.SMALL as TSIZE,
+  size = SIZE.SMALL,
   activeKey,
-  group,
+  group = [
+    {
+      key: 'hello',
+      title: 'hello',
+    },
+    {
+      key: 'cps',
+      title: 'cps',
+    },
+  ],
 }) => {
   return (
     <Wrapper size={size}>

src/components/Buttons/OrButton/VerticalButton.js → src/components/Buttons/OrButton/VerticalButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import T from 'prop-types'
 
+import type { TProps as TButtonProps } from './index'
 import { SIZE } from '@/constant'
 
 import {
@@ -10,9 +10,25 @@ import {
   BottomButton,
 } from '../styles/or_button/vertical_button'
 
-const VerticalButton = ({ onClick, size, activeKey, group }) => {
+type TProps = Omit<TButtonProps, 'direction'>
+
+const VerticalButton: React.FC<TProps> = ({
+  onClick,
+  size = SIZE.SMALL,
+  activeKey,
+  group = [
+    {
+      key: 'hello',
+      title: 'hello',
+    },
+    {
+      key: 'cps',
+      title: 'cps',
+    },
+  ],
+}) => {
   return (
-    <Wrapper size={size}>
+    <Wrapper>
       <UpButton
         size={size}
         active={group[0].key === activeKey}
@@ -32,33 +48,4 @@ const VerticalButton = ({ onClick, size, activeKey, group }) => {
   )
 }
 
-VerticalButton.propTypes = {
-  size: T.oneOf([SIZE.MEDIUM, SIZE.SMALL]),
-  onClick: T.func,
-  activeKey: T.string,
-  group: T.arrayOf(
-    T.shape({
-      key: T.string,
-      title: T.string,
-    }),
-  ),
-}
-
-VerticalButton.defaultProps = {
-  size: SIZE.MEDIUM,
-  // eslint-disable-next-line no-console
-  onClick: console.log,
-  activeKey: 'hello',
-  group: [
-    {
-      key: 'hello',
-      title: 'hello',
-    },
-    {
-      key: 'cps',
-      title: 'cps',
-    },
-  ],
-}
-
 export default VerticalButton