ac-patterns/dist/numpad.js

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

import { h, Component } from 'preact';
import { Icon } from './icon';
import { Button } from './button';
import cn from 'classnames';
import omit from './utils/omit';
import { FullScreenOverlay } from './full-screen-overlay';

const cellStyle = {
  width: '80px',
  height: '80px'
};

const stopEvent = e => {
  e.preventDefault();
  e.stopImmediatePropagation();
};

const quickTap = e => {
  e.preventDefault();
  e.target.click();
};

const NumberCell = ({ number, callback }) => h(
  'td',
  null,
  h(
    Button,
    {
      onClick: e => {
        e.stopImmediatePropagation();
        callback(number);
      },
      onTouchStart: quickTap,
      style: cellStyle
    },
    number
  )
);

export class Numpad extends Component {
  constructor(props) {
    super(props);
    this.addNumber = this.addNumber.bind(this);
    this.backspace = this.backspace.bind(this);
    this.close = this.close.bind(this);
    this.onKey = this.onKey.bind(this);
    this.state = {
      value: '0'
    };
  }

  addNumber(number) {
    const { value } = this.state;
    const { max, maxDecimals } = this.props;
    if (number === '.' && value.includes('.')) {
      return;
    }
    let newNumber = this.state.value + '' + number;
    if (newNumber.slice(0, 1) === '0') {
      newNumber = newNumber.slice(1);
    }
    const decimals = newNumber.split('.')[1];
    if (decimals && decimals.length > maxDecimals) {
      return;
    }
    if (max && Number(newNumber) > max) {
      return;
    }
    this.setState({ value: newNumber });
  }

  backspace(e) {
    if (e) e.stopImmediatePropagation();
    const number = (this.state.value + '').slice(0, -1);
    this.setState({ value: number || '0' });
  }

  onKey(e) {
    const value = e.which - 48;
    if (value <= 9 && value >= 0) {
      this.addNumber(value);
    } else if (e.which === 8 || e.which === 48) {
      this.backspace();
    } else if (e.which === 27) {
      this.close();
    } else if (e.which === 13) {
      this.close(this.state.value);
    } else if (e.which === 190) {
      this.addNumber('.');
    }
  }

  componentDidMount() {
    window.addEventListener('keydown', this.onKey);
  }

  componentWillUnmount() {
    window.removeEventListener('keydown', this.onKey);
  }

  close(value) {
    if (typeof value === 'object') {
      value = undefined;
    }
    this.props.onClose(value !== undefined ? Number(value) : undefined);
  }

  render(props, { value }) {
    const { unit, className, max } = props;
    const rest = omit(props, ['unit', 'className', 'max']);
    return h(
      'div',
      _extends({
        onClick: stopEvent,
        className: cn('ba br2 b--gray bg-light-gray pa2 shadow-2 top-0 left-0', className)
      }, rest),
      h(
        'div',
        { className: 'flex items-center justify-between' },
        h(
          'div',
          { className: 'ml2' },
          max && `max: ${max}`
        ),
        h(
          'div',
          { className: 'flex items-center justify-end' },
          h(
            'span',
            { className: 'fw6 f4 mr2' },
            value,
            ' ',
            unit
          ),
          h(
            'button',
            {
              className: 'bn bg-transparent',
              onClick: this.backspace,
              onTouchStart: e => {
                e.preventDefault();
                e.target.click();
              },
              style: cellStyle
            },
            h(Icon, { icon: 'backspace' })
          )
        )
      ),
      h(
        'table',
        null,
        h(
          'tr',
          null,
          h(NumberCell, { callback: this.addNumber, number: '1' }),
          h(NumberCell, { callback: this.addNumber, number: '2' }),
          h(NumberCell, { callback: this.addNumber, number: '3' }),
          h(
            'td',
            { style: cellStyle },
            h(
              'div',
              { className: 'relative', style: cellStyle },
              h(
                Button,
                {
                  style: {
                    width: '80px',
                    height: '162px',
                    top: '1px'
                  },
                  stop: true,
                  className: 'absolute top-0 left-0',
                  onClick: () => this.close()
                },
                'Cancel'
              )
            )
          )
        ),
        h(
          'tr',
          null,
          h(NumberCell, { callback: this.addNumber, number: '4' }),
          h(NumberCell, { callback: this.addNumber, number: '5' }),
          h(NumberCell, { callback: this.addNumber, number: '6' }),
          h('td', null)
        ),
        h(
          'tr',
          null,
          h(NumberCell, { callback: this.addNumber, number: '7' }),
          h(NumberCell, { callback: this.addNumber, number: '8' }),
          h(NumberCell, { callback: this.addNumber, number: '9' }),
          h(
            'td',
            { style: cellStyle },
            h(
              'div',
              { className: 'relative', style: cellStyle },
              h(
                Button,
                {
                  style: {
                    width: '80px',
                    height: '162px',
                    top: '1px'
                  },
                  primary: true,
                  className: 'absolute left-0',
                  onClick: () => {
                    this.close(value);
                  }
                },
                'Save'
              )
            )
          )
        ),
        h(
          'tr',
          null,
          h(NumberCell, {
            callback: () => this.setState({ value: '0' }),
            number: 'Clear'
          }),
          h(NumberCell, { callback: this.addNumber, number: '0' }),
          h(NumberCell, { callback: this.addNumber, number: '.' }),
          h('td', null)
        )
      )
    );
  }
}

export class NumpadOverlay extends Component {
  componentDidMount() {
    setTimeout(() => {
      document.activeElement.blur();
    }, 200);
  }

  render({ unit = 'mg', onValue, onCancel, max = null, maxDecimals = 2 }) {
    return h(
      FullScreenOverlay,
      null,
      h(Numpad, {
        unit: unit,
        max: max,
        maxDecimals: maxDecimals,
        onClose: value => {
          if (value !== undefined) {
            onValue(value);
          } else {
            onCancel();
          }
        }
      })
    );
  }
}

export class NumpadButton extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }

  render({ unit, max, maxDecimals, onValue, onCancel }, { open }) {
    return h(
      Button,
      {
        onClick: () => {
          this.setState({ open: true });
        }
      },
      h(Icon, { icon: 'dialpad' }),
      open && h(NumpadOverlay, {
        unit: unit,
        max: max,
        maxDecimals: maxDecimals,
        onCancel: () => {
          onCancel && onCancel();
          this.setState({ open: false });
        },
        onValue: val => {
          onValue(val);
          this.setState({ open: false });
        }
      })
    );
  }
}