fix(range): usememo (#2638)

* fix: range refactor

* fix(range): usememo

* fix: 修订scope

* fix: test

src/packages/range/__test__/__snapshots__/range.spec.tsx.snap

@@ -41,8 +41,55 @@ exports[`range props test 1`] = `
 </div>
 `;
 
+exports[`range props test 2`] = `
+<div>
+  <div
+    class="nut-range-container test-range"
+  >
+    <div
+      class="min"
+    >
+      0
+    </div>
+    <div
+      class="nut-range"
+    >
+      <div
+        class="nut-range-bar"
+        style="width: 40%; left: 0%; transition: none;"
+      >
+        <div
+          class="nut-range-button-wrapper"
+        >
+          <div
+            class="nut-range-button"
+          >
+            <div
+              class="number"
+            >
+              40
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="max"
+    >
+      100
+    </div>
+  </div>
+</div>
+`;
+
 exports[`range test 1`] = `
 "<div><div class="nut-range-container"><div class="min">0</div><div class="nut-range"><div class="nut-range-bar" style="width: 30%; left: 30%; transition: none;"><div class="nut-range-button-wrapper-left
                   "><div class="nut-range-button"><div class="number">30</div></div></div><div class="
                   nut-range-button-wrapper-right"><div class="nut-range-button"><div class="number">60</div></div></div></div></div><div class="max">100</div></div></div>"
 `;
+
+exports[`range test 2`] = `
+"<div><div class="nut-range-container"><div class="min">0</div><div class="nut-range"><div class="nut-range-bar" style="width: 30%; left: 30%; transition: none;"><div class="nut-range-button-wrapper-left
+                  "><div class="nut-range-button"><div class="number">30</div></div></div><div class="
+                  nut-range-button-wrapper-right"><div class="nut-range-button"><div class="number">60</div></div></div></div></div><div class="max">100</div></div></div>"
+`;

src/packages/range/__test__/range.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import '@testing-library/jest-dom'
-import { render } from '@testing-library/react'
+import { render, fireEvent } from '@testing-library/react'
 import Range from '@/packages/range'
 
 test('range props test', () => {
@@ -160,3 +160,61 @@ test('desc test', () => {
   expect(container.querySelector('.max')?.innerHTML).toBe(state.maxDescription)
   expect(container.querySelector('.number')?.innerHTML).toBe('40%')
 })
+
+test('range click test', () => {
+  const { container } = render(
+    <Range defaultValue={40} style={{ color: 'red' }} />
+  )
+
+  if (container.querySelector('.nut-range-bar')) {
+    fireEvent.click(container.querySelector('.nut-range-bar') as HTMLElement)
+  }
+})
+
+test('range click test', () => {
+  const state = {
+    value0: [30, 60],
+  }
+  const { container } = render(<Range range defaultValue={state.value0} />)
+  if (container.querySelector('.nut-range-bar')) {
+    fireEvent.click(container.querySelector('.nut-range-bar') as HTMLElement)
+  }
+})
+
+test('range click disable test', () => {
+  const { container } = render(
+    <Range defaultValue={40} disabled style={{ color: 'red' }} />
+  )
+
+  if (container.querySelector('.nut-range-bar')) {
+    fireEvent.click(container.querySelector('.nut-range-bar') as HTMLElement)
+  }
+})
+
+test('range click vertical test', () => {
+  const { container } = render(
+    <Range defaultValue={40} vertical style={{ color: 'red' }} />
+  )
+
+  if (container.querySelector('.nut-range-bar')) {
+    fireEvent.click(container.querySelector('.nut-range-bar') as HTMLElement)
+  }
+})
+
+test('range touch test', () => {
+  const { container } = render(<Range defaultValue={40} />)
+
+  const track = container.querySelector('.nut-range-button')
+  const button = container.querySelector('.number')
+
+  if (track) {
+    fireEvent.touchStart(track, {
+      touches: [{ clientX: 0 }],
+    })
+    fireEvent.touchMove(track, {
+      touches: [{ clientX: 10 }],
+    })
+    fireEvent.touchEnd(track)
+    expect(button?.innerHTML).toBe('100')
+  }
+})

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

@@ -8,8 +8,8 @@ const Demo5 = () => {
   return (
     <Cell style={cellStyle}>
       <Range
-        defaultValue={0}
-        max={10}
+        defaultValue={-8}
+        max={-6}
         min={-10}
         onEnd={(val) => Toast.show(`${val}`)}
       />

src/packages/range/range.scss

@@ -34,6 +34,8 @@
       position: relative;
       width: 100%;
       height: 100%;
+      max-width: 100%;
+      max-height: 100%;
       background: $range-active-color;
       border-radius: inherit;
       transition: all 0.2s;