Updated numeric type to disable input and use only buttons and made d…

…ate and time fields clickable (#67) * Updated numeric type to disable input and use only buttons and made date and time fields clickable * updated versions
egovernments · May 21, 2024 · 9ae4007 · 9ae4007
1 parent 8c9ff1c
commit 9ae4007
Show file tree

Hide file tree

Showing 16 changed files with 50 additions and 46 deletions.
diff --git a/react/css/README.md b/react/css/README.md
@@ -42,6 +42,7 @@ frontend/micro-ui/web/public/index.html
 # Changelog
 
 ```bash
+1.8.2-coreui.16 Updated numeric type to disable input and use only buttons
 1.8.2-coreui.15 Updated ErrorMessage styles
 1.8.2-coreui.14 updated dropdown checkbox css
 1.8.2-coreui.13 added spacers

diff --git a/react/css/package.json b/react/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-css",
-  "version": "1.8.2-coreui.15",
+  "version": "1.8.2-coreui.16",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <[email protected]>",

diff --git a/react/css/src/digitv2/components/textInputV2.scss b/react/css/src/digitv2/components/textInputV2.scss
@@ -33,6 +33,13 @@
         border-right-style: hidden;
       }
     }
+
+    &.numeric-buttons-only{
+      input{
+        pointer-events: none !important;
+        cursor: not-allowed;
+      }
+    }
   }
 
   &.prefix {

diff --git a/react/example/package.json b/react/example/package.json
@@ -10,7 +10,7 @@
     "build": "webpack --mode production"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.1-beta.23",
+    "@egovernments/digit-ui-components": "0.0.1-beta.24",
     "@egovernments/digit-ui-libraries": "1.8.2-beta.1",
     "@egovernments/digit-ui-module-common": "1.7.10",
     "@egovernments/digit-ui-module-core": "1.8.1-beta.6",

diff --git a/react/example/public/index.html b/react/example/public/index.html
@@ -9,7 +9,7 @@
     rel='stylesheet' type='text/css'>
     <link
     rel="stylesheet"
-    href="https://unpkg.com/@egovernments/[email protected].15/dist/index.css"
+    href="https://unpkg.com/@egovernments/[email protected].16/dist/index.css"
   />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#00bcd1" />

diff --git a/react/modules/Project/package.json b/react/modules/Project/package.json
@@ -19,7 +19,7 @@
     },
     "dependencies": {
         "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
-        "@egovernments/digit-ui-components": "0.0.1-beta.23",
+        "@egovernments/digit-ui-components": "0.0.1-beta.24",
         "lodash": "^4.17.21",
         "react": "17.0.2",
         "react-date-range": "^1.4.0",

diff --git a/react/modules/core/package.json b/react/modules/core/package.json
@@ -14,7 +14,7 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.1-beta.23",
+    "@egovernments/digit-ui-components": "0.0.1-beta.24",
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",

diff --git a/react/modules/sample/package.json b/react/modules/sample/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
-    "@egovernments/digit-ui-components": "0.0.1-beta.23",
+    "@egovernments/digit-ui-components": "0.0.1-beta.24",
     "react": "17.0.2",
     "react-date-range": "^1.4.0",
     "react-dom": "17.0.2",

diff --git a/react/modules/sample/src/configs/SampleConfig.js b/react/modules/sample/src/configs/SampleConfig.js
@@ -444,6 +444,15 @@ export const newConfig = [
         disable: false,
         populators: { name: "numeric-Default", error: "Error!" },
       },
+      {
+        inline: true,
+        label: "disableTextField",
+        isMandatory: false,
+        description: "",
+        type: "numeric",
+        disable: false,
+        populators: { name: "numeric-disableTextField", error: "Error!", disableTextField:true},
+      },
       {
         inline: true,
         label: "With Innerlabel",

diff --git a/react/package.json b/react/package.json
@@ -77,7 +77,7 @@
     "@egovernments/digit-ui-module-sample": "0.0.1",
     "@egovernments/digit-ui-react-components": "1.7.10",
     "@egovernments/digit-ui-svg-components": "1.0.4",
-    "@egovernments/digit-ui-components": "0.0.1-beta.23",
+    "@egovernments/digit-ui-components": "0.0.1-beta.24",
     "babel-loader": "8.1.0",
     "clean-webpack-plugin": "4.0.0",
     "css-loader": "5.2.6",

diff --git a/react/ui-components/README.md b/react/ui-components/README.md
@@ -58,6 +58,7 @@ yarn storybook
 # Changelog
 
 ```bash
+0.0.1-beta.24 Updated numeric type to disable input and use only buttons and made date and time fields clickable
 0.0.1-beta.23 Updated ErrorMessage component to have new props named showIcon,truncateMessage and maxLength
 0.0.1-beta.22 From this version of ui-components the Toast component will have a new prop named type, replacing the seperate props for  info,warning and error
 0.0.1-beta.21 Added categorySelectAllState in the nestedmultiselect variant of multiselectdropdown

diff --git a/react/ui-components/package.json b/react/ui-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components",
-  "version": "0.0.1-beta.23",
+  "version": "0.0.1-beta.24",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
@@ -51,7 +51,7 @@
     "dist"
   ],
   "dependencies": {
-    "@egovernments/digit-ui-css": "1.8.2-coreui.15",
+    "@egovernments/digit-ui-css": "1.8.2-coreui.16",
     "@egovernments/digit-ui-libraries": "1.8.1-beta.1",
     "@egovernments/digit-ui-svg-components": "1.0.4",
     "@googlemaps/js-api-loader": "1.13.10",

diff --git a/react/ui-components/src/atoms/TextInput.js b/react/ui-components/src/atoms/TextInput.js
@@ -192,29 +192,6 @@ const TextInput = (props) => {
 
   const icon = renderIcon();
 
-  const openPicker = () => {
-    document.addEventListener("DOMContentLoaded", function () {
-      const dateInput = document.querySelector('input[type="date"]');
-      const timeInput = document.querySelector('input[type="time"]');
-
-      const handleClick = (event) => {
-        try {
-          event.target.showPicker();
-        } catch (error) {
-          window.alert(error);
-        }
-      };
-
-      if (dateInput) {
-        dateInput.addEventListener("click", handleClick);
-      }
-
-      if (timeInput) {
-        timeInput.addEventListener("click", handleClick);
-      }
-    });
-  };
-
   const inputClassNameForMandatory = `${
     user_type ? "digit-employeeCard-inputError" : "digit-card-inputError"
   } ${props.disabled ? "disabled" : ""} ${props.customClass || ""} ${
@@ -247,7 +224,7 @@ const TextInput = (props) => {
           props.disabled ? "disabled" : ""
         }  ${props.nonEditable ? "noneditable" : ""} ${
           props.error ? "error" : ""
-        } ${defaultType ? defaultType : ""} ${
+        } ${defaultType ? defaultType : ""} ${props?.populators?.disableTextField ? "numeric-buttons-only" : ""} ${
           props?.populators?.prefix ? "prefix" : ""
         } ${props?.populators?.suffix ? "suffix" : ""} `}
         style={props?.textInputStyle ? { ...props.textInputStyle } : {}}
@@ -315,11 +292,15 @@ const TextInput = (props) => {
               nonEditable={props.nonEditable}
               config={props.config}
               populators={props.populators}
-              onclick={
-                props.type === "date" || props.type === "time"
-                  ? openPicker()
-                  : null
-              }
+              onClick={(event) => {
+                if (props.type === "date" || (props.type === "time")) {
+                  try {
+                    event.target.showPicker();
+                  } catch (error) {
+                    console.error("Error opening picker:", error);
+                  }
+                }
+              }}
             />
             {renderSuffix()}
             {props.signature && props.signatureImg}
@@ -403,11 +384,15 @@ const TextInput = (props) => {
               nonEditable={props.nonEditable}
               config={props.config}
               populators={props.populators}
-              onClick={
-                props.type === "date" || props.type === "time"
-                  ? openPicker()
-                  : null
-              }
+              onClick={(event) => {
+                if (props.type === "date" || (props.type === "time")) {
+                  try {
+                    event.target.showPicker();
+                  } catch (error) {
+                    console.error("Error opening picker:", error);
+                  }
+                }
+              }}
             />
             {renderSuffix()}
             {props.signature && props.signatureImg}

diff --git a/react/ui-components/src/hoc/stories/InputFields.stories.js b/react/ui-components/src/hoc/stories/InputFields.stories.js
@@ -72,6 +72,7 @@ const commonArgs = {
       console.log("Icon Clicked");
     },
     resizeSmart: false,
+    disableTextField:false
   },
   error: "",
   label: "",

diff --git a/react/ui-components/yarn-error.log b/react/ui-components/yarn-error.log
@@ -29,7 +29,7 @@ Trace:
 npm manifest: 
   {
     "name": "@egovernments/digit-ui-components",
-    "version": "0.0.1-beta.23",
+    "version": "0.0.1-beta.24",
     "license": "MIT",
     "main": "dist/index.js",
     "module": "dist/index.modern.js",
@@ -80,7 +80,7 @@ npm manifest:
       "dist"
     ],
     "dependencies": {
-      "@egovernments/digit-ui-css": "1.8.2-coreui.15",
+      "@egovernments/digit-ui-css": "1.8.2-coreui.16",
       "@egovernments/digit-ui-libraries": "1.8.1-beta.1",
       "@egovernments/digit-ui-svg-components": "1.0.4",
       "@googlemaps/js-api-loader": "1.13.10",

diff --git a/react/yarn-error.log b/react/yarn-error.log
@@ -91,7 +91,7 @@ npm manifest:
     "dependencies": {
       "lodash": "4.17.21",
       "microbundle-crl": "0.13.11",
-      "@egovernments/digit-ui-components": "0.0.1-beta.23",
+      "@egovernments/digit-ui-components": "0.0.1-beta.24",
       "babel-loader": "8.1.0",
       "clean-webpack-plugin": "4.0.0",
       "react": "17.0.2",