Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 10:42:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Input refactored to use React.createElement for maximum code reuse

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-01-30 16:02:31 +02:00
parent 3f71e9eca7
commit 4351ad1ed5
1 changed files with 24 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
src/common/Input/Input.js
View file

@ -3,8 +3,18 @@ import PropTypes from 'prop-types';
import { withFocusable } from 'stremio-common';
const ENTER_KEY_CODE = 13;
const BUTTON_INPUT_TYPES = ['button', 'submit', 'link', 'checkbox'];
const TEXT_INPUT_TYPES = ['text', 'password', 'email'];
const BUTTON_INPUT_TYPES = ['button', 'link', 'submit', 'checkbox'];
const TEXT_INPUT_TYPES = ['text', 'password', 'email', 'search'];
const TAG_NAMES_FOR_TYPE = {
button: 'div',
link: 'a',
submit: 'input',
checkbox: 'input',
text: 'input',
password: 'input',
email: 'input',
search: 'input'
};
class Input extends PureComponent {
onClick = (event) => {
@ -48,45 +58,18 @@ class Input extends PureComponent {
}
render() {
const { forwardedRef, focusable, type, ...props } = this.props;
if (type === 'button') {
return (
<div
{...props}
ref={forwardedRef}
tabIndex={focusable ? 0 : -1}
onKeyUp={this.onKeyUp}
onDrag={this.onDrag}
onMouseOut={this.onMouseOut}
/>
);
}
if (type === 'link') {
return (
<a
{...props}
ref={forwardedRef}
tabIndex={focusable ? 0 : -1}
onKeyUp={this.onKeyUp}
onDrag={this.onDrag}
onMouseOut={this.onMouseOut}
/>
);
}
return (
<input
{...props}
ref={forwardedRef}
tabIndex={focusable ? 0 : -1}
type={type}
onKeyUp={this.onKeyUp}
onDrag={this.onDrag}
onMouseOut={this.onMouseOut}
/>
);
const { forwardedRef, focusable, type, children, ...props } = this.props;
const tagName = TAG_NAMES_FOR_TYPE[type];
const elementProps = {
...props,
ref: forwardedRef,
type: tagName === 'input' ? type : null,
tabIndex: focusable ? 0 : -1,
onKeyUp: this.onKeyUp,
onDrag: this.onDrag,
onMouseOut: this.onMouseOut
};
return React.createElement(tagName, elementProps, children);
}
}