graphen 1.10.9 → 1.10.11

package/src/components/Input/index.tsx

@@ -2,15 +2,20 @@ import React from "react";
 import classNames from "classnames";
 
 type Props = {
-  className?: string,
-  type?: string,
-  label: string,
-  validation?: string,
-  onChange?: React.ChangeEventHandler<HTMLInputElement>,
+  className?: string;
+  type?: string;
+  label: string;
+  validation?: string;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
 };
 
-function Input(props: Props) {
-  const { type, label, className, validation, onChange } = props;
+function Input({
+  className = "",
+  type = "",
+  label,
+  validation = undefined,
+  onChange = () => {},
+}: Props) {
   const inputClasses = classNames(className, "gc-input");
   const fieldClasses = classNames("gc-input__field", {
     "gc-input__field--success": validation === "success",
@@ -28,12 +33,4 @@ function Input(props: Props) {
   );
 }
 
-// @ts-ignore
-Input.defaultProps = {
-  className: '',
-  type: '',
-  validation: undefined,
-  onChange: () => {},
-};
-
 export default Input;

package/src/components/Joystick/index.tsx

@@ -1,15 +1,15 @@
 import _ from "lodash";
-import React from 'react';
+import React from "react";
 import ReactDOM from "react-dom";
 
 type Props = {
-  onPositionChange: (left: number, top: number) => void,
-  isEnabled: boolean,
+  onPositionChange: (left: number, top: number) => void;
+  isEnabled: boolean;
 };
 
 type State = {
-  left: number,
-  top: number,
+  left: number;
+  top: number;
 };
 
 const JOYSTICK_RADIUS = 50;

package/src/components/Link/index.tsx

@@ -10,10 +10,10 @@ type Props = {
 };
 
 function Link({
+  className = "",
+  children = null,
+  skin = constants.SKIN_DEFAULT,
   link,
-  className,
-  children,
-  skin,
 }: Props) {
   const classes = classNames("gc-link", className, {
     "gc-link--primary": skin === constants.SKIN_PRIMARY,
@@ -27,11 +27,4 @@ function Link({
   );
 }
 
-// @ts-ignore
-Link.defaultProps = {
-  className: '',
-  children: null,
-  skin: constants.SKIN_DEFAULT,
-};
-
 export default Link;

package/src/components/Logo/index.tsx

@@ -2,13 +2,11 @@ import React from "react";
 import classNames from "classnames";
 
 type Props = {
-  className?: string,
-  onClick?: () => void,
+  className?: string;
+  onClick?: () => void;
 };
 
-function Logo(props: Props) {
-  const { onClick, className } = props;
-
+function Logo({ className = "", onClick = () => {} }: Props) {
   const logoClasses = classNames(className, "gc-logo");
 
   /* eslint-disable jsx-a11y/no-static-element-interactions */
@@ -20,10 +18,4 @@ function Logo(props: Props) {
   /* eslint-enable jsx-a11y/no-static-element-interactions */
 }
 
-// @ts-ignore
-Logo.defaultProps = {
-  className: '',
-  onClick: () => {},
-};
-
 export default Logo;

package/src/components/Panel/index.tsx

@@ -8,22 +8,18 @@ type Props = {
   isBordered?: boolean;
 };
 
-function Panel(props: Props) {
-  const { children, className, isSeparator, isBordered } = props;
+function Panel({
+  children = null,
+  className = "",
+  isSeparator = false,
+  isBordered = false,
+}: Props) {
   const dialogClasses = classNames(className, "gc-panel", {
-    'gc-panel--separator': isSeparator,
-    'gc-panel--bordered': isBordered,
+    "gc-panel--separator": isSeparator,
+    "gc-panel--bordered": isBordered,
   });
 
   return <div className={dialogClasses}>{children}</div>;
 }
 
-// @ts-ignore
-Panel.defaultProps = {
-  className: '',
-  children: null,
-  isSeparator: false,
-  isBordered: false,
-};
-
 export default Panel;

package/src/components/PanelContent/index.tsx

@@ -6,17 +6,10 @@ type Props = {
   children?: React.ReactNode;
 };
 
-function PanelContent(props: Props) {
-  const { children, className} = props;
+function PanelContent({ className = "", children = null }: Props) {
   const dialogClasses = classNames(className, "gc-panel__content");
 
   return <article className={dialogClasses}>{children}</article>;
 }
 
-// @ts-ignore
-PanelContent.defaultProps = {
-  className: '',
-  children: null,
-};
-
 export default PanelContent;

package/src/components/PanelFooter/index.tsx

@@ -6,17 +6,10 @@ type Props = {
   children?: React.ReactNode;
 };
 
-function PanelFooter(props: Props) {
-  const { children, className} = props;
+function PanelFooter({ className = "", children = null }: Props) {
   const dialogClasses = classNames(className, "gc-panel__footer");
 
   return <div className={dialogClasses}>{children}</div>;
 }
 
-// @ts-ignore
-PanelFooter.defaultProps = {
-  className: '',
-  children: null,
-};
-
 export default PanelFooter;

package/src/components/PanelTitle/index.tsx

@@ -6,17 +6,10 @@ type Props = {
   children?: React.ReactNode;
 };
 
-function PanelTitle(props: Props) {
-  const { children, className} = props;
+function PanelTitle({ className = "", children = null }: Props) {
   const dialogClasses = classNames(className, "gc-panel__title");
 
   return <header className={dialogClasses}>{children}</header>;
 }
 
-// @ts-ignore
-PanelTitle.defaultProps = {
-  className: '',
-  children: null,
-};
-
 export default PanelTitle;

package/src/components/Scroller/index.tsx

@@ -6,13 +6,13 @@ const KNOB_SIZE = 12;
 const BORDER_SIZE = 1;
 
 type Props = {
-  onScrollChange: (value: number) => void,
-  min: number,
-  max: number,
+  onScrollChange: (value: number) => void;
+  min: number;
+  max: number;
 };
 
 type State = {
-  value: number,
+  value: number;
 };
 
 class Scroller extends React.PureComponent<Props, State> {

package/src/components/Separator/index.tsx

@@ -2,19 +2,13 @@ import React from "react";
 import classNames from "classnames";
 
 type Props = {
-  className?: string,
+  className?: string;
 };
 
-function Separator(props: Props) {
-  const { className} = props;
+function Separator({ className = "" }: Props) {
   const dialogClasses = classNames(className, "gc-separator");
 
   return <div className={dialogClasses} />;
 }
 
-// @ts-ignore
-Separator.defaultProps = {
-  className: '',
-};
-
 export default Separator;

package/src/components/Switch/index.tsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+
+type Props = {
+  isSwitched?: boolean;
+  type?: "success" | "info" | "danger";
+  onChange?: (arg0: boolean) => void;
+};
+
+function Switch({
+  isSwitched = false,
+  type = undefined,
+  onChange = () => {},
+}: Props) {
+  const [isChecked, setIsChecked] = useState(isSwitched);
+
+  useEffect(() => {
+    setIsChecked(isSwitched);
+  }, [isSwitched]);
+
+  const switchClasses = classNames("gc-switch", {
+    "gc-switch--success": type === "success",
+    "gc-switch--info": type === "info",
+    "gc-switch--danger": type === "danger",
+  });
+
+  return (
+    // eslint-disable-next-line jsx-a11y/label-has-associated-control
+    <label className={switchClasses}>
+      <input
+        className="gc-switch__input"
+        type="checkbox"
+        onChange={(event) => {
+          const { checked } = event.target;
+          setIsChecked(checked);
+          onChange(checked);
+        }}
+        checked={isChecked}
+      />
+      <span className="gc-switch__slider" />
+    </label>
+  );
+}
+
+export default Switch;

package/src/components/Tooltip/index.tsx

@@ -2,13 +2,12 @@ import React from "react";
 import classNames from "classnames";
 
 type Props = {
-  className?: string,
-  children?: string,
-  type?: string,
+  className?: string;
+  children?: string;
+  type?: string;
 };
 
-function Tooltip(props: Props) {
-  const { children, className, type } = props;
+function Tooltip({ className = "", children = null, type = "success" }: Props) {
   const validationClasses = classNames(className, "gc-tooltip", {
     "gc-tooltip--success": type === "success",
     "gc-tooltip--danger": type === "danger",
@@ -17,11 +16,4 @@ function Tooltip(props: Props) {
   return <div className={validationClasses}>{children}</div>;
 }
 
-// @ts-ignore
-Tooltip.defaultProps = {
-  className: '',
-  children: null,
-  type: 'success',
-};
-
 export default Tooltip;

package/src/components/Validation/index.tsx

@@ -3,14 +3,18 @@ import classNames from "classnames";
 import Tooltip from "../Tooltip";
 
 type Props = {
-  className?: string,
-  children?: React.ReactNode,
-  type?: string,
-  message?: string | null,
+  className?: string;
+  children?: React.ReactNode;
+  type?: string;
+  message?: string | null;
 };
 
-function Validation(props: Props) {
-  const { message, children, className, type } = props;
+function Validation({
+  className = "",
+  children = null,
+  type = "success",
+  message = null,
+}: Props) {
   const validationClasses = classNames(className, "gc-validation");
 
   const tooltip = message ? (
@@ -27,12 +31,4 @@ function Validation(props: Props) {
   );
 }
 
-// @ts-ignore
-Validation.defaultProps = {
-  className: '',
-  children: null,
-  type: 'success',
-  message: null,
-};
-
 export default Validation;