wix-style-react
Version:
200 lines (172 loc) • 7.82 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
import React, { Children, PureComponent } from 'react';
import PropTypes from 'prop-types';
import FieldLabelAttributes from '../FieldLabelAttributes/FieldLabelAttributes';
import { DATA_HOOKS } from './constants';
import { st, classes } from './Range.st.css';
var ELEMENT_POSITION = {
first: 'first',
last: 'last'
};
var getFocusedElementPosition = function getFocusedElementPosition(hasFocusFirst, hasFocusLast) {
if (hasFocusFirst) {
return ELEMENT_POSITION.first;
}
if (hasFocusLast) {
return ELEMENT_POSITION.last;
}
};
var Range = /*#__PURE__*/function (_PureComponent) {
_inherits(Range, _PureComponent);
var _super = _createSuper(Range);
function Range() {
var _this;
_classCallCheck(this, Range);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "state", {
hasFocusFirst: false,
hasFocusLast: false
});
return _this;
}
_createClass(Range, [{
key: "_doKeyDown",
value: function _doKeyDown(e) {
var 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--;
}
}
}, {
key: "_handleFocusFirst",
value: function _handleFocusFirst() {
this.setState({
hasFocusFirst: true
});
}
}, {
key: "_handleBlurFirst",
value: function _handleBlurFirst() {
this.setState({
hasFocusFirst: false
});
}
}, {
key: "_handleFocusLast",
value: function _handleFocusLast() {
this.setState({
hasFocusLast: true
});
}
}, {
key: "_handleBlurLast",
value: function _handleBlurLast() {
this.setState({
hasFocusLast: false
});
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props = this.props,
children = _this$props.children,
dataHook = _this$props.dataHook;
var _this$state = this.state,
hasFocusFirst = _this$state.hasFocusFirst,
hasFocusLast = _this$state.hasFocusLast;
var childrenArr = Children.toArray(children);
var rangeType = children[1].type.displayName;
var label = children.length === 3 ? /*#__PURE__*/React.createElement("div", {
className: classes.label,
"data-hook": DATA_HOOKS.label
}, children[0], this.props.required || this.props.info || this.props.tooltip ? /*#__PURE__*/React.createElement(FieldLabelAttributes, {
dataHook: "field-label-attributes",
required: this.props.required,
info: this.props.info,
tooltip: this.props.tooltip,
appendToParent: this.props.appendToParent
}) : null) : null;
var firstInput = childrenArr.length === 3 ? childrenArr[1] : childrenArr[0];
var lastInput = childrenArr.length === 3 ? childrenArr[2] : childrenArr[1];
var additionalFirstInputProps = _objectSpread({
className: rangeType === 'DatePicker' ? classes.firstDate : classes.firstinput,
noRightBorderRadius: true,
onKeyDown: function onKeyDown(e) {
return _this2._doKeyDown(e);
},
onFocus: function onFocus(e) {
return _this2._handleFocusFirst(e);
},
onBlur: function onBlur(e) {
return _this2._handleBlurFirst(e);
}
}, rangeType === 'DatePicker' && !!firstInput.props.inputProps && firstInput.props.inputProps);
var additionalLastInputProps = _objectSpread({
className: rangeType === 'DatePicker' ? classes.lastDate : classes.lastinput,
noLeftBorderRadius: true,
onKeyDown: function onKeyDown(e) {
return _this2._doKeyDown(e);
},
onFocus: function onFocus(e) {
return _this2._handleFocusLast(e);
},
onBlur: function onBlur(e) {
return _this2._handleBlurLast(e);
}
}, rangeType === 'DatePicker' && !!lastInput.props.inputProps && lastInput.props.inputProps);
return /*#__PURE__*/React.createElement("div", {
"data-hook": dataHook,
className: st(classes.root, {
focusedElementPosition: getFocusedElementPosition(hasFocusFirst, hasFocusLast)
})
}, label, /*#__PURE__*/React.createElement("div", {
className: classes.inputWrapper,
"data-hook": DATA_HOOKS.inputWrapper
}, /*#__PURE__*/React.cloneElement(firstInput, rangeType === 'DatePicker' ? {
inputProps: additionalFirstInputProps
} : additionalFirstInputProps), /*#__PURE__*/React.cloneElement(lastInput, rangeType === 'DatePicker' ? {
inputProps: additionalLastInputProps
} : additionalLastInputProps)));
}
}]);
return Range;
}(PureComponent);
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,
/** @deprecated Do not use this prop */
required: PropTypes.bool,
/** @deprecated Do not use this prop */
info: PropTypes.string,
/** @deprecated Do not use this prop */
appendToParent: PropTypes.bool
};
Range.defaultProps = {
appendToParent: false
};
export default Range;