Repository: lizashkod/react-timeline-range-slider
Branch: master
Commit: 7a328a0d8f0c
Files: 13
Total size: 21.6 KB

Directory structure:
gitextract_e_2xsxx2/

├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── src/
│   ├── components/
│   │   ├── Handle.js
│   │   ├── KeyboardHandle.js
│   │   ├── SliderRail.js
│   │   ├── Tick.js
│   │   └── Track.js
│   ├── index.js
│   └── styles/
│       └── index.scss
└── webpack.config.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .babelrc
================================================
{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "transform-object-rest-spread",
    "transform-react-jsx",
    "@babel/plugin-proposal-class-properties"
  ]
}


================================================
FILE: .gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js
/.idea
/dist

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2020 Elizaveta Shkodkina

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
### react-timeline-range-slider
![demo gif](./demo.gif)
### Installation

     npm i react-timeline-range-slider
### Props

| Prop | Type | Default | Description|
|--|--|--|--|
| timelineInterval | array |[startOfToday(), endOfToday()]|Interval to display|
|selectedInterval|array|[new Date(), addHours(new Date(), 1)]|Selected interval inside the timeline|
|disabledIntervals|array|[]|Array of disabled intervals inside the timeline|
|containerClassName|string||ClassName of the wrapping container|
|step|number|1800000|Number of milliseconds between steps (the default value is 30 minutes)|
|ticksNumber|number|48|Number of steps on the timeline (the default value is 30 minutes)|
|error|bool|false|Is the selected interval is not valid|
|mode|int/function|3|The interaction mode. Value of 1 will allow handles to cross each other. Value of 2 will keep the sliders from crossing and separated by a step. Value of 3 will make the handles pushable and keep them a step apart. ADVANCED: You can also supply a function that will be passed the current values and the incoming update. Your function should return what the state should be set as.|
|formatTick|function|ms => format(new Date(ms), 'HH:mm')|Function that determines the format in which the date will be displayed|
|onUpdateCallback|function|||
|onChangeCallback|function|||
### Example
[Live demo](https://codesandbox.io/s/react-timeline-range-slider-ve7w2?file=/src/App.js)
```javascript
import React from 'react'  
import { endOfToday, set } from 'date-fns' 
import TimeRange from 'react-timeline-range-slider'  

const now = new Date()
const getTodayAtSpecificHour = (hour = 12) =>
	set(now, { hours: hour, minutes: 0, seconds: 0, milliseconds: 0 })

const selectedStart = getTodayAtSpecificHour()
const selectedEnd = getTodayAtSpecificHour(14)

const startTime = getTodayAtSpecificHour(7)
const endTime = endOfToday()

const disabledIntervals = [
  { start: getTodayAtSpecificHour(16), end: getTodayAtSpecificHour(17) },
  { start: getTodayAtSpecificHour(7), end: getTodayAtSpecificHour(12) },
  { start: getTodayAtSpecificHour(20), end: getTodayAtSpecificHour(24) }
]

class App extends React.Component {  
  state = {  
    error: false,  
    selectedInterval: [selectedStart, selectedEnd],  
  }
	
  errorHandler = ({ error }) => this.setState({ error })  

  onChangeCallback = selectedInterval => this.setState({ selectedInterval })  

  render() {  
    const { selectedInterval, error } = this.state  
      return (  
        <TimeRange
          error={error}  
          ticksNumber={36}  
          selectedInterval={selectedInterval}  
          timelineInterval={[startTime, endTime]}  
          onUpdateCallback={this.errorHandler}  
          onChangeCallback={this.onChangeCallback}
          disabledIntervals={disabledIntervals}  
        />
      )  
  }  
}  

export default App
```


================================================
FILE: package.json
================================================
{
  "name": "react-timeline-range-slider",
  "version": "1.4.1",
  "description": "Time Slider component for React",
  "author": "Elizaveta Shkodkina <lizashkodkina@gmail.com>",
  "main": "dist/index.js",
  "license": "MIT",
  "homepage": "https://github.com/lizashkod/react-time-range-slider",
  "repository": {
    "type": "git",
    "url": "https://github.com/lizashkod/react-time-range-slider"
  },
  "keywords": [
    "react-component",
    "react",
    "slider",
    "component",
    "time-picker",
    "react-slider",
    "range-slider",
    "range"
  ],
  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "scripts": {
    "start": "webpack --watch",
    "build": "webpack"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "dependencies": {
    "prop-types": "^15.7.2",
    "d3-scale": "^3.2.3",
    "date-fns": "^2.19.0",
    "node-sass": "^5.0.0",
    "react-compound-slider": "^3.3.1"
  },
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/preset-env": "^7.13.12",
    "@babel/preset-react": "^7.12.13",
    "babel-loader": "^8.2.2",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "css-loader": "^5.1.3",
    "sass-loader": "^10.0.0",
    "style-loader": "^2.0.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  }
}


================================================
FILE: src/components/Handle.js
================================================
import PropTypes from 'prop-types'
import React from 'react'

const Handle = ({
  error,
  domain: [min, max],
  handle: { id, value, percent = 0 },
  disabled,
  getHandleProps,
}) => {
  const leftPosition = `${percent}%`

  return (
    <>
      <div className='react_time_range__handle_wrapper' style={{ left: leftPosition }} {...getHandleProps(id)} />
      <div
        role='slider'
        aria-valuemin={min}
        aria-valuemax={max}
        aria-valuenow={value}
        className={`react_time_range__handle_container${disabled ? '__disabled' : ''}`}
        style={{ left: leftPosition }}
      >
        <div className={`react_time_range__handle_marker${error ? '__error' : ''}`} />
      </div>
    </>
  )
}

Handle.propTypes = {
  domain: PropTypes.array.isRequired,
  handle: PropTypes.shape({
    id: PropTypes.string.isRequired,
    value: PropTypes.number.isRequired,
    percent: PropTypes.number.isRequired
  }).isRequired,
  getHandleProps: PropTypes.func.isRequired,
  disabled: PropTypes.bool,
  style: PropTypes.object,
}

Handle.defaultProps = { disabled: false }

export default Handle


================================================
FILE: src/components/KeyboardHandle.js
================================================
import PropTypes from 'prop-types'
import React from 'react'

const KeyboardHandle = ({ domain: [min, max], handle: { id, value, percent = 0 }, disabled, getHandleProps }) => (
  <button
    role='slider'
    aria-valuemin={min}
    aria-valuemax={max}
    aria-valuenow={value}
    className='react_time_range__keyboard_handle'
    style={{
      left: `${percent}%`,
      backgroundColor: disabled ? '#666' : '#ffc400'
    }}
    {...getHandleProps(id)}
  />
)

KeyboardHandle.propTypes = {
  domain: PropTypes.array.isRequired,
  handle: PropTypes.shape({
    id: PropTypes.string.isRequired,
    value: PropTypes.number.isRequired,
    percent: PropTypes.number.isRequired
  }).isRequired,
  getHandleProps: PropTypes.func.isRequired,
  disabled: PropTypes.bool
}

KeyboardHandle.defaultProps = { disabled: false }

export default KeyboardHandle


================================================
FILE: src/components/SliderRail.js
================================================
import React from 'react'
import PropTypes from 'prop-types'

export const SliderRail = ({ getRailProps }) => (
  <>
    <div className='react_time_range__rail__outer' {...getRailProps()} />
    <div className='react_time_range__rail__inner' />
  </>
)

SliderRail.propTypes = { getRailProps: PropTypes.func.isRequired }

export default SliderRail


================================================
FILE: src/components/Tick.js
================================================
import { getMinutes } from 'date-fns'
import PropTypes from 'prop-types'
import React from 'react'

const Tick = ({ tick, count, format }) => {
  const isFullHour = !getMinutes(tick.value)

  const tickLabelStyle = {
    marginLeft: `${-(100 / count) / 2}%`,
    width: `${100 / count}%`,
    left: `${tick.percent}%`,
  }

  return (
    <>
      <div
        className={`react_time_range__tick_marker${isFullHour ? '__large' : ''}`}
        style={{ left: `${tick.percent}%` }}
      />
      {isFullHour && (
        <div className='react_time_range__tick_label' style={tickLabelStyle}>
          {format(tick.value)}
        </div>
      )}
    </>
  )
}

Tick.propTypes = {
  tick: PropTypes.shape({
    id: PropTypes.string.isRequired,
    value: PropTypes.number.isRequired,
    percent: PropTypes.number.isRequired
  }).isRequired,
  count: PropTypes.number.isRequired,
  format: PropTypes.func.isRequired
}

Tick.defaultProps = { format: d => d }

export default Tick


================================================
FILE: src/components/Track.js
================================================
import PropTypes from 'prop-types'
import React from 'react'

const getTrackConfig = ({ error, source, target, disabled }) => {
  const basicStyle = {
    left: `${source.percent}%`,
    width: `calc(${target.percent - source.percent}% - 1px)`,
  }

  if (disabled) return basicStyle

  const coloredTrackStyle = error
    ? {
      backgroundColor: 'rgba(214,0,11,0.5)',
      borderLeft: '1px solid rgba(214,0,11,0.5)',
      borderRight: '1px solid rgba(214,0,11,0.5)',
    }
    : {
      backgroundColor: 'rgba(98, 203, 102, 0.5)',
      borderLeft: '1px solid #62CB66',
      borderRight: '1px solid #62CB66',
    }

  return { ...basicStyle, ...coloredTrackStyle }
}

const Track = ({ error, source, target, getTrackProps, disabled }) => (
  <div
    className={`react_time_range__track${disabled ? '__disabled' : ''}`}
    style={getTrackConfig({ error, source, target, disabled })}
    {...getTrackProps()}
  />
)

Track.propTypes = {
  source: PropTypes.shape({
    id: PropTypes.string.isRequired,
    value: PropTypes.number.isRequired,
    percent: PropTypes.number.isRequired
  }).isRequired,
  target: PropTypes.shape({
    id: PropTypes.string.isRequired,
    value: PropTypes.number.isRequired,
    percent: PropTypes.number.isRequired
  }).isRequired,
  getTrackProps: PropTypes.func.isRequired,
  disabled: PropTypes.bool
}

Track.defaultProps = { disabled: false }

export default Track


================================================
FILE: src/index.js
================================================
import React from 'react'
import PropTypes from 'prop-types'
import { scaleTime } from 'd3-scale'
import { Slider, Rail, Handles, Tracks, Ticks } from 'react-compound-slider'
import {
  format,
  addHours,
  startOfToday,
  endOfToday,
  differenceInMilliseconds,
  isBefore,
  isAfter,
  set,
  addMinutes,
} from 'date-fns'

import SliderRail from './components/SliderRail'
import Track from './components/Track'
import Tick from './components/Tick'
import Handle from './components/Handle'

import './styles/index.scss'

const getTimelineConfig = (timelineStart, timelineLength) => (date) => {
  const percent = differenceInMilliseconds(date, timelineStart)/timelineLength * 100
  const value = Number(format(date, 'T'))
  return { percent, value }
}

const getFormattedBlockedIntervals = (blockedDates = [], [startTime, endTime]) => {
  if (!blockedDates.length) return null

  const timelineLength = differenceInMilliseconds(endTime, startTime)
  const getConfig = getTimelineConfig(startTime, timelineLength)

  const formattedBlockedDates = blockedDates.map((interval, index) => {
    let { start, end } = interval

    if (isBefore(start, startTime)) start = startTime
    if (isAfter(end, endTime)) end = endTime

    const source = getConfig(start)
    const target = getConfig(end)

    return { id: `blocked-track-${index}`, source, target }
  })

  return formattedBlockedDates
}

const getNowConfig = ([startTime, endTime])  => {
  const timelineLength = differenceInMilliseconds(endTime, startTime)
  const getConfig = getTimelineConfig(startTime, timelineLength)

  const source = getConfig(new Date())
  const target = getConfig(addMinutes(new Date(), 1))

  return { id: 'now-track', source, target }
}

class TimeRange extends React.Component {
  get disabledIntervals () {
    return getFormattedBlockedIntervals(this.props.disabledIntervals, this.props.timelineInterval)
  }

  get now () {
    return getNowConfig(this.props.timelineInterval)
  }

  onChange = newTime => {
    const formattedNewTime = newTime.map(t => new Date(t))
    this.props.onChangeCallback(formattedNewTime)
  }

  checkIsSelectedIntervalNotValid = ([start, end], source, target) => {
    const { value: startInterval } = source
    const { value: endInterval } = target

    if (startInterval > start && endInterval <= end || startInterval >= start && endInterval < end)
      return true
    if (start >= startInterval && end <= endInterval) return true

    const isStartInBlockedInterval = start > startInterval && start < endInterval && end >= endInterval
    const isEndInBlockedInterval = end < endInterval && end > startInterval && start <= startInterval

    return isStartInBlockedInterval || isEndInBlockedInterval
  }

  onUpdate = newTime => {
    const { onUpdateCallback } = this.props
    const disabledIntervals = this.disabledIntervals

    if (disabledIntervals?.length) {
      const isValuesNotValid = disabledIntervals.some(({ source, target }) =>
        this.checkIsSelectedIntervalNotValid(newTime, source, target))
      const formattedNewTime = newTime.map(t => new Date(t))
      onUpdateCallback({ error: isValuesNotValid, time: formattedNewTime })
      return
    }

    const formattedNewTime = newTime.map(t => new Date(t))
    onUpdateCallback({ error: false, time: formattedNewTime })
  }

  getDateTicks = () => {
    const { timelineInterval, ticksNumber } = this.props
    return scaleTime().domain(timelineInterval).ticks(ticksNumber).map(t => +t)
  }

  render() {
    const {
      sliderRailClassName,
      timelineInterval,
      selectedInterval,
      containerClassName,
      error,
      step,
      showNow,
      formatTick,
      mode,
    } = this.props

    const domain = timelineInterval.map(t => Number(t))

    const disabledIntervals = this.disabledIntervals

    return (
      <div className={containerClassName || 'react_time_range__time_range_container' }>
        <Slider
          mode={mode}
          step={step}
          domain={domain}
          onUpdate={this.onUpdate}
          onChange={this.onChange}
          values={selectedInterval.map(t => +t)}
          rootStyle={{ position: 'relative', width: '100%' }}
        >
          <Rail>
            {({ getRailProps }) =>
              <SliderRail className={sliderRailClassName} getRailProps={getRailProps} />}
          </Rail>

          <Handles>
            {({ handles, getHandleProps }) => (
              <>
                {handles.map(handle => (
                  <Handle
                    error={error}
                    key={handle.id}
                    handle={handle}
                    domain={domain}
                    getHandleProps={getHandleProps}
                  />
                ))}
              </>
            )}
          </Handles>

          <Tracks left={false} right={false}>
            {({ tracks, getTrackProps }) => (
              <>
                {tracks?.map(({ id, source, target }) =>
                  <Track
                    error={error}
                    key={id}
                    source={source}
                    target={target}
                    getTrackProps={getTrackProps}
                  />
                )}
              </>
            )}
          </Tracks>

          {disabledIntervals?.length && (
            <Tracks left={false} right={false}>
              {({ getTrackProps }) => (
                <>
                  {disabledIntervals.map(({ id, source, target }) => (
                    <Track
                      key={id}
                      source={source}
                      target={target}
                      getTrackProps={getTrackProps}
                      disabled
                    />
                  ))}
                </>
              )}
            </Tracks>
          )}

          {showNow && (
            <Tracks left={false} right={false}>
              {({ getTrackProps }) => (
                <Track
                  key={this.now?.id}
                  source={this.now?.source}
                  target={this.now?.target}
                  getTrackProps={getTrackProps}
                />
              )}
            </Tracks>
          )}

          <Ticks values={this.getDateTicks()}>
            {({ ticks }) => (
              <>
                {ticks.map(tick => (
                  <Tick
                    key={tick.id}
                    tick={tick}
                    count={ticks.length}
                    format={formatTick}
                  />
                ))}
              </>
            )}
          </Ticks>
        </Slider>
      </div>
    )
  }
}

TimeRange.propTypes = {
  ticksNumber: PropTypes.number.isRequired,
  selectedInterval: PropTypes.arrayOf(PropTypes.object),
  timelineInterval: PropTypes.arrayOf(PropTypes.object),
  disabledIntervals: PropTypes.arrayOf(PropTypes.object),
  containerClassName: PropTypes.string,
  sliderRailClassName: PropTypes.string,
  step: PropTypes.number,
  formatTick: PropTypes.func,
}

TimeRange.defaultProps = {
  selectedInterval: [
    set(new Date(), { minutes: 0, seconds: 0, milliseconds: 0 }),
    set(addHours(new Date(), 1), { minutes: 0, seconds: 0, milliseconds: 0 })
  ],
  timelineInterval: [startOfToday(), endOfToday()],
  formatTick: ms => format(new Date(ms), 'HH:mm'),
  disabledIntervals: [],
  step: 1000*60*30,
  ticksNumber: 48,
  error: false,
  mode: 3,
}

export default TimeRange


================================================
FILE: src/styles/index.scss
================================================
$react-time-range--gray: #C8CACC;
$react-time-range--highlight-tap: #000000;
$react-time-range--rail-bg: #F5F7FA;
$react-time-range--handle-bg: #FFFFFF;
$react-time-range--handle-bg--disabled: #666;
$react-time-range--track--valid: rgb(98, 203, 102);
$react-time-range--track--not-valid: rgb(214, 0, 11);
$react-time-range--tick-label: #77828C;
$react-time-range--track--disabled: repeating-linear-gradient( -45deg, transparent, transparent 3px, #D0D3D7 4px, #D0D3D7 2px);

.react_time_range__time_range_container {
  padding: 30px 10% 0;
  height: 70px;
  width: 90%;
  box-sizing: border-box;
}

.react_time_range__keyboard_handle {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.3);
}

.react_time_range__track {
  position: absolute;
  transform: translate(0%, -50%);
  height: 50px;
  cursor: pointer;
  transition: background-color .15s ease-in-out, border-color .15s ease;
  z-index: 3;
  &__disabled {
    @extend .react_time_range__track;
    z-index: 1;
    border-left: 1px solid $react-time-range--gray;
    border-right: 1px solid $react-time-range--gray;
    background: $react-time-range--track--disabled;
  }
}

.react_time_range__rail {
  &__outer {
    position: absolute;
    width: 100%;
    height: 50px;
    transform: translate(0%, -50%);
    cursor: pointer;
  }
  &__inner {
    position: absolute;
    width: 100%;
    height: 50px;
    transform: translate(0%, -50%);
    pointer-events: none;
    background-color: $react-time-range--rail-bg;
    border-bottom: 1px solid $react-time-range--gray;
  }
}

.react_time_range__handle {
  &_wrapper {
    position: absolute;
    transform: translate(-50%, -50%);
    -webkit-tap-highlight-color: $react-time-range--highlight-tap;
    z-index: 6;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-color: transparent;
  }
  &_container {
    position: absolute;
    display: flex;
    transform: translate(-50%, -50%);
    z-index: 4;
    width: 10px;
    height: 24px;
    border-radius: 4px;
    box-shadow: 0 0 3px rgba(0,0,0, 0.4);
    background-color: $react-time-range--handle-bg;
    &__disabled {
      @extend .react_time_range__handle_container;
      background-color: $react-time-range--handle-bg--disabled;
    }
  }
  &_marker {
    width: 2px;
    height: 12px;
    margin: auto;
    border-radius: 2px;
    background-color: $react-time-range--track--valid;
    transition: background-color .2s ease;
    &__error {
      @extend .react_time_range__handle_marker;
      background-color: $react-time-range--track--not-valid;
    }
  }
}

.react_time_range__tick {
  &_marker {
    position: absolute;
    margin-top: 20px;
    width: 1px;
    height: 5px;
    background-color: $react-time-range--gray;
    z-index: 2;
    &__large {
      @extend .react_time_range__tick_marker;
      margin-top: 15px;
      height: 10px;
    }
  }
  &_label {
    position: absolute;
    margin-top: 28px;
    font-size: 10px;
    text-align: center;
    z-index: 2;
    color: $react-time-range--tick-label;
    font-family: sans-serif;
  }
}


================================================
FILE: webpack.config.js
================================================
const path = require('path')

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    library: 'react-timeline-range-slider',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', "@babel/preset-env"]
          }
        }
      }, {
        test: /\.s[ac]ss$/i,
        use : [ 'style-loader', 'css-loader', 'sass-loader']
      },
    ]
  },
  externals: {
    'react': 'commonjs react'
  }
};