react-native-wishlist
Version:
The fastest List component for React Native.
254 lines (247 loc) • 10.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Wishlist = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _ForEach = require("./Components/ForEach");
var _IF = require("./Components/IF");
var _Pressable = require("./Components/Pressable");
var _Switch = require("./Components/Switch");
var _WishlistImage = require("./Components/WishlistImage");
var _WishlistText = require("./Components/WishlistText");
var _WishlistView = require("./Components/WishlistView");
var _EventHandler = require("./EventHandler");
var _InflatorRepository = _interopRequireDefault(require("./InflatorRepository"));
var _NativeTemplateContainer = _interopRequireDefault(require("./NativeViews/NativeTemplateContainer"));
var _NativeTemplateInterceptor = _interopRequireDefault(require("./NativeViews/NativeTemplateInterceptor"));
var _WishlistNativeComponent = _interopRequireWildcard(require("./NativeViews/WishlistNativeComponent"));
var _TemplateContext = require("./TemplateContext");
var _Utils = require("./Utils");
var _WishlistContext = require("./WishlistContext");
var _WishlistData = require("./WishlistData");
var _WishlistJsRuntime = require("./WishlistJsRuntime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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 OffsetComponent = '__offsetComponent';
const TemplatesRegistryContext = /*#__PURE__*/(0, _react.createContext)(null);
function getTemplatesFromChildren(children, width) {
const nextTemplates = {
[OffsetComponent]: /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [styles.offsetView, {
width
}]
})
};
_react.default.Children.forEach(children, c => {
if (c.type.displayName === 'WishListTemplate') {
const templateElement = c;
nextTemplates[templateElement.props.type] = templateElement;
}
});
return nextTemplates;
}
function ComponentBase(_ref, ref) {
let {
children,
style,
initialData,
...rest
} = _ref;
const nativeWishlist = (0, _react.useRef)(null); // TODO type it properly
const wishlistId = (0, _react.useRef)(null);
if (!wishlistId.current) {
wishlistId.current = (0, _Utils.generateId)();
}
const data = (0, _WishlistData.useInternalWishlistData)(wishlistId.current, initialData);
(0, _react.useImperativeHandle)(ref, () => ({
scrollToItem: (index, animated) => {
if (nativeWishlist.current != null) {
console.log('scrollTo', index);
_WishlistNativeComponent.Commands.scrollToItem(nativeWishlist.current, index, animated ?? true);
}
},
scrollToTop: () => {
if (nativeWishlist.current != null) {
_WishlistNativeComponent.Commands.scrollToItem(nativeWishlist.current, 0, true);
}
},
update: async updateJob => {
return new Promise((resolve, _reject) => {
const resolveJs = (0, _WishlistJsRuntime.createRunInJsFn)(resolve);
(0, _WishlistJsRuntime.createRunInWishlistFn)(() => {
'worklet';
// we have to do sth here to get rid of frozen objs
// otherwise data can't be modified
data().update(updateJob, resolveJs);
})();
});
}
}));
const {
width
} = (0, _reactNative.useWindowDimensions)();
(0, _react.useMemo)(() => (0, _EventHandler.initEventHandler)(), []);
// Template registration and tracking
const childrenTemplates = (0, _react.useMemo)(() => getTemplatesFromChildren(children, width), [children, width]);
const templatesRegistry = (0, _react.useMemo)(() => ({
templates: {},
registerTemplate(type, component) {
if (this.templates[type]) {
return;
}
this.templates[type] = component;
}
}), []);
// Resolve inflator - either use the provided callback or use the mapping
const resolvedInflater = (0, _react.useMemo)(() => {
return (index, pool) => {
'worklet';
const value = data().at(index);
if (!value) {
return undefined;
}
console.log('returned', value, 'for index', index, 'data len', data().length());
const item = pool.getComponent(value.type);
if (!item) {
return undefined;
}
if (value.key == null) {
throw new Error('Every data cell has to contain unique key prop!');
}
// We set the key of the item here so that
// viewportObserver knows what's the key and is able to rerender it later on
item.key = value.key;
return [item, value];
};
}, [data]);
const inflatorIdRef = (0, _react.useRef)(null);
const prevInflatorRef = (0, _react.useRef)();
// Inflator registration and tracking
const inflatorId = (0, _react.useMemo)(() => {
if (prevInflatorRef.current !== resolvedInflater) {
// Unregister?
if (inflatorIdRef.current) {
_InflatorRepository.default.unregister(inflatorIdRef.current);
}
// Register
inflatorIdRef.current = (0, _Utils.generateId)();
_InflatorRepository.default.register(inflatorIdRef.current, resolvedInflater);
}
return inflatorIdRef.current;
}, [resolvedInflater]);
const wishlistContext = (0, _react.useMemo)(() => ({
id: wishlistId.current,
inflatorId,
data
}), [inflatorId, data]);
return /*#__PURE__*/_react.default.createElement(_WishlistContext.WishlistContext.Provider, {
value: wishlistContext
}, /*#__PURE__*/_react.default.createElement(TemplatesRegistryContext.Provider, {
value: templatesRegistry
}, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.noDisplay
}, Object.keys(childrenTemplates).map(c => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
key: c + 'prerender'
}, /*#__PURE__*/_react.default.createElement(_TemplateContext.TemplateContext.Provider, {
value: {
templateType: c,
renderChildren: true
}
}, childrenTemplates[c])))), /*#__PURE__*/_react.default.createElement(InnerComponent, {
inflatorId: inflatorId,
style: style,
nativeWishlist: nativeWishlist,
rest: rest,
templates: childrenTemplates,
nestedTemplates: templatesRegistry.templates
}))));
}
const Component = /*#__PURE__*/_react.default.forwardRef(ComponentBase);
function InnerComponent(_ref2) {
let {
inflatorId,
style,
nativeWishlist,
rest,
templates,
nestedTemplates
} = _ref2;
const combinedTemplates = {
...templates,
...nestedTemplates
};
const {
id
} = (0, _WishlistContext.useWishlistContext)();
const keys = Object.keys(combinedTemplates);
// console.log('@@@ Render WishList', inflatorId, keys.join(', '));
return /*#__PURE__*/_react.default.createElement(_NativeTemplateInterceptor.default, {
inflatorId: inflatorId,
style: style,
collapsable: false,
removeClippedSubviews: false
}, /*#__PURE__*/_react.default.createElement(_WishlistNativeComponent.default, {
style: styles.flex,
ref: nativeWishlist,
removeClippedSubviews: false,
inflatorId: inflatorId,
onEndReached: rest === null || rest === void 0 ? void 0 : rest.onEndReached,
onStartReached: rest === null || rest === void 0 ? void 0 : rest.onStartReached,
initialIndex: rest.initialIndex ?? 0
}), /*#__PURE__*/_react.default.createElement(_NativeTemplateContainer.default, {
names: keys,
inflatorId: inflatorId,
wishlistId: id,
key: Math.random().toString(),
collapsable: false
}, Object.keys(combinedTemplates).map(c => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
key: c
}, /*#__PURE__*/_react.default.createElement(_TemplateContext.TemplateContext.Provider, {
value: {
templateType: c
}
}, combinedTemplates[c])))));
}
function Template(_ref3) {
let {
children,
type
} = _ref3;
const registry = (0, _react.useContext)(TemplatesRegistryContext);
const templates = (0, _react.useContext)(_TemplateContext.TemplateContext);
registry === null || registry === void 0 ? void 0 : registry.registerTemplate(type, children);
return templates !== null && templates !== void 0 && templates.renderChildren ? children : null;
}
Template.displayName = 'WishListTemplate';
const Wishlist = {
Component,
Template,
Pressable: _Pressable.Pressable,
View: _WishlistView.WishlistView,
Image: _WishlistImage.WishlistImage,
Text: _WishlistText.WishlistText,
IF: _IF.IF,
Switch: _Switch.Switch,
Case: _Switch.Case,
/**
* TODO(Szymon) It's just a prototype we have to think about matching new and old children
* TODO(Szymon) implement setChildren
*/
ForEach: _ForEach.ForEach
};
exports.Wishlist = Wishlist;
const styles = _reactNative.StyleSheet.create({
flex: {
flex: 1
},
noDisplay: {
display: 'none'
},
offsetView: {
height: 0
}
});
//# sourceMappingURL=Wishlist.js.map