@wavemaker/app-rn-runtime 11.8.5-patch.2 → 11.8.5-rc.187

app-rn-runtime/runtime/watcher.js

@@ -0,0 +1,147 @@
+var _Watcher;
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { isArray, clone } from 'lodash';
+import { useEffect, useState } from 'react';
+import { WIDGET_LOGGER } from '@wavemaker/app-rn-runtime/core/base.component';
+const WATCH_LOGGER = WIDGET_LOGGER.extend("watch");
+class WatchExpression {
+  constructor(fn, onChange) {
+    this.fn = fn;
+    this.onChange = onChange;
+    _defineProperty(this, "last", null);
+    _defineProperty(this, "expBody", null);
+    _defineProperty(this, "lastExecutionTime", 0);
+    this.last = this.execute();
+    if (isArray(this.last)) {
+      this.last = clone(this.last);
+    }
+  }
+  getExpBody() {
+    if (!this.expBody) {
+      const expStr = this.fn.toString();
+      this.expBody = expStr.substring(expStr.indexOf('return ') + 7, expStr.lastIndexOf(';'));
+    }
+    return this.expBody;
+  }
+  execute() {
+    try {
+      return this.fn();
+    } catch (e) {
+      //do nothing
+      return null;
+    }
+  }
+  isEqual($old, $new) {
+    const isArrayObj = isArray($old) || isArray($new);
+    if (isArrayObj) {
+      if ($old && !$new || !$old && $new || $old.length !== $new.length) {
+        return false;
+      }
+      for (let i = 0; i < $old.length; i++) {
+        if ($old[i] !== $new[i]) {
+          return false;
+        }
+      }
+      return true;
+    }
+    return $old === $new;
+  }
+  get value() {
+    return this.last;
+  }
+  check() {
+    const start = Date.now();
+    const now = this.execute();
+    const changed = !this.isEqual(this.last, now);
+    this.lastExecutionTime = Date.now() - start;
+    if (changed) {
+      WATCH_LOGGER.debug(() => {
+        if (this.getExpBody() !== 'fragment') {
+          return `Watcher: <${this.getExpBody()}> Changed from ${this.last} to ${now} `;
+        }
+        return '';
+      });
+      this.onChange(this.last, now);
+      this.last = now;
+      if (isArray(this.last)) {
+        this.last = clone(this.last);
+      }
+      return true;
+    }
+    return false;
+  }
+}
+export class Watcher {
+  constructor() {
+    _defineProperty(this, "expressions", []);
+    _defineProperty(this, "isActive", true);
+    _defineProperty(this, "parent", null);
+    _defineProperty(this, "children", []);
+  }
+  check() {
+    if (this.isActive) {
+      this.expressions.forEach(expression => expression.check());
+      this.children.forEach(child => {
+        child.check();
+      });
+    }
+  }
+  create() {
+    const child = new Watcher();
+    child.parent = this;
+    this.children.push(child);
+    return child;
+  }
+  remove(child) {
+    if (this.children.length > 0) {
+      const i = this.children.indexOf(child);
+      if (i >= 0) {
+        this.children.splice(i, 1);
+      }
+    }
+  }
+  destroy() {
+    this.clear();
+    this.parent && this.parent.remove(this);
+  }
+  clear() {
+    this.children = [];
+    this.expressions = [];
+  }
+  watch(fn, onChange) {
+    const expression = new WatchExpression(fn, onChange);
+    this.expressions.push(expression);
+    return expression;
+  }
+  count() {
+    if (!this.isActive) {
+      return 0;
+    }
+    let count = this.expressions.length;
+    this.children.forEach(child => {
+      count += child.count();
+    });
+    return count;
+  }
+}
+_Watcher = Watcher;
+_defineProperty(Watcher, "ROOT", new _Watcher());
+export function useWatcher(parent) {
+  const [change, onChange] = useState({});
+  let [watcher] = useState(() => parent.create());
+  watcher.clear();
+  useEffect(() => {
+    return () => {
+      watcher.destroy();
+    };
+  }, []);
+  return {
+    watch: fn => {
+      return watcher.watch(fn, () => onChange({})).value;
+    }
+  };
+}
+;
+//# sourceMappingURL=watcher.js.map

