react-lightning-design-system
Version:
Salesforce Lightning Design System components built with React
246 lines (233 loc) • 8.17 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["className", "selected", "style", "children"],
_excluded2 = ["sortable", "resizable", "children", "className", "width", "sortDir", "onSort", "sorted", "align"],
_excluded3 = ["truncate", "className", "width", "children"],
_excluded4 = ["className", "bordered", "verticalBorders", "noRowHover", "striped", "fixedLayout", "autoWidth", "sortable", "children", "style"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { createContext, useMemo, useContext } from 'react';
import classnames from 'classnames';
import { Icon } from './Icon';
/**
*
*/
var TableRowContext = /*#__PURE__*/createContext({});
var TableContext = /*#__PURE__*/createContext({});
/**
*
*/
/**
*
*/
export var TableHeader = function TableHeader(props) {
var hasActions = props.hasActions,
actionsPosition = props.actionsPosition,
sortable_ = props.sortable,
children = props.children;
var _useContext = useContext(TableContext),
tableSortable = _useContext.sortable;
var sortable = typeof sortable_ !== 'undefined' ? sortable_ : tableSortable;
var ctx = useMemo(function () {
return {
header: true,
hasActions: hasActions,
actionsPosition: actionsPosition,
sortable: sortable
};
}, [hasActions, actionsPosition, sortable]);
return /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement(TableRowContext.Provider, {
value: ctx
}, children));
};
/**
*
*/
export var TableBody = function TableBody(_ref) {
var children = _ref.children;
var ctx = useMemo(function () {
return {};
}, []);
return /*#__PURE__*/React.createElement("tbody", null, React.Children.map(children, function (child) {
return /*#__PURE__*/React.createElement(TableRowContext.Provider, {
value: ctx
}, child);
}));
};
/**
*
*/
/**
*
*/
export var TableRow = function TableRow(props) {
var className = props.className,
selected = props.selected,
style_ = props.style,
children = props.children,
rprops = _objectWithoutProperties(props, _excluded);
var _useContext2 = useContext(TableRowContext),
header = _useContext2.header,
hasActions = _useContext2.hasActions,
_useContext2$actionsP = _useContext2.actionsPosition,
actionsPosition = _useContext2$actionsP === void 0 ? 0 : _useContext2$actionsP;
var newChildren = React.Children.toArray(children);
if (header && hasActions) {
newChildren = [].concat(_toConsumableArray(newChildren.slice(0, actionsPosition)), [/*#__PURE__*/React.createElement(TableHeaderColumn, {
sortable: false,
width: 50,
key: -1,
className: "slds-cell-shrink"
})], _toConsumableArray(newChildren.slice(actionsPosition)));
}
var rowClassName = classnames(className, header ? 'slds-line-height_reset' : 'slds-hint-parent');
var style = selected ? _objectSpread(_objectSpread({}, style_), {}, {
backgroundColor: '#F8FCF5',
borderLeft: '2px solid #7db450'
}) : style_;
return /*#__PURE__*/React.createElement("tr", _extends({}, rprops, {
className: rowClassName,
style: style
}), newChildren);
};
/**
*
*/
/**
*
*/
export var TableHeaderColumn = function TableHeaderColumn(props) {
var sortable_ = props.sortable,
resizable = props.resizable,
children = props.children,
className = props.className,
width = props.width,
sortDir = props.sortDir,
onSort = props.onSort,
sorted = props.sorted,
align = props.align,
pprops = _objectWithoutProperties(props, _excluded2);
var _useContext3 = useContext(TableRowContext),
rowSortable = _useContext3.sortable;
var sortable = typeof sortable_ === 'undefined' ? rowSortable : sortable_;
var oClassNames = classnames(className, {
'slds-is-sortable': sortable,
'slds-is-resizable': resizable,
'slds-is-sorted': sorted
}, align ? "slds-text-align_".concat(align) : undefined);
var style = {
minWidth: width || 'auto'
};
var icon = sortDir === 'DESC' ? 'arrowdown' : 'arrowup';
var content = typeof children === 'string' ? children : undefined;
var cellContent = /*#__PURE__*/React.createElement("div", {
className: "slds-truncate",
title: content
}, children);
return /*#__PURE__*/React.createElement("th", _extends({}, pprops, {
className: oClassNames,
style: style
}), sortable ? /*#__PURE__*/React.createElement("a", {
onClick: function onClick(e) {
e.preventDefault();
if (onSort) {
onSort();
}
},
className: "slds-th__action slds-text-link_reset"
}, /*#__PURE__*/React.createElement("span", {
className: "slds-assistive-text"
}, "Sort "), cellContent, /*#__PURE__*/React.createElement(Icon, {
className: "slds-is-sortable__icon",
textColor: "default",
size: "x-small",
category: "utility",
icon: icon
})) : cellContent);
};
/**
*
*/
/**
*
*/
export var TableRowColumn = function TableRowColumn(props) {
var _props$truncate = props.truncate,
truncate = _props$truncate === void 0 ? true : _props$truncate,
oClassNames = props.className,
width = props.width,
children = props.children,
pprops = _objectWithoutProperties(props, _excluded3);
var style = {};
if (width !== undefined) style.width = width;
if (!truncate) style.position = 'static';
var content = typeof children === 'string' ? children : undefined;
var cellContent = truncate ? /*#__PURE__*/React.createElement("div", {
className: "slds-truncate",
title: content
}, children) : children;
return /*#__PURE__*/React.createElement("td", _extends({
style: style,
className: oClassNames
}, pprops), cellContent);
};
/**
*
*/
export var TableRowColumnActions = function TableRowColumnActions(props) {
return /*#__PURE__*/React.createElement(TableRowColumn, {
className: "slds-cell-shrink",
"data-label": "Actions",
truncate: false,
width: 50,
style: {
position: 'static'
}
}, props.children);
};
/**
*
*/
/**
*
*/
export var Table = function Table(props) {
var className = props.className,
bordered = props.bordered,
verticalBorders = props.verticalBorders,
noRowHover = props.noRowHover,
striped = props.striped,
fixedLayout = props.fixedLayout,
autoWidth = props.autoWidth,
sortable = props.sortable,
children = props.children,
style_ = props.style,
rprops = _objectWithoutProperties(props, _excluded4);
var tableClassNames = classnames(className, 'slds-table', {
'slds-table_bordered': bordered,
'slds-no-row-hover': noRowHover,
'slds-table_striped': striped,
'slds-table_fixed-layout': fixedLayout,
'slds-table_resizable-cols': sortable,
'slds-table_cell-buffer': !sortable,
'slds-table_col-bordered': verticalBorders
});
var style = _objectSpread({}, style_);
if (autoWidth) {
style.width = 'auto';
}
var ctx = useMemo(function () {
return {
sortable: sortable
};
}, [sortable]);
return /*#__PURE__*/React.createElement("table", _extends({
className: tableClassNames,
style: style
}, rprops), /*#__PURE__*/React.createElement(TableContext.Provider, {
value: ctx
}, children));
};
//# sourceMappingURL=Table.js.map