Skip to content

Instantly share code, notes, and snippets.

@devstojko
Last active July 29, 2022 11:46
Show Gist options
  • Save devstojko/676be36332b1e9235369abb89f7b9cee to your computer and use it in GitHub Desktop.
Save devstojko/676be36332b1e9235369abb89f7b9cee to your computer and use it in GitHub Desktop.
ObserveField.tsx
{
name: "test",
type: 'text',
label: "Test",
admin: {
readOnly: true,
components: {
Field: ObserveField
}
}
},
import { TextField } from "payload/dist/fields/config/types";
import { useField, useWatchForm } from "payload/components/forms";
import React from "react";
import { text } from "payload/dist/fields/validations";
import PayloadInput from "./PayloadInput";
export type Props = Omit<TextField, "type"> & {
path?: string;
};
const ObserveField: React.FC<Props> = (props) => {
const { getData } = useWatchForm();
const {
path: pathFromProps,
name,
required,
validate = text,
label,
minLength,
maxLength,
admin: {
placeholder,
readOnly,
style,
className,
width,
description,
condition,
} = {},
} = props;
const path = pathFromProps || name;
const memoizedValidate = React.useCallback(
(value, options) => {
return validate(value, { ...options, minLength, maxLength, required });
},
[validate, minLength, maxLength, required]
);
const field = useField<string>({
path,
validate: memoizedValidate,
enableDebouncedValue: true,
condition,
});
const { value, showError, setValue, errorMessage } = field;
// THIS IS IMPORTANT PART, REPLACE .id and .name with fields that you want.
const mergedValue = `${getData().id}-${getData().name}`;
React.useEffect(() => {
setValue(mergedValue);
}, [mergedValue]);
return (
<PayloadInput
path={path}
name={name}
onChange={(e) => {
setValue(e.target.value);
}}
showError={showError}
errorMessage={errorMessage}
required={required}
label={label}
value={mergedValue}
placeholder={placeholder}
readOnly={readOnly}
style={style}
className={className}
width={width}
description={description}
inputType="text"
/>
);
};
export default ObserveField;
import React from "react";
import { TextInputProps } from "payload/dist/admin/components/forms/field-types/Text/Input";
import Error from "payload/dist/admin/components/forms/Error";
import FieldDescription from "payload/dist/admin/components/forms/FieldDescription";
import Label from "payload/dist/admin/components/forms/Label";
const Input: React.FC<
TextInputProps & { inputType: React.HTMLInputTypeAttribute }
> = (props) => {
const {
showError,
errorMessage,
placeholder,
readOnly,
path,
label,
required,
value,
onChange,
description,
style,
className,
width,
inputType,
} = props;
const classes = [
"field-type",
"text",
className,
showError && "error",
readOnly && "read-only",
]
.filter(Boolean)
.join(" ");
return (
<div
className={classes}
style={{
...style,
width,
}}
>
<Error showError={showError} message={errorMessage} />
<Label
htmlFor={`field-${path.replace(/\./gi, "__")}`}
label={label}
required={required}
/>
<input
id={`field-${path.replace(/\./gi, "__")}`}
value={value || ""}
onChange={onChange}
disabled={readOnly}
placeholder={placeholder}
type={inputType}
name={path}
/>
<FieldDescription value={value} description={description} />
</div>
);
};
export default Input;
@devstojko
Copy link
Author

Create components dir in src add PayloadInput and ObserveField

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment