primereact 6.5.0 → 7.0.0-rc.1

package/image/image.esm.js

@@ -0,0 +1,389 @@
+import React, { Component } from 'react';
+import { ZIndexUtils, DomHandler, CSSTransition, classNames, ObjectUtils, Portal } from 'primereact/core';
+
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
+
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = function _typeof(obj) {
+      return typeof obj;
+    };
+  } else {
+    _typeof = function _typeof(obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    };
+  }
+
+  return _typeof(obj);
+}
+
+function _possibleConstructorReturn(self, call) {
+  if (call && (_typeof(call) === "object" || typeof call === "function")) {
+    return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
+  }
+
+  return _assertThisInitialized(self);
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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 Image = /*#__PURE__*/function (_Component) {
+  _inherits(Image, _Component);
+
+  var _super = _createSuper(Image);
+
+  function Image(props) {
+    var _this;
+
+    _classCallCheck(this, Image);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      maskVisible: false,
+      previewVisible: false,
+      rotate: 0,
+      scale: 1
+    };
+    _this.onImageClick = _this.onImageClick.bind(_assertThisInitialized(_this));
+    _this.onMaskClick = _this.onMaskClick.bind(_assertThisInitialized(_this));
+    _this.rotateRight = _this.rotateRight.bind(_assertThisInitialized(_this));
+    _this.rotateLeft = _this.rotateLeft.bind(_assertThisInitialized(_this));
+    _this.zoomIn = _this.zoomIn.bind(_assertThisInitialized(_this));
+    _this.zoomOut = _this.zoomOut.bind(_assertThisInitialized(_this));
+    _this.onEntering = _this.onEntering.bind(_assertThisInitialized(_this));
+    _this.onEntered = _this.onEntered.bind(_assertThisInitialized(_this));
+    _this.onPreviewImageClick = _this.onPreviewImageClick.bind(_assertThisInitialized(_this));
+    _this.onExit = _this.onExit.bind(_assertThisInitialized(_this));
+    _this.onExiting = _this.onExiting.bind(_assertThisInitialized(_this));
+    _this.onExited = _this.onExited.bind(_assertThisInitialized(_this));
+    _this.previewRef = /*#__PURE__*/React.createRef();
+    return _this;
+  }
+
+  _createClass(Image, [{
+    key: "onImageClick",
+    value: function onImageClick() {
+      var _this2 = this;
+
+      if (this.props.preview) {
+        this.setState({
+          maskVisible: true
+        });
+        setTimeout(function () {
+          _this2.setState({
+            previewVisible: true
+          });
+        }, 25);
+      }
+    }
+  }, {
+    key: "onPreviewImageClick",
+    value: function onPreviewImageClick() {
+      this.previewClick = true;
+    }
+  }, {
+    key: "onMaskClick",
+    value: function onMaskClick() {
+      if (!this.previewClick) {
+        this.setState({
+          previewVisible: false
+        });
+        this.setState({
+          rotate: 0
+        });
+        this.setState({
+          scale: 1
+        });
+      }
+
+      this.previewClick = false;
+    }
+  }, {
+    key: "rotateRight",
+    value: function rotateRight() {
+      this.setState(function (prevState) {
+        return {
+          rotate: prevState.rotate + 90
+        };
+      });
+      this.previewClick = true;
+    }
+  }, {
+    key: "rotateLeft",
+    value: function rotateLeft() {
+      this.setState(function (prevState) {
+        return {
+          rotate: prevState.rotate - 90
+        };
+      });
+      this.previewClick = true;
+    }
+  }, {
+    key: "zoomIn",
+    value: function zoomIn() {
+      this.setState(function (prevState) {
+        return {
+          scale: prevState.scale + 0.1
+        };
+      });
+      this.previewClick = true;
+    }
+  }, {
+    key: "zoomOut",
+    value: function zoomOut() {
+      this.setState(function (prevState) {
+        return {
+          scale: prevState.scale - 0.1
+        };
+      });
+      this.previewClick = true;
+    }
+  }, {
+    key: "onEntering",
+    value: function onEntering() {
+      ZIndexUtils.set('modal', this.mask);
+    }
+  }, {
+    key: "onEntered",
+    value: function onEntered() {
+      if (this.props.onShow) {
+        this.props.onShow();
+      }
+    }
+  }, {
+    key: "onExit",
+    value: function onExit() {
+      DomHandler.addClass(this.mask, 'p-component-overlay-leave');
+    }
+  }, {
+    key: "onExiting",
+    value: function onExiting() {
+      if (this.props.onHide) {
+        this.props.onHide();
+      }
+    }
+  }, {
+    key: "onExited",
+    value: function onExited(el) {
+      ZIndexUtils.clear(el);
+      this.setState({
+        maskVisible: false
+      });
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.mask) {
+        ZIndexUtils.clear(this.container);
+      }
+    }
+  }, {
+    key: "renderElement",
+    value: function renderElement() {
+      var _this3 = this;
+
+      var imagePreviewStyle = {
+        transform: 'rotate(' + this.state.rotate + 'deg) scale(' + this.state.scale + ')'
+      };
+      var zoomDisabled = this.state.scale <= 0.5 || this.state.scale >= 1.5; // const rotateClassName = 'p-image-preview-rotate-' + this.state.rotate;
+
+      return /*#__PURE__*/React.createElement("div", {
+        ref: function ref(el) {
+          return _this3.mask = el;
+        },
+        className: "p-image-mask p-component-overlay p-component-overlay-enter",
+        onClick: this.onMaskClick
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "p-image-toolbar"
+      }, /*#__PURE__*/React.createElement("button", {
+        className: "p-image-action p-link",
+        onClick: this.rotateRight,
+        type: "button"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "pi pi-refresh"
+      })), /*#__PURE__*/React.createElement("button", {
+        className: "p-image-action p-link",
+        onClick: this.rotateLeft,
+        type: "button"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "pi pi-undo"
+      })), /*#__PURE__*/React.createElement("button", {
+        className: "p-image-action p-link",
+        onClick: this.zoomOut,
+        type: "button",
+        disabled: zoomDisabled
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "pi pi-search-minus"
+      })), /*#__PURE__*/React.createElement("button", {
+        className: "p-image-action p-link",
+        onClick: this.zoomIn,
+        type: "button",
+        disabled: zoomDisabled
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "pi pi-search-plus"
+      })), /*#__PURE__*/React.createElement("button", {
+        className: "p-image-action p-link",
+        type: "button",
+        onClick: this.hidePreview
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "pi pi-times"
+      }))), /*#__PURE__*/React.createElement(CSSTransition, {
+        nodeRef: this.previewRef,
+        classNames: "p-image-preview",
+        in: this.state.previewVisible,
+        timeout: {
+          enter: 150,
+          exit: 150
+        },
+        unmountOnExit: true,
+        onEntering: this.onEntering,
+        onEntered: this.onEntered,
+        onExit: this.onExit,
+        onExiting: this.onExiting,
+        onExited: this.onExited
+      }, /*#__PURE__*/React.createElement("div", {
+        ref: this.previewRef
+      }, /*#__PURE__*/React.createElement("img", {
+        src: this.props.src,
+        className: "p-image-preview",
+        style: imagePreviewStyle,
+        onClick: this.onPreviewImageClick,
+        alt: this.props.alt
+      }))));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+
+      var containerClassName = classNames('p-image p-component', this.props.className, {
+        'p-image-preview-container': this.props.preview
+      });
+      var element = this.renderElement();
+      var content = this.props.template ? ObjectUtils.getJSXElement(this.props.template, this.props) : /*#__PURE__*/React.createElement("i", {
+        className: "p-image-preview-icon pi pi-eye"
+      });
+      var _this$props = this.props,
+          src = _this$props.src,
+          alt = _this$props.alt,
+          width = _this$props.width,
+          height = _this$props.height;
+      return /*#__PURE__*/React.createElement("span", {
+        ref: function ref(el) {
+          return _this4.container = el;
+        },
+        className: containerClassName,
+        style: this.props.style
+      }, /*#__PURE__*/React.createElement("img", {
+        src: src,
+        className: this.props.imageClassName,
+        width: width,
+        height: height,
+        style: this.props.imageStyle,
+        alt: alt
+      }), this.props.preview && /*#__PURE__*/React.createElement("div", {
+        className: "p-image-preview-indicator",
+        onClick: this.onImageClick
+      }, content), this.state.maskVisible && /*#__PURE__*/React.createElement(Portal, {
+        element: element,
+        appendTo: document.body
+      }));
+    }
+  }]);
+
+  return Image;
+}(Component);
+
+_defineProperty(Image, "defaultProps", {
+  preview: false,
+  className: null,
+  style: null,
+  imageStyle: null,
+  imageClassName: null,
+  template: null,
+  src: null,
+  alt: null,
+  width: null,
+  height: null
+});
+
+export { Image };

