441 lines
11 KiB
TypeScript
441 lines
11 KiB
TypeScript
import React, { useEffect, useState, useRef, useMemo, forwardRef } from "react";
|
|
import useAutoResize from "./use/autoResize";
|
|
import { deepMerge } from "./util";
|
|
import { deepClone } from "./util/utils";
|
|
import { co } from "./util";
|
|
import classnames from "classnames";
|
|
import "./index.css";
|
|
import { current } from "@reduxjs/toolkit";
|
|
interface ScrollBoardProps {
|
|
config?: object;
|
|
onClick?: () => void;
|
|
onMouseOver?: () => void;
|
|
className?: string;
|
|
style?: object;
|
|
}
|
|
interface TaskType {
|
|
end: () => void;
|
|
pause: () => void;
|
|
resume: () => void;
|
|
}
|
|
|
|
const defaultConfig = {
|
|
/**
|
|
* @description Board header
|
|
* @type {Array<String>}
|
|
* @default header = []
|
|
* @example header = ['column1', 'column2', 'column3']
|
|
*/
|
|
header: [],
|
|
/**
|
|
* @description Board data
|
|
* @type {Array<Array>}
|
|
* @default data = []
|
|
*/
|
|
data: [],
|
|
/**
|
|
* @description Row num
|
|
* @type {Number}
|
|
* @default rowNum = 5
|
|
*/
|
|
rowNum: 5,
|
|
/**
|
|
* @description Header background color
|
|
* @type {String}
|
|
* @default headerBGC = '#00BAFF'
|
|
*/
|
|
headerBGC: "#00BAFF",
|
|
/**
|
|
* @description Odd row background color
|
|
* @type {String}
|
|
* @default oddRowBGC = '#003B51'
|
|
*/
|
|
oddRowBGC: "#003B51",
|
|
/**
|
|
* @description Even row background color
|
|
* @type {String}
|
|
* @default evenRowBGC = '#003B51'
|
|
*/
|
|
evenRowBGC: "#0A2732",
|
|
/**
|
|
* @description Scroll wait time
|
|
* @type {Number}
|
|
* @default waitTime = 2000
|
|
*/
|
|
waitTime: 2000,
|
|
/**
|
|
* @description Header height
|
|
* @type {Number}
|
|
* @default headerHeight = 35
|
|
*/
|
|
headerHeight: 35,
|
|
/**
|
|
* @description Column width
|
|
* @type {Array<Number>}
|
|
* @default columnWidth = []
|
|
*/
|
|
columnWidth: [],
|
|
/**
|
|
* @description Column align
|
|
* @type {Array<String>}
|
|
* @default align = []
|
|
* @example align = ['left', 'center', 'right']
|
|
*/
|
|
align: [],
|
|
/**
|
|
* @description Show index
|
|
* @type {Boolean}
|
|
* @default index = false
|
|
*/
|
|
index: false,
|
|
/**
|
|
* @description index Header
|
|
* @type {String}
|
|
* @default indexHeader = '#'
|
|
*/
|
|
indexHeader: "#",
|
|
/**
|
|
* @description Carousel type
|
|
* @type {String}
|
|
* @default carousel = 'single'
|
|
* @example carousel = 'single' | 'page'
|
|
*/
|
|
carousel: "single",
|
|
/**
|
|
* @description Pause scroll when mouse hovered
|
|
* @type {Boolean}
|
|
* @default hoverPause = true
|
|
* @example hoverPause = true | false
|
|
*/
|
|
hoverPause: true,
|
|
};
|
|
function calcHeaderData({ header, index, indexHeader }: any) {
|
|
if (!header.length) {
|
|
return [];
|
|
}
|
|
|
|
header = [...header];
|
|
|
|
if (index) header.unshift(indexHeader);
|
|
|
|
return header;
|
|
}
|
|
function calcRows({ data, index, headerBGC, rowNum }: any) {
|
|
if (index) {
|
|
data = data.map((row: any, i: any) => {
|
|
row = [...row];
|
|
|
|
const indexTag = `<span class="index" style="background-color: ${headerBGC};">${
|
|
i + 1
|
|
}</span>`;
|
|
|
|
row.unshift(indexTag);
|
|
|
|
return row;
|
|
});
|
|
}
|
|
|
|
data = data.map((ceils: any, i: any) => ({ ceils, rowIndex: i }));
|
|
|
|
const rowLength = data.length;
|
|
|
|
if (rowLength > rowNum && rowLength < 2 * rowNum) {
|
|
data = [...data, ...data];
|
|
}
|
|
|
|
return data.map((d: any, i: any) => ({ ...d, scroll: i }));
|
|
}
|
|
function calcAligns(mergedConfig: any, header: any) {
|
|
const columnNum = header.length;
|
|
|
|
let aligns = new Array(columnNum).fill("left");
|
|
|
|
const { align } = mergedConfig;
|
|
|
|
return deepMerge(aligns, align);
|
|
}
|
|
const ScrollBoard = forwardRef(
|
|
(
|
|
{ config, onClick, onMouseOver, className, style }: ScrollBoardProps,
|
|
ref
|
|
) => {
|
|
const { width, height, domRef } = useAutoResize(ref);
|
|
const [state, setState] = useState({
|
|
mergedConfig: {
|
|
align: [],
|
|
carousel: "",
|
|
columnWidth: [],
|
|
data: [],
|
|
evenRowBGC: "",
|
|
header: [],
|
|
headerBGC: "",
|
|
headerHeight: 35,
|
|
hoverPause: true,
|
|
index: false,
|
|
oddRowBGC: "",
|
|
indexHeader: "#",
|
|
rowNum: 5,
|
|
waitTime: 2000,
|
|
},
|
|
header: [],
|
|
rows: [],
|
|
widths: [],
|
|
heights: [],
|
|
aligns: [],
|
|
});
|
|
const { mergedConfig, header, rows, widths, heights, aligns } = state;
|
|
const stateRef = useRef({
|
|
...state,
|
|
rowsData: [],
|
|
avgHeight: 0,
|
|
animationIndex: 0,
|
|
});
|
|
Object.assign(stateRef.current, state);
|
|
function onResize() {
|
|
if (!mergedConfig) return;
|
|
|
|
const widths = calcWidths(mergedConfig, stateRef.current.rowsData);
|
|
|
|
const heights = calcHeights(mergedConfig, header);
|
|
|
|
const data: any = { widths, heights };
|
|
|
|
Object.assign(stateRef.current, data);
|
|
setState((state) => ({ ...state, ...data }));
|
|
}
|
|
function calcData() {
|
|
const mergedConfig = deepMerge(
|
|
// deepClone(defaultConfig, true),
|
|
deepClone(defaultConfig),
|
|
config || {}
|
|
);
|
|
|
|
const header = calcHeaderData(mergedConfig);
|
|
|
|
const rows = calcRows(mergedConfig);
|
|
|
|
const widths = calcWidths(mergedConfig, stateRef.current.rowsData);
|
|
|
|
const heights = calcHeights(mergedConfig, header);
|
|
|
|
const aligns = calcAligns(mergedConfig, header);
|
|
|
|
const data: any = {
|
|
mergedConfig,
|
|
header,
|
|
rows,
|
|
widths,
|
|
aligns,
|
|
heights,
|
|
};
|
|
|
|
Object.assign(stateRef.current, data, {
|
|
rowsData: rows,
|
|
animationIndex: 0,
|
|
});
|
|
|
|
setState((state) => ({ ...state, ...data }));
|
|
}
|
|
|
|
function calcWidths({ columnWidth, header }: any, rowsData: any) {
|
|
const usedWidth = columnWidth.reduce((all: any, w: any) => all + w, 0);
|
|
|
|
let columnNum = 0;
|
|
if (rowsData[0]) {
|
|
columnNum = rowsData[0].ceils.length;
|
|
} else if (header.length) {
|
|
columnNum = header.length;
|
|
}
|
|
|
|
const avgWidth = (width - usedWidth) / (columnNum - columnWidth.length);
|
|
|
|
const widths = new Array(columnNum).fill(avgWidth);
|
|
|
|
return deepMerge(widths, columnWidth);
|
|
}
|
|
function calcHeights({ headerHeight, rowNum, data }: any, header: any) {
|
|
let allHeight = height;
|
|
|
|
if (header.length) allHeight -= headerHeight;
|
|
|
|
const avgHeight = allHeight / rowNum;
|
|
|
|
Object.assign(stateRef.current, { avgHeight });
|
|
|
|
return new Array(data.length).fill(avgHeight);
|
|
}
|
|
function* animation(
|
|
start = false
|
|
): Generator<Promise<void>, void, unknown> {
|
|
let {
|
|
avgHeight,
|
|
animationIndex,
|
|
mergedConfig: { waitTime, carousel, rowNum },
|
|
rowsData,
|
|
} = stateRef.current;
|
|
const rowLength = rowsData.length;
|
|
|
|
if (start) yield new Promise((resolve) => setTimeout(resolve, waitTime));
|
|
|
|
const animationNum = carousel === "single" ? 1 : rowNum;
|
|
|
|
let rows: any = rowsData.slice(animationIndex);
|
|
rows.push(...rowsData.slice(0, animationIndex));
|
|
rows = rows.slice(0, carousel === "page" ? rowNum * 2 : rowNum + 1);
|
|
|
|
const heights: any = new Array(rowLength).fill(avgHeight);
|
|
setState((state) => ({ ...state, rows, heights }));
|
|
|
|
yield new Promise((resolve) => setTimeout(resolve, 300));
|
|
|
|
animationIndex += animationNum;
|
|
|
|
const back = animationIndex - rowLength;
|
|
if (back >= 0) animationIndex = back;
|
|
|
|
const newHeights: any = [...heights];
|
|
newHeights.splice(0, animationNum, ...new Array(animationNum).fill(0));
|
|
|
|
Object.assign(stateRef.current, { animationIndex });
|
|
setState((state) => ({ ...state, heights: newHeights }));
|
|
}
|
|
function emitEvent(handle: any, ri: any, ci: any, row: any, ceil: any) {
|
|
const { ceils, rowIndex } = row;
|
|
|
|
handle && handle({ row: ceils, ceil, rowIndex, columnIndex: ci });
|
|
}
|
|
|
|
function handleHover(
|
|
enter: any,
|
|
ri?: any,
|
|
ci?: any,
|
|
row?: any,
|
|
ceil?: any
|
|
) {
|
|
if (enter) emitEvent(onMouseOver, ri, ci, row, ceil);
|
|
|
|
if (!mergedConfig.hoverPause) return;
|
|
|
|
if (task.current) {
|
|
const { pause, resume } = task.current;
|
|
|
|
enter
|
|
? (function () {
|
|
if (pause) pause();
|
|
})()
|
|
: (function () {
|
|
if (resume) resume();
|
|
})();
|
|
}
|
|
}
|
|
|
|
const getBackgroundColor = (rowIndex: any) =>
|
|
mergedConfig[rowIndex % 2 === 0 ? "evenRowBGC" : "oddRowBGC"];
|
|
|
|
const task = useRef<TaskType>(null);
|
|
|
|
useEffect(() => {
|
|
calcData();
|
|
|
|
let start = true;
|
|
|
|
function* loop() {
|
|
while (true) {
|
|
yield* animation(start);
|
|
|
|
start = false;
|
|
|
|
const { waitTime } = stateRef.current.mergedConfig;
|
|
|
|
yield new Promise((resolve) => setTimeout(resolve, waitTime - 300));
|
|
}
|
|
}
|
|
|
|
const {
|
|
mergedConfig: { rowNum },
|
|
rows: rowsData,
|
|
} = stateRef.current;
|
|
|
|
const rowLength = rowsData.length;
|
|
if (rowNum >= rowLength) return;
|
|
// @ts-ignore
|
|
task.current = co(loop);
|
|
if (task.current) {
|
|
return task.current.end;
|
|
}
|
|
}, [config, domRef.current]);
|
|
|
|
useEffect(onResize, [width, height, domRef.current]);
|
|
|
|
const classNames = useMemo(
|
|
() => classnames("dv-scroll-board", className),
|
|
[className]
|
|
);
|
|
|
|
return (
|
|
<div className={classNames} style={style} ref={domRef}>
|
|
{!!header.length && !!mergedConfig && (
|
|
<div
|
|
className="header"
|
|
style={{ backgroundColor: `${mergedConfig.headerBGC}` }}
|
|
>
|
|
{header.map((headerItem, i) => (
|
|
<div
|
|
className="header-item"
|
|
key={`${headerItem}-${i}`}
|
|
style={{
|
|
height: `${mergedConfig.headerHeight}px`,
|
|
lineHeight: `${mergedConfig.headerHeight}px`,
|
|
width: `${widths[i]}px`,
|
|
}}
|
|
// @ts-ignore
|
|
align={aligns[i]}
|
|
dangerouslySetInnerHTML={{ __html: headerItem }}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{!!mergedConfig && (
|
|
<div
|
|
className="rows"
|
|
style={{
|
|
height: `${
|
|
height - (header.length ? mergedConfig.headerHeight : 0)
|
|
}px`,
|
|
}}
|
|
>
|
|
{rows.map((row: any, ri) => (
|
|
<div
|
|
className="row-item"
|
|
key={`${row.toString()}-${row.scroll}`}
|
|
style={{
|
|
height: `${heights[ri]}px`,
|
|
lineHeight: `${heights[ri]}px`,
|
|
backgroundColor: `${getBackgroundColor(row.rowIndex)}`,
|
|
}}
|
|
>
|
|
{row.ceils.map((ceil: any, ci: any) => (
|
|
<div
|
|
className="ceil"
|
|
key={`${ceil}-${ri}-${ci}`}
|
|
style={{ width: `${widths[ci]}px` }}
|
|
// @ts-ignore
|
|
align={aligns[ci]}
|
|
dangerouslySetInnerHTML={{ __html: ceil }}
|
|
onClick={() => emitEvent(onClick, ri, ci, row, ceil)}
|
|
onMouseEnter={() => handleHover(true, ri, ci, row, ceil)}
|
|
onMouseLeave={() => handleHover(false)}
|
|
/>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
export default ScrollBoard;
|