diff --git a/dist/reactComponents/Slider.d.ts b/dist/reactComponents/Slider.d.ts index 78babea376dfc6518a550b9a34db8d62bdfa3295..2d09adeb328e4203f4d8534ba934edafdad72e6b 100644 --- a/dist/reactComponents/Slider.d.ts +++ b/dist/reactComponents/Slider.d.ts @@ -4,17 +4,16 @@ import React = require("react"); export interface iSlider { change: (d: number) => any; - steps?: number; - animate?: boolean; - defaultAnimationInterval?: number; - value?: number; + steps: number; + animate: boolean; + defaultAnimationInterval: number; + value: number; } export declare class Slider extends React.Component<iSlider, {}> { static defaultProps: { - change: (d: number) => void; steps: any; - animate: any; - defaultAnimationInterval: any; + animate: boolean; + defaultAnimationInterval: boolean; value: any; }; private uid; diff --git a/dist/reactComponents/Slider.js b/dist/reactComponents/Slider.js index 0958934a88f4d6297023b309114c2941573c7a9e..af0e13d43d5533cd7dd4b343b08becb534888f9f 100644 --- a/dist/reactComponents/Slider.js +++ b/dist/reactComponents/Slider.js @@ -146,10 +146,9 @@ class Slider extends React.Component { } } Slider.defaultProps = { - change: (d) => { }, steps: null, - animate: null, - defaultAnimationInterval: null, + animate: false, + defaultAnimationInterval: false, value: null }; exports.Slider = Slider; diff --git a/dist/reactComponents/Slider.js.map b/dist/reactComponents/Slider.js.map index b328ced7dc933a1d61bcec04e41b67c95e9cf5cd..bd230862d1788dc6f00d8ec5e63c978a2522a72a 100644 --- a/dist/reactComponents/Slider.js.map +++ b/dist/reactComponents/Slider.js.map @@ -1 +1 @@ -{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../src/reactComponents/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\r\n * Created by glenn on 7/6/2017.\r\n */\r\n\r\nimport React = require(\"react\");\r\n\r\nimport makeGuid from '../util/makeGuid';\r\nimport {ChangeEvent} from \"react\";\r\nimport {get_browser} from '../util/get_browser';\r\n\r\nexport interface iSlider {\r\n change: (d: number) => any;\r\n steps?: number;\r\n animate?: boolean;\r\n defaultAnimationInterval?: number;\r\n value?: number;\r\n}\r\n\r\nexport class Slider extends React.Component<iSlider, {}> {\r\n static defaultProps = {\r\n change: (d: number) => {},\r\n steps: null,\r\n animate: null,\r\n defaultAnimationInterval: null,\r\n value: null\r\n };\r\n\r\n\r\n private uid: string;\r\n private startUid: string;\r\n private stopUid: string;\r\n private previousUid: string;\r\n private nextUid: string;\r\n private intervalUid: string;\r\n private el: HTMLInputElement;\r\n private previousButton: HTMLButtonElement;\r\n private nextButton: HTMLButtonElement;\r\n private startButton: HTMLButtonElement;\r\n private stopButton: HTMLButtonElement;\r\n private intervalSelect: HTMLSelectElement;\r\n private interval: number;\r\n private running: boolean;\r\n private minVal: number;\r\n private maxVal: number;\r\n private step: number;\r\n\r\n constructor(props: iSlider, context: Object) {\r\n super(props, context);\r\n this.uid = makeGuid();\r\n this.startUid = makeGuid();\r\n this.stopUid = makeGuid();\r\n this.intervalUid = makeGuid();\r\n this.previousUid = makeGuid();\r\n this.nextUid = makeGuid();\r\n this.running = false;\r\n }\r\n\r\n componentDidMount() {\r\n this.el = document.getElementById(this.uid) as HTMLInputElement;\r\n this.minVal = parseFloat(this.el.min);\r\n this.maxVal = parseFloat(this.el.max);\r\n this.step = parseFloat(this.el.step);\r\n this.startButton = document.getElementById(this.startUid) as HTMLButtonElement;\r\n this.stopButton = document.getElementById(this.stopUid) as HTMLButtonElement;\r\n if (this.props.animate) {\r\n this.stopButton.style.display = 'none';\r\n }\r\n this.previousButton = document.getElementById(this.previousUid) as HTMLButtonElement;\r\n this.nextButton = document.getElementById(this.nextUid) as HTMLButtonElement;\r\n this.intervalSelect = document.getElementById(this.intervalUid) as HTMLSelectElement;\r\n\r\n if (get_browser().name.toUpperCase().indexOf('IE') > -1) {\r\n this.el.onchange = (e) => {\r\n this.props.change(parseFloat(e.target['value']))\r\n }\r\n }\r\n }\r\n\r\n updateRunning() {\r\n this.el.disabled = this.running;\r\n\r\n this.startButton.style.display = this.running ? 'none' : '';\r\n this.stopButton.style.display = this.running ? '' : 'none';\r\n\r\n this.nextButton.disabled = this.running;\r\n this.previousButton.disabled = this.running;\r\n }\r\n\r\n startAnimate() {\r\n this.running = true;\r\n this.updateRunning();\r\n this.interval = setInterval(() => {\r\n let val = parseFloat(this.el.value);\r\n val += this.step;\r\n if (val > this.maxVal) {\r\n val = this.minVal\r\n }\r\n\r\n this.el.value = val.toString();\r\n this.props.change(val);\r\n }, parseInt(this.intervalSelect.value));\r\n }\r\n\r\n stopAnimate() {\r\n clearInterval(this.interval);\r\n this.running = false;\r\n this.updateRunning();\r\n }\r\n\r\n restartAnimate() {\r\n if (this.running) {\r\n this.stopAnimate();\r\n this.startAnimate();\r\n }\r\n }\r\n\r\n increment(v: number) {\r\n let val = parseFloat(this.el.value);\r\n val = v > 0 ? val + this.step : val - this.step;\r\n this.el.value = val.toString();\r\n this.props.change(val);\r\n }\r\n\r\n render() {\r\n let attrs = {\r\n id: this.uid,\r\n min: 0,\r\n type: 'range',\r\n onChange: (evt: ChangeEvent<HTMLInputElement>) => {\r\n this.props.change(parseFloat(evt.target.value))\r\n },\r\n style: {width: '100%', padding: '4px 0'},\r\n max: \"100\",\r\n step: '0.1',\r\n value: this.props.value ? this.props.value.toString() : '0',\r\n defaultValue: \"0\"\r\n };\r\n\r\n if (this.props.steps) {\r\n attrs.max = this.props.steps.toString();\r\n attrs.step = '1';\r\n }\r\n\r\n if (this.props.value) {\r\n delete attrs.defaultValue;\r\n } else {\r\n delete attrs.value;\r\n }\r\n\r\n\r\n let start = null;\r\n let stop = null;\r\n let previous = null;\r\n let next = null;\r\n let intervalSelect = null;\r\n\r\n let interval = \"200\";\r\n\r\n if (this.props.defaultAnimationInterval) {\r\n interval = this.props.defaultAnimationInterval.toFixed();\r\n }\r\n\r\n if (this.props.animate) {\r\n previous = <button id={this.previousUid} className=\"react-slider-previous\" onClick={() => {\r\n this.increment(-1)\r\n }} title=\"Previous\"/>;\r\n\r\n next = <button id={this.nextUid} className=\"react-slider-next\" onClick={() => {\r\n this.increment(1)\r\n }} title=\"Next\"/>;\r\n\r\n start = <button id={this.startUid} className=\"react-slider-start\" onClick={() => {\r\n this.startAnimate()\r\n }} title=\"Start\"/>;\r\n\r\n stop = <button id={this.stopUid} className=\"react-slider-stop\" onClick={() => {\r\n this.stopAnimate()\r\n }} title=\"Stop\"/>;\r\n\r\n intervalSelect = <span>\r\n\r\n <label style={{fontWeight: 'bold', marginRight: '3px'}}>Interval (s)</label>\r\n <select defaultValue={interval} id={this.intervalUid} onChange={() => {\r\n this.restartAnimate()\r\n }}>\r\n <option value=\"100\">0.1</option>\r\n <option value=\"200\">0.2</option>\r\n <option value=\"300\">0.3</option>\r\n <option value=\"400\">0.4</option>\r\n <option value=\"500\">0.5</option>\r\n <option value=\"600\">0.6</option>\r\n <option value=\"700\">0.7</option>\r\n <option value=\"800\">0.8</option>\r\n <option value=\"900\">0.9</option>\r\n <option value=\"1000\">1.0</option>\r\n </select>\r\n </span>;\r\n }\r\n\r\n return <div className=\"react-slider\">\r\n <input {...attrs}/>\r\n <div className=\"react-slider-controls\" style={{textAlign: 'center'}}>\r\n {previous}{start}{stop}{next}{intervalSelect}\r\n </div>\r\n </div>\r\n }\r\n\r\n}\r\n\r\n"]} \ No newline at end of file +{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../src/reactComponents/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\r\n * Created by glenn on 7/6/2017.\r\n */\r\n\r\nimport React = require(\"react\");\r\n\r\nimport makeGuid from '../util/makeGuid';\r\nimport {ChangeEvent} from \"react\";\r\nimport {get_browser} from '../util/get_browser';\r\n\r\nexport interface iSlider {\r\n change: (d: number) => any;\r\n steps: number;\r\n animate: boolean;\r\n defaultAnimationInterval: number;\r\n value: number;\r\n}\r\n\r\nexport class Slider extends React.Component<iSlider, {}> {\r\n public static defaultProps = {\r\n steps: null,\r\n animate: false,\r\n defaultAnimationInterval: false,\r\n value: null\r\n };\r\n\r\n private uid: string;\r\n private startUid: string;\r\n private stopUid: string;\r\n private previousUid: string;\r\n private nextUid: string;\r\n private intervalUid: string;\r\n private el: HTMLInputElement;\r\n private previousButton: HTMLButtonElement;\r\n private nextButton: HTMLButtonElement;\r\n private startButton: HTMLButtonElement;\r\n private stopButton: HTMLButtonElement;\r\n private intervalSelect: HTMLSelectElement;\r\n private interval: number;\r\n private running: boolean;\r\n private minVal: number;\r\n private maxVal: number;\r\n private step: number;\r\n\r\n constructor(props: iSlider, context: Object) {\r\n super(props, context);\r\n this.uid = makeGuid();\r\n this.startUid = makeGuid();\r\n this.stopUid = makeGuid();\r\n this.intervalUid = makeGuid();\r\n this.previousUid = makeGuid();\r\n this.nextUid = makeGuid();\r\n this.running = false;\r\n }\r\n\r\n componentDidMount() {\r\n this.el = document.getElementById(this.uid) as HTMLInputElement;\r\n this.minVal = parseFloat(this.el.min);\r\n this.maxVal = parseFloat(this.el.max);\r\n this.step = parseFloat(this.el.step);\r\n this.startButton = document.getElementById(this.startUid) as HTMLButtonElement;\r\n this.stopButton = document.getElementById(this.stopUid) as HTMLButtonElement;\r\n if (this.props.animate) {\r\n this.stopButton.style.display = 'none';\r\n }\r\n this.previousButton = document.getElementById(this.previousUid) as HTMLButtonElement;\r\n this.nextButton = document.getElementById(this.nextUid) as HTMLButtonElement;\r\n this.intervalSelect = document.getElementById(this.intervalUid) as HTMLSelectElement;\r\n\r\n if (get_browser().name.toUpperCase().indexOf('IE') > -1) {\r\n this.el.onchange = (e) => {\r\n this.props.change(parseFloat(e.target['value']))\r\n }\r\n }\r\n }\r\n\r\n updateRunning() {\r\n this.el.disabled = this.running;\r\n\r\n this.startButton.style.display = this.running ? 'none' : '';\r\n this.stopButton.style.display = this.running ? '' : 'none';\r\n\r\n this.nextButton.disabled = this.running;\r\n this.previousButton.disabled = this.running;\r\n }\r\n\r\n startAnimate() {\r\n this.running = true;\r\n this.updateRunning();\r\n this.interval = setInterval(() => {\r\n let val = parseFloat(this.el.value);\r\n val += this.step;\r\n if (val > this.maxVal) {\r\n val = this.minVal\r\n }\r\n\r\n this.el.value = val.toString();\r\n this.props.change(val);\r\n }, parseInt(this.intervalSelect.value));\r\n }\r\n\r\n stopAnimate() {\r\n clearInterval(this.interval);\r\n this.running = false;\r\n this.updateRunning();\r\n }\r\n\r\n restartAnimate() {\r\n if (this.running) {\r\n this.stopAnimate();\r\n this.startAnimate();\r\n }\r\n }\r\n\r\n increment(v: number) {\r\n let val = parseFloat(this.el.value);\r\n val = v > 0 ? val + this.step : val - this.step;\r\n this.el.value = val.toString();\r\n this.props.change(val);\r\n }\r\n\r\n render() {\r\n let attrs = {\r\n id: this.uid,\r\n min: 0,\r\n type: 'range',\r\n onChange: (evt: ChangeEvent<HTMLInputElement>) => {\r\n this.props.change(parseFloat(evt.target.value))\r\n },\r\n style: {width: '100%', padding: '4px 0'},\r\n max: \"100\",\r\n step: '0.1',\r\n value: this.props.value ? this.props.value.toString() : '0',\r\n defaultValue: \"0\"\r\n };\r\n\r\n if (this.props.steps) {\r\n attrs.max = this.props.steps.toString();\r\n attrs.step = '1';\r\n }\r\n\r\n if (this.props.value) {\r\n delete attrs.defaultValue;\r\n } else {\r\n delete attrs.value;\r\n }\r\n\r\n\r\n let start = null;\r\n let stop = null;\r\n let previous = null;\r\n let next = null;\r\n let intervalSelect = null;\r\n\r\n let interval = \"200\";\r\n\r\n if (this.props.defaultAnimationInterval) {\r\n interval = this.props.defaultAnimationInterval.toFixed();\r\n }\r\n\r\n if (this.props.animate) {\r\n previous = <button id={this.previousUid} className=\"react-slider-previous\" onClick={() => {\r\n this.increment(-1)\r\n }} title=\"Previous\"/>;\r\n\r\n next = <button id={this.nextUid} className=\"react-slider-next\" onClick={() => {\r\n this.increment(1)\r\n }} title=\"Next\"/>;\r\n\r\n start = <button id={this.startUid} className=\"react-slider-start\" onClick={() => {\r\n this.startAnimate()\r\n }} title=\"Start\"/>;\r\n\r\n stop = <button id={this.stopUid} className=\"react-slider-stop\" onClick={() => {\r\n this.stopAnimate()\r\n }} title=\"Stop\"/>;\r\n\r\n intervalSelect = <span>\r\n\r\n <label style={{fontWeight: 'bold', marginRight: '3px'}}>Interval (s)</label>\r\n <select defaultValue={interval} id={this.intervalUid} onChange={() => {\r\n this.restartAnimate()\r\n }}>\r\n <option value=\"100\">0.1</option>\r\n <option value=\"200\">0.2</option>\r\n <option value=\"300\">0.3</option>\r\n <option value=\"400\">0.4</option>\r\n <option value=\"500\">0.5</option>\r\n <option value=\"600\">0.6</option>\r\n <option value=\"700\">0.7</option>\r\n <option value=\"800\">0.8</option>\r\n <option value=\"900\">0.9</option>\r\n <option value=\"1000\">1.0</option>\r\n </select>\r\n </span>;\r\n }\r\n\r\n return <div className=\"react-slider\">\r\n <input {...attrs}/>\r\n <div className=\"react-slider-controls\" style={{textAlign: 'center'}}>\r\n {previous}{start}{stop}{next}{intervalSelect}\r\n </div>\r\n </div>\r\n }\r\n\r\n}\r\n\r\n"]} \ No newline at end of file diff --git a/src/reactComponents/Slider.tsx b/src/reactComponents/Slider.tsx index 5fd20971714ad515c6133dd9b30196793abe5af4..b3352bdda07164bdde6efdcb3a62a97ebd196ad1 100644 --- a/src/reactComponents/Slider.tsx +++ b/src/reactComponents/Slider.tsx @@ -10,22 +10,20 @@ import {get_browser} from '../util/get_browser'; export interface iSlider { change: (d: number) => any; - steps?: number; - animate?: boolean; - defaultAnimationInterval?: number; - value?: number; + steps: number; + animate: boolean; + defaultAnimationInterval: number; + value: number; } export class Slider extends React.Component<iSlider, {}> { - static defaultProps = { - change: (d: number) => {}, + public static defaultProps = { steps: null, - animate: null, - defaultAnimationInterval: null, + animate: false, + defaultAnimationInterval: false, value: null }; - private uid: string; private startUid: string; private stopUid: string;