wix-style-react
Version:
231 lines (195 loc) • 8.33 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.VERTICAL_PADDING = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _constants = require("./constants");
var _TableListItemSt = require("./TableListItem.st.css");
var _Checkbox = _interopRequireDefault(require("../Checkbox"));
var _Box = _interopRequireDefault(require("../Box"));
var _DragAndDropLarge = _interopRequireDefault(require("wix-ui-icons-common/system/DragAndDropLarge"));
var _DragAndDropLockedLarge = _interopRequireDefault(require("wix-ui-icons-common/system/DragAndDropLockedLarge"));
var _context = require("../WixStyleReactProvider/context");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var VERTICAL_PADDING = {
tiny: 'tiny',
small: 'small',
medium: 'medium'
};
exports.VERTICAL_PADDING = VERTICAL_PADDING;
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__*/(0, _react.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 ? _DragAndDropLockedLarge["default"] : _DragAndDropLarge["default"];
var draggableRef = (0, _react.useRef)();
var rootRef = (0, _react.useRef)();
_react["default"].useEffect(function () {
if (draggableRef.current && focused) {
draggableRef.current.focus();
}
}, [draggableRef, focused]);
_react["default"].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["default"].createElement(_context.WixStyleReactContext.Consumer, null, function (_ref3) {
var reducedSpacingAndImprovedLayout = _ref3.reducedSpacingAndImprovedLayout;
var defaultVerticalPadding = reducedSpacingAndImprovedLayout ? VERTICAL_PADDING.small : VERTICAL_PADDING.medium;
return /*#__PURE__*/_react["default"].createElement("div", {
ref: rootRef,
tabIndex: 0,
onClick: onClick,
className: (0, _TableListItemSt.st)(_TableListItemSt.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["default"].createElement(_Box["default"], null, draggable && /*#__PURE__*/_react["default"].createElement("div", {
tabIndex: onKeyUp ? 0 : undefined,
ref: draggableRef,
onBlur: onBlur,
onKeyUp: onKeyUp,
className: (0, _TableListItemSt.st)(_TableListItemSt.classes.dragHandle, {
disabled: dragDisabled
}),
"data-hook": _constants.dataHooks.tableListItemDragHandle
}, /*#__PURE__*/_react["default"].createElement(DragHandleIcon, null)), checkbox && /*#__PURE__*/_react["default"].createElement("div", {
className: _TableListItemSt.classes.checkbox,
"data-hook": _constants.dataHooks.tableListItemCheckboxContainer,
onClick: onCheckboxChange
}, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
checked: checked,
disabled: checkboxDisabled,
dataHook: _constants.dataHooks.tableListItemCheckbox
})), /*#__PURE__*/_react["default"].createElement("div", {
className: _TableListItemSt.classes.optionsContainer,
style: {
gridTemplateColumns: getWidthStyle(options)
},
"data-hook": _constants.dataHooks.tableListItemOptionsContainer
}, options.map(function (_ref4, index) {
var value = _ref4.value,
align = _ref4.align;
return /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _TableListItemSt.st)(_TableListItemSt.classes.align, {
position: ALIGN[align]
}),
key: index,
"data-hook": _constants.dataHooks.tableListItemValue
}, value);
}))));
});
});
TableListItem.displayName = 'TableListItem';
TableListItem.propTypes = {
dataHook: _propTypes["default"].string,
className: _propTypes["default"].string,
/**
width supports px/%/fr
*/
options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
value: _propTypes["default"].node.isRequired,
width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
align: _propTypes["default"].oneOf([ALIGN.left, ALIGN.center, ALIGN.right])
})).isRequired,
/**
Extra space on top and bottom of list item
*/
verticalPadding: _propTypes["default"].oneOf([VERTICAL_PADDING.medium, VERTICAL_PADDING.small, VERTICAL_PADDING.tiny]),
/**
*
*/
dragging: _propTypes["default"].bool,
/**
Show checkbox
*/
checkbox: _propTypes["default"].bool,
/**
Disable checkbox
*/
checkboxDisabled: _propTypes["default"].bool,
/**
State of the checkbox
*/
checked: _propTypes["default"].bool,
/**
Called when checkbox is clicked
*/
onCheckboxChange: _propTypes["default"].func,
/**
Show drag handle
*/
draggable: _propTypes["default"].bool,
/**
Show disabled drag handle
*/
dragDisabled: _propTypes["default"].bool,
/**
Show divider on the bottom of the list item
*/
showDivider: _propTypes["default"].bool,
/**
* Called when item is lost focus
*/
onBlur: _propTypes["default"].func,
/**
* Called when item is focused, and key is pressed and released. Used for dnd via keyboard
*/
onKeyUp: _propTypes["default"].func,
/**
* Forces focus on drag handle
*/
focused: _propTypes["default"].bool,
/**
Called when the item is clicked
*/
onClick: _propTypes["default"].func
};
TableListItem.defaultProps = {
onCheckboxChange: function onCheckboxChange() {},
checkbox: false,
draggable: false,
showDivider: false
};
var _default = TableListItem;
exports["default"] = _default;