@plusscommunities/pluss-core-web 1.6.8 → 1.6.9

package/src/components/FileInput.js

@@ -1,15 +1,15 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import _ from 'lodash';
-import Dropzone from 'react-dropzone';
-import FontAwesome from 'react-fontawesome';
-import { Button } from './Button';
-import { fileActions } from '../apis';
-import { getFileName } from '../helper';
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import _ from "lodash";
+import Dropzone from "react-dropzone";
+import FontAwesome from "react-fontawesome";
+import { Button } from "./Button";
+import { fileActions } from "../apis";
+import { getFileName } from "../helper";
 
 const DEFAULT_INPUT = {
   uploadingFile: false,
-  value: '',
+  value: "",
 };
 
 class FileInputComponent extends Component {
@@ -17,7 +17,7 @@ class FileInputComponent extends Component {
     inputs: [
       {
         uploadingFile: false,
-        value: '',
+        value: "",
       },
     ],
   };
@@ -41,7 +41,7 @@ class FileInputComponent extends Component {
   }
 
   setValue(val) {
-    if (typeof val === 'string') {
+    if (typeof val === "string") {
       this.setState({
         inputs: [
           {
@@ -58,41 +58,46 @@ class FileInputComponent extends Component {
           value: str,
         });
       });
-      if (!this.props.limit || this.props.limit > inputs.length) inputs.push(DEFAULT_INPUT);
+      if (!this.props.limit || this.props.limit > inputs.length)
+        inputs.push(DEFAULT_INPUT);
       this.setState({ inputs });
     }
   }
 
   getClassNames(input, inputsLength) {
-    let classes = 'clearfix imageInput';
+    let classes = "clearfix imageInput";
     if (input.uploadingFile) {
-      classes += ' imageInput-uploading';
+      classes += " imageInput-uploading";
     } else if (!_.isEmpty(input.value) && !this.props.onlyAllowUpload) {
-      classes += ' imageInput-hasImage';
+      classes += " imageInput-hasImage";
     }
     if (inputsLength === 1) {
-      classes += ' imageInput-only';
+      classes += " imageInput-only";
     }
-    if (this.props.style && this.props.style.height && this.props.style.height < 150) {
-      classes += ' imageInput-condensed';
+    if (
+      this.props.style &&
+      this.props.style.height &&
+      this.props.style.height < 150
+    ) {
+      classes += " imageInput-condensed";
     }
     return classes;
   }
 
   getErrorState() {
     if (!_.isUndefined(this.props.showError) && this.props.showError()) {
-      return ' imageInput_upload--error';
+      return " imageInput_upload--error";
     }
-    return '';
+    return "";
   }
 
   getAccept = () => {
-    if (typeof this.props.accept === 'object') {
+    if (typeof this.props.accept === "object") {
       return this.props.accept;
     }
-    if (typeof this.props.accept === 'string') {
+    if (typeof this.props.accept === "string") {
       const accept = {
-        [this.props.accept]: [`.${_.last(this.props.accept.split('/'))}`],
+        [this.props.accept]: [`.${_.last(this.props.accept.split("/"))}`],
       };
       return accept;
     }
@@ -165,14 +170,17 @@ class FileInputComponent extends Component {
     this.checkRefreshCallback(newInputs);
     if (this.props.handleFile) {
       await this.props.handleFile(file, newInputs);
-      this.checkSetDisplayValue(input, '');
+      this.checkSetDisplayValue(input, "");
     } else {
       try {
         let uploadFile = file;
-        const url = await fileActions.uploadMediaAsync(uploadFile, uploadFile.name);
+        const url = await fileActions.uploadMediaAsync(
+          uploadFile,
+          uploadFile.name,
+        );
         this.checkSetDisplayValue(input, url);
       } catch (error) {
-        console.log('handleFile error', error);
+        console.log("handleFile error", error);
         this.setState({ uploadingFile: false });
       }
     }
@@ -181,13 +189,16 @@ class FileInputComponent extends Component {
   removeFile(input) {
     const newState = {};
 
-    input.value = '';
+    input.value = "";
 
     const newInputs = _.clone(this.state.inputs);
 
     if (newInputs.length > 1) {
       newInputs.splice(newInputs.indexOf(input), 1);
-      if (newInputs.length === this.props.limit - 1 && !_.isEmpty(newInputs[newInputs.length - 1].value)) {
+      if (
+        newInputs.length === this.props.limit - 1 &&
+        !_.isEmpty(newInputs[newInputs.length - 1].value)
+      ) {
         // was full
         newInputs.push(DEFAULT_INPUT);
       }
@@ -214,7 +225,10 @@ class FileInputComponent extends Component {
               className="imageInput_image"
               style={{
                 ...this.props.style,
-                height: this.props.style && this.props.style.height ? this.props.style.height - 62 : 80,
+                height:
+                  this.props.style && this.props.style.height
+                    ? this.props.style.height - 62
+                    : 80,
               }}
             >
               <img
@@ -224,13 +238,20 @@ class FileInputComponent extends Component {
               />
               <p className="imageInput_text">{getFileName(input.value)}</p>
             </div>
-            <Dropzone accept={this.getAccept()} onDrop={(files) => this.onDrop(files, true)}>
+            <Dropzone
+              accept={this.getAccept()}
+              onDrop={(files) => this.onDrop(files, true)}
+            >
               {(state) => {
                 const { getRootProps, getInputProps } = state;
                 return (
                   <div style={{ padding: 10 }} {...getRootProps()}>
                     <input {...getInputProps()} />
-                    <Button buttonType="secondary" className="imageInput_button" disabled>
+                    <Button
+                      buttonType="secondary"
+                      className="imageInput_button"
+                      disabled
+                    >
                       Change file
                     </Button>
                   </div>
@@ -240,7 +261,9 @@ class FileInputComponent extends Component {
           </div>
         );
       }
-      return <div className="imageInput_image" style={{ ...this.props.style }}></div>;
+      return (
+        <div className="imageInput_image" style={{ ...this.props.style }}></div>
+      );
     };
 
     const renderRemove = () => {
@@ -248,9 +271,16 @@ class FileInputComponent extends Component {
         !this.props.disableRemove &&
         !this.props.disabled &&
         (this.props.simpleStyle ? (
-          <FontAwesome name="remove" className="imageInput_removeIcon" onClick={this.removeFile.bind(this, input)} />
+          <FontAwesome
+            name="remove"
+            className="imageInput_removeIcon"
+            onClick={this.removeFile.bind(this, input)}
+          />
         ) : (
-          <p className="imageInput_remove" onClick={this.removeFile.bind(this, input)}>
+          <p
+            className="imageInput_remove"
+            onClick={this.removeFile.bind(this, input)}
+          >
             remove
           </p>
         ))
@@ -271,14 +301,24 @@ class FileInputComponent extends Component {
     };
 
     return (
-      <div key={index} className={this.getClassNames(input, inputsLength)} style={{ ...this.props.style }}>
+      <div
+        key={index}
+        className={this.getClassNames(input, inputsLength)}
+        style={{ ...this.props.style }}
+      >
         <Dropzone accept={this.getAccept()} onDrop={this.onDrop}>
           {(state) => {
             const { getRootProps, getInputProps, isDragActive } = state;
             return (
-              <div className={`imageInput_upload ${this.getErrorState()}`} style={{ ...this.props.style }} {...getRootProps()}>
+              <div
+                className={`imageInput_upload ${this.getErrorState()}`}
+                style={{ ...this.props.style }}
+                {...getRootProps()}
+              >
                 <input {...getInputProps()} />
-                <div className={`${isDragActive ? 'imageInput_dropZoneActive' : ''}`}>
+                <div
+                  className={`${isDragActive ? "imageInput_dropZoneActive" : ""}`}
+                >
                   {!this.props.simpleStyle && (
                     <img
                       src="https://s3-ap-southeast-2.amazonaws.com/pluss60-dev-media/pluss/document.svg"
@@ -286,9 +326,15 @@ class FileInputComponent extends Component {
                       alt="file"
                     />
                   )}
-                  <p className="imageInput_helpText">{isDragActive ? `Drop file here` : `Drag and drop file or`}</p>
+                  <p className="imageInput_helpText">
+                    {isDragActive ? `Drop file here` : `Drag and drop file or`}
+                  </p>
                   {!isDragActive && (
-                    <Button buttonType="secondary" className="imageInput_button" disabled>
+                    <Button
+                      buttonType="secondary"
+                      className="imageInput_button"
+                      disabled
+                    >
                       {this.props.multiple ? `Upload files` : `Upload a file`}
                     </Button>
                   )}
@@ -298,7 +344,10 @@ class FileInputComponent extends Component {
           }}
         </Dropzone>
         <div className="imageInput_uploading" style={{ ...this.props.style }}>
-          <FontAwesome className="spinner imageInput_spinner" name="spinner fa-pulse fa-fw" />
+          <FontAwesome
+            className="spinner imageInput_spinner"
+            name="spinner fa-pulse fa-fw"
+          />
         </div>
         {renderContent()}
         {renderRemove()}
@@ -310,9 +359,8 @@ class FileInputComponent extends Component {
   renderUploadFiles(inputs) {
     return (
       <div
-        className={`imageInputContainer clearfix ${inputs.length === 1 ? 'imageInputContainer-noPadding' : ''} ${
-          this.props.simpleStyle ? 'imageInputContainer-simple' : ''
-        }`}
+        className={`imageInputContainer clearfix ${inputs.length === 1 ? "imageInputContainer-noPadding" : ""} ${this.props.simpleStyle ? "imageInputContainer-simple" : ""
+          }`}
         style={{ ...this.props.style }}
       >
         {inputs.map((input, index) => {
@@ -335,5 +383,7 @@ const mapStateToProps = () => {
   return {};
 };
 
-const FileInput = connect(mapStateToProps, {}, null, { withRef: true })(FileInputComponent);
+const FileInput = connect(mapStateToProps, {}, null, { forwardRef: true })(
+  FileInputComponent,
+);
 export { FileInput };

package/src/components/ImageInput.js

@@ -593,9 +593,8 @@ class ImageInputComponent extends Component {
               <div style={{ ...this.props.style }} className={`imageInput_upload ${this.getErrorState()}`} {...getRootProps()}>
                 <input {...getInputProps()} />
                 <div
-                  className={`${isDragActive ? 'imageInput_dropZoneActive' : ''} ${
-                    this.props.horizontalText ? ' imageInput_horizontalText' : ''
-                  }`}
+                  className={`${isDragActive ? 'imageInput_dropZoneActive' : ''} ${this.props.horizontalText ? ' imageInput_horizontalText' : ''
+                    }`}
                 >
                   {!this.props.simpleStyle && (
                     <img
@@ -984,5 +983,5 @@ const mapStateToProps = (state) => {
   };
 };
 
-const ImageInput = connect(mapStateToProps, {}, null, { withRef: true })(ImageInputComponent);
+const ImageInput = connect(mapStateToProps, {}, null, { forwardRef: true })(ImageInputComponent);
 export { ImageInput };