-
Notifications
You must be signed in to change notification settings - Fork 36
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(input): develop input.match (#316)
* feat(input): develop input.match * feat(input): improve imgSrc * fix(input): improve match style * test(input): update tests
- Loading branch information
1 parent
98e365e
commit 683667c
Showing
16 changed files
with
478 additions
and
335 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`Test Input.Match component Should match snapshot 1`] = ` | ||
<DocumentFragment> | ||
<span | ||
class="ant-input-affix-wrapper dtc-input-match" | ||
> | ||
<input | ||
class="ant-input" | ||
type="text" | ||
value="" | ||
/> | ||
<span | ||
class="ant-input-suffix" | ||
> | ||
<div | ||
class="dtc-input-match-items" | ||
> | ||
<svg | ||
class="dtc-input-match-suffixItem" | ||
height="16" | ||
viewBox="0 0 1024 1024" | ||
width="16" | ||
xmlns="http://www.w3.org/2000/svg" | ||
> | ||
<path | ||
d="M160 192h704a32 32 0 110 64H160a32 32 0 110-64zm0 576h704a32 32 0 110 64H160a32 32 0 110-64zm276.8-94.688l-19.68-51.744H249.504l-19.68 52.864c-7.696 20.64-14.256 34.56-19.696 41.76-5.44 7.232-14.352 10.832-26.72 10.832-10.496 0-19.776-3.84-27.84-11.52s-12.096-16.416-12.096-26.16c0-5.632.928-11.44 2.816-17.44 1.872-6 4.96-14.336 9.28-25.024l105.456-267.76 10.832-27.696c4.224-10.784 8.72-19.744 13.504-26.864a54.848 54.848 0 0118.848-17.28c7.776-4.416 17.392-6.624 28.816-6.624 11.632 0 21.328 2.208 29.12 6.608 7.776 4.4 14.064 10.08 18.848 17.024 4.768 6.928 8.8 14.384 12.08 22.352 3.28 7.968 7.456 18.608 12.528 31.92l107.712 266.08c8.432 20.24 12.656 34.96 12.656 44.144 0 9.552-3.984 18.32-11.952 26.288a39.28 39.28 0 01-28.832 11.952c-6.56 0-12.192-1.168-16.864-3.52a34.56 34.56 0 01-11.824-9.552c-3.184-4.032-6.608-10.224-10.256-18.56a1087.68 1087.68 0 01-9.44-22.08zM271.44 558.848h123.2l-62.176-170.16-61.024 170.16zM776 683.712c-18.56 14.448-36.512 25.28-53.856 32.48-17.344 7.232-36.8 10.832-58.368 10.832-19.68 0-36.976-3.888-51.888-11.664-14.896-7.776-26.4-18.336-34.448-31.648a82.096 82.096 0 01-12.096-43.312c0-20.992 6.656-38.896 19.968-53.712 13.312-14.816 31.6-24.752 54.848-29.808 4.864-1.12 16.96-3.664 36.272-7.6a1589.856 1589.856 0 0049.648-10.832 949.488 949.488 0 0044.864-11.952c-.944-20.24-5.024-35.104-12.24-44.576-7.216-9.472-22.176-14.208-44.864-14.208-19.504 0-34.176 2.72-44 8.16-9.856 5.44-18.288 13.6-25.328 24.48-7.04 10.88-12 18.032-14.896 21.504-2.912 3.472-9.152 5.2-18.72 5.2-8.608 0-16.064-2.752-22.352-8.288-6.272-5.536-9.424-12.608-9.424-21.232 0-13.504 4.8-26.624 14.352-39.376 9.552-12.752 24.48-23.248 44.72-31.504s45.472-12.368 75.648-12.368c33.76 0 60.288 3.984 79.6 11.952 19.312 7.968 32.96 20.576 40.912 37.824 7.984 17.248 11.968 40.128 11.968 68.624a6293.76 6293.76 0 01-.576 87.744c0 14.448 2.4 29.488 7.184 45.152 4.768 15.648 7.168 25.728 7.168 30.24 0 7.856-3.712 15.04-11.104 21.504-7.408 6.464-15.808 9.696-25.184 9.696-7.872 0-15.648-3.696-23.344-11.104-7.68-7.408-15.84-18.144-24.464-32.208zm-5.056-111.088c-11.264 4.128-27.616 8.48-49.088 13.072-21.472 4.608-36.32 7.968-44.576 10.128s-16.128 6.384-23.616 12.656c-7.52 6.288-11.264 15.04-11.264 26.304 0 11.616 4.416 21.52 13.232 29.664 8.8 8.16 20.336 12.24 34.592 12.24 15.184 0 29.2-3.328 42.048-9.984 12.832-6.656 22.256-15.232 28.256-25.728 6.944-11.632 10.4-30.752 10.4-57.376v-10.976z" | ||
fill="currentColor" | ||
/> | ||
</svg> | ||
<svg | ||
class="dtc-input-match-suffixItem" | ||
height="16" | ||
viewBox="0 0 1024 1024" | ||
width="16" | ||
xmlns="http://www.w3.org/2000/svg" | ||
> | ||
<path | ||
d="M944 144a48 48 0 0148 48v640a48 48 0 01-48 48H80a48 48 0 01-48-48V192a48 48 0 0148-48h864zm-472 64H96v280h40a32 32 0 110 64H96v264h376v-56a32 32 0 1164 0v56h392V552h-40a32 32 0 110-64h40V208H536v56a32 32 0 11-64 0v-56zm-138.976 92.656c11.632 0 21.328 2.208 29.12 6.608 7.776 4.4 14.064 10.08 18.848 17.024 4.768 6.928 8.8 14.384 12.08 22.352 3.28 7.968 7.456 18.608 12.528 31.92l107.712 266.08c8.432 20.24 12.656 34.96 12.656 44.144 0 9.552-3.984 18.32-11.952 26.288a39.28 39.28 0 01-28.832 11.952c-6.56 0-12.192-1.168-16.864-3.52a34.56 34.56 0 01-11.824-9.552c-3.184-4.032-6.608-10.224-10.256-18.56a1087.68 1087.68 0 01-9.44-22.08l-19.68-51.744H249.504l-19.68 52.864c-7.696 20.64-14.256 34.56-19.696 41.76-5.44 7.232-14.352 10.832-26.72 10.832-10.496 0-19.776-3.84-27.84-11.52s-12.096-16.416-12.096-26.16c0-5.632.928-11.44 2.816-17.44 1.872-6 4.96-14.336 9.28-25.024l105.456-267.76 10.832-27.696c4.224-10.784 8.72-19.744 13.504-26.864a54.848 54.848 0 0118.848-17.28c7.776-4.416 17.392-6.624 28.816-6.624zM713.84 414.288c33.76 0 60.288 3.984 79.6 11.952 19.312 7.968 32.96 20.576 40.912 37.824 7.984 17.248 11.968 40.128 11.968 68.624a6293.76 6293.76 0 01-.576 87.744c0 14.448 2.4 29.488 7.184 45.152 4.768 15.648 7.168 25.728 7.168 30.24 0 7.856-3.712 15.04-11.104 21.504-7.408 6.464-15.808 9.696-25.184 9.696-7.872 0-15.648-3.696-23.344-11.104-7.68-7.408-15.84-18.144-24.464-32.208-18.56 14.448-36.512 25.28-53.856 32.48-17.344 7.232-36.8 10.832-58.368 10.832-19.68 0-36.976-3.888-51.888-11.664-14.896-7.776-26.4-18.336-34.448-31.648a82.096 82.096 0 01-12.096-43.312c0-20.992 6.656-38.896 19.968-53.712 13.312-14.816 31.6-24.752 54.848-29.808 4.864-1.12 16.96-3.664 36.272-7.6a1589.856 1589.856 0 0049.648-10.832 949.488 949.488 0 0044.864-11.952c-.944-20.24-5.024-35.104-12.24-44.576-7.216-9.472-22.176-14.208-44.864-14.208-19.504 0-34.176 2.72-44 8.16-9.856 5.44-18.288 13.6-25.328 24.48-7.04 10.88-12 18.032-14.896 21.504-2.912 3.472-9.152 5.2-18.72 5.2-8.608 0-16.064-2.752-22.352-8.288-6.272-5.536-9.424-12.608-9.424-21.232 0-13.504 4.8-26.624 14.352-39.376 9.552-12.752 24.48-23.248 44.72-31.504s45.472-12.368 75.648-12.368zm57.104 158.336c-11.264 4.128-27.616 8.48-49.088 13.072-21.472 4.608-36.32 7.968-44.576 10.128s-16.128 6.384-23.616 12.656c-7.52 6.288-11.264 15.04-11.264 26.304 0 11.616 4.416 21.52 13.232 29.664 8.8 8.16 20.336 12.24 34.592 12.24 15.184 0 29.2-3.328 42.048-9.984 12.832-6.656 22.256-15.232 28.256-25.728 6.944-11.632 10.4-30.752 10.4-57.376v-10.976zm-438.48-183.936l-61.024 170.16h123.2l-62.176-170.16z" | ||
fill="currentColor" | ||
/> | ||
</svg> | ||
<svg | ||
class="dtc-input-match-suffixItem" | ||
height="16" | ||
viewBox="0 0 1024 1024" | ||
width="16" | ||
xmlns="http://www.w3.org/2000/svg" | ||
> | ||
<path | ||
d="M72 224a32 32 0 0132 32v213.008l66.496-66.48a32 32 0 1145.264 45.248L183.52 480H280a32 32 0 110 64H176.24l39.52 39.536a32 32 0 011.616 43.52l-1.616 1.744a32 32 0 01-45.264 0L104 562.272V768a32 32 0 11-64 0V256a32 32 0 0132-32zm389.568 76.656c11.616 0 21.328 2.208 29.104 6.608 7.776 4.4 14.064 10.08 18.848 17.024 4.784 6.928 8.8 14.384 12.096 22.352 3.28 7.968 7.44 18.608 12.512 31.92L641.84 644.64c8.448 20.24 12.656 34.96 12.656 44.144 0 9.552-3.984 18.32-11.952 26.288a39.28 39.28 0 01-28.832 11.952c-6.56 0-12.176-1.168-16.864-3.52a34.56 34.56 0 01-11.824-9.552c-3.184-4.032-6.608-10.224-10.256-18.56a1087.68 1087.68 0 01-9.424-22.08l-19.68-51.744H378.032l-19.68 52.864c-7.696 20.64-14.256 34.56-19.696 41.76-5.44 7.232-14.336 10.832-26.72 10.832-10.496 0-19.776-3.84-27.84-11.52S272 699.088 272 689.344c0-5.632.944-11.44 2.816-17.44 1.872-6 4.96-14.336 9.28-25.024l105.472-267.76 10.816-27.696c4.224-10.784 8.72-19.744 13.504-26.864a54.848 54.848 0 0118.848-17.28c7.776-4.416 17.392-6.624 28.832-6.624zm380.8 113.632c33.76 0 60.288 3.984 79.6 11.952 19.312 7.968 32.96 20.576 40.928 37.824 7.968 17.248 11.952 40.128 11.952 68.624v12.992a5507.76 5507.76 0 01-.56 74.752c0 14.448 2.384 29.488 7.168 45.152 4.784 15.648 7.168 25.728 7.168 30.24 0 7.856-3.696 15.04-11.104 21.504-7.408 6.464-15.808 9.696-25.184 9.696-7.872 0-15.648-3.696-23.344-11.104-7.68-7.408-15.84-18.144-24.464-32.208-18.56 14.448-36.512 25.28-53.856 32.48-17.344 7.232-36.8 10.832-58.352 10.832-19.68 0-36.992-3.888-51.904-11.664-14.896-7.776-26.384-18.336-34.448-31.648a82.096 82.096 0 01-12.096-43.312c0-20.992 6.656-38.896 19.968-53.712 13.312-14.816 31.6-24.752 54.848-29.808 4.88-1.12 16.96-3.664 36.288-7.6a1589.856 1589.856 0 0049.632-10.832 949.488 949.488 0 0044.864-11.952c-.944-20.24-5.024-35.104-12.24-44.576-7.216-9.472-22.176-14.208-44.864-14.208-19.488 0-34.16 2.72-44 8.16-9.856 5.44-18.288 13.6-25.328 24.48-7.024 10.88-12 18.032-14.896 21.504-2.912 3.472-9.152 5.2-18.72 5.2-8.608 0-16.064-2.752-22.352-8.288-6.272-5.536-9.408-12.608-9.408-21.232 0-13.504 4.768-26.624 14.336-39.376 9.568-12.752 24.48-23.248 44.72-31.504 20.256-8.256 45.472-12.368 75.648-12.368zm57.104 158.336c-11.248 4.128-27.616 8.48-49.088 13.072-21.456 4.608-36.32 7.968-44.576 10.128-8.24 2.16-16.128 6.384-23.616 12.656-7.504 6.288-11.248 15.04-11.248 26.304 0 11.616 4.4 21.52 13.216 29.664 8.8 8.16 20.336 12.24 34.592 12.24 15.2 0 29.2-3.328 42.048-9.984 12.848-6.656 22.256-15.232 28.256-25.728 6.944-11.632 10.4-30.752 10.4-57.376v-10.976zM461.008 388.688l-61.04 170.16h123.2l-62.176-170.16z" | ||
fill="currentColor" | ||
/> | ||
</svg> | ||
<svg | ||
class="dtc-input-match-suffixItem" | ||
height="16" | ||
viewBox="0 0 1024 1024" | ||
width="16" | ||
xmlns="http://www.w3.org/2000/svg" | ||
> | ||
<path | ||
d="M968 224a32 32 0 0132 32v512a32 32 0 11-64 0V560.88l-67.888 67.92a32 32 0 01-43.2 1.872l-2.048-1.872-1.632-1.76a32 32 0 011.632-43.504L862.384 544h-103.76a32 32 0 110-64h96.464l-32.224-32.224a32 32 0 1145.248-45.248L936 470.4V256a32 32 0 0132-32zm-762.432 76.656c11.616 0 21.328 2.208 29.104 6.608 7.776 4.4 14.064 10.08 18.848 17.024 4.784 6.928 8.8 14.384 12.096 22.352 3.28 7.968 7.44 18.608 12.512 31.92L385.84 644.64c8.448 20.24 12.656 34.96 12.656 44.144 0 9.552-3.984 18.32-11.952 26.288a39.28 39.28 0 01-28.832 11.952c-6.56 0-12.176-1.168-16.864-3.52a34.56 34.56 0 01-11.824-9.552c-3.184-4.032-6.608-10.224-10.256-18.56a1087.68 1087.68 0 01-9.424-22.08l-19.68-51.744H122.032l-19.68 52.864c-7.696 20.64-14.256 34.56-19.696 41.76-5.44 7.232-14.336 10.832-26.72 10.832-10.496 0-19.776-3.84-27.84-11.52S16 699.088 16 689.344c0-5.632.944-11.44 2.816-17.44 1.872-6 4.96-14.336 9.28-25.024l105.472-267.76 10.816-27.696c4.224-10.784 8.72-19.744 13.504-26.864a54.848 54.848 0 0118.848-17.28c7.776-4.416 17.392-6.624 28.832-6.624zm380.8 113.632c33.76 0 60.288 3.984 79.6 11.952 19.312 7.968 32.96 20.576 40.928 37.824 7.968 17.248 11.952 40.128 11.952 68.624v12.992a5507.76 5507.76 0 01-.56 74.752c0 14.448 2.384 29.488 7.168 45.152 4.784 15.648 7.168 25.728 7.168 30.24 0 7.856-3.696 15.04-11.104 21.504-7.408 6.464-15.808 9.696-25.184 9.696-7.872 0-15.648-3.696-23.344-11.104-7.68-7.408-15.84-18.144-24.464-32.208-18.56 14.448-36.512 25.28-53.856 32.48-17.344 7.232-36.8 10.832-58.352 10.832-19.68 0-36.992-3.888-51.904-11.664-14.896-7.776-26.384-18.336-34.448-31.648a82.096 82.096 0 01-12.096-43.312c0-20.992 6.656-38.896 19.968-53.712 13.312-14.816 31.6-24.752 54.848-29.808 4.88-1.12 16.96-3.664 36.288-7.6a1589.856 1589.856 0 0049.632-10.832 949.488 949.488 0 0044.864-11.952c-.944-20.24-5.024-35.104-12.24-44.576-7.216-9.472-22.176-14.208-44.864-14.208-19.488 0-34.16 2.72-44 8.16-9.856 5.44-18.288 13.6-25.328 24.48-7.024 10.88-12 18.032-14.896 21.504-2.912 3.472-9.152 5.2-18.72 5.2-8.608 0-16.064-2.752-22.352-8.288-6.272-5.536-9.408-12.608-9.408-21.232 0-13.504 4.768-26.624 14.336-39.376 9.568-12.752 24.48-23.248 44.72-31.504 20.256-8.256 45.472-12.368 75.648-12.368zm57.104 158.336c-11.248 4.128-27.616 8.48-49.088 13.072-21.456 4.608-36.32 7.968-44.576 10.128-8.24 2.16-16.128 6.384-23.616 12.656-7.504 6.288-11.248 15.04-11.248 26.304 0 11.616 4.4 21.52 13.216 29.664 8.8 8.16 20.336 12.24 34.592 12.24 15.2 0 29.2-3.328 42.048-9.984 12.848-6.656 22.256-15.232 28.256-25.728 6.944-11.632 10.4-30.752 10.4-57.376v-10.976zM205.008 388.688l-61.04 170.16h123.2l-62.176-170.16z" | ||
fill="currentColor" | ||
/> | ||
</svg> | ||
</div> | ||
</span> | ||
</span> | ||
</DocumentFragment> | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
import { fireEvent, render } from '@testing-library/react'; | ||
import React from 'react'; | ||
import Match from '../match'; | ||
|
||
describe('Test Input.Match component', () => { | ||
it('Should match snapshot', () => { | ||
const { asFragment } = render(<Match />); | ||
expect(asFragment()).toMatchSnapshot(); | ||
}); | ||
|
||
it('Should support searchType', () => { | ||
const fn = jest.fn(); | ||
const { rerender, container } = render(<Match onTypeChange={fn} />); | ||
const elements = container.querySelectorAll('svg.dtc-input-match-suffixItem')!; | ||
expect(elements).toHaveLength(4); | ||
|
||
fireEvent.click(elements[0]); | ||
|
||
expect(fn).toBeCalledWith('caseSensitive'); | ||
|
||
rerender(<Match searchType="caseSensitive" onTypeChange={fn} />); | ||
expect(container.querySelectorAll('svg.dtc-input-match-suffixItem')!).toHaveLength(4); | ||
expect(container.querySelectorAll('svg.dtc-input-match-suffixItem')[0].classList).toContain( | ||
'dtc-input-match-suffixItem__active' | ||
); | ||
fireEvent.click(container.querySelectorAll('svg.dtc-input-match-suffixItem')[0]); | ||
expect(fn).toBeCalledWith('fuzzy'); | ||
}); | ||
|
||
it('Should support filterOptions', () => { | ||
const { container } = render(<Match filterOptions={['tail']} />); | ||
|
||
expect(container.querySelectorAll('svg.dtc-input-match-suffixItem')!).toHaveLength(1); | ||
}); | ||
|
||
it('Should support onSearch and onPressEnter', () => { | ||
const searchFn = jest.fn(); | ||
const pressEnterFn = jest.fn(); | ||
const { container } = render( | ||
<Match | ||
value="test" | ||
searchType="front" | ||
onSearch={searchFn} | ||
onPressEnter={pressEnterFn} | ||
/> | ||
); | ||
|
||
fireEvent.keyDown(container.querySelector('input')!, { key: 'Enter', charCode: 13 }); | ||
|
||
expect(searchFn).toBeCalledWith('test', 'front'); | ||
expect(pressEnterFn).toBeCalled(); | ||
}); | ||
|
||
it('Should support get value', () => { | ||
const fn = jest.fn(); | ||
const { container } = render(<Match value="test" onChange={fn} />); | ||
|
||
const inputEl = container.querySelector('input')!; | ||
fireEvent.change(inputEl, { target: { value: 'test1' } }); | ||
|
||
expect(fn).toBeCalled(); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import React, { useState } from 'react'; | ||
import { Input } from 'dt-react-component'; | ||
import { Radio } from 'antd'; | ||
import type { SizeType } from 'antd/es/config-provider/SizeContext'; | ||
|
||
export default () => { | ||
const [size, setSize] = useState<SizeType>('middle'); | ||
return ( | ||
<> | ||
<Radio.Group | ||
optionType="button" | ||
value={size} | ||
options={[ | ||
{ label: 'small', value: 'small' }, | ||
{ label: 'middle', value: 'middle' }, | ||
{ label: 'large', value: 'large' }, | ||
]} | ||
onChange={(e) => setSize(e.target.value)} | ||
style={{ marginBottom: 16 }} | ||
/> | ||
<Input.Match | ||
size={size} | ||
placeholder="按名称搜索" | ||
onChange={(e) => console.log('e', e.target.value)} | ||
onTypeChange={(type) => console.log('onTypeChange:', type)} | ||
onSearch={(value, searchType) => console.log('onSearch:', value, searchType)} | ||
/> | ||
</> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import React from 'react'; | ||
import { Input } from 'dt-react-component'; | ||
|
||
export default () => { | ||
return ( | ||
<Input.Match | ||
filterOptions={['front']} | ||
placeholder="按名称搜索" | ||
onChange={(e) => console.log('e', e.target.value)} | ||
onTypeChange={(type) => console.log('onTypeChange:', type)} | ||
onSearch={(value, searchType) => console.log('onSearch:', value, searchType)} | ||
/> | ||
); | ||
}; |
Oops, something went wrong.