Code coverage report for All files

19 | All files 20 |

22 |

23 | Unknown% 24 | Statements 25 | 0/0 26 |

27 |

28 | Unknown% 29 | Branches 30 | 0/0 31 |

32 |

33 | Unknown% 34 | Functions 35 | 0/0 36 |

37 |

38 | Unknown% 39 | Lines 40 | 0/0 41 |

42 |

44 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 45 |

50 | ); 51 | } 52 | } 53 | 54 | export default Dragger; 55 | -------------------------------------------------------------------------------- /src/chartSlider/decorator/dragging.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import FinalDrag from './finalDrag.jsx'; 3 | 4 | /** 5 | * 装饰器 6 | */ 7 | const dragging = CHART_WIDTH => 8 | OldComponent => 9 | @FinalDrag() 10 | class Dragging extends PureComponent { 11 | static propTypes = { 12 | }; 13 | 14 | constructor(props) { 15 | super(props); 16 | this.state = { 17 | data: props.data, 18 | }; 19 | } 20 | 21 | componentWillReceiveProps(nextProps) { 22 | this.setState({ 23 | data: nextProps.data, 24 | }); 25 | } 26 | 27 | changeDragStatus = status => { 28 | this.isDragging = status; 29 | }; 30 | 31 | /** 32 | * 拖拽中的效果展示 33 | */ 34 | dragSetShowIndex = (width, direction, callback) => { 35 | if(this.isDragging === false) return; 36 | const { data } = this.props; 37 | const { showPercent, showStartPercent } = data; 38 | 39 | let newShowStartPercent = showStartPercent + (width / CHART_WIDTH).toFixed(6) * 1; 40 | if (newShowStartPercent < 0) { 41 | newShowStartPercent = 0; 42 | } 43 | if ((showPercent + newShowStartPercent) > 1) { 44 | newShowStartPercent = 1 - showPercent; 45 | } 46 | this.setState({ 47 | data: Object.assign({}, data, { 48 | showStartPercent: newShowStartPercent, 49 | }), 50 | }); 51 | if (callback) { 52 | callback({ 53 | showPercent, 54 | showStartPercent: newShowStartPercent, 55 | }); 56 | } 57 | }; 58 | 59 | /** 60 | * 左右句柄拖拽 61 | */ 62 | dragSetShowNum = (dragWidth, direction, callback) => { 63 | if(this.isDragging === false) return; 64 | const { data } = this.props; 65 | const { showPercent, showStartPercent } = data; 66 | 67 | const diff = (dragWidth / CHART_WIDTH).toFixed(6) * 1; 68 | let newIndex; 69 | let newShowNum; 70 | 71 | if (direction === 'left') { 72 | newIndex = showStartPercent + diff; 73 | newShowNum = showPercent - diff; 74 | if (newIndex < 0) { 75 | newIndex = 0; 76 | newShowNum = showStartPercent + showPercent; 77 | } 78 | if (newIndex >= showStartPercent + showPercent) { 79 | newIndex = showStartPercent + showPercent - 0.01; 80 | newShowNum = 0.01; 81 | } 82 | } else { 83 | newIndex = showStartPercent; 84 | newShowNum = showPercent + diff; 85 | if (newShowNum <= 0) newShowNum = 0.01; 86 | if ((newShowNum + newIndex) >= 1) { 87 | newShowNum = 1 - newIndex; 88 | } 89 | } 90 | this.setState({ 91 | data: Object.assign({}, data, { 92 | showStartPercent: newIndex, 93 | showPercent: newShowNum, 94 | }), 95 | }); 96 | if (callback) { 97 | callback({ 98 | showStartPercent: newIndex, 99 | showPercent: newShowNum, 100 | }); 101 | } 102 | }; 103 | 104 | /** 105 | * 点击拖拽时触发 106 | */ 107 | setClickDrag = (diff, callback) => { 108 | const { data } = this.props; 109 | const { showPercent, showStartPercent } = data; 110 | let newShowPercent = showStartPercent + diff; 111 | if ((showPercent + newShowPercent) > 1) { 112 | newShowPercent = 1 - showPercent; 113 | } else if (newShowPercent < 0) { 114 | newShowPercent = 0; 115 | } 116 | this.props.finalDrag({ 117 | showStartPercent: newShowPercent, 118 | showPercent, 119 | }); 120 | if (callback) { 121 | callback({ 122 | showStartPercent: newShowPercent, 123 | showPercent, 124 | }); 125 | } 126 | }; 127 | 128 | /** 129 | * 拖拽结束时触发 130 | */ 131 | finalDrag = () => { 132 | const { showStartPercent, showPercent } = this.state.data; 133 | this.props.finalDrag({ 134 | showStartPercent, 135 | showPercent, 136 | }); 137 | }; 138 | 139 | render() { 140 | const _dragActions = { 141 | setClickDrag: this.setClickDrag, 142 | dragSetShowIndex: this.dragSetShowIndex, 143 | dragSetShowNum: this.dragSetShowNum, 144 | finalDrag: this.finalDrag, 145 | changeDragStatus: this.changeDragStatus, 146 | }; 147 | return ( 148 |

149 | 154 |

155 | ); 156 | } 157 | }; 158 | 159 | export default dragging; 160 | -------------------------------------------------------------------------------- /src/chartSlider/decorator/finalDrag.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | 3 | /** 4 | * 装饰器 5 | */ 6 | const finalDrag = () => 7 | OldComponent => 8 | class extends PureComponent { 9 | static propTypes = { 10 | }; 11 | 12 | constructor(props) { 13 | super(props); 14 | this.state = { 15 | data: props.data, 16 | }; 17 | } 18 | 19 | componentWillReceiveProps(nextProps) { 20 | this.setState({ 21 | data: nextProps.data, 22 | }); 23 | } 24 | 25 | finalDrag = params => { 26 | const { showStartPercent, showPercent } = params; 27 | this.setState({ 28 | data: Object.assign({}, this.props.data, { showStartPercent, showPercent }) 29 | }); 30 | }; 31 | 32 | render() { 33 | return ( 34 |

35 | 40 |

41 | ); 42 | } 43 | }; 44 | 45 | export default finalDrag; 46 | -------------------------------------------------------------------------------- /src/chartSlider/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import Dragger from './components/dragger.jsx'; 4 | import './index.less'; 5 | 6 | const DefaultClickJumpPercent = 4 / 48; 7 | 8 | class DragComponent extends PureComponent { 9 | static propTypes = { 10 | className: PropTypes.string, 11 | }; 12 | 13 | /** 14 | * 点击左右空白区域触发的点击拖拽 15 | */ 16 | clickDrag = direction => { 17 | const { clickJumpPercent, _dragActions } = this.props; 18 | let cjp = clickJumpPercent ? clickJumpPercent : DefaultClickJumpPercent; 19 | _dragActions.setClickDrag(direction === 'left' ? -1 * cjp : cjp); 20 | }; 21 | 22 | renderDragger = (direction, dragCallback) => { 23 | const { changeDragStatus, finalDrag } = this.props._dragActions; 24 | return ( 25 | 32 | ); 33 | }; 34 | 35 | render() { 36 | const { data, width } = this.props; 37 | const { dragSetShowNum, dragSetShowIndex } = this.props._dragActions; 38 | const { showPercent, showStartPercent } = data; 39 | const areaWidth = width * showPercent; 40 | const positionLeft = showStartPercent * width; 41 | return ( 42 |

43 |

{ this.clickDrag('left'); }} /> 44 |

48 |

49 | {this.renderDragger('left', dragSetShowNum)} 50 |

51 |

52 | {this.renderDragger('right', dragSetShowNum)} 53 |

54 |

55 | {this.renderDragger('', dragSetShowIndex)} 56 |

57 |

58 |

{ this.clickDrag('right'); }} /> 59 |

60 | ); 61 | } 62 | } 63 | 64 | export default DragComponent; 65 | -------------------------------------------------------------------------------- /src/chartSlider/index.less: -------------------------------------------------------------------------------- 1 | .chart-slider{ 2 | display: flex; 3 | height: 30px; 4 | background: rgba(0, 0, 0, 0.005); 5 | position: absolute; 6 | width: 100%; 7 | .left-area{ 8 | flex: 0 0; 9 | min-height: 100%; 10 | } 11 | .drag-area{ 12 | flex: 0 0; 13 | min-height: 100%; 14 | background: rgba(0, 0, 0, 0.06); 15 | position: relative; 16 | .center-drag{ 17 | width: 100%; 18 | height: 100%; 19 | cursor: col-resize; 20 | } 21 | .left-drag, .right-drag{ 22 | display: inline-block; 23 | width: 13px; 24 | height: 100%; 25 | position: absolute; 26 | background: -9px 0 url('./components/drag.svg') no-repeat; 27 | background-size: auto 30px; 28 | cursor: ew-resize; 29 | } 30 | .left-drag{ 31 | left: -6px; 32 | } 33 | .right-drag{ 34 | right: -6px; 35 | } 36 | } 37 | .right-area{ 38 | flex: 1 0; 39 | min-height: 100%; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/decorator/transformDecorator.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | 3 | const calTransformWidth = (showPercent, showStartPercent, CHART_WIDTH) => { 4 | return `translate(${ showStartPercent * CHART_WIDTH / showPercent * -1 }, 0)`; 5 | }; 6 | 7 | /** 8 | * 装饰器 9 | */ 10 | const transformDecorator = CHART_WIDTH => 11 | OldComponent => 12 | class extends PureComponent { 13 | static propTypes = {}; 14 | 15 | render() { 16 | const { data } = this.props; 17 | return ( 18 | 21 | 24 | 25 | ); 26 | } 27 | }; 28 | 29 | export default transformDecorator; 30 | -------------------------------------------------------------------------------- /src/index.jsx: -------------------------------------------------------------------------------- 1 | import DragComponentImport from './chartSlider/index.jsx'; 2 | import DraggingDecoratorImport from './chartSlider/decorator/dragging.jsx'; 3 | import transformDecoratorImport from './decorator/transformDecorator.jsx' 4 | 5 | export const DragComponent = DragComponentImport; 6 | export const DraggingDecorator = DraggingDecoratorImport; 7 | export const transformDecorator = transformDecoratorImport; -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var UglifyJsPlugin = require('uglifyjs-webpack-plugin') 3 | var webpack = require('webpack'); 4 | 5 | module.exports = { 6 | entry: './src/index.jsx', 7 | output: { 8 | filename: 'index.js', 9 | path: path.resolve(__dirname, 'dist'), 10 | libraryTarget: 'umd', 11 | }, 12 | module: { 13 | loaders: [ 14 | { 15 | test: /.jsx?$/, 16 | loader: 'babel-loader', 17 | exclude: /node_modules/, 18 | query: { 19 | presets: [ 20 | "es2015", 21 | "react", 22 | "stage-2", 23 | "stage-1", 24 | "stage-0" 25 | ], 26 | plugins: [ 27 | "transform-decorators-legacy", 28 | "dynamic-import-webpack", 29 | ['import', { 30 | libraryName: 'antd', 31 | style: 'css', 32 | }] 33 | ] 34 | } 35 | }, 36 | { 37 | test: /\.less$/, 38 | use: [{ 39 | loader: "style-loader" // creates style nodes from JS strings 40 | }, { 41 | loader: "css-loader" // translates CSS into CommonJS 42 | }, { 43 | loader: "less-loader" // compiles Less to CSS 44 | }] 45 | }, 46 | { 47 | test: /\.css$/, 48 | use: [{ 49 | loader: "style-loader" // creates style nodes from JS strings 50 | }, { 51 | loader: "css-loader" // translates CSS into CommonJS 52 | }] 53 | }, 54 | { 55 | test: /\.svg/, 56 | use: ['url-loader'] 57 | } 58 | ] 59 | }, 60 | externals: {}, 61 | plugins: [ 62 | new UglifyJsPlugin(), 63 | ] 64 | }; --------------------------------------------------------------------------------