From 4b212522592f6cbfaf02c695259f6b7ee547a02c Mon Sep 17 00:00:00 2001 From: oasis-cloud Date: Fri, 7 Jun 2024 19:04:28 +0800 Subject: [PATCH] =?UTF-8?q?feat(input):=20=E9=80=82=E9=85=8D=E9=B8=BF?= =?UTF-8?q?=E8=92=99=E3=80=81=E5=B0=8F=E7=A8=8B=E5=BA=8F=E3=80=81H5?= =?UTF-8?q?=E3=80=81RN;=20=E9=B8=BF=E8=92=99=E4=B8=8B=E6=97=A0=E6=B3=95?= =?UTF-8?q?=E9=9A=90=E8=97=8F=E5=AF=86=E7=A0=81Icon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../scripts/taro/adapted.js | 26 +- packages/nutui-taro-demo-rn/src/app.config.ts | 223 +++++++++--------- .../src/dentry/pages/input/index.config.ts | 2 +- .../src/dentry/pages/input/index.tsx | 3 +- src/config.json | 2 +- src/packages/input/demo.taro.tsx | 33 +-- src/packages/input/demos/taro/demo1.tsx | 1 + src/packages/input/demos/taro/demo10.tsx | 7 +- src/packages/input/demos/taro/demo11.tsx | 12 +- src/packages/input/demos/taro/demo12.tsx | 1 + src/packages/input/demos/taro/demo13.tsx | 37 ++- src/packages/input/demos/taro/demo14.tsx | 1 + src/packages/input/demos/taro/demo2.tsx | 6 +- src/packages/input/demos/taro/demo3.tsx | 1 + src/packages/input/demos/taro/demo4.tsx | 24 +- src/packages/input/demos/taro/demo5.tsx | 4 +- src/packages/input/demos/taro/demo6.tsx | 14 +- src/packages/input/demos/taro/demo7.tsx | 51 ++-- src/packages/input/demos/taro/demo8.tsx | 29 ++- src/packages/input/demos/taro/demo9.tsx | 37 ++- src/packages/input/input.harmony.css | 29 ++- src/packages/input/input.scss | 52 ++-- src/packages/input/input.taro.tsx | 13 +- 23 files changed, 352 insertions(+), 256 deletions(-) diff --git a/packages/nutui-taro-demo-rn/scripts/taro/adapted.js b/packages/nutui-taro-demo-rn/scripts/taro/adapted.js index b69f00ba0f..6a2e9e438c 100644 --- a/packages/nutui-taro-demo-rn/scripts/taro/adapted.js +++ b/packages/nutui-taro-demo-rn/scripts/taro/adapted.js @@ -1,25 +1 @@ -exports = module.exports = [ - 'cell', - 'cellgroup', - 'overlay', - 'button', - 'switch', - 'countdown', - 'empty', - 'price', - 'tag', - 'layout', - 'row', - 'col', - 'space', - 'grid', - 'griditem', - 'divider', - 'image', - 'resultpage', - 'notify', - 'pagination', - 'swiper', - 'textarea', - 'indicator', -] +exports = module.exports = ["cell","cellgroup","overlay","button","switch","countdown","empty","price","tag","layout","row","col","space","grid","griditem","divider","image","resultpage","notify","pagination","swiper","textarea","indicator","input"]; \ No newline at end of file diff --git a/packages/nutui-taro-demo-rn/src/app.config.ts b/packages/nutui-taro-demo-rn/src/app.config.ts index 69917b5166..3600fe3721 100644 --- a/packages/nutui-taro-demo-rn/src/app.config.ts +++ b/packages/nutui-taro-demo-rn/src/app.config.ts @@ -1,134 +1,135 @@ + const subPackages = [ { - root: 'base', - pages: [ - 'pages/button/index', - 'pages/cell/index', - 'pages/configprovider/index', - 'pages/icon/index', - 'pages/image/index', - 'pages/overlay/index', - ], + "root": "base", + "pages": [ + "pages/button/index", + "pages/cell/index", + "pages/configprovider/index", + "pages/icon/index", + "pages/image/index", + "pages/overlay/index" + ] }, { - root: 'layout', - pages: [ - 'pages/divider/index', - 'pages/grid/index', - 'pages/layout/index', - 'pages/safearea/index', - 'pages/space/index', - 'pages/sticky/index', - ], + "root": "layout", + "pages": [ + "pages/divider/index", + "pages/grid/index", + "pages/layout/index", + "pages/safearea/index", + "pages/space/index", + "pages/sticky/index" + ] }, { - root: 'nav', - pages: [ - 'pages/backtop/index', - 'pages/elevator/index', - 'pages/fixednav/index', - 'pages/navbar/index', - 'pages/sidenavbar/index', - 'pages/tabbar/index', - 'pages/tabs/index', - ], + "root": "nav", + "pages": [ + "pages/backtop/index", + "pages/elevator/index", + "pages/fixednav/index", + "pages/navbar/index", + "pages/sidenavbar/index", + "pages/tabbar/index", + "pages/tabs/index" + ] }, { - root: 'dentry', - pages: [ - 'pages/address/index', - 'pages/calendar/index', - 'pages/calendarcard/index', - 'pages/cascader/index', - 'pages/checkbox/index', - 'pages/datepicker/index', - 'pages/form/index', - 'pages/input/index', - 'pages/inputnumber/index', - ], + "root": "dentry", + "pages": [ + "pages/address/index", + "pages/calendar/index", + "pages/calendarcard/index", + "pages/cascader/index", + "pages/checkbox/index", + "pages/datepicker/index", + "pages/form/index", + "pages/input/index", + "pages/inputnumber/index" + ] }, { - root: 'dentry1', - pages: [ - 'pages/menu/index', - 'pages/numberkeyboard/index', - 'pages/picker/index', - 'pages/radio/index', - 'pages/range/index', - 'pages/rate/index', - 'pages/searchbar/index', - 'pages/shortpassword/index', - 'pages/signature/index', - 'pages/switch/index', - 'pages/textarea/index', - 'pages/uploader/index', - ], + "root": "dentry1", + "pages": [ + "pages/menu/index", + "pages/numberkeyboard/index", + "pages/picker/index", + "pages/radio/index", + "pages/range/index", + "pages/rate/index", + "pages/searchbar/index", + "pages/shortpassword/index", + "pages/signature/index", + "pages/switch/index", + "pages/textarea/index", + "pages/uploader/index" + ] }, { - root: 'feedback', - pages: [ - 'pages/actionsheet/index', - 'pages/badge/index', - 'pages/dialog/index', - 'pages/drag/index', - 'pages/empty/index', - 'pages/infiniteloading/index', - 'pages/loading/index', - 'pages/noticebar/index', - 'pages/notify/index', - 'pages/popover/index', - 'pages/popup/index', - 'pages/pulltorefresh/index', - 'pages/skeleton/index', - 'pages/swipe/index', - 'pages/toast/index', - 'pages/resultpage/index', - ], + "root": "feedback", + "pages": [ + "pages/actionsheet/index", + "pages/badge/index", + "pages/dialog/index", + "pages/drag/index", + "pages/empty/index", + "pages/infiniteloading/index", + "pages/loading/index", + "pages/noticebar/index", + "pages/notify/index", + "pages/popover/index", + "pages/popup/index", + "pages/pulltorefresh/index", + "pages/resultpage/index", + "pages/skeleton/index", + "pages/swipe/index", + "pages/toast/index" + ] }, { - root: 'exhibition', - pages: [ - 'pages/animate/index', - 'pages/animatingnumbers/index', - 'pages/avatar/index', - 'pages/circleprogress/index', - 'pages/collapse/index', - 'pages/countdown/index', - 'pages/ellipsis/index', - 'pages/imagepreview/index', - 'pages/indicator/index', - 'pages/pagination/index', - 'pages/price/index', - 'pages/progress/index', - 'pages/steps/index', - 'pages/swiper/index', - 'pages/table/index', - 'pages/tag/index', - 'pages/tour/index', - 'pages/video/index', - 'pages/virtuallist/index', - ], + "root": "exhibition", + "pages": [ + "pages/animate/index", + "pages/animatingnumbers/index", + "pages/avatar/index", + "pages/circleprogress/index", + "pages/collapse/index", + "pages/countdown/index", + "pages/ellipsis/index", + "pages/imagepreview/index", + "pages/indicator/index", + "pages/pagination/index", + "pages/price/index", + "pages/progress/index", + "pages/steps/index", + "pages/swiper/index", + "pages/table/index", + "pages/tag/index", + "pages/tour/index", + "pages/video/index", + "pages/virtuallist/index" + ] }, { - root: 'business', - pages: [ - 'pages/avatarcropper/index', - 'pages/barrage/index', - 'pages/card/index', - 'pages/timeselect/index', - 'pages/trendarrow/index', - 'pages/watermark/index', - ], - }, -] + "root": "business", + "pages": [ + "pages/avatarcropper/index", + "pages/barrage/index", + "pages/card/index", + "pages/timeselect/index", + "pages/trendarrow/index", + "pages/watermark/index" + ] + } +]; -export default defineAppConfig({ +export default defineAppConfig ({ pages: ['pages/index/index'], subPackages, window: { backgroundTextStyle: 'light', navigationBarBackgroundColor: '#fff', navigationBarTitleText: 'NutUI-React', - navigationBarTextStyle: 'black', - }, -}) + 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 dff7011862..5de7de9305 100644 --- a/src/config.json +++ b/src/config.json @@ -492,7 +492,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)} )