@plusscommunities/pluss-core-web 1.4.12 → 1.4.14-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.cjs.js +105 -57
  2. package/dist/index.esm.js +104 -56
  3. package/dist/index.umd.js +108 -60
  4. package/package.json +2 -2
  5. package/src/components/FileInput.js +40 -28
  6. package/src/components/ImageInput.js +73 -63
  7. package/src/components/svg-icons.json +4 -0
package/dist/index.cjs.js CHANGED
@@ -23,13 +23,13 @@ var _extends = require('@babel/runtime/helpers/extends');
23
23
  var _assertThisInitialized = require('@babel/runtime/helpers/assertThisInitialized');
24
24
  var reactRedux = require('react-redux');
25
25
  var Textarea = require('react-textarea-autosize');
26
+ var _typeof = require('@babel/runtime/helpers/typeof');
26
27
  var Dropzone = require('react-dropzone');
27
28
  var reactRouter = require('react-router');
28
29
  var reactBootstrap = require('react-bootstrap');
29
30
  var reactLottie = require('@crello/react-lottie');
30
31
  var reactCsv = require('react-csv');
31
32
  var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
32
- var _typeof = require('@babel/runtime/helpers/typeof');
33
33
  var reactColor = require('react-color');
34
34
  var tinycolor = require('tinycolor2');
35
35
 
@@ -54,9 +54,9 @@ var FontAwesome__default = /*#__PURE__*/_interopDefaultLegacy(FontAwesome);
54
54
  var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
55
55
  var _assertThisInitialized__default = /*#__PURE__*/_interopDefaultLegacy(_assertThisInitialized);
56
56
  var Textarea__default = /*#__PURE__*/_interopDefaultLegacy(Textarea);
57
+ var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
57
58
  var Dropzone__default = /*#__PURE__*/_interopDefaultLegacy(Dropzone);
58
59
  var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
59
- var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
60
60
  var tinycolor__default = /*#__PURE__*/_interopDefaultLegacy(tinycolor);
61
61
 
62
62
  var CoreConfig = {
@@ -3222,6 +3222,12 @@ var close = {
3222
3222
  "M998.793 998.775c33.331-33.323 33.835-87.859 0.512-121.182l-365.579-365.557 365.613-365.586c33.323-33.324 32.811-87.859-0.512-121.183s-87.868-33.831-121.19-0.507l-365.609 365.586-365.629-365.606c-33.326-33.324-87.865-32.816-121.191 0.508s-33.833 87.86-0.507 121.183l365.629 365.606-365.597 365.574c-33.326 33.323-32.818 87.859 0.508 121.182s87.865 33.835 121.191 0.512l365.597-365.577 365.575 365.551c33.331 33.323 87.868 32.819 121.19-0.503z"
3223
3223
  ]
3224
3224
  };
3225
+ var check = {
3226
+ viewBox: "0 0 512 512",
3227
+ paths: [
3228
+ "M432 56l-240 240-112-112-80 80 192 192 320-320z"
3229
+ ]
3230
+ };
3225
3231
  var contractor = {
3226
3232
  viewBox: "0 0 512 512",
3227
3233
  paths: [
@@ -4009,6 +4015,7 @@ var pluss_new = {
4009
4015
  };
4010
4016
  var icons = {
4011
4017
  close: close,
4018
+ check: check,
4012
4019
  contractor: contractor,
4013
4020
  line_events: line_events,
4014
4021
  line_facilities: line_facilities,
@@ -5190,6 +5197,20 @@ var FileInputComponent = /*#__PURE__*/function (_Component) {
5190
5197
  }]
5191
5198
  });
5192
5199
 
5200
+ _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getAccept", function () {
5201
+ if (_typeof__default['default'](_this.props.accept) === 'object') {
5202
+ return _this.props.accept;
5203
+ }
5204
+
5205
+ if (typeof _this.props.accept === 'string') {
5206
+ var accept = _defineProperty__default['default']({}, _this.props.accept, [".".concat(___default['default'].last(_this.props.accept.split('/')))]);
5207
+
5208
+ return accept;
5209
+ }
5210
+
5211
+ return null;
5212
+ });
5213
+
5193
5214
  _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "checkRefreshCallback", function (inputs) {
5194
5215
  if (___default['default'].isUndefined(_this.props.refreshCallback)) {
5195
5216
  return;
@@ -5457,19 +5478,23 @@ var FileInputComponent = /*#__PURE__*/function (_Component) {
5457
5478
  alt: "file"
5458
5479
  }), /*#__PURE__*/React__default['default'].createElement("p", {
5459
5480
  className: "imageInput_text"
5460
- }, getFileName(input.value))), !_this3.props.multiple && /*#__PURE__*/React__default['default'].createElement(Dropzone__default['default'], {
5461
- accept: _this3.props.accept,
5481
+ }, getFileName(input.value))), /*#__PURE__*/React__default['default'].createElement(Dropzone__default['default'], {
5482
+ accept: _this3.getAccept(),
5462
5483
  onDrop: function onDrop(files) {
5463
5484
  return _this3.onDrop(files, true);
5464
- },
5465
- style: {
5466
- padding: 10
5467
5485
  }
5468
- }, /*#__PURE__*/React__default['default'].createElement(Button, {
5469
- buttonType: "secondary",
5470
- className: "imageInput_button",
5471
- disabled: true
5472
- }, "Change file")));
5486
+ }, function (_ref2) {
5487
+ var getRootProps = _ref2.getRootProps;
5488
+ return /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({
5489
+ style: {
5490
+ padding: 10
5491
+ }
5492
+ }, getRootProps()), /*#__PURE__*/React__default['default'].createElement(Button, {
5493
+ buttonType: "secondary",
5494
+ className: "imageInput_button",
5495
+ disabled: true
5496
+ }, "Change file"));
5497
+ }));
5473
5498
  }
5474
5499
 
5475
5500
  return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -5507,14 +5532,15 @@ var FileInputComponent = /*#__PURE__*/function (_Component) {
5507
5532
  className: this.getClassNames(input, inputsLength),
5508
5533
  style: _objectSpread$f({}, this.props.style)
5509
5534
  }, /*#__PURE__*/React__default['default'].createElement(Dropzone__default['default'], {
5510
- className: "imageInput_upload ".concat(this.getErrorState()),
5511
- accept: this.props.accept,
5512
- onDrop: this.onDrop,
5513
- style: _objectSpread$f({}, this.props.style)
5514
- }, function (_ref2) {
5515
- var isDragActive = _ref2.isDragActive;
5516
- _ref2.isDragReject;
5517
- return /*#__PURE__*/React__default['default'].createElement("div", {
5535
+ accept: this.getAccept(),
5536
+ onDrop: this.onDrop
5537
+ }, function (_ref3) {
5538
+ var getRootProps = _ref3.getRootProps,
5539
+ isDragActive = _ref3.isDragActive;
5540
+ return /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({
5541
+ className: "imageInput_upload ".concat(_this3.getErrorState()),
5542
+ style: _objectSpread$f({}, _this3.props.style)
5543
+ }, getRootProps()), /*#__PURE__*/React__default['default'].createElement("div", {
5518
5544
  className: "".concat(isDragActive ? 'imageInput_dropZoneActive' : '')
5519
5545
  }, !_this3.props.simpleStyle && /*#__PURE__*/React__default['default'].createElement("img", {
5520
5546
  src: "https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg",
@@ -5526,7 +5552,7 @@ var FileInputComponent = /*#__PURE__*/function (_Component) {
5526
5552
  buttonType: "secondary",
5527
5553
  className: "imageInput_button",
5528
5554
  disabled: true
5529
- }, _this3.props.multiple ? "Upload files" : "Upload a file"));
5555
+ }, _this3.props.multiple ? "Upload files" : "Upload a file")));
5530
5556
  }), /*#__PURE__*/React__default['default'].createElement("div", {
5531
5557
  className: "imageInput_uploading",
5532
5558
  style: _objectSpread$f({}, this.props.style)
@@ -6360,6 +6386,18 @@ var ImageInputComponent = /*#__PURE__*/function (_Component) {
6360
6386
  saveErrorMessage: ''
6361
6387
  });
6362
6388
 
6389
+ _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getAccept", function () {
6390
+ var accept = {
6391
+ 'image/*': ['.jpeg', '.png']
6392
+ };
6393
+
6394
+ if (_this.props.allowVideo) {
6395
+ accept['video/*'] = ['.mp4'];
6396
+ }
6397
+
6398
+ return accept;
6399
+ });
6400
+
6363
6401
  _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "refreshFolders", /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
