feat: switch

Author: paibamboo

package-lock.json

@@ -73,6 +73,7 @@
     "prop-types": "^15.7.2",
     "react-modal": "^3.10.1",
     "react-select": "^3.0.8",
+    "react-switch": "^4.0.1",
     "typestyle": "^2.0.4"
   },
   "peerDependencies": {

package.json

@@ -4,7 +4,7 @@ import {Select} from "./Select";
 export default {
   component: Select,
   title: "Select"
-}
+};
 
 export const Simple = () => (
   <Select

src/components/formParts/Select.stories.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import {withInitialState} from "../../helpers/withInitialState";
+import {Switch} from "./Switch";
+
+export default {
+  component: Switch,
+  title: "Switch"
+};
+
+export const Simple = ({state, setState}) => (
+  <Switch
+    checked={state.checked}
+    onChange={(checked) => setState({checked})}
+  />
+);
+Simple.story = {
+  decorators: [withInitialState({checked: false})]
+};

src/components/formParts/Switch.stories.tsx

@@ -0,0 +1,40 @@
+import {Color} from "@crazyfactory/frontend-commons";
+import * as React from "react";
+const ReactSwitch = require("react-switch");
+
+interface IProps {
+  checked: boolean;
+  labelClassName?: string;
+  labelStyle?: React.CSSProperties;
+  height?: number;
+  onChange: (checked: boolean) => void;
+  switchClassName?: string;
+  switchStyle?: React.CSSProperties;
+  width?: number;
+}
+
+export class Switch extends React.Component<IProps> {
+  public static defaultProps: Partial<IProps> = {
+    height: 20,
+    width: 48
+  };
+
+  public render(): JSX.Element {
+    const {labelClassName, labelStyle, ...rest} = this.props;
+    return (
+      <label className={labelClassName} style={labelStyle}>
+        <ReactSwitch
+          onColor={Color.LIGHT_BLUE}
+          onHandleColor={Color.BLUE}
+          handleDiameter={30}
+          uncheckedIcon={false}
+          checkedIcon={false}
+          boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
+          activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
+          className="react-switch"
+          {...rest}
+        />
+      </label>
+    );
+  }
+}