@chayns-components/date/lib/cjs/components/opening-times/opening-inputs/OpeningInputs.js

A set of beautiful React components for developing your own applications with chayns.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("motion/react");
var _react2 = _interopRequireWildcard(require("react"));
var _uuid = require("uuid");
var _openingTimes = require("../../../types/openingTimes");
var _OpeningInput = _interopRequireDefault(require("./opening-input/OpeningInput"));
var _OpeningInputs = require("./OpeningInputs.styles");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const OpeningInputs = ({
  times,
  isDisabled,
  onRemove,
  onAdd,
  onInvalid,
  id,
  onChange,
  currentDayId,
  editMode = false,
  closedText = ''
}) => {
  const [newTimes, setNewTimes] = (0, _react2.useState)();
  const [invalidTimes, setInvalidTimes] = (0, _react2.useState)([]);
  (0, _react2.useEffect)(() => {
    setNewTimes(times);
  }, [times]);
  const handleAdd = (0, _react2.useCallback)(() => {
    const defaultTime = {
      start: '08:00',
      end: '18:00',
      id: (0, _uuid.v4)()
    };
    setNewTimes(prevState => prevState ? [...prevState, defaultTime] : [defaultTime]);
    if (typeof onAdd === 'function') {
      onAdd(defaultTime, id);
    }
  }, [id, onAdd]);
  const handleRemove = (0, _react2.useCallback)(timeId => {
    setNewTimes(prevState => (prevState ?? []).filter(time => time.id !== timeId));
    if (typeof onRemove === 'function') {
      onRemove(timeId);
    }
  }, [onRemove]);
  (0, _react2.useEffect)(() => {
    const result = [];
    for (let i = 0; i < times.length; i++) {
      const currentTime = times[i];
      const prevTime = times[i - 1];
      if (currentTime) {
        const currStart = new Date(`2000-01-01T${currentTime.start}`);
        const currEnd = new Date(`2000-01-01T${currentTime.end}`);
        if (currStart >= currEnd) {
          result.push(currentTime);
        }
        if (prevTime) {
          const prevEnd = new Date(`2000-01-01T${prevTime.end}`);
          if (prevEnd > currStart) {
            result.push(prevTime, currentTime);
          }
        }
      }
    }
    const invalidTimeIds = result.map(({
      id: invalidId
    }) => invalidId);
    setInvalidTimes(invalidTimeIds);
    if (typeof onInvalid === 'function') {
      onInvalid(id, invalidTimeIds);
    }
  }, [id, onInvalid, times]);
  const handleChange = (0, _react2.useCallback)(newTime => {
    setNewTimes(prevState => {
      const updatedTimes = (prevState ?? []).map(time => {
        if (time.id === newTime.id) {
          return newTime;
        }
        return time;
      });
      if (typeof onChange === 'function') {
        onChange(newTime);
      }
      return updatedTimes;
    });
  }, [onChange]);
  const content = (0, _react2.useMemo)(() => {
    const items = [];
    if (!newTimes) {
      return items;
    }
    newTimes.forEach(({
      end,
      start,
      id: timeId
    }, index) => {
      if (!editMode) {
        const text = isDisabled ? closedText : `${start} - ${end}`;
        items.push(/*#__PURE__*/_react2.default.createElement(_OpeningInputs.StyledOpeningInputPreview, {
          key: `opening-times-preview__${id}.${timeId}`
        }, `${text}${currentDayId && newTimes.length > 1 && index === 0 ? ', ' : ''}`));
        return;
      }
      if (index > 1) {
        return;
      }
      let buttonType = _openingTimes.OpeningTimesButtonType.NONE;
      if (index === 0 && times.length === 1 && !isDisabled) {
        buttonType = _openingTimes.OpeningTimesButtonType.ADD;
      } else if (index === 1 && !isDisabled) {
        buttonType = _openingTimes.OpeningTimesButtonType.REMOVE;
      }
      items.push(/*#__PURE__*/_react2.default.createElement(_OpeningInput.default, {
        key: `opening-times-input__${id}.${timeId}`,
        start: start,
        id: timeId,
        end: end,
        isDisabled: isDisabled,
        isInvalid: invalidTimes.includes(timeId),
        buttonType: buttonType,
        onAdd: handleAdd,
        onChange: time => handleChange(time),
        onRemove: () => handleRemove(timeId)
      }));
    });
    return items;
  }, [closedText, currentDayId, editMode, handleAdd, handleChange, handleRemove, id, invalidTimes, isDisabled, newTimes, times.length]);
  const gap = (0, _react2.useMemo)(() => {
    if (newTimes && newTimes.length > 1 && editMode || !editMode && currentDayId) {
      return '8px';
    }
    return 0;
  }, [currentDayId, editMode, newTimes]);
  return (0, _react2.useMemo)(() => /*#__PURE__*/_react2.default.createElement(_OpeningInputs.StyledOpeningInputs, {
    $editMode: !currentDayId,
    key: `opening-inputs__${id}`,
    animate: {
      gap
    },
    initial: {
      gap: 0
    }
  }, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
    initial: false
  }, content)), [content, currentDayId, gap, id]);
};
OpeningInputs.displayName = 'OpeningInputs';
var _default = exports.default = OpeningInputs;
//# sourceMappingURL=OpeningInputs.js.map