chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
225 lines (223 loc) • 9.79 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _clsx = _interopRequireDefault(require("clsx"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _Overlay = _interopRequireDefault(require("../../components/overlay/Overlay"));
var _Input = _interopRequireDefault(require("../../react-chayns-input/component/Input"));
var _is = require("../../utils/is");
var _isServer = require("../../utils/isServer");
var _Icon = _interopRequireDefault(require("../../react-chayns-icon/component/Icon"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const InputBox = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
const {
inputComponent: InputComponent = _Input.default,
children,
parent,
inputRef,
onFocus,
className,
overlayProps,
boxClassName,
style,
onBlur,
hasOpenCloseIcon = false,
renderInline = false,
hideInput = false,
...restProps
} = props;
const wrapperRef = (0, _react.useRef)();
const boxRef = (0, _react.useRef)();
const hasTouchStartedRef = (0, _react.useRef)(false);
const [isHidden, setIsHidden] = (0, _react.useState)(true);
const [rect, setRect] = (0, _react.useState)(null);
(0, _react.useLayoutEffect)(() => {
if (wrapperRef.current && !isHidden) {
var _parentRect$top, _parentRect$top2, _parentRect$left;
const wrapperRect = wrapperRef.current.getBoundingClientRect();
const parentElement = !(0, _isServer.isServer)() ? parent || document.body : null;
const parentRect = parentElement === null || parentElement === void 0 ? void 0 : parentElement.getBoundingClientRect();
const isParentRelative = parentElement ? ['absolute', 'relative'].includes(getComputedStyle(parentElement).position) || parentElement === document.body : false;
setRect({
top: wrapperRect.top - (isParentRelative ? ((_parentRect$top = parentRect === null || parentRect === void 0 ? void 0 : parentRect.top) !== null && _parentRect$top !== void 0 ? _parentRect$top : 0) - parentElement.scrollTop : 0),
bottom: wrapperRect.bottom - (isParentRelative ? ((_parentRect$top2 = parentRect === null || parentRect === void 0 ? void 0 : parentRect.top) !== null && _parentRect$top2 !== void 0 ? _parentRect$top2 : 0) - parentElement.scrollTop : 0),
left: wrapperRect.left - (isParentRelative ? (_parentRect$left = parentRect === null || parentRect === void 0 ? void 0 : parentRect.left) !== null && _parentRect$left !== void 0 ? _parentRect$left : 0 : 0),
width: wrapperRect.width
});
}
}, [isHidden, parent]);
(0, _react.useImperativeHandle)(ref, () => ({
focus() {
setIsHidden(false);
},
blur() {
setIsHidden(true);
},
getHiddenState() {
return isHidden;
}
}), [isHidden]);
(0, _react.useEffect)(() => {
function handleBlur(event) {
var _wrapperRef$current, _boxRef$current;
if (!hasTouchStartedRef.current && event.type === 'click') {
return;
}
if (isHidden) return;
if ((_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(event.target) || (_boxRef$current = boxRef.current) !== null && _boxRef$current !== void 0 && _boxRef$current.contains(event.target)) {
return;
}
setIsHidden(true);
if (onBlur && (0, _is.isFunction)(onBlur)) {
onBlur(event);
}
}
function hide() {
setIsHidden(true);
}
function handleKeyDown(_ref) {
var _wrapperRef$current2;
let {
keyCode,
target
} = _ref;
if (keyCode === 9 && (_wrapperRef$current2 = wrapperRef.current) !== null && _wrapperRef$current2 !== void 0 && _wrapperRef$current2.contains(target)) {
hide();
}
}
function handleTouchStart() {
hasTouchStartedRef.current = true;
}
function handleTouchEnd() {
hasTouchStartedRef.current = false;
}
document.addEventListener('click', handleBlur);
document.addEventListener('mousedown', handleBlur);
document.addEventListener('touchstart', handleTouchStart);
document.addEventListener('touchend', handleTouchEnd);
document.addEventListener('mousemove', handleTouchEnd);
window.addEventListener('blur', hide);
window.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('click', handleBlur);
document.removeEventListener('mousedown', handleBlur);
document.removeEventListener('touchstart', handleTouchStart);
document.removeEventListener('touchend', handleTouchEnd);
document.removeEventListener('mousemove', handleTouchEnd);
window.removeEventListener('blur', hide);
window.removeEventListener('keydown', handleKeyDown);
};
}, [isHidden, onBlur]);
const handleFocus = e => {
setIsHidden(false);
if (onFocus) {
return onFocus(e);
}
return null;
};
const setBoxRef = (0, _react.useCallback)(node => {
boxRef.current = node;
if (overlayProps !== null && overlayProps !== void 0 && overlayProps.ref) {
overlayProps.ref(node);
}
}, [overlayProps]);
const toggle = (0, _react.useCallback)(event => {
setIsHidden(hidden => !hidden);
event.stopPropagation();
}, []);
if (!InputComponent) {
return null;
}
const positionStyles = rect ? {
width: rect.width,
top: rect.bottom,
left: rect.left
} : null;
let {
right,
icon,
onIconClick
} = restProps;
if (hasOpenCloseIcon) {
if (restProps.design === _Input.default.BORDER_DESIGN && InputComponent.displayName === _Input.default.displayName) {
right = /*#__PURE__*/_react.default.createElement(_Icon.default, {
icon: "fa fa-chevron-down",
style: {
padding: '10px',
alignItems: 'center',
alignSelf: 'stretch'
},
onClick: toggle
});
} else {
icon = 'fa fa-chevron-down';
onIconClick = toggle;
}
}
return /*#__PURE__*/_react.default.createElement("div", {
style: {
display: renderInline ? 'flex' : 'inline-block',
...(renderInline ? {
height: '100%',
flexDirection: 'column'
} : {}),
...style
},
className: (0, _clsx.default)(className, !renderInline && 'cc__input-box'),
ref: wrapperRef
}, /*#__PURE__*/_react.default.createElement(InputComponent, (0, _extends2.default)({}, restProps, {
right: right,
icon: icon,
onIconClick: onIconClick,
style: renderInline && hideInput ? {
position: 'absolute',
visibility: 'hidden'
} : undefined,
ref: inputRef,
onFocus: handleFocus
})), renderInline ? /*#__PURE__*/_react.default.createElement("div", {
className: "cc__input-box--inline-wrapper scrollbar",
style: {
marginTop: !hideInput ? 20 : 0,
overflow: 'hidden auto'
}
}, children) : /*#__PURE__*/_react.default.createElement(_Overlay.default, {
parent: parent
}, !!(rect && children) && /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
onClick: e => e.preventDefault(),
className: (0, _clsx.default)("cc__input-box__overlay scrollbar", boxClassName),
style: {
...positionStyles,
...(overlayProps === null || overlayProps === void 0 ? void 0 : overlayProps.style),
...(isHidden ? {
display: 'none'
} : {})
}
}, overlayProps, {
ref: setBoxRef
}), children)));
});
InputBox.propTypes = {
onBlur: _propTypes.default.func,
inputComponent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
parent: typeof Element !== 'undefined' ? _propTypes.default.instanceOf(Element) : () => {},
onFocus: _propTypes.default.func,
children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)]),
className: _propTypes.default.string,
boxClassName: _propTypes.default.string,
inputRef: _propTypes.default.func,
// eslint-disable-next-line react/forbid-prop-types
overlayProps: _propTypes.default.object,
style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
hasOpenCloseIcon: _propTypes.default.bool,
renderInline: _propTypes.default.bool,
hideInput: _propTypes.default.bool
};
InputBox.displayName = 'InputBox';
var _default = InputBox;
exports.default = _default;
//# sourceMappingURL=InputBox.js.map