@gpa-gemstone/react-table
Version:
Table for GPA web applications
74 lines (73 loc) • 3.89 kB
JavaScript
"use strict";
// ******************************************************************************************************
// Column.tsx - Gbtc
//
// Copyright © 2018, Grid Protection Alliance. All Rights Reserved.
//
// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
// the NOTICE file distributed with this work for additional information regarding copyright ownership.
// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
// file except in compliance with the License. You may obtain a copy of the License at:
//
// http://opensource.org/licenses/MIT
//
// Unless agreed to in writing, the subject software distributed under the License is distributed on an
// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
// License for the specific language governing permissions and limitations.
//
// Code Modification History:
// ----------------------------------------------------------------------------------------------------
// 08/02/2018 - Billy Ernest
// Generated original version of source code.
// 05/31/2024 - C. Lackner
// Refactored to fix sizing issues.
// 12/04/2024 - G. Santos
// Refactored to fix performance issues.
//
// ******************************************************************************************************
Object.defineProperty(exports, "__esModule", { value: true });
exports.Column = Column;
exports.ColumnHeaderWrapper = ColumnHeaderWrapper;
exports.ColumnDataWrapper = ColumnDataWrapper;
const gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
const React = require("react");
function Column(props) {
return React.createElement(React.Fragment, null, props.children);
}
function ColumnHeaderWrapper(props) {
var _a;
const [showBorder, setShowBorder] = React.useState(false);
const onHover = React.useCallback(() => { setShowBorder(true); }, []);
const onLeave = React.useCallback(() => { setShowBorder(false); }, []);
const onClickBorder = React.useCallback((e) => {
if (props.startAdjustment != null)
props.startAdjustment(e);
}, [props.startAdjustment]);
const onClick = React.useCallback((e) => {
var _a;
if ((_a = props.allowSort) !== null && _a !== void 0 ? _a : true)
props.onSort(e);
}, [props.onSort, props.allowSort]);
const preventPropagation = React.useCallback((e) => {
e.stopPropagation();
}, []);
return React.createElement("th", { style: props.style, onClick: onClick, onDrag: (e) => { e.stopPropagation(); }, id: props.colKey },
props.startAdjustment == null ? React.createElement(React.Fragment, null) :
React.createElement("div", { style: {
width: 5,
height: '100%',
position: 'absolute',
top: 0,
left: 0,
opacity: showBorder ? 1 : 0,
background: '#e9ecef',
cursor: 'col-resize',
}, onMouseEnter: onHover, onMouseLeave: onLeave, onMouseDown: onClickBorder, onClick: preventPropagation }),
props.sorted ? React.createElement("div", { style: { position: 'absolute', width: 25 } }, props.asc ? React.createElement(gpa_symbols_1.ReactIcons.ArrowDropUp, null) : React.createElement(gpa_symbols_1.ReactIcons.ArrowDropDown, null)) : null,
React.createElement("div", { style: {
marginLeft: (props.sorted ? 25 : 0),
} }, (_a = props.children) !== null && _a !== void 0 ? _a : props.colKey));
}
function ColumnDataWrapper(props) {
return (React.createElement("td", { style: props.style, onClick: props.onClick, draggable: props.dragStart != undefined, onDragStart: props.dragStart }, props.children));
}