6364
6402
  var res;
6365
6403
  return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
@@ -7146,16 +7184,20 @@ var ImageInputComponent = /*#__PURE__*/function (_Component) {
7146
7184
  style: _objectSpread$a(_objectSpread$a({}, _this6.getImageStyle(input.displayValue)), _this6.props.style)
7147
7185
  }, /*#__PURE__*/React__default['default'].createElement(Dropzone__default['default'], {
7148
7186
  disabled: _this6.props.disabled,
7149
- accept: "image/jpeg, image/png".concat(_this6.props.allowVideo ? ', video/*' : ''),
7187
+ accept: _this6.getAccept(),
7150
7188
  onDrop: function onDrop(files) {
7151
7189
  return _this6.onDrop(files, true);
7152
- },
7153
- className: "imageInput_buttonContainer-simple"
7154
- }, /*#__PURE__*/React__default['default'].createElement(Button, {
7155
- buttonType: "secondary",
7156
- className: "imageInput_button imageInput_button-simple",
7157
- disabled: true
7158
- }, "Change image"))));
7190
+ }
7191
+ }, function (_ref8) {
7192
+ var getRootProps = _ref8.getRootProps;
7193
+ return /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({
7194
+ className: "imageInput_buttonContainer-simple"
7195
+ }, getRootProps()), /*#__PURE__*/React__default['default'].createElement(Button, {
7196
+ buttonType: "secondary",
7197
+ className: "imageInput_button imageInput_button-simple",
7198
+ disabled: true
7199
+ }, "Change image"));
7200
+ })));
7159
7201
  }
7160
7202
 
7161
7203
  return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -7196,14 +7238,15 @@ var ImageInputComponent = /*#__PURE__*/function (_Component) {
7196
7238
  style: _objectSpread$a({}, this.props.style)
7197
7239
  }, /*#__PURE__*/React__default['default'].createElement(Dropzone__default['default'], {
7198
7240
  disabled: this.props.disabled,
7199
- className: "imageInput_upload ".concat(this.getErrorState()),
7200
- accept: "image/jpeg, image/png".concat(this.props.allowVideo ? ', video/*' : ''),
7201
- onDrop: this.onDrop,
7202
- style: _objectSpread$a({}, this.props.style)
7203
- }, function (_ref8) {
7204
- var isDragActive = _ref8.isDragActive;
7205
- _ref8.isDragReject;
7206
- return /*#__PURE__*/React__default['default'].createElement("div", {
7241
+ accept: this.getAccept(),
7242
+ onDrop: this.onDrop
7243
+ }, function (_ref9) {
7244
+ var getRootProps = _ref9.getRootProps,
7245
+ isDragActive = _ref9.isDragActive;
7246
+ return /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({
7247
+ style: _objectSpread$a({}, _this6.props.style),
7248
+ className: "imageInput_upload ".concat(_this6.getErrorState())
7249
+ }, getRootProps()), /*#__PURE__*/React__default['default'].createElement("div", {
7207
7250
  className: "".concat(isDragActive ? 'imageInput_dropZoneActive' : '', " ").concat(_this6.props.horizontalText ? ' imageInput_horizontalText' : '')
7208
7251
  }, !_this6.props.simpleStyle && /*#__PURE__*/React__default['default'].createElement("img", {
7209
7252
  src: "https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg",
@@ -7215,7 +7258,7 @@ var ImageInputComponent = /*#__PURE__*/function (_Component) {
7215
7258
  buttonType: "secondary",
7216
7259
  className: "imageInput_button",
7217
7260
  disabled: true
7218
- }, _this6.props.multiple ? "Upload ".concat(mediaText) : "Upload an ".concat(mediaText)));
7261
+ }, _this6.props.multiple ? "Upload ".concat(mediaText) : "Upload an ".concat(mediaText))));
7219
7262
  }), /*#__PURE__*/React__default['default'].createElement("div", {
7220
7263
  className: "imageInput_uploading",
7221
7264
  style: _objectSpread$a({}, this.props.style)
@@ -7442,18 +7485,19 @@ var ImageInputComponent = /*#__PURE__*/function (_Component) {
7442
7485
  return _this12.renderLibraryImage(image, index);
7443
7486
  }) : /*#__PURE__*/React__default['default'].createElement("div", null, this.canAddImageToLibrary() && /*#__PURE__*/React__default['default'].createElement(Dropzone__default['default'], {
7444
7487
  disabled: this.props.disabled,
7445
- className: "imageInput_upload folder ".concat(this.getErrorState()),
7446
- accept: "image/jpeg, image/png".concat(this.props.allowVideo ? ', video/*' : ''),
7488
+ accept: this.getAccept(),
7447
7489
  onDrop: function onDrop(files) {
7448
7490
  return _this12.onDrop(files, true);
7449
- },
7450
- style: {
7451
- padding: '15px'
7452
7491
  }
7453
- }, function (_ref9) {
7454
- var isDragActive = _ref9.isDragActive;
7455
- _ref9.isDragReject;
7456
- return /*#__PURE__*/React__default['default'].createElement("div", {
7492
+ }, function (_ref10) {
7493
+ var getRootProps = _ref10.getRootProps,
7494
+ isDragActive = _ref10.isDragActive;
7495
+ return /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({
7496
+ style: {
7497
+ padding: '15px'
7498
+ },
7499
+ className: "imageInput_upload folder ".concat(_this12.getErrorState())
7500
+ }, getRootProps()), /*#__PURE__*/React__default['default'].createElement("div", {
7457
7501
  className: isDragActive ? 'imageInput_dropZoneActive' : ''
7458
7502
  }, /*#__PURE__*/React__default['default'].createElement("img", {
7459
7503
  src: "https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg",
@@ -7465,7 +7509,7 @@ var ImageInputComponent = /*#__PURE__*/function (_Component) {
7465
7509
  buttonType: "secondary",
7466
7510
  className: "imageInput_button",
7467
7511
  disabled: true
7468
- }, _this12.props.multiple ? "Upload ".concat(mediaText) : "Upload an ".concat(mediaText)));
7512
+ }, _this12.props.multiple ? "Upload ".concat(mediaText) : "Upload an ".concat(mediaText))));
7469
7513
  }), this.state.selectedFolder.parsedImages.map(function (image, index) {
7470
7514
  return _this12.renderLibraryImage(image, index, canDelete);
7471
7515
  }), !___default['default'].isNil(uploadingImages) && uploadingImages.map(function (input, index) {
@@ -7543,17 +7587,21 @@ var ImageInputComponent = /*#__PURE__*/function (_Component) {
7543
7587
  className: "imageInputRight"
7544
7588
  }, /*#__PURE__*/React__default['default'].createElement(Dropzone__default['default'], {
7545
7589
  disabled: this.props.disabled,
7546
- accept: "image/jpeg, image/png".concat(this.props.allowVideo ? ', video/*' : ''),
7590
+ accept: this.getAccept(),
7547
7591
  onDrop: function onDrop(files) {
7548
7592
  return _this15.onDrop(files, true);
7549
- },
7550
- className: "imageInputRight_button"
7551
- }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
7552
- className: "imageInputRight_button_icon",
7553
- name: "plus-circle"
7554
- }), /*#__PURE__*/React__default['default'].createElement("p", {
7555
- className: "imageInputRight_button_text"
7556
- }, "Upload File")), /*#__PURE__*/React__default['default'].createElement("div", {
7593
+ }
7594
+ }, function (_ref11) {
7595
+ var getRootProps = _ref11.getRootProps;
7596
+ return /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({}, getRootProps(), {
7597
+ className: "imageInputRight_button"
7598
+ }), /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
7599
+ className: "imageInputRight_button_icon",
7600
+ name: "plus-circle"
7601
+ }), /*#__PURE__*/React__default['default'].createElement("p", {
7602
+ className: "imageInputRight_button_text"
7603
+ }, "Upload File"));
7604
+ }), /*#__PURE__*/React__default['default'].createElement("div", {
7557
7605
  className: "imageInputRight_button",
7558
7606
  onClick: function onClick() {
7559
7607
  _this15.selectTab('library');
package/dist/index.esm.js CHANGED
@@ -19,13 +19,13 @@ import _extends from '@babel/runtime/helpers/extends';
19
19
  import _assertThisInitialized from '@babel/runtime/helpers/assertThisInitialized';
20
20
  import { connect } from 'react-redux';
21
21
  import Textarea from 'react-textarea-autosize';
22
+ import _typeof from '@babel/runtime/helpers/typeof';
22
23
  import Dropzone from 'react-dropzone';
23
24
  import { withRouter } from 'react-router';
24
25
  import { MenuItem, DropdownButton, FormGroup, ControlLabel, FormControl, HelpBlock } from 'react-bootstrap';
25
26
  import { Lottie } from '@crello/react-lottie';
26
27
  import { CSVLink } from 'react-csv';
27
28
  import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
28
- import _typeof from '@babel/runtime/helpers/typeof';
29
29
  import { ChromePicker } from 'react-color';
30
30
  import tinycolor from 'tinycolor2';
31
31
 
@@ -3192,6 +3192,12 @@ var close = {
3192
3192
  "M998.793 998.775c33.331-33.323 33.835-87.859 0.512-121.182l-365.579-365.557 365.613-365.586c33.323-33.324 32.811-87.859-0.512-121.183s-87.868-33.831-121.19-0.507l-365.609 365.586-365.629-365.606c-33.326-33.324-87.865-32.816-121.191 0.508s-33.833 87.86-0.507 121.183l365.629 365.606-365.597 365.574c-33.326 33.323-32.818 87.859 0.508 121.182s87.865 33.835 121.191 0.512l365.597-365.577 365.575 365.551c33.331 33.323 87.868 32.819 121.19-0.503z"
3193
3193
  ]
3194
3194
  };
3195
+ var check = {
3196
+ viewBox: "0 0 512 512",
3197
+ paths: [
3198
+ "M432 56l-240 240-112-112-80 80 192 192 320-320z"
3199
+ ]
3200
+ };
3195
3201
  var contractor = {
3196
3202
  viewBox: "0 0 512 512",
3197
3203
  paths: [
@@ -3979,6 +3985,7 @@ var pluss_new = {
3979
3985
  };
3980
3986
  var icons = {
3981
3987
  close: close,
3988
+ check: check,
3982
3989
  contractor: contractor,
3983
3990
  line_events: line_events,
3984
3991
  line_facilities: line_facilities,
@@ -5160,6 +5167,20 @@ var FileInputComponent = /*#__PURE__*/function (_Component) {
5160
5167
  }]
5161
5168
  });
5162
5169
 
5170
+ _defineProperty(_assertThisInitialized(_this), "getAccept", function () {
5171
+ if (_typeof(_this.props.accept) === 'object') {
5172
+ return _this.props.accept;
5173
+ }
5174
+
5175
+ if (typeof _this.props.accept === 'string') {
5176
+ var accept = _defineProperty({}, _this.props.accept, [".".concat(_.last(_this.props.accept.split('/')))]);
5177
+
5178
+ return accept;
5179
+ }
5180
+
5181
+ return null;
5182
+ });
5183
+
5163
5184
  _defineProperty(_assertThisInitialized(_this), "checkRefreshCallback", function (inputs) {
5164
5185
  if (_.isUndefined(_this.props.refreshCallback)) {
5165
5186
  return;
@@ -5427,19 +5448,23 @@ var FileInputComponent = /*#__PURE__*/function (_Component) {
5427
5448
  alt: "file"
5428
5449
  }), /*#__PURE__*/React.createElement("p", {
5429
5450
  className: "imageInput_text"
5430
- }, getFileName(input.value))), !_this3.props.multiple && /*#__PURE__*/React.createElement(Dropzone, {
5431
- accept: _this3.props.accept,
5451
+ }, getFileName(input.value))), /*#__PURE__*/React.createElement(Dropzone, {
5452
+ accept: _this3.getAccept(),
5432
5453
  onDrop: function onDrop(files) {
5433
5454
  return _this3.onDrop(files, true);
5434
- },
5435
- style: {
5436
- padding: 10
5437
5455
  }
5438
- }, /*#__PURE__*/React.createElement(Button, {
5439
- buttonType: "secondary",
5440
- className: "imageInput_button",
5441
- disabled: true
5442
- }, "Change file")));
5456
+ }, function (_ref2) {
5457
+ var getRootProps = _ref2.getRootProps;
5458
+ return /*#__PURE__*/React.createElement("div", _extends({
5459
+ style: {
5460
+ padding: 10
5461
+ }
5462
+ }, getRootProps()), /*#__PURE__*/React.createElement(Button, {
5463
+ buttonType: "secondary",
5464
+ className: "imageInput_button",
5465
+ disabled: true
5466
+ }, "Change file"));
5467
+ }));
5443
5468
  }
