naria-ui 0.1.37 → 0.1.38

package/lib/components/Select/Select.tsx

@@ -1,54 +1,143 @@
-import {FC, useEffect, useState} from "react";
-import AngleDown from "../../../src/assets/icons/angle-down.svg?react";
-import Close from '../../../src/assets/icons/close.svg?react';
+import {FC, useEffect, useRef, useState} from "react";
+import AngleDown from "../../../assets/icons/angle-down.svg?react";
+import Close from '../../../assets/icons/close.svg?react';
+import Search from '../../../assets/icons/search.svg?react';
 import {useWidth} from "../../../hooks/use-width";
 import Loading from "../../../shared/loading/Loading";
 import './select.scss';
 import {addNavigation, onHashChanges, removeNavigation} from "../../utils/navigator";
+import useClickOutside from "../../../hooks/click-outside";
+
+interface Pagination {
+    page?: number;
+    pageLabel?: string;
+    size?: number;
+    sizeLabel?: string;
+}
+
+interface SDS extends Pagination {
+    isLoading?: boolean;
+}
 
 export interface props {
-    list?: any[];
+    options?: any[];
     label?: string;
     title: string;
     value?: string;
-    api?: any;
-    maxHeight?: string;
-    theme?: "secondary";
+    api?: string;
     hasError?: string | null;
-    size?: "md" | "sm";
-    onSelectChange?: any;
     selected?: any;
+    placeholder?: string;
+    disabled?: boolean;
+    pagination?: Pagination;
+    optionFilterLabel?: string;
+    hasSearch?: boolean;
+    onSelectChange?: any;
 }
 
 export const Select: FC<props> = ({
-                                      list, label, hasError,
-                                      title, value, api,
-                                      maxHeight = "max-h-64", theme = "secondary", size = "md",
-                                      onSelectChange,
-                                      selected
+                                      options,
+                                      label,
+                                      hasError,
+                                      title,
+                                      value,
+                                      api,
+                                      selected,
+                                      placeholder,
+                                      disabled = false,
+                                      pagination,
+                                      optionFilterLabel,
+                                      hasSearch = false,
+                                      onSelectChange
                                   }) => {
+    let isSubscribed = true;
     const getDeviceWidth = useWidth();
+
+    const isHashChanged = onHashChanges('#select');
     const [isShow, setIsShow] = useState(false);
     const [isLoading, setIsLoading] = useState(true);
-    const [localSelected, setLocalSelected] = useState(null);
-    const [localList, setLocalList] = useState(null);
+    const [localSelected, setLocalSelected] = useState<string | null>(null);
+    const [localOptions, setLocalOptions] = useState(null);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [localPagination, setLocalPagination] = useState<SDS>({
+        page: 1,
+        pageLabel: 'page',
+        size: 20,
+        sizeLabel: 'size',
+        isLoading: false
+    });
+    const localApi = useRef<string | undefined>(undefined);
+    const wrapperRef = useRef(undefined);
+    const handlerRef = useRef(undefined);
+
+    const getData = async () => {
+        if (localApi?.current) {
+            try {
+                const response = await fetch(localApi?.current);
+                if (!response.ok) {
+                    throw new Error(`Response status: ${response.status}`);
+                }
+                return await response.json();
+            } catch (error) {
+                console.error(error.message);
+            }
+        }
+
+    }
+
+    useEffect(() => {
+        return () => {
+            isSubscribed = false;
+        };
+    }, [])
     useEffect(() => {
-        if (api) {
+        if (api?.length) {
+            localApi.current = api;
+            if (localApi.current.includes(pagination?.pageLabel || 'page')) {
+                const url = new URL(api);
+                url.searchParams.set(pagination?.pageLabel || 'page', (pagination?.page || localPagination.page).toString());
+                url.searchParams.set(pagination?.sizeLabel || 'size', (pagination?.size || localPagination.size).toString());
+                localApi.current = url.href;
+            }
             setIsLoading(true);
-            api().then((res) => {
-                setIsLoading(false);
-                setLocalList(res?.data?.message ? [] : res.data);
+            getData().then((res) => {
+                if (isSubscribed) {
+                    setIsLoading(false);
+                    setLocalOptions(res);
+                }
             })
         }
-    }, [api]);
-    useEffect(() => {
-        if (getDeviceWidth < 1024) {
+    }, [api, pagination]);
 
+    useEffect(() => {
+        if (localPagination.isLoading) {
+            if (localApi.current.includes(pagination?.pageLabel || 'page')) {
+                const url = new URL(localApi.current);
+                url.searchParams.set(pagination?.pageLabel || 'page', (localPagination.page).toString());
+                localApi.current = url.href;
+            }
+            getData().then((res) => {
+                if (isSubscribed) {
+                    setIsLoading(false);
+                    setLocalPagination({
+                        ...localPagination,
+                        isLoading: false
+                    })
+                    setLocalOptions([
+                        ...localOptions,
+                        ...res
+                    ]);
+                }
+            })
+        }
+    }, [localPagination]);
+    useEffect(() => {
+        if (getDeviceWidth < 768) {
             if (isShow) {
                 addNavigation('select');
                 document.body.style.overflow = 'hidden';
+                handlerRef.current?.focus();
             } else {
-
                 if (window.location.hash && !document.referrer.includes('#')) {
                     removeNavigation();
                 }
@@ -58,31 +147,70 @@ export const Select: FC<props> = ({
     }, [isShow]);
 
     useEffect(() => {
-        if (label?.length) {
-            setLocalSelected(localList?.find(item => item[label] === selected));
-        } else {
-            setLocalSelected(selected);
+        if (selected && options?.length) {
+            if (options?.find(item => item[label] === selected)) {
+                setLocalSelected(options?.find(item => item[label] === selected));
+            } else {
+                setLocalSelected(selected);
+            }
+        }
+    }, [selected]);
+
+    useEffect(() => {
+        if (localSelected) {
+            if (hasSearch) {
+                if (value?.length && localOptions?.find(item => item[label] === localSelected[label])) {
+                    setSearchTerm(localOptions?.find(item => item[label] === localSelected[label])[value] || '');
+                } else {
+                    setSearchTerm(localSelected);
+                }
+            }
         }
-    }, [selected, localList]);
+    }, [localSelected]);
 
     useEffect(() => {
-        if (list?.length) {
-            setLocalList(list)
+        if (isHashChanged) {
+            setIsShow(false)
         }
-    }, [list]);
+    }, [isHashChanged])
+
+
+    useEffect(() => {
+        if (options?.length) {
+            setLocalOptions(options)
+        }
+    }, [options]);
 
     const onToggle = () => {
+        if (hasSearch) {
+            setLocalOptions(options)
+        }
         setIsShow(prevState => !prevState);
     }
-    const onToggleEvent = (e) => {
-        if (e?.target?.className.toString()?.includes('backdrop-select')) {
-            onToggle()
+    const onClose = () => {
+        if (hasSearch) {
+            setLocalOptions(options)
+            if (typeof localSelected === "string") {
+                setSearchTerm(localSelected);
+            } else {
+                setSearchTerm(localSelected ? localSelected[value] : "")
+            }
         }
+        setIsShow(false);
     }
     const onSelect = (item) => {
+        if (hasSearch) {
+            if (value?.length) {
+                setSearchTerm(item[value]);
+            } else {
+                setSearchTerm(item);
+            }
+        }
         setLocalSelected(item);
         onToggle();
-        onSelectChange(item);
+        if (onSelectChange) {
+            onSelectChange(item);
+        }
     }
 
     const getActiveClass = (item) => {
@@ -96,68 +224,149 @@ export const Select: FC<props> = ({
             return "bg-grey-100"
         }
     }
+    const onScroll = (e) => {
+        if (localOptions?.length && !localPagination.isLoading) {
+            const bottom = e.target.offsetHeight + e.target.scrollTop >= e.target.scrollHeight - 100;
+
+            if (bottom) {
+                setLocalPagination({
+                    page: localPagination.page + 1,
+                    isLoading: true
+                })
+            }
+        }
+
+    }
+    const onSearch = (e) => {
+        const tempList = e?.target?.value?.length ? options.filter(val => typeof val === "object" ? val[value].includes(e?.target?.value) : val.includes(e?.target?.value)) : options
+        setLocalOptions(tempList)
+        setSearchTerm(e?.target?.value)
+        if (!isShow) {
+            setIsShow(true)
+        }
+    }
+    useClickOutside(wrapperRef, handlerRef, onClose);
     return (
-        <div className="naria-select">
+        <div className={`nariaSelect ${disabled ? 'nariaSelect-disabled' : ''}`}>
             <label
                 className={`cursor-pointer
                 ${hasError && "!text-danger-100"}`}>
                 <span className={``}>{title}</span>
-                <button type="button"
-                        className={`relative z-20 flex items-center mt-1 text-base justify-between gap-2 w-full
-                         ${localSelected ? "text-dark-100" : "text-grey-300"}
-                         ${hasError && "!border-danger-100 focus:border-danger-100 outline-danger-100"}`}
-                        onClick={onToggle}>
-                    {
-                        localSelected ? (
-                            value?.length ? localSelected[value] : localSelected
-                        ) : "انتخاب"
-                    } <AngleDown
-                    className={`w-4 h-4 transition ease duration-200 ${!isShow ? "rotate-0" : "rotate-180"}`}/>
-                </button>
+                {
+                    hasSearch ? (
+                        <div className="nariaSearchInput">
+                            <input ref={handlerRef}
+                                   placeholder={placeholder?.length ? placeholder : "Select"}
+                                   className={`${localSelected ? "text-dark-100" : "text-grey-300"} 
+                                ${hasError && "!border-danger-100 focus:border-danger-100 outline-danger-100"}`}
+                                   value={searchTerm}
+                                   disabled={disabled} type="text" onClick={onToggle} onChange={onSearch}/>
+                            {
+                                isShow ? (
+                                    <Search
+                                        className="nariaSearchIcon"/>
+                                ) : (
+                                    <AngleDown
+                                        className={`nariaArrowIcon ${isShow ? "nariaArrowIcon-rotate-180" : ""}`}/>
+                                )
+                            }
+
+
+                        </div>
+                    ) : (
+                        <button type="button"
+                                ref={handlerRef}
+                                disabled={disabled}
+                                className={`nariaHandler ${localSelected ? "text-dark-100" : "text-grey-300"} 
+                                ${hasError && "!border-danger-100 focus:border-danger-100 outline-danger-100"}`}
+                                onClick={onToggle}>
+                            {
+                                localSelected ? (
+                                    value?.length ? localSelected[value] : localSelected
+                                ) : (placeholder?.length ? placeholder : "Select")
+                            } <AngleDown
+                            className={`nariaArrowIcon ${isShow ? "nariaArrowIcon-rotate-180" : ""}`}/>
+                        </button>
+                    )
+                }
+
             </label>
 
             {
                 isShow ? (
                     <div
-                        className={`wrapper ${getDeviceWidth < 1024 ? "mobile" : ""}`}>
+                        className={`nariaListWrapper ${getDeviceWidth < 768 ? "nariaListWrapper-mobile" : ""}`}
+                        ref={wrapperRef}>
+                        {
+                            hasSearch && getDeviceWidth < 768 ? (
+                                <div className="nariaSearchInput">
+                                    <input ref={handlerRef}
+                                           placeholder={placeholder?.length ? placeholder : "Select"}
+                                           className={`${localSelected ? "text-dark-100" : "text-grey-300"} 
+                                ${hasError && "!border-danger-100 focus:border-danger-100 outline-danger-100"}`}
+                                           value={searchTerm}
+                                           disabled={disabled} type="text" onChange={onSearch}/>
+                                    <Search
+                                        className="nariaSearchIcon"/>
+
+
+                                </div>
+                            ) : undefined
+                        }
                         <div
-                            className={`list ${getDeviceWidth < 1024 ? "mobile" : `desktop ${maxHeight}`}`}>
+                            className={`nariaList ${getDeviceWidth < 768 ? "nariaList-mobile" : `nariaList-desktop`}`}
+                            onScroll={onScroll}>
                             {
                                 api && isLoading ? (
-                                    <div className="py-10 flex justify-center">
-                                        <Loading size="w-7 h-7"/>
+                                    <div className="nariaLoadingWrapper">
+                                        <Loading/>
                                     </div>
                                 ) : (
                                     <>
                                         {
-                                            getDeviceWidth < 1024 ? (
+                                            getDeviceWidth < 768 ? (
                                                 <div className="sticky top-0 text-left">
-                                                    <button className="p-3" onClick={onToggle}>
+                                                    <button className="p-3" onClick={onClose} disabled={disabled}>
                                                         <Close className="w-6"/>
                                                     </button>
                                                 </div>
                                             ) : undefined
                                         }
                                         {
-                                            localList?.map((item, index) => {
-                                                return (
-                                                    <button type="button" onClick={() => onSelect(item)}
-                                                            key={index.toString()}
-                                                            className={`text-right py-2.5 px-4 text-base hover:bg-grey-100 rounded-lg ${getActiveClass(item)}`}>
-                                                        {value?.length ? item[value] : item}
-                                                    </button>
-                                                )
-                                            })
+                                            localOptions?.length ? (
+                                                <>
+                                                    {
+                                                        localOptions?.map((item, index) => {
+                                                            return (
+                                                                <button type="button" onClick={() => onSelect(item)}
+                                                                        disabled={disabled}
+                                                                        key={index.toString()}
+                                                                        className={`text-right py-2.5 px-4 text-base hover:bg-grey-100 rounded-lg ${getActiveClass(item)}`}>
+                                                                    {value?.length ? item[value] : item}
+                                                                </button>
+                                                            )
+                                                        })
+                                                    }
+                                                </>
+                                            ) : (
+                                                <div>
+                                                    No Data
+                                                </div>
+                                            )
+                                        }
+
+
+                                        {
+                                            localPagination.isLoading ? (
+                                                <div className="nariaLoadingMoreWrapper">
+                                                    <Loading/>
+                                                </div>
+                                            ) : undefined
                                         }
                                     </>
                                 )
                             }
                         </div>
-                        <div
-                            className={`backdrop-select`}
-                            onClick={onToggleEvent}>
-
-                        </div>
                     </div>
                 ) : undefined
             }

package/lib/components/Select/select.scss

@@ -1,8 +1,11 @@
-.naria-select {
+
+.nariaSelect {
   position: relative;
-  .wrapper {
+
+  .nariaListWrapper {
     overflow: hidden;
-    &.mobile {
+
+    &.nariaListWrapper-mobile {
       position: fixed;
       top: 0;
       right: 0;
@@ -11,34 +14,111 @@
       z-index: 97;
     }
   }
-  .list {
+
+  .nariaList {
     display: flex;
     flex-direction: column;
     width: 100%;
     z-index: 99;
-    &.mobile {
+    position: relative;
+    overflow: auto;
+
+    &.nariaList-mobile {
       position: relative;
       height: 100%;
     }
-    &.desktop {
-      overflow: auto;
+
+    &.nariaList-desktop {
       position: absolute;
       animation: fadeInTranslateY 0.3s ease-out forwards;
+      max-height: 100px;
+    }
+
+    .nariaLoadingWrapper {
+      padding: 24px 0;
+      display: flex;
+      justify-content: center;
+
+    }
+
+    .nariaLoadingMoreWrapper {
+      position: sticky;
+      bottom: 0;
+      text-align: center;
+      width: 100%;
+
+      .nariaLoading {
+        width: 20px;
+      }
+    }
+  }
+
+  .nariaSearchInput {
+    position: relative;
+    display: flex;
+
+    input {
+      width: 100%;
+      padding-right: 20px;
     }
+
+    .nariaArrowIcon, .nariaSearchIcon {
+      position: absolute;
+      bottom: 0;
+      margin-top: auto;
+      margin-bottom: auto;
+      top: 0;
+      right: 6px;
+      width: 12px;
+      height: 12px;
+    }
+
   }
-  .backdrop-select {
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
+
+  .nariaHandler {
+    position: relative;
+    display: flex;
+    gap: 4px;
     width: 100%;
-    height: 100%;
-    z-index: 98;
-    background-color: rgba(0, 0, 0, 0.2);
+    align-items: center;
+    justify-content: space-between;
+
+    .nariaArrowIcon {
+      width: 12px;
+      height: 12px;
+      transition: transform 0.4s;
+
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      transform: rotate(0deg);
+
+      &.nariaArrowIcon-rotate-180 {
+        -webkit-transform: rotate(180deg);
+        -moz-transform: rotate(180deg);
+        -o-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+        transform: rotate(180deg);
+      }
+    }
   }
 }
 
-
+html[dir="rtl"] {
+  .nariaSelect {
+    .nariaSearchInput {
+      input {
+        padding-left: 20px;
+        padding-right: 0;
+      }
+      .nariaArrowIcon, .nariaSearchIcon {
+        left: 6px;
+        right: auto;
+      }
+    }
+  }
+}
 
 @keyframes fadeInTranslateY {
   from {

package/lib/utils/navigator.ts

@@ -10,11 +10,11 @@ export const addNavigation = (state: string) => {
 }
 
 
-export const onHashChanges = () => {
+export const onHashChanges = (state: string) => {
     const [isHashChanged, setIsHashChanged] = useState(false)
     useEffect(() => {
         const handleHashChange = (e) => {
-            if(window.location.hash !== "#modal") {
+            if(window.location.hash !== state) {
                 setIsHashChanged(true);
             } else {
                 setIsHashChanged(false);

package/package.json

@@ -5,7 +5,7 @@
     "name": "Mohammad Mehdi Mohammadi",
     "url": ""
   },
-  "version": "0.1.37",
+  "version": "0.1.38",
   "type": "module",
   "main": "dist/naria-ui.cjs.js",
   "module": "dist/naria-ui.es.js",
@@ -19,7 +19,7 @@
     "./dist/*.css": "./dist/*.css",
     "./assets/*.css": "./assets/*.css"
   },
-  "files": ["*.md", "dist", "lib", "es", "src"],
+  "files": ["*.md", "dist", "lib", "es"],
   "publishConfig": {
     "access": "public"
   },

package/src/App.tsx

@@ -1,15 +0,0 @@
-import './App.css'
-import {Button, Input, Select} from "../lib";
-
-function App() {
-
-    return (
-        <>
-            <Button value="sadasd"/>
-            <Input placeholder="test" label="test"/>
-            <Select label="id" value="name" list = {[{id: 1, name: "sad"}]} />
-        </>
-    )
-}
-
-export default App

package/src/assets/icons/angle-down.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M241 337c-9.4 9.4-24.6 9.4-33.9 0L47 177c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143L367 143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9L241 337z"/></svg>

package/src/assets/icons/angle-left.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc. --><path d="M47 239c-9.4 9.4-9.4 24.6 0 33.9L207 433c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L97.9 256 241 113c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L47 239z"/></svg>

package/src/assets/icons/angle-right.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc. --><path d="M273 239c9.4 9.4 9.4 24.6 0 33.9L113 433c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l143-143L79 113c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L273 239z"/></svg>

package/src/assets/icons/angle-up.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M207 143c9.4-9.4 24.6-9.4 33.9 0L401 303c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-143-143L81 337c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9L207 143z"/></svg>

package/src/assets/icons/close.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z"/></svg>

package/src/assets/styles/index.css

@@ -1 +0,0 @@
-@import "./select.scss";