@instructure/outcomes-ui 2.1.2 → 2.1.3

package/es/translated/vi/components/SearchInput/__tests__/index.test.js

@@ -0,0 +1,47 @@
+import { expect } from 'chai';
+import React from 'react';
+import sinon from 'sinon';
+import { mount } from 'enzyme';
+import { IconSearchLine, IconEndSolid } from '@instructure/ui-icons';
+import SearchInput from "../index.js";
+import checkA11y from "../../../test/checkA11y.js";
+describe('SearchInput', function () {
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return Object.assign({
+      onChange: sinon.spy(),
+      onClear: sinon.spy(),
+      searchText: ''
+    }, props);
+  }
+
+  it('includes a search icon', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(SearchInput, makeProps()));
+    expect(wrapper.find(IconSearchLine)).to.have.length(1);
+  });
+  it('includes a clear search icon when text is in the search field', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(SearchInput, makeProps({
+      searchText: 'x'
+    })));
+    expect(wrapper.find(IconEndSolid)).to.have.length(1);
+  });
+  it('includes a clear search button when text is in the search field', function () {
+    var props = makeProps({
+      searchText: 'x'
+    });
+    var wrapper = mount( /*#__PURE__*/React.createElement(SearchInput, props));
+    expect(wrapper.find('IconButton')).to.have.length(1);
+  });
+  it('calls onClear when button is clicked', function () {
+    var props = makeProps({
+      searchText: 'x'
+    });
+    var wrapper = mount( /*#__PURE__*/React.createElement(SearchInput, props));
+    var clear = wrapper.find('IconButton');
+    clear.simulate('click');
+    expect(props.onClear.calledOnce).to.be.true;
+  });
+  it('meets a11y standards', function () {
+    return checkA11y( /*#__PURE__*/React.createElement(SearchInput, makeProps()));
+  });
+});

package/es/translated/vi/components/SearchInput/index.js

@@ -0,0 +1,78 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { themeable } from '@instructure/ui-themeable';
+import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { IconButton } from '@instructure/ui-buttons';
+import { IconEndSolid, IconSearchLine } from '@instructure/ui-icons';
+import { TextInput } from '@instructure/ui-text-input';
+import theme from "../theme.js";
+var styles = {
+  componentId: 'baFFb',
+  template: function template(theme) {
+    return "\n\n\n.outcomes-ui__SearchInput--search input[type=search]::-ms-clear {  display: none; width : 0; height: 0; }\n.outcomes-ui__SearchInput--search input[type=search]::-ms-reveal {  display: none; width : 0; height: 0; }\n\n\n.outcomes-ui__SearchInput--search input[type=\"search\"]::-webkit-search-decoration,\n.outcomes-ui__SearchInput--search input[type=\"search\"]::-webkit-search-cancel-button,\n.outcomes-ui__SearchInput--search input[type=\"search\"]::-webkit-search-results-button,\n.outcomes-ui__SearchInput--search input[type=\"search\"]::-webkit-search-results-decoration {\n  display: none;\n}\n";
+  },
+  'search': 'outcomes-ui__SearchInput--search'
+};
+var SearchInput = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inherits(SearchInput, _React$Component);
+
+  var _super = _createSuper(SearchInput);
+
+  function SearchInput() {
+    _classCallCheck(this, SearchInput);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(SearchInput, [{
+    key: "renderClearSearchButton",
+    value: // eslint-disable-next-line no-undef
+    function renderClearSearchButton() {
+      var onClear = this.props.onClear;
+      return /*#__PURE__*/React.createElement(IconButton, {
+        size: "small",
+        withBackground: false,
+        withBorder: false,
+        onClick: onClear,
+        screenReaderLabel: "X\xF3a tr\u01B0\u1EDDng t\xECm ki\u1EBFm"
+      }, /*#__PURE__*/React.createElement(IconEndSolid, {
+        size: "x-small"
+      }));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          onChange = _this$props.onChange,
+          searchText = _this$props.searchText;
+      return /*#__PURE__*/React.createElement("span", {
+        className: styles.search
+      }, /*#__PURE__*/React.createElement(TextInput, {
+        type: "search",
+        label: /*#__PURE__*/React.createElement(ScreenReaderContent, null, "T\xECm ki\u1EBFm k\u1EBFt qu\u1EA3"),
+        placeholder: "T\xECm Ki\u1EBFm K\u1EBFt Qu\u1EA3",
+        value: searchText,
+        onChange: onChange,
+        size: "medium",
+        renderAfterInput: searchText ? this.renderClearSearchButton() : /*#__PURE__*/React.createElement(IconSearchLine, {
+          size: "x-small"
+        })
+      }));
+    }
+  }]);
+
+  SearchInput.displayName = "SearchInput";
+  return SearchInput;
+}(React.Component), _class2.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  onClear: PropTypes.func.isRequired,
+  searchText: PropTypes.string.isRequired
+}, _temp)) || _class);
+export { SearchInput as default };

