@nouance/payload-better-fields-plugin
Version:
A Payload plugin that aims to provide improved fields for the admin panel
137 lines (136 loc) • 5.68 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { FieldError as Error, FieldDescription, FieldLabel, RenderCustomComponent, useField } from '@payloadcms/ui';
import { useCallback } from 'react';
import './range.scss';
export const RangeComponent = (props)=>{
const { config, field, path, readOnly, validate } = props;
const { admin: { className, description, placeholder, readOnly: adminReadOnly } = {}, label, required } = field;
const memoizedValidate = useCallback((value, options)=>{
if (typeof validate === 'function') {
return validate(value, {
...options,
required
});
}
}, [
validate,
required
]);
const { customComponents: { AfterInput, BeforeInput, Description, Label } = {}, errorMessage, setValue, showError, value } = useField({
path,
// @ts-expect-error - memoizedValidate is not typed
validate: memoizedValidate
});
const step = config?.step ?? 1;
const usedMin = field.min ?? 1;
const usedMax = field.max ?? 100;
const rangeValue = usedMax - usedMin;
const markers = config?.markers ?? [];
const getPosition = useCallback((value)=>{
const remainder = value - usedMin;
if (remainder === 0) {
return 0;
}
return remainder / rangeValue * 100;
}, [
rangeValue,
usedMin
]);
const classes = [
'',
'text',
className,
showError && 'error',
readOnly && 'read-only',
'container'
].filter(Boolean).join(' ');
const isReadonly = Boolean(readOnly) || Boolean(adminReadOnly);
const handleReset = (e)=>{
e.preventDefault();
setValue(null);
};
return /*#__PURE__*/ _jsxs("div", {
className: `bfRangeFieldWrapper field-type`,
children: [
/*#__PURE__*/ _jsx(RenderCustomComponent, {
CustomComponent: Label,
Fallback: /*#__PURE__*/ _jsx(FieldLabel, {
label: label,
path: path,
required: required
})
}),
/*#__PURE__*/ _jsxs("div", {
className: "containerWrapper",
children: [
config?.showPreview && /*#__PURE__*/ _jsx(_Fragment, {
children: /*#__PURE__*/ _jsx("div", {
className: "valuePreview",
children: value ? value : '/'
})
}),
/*#__PURE__*/ _jsxs("div", {
className: classes,
children: [
BeforeInput,
/*#__PURE__*/ _jsx("input", {
className: "rangeInput",
id: `field-${path.replace(/\./g, '__')}`,
max: usedMax,
min: usedMin,
name: path,
onChange: (e)=>{
setValue(e.target.value);
},
placeholder: typeof placeholder === 'string' ? placeholder : '',
readOnly: isReadonly,
required: required,
step: step,
type: "range",
value: value || 0,
...markers?.length && markers.length > 0 ? {
list: `field-markers-${path.replace(/\./g, '__')}`
} : {}
}),
/*#__PURE__*/ _jsx("datalist", {
className: "markersList",
id: `field-markers-${path.replace(/\./g, '__')}`,
children: markers.map((marker, index)=>{
return /*#__PURE__*/ _jsx("option", {
"data-test": getPosition(marker.value),
style: {
left: `${getPosition(marker.value)}%`
},
value: marker.value,
children: marker.label
}, index);
})
})
]
}),
/*#__PURE__*/ _jsx(Error, {
message: errorMessage ?? '',
showError: showError
})
]
}),
!required && Boolean(value) && /*#__PURE__*/ _jsx("button", {
className: "btn btn--size-small btn--style-secondary resetButton",
onClick: handleReset,
type: "button",
children: "Reset"
}),
/*#__PURE__*/ _jsx(RenderCustomComponent, {
CustomComponent: Description,
Fallback: /*#__PURE__*/ _jsx(FieldDescription, {
className: `field-description-${path.replace(/\./g, '__')}`,
description: description ?? '',
path: path
})
}),
AfterInput
]
});
};
//# sourceMappingURL=Component.js.map