Skip to content

Commit

Permalink
refactor: props -> mergedProps, p -> props
Browse files Browse the repository at this point in the history
  • Loading branch information
@guoyunhe
guoyunhe committed Apr 17, 2024
1 parent 7c50e00 commit fe9bde4
Show file tree
Hide file tree
Showing 30 changed files with 746 additions and 686 deletions.
57 changes: 29 additions & 28 deletions src/components/button/button.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
import classNames from 'classnames'
import type {
ReactNode,
ButtonHTMLAttributes,
DetailedHTMLProps,
MouseEventHandler,
ReactNode,
} from 'react'
import classNames from 'classnames'
import DotLoading from '../dot-loading'
import { mergeProps } from '../../utils/with-default-props'
import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
import { NativeProps, withNativeProps } from '../../utils/native-props'
import { isPromise } from '../../utils/validate'
import { mergeProps } from '../../utils/with-default-props'
import DotLoading from '../dot-loading'

const classPrefix = `adm-button`

Expand Down Expand Up @@ -61,12 +61,13 @@ const defaultProps: ButtonProps = {
size: 'middle',
}

export const Button = forwardRef<ButtonRef, ButtonProps>((p, ref) => {
const props = mergeProps(defaultProps, p)
export const Button = forwardRef<ButtonRef, ButtonProps>((props, ref) => {
const mergedProps = mergeProps(defaultProps, props)
const [innerLoading, setInnerLoading] = useState(false)
const nativeButtonRef = useRef<HTMLButtonElement>(null)
const loading = props.loading === 'auto' ? innerLoading : props.loading
const disabled = props.disabled || loading
const loading =
mergedProps.loading === 'auto' ? innerLoading : mergedProps.loading
const disabled = mergedProps.disabled || loading

useImperativeHandle(ref, () => ({
get nativeElement() {
Expand All @@ -75,9 +76,9 @@ export const Button = forwardRef<ButtonRef, ButtonProps>((p, ref) => {
}))

const handleClick: MouseEventHandler<HTMLButtonElement> = async e => {
if (!props.onClick) return
if (!mergedProps.onClick) return

const promise = props.onClick(e)
const promise = mergedProps.onClick(e)

if (isPromise(promise)) {
try {
Expand All @@ -92,39 +93,39 @@ export const Button = forwardRef<ButtonRef, ButtonProps>((p, ref) => {
}

return withNativeProps(
props,
mergedProps,
<button
ref={nativeButtonRef}
type={props.type}
type={mergedProps.type}
onClick={handleClick}
className={classNames(
classPrefix,
{
[`${classPrefix}-${props.color}`]: props.color,
[`${classPrefix}-block`]: props.block,
[`${classPrefix}-${mergedProps.color}`]: mergedProps.color,
[`${classPrefix}-block`]: mergedProps.block,
[`${classPrefix}-disabled`]: disabled,
[`${classPrefix}-fill-outline`]: props.fill === 'outline',
[`${classPrefix}-fill-none`]: props.fill === 'none',
[`${classPrefix}-mini`]: props.size === 'mini',
[`${classPrefix}-small`]: props.size === 'small',
[`${classPrefix}-large`]: props.size === 'large',
[`${classPrefix}-fill-outline`]: mergedProps.fill === 'outline',
[`${classPrefix}-fill-none`]: mergedProps.fill === 'none',
[`${classPrefix}-mini`]: mergedProps.size === 'mini',
[`${classPrefix}-small`]: mergedProps.size === 'small',
[`${classPrefix}-large`]: mergedProps.size === 'large',
[`${classPrefix}-loading`]: loading,
},
`${classPrefix}-shape-${props.shape}`
`${classPrefix}-shape-${mergedProps.shape}`
)}
disabled={disabled}
onMouseDown={props.onMouseDown}
onMouseUp={props.onMouseUp}
onTouchStart={props.onTouchStart}
onTouchEnd={props.onTouchEnd}
onMouseDown={mergedProps.onMouseDown}
onMouseUp={mergedProps.onMouseUp}
onTouchStart={mergedProps.onTouchStart}
onTouchEnd={mergedProps.onTouchEnd}
>
{loading ? (
<div className={`${classPrefix}-loading-wrapper`}>
{props.loadingIcon}
{props.loadingText}
{mergedProps.loadingIcon}
{mergedProps.loadingText}
</div>
) : (
<span>{props.children}</span>
<span>{mergedProps.children}</span>
)}
</button>
)
Expand Down
79 changes: 41 additions & 38 deletions src/components/calendar-picker-view/calendar-picker-view.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
import classNames from 'classnames'
import dayjs from 'dayjs'
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
import isoWeek from 'dayjs/plugin/isoWeek'
import type { ReactNode } from 'react'
import React, {
forwardRef,
useState,
useImperativeHandle,
useMemo,
useState,
} from 'react'
import type { ReactNode } from 'react'
import { NativeProps, withNativeProps } from '../../utils/native-props'
import dayjs from 'dayjs'
import classNames from 'classnames'
import { usePropsValue } from '../../utils/use-props-value'
import { mergeProps } from '../../utils/with-default-props'
import { useConfig } from '../config-provider'
import isoWeek from 'dayjs/plugin/isoWeek'
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
import { usePropsValue } from '../../utils/use-props-value'
import {
convertValueToRange,
convertPageToDayjs,
DateRange,
Page,
convertPageToDayjs,
convertValueToRange,
} from './convert'

dayjs.extend(isoWeek)
Expand Down Expand Up @@ -75,27 +75,30 @@ const defaultProps = {
export const CalendarPickerView = forwardRef<
CalendarPickerViewRef,
CalendarPickerViewProps
>((p, ref) => {
>((props, ref) => {
const today = dayjs()
const props = mergeProps(defaultProps, p)
const mergedProps = mergeProps(defaultProps, props)
const { locale } = useConfig()
const markItems = [...locale.Calendar.markItems]
if (props.weekStartsOn === 'Sunday') {
if (mergedProps.weekStartsOn === 'Sunday') {
const item = markItems.pop()
if (item) markItems.unshift(item)
}

const [dateRange, setDateRange] = usePropsValue<DateRange>({
value:
props.value === undefined
mergedProps.value === undefined
? undefined
: convertValueToRange(props.selectionMode, props.value),
defaultValue: convertValueToRange(props.selectionMode, props.defaultValue),
: convertValueToRange(mergedProps.selectionMode, mergedProps.value),
defaultValue: convertValueToRange(
mergedProps.selectionMode,
mergedProps.defaultValue
),
onChange: v => {
if (props.selectionMode === 'single') {
props.onChange?.(v ? v[0] : null)
} else if (props.selectionMode === 'range') {
props.onChange?.(v)
if (mergedProps.selectionMode === 'single') {
mergedProps.onChange?.(v ? v[0] : null)
} else if (mergedProps.selectionMode === 'range') {
mergedProps.onChange?.(v)
}
},
})
Expand Down Expand Up @@ -128,18 +131,18 @@ export const CalendarPickerView = forwardRef<
const header = (
<div className={`${classPrefix}-header`}>
<div className={`${classPrefix}-title`}>
{props.title ?? locale.Calendar.title}
{mergedProps.title ?? locale.Calendar.title}
</div>
</div>
)

const maxDay = useMemo(
() => (props.max ? dayjs(props.max) : current.add(6, 'month')),
[props.max, current]
() => (mergedProps.max ? dayjs(mergedProps.max) : current.add(6, 'month')),
[mergedProps.max, current]
)
const minDay = useMemo(
() => (props.min ? dayjs(props.min) : current),
[props.min, current]
() => (mergedProps.min ? dayjs(mergedProps.min) : current),
[mergedProps.min, current]
)

function renderBody() {
Expand Down Expand Up @@ -167,7 +170,7 @@ export const CalendarPickerView = forwardRef<
<div className={`${classPrefix}-cells`}>
{/* 空格填充 */}
{Array(
props.weekStartsOn === 'Monday'
mergedProps.weekStartsOn === 'Monday'
? monthIterator.date(1).isoWeekday() - 1
: monthIterator.date(1).isoWeekday()
)
Expand Down Expand Up @@ -204,19 +207,19 @@ export const CalendarPickerView = forwardRef<
!isEnd
}
}
const disabled = props.shouldDisableDate
? props.shouldDisableDate(d.toDate())
const disabled = mergedProps.shouldDisableDate
? mergedProps.shouldDisableDate(d.toDate())
: (maxDay && d.isAfter(maxDay, 'day')) ||
(minDay && d.isBefore(minDay, 'day'))

const renderTop = () => {
const top = props.renderTop?.(d.toDate())
const top = mergedProps.renderTop?.(d.toDate())

if (top) {
return top
}

if (props.selectionMode === 'range') {
if (mergedProps.selectionMode === 'range') {
if (isBegin) {
return locale.Calendar.start
}
Expand Down Expand Up @@ -244,22 +247,22 @@ export const CalendarPickerView = forwardRef<
[`${classPrefix}-cell-disabled`]: !!disabled,
})}
onClick={() => {
if (!props.selectionMode) return
if (!mergedProps.selectionMode) return
if (disabled) return
const date = d.toDate()
function shouldClear() {
if (!props.allowClear) return false
if (!mergedProps.allowClear) return false
if (!dateRange) return false
const [begin, end] = dateRange
return d.isSame(begin, 'date') && d.isSame(end, 'day')
}
if (props.selectionMode === 'single') {
if (props.allowClear && shouldClear()) {
if (mergedProps.selectionMode === 'single') {
if (mergedProps.allowClear && shouldClear()) {
setDateRange(null)
return
}
setDateRange([date, date])
} else if (props.selectionMode === 'range') {
} else if (mergedProps.selectionMode === 'range') {
if (!dateRange) {
setDateRange([date, date])
setIntermediate(true)
Expand Down Expand Up @@ -287,12 +290,12 @@ export const CalendarPickerView = forwardRef<
{renderTop()}
</div>
<div className={`${classPrefix}-cell-date`}>
{props.renderDate
? props.renderDate(d.toDate())
{mergedProps.renderDate
? mergedProps.renderDate(d.toDate())
: d.date()}
</div>
<div className={`${classPrefix}-cell-bottom`}>
{props.renderBottom?.(d.toDate())}
{mergedProps.renderBottom?.(d.toDate())}
</div>
</div>
)
Expand All @@ -319,7 +322,7 @@ export const CalendarPickerView = forwardRef<
)

return withNativeProps(
props,
mergedProps,
<div className={classPrefix}>
{header}
{mark}
Expand Down
26 changes: 13 additions & 13 deletions src/components/calendar-picker/calendar-picker.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import classNames from 'classnames'
import React, { forwardRef, useRef } from 'react'
import { withNativeProps } from '../../utils/native-props'
import classNames from 'classnames'
import Button from '../button'
import Divider from '../divider'
import Popup from '../popup'
import { type GetContainer } from '../../utils/render-to-container'
import { mergeProps } from '../../utils/with-default-props'
import { useConfig } from '../config-provider'
import Button from '../button'
import CalendarPickerView, {
CalendarPickerViewProps,
CalendarPickerViewRef,
} from '../calendar-picker-view'
import { useConfig } from '../config-provider'
import Divider from '../divider'
import Popup from '../popup'

const classPrefix = 'adm-calendar-picker'

Expand Down Expand Up @@ -53,8 +53,8 @@ const defaultProps = {
export const CalendarPicker = forwardRef<
CalendarPickerRef,
CalendarPickerProps
>((p, ref) => {
const props = mergeProps(defaultProps, p)
>((props, ref) => {
const mergedProps = mergeProps(defaultProps, props)
const { locale } = useConfig()
const calendarRef = (ref ??
useRef<CalendarPickerRef>(null)) as React.RefObject<CalendarPickerRef>
Expand All @@ -72,7 +72,7 @@ export const CalendarPicker = forwardRef<
onMaskClick,
getContainer,
...calendarViewProps
} = props
} = mergedProps

const footer = (
<div className={`${classPrefix}-footer`}>
Expand All @@ -83,10 +83,10 @@ export const CalendarPicker = forwardRef<
onClick={() => {
const dateRange = calendarRef.current?.getDateRange() ?? null

if (props.selectionMode === 'single') {
props.onConfirm?.(dateRange ? dateRange[0] : null)
} else if (props.selectionMode === 'range') {
props.onConfirm?.(dateRange)
if (mergedProps.selectionMode === 'single') {
mergedProps.onConfirm?.(dateRange ? dateRange[0] : null)
} else if (mergedProps.selectionMode === 'range') {
mergedProps.onConfirm?.(dateRange)
}
onClose?.()
}}
Expand All @@ -98,7 +98,7 @@ export const CalendarPicker = forwardRef<
)

return withNativeProps(
props,
mergedProps,
<div className={classPrefix}>
<Popup
visible={visible}
Expand Down
Loading

0 comments on commit fe9bde4

Please sign in to comment.