RC #121 - Fixing Flow types errors and ESLint errors

.eslintrc.json

@@ -34,6 +34,7 @@
     "max-len": ["error", { "code": 120 }],
     "no-underscore-dangle": "off",
     "no-use-before-define": "off",
+    "import/prefer-default-export": "off",
     "react/default-props-match-prop-types": "off",
     "react/destructuring-assignment": "off",
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],

.flowconfig

@@ -1,4 +1,5 @@
 [ignore]
+<PROJECT_ROOT>/types/.*
 
 [include]
 

src/common/EditContainer.js

@@ -55,9 +55,11 @@ const useEditContainer = (WrappedComponent: ComponentType<any>) => (
     componentDidMount() {
       if (this.props.onInitialize && this.props.item && this.props.item.id) {
         this.setState({ loading: true }, () => {
-          this.props
-            .onInitialize(this.props.item.id)
-            .then((item) => this.setState({ item, originalItem: item, loading: false }));
+          if (this.props.onInitialize && this.props.item) {
+            this.props
+              .onInitialize(this.props.item.id)
+              .then((item) => this.setState({ item, originalItem: item, loading: false }));
+          }
         });
       }
     }
@@ -427,6 +429,7 @@ export default useEditContainer;
 
 export type EditContainerProps = {
   children: Element<any>,
+  dirty: boolean,
   errors: Array<string>,
   isError: (property: string) => boolean,
   isRequired: (property: string) => boolean,

src/common/Keyboard.js

@@ -24,9 +24,9 @@ const KeyboardSimple = (props: Props) => {
   const onKeyPress = (value) => {
     const isCaps = value === KEY_CAPS_LOCK || value === KEY_SHIFT;
 
-    if (isCaps && keyboardRef.current.options.layoutName === LAYOUT_SHIFT) {
+    if (isCaps && keyboardRef.current && keyboardRef.current.options.layoutName === LAYOUT_SHIFT) {
       keyboardRef.current.setOptions({ layoutName: LAYOUT_DEFAULT });
-    } else if (isCaps && keyboardRef.current.options.layoutName !== LAYOUT_SHIFT) {
+    } else if (isCaps && keyboardRef.current && keyboardRef.current.options.layoutName !== LAYOUT_SHIFT) {
       keyboardRef.current.setOptions({ layoutName: LAYOUT_SHIFT });
     }
   };
@@ -40,7 +40,9 @@ const KeyboardSimple = (props: Props) => {
 
   // Sets the keyboard value when the value property changes.
   useEffect(() => {
-    keyboardRef.current.setInput(props.value);
+    if (keyboardRef.current) {
+      keyboardRef.current.setInput(props.value);
+    }
   }, [props.value]);
 
   return <div className={props.keyboardClass} />;

src/i18n/i18n.js

@@ -19,6 +19,6 @@ i18n
       escapeValue: false,
     },
     resources
-});
+  });
 
-export default i18n;
+export default i18n;

src/index.js

@@ -25,7 +25,7 @@ export { default as Draggable } from './semantic-ui/Draggable';
 export { default as DropdownButton } from './semantic-ui/DropdownButton';
 export { default as DropdownMenu } from './semantic-ui/DropdownMenu';
 export { default as EditModal } from './semantic-ui/EditModal';
-export { default as EditPage, useEditPage } from './semantic-ui/EditPage';
+export { default as EditPage } from './semantic-ui/EditPage';
 export { default as EmbeddedList } from './semantic-ui/EmbeddedList';
 export { default as FileInputButton } from './semantic-ui/FileInputButton';
 export { default as FileUpload } from './semantic-ui/FileUpload';

src/semantic-ui/AccordionDataList.js

