@elliemae/ds-time-picker 2.3.0-alpha.8 → 2.3.0-next.2

package/cjs/TimePickerImpl.js

@@ -0,0 +1,175 @@
+'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

@@ -0,0 +1,312 @@
+'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

@@ -0,0 +1,17 @@
+'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

@@ -0,0 +1,75 @@
+'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

@@ -0,0 +1,38 @@
+'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;