Don’t use the React.FC<> type any more

it’s primary value is to provide props.children automatically and we don’t want that for any of our components (Dropdown is the only component that takes children and it is very explicit about what it takes)
acusti · Sep 21, 2023 · d2ff095 · d2ff095
1 parent d2c8fbc
commit d2ff095
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
         "flow"
     ],
     "scripts": {
-        "build:flowtypes": "find . -type f -not -path './node_modules/*' -regex '.*/dist/[^/]*.d.ts' -exec sh -c 'yarn flowgen --add-flow-header --no-inexact $1 -o ${1%.*.*}.js.flow; sed -E -i \"\" \"s/React\\\\.(V?FC|(Void)?FunctionComponent)/React.StatelessFunctionalComponent/g; s/React\\\\.ReactNode/React.Node/g; s/React\\\\.ReactChild/React.Element<any>/g; s/import \\\\{ CSSValueType/import type { CSSValueType/g; s/React\\\\.SyntheticEvent/SyntheticEvent/g; s/React\\\\.ChangeEvent/SyntheticInputEvent/g; s/React\\\\.FormEvent/SyntheticEvent/g; s/React\\\\.KeyboardEvent/SyntheticKeyboardEvent/g; s/React\\\\.MouseEvent/SyntheticMouseEvent/g; s/React\\\\.FocusEvent/SyntheticFocusEvent/g;\" ${1%.*.*}.js.flow' _ '{}' \\;",
+        "build:flowtypes": "find . -type f -not -path './node_modules/*' -regex '.*/dist/[^/]*.d.ts' -exec sh -c 'yarn flowgen --add-flow-header --no-inexact $1 -o ${1%.*.*}.js.flow; sed -E -i \"\" \"s/React\\\\.ReactNode/React.Node/g; s/React\\\\.ReactChild/React.Element<any>/g; s/import \\\\{ CSSValueType/import type { CSSValueType/g; s/React\\\\.SyntheticEvent/SyntheticEvent/g; s/React\\\\.ChangeEvent/SyntheticInputEvent/g; s/React\\\\.FormEvent/SyntheticEvent/g; s/React\\\\.KeyboardEvent/SyntheticKeyboardEvent/g; s/React\\\\.MouseEvent/SyntheticMouseEvent/g; s/React\\\\.FocusEvent/SyntheticFocusEvent/g;\" ${1%.*.*}.js.flow' _ '{}' \\;",
         "build:stories": "yarn workspace @acusti/uikit-docs build",
         "build:tsc": "tsc --build",
         "build": "run-s format clean build:tsc build:flowtypes",

diff --git a/packages/css-value-input/src/CSSValueInput.tsx b/packages/css-value-input/src/CSSValueInput.tsx
@@ -46,7 +46,7 @@ const { useCallback, useEffect, useImperativeHandle, useRef } = React;
 
 const ROOT_CLASS_NAME = 'cssvalueinput';
 
-const CSSValueInput: React.FC<Props> = React.forwardRef<HTMLInputElement, Props>(
+const CSSValueInput = React.forwardRef<HTMLInputElement, Props>(
     (
         {
             allowEmpty = true,
@@ -72,7 +72,7 @@ const CSSValueInput: React.FC<Props> = React.forwardRef<HTMLInputElement, Props>
             unit = DEFAULT_UNIT_BY_CSS_VALUE_TYPE[cssValueType],
             validator,
             value,
-        },
+        }: Props,
         ref,
     ) => {
         const inputRef = useRef<InputRef>(null);

diff --git a/packages/dropdown/src/Dropdown.tsx b/packages/dropdown/src/Dropdown.tsx
@@ -76,7 +76,7 @@ const noop = () => {};
 const CHILDREN_ERROR =
     '@acusti/dropdown requires either 1 child (the dropdown body) or 2 children: the dropdown trigger and the dropdown body.';
 
-const Dropdown: React.FC<Props> = ({
+export default function Dropdown({
     allowEmpty = true,
     children,
     className,
@@ -96,7 +96,7 @@ const Dropdown: React.FC<Props> = ({
     placeholder,
     tabIndex,
     value,
-}) => {
+}: Props) {
     const childrenCount = Children.count(children);
     if (childrenCount !== 1 && childrenCount !== 2) {
         if (childrenCount === 0) {
@@ -697,6 +697,4 @@ const Dropdown: React.FC<Props> = ({
             </div>
         </Fragment>
     );
-};
-
-export default Dropdown;
+}