5444
5469
 
5445
5470
  return /*#__PURE__*/React.createElement("div", {
@@ -5477,14 +5502,15 @@ var FileInputComponent = /*#__PURE__*/function (_Component) {
5477
5502
  className: this.getClassNames(input, inputsLength),
5478
5503
  style: _objectSpread$f({}, this.props.style)
5479
5504
  }, /*#__PURE__*/React.createElement(Dropzone, {
5480
- className: "imageInput_upload ".concat(this.getErrorState()),
5481
- accept: this.props.accept,
5482
- onDrop: this.onDrop,
5483
- style: _objectSpread$f({}, this.props.style)
5484
- }, function (_ref2) {
5485
- var isDragActive = _ref2.isDragActive;
5486
- _ref2.isDragReject;
5487
- return /*#__PURE__*/React.createElement("div", {
5505
+ accept: this.getAccept(),
5506
+ onDrop: this.onDrop
5507
+ }, function (_ref3) {
5508
+ var getRootProps = _ref3.getRootProps,
5509
+ isDragActive = _ref3.isDragActive;
5510
+ return /*#__PURE__*/React.createElement("div", _extends({
5511
+ className: "imageInput_upload ".concat(_this3.getErrorState()),
5512
+ style: _objectSpread$f({}, _this3.props.style)
5513
+ }, getRootProps()), /*#__PURE__*/React.createElement("div", {
5488
5514
  className: "".concat(isDragActive ? 'imageInput_dropZoneActive' : '')
5489
5515
  }, !_this3.props.simpleStyle && /*#__PURE__*/React.createElement("img", {
5490
5516
  src: "https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg",
@@ -5496,7 +5522,7 @@ var FileInputComponent = /*#__PURE__*/function (_Component) {
5496
5522
  buttonType: "secondary",
5497
5523
  className: "imageInput_button",
5498
5524
  disabled: true
5499
- }, _this3.props.multiple ? "Upload files" : "Upload a file"));
5525
+ }, _this3.props.multiple ? "Upload files" : "Upload a file")));
5500
5526
  }), /*#__PURE__*/React.createElement("div", {
5501
5527
  className: "imageInput_uploading",
5502
5528
  style: _objectSpread$f({}, this.props.style)
@@ -6330,6 +6356,18 @@ var ImageInputComponent = /*#__PURE__*/function (_Component) {
6330
6356
  saveErrorMessage: ''
6331
6357
  });
6332
6358
 
6359
+ _defineProperty(_assertThisInitialized(_this), "getAccept", function () {
6360
+ var accept = {
6361
+ 'image/*': ['.jpeg', '.png']
6362
+ };
6363
+
6364
+ if (_this.props.allowVideo) {
6365
+ accept['video/*'] = ['.mp4'];
6366
+ }
6367
+
6368
+ return accept;
6369
+ });
6370
+
6333
6371
  _defineProperty(_assertThisInitialized(_this), "refreshFolders", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
6334
6372
  var res;
6335
6373
  return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -7116,16 +7154,20 @@ var ImageInputComponent = /*#__PURE__*/function (_Component) {
7116
7154
  style: _objectSpread$a(_objectSpread$a({}, _this6.getImageStyle(input.displayValue)), _this6.props.style)
7117
7155
  }, /*#__PURE__*/React.createElement(Dropzone, {
7118
7156
  disabled: _this6.props.disabled,
7119
- accept: "image/jpeg, image/png".concat(_this6.props.allowVideo ? ', video/*' : ''),
7157
+ accept: _this6.getAccept(),
7120
7158
  onDrop: function onDrop(files) {
7121
7159
  return _this6.onDrop(files, true);
7122
- },
7123
- className: "imageInput_buttonContainer-simple"
7124
- }, /*#__PURE__*/React.createElement(Button, {
7125
- buttonType: "secondary",
7126
- className: "imageInput_button imageInput_button-simple",
7127
- disabled: true
7128
- }, "Change image"))));
7160
+ }
7161
+ }, function (_ref8) {
7162
+ var getRootProps = _ref8.getRootProps;
7163
+ return /*#__PURE__*/React.createElement("div", _extends({
7164
+ className: "imageInput_buttonContainer-simple"
7165
+ }, getRootProps()), /*#__PURE__*/React.createElement(Button, {
7166
+ buttonType: "secondary",
7167
+ className: "imageInput_button imageInput_button-simple",
7168
+ disabled: true
7169
+ }, "Change image"));
7170
+ })));
7129
7171
  }
