@elliemae/ds-time-picker 2.3.1 → 3.0.0-alpha.3

package/esm/TimePickerImpl.js

@@ -1,165 +0,0 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import { useState, useRef, useEffect } from 'react';
-import moment from 'moment';
-import memoizeOne from 'memoize-one';
-import { getVisibleTimeByFormat } from '@elliemae/ds-utilities';
-import { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';
-import { DSInputGroup, DSInput, TimeInputImpl } from '@elliemae/ds-form';
-import { TimePickerMenu } from './TimePickerMenu.js';
-import TimePickerDropdown from './TimePickerDropdown.js';
-import { convertTimeString } from './utils.js';
-import { jsx } from 'react/jsx-runtime';
-
-const _excluded = ["onChange"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-const blockName = 'time-picker';
-const TimePickerContainer = aggregatedClasses(DSInputGroup)(blockName, null, _ref => {
-  let {
-    isMenuOpened
-  } = _ref;
-  return {
-    isMenuOpened
-  };
-});
-
-const TimePickerImpl = _ref2 => {
-  let {
-    value,
-    onChange,
-    onOpen,
-    format,
-    disabled,
-    hasHeader,
-    hasHeaderDisplay,
-    className,
-    containerProps,
-    placement,
-    zIndex,
-    disabledTimes,
-    minutesInterval
-  } = _ref2;
-  const [time, setTime] = useState();
-  const [isMenuOpened, setIsMenuOpened] = useState(false);
-  const [focusedColumn, setFocusedColumn] = useState(null);
-  const timePickerRef = useRef();
-  useEffect(() => {
-    if (moment(value).isValid()) setTime(moment(value));else if (value === null) setTime(undefined);
-  }, [value]);
-  useEffect(() => {
-    window.addEventListener('click', handleClickOutside, false);
-    return () => window.removeEventListener('click', handleClickOutside, false);
-  }, []);
-  useEffect(() => {
-    window.addEventListener('keydown', handleKeyDown, false);
-    return () => window.removeEventListener('keydown', handleKeyDown, false);
-  }, []);
-  useEffect(() => {
-    if (isMenuOpened) handleChangeFocus();
-  }, [isMenuOpened]);
-
-  const handleClickOutside = () => {
-    if (isMenuOpened) setIsMenuOpened(false);
-  };
-
-  const handleKeyDown = event => {
-    const {
-      key
-    } = event;
-    const menuOpenKeys = ['Escape', ' ', 'Enter'];
-    if (menuOpenKeys.includes(key)) setIsMenuOpened(false);
-  };
-
-  const handleChangeFocus = () => {
-    const [firstColumn] = document.getElementsByClassName('em-ds-time-picker-panel');
-
-    if (firstColumn && !focusedColumn) {
-      setFocusedColumn(firstColumn);
-      firstColumn.focus();
-    }
-  };
-
-  const handlePickerChange = newTime => {
-    setTime(moment(newTime));
-    onChange(moment(newTime));
-  };
-
-  const handleInputChange = newTime => {
-    setTime(newTime);
-    onChange(newTime);
-  };
-
-  const handleMenuOpen = isOpen => {
-    onOpen(isOpen);
-    setIsMenuOpened(isOpen);
-    if (!isOpen) setFocusedColumn(null);
-  };
-
-  const getVisibleTimePanels = memoizeOne(format => getVisibleTimeByFormat(format));
-  const timePickerBlockName = convertPropToCssClassName(blockName);
-  const visiblePanels = getVisibleTimePanels(format);
-  const disabledTimeRange = disabledTimes && {
-    from: convertTimeString(disabledTimes.from),
-    to: convertTimeString(disabledTimes.to)
-  };
-  return /*#__PURE__*/_jsx(TimePickerContainer, {
-    className: "".concat(className, " variant-").concat(!disabled ? 'default' : 'disabled'),
-    containerProps: containerProps,
-    disabled: disabled,
-    rightAddon: /*#__PURE__*/_jsx(TimePickerDropdown, {
-      blockName: timePickerBlockName,
-      disabled: disabled,
-      isOpen: isMenuOpened,
-      zIndex: zIndex,
-      placement: placement,
-      onOpen: handleMenuOpen,
-      onClick: e => {
-        e.preventDefault();
-        handleMenuOpen(!isMenuOpened);
-      },
-      menu: /*#__PURE__*/jsx("div", {
-        ref: timePickerRef,
-        children: /*#__PURE__*/jsx(TimePickerMenu, _objectSpread({
-          disabled: disabled,
-          disabledTimes: disabledTimeRange,
-          format: format,
-          hasHeader: hasHeader,
-          hasHeaderDisplay: hasHeaderDisplay,
-          onTimeChange: handlePickerChange,
-          minutesInterval: minutesInterval,
-          time: time
-        }, visiblePanels))
-      })
-    })
-  }, void 0, /*#__PURE__*/_jsx(DSInput, {
-    customInputType: _ref3 => {
-      let {
-        onChange: handleChange
-      } = _ref3,
-          restInputProps = _objectWithoutProperties(_ref3, _excluded);
-
-      return /*#__PURE__*/jsx(TimeInputImpl, _objectSpread({
-        clearable: true,
-        disabled: disabled,
-        format: format,
-        onChange: handleChange
-      }, restInputProps));
-    },
-    isShowElipsisActive: false,
-    disabled: disabled,
-    onChange: handleInputChange,
-    value: time
-  }));
-};
-
-export { TimePickerImpl as default };

package/esm/TimePickerMenu.js

@@ -1,301 +0,0 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import { Component } from 'react';
-import { aggregatedClasses } from '@elliemae/ds-classnames';
-import moment from 'moment';
-import { range, addLeadingZeros } from '@elliemae/ds-utilities';
-import { isAM } from './utils.js';
-import PickerPanel from './PickerPanel.js';
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-const blockName = 'time-picker-menu';
-const TimePickerContainer = aggregatedClasses('div')(blockName);
-const TimePickerHeader = aggregatedClasses('div')(blockName, 'header');
-const TimePickerPanelContainer = aggregatedClasses('div')(blockName, 'panel-container');
-
-const generateOption = format => option => ({
-  value: option,
-  label: typeof format === 'function' ? format(option) : option
-});
-
-class TimePickerMenu extends Component {
-  constructor(props) {
-    super(props);
-
-    this.renderHeader = () => {
-      const {
-        time
-      } = this.state;
-      return /*#__PURE__*/_jsx(TimePickerHeader, {}, void 0, time.format('hh:mma'));
-    };
-
-    this.state = {
-      time: moment(props.time || '', props.format) || moment()
-    };
-    this.handleHoursChange = this.handleHoursChange.bind(this);
-    this.handleMinuteChange = this.handleMinuteChange.bind(this);
-    this.handleSecondsChange = this.handleSecondsChange.bind(this);
-    this.handleAMPMChange = this.handleAMPMChange.bind(this);
-  }
-
-  static getDerivedStateFromProps(props, state) {
-    if (props.time) {
-      return _objectSpread(_objectSpread({}, state), {}, {
-        time: moment(props.time)
-      });
-    }
-
-    return _objectSpread(_objectSpread({}, state), {}, {
-      time: undefined
-    });
-  }
-
-  componentDidMount() {
-    const {
-      time
-    } = this.state;
-    this.setState({
-      time
-    });
-  }
-
-  handleMinuteChange(value) {
-    const {
-      time
-    } = this.state;
-    this.updateTime(time.minute(value));
-  }
-
-  handleHoursChange(value) {
-    const {
-      time
-    } = this.state;
-    const {
-      use12Hours
-    } = this.props;
-    let nextHour = value;
-
-    if (use12Hours) {
-      if (!isAM(time)) {
-        nextHour = value % 12 + 12;
-      }
-    }
-
-    this.updateTime(time.hour(nextHour));
-  }
-
-  handleSecondsChange(value) {
-    const {
-      time
-    } = this.state;
-    this.updateTime(time.second(value));
-  }
-
-  handleAMPMChange(value) {
-    const {
-      time
-    } = this.state;
-    const hour = time.hour();
-    const nextHour = value.toLowerCase() === 'am' ? hour % 12 : hour % 12 + 12;
-    this.updateTime(time.hour(nextHour));
-  }
-
-  updateTime(time) {
-    const {
-      onTimeChange
-    } = this.props;
-    onTimeChange(time);
-    this.setState({
-      time
-    });
-  }
-
-  renderHoursPanel() {
-    const {
-      time
-    } = this.state;
-    const {
-      showHours,
-      use12Hours,
-      format,
-      hasHeader,
-      disabledTimes
-    } = this.props;
-    if (!showHours) return null;
-    const hour = time.hour(); // in 24 format
-
-    let selectedHour = use12Hours ? hour % 12 || 12 : hour;
-
-    if (disabledTimes) {
-      const {
-        from,
-        to
-      } = disabledTimes;
-
-      if (hour > from.hour && hour < to.hour) {
-        if (to.hour < 24) {
-          const toFormatted = to.hour % 12 || 12;
-          if (selectedHour !== toFormatted) this.handleHoursChange(toFormatted);
-          selectedHour = toFormatted;
-        } else if (from) {
-          selectedHour = (from.hour - 1) % 12 || 12;
-        }
-      }
-    }
-
-    const meridiem = hour >= 12 ? 'PM' : 'AM';
-    const withLeadingZeros = format.indexOf('hh') > -1;
-    const rangeHours = use12Hours ? range(1, 13) : range(24);
-    const hoursOptions = rangeHours.map(generateOption(withLeadingZeros && addLeadingZeros(2)));
-    return /*#__PURE__*/_jsx(PickerPanel, {
-      type: "hour",
-      time: time,
-      meridiem: meridiem,
-      hasHeader: hasHeader,
-      header: "H",
-      onChange: this.handleHoursChange,
-      options: hoursOptions,
-      selected: selectedHour,
-      disabledTimes: disabledTimes
-    });
-  }
-
-  renderMinutesPanel() {
-    const {
-      time
-    } = this.state;
-    const {
-      showMinutes,
-      format,
-      hasHeader,
-      disabledTimes,
-      minutesInterval
-    } = this.props;
-    if (!showMinutes) return null;
-    const withLeadingZeros = format.indexOf('mm') > -1;
-    const rangeMinutes = range(0, 60, minutesInterval).map(generateOption(withLeadingZeros && addLeadingZeros(2)));
-    let selectedMinute = time.minute();
-    const selectedHour = time.hour();
-
-    if (disabledTimes) {
-      const {
-        from,
-        to
-      } = disabledTimes;
-
-      if (selectedHour <= to.hour && selectedHour > from.hour) {
-        if (to) {
-          if (selectedMinute < to.min) this.handleMinuteChange(to.min);
-        } else if (from) {
-          if (selectedMinute > from.min) this.handleMinuteChange(from.min - 1);
-        }
-      } else {
-        selectedMinute = time.minute();
-      }
-    }
-
-    return /*#__PURE__*/_jsx(PickerPanel, {
-      type: "minutes",
-      time: time,
-      hasHeader: hasHeader,
-      header: "M",
-      onChange: this.handleMinuteChange,
-      options: rangeMinutes,
-      selected: selectedMinute,
-      disabledTimes: disabledTimes
-    });
-  }
-
-  renderSecondsPanel() {
-    const {
-      time
-    } = this.state;
-    const {
-      showSeconds,
-      format,
-      hasHeader
-    } = this.props;
-    if (!showSeconds) return null;
-    const withLeadingZeros = format.indexOf('ss') > -1;
-    const rangeSeconds = range(60).map(generateOption(withLeadingZeros && addLeadingZeros(2)));
-    return /*#__PURE__*/_jsx(PickerPanel, {
-      type: "seconds",
-      hasHeader: hasHeader,
-      header: "S",
-      onChange: this.handleSecondsChange,
-      options: rangeSeconds,
-      selected: time.second()
-    });
-  }
-
-  renderAMPMPanel() {
-    const {
-      time
-    } = this.state;
-    const {
-      use12Hours,
-      hasHeader,
-      disabledTimes
-    } = this.props;
-    if (!use12Hours) return null;
-    let meridiemSelected = !isAM(time) ? 'pm' : 'am';
-
-    if (disabledTimes && disabledTimes.to && meridiemSelected === 'am') {
-      meridiemSelected = disabledTimes.to.hour >= 12 ? 'pm' : 'am';
-
-      if (meridiemSelected === 'am' && time.hour() > 12) {
-        this.handleAMPMChange('am');
-      }
-
-      if (meridiemSelected === 'pm' && time.hour() <= 12) {
-        this.handleAMPMChange('pm');
-      }
-    }
-
-    return /*#__PURE__*/_jsx(PickerPanel, {
-      type: "meridiem",
-      hasHeader: hasHeader,
-      header: "",
-      onChange: this.handleAMPMChange,
-      options: [{
-        value: 'am',
-        label: 'am'
-      }, {
-        value: 'pm',
-        label: 'pm'
-      }],
-      selected: meridiemSelected,
-      disabledTimes: disabledTimes
-    });
-  }
-
-  render() {
-    const {
-      hasHeaderDisplay
-    } = this.props;
-    return /*#__PURE__*/_jsx(TimePickerContainer, {}, void 0, hasHeaderDisplay && this.renderHeader(), /*#__PURE__*/_jsx(TimePickerPanelContainer, {}, void 0, this.renderHoursPanel(), this.renderMinutesPanel(), this.renderSecondsPanel(), this.renderAMPMPanel()));
-  }
-
-}
-
-TimePickerMenu.defaultProps = {
-  time: moment(),
-  hasHeader: false,
-  use12Hours: true,
-  showSeconds: true,
-  showMinutes: true,
-  showHours: true,
-  disabledTimes: undefined,
-  onTimeChange: () => null
-};
-
-export { TimePickerMenu, TimePickerMenu as default };

package/esm/index.js

@@ -1,4 +0,0 @@
-export { DSTimePicker, DSTimePickerWithSchema, DSTimePicker as default } from './DSTimePicker.js';
-export { TimePickerMenu } from './TimePickerMenu.js';
-export { DSTimePickerMenu } from './DSTimePickerMenu.js';
-export { convertTimeString } from './utils.js';

package/esm/moveElementOnScroll.js

@@ -1,70 +0,0 @@
-function MoveElementOnScroll(element, _ref) {
-  let {
-    container,
-    min = 0,
-    max = element.offsetHeight,
-    speed = 1,
-    smooth = 2,
-    onUpdate = () => null,
-    onEndScroll = () => null
-  } = _ref;
-  let moving = false;
-  let pos = min;
-  let lastPos = pos; // todo: move this to utils if we finally need it
-
-  const requestFrame = function () {
-    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (func) {
-      window.setTimeout(func, 1000 / 50);
-    };
-  }();
-
-  function update() {
-    moving = true;
-    const delta = (pos - lastPos) / smooth;
-    lastPos += delta;
-
-    if (Math.abs(delta) > 0.7) {
-      requestFrame(() => {
-        onUpdate(lastPos, delta);
-        update();
-      });
-    } else {
-      onEndScroll(pos);
-      moving = false;
-    }
-  }
-
-  function scrolling(e) {
-    e.preventDefault(); // disable default scrolling
-
-    let delta = e.delta || e.wheelDelta;
-
-    if (delta === undefined) {
-      // for firefox
-      delta = -e.detail;
-      delta *= 10 * speed;
-    }
-
-    pos += -delta * speed;
-    pos = Math.max(min, Math.min(pos, max)); // limit scrolling
-
-    if (!moving) {
-      update();
-    }
-  }
-
-  container.addEventListener('mousewheel', scrolling, false);
-  container.addEventListener('DOMMouseScroll', scrolling, false);
-  return {
-    unsubscribe: () => {
-      container.removeEventListener('mousewheel', scrolling);
-      container.removeEventListener('DOMMouseScroll', scrolling);
-    },
-    updatePosition: newPos => {
-      pos = -newPos;
-      lastPos = -pos;
-    }
-  };
-}
-
-export { MoveElementOnScroll, MoveElementOnScroll as default };

package/esm/utils.js

@@ -1,31 +0,0 @@
-const validateIndex = (index, options) => {
-  if (index < 0) return 0;
-  if (index >= options.length) return options.length - 1;
-  return index;
-};
-const getOptionIndex = function (options, selectedOption) {
-  let valueProperty = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'value';
-  const index = options.findIndex(option => option[valueProperty] === selectedOption);
-  return validateIndex(index, options);
-};
-const isAM = time => time && time.hour() < 12;
-const convertTimeString = string => {
-  if (!string) return null;
-  let meridiem = 'AM';
-  if (string.toUpperCase().includes('PM')) meridiem = 'PM';
-  const arr = string.split(':');
-  let hour = parseInt(arr[0], 10);
-  if (meridiem === 'PM' && hour !== 12) hour += 12; // formats to 24
-
-  if (meridiem === 'AM' && hour === 12) hour = 0;
-  if (meridiem === 'PM' && hour === 12) hour = 12;
-  const min = parseInt(arr[1], 10);
-  const sec = parseInt(arr[2], 10);
-  return {
-    hour,
-    min,
-    sec
-  };
-};
-
-export { convertTimeString, getOptionIndex, isAM, validateIndex };