@nomios/web-uikit/dist/components/idle-picker/IdlePicker.js

Nomios' living web UIKit

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React, { Component } from 'react';
import { default as RcSlider } from 'rc-slider';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Display from './display/Display';
import styles from './IdlePicker.css';
import 'rc-slider/assets/index.css';
const marks = {
  1: '01',
  2: '',
  3: '',
  4: '',
  5: '',
  6: '',
  7: '',
  8: '',
  9: '',
  10: '10'
};

class IdlePicker extends Component {
  constructor(props) {
    super(props);

    _defineProperty(this, "componentRef", React.createRef());

    _defineProperty(this, "previousHandleWasBeforeChange", false);

    _defineProperty(this, "handleClick", false);

    _defineProperty(this, "mouseUpOnElement", false);

    _defineProperty(this, "picker", undefined);

    _defineProperty(this, "handle", undefined);

    _defineProperty(this, "track", undefined);

    _defineProperty(this, "handleOnChange", value => {
      const roundValue = Math.round(value);

      if (roundValue !== this.state.displayValue) {
        if (this.previousHandleWasBeforeChange) {
          this.setState({
            pickerValue: roundValue,
            displayValue: roundValue,
            forcePickerValue: true
          });
        } else {
          this.setState({
            displayValue: roundValue
          });
        }
      }

      this.previousHandleWasBeforeChange = false;
    });

    _defineProperty(this, "handleBeforeChange", () => {
      this.previousHandleWasBeforeChange = true;
      this.setState({
        forcePickerValue: false
      });
    });

    _defineProperty(this, "handleAfterChange", value => {
      this.previousHandleWasBeforeChange = false;
      const roundedValue = Math.round(value);
      this.setState({
        pickerValue: roundedValue,
        displayValue: roundedValue,
        forcePickerValue: true
      });
      this.props.onChange && this.props.onChange(roundedValue);
    });

    _defineProperty(this, "handleHandleMouseEnter", () => {
      this.appendClassToTrack();
    });

    _defineProperty(this, "handleHandleMouseLeave", () => {
      this.removeClassFromTrack();
    });

    _defineProperty(this, "handleHandleFocus", () => {
      this.appendClassToTrack();
    });

    _defineProperty(this, "handleHandleBlur", () => {
      this.removeClassFromTrack();
    });

    _defineProperty(this, "handleHandleKeyDown", event => {
      const {
        pickerValue
      } = this.state;

      switch (event.key) {
        case 'LEFT':
        case 'ArrowLeft':
        case 'DOWN':
        case 'ArrowDown':
          pickerValue > 1 && this.setState({
            pickerValue: pickerValue - 1,
            displayValue: pickerValue - 1,
            forcePickerValue: true
          });
          this.props.onChange && this.props.onChange(pickerValue - 1);
          break;

        case 'RIGHT':
        case 'ArrowRight':
        case 'UP':
        case 'ArrowUp':
          pickerValue < 10 && this.setState({
            pickerValue: pickerValue + 1,
            displayValue: pickerValue + 1,
            forcePickerValue: true
          });
          this.props.onChange && this.props.onChange(pickerValue + 1);
          break;

        default:
      }
    });

    _defineProperty(this, "handleHandleMouseDown", () => {
      this.handleClick = true;
    });

    _defineProperty(this, "handleHandleMouseUp", () => {
      this.unsetHandleClick(true);
    });

    _defineProperty(this, "handleDocumentMouseUp", () => {
      this.unsetHandleClick(false);
    });

    const _value = Math.max(Math.min(this.props.defaultValue, 10), 1);

    this.state = {
      displayValue: _value,
      pickerValue: _value,
      forcePickerValue: true
    };
  }

  componentDidMount() {
    this.picker = this.componentRef.current;
    this.handle = this.picker.querySelector('.rc-slider-handle');
    this.track = this.picker.querySelector('.rc-slider-track');
    this.handle.addEventListener('mouseenter', this.handleHandleMouseEnter);
    this.handle.addEventListener('mouseleave', this.handleHandleMouseLeave);
    this.handle.addEventListener('focusin', this.handleHandleFocus);
    this.handle.addEventListener('blur', this.handleHandleBlur);
    this.handle.addEventListener('keydown', this.handleHandleKeyDown);
    this.handle.addEventListener('mousedown', this.handleHandleMouseDown);
    this.handle.addEventListener('mouseup', this.handleHandleMouseUp);
    window.addEventListener('mouseup', this.handleDocumentMouseUp);
  }

  render() {
    const {
      pickerValue,
      displayValue,
      forcePickerValue
    } = this.state;
    const pickerProps = {
      min: 1,
      max: 10,
      step: 0.01,
      marks,
      onChange: this.handleOnChange,
      onAfterChange: this.handleAfterChange,
      onBeforeChange: this.handleBeforeChange
    };
    const finalClassName = classNames(styles['picker-container']);

    if (forcePickerValue === true) {
      pickerProps.value = pickerValue;
      pickerProps.className = classNames(styles['rc-slider-main'], styles['slider-component']);
    } else {
      pickerProps.className = classNames(styles['is-focused'], styles['slider-component']);
    }

    return React.createElement("div", {
      className: finalClassName,
      ref: this.componentRef
    }, React.createElement(Display, {
      currentValue: displayValue
    }), React.createElement(RcSlider, pickerProps));
  }

  unsetHandleClick(onElement) {
    if (onElement) {
      this.mouseUpOnElement = true;
    } else {
      this.handleClick = false;
      !this.mouseUpOnElement && this.removeClassFromTrack();
      this.mouseUpOnElement = false;
    }
  }

  appendClassToTrack() {
    if (!this.track.classList.contains('handle-hover')) {
      this.track.classList.add('handle-hover');
      this.setState(this.state);
    }
  }

  removeClassFromTrack() {
    if (this.track.classList.contains('handle-hover') && !this.handleClick) {
      this.track.classList.remove('handle-hover');
      this.handle.blur();
    }
  }

}

IdlePicker.propTypes = {
  defaultValue: PropTypes.number,
  onChange: PropTypes.func
};
IdlePicker.defaultProps = {
  defaultValue: 3
};
export default IdlePicker;