diff --git a/HISTORY.md b/HISTORY.md deleted file mode 100644 index e69de29..0000000 diff --git a/README.md b/README.md deleted file mode 100644 index 7334a99..0000000 --- a/README.md +++ /dev/null @@ -1,147 +0,0 @@ -# rc-slider ---- - -slider ui component for react - -[![NPM version][npm-image]][npm-url] -[![SPM version](http://spmjs.io/badge/rc-slider)](http://spmjs.io/package/rc-slider) -[![build status][travis-image]][travis-url] -[![Test coverage][coveralls-image]][coveralls-url] -[![gemnasium deps][gemnasium-image]][gemnasium-url] -[![node version][node-image]][node-url] -[![npm download][download-image]][download-url] -[![Sauce Test Status](https://saucelabs.com/buildstatus/rc-slider)](https://saucelabs.com/u/rc-slider) - -[![Sauce Test Status](https://saucelabs.com/browser-matrix/rc-slider.svg)](https://saucelabs.com/u/rc-slider) - -[npm-image]: http://img.shields.io/npm/v/rc-slider.svg?style=flat-square -[npm-url]: http://npmjs.org/package/rc-slider -[travis-image]: https://img.shields.io/travis/react-component/slider.svg?style=flat-square -[travis-url]: https://travis-ci.org/react-component/slider -[coveralls-image]: https://img.shields.io/coveralls/react-component/slider.svg?style=flat-square -[coveralls-url]: https://coveralls.io/r/react-component/slider?branch=master -[gemnasium-image]: http://img.shields.io/gemnasium/react-component/slider.svg?style=flat-square -[gemnasium-url]: https://gemnasium.com/react-component/slider -[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square -[node-url]: http://nodejs.org/download/ -[download-image]: https://img.shields.io/npm/dm/rc-slider.svg?style=flat-square -[download-url]: https://npmjs.org/package/rc-slider - -## Screenshots - - - - - - - - -## Feature - -* support ie8,ie8+,chrome,firefox,safari - -### Keyboard - - - -## install - -[![rc-slider](https://nodei.co/npm/rc-slider.png)](https://npmjs.org/package/rc-slider) - -## Usage - -```js -var Rcslider = require('rc-slider'); -var React = require('react'); -React.render(, container); -``` - -## API - -### props - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
nametypedefaultdescription
classNameStringrc-slideradditional css class of root dom node
minnumber0The minimum value of the slider
maxnumber100The maximum value of the slider
stepnumber1Value to be added or subtracted on each step the slider makes. Must be greater than zero. max - min should be evenly divisible by the step value.
valuenumber0Determines the initial positions of the handles.
marksarray[]mark every step for the slider, it will ignore the `step` parameter if it has been defined
indexnumber0For step or marks slider, determine the initial positions of the handles.
disabledbooleanfalseIf true the handles can't be moved.
- -## Development - -``` -npm install -npm start -``` - -## Example - -http://localhost:8000/examples/ - -online example: http://react-component.github.io/slider/build/examples/ - -## Test Case - -http://localhost:8000/tests/runner.html?coverage - -## Coverage - -http://localhost:8000/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8088/tests/runner.html?coverage - -## License - -rc-slider is released under the MIT license. diff --git a/assets/index.less b/assets/index.less deleted file mode 100644 index d3f0c32..0000000 --- a/assets/index.less +++ /dev/null @@ -1,124 +0,0 @@ -@prefixClass: rc-slider; - -// color -@disabledColor: #e7eaec; - -.@{prefixClass} { - position: relative; - height: 4px; - width: 100%; - border-radius: 2px; - background-color: #e9e9e9; - - &-track { - position: absolute; - left: 0; - height: 4px; - border-radius: 2px; - background-color: #b2e9fd; - z-index: 1; - } - - &-handle { - position: absolute; - margin-left: -7px; - margin-top: -5px; - width: 10px; - height: 10px; - cursor: default; - border-radius: 50%; - border: solid 2px #d9d9d9; - background-color: #fff; - z-index: 2; - - &:hover { - border-color: #999; - } - &-active { - border-color: #8cddfc; - &:active { - border-color: #2db7f5; - background-color: #2db7f5; - box-shadow: 0 0 0 5px rgba(45, 183, 245, .3); - } - &:hover { - border-color: #23c0fa; - } - } - } - - &-mark { - position: absolute; - top: 10px; - left: 0px; - width: 100%; - height: 20px; - font-size: 12px; - z-index: 3; - } - - &-mark-text { - position: absolute; - display: inline-block; - line-height: 1.5; - height: 20px; - vertical-align: middle; - text-align: center; - cursor: pointer; - color: #ccc; - &:first-child { - text-align: left; - } - &-active { - color: #999; - } - } - - &-step { - position: absolute; - width: 100%; - height: 4px; - background: transparent; - z-index: 1; - } - - &-dot { - position: absolute; - top: -2px; - margin-left: -4px; - width: 4px; - height: 4px; - border: 2px solid #fff; - background-color: #bcbcbc; - cursor: pointer; - border-radius: 50%; - vertical-align: middle; - &:first-child { - margin-left: -2px; - } - &:last-child { - margin-left: -6px; - } - &-active { - background-color: #8cddfc; - } - } - - &-disabled { - background-color: @disabledColor; - - .@{prefixClass}-track { - background-color: @disabledColor; - } - - .@{prefixClass}-handle { - border-color: @disabledColor; - background-color: #fff; - cursor: not-allowed; - } - - .@{prefixClass}-mark-text, .dot { - cursor: not-allowed!important; - } - } -} \ No newline at end of file diff --git a/examples/simple.html b/examples/simple.html deleted file mode 100644 index b3a4252..0000000 --- a/examples/simple.html +++ /dev/null @@ -1 +0,0 @@ -placeholder \ No newline at end of file diff --git a/examples/simple.js b/examples/simple.js deleted file mode 100644 index 29b1b4e..0000000 --- a/examples/simple.js +++ /dev/null @@ -1,8 +0,0 @@ -/** @jsx React.DOM */ -// use jsx to render html, do not modify simple.html -require('rc-slider/assets/index.css'); -var Slider = require('rc-slider'); -var React = require('react'); -// React.render(, document.getElementById('__react-content')); -// React.render(, document.getElementById('__react-content')); -React.render(, document.getElementById('__react-content')); diff --git a/index.js b/index.js deleted file mode 100644 index de274eb..0000000 --- a/index.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./lib/Slider'); diff --git a/lib/EventListener.js b/lib/EventListener.js deleted file mode 100644 index f8c9c23..0000000 --- a/lib/EventListener.js +++ /dev/null @@ -1,56 +0,0 @@ -/** - * Copyright 2013-2014 Facebook, Inc. - * - * This file contains a modified version of: - * https://github.com/facebook/react/blob/v0.12.0/src/vendor/stubs/EventListener.js - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - * TODO: remove in favour of solution provided by: - * https://github.com/facebook/react/issues/285 - */ - -/** - * Does not take into account specific nature of platform. - */ -'use strict'; - -var EventListener = { - /** - * Listen to DOM events during the bubble phase. - * - * @param {DOMEventTarget} target DOM element to register listener on. - * @param {string} eventType Event type, e.g. 'click' or 'mouseover'. - * @param {function} callback Callback function. - * @return {object} Object with a `remove` method. - */ - listen: function listen(target, eventType, callback) { - if (target.addEventListener) { - target.addEventListener(eventType, callback, false); - return { - remove: function remove() { - target.removeEventListener(eventType, callback, false); - } - }; - } else if (target.attachEvent) { - target.attachEvent('on' + eventType, callback); - return { - remove: function remove() { - target.detachEvent('on' + eventType, callback); - } - }; - } - } -}; - -module.exports = EventListener; diff --git a/lib/Slider.js b/lib/Slider.js deleted file mode 100644 index 5c92e6f..0000000 --- a/lib/Slider.js +++ /dev/null @@ -1,389 +0,0 @@ -/** @jsx React.DOM */ -var React = require('react'); -var EventListener = require('./EventListener'); - -function pauseEvent(e) { - if (e.stopPropagation) { - e.stopPropagation(); - } - if (e.preventDefault) { - e.preventDefault(); - } - e.cancelBubble = true; - e.returnValue = false; - return false; -} - -function prefixClsFn(prefixCls) { - var args = Array.prototype.slice.call(arguments, 1); - return args.map((s)=> { - return prefixCls + '-' + s; - }).join(' '); -} - -var Slider = React.createClass({ - propTypes: { - min: React.PropTypes.number, - max: React.PropTypes.number, - step: React.PropTypes.number, - value: React.PropTypes.number, - index: React.PropTypes.number, - marks: React.PropTypes.array, - className: React.PropTypes.string, - disabled: React.PropTypes.bool, - onBeforeChange: React.PropTypes.func, - onChange: React.PropTypes.func, - onAfterChange: React.PropTypes.func - }, - - getDefaultProps: function() { - return { - min: 0, - max: 100, - step: 1, - value: 0, - marks: [], - className: 'rc-slider', - disabled: false, - index: 0 - }; - }, - - getInitialState: function() { - var props = this.props; - var value = this._trimAlignValue(props.value); - var marksLen = props.marks.length; - if (marksLen > 0) { - value = ((props.max - props.min) / (marksLen - 1)) * (props.index); - value = value.toFixed(5); - } - - return { - upperBound: 0, - sliderLength: 0, - value: value, - active: props.disabled ? '' : ((value > props.min || props.index > 0) ? 'active' : '') - }; - }, - - componentWillReceiveProps: function(newProps) { - var value = newProps.value; - this.state.value = this._trimAlignValue(value, newProps); - }, - - componentDidMount: function() { - this._onHandleResizeListener = EventListener.listen(window, 'resize', this.handleResize); - this.handleResize(); - }, - - componentWillUnmount: function() { - if (this._onHandleResizeListener) { - this._onHandleResizeListener.remove(); - } - }, - - getValue: function() { - return this.state.value; - }, - - getIndex: function() { - var props = this.props; - if (props.marks.length === 0) { - return; - } - var value = this.state.value; - var unit = (props.max - props.min) / (props.marks.length - 1); - return Math.floor(value / unit); - }, - - _trimAlignValue: function(val, props) { - props = props || this.props; - - var step = props.marks.length > 0 ? (props.max - props.min) / (props.marks.length - 1) : props.step; - - if (val <= props.min) { - val = props.min; - } - if (val >= props.max) { - val = props.max; - } - - var valModStep = (val - props.min) % step; - var alignValue = val - valModStep; - - if (Math.abs(valModStep) * 2 >= step) { - alignValue += (valModStep > 0) ? step : (-step); - } - - return parseFloat(alignValue.toFixed(5)); - }, - - _calcOffset: function(value) { - var ratio = (value - this.props.min) / (this.props.max - this.props.min); - return ratio * this.state.upperBound; - }, - - _calcValue: function(offset) { - var ratio = offset / this.state.upperBound; - return ratio * (this.props.max - this.props.min) + this.props.min; - }, - - _calValueByPos: function (position, callback) { - var pixelOffset = position - this.state.sliderStart; - // pixelOffset -= (this.state.handleSize / 2); - - var nextValue = this._trimAlignValue(this._calcValue(pixelOffset)); - - this.setState({value: nextValue, active: 'active'}, callback); - }, - - _getMousePosition: function(e) { - return e.pageX || (e.clientX + document.documentElement.scrollLeft); - }, - - _triggerEvents: function(event) { - var props = this.props; - var hasMarks = props.marks && props.marks.length > 0; - if (props[event]) { - props[event](hasMarks ? this.getIndex() : this.state.value); - } - }, - - _addEventHandles: function() { - this._onMouseMoveListener = EventListener.listen(document, 'mousemove', this._onMouseMove); - this._onMouseUpListener = EventListener.listen(document, 'mouseup', this._onMouseUp); - }, - - _removeEventHandles: function () { - if (this._onMouseMoveListener) { - this._onMouseMoveListener.remove(); - } - - if (this._onMouseUpListener) { - this._onMouseUpListener.remove(); - } - }, - - _start: function(position) { - if (document.activeElement) { - document.activeElement.blur(); - } - - this._triggerEvents('onBeforeChange'); - - this.setState({ - startValue: this.state.value, - startPosition: position - }); - }, - - _end: function() { - this._removeEventHandles(); - this.setState(this._triggerEvents.bind(this, 'onAfterChange')); - }, - - _onMouseUp: function() { - this._end(); - }, - - _onMouseMove: function(e) { - pauseEvent(e); - var position = this._getMousePosition(e); - var props = this.props; - var state = this.state; - - var value = state.value; - var oldValue = value; - - var diffPosition = position - state.startPosition; - - var diffValue = diffPosition / (state.sliderLength) * (props.max - props.min); - var newValue = this._trimAlignValue(state.startValue + diffValue); - - value = newValue; - - if (newValue !== oldValue) { - this.setState({value: value, active: 'active'} ,this._triggerEvents.bind(this, 'onChange')); - } - }, - - handleResize: function() { - var slider = this.refs.slider.getDOMNode(); - var rect = slider.getBoundingClientRect(); - - var sliderMin = rect.left; - var sliderMax = rect.right; - - this.setState({ - upperBound: slider.clientWidth, - sliderLength: Math.abs(sliderMax - sliderMin), - sliderStart: sliderMin - }); - }, - - handleMouseDown: function() { - return (e) => { - if (this.props.disabled) { - return; - } - var position = this._getMousePosition(e); - this._start(position); - this._addEventHandles(); - pauseEvent(e); - }; - }, - - handleSliderMouseDown: function(e) { - if (this.props.disabled) { - return; - } - var position = this._getMousePosition(e); - this._calValueByPos(position, - () => { - this._triggerEvents('onChange'); - this._start(position); - this._addEventHandles(); - } - ); - pauseEvent(e); - }, - - renderSteps: function() { - var props = this.props; - var marksLen = props.marks.length; - var stepNum = marksLen > 0 ? marksLen : Math.floor((props.max - props.min) / props.step) + 1; - var unit = this.state.sliderLength / (stepNum - 1); - - var prefixCls = props.className; - var stepClassName = prefixClsFn(prefixCls, 'step'); - - var elements = []; - for (var i = 0; i < stepNum; i++) { - var offset = unit * i; - var style = { - left: offset.toFixed(5) - }; - var className = prefixClsFn(prefixCls, 'dot'); - if (i <= this.getIndex() || (this._calcValue(offset) <= this.getValue())) { - className = prefixClsFn(prefixCls, 'dot', 'dot-active'); - } - elements[i] = ( - - ); - } - - return ( -
- {elements} -
- ); - }, - - renderMark: function(i) { - var marks = this.props.marks; - var marksLen = marks.length; - var unit = this.state.sliderLength / (marksLen - 1); - var offset = unit * i; - - var style = { - width: (unit / 2).toFixed(5) - }; - - if (i === (marksLen - 1)) { - style.right = '0'; - style.width = 'auto'; - }else { - style.left = (i > 0 ? (offset - (unit / 4)).toFixed(5) : offset); - } - - var prefixCls = this.props.className; - var className = prefixClsFn(prefixCls, 'mark-text'); - - if (i <= this.getIndex()) { - className = prefixClsFn(prefixCls, 'mark-text', 'mark-text-active'); - } - - return ( - {this.props.marks[i]} - ); - }, - - renderMarks: function() { - var marks = this.props.marks; - var marksLen = marks.length; - var elements = []; - for (var i = 0; i < marksLen; i++) { - elements[i] = this.renderMark(i); - } - - var prefixCls = this.props.className; - var className = prefixClsFn(prefixCls, 'mark'); - - return ( -
- {elements} -
- ); - }, - - renderHandle: function(offset) { - var handleStyle = { - left: offset - }; - - var prefixCls = this.props.className; - var className = prefixClsFn(prefixCls, 'handle'); - - if (this.state.active) { - className = prefixClsFn(prefixCls, 'handle', 'handle-active'); - } - - return ( - - ); - }, - - renderTrack: function(offset) { - var style = { - width: offset - }; - - var prefixCls = this.props.className; - var trackClassName = prefixClsFn(prefixCls, 'track'); - - return ( -
- ); - }, - - render: function() { - var state = this.state; - var props = this.props; - - var value = state.value; - var offset = this._calcOffset(value); - - var track = this.renderTrack(offset); - var handles = this.renderHandle(offset); - var steps = (props.step > 1 || props.marks.length > 0) ? this.renderSteps() : null; - var sliderMarks = (props.marks.length > 0) ? this.renderMarks() : null; - - var prefixCls = props.className; - var sliderClassName = props.disabled ? prefixClsFn(prefixCls, 'disabled') : prefixCls; - - return ( -
- {track} - {handles} - {steps} - {sliderMarks} -
- ); - } -}); - -module.exports = Slider; diff --git a/package.json b/package.json deleted file mode 100644 index 1e819f1..0000000 --- a/package.json +++ /dev/null @@ -1,56 +0,0 @@ -{ - "name": "rc-slider", - "version": "1.0.0", - "description": "slider ui component for react", - "keywords": [ - "react", - "react-component", - "react-slider", - "slider" - ], - "homepage": "http://github.com/react-component/slider", - "author": "sima.zhang1990@gmail.com", - "repository": { - "type": "git", - "url": "git@github.com:react-component/slider.git" - }, - "bugs": { - "url": "http://github.com/react-component/slider/issues" - }, - "licenses": "MIT", - "spm": { - "dependencies": { - "react": "*" - } - }, - "config":{ - "port": 8000 - }, - "scripts": { - "build": "rc-tools run build", - "less": "rc-tools run less", - "gh-pages": "rc-tools run gh-pages", - "history": "rc-tools run history", - "start": "node-dev --harmony node_modules/.bin/rc-server", - "publish": "spm publish && rc-tools run tag", - "lint": "rc-tools run lint", - "test": "", - "saucelabs": "rc-tools run saucelabs", - "browser-test": "rc-tools run browser-test", - "browser-test-cover": "rc-tools run browser-test-cover" - }, - "devDependencies": { - "expect.js": "0.3.x", - "precommit-hook": "1.x", - "rc-server": "2.x", - "rc-tools": "2.x", - "react": "0.13.x", - "node-dev":"2.x", - "jquery": "^1.11.2", - "css-loader": "^0.9.1" - }, - "precommit": [ - "lint", - "less" - ] -} diff --git a/tests/index.spec.js b/tests/index.spec.js deleted file mode 100644 index 87d094b..0000000 --- a/tests/index.spec.js +++ /dev/null @@ -1,75 +0,0 @@ -/** @jsx React.DOM */ -var expect = require('expect.js'); -var Slider = require('../index.js'); -var React = require('react'); -var TestUtils = React.addons.TestUtils; -var Simulate = TestUtils.Simulate; -var $ = require('jquery'); - -describe('rc-slider', function () { - this.timeout(5000); - var div = document.createElement('div'); - document.body.appendChild(div); - - afterEach(function () { - React.unmountComponentAtNode(div); - }); - - it('should render a simple slider with value correctly!', function () { - var slider = React.render( - , - div - ); - var node = $(div); - expect(node.find('.rc-slider').length).to.be(1); - expect(node.find('.rc-slider-handle').length).to.be(1); - expect(node.find('.rc-slider-track').length).to.be(1); - expect(slider.getValue()).to.be(40); - var trackWidth = node.find('.rc-slider-track')[0].style.width; - expect(trackWidth).to.eql(node.find('.rc-slider-handle')[0].style.left); - }); - - it('should render a slider with correct numbers of step!', function () { - var slider = React.render( - , - div - ); - var node = $(div); - expect(node.find('.rc-slider').length).to.be(1); - expect(node.find('.rc-slider-handle').length).to.be(1); - expect(node.find('.rc-slider-track').length).to.be(1); - expect(node.find('.rc-slider-dot').length).to.be(6); - expect(slider.getValue()).to.be(0); - }); - - it('should render a slider with marks correctly!', function () { - var slider = React.render( - , - div - ); - var node = $(div); - expect(node.find('.rc-slider').length).to.be(1); - expect(node.find('.rc-slider-handle').length).to.be(1); - expect(node.find('.rc-slider-track').length).to.be(1); - expect(node.find('.rc-slider-dot').length).to.be(slider.props.marks.length); - expect(node.find('.rc-slider-mark').length).to.be(1); - expect(node.find('.rc-slider-mark-text').length).to.be(slider.props.marks.length); - expect(slider.getIndex()).to.be(3); - }); - - it('should mouseDown works!', function (done) { - var slider = React.render( - , - div - ); - var selectedStep = slider.refs.step3.getDOMNode(); - - Simulate.mouseDown(selectedStep); - - setTimeout( function() { - expect(slider.state.active).to.be('active'); - done(); - }, 200); - }); - -}); \ No newline at end of file diff --git a/tests/runner.html b/tests/runner.html deleted file mode 100644 index 7bd069c..0000000 --- a/tests/runner.html +++ /dev/null @@ -1 +0,0 @@ -stub \ No newline at end of file