cozy-ui-plus 1.1.0

package/dist/FileImageLoader/index.js

@@ -0,0 +1,394 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FileImageLoader = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = require("react");
+
+var _cozyClient = require("cozy-client");
+
+var _file = require("cozy-client/dist/models/file");
+
+var _cozyLogger = _interopRequireDefault(require("cozy-logger"));
+
+var _Encrypted = require("cozy-ui/transpiled/react/providers/Encrypted");
+
+var _checkImageSource = require("./checkImageSource");
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var PENDING = 'PENDING';
+var LOADING_LINK = 'LOADING_LINK';
+var LOADING_FALLBACK = 'LOADING_FALLBACK';
+var LOADED = 'LOADED';
+var FAILED = 'FAILED';
+var GET_LINK = 'GET_LINK';
+
+var FileImageLoader = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(FileImageLoader, _Component);
+
+  var _super = _createSuper(FileImageLoader);
+
+  function FileImageLoader() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, FileImageLoader);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      src: null
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_mounted", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCreate", function (doc) {
+      var _this$props = _this.props,
+          file = _this$props.file,
+          linkType = _this$props.linkType;
+
+      if (file._id === doc._id && doc.format === linkType) {
+        _this.loadLink();
+      }
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(FileImageLoader, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var client = this.props.client;
+      this._mounted = true;
+      this.status = PENDING;
+      this.loadNextSrc();
+      this.realtime = client.plugins.realtime;
+      this.type = 'io.cozy.files.thumbnails';
+      this.realtime.subscribe('created', this.type, this.handleCreate);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this._mounted = false;
+
+      if (this.img) {
+        this.img.onload = this.img.onerror = null;
+        this.img.src = '';
+      }
+
+      this.realtime && this.realtime.unsubscribe('created', this.type, this.handleCreate);
+    }
+    /**
+     * Reload the link when realtime tell us that the
+     * thumbnail is created. By default linkType === small
+     */
+
+  }, {
+    key: "getFileId",
+    value: function getFileId(file) {
+      return file.id || file._id;
+    }
+  }, {
+    key: "loadNextSrc",
+    value: function loadNextSrc() {
+      var lastError = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      var file = this.props.file;
+
+      if ((0, _file.isEncrypted)(file)) {
+        // No link available for encrypted files
+        return;
+      }
+
+      if (this.status === PENDING) this.getLink();else if (this.status === GET_LINK) this.loadLink();else if (this.status === LOADING_LINK) this.loadFallback();else if (this.status === LOADING_FALLBACK) {
+        _cozyLogger.default.warn('failed loading thumbnail', lastError);
+
+        this.setState({
+          status: FAILED
+        });
+        this.props.onError(lastError);
+      }
+    }
+  }, {
+    key: "fetchFileLinks",
+    value: function () {
+      var _fetchFileLinks = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(file) {
+        var response;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return this.props.client.collection('io.cozy.files').get(this.getFileId(file));
+
+              case 2:
+                response = _context.sent;
+
+                if (response.data.links) {
+                  _context.next = 5;
+                  break;
+                }
+
+                throw new Error('Could not fetch file links');
+
+              case 5:
+                return _context.abrupt("return", response.data.links);
+
+              case 6:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function fetchFileLinks(_x) {
+        return _fetchFileLinks.apply(this, arguments);
+      }
+
+      return fetchFileLinks;
+    }()
+  }, {
+    key: "getLink",
+    value: function () {
+      var _getLink = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+        var _this$props2, file, linkType, client, link, src;
+
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                this.status = GET_LINK;
+                _this$props2 = this.props, file = _this$props2.file, linkType = _this$props2.linkType, client = _this$props2.client;
+                _context2.prev = 2;
+                link = file.links ? file.links[linkType] : false;
+
+                if (link) {
+                  _context2.next = 6;
+                  break;
+                }
+
+                throw new Error("".concat(linkType, " link is not available"));
+
+              case 6:
+                src = client.getStackClient().uri + link;
+                _context2.next = 9;
+                return (0, _checkImageSource.checkImageSource)(src);
+
+              case 9:
+                if (this._mounted) {
+                  this.status = LOADED;
+                  this.setState({
+                    src: src
+                  });
+                }
+
+                _context2.next = 15;
+                break;
+
+              case 12:
+                _context2.prev = 12;
+                _context2.t0 = _context2["catch"](2);
+                this.loadNextSrc(_context2.t0);
+
+              case 15:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this, [[2, 12]]);
+      }));
+
+      function getLink() {
+        return _getLink.apply(this, arguments);
+      }
+
+      return getLink;
+    }()
+  }, {
+    key: "loadLink",
+    value: function () {
+      var _loadLink = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+        var _this$props3, file, linkType, client, links, link, src;
+
+        return _regenerator.default.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                this.status = LOADING_LINK;
+                _this$props3 = this.props, file = _this$props3.file, linkType = _this$props3.linkType, client = _this$props3.client;
+                _context3.prev = 2;
+                _context3.next = 5;
+                return this.fetchFileLinks(file);
+
+              case 5:
+                links = _context3.sent;
+                link = links[linkType];
+
+                if (link) {
+                  _context3.next = 9;
+                  break;
+                }
+
+                throw new Error("".concat(linkType, " link is not available"));
+
+              case 9:
+                src = client.getStackClient().uri + link;
+                _context3.next = 12;
+                return (0, _checkImageSource.checkImageSource)(src);
+
+              case 12:
+                if (this._mounted) {
+                  this.status = LOADED;
+                  this.setState({
+                    src: src
+                  });
+                }
+
+                _context3.next = 19;
+                break;
+
+              case 15:
+                _context3.prev = 15;
+                _context3.t0 = _context3["catch"](2);
+
+                _cozyLogger.default.error(_context3.t0);
+
+                this.loadNextSrc(_context3.t0);
+
+              case 19:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3, this, [[2, 15]]);
+      }));
+
+      function loadLink() {
+        return _loadLink.apply(this, arguments);
+      }
+
+      return loadLink;
+    }()
+  }, {
+    key: "loadFallback",
+    value: function () {
+      var _loadFallback = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
+        var _this$props4, file, client, src;
+
+        return _regenerator.default.wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                this.status = LOADING_FALLBACK;
+                _this$props4 = this.props, file = _this$props4.file, client = _this$props4.client;
+                _context4.prev = 2;
+
+                if (!(file.class === 'pdf')) {
+                  _context4.next = 5;
+                  break;
+                }
+
+                throw new Error('No pdf files fallback');
+
+              case 5:
+                _context4.next = 7;
+                return client.collection('io.cozy.files', {
+                  driveId: file.driveId
+                }).getDownloadLinkById(this.getFileId(file), file.name);
+
+              case 7:
+                src = _context4.sent;
+                _context4.next = 10;
+                return (0, _checkImageSource.checkImageSource)(src);
+
+              case 10:
+                if (this._mounted) {
+                  this.status = LOADED;
+                  this.setState({
+                    src: src
+                  });
+                }
+
+                _context4.next = 16;
+                break;
+
+              case 13:
+                _context4.prev = 13;
+                _context4.t0 = _context4["catch"](2);
+                this.loadNextSrc(_context4.t0);
+
+              case 16:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4, this, [[2, 13]]);
+      }));
+
+      function loadFallback() {
+        return _loadFallback.apply(this, arguments);
+      }
+
+      return loadFallback;
+    }()
+  }, {
+    key: "render",
+    value: function render() {
+      var src = this.state.src;
+      var _this$props5 = this.props,
+          render = _this$props5.render,
+          renderFallback = _this$props5.renderFallback;
+
+      if (this.context && this.context.url) {
+        return render(this.context.url);
+      }
+
+      if (src) return render(src);else if (renderFallback) return renderFallback();else return null;
+    }
+  }]);
+  return FileImageLoader;
+}(_react.Component);
+
+exports.FileImageLoader = FileImageLoader;
+(0, _defineProperty2.default)(FileImageLoader, "contextType", _Encrypted.EncryptedContext);
+FileImageLoader.propTypes = {
+  file: _propTypes.default.object.isRequired,
+  render: _propTypes.default.func.isRequired,
+  linkType: _propTypes.default.oneOf(['tiny', 'small', 'medium', 'large', 'icon']),
+  onError: _propTypes.default.func,
+  renderFallback: _propTypes.default.func
+};
+FileImageLoader.defaultProps = {
+  linkType: 'small',
+  onError: function onError() {}
+};
+
+var _default = (0, _cozyClient.withClient)(FileImageLoader);
+
+exports.default = _default;

