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