app-rn-runtime/runtime/watcher.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isArray","clone","useEffect","useState","WIDGET_LOGGER","WATCH_LOGGER","extend","WatchExpression","constructor","fn","onChange","_defineProperty","last","execute","getExpBody","expBody","expStr","toString","substring","indexOf","lastIndexOf","e","isEqual","$old","$new","isArrayObj","length","i","value","check","start","Date","now","changed","lastExecutionTime","debug","Watcher","isActive","expressions","forEach","expression","children","child","create","parent","push","remove","splice","destroy","clear","watch","count","_Watcher","useWatcher","change","watcher"],"sources":["watcher.ts"],"sourcesContent":["import { isEqual as _isEqual, isArray, isObject, clone, remove, reverse, sortBy } from 'lodash';\nimport { useEffect, useMemo, useState } from 'react';\nimport { WIDGET_LOGGER } from '@wavemaker/app-rn-runtime/core/base.component';\n\nconst WATCH_LOGGER = WIDGET_LOGGER.extend(\"watch\");\n\nclass WatchExpression {\n    private last: any = null;\n    private expBody: string = null as any;\n    public lastExecutionTime = 0;\n\n    constructor(private fn: Function, private onChange: (prev: any, now: any) => any) {\n        this.last = this.execute();\n        if (isArray(this.last)) {\n            this.last = clone(this.last);\n        }\n    }\n\n    private getExpBody() {\n        if (!this.expBody) {\n            const expStr = this.fn.toString();\n            this.expBody = expStr.substring(\n                expStr.indexOf('return ') + 7,\n                expStr.lastIndexOf(';'));\n        }\n        return this.expBody;\n    }\n    \n    private execute() {\n        try {\n            return this.fn();\n        } catch(e) {\n            //do nothing\n            return null;\n        }\n    }\n\n    private isEqual($old: any, $new: any) {\n        const isArrayObj = isArray($old) || isArray($new);\n        if (isArrayObj) {\n            if (($old && !$new) \n                || (!$old && $new)\n                || $old.length !== $new.length) {\n                return false;\n            }\n            for(let i = 0; i < $old.length; i++) {\n                if ($old[i] !== $new[i]) {\n                    return false;\n                }\n            }\n            return true;\n        }\n        return $old === $new;\n    }\n\n    get value() {\n        return this.last;\n    }\n\n    public check() {\n        const start = Date.now();\n        const now = this.execute();\n        const changed = !this.isEqual(this.last, now);\n        this.lastExecutionTime = Date.now() - start;\n        if (changed) {\n            WATCH_LOGGER.debug(() => {\n                if (this.getExpBody() !== 'fragment') {\n                    return `Watcher: <${this.getExpBody()}> Changed from ${this.last} to ${now} `;\n                }\n                return '';\n            });\n            this.onChange(this.last, now);\n            this.last = now;\n            if (isArray(this.last)) {\n                this.last = clone(this.last);\n            }\n            return true;\n        }\n        return false;\n    }\n}\n\nexport class Watcher {\n    public static ROOT = new Watcher();\n    public expressions = [] as WatchExpression[];\n    public isActive = true;\n    public parent: Watcher = null as any;\n    public children = [] as Watcher[];\n    private constructor() {}\n\n    check() {\n        if (this.isActive) {\n            this.expressions.forEach(expression => expression.check());\n            this.children.forEach(child => {\n                child.check();\n            });\n        }\n    }\n    \n    create() {\n        const child = new Watcher();\n        child.parent = this;\n        this.children.push(child);\n        return child;\n    }\n\n    remove(child: Watcher) {\n        if (this.children.length > 0) {\n            const i = this.children.indexOf(child);\n            if (i >= 0) {\n                this.children.splice(i, 1);\n            }\n        }\n    }\n\n    destroy() {\n        this.clear();\n        this.parent && this.parent.remove(this);\n    }\n\n    clear() {\n        this.children = [];\n        this.expressions = [];\n    }\n\n    watch(fn: Function, onChange: (prev: any, now: any) => any) {\n        const expression = new WatchExpression(fn, onChange);\n        this.expressions.push(expression);\n        return expression;\n    }\n\n    count() {\n        if (!this.isActive) {\n            return 0;\n        }\n        let count = this.expressions.length;\n        this.children.forEach(child => {\n            count += child.count();\n        });\n        return count;\n    }\n}\n\nexport function useWatcher(parent: Watcher) {\n    const [change, onChange] = useState({});\n    let [ watcher ] = useState(() => parent.create());\n    watcher.clear();\n    useEffect(() => { \n        return () => {\n            watcher.destroy();\n        };\n    }, []);\n    return {\n        watch: (fn: Function) => {\n            return watcher.watch(fn, () => onChange({})).value;\n        }\n    };\n};"],"mappings":"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","ignoreList":[]}

