zmp-react
Version:
Build full featured iOS & Android apps using ZMP & React
213 lines (182 loc) • 7.79 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _react = _interopRequireWildcard(require("react"));
var _useIsomorphicLayoutEffect = require("../shared/use-isomorphic-layout-effect");
var _listItem = _interopRequireDefault(require("../components/list-item"));
var _zmp = require("../shared/zmp");
var _utils = require("../../common/utils");
var _utils2 = require("../shared/utils");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
/* dts-imports
import { SmartSelect } from 'zmp-core/types';
*/
/* dts-props
id?: string | number;
className?: string;
style?: React.CSSProperties;
title? : string | number
text? : string | number
media? : string
subtitle? : string | number
description? : string | number
tooltip? : string
tooltipTrigger? : string
link? : boolean | string
tabLink? : boolean | string
tabLinkActive? : boolean
selected?: boolean
after? : string | number
badge? : string | number
badgeColor? : string
mediaItem? : boolean
mediaList? : boolean
divider? : boolean
groupTitle? : boolean
swipeout? : boolean
swipeoutOpened? : boolean
sortable? : boolean
sortableOpposite? : boolean
accordionItem? : boolean
accordionItemOpened? : boolean
smartSelect? : boolean
smartSelectParams? : SmartSelect.Parameters
noChevron? : boolean
chevronCenter? : boolean
checkbox? : boolean
radio? : boolean
radioIcon? : string
checked? : boolean
defaultChecked? : boolean
indeterminate? : boolean
name? : string
value? : string | number | Array<any>
readonly? : boolean
required? : boolean
disabled? : boolean
virtualListIndex? : number
COLOR_PROPS
ROUTER_PROPS
ACTIONS_PROPS
onClick? : (event?: any) => void
onTapHold?: (...args: any[]) => void
onSwipeoutOverswipeEnter? : (...args: any[]) => void
onSwipeoutOverswipeExit? : (...args: any[]) => void
onSwipeoutDeleted? : (...args: any[]) => void
onSwipeoutDelete? : (...args: any[]) => void
onSwipeoutClose? : (...args: any[]) => void
onSwipeoutClosed? : (...args: any[]) => void
onSwipeoutOpen? : (...args: any[]) => void
onSwipeoutOpened? : (...args: any[]) => void
onSwipeout? : (progress?: any) => void
onAccordionBeforeClose? : (prevent?: any) => void
onAccordionClose? : (...args: any[]) => void
onAccordionClosed? : (...args: any[]) => void
onAccordionBeforeOpen? : (prevent?: any) => void
onAccordionOpen? : (...args: any[]) => void
onAccordionOpened? : (...args: any[]) => void
onChange? : (event?: any) => void
ref?: React.MutableRefObject<{el: HTMLElement | null;>;
CHILDREN_PROP
*/
var ZMPListItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
var itemRef = (0, _react.useRef)(null);
var description = props.description,
footer = props.footer,
link = props.link,
href = props.href,
onTapHold = props.onTapHold,
className = props.className,
others = (0, _objectWithoutPropertiesLoose2.default)(props, ["description", "footer", "link", "href", "onTapHold", "className"]);
var handleClickLink = function handleClickLink(e, _link) {
e.preventDefault();
var options = {};
var routeProps = props.routeProps,
reloadCurrent = props.reloadCurrent,
reloadPrevious = props.reloadPrevious,
reloadAll = props.reloadAll,
animate = props.animate,
ignoreCache = props.ignoreCache,
transition = props.transition;
if (routeProps !== undefined) {
options.props = routeProps;
}
if (reloadCurrent !== undefined) {
options.reloadCurrent = reloadCurrent;
}
if (reloadPrevious !== undefined) {
options.reloadPrevious = reloadPrevious;
}
if (reloadAll !== undefined) {
options.reloadAll = reloadAll;
}
if (animate !== undefined) {
options.animate = animate;
}
if (ignoreCache !== undefined) {
options.ignoreCache = ignoreCache;
}
if (transition !== undefined) {
options.transition = transition;
}
_zmp.zmp.views.current.router.navigate(_link, options);
};
function preventContextMenu(e) {
if (onTapHold) {
e.preventDefault();
}
return true;
}
(0, _react.useImperativeHandle)(ref, function () {
return itemRef.current;
});
(0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
var _itemRef$current$el, _itemRef$current$el2;
itemRef == null ? void 0 : (_itemRef$current$el = itemRef.current.el) == null ? void 0 : _itemRef$current$el.addEventListener('taphold', onTapHold);
itemRef == null ? void 0 : (_itemRef$current$el2 = itemRef.current.el) == null ? void 0 : _itemRef$current$el2.addEventListener('contextmenu', preventContextMenu, false);
return function () {
var _itemRef$current$el3, _itemRef$current$el4;
itemRef == null ? void 0 : (_itemRef$current$el3 = itemRef.current.el) == null ? void 0 : _itemRef$current$el3.removeEventListener('taphold', onTapHold);
itemRef == null ? void 0 : (_itemRef$current$el4 = itemRef.current.el) == null ? void 0 : _itemRef$current$el4.removeEventListener('contextmenu', preventContextMenu);
};
}, []);
var classes = (0, _utils2.classNames)({
'list-item-taphold': onTapHold
}, className);
if (link || href) {
var _zmp$routes = _zmp.zmp.routes,
routes = _zmp$routes === void 0 ? [] : _zmp$routes;
var paths = (0, _react.useMemo)(function () {
return routes.map(function (route) {
return route.path;
});
}, []);
if (link && link !== '#' && (0, _utils.validateUrl)(link, paths) || href && href !== '#' && (0, _utils.validateUrl)(href, paths)) {
var url = link || href;
return /*#__PURE__*/_react.default.createElement(_listItem.default, (0, _extends2.default)({}, others, {
className: classes,
header: null,
footer: description || footer,
ref: itemRef,
link: true,
onClick: function onClick(e) {
return handleClickLink(e, url);
}
}), props.children);
}
}
return /*#__PURE__*/_react.default.createElement(_listItem.default, (0, _extends2.default)({}, others, {
className: classes,
link: false,
header: null,
footer: description || footer,
ref: itemRef
}), props.children);
});
ZMPListItem.displayName = 'zmp-list-item';
var _default = ZMPListItem;
exports.default = _default;