@visactor/react-vtable
Version:
The react version of VTable
121 lines (115 loc) • 6.9 kB
JavaScript
;
var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
void 0 === k2 && (k2 = k);
var desc = Object.getOwnPropertyDescriptor(m, k);
desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
enumerable: !0,
get: function() {
return m[k];
}
}), Object.defineProperty(o, k2, desc);
} : function(o, m, k, k2) {
void 0 === k2 && (k2 = k), o[k2] = m[k];
}), __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function(o, v) {
Object.defineProperty(o, "default", {
enumerable: !0,
value: v
});
} : function(o, v) {
o.default = v;
}), __importStar = this && this.__importStar || function(mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (null != mod) for (var k in mod) "default" !== k && Object.prototype.hasOwnProperty.call(mod, k) && __createBinding(result, mod, k);
return __setModuleDefault(result, mod), result;
}, __importDefault = this && this.__importDefault || function(mod) {
return mod && mod.__esModule ? mod : {
default: mod
};
};
Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.CustomLayout = void 0;
const react_1 = __importStar(require("react")), table_1 = __importDefault(require("../../context/table")), vrender_1 = require("@visactor/vtable/es/vrender"), reconciler_1 = require("./reconciler"), CustomLayout = (props, ref) => {
const {componentId: componentId, children: children} = props;
if (!(0, react_1.isValidElement)(children)) return null;
const context = (0, react_1.useContext)(table_1.default), {table: table, onError: onError} = context, isHeaderCustomLayout = "header-custom-layout" === children.props.role, container = (0,
react_1.useRef)(new Map), reportReconcilerError = (0, react_1.useCallback)(((type, error) => {
var _a;
if (!onError) return;
if (error instanceof Error) {
const wrapped = new Error(`[react-vtable custom-layout:${type}] ${error.message}`);
return wrapped.stack = error.stack, void onError(wrapped);
}
const message = "string" == typeof error ? error : null !== (_a = null == error ? void 0 : error.message) && void 0 !== _a ? _a : String(error);
onError(new Error(`[react-vtable custom-layout:${type}] ${message}`));
}), [ onError ]), createGraphic = (0, react_1.useCallback)((args => {
var _a, _b;
const key = `${null !== (_a = args.originCol) && void 0 !== _a ? _a : args.col}-${null !== (_b = args.originRow) && void 0 !== _b ? _b : args.row}${args.forComputation ? "-forComputation" : ""}`;
let group;
if (container.current.has(key)) {
const currentContainer = container.current.get(key);
reconcilorUpdateContainer(children, currentContainer, args), group = currentContainer.containerInfo;
} else {
group = new vrender_1.Group({});
const currentContainer = (0, reconciler_1.createReconcilerContainer)(group, "custom", reportReconcilerError);
container.current.set(key, currentContainer), reconcilorUpdateContainer(children, currentContainer, args);
}
return {
rootContainer: group,
renderDefault: !!children.props.renderDefault
};
}), [ children, reportReconcilerError ]), removeContainer = (0, react_1.useCallback)(((col, row) => {
const key = `${col}-${row}`;
if (container.current.has(key)) {
const currentContainer = container.current.get(key);
reconciler_1.reconcilor.updateContainer(null, currentContainer, null), currentContainer.containerInfo.delete(),
container.current.delete(key);
}
}), []), removeAllContainer = (0, react_1.useCallback)((() => {
container.current.forEach(((value, key) => {
const currentContainer = value;
reconciler_1.reconcilor.updateContainer(null, currentContainer, null), currentContainer.containerInfo.delete();
})), container.current.clear();
}), []);
return (0, react_1.useLayoutEffect)((() => () => {}), []), (0, react_1.useLayoutEffect)((() => {
var _a, _b, _c, _d, _e, _f;
null == table || table.checkReactCustomLayout(), null === (_a = null == table ? void 0 : table.reactCustomLayout) || void 0 === _a || _a.setReactRemoveAllGraphic(componentId, removeAllContainer, isHeaderCustomLayout),
table && !(null === (_b = table.reactCustomLayout) || void 0 === _b ? void 0 : _b.hasReactCreateGraphic(componentId, isHeaderCustomLayout)) ? (null === (_c = table.reactCustomLayout) || void 0 === _c || _c.setReactCreateGraphic(componentId, createGraphic, isHeaderCustomLayout),
null === (_d = table.reactCustomLayout) || void 0 === _d || _d.setReactRemoveGraphic(componentId, removeContainer, isHeaderCustomLayout),
null === (_e = table.reactCustomLayout) || void 0 === _e || _e.updateCustomCell(componentId, isHeaderCustomLayout)) : table && (null === (_f = table.reactCustomLayout) || void 0 === _f || _f.setReactCreateGraphic(componentId, createGraphic, isHeaderCustomLayout),
container.current.forEach(((value, key) => {
const [col, row] = key.split("-").map(Number), {width: width, height: height} = getCellRect(col, row, table), currentContainer = value, args = {
col: col,
row: row,
dataValue: table.getCellOriginValue(col, row),
value: table.getCellValue(col, row),
rect: {
left: 0,
top: 0,
right: width,
bottom: height,
width: width,
height: height
},
table: table
};
currentContainer.containerInfo;
reconcilorUpdateContainer(children, currentContainer, args), table.scenegraph.updateNextFrame();
})));
})), null;
};
function reconcilorUpdateContainer(children, currentContainer, args) {
const element = react_1.default.cloneElement(children, Object.assign({}, args)), updateContainerSync = reconciler_1.reconcilor.updateContainerSync;
if ("function" != typeof updateContainerSync) reconciler_1.reconcilor.updateContainer(element, currentContainer, null); else {
updateContainerSync(element, currentContainer, null);
const flushSyncWork = reconciler_1.reconcilor.flushSyncWork;
"function" == typeof flushSyncWork && flushSyncWork();
}
}
function getCellRect(col, row, table) {
const range = table.getCellRange(col, row);
return table.getCellsRect(range.start.col, range.start.row, range.end.col, range.end.row);
}
//# sourceMappingURL=custom-layout.js.map
exports.CustomLayout = CustomLayout;