@nouance/payload-better-fields-plugin
Version:
A Payload plugin that aims to provide improved fields for the admin panel
100 lines (99 loc) • 3.88 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { FieldDescription, FieldError, FieldLabel, RenderCustomComponent, TextInput as TextInputField, useField } from '@payloadcms/ui';
import React, { useCallback, useMemo } from 'react';
import './styles.css';
export const ColourTextComponent = (props)=>{
const { field, path, readOnly, validate } = props;
const { admin: { className, description, style } = {}, label, required } = field;
const memoizedValidate = useCallback((value, options)=>{
if (typeof validate === 'function') {
return validate(value, {
...options,
required
});
}
}, [
validate,
required
]);
const isReadonly = Boolean(readOnly);
const { customComponents: { AfterInput, BeforeInput, Description, Label } = {}, errorMessage, setValue, showError, value } = useField({
path,
// @ts-expect-error - memoizedValidate is not typed
validate: memoizedValidate
});
const classes = [
'field-type',
'text',
className,
showError && 'error',
isReadonly && 'read-only',
'container'
].filter(Boolean).join(' ');
const colour = useMemo(()=>{
const gradient = 'linear-gradient(45deg, var(--theme-elevation-900) 0%, var(--theme-elevation-900) 45%, var(--theme-error-500) 50%, var(--theme-elevation-900) 55%, var(--theme-elevation-900) 100%)';
const validColour = true;
// try {
// // @ts-expect-error - validateColor is not typed correctly here, the function works but TS thinks it doesn't exist
// validColour = validateColor(value)
// } catch {
// console.log('There was an error validating the colour')
// }
return validColour ? value : gradient;
}, [
value
]);
return /*#__PURE__*/ _jsxs("div", {
className: `bfColourTextFieldWrapper field-type`,
children: [
/*#__PURE__*/ _jsx(RenderCustomComponent, {
CustomComponent: Label,
Fallback: /*#__PURE__*/ _jsx(FieldLabel, {
label: label,
path: path,
required: required
})
}),
BeforeInput,
/*#__PURE__*/ _jsxs("div", {
className: classes,
children: [
/*#__PURE__*/ _jsx(TextInputField, {
className: 'colourTextInput',
Error: /*#__PURE__*/ _jsx(FieldError, {
message: errorMessage
}),
label: undefined,
onChange: (e)=>{
setValue(e.target.value);
},
path: path,
readOnly: isReadonly,
required: required,
showError: showError,
style: style,
value: value
}),
/*#__PURE__*/ _jsx("div", {
"aria-hidden": true,
className: "colourBox",
style: {
background: colour
}
})
]
}),
/*#__PURE__*/ _jsx(RenderCustomComponent, {
CustomComponent: Description,
Fallback: /*#__PURE__*/ _jsx(FieldDescription, {
className: `field-description-${path.replace(/\./g, '__')}`,
description: description ?? '',
path: path
})
}),
AfterInput
]
});
};
//# sourceMappingURL=Component.js.map