app-rn-runtime/styles/background.component.js

@@ -0,0 +1,311 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import * as React from 'react';
+import { LinearGradient as ExpoLinearGradient } from 'expo-linear-gradient';
+import { Image, StyleSheet, View } from 'react-native';
+import { isEmpty, isNil, isNumber } from 'lodash-es';
+import imageSizeEstimator from '@wavemaker/app-rn-runtime/core/imageSizeEstimator';
+import { AssetConsumer } from '@wavemaker/app-rn-runtime/core/asset.provider';
+import { isFullPathUrl } from '@wavemaker/app-rn-runtime/core/utils';
+const IMAGE_URL_REGEX = /url\(['|"]?(.+)['|"]?\)$/gi;
+const LINEAT_GRADIENT_REGEX = /linear-gradient\((.+)\)$/gi;
+const DIMENSION_REGEX = /([0-9%]+)[a-z]*/g;
+const BACKGROUND_POSITION_REGEX = /([0-9%]+)[a-z]*\s*([0-9%]+)[a-z]*/g;
+const BACKGROUND_SIZE_REGEX = /([0-9%]+)[a-z]*\s*([0-9%]+)[a-z]*/g;
+const ASSET_CACHE = {};
+export class LinearGradient extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = this.parse();
+  }
+  parse(val = this.props.value) {
+    let state = {};
+    const splits = val.split(',').map(v => v.trim());
+    let angle = 0;
+    const locations = [];
+    if (splits[0].endsWith('deg')) {
+      angle = parseInt(splits[0].split('deg')[0]) % 360;
+      angle = angle < 0 ? 360 + angle : angle;
+      splits.shift();
+    }
+    angle += 90;
+    const delta = Math.round(Math.tan(angle * Math.PI / 180) * 100) / 100;
+    if (Math.abs(delta) > 1) {
+      state = {
+        end: {
+          x: -0.5 / delta + 0.5,
+          y: 0
+        },
+        start: {
+          x: 0.5 / delta + 0.5,
+          y: 1
+        }
+      };
+    } else {
+      state = {
+        start: {
+          x: 0,
+          y: -0.5 * delta + 0.5
+        },
+        end: {
+          x: 1,
+          y: 0.5 * delta + 0.5
+        }
+      };
+    }
+    if (angle >= 270 && angle <= 450) {
+      state = {
+        start: state.end,
+        end: state.start
+      };
+    }
+    state.colors = [];
+    state.locations = [];
+    splits.map(s => {
+      var _s$matchAll$next;
+      const p = (_s$matchAll$next = s.matchAll(/\s*([0-9]+)%/g).next()) === null || _s$matchAll$next === void 0 ? void 0 : _s$matchAll$next.value;
+      if (p) {
+        state.locations.push(parseInt(p[1]) / 100);
+        state.colors.push(s.replace(p[0], ''));
+      } else {
+        state.locations.push(null);
+        state.colors.push(s);
+      }
+    });
+    return state;
+  }
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (prevProps.value !== this.props.value) {
+      this.setState(this.parse());
+    }
+  }
+  render() {
+    var _this$props$size, _this$props$style;
+    return /*#__PURE__*/React.createElement(View, {
+      style: [{
+        borderWidth: 0,
+        overflow: 'hidden'
+      }, StyleSheet.absoluteFill, this.props.style]
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [StyleSheet.absoluteFill, this.props.middle ? {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center'
+      } : null]
+    }, /*#__PURE__*/React.createElement(ExpoLinearGradient, {
+      testID: "wm-expo-linear-gradient",
+      colors: this.state.colors,
+      locations: this.state.locations,
+      start: this.state.start,
+      end: this.state.end,
+      style: [(_this$props$size = this.props.size) !== null && _this$props$size !== void 0 && _this$props$size.width ? this.props.size : StyleSheet.absoluteFill, this.props.position, {
+        position: 'absolute',
+        borderRadius: (_this$props$style = this.props.style) === null || _this$props$style === void 0 ? void 0 : _this$props$style.borderRadius
+      }]
+    })), this.props.children);
+  }
+}
+export class BackgroundComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "loadAsset", null);
+    this.state = {
+      imageSrc: this.props.image ? ASSET_CACHE[this.props.image] : undefined
+    };
+  }
+  caluculateSize(imageSrc) {
+    if (isNumber(imageSrc)) {
+      const {
+        width,
+        height
+      } = Image.resolveAssetSource(imageSrc);
+      this.setState({
+        naturalImageWidth: width,
+        naturalImageHeight: height
+      });
+    } else if (!isNil(imageSrc)) {
+      imageSizeEstimator.getSize(imageSrc.uri, (width, height) => {
+        this.setState({
+          naturalImageWidth: width,
+          naturalImageHeight: height
+        });
+      });
+    }
+  }
+  getDimension(dim) {
+    if (dim) {
+      const value = dim.matchAll(DIMENSION_REGEX).next().value;
+      if (value[1]) {
+        return value[1].endsWith('%') ? value[1] : parseInt(value[1]);
+      }
+    }
+    return null;
+  }
+  getPosition() {
+    const result = {};
+    if (!this.props.position) {
+      return result;
+    }
+    const position = this.props.position.split(' ').map(s => s.trim());
+    if (position[0] === 'center') {
+      result.alignItems = 'center';
+    } else if (position[0] === 'top') {
+      result.top = 0;
+    } else if (position[0] === 'bottom') {
+      result.bottom = 0;
+    } else {
+      result.top = this.getDimension(position[0]);
+    }
+    if (position[1] === 'center') {
+      result.justifyContent = 'center';
+    } else if (position[1] === 'left') {
+      result.left = 0;
+    } else if (position[1] === 'bottom') {
+      result.right = 0;
+    } else {
+      result.left = this.getDimension(position[1]);
+    }
+    return result;
+  }
+  getPositionAndSize() {
+    var _this$props$size2, _this$getGradient;
+    const result = {};
+    if (this.props.resizeMode) {
+      result.resizeMode = this.props.resizeMode;
+      return result;
+    } else if (this.props.position === 'center') {
+      result.resizeMode = 'center';
+      result.position = {
+        justifyContent: 'center',
+        alignItems: 'center'
+      };
+    } else if (this.props.size === 'contain' || this.props.size === 'cover') {
+      result.resizeMode = this.props.size;
+      return result;
+    }
+    const size = (_this$props$size2 = this.props.size) === null || _this$props$size2 === void 0 ? void 0 : _this$props$size2.matchAll(BACKGROUND_SIZE_REGEX).next().value;
+    result.size = {};
+    if (size) {
+      result.size.width = size[1].endsWith('%') ? size[1] : parseInt(size[1]);
+      result.size.height = size[2].endsWith('%') ? size[2] : parseInt(size[2]);
+    }
+    if (!result.resizeMode && this.props.position) {
+      result.position = this.getPosition();
+    }
+    if (!((_this$getGradient = this.getGradient()) !== null && _this$getGradient !== void 0 && (_this$getGradient = _this$getGradient.value) !== null && _this$getGradient !== void 0 && _this$getGradient.length)) {
+      if (this.props.repeat === 'no-repeat') {
+        result.size.width = result.size.width || this.state.naturalImageWidth;
+        result.size.height = result.size.height || this.state.naturalImageHeight;
+      } else if (this.props.repeat === 'repeat-x') {
+        result.resizeMode = 'repeat';
+        result.size.width = result.size.width || '100%';
+        result.size.height = result.size.height || this.state.naturalImageHeight;
+      } else if (this.props.repeat === 'repeat-y') {
+        result.resizeMode = 'repeat';
+        result.size.width = result.size.width || this.state.naturalImageWidth;
+        result.size.height = result.size.height || '100%';
+      } else {
+        result.resizeMode = 'repeat';
+      }
+    }
+    return result;
+  }
+  renderLinearGradient(data) {
+    const psresult = this.getPositionAndSize();
+    return /*#__PURE__*/React.createElement(LinearGradient, {
+      value: data || '',
+      style: this.props.style,
+      size: psresult.size,
+      position: psresult.position,
+      middle: psresult.resizeMode === 'center'
+    }, /*#__PURE__*/React.createElement(React.Fragment, null));
+  }
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (this.props.image && prevProps.image !== this.props.image) {
+      this.setImage();
+    }
+  }
+  componentDidMount() {
+    setTimeout(() => this.setImage(), 100);
+  }
+  setImage() {
+    var _this$props$image, _source;
+    let source = (_this$props$image = this.props.image) === null || _this$props$image === void 0 ? void 0 : _this$props$image.trim();
+    if (!source) {
+      return;
+    }
+    if ((_source = source) !== null && _source !== void 0 && _source.startsWith('url')) {
+      var _this$props$image2;
+      source = (_this$props$image2 = this.props.image) === null || _this$props$image2 === void 0 ? void 0 : _this$props$image2.matchAll(IMAGE_URL_REGEX).next().value[1];
+    }
+    if (this.loadAsset) {
+      source = this.loadAsset(source);
+    }
+    if (isFullPathUrl(source)) {
+      source = {
+        uri: source
+      };
+    }
+    this.caluculateSize(source);
+    this.setState({
+      imageSrc: source
+    });
+    if (this.props.image) {
+      ASSET_CACHE[this.props.image] = source;
+    }
+  }
+  getGradient() {
+    var _this$props$image3;
+    return (_this$props$image3 = this.props.image) === null || _this$props$image3 === void 0 ? void 0 : _this$props$image3.trim().matchAll(LINEAT_GRADIENT_REGEX).next();
+  }
+  renderImage() {
+    const psresult = this.getPositionAndSize();
+    return /*#__PURE__*/React.createElement(AssetConsumer, null, loadAsset => {
+      var _psresult$position, _psresult$position2;
+      const loadImage = this.loadAsset !== loadAsset;
+      this.loadAsset = loadAsset;
+      if (loadImage) {
+        setTimeout(() => this.setImage(), 10);
+      }
+      return /*#__PURE__*/React.createElement(View, {
+        style: [{
+          borderWidth: 0,
+          overflow: 'hidden'
+        }, StyleSheet.absoluteFill, this.props.style]
+      }, /*#__PURE__*/React.createElement(View, {
+        style: [StyleSheet.absoluteFill, {
+          flexDirection: 'row',
+          justifyContent: (_psresult$position = psresult.position) === null || _psresult$position === void 0 ? void 0 : _psresult$position.justifyContent,
+          alignItems: (_psresult$position2 = psresult.position) === null || _psresult$position2 === void 0 ? void 0 : _psresult$position2.alignItems
+        }]
+      }, /*#__PURE__*/React.createElement(View, {
+        style: [{
+          position: 'absolute',
+          overflow: 'hidden'
+        }, psresult.position, isEmpty(psresult.size) ? StyleSheet.absoluteFill : psresult.size]
+      }, /*#__PURE__*/React.createElement(Image, {
+        source: this.state.imageSrc,
+        resizeMode: psresult.resizeMode || 'cover',
+        style: [{
+          width: '100%',
+          height: '100%'
+        }, !isEmpty(psresult.size) || psresult.resizeMode === 'cover' || psresult.resizeMode === 'contain' ? null : {
+          minWidth: this.state.naturalImageWidth,
+          minHeight: this.state.naturalImageHeight
+        }]
+      }))));
+    });
+  }
+  render() {
+    var _gradientData$value;
+    const gradientData = this.getGradient();
+    if (gradientData !== null && gradientData !== void 0 && (_gradientData$value = gradientData.value) !== null && _gradientData$value !== void 0 && _gradientData$value.length) {
+      return this.renderLinearGradient(gradientData.value[1]);
+    } else if (this.props.image && this.state.imageSrc) {
+      return this.renderImage();
+    }
+    return null;
+  }
+}
+//# sourceMappingURL=background.component.js.map

