feat(input): 适配鸿蒙、小程序、H5、RN; 鸿蒙下无法隐藏密码Icon

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

@@ -27,4 +27,5 @@ exports = module.exports = [
   'safearea',
   'hoverbuttonitem',
   'configprovider',
+  'input',
 ]

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

@@ -1,4 +1,3 @@
-
 const subPackages = [
   {
     "root": "base",
@@ -133,4 +132,4 @@ export default defineAppConfig ({
     navigationBarTitleText: 'NutUI-React',
     navigationBarTextStyle: 'black'
   }
-})
+})

packages/nutui-taro-demo-rn/src/dentry/pages/input/index.config.ts

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

packages/nutui-taro-demo-rn/src/dentry/pages/input/index.tsx

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

src/config.json

@@ -515,7 +515,7 @@
           "author": "hanyuxinting"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Input",
           "type": "component",
           "cName": "输入框",

src/packages/input/demo.taro.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
+import { ScrollView, View } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 
@@ -95,39 +96,39 @@ const InputDemo = () => {
   return (
     <>
       <Header />
-      <div
+      <ScrollView
         className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}
         style={{ paddingBottom: '20px' }}
       >
-        <h2>{translated.basic}</h2>
+        <View className="h2">{translated.basic}</View>
         <Demo1 />
-        <h2>{translated.uncontrolled}</h2>
+        <View className="h2">{translated.uncontrolled}</View>
         <Demo2 />
-        <h2>{translated.controlled}</h2>
+        <View className="h2">{translated.controlled}</View>
         <Demo3 />
-        <h2>{translated.title1}</h2>
+        <View className="h2">{translated.title1}</View>
         <Demo4 />
-        <h2>{translated.title2}</h2>
+        <View className="h2">{translated.title2}</View>
         <Demo5 />
-        <h2>{translated.title3}</h2>
+        <View className="h2">{translated.title3}</View>
         <Demo6 />
-        <h2>{translated.clearControlled}</h2>
+        <View className="h2">{translated.clearControlled}</View>
         <Demo7 />
-        <h2>{translated.wordCount}</h2>
+        <View className="h2">{translated.wordCount}</View>
         <Demo8 />
-        <h2>{translated.password1}</h2>
+        <View className="h2">{translated.password1}</View>
         <Demo9 />
-        <h2>{translated.title6}</h2>
+        <View className="h2">{translated.title6}</View>
         <Demo10 />
-        <h2>{translated.title8}</h2>
+        <View className="h2">{translated.title8}</View>
         <Demo11 />
-        <h2>{translated.title10}</h2>
+        <View className="h2">{translated.title10}</View>
         <Demo12 />
-        <h2>{translated.title11}</h2>
+        <View className="h2">{translated.title11}</View>
         <Demo13 />
-        <h2>{translated.border}</h2>
+        <View className="h2">{translated.border}</View>
         <Demo14 />
-      </div>
+      </ScrollView>
     </>
   )
 }

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

@@ -6,6 +6,7 @@ const Demo1 = () => {
     <>
       <Input
         placeholder="请输入文本"
+        placeholderTextColor="#757575"
         onChange={(v) => {
           console.log('onChange', v)
         }}

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

@@ -5,11 +5,16 @@ const Demo10 = () => {
   const formatter = (value: string) => value.replace(/\d/g, '')
   return (
     <>
-      <Input formatter={formatter} placeholder="在输入时执行格式化" />
+      <Input
+        formatter={formatter}
+        placeholder="在输入时执行格式化"
+        placeholderTextColor="#757575"
+      />
       <Input
         formatter={formatter}
         formatTrigger="onBlur"
         placeholder="在失焦时执行格式化"
+        placeholderTextColor="#757575"
       />
     </>
   )

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

@@ -4,8 +4,16 @@ import { Input } from '@nutui/nutui-react-taro'
 const Demo11 = () => {
   return (
     <>
-      <Input align="left" placeholder="文本内容对齐" />
-      <Input align="right" placeholder="文本内容对齐" />
+      <Input
+        align="left"
+        placeholder="文本内容对齐"
+        placeholderTextColor="#757575"
+      />
+      <Input
+        align="right"
+        placeholder="文本内容对齐"
+        placeholderTextColor="#757575"
+      />
     </>
   )
 }

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

@@ -11,6 +11,7 @@ const Demo12 = () => {
             title: 'onClick',
           })
         }
+        placeholderTextColor="#757575"
       />
     </>
   )

src/packages/input/demos/taro/demo13.tsx

@@ -1,32 +1,45 @@
 import React from 'react'
-import { Input, Button } from '@nutui/nutui-react-taro'
+import { Button, Input } from '@nutui/nutui-react-taro'
 import { Tips } from '@nutui/icons-react-taro'
