wix-style-react
Version:
wix-style-react
171 lines (170 loc) • 6.75 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _constants = require("./constants");
var _RangeSt = require("./Range.st.css");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Range/Range.js";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var ELEMENT_POSITION = {
first: 'first',
last: 'last'
};
var getFocusedElementPosition = (hasFocusFirst, hasFocusLast) => {
if (hasFocusFirst) {
return ELEMENT_POSITION.first;
}
if (hasFocusLast) {
return ELEMENT_POSITION.last;
}
};
class Range extends _react.PureComponent {
constructor() {
super(...arguments);
this.state = {
hasFocusFirst: false,
hasFocusLast: false
};
}
_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--;
}
}
_handleFocusFirst() {
this.setState({
hasFocusFirst: true
});
}
_handleBlurFirst() {
this.setState({
hasFocusFirst: false
});
}
_handleFocusLast() {
this.setState({
hasFocusLast: true
});
}
_handleBlurLast() {
this.setState({
hasFocusLast: false
});
}
render() {
var {
children,
dataHook
} = this.props;
var {
hasFocusFirst,
hasFocusLast
} = this.state;
var childrenArr = _react.Children.toArray(children);
var rangeType = children[1].type.displayName;
var label = children.length === 3 ? /*#__PURE__*/_react.default.createElement("div", {
className: _RangeSt.classes.label,
"data-hook": _constants.DATA_HOOKS.label,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 65,
columnNumber: 9
}
}, children[0]) : 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' ? _RangeSt.classes.firstDate : _RangeSt.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);
var additionalLastInputProps = _objectSpread({
className: rangeType === 'DatePicker' ? _RangeSt.classes.lastDate : _RangeSt.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 /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
className: (0, _RangeSt.st)(_RangeSt.classes.root, {
focusedElementPosition: getFocusedElementPosition(hasFocusFirst, hasFocusLast)
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 136,
columnNumber: 7
}
}, label, /*#__PURE__*/_react.default.createElement("div", {
className: _RangeSt.classes.inputWrapper,
"data-hook": _constants.DATA_HOOKS.inputWrapper,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.cloneElement(firstInput, rangeType === 'DatePicker' ? {
inputProps: additionalFirstInputProps
} : additionalFirstInputProps), /*#__PURE__*/_react.default.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.default.string,
/** Accept any component as a child item. At the moment it is most commonly used with `<DatePicker/>` or `<Input/>`*/
children: _propTypes.default.any
};
var _default = exports.default = Range;
//# sourceMappingURL=Range.js.map