Add toggle element to @meetfranz/forms

6 files changed, 131 insertions, 10 deletions

diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts
index 3f24ecaf7..a506de111 100644
--- a/packages/forms/src/index.ts
+++ b/packages/forms/src/index.ts
@@ -1 +1,2 @@
-export { default as Input } from './input';
+export { Input } from './input';
+export { Toggle } from './toggle';
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx
index 0e19e3368..d82ee5fe3 100644
--- a/packages/forms/src/input/index.tsx
+++ b/packages/forms/src/input/index.tsx
@@ -16,14 +16,12 @@ import scorePasswordFunc from './scorePassword';
 
 import styles from './styles';
 
-interface IProps extends IFormField, React.InputHTMLAttributes<HTMLInputElement>, IWithStyle {
-  label: string;
+interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField, IWithStyle {
   focus?: boolean;
   prefix?: string;
   suffix?: string;
   scorePassword?: boolean;
   showPasswordToggle?: boolean;
-  error?: string;
 }
 
 interface IState {
@@ -32,15 +30,15 @@ interface IState {
 }
 
 @observer
-class Input extends Component<IProps, IState> {
+class InputComponent extends Component<IProps, IState> {
   public static defaultProps = {
-    classes: {},
     focus: false,
     onChange: () => {},
     scorePassword: false,
     showLabel: true,
     showPasswordToggle: false,
     type: 'text',
+    disabled: false,
   };
 
   state = {
@@ -172,4 +170,4 @@ class Input extends Component<IProps, IState> {
   }
 }
 
-export default injectSheet(styles)(Input);
+export const Input = injectSheet(styles)(InputComponent);
diff --git a/packages/forms/src/input/styles.ts b/packages/forms/src/input/styles.ts
index 2cdda12ee..2b34e92c3 100644
--- a/packages/forms/src/input/styles.ts
+++ b/packages/forms/src/input/styles.ts
@@ -1,5 +1,5 @@
+import { Theme } from '@meetfranz/theme';
 import CSS from 'csstype';
-import { Theme } from '../../../theme/lib';
 
 const prefixStyles = (theme: Theme) => ({
   background: theme.inputPrefixBackground,
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx
new file mode 100644
index 000000000..759694dc8
--- /dev/null
+++ b/packages/forms/src/toggle/index.tsx
@@ -0,0 +1,117 @@
+import { Theme } from '@meetfranz/theme';
+import classnames from 'classnames';
+import CSS from 'csstype';
+import { observer } from 'mobx-react';
+import React, { Component, createRef } from 'react';
+import injectStyle from 'react-jss';
+
+import { IFormField, IWithStyle, Omit } from '../typings/generic';
+
+import Error from '../error';
+import Label from '../label';
+import Wrapper from '../wrapper';
+
+interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField, IWithStyle {
+  // field: any;
+}
+
+const styles = (theme: Theme) => ({
+  toggle: {
+    background: theme.toggleBackground,
+    borderRadius: theme.borderRadius,
+    height: theme.toggleHeight,
+    position: 'relative' as CSS.PositionProperty,
+    width: theme.toggleWidth,
+  },
+  button: {
+    background: theme.toggleButton,
+    borderRadius: '100%',
+    boxShadow: '0 1px 4px rgba(0, 0, 0, .3)',
+    width: theme.toggleHeight - 2,
+    height: theme.toggleHeight - 2,
+    left: 1,
+    top: 1,
+    position: 'absolute' as CSS.PositionProperty,
+    transition: 'all .5s',
+  },
+  buttonActive: {
+    background: theme.toggleButtonActive,
+    left: (theme.toggleWidth - theme.toggleHeight) + 1,
+  },
+  input: {
+    visibility: 'hidden' as any,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  toggleLabel: {
+    display: 'flex',
+
+    '& > span': {
+      order: 1,
+      marginLeft: 15,
+      marginTop: 2,
+    },
+  },
+});
+
+@observer
+class ToggleComponent extends Component<IProps> {
+  public static defaultProps = {
+    onChange: () => {},
+    showLabel: true,
+    disabled: false,
+    error: '',
+  };
+
+  render() {
+    const {
+      classes,
+      disabled,
+      error,
+      id,
+      label,
+      showLabel,
+      checked,
+      value,
+      onChange,
+    } = this.props;
+
+    console.log('props', this.props);
+
+    return (
+      <Wrapper>
+        <Label
+          title={label}
+          showLabel={showLabel}
+          htmlFor={id}
+          className={classes.toggleLabel}
+        >
+          <div className={classnames({
+            [`${classes.toggle}`]: true,
+            [`${classes.disabled}`]: disabled,
+          })}>
+            <div className={classnames({
+              [`${classes.button}`]: true,
+              [`${classes.buttonActive}`]: checked,
+            })} />
+            <input
+              className={classes.input}
+              id={id || name}
+              type="checkbox"
+              checked={checked}
+              value={value}
+              onChange={onChange}
+              disabled={disabled}
+            />
+          </div>
+        </Label>
+        {error && (
+          <Error message={error} />
+        )}
+      </Wrapper>
+    );
+  }
+}
+
+export const Toggle = injectStyle(styles)(ToggleComponent);
diff --git a/packages/forms/src/typings/generic.ts b/packages/forms/src/typings/generic.ts
index e1e497050..bd3ea364b 100644
--- a/packages/forms/src/typings/generic.ts
+++ b/packages/forms/src/typings/generic.ts
@@ -1,11 +1,14 @@
 import { Classes } from 'jss';
 
 export interface IFormField {
-  title?: string;
   showLabel?: boolean;
-  isError?: boolean;
+  label?: string;
+  error?: string;
 }
 
 export interface IWithStyle {
   classes: Classes;
 }
+
+export type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
+export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
diff --git a/packages/forms/src/wrapper/index.tsx b/packages/forms/src/wrapper/index.tsx
index c2444b0ea..b3e92da66 100644
--- a/packages/forms/src/wrapper/index.tsx
+++ b/packages/forms/src/wrapper/index.tsx
@@ -1,3 +1,4 @@
+import { observer } from 'mobx-react';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 import { IWithStyle } from '../typings/generic';
@@ -8,6 +9,7 @@ interface IProps extends IWithStyle {
   children: React.ReactNode;
 }
 
+@observer
 class Wrapper extends Component<IProps> {
   render() {
     const {