wix-style-react
Version:
407 lines (346 loc) • 15.4 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["id", "children", "isCollapsed", "draggable"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
import React from 'react';
import PropTypes from 'prop-types';
import { classes as theme } from './NestableListTheme.st.css';
import { classes, st } from './StyledNestableList.st.css';
import NestableList from '../NestableList';
import TableListItem from '../TableListItem';
import Box from '../Box';
import { Arrow } from './Arrow';
import TextButton from '../TextButton';
import Add from 'wix-ui-icons-common/Add';
import { isFistItem, isLastItem, isRootItem, moveItemOutsideOfTheParent, moveItemToTheChildOfPrevSibling, moveItemVertically, setCollapse, VerticalMovementDirection } from '../NestableList/utils';
import { DEPTH_THRESHOLD } from './constants';
/** A styled list with drag and drop and nesting capabilities. */
var StyledNestableList = /*#__PURE__*/function (_React$PureComponent) {
_inherits(StyledNestableList, _React$PureComponent);
var _super = _createSuper(StyledNestableList);
function StyledNestableList() {
var _this;
_classCallCheck(this, StyledNestableList);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "state", {
movedItem: null,
backup: null,
isDragging: false,
isInternalStateUpdate: false,
items: _this.props.items
});
_defineProperty(_assertThisInitialized(_this), "_setStateDecorator", function (state) {
_this.setState(_objectSpread(_objectSpread({}, state), {}, {
isInternalStateUpdate: true
}));
});
_defineProperty(_assertThisInitialized(_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.createElement(Box, {
className: classes.arrowContainer,
backgroundColor: isPlaceholder ? 'D60' : undefined,
direction: 'vertical'
}, /*#__PURE__*/React.createElement("div", {
className: st(classes.arrow, {
lastChild: isLastChild,
preview: isPreview,
placeholder: isPlaceholder
})
}, /*#__PURE__*/React.createElement(Arrow, {
className: classes.horizontalArrow
})));
});
_defineProperty(_assertThisInitialized(_this), "_renderAction", function (data) {
var label = data.isRootAction ? _this.props.addItemLabel : data.item.addItemLabel;
if (!label || _this.props.maxDepth <= data.depth) {
return;
}
return /*#__PURE__*/React.createElement(Box, {
direction: 'vertical',
className: st(classes.item, {
rootAction: data.isRootAction,
dragging: _this.state.isDragging,
withoutBottomBorder: !_this.props.withBottomBorder && (data.veryLastItem && !data.addItemLabel || data.isRootAction)
}, classes.actionItem)
}, /*#__PURE__*/React.createElement(TableListItem, {
onClick: function onClick() {
return _this.props.onAddItem(data.item);
},
options: [{
value: /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(TextButton, {
size: 'small',
prefixIcon: /*#__PURE__*/React.createElement(Add, null)
}, label))
}]
}));
});
_defineProperty(_assertThisInitialized(_this), "_renderPrefix", function (data) {
if (data.isPreview || isLastItem(data.siblings, data.item) || isRootItem(data.depth)) {
return null;
}
return /*#__PURE__*/React.createElement("div", {
className: classes.childArrow
});
});
_defineProperty(_assertThisInitialized(_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,
rest = _objectWithoutProperties(item, _excluded);
var isLastChild = isLastItem(siblings, item);
var focused = _this.state.movedItem && id === _this.state.movedItem.id;
return /*#__PURE__*/React.createElement("div", {
className: st(classes.itemWrapper, {
dragEnabled: draggable && !_this.props.readOnly
}),
"data-hook": "styled-nestable-list-item-".concat(item.id)
}, !isRootItem(depth) && _this._renderArrow({
isLastChild: isLastChild,
isPreview: isPreview,
isPlaceholder: isPlaceholder
}), /*#__PURE__*/React.createElement("div", {
className: st(classes.item, {
root: isRootItem(depth),
firstSibling: isFistItem(siblings, item),
placeholder: isPlaceholder,
preview: isPreview,
focused: focused,
dragging: _this.state.isDragging || focused,
withoutBottomBorder: isVeryLastItem && !_this.props.withBottomBorder && !_this.props.addItemLabel
})
}, /*#__PURE__*/React.createElement(TableListItem, _extends({}, rest, {
focused: focused,
onBlur: _this._onBlur,
onKeyUp: function onKeyUp(e) {
return _this._moveItemViaKeyboard(e, options);
},
showDivider: false,
dragging: isPreview || focused,
dragDisabled: !draggable && !_this.props.readOnly,
draggable: !_this.props.readOnly,
options: rest.options ? rest.options : []
}))));
});
_defineProperty(_assertThisInitialized(_this), "_onBlur", function () {
_this._releaseItems();
});
_defineProperty(_assertThisInitialized(_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: 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: moveItemOutsideOfTheParent(_this.state.items, itemOptions.item)
});
}
break;
case right:
if (!_this.props.preventChangeDepth) {
_this._setStateDecorator({
items: moveItemToTheChildOfPrevSibling(_this.state.items, itemOptions.item)
});
}
break;
case top:
_this._setStateDecorator({
items: moveItemVertically(_this.state.items, itemOptions.item, VerticalMovementDirection.top)
});
break;
case bottom:
_this._setStateDecorator({
items: moveItemVertically(_this.state.items, itemOptions.item, VerticalMovementDirection.bottom)
});
break;
default:
case enter:
_this._releaseItems();
break;
}
});
_defineProperty(_assertThisInitialized(_this), "_onDragEnd", function () {
_this._setStateDecorator({
isDragging: false
});
});
_defineProperty(_assertThisInitialized(_this), "_onDragStart", function () {
_this._setStateDecorator({
isDragging: true
});
});
return _this;
}
_createClass(StyledNestableList, [{
key: "_releaseItems",
value: function _releaseItems() {
if (this.state.movedItem) {
var releaseItems = 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 _this2 = 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,
readOnly = _this$props.readOnly;
return /*#__PURE__*/React.createElement("div", {
"data-hook": dataHook,
className: st(classes.root, {
dragEnabled: !readOnly
}, className)
}, /*#__PURE__*/React.createElement(NestableList, {
items: this.state.items,
renderItem: this._renderItem,
renderPrefix: this._renderPrefix,
renderAction: this._renderAction,
onDragEnd: this._onDragEnd,
onDragStart: this._onDragStart,
onUpdate: function onUpdate(_ref2) {
var items = _ref2.items,
item = _ref2.item;
_this2._setStateDecorator({
items: items
});
onChange({
items: items,
item: item.data
});
},
maxDepth: maxDepth,
threshold: DEPTH_THRESHOLD,
theme: theme,
readOnly: readOnly,
preventChangeDepth: preventChangeDepth,
childrenStyle: {
position: 'relative',
marginLeft: "".concat(DEPTH_THRESHOLD, "px")
},
childrenProperty: 'children',
isRenderDraggingChildren: false
}), this.props.addItemLabel && this._renderAction({
depth: 0,
isRootAction: true
}));
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(props, state) {
if (state.isInternalStateUpdate) {
return _objectSpread(_objectSpread({}, state), {}, {
isInternalStateUpdate: false
});
}
return {
items: props.items
};
}
}]);
return StyledNestableList;
}(React.PureComponent);
StyledNestableList.displayName = 'StyledNestableList';
var Node = _objectSpread({
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
isCollapsed: PropTypes.bool,
addItemLabel: PropTypes.string
}, TableListItem.propTypes);
var NodeShape = PropTypes.shape(Node);
Node.children = PropTypes.arrayOf(NodeShape);
StyledNestableList.propTypes = {
/** Adds a bottom border (divider) to the last item. */
withBottomBorder: PropTypes.bool,
/** Prevents the list from being reordered by removing the dragging grip icons. */
readOnly: PropTypes.bool,
/** Adds a button to create a new item (to the Root or a child to the existing item). */
addItemLabel: PropTypes.string,
/** Triggers function when the "Add new ..." button is clicked. */
onAddItem: PropTypes.func,
/** Triggers function when the item’s order or nesting position is changed. */
onChange: PropTypes.func,
/** Defines a maximum depth (number of levels) for the list. */
maxDepth: PropTypes.number,
/** Allows dragging and dropping an item only on its own depth (inside the same level). */
preventChangeDepth: PropTypes.bool,
/**
* Defines each Nestable List item individually, using the following props:
* * __id__ - specifies an item’s ID.
* * __addItemLabel__ - creates the “Add new ...” button with a given label at the bottom of the item.
* * __isCollapsed__ - bool prop, defines whether to render the item’s children.
* * __children__ - defines an item’s children.
* * __draggable__ - bool prop, turns on / off dragging ability for an item.
* * All <a href="https://www.wix-style-react.com/?path=/story/components-lists-table--tablelistitem" target="_blank">`<TableListItem/>`</a> props can be used to format item’s style and content.
*/
items: PropTypes.arrayOf(NodeShape),
/** Can be applied in the tests as a data-hook HTML attribute. */
dataHook: PropTypes.string,
/** Defines a CSS class to be applied to the component's Root element. */
className: PropTypes.string
};
StyledNestableList.defaultProps = {
maxDepth: 10,
withBottomBorder: false,
preventChangeDepth: false,
items: [],
onAddItem: function onAddItem() {}
};
export default StyledNestableList;