fix(redux-devtools-test-generator): fix devui's Select component (#637)

* Stash

* Fix stuff

* Unused

* Update snapshot

packages/devui/package.json

@@ -47,7 +47,6 @@
     "base16": "^1.0.0",
     "codemirror": "^5.56.0",
     "color": "^3.1.2",
-    "hoist-non-react-statics": "^3.3.2",
     "prop-types": "^15.7.2",
     "react-icons": "^3.10.0",
     "react-jsonschema-form": "^1.8.1",

packages/devui/src/Select/Select.tsx

@@ -38,6 +38,11 @@ export class Select extends (PureComponent || Component)<SelectProps> {
             neutral60: this.props.theme.base06,
             neutral80: this.props.theme.base07,
           },
+          spacing: {
+            ...theme.spacing,
+            baseUnit: 2,
+            controlHeight: this.props.theme.inputHeight,
+          },
         })}
       />
     );

packages/devui/src/utils/createThemedComponent.tsx

@@ -1,5 +1,4 @@
-import React, { ComponentType } from 'react';
-import hoistNonReactStatics from 'hoist-non-react-statics';
+import React from 'react';
 import getDefaultTheme, { Theme } from '../themes/default';
 import { withTheme } from 'styled-components';
 import { Base16Theme } from 'base16';
@@ -9,33 +8,16 @@ export default <C extends React.ComponentType<any>>(
     ? C
     : never
 ) => {
-  const ThemedComponent = React.forwardRef<C, React.ComponentProps<C>>(
-    (props, ref) => {
-      // eslint-disable-next-line react/prop-types
-      if (props.theme && props.theme.type) {
-        const ThemedComponent = withTheme(
-          UnthemedComponent as ComponentType<{ theme?: Theme }>
-        );
-        return <ThemedComponent {...props} ref={ref} />;
-      }
-      const UnthemedComponentAny = UnthemedComponent as any;
-      return (
-        <UnthemedComponentAny
-          {...props}
-          ref={ref}
-          theme={getDefaultTheme({} as Base16Theme)}
-        />
-      );
-    }
-  );
-
-  hoistNonReactStatics(ThemedComponent, UnthemedComponent);
-
-  ThemedComponent.displayName = `ThemedComponent(${
-    UnthemedComponent.displayName ?? 'Component'
-  })`;
-
-  return ThemedComponent;
+  return withTheme((props) => {
+    return props.theme && props.theme.type ? (
+      <UnthemedComponent {...props} />
+    ) : (
+      <UnthemedComponent
+        {...props}
+        theme={getDefaultTheme((props.theme ?? {}) as Base16Theme)}
+      />
+    );
+  });
 };
 
 // TODO: memoize it?

packages/redux-devtools-test-generator/src/TestGenerator.tsx

@@ -1,5 +1,4 @@
 import React, { PureComponent, Component, ReactNode } from 'react';
-import PropTypes from 'prop-types';
 import { stringify } from 'javascript-stringify';
 import objectPath from 'object-path';
 import jsan from 'jsan';

packages/redux-devtools-test-generator/src/index.tsx

@@ -130,14 +130,15 @@ export default class TestTab<S, A extends Action<unknown>> extends Component<
     return (
       <Container>
         <Toolbar>
-          <Select
-            options={templates}
-            valueKey="name"
-            labelKey="name"
-            value={name}
-            simpleValue={false}
-            onChange={this.handleSelectTemplate}
-          />
+          <div style={{ flexGrow: 1, zIndex: 100 }}>
+            <Select
+              options={templates}
+              getOptionValue={(template: Template) => template.name}
+              getOptionLabel={(template: Template) => template.name}
+              value={templates.filter((template) => template.name === name)}
+              onChange={this.handleSelectTemplate}
+            />
+          </div>
           <Button onClick={this.editTemplate}>
             <MdEdit />
           </Button>

yarn.lock

@@ -9357,7 +9357,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==