diff --git a/lib/index.js b/lib/index.js index 048fcf3..bdee6d9 100644 --- a/lib/index.js +++ b/lib/index.js @@ -1,65 +1,55 @@ -var React = require('react'); +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; -var FileInput = React.createClass({ - getInitialState: function() { - return { - value: '', - styles: { - parent: { - position: 'relative' - }, - file: { - position: 'absolute', - top: 0, - left: 0, - opacity: 0, - width: '100%', - zIndex: 1 - }, - text: { - position: 'relative', - zIndex: -1 - } - } - }; - }, +class FileInput extends Component { + static propTypes={ + name: PropTypes.string, + className: PropTypes.string, + onChange: PropTypes.func, + disabled: PropTypes.bool, + accept: PropTypes.string, + onChange: PropTypes.func, + }; - handleChange: function(e) { + state={ + value: '', + }; + + handleChange(e) { this.setState({ - value: e.target.value.split(/(\\|\/)/g).pop() + value: e.target.value.split(/(\\|\/)/g).pop(), }); if (this.props.onChange) this.props.onChange(e); - }, - - render: function() { - return React.DOM.div({ - style: this.state.styles.parent - }, - - // Actual file input - React.DOM.input({ - type: 'file', - name: this.props.name, - className: this.props.className, - onChange: this.handleChange, - disabled: this.props.disabled, - accept: this.props.accept, - style: this.state.styles.file - }), + } - // Emulated file input - React.DOM.input({ - type: 'text', - tabIndex: -1, - name: this.props.name + '_filename', - value: this.state.value, - className: this.props.className, - onChange: function() {}, - placeholder: this.props.placeholder, - disabled: this.props.disabled, - style: this.state.styles.text - })); + render() { + return ( +
+ this.handleChange(e)} + /> + +
+ ); } -}); +} -module.exports = FileInput; +export default FileInput; diff --git a/package.json b/package.json index eccaad0..b197455 100644 --- a/package.json +++ b/package.json @@ -26,5 +26,8 @@ "homepage": "https://github.com/captivationsoftware/react-file-input", "peerDependencies": { "react": "0.x" + }, + "dependencies": { + "react": "^16.2.0" } }