mirror of https://github.com/apache/superset.git
Fixes to the play slider (#5675)
* Fixes to the play slider * Address comments * Make CSS rules more strict * Fix CSS and improve code
This commit is contained in:
parent
359b31ebab
commit
bcc0954bb9
|
@ -1,8 +1,8 @@
|
|||
.play-slider {
|
||||
position: absolute;
|
||||
bottom: -16px;
|
||||
position: relative;
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.slider-selection {
|
||||
|
@ -21,3 +21,7 @@
|
|||
color: #b3b3b3;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
div.slider > div.tooltip.tooltip-main.top.in {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
|
|
@ -21,6 +21,7 @@ const propTypes = {
|
|||
orientation: PropTypes.oneOf(['horizontal', 'vertical']),
|
||||
reversed: PropTypes.bool,
|
||||
disabled: PropTypes.bool,
|
||||
range: PropTypes.bool,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
|
@ -30,6 +31,7 @@ const defaultProps = {
|
|||
orientation: 'horizontal',
|
||||
reversed: false,
|
||||
disabled: false,
|
||||
range: true,
|
||||
};
|
||||
|
||||
export default class PlaySlider extends React.PureComponent {
|
||||
|
@ -84,15 +86,17 @@ export default class PlaySlider extends React.PureComponent {
|
|||
this.setState({ intervalId: null });
|
||||
}
|
||||
step() {
|
||||
if (this.props.disabled) {
|
||||
const { start, end, step, values, disabled } = this.props;
|
||||
|
||||
if (disabled) {
|
||||
return;
|
||||
}
|
||||
let values = this.props.values.map(value => value + this.increment);
|
||||
if (values[1] > this.props.end) {
|
||||
const cr = values[0] - this.props.start;
|
||||
values = values.map(value => value - cr);
|
||||
}
|
||||
this.props.onChange(values);
|
||||
|
||||
const currentValues = Array.isArray(values) ? values : [values, values + step];
|
||||
const nextValues = currentValues.map(value => value + this.increment);
|
||||
const carriageReturn = (nextValues[1] > end) ? (nextValues[0] - start) : 0;
|
||||
|
||||
this.props.onChange(nextValues.map(value => value - carriageReturn));
|
||||
}
|
||||
formatter(values) {
|
||||
if (this.props.disabled) {
|
||||
|
@ -108,6 +112,7 @@ export default class PlaySlider extends React.PureComponent {
|
|||
return parts.map(value => (new Date(value)).toUTCString()).join(' : ');
|
||||
}
|
||||
render() {
|
||||
const { start, end, step, orientation, reversed, disabled, range, values } = this.props;
|
||||
return (
|
||||
<Row className="play-slider">
|
||||
<Col md={1} className="padded">
|
||||
|
@ -116,15 +121,16 @@ export default class PlaySlider extends React.PureComponent {
|
|||
</Col>
|
||||
<Col md={11} className="padded">
|
||||
<ReactBootstrapSlider
|
||||
value={this.props.values}
|
||||
value={range ? values : values[0]}
|
||||
range={range}
|
||||
formatter={this.formatter}
|
||||
change={this.onChange}
|
||||
min={this.props.start}
|
||||
max={this.props.end}
|
||||
step={this.props.step}
|
||||
orientation={this.props.orientation}
|
||||
reversed={this.props.reversed}
|
||||
disabled={this.props.disabled ? 'disabled' : 'enabled'}
|
||||
min={start}
|
||||
max={end}
|
||||
step={step}
|
||||
orientation={orientation}
|
||||
reversed={reversed}
|
||||
disabled={disabled ? 'disabled' : 'enabled'}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
|
|
@ -10,12 +10,14 @@ const propTypes = {
|
|||
end: PropTypes.number.isRequired,
|
||||
step: PropTypes.number.isRequired,
|
||||
values: PropTypes.array.isRequired,
|
||||
aggregation: PropTypes.bool,
|
||||
disabled: PropTypes.bool,
|
||||
viewport: PropTypes.object.isRequired,
|
||||
children: PropTypes.node,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
aggregation: false,
|
||||
disabled: false,
|
||||
step: 1,
|
||||
};
|
||||
|
@ -26,30 +28,41 @@ export default class AnimatableDeckGLContainer extends React.Component {
|
|||
const { getLayers, start, end, step, values, disabled, viewport, ...other } = props;
|
||||
this.state = { values, viewport };
|
||||
this.other = other;
|
||||
this.onChange = this.onChange.bind(this);
|
||||
}
|
||||
componentWillReceiveProps(nextProps) {
|
||||
this.setState({ values: nextProps.values, viewport: nextProps.viewport });
|
||||
}
|
||||
onChange(newValues) {
|
||||
this.setState({
|
||||
values: Array.isArray(newValues)
|
||||
? newValues
|
||||
: [newValues, newValues + this.props.step],
|
||||
});
|
||||
}
|
||||
render() {
|
||||
const layers = this.props.getLayers(this.state.values);
|
||||
const { start, end, step, disabled, aggregation, children, getLayers } = this.props;
|
||||
const { values, viewport } = this.state;
|
||||
const layers = getLayers(values);
|
||||
return (
|
||||
<div>
|
||||
<DeckGLContainer
|
||||
{...this.other}
|
||||
viewport={this.state.viewport}
|
||||
viewport={viewport}
|
||||
layers={layers}
|
||||
onViewportChange={newViewport => this.setState({ viewport: newViewport })}
|
||||
/>
|
||||
{!this.props.disabled &&
|
||||
{!disabled &&
|
||||
<PlaySlider
|
||||
start={this.props.start}
|
||||
end={this.props.end}
|
||||
step={this.props.step}
|
||||
values={this.state.values}
|
||||
onChange={newValues => this.setState({ values: newValues })}
|
||||
start={start}
|
||||
end={end}
|
||||
step={step}
|
||||
values={values}
|
||||
range={!aggregation}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
}
|
||||
{this.props.children}
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -110,6 +110,7 @@ class DeckGLScreenGrid extends React.PureComponent {
|
|||
mapboxApiAccessToken={this.props.payload.data.mapboxApiKey}
|
||||
mapStyle={this.props.slice.formData.mapbox_style}
|
||||
setControlValue={this.props.setControlValue}
|
||||
aggregation
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue