sprint-asia-custom-component 0.1.167 → 0.1.169

package/dist/index.js

@@ -29145,6 +29145,14 @@
     }, props.subtitle))))))));
   };
 
+  const formatNumber = val => {
+    if (!val) return "";
+    return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+  };
+  const parseNumber = val => {
+    if (!val) return "";
+    return val.replace(/\./g, ""); // hapus titik biar jadi angka murni
+  };
   const TextInput = ({
     title = "",
     rightComponent = null,
@@ -29165,15 +29173,27 @@
   }) => {
     const [isFocused, setIsFocused] = React.useState(false);
     const [showPassword, setShowPassword] = React.useState(false);
-    const handleFocus = () => {
-      setIsFocused(true);
-    };
-    const handleBlur = () => {
-      setIsFocused(false);
-    };
-    const handleTogglePasswordVisibility = () => {
-      setShowPassword(!showPassword);
+    const handleFocus = () => setIsFocused(true);
+    const handleBlur = () => setIsFocused(false);
+    const handleTogglePasswordVisibility = () => setShowPassword(!showPassword);
+    const handleChange = e => {
+      let val = e.target.value;
+      if (type === "number") {
+        // hapus semua karakter non digit
+        const raw = parseNumber(val.replace(/\D/g, ""));
+        // kirim angka murni ke parent
+        onChangeInput({
+          ...e,
+          target: {
+            ...e.target,
+            value: raw
+          }
+        });
+        return;
+      }
+      onChangeInput(e);
     };
+    const displayValue = type === "number" ? value ? formatNumber(value) : "" : value;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: `w-full ${className}`
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -29194,27 +29214,27 @@
                 ${mode === "primary" && "text-black"}
                 ${mode === "disable" && "text-neutral50"}
                 ${mode === "danger" && "text-danger500"}
-                `
+              `
     })), /*#__PURE__*/React__default["default"].createElement("input", {
       min: minimum !== null && minimum !== undefined && type === "number" ? minimum : undefined,
       max: maximum !== null && maximum !== undefined && type === "number" ? maximum : undefined,
-      type: type === "password" ? showPassword ? "text" : "password" : type,
+      type: type === "password" ? showPassword ? "text" : "password" : "text" // number tetap text
+      ,
       className: `py-2.5 px-4 w-full font-normal text-sm text-black rounded-md border
-                        ${!value && mode === "default" && "bg-neutral20 border-neutral50 focus:outline-2 outline-primary500"}
-                        ${value && mode === "default" && "bg-neutral20 border-black focus:outline-2 outline-primary500"}
-                        ${isFocused && mode === "default" && "bg-neutral20 border-primary500"}
-                        ${mode === "disable" && "bg-neutral30 border-neutral50"}
-                        ${mode === "white" && "bg-white border-neutral50"}
-                        ${mode === "danger" && "bg-danger50 border-danger500 focus:outline-2 outline-danger500"}
-                        ${leftIcon || leftAdornment ? "pl-8" : "pl-3"}
-                        ${leftIcon && leftAdornment ? "pl-16" : "pl-3"}
-                        ${rightIcon || rightAdornment ? "pr-8" : "pr-3"}
-                        ${rightIcon && rightAdornment ? "pr-16" : "pr-3"}`,
+            ${!value && mode === "default" && "bg-neutral20 border-neutral50 focus:outline-2 outline-primary500"}
+            ${value && mode === "default" && "bg-neutral20 border-black focus:outline-2 outline-primary500"}
+            ${isFocused && mode === "default" && "bg-neutral20 border-primary500"}
+            ${mode === "disable" && "bg-neutral30 border-neutral50"}
+            ${mode === "white" && "bg-white border-neutral50"}
+            ${mode === "danger" && "bg-danger50 border-danger500 focus:outline-2 outline-danger500"}
+            ${leftIcon || leftAdornment ? "pl-8" : "pl-3"}
+            ${leftIcon && leftAdornment ? "pl-16" : "pl-3"}
+            ${rightIcon || rightAdornment ? "pr-8" : "pr-3"}
+            ${rightIcon && rightAdornment ? "pr-16" : "pr-3"}`,
       placeholder: placeholder,
-      "data-mask": "000.000.000-00",
       disabled: mode === "disable",
-      value: value,
-      onChange: onChangeInput,
+      value: displayValue,
+      onChange: handleChange,
       onFocus: handleFocus,
       onBlur: handleBlur
     }), type === "password" && /*#__PURE__*/React__default["default"].createElement("span", {
@@ -29234,7 +29254,7 @@
                 ${mode === "primary" && "text-neutral50"}
                 ${mode === "disable" && "text-neutral50"}
                 ${mode === "danger" && "text-danger500"}
-                `
+              `
     }))), footer && /*#__PURE__*/React__default["default"].createElement("div", {
       className: "mt-1"
     }, mode === "danger" ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -51870,7 +51890,8 @@
     footer = null,
     mode = "default",
     placeholder = "",
-    redeemType = ""
+    redeemType = "",
+    isEdited = true // ✅ tambahkan prop isEdited
   }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const wrapperRef = React.useRef(null);
@@ -51919,12 +51940,14 @@
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: `
                         flex items-center rounded-md overflow-hidden w-full pr-3
+                        ${!isEdited ? "bg-neutral30 cursor-not-allowed" : ""}
                         ${mode === "danger" ? "border border-danger500 bg-danger50" : "border border-neutral50 bg-neutral20"}
                     `
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "flex items-center px-3 py-2 cursor-pointer border-r border-neutral50 mr-3",
+      className: `flex items-center px-3 py-2 border-r border-neutral50 mr-3 
+                          ${isEdited && redeemType !== "ppob" ? "cursor-pointer" : "cursor-not-allowed"}`,
       onClick: () => {
-        if (redeemType !== "ppob") {
+        if (isEdited && redeemType !== "ppob") {
           setIsOpen(!isOpen);
         }
       }
@@ -51934,17 +51957,22 @@
       className: "w-4 h-4 object-cover rounded-full"
     }), /*#__PURE__*/React__default["default"].createElement("p", {
       className: "text-sm font-bold text-neutral300 ml-3 mr-2"
-    }, dropdownCountry.option), redeemType !== "ppob" && (isOpen ? /*#__PURE__*/React__default["default"].createElement(PiCaretUp, null) : /*#__PURE__*/React__default["default"].createElement(PiCaretDown, null))), /*#__PURE__*/React__default["default"].createElement("input", {
+    }, dropdownCountry.option), isEdited && redeemType !== "ppob" && (isOpen ? /*#__PURE__*/React__default["default"].createElement(PiCaretUp, null) : /*#__PURE__*/React__default["default"].createElement(PiCaretDown, null))), /*#__PURE__*/React__default["default"].createElement("input", {
       type: "number",
       value: value,
       onChange: onChangeInput,
       className: `
                             flex-1 w-full py-2.5 text-sm text-black focus:outline-none
                             placeholder:text-neutral300
+                            ${!isEdited ? "bg-neutral30 cursor-not-allowed" : ""}
                             ${mode === "danger" ? "bg-danger50 text-danger500" : "bg-neutral20"}
                         `,
-      placeholder: placeholder
-    })), isOpen && redeemType !== "ppob" && /*#__PURE__*/React__default["default"].createElement("div", {
+      placeholder: placeholder,
+      disabled: !isEdited // ✅ disable input kalau isEdited false
+    })), isOpen && redeemType !== "ppob" && isEdited &&
+    /*#__PURE__*/
+    // ✅ hanya tampil kalau isEdited true
+    React__default["default"].createElement("div", {
       className: "absolute top-full mt-1 z-10 rounded-md shadow-md bg-neutral20 ring-1 ring-black ring-opacity-5 overflow-y-auto max-h-64 no-scrollbar",
       style: {
         width: wrapperWidth

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprint-asia-custom-component",
   "main": "dist/index.js",
-  "version": "0.1.167",
+  "version": "0.1.169",
   "private": false,
   "dependencies": {
     "@headlessui/react": "^1.7.18",

package/src/components/dropdownphone/index.js

@@ -13,6 +13,7 @@ const DropdownPhone = ({
     mode = "default",
     placeholder = "",
     redeemType = "",
+    isEdited = true, // ✅ tambahkan prop isEdited
 }) => {
     const [isOpen, setIsOpen] = useState(false);
     const wrapperRef = useRef(null);
@@ -71,15 +72,17 @@ const DropdownPhone = ({
                 <div
                     className={`
                         flex items-center rounded-md overflow-hidden w-full pr-3
+                        ${!isEdited ? "bg-neutral30 cursor-not-allowed" : ""}
                         ${mode === "danger"
                             ? "border border-danger500 bg-danger50"
                             : "border border-neutral50 bg-neutral20"}
                     `}
                 >
                     <div
-                        className="flex items-center px-3 py-2 cursor-pointer border-r border-neutral50 mr-3"
+                        className={`flex items-center px-3 py-2 border-r border-neutral50 mr-3 
+                          ${isEdited && redeemType !== "ppob" ? "cursor-pointer" : "cursor-not-allowed"}`}
                         onClick={() => {
-                            if (redeemType !== "ppob") {
+                            if (isEdited && redeemType !== "ppob") {
                                 setIsOpen(!isOpen);
                             }
                         }}
@@ -92,7 +95,7 @@ const DropdownPhone = ({
                         <p className="text-sm font-bold text-neutral300 ml-3 mr-2">
                             {dropdownCountry.option}
                         </p>
-                        {redeemType !== "ppob" && (isOpen ? <PiCaretUp /> : <PiCaretDown />)}
+                        {isEdited && redeemType !== "ppob" && (isOpen ? <PiCaretUp /> : <PiCaretDown />)}
                     </div>
 
                     <input
@@ -102,13 +105,15 @@ const DropdownPhone = ({
                         className={`
                             flex-1 w-full py-2.5 text-sm text-black focus:outline-none
                             placeholder:text-neutral300
+                            ${!isEdited ? "bg-neutral30 cursor-not-allowed" : ""}
                             ${mode === "danger" ? "bg-danger50 text-danger500" : "bg-neutral20"}
                         `}
                         placeholder={placeholder}
+                        disabled={!isEdited} // ✅ disable input kalau isEdited false
                     />
                 </div>
 
-                {isOpen && redeemType !== "ppob" && (
+                {isOpen && redeemType !== "ppob" && isEdited && ( // ✅ hanya tampil kalau isEdited true
                     <div
                         className="absolute top-full mt-1 z-10 rounded-md shadow-md bg-neutral20 ring-1 ring-black ring-opacity-5 overflow-y-auto max-h-64 no-scrollbar"
                         style={{ width: wrapperWidth }}
@@ -175,4 +180,4 @@ const DropdownPhone = ({
     );
 };
 
-export default DropdownPhone;
+export default DropdownPhone;

package/src/components/textinput/index.js

@@ -1,6 +1,16 @@
 import React, { useState } from "react";
 import { PiEyeClosedLight, PiEye, PiInfo } from "react-icons/pi";
 
+const formatNumber = (val) => {
+  if (!val) return "";
+  return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+};
+
+const parseNumber = (val) => {
+  if (!val) return "";
+  return val.replace(/\./g, ""); // hapus titik biar jadi angka murni
+};
+
 const TextInput = ({
   title = "",
   rightComponent = null,
@@ -22,25 +32,39 @@ const TextInput = ({
   const [isFocused, setIsFocused] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
 
-  const handleFocus = () => {
-    setIsFocused(true);
-  };
+  const handleFocus = () => setIsFocused(true);
+  const handleBlur = () => setIsFocused(false);
+  const handleTogglePasswordVisibility = () => setShowPassword(!showPassword);
 
-  const handleBlur = () => {
-    setIsFocused(false);
-  };
+  const handleChange = (e) => {
+    let val = e.target.value;
 
-  const handleTogglePasswordVisibility = () => {
-    setShowPassword(!showPassword);
+    if (type === "number") {
+      // hapus semua karakter non digit
+      const raw = parseNumber(val.replace(/\D/g, ""));
+      // kirim angka murni ke parent
+      onChangeInput({
+        ...e,
+        target: { ...e.target, value: raw },
+      });
+      return;
+    }
+
+    onChangeInput(e);
   };
 
+  const displayValue =
+    type === "number" ? (value ? formatNumber(value) : "") : value;
+
   return (
     <div className={`w-full ${className}`}>
       <div className="flex w-full items-center">
         {title && (
           <div className="flex">
             <p className="text-sm font-normal text-black mb-1">{title}</p>
-            {isRequired && <p className="text-sm font-normal text-danger500 ml-1">*</p>}
+            {isRequired && (
+              <p className="text-sm font-normal text-danger500 ml-1">*</p>
+            )}
           </div>
         )}
         {rightComponent}
@@ -56,34 +80,51 @@ const TextInput = ({
                 ${mode === "primary" && "text-black"}
                 ${mode === "disable" && "text-neutral50"}
                 ${mode === "danger" && "text-danger500"}
-                `}
+              `}
             />
           )}
         </section>
 
         <input
-          min={minimum !== null && minimum !== undefined && type === "number" ? minimum : undefined}
-          max={maximum !== null && maximum !== undefined && type === "number" ? maximum : undefined}
-          type={type === "password" ? (showPassword ? "text" : "password") : type}
+          min={
+            minimum !== null && minimum !== undefined && type === "number"
+              ? minimum
+              : undefined
+          }
+          max={
+            maximum !== null && maximum !== undefined && type === "number"
+              ? maximum
+              : undefined
+          }
+          type={
+            type === "password" ? (showPassword ? "text" : "password") : "text"
+          } // number tetap text
           className={`py-2.5 px-4 w-full font-normal text-sm text-black rounded-md border
-                        ${!value &&
-            mode === "default" &&
-            "bg-neutral20 border-neutral50 focus:outline-2 outline-primary500"
+            ${
+              !value &&
+              mode === "default" &&
+              "bg-neutral20 border-neutral50 focus:outline-2 outline-primary500"
+            }
+            ${
+              value &&
+              mode === "default" &&
+              "bg-neutral20 border-black focus:outline-2 outline-primary500"
+            }
+            ${isFocused && mode === "default" && "bg-neutral20 border-primary500"}
+            ${mode === "disable" && "bg-neutral30 border-neutral50"}
+            ${mode === "white" && "bg-white border-neutral50"}
+            ${
+              mode === "danger" &&
+              "bg-danger50 border-danger500 focus:outline-2 outline-danger500"
             }
-                        ${value && mode === "default" && "bg-neutral20 border-black focus:outline-2 outline-primary500"}
-                        ${isFocused && mode === "default" && "bg-neutral20 border-primary500"}
-                        ${mode === "disable" && "bg-neutral30 border-neutral50"}
-                        ${mode === "white" && "bg-white border-neutral50"}
-                        ${mode === "danger" && "bg-danger50 border-danger500 focus:outline-2 outline-danger500"}
-                        ${leftIcon || leftAdornment ? "pl-8" : "pl-3"}
-                        ${leftIcon && leftAdornment ? "pl-16" : "pl-3"}
-                        ${rightIcon || rightAdornment ? "pr-8" : "pr-3"}
-                        ${rightIcon && rightAdornment ? "pr-16" : "pr-3"}`}
+            ${leftIcon || leftAdornment ? "pl-8" : "pl-3"}
+            ${leftIcon && leftAdornment ? "pl-16" : "pl-3"}
+            ${rightIcon || rightAdornment ? "pr-8" : "pr-3"}
+            ${rightIcon && rightAdornment ? "pr-16" : "pr-3"}`}
           placeholder={placeholder}
-          data-mask="000.000.000-00"
           disabled={mode === "disable"}
-          value={value}
-          onChange={onChangeInput}
+          value={displayValue}
+          onChange={handleChange}
           onFocus={handleFocus}
           onBlur={handleBlur}
         />
@@ -94,9 +135,19 @@ const TextInput = ({
             onClick={handleTogglePasswordVisibility}
           >
             {showPassword ? (
-              <PiEye size={16} className={`text-black ${mode === "danger" && "text-danger500"}`} />
+              <PiEye
+                size={16}
+                className={`text-black ${
+                  mode === "danger" && "text-danger500"
+                }`}
+              />
             ) : (
-              <PiEyeClosedLight size={16} className={`text-black ${mode === "danger" && "text-danger500"}`} />
+              <PiEyeClosedLight
+                size={16}
+                className={`text-black ${
+                  mode === "danger" && "text-danger500"
+                }`}
+              />
             )}
           </span>
         )}
@@ -110,7 +161,7 @@ const TextInput = ({
                 ${mode === "primary" && "text-neutral50"}
                 ${mode === "disable" && "text-neutral50"}
                 ${mode === "danger" && "text-danger500"}
-                `}
+              `}
             />
           )}
         </section>
@@ -134,4 +185,4 @@ const TextInput = ({
   );
 };
 
-export default TextInput;
+export default TextInput;