diff --git a/CHANGELOG.md b/CHANGELOG.md index b38d2ad76b..a28a4d6a43 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,13 @@ +# v2.6.23 + +`2024-10-18` + +- :sparkles: feat(calendar): support renderBottomButton props (#2645) +- :sparkles: feat(calendar): support deleteIcon props (#2644) +- :bug: fix(overlay): tour position offset in tour.taro (#2631) +- :bug: fix: import error (#2648) +- :bug: fix(dialog): remove defaultprops (#2639) + # v2.6.22 `2024-10-12` diff --git a/package.json b/package.json index 1bef6161e2..d48191ebc0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@nutui/nutui-react-taro", - "version": "2.6.22", + "version": "2.6.23", "style": "dist/style.css", "main": "dist/nutui.react.umd.js", "module": "dist/esm/nutui-react.es.js", diff --git a/src/packages/avatarcropper/avatarcropper.tsx b/src/packages/avatarcropper/avatarcropper.tsx index eecf16d357..6317a009c3 100644 --- a/src/packages/avatarcropper/avatarcropper.tsx +++ b/src/packages/avatarcropper/avatarcropper.tsx @@ -12,7 +12,7 @@ import { BasicComponent, ComponentDefaults } from '@/utils/typings' import { useTouch } from '@/utils/use-touch' import { clamp, preventDefault } from '@/utils' import { getRect } from '@/utils/use-client-rect' -import { useConfig } from '@/packages/configprovider/configprovider.taro' +import { useConfig } from '@/packages/configprovider' export type AvatarCropperToolbarPosition = 'top' | 'bottom' export type AvatarCropperShape = 'square' | 'round' diff --git a/src/packages/calendar/calendar.taro.tsx b/src/packages/calendar/calendar.taro.tsx index 5e38fbc5d7..713eabee14 100644 --- a/src/packages/calendar/calendar.taro.tsx +++ b/src/packages/calendar/calendar.taro.tsx @@ -23,8 +23,10 @@ export interface CalendarProps { showSubTitle?: boolean scrollAnimation?: boolean firstDayOfWeek: number + closeIcon?: ReactNode disableDate: (date: CalendarDay) => boolean renderHeaderButtons?: () => string | JSX.Element + renderBottomButton?: () => string | JSX.Element renderDay?: (date: CalendarDay) => string | JSX.Element renderDayTop?: (date: CalendarDay) => string | JSX.Element renderDayBottom?: (date: CalendarDay) => string | JSX.Element @@ -88,8 +90,10 @@ export const Calendar = React.forwardRef< showSubTitle, scrollAnimation, firstDayOfWeek, + closeIcon, disableDate, renderHeaderButtons, + renderBottomButton, renderDay, renderDayTop, renderDayBottom, @@ -153,6 +157,7 @@ export const Calendar = React.forwardRef< firstDayOfWeek={firstDayOfWeek} disableDate={disableDate} renderHeaderButtons={renderHeaderButtons} + renderBottomButton={renderBottomButton} renderDay={renderDay} renderDayTop={renderDayTop} renderDayBottom={renderDayBottom} @@ -176,6 +181,7 @@ export const Calendar = React.forwardRef< onOverlayClick={closePopup} onCloseIconClick={closePopup} style={{ height: '83%' }} + closeIcon={closeIcon} > {renderItem()} diff --git a/src/packages/calendar/calendar.tsx b/src/packages/calendar/calendar.tsx index 57a9330f36..327a1109a5 100644 --- a/src/packages/calendar/calendar.tsx +++ b/src/packages/calendar/calendar.tsx @@ -23,8 +23,10 @@ export interface CalendarProps { showSubTitle?: boolean scrollAnimation?: boolean firstDayOfWeek: number + closeIcon?: ReactNode disableDate: (date: CalendarDay) => boolean renderHeaderButtons?: () => string | JSX.Element + renderBottomButton?: () => string | JSX.Element renderDay?: (date: CalendarDay) => string | JSX.Element renderDayTop?: (date: CalendarDay) => string | JSX.Element renderDayBottom?: (date: CalendarDay) => string | JSX.Element @@ -88,8 +90,10 @@ export const Calendar = React.forwardRef< showSubTitle, scrollAnimation, firstDayOfWeek, + closeIcon, disableDate, renderHeaderButtons, + renderBottomButton, renderDay, renderDayTop, renderDayBottom, @@ -138,6 +142,7 @@ export const Calendar = React.forwardRef< children={children} type={type} autoBackfill={autoBackfill} + renderBottomButton={renderBottomButton} popup={popup} title={title || locale.calendaritem.title} defaultValue={defaultValue} @@ -172,6 +177,7 @@ export const Calendar = React.forwardRef< position="bottom" round closeable + closeIcon={closeIcon} destroyOnClose onOverlayClick={closePopup} onCloseIconClick={closePopup} diff --git a/src/packages/calendar/demos/h5/demo1.tsx b/src/packages/calendar/demos/h5/demo1.tsx index a5235e190c..18e7f906fa 100644 --- a/src/packages/calendar/demos/h5/demo1.tsx +++ b/src/packages/calendar/demos/h5/demo1.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react' import { Cell, Calendar } from '@nutui/nutui-react' +import { Star } from '@nutui/icons-react' const Demo1 = () => { const d = new Date() @@ -39,6 +40,7 @@ const Demo1 = () => { onClose={closeSwitch} onConfirm={setChooseValue} onDayClick={select} + closeIcon={} /> ) diff --git a/src/packages/calendar/demos/taro/demo1.tsx b/src/packages/calendar/demos/taro/demo1.tsx index baefc59d7d..fb890ac4a4 100644 --- a/src/packages/calendar/demos/taro/demo1.tsx +++ b/src/packages/calendar/demos/taro/demo1.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react' import { Cell, Calendar } from '@nutui/nutui-react-taro' +import { Star } from '@nutui/icons-react' const Demo1 = () => { const d = new Date() @@ -39,6 +40,7 @@ const Demo1 = () => { onClose={closeSwitch} onConfirm={setChooseValue} onDayClick={select} + closeIcon={} /> ) diff --git a/src/packages/calendar/doc.en-US.md b/src/packages/calendar/doc.en-US.md index 3886c8906f..160eed3c20 100644 --- a/src/packages/calendar/doc.en-US.md +++ b/src/packages/calendar/doc.en-US.md @@ -120,8 +120,10 @@ import { Calendar } from '@nutui/nutui-react' | showSubTitle | whether to show sub title for calendar | `boolean` | `true` | | scrollAnimation | whether to start scroll animation | `boolean` | `true` | | firstDayOfWeek | first day of week | `0-6` | `0` | +| closeIcon | Custom Icon | `ReactNode` | `close` | | disableDate | set disable date | `(date: CalendarDay) => boolean` | `-` | | renderHeaderButtons | custom buttons, under the title but above the subtitle | `() => string` \| `JSX.Element` | `-` | +| renderBottomButton | Custom calendar bottom button | `() => string` \| `JSX.Element` | `-` | | renderDay | day info | `(date: CalendarDay) => string` \| `JSX.Element` | `-` | | renderDayTop | something above day | `(date: CalendarDay) => string` \| `JSX.Element` | `-` | | renderDayBottom | something under day | `(date: CalendarDay) => string` \| `JSX.Element` | `-` | diff --git a/src/packages/calendar/doc.md b/src/packages/calendar/doc.md index 34f28b5fef..4edee2c0d1 100644 --- a/src/packages/calendar/doc.md +++ b/src/packages/calendar/doc.md @@ -120,8 +120,10 @@ import { Calendar } from '@nutui/nutui-react' | showSubTitle | 是否展示日期标题 | `boolean` | `true` | | scrollAnimation | 是否启动滚动动画 | `boolean` | `true` | | firstDayOfWeek | 设置周起始日 | `0-6` | `0` | +| closeIcon | 自定义 Icon | `ReactNode` | `close` | | disableDate | 设置不可选日期 | `(date: CalendarDay) => boolean` | `-` | | renderHeaderButtons | 自定义日历标题下部，可用以添加自定义操作 | `() => string` \| `JSX.Element` | `-` | +| renderBottomButton | 自定义日历底部按钮 | `() => string` \| `JSX.Element` | `-` | | renderDay | 日期信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` | | renderDayTop | 日期顶部信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` | | renderDayBottom | 日期底部信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` | diff --git a/src/packages/calendar/doc.taro.md b/src/packages/calendar/doc.taro.md index 1fc0cb0881..659755d0b4 100644 --- a/src/packages/calendar/doc.taro.md +++ b/src/packages/calendar/doc.taro.md @@ -120,8 +120,10 @@ import { Calendar } from '@nutui/nutui-react-taro' | showSubTitle | 是否展示日期标题 | `boolean` | `true` | | scrollAnimation | 是否启动滚动动画 | `boolean` | `true` | | firstDayOfWeek | 设置周起始日 | `0-6` | `0` | +| closeIcon | 自定义 Icon | `ReactNode` | `close` | | disableDate | 设置不可选日期 | `(date: CalendarDay) => boolean` | `-` | | renderHeaderButtons | 自定义日历标题下部，可用以添加自定义操作 | `() => string` \| `JSX.Element` | `-` | +| renderBottomButton | 自定义日历底部按钮 | `() => string` \| `JSX.Element` | `-` | | renderDay | 日期信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` | | renderDayTop | 日期顶部信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` | | renderDayBottom | 日期底部信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` | diff --git a/src/packages/calendar/doc.zh-TW.md b/src/packages/calendar/doc.zh-TW.md index 1def02daa5..86954b7a65 100644 --- a/src/packages/calendar/doc.zh-TW.md +++ b/src/packages/calendar/doc.zh-TW.md @@ -120,8 +120,10 @@ import { Calendar } from '@nutui/nutui-react' | showSubTitle | 是否展示日期標題 | `boolean` | `true` | | scrollAnimation | 是否啟動滾動動畫 | `boolean` | `true` | | firstDayOfWeek | 設置周起始日 | `0-6` | `0` | +| closeIcon | 自定義 Icon | `ReactNode` | `close` | | disableDate | 設置不可選日期 | `(date: CalendarDay) => boolean` | `-` | | renderHeaderButtons | 自定義日歴標題下部，可用以添加自定義操作 | `() => string` \| `JSX.Element` | `-` | +| renderBottomButton | 自定義日歴底部按鈕 | `() => string` \| `JSX.Element` | `-` | | renderDay | 日期信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` | | renderDayTop | 日期頂部信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` | | renderDayBottom | 日期底部信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` | diff --git a/src/packages/calendarcard/calendarcard.tsx b/src/packages/calendarcard/calendarcard.tsx index 2afcb0cc8b..f590d0f662 100644 --- a/src/packages/calendarcard/calendarcard.tsx +++ b/src/packages/calendarcard/calendarcard.tsx @@ -9,7 +9,7 @@ import { getCurrentWeekDays, getPrevMonthDays, } from './utils' -import { useConfig } from '@/packages/configprovider/configprovider' +import { useConfig } from '@/packages/configprovider' import type { CalendarCardDay, CalendarCardMonth, diff --git a/src/packages/calendaritem/calendaritem.taro.tsx b/src/packages/calendaritem/calendaritem.taro.tsx index fa772e210e..82c847d6d6 100644 --- a/src/packages/calendaritem/calendaritem.taro.tsx +++ b/src/packages/calendaritem/calendaritem.taro.tsx @@ -56,6 +56,7 @@ export interface CalendarItemProps extends PopupProps { firstDayOfWeek: number disableDate: (date: CalendarDay) => boolean renderHeaderButtons: () => string | JSX.Element + renderBottomButton: () => string | JSX.Element renderDay: (date: CalendarDay) => string | JSX.Element renderDayTop: (date: CalendarDay) => string | JSX.Element renderDayBottom: (date: CalendarDay) => string | JSX.Element @@ -121,6 +122,7 @@ export const CalendarItem = React.forwardRef< renderDay, renderDayTop, renderDayBottom, + renderBottomButton, value, onConfirm, onUpdate, @@ -876,8 +878,14 @@ export const CalendarItem = React.forwardRef< return (
{children} -
- {confirmText || locale.confirm} +
+ {renderBottomButton ? ( + renderBottomButton() + ) : ( +
+ {confirmText || locale.confirm} +
+ )}
) diff --git a/src/packages/calendaritem/calendaritem.tsx b/src/packages/calendaritem/calendaritem.tsx index 445d28abc5..96a33e7f16 100644 --- a/src/packages/calendaritem/calendaritem.tsx +++ b/src/packages/calendaritem/calendaritem.tsx @@ -10,7 +10,7 @@ import { getPreMonthDates, } from '@/utils/date' import requestAniFrame from '@/utils/raf' -import { useConfig } from '@/packages/configprovider/configprovider' +import { useConfig } from '@/packages/configprovider' import { usePropsValue } from '@/utils/use-props-value' import { splitDate, @@ -55,6 +55,7 @@ export interface CalendarItemProps extends PopupProps { firstDayOfWeek: number disableDate: (date: CalendarDay) => boolean renderHeaderButtons: () => string | JSX.Element + renderBottomButton: () => string | JSX.Element renderDay: (date: CalendarDay) => string | JSX.Element renderDayTop: (date: CalendarDay) => string | JSX.Element renderDayBottom: (date: CalendarDay) => string | JSX.Element @@ -116,6 +117,7 @@ export const CalendarItem = React.forwardRef< firstDayOfWeek, disableDate, renderHeaderButtons, + renderBottomButton, renderDay, renderDayTop, renderDayBottom, @@ -875,8 +877,14 @@ export const CalendarItem = React.forwardRef< return (
{children} -
- {confirmText || locale.confirm} +
+ {renderBottomButton ? ( + renderBottomButton() + ) : ( +
+ {confirmText || locale.confirm} +
+ )}
) diff --git a/src/packages/cascader/cascader.tsx b/src/packages/cascader/cascader.tsx index fc973d9ddc..f6c4c2f647 100644 --- a/src/packages/cascader/cascader.tsx +++ b/src/packages/cascader/cascader.tsx @@ -22,7 +22,7 @@ import { import Tree from './tree' import { ComponentDefaults } from '@/utils/typings' import { usePropsValue } from '@/utils/use-props-value' -import { useConfig } from '@/packages/configprovider/configprovider.taro' +import { useConfig } from '@/packages/configprovider' export interface CascaderProps extends Pick< diff --git a/src/packages/grid/__test__/__snapshots__/grid.spec.tsx.snap b/src/packages/grid/__test__/__snapshots__/grid.spec.tsx.snap index 7dcd1750ea..be66fe2a05 100644 --- a/src/packages/grid/__test__/__snapshots__/grid.spec.tsx.snap +++ b/src/packages/grid/__test__/__snapshots__/grid.spec.tsx.snap @@ -7,7 +7,7 @@ exports[`render with custom content 1`] = ` >
{ expect(container).toMatchSnapshot() }) -test('render with column num', () => { - const { container } = render( - <> - - - - - - - - - - - - - - - - - - - - - - ) - - const regionItem = container.querySelector('.nut-grid-item') - expect(regionItem).toHaveStyle('flex-basis:33.333333333333336%') -}) - test('render with props gap', () => { const { container } = render( <> @@ -89,7 +59,7 @@ test('render with props gap', () => { ) const regionItem = container.querySelector('.nut-grid-item') - expect(regionItem).toHaveStyle('padding-right:3px') + expect(regionItem).toHaveStyle('margin-right:3px') }) test('render with props reverse', () => { diff --git a/src/packages/grid/grid.taro.tsx b/src/packages/grid/grid.taro.tsx index aa3043adc8..f962d82872 100644 --- a/src/packages/grid/grid.taro.tsx +++ b/src/packages/grid/grid.taro.tsx @@ -2,7 +2,6 @@ import React, { CSSProperties, FunctionComponent } from 'react' import classNames from 'classnames' import GridContext from './grid.taro.context' import { GridItem, GridItemProps } from '../griditem/griditem.taro' -import { pxCheck } from '@/utils/px-check' export type GridDirection = 'horizontal' | 'vertical' @@ -64,9 +63,6 @@ export const Grid: FunctionComponent< if (style) { styleSelf = style } - if (gap) { - styleSelf.paddingLeft = pxCheck(gap) - } return styleSelf } diff --git a/src/packages/grid/grid.tsx b/src/packages/grid/grid.tsx index 06c10c436d..68bab56ff7 100644 --- a/src/packages/grid/grid.tsx +++ b/src/packages/grid/grid.tsx @@ -2,7 +2,6 @@ import React, { CSSProperties, FunctionComponent } from 'react' import classNames from 'classnames' import { GridItem, GridItemProps } from '../griditem/griditem' import GridContext from './grid.context' -import { pxCheck } from '@/utils/px-check' export type GridDirection = 'horizontal' | 'vertical' @@ -64,9 +63,6 @@ export const Grid: FunctionComponent< if (style) { styleSelf = style } - if (gap) { - styleSelf.paddingLeft = pxCheck(gap) - } return styleSelf } diff --git a/src/packages/griditem/griditem.taro.tsx b/src/packages/griditem/griditem.taro.tsx index 3b0568b76f..2c3b7a98aa 100644 --- a/src/packages/griditem/griditem.taro.tsx +++ b/src/packages/griditem/griditem.taro.tsx @@ -58,14 +58,17 @@ export const GridItem: FunctionComponent< const rootStyle = () => { const styles: CSSProperties = { - flexBasis: `${100 / +columns}%`, + flexBasis: `calc((100% - ${pxCheck((+columns - 1) * Number(gap))}) / ${columns})`, ...style, } if (square) { styles.paddingTop = `${100 / +columns}%` } else if (gap) { - styles.paddingRight = pxCheck(gap) + if ((index + 1) % Number(columns) !== 0) { + styles.marginRight = pxCheck(gap) + } + if (index >= Number(columns)) { styles.marginTop = pxCheck(gap) } diff --git a/src/packages/griditem/griditem.tsx b/src/packages/griditem/griditem.tsx index 2e1f30cfe7..cd487f1ec1 100644 --- a/src/packages/griditem/griditem.tsx +++ b/src/packages/griditem/griditem.tsx @@ -55,17 +55,19 @@ export const GridItem: FunctionComponent< const classPrefix = 'nut-grid-item' const classes = classNames(classPrefix, className) const context = useContext(GridContext) - const rootStyle = () => { const styles: CSSProperties = { - flexBasis: `${100 / +columns}%`, + flexBasis: `calc((100% - ${pxCheck((+columns - 1) * Number(gap))}) / ${columns})`, ...style, } if (square) { styles.paddingTop = `${100 / +columns}%` } else if (gap) { - styles.paddingRight = pxCheck(gap) + if ((index + 1) % Number(columns) !== 0) { + styles.marginRight = pxCheck(gap) + } + if (index >= Number(columns)) { styles.marginTop = pxCheck(gap) } diff --git a/src/packages/overlay/overlay.scss b/src/packages/overlay/overlay.scss index 110934d781..f32f58f5ea 100644 --- a/src/packages/overlay/overlay.scss +++ b/src/packages/overlay/overlay.scss @@ -23,10 +23,6 @@ .nut-overflow-hidden { overflow: hidden !important; - - .taro_page { - overflow: hidden !important; - } } .nut-overlay-slide {