package/dist/FilePicker/FilePickerBody.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _cozyClient = require("cozy-client");
+
+var _List = _interopRequireDefault(require("cozy-ui/transpiled/react/List"));
+
+var _FilePickerBodyItem = _interopRequireDefault(require("./FilePickerBodyItem"));
+
+var _queries = require("./queries");
+
+var _LoadMore = _interopRequireDefault(require("../LoadMore"));
+
+var _helpers = require("./helpers");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var isDirectory = _cozyClient.models.file.isDirectory;
+
+var FilePickerBody = function FilePickerBody(_ref) {
+  var navigateTo = _ref.navigateTo,
+      folderId = _ref.folderId,
+      onSelectItemId = _ref.onSelectItemId,
+      itemsIdsSelected = _ref.itemsIdsSelected,
+      itemTypesAccepted = _ref.itemTypesAccepted,
+      multiple = _ref.multiple;
+  var contentFolderQuery = (0, _queries.buildContentFolderQuery)(folderId);
+
+  var _useQuery = (0, _cozyClient.useQuery)(contentFolderQuery.definition, contentFolderQuery.options),
+      contentFolder = _useQuery.data,
+      hasMore = _useQuery.hasMore,
+      fetchMore = _useQuery.fetchMore;
+
+  var onCheck = (0, _react.useCallback)(function (itemId) {
+    var isChecked = itemsIdsSelected.some(function (fileIdSelected) {
+      return fileIdSelected === itemId;
+    });
+
+    if (isChecked) {
+      onSelectItemId(itemsIdsSelected.filter(function (fileIdSelected) {
+        return fileIdSelected !== itemId;
+      }));
+    } else onSelectItemId(function (prev) {
+      return [].concat((0, _toConsumableArray2.default)(prev), [itemId]);
+    });
+  }, [itemsIdsSelected, onSelectItemId]); // When click on checkbox/radio area...
+
+  var handleChoiceClick = (0, _react.useCallback)(function (item) {
+    return function () {
+      if (multiple) onCheck(item._id);else onSelectItemId(item._id);
+    };
+  }, [multiple, onCheck, onSelectItemId]); // ...when click anywhere on the rest of the line
+
+  var handleListItemClick = (0, _react.useCallback)(function (item) {
+    return function () {
+      if (isDirectory(item)) {
+        navigateTo(contentFolder.find(function (it) {
+          return it._id === item._id;
+        }));
+      }
+
+      if ((0, _helpers.isValidFile)(item, itemTypesAccepted)) {
+        if (multiple) onCheck(item._id);else onSelectItemId(item._id);
+      }
+    };
+  }, [contentFolder, itemTypesAccepted, multiple, navigateTo, onCheck, onSelectItemId]);
+  return /*#__PURE__*/_react.default.createElement(_List.default, null, contentFolder && contentFolder.map(function (item, idx) {
+    var hasDivider = contentFolder ? idx !== contentFolder.length - 1 : false;
+    return /*#__PURE__*/_react.default.createElement(_FilePickerBodyItem.default, {
+      key: item._id,
+      item: item,
+      itemTypesAccepted: itemTypesAccepted,
+      multiple: multiple,
+      handleChoiceClick: handleChoiceClick,
+      handleListItemClick: handleListItemClick,
+      onCheck: onCheck,
+      itemsIdsSelected: itemsIdsSelected,
+      hasDivider: hasDivider
+    });
+  }), hasMore && /*#__PURE__*/_react.default.createElement(_LoadMore.default, {
+    label: "loadMore",
+    fetchMore: fetchMore
+  }));
+};
+
+FilePickerBody.propTypes = {
+  onSelectItemId: _propTypes.default.func.isRequired,
+  itemsIdsSelected: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  folderId: _propTypes.default.string.isRequired,
+  navigateTo: _propTypes.default.func.isRequired,
+  itemTypesAccepted: _propTypes.default.arrayOf(_propTypes.default.string).isRequired
+};
+var _default = FilePickerBody;
+exports.default = _default;

