Merge pull request #26 from opendexnetwork/refactor/components

refactor: inputs

Author: maybeast

src/common/components/data-display/table/Table.tsx

@@ -10,7 +10,7 @@ import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
 import React, { ReactElement } from "react";
 import { copyToClipboard } from "../../../utils/appUtil";
 import IconButton from "../../input/buttons/IconButton";
-import CenterEllipsis from "../CenterEllipsis";
+import CenterEllipsis from "../text/CenterEllipsis";
 
 export type TableRow = {
   [key: string]: string | number | boolean | Date | ReactElement | undefined;

src/common/components/data-display/CenterEllipsis.tsx renamed to src/common/components/data-display/text/CenterEllipsis.tsx

@@ -0,0 +1,23 @@
+import {
+  CheckboxProps as MaterialCheckboxProps,
+  Checkbox as MaterialCheckbox,
+  FormControlLabel,
+} from "@material-ui/core";
+import React, { ReactElement } from "react";
+
+type CheckboxProps = MaterialCheckboxProps & {
+  label: string;
+};
+
+const Checkbox = (props: CheckboxProps): ReactElement => {
+  const { label, ...checkboxProps } = props;
+
+  return (
+    <FormControlLabel
+      control={<MaterialCheckbox color="default" {...checkboxProps} />}
+      label={label}
+    />
+  );
+};
+
+export default Checkbox;

src/dashboard/trade/SectionTitle.tsx renamed to src/common/components/data-display/text/SectionTitle.tsx

@@ -1,13 +1,9 @@
-import {
-  FormControl,
-  InputAdornment,
-  InputLabel,
-  OutlinedInput,
-} from "@material-ui/core";
+import { InputAdornment } from "@material-ui/core";
 import Visibility from "@material-ui/icons/Visibility";
 import VisibilityOff from "@material-ui/icons/VisibilityOff";
 import React, { ChangeEvent, ReactElement, useState } from "react";
 import IconButton from "./buttons/IconButton";
+import TextField from "./text/TextField";
 
 type PasswordProps = {
   label?: string;
@@ -23,29 +19,26 @@ const Password = (props: PasswordProps): ReactElement => {
   const [showPassword, setShowPassword] = useState(false);
 
   return (
-    <FormControl variant="outlined">
-      <InputLabel htmlFor={label}>{label}</InputLabel>
-      <OutlinedInput
-        id={label}
-        labelWidth={label.length * 9}
-        value={value}
-        onChange={(event) => {
-          onChange(event);
-        }}
-        type={showPassword ? "text" : "password"}
-        endAdornment={
-          <InputAdornment position="end">
-            <IconButton
-              icon={showPassword ? <Visibility /> : <VisibilityOff />}
-              tooltipTitle={""}
-              aria-label="toggle password visibility"
-              onClick={() => setShowPassword(!showPassword)}
-              edge="end"
-            />
-          </InputAdornment>
-        }
-      />
-    </FormControl>
+    <TextField
+      label={label}
+      id={label}
+      value={value}
+      onChange={(event) => {
+        onChange(event);
+      }}
+      type={showPassword ? "text" : "password"}
+      endAdornment={
+        <InputAdornment position="end">
+          <IconButton
+            icon={showPassword ? <Visibility /> : <VisibilityOff />}
+            tooltipTitle={""}
+            aria-label="toggle password visibility"
+            onClick={() => setShowPassword(!showPassword)}
+            edge="end"
+          />
+        </InputAdornment>
+      }
+    />
   );
 };
 

src/common/components/input/Checkbox.tsx

@@ -1,4 +1,10 @@
-import { CircularProgress, createStyles, makeStyles } from "@material-ui/core";
+import {
+  CircularProgress,
+  createStyles,
+  FormControl,
+  FormHelperText,
+  makeStyles,
+} from "@material-ui/core";
 import React, { ReactElement } from "react";
 import Button from "./Button";
 
@@ -11,6 +17,8 @@ type ButtonWithLoadingProps = {
   fullWidth?: boolean;
   size?: "small" | "medium" | "large";
   color?: "primary" | "secondary";
+  error?: boolean;
+  helperText?: string;
 };
 
 const useStyles = makeStyles(() =>
@@ -39,23 +47,32 @@ const ButtonWithLoading = (props: ButtonWithLoadingProps): ReactElement => {
     fullWidth,
     size,
     color,
+    error,
+    helperText,
   } = props;
 
   return (
-    <div className={classes.buttonWrapper}>
-      <Button
-        text={text}
-        type={submitButton ? "submit" : "button"}
-        color={color || "primary"}
-        onClick={onClick}
-        disabled={disabled}
-        fullWidth={fullWidth}
-        size={size}
-      />
-      {loading && (
-        <CircularProgress size={24} className={classes.buttonProgress} />
-      )}
-    </div>
+    <FormControl fullWidth={fullWidth}>
+      <div className={classes.buttonWrapper}>
+        <Button
+          text={text}
+          type={submitButton ? "submit" : "button"}
+          color={color || "primary"}
+          onClick={onClick}
+          disabled={disabled}
+          fullWidth={fullWidth}
+          size={size}
+        />
+        {loading && (
+          <CircularProgress
+            size={24}
+            className={classes.buttonProgress}
+            color={color || "primary"}
+          />
+        )}
+      </div>
+      <FormHelperText error={error}>{helperText}</FormHelperText>
+    </FormControl>
   );
 };
 

src/common/components/input/Password.tsx

@@ -1,4 +1,7 @@
-import { FormControl, NativeSelect } from "@material-ui/core";
+import {
+  FormControl,
+  NativeSelect as MaterialNativeSelect,
+} from "@material-ui/core";
 import React, { ReactElement } from "react";
 
 type SelectProps = {
@@ -8,10 +11,10 @@ type SelectProps = {
   onChange: (value: string) => void;
 };
 
-const Select = (props: SelectProps): ReactElement => {
+const NativeSelect = (props: SelectProps): ReactElement => {
   return (
     <FormControl>
-      <NativeSelect
+      <MaterialNativeSelect
         value={props.value}
         onChange={(event) => props.onChange(event.target.value)}
         name={props.name}
@@ -21,9 +24,9 @@ const Select = (props: SelectProps): ReactElement => {
             {opt}
           </option>
         ))}
-      </NativeSelect>
+      </MaterialNativeSelect>
     </FormControl>
   );
 };
 
-export default Select;
+export default NativeSelect;

src/common/components/input/buttons/ButtonWithLoading.tsx

@@ -0,0 +1,38 @@
+import {
+  FormControl,
+  MenuItem,
+  Select as MaterialSelect,
+  SelectProps as MaterialSelectProps,
+} from "@material-ui/core";
+import React, { ReactElement } from "react";
+
+type ValueType = string | number | undefined;
+
+type SelectOption = {
+  value: ValueType;
+  text: string;
+};
+
+type SelectProps = MaterialSelectProps & {
+  id: string;
+  value: ValueType;
+  options: SelectOption[];
+};
+
+const Select = (props: SelectProps): ReactElement => {
+  const { value, options, id, ...selectProps } = props;
+
+  return (
+    <FormControl variant="outlined" fullWidth>
+      <MaterialSelect id={id} value={value} {...selectProps}>
+        {options.map((opt) => (
+          <MenuItem key={opt.value} value={opt.value}>
+            {opt.text}
+          </MenuItem>
+        ))}
+      </MaterialSelect>
+    </FormControl>
+  );
+};
+
+export default Select;

src/common/components/input/Select.tsx renamed to src/common/components/input/select/NativeSelect.tsx

@@ -0,0 +1,27 @@
+import React, { ReactElement } from "react";
+import NumberInput from "./NumberInput";
+import TextField, { TextFieldProps } from "./TextField";
+
+type NumberFieldProps = TextFieldProps & {
+  decimalScale?: number;
+  useTextInput?: boolean;
+};
+
+const NumberField = (props: NumberFieldProps): ReactElement => {
+  const { decimalScale, useTextInput: useDefaultInput, ...fieldProps } = props;
+
+  return (
+    <TextField
+      InputProps={{
+        inputComponent: useDefaultInput ? undefined : (NumberInput as any),
+        inputProps: useDefaultInput
+          ? { ...fieldProps.inputProps }
+          : { decimalScale: decimalScale, ...fieldProps.inputProps },
+        ...props.InputProps,
+      }}
+      {...fieldProps}
+    />
+  );
+};
+
+export default NumberField;