package/image/image.esm.min.js

@@ -0,0 +1 @@
+import e,{Component as t}from"react";import{ZIndexUtils as i,DomHandler as n,CSSTransition as o,classNames as r,ObjectUtils as a,Portal as s}from"primereact/core";function l(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function c(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function p(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function u(e,t){return(u=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function m(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&u(e,t)}function f(e){return(f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function h(e,t){if(t&&("object"===f(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return p(e)}function v(e){return(v=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function y(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}var b,d,k,E=function(u){m(w,t);var f,b,d,k,E,g=(f=w,b=y(),function(){var e,t=v(f);if(b){var i=v(this).constructor;e=Reflect.construct(t,arguments,i)}else e=t.apply(this,arguments);return h(this,e)});function w(t){var i;return l(this,w),(i=g.call(this,t)).state={maskVisible:!1,previewVisible:!1,rotate:0,scale:1},i.onImageClick=i.onImageClick.bind(p(i)),i.onMaskClick=i.onMaskClick.bind(p(i)),i.rotateRight=i.rotateRight.bind(p(i)),i.rotateLeft=i.rotateLeft.bind(p(i)),i.zoomIn=i.zoomIn.bind(p(i)),i.zoomOut=i.zoomOut.bind(p(i)),i.onEntering=i.onEntering.bind(p(i)),i.onEntered=i.onEntered.bind(p(i)),i.onPreviewImageClick=i.onPreviewImageClick.bind(p(i)),i.onExit=i.onExit.bind(p(i)),i.onExiting=i.onExiting.bind(p(i)),i.onExited=i.onExited.bind(p(i)),i.previewRef=e.createRef(),i}return d=w,(k=[{key:"onImageClick",value:function(){var e=this;this.props.preview&&(this.setState({maskVisible:!0}),setTimeout((function(){e.setState({previewVisible:!0})}),25))}},{key:"onPreviewImageClick",value:function(){this.previewClick=!0}},{key:"onMaskClick",value:function(){this.previewClick||(this.setState({previewVisible:!1}),this.setState({rotate:0}),this.setState({scale:1})),this.previewClick=!1}},{key:"rotateRight",value:function(){this.setState((function(e){return{rotate:e.rotate+90}})),this.previewClick=!0}},{key:"rotateLeft",value:function(){this.setState((function(e){return{rotate:e.rotate-90}})),this.previewClick=!0}},{key:"zoomIn",value:function(){this.setState((function(e){return{scale:e.scale+.1}})),this.previewClick=!0}},{key:"zoomOut",value:function(){this.setState((function(e){return{scale:e.scale-.1}})),this.previewClick=!0}},{key:"onEntering",value:function(){i.set("modal",this.mask)}},{key:"onEntered",value:function(){this.props.onShow&&this.props.onShow()}},{key:"onExit",value:function(){n.addClass(this.mask,"p-component-overlay-leave")}},{key:"onExiting",value:function(){this.props.onHide&&this.props.onHide()}},{key:"onExited",value:function(e){i.clear(e),this.setState({maskVisible:!1})}},{key:"componentWillUnmount",value:function(){this.mask&&i.clear(this.container)}},{key:"renderElement",value:function(){var t=this,i={transform:"rotate("+this.state.rotate+"deg) scale("+this.state.scale+")"},n=this.state.scale<=.5||this.state.scale>=1.5;return e.createElement("div",{ref:function(e){return t.mask=e},className:"p-image-mask p-component-overlay p-component-overlay-enter",onClick:this.onMaskClick},e.createElement("div",{className:"p-image-toolbar"},e.createElement("button",{className:"p-image-action p-link",onClick:this.rotateRight,type:"button"},e.createElement("i",{className:"pi pi-refresh"})),e.createElement("button",{className:"p-image-action p-link",onClick:this.rotateLeft,type:"button"},e.createElement("i",{className:"pi pi-undo"})),e.createElement("button",{className:"p-image-action p-link",onClick:this.zoomOut,type:"button",disabled:n},e.createElement("i",{className:"pi pi-search-minus"})),e.createElement("button",{className:"p-image-action p-link",onClick:this.zoomIn,type:"button",disabled:n},e.createElement("i",{className:"pi pi-search-plus"})),e.createElement("button",{className:"p-image-action p-link",type:"button",onClick:this.hidePreview},e.createElement("i",{className:"pi pi-times"}))),e.createElement(o,{nodeRef:this.previewRef,classNames:"p-image-preview",in:this.state.previewVisible,timeout:{enter:150,exit:150},unmountOnExit:!0,onEntering:this.onEntering,onEntered:this.onEntered,onExit:this.onExit,onExiting:this.onExiting,onExited:this.onExited},e.createElement("div",{ref:this.previewRef},e.createElement("img",{src:this.props.src,className:"p-image-preview",style:i,onClick:this.onPreviewImageClick,alt:this.props.alt}))))}},{key:"render",value:function(){var t=this,i=r("p-image p-component",this.props.className,{"p-image-preview-container":this.props.preview}),n=this.renderElement(),o=this.props.template?a.getJSXElement(this.props.template,this.props):e.createElement("i",{className:"p-image-preview-icon pi pi-eye"}),l=this.props;return e.createElement("span",{ref:function(e){return t.container=e},className:i,style:this.props.style},e.createElement("img",{src:l.src,className:this.props.imageClassName,width:l.width,height:l.height,style:this.props.imageStyle,alt:l.alt}),this.props.preview&&e.createElement("div",{className:"p-image-preview-indicator",onClick:this.onImageClick},o),this.state.maskVisible&&e.createElement(s,{element:n,appendTo:document.body}))}}])&&c(d.prototype,k),E&&c(d,E),w}();k={preview:!1,className:null,style:null,imageStyle:null,imageClassName:null,template:null,src:null,alt:null,width:null,height:null},(d="defaultProps")in(b=E)?Object.defineProperty(b,d,{value:k,enumerable:!0,configurable:!0,writable:!0}):b[d]=k;export{E as Image};