react-health-card
Version:
An awesome react health card component.
464 lines (417 loc) • 25.7 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var PropTypes = _interopDefault(require('prop-types'));
var classNames = _interopDefault(require('classnames'));
var styled = _interopDefault(require('styled-components'));
var _get = _interopDefault(require('lodash/get'));
var _padEnd = _interopDefault(require('lodash/padEnd'));
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
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 _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 _getPrototypeOf(o) {
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
};
return _getPrototypeOf(o);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
function _possibleConstructorReturn(self, call) {
if (call && (typeof call === "object" || typeof call === "function")) {
return call;
}
return _assertThisInitialized(self);
}
function _taggedTemplateLiteral(strings, raw) {
if (!raw) {
raw = strings.slice(0);
}
return Object.freeze(Object.defineProperties(strings, {
raw: {
value: Object.freeze(raw)
}
}));
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
return arr2;
}
}
function _iterableToArray(iter) {
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance");
}
var images = {
"default": {
logoUri: 'data:image/png;base64,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'
}
};
function _templateObject2() {
var data = _taggedTemplateLiteral(["\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n"]);
_templateObject2 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject() {
var data = _taggedTemplateLiteral(["\n ", ";\n"]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
var Attribute = styled.div(_templateObject(), function (props) {
return props.attributeStyle;
});
var CardFront = styled.div(_templateObject2(), function (props) {
return props.bgColor ? "\n\t\t\tbackground: ".concat(props.bgColor, ";\n\t\t") : '';
}, function (props) {
return props.bgImage ? "\n\t\t\tbackground-image: url(".concat(props.bgImage, ");\n\t\t\tbackground-size: calc(100% + 0.5rem) calc(100% + 0.5rem);\n \tbackground-position: -0.25rem -0.25rem;\n\t\t") : '';
});
var CardBack = CardFront;
var DEFAULT_LOGO_STYLE = 'right: 10%; top: 10%';
var DEFAULT_ISSUE_DATE_STYLE = 'bottom: 15%; left: 65%;';
var DEFAULT_ISSUE_NUMBER_STYLE = 'bottom: 15%; left: 10%;';
var DEFAULT_CARD_NUMBER_STYLE = 'top: 20%; left: 10%;';
var DEFAULT_MEMBER_NUMBER_STYLE = 'bottom: 15%; left: 10%;';
var DEFAULT_NAME_STYLE = 'bottom: 40%; left: 20%;';
var DEFAULT_RANK_STYLE = 'bottom: 40%; left: 10%;';
var _formatDate = function _formatDate(date, format) {
var dateFormatArray = format.split('/');
var startIndex = 0;
var newDate = [];
dateFormatArray.forEach(function (element) {
var dateFormatElementLength = element.length;
var dateElement = date.slice(startIndex, startIndex + dateFormatElementLength);
startIndex += dateFormatElementLength;
newDate = [].concat(_toConsumableArray(newDate), [_padEnd(dateElement || '', dateFormatElementLength, '•')]);
});
return newDate.join('/');
};
var _includesPositioning = function _includesPositioning(styleText) {
return styleText && (styleText.includes('bottom') || styleText.includes('top') || styleText.includes('right') || styleText.includes('left'));
};
var Card =
/*#__PURE__*/
function (_Component) {
_inherits(Card, _Component);
function Card() {
var _getPrototypeOf2;
var _this;
_classCallCheck(this, Card);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Card)).call.apply(_getPrototypeOf2, [this].concat(args)));
_defineProperty(_assertThisInitialized(_this), "getFocusedClass", function (attribute) {
var focused = _this.props.focused;
return attribute === focused ? 'react-health-card--focused' : '';
});
_defineProperty(_assertThisInitialized(_this), "shouldCardBeFlipped", function (focused) {
var position = _get(_this.props, "".concat(focused, "Position"));
return position === 'back';
});
_defineProperty(_assertThisInitialized(_this), "handleToggleFlipCard", function () {
return _this.setState({
isFlipped: !_this.state.isFlipped
});
});
_defineProperty(_assertThisInitialized(_this), "render", function () {
var _this$props = _this.props,
bgColorFront = _this$props.bgColorFront,
bgColorBack = _this$props.bgColorBack,
bgImageFront = _this$props.bgImageFront,
logoUri = _this$props.logoUri,
focused = _this$props.focused,
isFlipped = _this$props.isFlipped,
cardNumber = _this$props.cardNumber,
issueDate = _this$props.issueDate,
issueNumber = _this$props.issueNumber,
memberNumber = _this$props.memberNumber,
name = _this$props.name,
namePlaceholder = _this$props.namePlaceholder,
rank = _this$props.rank,
type = _this$props.type,
logoPosition = _this$props.logoPosition,
logoStyle = _this$props.logoStyle,
rankPosition = _this$props.rankPosition,
rankStyle = _this$props.rankStyle,
rankLength = _this$props.rankLength,
rankTitle = _this$props.rankTitle,
namePosition = _this$props.namePosition,
nameStyle = _this$props.nameStyle,
memberNumberPosition = _this$props.memberNumberPosition,
memberNumberStyle = _this$props.memberNumberStyle,
memberNumberTitle = _this$props.memberNumberTitle,
memberNumberLength = _this$props.memberNumberLength,
issueDateStyle = _this$props.issueDateStyle,
issueDateTitle = _this$props.issueDateTitle,
issueDatePosition = _this$props.issueDatePosition,
issueDateFormat = _this$props.issueDateFormat,
issueNumberPosition = _this$props.issueNumberPosition,
issueNumberStyle = _this$props.issueNumberStyle,
issueNumberTitle = _this$props.issueNumberTitle,
issueNumberLength = _this$props.issueNumberLength,
cardNumberPosition = _this$props.cardNumberPosition,
cardNumberStyle = _this$props.cardNumberStyle,
cardNumberTitle = _this$props.cardNumberTitle,
cardNumberLength = _this$props.cardNumberLength,
showLogo = _this$props.showLogo,
showCardNumber = _this$props.showCardNumber,
showIssueDate = _this$props.showIssueDate,
showIssueNumber = _this$props.showIssueNumber,
showMemberNumber = _this$props.showMemberNumber,
showRank = _this$props.showRank,
showName = _this$props.showName,
showSwipeBar = _this$props.showSwipeBar;
var newLogoStyle = "".concat(_includesPositioning(logoStyle) ? '' : DEFAULT_LOGO_STYLE).concat(logoStyle || '');
var newIssueDateStyle = "".concat(_includesPositioning(issueDateStyle) ? '' : DEFAULT_ISSUE_DATE_STYLE).concat(issueDateStyle || '');
var newIssueNumberStyle = "".concat(_includesPositioning(issueNumberStyle) ? '' : DEFAULT_ISSUE_NUMBER_STYLE).concat(issueNumberStyle || '');
var newCardNumberStyle = "".concat(_includesPositioning(cardNumberStyle) ? '' : DEFAULT_CARD_NUMBER_STYLE).concat(cardNumberStyle || '');
var newMemberNumberStyle = "".concat(_includesPositioning(memberNumberStyle) ? '' : DEFAULT_MEMBER_NUMBER_STYLE).concat(memberNumberStyle || '');
var newNameStyle = "".concat(_includesPositioning(nameStyle) ? '' : DEFAULT_NAME_STYLE).concat(nameStyle || '');
var newRankStyle = "".concat(_includesPositioning(rankStyle) ? '' : DEFAULT_RANK_STYLE).concat(rankStyle || '');
return React__default.createElement("div", {
className: "react-health-card__container"
}, React__default.createElement("div", {
className: classNames('react-health-card', type ? "react-health-card--".concat(type) : '', isFlipped || _this.shouldCardBeFlipped(focused) ? 'react-health-card--flipped' : '')
}, React__default.createElement(CardFront, {
className: "react-health-card__front",
bgColor: bgColorFront,
bgImage: bgImageFront
}, logoPosition === 'front' && showLogo && !bgImageFront && React__default.createElement(Attribute, {
className: "react-health-card__attribute",
attributeStyle: newLogoStyle
}, React__default.createElement("img", {
src: logoUri || _get(images, "default.logoUri"),
className: classNames('react-health-card__logo', "react-health-card--".concat(type)),
alt: "logo"
})), rankPosition === 'front' && showRank && React__default.createElement(Attribute, {
className: classNames('react-health-card__attribute react-health-card__editable', _this.getFocusedClass('rank')),
attributeStyle: newRankStyle
}, React__default.createElement("div", {
className: "react-health-card__with-content",
"data-before": rankTitle
}, _padEnd(rank, rankLength, '•'))), namePosition === 'front' && showName && React__default.createElement(Attribute, {
className: classNames('react-health-card__attribute react-health-card__editable', _this.getFocusedClass('name')),
attributeStyle: newNameStyle
}, name || namePlaceholder), memberNumberPosition === 'front' && showMemberNumber && React__default.createElement(Attribute, {
className: classNames('react-health-card__attribute react-health-card__editable', _this.getFocusedClass('memberNumber')),
attributeStyle: newMemberNumberStyle
}, React__default.createElement("div", {
className: "react-health-card__with-content",
"data-before": memberNumberTitle
}, _padEnd(memberNumber, memberNumberLength, '•'))), issueDatePosition === 'front' && showIssueDate && React__default.createElement(Attribute, {
className: classNames('react-health-card__attribute react-health-card__editable', _this.getFocusedClass('issueDate')),
attributeStyle: newIssueDateStyle
}, React__default.createElement("div", {
className: "react-health-card__with-content",
"data-before": issueDateTitle
}, _formatDate(issueDate, issueDateFormat))), issueNumberPosition === 'front' && showIssueNumber && React__default.createElement(Attribute, {
className: classNames('react-health-card__attribute react-health-card__editable', _this.getFocusedClass('issueNumber')),
attributeStyle: newIssueNumberStyle
}, React__default.createElement("div", {
className: "react-health-card__with-content",
"data-before": issueNumberTitle
}, _padEnd(issueNumber, issueNumberLength, '•'))), cardNumberPosition === 'front' && showCardNumber && React__default.createElement(Attribute, {
className: classNames('react-health-card__attribute react-health-card__editable', _this.getFocusedClass('cardNumber')),
attributeStyle: newCardNumberStyle
}, React__default.createElement("div", {
className: "react-health-card__with-content",
"data-before": cardNumberTitle
}, _padEnd(cardNumber, cardNumberLength, '•')))), React__default.createElement(CardBack, {
className: "react-health-card__back",
bgColor: bgColorBack
}, showSwipeBar && React__default.createElement("div", {
className: "react-health-card__bar"
}), logoPosition === 'back' && showLogo && React__default.createElement(Attribute, {
className: "react-health-card__attribute",
attributeStyle: newLogoStyle
}, React__default.createElement("img", {
src: _get(images, "default.logoUri") || logoUri,
className: classNames('react-health-card__logo', "react-health-card--".concat(type)),
alt: "logo"
})), rankPosition === 'back' && showRank && React__default.createElement(Attribute, {
className: classNames('react-health-card__attribute react-health-card__editable', _this.getFocusedClass('rank')),
attributeStyle: newRankStyle
}, React__default.createElement("div", {
className: "react-health-card__with-content",
"data-before": rankTitle
}, _padEnd(rank, rankLength, '•'))), namePosition === 'back' && showName && React__default.createElement(Attribute, {
className: classNames('react-health-card__attribute react-health-card__editable', _this.getFocusedClass('name')),
attributeStyle: newNameStyle
}, name || namePlaceholder), memberNumberPosition === 'back' && showMemberNumber && React__default.createElement(Attribute, {
className: classNames('react-health-card__attribute react-health-card__editable', _this.getFocusedClass('memberNumber')),
attributeStyle: newMemberNumberStyle
}, React__default.createElement("div", {
className: "react-health-card__with-content",
"data-before": memberNumberTitle
}, _padEnd(memberNumber, memberNumberLength, '•'))), issueDatePosition === 'back' && showIssueDate && React__default.createElement(Attribute, {
className: classNames('react-health-card__attribute react-health-card__editable', _this.getFocusedClass('issueDate')),
attributeStyle: newIssueDateStyle
}, React__default.createElement("div", {
className: "react-health-card__with-content",
"data-before": issueDateTitle
}, _formatDate(issueDate, issueDateFormat))), issueNumberPosition === 'back' && showIssueNumber && React__default.createElement(Attribute, {
className: classNames('react-health-card__attribute react-health-card__editable', _this.getFocusedClass('issueNumber')),
attributeStyle: newIssueNumberStyle
}, React__default.createElement("div", {
className: "react-health-card__with-content",
"data-before": issueNumberTitle
}, _padEnd(issueNumber, issueNumberLength, '•'))), cardNumberPosition === 'back' && showCardNumber && React__default.createElement(Attribute, {
className: classNames('react-health-card__attribute react-health-card__editable', _this.getFocusedClass('cardNumber')),
attributeStyle: newCardNumberStyle
}, React__default.createElement("div", {
className: "react-health-card__with-content",
"data-before": cardNumberTitle
}, _padEnd(cardNumber, cardNumberLength, '•'))))));
});
return _this;
}
return Card;
}(React.Component);
Card.propTypes = {
bgColorFront: PropTypes.string,
bgColorBack: PropTypes.string,
bgImageFront: PropTypes.string,
logoUri: PropTypes.string,
focused: PropTypes.string,
isFlipped: PropTypes.bool,
cardNumber: PropTypes.string,
issueDate: PropTypes.string,
issueNumber: PropTypes.string,
memberNumber: PropTypes.string,
namePlaceholder: PropTypes.string,
rank: PropTypes.string,
name: PropTypes.string,
type: PropTypes.string,
logoPosition: PropTypes.string,
logoStyle: PropTypes.string,
rankPosition: PropTypes.string,
rankStyle: PropTypes.string,
rankLength: PropTypes.number,
rankTitle: PropTypes.string,
namePosition: PropTypes.string,
nameStyle: PropTypes.string,
memberNumberPosition: PropTypes.string,
memberNumberStyle: PropTypes.string,
memberNumberTitle: PropTypes.string,
memberNumberLength: PropTypes.number,
issueDateStyle: PropTypes.string,
issueDateTitle: PropTypes.string,
issueDatePosition: PropTypes.string,
issueDateFormat: PropTypes.string,
issueNumberPosition: PropTypes.string,
issueNumberStyle: PropTypes.string,
issueNumberLength: PropTypes.number,
issueNumberTitle: PropTypes.string,
cardNumberPosition: PropTypes.string,
cardNumberStyle: PropTypes.string,
cardNumberTitle: PropTypes.string,
cardNumberLength: PropTypes.number,
showLogo: PropTypes.bool,
showCardNumber: PropTypes.bool,
showIssueDate: PropTypes.bool,
showIssueNumber: PropTypes.bool,
showMemberNumber: PropTypes.bool,
showRank: PropTypes.bool,
showName: PropTypes.bool,
showSwipeBar: PropTypes.bool
};
Card.defaultProps = {
bgColorFront: '#2053B1',
bgColorBack: '#2053B1',
bgImageFront: undefined,
isFlipped: false,
focused: null,
logoUri: images["default"].logoUri,
type: 'default',
rank: null,
name: null,
namePlaceholder: 'FULL NAME',
cardNumber: null,
memberNumber: null,
issueNumber: null,
issueDate: '',
issueDateFormat: 'DD/MM/YYYY',
logoStyle: null,
logoPosition: 'front',
issueDateStyle: null,
issueDatePosition: 'front',
issueDateTitle: 'Issue date',
issueNumberStyle: null,
issueNumberPosition: 'back',
issueNumberTitle: 'Issue number',
issueNumberLength: 2,
cardNumberStyle: null,
cardNumberPosition: 'front',
cardNumberTitle: 'Card number',
cardNumberLength: 8,
memberNumberStyle: null,
memberNumberPosition: 'front',
memberNumberTitle: 'Member number',
memberNumberLength: 8,
nameStyle: null,
namePosition: 'front',
rankStyle: null,
rankPosition: 'front',
rankLength: 2,
rankTitle: null,
showLogo: true,
showCardNumber: true,
showIssueDate: true,
showIssueNumber: true,
showMemberNumber: true,
showRank: true,
showName: true,
showSwipeBar: true
};
exports.default = Card;