Joy input readonly (#15)

* Joy FormText and FormNumber supports readOnly

* Rush change

common/changes/@ilbrando/simple-form-joy/joy-input-readonly_2024-06-27-08-53.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@ilbrando/simple-form-joy",
+      "comment": "FormText and FormNumber supports readOnly property also when the form field is disabled.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@ilbrando/simple-form-joy"
+}

examples/storybook/src/stories/joy/form-fields.stories.tsx

@@ -38,12 +38,13 @@ const radioGroupOptions: RadioGroupOption<string>[] = optionValues;
 type FormStoryProps = {
   isDisabled: boolean;
   isRequired: boolean;
+  isReadOnly: boolean;
   size: "sm" | "md" | "lg";
   reserveSpaceForValidationMessage: boolean;
 };
 
 const FormStory = (props: FormStoryProps) => {
-  const { isDisabled, isRequired, size, reserveSpaceForValidationMessage } = props;
+  const { isDisabled, isRequired, isReadOnly, size, reserveSpaceForValidationMessage } = props;
 
   const { required, minCount, equal } = useValidationRules();
 
@@ -115,8 +116,8 @@ const FormStory = (props: FormStoryProps) => {
     <ThemeProvider theme={theme}>
       <Box display="grid" gridTemplateColumns="400px auto" gap={2}>
         <Box gridColumn="1" display="flex" flexDirection="column" gap={reserveSpaceForValidationMessage ? 0 : 1}>
-          <FormText formManager={fm} fieldName="textField" label="Text Field" disabled={isDisabled} size={size} />
-          <FormNumber formManager={fm} fieldName="numberField" label="Number Field" disabled={isDisabled} size={size} />
+          <FormText formManager={fm} fieldName="textField" label="Text Field" disabled={isDisabled} readOnly={isReadOnly} size={size} />
+          <FormNumber formManager={fm} fieldName="numberField" label="Number Field" disabled={isDisabled} readOnly={isReadOnly} size={size} />
           <FormAutocomplete formManager={fm} fieldName="autocompleteField" label="Autocomplete Field" options={autocompleteOptions} disabled={isDisabled} size={size} />
           <FormAutocompleteMultiple formManager={fm} fieldName="autocompleteMultipleField" label="Autocomplete Field (multiple)" options={autocompleteOptions} disabled={isDisabled} size={size} />
           <FormRadioGroup formManager={fm} fieldName="radiogroupField" label="Radiogroup Field" options={radioGroupOptions} disabled={isDisabled} size={size} />
@@ -146,6 +147,7 @@ const meta = {
   args: {
     isDisabled: false,
     isRequired: false,
+    isReadOnly: false,
     size: "md",
     reserveSpaceForValidationMessage: false
   }

packages/simple-form-joy/src/form-components/form-number/form-number.tsx

@@ -14,20 +14,22 @@ type FormNumberProps<TFields, TFieldName extends PropKeysOf<TFields, FormValue>>
 const isValidValue = (value: string) => /^[-]?(\d+)$/.test(value);
 
 export const FormNumber = function <TFields, TFieldName extends PropKeysOf<TFields, FormValue>>(props: FormNumberProps<TFields, TFieldName>) {
-  const { formManager, fieldName, disabled, label, size, reserveSpaceForValidationMessage, ...rest } = props;
+  const { formManager, fieldName, disabled, readOnly, label, size, reserveSpaceForValidationMessage, ...rest } = props;
 
   const { texts } = useLocalization();
 
   const editor = getEditor<TFields, FormValue>(formManager, fieldName, disabled);
 
+  const isDisabled = !(readOnly ?? false) && (disabled ?? false); // If readonly is true we don't disable the input because then the user can't copy the value
+
   const [textBoxValue, setTextBoxValue] = useState<string>(hasValue(editor.value) ? editor.value.toString() : "");
 
   useEffect(() => {
     setTextBoxValue(hasValue(editor.value) ? editor.value.toString() : "");
   }, [editor.value]);
 
   return (
-    <FormControlWrapper label={label} size={size} errorMessage={editor.errorMessage} reserveSpaceForValidationMessage={reserveSpaceForValidationMessage} isRequired={editor.isRequired} isDisabled={editor.isDisabled}>
+    <FormControlWrapper label={label} size={size} errorMessage={editor.errorMessage} reserveSpaceForValidationMessage={reserveSpaceForValidationMessage} isRequired={editor.isRequired} isDisabled={isDisabled}>
       <Input
         value={textBoxValue}
         onChange={e => {
@@ -45,6 +47,7 @@ export const FormNumber = function <TFields, TFieldName extends PropKeysOf<TFiel
           setTextBoxValue(e.target.value);
           editor.setFieldValue(editor.value, texts.invalidValue);
         }}
+        readOnly={readOnly}
         {...rest}
       />
     </FormControlWrapper>

packages/simple-form-joy/src/form-components/form-text/form-text.tsx

@@ -14,10 +14,12 @@ export type FormTextProps<TFields, TFieldName extends PropKeysOf<TFields, FormVa
   };
 
 export const FormText = function <TFields, TFieldName extends PropKeysOf<TFields, FormValue>>(props: FormTextProps<TFields, TFieldName>) {
-  const { formManager, fieldName, textTransform, disabled, label, size, reserveSpaceForValidationMessage, ...rest } = props;
+  const { formManager, fieldName, textTransform, disabled, readOnly, label, size, reserveSpaceForValidationMessage, ...rest } = props;
 
   const editor = getEditor<TFields, FormValue>(formManager, fieldName, disabled);
 
+  const isDisabled = !(readOnly ?? false) && (disabled ?? false); // If readonly is true we don't disable the input because then the user can't copy the value
+
   const parseValue = (value: string) => {
     if (!hasValueAndNotEmptyString(value)) return null;
     if (!hasValue(textTransform)) return value;
@@ -32,8 +34,8 @@ export const FormText = function <TFields, TFieldName extends PropKeysOf<TFields
   };
 
   return (
-    <FormControlWrapper label={label} size={size} errorMessage={editor.errorMessage} reserveSpaceForValidationMessage={reserveSpaceForValidationMessage} isRequired={editor.isRequired} isDisabled={editor.isDisabled}>
-      <Input value={editor.value ?? ""} onChange={e => editor.setFieldValue(parseValue(e.target.value))} {...rest} />
+    <FormControlWrapper label={label} size={size} errorMessage={editor.errorMessage} reserveSpaceForValidationMessage={reserveSpaceForValidationMessage} isRequired={editor.isRequired} isDisabled={isDisabled}>
+      <Input value={editor.value ?? ""} onChange={e => editor.setFieldValue(parseValue(e.target.value))} readOnly={readOnly} {...rest} />
     </FormControlWrapper>
   );
 };