wix-style-react
Version:
wix-style-react
130 lines • 4.99 kB
JavaScript
import React, { Children, PureComponent } from 'react';
import PropTypes from 'prop-types';
import { DATA_HOOKS } from './constants';
import { st, classes } from './Range.st.css';
const ELEMENT_POSITION = {
first: 'first',
last: 'last',
};
const getFocusedElementPosition = (hasFocusFirst, hasFocusLast) => {
if (hasFocusFirst) {
return ELEMENT_POSITION.first;
}
if (hasFocusLast) {
return ELEMENT_POSITION.last;
}
};
class Range extends PureComponent {
constructor() {
super(...arguments);
this.state = {
hasFocusFirst: false,
hasFocusLast: false,
};
}
_doKeyDown(e) {
const keys = {
upArrow: 38,
downArrow: 40,
};
if (e.keyCode === keys.upArrow && !isNaN(e.target.value)) {
e.preventDefault();
e.target.value++;
}
if (e.keyCode === keys.downArrow && !isNaN(e.target.value)) {
e.preventDefault();
e.target.value--;
}
}
_handleFocusFirst() {
this.setState({ hasFocusFirst: true });
}
_handleBlurFirst() {
this.setState({ hasFocusFirst: false });
}
_handleFocusLast() {
this.setState({ hasFocusLast: true });
}
_handleBlurLast() {
this.setState({ hasFocusLast: false });
}
render() {
const { children, dataHook } = this.props;
const { hasFocusFirst, hasFocusLast } = this.state;
const childrenArr = Children.toArray(children);
const rangeType = children[1].type.displayName;
const label = children.length === 3 ? (React.createElement("div", { className: classes.label, "data-hook": DATA_HOOKS.label }, children[0])) : null;
const firstInput = childrenArr.length === 3 ? childrenArr[1] : childrenArr[0];
const lastInput = childrenArr.length === 3 ? childrenArr[2] : childrenArr[1];
const additionalFirstInputProps = {
className: rangeType === 'DatePicker' ? classes.firstDate : classes.firstinput,
noRightBorderRadius: true,
onKeyDown: e => {
this._doKeyDown(e);
if (typeof firstInput.props.onKeyDown === 'function') {
firstInput.props.onKeyDown(e);
}
},
onFocus: e => {
this._handleFocusFirst(e);
if (typeof firstInput.props.onFocus === 'function') {
firstInput.props.onFocus(e);
}
},
onBlur: e => {
this._handleBlurFirst(e);
if (typeof firstInput.props.onBlur === 'function') {
firstInput.props.onBlur(e);
}
},
...(rangeType === 'DatePicker' &&
!!firstInput.props.inputProps &&
firstInput.props.inputProps),
};
const additionalLastInputProps = {
className: rangeType === 'DatePicker' ? classes.lastDate : classes.lastinput,
noLeftBorderRadius: true,
onKeyDown: e => {
this._doKeyDown(e);
if (typeof lastInput.props.onKeyDown === 'function') {
lastInput.props.onKeyDown(e);
}
},
onFocus: e => {
this._handleFocusLast(e);
if (typeof lastInput.props.onFocus === 'function') {
lastInput.props.onFocus(e);
}
},
onBlur: e => {
this._handleBlurLast(e);
if (typeof lastInput.props.onBlur === 'function') {
lastInput.props.onBlur(e);
}
},
...(rangeType === 'DatePicker' &&
!!lastInput.props.inputProps &&
lastInput.props.inputProps),
};
return (React.createElement("div", { "data-hook": dataHook, className: st(classes.root, {
focusedElementPosition: getFocusedElementPosition(hasFocusFirst, hasFocusLast),
}) },
label,
React.createElement("div", { className: classes.inputWrapper, "data-hook": DATA_HOOKS.inputWrapper },
React.cloneElement(firstInput, rangeType === 'DatePicker'
? { inputProps: additionalFirstInputProps }
: additionalFirstInputProps),
React.cloneElement(lastInput, rangeType === 'DatePicker'
? { inputProps: additionalLastInputProps }
: additionalLastInputProps))));
}
}
Range.displayName = 'Range';
Range.propTypes = {
/** Applies a data-hook HTML attribute that can be used in the tests. */
dataHook: PropTypes.string,
/** Accept any component as a child item. At the moment it is most commonly used with `<DatePicker/>` or `<Input/>`*/
children: PropTypes.any,
};
export default Range;
//# sourceMappingURL=Range.js.map