app-rn-runtime/styles/style-props.js

@@ -0,0 +1,93 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+export class StyleProps {
+  constructor() {
+    _defineProperty(this, "backgroundimage", void 0);
+    _defineProperty(this, "backgroundsize", void 0);
+    _defineProperty(this, "backgroundrepeat", void 0);
+    _defineProperty(this, "backgroundresizemode", void 0);
+    _defineProperty(this, "backgroundposition", void 0);
+    _defineProperty(this, "backgroundcolor", void 0);
+    _defineProperty(this, "bordercolor", void 0);
+    _defineProperty(this, "borderradius", void 0);
+    _defineProperty(this, "borderstyle", void 0);
+    _defineProperty(this, "borderwidth", void 0);
+    _defineProperty(this, "borderbottomwidth", void 0);
+    _defineProperty(this, "borderleftwidth", void 0);
+    _defineProperty(this, "borderrightwidth", void 0);
+    _defineProperty(this, "bordertopwidth", void 0);
+    _defineProperty(this, "color", void 0);
+    _defineProperty(this, "display", void 0);
+    _defineProperty(this, "fontsize", void 0);
+    _defineProperty(this, "fontfamily", void 0);
+    _defineProperty(this, "fontstyle", void 0);
+    _defineProperty(this, "fontvariant", void 0);
+    _defineProperty(this, "fontweight", void 0);
+    _defineProperty(this, "height", void 0);
+    _defineProperty(this, "horizontalalign", void 0);
+    _defineProperty(this, "lineheight", void 0);
+    _defineProperty(this, "margin", void 0);
+    _defineProperty(this, "marginbottom", void 0);
+    _defineProperty(this, "marginleft", void 0);
+    _defineProperty(this, "marginright", void 0);
+    _defineProperty(this, "margintop", void 0);
+    _defineProperty(this, "opacity", void 0);
+    _defineProperty(this, "overflow", void 0);
+    _defineProperty(this, "padding", void 0);
+    _defineProperty(this, "paddingbottom", void 0);
+    _defineProperty(this, "paddingleft", void 0);
+    _defineProperty(this, "paddingright", void 0);
+    _defineProperty(this, "paddingtop", void 0);
+    _defineProperty(this, "textalign", void 0);
+    _defineProperty(this, "textdecoration", void 0);
+    _defineProperty(this, "verticalalign", void 0);
+    _defineProperty(this, "width", void 0);
+    _defineProperty(this, "zindex", void 0);
+  }
+}
+const styleMapping = {
+  backgroundimage: 'backgroundImage',
+  backgroundsize: 'backgroundSize',
+  backgroundrepeat: 'backgroundRepeat',
+  backgroundresizemode: 'backgroundResizeMode',
+  backgroundposition: 'backgroundPosition',
+  backgroundcolor: 'backgroundColor',
+  bordercolor: 'borderColor',
+  borderradius: 'borderRadius',
+  borderstyle: 'borderStyle',
+  borderwidth: 'borderWidth',
+  borderbottomwidth: 'borderBottomWidth',
+  borderleftwidth: 'borderLeftWidth',
+  borderrightwidth: 'borderRightWidth',
+  bordertopwidth: 'borderTopWidth',
+  color: 'color',
+  display: 'display',
+  fontsize: 'fontSize',
+  fontfamily: 'fontFamily',
+  fontstyle: 'fontStyle',
+  fontvariant: 'fontVariant',
+  fontweight: 'fontWeight',
+  height: 'height',
+  //horizontalalign: any;
+  lineheight: 'lineHeight',
+  margin: 'margin',
+  marginbottom: 'marginBottom',
+  marginleft: 'marginLeft',
+  marginright: 'marginRight',
+  margintop: 'marginTop',
+  opacity: 'opacity',
+  overflow: 'overflow',
+  padding: 'padding',
+  paddingbottom: 'paddingBottom',
+  paddingleft: 'paddingLeft',
+  paddingright: 'paddingRight',
+  paddingtop: 'paddingTop',
+  textalign: 'textAlign',
+  textdecoration: 'textDecoration',
+  verticalalign: 'verticalAlign',
+  width: 'width',
+  zindex: 'zindex'
+};
+export const getStyleName = name => styleMapping[name];
+//# sourceMappingURL=style-props.js.map

