refactor: cascader

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

@@ -2,6 +2,6 @@
 
 exports[`Address: exist defaultIcon & selectIcon 1`] = `"<div class="nut-overlay" style="--nutui-overlay-zIndex: 1000;"></div><div style="z-index: 1000;" class="nut-popup nut-popup-round nut-popup-bottom"><div class="nut-popup-title"><div class="nut-popup-title-title">请选择地址</div><div class="nut-popup-title-right nut-popup-title-right-top-right"><svg class="nut-icon nut-icon-Close " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Close" role="presentation"><path d="M865.83 926.17a42.67 42.67 0 1 0 60.36-60.34L572.35 512l353.84-353.83a42.67 42.67 0 0 0-60.36-60.34L512 451.67 158.19 97.83a42.67 42.67 0 0 0-60.36 60.34L451.67 512 97.83 865.83a42.67 42.67 0 1 0 60.34 60.34L512 572.33z" fill="currentColor" fill-opacity="0.9"></path></svg></div></div><div class="nut-address "><ul class="nut-address-exist"><li class="nut-address-exist-item "><div class="default">123</div><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>北京市次渠镇通州区</div></div></li><li class="nut-address-exist-item "><div class="default">123</div><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>钓鱼岛钓鱼岛全区</div></div></li><li class="nut-address-exist-item active"><div class="select">456</div><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>北京市大兴区科创十一街18号院京东大厦</div></div></li></ul></div></div>"`;
 
