Release version 2.0.0

Timestep component

Timestep

Based on rc-slider, for more configuration, take a look at the offical documentation

<Timestep
  isPlaying={true}
  canPlay={Boolean}

  handleTogglePlay={callback}
  handleOnChange={callback}
  handleOnAfterChange={callback}
  formatValue={callback}

  min={Number}
  max={Number}
  start={Number}
  end={Number}
  trim={Number}

  marks={{} || Array}
  step={Number}
  customClass={String}
  trackStyles={Object}
/>

You can pass your custom play button down as a react component using the playButton property.

<Timestep
  playButton={(
    <button
      type="button"
      onClick={this.togglePlay}
      className="my_play_button"
    >
      {isPlaying ? 'Pause' : 'Play'}
    </button>
  )}
/>

Timestep legend

const layerGroups = require('./mocks').layerGroups;

const LegendListItem = require('./components/legend-list-item').default;
const LegendItemToolbar = require('./components/legend-item-toolbar').default;
const LegendItemTypes = require('./components/legend-item-types').default;
const LegendItemTimestep = require('./components/legend-item-timestep').default;

const timelineConfig = {
  canPlay: true,
  dateFormat: "YYYY",
  interval: "years",
  minDate: "2001-01-01",
  maxDate: "2017-12-31",
  startDate: "2004-09-27",
  endDate: "2010-09-14",
  trimEndDate: "2016-09-14",
  speed: 250,
  step: 1
};


<Legend
  expanded={true}
  sortable={true}
>
  {layerGroups.map((lg, i) => (
    <LegendListItem
      index={i}
      key={lg.dataset}
      layerGroup={lg}
      toolbar={
        <LegendItemToolbar />
      }
    >
      <LegendItemTypes />
      <LegendItemTimestep 
        handleChange={dates => { console.log(dates); }} 
        {...timelineConfig}
      />
    </LegendListItem>
  ))}
</Legend>