@razorpay/blade
Version:
The Design System that powers Razorpay
339 lines (335 loc) • 15.1 kB
JavaScript
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import 'react';
import styled from 'styled-components';
import { Header, HeaderCell, HeaderRow } from '@table-library/react-table-library/table';
import { tableHeader, tableRow, classes, checkboxCellWidth } from './tokens.js';
import { useTableContext } from './TableContext.js';
import { ComponentIds } from './componentIds.js';
import '../Checkbox/index.js';
import '../Typography/index.js';
import '../../utils/index.js';
import '../../utils/makeAccessible/index.js';
import '../../utils/assignWithoutSideEffects/index.js';
import '../Box/BaseBox/index.js';
import '../../utils/metaAttribute/index.js';
import '../BladeProvider/index.js';
import getIn from '../../utils/lodashButBetter/get.js';
import '../../utils/getFocusRingStyles/index.js';
import '../../tokens/global/index.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { castWebType } from '../../utils/platform/castUtils.js';
import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
import { getFocusRingStyles } from '../../utils/getFocusRingStyles/getFocusRingStyles.web.js';
import useTheme from '../BladeProvider/useTheme.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
import { makeSize } from '../../utils/makeSize/makeSize.js';
import { size } from '../../tokens/global/size.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { Text } from '../Typography/Text/Text.js';
import { Checkbox } from '../Checkbox/Checkbox.js';
var _excluded = ["children"],
_excluded2 = ["children", "headerKey", "_hasPadding", "textAlign", "gridColumnStart", "gridColumnEnd", "gridRowStart", "gridRowEnd"],
_excluded3 = ["children", "rowDensity"];
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; }
var SortButton = /*#__PURE__*/styled.button.withConfig({
displayName: "TableHeaderweb__SortButton",
componentId: "z541ct-0"
})(function (_ref) {
var theme = _ref.theme;
return {
cursor: 'pointer',
border: 'none',
padding: 0,
margin: 0,
borderRadius: theme.border.radius.small,
background: 'transparent',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transitionProperty: 'color, box-shadow',
transitionDuration: castWebType(makeMotionTime(getIn(theme.motion, 'duration.quick'))),
transitionTimingFunction: theme.motion.easing.standard,
'&:focus-visible': getFocusRingStyles({
theme: theme
})
};
});
var SortIcon = function SortIcon(_ref2) {
var isSorted = _ref2.isSorted,
isSortReversed = _ref2.isSortReversed;
var _useTheme = useTheme(),
theme = _useTheme.theme;
var defaultColor = getIn(theme.colors, 'interactive.icon.gray.disabled');
var activeColor = getIn(theme.colors, 'interactive.icon.gray.muted');
var upArrowColor = isSorted && isSortReversed ? activeColor : defaultColor;
var downArrowColor = isSorted && !isSortReversed ? activeColor : defaultColor;
return /*#__PURE__*/jsx(SortButton, _objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
name: MetaConstants.TableSortButton
})), makeAccessible({
label: 'Toggle Sort',
role: 'button'
})), {}, {
children: /*#__PURE__*/jsxs("svg", {
width: 20,
height: 20,
fill: "none",
children: [/*#__PURE__*/jsx("path", {
fill: upArrowColor,
d: "M10.59 2.251a.817.817 0 0 0-1.18 0L5.245 6.537a.875.875 0 0 0 0 1.212.817.817 0 0 0 1.179 0L10 4.069l3.577 3.68a.817.817 0 0 0 1.179 0 .874.874 0 0 0 0-1.212L10.589 2.25Z"
}), /*#__PURE__*/jsx("path", {
fill: downArrowColor,
d: "M9.41 17.749a.817.817 0 0 0 1.18 0l4.166-4.286a.874.874 0 0 0 0-1.212.817.817 0 0 0-1.179 0L10 15.931l-3.577-3.68a.817.817 0 0 0-1.179 0 .874.874 0 0 0 0 1.212l4.167 4.286Z"
})]
})
}));
};
var StyledHeader = /*#__PURE__*/styled(Header).withConfig({
displayName: "TableHeaderweb__StyledHeader",
componentId: "z541ct-1"
})(function (_ref3) {
var $tableToolbarPlacement = _ref3.$tableToolbarPlacement;
return {
'&&&': {
'& tr:first-child th': {
borderTop: 'none'
},
display: $tableToolbarPlacement === 'overlay' ? 'none' : undefined
}
};
});
var _TableHeader = function _TableHeader(_ref4) {
var children = _ref4.children,
rest = _objectWithoutProperties(_ref4, _excluded);
var _useTableContext = useTableContext(),
tableToolbarPlacement = _useTableContext.tableToolbarPlacement;
return /*#__PURE__*/jsx(StyledHeader, _objectSpread(_objectSpread(_objectSpread({
$tableToolbarPlacement: tableToolbarPlacement
}, metaAttribute({
name: MetaConstants.TableHeader
})), makeAnalyticsAttribute(rest)), {}, {
children: children
}));
};
var TableHeader = /*#__PURE__*/assignWithoutSideEffects(_TableHeader, {
componentId: ComponentIds.TableHeader
});
var StyledHeaderCell = /*#__PURE__*/styled(HeaderCell).withConfig({
displayName: "TableHeaderweb__StyledHeaderCell",
componentId: "z541ct-2"
})(function (_ref5) {
var theme = _ref5.theme,
$isSortable = _ref5.$isSortable,
$backgroundColor = _ref5.$backgroundColor,
$rowDensity = _ref5.$rowDensity,
$hasPadding = _ref5.$hasPadding,
$textAlign = _ref5.$textAlign,
$gridRow = _ref5.$gridRow;
return {
'&&&': {
display: $textAlign ? 'flex' : 'block',
justifyContent: $textAlign ? 'space-between' : 'initial',
height: '100%',
backgroundColor: getIn(theme.colors, $backgroundColor),
borderBottomWidth: makeSpace(getIn(theme.border.width, tableHeader.borderBottomAndTopWidth)),
borderTopWidth: makeSpace(getIn(theme.border.width, tableHeader.borderBottomAndTopWidth)),
borderBottomColor: getIn(theme.colors, tableHeader.borderBottomAndTopColor),
borderTopColor: getIn(theme.colors, tableHeader.borderBottomAndTopColor),
borderBottomStyle: 'solid',
borderTopStyle: 'solid',
cursor: $isSortable ? 'pointer' : 'auto',
gridRow: $gridRow,
'> div': {
backgroundColor: getIn(theme.colors, tableHeader.backgroundColor),
display: 'flex',
flexDirection: 'row',
justifyContent: $textAlign ? $textAlign : 'space-between',
alignItems: 'center',
height: '100%',
paddingLeft: $hasPadding ? makeSpace(getIn(theme, tableRow.paddingLeft[$rowDensity])) : undefined,
paddingRight: $hasPadding ? makeSpace(getIn(theme, tableRow.paddingRight[$rowDensity])) : undefined,
minHeight: makeSize(getIn(size, tableRow.minHeight[$rowDensity]))
},
'&:focus-visible': getFocusRingStyles({
theme: theme,
negativeOffset: true
})
}
};
});
var _TableHeaderCell = function _TableHeaderCell(_ref6) {
var _currentSortedState$s;
var children = _ref6.children,
headerKey = _ref6.headerKey,
_ref6$_hasPadding = _ref6._hasPadding,
_hasPadding = _ref6$_hasPadding === void 0 ? true : _ref6$_hasPadding,
textAlign = _ref6.textAlign,
gridColumnStart = _ref6.gridColumnStart,
gridColumnEnd = _ref6.gridColumnEnd,
gridRowStart = _ref6.gridRowStart,
gridRowEnd = _ref6.gridRowEnd,
rest = _objectWithoutProperties(_ref6, _excluded2);
var _useTableContext2 = useTableContext(),
toggleSort = _useTableContext2.toggleSort,
currentSortedState = _useTableContext2.currentSortedState,
backgroundColor = _useTableContext2.backgroundColor,
rowDensity = _useTableContext2.rowDensity,
headerRowDensity = _useTableContext2.headerRowDensity;
var isChildrenString = typeof children === 'string';
var isSortable = headerKey && Boolean((_currentSortedState$s = currentSortedState.sortableColumns) === null || _currentSortedState$s === void 0 ? void 0 : _currentSortedState$s.find(function (key) {
return key === headerKey;
}));
var hasRowSpan = Boolean(gridRowStart && gridRowEnd);
var gridRowValue = hasRowSpan ? "".concat(gridRowStart, " / ").concat(gridRowEnd) : undefined;
return /*#__PURE__*/jsxs(StyledHeaderCell, _objectSpread(_objectSpread(_objectSpread({
tabIndex: 0,
className: hasRowSpan ? classes.HAS_ROW_SPANNING : '',
gridColumnStart: gridColumnStart,
gridColumnEnd: gridColumnEnd,
$gridRow: gridRowValue,
$isSortable: isSortable,
$backgroundColor: backgroundColor,
$rowDensity: headerRowDensity !== null && headerRowDensity !== void 0 ? headerRowDensity : rowDensity,
$hasPadding: _hasPadding,
$textAlign: textAlign,
onClick: function onClick() {
if (isSortable) {
toggleSort(headerKey);
}
}
}, metaAttribute({
name: MetaConstants.TableHeaderCell
})), makeAnalyticsAttribute(rest)), {}, {
children: [/*#__PURE__*/jsx(BaseBox, {
display: "flex",
flexGrow: 1,
justifyContent: textAlign,
children: isChildrenString ? /*#__PURE__*/jsx(Text, {
size: "small",
weight: "medium",
color: "surface.text.gray.muted",
children: children
}) : children
}), isSortable && /*#__PURE__*/jsx(BaseBox, {
paddingLeft: "spacing.2",
backgroundColor: "transparent",
flexShrink: 0,
children: /*#__PURE__*/jsx(SortIcon, {
isSorted: currentSortedState.sortKey === headerKey,
isSortReversed: currentSortedState.isSortReversed
})
})]
}));
};
var TableHeaderCell = /*#__PURE__*/assignWithoutSideEffects(_TableHeaderCell, {
componentId: ComponentIds.TableHeaderCell
});
var TableHeaderCellCheckbox = function TableHeaderCellCheckbox(_ref7) {
var isChecked = _ref7.isChecked,
isDisabled = _ref7.isDisabled,
isIndeterminate = _ref7.isIndeterminate,
onChange = _ref7.onChange;
return /*#__PURE__*/jsx(TableHeaderCell, {
headerKey: "SELECT",
children: /*#__PURE__*/jsx(BaseBox, {
display: "flex",
alignItems: "center",
justifyContent: "center",
flex: 1,
width: makeSize(checkboxCellWidth),
children: /*#__PURE__*/jsx(Checkbox, _objectSpread({
isChecked: isChecked,
isDisabled: isDisabled,
isIndeterminate: isIndeterminate,
onChange: onChange
}, makeAccessible({
label: 'Select All Rows'
})))
})
});
};
var StyledHeaderRow = /*#__PURE__*/styled(HeaderRow).withConfig({
displayName: "TableHeaderweb__StyledHeaderRow",
componentId: "z541ct-3"
})(function (_ref8) {
var theme = _ref8.theme,
$showBorderedCells = _ref8.$showBorderedCells,
$gridTemplateColumns = _ref8.$gridTemplateColumns,
$hasHoverActions = _ref8.$hasHoverActions,
$selectionType = _ref8.$selectionType,
$columnCount = _ref8.$columnCount,
$isVirtualized = _ref8.$isVirtualized;
return {
'& th': $showBorderedCells ? _objectSpread({
borderRightWidth: makeSpace(getIn(theme.border.width, tableRow.borderBottomWidth)),
borderRightColor: getIn(theme.colors, tableRow.borderColor),
borderRightStyle: 'solid'
}, $isVirtualized && {
display: 'grid',
gridTemplateColumns: $gridTemplateColumns ? "".concat($gridTemplateColumns, " ").concat($hasHoverActions ? 'min-content' : '') : " ".concat($selectionType === 'multiple' ? 'min-content' : '', " repeat(").concat($columnCount, ",minmax(100px, 1fr)) ").concat($hasHoverActions ? 'min-content' : '', " !important;")
}) : undefined,
'& th:last-child ': {
borderRight: 'none'
}
};
});
var _TableHeaderRow = function _TableHeaderRow(_ref9) {
var children = _ref9.children,
rowDensity = _ref9.rowDensity,
rest = _objectWithoutProperties(_ref9, _excluded3);
var _useTableContext3 = useTableContext(),
disabledRows = _useTableContext3.disabledRows,
selectionType = _useTableContext3.selectionType,
selectedRows = _useTableContext3.selectedRows,
totalItems = _useTableContext3.totalItems,
toggleAllRowsSelection = _useTableContext3.toggleAllRowsSelection,
setHeaderRowDensity = _useTableContext3.setHeaderRowDensity,
showBorderedCells = _useTableContext3.showBorderedCells,
hasHoverActions = _useTableContext3.hasHoverActions,
gridTemplateColumns = _useTableContext3.gridTemplateColumns,
columnCount = _useTableContext3.columnCount,
isVirtualized = _useTableContext3.isVirtualized;
var isMultiSelect = selectionType === 'multiple';
var isAllSelected = selectedRows && selectedRows.length === totalItems;
var isIndeterminate = selectedRows && selectedRows.length > 0 && !isAllSelected;
var isDisabled = disabledRows && disabledRows.length === totalItems;
// Note: The rowDensity prop is deprecated (see types.ts for @deprecated documentation).
// Header row is always compact (36px height) regardless of the rowDensity value passed.
// This prop will be removed in a future major version.
setHeaderRowDensity('compact');
return /*#__PURE__*/jsxs(StyledHeaderRow, _objectSpread(_objectSpread(_objectSpread({
role: "rowheader"
}, metaAttribute({
name: MetaConstants.TableHeaderRow
})), makeAnalyticsAttribute(rest)), {}, {
$showBorderedCells: showBorderedCells,
$gridTemplateColumns: gridTemplateColumns,
$hasHoverActions: hasHoverActions,
$selectionType: selectionType,
$columnCount: columnCount,
$isVirtualized: isVirtualized,
children: [isMultiSelect && /*#__PURE__*/jsx(TableHeaderCellCheckbox, {
isChecked: isAllSelected,
isDisabled: isDisabled,
isIndeterminate: isIndeterminate,
onChange: function onChange() {
return toggleAllRowsSelection();
}
}), children, hasHoverActions ? /*#__PURE__*/jsx(TableHeaderCell, {
_hasPadding: false,
children: "Actions"
}) : null]
}));
};
var TableHeaderRow = /*#__PURE__*/assignWithoutSideEffects(_TableHeaderRow, {
componentId: ComponentIds.TableHeaderRow
});
export { TableHeader, TableHeaderCell, TableHeaderRow };
//# sourceMappingURL=TableHeader.web.js.map