@panneau/field-resource-item 3.0.222 → 3.0.224

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/field-resource-item",
-    "version": "3.0.222",
+    "version": "3.0.224",
     "description": "An item mapping a resource",
     "keywords": [
         "javascript"
@@ -25,8 +25,11 @@
         }
     ],
     "license": "ISC",
-    "main": "lib/index.js",
+    "type": "module",
     "module": "es/index.js",
+    "exports": {
+        ".": "./es/index.js"
+    },
     "files": [
         "lib",
         "es",
@@ -46,16 +49,16 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@panneau/core": "^3.0.222",
-        "@panneau/data": "^3.0.222",
-        "@panneau/element-button": "^3.0.222",
-        "@panneau/element-resource-card": "^3.0.222",
-        "@panneau/element-select": "^3.0.222",
-        "@panneau/form-resource": "^3.0.222",
-        "@panneau/intl": "^3.0.222",
-        "@panneau/modal-dialog": "^3.0.222",
-        "@panneau/modal-resource-form": "^3.0.222",
-        "@panneau/modal-resource-items": "^3.0.222",
+        "@panneau/core": "^3.0.224",
+        "@panneau/data": "^3.0.224",
+        "@panneau/element-button": "^3.0.224",
+        "@panneau/element-resource-card": "^3.0.224",
+        "@panneau/element-select": "^3.0.224",
+        "@panneau/form-resource": "^3.0.224",
+        "@panneau/intl": "^3.0.224",
+        "@panneau/modal-dialog": "^3.0.224",
+        "@panneau/modal-resource-form": "^3.0.224",
+        "@panneau/modal-resource-items": "^3.0.224",
         "classnames": "^2.5.1",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -64,5 +67,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "1d7f6c2943965c2c26fb6ce1d8f3c85eb88b2146"
+    "gitHead": "c95bd465867c4c7d112bf0ed66036574cc05c627"
 }

package/lib/index.js

