src/slider/index.js File

  1. import React from 'react'
  2. import PropTypes from 'prop-types'
  3. import Component from '../utils/Component'
  4. import classnames from 'classnames'
  5. import Logger from '../utils/logger'
  6.  
  7. import Drag from '../drag/'
  8.  
  9. import '../style'
  10. import 'phoenix-styles/less/modules/slider.less'
  11.  
  12. /**
  13.  * 滑动输入条组件<br/>
  14.  * - 滑动进度条确定当前进度的百分比。
  15.  * - 可通过设置process确定初始进度百分比, 范围从0-100。
  16.  * - 可通过tipMode选择当前查看进度的方式，可选default和tooltip。
  17.  * - 可通过placement设置当前进度提示框的位置, 可选top/bottoom(tipMode为tooltip时生效)。
  18.  * - 可通过tipStay设置初始和松开按钮时提示是否消失，默认false不显示(tipMode为tooltip时生效)。
  19.  * - 可通过range制定范围，默认0-100，必需是长度为2的数组，第一个数字表示初始，第二个数字表示终点。
  20.  * - 可通过showRange判断是否在进度条前后显示范围，默认不显示。
  21.  * - 可通过duration设置固定移动的距离，默认1。
  22.  * - 可通过slideCallback设置拖拽进度条松开时的回调函数。
  23.  * - 可通过disabled设置进度条只读。
  24.  * - 使用Slider前确保父级是有宽度的元素；使用flex需要加一层宽度100%的外壳。
  25.  *
  26.  * 主要属性和接口：
  27.  * - process:初始进度百分比, 默认0 <br/>
  28.  * 如: `<Slider progress={10}/>`
  29.  * - placement:进度提示框的位置, 默认top <br/>
  30.  * 如: `<Slider placement='bottom' />`
  31.  * - tipStay:初始和松开按钮时提示是否消失，默认false <br/>
  32.  * 如: `<Slider tipStay />`
  33.  * - range:范围，默认[0,100]。 <br/>
  34.  * 如: `<Slider range={[20,50]} />`
  35.  * - showRange:是否在进度条前后显示范围，默认不显示。 <br/>
  36.  * 如: `<Slider showRange />`
  37.  * - duration:固定移动的距离，默认1。 <br/>
  38.  * 如: `<Slider duration={20} />`
  39.  * - slideCallback:拖拽进度条松开时的回调函数 <br/>
  40.  * 如: `<Slider slideCallback={(progress)=>{console.log(progress);} />`
  41.  * - disabled:进度条只读, 不可操作 <br/>
  42.  * 如: `<Slider disabled/>`
  43.  *
  44.  * @class Slider
  45.  * @module 操作类组件
  46.  * @extends Component
  47.  * @constructor
  48.  * @since 1.0.0
  49.  * @demo slider|slider.js {展示}
  50.  * @show true
  51.  * */
  52.  
  53. export default class Slider extends Component{
  54.     
  55.     static propTypes = {
  56.         /**
  57.          * 样式前缀
  58.          * @property classPrefix
  59.          * @type String
  60.          * @default 'slider'
  61.          * */
  62.         classPrefix: PropTypes.string,
  63.         /**
  64.          * 标签tagName
  65.          * @property componentTag
  66.          * @type String
  67.          * */
  68.         componentTag:PropTypes.string,
  69.         /**
  70.          * 初始进程,默认0
  71.          * @property progress
  72.          * @type String
  73.          * */
  74.         progress:PropTypes.number,
  75.         /**
  76.          * 进程提示的位置,默认top
  77.          * @property placement
  78.          * @type String
  79.          * @default 'top'
  80.          * */
  81.         placement: PropTypes.string,
  82.             /**
  83.          * 范围，默认0-100，可传固定范围的数组如：[25,50]
  84.          * @property range
  85.          * @type Array
  86.          * @default [0,100]
  87.          * */
  88.         range: PropTypes.array,
  89.         /**
  90.          * 是否在进度条前后显示范围
  91.          * @property showRange
  92.          * @type Boolean
  93.          * @default false
  94.          * */
  95.         showRange: PropTypes.bool,
  96.         /**
  97.          * 显示提示的模式，可选[default,tooltip]
  98.          * @property tipMode
  99.          * @type String
  100.          * @default 'default'
  101.          * */
  102.         tipMode: PropTypes.string,
  103.             /**
  104.          * 每次移动的固定距离，默认1
  105.          * @property duration
  106.          * @type Number
  107.          * @default 1
  108.          * */
  109.         duration: PropTypes.number,
  110.         /**
  111.          * 初始及松开按钮时是否显示tooltip
  112.          * @property tipStay
  113.          * @type Boolean
  114.          * @default false
  115.          * */
  116.         tipStay: PropTypes.bool,
  117.         /**
  118.          * 改变进程时的回调函数
  119.          * @method slideCallback
  120.          * @param {number} progress 进度
  121.          * @type Function
  122.          * */
  123.         slideCallback: PropTypes.func
  124.     };
  125.  
  126.     static defaultProps = {
  127.         placement: 'top',
  128.         progress: 0,
  129.         range: [0,100],
  130.         showRange: false,
  131.         duration: 1,
  132.         tipMode: 'default',
  133.         tipStay: false,
  134.         classPrefix:'slider',
  135.         componentTag:'div',
  136.         classMapping : {
  137.             'disabled': 'disabled',
  138.             'top': 'tip-top',
  139.             'bottom': 'tip-bottom'
  140.         }
  141.     };
  142.  
  143.     constructor(props, context) {
  144.         super(props, context)
  145.         
  146.         new Logger('Slider')
  147.         
  148.         this.init(props);
  149.         
  150.         this.state = {
  151.             realProgress: props.progress || this.range[0],
  152.             tipVisible: props.tipStay || false
  153.         }
  154.         
  155.     }
  156.  
  157.     init(props){
  158.         this.range = this.validateRange(props);
  159.         this.rangeDiff = this.range[1]-this.range[0];
  160.  
  161.         this.duration = this.validateDuration(props);
  162.         this.eachDur = (this.range[1]-this.range[0])/this.duration;
  163.     }
  164.  
  165.     validateRange(props){
  166.         let {range, progress} = props, 
  167.             defaultRange = [0,100];
  168.         if(!range instanceof Array) return defaultRange;
  169.         if(range.length != 2){
  170.             console.error('Invalid prop `range` of length not equal to 2.');
  171.             return defaultRange;
  172.         } 
  173.         if(range[0] >= range[1]){
  174.             console.error('Invalid prop `range[0]` must be less than or equal to `range[1]`.');
  175.             return defaultRange;
  176.         }
  177.         if(progress)
  178.             if(progress<range[0] || progress>range[1]){
  179.                 console.error('`Progress prop` have to between `range[0]` and `range[1]`.');
  180.                 return range;
  181.             }
  182.         return range;
  183.     }
  184.  
  185.     validateDuration(props){
  186.         let {duration} = props, 
  187.             defaultDuration = 1;
  188.         
  189.         if(duration<=0) {
  190.             console.error('Invalid prop `duration` have to be Positive.');
  191.             return defaultDuration;
  192.         }
  193.         if((this.range[1] - this.range[0])%duration != 0){ // 不能整除的情况
  194.             console.error('Prop `duration` can not be divided by `range`.');
  195.             return defaultDuration;
  196.         }
  197.         return duration;
  198.     }
  199.  
  200.     componentDidMount(){
  201.         this.sliderLength = parseInt(this.sliderLine.offsetWidth);
  202.         this.eachSection = this.sliderLength/this.rangeDiff*this.duration;
  203.         // if(this.eachSection<1) this.eachSection = 1; // 最小1px
  204.  
  205.         this.newProgressWidth = this.getNewProgressWidth(this.state.realProgress);
  206.         this.setSliderPosition(this.newProgressWidth + 'px');
  207.     }
  208.  
  209.     componentWillReceiveProps(nextProps){
  210.         if(nextProps.progress!=undefined && this.state.realProgress != nextProps.progress){
  211.             this.setState({
  212.                 realProgress: nextProps.progress
  213.             });
  214.             this.setNewProgress(nextProps)
  215.         }
  216.         if(nextProps.range!=undefined && this.range != nextProps.range){
  217.             this.init(nextProps)
  218.             this.setNewProgress(nextProps)
  219.         }
  220.     }
  221.  
  222.     setNewProgress(props){
  223.         this.newProgressWidth = this.getNewProgressWidth(props.progress);
  224.         this.setSliderPosition(this.newProgressWidth + 'px');
  225.     }
  226.  
  227.     getNewProgressWidth(realProgress){ // 保留2位小数
  228.         let per = Math.round((realProgress-this.range[0])/this.rangeDiff*100)/100
  229.         if(per>=1) per = 1
  230.         if(per<=0) per = 0
  231.         return this.sliderLength * per
  232.     }
  233.  
  234.     setSliderPosition(distance){
  235.         this.sliderProgress.style.width = distance;
  236.         this.sliderBtn.style.left = distance;
  237.     }
  238.  
  239.     dragCallback(event, position){
  240.         let newProgress, nowSec;
  241.  
  242.         this.preX = position.start.x;
  243.         this.X = position.move.x;
  244.         this.distance = this.X - this.preX;
  245.  
  246.         this.prevProgressWidth = this.newProgressWidth + this.distance;
  247.  
  248.         if(this.prevProgressWidth <= 0) this.prevProgressWidth = 0;
  249.         if(this.prevProgressWidth >= this.sliderLength) this.prevProgressWidth = this.sliderLength;
  250.  
  251.         nowSec = Math.round(this.prevProgressWidth/this.eachSection, 0);
  252.         this.prevProgressWidth = this.eachSection*nowSec;
  253.  
  254.         newProgress = this.prevProgressWidth/this.sliderLength * this.rangeDiff + this.range[0];
  255.  
  256.         this.setSliderPosition(this.prevProgressWidth + 'px');
  257.  
  258.         this.setState({
  259.             tipVisible: true,
  260.             realProgress: parseInt(newProgress)
  261.         });
  262.     }
  263.  
  264.     dropCallback(event, position){
  265.         let {tipStay, slideCallback} = this.props
  266.         if(!tipStay){
  267.             this.setState({
  268.                 tipVisible: false
  269.             });
  270.         }
  271.  
  272.         this.newProgressWidth = this.prevProgressWidth;
  273.  
  274.         if(slideCallback) slideCallback(this.state.realProgress);
  275.     }
  276.  
  277.     renderSliderText(showTipMode){
  278.         if(showTipMode){
  279.             return <div className={this.setPhPrefix('text')}>{this.state.realProgress}</div>
  280.         }        
  281.     }
  282.  
  283.     renderSliderRange(){
  284.         if(this.props.showRange){
  285.             return (
  286.                 <div className={this.setPhPrefix('range')}>
  287.                     <strong className={this.setPhPrefix('range-start')}>{this.range[0]}</strong>
  288.                     <strong className={this.setPhPrefix('range-end')}>{this.range[1]}</strong>
  289.                 </div>
  290.             );
  291.         }else{
  292.             return '';
  293.         }
  294.     }
  295.  
  296.     renderSlider(){
  297.         let {componentTag:Component, className, showRange, tipMode} = this.props,
  298.             showTipMode = tipMode=='default';
  299.  
  300.         return (
  301.             <Component {...this.otherProps} className={classnames(
  302.                 this.getProperty(true),
  303.                 className,
  304.                 showRange? this.setPhPrefix('keep-range',true):''
  305.             )}>
  306.                 {this.renderSliderText(showTipMode)}
  307.                 {this.renderSliderRange()}
  308.                 <div className={this.setPhPrefix('line')} ref={(sliderLine)=>{this.sliderLine=sliderLine}}>
  309.                     <div className={this.setPhPrefix('progress')} ref={(sliderProgress)=>{this.sliderProgress=sliderProgress}}></div>
  310.                     <div className={this.setPhPrefix('content')} ref={(sliderBtn)=>{this.sliderBtn=sliderBtn}}>
  311.                         <div className={classnames(this.setPhPrefix('tip'), this.state.tipVisible && !showTipMode?'show':'hide')}>{this.state.realProgress}</div>
  312.                         <Drag className={classnames(this.setPhPrefix('btn'),'hardware')} dragCallback={this.dragCallback.bind(this)} dropCallback={this.dropCallback.bind(this)}></Drag>
  313.                     </div>
  314.                 </div>
  315.             </Component>
  316.         );
  317.     }
  318.  
  319.     render(){
  320.         return this.renderSlider()
  321.     }
  322.  
  323. }
  324.