wix-style-react
Version:
wix-style-react
161 lines • 8.21 kB
JavaScript
import React, { forwardRef, useRef } from 'react';
import PropTypes from 'prop-types';
import { dataHooks } from './constants';
import { st, classes } from './TableListItem.st.css';
import Checkbox from '../Checkbox';
import Tooltip from '../Tooltip';
import Box from '../Box';
import { WixStyleReactContext } from '../WixStyleReactProvider/context';
import { DragHandle } from '../DragHandle/DragHandle';
import { fillRef } from '../utils/fillRef';
import { useDraggableContainer } from '../DraggableContainer/useDraggableContainer';
import { CaretRight } from '@wix/wix-ui-icons-common/system';
const ALIGN = {
left: 'left',
center: 'center',
right: 'right',
};
export const PADDING = {
xxTiny: 'xxTiny',
xTiny: 'xTiny',
tiny: 'tiny',
small: 'small',
medium: 'medium',
large: 'large',
};
const getWidthStyle = options => options.reduce((acc, { width }) => `${acc} ${typeof width === 'number' ? width + 'px' : width || '1fr'}`, '');
/** TableListItem */
const TableListItem = forwardRef(({ options, verticalPadding = PADDING.small, horizontalPadding = PADDING.large, checkbox = false, checkboxDisabled, checkboxTooltipContent, checkboxTooltipProps, checked, onCheckboxChange = () => { }, draggable = false, focused, onBlur, dragDisabled, showDivider = false, onKeyUp, onClick, dragging, className, dataHook, dragHandleProps, border = false, dragHandleSize = 'large', expandable = false, expandDisabled, onClickExpand, expanded = false, }, ref) => {
const draggableRef = useRef();
const rootRef = useRef();
React.useEffect(() => {
if (draggableRef.current && focused) {
draggableRef.current.focus();
}
}, [draggableRef, focused]);
React.useImperativeHandle(ref, () => ({
focus: () => rootRef.current && rootRef.current.focus(),
}));
const { className: draggableContainerClassName } = useDraggableContainer({
dragging,
draggable,
dragDisabled,
highlight: true,
});
const showControls = draggable || expandable || checkbox;
return (React.createElement(WixStyleReactContext.Consumer, null, ({ newColorsBranding }) => (React.createElement("div", { ref: rootRef, tabIndex: -1, onClick: onClick, className: st(classes.root, {
draggable: draggable && !dragDisabled,
dragDisabled,
dragging,
checked: checkbox && checked,
showDivider,
clickable: !!onClick,
verticalPadding,
horizontalPadding,
newColorsBranding,
border,
dragHandleSize,
}, className, draggableContainerClassName), "data-hook": dataHook },
showControls && (React.createElement("div", { className: st(classes.controlsContainer, { dragHandleSize }) },
draggable && (React.createElement("div", { className: classes.handleContainer },
React.createElement(DragHandle, { tabIndex: onKeyUp ? 0 : undefined, ...dragHandleProps, domRef: el => {
draggableRef.current = el;
fillRef(dragHandleProps?.domRef, el);
}, onBlur: onBlur, onKeyUp: onKeyUp, draggable: draggable, dragging: dragging, disabled: dragDisabled, dataHook: dataHooks.tableListItemDragHandle, dragHandleSize: dragHandleSize }))),
expandable && (React.createElement("div", { className: st(classes.expandHandle, {
expandable: expandable && !expandDisabled,
}), "data-hook": dataHooks.tableListItemExpandHandleContainer },
React.createElement(CaretRight, { className: st(classes.caretIcon, {
expanded,
}), onClick: expandDisabled ? null : onClickExpand, "data-hook": dataHooks.tableListItemExpandHandle }))),
checkbox && (React.createElement("div", { className: st(classes.checkbox, { checkboxDisabled }), "data-hook": dataHooks.tableListItemCheckboxContainer },
React.createElement(Checkbox, { checked: checked, disabled: checkboxDisabled, onChange: checkboxDisabled ? null : onCheckboxChange, dataHook: dataHooks.tableListItemCheckbox, tooltipContent: checkboxTooltipContent, tooltipProps: checkboxTooltipProps }))))),
React.createElement("div", { className: classes.optionsContainer, style: {
gridTemplateColumns: getWidthStyle(options),
}, "data-hook": dataHooks.tableListItemOptionsContainer }, options.map(({ value, align }, index) => (React.createElement("div", { className: st(classes.align, {
position: ALIGN[align],
}), key: index, "data-hook": dataHooks.tableListItemValue }, value))))))));
});
TableListItem.displayName = 'TableListItem';
TableListItem.propTypes = {
/** Applies a data-hook HTML attribute to be used in the tests */
dataHook: PropTypes.string,
/** Specifies a CSS class name to be appended to the component’s root element. */
className: PropTypes.string,
/** Defines each TableListItem column individually, using the following props:
* - `value` - defines column’s content.
* - `width` - sets the width of a column. It supports all grid-template-column values: [https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)
* - `align` - aligns the content in the horizontal axis.
*/
options: PropTypes.arrayOf(PropTypes.shape({
value: PropTypes.node.isRequired,
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
align: PropTypes.oneOf([ALIGN.left, ALIGN.center, ALIGN.right]),
})).isRequired,
/** Adjusts the top and bottom padding size */
verticalPadding: PropTypes.oneOf([
PADDING.large,
PADDING.medium,
PADDING.small,
PADDING.tiny,
PADDING.xTiny,
PADDING.xxTiny,
]),
/** Adjusts the left and right padding size */
horizontalPadding: PropTypes.oneOf([
PADDING.large,
PADDING.medium,
PADDING.small,
PADDING.tiny,
PADDING.xTiny,
PADDING.xxTiny,
]),
/** Visually indicates that component is being dragged */
dragging: PropTypes.bool,
/** Makes the checkbox visible */
checkbox: PropTypes.bool,
/** Disables the visible checkbox */
checkboxDisabled: PropTypes.bool,
/** Selects the visible checkbox */
checked: PropTypes.bool,
/** Defines a callback when checkbox is clicked */
onCheckboxChange: PropTypes.func,
/** Makes drag handle visible */
draggable: PropTypes.bool,
/** Disables the visible drag handle */
dragDisabled: PropTypes.bool,
/** Enables a divider at the bottom of the list item */
showDivider: PropTypes.bool,
/** Defines a callback when item loses its focus */
onBlur: PropTypes.func,
/** Defines a callback when the item is focused, and a key is pressed and released. Used for NestableList solutions controlled with a keyboard. */
onKeyUp: PropTypes.func,
/** Forces focus on drag handle */
focused: PropTypes.bool,
/** Defines a callback when the item is clicked */
onClick: PropTypes.func,
/**
Extra props to pass to the `<DragHandle />` element
*/
dragHandleProps: PropTypes.object,
/** Defines a message to be displayed in a tooltip. Tooltip is displayed on a checkbox hover. */
checkboxTooltipContent: PropTypes.node,
/**
* Tooltip props (when hovering over the checkbox)
*/
checkboxTooltipProps: PropTypes.object,
/** Adds a border around the component */
border: PropTypes.bool,
/** Changes the size of the DragHandle */
dragHandleSize: PropTypes.oneOf(['small', 'large']),
/** Adds functionality to expand the list item */
expandable: PropTypes.bool,
/** Defines whether the list component is expanded/collapsed */
expanded: PropTypes.bool,
/** Defines a callback when caret handle is clicked */
onClickExpand: PropTypes.func,
/** Disables the visible expand handle */
expandDisabled: PropTypes.bool,
};
export default TableListItem;
//# sourceMappingURL=TableListItem.js.map