Skip to content

Commit

Permalink
feat(input): develop input.match (#316)
Browse files Browse the repository at this point in the history
* feat(input): develop input.match

* feat(input): improve imgSrc

* fix(input): improve match style

* test(input): update tests
  • Loading branch information
mortalYoung committed Apr 25, 2023
1 parent 98e365e commit 683667c
Show file tree
Hide file tree
Showing 16 changed files with 478 additions and 335 deletions.
2 changes: 1 addition & 1 deletion src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ export { default as ErrorBoundary } from './errorBoundary';
export { default as Form } from './form';
export { default as Fullscreen } from './fullscreen';
export { default as GlobalLoading } from './globalLoading';
export { default as Input } from './input';
export { default as KeyEventListener } from './keyEventListener';
export { default as LoadError } from './errorBoundary/loadError';
export { default as MarkdownRender } from './markdownRender';
export { default as Modal } from './modal';
export { default as MultiSearchInput } from './multiSearchInput';
export { default as MxGraphContainer, WIDGETS_PREFIX } from './mxGraph';
export { default as NotFound } from './notFound';
export { default as ProgressBar } from './progressBar';
Expand Down
71 changes: 71 additions & 0 deletions src/input/__tests__/__snapshots__/match.test.tsx.snap
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>
`;
63 changes: 63 additions & 0 deletions src/input/__tests__/match.test.tsx
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();
});
});
30 changes: 30 additions & 0 deletions src/input/demos/basic.tsx
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)}
/>
</>
);
};
14 changes: 14 additions & 0 deletions src/input/demos/filterOptions.tsx
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)}
/>
);
};
Loading

0 comments on commit 683667c

Please sign in to comment.