Skip to content

Commit

Permalink
Merge pull request #1324 from ant-design/5.1.0
Browse files Browse the repository at this point in the history
bump 5.1.0
  • Loading branch information
1uokun authored Feb 22, 2024
2 parents 109466c + f1374a8 commit 4bd1cfc
Show file tree
Hide file tree
Showing 142 changed files with 4,590 additions and 5,663 deletions.
1 change: 0 additions & 1 deletion .jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ const transformPackages = [
'react-native-collapsible',
'@bang88/react-native-ultimate-listview',
'@react-native-community',
'@react-native-picker/picker',
'react-native-gesture-handler'
];

Expand Down
16 changes: 16 additions & 0 deletions CHANGELOG.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,22 @@ toc: false

---

### 5.1.0
`2024-02-20`
- Refactor **Picker** & **PickerView**
- 🔥 Remove dependence `@react-native-picker/picker`
- 💄 Refactor extends by `ScrollView {snapToInterval}` to support web
- 🆕 Refactor `itemStyle` prop, make styles more flexible [#1311](https://github.com/ant-design/ant-design-mobile-rn/issues/1311) [#1316](https://github.com/ant-design/ant-design-mobile-rn/issues/1316)
- 🆕 Picker support (`visible`) new prop
- Refactor **DatePicker** & **DatePickerView**
- 💄 **Style****Base Props** extends by Picker & PickerView
- 🆕 Support (`precision` `filter` ) new props
- ⚡️ Deprecated (<del>`mode`</del>)prop; date format by [Day.js](https://day.js.org/docs/en/parse/string-format)
- ❗️Delete **ImagePicker** and remove dependence `@react-native-camera-roll/camera-roll`
- **Switch**
- fix: `checked` prop support controlled mode [#1325](https://github.com/ant-design/ant-design-mobile-rn/issues/1325)
- feat: `onChange` prop when the Promise is returned, the loading status will be displayed automatically

### 5.0.5
`2023-11-08`
- fix: Picker support `numberOfLines` property [#1311](https://github.com/ant-design/ant-design-mobile-rn/issues/1311)
Expand Down
16 changes: 16 additions & 0 deletions CHANGELOG.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,22 @@ toc: false

---

### 5.1.0
`2024-02-23`
- 重构 **Picker** & **PickerView**
- 🔥 重构开发并移除 `@react-native-picker/picker` 依赖
- 💄 基于 `ScrollView {snapToInterval}` 开发并支持`web`
- 🆕 重构 `itemStyle` 样式,显示更灵活 [#1311](https://github.com/ant-design/ant-design-mobile-rn/issues/1311) [#1316](https://github.com/ant-design/ant-design-mobile-rn/issues/1316)
- 🆕 Picker 新增 (`visible`) 属性支持
- 重构 **DatePicker** & **DatePickerView**
- 💄 **样式****基础属性** 继承 Picker & PickerView
- 🆕 新增 (`precision` `filter` ) 属性支持
- ⚡️ 废弃(<del>`mode`</del>)属性;时间格式引用[Day.js](https://day.js.org/docs/zh-CN/parse/string-format)
- ❗️删除 **ImagePicker** 并移除 `@react-native-camera-roll/camera-roll` 依赖
- **Switch**
- fix: `checked`属性支持全受控模式 [#1325](https://github.com/ant-design/ant-design-mobile-rn/issues/1325)
- feat: `onChange`属性当返回 Promise 时,会自动显示加载状态

### 5.0.5
`2023-11-08`
- fix: Picker support `numberOfLines` property [#1311](https://github.com/ant-design/ant-design-mobile-rn/issues/1311)
Expand Down
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -93,13 +93,13 @@ yarn add @ant-design/react-native
### Installing peer dependencies

```bash
npm install @react-native-camera-roll/camera-roll @react-native-picker/picker @react-native-community/segmented-control @react-native-community/slider react-native-gesture-handler
npm install @react-native-community/segmented-control @react-native-community/slider react-native-gesture-handler
```

or

```bash
yarn add @react-native-camera-roll/camera-roll @react-native-picker/picker @react-native-community/segmented-control @react-native-community/slider react-native-gesture-handler
yarn add @react-native-community/segmented-control @react-native-community/slider react-native-gesture-handler
```

> You need go to ios folder and run `pod install` (auto linking),Android will handle it by itself.
Expand Down
4 changes: 2 additions & 2 deletions README.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -93,13 +93,13 @@ yarn add @ant-design/react-native
### 安装peer依赖

```bash
npm install @react-native-camera-roll/camera-roll @react-native-picker/picker @react-native-community/segmented-control @react-native-community/slider react-native-gesture-handler
npm install @react-native-community/segmented-control @react-native-community/slider react-native-gesture-handler
```

or

```bash
yarn add @react-native-camera-roll/camera-roll @react-native-picker/picker @react-native-community/segmented-control @react-native-community/slider react-native-gesture-handler
yarn add @react-native-community/segmented-control @react-native-community/slider react-native-gesture-handler
```

> 安装完依赖后需要到 iOS 目录 `pod install`(auto linking),Android 不需要手动处理
Expand Down
1 change: 1 addition & 0 deletions components/_util/hooks/useAnimations.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export function useAnimatedTiming(): [Animated.Value, animateType] {
useNativeDriver,
}).start()
},
// @ts-ignore
[animatedValue],
)
var [animatedValue] = useAnimate({
Expand Down
5 changes: 5 additions & 0 deletions components/_util/isPromise.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export function isPromise(obj: unknown): obj is Promise<unknown> {
return (
!!obj && typeof obj === 'object' && typeof (obj as any).then === 'function'
)
}
15 changes: 15 additions & 0 deletions components/_util/with-default-props.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
const assignWith = require('lodash.assignwith')

export function mergeProps<A, B>(a: A, b: B): B & A
export function mergeProps<A, B, C>(a: A, b: B, c: C): C & B & A
export function mergeProps(...items: any[]) {
function customizer(objValue: any, srcValue: any) {
return srcValue === undefined ? objValue : srcValue
}

let ret = { ...items[0] }
for (let i = 1; i < items.length; i++) {
ret = assignWith(ret, items[i], customizer)
}
return ret
}
6 changes: 6 additions & 0 deletions components/carousel/__tests__/__snapshots__/demo.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ exports[`renders ./components/carousel/demo/basic.tsx correctly 1`] = `
automaticallyAdjustContentInsets={false}
autoplay={true}
autoplayInterval={3000}
collapsable={false}
contentOffset={
Object {
"x": 0,
Expand All @@ -39,6 +40,8 @@ exports[`renders ./components/carousel/demo/basic.tsx correctly 1`] = `
dots={true}
horizontal={true}
infinite={true}
onGestureHandlerEvent={[Function]}
onGestureHandlerStateChange={[Function]}
onMomentumScrollEnd={[Function]}
onScrollBeginDrag={[Function]}
onScrollEndDrag={[Function]}
Expand Down Expand Up @@ -492,6 +495,7 @@ exports[`renders ./components/carousel/demo/basic.tsx correctly 1`] = `
automaticallyAdjustContentInsets={false}
autoplay={true}
autoplayInterval={3000}
collapsable={false}
contentOffset={
Object {
"x": 0,
Expand All @@ -504,6 +508,8 @@ exports[`renders ./components/carousel/demo/basic.tsx correctly 1`] = `
dots={true}
horizontal={false}
infinite={true}
onGestureHandlerEvent={[Function]}
onGestureHandlerStateChange={[Function]}
onMomentumScrollEnd={[Function]}
onScrollBeginDrag={[Function]}
onScrollEndDrag={[Function]}
Expand Down
4 changes: 2 additions & 2 deletions components/carousel/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ import {
NativeScrollEvent,
NativeSyntheticEvent,
Platform,
ScrollView,
ScrollViewProps,
StyleProp,
View,
ViewStyle,
} from 'react-native'
import { WithTheme, WithThemeStyles } from '../style'
import { ScrollView } from 'react-native-gesture-handler'
import devWarning from '../_util/devWarning'
import { WithTheme, WithThemeStyles } from '../style'
import CarouselStyles, { CarouselStyle } from './style/index'

export interface CarouselPropsType
Expand Down
42 changes: 37 additions & 5 deletions components/date-picker-view/PropsType.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,39 @@
import { DatePickerPropsType } from '../date-picker/PropsType'
import type { ReactNode } from 'react'
import { DatePickerFilter, Precision } from '../date-picker/date-picker-utils'
import { PickerDate } from '../date-picker/util'
import {
PickerValueExtend,
PickerViewPropsType,
} from '../picker-view/PropsType'

export interface DatePickerProps extends DatePickerPropsType {
onScrollChange?: (newValue: any, vals: any, index: number) => void
triggerTypes?: string
styles?: any
export type RenderLabel = (type: Precision | 'now', data: number) => ReactNode

export interface DatePickerViewPropsType
extends Pick<
PickerViewPropsType,
| 'style'
| 'itemStyle'
| 'numberOfLines'
| 'renderMaskTop'
| 'renderMaskBottom'
> {
value?: PickerDate
defaultValue?: PickerDate
mode?: Precision | 'date'
minDate?: Date
maxDate?: Date
onChange?: (value: Date, extend?: PickerValueExtend) => void
onValueChange?: (vals: any, index: number) => void
precision?: Precision
renderLabel?: RenderLabel
locale?: {
year?: string
month?: string
day?: string
hour?: string
minute?: string
am?: string
pm?: string
}
filter?: DatePickerFilter
}
133 changes: 98 additions & 35 deletions components/date-picker-view/date-picker-view.tsx
Original file line number Diff line number Diff line change
@@ -1,39 +1,102 @@
import React from 'react'
import RCDatePicker from '../date-picker/datepicker'
import useMergedState from 'rc-util/lib/hooks/useMergedState'
import React, {
FunctionComponent,
memo,
useCallback,
useContext,
useMemo,
} from 'react'

import { getComponentLocale } from '../_util/getLocale'
import { DatePickerProps } from './PropsType'
import { mergeProps } from '../_util/with-default-props'
import { getValueExtend, usePickerValue } from '../date-picker/columns-extend'
import { generateDatePickerColumns } from '../date-picker/date-picker-utils'
import { LocaleContext } from '../locale-provider'
export default class DatePickerView extends React.Component<
DatePickerProps,
any
> {
static defaultProps = {
mode: 'datetime',
// extra: '请选择',
minuteStep: 1,
use12Hours: false,
}

static contextType = LocaleContext

render() {
// tslint:disable-next-line:no-this-assignment
const { props, context } = this
const locale = getComponentLocale(props, context, 'DatePickerView', () =>
require('./locale/zh_CN'),
)
import RMCPickerView from '../picker-view/picker-view'
import { PickerViewStyle } from '../picker-view/style'
import { WithThemeStyles } from '../style'
import { DatePickerViewPropsType } from './PropsType'
import useRenderLabel from './useRenderLabel'

// DatePicker use `defaultDate`, maybe because there are PopupDatePicker inside? @yiminghe
// Here Use `date` instead of `defaultDate`, make it controlled fully.
return (
<RCDatePicker
{...props}
locale={locale}
date={props.value}
onDateChange={props.onChange}
onValueChange={props.onValueChange}
onScrollChange={props.onScrollChange}
/>
)
}
export interface DatePickerViewProps
extends DatePickerViewPropsType,
WithThemeStyles<PickerViewStyle> {}

const defaultProps = {
minDate: new Date('2000-1-1'),
maxDate: new Date('2030-1-1'),
mode: 'date',
}

const DatePickerView: FunctionComponent<DatePickerViewProps> = memo((props) => {
const p = mergeProps(defaultProps, props)
const {
value,
defaultValue,
minDate,
maxDate,
mode,
precision,
renderLabel,
filter,
...restProps
} = p

const _precision = precision || (mode === 'date' ? 'day' : mode) || 'day'

const [innerValue, setInnerValue] = useMergedState<Date>(new Date(), {
value: value,
defaultValue: defaultValue,
})

const _locale = getComponentLocale(
p,
useContext(LocaleContext),
'DatePickerView',
() => require('./locale/zh_CN'),
)

const mergedRenderLabel = useRenderLabel(renderLabel, _locale)

const pickerValue = usePickerValue(innerValue, minDate, maxDate, _precision)

const columns = useMemo(() => {
return generateDatePickerColumns(
pickerValue,
minDate,
maxDate,
_precision,
mergedRenderLabel,
filter,
false,
)
}, [maxDate, mergedRenderLabel, minDate, _precision, filter, pickerValue])

const handleSelect = useCallback(
(val: string, i: number) => {
const pvalue = pickerValue.slice(0)
pvalue[i] = val
const { dateValue, extend } = getValueExtend(columns, pvalue, _precision)
setInnerValue(dateValue)
p.onChange?.(dateValue, {
items: extend,
columns,
})
p.onValueChange?.(dateValue, i)
},
[columns, _precision, p, pickerValue, setInnerValue],
)

return (
<RMCPickerView
{...restProps}
value={pickerValue}
columns={columns}
handleSelect={handleSelect}
/>
)
})

DatePickerView.displayName = 'Picker'

export default DatePickerView
Loading

0 comments on commit 4bd1cfc

Please sign in to comment.