Merge pull request #59 from ljmotta/issue-58

Use TypeScript strict mode

Author: kingsleyzissou

.gitignore

@@ -104,4 +104,5 @@ dist
 .tern-port
 
 # Custom
-reproductions
+reproductions
+.idea/

src/AutoField.tsx

@@ -56,8 +56,10 @@ export default function AutoField(originalProps: AutoFieldProps) {
       invariant(component, 'Unsupported field type: %s', fieldType);
     }
   }
-  
-  return 'options' in component && component.options?.kind === 'leaf'
+
+  return component &&
+    'options' in component &&
+    component.options?.kind === 'leaf'
     ? createElement(component.Component, props)
-    : createElement(component, originalProps);;
+    : createElement(component!, originalProps);
 }

src/AutoFields.tsx

@@ -23,8 +23,8 @@ export default function AutoFields({
     element!,
     props,
     (fields ?? schema.getSubfields())
-      .filter(field => !omitFields!.includes(field))
-      .map(field => createElement(autoField!, { key: field, name: field })),
+      .filter((field) => !omitFields!.includes(field))
+      .map((field) => createElement(autoField!, { key: field, name: field }))
   );
 }
 

src/BaseForm.tsx

@@ -20,4 +20,4 @@ function Patternfly(parent: any): any {
   return _;
 }
 
-export default Patternfly(BaseForm);
+export default Patternfly(BaseForm);

src/BoolField.tsx

@@ -1,32 +1,43 @@
 import React from 'react';
-import { Checkbox, CheckboxProps, Switch } from '@patternfly/react-core';
-import { connectField, filterDOMProps } from 'uniforms/es5';
+import {
+  Checkbox,
+  CheckboxProps,
+  Switch,
+  SwitchProps,
+} from '@patternfly/react-core';
+import { connectField, FieldProps, filterDOMProps } from 'uniforms/es5';
 
-export type BoolFieldProps = {
-  appearance?: 'checkbox' | 'switch';
-  label?: string;
-  legend?: string;
-  onChange?: (value: any) => void;
-  transform?: (label?: string) => string;
-  disabled: boolean;
-} & Omit<CheckboxProps, 'isDisabled'>;
+enum ComponentType {
+  checkbox = 'checkbox',
+  switch = 'switch',
+}
 
