@e-group/material-lab/esm/DateRangePicker/Time.js

EGroup Team Lab - Incubator for EGroup Team experimental React components.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useEffect, useRef } from 'react';
import { Grid, createStyles, withStyles, Typography } from '@material-ui/core';
import clsx from 'clsx';
import useControlled from '@e-group/hooks/useControlled';
import scrollTo from '@e-group/utils/scrollTo';
const hours = Array.from(Array(24).keys()).map(el => el < 10 ? "0".concat(el) : "".concat(el));
const minutes = Array.from(Array(60).keys()).map(el => el < 10 ? "0".concat(el) : "".concat(el));

const styles = theme => createStyles({
  root: {
    display: 'inline-flex'
  },
  header: {
    height: 53,
    width: '100%',
    borderBottom: "1px solid ".concat(theme.palette.divider)
  },
  container: {
    height: 285
  },
  columnContainer: {
    overflow: 'auto',
    maxHeight: 285,
    padding: '4px 0',
    width: 80
  },
  column: {
    paddingBottom: 250
  },
  item: {
    width: '100%',
    textAlign: 'center',
    cursor: 'pointer',
    transition: 'all 0.2s',
    padding: '6px 0',
    '&:hover': {
      backgroundColor: theme.palette.action.hover
    }
  },
  itemActive: {
    backgroundColor: theme.palette.primary.main,
    color: '#fff',
    '&:hover': {
      backgroundColor: theme.palette.primary.main
    }
  }
});

const Time = props => {
  const classes = props.classes,
        onTimeClick = props.onTimeClick,
        valueProp = props.value;

  const _useControlled = useControlled({
    controlled: valueProp,
    default: ''
  }),
        _useControlled2 = _slicedToArray(_useControlled, 2),
        value = _useControlled2[0],
        setValue = _useControlled2[1];

  const hoursColumnEl = useRef(null);
  const hoursActiveEl = useRef(null);
  const minutesColumnEl = useRef(null);
  const minutesActiveEl = useRef(null);
  useEffect(() => {
    const hoursColumn = hoursColumnEl.current;
    const hoursActive = hoursActiveEl.current;
    const minsColumn = minutesColumnEl.current;
    const minsActive = minutesActiveEl.current;

    if (hoursColumn && hoursActive) {
      scrollTo(hoursColumn, hoursActive.offsetTop - 60, 300);
    }

    if (minsColumn && minsActive) {
      scrollTo(minsColumn, minsActive.offsetTop - 60, 300);
    }
  }, [value]);
  return /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/React.createElement(Grid, {
    container: true,
    direction: "column"
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.header
  }), /*#__PURE__*/React.createElement(Grid, {
    item: true,
    container: true,
    className: classes.container
  }, /*#__PURE__*/React.createElement(Grid, {
    ref: hoursColumnEl,
    item: true,
    className: classes.columnContainer
  }, /*#__PURE__*/React.createElement(Grid, {
    container: true,
    direction: "column",
    className: classes.column
  }, hours.map(hour => {
    const valueHour = value === null || value === void 0 ? void 0 : value.split(':')[0];
    const valueMinute = value === null || value === void 0 ? void 0 : value.split(':')[1];
    const isActive = valueHour === hour;
    return /*#__PURE__*/React.createElement(Grid, {
      ref: isActive ? hoursActiveEl : undefined,
      item: true,
      key: hour,
      className: clsx(classes.item, isActive && classes.itemActive),
      onClick: () => {
        if (onTimeClick) {
          setValue("".concat(hour, ":").concat(valueMinute));
          onTimeClick("".concat(hour, ":").concat(valueMinute));
        }
      }
    }, /*#__PURE__*/React.createElement(Typography, {
      variant: "body2"
    }, hour));
  }))), /*#__PURE__*/React.createElement(Grid, {
    ref: minutesColumnEl,
    item: true,
    className: classes.columnContainer
  }, /*#__PURE__*/React.createElement(Grid, {
    container: true,
    direction: "column",
    className: classes.column
  }, minutes.map(minute => {
    const valueHour = value === null || value === void 0 ? void 0 : value.split(':')[0];
    const valueMinute = value === null || value === void 0 ? void 0 : value.split(':')[1];
    const isActive = valueMinute === minute;
    return /*#__PURE__*/React.createElement(Grid, {
      ref: isActive ? minutesActiveEl : undefined,
      item: true,
      key: minute,
      className: clsx(classes.item, isActive && classes.itemActive),
      onClick: () => {
        if (onTimeClick) {
          setValue("".concat(valueHour, ":").concat(minute));
          onTimeClick("".concat(valueHour, ":").concat(minute));
        }
      }
    }, /*#__PURE__*/React.createElement(Typography, {
      variant: "body2"
    }, minute));
  }))))));
};

export default withStyles(styles, {
  name: 'EgTime'
})(Time);