-exports[`Address: show custom 1`] = `"<div class="nut-overlay" style="--nutui-overlay-zIndex: 1000;"></div><div style="z-index: 1000;" class="nut-popup nut-popup-round nut-popup-bottom"><div class="nut-popup-title"><div class="nut-popup-title-left"></div><div class="nut-popup-title-title">选择地址</div><div class="nut-popup-title-right nut-popup-title-right-top-right"><svg class="nut-icon nut-icon-Close " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Close" role="presentation"><path d="M865.83 926.17a42.67 42.67 0 1 0 60.36-60.34L572.35 512l353.84-353.83a42.67 42.67 0 0 0-60.36-60.34L512 451.67 158.19 97.83a42.67 42.67 0 0 0-60.36 60.34L451.67 512 97.83 865.83a42.67 42.67 0 1 0 60.34 60.34L512 572.33z" fill="currentColor" fill-opacity="0.9"></path></svg></div></div><div class="nut-cascader "><div class="nut-tabs nut-tabs-horizontal"><div class="nut-tabs-titles nut-tabs-titles-line nut-tabs-titles-scrollable"><div class="nut-tabs-titles-item nut-tabs-titles-item-active"><span class="nut-tabs-titles-item-text">请选择</span><span class="nut-tabs-titles-item-line"></span></div></div><div class="nut-tabs-content-wrap"><div class="nut-tabs-content" style="transform: translate3d(-0%, 0, 0); transition-duration: 300ms;"><div class="nut-tabpane active"><div class="nut-cascader-pane"><div class="nut-cascader-item"><div class="nut-cascader-item-title">浙江</div></div><div class="disabled nut-cascader-item"><div class="nut-cascader-item-title">湖南</div></div><div class="nut-cascader-item"><div class="nut-cascader-item-title">福建</div></div></div></div></div></div></div></div></div>"`;
+exports[`Address: show custom 1`] = `"<div class="nut-overlay" style="--nutui-overlay-zIndex: 1000;"></div><div style="z-index: 1000;" class="nut-popup nut-popup-round nut-popup-bottom"><div class="nut-popup-title"><div class="nut-popup-title-left"></div><div class="nut-popup-title-title">选择地址</div><div class="nut-popup-title-right nut-popup-title-right-top-right"><svg class="nut-icon nut-icon-Close " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Close" role="presentation"><path d="M865.83 926.17a42.67 42.67 0 1 0 60.36-60.34L572.35 512l353.84-353.83a42.67 42.67 0 0 0-60.36-60.34L512 451.67 158.19 97.83a42.67 42.67 0 0 0-60.36 60.34L451.67 512 97.83 865.83a42.67 42.67 0 1 0 60.34 60.34L512 572.33z" fill="currentColor" fill-opacity="0.9"></path></svg></div></div><div class="nut-cascader "><div class="nut-tabs nut-tabs-horizontal"><div class="nut-tabs-titles nut-tabs-titles-line nut-tabs-titles-scrollable"><div class="nut-tabs-titles-item nut-tabs-titles-item-active"><div class="nut-tabs-titles-item-line nut-tabs-titles-item-line-horizontal"></div><div class="nut-tabs-ellipsis nut-tabs-titles-item-text">请选择</div></div></div><div class="nut-tabs-content-wrap"><div class="nut-tabs-content" style="transform: translate3d(-0%, 0, 0); transition-duration: 300ms;"><div class="nut-tabpane"><div class="nut-cascader-pane"><div class="nut-cascader-item"><div class="nut-cascader-item-title">浙江</div></div><div class="disabled nut-cascader-item"><div class="nut-cascader-item-title">湖南</div></div><div class="nut-cascader-item"><div class="nut-cascader-item-title">福建</div></div></div></div></div></div></div></div></div>"`;
 
 exports[`Address: show exist 1`] = `"<div class="nut-overlay" style="--nutui-overlay-zIndex: 1000;"></div><div style="z-index: 1000;" class="nut-popup nut-popup-round nut-popup-bottom"><div class="nut-popup-title"><div class="nut-popup-title-title">选择地址</div><div class="nut-popup-title-right nut-popup-title-right-top-right"><svg class="nut-icon nut-icon-Close " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Close" role="presentation"><path d="M865.83 926.17a42.67 42.67 0 1 0 60.36-60.34L572.35 512l353.84-353.83a42.67 42.67 0 0 0-60.36-60.34L512 451.67 158.19 97.83a42.67 42.67 0 0 0-60.36 60.34L451.67 512 97.83 865.83a42.67 42.67 0 1 0 60.34 60.34L512 572.33z" fill="currentColor" fill-opacity="0.9"></path></svg></div></div><div class="nut-address "><ul class="nut-address-exist"><li class="nut-address-exist-item active"><svg class="nut-icon nut-icon-Check " xmlns="http://www.w3.org/2000/svg" color="var(--nutui-color-primary)" viewBox="0 0 1024 1024" aria-labelledby="Check" role="presentation"><path d="M998.4 245.03c-219.43 153.6-398.63 332.8-552.23 552.23-40.23 58.51-128 54.86-164.57-3.66-69.49-106.06-149.94-186.51-256-256-51.2-32.91-18.29-113.37 40.23-98.74 117.03 21.94 208.46 69.49 292.57 146.28 157.26-190.17 358.4-340.11 588.8-435.2 62.17-25.6 106.06 58.51 51.2 95.09" fill="currentColor" fill-opacity="0.9"></path></svg><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>北京市次渠镇通州区</div></div></li><li class="nut-address-exist-item "><svg class="nut-icon nut-icon-Location " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Location" role="presentation"><path d="M682.67 470.04c0 94.4-76.42 170.94-170.67 170.94s-170.67-76.54-170.67-170.94S417.75 299.12 512 299.11s170.67 76.52 170.67 170.93m-85.34 0A85.4 85.4 0 0 0 512 384.58c-47.15 0-85.33 38.27-85.33 85.46A85.4 85.4 0 0 0 512 555.5c47.15 0 85.33-38.25 85.33-85.46" fill="currentColor" fill-opacity="0.9"></path>,<path d="M981.33 470.04c0 277.76-312.75 465.73-464.15 552.53a10.22 10.22 0 0 1-10.36 0C355.42 935.79 42.67 747.82 42.67 470.06 42.67 210.45 252.8 0 512 0s469.33 210.45 469.33 470.04m-85.33 0c0-212.39-171.93-384.58-384-384.58S128 257.64 128 470.04c0 106.24 60.52 202.73 151.85 288.85 74.6 70.4 161.98 126.46 232.15 167.89 70.19-41.43 157.55-97.49 232.15-167.89C835.46 672.77 896 576.28 896 470.04" fill="currentColor" fill-opacity="0.9"></path></svg><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>钓鱼岛钓鱼岛全区</div></div></li><li class="nut-address-exist-item "><svg class="nut-icon nut-icon-Location " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Location" role="presentation"><path d="M682.67 470.04c0 94.4-76.42 170.94-170.67 170.94s-170.67-76.54-170.67-170.94S417.75 299.12 512 299.11s170.67 76.52 170.67 170.93m-85.34 0A85.4 85.4 0 0 0 512 384.58c-47.15 0-85.33 38.27-85.33 85.46A85.4 85.4 0 0 0 512 555.5c47.15 0 85.33-38.25 85.33-85.46" fill="currentColor" fill-opacity="0.9"></path>,<path d="M981.33 470.04c0 277.76-312.75 465.73-464.15 552.53a10.22 10.22 0 0 1-10.36 0C355.42 935.79 42.67 747.82 42.67 470.06 42.67 210.45 252.8 0 512 0s469.33 210.45 469.33 470.04m-85.33 0c0-212.39-171.93-384.58-384-384.58S128 257.64 128 470.04c0 106.24 60.52 202.73 151.85 288.85 74.6 70.4 161.98 126.46 232.15 167.89 70.19-41.43 157.55-97.49 232.15-167.89C835.46 672.77 896 576.28 896 470.04" fill="currentColor" fill-opacity="0.9"></path></svg><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>北京市大兴区科创十一街18号院京东大厦</div></div></li></ul></div></div>"`;

