ui: reflect readonly mode by hiding controls + various small styling fixes

This commit is contained in:
dswbx
2025-09-05 17:09:50 +02:00
parent 1df87c8a16
commit af573cc79a
18 changed files with 153 additions and 74 deletions

View File

@@ -88,7 +88,7 @@ export const Input = forwardRef<HTMLInputElement, React.ComponentProps<"input">>
{...props}
ref={ref}
className={twMerge(
"bg-muted/40 h-11 rounded-md py-2.5 px-4 outline-none w-full",
"bg-muted/40 h-11 rounded-md py-2.5 px-4 outline-none w-full disabled:cursor-not-allowed",
disabledOrReadonly && "bg-muted/50 text-primary/50",
!disabledOrReadonly &&
"focus:bg-muted focus:outline-none focus:ring-2 focus:ring-zinc-500 focus:border-transparent transition-all",

View File

@@ -88,6 +88,7 @@ const FieldImpl = ({
}, [inputProps?.defaultValue]);
const disabled = firstDefined(
ctx.readOnly,
inputProps?.disabled,
props.disabled,
schema.readOnly,

View File

@@ -61,6 +61,7 @@ export type FormContext<Data> = {
options: FormOptions;
root: string;
_formStateAtom: PrimitiveAtom<FormState<Data>>;
readOnly: boolean;
};
const FormContext = createContext<FormContext<any>>(undefined!);
@@ -81,6 +82,7 @@ export function Form<
hiddenSubmit = true,
ignoreKeys = [],
options = {},
readOnly = false,
...props
}: Omit<ComponentPropsWithoutRef<"form">, "onChange" | "onSubmit"> & {
schema: Schema;
@@ -93,6 +95,7 @@ export function Form<
hiddenSubmit?: boolean;
options?: FormOptions;
initialValues?: Schema extends JSONSchema ? FromSchema<Schema> : never;
readOnly?: boolean;
}) {
const [schema, initial] = omitSchema(_schema, ignoreKeys, _initialValues);
const lib = useMemo(() => new Draft2019(schema), [JSON.stringify(schema)]);
@@ -190,8 +193,9 @@ export function Form<
options,
root: "",
path: "",
readOnly,
}),
[schema, initialValues, options],
[schema, initialValues, options, readOnly],
) as any;
return (