feat(input): develop input.match (#316)

* feat(input): develop input.match * feat(input): improve imgSrc * fix(input): improve match style * test(input): update tests
DTStack · Apr 25, 2023 · 683667c · 683667c
1 parent 98e365e
commit 683667c
Show file tree

Hide file tree

Showing 16 changed files with 478 additions and 335 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -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';

diff --git a/src/input/__tests__/__snapshots__/match.test.tsx.snap b/src/input/__tests__/__snapshots__/match.test.tsx.snap
@@ -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>
+`;
diff --git a/src/input/__tests__/match.test.tsx b/src/input/__tests__/match.test.tsx
@@ -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();
+    });
+});
diff --git a/src/input/demos/basic.tsx b/src/input/demos/basic.tsx
@@ -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)}
+            />
+        </>
+    );
+};
diff --git a/src/input/demos/filterOptions.tsx b/src/input/demos/filterOptions.tsx
@@ -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)}
+        />
+    );
+};