chayns-components/dist/cjs-split-css/react-chayns-openingtimes/component/TimeSpan.js

A set of beautiful React components for developing chayns® applications.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Input = _interopRequireDefault(require("../../react-chayns-input/component/Input"));
var _dateTimeHelper = require("../../utils/dateTimeHelper");
var _checkTimeSpan = require("../utils/checkTimeSpan");
var _validateTimeSpan = require("../utils/validateTimeSpan");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function checkInputChars(str) {
  if (str.length > 5) return false;
  let alreadyFoundColon = false;
  for (let i = 0; i < str.length; i += 1) {
    const charCode = str.charCodeAt(i);
    if (charCode === 58) {
      // If char is colon and amount colons < 1 add colon
      if (alreadyFoundColon) return false;
      alreadyFoundColon = true;
    }

    // If not digit or colon return false
    if (charCode > 58 || charCode < 48) return false;
  }
  return true;
}
function inspectTimeStr(str) {
  const leftDigits = [];
  const rightDigits = [];
  let foundColons = 0;
  for (let i = 0; i < str.length; i += 1) {
    const char = str.charAt(i);
    const charCode = str.charCodeAt(i);
    if (char === ':') {
      foundColons += 1;
    } else if (charCode > 47 && charCode < 58) {
      if (foundColons === 0 && leftDigits.length < 2) {
        leftDigits.push(char);
      } else if (rightDigits.length < 2) rightDigits.push(char);
    }
  }
  return {
    left: leftDigits,
    right: rightDigits,
    colons: foundColons
  };
}
function generateTimePart(digits, type) {
  if (digits.length === 1) {
    if (type === 'minutes') return `${digits[0]}0`;
    return `0${digits[0]}`;
  }
  if (digits.length === 2) return `${digits[0]}${digits[1]}`;
  return '00';
}
const TimeSpan = /*#__PURE__*/_react.default.memo(_ref => {
  let {
    startTime,
    endTime,
    onChange,
    childrenRef,
    isInvalid = false,
    disabled = false
  } = _ref;
  const [time, setTime] = (0, _react.useState)({
    startTime,
    endTime
  });
  const handleChange = (0, _react.useCallback)(inputField => value => setTime(currentState => {
    let newState = currentState;
    // Apply input value only if chars are valid
    if (checkInputChars(value)) {
      newState = {
        ...currentState
      };
      if (inputField === 'start') {
        newState.startTime = value;
      } else {
        newState.endTime = value;
      }
    }
    window.setTimeout(() => {
      // call in non-blocking way
      // Call onChange if time string is valid
      onChange(newState.startTime, newState.endTime);
    }, 0);
    return newState;
  }), [onChange, setTime]);
  const handleStartChange = (0, _react.useMemo)(() => handleChange('start'), [handleChange]);
  const handleEndChange = (0, _react.useMemo)(() => handleChange('end'), [handleChange]);
  (0, _react.useEffect)(() => {
    if ((0, _validateTimeSpan.validateTimeSpan)(startTime, endTime)) {
      setTime({
        startTime,
        endTime
      });
    }
  }, [startTime, endTime, setTime]);
  const handleAutoFormat = (0, _react.useCallback)(inputField => () => setTime(currentState => {
    const newState = {
      ...currentState
    };
    const val = inputField === 'start' ? newState.startTime : newState.endTime;
    const inspectResult = inspectTimeStr(val);
    let minutePart = generateTimePart(inspectResult.right, 'minutes');
    let hourPart = generateTimePart(inspectResult.left, 'hours');
    if (parseInt(minutePart, 10) > 59) minutePart = '59';
    if (parseInt(hourPart, 10) > 23) hourPart = '23';
    const timeStr = `${hourPart}:${minutePart}`;
    if (inputField === 'start') {
      newState.startTime = timeStr;
    } else {
      newState.endTime = timeStr;
    }
    if (newState.startTime === newState.endTime) {
      newState.endTime = (0, _dateTimeHelper.getTimeStringFromMinutes)((0, _dateTimeHelper.getTimeStringMinutes)(newState.endTime + 60));
    }
    window.setTimeout(() => {
      // call in non-blocking way
      // Call onChange if time string is valid
      onChange(newState.startTime, newState.endTime);
    }, 0);
    return newState;
  }), [setTime, onChange]);
  const handleStartAutoFormat = (0, _react.useMemo)(() => handleAutoFormat('start'), [handleAutoFormat]);
  const handleEndAutoFormat = (0, _react.useMemo)(() => handleAutoFormat('end'), [handleAutoFormat]);
  const timeSpanValid = (0, _checkTimeSpan.checkTimeSpan)(time.startTime, time.endTime);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: `${disabled ? 'time--disabled' : 'time--active'} time__span`,
    ref: childrenRef
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "time__span--input"
  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
    value: time.startTime,
    onChange: handleStartChange,
    onBlur: handleStartAutoFormat,
    onEnter: handleStartAutoFormat,
    invalid: !timeSpanValid || isInvalid
  })), /*#__PURE__*/_react.default.createElement("span", null, "-"), /*#__PURE__*/_react.default.createElement("div", {
    className: "time__span--input"
  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
    value: time.endTime,
    onChange: handleEndChange,
    onBlur: handleEndAutoFormat,
    onEnter: handleEndAutoFormat,
    invalid: !timeSpanValid || isInvalid
  })));
});
TimeSpan.OFF = 0;
TimeSpan.ADD = 1;
TimeSpan.REMOVE = 2;
TimeSpan.defaultStart = '08:00';
TimeSpan.defaultEnd = '17:00';
TimeSpan.propTypes = {
  startTime: _propTypes.default.string.isRequired,
  endTime: _propTypes.default.string.isRequired,
  disabled: _propTypes.default.bool,
  onChange: _propTypes.default.func.isRequired,
  isInvalid: _propTypes.default.bool,
  childrenRef: _propTypes.default.func
};
TimeSpan.displayName = 'TimeSpan';
var _default = TimeSpan;
exports.default = _default;
//# sourceMappingURL=TimeSpan.js.map