From a5e80386f03d4278631dd2dbcd72b4e18f05cb00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E8=8B=B1=E6=9D=B0?= <13487079308@163.com> Date: Mon, 18 Sep 2023 14:54:52 +0800 Subject: [PATCH 01/32] =?UTF-8?q?refactor(custom):=20=E9=87=8D=E6=9E=84tab?= =?UTF-8?q?le=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-native/src/index.ts | 2 +- packages/react-native/src/table/Cell.tsx | 40 ++++++ packages/react-native/src/table/Head.tsx | 54 ++++++++ packages/react-native/src/table/Rows.tsx | 42 ++++++ packages/react-native/src/table/index.tsx | 134 ++++++------------- packages/react-native/src/table/type.ts | 52 +++++++ packages/react-native/src/table/useTable.ts | 26 ++++ packages/react-native/src/table/useTable.tsx | 121 ----------------- packages/react-native/src/table/utils.ts | 22 +++ 9 files changed, 281 insertions(+), 212 deletions(-) create mode 100644 packages/react-native/src/table/Cell.tsx create mode 100644 packages/react-native/src/table/Head.tsx create mode 100644 packages/react-native/src/table/Rows.tsx create mode 100644 packages/react-native/src/table/type.ts create mode 100644 packages/react-native/src/table/useTable.ts delete mode 100644 packages/react-native/src/table/useTable.tsx create mode 100644 packages/react-native/src/table/utils.ts diff --git a/packages/react-native/src/index.ts b/packages/react-native/src/index.ts index e70ee5152e..0d221cd5b1 100644 --- a/packages/react-native/src/index.ts +++ b/packages/react-native/src/index.ts @@ -50,7 +50,7 @@ import { default as Stepper } from './stepper'; import { default as SvgIcon } from './svg-icon'; import { default as SwipeRow } from './swipe-row'; import { default as Switch } from './switch'; -import { default as Table } from './table'; +import { default as Table } from './table/index1'; import { default as Tag } from './tag'; import { default as Text } from './text'; import type { Theme } from './theme'; diff --git a/packages/react-native/src/table/Cell.tsx b/packages/react-native/src/table/Cell.tsx new file mode 100644 index 0000000000..d8996eede6 --- /dev/null +++ b/packages/react-native/src/table/Cell.tsx @@ -0,0 +1,40 @@ +import React, { FC } from 'react'; +import { StyleProp, ViewStyle } from 'react-native'; + +import Box from '../box'; +import Text from '../text'; +import { ColumnProps } from './type'; + +interface CellProps { + data: { [key: string]: string }; + column: ColumnProps; + style?: StyleProp; +} + +export const Cell: FC = ({ data, column, style }) => { + return ( + + {column.render ? ( + + {column.render(data[column.dataIndex], column)} + + ) : ( + + {column.renderText ? column.renderText(data[column.dataIndex], column) : data[column.dataIndex] ?? '-'} + + )} + + ); +}; diff --git a/packages/react-native/src/table/Head.tsx b/packages/react-native/src/table/Head.tsx new file mode 100644 index 0000000000..17621eb80a --- /dev/null +++ b/packages/react-native/src/table/Head.tsx @@ -0,0 +1,54 @@ +import React, { FC, useContext, useMemo } from 'react'; +import { StyleProp, ViewStyle } from 'react-native'; + +import Box from '../box'; +import helpers from '../helpers'; +import Text from '../text'; +import { ColumnContext, computeWidth } from './utils'; + +const { ONE_PIXEL } = helpers; + +interface HeadProps { + headerStyle?: StyleProp; + tableWidth?: number; +} + +export const Head: FC = ({ headerStyle, tableWidth }) => { + const { columns, cellWidth } = useContext(ColumnContext); + + const cellRender = useMemo(() => { + if (!(columns instanceof Array)) { + throw new Error('columns 需要是数组'); + } + return columns.map((item, index) => { + const styles = computeWidth(cellWidth, item.width, item.flex); + return ( + + + {item.title} + + + ); + }); + }, [columns, cellWidth]); + + return ( + + {cellRender} + + ); +}; diff --git a/packages/react-native/src/table/Rows.tsx b/packages/react-native/src/table/Rows.tsx new file mode 100644 index 0000000000..5f19a8f106 --- /dev/null +++ b/packages/react-native/src/table/Rows.tsx @@ -0,0 +1,42 @@ +import React, { FC, useContext, useMemo } from 'react'; +import { StyleProp, ViewStyle } from 'react-native'; + +import Box from '../box'; +import helpers from '../helpers'; +import { Cell } from './Cell'; +import { ColumnContext, computeWidth } from './utils'; + +const { ONE_PIXEL } = helpers; + +interface RowsProps { + data: { [key: string]: string }; + rowStyle?: StyleProp; +} + +export const Rows: FC = ({ data, rowStyle }) => { + const { columns, cellWidth } = useContext(ColumnContext); + + const cellRender = useMemo(() => { + if (!(columns instanceof Array)) { + throw new Error('columns 需要是数组'); + } + return columns.map((item, index) => { + const styles = computeWidth(cellWidth, item.width, item.flex); + return ; + }); + }, [columns, data, cellWidth]); + + return ( + + {cellRender} + + ); +}; diff --git a/packages/react-native/src/table/index.tsx b/packages/react-native/src/table/index.tsx index 11e922d504..1df124ed7a 100644 --- a/packages/react-native/src/table/index.tsx +++ b/packages/react-native/src/table/index.tsx @@ -1,5 +1,5 @@ -import React, { FC, ReactElement } from 'react'; -import { FlatList, ScrollView, StyleSheet, ViewStyle } from 'react-native'; +import React, { FC } from 'react'; +import { FlatList, ScrollView, StyleSheet } from 'react-native'; import { useTheme } from '@shopify/restyle'; @@ -8,57 +8,13 @@ import Empty from '../empty'; import helpers from '../helpers'; import { Theme } from '../theme'; import WhiteSpace from '../white-space'; +import { Head } from './Head'; +import { Rows } from './Rows'; +import { TableProps } from './type'; import useTable from './useTable'; +import { ColumnContext } from './utils'; -const { ONE_PIXEL, deviceHeight } = helpers; -export interface ColumnProps { - /** 表单标题 */ - title: string; - /** 数组下标 */ - dataIndex: string; - /** 文字行数 */ - numberOfLines?: number; - /** 超出后的截取 */ - ellipsisMode?: 'head' | 'middle' | 'tail' | 'clip'; - /** 文字对其方式 */ - textAlign?: 'center' | 'left' | 'right'; - /** 列的宽度 */ - width?: number; - /** 列的占比 */ - flex?: number; - /** 自定义文本 */ - renderText?: (item: string, column: ColumnProps) => string; - /** 自定义组件 */ - render?: (item: string, column: ColumnProps) => ReactElement; -} -export interface TableProps { - /** 列定义 */ - columns: Array; - /** 表格数据 */ - dataSource: [{ [key: string]: string }] | []; - /** 是否可以横向滚动定义了tableWidth后才可以滚动 */ - horizontalScroll?: boolean; - /** 表单头部样式 */ - headerStyle?: ViewStyle; - /** 数据行样式 */ - rowStyle?: ViewStyle; - /** 下拉刷新 */ - onRefresh?: () => void; - /** 上拉加载 */ - onEndReached?: () => void; - /** 刷新状态 */ - refreshing?: boolean; - /** 表单的宽度 */ - tableWidth?: number; - /** 表单的高度 */ - tableHeight?: number; - /** 是否固定头部 */ - fixedHeader?: boolean; - /** 是否显示表头 */ - showHeader?: boolean; - /** 空状态的视图 */ - emptyComponent?: ReactElement; -} +const { deviceHeight } = helpers; const Table: FC = props => { const { @@ -78,7 +34,7 @@ const Table: FC = props => { } = props; const theme = useTheme(); - const { handleLayout, renderHeader, renderItem } = useTable({ columns, rowStyle, tableWidth }); + const { handleLayout, cellWidth } = useTable({ columns, tableWidth }); const styles = StyleSheet.create({ contentContainer: { @@ -91,44 +47,42 @@ const Table: FC = props => { }); return ( - - - - - {renderHeader()} - - ) : null - } - data={dataSource} - ListEmptyComponent={emptyComponent ? emptyComponent : } - renderItem={renderItem} - onRefresh={onRefresh} - onEndReached={onEndReached} - refreshing={refreshing} - keyExtractor={(_, i) => i + ''} - /> - - - - + + + + + : null} + data={dataSource} + ListEmptyComponent={ + emptyComponent ? ( + emptyComponent + ) : ( + + + + ) + } + renderItem={({ item }) => { + return ; + }} + onRefresh={onRefresh} + onEndReached={onEndReached} + refreshing={refreshing} + keyExtractor={(_, i) => i + ''} + /> + + + + + ); }; Table.displayName = 'Table'; diff --git a/packages/react-native/src/table/type.ts b/packages/react-native/src/table/type.ts new file mode 100644 index 0000000000..a03646b953 --- /dev/null +++ b/packages/react-native/src/table/type.ts @@ -0,0 +1,52 @@ +import { ReactElement } from 'react'; +import { ViewStyle } from 'react-native'; + +export interface ColumnProps { + /** 表单标题 */ + title: string; + /** 数组下标 */ + dataIndex: string; + /** 文字行数 */ + numberOfLines?: number; + /** 超出后的截取 */ + ellipsisMode?: 'head' | 'middle' | 'tail' | 'clip'; + /** 文字对其方式 */ + textAlign?: 'center' | 'left' | 'right'; + /** 列的宽度 */ + width?: number; + /** 列的占比 */ + flex?: number; + /** 自定义文本 */ + renderText?: (item: string, column: ColumnProps) => string; + /** 自定义组件 */ + render?: (item: string, column: ColumnProps) => ReactElement; +} + +export interface TableProps { + /** 列定义 */ + columns: Array; + /** 表格数据 */ + dataSource: [{ [key: string]: string }] | []; + /** 是否可以横向滚动定义了tableWidth后才可以滚动 */ + horizontalScroll?: boolean; + /** 表单头部样式 */ + headerStyle?: ViewStyle; + /** 数据行样式 */ + rowStyle?: ViewStyle; + /** 下拉刷新 */ + onRefresh?: () => void; + /** 上拉加载 */ + onEndReached?: () => void; + /** 刷新状态 */ + refreshing?: boolean; + /** 表单的宽度 */ + tableWidth?: number; + /** 表单的高度 */ + tableHeight?: number; + /** 是否固定头部 */ + fixedHeader?: boolean; + /** 是否显示表头 */ + showHeader?: boolean; + /** 空状态的视图 */ + emptyComponent?: ReactElement; +} diff --git a/packages/react-native/src/table/useTable.ts b/packages/react-native/src/table/useTable.ts new file mode 100644 index 0000000000..5d6308e730 --- /dev/null +++ b/packages/react-native/src/table/useTable.ts @@ -0,0 +1,26 @@ +import { useCallback } from 'react'; +import { LayoutChangeEvent } from 'react-native'; + +import { useSafeState } from '@td-design/rn-hooks'; + +import { TableProps } from './type'; + +export default function useTable({ columns, tableWidth }: Pick) { + /**当前容器的宽度，用来计算表格的长度 */ + const [wrapWidth, setWrapWidth] = useSafeState(0); + + /** 计算单元格的长度 */ + const cellWidth = + (wrapWidth - columns.reduce((prev, next) => prev + (next.width ?? 0), 0)) / + (columns.length - columns.filter(item => item.width).length); + + /** 获取容器宽度 如果有tableWidth则用tableWidth */ + const handleLayout = (e: LayoutChangeEvent) => { + setWrapWidth(tableWidth ?? e.nativeEvent.layout.width); + }; + + return { + cellWidth: cellWidth, + handleLayout: useCallback(handleLayout, []), + }; +} diff --git a/packages/react-native/src/table/useTable.tsx b/packages/react-native/src/table/useTable.tsx deleted file mode 100644 index 4068d714b2..0000000000 --- a/packages/react-native/src/table/useTable.tsx +++ /dev/null @@ -1,121 +0,0 @@ -import React, { useCallback } from 'react'; -import { LayoutChangeEvent } from 'react-native'; - -import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks'; - -import { TableProps } from '.'; -import Box from '../box'; -import helpers from '../helpers'; -import Text from '../text'; - -const { ONE_PIXEL } = helpers; -export default function useTable({ - columns, - rowStyle, - tableWidth, -}: Pick) { - /**当前容器的宽度，用来计算表格的长度 */ - const [wrapWidth, setWrapWidth] = useSafeState(0); - - /** 计算单元格的长度 */ - const cellWidth = - (wrapWidth - columns.reduce((prev, next) => prev + (next.width ?? 0), 0)) / - (columns.length - columns.filter(item => item.width).length); - - const headRender = () => { - return columns.map((column, i) => { - const styles = {}; - if (column.width) { - Object.assign(styles, { - width: column.width, - }); - } else { - Object.assign(styles, { - width: column.flex ?? 1 * cellWidth, - }); - } - - return ( - - - {column.title} - - - ); - }); - }; - - const rowRender = ({ item, index }: { item: { [key: string]: string }; index: number }) => { - return ( - - {cellRender(item)} - - ); - }; - - const cellRender = (data: { [key: string]: string }) => { - return columns.map((column, i) => { - const styles = {}; - if (column.width) { - Object.assign(styles, { - width: column.width, - }); - } else { - Object.assign(styles, { - width: column.flex ?? 1 * cellWidth, - }); - } - return ( - - {column.render ? ( - - {column.render(data[column.dataIndex], column)} - - ) : ( - - {column.renderText ? column.renderText(data[column.dataIndex], column) : data[column.dataIndex] ?? '-'} - - )} - - ); - }); - }; - - /** 获取容器宽度 如果有tableWidth则用tableWidth */ - const handleLayout = (e: LayoutChangeEvent) => { - setWrapWidth(tableWidth ?? e.nativeEvent.layout.width); - }; - - return { - handleLayout: useCallback(handleLayout, []), - renderHeader: useMemoizedFn(headRender), - renderItem: useMemoizedFn(rowRender), - }; -} diff --git a/packages/react-native/src/table/utils.ts b/packages/react-native/src/table/utils.ts new file mode 100644 index 0000000000..a137d62606 --- /dev/null +++ b/packages/react-native/src/table/utils.ts @@ -0,0 +1,22 @@ +import { createContext } from 'react'; + +import { ColumnProps } from './type'; + +export const ColumnContext = createContext<{ columns: ColumnProps[]; cellWidth: number }>({ + columns: [], + cellWidth: 0, +}); + +export function computeWidth(cellWidth: number, width?: number, flex?: number) { + const styles = {}; + if (width) { + Object.assign(styles, { + width: width, + }); + } else { + Object.assign(styles, { + width: flex ?? 1 * cellWidth, + }); + } + return styles; +} From 6cb4b576b108fbcfd14c7243b7d5f7806008b7eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E8=8B=B1=E6=9D=B0?= <13487079308@163.com> Date: Mon, 18 Sep 2023 17:14:59 +0800 Subject: [PATCH 02/32] =?UTF-8?q?refactor(custom):=20=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-native/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native/src/index.ts b/packages/react-native/src/index.ts index 0d221cd5b1..5cb88360ed 100644 --- a/packages/react-native/src/index.ts +++ b/packages/react-native/src/index.ts @@ -50,7 +50,7 @@ import { default as Stepper } from './stepper'; import { default as SvgIcon } from './svg-icon'; import { default as SwipeRow } from './swipe-row'; import { default as Switch } from './switch'; -import { default as Table } from './table/index1'; +import { default as Table } from './table/index'; import { default as Tag } from './tag'; import { default as Text } from './text'; import type { Theme } from './theme'; From 70ae370065220c7e5edc92fe5d8c69929adf5ecb Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Mon, 18 Sep 2023 09:41:31 +0000 Subject: [PATCH 03/32] chore: release --- .changeset/famous-dolls-tap.md | 5 ----- packages/lego/CHANGELOG.md | 6 ++++++ packages/lego/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/famous-dolls-tap.md diff --git a/.changeset/famous-dolls-tap.md b/.changeset/famous-dolls-tap.md deleted file mode 100644 index 980a17580b..0000000000 --- a/.changeset/famous-dolls-tap.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@td-design/lego': patch ---- - -lego中table组件的优化 diff --git a/packages/lego/CHANGELOG.md b/packages/lego/CHANGELOG.md index b6c50d38de..65f197fda5 100644 --- a/packages/lego/CHANGELOG.md +++ b/packages/lego/CHANGELOG.md @@ -1,5 +1,11 @@ # @td-design/lego +## 4.0.2 + +### Patch Changes + +- [#730](https://github.com/thundersdata-frontend/td-design/pull/730) [`d6df8177a`](https://github.com/thundersdata-frontend/td-design/commit/d6df8177a9b8a43ee15a3ecae1d92f87db508780) Thanks [@qqack](https://github.com/qqack)! - lego中table组件的优化 + ## 4.0.1 ### Patch Changes diff --git a/packages/lego/package.json b/packages/lego/package.json index e3c5106f33..3168cecbb3 100644 --- a/packages/lego/package.json +++ b/packages/lego/package.json @@ -1,6 +1,6 @@ { "name": "@td-design/lego", - "version": "4.0.1", + "version": "4.0.2", "description": "雷数大屏素材库", "keywords": [ "thundersdata", From cfb032dcc3c1026ea3bc289cc0f287a91eb47dff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E8=8B=B1=E6=9D=B0?= <13487079308@163.com> Date: Tue, 19 Sep 2023 16:08:53 +0800 Subject: [PATCH 04/32] =?UTF-8?q?refactor(custom):=20=E4=BF=AE=E6=94=B9tab?= =?UTF-8?q?le=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/chilly-birds-hope.md | 5 ++++ packages/react-native/src/index.ts | 2 +- packages/react-native/src/table/Head.tsx | 6 ++--- packages/react-native/src/table/Rows.tsx | 2 +- packages/react-native/src/table/index.md | 13 ++++----- packages/react-native/src/table/index.tsx | 21 +++++++-------- packages/react-native/src/table/type.ts | 9 ++----- packages/react-native/src/table/useTable.ts | 9 +++---- packages/react-native/src/table/utils.ts | 29 +++++++++++++++++++-- 9 files changed, 57 insertions(+), 39 deletions(-) create mode 100644 .changeset/chilly-birds-hope.md diff --git a/.changeset/chilly-birds-hope.md b/.changeset/chilly-birds-hope.md new file mode 100644 index 0000000000..189f367ce8 --- /dev/null +++ b/.changeset/chilly-birds-hope.md @@ -0,0 +1,5 @@ +--- +'@td-design/react-native': major +--- + +修改 table 组件 diff --git a/packages/react-native/src/index.ts b/packages/react-native/src/index.ts index 5cb88360ed..e70ee5152e 100644 --- a/packages/react-native/src/index.ts +++ b/packages/react-native/src/index.ts @@ -50,7 +50,7 @@ import { default as Stepper } from './stepper'; import { default as SvgIcon } from './svg-icon'; import { default as SwipeRow } from './swipe-row'; import { default as Switch } from './switch'; -import { default as Table } from './table/index'; +import { default as Table } from './table'; import { default as Tag } from './tag'; import { default as Text } from './text'; import type { Theme } from './theme'; diff --git a/packages/react-native/src/table/Head.tsx b/packages/react-native/src/table/Head.tsx index 17621eb80a..6b259232c3 100644 --- a/packages/react-native/src/table/Head.tsx +++ b/packages/react-native/src/table/Head.tsx @@ -10,10 +10,9 @@ const { ONE_PIXEL } = helpers; interface HeadProps { headerStyle?: StyleProp; - tableWidth?: number; } -export const Head: FC = ({ headerStyle, tableWidth }) => { +export const Head: FC = ({ headerStyle }) => { const { columns, cellWidth } = useContext(ColumnContext); const cellRender = useMemo(() => { @@ -21,7 +20,7 @@ export const Head: FC = ({ headerStyle, tableWidth }) => { throw new Error('columns 需要是数组'); } return columns.map((item, index) => { - const styles = computeWidth(cellWidth, item.width, item.flex); + const styles = computeWidth(cellWidth, item.width); return ( = ({ headerStyle, tableWidth }) => { return ( = ({ data, rowStyle }) => { throw new Error('columns 需要是数组'); } return columns.map((item, index) => { - const styles = computeWidth(cellWidth, item.width, item.flex); + const styles = computeWidth(cellWidth, item.width); return ; }); }, [columns, data, cellWidth]); diff --git a/packages/react-native/src/table/index.md b/packages/react-native/src/table/index.md index 0b5fad42a2..2e8173e595 100644 --- a/packages/react-native/src/table/index.md +++ b/packages/react-native/src/table/index.md @@ -170,7 +170,7 @@ group: createdAt: '2020-12-01T16:59:43.000+08:00', }] - +
``` @@ -363,7 +363,7 @@ group: createdAt: '2020-12-01T16:59:43.000+08:00', }] -
+
``` @@ -556,7 +556,7 @@ group: createdAt: '2020-12-01T16:59:43.000+08:00', }] -
+
``` @@ -643,7 +643,7 @@ const columns = [ ]; -
+
; ``` @@ -665,14 +665,12 @@ const columns = [ | --- | --- | --- | --- | --- | | columns | `true` | 表格的列定义 | `ColumnProps[]` | | | dataSource | `true` | 表格的数据 | `[{ [key: string]: string }]` | | -| horizontalScroll | `false` | 是否可以横向滚动 （定义了 tableWidth 后才可以滚动） | `boolean` | `false` | | headerStyle | `false` | 表单头部样式 | `ViewStyle` | | | rowStyle | `false` | 数据行样式 | `ViewStyle` | | | onRefresh | `false` | 表格下拉刷新 | `() => void` | | | onEndReached | `false` | 表格上拉加载 | `() => void` | | | refreshing | `false` | 刷新状态 | `boolean` | `false` | -| tableWidth | `false` | 表单的宽度 | `number` | | -| tableHeight | `false` | 表单的高度 （如果不填则为 flex:1，由外部容器决定） | `number` | `deviceHeight` | +| height | `false` | 表单的高度 （如果不填则为 flex:1，由外部容器决定） | `number` | `deviceHeight` | | fixedHeader | `false` | 是否固定头部 | `boolean` | `false` | | showHeader | `false` | 是否显示表头 | `boolean` | `false` | | emptyComponent | `false` | 空状态的视图 | `ReactElement` | | @@ -687,6 +685,5 @@ const columns = [ | ellipsisMode | `false` | 超出后的截取方式 | `head` \| `middle` \| `tail` \| `clip` | | | textAlign | `false` | 文字对其方式 | `center` \| `left` \| `right` | | | width | `false` | 列的宽度 | `number` | | -| flex | `false` | 列的占比 | `number` | | | renderText | `false` | 自定义文本 | `(item: string, column: ColumnProps) => string` | | | render | `false` | 自定义组件 | `(item: string, column: ColumnProps) => ReactElement` | | diff --git a/packages/react-native/src/table/index.tsx b/packages/react-native/src/table/index.tsx index 1df124ed7a..120e923729 100644 --- a/packages/react-native/src/table/index.tsx +++ b/packages/react-native/src/table/index.tsx @@ -20,46 +20,45 @@ const Table: FC = props => { const { columns = [], dataSource = [], - horizontalScroll = false, headerStyle = {}, rowStyle = {}, onRefresh, onEndReached, refreshing = false, - tableWidth, - tableHeight = deviceHeight, + height = deviceHeight, fixedHeader = true, showHeader = true, emptyComponent, } = props; const theme = useTheme(); - - const { handleLayout, cellWidth } = useTable({ columns, tableWidth }); + const { handleLayout, cellWidth } = useTable({ columns }); const styles = StyleSheet.create({ contentContainer: { flexGrow: 1, - width: tableWidth, flexDirection: 'column', backgroundColor: theme.colors.background, + height: '100%', }, scrollview: { flex: 1 }, }); return ( - + - + : null} + ListHeaderComponent={showHeader ? : null} data={dataSource} ListEmptyComponent={ emptyComponent ? ( diff --git a/packages/react-native/src/table/type.ts b/packages/react-native/src/table/type.ts index a03646b953..5901c25231 100644 --- a/packages/react-native/src/table/type.ts +++ b/packages/react-native/src/table/type.ts @@ -14,8 +14,6 @@ export interface ColumnProps { textAlign?: 'center' | 'left' | 'right'; /** 列的宽度 */ width?: number; - /** 列的占比 */ - flex?: number; /** 自定义文本 */ renderText?: (item: string, column: ColumnProps) => string; /** 自定义组件 */ @@ -27,8 +25,7 @@ export interface TableProps { columns: Array; /** 表格数据 */ dataSource: [{ [key: string]: string }] | []; - /** 是否可以横向滚动定义了tableWidth后才可以滚动 */ - horizontalScroll?: boolean; + /** 表单头部样式 */ headerStyle?: ViewStyle; /** 数据行样式 */ @@ -39,10 +36,8 @@ export interface TableProps { onEndReached?: () => void; /** 刷新状态 */ refreshing?: boolean; - /** 表单的宽度 */ - tableWidth?: number; /** 表单的高度 */ - tableHeight?: number; + height?: number; /** 是否固定头部 */ fixedHeader?: boolean; /** 是否显示表头 */ diff --git a/packages/react-native/src/table/useTable.ts b/packages/react-native/src/table/useTable.ts index 5d6308e730..ad4d8413d3 100644 --- a/packages/react-native/src/table/useTable.ts +++ b/packages/react-native/src/table/useTable.ts @@ -4,19 +4,18 @@ import { LayoutChangeEvent } from 'react-native'; import { useSafeState } from '@td-design/rn-hooks'; import { TableProps } from './type'; +import { computeCellWidth } from './utils'; -export default function useTable({ columns, tableWidth }: Pick) { +export default function useTable({ columns }: Pick) { /**当前容器的宽度，用来计算表格的长度 */ const [wrapWidth, setWrapWidth] = useSafeState(0); /** 计算单元格的长度 */ - const cellWidth = - (wrapWidth - columns.reduce((prev, next) => prev + (next.width ?? 0), 0)) / - (columns.length - columns.filter(item => item.width).length); + const cellWidth = computeCellWidth(wrapWidth, columns); /** 获取容器宽度 如果有tableWidth则用tableWidth */ const handleLayout = (e: LayoutChangeEvent) => { - setWrapWidth(tableWidth ?? e.nativeEvent.layout.width); + setWrapWidth(e.nativeEvent.layout.width); }; return { diff --git a/packages/react-native/src/table/utils.ts b/packages/react-native/src/table/utils.ts index a137d62606..9e3b23ff3a 100644 --- a/packages/react-native/src/table/utils.ts +++ b/packages/react-native/src/table/utils.ts @@ -7,7 +7,7 @@ export const ColumnContext = createContext<{ columns: ColumnProps[]; cellWidth: cellWidth: 0, }); -export function computeWidth(cellWidth: number, width?: number, flex?: number) { +export function computeWidth(cellWidth: number, width?: number) { const styles = {}; if (width) { Object.assign(styles, { @@ -15,8 +15,33 @@ export function computeWidth(cellWidth: number, width?: number, flex?: number) { }); } else { Object.assign(styles, { - width: flex ?? 1 * cellWidth, + width: cellWidth, }); } return styles; } + +export function computeCellWidth(wrapWidth: number, columns: ColumnProps[]): number { + let needWidth = 0; + let count = columns.length; + + for (let i = 0; i < columns.length; i++) { + if (columns[i] && 'number' === typeof columns[i].width) { + needWidth += columns[i].width!; + count--; + } + } + // 所有的列都给了width不需要去计算剩下的长度 + if (count <= 0) { + return 0; + } + + // 如果当前长度小于表单需要的宽度,未给长度列的默认给一个最小单位 50 表单需要滚动 + if (wrapWidth <= needWidth) { + return 50; + } + + // 如果剩下的太小给一个固定的 + const width = (wrapWidth - needWidth) / count; + return width < 20 ? 20 : width; +} From 1b18fb4e8f3846139e39e69342eccf20f0f321ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E8=8B=B1=E6=9D=B0?= <13487079308@163.com> Date: Tue, 19 Sep 2023 16:28:55 +0800 Subject: [PATCH 05/32] =?UTF-8?q?style(custom):=20=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E4=B8=80=E4=BA=9B=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-native/src/table/Head.tsx | 1 + packages/react-native/src/table/index.tsx | 2 ++ packages/react-native/src/table/utils.ts | 2 +- 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react-native/src/table/Head.tsx b/packages/react-native/src/table/Head.tsx index 6b259232c3..2f93683e47 100644 --- a/packages/react-native/src/table/Head.tsx +++ b/packages/react-native/src/table/Head.tsx @@ -26,6 +26,7 @@ export const Head: FC = ({ headerStyle }) => { = props => { showsHorizontalScrollIndicator={true} showsVerticalScrollIndicator={false} scrollEnabled={true} + bounces={false} > = props => { stickyHeaderIndices={fixedHeader && showHeader ? [0] : []} ListHeaderComponent={showHeader ? : null} data={dataSource} + bounces={false} ListEmptyComponent={ emptyComponent ? ( emptyComponent diff --git a/packages/react-native/src/table/utils.ts b/packages/react-native/src/table/utils.ts index 9e3b23ff3a..e51bd279f0 100644 --- a/packages/react-native/src/table/utils.ts +++ b/packages/react-native/src/table/utils.ts @@ -36,7 +36,7 @@ export function computeCellWidth(wrapWidth: number, columns: ColumnProps[]): num return 0; } - // 如果当前长度小于表单需要的宽度,未给长度列的默认给一个最小单位 50 表单需要滚动 + // 如果当前长度小于表格需要的宽度,未给长度列的默认给一个最小单位 50 表单需要滚动 if (wrapWidth <= needWidth) { return 50; } From 08f29ea5307e522a101f807d450e1cb69d1d9b04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E8=8B=B1=E6=9D=B0?= <13487079308@163.com> Date: Tue, 19 Sep 2023 16:34:46 +0800 Subject: [PATCH 06/32] =?UTF-8?q?refactor(custom):=20=E4=BF=AE=E6=94=B9tab?= =?UTF-8?q?le=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/chilly-birds-hope.md | 5 ----- .changeset/fast-cars-battle.md | 5 +++++ packages/react-native/src/table/Head.tsx | 3 +-- 3 files changed, 6 insertions(+), 7 deletions(-) delete mode 100644 .changeset/chilly-birds-hope.md create mode 100644 .changeset/fast-cars-battle.md diff --git a/.changeset/chilly-birds-hope.md b/.changeset/chilly-birds-hope.md deleted file mode 100644 index 189f367ce8..0000000000 --- a/.changeset/chilly-birds-hope.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@td-design/react-native': major ---- - -修改 table 组件 diff --git a/.changeset/fast-cars-battle.md b/.changeset/fast-cars-battle.md new file mode 100644 index 0000000000..fdd7267e82 --- /dev/null +++ b/.changeset/fast-cars-battle.md @@ -0,0 +1,5 @@ +--- +'@td-design/react-native': minor +--- + +修改 table 组件 diff --git a/packages/react-native/src/table/Head.tsx b/packages/react-native/src/table/Head.tsx index 2f93683e47..4a00b7adfc 100644 --- a/packages/react-native/src/table/Head.tsx +++ b/packages/react-native/src/table/Head.tsx @@ -24,9 +24,8 @@ export const Head: FC = ({ headerStyle }) => { return ( Date: Tue, 19 Sep 2023 16:40:00 +0800 Subject: [PATCH 07/32] =?UTF-8?q?refactor(custom):=20=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E5=90=8D=E7=A7=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-native/src/{table => table1}/Cell.tsx | 0 packages/react-native/src/{table => table1}/Head.tsx | 0 packages/react-native/src/{table => table1}/Rows.tsx | 0 packages/react-native/src/{table => table1}/index.md | 0 packages/react-native/src/{table => table1}/index.tsx | 0 packages/react-native/src/{table => table1}/type.ts | 0 packages/react-native/src/{table => table1}/useTable.ts | 0 packages/react-native/src/{table => table1}/utils.ts | 0 8 files changed, 0 insertions(+), 0 deletions(-) rename packages/react-native/src/{table => table1}/Cell.tsx (100%) rename packages/react-native/src/{table => table1}/Head.tsx (100%) rename packages/react-native/src/{table => table1}/Rows.tsx (100%) rename packages/react-native/src/{table => table1}/index.md (100%) rename packages/react-native/src/{table => table1}/index.tsx (100%) rename packages/react-native/src/{table => table1}/type.ts (100%) rename packages/react-native/src/{table => table1}/useTable.ts (100%) rename packages/react-native/src/{table => table1}/utils.ts (100%) diff --git a/packages/react-native/src/table/Cell.tsx b/packages/react-native/src/table1/Cell.tsx similarity index 100% rename from packages/react-native/src/table/Cell.tsx rename to packages/react-native/src/table1/Cell.tsx diff --git a/packages/react-native/src/table/Head.tsx b/packages/react-native/src/table1/Head.tsx similarity index 100% rename from packages/react-native/src/table/Head.tsx rename to packages/react-native/src/table1/Head.tsx diff --git a/packages/react-native/src/table/Rows.tsx b/packages/react-native/src/table1/Rows.tsx similarity index 100% rename from packages/react-native/src/table/Rows.tsx rename to packages/react-native/src/table1/Rows.tsx diff --git a/packages/react-native/src/table/index.md b/packages/react-native/src/table1/index.md similarity index 100% rename from packages/react-native/src/table/index.md rename to packages/react-native/src/table1/index.md diff --git a/packages/react-native/src/table/index.tsx b/packages/react-native/src/table1/index.tsx similarity index 100% rename from packages/react-native/src/table/index.tsx rename to packages/react-native/src/table1/index.tsx diff --git a/packages/react-native/src/table/type.ts b/packages/react-native/src/table1/type.ts similarity index 100% rename from packages/react-native/src/table/type.ts rename to packages/react-native/src/table1/type.ts diff --git a/packages/react-native/src/table/useTable.ts b/packages/react-native/src/table1/useTable.ts similarity index 100% rename from packages/react-native/src/table/useTable.ts rename to packages/react-native/src/table1/useTable.ts diff --git a/packages/react-native/src/table/utils.ts b/packages/react-native/src/table1/utils.ts similarity index 100% rename from packages/react-native/src/table/utils.ts rename to packages/react-native/src/table1/utils.ts From 246963686b0f8f243a17e5669a03b4c24eb5c1f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E8=8B=B1=E6=9D=B0?= <13487079308@163.com> Date: Tue, 19 Sep 2023 16:40:27 +0800 Subject: [PATCH 08/32] =?UTF-8?q?refactor(custom):=20=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E5=90=8D=E7=A7=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-native/src/{table1 => table}/Cell.tsx | 0 packages/react-native/src/{table1 => table}/Head.tsx | 0 packages/react-native/src/{table1 => table}/Rows.tsx | 0 packages/react-native/src/{table1 => table}/index.md | 0 packages/react-native/src/{table1 => table}/index.tsx | 0 packages/react-native/src/{table1 => table}/type.ts | 0 packages/react-native/src/{table1 => table}/useTable.ts | 0 packages/react-native/src/{table1 => table}/utils.ts | 0 8 files changed, 0 insertions(+), 0 deletions(-) rename packages/react-native/src/{table1 => table}/Cell.tsx (100%) rename packages/react-native/src/{table1 => table}/Head.tsx (100%) rename packages/react-native/src/{table1 => table}/Rows.tsx (100%) rename packages/react-native/src/{table1 => table}/index.md (100%) rename packages/react-native/src/{table1 => table}/index.tsx (100%) rename packages/react-native/src/{table1 => table}/type.ts (100%) rename packages/react-native/src/{table1 => table}/useTable.ts (100%) rename packages/react-native/src/{table1 => table}/utils.ts (100%) diff --git a/packages/react-native/src/table1/Cell.tsx b/packages/react-native/src/table/Cell.tsx similarity index 100% rename from packages/react-native/src/table1/Cell.tsx rename to packages/react-native/src/table/Cell.tsx diff --git a/packages/react-native/src/table1/Head.tsx b/packages/react-native/src/table/Head.tsx similarity index 100% rename from packages/react-native/src/table1/Head.tsx rename to packages/react-native/src/table/Head.tsx diff --git a/packages/react-native/src/table1/Rows.tsx b/packages/react-native/src/table/Rows.tsx similarity index 100% rename from packages/react-native/src/table1/Rows.tsx rename to packages/react-native/src/table/Rows.tsx diff --git a/packages/react-native/src/table1/index.md b/packages/react-native/src/table/index.md similarity index 100% rename from packages/react-native/src/table1/index.md rename to packages/react-native/src/table/index.md diff --git a/packages/react-native/src/table1/index.tsx b/packages/react-native/src/table/index.tsx similarity index 100% rename from packages/react-native/src/table1/index.tsx rename to packages/react-native/src/table/index.tsx diff --git a/packages/react-native/src/table1/type.ts b/packages/react-native/src/table/type.ts similarity index 100% rename from packages/react-native/src/table1/type.ts rename to packages/react-native/src/table/type.ts diff --git a/packages/react-native/src/table1/useTable.ts b/packages/react-native/src/table/useTable.ts similarity index 100% rename from packages/react-native/src/table1/useTable.ts rename to packages/react-native/src/table/useTable.ts diff --git a/packages/react-native/src/table1/utils.ts b/packages/react-native/src/table/utils.ts similarity index 100% rename from packages/react-native/src/table1/utils.ts rename to packages/react-native/src/table/utils.ts From f000216470e97e7b9c04aefa38bdb143b7cfab1f Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 19 Sep 2023 09:29:13 +0000 Subject: [PATCH 09/32] chore: release --- .changeset/fast-cars-battle.md | 5 ----- packages/react-native-calendar/package.json | 2 +- packages/react-native-image-picker/package.json | 2 +- packages/react-native-password/package.json | 2 +- packages/react-native-picker/package.json | 2 +- packages/react-native-rating/package.json | 2 +- packages/react-native-share/package.json | 2 +- packages/react-native-skeleton/package.json | 2 +- packages/react-native-tabs/package.json | 2 +- packages/react-native/CHANGELOG.md | 6 ++++++ packages/react-native/package.json | 2 +- 11 files changed, 15 insertions(+), 14 deletions(-) delete mode 100644 .changeset/fast-cars-battle.md diff --git a/.changeset/fast-cars-battle.md b/.changeset/fast-cars-battle.md deleted file mode 100644 index fdd7267e82..0000000000 --- a/.changeset/fast-cars-battle.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@td-design/react-native': minor ---- - -修改 table 组件 diff --git a/packages/react-native-calendar/package.json b/packages/react-native-calendar/package.json index 2e985fc11e..fb19365488 100644 --- a/packages/react-native-calendar/package.json +++ b/packages/react-native-calendar/package.json @@ -29,7 +29,7 @@ }, "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.1.1", + "@td-design/react-native": "workspace:^5.2.0", "@td-design/rn-hooks": "workspace:^2.7.2", "@td-design/react-native-picker": "workspace:^2.3.2", "@types/react": "^18.2.15", diff --git a/packages/react-native-image-picker/package.json b/packages/react-native-image-picker/package.json index 544208ae6f..7d2e7889ea 100644 --- a/packages/react-native-image-picker/package.json +++ b/packages/react-native-image-picker/package.json @@ -22,7 +22,7 @@ }, "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.1.1", + "@td-design/react-native": "workspace:^5.2.0", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "0.72.2", diff --git a/packages/react-native-password/package.json b/packages/react-native-password/package.json index bc5b8fe85e..1a32d41a78 100644 --- a/packages/react-native-password/package.json +++ b/packages/react-native-password/package.json @@ -26,7 +26,7 @@ "license": "Apache-2.0", "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.1.1", + "@td-design/react-native": "workspace:^5.2.0", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", diff --git a/packages/react-native-picker/package.json b/packages/react-native-picker/package.json index 058369d908..5b5bb16cb9 100644 --- a/packages/react-native-picker/package.json +++ b/packages/react-native-picker/package.json @@ -30,7 +30,7 @@ }, "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.1.1", + "@td-design/react-native": "workspace:^5.2.0", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/lodash-es": "^4.17.8", "@types/react": "^18.2.15", diff --git a/packages/react-native-rating/package.json b/packages/react-native-rating/package.json index d398854e8c..93fcc1bd70 100644 --- a/packages/react-native-rating/package.json +++ b/packages/react-native-rating/package.json @@ -28,7 +28,7 @@ "@shopify/restyle": "2.4.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", - "@td-design/react-native": "workspace:^5.1.1", + "@td-design/react-native": "workspace:^5.2.0", "@td-design/rn-hooks": "workspace:^2.7.2", "react-native-builder-bob": "^0.21.3", "react-native-gesture-handler": "^2.12.0", diff --git a/packages/react-native-share/package.json b/packages/react-native-share/package.json index 3fbc0ecbcd..4bb062d783 100644 --- a/packages/react-native-share/package.json +++ b/packages/react-native-share/package.json @@ -26,7 +26,7 @@ "license": "Apache-2.0", "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.1.1", + "@td-design/react-native": "workspace:^5.2.0", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", "react-native-builder-bob": "^0.21.3", diff --git a/packages/react-native-skeleton/package.json b/packages/react-native-skeleton/package.json index cc8e28db76..bafd0cde32 100644 --- a/packages/react-native-skeleton/package.json +++ b/packages/react-native-skeleton/package.json @@ -26,7 +26,7 @@ "license": "Apache-2.0", "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.1.1", + "@td-design/react-native": "workspace:^5.2.0", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", diff --git a/packages/react-native-tabs/package.json b/packages/react-native-tabs/package.json index 9a98b65d13..25dd582e26 100644 --- a/packages/react-native-tabs/package.json +++ b/packages/react-native-tabs/package.json @@ -28,7 +28,7 @@ "color": "^4.2.3" }, "devDependencies": { - "@td-design/react-native": "workspace:^5.1.1", + "@td-design/react-native": "workspace:^5.2.0", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", diff --git a/packages/react-native/CHANGELOG.md b/packages/react-native/CHANGELOG.md index 3b910bd317..b996b133b6 100644 --- a/packages/react-native/CHANGELOG.md +++ b/packages/react-native/CHANGELOG.md @@ -1,5 +1,11 @@ # @td-design/react-native +## 5.2.0 + +### Minor Changes + +- [#729](https://github.com/thundersdata-frontend/td-design/pull/729) [`08f29ea53`](https://github.com/thundersdata-frontend/td-design/commit/08f29ea5307e522a101f807d450e1cb69d1d9b04) Thanks [@chen929104](https://github.com/chen929104)! - 修改 table 组件 + ## 5.1.1 ### Patch Changes diff --git a/packages/react-native/package.json b/packages/react-native/package.json index fdb102fe6b..4ba170a349 100644 --- a/packages/react-native/package.json +++ b/packages/react-native/package.json @@ -1,6 +1,6 @@ { "name": "@td-design/react-native", - "version": "5.1.1", + "version": "5.2.0", "description": "react-native UI组件库", "keywords": [ "restyle", From f3b310081fa58d017a9266fc9daf72483b7b70d7 Mon Sep 17 00:00:00 2001 From: "damon.chen" Date: Tue, 19 Sep 2023 17:32:59 +0800 Subject: [PATCH 10/32] Update CHANGELOG.md --- packages/react-native/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native/CHANGELOG.md b/packages/react-native/CHANGELOG.md index b996b133b6..2a0c0e3787 100644 --- a/packages/react-native/CHANGELOG.md +++ b/packages/react-native/CHANGELOG.md @@ -4,7 +4,7 @@ ### Minor Changes -- [#729](https://github.com/thundersdata-frontend/td-design/pull/729) [`08f29ea53`](https://github.com/thundersdata-frontend/td-design/commit/08f29ea5307e522a101f807d450e1cb69d1d9b04) Thanks [@chen929104](https://github.com/chen929104)! - 修改 table 组件 +- [#729](https://github.com/thundersdata-frontend/td-design/pull/729) [`08f29ea53`](https://github.com/thundersdata-frontend/td-design/commit/08f29ea5307e522a101f807d450e1cb69d1d9b04) Thanks [@chen929104](https://github.com/chen929104)! - 重写 table 组件 ## 5.1.1 From 89640433e23cc3a9c3e4d629fde2dd436de6a155 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 27 Sep 2023 06:09:34 +0000 Subject: [PATCH 11/32] chore: release --- .changeset/fuzzy-schools-nail.md | 5 ----- packages/lego/CHANGELOG.md | 6 ++++++ packages/lego/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/fuzzy-schools-nail.md diff --git a/.changeset/fuzzy-schools-nail.md b/.changeset/fuzzy-schools-nail.md deleted file mode 100644 index d26865dd47..0000000000 --- a/.changeset/fuzzy-schools-nail.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@td-design/lego': patch ---- - -fix: 修复lego的一些组件的bug diff --git a/packages/lego/CHANGELOG.md b/packages/lego/CHANGELOG.md index e44269c8e9..540b8b34b0 100644 --- a/packages/lego/CHANGELOG.md +++ b/packages/lego/CHANGELOG.md @@ -1,5 +1,11 @@ # @td-design/lego +## 4.0.3 + +### Patch Changes + +- [#733](https://github.com/thundersdata-frontend/td-design/pull/733) [`aeada2c4f`](https://github.com/thundersdata-frontend/td-design/commit/aeada2c4f464dc84ad2cfab315c956236bfe70b1) Thanks [@qqack](https://github.com/qqack)! - fix: 修复lego的一些组件的bug + ## 4.0.2 ### Patch Changes diff --git a/packages/lego/package.json b/packages/lego/package.json index 3168cecbb3..3544f95518 100644 --- a/packages/lego/package.json +++ b/packages/lego/package.json @@ -1,6 +1,6 @@ { "name": "@td-design/lego", - "version": "4.0.2", + "version": "4.0.3", "description": "雷数大屏素材库", "keywords": [ "thundersdata", From a375d01230c01c7f953b2d8d3a7772d1f264fa0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=9D=B0?= Date: Sat, 7 Oct 2023 11:32:56 +0800 Subject: [PATCH 12/32] chore: bump dependencies --- pnpm-lock.yaml | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e1a81d6801..326ec63175 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -324,7 +324,7 @@ importers: packages/react-native-calendar: specifiers: '@shopify/restyle': 2.4.2 - '@td-design/react-native': workspace:^5.1.1 + '@td-design/react-native': workspace:^5.2.0 '@td-design/react-native-picker': workspace:^2.3.2 '@td-design/rn-hooks': workspace:^2.7.2 '@types/react': ^18.2.15 @@ -369,7 +369,7 @@ importers: packages/react-native-image-picker: specifiers: '@shopify/restyle': 2.4.2 - '@td-design/react-native': workspace:^5.1.1 + '@td-design/react-native': workspace:^5.2.0 '@td-design/rn-hooks': workspace:^2.7.2 '@types/react': ^18.2.15 '@types/react-native': 0.72.2 @@ -389,7 +389,7 @@ importers: packages/react-native-password: specifiers: '@shopify/restyle': 2.4.2 - '@td-design/react-native': workspace:^5.1.1 + '@td-design/react-native': workspace:^5.2.0 '@td-design/rn-hooks': workspace:^2.7.2 '@types/react': ^18.2.15 '@types/react-native': ^0.72.2 @@ -407,7 +407,7 @@ importers: packages/react-native-picker: specifiers: '@shopify/restyle': 2.4.2 - '@td-design/react-native': workspace:^5.1.1 + '@td-design/react-native': workspace:^5.2.0 '@td-design/rn-hooks': workspace:^2.7.2 '@types/lodash-es': ^4.17.8 '@types/react': ^18.2.15 @@ -436,7 +436,7 @@ importers: packages/react-native-rating: specifiers: '@shopify/restyle': 2.4.2 - '@td-design/react-native': workspace:^5.1.1 + '@td-design/react-native': workspace:^5.2.0 '@td-design/rn-hooks': workspace:^2.7.2 '@types/react': ^18.2.15 '@types/react-native': ^0.72.2 @@ -462,7 +462,7 @@ importers: packages/react-native-share: specifiers: '@shopify/restyle': 2.4.2 - '@td-design/react-native': workspace:^5.1.1 + '@td-design/react-native': workspace:^5.2.0 '@types/react': ^18.2.15 '@types/react-native': ^0.72.2 react-native-builder-bob: ^0.21.3 @@ -480,7 +480,7 @@ importers: packages/react-native-skeleton: specifiers: '@shopify/restyle': 2.4.2 - '@td-design/react-native': workspace:^5.1.1 + '@td-design/react-native': workspace:^5.2.0 '@td-design/rn-hooks': workspace:^2.7.2 '@types/react': ^18.2.15 '@types/react-native': ^0.72.2 @@ -501,7 +501,7 @@ importers: packages/react-native-tabs: specifiers: - '@td-design/react-native': workspace:^5.1.1 + '@td-design/react-native': workspace:^5.2.0 '@td-design/rn-hooks': workspace:^2.7.2 '@types/react': ^18.2.15 '@types/react-native': ^0.72.2 From d29c3c4fdd6ede126a1e95a266d25b41d0e784b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=9D=B0?= Date: Sat, 7 Oct 2023 11:39:00 +0800 Subject: [PATCH 13/32] =?UTF-8?q?perf:=20=E5=AF=B9Box=E5=92=8CText?= =?UTF-8?q?=E4=B8=A4=E4=B8=AA=E5=9F=BA=E7=A1=80=E7=BB=84=E4=BB=B6=E8=BF=9B?= =?UTF-8?q?=E8=A1=8C=E6=80=A7=E8=83=BD=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/dirty-dragons-vanish.md | 5 +++++ packages/react-native/src/box/index.md | 2 ++ packages/react-native/src/box/index.tsx | 5 ++++- packages/react-native/src/text/index.md | 2 ++ packages/react-native/src/text/index.tsx | 9 ++++++--- 5 files changed, 19 insertions(+), 4 deletions(-) create mode 100644 .changeset/dirty-dragons-vanish.md diff --git a/.changeset/dirty-dragons-vanish.md b/.changeset/dirty-dragons-vanish.md new file mode 100644 index 0000000000..1f9f51a39e --- /dev/null +++ b/.changeset/dirty-dragons-vanish.md @@ -0,0 +1,5 @@ +--- +'@td-design/react-native': minor +--- + +对Box和Text两个基础组件进行性能优化 diff --git a/packages/react-native/src/box/index.md b/packages/react-native/src/box/index.md index a51142c581..5aa4250ad0 100644 --- a/packages/react-native/src/box/index.md +++ b/packages/react-native/src/box/index.md @@ -13,6 +13,8 @@ group: 基于`restyle`，除样式属性外继承`ViewProps`。 +**注意，Box组件不直接基于`View`组件，而是基于`react-native/Libraries/Components/View/ViewNativeComponent`（[why](https://twitter.com/natebirdman/status/1695511232298783079?s=42)）。** + ## 效果演示 ### 1. 背景为蓝色的正方形 diff --git a/packages/react-native/src/box/index.tsx b/packages/react-native/src/box/index.tsx index 3fbc429f45..9aa0420456 100644 --- a/packages/react-native/src/box/index.tsx +++ b/packages/react-native/src/box/index.tsx @@ -1,8 +1,11 @@ +// @ts-ignore +import NativeView from 'react-native/Libraries/Components/View/ViewNativeComponent'; + import { createBox } from '@shopify/restyle'; import { Theme } from '../theme'; -const Box = createBox(); +const Box = createBox(NativeView); Box.displayName = 'Box'; Box.defaultProps = { pointerEvents: 'box-none', diff --git a/packages/react-native/src/text/index.md b/packages/react-native/src/text/index.md index acea2197b5..de3a23ab18 100644 --- a/packages/react-native/src/text/index.md +++ b/packages/react-native/src/text/index.md @@ -12,6 +12,8 @@ group: 文本组件主要基于`restyle`封装，替换`react-native`默认的`Text`组件。 +**注意：Text组件移除了`onLongPress`/`onPress`/`onPressIn`/`onPressOut`这些属性（[Why](https://twitter.com/fernandotherojo/status/1707762822015267219?s=42)）。所以您无法直接在Text组件上使用点击事件，需要的话，请使用`Pressable`或者`Touchable*`等组件包裹Text组件以实现相同的效果。** + ## 效果演示 ### 1. 字体大小 32 diff --git a/packages/react-native/src/text/index.tsx b/packages/react-native/src/text/index.tsx index 0eaeb5971c..e86c11a5c2 100644 --- a/packages/react-native/src/text/index.tsx +++ b/packages/react-native/src/text/index.tsx @@ -1,13 +1,16 @@ -import React, { memo, PropsWithChildren } from 'react'; +import React, { createElement, memo, PropsWithChildren } from 'react'; import { TextProps as RNTextProps } from 'react-native'; import { createText, TextProps } from '@shopify/restyle'; import { Theme } from '../theme'; -type Props = TextProps & RNTextProps; +type Props = TextProps & Omit; -const BaseText = createText(); +const NativeText = ({ onLongPress, onPress, onPressIn, onPressOut, ...props }: RNTextProps) => + createElement('RCTText', props); + +const BaseText = createText(NativeText); const Text = memo(({ children, style, ...props }: PropsWithChildren) => { return ( From fe00ffcfe47ad8e7878fbf40256c9d87a72f130d Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Sat, 7 Oct 2023 03:43:50 +0000 Subject: [PATCH 14/32] chore: release --- .changeset/dirty-dragons-vanish.md | 5 ----- packages/react-native-calendar/package.json | 2 +- packages/react-native-image-picker/package.json | 2 +- packages/react-native-password/package.json | 2 +- packages/react-native-picker/package.json | 2 +- packages/react-native-rating/package.json | 2 +- packages/react-native-share/package.json | 2 +- packages/react-native-skeleton/package.json | 2 +- packages/react-native-tabs/package.json | 2 +- packages/react-native/CHANGELOG.md | 6 ++++++ packages/react-native/package.json | 2 +- 11 files changed, 15 insertions(+), 14 deletions(-) delete mode 100644 .changeset/dirty-dragons-vanish.md diff --git a/.changeset/dirty-dragons-vanish.md b/.changeset/dirty-dragons-vanish.md deleted file mode 100644 index 1f9f51a39e..0000000000 --- a/.changeset/dirty-dragons-vanish.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@td-design/react-native': minor ---- - -对Box和Text两个基础组件进行性能优化 diff --git a/packages/react-native-calendar/package.json b/packages/react-native-calendar/package.json index fb19365488..3fb7b50f5e 100644 --- a/packages/react-native-calendar/package.json +++ b/packages/react-native-calendar/package.json @@ -29,7 +29,7 @@ }, "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.2.0", + "@td-design/react-native": "workspace:^5.3.0", "@td-design/rn-hooks": "workspace:^2.7.2", "@td-design/react-native-picker": "workspace:^2.3.2", "@types/react": "^18.2.15", diff --git a/packages/react-native-image-picker/package.json b/packages/react-native-image-picker/package.json index 7d2e7889ea..544f35216a 100644 --- a/packages/react-native-image-picker/package.json +++ b/packages/react-native-image-picker/package.json @@ -22,7 +22,7 @@ }, "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.2.0", + "@td-design/react-native": "workspace:^5.3.0", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "0.72.2", diff --git a/packages/react-native-password/package.json b/packages/react-native-password/package.json index 1a32d41a78..438664bb1f 100644 --- a/packages/react-native-password/package.json +++ b/packages/react-native-password/package.json @@ -26,7 +26,7 @@ "license": "Apache-2.0", "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.2.0", + "@td-design/react-native": "workspace:^5.3.0", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", diff --git a/packages/react-native-picker/package.json b/packages/react-native-picker/package.json index 5b5bb16cb9..ac7a5d3e21 100644 --- a/packages/react-native-picker/package.json +++ b/packages/react-native-picker/package.json @@ -30,7 +30,7 @@ }, "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.2.0", + "@td-design/react-native": "workspace:^5.3.0", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/lodash-es": "^4.17.8", "@types/react": "^18.2.15", diff --git a/packages/react-native-rating/package.json b/packages/react-native-rating/package.json index 93fcc1bd70..2c3b004824 100644 --- a/packages/react-native-rating/package.json +++ b/packages/react-native-rating/package.json @@ -28,7 +28,7 @@ "@shopify/restyle": "2.4.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", - "@td-design/react-native": "workspace:^5.2.0", + "@td-design/react-native": "workspace:^5.3.0", "@td-design/rn-hooks": "workspace:^2.7.2", "react-native-builder-bob": "^0.21.3", "react-native-gesture-handler": "^2.12.0", diff --git a/packages/react-native-share/package.json b/packages/react-native-share/package.json index 4bb062d783..6713ce728d 100644 --- a/packages/react-native-share/package.json +++ b/packages/react-native-share/package.json @@ -26,7 +26,7 @@ "license": "Apache-2.0", "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.2.0", + "@td-design/react-native": "workspace:^5.3.0", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", "react-native-builder-bob": "^0.21.3", diff --git a/packages/react-native-skeleton/package.json b/packages/react-native-skeleton/package.json index bafd0cde32..0589e25231 100644 --- a/packages/react-native-skeleton/package.json +++ b/packages/react-native-skeleton/package.json @@ -26,7 +26,7 @@ "license": "Apache-2.0", "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.2.0", + "@td-design/react-native": "workspace:^5.3.0", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", diff --git a/packages/react-native-tabs/package.json b/packages/react-native-tabs/package.json index 25dd582e26..f23d081f5e 100644 --- a/packages/react-native-tabs/package.json +++ b/packages/react-native-tabs/package.json @@ -28,7 +28,7 @@ "color": "^4.2.3" }, "devDependencies": { - "@td-design/react-native": "workspace:^5.2.0", + "@td-design/react-native": "workspace:^5.3.0", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", diff --git a/packages/react-native/CHANGELOG.md b/packages/react-native/CHANGELOG.md index 2a0c0e3787..3275c3e8e1 100644 --- a/packages/react-native/CHANGELOG.md +++ b/packages/react-native/CHANGELOG.md @@ -1,5 +1,11 @@ # @td-design/react-native +## 5.3.0 + +### Minor Changes + +- [#736](https://github.com/thundersdata-frontend/td-design/pull/736) [`d29c3c4fd`](https://github.com/thundersdata-frontend/td-design/commit/d29c3c4fdd6ede126a1e95a266d25b41d0e784b0) Thanks [@chj-damon](https://github.com/chj-damon)! - 对Box和Text两个基础组件进行性能优化 + ## 5.2.0 ### Minor Changes diff --git a/packages/react-native/package.json b/packages/react-native/package.json index 4ba170a349..e1513ca9a0 100644 --- a/packages/react-native/package.json +++ b/packages/react-native/package.json @@ -1,6 +1,6 @@ { "name": "@td-design/react-native", - "version": "5.2.0", + "version": "5.3.0", "description": "react-native UI组件库", "keywords": [ "restyle", From 1a89a1e7fa53645a691cc2516833c40c71e39729 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=9D=B0?= Date: Sat, 7 Oct 2023 11:54:14 +0800 Subject: [PATCH 15/32] chore: bump dependencies --- pnpm-lock.yaml | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 326ec63175..7933009c53 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -324,7 +324,7 @@ importers: packages/react-native-calendar: specifiers: '@shopify/restyle': 2.4.2 - '@td-design/react-native': workspace:^5.2.0 + '@td-design/react-native': workspace:^5.3.0 '@td-design/react-native-picker': workspace:^2.3.2 '@td-design/rn-hooks': workspace:^2.7.2 '@types/react': ^18.2.15 @@ -369,7 +369,7 @@ importers: packages/react-native-image-picker: specifiers: '@shopify/restyle': 2.4.2 - '@td-design/react-native': workspace:^5.2.0 + '@td-design/react-native': workspace:^5.3.0 '@td-design/rn-hooks': workspace:^2.7.2 '@types/react': ^18.2.15 '@types/react-native': 0.72.2 @@ -389,7 +389,7 @@ importers: packages/react-native-password: specifiers: '@shopify/restyle': 2.4.2 - '@td-design/react-native': workspace:^5.2.0 + '@td-design/react-native': workspace:^5.3.0 '@td-design/rn-hooks': workspace:^2.7.2 '@types/react': ^18.2.15 '@types/react-native': ^0.72.2 @@ -407,7 +407,7 @@ importers: packages/react-native-picker: specifiers: '@shopify/restyle': 2.4.2 - '@td-design/react-native': workspace:^5.2.0 + '@td-design/react-native': workspace:^5.3.0 '@td-design/rn-hooks': workspace:^2.7.2 '@types/lodash-es': ^4.17.8 '@types/react': ^18.2.15 @@ -436,7 +436,7 @@ importers: packages/react-native-rating: specifiers: '@shopify/restyle': 2.4.2 - '@td-design/react-native': workspace:^5.2.0 + '@td-design/react-native': workspace:^5.3.0 '@td-design/rn-hooks': workspace:^2.7.2 '@types/react': ^18.2.15 '@types/react-native': ^0.72.2 @@ -462,7 +462,7 @@ importers: packages/react-native-share: specifiers: '@shopify/restyle': 2.4.2 - '@td-design/react-native': workspace:^5.2.0 + '@td-design/react-native': workspace:^5.3.0 '@types/react': ^18.2.15 '@types/react-native': ^0.72.2 react-native-builder-bob: ^0.21.3 @@ -480,7 +480,7 @@ importers: packages/react-native-skeleton: specifiers: '@shopify/restyle': 2.4.2 - '@td-design/react-native': workspace:^5.2.0 + '@td-design/react-native': workspace:^5.3.0 '@td-design/rn-hooks': workspace:^2.7.2 '@types/react': ^18.2.15 '@types/react-native': ^0.72.2 @@ -501,7 +501,7 @@ importers: packages/react-native-tabs: specifiers: - '@td-design/react-native': workspace:^5.2.0 + '@td-design/react-native': workspace:^5.3.0 '@td-design/rn-hooks': workspace:^2.7.2 '@types/react': ^18.2.15 '@types/react-native': ^0.72.2 From 9f58dd8af638b4077c20e32ae3037034445e2f2d Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Sat, 7 Oct 2023 03:57:46 +0000 Subject: [PATCH 16/32] chore(deps-dev): bump postcss from 8.4.27 to 8.4.31 Bumps [postcss](https://github.com/postcss/postcss) from 8.4.27 to 8.4.31. - [Release notes](https://github.com/postcss/postcss/releases) - [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md) - [Commits](https://github.com/postcss/postcss/compare/8.4.27...8.4.31) --- updated-dependencies: - dependency-name: postcss dependency-type: direct:development ... Signed-off-by: dependabot[bot] --- packages/lego-map/package.json | 2 +- packages/lego/package.json | 2 +- pnpm-lock.yaml | 350 ++++++++++++++++----------------- 3 files changed, 177 insertions(+), 177 deletions(-) diff --git a/packages/lego-map/package.json b/packages/lego-map/package.json index a3b751b22b..e045633acf 100644 --- a/packages/lego-map/package.json +++ b/packages/lego-map/package.json @@ -43,7 +43,7 @@ "@types/lodash-es": "^4.17.8", "@types/react": "^18.2.15", "@types/react-dom": "^18.2.7", - "postcss": "^8.4.27", + "postcss": "^8.4.31", "postcss-url": "^10.1.3", "less": "^4.1.3", "rollup": "^3.26.3", diff --git a/packages/lego/package.json b/packages/lego/package.json index 3544f95518..9b11799ecc 100644 --- a/packages/lego/package.json +++ b/packages/lego/package.json @@ -58,7 +58,7 @@ "@types/react": "^18.2.15", "@types/react-dom": "^18.2.7", "less": "^4.1.3", - "postcss": "^8.4.27", + "postcss": "^8.4.31", "postcss-url": "^10.1.3", "rollup": "^3.26.3", "rollup-plugin-font": "^1.1.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7933009c53..4fc5383343 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -158,7 +158,7 @@ importers: echarts-wordcloud: ^2.1.0 less: ^4.1.3 lodash-es: ^4.17.21 - postcss: ^8.4.27 + postcss: ^8.4.31 postcss-url: ^10.1.3 react-countup: ^6.4.2 rollup: ^3.26.3 @@ -191,11 +191,11 @@ importers: '@types/react': 18.2.15 '@types/react-dom': 18.2.7 less: 4.1.3 - postcss: 8.4.27 - postcss-url: 10.1.3_postcss@8.4.27 + postcss: 8.4.31 + postcss-url: 10.1.3_postcss@8.4.31 rollup: 3.26.3 rollup-plugin-font: 1.1.2 - rollup-plugin-postcss: 4.0.2_postcss@8.4.27 + rollup-plugin-postcss: 4.0.2_postcss@8.4.31 rollup-plugin-typescript2: 0.35.0_afuk5ckrta3fepxfxriis2nsxm tslib: 2.6.0 typescript: 5.1.6 @@ -212,7 +212,7 @@ importers: echarts-for-react: ^3.0.2 less: ^4.1.3 lodash-es: ^4.17.21 - postcss: ^8.4.27 + postcss: ^8.4.31 postcss-url: ^10.1.3 rollup: ^3.26.3 rollup-plugin-postcss: ^4.0.2 @@ -231,10 +231,10 @@ importers: '@types/react': 18.2.15 '@types/react-dom': 18.2.7 less: 4.1.3 - postcss: 8.4.27 - postcss-url: 10.1.3_postcss@8.4.27 + postcss: 8.4.31 + postcss-url: 10.1.3_postcss@8.4.31 rollup: 3.26.3 - rollup-plugin-postcss: 4.0.2_postcss@8.4.27 + rollup-plugin-postcss: 4.0.2_postcss@8.4.31 rollup-plugin-typescript2: 0.35.0_afuk5ckrta3fepxfxriis2nsxm tslib: 2.6.0 typescript: 5.1.6 @@ -4470,7 +4470,7 @@ packages: normalize-range: 0.1.2 num2fraction: 1.2.2 picocolors: 0.2.1 - postcss: 7.0.32 + postcss: 7.0.39 postcss-value-parser: 4.2.0 dev: true @@ -5924,16 +5924,16 @@ packages: engines: {node: '>=6.0.0'} hasBin: true dependencies: - postcss: 7.0.32 + postcss: 7.0.39 dev: true - /css-declaration-sorter/6.4.1_postcss@8.4.27: + /css-declaration-sorter/6.4.1_postcss@8.4.31: resolution: {integrity: sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==} engines: {node: ^10 || ^12 || >=14} peerDependencies: postcss: ^8.0.9 dependencies: - postcss: 8.4.27 + postcss: 8.4.31 dev: true /css-has-pseudo/0.10.0: @@ -5941,7 +5941,7 @@ packages: engines: {node: '>=6.0.0'} hasBin: true dependencies: - postcss: 7.0.32 + postcss: 7.0.39 postcss-selector-parser: 5.0.0 dev: true @@ -5950,7 +5950,7 @@ packages: engines: {node: '>=6.0.0'} hasBin: true dependencies: - postcss: 7.0.32 + postcss: 7.0.39 dev: true /css-select/4.3.0: @@ -5999,62 +5999,62 @@ packages: hasBin: true dev: true - /cssnano-preset-default/5.2.14_postcss@8.4.27: + /cssnano-preset-default/5.2.14_postcss@8.4.31: resolution: {integrity: sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - css-declaration-sorter: 6.4.1_postcss@8.4.27 - cssnano-utils: 3.1.0_postcss@8.4.27 - postcss: 8.4.27 - postcss-calc: 8.2.4_postcss@8.4.27 - postcss-colormin: 5.3.1_postcss@8.4.27 - postcss-convert-values: 5.1.3_postcss@8.4.27 - postcss-discard-comments: 5.1.2_postcss@8.4.27 - postcss-discard-duplicates: 5.1.0_postcss@8.4.27 - postcss-discard-empty: 5.1.1_postcss@8.4.27 - postcss-discard-overridden: 5.1.0_postcss@8.4.27 - postcss-merge-longhand: 5.1.7_postcss@8.4.27 - postcss-merge-rules: 5.1.4_postcss@8.4.27 - postcss-minify-font-values: 5.1.0_postcss@8.4.27 - postcss-minify-gradients: 5.1.1_postcss@8.4.27 - postcss-minify-params: 5.1.4_postcss@8.4.27 - postcss-minify-selectors: 5.2.1_postcss@8.4.27 - postcss-normalize-charset: 5.1.0_postcss@8.4.27 - postcss-normalize-display-values: 5.1.0_postcss@8.4.27 - postcss-normalize-positions: 5.1.1_postcss@8.4.27 - postcss-normalize-repeat-style: 5.1.1_postcss@8.4.27 - postcss-normalize-string: 5.1.0_postcss@8.4.27 - postcss-normalize-timing-functions: 5.1.0_postcss@8.4.27 - postcss-normalize-unicode: 5.1.1_postcss@8.4.27 - postcss-normalize-url: 5.1.0_postcss@8.4.27 - postcss-normalize-whitespace: 5.1.1_postcss@8.4.27 - postcss-ordered-values: 5.1.3_postcss@8.4.27 - postcss-reduce-initial: 5.1.2_postcss@8.4.27 - postcss-reduce-transforms: 5.1.0_postcss@8.4.27 - postcss-svgo: 5.1.0_postcss@8.4.27 - postcss-unique-selectors: 5.1.1_postcss@8.4.27 - dev: true - - /cssnano-utils/3.1.0_postcss@8.4.27: + css-declaration-sorter: 6.4.1_postcss@8.4.31 + cssnano-utils: 3.1.0_postcss@8.4.31 + postcss: 8.4.31 + postcss-calc: 8.2.4_postcss@8.4.31 + postcss-colormin: 5.3.1_postcss@8.4.31 + postcss-convert-values: 5.1.3_postcss@8.4.31 + postcss-discard-comments: 5.1.2_postcss@8.4.31 + postcss-discard-duplicates: 5.1.0_postcss@8.4.31 + postcss-discard-empty: 5.1.1_postcss@8.4.31 + postcss-discard-overridden: 5.1.0_postcss@8.4.31 + postcss-merge-longhand: 5.1.7_postcss@8.4.31 + postcss-merge-rules: 5.1.4_postcss@8.4.31 + postcss-minify-font-values: 5.1.0_postcss@8.4.31 + postcss-minify-gradients: 5.1.1_postcss@8.4.31 + postcss-minify-params: 5.1.4_postcss@8.4.31 + postcss-minify-selectors: 5.2.1_postcss@8.4.31 + postcss-normalize-charset: 5.1.0_postcss@8.4.31 + postcss-normalize-display-values: 5.1.0_postcss@8.4.31 + postcss-normalize-positions: 5.1.1_postcss@8.4.31 + postcss-normalize-repeat-style: 5.1.1_postcss@8.4.31 + postcss-normalize-string: 5.1.0_postcss@8.4.31 + postcss-normalize-timing-functions: 5.1.0_postcss@8.4.31 + postcss-normalize-unicode: 5.1.1_postcss@8.4.31 + postcss-normalize-url: 5.1.0_postcss@8.4.31 + postcss-normalize-whitespace: 5.1.1_postcss@8.4.31 + postcss-ordered-values: 5.1.3_postcss@8.4.31 + postcss-reduce-initial: 5.1.2_postcss@8.4.31 + postcss-reduce-transforms: 5.1.0_postcss@8.4.31 + postcss-svgo: 5.1.0_postcss@8.4.31 + postcss-unique-selectors: 5.1.1_postcss@8.4.31 + dev: true + + /cssnano-utils/3.1.0_postcss@8.4.31: resolution: {integrity: sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.27 + postcss: 8.4.31 dev: true - /cssnano/5.1.15_postcss@8.4.27: + /cssnano/5.1.15_postcss@8.4.31: resolution: {integrity: sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - cssnano-preset-default: 5.2.14_postcss@8.4.27 + cssnano-preset-default: 5.2.14_postcss@8.4.31 lilconfig: 2.1.0 - postcss: 8.4.27 + postcss: 8.4.31 yaml: 1.10.2 dev: true @@ -9019,13 +9019,13 @@ packages: resolution: {integrity: sha512-chIaY3Vh2mh2Q3RGXttaDIzeiPvaVXJ+C4DAh/w3c37SKZ/U6PGMmuicR2EQQp9bKG8zLMCl7I+PtIoOOPp8Gg==} dev: true - /icss-utils/5.1.0_postcss@8.4.27: + /icss-utils/5.1.0_postcss@8.4.31: resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==} engines: {node: ^10 || ^12 || >= 14} peerDependencies: postcss: ^8.1.0 dependencies: - postcss: 8.4.27 + postcss: 8.4.31 dev: true /ieee754/1.2.1: @@ -12666,16 +12666,16 @@ packages: /postcss-attribute-case-insensitive/4.0.2: resolution: {integrity: sha512-clkFxk/9pcdb4Vkn0hAHq3YnxBQ2p0CGD1dy24jN+reBck+EWxMbxSUqN4Yj7t0w8csl87K6p0gxBe1utkJsYA==} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 postcss-selector-parser: 6.0.13 dev: true - /postcss-calc/8.2.4_postcss@8.4.27: + /postcss-calc/8.2.4_postcss@8.4.31: resolution: {integrity: sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==} peerDependencies: postcss: ^8.2.2 dependencies: - postcss: 8.4.27 + postcss: 8.4.31 postcss-selector-parser: 6.0.13 postcss-value-parser: 4.2.0 dev: true @@ -12684,7 +12684,7 @@ packages: resolution: {integrity: sha512-ZBARCypjEDofW4P6IdPVTLhDNXPRn8T2s1zHbZidW6rPaaZvcnCS2soYFIQJrMZSxiePJ2XIYTlcb2ztr/eT2g==} engines: {node: '>=6.0.0'} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 postcss-values-parser: 2.0.1 dev: true @@ -12693,7 +12693,7 @@ packages: engines: {node: '>=6.0.0'} dependencies: '@csstools/convert-colors': 1.4.0 - postcss: 7.0.32 + postcss: 7.0.39 postcss-values-parser: 2.0.1 dev: true @@ -12701,7 +12701,7 @@ packages: resolution: {integrity: sha512-PF4GDel8q3kkreVXKLAGNpHKilXsZ6xuu+mOQMHWHLPNyjiUBOr75sp5ZKJfmv1MCus5/DWUGcK9hm6qHEnXYw==} engines: {node: '>=6.0.0'} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 postcss-values-parser: 2.0.1 dev: true @@ -12710,7 +12710,7 @@ packages: engines: {node: '>=6.0.0'} dependencies: '@csstools/convert-colors': 1.4.0 - postcss: 7.0.32 + postcss: 7.0.39 postcss-values-parser: 2.0.1 dev: true @@ -12718,11 +12718,11 @@ packages: resolution: {integrity: sha512-aAe3OhkS6qJXBbqzvZth2Au4V3KieR5sRQ4ptb2b2O8wgvB3SJBsdG+jsn2BZbbwekDG8nTfcCNKcSfe/lEy8g==} engines: {node: '>=6.0.0'} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 postcss-values-parser: 2.0.1 dev: true - /postcss-colormin/5.3.1_postcss@8.4.27: + /postcss-colormin/5.3.1_postcss@8.4.31: resolution: {integrity: sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: @@ -12731,18 +12731,18 @@ packages: browserslist: 4.21.9 caniuse-api: 3.0.0 colord: 2.9.3 - postcss: 8.4.27 + postcss: 8.4.31 postcss-value-parser: 4.2.0 dev: true - /postcss-convert-values/5.1.3_postcss@8.4.27: + /postcss-convert-values/5.1.3_postcss@8.4.31: resolution: {integrity: sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: browserslist: 4.21.9 - postcss: 8.4.27 + postcss: 8.4.31 postcss-value-parser: 4.2.0 dev: true @@ -12750,14 +12750,14 @@ packages: resolution: {integrity: sha512-c9s5iX0Ge15o00HKbuRuTqNndsJUbaXdiNsksnVH8H4gdc+zbLzr/UasOwNG6CTDpLFekVY4672eWdiiWu2GUg==} engines: {node: '>=6.0.0'} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 dev: true /postcss-custom-properties/8.0.11: resolution: {integrity: sha512-nm+o0eLdYqdnJ5abAJeXp4CEU1c1k+eB2yMCvhgzsds/e0umabFrN6HoTy/8Q4K5ilxERdl/JD1LO5ANoYBeMA==} engines: {node: '>=6.0.0'} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 postcss-values-parser: 2.0.1 dev: true @@ -12765,7 +12765,7 @@ packages: resolution: {integrity: sha512-DSGDhqinCqXqlS4R7KGxL1OSycd1lydugJ1ky4iRXPHdBRiozyMHrdu0H3o7qNOCiZwySZTUI5MV0T8QhCLu+w==} engines: {node: '>=6.0.0'} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 postcss-selector-parser: 5.0.0 dev: true @@ -12773,51 +12773,51 @@ packages: resolution: {integrity: sha512-3pm4oq8HYWMZePJY+5ANriPs3P07q+LW6FAdTlkFH2XqDdP4HeeJYMOzn0HYLhRSjBO3fhiqSwwU9xEULSrPgw==} engines: {node: '>=4.0.0'} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 postcss-selector-parser: 5.0.0 dev: true - /postcss-discard-comments/5.1.2_postcss@8.4.27: + /postcss-discard-comments/5.1.2_postcss@8.4.31: resolution: {integrity: sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.27 + postcss: 8.4.31 dev: true - /postcss-discard-duplicates/5.1.0_postcss@8.4.27: + /postcss-discard-duplicates/5.1.0_postcss@8.4.31: resolution: {integrity: sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.27 + postcss: 8.4.31 dev: true - /postcss-discard-empty/5.1.1_postcss@8.4.27: + /postcss-discard-empty/5.1.1_postcss@8.4.31: resolution: {integrity: sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.27 + postcss: 8.4.31 dev: true - /postcss-discard-overridden/5.1.0_postcss@8.4.27: + /postcss-discard-overridden/5.1.0_postcss@8.4.31: resolution: {integrity: sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.27 + postcss: 8.4.31 dev: true /postcss-double-position-gradients/1.0.0: resolution: {integrity: sha512-G+nV8EnQq25fOI8CH/B6krEohGWnF5+3A6H/+JEpOncu5dCnkS1QQ6+ct3Jkaepw1NGVqqOZH6lqrm244mCftA==} engines: {node: '>=6.0.0'} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 postcss-values-parser: 2.0.1 dev: true @@ -12825,55 +12825,55 @@ packages: resolution: {integrity: sha512-rwac4BuZlITeUbiBq60h/xbLzXY43qOsIErngWa4l7Mt+RaSkT7QBjXVGTcBHupykkblHMDrBFh30zchYPaOUw==} engines: {node: '>=6.0.0'} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 postcss-values-parser: 2.0.1 dev: true /postcss-flexbugs-fixes/4.2.1: resolution: {integrity: sha512-9SiofaZ9CWpQWxOwRh1b/r85KD5y7GgvsNt1056k6OYLvWUun0czCvogfJgylC22uJTwW1KzY3Gz65NZRlvoiQ==} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 dev: true /postcss-focus-visible/4.0.0: resolution: {integrity: sha512-Z5CkWBw0+idJHSV6+Bgf2peDOFf/x4o+vX/pwcNYrWpXFrSfTkQ3JQ1ojrq9yS+upnAlNRHeg8uEwFTgorjI8g==} engines: {node: '>=6.0.0'} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 dev: true /postcss-focus-within/3.0.0: resolution: {integrity: sha512-W0APui8jQeBKbCGZudW37EeMCjDeVxKgiYfIIEo8Bdh5SpB9sxds/Iq8SEuzS0Q4YFOlG7EPFulbbxujpkrV2w==} engines: {node: '>=6.0.0'} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 dev: true /postcss-font-variant/4.0.1: resolution: {integrity: sha512-I3ADQSTNtLTTd8uxZhtSOrTCQ9G4qUVKPjHiDk0bV75QSxXjVWiJVJ2VLdspGUi9fbW9BcjKJoRvxAH1pckqmA==} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 dev: true /postcss-gap-properties/2.0.0: resolution: {integrity: sha512-QZSqDaMgXCHuHTEzMsS2KfVDOq7ZFiknSpkrPJY6jmxbugUPTuSzs/vuE5I3zv0WAS+3vhrlqhijiprnuQfzmg==} engines: {node: '>=6.0.0'} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 dev: true /postcss-image-set-function/3.0.1: resolution: {integrity: sha512-oPTcFFip5LZy8Y/whto91L9xdRHCWEMs3e1MdJxhgt4jy2WYXfhkng59fH5qLXSCPN8k4n94p1Czrfe5IOkKUw==} engines: {node: '>=6.0.0'} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 postcss-values-parser: 2.0.1 dev: true /postcss-initial/3.0.4: resolution: {integrity: sha512-3RLn6DIpMsK1l5UUy9jxQvoDeUN4gP939tDcKUHD/kM8SGSKbFAnvkpFpj3Bhtz3HGk1jWY5ZNWX6mPta5M9fg==} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 dev: true /postcss-js/2.0.3: @@ -12888,7 +12888,7 @@ packages: engines: {node: '>=6.0.0'} dependencies: '@csstools/convert-colors': 1.4.0 - postcss: 7.0.32 + postcss: 7.0.39 postcss-values-parser: 2.0.1 dev: true @@ -12900,7 +12900,7 @@ packages: import-cwd: 2.1.0 dev: true - /postcss-load-config/3.1.4_postcss@8.4.27: + /postcss-load-config/3.1.4_postcss@8.4.31: resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==} engines: {node: '>= 10'} peerDependencies: @@ -12913,7 +12913,7 @@ packages: optional: true dependencies: lilconfig: 2.1.0 - postcss: 8.4.27 + postcss: 8.4.31 yaml: 1.10.2 dev: true @@ -12922,7 +12922,7 @@ packages: engines: {node: '>= 6'} dependencies: loader-utils: 1.4.2 - postcss: 7.0.32 + postcss: 7.0.39 postcss-load-config: 2.1.2 schema-utils: 1.0.0 dev: true @@ -12931,28 +12931,28 @@ packages: resolution: {integrity: sha512-1SUKdJc2vuMOmeItqGuNaC+N8MzBWFWEkAnRnLpFYj1tGGa7NqyVBujfRtgNa2gXR+6RkGUiB2O5Vmh7E2RmiA==} engines: {node: '>=6.0.0'} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 dev: true /postcss-media-minmax/4.0.0: resolution: {integrity: sha512-fo9moya6qyxsjbFAYl97qKO9gyre3qvbMnkOZeZwlsW6XYFsvs2DMGDlchVLfAd8LHPZDxivu/+qW2SMQeTHBw==} engines: {node: '>=6.0.0'} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 dev: true - /postcss-merge-longhand/5.1.7_postcss@8.4.27: + /postcss-merge-longhand/5.1.7_postcss@8.4.31: resolution: {integrity: sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.27 + postcss: 8.4.31 postcss-value-parser: 4.2.0 - stylehacks: 5.1.1_postcss@8.4.27 + stylehacks: 5.1.1_postcss@8.4.31 dev: true - /postcss-merge-rules/5.1.4_postcss@8.4.27: + /postcss-merge-rules/5.1.4_postcss@8.4.31: resolution: {integrity: sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: @@ -12960,97 +12960,97 @@ packages: dependencies: browserslist: 4.21.9 caniuse-api: 3.0.0 - cssnano-utils: 3.1.0_postcss@8.4.27 - postcss: 8.4.27 + cssnano-utils: 3.1.0_postcss@8.4.31 + postcss: 8.4.31 postcss-selector-parser: 6.0.13 dev: true - /postcss-minify-font-values/5.1.0_postcss@8.4.27: + /postcss-minify-font-values/5.1.0_postcss@8.4.31: resolution: {integrity: sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.27 + postcss: 8.4.31 postcss-value-parser: 4.2.0 dev: true - /postcss-minify-gradients/5.1.1_postcss@8.4.27: + /postcss-minify-gradients/5.1.1_postcss@8.4.31: resolution: {integrity: sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: colord: 2.9.3 - cssnano-utils: 3.1.0_postcss@8.4.27 - postcss: 8.4.27 + cssnano-utils: 3.1.0_postcss@8.4.31 + postcss: 8.4.31 postcss-value-parser: 4.2.0 dev: true - /postcss-minify-params/5.1.4_postcss@8.4.27: + /postcss-minify-params/5.1.4_postcss@8.4.31: resolution: {integrity: sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: browserslist: 4.21.9 - cssnano-utils: 3.1.0_postcss@8.4.27 - postcss: 8.4.27 + cssnano-utils: 3.1.0_postcss@8.4.31 + postcss: 8.4.31 postcss-value-parser: 4.2.0 dev: true - /postcss-minify-selectors/5.2.1_postcss@8.4.27: + /postcss-minify-selectors/5.2.1_postcss@8.4.31: resolution: {integrity: sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.27 + postcss: 8.4.31 postcss-selector-parser: 6.0.13 dev: true - /postcss-modules-extract-imports/3.0.0_postcss@8.4.27: + /postcss-modules-extract-imports/3.0.0_postcss@8.4.31: resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==} engines: {node: ^10 || ^12 || >= 14} peerDependencies: postcss: ^8.1.0 dependencies: - postcss: 8.4.27 + postcss: 8.4.31 dev: true - /postcss-modules-local-by-default/4.0.3_postcss@8.4.27: + /postcss-modules-local-by-default/4.0.3_postcss@8.4.31: resolution: {integrity: sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==} engines: {node: ^10 || ^12 || >= 14} peerDependencies: postcss: ^8.1.0 dependencies: - icss-utils: 5.1.0_postcss@8.4.27 - postcss: 8.4.27 + icss-utils: 5.1.0_postcss@8.4.31 + postcss: 8.4.31 postcss-selector-parser: 6.0.13 postcss-value-parser: 4.2.0 dev: true - /postcss-modules-scope/3.0.0_postcss@8.4.27: + /postcss-modules-scope/3.0.0_postcss@8.4.31: resolution: {integrity: sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==} engines: {node: ^10 || ^12 || >= 14} peerDependencies: postcss: ^8.1.0 dependencies: - postcss: 8.4.27 + postcss: 8.4.31 postcss-selector-parser: 6.0.13 dev: true - /postcss-modules-values/4.0.0_postcss@8.4.27: + /postcss-modules-values/4.0.0_postcss@8.4.31: resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==} engines: {node: ^10 || ^12 || >= 14} peerDependencies: postcss: ^8.1.0 dependencies: - icss-utils: 5.1.0_postcss@8.4.27 - postcss: 8.4.27 + icss-utils: 5.1.0_postcss@8.4.31 + postcss: 8.4.31 dev: true - /postcss-modules/4.3.1_postcss@8.4.27: + /postcss-modules/4.3.1_postcss@8.4.31: resolution: {integrity: sha512-ItUhSUxBBdNamkT3KzIZwYNNRFKmkJrofvC2nWab3CPKhYBQ1f27XXh1PAPE27Psx58jeelPsxWB/+og+KEH0Q==} peerDependencies: postcss: ^8.0.0 @@ -13058,11 +13058,11 @@ packages: generic-names: 4.0.0 icss-replace-symbols: 1.1.0 lodash.camelcase: 4.3.0 - postcss: 8.4.27 - postcss-modules-extract-imports: 3.0.0_postcss@8.4.27 - postcss-modules-local-by-default: 4.0.3_postcss@8.4.27 - postcss-modules-scope: 3.0.0_postcss@8.4.27 - postcss-modules-values: 4.0.0_postcss@8.4.27 + postcss: 8.4.31 + postcss-modules-extract-imports: 3.0.0_postcss@8.4.31 + postcss-modules-local-by-default: 4.0.3_postcss@8.4.31 + postcss-modules-scope: 3.0.0_postcss@8.4.31 + postcss-modules-values: 4.0.0_postcss@8.4.31 string-hash: 1.1.3 dev: true @@ -13070,108 +13070,108 @@ packages: resolution: {integrity: sha512-FrorPb0H3nuVq0Sff7W2rnc3SmIcruVC6YwpcS+k687VxyxO33iE1amna7wHuRVzM8vfiYofXSBHNAZ3QhLvYg==} engines: {node: '>=6.0.0'} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 dev: true - /postcss-normalize-charset/5.1.0_postcss@8.4.27: + /postcss-normalize-charset/5.1.0_postcss@8.4.31: resolution: {integrity: sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.27 + postcss: 8.4.31 dev: true - /postcss-normalize-display-values/5.1.0_postcss@8.4.27: + /postcss-normalize-display-values/5.1.0_postcss@8.4.31: resolution: {integrity: sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.27 + postcss: 8.4.31 postcss-value-parser: 4.2.0 dev: true - /postcss-normalize-positions/5.1.1_postcss@8.4.27: + /postcss-normalize-positions/5.1.1_postcss@8.4.31: resolution: {integrity: sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.27 + postcss: 8.4.31 postcss-value-parser: 4.2.0 dev: true - /postcss-normalize-repeat-style/5.1.1_postcss@8.4.27: + /postcss-normalize-repeat-style/5.1.1_postcss@8.4.31: resolution: {integrity: sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.27 + postcss: 8.4.31 postcss-value-parser: 4.2.0 dev: true - /postcss-normalize-string/5.1.0_postcss@8.4.27: + /postcss-normalize-string/5.1.0_postcss@8.4.31: resolution: {integrity: sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.27 + postcss: 8.4.31 postcss-value-parser: 4.2.0 dev: true - /postcss-normalize-timing-functions/5.1.0_postcss@8.4.27: + /postcss-normalize-timing-functions/5.1.0_postcss@8.4.31: resolution: {integrity: sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.27 + postcss: 8.4.31 postcss-value-parser: 4.2.0 dev: true - /postcss-normalize-unicode/5.1.1_postcss@8.4.27: + /postcss-normalize-unicode/5.1.1_postcss@8.4.31: resolution: {integrity: sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: browserslist: 4.21.9 - postcss: 8.4.27 + postcss: 8.4.31 postcss-value-parser: 4.2.0 dev: true - /postcss-normalize-url/5.1.0_postcss@8.4.27: + /postcss-normalize-url/5.1.0_postcss@8.4.31: resolution: {integrity: sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: normalize-url: 6.1.0 - postcss: 8.4.27 + postcss: 8.4.31 postcss-value-parser: 4.2.0 dev: true - /postcss-normalize-whitespace/5.1.1_postcss@8.4.27: + /postcss-normalize-whitespace/5.1.1_postcss@8.4.31: resolution: {integrity: sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.27 + postcss: 8.4.31 postcss-value-parser: 4.2.0 dev: true - /postcss-ordered-values/5.1.3_postcss@8.4.27: + /postcss-ordered-values/5.1.3_postcss@8.4.31: resolution: {integrity: sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - cssnano-utils: 3.1.0_postcss@8.4.27 - postcss: 8.4.27 + cssnano-utils: 3.1.0_postcss@8.4.31 + postcss: 8.4.31 postcss-value-parser: 4.2.0 dev: true @@ -13179,20 +13179,20 @@ packages: resolution: {integrity: sha512-aK0fHc9CBNx8jbzMYhshZcEv8LtYnBIRYQD5i7w/K/wS9c2+0NSR6B3OVMu5y0hBHYLcMGjfU+dmWYNKH0I85g==} engines: {node: '>=6.0.0'} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 dev: true /postcss-page-break/2.0.0: resolution: {integrity: sha512-tkpTSrLpfLfD9HvgOlJuigLuk39wVTbbd8RKcy8/ugV2bNBUW3xU+AIqyxhDrQr1VUj1RmyJrBn1YWrqUm9zAQ==} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 dev: true /postcss-place/4.0.1: resolution: {integrity: sha512-Zb6byCSLkgRKLODj/5mQugyuj9bvAAw9LqJJjgwz5cYryGeXfFZfSXoP1UfveccFmeq0b/2xxwcTEVScnqGxBg==} engines: {node: '>=6.0.0'} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 postcss-values-parser: 2.0.1 dev: true @@ -13207,7 +13207,7 @@ packages: css-has-pseudo: 0.10.0 css-prefers-color-scheme: 3.1.1 cssdb: 4.4.0 - postcss: 7.0.32 + postcss: 7.0.39 postcss-attribute-case-insensitive: 4.0.2 postcss-color-functional-notation: 2.0.1 postcss-color-gray: 5.0.0 @@ -13243,11 +13243,11 @@ packages: resolution: {integrity: sha512-lgXW9sYJdLqtmw23otOzrtbDXofUdfYzNm4PIpNE322/swES3VU9XlXHeJS46zT2onFO7V1QFdD4Q9LiZj8mew==} engines: {node: '>=6.0.0'} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 postcss-selector-parser: 5.0.0 dev: true - /postcss-reduce-initial/5.1.2_postcss@8.4.27: + /postcss-reduce-initial/5.1.2_postcss@8.4.31: resolution: {integrity: sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: @@ -13255,44 +13255,44 @@ packages: dependencies: browserslist: 4.21.9 caniuse-api: 3.0.0 - postcss: 8.4.27 + postcss: 8.4.31 dev: true - /postcss-reduce-transforms/5.1.0_postcss@8.4.27: + /postcss-reduce-transforms/5.1.0_postcss@8.4.31: resolution: {integrity: sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.27 + postcss: 8.4.31 postcss-value-parser: 4.2.0 dev: true /postcss-replace-overflow-wrap/3.0.0: resolution: {integrity: sha512-2T5hcEHArDT6X9+9dVSPQdo7QHzG4XKclFT8rU5TzJPDN7RIRTbO9c4drUISOVemLj03aezStHCR2AIcr8XLpw==} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 dev: true /postcss-safe-parser/4.0.2: resolution: {integrity: sha512-Uw6ekxSWNLCPesSv/cmqf2bY/77z11O7jZGPax3ycZMFU/oi2DMH9i89AdHc1tRwFg/arFoEwX0IS3LCUxJh1g==} engines: {node: '>=6.0.0'} dependencies: - postcss: 7.0.32 + postcss: 7.0.39 dev: true /postcss-selector-matches/4.0.0: resolution: {integrity: sha512-LgsHwQR/EsRYSqlwdGzeaPKVT0Ml7LAT6E75T8W8xLJY62CE4S/l03BWIt3jT8Taq22kXP08s2SfTSzaraoPww==} dependencies: balanced-match: 1.0.2 - postcss: 7.0.32 + postcss: 7.0.39 dev: true /postcss-selector-not/4.0.1: resolution: {integrity: sha512-YolvBgInEK5/79C+bdFMyzqTg6pkYqDbzZIST/PDMqa/o3qtXenD05apBG2jLgT0/BQ77d4U2UK12jWpilqMAQ==} dependencies: balanced-match: 1.0.2 - postcss: 7.0.32 + postcss: 7.0.39 dev: true /postcss-selector-parser/5.0.0: @@ -13312,28 +13312,28 @@ packages: util-deprecate: 1.0.2 dev: true - /postcss-svgo/5.1.0_postcss@8.4.27: + /postcss-svgo/5.1.0_postcss@8.4.31: resolution: {integrity: sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.27 + postcss: 8.4.31 postcss-value-parser: 4.2.0 svgo: 2.8.0 dev: true - /postcss-unique-selectors/5.1.1_postcss@8.4.27: + /postcss-unique-selectors/5.1.1_postcss@8.4.31: resolution: {integrity: sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: - postcss: 8.4.27 + postcss: 8.4.31 postcss-selector-parser: 6.0.13 dev: true - /postcss-url/10.1.3_postcss@8.4.27: + /postcss-url/10.1.3_postcss@8.4.31: resolution: {integrity: sha512-FUzyxfI5l2tKmXdYc6VTu3TWZsInayEKPbiyW+P6vmmIrrb4I6CGX0BFoewgYHLK+oIL5FECEK02REYRpBvUCw==} engines: {node: '>=10'} peerDependencies: @@ -13342,7 +13342,7 @@ packages: make-dir: 3.1.0 mime: 2.5.2 minimatch: 3.0.8 - postcss: 8.4.27 + postcss: 8.4.31 xxhashjs: 0.2.2 dev: true @@ -13376,8 +13376,8 @@ packages: source-map: 0.6.1 dev: true - /postcss/8.4.27: - resolution: {integrity: sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==} + /postcss/8.4.31: + resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==} engines: {node: ^10 || ^12 || >=14} dependencies: nanoid: 3.3.6 @@ -15168,7 +15168,7 @@ packages: xml-js: 1.6.11 dev: true - /rollup-plugin-postcss/4.0.2_postcss@8.4.27: + /rollup-plugin-postcss/4.0.2_postcss@8.4.31: resolution: {integrity: sha512-05EaY6zvZdmvPUDi3uCcAQoESDcYnv8ogJJQRp6V5kZ6J6P7uAVJlrTZcaaA20wTH527YTnKfkAoPxWI/jPp4w==} engines: {node: '>=10'} peerDependencies: @@ -15176,13 +15176,13 @@ packages: dependencies: chalk: 4.1.2 concat-with-sourcemaps: 1.1.0 - cssnano: 5.1.15_postcss@8.4.27 + cssnano: 5.1.15_postcss@8.4.31 import-cwd: 3.0.0 p-queue: 6.6.2 pify: 5.0.0 - postcss: 8.4.27 - postcss-load-config: 3.1.4_postcss@8.4.27 - postcss-modules: 4.3.1_postcss@8.4.27 + postcss: 8.4.31 + postcss-load-config: 3.1.4_postcss@8.4.31 + postcss-modules: 4.3.1_postcss@8.4.31 promise.series: 0.2.0 resolve: 1.22.2 rollup-pluginutils: 2.8.2 @@ -16105,14 +16105,14 @@ packages: inline-style-parser: 0.1.1 dev: true - /stylehacks/5.1.1_postcss@8.4.27: + /stylehacks/5.1.1_postcss@8.4.31: resolution: {integrity: sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==} engines: {node: ^10 || ^12 || >=14.0} peerDependencies: postcss: ^8.2.15 dependencies: browserslist: 4.21.9 - postcss: 8.4.27 + postcss: 8.4.31 postcss-selector-parser: 6.0.13 dev: true From b244e56151e38de173098f6e05b61f3cc73bff18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=9D=B0?= Date: Tue, 10 Oct 2023 10:30:04 +0800 Subject: [PATCH 17/32] =?UTF-8?q?perf:=20=E5=AF=B9=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=BA=93=E7=BB=84=E4=BB=B6=E8=BF=9B=E8=A1=8C=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 5 +- packages/react-native/src/accordion/index.tsx | 17 +- .../src/accordion/useAccordion.ts | 9 +- .../react-native/src/action-sheet/index.tsx | 10 +- .../src/avatar/Accessory/index.tsx | 87 ++++----- .../react-native/src/avatar/Avatar/index.tsx | 39 ++-- packages/react-native/src/avatar/type.ts | 4 +- packages/react-native/src/badge/index.tsx | 78 +++++++- packages/react-native/src/badge/useBadge.ts | 29 +++ packages/react-native/src/badge/useBadge.tsx | 83 --------- .../react-native/src/button-group/Item.tsx | 12 +- packages/react-native/src/button/index.tsx | 8 +- packages/react-native/src/button/useButton.ts | 6 +- packages/react-native/src/card/index.tsx | 63 ++++--- .../react-native/src/carousel/Bullets.tsx | 38 ++-- .../react-native/src/carousel/useCarousel.ts | 14 +- .../src/checkbox/CheckboxItem.tsx | 15 +- .../react-native/src/collapse-text/index.tsx | 21 +-- .../react-native/src/count-down/index.tsx | 2 +- packages/react-native/src/empty/index.tsx | 14 +- .../react-native/src/float-button/Actions.tsx | 4 +- packages/react-native/src/flow/index.tsx | 6 +- packages/react-native/src/flow/step.tsx | 16 +- packages/react-native/src/form/FormItem.tsx | 11 +- .../react-native/src/form/FormListItem.tsx | 11 +- .../react-native/src/image-header/index.tsx | 8 +- packages/react-native/src/input/InputItem.tsx | 32 +++- packages/react-native/src/input/TextArea.tsx | 27 ++- packages/react-native/src/input/index.tsx | 70 +++++--- packages/react-native/src/input/useInput.ts | 43 +++++ packages/react-native/src/input/useInput.tsx | 77 -------- .../react-native/src/input/useInputItem.ts | 43 +++++ .../react-native/src/input/useInputItem.tsx | 76 -------- .../react-native/src/input/useTextArea.ts | 23 +++ .../react-native/src/input/useTextArea.tsx | 53 ------ packages/react-native/src/list-item/index.tsx | 96 ++++++---- packages/react-native/src/list/index.tsx | 82 ++++----- packages/react-native/src/menu/Chevron.tsx | 4 +- packages/react-native/src/menu/MenuGroup.tsx | 4 +- packages/react-native/src/menu/useGroup.ts | 2 +- .../src/notice-bar/AnimatedNotice.tsx | 4 +- .../react-native/src/notice-bar/index.tsx | 40 +++-- .../react-native/src/notify/NotifyRoot.tsx | 167 ++++++++++-------- .../react-native/src/pagination/index.tsx | 43 ++--- .../src/pagination/usePagination.ts | 23 ++- packages/react-native/src/pressable/index.tsx | 57 +++--- packages/react-native/src/radio/RadioItem.tsx | 10 +- packages/react-native/src/result/index.tsx | 32 ++-- .../react-native/src/scroll-number/index.tsx | 23 ++- .../react-native/src/search-bar/index.tsx | 8 +- packages/react-native/src/slider/index.tsx | 24 ++- .../src/svg-icon/IconArrowdown.tsx | 9 +- .../react-native/src/svg-icon/IconBells.tsx | 9 +- .../react-native/src/svg-icon/IconCheck.tsx | 9 +- .../src/svg-icon/IconCheckboxChecked.tsx | 9 +- .../src/svg-icon/IconCheckboxHalfchecked.tsx | 9 +- .../src/svg-icon/IconCheckboxUnchecked.tsx | 9 +- .../src/svg-icon/IconCheckcircle.tsx | 9 +- .../src/svg-icon/IconCheckcircleo.tsx | 9 +- .../src/svg-icon/IconClockcircleo.tsx | 9 +- .../react-native/src/svg-icon/IconClose.tsx | 9 +- .../src/svg-icon/IconClosecircleo.tsx | 9 +- .../react-native/src/svg-icon/IconDate.tsx | 9 +- .../react-native/src/svg-icon/IconDown.tsx | 9 +- .../src/svg-icon/IconEllipsis.tsx | 9 +- .../src/svg-icon/IconEyeclose.tsx | 9 +- .../react-native/src/svg-icon/IconEyeopen.tsx | 9 +- .../react-native/src/svg-icon/IconLeft.tsx | 9 +- .../react-native/src/svg-icon/IconMinus.tsx | 9 +- .../react-native/src/svg-icon/IconPlus.tsx | 9 +- .../src/svg-icon/IconRadioChecked.tsx | 9 +- .../src/svg-icon/IconRadioUnchecked.tsx | 9 +- .../react-native/src/svg-icon/IconReload.tsx | 9 +- .../react-native/src/svg-icon/IconRight.tsx | 9 +- .../react-native/src/svg-icon/IconSearch.tsx | 9 +- packages/react-native/src/svg-icon/IconUp.tsx | 9 +- .../react-native/src/swipe-row/context.tsx | 20 ++- packages/react-native/src/swipe-row/index.tsx | 2 +- .../react-native/src/swipe-row/useSwipeRow.ts | 6 +- packages/react-native/src/switch/index.tsx | 10 +- packages/react-native/src/table/Cell.tsx | 6 +- packages/react-native/src/table/Head.tsx | 6 +- packages/react-native/src/table/Rows.tsx | 6 +- packages/react-native/src/table/index.tsx | 4 +- packages/react-native/src/tag/index.tsx | 85 ++++----- packages/react-native/src/text/index.tsx | 7 +- .../src/timeline/HorizontalTimeline.tsx | 123 +++++++------ .../src/timeline/VerticalTimeline.tsx | 140 ++++++++------- .../react-native/src/tooltip/Triangle.tsx | 6 +- packages/react-native/src/tooltip/index.tsx | 86 ++++++--- packages/react-native/src/tree/Checkbox.tsx | 8 +- packages/react-native/src/tree/Chevron.tsx | 4 +- packages/react-native/src/tree/TreeGroup.tsx | 6 +- packages/react-native/src/tree/useGroup.ts | 2 +- .../react-native/src/white-space/index.tsx | 4 +- .../react-native/src/wing-blank/index.tsx | 4 +- pnpm-lock.yaml | 103 +++++------ 97 files changed, 1260 insertions(+), 1276 deletions(-) create mode 100644 packages/react-native/src/badge/useBadge.ts delete mode 100644 packages/react-native/src/badge/useBadge.tsx create mode 100644 packages/react-native/src/input/useInput.ts delete mode 100644 packages/react-native/src/input/useInput.tsx create mode 100644 packages/react-native/src/input/useInputItem.ts delete mode 100644 packages/react-native/src/input/useInputItem.tsx create mode 100644 packages/react-native/src/input/useTextArea.ts delete mode 100644 packages/react-native/src/input/useTextArea.tsx diff --git a/package.json b/package.json index c06a538e94..b6eaceda85 100644 --- a/package.json +++ b/package.json @@ -59,5 +59,8 @@ "engines": { "node": ">=16", "pnpm": ">=7.0.0" + }, + "resolutions": { + "@types/react": "17.0.43" } -} +} \ No newline at end of file diff --git a/packages/react-native/src/accordion/index.tsx b/packages/react-native/src/accordion/index.tsx index 3333a625e2..91d8cc3faf 100644 --- a/packages/react-native/src/accordion/index.tsx +++ b/packages/react-native/src/accordion/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, useState } from 'react'; +import React, { FC, useMemo, useState } from 'react'; import { FlatList } from 'react-native'; import Animated from 'react-native-reanimated'; @@ -82,7 +82,7 @@ const AccordionItem: FC< onPress, }); - const renderTitle = () => { + const Title = useMemo(() => { if (typeof title === 'string') { return ( @@ -91,17 +91,18 @@ const AccordionItem: FC< ); } return title; - }; + }, [title]); - const renderContent = () => { - if (typeof content === 'string') + const Content = useMemo(() => { + if (typeof content === 'string') { return ( {content} ); + } return content; - }; + }, [content]); return ( @@ -122,7 +123,7 @@ const AccordionItem: FC< headerStyle, ]} > - {renderTitle()} + {Title} {customIcon ? ( customIcon({ progress }) ) : ( @@ -133,7 +134,7 @@ const AccordionItem: FC< - {renderContent()} + {Content} diff --git a/packages/react-native/src/accordion/useAccordion.ts b/packages/react-native/src/accordion/useAccordion.ts index 08dfc06f19..b55916d219 100644 --- a/packages/react-native/src/accordion/useAccordion.ts +++ b/packages/react-native/src/accordion/useAccordion.ts @@ -52,13 +52,8 @@ export default function useAccordion({ }, [multiple, currentIndex, index, onPress]); const handlePress = () => { + progress.value = withTiming(progress.value === 0 ? 1 : 0); onPress(index); - - if (progress.value === 0) { - progress.value = withTiming(1); - } else { - progress.value = withTiming(0); - } }; return { @@ -66,7 +61,7 @@ export default function useAccordion({ iconStyle, progress, - handleLayout: useMemoizedFn(handleLayout), + handleLayout, handlePress: useMemoizedFn(handlePress), }; } diff --git a/packages/react-native/src/action-sheet/index.tsx b/packages/react-native/src/action-sheet/index.tsx index a955e75fad..f50c3a3f86 100644 --- a/packages/react-native/src/action-sheet/index.tsx +++ b/packages/react-native/src/action-sheet/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, ReactNode } from 'react'; +import React, { FC, ReactNode, useMemo } from 'react'; import { StyleSheet } from 'react-native'; import { useTheme } from '@shopify/restyle'; @@ -52,8 +52,9 @@ const ActionSheet: FC = ({ }, }); - const renderTitle = () => { + const Title = useMemo(() => { if (!title) return null; + if (typeof title === 'string') return ( @@ -62,8 +63,9 @@ const ActionSheet: FC = ({ ); + return {title}; - }; + }, [title]); return ( = ({ maskClosable={false} maskVisible={true} > - {renderTitle()} + {Title} {items.map((item, index) => ( { - /** 挂件的reader */ - const iconReader = () => { - if (url) { - const source = typeof url === 'string' ? { uri: url } : url; - return ( - - ); - } - if (component) { - return component; - } - return null; - }; - /** 挂件的位置 */ - const styles = StyleSheet.create({ - position: { - borderRadius: size / 2, - }, - top: { - top: 0, - }, - bottom: { - bottom: 0, - }, - left: { - left: 0, - }, - right: { - right: 0, - }, - }); - return ( - {iconReader()} + ); }; Accessory.displayName = 'Accessory'; +/** 挂件的位置 */ +const styles = StyleSheet.create({ + top: { + top: 0, + }, + bottom: { + bottom: 0, + }, + left: { + left: 0, + }, + right: { + right: 0, + }, +}); + export default Accessory; + +const Icon = memo(({ url, size, component }: Pick) => { + if (url) { + const source = typeof url === 'string' ? { uri: url } : url; + return ( + + ); + } + if (component) { + return component; + } + return null; +}); diff --git a/packages/react-native/src/avatar/Avatar/index.tsx b/packages/react-native/src/avatar/Avatar/index.tsx index 96ab9d5d29..54bd074881 100644 --- a/packages/react-native/src/avatar/Avatar/index.tsx +++ b/packages/react-native/src/avatar/Avatar/index.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { Image, StyleSheet } from 'react-native'; import { useTheme } from '@shopify/restyle'; @@ -27,7 +27,29 @@ const Avatar: FC = ({ title, url, textStyle, ...props }) => { }, }); - const renderImage = () => { + return ( + + + + ); +}; +Avatar.displayName = 'Avatar'; + +export default Avatar; + +const Content = memo( + ({ + url, + title, + width, + height, + avatarRadius, + textStyle, + }: Pick & { + width: number; + height: number; + avatarRadius: number; + }) => { if (!!url) return ( = ({ title, url, textStyle, ...props }) => { ); return null; - }; - - return ( - - {renderImage()} - - ); -}; -Avatar.displayName = 'Avatar'; - -export default Avatar; + } +); diff --git a/packages/react-native/src/avatar/type.ts b/packages/react-native/src/avatar/type.ts index 69443a20b8..6c6b9deb46 100644 --- a/packages/react-native/src/avatar/type.ts +++ b/packages/react-native/src/avatar/type.ts @@ -1,4 +1,4 @@ -import { PropsWithChildren, ReactNode } from 'react'; +import { PropsWithChildren, ReactElement } from 'react'; import { TextStyle, ViewStyle } from 'react-native'; export interface AccessoryProps { @@ -7,7 +7,7 @@ export interface AccessoryProps { /** 使用图片时的值 */ url?: string | number; /** 使用自定义组件 */ - component?: ReactNode; + component?: ReactElement; /** 挂件垂直方向位置 */ top?: boolean; /** 挂件水平方向位置 */ diff --git a/packages/react-native/src/badge/index.tsx b/packages/react-native/src/badge/index.tsx index 7c2999ee88..552cbc686f 100644 --- a/packages/react-native/src/badge/index.tsx +++ b/packages/react-native/src/badge/index.tsx @@ -1,9 +1,11 @@ -import React, { cloneElement, FC, ReactElement } from 'react'; -import { TextStyle, ViewStyle } from 'react-native'; +import React, { cloneElement, FC, memo, ReactElement } from 'react'; +import { StyleSheet, TextStyle, ViewStyle } from 'react-native'; import Box from '../box'; +import Text from '../text'; import useBadge from './useBadge'; +const DOT_SIZE = 8; // 默认点大小 export interface BadgeProps { /** 徽标内容 */ text?: string | number; @@ -19,18 +21,80 @@ export interface BadgeProps { children: ReactElement; } -const Badge: FC = props => { - const { renderContent, onBadgeLayout, width, height } = useBadge(props); +const Badge: FC = ({ + type = 'text', + containerStyle = {}, + textStyle = {}, + text, + max = 99, + children, +}: BadgeProps) => { + const { onBadgeLayout, badgeOffset, layout } = useBadge(); return ( - - {cloneElement(props.children, { + + {cloneElement(children, { onLayout: onBadgeLayout, })} - {renderContent()} + ); }; Badge.displayName = 'Badge'; export default Badge; + +const Content = memo( + ({ + type, + text, + max, + containerStyle, + textStyle, + badgeOffset, + }: Pick & { + badgeOffset: { top: number; right: number }; + }) => { + text = typeof text === 'number' && text > max! ? `${max}+` : text; + + const isZero = text === '0' || text === 0; + const isEmpty = text === null || text === undefined || text === ''; + const isHidden = isEmpty || isZero; + + if (isHidden) return null; + + if (type === 'dot') + return ( + + ); + return ( + + + {text} + + + ); + } +); diff --git a/packages/react-native/src/badge/useBadge.ts b/packages/react-native/src/badge/useBadge.ts new file mode 100644 index 0000000000..657e2dbb5f --- /dev/null +++ b/packages/react-native/src/badge/useBadge.ts @@ -0,0 +1,29 @@ +import { LayoutChangeEvent } from 'react-native'; + +import { useSafeState } from '@td-design/rn-hooks'; + +export default function useBadge() { + const [layout, setLayout] = useSafeState({ width: 0, height: 0 }); + const [badgeOffset, setBadgeOffset] = useSafeState({ + top: 0, + right: 0, + }); + + const onBadgeLayout = (event: LayoutChangeEvent) => { + const { width, height } = event.nativeEvent.layout; + const newX = Math.round(-width / 2); + const newY = Math.round(-height / 2); + + setLayout({ width, height }); + + if (badgeOffset.top !== newY || badgeOffset.right !== newX) { + setBadgeOffset({ top: newY, right: newX }); + } + }; + + return { + badgeOffset, + layout, + onBadgeLayout, + }; +} diff --git a/packages/react-native/src/badge/useBadge.tsx b/packages/react-native/src/badge/useBadge.tsx deleted file mode 100644 index e4b1ff9bab..0000000000 --- a/packages/react-native/src/badge/useBadge.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import React, { useCallback, useState } from 'react'; -import { LayoutChangeEvent, StyleSheet } from 'react-native'; - -import { useSafeState } from '@td-design/rn-hooks'; - -import type { BadgeProps } from '.'; -import Box from '../box'; -import Text from '../text'; - -const DOT_SIZE = 8; // 默认点大小 -export default function useBadge({ type = 'text', containerStyle = {}, textStyle = {}, text, max = 99 }: BadgeProps) { - text = typeof text === 'number' && text > max ? `${max}+` : text; - - const isZero = text === '0' || text === 0; - const isEmpty = text === null || text === undefined || text === ''; - const isHidden = isEmpty || isZero; - - const [layout, setLayout] = useState({ width: 0, height: 0 }); - const [badgeOffset, setBadgeOffset] = useSafeState<{ top: number; right: number }>({ - top: 0, - right: 0, - }); - - const onBadgeLayout = useCallback( - (event: LayoutChangeEvent) => { - const { width, height } = event.nativeEvent.layout; - const newX = Math.round(-width / 2); - const newY = Math.round(-height / 2); - - setLayout({ width, height }); - - if (badgeOffset.top !== newY || badgeOffset.right !== newX) { - setBadgeOffset({ top: newY, right: newX }); - } - }, - [badgeOffset] - ); - - const renderContent = () => { - if (isHidden) return null; - - if (type === 'dot') - return ( - - ); - return ( - - - {text} - - - ); - }; - - return { - renderContent, - onBadgeLayout, - width: layout.width, - height: layout.height, - }; -} diff --git a/packages/react-native/src/button-group/Item.tsx b/packages/react-native/src/button-group/Item.tsx index 4932e445e7..7e2efe51a9 100644 --- a/packages/react-native/src/button-group/Item.tsx +++ b/packages/react-native/src/button-group/Item.tsx @@ -1,4 +1,4 @@ -import React, { cloneElement, FC, memo, ReactElement, ReactNode } from 'react'; +import React, { cloneElement, FC, memo, ReactElement, ReactNode, useMemo } from 'react'; import { StyleProp, StyleSheet, ViewStyle } from 'react-native'; import { useTheme } from '@shopify/restyle'; @@ -72,7 +72,7 @@ const ButtonItem: FC = ({ }, }); - const renderLabel = () => { + const Label = useMemo(() => { const textColor = isCurrent ? theme.colors.text_active : theme.colors.primary200; if (typeof label === 'string') @@ -81,7 +81,7 @@ const ButtonItem: FC = ({ variant={'p1'} textAlign={'center'} style={{ - color: disabled ? theme.colors.disabled : textColor, + color: disabled ? theme.colors.gray200 : textColor, }} > {label} @@ -92,7 +92,7 @@ const ButtonItem: FC = ({ color: textColor, }, }); - }; + }, [label, isCurrent, disabled, theme.colors.primary200, theme.colors.text_active, theme.colors.gray200]); if (!disabled) return ( @@ -104,13 +104,13 @@ const ButtonItem: FC = ({ }} style={StyleSheet.flatten([styles.item, isFirst && styles.first, isLast && styles.last, itemStyle])} > - {renderLabel()} + {Label} ); return ( - {renderLabel()} + {Label} ); }; diff --git a/packages/react-native/src/button/index.tsx b/packages/react-native/src/button/index.tsx index f553f25d23..b1dbe3399d 100644 --- a/packages/react-native/src/button/index.tsx +++ b/packages/react-native/src/button/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, ReactNode } from 'react'; +import React, { FC, ReactNode, useMemo } from 'react'; import { DimensionValue } from 'react-native'; import helpers from '../helpers'; @@ -34,7 +34,7 @@ const Button: FC = props => { const { pressableProps, textColor, variant, indicatorColor } = useButton(props); - const renderText = () => { + const Title = useMemo(() => { if (typeof title === 'string') return ( @@ -42,14 +42,14 @@ const Button: FC = props => { ); return title; - }; + }, [title, textColor, variant]); return ( {!!loading && ( )} - {renderText()} + {Title} ); }; diff --git a/packages/react-native/src/button/useButton.ts b/packages/react-native/src/button/useButton.ts index 527103e8ed..c089337cd9 100644 --- a/packages/react-native/src/button/useButton.ts +++ b/packages/react-native/src/button/useButton.ts @@ -26,14 +26,14 @@ export default function useButton(props: ButtonProps) { let textColor: Color = 'text_active'; let backgroundColor = theme.colors.transparent; - let indicatorColor = disabled ? theme.colors.gray400 : theme.colors.white; + let indicatorColor = disabled ? theme.colors.gray200 : theme.colors.white; if (type === 'primary') { backgroundColor = disabled ? theme.colors.primary400 : theme.colors.primary200; } else if (type === 'secondary') { - textColor = disabled ? 'disabled' : 'primary200'; + textColor = disabled ? 'gray200' : 'primary200'; backgroundColor = disabled ? theme.colors.disabled : theme.colors.transparent; - indicatorColor = disabled ? theme.colors.gray400 : theme.colors.primary200; + indicatorColor = disabled ? theme.colors.gray200 : theme.colors.primary200; } let borderWidth = 0; diff --git a/packages/react-native/src/card/index.tsx b/packages/react-native/src/card/index.tsx index d02fc72364..0994268168 100644 --- a/packages/react-native/src/card/index.tsx +++ b/packages/react-native/src/card/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, PropsWithChildren, ReactNode } from 'react'; +import React, { FC, memo, PropsWithChildren, ReactNode } from 'react'; import { StyleProp, StyleSheet, ViewStyle } from 'react-native'; import { useTheme } from '@shopify/restyle'; @@ -45,9 +45,32 @@ const Card: FC> = ({ contentStyle, children, }) => { - const theme = useTheme(); + return ( + +
+ {children} + {!!footer && {footer}} + + ); +}; +Card.displayName = 'Card'; - const _renderHeader = () => { +export default Card; + +const Header = memo( + ({ + hideHeader, + icon, + title, + extra, + renderHeader, + }: Pick) => { if (hideHeader) return null; const Header = ( @@ -93,9 +116,13 @@ const Card: FC> = ({ {renderHeader ? renderHeader() : Header} ); - }; + } +); + +const Body = memo( + ({ footer, contentStyle, children }: Pick, 'footer' | 'contentStyle' | 'children'>) => { + const theme = useTheme(); - const _renderBody = () => { return ( > = ({ {children} ); - }; - - const _renderFooter = () => { - if (!!footer) return {footer}; - return null; - }; - - return ( - - {_renderHeader()} - {_renderBody()} - {_renderFooter()} - - ); -}; -Card.displayName = 'Card'; - -export default Card; + } +); diff --git a/packages/react-native/src/carousel/Bullets.tsx b/packages/react-native/src/carousel/Bullets.tsx index d955d316a6..7e53b52021 100644 --- a/packages/react-native/src/carousel/Bullets.tsx +++ b/packages/react-native/src/carousel/Bullets.tsx @@ -58,25 +58,27 @@ const Bullets = ({ }; Bullets.displayName = 'Bullets'; -const Dot = (props: { isCurrent: boolean; activeColor?: string; inactiveColor?: string; indicatorSize: number }) => { - const theme = useTheme(); - const { isCurrent, activeColor = theme.colors.gray50, inactiveColor = theme.colors.gray200, indicatorSize } = props; +export default memo(Bullets); - const backgroundColor = mixColor(+isCurrent, inactiveColor, activeColor) as any; - const scale = mix(+isCurrent, 1, 1.2); +const Dot = memo( + (props: { isCurrent: boolean; activeColor?: string; inactiveColor?: string; indicatorSize: number }) => { + const theme = useTheme(); + const { isCurrent, activeColor = theme.colors.gray50, inactiveColor = theme.colors.gray200, indicatorSize } = props; - const styles = StyleSheet.create({ - dot: { - width: indicatorSize, - height: indicatorSize, - borderRadius: indicatorSize / 2, - backgroundColor, - transform: [{ scale }], - marginHorizontal: indicatorSize / 2, - }, - }); + const backgroundColor = mixColor(+isCurrent, inactiveColor, activeColor) as any; + const scale = mix(+isCurrent, 1, 1.2); - return ; -}; + const styles = StyleSheet.create({ + dot: { + width: indicatorSize, + height: indicatorSize, + borderRadius: indicatorSize / 2, + backgroundColor, + transform: [{ scale }], + marginHorizontal: indicatorSize / 2, + }, + }); -export default memo(Bullets); + return ; + } +); diff --git a/packages/react-native/src/carousel/useCarousel.ts b/packages/react-native/src/carousel/useCarousel.ts index fd1834a46f..8d3843af54 100644 --- a/packages/react-native/src/carousel/useCarousel.ts +++ b/packages/react-native/src/carousel/useCarousel.ts @@ -21,6 +21,12 @@ export default function useCarousel({ setCurrentIndex(index => (index === count - 1 ? 0 : index + 1)); }); + // 用户手动滚动开始时，停止轮播 + const clearTimer = useMemoizedFn(() => { + clearInterval(timer.current); + timer.current = undefined; + }); + useEffect(() => { if (!auto) return; @@ -37,12 +43,6 @@ export default function useCarousel({ timer.current = setInterval(loop, duration); }; - // 用户手动滚动开始时，停止轮播 - const clearTimer = () => { - clearInterval(timer.current); - timer.current = undefined; - }; - // 在ScrollView滚动结束后，修改当前index const onScrollEnd = (e: NativeSyntheticEvent) => { const { x } = e.nativeEvent.contentOffset; @@ -64,7 +64,7 @@ export default function useCarousel({ scrollViewRef, currentIndex, - onTouchStart: useMemoizedFn(clearTimer), + onTouchStart: clearTimer, onTouchEnd: useMemoizedFn(onTouchEnd), onScrollEnd: useMemoizedFn(onScrollEnd), }; diff --git a/packages/react-native/src/checkbox/CheckboxItem.tsx b/packages/react-native/src/checkbox/CheckboxItem.tsx index 655186c788..f4f1eab041 100644 --- a/packages/react-native/src/checkbox/CheckboxItem.tsx +++ b/packages/react-native/src/checkbox/CheckboxItem.tsx @@ -1,7 +1,8 @@ -import React, { FC, memo } from 'react'; +import React, { FC, memo, useMemo } from 'react'; import { Keyboard, StyleSheet } from 'react-native'; import { useTheme } from '@shopify/restyle'; +import { useMemoizedFn } from '@td-design/rn-hooks'; import Box from '../box'; import Flex from '../flex'; @@ -38,13 +39,13 @@ const CheckboxItem: FC = ({ }, }); - const handleChange = () => { + const handleChange = useMemoizedFn(() => { Keyboard.dismiss(); if (disabled) return; onChange?.(value, status); - }; + }); - const renderLabel = () => { + const Label = useMemo(() => { if (typeof label === 'string') return ( @@ -52,7 +53,7 @@ const CheckboxItem: FC = ({ ); return label; - }; + }, [disabled, label, labelStyle]); if (!disabled) return ( @@ -65,7 +66,7 @@ const CheckboxItem: FC = ({ - {renderLabel()} + {Label} ); @@ -76,7 +77,7 @@ const CheckboxItem: FC = ({ - {renderLabel()} + {Label} ); diff --git a/packages/react-native/src/collapse-text/index.tsx b/packages/react-native/src/collapse-text/index.tsx index aaf98fb182..e08db07d74 100644 --- a/packages/react-native/src/collapse-text/index.tsx +++ b/packages/react-native/src/collapse-text/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, useCallback } from 'react'; +import React, { FC } from 'react'; import { LayoutChangeEvent, StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native'; import { useBoolean } from '@td-design/rn-hooks'; @@ -45,17 +45,14 @@ const CollapseText: FC = ({ const [isOverflow, { set: setOverflow }] = useBoolean(false); const [hidden, { toggle: toggleHidden }] = useBoolean(true); - const handleLayout = useCallback( - (e: LayoutChangeEvent) => { - const { height } = e.nativeEvent.layout; - if (height - 1 < lineHeight * defaultNumberOfLines) { - setOverflow(false); - } else { - setOverflow(true); - } - }, - [lineHeight, defaultNumberOfLines] - ); + const handleLayout = (e: LayoutChangeEvent) => { + const { height } = e.nativeEvent.layout; + if (height - 1 < lineHeight * defaultNumberOfLines) { + setOverflow(false); + } else { + setOverflow(true); + } + }; const styles = StyleSheet.create({ container: { diff --git a/packages/react-native/src/count-down/index.tsx b/packages/react-native/src/count-down/index.tsx index d61a6ed42a..eb2166aff6 100644 --- a/packages/react-native/src/count-down/index.tsx +++ b/packages/react-native/src/count-down/index.tsx @@ -104,7 +104,7 @@ const CountDown = forwardRef( activeOpacity={activeOpacity} onPress={handlePress} > - + {text} diff --git a/packages/react-native/src/empty/index.tsx b/packages/react-native/src/empty/index.tsx index cdb26f6aca..8e0e92766a 100644 --- a/packages/react-native/src/empty/index.tsx +++ b/packages/react-native/src/empty/index.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode } from 'react'; +import React, { ReactNode, useMemo } from 'react'; import Svg, { Ellipse, G, Path } from 'react-native-svg'; import { BoxProps } from '@shopify/restyle'; @@ -15,7 +15,7 @@ type EmptyProps = BoxProps & { }; const Empty: React.FC = ({ emptyText = '暂无数据', customImg, ...boxProps }) => { - const renderTextDom = () => { + const EmptyText = useMemo(() => { if (typeof emptyText === 'string') { return ( @@ -24,9 +24,9 @@ const Empty: React.FC = ({ emptyText = '暂无数据', customImg, .. ); } return emptyText; - }; + }, [emptyText]); - const renderImgDom = () => { + const EmptyImage = useMemo(() => { if (customImg) return customImg; return ( @@ -43,12 +43,12 @@ const Empty: React.FC = ({ emptyText = '暂无数据', customImg, .. ); - }; + }, [customImg]); return ( - {renderImgDom()} - {renderTextDom()} + {EmptyImage} + {EmptyText} ); }; diff --git a/packages/react-native/src/float-button/Actions.tsx b/packages/react-native/src/float-button/Actions.tsx index efee327c5e..f1ff2bc15a 100644 --- a/packages/react-native/src/float-button/Actions.tsx +++ b/packages/react-native/src/float-button/Actions.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { StyleSheet } from 'react-native'; import Box from '../box'; @@ -33,4 +33,4 @@ const Actions: FC = props => { }; Actions.displayName = 'Actions'; -export default Actions; +export default memo(Actions); diff --git a/packages/react-native/src/flow/index.tsx b/packages/react-native/src/flow/index.tsx index 328c5b4c97..f27fd1b744 100644 --- a/packages/react-native/src/flow/index.tsx +++ b/packages/react-native/src/flow/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, useCallback } from 'react'; +import React, { FC } from 'react'; import { LayoutChangeEvent } from 'react-native'; import { useSafeState } from '@td-design/rn-hooks'; @@ -33,9 +33,9 @@ const Flow: FC = ({ steps = [], size = px(36), current = 0, status = /** 单条线的长度 */ const tailWidth = (wrapWidth - iconWidth) / (steps.length - 1); - const handleLayout = useCallback((e: LayoutChangeEvent) => { + const handleLayout = (e: LayoutChangeEvent) => { setWrapWidth(e.nativeEvent.layout.width); - }, []); + }; return ( diff --git a/packages/react-native/src/flow/step.tsx b/packages/react-native/src/flow/step.tsx index 3874182687..901880d39f 100644 --- a/packages/react-native/src/flow/step.tsx +++ b/packages/react-native/src/flow/step.tsx @@ -1,4 +1,4 @@ -import React, { cloneElement, FC, isValidElement, memo, ReactElement } from 'react'; +import React, { cloneElement, FC, isValidElement, memo, ReactElement, useMemo } from 'react'; import { useTheme } from '@shopify/restyle'; @@ -72,7 +72,7 @@ const Step: FC = ({ * 3 更具当前的状态进行选择使用的icon * 4 可以使用label */ - const iconRender = () => { + const IconRender = useMemo(() => { if (!!stepRender && isValidElement(stepRender)) { return cloneElement(stepRender as ReactElement, {}); } @@ -91,12 +91,12 @@ const Step: FC = ({ ); } return ; - }; + }, [icon, iconSize, label, stepRender, status, theme.colors.white]); /** * 尾巴的样式 */ - const tailRender = () => { + const TailRender = useMemo(() => { if (isLast) return null; if (!active || isCurrent) return ( @@ -113,14 +113,14 @@ const Step: FC = ({ }} /> ); - }; + }, [active, iconActiveColor, isCurrent, isLast, size]); return ( {stepRender ? ( - iconRender() + IconRender ) : ( = ({ borderRadius: size / 2, }} > - {iconRender()} + {IconRender} )} @@ -151,7 +151,7 @@ const Step: FC = ({ )} - {tailRender()} + {TailRender} ); }; diff --git a/packages/react-native/src/form/FormItem.tsx b/packages/react-native/src/form/FormItem.tsx index 1a80850e84..58121d945b 100644 --- a/packages/react-native/src/form/FormItem.tsx +++ b/packages/react-native/src/form/FormItem.tsx @@ -1,4 +1,4 @@ -import React, { FC, useContext, useRef } from 'react'; +import React, { FC, useContext, useMemo, useRef } from 'react'; import { useTheme } from '@shopify/restyle'; import { useSafeState } from '@td-design/rn-hooks'; @@ -37,12 +37,15 @@ const FormItem: FC = ({ children, type = 'bottom', name, ...field return {}; }; - const Error = - errors.length > 0 ? ( + const Error = useMemo(() => { + if (errors.length === 0) return null; + + return ( {errors[0]} - ) : null; + ); + }, [errors]); return ( diff --git a/packages/react-native/src/form/FormListItem.tsx b/packages/react-native/src/form/FormListItem.tsx index 90dd68dc63..ee9b8cba4d 100644 --- a/packages/react-native/src/form/FormListItem.tsx +++ b/packages/react-native/src/form/FormListItem.tsx @@ -1,4 +1,4 @@ -import React, { FC, useContext, useRef } from 'react'; +import React, { FC, useContext, useMemo, useRef } from 'react'; import { useTheme } from '@shopify/restyle'; import { useSafeState } from '@td-design/rn-hooks'; @@ -39,12 +39,15 @@ const FormListItem: FC = ({ } }; - const Error = - errors.length > 0 ? ( + const Error = useMemo(() => { + if (errors.length === 0) return null; + + return ( {errors[0]} - ) : null; + ); + }, [errors]); return ( = props => { }, }); - const renderHeaderLeft = () => { + const HeaderLeft = useMemo(() => { if (headerLeft) { if (typeof headerLeft === 'string') { return ( @@ -77,14 +77,14 @@ const ImageHeader: FC = props => { return headerLeft; } return ; - }; + }, [headerLeft, headerLeftColor]); return ( {showLeft ? ( - {renderHeaderLeft()} + {HeaderLeft} ) : ( diff --git a/packages/react-native/src/input/InputItem.tsx b/packages/react-native/src/input/InputItem.tsx index 8d7f5fb363..053e8aeb44 100644 --- a/packages/react-native/src/input/InputItem.tsx +++ b/packages/react-native/src/input/InputItem.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef, ReactNode } from 'react'; +import React, { forwardRef, memo, ReactNode } from 'react'; import { StyleProp, StyleSheet, TextInput, TextInputProps, TextStyle, ViewStyle } from 'react-native'; import Animated, { FadeInRight, FadeOutRight } from 'react-native-reanimated'; @@ -67,15 +67,12 @@ const InputItem = forwardRef( ref ) => { const theme = useTheme(); - const { LabelComp, inputValue, eyeOpen, handleChange, handleInputClear, triggerPasswordType } = useInputItem({ + const { inputValue, eyeOpen, handleChange, handleInputClear, triggerPasswordType } = useInputItem({ inputType, - label, value, defaultValue, onChange, onClear, - colon, - required, }); const styles = StyleSheet.create({ @@ -140,7 +137,7 @@ const InputItem = forwardRef( return ( - {LabelComp} + ); - const Brief = brief ? ( - - {typeof brief === 'string' ? ( - - {brief} - - ) : ( - brief - )} - - ) : null; - return labelPosition === 'left' ? ( - {LabelComp} + ) : ( - {LabelComp} + ); } @@ -182,3 +166,41 @@ export default Object.assign(Input, { InputItem, TextArea, }); + +const Label = memo(({ colon, label, required }: Pick) => { + if (!label) return null; + + if (typeof label === 'string') + return ( + + {required && *} + + + {colon ? ':' : ''} + + ); + + return ( + + {required && *} + + ); +}); + +const Brief = memo(({ brief }: Pick) => { + if (!brief) return null; + return ( + + {typeof brief === 'string' ? ( + + {brief} + + ) : ( + brief + )} + + ); +}); diff --git a/packages/react-native/src/input/useInput.ts b/packages/react-native/src/input/useInput.ts new file mode 100644 index 0000000000..95395afb14 --- /dev/null +++ b/packages/react-native/src/input/useInput.ts @@ -0,0 +1,43 @@ +import { useEffect } from 'react'; + +import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks'; + +import type { InputProps } from '.'; + +export default function useInput({ + inputType, + value, + defaultValue, + onChange, + onClear, +}: Pick) { + const [inputValue, setInputValue] = useSafeState(); + const [eyeOpen, setEyeOpen] = useSafeState(inputType === 'password'); + + useEffect(() => { + setInputValue(value || defaultValue); + }, [value, defaultValue]); + + const handleInputClear = () => { + setInputValue(''); + onChange?.(''); + onClear?.(); + }; + + const handleChange = (val: string) => { + setInputValue(val); + onChange?.(val); + }; + + const triggerPasswordType = () => { + setEyeOpen(!eyeOpen); + }; + + return { + inputValue, + eyeOpen, + handleChange: useMemoizedFn(handleChange), + handleInputClear: useMemoizedFn(handleInputClear), + triggerPasswordType: useMemoizedFn(triggerPasswordType), + }; +} diff --git a/packages/react-native/src/input/useInput.tsx b/packages/react-native/src/input/useInput.tsx deleted file mode 100644 index 1bbc0d58f3..0000000000 --- a/packages/react-native/src/input/useInput.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import React, { useEffect, useMemo } from 'react'; - -import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks'; - -import type { InputProps } from '.'; -import Flex from '../flex'; -import Text from '../text'; - -export default function useInput({ - inputType, - labelPosition, - label, - value, - defaultValue, - onChange, - onClear, - colon = false, - required = false, -}: Pick< - InputProps, - 'inputType' | 'labelPosition' | 'label' | 'value' | 'defaultValue' | 'onChange' | 'onClear' | 'colon' | 'required' ->) { - const [inputValue, setInputValue] = useSafeState(); - const [eyeOpen, setEyeOpen] = useSafeState(inputType === 'password'); - - useEffect(() => { - setInputValue(value || defaultValue); - }, [value, defaultValue]); - - const handleInputClear = () => { - setInputValue(''); - onChange?.(''); - onClear?.(); - }; - - const handleChange = (val: string) => { - setInputValue(val); - onChange?.(val); - }; - - const triggerPasswordType = () => { - setEyeOpen(!eyeOpen); - }; - - const LabelComp = useMemo(() => { - if (label) { - if (typeof label === 'string') { - return ( - - {required && *} - - {label} - - {colon ? ':' : ''} - - ); - } - return ( - - {required && *} - {label} - {colon ? ':' : ''} - - ); - } - return null; - }, [colon, label, labelPosition, required]); - - return { - LabelComp, - inputValue, - eyeOpen, - handleChange: useMemoizedFn(handleChange), - handleInputClear: useMemoizedFn(handleInputClear), - triggerPasswordType: useMemoizedFn(triggerPasswordType), - }; -} diff --git a/packages/react-native/src/input/useInputItem.ts b/packages/react-native/src/input/useInputItem.ts new file mode 100644 index 0000000000..b3dfdf9113 --- /dev/null +++ b/packages/react-native/src/input/useInputItem.ts @@ -0,0 +1,43 @@ +import { useEffect } from 'react'; + +import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks'; + +import type { InputItemProps } from './InputItem'; + +export default function useInputItem({ + inputType, + value, + defaultValue, + onChange, + onClear, +}: Pick) { + const [inputValue, setInputValue] = useSafeState(); + const [eyeOpen, setEyeOpen] = useSafeState(inputType === 'password'); + + useEffect(() => { + setInputValue(value || defaultValue); + }, [value, defaultValue]); + + const handleInputClear = () => { + setInputValue(''); + onChange?.(''); + onClear?.(); + }; + + const handleChange = (val: string) => { + setInputValue(val); + onChange?.(val); + }; + + const triggerPasswordType = () => { + setEyeOpen(!eyeOpen); + }; + + return { + inputValue, + eyeOpen, + handleChange: useMemoizedFn(handleChange), + handleInputClear: useMemoizedFn(handleInputClear), + triggerPasswordType: useMemoizedFn(triggerPasswordType), + }; +} diff --git a/packages/react-native/src/input/useInputItem.tsx b/packages/react-native/src/input/useInputItem.tsx deleted file mode 100644 index 1661879983..0000000000 --- a/packages/react-native/src/input/useInputItem.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import React, { useEffect, useMemo } from 'react'; - -import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks'; - -import Flex from '../flex'; -import Text from '../text'; -import type { InputItemProps } from './InputItem'; - -export default function useInputItem({ - inputType, - label, - value, - defaultValue, - onChange, - onClear, - colon = false, - required = false, -}: Pick< - InputItemProps, - 'inputType' | 'label' | 'value' | 'defaultValue' | 'onChange' | 'onClear' | 'colon' | 'required' ->) { - const [inputValue, setInputValue] = useSafeState(); - const [eyeOpen, setEyeOpen] = useSafeState(inputType === 'password'); - - useEffect(() => { - setInputValue(value || defaultValue); - }, [value, defaultValue]); - - const handleInputClear = () => { - setInputValue(''); - onChange?.(''); - onClear?.(); - }; - - const handleChange = (val: string) => { - setInputValue(val); - onChange?.(val); - }; - - const triggerPasswordType = () => { - setEyeOpen(!eyeOpen); - }; - - const LabelComp = useMemo(() => { - if (label) { - if (typeof label === 'string') { - return ( - - {required && *} - - {label} - - {!!colon && :} - - ); - } - return ( - - {required && *} - {label} - {!!colon && :} - - ); - } - return null; - }, [colon, label, required]); - - return { - LabelComp, - inputValue, - eyeOpen, - handleChange: useMemoizedFn(handleChange), - handleInputClear: useMemoizedFn(handleInputClear), - triggerPasswordType: useMemoizedFn(triggerPasswordType), - }; -} diff --git a/packages/react-native/src/input/useTextArea.ts b/packages/react-native/src/input/useTextArea.ts new file mode 100644 index 0000000000..305664a17b --- /dev/null +++ b/packages/react-native/src/input/useTextArea.ts @@ -0,0 +1,23 @@ +import { useEffect } from 'react'; + +import { useSafeState } from '@td-design/rn-hooks'; + +import type { TextAreaProps } from './TextArea'; + +export default function useTextArea({ value = '', onChange }: Pick) { + const [inputValue, setInputValue] = useSafeState(value); + + useEffect(() => { + setInputValue(value); + }, [value]); + + const handleChange = (val: string) => { + setInputValue(val); + onChange?.(val); + }; + + return { + inputValue, + handleChange, + }; +} diff --git a/packages/react-native/src/input/useTextArea.tsx b/packages/react-native/src/input/useTextArea.tsx deleted file mode 100644 index 7c11660b99..0000000000 --- a/packages/react-native/src/input/useTextArea.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React, { useEffect, useMemo } from 'react'; - -import { useSafeState } from '@td-design/rn-hooks'; - -import Flex from '../flex'; -import Text from '../text'; -import type { TextAreaProps } from './TextArea'; - -export default function useTextArea({ - value = '', - onChange, - label, - required = false, -}: Pick) { - const [inputValue, setInputValue] = useSafeState(value); - - useEffect(() => { - setInputValue(value); - }, [value]); - - const handleChange = (val: string) => { - setInputValue(val); - onChange?.(val); - }; - - const LabelComp = useMemo(() => { - if (label) { - if (typeof label === 'string') { - return ( - - {required && *} - - {label} - - - ); - } - return ( - - {required && *} - {label} - - ); - } - return null; - }, [label, required]); - - return { - inputValue, - handleChange, - LabelComp, - }; -} diff --git a/packages/react-native/src/list-item/index.tsx b/packages/react-native/src/list-item/index.tsx index 1158975548..b65b651192 100644 --- a/packages/react-native/src/list-item/index.tsx +++ b/packages/react-native/src/list-item/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, memo, PropsWithChildren, ReactElement, ReactNode } from 'react'; +import React, { FC, memo, PropsWithChildren, ReactElement, ReactNode, useMemo } from 'react'; import { Keyboard, StyleProp, ViewStyle } from 'react-native'; import { useTheme } from '@shopify/restyle'; @@ -44,9 +44,7 @@ export type ListItemProps = { backgroundColor?: string; }; -type BriefBasePropsType = PropsWithChildren>; - -const Brief: FC = props => { +const Brief: FC>> = props => { const { children, wrap } = props; const numberOfLines = wrap ? {} : { numberOfLines: 1 }; return ( @@ -75,21 +73,58 @@ const ListItem = ({ required = false, activeOpacity = 0.6, }: ListItemProps) => { + if (!onPress) + return ( + + + + ); + + return ( + { + Keyboard.dismiss(); + onPress(); + }} + > + + + ); +}; +ListItem.displayName = 'ListItem'; + +export default memo(ListItem); + +const Content = ({ + backgroundColor, + style, + required, + thumb, + title, + brief, + wrap, + extra, + arrow, +}: Omit) => { const theme = useTheme(); - const renderTitle = () => ( - - {typeof title === 'string' ? ( - - {title} - - ) : ( - title - )} - + const Title = useMemo( + () => ( + + {typeof title === 'string' ? ( + + {title} + + ) : ( + title + )} + + ), + [thumb, title] ); - const renderExtra = () => { + const Extra = useMemo(() => { if (!extra) return null; if (typeof extra === 'string') { const numberOfLines = wrap ? {} : { numberOfLines: 1 }; @@ -108,9 +143,9 @@ const ListItem = ({ ); } return extra; - }; + }, [extra, wrap]); - const renderArrow = () => { + const Arrow = useMemo(() => { if (!arrow) return null; if (typeof arrow === 'string') return ( @@ -119,9 +154,9 @@ const ListItem = ({ ); return arrow; - }; + }, [arrow, theme.colors.icon]); - const renderContent = () => ( + return ( )} {thumb} - {renderTitle()} + {Title} - {renderExtra()} + {Extra} {!!brief && {brief}} - {renderArrow()} + {Arrow} ); - - if (!onPress) return {renderContent()}; - - return ( - { - Keyboard.dismiss(); - onPress(); - }} - > - {renderContent()} - - ); }; -ListItem.displayName = 'ListItem'; - -export default memo(ListItem); diff --git a/packages/react-native/src/list/index.tsx b/packages/react-native/src/list/index.tsx index 96c9dcfdbe..cdf5745a48 100644 --- a/packages/react-native/src/list/index.tsx +++ b/packages/react-native/src/list/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, ReactNode } from 'react'; +import React, { FC, memo, ReactNode, useMemo } from 'react'; import { StyleProp, TextStyle, ViewStyle } from 'react-native'; import Box from '../box'; @@ -20,17 +20,17 @@ type ListProps = { itemBackgroundColor?: string; }; const List: FC = ({ header, extra, itemBackgroundColor, items = [] }) => { - const renderHeader = () => { + const Header = useMemo(() => { if (!header) return null; if (typeof header === 'string') { return ; } return header; - }; + }, [header, extra]); return ( - {renderHeader()} + {Header} {items.map((props, index) => { return ; })} @@ -39,42 +39,44 @@ const List: FC = ({ header, extra, itemBackgroundColor, items = [] }) }; List.displayName = 'List'; -const ListHeader = ({ - text, - extra, - textStyle, - headerStyle, -}: { - /** 标题文本 */ - text: string; - /** 自定义右侧内容 */ - extra?: ReactNode; - /** 文本样式 */ - textStyle?: StyleProp; - /** 标题样式 */ - headerStyle?: StyleProp; -}) => { - if (text === '') return null; - return ( - - - - {text} - - - {extra} - - ); -}; +const ListHeader = memo( + ({ + text, + extra, + textStyle, + headerStyle, + }: { + /** 标题文本 */ + text: string; + /** 自定义右侧内容 */ + extra?: ReactNode; + /** 文本样式 */ + textStyle?: StyleProp; + /** 标题样式 */ + headerStyle?: StyleProp; + }) => { + if (text === '') return null; + return ( + + + + {text} + + + {extra} + + ); + } +); ListHeader.displayName = 'ListHeader'; export default Object.assign(List, { ListHeader }); diff --git a/packages/react-native/src/menu/Chevron.tsx b/packages/react-native/src/menu/Chevron.tsx index fe3ef6270a..b6c65e3d39 100644 --- a/packages/react-native/src/menu/Chevron.tsx +++ b/packages/react-native/src/menu/Chevron.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import Animated, { useAnimatedStyle } from 'react-native-reanimated'; import { mix } from 'react-native-redash'; @@ -20,4 +20,4 @@ const Chevron: FC<{ progress: Animated.SharedValue }> = ({ progress }) = ); }; -export default Chevron; +export default memo(Chevron); diff --git a/packages/react-native/src/menu/MenuGroup.tsx b/packages/react-native/src/menu/MenuGroup.tsx index 463a5bb1b8..c91e8446e9 100644 --- a/packages/react-native/src/menu/MenuGroup.tsx +++ b/packages/react-native/src/menu/MenuGroup.tsx @@ -1,4 +1,4 @@ -import React, { PropsWithChildren } from 'react'; +import React, { memo, PropsWithChildren } from 'react'; import Animated from 'react-native-reanimated'; import { useTheme } from '@shopify/restyle'; @@ -67,4 +67,4 @@ const MenuGroup = ({ }; MenuGroup.displayName = 'MenuGroup'; -export default MenuGroup; +export default memo(MenuGroup); diff --git a/packages/react-native/src/menu/useGroup.ts b/packages/react-native/src/menu/useGroup.ts index 9bfce5b7c6..1d91ff9078 100644 --- a/packages/react-native/src/menu/useGroup.ts +++ b/packages/react-native/src/menu/useGroup.ts @@ -49,7 +49,7 @@ export default function useGroup({ bodyStyle, progress, - handleLayout: useMemoizedFn(handleLayout), + handleLayout, handlePress: useMemoizedFn(handlePress), }; } diff --git a/packages/react-native/src/notice-bar/AnimatedNotice.tsx b/packages/react-native/src/notice-bar/AnimatedNotice.tsx index 8e24a53b10..9e96f5dc96 100644 --- a/packages/react-native/src/notice-bar/AnimatedNotice.tsx +++ b/packages/react-native/src/notice-bar/AnimatedNotice.tsx @@ -1,4 +1,4 @@ -import React, { FC, useEffect, useState } from 'react'; +import React, { FC, memo, useEffect, useState } from 'react'; import { LayoutChangeEvent } from 'react-native'; import Animated, { Easing, @@ -94,4 +94,4 @@ const AnimatedNotice: FC = props => { const [visible, setVisible] = useState(true); const [height, setHeight] = useState(0); - const onContentLayout = useMemoizedFn(e => { + const handleContentLayout = (e: LayoutChangeEvent) => { setHeight(e.nativeEvent.layout.height); - }); + }; if (!visible) return null; - const BaseContent = ; - - const WrapComp = ({ children }: PropsWithChildren<{}>) => { - if (onPress) - return ( - - {children} - - ); - return <>{children}; - }; + const BaseContent = ( + + ); switch (mode) { case 'close': return ( - + = props => { case 'link': return ( - + {BaseContent} = props => { default: return ( - + {BaseContent} @@ -120,3 +112,17 @@ const NoticeBar: FC = props => { NoticeBar.displayName = 'NoticeBar'; export default NoticeBar; + +const WrapComp = ({ + children, + onPress, + activeOpacity, +}: PropsWithChildren>) => { + if (onPress) + return ( + + {children} + + ); + return <>{children}; +}; diff --git a/packages/react-native/src/notify/NotifyRoot.tsx b/packages/react-native/src/notify/NotifyRoot.tsx index 9d224cec55..bc181f0824 100644 --- a/packages/react-native/src/notify/NotifyRoot.tsx +++ b/packages/react-native/src/notify/NotifyRoot.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef, useImperativeHandle } from 'react'; +import React, { forwardRef, useImperativeHandle, useMemo } from 'react'; import { StyleSheet } from 'react-native'; import Animated from 'react-native-reanimated'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; @@ -11,6 +11,7 @@ import Pressable from '../pressable'; import SvgIcon from '../svg-icon'; import Text from '../text'; import { normalShadowOpt, NotifyType } from './constant'; +import { NotifyProps } from './type'; import useNotify from './useNotify'; const { px, hexToRgba } = helpers; @@ -36,73 +37,83 @@ const NotifyRoot = forwardRef((_, ref) => { zIndex: 49, bottom: -insets.bottom, }, + wrapper: { borderRadius: normalShadowOpt.radius, backgroundColor: bgColor }, + }); + + return ( + + + + + + + + ); +}); + +export default NotifyRoot; + +/** + * 渲染Notify内容。分为以下几种情况： + * 1. notify的类型不是INFO，这时候直接返回Content + * 2. notify类型是INFO： + * 1: onPress有值，Content被TouchableOpacity包裹，同时显示right图标； + * 如果同时onClose有值，再显示一个close图标，点击可关闭notify + * 2: onPress没有值，Contentbu包裹，不显示right图标； + * 如果同时onClose有值，再显示一个close图标，点击可关闭notify + */ +const Content = ({ + shadowColor, + options, + hide, +}: { + hide: () => void; + shadowColor: string; + options: NotifyProps & { type: NotifyType }; +}) => { + const styles = StyleSheet.create({ content: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', }, - wrapper: { borderRadius: normalShadowOpt.radius, backgroundColor: bgColor }, }); - const Content = ( - - {options.type === NotifyType.SUCCESS && ( - - - - )} - {options.type === NotifyType.FAIL && ( - - + const BaseContent = useMemo( + () => ( + + {options.type === NotifyType.SUCCESS && ( + + + + )} + {options.type === NotifyType.FAIL && ( + + + + )} + + {options.content} - )} - - {options.content} - - + + ), + [options.type, options.content, shadowColor] ); - /** - * 渲染Notify内容。分为以下几种情况： - * 1. notify的类型不是INFO，这时候直接返回Content - * 2. notify类型是INFO： - * 1: onPress有值，Content被TouchableOpacity包裹，同时显示right图标； - * 如果同时onClose有值，再显示一个close图标，点击可关闭notify - * 2: onPress没有值，Contentbu包裹，不显示right图标； - * 如果同时onClose有值，再显示一个close图标，点击可关闭notify - */ - const renderContent = () => { - if (options.type !== NotifyType.INFO) return Content; - - if (options.onPress) { - if (options.onClose) { - return ( - - {Content} - { - e.stopPropagation(); - hide(); - }} - > - - - - - ); - } - return ( - - {Content} - - - ); - } + if (options.type !== NotifyType.INFO) return BaseContent; + if (options.onPress) { if (options.onClose) { return ( - - {Content} + + {BaseContent} { e.stopPropagation(); @@ -111,28 +122,32 @@ const NotifyRoot = forwardRef((_, ref) => { > - + + ); } - return Content; - }; + return ( + + {BaseContent} + + + ); + } - return ( - - - + {BaseContent} + { + e.stopPropagation(); + hide(); + }} > - {renderContent()} - - - - ); -}); - -export default NotifyRoot; + + + + ); + } + return BaseContent; +}; diff --git a/packages/react-native/src/pagination/index.tsx b/packages/react-native/src/pagination/index.tsx index 870efc5d1f..ec068b94ce 100644 --- a/packages/react-native/src/pagination/index.tsx +++ b/packages/react-native/src/pagination/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, ReactElement } from 'react'; +import React, { FC, ReactElement, useMemo } from 'react'; import Flex from '../flex'; import Pressable from '../pressable'; @@ -40,10 +40,15 @@ const Pagination: FC = ({ counterRender, activeOpacity = 0.6, }) => { - const { current, setCurrent, totalPage, isFirstPage, isLastPage } = usePagination({ page, pageSize, total }); + const { current, prev, next, totalPage, isFirstPage, isLastPage } = usePagination({ + page, + pageSize, + total, + onChange, + }); /** 渲染上一页按钮 */ - const renderPrevBtn = () => { + const PrevBtn = useMemo(() => { if (prevButtonRender) { return prevButtonRender(isFirstPage); } @@ -52,10 +57,10 @@ const Pagination: FC = ({ {prevButtonText} ); - }; + }, [isFirstPage, prevButtonRender, prevButtonText]); /** 渲染当前页 */ - const renderCurrent = () => { + const Current = useMemo(() => { if (counterRender) { return counterRender(current, totalPage); } @@ -70,10 +75,10 @@ const Pagination: FC = ({ ); - }; + }, [counterRender, current, totalPage]); /** 渲染下一页按钮 */ - const renderNextBtn = () => { + const NextBtn = useMemo(() => { if (nextButtonRender) { return nextButtonRender(isLastPage); } @@ -82,32 +87,16 @@ const Pagination: FC = ({ {nextButtonText} ); - }; - - /** 前一页 */ - const prev = () => { - const perPage = current - 1; - setCurrent(perPage); - onChange?.(perPage); - }; - - /** 后一页 */ - const next = () => { - const nextPage = current + 1; - setCurrent(nextPage); - onChange?.(nextPage); - }; + }, [isLastPage, nextButtonRender, nextButtonText]); return ( - {renderPrevBtn()} + {PrevBtn} - - {renderCurrent()} - + {Current} - {renderNextBtn()} + {NextBtn} ); diff --git a/packages/react-native/src/pagination/usePagination.ts b/packages/react-native/src/pagination/usePagination.ts index a8c8407812..25925c7f2b 100644 --- a/packages/react-native/src/pagination/usePagination.ts +++ b/packages/react-native/src/pagination/usePagination.ts @@ -1,6 +1,6 @@ import { useEffect } from 'react'; -import { useSafeState } from '@td-design/rn-hooks'; +import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks'; import type { PaginationProps } from '.'; @@ -8,7 +8,8 @@ export default function usePagination({ page = 1, pageSize = 10, total, -}: Pick) { + onChange, +}: Pick) { const [current, setCurrent] = useSafeState(page); const [totalPage, setTotalPage] = useSafeState(Math.ceil(total / pageSize)); @@ -23,11 +24,27 @@ export default function usePagination({ const isFirstPage = current === 1; const isLastPage = current === totalPage; + /** 前一页 */ + const prev = () => { + const perPage = current - 1; + setCurrent(perPage); + onChange?.(perPage); + }; + + /** 后一页 */ + const next = () => { + const nextPage = current + 1; + setCurrent(nextPage); + onChange?.(nextPage); + }; + return { current, - setCurrent, totalPage, isFirstPage, isLastPage, + + prev: useMemoizedFn(prev), + next: useMemoizedFn(next), }; } diff --git a/packages/react-native/src/pressable/index.tsx b/packages/react-native/src/pressable/index.tsx index e4781cc8d5..e892899437 100644 --- a/packages/react-native/src/pressable/index.tsx +++ b/packages/react-native/src/pressable/index.tsx @@ -29,7 +29,7 @@ * effect is the invocation of `onPress` and `onLongPress` that occur when a * responder is release while in the "press in" states. */ -import React, { PropsWithChildren } from 'react'; +import React, { memo, PropsWithChildren } from 'react'; import { Pressable as RNPressable, PressableProps as RNPressableProps, StyleProp, ViewStyle } from 'react-native'; import helpers from '../helpers'; @@ -58,36 +58,33 @@ export interface PressableProps } const { px } = helpers; -class Pressable extends React.Component> { - static displayName = 'Pressable'; +function Pressable(props: PropsWithChildren) { + const { + children, + activeOpacity = 0.6, + pressOffset = px(20), + hitOffset, + delayLongPress = 1000, + style, + ...rest + } = props; - render() { - const { - children, - activeOpacity = 0.6, - pressOffset = px(20), - hitOffset, - delayLongPress = 1000, - style, - ...rest - } = this.props; + if (!children) return null; - if (!children) return null; - - return ( - [{ opacity: pressed ? activeOpacity : 1 }, style]} - {...rest} - > - {children} - - ); - } + return ( + [{ opacity: pressed ? activeOpacity : 1 }, style]} + {...rest} + > + {children} + + ); } +Pressable.displayName = 'Pressable'; -export default Pressable; +export default memo(Pressable); diff --git a/packages/react-native/src/radio/RadioItem.tsx b/packages/react-native/src/radio/RadioItem.tsx index 3d4f179768..3ca9f22e3b 100644 --- a/packages/react-native/src/radio/RadioItem.tsx +++ b/packages/react-native/src/radio/RadioItem.tsx @@ -1,4 +1,4 @@ -import React, { FC, memo } from 'react'; +import React, { FC, memo, useMemo } from 'react'; import { Keyboard, StyleSheet } from 'react-native'; import { useTheme } from '@shopify/restyle'; @@ -41,7 +41,7 @@ const RadioItem: FC = ({ list: { width: '100%', flex: 1 }, }); - const renderLabel = () => { + const Label = useMemo(() => { if (typeof label === 'string') { return ( @@ -50,7 +50,7 @@ const RadioItem: FC = ({ ); } return label; - }; + }, [disabled, label, labelStyle]); if (!disabled) return ( @@ -63,7 +63,7 @@ const RadioItem: FC = ({ - {renderLabel()} + {Label} ); @@ -74,7 +74,7 @@ const RadioItem: FC = ({ - {renderLabel()} + {Label} ); diff --git a/packages/react-native/src/result/index.tsx b/packages/react-native/src/result/index.tsx index d50bc1fead..55a1909fdd 100644 --- a/packages/react-native/src/result/index.tsx +++ b/packages/react-native/src/result/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, ReactNode } from 'react'; +import React, { FC, memo, ReactNode, useMemo } from 'react'; import { Image, ImageSourcePropType, StyleProp, ViewStyle } from 'react-native'; import { SvgXml } from 'react-native-svg'; @@ -29,7 +29,7 @@ export interface ResultProps { } const Result: FC = ({ actions = [], type, title, content, imgSource, containerStyle }) => { - const renderImgByType = () => { + const ImgByType = useMemo(() => { if (imgSource) return ; switch (type) { @@ -42,9 +42,9 @@ const Result: FC = ({ actions = [], type, title, content, imgSource default: return null; } - }; + }, [imgSource, type]); - const renderTitle = () => { + const Title = useMemo(() => { if (!title) return null; if (typeof title === 'string') { return ( @@ -54,9 +54,9 @@ const Result: FC = ({ actions = [], type, title, content, imgSource ); } return title; - }; + }, [title]); - const renderContent = () => { + const Content = useMemo(() => { if (!content) return null; if (typeof content === 'string') { return ( @@ -66,13 +66,13 @@ const Result: FC = ({ actions = [], type, title, content, imgSource ); } return content; - }; + }, [content]); return ( - {renderImgByType()} - {renderTitle()} - {renderContent()} + {ImgByType} + {Title} + {Content} {actions.length > 0 && ( {actions.map((action, index) => ( @@ -89,7 +89,7 @@ Result.displayName = 'Result'; export default Result; -function SuccessImg() { +const SuccessImg = memo(() => { const xml = ` @@ -216,9 +216,9 @@ function SuccessImg() { `; return ; -} +}); -function FailImg() { +const FailImg = memo(() => { const xml = ` @@ -345,9 +345,9 @@ function FailImg() { `; return ; -} +}); -function ProcessImg() { +const ProcessImg = memo(() => { const xml = ` @@ -474,4 +474,4 @@ function ProcessImg() { `; return ; -} +}); diff --git a/packages/react-native/src/scroll-number/index.tsx b/packages/react-native/src/scroll-number/index.tsx index 59c9b1a2c5..7e117f7e33 100644 --- a/packages/react-native/src/scroll-number/index.tsx +++ b/packages/react-native/src/scroll-number/index.tsx @@ -1,9 +1,9 @@ -import React, { FC, useCallback } from 'react'; +import React, { FC, memo } from 'react'; import { LayoutChangeEvent, StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native'; import Animated, { useAnimatedStyle, withSpring, withTiming } from 'react-native-reanimated'; import { useTheme } from '@shopify/restyle'; -import { useBoolean, useSafeState } from '@td-design/rn-hooks'; +import { useBoolean, useMemoizedFn, useSafeState } from '@td-design/rn-hooks'; import Box from '../box'; import Flex from '../flex'; @@ -44,15 +44,12 @@ const ScrollNumber: FC = ({ const [measured, { setTrue }] = useBoolean(!!height); const [currentHeight, setCurrentHeight] = useSafeState(height); - const handleLayout = useCallback( - (e: LayoutChangeEvent) => { - if (height) return; - const layoutHeight = e.nativeEvent.layout.height; - setCurrentHeight(layoutHeight); - setTrue(); - }, - [height] - ); + const handleLayout = useMemoizedFn((e: LayoutChangeEvent) => { + if (height) return; + const layoutHeight = e.nativeEvent.layout.height; + setCurrentHeight(layoutHeight); + setTrue(); + }); const styles = StyleSheet.create({ height: { @@ -93,7 +90,7 @@ export interface TickProps value: string; height: number; } -const Tick: FC = ({ numberRange, value, height, containerStyle, textStyle, animationType }) => { +const Tick: FC = memo(({ numberRange, value, height, containerStyle, textStyle, animationType }) => { const getPosition = (value: string, height: number) => { 'worklet'; const index = numberRange?.findIndex(item => item === value); @@ -125,4 +122,4 @@ const Tick: FC = ({ numberRange, value, height, containerStyle, textS ))} ); -}; +}); diff --git a/packages/react-native/src/search-bar/index.tsx b/packages/react-native/src/search-bar/index.tsx index eaa916069b..5dada4c5d9 100644 --- a/packages/react-native/src/search-bar/index.tsx +++ b/packages/react-native/src/search-bar/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, PropsWithChildren } from 'react'; +import React, { FC, PropsWithChildren, useMemo } from 'react'; import { KeyboardTypeOptions, ReturnKeyTypeOptions, StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native'; import Animated, { FadeInRight, FadeOutRight } from 'react-native-reanimated'; @@ -89,7 +89,7 @@ const SearchBar: FC = props => { }, }); - const renderCancelBtn = () => { + const CancelBtn = useMemo(() => { if (!showCancelButton || !focused) return null; return ( = props => { ); - }; + }, [showCancelButton, focused, activeOpacity, theme.spacing.x2, cancelText, onCancel]); return ( @@ -139,7 +139,7 @@ const SearchBar: FC = props => { onSubmitEditing={e => onSearch?.(e.nativeEvent.text)} /> {/* 取消按钮 */} - {renderCancelBtn()} + {CancelBtn} ); }; diff --git a/packages/react-native/src/slider/index.tsx b/packages/react-native/src/slider/index.tsx index 385da87656..2c72dcd117 100644 --- a/packages/react-native/src/slider/index.tsx +++ b/packages/react-native/src/slider/index.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import React, { FC, useMemo } from 'react'; import { StyleSheet, TextStyle } from 'react-native'; import { PanGestureHandler } from 'react-native-gesture-handler'; import Animated from 'react-native-reanimated'; @@ -101,20 +101,26 @@ const Slider: FC = props => { }, }); - const SliderContent = ( - - - - - - + const SliderContent = useMemo( + () => ( + + + + + + + ), + [width, KNOB_WIDTH, progressStyle, onGestureEvent, knobStyle] ); if (!showLabel) { return SliderContent; } - const Label = ; + const Label = useMemo( + () => , + [label, labelStyle] + ); if (labelPosition === 'top' || labelPosition === 'bottom') { return ( diff --git a/packages/react-native/src/svg-icon/IconArrowdown.tsx b/packages/react-native/src/svg-icon/IconArrowdown.tsx index 5f36f6f59d..67f913f58c 100644 --- a/packages/react-native/src/svg-icon/IconArrowdown.tsx +++ b/packages/react-native/src/svg-icon/IconArrowdown.tsx @@ -1,7 +1,4 @@ -/* tslint:disable */ - -/* eslint-disable */ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { ViewProps } from 'react-native'; import { GProps, SvgXml } from 'react-native-svg'; @@ -36,6 +33,4 @@ IconArrowdown.defaultProps = { size: px(16), }; -IconArrowdown = React.memo ? React.memo(IconArrowdown) : IconArrowdown; - -export default IconArrowdown; +export default memo(IconArrowdown); diff --git a/packages/react-native/src/svg-icon/IconBells.tsx b/packages/react-native/src/svg-icon/IconBells.tsx index 180cf3f198..409914b313 100644 --- a/packages/react-native/src/svg-icon/IconBells.tsx +++ b/packages/react-native/src/svg-icon/IconBells.tsx @@ -1,7 +1,4 @@ -/* tslint:disable */ - -/* eslint-disable */ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { ViewProps } from 'react-native'; import { GProps, SvgXml } from 'react-native-svg'; @@ -36,6 +33,4 @@ IconBells.defaultProps = { size: px(16), }; -IconBells = React.memo ? React.memo(IconBells) : IconBells; - -export default IconBells; +export default memo(IconBells); diff --git a/packages/react-native/src/svg-icon/IconCheck.tsx b/packages/react-native/src/svg-icon/IconCheck.tsx index e964c29b59..af40631557 100644 --- a/packages/react-native/src/svg-icon/IconCheck.tsx +++ b/packages/react-native/src/svg-icon/IconCheck.tsx @@ -1,7 +1,4 @@ -/* tslint:disable */ - -/* eslint-disable */ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { ViewProps } from 'react-native'; import { GProps, SvgXml } from 'react-native-svg'; @@ -31,6 +28,4 @@ IconCheck.defaultProps = { size: px(16), }; -IconCheck = React.memo ? React.memo(IconCheck) : IconCheck; - -export default IconCheck; +export default memo(IconCheck); diff --git a/packages/react-native/src/svg-icon/IconCheckboxChecked.tsx b/packages/react-native/src/svg-icon/IconCheckboxChecked.tsx index a9ad164022..a5e4047a7c 100644 --- a/packages/react-native/src/svg-icon/IconCheckboxChecked.tsx +++ b/packages/react-native/src/svg-icon/IconCheckboxChecked.tsx @@ -1,7 +1,4 @@ -/* tslint:disable */ - -/* eslint-disable */ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { ViewProps } from 'react-native'; import { GProps, SvgXml } from 'react-native-svg'; @@ -31,6 +28,4 @@ IconCheckboxChecked.defaultProps = { size: px(16), }; -IconCheckboxChecked = React.memo ? React.memo(IconCheckboxChecked) : IconCheckboxChecked; - -export default IconCheckboxChecked; +export default memo(IconCheckboxChecked); diff --git a/packages/react-native/src/svg-icon/IconCheckboxHalfchecked.tsx b/packages/react-native/src/svg-icon/IconCheckboxHalfchecked.tsx index afc5904e02..dd558414db 100644 --- a/packages/react-native/src/svg-icon/IconCheckboxHalfchecked.tsx +++ b/packages/react-native/src/svg-icon/IconCheckboxHalfchecked.tsx @@ -1,7 +1,4 @@ -/* tslint:disable */ - -/* eslint-disable */ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { ViewProps } from 'react-native'; import { GProps, SvgXml } from 'react-native-svg'; @@ -31,6 +28,4 @@ IconCheckboxHalfchecked.defaultProps = { size: px(16), }; -IconCheckboxHalfchecked = React.memo ? React.memo(IconCheckboxHalfchecked) : IconCheckboxHalfchecked; - -export default IconCheckboxHalfchecked; +export default memo(IconCheckboxHalfchecked); diff --git a/packages/react-native/src/svg-icon/IconCheckboxUnchecked.tsx b/packages/react-native/src/svg-icon/IconCheckboxUnchecked.tsx index 66986778f7..588586be36 100644 --- a/packages/react-native/src/svg-icon/IconCheckboxUnchecked.tsx +++ b/packages/react-native/src/svg-icon/IconCheckboxUnchecked.tsx @@ -1,7 +1,4 @@ -/* tslint:disable */ - -/* eslint-disable */ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { ViewProps } from 'react-native'; import { GProps, SvgXml } from 'react-native-svg'; @@ -31,6 +28,4 @@ IconCheckboxUnchecked.defaultProps = { size: px(16), }; -IconCheckboxUnchecked = React.memo ? React.memo(IconCheckboxUnchecked) : IconCheckboxUnchecked; - -export default IconCheckboxUnchecked; +export default memo(IconCheckboxUnchecked); diff --git a/packages/react-native/src/svg-icon/IconCheckcircle.tsx b/packages/react-native/src/svg-icon/IconCheckcircle.tsx index bcb6921638..f761e0e412 100644 --- a/packages/react-native/src/svg-icon/IconCheckcircle.tsx +++ b/packages/react-native/src/svg-icon/IconCheckcircle.tsx @@ -1,7 +1,4 @@ -/* tslint:disable */ - -/* eslint-disable */ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { ViewProps } from 'react-native'; import { GProps, SvgXml } from 'react-native-svg'; @@ -31,6 +28,4 @@ IconCheckcircle.defaultProps = { size: px(16), }; -IconCheckcircle = React.memo ? React.memo(IconCheckcircle) : IconCheckcircle; - -export default IconCheckcircle; +export default memo(IconCheckcircle); diff --git a/packages/react-native/src/svg-icon/IconCheckcircleo.tsx b/packages/react-native/src/svg-icon/IconCheckcircleo.tsx index 00fa7a1154..c1d23e7acb 100644 --- a/packages/react-native/src/svg-icon/IconCheckcircleo.tsx +++ b/packages/react-native/src/svg-icon/IconCheckcircleo.tsx @@ -1,7 +1,4 @@ -/* tslint:disable */ - -/* eslint-disable */ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { ViewProps } from 'react-native'; import { GProps, SvgXml } from 'react-native-svg'; @@ -41,6 +38,4 @@ IconCheckcircleo.defaultProps = { size: px(16), }; -IconCheckcircleo = React.memo ? React.memo(IconCheckcircleo) : IconCheckcircleo; - -export default IconCheckcircleo; +export default memo(IconCheckcircleo); diff --git a/packages/react-native/src/svg-icon/IconClockcircleo.tsx b/packages/react-native/src/svg-icon/IconClockcircleo.tsx index 1759b18d7f..00bf5b134d 100644 --- a/packages/react-native/src/svg-icon/IconClockcircleo.tsx +++ b/packages/react-native/src/svg-icon/IconClockcircleo.tsx @@ -1,7 +1,4 @@ -/* tslint:disable */ - -/* eslint-disable */ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { ViewProps } from 'react-native'; import { GProps, SvgXml } from 'react-native-svg'; @@ -36,6 +33,4 @@ IconClockcircleo.defaultProps = { size: px(16), }; -IconClockcircleo = React.memo ? React.memo(IconClockcircleo) : IconClockcircleo; - -export default IconClockcircleo; +export default memo(IconClockcircleo); diff --git a/packages/react-native/src/svg-icon/IconClose.tsx b/packages/react-native/src/svg-icon/IconClose.tsx index b7148ec7ae..05a9742a56 100644 --- a/packages/react-native/src/svg-icon/IconClose.tsx +++ b/packages/react-native/src/svg-icon/IconClose.tsx @@ -1,7 +1,4 @@ -/* tslint:disable */ - -/* eslint-disable */ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { ViewProps } from 'react-native'; import { GProps, SvgXml } from 'react-native-svg'; @@ -31,6 +28,4 @@ IconClose.defaultProps = { size: px(16), }; -IconClose = React.memo ? React.memo(IconClose) : IconClose; - -export default IconClose; +export default memo(IconClose); diff --git a/packages/react-native/src/svg-icon/IconClosecircleo.tsx b/packages/react-native/src/svg-icon/IconClosecircleo.tsx index 27f3cbfc1c..b71c5a68d5 100644 --- a/packages/react-native/src/svg-icon/IconClosecircleo.tsx +++ b/packages/react-native/src/svg-icon/IconClosecircleo.tsx @@ -1,7 +1,4 @@ -/* tslint:disable */ - -/* eslint-disable */ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { ViewProps } from 'react-native'; import { GProps, SvgXml } from 'react-native-svg'; @@ -31,6 +28,4 @@ IconClosecircleo.defaultProps = { size: px(16), }; -IconClosecircleo = React.memo ? React.memo(IconClosecircleo) : IconClosecircleo; - -export default IconClosecircleo; +export default memo(IconClosecircleo); diff --git a/packages/react-native/src/svg-icon/IconDate.tsx b/packages/react-native/src/svg-icon/IconDate.tsx index 6b4419aa83..94536d5471 100644 --- a/packages/react-native/src/svg-icon/IconDate.tsx +++ b/packages/react-native/src/svg-icon/IconDate.tsx @@ -1,7 +1,4 @@ -/* tslint:disable */ - -/* eslint-disable */ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { ViewProps } from 'react-native'; import { GProps, SvgXml } from 'react-native-svg'; @@ -76,6 +73,4 @@ IconDate.defaultProps = { size: px(16), }; -IconDate = React.memo ? React.memo(IconDate) : IconDate; - -export default IconDate; +export default memo(IconDate); diff --git a/packages/react-native/src/svg-icon/IconDown.tsx b/packages/react-native/src/svg-icon/IconDown.tsx index 3567d1ca3a..693a5592a8 100644 --- a/packages/react-native/src/svg-icon/IconDown.tsx +++ b/packages/react-native/src/svg-icon/IconDown.tsx @@ -1,7 +1,4 @@ -/* tslint:disable */ - -/* eslint-disable */ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { ViewProps } from 'react-native'; import { GProps, SvgXml } from 'react-native-svg'; @@ -31,6 +28,4 @@ IconDown.defaultProps = { size: px(16), }; -IconDown = React.memo ? React.memo(IconDown) : IconDown; - -export default IconDown; +export default memo(IconDown); diff --git a/packages/react-native/src/svg-icon/IconEllipsis.tsx b/packages/react-native/src/svg-icon/IconEllipsis.tsx index 5ebc6587e9..5e5061ce76 100644 --- a/packages/react-native/src/svg-icon/IconEllipsis.tsx +++ b/packages/react-native/src/svg-icon/IconEllipsis.tsx @@ -1,7 +1,4 @@ -/* tslint:disable */ - -/* eslint-disable */ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { ViewProps } from 'react-native'; import { GProps, SvgXml } from 'react-native-svg'; @@ -31,6 +28,4 @@ IconEllipsis.defaultProps = { size: px(16), }; -IconEllipsis = React.memo ? React.memo(IconEllipsis) : IconEllipsis; - -export default IconEllipsis; +export default memo(IconEllipsis); diff --git a/packages/react-native/src/svg-icon/IconEyeclose.tsx b/packages/react-native/src/svg-icon/IconEyeclose.tsx index 18efb956aa..15da117764 100644 --- a/packages/react-native/src/svg-icon/IconEyeclose.tsx +++ b/packages/react-native/src/svg-icon/IconEyeclose.tsx @@ -1,7 +1,4 @@ -/* tslint:disable */ - -/* eslint-disable */ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { ViewProps } from 'react-native'; import { GProps, SvgXml } from 'react-native-svg'; @@ -51,6 +48,4 @@ IconEyeclose.defaultProps = { size: px(16), }; -IconEyeclose = React.memo ? React.memo(IconEyeclose) : IconEyeclose; - -export default IconEyeclose; +export default memo(IconEyeclose); diff --git a/packages/react-native/src/svg-icon/IconEyeopen.tsx b/packages/react-native/src/svg-icon/IconEyeopen.tsx index 026bc73a32..c35aa3e16d 100644 --- a/packages/react-native/src/svg-icon/IconEyeopen.tsx +++ b/packages/react-native/src/svg-icon/IconEyeopen.tsx @@ -1,7 +1,4 @@ -/* tslint:disable */ - -/* eslint-disable */ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { ViewProps } from 'react-native'; import { GProps, SvgXml } from 'react-native-svg'; @@ -36,6 +33,4 @@ IconEyeopen.defaultProps = { size: px(16), }; -IconEyeopen = React.memo ? React.memo(IconEyeopen) : IconEyeopen; - -export default IconEyeopen; +export default memo(IconEyeopen); diff --git a/packages/react-native/src/svg-icon/IconLeft.tsx b/packages/react-native/src/svg-icon/IconLeft.tsx index a4d82e88d6..d390997c0e 100644 --- a/packages/react-native/src/svg-icon/IconLeft.tsx +++ b/packages/react-native/src/svg-icon/IconLeft.tsx @@ -1,7 +1,4 @@ -/* tslint:disable */ - -/* eslint-disable */ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { ViewProps } from 'react-native'; import { GProps, SvgXml } from 'react-native-svg'; @@ -31,6 +28,4 @@ IconLeft.defaultProps = { size: px(16), }; -IconLeft = React.memo ? React.memo(IconLeft) : IconLeft; - -export default IconLeft; +export default memo(IconLeft); diff --git a/packages/react-native/src/svg-icon/IconMinus.tsx b/packages/react-native/src/svg-icon/IconMinus.tsx index 9cfaedcd14..e276b31de6 100644 --- a/packages/react-native/src/svg-icon/IconMinus.tsx +++ b/packages/react-native/src/svg-icon/IconMinus.tsx @@ -1,7 +1,4 @@ -/* tslint:disable */ - -/* eslint-disable */ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { ViewProps } from 'react-native'; import { GProps, SvgXml } from 'react-native-svg'; @@ -31,6 +28,4 @@ IconMinus.defaultProps = { size: px(16), }; -IconMinus = React.memo ? React.memo(IconMinus) : IconMinus; - -export default IconMinus; +export default memo(IconMinus); diff --git a/packages/react-native/src/svg-icon/IconPlus.tsx b/packages/react-native/src/svg-icon/IconPlus.tsx index 1447ee4a54..3acd38ea24 100644 --- a/packages/react-native/src/svg-icon/IconPlus.tsx +++ b/packages/react-native/src/svg-icon/IconPlus.tsx @@ -1,7 +1,4 @@ -/* tslint:disable */ - -/* eslint-disable */ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { ViewProps } from 'react-native'; import { GProps, SvgXml } from 'react-native-svg'; @@ -31,6 +28,4 @@ IconPlus.defaultProps = { size: px(16), }; -IconPlus = React.memo ? React.memo(IconPlus) : IconPlus; - -export default IconPlus; +export default memo(IconPlus); diff --git a/packages/react-native/src/svg-icon/IconRadioChecked.tsx b/packages/react-native/src/svg-icon/IconRadioChecked.tsx index 7b5317aaf9..d888106e7e 100644 --- a/packages/react-native/src/svg-icon/IconRadioChecked.tsx +++ b/packages/react-native/src/svg-icon/IconRadioChecked.tsx @@ -1,7 +1,4 @@ -/* tslint:disable */ - -/* eslint-disable */ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { ViewProps } from 'react-native'; import { GProps, SvgXml } from 'react-native-svg'; @@ -31,6 +28,4 @@ IconRadioChecked.defaultProps = { size: px(16), }; -IconRadioChecked = React.memo ? React.memo(IconRadioChecked) : IconRadioChecked; - -export default IconRadioChecked; +export default memo(IconRadioChecked); diff --git a/packages/react-native/src/svg-icon/IconRadioUnchecked.tsx b/packages/react-native/src/svg-icon/IconRadioUnchecked.tsx index 166c72d306..f75905a557 100644 --- a/packages/react-native/src/svg-icon/IconRadioUnchecked.tsx +++ b/packages/react-native/src/svg-icon/IconRadioUnchecked.tsx @@ -1,7 +1,4 @@ -/* tslint:disable */ - -/* eslint-disable */ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { ViewProps } from 'react-native'; import { GProps, SvgXml } from 'react-native-svg'; @@ -31,6 +28,4 @@ IconRadioUnchecked.defaultProps = { size: px(16), }; -IconRadioUnchecked = React.memo ? React.memo(IconRadioUnchecked) : IconRadioUnchecked; - -export default IconRadioUnchecked; +export default memo(IconRadioUnchecked); diff --git a/packages/react-native/src/svg-icon/IconReload.tsx b/packages/react-native/src/svg-icon/IconReload.tsx index 8ea4d07243..f8929f84fc 100644 --- a/packages/react-native/src/svg-icon/IconReload.tsx +++ b/packages/react-native/src/svg-icon/IconReload.tsx @@ -1,7 +1,4 @@ -/* tslint:disable */ - -/* eslint-disable */ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { ViewProps } from 'react-native'; import { GProps, SvgXml } from 'react-native-svg'; @@ -31,6 +28,4 @@ IconReload.defaultProps = { size: px(16), }; -IconReload = React.memo ? React.memo(IconReload) : IconReload; - -export default IconReload; +export default memo(IconReload); diff --git a/packages/react-native/src/svg-icon/IconRight.tsx b/packages/react-native/src/svg-icon/IconRight.tsx index a455f4c875..1da9894db8 100644 --- a/packages/react-native/src/svg-icon/IconRight.tsx +++ b/packages/react-native/src/svg-icon/IconRight.tsx @@ -1,7 +1,4 @@ -/* tslint:disable */ - -/* eslint-disable */ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { ViewProps } from 'react-native'; import { GProps, SvgXml } from 'react-native-svg'; @@ -31,6 +28,4 @@ IconRight.defaultProps = { size: px(16), }; -IconRight = React.memo ? React.memo(IconRight) : IconRight; - -export default IconRight; +export default memo(IconRight); diff --git a/packages/react-native/src/svg-icon/IconSearch.tsx b/packages/react-native/src/svg-icon/IconSearch.tsx index d753968070..643402f625 100644 --- a/packages/react-native/src/svg-icon/IconSearch.tsx +++ b/packages/react-native/src/svg-icon/IconSearch.tsx @@ -1,7 +1,4 @@ -/* tslint:disable */ - -/* eslint-disable */ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { ViewProps } from 'react-native'; import { GProps, SvgXml } from 'react-native-svg'; @@ -36,6 +33,4 @@ IconSearch.defaultProps = { size: px(16), }; -IconSearch = React.memo ? React.memo(IconSearch) : IconSearch; - -export default IconSearch; +export default memo(IconSearch); diff --git a/packages/react-native/src/svg-icon/IconUp.tsx b/packages/react-native/src/svg-icon/IconUp.tsx index cb1db724ea..a3632032a4 100644 --- a/packages/react-native/src/svg-icon/IconUp.tsx +++ b/packages/react-native/src/svg-icon/IconUp.tsx @@ -1,7 +1,4 @@ -/* tslint:disable */ - -/* eslint-disable */ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { ViewProps } from 'react-native'; import { GProps, SvgXml } from 'react-native-svg'; @@ -31,6 +28,4 @@ IconUp.defaultProps = { size: px(16), }; -IconUp = React.memo ? React.memo(IconUp) : IconUp; - -export default IconUp; +export default memo(IconUp); diff --git a/packages/react-native/src/swipe-row/context.tsx b/packages/react-native/src/swipe-row/context.tsx index 925cd9045d..3eaa86dc8f 100644 --- a/packages/react-native/src/swipe-row/context.tsx +++ b/packages/react-native/src/swipe-row/context.tsx @@ -1,26 +1,34 @@ -import React, { PropsWithChildren, useCallback, useMemo } from 'react'; +import React, { PropsWithChildren, useMemo } from 'react'; -import { usePrevious, useSafeState } from '@td-design/rn-hooks'; +import { useMemoizedFn, usePrevious, useSafeState } from '@td-design/rn-hooks'; export const SwipeRowContext = React.createContext<{ id?: string | number; changeState: (id: string | number) => void; + multiple?: boolean; }>({ id: undefined, changeState: (id: string | number) => { console.log('id', id); }, + multiple: false, }); -export const SwipeRowContextProvider = ({ children }: PropsWithChildren) => { +export const SwipeRowContextProvider = ({ + children, + multiple, +}: PropsWithChildren<{ + /** 是否允许多开 */ + multiple?: boolean; +}>) => { const [currentId, setCurrentId] = useSafeState(''); const previous = usePrevious(currentId); - const changeState = useCallback((id: string | number) => { + const changeState = useMemoizedFn((id: string | number) => { setCurrentId(id); - }, []); + }); - const value = useMemo(() => ({ changeState, id: previous }), [previous]); + const value = useMemo(() => ({ changeState, id: previous, multiple }), [previous, multiple]); return {children}; }; diff --git a/packages/react-native/src/swipe-row/index.tsx b/packages/react-native/src/swipe-row/index.tsx index 2a770e0394..96cc09eb70 100644 --- a/packages/react-native/src/swipe-row/index.tsx +++ b/packages/react-native/src/swipe-row/index.tsx @@ -78,7 +78,7 @@ const SwipeRow: FC = ({ }); return ( - + {props.label} diff --git a/packages/react-native/src/swipe-row/useSwipeRow.ts b/packages/react-native/src/swipe-row/useSwipeRow.ts index 7945895754..5d67af2754 100644 --- a/packages/react-native/src/swipe-row/useSwipeRow.ts +++ b/packages/react-native/src/swipe-row/useSwipeRow.ts @@ -8,15 +8,15 @@ import { SwipeRowContext } from './context'; export default function useSwipeRow({ anchor, onRemove }: Pick) { const swipeableRef = useRef(null); - const { changeState, id } = useContext(SwipeRowContext); + const { changeState, id, multiple } = useContext(SwipeRowContext); const [visible, setVisible] = useSafeState(true); useEffect(() => { - if (anchor === id) { + if (anchor === id && !multiple) { swipeableRef.current?.close(); } - }, [anchor, id]); + }, [anchor, id, multiple]); const handleRemove = async () => { await onRemove?.(); diff --git a/packages/react-native/src/switch/index.tsx b/packages/react-native/src/switch/index.tsx index 70b2b11be1..86b2541f9b 100644 --- a/packages/react-native/src/switch/index.tsx +++ b/packages/react-native/src/switch/index.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef } from 'react'; +import React, { forwardRef, useMemo } from 'react'; import { StyleSheet, TouchableWithoutFeedback } from 'react-native'; import Animated, { useAnimatedStyle } from 'react-native-reanimated'; import { mix, mixColor } from 'react-native-redash'; @@ -95,7 +95,7 @@ const Switch = forwardRef( text: { fontSize: HANDLER_SIZE / 2, color: theme.colors.primary200 }, }); - const renderContent = () => { + const Content = useMemo(() => { return ( @@ -111,12 +111,12 @@ const Switch = forwardRef( ); - }; + }, [checked, disabled, showText, onText, offText, containerStyle, handlerStyle]); if (disabled) { - return renderContent(); + return Content; } - return {renderContent()}; + return {Content}; } ); Switch.displayName = 'Switch'; diff --git a/packages/react-native/src/table/Cell.tsx b/packages/react-native/src/table/Cell.tsx index d8996eede6..61b051b0fa 100644 --- a/packages/react-native/src/table/Cell.tsx +++ b/packages/react-native/src/table/Cell.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { StyleProp, ViewStyle } from 'react-native'; import Box from '../box'; @@ -11,7 +11,7 @@ interface CellProps { style?: StyleProp; } -export const Cell: FC = ({ data, column, style }) => { +export const Cell: FC = memo(({ data, column, style }) => { return ( {column.render ? ( @@ -37,4 +37,4 @@ export const Cell: FC = ({ data, column, style }) => { )} ); -}; +}); diff --git a/packages/react-native/src/table/Head.tsx b/packages/react-native/src/table/Head.tsx index 4a00b7adfc..1076318324 100644 --- a/packages/react-native/src/table/Head.tsx +++ b/packages/react-native/src/table/Head.tsx @@ -1,4 +1,4 @@ -import React, { FC, useContext, useMemo } from 'react'; +import React, { FC, memo, useContext, useMemo } from 'react'; import { StyleProp, ViewStyle } from 'react-native'; import Box from '../box'; @@ -12,7 +12,7 @@ interface HeadProps { headerStyle?: StyleProp; } -export const Head: FC = ({ headerStyle }) => { +export const Head: FC = memo(({ headerStyle }) => { const { columns, cellWidth } = useContext(ColumnContext); const cellRender = useMemo(() => { @@ -49,4 +49,4 @@ export const Head: FC = ({ headerStyle }) => { {cellRender} ); -}; +}); diff --git a/packages/react-native/src/table/Rows.tsx b/packages/react-native/src/table/Rows.tsx index dd1c26ee26..d6e6f03c20 100644 --- a/packages/react-native/src/table/Rows.tsx +++ b/packages/react-native/src/table/Rows.tsx @@ -1,4 +1,4 @@ -import React, { FC, useContext, useMemo } from 'react'; +import React, { FC, memo, useContext, useMemo } from 'react'; import { StyleProp, ViewStyle } from 'react-native'; import Box from '../box'; @@ -13,7 +13,7 @@ interface RowsProps { rowStyle?: StyleProp; } -export const Rows: FC = ({ data, rowStyle }) => { +export const Rows: FC = memo(({ data, rowStyle }) => { const { columns, cellWidth } = useContext(ColumnContext); const cellRender = useMemo(() => { @@ -39,4 +39,4 @@ export const Rows: FC = ({ data, rowStyle }) => { {cellRender} ); -}; +}); diff --git a/packages/react-native/src/table/index.tsx b/packages/react-native/src/table/index.tsx index 131447ea82..8700a9a39c 100644 --- a/packages/react-native/src/table/index.tsx +++ b/packages/react-native/src/table/index.tsx @@ -48,7 +48,7 @@ function Table>(props: TableProps) { horizontal onContentSizeChange={handleLayout} contentContainerStyle={styles.contentContainer} - showsHorizontalScrollIndicator={true} + showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} scrollEnabled={true} bounces={false} @@ -57,6 +57,8 @@ function Table>(props: TableProps) { scrollEnabled={dataSource.length > 0} nestedScrollEnabled stickyHeaderIndices={fixedHeader && showHeader ? [0] : []} + showsVerticalScrollIndicator={false} + showsHorizontalScrollIndicator={false} contentContainerStyle={{ flexGrow: 1, backgroundColor: theme.colors.white, diff --git a/packages/react-native/src/tag/index.tsx b/packages/react-native/src/tag/index.tsx index cd11827aac..aea8296bbd 100644 --- a/packages/react-native/src/tag/index.tsx +++ b/packages/react-native/src/tag/index.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import React, { FC, useMemo } from 'react'; import { StyleSheet } from 'react-native'; import Svg, { Path } from 'react-native-svg'; @@ -53,6 +53,7 @@ type BaseTagProps = BorderProps & ColorProps & LayoutProps & TypographyProps; + const BaseTag = createRestyleComponent([border, backgroundColor, color, layout, typography]); const { px, ONE_PIXEL } = helpers; @@ -75,6 +76,35 @@ const Tag: FC = ({ if (closed) return null; + const { + fontFamily, + fontSize = px(12), + fontStyle, + fontWeight, + letterSpacing, + lineHeight, + textAlign, + textDecorationLine, + textDecorationStyle, + textTransform, + color = disabled ? 'disabled' : 'primary100', + backgroundColor, + borderWidth = ONE_PIXEL, + justifyContent = 'center', + alignItems = 'center', + borderRadius = 'x1', + ...rest + } = restProps; + + let borderColor = rest.borderColor ?? color; + if (ghost && disabled) { + borderColor = 'disabled'; + } else if (checked) { + borderColor = 'primary200'; + } + + const { paddingHorizontal, paddingVertical } = getBySize(size); + const styles = StyleSheet.create({ iconBtn: { position: 'absolute', @@ -97,20 +127,20 @@ const Tag: FC = ({ }); /** 删除的图标组件 */ - const renderClosableIcon = () => { + const ClosableIcon = useMemo(() => { if (closable && !disabled) return ( - handleDelete()} style={styles.iconBtn}> + ); return null; - }; + }, [closable, disabled, styles.iconBtn, styles.iconWrap, theme.colors.white]); /** 选中的图标组件 */ - const renderCheckedIcon = () => { + const CheckedIcon = useMemo(() => { if (checked) return ( @@ -123,9 +153,9 @@ const Tag: FC = ({ ); return null; - }; + }, [checked, styles.check, theme.colors.primary200]); - const renderContent = () => ( + const Content = ( = ({ ); - const { - fontFamily, - fontSize = px(12), - fontStyle, - fontWeight, - letterSpacing, - lineHeight, - textAlign, - textDecorationLine, - textDecorationStyle, - textTransform, - color = disabled ? 'disabled' : 'primary100', - backgroundColor, - borderWidth = ONE_PIXEL, - justifyContent = 'center', - alignItems = 'center', - borderRadius = 'x1', - ...rest - } = restProps; - - let borderColor = rest.borderColor ?? color; - if (ghost && disabled) { - borderColor = 'disabled'; - } else if (checked) { - borderColor = 'primary200'; - } - - const { paddingHorizontal, paddingVertical } = getBySize(size); - if (selectable) return ( - {renderContent()} + {Content} - {renderClosableIcon()} - {renderCheckedIcon()} + {ClosableIcon} + {CheckedIcon} ); return ( - {renderContent()} - {renderClosableIcon()} - {renderCheckedIcon()} + {Content} + {ClosableIcon} + {CheckedIcon} ); }; diff --git a/packages/react-native/src/text/index.tsx b/packages/react-native/src/text/index.tsx index e86c11a5c2..fa449e0689 100644 --- a/packages/react-native/src/text/index.tsx +++ b/packages/react-native/src/text/index.tsx @@ -1,5 +1,7 @@ -import React, { createElement, memo, PropsWithChildren } from 'react'; +import React, { memo, PropsWithChildren } from 'react'; import { TextProps as RNTextProps } from 'react-native'; +// @ts-ignore +import { NativeText } from 'react-native/Libraries/Text/TextNativeComponent'; import { createText, TextProps } from '@shopify/restyle'; @@ -7,9 +9,6 @@ import { Theme } from '../theme'; type Props = TextProps & Omit; -const NativeText = ({ onLongPress, onPress, onPressIn, onPressOut, ...props }: RNTextProps) => - createElement('RCTText', props); - const BaseText = createText(NativeText); const Text = memo(({ children, style, ...props }: PropsWithChildren) => { diff --git a/packages/react-native/src/timeline/HorizontalTimeline.tsx b/packages/react-native/src/timeline/HorizontalTimeline.tsx index 9b4881d348..201ce1c26d 100644 --- a/packages/react-native/src/timeline/HorizontalTimeline.tsx +++ b/packages/react-native/src/timeline/HorizontalTimeline.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { memo } from 'react'; import { LayoutChangeEvent, NativeSyntheticEvent, ScrollView, TextLayoutEventData } from 'react-native'; import { useTheme } from '@shopify/restyle'; @@ -12,48 +12,23 @@ import { TimelineProps, TimelineStepProps } from './type'; const HorizontalTimeline = ({ data, customIcon, lineStyle }: Omit) => { const [_, { set, get }] = useMap(); + const handleDateLayout = (e: NativeSyntheticEvent, index: number) => { const textWidth = e.nativeEvent.lines[0].width; set(index, Math.floor(textWidth)); }; - const renderDateAndTime = ({ date, time }: TimelineStepProps, index: number) => { - return ( - - handleDateLayout(e, index)}> - {date} - - - {time} - - - ); - }; - - const renderTitleAndDescription = ({ title, description }: TimelineStepProps) => { - return ( - - - {title} - - - {description} - - - ); - }; - const renderItem = (item: TimelineStepProps, index: number) => { return ( - {renderDateAndTime(item, index)} + handleDateLayout(e, index)} /> - {renderTitleAndDescription(item)} + ); }; @@ -68,34 +43,68 @@ HorizontalTimeline.displayName = 'HorizontalTimeline'; export default HorizontalTimeline; -const CircleAndLine = ({ - isLast, - width, - customIcon, - lineStyle, -}: Pick & { isLast: boolean; width: number }) => { - const theme = useTheme(); - const [iconWidth, setIconWidth] = useSafeState(theme.borderRadii.x2); - - const handleLayout = (e: LayoutChangeEvent) => { - setIconWidth(Math.floor(e.nativeEvent.layout.width)); - }; +const DateAndTime = memo( + ({ + date, + time, + onLayout, + }: TimelineStepProps & { onLayout: (event: NativeSyntheticEvent) => void }) => { + return ( + + + {date} + + + {time} + + + ); + } +); +const TitleAndDescription = memo(({ title, description }: TimelineStepProps) => { return ( - - {customIcon ? ( - - {customIcon} - - ) : ( - - )} - {!isLast && } - + + + {title} + + + {description} + + ); -}; +}); + +const CircleAndLine = memo( + ({ + isLast, + width, + customIcon, + lineStyle, + }: Pick & { isLast: boolean; width: number }) => { + const theme = useTheme(); + const [iconWidth, setIconWidth] = useSafeState(theme.borderRadii.x2); + + const handleLayout = (e: LayoutChangeEvent) => { + setIconWidth(Math.floor(e.nativeEvent.layout.width)); + }; + + return ( + + {customIcon ? ( + + {customIcon} + + ) : ( + + )} + {!isLast && } + + ); + } +); diff --git a/packages/react-native/src/timeline/VerticalTimeline.tsx b/packages/react-native/src/timeline/VerticalTimeline.tsx index 2587f998d6..d6a03ec01d 100644 --- a/packages/react-native/src/timeline/VerticalTimeline.tsx +++ b/packages/react-native/src/timeline/VerticalTimeline.tsx @@ -1,4 +1,4 @@ -import React, { useRef } from 'react'; +import React, { memo, useRef } from 'react'; import { LayoutChangeEvent, ScrollView } from 'react-native'; import { useTheme } from '@shopify/restyle'; @@ -26,36 +26,10 @@ const VerticalTimeline = ({ data, customIcon, lineStyle }: Omit { - return ( - - - {date} - - - {time} - - - ); - }; - - const renderEvent = ({ title, description }: TimelineStepProps, index: number) => { - return ( - handleEventLayout(e, index)} flex={1}> - - {title} - - - {description} - - - ); - }; - const renderItem = (item: TimelineStepProps, index: number) => { return ( - {renderDateAndTime(item)} + - {renderEvent(item, index)} + handleEventLayout(e, index)} /> ); }; @@ -78,41 +52,79 @@ VerticalTimeline.displayName = 'VerticalTimeline'; export default VerticalTimeline; -const CircleAndLine = ({ - height, - isLast, - titleHeight, - customIcon, - lineStyle, -}: { height: number; isLast: boolean; titleHeight: number } & Pick) => { - const theme = useTheme(); - const [iconHeight, setIconHeight] = useSafeState(theme.borderRadii.x2); - - const handleLayout = (e: LayoutChangeEvent) => { - setIconHeight(Math.floor(e.nativeEvent.layout.height)); - }; - +const DateAndTime = memo(({ date, time }: TimelineStepProps) => { return ( - - {customIcon ? ( - - {customIcon} - - ) : ( - - )} - {!isLast && } + + + {date} + + + {time} + ); -}; +}); + +const Event = memo( + ({ + title, + description, + onLayout, + onTitleLayout, + }: TimelineStepProps & { + onTitleLayout: (event: LayoutChangeEvent) => void; + onLayout: (event: LayoutChangeEvent) => void; + }) => { + return ( + + + {title} + + + {description} + + + ); + } +); + +const CircleAndLine = memo( + ({ + height, + isLast, + titleHeight, + customIcon, + lineStyle, + }: { height: number; isLast: boolean; titleHeight: number } & Pick) => { + const theme = useTheme(); + const [iconHeight, setIconHeight] = useSafeState(theme.borderRadii.x2); + + const handleLayout = (e: LayoutChangeEvent) => { + setIconHeight(Math.floor(e.nativeEvent.layout.height)); + }; + + return ( + + {customIcon ? ( + + {customIcon} + + ) : ( + + )} + {!isLast && } + + ); + } +); diff --git a/packages/react-native/src/tooltip/Triangle.tsx b/packages/react-native/src/tooltip/Triangle.tsx index 2f714e5a0d..720a901692 100644 --- a/packages/react-native/src/tooltip/Triangle.tsx +++ b/packages/react-native/src/tooltip/Triangle.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { memo } from 'react'; import { StyleProp, StyleSheet, ViewStyle } from 'react-native'; import Box from '../box'; @@ -8,7 +8,9 @@ type Props = { isDown: boolean; }; -const Triangle = ({ style, isDown }: Props) => ; +const Triangle = memo(({ style, isDown }: Props) => ( + +)); const styles = StyleSheet.create({ down: { diff --git a/packages/react-native/src/tooltip/index.tsx b/packages/react-native/src/tooltip/index.tsx index d72237dbe1..bccacde772 100644 --- a/packages/react-native/src/tooltip/index.tsx +++ b/packages/react-native/src/tooltip/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, PropsWithChildren, ReactNode, Reducer, useReducer, useRef } from 'react'; +import React, { FC, memo, PropsWithChildren, ReactNode, Reducer, useMemo, useReducer, useRef } from 'react'; import { Dimensions, LayoutChangeEvent, Modal, Pressable, StyleProp, View, ViewStyle } from 'react-native'; import Box from '../box'; @@ -108,7 +108,7 @@ const Tooltip: FC> = props => { dispatch({ type: 'toggle' }); }; - const getTooltipStyle = () => { + const Content = useMemo(() => { const { x, y } = getTooltipCoordinate( offsetX, offsetY, @@ -141,30 +141,6 @@ const Tooltip: FC> = props => { tooltipStyle.top = y; } - return { tooltipStyle, pastMiddleLine, pastCenterLine }; - }; - - const renderPointer = (pastMiddleLine: boolean, pastCenterLine: boolean) => { - return ( - - - - ); - }; - - const renderContent = () => { - const { pastMiddleLine, pastCenterLine, tooltipStyle } = getTooltipStyle(); return ( <> > = props => { > {children} - {withCaret && renderPointer(pastMiddleLine, pastCenterLine)} + {typeof content === 'string' ? ( @@ -191,7 +178,7 @@ const Tooltip: FC> = props => { ); - }; + }, [offsetX, offsetY, elementWidth, elementHeight, ScreenWidth, ScreenHeight, width, withCaret, backgroundColor]); const pressableProps = { [actionType]: toggleTooltip, @@ -212,7 +199,7 @@ const Tooltip: FC> = props => { }} onPress={toggleTooltip} > - {renderContent()} + {Content} @@ -220,3 +207,44 @@ const Tooltip: FC> = props => { }; export default Tooltip; + +const Pointer = memo( + ({ + withCaret, + pastCenterLine, + pastMiddleLine, + offsetY, + offsetX, + elementHeight, + elementWidth, + backgroundColor, + }: { + withCaret: boolean; + pastMiddleLine: boolean; + pastCenterLine: boolean; + offsetY: number; + offsetX: number; + elementHeight: number; + elementWidth: number; + backgroundColor: string; + }) => { + if (!withCaret) return null; + + return ( + + + + ); + } +); diff --git a/packages/react-native/src/tree/Checkbox.tsx b/packages/react-native/src/tree/Checkbox.tsx index f15b8b7f36..20fcaf72cb 100644 --- a/packages/react-native/src/tree/Checkbox.tsx +++ b/packages/react-native/src/tree/Checkbox.tsx @@ -1,11 +1,11 @@ -import React from 'react'; +import React, { memo } from 'react'; import { SvgXml } from 'react-native-svg'; import { useTheme } from '@shopify/restyle'; import { Theme } from '../theme'; -export default function Checkbox({ disabled, checked }: { disabled?: boolean; checked: 'all' | 'half' | 'none' }) { +const Checkbox = memo(({ disabled, checked }: { disabled?: boolean; checked: 'all' | 'half' | 'none' }) => { const theme = useTheme(); if (checked === 'all') { @@ -29,4 +29,6 @@ export default function Checkbox({ disabled, checked }: { disabled?: boolean; ch xml={``} /> ); -} +}); + +export default Checkbox; diff --git a/packages/react-native/src/tree/Chevron.tsx b/packages/react-native/src/tree/Chevron.tsx index 9adfbd2d1d..d42a620d2b 100644 --- a/packages/react-native/src/tree/Chevron.tsx +++ b/packages/react-native/src/tree/Chevron.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import Animated, { useAnimatedStyle } from 'react-native-reanimated'; import { mix } from 'react-native-redash'; @@ -20,4 +20,4 @@ const Chevron: FC<{ progress: Animated.SharedValue }> = ({ progress }) = ); }; -export default Chevron; +export default memo(Chevron); diff --git a/packages/react-native/src/tree/TreeGroup.tsx b/packages/react-native/src/tree/TreeGroup.tsx index ed39bb07c5..dfdac1f4cc 100644 --- a/packages/react-native/src/tree/TreeGroup.tsx +++ b/packages/react-native/src/tree/TreeGroup.tsx @@ -1,4 +1,4 @@ -import { PropsWithChildren } from 'react'; +import { memo, PropsWithChildren } from 'react'; import React from 'react'; import Animated from 'react-native-reanimated'; @@ -15,7 +15,7 @@ import { TreeItemProps, TreeProps } from './type'; import useGroup from './useGroup'; import { useTree } from './useTree'; -export default function TreeGroup({ +function TreeGroup({ id, text, disabled, @@ -80,3 +80,5 @@ export default function TreeGroup({ ); } + +export default memo(TreeGroup); diff --git a/packages/react-native/src/tree/useGroup.ts b/packages/react-native/src/tree/useGroup.ts index 4584589ba1..f9b0ebe816 100644 --- a/packages/react-native/src/tree/useGroup.ts +++ b/packages/react-native/src/tree/useGroup.ts @@ -76,7 +76,7 @@ export default function useGroup({ progress, checkStatus, - handleLayout: useMemoizedFn(handleLayout), + handleLayout, handlePress: useMemoizedFn(handlePress), }; } diff --git a/packages/react-native/src/white-space/index.tsx b/packages/react-native/src/white-space/index.tsx index a4e515f4ba..5820530cf7 100644 --- a/packages/react-native/src/white-space/index.tsx +++ b/packages/react-native/src/white-space/index.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import React, { FC, memo } from 'react'; import { useTheme } from '@shopify/restyle'; @@ -16,4 +16,4 @@ const WhiteSpace: FC = ({ size = 'x2', backgroundColor = 'trans }; WhiteSpace.displayName = 'WhiteSpace'; -export default WhiteSpace; +export default memo(WhiteSpace); diff --git a/packages/react-native/src/wing-blank/index.tsx b/packages/react-native/src/wing-blank/index.tsx index cfb8856ae8..6f27fb466b 100644 --- a/packages/react-native/src/wing-blank/index.tsx +++ b/packages/react-native/src/wing-blank/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, PropsWithChildren } from 'react'; +import React, { FC, memo, PropsWithChildren } from 'react'; import { BoxProps } from '@shopify/restyle'; @@ -18,4 +18,4 @@ const WingBlank: FC> = ({ children, size = 'x2 }; WingBlank.displayName = 'WingBlank'; -export default WingBlank; +export default memo(WingBlank); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7933009c53..dda8979ce0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,5 +1,8 @@ lockfileVersion: 5.4 +overrides: + '@types/react': 17.0.43 + importers: .: @@ -117,7 +120,7 @@ importers: '@rollup/plugin-node-resolve': ^15.1.0 '@types/lodash-es': ^4.17.8 '@types/node': ^20.4.4 - '@types/react': ^18.2.15 + '@types/react': 17.0.43 '@types/react-native': ^0.72.2 lodash-es: ^4.17.21 rollup: ^3.26.3 @@ -132,7 +135,7 @@ importers: '@rollup/plugin-node-resolve': 15.1.0_rollup@3.26.3 '@types/lodash-es': 4.17.8 '@types/node': 20.4.4 - '@types/react': 18.2.15 + '@types/react': 17.0.43 '@types/react-native': 0.72.2 rollup: 3.26.3 rollup-plugin-typescript2: 0.35.0_afuk5ckrta3fepxfxriis2nsxm @@ -148,7 +151,7 @@ importers: '@rollup/plugin-node-resolve': ^15.1.0 '@types/color': ^3.0.3 '@types/lodash-es': ^4.17.8 - '@types/react': ^18.2.15 + '@types/react': 17.0.43 '@types/react-dom': ^18.2.7 classnames: ^2.3.2 color: ^4.2.3 @@ -188,7 +191,7 @@ importers: '@rollup/plugin-node-resolve': 15.1.0_rollup@3.26.3 '@types/color': 3.0.3 '@types/lodash-es': 4.17.8 - '@types/react': 18.2.15 + '@types/react': 17.0.43 '@types/react-dom': 18.2.7 less: 4.1.3 postcss: 8.4.27 @@ -206,7 +209,7 @@ importers: '@rollup/plugin-commonjs': ^25.0.3 '@rollup/plugin-node-resolve': ^15.1.0 '@types/lodash-es': ^4.17.8 - '@types/react': ^18.2.15 + '@types/react': 17.0.43 '@types/react-dom': ^18.2.7 echarts: ^5.4.3 echarts-for-react: ^3.0.2 @@ -228,7 +231,7 @@ importers: '@rollup/plugin-commonjs': 25.0.3_rollup@3.26.3 '@rollup/plugin-node-resolve': 15.1.0_rollup@3.26.3 '@types/lodash-es': 4.17.8 - '@types/react': 18.2.15 + '@types/react': 17.0.43 '@types/react-dom': 18.2.7 less: 4.1.3 postcss: 8.4.27 @@ -245,7 +248,7 @@ importers: '@rollup/plugin-commonjs': ^25.0.3 '@rollup/plugin-node-resolve': ^15.1.0 '@types/lodash-es': ^4.17.8 - '@types/react': ^18.2.15 + '@types/react': 17.0.43 '@types/react-dom': ^18.2.7 lodash-es: ^4.17.21 rollup: ^3.26.3 @@ -261,7 +264,7 @@ importers: '@rollup/plugin-commonjs': 25.0.3_rollup@3.26.3 '@rollup/plugin-node-resolve': 15.1.0_rollup@3.26.3 '@types/lodash-es': 4.17.8 - '@types/react': 18.2.15 + '@types/react': 17.0.43 '@types/react-dom': 18.2.7 rollup: 3.26.3 rollup-plugin-typescript2: 0.35.0_afuk5ckrta3fepxfxriis2nsxm @@ -272,7 +275,7 @@ importers: specifiers: '@shopify/restyle': 2.4.2 '@td-design/rn-hooks': ^2.7.3 - '@types/react': ^18.2.15 + '@types/react': 17.0.43 '@types/react-native': ^0.72.2 rc-field-form: ^1.34.2 react-native-builder-bob: ^0.21.3 @@ -289,7 +292,7 @@ importers: rc-field-form: 1.34.2 react-native-shadow-2: 7.0.8_react-native-svg@13.10.0 devDependencies: - '@types/react': 18.2.15 + '@types/react': 17.0.43 '@types/react-native': 0.72.2 react-native-builder-bob: 0.21.3 react-native-gesture-handler: 2.12.0 @@ -301,21 +304,21 @@ importers: packages/react-native-alipay: specifiers: - '@types/react': ^18.2.15 + '@types/react': 17.0.43 '@types/react-native': ^0.72.2 devDependencies: - '@types/react': 18.2.15 + '@types/react': 17.0.43 '@types/react-native': 0.72.2 packages/react-native-amap-search: specifiers: - '@types/react': ^18.2.15 + '@types/react': 17.0.43 '@types/react-native': ^0.72.2 pod-install: ^0.1.38 react-native-builder-bob: ^0.21.3 typescript: ^5.1.6 devDependencies: - '@types/react': 18.2.15 + '@types/react': 17.0.43 '@types/react-native': 0.72.2 pod-install: 0.1.38 react-native-builder-bob: 0.21.3 @@ -327,7 +330,7 @@ importers: '@td-design/react-native': workspace:^5.3.0 '@td-design/react-native-picker': workspace:^2.3.2 '@td-design/rn-hooks': workspace:^2.7.2 - '@types/react': ^18.2.15 + '@types/react': 17.0.43 '@types/react-native': ^0.72.2 dayjs: ^1.11.9 react-native-builder-bob: ^0.21.3 @@ -343,7 +346,7 @@ importers: '@td-design/react-native': link:../react-native '@td-design/react-native-picker': link:../react-native-picker '@td-design/rn-hooks': link:../hooks - '@types/react': 18.2.15 + '@types/react': 17.0.43 '@types/react-native': 0.72.2 react-native-builder-bob: 0.21.3 react-native-gesture-handler: 2.12.0 @@ -354,13 +357,13 @@ importers: packages/react-native-echarts: specifiers: - '@types/react': ^18.2.15 + '@types/react': 17.0.43 '@types/react-native': ^0.72.2 react-native-builder-bob: ^0.21.3 react-native-webview: ^13.2.3 typescript: ^5.1.6 devDependencies: - '@types/react': 18.2.15 + '@types/react': 17.0.43 '@types/react-native': 0.72.2 react-native-builder-bob: 0.21.3 react-native-webview: 13.2.3 @@ -371,7 +374,7 @@ importers: '@shopify/restyle': 2.4.2 '@td-design/react-native': workspace:^5.3.0 '@td-design/rn-hooks': workspace:^2.7.2 - '@types/react': ^18.2.15 + '@types/react': 17.0.43 '@types/react-native': 0.72.2 react-native-builder-bob: ^0.21.3 react-native-image-picker: ^5.6.0 @@ -380,7 +383,7 @@ importers: '@shopify/restyle': 2.4.2 '@td-design/react-native': link:../react-native '@td-design/rn-hooks': link:../hooks - '@types/react': 18.2.15 + '@types/react': 17.0.43 '@types/react-native': 0.72.2 react-native-builder-bob: 0.21.3 react-native-image-picker: 5.6.0 @@ -391,7 +394,7 @@ importers: '@shopify/restyle': 2.4.2 '@td-design/react-native': workspace:^5.3.0 '@td-design/rn-hooks': workspace:^2.7.2 - '@types/react': ^18.2.15 + '@types/react': 17.0.43 '@types/react-native': ^0.72.2 react-native-builder-bob: ^0.21.3 typescript: ^5.1.6 @@ -399,7 +402,7 @@ importers: '@shopify/restyle': 2.4.2 '@td-design/react-native': link:../react-native '@td-design/rn-hooks': link:../hooks - '@types/react': 18.2.15 + '@types/react': 17.0.43 '@types/react-native': 0.72.2 react-native-builder-bob: 0.21.3 typescript: 5.1.6 @@ -410,7 +413,7 @@ importers: '@td-design/react-native': workspace:^5.3.0 '@td-design/rn-hooks': workspace:^2.7.2 '@types/lodash-es': ^4.17.8 - '@types/react': ^18.2.15 + '@types/react': 17.0.43 '@types/react-native': ^0.72.2 array-tree-filter: ^2.1.0 dayjs: ^1.11.9 @@ -428,7 +431,7 @@ importers: '@td-design/react-native': link:../react-native '@td-design/rn-hooks': link:../hooks '@types/lodash-es': 4.17.8 - '@types/react': 18.2.15 + '@types/react': 17.0.43 '@types/react-native': 0.72.2 react-native-builder-bob: 0.21.3 typescript: 5.1.6 @@ -438,7 +441,7 @@ importers: '@shopify/restyle': 2.4.2 '@td-design/react-native': workspace:^5.3.0 '@td-design/rn-hooks': workspace:^2.7.2 - '@types/react': ^18.2.15 + '@types/react': 17.0.43 '@types/react-native': ^0.72.2 react-native-builder-bob: ^0.21.3 react-native-gesture-handler: ^2.12.0 @@ -450,7 +453,7 @@ importers: '@shopify/restyle': 2.4.2 '@td-design/react-native': link:../react-native '@td-design/rn-hooks': link:../hooks - '@types/react': 18.2.15 + '@types/react': 17.0.43 '@types/react-native': 0.72.2 react-native-builder-bob: 0.21.3 react-native-gesture-handler: 2.12.0 @@ -463,7 +466,7 @@ importers: specifiers: '@shopify/restyle': 2.4.2 '@td-design/react-native': workspace:^5.3.0 - '@types/react': ^18.2.15 + '@types/react': 17.0.43 '@types/react-native': ^0.72.2 react-native-builder-bob: ^0.21.3 react-native-svg: ^13.10.0 @@ -471,7 +474,7 @@ importers: devDependencies: '@shopify/restyle': 2.4.2 '@td-design/react-native': link:../react-native - '@types/react': 18.2.15 + '@types/react': 17.0.43 '@types/react-native': 0.72.2 react-native-builder-bob: 0.21.3 react-native-svg: 13.10.0 @@ -482,7 +485,7 @@ importers: '@shopify/restyle': 2.4.2 '@td-design/react-native': workspace:^5.3.0 '@td-design/rn-hooks': workspace:^2.7.2 - '@types/react': ^18.2.15 + '@types/react': 17.0.43 '@types/react-native': ^0.72.2 react-native-builder-bob: ^0.21.3 react-native-linear-gradient: ^2.8.0 @@ -492,7 +495,7 @@ importers: '@shopify/restyle': 2.4.2 '@td-design/react-native': link:../react-native '@td-design/rn-hooks': link:../hooks - '@types/react': 18.2.15 + '@types/react': 17.0.43 '@types/react-native': 0.72.2 react-native-builder-bob: 0.21.3 react-native-linear-gradient: 2.8.0 @@ -503,7 +506,7 @@ importers: specifiers: '@td-design/react-native': workspace:^5.3.0 '@td-design/rn-hooks': workspace:^2.7.2 - '@types/react': ^18.2.15 + '@types/react': 17.0.43 '@types/react-native': ^0.72.2 color: ^4.2.3 react-native-builder-bob: ^0.21.3 @@ -515,7 +518,7 @@ importers: devDependencies: '@td-design/react-native': link:../react-native '@td-design/rn-hooks': link:../hooks - '@types/react': 18.2.15 + '@types/react': 17.0.43 '@types/react-native': 0.72.2 react-native-builder-bob: 0.21.3 react-native-pager-view: 6.2.0 @@ -3373,20 +3376,20 @@ packages: /@types/react-dom/16.9.19: resolution: {integrity: sha512-xC8D280Bf6p0zguJ8g62jcEOKZiUbx9sIe6O3tT/lKfR87A7A6g65q13z6D5QUMIa/6yFPkNhqjF5z/VVZEYqQ==} dependencies: - '@types/react': 16.14.43 + '@types/react': 17.0.43 dev: true /@types/react-dom/18.2.7: resolution: {integrity: sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==} dependencies: - '@types/react': 18.2.15 + '@types/react': 17.0.43 dev: true /@types/react-native/0.72.2: resolution: {integrity: sha512-/eEjr04Zqo7mTMszuSdrLx90+j5nWhDMMOgtnKZfAYyV3RwmlpSb7F17ilmMMxZWJY81n/JZ4e6wdhMJFpjrCg==} dependencies: '@react-native/virtualized-lists': 0.72.6 - '@types/react': 18.2.15 + '@types/react': 17.0.43 transitivePeerDependencies: - react-native dev: true @@ -3395,7 +3398,7 @@ packages: resolution: {integrity: sha512-WOSetDV3YPxbkVJAdv/bqExJjmcdCi/vpCJh3NfQOy1X15vHMSiMioXIcGekXDJJYhqGUMDo9e337mh508foAA==} dependencies: '@types/history': 5.0.0 - '@types/react': 18.2.15 + '@types/react': 17.0.43 '@types/react-router': 5.1.20 dev: true @@ -3403,7 +3406,7 @@ packages: resolution: {integrity: sha512-pFFVXUIydHlcJP6wJm7sDii5mD/bCmmAY0wQzq+M+uX7bqS95AQqHZWP1iNMKrWVQSuHIzj5qi9BvrtLX2/T4w==} dependencies: '@types/history': 4.7.11 - '@types/react': 16.14.43 + '@types/react': 17.0.43 '@types/react-router': 5.1.20 dev: true @@ -3411,7 +3414,7 @@ packages: resolution: {integrity: sha512-D5mHD6TbdV/DNHYsnwBTv+y73ei+mMjrkGrla86HthE4/PVvL1J94Bu3qABU+COXzpL23T1EZapVVpwHuBXiUg==} dependencies: '@types/history': 5.0.0 - '@types/react': 18.2.15 + '@types/react': 17.0.43 '@types/react-router': 5.1.12 dev: true @@ -3419,26 +3422,18 @@ packages: resolution: {integrity: sha512-0bhXQwHYfMeJlCh7mGhc0VJTRm0Gk+Z8T00aiP4702mDUuLs9SMhnd2DitpjWFjdOecx2UXtICK14H9iMnziGA==} dependencies: '@types/history': 5.0.0 - '@types/react': 18.2.15 + '@types/react': 17.0.43 dev: true /@types/react-router/5.1.20: resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==} dependencies: '@types/history': 4.7.11 - '@types/react': 18.2.15 - dev: true - - /@types/react/16.14.43: - resolution: {integrity: sha512-7zdjv7jvoLLQg1tTvpQsm+hyNUMT2mPlNV1+d0I8fbGhkJl82spopMyBlu4wb1dviZAxpGdk5eHu/muacknnfw==} - dependencies: - '@types/prop-types': 15.7.5 - '@types/scheduler': 0.16.3 - csstype: 3.1.2 + '@types/react': 17.0.43 dev: true - /@types/react/18.2.15: - resolution: {integrity: sha512-oEjE7TQt1fFTFSbf8kkNuc798ahTUzn3Le67/PWjE8MAfYAD/qB7O8hSTcromLFqHCt9bcdOg5GXMokzTjJ5SA==} + /@types/react/17.0.43: + resolution: {integrity: sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==} dependencies: '@types/prop-types': 15.7.5 '@types/scheduler': 0.16.3 @@ -3769,7 +3764,7 @@ packages: react: 16.x || 17.x react-dom: 16.x || 17.x dependencies: - '@types/react': 16.14.43 + '@types/react': 17.0.43 '@types/react-dom': 16.9.19 '@umijs/runtime': 3.5.41_react@16.14.0 react: 16.14.0 @@ -3782,7 +3777,7 @@ packages: react: 16.x || 17.x react-dom: 16.x || 17.x dependencies: - '@types/react': 16.14.43 + '@types/react': 17.0.43 '@types/react-dom': 16.9.19 '@types/react-router-config': 5.0.7 '@umijs/runtime': 3.5.41_react@16.14.0 @@ -3799,7 +3794,7 @@ packages: react: 16.x || 17.x react-dom: 16.x || 17.x dependencies: - '@types/react': 16.14.43 + '@types/react': 17.0.43 '@types/react-dom': 16.9.19 '@types/react-router-config': 5.0.7 '@umijs/runtime': 3.5.41_react@17.0.2 @@ -3815,7 +3810,7 @@ packages: react: 16.x || 17.x react-dom: 16.x || 17.x dependencies: - '@types/react': 16.14.43 + '@types/react': 17.0.43 '@types/react-dom': 16.9.19 '@types/react-router-config': 5.0.7 '@umijs/runtime': 3.5.41_react@16.14.0 From dc908cf2c920a88f8a50e980a7cd88279467315d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=9D=B0?= Date: Tue, 10 Oct 2023 10:31:21 +0800 Subject: [PATCH 18/32] =?UTF-8?q?perf:=20=E5=AF=B9=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=BA=93=E7=BB=84=E4=BB=B6=E8=BF=9B=E8=A1=8C=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/swift-kids-matter.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/swift-kids-matter.md diff --git a/.changeset/swift-kids-matter.md b/.changeset/swift-kids-matter.md new file mode 100644 index 0000000000..f664970f3d --- /dev/null +++ b/.changeset/swift-kids-matter.md @@ -0,0 +1,5 @@ +--- +'@td-design/react-native': minor +--- + +对组件库组件进行优化 From 375e459b677b776569348fa25fe880ca28896613 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 10 Oct 2023 02:36:23 +0000 Subject: [PATCH 19/32] chore: release --- .changeset/swift-kids-matter.md | 5 ----- packages/react-native-calendar/package.json | 2 +- packages/react-native-image-picker/package.json | 2 +- packages/react-native-password/package.json | 2 +- packages/react-native-picker/package.json | 2 +- packages/react-native-rating/package.json | 2 +- packages/react-native-share/package.json | 2 +- packages/react-native-skeleton/package.json | 2 +- packages/react-native-tabs/package.json | 2 +- packages/react-native/CHANGELOG.md | 6 ++++++ packages/react-native/package.json | 2 +- 11 files changed, 15 insertions(+), 14 deletions(-) delete mode 100644 .changeset/swift-kids-matter.md diff --git a/.changeset/swift-kids-matter.md b/.changeset/swift-kids-matter.md deleted file mode 100644 index f664970f3d..0000000000 --- a/.changeset/swift-kids-matter.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@td-design/react-native': minor ---- - -对组件库组件进行优化 diff --git a/packages/react-native-calendar/package.json b/packages/react-native-calendar/package.json index 3fb7b50f5e..850f21f800 100644 --- a/packages/react-native-calendar/package.json +++ b/packages/react-native-calendar/package.json @@ -29,7 +29,7 @@ }, "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.3.0", + "@td-design/react-native": "workspace:^5.4.0", "@td-design/rn-hooks": "workspace:^2.7.2", "@td-design/react-native-picker": "workspace:^2.3.2", "@types/react": "^18.2.15", diff --git a/packages/react-native-image-picker/package.json b/packages/react-native-image-picker/package.json index 544f35216a..c00a75d707 100644 --- a/packages/react-native-image-picker/package.json +++ b/packages/react-native-image-picker/package.json @@ -22,7 +22,7 @@ }, "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.3.0", + "@td-design/react-native": "workspace:^5.4.0", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "0.72.2", diff --git a/packages/react-native-password/package.json b/packages/react-native-password/package.json index 438664bb1f..5f2ba976da 100644 --- a/packages/react-native-password/package.json +++ b/packages/react-native-password/package.json @@ -26,7 +26,7 @@ "license": "Apache-2.0", "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.3.0", + "@td-design/react-native": "workspace:^5.4.0", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", diff --git a/packages/react-native-picker/package.json b/packages/react-native-picker/package.json index ac7a5d3e21..9468c2d023 100644 --- a/packages/react-native-picker/package.json +++ b/packages/react-native-picker/package.json @@ -30,7 +30,7 @@ }, "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.3.0", + "@td-design/react-native": "workspace:^5.4.0", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/lodash-es": "^4.17.8", "@types/react": "^18.2.15", diff --git a/packages/react-native-rating/package.json b/packages/react-native-rating/package.json index 2c3b004824..ff6d252c3f 100644 --- a/packages/react-native-rating/package.json +++ b/packages/react-native-rating/package.json @@ -28,7 +28,7 @@ "@shopify/restyle": "2.4.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", - "@td-design/react-native": "workspace:^5.3.0", + "@td-design/react-native": "workspace:^5.4.0", "@td-design/rn-hooks": "workspace:^2.7.2", "react-native-builder-bob": "^0.21.3", "react-native-gesture-handler": "^2.12.0", diff --git a/packages/react-native-share/package.json b/packages/react-native-share/package.json index 6713ce728d..c4a54c1eeb 100644 --- a/packages/react-native-share/package.json +++ b/packages/react-native-share/package.json @@ -26,7 +26,7 @@ "license": "Apache-2.0", "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.3.0", + "@td-design/react-native": "workspace:^5.4.0", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", "react-native-builder-bob": "^0.21.3", diff --git a/packages/react-native-skeleton/package.json b/packages/react-native-skeleton/package.json index 0589e25231..2d3aeb2415 100644 --- a/packages/react-native-skeleton/package.json +++ b/packages/react-native-skeleton/package.json @@ -26,7 +26,7 @@ "license": "Apache-2.0", "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.3.0", + "@td-design/react-native": "workspace:^5.4.0", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", diff --git a/packages/react-native-tabs/package.json b/packages/react-native-tabs/package.json index f23d081f5e..d419b9ce69 100644 --- a/packages/react-native-tabs/package.json +++ b/packages/react-native-tabs/package.json @@ -28,7 +28,7 @@ "color": "^4.2.3" }, "devDependencies": { - "@td-design/react-native": "workspace:^5.3.0", + "@td-design/react-native": "workspace:^5.4.0", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", diff --git a/packages/react-native/CHANGELOG.md b/packages/react-native/CHANGELOG.md index 3275c3e8e1..3cdab1010e 100644 --- a/packages/react-native/CHANGELOG.md +++ b/packages/react-native/CHANGELOG.md @@ -1,5 +1,11 @@ # @td-design/react-native +## 5.4.0 + +### Minor Changes + +- [#739](https://github.com/thundersdata-frontend/td-design/pull/739) [`dc908cf2c`](https://github.com/thundersdata-frontend/td-design/commit/dc908cf2c920a88f8a50e980a7cd88279467315d) Thanks [@chj-damon](https://github.com/chj-damon)! - 对组件库组件进行优化 + ## 5.3.0 ### Minor Changes diff --git a/packages/react-native/package.json b/packages/react-native/package.json index e1513ca9a0..c8efe37e8e 100644 --- a/packages/react-native/package.json +++ b/packages/react-native/package.json @@ -1,6 +1,6 @@ { "name": "@td-design/react-native", - "version": "5.3.0", + "version": "5.4.0", "description": "react-native UI组件库", "keywords": [ "restyle", From 47453cb38c0f55d71b8d8f3d6dc12a9ea908096c Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 10 Oct 2023 02:37:51 +0000 Subject: [PATCH 20/32] chore: release --- .changeset/swift-kids-matter.md | 5 ----- packages/react-native-calendar/package.json | 2 +- packages/react-native-image-picker/package.json | 2 +- packages/react-native-password/package.json | 2 +- packages/react-native-picker/package.json | 2 +- packages/react-native-rating/package.json | 2 +- packages/react-native-share/package.json | 2 +- packages/react-native-skeleton/package.json | 2 +- packages/react-native-tabs/package.json | 2 +- packages/react-native/CHANGELOG.md | 6 ++++++ packages/react-native/package.json | 2 +- 11 files changed, 15 insertions(+), 14 deletions(-) delete mode 100644 .changeset/swift-kids-matter.md diff --git a/.changeset/swift-kids-matter.md b/.changeset/swift-kids-matter.md deleted file mode 100644 index f664970f3d..0000000000 --- a/.changeset/swift-kids-matter.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@td-design/react-native': minor ---- - -对组件库组件进行优化 diff --git a/packages/react-native-calendar/package.json b/packages/react-native-calendar/package.json index 3fb7b50f5e..850f21f800 100644 --- a/packages/react-native-calendar/package.json +++ b/packages/react-native-calendar/package.json @@ -29,7 +29,7 @@ }, "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.3.0", + "@td-design/react-native": "workspace:^5.4.0", "@td-design/rn-hooks": "workspace:^2.7.2", "@td-design/react-native-picker": "workspace:^2.3.2", "@types/react": "^18.2.15", diff --git a/packages/react-native-image-picker/package.json b/packages/react-native-image-picker/package.json index 544f35216a..c00a75d707 100644 --- a/packages/react-native-image-picker/package.json +++ b/packages/react-native-image-picker/package.json @@ -22,7 +22,7 @@ }, "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.3.0", + "@td-design/react-native": "workspace:^5.4.0", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "0.72.2", diff --git a/packages/react-native-password/package.json b/packages/react-native-password/package.json index 438664bb1f..5f2ba976da 100644 --- a/packages/react-native-password/package.json +++ b/packages/react-native-password/package.json @@ -26,7 +26,7 @@ "license": "Apache-2.0", "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.3.0", + "@td-design/react-native": "workspace:^5.4.0", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", diff --git a/packages/react-native-picker/package.json b/packages/react-native-picker/package.json index ac7a5d3e21..9468c2d023 100644 --- a/packages/react-native-picker/package.json +++ b/packages/react-native-picker/package.json @@ -30,7 +30,7 @@ }, "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.3.0", + "@td-design/react-native": "workspace:^5.4.0", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/lodash-es": "^4.17.8", "@types/react": "^18.2.15", diff --git a/packages/react-native-rating/package.json b/packages/react-native-rating/package.json index 2c3b004824..ff6d252c3f 100644 --- a/packages/react-native-rating/package.json +++ b/packages/react-native-rating/package.json @@ -28,7 +28,7 @@ "@shopify/restyle": "2.4.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", - "@td-design/react-native": "workspace:^5.3.0", + "@td-design/react-native": "workspace:^5.4.0", "@td-design/rn-hooks": "workspace:^2.7.2", "react-native-builder-bob": "^0.21.3", "react-native-gesture-handler": "^2.12.0", diff --git a/packages/react-native-share/package.json b/packages/react-native-share/package.json index 6713ce728d..c4a54c1eeb 100644 --- a/packages/react-native-share/package.json +++ b/packages/react-native-share/package.json @@ -26,7 +26,7 @@ "license": "Apache-2.0", "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.3.0", + "@td-design/react-native": "workspace:^5.4.0", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", "react-native-builder-bob": "^0.21.3", diff --git a/packages/react-native-skeleton/package.json b/packages/react-native-skeleton/package.json index 0589e25231..2d3aeb2415 100644 --- a/packages/react-native-skeleton/package.json +++ b/packages/react-native-skeleton/package.json @@ -26,7 +26,7 @@ "license": "Apache-2.0", "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.3.0", + "@td-design/react-native": "workspace:^5.4.0", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", diff --git a/packages/react-native-tabs/package.json b/packages/react-native-tabs/package.json index f23d081f5e..d419b9ce69 100644 --- a/packages/react-native-tabs/package.json +++ b/packages/react-native-tabs/package.json @@ -28,7 +28,7 @@ "color": "^4.2.3" }, "devDependencies": { - "@td-design/react-native": "workspace:^5.3.0", + "@td-design/react-native": "workspace:^5.4.0", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", diff --git a/packages/react-native/CHANGELOG.md b/packages/react-native/CHANGELOG.md index 3275c3e8e1..3cdab1010e 100644 --- a/packages/react-native/CHANGELOG.md +++ b/packages/react-native/CHANGELOG.md @@ -1,5 +1,11 @@ # @td-design/react-native +## 5.4.0 + +### Minor Changes + +- [#739](https://github.com/thundersdata-frontend/td-design/pull/739) [`dc908cf2c`](https://github.com/thundersdata-frontend/td-design/commit/dc908cf2c920a88f8a50e980a7cd88279467315d) Thanks [@chj-damon](https://github.com/chj-damon)! - 对组件库组件进行优化 + ## 5.3.0 ### Minor Changes diff --git a/packages/react-native/package.json b/packages/react-native/package.json index e1513ca9a0..c8efe37e8e 100644 --- a/packages/react-native/package.json +++ b/packages/react-native/package.json @@ -1,6 +1,6 @@ { "name": "@td-design/react-native", - "version": "5.3.0", + "version": "5.4.0", "description": "react-native UI组件库", "keywords": [ "restyle", From 12f5d12a5f6e52f9f676cefeae69b6c54e19c68b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=9D=B0?= Date: Thu, 12 Oct 2023 15:57:07 +0800 Subject: [PATCH 21/32] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=A4=9A?= =?UTF-8?q?=E4=B8=AA=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react-native-rating/src/SwipeRating.tsx | 20 +- .../react-native-rating/src/TapRating.tsx | 30 ++- .../react-native-skeleton/src/StaticBone.tsx | 2 + packages/react-native-skeleton/src/index.md | 28 +++ packages/react-native-skeleton/src/index.tsx | 94 ++++---- .../src/AnimatedPagerView.tsx | 62 ------ packages/react-native-tabs/src/SceneView.tsx | 54 ----- packages/react-native-tabs/src/ScrollBar.tsx | 68 +++--- packages/react-native-tabs/src/TabBar.tsx | 209 ++++++++++++------ .../react-native-tabs/src/TabBarIndicator.tsx | 59 ++--- packages/react-native-tabs/src/TabBarItem.tsx | 52 ++--- .../src/createShareModel.tsx | 54 ----- packages/react-native-tabs/src/index.md | 168 ++++---------- packages/react-native-tabs/src/index.tsx | 118 +++++----- packages/react-native-tabs/src/type.ts | 89 -------- .../react-native-tabs/src/usePagerView.ts | 117 +++++----- packages/react-native/src/accordion/index.tsx | 5 +- .../src/notice-bar/AnimatedNotice.tsx | 8 +- .../react-native/src/notice-bar/index.tsx | 7 +- .../src/templates/Icon.tsx.template | 9 +- .../templates/LocalSingleIcon.tsx.template | 9 +- .../src/templates/helper.ts.template | 1 - 22 files changed, 528 insertions(+), 735 deletions(-) delete mode 100644 packages/react-native-tabs/src/AnimatedPagerView.tsx delete mode 100644 packages/react-native-tabs/src/SceneView.tsx delete mode 100644 packages/react-native-tabs/src/createShareModel.tsx delete mode 100644 packages/react-native-tabs/src/type.ts diff --git a/packages/react-native-rating/src/SwipeRating.tsx b/packages/react-native-rating/src/SwipeRating.tsx index bc715339ea..612e8cb3cd 100644 --- a/packages/react-native-rating/src/SwipeRating.tsx +++ b/packages/react-native-rating/src/SwipeRating.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef } from 'react'; +import React, { forwardRef, useMemo } from 'react'; import { StyleSheet } from 'react-native'; import { PanGestureHandler } from 'react-native-gesture-handler'; import Animated from 'react-native-reanimated'; @@ -37,13 +37,15 @@ const SwipeRating = forwardRef( ratingFillColor, }); - const renderRatings = () => { - return Array(count) - .fill('') - .map((_, index) => ( - - )); - }; + const Ratings = useMemo( + () => + Array(count) + .fill('') + .map((_, index) => ( + + )), + [count, ratingBgColor, size, strokeColor] + ); const styles = StyleSheet.create({ content: { flexDirection: 'row', alignItems: 'center', width: count * size }, @@ -56,7 +58,7 @@ const SwipeRating = forwardRef( - {renderRatings()} + {Ratings} diff --git a/packages/react-native-rating/src/TapRating.tsx b/packages/react-native-rating/src/TapRating.tsx index a4ec737842..421949ed52 100644 --- a/packages/react-native-rating/src/TapRating.tsx +++ b/packages/react-native-rating/src/TapRating.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef } from 'react'; +import React, { forwardRef, useMemo } from 'react'; import { StyleSheet } from 'react-native'; import { Flex, helpers, Text, Theme, useTheme } from '@td-design/react-native'; @@ -45,6 +45,22 @@ const TapRating = forwardRef( }, }); + const Ratings = useMemo( + () => + Array(count) + .fill('') + .map((_, index) => ( + = index + 1} + onSelectStarInPosition={handleSelect} + {...{ size, disabled, starStyle, selectedColor, unselectedColor, outRangeScale, activeOpacity }} + /> + )), + [count, disabled, outRangeScale, position, selectedColor, size, starStyle, unselectedColor, activeOpacity] + ); + return ( {showReview && ( @@ -53,17 +69,7 @@ const TapRating = forwardRef( )} - {Array(count) - .fill('') - .map((_, index) => ( - = index + 1} - onSelectStarInPosition={handleSelect} - {...{ size, disabled, starStyle, selectedColor, unselectedColor, outRangeScale, activeOpacity }} - /> - ))} + {Ratings} ); diff --git a/packages/react-native-skeleton/src/StaticBone.tsx b/packages/react-native-skeleton/src/StaticBone.tsx index db9f1fe467..93b8748319 100644 --- a/packages/react-native-skeleton/src/StaticBone.tsx +++ b/packages/react-native-skeleton/src/StaticBone.tsx @@ -12,6 +12,8 @@ export const StaticBone: FC = ({ boneStyle, animationType, bone backgroundColor: interpolateColor(animation.value, [0, 1], [boneColor!, highlightColor!]), }; }); + const styles = animationType === 'none' ? animatedStyle : [boneStyle, animatedStyle]; + return ; }; diff --git a/packages/react-native-skeleton/src/index.md b/packages/react-native-skeleton/src/index.md index 2d35d631b7..e914be1a4b 100644 --- a/packages/react-native-skeleton/src/index.md +++ b/packages/react-native-skeleton/src/index.md @@ -116,3 +116,31 @@ export type AnimationDirection = | undefined; ``` + +_关于`styles`属性的说明：_ + +- `styles`属性是一个数组，数组的每一项是一个`ViewStyle`对象，用于描述骨架屏的样式，数组的每一项对应骨架屏的一行，数组的长度决定了骨架屏的行数。 +- `styles`的样式最好跟里面元素的样式保持一致或者近似，否则会出现骨架效果跟实际效果不一致的情况。比如： + +```tsx + + + hello world + + + hello world + +; + +const styles = StyleSheet.create({ + box1: { + width: 200, + height: 50, + }, + box2: { + width: 300, + height: 120, + marginTop: 20, + }, +}); +``` diff --git a/packages/react-native-skeleton/src/index.tsx b/packages/react-native-skeleton/src/index.tsx index 643ecc4cee..fc953697b5 100644 --- a/packages/react-native-skeleton/src/index.tsx +++ b/packages/react-native-skeleton/src/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, ReactNode, useCallback } from 'react'; +import React, { FC, useEffect, useMemo } from 'react'; import { ReactElement } from 'react'; import { LayoutChangeEvent, ViewStyle } from 'react-native'; import Animated, { Easing, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated'; @@ -8,9 +8,37 @@ import { useSafeState } from '@td-design/rn-hooks'; import { calc } from './helper'; import { ShiverBone } from './ShiverBone'; import { StaticBone } from './StaticBone'; -import { SkeletonProps } from './type'; +import { AnimationType, SkeletonProps } from './type'; const DEFAULT_BORDER_RADIUS = 4; + +const getBoneStyles = ( + style: ViewStyle, + size: { width: number; height: number }, + animationType: AnimationType, + boneColor: string +) => { + const boneWidth = + (typeof style.width === 'string' && style.width.includes('%') ? calc(size.width, style.width) : style.width) ?? 0; + + const boneHeight = + (typeof style.height === 'string' && style.height.includes('%') ? calc(size.height, style.height) : style.height) ?? + 0; + + const boneStyle = { + width: boneWidth, + height: boneHeight, + borderRadius: style.borderRadius || DEFAULT_BORDER_RADIUS, + ...style, + }; + + if (animationType !== 'pulse') { + boneStyle.overflow = 'hidden'; + boneStyle.backgroundColor = style.backgroundColor || boneColor; + } + return boneStyle; +}; + const Skeleton: FC = ({ containerStyle, easing = Easing.bezierFn(0.5, 0, 0.25, 1), @@ -24,63 +52,45 @@ const Skeleton: FC = ({ children, }) => { const [size, setSize] = useSafeState({ width: 0, height: 0 }); - const loadingValue = useSharedValue(+loading); const animationValue = useSharedValue(0); - const shiverValue = useSharedValue(animationType === 'shiver' ? 1 : 0); - const onLayout = useCallback((e: LayoutChangeEvent) => { + const onLayout = (e: LayoutChangeEvent) => { const { width, height } = e.nativeEvent.layout; setSize({ width, height }); - }, []); + }; - if (loadingValue.value === 1) { - if (shiverValue.value === 1) { - animationValue.value = withRepeat(withTiming(1, { duration, easing }), -1, false); - } else { - animationValue.value = withRepeat(withTiming(1, { duration: duration / 2, easing }), -1, true); - } - } + useEffect(() => { + // 重置动画 + animationValue.value = 0; - const getBoneStyles = (style: ViewStyle) => { - const { backgroundColor, borderRadius } = style; - const boneWidth = - (typeof style.width === 'string' && style.width.includes('%') ? calc(size.width, style.width) : style.width) ?? 0; - const boneHeight = - (typeof style.height === 'string' && style.height.includes('%') - ? calc(size.height, style.height) - : style.height) ?? 0; - - const boneStyle = { - width: boneWidth, - height: boneHeight, - borderRadius: borderRadius || DEFAULT_BORDER_RADIUS, - ...style, - }; - if (animationType !== 'pulse') { - boneStyle.overflow = 'hidden'; - boneStyle.backgroundColor = backgroundColor || boneColor; + if (loading) { + if (animationType === 'shiver') { + animationValue.value = withRepeat(withTiming(1, { duration, easing }), -1, false); + } else { + animationValue.value = withRepeat(withTiming(1, { duration: duration / 2, easing }), -1, true); + } } - return boneStyle; - }; + }, [loading, animationType]); - const getBones = (styles: ViewStyle[] = [], children: ReactNode, prefix = ''): ReactNode => { + const Bones = useMemo(() => { if (styles.length > 0) { return styles.map((style, i) => { - const boneStyle = getBoneStyles(style); - const _prefix = prefix ? `${prefix}_${i}` : `${i}`; + const boneStyle = getBoneStyles(style, size, animationType, boneColor); + if (animationType === 'pulse' || animationType === 'none') { return ( ); } + return ( = ({ ); }); } + return React.Children.map(children, (child, i) => { const style = (child as ReactElement).props.style || {}; - const boneStyle = getBoneStyles(style); + const boneStyle = getBoneStyles(style, size, animationType, boneColor); + if (animationType === 'pulse' || animationType === 'none') { return ( = ({ /> ); }); - }; + }, [styles, size, animationType, animationDirection, boneColor, highlightColor, animationValue]); return ( - {loading ? getBones(styles, children) : children} + {loading ? Bones : children} ); }; diff --git a/packages/react-native-tabs/src/AnimatedPagerView.tsx b/packages/react-native-tabs/src/AnimatedPagerView.tsx deleted file mode 100644 index 013dd49ada..0000000000 --- a/packages/react-native-tabs/src/AnimatedPagerView.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React, { DependencyList, forwardRef, PropsWithChildren } from 'react'; -import PagerView from 'react-native-pager-view'; -import Animated, { runOnJS, useEvent, useHandler } from 'react-native-reanimated'; - -import { AnimatedPagerViewProps } from './type'; -import usePagerView from './usePagerView'; - -const AnimatedPagerView = Animated.createAnimatedComponent(PagerView); - -// eslint-disable-next-line @typescript-eslint/no-explicit-any -type Obj = Record; - -export function usePagerScrollHandler( - handlers: Record void>, - dependencies?: DependencyList -) { - const { context, doDependenciesDiffer } = useHandler(handlers, dependencies); - const subscribeForEvents = ['onPageScroll']; - - return useEvent( - event => { - 'worklet'; - const { onPageScroll } = handlers; - if (onPageScroll && event.eventName.endsWith('onPageScroll')) { - onPageScroll(event, context); - } - }, - subscribeForEvents, - doDependenciesDiffer - ); -} - -export default forwardRef>( - ({ scrollEnabled, overdrag, keyboardDismissMode, children, onPageSelected }, ref) => { - const { onPageScroll: _onPageScroll, page, onPageScrollStateChanged } = usePagerView.useModel(); - - const handler = usePagerScrollHandler({ - onPageScroll: (e: { offset: number; position: number }) => { - 'worklet'; - runOnJS(_onPageScroll)(e); - }, - }); - - return ( - - {children} - - ); - } -); diff --git a/packages/react-native-tabs/src/SceneView.tsx b/packages/react-native-tabs/src/SceneView.tsx deleted file mode 100644 index dfd76ddfc1..0000000000 --- a/packages/react-native-tabs/src/SceneView.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React, { useEffect } from 'react'; -import { StyleSheet } from 'react-native'; - -import { Box } from '@td-design/react-native'; -import { useSafeState } from '@td-design/rn-hooks'; - -import { SceneViewProps } from './type'; -import usePagerView from './usePagerView'; - -export default function SceneView({ index, lazy, layout, children }: SceneViewProps) { - const { addEnterListener, page } = usePagerView.useModel(); - - const [isLoading, setLoading] = useSafeState(Math.abs(page - index) > 0); - const focused = page === index; - - // Always render the route when it becomes focused - if (isLoading && Math.abs(page - index) <= 0) { - setLoading(false); - } - - useEffect(() => { - const handleEnter = (value: number) => { - if (value === index) { - setLoading(prev => !prev); - } - }; - - let unsubscribe: (() => void) | undefined; - let timer: ReturnType; - - if (lazy && isLoading) { - unsubscribe = addEnterListener(handleEnter); - } else if (isLoading) { - timer = setTimeout(() => { - setLoading(false); - }, 0); - } - - return () => { - unsubscribe?.(); - clearTimeout(timer); - }; - }, []); - - return ( - - {focused || layout.width ? children({ loading: isLoading }) : null} - - ); -} diff --git a/packages/react-native-tabs/src/ScrollBar.tsx b/packages/react-native-tabs/src/ScrollBar.tsx index 2872ad83bc..f3c723c031 100644 --- a/packages/react-native-tabs/src/ScrollBar.tsx +++ b/packages/react-native-tabs/src/ScrollBar.tsx @@ -1,7 +1,7 @@ -import React, { PropsWithChildren, ReactElement, useEffect, useRef } from 'react'; -import { LayoutChangeEvent, LayoutRectangle, ScrollView } from 'react-native'; +import React, { PropsWithChildren, useEffect, useRef } from 'react'; +import { LayoutChangeEvent, LayoutRectangle, ScrollView, StyleSheet } from 'react-native'; -import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks'; +import { useSafeState } from '@td-design/rn-hooks'; interface ScrollBarProps { height: number; @@ -9,52 +9,64 @@ interface ScrollBarProps { } export default function ScrollBar({ height, page, children }: PropsWithChildren) { - const scrollRef = useRef(null); - - // 记录 Tab 布局数据 const [tabLayouts, setTabLayouts] = useSafeState([]); - const onTabsLayout = useMemoizedFn((layouts: LayoutRectangle[]) => { + + // 保存每个Tab的布局 + const handleTabLayout = (layouts: LayoutRectangle[]) => { setTabLayouts(layouts); - }); + }; - // 记录 ScrollView 的内容宽度 + // 保存ScrollView的宽度 const [contentWidth, setContentWidth] = useSafeState(0); - const onContentSizeChange = useMemoizedFn((w: number) => { - setContentWidth(w); - }); + const handleContentChange = (width: number) => { + setContentWidth(width); + }; - // 记录 ScrollBar 的宽度 + // 保存滚动条的宽度 const [scrollBarWidth, setScrollBarWidth] = useSafeState(0); - const onLayout = useMemoizedFn((e: LayoutChangeEvent) => { + const handleScrollBarLayout = (e: LayoutChangeEvent) => { setScrollBarWidth(e.nativeEvent.layout.width); - }); + }; + + const scrollViewRef = useRef(null); useEffect(() => { if (tabLayouts.length - 1 < page || contentWidth === 0 || scrollBarWidth === 0) return; - // 获得选中的 Tab 布局数据 + // 当前选中的Tab的布局 const tabLayout = tabLayouts[page]; - // 计算 Tab 中心到 ScrollBar 中心的 x 轴距离 - const dx = tabLayout.x + tabLayout.width / 2 - scrollBarWidth / 2; - // 计算出 ScrollView 的最大可滚动距离，ScrollView 的可滚动范围是 [0, maxScrollX] + + // 当前选中的Tab的中心点 + const tabCenter = tabLayout.x + tabLayout.width / 2 - scrollBarWidth / 2; + + // 计算ScrollView的最大可滚动距离[0, maxScrollX] const maxScrollX = contentWidth - scrollBarWidth; - // 计算出 ScrollView 应该滚动到的 x 坐标，它必须大于等于 0 并且小于等于 maxScrollX - const x = Math.min(Math.max(0, dx), maxScrollX); - scrollRef.current?.scrollTo({ x }); + + // 计算ScrollView应该滚动的x坐标位置，它必须在[0, maxScrollX]之间 + const scrollX = Math.min(Math.max(0, tabCenter), maxScrollX); + + // 滚动ScrollView + scrollViewRef.current?.scrollTo({ x: scrollX, animated: true }); }, [page, tabLayouts, contentWidth, scrollBarWidth]); return ( - {React.cloneElement(children as ReactElement, { onTabsLayout, height })} + {React.cloneElement(children as React.ReactElement, { onTabsLayout: handleTabLayout })} ); } + +const styles = StyleSheet.create({ + scrollbar: { + flexGrow: 0, + }, +}); diff --git a/packages/react-native-tabs/src/TabBar.tsx b/packages/react-native-tabs/src/TabBar.tsx index d7065f31b3..58ee8a6dfc 100644 --- a/packages/react-native-tabs/src/TabBar.tsx +++ b/packages/react-native-tabs/src/TabBar.tsx @@ -1,123 +1,188 @@ -import React, { useMemo, useRef } from 'react'; -import { LayoutRectangle } from 'react-native'; -import { Extrapolate, interpolate, useAnimatedStyle } from 'react-native-reanimated'; +import React, { useEffect, useMemo, useRef } from 'react'; +import { + Animated, + LayoutChangeEvent, + LayoutRectangle, + Platform, + StyleProp, + StyleSheet, + TextStyle, + ViewStyle, +} from 'react-native'; -import { Flex, helpers, Theme, useTheme } from '@td-design/react-native'; +import { Flex, helpers } from '@td-design/react-native'; import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks'; import TabBarIndicator from './TabBarIndicator'; import TabBarItem from './TabBarItem'; -import { TabBarProps } from './type'; -const { px, ONE_PIXEL } = helpers; +const { ONE_PIXEL, deviceWidth } = helpers; + +export interface TabBarProps { + tabs: string[]; + height?: number; + onTabPress: (index: number) => void; + onTabsLayout?: (layouts: LayoutRectangle[]) => void; + page: number; + position: Animated.Value; + offset: Animated.Value; + isIdle: boolean; + showIndicator?: boolean; + scrollState: 'idle' | 'dragging' | 'settling'; + tabStyle?: StyleProp; + tabItemStyle?: StyleProp; + labelStyle?: StyleProp; + indicatorStyle?: StyleProp; +} export default function TabBar({ tabs, - page, - height, onTabPress, onTabsLayout, - showIndicator, - scrollX, + height, + position, + offset, + page, isIdle, + scrollState, + showIndicator = true, tabStyle, tabItemStyle, labelStyle, indicatorStyle, }: TabBarProps) { - const theme = useTheme(); - - // 给indicatorStyle赋初始值 - indicatorStyle = useMemo( - () => ({ - height: px(4), - borderRadius: px(2), - color: theme.colors.primary200, - ...indicatorStyle, - }), - [indicatorStyle, theme.colors.primary200] - ); + const layouts = useRef([]); + const indicatorWidth = getIndicatorWidth(indicatorStyle); - const layouts = useRef([]).current; - const inputRange = useMemo(() => tabs.map((_, index) => index), [tabs]); + const inputRange = useMemo(() => tabs.map((_, i) => i), [tabs]); + const [outputRange, setOutputRange] = useSafeState(inputRange.map(() => 0)); - const [tabWidths, setTabWidths] = useSafeState(inputRange.map(() => 0)); - const [scrollRange, setScrollRange] = useSafeState(inputRange.map(() => 0)); + const offsetPosition = Animated.add(position, offset); - // 保存每个 Tab 的布局信息 - const handleTabLayout = useMemoizedFn((index: number, layout: LayoutRectangle) => { - layouts[index] = layout; + const scrollX = offsetPosition.interpolate({ + inputRange, + outputRange, + extrapolate: 'clamp', + }); - const length = layouts.filter(layout => layout.width > 0).length; + const lastPage = useLastPage(page, isIdle); + const interactive = useInteractive(scrollState); + + const handleTabPress = useMemoizedFn((index: number) => { + if (isIdle) { + onTabPress(index); + } + }); + + const handleTabLayout = useMemoizedFn((e: LayoutChangeEvent, index: number) => { + layouts.current[index] = e.nativeEvent.layout; + + const length = layouts.current.filter(layout => layout.width > 0).length; if (length !== tabs.length) return; - const widths: number[] = []; const range: number[] = []; for (let index = 0; index < length; index++) { - const { x, width } = layouts[index]; - // 我们希望指示器和所选 Tab 垂直居中对齐 - // 那么指示器的 x 轴偏移量就是 Tab 的 center.x - 指示器的 center.x - const tabCenterX = x + width / 2; - const indicatorCenterX = width / 2; - range.push(tabCenterX - indicatorCenterX); - widths.push(width); - } - setTabWidths(widths); - setScrollRange(range); - onTabsLayout?.(layouts); - }); + const layout = layouts.current[index]; - const handleTabPress = useMemoizedFn((index: number) => { - if (isIdle) { - onTabPress?.(index); + // 指示器要和当前Tab垂直居中对齐 + const tabCenterX = layout.x + layout.width / 2; + const indicatorX = tabCenterX - indicatorWidth / 2; + range.push(indicatorX); } + + setOutputRange(range); + onTabsLayout?.(layouts.current); }); return ( a + b, 0)} + minWidth={deviceWidth} height={height} - flex={1} justifyContent={'space-evenly'} - alignItems="center" + alignItems={'center'} backgroundColor={'white'} - borderBottomWidth={ONE_PIXEL} borderBottomColor={'border'} + borderBottomWidth={ONE_PIXEL} style={tabStyle} > {tabs.map((tab, index) => { - const enhanced = index === page; - const inputRange = [index - 1, index, index + 1]; + const enhanced = interactive || index === page || index === lastPage; - const animatedStyles = useAnimatedStyle(() => { - const scale = interpolate(scrollX.value, inputRange, [1, enhanced ? 1.2 : 1, 1], Extrapolate.CLAMP); - const opacity = interpolate(scrollX.value, inputRange, [0.8, enhanced ? 1 : 0.8, 0.8], Extrapolate.CLAMP); + let scale = offsetPosition.interpolate({ + inputRange: [index - 1, index, index + 1], + outputRange: [1, enhanced ? 1.2 : 1, 1], + extrapolate: 'clamp', + }); - return { - opacity, - transform: [{ scale }], - }; + let opacity = offsetPosition.interpolate({ + inputRange: [index - 1, index, index + 1], + outputRange: [0.8, enhanced ? 1 : 0.8, 0.8], + extrapolate: 'clamp', }); + + if (Platform.OS === 'ios' && Math.abs(page - lastPage) > 1 && index === lastPage) { + scale = offsetPosition.interpolate({ + inputRange: [page - 1, page, page + 1], + outputRange: [1.2, 1, 1.2], + extrapolate: 'clamp', + }); + + opacity = offsetPosition.interpolate({ + inputRange: [page - 1, page, page + 1], + outputRange: [1, 0.8, 1], + extrapolate: 'clamp', + }); + } + return ( handleTabPress(index)} - onLayout={event => handleTabLayout(index, event.nativeEvent.layout)} - style={[tabItemStyle, animatedStyles]} - labelStyle={[labelStyle]} + onLayout={e => handleTabLayout(e, index)} + style={tabItemStyle} + labelStyle={[labelStyle, { opacity, transform: [{ scale }] }]} /> ); })} - {showIndicator && ( - - )} + {showIndicator && } ); } + +const useLastPage = (page: number, isIdle: boolean) => { + const lastPage = useRef(0); + + useEffect(() => { + if (isIdle) { + lastPage.current = page; + } + }, [page, isIdle]); + + return lastPage.current; +}; + +const useInteractive = (scrollState: 'idle' | 'dragging' | 'settling') => { + const interactive = useRef(false); + const scrollStateRef = useRef(scrollState); + + useEffect(() => { + scrollStateRef.current = scrollState; + }, [scrollState]); + + if (scrollState === 'dragging') { + interactive.current = true; + } else if (scrollState === 'idle' && (Platform.OS === 'android' || scrollStateRef.current === 'settling')) { + interactive.current = false; + } + + return interactive.current; +}; + +function getIndicatorWidth(style?: StyleProp) { + const flattenedStyle = StyleSheet.flatten([{ width: 24 }, style]); + if (typeof flattenedStyle.width === 'number') { + return flattenedStyle.width; + } + return 24; +} diff --git a/packages/react-native-tabs/src/TabBarIndicator.tsx b/packages/react-native-tabs/src/TabBarIndicator.tsx index 513d6bf89f..05153da501 100644 --- a/packages/react-native-tabs/src/TabBarIndicator.tsx +++ b/packages/react-native-tabs/src/TabBarIndicator.tsx @@ -1,31 +1,38 @@ -import React from 'react'; -import { StyleSheet } from 'react-native'; -import Animated, { Extrapolate, interpolate, useAnimatedStyle } from 'react-native-reanimated'; +import React, { memo } from 'react'; +import { Animated, StyleProp, StyleSheet, ViewStyle } from 'react-native'; -import { TabBarIndicatorProps } from './type'; +import { Theme, useTheme } from '@td-design/react-native'; -export default function TabBarIndicator({ style, scrollX, inputRange, scrollRange, tabWidths }: TabBarIndicatorProps) { - const styles = StyleSheet.create({ - indicator: { - position: 'absolute', - left: 0, - bottom: 0, - width: 36, - height: style.height, - borderRadius: style.borderRadius, - backgroundColor: style.color, - }, - }); +function TabBarIndicator({ + style, + scrollX, +}: { + style: StyleProp; + scrollX: Animated.AnimatedInterpolation; +}) { + const theme = useTheme(); - const animatedStyles = useAnimatedStyle(() => { - const translateX = interpolate(scrollX.value, inputRange, scrollRange, Extrapolate.CLAMP); - const width = interpolate(scrollX.value, inputRange, tabWidths, Extrapolate.CLAMP); + return ( + + ); +} - return { - width, - transform: [{ translateX }], - }; - }); +export default memo(TabBarIndicator); - return ; -} +const styles = StyleSheet.create({ + indicator: { + position: 'absolute', + left: 0, + bottom: 0, + height: 4, + borderRadius: 2, + }, +}); diff --git a/packages/react-native-tabs/src/TabBarItem.tsx b/packages/react-native-tabs/src/TabBarItem.tsx index ee50166952..73835a2eea 100644 --- a/packages/react-native-tabs/src/TabBarItem.tsx +++ b/packages/react-native-tabs/src/TabBarItem.tsx @@ -1,37 +1,39 @@ -import React from 'react'; -import { Pressable } from 'react-native'; -import Animated from 'react-native-reanimated'; +import React, { memo } from 'react'; +import { Animated, Pressable, StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native'; import { helpers, Theme, useTheme } from '@td-design/react-native'; -import { TabBarItemProps } from './type'; - -const AnimatedPressable = Animated.createAnimatedComponent(Pressable); +interface TabBarItemProps { + title: string; + onPress?: () => void; + onLayout: ViewProps['onLayout']; + style?: StyleProp; + labelStyle?: Animated.WithAnimatedObject | Animated.WithAnimatedArray>; +} -export default function TabBarItem({ title, style, labelStyle, onPress, onLayout }: TabBarItemProps) { +const TabBarItem = ({ style, labelStyle, title, onLayout, onPress }: TabBarItemProps) => { const theme = useTheme(); - const renderText = () => { - if (typeof title === 'string') - return ( - - {title} - - ); - - return title(); - }; - return ( - - {renderText()} - + + {title} + + ); -} +}; + +export default memo(TabBarItem); diff --git a/packages/react-native-tabs/src/createShareModel.tsx b/packages/react-native-tabs/src/createShareModel.tsx deleted file mode 100644 index 068be3ca29..0000000000 --- a/packages/react-native-tabs/src/createShareModel.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React, { createContext, PropsWithChildren, ReactNode, useContext, useMemo } from 'react'; - -const EMPTY = Symbol('EMPTY'); - -type UseHook = ((props: Props) => Value) | (() => Value); -type ConsumerProps = { - children: (value: Value) => ReactNode; -}; - -/** - * 创建局部共享数据 - * @param useHook 自定义hooks - * @returns - */ -// eslint-disable-next-line @typescript-eslint/no-explicit-any -export function createShareModel(useHook: UseHook) { - const Context = createContext(EMPTY); - const hookName = useHook.name || 'useHook'; - Context.displayName = `${hookName}Context`; - - const ShareModelProvider = ({ initialState, children }: PropsWithChildren<{ initialState: Props }>) => { - const value = useHook(initialState); - - // eslint-disable-next-line react-hooks/exhaustive-deps - return useMemo(() => {children}, [value]); - }; - - const useShareModel = () => { - const value = useContext(Context); - if (value === EMPTY) { - throw new Error('Component must be wrapped within Provider'); - } - return value; - }; - - const ShareModelConsumer = (props: ConsumerProps) => { - return ( - - {value => { - if (value === EMPTY) { - throw new Error('Component must be wrapped with '); - } - return props.children(value); - }} - - ); - }; - - return { - Provider: ShareModelProvider, - Consumer: ShareModelConsumer, - useModel: useShareModel, - }; -} diff --git a/packages/react-native-tabs/src/index.md b/packages/react-native-tabs/src/index.md index 987ee63994..78109419fb 100644 --- a/packages/react-native-tabs/src/index.md +++ b/packages/react-native-tabs/src/index.md @@ -22,9 +22,9 @@ yarn add react-native-pager-view @td-design/react-native-tabs ```tsx | pure const routes = [ - { key: 'first', title: 'First', component: }, - { key: 'second', title: 'Second', component: }, - { key: 'third', title: 'Third', component: }, + { title: 'First', component: }, + { title: 'Second', component: }, + { title: 'Third', component: }, ]; return ( @@ -46,9 +46,9 @@ return ( ```tsx | pure const routes = [ - { key: 'first', title: 'First', component: }, - { key: 'second', title: 'Second', component: }, - { key: 'third', title: 'Third', component: }, + { title: 'First', component: }, + { title: 'Second', component: }, + { title: 'Third', component: }, ]; return ( @@ -66,37 +66,13 @@ return ( /> -### 3. 自定义选项卡文本 +### 3. 自定义选项卡文本样式 ```tsx | pure const routes = [ - { key: 'first', title: () => First, component: }, - { key: 'second', title: () => Second, component: }, - { key: 'third', title: () => Third, component: }, -]; - -return ( - - - -); -``` - -
- -
- -### 4. 自定义选项卡文本样式 - -```tsx | pure -const routes = [ - { key: 'first', title: 'First', component: }, - { key: 'second', title: 'Second', component: }, - { key: 'third', title: 'Third', component: }, + { title: 'First', component: }, + { title: 'Second', component: }, + { title: 'Third', component: }, ]; return ( @@ -114,13 +90,13 @@ return ( /> -### 5. 自定义指示器样式 +### 4. 自定义指示器样式 ```tsx | pure const routes = [ - { key: 'first', title: 'First', component: }, - { key: 'second', title: 'Second', component: }, - { key: 'third', title: 'Third', component: }, + { title: 'First', component: }, + { title: 'Second', component: }, + { title: 'Third', component: }, ]; return ( @@ -138,13 +114,13 @@ return ( /> -### 6. 隐藏指示器 +### 5. 隐藏指示器 ```tsx | pure const routes = [ - { key: 'first', title: 'First', component: }, - { key: 'second', title: 'Second', component: }, - { key: 'third', title: 'Third', component: }, + { title: 'First', component: }, + { title: 'Second', component: }, + { title: 'Third', component: }, ]; return ( @@ -162,17 +138,17 @@ return ( /> -### 7. 很多个选项卡 +### 6. 很多个选项卡 ```tsx | pure const routes = [ - { key: 'first', title: 'First', component: }, - { key: 'second', title: 'Second', component: }, - { key: 'third', title: 'Third', component: }, - { key: 'forth', title: 'Forth', component: }, - { key: 'fifth', title: 'Fifth', component: }, - { key: 'sixth', title: 'Sixth', component: }, - { key: 'seventh', title: 'Seventh', component: }, + { title: 'First', component: }, + { title: 'Second', component: }, + { title: 'Third', component: }, + { title: 'Forth', component: }, + { title: 'Fifth', component: }, + { title: 'Sixth', component: }, + { title: 'Seventh', component: }, ]; return ( @@ -182,61 +158,13 @@ return ( ); ``` -### 8. 懒加载 - -```tsx | pure -const routes = [ - { key: 'first', title: 'First', component: }, - { key: 'second', title: 'Second', component: }, - { key: 'third', title: 'Third', component: }, -]; - -return ( - - - -); -``` - -
- -
- -### 9. 懒加载 + 自定义占位组件 +### 7. 默认切换到第二个选项卡 ```tsx | pure const routes = [ - { key: 'first', title: 'First', component: }, - { key: 'second', title: 'Second', component: }, - { key: 'third', title: 'Third', component: }, -]; - -return ( - - } /> - -); -``` - -
- -
- -### 10. 默认切换到第二个选项卡 - -```tsx | pure -const routes = [ - { key: 'first', title: 'First', component: }, - { key: 'second', title: 'Second', component: }, - { key: 'third', title: 'Third', component: }, + { title: 'First', component: }, + { title: 'Second', component: }, + { title: 'Third', component: }, ]; return ( @@ -256,33 +184,23 @@ return ( ## API -| 属性 | 必填 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | --- | -| scenes | `true` | 选项卡面板配置 | `TabScene[]` | | -| onChange | `false` | 选择某个选项卡标签 | `(key: string) => void` | | -| initialPage | `false` | 默认切换到第几个选项卡 | `number` | `0` | -| height | `false` | 选项卡高度 | `boolean` | `48` | -| scrollEnabled | `false` | 启用手势控制左右滑动 | `boolean` | `true` | -| overdrag | `false` | 到第一页或者最后一页之后还是否允许继续拖动 | `boolean` | `true` | -| keyboardDismissMode | `false` | 关闭键盘模式 | `none` \| `on-drag` | `on-drag` | -| showIndicator | `false` | 是否显示指示器 | `boolean` | `true` | -| lazy | `false` | 是否懒加载其他页面 | `boolean` | `false` | -| renderLazyPlaceholder | `false` | 懒加载时的占位提示组件 | `() => ReactNode` | `() => null` | -| tabStyle | `false` | 选项卡样式 | `ViewStyle` | | -| tabItemStyle | `false` | 选项卡标签样式 | `ViewStyle` | | -| labelStyle | `false` | 标签文字样式 | `TextStyle` | | -| indicatorStyle | `false` | 指示器样式 | `IndicatorStyle` | | +| 属性 | 必填 | 说明 | 类型 | 默认值 | +| ------------------- | ------- | ------------------------------------------ | ------------------- | --------- | +| scenes | `true` | 选项卡面板配置 | `TabScene[]` | | +| initialPage | `false` | 默认切换到第几个选项卡 | `number` | `0` | +| height | `false` | 选项卡高度 | `boolean` | `48` | +| scrollEnabled | `false` | 启用手势控制左右滑动 | `boolean` | `true` | +| overdrag | `false` | 到第一页或者最后一页之后还是否允许继续拖动 | `boolean` | `true` | +| keyboardDismissMode | `false` | 关闭键盘模式 | `none` \| `on-drag` | `on-drag` | +| showIndicator | `false` | 是否显示指示器 | `boolean` | `true` | +| tabStyle | `false` | 选项卡样式 | `ViewStyle` | | +| tabItemStyle | `false` | 选项卡标签样式 | `ViewStyle` | | +| labelStyle | `false` | 标签文字样式 | `TextStyle` | | +| indicatorStyle | `false` | 指示器样式 | `ViewStyle` | | ```ts interface TabScene { - key: string; title: ReactNode; component: JSX.Element; } - -interface IndicatorStyle { - height?: number; - borderRadius?: number; - color?: string; -} ``` diff --git a/packages/react-native-tabs/src/index.tsx b/packages/react-native-tabs/src/index.tsx index e543519fe8..e9c73217f0 100644 --- a/packages/react-native-tabs/src/index.tsx +++ b/packages/react-native-tabs/src/index.tsx @@ -1,93 +1,103 @@ -import React from 'react'; -import { LayoutChangeEvent } from 'react-native'; -import { PagerViewOnPageSelectedEvent } from 'react-native-pager-view'; +import React, { cloneElement } from 'react'; +import { Animated, StyleProp, TextStyle, ViewStyle } from 'react-native'; +import PagerView from 'react-native-pager-view'; import { Box, helpers } from '@td-design/react-native'; -import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks'; -import AnimatedPagerView from './AnimatedPagerView'; -import SceneView from './SceneView'; import ScrollBar from './ScrollBar'; import TabBar from './TabBar'; -import { TabsProps } from './type'; import usePagerView from './usePagerView'; const { px } = helpers; +const AnimatedPagerView = Animated.createAnimatedComponent(PagerView); -export default function ({ initialPage = 0, ...props }: TabsProps) { - const [layout, setLayout] = useSafeState({ width: 0, height: 0 }); +type Tab = { + title: string; + component: JSX.Element; +}; - const handleLayout = useMemoizedFn((e: LayoutChangeEvent) => { - const { width, height } = e.nativeEvent.layout; - if (layout.height !== height || layout.width !== width) { - setLayout({ width, height }); - } - }); - - return ( - - - - - - ); +export interface TabsProps { + scenes: Tab[]; + initialPage?: number; + /** 标签栏的高度。 默认为48 */ + height?: number; + /** 是否支持手势滚动。 */ + scrollEnabled?: boolean; + /** 是否显示指示器。 默认为true */ + showIndicator?: boolean; + /** 到第一页或者最后一页之后还是否允许继续拖动。 默认为true */ + overdrag?: boolean; + /** 键盘关闭模式。 默认为滚动时关闭 */ + keyboardDismissMode?: 'none' | 'on-drag'; + tabStyle?: StyleProp; + tabItemStyle?: StyleProp; + labelStyle?: StyleProp; + indicatorStyle?: StyleProp; } -function TabView({ - scenes, - onChange, +export default function Tabs({ + initialPage = 0, + scenes = [], + height = px(48), + showIndicator = true, scrollEnabled = true, overdrag = true, keyboardDismissMode = 'on-drag', - height = px(48), - showIndicator = true, - lazy = false, - layout, - renderLazyPlaceholder = () => null, tabStyle, tabItemStyle, labelStyle, indicatorStyle, }: TabsProps) { - const { pagerRef, setPage, page, scrollX, isIdle, onPageSelected } = usePagerView.useModel(); + const { + pagerViewRef, + setPage, + page, + position, + offset, + isIdle, + scrollState, + onPageScroll, + onPageSelected, + onPageScrollStateChanged, + } = usePagerView(initialPage); + + const titles = scenes.map(tab => tab.title); - const handlePageSelected = useMemoizedFn((e: PagerViewOnPageSelectedEvent) => { - const page = e.nativeEvent.position; - onChange?.(scenes[page].key); - onPageSelected(page); - }); return ( - <> + + {/* 可以滚动的TabBar */} item.title)} + tabs={titles} onTabPress={setPage} - scrollX={scrollX} - isIdle={isIdle} page={page} + position={position} + offset={offset} + isIdle={isIdle} + scrollState={scrollState} + showIndicator={showIndicator} tabStyle={tabStyle} tabItemStyle={tabItemStyle} labelStyle={labelStyle} indicatorStyle={indicatorStyle} - showIndicator={showIndicator} /> + + {/* PagerView的内容 */} - {scenes.map((item, i) => ( - - {({ loading }) => { - if (loading) return renderLazyPlaceholder(); - return item.component; - }} - - ))} + {scenes.map(({ title, component }) => cloneElement(component, { key: title }))} - + ); } diff --git a/packages/react-native-tabs/src/type.ts b/packages/react-native-tabs/src/type.ts deleted file mode 100644 index 23b4bf61da..0000000000 --- a/packages/react-native-tabs/src/type.ts +++ /dev/null @@ -1,89 +0,0 @@ -import { LayoutRectangle, StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native'; -import { PagerViewOnPageSelectedEvent } from 'react-native-pager-view'; -import { SharedValue } from 'react-native-reanimated'; - -type TabLabel = string | (() => React.ReactNode); - -export interface TabScene { - key: string; - title: TabLabel; - component: JSX.Element; -} - -type Layout = { width: number; height: number }; -export type Listener = (value: number) => void; - -export interface TabsProps - extends Omit, - Pick { - /** 所有的页面 */ - scenes: TabScene[]; - /** 翻页之后的回调 */ - onChange?: (key: string) => void; - /** 标签栏的高度。 默认为48 */ - height?: number; - /** 是否显示指示器。 默认为true */ - showIndicator?: boolean; - /** 是否懒加载其他页面。 默认为false */ - lazy?: boolean; - /** 懒加载时的占位提示组件 */ - renderLazyPlaceholder?: () => React.ReactNode; - /** 默认切换到第几个选项卡 */ - initialPage?: number; - layout?: Layout; -} - -export interface AnimatedPagerViewProps { - /** 是否支持滚动翻页。 默认为 true */ - scrollEnabled?: boolean; - /** 到第一页或者最后一页之后还是否允许继续拖动。 默认为true */ - overdrag?: boolean; - /** 键盘关闭模式。 默认为滚动时关闭 */ - keyboardDismissMode?: 'none' | 'on-drag'; - onPageSelected: (e: PagerViewOnPageSelectedEvent) => void; -} - -export interface TabBarProps { - tabs: TabLabel[]; - onTabPress: (index: number) => void; - onTabsLayout?: (layouts: LayoutRectangle[]) => void; - height?: number; - page: number; - scrollX: SharedValue; - isIdle: boolean; - spacing?: number; - showIndicator: boolean; - tabStyle?: StyleProp; - tabItemStyle?: StyleProp; - labelStyle?: StyleProp; - indicatorStyle?: IndicatorStyle; -} - -export interface TabBarItemProps { - title: TabLabel; - onPress?: () => void; - onLayout: ViewProps['onLayout']; - style?: StyleProp; - labelStyle?: StyleProp; -} - -export interface IndicatorStyle { - height?: number; - borderRadius?: number; - color?: string; -} - -export interface TabBarIndicatorProps { - style: IndicatorStyle; - scrollX: SharedValue; - inputRange: number[]; - scrollRange: number[]; - tabWidths: number[]; -} - -export interface SceneViewProps { - index: number; - lazy: boolean; - layout: Layout; - children: (props: { loading: boolean }) => React.ReactNode; -} diff --git a/packages/react-native-tabs/src/usePagerView.ts b/packages/react-native-tabs/src/usePagerView.ts index b8284fc592..083b6fb04a 100644 --- a/packages/react-native-tabs/src/usePagerView.ts +++ b/packages/react-native-tabs/src/usePagerView.ts @@ -1,89 +1,80 @@ -import { useRef } from 'react'; -import { Platform } from 'react-native'; -import PagerView, { PageScrollStateChangedNativeEvent } from 'react-native-pager-view'; -import { useDerivedValue, useSharedValue } from 'react-native-reanimated'; +import { useMemo, useRef } from 'react'; +import { Animated, Platform } from 'react-native'; +import PagerView, { + PagerViewOnPageScrollEventData, + PagerViewOnPageSelectedEvent, + PageScrollStateChangedNativeEvent, +} from 'react-native-pager-view'; import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks'; -import { createShareModel } from './createShareModel'; -import { Listener } from './type'; - -function usePagerView(initialPage: number) { - const listenersRef = useRef([]); - const pagerRef = useRef(null); +export default function usePagerView(initialPage: number) { + const pagerViewRef = useRef(null); const [activePage, setActivePage] = useSafeState(initialPage); const [isIdle, setIdle] = useSafeState(true); - const setPage = (page: number, animated = true) => { + const setPage = useMemoizedFn((page: number, animated = true) => { if (animated) { - requestAnimationFrame(() => pagerRef.current?.setPage(page)); + pagerViewRef.current?.setPage(page); } else { - requestAnimationFrame(() => pagerRef.current?.setPageWithoutAnimation(page)); + pagerViewRef.current?.setPageWithoutAnimation(page); } + setActivePage(page); if (activePage !== page) { setIdle(false); } - }; - - const offset = useSharedValue(0); - const position = useSharedValue(initialPage); - - const scrollX = useDerivedValue(() => offset.value + position.value, [offset, position]); - - const onPageScroll = (e: { offset: number; position: number }) => { - offset.value = e.offset; - position.value = e.position; - }; + }); + + const offset = useRef(new Animated.Value(initialPage)).current; + const position = useRef(new Animated.Value(0)).current; + + const onPageScroll = useMemo( + () => + Animated.event( + [ + { + nativeEvent: { + offset, + position, + }, + }, + ], + { + listener: ({ nativeEvent: { position, offset } }) => { + console.log('onPageScroll', 'position', position, 'offset', offset); + }, + useNativeDriver: true, + } + ), + [offset, position] + ); - const onPageSelected = (page: number) => { - setActivePage(page); + const onPageSelected = useMemoizedFn((e: PagerViewOnPageSelectedEvent) => { + setActivePage(e.nativeEvent.position); if (Platform.OS === 'ios') { setIdle(true); } - }; - - const onPageScrollStateChanged = ({ nativeEvent: { pageScrollState } }: PageScrollStateChangedNativeEvent) => { - switch (pageScrollState) { - case 'idle': - setIdle(true); - break; + }); - case 'dragging': - const next = activePage + (offset.value > 0 ? Math.ceil(offset.value) : Math.floor(offset.value)); - if (next !== activePage) { - listenersRef.current.forEach(listener => listener(next)); - } - break; + const [scrollState, setScrollState] = useSafeState<'idle' | 'dragging' | 'settling'>('idle'); - default: - break; - } - }; - - const addEnterListener = (listener: Listener) => { - listenersRef.current.push(listener); - - return () => { - const index = listenersRef.current.indexOf(listener); - if (index > -1) { - listenersRef.current.splice(index, 1); - } - }; - }; + const onPageScrollStateChanged = useMemoizedFn((e: PageScrollStateChangedNativeEvent) => { + setScrollState(e.nativeEvent.pageScrollState); + setIdle(e.nativeEvent.pageScrollState === 'idle'); + }); return { - pagerRef, + pagerViewRef, page: activePage, isIdle, - scrollX, - onPageScroll: useMemoizedFn(onPageScroll), - setPage: useMemoizedFn(setPage), - onPageSelected: useMemoizedFn(onPageSelected), - onPageScrollStateChanged: useMemoizedFn(onPageScrollStateChanged), - addEnterListener: useMemoizedFn(addEnterListener), + scrollState, + position, + offset, + setPage, + onPageScroll, + onPageSelected, + onPageScrollStateChanged, }; } - -export default createShareModel(usePagerView); diff --git a/packages/react-native/src/accordion/index.tsx b/packages/react-native/src/accordion/index.tsx index 91d8cc3faf..5deb33d374 100644 --- a/packages/react-native/src/accordion/index.tsx +++ b/packages/react-native/src/accordion/index.tsx @@ -1,8 +1,9 @@ -import React, { FC, useMemo, useState } from 'react'; +import React, { FC, useMemo } from 'react'; import { FlatList } from 'react-native'; import Animated from 'react-native-reanimated'; import { useTheme } from '@shopify/restyle'; +import { useSafeState } from '@td-design/rn-hooks'; import Box from '../box'; import helpers from '../helpers'; @@ -24,7 +25,7 @@ const Accordion: FC = ({ headerStyle, contentStyle, }) => { - const [currentIndex, setCurrentIndex] = useState(); + const [currentIndex, setCurrentIndex] = useSafeState(); return ( { - const [textWithTail, setTextWithTail] = useState(text); + const [textWithTail, setTextWithTail] = useSafeState(text); useEffect(() => { if (animated) { @@ -35,7 +37,7 @@ const AnimatedNotice: FC { progress.value = withTiming( diff --git a/packages/react-native/src/notice-bar/index.tsx b/packages/react-native/src/notice-bar/index.tsx index ad069b31e2..3bc1c4a819 100644 --- a/packages/react-native/src/notice-bar/index.tsx +++ b/packages/react-native/src/notice-bar/index.tsx @@ -1,8 +1,9 @@ -import React, { FC, PropsWithChildren, useState } from 'react'; +import React, { FC, PropsWithChildren } from 'react'; import { LayoutChangeEvent } from 'react-native'; import Animated, { FadeOutRight } from 'react-native-reanimated'; import { useTheme } from '@shopify/restyle'; +import { useSafeState } from '@td-design/rn-hooks'; import Box from '../box'; import Flex from '../flex'; @@ -27,8 +28,8 @@ const NoticeBar: FC = props => { activeOpacity = 0.6, } = props; - const [visible, setVisible] = useState(true); - const [height, setHeight] = useState(0); + const [visible, setVisible] = useSafeState(true); + const [height, setHeight] = useSafeState(0); const handleContentLayout = (e: LayoutChangeEvent) => { setHeight(e.nativeEvent.layout.height); diff --git a/packages/svgicon-cli/src/templates/Icon.tsx.template b/packages/svgicon-cli/src/templates/Icon.tsx.template index a4e5ea9e33..14831fcd2f 100644 --- a/packages/svgicon-cli/src/templates/Icon.tsx.template +++ b/packages/svgicon-cli/src/templates/Icon.tsx.template @@ -1,7 +1,6 @@ -/* tslint:disable */ /* eslint-disable */ -import React, { FC } from 'react'; +import React from 'react'; import { ViewProps } from 'react-native'; #svgComponents# #imports# @@ -16,7 +15,7 @@ export interface SvgIconProps extends GProps, ViewProps { color?: string | string[]; } -let SvgIcon: FC = ({ name, ...rest }) => { +let SvgIcon: React.FC = ({ name, ...rest }) => { switch (name) { #cases# default: @@ -24,6 +23,4 @@ let SvgIcon: FC = ({ name, ...rest }) => { } }; -SvgIcon = React.memo ? React.memo(SvgIcon) : SvgIcon; - -export default SvgIcon; +export default React.memo(SvgIcon); diff --git a/packages/svgicon-cli/src/templates/LocalSingleIcon.tsx.template b/packages/svgicon-cli/src/templates/LocalSingleIcon.tsx.template index ee67c765be..0c1bc1a63f 100644 --- a/packages/svgicon-cli/src/templates/LocalSingleIcon.tsx.template +++ b/packages/svgicon-cli/src/templates/LocalSingleIcon.tsx.template @@ -1,7 +1,6 @@ -/* tslint:disable */ /* eslint-disable */ -import React, { FC } from 'react'; +import React from 'react'; import { ViewProps } from 'react-native'; #svgComponents# #helper# @@ -14,7 +13,7 @@ export interface SvgIconProps extends GProps, ViewProps { color?: string | string[]; } -let #componentName#: FC = ({ size, width = size, height = size, color, ...rest }) => { +let #componentName#: React.FC = ({ size, width = size, height = size, color, ...rest }) => { #xml# return (#iconContent# ); @@ -24,6 +23,4 @@ let #componentName#: FC = ({ size, width = size, height = size, co size: px(#size#), }; -#componentName# = React.memo ? React.memo(#componentName#) : #componentName#; - -export default #componentName#; +export default React.memo(#componentName#); diff --git a/packages/svgicon-cli/src/templates/helper.ts.template b/packages/svgicon-cli/src/templates/helper.ts.template index 60d6d713c5..1e0ec70481 100644 --- a/packages/svgicon-cli/src/templates/helper.ts.template +++ b/packages/svgicon-cli/src/templates/helper.ts.template @@ -1,4 +1,3 @@ -/* tslint:disable */ /* eslint-disable */ export const getIconColor = (color: string | string[] | undefined, index: number, defaultColor: string) => { From acdd74c1324be45816f4e1dff0d5e854124172ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=9D=B0?= Date: Thu, 12 Oct 2023 15:59:02 +0800 Subject: [PATCH 22/32] =?UTF-8?q?chore:=20=E7=94=9F=E6=88=90changeset?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/rich-kings-vanish.md | 5 +++++ .changeset/smart-phones-stare.md | 8 ++++++++ 2 files changed, 13 insertions(+) create mode 100644 .changeset/rich-kings-vanish.md create mode 100644 .changeset/smart-phones-stare.md diff --git a/.changeset/rich-kings-vanish.md b/.changeset/rich-kings-vanish.md new file mode 100644 index 0000000000..0e7fb01d71 --- /dev/null +++ b/.changeset/rich-kings-vanish.md @@ -0,0 +1,5 @@ +--- +'@td-design/react-native': patch +--- + +使用useSafeState代替useState diff --git a/.changeset/smart-phones-stare.md b/.changeset/smart-phones-stare.md new file mode 100644 index 0000000000..4930b0c447 --- /dev/null +++ b/.changeset/smart-phones-stare.md @@ -0,0 +1,8 @@ +--- +'@td-design/react-native-skeleton': minor +'@td-design/react-native-rating': minor +'@td-design/react-native-tabs': minor +'@td-design/svgicon-cli': minor +--- + +perf: 优化多个组件 From da61237dc3c9cd9ddf3957c6fc3614a03be3afa2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=9D=B0?= Date: Thu, 12 Oct 2023 15:59:51 +0800 Subject: [PATCH 23/32] =?UTF-8?q?style:=20prettier=E6=A0=BC=E5=BC=8F?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/hooks/src/useGetState/index.ts | 2 +- packages/lego/src/bar-line/index.tsx | 23 ++++++++----------- .../lego/src/cylinder-shadow-bar/index.tsx | 4 ++-- packages/lego/src/hooks/useBaseChartConfig.ts | 5 ++-- packages/lego/src/horizontal-bar/index.tsx | 9 ++++---- .../lego/src/multi-horizontal-bar/index.tsx | 5 ++-- packages/lego/src/slice-bar/index.tsx | 9 ++++---- 7 files changed, 25 insertions(+), 32 deletions(-) diff --git a/packages/hooks/src/useGetState/index.ts b/packages/hooks/src/useGetState/index.ts index 4bf6d511e8..3e18c51dbb 100644 --- a/packages/hooks/src/useGetState/index.ts +++ b/packages/hooks/src/useGetState/index.ts @@ -10,7 +10,7 @@ function useGetState(initialState: S | (() => S)): [S, Dispatch(): [ S | undefined, Dispatch>, - GetStateAction + GetStateAction, ]; function useGetState(initialState?: S) { const [state, setState] = useSafeState(initialState); diff --git a/packages/lego/src/bar-line/index.tsx b/packages/lego/src/bar-line/index.tsx index 205090695d..8ac491064e 100644 --- a/packages/lego/src/bar-line/index.tsx +++ b/packages/lego/src/bar-line/index.tsx @@ -199,16 +199,15 @@ function BarLine( border-radius: 7px; "> ${params[0]?.seriesName}：${params[0]?.data?.value || params[0]?.data} ${ - barUnit ?? params[0]?.data?.unit ?? '' - } + barUnit ?? params[0]?.data?.unit ?? '' + }
@@ -245,23 +244,21 @@ function BarLine(
${params[0]?.seriesName}：${params[0]?.data?.value || params[0]?.data} ${ - barUnit ?? params[0]?.data?.unit ?? '' - } + barUnit ?? params[0]?.data?.unit ?? '' + }
diff --git a/packages/lego/src/cylinder-shadow-bar/index.tsx b/packages/lego/src/cylinder-shadow-bar/index.tsx index cd1d84f175..4dd8c11db8 100644 --- a/packages/lego/src/cylinder-shadow-bar/index.tsx +++ b/packages/lego/src/cylinder-shadow-bar/index.tsx @@ -107,8 +107,8 @@ export default forwardRef( border-radius: 7px; ">
${params[0]?.seriesName}：${params[0]?.data?.value || params[0]?.data} ${ - unit ?? params[0]?.data?.unit ?? '' - } + unit ?? params[0]?.data?.unit ?? '' + } `; diff --git a/packages/lego/src/hooks/useBaseChartConfig.ts b/packages/lego/src/hooks/useBaseChartConfig.ts index 368da8b607..03eb71852e 100644 --- a/packages/lego/src/hooks/useBaseChartConfig.ts +++ b/packages/lego/src/hooks/useBaseChartConfig.ts @@ -63,9 +63,8 @@ export default function useBaseChartConfig(inModal = false, unit?: string) {
diff --git a/packages/lego/src/horizontal-bar/index.tsx b/packages/lego/src/horizontal-bar/index.tsx index 9375abaae6..7c94f7d008 100644 --- a/packages/lego/src/horizontal-bar/index.tsx +++ b/packages/lego/src/horizontal-bar/index.tsx @@ -83,15 +83,14 @@ export default forwardRef(
${params[0]?.seriesName}：${params[0]?.data?.value || params[0]?.data} ${ - unit ?? params[0]?.data?.unit ?? '' - } + unit ?? params[0]?.data?.unit ?? '' + } `; diff --git a/packages/lego/src/multi-horizontal-bar/index.tsx b/packages/lego/src/multi-horizontal-bar/index.tsx index 2ba7edb9f2..9022985c0c 100644 --- a/packages/lego/src/multi-horizontal-bar/index.tsx +++ b/packages/lego/src/multi-horizontal-bar/index.tsx @@ -97,9 +97,8 @@ export default forwardRef(
diff --git a/packages/lego/src/slice-bar/index.tsx b/packages/lego/src/slice-bar/index.tsx index 61146ce530..173373b901 100644 --- a/packages/lego/src/slice-bar/index.tsx +++ b/packages/lego/src/slice-bar/index.tsx @@ -96,15 +96,14 @@ export default forwardRef(
${params[0]?.seriesName}：${params[0]?.data?.value || params[0]?.data} ${ - unit ?? params[0]?.data?.unit ?? '' - } + unit ?? params[0]?.data?.unit ?? '' + } `; From 74519238babf8a74b7fab81c75b260e65fa7d315 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 12 Oct 2023 08:05:57 +0000 Subject: [PATCH 24/32] chore: release --- .changeset/rich-kings-vanish.md | 5 ----- .changeset/smart-phones-stare.md | 8 -------- .changeset/wild-foxes-share.md | 5 ----- packages/lego/CHANGELOG.md | 6 ++++++ packages/lego/package.json | 2 +- packages/react-native-calendar/package.json | 2 +- packages/react-native-image-picker/package.json | 2 +- packages/react-native-password/package.json | 2 +- packages/react-native-picker/package.json | 2 +- packages/react-native-rating/CHANGELOG.md | 6 ++++++ packages/react-native-rating/package.json | 4 ++-- packages/react-native-share/package.json | 2 +- packages/react-native-skeleton/CHANGELOG.md | 6 ++++++ packages/react-native-skeleton/package.json | 4 ++-- packages/react-native-tabs/CHANGELOG.md | 6 ++++++ packages/react-native-tabs/package.json | 4 ++-- packages/react-native/CHANGELOG.md | 6 ++++++ packages/react-native/package.json | 2 +- packages/svgicon-cli/CHANGELOG.md | 7 +++++++ packages/svgicon-cli/package.json | 2 +- 20 files changed, 51 insertions(+), 32 deletions(-) delete mode 100644 .changeset/rich-kings-vanish.md delete mode 100644 .changeset/smart-phones-stare.md delete mode 100644 .changeset/wild-foxes-share.md create mode 100644 packages/svgicon-cli/CHANGELOG.md diff --git a/.changeset/rich-kings-vanish.md b/.changeset/rich-kings-vanish.md deleted file mode 100644 index 0e7fb01d71..0000000000 --- a/.changeset/rich-kings-vanish.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@td-design/react-native': patch ---- - -使用useSafeState代替useState diff --git a/.changeset/smart-phones-stare.md b/.changeset/smart-phones-stare.md deleted file mode 100644 index 4930b0c447..0000000000 --- a/.changeset/smart-phones-stare.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -'@td-design/react-native-skeleton': minor -'@td-design/react-native-rating': minor -'@td-design/react-native-tabs': minor -'@td-design/svgicon-cli': minor ---- - -perf: 优化多个组件 diff --git a/.changeset/wild-foxes-share.md b/.changeset/wild-foxes-share.md deleted file mode 100644 index 5c7c271660..0000000000 --- a/.changeset/wild-foxes-share.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@td-design/lego': minor ---- - -feat: 用css动画替代动态背景图 diff --git a/packages/lego/CHANGELOG.md b/packages/lego/CHANGELOG.md index 540b8b34b0..6f102fc8a9 100644 --- a/packages/lego/CHANGELOG.md +++ b/packages/lego/CHANGELOG.md @@ -1,5 +1,11 @@ # @td-design/lego +## 4.1.0 + +### Minor Changes + +- [#742](https://github.com/thundersdata-frontend/td-design/pull/742) [`60960d99a`](https://github.com/thundersdata-frontend/td-design/commit/60960d99ace962e135ef957ae06367aba8955d7f) Thanks [@qqack](https://github.com/qqack)! - feat: 用css动画替代动态背景图 + ## 4.0.3 ### Patch Changes diff --git a/packages/lego/package.json b/packages/lego/package.json index 9b11799ecc..3b21fcbeb9 100644 --- a/packages/lego/package.json +++ b/packages/lego/package.json @@ -1,6 +1,6 @@ { "name": "@td-design/lego", - "version": "4.0.3", + "version": "4.1.0", "description": "雷数大屏素材库", "keywords": [ "thundersdata", diff --git a/packages/react-native-calendar/package.json b/packages/react-native-calendar/package.json index 850f21f800..952d72996a 100644 --- a/packages/react-native-calendar/package.json +++ b/packages/react-native-calendar/package.json @@ -29,7 +29,7 @@ }, "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.4.0", + "@td-design/react-native": "workspace:^5.4.1", "@td-design/rn-hooks": "workspace:^2.7.2", "@td-design/react-native-picker": "workspace:^2.3.2", "@types/react": "^18.2.15", diff --git a/packages/react-native-image-picker/package.json b/packages/react-native-image-picker/package.json index c00a75d707..2a36a7e591 100644 --- a/packages/react-native-image-picker/package.json +++ b/packages/react-native-image-picker/package.json @@ -22,7 +22,7 @@ }, "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.4.0", + "@td-design/react-native": "workspace:^5.4.1", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "0.72.2", diff --git a/packages/react-native-password/package.json b/packages/react-native-password/package.json index 5f2ba976da..4da4b2020a 100644 --- a/packages/react-native-password/package.json +++ b/packages/react-native-password/package.json @@ -26,7 +26,7 @@ "license": "Apache-2.0", "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.4.0", + "@td-design/react-native": "workspace:^5.4.1", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", diff --git a/packages/react-native-picker/package.json b/packages/react-native-picker/package.json index 9468c2d023..af4d716f24 100644 --- a/packages/react-native-picker/package.json +++ b/packages/react-native-picker/package.json @@ -30,7 +30,7 @@ }, "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.4.0", + "@td-design/react-native": "workspace:^5.4.1", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/lodash-es": "^4.17.8", "@types/react": "^18.2.15", diff --git a/packages/react-native-rating/CHANGELOG.md b/packages/react-native-rating/CHANGELOG.md index e22748a422..59c02b3c13 100644 --- a/packages/react-native-rating/CHANGELOG.md +++ b/packages/react-native-rating/CHANGELOG.md @@ -1,5 +1,11 @@ # @td-design/react-native-rating +## 2.7.0 + +### Minor Changes + +- [#743](https://github.com/thundersdata-frontend/td-design/pull/743) [`acdd74c13`](https://github.com/thundersdata-frontend/td-design/commit/acdd74c1324be45816f4e1dff0d5e854124172ad) Thanks [@chj-damon](https://github.com/chj-damon)! - perf: 优化多个组件 + ## 2.6.1 ### Patch Changes diff --git a/packages/react-native-rating/package.json b/packages/react-native-rating/package.json index ff6d252c3f..7705027137 100644 --- a/packages/react-native-rating/package.json +++ b/packages/react-native-rating/package.json @@ -1,6 +1,6 @@ { "name": "@td-design/react-native-rating", - "version": "2.6.1", + "version": "2.7.0", "description": "基于 @td-design/react-native 的 rating 组件", "main": "lib/module/index.js", "module": "lib/module/index.js", @@ -28,7 +28,7 @@ "@shopify/restyle": "2.4.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", - "@td-design/react-native": "workspace:^5.4.0", + "@td-design/react-native": "workspace:^5.4.1", "@td-design/rn-hooks": "workspace:^2.7.2", "react-native-builder-bob": "^0.21.3", "react-native-gesture-handler": "^2.12.0", diff --git a/packages/react-native-share/package.json b/packages/react-native-share/package.json index c4a54c1eeb..fba98e8405 100644 --- a/packages/react-native-share/package.json +++ b/packages/react-native-share/package.json @@ -26,7 +26,7 @@ "license": "Apache-2.0", "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.4.0", + "@td-design/react-native": "workspace:^5.4.1", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", "react-native-builder-bob": "^0.21.3", diff --git a/packages/react-native-skeleton/CHANGELOG.md b/packages/react-native-skeleton/CHANGELOG.md index a938dab9f0..9a8c15735a 100644 --- a/packages/react-native-skeleton/CHANGELOG.md +++ b/packages/react-native-skeleton/CHANGELOG.md @@ -1,5 +1,11 @@ # @td-design/react-native-skeleton +## 1.3.0 + +### Minor Changes + +- [#743](https://github.com/thundersdata-frontend/td-design/pull/743) [`acdd74c13`](https://github.com/thundersdata-frontend/td-design/commit/acdd74c1324be45816f4e1dff0d5e854124172ad) Thanks [@chj-damon](https://github.com/chj-damon)! - perf: 优化多个组件 + ## 1.2.0 ### Minor Changes diff --git a/packages/react-native-skeleton/package.json b/packages/react-native-skeleton/package.json index 2d3aeb2415..d1ad55e15c 100644 --- a/packages/react-native-skeleton/package.json +++ b/packages/react-native-skeleton/package.json @@ -1,6 +1,6 @@ { "name": "@td-design/react-native-skeleton", - "version": "1.2.0", + "version": "1.3.0", "description": "基于 @td-design/react-native 的 skeleton 组件", "main": "lib/module/index.js", "module": "lib/module/index.js", @@ -26,7 +26,7 @@ "license": "Apache-2.0", "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.4.0", + "@td-design/react-native": "workspace:^5.4.1", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", diff --git a/packages/react-native-tabs/CHANGELOG.md b/packages/react-native-tabs/CHANGELOG.md index d83aa1e65b..fae81da0fb 100644 --- a/packages/react-native-tabs/CHANGELOG.md +++ b/packages/react-native-tabs/CHANGELOG.md @@ -1,5 +1,11 @@ # @td-design/react-native-tabs +## 4.3.0 + +### Minor Changes + +- [#743](https://github.com/thundersdata-frontend/td-design/pull/743) [`acdd74c13`](https://github.com/thundersdata-frontend/td-design/commit/acdd74c1324be45816f4e1dff0d5e854124172ad) Thanks [@chj-damon](https://github.com/chj-damon)! - perf: 优化多个组件 + ## 4.2.0 ### Minor Changes diff --git a/packages/react-native-tabs/package.json b/packages/react-native-tabs/package.json index d419b9ce69..137cd83865 100644 --- a/packages/react-native-tabs/package.json +++ b/packages/react-native-tabs/package.json @@ -1,6 +1,6 @@ { "name": "@td-design/react-native-tabs", - "version": "4.2.0", + "version": "4.3.0", "description": "基于 @td-design/react-native 的 tabs 组件", "main": "lib/module/index.js", "module": "lib/module/index.js", @@ -28,7 +28,7 @@ "color": "^4.2.3" }, "devDependencies": { - "@td-design/react-native": "workspace:^5.4.0", + "@td-design/react-native": "workspace:^5.4.1", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", diff --git a/packages/react-native/CHANGELOG.md b/packages/react-native/CHANGELOG.md index 3cdab1010e..dcbb418b6b 100644 --- a/packages/react-native/CHANGELOG.md +++ b/packages/react-native/CHANGELOG.md @@ -1,5 +1,11 @@ # @td-design/react-native +## 5.4.1 + +### Patch Changes + +- [#743](https://github.com/thundersdata-frontend/td-design/pull/743) [`acdd74c13`](https://github.com/thundersdata-frontend/td-design/commit/acdd74c1324be45816f4e1dff0d5e854124172ad) Thanks [@chj-damon](https://github.com/chj-damon)! - 使用useSafeState代替useState + ## 5.4.0 ### Minor Changes diff --git a/packages/react-native/package.json b/packages/react-native/package.json index c8efe37e8e..19eab6ee97 100644 --- a/packages/react-native/package.json +++ b/packages/react-native/package.json @@ -1,6 +1,6 @@ { "name": "@td-design/react-native", - "version": "5.4.0", + "version": "5.4.1", "description": "react-native UI组件库", "keywords": [ "restyle", diff --git a/packages/svgicon-cli/CHANGELOG.md b/packages/svgicon-cli/CHANGELOG.md new file mode 100644 index 0000000000..19052a2027 --- /dev/null +++ b/packages/svgicon-cli/CHANGELOG.md @@ -0,0 +1,7 @@ +# @td-design/svgicon-cli + +## 1.6.0 + +### Minor Changes + +- [#743](https://github.com/thundersdata-frontend/td-design/pull/743) [`acdd74c13`](https://github.com/thundersdata-frontend/td-design/commit/acdd74c1324be45816f4e1dff0d5e854124172ad) Thanks [@chj-damon](https://github.com/chj-damon)! - perf: 优化多个组件 diff --git a/packages/svgicon-cli/package.json b/packages/svgicon-cli/package.json index 216902b857..f9a5b40ca8 100644 --- a/packages/svgicon-cli/package.json +++ b/packages/svgicon-cli/package.json @@ -1,6 +1,6 @@ { "name": "@td-design/svgicon-cli", - "version": "1.5.1", + "version": "1.6.0", "main": "index.js", "keywords": [ "thundersdata-frontend", From 98a7760df55d242722d685a2efac1815fba65c21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=9D=B0?= Date: Thu, 12 Oct 2023 16:21:49 +0800 Subject: [PATCH 25/32] chore: bump version --- packages/svgicon-cli/package.json | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/svgicon-cli/package.json b/packages/svgicon-cli/package.json index 216902b857..fd1db6c714 100644 --- a/packages/svgicon-cli/package.json +++ b/packages/svgicon-cli/package.json @@ -1,6 +1,6 @@ { "name": "@td-design/svgicon-cli", - "version": "1.5.1", + "version": "1.6.0", "main": "index.js", "keywords": [ "thundersdata-frontend", @@ -27,6 +27,10 @@ "lodash": "^4.17.21", "mkdirp": "^3.0.1" }, + "publishConfig": { + "access": "public", + "registry": "https://registry.npmjs.org/" + }, "devDependencies": { "@types/glob": "^8.1.0", "@types/lodash": "^4.14.195", @@ -38,4 +42,4 @@ "gulp-typescript": "^6.0.0-alpha.1", "typescript": "^5.1.6" } -} +} \ No newline at end of file From 8385550d34f2c4396e2311edad7e67148b37ace8 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Mon, 16 Oct 2023 07:15:26 +0000 Subject: [PATCH 26/32] chore: release --- .changeset/light-coats-wonder.md | 5 ----- packages/lego/CHANGELOG.md | 6 ++++++ packages/lego/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/light-coats-wonder.md diff --git a/.changeset/light-coats-wonder.md b/.changeset/light-coats-wonder.md deleted file mode 100644 index 01cc2f987a..0000000000 --- a/.changeset/light-coats-wonder.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@td-design/lego': patch ---- - -style: 优化data-show-simple组件 diff --git a/packages/lego/CHANGELOG.md b/packages/lego/CHANGELOG.md index 6f102fc8a9..db42b264e1 100644 --- a/packages/lego/CHANGELOG.md +++ b/packages/lego/CHANGELOG.md @@ -1,5 +1,11 @@ # @td-design/lego +## 4.1.1 + +### Patch Changes + +- [#745](https://github.com/thundersdata-frontend/td-design/pull/745) [`bbc7deb64`](https://github.com/thundersdata-frontend/td-design/commit/bbc7deb64da6805a33ff20e2b5dbdd0a2e714df0) Thanks [@qqack](https://github.com/qqack)! - style: 优化data-show-simple组件 + ## 4.1.0 ### Minor Changes diff --git a/packages/lego/package.json b/packages/lego/package.json index 3b21fcbeb9..5982ff14ff 100644 --- a/packages/lego/package.json +++ b/packages/lego/package.json @@ -1,6 +1,6 @@ { "name": "@td-design/lego", - "version": "4.1.0", + "version": "4.1.1", "description": "雷数大屏素材库", "keywords": [ "thundersdata", From d91317db103dfe4ed8bd4531f5c170f3602b0429 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=9D=B0?= Date: Mon, 16 Oct 2023 16:12:14 +0800 Subject: [PATCH 27/32] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=B8=80?= =?UTF-8?q?=E4=BA=9Bbug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/large-bulldogs-pull.md | 6 ++ .../src/components/DatePicker/index.tsx | 31 ++++---- .../WheelPicker/WheelPickerItem.tsx | 4 +- .../src/components/WheelPicker/index.tsx | 27 ++++--- .../src/components/WheelPicker/type.ts | 2 +- .../src/date-period-input/index.tsx | 68 +++++++--------- .../src/date-picker-input/index.tsx | 78 ++++++++----------- .../src/date-picker-item/index.tsx | 18 ++--- .../src/picker-input/index.tsx | 70 +++++++---------- .../src/picker-item/index.tsx | 18 ++--- .../src/picker/components/Cascade/index.tsx | 20 ++--- packages/react-native/src/input/InputItem.tsx | 12 +-- packages/react-native/src/input/index.tsx | 16 +--- .../number-keyboard/NumberKeyboardInput.tsx | 12 +-- .../number-keyboard/NumberKeyboardItem.tsx | 12 +-- .../react-native/src/search-bar/index.tsx | 13 +--- packages/react-native/src/swipe-row/index.tsx | 12 ++- .../react-native/src/swipe-row/useSwipeRow.ts | 25 +++++- .../vehicle-keyboard/VehicleKeyboardInput.tsx | 12 +-- .../vehicle-keyboard/VehicleKeyboardItem.tsx | 12 +-- 20 files changed, 193 insertions(+), 275 deletions(-) create mode 100644 .changeset/large-bulldogs-pull.md diff --git a/.changeset/large-bulldogs-pull.md b/.changeset/large-bulldogs-pull.md new file mode 100644 index 0000000000..b89be44992 --- /dev/null +++ b/.changeset/large-bulldogs-pull.md @@ -0,0 +1,6 @@ +--- +'@td-design/react-native-picker': patch +'@td-design/react-native': patch +--- + +修复一些bug diff --git a/packages/react-native-picker/src/components/DatePicker/index.tsx b/packages/react-native-picker/src/components/DatePicker/index.tsx index 630c9f4c54..4ce8d1c054 100644 --- a/packages/react-native-picker/src/components/DatePicker/index.tsx +++ b/packages/react-native-picker/src/components/DatePicker/index.tsx @@ -23,22 +23,21 @@ const DatePicker: FC< const { values, cols } = getValueCols(); - /** 生成日期picker */ - const renderDateTimePicker = () => { - return cols.map((col, index) => { - return ( - onValueChange(itemValue, index)} - /> - ); - }); - }; - - return {renderDateTimePicker()}; + return ( + + {cols.map((col, index) => { + return ( + onValueChange(itemValue, index)} + /> + ); + })} + + ); }; export default React.memo(DatePicker, (p, n) => { diff --git a/packages/react-native-picker/src/components/WheelPicker/WheelPickerItem.tsx b/packages/react-native-picker/src/components/WheelPicker/WheelPickerItem.tsx index 2c92c397df..d562361d6c 100644 --- a/packages/react-native-picker/src/components/WheelPicker/WheelPickerItem.tsx +++ b/packages/react-native-picker/src/components/WheelPicker/WheelPickerItem.tsx @@ -1,13 +1,13 @@ import React, { memo } from 'react'; import { Animated, StyleSheet } from 'react-native'; -import { WhellPickerItemProps } from './type'; +import { WheelPickerItemProps } from './type'; const opacityFunction = (val: number) => 1 / (1 + Math.abs(val)); const scaleFunction = (val: number) => 1 - 0.1 * Math.abs(val); const rotationFunction = (val: number) => 20 * val; -function WheelPickerItem({ textStyle, style, visibleRest, height, option, index, currentIndex }: WhellPickerItemProps) { +function WheelPickerItem({ textStyle, style, visibleRest, height, option, index, currentIndex }: WheelPickerItemProps) { const relativeScrollIndex = Animated.subtract(index, currentIndex); const inputRange = [0]; diff --git a/packages/react-native-picker/src/components/WheelPicker/index.tsx b/packages/react-native-picker/src/components/WheelPicker/index.tsx index ff0b52877a..564c727fa2 100644 --- a/packages/react-native-picker/src/components/WheelPicker/index.tsx +++ b/packages/react-native-picker/src/components/WheelPicker/index.tsx @@ -94,6 +94,21 @@ export default function WheelPicker({ }, }); + const renderItem = useCallback( + ({ item: option, index }) => ( + + ), + [itemStyle, itemTextStyle, itemHeight, currentScrollIndex] + ); + return ( @@ -116,17 +131,7 @@ export default function WheelPicker({ })} data={paddedOptions} keyExtractor={(_, index) => index.toString()} - renderItem={({ item: option, index }) => ( - - )} + renderItem={renderItem} /> ); diff --git a/packages/react-native-picker/src/components/WheelPicker/type.ts b/packages/react-native-picker/src/components/WheelPicker/type.ts index bde2f4d214..9239513b6d 100644 --- a/packages/react-native-picker/src/components/WheelPicker/type.ts +++ b/packages/react-native-picker/src/components/WheelPicker/type.ts @@ -34,7 +34,7 @@ export interface WheelPickerProps extends WheelPickerPropsBase { } /** 滚轮选择器子项的属性 */ -export interface WhellPickerItemProps { +export interface WheelPickerItemProps { textStyle: StyleProp; style: StyleProp; option: OptionItem | null; diff --git a/packages/react-native-picker/src/date-period-input/index.tsx b/packages/react-native-picker/src/date-period-input/index.tsx index a0731e2755..afd04ef29e 100644 --- a/packages/react-native-picker/src/date-period-input/index.tsx +++ b/packages/react-native-picker/src/date-period-input/index.tsx @@ -1,6 +1,5 @@ import React, { FC, ReactNode } from 'react'; import { StyleSheet } from 'react-native'; -import Animated, { FadeInRight, FadeOutRight } from 'react-native-reanimated'; import { Box, Flex, helpers, Pressable, SvgIcon, Text, useTheme } from '@td-design/react-native'; import { useSafeState } from '@td-design/rn-hooks'; @@ -25,7 +24,6 @@ export interface DatePeriodInputProps disabled?: boolean; } -const AnimatedTouchableIcon = Animated.createAnimatedComponent(Pressable); const { ONE_PIXEL } = helpers; /** 适用于筛选条件下的日期区间选择 */ @@ -70,23 +68,7 @@ const DatePeriodInput: FC = ({ icon: { alignItems: 'flex-end' }, }); - const renderLabel = () => { - if (!!label) - return ( - - {typeof label === 'string' ? ( - - {label} - - ) : ( - label - )} - - ); - return null; - }; - - const renderContent1 = () => ( + const BaseContent1 = ( <> @@ -95,20 +77,14 @@ const DatePeriodInput: FC = ({ {!disabled && allowClear && dates[0] && ( - + - + )} ); - const renderContent2 = () => ( + const BaseContent2 = ( <> @@ -117,38 +93,32 @@ const DatePeriodInput: FC = ({ {!disabled && allowClear && dates[1] && ( - + - + )} ); const Content1 = disabled ? ( - {renderContent1()} + {BaseContent1} ) : ( - {renderContent1()} + {BaseContent1} ); const Content2 = disabled ? ( - {renderContent2()} + {BaseContent2} ) : ( - {renderContent2()} + {BaseContent2} ); return ( - {renderLabel()} + {allowClear && editable && !!inputValue && ( - + - + )} {inputType === 'password' && ( diff --git a/packages/react-native/src/input/index.tsx b/packages/react-native/src/input/index.tsx index 1b92586340..c7ae3d6703 100644 --- a/packages/react-native/src/input/index.tsx +++ b/packages/react-native/src/input/index.tsx @@ -1,6 +1,5 @@ import React, { forwardRef, memo, ReactNode } from 'react'; import { StyleProp, StyleSheet, TextInput, TextInputProps, TextStyle } from 'react-native'; -import Animated, { FadeInRight, FadeOutRight } from 'react-native-reanimated'; import { useTheme } from '@shopify/restyle'; @@ -15,7 +14,6 @@ import InputItem from './InputItem'; import TextArea from './TextArea'; import useInput from './useInput'; -const AnimatedTouchableIcon = Animated.createAnimatedComponent(Pressable); const { ONE_PIXEL, px } = helpers; export interface InputProps extends Omit { /** 标签 */ @@ -124,15 +122,9 @@ const Input = forwardRef( /> {allowClear && !disabled && !!inputValue && ( - + - + )} {inputType === 'password' && ( @@ -175,7 +167,7 @@ const Label = memo(({ colon, label, required }: Pick {required && *} - {colon ? ':' : ''} @@ -184,7 +176,7 @@ const Label = memo(({ colon, label, required }: Pick {required && *} - {allowClear && !disabled && !!currentText && currentText !== placeholder && ( - + - + )} {!!extra && ( diff --git a/packages/react-native/src/number-keyboard/NumberKeyboardItem.tsx b/packages/react-native/src/number-keyboard/NumberKeyboardItem.tsx index bc270f8097..682e93a8c5 100644 --- a/packages/react-native/src/number-keyboard/NumberKeyboardItem.tsx +++ b/packages/react-native/src/number-keyboard/NumberKeyboardItem.tsx @@ -1,6 +1,5 @@ import React, { forwardRef } from 'react'; import { Keyboard, StyleSheet } from 'react-native'; -import Animated, { FadeInRight, FadeOutRight } from 'react-native-reanimated'; import { useTheme } from '@shopify/restyle'; @@ -15,7 +14,6 @@ import NumberKeyboardModal from './NumberKeyboardModal'; import { NumberKeyboardItemProps, NumberKeyboardRef } from './type'; import useNumberKeyboard from './useNumberKeyboard'; -const AnimatedTouchableIcon = Animated.createAnimatedComponent(Pressable); const { px } = helpers; const NumberKeyboardItem = forwardRef( ( @@ -80,15 +78,9 @@ const NumberKeyboardItem = forwardRef {allowClear && !disabled && !!currentText && currentText !== placeholder && ( - + - + )} {!!extra && ( diff --git a/packages/react-native/src/search-bar/index.tsx b/packages/react-native/src/search-bar/index.tsx index 5dada4c5d9..54b489e1ff 100644 --- a/packages/react-native/src/search-bar/index.tsx +++ b/packages/react-native/src/search-bar/index.tsx @@ -1,6 +1,5 @@ import React, { FC, PropsWithChildren, useMemo } from 'react'; import { KeyboardTypeOptions, ReturnKeyTypeOptions, StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native'; -import Animated, { FadeInRight, FadeOutRight } from 'react-native-reanimated'; import { useTheme } from '@shopify/restyle'; @@ -48,8 +47,6 @@ export type SearchBarProps = PropsWithChildren<{ activeOpacity?: number; }>; -const AnimatedTouchable = Animated.createAnimatedComponent(Pressable); - const SearchBar: FC = props => { const { placeholder = '搜索', @@ -92,17 +89,11 @@ const SearchBar: FC = props => { const CancelBtn = useMemo(() => { if (!showCancelButton || !focused) return null; return ( - + {cancelText} - + ); }, [showCancelButton, focused, activeOpacity, theme.spacing.x2, cancelText, onCancel]); diff --git a/packages/react-native/src/swipe-row/index.tsx b/packages/react-native/src/swipe-row/index.tsx index 96cc09eb70..e9ea344513 100644 --- a/packages/react-native/src/swipe-row/index.tsx +++ b/packages/react-native/src/swipe-row/index.tsx @@ -2,7 +2,7 @@ import React, { FC, PropsWithChildren } from 'react'; import { Animated as RNAnimated, StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native'; import { RectButton } from 'react-native-gesture-handler'; import Swipeable from 'react-native-gesture-handler/Swipeable'; -import Animated, { FadeOutRight, LightSpeedInLeft } from 'react-native-reanimated'; +import Animated from 'react-native-reanimated'; import { useTheme } from '@shopify/restyle'; @@ -54,7 +54,7 @@ const SwipeRow: FC = ({ contentContainerStyle, }) => { const theme = useTheme(); - const { swipeableRef, changeState, handleRemove, visible } = useSwipeRow({ anchor, onRemove }); + const { swipeableRef, animatedStyle, changeState, handleLayout, handleRemove } = useSwipeRow({ anchor, onRemove }); const renderRightAction = ( props: SwipeAction & { x: number; progress: RNAnimated.AnimatedInterpolation } @@ -123,11 +123,9 @@ const SwipeRow: FC = ({ onSwipeableWillOpen={() => changeState(anchor)} containerStyle={containerStyle} > - {visible && ( - - {children} - - )} + + {children} + ); }; diff --git a/packages/react-native/src/swipe-row/useSwipeRow.ts b/packages/react-native/src/swipe-row/useSwipeRow.ts index 5d67af2754..a09d4bec23 100644 --- a/packages/react-native/src/swipe-row/useSwipeRow.ts +++ b/packages/react-native/src/swipe-row/useSwipeRow.ts @@ -1,5 +1,7 @@ import { useContext, useEffect, useRef } from 'react'; +import { LayoutChangeEvent } from 'react-native'; import { Swipeable } from 'react-native-gesture-handler'; +import { interpolate, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'; import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks'; @@ -8,10 +10,10 @@ import { SwipeRowContext } from './context'; export default function useSwipeRow({ anchor, onRemove }: Pick) { const swipeableRef = useRef(null); + const isRemoving = useSharedValue(0); + const [height, setHeight] = useSafeState(0); const { changeState, id, multiple } = useContext(SwipeRowContext); - const [visible, setVisible] = useSafeState(true); - useEffect(() => { if (anchor === id && !multiple) { swipeableRef.current?.close(); @@ -20,15 +22,30 @@ export default function useSwipeRow({ anchor, onRemove }: Pick { await onRemove?.(); + isRemoving.value = withTiming(1, { duration: 200 }); swipeableRef.current?.close(); - setVisible(false); }; + const handleLayout = (e: LayoutChangeEvent) => { + setHeight(e.nativeEvent.layout.height); + }; + + const animatedStyle = useAnimatedStyle(() => { + if (isRemoving.value) { + return { + height: interpolate(isRemoving.value, [0, 1], [height, 0]), + }; + } + + return {}; + }); + return { swipeableRef, - visible, + animatedStyle, changeState, + handleLayout: useMemoizedFn(handleLayout), handleRemove: useMemoizedFn(handleRemove), }; } diff --git a/packages/react-native/src/vehicle-keyboard/VehicleKeyboardInput.tsx b/packages/react-native/src/vehicle-keyboard/VehicleKeyboardInput.tsx index 8958732fe8..6421bf68b9 100644 --- a/packages/react-native/src/vehicle-keyboard/VehicleKeyboardInput.tsx +++ b/packages/react-native/src/vehicle-keyboard/VehicleKeyboardInput.tsx @@ -1,6 +1,5 @@ import React, { forwardRef } from 'react'; import { Keyboard } from 'react-native'; -import Animated, { FadeInRight, FadeOutRight } from 'react-native-reanimated'; import { useTheme } from '@shopify/restyle'; @@ -16,7 +15,6 @@ import useVehicleKeyboard from './useVehicleKeyboard'; import VehicleKeyboardModal from './VehicleKeyboardModal'; const { ONE_PIXEL } = helpers; -const AnimatedTouchableIcon = Animated.createAnimatedComponent(Pressable); const VehicleKeyboardInput = forwardRef( ( { @@ -79,15 +77,9 @@ const VehicleKeyboardInput = forwardRef {allowClear && !disabled && !!currentText && currentText !== placeholder && ( - + - + )} {!!extra && ( diff --git a/packages/react-native/src/vehicle-keyboard/VehicleKeyboardItem.tsx b/packages/react-native/src/vehicle-keyboard/VehicleKeyboardItem.tsx index 9829a91571..a9f0197e78 100644 --- a/packages/react-native/src/vehicle-keyboard/VehicleKeyboardItem.tsx +++ b/packages/react-native/src/vehicle-keyboard/VehicleKeyboardItem.tsx @@ -1,6 +1,5 @@ import React, { forwardRef } from 'react'; import { Keyboard } from 'react-native'; -import Animated, { FadeInRight, FadeOutRight } from 'react-native-reanimated'; import { useTheme } from '@shopify/restyle'; @@ -14,7 +13,6 @@ import { VehicleKeyboardItemProps, VehicleKeyboardRef } from './type'; import useVehicleKeyboard from './useVehicleKeyboard'; import VehicleKeyboardModal from './VehicleKeyboardModal'; -const AnimatedTouchableIcon = Animated.createAnimatedComponent(Pressable); const VehicleKeyboardItem = forwardRef( ( { @@ -69,15 +67,9 @@ const VehicleKeyboardItem = forwardRef {allowClear && !disabled && !!currentText && currentText !== placeholder && ( - + - + )} {!!extra && ( From 0946229a7cead82b05632da46b793ad396e03f36 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Mon, 16 Oct 2023 08:18:37 +0000 Subject: [PATCH 28/32] chore: release --- .changeset/large-bulldogs-pull.md | 6 ------ packages/react-native-calendar/package.json | 4 ++-- packages/react-native-image-picker/package.json | 2 +- packages/react-native-password/package.json | 2 +- packages/react-native-picker/CHANGELOG.md | 6 ++++++ packages/react-native-picker/package.json | 4 ++-- packages/react-native-rating/package.json | 2 +- packages/react-native-share/package.json | 2 +- packages/react-native-skeleton/package.json | 2 +- packages/react-native-tabs/package.json | 2 +- packages/react-native/CHANGELOG.md | 6 ++++++ packages/react-native/package.json | 2 +- 12 files changed, 23 insertions(+), 17 deletions(-) delete mode 100644 .changeset/large-bulldogs-pull.md diff --git a/.changeset/large-bulldogs-pull.md b/.changeset/large-bulldogs-pull.md deleted file mode 100644 index b89be44992..0000000000 --- a/.changeset/large-bulldogs-pull.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@td-design/react-native-picker': patch -'@td-design/react-native': patch ---- - -修复一些bug diff --git a/packages/react-native-calendar/package.json b/packages/react-native-calendar/package.json index 952d72996a..b093b083af 100644 --- a/packages/react-native-calendar/package.json +++ b/packages/react-native-calendar/package.json @@ -29,9 +29,9 @@ }, "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.4.1", + "@td-design/react-native": "workspace:^5.4.2", "@td-design/rn-hooks": "workspace:^2.7.2", - "@td-design/react-native-picker": "workspace:^2.3.2", + "@td-design/react-native-picker": "workspace:^2.3.3", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", "react-native-builder-bob": "^0.21.3", diff --git a/packages/react-native-image-picker/package.json b/packages/react-native-image-picker/package.json index 2a36a7e591..09ef017cd4 100644 --- a/packages/react-native-image-picker/package.json +++ b/packages/react-native-image-picker/package.json @@ -22,7 +22,7 @@ }, "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.4.1", + "@td-design/react-native": "workspace:^5.4.2", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "0.72.2", diff --git a/packages/react-native-password/package.json b/packages/react-native-password/package.json index 4da4b2020a..f797d84d7e 100644 --- a/packages/react-native-password/package.json +++ b/packages/react-native-password/package.json @@ -26,7 +26,7 @@ "license": "Apache-2.0", "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.4.1", + "@td-design/react-native": "workspace:^5.4.2", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", diff --git a/packages/react-native-picker/CHANGELOG.md b/packages/react-native-picker/CHANGELOG.md index c162ffd699..f0b9d54ebb 100644 --- a/packages/react-native-picker/CHANGELOG.md +++ b/packages/react-native-picker/CHANGELOG.md @@ -1,5 +1,11 @@ # @td-design/react-native-picker +## 2.3.3 + +### Patch Changes + +- [#747](https://github.com/thundersdata-frontend/td-design/pull/747) [`d91317db1`](https://github.com/thundersdata-frontend/td-design/commit/d91317db103dfe4ed8bd4531f5c170f3602b0429) Thanks [@chj-damon](https://github.com/chj-damon)! - 修复一些bug + ## 2.3.2 ### Patch Changes diff --git a/packages/react-native-picker/package.json b/packages/react-native-picker/package.json index af4d716f24..6aa475cbb6 100644 --- a/packages/react-native-picker/package.json +++ b/packages/react-native-picker/package.json @@ -1,6 +1,6 @@ { "name": "@td-design/react-native-picker", - "version": "2.3.2", + "version": "2.3.3", "description": "基于 @td-design/react-native 的 picker 组件", "main": "lib/module/index.js", "module": "lib/module/index.js", @@ -30,7 +30,7 @@ }, "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.4.1", + "@td-design/react-native": "workspace:^5.4.2", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/lodash-es": "^4.17.8", "@types/react": "^18.2.15", diff --git a/packages/react-native-rating/package.json b/packages/react-native-rating/package.json index 7705027137..d51684f052 100644 --- a/packages/react-native-rating/package.json +++ b/packages/react-native-rating/package.json @@ -28,7 +28,7 @@ "@shopify/restyle": "2.4.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", - "@td-design/react-native": "workspace:^5.4.1", + "@td-design/react-native": "workspace:^5.4.2", "@td-design/rn-hooks": "workspace:^2.7.2", "react-native-builder-bob": "^0.21.3", "react-native-gesture-handler": "^2.12.0", diff --git a/packages/react-native-share/package.json b/packages/react-native-share/package.json index fba98e8405..2fd3d8e579 100644 --- a/packages/react-native-share/package.json +++ b/packages/react-native-share/package.json @@ -26,7 +26,7 @@ "license": "Apache-2.0", "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.4.1", + "@td-design/react-native": "workspace:^5.4.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", "react-native-builder-bob": "^0.21.3", diff --git a/packages/react-native-skeleton/package.json b/packages/react-native-skeleton/package.json index d1ad55e15c..2aab290580 100644 --- a/packages/react-native-skeleton/package.json +++ b/packages/react-native-skeleton/package.json @@ -26,7 +26,7 @@ "license": "Apache-2.0", "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.4.1", + "@td-design/react-native": "workspace:^5.4.2", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", diff --git a/packages/react-native-tabs/package.json b/packages/react-native-tabs/package.json index 137cd83865..52be672a93 100644 --- a/packages/react-native-tabs/package.json +++ b/packages/react-native-tabs/package.json @@ -28,7 +28,7 @@ "color": "^4.2.3" }, "devDependencies": { - "@td-design/react-native": "workspace:^5.4.1", + "@td-design/react-native": "workspace:^5.4.2", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", diff --git a/packages/react-native/CHANGELOG.md b/packages/react-native/CHANGELOG.md index dcbb418b6b..d369554102 100644 --- a/packages/react-native/CHANGELOG.md +++ b/packages/react-native/CHANGELOG.md @@ -1,5 +1,11 @@ # @td-design/react-native +## 5.4.2 + +### Patch Changes + +- [#747](https://github.com/thundersdata-frontend/td-design/pull/747) [`d91317db1`](https://github.com/thundersdata-frontend/td-design/commit/d91317db103dfe4ed8bd4531f5c170f3602b0429) Thanks [@chj-damon](https://github.com/chj-damon)! - 修复一些bug + ## 5.4.1 ### Patch Changes diff --git a/packages/react-native/package.json b/packages/react-native/package.json index 19eab6ee97..b768dc2cb6 100644 --- a/packages/react-native/package.json +++ b/packages/react-native/package.json @@ -1,6 +1,6 @@ { "name": "@td-design/react-native", - "version": "5.4.1", + "version": "5.4.2", "description": "react-native UI组件库", "keywords": [ "restyle", From b9b5b09d2eadab17769c4afb3e5cf674081141c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=9D=B0?= Date: Tue, 17 Oct 2023 10:39:33 +0800 Subject: [PATCH 29/32] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=87=A0?= =?UTF-8?q?=E4=B8=AA=E7=BB=84=E4=BB=B6=E9=87=8Cchildren=E7=9A=84=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B=E5=AE=9A=E4=B9=89=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-native/src/card/index.tsx | 52 +++++++++---------- packages/react-native/src/pressable/index.tsx | 6 +-- packages/react-native/src/swipe-row/index.tsx | 2 +- 3 files changed, 30 insertions(+), 30 deletions(-) diff --git a/packages/react-native/src/card/index.tsx b/packages/react-native/src/card/index.tsx index 0994268168..a215fb976c 100644 --- a/packages/react-native/src/card/index.tsx +++ b/packages/react-native/src/card/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, memo, PropsWithChildren, ReactNode } from 'react'; +import React, { FC, memo, ReactNode } from 'react'; import { StyleProp, StyleSheet, ViewStyle } from 'react-native'; import { useTheme } from '@shopify/restyle'; @@ -27,6 +27,8 @@ export interface CardProps { containerStyle?: StyleProp; /** 容器内content样式 */ contentStyle?: StyleProp; + /** 子组件 */ + children?: ReactNode; } /** @@ -34,7 +36,7 @@ export interface CardProps { * @param param0 * @returns */ -const Card: FC> = ({ +const Card: FC = ({ icon, title, extra, @@ -119,28 +121,26 @@ const Header = memo( } ); -const Body = memo( - ({ footer, contentStyle, children }: Pick, 'footer' | 'contentStyle' | 'children'>) => { - const theme = useTheme(); +const Body = memo(({ footer, contentStyle, children }: Pick) => { + const theme = useTheme(); - return ( - - {children} - - ); - } -); + return ( + + {children} + + ); +}); diff --git a/packages/react-native/src/pressable/index.tsx b/packages/react-native/src/pressable/index.tsx index e892899437..59d68ab845 100644 --- a/packages/react-native/src/pressable/index.tsx +++ b/packages/react-native/src/pressable/index.tsx @@ -29,7 +29,7 @@ * effect is the invocation of `onPress` and `onLongPress` that occur when a * responder is release while in the "press in" states. */ -import React, { memo, PropsWithChildren } from 'react'; +import React, { memo } from 'react'; import { Pressable as RNPressable, PressableProps as RNPressableProps, StyleProp, ViewStyle } from 'react-native'; import helpers from '../helpers'; @@ -44,7 +44,7 @@ type Rect = { export interface PressableProps extends Pick< RNPressableProps, - 'onPress' | 'onPressIn' | 'onPressOut' | 'onLongPress' | 'disabled' | 'delayLongPress' | 'onLayout' + 'onPress' | 'onPressIn' | 'onPressOut' | 'onLongPress' | 'disabled' | 'delayLongPress' | 'onLayout' | 'children' > { /** 点击时的不透明度 */ activeOpacity?: number; @@ -58,7 +58,7 @@ export interface PressableProps } const { px } = helpers; -function Pressable(props: PropsWithChildren) { +function Pressable(props: PressableProps) { const { children, activeOpacity = 0.6, diff --git a/packages/react-native/src/swipe-row/index.tsx b/packages/react-native/src/swipe-row/index.tsx index e9ea344513..9ba8ed0987 100644 --- a/packages/react-native/src/swipe-row/index.tsx +++ b/packages/react-native/src/swipe-row/index.tsx @@ -37,7 +37,7 @@ export type SwipeRowProps = PropsWithChildren<{ onRemove?: () => Promise; /** 是否覆盖默认操作项 */ overwriteDefaultActions?: boolean; - /** Swiperable自身的样式 */ + /** Swipeable自身的样式 */ containerStyle?: StyleProp; /** Swipeable的子组件样式 */ contentContainerStyle?: StyleProp; From 616feb43e40e3d1e527a66c7f0d51e4a5b602347 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=9D=B0?= Date: Tue, 17 Oct 2023 10:41:08 +0800 Subject: [PATCH 30/32] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=87=A0?= =?UTF-8?q?=E4=B8=AA=E7=BB=84=E4=BB=B6=E9=87=8Cchildren=E7=9A=84=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B=E5=AE=9A=E4=B9=89=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/cuddly-dolls-begin.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/cuddly-dolls-begin.md diff --git a/.changeset/cuddly-dolls-begin.md b/.changeset/cuddly-dolls-begin.md new file mode 100644 index 0000000000..85ab32c204 --- /dev/null +++ b/.changeset/cuddly-dolls-begin.md @@ -0,0 +1,5 @@ +--- +'@td-design/react-native': patch +--- + +修改几个组件里children的类型定义方式 From 8d8e751392722f60805a17745735ebea2d56a48f Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 17 Oct 2023 02:49:39 +0000 Subject: [PATCH 31/32] chore: release --- .changeset/cuddly-dolls-begin.md | 5 ----- packages/react-native-calendar/package.json | 2 +- packages/react-native-image-picker/package.json | 2 +- packages/react-native-password/package.json | 2 +- packages/react-native-picker/package.json | 2 +- packages/react-native-rating/package.json | 2 +- packages/react-native-share/package.json | 2 +- packages/react-native-skeleton/package.json | 2 +- packages/react-native-tabs/package.json | 2 +- packages/react-native/CHANGELOG.md | 6 ++++++ packages/react-native/package.json | 2 +- 11 files changed, 15 insertions(+), 14 deletions(-) delete mode 100644 .changeset/cuddly-dolls-begin.md diff --git a/.changeset/cuddly-dolls-begin.md b/.changeset/cuddly-dolls-begin.md deleted file mode 100644 index 85ab32c204..0000000000 --- a/.changeset/cuddly-dolls-begin.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@td-design/react-native': patch ---- - -修改几个组件里children的类型定义方式 diff --git a/packages/react-native-calendar/package.json b/packages/react-native-calendar/package.json index b093b083af..d0d255394a 100644 --- a/packages/react-native-calendar/package.json +++ b/packages/react-native-calendar/package.json @@ -29,7 +29,7 @@ }, "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.4.2", + "@td-design/react-native": "workspace:^5.4.3", "@td-design/rn-hooks": "workspace:^2.7.2", "@td-design/react-native-picker": "workspace:^2.3.3", "@types/react": "^18.2.15", diff --git a/packages/react-native-image-picker/package.json b/packages/react-native-image-picker/package.json index 09ef017cd4..a1dd97809f 100644 --- a/packages/react-native-image-picker/package.json +++ b/packages/react-native-image-picker/package.json @@ -22,7 +22,7 @@ }, "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.4.2", + "@td-design/react-native": "workspace:^5.4.3", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "0.72.2", diff --git a/packages/react-native-password/package.json b/packages/react-native-password/package.json index f797d84d7e..69465122ac 100644 --- a/packages/react-native-password/package.json +++ b/packages/react-native-password/package.json @@ -26,7 +26,7 @@ "license": "Apache-2.0", "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.4.2", + "@td-design/react-native": "workspace:^5.4.3", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", diff --git a/packages/react-native-picker/package.json b/packages/react-native-picker/package.json index 6aa475cbb6..d24d7eee4e 100644 --- a/packages/react-native-picker/package.json +++ b/packages/react-native-picker/package.json @@ -30,7 +30,7 @@ }, "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.4.2", + "@td-design/react-native": "workspace:^5.4.3", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/lodash-es": "^4.17.8", "@types/react": "^18.2.15", diff --git a/packages/react-native-rating/package.json b/packages/react-native-rating/package.json index d51684f052..fb894308f7 100644 --- a/packages/react-native-rating/package.json +++ b/packages/react-native-rating/package.json @@ -28,7 +28,7 @@ "@shopify/restyle": "2.4.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", - "@td-design/react-native": "workspace:^5.4.2", + "@td-design/react-native": "workspace:^5.4.3", "@td-design/rn-hooks": "workspace:^2.7.2", "react-native-builder-bob": "^0.21.3", "react-native-gesture-handler": "^2.12.0", diff --git a/packages/react-native-share/package.json b/packages/react-native-share/package.json index 2fd3d8e579..adcf77daa0 100644 --- a/packages/react-native-share/package.json +++ b/packages/react-native-share/package.json @@ -26,7 +26,7 @@ "license": "Apache-2.0", "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.4.2", + "@td-design/react-native": "workspace:^5.4.3", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", "react-native-builder-bob": "^0.21.3", diff --git a/packages/react-native-skeleton/package.json b/packages/react-native-skeleton/package.json index 2aab290580..0dc3195b7d 100644 --- a/packages/react-native-skeleton/package.json +++ b/packages/react-native-skeleton/package.json @@ -26,7 +26,7 @@ "license": "Apache-2.0", "devDependencies": { "@shopify/restyle": "2.4.2", - "@td-design/react-native": "workspace:^5.4.2", + "@td-design/react-native": "workspace:^5.4.3", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", diff --git a/packages/react-native-tabs/package.json b/packages/react-native-tabs/package.json index 52be672a93..0478c399da 100644 --- a/packages/react-native-tabs/package.json +++ b/packages/react-native-tabs/package.json @@ -28,7 +28,7 @@ "color": "^4.2.3" }, "devDependencies": { - "@td-design/react-native": "workspace:^5.4.2", + "@td-design/react-native": "workspace:^5.4.3", "@td-design/rn-hooks": "workspace:^2.7.2", "@types/react": "^18.2.15", "@types/react-native": "^0.72.2", diff --git a/packages/react-native/CHANGELOG.md b/packages/react-native/CHANGELOG.md index d369554102..fb824868d0 100644 --- a/packages/react-native/CHANGELOG.md +++ b/packages/react-native/CHANGELOG.md @@ -1,5 +1,11 @@ # @td-design/react-native +## 5.4.3 + +### Patch Changes + +- [#749](https://github.com/thundersdata-frontend/td-design/pull/749) [`616feb43e`](https://github.com/thundersdata-frontend/td-design/commit/616feb43e40e3d1e527a66c7f0d51e4a5b602347) Thanks [@chj-damon](https://github.com/chj-damon)! - 修改几个组件里children的类型定义方式 + ## 5.4.2 ### Patch Changes diff --git a/packages/react-native/package.json b/packages/react-native/package.json index b768dc2cb6..063bba4910 100644 --- a/packages/react-native/package.json +++ b/packages/react-native/package.json @@ -1,6 +1,6 @@ { "name": "@td-design/react-native", - "version": "5.4.2", + "version": "5.4.3", "description": "react-native UI组件库", "keywords": [ "restyle", From 6c1de12c40586ffb734f9f56801748a321630bb2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=9D=B0?= Date: Thu, 19 Oct 2023 14:00:53 +0800 Subject: [PATCH 32/32] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E9=87=8C=E5=BC=B9=E7=AA=97=E6=97=B6=E5=9B=BE=E8=A1=A8?= =?UTF-8?q?=E6=97=A0=E6=B3=95=E6=AD=A3=E5=B8=B8=E6=98=BE=E7=A4=BA=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/lego/example/BarLineDemo/demo8.tsx | 3 ++- packages/lego/example/CircularSolidPieDemo/demo3.tsx | 1 + packages/lego/example/CuboidBarDemo/demo6.tsx | 1 + packages/lego/example/CylinderBarDemo/demo5.tsx | 1 + packages/lego/example/CylinderShadowBarDemo/demo6.tsx | 1 + packages/lego/example/HorizontalBarDemo/demo5.tsx | 1 + packages/lego/example/ImgLineDemo/demo4.tsx | 1 + packages/lego/example/ModalDemo/demo1.tsx | 2 +- .../lego/example/MultiHorizontalBarDemo/demo3.tsx | 1 + packages/lego/example/MultiLineDemo/demo8.tsx | 1 + packages/lego/example/PictorialBarDemo/demo6.tsx | 1 + packages/lego/example/ProgressDemo/demo2.tsx | 1 + packages/lego/example/RadarDemo/demo2.tsx | 11 ++++++----- packages/lego/example/ScatterDemo/demo4.tsx | 1 + packages/lego/example/SliceBarDemo/demo5.tsx | 1 + packages/lego/example/StackBarDemo/demo5.tsx | 1 + .../lego/example/ThreeDimensionalPieDemo/demo3.tsx | 2 +- 17 files changed, 23 insertions(+), 8 deletions(-) diff --git a/packages/lego/example/BarLineDemo/demo8.tsx b/packages/lego/example/BarLineDemo/demo8.tsx index f0879483da..844d7d97c2 100644 --- a/packages/lego/example/BarLineDemo/demo8.tsx +++ b/packages/lego/example/BarLineDemo/demo8.tsx @@ -13,6 +13,7 @@ export default () => { footer={null} width={650} bodyStyle={{ backgroundColor: '#040727' }} + getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染 > { yAxis={[{ name: '万元' }, { name: '%' }]} lineData={{ name: '同比增长率', data: [12, 11] }} barData={{ name: '运费', data: [500, 584] }} - style={{ height: 500 }} + style={{ height: 500, width: '100%' }} /> diff --git a/packages/lego/example/CircularSolidPieDemo/demo3.tsx b/packages/lego/example/CircularSolidPieDemo/demo3.tsx index 34ee023a63..213a75a147 100644 --- a/packages/lego/example/CircularSolidPieDemo/demo3.tsx +++ b/packages/lego/example/CircularSolidPieDemo/demo3.tsx @@ -21,6 +21,7 @@ export default () => { footer={null} width={650} bodyStyle={{ backgroundColor: '#040727' }} + getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染 > { footer={null} width={650} bodyStyle={{ backgroundColor: '#040727' }} + getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染 > { footer={null} width={650} bodyStyle={{ backgroundColor: '#040727' }} + getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染 > { footer={null} width={650} bodyStyle={{ backgroundColor: '#040727' }} + getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染 > { footer={null} width={650} bodyStyle={{ backgroundColor: '#040727' }} + getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染 > { footer={null} width={650} bodyStyle={{ backgroundColor: '#040727' }} + getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染 > { return ( <> - setVisible(false)} > + setVisible(false)} > ); diff --git a/packages/lego/example/MultiHorizontalBarDemo/demo3.tsx b/packages/lego/example/MultiHorizontalBarDemo/demo3.tsx index 67f023bb2c..0137b3839b 100644 --- a/packages/lego/example/MultiHorizontalBarDemo/demo3.tsx +++ b/packages/lego/example/MultiHorizontalBarDemo/demo3.tsx @@ -13,6 +13,7 @@ export default () => { footer={null} width={650} bodyStyle={{ backgroundColor: '#040727' }} + getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染 > { footer={null} width={650} bodyStyle={{ backgroundColor: '#040727' }} + getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染 > { footer={null} width={650} bodyStyle={{ backgroundColor: '#040727' }} + getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染 > { footer={null} width={650} bodyStyle={{ backgroundColor: '#040727' }} + getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染 > { ]; const indicatorData = [ - { name: '占地面积', max: 100, unit: '亩' }, - { name: '高标库面积', max: 100, unit: '万平方米' }, - { name: '充电桩数量', max: 100, unit: '个' }, - { name: '车辆进出数量', max: 500, unit: '辆' }, - { name: '平均停留时长', max: 100, unit: '分钟' }, + { name: '占地面积', max: '100', unit: '亩' }, + { name: '高标库面积', max: '100', unit: '万平方米' }, + { name: '充电桩数量', max: '100', unit: '个' }, + { name: '车辆进出数量', max: '500', unit: '辆' }, + { name: '平均停留时长', max: '100', unit: '分钟' }, ]; return ( @@ -33,6 +33,7 @@ export default () => { footer={null} width={650} bodyStyle={{ backgroundColor: '#040727' }} + getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染 > { footer={null} width={650} bodyStyle={{ backgroundColor: '#040727' }} + getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染 > { footer={null} width={650} bodyStyle={{ backgroundColor: '#040727' }} + getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染 > { footer={null} width={650} bodyStyle={{ backgroundColor: '#040727' }} + getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染 > { footer={null} width={750} bodyStyle={{ backgroundColor: '#040727' }} + getContainer={false} // <- 这个属性如果不加，那第一次打开的时候，里面的echarts图表不能正常渲染 >