@@ -1,447 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var classNames = require('classnames');
-var isArray = require('lodash/isArray');
-var isEmpty = require('lodash/isEmpty');
-var uniqBy = require('lodash/uniqBy');
-var PropTypes = require('prop-types');
-var React = require('react');
-var reactIntl = require('react-intl');
-var core = require('@panneau/core');
-var contexts = require('@panneau/core/contexts');
-var utils = require('@panneau/core/utils');
-var data = require('@panneau/data');
-var Button = require('@panneau/element-button');
-var ResourceCard = require('@panneau/element-resource-card');
-var Select = require('@panneau/element-select');
-var ResourceForm = require('@panneau/form-resource');
-var intl = require('@panneau/intl');
-var Dialog = require('@panneau/modal-dialog');
-var ResourceItemsModal = require('@panneau/modal-resource-items');
-
-// TODO: improve the modals (esc key) and switch to FormModal
-
-var propTypes = {
-  name: PropTypes.string,
-  value: PropTypes.object,
-  // eslint-disable-line react/forbid-prop-types
-  errors: core.PropTypes.formErrors,
-  resource: PropTypes.string,
-  resourceType: PropTypes.string,
-  paginated: PropTypes.bool,
-  query: PropTypes.object,
-  // eslint-disable-line react/forbid-prop-types
-  page: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  // eslint-disable-line react/forbid-prop-types
-  count: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  // eslint-disable-line react/forbid-prop-types
-  options: PropTypes.object,
-  // eslint-disable-line react/forbid-prop-types
-  searchParamName: PropTypes.string,
-  getItemLabel: PropTypes.func,
-  getItemDescription: PropTypes.func,
-  getItemImage: PropTypes.func,
-  itemLabelPath: PropTypes.string,
-  itemDescriptionPath: PropTypes.string,
-  itemImagePath: PropTypes.string,
-  itemLabelWithId: PropTypes.bool,
-  placeholder: PropTypes.string,
-  canCreate: PropTypes.bool,
-  canEdit: PropTypes.bool,
-  canFind: PropTypes.bool,
-  withoutModal: PropTypes.bool,
-  createButtonLabel: core.PropTypes.message,
-  editButtonLabel: core.PropTypes.message,
-  findButtonLabel: core.PropTypes.message,
-  multiple: PropTypes.bool,
-  disabled: PropTypes.bool,
-  className: PropTypes.string,
-  inputClassName: PropTypes.string,
-  onChange: PropTypes.func
-};
-var defaultProps = {
-  name: null,
-  value: null,
-  errors: null,
-  resource: null,
-  resourceType: null,
-  paginated: true,
-  query: null,
-  page: null,
-  count: null,
-  options: null,
-  searchParamName: 'search',
-  getItemLabel: utils.getPathValue,
-  getItemDescription: utils.getPathValue,
-  getItemImage: utils.getPathValue,
-  itemLabelPath: 'label',
-  itemDescriptionPath: null,
-  itemImagePath: 'image.thumbnail_url',
-  itemLabelWithId: false,
-  placeholder: null,
-  canCreate: false,
-  canEdit: false,
-  canFind: false,
-  withoutModal: false,
-  createButtonLabel: null,
-  editButtonLabel: null,
-  findButtonLabel: null,
-  multiple: false,
-  disabled: false,
-  className: null,
-  inputClassName: null,
-  onChange: null
-};
-var ResourceItemField = function ResourceItemField(_ref) {
-  var name = _ref.name,
-    value = _ref.value,
-    errors = _ref.errors,
-    resourceId = _ref.resource,
-    resourceType = _ref.resourceType,
-    paginated = _ref.paginated,
-    initialQuery = _ref.query,
-    initialPage = _ref.page,
-    initialCount = _ref.count,
-    initialOptions = _ref.options,
-    searchParamName = _ref.searchParamName,
-    initialGetItemLabel = _ref.getItemLabel,
-    getItemDescription = _ref.getItemDescription,
-    getItemImage = _ref.getItemImage,
-    itemLabelPath = _ref.itemLabelPath,
-    itemDescriptionPath = _ref.itemDescriptionPath,
-    itemImagePath = _ref.itemImagePath,
-    itemLabelWithId = _ref.itemLabelWithId,
-    placeholder = _ref.placeholder,
-    canCreate = _ref.canCreate,
-    canEdit = _ref.canEdit,
-    canFind = _ref.canFind,
-    withoutModal = _ref.withoutModal,
-    createButtonLabel = _ref.createButtonLabel,
-    editButtonLabel = _ref.editButtonLabel,
-    findButtonLabel = _ref.findButtonLabel,
-    multiple = _ref.multiple,
-    disabled = _ref.disabled,
-    className = _ref.className,
-    inputClassName = _ref.inputClassName,
-    onChange = _ref.onChange;
-  var intl$1 = reactIntl.useIntl();
-  var resource = contexts.usePanneauResource(resourceId);
-  var resourceValues = intl.useResourceValues(resource);
-  var defaultPage = React.useMemo(function () {
-    return initialPage || (paginated ? 1 : null);
-  }, [initialPage, paginated]);
-  var defaultCount = React.useMemo(function () {
-    return initialCount || (paginated ? 8 : null);
-  }, [initialCount, paginated]);
-  var hasValue = value !== null && !isEmpty(value);
-
-  // const [initialValue] = useState(value);
-
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    formOpen = _useState2[0],
-    setFormOpen = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    listOpen = _useState4[0],
-    setListOpen = _useState4[1];
-
-  // TODO: list state controls?
-  var _useState5 = React.useState(initialQuery),
-    _useState6 = _slicedToArray(_useState5, 2),
-    query = _useState6[0];
-    _useState6[1];
-  var _useState7 = React.useState(defaultPage),
-    _useState8 = _slicedToArray(_useState7, 2),
-    page = _useState8[0],
-    setPage = _useState8[1];
-  var _useState9 = React.useState(defaultCount),
-    _useState10 = _slicedToArray(_useState9, 2),
-    count = _useState10[0];
-    _useState10[1];
-  var _useState11 = React.useState(initialOptions),
-    _useState12 = _slicedToArray(_useState11, 2),
-    resourceOptions = _useState12[0];
-    _useState12[1];
-
-  // The text input search query
-  var _useState13 = React.useState(''),
-    _useState14 = _slicedToArray(_useState13, 2),
-    inputTextValue = _useState14[0],
-    setInputTextValue = _useState14[1];
-  var _useState15 = React.useState(''),
-    _useState16 = _slicedToArray(_useState15, 2),
-    queryTextValue = _useState16[0],
-    setQueryTextValue = _useState16[1];
-  var onInputChange = React.useCallback(function (textValue) {
-    setInputTextValue(textValue);
-    setPage(defaultPage);
-  }, [setInputTextValue, setPage, defaultPage]);
-  React.useEffect(function () {
-    var id = setTimeout(function () {
-      setQueryTextValue(inputTextValue);
-    }, 500);
-    return function () {
-      clearTimeout(id);
-    };
-  }, [inputTextValue, setQueryTextValue]);
-  var queryResource = React.useMemo(function () {
-    return {
-      id: resourceId
-    };
-  }, [resourceId]);
-  var finalQuery = React.useMemo(function () {
-    return _objectSpread(_objectSpread(_objectSpread({}, query), !isEmpty(queryTextValue) ? _defineProperty({}, searchParamName, queryTextValue) : null), {}, {
-      paginated: paginated
-    });
-  }, [queryTextValue, paginated]);
-  var _useResourceItems = data.useResourceItems(queryResource, finalQuery, paginated ? page : null, paginated ? count : null, resourceOptions),
-    _useResourceItems$all = _useResourceItems.allItems,
-    partialItems = _useResourceItems$all === void 0 ? null : _useResourceItems$all,
-    _useResourceItems$rel = _useResourceItems.reload,
-    reload = _useResourceItems$rel === void 0 ? null : _useResourceItems$rel,
-    _useResourceItems$pag = _useResourceItems.pagination,
-    pagination = _useResourceItems$pag === void 0 ? null : _useResourceItems$pag;
-  var _ref3 = pagination || {},
-    _ref3$lastPage = _ref3.lastPage,
-    lastPage = _ref3$lastPage === void 0 ? null : _ref3$lastPage;
-  var items = uniqBy((partialItems || []).concat(multiple && isArray(value) ? value : [value]).filter(function (it) {
-    return it !== null;
-  }), function (_ref4) {
-    var _ref4$id = _ref4.id,
-      id = _ref4$id === void 0 ? null : _ref4$id;
-    return id;
-  });
-  var onScrollEnd = React.useCallback(function () {
-    if (page !== null && page >= lastPage) {
-      return;
-    }
-    if (paginated) {
-      setPage(page + 1);
-    }
-  }, [paginated, page, setPage, lastPage]);
-  var getItemLabel = React.useCallback(function (it, path) {
-    var _ref5 = it || {},
-      _ref5$id = _ref5.id,
-      id = _ref5$id === void 0 ? null : _ref5$id;
-    if (itemLabelWithId) {
-      var label = initialGetItemLabel(it, path);
-      return label ? "".concat(label, " (#").concat(id, ")") : "#".concat(id);
-    }
-    return path !== null ? initialGetItemLabel(it, path) : "#".concat(id);
-  }, [initialGetItemLabel, itemLabelWithId]);
-  var parseItem = React.useCallback(function (it) {
-    var label = getItemLabel(it, itemLabelPath);
-    var description = getItemDescription(it, itemDescriptionPath);
-    var finalLabel = description !== null ? "".concat(label, ": ").concat(description) : label;
-    return {
-      value: it.id,
-      label: finalLabel
-    };
-  }, [getItemLabel, getItemDescription, itemLabelPath, itemDescriptionPath]);
-  var finalValue = multiple && isArray(value) ? value.map(function (_ref6) {
-    var _ref6$id = _ref6.id,
-      id = _ref6$id === void 0 ? null : _ref6$id;
-    return id;
-  }) : (value === null || value === void 0 ? void 0 : value.id) || null;
-  var _ref7 = !multiple && hasValue ? value : {
-      type: resourceType
-    },
-    _ref7$type = _ref7.type,
-    finalType = _ref7$type === void 0 ? null : _ref7$type;
-  var options = (items || []).map(function (it) {
-    return parseItem(it);
-  });
-  var onValueChange = React.useCallback(function (newId) {
-    if (onChange === null) return;
-    if (multiple) {
-      var newValue = items.filter(function (_ref8) {
-        var _ref8$id = _ref8.id,
-          id = _ref8$id === void 0 ? null : _ref8$id;
-        return newId.indexOf(id) !== -1;
-      }) || [];
-      onChange(newValue);
-    } else {
-      var _newValue = items.filter(function (_ref9) {
-        var _ref9$id = _ref9.id,
-          id = _ref9$id === void 0 ? null : _ref9$id;
-        return id === newId;
-      }) || [];
-      if (_newValue !== null && _newValue.length > 0) {
-        onChange(_newValue[0]);
-      } else {
-        onChange(null);
-      }
-    }
-  }, [items, onChange, multiple]);
-  var onOpenForm = React.useCallback(function () {
-    setFormOpen(true);
-  }, [setFormOpen]);
-  var onCloseForm = React.useCallback(function () {
-    setFormOpen(false);
-  }, [setFormOpen]);
-  var onFormSuccess = React.useCallback(function (newValue) {
-    if (onChange === null) return;
-    var finalNewValue = resourceType !== null ? _objectSpread({
-      type: resourceType
-    }, newValue) : newValue;
-    if (multiple) {
-      onChange(isArray(value) ? [].concat(_toConsumableArray(value), [finalNewValue]) : [finalNewValue]);
-    } else {
-      onChange(finalNewValue);
-    }
-    setFormOpen(false);
-  }, [onChange, multiple, value, setFormOpen, resourceType, paginated, initialPage]);
-  var onOpenList = React.useCallback(function () {
-    setListOpen(false); // TODO: fix this
-  }, [setListOpen]);
-  var onCloseList = React.useCallback(function () {
-    setListOpen(false);
-  }, [setListOpen]);
-  var onSelectListItem = React.useCallback(function (newValue) {
-    if (onChange !== null) {
-      onChange(newValue);
-      setListOpen(false);
-    }
-  }, [onChange, setListOpen]);
-
-  // If empty try to fetch
-  // const onFocus = useCallback(() => {
-  //     if ((partialItems || []).length === 0) {
-  //         reloadall();
-  //     }
-  // }, [paginated, reloadall]);
-
-  var onClickRemove = React.useCallback(function () {
-    if (onChange !== null) {
-      onChange(null);
-    }
-
-    // Clear the page and be good
-    if (paginated) {
-      setPage(defaultPage);
-      reload();
-    } else {
-      reload();
-    }
-  }, [onChange, paginated, defaultPage, reload]);
-  var form = formOpen ? /*#__PURE__*/React.createElement(ResourceForm, {
-    resource: resource,
-    type: finalType,
-    item: !multiple ? value : null,
-    onSuccess: onFormSuccess
-  }) : null;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['position-relative', _defineProperty({}, className, className != null)])
-  }, hasValue && !multiple ? /*#__PURE__*/React.createElement("div", {
-    className: "row"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "col-10 flex-grow-1"
-  }, /*#__PURE__*/React.createElement(ResourceCard, {
-    className: "flex-grow-1",
-    item: value,
-    getItemLabel: initialGetItemLabel,
-    getItemDescription: getItemDescription,
-    getItemImage: getItemImage,
-    itemLabelPath: itemLabelPath,
-    itemDescriptionPath: itemDescriptionPath,
-    itemImagePath: itemImagePath,
-    itemLabelWithId: itemLabelWithId,
-    disable: disabled,
-    onClickEdit: canEdit && !multiple ? formOpen ? onCloseForm : onOpenForm : null,
-    onClickRemove: onClickRemove,
-    editButtonLabel: editButtonLabel
-  }))) : /*#__PURE__*/React.createElement("div", {
-    className: "row align-items-center"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "col-8 flex-grow-1"
-  }, /*#__PURE__*/React.createElement(Select, {
-    className: classNames(['py-1', 'shadow-none', _defineProperty(_defineProperty(_defineProperty({}, disabled, disabled), 'is-invalid', errors !== null), inputClassName, inputClassName !== null)]),
-    disabled: disabled,
-    name: name,
-    value: finalValue,
-    options: options,
-    isClearable: true,
-    isSearchable: true,
-    placeholder: utils.isMessage(placeholder) ? intl$1.formatMessage(placeholder) : /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "oc3YLT",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Choose an item"
-      }]
-    }),
-    onChange: onValueChange,
-    onInputChange: onInputChange
-    // onFocus={onFocus}
-    ,
-    onMenuScrollToBottom: onScrollEnd,
-    multiple: multiple
-  })), canFind ? /*#__PURE__*/React.createElement("div", {
-    className: "col-auto"
-  }, /*#__PURE__*/React.createElement(Button, {
-    theme: "primary",
-    icon: findButtonLabel === null ? 'search' : null,
-    onClick: listOpen ? onCloseList : onOpenList,
-    outline: true
-  }, findButtonLabel)) : null, canCreate ? /*#__PURE__*/React.createElement("div", {
-    className: "col-auto"
-  }, /*#__PURE__*/React.createElement(Button, {
-    theme: "primary",
-    icon: createButtonLabel === null ? 'plus-lg' : null,
-    onClick: formOpen ? onCloseForm : onOpenForm,
-    outline: true
-  }, createButtonLabel)) : null), formOpen ? withoutModal ? /*#__PURE__*/React.createElement("div", {
-    className: "card mt-4 p-4"
-  }, form) : /*#__PURE__*/React.createElement(Dialog, {
-    id: resourceId,
-    title: hasValue && !multiple ? /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      values: resourceValues,
-      id: "mCfzkJ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Edit "
-      }, {
-        "type": 1,
-        "value": "a_singular"
-      }]
-    }) : /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      values: resourceValues,
-      id: "6viUpq",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Create "
-      }, {
-        "type": 1,
-        "value": "a_singular"
-      }]
-    }),
-    size: "lg",
-    onClose: onCloseForm
-  }, form) : null, listOpen ? /*#__PURE__*/React.createElement(ResourceItemsModal, {
-    resource: resourceId,
-    onClose: onCloseList,
-    listProps: {
-      actions: ['select'],
-      actionsProps: {
-        onClickSelect: onSelectListItem
-      }
-    }
-  }) : null);
-};
-ResourceItemField.propTypes = propTypes;
-ResourceItemField.defaultProps = defaultProps;
-var ResourceItemField$1 = ResourceItemField;
-
-var definition = {
-  id: 'resource-item',
-  component: 'ResourceItem'
-};
-
-exports.default = ResourceItemField$1;
-exports.definition = definition;