react-cm-ui
Version:
React UI for Healthy Church
419 lines (357 loc) • 23.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classnames = _interopRequireDefault(require("classnames"));
var _lodash = _interopRequireDefault(require("lodash"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _reactResizable = require("react-resizable");
var _utils = _interopRequireDefault(require("../../utils/utils"));
var _icon = _interopRequireDefault(require("../icon"));
var _breakpointsConstants = require("../../styles/breakpointsConstants");
var _tableConstants = require("./tableConstants");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
var columnNumberEnums = ['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var propTypes = {
adjacentStickyColumnsTotalWidth: _propTypes["default"].number,
children: _propTypes["default"].node,
className: _propTypes["default"].string,
collapsing: _propTypes["default"].bool,
desktop: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].oneOf(columnNumberEnums)]),
desktopLarge: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].oneOf(columnNumberEnums)]),
forceTableUpdate: _propTypes["default"].func,
id: _propTypes["default"].string,
isResizable: _propTypes["default"].bool,
laptop: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].oneOf(columnNumberEnums)]),
mobile: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].oneOf(columnNumberEnums)]),
mobileLarge: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].oneOf(columnNumberEnums)]),
mobileMedium: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].oneOf(columnNumberEnums)]),
onClick: _propTypes["default"].func,
resizableColumnWidthPercentage: _propTypes["default"].number,
setResizableCellsWordWrapping: _propTypes["default"].func,
shouldResetWhiteSpaceStyle: _propTypes["default"].bool,
sticky: _propTypes["default"].bool,
stickyColumnCount: _propTypes["default"].number,
stickyTableContainerWidth: _propTypes["default"].number,
style: _propTypes["default"].object,
tablet: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].oneOf(columnNumberEnums)]),
textAlign: _propTypes["default"].oneOf(['center', 'left', 'right']),
width: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].oneOf(columnNumberEnums)])
};
var defaultProps = {
adjacentStickyColumnsTotalWidth: 0,
forceTableUpdate: undefined,
isResizable: false,
resizableColumnWidthPercentage: undefined,
stickyColumnCount: undefined,
setResizableCellsWordWrapping: undefined,
shouldResetWhiteSpaceStyle: true,
stickyTableContainerWidth: 0
};
var HEADER_CELL_WIDTH_OFFSET = 10;
var TableHeaderCell = /*#__PURE__*/function (_React$PureComponent) {
_inherits(TableHeaderCell, _React$PureComponent);
var _super = _createSuper(TableHeaderCell);
function TableHeaderCell() {
var _this;
_classCallCheck(this, TableHeaderCell);
_this = _super.call(this);
_this.state = {
minWidth: 0,
expandedWidthPercentage: 0,
haveExpandedMeasuresBeenSet: false,
widthPercentage: 0,
shouldDisableResizeHandler: false
};
_this.canCellKeepExpanding = _this.canCellKeepExpanding.bind(_assertThisInitialized(_this));
_this.debouncedUpdateExpandedWidth = null;
_this.getMaxWidthPercentages = _this.getMaxWidthPercentages.bind(_assertThisInitialized(_this));
_this.getResizingHandler = _this.getResizingHandler.bind(_assertThisInitialized(_this));
_this.header = /*#__PURE__*/_react["default"].createRef();
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
_this.onDoubleClick = _this.onDoubleClick.bind(_assertThisInitialized(_this));
_this.onResizeColumn = _this.onResizeColumn.bind(_assertThisInitialized(_this));
_this.onResizeStop = _this.onResizeStop.bind(_assertThisInitialized(_this));
return _this;
}
_createClass(TableHeaderCell, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
var isResizable = this.props.isResizable;
if (isResizable) {
var currentWidth = _lodash["default"].get(this, 'header.current.clientWidth');
this.setState({
minWidth: currentWidth
});
}
this.debouncedUpdateExpandedWidth = isResizable && _lodash["default"].debounce(function (initialLoad) {
var getMaxWidthPercentages = _this2.getMaxWidthPercentages;
var _this2$props = _this2.props,
shouldResetWhiteSpaceStyle = _this2$props.shouldResetWhiteSpaceStyle,
setResizableCellsWordWrapping = _this2$props.setResizableCellsWordWrapping,
stickyTableContainerWidth = _this2$props.stickyTableContainerWidth,
resizableColumnWidthPercentage = _this2$props.resizableColumnWidthPercentage,
adjacentStickyColumnsTotalWidth = _this2$props.adjacentStickyColumnsTotalWidth,
forceTableUpdate = _this2$props.forceTableUpdate,
stickyColumnCount = _this2$props.stickyColumnCount;
var _this2$state = _this2.state,
currentWidthPercentage = _this2$state.widthPercentage,
minWidth = _this2$state.minWidth;
var shouldUpdateExpandedWidth = isResizable && minWidth > 0 && shouldResetWhiteSpaceStyle;
if (shouldUpdateExpandedWidth) {
var _this2$header, _this2$header$current, _this2$header2, _this2$header2$curren;
var maxWidthPercentages = getMaxWidthPercentages(stickyTableContainerWidth);
setResizableCellsWordWrapping(false); // This ensures the header will readjust according to the content
// after a browser resize event.
if ((_this2$header = _this2.header) === null || _this2$header === void 0 ? void 0 : (_this2$header$current = _this2$header.current) === null || _this2$header$current === void 0 ? void 0 : _this2$header$current.style) {
_this2.header.current.style.width = '1%';
_this2.header.current.style.minWidth = '';
}
var updatedExpandedWidth = _lodash["default"].get(_this2, 'header.current.clientWidth', 0) + HEADER_CELL_WIDTH_OFFSET;
var adjustedAdjacentPercentage = adjacentStickyColumnsTotalWidth / stickyTableContainerWidth * 100;
var shouldDisableResizeHandler = stickyColumnCount > 1 && updatedExpandedWidth + adjacentStickyColumnsTotalWidth > stickyTableContainerWidth * maxWidthPercentages[0];
var expandedWidthPercentage = updatedExpandedWidth / stickyTableContainerWidth * 100;
var widthPercentage;
if (initialLoad) {
if (resizableColumnWidthPercentage) {
widthPercentage = resizableColumnWidthPercentage - adjustedAdjacentPercentage;
} else {
widthPercentage = minWidth / stickyTableContainerWidth * 100;
}
} else {
widthPercentage = currentWidthPercentage;
} // it never goes further than maximun allowed
var adjustedMaxWIdth = maxWidthPercentages[1] - adjustedAdjacentPercentage;
expandedWidthPercentage = parseInt(Math.min(expandedWidthPercentage, adjustedMaxWIdth), 10);
widthPercentage = parseInt(Math.min(widthPercentage, adjustedMaxWIdth), 10);
var updatedMinWidth = stickyTableContainerWidth * widthPercentage / 100;
if ((_this2$header2 = _this2.header) === null || _this2$header2 === void 0 ? void 0 : (_this2$header2$curren = _this2$header2.current) === null || _this2$header2$curren === void 0 ? void 0 : _this2$header2$curren.style) {
_this2.header.current.style.width = "".concat(widthPercentage, "%");
_this2.header.current.style.minWidth = updatedMinWidth;
}
_this2.setState({
haveExpandedMeasuresBeenSet: true,
// expandedWidth is calculated with this variable on double click
expandedWidthPercentage: expandedWidthPercentage,
widthPercentage: widthPercentage,
minWidth: updatedMinWidth,
shouldDisableResizeHandler: !!shouldDisableResizeHandler
}, function () {
setResizableCellsWordWrapping(true);
forceTableUpdate();
});
}
}, _tableConstants.DEBOUNCE_WAIT_TIME);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState) {
var _this3 = this;
var prevStickyTableContainerWidth = prevProps.stickyTableContainerWidth;
var _this$props = this.props,
isResizable = _this$props.isResizable,
stickyTableContainerWidth = _this$props.stickyTableContainerWidth;
var prevShouldDisableResizeHandler = prevState.shouldDisableResizeHandler;
var _this$state = this.state,
haveExpandedMeasuresBeenSet = _this$state.haveExpandedMeasuresBeenSet,
shouldDisableResizeHandler = _this$state.shouldDisableResizeHandler;
var enoughInfoToSetExpandedMeasures = isResizable && !haveExpandedMeasuresBeenSet && stickyTableContainerWidth > 0;
if (enoughInfoToSetExpandedMeasures) {
this.debouncedUpdateExpandedWidth(true);
} // mantains the expanded measures when table container size changes
var shouldUpdatePercentageWidth = isResizable && prevStickyTableContainerWidth > 0 && stickyTableContainerWidth > 0 && prevStickyTableContainerWidth !== stickyTableContainerWidth;
var shouldCellUpdateAsInitial = prevShouldDisableResizeHandler && !shouldDisableResizeHandler;
if (shouldUpdatePercentageWidth) {
this.setState({
shouldDisableResizeHandler: false
}, function () {
// let's refresh the header cell expanded measures
_this3.debouncedUpdateExpandedWidth(shouldCellUpdateAsInitial);
});
}
}
}, {
key: "onClick",
value: function onClick() {
var onClick = this.props.onClick;
if (_lodash["default"].isFunction(onClick)) {
onClick();
}
}
}, {
key: "onDoubleClick",
value: function onDoubleClick() {
var getMaxWidthPercentages = this.getMaxWidthPercentages;
var stickyTableContainerWidth = this.props.stickyTableContainerWidth;
var currentExpandedWidthPercentage = this.state.expandedWidthPercentage;
var maxWidthPercentages = getMaxWidthPercentages(stickyTableContainerWidth);
var expandedWidthPercentage = Math.min(currentExpandedWidthPercentage, maxWidthPercentages[1]);
var currentWidth = parseInt(expandedWidthPercentage * stickyTableContainerWidth / 100, 10);
this.setState({
minWidth: currentWidth,
widthPercentage: expandedWidthPercentage
});
}
}, {
key: "onResizeColumn",
value: function onResizeColumn(event, node) {
var stickyTableContainerWidth = this.props.stickyTableContainerWidth;
var minWidth = this.state.minWidth;
var size = node.size;
var canKeepExpanding = this.canCellKeepExpanding(size.width) || size.width <= minWidth;
if (canKeepExpanding) {
var widthPercentage = parseInt(minWidth / stickyTableContainerWidth * 100, 10);
this.setState({
minWidth: node.size.width,
widthPercentage: widthPercentage
});
}
}
}, {
key: "onResizeStop",
value: function onResizeStop() {
var forceTableUpdate = this.props.forceTableUpdate;
var currentWidth = _lodash["default"].get(this, 'header.current.clientWidth', 20);
this.setState({
minWidth: currentWidth
});
forceTableUpdate();
}
}, {
key: "getMaxWidthPercentages",
value: function getMaxWidthPercentages(stickyTableContainerWidth) {
var maxWidth = stickyTableContainerWidth >= _breakpointsConstants.values.md ? _tableConstants.TH_MAX_WIDTH_PERCENTAGE_DESKTOP : _tableConstants.TH_MAX_WIDTH_PERCENTAGE_MOBILE;
var adjustedMaxWidth = parseInt(maxWidth * 100, 10);
return [maxWidth, adjustedMaxWidth];
}
}, {
key: "getResizingHandler",
value: function getResizingHandler() {
var shouldDisableResizeHandler = this.state.shouldDisableResizeHandler;
return /*#__PURE__*/_react["default"].createElement("div", {
role: "presentation",
className: "react-resizable-handle",
onClick: function onClick(e) {
return e.stopPropagation();
},
onDoubleClick: this.onDoubleClick,
style: _objectSpread({
cursor: 'col-resize',
height: 14,
marginRight: -4,
position: 'absolute',
right: 0,
top: '50%',
transform: 'translateY(-50%)',
width: 14
}, shouldDisableResizeHandler && {
display: 'none'
})
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
color: "static",
compact: true,
size: "small",
type: "splitter"
}));
}
}, {
key: "canCellKeepExpanding",
value: function canCellKeepExpanding(currentMinWidth) {
var _this$props2 = this.props,
stickyTableContainerWidth = _this$props2.stickyTableContainerWidth,
adjacentStickyColumnsTotalWidth = _this$props2.adjacentStickyColumnsTotalWidth;
var minWidth = this.state.minWidth;
var maxWidthPercentages = this.getMaxWidthPercentages(stickyTableContainerWidth);
var currentWidth = currentMinWidth || minWidth;
var stickyColumnsTotalWidth = adjacentStickyColumnsTotalWidth + currentWidth;
var maxResizingWidth = stickyTableContainerWidth * maxWidthPercentages[0];
var canKeepExpanding = stickyColumnsTotalWidth < maxResizingWidth;
return canKeepExpanding;
}
}, {
key: "render",
value: function render() {
var _this4 = this;
var _this$props3 = this.props,
children = _this$props3.children,
className = _this$props3.className,
collapsing = _this$props3.collapsing,
desktop = _this$props3.desktop,
desktopLarge = _this$props3.desktopLarge,
id = _this$props3.id,
isResizable = _this$props3.isResizable,
laptop = _this$props3.laptop,
mobile = _this$props3.mobile,
mobileLarge = _this$props3.mobileLarge,
mobileMedium = _this$props3.mobileMedium,
onClick = _this$props3.onClick,
sticky = _this$props3.sticky,
style = _this$props3.style,
tablet = _this$props3.tablet,
textAlign = _this$props3.textAlign,
width = _this$props3.width;
var _this$state2 = this.state,
minWidth = _this$state2.minWidth,
widthPercentage = _this$state2.widthPercentage;
var cellPrefix = 'table-header-cell';
var containerClasses = (0, _classnames["default"])('table-header-cell', 'table-cell', _lodash["default"].isNumber(width) ? "".concat(cellPrefix, "-").concat(_utils["default"].numberToWord(width)) : width === true || width === 'auto' ? "".concat(cellPrefix, "-show") : width === false ? "".concat(cellPrefix, "-hide") : null, _lodash["default"].isNumber(mobile) ? "".concat(cellPrefix, "-mobile-").concat(_utils["default"].numberToWord(mobile)) : mobile === true || mobile === 'auto' ? "".concat(cellPrefix, "-mobile-show") : mobile === false ? "".concat(cellPrefix, "-mobile-hide") : null, _lodash["default"].isNumber(mobileMedium) ? "".concat(cellPrefix, "-mobile-medium-").concat(_utils["default"].numberToWord(mobileMedium)) : mobileMedium === true || mobileMedium === 'auto' ? "".concat(cellPrefix, "-mobile-medium-show") : mobileMedium === false ? "".concat(cellPrefix, "-mobile-medium-hide") : null, _lodash["default"].isNumber(mobileLarge) ? "".concat(cellPrefix, "-mobile-large-").concat(_utils["default"].numberToWord(mobileLarge)) : mobileLarge === true || mobileLarge === 'auto' ? "".concat(cellPrefix, "-mobile-large-show") : mobileLarge === false ? "".concat(cellPrefix, "-mobile-large-hide") : null, _lodash["default"].isNumber(tablet) ? "".concat(cellPrefix, "-tablet-").concat(_utils["default"].numberToWord(tablet)) : tablet === true || tablet === 'auto' ? "".concat(cellPrefix, "-tablet-show") : tablet === false ? "".concat(cellPrefix, "-tablet-hide") : null, _lodash["default"].isNumber(laptop) ? "".concat(cellPrefix, "-laptop-").concat(_utils["default"].numberToWord(laptop)) : laptop === true || laptop === 'auto' ? "".concat(cellPrefix, "-laptop-show") : laptop === false ? "".concat(cellPrefix, "-laptop-hide") : null, _lodash["default"].isNumber(desktop) ? "".concat(cellPrefix, "-desktop-").concat(_utils["default"].numberToWord(desktop)) : desktop === true || desktop === 'auto' ? "".concat(cellPrefix, "-desktop-show") : desktop === false ? "".concat(cellPrefix, "-desktop-hide") : null, _lodash["default"].isNumber(desktopLarge) ? "".concat(cellPrefix, "-desktop-").concat(_utils["default"].numberToWord(desktopLarge)) : desktopLarge === true || desktopLarge === 'auto' ? "".concat(cellPrefix, "-desktop-show") : desktopLarge === false ? "".concat(cellPrefix, "-desktop-hide") : null, {
'table-header-cell-clickable': onClick,
'table-cell-collapsing': collapsing,
'table-header-cell-text-align-center': textAlign === 'center',
'table-header-cell-text-align-left': textAlign === 'left',
'table-header-cell-text-align-right': textAlign === 'right',
'table-header-cell-sticky': sticky
}, className);
var shouldUseMinWidth = isResizable && minWidth > 0;
var shouldUseWidthPercentage = isResizable && widthPercentage > 0;
var updatedStyle = _objectSpread(_objectSpread(_objectSpread({}, style), shouldUseMinWidth && {
minWidth: "".concat(minWidth, "px")
}), shouldUseWidthPercentage && {
width: "".concat(widthPercentage, "%")
});
var tableHeaderCell = /*#__PURE__*/_react["default"].createElement("th", {
className: containerClasses,
id: id,
onClick: this.onClick,
style: updatedStyle,
ref: function ref(_ref) {
_this4.header.current = _ref;
}
}, /*#__PURE__*/_react["default"].createElement("span", null, children));
var resizingHandler = this.getResizingHandler();
var resizableTableHeaderCell = isResizable && /*#__PURE__*/_react["default"].createElement(_reactResizable.Resizable, {
width: minWidth,
height: 0,
handle: resizingHandler,
onResize: this.onResizeColumn,
onResizeStop: this.onResizeStop,
draggableOpts: {
enableUserSelectHack: false
}
}, tableHeaderCell);
return isResizable ? resizableTableHeaderCell : tableHeaderCell;
}
}]);
return TableHeaderCell;
}(_react["default"].PureComponent);
TableHeaderCell.propTypes = propTypes;
TableHeaderCell.defaultProps = defaultProps;
var _default = TableHeaderCell;
exports["default"] = _default;