[components] Fix lint errors

sanity-io · Oct 6, 2020 · 9b859ae · 9b859ae
1 parent 6ac4b76
commit 9b859ae
Show file tree

Hide file tree

Showing 47 changed files with 138 additions and 81 deletions.
diff --git a/packages/@sanity/components/src/autocomplete/DefaultAutocomplete.tsx b/packages/@sanity/components/src/autocomplete/DefaultAutocomplete.tsx
@@ -16,6 +16,7 @@ interface DefaultAutocompleteProps {
   value?: string
 }
 
+// @todo: refactor to functional component
 export default class DefaultAutocomplete extends React.PureComponent<DefaultAutocompleteProps> {
   _inputId?: string = undefined
 

diff --git a/packages/@sanity/components/src/avatar/Avatar.tsx b/packages/@sanity/components/src/avatar/Avatar.tsx
@@ -54,18 +54,13 @@ export function Avatar(props: AvatarProps) {
     if (src) setImageFailed(false)
   }, [src])
 
-  const handleImageError = useCallback(
-    evt => {
-      setImageFailed(true)
-
-      if (onImageLoadError) {
-        const err = new Error('Avatar: the image failed to load')
-        ;(err as any).event = evt
-        onImageLoadError(err)
-      }
-    },
-    [onImageLoadError]
-  )
+  const handleImageError = useCallback(() => {
+    setImageFailed(true)
+
+    if (onImageLoadError) {
+      onImageLoadError(new Error('Avatar: the image failed to load'))
+    }
+  }, [onImageLoadError])
 
   return (
     <div

diff --git a/packages/@sanity/components/src/buttons/ButtonGrid.tsx b/packages/@sanity/components/src/buttons/ButtonGrid.tsx
@@ -8,6 +8,7 @@ interface ButtonGridProps {
   align?: 'start' | 'end'
 }
 
+// @todo: refactor to functional component
 export default class ButtonGrid extends React.PureComponent<
   ButtonGridProps & React.HTMLProps<HTMLDivElement>
 > {

diff --git a/packages/@sanity/components/src/buttons/ButtonGroup.tsx b/packages/@sanity/components/src/buttons/ButtonGroup.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 
 import styles from './ButtonGroup.css'
 
+// @todo: refactor to functional component
 export default class ButtonGroup extends React.PureComponent<React.HTMLProps<HTMLDivElement>> {
   render() {
     const {children, className, ...restProps} = this.props

diff --git a/packages/@sanity/components/src/buttons/DropDownButton.tsx b/packages/@sanity/components/src/buttons/DropDownButton.tsx
@@ -62,6 +62,7 @@ function parentButtonIsMenuButton(node, id) {
   return false
 }
 
+// @todo: refactor to functional component
 export default class DropDownButton extends React.PureComponent<
   DropdownButtonProps & React.HTMLProps<HTMLButtonElement>,
   DropdownButtonState

diff --git a/packages/@sanity/components/src/buttons/InInput.tsx b/packages/@sanity/components/src/buttons/InInput.tsx
@@ -12,6 +12,7 @@ interface InInputButtonProps {
   colored?: boolean
 }
 
+// @todo: refactor to functional component
 export default class InInputButton extends React.Component<
   InInputButtonProps & React.HTMLProps<HTMLButtonElement>
 > {

diff --git a/packages/@sanity/components/src/buttons/createButtonLike.tsx b/packages/@sanity/components/src/buttons/createButtonLike.tsx
@@ -19,6 +19,7 @@ export default function createButtonLike(
 ) {
   const Component = as as ButtonComponent
 
+  // @todo: refactor to functional component
   return class ButtonLike extends React.Component<ButtonProps, ButtonState> {
     static displayName =
       displayName ||

diff --git a/packages/@sanity/components/src/buttons/stories/default.tsx b/packages/@sanity/components/src/buttons/stories/default.tsx
@@ -12,13 +12,13 @@ const actionsProps = {
   onFocus: action('onFocus')
 }
 
-let buttonElement: any = null
+let buttonElement: HTMLButtonElement | null = null
 
 function testFocus() {
   if (buttonElement) buttonElement.focus()
 }
 
-function setButtonElement(element: any) {
+function setButtonElement(element: HTMLButtonElement | null) {
   buttonElement = element
 }
 
@@ -60,7 +60,7 @@ export function DefaultStory() {
         <div style={{width: '100%', maxWidth: 300}}>
           <div>
             <h2>kind="default"</h2>
-            <Button {...buttonProps} ref={setButtonElement}>
+            <Button {...buttonProps} ref={setButtonElement as any}>
               {children}
             </Button>
           </div>

diff --git a/packages/@sanity/components/src/clickOutside/stories/default.tsx b/packages/@sanity/components/src/clickOutside/stories/default.tsx
@@ -12,7 +12,7 @@ export function DefaultStory() {
           {ref => (
             <div
               onClick={action('click inside')}
-              ref={ref as any}
+              ref={ref}
               style={{background: '#fff', border: '1px solid #999', padding: '2em'}}
             >
               click inside/outside

diff --git a/packages/@sanity/components/src/containerQuery/story.ts b/packages/@sanity/components/src/containerQuery/story.ts
@@ -1,4 +1,3 @@
-// TODO
 import {storiesOf} from 'part:@sanity/storybook'
 import {withKnobs} from 'part:@sanity/storybook/addons/knobs'
 import {QueriesStory} from './stories/queries'

diff --git a/packages/@sanity/components/src/dialogs/ConfirmDialog.tsx b/packages/@sanity/components/src/dialogs/ConfirmDialog.tsx
@@ -15,6 +15,7 @@ interface ConfirmDialogProps {
   title?: string
 }
 
+// @todo: refactor to functional component
 export default class ConfirmDialog extends React.PureComponent<ConfirmDialogProps> {
   handleAction = (action: DialogAction) => {
     if (action.key === 'confirm') {

diff --git a/packages/@sanity/components/src/dialogs/DefaultDialog.tsx b/packages/@sanity/components/src/dialogs/DefaultDialog.tsx
@@ -53,11 +53,14 @@ function DefaultDialog(props: DefaultDialogProps) {
     classNameProp
   )
 
-  const handleEscape = useCallback((event: KeyboardEvent) => {
-    // This code used to be `onEscape || onClose`
-    if (onEscape) onEscape(event)
-    else if (onClose) onClose()
-  }, [])
+  const handleEscape = useCallback(
+    (event: KeyboardEvent) => {
+      // This code used to be `onEscape || onClose`
+      if (onEscape) onEscape(event)
+      else if (onClose) onClose()
+    },
+    [onEscape, onClose]
+  )
 
   const renderCloseButton = onClose && showCloseButton
   const renderFloatingCloseButton = !title && renderCloseButton
@@ -87,8 +90,8 @@ function DefaultDialog(props: DefaultDialogProps) {
             <ClickOutside onClickOutside={isActive ? handleClickOutside : undefined}>
               {ref => (
                 <div className={styles.card} ref={ref}>
-                  {/* eslint-disable-next-line react/jsx-no-bind */}
                   <Escapable
+                    // eslint-disable-next-line react/jsx-no-bind
                     onEscape={event => (isActive || event.shiftKey) && handleEscape(event)}
                   />
                   <div className={styles.inner}>

diff --git a/packages/@sanity/components/src/dialogs/DialogContent.tsx b/packages/@sanity/components/src/dialogs/DialogContent.tsx
@@ -1,22 +1,22 @@
 import classNames from 'classnames'
 import styles from 'part:@sanity/components/dialogs/content-style'
-import React from 'react'
+import React, {useEffect} from 'react'
 
 interface DialogContentProps {
   size?: 'small' | 'medium' | 'large' | 'auto'
   padding?: 'none' | 'small' | 'medium' | 'large'
   children?: React.ReactNode
 }
 
-export default class DialogContent extends React.PureComponent<DialogContentProps> {
-  componentDidMount() {
+function DialogContent(props: DialogContentProps) {
+  const {size = 'auto', children, padding = 'medium'} = props
+
+  useEffect(() => {
     // eslint-disable-next-line no-console
     console.warn('DialogContent is deprecated. Use `<DefaultDialog padding size />` instead.')
-  }
-
-  render() {
-    const {size = 'auto', children, padding = 'medium'} = this.props
+  }, [])
 
-    return <div className={classNames(styles[size], styles[`padding_${padding}`])}>{children}</div>
-  }
+  return <div className={classNames(styles[size], styles[`padding_${padding}`])}>{children}</div>
 }
+
+export default DialogContent
diff --git a/packages/@sanity/components/src/dialogs/FullscreenDialog.tsx b/packages/@sanity/components/src/dialogs/FullscreenDialog.tsx
@@ -27,6 +27,7 @@ interface FullScreenDialogProps {
 
 const noop = () => undefined
 
+// @todo: refactor to functional component
 export default class FullScreenDialog extends React.PureComponent<FullScreenDialogProps> {
   createButtonFromAction = (action: DialogAction, i: number) => {
     const {onAction} = this.props

diff --git a/packages/@sanity/components/src/dialogs/PanePopover.tsx b/packages/@sanity/components/src/dialogs/PanePopover.tsx
@@ -21,6 +21,7 @@ const DEFAULT_ICONS = {
   error: <WarningIcon />
 }
 
+// @todo: refactor to functional component
 export default class PanePopover extends React.PureComponent<PanePopoverProps> {
   iconKind = () => {
     const {icon, kind = 'info'} = this.props

diff --git a/packages/@sanity/components/src/dialogs/PopOver.tsx b/packages/@sanity/components/src/dialogs/PopOver.tsx
@@ -31,7 +31,7 @@ interface PopOverProps {
   actions?: DialogAction[]
 }
 
-// @todo: Rename to `Popover`
+// @todo: refactor to functional component
 export default class PopOver extends React.PureComponent<PopOverProps> {
   static defaultProps = {
     title: undefined,

diff --git a/packages/@sanity/components/src/edititem/EditItemFoldOut.tsx b/packages/@sanity/components/src/edititem/EditItemFoldOut.tsx
@@ -14,6 +14,7 @@ interface EditItemFoldOutProps {
   onClose?: () => void
 }
 
+// @todo: refactor to functional component
 export default class EditItemFoldOut extends React.PureComponent<EditItemFoldOutProps> {
   render() {
     const {title = '', onClose, children} = this.props

diff --git a/packages/@sanity/components/src/fileinput/DefaultFileInput.tsx b/packages/@sanity/components/src/fileinput/DefaultFileInput.tsx
@@ -11,6 +11,7 @@ interface DefaultFileInputProps {
   style?: React.CSSProperties
 }
 
+// @todo: refactor to functional component
 export default class DefaultFileInput extends React.PureComponent<DefaultFileInputProps> {
   _inputId = uniqueId('FileSelect')
   componentDidMount() {

diff --git a/packages/@sanity/components/src/snackbar/SnackbarProvider.tsx b/packages/@sanity/components/src/snackbar/SnackbarProvider.tsx
@@ -207,7 +207,7 @@ export default class SnackbarProvider extends React.Component<SnackbarProviderPr
                 key={snack.id}
                 {...snack}
                 offset={this.offsets[index]}
-                onDismiss={id => this.handleDismissSnack(id)}
+                onDismiss={this.handleDismissSnack}
                 onSetHeight={this.handleSetHeight}
               />
             ))}

diff --git a/packages/@sanity/components/src/snackbar/stories/transitions.tsx b/packages/@sanity/components/src/snackbar/stories/transitions.tsx
@@ -17,6 +17,7 @@ const globalDefaults: Omit<SnackbarItemProps, 'onSetHeight'> = {
   onDismiss: action('onDismiss()')
 }
 
+// @todo: refactor to functional component
 class SnackQueue extends React.PureComponent<SnackQueueProps> {
   static contextTypes = {
     addToSnackQueue: PropTypes.func

diff --git a/packages/@sanity/components/src/tabs/Tab.tsx b/packages/@sanity/components/src/tabs/Tab.tsx
@@ -17,6 +17,7 @@ interface State {
   isDOMFocused: boolean
 }
 
+// @todo: refactor to functional component
 export default class Tab extends React.PureComponent<TabProps, State> {
   element: HTMLButtonElement | null = null
   focusTimeout?: NodeJS.Timer

diff --git a/packages/@sanity/components/src/tabs/TabList.tsx b/packages/@sanity/components/src/tabs/TabList.tsx
@@ -10,6 +10,7 @@ interface State {
   focusedTabIdx: number
 }
 
+// @todo: refactor to functional component
 export default class TabList extends React.PureComponent<TabListProps, State> {
   state: State = {
     focusedTabIdx: -1

diff --git a/packages/@sanity/components/src/tags/TextField.tsx b/packages/@sanity/components/src/tags/TextField.tsx
@@ -21,6 +21,7 @@ function removeAt(array: string[], index: number) {
   return copy
 }
 
+// @todo: refactor to functional component
 export default class TagsTextField extends React.Component<
   TagsTextFieldProps & Omit<React.HTMLProps<HTMLInputElement>, 'onBlur' | 'onChange' | 'value'>,
   State
@@ -94,6 +95,8 @@ export default class TagsTextField extends React.Component<
 
   render() {
     const {inputValue} = this.state
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const {onChange, value = [], readOnly, markers, inputId, ...rest} = this.props
 
     return (

diff --git a/packages/@sanity/components/src/tags/stories/tagsTest.tsx b/packages/@sanity/components/src/tags/stories/tagsTest.tsx
@@ -47,6 +47,7 @@ interface State {
   tags: string[]
 }
 
+// @todo: refactor to functional component
 class DefaultTextFieldTagsImplementation extends React.PureComponent<
   DefaultTextFieldTagsImplementationProps,
   State

diff --git a/packages/@sanity/components/src/textareas/DefaultTextArea.tsx b/packages/@sanity/components/src/textareas/DefaultTextArea.tsx
@@ -10,6 +10,7 @@ interface DefaultTextAreaProps {
   inputId?: string
 }
 
+// @todo: refactor to functional component
 export default class DefaultTextArea extends React.Component<
   DefaultTextAreaProps & Omit<React.HTMLProps<HTMLTextAreaElement>, 'id'>
 > {
@@ -56,8 +57,10 @@ export default class DefaultTextArea extends React.Component<
     const {
       isClearable,
       onClear,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       customValidity = '',
       inputId,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       hasFocus,
       rows = 10,
       ...rest

diff --git a/packages/@sanity/components/src/textfields/DefaultTextField.tsx b/packages/@sanity/components/src/textfields/DefaultTextField.tsx
@@ -21,10 +21,11 @@ interface DefaultTextFieldProps {
   isClearable?: boolean
   className?: string
   description?: string
-  hasFocus?: boolean
-  inputId?: string
+  // hasFocus?: boolean
+  // inputId?: string
 }
 
+// @todo: refactor to functional component
 export default class DefaultTextField extends React.Component<DefaultTextFieldProps> {
   _inputId?: string
 
@@ -47,13 +48,13 @@ export default class DefaultTextField extends React.Component<DefaultTextFieldPr
       className,
       level = 1,
       description,
-      hasFocus,
+      // hasFocus,
       onChange,
       onKeyPress,
       onFocus,
       onBlur,
-      value = '',
-      inputId
+      value = ''
+      // inputId
     } = this.props
 
     return (

diff --git a/packages/@sanity/components/src/textfields/SearchField.tsx b/packages/@sanity/components/src/textfields/SearchField.tsx
@@ -12,6 +12,7 @@ interface SearchFieldFieldProps {
   value?: string
 }
 
+// @todo: refactor to functional component
 export default class SearchFieldField extends React.Component<SearchFieldFieldProps> {
   _inputId = uniqueId('searchfield')
 

diff --git a/packages/@sanity/components/src/textfields/stories/default.tsx b/packages/@sanity/components/src/textfields/stories/default.tsx
@@ -19,7 +19,7 @@ export function DefaultStory() {
             onFocus={action('onFocus')}
             onClear={action('onClear')}
             isClearable={boolean('isClearable', false, 'props')}
-            hasFocus={boolean('hasFocus', false, 'props')}
+            // hasFocus={boolean('hasFocus', false, 'props')}
           />
         </Sanity>
       </div>

diff --git a/packages/@sanity/components/src/textinputs/TextInput.tsx b/packages/@sanity/components/src/textinputs/TextInput.tsx
@@ -4,6 +4,7 @@ import defaultStyles from 'part:@sanity/components/textinputs/default-style'
 import React from 'react'
 import {DefaultTextInputProps} from './types'
 
+// @todo: refactor to functional component
 export default class DefaultTextInput extends React.PureComponent<DefaultTextInputProps> {
   _input: HTMLInputElement | null = null
 
@@ -42,13 +43,18 @@ export default class DefaultTextInput extends React.PureComponent<DefaultTextInp
     const {
       className: classNameProp,
       onClear,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       hasError = false,
       isClearable = false,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       isSelected = false,
       disabled = false,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       markers,
       styles: stylesProp,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       customValidity,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       focusPath,
       inputId = '',
       ...restProps

diff --git a/packages/@sanity/components/src/textinputs/stories/defaultTest.tsx b/packages/@sanity/components/src/textinputs/stories/defaultTest.tsx
@@ -23,6 +23,7 @@ interface State {
   value: string
 }
 
+// @todo: refactor to functional component
 class DefaultTextInputTest extends React.PureComponent<DefaultTextInputProps, State> {
   constructor(props: DefaultTextInputProps) {
     super(props)