midsuit
/
julong-lib
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update TypeInput.tsx and MaskedInput.tsx

This commit is contained in:
faisolavolut 2025-01-23 10:23:38 +07:00
parent 9e0a3f545e
commit da5f361924
2 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/form/field/TypeInput.tsx
View File

@ -100,8 +100,17 @@ export const TypeInput: React.FC<any> = ({
<> <>
<MaskedInput <MaskedInput
value={value} value={value}
disabled={disabled}
className={cx(
css`
background-color: ${disabled
? "rgb(243 244 246)"
: "transparant"};
`,
className
)}
onChange={(value) => { onChange={(value) => {
console.log(value); if (disabled) return;
fm.data[name] = value; fm.data[name] = value;
fm.render(); fm.render();
if (typeof onChange === "function") { if (typeof onChange === "function") {

18
components/ui/MaskedInput.tsx
View File

@ -3,13 +3,21 @@ import React, { useRef, useState } from "react";
interface MaskedInputProps { interface MaskedInputProps {
value: string; value: string;
onChange: (value: any) => void; onChange: (value: any) => void;
disabled?: boolean;
className?: string;
} }
const MaskedInput: React.FC<MaskedInputProps> = ({ value, onChange }) => { const MaskedInput: React.FC<MaskedInputProps> = ({
value,
onChange,
disabled = false,
className,
}) => {
const inputRef = useRef<HTMLInputElement>(null); // Referensi ke elemen input const inputRef = useRef<HTMLInputElement>(null); // Referensi ke elemen input
const [localValue, setLocalValue] = useState<string>(value); // State lokal untuk kontrol input const [localValue, setLocalValue] = useState<string>(value); // State lokal untuk kontrol input
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (disabled) return;
let input = e.target.value; let input = e.target.value;
// Hapus semua karakter non-digit // Hapus semua karakter non-digit
@ -61,9 +69,13 @@ const MaskedInput: React.FC<MaskedInputProps> = ({ value, onChange }) => {
id="time" id="time"
type="text" type="text"
value={localValue} value={localValue}
disabled={disabled}
onChange={handleInputChange} onChange={handleInputChange}
placeholder="__:__" placeholder={disabled ? "" : "__:__"}
className="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring focus:ring-blue-300 focus:border-blue-500" className={cx(
"w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring focus:ring-blue-300 focus:border-blue-500",
className
)}
/> />
); );
}; };