7130
7172
 
7131
7173
  return /*#__PURE__*/React.createElement("div", {
@@ -7166,14 +7208,15 @@ var ImageInputComponent = /*#__PURE__*/function (_Component) {
7166
7208
  style: _objectSpread$a({}, this.props.style)
7167
7209
  }, /*#__PURE__*/React.createElement(Dropzone, {
7168
7210
  disabled: this.props.disabled,
7169
- className: "imageInput_upload ".concat(this.getErrorState()),
7170
- accept: "image/jpeg, image/png".concat(this.props.allowVideo ? ', video/*' : ''),
7171
- onDrop: this.onDrop,
7172
- style: _objectSpread$a({}, this.props.style)
7173
- }, function (_ref8) {
7174
- var isDragActive = _ref8.isDragActive;
7175
- _ref8.isDragReject;
7176
- return /*#__PURE__*/React.createElement("div", {
7211
+ accept: this.getAccept(),
7212
+ onDrop: this.onDrop
7213
+ }, function (_ref9) {
7214
+ var getRootProps = _ref9.getRootProps,
7215
+ isDragActive = _ref9.isDragActive;
7216
+ return /*#__PURE__*/React.createElement("div", _extends({
7217
+ style: _objectSpread$a({}, _this6.props.style),
7218
+ className: "imageInput_upload ".concat(_this6.getErrorState())
7219
+ }, getRootProps()), /*#__PURE__*/React.createElement("div", {
7177
7220
  className: "".concat(isDragActive ? 'imageInput_dropZoneActive' : '', " ").concat(_this6.props.horizontalText ? ' imageInput_horizontalText' : '')
7178
7221
  }, !_this6.props.simpleStyle && /*#__PURE__*/React.createElement("img", {
7179
7222
  src: "https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg",
@@ -7185,7 +7228,7 @@ var ImageInputComponent = /*#__PURE__*/function (_Component) {
7185
7228
  buttonType: "secondary",
7186
7229
  className: "imageInput_button",
7187
7230
  disabled: true
7188
- }, _this6.props.multiple ? "Upload ".concat(mediaText) : "Upload an ".concat(mediaText)));
7231
+ }, _this6.props.multiple ? "Upload ".concat(mediaText) : "Upload an ".concat(mediaText))));
7189
7232
  }), /*#__PURE__*/React.createElement("div", {
7190
7233
  className: "imageInput_uploading",
7191
7234
  style: _objectSpread$a({}, this.props.style)
@@ -7412,18 +7455,19 @@ var ImageInputComponent = /*#__PURE__*/function (_Component) {
7412
7455
  return _this12.renderLibraryImage(image, index);
7413
7456
  }) : /*#__PURE__*/React.createElement("div", null, this.canAddImageToLibrary() && /*#__PURE__*/React.createElement(Dropzone, {
7414
7457
  disabled: this.props.disabled,
7415
- className: "imageInput_upload folder ".concat(this.getErrorState()),
7416
- accept: "image/jpeg, image/png".concat(this.props.allowVideo ? ', video/*' : ''),
7458
+ accept: this.getAccept(),
7417
7459
  onDrop: function onDrop(files) {
7418
7460
  return _this12.onDrop(files, true);
7419
- },
7420
- style: {
7421
- padding: '15px'
7422
7461
  }
7423
- }, function (_ref9) {
7424
- var isDragActive = _ref9.isDragActive;
7425
- _ref9.isDragReject;
7426
- return /*#__PURE__*/React.createElement("div", {
7462
+ }, function (_ref10) {
7463
+ var getRootProps = _ref10.getRootProps,
7464
+ isDragActive = _ref10.isDragActive;
7465
+ return /*#__PURE__*/React.createElement("div", _extends({
7466
+ style: {
7467
+ padding: '15px'
7468
+ },
7469
+ className: "imageInput_upload folder ".concat(_this12.getErrorState())
7470
+ }, getRootProps()), /*#__PURE__*/React.createElement("div", {
7427
7471
  className: isDragActive ? 'imageInput_dropZoneActive' : ''
7428
7472
  }, /*#__PURE__*/React.createElement("img", {
7429
7473
  src: "https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg",
@@ -7435,7 +7479,7 @@ var ImageInputComponent = /*#__PURE__*/function (_Component) {
7435
7479
  buttonType: "secondary",
7436
7480
  className: "imageInput_button",
7437
7481
  disabled: true
7438
- }, _this12.props.multiple ? "Upload ".concat(mediaText) : "Upload an ".concat(mediaText)));
7482
+ }, _this12.props.multiple ? "Upload ".concat(mediaText) : "Upload an ".concat(mediaText))));
7439
7483
  }), this.state.selectedFolder.parsedImages.map(function (image, index) {
7440
7484
  return _this12.renderLibraryImage(image, index, canDelete);
7441
7485
  }), !_.isNil(uploadingImages) && uploadingImages.map(function (input, index) {
@@ -7513,17 +7557,21 @@ var ImageInputComponent = /*#__PURE__*/function (_Component) {
7513
7557
  className: "imageInputRight"
7514
7558
  }, /*#__PURE__*/React.createElement(Dropzone, {
7515
7559
  disabled: this.props.disabled,
7516
- accept: "image/jpeg, image/png".concat(this.props.allowVideo ? ', video/*' : ''),
7560
+ accept: this.getAccept(),
7517
7561
  onDrop: function onDrop(files) {
7518
7562
  return _this15.onDrop(files, true);
7519
- },
7520
- className: "imageInputRight_button"
7521
- }, /*#__PURE__*/React.createElement(FontAwesome, {
7522
- className: "imageInputRight_button_icon",
7523
- name: "plus-circle"
7524
- }), /*#__PURE__*/React.createElement("p", {
7525
- className: "imageInputRight_button_text"
7526
- }, "Upload File")), /*#__PURE__*/React.createElement("div", {
7563
+ }
7564
+ }, function (_ref11) {
7565
+ var getRootProps = _ref11.getRootProps;
7566
+ return /*#__PURE__*/React.createElement("div", _extends({}, getRootProps(), {
7567
+ className: "imageInputRight_button"
7568
+ }), /*#__PURE__*/React.createElement(FontAwesome, {
7569
+ className: "imageInputRight_button_icon",
7570
+ name: "plus-circle"
7571
+ }), /*#__PURE__*/React.createElement("p", {
7572
+ className: "imageInputRight_button_text"
7573
+ }, "Upload File"));
7574
+ }), /*#__PURE__*/React.createElement("div", {
7527
7575
  className: "imageInputRight_button",
7528
7576
  onClick: function onClick() {
7529
7577
  _this15.selectTab('library');
package/dist/index.umd.js CHANGED
@@ -1,8 +1,8 @@
1
1
  (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@babel/runtime/helpers/toConsumableArray'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('lodash'), require('axios'), require('aws-amplify'), require('@babel/runtime/helpers/defineProperty'), require('react'), require('jquery'), require('js-cookie'), require('moment'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/inherits'), require('@babel/runtime/helpers/possibleConstructorReturn'), require('@babel/runtime/helpers/getPrototypeOf'), require('react-fontawesome'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/assertThisInitialized'), require('react-redux'), require('react-textarea-autosize'), require('react-dropzone'), require('react-router'), require('react-bootstrap'), require('@crello/react-lottie'), require('react-csv'), require('@babel/runtime/helpers/objectWithoutProperties'), require('@babel/runtime/helpers/typeof'), require('react-color'), require('tinycolor2')) :
3
- typeof define === 'function' && define.amd ? define(['exports', '@babel/runtime/helpers/toConsumableArray', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', 'lodash', 'axios', 'aws-amplify', '@babel/runtime/helpers/defineProperty', 'react', 'jquery', 'js-cookie', 'moment', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/inherits', '@babel/runtime/helpers/possibleConstructorReturn', '@babel/runtime/helpers/getPrototypeOf', 'react-fontawesome', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/assertThisInitialized', 'react-redux', 'react-textarea-autosize', 'react-dropzone', 'react-router', 'react-bootstrap', '@crello/react-lottie', 'react-csv', '@babel/runtime/helpers/objectWithoutProperties', '@babel/runtime/helpers/typeof', 'react-color', 'tinycolor2'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@plusscommunities/pluss-core-web'] = {}, global._toConsumableArray, global._asyncToGenerator, global._regeneratorRuntime, global._, global.axios, global.awsAmplify, global._defineProperty, global.React, global.$, global.Cookies, global.moment, global._classCallCheck, global._createClass, global._inherits, global._possibleConstructorReturn, global._getPrototypeOf, global.FontAwesome, global._extends, global._assertThisInitialized, global.reactRedux, global.Textarea, global.Dropzone, global.reactRouter, global.reactBootstrap, global.reactLottie, global.reactCsv, global._objectWithoutProperties, global._typeof, global.reactColor, global.tinycolor));
5
- }(this, (function (exports, _toConsumableArray, _asyncToGenerator, _regeneratorRuntime, _, axios, awsAmplify, _defineProperty, React, $, Cookies, moment, _classCallCheck, _createClass, _inherits, _possibleConstructorReturn, _getPrototypeOf, FontAwesome, _extends, _assertThisInitialized, reactRedux, Textarea, Dropzone, reactRouter, reactBootstrap, reactLottie, reactCsv, _objectWithoutProperties, _typeof, reactColor, tinycolor) { 'use strict';
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@babel/runtime/helpers/toConsumableArray'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('lodash'), require('axios'), require('aws-amplify'), require('@babel/runtime/helpers/defineProperty'), require('react'), require('jquery'), require('js-cookie'), require('moment'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/inherits'), require('@babel/runtime/helpers/possibleConstructorReturn'), require('@babel/runtime/helpers/getPrototypeOf'), require('react-fontawesome'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/assertThisInitialized'), require('react-redux'), require('react-textarea-autosize'), require('@babel/runtime/helpers/typeof'), require('react-dropzone'), require('react-router'), require('react-bootstrap'), require('@crello/react-lottie'), require('react-csv'), require('@babel/runtime/helpers/objectWithoutProperties'), require('react-color'), require('tinycolor2')) :
3
+ typeof define === 'function' && define.amd ? define(['exports', '@babel/runtime/helpers/toConsumableArray', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', 'lodash', 'axios', 'aws-amplify', '@babel/runtime/helpers/defineProperty', 'react', 'jquery', 'js-cookie', 'moment', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/inherits', '@babel/runtime/helpers/possibleConstructorReturn', '@babel/runtime/helpers/getPrototypeOf', 'react-fontawesome', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/assertThisInitialized', 'react-redux', 'react-textarea-autosize', '@babel/runtime/helpers/typeof', 'react-dropzone', 'react-router', 'react-bootstrap', '@crello/react-lottie', 'react-csv', '@babel/runtime/helpers/objectWithoutProperties', 'react-color', 'tinycolor2'], factory) :
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@plusscommunities/pluss-core-web'] = {}, global._toConsumableArray, global._asyncToGenerator, global._regeneratorRuntime, global._, global.axios, global.awsAmplify, global._defineProperty, global.React, global.$, global.Cookies, global.moment, global._classCallCheck, global._createClass, global._inherits, global._possibleConstructorReturn, global._getPrototypeOf, global.FontAwesome, global._extends, global._assertThisInitialized, global.reactRedux, global.Textarea, global._typeof, global.Dropzone, global.reactRouter, global.reactBootstrap, global.reactLottie, global.reactCsv, global._objectWithoutProperties, global.reactColor, global.tinycolor));
5
+ }(this, (function (exports, _toConsumableArray, _asyncToGenerator, _regeneratorRuntime, _, axios, awsAmplify, _defineProperty, React, $, Cookies, moment, _classCallCheck, _createClass, _inherits, _possibleConstructorReturn, _getPrototypeOf, FontAwesome, _extends, _assertThisInitialized, reactRedux, Textarea, _typeof, Dropzone, reactRouter, reactBootstrap, reactLottie, reactCsv, _objectWithoutProperties, reactColor, tinycolor) { 'use strict';
6
6
 
7
7
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
8
 
@@ -25,9 +25,9 @@
25
25
  var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
26
26
  var _assertThisInitialized__default = /*#__PURE__*/_interopDefaultLegacy(_assertThisInitialized);
27
27
  var Textarea__default = /*#__PURE__*/_interopDefaultLegacy(Textarea);
28
+ var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
28
29
  var Dropzone__default = /*#__PURE__*/_interopDefaultLegacy(Dropzone);
29
30
  var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
30
- var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
31
31
  var tinycolor__default = /*#__PURE__*/_interopDefaultLegacy(tinycolor);
32
32
 
33
33
  var CoreConfig = {
@@ -3193,6 +3193,12 @@
3193
3193
  "M998.793 998.775c33.331-33.323 33.835-87.859 0.512-121.182l-365.579-365.557 365.613-365.586c33.323-33.324 32.811-87.859-0.512-121.183s-87.868-33.831-121.19-0.507l-365.609 365.586-365.629-365.606c-33.326-33.324-87.865-32.816-121.191 0.508s-33.833 87.86-0.507 121.183l365.629 365.606-365.597 365.574c-33.326 33.323-32.818 87.859 0.508 121.182s87.865 33.835 121.191 0.512l365.597-365.577 365.575 365.551c33.331 33.323 87.868 32.819 121.19-0.503z"
3194
3194
  ]
3195
3195
  };
3196
+ var check = {
3197
+ viewBox: "0 0 512 512",
3198
+ paths: [
3199
+ "M432 56l-240 240-112-112-80 80 192 192 320-320z"
3200
+ ]
3201
+ };
3196
3202
  var contractor = {
3197
3203
  viewBox: "0 0 512 512",
3198
3204
  paths: [
@@ -3980,6 +3986,7 @@
3980
3986
  };
3981
3987
  var icons = {
3982
3988
  close: close,
3989
+ check: check,
3983
3990
  contractor: contractor,
3984
3991
  line_events: line_events,
3985
3992
  line_facilities: line_facilities,
@@ -5161,6 +5168,20 @@
5161
5168
  }]
5162
5169
  });
5163
5170
 
5171
+ _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getAccept", function () {
5172
+ if (_typeof__default['default'](_this.props.accept) === 'object') {
5173
+ return _this.props.accept;
5174
+ }
5175
+
5176
+ if (typeof _this.props.accept === 'string') {
5177
+ var accept = _defineProperty__default['default']({}, _this.props.accept, [".".concat(___default['default'].last(_this.props.accept.split('/')))]);
5178
+
5179
+ return accept;
5180
+ }
5181
+
5182
+ return null;
5183
+ });
5184
+
5164
5185
  _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "checkRefreshCallback", function (inputs) {
5165
5186
  if (___default['default'].isUndefined(_this.props.refreshCallback)) {
5166
5187
  return;
@@ -5428,19 +5449,23 @@
5428
5449
  alt: "file"
5429
5450
  }), /*#__PURE__*/React__default['default'].createElement("p", {
5430
5451
  className: "imageInput_text"
5431
- }, getFileName(input.value))), !_this3.props.multiple && /*#__PURE__*/React__default['default'].createElement(Dropzone__default['default'], {
5432
- accept: _this3.props.accept,
5452
+ }, getFileName(input.value))), /*#__PURE__*/React__default['default'].createElement(Dropzone__default['default'], {
5453
+ accept: _this3.getAccept(),
5433
5454
  onDrop: function onDrop(files) {
5434
5455
  return _this3.onDrop(files, true);
5435
- },
5436
- style: {
5437
- padding: 10
5438
5456
  }
5439
- }, /*#__PURE__*/React__default['default'].createElement(Button, {
5440
- buttonType: "secondary",
5441
- className: "imageInput_button",
5442
- disabled: true
5443
- }, "Change file")));
5457
+ }, function (_ref2) {
5458
+ var getRootProps = _ref2.getRootProps;
5459
+ return /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({
5460
+ style: {
5461
+ padding: 10
5462
+ }
5463
+ }, getRootProps()), /*#__PURE__*/React__default['default'].createElement(Button, {
5464
+ buttonType: "secondary",
5465
+ className: "imageInput_button",
5466
+ disabled: true
5467
+ }, "Change file"));
5468
+ }));
5444
5469
  }
5445
5470
 
5446
5471
  return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -5478,14 +5503,15 @@
5478
5503
  className: this.getClassNames(input, inputsLength),
5479
5504
  style: _objectSpread$f({}, this.props.style)
5480
5505
  }, /*#__PURE__*/React__default['default'].createElement(Dropzone__default['default'], {
5481
- className: "imageInput_upload ".concat(this.getErrorState()),
5482
- accept: this.props.accept,
5483
- onDrop: this.onDrop,
5484
- style: _objectSpread$f({}, this.props.style)
5485
- }, function (_ref2) {
5486
- var isDragActive = _ref2.isDragActive;
5487
- _ref2.isDragReject;
5488
- return /*#__PURE__*/React__default['default'].createElement("div", {
5506
+ accept: this.getAccept(),
5507
+ onDrop: this.onDrop
5508
+ }, function (_ref3) {
5509
+ var getRootProps = _ref3.getRootProps,
5510
+ isDragActive = _ref3.isDragActive;
5511
+ return /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({
5512
+ className: "imageInput_upload ".concat(_this3.getErrorState()),
5513
+ style: _objectSpread$f({}, _this3.props.style)
5514
+ }, getRootProps()), /*#__PURE__*/React__default['default'].createElement("div", {
5489
5515
  className: "".concat(isDragActive ? 'imageInput_dropZoneActive' : '')
5490
5516
  }, !_this3.props.simpleStyle && /*#__PURE__*/React__default['default'].createElement("img", {
5491
5517
  src: "https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg",
@@ -5497,7 +5523,7 @@
5497
5523
  buttonType: "secondary",
5498
5524
  className: "imageInput_button",
5499
5525
  disabled: true
5500
- }, _this3.props.multiple ? "Upload files" : "Upload a file"));
5526
+ }, _this3.props.multiple ? "Upload files" : "Upload a file")));
5501
5527
  }), /*#__PURE__*/React__default['default'].createElement("div", {
5502
5528
  className: "imageInput_uploading",
5503
5529
  style: _objectSpread$f({}, this.props.style)
@@ -6331,6 +6357,18 @@
6331
6357
  saveErrorMessage: ''
6332
6358
  });
