@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