[datetime] fix layout of TimePicker with second/ms precision (#5544)

palantir · Sep 23, 2022 · 7feccb3 · 7feccb3 · blueprint-bot · Sep 23, 2022
1 parent 6e7deef
commit 7feccb3
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 10 deletions.
diff --git a/packages/datetime/src/_daterangepicker.scss b/packages/datetime/src/_daterangepicker.scss
@@ -105,7 +105,7 @@
 .#{$ns}-daterangepicker-calendars {
   display: flex;
   flex-direction: row;
-  justify-content: space-evenly;
+  justify-content: space-around;
   width: 100%;
 }
 

diff --git a/packages/datetime/src/_timepicker.scss b/packages/datetime/src/_timepicker.scss
@@ -6,7 +6,6 @@
 @import "./common";
 
 $timepicker-input-row-height: $pt-grid-size * 3 !default;
-$timepicker-row-width: $pt-grid-size * 8 !default;
 // subtract two because of inset shadow
 $timepicker-input-row-inner-height: $timepicker-input-row-height - 2 !default;
 // helps focus states of inputs line up correctly
@@ -19,7 +18,6 @@ $timepicker-control-width: $pt-grid-size * 3.3 !default;
 
   .#{$ns}-timepicker-arrow-row {
     padding: $timepicker-row-padding;
-    width: $timepicker-row-width;
   }
 
   .#{$ns}-timepicker-arrow-button {
@@ -47,7 +45,6 @@ $timepicker-control-width: $pt-grid-size * 3.3 !default;
     line-height: $timepicker-input-row-inner-height;
     padding: $timepicker-row-padding;
     vertical-align: middle;
-    width: $timepicker-row-width;
   }
 
   .#{$ns}-timepicker-divider-text {

diff --git a/packages/docs-app/src/examples/datetime-examples/common/precisionSelect.tsx b/packages/docs-app/src/examples/datetime-examples/common/precisionSelect.tsx
@@ -14,12 +14,20 @@
  * limitations under the License.
  */
 
+import classNames from "classnames";
 import * as React from "react";
 
 import { Classes, HTMLSelect } from "@blueprintjs/core";
 import { TimePrecision } from "@blueprintjs/datetime";
 
 export interface PrecisionSelectProps {
+    /**
+     * Whether the select is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+
     /**
      * The precision-string option to display as selected.
      */
@@ -44,13 +52,17 @@ export interface PrecisionSelectProps {
 }
 
 export const PrecisionSelect: React.FC<PrecisionSelectProps> = props => (
-    <label className={Classes.LABEL}>
-        {props.label ?? "Precision"}
-        <HTMLSelect value={props.value} onChange={props.onChange}>
+    <label className={classNames(Classes.LABEL, { [Classes.DISABLED]: props.disabled })}>
+        {props.label}
+        <HTMLSelect value={props.value} onChange={props.onChange} disabled={props.disabled}>
             {props.allowNone && <option value="none">None</option>}
             <option value={TimePrecision.MINUTE}>Minute</option>
             <option value={TimePrecision.SECOND}>Second</option>
             <option value={TimePrecision.MILLISECOND}>Millisecond</option>
         </HTMLSelect>
     </label>
 );
+PrecisionSelect.defaultProps = {
+    disabled: false,
+    label: "Precision",
+};
diff --git a/packages/docs-app/src/examples/datetime2-examples/dateRangeInput2Example.tsx b/packages/docs-app/src/examples/datetime2-examples/dateRangeInput2Example.tsx
@@ -19,8 +19,9 @@ import * as React from "react";
 import { Callout, Code, H5, Switch } from "@blueprintjs/core";
 import { DateFormatProps, DateRange, TimePrecision } from "@blueprintjs/datetime";
 import { DateRangeInput2 } from "@blueprintjs/datetime2";
-import { Example, ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme";
+import { Example, ExampleProps, handleBooleanChange, handleValueChange } from "@blueprintjs/docs-theme";
 
+import { PrecisionSelect } from "../datetime-examples/common/precisionSelect";
 import { DateFnsDateRange } from "./dateFnsDate";
 import { DATE_FNS_FORMATS, DateFnsFormatSelector } from "./dateFnsFormatSelector";
 
@@ -45,6 +46,7 @@ export interface DateRangeInput2ExampleState {
     showFooterElement: boolean;
     showTimeArrowButtons: boolean;
     singleMonthOnly: boolean;
+    timePrecision: TimePrecision | undefined;
 }
 
 export class DateRangeInput2Example extends React.PureComponent<ExampleProps, DateRangeInput2ExampleState> {
@@ -62,6 +64,7 @@ export class DateRangeInput2Example extends React.PureComponent<ExampleProps, Da
         showFooterElement: false,
         showTimeArrowButtons: false,
         singleMonthOnly: false,
+        timePrecision: TimePrecision.MINUTE,
     };
 
     private toggleContiguous = handleBooleanChange(contiguous => {
@@ -92,8 +95,20 @@ export class DateRangeInput2Example extends React.PureComponent<ExampleProps, Da
         this.setState({ showTimeArrowButtons }),
     );
 
+    private handleTimePrecisionChange = handleValueChange((timePrecision: TimePrecision | "none") =>
+        this.setState({ timePrecision: timePrecision === "none" ? undefined : timePrecision }),
+    );
+
     public render() {
-        const { enableTimePicker, format, range, showFooterElement, showTimeArrowButtons, ...spreadProps } = this.state;
+        const {
+            enableTimePicker,
+            format,
+            range,
+            showFooterElement,
+            showTimeArrowButtons,
+            timePrecision,
+            ...spreadProps
+        } = this.state;
         return (
             <Example options={this.renderOptions()} {...this.props}>
                 <DateRangeInput2
@@ -103,7 +118,7 @@ export class DateRangeInput2Example extends React.PureComponent<ExampleProps, Da
                     footerElement={showFooterElement ? exampleFooterElement : undefined}
                     timePickerProps={
                         enableTimePicker
-                            ? { precision: TimePrecision.MINUTE, showArrowButtons: showTimeArrowButtons }
+                            ? { precision: timePrecision, showArrowButtons: showTimeArrowButtons }
                             : undefined
                     }
                 />
@@ -164,6 +179,13 @@ export class DateRangeInput2Example extends React.PureComponent<ExampleProps, Da
                     label="Show timepicker arrow buttons"
                     onChange={this.toggleTimepickerArrowButtons}
                 />
+                <PrecisionSelect
+                    allowNone={false}
+                    disabled={!this.state.enableTimePicker}
+                    label="Time precision"
+                    onChange={this.handleTimePrecisionChange}
+                    value={this.state.timePrecision}
+                />
                 <DateFnsFormatSelector key="Format" format={this.state.format} onChange={this.handleFormatChange} />
             </>
         );