diff --git a/packages/nutui-taro-demo-rn/scripts/taro/adapted.js b/packages/nutui-taro-demo-rn/scripts/taro/adapted.js index 6a45a0933d..c1a8a3e464 100644 --- a/packages/nutui-taro-demo-rn/scripts/taro/adapted.js +++ b/packages/nutui-taro-demo-rn/scripts/taro/adapted.js @@ -27,4 +27,5 @@ exports = module.exports = [ 'safearea', 'hoverbuttonitem', 'configprovider', + 'input', ] diff --git a/packages/nutui-taro-demo-rn/src/app.config.ts b/packages/nutui-taro-demo-rn/src/app.config.ts index 8c9e8edcfd..09885cd1a1 100644 --- a/packages/nutui-taro-demo-rn/src/app.config.ts +++ b/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' } -}) \ No newline at end of file +}) diff --git a/packages/nutui-taro-demo-rn/src/dentry/pages/input/index.config.ts b/packages/nutui-taro-demo-rn/src/dentry/pages/input/index.config.ts index 684907a733..4e921d7fe6 100644 --- a/packages/nutui-taro-demo-rn/src/dentry/pages/input/index.config.ts +++ b/packages/nutui-taro-demo-rn/src/dentry/pages/input/index.config.ts @@ -1,3 +1,3 @@ export default { - navigationBarTitleText: 'Input', + navigationBarTitleText: 'Input' } \ No newline at end of file diff --git a/packages/nutui-taro-demo-rn/src/dentry/pages/input/index.tsx b/packages/nutui-taro-demo-rn/src/dentry/pages/input/index.tsx index 039e05e8ec..d45c764ef5 100644 --- a/packages/nutui-taro-demo-rn/src/dentry/pages/input/index.tsx +++ b/packages/nutui-taro-demo-rn/src/dentry/pages/input/index.tsx @@ -1 +1,2 @@ -export default <>button; \ No newline at end of file +import Demo from '@/packages/input/demo.taro'; +export default Demo; \ No newline at end of file diff --git a/src/config.json b/src/config.json index 709a1a4304..9f6ee59f2d 100644 --- a/src/config.json +++ b/src/config.json @@ -515,7 +515,7 @@ "author": "hanyuxinting" }, { - "version": "2.0.0", + "version": "3.0.0", "name": "Input", "type": "component", "cName": "输入框", diff --git a/src/packages/input/demo.taro.tsx b/src/packages/input/demo.taro.tsx index 92cfdd4b3c..0a80cb2977 100644 --- a/src/packages/input/demo.taro.tsx +++ b/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 ( <>
-
-

{translated.basic}

+ {translated.basic} -

{translated.uncontrolled}

+ {translated.uncontrolled} -

{translated.controlled}

+ {translated.controlled} -

{translated.title1}

+ {translated.title1} -

{translated.title2}

+ {translated.title2} -

{translated.title3}

+ {translated.title3} -

{translated.clearControlled}

+ {translated.clearControlled} -

{translated.wordCount}

+ {translated.wordCount} -

{translated.password1}

+ {translated.password1} -

{translated.title6}

+ {translated.title6} -

{translated.title8}

+ {translated.title8} -

{translated.title10}

+ {translated.title10} -

{translated.title11}

+ {translated.title11} -

{translated.border}