package/es/translated/vi/components/SearchInput/index.stories.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { text } from '@storybook/addon-knobs';
+import SearchInput from "./index.js";
+export default {
+  title: 'SearchInput'
+};
+export var standard = function standard() {
+  return /*#__PURE__*/React.createElement(SearchInput, {
+    searchText: text('Search Text', '')
+  });
+};

package/es/translated/vi/components/SearchInput/styles.css

@@ -0,0 +1,11 @@
+/* clears the 'X' from Internet Explorer */
+.search input[type=search]::-ms-clear {  display: none; width : 0; height: 0; }
+.search input[type=search]::-ms-reveal {  display: none; width : 0; height: 0; }
+
+/* clears the 'X' from Webkit browsers */
+.search input[type="search"]::-webkit-search-decoration,
+.search input[type="search"]::-webkit-search-cancel-button,
+.search input[type="search"]::-webkit-search-results-button,
+.search input[type="search"]::-webkit-search-results-decoration {
+  display: none;
+}

package/es/translated/vi/components/SearchResults/__tests__/index.test.js

@@ -0,0 +1,187 @@
+import { expect } from 'chai';
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import sinon from 'sinon';
+import SearchResults from "../index.js";
+import checkA11y from "../../../test/checkA11y.js";
+describe('SearchResults', function () {
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return Object.assign({
+      searchText: 'foo',
+      searchPage: 1,
+      searchTotal: 99,
+      searchOutcomes: sinon.spy(),
+      setSearchLoading: sinon.spy(),
+      setSearchEntries: sinon.spy(),
+      updateSearchPage: sinon.stub(),
+      isSearchLoading: true,
+      searchEntries: [],
+      setActiveCollection: sinon.spy(),
+      toggleExpandedIds: sinon.stub(),
+      setFocusedOutcome: sinon.spy(),
+      isOutcomeSelected: sinon.spy(),
+      selectOutcomeIds: sinon.spy(),
+      deselectOutcomeIds: sinon.spy(),
+      screenreaderNotification: sinon.stub()
+    }, props);
+  }
+
+  it('renders Spinner when loading', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(SearchResults, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Spinner')).to.have.length(1);
+  });
+  it('passes correct params to AlignmentItem components', function () {
+    var props = makeProps();
+    props.isSearchLoading = false;
+    props.searchEntries = [{
+      id: '2',
+      label: 'abc',
+      title: '123'
+    }];
+    var wrapper = shallow( /*#__PURE__*/React.createElement(SearchResults, props), {
+      disableLifecycleMethods: true
+    });
+    var checkbox = wrapper.find('AlignmentItem');
+    expect(checkbox).to.have.length(1);
+    expect(checkbox.prop('outcome')).to.eql({
+      id: '2',
+      label: 'abc',
+      title: '123'
+    });
+  });
+  describe('returns the correct result count', function () {
+    describe('with zero results', function () {
+      it('returns a properly formatted string', function () {
+        var props = makeProps({
+          searchTotal: 0,
+          isSearchLoading: false
+        });
+        var wrapper = shallow( /*#__PURE__*/React.createElement(SearchResults, props), {
+          disableLifecycleMethods: true
+        });
+        expect(wrapper.find('Text').prop('children')).to.equal('The search returned no results');
+      });
+    });
+    describe('with one result', function () {
+      it('returns a properly formatted string', function () {
+        var props = makeProps({
+          searchTotal: 1,
+          isSearchLoading: false
+        });
+        var wrapper = shallow( /*#__PURE__*/React.createElement(SearchResults, props), {
+          disableLifecycleMethods: true
+        });
+        expect(wrapper.find('Text').prop('children')).to.equal('1 result');
+      });
+    });
+    describe('with more than one result', function () {
+      it('returns a properly formatted string', function () {
+        var props = makeProps({
+          searchTotal: 2,
+          isSearchLoading: false
+        });
+        var wrapper = shallow( /*#__PURE__*/React.createElement(SearchResults, props), {
+          disableLifecycleMethods: true
+        });
+        expect(wrapper.find('Text').prop('children')).to.equal('2 results');
+      });
+    });
+  });
+  describe('pagination', function () {
+    var searchEntries = [{
+      id: '1'
+    }, {
+      id: '2'
+    }];
+    it('does not include pagination for 0 results', function () {
+      var props = makeProps({
+        searchEntries: searchEntries,
+        searchTotal: 0,
+        isSearchLoading: false
+      });
+      var wrapper = mount( /*#__PURE__*/React.createElement(SearchResults, props), {
+        disableLifecycleMethods: true
+      });
+      var nextPageButton = wrapper.find('button').findWhere(function (z) {
+        return z.text() == 'Next Page';
+      });
+      expect(nextPageButton).to.have.length(0);
+    });
+    it('does not include pagination for < 10 results', function () {
+      var props = makeProps({
+        searchEntries: searchEntries,
+        searchTotal: 0,
+        isSearchLoading: false
+      });
+      var wrapper = mount( /*#__PURE__*/React.createElement(SearchResults, props), {
+        disableLifecycleMethods: true
+      });
+      var nextPageButton = wrapper.find('button').findWhere(function (z) {
+        return z.text() == 'Next Page';
+      });
+      expect(nextPageButton).to.have.length(0);
+    });
+    it('does include pagination for > 10 results', function () {
+      var props = makeProps({
+        searchEntries: searchEntries,
+        searchTotal: 999,
+        isSearchLoading: false
+      });
+      var wrapper = mount( /*#__PURE__*/React.createElement(SearchResults, props), {
+        disableLifecycleMethods: true
+      });
+      var nextPageButton = wrapper.find('button').findWhere(function (z) {
+        return z.text() == 'Next Page';
+      });
+      expect(nextPageButton).not.to.have.length(0);
+    });
+    it('shows the current page', function () {
+      var props = makeProps({
+        searchEntries: searchEntries,
+        searchPage: 25,
+        searchTotal: 999,
+        isSearchLoading: false
+      });
+      var wrapper = mount( /*#__PURE__*/React.createElement(SearchResults, props), {
+        disableLifecycleMethods: true
+      });
+      var currentPageButton = wrapper.find('button').findWhere(function (z) {
+        return z.text() == '25';
+      });
+      expect(currentPageButton).not.to.have.length(0);
+    });
+    it('updates the current page when pagination button is clicked', function () {
+      var props = makeProps({
+        searchEntries: searchEntries,
+        isSearchLoading: false
+      });
+      var wrapper = mount( /*#__PURE__*/React.createElement(SearchResults, props), {
+        disableLifecycleMethods: true
+      });
+      var pageTwoButton = wrapper.find('button').findWhere(function (z) {
+        return z.text() == '2';
+      });
+      pageTwoButton.first().simulate('click');
+      expect(props.updateSearchPage).to.have.been.calledWith(2);
+    });
+  });
+  describe('screenreaderNotification', function () {
+    it('calls the screenreaderNotification when the search loading is complete', function () {
+      var props = makeProps({
+        isSearchLoading: true
+      });
+      var wrapper = mount( /*#__PURE__*/React.createElement(SearchResults, props));
+      expect(props.screenreaderNotification).not.to.have.been.called;
+      wrapper.setProps({
+        isSearchLoading: false
+      });
+      expect(props.screenreaderNotification).to.have.been.called;
+    });
+  });
+  it('meets a11y standards', function () {
+    return checkA11y( /*#__PURE__*/React.createElement(SearchResults, makeProps()));
+  });
+});

