create-expo-cljs-app
Version:
Create a react native application with Expo and Shadow-CLJS!
407 lines (329 loc) • 14.3 kB
JavaScript
;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _createElement = _interopRequireDefault(require("../createElement"));
var _css = _interopRequireDefault(require("../StyleSheet/css"));
var _AssetRegistry = require("../../modules/AssetRegistry");
var _resolveShadowValue = _interopRequireDefault(require("../StyleSheet/resolveShadowValue"));
var _ImageLoader = _interopRequireDefault(require("../../modules/ImageLoader"));
var _PixelRatio = _interopRequireDefault(require("../PixelRatio"));
var _StyleSheet = _interopRequireDefault(require("../StyleSheet"));
var _TextAncestorContext = _interopRequireDefault(require("../Text/TextAncestorContext"));
var _View = _interopRequireDefault(require("../View"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var ERRORED = 'ERRORED';
var LOADED = 'LOADED';
var LOADING = 'LOADING';
var IDLE = 'IDLE';
var _filterId = 0;
var svgDataUriPattern = /^(data:image\/svg\+xml;utf8,)(.*)/;
function createTintColorSVG(tintColor, id) {
return tintColor && id != null ? /*#__PURE__*/React.createElement("svg", {
style: {
position: 'absolute',
height: 0,
visibility: 'hidden',
width: 0
}
}, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
id: "tint-" + id,
suppressHydrationWarning: true
}, /*#__PURE__*/React.createElement("feFlood", {
floodColor: "" + tintColor,
key: tintColor
}), /*#__PURE__*/React.createElement("feComposite", {
in2: "SourceAlpha",
operator: "atop"
})))) : null;
}
function getFlatStyle(style, blurRadius, filterId) {
var flatStyle = _objectSpread({}, _StyleSheet.default.flatten(style));
var filter = flatStyle.filter,
resizeMode = flatStyle.resizeMode,
shadowOffset = flatStyle.shadowOffset,
tintColor = flatStyle.tintColor; // Add CSS filters
// React Native exposes these features as props and proprietary styles
var filters = [];
var _filter = null;
if (filter) {
filters.push(filter);
}
if (blurRadius) {
filters.push("blur(" + blurRadius + "px)");
}
if (shadowOffset) {
var shadowString = (0, _resolveShadowValue.default)(flatStyle);
if (shadowString) {
filters.push("drop-shadow(" + shadowString + ")");
}
}
if (tintColor && filterId != null) {
filters.push("url(#tint-" + filterId + ")");
}
if (filters.length > 0) {
_filter = filters.join(' ');
} // These styles are converted to CSS filters applied to the
// element displaying the background image.
delete flatStyle.blurRadius;
delete flatStyle.shadowColor;
delete flatStyle.shadowOpacity;
delete flatStyle.shadowOffset;
delete flatStyle.shadowRadius;
delete flatStyle.tintColor; // These styles are not supported on View
delete flatStyle.overlayColor;
delete flatStyle.resizeMode;
return [flatStyle, resizeMode, _filter, tintColor];
}
function resolveAssetDimensions(source) {
if (typeof source === 'number') {
var _getAssetByID = (0, _AssetRegistry.getAssetByID)(source),
_height = _getAssetByID.height,
_width = _getAssetByID.width;
return {
height: _height,
width: _width
};
} else if (source != null && !Array.isArray(source) && typeof source === 'object') {
var _height2 = source.height,
_width2 = source.width;
return {
height: _height2,
width: _width2
};
}
}
function resolveAssetUri(source) {
var uri = null;
if (typeof source === 'number') {
// get the URI from the packager
var asset = (0, _AssetRegistry.getAssetByID)(source);
var scale = asset.scales[0];
if (asset.scales.length > 1) {
var preferredScale = _PixelRatio.default.get(); // Get the scale which is closest to the preferred scale
scale = asset.scales.reduce(function (prev, curr) {
return Math.abs(curr - preferredScale) < Math.abs(prev - preferredScale) ? curr : prev;
});
}
var scaleSuffix = scale !== 1 ? "@" + scale + "x" : '';
uri = asset ? asset.httpServerLocation + "/" + asset.name + scaleSuffix + "." + asset.type : '';
} else if (typeof source === 'string') {
uri = source;
} else if (source && typeof source.uri === 'string') {
uri = source.uri;
}
if (uri) {
var match = uri.match(svgDataUriPattern); // inline SVG markup may contain characters (e.g., #, ") that need to be escaped
if (match) {
var prefix = match[1],
svg = match[2];
var encodedSvg = encodeURIComponent(svg);
return "" + prefix + encodedSvg;
}
}
return uri;
}
var Image = /*#__PURE__*/React.forwardRef(function (props, ref) {
var accessibilityLabel = props.accessibilityLabel,
blurRadius = props.blurRadius,
defaultSource = props.defaultSource,
draggable = props.draggable,
onError = props.onError,
onLayout = props.onLayout,
onLoad = props.onLoad,
onLoadEnd = props.onLoadEnd,
onLoadStart = props.onLoadStart,
pointerEvents = props.pointerEvents,
source = props.source,
style = props.style,
rest = _objectWithoutPropertiesLoose(props, ["accessibilityLabel", "blurRadius", "defaultSource", "draggable", "onError", "onLayout", "onLoad", "onLoadEnd", "onLoadStart", "pointerEvents", "source", "style"]);
if (process.env.NODE_ENV !== 'production') {
if (props.children) {
throw new Error('The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.');
}
}
var _React$useState = React.useState(function () {
var uri = resolveAssetUri(source);
if (uri != null) {
var isLoaded = _ImageLoader.default.has(uri);
if (isLoaded) {
return LOADED;
}
}
return IDLE;
}),
state = _React$useState[0],
updateState = _React$useState[1];
var _React$useState2 = React.useState({}),
layout = _React$useState2[0],
updateLayout = _React$useState2[1];
var hasTextAncestor = React.useContext(_TextAncestorContext.default);
var hiddenImageRef = React.useRef(null);
var filterRef = React.useRef(_filterId++);
var requestRef = React.useRef(null);
var shouldDisplaySource = state === LOADED || state === LOADING && defaultSource == null;
var _getFlatStyle = getFlatStyle(style, blurRadius, filterRef.current),
flatStyle = _getFlatStyle[0],
_resizeMode = _getFlatStyle[1],
filter = _getFlatStyle[2],
tintColor = _getFlatStyle[3];
var resizeMode = props.resizeMode || _resizeMode || 'cover';
var selectedSource = shouldDisplaySource ? source : defaultSource;
var displayImageUri = resolveAssetUri(selectedSource);
var imageSizeStyle = resolveAssetDimensions(selectedSource);
var backgroundImage = displayImageUri ? "url(\"" + displayImageUri + "\")" : null;
var backgroundSize = getBackgroundSize(); // Accessibility image allows users to trigger the browser's image context menu
var hiddenImage = displayImageUri ? (0, _createElement.default)('img', {
alt: accessibilityLabel || '',
classList: [classes.accessibilityImage],
draggable: draggable || false,
ref: hiddenImageRef,
src: displayImageUri
}) : null;
function getBackgroundSize() {
if (hiddenImageRef.current != null && (resizeMode === 'center' || resizeMode === 'repeat')) {
var _hiddenImageRef$curre = hiddenImageRef.current,
naturalHeight = _hiddenImageRef$curre.naturalHeight,
naturalWidth = _hiddenImageRef$curre.naturalWidth;
var _height3 = layout.height,
_width3 = layout.width;
if (naturalHeight && naturalWidth && _height3 && _width3) {
var scaleFactor = Math.min(1, _width3 / naturalWidth, _height3 / naturalHeight);
var x = Math.ceil(scaleFactor * naturalWidth);
var y = Math.ceil(scaleFactor * naturalHeight);
return x + "px " + y + "px";
}
}
}
function handleLayout(e) {
if (resizeMode === 'center' || resizeMode === 'repeat' || onLayout) {
var _layout = e.nativeEvent.layout;
onLayout && onLayout(e);
updateLayout(_layout);
}
} // Image loading
var uri = resolveAssetUri(source);
React.useEffect(function () {
abortPendingRequest();
if (uri != null) {
updateState(LOADING);
if (onLoadStart) {
onLoadStart();
}
requestRef.current = _ImageLoader.default.load(uri, function load(e) {
updateState(LOADED);
if (onLoad) {
onLoad(e);
}
if (onLoadEnd) {
onLoadEnd();
}
}, function error() {
updateState(ERRORED);
if (onError) {
onError({
nativeEvent: {
error: "Failed to load resource " + uri + " (404)"
}
});
}
if (onLoadEnd) {
onLoadEnd();
}
});
}
function abortPendingRequest() {
if (requestRef.current != null) {
_ImageLoader.default.abort(requestRef.current);
requestRef.current = null;
}
}
return abortPendingRequest;
}, [uri, requestRef, updateState, onError, onLoad, onLoadEnd, onLoadStart]);
return /*#__PURE__*/React.createElement(_View.default, _extends({}, rest, {
accessibilityLabel: accessibilityLabel,
onLayout: handleLayout,
pointerEvents: pointerEvents,
ref: ref,
style: [styles.root, hasTextAncestor && styles.inline, imageSizeStyle, flatStyle]
}), /*#__PURE__*/React.createElement(_View.default, {
style: [styles.image, resizeModeStyles[resizeMode], {
backgroundImage: backgroundImage,
filter: filter
}, backgroundSize != null && {
backgroundSize: backgroundSize
}],
suppressHydrationWarning: true
}), hiddenImage, createTintColorSVG(tintColor, filterRef.current));
});
Image.displayName = 'Image'; // $FlowIgnore: This is the correct type, but casting makes it unhappy since the variables aren't defined yet
var ImageWithStatics = Image;
ImageWithStatics.getSize = function (uri, success, failure) {
_ImageLoader.default.getSize(uri, success, failure);
};
ImageWithStatics.prefetch = function (uri) {
return _ImageLoader.default.prefetch(uri);
};
ImageWithStatics.queryCache = function (uris) {
return _ImageLoader.default.queryCache(uris);
};
var classes = _css.default.create({
accessibilityImage: _objectSpread(_objectSpread({}, _StyleSheet.default.absoluteFillObject), {}, {
height: '100%',
opacity: 0,
width: '100%',
zIndex: -1
})
});
var styles = _StyleSheet.default.create({
root: {
flexBasis: 'auto',
overflow: 'hidden',
zIndex: 0
},
inline: {
display: 'inline-flex'
},
image: _objectSpread(_objectSpread({}, _StyleSheet.default.absoluteFillObject), {}, {
backgroundColor: 'transparent',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
height: '100%',
width: '100%',
zIndex: -1
})
});
var resizeModeStyles = _StyleSheet.default.create({
center: {
backgroundSize: 'auto'
},
contain: {
backgroundSize: 'contain'
},
cover: {
backgroundSize: 'cover'
},
none: {
backgroundPosition: '0 0',
backgroundSize: 'auto'
},
repeat: {
backgroundPosition: '0 0',
backgroundRepeat: 'repeat',
backgroundSize: 'auto'
},
stretch: {
backgroundSize: '100% 100%'
}
});
var _default = ImageWithStatics;
exports.default = _default;
module.exports = exports.default;