fix(badge): 四端适配

scripts/rn/copy-file.js

@@ -76,7 +76,6 @@ const removeFile = async (url) => {
 }
 
 const modify = (fileUrl, importStatement) => {
-  // if(!fse.ensureFileSync(fileUrl)) return
   fse.readFile(fileUrl, 'utf8').then((content) => {
     let modifiedContent = content
     modifiedContent = [importStatement, modifiedContent.slice(0)].join('')

src/config.json

@@ -716,7 +716,7 @@
           "author": "dsj"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Badge",
           "type": "component",
           "cName": "徽标",

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

@@ -6,7 +6,7 @@ exports[`should match custom icon 1`] = `
     class="nut-badge"
   >
     <div
-      class="nut-badge-icon"
+      class="nut-badge-content nut-badge-icon"
     >
       <svg
         aria-labelledby="Checklist"
@@ -33,7 +33,7 @@ exports[`should match snapshot 1`] = `
   >
     <div
       class="nut-badge-content nut-badge-sup nut-badge-one"
-      style="top: 4px; right: 8px;"
+      style="top: -4px; right: 8px;"
     >
       8
     </div>

src/packages/badge/__test__/badge.spec.tsx

@@ -35,15 +35,15 @@ test('should match top、right: bad number', () => {
 })
 
 test('should match top、right: have px', () => {
-  const { container } = render(<Badge value={10} top="-10px" right="0" />)
+  const { container } = render(<Badge value={10} top="-10" right="0" />)
   const badgeContent = container.querySelectorAll('.nut-badge-content')[0]
-  expect(badgeContent).toHaveStyle({ top: '-10px', right: '0px' })
+  expect(badgeContent).toHaveStyle({ top: '10px', right: '0px' })
 })
 
 test('should match top、right: float', () => {
-  const { container } = render(<Badge value={10} top="-10.8px" right="0.5px" />)
+  const { container } = render(<Badge value={10} top="-10.8" right="0.5px" />)
   const badgeContent = container.querySelectorAll('.nut-badge-content')[0]
-  expect(badgeContent).toHaveStyle({ top: '-10.8px', right: '0.5px' })
+  expect(badgeContent).toHaveStyle({ top: '10.8px', right: '0.5px' })
 })
 
 test('should match custom color', () => {

src/packages/badge/badge.harmony.css

@@ -1,15 +1,20 @@
 .nut-badge {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  width: auto;
+  /* #ifdef harmony */
+  min-width: 1px;
+  /* #endif */
+  /* #ifndef harmony */
+  min-width: auto;
+  /* #endif */
 }
 .nut-badge-icon {
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
-  background: linear-gradient(135deg, #FF0F23 0%, #FF0F23 100%);
-  top: -10%;
-  right: -15%;
+  background: linear-gradient(135deg, #ff475d 0%, #ff0f23 100%);
   padding: 3px;
   text-align: center;
   border: 0px solid #ffffff;
@@ -27,7 +32,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background: linear-gradient(135deg, #FF0F23 0%, #FF0F23 100%);
+  /* #ifdef harmony */
+  background: #ff0f23;
+  /* #endif */
+  /* #ifndef harmony */
+  background: linear-gradient(135deg, #ff475d 0%, #ff0f23 100%);
+  /* #endif */
   color: #fff;
   padding: 0 4px;
   font-size: 10px;
@@ -45,7 +55,9 @@
   padding: 0;
 }
 .nut-badge-content {
-  transform: translateY(-50%) translateX(100%);
+  /* #ifndef rn */
+  transform: translateX(100%);
+  /* #endif */
 }
 .nut-badge-dot {
   width: 7px;
@@ -54,15 +66,8 @@
   border-radius: 7px;
   padding: 0;
 }
-
-[dir=rtl] .nut-badge-icon,
-.nut-rtl .nut-badge-icon {
-  right: auto;
-  left: -15%;
-}
-[dir=rtl] .nut-badge-content {
-  transform: translateY(-50%) translateX(-100%);
-}
-.nut-rtl .nut-badge-content {
-  transform: translateY(-50%) translateX(-100%);
+.nut-badge-outline {
+  background: #ffffff;
+  border: 1px solid #ff0f23;
+  color: #ff0f23;
 }

src/packages/badge/badge.scss

@@ -1,15 +1,19 @@
 .nut-badge {
   position: relative;
-  display: inline-block;
-
+  display: inline-flex;
+  width: auto;
+  /* #ifdef harmony */
+  min-width: 1px;
+  /* #endif */
+  /* #ifndef harmony */
+  min-width: auto;
+  /* #endif */
   &-icon {
     position: absolute;
     display: flex;
     justify-content: center;
     align-items: center;
     background: $badge-background-color;
-    top: -10%;
-    right: -15%;
     padding: $badge-icon-padding;
     text-align: center;
     border: $badge-border;
@@ -29,7 +33,12 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    /* #ifdef harmony */
+    background: $color-primary;
+    /* #endif */
+    /* #ifndef harmony */
     background: $badge-background-color;
+    /* #endif */
     color: $badge-color;
     padding: $badge-padding;
     font-size: $badge-font-size;
@@ -49,7 +58,9 @@
   }
 
   &-content {
+    /* #ifndef rn */
     transform: $badge-content-transform;
+    /* #endif */
   }
 
   &-dot {
@@ -61,25 +72,8 @@
   }
 
   &-outline {
-    .nut-badge-content {
-      background: $color-primary-text;
-      border: 1px solid $color-primary;
-      color: $color-primary;
-    }
-  }
-}
-
-[dir='rtl'] .nut-badge,
-.nut-rtl .nut-badge {
-  &-icon {
-    right: auto;
-    left: -15%;
-  }
-
-  &-content {
-    transform: var(
-      --nutui-badge-content-transform,
-      translateY(-50%) translateX(-100%)
-    );
+    background: $color-primary-text;
+    border: 1px solid $color-primary;
+    color: $color-primary;
   }
 }

src/packages/badge/badge.taro.tsx

@@ -1,8 +1,18 @@
-import React, { CSSProperties, FunctionComponent, ReactNode } from 'react'
+import React, {
+  CSSProperties,
+  FunctionComponent,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import classNames from 'classnames'
 import { View } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { useRtl } from '@/packages/configprovider/index.taro'
+import pxTransform from '@/utils/px-transform'
+import { getRectByTaro } from '@/utils/get-rect-by-taro'
+import { harmony, rn } from '@/utils/platform-taro'
 
 export type BadgeFill = 'solid' | 'outline'
 export interface BadgeProps extends BasicComponent {
@@ -42,9 +52,10 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
     ...props,
   }
   const classPrefix = 'nut-badge'
-  const classes = classNames(classPrefix, className, {
-    [`${classPrefix}-${fill}`]: fill === 'outline',
-  })
+  const isHarmony = harmony()
+  const classes = classNames(classPrefix, className)
+  const badgeRef = useRef(null)
+  const [contentStyle, setContentStyle] = useState({})
 
   function content() {
     if (dot || typeof value === 'object' || value === 0) return null
@@ -66,41 +77,75 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
     if (typeof value === 'string' && value) return value
   }
 
-  const contentClasses = classNames(
-    { [`${classPrefix}-dot`]: dot },
-    `${classPrefix}-content`,
-    { [`${classPrefix}-sup`]: isNumber() || isString() || dot },
-    {
-      [`${classPrefix}-one`]:
-        typeof content() === 'string' && `${content()}`?.length === 1,
+  const contentClasses = classNames(`${classPrefix}-content`, {
+    [`${classPrefix}-sup`]: isNumber() || isString() || dot,
+    [`${classPrefix}-one`]:
+      typeof content() === 'string' && `${content()}`?.length === 1,
+    [`${classPrefix}-dot`]: dot,
+    [`${classPrefix}-${fill}`]: fill === 'outline',
+  })
+
+  useEffect(() => {
+    if (badgeRef.current) {
+      getPositionStyle()
     }
-  )
-  const getStyle = () => {
+  }, [])
+  const getPositionStyle = async () => {
     const style: CSSProperties = {}
-    style.top = `${Number(top) || parseFloat(String(top)) || 0}px`
-    const dir = rtl ? 'left' : 'right'
-    style[dir] = `${Number(right) || parseFloat(String(right)) || 0}px`
+    style.top = pxTransform(-Number(top) || 0)
+    if (rn()) {
+      const reacts = await getRectByTaro(badgeRef.current)
+      style.left =
+        reacts?.width && reacts?.width > Number(right)
+          ? pxTransform(reacts.width - Number(right))
+          : 0
+    } else {
+      const dir = rtl ? 'left' : 'right'
+      style[dir] = isHarmony
+        ? pxTransform(Number(right))
+        : `${Number(right) || parseFloat(String(right)) || 0}px`
+    }
+    setContentStyle(style)
+  }
 
+  const getStyle = () => {
+    const style: CSSProperties = {}
     if (color) {
       if (fill === 'outline') {
         style.color = color
-        style.background = '#fff'
+        isHarmony
+          ? (style.backgroundColor = '#fff')
+          : (style.background = '#fff')
         if (!color?.includes('gradient')) {
-          style.border = `1px solid ${color}`
+          style.borderColor = color
         }
       } else {
         style.color = '#fff'
-        style.background = color
+        isHarmony ? (style.backgroundColor = color) : (style.background = color)
       }
     }
     return style
   }
+
   return (
-    <View className={classes} style={style}>
-      {isIcon() && <View className={`${classPrefix}-icon`}>{value}</View>}
+    <View className={classes} style={style} ref={badgeRef}>
+      {isIcon() && (
+        <View
+          className={classNames(`${classPrefix}-content`, {
+            [`${classPrefix}-icon`]: true,
+            [`${classPrefix}-icon-rtl`]: rtl,
+          })}
+          style={contentStyle}
+        >
+          {value}
+        </View>
+      )}
       {children}
       {!isIcon() && (
-        <View className={contentClasses} style={getStyle()}>
+        <View
+          className={contentClasses}
+          style={{ ...contentStyle, ...getStyle() }}
+        >
           {content()}
         </View>
       )}

src/packages/badge/badge.tsx

@@ -66,18 +66,16 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
     if (typeof value === 'string' && value) return value
   }
 
-  const contentClasses = classNames(
-    { [`${classPrefix}-dot`]: dot },
-    `${classPrefix}-content`,
-    { [`${classPrefix}-sup`]: isNumber() || isString() || dot },
-    {
-      [`${classPrefix}-one`]:
-        typeof content() === 'string' && `${content()}`?.length === 1,
-    }
-  )
+  const contentClasses = classNames(`${classPrefix}-content`, {
+    [`${classPrefix}-sup`]: isNumber() || isString() || dot,
+    [`${classPrefix}-one`]:
+      typeof content() === 'string' && `${content()}`?.length === 1,
+    [`${classPrefix}-dot`]: dot,
+    [`${classPrefix}-${fill}`]: fill === 'outline',
+  })
   const getStyle = () => {
     const style: CSSProperties = {}
-    style.top = `${Number(top) || parseFloat(String(top)) || 0}px`
+    style.top = `${Number(-top) || parseFloat(String(-top)) || 0}px`
     const dir = rtl ? 'left' : 'right'
     style[dir] = `${Number(right) || parseFloat(String(right)) || 0}px`
 
@@ -97,7 +95,16 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
   }
   return (
     <div className={classes} style={style}>
-      {isIcon() && <div className={`${classPrefix}-icon`}>{value}</div>}
+      {isIcon() && (
+        <div
+          className={classNames(`${classPrefix}-content`, {
+            [`${classPrefix}-icon`]: true,
+            [`${classPrefix}-icon-rtl`]: rtl,
+          })}
+        >
+          {value}
+        </div>
+      )}
       {children}
       {!isIcon() && (
         <div className={contentClasses} style={getStyle()}>