From 394b7300afd63c6357da9db513ebb36620e27f95 Mon Sep 17 00:00:00 2001
From: Aarni Halinen <aarni.halinen@gmail.com>
Date: Fri, 14 Jan 2022 01:17:57 +0200
Subject: [PATCH] fix lint

---
 .eslintrc.js                                             | 1 +
 src/components/CrossFadeImages.tsx                       | 1 +
 src/components/Favicons.tsx                              | 2 +-
 src/components/Widgets/Checkbox/Checkboxes.tsx           | 9 +++++----
 src/components/Widgets/RadioButton/RadioButtonWidget.tsx | 9 +++++----
 5 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 609a6e1..d390281 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -46,5 +46,6 @@ module.exports = {
     "jsx-a11y/click-events-have-key-events": "off",
     "jsx-a11y/no-noninteractive-element-interactions": "off",
     "jsx-a11y/no-static-element-interactions": "off",
+    "@typescript-eslint/default-param-last": "warn",
   },
 };
diff --git a/src/components/CrossFadeImages.tsx b/src/components/CrossFadeImages.tsx
index adc1c75..78a72c1 100644
--- a/src/components/CrossFadeImages.tsx
+++ b/src/components/CrossFadeImages.tsx
@@ -70,6 +70,7 @@ const CrossFadeImages: React.FC<CrossFadeImagesProps> = ({
       $duration={len * SINGLE_IMAGE_TIME}
     >
       { images.map((image, idx) => (
+        // eslint-disable-next-line react/no-array-index-key
         <div key={idx} className={idx > 0 ? "not-first" : undefined}>
           <AnimatedImage
             key={image}
diff --git a/src/components/Favicons.tsx b/src/components/Favicons.tsx
index 26bcb4c..f1ab50c 100644
--- a/src/components/Favicons.tsx
+++ b/src/components/Favicons.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 const Icons = (): JSX.Element => (
   <>
-    <link rel="shortcut icon" href="/favicons/favicon.ico" />
+    <link rel="icon" href="/favicons/favicon.ico" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="48x48" href="/favicons/favicon-48x48.png" />
diff --git a/src/components/Widgets/Checkbox/Checkboxes.tsx b/src/components/Widgets/Checkbox/Checkboxes.tsx
index 539a9f3..e37bca8 100644
--- a/src/components/Widgets/Checkbox/Checkboxes.tsx
+++ b/src/components/Widgets/Checkbox/Checkboxes.tsx
@@ -16,7 +16,7 @@ const selectValue = (value, selected, all) => {
 const deselectValue = (value, selected) => selected.filter((v) => v !== value);
 
 type CheckboxesProps = Omit<WidgetProps, "options"> & {
-  options: any;
+  options: Record<string, any>;
 };
 
 const CheckboxContainer = styled.div`
@@ -30,12 +30,13 @@ const Checkboxes: React.FC<CheckboxesProps> = ({
   return (
     <div className="checkboxes" id={id}>
       {enumOptions.map((option, index) => {
+        const key = `${id}_${index}`;
         const checked = value.indexOf(option.value) !== -1;
         const itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) !== -1;
         const disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
         const checkbox = (
           <Checkbox
-            id={`${id}_${index}`}
+            id={key}
             checked={checked}
             disabled={disabled || itemDisabled || readonly}
             autoFocus={autofocus && index === 0}
@@ -52,11 +53,11 @@ const Checkboxes: React.FC<CheckboxesProps> = ({
           </Checkbox>
         );
         return inline ? (
-          <label key={index} className={`checkbox-inline ${disabledCls}`}>
+          <label key={key} className={`checkbox-inline ${disabledCls}`}>
             {checkbox}
           </label>
         ) : (
-          <CheckboxContainer key={index} className={disabledCls}>
+          <CheckboxContainer key={key} className={disabledCls}>
             {checkbox}
           </CheckboxContainer>
         );
diff --git a/src/components/Widgets/RadioButton/RadioButtonWidget.tsx b/src/components/Widgets/RadioButton/RadioButtonWidget.tsx
index ec73471..12ef5af 100644
--- a/src/components/Widgets/RadioButton/RadioButtonWidget.tsx
+++ b/src/components/Widgets/RadioButton/RadioButtonWidget.tsx
@@ -38,7 +38,8 @@ const RadioButtonWidget: React.FC<RadioButtonWidgetProps> = (props) => {
   // this is a temporary fix for radio button rendering bug in React, facebook/react#7630.
   return (
     <div className="field-radio-group" id={id}>
-      {enumOptions.map((option, i) => {
+      {enumOptions.map((option, index) => {
+        const key = `${id}_${index}`;
         const checked = option.value === value;
         const itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) !== -1;
         const disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
@@ -49,7 +50,7 @@ const RadioButtonWidget: React.FC<RadioButtonWidgetProps> = (props) => {
             required={required}
             value={option.value}
             disabled={disabled || itemDisabled || readonly}
-            autoFocus={autofocus && i === 0}
+            autoFocus={autofocus && index === 0}
             onChange={() => onChange(option.value)}
             onBlur={onBlur && ((event) => onBlur(id, event.target.value))}
             onFocus={onFocus && ((event) => onFocus(id, event.target.value))}
@@ -59,11 +60,11 @@ const RadioButtonWidget: React.FC<RadioButtonWidgetProps> = (props) => {
         );
 
         return inline ? (
-          <label key={i} className={`radio-inline ${disabledCls}`}>
+          <label key={key} className={`radio-inline ${disabledCls}`}>
             {radio}
           </label>
         ) : (
-          <RadioButtonContainer key={i} className={disabledCls}>
+          <RadioButtonContainer key={key} className={disabledCls}>
             {radio}
           </RadioButtonContainer>
         );