Dropdown and Checkbox component

components/checkbox/checkbox.js

@@ -0,0 +1,76 @@
+import React, { PropTypes } from 'react';
+import { getClassNamesWithMods } from '../_helpers';
+
+/**
+ * Checkbox component.
+ */
+function Checkbox({
+  checked,
+  children,
+  disabled,
+  mods = [],
+  name,
+  onChange,
+}) {
+  disabled && mods.push('is-disabled');
+  const className = getClassNamesWithMods('ui-checkbox', mods);
+
+  return (
+    <label className={className} htmlFor={name}>
+      <input
+        aria-checked={checked}
+        checked={checked}
+        disabled={disabled}
+        id={name}
+        onChange={onChange}
+        role="radio"
+        type="checkbox"
+      />
+      <span className="ui-checkbox__text" />
+      {children}
+    </label>
+  );
+}
+
+Checkbox.defaultProps = {
+  checked: false,
+  disabled: false,
+  name: '',
+};
+
+Checkbox.propTypes = {
+  /**
+   * Represents the state of the checkbox.
+   */
+  checked: PropTypes.bool,
+
+  /**
+   * Checkbox label.
+   */
+  children: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element,
+  ]),
+
+  /**
+   * Current activity state of the checkbox.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * You can provide set of custom modifications.
+   */
+  mods: PropTypes.arrayOf(PropTypes.string),
+
+  /**
+   * Represents the element's name.
+   */
+  name: PropTypes.string.isRequired,
+
+  /**
+   * Represents the callback for onChange event.
+   */
+  onChange: PropTypes.func.isRequired,
+};
+
+export default Checkbox;

components/checkbox/checkbox.md

@@ -0,0 +1,16 @@
+Basic checkbox:
+
+    <div>
+      <div>
+        <Checkbox name="checkboxTest1" onChange={() => {alert('without text')}}/><br/><br/>
+        <Checkbox name="checkboxTest2" checked onChange={() => {alert('checked')}}>checked</Checkbox><br/>
+        <Checkbox name="checkboxTest3" disabled onChange={() => {alert('disabled')}}>disabled</Checkbox><br/>
+        <Checkbox
+          name="checkboxTest4"
+          checked={state.value}
+          onChange={() => {setState({value: !state.value})}}
+          inputAttr={{role: "radio"}}>
+          can toggle
+        </Checkbox>
+      </div>
+    </div>

components/checkbox/checkbox.scss

@@ -0,0 +1,82 @@
+.ui-checkbox {
+  cursor: pointer;
+  display: flex;
+  font-family: $tx-generic-font-secondary-font-family, $tx-generic-font-secondary-generic-family;
+  font-weight: $tx-generic-font-primary-weight-regular;
+  padding: 0;
+  user-select: none;
+
+  &.ui-checkbox_is-disabled {
+    cursor: default;
+    color: rgba($tx-checkbox-text-disabled-color, .3);
+  }
+
+  .ui-checkbox__text {
+    font-size: 13px;
+  }
+
+  input[type="checkbox"] {
+    display: none;
+
+    & ~ .ui-checkbox__text {
+      color: $tx-checkbox-text-color;
+      padding-left: 25px;
+      position: relative;
+      -webkit-tap-highlight-color: transparent;
+
+      &:before {
+        background-color: $tx-checkbox-text-background-color;
+        border: 2px solid $tx-checkbox-text-border-color;
+        content: '';
+        height: 12px;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 12px;
+      }
+    }
+
+    & ~ .ui-checkbox__text:before {
+      border-radius: 3px;
+    }
+
+    & ~ .ui-checkbox__text:hover {
+      color: $tx-checkbox-text-hover-color;
+    }
+
+    &:checked {
+      & ~ .ui-checkbox__text {
+        &:before {
+          background: $tx-checkbox-text-checked-background-color;
+          border-color: $tx-checkbox-text-checked-border-color;
+          border-radius: 3px;
+        }
+
+        &:after {
+          background: transparent;
+          border: 3px solid $tx-checkbox-text-icon-checked-border-color;
+          border-radius: 3px;
+          border-right: none;
+          border-top: none;
+          content: '';
+          height: 4px;
+          left: 3px;
+          position: absolute;
+          top: 3px;
+          transform: rotate(-45deg);
+          width: 7px;
+        }
+      }
+    }
+
+    &:disabled {
+      & ~ .ui-checkbox__text {
+        color: rgba($tx-checkbox-text-disabled-color, .3);
+
+        &:before {
+          border-color: rgba($tx-checkbox-text-disabled-border-color, .3);
+        }
+      }
+    }
+  }
+}

components/dropDown/dropDown.js