app-rn-runtime/styles/style-props.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleProps","constructor","_defineProperty","styleMapping","backgroundimage","backgroundsize","backgroundrepeat","backgroundresizemode","backgroundposition","backgroundcolor","bordercolor","borderradius","borderstyle","borderwidth","borderbottomwidth","borderleftwidth","borderrightwidth","bordertopwidth","color","display","fontsize","fontfamily","fontstyle","fontvariant","fontweight","height","lineheight","margin","marginbottom","marginleft","marginright","margintop","opacity","overflow","padding","paddingbottom","paddingleft","paddingright","paddingtop","textalign","textdecoration","verticalalign","width","zindex","getStyleName","name"],"sources":["style-props.ts"],"sourcesContent":["export class StyleProps {\n    backgroundimage?: any;\n    backgroundsize?: any;\n    backgroundrepeat?: any;\n    backgroundresizemode?: any;\n    backgroundposition?: any;\n    backgroundcolor?: any;\n    bordercolor?: any;\n    borderradius?: any;\n    borderstyle?: any;\n    borderwidth?: any;\n    borderbottomwidth?: any;\n    borderleftwidth?: any;\n    borderrightwidth?: any;\n    bordertopwidth?: any;\n    color?: any;\n    display?: any;\n    fontsize?: any;\n    fontfamily?: any;\n    fontstyle?: any;\n    fontvariant?: any;\n    fontweight?: any;\n    height?: any;\n    horizontalalign?: any;\n    lineheight?: any;\n    margin?: any;\n    marginbottom?: any;\n    marginleft?: any;\n    marginright?: any;\n    margintop?: any;\n    opacity?: any;\n    overflow?: any;\n    padding?: any;\n    paddingbottom?: any;\n    paddingleft?: any;\n    paddingright?: any;\n    paddingtop?: any;\n    textalign?: any;\n    textdecoration?: any;\n    verticalalign?: any;\n    width?: any;\n    zindex?: any;\n}\n\nconst styleMapping = {\n    backgroundimage: 'backgroundImage',\n    backgroundsize: 'backgroundSize',\n    backgroundrepeat: 'backgroundRepeat',\n    backgroundresizemode: 'backgroundResizeMode',\n    backgroundposition: 'backgroundPosition',\n    backgroundcolor: 'backgroundColor',\n    bordercolor: 'borderColor',\n    borderradius: 'borderRadius',\n    borderstyle: 'borderStyle',\n    borderwidth: 'borderWidth',\n    borderbottomwidth: 'borderBottomWidth',\n    borderleftwidth: 'borderLeftWidth',\n    borderrightwidth: 'borderRightWidth',\n    bordertopwidth: 'borderTopWidth',\n    color: 'color',\n    display: 'display',\n    fontsize: 'fontSize',\n    fontfamily: 'fontFamily',\n    fontstyle: 'fontStyle',\n    fontvariant: 'fontVariant',\n    fontweight: 'fontWeight',\n    height: 'height',\n    //horizontalalign: any;\n    lineheight: 'lineHeight',\n    margin: 'margin',\n    marginbottom: 'marginBottom',\n    marginleft: 'marginLeft',\n    marginright: 'marginRight',\n    margintop: 'marginTop',\n    opacity: 'opacity',\n    overflow: 'overflow',\n    padding: 'padding',\n    paddingbottom: 'paddingBottom',\n    paddingleft: 'paddingLeft',\n    paddingright: 'paddingRight',\n    paddingtop: 'paddingTop',\n    textalign: 'textAlign',\n    textdecoration: 'textDecoration',\n    verticalalign: 'verticalAlign',\n    width: 'width',\n    zindex: 'zindex'\n};\n\nexport const getStyleName = (name: string) => (styleMapping as any)[name];\n"],"mappings":";;;AAAA,OAAO,MAAMA,UAAU,CAAC;EAAAC,YAAA;IAAAC,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;EAAA;AA0CxB;AAEA,MAAMC,YAAY,GAAG;EACjBC,eAAe,EAAE,iBAAiB;EAClCC,cAAc,EAAE,gBAAgB;EAChCC,gBAAgB,EAAE,kBAAkB;EACpCC,oBAAoB,EAAE,sBAAsB;EAC5CC,kBAAkB,EAAE,oBAAoB;EACxCC,eAAe,EAAE,iBAAiB;EAClCC,WAAW,EAAE,aAAa;EAC1BC,YAAY,EAAE,cAAc;EAC5BC,WAAW,EAAE,aAAa;EAC1BC,WAAW,EAAE,aAAa;EAC1BC,iBAAiB,EAAE,mBAAmB;EACtCC,eAAe,EAAE,iBAAiB;EAClCC,gBAAgB,EAAE,kBAAkB;EACpCC,cAAc,EAAE,gBAAgB;EAChCC,KAAK,EAAE,OAAO;EACdC,OAAO,EAAE,SAAS;EAClBC,QAAQ,EAAE,UAAU;EACpBC,UAAU,EAAE,YAAY;EACxBC,SAAS,EAAE,WAAW;EACtBC,WAAW,EAAE,aAAa;EAC1BC,UAAU,EAAE,YAAY;EACxBC,MAAM,EAAE,QAAQ;EAChB;EACAC,UAAU,EAAE,YAAY;EACxBC,MAAM,EAAE,QAAQ;EAChBC,YAAY,EAAE,cAAc;EAC5BC,UAAU,EAAE,YAAY;EACxBC,WAAW,EAAE,aAAa;EAC1BC,SAAS,EAAE,WAAW;EACtBC,OAAO,EAAE,SAAS;EAClBC,QAAQ,EAAE,UAAU;EACpBC,OAAO,EAAE,SAAS;EAClBC,aAAa,EAAE,eAAe;EAC9BC,WAAW,EAAE,aAAa;EAC1BC,YAAY,EAAE,cAAc;EAC5BC,UAAU,EAAE,YAAY;EACxBC,SAAS,EAAE,WAAW;EACtBC,cAAc,EAAE,gBAAgB;EAChCC,aAAa,EAAE,eAAe;EAC9BC,KAAK,EAAE,OAAO;EACdC,MAAM,EAAE;AACZ,CAAC;AAED,OAAO,MAAMC,YAAY,GAAIC,IAAY,IAAM1C,YAAY,CAAS0C,IAAI,CAAC","ignoreList":[]}