react-web-native-sketch
Version:
[TODO: We need an overview of how this can be used via npm vs as a local package]
172 lines • 6.89 kB
JavaScript
;
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
t[p[i]] = s[p[i]];
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var platform_1 = require("../primitives/platform/platform");
var common_1 = require("./common");
var theme_1 = require("./theme");
exports.removePlatform = function (theme) {
if (!common_1.isObject(theme)) {
return theme;
}
var webDesktop = theme.webDesktop, webMobile = theme.webMobile, web = theme.web, ios = theme.ios, android = theme.android, native = theme.native, all = theme.all, other = __rest(theme, ["webDesktop", "webMobile", "web", "ios", "android", "native", "all"]);
// other.values is either [] or list of objects
var value = undefined;
if (platform_1.isWeb && webDesktop !== undefined && !common_1.isXs()) {
value = webDesktop;
}
else if (platform_1.isWeb && webMobile !== undefined && common_1.isXs()) {
value = webMobile;
}
else if (platform_1.isWeb && web !== undefined) {
value = web;
}
else if (platform_1.isIOS && ios !== undefined) {
value = ios;
}
else if (platform_1.isAndroid && android !== undefined) {
value = android;
}
else if (!platform_1.isWeb && native !== undefined) {
value = native;
}
else if (all !== undefined) {
value = all;
}
if (value !== undefined && !common_1.isObject(value)) {
return value;
}
var cleanedOther = {};
for (var _i = 0, _a = Object.keys(other); _i < _a.length; _i++) {
var key = _a[_i];
if (!platform_1.isWeb && key.indexOf('media') !== -1) {
// TODO: use media queries for webMobile/webDesktop and support media queries on native
continue;
}
cleanedOther[key] = exports.removePlatform(other[key]);
}
return __assign({}, (value === undefined ? {} : value), cleanedOther);
};
//
// export function combineStyles( componentStyles: any, componentName: string ): any {
// let fullStyles = typeof( componentStyles ) === "function" ? componentStyles() : componentStyles;
// let newStyles: any = {};
// for (let className in fullStyles) {
// let styleDefinition = {
// ...removePlatform( fullStyles[className] ),
// ...removePlatform( runTimeClasses[componentName] && runTimeClasses[componentName][className] ),
// };
// newStyles[className] = { ...styleDefinition };
// }
//
// return newStyles;
// }
function getPlatformTheme(theme) {
if (!common_1.isObject(theme)) {
return theme;
}
var platform = null, webDesktop = theme.webDesktop, webMobile = theme.webMobile, web = theme.web, ios = theme.ios, android = theme.android, native = theme.native, all = theme.all, other = __rest(theme, ["webDesktop", "webMobile", "web", "ios", "android", "native", "all"]);
if (platform_1.isWeb && webDesktop !== undefined && !common_1.isXs()) {
platform = 'webDesktop';
}
else if (platform_1.isWeb && webMobile !== undefined && common_1.isXs()) {
platform = 'webMobile';
}
else if (platform_1.isWeb && web !== undefined) {
platform = 'web';
}
else if (platform_1.isIOS && ios !== undefined) {
platform = 'ios';
}
else if (platform_1.isAndroid && android !== undefined) {
platform = 'android';
}
else if (!platform_1.isWeb && native !== undefined) {
platform = 'native';
}
else if (all !== undefined) {
platform = 'all';
}
if (platform) {
if (theme[platform] !== undefined) {
if (common_1.isObject(theme[platform])) {
return getPlatformTheme(__assign({}, (theme[platform] || {}), (other || {})));
// return {...(theme[platform] || {}), ...(other || {})};
}
return theme[platform];
}
}
return Object.keys(other).length > 0 ? other : undefined;
}
function updateTheme(currentTheme, remoteTheme) {
if (!remoteTheme) {
return;
}
var paramsTheme = __assign({}, remoteTheme);
for (var key in paramsTheme) {
currentTheme[key] = getPlatformTheme(currentTheme[key]);
paramsTheme[key] = getPlatformTheme(paramsTheme[key]);
if (common_1.isObject(paramsTheme[key])) {
if (!currentTheme[key]) {
currentTheme[key] = {};
}
updateTheme(currentTheme[key], paramsTheme[key]);
}
else {
if (paramsTheme[key] !== undefined) {
currentTheme[key] = paramsTheme[key];
}
else {
delete currentTheme[key];
}
}
}
return currentTheme;
}
function combineStyles(componentStyles, componentName, muiTheme) {
if (muiTheme === void 0) { muiTheme = null; }
var stylesIsFunction = typeof (componentStyles) === "function";
var fullStyles = updateTheme({}, __assign({}, (theme_1.appTheme.baseStyles || {}), ((stylesIsFunction ? componentStyles(muiTheme) : componentStyles) || {})));
var fullRemoteStyles = updateTheme({}, __assign({}, (theme_1.appTheme[componentName] || {})));
var newStyles = {};
var _loop_1 = function (className) {
if (!platform_1.isWeb && (className.indexOf('media') !== -1 || !fullStyles[className])) {
return "continue";
}
var styleDefinition = __assign({}, (fullStyles[className] || {}), (updateTheme({}, fullRemoteStyles[className] || {})));
// TODO: support media queries on native
Object.keys(styleDefinition)
.forEach(function (key) {
// DO NOT REMOVE FALSE, as that will make bottom: 0 not work
// TODO: support media queries on mobile for better tablet experience
// if (key.indexOf('media') !== -1) {
// console.log(styleDefinition[key])
// }
if (styleDefinition[key] === false) {
delete styleDefinition[key];
}
});
newStyles[className] = __assign({}, styleDefinition);
};
for (var className in fullStyles) {
_loop_1(className);
}
return newStyles;
}
exports.combineStyles = combineStyles;
//# sourceMappingURL=combineStyles.js.map