@@ -0,0 +1,166 @@
+import React, { Component, PropTypes } from 'react';
+import Select from 'react-select';
+
+import { getClassNamesWithMods } from '../_helpers';
+import DropdownFilterOptionComponent from './dropdownFilterOptionComponent';
+
+/**
+ * DropDown component
+ */
+class DropDown extends Component {
+  constructor(props) {
+    super(props);
+
+    this.onChange = this.onChange.bind(this);
+    this.menuRenderer = this.menuRenderer.bind(this);
+  }
+
+  optionRef = (onOptionRef, isSelected) => ref => onOptionRef(ref, isSelected);
+
+  /**
+   * Overriding the internal method of react-select for fix autoscrolling
+   */
+  menuRenderer({
+      focusedOption,
+      instancePrefix,
+      onFocus,
+      onSelect,
+      optionClassName,
+      optionComponent,
+      optionRenderer,
+      options,
+      valueArray,
+      valueKey,
+      onOptionRef,
+    }) {
+    let Option = optionComponent;
+
+    return options.map((option, i) => {
+      let isSelected = valueArray && valueArray.indexOf(option) > -1;
+      let isFocused = option === focusedOption;
+      const classes = ['Select-option'];
+
+      optionClassName && classes.push(optionClassName);
+      isSelected && classes.push('is-selected');
+      isFocused && classes.push('is-focused');
+      option.disabled && classes.push('is-disabled');
+      const optionClass = classes.join(' ');
+
+      return (
+        <Option
+          className={optionClass}
+          instancePrefix={instancePrefix}
+          isDisabled={option.disabled}
+          isFocused={this.props.filterMode ? false : isFocused}
+          isSelected={isSelected}
+          key={`option-${i}-${option[valueKey]}`}
+          onFocus={onFocus}
+          onSelect={onSelect}
+          option={option}
+          optionIndex={i}
+          ref={this.optionRef(onOptionRef, isSelected)}
+        >
+          {optionRenderer(option, i)}
+        </Option>
+      );
+    });
+  }
+
+  /**
+   * @param {Array} changedOptions
+   */
+  onChange(changedOptions) {
+    if (!this.props.filterMode) {
+      this.props.onChange(changedOptions);
+      return;
+    }
+
+    const option = changedOptions[0];
+    const optionIndex = this.props.options.findIndex(o => o.value === option.value);
+    this.props.onChange(option, optionIndex, this.props.filterKey);
+  }
+
+  render() {
+    const isFiltermode = this.props.filterMode;
+    const mods = [];
+    isFiltermode && mods.push('filter');
+    isFiltermode && this.props.options.some(option => option.checked) && mods.push('state-active');
+
+    const className = getClassNamesWithMods('ui-dropdown', mods);
+
+    return (
+      <Select
+        className={className}
+        clearable={this.props.clearable}
+        menuRenderer={this.menuRenderer}
+        multi={isFiltermode ? true : this.props.multi}
+        name={this.props.name}
+        onChange={this.onChange}
+        optionComponent={isFiltermode ? DropdownFilterOptionComponent : undefined}
+        options={this.props.options}
+        placeholder={this.props.placeholder}
+        scrollMenuIntoView={this.props.scrollMenuIntoView}
+        searchable={this.props.searchable}
+        value={this.props.value}
+      />
+    );
+  }
+}
+
+DropDown.defaultProps = {
+  clearable: false,
+  filterMode: false,
+  multi: false,
+  placeholder: '',
+  scrollMenuIntoView: false,
+  searchable: false,
+};
+
+DropDown.propTypes = {
+  /**
+ * Should it be possible to reset value
+ */
+  clearable: PropTypes.bool,
+  /**
+ * Filter key
+ */
+  filterKey: PropTypes.string,
+  /**
+ * Filter mode
+ */
+  filterMode: PropTypes.bool,
+  /**
+ * Multi-value input
+ */
+  multi: PropTypes.bool,
+  /**
+ * Generates a hidden &lt;input /&gt; tag with this field name for html forms
+ */
+  name: PropTypes.string,
+  /**
+ * onChange handler: function (newValue) {}
+ */
+  onChange: PropTypes.func.isRequired,
+  /**
+ * Array of options
+ */
+  options: PropTypes.array.isRequired,
+  /**
+ * Field placeholder, displayed when there's no value
+ */
+  placeholder: PropTypes.string,
+  /**
+ * Boolean to enable the viewport to shift so that the full menu fully visible when engaged
+ */
+  scrollMenuIntoView: PropTypes.bool,
+  /**
+ * Whether to enable searching feature or not
+ */
+  searchable: PropTypes.bool,
+  /**
+ * Initial field value
+ */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array, PropTypes.object]),
+};
+
+export default DropDown;