-const Bool = ({
+export type BoolFieldProps = FieldProps<
+  boolean,
+  CheckboxProps & SwitchProps,
+  {
+    appearance?: ComponentType;
+    inputRef: React.RefObject<Switch | Checkbox> &
+      React.RefObject<HTMLInputElement>;
+  }
+>;
+
+function Bool({
+  appearance,
   disabled,
   id,
   inputRef,
   label,
   name,
   onChange,
   value,
-  toggle,
   ...props
-}) => {
-  const Component = (props.appearance === 'switch') ? Switch : Checkbox;
+}: BoolFieldProps) {
+  const Component = appearance === ComponentType.switch ? Switch : Checkbox;
   return (
     <div {...filterDOMProps(props)}>
       <Component
-        isChecked={!!value}
+        isChecked={value || false}
         isDisabled={disabled}
         id={id}
         name={name}
@@ -36,10 +47,8 @@ const Bool = ({
       />
     </div>
   );
-};
+}
 
-Bool.defaultProps = {
-  appearance: 'checkbox'
-};
+Bool.defaultProps = { appearance: ComponentType.checkbox };
 
 export default connectField(Bool);

src/DateField.tsx

@@ -1,12 +1,12 @@
-import React, { Ref } from 'react';
+import React, { FormEvent } from 'react';
+import { connectField, FieldProps } from 'uniforms/es5';
 import { TextInput, TextInputProps } from '@patternfly/react-core';
-import { connectField } from 'uniforms/es5';
 
 import wrapField from './wrapField';
 
 const DateConstructor = (typeof global === 'object' ? global : window).Date;
-const dateFormat = value => value && value.toISOString().slice(0, -8);
-const dateParse = (timestamp, onChange) => {
+const dateFormat = (value?: Date) => value && value.toISOString().slice(0, -8);
+const dateParse = (timestamp: number, onChange: DateFieldProps['onChange']) => {
   const date = new DateConstructor(timestamp);
   if (date.getFullYear() < 10000) {
     onChange(date);
@@ -15,20 +15,20 @@ const dateParse = (timestamp, onChange) => {
   }
 };
 
-export type DateFieldProps = {
-  id: string;
-  inputRef?: Ref<HTMLInputElement>;
-  onChange: (value?: string) => void;
-  value?: string;
-  disabled: boolean;
-  error?: boolean;
-} & Omit<TextInputProps, 'isDisabled'>;
+export type DateFieldProps = FieldProps<
+  Date,
+  TextInputProps,
+  {
+    inputRef: React.RefObject<HTMLInputElement>;
+    max?: Date;
+    min?: Date;
+  }
+>;
 
 function Date(props: DateFieldProps) {
-
-  const onChange = (value, event) => {
-    props.disabled || dateParse(event.target.valueAsNumber, props.onChange)
-  }
+  const onChange = (value: string, event: FormEvent<HTMLInputElement>) =>
+    props.disabled ||
+    dateParse((event.target as any).valueAsNumber, props.onChange);
 
   return wrapField(
     props,
@@ -43,7 +43,7 @@ function Date(props: DateFieldProps) {
       ref={props.inputRef}
       type="datetime-local"
       value={dateFormat(props.value) ?? ''}
-    />,
+    />
   );
 }
 

src/ListAddField.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import cloneDeep from 'lodash/cloneDeep';
 import { Button, ButtonProps } from '@patternfly/react-core';
 import { PlusCircleIcon } from '@patternfly/react-icons';
-import { useField, FieldProps, filterDOMProps, joinName } from 'uniforms/es5';
+import { useField, filterDOMProps, joinName } from 'uniforms/es5';
 
 export type ListAddFieldProps = {
   initialCount?: number;
@@ -23,7 +23,7 @@ function ListAdd({
   const parent = useField<{ maxCount?: number }, unknown[]>(
     parentName,
     {},
-    { absoluteName: true },
+    { absoluteName: true }
   )[0];
 
   const limitNotReached =
@@ -32,12 +32,12 @@ function ListAdd({
   return (
     <Button
       variant="plain"
-      style={{ paddingLeft: '0', paddingRight: '0'}}
+      style={{ paddingLeft: '0', paddingRight: '0' }}
       disabled={!limitNotReached}
       onClick={() => {
         !disabled &&
-        limitNotReached &&
-        parent.onChange(parent.value!.concat([cloneDeep(value)]));
+          limitNotReached &&
+          parent.onChange(parent.value!.concat([cloneDeep(value)]));
       }}
       {...filterDOMProps(props)}
     >

src/ListDelField.tsx

@@ -9,18 +9,14 @@ export type ListDelFieldProps = {
   value?: unknown;
 } & ButtonProps;
 
-function ListDel({
-  name,
-  disabled,
-  ...props
-}: ListDelFieldProps) {
+function ListDel({ name, disabled, ...props }: ListDelFieldProps) {
   const nameParts = joinName(null, name);
   const nameIndex = +nameParts[nameParts.length - 1];
   const parentName = joinName(nameParts.slice(0, -1));
   const parent = useField<{ minCount?: number }, unknown[]>(
     parentName,
     {},
-    { absoluteName: true },
+    { absoluteName: true }
   )[0];
 
   const limitNotReached =
@@ -30,13 +26,11 @@ function ListDel({
     <Button
       disabled={!limitNotReached || disabled}
       variant="plain"
-      style={{ paddingLeft: '0', paddingRight: '0'}}
+      style={{ paddingLeft: '0', paddingRight: '0' }}
       onClick={() => {
         const value = parent.value!.slice();
         value.splice(nameIndex, 1);
-        !disabled &&
-        limitNotReached &&
-        parent.onChange(value);
+        !disabled && limitNotReached && parent.onChange(value);
       }}
       {...filterDOMProps(props)}
     >

src/ListField.tsx

@@ -1,27 +1,16 @@
-import React, { Children, HTMLProps, ReactNode, isValidElement, cloneElement } from 'react';
+import React, {
+  Children,
+  ReactNode,
+  isValidElement,
+  cloneElement,
+} from 'react';
 import { Tooltip, Split, SplitItem } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
-import { HTMLFieldProps, connectField, filterDOMProps, joinName } from 'uniforms/es5';
+import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms/es5';
 
 import ListItemField from './ListItemField';
 import ListAddField from './ListAddField';
-import { ListDelField } from '.';
-
-// export type ListFieldProps = {
-//   value: unknown[];
-//   children?: ReactNode;
-//   addIcon?: any;
-//   error?: boolean;
-//   info?: boolean;
-//   errorMessage?: string;
-//   initialCount?: number;
-//   itemProps?: {};
-//   labelCol?: any;
-//   label: string;
-//   wrapperCol?: any;
-//   name: string;
-//   showInlineError?: boolean;
-// } & Omit<HTMLProps<HTMLDivElement>, 'children' | 'name'>;
+import ListDelField from './ListDelField';
 
 export type ListFieldProps = HTMLFieldProps<
   unknown[],
@@ -84,17 +73,17 @@ function ListField({
       </Split>
 
       <div>
-          {value?.map((item, itemIndex) =>
-            Children.map(children, (child, childIndex) =>
-              isValidElement(child)
-                ? cloneElement(child, {
-                    key: `${itemIndex}-${childIndex}`,
-                    name: child.props.name?.replace('$', '' + itemIndex),
-                    ...itemProps,
-                  })
-                : child,
-            ),
-          )}
+        {value?.map((item, itemIndex) =>
+          Children.map(children, (child, childIndex) =>
+            isValidElement(child)
+              ? cloneElement(child, {
+                  key: `${itemIndex}-${childIndex}`,
+                  name: child.props.name?.replace('$', '' + itemIndex),
+                  ...itemProps,
+                })
+              : child
+          )
+        )}
       </div>
     </div>
   );

src/ListItemField.tsx

@@ -13,17 +13,17 @@ export type ListItemFieldProps = {
 
 export default function ListItemField(props: ListItemFieldProps) {
   return (
-    <div style={{ marginBottom: '1rem'}}>
+    <div style={{ marginBottom: '1rem' }}>
       {props.children ? (
-        Children.map(props.children as JSX.Element, child =>
+        Children.map(props.children as JSX.Element, (child) =>
           React.cloneElement(child, {
             name: joinName(props.name, child.props.name),
             label: null,
-          }),
+          })
         )
       ) : (
         <AutoField {...props} />
       )}
     </div>
   );
-}
+}