Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

inputs combined in one component

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-01-30 14:56:33 +02:00
parent 4d88542e2f
commit 9e3dda9c12
6 changed files with 78 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
src/common/Button/Button.js
View file

@ -1,77 +0,0 @@
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { withFocusable } from 'stremio-common';
class Button extends PureComponent {
onClick = (event) => {
if (this.props.stopPropagation) {
event.stopPropagation();
}
if (typeof this.props.onClick === 'function') {
this.props.onClick(event);
}
}
onKeyUp = (event) => {
if (event.which === 13) { // Enter key code
this.onClick(event);
}
if (typeof this.props.onKeyUp === 'function') {
this.props.onKeyUp(event);
}
}
onDrag = (event) => {
event.currentTarget.blur();
if (typeof this.props.onDrag === 'function') {
this.props.onDrag(event);
}
}
onMouseOut = (event) => {
event.currentTarget.blur();
if (typeof this.props.onMouseOut === 'function') {
this.props.onMouseOut(event);
}
}
render() {
const { forwardedRef, focusable, stopPropagation, ...props } = this.props;
return (
<div
{...props}
ref={forwardedRef}
tabIndex={focusable ? 0 : -1}
onClick={this.onClick}
onKeyUp={this.onKeyUp}
onDrag={this.onDrag}
onMouseOut={this.onMouseOut}
/>
);
}
}
Button.propTypes = {
focusable: PropTypes.bool.isRequired,
stopPropagation: PropTypes.bool.isRequired
};
Button.defaultProps = {
focusable: false,
stopPropagation: true
};
const ButtonWithFocusable = withFocusable(Button);
ButtonWithFocusable.displayName = 'ButtonWithFocusable';
const ButtonWithForwardedRef = React.forwardRef((props, ref) => (
<ButtonWithFocusable {...props} forwardedRef={ref} />
));
ButtonWithForwardedRef.displayName = 'ButtonWithForwardedRef';
export default ButtonWithForwardedRef;

3
src/common/Button/index.js
View file

@ -1,3 +0,0 @@
import Button from './Button';
export default Button;

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

@ -2,20 +2,96 @@ import React, { PureComponent } from 'react';
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'];
class Input extends PureComponent {
onClick = (event) => {
if (typeof this.props.onClick === 'function') {
this.props.onClick(event);
}
if (this.props.type === 'checkbox') {
event.preventDefault();
}
}
onKeyUp = (event) => {
if (typeof this.props.onKeyUp === 'function') {
this.props.onKeyUp(event);
}
if (!event.defaultPrevented && BUTTON_INPUT_TYPES.includes(this.props.type) && event.which === ENTER_KEY_CODE) {
event.currentTarget.click();
}
}
onDrag = (event) => {
if (typeof this.props.onDrag === 'function') {
this.props.onDrag(event);
}
if (!event.defaultPrevented && BUTTON_INPUT_TYPES.includes(this.props.type)) {
event.currentTarget.blur();
}
}
onMouseOut = (event) => {
if (typeof this.props.onMouseOut === 'function') {
this.props.onMouseOut(event);
}
if (!event.defaultPrevented && BUTTON_INPUT_TYPES.includes(this.props.type)) {
event.currentTarget.blur();
}
}
render() {
const { forwardedRef, focusable, ...props } = this.props;
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}
/>
);
}
}
Input.propTypes = {
type: PropTypes.oneOf([...BUTTON_INPUT_TYPES, ...TEXT_INPUT_TYPES]).isRequired,
focusable: PropTypes.bool.isRequired
};
Input.defaultProps = {

35
src/common/Link/Link.js
View file

@ -1,35 +0,0 @@
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { withFocusable } from 'stremio-common';
class Link extends PureComponent {
render() {
const { forwardedRef, focusable, ...props } = this.props;
return (
<a
{...props}
ref={forwardedRef}
tabIndex={focusable ? 0 : -1}
/>
);
}
}
Link.propTypes = {
focusable: PropTypes.bool.isRequired
};
Link.defaultProps = {
focusable: false
};
const LinkWithFocusable = withFocusable(Link);
LinkWithFocusable.displayName = 'LinkWithFocusable';
const LinkWithForwardedRef = React.forwardRef((props, ref) => (
<LinkWithFocusable {...props} forwardedRef={ref} />
));
LinkWithForwardedRef.displayName = 'LinkWithForwardedRef';
export default LinkWithForwardedRef;

3
src/common/Link/index.js
View file

@ -1,3 +0,0 @@
import Link from './Link';
export default Link;

6
src/common/index.js
View file

@ -1,9 +1,7 @@
import Slider from './Slider';
import { FocusableProvider, withFocusable } from './Focusable';
import Button from './Button';
import Checkbox from './Checkbox';
import Input from './Input';
import Link from './Link';
import { Modal, ModalsContainerContext, withModalsContainer } from './Modal';
import Popup from './Popup';
import Router from './Router';
@ -15,7 +13,6 @@ import UserPanel from './UserPanel';
export {
Checkbox,
Input,
Link,
Popup,
NavBar,
ModalsContainerContext,
@ -27,6 +24,5 @@ export {
UserPanel,
Slider,
FocusableProvider,
withFocusable,
Button
withFocusable
};