added styles for property size

web/ASC.Web.Components/src/components/file-input/file-input.stories.js

@@ -7,7 +7,7 @@ import FileInput from '.';
 import Section from '../../../.storybook/decorators/section';
 import { action } from '@storybook/addon-actions';
 
-const sizeInput = ['base', 'middle', 'big', 'huge'];
+const sizeInput = ['base', 'middle', 'big', 'huge', 'large'];
 
 storiesOf('Components|Input', module)
   .addDecorator(withKnobs)
@@ -20,7 +20,7 @@ storiesOf('Components|Input', module)
     const isDisabled = boolean('isDisabled', false);
     const isReadOnly = boolean('isReadOnly', false);
     const maxLength = number('maxLength', 255);
-    const id = text('id', 'emailId');
+    const id = text('id', 'fileInputId');
     const name = text('name', 'demoEmailInput');
 
     const allowDomainPunycode = boolean('allowDomainPunycode', false);
@@ -38,6 +38,7 @@ storiesOf('Components|Input', module)
           placeholder={placeholder}
           size={size}
           scale={scale}
+          isDisabled={isDisabled}
         />
       </Section>
     );

web/ASC.Web.Components/src/components/file-input/index.js

@@ -1,12 +1,55 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import InputBlock from "../input-block";
+import styled, { css } from 'styled-components';
+
+import IconButton from '../icon-button';
+import TextInput from '../text-input';
+
+const btnIconSize = css`
+
+`;
+
+
+const StyledFileInput = styled.div`
+  display: flex;
+
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    position: absolute;
+    right: 16px;
+
+    width: ${props => props.size === 'large' ? '48px'
+      : props.size === 'huge' ? '38px'
+        : props.size === 'big' ? '37px'
+          : props.size === 'middle' ? '36px'
+            : '30px'
+    };
+
+    height: ${props => props.size === 'large' ? '43px'
+      : props.size === 'huge' ? '37px'
+        : props.size === 'big' ? '36px'
+          : props.size === 'middle' ? '36px'
+            : '30px'
+    };
+
+    margin: 0;
+    border: 1px solid #D0D5DA;
+    border-radius: 0 3px 3px 0;
+
+    :hover {
+      cursor: pointer;
+    }
+  }
+`;
 
 class FileInput extends Component { 
   constructor(props) {
     super(props);
 
-    const inputRef = React.createRef();
+    this.inputRef = React.createRef();
 
     this.state = {
       fileName: '',
@@ -16,6 +59,7 @@ class FileInput extends Component {
   }
 
   onIconFileClick = e => {
+    console.log('click')
     e.target.blur();
     this.inputRef.current.click();
   }
@@ -30,26 +74,51 @@ class FileInput extends Component {
 
   render() {
     const { fileName } = this.state;
-    const { placeholder, size, scale } = this.props;
+    const { size, ...rest } = this.props;
+
+    let iconSize = 0;
+
+    switch (size) {
+      case 'base':
+        iconSize = 15;
+        break;
+      case 'middle':
+        iconSize = 15;
+        break;
+      case 'big':
+        iconSize = 16;
+        break;
+      case 'huge':
+        iconSize = 16;
+        break;
+      case 'large': 
+        iconSize = 16;
+        break;
+    }
     
     return( 
-      <InputBlock
+      <StyledFileInput size={size}>
+        <TextInput
           value={fileName}
-        iconName={"CatalogFolderIcon"}
-        placeholder={placeholder}
-        onIconClick={this.oIconFileClick}
           onChange={this.onChangeFile}
-        oFocus={this.onIconFileClick}
+          onFocus={this.onIconFileClick}
           size={size}
-        scale={scale}
-      >
+          {...rest}
+        />
           <input
             type="file"
             onInput={this.onInputFile}
             ref={this.inputRef}
             style={{ display: 'none' }}
           />
-      </InputBlock>
+        <div className="icon">
+          <IconButton 
+            iconName={"CatalogFolderIcon"}
+            size={iconSize}
+            onClick={this.onIconFileClick}
+          />
+        </div>
+      </StyledFileInput>
     )
   }
 }