@kanda-libs/ks-component-ts 0.3.7 → 0.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanda-libs/ks-component-ts",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "Kanda form component library",
   "main": "dist/index.esm.js",
   "module": "dist/index.esm.js",

package/src/components/HeaderSearch/index.tsx

@@ -5,6 +5,7 @@ import InputUncontrolled, {
 } from "~/field/components/Input/InputUncontrolled";
 import { DefaultFormFieldProps } from "~/field/types";
 import FormTheme from "~/components/FormTheme";
+import { useFormContext } from "react-hook-form";
 
 export interface HeaderSearchProps
   extends DefaultFormFieldProps<InputUncontrolledProps> {
@@ -12,6 +13,7 @@ export interface HeaderSearchProps
   className?: string;
   help?: boolean;
   hideNumber?: boolean;
+  searchName?: string;
 }
 
 const HeaderSearch: FunctionComponent<HeaderSearchProps> = function ({
@@ -19,6 +21,7 @@ const HeaderSearch: FunctionComponent<HeaderSearchProps> = function ({
   help = false,
   hideNumber = true,
   className,
+  searchName = "search",
   ...inputProps
 }) {
   return (
@@ -31,7 +34,7 @@ const HeaderSearch: FunctionComponent<HeaderSearchProps> = function ({
       <div className="w-full -ml-4">
         <FormTheme variant="clean">
           <InputUncontrolled
-            name="search"
+            name={searchName}
             icon="search"
             iconVariant="search"
             {...inputProps}

package/src/field/components/CompanyLookupInput/SearchResults/Mobile/Container.tsx

@@ -1,4 +1,10 @@
-import React, { ChangeEvent, FunctionComponent, useState } from "react";
+import React, {
+  ChangeEvent,
+  FunctionComponent,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { useFormContext } from "react-hook-form";
 import type { SearchResultsProps } from "../types";
 import useSearch from "../useSearch";
@@ -26,11 +32,13 @@ const Container: FunctionComponent<ContainerProps> = function ({
   children,
 }) {
   const [query, setQuery] = useState("");
-  const { setValue } = useFormContext();
+  const { setValue, getValues } = useFormContext();
   const { results, isLoading, searchWords } = useSearch(query);
 
   const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
     setQuery(e.target?.value as string);
+    if (companySearchName)
+      setValue(companySearchName, e.target?.value as string);
   };
 
   const showButton = !!(
@@ -44,6 +52,15 @@ const Container: FunctionComponent<ContainerProps> = function ({
     setValue(companySearchName as string, query);
   };
 
+  const initRef = useRef<boolean>(false);
+  useEffect(() => {
+    if (!companySearchName || initRef.current) return;
+    const value = getValues(companySearchName);
+    initRef.current = true;
+    if (!value) return;
+    setQuery(value);
+  }, [getValues, companySearchName]);
+
   return children({
     results,
     isLoading,

package/src/field/components/CompanyLookupInput/SearchResults/Mobile/Header/index.tsx

@@ -2,23 +2,30 @@ import { Button } from "@kanda-libs/ks-design-library";
 import React, { ChangeEvent, FunctionComponent } from "react";
 import HeaderSearch from "~/components/HeaderSearch";
 import { SEARCH_PLACEHOLDER } from "../../constants";
+import { useFormContext } from "react-hook-form";
 
 export interface HeaderProps {
   id: string;
   handleClose?: () => void;
   handleSearch?: (e: ChangeEvent<HTMLInputElement>) => void;
+  companySearchName?: string;
 }
 
 const Header: FunctionComponent<HeaderProps> = function ({
   id,
   handleClose,
   handleSearch = () => {},
+  companySearchName = "companySearch",
 }) {
+  const { watch } = useFormContext();
+  const value = watch(companySearchName);
   return (
     <HeaderSearch
       autoFocus
       onChange={handleSearch as () => void}
       placeholder={SEARCH_PLACEHOLDER}
+      searchName={companySearchName}
+      value={value}
       options={[
         <Button.Icon
           id={`${id}-close`}

package/src/field/components/CompanyLookupInput/SearchResults/Mobile/index.tsx

@@ -14,13 +14,19 @@ export type MobileProps = SearchResultsProps;
 const Mobile: FunctionComponent<MobileProps> = function ({
   modalId = "",
   handleSelect,
+  companySearchName,
   ...rest
 }) {
+  console.log({ companySearchName });
   return (
     <ModalContainer id={modalId}>
       {({ handleClose }) => (
         <>
-          <Container handleClose={handleClose} {...rest}>
+          <Container
+            handleClose={handleClose}
+            companySearchName={companySearchName}
+            {...rest}
+          >
             {({
               handleSearch,
               results,
@@ -37,6 +43,7 @@ const Mobile: FunctionComponent<MobileProps> = function ({
                       id={modalId}
                       handleClose={handleClose}
                       handleSearch={handleSearch}
+                      companySearchName={companySearchName}
                     />
                     {showButton && (
                       <Button.Link

package/src/field/components/CompanyLookupInput/index.tsx

@@ -36,6 +36,7 @@ const CompanyLookupInput: FunctionComponent<CompanyLookupInputProps> =
       companySelected,
       searchInputProps,
       searchResultsProps,
+      isDesktop,
       noCompanyCallback,
     } = useCompanyLookupInputProps({
       noCompanyCallback: initialNoCompanyCallback,
@@ -79,12 +80,12 @@ const CompanyLookupInput: FunctionComponent<CompanyLookupInputProps> =
             <div className={CLASS_NAMES.inputWrapper}>
               <Input
                 {...FIELDS.search}
-                name={companySearchName}
+                name={isDesktop ? companySearchName : "placeholder"}
                 label={label}
                 placeholder={placeholder}
                 {...searchInputProps}
               />
-              <BreakPoints desktop={soleTraderButton as JSX.Element} />
+              {soleTraderButton}
             </div>
             <SearchResults
               {...searchResultsProps}
@@ -99,3 +100,25 @@ const CompanyLookupInput: FunctionComponent<CompanyLookupInputProps> =
   };
 
 export default CompanyLookupInput;
+
+// {/* <BreakPoints
+//                 desktop={
+//                   <Input
+//                     {...FIELDS.search}
+//                     name={companySearchName}
+//                     label={label}
+//                     placeholder={placeholder}
+//                     {...searchInputProps}
+//                   />
+//                 }
+//                 mobile={
+//                   <button
+//                     id="company-search"
+//                     role="button"
+//                     className=""
+//                     {...mobileButtonProps}
+//                   >
+//                     {label}
+//                   </button>
+//                 }
+//               /> */}

package/src/field/components/CompanyLookupInput/useCompanyLookupInputProps.ts

@@ -10,6 +10,7 @@ import {
 import { CompanyLookupInputProps } from "./types";
 import { InputProps } from "~/field/components/Input";
 import { SearchResultsProps } from "~/field/components/CompanyLookupInput/SearchResults/types";
+import { StringIndexedObject } from "~/types";
 
 export type CompanyLookupInputArgs = Omit<
   CompanyLookupInputProps,
@@ -22,7 +23,9 @@ export interface CompanyLookupInputPropsHook {
   handleUnSelect?: () => void;
   searchInputProps?: InputProps;
   searchResultsProps?: SearchResultsProps;
+  mobileButtonProps?: StringIndexedObject;
   noCompanyCallback?: (name?: string) => void;
+  isDesktop: boolean;
 }
 
 export default function useCompanyLookupInputProps({
@@ -133,6 +136,15 @@ export default function useCompanyLookupInputProps({
     }
   }, [isDesktop, modalId, showModal]);
 
+  /**
+   * Handles focus
+   */
+  const handleMobileButtonClick = useCallback(() => {
+    if (!isDesktop) {
+      showModal(modalId);
+    }
+  }, [isDesktop, modalId, showModal]);
+
   /**
    * Handles click
    */
@@ -162,6 +174,11 @@ export default function useCompanyLookupInputProps({
     onClick: handleClick,
   };
 
+  const mobileButtonProps = {
+    onFocus: handleFocus,
+    onClick: handleMobileButtonClick,
+  };
+
   const searchResultsProps = { modalId, handleSelect };
 
   const inputCallback = (enteredName?: string) => {
@@ -208,6 +225,8 @@ export default function useCompanyLookupInputProps({
     handleUnSelect,
     searchInputProps: searchInputProps as InputProps,
     searchResultsProps: searchResultsProps as SearchResultsProps,
+    mobileButtonProps,
     noCompanyCallback: inputCallback,
+    isDesktop,
   };
 }