diff --git a/src/components/Buttons/ArrowButton.js b/src/components/Buttons/ArrowButton.tsx similarity index 73% rename from src/components/Buttons/ArrowButton.js rename to src/components/Buttons/ArrowButton.tsx index 47205b75e..316e81bdc 100755 --- a/src/components/Buttons/ArrowButton.js +++ b/src/components/Buttons/ArrowButton.tsx @@ -5,9 +5,8 @@ */ 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' @@ -15,16 +14,26 @@ 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 = ({ + 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) diff --git a/src/components/Buttons/ArrowLink.js b/src/components/Buttons/ArrowLink.tsx similarity index 55% rename from src/components/Buttons/ArrowLink.js rename to src/components/Buttons/ArrowLink.tsx index 0e99c8534..374d85255 100644 --- a/src/components/Buttons/ArrowLink.js +++ b/src/components/Buttons/ArrowLink.tsx @@ -5,9 +5,8 @@ */ 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' @@ -15,16 +14,26 @@ 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 = ({ + className = '', + children = '下一步', + size = SIZE.SMALL, + href = '', + target = '_blank', + color = '', + hoverColor = '', }) => { return ( { +/* 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 = ({ + 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) diff --git a/src/components/Buttons/OrButton/HorizontalButton.tsx b/src/components/Buttons/OrButton/HorizontalButton.tsx index da65a3496..8ae548401 100644 --- a/src/components/Buttons/OrButton/HorizontalButton.tsx +++ b/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 const HorizontalButton: React.FC = ({ onClick, - size = SIZE.SMALL as TSIZE, + size = SIZE.SMALL, activeKey, - group, + group = [ + { + key: 'hello', + title: 'hello', + }, + { + key: 'cps', + title: 'cps', + }, + ], }) => { return ( diff --git a/src/components/Buttons/OrButton/VerticalButton.js b/src/components/Buttons/OrButton/VerticalButton.tsx similarity index 60% rename from src/components/Buttons/OrButton/VerticalButton.js rename to src/components/Buttons/OrButton/VerticalButton.tsx index 04033d2bc..5fd802a2d 100644 --- a/src/components/Buttons/OrButton/VerticalButton.js +++ b/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 + +const VerticalButton: React.FC = ({ + onClick, + size = SIZE.SMALL, + activeKey, + group = [ + { + key: 'hello', + title: 'hello', + }, + { + key: 'cps', + title: 'cps', + }, + ], +}) => { return ( - + { ) } -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 diff --git a/src/components/Buttons/OrButton/index.js b/src/components/Buttons/OrButton/index.js deleted file mode 100644 index ebe37e799..000000000 --- a/src/components/Buttons/OrButton/index.js +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react' -import T from 'prop-types' - -import { SIZE } from '@/constant' - -import HorizontalButton from './HorizontalButton' -import VerticalButton from './VerticalButton' - -const OrButton = ({ direction, ...restProps }) => { - return direction === 'row' ? ( - - ) : ( - - ) -} - -OrButton.propTypes = { - // children: T.oneOfType(T.string, T.node), - size: T.oneOf([SIZE.MEDIUM, SIZE.SMALL]), - onClick: T.func, - direction: T.oneOf(['row', 'column']), - - activeKey: T.string, - group: T.arrayOf( - T.shape({ - key: T.string, - title: T.string, - }), - ), -} - -OrButton.defaultProps = { - // children: 'Button', - size: SIZE.MEDIUM, - // eslint-disable-next-line no-console - onClick: console.log, - direction: 'row', - - activeKey: 'hello', - group: [ - { - key: 'hello', - title: 'hello', - }, - { - key: 'cps', - title: 'cps', - }, - ], -} - -export default OrButton diff --git a/src/components/Buttons/OrButton/index.tsx b/src/components/Buttons/OrButton/index.tsx new file mode 100644 index 000000000..20872cf6c --- /dev/null +++ b/src/components/Buttons/OrButton/index.tsx @@ -0,0 +1,28 @@ +import React from 'react' + +import type { TSIZE_SM } from '@/spec' + +import HorizontalButton from './HorizontalButton' +import VerticalButton from './VerticalButton' + +export type TProps = { + direction: 'row' | 'column' + size?: TSIZE_SM + activeKey: string + onClick: (key: string) => void + group: { + key: string + title: string + }[] + children: React.ReactNode +} + +const OrButton: React.FC = ({ direction, ...restProps }) => { + return direction === 'row' ? ( + + ) : ( + + ) +} + +export default OrButton diff --git a/src/components/Buttons/index.js b/src/components/Buttons/index.tsx similarity index 100% rename from src/components/Buttons/index.js rename to src/components/Buttons/index.tsx diff --git a/src/components/CustomScroller/HorizontalScroller.tsx b/src/components/CustomScroller/HorizontalScroller.tsx index f7f90a188..2c57cc713 100755 --- a/src/components/CustomScroller/HorizontalScroller.tsx +++ b/src/components/CustomScroller/HorizontalScroller.tsx @@ -7,7 +7,7 @@ import React, { useState, useRef, useCallback } from 'react' import { useTheme } from 'styled-components' import { Waypoint } from 'react-waypoint' -import type { TSIZE_SML, TThemeMap } from '@/spec' +import type { TThemeMap } from '@/spec' import { buildLog } from '@/utils' import { SIZE } from '@/constant' diff --git a/src/spec/comp.ts b/src/spec/comp.ts index 361a280b0..6fb37bb37 100644 --- a/src/spec/comp.ts +++ b/src/spec/comp.ts @@ -3,7 +3,7 @@ import { TSIZE } from './size' // button export type TButton = { size: TSIZE - active: boolean + active?: boolean ghost?: boolean disabled?: boolean noBorder?: boolean diff --git a/src/spec/index.ts b/src/spec/index.ts index f6393a68d..b09cc492e 100644 --- a/src/spec/index.ts +++ b/src/spec/index.ts @@ -23,6 +23,7 @@ export type { TSEO, TLink, TPlatform, + Nullable, } from './utils' export type TRoute = { @@ -34,9 +35,6 @@ export type TRoute = { export type TRootStore = RootStoreType -// c# like -export type Nullable = T | null - export type TCommunity = { id: string title: string diff --git a/src/spec/utils.ts b/src/spec/utils.ts index 3bab10c8c..709dcba15 100644 --- a/src/spec/utils.ts +++ b/src/spec/utils.ts @@ -1,3 +1,6 @@ +// c# like +export type Nullable = T | null + export type TTestable = { testid: string }