6333
6359
 
6360
+ _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getAccept", function () {
6361
+ var accept = {
6362
+ 'image/*': ['.jpeg', '.png']
6363
+ };
6364
+
6365
+ if (_this.props.allowVideo) {
6366
+ accept['video/*'] = ['.mp4'];
6367
+ }
6368
+
6369
+ return accept;
6370
+ });
6371
+
6334
6372
  _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "refreshFolders", /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
6335
6373
  var res;
6336
6374
  return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
@@ -7117,16 +7155,20 @@
7117
7155
  style: _objectSpread$a(_objectSpread$a({}, _this6.getImageStyle(input.displayValue)), _this6.props.style)
7118
7156
  }, /*#__PURE__*/React__default['default'].createElement(Dropzone__default['default'], {
7119
7157
  disabled: _this6.props.disabled,
7120
- accept: "image/jpeg, image/png".concat(_this6.props.allowVideo ? ', video/*' : ''),
7158
+ accept: _this6.getAccept(),
7121
7159
  onDrop: function onDrop(files) {
7122
7160
  return _this6.onDrop(files, true);
7123
- },
7124
- className: "imageInput_buttonContainer-simple"
7125
- }, /*#__PURE__*/React__default['default'].createElement(Button, {
7126
- buttonType: "secondary",
7127
- className: "imageInput_button imageInput_button-simple",
7128
- disabled: true
7129
- }, "Change image"))));
7161
+ }
7162
+ }, function (_ref8) {
7163
+ var getRootProps = _ref8.getRootProps;
7164
+ return /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({
7165
+ className: "imageInput_buttonContainer-simple"
7166
+ }, getRootProps()), /*#__PURE__*/React__default['default'].createElement(Button, {
7167
+ buttonType: "secondary",
7168
+ className: "imageInput_button imageInput_button-simple",
7169
+ disabled: true
7170
+ }, "Change image"));
7171
+ })));
7130
7172
  }
