react-cm-ui
Version:
React UI for Healthy Church
443 lines (389 loc) • 16.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _lodash = require("lodash");
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _cardDeprecatedHeader = _interopRequireDefault(require("./cardDeprecatedHeader"));
var _domUtils = _interopRequireDefault(require("../../utils/domUtils"));
var _icon = _interopRequireDefault(require("../../dataDisplay/icon"));
var _withStyles = _interopRequireDefault(require("../../styles/withStyles"));
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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
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 propTypes = {
active: _propTypes["default"].bool,
attached: _propTypes["default"].bool,
children: _propTypes["default"].node,
classes: _propTypes["default"].shape({
root: _propTypes["default"].string
}),
className: _propTypes["default"].string,
collapsable: _propTypes["default"].bool,
compact: _propTypes["default"].bool,
header: _propTypes["default"].bool,
id: _propTypes["default"].string,
nest: _propTypes["default"].bool,
onClick: _propTypes["default"].func,
style: _propTypes["default"].shape({}),
title: _propTypes["default"].string
};
var defaultProps = {
active: false,
attached: false,
children: null,
classes: null,
className: null,
collapsable: false,
compact: false,
header: false,
id: null,
nest: false,
onClick: null,
style: null,
title: null
};
var styles = function styles(theme) {
return {
root: {
backgroundColor: theme.palette.background.primary,
borderRadius: theme.shape.borderRadius,
boxShadow: "inset 0 0 0 1px ".concat(theme.palette.border.secondary),
margin: 'calc(2rem - .14285em) 0 1rem',
padding: 22,
position: 'relative',
transition: 'background-color 150ms ease-out',
'&.card-active': {
backgroundColor: theme.palette.grey[800],
color: theme.palette.text.contrastText,
cursor: 'default'
},
'&.card-attached': {
borderRadius: 0,
'& .card-header-attached': {
borderRadius: 0
}
},
'&.card-clickable': {
cursor: 'pointer',
'&:hover': {
backgroundColor: theme.palette.background.secondary
},
'&:active': {
backgroundColor: theme.palette.background.primary
}
},
'& .card-header': {
marginBottom: 16,
'&.card-header-attached': {
alignItems: 'center',
borderRadius: '3px 3px 0 0',
display: 'flex',
height: 44,
margin: '-22px -22px 16px',
padding: '0 22px'
},
'&.card-header-color': {
'&-blue, &-green, &-pink': {
color: theme.palette.text.contrastText
},
'&-blue': {
background: 'linear-gradient(to left, #54cc86 -66%, #1c93c4 100%)'
},
'&-green': {
background: 'linear-gradient(to left, #8bbd72 -28%, #329594 94%)'
},
'&-pink': {
background: 'linear-gradient(to left, #f99e49 -11%, #c33580 62%)'
}
}
},
'&.card-attached .card-header-attached': {
borderRadius: 0
},
'&.card-compact .card-header-attached': {
margin: '-11px -11px 16px',
padding: '0 11px'
},
'& .card-collapse-button': {
position: 'absolute',
right: 22,
top: 26,
zIndex: 1
},
'& .card-content': {
transition: 'height 166ms linear, opacity 166ms linear',
'& > div >': {
'& *:first-child': {
marginTop: 0
},
'& *:last-child': {
marginBottom: 0
}
}
},
'&.card-collapsable.card-is-collapsing .card-content': {
overflow: 'hidden'
},
'&.card-is-collapsed': {
paddingBottom: 6,
'& .card-content': {
opacity: 0
}
},
'&.card-compact': {
padding: 11,
'&.card-is-collapsed': {
paddingBottom: 0
},
'& .card-collapse-button': {
right: 11,
top: 15
}
},
'&.card-nest': {
border: 0,
boxShadow: '-1px 1px 2px 0 rgba(0, 0, 0, .1), 1px 1px 2px 0 rgba(0, 0, 0, .1)'
},
'& .card-content >': {
'& :first-child': {
marginTop: 0
},
'& :last-child': {
marginBottom: 0
}
},
'&:first-child': {
marginTop: 0
},
'&:last-child': {
marginBottom: 0
}
}
};
};
var CardDeprecated = /*#__PURE__*/function (_React$Component) {
_inherits(CardDeprecated, _React$Component);
var _super = _createSuper(CardDeprecated);
function CardDeprecated(props) {
var _this;
_classCallCheck(this, CardDeprecated);
_this = _super.call(this, props);
_this.state = {
contentHeight: null,
isCollapsed: false,
isCollapsing: false
};
_this.getContentHeight = _this.getContentHeight.bind(_assertThisInitialized(_this));
_this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
_this.onCollapseClick = _this.onCollapseClick.bind(_assertThisInitialized(_this));
_this.renderCollapsableButton = _this.renderCollapsableButton.bind(_assertThisInitialized(_this));
_this.removeIsCollapsing = _this.removeIsCollapsing.bind(_assertThisInitialized(_this));
_this.setContentHeight = _this.setContentHeight.bind(_assertThisInitialized(_this));
_this.setContentHeightDebounce = (0, _lodash.debounce)(function () {
return _this.setContentHeight();
}, 50);
if (props.collapsable) {
_this.prevContentHeight = 0;
_this.observer = new MutationObserver(function (mutations) {
(0, _lodash.forEach)(mutations, function (m) {
_this.setContentHeight();
});
});
}
return _this;
}
_createClass(CardDeprecated, [{
key: "componentDidMount",
value: function componentDidMount() {
var collapsable = this.props.collapsable;
if (collapsable) {
var outerContent = _reactDom["default"].findDOMNode(this.outerContent);
var innerContent = _reactDom["default"].findDOMNode(this.innerContent);
window.addEventListener('resize', this.setContentHeightDebounce);
outerContent.addEventListener(_domUtils["default"].cssTransitionType(outerContent), this.removeIsCollapsing);
this.observer.observe(innerContent, {
childList: true,
characterData: true,
subtree: true
});
this.setContentHeight();
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
var collapsable = this.props.collapsable;
if (collapsable) {
var outerContent = _reactDom["default"].findDOMNode(this.outerContent);
window.removeEventListener('resize', this.setContentHeightDebounce);
outerContent.removeEventListener(_domUtils["default"].cssTransitionType(outerContent), this.removeIsCollapsing);
this.observer.disconnect();
}
}
}, {
key: "onClick",
value: function onClick() {
var onClick = this.props.onClick;
var isTextHighlighted = window.getSelection().toString();
if (!isTextHighlighted && (0, _lodash.isFunction)(onClick)) {
onClick();
}
}
}, {
key: "onCollapseClick",
value: function onCollapseClick() {
var isCollapsed = this.state.isCollapsed;
this.setState({
contentHeight: !isCollapsed ? 0 : this.getContentHeight(),
isCollapsed: !isCollapsed,
isCollapsing: true
});
}
}, {
key: "getContentHeight",
value: function getContentHeight() {
var innerHeight = _reactDom["default"].findDOMNode(this.innerContent).offsetHeight;
if (innerHeight <= 0) {
return this.prevContentHeight;
}
this.prevContentHeight = innerHeight;
return innerHeight;
}
}, {
key: "setContentHeight",
value: function setContentHeight() {
var isCollapsed = this.state.isCollapsed;
if (!isCollapsed) {
this.setState({
contentHeight: this.getContentHeight()
});
}
}
}, {
key: "removeIsCollapsing",
value: function removeIsCollapsing() {
this.setState({
isCollapsing: false
});
}
}, {
key: "renderCollapsableButton",
value: function renderCollapsableButton() {
var collapsable = this.props.collapsable;
var isCollapsed = this.state.isCollapsed;
var rootClasses = (0, _classnames["default"])('card-collapse-button');
if (!collapsable) {
return null;
}
return /*#__PURE__*/_react["default"].createElement("div", {
className: rootClasses
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
compact: true,
onClick: this.onCollapseClick,
rotate: !isCollapsed ? 135 : 0,
type: "plus"
}));
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props = this.props,
active = _this$props.active,
attached = _this$props.attached,
children = _this$props.children,
classes = _this$props.classes,
className = _this$props.className,
collapsable = _this$props.collapsable,
compact = _this$props.compact,
header = _this$props.header,
id = _this$props.id,
onClick = _this$props.onClick,
nest = _this$props.nest,
style = _this$props.style,
title = _this$props.title;
var _this$state = this.state,
contentHeight = _this$state.contentHeight,
isCollapsed = _this$state.isCollapsed,
isCollapsing = _this$state.isCollapsing;
var rootClasses = (0, _classnames["default"])('ui', 'card', classes.root, className, {
'card-active': active,
'card-attached': attached,
'card-clickable': onClick,
'card-collapsable': collapsable,
'card-is-collapsed': isCollapsed,
'card-is-collapsing': isCollapsing,
'card-compact': compact,
'card-nest': nest
});
var convertChildren = (0, _lodash.isArray)(children) ? children : [children];
var customHeaderObj = (0, _lodash.find)(convertChildren, function (child) {
return child && (0, _lodash.isFunction)(child.type) && child.type.name === 'CardDeprecatedHeader';
});
var renderHeader;
if (header && customHeaderObj) {
renderHeader = /*#__PURE__*/_react["default"].createElement(_cardDeprecatedHeader["default"] // eslint-disable-next-line react/jsx-props-no-spreading
, _extends({}, customHeaderObj.props, {
title: title
}));
}
if (title && !header) {
renderHeader = /*#__PURE__*/_react["default"].createElement(_cardDeprecatedHeader["default"], {
title: title
});
} // eslint-disable-next-line consistent-return
var renderContent = (0, _lodash.map)(convertChildren, function (child, index) {
var isCardDeprecatedHeader = child && (0, _lodash.isFunction)(child.type) && child.type.name === 'CardDeprecatedHeader';
if (!isCardDeprecatedHeader) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: index
}, child);
}
});
return (
/*#__PURE__*/
// eslint-disable-next-line max-len
// eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
_react["default"].createElement("div", {
className: rootClasses,
id: id,
onClick: this.onClick,
style: style
}, this.renderCollapsableButton(), renderHeader, /*#__PURE__*/_react["default"].createElement("div", {
className: "card-content",
ref: function ref(outerContent) {
_this2.outerContent = outerContent;
},
style: {
height: contentHeight
}
}, /*#__PURE__*/_react["default"].createElement("div", {
ref: function ref(innerContent) {
_this2.innerContent = innerContent;
}
}, renderContent)))
);
}
}]);
return CardDeprecated;
}(_react["default"].Component);
CardDeprecated.Header = _cardDeprecatedHeader["default"];
CardDeprecated.propTypes = propTypes;
CardDeprecated.defaultProps = defaultProps;
var _default = (0, _withStyles["default"])(styles)(CardDeprecated);
exports["default"] = _default;