added styles for property size
This commit is contained in:
parent
045688390b
commit
b599d5f163
@ -7,7 +7,7 @@ import FileInput from '.';
|
|||||||
import Section from '../../../.storybook/decorators/section';
|
import Section from '../../../.storybook/decorators/section';
|
||||||
import { action } from '@storybook/addon-actions';
|
import { action } from '@storybook/addon-actions';
|
||||||
|
|
||||||
const sizeInput = ['base', 'middle', 'big', 'huge'];
|
const sizeInput = ['base', 'middle', 'big', 'huge', 'large'];
|
||||||
|
|
||||||
storiesOf('Components|Input', module)
|
storiesOf('Components|Input', module)
|
||||||
.addDecorator(withKnobs)
|
.addDecorator(withKnobs)
|
||||||
@ -20,7 +20,7 @@ storiesOf('Components|Input', module)
|
|||||||
const isDisabled = boolean('isDisabled', false);
|
const isDisabled = boolean('isDisabled', false);
|
||||||
const isReadOnly = boolean('isReadOnly', false);
|
const isReadOnly = boolean('isReadOnly', false);
|
||||||
const maxLength = number('maxLength', 255);
|
const maxLength = number('maxLength', 255);
|
||||||
const id = text('id', 'emailId');
|
const id = text('id', 'fileInputId');
|
||||||
const name = text('name', 'demoEmailInput');
|
const name = text('name', 'demoEmailInput');
|
||||||
|
|
||||||
const allowDomainPunycode = boolean('allowDomainPunycode', false);
|
const allowDomainPunycode = boolean('allowDomainPunycode', false);
|
||||||
@ -38,6 +38,7 @@ storiesOf('Components|Input', module)
|
|||||||
placeholder={placeholder}
|
placeholder={placeholder}
|
||||||
size={size}
|
size={size}
|
||||||
scale={scale}
|
scale={scale}
|
||||||
|
isDisabled={isDisabled}
|
||||||
/>
|
/>
|
||||||
</Section>
|
</Section>
|
||||||
);
|
);
|
||||||
|
@ -1,12 +1,55 @@
|
|||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import PropTypes from "prop-types";
|
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 {
|
class FileInput extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
const inputRef = React.createRef();
|
this.inputRef = React.createRef();
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
fileName: '',
|
fileName: '',
|
||||||
@ -16,6 +59,7 @@ class FileInput extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onIconFileClick = e => {
|
onIconFileClick = e => {
|
||||||
|
console.log('click')
|
||||||
e.target.blur();
|
e.target.blur();
|
||||||
this.inputRef.current.click();
|
this.inputRef.current.click();
|
||||||
}
|
}
|
||||||
@ -30,26 +74,51 @@ class FileInput extends Component {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { fileName } = this.state;
|
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(
|
return(
|
||||||
<InputBlock
|
<StyledFileInput size={size}>
|
||||||
|
<TextInput
|
||||||
value={fileName}
|
value={fileName}
|
||||||
iconName={"CatalogFolderIcon"}
|
|
||||||
placeholder={placeholder}
|
|
||||||
onIconClick={this.oIconFileClick}
|
|
||||||
onChange={this.onChangeFile}
|
onChange={this.onChangeFile}
|
||||||
oFocus={this.onIconFileClick}
|
onFocus={this.onIconFileClick}
|
||||||
size={size}
|
size={size}
|
||||||
scale={scale}
|
{...rest}
|
||||||
>
|
/>
|
||||||
<input
|
<input
|
||||||
type="file"
|
type="file"
|
||||||
onInput={this.onInputFile}
|
onInput={this.onInputFile}
|
||||||
ref={this.inputRef}
|
ref={this.inputRef}
|
||||||
style={{ display: 'none' }}
|
style={{ display: 'none' }}
|
||||||
/>
|
/>
|
||||||
</InputBlock>
|
<div className="icon">
|
||||||
|
<IconButton
|
||||||
|
iconName={"CatalogFolderIcon"}
|
||||||
|
size={iconSize}
|
||||||
|
onClick={this.onIconFileClick}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</StyledFileInput>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user