react-lightning-design-system
Version:
Salesforce Lightning Design System components built with React
255 lines (242 loc) • 10.2 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TableRowColumnActions = exports.TableRowColumn = exports.TableRow = exports.TableHeaderColumn = exports.TableHeader = exports.TableBody = exports.Table = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Icon = require("./Icon");
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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
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) { (0, _defineProperty2["default"])(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; }
/**
*
*/
var TableRowContext = /*#__PURE__*/(0, _react.createContext)({});
var TableContext = /*#__PURE__*/(0, _react.createContext)({});
/**
*
*/
/**
*
*/
var TableHeader = exports.TableHeader = function TableHeader(props) {
var hasActions = props.hasActions,
actionsPosition = props.actionsPosition,
sortable_ = props.sortable,
children = props.children;
var _useContext = (0, _react.useContext)(TableContext),
tableSortable = _useContext.sortable;
var sortable = typeof sortable_ !== 'undefined' ? sortable_ : tableSortable;
var ctx = (0, _react.useMemo)(function () {
return {
header: true,
hasActions: hasActions,
actionsPosition: actionsPosition,
sortable: sortable
};
}, [hasActions, actionsPosition, sortable]);
return /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement(TableRowContext.Provider, {
value: ctx
}, children));
};
/**
*
*/
var TableBody = exports.TableBody = function TableBody(_ref) {
var children = _ref.children;
var ctx = (0, _react.useMemo)(function () {
return {};
}, []);
return /*#__PURE__*/_react["default"].createElement("tbody", null, _react["default"].Children.map(children, function (child) {
return /*#__PURE__*/_react["default"].createElement(TableRowContext.Provider, {
value: ctx
}, child);
}));
};
/**
*
*/
/**
*
*/
var TableRow = exports.TableRow = function TableRow(props) {
var className = props.className,
selected = props.selected,
style_ = props.style,
children = props.children,
rprops = (0, _objectWithoutProperties2["default"])(props, _excluded);
var _useContext2 = (0, _react.useContext)(TableRowContext),
header = _useContext2.header,
hasActions = _useContext2.hasActions,
_useContext2$actionsP = _useContext2.actionsPosition,
actionsPosition = _useContext2$actionsP === void 0 ? 0 : _useContext2$actionsP;
var newChildren = _react["default"].Children.toArray(children);
if (header && hasActions) {
newChildren = [].concat((0, _toConsumableArray2["default"])(newChildren.slice(0, actionsPosition)), [/*#__PURE__*/_react["default"].createElement(TableHeaderColumn, {
sortable: false,
width: 50,
key: -1,
className: "slds-cell-shrink"
})], (0, _toConsumableArray2["default"])(newChildren.slice(actionsPosition)));
}
var rowClassName = (0, _classnames["default"])(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["default"].createElement("tr", (0, _extends2["default"])({}, rprops, {
className: rowClassName,
style: style
}), newChildren);
};
/**
*
*/
/**
*
*/
var TableHeaderColumn = exports.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 = (0, _objectWithoutProperties2["default"])(props, _excluded2);
var _useContext3 = (0, _react.useContext)(TableRowContext),
rowSortable = _useContext3.sortable;
var sortable = typeof sortable_ === 'undefined' ? rowSortable : sortable_;
var oClassNames = (0, _classnames["default"])(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["default"].createElement("div", {
className: "slds-truncate",
title: content
}, children);
return /*#__PURE__*/_react["default"].createElement("th", (0, _extends2["default"])({}, pprops, {
className: oClassNames,
style: style
}), sortable ? /*#__PURE__*/_react["default"].createElement("a", {
onClick: function onClick(e) {
e.preventDefault();
if (onSort) {
onSort();
}
},
className: "slds-th__action slds-text-link_reset"
}, /*#__PURE__*/_react["default"].createElement("span", {
className: "slds-assistive-text"
}, "Sort "), cellContent, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
className: "slds-is-sortable__icon",
textColor: "default",
size: "x-small",
category: "utility",
icon: icon
})) : cellContent);
};
/**
*
*/
/**
*
*/
var TableRowColumn = exports.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 = (0, _objectWithoutProperties2["default"])(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["default"].createElement("div", {
className: "slds-truncate",
title: content
}, children) : children;
return /*#__PURE__*/_react["default"].createElement("td", (0, _extends2["default"])({
style: style,
className: oClassNames
}, pprops), cellContent);
};
/**
*
*/
var TableRowColumnActions = exports.TableRowColumnActions = function TableRowColumnActions(props) {
return /*#__PURE__*/_react["default"].createElement(TableRowColumn, {
className: "slds-cell-shrink",
"data-label": "Actions",
truncate: false,
width: 50,
style: {
position: 'static'
}
}, props.children);
};
/**
*
*/
/**
*
*/
var Table = exports.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 = (0, _objectWithoutProperties2["default"])(props, _excluded4);
var tableClassNames = (0, _classnames["default"])(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 = (0, _react.useMemo)(function () {
return {
sortable: sortable
};
}, [sortable]);
return /*#__PURE__*/_react["default"].createElement("table", (0, _extends2["default"])({
className: tableClassNames,
style: style
}, rprops), /*#__PURE__*/_react["default"].createElement(TableContext.Provider, {
value: ctx
}, children));
};
//# sourceMappingURL=Table.js.map