react-money-keyboard-simple/dist/index.mjs.map

Lightweight and customizable React component that provides a virtual numeric keyboard designed specifically for money input fields.

{"version":3,"sources":["../src/Keyboard.tsx"],"sourcesContent":["import { useState } from \"react\";\r\n\r\ntype KeyboardProps = {\r\n  handleBackspace: () => void;\r\n  handleNumberClick: (value: string) => void;\r\n  handleSubmit: () => void;\r\n  BackspaceIcon?: React.ReactNode; // 👈 thêm props này\r\n  titleBtnEnter?: string;\r\n};\r\n\r\nconst Keyboard: React.FC<KeyboardProps> = (props: KeyboardProps) => {\r\n  const [activeKey, setActiveKey] = useState<any>(null);\r\n  const {\r\n    handleSubmit,\r\n    handleNumberClick,\r\n    handleBackspace,\r\n    BackspaceIcon,\r\n    titleBtnEnter = \"Done\",\r\n  } = props;\r\n\r\n  const handleKeyDown = (value: any) => {\r\n    setActiveKey(value);\r\n  };\r\n\r\n  const handleKeyUp = () => {\r\n    setActiveKey(null);\r\n  };\r\n\r\n  return (\r\n    <div className=\"grid grid-cols-4 grid-rows-4 gap-2 bg-[rgba(0,0,0,0.03)] p-2\">\r\n      {[1, 2, 3, \"⌫\", 4, 5, 6, titleBtnEnter, 7, 8, 9, 0, \".\"].map(\r\n        (value: any, index: number) => {\r\n          return (\r\n            <button\r\n              key={String(value) + index}\r\n              onClick={() =>\r\n                value === titleBtnEnter\r\n                  ? handleSubmit()\r\n                  : value === \"⌫\"\r\n                  ? handleBackspace()\r\n                  : handleNumberClick(value.toString())\r\n              }\r\n              onMouseDown={() => handleKeyDown(value)}\r\n              onMouseUp={handleKeyUp}\r\n              onTouchStart={() => handleKeyDown(value)}\r\n              onTouchEnd={handleKeyUp}\r\n              className={` flex justify-center items-center rounded-lg text-[20px] font-semibold transition-all duration-100 md: cursor-pointer ${\r\n                activeKey === value\r\n                  ? \"bg-gray-300 scale-95\"\r\n                  : \"hover:bg-gray-200\"\r\n              } ${\r\n                value === titleBtnEnter\r\n                  ? \"row-span-3 h-auto bg-[#0abd52] text-white\"\r\n                  : \"bg-white h-[48px]\"\r\n              } ${value === 0 ? \"col-span-2\" : \"\"}`}\r\n            >\r\n              {value === \"⌫\" ? BackspaceIcon ?? \"⌫\" : value}\r\n            </button>\r\n          );\r\n        }\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Keyboard;\r\n"],"mappings":";AAAA,SAAS,gBAAgB;AAiCb;AAvBZ,IAAM,WAAoC,CAAC,UAAyB;AAClE,QAAM,CAAC,WAAW,YAAY,IAAI,SAAc,IAAI;AACpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAClB,IAAI;AAEJ,QAAM,gBAAgB,CAAC,UAAe;AACpC,iBAAa,KAAK;AAAA,EACpB;AAEA,QAAM,cAAc,MAAM;AACxB,iBAAa,IAAI;AAAA,EACnB;AAEA,SACE,oBAAC,SAAI,WAAU,gEACZ,WAAC,GAAG,GAAG,GAAG,UAAK,GAAG,GAAG,GAAG,eAAe,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE;AAAA,IACvD,CAAC,OAAY,UAAkB;AAC7B,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,SAAS,MACP,UAAU,gBACN,aAAa,IACb,UAAU,WACV,gBAAgB,IAChB,kBAAkB,MAAM,SAAS,CAAC;AAAA,UAExC,aAAa,MAAM,cAAc,KAAK;AAAA,UACtC,WAAW;AAAA,UACX,cAAc,MAAM,cAAc,KAAK;AAAA,UACvC,YAAY;AAAA,UACZ,WAAW,yHACT,cAAc,QACV,yBACA,mBACN,IACE,UAAU,gBACN,8CACA,mBACN,IAAI,UAAU,IAAI,eAAe,EAAE;AAAA,UAElC,oBAAU,WAAM,wCAAiB,WAAM;AAAA;AAAA,QAtBnC,OAAO,KAAK,IAAI;AAAA,MAuBvB;AAAA,IAEJ;AAAA,EACF,GACF;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}