package/dist/FilePicker/FilePickerBodyItem.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _filesize = _interopRequireDefault(require("filesize"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _cozyClient = require("cozy-client");
+
+var _Checkbox = _interopRequireDefault(require("cozy-ui/transpiled/react/Checkbox"));
+
+var _Divider = _interopRequireDefault(require("cozy-ui/transpiled/react/Divider"));
+
+var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
+
+var _FileTypeFolder = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/FileTypeFolder"));
+
+var _FileTypeText = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/FileTypeText"));
+
+var _ListItem = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItem"));
+
+var _ListItemIcon = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemIcon"));
+
+var _ListItemText = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemText"));
+
+var _Radios = _interopRequireDefault(require("cozy-ui/transpiled/react/Radios"));
+
+var _I18n = require("cozy-ui/transpiled/react/providers/I18n");
+
+var _styles = require("cozy-ui/transpiled/react/styles");
+
+var _helpers = require("./helpers");
+
+var styles = {
+  "filePickerBreadcrumb-previousPath": "styles__filePickerBreadcrumb-previousPath___2SEdW",
+  "filePickerBreadcrumb-icon": "styles__filePickerBreadcrumb-icon___32TVL",
+  "filePickerBreadcrumb-wrapper": "styles__filePickerBreadcrumb-wrapper___3Xpzb"
+};
+var _models$file = _cozyClient.models.file,
+    isDirectory = _models$file.isDirectory,
+    isFile = _models$file.isFile;
+var useStyles = (0, _styles.makeStyles)(function () {
+  return {
+    verticalDivider: {
+      height: '2rem',
+      display: 'flex',
+      alignSelf: 'auto',
+      alignItems: 'center',
+      marginLeft: '0.5rem'
+    }
+  };
+});
+
+var FilePickerBodyItem = function FilePickerBodyItem(_ref) {
+  var item = _ref.item,
+      itemTypesAccepted = _ref.itemTypesAccepted,
+      multiple = _ref.multiple,
+      handleChoiceClick = _ref.handleChoiceClick,
+      handleListItemClick = _ref.handleListItemClick,
+      itemsIdsSelected = _ref.itemsIdsSelected,
+      hasDivider = _ref.hasDivider;
+  var classes = useStyles();
+
+  var _useI18n = (0, _I18n.useI18n)(),
+      f = _useI18n.f;
+
+  var hasChoice = (0, _helpers.isValidFile)(item, itemTypesAccepted) || (0, _helpers.isValidFolder)(item, itemTypesAccepted);
+  var Input = multiple ? _Checkbox.default : _Radios.default;
+  var listItemSecondaryContent = isFile(item) ? "".concat(f(item.updated_at, 'dd LLL yyyy'), " - ").concat((0, _filesize.default)(item.size, {
+    base: 10
+  })) : null;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+    disabled: !hasChoice && isFile(item),
+    size: "small",
+    button: true,
+    "data-testid": "list-item"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "listitem-onclick",
+    className: styles['filePickerBreadcrumb-wrapper'],
+    onClick: handleListItemClick(item)
+  }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: isDirectory(item) ? _FileTypeFolder.default : _FileTypeText.default,
+    width: "32",
+    height: "32"
+  })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+    primary: item.name,
+    secondary: listItemSecondaryContent
+  })), isDirectory(item) && hasChoice && /*#__PURE__*/_react.default.createElement(_Divider.default, {
+    orientation: "vertical",
+    flexItem: true,
+    className: classes.verticalDivider
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "choice-onclick",
+    className: "u-pv-half u-h-2 u-flex u-flex-items-center",
+    onClick: hasChoice ? handleChoiceClick(item) : undefined
+  }, /*#__PURE__*/_react.default.createElement(Input, {
+    "data-testid": multiple ? 'checkbox-btn' : 'radio-btn',
+    onChange: function onChange() {// handled by onClick on the container
+    },
+    checked: itemsIdsSelected.includes(item._id),
+    value: item._id,
+    className: (0, _classnames.default)('u-p-0', {
+      'u-o-100': hasChoice,
+      'u-o-0': !hasChoice
+    }),
+    disabled: !hasChoice
+  }))), hasDivider && /*#__PURE__*/_react.default.createElement(_Divider.default, {
+    component: "li"
+  }));
+};
+
+FilePickerBodyItem.propTypes = {
+  item: _propTypes.default.object.isRequired,
+  itemTypesAccepted: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  multiple: _propTypes.default.bool,
+  handleChoiceClick: _propTypes.default.func.isRequired,
+  handleListItemClick: _propTypes.default.func.isRequired,
+  itemsIdsSelected: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  hasDivider: _propTypes.default.bool.isRequired
+};
+var _default = FilePickerBodyItem;
+exports.default = _default;