54 lines
2.0 KiB
JavaScript
54 lines
2.0 KiB
JavaScript
'use client';
|
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
import { useState } from 'react';
|
|
export const MaskedField = (props)=>{
|
|
const { field, path, value: propValue, setValue: propSetValue, onChange: propOnChange } = props || {};
|
|
const [internalValue, setInternalValue] = useState(propValue ?? '');
|
|
const [revealed, setRevealed] = useState(false);
|
|
const label = typeof field?.label === 'string' ? field.label : field?.name ?? path;
|
|
const handleChange = (e)=>{
|
|
const newVal = e.target.value;
|
|
setInternalValue(newVal);
|
|
if (typeof propSetValue === 'function') {
|
|
propSetValue(newVal);
|
|
}
|
|
if (typeof propOnChange === 'function') {
|
|
propOnChange(e);
|
|
}
|
|
};
|
|
const currentValue = propValue !== undefined ? propValue : internalValue;
|
|
return /*#__PURE__*/ _jsxs("div", {
|
|
className: "field-type text",
|
|
children: [
|
|
label && /*#__PURE__*/ _jsx("label", {
|
|
className: "field-label",
|
|
children: label
|
|
}),
|
|
/*#__PURE__*/ _jsxs("div", {
|
|
style: {
|
|
display: 'flex',
|
|
gap: '.5rem'
|
|
},
|
|
children: [
|
|
/*#__PURE__*/ _jsx("input", {
|
|
autoComplete: "off",
|
|
onChange: handleChange,
|
|
style: {
|
|
flex: 1
|
|
},
|
|
type: revealed ? 'text' : 'password',
|
|
value: currentValue ?? ''
|
|
}),
|
|
/*#__PURE__*/ _jsx("button", {
|
|
onClick: ()=>setRevealed((r)=>!r),
|
|
type: "button",
|
|
children: revealed ? 'Hide' : 'Reveal'
|
|
})
|
|
]
|
|
})
|
|
]
|
|
});
|
|
};
|
|
export default MaskedField;
|
|
|
|
//# sourceMappingURL=MaskedField.js.map
|