diff --git a/README.md b/README.md index 3f81641..0cecc0f 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,8 @@ var TimeRangeSlider = require('react-time-range-slider') import React from 'react'; import { render} from 'react-dom'; import TimeRangeSlider from 'react-time-range-slider'; +import 'react-time-range-slider/dist/styles.css'; + class App extends React.Component{ constructor(props) { super(props); @@ -63,7 +65,8 @@ class App extends React.Component{ onChangeComplete={this.changeCompleteHandler} onChange={this.timeChangeHandler} step={15} - value={this.state.value}/> + value={this.state.value} + formatLabel={(value) => {`${value}`}}/> ); } }; @@ -108,6 +111,9 @@ The amount of time, in minutes, increment/decrement when time range change. #### value: Range Set the current value for your component +#### formatLabel: Function(Value, Type): void +By default, value labels are displayed as plain numbers. If you want to change the display, you can do so by passing in a function. The function can return something different, i.e.: append a unit, reduce the precision of a number. + ## Defaults * disabled: `false` * draggableTrack: `false` @@ -116,4 +122,4 @@ Set the current value for your component * minValue: `00:00` * name: ` ` * step: `15` -* value: `{start: "00:00", end: "23:59"}` +* value: `{start: "00:00", end: "23:59"}` \ No newline at end of file diff --git a/dist/index.js b/dist/index.js index 071a055..6879f1e 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1,4 +1,4 @@ -'use strict'; +"use strict"; Object.defineProperty(exports, "__esModule", { value: true @@ -6,16 +6,14 @@ Object.defineProperty(exports, "__esModule", { var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); -var _react = require('react'); +var _react = require("react"); var _react2 = _interopRequireDefault(_react); -var _reactInputRange = require('react-input-range'); +var _reactInputRange = require("react-input-range"); var _reactInputRange2 = _interopRequireDefault(_reactInputRange); -require('./styles.css'); - function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -38,22 +36,22 @@ var TimeRangeSlider = function (_Component) { } _createClass(TimeRangeSlider, [{ - key: 'componentDidMount', + key: "componentDidMount", value: function componentDidMount() {} }, { - key: 'componentWillUnmount', + key: "componentWillUnmount", value: function componentWillUnmount() {} }, { - key: 'minuteToTime', + key: "minuteToTime", value: function minuteToTime(value) { value = value > 1439 ? 1439 : value; var hours = Math.floor(value / 60), minutes = value - hours * 60, ampm = null; - if (hours.length == 1) hours = '0' + hours; - if (minutes.length == 1) minutes = '0' + minutes; - if (minutes == 0) minutes = '00'; + if (hours.length == 1) hours = "0" + hours; + if (minutes.length == 1) minutes = "0" + minutes; + if (minutes == 0) minutes = "00"; if (this.props.format == 12) { ampm = "AM"; if (hours >= 12) { @@ -75,7 +73,7 @@ var TimeRangeSlider = function (_Component) { return { hours: hours, minutes: minutes, am_pm: ampm }; } }, { - key: 'timeToMinute', + key: "timeToMinute", value: function timeToMinute(time) { var rMinutes = 1439; if (this.props.format == 24) { @@ -111,7 +109,7 @@ var TimeRangeSlider = function (_Component) { return rMinutes > 1439 ? 1439 : rMinutes; } }, { - key: 'onChange', + key: "onChange", value: function onChange(value) { var start = this.minuteToTime(value.min); var end = this.minuteToTime(value.max); @@ -127,7 +125,7 @@ var TimeRangeSlider = function (_Component) { }); } }, { - key: 'onChangeComplete', + key: "onChangeComplete", value: function onChangeComplete(value) { var start = this.minuteToTime(value.min), end = this.minuteToTime(value.max); @@ -137,7 +135,7 @@ var TimeRangeSlider = function (_Component) { }); } }, { - key: 'onChangeStart', + key: "onChangeStart", value: function onChangeStart(value) { var start = this.minuteToTime(value.min), end = this.minuteToTime(value.max); @@ -147,7 +145,7 @@ var TimeRangeSlider = function (_Component) { }); } }, { - key: 'render', + key: "render", value: function render() { var _props$value = this.props.value, start = _props$value.start, @@ -163,8 +161,10 @@ var TimeRangeSlider = function (_Component) { onChangeStart: this.onChangeStart.bind(this), onChange: this.onChange.bind(this), onChangeComplete: this.onChangeComplete.bind(this), - step: 15, - value: { min: min, max: max } }); + formatLabel: this.props.formatLabel, + step: this.props.step, + value: { min: min, max: max } + }); } }]); @@ -180,6 +180,7 @@ TimeRangeSlider.defaultProps = { onChange: function onChange() {}, onChangeComplete: function onChangeComplete() {}, onChangeStart: function onChangeStart() {}, + formatLabel: function formatLabel() {}, step: 15, value: { start: "00:00", diff --git a/examples/index.js b/examples/index.js index 80b5538..534f8fb 100644 --- a/examples/index.js +++ b/examples/index.js @@ -2,6 +2,8 @@ import React from 'react'; import { render} from 'react-dom'; import TimeRangeSlider from '../src'; +import '../src/styles.css'; + class App extends React.Component{ constructor(props) { super(props); diff --git a/package-lock.json b/package-lock.json index fd152a8..4c1a032 100755 --- a/package-lock.json +++ b/package-lock.json @@ -244,8 +244,7 @@ "autobind-decorator": { "version": "1.4.3", "resolved": "https://registry.npmjs.org/autobind-decorator/-/autobind-decorator-1.4.3.tgz", - "integrity": "sha1-TJb/p3sQYi7eJPEQ9du/VmkUF9E=", - "dev": true + "integrity": "sha1-TJb/p3sQYi7eJPEQ9du/VmkUF9E=" }, "babel-cli": { "version": "6.26.0", @@ -362,13 +361,15 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz", "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=", - "dev": true + "dev": true, + "optional": true }, "is-glob": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz", "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=", "dev": true, + "optional": true, "requires": { "is-extglob": "^1.0.0" } @@ -3007,7 +3008,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -3028,12 +3030,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3048,17 +3052,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -3175,7 +3182,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -3187,6 +3195,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3201,6 +3210,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3208,12 +3218,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -3232,6 +3244,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3312,7 +3325,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3324,6 +3338,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3409,7 +3424,8 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3445,6 +3461,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3464,6 +3481,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3507,12 +3525,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -3579,13 +3599,15 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz", "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=", - "dev": true + "dev": true, + "optional": true }, "is-glob": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz", "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=", "dev": true, + "optional": true, "requires": { "is-extglob": "^1.0.0" } @@ -4406,8 +4428,7 @@ "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "jsesc": { "version": "1.3.0", @@ -4547,7 +4568,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, "requires": { "js-tokens": "^3.0.0 || ^4.0.0" } @@ -5035,8 +5055,7 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", - "dev": true + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, "object-copy": { "version": "0.1.0", @@ -5292,7 +5311,8 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz", "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=", - "dev": true + "dev": true, + "optional": true }, "is-glob": { "version": "2.0.1", @@ -5587,7 +5607,6 @@ "version": "15.6.2", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz", "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==", - "dev": true, "requires": { "loose-envify": "^1.3.1", "object-assign": "^4.1.1" @@ -5777,7 +5796,6 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/react-input-range/-/react-input-range-1.3.0.tgz", "integrity": "sha1-+W0AFjGrgXQX8eJtj5+WhLSCf1k=", - "dev": true, "requires": { "autobind-decorator": "^1.3.4", "prop-types": "^15.5.8" diff --git a/src/index.js b/src/index.js index a92c497..7126f8a 100644 --- a/src/index.js +++ b/src/index.js @@ -1,32 +1,27 @@ /*** src/index.js ***/ -import React, { Component } from 'react'; -import InputRange from 'react-input-range'; -import './styles.css'; +import React, { Component } from "react"; +import InputRange from "react-input-range"; class TimeRangeSlider extends Component { - constructor(props) { super(props); - this.state = { - } + this.state = {}; } - componentDidMount(){ - } + componentDidMount() {} - componentWillUnmount(){ - } + componentWillUnmount() {} - minuteToTime(value){ - value = (value > 1439) ? 1439 : value; + minuteToTime(value) { + value = value > 1439 ? 1439 : value; let hours = Math.floor(value / 60), - minutes = value - (hours * 60), - ampm = null; + minutes = value - hours * 60, + ampm = null; - if (hours.length == 1) hours = '0' + hours; - if (minutes.length == 1) minutes = '0' + minutes; - if (minutes == 0) minutes = '00'; - if(this.props.format == 12){ + if (hours.length == 1) hours = "0" + hours; + if (minutes.length == 1) minutes = "0" + minutes; + if (minutes == 0) minutes = "00"; + if (this.props.format == 12) { ampm = "AM"; if (hours >= 12) { if (hours == 12) { @@ -44,50 +39,50 @@ class TimeRangeSlider extends Component { } } - return {hours: hours, minutes: minutes, am_pm: ampm}; + return { hours: hours, minutes: minutes, am_pm: ampm }; } - timeToMinute(time){ + timeToMinute(time) { let rMinutes = 1439; - if(this.props.format == 24){ + if (this.props.format == 24) { time = time.split(":"); - if(time.length < 2){ + if (time.length < 2) { throw new Error("Invalid time"); } let hours = time[0], - minutes = parseInt(time[1]); + minutes = parseInt(time[1]); hours = parseInt(hours * 60); rMinutes = hours + minutes; - }else{ + } else { time = time.toUpperCase(); time = time.replace(" ", ""); - let ampm = (time.indexOf("AM") != -1) ? "AM" : "PM"; + let ampm = time.indexOf("AM") != -1 ? "AM" : "PM"; time = time.replace(ampm, ""); time = time.split(":"); - if(time.length < 2){ + if (time.length < 2) { throw new Error("Invalid time"); } let hours = parseInt(time[0]), - minutes = parseInt(time[1]); - if(ampm == "PM"){ - if(hours != 12){ - hours = (hours + 12); + minutes = parseInt(time[1]); + if (ampm == "PM") { + if (hours != 12) { + hours = hours + 12; } - }else{ - hours = (hours == 12) ? 0 : hours; + } else { + hours = hours == 12 ? 0 : hours; } hours = hours * 60; rMinutes = hours + minutes; } - return (rMinutes > 1439) ? 1439 : rMinutes; + return rMinutes > 1439 ? 1439 : rMinutes; } - onChange(value){ + onChange(value) { let start = this.minuteToTime(value.min); let end = this.minuteToTime(value.max); let nStart = start.hours + ":" + start.minutes; let nEnd = end.hours + ":" + end.minutes; - if(this.props.format == 12){ + if (this.props.format == 12) { nStart += " " + start.am_pm; nEnd += " " + end.am_pm; } @@ -97,18 +92,18 @@ class TimeRangeSlider extends Component { }); } - onChangeComplete(value){ + onChangeComplete(value) { let start = this.minuteToTime(value.min), - end = this.minuteToTime(value.max); + end = this.minuteToTime(value.max); this.props.onChangeComplete({ start: start, end: end }); } - onChangeStart(value){ + onChangeStart(value) { let start = this.minuteToTime(value.min), - end = this.minuteToTime(value.max); + end = this.minuteToTime(value.max); this.props.onChangeStart({ start: start, end: end @@ -116,9 +111,9 @@ class TimeRangeSlider extends Component { } render() { - let {start, end} = this.props.value, - min = this.timeToMinute(start), - max = this.timeToMinute(end); + let { start, end } = this.props.value, + min = this.timeToMinute(start), + max = this.timeToMinute(end); return ( ); + value={{ min: min, max: max }} + /> + ); } } @@ -142,11 +140,12 @@ TimeRangeSlider.defaultProps = { onChange: () => {}, onChangeComplete: () => {}, onChangeStart: () => {}, + formatLabel: () => {}, step: 15, value: { - start: "00:00", + start: "00:00", end: "23:59" } -} +}; export default TimeRangeSlider;