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

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _core = require("@material-ui/core");

var _clsx = _interopRequireDefault(require("clsx"));

var _useControlled3 = _interopRequireDefault(require("@e-group/hooks/useControlled"));

var _scrollTo = _interopRequireDefault(require("@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 => (0, _core.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 = (0, _useControlled3.default)({
    controlled: valueProp,
    default: ''
  }),
        _useControlled2 = (0, _slicedToArray2.default)(_useControlled, 2),
        value = _useControlled2[0],
        setValue = _useControlled2[1];

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

    if (hoursColumn && hoursActive) {
      (0, _scrollTo.default)(hoursColumn, hoursActive.offsetTop - 60, 300);
    }

    if (minsColumn && minsActive) {
      (0, _scrollTo.default)(minsColumn, minsActive.offsetTop - 60, 300);
    }
  }, [value]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/_react.default.createElement(_core.Grid, {
    container: true,
    direction: "column"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: classes.header
  }), /*#__PURE__*/_react.default.createElement(_core.Grid, {
    item: true,
    container: true,
    className: classes.container
  }, /*#__PURE__*/_react.default.createElement(_core.Grid, {
    ref: hoursColumnEl,
    item: true,
    className: classes.columnContainer
  }, /*#__PURE__*/_react.default.createElement(_core.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.default.createElement(_core.Grid, {
      ref: isActive ? hoursActiveEl : undefined,
      item: true,
      key: hour,
      className: (0, _clsx.default)(classes.item, isActive && classes.itemActive),
      onClick: () => {
        if (onTimeClick) {
          setValue("".concat(hour, ":").concat(valueMinute));
          onTimeClick("".concat(hour, ":").concat(valueMinute));
        }
      }
    }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
      variant: "body2"
    }, hour));
  }))), /*#__PURE__*/_react.default.createElement(_core.Grid, {
    ref: minutesColumnEl,
    item: true,
    className: classes.columnContainer
  }, /*#__PURE__*/_react.default.createElement(_core.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.default.createElement(_core.Grid, {
      ref: isActive ? minutesActiveEl : undefined,
      item: true,
      key: minute,
      className: (0, _clsx.default)(classes.item, isActive && classes.itemActive),
      onClick: () => {
        if (onTimeClick) {
          setValue("".concat(valueHour, ":").concat(minute));
          onTimeClick("".concat(valueHour, ":").concat(minute));
        }
      }
    }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
      variant: "body2"
    }, minute));
  }))))));
};

var _default = (0, _core.withStyles)(styles, {
  name: 'EgTime'
})(Time);

exports.default = _default;