package/es/translated/vi/components/SearchResults/index.js

@@ -0,0 +1,173 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+var _default_vi_number = Intl.NumberFormat("vi", { style: "decimal" }).format;
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Text } from '@instructure/ui-text';
+import { Flex } from '@instructure/ui-flex';
+import { View } from '@instructure/ui-view';
+import { Spinner } from '@instructure/ui-spinner';
+import isEqual from 'lodash/isEqual';
+import OutcomeCheckbox from "../OutcomeCheckbox/index.js";
+import AlignmentItem from "../AlignmentItem/index.js";
+import Pagination from "../Pagination/index.js";
+export var RESULTS_PER_PAGE = 10;
+
+var SearchResults = /*#__PURE__*/function (_React$Component) {
+  _inherits(SearchResults, _React$Component);
+
+  var _super = _createSuper(SearchResults);
+
+  function SearchResults() {
+    _classCallCheck(this, SearchResults);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(SearchResults, [{
+    key: "componentDidUpdate",
+    value: // eslint-disable-next-line no-undef
+    function componentDidUpdate(prevProps) {
+      var _this$props = this.props,
+          isSearchLoading = _this$props.isSearchLoading,
+          searchPage = _this$props.searchPage,
+          screenreaderNotification = _this$props.screenreaderNotification;
+
+      if (screenreaderNotification) {
+        if (!isSearchLoading && prevProps.isSearchLoading) {
+          screenreaderNotification("\u0110\xE3 c\u1EADp nh\u1EADt k\u1EBFt qu\u1EA3 cho trang " + searchPage + " / " + this.getPageCount());
+          screenreaderNotification(this.getResultCountText());
+        }
+
+        if (!isEqual(searchPage, prevProps.searchPage)) {
+          screenreaderNotification("\u0110ang t\u1EA3i trang " + searchPage);
+        }
+      }
+    }
+  }, {
+    key: "renderEntries",
+    value: function renderEntries() {
+      var _this$props2 = this.props,
+          setFocusedOutcome = _this$props2.setFocusedOutcome,
+          isOutcomeSelected = _this$props2.isOutcomeSelected,
+          isPicker = _this$props2.isPicker,
+          selectOutcomeIds = _this$props2.selectOutcomeIds,
+          deselectOutcomeIds = _this$props2.deselectOutcomeIds,
+          searchEntries = _this$props2.searchEntries;
+      return searchEntries.map(function (outcome) {
+        return /*#__PURE__*/React.createElement("div", {
+          key: outcome.id,
+          "data-automation": "searchResults__outcomeResult"
+        }, isPicker ? /*#__PURE__*/React.createElement(OutcomeCheckbox, {
+          outcome: outcome,
+          setFocusedOutcome: setFocusedOutcome,
+          isOutcomeSelected: isOutcomeSelected,
+          selectOutcomeIds: selectOutcomeIds,
+          deselectOutcomeIds: deselectOutcomeIds
+        }) : /*#__PURE__*/React.createElement(AlignmentItem, {
+          outcome: outcome,
+          isOutcomeSelected: isOutcomeSelected,
+          selectOutcomeIds: selectOutcomeIds,
+          deselectOutcomeIds: deselectOutcomeIds,
+          isTray: true
+        }));
+      });
+    }
+  }, {
+    key: "getPageCount",
+    value: function getPageCount() {
+      var searchTotal = this.props.searchTotal;
+      return Math.ceil(searchTotal / RESULTS_PER_PAGE);
+    }
+  }, {
+    key: "renderPagination",
+    value: function renderPagination() {
+      var _this$props3 = this.props,
+          searchPage = _this$props3.searchPage,
+          updateSearchPage = _this$props3.updateSearchPage;
+      return /*#__PURE__*/React.createElement(Pagination, {
+        page: searchPage,
+        updatePage: updateSearchPage,
+        numPages: this.getPageCount()
+      });
+    }
+  }, {
+    key: "getResultCountText",
+    value: function getResultCountText() {
+      var _s, _n;
+
+      var searchTotal = this.props.searchTotal;
+      return _s = searchTotal, _n = +_s, _n === 0 ? "Qu\xE1 tr\xECnh t\xECm ki\u1EBFm kh\xF4ng tr\u1EA3 v\u1EC1 k\u1EBFt qu\u1EA3 n\xE0o" : (_default_vi_number(searchTotal) + " k\u1EBFt qu\u1EA3");
+    }
+  }, {
+    key: "renderResults",
+    value: function renderResults() {
+      var searchEntries = this.props.searchEntries;
+      return /*#__PURE__*/React.createElement(View, null, searchEntries.length > 0 && /*#__PURE__*/React.createElement(View, {
+        "data-automation": "searchResults__resultsList",
+        display: "block",
+        padding: "small none none none"
+      }, this.renderEntries()));
+    }
+  }, {
+    key: "renderHeader",
+    value: function renderHeader() {
+      var searchTotal = this.props.searchTotal;
+      return searchTotal !== null && /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
+        size: "small",
+        "data-automation": "searchResults__resultsCount"
+      }, this.getResultCountText()));
+    }
+  }, {
+    key: "renderLoading",
+    value: function renderLoading() {
+      return /*#__PURE__*/React.createElement(Flex, {
+        justifyItems: "center"
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        padding: "small"
+      }, /*#__PURE__*/React.createElement(Spinner, {
+        renderTitle: "\u0110ang t\u1EA3i k\u1EBFt qu\u1EA3 t\xECm ki\u1EBFm"
+      })));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var isSearchLoading = this.props.isSearchLoading;
+      return /*#__PURE__*/React.createElement(Flex, {
+        height: "100%",
+        width: "100%",
+        padding: "small none none none",
+        alignItems: "stretch",
+        direction: "column"
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        shouldGrow: true
+      }, this.renderHeader(), isSearchLoading ? this.renderLoading() : this.renderResults()), /*#__PURE__*/React.createElement(Flex.Item, null, !isSearchLoading && this.renderPagination()));
+    }
+  }]);
+
+  SearchResults.displayName = "SearchResults";
+  return SearchResults;
+}(React.Component);
+
+SearchResults.propTypes = {
+  isSearchLoading: PropTypes.bool.isRequired,
+  searchEntries: PropTypes.array.isRequired,
+  searchPage: PropTypes.number.isRequired,
+  searchTotal: PropTypes.number,
+  updateSearchPage: PropTypes.func.isRequired,
+  setFocusedOutcome: PropTypes.func,
+  isOutcomeSelected: PropTypes.func.isRequired,
+  selectOutcomeIds: PropTypes.func.isRequired,
+  deselectOutcomeIds: PropTypes.func.isRequired,
+  screenreaderNotification: PropTypes.func,
+  isPicker: PropTypes.bool
+};
+SearchResults.defaultProps = {
+  setFocusedOutcome: function setFocusedOutcome() {},
+  screenreaderNotification: null,
+  searchTotal: null,
+  isPicker: false
+};
+export default SearchResults;

