react-cropper - npm Package Compare versions

Comparing version 0.1.8 to 0.2.0

dist/react-cropper.js

 'use strict';
 
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var React = require('react');
-var $ = require('jquery');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _jquery = require('jquery');
+
+var _jquery2 = _interopRequireDefault(_jquery);
+
 require('cropper');
+
 require('cropper/dist/cropper.css');
 
-var Cropper = React.createClass({
+var Cropper = _react2['default'].createClass({
   displayName: 'Cropper',
@@ -16,37 +28,37 @@
     // react cropper options
-    src: React.PropTypes.string,
+    src: _react2['default'].PropTypes.string,
 
     // cropper options
-    aspectRatio: React.PropTypes.number,
-    crop: React.PropTypes.func,
-    preview: React.PropTypes.string,
-    strict: React.PropTypes.bool,
-    responsive: React.PropTypes.bool,
-    checkImageOrigin: React.PropTypes.bool,
-    background: React.PropTypes.bool,
-    modal: React.PropTypes.bool,
-    guides: React.PropTypes.bool,
-    highlight: React.PropTypes.bool,
-    autoCrop: React.PropTypes.bool,
-    autoCropArea: React.PropTypes.number,
-    dragCrop: React.PropTypes.bool,
-    movable: React.PropTypes.bool,
-    resizable: React.PropTypes.bool,
-    zoomable: React.PropTypes.bool,
-    mouseWheelZoom: React.PropTypes.bool,
-    touchDragZoom: React.PropTypes.bool,
-    rotatable: React.PropTypes.bool,
-    minContainerWidth: React.PropTypes.number,
-    minContainerHeight: React.PropTypes.number,
-    minCanvasWidth: React.PropTypes.number,
-    minCanvasHeight: React.PropTypes.number,
-    minCropBoxWidth: React.PropTypes.number,
-    minCropBoxHeight: React.PropTypes.number,
-    build: React.PropTypes.func,
-    built: React.PropTypes.func,
-    dragstart: React.PropTypes.func,
-    dragmove: React.PropTypes.func,
-    dragend: React.PropTypes.func,
-    zoomin: React.PropTypes.func,
-    zoomout: React.PropTypes.func
+    aspectRatio: _react2['default'].PropTypes.number,
+    crop: _react2['default'].PropTypes.func,
+    preview: _react2['default'].PropTypes.string,
+    strict: _react2['default'].PropTypes.bool,
+    responsive: _react2['default'].PropTypes.bool,
+    checkImageOrigin: _react2['default'].PropTypes.bool,
+    background: _react2['default'].PropTypes.bool,
+    modal: _react2['default'].PropTypes.bool,
+    guides: _react2['default'].PropTypes.bool,
+    highlight: _react2['default'].PropTypes.bool,
+    autoCrop: _react2['default'].PropTypes.bool,
+    autoCropArea: _react2['default'].PropTypes.number,
+    dragCrop: _react2['default'].PropTypes.bool,
+    movable: _react2['default'].PropTypes.bool,
+    resizable: _react2['default'].PropTypes.bool,
+    zoomable: _react2['default'].PropTypes.bool,
+    mouseWheelZoom: _react2['default'].PropTypes.bool,
+    touchDragZoom: _react2['default'].PropTypes.bool,
+    rotatable: _react2['default'].PropTypes.bool,
+    minContainerWidth: _react2['default'].PropTypes.number,
+    minContainerHeight: _react2['default'].PropTypes.number,
+    minCanvasWidth: _react2['default'].PropTypes.number,
+    minCanvasHeight: _react2['default'].PropTypes.number,
+    minCropBoxWidth: _react2['default'].PropTypes.number,
+    minCropBoxHeight: _react2['default'].PropTypes.number,
+    build: _react2['default'].PropTypes.func,
+    built: _react2['default'].PropTypes.func,
+    dragstart: _react2['default'].PropTypes.func,
+    dragmove: _react2['default'].PropTypes.func,
+    dragend: _react2['default'].PropTypes.func,
+    zoomin: _react2['default'].PropTypes.func,
+    zoomout: _react2['default'].PropTypes.func
   },
@@ -61,5 +73,10 @@
   componentDidMount: function componentDidMount() {
-    this.$img = $(React.findDOMNode(this.refs.img));
-
-    this.$img.cropper(this.props);
+    var options = {};
+    for (var prop in this.props) {
+      if (prop !== 'src') {
+        options[prop] = this.props[prop];
+      }
+    }
+    this.$img = (0, _jquery2['default'])(_react2['default'].findDOMNode(this.refs.img));
+    this.$img.cropper(options);
   },
@@ -162,6 +179,6 @@
   render: function render() {
-    return React.createElement(
+    return _react2['default'].createElement(
       'div',
       _extends({}, this.props, { src: null }),
-      React.createElement('img', {
+      _react2['default'].createElement('img', {
         crossOrigin: 'anonymous',
@@ -171,3 +188,3 @@ ref: 'img',
         alt: 'picture',
-        style: { display: 'none' }
+        style: { opacity: 0 }
       })
@@ -178,2 +195,3 @@ );
 
-module.exports = Cropper;
+exports['default'] = Cropper;
+module.exports = exports['default'];

package.json

 {
   "name": "react-cropper",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "description": "",
@@ -8,7 +8,7 @@ "main": "dist/react-cropper.js",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "lint": "grunt eslint",
-    "build": "grunt babel",
+    "lint": "eslint ./",
+    "build": " babel src/react-cropper.js --out-file dist/react-cropper.js",
     "prepublish": "npm run build",
     "prebuild": "npm run lint",
-    "example": "webpack example/index.jsx --config example/webpack.config.js --output-path example/assets"
+    "build-example": "npm run build && webpack example/index.js --config example/webpack.config.js --output-path example/assets"
   },
@@ -32,4 +32,3 @@ "author": "Fong Kuanghuei <[e-mail]>",
   "dependencies": {
-    "cropper": "^0.9.3",
-    "jquery": "^1.11.3 || ^2.1.4"
+    "cropper": "^0.9.3"
   },
@@ -41,14 +40,10 @@ "peerDependencies": {
   "devDependencies": {
-    "babel-core": "^5.2.15",
+    "babel": "^5.6.2",
+    "babel-eslint": "^3.1.17",
     "babel-loader": "^5.0.0",
     "css-loader": "^0.12.0",
     "eslint": "^0.23.0",
+    "eslint-plugin-babel": "^1.0.0",
     "eslint-plugin-react": "^2.2.0",
-    "extract-text-webpack-plugin": "^0.7.1",
-    "grunt": "^0.4.5",
-    "grunt-babel": "^5.0.0",
-    "grunt-release": "^0.12.0",
-    "gruntify-eslint": "^0.1.0",
-    "load-grunt-tasks": "^3.1.0",
-    "react": ">= 0.12.0",
+    "extract-text-webpack-plugin": "^0.8.2",
     "style-loader": "^0.12.1",
@@ -55,0 +50,0 @@ "webpack": "^1.8.11"

README.md

@@ -1,7 +0,7 @@
-# [react-cropper](http://roadmanfong.github.io/react-cropper/)
+# react-cropper
 
+[Cropper](https://github.com/fengyuanchen/cropper) as React components
+
 [![NPM](https://nodei.co/npm/react-cropper.png)](https://www.npmjs.com/package/react-cropper)
 
-[Cropper](https://github.com/fengyuanchen/cropper) as React components
-
 [Demo](http://roadmanfong.github.io/react-cropper/example/)
@@ -42,2 +42,10 @@
 
+If you are using `gulp`, `browserify` or other build tools, make sure you enable `global` option `true`
+
+For example in `gulp` you should do
+
+```js
+b.transform(browserifycss, {global: true});
+```
+
 ## Todo
@@ -44,0 +52,0 @@ * Unit test

No alert changes

Improved metrics

Total package byte prevSize

59647

433.8%

Dependency count

3

-25%

Dev dependency count

10

-28.57%

Number of package files

10

42.86%

Lines of code

155

9.15%

Number of lines in readme file

149

5.67%

Dependency changes

• - Removed

  jquery@^1.11.3 || ^2.1.4