+ {translated.border} -
+ ) } diff --git a/src/packages/input/demos/taro/demo1.tsx b/src/packages/input/demos/taro/demo1.tsx index 02a71e0ea5..0596c0414c 100644 --- a/src/packages/input/demos/taro/demo1.tsx +++ b/src/packages/input/demos/taro/demo1.tsx @@ -6,6 +6,7 @@ const Demo1 = () => { <> { console.log('onChange', v) }} diff --git a/src/packages/input/demos/taro/demo10.tsx b/src/packages/input/demos/taro/demo10.tsx index 5722b31d48..d96ff4ecae 100644 --- a/src/packages/input/demos/taro/demo10.tsx +++ b/src/packages/input/demos/taro/demo10.tsx @@ -5,11 +5,16 @@ const Demo10 = () => { const formatter = (value: string) => value.replace(/\d/g, '') return ( <> - + ) diff --git a/src/packages/input/demos/taro/demo11.tsx b/src/packages/input/demos/taro/demo11.tsx index 16ac543552..5e6f9ad7e3 100644 --- a/src/packages/input/demos/taro/demo11.tsx +++ b/src/packages/input/demos/taro/demo11.tsx @@ -4,8 +4,16 @@ import { Input } from '@nutui/nutui-react-taro' const Demo11 = () => { return ( <> - - + + ) } diff --git a/src/packages/input/demos/taro/demo12.tsx b/src/packages/input/demos/taro/demo12.tsx index 59f9d03cf0..621db690da 100644 --- a/src/packages/input/demos/taro/demo12.tsx +++ b/src/packages/input/demos/taro/demo12.tsx @@ -11,6 +11,7 @@ const Demo12 = () => { title: 'onClick', }) } + placeholderTextColor="#757575" /> ) diff --git a/src/packages/input/demos/taro/demo13.tsx b/src/packages/input/demos/taro/demo13.tsx index 0b27665234..e5182a427c 100644 --- a/src/packages/input/demos/taro/demo13.tsx +++ b/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 ( <> -
- + {!harmonyAndRn() ? ( + + ) : null} -
- -
-
+ + ) } diff --git a/src/packages/input/demos/taro/demo14.tsx b/src/packages/input/demos/taro/demo14.tsx index def6bba07b..9a0e3660c2 100644 --- a/src/packages/input/demos/taro/demo14.tsx +++ b/src/packages/input/demos/taro/demo14.tsx @@ -7,6 +7,7 @@ const Demo11 = () => { ) diff --git a/src/packages/input/demos/taro/demo2.tsx b/src/packages/input/demos/taro/demo2.tsx index 89c1d9b50c..9f82674a08 100644 --- a/src/packages/input/demos/taro/demo2.tsx +++ b/src/packages/input/demos/taro/demo2.tsx @@ -4,7 +4,11 @@ import { Input } from '@nutui/nutui-react-taro' const Demo2 = () => { return ( <> - + ) } diff --git a/src/packages/input/demos/taro/demo3.tsx b/src/packages/input/demos/taro/demo3.tsx index cceac2a656..fa9fb055b9 100644 --- a/src/packages/input/demos/taro/demo3.tsx +++ b/src/packages/input/demos/taro/demo3.tsx @@ -9,6 +9,7 @@ const Demo3 = () => { value={val} onChange={(val) => setVal(val)} placeholder="请输入文本" + placeholderTextColor="#757575" /> ) diff --git a/src/packages/input/demos/taro/demo4.tsx b/src/packages/input/demos/taro/demo4.tsx index bac576cec1..2b9cd3f063 100644 --- a/src/packages/input/demos/taro/demo4.tsx +++ b/src/packages/input/demos/taro/demo4.tsx @@ -4,10 +4,26 @@ import { Input } from '@nutui/nutui-react-taro' const Demo4 = () => { return ( <> - - - - + + + + ) } diff --git a/src/packages/input/demos/taro/demo5.tsx b/src/packages/input/demos/taro/demo5.tsx index 41d9a4f108..66b318076c 100644 --- a/src/packages/input/demos/taro/demo5.tsx +++ b/src/packages/input/demos/taro/demo5.tsx @@ -4,8 +4,8 @@ import { Input } from '@nutui/nutui-react-taro' const Demo5 = () => { return ( <> - - + + ) } diff --git a/src/packages/input/demos/taro/demo6.tsx b/src/packages/input/demos/taro/demo6.tsx index 559813e59f..2f43f70314 100644 --- a/src/packages/input/demos/taro/demo6.tsx +++ b/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 ( <> - - } placeholder="显示清除图标" /> + + : null} + placeholder="显示清除图标" + placeholderTextColor="#757575" + /> ) } diff --git a/src/packages/input/demos/taro/demo7.tsx b/src/packages/input/demos/taro/demo7.tsx index c210946cdd..6e49144e79 100644 --- a/src/packages/input/demos/taro/demo7.tsx +++ b/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 ( - - } - extra={ - - } - /> + + + ) } export default Demo7 diff --git a/src/packages/input/demos/taro/demo8.tsx b/src/packages/input/demos/taro/demo8.tsx index b3a3442e12..e5076e83de 100644 --- a/src/packages/input/demos/taro/demo8.tsx +++ b/src/packages/input/demos/taro/demo8.tsx @@ -1,27 +1,42 @@ import React, { useState } from 'react' +import { View, Text } from '@tarojs/components' import { Input } from '@nutui/nutui-react-taro' +import pxTransform from '@/utils/px-transform' const Demo8 = () => { const [currentLength, setCurrentLength] = useState(0) return ( <> -
setCurrentLength(val.length)} + placeholderTextColor="#757575" /> -
- {currentLength} / 20 -
-
+ + + {currentLength} / 20 + + + ) } diff --git a/src/packages/input/demos/taro/demo9.tsx b/src/packages/input/demos/taro/demo9.tsx index ed77f17aea..9ce28d752a 100644 --- a/src/packages/input/demos/taro/demo9.tsx +++ b/src/packages/input/demos/taro/demo9.tsx @@ -1,33 +1,48 @@ import React, { useState } from 'react' import { Input } from '@nutui/nutui-react-taro' +import { View } from '@tarojs/components' import { Eye, Marshalling } from '@nutui/icons-react-taro' +import { harmonyAndRn } from '@/utils/platform-taro' +import pxTransform from '@/utils/px-transform' const Demo9 = () => { const [inputType, setInputType] = useState('password') return ( <> -
- -
+ setInputType(inputType === 'text' ? 'password' : 'text') } > + {/* eslint-disable-next-line no-nested-ternary */} {inputType === 'text' ? ( - - ) : ( + !harmonyAndRn() ? ( + + ) : null + ) : !harmonyAndRn() ? ( - )} -
-
+ ) : null} + + ) } diff --git a/src/packages/input/input.harmony.css b/src/packages/input/input.harmony.css index 45a7989752..f505097aab 100644 --- a/src/packages/input/input.harmony.css +++ b/src/packages/input/input.harmony.css @@ -1,9 +1,10 @@ .nut-input { position: relative; display: flex; - align-items: center; + flex-direction: row; + flex-wrap: nowrap; flex: 1; - width: 100%; + align-items: center; padding: 10px 25px; line-height: 24px; font-size: 14px; @@ -15,25 +16,31 @@ .nut-input .nut-icon { color: #c8c9cc; } -.nut-input .nut-input-native { - width: 100%; - color: #1A1A1A; + +.nut-input-native { flex: 1; - background-color: transparent; + color: #1a1a1a; + font-size: 14px; padding: 0; border: 0; outline: 0 none; - font: inherit; text-decoration: none; background-color: transparent; } + +/* #ifndef rn */ +.nut-input-native::placeholder { + color: #757575; +} + +/* #endif */ .nut-input-disabled { - color: #C2C4CC !important; + color: #c2c4cc !important; } .nut-input-disabled input:disabled { - background: none; - color: #C2C4CC; + color: #c2c4cc; cursor: not-allowed; + background: none; opacity: 1; - -webkit-text-fill-color: #C2C4CC; + -webkit-text-fill-color: #c2c4cc; } \ No newline at end of file diff --git a/src/packages/input/input.scss b/src/packages/input/input.scss index dfea5220fb..0ea8e68691 100644 --- a/src/packages/input/input.scss +++ b/src/packages/input/input.scss @@ -1,9 +1,10 @@ .nut-input { position: relative; display: flex; - align-items: center; + flex-direction: row; + flex-wrap: nowrap; flex: 1; - width: 100%; + align-items: center; padding: $input-padding; line-height: 24px; font-size: $input-font-size; @@ -15,29 +16,34 @@ .nut-icon { color: #c8c9cc; } +} - .nut-input-native { - width: 100%; - color: $input-color; - flex: 1; - background-color: transparent; - padding: 0; - border: 0; - outline: 0 none; - font: inherit; - text-decoration: none; - background-color: transparent; - } +.nut-input-native { + flex: 1; + color: $input-color; + font-size: $input-font-size; + padding: 0; + border: 0; + outline: 0 none; + text-decoration: none; + background-color: transparent; +} + +/* #ifndef rn */ +.nut-input-native::placeholder { + color: #757575; +} + +/* #endif */ - &-disabled { - color: $input-disabled-color !important; +.nut-input-disabled { + color: $input-disabled-color !important; - input:disabled { - background: none; - color: $input-disabled-color; - cursor: not-allowed; - opacity: 1; - -webkit-text-fill-color: $input-disabled-color; - } + input:disabled { + color: $input-disabled-color; + cursor: not-allowed; + background: none; + opacity: 1; + -webkit-text-fill-color: $input-disabled-color; } } diff --git a/src/packages/input/input.taro.tsx b/src/packages/input/input.taro.tsx index 0a18971744..80c84daaea 100644 --- a/src/packages/input/input.taro.tsx +++ b/src/packages/input/input.taro.tsx @@ -7,17 +7,18 @@ import React, { useState, } from 'react' import { + Input as TaroInput, InputProps as TaroInputProps, ITouchEvent, View, - Input as TaroInput, } from '@tarojs/components' import { MaskClose } from '@nutui/icons-react-taro' -import Taro, { getEnv, ENV_TYPE } from '@tarojs/taro' +import Taro, { ENV_TYPE, getEnv } from '@tarojs/taro' import { formatNumber } from './utils' import { useConfig, useRtl } from '@/packages/configprovider/index.taro' import { BasicComponent, ComponentDefaults } from '@/utils/typings' import { usePropsValue } from '@/utils/use-props-value' +import { harmonyAndRn } from '@/utils/platform-taro' export type InputAlign = 'left' | 'center' | 'right' export type InputFormatTrigger = 'onChange' | 'onBlur' @@ -242,7 +243,8 @@ export const Input = forwardRef( onBlur={handleBlur} onFocus={handleFocus} onInput={(e: any) => { - handleInput(e.currentTarget.value) + console.log('eeeeee', e.detail.value) + handleInput((e.currentTarget || e.detail).value) }} /> - {clearIcon || } + {clearIcon || + (!harmonyAndRn() ? ( + + ) : null)} )