@appbuckets/react-ui/esm/Table/TableHeaderCell.js

Just Another React UI Framework

import { __rest, __assign } from 'tslib';
import * as React from 'react';
import clsx from 'clsx';
import { createShorthandFactory } from '@appbuckets/react-ui-core';
import { useSharedClassName } from '../utils/customHook.js';
import '../BucketTheme/BucketTheme.js';
import { useWithDefaultProps } from '../BucketTheme/BucketContext.js';
import TableCell from './TableCell.js';

/* --------
 * Component Render
 * -------- */
var TableHeaderCell = function (receivedProps) {
  var props = useWithDefaultProps('tableHeaderCell', receivedProps);
  var _a = useSharedClassName(props),
    className = _a.className,
    _b = _a.rest,
    sortable = _b.sortable,
    sorted = _b.sorted,
    rest = __rest(_b, ['sortable', 'sorted']);
  var classes = clsx(
    className,
    sorted && 'sorted',
    sorted,
    sortable && 'sortable'
  );
  return React.createElement(
    TableCell,
    __assign({}, rest, {
      as: props.as,
      className: classes,
      icon: sortable
        ? {
            name:
              sorted === 'desc'
                ? 'sort-up'
                : sorted === 'asc'
                ? 'sort-down'
                : 'sort',
            className: 'clickable',
          }
        : undefined,
    })
  );
};
TableHeaderCell.displayName = 'TableHeaderCell';
TableHeaderCell.create = createShorthandFactory(
  TableHeaderCell,
  function (content) {
    return { header: content };
  }
);

export { TableHeaderCell as default };