first commit

common/resources/client/ui/forms/input-field/file-field.tsx

@@ -0,0 +1,66 @@
+import React, {ChangeEventHandler} from 'react';
+import {mergeProps, useObjectRef} from '@react-aria/utils';
+import {useController} from 'react-hook-form';
+import clsx from 'clsx';
+import {BaseFieldProps} from './base-field-props';
+import {useField} from './use-field';
+import {getInputFieldClassNames} from './get-input-field-class-names';
+import {Field} from './field';
+import {TextFieldProps} from './text-field/text-field';
+
+export interface FileFieldProps
+  extends Omit<BaseFieldProps, 'type'> {
+  onChange?: ChangeEventHandler<'input'>;
+  accept?: string;
+}
+export const FileField = React.forwardRef<HTMLInputElement, FileFieldProps>(
+  (props, ref) => {
+    const inputRef = useObjectRef(ref);
+
+    const {fieldProps, inputProps} = useField({...props, focusRef: inputRef});
+
+    const inputFieldClassNames = getInputFieldClassNames(props);
+
+    return (
+      <Field ref={ref} fieldClassNames={inputFieldClassNames} {...fieldProps}>
+        <input
+          type="file"
+          ref={inputRef}
+          {...inputProps as any}
+          className={clsx(
+            inputFieldClassNames.input,
+            'py-8',
+            'file:bg-primary file:text-on-primary file:border-none file:rounded file:text-sm file:font-semibold file:px-10 file:h-24 file:mr-10'
+          )}
+        />
+      </Field>
+    );
+  }
+);
+
+export interface FormFileFieldProps extends FileFieldProps {
+  name: string;
+}
+export function FormFileField({name, ...props}: FormFileFieldProps) {
+  const {
+    field: {onChange, onBlur, ref},
+    fieldState: {invalid, error},
+  } = useController({
+    name,
+  });
+
+  const [value, setValue] = React.useState('');
+
+  const formProps: TextFieldProps = {
+    onChange: e => {
+      onChange(e.target.files?.[0]);
+      setValue(e.target.value);
+    },
+    onBlur,
+    value,
+    invalid,
+    errorMessage: error?.message,
+  };
+
+  return <FileField ref={ref} {...mergeProps(formProps, props)} />;
+}