chore: 同步新增功能

src/hooks/taro/use-custom-event.ts

@@ -1,9 +1,10 @@
 import { useEffect, useRef } from 'react'
 import isEqual from 'react-fast-compare'
-import { Events, getCurrentInstance } from '@tarojs/taro'
+import { eventCenter, getCurrentInstance } from '@tarojs/taro'
 import { useForceUpdate } from '@/hooks/use-force-update'
 
-export const customEvents = new Events()
+// export const customEvents = new Events()
+export const customEvents = eventCenter
 
 export function useCustomEventsPath(selector?: string) {
   selector = selector || ''

src/packages/animatingnumbers/countup.scss

@@ -1,6 +1,11 @@
 .nut-countup {
   &-list {
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
     height: $countup-height;
     overflow: hidden;
     direction: ltr;

src/packages/avatarcropper/avatarcropper.taro.tsx

@@ -4,9 +4,8 @@
   useMemo,
   useCallback,
   FunctionComponent,
-  useLayoutEffect,
 } from 'react'
-import Taro, { createSelectorQuery } from '@tarojs/taro'
+import Taro, { useReady, createSelectorQuery } from '@tarojs/taro'
 import classNames from 'classnames'
 import { Canvas, CommonEventFunction, View } from '@tarojs/components'
 import { getWindowInfo } from '@/utils/taro/get-system-info'
@@ -138,7 +137,7 @@
     cropperCanvasContext: null,
   })
 
-  useLayoutEffect(() => {
+  useReady(() => {
     if (showAlipayCanvas2D) {
       const { canvasId } = canvasAll
       createSelectorQuery()
@@ -150,14 +149,14 @@
         })
         .exec()
     }
-  }, [showAlipayCanvas2D, state.displayHeight, state.displayWidth])
+  })
 
   useEffect(() => {
     setCanvasAll({
       ...canvasAll,
       cropperCanvasContext: Taro.createCanvasContext(canvasAll.canvasId),
     })
   }, [])
 
   const touch = useTouch()
 
@@ -169,7 +168,7 @@
       height,
       borderRadius: shape === 'round' ? '50%' : '',
     }
   }, [pixelRatio, state.cropperWidth])
 
   // 是否是横向
   const isAngle = useMemo(() => {
@@ -251,7 +250,7 @@
       ctx.scale(scale, scale)
       ctx.drawImage(src as HTMLImageElement, x, y, width, height)
     },
     [drawImage, state]
   )
 
   // web绘制
