[bot] migrate files

superset-frontend/packages/superset-ui-core/src/chart-composition/ChartFrame.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { PureComponent } from 'react';
+import React from 'react';
 import { isDefined } from '../utils';
 
 function checkNumber(input: unknown): input is number {
@@ -38,36 +38,36 @@ type Props = {
   width: number;
 };
 
-export default class ChartFrame extends PureComponent<Props, {}> {
-  static defaultProps = {
-    renderContent() {},
+const ChartFrame = (inputProps: Props) => {
+  const props = {
+    renderContent: function () {},
+    ...inputProps,
   };
 
-  render() {
-    const { contentWidth, contentHeight, width, height, renderContent } =
-      this.props;
+  const { contentWidth, contentHeight, width, height, renderContent } = props;
 
-    const overflowX = checkNumber(contentWidth) && contentWidth > width;
-    const overflowY = checkNumber(contentHeight) && contentHeight > height;
+  const overflowX = checkNumber(contentWidth) && contentWidth > width;
+  const overflowY = checkNumber(contentHeight) && contentHeight > height;
 
-    if (overflowX || overflowY) {
-      return (
-        <div
-          style={{
-            height,
-            overflowX: overflowX ? 'auto' : 'hidden',
-            overflowY: overflowY ? 'auto' : 'hidden',
-            width,
-          }}
-        >
-          {renderContent({
-            height: Math.max(contentHeight ?? 0, height),
-            width: Math.max(contentWidth ?? 0, width),
-          })}
-        </div>
-      );
-    }
-
-    return renderContent({ height, width });
+  if (overflowX || overflowY) {
+    return (
+      <div
+        style={{
+          height,
+          overflowX: overflowX ? 'auto' : 'hidden',
+          overflowY: overflowY ? 'auto' : 'hidden',
+          width,
+        }}
+      >
+        {renderContent({
+          height: Math.max(contentHeight ?? 0, height),
+          width: Math.max(contentWidth ?? 0, width),
+        })}
+      </div>
+    );
   }
-}
+
+  return renderContent({ height, width });
+};
+
+export default ChartFrame;

superset-frontend/packages/superset-ui-core/src/chart-composition/tooltip/TooltipFrame.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { PureComponent } from 'react';
+import React from 'react';
 
 const defaultProps = {
   className: '',
@@ -30,18 +30,19 @@ type Props = {
 
 const CONTAINER_STYLE = { padding: 8 };
 
-class TooltipFrame extends PureComponent<Props, {}> {
-  static defaultProps = defaultProps;
+const TooltipFrame = (inputProps: Props) => {
+  const props = {
+    ...defaultProps,
+    ...inputProps,
+  };
 
-  render() {
-    const { className, children } = this.props;
+  const { className, children } = props;
 
-    return (
-      <div className={className} style={CONTAINER_STYLE}>
-        {children}
-      </div>
-    );
-  }
-}
+  return (
+    <div className={className} style={CONTAINER_STYLE}>
+      {children}
+    </div>
+  );
+};
 
 export default TooltipFrame;

superset-frontend/packages/superset-ui-core/src/chart-composition/tooltip/TooltipTable.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { CSSProperties, PureComponent, ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 
 interface TooltipRowData {
   key: string | number;
@@ -39,31 +39,34 @@ type Props = {
 
 const VALUE_CELL_STYLE: CSSProperties = { paddingLeft: 8, textAlign: 'right' };
 
-export default class TooltipTable extends PureComponent<Props, {}> {
-  static defaultProps = defaultProps;
+const TooltipTable = (inputProps: Props) => {
+  const props = {
+    ...defaultProps,
+    ...inputProps,
+  };
 
-  render() {
-    const { className, data } = this.props;
+  const { className, data } = props;
 
-    return (
-      <table className={className}>
-        <tbody>
-          {data.map(({ key, keyColumn, keyStyle, valueColumn, valueStyle }) => (
-            <tr key={key}>
-              <td style={keyStyle}>{keyColumn ?? key}</td>
-              <td
-                style={
-                  valueStyle
-                    ? { ...VALUE_CELL_STYLE, ...valueStyle }
-                    : VALUE_CELL_STYLE
-                }
-              >
-                {valueColumn}
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    );
-  }
-}
+  return (
+    <table className={className}>
+      <tbody>
+        {data.map(({ key, keyColumn, keyStyle, valueColumn, valueStyle }) => (
+          <tr key={key}>
+            <td style={keyStyle}>{keyColumn ?? key}</td>
+            <td
+              style={
+                valueStyle
+                  ? { ...VALUE_CELL_STYLE, ...valueStyle }
+                  : VALUE_CELL_STYLE
+              }
+            >
+              {valueColumn}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default TooltipTable;

superset-frontend/packages/superset-ui-demo/storybook/shared/components/Expandable.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useState, useCallback } from 'react';
 
 export type Props = {
   children: ReactNode;
@@ -28,34 +28,29 @@ type State = {
   open: boolean;
 };
 
-export default class Expandable extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = { open: false };
-    this.handleToggle = this.handleToggle.bind(this);
-  }
-
-  handleToggle() {
-    this.setState(({ open }) => ({ open: !open }));
-  }
-
-  render() {
-    const { open } = this.state;
-    const { children, expandableWhat } = this.props;
-
-    return (
-      <div>
-        <button
-          type="button"
-          className="btn btn-primary btn-sm"
-          onClick={this.handleToggle}
-        >
-          {`${open ? 'Hide' : 'Show'} ${expandableWhat}`}
-        </button>
-        <br />
-        <br />
-        {open ? children : null}
-      </div>
-    );
-  }
-}
+const Expandable = (props: Props) => {
+  const [open, setOpen] = useState(false);
+
+  const handleToggleHandler = useCallback(() => {
+    setOpen(open => !open);
+  }, [open]);
+
+  const { children, expandableWhat } = props;
+
+  return (
+    <div>
+      <button
+        type="button"
+        className="btn btn-primary btn-sm"
+        onClick={handleToggleHandler}
+      >
+        {`${open ? 'Hide' : 'Show'} ${expandableWhat}`}
+      </button>
+      <br />
+      <br />
+      {open ? children : null}
+    </div>
+  );
+};
+
+export default Expandable;