Fix Preference's types (codesandbox#2971)

Author: MichaelDeBoey

packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/index.tsx

@@ -1,8 +1,9 @@
+import { PreferenceText } from '@codesandbox/common/lib/components/Preference/PreferenceText';
+import themes from '@codesandbox/common/lib/themes';
 import React from 'react';
+
 import { useOvermind } from 'app/overmind';
-import themes from '@codesandbox/common/lib/themes';
 
-import PreferenceText from '@codesandbox/common/lib/components/Preference/PreferenceText';
 import {
   Title,
   SubContainer,

packages/app/src/app/pages/common/Modals/PreferencesModal/elements.js

@@ -1,5 +1,5 @@
+import { Preference } from '@codesandbox/common/lib/components/Preference';
 import styled, { css } from 'styled-components';
-import Preference from '@codesandbox/common/lib/components/Preference';
 
 export const SubContainer = styled.div`
   color: ${props => props.theme.white};

packages/app/src/app/pages/common/Modals/ShareModal/elements.js

@@ -1,5 +1,5 @@
+import { Preference } from '@codesandbox/common/lib/components/Preference';
 import styled from 'styled-components';
-import Preference from '@codesandbox/common/lib/components/Preference';
 
 export const FilesContainer = styled.div`
   max-height: 300px;

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

@@ -1,33 +1,31 @@
-import React from 'react';
-import Select from '../Select';
+import React, { ChangeEvent, FunctionComponent } from 'react';
 
-export type NameMapper = (param: string) => string;
+import Select from '../Select';
 
-export type Props = {
+type Props = {
+  mapName?: (param: string) => string;
+  options: string[];
   setValue: (value: string) => void;
   value: string;
-  options: string[];
-  mapName?: NameMapper;
 };
 
-export default class PreferenceInput extends React.PureComponent<Props> {
-  handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const { value } = e.target;
-
-    this.props.setValue(value);
+export const PreferenceDropdown: FunctionComponent<Props> = ({
+  mapName,
+  options,
+  setValue,
+  value,
+}) => {
+  const handleChange = ({ target }: ChangeEvent<HTMLSelectElement>) => {
+    setValue(target.value);
   };
 
-  render() {
-    const { value, options, mapName } = this.props;
-
-    return (
-      <Select onChange={this.handleChange} value={value}>
-        {options.map(op => (
-          <option key={op} value={op}>
-            {mapName ? mapName(op) : op}
-          </option>
-        ))}
-      </Select>
-    );
-  }
-}
+  return (
+    <Select onChange={handleChange} value={value}>
+      {options.map(option => (
+        <option key={option} value={option}>
+          {mapName ? mapName(option) : option}
+        </option>
+      ))}
+    </Select>
+  );
+};

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

@@ -1,39 +1,42 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
+
 import KeybindingInput from './KeybindingInput';
 
-export type Props = {
-  setValue: (value: Array<string[]>) => void;
-  value: Array<string[]>;
+type Props = {
+  setValue: (value: string[][]) => void;
+  value: string[][];
 };
 
-export default class PreferenceKeybinding extends React.PureComponent<Props> {
-  setValue = index => value => {
-    const result = [...this.props.value];
+export const PreferenceKeybinding: FunctionComponent<Props> = ({
+  setValue: setValueProp,
+  value: valueProp,
+  ...props
+}) => {
+  const setValue = (index: number) => (value: string[]) => {
+    const result = [...valueProp];
     result[index] = value;
 
-    this.props.setValue(result);
+    setValueProp(result);
   };
 
-  render() {
-    const { value } = this.props;
+  return (
+    <div>
+      <KeybindingInput
+        {...props}
+        placeholder="First"
+        setValue={setValue(0)}
+        value={valueProp[0]}
+      />
+
+      {' - '}
 
-    return (
-      <div>
-        <KeybindingInput
-          {...this.props}
-          placeholder="First"
-          value={value[0]}
-          setValue={this.setValue(0)}
-        />
-        {' - '}
-        <KeybindingInput
-          {...this.props}
-          placeholder="Second"
-          value={value.length === 2 && value[1]}
-          setValue={this.setValue(1)}
-          disabled={!value[0] || value[0].length === 0}
-        />
-      </div>
-    );
-  }
-}
+      <KeybindingInput
+        {...props}
+        disabled={!valueProp[0] || valueProp[0].length === 0}
+        placeholder="Second"
+        setValue={setValue(1)}
+        value={valueProp.length === 2 && valueProp[1]}
+      />
+    </div>
+  );
+};

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

@@ -1,33 +1,32 @@
-import React from 'react';
-import { StyledInput } from './elements';
+import React, { ChangeEvent, ComponentProps, FunctionComponent } from 'react';
 
-export type Props = {
+import { Input } from './elements';
+
+type Props = {
   setValue: (value: number) => void;
-  value: number;
   step?: number;
-  style?: React.CSSProperties;
-};
-
-export default class PreferenceInput extends React.PureComponent<Props> {
-  handleChange = e => {
-    const { value } = e.target;
+  value: number;
+} & Pick<ComponentProps<typeof Input>, 'style'>;
 
-    if (!Number.isNaN(+value)) {
-      this.props.setValue(+value);
+export const PreferenceNumber: FunctionComponent<Props> = ({
+  setValue,
+  step,
+  style,
+  value,
+}) => {
+  const handleChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
+    if (!Number.isNaN(+target.value)) {
+      setValue(+target.value);
     }
   };
 
-  render() {
-    const { value, style, step } = this.props;
-
-    return (
-      <StyledInput
-        step={step}
-        style={{ width: '3rem', ...style }}
-        type="number"
-        value={value}
-        onChange={this.handleChange}
-      />
-    );
-  }
-}
+  return (
+    <Input
+      onChange={handleChange}
+      step={step}
+      style={{ width: '3rem', ...style }}
+      type="number"
+      value={value}
+    />
+  );
+};

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

@@ -1,27 +1,28 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
+
 import Switch from '../Switch';
 
-export type Props = {
+type Props = {
+  setValue: (value: boolean) => void;
   value: boolean;
-  setValue: (val: boolean) => void;
 };
 
-export default class PreferenceSwitch extends React.Component<Props> {
-  handleClick = () => {
-    this.props.setValue(!this.props.value);
+export const PreferenceSwitch: FunctionComponent<Props> = ({
+  setValue,
+  value,
+}) => {
+  const handleClick = () => {
+    setValue(!value);
   };
 
-  render() {
-    const { value } = this.props;
-    return (
-      <Switch
-        onClick={this.handleClick}
-        small
-        style={{ width: '3rem' }}
-        offMode
-        secondary
-        right={value}
-      />
-    );
-  }
-}
+  return (
+    <Switch
+      offMode
+      onClick={handleClick}
+      right={value}
+      secondary
+      small
+      style={{ width: '3rem' }}
+    />
+  );
+};

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

@@ -1,32 +1,37 @@
-import React from 'react';
+import {
+  ChangeEvent,
+  ComponentProps,
+  createElement,
+  FunctionComponent,
+} from 'react';
+
 import Input, { TextArea } from '../Input';
 
-export type Props = {
-  setValue: (value: string) => void;
-  value: string;
-  placeholder?: string;
-  isTextArea?: boolean;
-  style?: React.CSSProperties;
+type Props = {
   block?: boolean;
+  isTextArea?: boolean;
+  placeholder?: string;
   rows?: number;
-};
-
-export default class PreferenceText extends React.PureComponent<Props> {
-  handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { value } = e.target;
+  setValue: (value: string) => void;
+  value: string;
+} & Pick<ComponentProps<typeof Input>, 'style'>;
 
-    this.props.setValue(value);
+export const PreferenceText: FunctionComponent<Props> = ({
+  isTextArea,
+  placeholder,
+  setValue,
+  value,
+  ...props
+}) => {
+  const handleChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
+    setValue(target.value);
   };
 
-  render() {
-    const { value, placeholder, isTextArea, ...props } = this.props;
-
-    return React.createElement(isTextArea ? TextArea : Input, {
-      style: { width: '9rem' },
-      value,
-      placeholder,
-      onChange: this.handleChange,
-      ...props,
-    });
-  }
-}
+  return createElement(isTextArea ? TextArea : Input, {
+    ...props,
+    style: { width: '9rem' },
+    value,
+    placeholder,
+    onChange: handleChange,
+  });
+};

packages/common/src/components/Preference/elements.ts

@@ -1,12 +1,13 @@
 import styled from 'styled-components';
-import Input from '../Input';
+
+import InputBase from '../Input';
 
 export const Container = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
 `;
 
-export const StyledInput = styled(Input)`
+export const Input = styled(InputBase)`
   text-align: center;
 `;

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

@@ -1,9 +1,11 @@
-import React from 'react';
 import { storiesOf } from '@storybook/react';
+import React from 'react';
+
 import { noop } from '../../test/mocks';
-import Preference from '.';
 import { KEYBINDINGS } from '../../utils/keybindings';
 
+import { Preference } from '.';
+
 const stories = storiesOf('components/Preference', module);
 const keyBindingKeys = Object.keys(KEYBINDINGS);