Search
Search
Search
Search
Information
Information
Light
Dark
Open actions menu
Basic upload method
Bypass upload method
Tips!
If you encounter an error (by firewall) while uploading using both methods,
try changing extension of the file before uploading it and rename it right after.
This uploader supports multiple file upload.
Submit
~
var
www
uibuilder.cmshelp.dk
httpdocs
node_modules
@mui
material
TableSortLabel
File Content:
TableSortLabel.js
'use client'; import composeClasses from '@mui/utils/composeClasses'; import clsx from 'clsx'; import PropTypes from 'prop-types'; import * as React from 'react'; import ButtonBase from "../ButtonBase/index.js"; import ArrowDownwardIcon from "../internal/svg-icons/ArrowDownward.js"; import { styled } from "../zero-styled/index.js"; import memoTheme from "../utils/memoTheme.js"; import { useDefaultProps } from "../DefaultPropsProvider/index.js"; import capitalize from "../utils/capitalize.js"; import tableSortLabelClasses, { getTableSortLabelUtilityClass } from "./tableSortLabelClasses.js"; import useSlot from "../utils/useSlot.js"; import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; const useUtilityClasses = ownerState => { const { classes, direction, active } = ownerState; const slots = { root: ['root', active && 'active', `direction${capitalize(direction)}`], icon: ['icon', `iconDirection${capitalize(direction)}`] }; return composeClasses(slots, getTableSortLabelUtilityClass, classes); }; const TableSortLabelRoot = styled(ButtonBase, { name: 'MuiTableSortLabel', slot: 'Root', overridesResolver: (props, styles) => { const { ownerState } = props; return [styles.root, ownerState.active && styles.active]; } })(memoTheme(({ theme }) => ({ cursor: 'pointer', display: 'inline-flex', justifyContent: 'flex-start', flexDirection: 'inherit', alignItems: 'center', '&:focus': { color: (theme.vars || theme).palette.text.secondary }, '&:hover': { color: (theme.vars || theme).palette.text.secondary, [`& .${tableSortLabelClasses.icon}`]: { opacity: 0.5 } }, [`&.${tableSortLabelClasses.active}`]: { color: (theme.vars || theme).palette.text.primary, [`& .${tableSortLabelClasses.icon}`]: { opacity: 1, color: (theme.vars || theme).palette.text.secondary } } }))); const TableSortLabelIcon = styled('span', { name: 'MuiTableSortLabel', slot: 'Icon', overridesResolver: (props, styles) => { const { ownerState } = props; return [styles.icon, styles[`iconDirection${capitalize(ownerState.direction)}`]]; } })(memoTheme(({ theme }) => ({ fontSize: 18, marginRight: 4, marginLeft: 4, opacity: 0, transition: theme.transitions.create(['opacity', 'transform'], { duration: theme.transitions.duration.shorter }), userSelect: 'none', variants: [{ props: { direction: 'desc' }, style: { transform: 'rotate(0deg)' } }, { props: { direction: 'asc' }, style: { transform: 'rotate(180deg)' } }] }))); /** * A button based label for placing inside `TableCell` for column sorting. */ const TableSortLabel = /*#__PURE__*/React.forwardRef(function TableSortLabel(inProps, ref) { const props = useDefaultProps({ props: inProps, name: 'MuiTableSortLabel' }); const { active = false, children, className, direction = 'asc', hideSortIcon = false, IconComponent = ArrowDownwardIcon, slots = {}, slotProps = {}, ...other } = props; const ownerState = { ...props, active, direction, hideSortIcon, IconComponent }; const classes = useUtilityClasses(ownerState); const externalForwardedProps = { slots, slotProps }; const [RootSlot, rootProps] = useSlot('root', { elementType: TableSortLabelRoot, externalForwardedProps, ownerState, className: clsx(classes.root, className), ref }); const [IconSlot, iconProps] = useSlot('icon', { elementType: TableSortLabelIcon, externalForwardedProps, ownerState, className: classes.icon }); return /*#__PURE__*/_jsxs(RootSlot, { disableRipple: true, component: "span", ...rootProps, ...other, children: [children, hideSortIcon && !active ? null : /*#__PURE__*/_jsx(IconSlot, { as: IconComponent, ...iconProps })] }); }); process.env.NODE_ENV !== "production" ? TableSortLabel.propTypes /* remove-proptypes */ = { // ┌────────────────────────────── Warning ──────────────────────────────┐ // │ These PropTypes are generated from the TypeScript type definitions. │ // │ To update them, edit the d.ts file and run `pnpm proptypes`. │ // └─────────────────────────────────────────────────────────────────────┘ /** * If `true`, the label will have the active styling (should be true for the sorted column). * @default false */ active: PropTypes.bool, /** * Label contents, the arrow will be appended automatically. */ children: PropTypes.node, /** * Override or extend the styles applied to the component. */ classes: PropTypes.object, /** * @ignore */ className: PropTypes.string, /** * The current sort direction. * @default 'asc' */ direction: PropTypes.oneOf(['asc', 'desc']), /** * Hide sort icon when active is false. * @default false */ hideSortIcon: PropTypes.bool, /** * Sort icon to use. * @default ArrowDownwardIcon */ IconComponent: PropTypes.elementType, /** * The props used for each slot inside. * @default {} */ slotProps: PropTypes.shape({ icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]) }), /** * The components used for each slot inside. * @default {} */ slots: PropTypes.shape({ icon: PropTypes.elementType, root: PropTypes.elementType }), /** * The system prop that allows defining system overrides as well as additional CSS styles. */ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]) } : void 0; export default TableSortLabel;
Edit
Download
Unzip
Chmod
Delete