package/es/translated/vi/components/SearchResults/index.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { number, object } from '@storybook/addon-knobs';
+import { defaultOutcomes } from "../../../.storybook/constants.js";
+import SearchResults from "./index.js";
+export default {
+  title: 'SearchResults'
+};
+export var paginated = function paginated() {
+  return /*#__PURE__*/React.createElement(SearchResults, {
+    setFocusedOutcome: function setFocusedOutcome() {},
+    isOutcomeSelected: function isOutcomeSelected() {},
+    selectOutcomeIds: function selectOutcomeIds() {},
+    deselectOutcomeIds: function deselectOutcomeIds() {},
+    updateSearchPage: function updateSearchPage() {},
+    isSearchLoading: false,
+    searchEntries: object('Outcomes', defaultOutcomes()),
+    searchTotal: number('Search Total', 100),
+    searchPage: number('Page Number', 1)
+  });
+};

package/es/translated/vi/components/WithAlignmentSet.js

@@ -0,0 +1,63 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import PropTypes from 'prop-types';
+
+var WithAlignmentSet = function WithAlignmentSet(ComponentClass) {
+  var _class, _temp;
+
+  return _temp = _class = /*#__PURE__*/function (_React$Component) {
+    _inherits(_class, _React$Component);
+
+    var _super = _createSuper(_class);
+
+    function _class() {
+      _classCallCheck(this, _class);
+
+      return _super.apply(this, arguments);
+    }
+
+    _createClass(_class, [{
+      key: "componentWillMount",
+      value: function componentWillMount() {
+        this.loadIfNeeded(this.props);
+      }
+    }, {
+      key: "componentWillReceiveProps",
+      value: function componentWillReceiveProps(nextProps) {
+        this.loadIfNeeded(nextProps);
+      }
+    }, {
+      key: "loadIfNeeded",
+      value: function loadIfNeeded(props) {
+        var alignmentSetId = props.alignmentSetId,
+            loadAlignments = props.loadAlignments;
+
+        if (!this.state || this.state.alignmentSetId !== alignmentSetId) {
+          this.setState({
+            alignmentSetId: alignmentSetId
+          });
+          loadAlignments(alignmentSetId);
+        }
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        return /*#__PURE__*/React.createElement(ComponentClass, this.props);
+      }
+    }]);
+
+    _class.displayName = "_class";
+    return _class;
+  }(React.Component), _class.propTypes = _objectSpread({
+    loadAlignments: PropTypes.func.isRequired,
+    alignmentSetId: PropTypes.string
+  }, ComponentClass.propTypes), _class.defaultProps = {
+    alignmentSetId: null
+  }, _class.displayName = "WithAlignmentSet(".concat(ComponentClass.displayName, ")"), _temp;
+};
+
+export default WithAlignmentSet;

