review file form

olegstan · Apr 17, 2024 · f659856 · f659856
1 parent 30f7d8b
commit f659856
Show file tree

Hide file tree

Showing 10 changed files with 174 additions and 27 deletions.
diff --git a/dist/Form/File.js b/dist/Form/File.js
@@ -30,6 +30,16 @@ export default class File extends BaseInput {
     error: '',
     style: {}
   };
+  componentDidMount() {
+    const fileInput = document.getElementById(this.props.id);
+    const myFile = new File(['Hello World!'], 'myFile.txt', {
+      type: 'text/plain',
+      lastModified: new Date()
+    });
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(myFile);
+    fileInput.files = dataTransfer.files;
+  }
   render() {
     let style = {};
     if (this.props.style) {
@@ -50,6 +60,7 @@ export default class File extends BaseInput {
     if (this.props.value && typeof this.props.value.name === 'string') {
       empty = false;
     }
+    console.log(this.props);
     return /*#__PURE__*/React.createElement(Container, {
       style: style,
       size: this.props.size,

diff --git a/dist/Form/FileInput.js b/dist/Form/FileInput.js
@@ -0,0 +1,115 @@
+import React from 'react';
+import BaseInput from './BaseInput';
+import { InputContainer, StyledInput } from './newstyles';
+import { Container } from './styles/containerStyle';
+import { detect } from 'detect-browser';
+export default class FileInput extends BaseInput {
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: null,
+      focused: false,
+      hasError: false
+    };
+    this.setWrapperRef = this.setWrapperRef.bind(this);
+    this.handleClickOutside = this.handleClickOutside.bind(this);
+  }
+
+  /**
+   *
+   */
+  static defaultProps = {
+    onKeyPress: () => {},
+    onChange: () => {},
+    disabled: false,
+    value: null,
+    placeholder: '',
+    icon: '',
+    className: '',
+    wrapperClassName: '',
+    error: '',
+    style: {}
+  };
+  componentDidMount() {
+    const fileInput = document.getElementById(this.props.id);
+    const file = new File([], this.props.valueText, {
+      type: 'text/plain',
+      lastModified: new Date()
+    });
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(file);
+    fileInput.files = dataTransfer.files;
+  }
+  render() {
+    let style = {};
+    if (this.props.style) {
+      style = {
+        ...this.props.style
+      };
+    }
+    const {
+      name
+    } = this.props;
+    let focus = this.state.focused ? '1px solid #1874DE' : '';
+    if (this.state.hasError === true) {
+      focus = '1px solid #EF5E70';
+    }
+    style.border = focus;
+    const browser = detect();
+    let empty = true;
+    if (this.props.value && typeof this.props.value.name === 'string') {
+      empty = false;
+    }
+    console.log(this.props);
+    return /*#__PURE__*/React.createElement(Container, {
+      style: style,
+      size: this.props.size,
+      disabled: this.props.disabled,
+      className: this.props.className + (this.props.disabled ? ' disabled' : ''),
+      onClick: e => {
+        e.stopPropagation();
+      }
+    }, /*#__PURE__*/React.createElement(InputContainer, {
+      ref: this.setWrapperRef
+    }, /*#__PURE__*/React.createElement(StyledInput, {
+      browser: browser && browser.name,
+      id: this.props.id,
+      size: this.props.size,
+      disabled: this.props.disabled,
+      className: this.props.className,
+      type: "file",
+      name: this.getName(name),
+      placeholder: this.props.placeholder,
+      onChange: e => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          const base64String = reader.result;
+          this.props.onChange(e, {
+            name: this.props.name,
+            value: {
+              name: e.target.files[0].name,
+              content: base64String
+            }
+          });
+        };
+        reader.readAsDataURL(e.target.files[0]);
+        this.setState({
+          hasError: false
+        });
+      }
+    }), this.renderPlaceholder(), !empty && typeof this.props.size === 'undefined' && !this.props.disabled && /*#__PURE__*/React.createElement("img", {
+      className: "close",
+      src: require('./../assets/ic_close_only.svg').default,
+      onClick: e => {
+        this.props.onChange(e, {
+          name: this.props.name,
+          value: null
+        });
+        this.setState({
+          hasError: false
+        });
+      },
+      alt: ""
+    }), this.renderTooltipError()));
+  }
+}
diff --git a/dist/Form/functions/formFile.js b/dist/Form/functions/formFile.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import File from "../File";
+import FileInput from "./../FileInput";
 export default function formFile(Base) {
-  class FormFile extends Base {
+  class FormFileInput extends Base {
     renderFileInput({
       field,
       text,
@@ -11,16 +11,18 @@ export default function formFile(Base) {
       style,
       className,
       onKeyPress = () => {},
-      onKeyDown = () => {}
+      onKeyDown = () => {},
+      valueText
     } = {}) {
       let link = this.getLink(field);
       let value = link === null ? '' : link;
-      return /*#__PURE__*/React.createElement(File, {
+      return /*#__PURE__*/React.createElement(FileInput, {
         id: this.getPrefix() + field,
         style: style,
         type: "text",
         name: field,
         size: size,
+        valueText: valueText,
         className: className,
         disabled: this.getDisabled(disabled),
         value: value,
@@ -43,5 +45,5 @@ export default function formFile(Base) {
       });
     }
   }
-  return FormFile;
+  return FormFileInput;
 }
diff --git a/dist/Form/newstyles.js b/dist/Form/newstyles.js
@@ -124,11 +124,8 @@ export const sharedCheckboxStyle = css`
   }
 
   .checkbox {
-    margin: 7px 5px 0 0;
+    margin: 0;
     cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
   }
 
@@ -250,9 +247,13 @@ export const sharedSearchContainer = css`
   margin: 15px 10px;
   width: 100%;
   min-width: 100px;
-  border-radius: 10px;
+  border-radius: 8px;
   position: relative;
   border: 1px solid #D2D1D1;
+  
+  input{
+    border-radius: 6px;
+  }
 
   &.style1 .select, &.style1 .item, &.style1 .selected, &.style1 .wrapper {
     background: #F5F5F5;

diff --git a/dist/index.js b/dist/index.js
@@ -2,7 +2,7 @@ import Button from "./Form/Button";
 import Checkbox from "./Form/Checkbox";
 import Date from "./Form/Date";
 import DateTime from "./Form/DateTime";
-import File from "./Form/File";
+import FileInput from "./Form/FileInput";
 import Form from "./Form/Form";
 import Input from "./Form/Input";
 import MaskedInput from "./Form/MaskedInput";
@@ -32,4 +32,4 @@ import formSelect from "./Form/functions/formSelect";
 import getLink from "./Form/functions/getLink";
 import receivePropsUserId from "./Form/functions/receivePropsUserId";
 import setField from "./Form/functions/setField";
-export { Button, Checkbox, Date, DateTime, File, Form, Input, MaskedInput, ModalForm, NumberInput, SlimInput, TextArea, AccountGroupSelect, SlimAccountGroupSelect, GroupMultipleSelect, GroupRemoteSearch, GroupSelect, InputPopup, MultipleSelect, RelationGroupSelect, Search, RemoteSearch, SearchMultiple, Select, formAccountGroupSelect, formCheckbox, formDate, formFile, formInput, formSearch, formSelect, getLink, receivePropsUserId, setField };
+export { Button, Checkbox, Date, DateTime, FileInput, Form, Input, MaskedInput, ModalForm, NumberInput, SlimInput, TextArea, AccountGroupSelect, SlimAccountGroupSelect, GroupMultipleSelect, GroupRemoteSearch, GroupSelect, InputPopup, MultipleSelect, RelationGroupSelect, Search, RemoteSearch, SearchMultiple, Select, formAccountGroupSelect, formCheckbox, formDate, formFile, formInput, formSearch, formSelect, getLink, receivePropsUserId, setField };
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "finform",
-  "version": "1.3.91",
+  "version": "1.3.98",
   "description": "",
   "main": "dist/index.js",
   "repository": {

diff --git a/src/Form/File.jsx → src/Form/FileInput.jsx b/src/Form/File.jsx → src/Form/FileInput.jsx
@@ -5,7 +5,7 @@ import {Container} from './styles/containerStyle'
 import {detect} from 'detect-browser'
 
 
-export default class File extends BaseInput {
+export default class FileInput extends BaseInput {
 
   constructor(props)
   {
@@ -38,6 +38,20 @@ export default class File extends BaseInput {
     style: {}
   };
 
+  componentDidMount()
+  {
+    const fileInput = document.getElementById(this.props.id);
+
+    const file = new File([], this.props.valueText, {
+      type: 'text/plain',
+      lastModified: new Date(),
+    });
+
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(file);
+    fileInput.files = dataTransfer.files;
+  }
+
   render()
   {
     let style = {}
@@ -69,6 +83,8 @@ export default class File extends BaseInput {
       empty = false;
     }
 
+    console.log(this.props)
+
     return <Container
       style={style}
       size={this.props.size}
@@ -97,7 +113,7 @@ export default class File extends BaseInput {
               this.props.onChange(e, {
                 name: this.props.name,
                 value: {
-                  name:e.target.files[0].name,
+                  name: e.target.files[0].name,
                   content: base64String
                 },
               });

diff --git a/src/Form/functions/formFile.jsx b/src/Form/functions/formFile.jsx
@@ -1,21 +1,22 @@
 import React from 'react';
-import File from "../File";
+import FileInput from "./../FileInput";
 
 export default function formFile(Base)
 {
-  class FormFile extends Base
+  class FormFileInput extends Base
   {
-    renderFileInput({field, text, disabled = false, callback, size, style, className, onKeyPress = () => {}, onKeyDown = () => {}} = {})
+    renderFileInput({field, text, disabled = false, callback, size, style, className, onKeyPress = () => {}, onKeyDown = () => {}, valueText} = {})
     {
       let link = this.getLink(field);
       let value = link === null ? '' : link;
 
-      return <File
+      return <FileInput
         id={this.getPrefix() + field}
         style={style}
         type="text"
         name={field}
         size={size}
+        valueText={valueText}
         className={className}
         disabled={this.getDisabled(disabled)}
         value={value}
@@ -39,5 +40,5 @@ export default function formFile(Base)
 
   }
 
-  return FormFile;
+  return FormFileInput;
 }
diff --git a/src/Form/newstyles.js b/src/Form/newstyles.js
@@ -128,11 +128,8 @@ export const sharedCheckboxStyle = css`
   }
 
   .checkbox {
-    margin: 7px 5px 0 0;
+    margin: 0;
     cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
   }
 
@@ -257,9 +254,13 @@ export const sharedSearchContainer = css`
   margin: 15px 10px;
   width: 100%;
   min-width: 100px;
-  border-radius: 10px;
+  border-radius: 8px;
   position: relative;
   border: 1px solid #D2D1D1;
+  
+  input{
+    border-radius: 6px;
+  }
 
   &.style1 .select, &.style1 .item, &.style1 .selected, &.style1 .wrapper {
     background: #F5F5F5;

diff --git a/src/index.js b/src/index.js
@@ -2,7 +2,7 @@ import Button from "./Form/Button";
 import Checkbox from "./Form/Checkbox";
 import Date from "./Form/Date";
 import DateTime from "./Form/DateTime";
-import File from "./Form/File";
+import FileInput from "./Form/FileInput";
 import Form from "./Form/Form";
 import Input from "./Form/Input";
 import MaskedInput from "./Form/MaskedInput";
@@ -50,7 +50,7 @@ export {
   Checkbox,
   Date,
   DateTime,
-  File,
+  FileInput,
   Form,
   Input,
   MaskedInput,