Skip to content

Commit

Permalink
[EuiSuperDatePicker] add showRefreshOnly prop (elastic#1412)
Browse files Browse the repository at this point in the history
* [EuiSuperDatePicker] add showRefreshOnly prop

* showRefreshOnly design updates (#4)

* rename showRefreshOnly to isAutoRefreshOnly, add description for prop

* changelog
  • Loading branch information
nreese authored Jan 8, 2019
1 parent 4a351c1 commit a20048f
Show file tree
Hide file tree
Showing 14 changed files with 364 additions and 39 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
- Added `onBlur` prop to `EuiComboBox` ([#1400](https://github.com/elastic/eui/pull/1400))
- Added `initialFocus` prop typedefs to `EuiModal` and `EuiPopover` ([#1410](https://github.com/elastic/eui/pull/1410))
- Updated `gisApp` icon ([#1413](https://github.com/elastic/eui/pull/1413))
- Added `isAutoRefreshOnly` prop to `EuiSuperDatePicker` ([#1412](https://github.com/elastic/eui/pull/1412))

## [`6.2.0`](https://github.com/elastic/eui/tree/v6.2.0)

Expand Down
4 changes: 4 additions & 0 deletions src-docs/src/views/date_picker/date_picker_example.js
Original file line number Diff line number Diff line change
Expand Up @@ -298,6 +298,10 @@ export const DatePickerExample = {
to immediately invoke <EuiCode>onTimeChange</EuiCode>{' '}
for all <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> changes.
</p>
<p>
Set <EuiCode>isAutoRefreshOnly</EuiCode> to <EuiCode>true </EuiCode> to limit the component to only display auto refresh content.
This is useful in cases where there is no time data but auto-refresh configuration is still desired.
</p>
</div>
),
demo: <SuperDatePicker />,
Expand Down
65 changes: 48 additions & 17 deletions src-docs/src/views/date_picker/super_date_picker.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export default class extends Component {
recentlyUsedRanges: [],
isLoading: false,
showUpdateButton: true,
isAutoRefreshOnly: false,
start: 'now-30m',
end: 'now',
}
Expand Down Expand Up @@ -60,13 +61,55 @@ export default class extends Component {
}));
}

toggleShowRefreshOnly = () => {
this.setState(prevState => ({
isAutoRefreshOnly: !prevState.isAutoRefreshOnly,
}));
}

renderTimeRange = () => {
if (this.state.isAutoRefreshOnly) {
return null;
}

return (
<Fragment>
<EuiFormRow
label="start"
>
<EuiFieldText
readOnly
value={this.state.start}
/>
</EuiFormRow>
<EuiFormRow
label="end"
>
<EuiFieldText
readOnly
value={this.state.end}
/>
</EuiFormRow>
</Fragment>
);
}

render() {
return (
<Fragment>
<EuiSwitch
label="Show apply button"
onChange={this.toggleShowApplyButton}
checked={this.state.showUpdateButton}
checked={!this.state.isAutoRefreshOnly && this.state.showUpdateButton}
disabled={this.state.isAutoRefreshOnly}
/>

&emsp;

<EuiSwitch
label="Is auto-refresh only"
onChange={this.toggleShowRefreshOnly}
checked={this.state.isAutoRefreshOnly}
/>
<EuiSpacer />

Expand All @@ -80,24 +123,12 @@ export default class extends Component {
onRefreshChange={this.onRefreshChange}
recentlyUsedRanges={this.state.recentlyUsedRanges}
showUpdateButton={this.state.showUpdateButton}
isAutoRefreshOnly={this.state.isAutoRefreshOnly}
/>

<EuiFormRow
label="start"
>
<EuiFieldText
readOnly
value={this.state.start}
/>
</EuiFormRow>
<EuiFormRow
label="end"
>
<EuiFieldText
readOnly
value={this.state.end}
/>
</EuiFormRow>
<EuiSpacer />

{this.renderTimeRange()}
</Fragment>
);
}
Expand Down
4 changes: 4 additions & 0 deletions src/components/date_picker/_date_picker_range.scss
Original file line number Diff line number Diff line change
Expand Up @@ -53,3 +53,7 @@
padding-right: $euiFormControlPadding / 2;
}
}

.euiDatePickerRange--readOnly {
background: $euiFormBackgroundDisabledColor;
}
4 changes: 4 additions & 0 deletions src/components/date_picker/date_picker_range.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,15 @@ export const EuiDatePickerRange = ({
iconType,
fullWidth,
isCustom,
readOnly,
...rest
}) => {

const classes = classNames(
'euiDatePickerRange',
{
'euiDatePickerRange--fullWidth': fullWidth,
'euiDatePickerRange--readOnly': readOnly,
},
className
);
Expand All @@ -47,11 +49,13 @@ export const EuiDatePickerRange = ({
startControl = cloneElement(startDateControl, {
showIcon: false,
fullWidth: fullWidth,
readOnly: readOnly,
});

endControl = cloneElement(endDateControl, {
showIcon: false,
fullWidth: fullWidth,
readOnly: readOnly,
});
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
}
dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
end="now"
isAutoRefreshOnly={false}
isPaused={true}
recentlyUsedRanges={Array []}
refreshInterval={0}
Expand Down Expand Up @@ -204,6 +205,7 @@ exports[`EuiSuperDatePicker isLoading 1`] = `
}
dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
end="now"
isAutoRefreshOnly={false}
isPaused={true}
recentlyUsedRanges={Array []}
refreshInterval={0}
Expand Down
27 changes: 27 additions & 0 deletions src/components/date_picker/super_date_picker/pretty_interval.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@

const MS_IN_SECOND = 1000;
const MS_IN_MINUTE = 60 * MS_IN_SECOND;
const MS_IN_HOUR = 60 * MS_IN_MINUTE;
const MS_IN_DAY = 24 * MS_IN_HOUR;

export function prettyInterval(isPaused, intervalInMs) {
if (isPaused || intervalInMs === 0) {
return 'Off';
} else if (intervalInMs < MS_IN_MINUTE) {
const intervalInSeconds = Math.round(intervalInMs / MS_IN_SECOND);
const units = intervalInSeconds > 1 ? 'seconds' : 'second';
return `${intervalInSeconds} ${units}`;
} else if (intervalInMs < MS_IN_HOUR) {
const intervalInMinutes = Math.round(intervalInMs / MS_IN_MINUTE);
const units = intervalInMinutes > 1 ? 'minutes' : 'minute';
return `${intervalInMinutes} ${units}`;
} else if (intervalInMs < MS_IN_DAY) {
const intervalInHours = Math.round(intervalInMs / MS_IN_HOUR);
const units = intervalInHours > 1 ? 'hours' : 'hour';
return `${intervalInHours} ${units}`;
}

const intervalInDays = Math.round(intervalInMs / MS_IN_DAY);
const units = intervalInDays > 1 ? 'days' : 'day';
return `${intervalInDays} ${units}`;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@

import { prettyInterval } from './pretty_interval';

const IS_NOT_PAUSED = false;
const IS_PAUSED = true;

test('Off', () => {
expect(prettyInterval(IS_NOT_PAUSED, 0)).toBe('Off');
expect(prettyInterval(IS_PAUSED, 1000)).toBe('Off');
});

test('seconds', () => {
expect(prettyInterval(IS_NOT_PAUSED, 1000)).toBe('1 second');
expect(prettyInterval(IS_NOT_PAUSED, 15000)).toBe('15 seconds');
});

test('minutes', () => {
expect(prettyInterval(IS_NOT_PAUSED, 60000)).toBe('1 minute');
expect(prettyInterval(IS_NOT_PAUSED, 1800000)).toBe('30 minutes');
});

test('hours', () => {
expect(prettyInterval(IS_NOT_PAUSED, 3600000)).toBe('1 hour');
expect(prettyInterval(IS_NOT_PAUSED, 43200000)).toBe('12 hours');
});

test('days', () => {
expect(prettyInterval(IS_NOT_PAUSED, 86400000)).toBe('1 day');
expect(prettyInterval(IS_NOT_PAUSED, 86400000 * 2)).toBe('2 days');
});
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`EuiSuperDatePicker is rendered 1`] = `
exports[`EuiQuickSelect is rendered 1`] = `
<React.Fragment>
<EuiFlexGroup
alignItems="center"
Expand Down Expand Up @@ -212,7 +212,7 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
</React.Fragment>
`;

exports[`EuiSuperDatePicker prevQuickSelect 1`] = `
exports[`EuiQuickSelect prevQuickSelect 1`] = `
<React.Fragment>
<EuiFlexGroup
alignItems="center"
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`EuiQuickSelectPopover is rendered 1`] = `
<EuiPopover
anchorPosition="downLeft"
button={
<EuiButtonEmpty
aria-label="Date quick select"
className="euiFormControlLayout__prepend"
color="primary"
data-test-subj="superDatePickerToggleQuickMenuButton"
iconSide="right"
iconType="arrowDown"
onClick={[Function]}
size="xs"
textProps={
Object {
"className": "euiQuickSelectPopover__buttonText",
}
}
type="button"
>
<EuiIcon
size="m"
type="calendar"
/>
</EuiButtonEmpty>
}
closePopover={[Function]}
hasArrow={true}
id="QuickSelectPopover"
isOpen={false}
ownFocus={true}
panelPaddingSize="m"
>
<div
className="euiQuickSelectPopover__content"
data-test-subj="superDatePickerQuickMenu"
>
<React.Fragment>
<EuiQuickSelect
applyTime={[Function]}
end="now"
prevQuickSelect={Object {}}
start="now-15m"
/>
<EuiCommonlyUsedTimeRanges
applyTime={[Function]}
commonlyUsedRanges={
Array [
Object {
"end": "now/d",
"label": "Today",
"start": "now/d",
},
]
}
/>
<EuiRecentlyUsed
applyTime={[Function]}
commonlyUsedRanges={
Array [
Object {
"end": "now/d",
"label": "Today",
"start": "now/d",
},
]
}
dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
recentlyUsedRanges={
Array [
Object {
"end": "now/d",
"label": "Today",
"start": "now/d",
},
]
}
/>
</React.Fragment>
<EuiRefreshInterval
applyRefreshInterval={[Function]}
isPaused={true}
refreshInterval={0}
/>
</div>
</EuiPopover>
`;

exports[`EuiQuickSelectPopover isAutoRefreshOnly 1`] = `
<EuiPopover
anchorPosition="downLeft"
button={
<EuiButtonEmpty
aria-label="Date quick select"
className="euiFormControlLayout__prepend"
color="primary"
data-test-subj="superDatePickerToggleQuickMenuButton"
iconSide="right"
iconType="arrowDown"
onClick={[Function]}
size="xs"
textProps={
Object {
"className": "euiQuickSelectPopover__buttonText",
}
}
type="button"
>
<EuiIcon
size="m"
type="clock"
/>
</EuiButtonEmpty>
}
closePopover={[Function]}
hasArrow={true}
id="QuickSelectPopover"
isOpen={false}
ownFocus={true}
panelPaddingSize="m"
>
<div
className="euiQuickSelectPopover__content"
data-test-subj="superDatePickerQuickMenu"
>
<EuiRefreshInterval
applyRefreshInterval={[Function]}
isPaused={true}
refreshInterval={0}
/>
</div>
</EuiPopover>
`;
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const defaultProps = {
start: 'now-15m',
end: 'now',
};
describe('EuiSuperDatePicker', () => {
describe('EuiQuickSelect', () => {
test('is rendered', () => {
const component = shallow(
<EuiQuickSelect
Expand Down
Loading

0 comments on commit a20048f

Please sign in to comment.