45 lines
1.5 KiB
JavaScript
45 lines
1.5 KiB
JavaScript
'use client';
|
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
import { useField } from '@payloadcms/ui';
|
|
import { useState } from 'react';
|
|
export const MaskedField = ({ field, path })=>{
|
|
const { setValue, value } = useField({
|
|
path
|
|
});
|
|
const [revealed, setRevealed] = useState(false);
|
|
const label = typeof field?.label === 'string' ? field.label : field?.name ?? path;
|
|
return /*#__PURE__*/ _jsxs("div", {
|
|
className: "field-type text",
|
|
children: [
|
|
/*#__PURE__*/ _jsx("label", {
|
|
className: "field-label",
|
|
children: label
|
|
}),
|
|
/*#__PURE__*/ _jsxs("div", {
|
|
style: {
|
|
display: 'flex',
|
|
gap: '.5rem'
|
|
},
|
|
children: [
|
|
/*#__PURE__*/ _jsx("input", {
|
|
autoComplete: "off",
|
|
onChange: (e)=>setValue(e.target.value),
|
|
style: {
|
|
flex: 1
|
|
},
|
|
type: revealed ? 'text' : 'password',
|
|
value: value ?? ''
|
|
}),
|
|
/*#__PURE__*/ _jsx("button", {
|
|
onClick: ()=>setRevealed((r)=>!r),
|
|
type: "button",
|
|
children: revealed ? 'Hide' : 'Reveal'
|
|
})
|
|
]
|
|
})
|
|
]
|
|
});
|
|
};
|
|
export default MaskedField;
|
|
|
|
//# sourceMappingURL=MaskedField.js.map
|