fix(Grid): fix & refactor grid width calculation logic for accurate layout

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`

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",

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'

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()}
         </Popup>

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}

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={<Star />}
       />
     </>
   )

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={<Star />}
       />
     </>
   )

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` | `-` |

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` | `-` |

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` | `-` |

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` | `-` |

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,

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 (
       <div className="nut-calendar-footer">
         {children}
-        <div className="calendar-confirm-btn" onClick={confirm}>
-          {confirmText || locale.confirm}
+        <div onClick={confirm}>
+          {renderBottomButton ? (
+            renderBottomButton()
+          ) : (
+            <div className="calendar-confirm-btn">
+              {confirmText || locale.confirm}
+            </div>
+          )}
         </div>
       </div>
     )

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 (
       <div className="nut-calendar-footer">
         {children}
-        <div className="calendar-confirm-btn" onClick={confirm}>
-          {confirmText || locale.confirm}
+        <div onClick={confirm}>
+          {renderBottomButton ? (
+            renderBottomButton()
+          ) : (
+            <div className="calendar-confirm-btn">
+              {confirmText || locale.confirm}
+            </div>
+          )}
         </div>
       </div>
     )

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<

src/packages/grid/__test__/__snapshots__/grid.spec.tsx.snap

@@ -7,7 +7,7 @@ exports[`render with custom content 1`] = `
   >
     <div
       class="nut-grid-item"
-      style="flex-basis: 25%;"
+      style=""
     >
       <div
         class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-center nut-grid-item-content-horizontal"
@@ -42,7 +42,7 @@ exports[`render with custom content 1`] = `
     </div>
     <div
       class="nut-grid-item"
-      style="flex-basis: 25%;"
+      style=""
     >
       <div
         class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-center nut-grid-item-content-horizontal"
@@ -80,7 +80,7 @@ exports[`render with custom content 1`] = `
     </div>
     <div
       class="nut-grid-item"
-      style="flex-basis: 25%;"
+      style=""
     >
       <div
         class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-center nut-grid-item-content-horizontal"
@@ -114,7 +114,7 @@ exports[`render with custom content 1`] = `
     </div>
     <div
       class="nut-grid-item"
-      style="flex-basis: 25%;"
+      style=""
     >
       <div
         class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-center nut-grid-item-content-horizontal"
@@ -170,7 +170,7 @@ exports[`should match snapshot 1`] = `
   >
     <div
       class="nut-grid-item"
-      style="flex-basis: 25%;"
+      style=""
     >
       <div
         class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-center nut-grid-item-content-vertical"
@@ -203,7 +203,7 @@ exports[`should match snapshot 1`] = `
     </div>
     <div
       class="nut-grid-item"
-      style="flex-basis: 25%;"
+      style=""
     >
       <div
         class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-center nut-grid-item-content-vertical"
@@ -236,7 +236,7 @@ exports[`should match snapshot 1`] = `
     </div>
     <div
       class="nut-grid-item"
-      style="flex-basis: 25%;"
+      style=""
     >
       <div
         class="nut-grid-item-content nut-grid-item-content-border nut-grid-item-content-center nut-grid-item-content-vertical"

src/packages/grid/__test__/grid.spec.tsx

@@ -26,36 +26,6 @@ test('should match snapshot', () => {
   expect(container).toMatchSnapshot()
 })
 
-test('render with column num', () => {
-  const { container } = render(
-    <>
-      <Grid columns={3}>
-        <Grid.Item text="文本">
-          <ImageIcon />
-        </Grid.Item>
-        <Grid.Item text="文本">
-          <ImageIcon />
-        </Grid.Item>
-        <Grid.Item text="文本">
-          <ImageIcon />
-        </Grid.Item>
-        <Grid.Item text="文本">
-          <ImageIcon />
-        </Grid.Item>
-        <Grid.Item text="文本">
-          <ImageIcon />
-        </Grid.Item>
-        <Grid.Item text="文本">
-          <ImageIcon />
-        </Grid.Item>
-      </Grid>
-    </>
-  )
-
-  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', () => {