Lens app source code (#119)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

dashboard/client/components/radio/index.ts

@@ -0,0 +1 @@
+export * from "./radio";

dashboard/client/components/radio/radio.scss

@@ -0,0 +1,110 @@
+.RadioGroup {
+  &.disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  &.buttonsView {
+    display: inline-flex;
+
+    .Radio {
+      display: inline-block;
+      border: 1px solid $borderFaintColor;
+      border-radius: $radius;
+      text-align: center;
+      padding: round($padding * .7) $padding;
+      white-space: nowrap;
+      transition: 250ms color;
+
+      &:not(.checked):not(.disabled) {
+        cursor: pointer;
+        &:not(:active):focus {
+          position: relative;
+          border-color: $primary;
+          box-shadow: inset 0 0 0 1px $primary;
+        }
+      }
+
+      &.checked {
+        background-color: $radioActiveBackground;
+        color: $textColorAccent;
+        * {
+          cursor: default;
+        }
+      }
+
+      &:hover {
+        color: $textColorAccent
+      }
+
+      + .Radio {
+        margin-left: -1px;
+      }
+
+      .tick {
+        display: none;
+
+        + * {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+}
+
+.Radio {
+  $tickSize: round(1.8 * $unit);
+  $tickColor: currentColor;
+  $tickColorActive: $colorInfo;
+  $tickColorFocus: $colorInfo;
+  $labelColorActive: $textColorAccent;
+
+  input[type="radio"] {
+    display: none;
+    &:checked {
+      ~ .tick {
+        color: $tickColorActive;
+        &:after {
+          content: "radio_button_checked";
+        }
+      }
+    }
+    &:disabled {
+      ~ .tick {
+        color: $tickColor;
+      }
+      ~ * {
+        opacity: .5;
+        pointer-events: none;
+      }
+    }
+    &:not(:disabled) ~ * {
+      cursor: pointer;
+    }
+  }
+
+  &:focus {
+    .tick {
+      color: $tickColorActive;
+    }
+  }
+
+  &.checked {
+    .label {
+      color: $labelColorActive;
+    }
+  }
+
+  .tick {
+    color: $tickColor;
+    font: $font-size * 1.3 "Material Icons";
+
+    &:after {
+      content: "radio_button_unchecked";
+    }
+
+    + * {
+      margin-left: .5em;
+    }
+  }
+}

dashboard/client/components/radio/radio.tsx

@@ -0,0 +1,86 @@
+import "./radio.scss";
+import * as React from "react";
+import { cssNames } from "../../utils";
+import uniqueId from "lodash/uniqueId";
+
+// todo: refactor with contexts
+
+interface RadioGroupProps {
+  className?: any;
+  value?: any;
+  asButtons?: boolean;
+  disabled?: boolean;
+  onChange?(value: string): void;
+}
+
+export class RadioGroup extends React.Component<RadioGroupProps, {}> {
+  render() {
+    const name = uniqueId("radioGroup");
+    const { value, asButtons, disabled, onChange } = this.props;
+    let { className } = this.props;
+    className = cssNames("RadioGroup", { buttonsView: asButtons }, className);
+    const radios = React.Children.toArray(this.props.children) as React.ReactElement<RadioProps>[];
+    return (
+      <div className={className}>
+        {radios.map(radio => {
+          return React.cloneElement(radio, {
+            name: name,
+            disabled: disabled !== undefined ? disabled : radio.props.disabled,
+            checked: radio.props.value === value,
+            onChange: onChange
+          } as any)
+        })}
+      </div>
+    );
+  }
+}
+
+type RadioProps = React.HTMLProps<any> & {
+  name?: string;
+  label?: React.ReactNode | any;
+  value?: any;
+  checked?: boolean;
+  disabled?: boolean;
+  onChange?(value: React.ChangeEvent<HTMLInputElement>): void;
+}
+
+export class Radio extends React.Component<RadioProps> {
+  private elem: HTMLElement;
+
+  onChange = () => {
+    const { value, onChange, checked } = this.props;
+    if (!checked && onChange) {
+      onChange(value);
+    }
+  }
+
+  onKeyDown = (e: React.KeyboardEvent<any>) => {
+    const SPACE_KEY = e.keyCode === 32;
+    const ENTER_KEY = e.keyCode === 13;
+    if (SPACE_KEY || ENTER_KEY) {
+      this.elem.click();
+      e.preventDefault();
+    }
+  }
+
+  render() {
+    const { className, label, checked, children, ...inputProps } = this.props;
+    const componentClass = cssNames('Radio flex align-center', className, {
+      checked: checked,
+      disabled: this.props.disabled,
+    });
+    return (
+      <label
+        className={componentClass}
+        tabIndex={!checked ? 0 : null}
+        onKeyDown={this.onKeyDown}
+        ref={e => this.elem = e}
+      >
+        <input {...inputProps} type="radio" checked={checked} onChange={this.onChange}/>
+        <i className="tick flex center"/>
+        {label ? <div className="label">{label}</div> : null}
+        {children}
+      </label>
+    );
+  }
+}