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

package/cjs/TimePickerDropdown.js

@@ -1,53 +0,0 @@
-'use strict';
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('react');
-var dsIcons = require('@elliemae/ds-icons');
-var DSButton = require('@elliemae/ds-button');
-var DSPopper = require('@elliemae/ds-popper');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
-var DSPopper__default = /*#__PURE__*/_interopDefaultLegacy(DSPopper);
-
-var _RecentDocuments;
-
-const TimePickerDropdown = _ref => {
-  let {
-    disabled = false,
-    onClick,
-    onOpen,
-    isOpen,
-    menu,
-    zIndex,
-    blockName,
-    placement
-  } = _ref;
-  return /*#__PURE__*/_jsx__default["default"](DSPopper__default["default"], {
-    blockName: blockName,
-    placement: placement,
-    contentComponent: menu,
-    isOpen: isOpen,
-    onOpen: onOpen,
-    modifiers: {
-      preventOverflow: {
-        enabled: true,
-        padding: 0,
-        boundariesElement: 'window'
-      }
-    },
-    showArrow: false,
-    triggerComponent: /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
-      buttonType: "secondary",
-      disabled: disabled,
-      icon: _RecentDocuments || (_RecentDocuments = /*#__PURE__*/_jsx__default["default"](dsIcons.RecentDocuments, {})),
-      iconSize: "s",
-      onClick: onClick
-    }),
-    zIndex: zIndex
-  });
-};
-
-module.exports = TimePickerDropdown;

package/cjs/TimePickerImpl.js

@@ -1,175 +0,0 @@
-'use strict';
-
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var _jsx = require('@babel/runtime/helpers/jsx');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var React = require('react');
-var moment = require('moment');
-var memoizeOne = require('memoize-one');
-var dsUtilities = require('@elliemae/ds-utilities');
-var dsClassnames = require('@elliemae/ds-classnames');
-var dsForm = require('@elliemae/ds-form');
-var TimePickerMenu = require('./TimePickerMenu.js');
-var TimePickerDropdown = require('./TimePickerDropdown.js');
-var utils = require('./utils.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
-var memoizeOne__default = /*#__PURE__*/_interopDefaultLegacy(memoizeOne);
-
-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__default["default"](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 = dsClassnames.aggregatedClasses(dsForm.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] = React.useState();
-  const [isMenuOpened, setIsMenuOpened] = React.useState(false);
-  const [focusedColumn, setFocusedColumn] = React.useState(null);
-  const timePickerRef = React.useRef();
-  React.useEffect(() => {
-    if (moment__default["default"](value).isValid()) setTime(moment__default["default"](value));else if (value === null) setTime(undefined);
-  }, [value]);
-  React.useEffect(() => {
-    window.addEventListener('click', handleClickOutside, false);
-    return () => window.removeEventListener('click', handleClickOutside, false);
-  }, []);
-  React.useEffect(() => {
-    window.addEventListener('keydown', handleKeyDown, false);
-    return () => window.removeEventListener('keydown', handleKeyDown, false);
-  }, []);
-  React.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__default["default"](newTime));
-    onChange(moment__default["default"](newTime));
-  };
-
-  const handleInputChange = newTime => {
-    setTime(newTime);
-    onChange(newTime);
-  };
-
-  const handleMenuOpen = isOpen => {
-    onOpen(isOpen);
-    setIsMenuOpened(isOpen);
-    if (!isOpen) setFocusedColumn(null);
-  };
-
-  const getVisibleTimePanels = memoizeOne__default["default"](format => dsUtilities.getVisibleTimeByFormat(format));
-  const timePickerBlockName = dsClassnames.convertPropToCssClassName(blockName);
-  const visiblePanels = getVisibleTimePanels(format);
-  const disabledTimeRange = disabledTimes && {
-    from: utils.convertTimeString(disabledTimes.from),
-    to: utils.convertTimeString(disabledTimes.to)
-  };
-  return /*#__PURE__*/_jsx__default["default"](TimePickerContainer, {
-    className: "".concat(className, " variant-").concat(!disabled ? 'default' : 'disabled'),
-    containerProps: containerProps,
-    disabled: disabled,
-    rightAddon: /*#__PURE__*/_jsx__default["default"](TimePickerDropdown, {
-      blockName: timePickerBlockName,
-      disabled: disabled,
-      isOpen: isMenuOpened,
-      zIndex: zIndex,
-      placement: placement,
-      onOpen: handleMenuOpen,
-      onClick: e => {
-        e.preventDefault();
-        handleMenuOpen(!isMenuOpened);
-      },
-      menu: /*#__PURE__*/jsxRuntime.jsx("div", {
-        ref: timePickerRef,
-        children: /*#__PURE__*/jsxRuntime.jsx(TimePickerMenu.TimePickerMenu, _objectSpread({
-          disabled: disabled,
-          disabledTimes: disabledTimeRange,
-          format: format,
-          hasHeader: hasHeader,
-          hasHeaderDisplay: hasHeaderDisplay,
-          onTimeChange: handlePickerChange,
-          minutesInterval: minutesInterval,
-          time: time
-        }, visiblePanels))
-      })
-    })
-  }, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSInput, {
-    customInputType: _ref3 => {
-      let {
-        onChange: handleChange
-      } = _ref3,
-          restInputProps = _objectWithoutProperties__default["default"](_ref3, _excluded);
-
-      return /*#__PURE__*/jsxRuntime.jsx(dsForm.TimeInputImpl, _objectSpread({
-        clearable: true,
-        disabled: disabled,
-        format: format,
-        onChange: handleChange
-      }, restInputProps));
-    },
-    isShowElipsisActive: false,
-    disabled: disabled,
-    onChange: handleInputChange,
-    value: time
-  }));
-};
-
-module.exports = TimePickerImpl;

