vazco · ErnestTeluk · Oct 10, 2023 · Oct 10, 2023 · Oct 10, 2023 · Mar 14, 2024
@@ -4,7 +4,6 @@ function Mantine(parent: any) {
   class _ extends parent {
     static Mantine = Mantine;
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/restrict-template-expressions -- comes from uniform's core
     static displayName = `Mantine${parent.displayName}`;
   }
 

@@ -1,6 +1,6 @@
+import { Checkbox, CheckboxProps } from '@mantine/core';
 import React, { Ref } from 'react';
 import { connectField, filterDOMProps, FieldProps } from 'uniforms';
-import { Checkbox, CheckboxProps } from '@mantine/core';
 
 export type BoolFieldProps = FieldProps<
   boolean,

@@ -1,6 +1,6 @@
+import { List } from '@mantine/core';
 import React, { HTMLProps } from 'react';
 import { filterDOMProps, useForm } from 'uniforms';
-import { List } from '@mantine/core';
 
 export type ErrorsFieldProps = HTMLProps<HTMLDivElement>;
 

@@ -1,3 +1,4 @@
+import { TextInput } from '@mantine/core';
 import React, { HTMLProps, Ref, useEffect } from 'react';
 import { Override, filterDOMProps, useField } from 'uniforms';
 
@@ -21,14 +22,13 @@ export default function HiddenField({ value, ...rawProps }: HiddenFieldProps) {
   });
 
   return props.noDOM ? null : (
-    <input
+    <TextInput
       mb="xs"
       disabled={props.disabled}
       name={props.name}
       readOnly={props.readOnly}
       ref={props.inputRef}
       type="hidden"
-      // @ts-expect-error `value` should be serializable.
       value={value ?? props.value ?? ''}
       {...filterDOMProps(props)}
     />

@@ -1,3 +1,5 @@
+import { Button, ButtonProps } from '@mantine/core';
+import { IconSquarePlus } from '@tabler/icons-react';
 import cloneDeep from 'lodash/cloneDeep';
 import React from 'react';
 import {
@@ -7,8 +9,6 @@ import {
   joinName,
   useField,
 } from 'uniforms';
-import { Button, ButtonProps } from '@mantine/core';
-import { IconSquarePlus } from '@tabler/icons-react';
 
 export type ListAddFieldProps = FieldProps<
   unknown,

@@ -1,3 +1,5 @@
+import { ActionIcon, ActionIconProps } from '@mantine/core';
+import { IconTrash } from '@tabler/icons-react';
 import React from 'react';
 import {
   FieldProps,
@@ -6,12 +8,16 @@ import {
   joinName,
   useField,
 } from 'uniforms';
-import { ActionIcon, ActionIconProps } from '@mantine/core';
-import { IconTrash } from '@tabler/icons-react';
 
 export type ListDelFieldProps = FieldProps<unknown, ActionIconProps>;
 
-function ListDel({ disabled, name, readOnly, ...props }: ListDelFieldProps) {
+function ListDel({
+  disabled,
+  name,
+  readOnly,
+  icon = <IconTrash size="1rem" color="white" />,
+  ...props
+}: ListDelFieldProps) {
   const nameParts = joinName(null, name);
   const nameIndex = +nameParts[nameParts.length - 1];
   const parentName = joinName(nameParts.slice(0, -1));
@@ -34,7 +40,7 @@ function ListDel({ disabled, name, readOnly, ...props }: ListDelFieldProps) {
         parent.onChange(value);
       }}
     >
-      <IconTrash size="1rem" color="white" />
+      {icon}
     </ActionIcon>
   );
 }

@@ -1,6 +1,6 @@
+import { Input, List as ListMantine, ListProps, Tooltip } from '@mantine/core';
 import React, { Children, cloneElement, isValidElement } from 'react';
 import { FieldProps, connectField, filterDOMProps } from 'uniforms';
-import { Input, List as ListMantine, ListProps, Tooltip } from '@mantine/core';
 
 import ListAddField from './ListAddField';
 import ListItemField from './ListItemField';
@@ -34,6 +34,7 @@ function List({
   return (
     <Input.Wrapper
       mb="xs"
+      w="100%"
       label={
         tooltip ? (
           <>

@@ -1,20 +1,24 @@
+import { List, Group, Box } from '@mantine/core';
 import React, { ReactNode } from 'react';
 import { connectField } from 'uniforms';
-import { List, Group, Box } from '@mantine/core';
 
 import AutoField from './AutoField';
 import ListDelField from './ListDelField';
 
 export type ListItemFieldProps = { children?: ReactNode; value?: unknown };
 
 function ListItem({
-  children = <AutoField label={null} name="" />,
+  children = <AutoField label={null} name="" style={{ width: '100%' }} />,
 }: ListItemFieldProps) {
   return (
-    <List.Item mb={12}>
-      <Group mt="xs" align="center">
+    <List.Item
+      mb={12}
+      styles={{ itemLabel: { width: '100%' }, itemWrapper: { width: '100%' } }}
+      pos="relative"
+    >
+      <Group mt="xs" align="flex-start" w="100%">
         {children}
-        <Box mt={20}>
+        <Box pos="absolute" right={0} top={10}>
           <ListDelField name="" />
         </Box>
       </Group>

@@ -1,6 +1,6 @@
-import React, { Ref } from 'react';
-import { FieldProps, connectField, filterDOMProps } from 'uniforms';
 import { Textarea, TextareaProps } from '@mantine/core';
+import React, { ChangeEvent, Ref } from 'react';
+import { FieldProps, connectField, filterDOMProps } from 'uniforms';
 
 export type LongTextFieldProps = FieldProps<
   string,
@@ -25,7 +25,9 @@ function LongText({
       label={label}
       disabled={disabled}
       name={name}
-      onChange={event => (readOnly ? undefined : onChange(event.target.value))}
+      onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
+        readOnly ? undefined : onChange(event.target.value)
+      }
       placeholder={placeholder}
       ref={inputRef}
       value={value ?? ''}

@@ -1,6 +1,7 @@
+import { Label } from '@mantine/core';
 import React from 'react';
 import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
-import { Text } from '@mantine/core';
+
 import AutoField from './AutoField';
 
 export type NestFieldProps = HTMLFieldProps<
@@ -18,7 +19,7 @@ function Nest({
 }: NestFieldProps) {
   return (
     <div {...filterDOMProps(props)}>
-      {label && <Text>{label}</Text>}
+      {label && <Label>{label}</Label>}
       {children ||
         fields.map(field => (
           <AutoField key={field} name={field} {...itemProps} />

@@ -1,6 +1,6 @@
+import { Input, NumberInput, NumberInputProps, Tooltip } from '@mantine/core';
 import React, { ReactNode, Ref } from 'react';
 import { FieldProps, connectField, filterDOMProps } from 'uniforms';
-import { Input, NumberInput, NumberInputProps, Tooltip } from '@mantine/core';
 
 export type NumFieldProps = FieldProps<
   number,

@@ -1,6 +1,6 @@
+import { Radio as RadioMantine, RadioProps, Text, Stack } from '@mantine/core';
 import React from 'react';
 import { FieldProps, connectField, filterDOMProps } from 'uniforms';
-import { Radio as MantineRadio, RadioProps, Text, Stack } from '@mantine/core';
 
 import type { Option } from './types';
 
@@ -27,7 +27,7 @@ function Radio({
     <Stack mb="xs">
       {label && <Text>{label}</Text>}
       {options?.map(option => (
-        <MantineRadio
+        <RadioMantine
           key={option.key ?? option.value}
           disabled={!!option?.disabled}
           checked={option.value === value}

@@ -1,12 +1,12 @@
-import React, { Ref } from 'react';
-import { FieldProps, connectField, filterDOMProps } from 'uniforms';
 import {
   Select as SelectMantine,
   ComboboxItem,
   SelectProps,
   MultiSelect,
   MultiSelectProps,
 } from '@mantine/core';
+import React, { Ref } from 'react';
+import { FieldProps, connectField, filterDOMProps } from 'uniforms';
 
 export type SelectFieldProps = FieldProps<
   string | string[],
@@ -47,15 +47,15 @@ function Select({
         ref={inputRef}
         label={label}
         name={name}
-        onChange={item => {
+        onChange={(item?: string) => {
           if (!readOnly) {
             onChange(item);
           }
         }}
         placeholder={placeholder}
         required={required ?? false}
         defaultValue={[]}
-        value={value as string[]}
+        value={value}
         mb="xs"
       />
     );
@@ -71,15 +71,15 @@ function Select({
       ref={inputRef}
       label={label}
       name={name}
-      onChange={item => {
+      onChange={(item: string) => {
         if (!readOnly) {
           onChange(item ?? '');
         }
       }}
       placeholder={placeholder}
       required={required ?? false}
       defaultValue={null}
-      value={value as string}
+      value={value}
     />
   );
 }

@@ -1,6 +1,6 @@
+import { Button, ButtonProps } from '@mantine/core';
 import React, { Ref } from 'react';
 import { Override, filterDOMProps, useForm } from 'uniforms';
-import { Button, ButtonProps } from '@mantine/core';
 
 export type SubmitFieldProps = Override<
   ButtonProps,
@@ -18,7 +18,6 @@ export default function SubmitField({
 
   return (
     <Button
-      mb="xs"
       disabled={
         disabled === undefined
           ? !!(error || state.disabled || submitting)

@@ -1,6 +1,6 @@
-import React, { Ref } from 'react';
-import { FieldProps, connectField, filterDOMProps } from 'uniforms';
 import { TextInput, TextInputProps } from '@mantine/core';
+import React, { ChangeEvent, Ref } from 'react';
+import { FieldProps, connectField, filterDOMProps } from 'uniforms';
 
 export type TextFieldProps = FieldProps<
   string,
@@ -35,11 +35,13 @@ function Text({
         disabled={disabled}
         id={id}
         name={name}
-        onChange={event => onChange(event.target.value)}
+        onChange={(event: ChangeEvent<HTMLInputElement>) =>
+          onChange(event.target.value)
+        }
         placeholder={placeholder}
         readOnly={readOnly}
         ref={inputRef}
-        type={type ?? 'text'}
+        type={type}
         value={value ?? ''}
         w="100%"
         {...filterDOMProps(props)}
@@ -48,6 +50,4 @@ function Text({
   );
 }
 
-Text.defaultProps = { type: 'text' };
-
 export default connectField<TextFieldProps>(Text, { kind: 'leaf' });
@@ -1,5 +1,4 @@
 import FormLabel from '@mui/material/FormLabel';
-import React from 'react';
 import { connectField, HTMLFieldProps } from 'uniforms';
 
 import AutoField from './AutoField';