@@ -268,7 +267,7 @@
     canvas.height = state.displayHeight
     const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
     canvas2dDraw(ctx)
   }, [canvas2dDraw])
 
   const alipayDraw = useCallback(() => {
     const ctx = canvasAll.cropperCanvas.getContext(
@@ -325,7 +324,7 @@
     ctx.scale(scale, scale)
     ctx.drawImage(src as string, x, y, width, height)
     ctx.draw()
   }, [drawImage, state.scale, state.angle, state.moveX, state.moveY])
 
   useEffect(() => {
     if (Math.abs(state.moveX) > maxMoveX) {
@@ -694,5 +693,4 @@
     </>
   )
 }
-
 AvatarCropper.displayName = 'NutAvatarCropper'

src/packages/badge/badge.scss

@@ -1,6 +1,11 @@
 .nut-badge {
   position: relative;
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
   vertical-align: middle;
   box-sizing: content-box;
   width: auto;
@@ -38,7 +43,12 @@
   }
 
   &-sup {
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
     text-align: center;
     min-width: $badge-min-width;
     padding: $badge-padding;

src/packages/button/button.scss

@@ -55,6 +55,9 @@
     transform: translate(-50%, -50%);
     opacity: 0;
     content: ' ';
+    /* #ifdef dynamic*/
+    pointer-events: none;
+    /* #endif */
   }
 
   &::after {

src/packages/cascader/cascader.scss

@@ -11,7 +11,9 @@
   }
 
   .nut-tabs-titles-item {
+    /* #ifndef dynamic*/
     flex: initial;
+    /* #endif */
     min-width: auto;
     width: auto;
     padding: $cascader-tabs-item-padding;

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

@@ -3,7 +3,7 @@
 exports[`should match snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="nut-checkbox nut-checkbox-reverse"
+    class="nut-checkbox nut-checkbox-reverse nut-checkbox-active"
   >
     <div
       class="nut-checkbox-icon-wrap"

src/packages/checkbox/checkbox.scss

@@ -65,7 +65,12 @@
 
   &-button {
     position: relative;
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
     align-items: center;
     min-height: 32px;
     padding: $checkbox-button-padding;

src/packages/checkbox/checkbox.taro.tsx

@@ -198,6 +198,7 @@ export const Checkbox: FC<
         {
           [`${classPrefix}-reverse`]: labelPosition === 'left',
           'nut-checkbox-list-item': ctx?.list,
+          [`${classPrefix}-active`]: innerChecked,
         },
         className
       )}

src/packages/checkbox/checkbox.tsx

@@ -203,6 +203,7 @@ export const Checkbox: FunctionComponent<
         {
           [`${classPrefix}-reverse`]: labelPosition === 'left',
           'nut-checkbox-list-item': ctx?.list,
+          [`${classPrefix}-active`]: innerChecked,
         },
         className
       )}

src/packages/checkboxgroup/checkboxgroup.scss

@@ -30,7 +30,12 @@
     flex-wrap: wrap;
 
     .nut-checkbox {
+      /* #ifndef dynamic*/
       display: inline-flex;
+      /* #endif */
+      /* #ifdef dynamic*/
+      display: flex;
+      /* #endif */
       flex: 1;
       margin-right: 20px;
 

src/packages/configprovider/types.ts

@@ -56,12 +56,14 @@ export type NutCSSVariables =
   | 'nutuiFontSizeS'
   | 'nutuiFontSizeBase'
   | 'nutuiFontSizeL'
+  | 'nutuiFontSizeIcon'
   | 'nutuiFontSizeXl'
   | 'nutuiFontSizeXxl'
   | 'nutuiFontSize10'
   | 'nutuiFontSize11'
   | 'nutuiFontWeightLight'
   | 'nutuiFontWeight'
+  | 'nutuiFontWeightMedium'
   | 'nutuiFontWeightBold'
   | 'nutuiLineHeightBase'
   | 'nutuiSpacingXxxs'
@@ -459,10 +461,12 @@ export type NutCSSVariables =
   | 'nutuiDialogMinHeight'
   | 'nutuiDialogBorderRadius'
   | 'nutuiDialogBackground'
+  | 'nutuiDialogTitleMarginBottom'
   | 'nutuiDialogContentMargin'
   | 'nutuiDialogContentMaxHeight'
   | 'nutuiDialogContentLineHeight'
   | 'nutuiDialogContentTextAlign'
+  | 'nutuiDialogFooterButtonBorder'
   | 'nutuiDialogFooterButtonMinWidth'
   | 'nutuiDialogFooterCancelMarginRight'
   | 'nutuiDialogFooterCancelBg'

src/packages/dialog/demos/taro/demo6.tsx

@@ -40,6 +40,10 @@ const Demo6 = () => {
         cancelText="决策2"
         onConfirm={() => setVisible2(false)}
         onCancel={() => setVisible2(false)}
+        onClose={() => {
+          setVisible2(false)
+          console.log('关闭底部icon 3')
+        }}
         closeIcon
       >
         支持函数调用和组件调用两种方式。

src/packages/dialog/dialog.scss

@@ -19,9 +19,11 @@
     position: fixed;
     max-height: 100%;
     background-color: $dialog-background;
+    /* #ifndef dynamic*/
     transition:
       transform 0.2s,
       -webkit-transform 0.2s;
+    /* #endif */
     -webkit-overflow-scrolling: touch;
     top: 50%;
     left: 50%;
@@ -83,6 +85,7 @@
     font-size: $dialog-header-font-size;
     font-weight: $dialog-header-font-weight;
     color: $color-title;
+    margin-bottom: $dialog-title-margin-bottom;
     @include oneline-ellipsis();
   }
 
@@ -125,22 +128,25 @@
 
     .nut-button {
       min-width: $dialog-footer-button-min-width;
+      border-radius: $dialog-footer-button-border;
+      padding: var(--nutui-button-large-padding, 0 12px);
     }
 
     &-cancel.nut-dialog-footer-cancel {
       margin-right: $dialog-footer-cancel-margin-right;
       background: $dialog-footer-cancel-bg;
       color: $button-default-color;
+      border-color: var(--nutui-button-default-border-color, transparent);
       .nut-button-children {
         color: $button-default-color;
       }
     }
 
     &-ok {
       max-width: $dialog-footer-ok-max-width;
-      font-weight: $font-weight-bold;
+      font-weight: $font-weight-medium;
       .nut-button-children {
-        font-weight: $font-weight-bold;
+        font-weight: $font-weight-medium;
       }
     }
 

src/packages/divider/divider.scss

@@ -45,7 +45,12 @@
   }
 
   &-vertical {
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
     width: 0px;
     height: $divider-vertical-height;
     border-left: 1px solid $divider-border-color;

src/packages/drag/drag.scss

@@ -7,7 +7,12 @@
   user-select: none;
   font-size: 0;
   &-inner {
+    /* #ifndef dynamic*/
     display: inline-flex;
+    /* #endif */
+    /* #ifdef dynamic*/
+    display: flex;
+    /* #endif */
     width: fit-content;
     height: fit-content;
     touch-action: none;

src/packages/elevator/elevator.scss

@@ -16,7 +16,9 @@
       min-height: 100%;
       width: 100%;
       background-color: $elevator-list-bg-color;
+      /* #ifndef dynamic*/
       overflow: auto;
+      /* #endif */
     }
 
     &-item {
@@ -96,7 +98,12 @@
       display: flex;
       flex-direction: column;
       &-item {
+        /* #ifndef dynamic*/
         display: inline-flex;
+        /* #endif */
+        /* #ifdef dynamic*/
+        display: flex;
+        /* #endif */
         align-items: center;
         justify-content: center;
         height: 16px;

src/packages/input/input.scss

@@ -33,7 +33,6 @@
   flex: 1;
   color: $color-title;
   font-size: $input-font-size;
-  line-height: $input-lineheight;
   padding: 0;
   border: 0;
   outline: 0 none;

src/packages/input/input.taro.tsx

@@ -7,13 +7,14 @@ import React, {
 } from 'react'
 import { Input as TaroInput, View } from '@tarojs/components'
 import { MaskClose } from '@nutui/icons-react-taro'
-import Taro, { ENV_TYPE, getEnv } from '@tarojs/taro'
+import Taro, { getEnv } from '@tarojs/taro'
 import { BaseEventOrig } from '@tarojs/components/types/common'
 import { formatNumber } from './utils'
 import { useConfig, useRtl } from '@/packages/configprovider/index.taro'
 import { ComponentDefaults } from '@/utils/typings'
 import { usePropsValue } from '@/hooks/use-props-value'
 import { InputFormatTrigger, TaroInputProps } from '@/types'
+import { ENV_TYPE } from '@/utils/taro/env-type'
 
 const defaultProps = {
   ...ComponentDefaults,
@@ -195,7 +196,7 @@ export const Input = forwardRef((props: Partial<TaroInputProps>, ref) => {
           placeholder === undefined ? locale.placeholder : placeholder
         }
         placeholderClass={`${classPrefix}-placeholder`}
-        disabled={disabled || readOnly}
+        disabled={disabled}
         value={value}
         focus={autoFocus || focus}
         confirmType={confirmType}

src/packages/inputnumber/inputnumber.scss

@@ -1,7 +1,13 @@
 .nut-inputnumber {
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
   width: calc(
-    2 * #{$inputnumber-input-margin} + 2 * #{$inputnumber-button-width} + #{$inputnumber-input-width}
+    2 * #{$inputnumber-input-margin} + 2 * #{$inputnumber-button-width} +
+      #{$inputnumber-input-width}
   );
   flex-direction: row;
   align-items: center;

src/packages/loading/loading.scss

@@ -1,5 +1,10 @@
 .nut-loading {
+  /* #ifndef dynamic*/
   display: inline-flex;
+  /* #endif */
+  /* #ifdef dynamic*/
+  display: flex;
+  /* #endif */
   flex-direction: row;
   align-items: center;
   justify-content: center;