package/cjs/TimePickerMenu.js

@@ -1,312 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/esnext.async-iterator.map.js');
-require('core-js/modules/esnext.iterator.map.js');
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var React = require('react');
-var dsClassnames = require('@elliemae/ds-classnames');
-var moment = require('moment');
-var dsUtilities = require('@elliemae/ds-utilities');
-var utils = require('./utils.js');
-var PickerPanel = require('./PickerPanel.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
-
-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__default["default"](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 = dsClassnames.aggregatedClasses('div')(blockName);
-const TimePickerHeader = dsClassnames.aggregatedClasses('div')(blockName, 'header');
-const TimePickerPanelContainer = dsClassnames.aggregatedClasses('div')(blockName, 'panel-container');
-
-const generateOption = format => option => ({
-  value: option,
-  label: typeof format === 'function' ? format(option) : option
-});
-
-class TimePickerMenu extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.renderHeader = () => {
-      const {
-        time
-      } = this.state;
-      return /*#__PURE__*/_jsx__default["default"](TimePickerHeader, {}, void 0, time.format('hh:mma'));
-    };
-
-    this.state = {
-      time: moment__default["default"](props.time || '', props.format) || moment__default["default"]()
-    };
-    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__default["default"](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 (!utils.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 ? dsUtilities.range(1, 13) : dsUtilities.range(24);
-    const hoursOptions = rangeHours.map(generateOption(withLeadingZeros && dsUtilities.addLeadingZeros(2)));
-    return /*#__PURE__*/_jsx__default["default"](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 = dsUtilities.range(0, 60, minutesInterval).map(generateOption(withLeadingZeros && dsUtilities.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__default["default"](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 = dsUtilities.range(60).map(generateOption(withLeadingZeros && dsUtilities.addLeadingZeros(2)));
-    return /*#__PURE__*/_jsx__default["default"](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 = !utils.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__default["default"](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__default["default"](TimePickerContainer, {}, void 0, hasHeaderDisplay && this.renderHeader(), /*#__PURE__*/_jsx__default["default"](TimePickerPanelContainer, {}, void 0, this.renderHoursPanel(), this.renderMinutesPanel(), this.renderSecondsPanel(), this.renderAMPMPanel()));
-  }
-
-}
-
-TimePickerMenu.defaultProps = {
-  time: moment__default["default"](),
-  hasHeader: false,
-  use12Hours: true,
-  showSeconds: true,
-  showMinutes: true,
-  showHours: true,
-  disabledTimes: undefined,
-  onTimeChange: () => null
-};
-
-exports.TimePickerMenu = TimePickerMenu;
-exports["default"] = TimePickerMenu;

package/cjs/index.js

@@ -1,17 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var DSTimePicker = require('./DSTimePicker.js');
-var TimePickerMenu = require('./TimePickerMenu.js');
-var DSTimePickerMenu = require('./DSTimePickerMenu.js');
-var utils = require('./utils.js');
-
-
-
-exports.DSTimePicker = DSTimePicker.DSTimePicker;
-exports.DSTimePickerWithSchema = DSTimePicker.DSTimePickerWithSchema;
-exports["default"] = DSTimePicker.DSTimePicker;
-exports.TimePickerMenu = TimePickerMenu.TimePickerMenu;
-exports.DSTimePickerMenu = DSTimePickerMenu.DSTimePickerMenu;
-exports.convertTimeString = utils.convertTimeString;

package/cjs/moveElementOnScroll.js

@@ -1,75 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-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;
-    }
-  };
-}
-
-exports.MoveElementOnScroll = MoveElementOnScroll;
-exports["default"] = MoveElementOnScroll;

package/cjs/utils.js

@@ -1,38 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-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
-  };
-};
-
-exports.convertTimeString = convertTimeString;
-exports.getOptionIndex = getOptionIndex;
-exports.isAM = isAM;
-exports.validateIndex = validateIndex;