diff --git a/CHANGELOG.md b/CHANGELOG.md index 77c5227..4bf33fd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,13 +2,14 @@ ### Perfect -- **BorderBox:** 添加 backgroundColor prop. -- **BorderBox8:** 添加 reverse prop. -- **DigitalFlop:** 添加 rowGap 配置. -- **CapsuleChart:** 添加 showValue 配置. -- **ActiveRightChart:** 添加 showOriginValue 配置. - -- **uuid:** 使用 uuid 生成唯一 id. +- **BorderBox:** 添加 `backgroundColor` prop. +- **BorderBox8:** 添加 `reverse` prop. +- **DigitalFlop:** 添加 `rowGap` 配置. +- **ScrollBoard:** 添加 `hoverPause` 配置. +- **CapsuleChart:** 添加 `showValue` 配置. +- **ActiveRightChart:** 添加 `showOriginValue` 配置. + +- **uuid:** 使用 `uuid` 生成唯一 id. # 1.1.7-alpha (2020-04-10) diff --git a/package.json b/package.json index 1a03839..ccbbd88 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@jiaminghi/data-view-react", - "version": "1.1.7", + "version": "1.2.0", "description": "React Large screen data display component library", "author": "Duan Yu <949267840@qq.com>", "license": "MIT", diff --git a/src/components/activeRingChart/index.js b/src/components/activeRingChart/index.js index 7529508..cfd8cc5 100644 --- a/src/components/activeRingChart/index.js +++ b/src/components/activeRingChart/index.js @@ -233,7 +233,7 @@ const ActiveRingChart = ({ config = {}, className, style }) => { } } - return co(loop) + return co(loop).end }, [config]) const classNames = useMemo( @@ -260,9 +260,4 @@ ActiveRingChart.propTypes = { style: PropTypes.object } -// 指定 props 的默认值: -ActiveRingChart.defaultProps = { - config: {} -} - export default ActiveRingChart diff --git a/src/components/capsuleChart/index.js b/src/components/capsuleChart/index.js index a51c573..c4e1c6f 100644 --- a/src/components/capsuleChart/index.js +++ b/src/components/capsuleChart/index.js @@ -135,9 +135,4 @@ CapsuleChart.propTypes = { style: PropTypes.object } -// 指定 props 的默认值: -CapsuleChart.defaultProps = { - config: {} -} - export default CapsuleChart diff --git a/src/components/charts/index.js b/src/components/charts/index.js index 68ffbe1..54f1f75 100644 --- a/src/components/charts/index.js +++ b/src/components/charts/index.js @@ -46,9 +46,4 @@ Charts.propTypes = { style: PropTypes.object } -// 指定 props 的默认值: -Charts.defaultProps = { - option: {} -} - export default Charts diff --git a/src/components/conicalColumnChart/index.js b/src/components/conicalColumnChart/index.js index a328d12..f707803 100644 --- a/src/components/conicalColumnChart/index.js +++ b/src/components/conicalColumnChart/index.js @@ -182,9 +182,4 @@ ConicalColumnChart.propTypes = { style: PropTypes.object } -// 指定 props 的默认值: -ConicalColumnChart.defaultProps = { - config: {} -} - export default ConicalColumnChart diff --git a/src/components/digitalFlop/index.js b/src/components/digitalFlop/index.js index a6f2fa7..24dcca9 100644 --- a/src/components/digitalFlop/index.js +++ b/src/components/digitalFlop/index.js @@ -149,9 +149,4 @@ DigitalFlop.propTypes = { style: PropTypes.object } -// 指定 props 的默认值: -DigitalFlop.defaultProps = { - config: {} -} - export default DigitalFlop diff --git a/src/components/flylineChart/index.js b/src/components/flylineChart/index.js index 7c2854f..c80f708 100644 --- a/src/components/flylineChart/index.js +++ b/src/components/flylineChart/index.js @@ -452,7 +452,6 @@ FlyLineChart.propTypes = { // 指定 props 的默认值: FlyLineChart.defaultProps = { - config: {}, dev: false } diff --git a/src/components/flylineChartEnhanced/index.js b/src/components/flylineChartEnhanced/index.js index cbb1fff..286a99d 100644 --- a/src/components/flylineChartEnhanced/index.js +++ b/src/components/flylineChartEnhanced/index.js @@ -544,7 +544,6 @@ FlyLineChartEnhanced.propTypes = { // 指定 props 的默认值: FlyLineChartEnhanced.defaultProps = { - config: {}, dev: false } diff --git a/src/components/percentPond/index.js b/src/components/percentPond/index.js index 7d18850..34752d5 100644 --- a/src/components/percentPond/index.js +++ b/src/components/percentPond/index.js @@ -234,9 +234,4 @@ PercentPond.propTypes = { style: PropTypes.object } -// 指定 props 的默认值: -PercentPond.defaultProps = { - config: {} -} - export default PercentPond diff --git a/src/components/scrollBoard/index.js b/src/components/scrollBoard/index.js index 47ce69e..5c60b86 100644 --- a/src/components/scrollBoard/index.js +++ b/src/components/scrollBoard/index.js @@ -94,7 +94,14 @@ const defaultConfig = { * @default carousel = 'single' * @example carousel = 'single' | 'page' */ - carousel: 'single' + carousel: 'single', + /** + * @description Pause scroll when mouse hovered + * @type {Boolean} + * @default hoverPause = true + * @example hoverPause = true | false + */ + hoverPause: true } function calcHeaderData({ header, index, indexHeader }) { @@ -144,7 +151,7 @@ function calcAligns(mergedConfig, header) { return deepMerge(aligns, align) } -const ScrollBoard = forwardRef(({ onClick, config, className, style }, ref) => { +const ScrollBoard = forwardRef(({ onClick, config = {}, className, style, onMouseOver }, ref) => { const { width, height, domRef } = useAutoResize(ref) const [state, setState] = useState({ @@ -281,15 +288,29 @@ const ScrollBoard = forwardRef(({ onClick, config, className, style }, ref) => { setState(state => ({ ...state, heights: newHeights })) } - function emitEvent(ri, ci, row, ceil) { + function emitEvent(handle, ri, ci, row, ceil) { const { ceils, rowIndex } = row - onClick && onClick({ row: ceils, ceil, rowIndex, columnIndex: ci }) + handle && handle({ row: ceils, ceil, rowIndex, columnIndex: ci }) + } + + function handleHover(enter, ri, ci, row, ceil) { + if (enter) emitEvent(onMouseOver, ri, ci, row, ceil) + + if (!mergedConfig.hoverPause) return + + if (enter) { + task.pause && task.pause() + } else { + task.resume && task.resume() + } } const getBackgroundColor = rowIndex => mergedConfig[rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC'] + let task = {} + useEffect(() => { calcData() @@ -316,7 +337,9 @@ const ScrollBoard = forwardRef(({ onClick, config, className, style }, ref) => { if (rowNum >= rowLength) return - return co(loop) + task = co(loop) + + return task.end }, [config, domRef.current]) useEffect(onResize, [width, height, domRef.current]) @@ -373,7 +396,9 @@ const ScrollBoard = forwardRef(({ onClick, config, className, style }, ref) => { style={{ width: `${widths[ci]}px` }} align={aligns[ci]} dangerouslySetInnerHTML={{ __html: ceil }} - onClick={() => emitEvent(ri, ci, row, ceil)} + onClick={() => emitEvent(onClick, ri, ci, row, ceil)} + onMouseEnter={() => handleHover(true, ri, ci, row, ceil)} + onMouseLeave={() => handleHover(false)} /> ))} @@ -387,13 +412,9 @@ const ScrollBoard = forwardRef(({ onClick, config, className, style }, ref) => { ScrollBoard.propTypes = { config: PropTypes.object, onClick: PropTypes.func, + onMouseOver: PropTypes.func, className: PropTypes.string, style: PropTypes.object } -// 指定 props 的默认值: -ScrollBoard.defaultProps = { - config: {} -} - export default ScrollBoard diff --git a/src/components/scrollRankingBoard/index.js b/src/components/scrollRankingBoard/index.js index c4ddd23..77078cf 100644 --- a/src/components/scrollRankingBoard/index.js +++ b/src/components/scrollRankingBoard/index.js @@ -82,7 +82,7 @@ function calcRows({ data, rowNum, sort }) { return data } -const ScrollRankingBoard = forwardRef(({ config, className, style }, ref) => { +const ScrollRankingBoard = forwardRef(({ config = {}, className, style }, ref) => { const { width, height, domRef } = useAutoResize(ref) const [state, setState] = useState({ @@ -203,7 +203,7 @@ const ScrollRankingBoard = forwardRef(({ config, className, style }, ref) => { if (rowNum >= rowLength) return - return co(loop) + return co(loop).end }, [config, domRef.current]) useEffect(() => { @@ -257,9 +257,4 @@ ScrollRankingBoard.propTypes = { style: PropTypes.object } -// 指定 props 的默认值: -ScrollRankingBoard.defaultProps = { - config: {} -} - export default ScrollRankingBoard diff --git a/src/components/waterLevelPond/index.js b/src/components/waterLevelPond/index.js index b78560e..6d6df5b 100644 --- a/src/components/waterLevelPond/index.js +++ b/src/components/waterLevelPond/index.js @@ -163,7 +163,7 @@ function * animationWave(waves, renderer) { yield renderer.launchAnimation() } -const WaterLevelPond = ({ config, className, style }) => { +const WaterLevelPond = ({ config = {}, className, style }) => { const [renderer, setRenderer] = useState(null) const gradientId = useRef(`water-level-pond-${uuid()}`).current @@ -220,7 +220,7 @@ const WaterLevelPond = ({ config, className, style }) => { } } - const undescribe = co(loop) + const { end } = co(loop) return () => { innerRenderer.delAllGraph() @@ -229,7 +229,7 @@ const WaterLevelPond = ({ config, className, style }) => { innerRenderer.graphs.forEach(_ => _.pauseAnimation()) innerRenderer.animationStatus = false - undescribe() + end() } }, [mergedConfig]) @@ -292,9 +292,4 @@ WaterLevelPond.propTypes = { style: PropTypes.object } -// 指定 props 的默认值: -WaterLevelPond.defaultProps = { - config: {} -} - export default WaterLevelPond diff --git a/src/util/index.js b/src/util/index.js index f305afe..20d633a 100644 --- a/src/util/index.js +++ b/src/util/index.js @@ -58,6 +58,9 @@ export function getPointDistance(pointOne, pointTwo) { export function co(gen) { let destroyed = false + // 处理 return 之后 resume 的问题 + let stop = false + if (typeof gen === 'function') gen = gen() if (!gen || typeof gen.next !== 'function') return () => ({}) @@ -66,21 +69,35 @@ export function co(gen) { destroyed || next(gen.next()) }) - return () => { - destroyed = true - - Promise.resolve().then(() => { - gen.return() - - gen = null - }) + return { + end () { + destroyed = true + + Promise.resolve().then(() => { + gen.return() + + gen = null + }) + }, + pause () { + if (!destroyed) { stop = true } + }, + resume () { + Promise.resolve().then(() => { + if (!destroyed && stop) { + stop = false + + next(gen.next()) + } + }) + } } function next(ret) { if (ret.done) return ret.value return Promise.resolve(ret.value).then(() => { - destroyed || next(gen.next()) + (!destroyed && !stop) && next(gen.next()) }) } }