zmp-react
Version:
Build full featured iOS & Android apps using ZMP & React
65 lines (61 loc) • 1.98 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
import { classNames, getExtraAttrs, emit } from '../shared/utils';
import { colorClasses } from '../shared/mixins';
import { zmpready, zmp } from '../shared/zmp';
var Row = /*#__PURE__*/forwardRef(function (props, ref) {
var className = props.className,
id = props.id,
style = props.style,
children = props.children,
_props$tag = props.tag,
tag = _props$tag === void 0 ? 'div' : _props$tag,
noGap = props.noGap,
resizable = props.resizable,
resizableFixed = props.resizableFixed,
resizableAbsolute = props.resizableAbsolute,
_props$resizableHandl = props.resizableHandler,
resizableHandler = _props$resizableHandl === void 0 ? true : _props$resizableHandl;
var extraAttrs = getExtraAttrs(props);
var elRef = useRef(null);
var onClick = function onClick(event) {
emit(props, 'click', event);
};
var onResize = function onResize(el) {
if (el === elRef.current) {
emit(props, 'gridResize');
}
};
useImperativeHandle(ref, function () {
return {
el: elRef.current
};
});
useEffect(function () {
zmpready(function () {
zmp.on('gridResize', onResize);
});
return function () {
zmp.off('gridResize', onResize);
};
});
var RowTag = tag;
var classes = classNames(className, 'row', {
'no-gap': noGap,
resizable: resizable,
'resizable-fixed': resizableFixed,
'resizable-absolute': resizableAbsolute
}, colorClasses(props));
return /*#__PURE__*/React.createElement(RowTag, _extends({
id: id,
style: style,
className: classes,
ref: elRef
}, extraAttrs, {
onClick: onClick
}), children, resizable && resizableHandler && /*#__PURE__*/React.createElement("span", {
className: "resize-handler"
}));
});
Row.displayName = 'zmp-row';
export default Row;