Skip to content

Commit

Permalink
Merge branch 'master' into responsive-tables
Browse files Browse the repository at this point in the history
  • Loading branch information
cchaos authored Feb 25, 2019
2 parents 9b644ac + 644fd63 commit 1a4ec33
Show file tree
Hide file tree
Showing 38 changed files with 1,861 additions and 445 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
## [`master`](https://github.com/elastic/eui/tree/master)

- Added `onRefresh` option for `EuiSuperDatePicker` ([#1577](https://github.com/elastic/eui/pull/1577))
- Converted `EuiToggle` to TypeScript ([#1570](https://github.com/elastic/eui/pull/1570))
- Added type definitions for `EuiButtonGroup`,`EuiButtonToggle`, `EuiFilterButton`, `EuiFilterGroup`, and `EuiFilterSelectItem` ([#1570](https://github.com/elastic/eui/pull/1570))
- Added `displayOnly` prop to EuiFormRow ([#1582](https://github.com/elastic/eui/pull/1582))
- Added an index.d.ts file for the date picker components, including `EuiDatePicker`, `EuiDatePickerRange`, and `EuiSuperDatePicker` ([#1574](https://github.com/elastic/eui/pull/1574))
- Added `mobileOptions` object prop for handling of all the mobile specific options of `EuiBasicTable` ([#1462](https://github.com/elastic/eui/pull/1462))
- Table headers now accept `React.node` types ([#1462](https://github.com/elastic/eui/pull/1462))

**Bug fixes**

- Fixed several bugs with `EuiRange` and `EuiDualRange` including sizing of inputs, tick placement, and the handling of invalid values ([#1580](https://github.com/elastic/eui/pull/1580))
- `EuiBasicTable` select all shows up on mobile ([#1462](https://github.com/elastic/eui/pull/1462))

**Breaking changes**
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@
"@types/enzyme": "^3.1.13",
"@types/jest": "^23.3.9",
"@types/react": "^16.3.0",
"@types/react-datepicker": "1.8.0",
"@types/react-is": "~16.3.0",
"@types/react-virtualized": "^9.18.6",
"@types/uuid": "^3.4.4",
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/date_picker/custom_input.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
EuiButton,
} from '../../../../src/components';

// Should be a component because the datepicker does some ref stuff behind the scenes
// Should be a component because the date picker does some ref stuff behind the scenes
// eslint-disable-next-line react/prefer-stateless-function
class ExampleCustomInput extends React.Component {

Expand Down
8 changes: 4 additions & 4 deletions src-docs/src/views/date_picker/date_picker_example.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const superDatePickerSource = require('!!raw-loader!./super_date_picker');
const superDatePickerHtml = renderToHtml(SuperDatePicker);

export const DatePickerExample = {
title: 'DatePicker',
title: 'Date Picker',
sections: [{
source: [{
type: GuideSectionTypes.JS,
Expand All @@ -85,7 +85,7 @@ export const DatePickerExample = {
demo: <DatePicker />,
props: { EuiDatePicker },
}, {
title: 'Datepicker states',
title: 'Date picker states',
source: [{
type: GuideSectionTypes.JS,
code: statesSource,
Expand Down Expand Up @@ -140,7 +140,7 @@ export const DatePickerExample = {
),
demo: <Locale />,
}, {
title: 'Datepicker range',
title: 'Date picker range',
source: [{
type: GuideSectionTypes.JS,
code: rangeSource,
Expand Down Expand Up @@ -227,7 +227,7 @@ export const DatePickerExample = {
),
demo: <Utc />,
}, {
title: 'Datepicker inline',
title: 'Date picker inline',
source: [{
type: GuideSectionTypes.JS,
code: inlineSource,
Expand Down
9 changes: 9 additions & 0 deletions src-docs/src/views/date_picker/super_date_picker.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,14 @@ export default class extends Component {
}, this.startLoading);
}

onRefresh = ({ start, end, refreshInterval }) => {
return new Promise((resolve) => {
setTimeout(resolve, 100);
}).then(() => {
console.log(start, end, refreshInterval);
});
}

onStartInputChange = e => {
this.setState({
start: e.target.value,
Expand Down Expand Up @@ -168,6 +176,7 @@ export default class extends Component {
start={this.state.start}
end={this.state.end}
onTimeChange={this.onTimeChange}
onRefresh={this.onRefresh}
isPaused={this.state.isPaused}
refreshInterval={this.state.refreshInterval}
onRefreshChange={this.onRefreshChange}
Expand Down
117 changes: 10 additions & 107 deletions src-docs/src/views/range/dual_range.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
import React, {
Component,
Fragment,
} from 'react';

import {
EuiDualRange,
EuiSpacer,
EuiFormHelpText,
} from '../../../../src/components';

import makeId from '../../../../src/components/form/form_row/make_id';
Expand All @@ -15,21 +12,8 @@ export default class extends Component {
constructor(props) {
super(props);

this.levels = [
{
min: 0,
max: 600,
color: 'danger'
},
{
min: 600,
max: 2000,
color: 'success'
}
];

this.state = {
value: [120, 480]
value: ['', ''],
};
}

Expand All @@ -41,96 +25,15 @@ export default class extends Component {

render() {
return (
<Fragment>

<EuiDualRange
id={makeId()}
min={0}
max={2000}
value={this.state.value}
onChange={this.onChange}
aria-label="Use aria labels when no actual label is in use"
showLabels
name="dualRange"
/>

<EuiSpacer size="xl" />

<EuiDualRange
id={makeId()}
min={0}
max={2000}
value={this.state.value}
onChange={this.onChange}
disabled
aria-label="Use aria labels when no actual label is in use"
showLabels
/>

<EuiSpacer size="xl" />

<EuiDualRange
id={makeId()}
min={0}
max={2000}
value={this.state.value}
onChange={this.onChange}
aria-label="Use aria labels when no actual label is in use"
showLabels
showInput
showRange
/>

<EuiSpacer size="xl" />

<EuiDualRange
id={makeId()}
min={0}
max={2000}
step={50}
value={this.state.value}
onChange={this.onChange}
aria-label="Use aria labels when no actual label is in use"
aria-describedby="levelsHelp"
showLabels
showInput
compressed
levels={this.levels}
/>
<EuiFormHelpText id="levelsHelp">Recommended levels are 600 and above.</EuiFormHelpText>

<EuiSpacer size="xl" />

<EuiDualRange
id={makeId()}
min={0}
max={2000}
step={50}
value={this.state.value}
onChange={this.onChange}
aria-label="Use aria labels when no actual label is in use"
showTicks
showRange
tickInterval={300}
/>

<EuiSpacer size="xl" />

<EuiDualRange
id={makeId()}
min={0}
max={2000}
step={50}
value={this.state.value}
onChange={this.onChange}
aria-label="Use aria labels when no actual label is in use"
aria-describedby="levelsHelp"
showTicks
showInput
tickInterval={500}
levels={this.levels}
/>
</Fragment>
<EuiDualRange
id={makeId()}
min={-100}
max={200}
step={10}
value={this.state.value}
onChange={this.onChange}
showLabels
/>
);
}
}
57 changes: 57 additions & 0 deletions src-docs/src/views/range/input.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import React, {
Component,
Fragment,
} from 'react';

import {
EuiRange,
EuiSpacer,
EuiDualRange,
} from '../../../../src/components';

import makeId from '../../../../src/components/form/form_row/make_id';

export default class extends Component {
constructor(props) {
super(props);

this.state = {
value: '20',
dualValue: [20, 100],
};
}

onChange = e => {
this.setState({
value: e.target.value,
});
};

onDualChange = (value) => {
this.setState({
dualValue: value
});
};

render() {
return (
<Fragment>
<EuiRange
id={makeId()}
value={this.state.value}
onChange={this.onChange}
showInput
/>

<EuiSpacer size="xl" />

<EuiDualRange
id={makeId()}
value={this.state.dualValue}
onChange={this.onDualChange}
showInput
/>
</Fragment>
);
}
}
80 changes: 80 additions & 0 deletions src-docs/src/views/range/levels.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import React, {
Component,
Fragment,
} from 'react';

import {
EuiRange,
EuiSpacer,
EuiFormHelpText,
EuiDualRange,
} from '../../../../src/components';

import makeId from '../../../../src/components/form/form_row/make_id';

export default class extends Component {
constructor(props) {
super(props);

this.levels = [
{
min: 0,
max: 20,
color: 'danger'
},
{
min: 20,
max: 100,
color: 'success'
}
];

this.state = {
value: '20',
dualValue: [20, 100],
};
}

onChange = e => {
this.setState({
value: e.target.value,
});
};

onDualChange = (value) => {
this.setState({
dualValue: value
});
};

render() {
return (
<Fragment>
<EuiRange
id={makeId()}
value={this.state.value}
onChange={this.onChange}
showTicks
tickInterval={20}
levels={this.levels}
aria-describedby="levelsHelp2"
/>
<EuiFormHelpText id="levelsHelp2">Recommended levels are {this.levels[1].min} and above.</EuiFormHelpText>

<EuiSpacer size="xl" />

<EuiDualRange
id={makeId()}
value={this.state.dualValue}
onChange={this.onDualChange}
showTicks
ticks={[{ label: '20kb', value: 20 }, { label: '100kb', value: 100 }]}
showInput
levels={this.levels}
aria-describedby="levelsHelp3"
/>
<EuiFormHelpText id="levelsHelp3">Recommended size is {this.levels[1].min}kb and above.</EuiFormHelpText>
</Fragment>
);
}
}
Loading

0 comments on commit 1a4ec33

Please sign in to comment.