baseui 0.0.0-next-42b8311 → 0.0.0-next-7202ef9

package/es/timepicker/timepicker.js

@@ -152,24 +152,28 @@ class TimePicker extends React.Component {
     _defineProperty(this, "getTimeWindowInSeconds", step => {
       let {
         minTime: min,
-        maxTime: max
+        maxTime: max,
+        ignoreMinMaxDateComponent
       } = this.props;
-      let midnight = this.setTime(this.props.value, 0, 0, 0);
+      const dayStart = this.setTime(this.props.value, 0, 0, 0);
+      const dayEnd = this.setTime(this.props.value, 24, 0, 0);
 
-      if (!min) {
-        min = midnight;
+      if (!min || this.props.adapter.isBefore(min, dayStart) && !ignoreMinMaxDateComponent) {
+        min = dayStart;
+      } else {
+        min = this.setTime(this.props.value, this.props.adapter.getHours(min), this.props.adapter.getMinutes(min), this.props.adapter.getSeconds(min));
       }
 
-      if (!max) {
-        max = this.setTime(this.props.value, 24, 0, 0);
+      if (!max || this.props.adapter.isAfter(max, dayEnd) && !ignoreMinMaxDateComponent) {
+        max = dayEnd;
       } else {
-        // maxTime (if provided) should be inclusive, so add an extra step here
-        max = this.props.adapter.setSeconds(this.props.adapter.date(max), this.props.adapter.getSeconds(max) + step);
+        max = this.setTime(this.props.value, this.props.adapter.getHours(max), this.props.adapter.getMinutes(max), // maxTime (if provided) should be inclusive, so add an extra second here
+        this.props.adapter.getSeconds(max) + 1);
       }
 
       const minDate = this.props.adapter.toJsDate(min);
       const maxDate = this.props.adapter.toJsDate(max);
-      const midnightDate = this.props.adapter.toJsDate(midnight);
+      const midnightDate = this.props.adapter.toJsDate(dayStart);
       return {
         start: (minDate - midnightDate) / 1000,
         end: (maxDate - midnightDate) / 1000
@@ -248,7 +252,7 @@ class TimePicker extends React.Component {
         steps: steps,
         value: this.props.nullable ? undefined : {
           id: closestStep,
-          label: this.secondsToLabel(closestStep, undefined)
+          label: this.secondsToLabel(closestStep, this.props.format)
         }
       });
 
@@ -337,7 +341,8 @@ _defineProperty(TimePicker, "defaultProps", {
   format: '12',
   step: 900,
   creatable: false,
-  adapter: dateFnsAdapter
+  adapter: dateFnsAdapter,
+  ignoreMinMaxDateComponent: false
 });
 
 export default TimePicker;

package/esm/timepicker/timepicker.js

@@ -206,26 +206,31 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "getTimeWindowInSeconds", function (step) {
       var _this$props = _this.props,
           min = _this$props.minTime,
-          max = _this$props.maxTime;
+          max = _this$props.maxTime,
+          ignoreMinMaxDateComponent = _this$props.ignoreMinMaxDateComponent;
 
-      var midnight = _this.setTime(_this.props.value, 0, 0, 0);
+      var dayStart = _this.setTime(_this.props.value, 0, 0, 0);
 
-      if (!min) {
-        min = midnight;
+      var dayEnd = _this.setTime(_this.props.value, 24, 0, 0);
+
+      if (!min || _this.props.adapter.isBefore(min, dayStart) && !ignoreMinMaxDateComponent) {
+        min = dayStart;
+      } else {
+        min = _this.setTime(_this.props.value, _this.props.adapter.getHours(min), _this.props.adapter.getMinutes(min), _this.props.adapter.getSeconds(min));
       }
 
-      if (!max) {
-        max = _this.setTime(_this.props.value, 24, 0, 0);
+      if (!max || _this.props.adapter.isAfter(max, dayEnd) && !ignoreMinMaxDateComponent) {
+        max = dayEnd;
       } else {
-        // maxTime (if provided) should be inclusive, so add an extra step here
-        max = _this.props.adapter.setSeconds(_this.props.adapter.date(max), _this.props.adapter.getSeconds(max) + step);
+        max = _this.setTime(_this.props.value, _this.props.adapter.getHours(max), _this.props.adapter.getMinutes(max), // maxTime (if provided) should be inclusive, so add an extra second here
+        _this.props.adapter.getSeconds(max) + 1);
       }
 
       var minDate = _this.props.adapter.toJsDate(min);
 
       var maxDate = _this.props.adapter.toJsDate(max);
 
-      var midnightDate = _this.props.adapter.toJsDate(midnight);
+      var midnightDate = _this.props.adapter.toJsDate(dayStart);
 
       return {
         start: (minDate - midnightDate) / 1000,
@@ -312,7 +317,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           steps: steps,
           value: this.props.nullable ? undefined : {
             id: closestStep,
-            label: this.secondsToLabel(closestStep, undefined)
+            label: this.secondsToLabel(closestStep, this.props.format)
           }
         });
 
@@ -414,7 +419,8 @@ _defineProperty(TimePicker, "defaultProps", {
   format: '12',
   step: 900,
   creatable: false,
-  adapter: dateFnsAdapter
+  adapter: dateFnsAdapter,
+  ignoreMinMaxDateComponent: false
 });
 
 export default TimePicker;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "0.0.0-next-42b8311",
+  "version": "0.0.0-next-7202ef9",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",

package/timepicker/index.d.ts

@@ -22,6 +22,7 @@ export interface TimePickerProps {
   size?: SIZE[keyof SIZE];
   minTime?: Date;
   maxTime?: Date;
+  ignoreMinMaxDateComponent?: boolean;
 }
 export interface TimePickerState {
   steps: number[];

package/timepicker/timepicker.js

@@ -219,26 +219,31 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "getTimeWindowInSeconds", function (step) {
       var _this$props = _this.props,
           min = _this$props.minTime,
-          max = _this$props.maxTime;
+          max = _this$props.maxTime,
+          ignoreMinMaxDateComponent = _this$props.ignoreMinMaxDateComponent;
 
-      var midnight = _this.setTime(_this.props.value, 0, 0, 0);
+      var dayStart = _this.setTime(_this.props.value, 0, 0, 0);
 
-      if (!min) {
-        min = midnight;
+      var dayEnd = _this.setTime(_this.props.value, 24, 0, 0);
+
+      if (!min || _this.props.adapter.isBefore(min, dayStart) && !ignoreMinMaxDateComponent) {
+        min = dayStart;
+      } else {
+        min = _this.setTime(_this.props.value, _this.props.adapter.getHours(min), _this.props.adapter.getMinutes(min), _this.props.adapter.getSeconds(min));
       }
 
-      if (!max) {
-        max = _this.setTime(_this.props.value, 24, 0, 0);
+      if (!max || _this.props.adapter.isAfter(max, dayEnd) && !ignoreMinMaxDateComponent) {
+        max = dayEnd;
       } else {
-        // maxTime (if provided) should be inclusive, so add an extra step here
-        max = _this.props.adapter.setSeconds(_this.props.adapter.date(max), _this.props.adapter.getSeconds(max) + step);
+        max = _this.setTime(_this.props.value, _this.props.adapter.getHours(max), _this.props.adapter.getMinutes(max), // maxTime (if provided) should be inclusive, so add an extra second here
+        _this.props.adapter.getSeconds(max) + 1);
       }
 
       var minDate = _this.props.adapter.toJsDate(min);
 
       var maxDate = _this.props.adapter.toJsDate(max);
 
-      var midnightDate = _this.props.adapter.toJsDate(midnight);
+      var midnightDate = _this.props.adapter.toJsDate(dayStart);
 
       return {
         start: (minDate - midnightDate) / 1000,
@@ -325,7 +330,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
           steps: steps,
           value: this.props.nullable ? undefined : {
             id: closestStep,
-            label: this.secondsToLabel(closestStep, undefined)
+            label: this.secondsToLabel(closestStep, this.props.format)
           }
         });
 
@@ -427,7 +432,8 @@ _defineProperty(TimePicker, "defaultProps", {
   format: '12',
   step: 900,
   creatable: false,
-  adapter: _dateFnsAdapter.default
+  adapter: _dateFnsAdapter.default,
+  ignoreMinMaxDateComponent: false
 });
 
 var _default = TimePicker;

package/timepicker/timepicker.js.flow

@@ -34,6 +34,7 @@ class TimePicker<T = Date> extends React.Component<
     step: 900,
     creatable: false,
     adapter: dateFnsAdapter,
+    ignoreMinMaxDateComponent: false,
   };
   dateHelpers: DateHelpers<T>;
 
@@ -66,7 +67,7 @@ class TimePicker<T = Date> extends React.Component<
           ? undefined
           : {
               id: closestStep,
-              label: this.secondsToLabel(closestStep, undefined),
+              label: this.secondsToLabel(closestStep, this.props.format),
             },
       });
       if (this.props.value || (!this.props.nullable && !this.props.value)) {
@@ -200,24 +201,42 @@ class TimePicker<T = Date> extends React.Component<
   };
 
   getTimeWindowInSeconds = (step: number): {start: number, end: number} => {
-    let {minTime: min, maxTime: max} = this.props;
-    let midnight = this.setTime(this.props.value, 0, 0, 0);
-    if (!min) {
-      min = midnight;
+    let {minTime: min, maxTime: max, ignoreMinMaxDateComponent} = this.props;
+    const dayStart = this.setTime(this.props.value, 0, 0, 0);
+    const dayEnd = this.setTime(this.props.value, 24, 0, 0);
+
+    if (
+      !min ||
+      (this.props.adapter.isBefore(min, dayStart) && !ignoreMinMaxDateComponent)
+    ) {
+      min = dayStart;
+    } else {
+      min = this.setTime(
+        this.props.value,
+        this.props.adapter.getHours(min),
+        this.props.adapter.getMinutes(min),
+        this.props.adapter.getSeconds(min),
+      );
     }
-    if (!max) {
-      max = this.setTime(this.props.value, 24, 0, 0);
+
+    if (
+      !max ||
+      (this.props.adapter.isAfter(max, dayEnd) && !ignoreMinMaxDateComponent)
+    ) {
+      max = dayEnd;
     } else {
-      // maxTime (if provided) should be inclusive, so add an extra step here
-      max = this.props.adapter.setSeconds(
-        this.props.adapter.date(max),
-        this.props.adapter.getSeconds(max) + step,
+      max = this.setTime(
+        this.props.value,
+        this.props.adapter.getHours(max),
+        this.props.adapter.getMinutes(max),
+        // maxTime (if provided) should be inclusive, so add an extra second here
+        this.props.adapter.getSeconds(max) + 1,
       );
     }
 
     const minDate = this.props.adapter.toJsDate(min);
     const maxDate = this.props.adapter.toJsDate(max);
-    const midnightDate = this.props.adapter.toJsDate(midnight);
+    const midnightDate = this.props.adapter.toJsDate(dayStart);
     return {
       start: (minDate - midnightDate) / 1000,
       end: (maxDate - midnightDate) / 1000,

package/timepicker/types.js.flow

@@ -37,6 +37,15 @@ export type TimePickerPropsT<T = Date> = {
   size?: SizeT,
   minTime?: T,
   maxTime?: T,
+  /**
+   * There are two strategies available for setting min/max times. If the min/max datetimes are
+   * beyond the start/end times of the current value's date, Timepicker could either clamp the
+   * min/max time of the start/end of the day or it can ignore the min/max date components and
+   * only apply the time components. Each strategy has the potential to save developer time in
+   * avoiding the need to perform conversion before providing min/max datetimes to the component.
+   * By default the component will clamp the time window and setting this flag will ignore dates.
+   */
+  ignoreMinMaxDateComponent?: boolean,
 };
 export type TimePickerStateT = {
   /** List of times (in seconds) displayed in the dropdown menu. */
@@ -50,6 +59,7 @@ export type TimePickerDefaultPropsT = {
   step: 900,
   creatable: false,
   adapter: DateIOAdapter<Date>,
+  ignoreMinMaxDateComponent: false,
 };
 
 declare var __DEV__: boolean;