@asurraa/sura-ui-select-search

Select search with api built on top on antd select.

Use case

• use with input form.
• use to query search from api.
• use to query select dropdown from api.

Installation

yarn add @asurraa/sura-ui-select-search

Setup

import { Fragment } from "react";
import { AsurRaaSelectBaseApiProvider } from "@asurraa/sura-ui-select-search";

export interface ISuraPagination {
  currentPage: number;
  itemCount: number;
  itemsPerPage: number;
  totalItems: number;
  totalPages: number;
}

const AppProviderWrapper = () => {
  return (
    <Fragment>
      <AsurRaaSelectBaseApiProvider<ISuraPagination>
        fetcher={AxiosHttp}
        uri={{ page: "page" }}
        parseSearch={(searchValue, key) => `search[${key}]=${searchValue}`}
        parseResponse={{
          data: (res) => res.data,
          meta: (res) => res.meta,
        }}
        metaTotalPage={(meta) => meta.totalPages}
      >
        <App />
      </AsurRaaSelectBaseApiProvider>
    </Fragment>
  );
};

export default AppProviderWrapper;

Provider Properties

Props	Description	Type	Example
fetcher	axiosInstance, your custom axios	AxiosInstance	AxiosHttp
uri	define page param name	{page: string}	{page: "page"}
parseSearch	parse what search with your api param	(searchValue: string, key:string)=> string	(searchValue, key) => search[${key}]=${searchValue} or (searchValue, key) => search=${searchValue}
parseResponse	parse what your data & meta response	`{data: (AxiosResponse)=> [], meta: (AxiosResponse \ string)=> string}	see top above :D
metaTotalPage	give cb into company how your Generic Meta and Work with totalPage	(meta: Generic)=> number	see top above :D

Components Properties

Props	Description	Type	Example
uriData	uri route to fetch all data	string	https://api.example.com/product/all
searchAs	define search how many search param you want	Array<keyof Generic> \ undefine	["name" ]
valueRender	render value of field in dropdown	Array<keyof Generic>	["name", "phone" ]
antdSelectProps	all props from antd select	learn more	antd, rc-select

Example

import { Fragment } from "react";
import { AsurRaaRichTextEditor } from "@asurraa/sura-ui-rich-text-editor";
import { AsurRaaSelectSearchBaseApi } from "@asurraa/sura-ui-select-search";
import { API_URI } from "@src/constants/api-uri";
import { IReturnProductCategoryServices } from "@src/services/product-category.service";

const TestPage = () => {
  return (
    <Fragment>
      <AsurRaaSelectSearchBaseApi<IReturnProductCategoryServices> //passing type to auto complete in searchAs & valueRender
        uriData={API_URI.GET_ALL_PRODUCT_CATEGORY}
        searchAs={["name", "description"]}
        valueRender={["name"]}
        antdSelectProps={{
          style: { width: 300 },
        }}
      />
    </Fragment>
  );
};

export default TestPage;

Dependency

• antd-select
• rc-select