Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[datetime2] feat(DateRangeInput2): support 'fill' prop #5715

Merged
merged 2 commits into from
Nov 4, 2022
Merged

[datetime2] feat(DateRangeInput2): support 'fill' prop #5715

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1d9140d
WIP add DateRangeInput2 fill prop
adidahiya Nov 4, 2022
8e8e49f
[datetime2] feat(DateRangeInput2): support 'fill' prop
adidahiya Nov 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions packages/datetime2/src/components/date-range-input2/dateRangeInput2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,11 @@ export interface DateRangeInput2Props extends DatePickerBaseProps, DateFormatPro
*/
disabled?: boolean;

/**
* Whether the component should take up the full width of its container.
*/
fill?: boolean;

/**
* Props to pass to the end-date [input group](#core/components/text-inputs.input-group).
* `disabled` and `value` will be ignored in favor of the top-level props on this component.
Expand Down Expand Up @@ -369,13 +374,15 @@ export class DateRangeInput2 extends AbstractPureComponent2<DateRangeInput2Props
private renderTarget =
// N.B. pull out `isOpen` so that it's not forwarded to the DOM.
({ isOpen, ...targetProps }: Popover2TargetProps & React.HTMLProps<unknown>) => {
const { popoverProps = {} } = this.props;
const { fill, popoverProps = {} } = this.props;
const { targetTagName = "div" } = popoverProps;
return React.createElement(
targetTagName,
{
...targetProps,
className: classNames(CoreClasses.CONTROL_GROUP, targetProps.className),
className: classNames(CoreClasses.CONTROL_GROUP, targetProps.className, {
[CoreClasses.FILL]: fill,
}),
},
this.renderInputGroup(Boundary.START),
this.renderInputGroup(Boundary.END),
Expand All @@ -390,6 +397,7 @@ export class DateRangeInput2 extends AbstractPureComponent2<DateRangeInput2Props
<InputGroup
autoComplete="off"
disabled={inputProps?.disabled ?? this.props.disabled}
fill={this.props.fill}
{...inputProps}
intent={this.isInputInErrorState(boundary) ? Intent.DANGER : inputProps?.intent}
inputRef={this.getInputRef(boundary)}
Expand Down
6 changes: 3 additions & 3 deletions ...c/examples/core-examples/hotkeyTester.tsx → ...les/core-examples/hotkeyTesterExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@ import * as React from "react";
import { Code, getKeyComboString, KeyCombo } from "@blueprintjs/core";
import { Example, ExampleProps } from "@blueprintjs/docs-theme";

export interface IHotkeyTesterState {
export interface HotkeyTesterState {
combo: string;
}

export class HotkeyTester extends React.PureComponent<ExampleProps, IHotkeyTesterState> {
public state: IHotkeyTesterState = {
export class HotkeyTesterExample extends React.PureComponent<ExampleProps, HotkeyTesterState> {
public state: HotkeyTesterState = {
combo: null,
};

Expand Down
2 changes: 1 addition & 1 deletion packages/docs-app/src/examples/core-examples/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export * from "./fileInputExample";
export * from "./focusExample";
export * from "./formGroupExample";
export * from "./hotkeyPiano";
export * from "./hotkeyTester";
export * from "./hotkeyTesterExample";
export { HotkeysTarget2Example } from "./hotkeysTarget2Example";
export * from "./iconExample";
export * from "./menuExample";
Expand Down
60 changes: 38 additions & 22 deletions packages/docs-app/src/examples/datetime2-examples/dateInput2Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
import classNames from "classnames";
import * as React from "react";

import { Classes, H5, Icon, Switch, Tag } from "@blueprintjs/core";
import { Classes, Code, H5, Icon, Switch, Tag } from "@blueprintjs/core";
import { DateFormatProps, TimePrecision } from "@blueprintjs/datetime";
import { DateInput2 } from "@blueprintjs/datetime2";
import { Example, ExampleProps, handleBooleanChange, handleValueChange } from "@blueprintjs/docs-theme";
Expand Down Expand Up @@ -139,10 +139,12 @@ export class DateInput2Example extends React.PureComponent<ExampleProps, DateInp

return (
<>
<H5>Props</H5>
<H5>Behavior props</H5>
<PropCodeTooltip snippet={`closeOnSelection={${closeOnSelection.toString()}}`}>
<Switch label="Close on selection" checked={closeOnSelection} onChange={this.toggleSelection} />
</PropCodeTooltip>

<H5>Date picker props</H5>
<PropCodeTooltip snippet={`shortcuts={${shortcuts.toString()}}`}>
<Switch
checked={shortcuts}
Expand All @@ -159,19 +161,35 @@ export class DateInput2Example extends React.PureComponent<ExampleProps, DateInp
onChange={this.toggleActionsBar}
/>
</PropCodeTooltip>
<PropCodeTooltip snippet={`reverseMonthAndYearMenus={${reverse.toString()}}`}>
<Switch label="Reverse month and year menus" checked={reverse} onChange={this.toggleReverseMenus} />
</PropCodeTooltip>

<H5>Input appearance props</H5>
<PropCodeTooltip snippet={`disabled={${disabled.toString()}}`}>
<Switch label="Disabled" checked={disabled} onChange={this.toggleDisabled} />
</PropCodeTooltip>
<PropCodeTooltip snippet={`fill={${fill.toString()}}`}>
<Switch label="Fill container width" checked={fill} onChange={this.toggleFill} />
</PropCodeTooltip>
<PropCodeTooltip
content={
<>
<Code>rightElement</Code> is {showRightElement ? "defined" : "undefined"}
</>
}
>
<Switch label="Show right element" checked={showRightElement} onChange={this.toggleRightElement} />
</PropCodeTooltip>
<DateFnsFormatSelector format={format} onChange={this.handleFormatChange} />

<H5>Time picker props</H5>
<PrecisionSelect
allowNone={true}
label="Time precision"
onChange={this.handleTimePrecisionChange}
value={timePrecision}
/>

<H5>Appearance props</H5>
<Switch label="Disabled" checked={disabled} onChange={this.toggleDisabled} />
<Switch label="Fill" checked={fill} onChange={this.toggleFill} />
<PropCodeTooltip snippet={`reverseMonthAndYearMenus={${reverse.toString()}}`}>
<Switch label="Reverse month and year menus" checked={reverse} onChange={this.toggleReverseMenus} />
</PropCodeTooltip>
<PropCodeTooltip
snippet={`timePickerProps={{ showArrowButtons: ${showTimePickerArrows.toString()} }}`}
disabled={!isTimePickerShown}
Expand All @@ -194,32 +212,30 @@ export class DateInput2Example extends React.PureComponent<ExampleProps, DateInp
onChange={this.toggleUseAmPm}
/>
</PropCodeTooltip>
<Switch label="Show right element" checked={showRightElement} onChange={this.toggleRightElement} />
<DateFnsFormatSelector format={format} onChange={this.handleFormatChange} />

<H5 className={classNames({ [Classes.TEXT_DISABLED]: timePrecision === undefined })}>
TimezoneSelect props
Timezone select props
</H5>
<PropCodeTooltip
snippet={`disableTimezoneSelect={${disableTimezoneSelect.toString()}}`}
snippet={`showTimezoneSelect={${showTimezoneSelect.toString()}}`}
disabled={!isTimePickerShown}
>
<Switch
label="Disable timezone select"
checked={disableTimezoneSelect}
label={`Show timezone${disableTimezoneSelect ? "" : " select"}`}
checked={showTimezoneSelect}
disabled={!isTimePickerShown}
onChange={this.toggleDisableTimezoneSelect}
onChange={this.toggleShowTimezoneSelect}
/>
</PropCodeTooltip>
<PropCodeTooltip
snippet={`showTimezoneSelect={${showTimezoneSelect.toString()}}`}
disabled={!isTimePickerShown}
snippet={`disableTimezoneSelect={${disableTimezoneSelect.toString()}}`}
disabled={!isTimePickerShown || !showTimezoneSelect}
>
<Switch
label="Show timezone select"
checked={showTimezoneSelect}
disabled={!isTimePickerShown}
onChange={this.toggleShowTimezoneSelect}
label="Disable timezone select"
checked={disableTimezoneSelect}
disabled={!isTimePickerShown || !showTimezoneSelect}
onChange={this.toggleDisableTimezoneSelect}
/>
</PropCodeTooltip>
</>
Expand Down
124 changes: 80 additions & 44 deletions packages/docs-app/src/examples/datetime2-examples/dateRangeInput2Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { DateFormatProps, DateRange, TimePrecision } from "@blueprintjs/datetime
import { DateRangeInput2 } from "@blueprintjs/datetime2";
import { Example, ExampleProps, handleBooleanChange, handleValueChange } from "@blueprintjs/docs-theme";

import { PropCodeTooltip } from "../../common/propCodeTooltip";
import { PrecisionSelect } from "../datetime-examples/common/precisionSelect";
import { DateFnsDateRange } from "./dateFnsDate";
import { DATE_FNS_FORMATS, DateFnsFormatSelector } from "./dateFnsFormatSelector";
Expand All @@ -38,6 +39,7 @@ export interface DateRangeInput2ExampleState {
contiguousCalendarMonths: boolean;
disabled: boolean;
enableTimePicker: boolean;
fill: boolean;
format: DateFormatProps;
range: DateRange;
reverseMonthAndYearMenus: boolean;
Expand All @@ -56,6 +58,7 @@ export class DateRangeInput2Example extends React.PureComponent<ExampleProps, Da
contiguousCalendarMonths: true,
disabled: false,
enableTimePicker: false,
fill: false,
format: DATE_FNS_FORMATS[0],
range: [null, null],
reverseMonthAndYearMenus: false,
Expand All @@ -73,6 +76,8 @@ export class DateRangeInput2Example extends React.PureComponent<ExampleProps, Da

private toggleDisabled = handleBooleanChange(disabled => this.setState({ disabled }));

private toggleFill = handleBooleanChange(fill => this.setState({ fill }));

private toggleReverseMonthAndYearMenus = handleBooleanChange(reverseMonthAndYearMenus =>
this.setState({ reverseMonthAndYearMenus }),
);
Expand Down Expand Up @@ -128,65 +133,96 @@ export class DateRangeInput2Example extends React.PureComponent<ExampleProps, Da
}

protected renderOptions() {
const {
allowSingleDayRange,
closeOnSelection,
contiguousCalendarMonths,
enableTimePicker,
disabled,
fill,
reverseMonthAndYearMenus,
selectAllOnFocus,
shortcuts,
showFooterElement,
showTimeArrowButtons,
singleMonthOnly,
timePrecision,
} = this.state;
return (
<>
<H5>Props</H5>
<Switch
checked={this.state.allowSingleDayRange}
label="Allow single day range"
onChange={this.toggleSingleDay}
/>
<Switch
checked={this.state.singleMonthOnly}
label="Single month only"
onChange={this.toggleSingleMonth}
/>
<Switch checked={this.state.shortcuts} label="Show shortcuts" onChange={this.toggleShortcuts} />
<H5>Behavior props</H5>
<PropCodeTooltip snippet={`closeOnSelection={${closeOnSelection.toString()}}`}>
<Switch checked={closeOnSelection} label="Close on selection" onChange={this.toggleSelection} />
</PropCodeTooltip>
<PropCodeTooltip snippet={`selectAllOnFocus={${selectAllOnFocus.toString()}}`}>
<Switch
checked={selectAllOnFocus}
label="Select all text on input focus"
onChange={this.toggleSelectAllOnFocus}
/>
</PropCodeTooltip>

<H5>Date range picker props</H5>
<PropCodeTooltip snippet={`shortcuts={${shortcuts.toString()}}`}>
<Switch checked={shortcuts} label="Show shortcuts" onChange={this.toggleShortcuts} />
</PropCodeTooltip>
<PropCodeTooltip snippet={`allowSingleDayRange={${allowSingleDayRange.toString()}}`}>
<Switch
checked={allowSingleDayRange}
label="Allow single day range"
onChange={this.toggleSingleDay}
/>
</PropCodeTooltip>
<PropCodeTooltip snippet={`singleMonthOnly={${singleMonthOnly.toString()}}`}>
<Switch checked={singleMonthOnly} label="Single month only" onChange={this.toggleSingleMonth} />
</PropCodeTooltip>
<PropCodeTooltip snippet={`contiguousCalendarMonths={${contiguousCalendarMonths.toString()}}`}>
<Switch
checked={contiguousCalendarMonths}
label="Constrain calendar to contiguous months"
onChange={this.toggleContiguous}
/>
</PropCodeTooltip>
<Switch
checked={this.state.closeOnSelection}
label="Close on selection"
onChange={this.toggleSelection}
/>
<Switch
checked={this.state.contiguousCalendarMonths}
label="Constrain calendar to contiguous months"
onChange={this.toggleContiguous}
/>
<Switch checked={this.state.disabled} label="Disabled" onChange={this.toggleDisabled} />
<Switch
checked={this.state.selectAllOnFocus}
label="Select all on focus"
onChange={this.toggleSelectAllOnFocus}
/>
<Switch
checked={this.state.reverseMonthAndYearMenus}
checked={reverseMonthAndYearMenus}
label="Reverse month and year menus"
onChange={this.toggleReverseMonthAndYearMenus}
/>
<Switch
checked={this.state.showFooterElement}
checked={showFooterElement}
label="Show custom footer element"
onChange={this.toggleShowFooterElement}
/>
<Switch
checked={this.state.enableTimePicker}
label="Enable time picker"
onChange={this.toggleTimePicker}
/>
<Switch
disabled={!this.state.enableTimePicker}
checked={this.state.showTimeArrowButtons}
label="Show timepicker arrow buttons"
onChange={this.toggleTimepickerArrowButtons}
/>

<H5>Input appearance props</H5>
<PropCodeTooltip snippet={`disabled={${disabled.toString()}}`}>
<Switch checked={disabled} label="Disabled" onChange={this.toggleDisabled} />
</PropCodeTooltip>
<PropCodeTooltip snippet={`fill={${fill.toString()}}`}>
<Switch label="Fill container width" checked={fill} onChange={this.toggleFill} />
</PropCodeTooltip>
<DateFnsFormatSelector format={this.state.format} onChange={this.handleFormatChange} />

<H5>Time picker props</H5>
<Switch checked={enableTimePicker} label="Enable time picker" onChange={this.toggleTimePicker} />
<PrecisionSelect
allowNone={false}
disabled={!this.state.enableTimePicker}
disabled={!enableTimePicker}
label="Time precision"
onChange={this.handleTimePrecisionChange}
value={this.state.timePrecision}
value={timePrecision}
/>
<DateFnsFormatSelector key="Format" format={this.state.format} onChange={this.handleFormatChange} />
<PropCodeTooltip
snippet={`timePickerProps={{ showArrowButtons: ${showTimeArrowButtons.toString()} }}`}
disabled={!enableTimePicker}
>
<Switch
disabled={!enableTimePicker}
checked={showTimeArrowButtons}
label="Show timepicker arrow buttons"
onChange={this.toggleTimepickerArrowButtons}
/>
</PropCodeTooltip>
</>
);
}
Expand Down
Loading