graphen 1.10.9 → 1.10.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphen",
-  "version": "1.10.9",
+  "version": "1.10.10",
   "description": "Graphen is a small library, that keeps reusable blocks of UI and helps making application design consistent across multiple projects.",
   "main": "src/index.ts",
   "files": [

package/src/components/Switch/index.tsx

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+
+type Props = {
+  isSwitched?: boolean;
+  type?: "success" | "info" | "danger";
+  onChange?: (arg0: boolean) => void;
+};
+
+function Switch(props: Props) {
+  const { onChange, type, isSwitched } = 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>
+  );
+}
+
+// @ts-ignore
+Switch.defaultProps = {
+  isSwitched: false,
+  type: undefined,
+  onChange: () => {},
+};
+
+export default Switch;

package/src/example.tsx

@@ -17,6 +17,7 @@ import {
   Tooltip,
   Logo,
   Dropdown,
+  Switch,
   constants,
 } from "./index";
 
@@ -340,41 +341,10 @@ class ExampleApp extends React.PureComponent<Props, State> {
           <header className="gc-panel__title">Switches</header>
           <div className="gc-panel__content">
             <p>
-              <label htmlFor="switch-1" className="gc-switch">
-                <input
-                  id="switch-1"
-                  className="gc-switch__input"
-                  type="checkbox"
-                />
-                <span className="gc-switch__slider" />
-              </label>{" "}
-              <label
-                htmlFor="switch-2"
-                className="gc-switch gc-switch--success"
-              >
-                <input
-                  id="switch-2"
-                  className="gc-switch__input"
-                  type="checkbox"
-                />
-                <span className="gc-switch__slider" />
-              </label>{" "}
-              <label htmlFor="switch-3" className="gc-switch gc-switch--info">
-                <input
-                  id="switch-3"
-                  className="gc-switch__input"
-                  type="checkbox"
-                />
-                <span className="gc-switch__slider" />
-              </label>{" "}
-              <label htmlFor="switch-4" className="gc-switch gc-switch--danger">
-                <input
-                  id="switch-4"
-                  className="gc-switch__input"
-                  type="checkbox"
-                />
-                <span className="gc-switch__slider" />
-              </label>
+              <Switch />{" "}
+              <Switch type="success" isSwitched />{" "}
+              <Switch type="info" isSwitched />{" "}
+              <Switch type="danger" isSwitched />
             </p>
           </div>
         </article>

package/src/index.ts

@@ -20,6 +20,7 @@ import Panel from "src/components/Panel";
 import PanelContent from "src/components/PanelContent";
 import PanelFooter from "src/components/PanelFooter";
 import PanelTitle from "src/components/PanelTitle";
+import Switch from "src/components/Switch";
 import * as constants from "src/variables/constants";
 
 export {
@@ -45,6 +46,7 @@ export {
   PanelContent,
   PanelFooter,
   PanelTitle,
+  Switch,
   constants
 };