package/es/translated/vi/components/WithArtifact.js

@@ -0,0 +1,70 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import PropTypes from 'prop-types';
+
+var WithArtifact = function WithArtifact(ComponentClass) {
+  var _class, _temp;
+
+  return _temp = _class = /*#__PURE__*/function (_React$Component) {
+    _inherits(_class, _React$Component);
+
+    var _super = _createSuper(_class);
+
+    function _class() {
+      _classCallCheck(this, _class);
+
+      return _super.apply(this, arguments);
+    }
+
+    _createClass(_class, [{
+      key: "componentWillMount",
+      value: function componentWillMount() {
+        this.loadIfNeeded(this.props);
+      }
+    }, {
+      key: "componentWillReceiveProps",
+      value: function componentWillReceiveProps(nextProps) {
+        this.loadIfNeeded(nextProps);
+      }
+    }, {
+      key: "loadIfNeeded",
+      value: function loadIfNeeded(props) {
+        var artifactId = props.artifactId,
+            artifactType = props.artifactType,
+            loadArtifact = props.loadArtifact;
+
+        if (!this.state || this.state.artifactId !== artifactId && this.state.artifactType !== artifactType) {
+          this.setState({
+            artifactId: artifactId,
+            artifactType: artifactType
+          });
+          loadArtifact({
+            artifactId: artifactId,
+            artifactType: artifactType
+          });
+        }
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        return /*#__PURE__*/React.createElement(ComponentClass, this.props);
+      }
+    }]);
+
+    _class.displayName = "_class";
+    return _class;
+  }(React.Component), _class.propTypes = _objectSpread({
+    loadArtifact: PropTypes.func.isRequired,
+    artifactId: PropTypes.string,
+    artifactType: PropTypes.string
+  }, ComponentClass.propTypes), _class.defaultProps = {
+    artifactId: '',
+    artifactType: ''
+  }, _class.displayName = "WithArtifact(".concat(ComponentClass.displayName, ")"), _temp;
+};
+
+export default WithArtifact;