Fix Preference component props typing (codesandbox#2861)

Author: br1anchen

packages/common/src/components/Preference/index.tsx

@@ -1,133 +1,87 @@
 import React from 'react';
 import Tooltip from '../../components/Tooltip';
 
-import PreferenceSwitch from './PreferenceSwitch';
-import PreferenceDropdown, { NameMapper } from './PreferenceDropdown';
-import PreferenceNumber from './PreferenceNumber';
-import PreferenceText from './PreferenceText';
-import PreferenceKeybinding from './PreferenceKeybinding';
+import PreferenceSwitch, { Props as SwitchProps } from './PreferenceSwitch';
+import PreferenceDropdown, {
+  Props as DropdownProps,
+} from './PreferenceDropdown';
+import PreferenceNumber, { Props as NumberProps } from './PreferenceNumber';
+import PreferenceText, { Props as TextProps } from './PreferenceText';
+import PreferenceKeybinding, {
+  Props as KeybindingProps,
+} from './PreferenceKeybinding';
 import { Container } from './elements';
 
-export type Props = {
+type PreferenceType =
+  | 'boolean'
+  | 'string'
+  | 'dropdown'
+  | 'keybinding'
+  | 'number';
+
+type PreferenceProps<TString extends PreferenceType> = {
+  type: TString;
   title: string;
   style?: React.CSSProperties;
   className?: string;
   tooltip?: string;
-} & (
-  | BooleanPreference
-  | StringPreference
-  | DropdownPreference
-  | KeybindingPreference
-  | NumberPreference);
-
-type SetValueT<T> = (value: T) => void;
-
-export type BooleanPreference = {
-  type: 'boolean';
-  value: boolean;
-  defaultValue?: boolean;
-  setValue: SetValueT<boolean>;
-};
-
-export type StringPreference = {
-  type: 'string';
-  value: string;
-  defaultValue?: string;
-  setValue: SetValueT<string>;
-};
-
-export type DropdownPreference = {
-  type: 'dropdown';
-  options: string[];
-  value: string;
-  defaultValue?: string;
-  setValue: SetValueT<string>;
-  mapName?: NameMapper;
 };
 
-export type KeybindingPreference = {
-  type: 'keybinding';
-  value: string[][];
-  defaultValue?: string[][];
-  setValue: SetValueT<string[][]>;
-};
-
-export type NumberPreference = {
-  type: 'number';
-  value: number;
-  defaultValue?: number;
-  setValue: SetValueT<number>;
-};
+export type BooleanPreference = PreferenceProps<'boolean'> & SwitchProps;
 
-export default class Preference extends React.Component<Props> {
-  getOptionComponent = () => {
-    const { props } = this;
-    if (props.type === 'boolean') {
-      return (
-        <PreferenceSwitch
-          {...props}
-          setValue={props.setValue}
-          value={props.value}
-        />
-      );
-    }
+export type StringPreference = PreferenceProps<'string'> & TextProps;
 
-    if (props.type === 'string') {
-      return (
-        <PreferenceText
-          {...props}
-          setValue={props.setValue}
-          value={props.value}
-        />
-      );
-    }
+export type DropdownPreference = PreferenceProps<'dropdown'> & DropdownProps;
 
-    if (props.type === 'dropdown') {
-      return (
-        <PreferenceDropdown
-          {...props}
-          options={props.options}
-          setValue={props.setValue}
-          value={props.value}
-        />
-      );
-    }
+export type KeybindingPreference = PreferenceProps<'keybinding'> &
+  KeybindingProps;
 
-    if (props.type === 'keybinding') {
-      return (
-        <PreferenceKeybinding
-          {...props}
-          setValue={props.setValue}
-          value={props.value}
-        />
-      );
-    }
+export type NumberPreference = PreferenceProps<'number'> & NumberProps;
 
-    return (
-      <PreferenceNumber
-        {...props}
-        setValue={props.setValue}
-        value={props.value}
-      />
-    );
-  };
-
-  render() {
-    const { title, style, className, tooltip } = this.props;
+export type Props =
+  | BooleanPreference
+  | StringPreference
+  | DropdownPreference
+  | KeybindingPreference
+  | NumberPreference;
+
+const Preference = (props: Props) => {
+  const { title, style, className, tooltip, ...contentProps } = props;
+
+  let content: React.ReactNode;
+  switch (
+    contentProps.type // need 'type' as discriminant of union type
+  ) {
+    case 'boolean':
+      content = <PreferenceSwitch {...contentProps} />;
+      break;
+    case 'string':
+      content = <PreferenceText {...contentProps} />;
+      break;
+    case 'dropdown':
+      content = <PreferenceDropdown {...contentProps} />;
+      break;
+    case 'keybinding':
+      content = <PreferenceKeybinding {...contentProps} />;
+      break;
+    default:
+      content = <PreferenceNumber {...contentProps} />;
+  }
 
-    const Title = tooltip ? (
-      <Tooltip placement="right" content={tooltip}>
-        {title}
-      </Tooltip>
-    ) : (
-      <span>{title}</span>
-    );
+  const Title = tooltip ? (
+    <Tooltip placement="right" content={tooltip}>
+      {title}
+    </Tooltip>
+  ) : (
+    <span>{title}</span>
+  );
+
+  return (
+    <Container style={style} className={className}>
+      {Title}
+      <div>{content}</div>
+    </Container>
+  );
+};
 
-    return (
-      <Container style={style} className={className}>
-        {Title}
-        <div>{this.getOptionComponent()}</div>
-      </Container>
-    );
-  }
-}
+export default Preference;