7131
7173
 
7132
7174
  return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -7167,14 +7209,15 @@
7167
7209
  style: _objectSpread$a({}, this.props.style)
7168
7210
  }, /*#__PURE__*/React__default['default'].createElement(Dropzone__default['default'], {
7169
7211
  disabled: this.props.disabled,
7170
- className: "imageInput_upload ".concat(this.getErrorState()),
7171
- accept: "image/jpeg, image/png".concat(this.props.allowVideo ? ', video/*' : ''),
7172
- onDrop: this.onDrop,
7173
- style: _objectSpread$a({}, this.props.style)
7174
- }, function (_ref8) {
7175
- var isDragActive = _ref8.isDragActive;
7176
- _ref8.isDragReject;
7177
- return /*#__PURE__*/React__default['default'].createElement("div", {
7212
+ accept: this.getAccept(),
7213
+ onDrop: this.onDrop
7214
+ }, function (_ref9) {
7215
+ var getRootProps = _ref9.getRootProps,
7216
+ isDragActive = _ref9.isDragActive;
7217
+ return /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({
7218
+ style: _objectSpread$a({}, _this6.props.style),
7219
+ className: "imageInput_upload ".concat(_this6.getErrorState())
7220
+ }, getRootProps()), /*#__PURE__*/React__default['default'].createElement("div", {
7178
7221
  className: "".concat(isDragActive ? 'imageInput_dropZoneActive' : '', " ").concat(_this6.props.horizontalText ? ' imageInput_horizontalText' : '')
7179
7222
  }, !_this6.props.simpleStyle && /*#__PURE__*/React__default['default'].createElement("img", {
7180
7223
  src: "https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg",
@@ -7186,7 +7229,7 @@
7186
7229
  buttonType: "secondary",
7187
7230
  className: "imageInput_button",
7188
7231
  disabled: true
7189
- }, _this6.props.multiple ? "Upload ".concat(mediaText) : "Upload an ".concat(mediaText)));
7232
+ }, _this6.props.multiple ? "Upload ".concat(mediaText) : "Upload an ".concat(mediaText))));
7190
7233
  }), /*#__PURE__*/React__default['default'].createElement("div", {
7191
7234
  className: "imageInput_uploading",
7192
7235
  style: _objectSpread$a({}, this.props.style)
@@ -7413,18 +7456,19 @@
7413
7456
  return _this12.renderLibraryImage(image, index);
7414
7457
  }) : /*#__PURE__*/React__default['default'].createElement("div", null, this.canAddImageToLibrary() && /*#__PURE__*/React__default['default'].createElement(Dropzone__default['default'], {
7415
7458
  disabled: this.props.disabled,
7416
- className: "imageInput_upload folder ".concat(this.getErrorState()),
7417
- accept: "image/jpeg, image/png".concat(this.props.allowVideo ? ', video/*' : ''),
7459
+ accept: this.getAccept(),
7418
7460
  onDrop: function onDrop(files) {
7419
7461
  return _this12.onDrop(files, true);
7420
- },
7421
- style: {
7422
- padding: '15px'
7423
7462
  }
7424
- }, function (_ref9) {
7425
- var isDragActive = _ref9.isDragActive;
7426
- _ref9.isDragReject;
7427
- return /*#__PURE__*/React__default['default'].createElement("div", {
7463
+ }, function (_ref10) {
7464
+ var getRootProps = _ref10.getRootProps,
7465
+ isDragActive = _ref10.isDragActive;
7466
+ return /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({
7467
+ style: {
7468
+ padding: '15px'
7469
+ },
7470
+ className: "imageInput_upload folder ".concat(_this12.getErrorState())
7471
+ }, getRootProps()), /*#__PURE__*/React__default['default'].createElement("div", {
7428
7472
  className: isDragActive ? 'imageInput_dropZoneActive' : ''
7429
7473
  }, /*#__PURE__*/React__default['default'].createElement("img", {
7430
7474
  src: "https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg",
@@ -7436,7 +7480,7 @@
7436
7480
  buttonType: "secondary",
7437
7481
  className: "imageInput_button",
7438
7482
  disabled: true
7439
- }, _this12.props.multiple ? "Upload ".concat(mediaText) : "Upload an ".concat(mediaText)));
7483
+ }, _this12.props.multiple ? "Upload ".concat(mediaText) : "Upload an ".concat(mediaText))));
7440
7484
  }), this.state.selectedFolder.parsedImages.map(function (image, index) {
7441
7485
  return _this12.renderLibraryImage(image, index, canDelete);
7442
7486
  }), !___default['default'].isNil(uploadingImages) && uploadingImages.map(function (input, index) {
@@ -7514,17 +7558,21 @@
7514
7558
  className: "imageInputRight"
7515
7559
  }, /*#__PURE__*/React__default['default'].createElement(Dropzone__default['default'], {
7516
7560
  disabled: this.props.disabled,
7517
- accept: "image/jpeg, image/png".concat(this.props.allowVideo ? ', video/*' : ''),
7561
+ accept: this.getAccept(),
7518
7562
  onDrop: function onDrop(files) {
7519
7563
  return _this15.onDrop(files, true);
7520
- },
7521
- className: "imageInputRight_button"
7522
- }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
7523
- className: "imageInputRight_button_icon",
7524
- name: "plus-circle"
7525
- }), /*#__PURE__*/React__default['default'].createElement("p", {
7526
- className: "imageInputRight_button_text"
7527
- }, "Upload File")), /*#__PURE__*/React__default['default'].createElement("div", {
7564
+ }
7565
+ }, function (_ref11) {
7566
+ var getRootProps = _ref11.getRootProps;
7567
+ return /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({}, getRootProps(), {
7568
+ className: "imageInputRight_button"
7569
+ }), /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
7570
+ className: "imageInputRight_button_icon",
7571
+ name: "plus-circle"
7572
+ }), /*#__PURE__*/React__default['default'].createElement("p", {
7573
+ className: "imageInputRight_button_text"
7574
+ }, "Upload File"));
7575
+ }), /*#__PURE__*/React__default['default'].createElement("div", {
7528
7576
  className: "imageInputRight_button",
7529
7577
  onClick: function onClick() {
7530
7578
  _this15.selectTab('library');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@plusscommunities/pluss-core-web",
3
- "version": "1.4.12",
3
+ "version": "1.4.14-beta.0",
4
4
  "description": "Core extension package for Pluss Communities platform",
5
5
  "main": "dist/index.cjs.js",
6
6
  "scripts": {
@@ -34,7 +34,7 @@
34
34
  "lodash": "^4.17.4",
35
35
  "moment": "^2.18.1",
36
36
  "react": "^16.14.0",
37
- "react-dropzone": "^7.0.1",
37
+ "react-dropzone": "^14.2.2",
38
38
  "react-fontawesome": "^1.6.1",
39
39
  "react-redux": "^5.0.6",
40
40
  "react-router-dom": "^4.2.2",
package/src/components/FileInput.js CHANGED
@@ -86,6 +86,19 @@ class FileInputComponent extends Component {
86
86
  return '';
87
87
  }
88
88
 
89
+ getAccept = () => {
90
+ if (typeof this.props.accept === 'object') {
91
+ return this.props.accept;
92
+ }
93
+ if (typeof this.props.accept === 'string') {
94
+ const accept = {
95
+ [this.props.accept]: [`.${_.last(this.props.accept.split('/'))}`],
96
+ };
97
+ return accept;
98
+ }
99
+ return null;
100
+ };
101
+
89
102
  checkRefreshCallback = (inputs) => {
90
103
  if (_.isUndefined(this.props.refreshCallback)) {
91
104
  return;
@@ -211,13 +224,15 @@ class FileInputComponent extends Component {
211
224
  />
212
225
  <p className="imageInput_text">{getFileName(input.value)}</p>
213
226
  </div>
214
- {!this.props.multiple && (
215
- <Dropzone accept={this.props.accept} onDrop={(files) => this.onDrop(files, true)} style={{ padding: 10 }}>
216
- <Button buttonType="secondary" className="imageInput_button" disabled>
217
- Change file
218
- </Button>
219
- </Dropzone>
220
- )}
227
+ <Dropzone accept={this.getAccept()} onDrop={(files) => this.onDrop(files, true)}>
228
+ {({ getRootProps }) => (
229
+ <div style={{ padding: 10 }} {...getRootProps()}>
230
+ <Button buttonType="secondary" className="imageInput_button" disabled>
231
+ Change file
232
+ </Button>
233
+ </div>
234
+ )}
235
+ </Dropzone>
221
236
  </div>
222
237
  );
223
238
  }
@@ -253,28 +268,25 @@ class FileInputComponent extends Component {
253
268
 
254
269
  return (
255
270
  <div key={index} className={this.getClassNames(input, inputsLength)} style={{ ...this.props.style }}>
256
- <Dropzone
257
- className={`imageInput_upload ${this.getErrorState()}`}
258
- accept={this.props.accept}
259
- onDrop={this.onDrop}
260
- style={{ ...this.props.style }}
261
- >
262
- {({ isDragActive, isDragReject }) => {
271
+ <Dropzone accept={this.getAccept()} onDrop={this.onDrop}>
272
+ {({ getRootProps, isDragActive }) => {
263
273
  return (
264
- <div className={`${isDragActive ? 'imageInput_dropZoneActive' : ''}`}>
265
- {!this.props.simpleStyle && (
266
- <img
267
- src="https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg"
268
- className="imageInput_icon"
269
- alt="file"
270
- />
271
- )}
272
- <p className="imageInput_helpText">{isDragActive ? `Drop file here` : `Drag and drop file or`}</p>
273
- {!isDragActive && (
274
- <Button buttonType="secondary" className="imageInput_button" disabled>
275
- {this.props.multiple ? `Upload files` : `Upload a file`}
276
- </Button>
277
- )}
274
+ <div className={`imageInput_upload ${this.getErrorState()}`} style={{ ...this.props.style }} {...getRootProps()}>
275
+ <div className={`${isDragActive ? 'imageInput_dropZoneActive' : ''}`}>
276
+ {!this.props.simpleStyle && (
277
+ <img
278
+ src="https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg"
279
+ className="imageInput_icon"
280
+ alt="file"
281
+ />
282
+ )}
283
+ <p className="imageInput_helpText">{isDragActive ? `Drop file here` : `Drag and drop file or`}</p>
284
+ {!isDragActive && (
285
+ <Button buttonType="secondary" className="imageInput_button" disabled>
286
+ {this.props.multiple ? `Upload files` : `Upload a file`}
287
+ </Button>
288
+ )}
289
+ </div>
278
290
  </div>
279
291
  );
280
292
  }}
package/src/components/ImageInput.js CHANGED
@@ -120,6 +120,16 @@ class ImageInputComponent extends Component {
120
120
  return { backgroundImage: `url(${image})` };
121
121
  }
122
122
 
123
+ getAccept = () => {
124
+ const accept = {
125
+ 'image/*': ['.jpeg', '.png'],
126
+ };
127
+ if (this.props.allowVideo) {
128
+ accept['video/*'] = ['.mp4'];
129
+ }
130
+ return accept;
131
+ };
132
+
123
133
  getContainerClasses() {
124
134
  let result = this.props.className || '';
125
135
  if (this.props.noMenu) {
@@ -524,15 +534,14 @@ class ImageInputComponent extends Component {
524
534
  // height: this.props.style && this.props.style.height ? this.props.style.height : 80,
525
535
  }}
526
536
  >
527
- <Dropzone
528
- disabled={this.props.disabled}
529
- accept={`image/jpeg, image/png${this.props.allowVideo ? ', video/*' : ''}`}
530
- onDrop={(files) => this.onDrop(files, true)}
531
- className="imageInput_buttonContainer-simple"
532
- >
533
- <Button buttonType="secondary" className="imageInput_button imageInput_button-simple" disabled>
534
- Change image
535
- </Button>
537
+ <Dropzone disabled={this.props.disabled} accept={this.getAccept()} onDrop={(files) => this.onDrop(files, true)}>
538
+ {({ getRootProps }) => (
539
+ <div className="imageInput_buttonContainer-simple" {...getRootProps()}>
540
+ <Button buttonType="secondary" className="imageInput_button imageInput_button-simple" disabled>
541
+ Change image
542
+ </Button>
543
+ </div>
544
+ )}
536
545
  </Dropzone>
537
546
  </div>
538
547
  </div>
@@ -572,33 +581,29 @@ class ImageInputComponent extends Component {
572
581
  const mediaText = this.props.allowVideo ? 'media' : `image${this.props.multiple ? 's' : ''}`;
573
582
  return (
574
583
  <div key={index} className={this.getClassNames(input, inputsLength)} style={{ ...this.props.style }}>
575
- <Dropzone
576
- disabled={this.props.disabled}
577
- className={`imageInput_upload ${this.getErrorState()}`}
578
- accept={`image/jpeg, image/png${this.props.allowVideo ? ', video/*' : ''}`}
579
- onDrop={this.onDrop}
580
- style={{ ...this.props.style }}
581
- >
582
- {({ isDragActive, isDragReject }) => {
584
+ <Dropzone disabled={this.props.disabled} accept={this.getAccept()} onDrop={this.onDrop}>
585
+ {({ getRootProps, isDragActive }) => {
583
586
  return (
584
- <div
585
- className={`${isDragActive ? 'imageInput_dropZoneActive' : ''} ${
586
- this.props.horizontalText ? ' imageInput_horizontalText' : ''
587
- }`}
588
- >
589
- {!this.props.simpleStyle && (
590
- <img
591
- src="https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg"
592
- className="imageInput_icon"
593
- alt="file"
594
- />
595
- )}
596
- <p className="imageInput_helpText">{isDragActive ? `Drop ${mediaText} here` : `Drag and drop ${mediaText} or`}</p>
597
- {!isDragActive && (
598
- <Button buttonType="secondary" className="imageInput_button" disabled>
599
- {this.props.multiple ? `Upload ${mediaText}` : `Upload an ${mediaText}`}
600
- </Button>
601
- )}
587
+ <div style={{ ...this.props.style }} className={`imageInput_upload ${this.getErrorState()}`} {...getRootProps()}>
588
+ <div
589
+ className={`${isDragActive ? 'imageInput_dropZoneActive' : ''} ${
590
+ this.props.horizontalText ? ' imageInput_horizontalText' : ''
591
+ }`}
592
+ >
593
+ {!this.props.simpleStyle && (
594
+ <img
595
+ src="https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg"
596
+ className="imageInput_icon"
597
+ alt="file"
598
+ />
599
+ )}
600
+ <p className="imageInput_helpText">{isDragActive ? `Drop ${mediaText} here` : `Drag and drop ${mediaText} or`}</p>
601
+ {!isDragActive && (
602
+ <Button buttonType="secondary" className="imageInput_button" disabled>
603
+ {this.props.multiple ? `Upload ${mediaText}` : `Upload an ${mediaText}`}
604
+ </Button>
605
+ )}
606
+ </div>
602
607
  </div>
603
608
  );
604
609
  }}
@@ -798,27 +803,23 @@ class ImageInputComponent extends Component {
798
803
  ) : (
799
804
  <div>
800
805
  {this.canAddImageToLibrary() && (
801
- <Dropzone
802
- disabled={this.props.disabled}
803
- className={`imageInput_upload folder ${this.getErrorState()}`}
804
- accept={`image/jpeg, image/png${this.props.allowVideo ? ', video/*' : ''}`}
805
- onDrop={(files) => this.onDrop(files, true)}
806
- style={{ padding: '15px' }}
807
- >
808
- {({ isDragActive, isDragReject }) => {
806
+ <Dropzone disabled={this.props.disabled} accept={this.getAccept()} onDrop={(files) => this.onDrop(files, true)}>
807
+ {({ getRootProps, isDragActive }) => {
809
808
  return (
810
- <div className={isDragActive ? 'imageInput_dropZoneActive' : ''}>
811
- <img
812
- src="https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg"
813
- className="imageInput_icon"
814
- alt="file"
815
- />
816
- <p className="imageInput_helpText">{isDragActive ? `Drop ${mediaText} here` : `Drag and drop ${mediaText} or`}</p>
817
- {!isDragActive && (
818
- <Button buttonType="secondary" className="imageInput_button" disabled>
819
- {this.props.multiple ? `Upload ${mediaText}` : `Upload an ${mediaText}`}
820
- </Button>
821
- )}
809
+ <div style={{ padding: '15px' }} className={`imageInput_upload folder ${this.getErrorState()}`} {...getRootProps()}>
810
+ <div className={isDragActive ? 'imageInput_dropZoneActive' : ''}>
811
+ <img
812
+ src="https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg"
813
+ className="imageInput_icon"
814
+ alt="file"
815
+ />
816
+ <p className="imageInput_helpText">{isDragActive ? `Drop ${mediaText} here` : `Drag and drop ${mediaText} or`}</p>
817
+ {!isDragActive && (
818
+ <Button buttonType="secondary" className="imageInput_button" disabled>
819
+ {this.props.multiple ? `Upload ${mediaText}` : `Upload an ${mediaText}`}
820
+ </Button>
821
+ )}
822
+ </div>
822
823
  </div>
823
824
  );
824
825
  }}
@@ -896,15 +897,24 @@ class ImageInputComponent extends Component {
896
897
  }
897
898
  return (
898
899
  <div className="imageInputRight">
899
- <Dropzone
900
- disabled={this.props.disabled}
901
- accept={`image/jpeg, image/png${this.props.allowVideo ? ', video/*' : ''}`}
902
- onDrop={(files) => this.onDrop(files, true)}
903
- className="imageInputRight_button"
904
- >
905
- <FontAwesome className="imageInputRight_button_icon" name="plus-circle" />
906
- <p className="imageInputRight_button_text">Upload File</p>
900
+ <Dropzone disabled={this.props.disabled} accept={this.getAccept()} onDrop={(files) => this.onDrop(files, true)}>
901
+ {({ getRootProps }) => (
902
+ <div {...getRootProps()} className="imageInputRight_button">
903
+ <FontAwesome className="imageInputRight_button_icon" name="plus-circle" />
904
+ <p className="imageInputRight_button_text">Upload File</p>
905
+ </div>
906
+ )}
907
907
  </Dropzone>
908
+ {/* <Dropzone onDrop={(files) => this.onDrop(files, true)}>{({ getRootProps, getInputProps }) => (
909
+ <div {...getRootProps({ disabled: this.props.disabled, accept: this.getAccept(), className: 'imageInputRight_button' })}>
910
+ <div className="imageInputRight_button">
911
+ <input {...getInputProps()} />
912
+ <FontAwesome className="imageInputRight_button_icon" name="plus-circle" />
913
+ <p className="imageInputRight_button_text">Upload File</p>
914
+ </div>
915
+ </div>
916
+ )}
917
+ </Dropzone> */}
908
918
  <div
909
919
  className="imageInputRight_button"
910
920
  onClick={() => {
package/src/components/svg-icons.json CHANGED
@@ -5,6 +5,10 @@
5
5
  "M998.793 998.775c33.331-33.323 33.835-87.859 0.512-121.182l-365.579-365.557 365.613-365.586c33.323-33.324 32.811-87.859-0.512-121.183s-87.868-33.831-121.19-0.507l-365.609 365.586-365.629-365.606c-33.326-33.324-87.865-32.816-121.191 0.508s-33.833 87.86-0.507 121.183l365.629 365.606-365.597 365.574c-33.326 33.323-32.818 87.859 0.508 121.182s87.865 33.835 121.191 0.512l365.597-365.577 365.575 365.551c33.331 33.323 87.868 32.819 121.19-0.503z"
6
6
  ]
7
7
  },
8
+ "check": {
9
+ "viewBox": "0 0 512 512",
10
+ "paths": ["M432 56l-240 240-112-112-80 80 192 192 320-320z"]
11
+ },
8
12
  "contractor": {
9
13
  "viewBox": "0 0 512 512",
10
14
  "paths": [