UNPKG

zmp-react

Version:

Build full featured iOS & Android apps using ZMP & React

65 lines (61 loc) 1.98 kB
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;