gbs-add-block 0.0.20 → 0.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "React Component Library",
   "files": [
     "index.js",

package/source/components/datepicker/index.tsx

@@ -13,7 +13,7 @@ import type { DatePickerProps } from "./types";
 
 export const DatePicker = ({
   placeholder = undefined,
-  selectedDate: initialSelectedDate = new Date(),
+  selectedDateValue,
   minDate = null,
   maxDate = null,
   yearLimitStart = 50,
@@ -25,15 +25,25 @@ export const DatePicker = ({
   const [currentMonth, setCurrentMonth] = useState(new Date().getMonth());
   const [currentYear, setCurrentYear] = useState(new Date().getFullYear());
   const [days, setDays] = useState<any>([]);
-  const [selectedDate, setSelectedDate] = useState(initialSelectedDate);
+  const [selectedDate, setSelectedDate] = useState<any>(
+    selectedDateValue ? selectedDateValue : new Date()
+  );
   const [hasMounted, setHasMounted] = useState(false);
   const [showPlaceHolder, setShowPlaceHolder] = useState<string | undefined>(
-    placeholder
+    selectedDateValue ? undefined : placeholder
   );
 
   const dateRef = useRef<HTMLDivElement>(null);
   const today = new Date();
 
+  useEffect(() => {
+    if (selectedDateValue) {
+      setSelectedDate(selectedDateValue);
+      setCurrentMonth(selectedDateValue.getMonth());
+      setCurrentYear(selectedDateValue.getFullYear());
+    }
+  }, [selectedDateValue]);
+
   // This useEffect will ensure the server and client
   // rendererd date will not mismatch
   useEffect(() => {
@@ -131,14 +141,8 @@ export const DatePicker = ({
           elements={calender}
           svgClass={"stroke-black fill-none dark:stroke-white"}
         />
-        {showPlaceHolder ? (
-          <div className="flex flex-col text-left">
-            <span className="text-gray-500 text-xs">{showPlaceHolder}</span>
-            <div className="text-sm">{new Date().toLocaleDateString()}</div>
-          </div>
-        ) : (
-          <span>{selectedDate.toLocaleDateString()}</span>
-        )}
+
+        {showPlaceHolder ? showPlaceHolder : selectedDate.toLocaleDateString()}
       </button>
 
       {showDatepicker && (
@@ -240,9 +244,9 @@ export const DatePicker = ({
                 const isDisabled: any =
                   (minDate && day < minDate) || (maxDate && day > maxDate);
                 const isSelected =
-                  day.getDate() === selectedDate.getDate() &&
-                  day.getMonth() === selectedDate.getMonth() &&
-                  day.getFullYear() === selectedDate.getFullYear();
+                  day.getDate() === selectedDate?.getDate() &&
+                  day.getMonth() === selectedDate?.getMonth() &&
+                  day.getFullYear() === selectedDate?.getFullYear();
 
                 return (
                   <button
@@ -251,7 +255,7 @@ export const DatePicker = ({
                     onClick={() => !isDisabled && selectDate(day)}
                     disabled={isDisabled}
                     className={`text-center p-1 w-8 h-8 cursor-pointer rounded-md hover:bg-gray-200 transition duration-150 ease-in-out ${
-                      isSelected ? "bg-black text-white hover:bg-gray-800" : ""
+                      isSelected ? "bg-black text-white hover:bg-gray-800 " : ""
                     } ${
                       isDisabled
                         ? "bg-gray-100 text-gray-400 cursor-not-allowed"

package/source/components/datepicker/types.ts

@@ -1,6 +1,6 @@
 export type DatePickerProps = {
   placeholder?: string | undefined;
-  selectedDate?: Date;
+  selectedDateValue?: Date;
   minDate?: Date | null;
   maxDate?: Date | null;
   yearLimitStart?: number;

package/source/components/select/index.tsx

@@ -27,6 +27,8 @@ interface ItemsProps {
 
 const Select = forwardRef<any, SelectProps>((props, ref) => {
   const {
+    id = "",
+    name = "",
     placeholder = "Select an Item...",
     items,
     lazy = false,
@@ -34,6 +36,7 @@ const Select = forwardRef<any, SelectProps>((props, ref) => {
     onSelect,
     selectedItem: initialSelectedItem,
     error = undefined,
+    onFiltering,
   } = props;
 
   const [showPopover, setShowPopover] = useState(false);
@@ -146,7 +149,7 @@ const Select = forwardRef<any, SelectProps>((props, ref) => {
   }));
 
   return (
-    <div className="relative w-full" ref={selectRef}>
+    <div className="relative w-full" ref={selectRef} id={id}>
       <div className="w-full relative">
         <button
           className={`flex items-center ${
@@ -192,7 +195,10 @@ const Select = forwardRef<any, SelectProps>((props, ref) => {
                 className="w-full outline-none dark:bg-black"
                 ref={inputRef}
                 value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
+                onChange={(e) => {
+                  setSearchTerm(e.target.value);
+                  if (onFiltering) onFiltering(e.target.value);
+                }}
               />
             </div>
           )}

package/source/components/select/types.ts

@@ -4,10 +4,14 @@ interface ItemsProps {
 }
 
 export type SelectProps = {
+  id?: string;
+  name?: string;
+  error?: undefined | string;
   placeholder?: string;
   items?: ItemsProps[] | string;
   lazy?: boolean;
   showSearch?: boolean;
   onSelect?: any;
   selectedItem?: string;
+  onFiltering?: any;
 };