wix-style-react
Version:
202 lines (184 loc) • 5.97 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 Box from '../Box';
import DragHandle from 'wix-ui-icons-common/system/DragAndDropLarge';
import DragHandleDisabled from 'wix-ui-icons-common/system/DragAndDropLockedLarge';
import { WixStyleReactContext } from '../WixStyleReactProvider/context';
export var VERTICAL_PADDING = {
tiny: 'tiny',
small: 'small',
medium: 'medium'
};
var ALIGN = {
left: 'left',
center: 'center',
right: 'right'
};
var getWidthStyle = function getWidthStyle(options) {
return options.reduce(function (acc, _ref) {
var width = _ref.width;
return "".concat(acc, " ").concat(typeof width === 'number' ? width + 'px' : width || '1fr');
}, '');
};
/** TableListItem */
var TableListItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
var options = _ref2.options,
verticalPadding = _ref2.verticalPadding,
checkbox = _ref2.checkbox,
checkboxDisabled = _ref2.checkboxDisabled,
checked = _ref2.checked,
onCheckboxChange = _ref2.onCheckboxChange,
draggable = _ref2.draggable,
focused = _ref2.focused,
onBlur = _ref2.onBlur,
dragDisabled = _ref2.dragDisabled,
showDivider = _ref2.showDivider,
onKeyUp = _ref2.onKeyUp,
onClick = _ref2.onClick,
dragging = _ref2.dragging,
className = _ref2.className,
dataHook = _ref2.dataHook;
var DragHandleIcon = dragDisabled ? DragHandleDisabled : DragHandle;
var draggableRef = useRef();
var rootRef = useRef();
React.useEffect(function () {
if (draggableRef.current && focused) {
draggableRef.current.focus();
}
}, [draggableRef, focused]);
React.useImperativeHandle(ref, function () {
return {
focus: function focus() {
var _rootRef$current;
return rootRef === null || rootRef === void 0 ? void 0 : (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.focus();
}
};
});
return /*#__PURE__*/React.createElement(WixStyleReactContext.Consumer, null, function (_ref3) {
var reducedSpacingAndImprovedLayout = _ref3.reducedSpacingAndImprovedLayout;
var defaultVerticalPadding = reducedSpacingAndImprovedLayout ? VERTICAL_PADDING.small : VERTICAL_PADDING.medium;
return /*#__PURE__*/React.createElement("div", {
ref: rootRef,
tabIndex: 0,
onClick: onClick,
className: st(classes.root, {
draggable: draggable && !dragDisabled,
dragging: dragging,
checked: checkbox && checked,
showDivider: showDivider,
clickable: !!onClick,
reducedSpacingAndImprovedLayout: reducedSpacingAndImprovedLayout,
verticalPadding: verticalPadding || defaultVerticalPadding
}, className),
"data-hook": dataHook
}, /*#__PURE__*/React.createElement(Box, null, draggable && /*#__PURE__*/React.createElement("div", {
tabIndex: onKeyUp ? 0 : undefined,
ref: draggableRef,
onBlur: onBlur,
onKeyUp: onKeyUp,
className: st(classes.dragHandle, {
disabled: dragDisabled
}),
"data-hook": dataHooks.tableListItemDragHandle
}, /*#__PURE__*/React.createElement(DragHandleIcon, null)), checkbox && /*#__PURE__*/React.createElement("div", {
className: classes.checkbox,
"data-hook": dataHooks.tableListItemCheckboxContainer,
onClick: onCheckboxChange
}, /*#__PURE__*/React.createElement(Checkbox, {
checked: checked,
disabled: checkboxDisabled,
dataHook: dataHooks.tableListItemCheckbox
})), /*#__PURE__*/React.createElement("div", {
className: classes.optionsContainer,
style: {
gridTemplateColumns: getWidthStyle(options)
},
"data-hook": dataHooks.tableListItemOptionsContainer
}, options.map(function (_ref4, index) {
var value = _ref4.value,
align = _ref4.align;
return /*#__PURE__*/React.createElement("div", {
className: st(classes.align, {
position: ALIGN[align]
}),
key: index,
"data-hook": dataHooks.tableListItemValue
}, value);
}))));
});
});
TableListItem.displayName = 'TableListItem';
TableListItem.propTypes = {
dataHook: PropTypes.string,
className: PropTypes.string,
/**
width supports px/%/fr
*/
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,
/**
Extra space on top and bottom of list item
*/
verticalPadding: PropTypes.oneOf([VERTICAL_PADDING.medium, VERTICAL_PADDING.small, VERTICAL_PADDING.tiny]),
/**
*
*/
dragging: PropTypes.bool,
/**
Show checkbox
*/
checkbox: PropTypes.bool,
/**
Disable checkbox
*/
checkboxDisabled: PropTypes.bool,
/**
State of the checkbox
*/
checked: PropTypes.bool,
/**
Called when checkbox is clicked
*/
onCheckboxChange: PropTypes.func,
/**
Show drag handle
*/
draggable: PropTypes.bool,
/**
Show disabled drag handle
*/
dragDisabled: PropTypes.bool,
/**
Show divider on the bottom of the list item
*/
showDivider: PropTypes.bool,
/**
* Called when item is lost focus
*/
onBlur: PropTypes.func,
/**
* Called when item is focused, and key is pressed and released. Used for dnd via keyboard
*/
onKeyUp: PropTypes.func,
/**
* Forces focus on drag handle
*/
focused: PropTypes.bool,
/**
Called when the item is clicked
*/
onClick: PropTypes.func
};
TableListItem.defaultProps = {
onCheckboxChange: function onCheckboxChange() {},
checkbox: false,
draggable: false,
showDivider: false
};
export default TableListItem;