wix-style-react
Version:
wix-style-react
446 lines (445 loc) • 15.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
var _easingSt = require("../Foundation/stylable/easing.st.css");
var _constants = require("./constants");
var _TimeTableSt = require("./TimeTable.st.css");
var _SortableListBase = _interopRequireDefault(require("../SortableListBase"));
var _AddItem = _interopRequireDefault(require("../AddItem"));
var _Item = _interopRequireDefault(require("./components/Item"));
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/TimeTable/TimeTable.js";
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; }
var getSortableListBaseItems = columns => columns.map(_ref => {
var {
items,
disabled: columnDisabled = false
} = _ref;
return items.map(_ref2 => {
var {
content,
disabled,
draggable
} = _ref2;
var isDisabled = disabled !== undefined ? disabled : columnDisabled;
var isDraggable = draggable !== undefined ? draggable : !isDisabled;
return {
id: (0, _uniqueId.default)(),
content,
draggable: !!isDraggable,
disabled: !!isDisabled
};
});
});
class TimeTable extends _react.default.PureComponent {
constructor() {
super(...arguments);
this.state = {
hoveredColumnIndex: null,
dragging: false,
columns: [],
sortableListBaseItems: [],
groupName: (0, _uniqueId.default)('time-table')
};
this._renderHeader = () => /*#__PURE__*/_react.default.createElement("div", {
className: _TimeTableSt.classes.headerContainer,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 122,
columnNumber: 5
}
}, this.props.columns.map((_ref3, index) => {
var {
active = false,
disabled = false,
title,
subtitle,
droppable = !disabled
} = _ref3;
return /*#__PURE__*/_react.default.createElement("div", {
key: index,
className: (0, _TimeTableSt.st)(_TimeTableSt.classes.header, {
active,
disabled,
droppable
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 134,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants.DataHook.Title,
className: (0, _TimeTableSt.st)(_TimeTableSt.classes.title, {
active
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 138,
columnNumber: 13
}
}, title), /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants.DataHook.Subtitle,
className: (0, _TimeTableSt.st)(_TimeTableSt.classes.subtitle, {
active
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 144,
columnNumber: 13
}
}, subtitle));
}));
this._renderContent = () => {
var {
columns,
insertPosition,
onAdd,
height
} = this.props;
var {
sortableListBaseItems,
hoveredColumnIndex,
groupName
} = this.state;
return /*#__PURE__*/_react.default.createElement("div", {
className: _TimeTableSt.classes.contentContainer,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 161,
columnNumber: 7
}
}, columns.map((_ref4, columnIndex) => {
var {
active,
disabled,
droppable = !disabled,
actions
} = _ref4;
var columnIsHovered = hoveredColumnIndex === columnIndex;
var actionsVisible = !disabled && columnIsHovered;
var addItemVisible = actionsVisible && !!onAdd && !(actions && actions.length);
return /*#__PURE__*/_react.default.createElement("div", {
key: columnIndex,
"data-hook": _constants.DataHook.Column,
onMouseEnter: () => this._handleMouseEnter(columnIndex),
onMouseLeave: this._handleMouseLeave,
className: (0, _TimeTableSt.st)(_TimeTableSt.classes.column, {
droppable
}),
[_constants.DataAttribute.ColumnActive]: !!active,
[_constants.DataAttribute.ColumnDisabled]: !!disabled,
[_constants.DataAttribute.ColumnDroppable]: droppable,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 173,
columnNumber: 15
}
}, /*#__PURE__*/_react.default.createElement(_SortableListBase.default, {
usePortal: true,
className: _TimeTableSt.classes.content,
groupName: groupName,
onDragStart: this._handleDragStart,
onDragEnd: this._handleDragEnd,
containerId: String(columnIndex),
items: sortableListBaseItems[columnIndex],
droppable: droppable,
onDrop: this._handleDrop,
canDrag: this._handleCanDrag,
renderItem: this._renderItem,
insertPosition: insertPosition,
animationDuration: 500,
animationTiming: _easingSt.stVars['ease-7'],
style: {
height: this.state.dragging ? "calc(".concat(height, " - ").concat(_TimeTableSt.stVars.headerHeight, " - ").concat(_TimeTableSt.stVars.columnHeaderMargin, " - ").concat(_TimeTableSt.stVars.addItemPlaceholder, ")") : undefined
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 187,
columnNumber: 17
}
}), addItemVisible && this._renderAddItemButton(columnIndex), actionsVisible && this._renderActions(columnIndex));
}));
};
this._renderItem = _ref5 => {
var {
isPlaceholder,
previewStyles,
item: {
content,
disabled,
draggable
}
} = _ref5;
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants.DataHook.Item,
className: (0, _TimeTableSt.st)(_TimeTableSt.classes.item, {
isPlaceholder
}),
style: previewStyles,
[_constants.DataAttribute.ItemDraggable]: draggable,
[_constants.DataAttribute.ItemDisabled]: disabled,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 239,
columnNumber: 5
}
}, typeof content === 'function' ? content({
Item: _Item.default,
disabled,
draggable
}) : /*#__PURE__*/_react.default.createElement(_Item.default, {
disabled: disabled,
draggable: draggable,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 251,
columnNumber: 9
}
}, content));
};
this._renderActions = columnIndex => {
if (!this.props.columns || !this.props.columns[columnIndex] || !this.props.columns[columnIndex].actions) {
return null;
}
var column = this.props.columns[columnIndex];
var columnActions = column.actions;
return /*#__PURE__*/_react.default.createElement("div", {
className: _TimeTableSt.classes.actionsContainer,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 270,
columnNumber: 7
}
}, columnActions.map((action, index) => {
return /*#__PURE__*/_react.default.createElement(_AddItem.default, {
key: index,
className: _TimeTableSt.classes.addItemButton,
dataHook: _constants.DataHook.ColumnAction,
showIcon: false,
onClick: e => {
action.onClick(e, column, columnIndex);
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 273,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement("span", {
className: _TimeTableSt.classes.addItemLabel,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 282,
columnNumber: 15
}
}, action.prefixIcon, action.label));
}));
};
this._renderAddItemButton = columnIndex => /*#__PURE__*/_react.default.createElement("div", {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 294,
columnNumber: 5
}
}, /*#__PURE__*/_react.default.createElement(_AddItem.default, {
className: _TimeTableSt.classes.addItemButton,
dataHook: _constants.DataHook.AddItemButton,
showIcon: false,
onClick: () => this.props.onAdd(columnIndex),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 295,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("span", {
className: _TimeTableSt.classes.addItemLabel,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 301,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.AddSmall, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 302,
columnNumber: 11
}
}), this.props.addItemButtonLabel)));
this._handleDrop = _ref6 => {
var {
addedIndex: addedItemIndex,
removedIndex: removedItemIndex,
addedToContainerId,
removedFromContainerId
} = _ref6;
var {
columns
} = this.props;
var addedToColumnIndex = Number(addedToContainerId);
var removedFromColumnIndex = Number(removedFromContainerId);
this.setState({
hoveredColumnIndex: addedToColumnIndex
});
if (addedToColumnIndex === removedFromColumnIndex && addedItemIndex === removedItemIndex) {
return;
}
var newColumns = (0, _cloneDeep.default)(columns);
var removedItem = columns[removedFromColumnIndex].items[removedItemIndex];
newColumns[removedFromColumnIndex].items.splice(removedItemIndex, 1);
newColumns[addedToColumnIndex].items.splice(addedItemIndex, 0, removedItem);
if (this.props.onChange) {
this.props.onChange(newColumns, {
addedToColumnIndex,
removedFromColumnIndex,
addedItemIndex,
removedItemIndex
});
}
};
this._handleMouseEnter = columnIndex => {
if (!this.state.dragging) {
this.setState({
hoveredColumnIndex: columnIndex
});
}
};
this._handleMouseLeave = () => {
if (!this.state.dragging) {
this.setState({
hoveredColumnIndex: null
});
}
};
this._handleDragStart = () => {
this.setState({
dragging: true,
hoveredColumnIndex: null
});
};
this._handleDragEnd = () => {
this.setState({
dragging: false
});
};
this._handleCanDrag = _ref7 => {
var {
item
} = _ref7;
return !!item.draggable;
};
}
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.columns === prevState.columns) {
return null;
}
return _objectSpread(_objectSpread({}, prevState), {}, {
columns: nextProps.columns,
sortableListBaseItems: getSortableListBaseItems(nextProps.columns)
});
}
render() {
var {
dataHook,
height
} = this.props;
var {
dragging
} = this.state;
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _TimeTableSt.st)(_TimeTableSt.classes.root, {
dragging
}),
style: {
height
},
"data-hook": dataHook,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 223,
columnNumber: 7
}
}, this._renderHeader(), this._renderContent());
}
}
TimeTable.displayName = 'TimeTable';
TimeTable.propTypes = {
/** Hook for testing purposes. */
dataHook: _propTypes.default.string,
/**
* Event triggered on column data change:
* `onChange(columns, { addedToColumnIndex, removedFromColumnIndex, addedItemIndex, removedItemIndex })`
*/
onChange: _propTypes.default.func,
/**
* Column data configuration. Item content is provided as a simple node or a
* render function with `content` property. When render function is used the
* signature is:
* `({ Item, draggable, disabled }) => {}`:
* - `Item` - component used to provide default item visual representation.
* You should render `<Item draggable={draggable} disabled={disabled}>...</Item>`
* - `draggable` - item is draggable.
* - `disabled` - item is disabled.
*/
columns: _propTypes.default.arrayOf(_propTypes.default.shape({
title: _propTypes.default.string.isRequired,
subtitle: _propTypes.default.string.isRequired,
actions: _propTypes.default.arrayOf(_propTypes.default.shape({
onClick: _propTypes.default.func,
prefixIcon: _propTypes.default.node,
label: _propTypes.default.string
})),
items: _propTypes.default.arrayOf(_propTypes.default.shape({
content: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
draggable: _propTypes.default.bool,
disabled: _propTypes.default.bool
})).isRequired,
disabled: _propTypes.default.bool,
droppable: _propTypes.default.bool,
active: _propTypes.default.bool
})),
/**
* Event triggered on add button click: `onAdd(columnIndex)`.
* When not provided the button will be hidden.
*/
onAdd: _propTypes.default.func,
/** Title of add button. */
addItemButtonLabel: _propTypes.default.node,
/**
* Position where dragged items will be inserted. Using `any` value will
* allow the items to be re-ordered within the same column.
*/
insertPosition: _propTypes.default.oneOf(['start', 'end', 'any']),
/** Custom table height. */
height: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
};
TimeTable.defaultProps = {
columns: [],
insertPosition: 'any',
height: '283px'
};
var _default = exports.default = TimeTable;
//# sourceMappingURL=TimeTable.js.map