+import { Text, View } from '@tarojs/components'
+import { harmonyAndRn } from '@/utils/platform-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo13 = () => {
   return (
     <>
-      <div
+      <View
         style={{
           display: 'flex',
+          flexWrap: 'nowrap',
           alignItems: 'center',
-          background: '#fff',
-          padding: '0 10px',
+          flexDirection: 'row',
+          backgroundColor: '#ffffff',
         }}
       >
-        <Tips />
+        {!harmonyAndRn() ? (
+          <Tips style={{ marginLeft: pxTransform(10) }} />
+        ) : null}
         <Input
           placeholder="请输入短信验证码"
+          placeholderTextColor="#757575"
           style={{ '--nutui-input-padding': '10px' }}
         />
-        <div
-          className="right"
-          style={{ display: 'flex', alignItems: 'center' }}
+        <View
+          style={{
+            display: 'flex',
+            width: pxTransform(100),
+            marginRight: pxTransform(10),
+            alignItems: 'center',
+          }}
         >
-          <Button type="primary" size="small">
-            获取验证码
+          <Button type="primary" size="small" style={{ flexShrink: 1 }}>
+            <Text style={{ fontSize: pxTransform(12), color: '#ffffff' }}>
+              获取验证码
+            </Text>
           </Button>
-        </div>
-      </div>
+        </View>
+      </View>
     </>
   )
 }

src/packages/input/demos/taro/demo14.tsx

@@ -7,6 +7,7 @@ const Demo11 = () => {
       <Input
         style={{ '--nutui-input-border-bottom-width': '1px' }}
         placeholder="边框"
+        placeholderTextColor="#757575"
       />
     </>
   )

src/packages/input/demos/taro/demo2.tsx

@@ -4,7 +4,11 @@ import { Input } from '@nutui/nutui-react-taro'
 const Demo2 = () => {
   return (
     <>
-      <Input defaultValue="NutUI React" placeholder="请输入文本" />
+      <Input
+        defaultValue="NutUI React"
+        placeholder="请输入文本"
+        placeholderTextColor="#757575"
+      />
     </>
   )
 }

src/packages/input/demos/taro/demo3.tsx

@@ -9,6 +9,7 @@ const Demo3 = () => {
         value={val}
         onChange={(val) => setVal(val)}
         placeholder="请输入文本"
+        placeholderTextColor="#757575"
       />
     </>
   )

src/packages/input/demos/taro/demo4.tsx

@@ -4,10 +4,26 @@ import { Input } from '@nutui/nutui-react-taro'
 const Demo4 = () => {
   return (
     <>
-      <Input type="text" placeholder="请输入文本" />
-      <Input type="password" placeholder="请输入密码" />
-      <Input type="digit" placeholder="请输入数字" />
-      <Input type="number" placeholder="请输入整数" />
+      <Input
+        type="text"
+        placeholder="请输入文本"
+        placeholderTextColor="#757575"
+      />
+      <Input
+        type="password"
+        placeholder="请输入密码"
+        placeholderTextColor="#757575"
+      />
+      <Input
+        type="digit"
+        placeholder="请输入数字"
+        placeholderTextColor="#757575"
+      />
+      <Input
+        type="number"
+        placeholder="请输入整数"
+        placeholderTextColor="#757575"
+      />
     </>
   )
 }

src/packages/input/demos/taro/demo5.tsx

@@ -4,8 +4,8 @@ import { Input } from '@nutui/nutui-react-taro'
 const Demo5 = () => {
   return (
     <>
-      <Input readOnly placeholder="输入框只读" />
-      <Input disabled placeholder="输入框禁用" />
+      <Input readOnly placeholder="输入框只读" placeholderTextColor="#757575" />
+      <Input disabled placeholder="输入框禁用" placeholderTextColor="#757575" />
     </>
   )
 }

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

@@ -1,12 +1,22 @@
 import React from 'react'
 import { Input } from '@nutui/nutui-react-taro'
 import { Close } from '@nutui/icons-react-taro'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const Demo6 = () => {
   return (
     <>
-      <Input clearable placeholder="显示清除图标" />
-      <Input clearable clearIcon={<Close />} placeholder="显示清除图标" />
+      <Input
+        clearable
+        placeholder="显示清除图标"
+        placeholderTextColor="#757575"
+      />
+      <Input
+        clearable
+        clearIcon={!harmonyAndRn() ? <Close /> : null}
+        placeholder="显示清除图标"
+        placeholderTextColor="#757575"
+      />
     </>
   )
 }

src/packages/input/demos/taro/demo7.tsx

@@ -1,30 +1,39 @@
 import React, { useState } from 'react'
-import { Input, Cell, Button } from '@nutui/nutui-react-taro'
+import { Text, View } from '@tarojs/components'
+import { Button, Input } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo7 = () => {
   const [keyword, setKeyword] = useState('')
   return (
-    <Cell
-      style={{ alignItems: 'center' }}
-      title={
-        <Input
-          placeholder="受控下的清除"
-          value={keyword}
-          onChange={setKeyword}
-        />
-      }
-      extra={
-        <Button
-          type="primary"
-          size="small"
-          onClick={() => {
-            setKeyword('')
-          }}
-        >
+    <View
+      style={{
+        display: 'flex',
+        flexWrap: 'nowrap',
+        alignItems: 'center',
+        flexDirection: 'row',
+        backgroundColor: '#ffffff',
+      }}
+    >
+      <Input
+        placeholder="受控下的清除"
+        value={keyword}
+        onChange={setKeyword}
+        placeholderTextColor="#757575"
+      />
+      <Button
+        type="primary"
+        size="small"
+        onClick={() => {
+          setKeyword('')
+        }}
+        style={{ marginRight: pxTransform(10) }}
+      >
+        <Text style={{ color: '#ffffff', fontSize: pxTransform(12) }}>
           点我清除
-        </Button>
-      }
-    />
+        </Text>
+      </Button>
+    </View>
   )
 }
 export default Demo7