@shopify/polaris
Version:
Shopify’s product component library
1,106 lines (1,030 loc) • 581 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 _classCallCheck = _interopDefault(require('babel-runtime/helpers/classCallCheck'));
var _createClass = _interopDefault(require('babel-runtime/helpers/createClass'));
var _possibleConstructorReturn = _interopDefault(require('babel-runtime/helpers/possibleConstructorReturn'));
var _inherits = _interopDefault(require('babel-runtime/helpers/inherits'));
var React = require('react');
var styles = require('@shopify/react-utilities/styles');
var tslib_1 = require('tslib');
var decorators = require('@shopify/javascript-utilities/decorators');
var geometry = require('@shopify/javascript-utilities/geometry');
var throttle = _interopDefault(require('lodash-decorators/throttle'));
var events = require('@shopify/javascript-utilities/events');
var other = require('@shopify/javascript-utilities/other');
var get = _interopDefault(require('lodash/get'));
var merge = _interopDefault(require('lodash/merge'));
var replace = _interopDefault(require('lodash/replace'));
var hoistStatics = _interopDefault(require('hoist-non-react-statics'));
var PropTypes = require('prop-types');
var _toConsumableArray = _interopDefault(require('babel-runtime/helpers/toConsumableArray'));
var _typeof = _interopDefault(require('babel-runtime/helpers/typeof'));
var reactUtilities = require('@shopify/react-utilities');
var fastdom = require('@shopify/javascript-utilities/fastdom');
var math = require('@shopify/javascript-utilities/math');
var dates = require('@shopify/javascript-utilities/dates');
var capitalize = _interopDefault(require('lodash/capitalize'));
require('core-js/fn/array/some');
require('core-js/fn/string/ends-with');
var ReactDOM = require('react-dom');
var focus = require('@shopify/javascript-utilities/focus');
var dom = require('@shopify/javascript-utilities/dom');
var reactTransitionGroup = require('react-transition-group');
var memoize$1 = _interopDefault(require('lodash/memoize'));
var isEqual = _interopDefault(require('lodash/isEqual'));
var pick = _interopDefault(require('lodash/pick'));
var target = require('@shopify/react-utilities/target');
var _defineProperty = _interopDefault(require('babel-runtime/helpers/defineProperty'));
var index_common = {
colorPurpleLighter: 'rgb(246, 240, 253)',
colorPurpleLight: 'rgb(227, 208, 255)',
colorPurpleBase: 'rgb(156, 106, 222)',
colorPurpleDark: 'rgb(80, 36, 143)',
colorPurpleDarker: 'rgb(35, 0, 81)',
colorPurpleText: 'rgb(80, 73, 90)',
colorIndigoLighter: 'rgb(244, 245, 250)',
colorIndigoLight: 'rgb(179, 188, 245)',
colorIndigoBase: 'rgb(92, 106, 196)',
colorIndigoDark: 'rgb(32, 46, 120)',
colorIndigoDarker: 'rgb(0, 6, 57)',
colorIndigoText: 'rgb(62, 65, 85)',
colorBlueLighter: 'rgb(235, 245, 250)',
colorBlueLight: 'rgb(180, 225, 250)',
colorBlueBase: 'rgb(0, 122, 206)',
colorBlueDark: 'rgb(8, 78, 138)',
colorBlueDarker: 'rgb(0, 20, 41)',
colorBlueText: 'rgb(62, 78, 87)',
colorTealLighter: 'rgb(224, 245, 245)',
colorTealLight: 'rgb(183, 236, 236)',
colorTealBase: 'rgb(71, 193, 191)',
colorTealDark: 'rgb(0, 132, 142)',
colorTealDarker: 'rgb(0, 49, 53)',
colorTealText: 'rgb(64, 83, 82)',
colorGreenLighter: 'rgb(227, 241, 223)',
colorGreenLight: 'rgb(187, 229, 179)',
colorGreenBase: 'rgb(80, 184, 60)',
colorGreenDark: 'rgb(16, 128, 67)',
colorGreenDarker: 'rgb(23, 54, 48)',
colorGreenText: 'rgb(65, 79, 62)',
colorYellowLighter: 'rgb(252, 241, 205)',
colorYellowLight: 'rgb(255, 234, 138)',
colorYellowBase: 'rgb(238, 194, 0)',
colorYellowDark: 'rgb(156, 111, 25)',
colorYellowDarker: 'rgb(87, 59, 0)',
colorYellowText: 'rgb(89, 81, 48)',
colorOrangeLighter: 'rgb(252, 235, 219)',
colorOrangeLight: 'rgb(255, 197, 139)',
colorOrangeBase: 'rgb(244, 147, 66)',
colorOrangeDark: 'rgb(192, 87, 23)',
colorOrangeDarker: 'rgb(74, 21, 4)',
colorOrangeText: 'rgb(89, 68, 48)',
colorRedLighter: 'rgb(251, 234, 229)',
colorRedLight: 'rgb(254, 173, 154)',
colorRedBase: 'rgb(222, 54, 24)',
colorRedDark: 'rgb(191, 7, 17)',
colorRedDarker: 'rgb(51, 1, 1)',
colorRedText: 'rgb(88, 60, 53)',
colorWhiteBase: 'rgb(255, 255, 255)',
colorSkyLighter: 'rgb(249, 250, 251)',
colorSkyLight: 'rgb(244, 246, 248)',
colorSkyBase: 'rgb(223, 227, 232)',
colorSkyDark: 'rgb(196, 205, 213)',
colorInkLightest: 'rgb(145, 158, 171)',
colorInkLighter: 'rgb(99, 115, 129)',
colorInkLight: 'rgb(69, 79, 91)',
colorInkBase: 'rgb(33, 43, 54)',
colorBlackBase: 'rgb(0, 0, 0)',
spacingNone: 0,
spacingExtraTight: '4px',
spacingTight: '8px',
spacingBase: '16px',
spacingLoose: '20px',
spacingExtraLoose: '32px',
fontStackBase:
"-apple-system, 'BlinkMacSystemFont', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif",
fontStackMonospace: "Monaco, Consolas, 'Lucida Console', monospace",
};
var polarisTokens = index_common;
var Breakpoints = {
navBarCollapsed: '769px',
stackedContent: '1043px'
};
var noWindowMatches = {
media: '',
addListener: other.noop,
removeListener: other.noop,
matches: false
};
function stackedContent() {
return typeof window === 'undefined' ? noWindowMatches : window.matchMedia('(max-width: ' + Breakpoints.stackedContent + ')');
}
var StickyManager = function () {
function StickyManager(container) {
_classCallCheck(this, StickyManager);
this.stickyItems = [];
this.stuckItems = [];
if (container) {
this.setContainer(container);
}
}
_createClass(StickyManager, [{
key: 'registerStickyItem',
value: function registerStickyItem(stickyItem) {
this.stickyItems.push(stickyItem);
}
}, {
key: 'unregisterStickyItem',
value: function unregisterStickyItem(nodeToRemove) {
var nodeIndex = this.stickyItems.findIndex(function (_ref) {
var stickyNode = _ref.stickyNode;
return nodeToRemove === stickyNode;
});
this.stickyItems.splice(nodeIndex, 1);
}
}, {
key: 'setContainer',
value: function setContainer(el) {
this.container = el;
events.addEventListener(this.container, 'scroll', this.handleScroll);
events.addEventListener(window, 'resize', this.handleResize);
this.manageStickyItems();
}
}, {
key: 'removeScrollListener',
value: function removeScrollListener() {
if (this.container) {
events.removeEventListener(this.container, 'scroll', this.handleScroll);
events.removeEventListener(window, 'resize', this.handleResize);
}
}
}, {
key: 'handleResize',
value: function handleResize() {
this.manageStickyItems();
}
}, {
key: 'handleScroll',
value: function handleScroll() {
this.manageStickyItems();
}
}, {
key: 'manageStickyItems',
value: function manageStickyItems() {
var _this = this;
if (this.stickyItems.length <= 0) {
return;
}
var scrollTop = scrollTopFor(this.container);
var containerTop = geometry.getRectForNode(this.container).top;
this.stickyItems.forEach(function (stickyItem) {
var handlePositioning = stickyItem.handlePositioning;
var _evaluateStickyItem = _this.evaluateStickyItem(stickyItem, scrollTop, containerTop),
sticky = _evaluateStickyItem.sticky,
top = _evaluateStickyItem.top,
left = _evaluateStickyItem.left,
width = _evaluateStickyItem.width;
_this.updateStuckItems(stickyItem, sticky);
handlePositioning(sticky, top, left, width);
});
}
}, {
key: 'evaluateStickyItem',
value: function evaluateStickyItem(stickyItem, scrollTop, containerTop) {
var stickyNode = stickyItem.stickyNode,
placeHolderNode = stickyItem.placeHolderNode,
boundingElement = stickyItem.boundingElement,
offset = stickyItem.offset,
disableWhenStacked = stickyItem.disableWhenStacked;
if (disableWhenStacked && stackedContent().matches) {
return {
sticky: false,
top: 0,
left: 0,
width: 'auto'
};
}
var stickyOffset = offset ? this.getOffset(stickyNode) + parseInt(polarisTokens.spacingLoose, 10) : this.getOffset(stickyNode);
var scrollPosition = scrollTop + stickyOffset;
var placeHolderNodeCurrentTop = placeHolderNode.getBoundingClientRect().top - containerTop + scrollTop;
var top = containerTop + stickyOffset;
var width = placeHolderNode.getBoundingClientRect().width;
var left = placeHolderNode.getBoundingClientRect().left;
var sticky = void 0;
if (boundingElement == null) {
sticky = scrollPosition >= placeHolderNodeCurrentTop;
} else {
var stickyItemHeight = stickyNode.getBoundingClientRect().height;
var stickyItemBottomPosition = boundingElement.getBoundingClientRect().bottom - stickyItemHeight + scrollTop - containerTop;
sticky = scrollPosition >= placeHolderNodeCurrentTop && scrollPosition < stickyItemBottomPosition;
}
return {
sticky: sticky,
top: top,
left: left,
width: width
};
}
}, {
key: 'updateStuckItems',
value: function updateStuckItems(item, sticky) {
var stickyNode = item.stickyNode;
if (sticky && !this.isNodeStuck(stickyNode)) {
this.addStuckItem(item);
} else if (!sticky && this.isNodeStuck(stickyNode)) {
this.removeStuckItem(item);
}
}
}, {
key: 'addStuckItem',
value: function addStuckItem(stickyItem) {
this.stuckItems.push(stickyItem);
}
}, {
key: 'removeStuckItem',
value: function removeStuckItem(stickyItem) {
var nodeToRemove = stickyItem.stickyNode;
var nodeIndex = this.stuckItems.findIndex(function (_ref2) {
var stickyNode = _ref2.stickyNode;
return nodeToRemove === stickyNode;
});
this.stuckItems.splice(nodeIndex, 1);
}
}, {
key: 'getOffset',
value: function getOffset(node) {
if (this.stuckItems.length === 0) {
return 0;
}
var offset = 0;
var count = 0;
var stuckNodesLength = this.stuckItems.length;
var nodeRect = geometry.getRectForNode(node);
while (count < stuckNodesLength) {
var stuckNode = this.stuckItems[count].stickyNode;
if (stuckNode !== node) {
var stuckNodeRect = geometry.getRectForNode(stuckNode);
if (!horizontallyOverlaps(nodeRect, stuckNodeRect)) {
offset += geometry.getRectForNode(stuckNode).height;
}
} else {
break;
}
count++;
}
return offset;
}
}, {
key: 'isNodeStuck',
value: function isNodeStuck(node) {
var nodeFound = this.stuckItems.findIndex(function (_ref3) {
var stickyNode = _ref3.stickyNode;
return node === stickyNode;
});
return nodeFound >= 0;
}
}]);
return StickyManager;
}();
tslib_1.__decorate([throttle(50), decorators.autobind], StickyManager.prototype, "handleResize", null);
tslib_1.__decorate([throttle(50), decorators.autobind], StickyManager.prototype, "handleScroll", null);
function isDocument(node) {
return node === document;
}
function scrollTopFor(container) {
return isDocument(container) ? document.body.scrollTop || document.documentElement.scrollTop : container.scrollTop;
}
function horizontallyOverlaps(rect1, rect2) {
var rect1Left = rect1.left;
var rect1Right = rect1.left + rect1.width;
var rect2Left = rect2.left;
var rect2Right = rect2.left + rect2.width;
return rect2Right < rect1Left || rect1Right < rect2Left;
}
var polarisAppProviderContextTypes = {
polaris: PropTypes.any,
easdk: PropTypes.any
};
var Polaris = {"Avatar":{"label":"Avatar","labelWithInitials":"Avatar with initials {initials}"},"Badge":{"PROGRESS_LABELS":{"incomplete":"Incomplete","partiallyComplete":"Partially complete","complete":"Complete"},"STATUS_LABELS":{"info":"Info","success":"Success","warning":"Warning","attention":"Attention"}},"Button":{"spinnerAccessibilityLabel":"Loading"},"Common":{"checkbox":"checkbox","undo":"Undo"},"DataTable":{"sortAccessibilityLabel":"sort {direction} by","navAccessibilityLabel":"Scroll table {direction} one column","totalsRowHeading":"Totals"},"DatePicker":{"previousMonth":"Show previous month, {previousMonthName} {showPreviousYear}","nextMonth":"Show next month, {nextMonth} {nextYear}","today":"Today "},"DropZone":{"overlayTextFile":"Drop file to upload","overlayTextImage":"Drop image to upload","errorOverlayTextFile":"File type is not valid","errorOverlayTextImage":"Image type is not valid","FileUpload":{"actionTitleFile":"Add file","actionTitleImage":"Add image","actionHintFile":"or drop files to upload","actionHintImage":"or drop images to upload"}},"EmptySearchResult":{"altText":"Empty search results"},"Icon":{"backdropWarning":"The {color} icon doesn’t accept backdrops. The icon colors that have backdrops are: {colorsWithBackDrops}"},"Modal":{"iFrameTitle":"body markup","modalWarning":"These required properties are missing from Modal: {missingProps}","actionWarning":"Modals inside of an embedded app will ignore: {actionWarnings}"},"Pagination":{"previous":"Previous","next":"Next","pagination":"Pagination"},"ProgressBar":{"negativeWarningMessage":"Values passed to the progress prop shouldn’t be negative. Resetting {progress} to 0.","exceedWarningMessage":"Values passed to the progress prop shouldn’t exceed 100. Setting {progress} to 100."},"ResourceList":{"sortingLabel":"Sort by","defaultItemSingular":"item","defaultItemPlural":"items","showing":"Showing {itemsCount} {resource}","selected":"{selectedItemsCount} selected","allItemsSelected":"All {itemsLength}+ {resourceNamePlural} in your store are selected.","selectAllItems":"Select all {itemsLength}+ {resourceNamePlural} in your store","emptySearchResultTitle":"No {resourceNamePlural} found","emptySearchResultDescription":"Try changing the filters or search term","selectButtonText":"Select","a11yCheckboxDeselectAllSingle":"Deselect {resourceNameSingular}","a11yCheckboxSelectAllSingle":"Select {resourceNameSingular}","a11yCheckboxDeselectAllMultiple":"Deselect all {itemsLength} {resourceNamePlural}","a11yCheckboxSelectAllMultiple":"Select all {itemsLength} {resourceNamePlural}","ariaLiveSingular":"{itemsLength} item","ariaLivePlural":"{itemsLength} items","Item":{"selectItem":"Select: {accessibilityLabel}","deselectItem":"Deselect: {accessibilityLabel}","actionsDropdown":"Actions dropdown"},"BulkActions":{"actionsActivatorLabel":"Actions","moreActionsActivatorLabel":"More actions","warningMessage":"To provide a better user experience. There should only be a maximum of {maxPromotedActions} promoted actions."},"FilterCreator":{"filterButtonLabel":"Filter","selectFilterKeyPlaceholder":"Select a filter…","addFilterButtonLabel":"Add filter","showAllWhere":"Show all {resourceNamePlural} where:"},"FilterControl":{"textFieldLabel":"Search {resourceNamePlural}"},"FilterValueSelector":{"selectFilterValuePlaceholder":"Select a filter…"},"DateSelector":{"dateFilterLabel":"Select a value","dateValueLabel":"Date","dateValueError":"Match YYYY-MM-DD format","dateValuePlaceholder":"YYYY-MM-DD","SelectOptions":{"PastWeek":"in the last week","PastMonth":"in the last month","PastQuarter":"in the last 3 months","PastYear":"in the last year","ComingWeek":"next week","ComingMonth":"next month","ComingQuarter":"in the next 3 months","ComingYear":"in the next year","OnOrBefore":"on or before","OnOrAfter":"on or after"},"FilterLabelForValue":{"past_week":"in the last week","past_month":"in the last month","past_quarter":"in the last 3 months","past_year":"in the last year","coming_week":"next week","coming_month":"next month","coming_quarter":"in the next 3 months","coming_year":"in the next year","on_or_before":"on or before {date}","on_or_after":"on or after {date}"}}},"Spinner":{"warningMessage":"The color {color} is not meant to be used on {size} spinners. The colors available on large spinners are: {colors}"},"Tag":{"ariaLabel":"Remove {children}"}};
var en = {
Polaris: Polaris
};
var Intl = function () {
function Intl(translation) {
_classCallCheck(this, Intl);
this.translation = translation;
this.setTranslation(translation);
}
_createClass(Intl, [{
key: 'setTranslation',
value: function setTranslation(translation) {
var i18n = Array.isArray(translation) ? merge.apply(undefined, [{}].concat(_toConsumableArray(translation))) : translation;
this.translation = i18n ? merge({}, en, i18n) : en;
}
}, {
key: 'translate',
value: function translate$$1(id, replacements) {
return translate(id, this.translation, replacements);
}
}, {
key: 'translationKeyExists',
value: function translationKeyExists(path) {
return Boolean(get(this.translation, path));
}
}]);
return Intl;
}();
tslib_1.__decorate([decorators.autobind], Intl.prototype, "translate", null);
var Link = function () {
function Link(linkComponent) {
_classCallCheck(this, Link);
this.linkComponent = linkComponent;
}
_createClass(Link, [{
key: "setLinkComponent",
value: function setLinkComponent(link) {
this.linkComponent = link;
}
}, {
key: "getLinkComponent",
value: function getLinkComponent() {
return this.linkComponent;
}
}]);
return Link;
}();
function transformBreadcrumb(breadcrumb, shopOrigin) {
if (breadcrumb.content == null) {
throw new Error('No content provided for breadcrumb (' + JSON.stringify(breadcrumb) + ')');
}
var target$$1 = void 0;
if (breadcrumb.target) {
target$$1 = breadcrumb.target;
} else if (breadcrumb.url) {
target$$1 = getTargetFromURL(breadcrumb.url, shopOrigin);
} else {
target$$1 = undefined;
}
return {
label: breadcrumb.content,
href: breadcrumb.url,
target: target$$1,
message: target$$1 === 'app' ? generateCallback(breadcrumb.url) : breadcrumb.onAction
};
}
function transformAction(shopOrigin) {
return function (action) {
var style = void 0;
if (action.disabled) {
style = 'disabled';
} else if (action.destructive) {
style = 'danger';
}
var target$$1 = void 0;
if (action.target) {
target$$1 = action.target;
} else if (action.url) {
target$$1 = action.external ? 'new' : getTargetFromURL(action.url, shopOrigin);
} else {
target$$1 = undefined;
}
return {
label: action.content,
href: action.url,
target: target$$1,
message: target$$1 === 'app' ? generateCallback(action.url) : action.onAction,
style: style
};
};
}
function transformActionGroup(shopOrigin) {
return function (actionGroup) {
return {
type: 'dropdown',
label: actionGroup.title,
links: actionGroup.actions.map(transformAction(shopOrigin))
};
};
}
// see https://en.wikipedia.org/wiki/Uniform_Resource_Identifier#Generic_syntax for more info on the URI scheme
function getTargetFromURL(url, shopOrigin) {
if (isRootRelative(url) || isOriginHost(url, shopOrigin)) {
return 'shopify';
} else if (isSameHost(url) || isFragment(url) || isRelative(url) || isSchemeRelative(url)) {
return 'app';
} else {
return 'new';
}
}
function isRootRelative(url) {
return url.charAt(0) === '/' && url.charAt(1) !== '/';
}
function isOriginHost(url, shopOrigin) {
return shopOrigin && url.indexOf(shopOrigin) !== -1;
}
function isSameHost(url) {
var hostIndex = url.indexOf(window.location.hostname);
var firstDotIndex = url.indexOf('.');
return hostIndex >= 0 && hostIndex < firstDotIndex;
}
function isFragment(url) {
return url.charAt(0) === '#';
}
function isRelative(url) {
return url.charAt(0) !== '/' && url.toLowerCase().indexOf('http') !== 0;
}
function isSchemeRelative(url) {
return url.indexOf('//') === 0;
}
function generateCallback(url) {
if (url == null) {
return;
}
return function () {
window.location.assign(url);
};
}
function transformPagination(pagination) {
if (pagination == null) {
return undefined;
}
var hasNext = pagination.hasNext,
hasPrevious = pagination.hasPrevious,
nextURL = pagination.nextURL,
previousURL = pagination.previousURL,
onNext = pagination.onNext,
onPrevious = pagination.onPrevious;
var finalPagination = {};
if (hasNext) {
if (onNext) {
finalPagination.next = { message: onNext };
} else if (nextURL) {
finalPagination.next = { href: nextURL };
}
}
if (hasPrevious) {
if (onPrevious) {
finalPagination.previous = { message: onPrevious };
} else if (previousURL) {
finalPagination.previous = { href: previousURL };
}
}
return finalPagination;
}
var Bar = function () {
function Bar(messenger) {
_classCallCheck(this, Bar);
this.messenger = messenger;
}
_createClass(Bar, [{
key: 'update',
value: function update(config) {
var title = config.title,
icon = config.icon,
breadcrumbs = config.breadcrumbs,
secondaryActions = config.secondaryActions,
actionGroups = config.actionGroups,
primaryAction = config.primaryAction,
pagination = config.pagination;
this.messenger.send('Shopify.API.Bar.initialize', {
buttons: {
primary: primaryAction ? transformAction(this.messenger.targetOrigin)(primaryAction) : undefined,
secondary: [].concat(_toConsumableArray((secondaryActions || []).map(transformAction(this.messenger.targetOrigin))), _toConsumableArray((actionGroups || []).map(transformActionGroup(this.messenger.targetOrigin))))
},
title: title,
icon: icon,
breadcrumb: getLastLevelBreadcrumb(breadcrumbs, this.messenger.targetOrigin),
pagination: transformPagination(pagination)
});
if (actionGroups) {
document.addEventListener('click', this.closeDropdown);
} else {
document.removeEventListener('click', this.closeDropdown);
}
}
}, {
key: 'closeDropdown',
value: function closeDropdown() {
this.messenger.send('Shopify.API.Bar.closeDropdown');
}
}]);
return Bar;
}();
tslib_1.__decorate([decorators.autobind], Bar.prototype, "closeDropdown", null);
function getLastLevelBreadcrumb(breadcrumbs, shopOrigin) {
return breadcrumbs && breadcrumbs.length > 0 ? transformBreadcrumb(breadcrumbs[breadcrumbs.length - 1], shopOrigin) : undefined;
}
var Modal = function () {
function Modal(messenger) {
_classCallCheck(this, Modal);
this.messenger = messenger;
}
_createClass(Modal, [{
key: 'open',
value: function open(config) {
var title = config.title,
primaryAction = config.primaryAction,
secondaryActions = config.secondaryActions,
src = config.src,
width = config.width,
height = config.height,
onClose = config.onClose;
if (onClose != null) {
this.storeCloseCallback(onClose);
}
this.messenger.send('Shopify.API.Modal.open', {
src: src,
title: title,
width: width,
height: height,
buttons: {
primary: primaryAction ? transformAction(this.messenger.targetOrigin)(primaryAction) : undefined,
secondary: secondaryActions ? secondaryActions.map(transformAction(this.messenger.targetOrigin)) : undefined
}
});
}
}, {
key: 'alert',
value: function alert(config) {
var children = config.children,
title = config.title,
destructive = config.destructive,
confirmContent = config.confirmContent,
cancelContent = config.cancelContent,
onClose = config.onClose,
onConfirm = config.onConfirm;
this.storeCloseCallback(function (result) {
if (result) {
if (onConfirm) {
onConfirm();
}
} else if (onClose) {
onClose();
}
});
if (onClose && cancelContent) {
this.messenger.send('Shopify.API.Modal.confirm', {
message: {
title: title,
message: children,
okButton: confirmContent,
cancelButton: cancelContent,
style: destructive ? 'danger' : undefined
}
});
} else {
this.messenger.send('Shopify.API.Modal.alert', {
message: {
title: title,
message: children,
okButton: confirmContent,
style: destructive ? 'danger' : undefined
}
});
}
}
}, {
key: 'close',
value: function close(result, data) {
if (this.closeCallback == null) {
return;
}
this.messenger.send('Shopify.API.Modal.close', {
result: result,
data: data
});
}
}, {
key: 'storeCloseCallback',
value: function storeCloseCallback(callback) {
this.closeCallback = callback;
}
}, {
key: 'callCloseCallback',
value: function callCloseCallback(result, data) {
var closeCallback = this.closeCallback;
if (typeof closeCallback === 'function') {
delete this.closeCallback;
closeCallback(result, data);
}
}
}]);
return Modal;
}();
var ResourcePicker = function () {
function ResourcePicker(messenger, modal) {
_classCallCheck(this, ResourcePicker);
this.messenger = messenger;
this.modal = modal;
}
_createClass(ResourcePicker, [{
key: 'close',
value: function close() {
this.modal.close();
}
}, {
key: 'open',
value: function open(_ref) {
var title = _ref.title,
products = _ref.products,
collections = _ref.collections,
_ref$allowMultiple = _ref.allowMultiple,
allowMultiple = _ref$allowMultiple === undefined ? false : _ref$allowMultiple,
_ref$showHidden = _ref.showHidden,
showHidden = _ref$showHidden === undefined ? true : _ref$showHidden,
onCancel = _ref.onCancel,
onSelection = _ref.onSelection;
this.modal.storeCloseCallback(function (success, data) {
if (!success) {
if (onCancel != null) {
onCancel();
}
return;
}
if (onSelection == null) {
return;
}
onSelection(data);
});
var resources = [];
if (products) {
resources.push('products');
}
if (collections) {
resources.push('collections');
}
if (collections) {
this.messenger.send('Shopify.API.Modal.collectionPicker', {
title: title,
selectMultiple: allowMultiple,
// eslint-disable-next-line camelcase
show_hidden: showHidden,
// eslint-disable-next-line camelcase
selectable_resources: resources
});
} else {
this.messenger.send('Shopify.API.Modal.productPicker', {
title: title,
selectMultiple: allowMultiple,
// eslint-disable-next-line camelcase
show_hidden: showHidden,
// eslint-disable-next-line camelcase
selectable_resources: resources
});
}
}
}]);
return ResourcePicker;
}();
var CoreWeakMap = require('core-js/library/es6/weak-map');
var Messenger = function () {
function Messenger(target$$1, handlers, options) {
_classCallCheck(this, Messenger);
this.target = target$$1;
this.handlers = handlers;
this.targetOrigin = '*';
this.queue = [];
this.callbacks = {};
this.callbacksToID = new CoreWeakMap();
this.callbackIndex = 0;
if (typeof window === 'undefined') {
return;
}
this.name = options.name;
this.targetOrigin = options.targetOrigin;
this.debug = options.debug || false;
if (!this.targetOrigin.match(/^http(s)?:\/\//)) {
this.warn('warning: targetOrigin should include the protocol');
}
window.addEventListener('message', this.handleMessage.bind(this), false);
}
_createClass(Messenger, [{
key: 'setTarget',
value: function setTarget(target$$1) {
this.target = target$$1;
this.tryToDequeue();
}
}, {
key: 'send',
value: function send(message, data) {
var normalizedPayload = this.normalizePayload(data);
var newMessage = {
message: message,
data: normalizedPayload
};
var messageString = JSON.stringify(newMessage);
if (this.target != null) {
this.log('Posting message: ' + messageString + ' to ' + this.targetOrigin + ' }');
this.target.postMessage(messageString, this.targetOrigin);
} else {
this.log('Queueing message: ' + messageString);
this.queue.push(newMessage);
}
return normalizedPayload;
}
}, {
key: 'tryToDequeue',
value: function tryToDequeue() {
var queue = this.queue,
target$$1 = this.target;
if (target$$1 == null || queue.length === 0) {
return;
}
this.queue.forEach(function (message) {
target$$1.postMessage(message, '*');
});
this.queue.length = 0;
}
}, {
key: 'log',
value: function log(message) {
if (!this.debug) {
return;
}
// eslint-disable-next-line no-console
console.log('[' + this.name + ' Messenger]: ' + message);
}
}, {
key: 'warn',
value: function warn(message) {
if (!this.debug) {
return;
}
// eslint-disable-next-line no-console
console.warn('[' + this.name + ' Messenger]: ' + message);
}
}, {
key: 'storeCallback',
value: function storeCallback(callback) {
// Optimization, so we don’t store a new callback ID for callbacks
// we have sent before
if (this.callbacksToID.has(callback)) {
return this.callbacksToID.get(callback);
}
var id = 'EASDKCallback' + this.callbackIndex++;
this.callbacks[id] = callback;
this.callbacksToID.set(callback, id);
return id;
}
}, {
key: 'normalizePayload',
value: function normalizePayload(payload) {
var _this = this;
if (payload == null) {
return payload;
}
if (typeof payload === 'function') {
return this.storeCallback(payload);
} else if (payload instanceof Array) {
return payload.map(function (newPayload) {
return _this.normalizePayload(newPayload);
});
} else if ((typeof payload === 'undefined' ? 'undefined' : _typeof(payload)) === 'object') {
return Object.keys(payload).reduce(function (newPayload, key) {
newPayload[key] = _this.normalizePayload(payload[key]);
return newPayload;
}, {});
} else {
return payload;
}
}
}, {
key: 'handleMessage',
value: function handleMessage(event) {
if (!this.isFromTargetOrigin(event)) {
this.log('client received ' + event.data + ' from unknown origin ' + event.origin + '. Expected ' + this.targetOrigin);
return;
}
this.log('Received message: ' + event.data + ' from ' + event.origin);
var receivedMessage = void 0;
try {
receivedMessage = JSON.parse(event.data);
} catch (error) {
// eslint-disable-next-line no-console
console.error('Received received invalid JSON and cannot process the message. ' + error + ' : ' + event.data + ' : ' + JSON.stringify(event.data));
return;
}
if (receivedMessage.message === Messenger.Messages.SET_WINDOW_LOCATION) {
this.windowLocation = receivedMessage.data;
} else {
this.invokeCallback(receivedMessage);
this.invokeHandler(receivedMessage);
}
}
}, {
key: 'isFromTargetOrigin',
value: function isFromTargetOrigin(_ref) {
var origin = _ref.origin;
return origin != null && origin === this.targetOrigin;
}
}, {
key: 'invokeCallback',
value: function invokeCallback(receivedMessage) {
var callback = this.callbacks[receivedMessage.message];
if (typeof callback === 'function') {
// eslint-disable-next-line callback-return
callback();
}
}
}, {
key: 'invokeHandler',
value: function invokeHandler(receivedMessage) {
var handler = this.handlers[receivedMessage.message];
if (typeof handler === 'function') {
handler(receivedMessage.data);
}
}
}, {
key: 'windowLocation',
set: function set(location) {
window.location = location;
}
}]);
return Messenger;
}();
Messenger.Messages = Object.freeze({
SET_WINDOW_LOCATION: 'Shopify.API.setWindowLocation'
});
var EASDK = function () {
function EASDK(_ref, metadata) {
var _this = this;
var apiKey = _ref.apiKey,
shopOrigin = _ref.shopOrigin,
debug = _ref.debug,
forceRedirect = _ref.forceRedirect;
_classCallCheck(this, EASDK);
checkFrameRedirect(apiKey, shopOrigin, forceRedirect);
this.messenger = new Messenger(window.parent, {
'Shopify.API.initialize': function ShopifyAPIInitialize(data) {
if (data && data.User && data.User.current) {
_this.currentUser = data.User.current;
}
},
'Shopify.API.Modal.close': function ShopifyAPIModalClose(_ref2) {
var result = _ref2.result,
data = _ref2.data;
_this.Modal.callCloseCallback(result, data);
}
}, {
name: 'iframe',
targetOrigin: shopOrigin,
debug: debug
});
this.Bar = new Bar(this.messenger);
this.Modal = new Modal(this.messenger);
this.ResourcePicker = new ResourcePicker(this.messenger, this.Modal);
this.messenger.send('Shopify.API.initialize', {
apiKey: apiKey,
shopOrigin: shopOrigin,
metadata: metadata,
debug: debug,
forceRedirect: forceRedirect
});
}
_createClass(EASDK, [{
key: 'startLoading',
value: function startLoading() {
this.messenger.send('Shopify.API.Bar.loading.on');
}
}, {
key: 'stopLoading',
value: function stopLoading() {
this.messenger.send('Shopify.API.Bar.loading.off');
}
}, {
key: 'showFlashNotice',
value: function showFlashNotice(message) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var _options$error = options.error,
error = _options$error === undefined ? false : _options$error;
var type = error ? 'Shopify.API.flash.error' : 'Shopify.API.flash.notice';
this.messenger.send(type, { message: message });
}
}, {
key: 'pushState',
value: function pushState(location) {
this.messenger.send('Shopify.API.pushState', { location: location });
}
}, {
key: 'redirect',
value: function redirect(location) {
this.messenger.send('Shopify.API.redirect', { location: location });
}
}]);
return EASDK;
}();
tslib_1.__decorate([decorators.autobind], EASDK.prototype, "startLoading", null);
tslib_1.__decorate([decorators.autobind], EASDK.prototype, "stopLoading", null);
tslib_1.__decorate([decorators.autobind], EASDK.prototype, "showFlashNotice", null);
tslib_1.__decorate([decorators.autobind], EASDK.prototype, "pushState", null);
tslib_1.__decorate([decorators.autobind], EASDK.prototype, "redirect", null);
function checkFrameRedirect(apiKey) {
var shopOrigin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'https://myshopify.com';
var forceRedirect = arguments[2];
if (window !== window.parent) {
return;
}
var redirectUrl = shopOrigin + '/admin/apps/';
if (apiKey) {
redirectUrl = '' + redirectUrl + apiKey + window.location.pathname + window.location.search;
}
if (forceRedirect) {
window.location.assign(redirectUrl);
} else {
// eslint-disable-next-line no-console
console.warn('Embedded app was not loaded in an iframe and redirecting is disabled. Set forceRedirect to true and this page will redirect to: ' + redirectUrl);
}
}
var name = "@shopify/polaris";
var description = "Shopify’s product component library";
var version = "2.7.0";
var license = "MIT";
var author = "Shopify <dev@shopify.com>";
var homepage = "https://github.com/Shopify/polaris#readme";
var repository = "https://github.com/Shopify/polaris";
var bugs = {"url":"https://github.com/Shopify/polaris/issues"};
var publishConfig = {"access":"public"};
var keywords = ["shopify","polaris","react","components","component library"];
var main = "index.js";
var module$1 = "index.es.js";
var types = "types/index.d.ts";
var scripts = {"lint":"npm-run-all lint:js lint:css","lint:css":"stylelint './**/*.scss' --max-warnings 0","lint:js":"eslint './**/*.{js,jsx,ts,tsx}' --max-warnings 0 --format codeframe","format":"npm-run-all format:js format:css format:prettier","format:css":"yarn run lint:css --fix","format:js":"yarn run lint:js --fix","format:prettier":"prettier '**/*.{json,md,yml}' --write","ts":"tsc --noEmit","test":"jest --config ./config/jest/config.json","test:coverage":"yarn test --coverage --no-cache","test:ci":"yarn test --runInBand --coverage","test:watch":"yarn test --watch","check":"npm-run-all lint ts test","check:ci":"npm-run-all lint ts test:ci","clean":"rimraf build build-esnext esnext styles types docs 'build-intermediate' 'index.*' 'embedded.js' './src/styles/polaris-tokens' './tophat/.cache' './tophat/assets' 'styles.{css,scss}'","optimize":"node ./scripts/optimize.js","prebuild":"npm-run-all clean optimize copy-polaris-tokens","build":"babel-node ./scripts/build.js","prebuild-consumer":"npm-run-all build hide-private-readme","build-consumer":"babel-node ./scripts/build-consumer","postbuild-consumer":"yarn run show-private-readme","build-shrink-ray":"yarn run copy-polaris-tokens && node ./scripts/build-shrink-ray.js","precdn":"yarn run build","cdn:secrets":"ejson decrypt -o secrets.json secrets.ejson","cdn:deploy":"node ./scripts/deploy.js","cdn":"npm-run-all cdn:secrets cdn:deploy","public-release:secrets":"ejson decrypt -o secrets.json secrets.ejson","prepublic-release":"rimraf sandbox && yarn run public-release:secrets","public-release":"babel-node ./scripts/public-repo-deploy.js","copy-polaris-tokens":"rimraf ./src/styles/polaris-tokens && shx cp -r ./node_modules/@shopify/polaris-tokens/dist ./src/styles/polaris-tokens","hide-private-readme":"shx mv ./README.md ./public/README-private.md && shx mv ./public/README.md ./README.md","show-private-readme":"shx mv ./README.md ./public/README.md && shx mv ./public/README-private.md ./README.md ","prepublish":"in-publish && npm-run-all build hide-private-readme || :","postpublish":"in-publish && npm-run-all cdn show-private-readme public-release || :","dev":"yarn run copy-polaris-tokens && webpack-dev-server --config ./playground/webpack.config.js --content-base ./playground/ --hot --inline","dev:host":"yarn run copy-polaris-tokens && webpack-dev-server --config ./playground/webpack.config.js --content-base ./playground/ --hot --inline --host $(ipconfig getifaddr en0)","tophat":"yarn run copy-polaris-tokens && node ./tophat/index.js --watch","test:percy":"node ./tophat/snapshots.js","test:a11y":"node ./scripts/pa11y.js","start":"node ./tophat/index.js","heroku-postbuild":"yarn run copy-polaris-tokens && webpack --config ./tophat/webpack.config.js --output-path ./tophat/assets"};
var stylelint = {"extends":["stylelint-config-shopify/prettier"],"rules":{"selector-class-pattern":"^[a-zA-Z][a-zA-Z0-9-]+$","selector-pseudo-class-no-unknown":[true,{"ignorePseudoClasses":["global"]}]}};
var devDependencies = {"@babel/generator":"^7.0.0-beta.51","@babel/parser":"^7.0.0-beta.51","@babel/standalone":"^7.0.0-beta.51","@percy/puppeteer":"^0.3.2","@shopify/js-uploader":"github:shopify/js-uploader","@shopify/polaris-tokens":"^1.2.0","@shopify/react-serialize":"^1.0.6","@types/enzyme":"^3.1.10","@types/jest":"^21.1.2","@types/lodash":"^4.14.108","@types/lodash-decorators":"^4.0.0","@types/node":"^8.10.17","@types/react-helmet":"^5.0.6","@types/react-hot-loader":"^3.0.6","@types/react-router-dom":"^4.2.7","archiver":"^2.1.0","awesome-typescript-loader":"^3.1.3","aws-sdk":"^2.58.0","babel":"^6.23.0","babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-jest":"^21.2.0","babel-loader":"^7.1.2","babel-plugin-transform-jsx-html":"^1.0.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-plugin-transform-react-jsx":"^6.24.1","babel-polyfill":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babel-preset-shopify":"^16.2.0","babel-preset-stage-0":"^6.24.1","babel-register":"^6.26.0","change-case":"^3.0.1","codecov":"^3.0.4","copyfiles":"^1.2.0","crypto":"^1.0.1","css-loader":"^0.28.3","cssnano":"^3.10.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.8.0","eslint-plugin-shopify":"^23.1.0","express":"^4.16.3","file-loader":"^1.1.11","fs-extra":"^4.0.2","generic-names":"^1.0.2","glob":"^7.1.2","gray-matter":"^4.0.1","identity-obj-proxy":"^3.0.0","image-webpack-loader":"^3.3.1","in-publish":"^2.0.0","isomorphic-fetch":"^2.2.1","jest":"^21.2.1","node-sass":"^4.5.3","npm-run-all":"^4.0.2","object-hash":"^1.3.0","pa11y":"^5.0.4","postcss":"^6.0.1","postcss-loader":"^2.0.5","postcss-modules-extract-imports":"^1.1.0","postcss-modules-local-by-default":"^1.2.0","postcss-modules-parser":"^1.1.1","postcss-modules-scope":"^1.1.0","postcss-modules-values":"^1.3.0","postcss-shopify":"^1.0.0","prettier":"^1.14.2","puppeteer":"^1.5.0","react":"^16.4.0","react-dom":"^16.4.0","react-helmet":"^5.2.0","react-router-dom":"^4.3.1","react-test-renderer":"^16.3.1","rimraf":"^2.6.1","rollup":"^0.50.0","rollup-plugin-babel":"^3.0.2","rollup-plugin-commonjs":"^8.0.2","rollup-plugin-json":"^2.1.1","rollup-plugin-node-resolve":"^3.0.0","rollup-pluginutils":"^2.0.1","sass-loader":"^7.0.3","sass-resources-loader":"^1.3.3","semver":"^5.4.1","shelljs":"^0.7.7","shx":"^0.2.2","style-loader":"^0.19.0","stylelint":"^9.2.1","stylelint-config-shopify":"^6.1.0","svgo":"^0.7.2","tslint":"^5.8.0","typescript":"^2.9.1","url-loader":"^1.0.1","webpack":"^3.7.1","webpack-bundle-analyzer":"^2.11.1","webpack-dev-server":"^2.9.3","yargs":"^12.0.1"};
var peerDependencies = {"react":"^16.3.1","react-dom":"^16.3.1"};
var files = ["esnext","styles","types","docs","index.js","index.es.js","styles.css","styles.scss","embedded.js","embedded.d.ts"];
var dependencies = {"@shopify/images":"^1.1.0","@shopify/javascript-utilities":"^2.2.0","@shopify/react-html":"^3.0.3","@shopify/react-utilities":"^2.0.3","@types/prop-types":"^15.5.2","@types/react":"^16.4.7","@types/react-dom":"^16.0.6","@types/react-transition-group":"^2.0.7","babel-runtime":"^6.23.0","core-js":"^2.5.1","hoist-non-react-statics":"^2.5.0","lodash":"^4.17.4","lodash-decorators":"^4.3.5","prop-types":"^15.6.1","react-transition-group":"^2.3.0","tslib":"^1.8.0"};
var packageJSON = {
name: name,
description: description,
version: version,
license: license,
author: author,
homepage: homepage,
repository: repository,
bugs: bugs,
publishConfig: publishConfig,
keywords: keywords,
main: main,
module: module$1,
types: types,
scripts: scripts,
stylelint: stylelint,
devDependencies: devDependencies,
peerDependencies: peerDependencies,
files: files,
dependencies: dependencies,
"private": false,
"jsnext:main": "index.es.js"
};
var METADATA = {
interface: {
name: packageJSON.name,
version: packageJSON.version
}
};
var REPLACE_REGEX = /{([^}]*)}/g;
function translate(id, translations, replacements) {
var text = get(translations, id);
if (!text) {
return '';
}
if (replacements) {
return replace(text, REPLACE_REGEX, function (match) {
var replacement = match.substring(1, match.length - 1);
if (!replacements.hasOwnProperty(replacement)) {
throw new Error('No replacement found for key \'' + replacement + '\'. The following replacements were passed: ' + Object.keys(replacements).map(function (key) {
return '\'' + key + '\'';
}).join(', '));
}
return replacements[replacement];
});
}
return text;
}
function withAppProvider() {
return function addProvider(WrappedComponent) {
// eslint-disable-next-line react/prefer-stateless-function
var WithProvider = function (_React$Component) {
_inherits(WithProvider, _React$Component);
function WithProvider() {
_classCallCheck(this, WithProvider);
return _possibleConstructorReturn(this, (WithProvider.__proto__ || Object.getPrototypeOf(WithProvider)).apply(this, arguments));
}
_createClass(WithProvider, [{
key: 'render',
value: function render() {
var _context = this.context,
polaris = _context.polaris,
easdk = _context.easdk;
var polarisContext = Object.assign({}, polaris, { easdk: easdk });
if (!polaris) {
throw new Error('The <AppProvider> component is required as of v2.0 of Polaris React. See\n https://polaris.shopify.com/components/structure/app-provider for implementation\n instructions.');
}
return React.createElement(WrappedComponent, Object.assign({}, this.props, { polaris: polarisContext }));
}
}]);
return WithProvider;
}(React.Component);
WithProvider.contextTypes = WrappedComponent.contextTypes ? merge(WrappedComponent.contextTypes, polarisAppProviderContextTypes) : polarisAppProviderContextTypes;
var FinalComponent = hoistStatics(WithProvider, Wra