@@ -18,7 +18,7 @@ type Sort = {
   key: any,
   value: any,
   text: string,
-  direction:? string
+  direction?: string
 };
 
 type Props = ListProps & {

src/semantic-ui/AccordionList.js

@@ -331,7 +331,7 @@ class AccordionList extends Component<Props, State> {
     return (
       <Button
         basic
-        compant
+        compact
         icon='plus'
         onClick={this.onAddButton.bind(this, item)}
       />

src/semantic-ui/AccordionSelector.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Component } from 'react';
+import React, { Component, type ComponentType, type Element } from 'react';
 import { withTranslation } from 'react-i18next';
 import {
   Button,
@@ -26,7 +26,7 @@ type Props = {
   getRootItems: (items: Array<any>) => Array<any>,
   isSelectable?: (item: any) => boolean,
   modal?: {
-    component: Component<{}>,
+    component: ComponentType<{}>,
     onSave: (item: any) => Promise<any>,
     props: any,
     state: any,
@@ -36,7 +36,7 @@ type Props = {
   onSave: (selectedItems: Array<any>) => void,
   onSearch: (parentId: ?number, search: ?string) => any,
   open?: boolean,
-  renderItem: (item: any) => string | Component<{}>,
+  renderItem: (item: any) => string | Element<any>,
   selectedItems?: Array<any>,
   showToggle: (item: any) => boolean,
   t: (key: string) => string,

src/semantic-ui/ColorPickerModal.js

@@ -10,8 +10,7 @@ type Props = {
   color: string,
   onClose: () => void,
   onSave: (selectedColor: string) => void,
-  open: boolean,
-  t: (key: string) => string
+  open: boolean
 };
 
 type State = {
@@ -24,7 +23,7 @@ class ColorPickerModal extends Component<Props, State> {
    *
    * @param props
    */
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
 
     this.state = {

src/semantic-ui/DataList.js

@@ -15,13 +15,13 @@ type Props = {
   defaultSort?: string,
   defaultSortDirection?: string,
   filters?: {
-    component: Component<{}>,
-    defaults: any,
-    props: any,
-    onChange: (filter: any) => Promise<any>
+    component: ComponentType<any>,
+    defaults?: any,
+    props?: any,
+    onChange?: (filter: any) => Promise<any>
   },
   onDelete: (item: any) => Promise<any>,
-  onDeleteAll: () => Promise<any>,
+  onDeleteAll?: () => Promise<any>,
   onLoad: (params: any) => Promise<any>,
   onSave: (item: any) => Promise<any>,
   perPageOptions?: Array<number>,
@@ -197,11 +197,9 @@ const useDataList = (WrappedComponent: ComponentType<any>) => (
      * Initializes the state based on the passed props.
      *
      * @param props
-     *
-     * @returns {{search: (*|null), sortColumn: (string|string|null), sortDirection: (string|null), pages: number,
-     * saved: (*|boolean), filters: ({component: Component<{}>, props: *,
-     * onChange}|*|{}|boolean|PrettyError.Callback|PrettyError.Callback[]), page: (*|number), loading: boolean,
-     * items: []}}
+
+     * @returns {{search: string, sortColumn: string, sortDirection: string, pages: number, perPage: (number|*),
+     * saved: boolean, count: number, filters: (*|{}), page: number, error: null, loading: boolean, items: *[]}}
      */
     initializeState(props: Props) {
       const session = this.restoreSession();
@@ -266,6 +264,10 @@ const useDataList = (WrappedComponent: ComponentType<any>) => (
      * @returns {Q.Promise<any> | Promise<R> | Promise<any> | void | *}
      */
     onDeleteAll() {
+      if (!this.props.onDeleteAll) {
+        return Promise.resolve();
+      }
+
       return this.props
         .onDeleteAll()
         .then(this.afterDeleteAll.bind(this));
@@ -357,6 +359,8 @@ const useDataList = (WrappedComponent: ComponentType<any>) => (
      * Updates the sortColumn and sortDirection props on the state.
      *
      * @param sortColumn
+     * @param direction
+     * @param page
      */
     onSort(sortColumn: string, direction?: string, page?: number = 1) {
       let sortDirection = direction;

src/semantic-ui/DataTable.js

@@ -35,7 +35,7 @@ type Props = {
   className: string,
   columns: Array<Column>,
   expandableRows: boolean,
-  expandPanel: () => Component<any>,
+  expandPanel: (item: any, activePanel: any) => Component<any>,
   isRowSelected: (item: any) => boolean,
   items: ?Array<any>,
   loading: boolean,
@@ -55,6 +55,7 @@ type Props = {
 };
 
 type State = {
+  activePanel: any,
   resize: ?{
     columnRef: typeof Ref,
     offset: number
@@ -457,9 +458,9 @@ class DataTable extends Component<Props, State> {
     const handleCellClick = (e) => {
       // only target table cells, not action buttons or checkboxes, etc.
       if (e.target.nodeName === 'TD') {
-        this.setState({
-          activePanel: this.state.activePanel === item.id ? '' : item.id
-        });
+        this.setState((state) => ({
+          activePanel: state.activePanel === item.id ? '' : item.id
+        }));
       }
     };
 

src/semantic-ui/DatePicker.js

@@ -17,9 +17,9 @@ type Props = {
 
 const DatePicker = (props: Props) => {
   const [calendar, setCalendar] = useState(false);
-  const calendarWrapper = useRef(null);
+  const calendarWrapper = useRef<any>(null);
 
-  const onDocumentClick = (event) => {
+  const onDocumentClick = (event: Event) => {
     const calendarInstance = calendarWrapper.current;
 
     if (calendarInstance && !calendarInstance.contains(event.target)) {

src/semantic-ui/EditModal.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { type ComponentType, useEffect, useState } from 'react';
+import React, { type ComponentType, useState } from 'react';
 import {
   Button,
   Dimmer,