Feat/range 适配 JDRN、鸿蒙端

packages/nutui-taro-demo-rn/scripts/taro/adapted.js

@@ -26,6 +26,7 @@ exports = module.exports = [
   'hoverbutton',
   'safearea',
   'hoverbuttonitem',
+  'range',
   'avatar',
   'avatargroup',
   'inputnumber',

packages/nutui-taro-demo-rn/src/app.config.ts

@@ -124,7 +124,7 @@ const subPackages = [
   }
 ];
 
-export default defineAppConfig ({
+export default defineAppConfig({
   pages: ['pages/index/index'],
   subPackages,
   window: {

packages/nutui-taro-demo-rn/src/dentry1/pages/range/index.config.ts

@@ -1,3 +1,3 @@
 export default {
-  navigationBarTitleText: 'Range',
+  navigationBarTitleText: 'Range'
 }

packages/nutui-taro-demo-rn/src/dentry1/pages/range/index.tsx

@@ -1 +1,2 @@
-export default <>button</>;
+import Demo from '@/packages/range/demo.taro';
+export default Demo;

src/config.json

@@ -610,7 +610,7 @@
           "author": "oasis"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Range",
           "type": "component",
           "cName": "区间选择器",

src/packages/range/demos/h5/demo11.tsx

@@ -13,13 +13,17 @@ const Demo11 = () => {
         button={
           <div
             style={{
+              position: 'absolute',
               width: '26px',
               color: 'white',
               fontSize: '10px',
               lineHeight: '18px',
               textAlign: 'center',
               backgroundColor: 'red',
               borderRadius: '10px',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
             }}
           >
             {value}

src/packages/range/demos/taro/demo1.tsx

@@ -1,18 +1,30 @@
-import React, { useState } from 'react'
-import { Range, Cell, Toast } from '@nutui/nutui-react-taro'
+import React, { useMemo, useState } from 'react'
+import { View } from '@tarojs/components'
+import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const Demo1 = () => {
-  const cellStyle = {
-    padding: '40px 18px',
-  }
+  const cellStyle = useMemo(() => {
+    return harmonyAndRn()
+      ? {
+          paddingTop: pxTransform(40),
+          paddingBottom: pxTransform(40),
+          paddingLeft: pxTransform(18),
+          paddingRight: pxTransform(18),
+        }
+      : {
+          padding: '40px 18px',
+        }
+  }, [])
   const [show, setShow] = useState(false)
   const [msg, setMsg] = useState('')
   const showToast = (msg: string) => {
     setMsg(msg)
     setShow(true)
   }
   return (
-    <>
+    <View>
       <Cell style={cellStyle}>
         <Range defaultValue={40} onEnd={(val) => showToast(`${val}`)} />
       </Cell>
@@ -26,15 +38,15 @@ const Demo1 = () => {
           onEnd={(val) => showToast(`${val}`)}
         />
       </Cell>
-      <Toast
+      {/* <Toast
         type="text"
         visible={show}
         content={msg}
         onClose={() => {
           setShow(false)
         }}
-      />
-    </>
+      /> */}
+    </View>
   )
 }
 export default Demo1

src/packages/range/demos/taro/demo10.tsx

@@ -1,10 +1,22 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { Range, ConfigProvider, Cell } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const Demo10 = () => {
-  const cellStyle = {
-    padding: '40px 18px',
-  }
+  const cellStyle = useMemo(() => {
+    return harmonyAndRn()
+      ? {
+          paddingTop: pxTransform(40),
+          paddingBottom: pxTransform(40),
+          paddingLeft: pxTransform(18),
+          paddingRight: pxTransform(18),
+        }
+      : {
+          padding: '40px 18px',
+        }
+  }, [])
+
   return (
     <Cell
       style={{

src/packages/range/demos/taro/demo11.tsx

@@ -1,51 +1,99 @@
-import React, { useState } from 'react'
-import { View } from '@tarojs/components'
-import { Range, Cell, Toast } from '@nutui/nutui-react-taro'
+import React, { useMemo, useState } from 'react'
+import { View, Text } from '@tarojs/components'
+import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro'
+import { rn, harmony, harmonyAndRn } from '@/utils/platform-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo11 = () => {
+  const cellStyle = useMemo(() => {
+    return harmonyAndRn()
+      ? {
+          paddingTop: pxTransform(40),
+          paddingBottom: pxTransform(40),
+          paddingLeft: pxTransform(18),
+          paddingRight: pxTransform(18),
+        }
+      : {
+          padding: '40px 18px',
+        }
+  }, [])
+
+  const buttonNativeStyle = useMemo(() => {
+    if (rn()) {
+      return {
+        transform: [
+          { translateX: pxTransform(-13) },
+          { translateY: pxTransform(3) },
+        ],
+      }
+    }
+    return {}
+  }, [])
   const [value, setValue] = useState(60)
-  const cellStyle = {
-    padding: '40px 18px',
-  }
   const [show, setShow] = useState(false)
   const [msg, setMsg] = useState('')
   const showToast = (msg: string) => {
     setMsg(msg)
     setShow(true)
   }
   return (
-    <>
+    <View>
       <Cell style={cellStyle}>
         <Range
           value={value}
           button={
             <View
               style={{
-                width: '26px',
-                color: 'white',
-                fontSize: '10px',
-                lineHeight: '18px',
-                textAlign: 'center',
+                position: 'absolute',
+                display: 'flex',
+                width: pxTransform(26),
                 backgroundColor: 'red',
-                borderRadius: '10px',
+                borderRadius: pxTransform(10),
+                justifyContent: 'center',
+                top: '50%',
+                left: '50%',
+                // @ts-ignore
+                transform: 'translate(-50%, -50%)',
+                ...buttonNativeStyle,
               }}
             >
-              {value}
+              <Text
+                style={
+                  harmony()
+                    ? {
+                        height: pxTransform(18),
+                        color: 'white',
+                        fontSize: pxTransform(10),
+                        lineHeight: pxTransform(10),
+                        textAlign: 'center',
+                        paddingTop: pxTransform(4),
+                        paddingBottom: pxTransform(4),
+                      }
+                    : {
+                        color: 'white',
+                        fontSize: pxTransform(10),
+                        lineHeight: rn() ? pxTransform(18) : '18px',
+                        textAlign: 'center',
+                      }
+                }
+              >
+                {value}
+              </Text>
             </View>
           }
           onChange={(val: any) => setValue(val)}
           onEnd={(val) => showToast(`${val}`)}
         />
       </Cell>
-      <Toast
+      {/* <Toast
         type="text"
         visible={show}
         content={msg}
         onClose={() => {
           setShow(false)
         }}
-      />
-    </>
+      /> */}
+    </View>
   )
 }
 export default Demo11

src/packages/range/demos/taro/demo12.tsx

@@ -1,29 +1,45 @@
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import { View } from '@tarojs/components'
-import { Range, Cell, Toast } from '@nutui/nutui-react-taro'
+import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const Demo12 = () => {
-  const verticalStyle = {
-    height: '180px',
-    padding: '10px',
-  }
+  const verticalStyle = useMemo(() => {
+    return harmonyAndRn()
+      ? {
+          height: pxTransform(180),
+          paddingTop: pxTransform(10),
+          paddingBottom: pxTransform(10),
+          paddingLeft: pxTransform(10),
+          paddingRight: pxTransform(10),
+        }
+      : {
+          height: '180px',
+          padding: '10px',
+        }
+  }, [])
+  const viewStyle = useMemo(
+    () => ({ width: pxTransform(150), height: '100%' }),
+    []
+  )
   const [show, setShow] = useState(false)
   const [msg, setMsg] = useState('')
   const showToast = (msg: string) => {
     setMsg(msg)
     setShow(true)
   }
   return (
-    <>
+    <View>
       <Cell style={verticalStyle}>
-        <View style={{ width: '150px', height: '100%' }}>
+        <View style={viewStyle}>
           <Range
             defaultValue={20}
             vertical
             onEnd={(val) => showToast(`${val}`)}
           />
         </View>
-        <View style={{ width: '150px', height: '100%' }}>
+        <View style={viewStyle}>
           <Range
             defaultValue={[20, 80]}
             vertical
@@ -32,15 +48,15 @@ const Demo12 = () => {
           />
         </View>
       </Cell>
-      <Toast
+      {/* <Toast
         type="text"
         visible={show}
         content={msg}
         onClose={() => {
           setShow(false)
         }}
-      />
-    </>
+      /> */}
+    </View>
   )
 }
 export default Demo12