mirror of https://github.com/sgoudham/carbon.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.1 KiB
JavaScript
58 lines
1.1 KiB
JavaScript
6 years ago
|
import React from 'react'
|
||
|
|
|
||
|
|
import { COLORS } from '../lib/constants'
|
||
|
|
|
||
|
|
const Input = ({
|
||
|
|
accept,
|
||
|
|
color = COLORS.SECONDARY,
|
||
|
|
name,
|
||
|
|
onChange = () => {},
|
||
|
|
placeholder,
|
||
|
|
title,
|
||
|
|
type,
|
||
|
|
value,
|
||
|
|
align = 'right'
|
||
|
|
}) => {
|
||
|
|
return (
|
||
|
|
<React.Fragment>
|
||
|
|
<input
|
||
|
|
type={type}
|
||
|
|
accept={accept}
|
||
|
|
title={title}
|
||
|
|
placeholder={placeholder}
|
||
|
|
value={value}
|
||
|
|
name={name}
|
||
|
|
onChange={onChange}
|
||
|
|
/>
|
||
|
|
<style jsx>
|
||
|
|
{`
|
||
|
|
input {
|
||
|
|
width: 100%;
|
||
|
|
font-size: 12px;
|
||
|
|
color: ${color};
|
||
|
|
background: transparent;
|
||
|
|
border: none;
|
||
|
|
outline: none;
|
||
|
|
text-align: ${align};
|
||
|
|
overflow: hidden;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
|
||
|
|
input::placeholder {
|
||
|
|
color: ${color};
|
||
|
|
opacity: 0.4;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type='file'] {
|
||
|
|
cursor: pointer;
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
`}
|
||
|
|
</style>
|
||
|
|
</React.Fragment>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Input
|