gbs-add-block 0.0.15 → 0.0.17

package/package.json

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

package/source/components/datepicker/index.tsx

@@ -27,6 +27,9 @@ export const DatePicker = ({
   const [days, setDays] = useState<any>([]);
   const [selectedDate, setSelectedDate] = useState(initialSelectedDate);
   const [hasMounted, setHasMounted] = useState(false);
+  const [showPlaceHolder, setShowPlaceHolder] = useState<string | undefined>(
+    placeholder
+  );
 
   const dateRef = useRef<HTMLDivElement>(null);
   const today = new Date();
@@ -68,6 +71,7 @@ export const DatePicker = ({
 
   const selectDate = (date: any) => {
     setSelectedDate(date);
+    setShowPlaceHolder(undefined);
     setShowDatepicker(false);
     if (onDateChange) onDateChange(date);
   };
@@ -126,8 +130,8 @@ export const DatePicker = ({
           elements={calender}
           svgClass={"stroke-black fill-none dark:stroke-white"}
         />
-        {placeholder ? (
-          <span className="text-gray-500">{placeholder}</span>
+        {showPlaceHolder ? (
+          <span className="text-gray-500">{showPlaceHolder}</span>
         ) : (
           <span>{selectedDate.toLocaleDateString()}</span>
         )}

package/source/components/uploader/ProgressAnimation.tsx

@@ -7,20 +7,28 @@
 
 import React from "react";
 
-const AestheticProcessingAnimation = () => {
+type AestheticProcessingAnimationProps = {
+  progressPercentage: number;
+};
+
+const AestheticProcessingAnimation = ({
+  progressPercentage,
+}: AestheticProcessingAnimationProps) => {
   return (
     <div className="w-full max-w-md mx-auto p-2">
       <div className="w-full h-1 bg-gray-200 rounded-full overflow-hidden">
         <div className="h-full w-1/3 bg-black rounded-full animate-processing"></div>
       </div>
       <p className="text-xs mt-2 text-center">
-        Uploading in Progress, Please Wait...
+        Uploading in Progress {Math.floor(progressPercentage)}%, Please Wait...
       </p>
     </div>
   );
 };
 
-const AestheticProcessingAnimationWithStyles = () => (
+const AestheticProcessingAnimationWithStyles = ({
+  progressPercentage,
+}: AestheticProcessingAnimationProps) => (
   <>
     <style jsx global>{`
       @keyframes processing {
@@ -35,7 +43,7 @@ const AestheticProcessingAnimationWithStyles = () => (
         animation: processing 2s ease-in-out infinite;
       }
     `}</style>
-    <AestheticProcessingAnimation />
+    <AestheticProcessingAnimation progressPercentage={progressPercentage} />
   </>
 );