Skip to content
Snippets Groups Projects
Commit 3fe7d1ae authored by esikkala's avatar esikkala
Browse files

Testing date slider

parent 83c448e3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/client/components/facet_bar/slider/DateSlider.js
+ 28
− 33
View file @ 3fe7d1ae
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Slider, Rail, Handles, Tracks, Ticks } from 'react-compound-slider';
import { withStyles } from '@material-ui/core/styles';
import { SliderRail, Handle, Track, Tick } from './SliderComponents'; // example render components - source below
import { Handle, Track, Tick, TooltipRail } from './SliderComponents'; // example render components - source below
const style = () => ({
root: {
height: 120,
width: '100%',
},
slider: {
position: 'relative',
width: '100%',
},
});
const sliderStyle = {
position: 'relative',
width: '100%',
};
const domain = [100, 500];
const defaultValues = [150, 300, 400, 450];
const defaultValues = [240, 360];
class Example extends Component {
state = {
domain: [100, 600],
values: defaultValues.slice(),
update: defaultValues.slice(),
reversed: false,
}
onUpdate = update => {
......@@ -32,35 +25,41 @@ class Example extends Component {
this.setState({ values });
}
setDomain = domain => {
this.setState({ domain });
}
toggleReverse = () => {
this.setState(prev => ({ reversed: !prev.reversed }));
}
render() {
const {
props: { classes },
state: { values, update },
state: { domain, values, reversed },
} = this;
return (
<div className={classes.root}>
<div style={{ height: 150, width: '100%' }}>
<Slider
mode={1}
step={1}
domain={domain}
className={classes.slider}
reversed={reversed}
rootStyle={sliderStyle}
onUpdate={this.onUpdate}
onChange={this.onChange}
values={values}
>
<Rail>
{({ getRailProps }) => <SliderRail getRailProps={getRailProps} />}
</Rail>
<Rail>{railProps => <TooltipRail {...railProps} />}</Rail>
<Handles>
{({ activeHandleID, handles, getHandleProps }) => (
<div>
{({ handles, activeHandleID, getHandleProps }) => (
<div className="slider-handles">
{handles.map(handle => (
<Handle
key={handle.id}
handle={handle}
domain={domain}
activeHandleID={activeHandleID}
isActive={handle.id === activeHandleID}
getHandleProps={getHandleProps}
/>
))}
......@@ -69,7 +68,7 @@ class Example extends Component {
</Handles>
<Tracks left={false} right={false}>
{({ tracks, getTrackProps }) => (
<div>
<div className="slider-tracks">
{tracks.map(({ id, source, target }) => (
<Track
key={id}
......@@ -81,9 +80,9 @@ class Example extends Component {
</div>
)}
</Tracks>
<Ticks count={5}>
<Ticks count={10}>
{({ ticks }) => (
<div>
<div className="slider-ticks">
{ticks.map(tick => (
<Tick key={tick.id} tick={tick} count={ticks.length} />
))}
......@@ -96,8 +95,4 @@ class Example extends Component {
}
}
Example.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(style)(Example);
export default Example;
src/client/components/facet_bar/slider/SliderComponents.js
+ 255
− 142
View file @ 3fe7d1ae
import React, { Fragment } from 'react';
import clsx from 'clsx';
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import { fade } from '@material-ui/core/styles/colorManipulator';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
//import './tooltip.css';
// *******************************************************
// RAIL COMPONENT
// TOOLTIP RAIL
// *******************************************************
const railStyle = () => ({
common: {
position: 'absolute',
width: '100%',
transform: 'translate(0%, -50%)',
},
outer: {
height: 42,
borderRadius: 21,
cursor: 'pointer',
border: '1px solid white',
},
inner: {
height: 4,
borderRadius: 2,
pointerEvents: 'none',
backgroundColor: 'rgb(155,155,155)',
},
});
function RailComponent({ classes, getRailProps }) {
return (
<Fragment>
<div
className={clsx(classes.common, classes.outer)}
{...getRailProps()}
/>
<div className={clsx(classes.common, classes.inner)} />
</Fragment>
);
const railStyle = {
position: 'absolute',
width: '100%',
transform: 'translate(0%, -50%)',
height: 40,
cursor: 'pointer',
zIndex: 300,
// border: '1px solid grey',
};
const railCenterStyle = {
position: 'absolute',
width: '100%',
transform: 'translate(0%, -50%)',
height: 14,
borderRadius: 7,
cursor: 'pointer',
pointerEvents: 'none',
backgroundColor: 'rgb(155,155,155)',
};
const tooltipStyle = {
position: 'relative',
display: 'inline-block',
borderBottom: '1px dotted #444',
marginLeft: 22
};
const tooltipTextStyle = {
width: 100,
backgroundColor: '#444',
color: '#f0f0f0',
opacity: 0.8,
textAlign: 'center',
borderRadius: 6,
padding: '5px 0',
position: 'absolute',
zIndex: 1,
bottom: '150%',
left: '50%',
marginLeft: '-60px'
};
export class TooltipRail extends Component {
state = {
value: null,
percent: null,
}
onMouseEnter = () => {
document.addEventListener('mousemove', this.onMouseMove);
}
onMouseLeave = () => {
this.setState({ value: null, percent: null });
document.removeEventListener('mousemove', this.onMouseMove);
}
onMouseMove = e => {
const { activeHandleID, getEventData } = this.props;
if (activeHandleID) {
this.setState({ value: null, percent: null });
} else {
this.setState(getEventData(e));
}
}
render() {
const { value, percent } = this.state;
const { activeHandleID, getRailProps } = this.props;
return (
<Fragment>
{!activeHandleID && value ? (
<div
style={{
left: `${percent}%`,
position: 'absolute',
marginLeft: '-11px',
marginTop: '-35px',
}}
>
<div style={tooltipStyle}>
<span style={tooltipTextStyle}>Value: {value}</span>
</div>
</div>
) : null}
<div
style={railStyle}
{...getRailProps({
onMouseEnter: this.onMouseEnter,
onMouseLeave: this.onMouseLeave,
})}
/>
<div style={railCenterStyle} />
</Fragment>
);
}
}
RailComponent.propTypes = {
classes: PropTypes.object.isRequired,
TooltipRail.propTypes = {
getEventData: PropTypes.func,
activeHandleID: PropTypes.string,
getRailProps: PropTypes.func.isRequired,
};
export const SliderRail = withStyles(railStyle)(RailComponent);
TooltipRail.defaultProps = {
disabled: false,
};
// *******************************************************
// HANDLE COMPONENT
// SLIDER RAIL (no tooltips)
// *******************************************************
const handleStyle = theme => {
const colors = {
primary: theme.palette.primary.main,
thumbOutline: fade(theme.palette.primary.main, 0.16),
};
return {
common: {
position: 'absolute',
WebkitTapHighlightColor: 'rgba(0,0,0,0)',
},
outer: {
zIndex: 5,
width: 20,
height: 40,
transform: 'translate(-50%, -50%)',
cursor: 'pointer',
backgroundColor: 'none',
},
inner: {
zIndex: 2,
width: 12,
height: 12,
transform: 'translate(-50%, -50%)',
borderRadius: '50%',
backgroundColor: colors.primary,
},
active: {
boxShadow: `0px 0px 0px 16px ${colors.thumbOutline}`,
},
};
const railOuterStyle = {
position: 'absolute',
transform: 'translate(0%, -50%)',
width: '100%',
height: 42,
borderRadius: 7,
cursor: 'pointer',
// border: '1px solid grey',
};
function HandleComponent({
activeHandleID,
domain: [min, max],
handle: { id, value, percent },
classes,
getHandleProps,
}) {
const active = activeHandleID === id;
const railInnerStyle = {
position: 'absolute',
width: '100%',
height: 14,
transform: 'translate(0%, -50%)',
borderRadius: 7,
pointerEvents: 'none',
backgroundColor: 'rgb(155,155,155)',
};
export function SliderRail({ getRailProps }) {
return (
<Fragment>
<div
className={clsx(classes.common, classes.outer)}
style={{ left: `${percent}%` }}
{...getHandleProps(id)}
/>
<div
role="slider"
aria-valuemin={min}
aria-valuemax={max}
aria-valuenow={value}
className={clsx(
classes.common,
classes.inner,
active && classes.active,
)}
style={{ left: `${percent}%` }}
/>
<div style={railOuterStyle} {...getRailProps()} />
<div style={railInnerStyle} />
</Fragment>
);
}
HandleComponent.propTypes = {
activeHandleID: PropTypes.string,
SliderRail.propTypes = {
getRailProps: PropTypes.func.isRequired,
};
// *******************************************************
// HANDLE COMPONENT
// *******************************************************
export class Handle extends Component {
state = {
mouseOver: false,
}
onMouseEnter = () => {
this.setState({ mouseOver: true });
}
onMouseLeave = () => {
this.setState({ mouseOver: false });
}
render() {
const {
domain: [min, max],
handle: { id, value, percent },
isActive,
disabled,
getHandleProps,
} = this.props;
const { mouseOver } = this.state;
return (
<Fragment>
{(mouseOver || isActive) && !disabled ? (
<div
style={{
left: `${percent}%`,
position: 'absolute',
marginLeft: '-11px',
marginTop: '-35px',
}}
>
<div style={tooltipStyle}>
<span style={tooltipTextStyle}>Value: {value}</span>
</div>
</div>
) : null}
<div
style={{
left: `${percent}%`,
position: 'absolute',
transform: 'translate(-50%, -50%)',
WebkitTapHighlightColor: 'rgba(0,0,0,0)',
zIndex: 400,
width: 26,
height: 42,
cursor: 'pointer',
// border: '1px solid grey',
backgroundColor: 'none',
}}
{...getHandleProps(id, {
onMouseEnter: this.onMouseEnter,
onMouseLeave: this.onMouseLeave,
})}
/>
<div
role="slider"
aria-valuemin={min}
aria-valuemax={max}
aria-valuenow={value}
style={{
left: `${percent}%`,
position: 'absolute',
transform: 'translate(-50%, -50%)',
WebkitTapHighlightColor: 'rgba(0,0,0,0)',
zIndex: 300,
width: 24,
height: 24,
border: 0,
borderRadius: '50%',
boxShadow: '1px 1px 1px 1px rgba(0, 0, 0, 0.2)',
backgroundColor: disabled ? '#666' : '#8b6068',
}}
/>
</Fragment>
);
}
}
Handle.propTypes = {
domain: PropTypes.array.isRequired,
handle: PropTypes.shape({
id: PropTypes.string.isRequired,
value: PropTypes.number.isRequired,
percent: PropTypes.number.isRequired,
}).isRequired,
classes: PropTypes.object.isRequired,
getHandleProps: PropTypes.func.isRequired,
isActive: PropTypes.bool.isRequired,
disabled: PropTypes.bool,
};
export const Handle = withStyles(handleStyle)(HandleComponent);
Handle.defaultProps = {
disabled: false,
};
// *******************************************************
// TRACK COMPONENT
// *******************************************************
const trackStyle = theme => ({
root: {
position: 'absolute',
transform: 'translate(0%, -50%)',
height: 4,
zIndex: 1,
borderRadius: 2,
cursor: 'pointer',
backgroundColor: theme.palette.primary.main,
},
});
function TrackComponent({ classes, source, target, getTrackProps }) {
export function Track({ source, target, getTrackProps, disabled }) {
return (
<div
className={classes.root}
style={{
position: 'absolute',
transform: 'translate(0%, -50%)',
height: 14,
zIndex: 1,
backgroundColor: disabled ? '#999' : '#8b6068',
borderRadius: 7,
cursor: 'pointer',
left: `${source.percent}%`,
width: `${target.percent - source.percent}%`,
}}
......@@ -157,7 +274,7 @@ function TrackComponent({ classes, source, target, getTrackProps }) {
);
}
TrackComponent.propTypes = {
Track.propTypes = {
source: PropTypes.shape({
id: PropTypes.string.isRequired,
value: PropTypes.number.isRequired,
......@@ -168,61 +285,57 @@ TrackComponent.propTypes = {
value: PropTypes.number.isRequired,
percent: PropTypes.number.isRequired,
}).isRequired,
classes: PropTypes.object.isRequired,
getTrackProps: PropTypes.func.isRequired,
disabled: PropTypes.bool,
};
export const Track = withStyles(trackStyle)(TrackComponent);
Track.defaultProps = {
disabled: false,
};
// *******************************************************
// TICK COMPONENT
// *******************************************************
const tickStyle = theme => ({
tick: {
position: 'absolute',
marginTop: 10,
width: 1,
height: 5,
backgroundColor: theme.palette.text.primary,
},
label: {
position: 'absolute',
marginTop: 16,
textAlign: 'center',
},
});
export function TickComponent({ classes, tick, count, format }) {
export function Tick({ tick, count, format }) {
return (
<div>
<div className={classes.tick} style={{ left: `${tick.percent}%` }} />
<Typography
className={classes.label}
<div
style={{
position: 'absolute',
marginTop: 17,
width: 1,
height: 5,
backgroundColor: 'rgb(200,200,200)',
left: `${tick.percent}%`,
}}
/>
<div
style={{
position: 'absolute',
marginTop: 25,
fontSize: 10,
textAlign: 'center',
marginLeft: `${-(100 / count) / 2}%`,
width: `${100 / count}%`,
left: `${tick.percent}%`,
}}
>
{format(tick.value)}
</Typography>
</div>
</div>
);
}
TickComponent.propTypes = {
Tick.propTypes = {
tick: PropTypes.shape({
id: PropTypes.string.isRequired,
value: PropTypes.number.isRequired,
percent: PropTypes.number.isRequired,
}).isRequired,
classes: PropTypes.object.isRequired,
count: PropTypes.number.isRequired,
format: PropTypes.func.isRequired,
};
TickComponent.defaultProps = {
Tick.defaultProps = {
format: d => d,
};
export const Tick = withStyles(tickStyle)(TickComponent);
src/client/reducers/manuscriptsFacets.js
+ 2
− 2
View file @ 3fe7d1ae
......@@ -78,9 +78,9 @@ export const INITIAL_STATE = {
// sortBy: 'prefLabel',
// sortDirection: 'asc',
// sortButton: false,
// spatialFilterButton: true,
// spatialFilterButton: false,
// isFetching: false,
// searchField: true,
// searchField: false,
// containerClass: 'ten',
// filterType: 'timespan',
// startValue: null,
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment