@wix/design-system
Version:
@wix/design-system
569 lines (568 loc) • 23.6 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _NestableListThemeSt = require("./NestableListTheme.st.css.js");
var _NestableListSt = require("./NestableList.st.css.js");
var _NestableListBase = _interopRequireDefault(require("../NestableListBase"));
var _TableListItem = _interopRequireDefault(require("../TableListItem"));
var _Box = _interopRequireDefault(require("../Box"));
var _Arrow = require("./Arrow");
var _TextButton = _interopRequireDefault(require("../TextButton"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _utils = require("../NestableListBase/utils");
var _constants = require("./constants");
var _utils2 = require("./utils");
var _IconThemeContext = require("../WixDesignSystemIconThemeProvider/IconThemeContext");
var _excluded = ["id", "children", "isCollapsed", "draggable", "dragDisabled", "hideDragHandle"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/NestableList/NestableList.jsx";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/** A styled list with drag and drop and nesting capabilities. */
var NestableList = /*#__PURE__*/function (_React$PureComponent) {
function NestableList() {
var _this;
(0, _classCallCheck2["default"])(this, NestableList);
for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
_args[_key] = arguments[_key];
}
_this = _callSuper(this, NestableList, [].concat(_args));
_this.state = {
movedItem: null,
backup: null,
isDragging: false,
isInternalStateUpdate: false,
items: _this.props.items,
normalizedIndentSize: _constants.DEFAULT_INDENT_SIZE
};
// according to make possible use setState along with getDerivedStateFromProps
// https://stackoverflow.com/questions/51019936/why-getderivedstatefromprops-is-called-after-setstate
_this._setStateDecorator = function (state) {
_this.setState(_objectSpread(_objectSpread({}, state), {}, {
isInternalStateUpdate: true
}));
};
_this._renderArrow = function () {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref$isLastChild = _ref.isLastChild,
isLastChild = _ref$isLastChild === void 0 ? false : _ref$isLastChild,
_ref$isPreview = _ref.isPreview,
isPreview = _ref$isPreview === void 0 ? false : _ref$isPreview,
isPlaceholder = _ref.isPlaceholder;
return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
className: (0, _NestableListSt.st)(_NestableListSt.classes.arrowContainer, {
indent: _this.state.normalizedIndentSize
}),
direction: "vertical",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 64,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _NestableListSt.st)(_NestableListSt.classes.arrow, {
lastChild: isLastChild,
preview: isPreview,
placeholder: isPlaceholder,
offset: _this.state.normalizedIndentSize
}),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 70,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement(_Arrow.Arrow, {
className: _NestableListSt.classes.horizontalArrow,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 11
}
})));
};
_this._renderActions = function (data) {
var isRootAction = data.isRootAction,
veryLastItem = data.veryLastItem,
item = data.item;
var actions = isRootAction ? _this.props.actions : item.actions;
if (!actions) {
return null;
}
var dataHook = isRootAction ? 'nestable-list-root-actions' : item.actionsDataHook;
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": dataHook,
className: (0, _NestableListSt.st)(_NestableListSt.classes.item, {
rootAction: isRootAction,
last: veryLastItem,
dragging: _this.state.isDragging,
withoutDividers: _this.props.dividers === false,
withoutBottomBorder: !_this.props.withBottomBorder && (veryLastItem || isRootAction),
indent: _this.state.normalizedIndentSize
}, _NestableListSt.classes.actionItem),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement(_TableListItem["default"], {
onClick: function onClick(e) {
if (actions.length === 1) {
actions[0].onClick(e, item);
}
},
options: actions.map(function (action, index, arr) {
return {
width: "fit-content(".concat(100 / arr.length, "%)"),
value: /*#__PURE__*/_react["default"].createElement(_TextButton["default"], {
dataHook: "nestable-list-action",
ellipsis: true,
size: "small",
onClick: function onClick(e) {
// if one element event handler is fired on table list item
if (arr.length !== 1) {
action.onClick(e, item);
}
},
prefixIcon: action.prefixIcon,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 121,
columnNumber: 17
}
}, action.label)
};
}),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 111,
columnNumber: 9
}
}));
};
_this._renderAction = function (data) {
var AddIcon = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _wixUiIconsCommon.Add;
var label = data.isRootAction ? _this.props.addItemLabel : data.item.addItemLabel;
if (!label || _this.props.maxDepth <= data.depth) {
return;
}
return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
direction: "vertical",
className: (0, _NestableListSt.st)(_NestableListSt.classes.item, {
rootAction: data.isRootAction,
last: data.veryLastItem,
dragging: _this.state.isDragging,
withoutDividers: _this.props.dividers === false,
withoutBottomBorder: !_this.props.withBottomBorder && (data.veryLastItem && !data.addItemLabel || data.isRootAction),
indent: _this.state.normalizedIndentSize
}, _NestableListSt.classes.actionItem),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 152,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement(_TableListItem["default"], {
onClick: function onClick() {
return _this.props.onAddItem(data.item);
},
options: [{
value: /*#__PURE__*/_react["default"].createElement(_Box["default"], {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 174,
columnNumber: 17
}
}, /*#__PURE__*/_react["default"].createElement(_TextButton["default"], {
size: "small",
prefixIcon: /*#__PURE__*/_react["default"].createElement(AddIcon, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 175,
columnNumber: 56
}
}),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 175,
columnNumber: 19
}
}, label))
}],
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 169,
columnNumber: 9
}
}));
};
_this._renderPrefix = function (data) {
if (data.isPreview || (0, _utils.isLastItem)(data.siblings, data.item) || (0, _utils.isRootItem)(data.depth)) {
return null;
}
return /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _NestableListSt.st)(_NestableListSt.classes.childArrow, {
offset: _this.state.normalizedIndentSize
}),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 196,
columnNumber: 7
}
});
};
_this._renderItem = function (options) {
var isPlaceholder = options.isPlaceholder,
depth = options.depth,
isPreview = options.isPreview,
isVeryLastItem = options.isVeryLastItem,
siblings = options.siblings,
item = options.item;
var id = item.id,
children = item.children,
isCollapsed = item.isCollapsed,
_item$draggable = item.draggable,
draggable = _item$draggable === void 0 ? true : _item$draggable,
dragDisabled = item.dragDisabled,
hideDragHandle = item.hideDragHandle,
rest = (0, _objectWithoutProperties2["default"])(item, _excluded);
var isLastChild = (0, _utils.isLastItem)(siblings, item);
var focused = _this.state.movedItem && id === _this.state.movedItem.id;
var hasExpandableSiblings = siblings == null ? void 0 : siblings.some(function (sibling) {
return sibling.expandable;
});
var hasDraggableSiblings = (siblings == null ? void 0 : siblings.some(function (sibling) {
return !sibling.hideDragHandle;
})) && !_this.props.readOnly;
var isStatic = draggable === false && hideDragHandle === true || _this.props.readOnly;
var isDraggableWithDisabledHandle = !isStatic && (draggable === false || dragDisabled === true);
var isDraggableWithoutHandle = !isStatic && hideDragHandle === true;
var onBlur = function onBlur() {
_this._onBlur();
rest.onBlur == null || rest.onBlur();
};
return /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _NestableListSt.st)(_NestableListSt.classes.itemWrapper, {
dragEnabled: draggable && !_this.props.readOnly
}),
"data-hook": item.dataHook ? "".concat(item.dataHook, "-item") : "styled-nestable-list-item-".concat(item.id),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 236,
columnNumber: 7
}
}, _this.props.hierarchyIndicator && !(0, _utils.isRootItem)(depth) && _this._renderArrow({
isLastChild: isLastChild,
isPreview: isPreview,
isPlaceholder: isPlaceholder
}), /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _NestableListSt.st)(_NestableListSt.classes.item, {
root: (0, _utils.isRootItem)(depth),
firstSibling: (0, _utils.isFistItem)(siblings, item),
last: isVeryLastItem,
placeholder: isPlaceholder,
preview: isPreview,
focused: focused,
dragging: _this.state.isDragging || focused,
withoutDividers: _this.props.dividers === false && !focused && !isPreview,
withoutBottomBorder: isVeryLastItem && !_this.props.withBottomBorder && !_this.props.addItemLabel
}),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 253,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement(_TableListItem["default"], (0, _extends2["default"])({}, rest, {
className: (0, _NestableListSt.st)(rest.className, {}, _NestableListSt.classes.tableListItem),
reserveExpandHandleSpace: hasExpandableSiblings,
reserveDragHandleSpace: hasDraggableSiblings,
focused: focused,
onBlur: onBlur,
onKeyUp: function onKeyUp(e) {
return _this._moveItemViaKeyboard(e, options);
},
showDivider: false,
dragging: isPreview || focused,
draggable: !isStatic,
dragDisabled: isDraggableWithDisabledHandle,
hideDragHandle: isDraggableWithoutHandle,
options: rest.options ? rest.options : [],
dragHandleSize: _this.props.dragHandleSize,
showDragHandleOnHover: _this.props.showDragHandleOnHover,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 270,
columnNumber: 11
}
}))));
};
_this._onBlur = function () {
_this._releaseItems();
};
_this._moveItemViaKeyboard = function (e, itemOptions) {
var left = 'ArrowLeft';
var top = 'ArrowUp';
var right = 'ArrowRight';
var bottom = 'ArrowDown';
var enter = 'Enter';
var esc = 'Escape';
// start dragend-drop
if (e.key === enter && !_this.state.movedItem) {
_this._setStateDecorator({
backup: _this.state.items,
movedItem: itemOptions.item,
items: (0, _utils.setCollapse)(_this.state.items, itemOptions.item.id, true)
});
}
if (!_this.state.movedItem) {
return;
}
switch (e.key) {
case esc:
_this._setStateDecorator({
items: _this.state.backup,
backup: null,
movedItem: null
});
break;
case left:
if (!_this.props.preventChangeDepth) {
_this._setStateDecorator({
items: (0, _utils.moveItemOutsideOfTheParent)(_this.state.items, itemOptions.item)
});
}
break;
case right:
if (!_this.props.preventChangeDepth) {
_this._setStateDecorator({
items: (0, _utils.moveItemToTheChildOfPrevSibling)(_this.state.items, itemOptions.item)
});
}
break;
case top:
_this._setStateDecorator({
items: (0, _utils.moveItemVertically)({
items: _this.state.items,
item: itemOptions.item,
step: _utils.VerticalMovementDirection.top,
preventChangeParent: _this.props.preventChangeParent,
enforcePinnedOrder: _this.props.enforcePinnedOrder
})
});
break;
case bottom:
_this._setStateDecorator({
items: (0, _utils.moveItemVertically)({
items: _this.state.items,
item: itemOptions.item,
step: _utils.VerticalMovementDirection.bottom,
preventChangeParent: _this.props.preventChangeParent,
enforcePinnedOrder: _this.props.enforcePinnedOrder
})
});
break;
default:
case enter:
_this._releaseItems();
break;
}
};
_this._onDragEnd = function () {
_this.props.onDragEnd == null || _this.props.onDragEnd();
_this._setStateDecorator({
isDragging: false
});
};
_this._onDragStart = function () {
_this.props.onDragStart == null || _this.props.onDragStart();
_this._setStateDecorator({
isDragging: true
});
};
_this._renderActionsFactory = function () {
var _this3;
var data = arguments.length <= 0 ? undefined : arguments[0];
var actions = data.isRootAction ? _this.props.actions : data.item.actions;
if (actions) {
var _this2;
return (_this2 = _this)._renderActions.apply(_this2, arguments);
}
return (_this3 = _this)._renderAction.apply(_this3, arguments);
};
// Stable function reference passed to NestableListBase as renderAction.
// _currentAddIcon is set synchronously each render so calls always pick up
// the latest icon without creating a new function on every render.
_this._currentAddIcon = _wixUiIconsCommon.Add;
_this._stableRenderAction = function (data) {
return _this._renderActionsFactory(data, _this._currentAddIcon);
};
return _this;
}
(0, _inherits2["default"])(NestableList, _React$PureComponent);
return (0, _createClass2["default"])(NestableList, [{
key: "_releaseItems",
value: function _releaseItems() {
if (this.state.movedItem) {
var releaseItems = (0, _utils.setCollapse)(this.state.items, this.state.movedItem.id, this.state.movedItem.isCollapsed);
this.props.onChange({
items: releaseItems,
item: this.state.movedItem
});
this._setStateDecorator({
movedItem: null,
backup: null,
items: releaseItems
});
}
}
}, {
key: "render",
value: function render() {
var _this4 = this;
var _this$props = this.props,
dataHook = _this$props.dataHook,
className = _this$props.className,
maxDepth = _this$props.maxDepth,
onChange = _this$props.onChange,
preventChangeDepth = _this$props.preventChangeDepth,
preventChangeParent = _this$props.preventChangeParent,
enforcePinnedOrder = _this$props.enforcePinnedOrder,
canDrop = _this$props.canDrop,
readOnly = _this$props.readOnly,
zIndex = _this$props.zIndex,
hierarchyIndicator = _this$props.hierarchyIndicator,
virtualized = _this$props.virtualized,
itemHeight = _this$props.itemHeight,
viewportHeight = _this$props.viewportHeight,
offscreenRowCount = _this$props.offscreenRowCount;
var depthThreshold = (0, _utils2.getDepthThreshold)(this.state.normalizedIndentSize);
return /*#__PURE__*/_react["default"].createElement(_IconThemeContext.IconThemeContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 444,
columnNumber: 7
}
}, function (_ref2) {
var _this4$state$movedIte;
var _ref2$icons = _ref2.icons,
icons = _ref2$icons === void 0 ? {} : _ref2$icons;
var _icons$NestableList = icons.NestableList,
nestableListIcons = _icons$NestableList === void 0 ? {} : _icons$NestableList;
var _nestableListIcons$Ad = nestableListIcons.Add,
AddIcon = _nestableListIcons$Ad === void 0 ? _wixUiIconsCommon.Add : _nestableListIcons$Ad;
_this4._currentAddIcon = AddIcon;
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": dataHook,
className: (0, _NestableListSt.st)(_NestableListSt.classes.root, {
dragEnabled: !readOnly
}, className),
__self: _this4,
__source: {
fileName: _jsxFileName,
lineNumber: 451,
columnNumber: 13
}
}, /*#__PURE__*/_react["default"].createElement(_NestableListBase["default"], {
items: _this4.state.items,
renderItem: _this4._renderItem,
renderPrefix: hierarchyIndicator ? _this4._renderPrefix : undefined,
renderAction: _this4._stableRenderAction,
onDragEnd: _this4._onDragEnd,
onDragStart: _this4._onDragStart,
onUpdate: function onUpdate(_ref3) {
var items = _ref3.items,
item = _ref3.item;
_this4._setStateDecorator({
items: items
});
onChange({
items: items,
item: item.data
});
},
maxDepth: maxDepth,
threshold: depthThreshold,
theme: _NestableListThemeSt.classes,
readOnly: readOnly,
preventChangeDepth: preventChangeDepth,
preventChangeParent: preventChangeParent,
enforcePinnedOrder: enforcePinnedOrder,
canDrop: canDrop,
childrenStyle: {
position: 'relative',
marginLeft: "".concat(depthThreshold, "px")
},
childrenProperty: "children",
isRenderDraggingChildren: false,
zIndex: zIndex,
virtualized: virtualized,
itemHeight: itemHeight,
viewportHeight: viewportHeight,
offscreenRowCount: offscreenRowCount,
pinnedItemId: (_this4$state$movedIte = _this4.state.movedItem) == null ? void 0 : _this4$state$movedIte.id,
__self: _this4,
__source: {
fileName: _jsxFileName,
lineNumber: 459,
columnNumber: 15
}
}), _this4._renderActionsFactory({
depth: 0,
isRootAction: true
}, AddIcon));
});
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(props, state) {
if (state.isInternalStateUpdate) {
return _objectSpread(_objectSpread({}, state), {}, {
isInternalStateUpdate: false
});
}
return {
items: props.items,
normalizedIndentSize: (0, _utils2.normalizeIndentSize)(props.indentSize)
};
}
}]);
}(_react["default"].PureComponent);
NestableList.displayName = 'NestableList';
NestableList.defaultProps = {
maxDepth: 10,
withBottomBorder: false,
preventChangeDepth: false,
preventChangeParent: false,
dragHandleSize: 'large',
showDragHandleOnHover: false,
enforcePinnedOrder: false,
hierarchyIndicator: true,
items: [],
onAddItem: function onAddItem() {}
};
var _default = exports["default"] = NestableList;