From d9ae0aa7430e7f606336f6b71b94b96b2d24bcce Mon Sep 17 00:00:00 2001 From: liyixin5 Date: Tue, 11 Jun 2024 22:16:07 +0800 Subject: [PATCH 01/11] =?UTF-8?q?feat(range):=20=E8=B0=83=E6=95=B4?= =?UTF-8?q?=E7=B1=BB=E5=90=8D?= 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/dentry1/pages/range/index.config.ts | 2 +- .../src/dentry1/pages/range/index.tsx | 3 +- src/packages/range/demo.taro.tsx | 36 +- src/packages/range/demos/taro/demo1.tsx | 11 +- src/packages/range/demos/taro/demo11.tsx | 34 +- src/packages/range/demos/taro/demo12.tsx | 10 +- src/packages/range/demos/taro/demo13.tsx | 11 +- src/packages/range/demos/taro/demo3.tsx | 11 +- src/packages/range/demos/taro/demo4.tsx | 11 +- src/packages/range/demos/taro/demo5.tsx | 11 +- src/packages/range/demos/taro/demo6.tsx | 11 +- src/packages/range/demos/taro/demo7.tsx | 11 +- src/packages/range/demos/taro/demo8.tsx | 11 +- src/packages/range/range.harmony.css | 178 ++++---- src/packages/range/range.scss | 413 +++++++++--------- src/packages/range/range.taro.tsx | 162 +++++-- src/packages/range/range.tsx | 76 +++- 19 files changed, 688 insertions(+), 563 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..6a4866016b 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","range"]; \ 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/dentry1/pages/range/index.config.ts b/packages/nutui-taro-demo-rn/src/dentry1/pages/range/index.config.ts index 6cdf97238b..780d4febe6 100644 --- a/packages/nutui-taro-demo-rn/src/dentry1/pages/range/index.config.ts +++ b/packages/nutui-taro-demo-rn/src/dentry1/pages/range/index.config.ts @@ -1,3 +1,3 @@ export default { - navigationBarTitleText: 'Range', + navigationBarTitleText: 'Range' } \ No newline at end of file diff --git a/packages/nutui-taro-demo-rn/src/dentry1/pages/range/index.tsx b/packages/nutui-taro-demo-rn/src/dentry1/pages/range/index.tsx index 039e05e8ec..c90590d54f 100644 --- a/packages/nutui-taro-demo-rn/src/dentry1/pages/range/index.tsx +++ b/packages/nutui-taro-demo-rn/src/dentry1/pages/range/index.tsx @@ -1 +1,2 @@ -export default <>button; \ No newline at end of file +import Demo from '@/packages/range/demo.taro'; +export default Demo; \ No newline at end of file diff --git a/src/packages/range/demo.taro.tsx b/src/packages/range/demo.taro.tsx index 29608583f1..6c60809b96 100644 --- a/src/packages/range/demo.taro.tsx +++ b/src/packages/range/demo.taro.tsx @@ -1,6 +1,6 @@ import React from 'react' import Taro from '@tarojs/taro' -import { ScrollView, View } from '@tarojs/components' +import { ScrollView, View, Text } from '@tarojs/components' import { useTranslate } from '@/sites/assets/locale/taro' import Header from '@/sites/components/header' import Demo1 from './demos/taro/demo1' @@ -12,7 +12,7 @@ import Demo6 from './demos/taro/demo6' import Demo7 from './demos/taro/demo7' import Demo8 from './demos/taro/demo8' import Demo9 from './demos/taro/demo9' -import Demo10 from './demos/taro/demo10' +// import Demo10 from './demos/taro/demo10' import Demo11 from './demos/taro/demo11' import Demo12 from './demos/taro/demo12' import Demo13 from './demos/taro/demo13' @@ -52,37 +52,37 @@ const RangeDemo = () => { }) return ( - <> +
- {translated.title} + {translated.title} - {translated.controlled} + {translated.controlled} - {translated.title11} + {translated.title11} - {translated.title1} + {translated.title1} - {translated.title2} + {translated.title2} - {translated.title3} + {translated.title3} - {translated.title4} + {translated.title4} - {translated.title5} + {translated.title5} - {translated.title6} + {translated.title6} - {translated.title7} - - {translated.title8} + {/* {translated.title7} + */} + {translated.title8} - {translated.title9} + {translated.title9} - {translated.title10} + {translated.title10} - + ) } diff --git a/src/packages/range/demos/taro/demo1.tsx b/src/packages/range/demos/taro/demo1.tsx index f926c615d7..135c9a8b87 100644 --- a/src/packages/range/demos/taro/demo1.tsx +++ b/src/packages/range/demos/taro/demo1.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react' -import { Range, Cell, Toast } from '@nutui/nutui-react-taro' +import { View } from '@tarojs/components' +import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro' const Demo1 = () => { const cellStyle = { @@ -12,7 +13,7 @@ const Demo1 = () => { setShow(true) } return ( - <> + showToast(`${val}`)} /> @@ -26,15 +27,15 @@ const Demo1 = () => { onEnd={(val) => showToast(`${val}`)} /> - { setShow(false) }} - /> - + /> */} + ) } export default Demo1 diff --git a/src/packages/range/demos/taro/demo11.tsx b/src/packages/range/demos/taro/demo11.tsx index 5a4bf2669a..010e373451 100644 --- a/src/packages/range/demos/taro/demo11.tsx +++ b/src/packages/range/demos/taro/demo11.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react' -import { View } from '@tarojs/components' -import { Range, Cell, Toast } from '@nutui/nutui-react-taro' +import { pxTransform } from '@tarojs/taro' +import { View, Text } from '@tarojs/components' +import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro' const Demo11 = () => { const [value, setValue] = useState(60) @@ -14,38 +15,45 @@ const Demo11 = () => { setShow(true) } return ( - <> + - {value} + + {value} + } onChange={(val: any) => setValue(val)} onEnd={(val) => showToast(`${val}`)} /> - { setShow(false) }} - /> - + /> */} + ) } export default Demo11 diff --git a/src/packages/range/demos/taro/demo12.tsx b/src/packages/range/demos/taro/demo12.tsx index 4bb7c4ab08..9fb25f7b08 100644 --- a/src/packages/range/demos/taro/demo12.tsx +++ b/src/packages/range/demos/taro/demo12.tsx @@ -1,6 +1,6 @@ import React, { 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' const Demo12 = () => { const verticalStyle = { @@ -14,7 +14,7 @@ const Demo12 = () => { setShow(true) } return ( - <> + { /> - { setShow(false) }} - /> - + /> */} + ) } export default Demo12 diff --git a/src/packages/range/demos/taro/demo13.tsx b/src/packages/range/demos/taro/demo13.tsx index 0f852ee94f..9519ff0ad0 100644 --- a/src/packages/range/demos/taro/demo13.tsx +++ b/src/packages/range/demos/taro/demo13.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react' -import { Range, Cell, Toast } from '@nutui/nutui-react-taro' +import { View } from '@tarojs/components' +import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro' const Demo13 = () => { const [marks] = useState({ @@ -24,7 +25,7 @@ const Demo13 = () => { setShow(true) } return ( - <> + { onEnd={(val) => showToast(`${val}`)} /> - { setShow(false) }} - /> - + /> */} + ) } export default Demo13 diff --git a/src/packages/range/demos/taro/demo3.tsx b/src/packages/range/demos/taro/demo3.tsx index e693325781..e8669e421b 100644 --- a/src/packages/range/demos/taro/demo3.tsx +++ b/src/packages/range/demos/taro/demo3.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react' -import { Range, Cell, Toast } from '@nutui/nutui-react-taro' +import { View } from '@tarojs/components' +import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro' const Demo3 = () => { const cellStyle = { @@ -12,7 +13,7 @@ const Demo3 = () => { setShow(true) } return ( - <> + { onEnd={(val) => showToast(`${val}`)} /> - { setShow(false) }} - /> - + /> */} + ) } export default Demo3 diff --git a/src/packages/range/demos/taro/demo4.tsx b/src/packages/range/demos/taro/demo4.tsx index 3a76b2e934..3610480676 100644 --- a/src/packages/range/demos/taro/demo4.tsx +++ b/src/packages/range/demos/taro/demo4.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react' -import { Range, Cell, Toast } from '@nutui/nutui-react-taro' +import { View } from '@tarojs/components' +import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro' const Demo4 = () => { const cellStyle = { @@ -12,7 +13,7 @@ const Demo4 = () => { setShow(true) } return ( - <> + { onEnd={(val) => showToast(`${val}`)} /> - { setShow(false) }} - /> - + /> */} + ) } export default Demo4 diff --git a/src/packages/range/demos/taro/demo5.tsx b/src/packages/range/demos/taro/demo5.tsx index c8c2d62920..0e60b1aff0 100644 --- a/src/packages/range/demos/taro/demo5.tsx +++ b/src/packages/range/demos/taro/demo5.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react' -import { Range, Cell, Toast } from '@nutui/nutui-react-taro' +import { View } from '@tarojs/components' +import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro' const Demo5 = () => { const cellStyle = { @@ -12,7 +13,7 @@ const Demo5 = () => { setShow(true) } return ( - <> + { onEnd={(val) => showToast(`${val}`)} /> - { setShow(false) }} - /> - + /> */} + ) } export default Demo5 diff --git a/src/packages/range/demos/taro/demo6.tsx b/src/packages/range/demos/taro/demo6.tsx index d27cd52b36..095ba2a366 100644 --- a/src/packages/range/demos/taro/demo6.tsx +++ b/src/packages/range/demos/taro/demo6.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react' -import { Range, Cell, Toast } from '@nutui/nutui-react-taro' +import { View } from '@tarojs/components' +import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro' const Demo6 = () => { const cellStyle = { @@ -12,7 +13,7 @@ const Demo6 = () => { setShow(true) } return ( - <> + { onEnd={(val) => showToast(`${val}`)} /> - { setShow(false) }} - /> - + /> */} + ) } export default Demo6 diff --git a/src/packages/range/demos/taro/demo7.tsx b/src/packages/range/demos/taro/demo7.tsx index eb5de5905d..ab72c6de18 100644 --- a/src/packages/range/demos/taro/demo7.tsx +++ b/src/packages/range/demos/taro/demo7.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react' -import { Range, Cell, Toast } from '@nutui/nutui-react-taro' +import { View } from '@tarojs/components' +import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro' const Demo7 = () => { const cellStyle = { @@ -12,7 +13,7 @@ const Demo7 = () => { setShow(true) } return ( - <> + { onEnd={(val) => showToast(`${val}`)} /> - { setShow(false) }} - /> - + /> */} + ) } export default Demo7 diff --git a/src/packages/range/demos/taro/demo8.tsx b/src/packages/range/demos/taro/demo8.tsx index 69fdf767d6..b968ee3d0c 100644 --- a/src/packages/range/demos/taro/demo8.tsx +++ b/src/packages/range/demos/taro/demo8.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react' -import { Range, Cell, Toast } from '@nutui/nutui-react-taro' +import { View } from '@tarojs/components' +import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro' const Demo8 = () => { const cellStyle = { @@ -12,7 +13,7 @@ const Demo8 = () => { setShow(true) } return ( - <> + { onEnd={(val) => showToast(`${val}`)} /> - { setShow(false) }} - /> - + /> */} + ) } export default Demo8 diff --git a/src/packages/range/range.harmony.css b/src/packages/range/range.harmony.css index d82abcd79e..5e4ad2eec7 100644 --- a/src/packages/range/range.harmony.css +++ b/src/packages/range/range.harmony.css @@ -1,94 +1,100 @@ .nut-range-container { display: flex; + flex-direction: row; position: relative; width: 100%; height: 4px; align-items: center; } -.nut-range-container .min { - font-size: 12px; - color: #1A1A1A; - user-select: none; +.nut-range-container-native { + height: auto; } -.nut-range-container .max { - font-size: 12px; - color: #1A1A1A; - user-select: none; -} -.nut-range-container .nut-range { + +.nut-range { display: block; position: relative; width: 100%; height: 4px; margin: 0 15px; - background-color: #FFEBF1; + background-color: #ffebf1; border-radius: 2px; cursor: pointer; } -.nut-range-container .nut-range::before { +.nut-range::before { position: absolute; inset-block: -8px; inset-inline: 0; content: ""; } -.nut-range-container .nut-range-bar { +.nut-range-min { + font-size: 12px; + color: #1a1a1a; + user-select: none; +} +.nut-range-max { + font-size: 12px; + color: #1a1a1a; + user-select: none; +} +.nut-range-bar { display: block; position: relative; width: 100%; height: 100%; - background: #FF0F23; - border-radius: inherit; + background: #ff0f23; + border-radius: 2px; transition: all 0.2s; } -.nut-range-container .nut-range-button { +.nut-range-button { display: block; width: 24px; height: 24px; background: #ffffff; border-radius: 50%; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15); - border: 1px solid #FF0F23; + border: 1px solid #ff0f23; outline: none; } -.nut-range-container .nut-range-button-wrapper, .nut-range-container .nut-range-button-wrapper-right { +.nut-range-button-wrapper, .nut-range-button-wrapper-right { touch-action: none; position: absolute; top: 50%; right: 0; - transform: translate3d(50%, -50%, 0); cursor: grab; outline: none; } -.nut-range-container .nut-range-button-wrapper-left { +.nut-range-button-wrapper-left { position: absolute; top: 50%; left: 0; - transform: translate3d(-50%, -50%, 0); cursor: grab; outline: none; touch-action: none; } -.nut-range-container .nut-range-button .number { +.nut-range-button-number { width: 100%; height: 100%; + line-height: 12px; + padding: 6px 0; display: flex; align-items: center; justify-content: center; user-select: none; font-size: 12px; - color: #1A1A1A; - transform: translate3d(0, -100%, 0); + color: #1a1a1a; + text-align: center; + vertical-align: center; } -.nut-range-container .nut-range-disabled { +.nut-range-disabled { cursor: not-allowed; opacity: 0.54; } -.nut-range-container .nut-range-disabled .nut-range-button-wrapper, -.nut-range-container .nut-range-disabled .nut-range-button-wrapper-left, -.nut-range-container .nut-range-disabled .nut-range-button-wrapper-right { +.nut-range-disabled .nut-range-button-wrapper, +.nut-range-disabled .nut-range-button-wrapper-left, +.nut-range-disabled .nut-range-button-wrapper-right { cursor: not-allowed; } -.nut-range-container .nut-range-mark { +.nut-range-mark { position: absolute; width: 100%; overflow: visible; @@ -96,7 +102,7 @@ font-size: 12px; padding-top: 14px; } -.nut-range-container .nut-range-mark-text { +.nut-range-mark-text { position: absolute; display: inline-block; line-height: 16px; @@ -106,48 +112,43 @@ user-select: none; transform: translateX(-10px); } -.nut-range-container .nut-range-tick { +.nut-range-tick { position: absolute; top: -20px; width: 11px; height: 11px; left: 0px; - border-radius: 50%; - background: #FFEBF1; + border-radius: 6px; + background: #ffebf1; } -.nut-range-container .nut-range-tick.active { - background: #FF0F23; +.nut-range-tick-active { + background: #ff0f23; } -.nut-range-container-vertical { + +.nut-range-vertical-container { height: 100%; flex-direction: column; padding: 0px 15px; } -.nut-range-container-vertical .nut-range { + +.nut-range-vertical { width: 4px; height: 100%; + margin: 15px 0px; } -.nut-range-container-vertical .nut-range-button-wrapper, .nut-range-container-vertical .nut-range-button-wrapper-right { +.nut-range-vertical-button-wrapper, .nut-range-vertical-button-wrapper-right { position: absolute; top: initial; bottom: 0px; left: 50%; right: initial; - transform: translate3d(-50%, 50%, 0); } -.nut-range-container-vertical .nut-range-button-wrapper-left { +.nut-range-vertical-button-wrapper-left { top: 0px; left: 50%; right: initial; - transform: translate3d(-50%, -50%, 0); -} -.nut-range-container-vertical .nut-range .number { - transform: translate3d(100%, 0, 0); -} -.nut-range-container-vertical .nut-range-vertical { - margin: 15px 0px; } -.nut-range-container-vertical .nut-range-mark { +.nut-range-vertical-mark { position: absolute; width: 100%; right: 50%; @@ -158,7 +159,7 @@ width: 36px; padding: 0px; } -.nut-range-container-vertical .nut-range-mark-text { +.nut-range-vertical-mark-text { width: 20px; position: absolute; display: inline-block; @@ -169,72 +170,63 @@ user-select: none; transform: translateY(-11px); } -.nut-range-container-vertical .nut-range-tick { +.nut-range-vertical-tick { position: absolute; top: 0px; left: 30px; width: 11px; height: 11px; border-radius: 50%; - background: #FFEBF1; + background: #ffebf1; } -.nut-range-container-vertical .nut-range-tick.active { - background: #FF0F23; +.nut-range-vertical-tick-active { + background: #ff0f23; } -[dir=rtl] .nut-range-container-vertical .nut-range-button-wrapper, [dir=rtl] .nut-range-container-vertical .nut-range-button-wrapper-right, -.nut-rtl .nut-range-container-vertical .nut-range-button-wrapper, -.nut-rtl .nut-range-container-vertical .nut-range-button-wrapper-right { - right: 50%; +[dir=rtl] .nut-range-button-wrapper, [dir=rtl] .nut-range-button-wrapper-right, +.rtl-nut-range-button-wrapper, +.rtl-nut-range-button-wrapper-right { + left: 0; + right: initial; +} +[dir=rtl] .nut-range-button-wrapper-left, +.rtl-nut-range-button-wrapper-left { + right: 0; left: initial; - transform: translate3d(50%, 50%, 0); } -[dir=rtl] .nut-range-container-vertical .nut-range-button-wrapper-left, -.nut-rtl .nut-range-container-vertical .nut-range-button-wrapper-left { +[dir=rtl] .nut-range-tick, +.rtl-nut-range-tick { + right: 0px; + left: initial; +} +[dir=rtl] .nut-range-mark-text, +.rtl-nut-range-mark-text { + transform: translateX(10px); +} +[dir=rtl] .nut-range-vertical-button-wrapper, [dir=rtl] .nut-range-vertical-button-wrapper-right, +.rtl-nut-range-vertical-button-wrapper, +.rtl-nut-range-vertical-button-wrapper-right { right: 50%; left: initial; - transform: translate3d(50%, -50%, 0); } -[dir=rtl] .nut-range-container-vertical .nut-range .number, -.nut-rtl .nut-range-container-vertical .nut-range .number { - transform: translate3d(-100%, 0, 0); +[dir=rtl] .nut-range-vertical-button-wrapper-left, +.rtl-nut-range-vertical-button-wrapper-left { + right: 50%; + left: initial; } -[dir=rtl] .nut-range-container-vertical .nut-range-mark, -.nut-rtl .nut-range-container-vertical .nut-range-mark { +[dir=rtl] .nut-range-vertical-mark, +.rtl-nut-range-vertical-mark { right: auto; left: 50%; } -[dir=rtl] .nut-range-container-vertical .nut-range-tick, -.nut-rtl .nut-range-container-vertical .nut-range-tick { +[dir=rtl] .nut-range-vertical-tick, +.rtl-nut-range-vertical-tick { left: auto; right: 30px; margin-left: 0; margin-right: 0px; } -[dir=rtl] .nut-range-container-vertical .nut-range-mark-text, -.nut-rtl .nut-range-container-vertical .nut-range-mark-text { +[dir=rtl] .nut-range-vertical-mark-text, +.rtl-nut-range-vertical-mark-text { transform: translateY(-11px); -} - -[dir=rtl] .nut-range-button-wrapper, [dir=rtl] .nut-range-button-wrapper-right, -.nut-rtl .nut-range-button-wrapper, -.nut-rtl .nut-range-button-wrapper-right { - left: 0; - right: initial; - transform: translate3d(-50%, -50%, 0); -} -[dir=rtl] .nut-range-button-wrapper-left, -.nut-rtl .nut-range-button-wrapper-left { - right: 0; - left: initial; - transform: translate3d(50%, -50%, 0); -} -[dir=rtl] .nut-range-tick, -.nut-rtl .nut-range-tick { - right: 0px; - left: initial; -} -[dir=rtl] .nut-range-mark-text, -.nut-rtl .nut-range-mark-text { - transform: translateX(10px); } \ No newline at end of file diff --git a/src/packages/range/range.scss b/src/packages/range/range.scss index a338087494..cc1871abaf 100644 --- a/src/packages/range/range.scss +++ b/src/packages/range/range.scss @@ -1,266 +1,230 @@ .nut-range-container { display: flex; + flex-direction: row; position: relative; width: 100%; height: $range-height; align-items: center; - .min, - .max { + &-native { + height: auto; + } +} + +.nut-range { + display: block; + position: relative; + width: 100%; + height: $range-height; + margin: 0 $range-margin; + background-color: $range-inactive-color; + border-radius: 2px; + cursor: pointer; + + &::before { + position: absolute; + inset-block: -8px; + inset-inline: 0; + content: ''; + } + + &-min, + &-max { font-size: $font-size-small; color: $range-color; user-select: none; } - .nut-range { + &-bar { display: block; position: relative; width: 100%; - height: $range-height; - margin: 0 $range-margin; - background-color: $range-inactive-color; + height: 100%; + background: $range-active-color; border-radius: 2px; - cursor: pointer; - - &::before { - position: absolute; - inset-block: -8px; - inset-inline: 0; - content: ''; - } + transition: all 0.2s; + } - &-bar { - display: block; - position: relative; - width: 100%; - height: 100%; - background: $range-active-color; - border-radius: inherit; - transition: all 0.2s; - } + &-button { + display: block; + width: $range-button-width; + height: $range-button-height; + background: $range-button-background; + border-radius: 50%; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15); + border: $range-button-border; + outline: none; - &-button { - display: block; - width: $range-button-width; - height: $range-button-height; - background: $range-button-background; - border-radius: 50%; - box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15); - border: $range-button-border; + &-wrapper, + &-wrapper-right { + touch-action: none; + position: absolute; + top: 50%; + right: 0; + // transform: translate3d(50%, -50%, 0); + cursor: grab; outline: none; - - &-wrapper, - &-wrapper-right { - touch-action: none; - position: absolute; - top: 50%; - right: 0; - transform: translate3d(50%, -50%, 0); - cursor: grab; - outline: none; - } - - &-wrapper-left { - position: absolute; - top: 50%; - left: 0; - transform: translate3d(-50%, -50%, 0); - cursor: grab; - outline: none; - touch-action: none; - } - - .number { - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - user-select: none; - font-size: $font-size-small; - color: $range-color; - transform: translate3d(0, -100%, 0); - } - } - - &-disabled { - cursor: not-allowed; - opacity: 0.54; - - .nut-range-button-wrapper, - .nut-range-button-wrapper-left, - .nut-range-button-wrapper-right { - cursor: not-allowed; - } } - &-mark { + &-wrapper-left { position: absolute; - width: 100%; - overflow: visible; top: 50%; - font-size: 12px; - padding-top: 14px; + left: 0; + // transform: translate3d(-50%, -50%, 0); + cursor: grab; + outline: none; + touch-action: none; } - &-mark-text { - position: absolute; - display: inline-block; - line-height: 16px; - color: #999; - text-align: center; - word-break: keep-all; + &-number { + width: 100%; + height: 100%; + line-height: 12px; + padding: 6px 0; + display: flex; + align-items: center; + justify-content: center; user-select: none; - transform: translateX(-10px); + font-size: $font-size-small; + color: $range-color; + text-align: center; + vertical-align: center; + // transform: translate3d(0, -100%, 0); } + } - &-tick { - position: absolute; - top: -20px; - width: 11px; - height: 11px; - left: 0px; - border-radius: 50%; - background: $range-inactive-color; - - &.active { - background: $range-active-color; - } + &-disabled { + cursor: not-allowed; + opacity: 0.54; + + .nut-range-button-wrapper, + .nut-range-button-wrapper-left, + .nut-range-button-wrapper-right { + cursor: not-allowed; } } - &-vertical { - height: 100%; - flex-direction: column; - padding: 0px 15px; + &-mark { + position: absolute; + width: 100%; + overflow: visible; + top: 50%; + font-size: 12px; + padding-top: 14px; + } - .nut-range { - width: $range-height; - height: 100%; + &-mark-text { + position: absolute; + display: inline-block; + line-height: 16px; + color: #999; + text-align: center; + word-break: keep-all; + user-select: none; + transform: translateX(-10px); + } - &-button { - &-wrapper, - &-wrapper-right { - position: absolute; - top: initial; - bottom: 0px; - left: 50%; - right: initial; - transform: translate3d(-50%, 50%, 0); - } - - &-wrapper-left { - top: 0px; - left: 50%; - right: initial; - transform: translate3d(-50%, -50%, 0); - } - } + &-tick { + position: absolute; + top: -20px; + width: 11px; + height: 11px; + left: 0px; + border-radius: 6px; + background: $range-inactive-color; + + &-active { + background: $range-active-color; + } + } +} - .number { - transform: translate3d(100%, 0, 0); - } +.nut-range-vertical-container { + height: 100%; + flex-direction: column; + padding: 0px 15px; +} - &-vertical { - margin: $range-margin 0px; - } +.nut-range-vertical { + width: $range-height; + height: 100%; + margin: $range-margin 0px; - &-mark { - position: absolute; - width: 100%; - right: 50%; - overflow: visible; - font-size: 12px; - height: 100%; - top: initial; - width: 36px; - padding: 0px; - } + &-button { + &-wrapper, + &-wrapper-right { + position: absolute; + top: initial; + bottom: 0px; + left: 50%; + right: initial; + // transform: translate3d(-50%, 50%, 0); + } - &-mark-text { - width: 20px; - position: absolute; - display: inline-block; - line-height: 16px; - color: #999; - text-align: center; - word-break: keep-all; - user-select: none; - transform: translateY(-11px); - } + &-wrapper-left { + top: 0px; + left: 50%; + right: initial; + // transform: translate3d(-50%, -50%, 0); + } - &-tick { - position: absolute; - top: 0px; - left: 30px; - width: 11px; - height: 11px; - border-radius: 50%; - background: $range-inactive-color; - - &.active { - background: $range-active-color; - } - } + &-number { + // transform: translate3d(100%, 0, 0); } } -} - -[dir='rtl'] .nut-range-container, -.nut-rtl .nut-range-container { - &-vertical { - .nut-range { - &-button { - &-wrapper, - &-wrapper-right { - right: 50%; - left: initial; - transform: translate3d(50%, 50%, 0); - } - - &-wrapper-left { - right: 50%; - left: initial; - transform: translate3d(50%, -50%, 0); - } - } - - .number { - transform: translate3d(-100%, 0, 0); - } - &-mark { - right: auto; - left: 50%; - } + &-mark { + position: absolute; + width: 100%; + right: 50%; + overflow: visible; + font-size: 12px; + height: 100%; + top: initial; + width: 36px; + padding: 0px; + } - &-tick { - left: auto; - right: 30px; - margin-left: 0; - margin-right: -0px; - } + &-mark-text { + width: 20px; + position: absolute; + display: inline-block; + line-height: 16px; + color: #999; + text-align: center; + word-break: keep-all; + user-select: none; + transform: translateY(-11px); + } - &-mark-text { - transform: translateY(-11px); - } + &-tick { + position: absolute; + top: 0px; + left: 30px; + width: 11px; + height: 11px; + border-radius: 50%; + background: $range-inactive-color; + + &-active { + background: $range-active-color; } } } [dir='rtl'] .nut-range, -.nut-rtl .nut-range { +.rtl-nut-range { &-button { &-wrapper, &-wrapper-right { left: 0; right: initial; - transform: translate3d(-50%, -50%, 0); + // transform: translate3d(-50%, -50%, 0); } &-wrapper-left { right: 0; left: initial; - transform: translate3d(50%, -50%, 0); + // transform: translate3d(50%, -50%, 0); } } @@ -272,4 +236,41 @@ &-mark-text { transform: translateX(10px); } + + &-vertical { + &-button { + &-wrapper, + &-wrapper-right { + right: 50%; + left: initial; + // transform: translate3d(50%, 50%, 0); + } + + &-wrapper-left { + right: 50%; + left: initial; + // transform: translate3d(50%, -50%, 0); + } + + &-number { + // transform: translate3d(-100%, 0, 0); + } + } + + &-mark { + right: auto; + left: 50%; + } + + &-tick { + left: auto; + right: 30px; + margin-left: 0; + margin-right: -0px; + } + + &-mark-text { + transform: translateY(-11px); + } + } } diff --git a/src/packages/range/range.taro.tsx b/src/packages/range/range.taro.tsx index f5186f4ad0..25416a9923 100644 --- a/src/packages/range/range.taro.tsx +++ b/src/packages/range/range.taro.tsx @@ -6,8 +6,9 @@ import React, { useCallback, ReactNode, } from 'react' +import Taro, { pxTransform } from '@tarojs/taro' import classNames from 'classnames' -import { View } from '@tarojs/components' +import { View, Text } from '@tarojs/components' import { useTouch } from '@/utils/use-touch' import { BasicComponent, ComponentDefaults } from '@/utils/typings' import { usePropsValue } from '@/utils/use-props-value' @@ -44,6 +45,9 @@ const defaultProps = { marks: {}, } as RangeProps +const isRn = Taro.getEnv() === Taro.ENV_TYPE.RN +const isNative = isRn || Taro.getEnv() === Taro.ENV_TYPE.HARMONY + export const Range: FunctionComponent< Partial & Omit< @@ -73,6 +77,8 @@ export const Range: FunctionComponent< } = { ...defaultProps, ...props } const classPrefix = 'nut-range' + const verticalClassPrefix = `${classPrefix}-vertical` + const rtlClassPrefix = `rtl-${vertical ? verticalClassPrefix : classPrefix}` const [buttonIndex, setButtonIndex] = useState(0) const [dragStatus, setDragStatus] = useState('start' || 'draging' || '') const touch = useTouch() @@ -124,13 +130,15 @@ export const Range: FunctionComponent< const classes = classNames(classPrefix, { [`${classPrefix}-disabled`]: disabled, - [`${classPrefix}-vertical`]: vertical, + [verticalClassPrefix]: vertical, + [`${classPrefix}-native`]: isNative, }) const containerClasses = classNames( `${classPrefix}-container`, { - [`${classPrefix}-container-vertical`]: vertical, + [`${verticalClassPrefix}-container`]: vertical, + [`${classPrefix}-container-native`]: isNative, }, className ) @@ -138,6 +146,7 @@ export const Range: FunctionComponent< const markClassName = useCallback( (mark: any) => { const classPrefix = 'nut-range-mark' + const verticalClassPrefix = 'nut-range-vertical-mark' let lowerBound = min let upperBound = max if (range && Array.isArray(current)) { @@ -147,10 +156,21 @@ export const Range: FunctionComponent< upperBound = current as number } const isActive = mark <= upperBound && mark >= lowerBound - return [ + const classNames = [ `${classPrefix}-text`, `${isActive ? `${classPrefix}-text-active` : ''}`, - ].join(' ') + ] + + if (vertical) { + classNames.push(`${verticalClassPrefix}-text`) + isActive && classNames.push(`${verticalClassPrefix}-text-active`) + } + + if (rtl) { + classNames.push(`${rtlClassPrefix}-mark-text`) + } + + return classNames.join(' ') }, [range, current, min, max] ) @@ -332,60 +352,129 @@ export const Range: FunctionComponent< } const renderButton = (index?: number) => { + const buttonNumberTransform = vertical + ? 'translate3d(100%, 0, 0)' + : 'translate3d(0, -100%, 0)' + const buttonNumberTransformRn = [ + { translateX: pxTransform(vertical ? 26 : 0) }, + { translateY: pxTransform(vertical ? 0 : -26) }, + ] + return ( - <> + {button || ( -
+ {currentDescription !== null && ( -
+ {currentDescription ? currentDescription(curValue(index)) : curValue(index)} -
+ )} -
+ )} - + ) } + const getWrapperTransform = useCallback(() => { + const wrapperTransformRN = [ + { translateX: pxTransform(vertical ? -13 : 13) }, + { translateY: pxTransform(vertical ? 13 : -13) }, + ] + const wrapperTransform = vertical + ? 'transform: translate3d(-50%, 50%, 0)' + : 'transform: translate3d(50%, -50%, 0)' + + return isRn ? wrapperTransformRN : wrapperTransform + }, [vertical]) + return ( -
+ {minDescription !== null && ( -
{minDescription || min}
+ {minDescription || min} )} -
click(e)}> + click(e)}> {marksList.length > 0 && ( -
+ {marksList.map((mark: any) => { return ( - {Array.isArray(marks) ? marksRef.current[mark] : marks[mark]} - - + ) })} -
+ )} -
+ {range ? ( [0, 1].map((item, index) => { + const isLeft = index === 0 + const isRight = index === 1 + + // @TODO 支持变量 + const transform = `translate3d(${isLeft || vertical ? '-' : ''}50%, ${vertical && isRight ? '' : '-'}50%, 0)` + const transformRn = [ + { + translateX: pxTransform(isLeft || vertical ? -13 : 13), + }, + { + translateY: pxTransform(vertical && isRight ? 13 : -13), + }, + ] + return ( -
{ if (typeof index === 'number') { // 实时更新当前拖动的按钮索引 @@ -399,13 +488,20 @@ export const Range: FunctionComponent< onClick={(e) => e.stopPropagation()} > {renderButton(index)} -
+ ) }) ) : ( onTouchStart(e)} onTouchMove={(e) => onTouchMove(e)} onTouchEnd={onTouchEnd} @@ -415,12 +511,12 @@ export const Range: FunctionComponent< {renderButton()} )} -
-
+ + {maxDescription !== null && ( -
{maxDescription || max}
+ {maxDescription || max} )} -
+ ) } diff --git a/src/packages/range/range.tsx b/src/packages/range/range.tsx index 328a2d6dc6..b5d2d2bdc5 100644 --- a/src/packages/range/range.tsx +++ b/src/packages/range/range.tsx @@ -73,6 +73,8 @@ export const Range: FunctionComponent< } = { ...defaultProps, ...props } const classPrefix = 'nut-range' + const verticalClassPrefix = `${classPrefix}-vertical` + const rtlClassPrefix = `rtl-${vertical ? verticalClassPrefix : classPrefix}` const [buttonIndex, setButtonIndex] = useState(0) const [dragStatus, setDragStatus] = useState('start' || 'draging' || '') const touch = useTouch() @@ -124,13 +126,13 @@ export const Range: FunctionComponent< const classes = classNames(classPrefix, { [`${classPrefix}-disabled`]: disabled, - [`${classPrefix}-vertical`]: vertical, + [verticalClassPrefix]: vertical, }) const containerClasses = classNames( `${classPrefix}-container`, { - [`${classPrefix}-container-vertical`]: vertical, + [`${verticalClassPrefix}-container`]: vertical, }, className ) @@ -138,6 +140,7 @@ export const Range: FunctionComponent< const markClassName = useCallback( (mark: any) => { const classPrefix = 'nut-range-mark' + const verticalClassPrefix = 'nut-range-vertical-mark' let lowerBound = min let upperBound = max if (range && Array.isArray(current)) { @@ -147,10 +150,21 @@ export const Range: FunctionComponent< upperBound = current as number } const isActive = mark <= upperBound && mark >= lowerBound - return [ + const classNames = [ `${classPrefix}-text`, `${isActive ? `${classPrefix}-text-active` : ''}`, - ].join(' ') + ] + + if (vertical) { + classNames.push(`${verticalClassPrefix}-text`) + isActive && classNames.push(`${verticalClassPrefix}-text-active`) + } + + if (rtl) { + classNames.push(`${rtlClassPrefix}-mark-text`) + } + + return classNames.join(' ') }, [range, current, min, max] ) @@ -331,9 +345,19 @@ export const Range: FunctionComponent< return ( <> {button || ( -
+
{currentDescription !== null && ( -
+
{currentDescription ? currentDescription(curValue(index)) : curValue(index)} @@ -348,11 +372,16 @@ export const Range: FunctionComponent< return (
{minDescription !== null && ( -
{minDescription || min}
+
{minDescription || min}
)}
click(e)}> {marksList.length > 0 && ( -
+
{marksList.map((mark: any) => { return ( {Array.isArray(marks) ? marksRef.current[mark] : marks[mark]} @@ -372,16 +404,24 @@ export const Range: FunctionComponent<
)} -
+
{range ? ( [0, 1].map((item, index) => { + const isLeft = index === 0 + const isRight = index === 1 return (
{ if (typeof index === 'number') { // 实时更新当前拖动的按钮索引 @@ -400,7 +440,9 @@ export const Range: FunctionComponent< }) ) : (
onTouchStart(e)} onTouchMove={(e) => onTouchMove(e)} onTouchEnd={onTouchEnd} @@ -413,7 +455,7 @@ export const Range: FunctionComponent<
{maxDescription !== null && ( -
{maxDescription || max}
+
{maxDescription || max}
)}
) From f95b676dfccf699dc806431949174571343ad27c Mon Sep 17 00:00:00 2001 From: liyixin5 Date: Wed, 12 Jun 2024 16:03:05 +0800 Subject: [PATCH 02/11] =?UTF-8?q?feat(range):=20=E9=80=82=E9=85=8D=20rn=20?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/range/demos/taro/demo1.tsx | 15 +++- src/packages/range/demos/taro/demo10.tsx | 15 +++- src/packages/range/demos/taro/demo11.tsx | 24 +++++- src/packages/range/demos/taro/demo12.tsx | 25 ++++-- src/packages/range/demos/taro/demo13.tsx | 33 ++++++-- src/packages/range/demos/taro/demo2.tsx | 15 +++- src/packages/range/demos/taro/demo3.tsx | 15 +++- src/packages/range/demos/taro/demo4.tsx | 15 +++- src/packages/range/demos/taro/demo5.tsx | 15 +++- src/packages/range/demos/taro/demo6.tsx | 15 +++- src/packages/range/demos/taro/demo7.tsx | 15 +++- src/packages/range/demos/taro/demo8.tsx | 15 +++- src/packages/range/demos/taro/demo9.tsx | 15 +++- src/packages/range/range.harmony.css | 44 ++++++----- src/packages/range/range.scss | 46 ++++++----- src/packages/range/range.taro.tsx | 98 ++++++++++++++---------- 16 files changed, 298 insertions(+), 122 deletions(-) diff --git a/src/packages/range/demos/taro/demo1.tsx b/src/packages/range/demos/taro/demo1.tsx index 135c9a8b87..633941facd 100644 --- a/src/packages/range/demos/taro/demo1.tsx +++ b/src/packages/range/demos/taro/demo1.tsx @@ -1,11 +1,20 @@ import React, { useState } from 'react' import { View } from '@tarojs/components' import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro' +import { rn } from '@/utils/platform-taro' + +const cellStyle = !rn() + ? { + padding: '40px 18px', + } + : { + paddingTop: 40, + paddingBottom: 40, + paddingLeft: 18, + paddingRight: 18, + } const Demo1 = () => { - const cellStyle = { - padding: '40px 18px', - } const [show, setShow] = useState(false) const [msg, setMsg] = useState('') const showToast = (msg: string) => { diff --git a/src/packages/range/demos/taro/demo10.tsx b/src/packages/range/demos/taro/demo10.tsx index edec554041..5d86439361 100644 --- a/src/packages/range/demos/taro/demo10.tsx +++ b/src/packages/range/demos/taro/demo10.tsx @@ -1,10 +1,19 @@ import React from 'react' import { Range, ConfigProvider, Cell } from '@nutui/nutui-react-taro' +import { rn } from '@/utils/platform-taro' + +const cellStyle = !rn() + ? { + padding: '40px 18px', + } + : { + paddingTop: 40, + paddingBottom: 40, + paddingLeft: 18, + paddingRight: 18, + } const Demo10 = () => { - const cellStyle = { - padding: '40px 18px', - } return ( { const [value, setValue] = useState(60) - const cellStyle = { - padding: '40px 18px', - } const [show, setShow] = useState(false) const [msg, setMsg] = useState('') const showToast = (msg: string) => { @@ -27,6 +44,7 @@ const Demo11 = () => { backgroundColor: 'red', borderRadius: pxTransform(10), justifyContent: 'center', + ...buttonRnStyle, }} > { - const verticalStyle = { - height: '180px', - padding: '10px', - } const [show, setShow] = useState(false) const [msg, setMsg] = useState('') const showToast = (msg: string) => { @@ -16,14 +29,14 @@ const Demo12 = () => { return ( - + showToast(`${val}`)} /> - + { const [marks] = useState({ @@ -11,13 +35,6 @@ const Demo13 = () => { 80: 80, 100: 'End', }) - const cellStyle = { - padding: '40px 18px', - } - const verticalStyle = { - height: '180px', - padding: '10px', - } const [show, setShow] = useState(false) const [msg, setMsg] = useState('') const showToast = (msg: string) => { @@ -51,6 +68,7 @@ const Demo13 = () => { minDescription={null} marks={marks} onEnd={(val) => showToast(`${val}`)} + style={{ flex: 1 }} /> { marks={marks} range onEnd={(val) => showToast(`${val}`)} + style={{ flex: 1 }} /> {/* { const [value, setValue] = useState(40) - const cellStyle = { - padding: '40px 18px', - } return ( setValue(val)} /> diff --git a/src/packages/range/demos/taro/demo3.tsx b/src/packages/range/demos/taro/demo3.tsx index e8669e421b..bc65576e14 100644 --- a/src/packages/range/demos/taro/demo3.tsx +++ b/src/packages/range/demos/taro/demo3.tsx @@ -1,11 +1,20 @@ import React, { useState } from 'react' import { View } from '@tarojs/components' import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro' +import { rn } from '@/utils/platform-taro' + +const cellStyle = !rn() + ? { + padding: '40px 18px', + } + : { + paddingTop: 40, + paddingBottom: 40, + paddingLeft: 18, + paddingRight: 18, + } const Demo3 = () => { - const cellStyle = { - padding: '40px 18px', - } const [show, setShow] = useState(false) const [msg, setMsg] = useState('') const showToast = (msg: string) => { diff --git a/src/packages/range/demos/taro/demo4.tsx b/src/packages/range/demos/taro/demo4.tsx index 3610480676..86efaa3073 100644 --- a/src/packages/range/demos/taro/demo4.tsx +++ b/src/packages/range/demos/taro/demo4.tsx @@ -1,11 +1,20 @@ import React, { useState } from 'react' import { View } from '@tarojs/components' import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro' +import { rn } from '@/utils/platform-taro' + +const cellStyle = !rn() + ? { + padding: '40px 18px', + } + : { + paddingTop: 40, + paddingBottom: 40, + paddingLeft: 18, + paddingRight: 18, + } const Demo4 = () => { - const cellStyle = { - padding: '40px 18px', - } const [show, setShow] = useState(false) const [msg, setMsg] = useState('') const showToast = (msg: string) => { diff --git a/src/packages/range/demos/taro/demo5.tsx b/src/packages/range/demos/taro/demo5.tsx index 0e60b1aff0..b858ba102d 100644 --- a/src/packages/range/demos/taro/demo5.tsx +++ b/src/packages/range/demos/taro/demo5.tsx @@ -1,11 +1,20 @@ import React, { useState } from 'react' import { View } from '@tarojs/components' import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro' +import { rn } from '@/utils/platform-taro' + +const cellStyle = !rn() + ? { + padding: '40px 18px', + } + : { + paddingTop: 40, + paddingBottom: 40, + paddingLeft: 18, + paddingRight: 18, + } const Demo5 = () => { - const cellStyle = { - padding: '40px 18px', - } const [show, setShow] = useState(false) const [msg, setMsg] = useState('') const showToast = (msg: string) => { diff --git a/src/packages/range/demos/taro/demo6.tsx b/src/packages/range/demos/taro/demo6.tsx index 095ba2a366..72d613c0b5 100644 --- a/src/packages/range/demos/taro/demo6.tsx +++ b/src/packages/range/demos/taro/demo6.tsx @@ -1,11 +1,20 @@ import React, { useState } from 'react' import { View } from '@tarojs/components' import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro' +import { rn } from '@/utils/platform-taro' + +const cellStyle = !rn() + ? { + padding: '40px 18px', + } + : { + paddingTop: 40, + paddingBottom: 40, + paddingLeft: 18, + paddingRight: 18, + } const Demo6 = () => { - const cellStyle = { - padding: '40px 18px', - } const [show, setShow] = useState(false) const [msg, setMsg] = useState('') const showToast = (msg: string) => { diff --git a/src/packages/range/demos/taro/demo7.tsx b/src/packages/range/demos/taro/demo7.tsx index ab72c6de18..becb70c636 100644 --- a/src/packages/range/demos/taro/demo7.tsx +++ b/src/packages/range/demos/taro/demo7.tsx @@ -1,11 +1,20 @@ import React, { useState } from 'react' import { View } from '@tarojs/components' import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro' +import { rn } from '@/utils/platform-taro' + +const cellStyle = !rn() + ? { + padding: '40px 18px', + } + : { + paddingTop: 40, + paddingBottom: 40, + paddingLeft: 18, + paddingRight: 18, + } const Demo7 = () => { - const cellStyle = { - padding: '40px 18px', - } const [show, setShow] = useState(false) const [msg, setMsg] = useState('') const showToast = (msg: string) => { diff --git a/src/packages/range/demos/taro/demo8.tsx b/src/packages/range/demos/taro/demo8.tsx index b968ee3d0c..3cff9f810e 100644 --- a/src/packages/range/demos/taro/demo8.tsx +++ b/src/packages/range/demos/taro/demo8.tsx @@ -1,11 +1,20 @@ import React, { useState } from 'react' import { View } from '@tarojs/components' import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro' +import { rn } from '@/utils/platform-taro' + +const cellStyle = !rn() + ? { + padding: '40px 18px', + } + : { + paddingTop: 40, + paddingBottom: 40, + paddingLeft: 18, + paddingRight: 18, + } const Demo8 = () => { - const cellStyle = { - padding: '40px 18px', - } const [show, setShow] = useState(false) const [msg, setMsg] = useState('') const showToast = (msg: string) => { diff --git a/src/packages/range/demos/taro/demo9.tsx b/src/packages/range/demos/taro/demo9.tsx index 69cf9574ce..2506f20baa 100644 --- a/src/packages/range/demos/taro/demo9.tsx +++ b/src/packages/range/demos/taro/demo9.tsx @@ -1,10 +1,19 @@ import React from 'react' import { Range, Cell } from '@nutui/nutui-react-taro' +import { rn } from '@/utils/platform-taro' + +const cellStyle = !rn() + ? { + padding: '40px 18px', + } + : { + paddingTop: 40, + paddingBottom: 40, + paddingLeft: 18, + paddingRight: 18, + } const Demo9 = () => { - const cellStyle = { - padding: '40px 18px', - } return ( diff --git a/src/packages/range/range.harmony.css b/src/packages/range/range.harmony.css index 5e4ad2eec7..565dd52c55 100644 --- a/src/packages/range/range.harmony.css +++ b/src/packages/range/range.harmony.css @@ -5,6 +5,7 @@ width: 100%; height: 4px; align-items: center; + justify-content: space-between; } .nut-range-container-native { height: auto; @@ -13,11 +14,11 @@ .nut-range { display: block; position: relative; - width: 100%; height: 4px; margin: 0 15px; background-color: #ffebf1; border-radius: 2px; + flex: 1; cursor: pointer; } .nut-range::before { @@ -46,7 +47,7 @@ transition: all 0.2s; } .nut-range-button { - display: block; + display: flex; width: 24px; height: 24px; background: #ffffff; @@ -54,6 +55,7 @@ box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15); border: 1px solid #ff0f23; outline: none; + align-items: center; } .nut-range-button-wrapper, .nut-range-button-wrapper-right { touch-action: none; @@ -72,10 +74,10 @@ touch-action: none; } .nut-range-button-number { - width: 100%; + width: 200%; height: 100%; - line-height: 12px; - padding: 6px 0; + line-height: 14px; + padding: 5px 0; display: flex; align-items: center; justify-content: center; @@ -99,18 +101,21 @@ width: 100%; overflow: visible; top: 50%; - font-size: 12px; padding-top: 14px; } -.nut-range-mark-text { +.nut-range-mark-text-wrapper { position: absolute; + top: 14px; display: inline-block; + transform: translateX(-10px); +} +.nut-range-mark-text { line-height: 16px; + font-size: 12px; color: #999; text-align: center; word-break: keep-all; user-select: none; - transform: translateX(-10px); } .nut-range-tick { position: absolute; @@ -159,24 +164,25 @@ width: 36px; padding: 0px; } -.nut-range-vertical-mark-text { - width: 20px; +.nut-range-vertical-mark-text-wrapper { position: absolute; display: inline-block; + user-select: none; + transform: translateY(-11px); +} +.nut-range-vertical-mark-text { line-height: 16px; color: #999; text-align: center; word-break: keep-all; - user-select: none; - transform: translateY(-11px); } .nut-range-vertical-tick { position: absolute; - top: 0px; - left: 30px; - width: 11px; - height: 11px; - border-radius: 50%; + top: 2px; + left: 31px; + width: 10px; + height: 10px; + border-radius: 5px; background: #ffebf1; } .nut-range-vertical-tick-active { @@ -226,7 +232,7 @@ margin-left: 0; margin-right: 0px; } -[dir=rtl] .nut-range-vertical-mark-text, -.rtl-nut-range-vertical-mark-text { +[dir=rtl] .nut-range-vertical-mark-text-wrapper, +.rtl-nut-range-vertical-mark-text-wrapper { transform: translateY(-11px); } \ No newline at end of file diff --git a/src/packages/range/range.scss b/src/packages/range/range.scss index cc1871abaf..990c46f147 100644 --- a/src/packages/range/range.scss +++ b/src/packages/range/range.scss @@ -5,6 +5,7 @@ width: 100%; height: $range-height; align-items: center; + justify-content: space-between; &-native { height: auto; @@ -14,11 +15,12 @@ .nut-range { display: block; position: relative; - width: 100%; + // width: 100%; height: $range-height; margin: 0 $range-margin; background-color: $range-inactive-color; border-radius: 2px; + flex: 1; cursor: pointer; &::before { @@ -46,7 +48,7 @@ } &-button { - display: block; + display: flex; width: $range-button-width; height: $range-button-height; background: $range-button-background; @@ -54,6 +56,7 @@ box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15); border: $range-button-border; outline: none; + align-items: center; &-wrapper, &-wrapper-right { @@ -77,10 +80,10 @@ } &-number { - width: 100%; + width: 200%; height: 100%; - line-height: 12px; - padding: 6px 0; + line-height: 14px; + padding: 5px 0; display: flex; align-items: center; justify-content: center; @@ -109,19 +112,23 @@ width: 100%; overflow: visible; top: 50%; - font-size: 12px; padding-top: 14px; } - &-mark-text { + &-mark-text-wrapper { position: absolute; + top: 14px; display: inline-block; + transform: translateX(-10px); + } + + &-mark-text { line-height: 16px; + font-size: 12px; color: #999; text-align: center; word-break: keep-all; user-select: none; - transform: translateX(-10px); } &-tick { @@ -185,25 +192,28 @@ padding: 0px; } - &-mark-text { - width: 20px; + &-mark-text-wrapper { + // width: 20px; position: absolute; display: inline-block; + user-select: none; + transform: translateY(-11px); + } + + &-mark-text { line-height: 16px; color: #999; text-align: center; word-break: keep-all; - user-select: none; - transform: translateY(-11px); } &-tick { position: absolute; - top: 0px; - left: 30px; - width: 11px; - height: 11px; - border-radius: 50%; + top: 2px; + left: 31px; + width: 10px; + height: 10px; + border-radius: 5px; background: $range-inactive-color; &-active { @@ -269,7 +279,7 @@ margin-right: -0px; } - &-mark-text { + &-mark-text-wrapper { transform: translateY(-11px); } } diff --git a/src/packages/range/range.taro.tsx b/src/packages/range/range.taro.tsx index 25416a9923..2e62dc5abf 100644 --- a/src/packages/range/range.taro.tsx +++ b/src/packages/range/range.taro.tsx @@ -5,6 +5,7 @@ import React, { useRef, useCallback, ReactNode, + useMemo, } from 'react' import Taro, { pxTransform } from '@tarojs/taro' import classNames from 'classnames' @@ -47,6 +48,8 @@ const defaultProps = { const isRn = Taro.getEnv() === Taro.ENV_TYPE.RN const isNative = isRn || Taro.getEnv() === Taro.ENV_TYPE.HARMONY +const classPrefix = 'nut-range' +const verticalClassPrefix = `${classPrefix}-vertical` export const Range: FunctionComponent< Partial & @@ -58,6 +61,7 @@ export const Range: FunctionComponent< const rtl = useRtl() const { className, + style, range, disabled, button, @@ -76,9 +80,31 @@ export const Range: FunctionComponent< defaultValue, } = { ...defaultProps, ...props } - const classPrefix = 'nut-range' - const verticalClassPrefix = `${classPrefix}-vertical` - const rtlClassPrefix = `rtl-${vertical ? verticalClassPrefix : classPrefix}` + const rtlClassPrefix = useMemo( + () => `rtl-${vertical ? verticalClassPrefix : classPrefix}`, + [vertical] + ) + const classes = useMemo( + () => + classNames(classPrefix, { + [`${classPrefix}-disabled`]: disabled, + [verticalClassPrefix]: vertical, + [`${classPrefix}-native`]: isNative, + }), + [disabled, vertical] + ) + const containerClasses = useMemo( + () => + classNames( + `${classPrefix}-container`, + { + [`${classPrefix}-container-native`]: isNative, + [`${verticalClassPrefix}-container`]: vertical, + }, + className + ), + [className, vertical] + ) const [buttonIndex, setButtonIndex] = useState(0) const [dragStatus, setDragStatus] = useState('start' || 'draging' || '') const touch = useTouch() @@ -122,27 +148,12 @@ export const Range: FunctionComponent< setMarksList(list) } } - }, [marks]) + }, [marks, max, min]) const scope = () => { return max - min } - const classes = classNames(classPrefix, { - [`${classPrefix}-disabled`]: disabled, - [verticalClassPrefix]: vertical, - [`${classPrefix}-native`]: isNative, - }) - - const containerClasses = classNames( - `${classPrefix}-container`, - { - [`${verticalClassPrefix}-container`]: vertical, - [`${classPrefix}-container-native`]: isNative, - }, - className - ) - const markClassName = useCallback( (mark: any) => { const classPrefix = 'nut-range-mark' @@ -157,22 +168,23 @@ export const Range: FunctionComponent< } const isActive = mark <= upperBound && mark >= lowerBound const classNames = [ - `${classPrefix}-text`, - `${isActive ? `${classPrefix}-text-active` : ''}`, + `${classPrefix}-text-wrapper`, + `${isActive ? `${classPrefix}-text-wrapper-active` : ''}`, ] if (vertical) { - classNames.push(`${verticalClassPrefix}-text`) - isActive && classNames.push(`${verticalClassPrefix}-text-active`) + classNames.push(`${verticalClassPrefix}-text-wrapper`) + isActive && + classNames.push(`${verticalClassPrefix}-text-wrapper-active`) } if (rtl) { - classNames.push(`${rtlClassPrefix}-mark-text`) + classNames.push(`${rtlClassPrefix}-mark-text-wrapper`) } return classNames.join(' ') }, - [range, current, min, max] + [min, max, range, current, vertical, rtl, rtlClassPrefix] ) const isRange = (val: any) => { @@ -368,7 +380,7 @@ export const Range: FunctionComponent< [`${verticalClassPrefix}-button`]: vertical, [`${rtlClassPrefix}-button`]: rtl, })} - style={isNative ? { borderRadius: 13 } : {}} + style={isNative ? { borderRadius: pxTransform(13) } : {}} > {currentDescription !== null && ( { + // @TODO 支持变量 const wrapperTransformRN = [ - { translateX: pxTransform(vertical ? -13 : 13) }, + { translateX: pxTransform(vertical ? -12 : 13) }, { translateY: pxTransform(vertical ? 13 : -13) }, ] const wrapperTransform = vertical - ? 'transform: translate3d(-50%, 50%, 0)' - : 'transform: translate3d(50%, -50%, 0)' + ? 'translate3d(-50%, 50%, 0)' + : 'translate3d(50%, -50%, 0)' return isRn ? wrapperTransformRN : wrapperTransform }, [vertical]) return ( - + {minDescription !== null && ( {minDescription || min} )} @@ -426,14 +439,22 @@ export const Range: FunctionComponent< className={markClassName(mark)} style={marksStyle(mark)} > - {Array.isArray(marks) ? marksRef.current[mark] : marks[mark]} + + {Array.isArray(marks) + ? marksRef.current[mark] + : marks[mark]} + ) @@ -451,7 +472,7 @@ export const Range: FunctionComponent< const transform = `translate3d(${isLeft || vertical ? '-' : ''}50%, ${vertical && isRight ? '' : '-'}50%, 0)` const transformRn = [ { - translateX: pxTransform(isLeft || vertical ? -13 : 13), + translateX: pxTransform(isLeft || vertical ? -12 : 13), }, { translateY: pxTransform(vertical && isRight ? 13 : -13), @@ -498,7 +519,6 @@ export const Range: FunctionComponent< [`${verticalClassPrefix}-button-wrapper`]: vertical, })} style={{ - // @TODO 支持变量 // @ts-ignore transform: getWrapperTransform(), }} From d45139d09ee24c37fc15996deaa1bed90e49f9d1 Mon Sep 17 00:00:00 2001 From: liyixin5 Date: Wed, 12 Jun 2024 20:34:35 +0800 Subject: [PATCH 03/11] =?UTF-8?q?feat(range):=20=E9=80=82=E9=85=8D=20rn=20?= =?UTF-8?q?=E7=AB=AF=E6=BB=91=E5=8A=A8=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/range/range.taro.tsx | 691 +++++++++++++++++------------- src/utils/use-touch.ts | 10 +- 2 files changed, 401 insertions(+), 300 deletions(-) diff --git a/src/packages/range/range.taro.tsx b/src/packages/range/range.taro.tsx index 2e62dc5abf..a21ed70efe 100644 --- a/src/packages/range/range.taro.tsx +++ b/src/packages/range/range.taro.tsx @@ -7,7 +7,7 @@ import React, { ReactNode, useMemo, } from 'react' -import Taro, { pxTransform } from '@tarojs/taro' +import { pxTransform } from '@tarojs/taro' import classNames from 'classnames' import { View, Text } from '@tarojs/components' import { useTouch } from '@/utils/use-touch' @@ -16,6 +16,7 @@ import { usePropsValue } from '@/utils/use-props-value' import { getRectByTaro } from '@/utils/get-rect-by-taro' import { RangeMark, RangeValue } from './types' import { useRtl } from '../configprovider/index.taro' +import { harmonyAndRn, rn } from '@/utils/platform-taro' export interface RangeProps extends BasicComponent { value: RangeValue @@ -46,11 +47,56 @@ const defaultProps = { marks: {}, } as RangeProps -const isRn = Taro.getEnv() === Taro.ENV_TYPE.RN -const isNative = isRn || Taro.getEnv() === Taro.ENV_TYPE.HARMONY +const isRn = rn() +const isNative = harmonyAndRn() const classPrefix = 'nut-range' const verticalClassPrefix = `${classPrefix}-vertical` +const isSameValue = (newValue: RangeValue, oldValue: RangeValue) => { + return JSON.stringify(newValue) === JSON.stringify(oldValue) +} + +const handleOverlap = (value: number[]) => { + if (value[0] > value[1]) { + return value.slice(0).reverse() + } + return value +} + +const getRect = async (ref: HTMLDivElement | ReactNativeFiberHostComponent) => { + if (isRn) { + const rect = { + width: 0, + height: 0, + left: 0, + top: 0, + } + await new Promise((resolve) => { + ref.measure( + ( + xPos: number, + yPos: number, + measureWidth: number, + measureHeight: number, + pageX: number, + pageY: number + ) => { + rect.width = measureWidth + rect.height = measureHeight + rect.left = pageX + rect.top = pageY + resolve(rect) + } + ) + }) + + return rect + } + + const rect = await getRectByTaro(ref) + return rect +} + export const Range: FunctionComponent< Partial & Omit< @@ -84,27 +130,6 @@ export const Range: FunctionComponent< () => `rtl-${vertical ? verticalClassPrefix : classPrefix}`, [vertical] ) - const classes = useMemo( - () => - classNames(classPrefix, { - [`${classPrefix}-disabled`]: disabled, - [verticalClassPrefix]: vertical, - [`${classPrefix}-native`]: isNative, - }), - [disabled, vertical] - ) - const containerClasses = useMemo( - () => - classNames( - `${classPrefix}-container`, - { - [`${classPrefix}-container-native`]: isNative, - [`${verticalClassPrefix}-container`]: vertical, - }, - className - ), - [className, vertical] - ) const [buttonIndex, setButtonIndex] = useState(0) const [dragStatus, setDragStatus] = useState('start' || 'draging' || '') const touch = useTouch() @@ -112,6 +137,7 @@ export const Range: FunctionComponent< const [marksList, setMarksList] = useState([]) const [startValue, setStartValue] = useState(0) + const scope = useMemo(() => max - min, [max, min]) const handleChange = (value: RangeValue) => { onChange && onChange(value) @@ -123,7 +149,7 @@ export const Range: FunctionComponent< onChange: handleChange, }) - const [exactValue, setEaxctValue] = useState( + const [exactValue, setExactValue] = useState( () => value || defaultValue || 0 ) const marksRef = useRef<{ [key: string]: any }>({}) @@ -150,10 +176,6 @@ export const Range: FunctionComponent< } }, [marks, max, min]) - const scope = () => { - return max - min - } - const markClassName = useCallback( (mark: any) => { const classPrefix = 'nut-range-mark' @@ -187,27 +209,30 @@ export const Range: FunctionComponent< [min, max, range, current, vertical, rtl, rtlClassPrefix] ) - const isRange = (val: any) => { - return !!range && Array.isArray(val) - } + const isRange = useCallback( + (val: any) => { + return !!range && Array.isArray(val) + }, + [range] + ) - const calcMainAxis = () => { + const calcMainAxis = useCallback(() => { const modelVal = current as any if (isRange(modelVal)) { - return `${((modelVal[1] - modelVal[0]) * 100) / scope()}%` + return `${((modelVal[1] - modelVal[0]) * 100) / scope}%` } - return `${((modelVal - min) * 100) / scope()}%` - } + return `${((modelVal - min) * 100) / scope}%` + }, [current, isRange, min, scope]) - const calcOffset = () => { + const calcOffset = useCallback(() => { const modelVal = current as any if (isRange(modelVal)) { - return `${((modelVal[0] - min) * 100) / scope()}%` + return `${((modelVal[0] - min) * 100) / scope}%` } return `0%` - } + }, [current, isRange, min, scope]) - const barStyle = () => { + const barStyle = useCallback(() => { if (vertical) { return { height: calcMainAxis(), @@ -221,133 +246,158 @@ export const Range: FunctionComponent< [dir]: calcOffset(), transition: dragStatus ? 'none' : undefined, } - } + }, [calcMainAxis, calcOffset, dragStatus, rtl, vertical]) - const marksStyle = (mark: any) => { - const dir = rtl ? 'right' : 'left' - let style: any = { - [dir]: `${((mark - min) / scope()) * 100}%`, - } - if (vertical) { - style = { - top: `${((mark - min) / scope()) * 100}%`, + const marksStyle = useCallback( + (mark: any) => { + const dir = rtl ? 'right' : 'left' + let style: any = { + [dir]: `${((mark - min) / scope) * 100}%`, } - } - return style - } - - const tickClass = (mark: any) => { - if (range && Array.isArray(current)) { - return mark <= current[1] && mark >= current[0] - } - return mark <= current - } + if (vertical) { + style = { + top: `${((mark - min) / scope) * 100}%`, + } + } + return style + }, + [min, rtl, scope, vertical] + ) - const format = (value: number) => { - value = Math.max(+min, Math.min(value, +max)) - return Math.round(value / +step) * +step - } + const tickClass = useCallback( + (mark: any) => { + if (range && Array.isArray(current)) { + return mark <= current[1] && mark >= current[0] + } + return mark <= current + }, + [current, range] + ) - const isSameValue = (newValue: RangeValue, oldValue: RangeValue) => { - return JSON.stringify(newValue) === JSON.stringify(oldValue) - } + const format = useCallback( + (value: number) => { + value = Math.max(+min, Math.min(value, +max)) + return Math.round(value / +step) * +step + }, + [max, min, step] + ) - const handleOverlap = (value: number[]) => { - if (value[0] > value[1]) { - return value.slice(0).reverse() - } - return value - } - const updateValue = (value: any, end?: boolean) => { - if (isRange(value)) { - value = handleOverlap(value).map(format) - } else { - value = format(value) - } - if (!isSameValue(value, current)) { - setCurrent(value) - } - end && onEnd && onEnd(value) - } + const updateValue = useCallback( + (value: any, end?: boolean) => { + if (isRange(value)) { + value = handleOverlap(value).map(format) + } else { + value = format(value) + } + if (!isSameValue(value, current)) { + setCurrent(value) + } + end && onEnd && onEnd(value) + }, + [current, format, isRange, onEnd, setCurrent] + ) - const click = async (event: any) => { - if (disabled || !root.current) { - return - } - setDragStatus('') - const rect = await getRectByTaro(root.current) - let delta = (event.detail.x ? event.detail.x : event.clientX) - rect.left - let total = rect.width - if (vertical) { - delta = (event.detail.y ? event.detail.y : event.clientY) - rect.top - total = rect.height - } - const value = min + (delta / total) * scope() - setEaxctValue(current) - if (isRange(current)) { - const [left, right] = current as any - const middle = (left + right) / 2 - if (value <= middle) { - updateValue([value, right], true) + const click = useCallback( + async (event: any) => { + if (disabled || !root.current) { + return + } + setDragStatus('') + const rect = await getRect(root.current) + let delta = (event.detail.x ? event.detail.x : event.clientX) - rect.left + let total = rect.width + if (vertical) { + delta = (event.detail.y ? event.detail.y : event.clientY) - rect.top + total = rect.height + } + const value = min + (delta / total) * scope + setExactValue(current) + if (isRange(current)) { + const [left, right] = current as any + const middle = (left + right) / 2 + if (value <= middle) { + updateValue([value, right], true) + } else { + updateValue([left, value], true) + } } else { - updateValue([left, value], true) + updateValue(value, true) } - } else { - updateValue(value, true) - } - } + }, + [current, disabled, isRange, min, scope, updateValue, vertical] + ) - const onTouchStart = (event: any) => { - if (disabled) { - return - } - touch.start(event) - setEaxctValue(current) - if (isRange(current)) { - setStartValue((current as number[]).map(format)) - } else { - setStartValue(format(current as number)) - } + const onTouchStart = useCallback( + (event: any) => { + if (disabled) { + return + } + touch.start(event) + setExactValue(current) + if (isRange(current)) { + setStartValue((current as number[]).map(format)) + } else { + setStartValue(format(current as number)) + } - setDragStatus('start') - } + setDragStatus('start') + }, + [current, disabled, format, isRange, touch] + ) - const onTouchMove = async (event: any) => { - if (disabled || !root.current) { - return - } - if (dragStatus === 'start') { - onStart && onStart() - } + const onTouchMove = useCallback( + async (event: any) => { + // @TODO RN 端垂直滑动时，页面会一同滑动，待解决 + if (disabled || !root.current) { + return + } + if (dragStatus === 'start') { + onStart && onStart() + } - touch.move(event) + touch.move(isRn ? event.nativeEvent : event) - setDragStatus('draging') + setDragStatus('draging') - const rect = await getRectByTaro(root.current) - if (!rect) return - let delta = touch.deltaX.current - let total = rect.width - let diff = (delta / total) * scope() - diff = rtl ? -diff : diff - if (vertical) { - delta = touch.deltaY.current - total = rect.height - diff = (delta / total) * scope() - } + const rect = await getRect(root.current) + if (!rect) return + let delta = touch.deltaX.current + let total = rect.width + let diff = (delta / total) * scope + diff = rtl ? -diff : diff + if (vertical) { + delta = touch.deltaY.current + total = rect.height + diff = (delta / total) * scope + } - let newValue - if (isRange(startValue)) { - newValue = (exactValue as number[]).slice() - newValue[buttonIndex] = startValue[buttonIndex] + diff - } else { - newValue = startValue + diff - } - setEaxctValue(newValue) - updateValue(newValue) - } + let newValue + if (isRange(startValue)) { + newValue = (exactValue as number[]).slice() + newValue[buttonIndex] = startValue[buttonIndex] + diff + } else { + newValue = startValue + diff + } + setExactValue(newValue) + updateValue(newValue) + }, + [ + buttonIndex, + disabled, + dragStatus, + exactValue, + isRange, + onStart, + rtl, + scope, + startValue, + touch, + updateValue, + vertical, + ] + ) - const onTouchEnd = () => { + const onTouchEnd = useCallback(() => { if (disabled) { return } @@ -355,56 +405,109 @@ export const Range: FunctionComponent< updateValue(current, true) } setDragStatus('') - } + }, [current, disabled, dragStatus, updateValue]) - const curValue = (idx?: number) => { - const modelVal = current as any - const value = typeof idx === 'number' ? modelVal[idx] : modelVal - return value - } + const curValue = useCallback( + (idx?: number) => { + const modelVal = current as any + const value = typeof idx === 'number' ? modelVal[idx] : modelVal + return value + }, + [current] + ) - const renderButton = (index?: number) => { - const buttonNumberTransform = vertical - ? 'translate3d(100%, 0, 0)' - : 'translate3d(0, -100%, 0)' - const buttonNumberTransformRn = [ - { translateX: pxTransform(vertical ? 26 : 0) }, - { translateY: pxTransform(vertical ? 0 : -26) }, - ] + const renderButton = useCallback( + (index?: number) => { + const buttonNumberTransform = vertical + ? 'translate3d(100%, 0, 0)' + : 'translate3d(0, -100%, 0)' + const buttonNumberTransformRn = [ + { translateX: pxTransform(vertical ? 26 : 0) }, + { translateY: pxTransform(vertical ? 0 : -26) }, + ] + return ( + + {button || ( + + {currentDescription !== null && ( + + {currentDescription + ? currentDescription(curValue(index)) + : curValue(index)} + + )} + + )} + + ) + }, + [button, curValue, currentDescription, rtl, rtlClassPrefix, vertical] + ) + + const renderMarks = useCallback(() => { + if (marksList.length <= 0) return null return ( - - {button || ( - - {currentDescription !== null && ( + + {marksList.map((mark: any) => { + return ( + - {currentDescription - ? currentDescription(curValue(index)) - : curValue(index)} + {Array.isArray(marks) ? marksRef.current[mark] : marks[mark]} - )} - - )} + + + ) + })} ) - } + }, [ + markClassName, + marks, + marksList, + marksStyle, + rtl, + rtlClassPrefix, + tickClass, + vertical, + ]) const getWrapperTransform = useCallback(() => { // @TODO 支持变量 @@ -419,118 +522,110 @@ export const Range: FunctionComponent< return isRn ? wrapperTransformRN : wrapperTransform }, [vertical]) - return ( - - {minDescription !== null && ( - {minDescription || min} - )} - click(e)}> - {marksList.length > 0 && ( + const renderButtonWrapper = useCallback(() => { + if (range) + return [0, 1].map((item, index) => { + const isLeft = index === 0 + + // @TODO 支持变量 + const transform = `translate3d(${isLeft || vertical ? '-' : ''}50%, ${vertical && !isLeft ? '' : '-'}50%, 0)` + const transformRn = [ + { + translateX: pxTransform(isLeft || vertical ? -12 : 13), + }, + { + translateY: pxTransform(vertical && !isLeft ? 13 : -13), + }, + ] + const suffix = isLeft ? 'left' : 'right' + + return ( { + if (typeof index === 'number') { + // 实时更新当前拖动的按钮索引 + setButtonIndex(index) + } + onTouchStart(e) + }} + onTouchMove={(e) => onTouchMove(e)} + onTouchEnd={onTouchEnd} + onTouchCancel={onTouchEnd} + onClick={(e) => !isRn && e.stopPropagation()} > - {marksList.map((mark: any) => { - return ( - - - {Array.isArray(marks) - ? marksRef.current[mark] - : marks[mark]} - - - - ) - })} + {renderButton(index)} - )} + ) + }) + + return ( + onTouchStart(e)} + onTouchMove={(e) => onTouchMove(e)} + onTouchEnd={onTouchEnd} + onTouchCancel={onTouchEnd} + onClick={(e) => !isRn && e.stopPropagation()} + > + {renderButton()} + + ) + }, [ + getWrapperTransform, + onTouchEnd, + onTouchMove, + onTouchStart, + range, + renderButton, + rtl, + rtlClassPrefix, + vertical, + ]) + + return ( + + {minDescription !== null && ( + {minDescription || min} + )} + click(e)} + > + {renderMarks()} - {range ? ( - [0, 1].map((item, index) => { - const isLeft = index === 0 - const isRight = index === 1 - - // @TODO 支持变量 - const transform = `translate3d(${isLeft || vertical ? '-' : ''}50%, ${vertical && isRight ? '' : '-'}50%, 0)` - const transformRn = [ - { - translateX: pxTransform(isLeft || vertical ? -12 : 13), - }, - { - translateY: pxTransform(vertical && isRight ? 13 : -13), - }, - ] - - return ( - { - if (typeof index === 'number') { - // 实时更新当前拖动的按钮索引 - setButtonIndex(index) - } - onTouchStart(e) - }} - onTouchMove={(e) => onTouchMove(e)} - onTouchEnd={onTouchEnd} - onTouchCancel={onTouchEnd} - onClick={(e) => e.stopPropagation()} - > - {renderButton(index)} - - ) - }) - ) : ( - onTouchStart(e)} - onTouchMove={(e) => onTouchMove(e)} - onTouchEnd={onTouchEnd} - onTouchCancel={onTouchEnd} - onClick={(e) => e.stopPropagation()} - > - {renderButton()} - - )} + {renderButtonWrapper()} {maxDescription !== null && ( diff --git a/src/utils/use-touch.ts b/src/utils/use-touch.ts index a43b6a6314..0e75a47f97 100644 --- a/src/utils/use-touch.ts +++ b/src/utils/use-touch.ts @@ -42,11 +42,17 @@ export function useTouch() { } const getX = (touch: React.Touch) => { - return touch.screenX || touch.clientX + if (typeof touch.screenX !== 'undefined') return touch.screenX + if (typeof touch.pageX !== 'undefined') return touch.pageX + if (typeof touch.clientX !== 'undefined') return touch.clientX + return 0 } const getY = (touch: React.Touch) => { - return touch.screenY || touch.clientY + if (typeof touch.screenY !== 'undefined') return touch.screenY + if (typeof touch.pageY !== 'undefined') return touch.pageY + if (typeof touch.clientY !== 'undefined') return touch.clientY + return 0 } const start = (event: React.TouchEvent) => { From 2bf648d29ce9e674753f66ffb7408f9ff83dfb89 Mon Sep 17 00:00:00 2001 From: liyixin5 Date: Thu, 13 Jun 2024 10:34:39 +0800 Subject: [PATCH 04/11] =?UTF-8?q?feat(range):=20=E9=80=82=E9=85=8D?= =?UTF-8?q?=E5=B0=8F=E7=A8=8B=E5=BA=8F=E7=AB=AF=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/range/range.scss | 2 +- src/packages/range/range.taro.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/packages/range/range.scss b/src/packages/range/range.scss index 990c46f147..cfefc3fe8b 100644 --- a/src/packages/range/range.scss +++ b/src/packages/range/range.scss @@ -81,7 +81,7 @@ &-number { width: 200%; - height: 100%; + height: 14px; line-height: 14px; padding: 5px 0; display: flex; diff --git a/src/packages/range/range.taro.tsx b/src/packages/range/range.taro.tsx index a21ed70efe..4ba67b6d8d 100644 --- a/src/packages/range/range.taro.tsx +++ b/src/packages/range/range.taro.tsx @@ -63,7 +63,7 @@ const handleOverlap = (value: number[]) => { return value } -const getRect = async (ref: HTMLDivElement | ReactNativeFiberHostComponent) => { +const getRect = async (ref: HTMLDivElement) => { if (isRn) { const rect = { width: 0, @@ -72,6 +72,7 @@ const getRect = async (ref: HTMLDivElement | ReactNativeFiberHostComponent) => { top: 0, } await new Promise((resolve) => { + // @ts-ignore ref.measure( ( xPos: number, From a45d083b3bad24a4afde918faf16d2024a0e5faa Mon Sep 17 00:00:00 2001 From: liyixin5 Date: Thu, 13 Jun 2024 14:11:13 +0800 Subject: [PATCH 05/11] =?UTF-8?q?feat(range):=20=E9=80=82=E9=85=8D?= =?UTF-8?q?=E7=BA=AF=20h5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/range/range.scss | 2 + src/packages/range/range.tsx | 603 ++++++++++++++++++++-------------- 2 files changed, 356 insertions(+), 249 deletions(-) diff --git a/src/packages/range/range.scss b/src/packages/range/range.scss index cfefc3fe8b..ee3dd79e4d 100644 --- a/src/packages/range/range.scss +++ b/src/packages/range/range.scss @@ -92,6 +92,7 @@ color: $range-color; text-align: center; vertical-align: center; + box-sizing: content-box; // transform: translate3d(0, -100%, 0); } } @@ -123,6 +124,7 @@ } &-mark-text { + position: absolute; line-height: 16px; font-size: 12px; color: #999; diff --git a/src/packages/range/range.tsx b/src/packages/range/range.tsx index b5d2d2bdc5..a0deb9dc87 100644 --- a/src/packages/range/range.tsx +++ b/src/packages/range/range.tsx @@ -4,6 +4,7 @@ import React, { useState, useRef, useCallback, + useMemo, ReactNode, } from 'react' import type { TouchEvent } from 'react' @@ -44,6 +45,20 @@ const defaultProps = { marks: {}, } as RangeProps +const classPrefix = 'nut-range' +const verticalClassPrefix = `${classPrefix}-vertical` + +const isSameValue = (newValue: RangeValue, oldValue: RangeValue) => { + return JSON.stringify(newValue) === JSON.stringify(oldValue) +} + +const handleOverlap = (value: number[]) => { + if (value[0] > value[1]) { + return value.slice(0).reverse() + } + return value +} + export const Range: FunctionComponent< Partial & Omit< @@ -54,6 +69,7 @@ export const Range: FunctionComponent< const rtl = useRtl() const { className, + style, range, disabled, button, @@ -72,9 +88,10 @@ export const Range: FunctionComponent< defaultValue, } = { ...defaultProps, ...props } - const classPrefix = 'nut-range' - const verticalClassPrefix = `${classPrefix}-vertical` - const rtlClassPrefix = `rtl-${vertical ? verticalClassPrefix : classPrefix}` + const rtlClassPrefix = useMemo( + () => `rtl-${vertical ? verticalClassPrefix : classPrefix}`, + [vertical] + ) const [buttonIndex, setButtonIndex] = useState(0) const [dragStatus, setDragStatus] = useState('start' || 'draging' || '') const touch = useTouch() @@ -82,6 +99,7 @@ export const Range: FunctionComponent< const [marksList, setMarksList] = useState([]) const [startValue, setStartValue] = useState(0) + const scope = useMemo(() => max - min, [max, min]) const handleChange = (value: RangeValue) => { onChange && onChange(value) @@ -93,7 +111,7 @@ export const Range: FunctionComponent< onChange: handleChange, }) - const [exactValue, setEaxctValue] = useState( + const [exactValue, setExactValue] = useState( () => value || defaultValue || 0 ) const marksRef = useRef<{ [key: string]: any }>({}) @@ -118,24 +136,7 @@ export const Range: FunctionComponent< setMarksList(list) } } - }, [marks]) - - const scope = () => { - return max - min - } - - const classes = classNames(classPrefix, { - [`${classPrefix}-disabled`]: disabled, - [verticalClassPrefix]: vertical, - }) - - const containerClasses = classNames( - `${classPrefix}-container`, - { - [`${verticalClassPrefix}-container`]: vertical, - }, - className - ) + }, [marks, max, min]) const markClassName = useCallback( (mark: any) => { @@ -166,30 +167,33 @@ export const Range: FunctionComponent< return classNames.join(' ') }, - [range, current, min, max] + [min, max, range, current, vertical, rtl, rtlClassPrefix] ) - const isRange = (val: any) => { - return !!range && Array.isArray(val) - } + const isRange = useCallback( + (val: any) => { + return !!range && Array.isArray(val) + }, + [range] + ) - const calcMainAxis = () => { + const calcMainAxis = useCallback(() => { const modelVal = current as any if (isRange(modelVal)) { - return `${((modelVal[1] - modelVal[0]) * 100) / scope()}%` + return `${((modelVal[1] - modelVal[0]) * 100) / scope}%` } - return `${((modelVal - min) * 100) / scope()}%` - } + return `${((modelVal - min) * 100) / scope}%` + }, [current, isRange, min, scope]) - const calcOffset = () => { + const calcOffset = useCallback(() => { const modelVal = current as any if (isRange(modelVal)) { - return `${((modelVal[0] - min) * 100) / scope()}%` + return `${((modelVal[0] - min) * 100) / scope}%` } return `0%` - } + }, [current, isRange, min, scope]) - const barStyle = () => { + const barStyle = useCallback(() => { if (vertical) { return { height: calcMainAxis(), @@ -203,129 +207,153 @@ export const Range: FunctionComponent< [dir]: calcOffset(), transition: dragStatus ? 'none' : undefined, } - } + }, [calcMainAxis, calcOffset, dragStatus, rtl, vertical]) - const marksStyle = (mark: any) => { - const dir = rtl ? 'right' : 'left' - let style: any = { - [dir]: `${((mark - min) / scope()) * 100}%`, - } - if (vertical) { - style = { - top: `${((mark - min) / scope()) * 100}%`, + const marksStyle = useCallback( + (mark: any) => { + const dir = rtl ? 'right' : 'left' + let style: any = { + [dir]: `${((mark - min) / scope) * 100}%`, } - } - return style - } - - const tickClass = (mark: any) => { - if (range && Array.isArray(current)) { - return mark <= current[1] && mark >= current[0] - } - return mark <= current - } + if (vertical) { + style = { + top: `${((mark - min) / scope) * 100}%`, + } + } + return style + }, + [min, rtl, scope, vertical] + ) - const format = (value: number) => { - value = Math.max(+min, Math.min(value, +max)) - return Math.round(value / +step) * +step - } + const tickClass = useCallback( + (mark: any) => { + if (range && Array.isArray(current)) { + return mark <= current[1] && mark >= current[0] + } + return mark <= current + }, + [current, range] + ) - const isSameValue = (newValue: RangeValue, oldValue: RangeValue) => { - return JSON.stringify(newValue) === JSON.stringify(oldValue) - } + const format = useCallback( + (value: number) => { + value = Math.max(+min, Math.min(value, +max)) + return Math.round(value / +step) * +step + }, + [max, min, step] + ) - const handleOverlap = (value: number[]) => { - if (value[0] > value[1]) { - return value.slice(0).reverse() - } - return value - } - const updateValue = (value: any, end?: boolean) => { - if (isRange(value)) { - value = handleOverlap(value).map(format) - } else { - value = format(value) - } - if (!isSameValue(value, current)) { - setCurrent(value) - } - end && onEnd && onEnd(value) - } + const updateValue = useCallback( + (value: any, end?: boolean) => { + if (isRange(value)) { + value = handleOverlap(value).map(format) + } else { + value = format(value) + } + if (!isSameValue(value, current)) { + setCurrent(value) + } + end && onEnd && onEnd(value) + }, + [current, format, isRange, onEnd, setCurrent] + ) - const click = (event: any) => { - if (disabled || !root.current) { - return - } - setDragStatus('') - const rect = getRect(root.current) - let delta = event.clientX - rect.left - let total = rect.width - if (vertical) { - delta = event.clientY - rect.top - total = rect.height - } - const value = min + (delta / total) * scope() - setEaxctValue(current) - if (isRange(current)) { - const [left, right] = current as any - const middle = (left + right) / 2 - if (value <= middle) { - updateValue([value, right], true) + const click = useCallback( + (event: any) => { + if (disabled || !root.current) { + return + } + setDragStatus('') + const rect = getRect(root.current) + let delta = event.clientX - rect.left + let total = rect.width + if (vertical) { + delta = event.clientY - rect.top + total = rect.height + } + const value = min + (delta / total) * scope + setExactValue(current) + if (isRange(current)) { + const [left, right] = current as any + const middle = (left + right) / 2 + if (value <= middle) { + updateValue([value, right], true) + } else { + updateValue([left, value], true) + } } else { - updateValue([left, value], true) + updateValue(value, true) } - } else { - updateValue(value, true) - } - } + }, + [current, disabled, isRange, min, scope, updateValue, vertical] + ) - const onTouchStart = (event: TouchEvent) => { - if (disabled) { - return - } - touch.start(event) - setEaxctValue(current) - if (isRange(current)) { - setStartValue((current as number[]).map(format)) - } else { - setStartValue(format(current as number)) - } + const onTouchStart = useCallback( + (event: any) => { + if (disabled) { + return + } + touch.start(event) + setExactValue(current) + if (isRange(current)) { + setStartValue((current as number[]).map(format)) + } else { + setStartValue(format(current as number)) + } - setDragStatus('start') - } + setDragStatus('start') + }, + [current, disabled, format, isRange, touch] + ) - const onTouchMove = (event: TouchEvent) => { - event.stopPropagation() - if (disabled || !root.current) { - return - } - if (dragStatus === 'start') { - onStart && onStart() - } - touch.move(event) - setDragStatus('draging') - const rect = getRect(root.current) - let delta = touch.deltaX.current - let total = rect.width - let diff = (delta / total) * scope() - diff = rtl ? -diff : diff - if (vertical) { - delta = touch.deltaY.current - total = rect.height - diff = (delta / total) * scope() - } - let newValue - if (isRange(startValue)) { - newValue = (exactValue as number[]).slice() - newValue[buttonIndex] = startValue[buttonIndex] + diff - } else { - newValue = startValue + diff - } - setEaxctValue(newValue) - updateValue(newValue) - } + const onTouchMove = useCallback( + (event: TouchEvent) => { + event.stopPropagation() + if (disabled || !root.current) { + return + } + if (dragStatus === 'start') { + onStart && onStart() + } + touch.move(event) + setDragStatus('draging') + const rect = getRect(root.current) + let delta = touch.deltaX.current + let total = rect.width + let diff = (delta / total) * scope + diff = rtl ? -diff : diff + if (vertical) { + delta = touch.deltaY.current + total = rect.height + diff = (delta / total) * scope + } + let newValue + if (isRange(startValue)) { + newValue = (exactValue as number[]).slice() + newValue[buttonIndex] = startValue[buttonIndex] + diff + } else { + newValue = startValue + diff + } + setExactValue(newValue) + updateValue(newValue) + }, + [ + buttonIndex, + disabled, + dragStatus, + exactValue, + isRange, + onStart, + rtl, + scope, + startValue, + touch, + updateValue, + vertical, + ] + ) - const onTouchEnd = () => { + const onTouchEnd = useCallback(() => { if (disabled) { return } @@ -333,125 +361,202 @@ export const Range: FunctionComponent< updateValue(current, true) } setDragStatus('') - } + }, [current, disabled, dragStatus, updateValue]) - const curValue = (idx?: number) => { - const modelVal = current as any - const value = typeof idx === 'number' ? modelVal[idx] : modelVal - return value - } + const curValue = useCallback( + (idx?: number) => { + const modelVal = current as any + const value = typeof idx === 'number' ? modelVal[idx] : modelVal + return value + }, + [current] + ) + + const renderButton = useCallback( + (index?: number) => { + const buttonNumberTransform = vertical + ? 'translate3d(100%, 0, 0)' + : 'translate3d(0, -100%, 0)' + + return ( + <> + {button || ( +
+ {currentDescription !== null && ( +
+ {currentDescription + ? currentDescription(curValue(index)) + : curValue(index)} +
+ )} +
+ )} + + ) + }, + [button, curValue, currentDescription, rtl, rtlClassPrefix, vertical] + ) + + const renderMarks = useCallback(() => { + if (marksList.length <= 0) return null - const renderButton = (index?: number) => { return ( - <> - {button || ( +
+ {marksList.map((mark: any) => { + return ( + + + {Array.isArray(marks) ? marksRef.current[mark] : marks[mark]} + + + + ) + })} +
+ ) + }, [ + markClassName, + marks, + marksList, + marksStyle, + rtl, + rtlClassPrefix, + tickClass, + vertical, + ]) + + const getWrapperTransform = useCallback(() => { + const wrapperTransform = vertical + ? 'translate3d(-50%, 50%, 0)' + : 'translate3d(50%, -50%, 0)' + + return wrapperTransform + }, [vertical]) + + const renderButtonWrapper = useCallback(() => { + if (range) + return [0, 1].map((item, index) => { + const isLeft = index === 0 + const suffix = isLeft ? 'left' : 'right' + + const transform = `translate3d(${isLeft || vertical ? '-' : ''}50%, ${vertical && !isLeft ? '' : '-'}50%, 0)` + + return (
{ + if (typeof index === 'number') { + // 实时更新当前拖动的按钮索引 + setButtonIndex(index) + } + onTouchStart(e) + }} + onTouchMove={(e) => onTouchMove(e)} + onTouchEnd={onTouchEnd} + onTouchCancel={onTouchEnd} + onClick={(e) => e.stopPropagation()} > - {currentDescription !== null && ( -
- {currentDescription - ? currentDescription(curValue(index)) - : curValue(index)} -
- )} + {renderButton(index)}
- )} - + ) + }) + + return ( +
onTouchStart(e)} + onTouchMove={(e) => onTouchMove(e)} + onTouchEnd={onTouchEnd} + onTouchCancel={onTouchEnd} + onClick={(e) => e.stopPropagation()} + > + {renderButton()} +
) - } + }, [ + getWrapperTransform, + onTouchEnd, + onTouchMove, + onTouchStart, + range, + renderButton, + rtl, + rtlClassPrefix, + vertical, + ]) return ( -
+
{minDescription !== null && (
{minDescription || min}
)} -
click(e)}> - {marksList.length > 0 && ( -
- {marksList.map((mark: any) => { - return ( - - {Array.isArray(marks) ? marksRef.current[mark] : marks[mark]} - - - ) - })} -
- )} +
click(e)} + > + {renderMarks()}
- {range ? ( - [0, 1].map((item, index) => { - const isLeft = index === 0 - const isRight = index === 1 - return ( -
{ - if (typeof index === 'number') { - // 实时更新当前拖动的按钮索引 - setButtonIndex(index) - } - onTouchStart(e) - }} - onTouchMove={(e) => onTouchMove(e)} - onTouchEnd={onTouchEnd} - onTouchCancel={onTouchEnd} - onClick={(e) => e.stopPropagation()} - > - {renderButton(index)} -
- ) - }) - ) : ( -
onTouchStart(e)} - onTouchMove={(e) => onTouchMove(e)} - onTouchEnd={onTouchEnd} - onTouchCancel={onTouchEnd} - onClick={(e) => e.stopPropagation()} - > - {renderButton()} -
- )} + {renderButtonWrapper()}
{maxDescription !== null && ( From 20843000ef4f2c58b3b0221e51f26e285c6bc9bf Mon Sep 17 00:00:00 2001 From: liyixin5 Date: Fri, 14 Jun 2024 21:20:37 +0800 Subject: [PATCH 06/11] =?UTF-8?q?feat(range):=20=E9=80=82=E9=85=8D?= =?UTF-8?q?=E9=B8=BF=E8=92=99=E7=AB=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../scripts/taro/adapted.js | 30 +----- src/packages/range/demos/h5/demo11.tsx | 4 + src/packages/range/demos/taro/demo1.tsx | 33 ++++--- src/packages/range/demos/taro/demo10.tsx | 33 ++++--- src/packages/range/demos/taro/demo11.tsx | 52 +++++++---- src/packages/range/demos/taro/demo12.tsx | 45 +++++---- src/packages/range/demos/taro/demo13.tsx | 64 ++++++++----- src/packages/range/demos/taro/demo2.tsx | 33 ++++--- src/packages/range/demos/taro/demo3.tsx | 33 ++++--- src/packages/range/demos/taro/demo4.tsx | 33 ++++--- src/packages/range/demos/taro/demo5.tsx | 33 ++++--- src/packages/range/demos/taro/demo6.tsx | 33 ++++--- src/packages/range/demos/taro/demo7.tsx | 33 ++++--- src/packages/range/demos/taro/demo8.tsx | 33 ++++--- src/packages/range/demos/taro/demo9.tsx | 33 ++++--- src/packages/range/range.harmony.css | 42 +++++++-- src/packages/range/range.scss | 41 ++++++--- src/packages/range/range.taro.tsx | 91 ++++++++----------- src/packages/range/range.tsx | 27 +++--- src/utils/get-rect-by-taro.ts | 20 ++++ 20 files changed, 460 insertions(+), 286 deletions(-) diff --git a/packages/nutui-taro-demo-rn/scripts/taro/adapted.js b/packages/nutui-taro-demo-rn/scripts/taro/adapted.js index 72631f7b37..76fea847b0 100644 --- a/packages/nutui-taro-demo-rn/scripts/taro/adapted.js +++ b/packages/nutui-taro-demo-rn/scripts/taro/adapted.js @@ -1,29 +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', - 'hoverbutton', - 'safearea', - 'hoverbuttonitem', - 'range', -] +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","hoverbutton","safearea","hoverbuttonitem","range"]; \ No newline at end of file diff --git a/src/packages/range/demos/h5/demo11.tsx b/src/packages/range/demos/h5/demo11.tsx index c8c55228d2..07adbe4284 100644 --- a/src/packages/range/demos/h5/demo11.tsx +++ b/src/packages/range/demos/h5/demo11.tsx @@ -13,6 +13,7 @@ const Demo11 = () => { button={
{ textAlign: 'center', backgroundColor: 'red', borderRadius: '10px', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', }} > {value} diff --git a/src/packages/range/demos/taro/demo1.tsx b/src/packages/range/demos/taro/demo1.tsx index 633941facd..8ac1d0e0ff 100644 --- a/src/packages/range/demos/taro/demo1.tsx +++ b/src/packages/range/demos/taro/demo1.tsx @@ -1,18 +1,29 @@ import React, { useState } from 'react' import { View } from '@tarojs/components' import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro' -import { rn } from '@/utils/platform-taro' +import { harmony, rn } from '@/utils/platform-taro' -const cellStyle = !rn() - ? { - padding: '40px 18px', - } - : { - paddingTop: 40, - paddingBottom: 40, - paddingLeft: 18, - paddingRight: 18, - } +let cellStyle = { + padding: '40px 18px', +} as any + +if (rn()) { + cellStyle = { + paddingTop: 40, + paddingBottom: 40, + paddingLeft: 18, + paddingRight: 18, + } +} + +if (harmony()) { + cellStyle = { + paddingTop: '40PX', + paddingBottom: '40PX', + paddingLeft: '18PX', + paddingRight: '18PX', + } +} const Demo1 = () => { const [show, setShow] = useState(false) diff --git a/src/packages/range/demos/taro/demo10.tsx b/src/packages/range/demos/taro/demo10.tsx index 5d86439361..b61fd39ada 100644 --- a/src/packages/range/demos/taro/demo10.tsx +++ b/src/packages/range/demos/taro/demo10.tsx @@ -1,17 +1,28 @@ import React from 'react' import { Range, ConfigProvider, Cell } from '@nutui/nutui-react-taro' -import { rn } from '@/utils/platform-taro' +import { harmony, rn } from '@/utils/platform-taro' -const cellStyle = !rn() - ? { - padding: '40px 18px', - } - : { - paddingTop: 40, - paddingBottom: 40, - paddingLeft: 18, - paddingRight: 18, - } +let cellStyle = { + padding: '40px 18px', +} as any + +if (rn()) { + cellStyle = { + paddingTop: 40, + paddingBottom: 40, + paddingLeft: 18, + paddingRight: 18, + } +} + +if (harmony()) { + cellStyle = { + paddingTop: '40PX', + paddingBottom: '40PX', + paddingLeft: '18PX', + paddingRight: '18PX', + } +} const Demo10 = () => { return ( diff --git a/src/packages/range/demos/taro/demo11.tsx b/src/packages/range/demos/taro/demo11.tsx index 5f2188d5dd..3bfa86cb6e 100644 --- a/src/packages/range/demos/taro/demo11.tsx +++ b/src/packages/range/demos/taro/demo11.tsx @@ -2,26 +2,38 @@ import React, { useState } from 'react' import { pxTransform } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro' -import { rn } from '@/utils/platform-taro' +import { rn, harmony } from '@/utils/platform-taro' -const cellStyle = !rn() - ? { - padding: '40px 18px', - } - : { - paddingTop: 40, - paddingBottom: 40, - paddingLeft: 18, - paddingRight: 18, - } -const buttonRnStyle = rn() - ? { - transform: [ - { translateX: pxTransform(-13) }, - { translateY: pxTransform(4) }, - ], - } - : {} +let cellStyle = { + padding: '40px 18px', +} as any + +let buttonNativeStyle = {} as any + +if (rn()) { + cellStyle = { + paddingTop: 40, + paddingBottom: 40, + paddingLeft: 18, + paddingRight: 18, + } + + buttonNativeStyle = { + transform: [ + { translateX: pxTransform(-13) }, + { translateY: pxTransform(4) }, + ], + } +} + +if (harmony()) { + cellStyle = { + paddingTop: '40PX', + paddingBottom: '40PX', + paddingLeft: '18PX', + paddingRight: '18PX', + } +} const Demo11 = () => { const [value, setValue] = useState(60) @@ -44,7 +56,7 @@ const Demo11 = () => { backgroundColor: 'red', borderRadius: pxTransform(10), justifyContent: 'center', - ...buttonRnStyle, + ...buttonNativeStyle, }} > { const [show, setShow] = useState(false) diff --git a/src/packages/range/demos/taro/demo13.tsx b/src/packages/range/demos/taro/demo13.tsx index abb8c24d5c..f423d85b0c 100644 --- a/src/packages/range/demos/taro/demo13.tsx +++ b/src/packages/range/demos/taro/demo13.tsx @@ -1,30 +1,48 @@ import React, { useState } from 'react' import { View } from '@tarojs/components' import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro' -import { rn } from '@/utils/platform-taro' +import { rn, harmony } from '@/utils/platform-taro' +import pxTransform from '@/utils/px-transform' -const cellStyle = !rn() - ? { - padding: '40px 18px', - } - : { - paddingTop: 40, - paddingBottom: 40, - paddingLeft: 18, - paddingRight: 18, - } -const verticalStyle = !rn() - ? { - height: '180px', - padding: '10px', - } - : { - height: 180, - paddingTop: 10, - paddingBottom: 10, - paddingLeft: 10, - paddingRight: 10, - } +let cellStyle = { + padding: '40px 18px', +} as any +let verticalStyle = { + height: '180px', + padding: '10px', +} as any + +if (rn()) { + cellStyle = { + paddingTop: 40, + paddingBottom: 40, + paddingLeft: 18, + paddingRight: 18, + } + verticalStyle = { + height: 180, + paddingTop: 10, + paddingBottom: 10, + paddingLeft: 10, + paddingRight: 10, + } +} + +if (harmony()) { + cellStyle = { + paddingTop: '40PX', + paddingBottom: '40PX', + paddingLeft: '18PX', + paddingRight: '18PX', + } + verticalStyle = { + height: pxTransform(180), + paddingTop: pxTransform(10), + paddingBottom: pxTransform(10), + paddingLeft: pxTransform(10), + paddingRight: pxTransform(10), + } +} const Demo13 = () => { const [marks] = useState({ diff --git a/src/packages/range/demos/taro/demo2.tsx b/src/packages/range/demos/taro/demo2.tsx index 134302673f..feeb5f27c0 100644 --- a/src/packages/range/demos/taro/demo2.tsx +++ b/src/packages/range/demos/taro/demo2.tsx @@ -1,17 +1,28 @@ import React, { useState } from 'react' import { Range, Cell } from '@nutui/nutui-react-taro' -import { rn } from '@/utils/platform-taro' +import { rn, harmony } from '@/utils/platform-taro' -const cellStyle = !rn() - ? { - padding: '40px 18px', - } - : { - paddingTop: 40, - paddingBottom: 40, - paddingLeft: 18, - paddingRight: 18, - } +let cellStyle = { + padding: '40px 18px', +} as any + +if (rn()) { + cellStyle = { + paddingTop: 40, + paddingBottom: 40, + paddingLeft: 18, + paddingRight: 18, + } +} + +if (harmony()) { + cellStyle = { + paddingTop: '40PX', + paddingBottom: '40PX', + paddingLeft: '18PX', + paddingRight: '18PX', + } +} const Demo2 = () => { const [value, setValue] = useState(40) diff --git a/src/packages/range/demos/taro/demo3.tsx b/src/packages/range/demos/taro/demo3.tsx index bc65576e14..d2dc44a0f7 100644 --- a/src/packages/range/demos/taro/demo3.tsx +++ b/src/packages/range/demos/taro/demo3.tsx @@ -1,18 +1,29 @@ import React, { useState } from 'react' import { View } from '@tarojs/components' import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro' -import { rn } from '@/utils/platform-taro' +import { rn, harmony } from '@/utils/platform-taro' -const cellStyle = !rn() - ? { - padding: '40px 18px', - } - : { - paddingTop: 40, - paddingBottom: 40, - paddingLeft: 18, - paddingRight: 18, - } +let cellStyle = { + padding: '40px 18px', +} as any + +if (rn()) { + cellStyle = { + paddingTop: 40, + paddingBottom: 40, + paddingLeft: 18, + paddingRight: 18, + } +} + +if (harmony()) { + cellStyle = { + paddingTop: '40PX', + paddingBottom: '40PX', + paddingLeft: '18PX', + paddingRight: '18PX', + } +} const Demo3 = () => { const [show, setShow] = useState(false) diff --git a/src/packages/range/demos/taro/demo4.tsx b/src/packages/range/demos/taro/demo4.tsx index 86efaa3073..149d2f7ea8 100644 --- a/src/packages/range/demos/taro/demo4.tsx +++ b/src/packages/range/demos/taro/demo4.tsx @@ -1,18 +1,29 @@ import React, { useState } from 'react' import { View } from '@tarojs/components' import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro' -import { rn } from '@/utils/platform-taro' +import { rn, harmony } from '@/utils/platform-taro' -const cellStyle = !rn() - ? { - padding: '40px 18px', - } - : { - paddingTop: 40, - paddingBottom: 40, - paddingLeft: 18, - paddingRight: 18, - } +let cellStyle = { + padding: '40px 18px', +} as any + +if (rn()) { + cellStyle = { + paddingTop: 40, + paddingBottom: 40, + paddingLeft: 18, + paddingRight: 18, + } +} + +if (harmony()) { + cellStyle = { + paddingTop: '40PX', + paddingBottom: '40PX', + paddingLeft: '18PX', + paddingRight: '18PX', + } +} const Demo4 = () => { const [show, setShow] = useState(false) diff --git a/src/packages/range/demos/taro/demo5.tsx b/src/packages/range/demos/taro/demo5.tsx index b858ba102d..8af8e432a5 100644 --- a/src/packages/range/demos/taro/demo5.tsx +++ b/src/packages/range/demos/taro/demo5.tsx @@ -1,18 +1,29 @@ import React, { useState } from 'react' import { View } from '@tarojs/components' import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro' -import { rn } from '@/utils/platform-taro' +import { rn, harmony } from '@/utils/platform-taro' -const cellStyle = !rn() - ? { - padding: '40px 18px', - } - : { - paddingTop: 40, - paddingBottom: 40, - paddingLeft: 18, - paddingRight: 18, - } +let cellStyle = { + padding: '40px 18px', +} as any + +if (rn()) { + cellStyle = { + paddingTop: 40, + paddingBottom: 40, + paddingLeft: 18, + paddingRight: 18, + } +} + +if (harmony()) { + cellStyle = { + paddingTop: '40PX', + paddingBottom: '40PX', + paddingLeft: '18PX', + paddingRight: '18PX', + } +} const Demo5 = () => { const [show, setShow] = useState(false) diff --git a/src/packages/range/demos/taro/demo6.tsx b/src/packages/range/demos/taro/demo6.tsx index 72d613c0b5..cbebf85224 100644 --- a/src/packages/range/demos/taro/demo6.tsx +++ b/src/packages/range/demos/taro/demo6.tsx @@ -1,18 +1,29 @@ import React, { useState } from 'react' import { View } from '@tarojs/components' import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro' -import { rn } from '@/utils/platform-taro' +import { rn, harmony } from '@/utils/platform-taro' -const cellStyle = !rn() - ? { - padding: '40px 18px', - } - : { - paddingTop: 40, - paddingBottom: 40, - paddingLeft: 18, - paddingRight: 18, - } +let cellStyle = { + padding: '40px 18px', +} as any + +if (rn()) { + cellStyle = { + paddingTop: 40, + paddingBottom: 40, + paddingLeft: 18, + paddingRight: 18, + } +} + +if (harmony()) { + cellStyle = { + paddingTop: '40PX', + paddingBottom: '40PX', + paddingLeft: '18PX', + paddingRight: '18PX', + } +} const Demo6 = () => { const [show, setShow] = useState(false) diff --git a/src/packages/range/demos/taro/demo7.tsx b/src/packages/range/demos/taro/demo7.tsx index becb70c636..93deee306c 100644 --- a/src/packages/range/demos/taro/demo7.tsx +++ b/src/packages/range/demos/taro/demo7.tsx @@ -1,18 +1,29 @@ import React, { useState } from 'react' import { View } from '@tarojs/components' import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro' -import { rn } from '@/utils/platform-taro' +import { rn, harmony } from '@/utils/platform-taro' -const cellStyle = !rn() - ? { - padding: '40px 18px', - } - : { - paddingTop: 40, - paddingBottom: 40, - paddingLeft: 18, - paddingRight: 18, - } +let cellStyle = { + padding: '40px 18px', +} as any + +if (rn()) { + cellStyle = { + paddingTop: 40, + paddingBottom: 40, + paddingLeft: 18, + paddingRight: 18, + } +} + +if (harmony()) { + cellStyle = { + paddingTop: '40PX', + paddingBottom: '40PX', + paddingLeft: '18PX', + paddingRight: '18PX', + } +} const Demo7 = () => { const [show, setShow] = useState(false) diff --git a/src/packages/range/demos/taro/demo8.tsx b/src/packages/range/demos/taro/demo8.tsx index 3cff9f810e..4cabf333d1 100644 --- a/src/packages/range/demos/taro/demo8.tsx +++ b/src/packages/range/demos/taro/demo8.tsx @@ -1,18 +1,29 @@ import React, { useState } from 'react' import { View } from '@tarojs/components' import { Range, Cell /* , Toast */ } from '@nutui/nutui-react-taro' -import { rn } from '@/utils/platform-taro' +import { rn, harmony } from '@/utils/platform-taro' -const cellStyle = !rn() - ? { - padding: '40px 18px', - } - : { - paddingTop: 40, - paddingBottom: 40, - paddingLeft: 18, - paddingRight: 18, - } +let cellStyle = { + padding: '40px 18px', +} as any + +if (rn()) { + cellStyle = { + paddingTop: 40, + paddingBottom: 40, + paddingLeft: 18, + paddingRight: 18, + } +} + +if (harmony()) { + cellStyle = { + paddingTop: '40PX', + paddingBottom: '40PX', + paddingLeft: '18PX', + paddingRight: '18PX', + } +} const Demo8 = () => { const [show, setShow] = useState(false) diff --git a/src/packages/range/demos/taro/demo9.tsx b/src/packages/range/demos/taro/demo9.tsx index 2506f20baa..2f8944ead3 100644 --- a/src/packages/range/demos/taro/demo9.tsx +++ b/src/packages/range/demos/taro/demo9.tsx @@ -1,17 +1,28 @@ import React from 'react' import { Range, Cell } from '@nutui/nutui-react-taro' -import { rn } from '@/utils/platform-taro' +import { harmony, rn } from '@/utils/platform-taro' -const cellStyle = !rn() - ? { - padding: '40px 18px', - } - : { - paddingTop: 40, - paddingBottom: 40, - paddingLeft: 18, - paddingRight: 18, - } +let cellStyle = { + padding: '40px 18px', +} as any + +if (rn()) { + cellStyle = { + paddingTop: 40, + paddingBottom: 40, + paddingLeft: 18, + paddingRight: 18, + } +} + +if (harmony()) { + cellStyle = { + paddingTop: '40PX', + paddingBottom: '40PX', + paddingLeft: '18PX', + paddingRight: '18PX', + } +} const Demo9 = () => { return ( diff --git a/src/packages/range/range.harmony.css b/src/packages/range/range.harmony.css index 565dd52c55..f60fdd8d8d 100644 --- a/src/packages/range/range.harmony.css +++ b/src/packages/range/range.harmony.css @@ -57,11 +57,23 @@ outline: none; align-items: center; } +.nut-range-button-wrapper { + width: 24px; + height: 24px; +} +.nut-range-button-wrapper-right { + width: 24px; + height: 24px; +} +.nut-range-button-wrapper-left { + width: 24px; + height: 24px; +} .nut-range-button-wrapper, .nut-range-button-wrapper-right { touch-action: none; position: absolute; top: 50%; - right: 0; + left: 100%; cursor: grab; outline: none; } @@ -74,10 +86,12 @@ touch-action: none; } .nut-range-button-number { + position: relative; width: 200%; - height: 100%; + height: 24px; line-height: 14px; padding: 5px 0; + left: 50%; display: flex; align-items: center; justify-content: center; @@ -86,6 +100,7 @@ color: #1a1a1a; text-align: center; vertical-align: center; + box-sizing: border-box; } .nut-range-disabled { cursor: not-allowed; @@ -99,17 +114,19 @@ .nut-range-mark { position: absolute; width: 100%; + height: 14px; overflow: visible; top: 50%; - padding-top: 14px; } .nut-range-mark-text-wrapper { position: absolute; + height: 100%; top: 14px; display: inline-block; transform: translateX(-10px); } .nut-range-mark-text { + position: absolute; line-height: 16px; font-size: 12px; color: #999; @@ -138,13 +155,12 @@ .nut-range-vertical { width: 4px; - height: 100%; margin: 15px 0px; } .nut-range-vertical-button-wrapper, .nut-range-vertical-button-wrapper-right { position: absolute; top: initial; - bottom: 0px; + top: 100%; left: 50%; right: initial; } @@ -153,24 +169,32 @@ left: 50%; right: initial; } +.nut-range-vertical-button-number { + left: 0px; + top: 50%; +} .nut-range-vertical-mark { position: absolute; - width: 100%; + width: 36px; + height: 100%; + top: initial; right: 50%; overflow: visible; font-size: 12px; - height: 100%; - top: initial; - width: 36px; padding: 0px; } +.nut-range-vertical-mark-hm { + left: -34px; +} .nut-range-vertical-mark-text-wrapper { + height: 16px; position: absolute; display: inline-block; user-select: none; transform: translateY(-11px); } .nut-range-vertical-mark-text { + height: 100%; line-height: 16px; color: #999; text-align: center; diff --git a/src/packages/range/range.scss b/src/packages/range/range.scss index ee3dd79e4d..a021d96ad0 100644 --- a/src/packages/range/range.scss +++ b/src/packages/range/range.scss @@ -58,13 +58,21 @@ outline: none; align-items: center; + &-wrapper, + &-wrapper-right, + &-wrapper-left { + width: $range-button-width; + height: $range-button-height; + } + &-wrapper, &-wrapper-right { touch-action: none; position: absolute; top: 50%; - right: 0; - // transform: translate3d(50%, -50%, 0); + left: 100%; + // right: 0; + // transform: translate3d(-50%, -50%, 0); cursor: grab; outline: none; } @@ -80,10 +88,12 @@ } &-number { + position: relative; width: 200%; - height: 14px; + height: 24px; line-height: 14px; padding: 5px 0; + left: 50%; display: flex; align-items: center; justify-content: center; @@ -92,7 +102,7 @@ color: $range-color; text-align: center; vertical-align: center; - box-sizing: content-box; + box-sizing: border-box; // transform: translate3d(0, -100%, 0); } } @@ -111,13 +121,14 @@ &-mark { position: absolute; width: 100%; + height: 14px; overflow: visible; top: 50%; - padding-top: 14px; } &-mark-text-wrapper { position: absolute; + height: 100%; top: 14px; display: inline-block; transform: translateX(-10px); @@ -156,7 +167,6 @@ .nut-range-vertical { width: $range-height; - height: 100%; margin: $range-margin 0px; &-button { @@ -164,10 +174,10 @@ &-wrapper-right { position: absolute; top: initial; - bottom: 0px; + top: 100%; left: 50%; right: initial; - // transform: translate3d(-50%, 50%, 0); + // transform: translate3d(-50%, -50%, 0); } &-wrapper-left { @@ -178,24 +188,30 @@ } &-number { + left: 0px; + top: 50%; // transform: translate3d(100%, 0, 0); } } &-mark { position: absolute; - width: 100%; + width: 36px; + height: 100%; + top: initial; right: 50%; overflow: visible; font-size: 12px; - height: 100%; - top: initial; - width: 36px; padding: 0px; } + &-mark-hm { + left: -34px; + } + &-mark-text-wrapper { // width: 20px; + height: 16px; position: absolute; display: inline-block; user-select: none; @@ -203,6 +219,7 @@ } &-mark-text { + height: 100%; line-height: 16px; color: #999; text-align: center; diff --git a/src/packages/range/range.taro.tsx b/src/packages/range/range.taro.tsx index 4ba67b6d8d..ace2948b64 100644 --- a/src/packages/range/range.taro.tsx +++ b/src/packages/range/range.taro.tsx @@ -16,7 +16,7 @@ import { usePropsValue } from '@/utils/use-props-value' import { getRectByTaro } from '@/utils/get-rect-by-taro' import { RangeMark, RangeValue } from './types' import { useRtl } from '../configprovider/index.taro' -import { harmonyAndRn, rn } from '@/utils/platform-taro' +import { harmony, harmonyAndRn, rn } from '@/utils/platform-taro' export interface RangeProps extends BasicComponent { value: RangeValue @@ -48,6 +48,7 @@ const defaultProps = { } as RangeProps const isRn = rn() +const isHm = harmony() const isNative = harmonyAndRn() const classPrefix = 'nut-range' const verticalClassPrefix = `${classPrefix}-vertical` @@ -63,41 +64,6 @@ const handleOverlap = (value: number[]) => { return value } -const getRect = async (ref: HTMLDivElement) => { - if (isRn) { - const rect = { - width: 0, - height: 0, - left: 0, - top: 0, - } - await new Promise((resolve) => { - // @ts-ignore - ref.measure( - ( - xPos: number, - yPos: number, - measureWidth: number, - measureHeight: number, - pageX: number, - pageY: number - ) => { - rect.width = measureWidth - rect.height = measureHeight - rect.left = pageX - rect.top = pageY - resolve(rect) - } - ) - }) - - return rect - } - - const rect = await getRectByTaro(ref) - return rect -} - export const Range: FunctionComponent< Partial & Omit< @@ -304,11 +270,20 @@ export const Range: FunctionComponent< return } setDragStatus('') - const rect = await getRect(root.current) - let delta = (event.detail.x ? event.detail.x : event.clientX) - rect.left + const rect = await getRectByTaro(root.current) + let x = + typeof event.detail?.x !== 'undefined' ? event.detail.x : event.clientX + if (isHm) x = parseFloat(pxTransform(event.windowX)) + let delta = x - rect.left let total = rect.width + if (vertical) { - delta = (event.detail.y ? event.detail.y : event.clientY) - rect.top + let y = + typeof event.detail?.y !== 'undefined' + ? event.detail.y + : event.clientY + if (isHm) y = parseFloat(pxTransform(event.windowY)) + delta = y - rect.top total = rect.height } const value = min + (delta / total) * scope @@ -348,7 +323,7 @@ export const Range: FunctionComponent< const onTouchMove = useCallback( async (event: any) => { - // @TODO RN 端垂直滑动时，页面会一同滑动，待解决 + // @TODO RN、鸿蒙端垂直滑动时，页面会一同滑动，待解决 if (disabled || !root.current) { return } @@ -357,17 +332,23 @@ export const Range: FunctionComponent< } touch.move(isRn ? event.nativeEvent : event) + // console.log(JSON.stringify(event.touches[0])) setDragStatus('draging') - const rect = await getRect(root.current) + const rect = await getRectByTaro(root.current) if (!rect) return - let delta = touch.deltaX.current + let delta = isHm + ? parseFloat(pxTransform(touch.deltaX.current)) + : touch.deltaX.current let total = rect.width + // console.log(pxTransform(delta), total) let diff = (delta / total) * scope diff = rtl ? -diff : diff if (vertical) { - delta = touch.deltaY.current + delta = isHm + ? parseFloat(pxTransform(touch.deltaY.current)) + : touch.deltaY.current total = rect.height diff = (delta / total) * scope } @@ -420,8 +401,8 @@ export const Range: FunctionComponent< const renderButton = useCallback( (index?: number) => { const buttonNumberTransform = vertical - ? 'translate3d(100%, 0, 0)' - : 'translate3d(0, -100%, 0)' + ? 'translate(100%, -50%)' + : 'translate(-50%, -100%)' const buttonNumberTransformRn = [ { translateX: pxTransform(vertical ? 26 : 0) }, { translateY: pxTransform(vertical ? 0 : -26) }, @@ -465,11 +446,13 @@ export const Range: FunctionComponent< const renderMarks = useCallback(() => { if (marksList.length <= 0) return null + return ( {marksList.map((mark: any) => { @@ -480,7 +463,9 @@ export const Range: FunctionComponent< style={marksStyle(mark)} > {Array.isArray(marks) ? marksRef.current[mark] : marks[mark]} @@ -513,12 +498,10 @@ export const Range: FunctionComponent< const getWrapperTransform = useCallback(() => { // @TODO 支持变量 const wrapperTransformRN = [ - { translateX: pxTransform(vertical ? -12 : 13) }, - { translateY: pxTransform(vertical ? 13 : -13) }, + { translateX: pxTransform(vertical ? -12 : -13) }, + { translateY: pxTransform(-13) }, ] - const wrapperTransform = vertical - ? 'translate3d(-50%, 50%, 0)' - : 'translate3d(50%, -50%, 0)' + const wrapperTransform = 'translate(-50%, -50%)' return isRn ? wrapperTransformRN : wrapperTransform }, [vertical]) @@ -528,14 +511,14 @@ export const Range: FunctionComponent< return [0, 1].map((item, index) => { const isLeft = index === 0 + const transform = 'translate(-50%, -50%)' // @TODO 支持变量 - const transform = `translate3d(${isLeft || vertical ? '-' : ''}50%, ${vertical && !isLeft ? '' : '-'}50%, 0)` const transformRn = [ { - translateX: pxTransform(isLeft || vertical ? -12 : 13), + translateX: pxTransform(-12), }, { - translateY: pxTransform(vertical && !isLeft ? 13 : -13), + translateY: pxTransform(-13), }, ] const suffix = isLeft ? 'left' : 'right' diff --git a/src/packages/range/range.tsx b/src/packages/range/range.tsx index a0deb9dc87..c369847d64 100644 --- a/src/packages/range/range.tsx +++ b/src/packages/range/range.tsx @@ -152,17 +152,18 @@ export const Range: FunctionComponent< } const isActive = mark <= upperBound && mark >= lowerBound const classNames = [ - `${classPrefix}-text`, - `${isActive ? `${classPrefix}-text-active` : ''}`, + `${classPrefix}-text-wrapper`, + `${isActive ? `${classPrefix}-text-wrapper-active` : ''}`, ] if (vertical) { - classNames.push(`${verticalClassPrefix}-text`) - isActive && classNames.push(`${verticalClassPrefix}-text-active`) + classNames.push(`${verticalClassPrefix}-text-wrapper`) + isActive && + classNames.push(`${verticalClassPrefix}-text-active-wrapper`) } if (rtl) { - classNames.push(`${rtlClassPrefix}-mark-text`) + classNames.push(`${rtlClassPrefix}-mark-text-wrapper`) } return classNames.join(' ') @@ -375,8 +376,8 @@ export const Range: FunctionComponent< const renderButton = useCallback( (index?: number) => { const buttonNumberTransform = vertical - ? 'translate3d(100%, 0, 0)' - : 'translate3d(0, -100%, 0)' + ? 'translate(100%, -50%)' + : 'translate(-50%, -100%)' return ( <> @@ -428,7 +429,9 @@ export const Range: FunctionComponent< style={marksStyle(mark)} > {Array.isArray(marks) ? marksRef.current[mark] : marks[mark]} @@ -459,12 +462,10 @@ export const Range: FunctionComponent< ]) const getWrapperTransform = useCallback(() => { - const wrapperTransform = vertical - ? 'translate3d(-50%, 50%, 0)' - : 'translate3d(50%, -50%, 0)' + const wrapperTransform = 'translate(-50%, -50%)' return wrapperTransform - }, [vertical]) + }, []) const renderButtonWrapper = useCallback(() => { if (range) @@ -472,7 +473,7 @@ export const Range: FunctionComponent< const isLeft = index === 0 const suffix = isLeft ? 'left' : 'right' - const transform = `translate3d(${isLeft || vertical ? '-' : ''}50%, ${vertical && !isLeft ? '' : '-'}50%, 0)` + const transform = 'translate(-50%, -50%)' return (
@@ -28,6 +29,25 @@ export const getRectByTaro = async (element: any): Promise => { if (inBrowser) { return Promise.resolve(getRect(element)) } + if (rn()) { + return new Promise((resolve) => { + element.measure( + ( + xPos: number, + yPos: number, + measureWidth: number, + measureHeight: number, + pageX: number, + pageY: number + ) => { + const rect = makeRect(measureWidth, measureHeight) + rect.left = pageX + rect.top = pageY + resolve(rect) + } + ) + }) + } // 小程序下的逻辑 return new Promise((resolve, reject) => { createSelectorQuery() From b019884a383086c7de0450b59763b81aad148e35 Mon Sep 17 00:00:00 2001 From: liyixin5 Date: Tue, 18 Jun 2024 16:57:17 +0800 Subject: [PATCH 07/11] Merge branch 'dev-harmony' into feat/range --- .../resources/base/profile/main_pages.json | 4 +- .../scripts/taro/adapted.js | 2 + .../src/feedback/pages/skeleton/index.tsx | 3 +- src/config.json | 4 +- src/packages/cell/cell.harmony.css | 1 + src/packages/cell/cell.scss | 1 + .../configprovider/demos/h5/demo5.tsx | 4 +- .../configprovider/demos/taro/demo1.tsx | 10 +- .../configprovider/demos/taro/demo2.tsx | 10 +- .../configprovider/demos/taro/demo5.tsx | 11 +- src/packages/skeleton/demo.scss | 45 ----- src/packages/skeleton/demo.taro.tsx | 17 +- src/packages/skeleton/demo.tsx | 6 +- src/packages/skeleton/demos/h5/demo5.tsx | 14 +- src/packages/skeleton/demos/taro/demo5.tsx | 19 +- src/packages/skeleton/skeleton.harmony.css | 173 +++++++++++++++++- src/packages/skeleton/skeleton.scss | 30 ++- src/packages/skeleton/skeleton.taro.tsx | 36 ++-- src/packages/skeleton/skeleton.tsx | 12 +- 19 files changed, 279 insertions(+), 123 deletions(-) diff --git a/packages/nutui-harmony/entry/src/main/resources/base/profile/main_pages.json b/packages/nutui-harmony/entry/src/main/resources/base/profile/main_pages.json index 106d37757a..23cbdd6c0e 100644 --- a/packages/nutui-harmony/entry/src/main/resources/base/profile/main_pages.json +++ b/packages/nutui-harmony/entry/src/main/resources/base/profile/main_pages.json @@ -54,10 +54,10 @@ "feedback/pages/popover/index", "feedback/pages/popup/index", "feedback/pages/pulltorefresh/index", + "feedback/pages/resultpage/index", "feedback/pages/skeleton/index", "feedback/pages/swipe/index", "feedback/pages/toast/index", - "feedback/pages/resultpage/index", "exhibition/pages/animate/index", "exhibition/pages/animatingnumbers/index", "exhibition/pages/avatar/index", @@ -88,4 +88,4 @@ "designWidth": 375, "autoDesignWidth": false } -} +} \ No newline at end of file diff --git a/packages/nutui-taro-demo-rn/scripts/taro/adapted.js b/packages/nutui-taro-demo-rn/scripts/taro/adapted.js index 72631f7b37..ae8f61b0ea 100644 --- a/packages/nutui-taro-demo-rn/scripts/taro/adapted.js +++ b/packages/nutui-taro-demo-rn/scripts/taro/adapted.js @@ -17,6 +17,7 @@ exports = module.exports = [ 'divider', 'image', 'resultpage', + 'skeleton', 'notify', 'pagination', 'swiper', @@ -26,4 +27,5 @@ exports = module.exports = [ 'safearea', 'hoverbuttonitem', 'range', + 'configprovider', ] diff --git a/packages/nutui-taro-demo-rn/src/feedback/pages/skeleton/index.tsx b/packages/nutui-taro-demo-rn/src/feedback/pages/skeleton/index.tsx index 039e05e8ec..337c2e3124 100644 --- a/packages/nutui-taro-demo-rn/src/feedback/pages/skeleton/index.tsx +++ b/packages/nutui-taro-demo-rn/src/feedback/pages/skeleton/index.tsx @@ -1 +1,2 @@ -export default <>button; \ No newline at end of file +import Demo from '@/packages/skeleton/demo.taro' +export default Demo diff --git a/src/config.json b/src/config.json index 39f79d5019..709a1a4304 100644 --- a/src/config.json +++ b/src/config.json @@ -93,7 +93,7 @@ "author": "songsong" }, { - "version": "2.0.0", + "version": "3.0.0", "name": "ConfigProvider", "type": "component", "cName": "全局配置", @@ -850,7 +850,7 @@ "author": "oasis" }, { - "version": "2.0.0", + "version": "3.0.0", "name": "Skeleton", "type": "component", "cName": "骨架屏", diff --git a/src/packages/cell/cell.harmony.css b/src/packages/cell/cell.harmony.css index 236918bb10..d388825c5c 100644 --- a/src/packages/cell/cell.harmony.css +++ b/src/packages/cell/cell.harmony.css @@ -21,6 +21,7 @@ .nut-cell-left { display: flex; flex-direction: column; + align-items: flex-start; flex: 1; } .nut-cell-title { diff --git a/src/packages/cell/cell.scss b/src/packages/cell/cell.scss index b315375cc7..212c2a3fdc 100644 --- a/src/packages/cell/cell.scss +++ b/src/packages/cell/cell.scss @@ -22,6 +22,7 @@ &-left { display: flex; flex-direction: column; + align-items: flex-start; flex: 1; } diff --git a/src/packages/configprovider/demos/h5/demo5.tsx b/src/packages/configprovider/demos/h5/demo5.tsx index 4a4e496c40..e9e01f1b05 100644 --- a/src/packages/configprovider/demos/h5/demo5.tsx +++ b/src/packages/configprovider/demos/h5/demo5.tsx @@ -7,8 +7,8 @@ const Demo5 = () => { - 我是标题 +
+ 我是标题
} description={我是描述} diff --git a/src/packages/configprovider/demos/taro/demo1.tsx b/src/packages/configprovider/demos/taro/demo1.tsx index 78aa454c9f..58c81a15e4 100644 --- a/src/packages/configprovider/demos/taro/demo1.tsx +++ b/src/packages/configprovider/demos/taro/demo1.tsx @@ -1,17 +1,13 @@ import React from 'react' -import { - ConfigProvider, - Cell, - // Rate, - Button, -} from '@nutui/nutui-react-taro' +import { ConfigProvider, Cell, Rate, Button } from '@nutui/nutui-react-taro' +import { harmonyAndRn } from '@/utils/platform-taro' // todo rate icon const Demo1 = () => { return ( <> - {/* */} + {harmonyAndRn() ? null : }