src/packages/address/address.taro.tsx

@@ -27,8 +27,8 @@ type AddressRef = {
 export interface AddressProps extends CascaderProps {
   visible: boolean
   defaultVisible: boolean
-  value?: CascaderValue
-  defaultValue?: CascaderValue
+  value: CascaderValue
+  defaultValue: CascaderValue
   type: string
   options: CascaderOption[]
   optionKey: CascaderOptionKey

src/packages/address/address.tsx

@@ -27,8 +27,8 @@ type AddressRef = {
 export interface AddressProps extends CascaderProps {
   visible: boolean
   defaultVisible: boolean
-  value?: CascaderValue
-  defaultValue?: CascaderValue
+  value: CascaderValue
+  defaultValue: CascaderValue
   type: string
   options: CascaderOption[]
   optionKey: CascaderOptionKey

src/packages/address/customRender.taro.tsx

@@ -11,8 +11,8 @@ export interface AddressProps extends CascaderProps {
   visible: boolean // popup visible
   type: string
   options: CascaderOption[]
-  value?: CascaderValue
-  defaultValue?: CascaderValue
+  value: CascaderValue
+  defaultValue: CascaderValue
   optionKey: CascaderOptionKey
   format: Record<string, string | number | null>
   height: string | number

src/packages/address/customRender.tsx

@@ -11,8 +11,8 @@ export interface AddressProps extends CascaderProps {
   visible: boolean // popup visible
   type: string
   options: CascaderOption[]
-  value?: CascaderValue
-  defaultValue?: CascaderValue
+  value: CascaderValue
+  defaultValue: CascaderValue
   optionKey: CascaderOptionKey
   format: Record<string, string | number | null>
   height: string | number

src/packages/cascader/__tests__/__snapshots__/cascader.spec.tsx.snap

@@ -19,7 +19,7 @@ exports[`Cascader > visible true 1`] = `
     style="z-index: 1000;"
   >
     <div
-      class="nut-cascader "
+      class="nut-cascader undefined"
     >
       <div
         class="nut-tabs nut-tabs-horizontal"
@@ -28,40 +28,40 @@ exports[`Cascader > visible true 1`] = `
           class="nut-tabs-titles nut-tabs-titles-line nut-tabs-titles-scrollable"
         >
           <div
-            class="nut-tabs-titles-item "
+            class="nut-tabs-titles-item"
           >
-            <span
-              class="nut-tabs-titles-item-text"
+            <div
+              class="nut-tabs-titles-item-line nut-tabs-titles-item-line-horizontal"
+            />
+            <div
+              class="nut-tabs-ellipsis nut-tabs-titles-item-text"
             >
               福建
-            </span>
-            <span
-              class="nut-tabs-titles-item-line"
-            />
+            </div>
           </div>
           <div
-            class="nut-tabs-titles-item "
+            class="nut-tabs-titles-item"
           >
-            <span
-              class="nut-tabs-titles-item-text"
+            <div
+              class="nut-tabs-titles-item-line nut-tabs-titles-item-line-horizontal"
+            />
+            <div
+              class="nut-tabs-ellipsis nut-tabs-titles-item-text"
             >
               福州
-            </span>
-            <span
-              class="nut-tabs-titles-item-line"
-            />
+            </div>
           </div>
           <div
             class="nut-tabs-titles-item nut-tabs-titles-item-active"
           >
-            <span
-              class="nut-tabs-titles-item-text"
+            <div
+              class="nut-tabs-titles-item-line nut-tabs-titles-item-line-horizontal"
+            />
+            <div
+              class="nut-tabs-ellipsis nut-tabs-titles-item-text"
             >
               鼓楼区
-            </span>
-            <span
-              class="nut-tabs-titles-item-line"
-            />
+            </div>
           </div>
         </div>
         <div
@@ -150,7 +150,7 @@ exports[`Cascader > visible true 1`] = `
               </div>
             </div>
             <div
-              class="nut-tabpane active"
+              class="nut-tabpane"
             >
               <div
                 class="nut-cascader-pane"

src/packages/cascader/__tests__/cascader.spec.tsx

@@ -1,16 +1,9 @@
 import * as React from 'react'
-import { render, fireEvent, waitFor, act } from '@testing-library/react'
+import { render, fireEvent, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
+import { CascaderOption } from '@nutui/nutui-react'
 import { Cascader } from '../cascader'
 
-import { CascaderOption } from '../types'
-import Tree from '../tree'
-import { formatTree, convertListToOptions } from '../helper'
-
-const later = (t = 0) =>
-  new Promise((r) => {
-    setTimeout(r, t)
-  })
 const mockOptions = [
   {
     value: '浙江',
@@ -92,163 +85,6 @@ const mockConvertOptions = [
   { value: '广州市', text: '广州市', nodeId: 21, nodePid: 2 },
 ]
 
-describe('helpers', () => {
-  test('formatTree', () => {
-    const fromatedTree = formatTree(mockKeyConfigOptions, null, {
-      children: 'items',
-      text: 'name',
-      value: 'name',
-    })
-
-    expect(fromatedTree).toMatchObject(mockOptions)
-  })
-
-  test('convertListToOptions', () => {
-    const convertList = convertListToOptions(mockConvertOptions, {
-      topId: 0,
-      idKey: 'nodeId',
-      pidKey: 'nodePid',
-      sortKey: '',
-    })
-    expect(convertList).toMatchObject([
-      {
-        nodePid: 0,
-        nodeId: 1,
-        text: '北京',
-        value: '北京',
-        sort: 2,
-        children: [
-          {
-            nodePid: 1,
-            nodeId: 11,
-            text: '朝阳区',
-            value: '朝阳区',
-            children: [
-              {
-                nodePid: 11,
-                nodeId: 111,
-                text: '亦庄',
-                value: '亦庄',
-                children: [],
-              },
-            ],
-          },
-        ],
-      },
-      {
-        nodePid: 0,
-        nodeId: 2,
-        text: '广东省',
-        value: '广东省',
-        children: [
-          {
-            nodePid: 2,
-            nodeId: 21,
-            text: '广州市',
-            value: '广州市',
-          },
-        ],
-      },
-    ])
-  })
-})
-
-describe('Tree', () => {
-  test('tree', () => {
-    const tree = new Tree([
-      {
-        text: '浙江',
-        value: '浙江',
-      },
-      {
-        text: '福建',
-        value: '福建',
-      },
-    ])
-    expect(tree.nodes).toMatchObject([
-      {
-        text: '浙江',
-        value: '浙江',
-      },
-      {
-        text: '福建',
-        value: '福建',
-      },
-    ])
-  })
-
-  test('tree with config', () => {
-    const tree = new Tree(mockKeyConfigOptions, {
-      value: 'name',
-      text: 'name',
-      children: 'items',
-    })
-    expect(tree.nodes).toMatchObject(mockOptions)
-  })
-
-  const tree = new Tree(mockOptions)
-  test('getPathNodesByValue', () => {
-    const pathNodes = tree.getPathNodesByValue(['浙江', '杭州', '西湖区'])
-    const mappedPathNodes = pathNodes.map(({ text, value }) => ({
-      text,
-      value,
-    }))
-
-    expect(mappedPathNodes).toMatchObject([
-      { text: '浙江', value: '浙江' },
-      { text: '杭州', value: '杭州' },
-      { text: '西湖区', value: '西湖区' },
-    ])
-  })
-
-  test('isLeaf', () => {
-    const node = tree.getNodeByValue('西湖区')
-    let isLeaf = tree.isLeaf(node as CascaderOption, false)
-    expect(isLeaf).toBeTruthy()
-    isLeaf = tree.isLeaf(node as CascaderOption, true)
-    expect(isLeaf).toBeFalsy()
-  })
-
-  test('hasChildren', () => {
-    let node = tree.getNodeByValue('西湖区')
-
-    let hasChildren = tree.hasChildren(node as CascaderOption, false)
-    expect(hasChildren).toBeFalsy()
-
-    hasChildren = tree.hasChildren(node as CascaderOption, true)
-    expect(hasChildren).toBeFalsy()
-
-    node = tree.getNodeByValue('杭州')
-
-    hasChildren = tree.hasChildren(node as CascaderOption, false)
-    expect(hasChildren).toBeTruthy()
-
-    hasChildren = tree.hasChildren(node as CascaderOption, true)
-    expect(hasChildren).toBeTruthy()
-  })
-
-  test('updateChildren', () => {
-    let node = tree.getNodeByValue('福建')
-    expect(node).toBeTruthy()
-
-    tree.updateChildren(
-      [{ text: '福州', value: '福州' }],
-      node as CascaderOption
-    )
-    node = tree.getNodeByValue('福州') as CascaderOption
-    expect(node).toBeTruthy()
-    expect(node.value).toBe('福州')
-
-    tree.updateChildren(
-      [{ text: '鼓楼区', value: '鼓楼区' }],
-      node as CascaderOption
-    )
-    node = tree.getNodeByValue('鼓楼区') as CascaderOption
-    expect(node).toBeTruthy()
-    expect(node.value).toBe('鼓楼区')
-  })
-})
-
 describe('Cascader', () => {
   it('options', async () => {
     const { container } = render(
@@ -330,11 +166,11 @@ describe('Cascader', () => {
       />
     )
     const element = container.querySelectorAll(
-      '.active.nut-tabpane .active .nut-cascader-item-title'
+      '.nut-tabs-titles-item-active .nut-tabs-titles-item-text'
     )[0]
     expect(element).toHaveTextContent('鼓楼区')
   })
-  it('init Value with both valu and defaultValue', async () => {
+  it('init Value with both value and defaultValue', async () => {
     const { container } = render(
       <Cascader
         visible
@@ -344,7 +180,7 @@ describe('Cascader', () => {
       />
     )
     const element = container.querySelectorAll(
-      '.active.nut-tabpane .active .nut-cascader-item-title'
+      '.nut-tabs-titles-item-active .nut-tabs-titles-item-text'
     )[0]
     expect(element).toHaveTextContent('台江区')
   })
@@ -375,17 +211,19 @@ describe('Cascader', () => {
     const { container } = render(
       <Cascader
         lazy
-        onLoad={(node: any, resolve: (children: any) => void) => {
-          setTimeout(() => {
-            lazyFunc()
-            resolve({})
-          }, 50)
+        value={['test']}
+        onLoad={async (node: any) => {
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              lazyFunc()
+              resolve([] as CascaderOption[])
+            }, 50)
+          })
         }}
       />
     )
     expect(lazyFunc).not.toBeCalled()
-    await act(async () => {
-      await later(100)
+    await waitFor(() => {
       expect(lazyFunc).toBeCalled()
     })
   })