Merge pull request #84 from JohannesKonings/serial_gameid

Serial gameid
JohannesKonings · Jun 3, 2020 · d8faa11 · d8faa11
2 parents 26d6153 + 4376eeb
commit d8faa11
Show file tree

Hide file tree

Showing 2 changed files with 522 additions and 502 deletions.
diff --git a/src/components/CustomInput/CustomInput.js b/src/components/CustomInput/CustomInput.js
@@ -1,81 +1,92 @@
-import React from "react";
-import classNames from "classnames";
-import PropTypes from "prop-types";
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-import FormControl from "@material-ui/core/FormControl";
-import InputLabel from "@material-ui/core/InputLabel";
-import Input from "@material-ui/core/Input";
-// @material-ui/icons
-import Clear from "@material-ui/icons/Clear";
-import Check from "@material-ui/icons/Check";
-// core components
-import styles from "assets/jss/material-dashboard-react/components/customInputStyle.js";
-
-const useStyles = makeStyles(styles);
-
-export default function CustomInput(props) {
-  const classes = useStyles();
-  const {
-    formControlProps,
-    labelText,
-    id,
-    labelProps,
-    inputProps,
-    error,
-    success
-  } = props;
-
-  const labelClasses = classNames({
-    [" " + classes.labelRootError]: error,
-    [" " + classes.labelRootSuccess]: success && !error
-  });
-  const underlineClasses = classNames({
-    [classes.underlineError]: error,
-    [classes.underlineSuccess]: success && !error,
-    [classes.underline]: true
-  });
-  const marginTop = classNames({
-    [classes.marginTop]: labelText === undefined
-  });
-  return (
-    <FormControl
-      {...formControlProps}
-      className={formControlProps.className + " " + classes.formControl}
-    >
-      {labelText !== undefined ? (
-        <InputLabel
-          className={classes.labelRoot + labelClasses}
-          htmlFor={id}
-          {...labelProps}
-        >
-          {labelText}
-        </InputLabel>
-      ) : null}
-      <Input
-        classes={{
-          root: marginTop,
-          disabled: classes.disabled,
-          underline: underlineClasses
-        }}
-        id={id}
-        {...inputProps}
-      />
-      {error ? (
-        <Clear className={classes.feedback + " " + classes.labelRootError} />
-      ) : success ? (
-        <Check className={classes.feedback + " " + classes.labelRootSuccess} />
-      ) : null}
-    </FormControl>
-  );
-}
-
-CustomInput.propTypes = {
-  labelText: PropTypes.node,
-  labelProps: PropTypes.object,
-  id: PropTypes.string,
-  inputProps: PropTypes.object,
-  formControlProps: PropTypes.object,
-  error: PropTypes.bool,
-  success: PropTypes.bool
-};
+import React from "react";
+import classNames from "classnames";
+import PropTypes from "prop-types";
+// @material-ui/core components
+import { makeStyles } from "@material-ui/core/styles";
+import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
+import Input from "@material-ui/core/Input";
+// @material-ui/icons
+import Clear from "@material-ui/icons/Clear";
+import Check from "@material-ui/icons/Check";
+// core components
+import styles from "assets/jss/material-dashboard-react/components/customInputStyle.js";
+
+const useStyles = makeStyles(styles);
+
+export default function CustomInput(props) {
+  const classes = useStyles();
+  const [value, setValue] = React.useState("");
+
+  const {
+    formControlProps,
+    labelText,
+    id,
+    labelProps,
+    inputProps,
+    error,
+    success,
+    textFieldValue
+  } = props;
+
+  const handleChange = event => {
+    setValue(event.target.value);
+    textFieldValue(event.target.value);
+  };
+
+  const labelClasses = classNames({
+    [" " + classes.labelRootError]: error,
+    [" " + classes.labelRootSuccess]: success && !error
+  });
+  const underlineClasses = classNames({
+    [classes.underlineError]: error,
+    [classes.underlineSuccess]: success && !error,
+    [classes.underline]: true
+  });
+  const marginTop = classNames({
+    [classes.marginTop]: labelText === undefined
+  });
+  return (
+    <FormControl
+      {...formControlProps}
+      className={formControlProps.className + " " + classes.formControl}
+    >
+      {labelText !== undefined ? (
+        <InputLabel
+          className={classes.labelRoot + labelClasses}
+          htmlFor={id}
+          {...labelProps}
+        >
+          {labelText}
+        </InputLabel>
+      ) : null}
+      <Input
+        classes={{
+          root: marginTop,
+          disabled: classes.disabled,
+          underline: underlineClasses
+        }}
+        id={id}
+        value={value}
+        onChange={handleChange}
+        {...inputProps}
+      />
+      {error ? (
+        <Clear className={classes.feedback + " " + classes.labelRootError} />
+      ) : success ? (
+        <Check className={classes.feedback + " " + classes.labelRootSuccess} />
+      ) : null}
+    </FormControl>
+  );
+}
+
+CustomInput.propTypes = {
+  labelText: PropTypes.node,
+  labelProps: PropTypes.object,
+  id: PropTypes.string,
+  inputProps: PropTypes.object,
+  formControlProps: PropTypes.object,
+  error: PropTypes.bool,
+  success: PropTypes.bool,
+  textFieldValue: PropTypes.func
+};