@wavemaker/app-rn-runtime 12.0.0-next.141218 → 12.0.0-next.141221

package/components/basic/label/label.styles.js

@@ -0,0 +1,133 @@
+import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';
+import { deepCopy } from '@wavemaker/app-rn-runtime/core/utils';
+import { defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';
+export const DEFAULT_CLASS = 'app-label';
+BASE_THEME.registerStyle((themeVariables, addStyle) => {
+  const defaultStyles = defineStyles({
+    root: {
+      alignSelf: 'flex-start'
+    },
+    text: {
+      fontSize: 16,
+      color: themeVariables.labelDefaultColor
+    },
+    asterisk: {
+      color: themeVariables.labelAsteriskColor,
+      marginLeft: 2
+    },
+    skeleton: {
+      root: {
+        width: '100%',
+        height: 16,
+        borderRadius: 4
+      }
+    },
+    link: {
+      text: {
+        textDecorationLine: 'underline'
+      }
+    }
+  });
+  addStyle(DEFAULT_CLASS, '', defaultStyles);
+  addStyle(DEFAULT_CLASS + '-rtl', '', {
+    root: {
+      flexDirection: 'row',
+      textAlign: 'right'
+    }
+  });
+  const getLabelStyles = (color, textColor) => {
+    return {
+      root: {
+        backgroundColor: color,
+        paddingLeft: 32,
+        paddingTop: 16,
+        paddingRight: 32,
+        paddingBottom: 16,
+        borderRadius: 6
+      },
+      text: {
+        color: textColor,
+        fontWeight: 'bold'
+      }
+    };
+  };
+  addStyle('label-danger', '', getLabelStyles(themeVariables.labelDangerColor, themeVariables.labelDangerContrastColor));
+  addStyle('label-default', '', getLabelStyles(themeVariables.labelDefaultColor, themeVariables.labelDefaultContrastColor));
+  addStyle('label-info', '', getLabelStyles(themeVariables.labelInfoColor, themeVariables.labelInfoContrastColor));
+  addStyle('label-primary', '', getLabelStyles(themeVariables.labelPrimaryColor, themeVariables.labelPrimaryContrastColor));
+  addStyle('label-success', '', getLabelStyles(themeVariables.labelSuccessColor, themeVariables.labelSuccessContrastColor));
+  addStyle('label-warning', '', getLabelStyles(themeVariables.labelWarningColor, themeVariables.labelWarningContrastColor));
+  addStyle('label-test', '', getLabelStyles('yellow', 'red'));
+  addStyle('label-test1', '', getLabelStyles('blue', 'orange'));
+  addStyle('label-test111', '', getLabelStyles('grey', 'red'));
+  addStyle('label-test11112', '', getLabelStyles('green', 'yellow'));
+  addStyle('label-test12311', '', getLabelStyles('violet', 'pink'));
+  addStyle('label-test9', '', getLabelStyles('green', 'blue'));
+  const getTextStyles = color => {
+    return {
+      text: {
+        color: color
+      }
+    };
+  };
+  addStyle('text-danger', '', getTextStyles(themeVariables.labelTextDangerColor));
+  addStyle('text-info', '', getTextStyles(themeVariables.labelTextInfoColor));
+  addStyle('text-primary', '', getTextStyles(themeVariables.labelTextPrimaryColor));
+  addStyle('text-success', '', getTextStyles(themeVariables.labelTextSuccessColor));
+  addStyle('text-warning', '', getTextStyles(themeVariables.labelTextWarningColor));
+  addStyle('text-center', '', {
+    root: {
+      textAlign: 'center'
+    }
+  });
+  addStyle('text-left', '', {
+    root: {
+      textAlign: 'left'
+    }
+  });
+  addStyle('text-right', '', {
+    root: {
+      textAlign: 'right'
+    }
+  });
+  const getHeadingStyles = (fontSize, overrides) => {
+    return deepCopy({
+      text: {
+        fontWeight: '400',
+        fontSize: fontSize,
+        margin: 4,
+        color: themeVariables.labelHeaderColor
+      }
+    }, overrides);
+  };
+  addStyle('h1', '', getHeadingStyles(themeVariables.heading1FontSize, {
+    text: {
+      fontWeight: 'bold'
+    }
+  }));
+  addStyle('h2', '', getHeadingStyles(themeVariables.heading2FontSize, {
+    text: {
+      fontWeight: '500'
+    }
+  }));
+  addStyle('h3', '', getHeadingStyles(themeVariables.heading3FontSize));
+  addStyle('h4', '', getHeadingStyles(themeVariables.heading4FontSize));
+  addStyle('h5', '', getHeadingStyles(themeVariables.heading5FontSize));
+  addStyle('h6', '', getHeadingStyles(themeVariables.heading6FontSize));
+  addStyle('media-heading', '', {
+    text: {
+      fontSize: 16
+    }
+  });
+  addStyle('text-muted', '', {
+    text: {
+      color: themeVariables.labelTextMutedColor
+    }
+  });
+  addStyle('p', '', {
+    text: {
+      fontSize: 12
+    }
+  });
+});
+//# sourceMappingURL=label.styles.js.map

package/components/basic/label/label.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BASE_THEME","deepCopy","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","alignSelf","text","fontSize","color","labelDefaultColor","asterisk","labelAsteriskColor","marginLeft","skeleton","width","height","borderRadius","link","textDecorationLine","flexDirection","textAlign","getLabelStyles","textColor","backgroundColor","paddingLeft","paddingTop","paddingRight","paddingBottom","fontWeight","labelDangerColor","labelDangerContrastColor","labelDefaultContrastColor","labelInfoColor","labelInfoContrastColor","labelPrimaryColor","labelPrimaryContrastColor","labelSuccessColor","labelSuccessContrastColor","labelWarningColor","labelWarningContrastColor","getTextStyles","labelTextDangerColor","labelTextInfoColor","labelTextPrimaryColor","labelTextSuccessColor","labelTextWarningColor","getHeadingStyles","overrides","margin","labelHeaderColor","heading1FontSize","heading2FontSize","heading3FontSize","heading4FontSize","heading5FontSize","heading6FontSize","labelTextMutedColor"],"sources":["label.styles.ts"],"sourcesContent":["import BASE_THEME, { AllStyle }  from '@wavemaker/app-rn-runtime/styles/theme';\nimport { deepCopy } from '@wavemaker/app-rn-runtime/core/utils';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmSkeletonStyles } from '../skeleton/skeleton.styles';\nimport { WmAnchorStyles } from '../anchor/anchor.styles';\n\nexport type WmLabelStyles = BaseStyles & {\n  asterisk: AllStyle,\n  skeleton: WmSkeletonStyles \n  link: WmAnchorStyles\n};\n\nexport const DEFAULT_CLASS = 'app-label';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n  const defaultStyles: WmLabelStyles = defineStyles({\n    root: {\n      alignSelf: 'flex-start',\n    },\n    text: {\n        fontSize: 16,\n        color: themeVariables.labelDefaultColor\n      },\n      asterisk: {\n        color: themeVariables.labelAsteriskColor,\n        marginLeft: 2\n      },\n      skeleton: {\n        root:{\n          width: '100%',\n          height: 16,\n          borderRadius: 4,\n        }\n      } as any as WmSkeletonStyles,\n      link: {\n        text: {\n          textDecorationLine: 'underline'\n        }\n      } as WmAnchorStyles\n  });\n\n  addStyle(DEFAULT_CLASS, '', defaultStyles);\n  addStyle(DEFAULT_CLASS + '-rtl', '', {\n    root : {\n      flexDirection: 'row',\n      textAlign: 'right'\n    }\n  });\n  const getLabelStyles = (color: string, textColor: string): WmLabelStyles => {\n    return {\n      root: {\n        backgroundColor: color,\n        paddingLeft: 32,\n        paddingTop: 16,\n        paddingRight: 32,\n        paddingBottom: 16,\n        borderRadius: 6\n      },\n      text: {\n        color: textColor,\n        fontWeight: 'bold'\n      }\n    } as WmLabelStyles;\n  };\n\n  addStyle('label-danger', '', getLabelStyles(themeVariables.labelDangerColor, themeVariables.labelDangerContrastColor));\n  addStyle('label-default', '', getLabelStyles(themeVariables.labelDefaultColor, themeVariables.labelDefaultContrastColor));\n  addStyle('label-info', '', getLabelStyles(themeVariables.labelInfoColor, themeVariables.labelInfoContrastColor));\n  addStyle('label-primary', '', getLabelStyles(themeVariables.labelPrimaryColor, themeVariables.labelPrimaryContrastColor));\n  addStyle('label-success', '', getLabelStyles(themeVariables.labelSuccessColor, themeVariables.labelSuccessContrastColor));\n  addStyle('label-warning', '', getLabelStyles(themeVariables.labelWarningColor, themeVariables.labelWarningContrastColor));\n  addStyle('label-test', '', getLabelStyles('yellow', 'red'));\n  addStyle('label-test1', '', getLabelStyles('blue', 'orange'));\n  addStyle('label-test111', '', getLabelStyles('grey', 'red'));\n  addStyle('label-test11112', '', getLabelStyles('green', 'yellow'));\n  addStyle('label-test12311', '', getLabelStyles('violet', 'pink'));\n  addStyle('label-test9', '', getLabelStyles('green', 'blue'));\n\n  const getTextStyles = (color: string) => {\n    return {\n      text: {\n        color: color\n      }\n    } as WmLabelStyles;\n  };\n\n  addStyle('text-danger', '', getTextStyles(themeVariables.labelTextDangerColor));\n  addStyle('text-info', '', getTextStyles(themeVariables.labelTextInfoColor));\n  addStyle('text-primary', '', getTextStyles(themeVariables.labelTextPrimaryColor));\n  addStyle('text-success', '', getTextStyles(themeVariables.labelTextSuccessColor));\n  addStyle('text-warning', '', getTextStyles(themeVariables.labelTextWarningColor));\n  addStyle('text-center', '', {\n    root: {\n      textAlign: 'center'\n    }\n  } as WmLabelStyles);\n  addStyle('text-left', '', {\n    root: {\n      textAlign: 'left'\n    }\n  } as WmLabelStyles);\n  addStyle('text-right', '', {\n    root: {\n      textAlign: 'right'\n    }\n  } as WmLabelStyles);\n\n\n  const getHeadingStyles = (fontSize: number, overrides?: WmLabelStyles) => {\n    return deepCopy({\n      text: {\n        fontWeight: '400',\n        fontSize: fontSize,\n        margin: 4,\n        color: themeVariables.labelHeaderColor\n      }\n    } as WmLabelStyles, overrides);\n  };\n  addStyle('h1', '', getHeadingStyles(themeVariables.heading1FontSize, {text: {fontWeight: 'bold'}} as WmLabelStyles));\n  addStyle('h2', '', getHeadingStyles(themeVariables.heading2FontSize, {text: {fontWeight: '500'}} as WmLabelStyles));\n  addStyle('h3', '', getHeadingStyles(themeVariables.heading3FontSize));\n  addStyle('h4', '', getHeadingStyles(themeVariables.heading4FontSize));\n  addStyle('h5', '', getHeadingStyles(themeVariables.heading5FontSize));\n  addStyle('h6', '', getHeadingStyles(themeVariables.heading6FontSize));\n  addStyle('media-heading', '', {\n    text : {\n      fontSize: 16\n    }\n  } as WmLabelStyles);\n  addStyle('text-muted', '', {\n    text : {\n      color: themeVariables.labelTextMutedColor\n    }\n  } as WmLabelStyles);\n  addStyle('p', '', {\n    text : {\n      fontSize: 12\n    }\n  } as WmLabelStyles);\n});\n"],"mappings":"AAAA,OAAOA,UAAU,MAAqB,wCAAwC;AAC9E,SAASC,QAAQ,QAAQ,sCAAsC;AAC/D,SAAqBC,YAAY,QAAQ,+CAA+C;AAUxF,OAAO,MAAMC,aAAa,GAAG,WAAW;AACxCH,UAAU,CAACI,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACrD,MAAMC,aAA4B,GAAGL,YAAY,CAAC;IAChDM,IAAI,EAAE;MACJC,SAAS,EAAE;IACb,CAAC;IACDC,IAAI,EAAE;MACFC,QAAQ,EAAE,EAAE;MACZC,KAAK,EAAEP,cAAc,CAACQ;IACxB,CAAC;IACDC,QAAQ,EAAE;MACRF,KAAK,EAAEP,cAAc,CAACU,kBAAkB;MACxCC,UAAU,EAAE;IACd,CAAC;IACDC,QAAQ,EAAE;MACRT,IAAI,EAAC;QACHU,KAAK,EAAE,MAAM;QACbC,MAAM,EAAE,EAAE;QACVC,YAAY,EAAE;MAChB;IACF,CAA4B;IAC5BC,IAAI,EAAE;MACJX,IAAI,EAAE;QACJY,kBAAkB,EAAE;MACtB;IACF;EACJ,CAAC,CAAC;EAEFhB,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;EAC1CD,QAAQ,CAACH,aAAa,GAAG,MAAM,EAAE,EAAE,EAAE;IACnCK,IAAI,EAAG;MACLe,aAAa,EAAE,KAAK;MACpBC,SAAS,EAAE;IACb;EACF,CAAC,CAAC;EACF,MAAMC,cAAc,GAAGA,CAACb,KAAa,EAAEc,SAAiB,KAAoB;IAC1E,OAAO;MACLlB,IAAI,EAAE;QACJmB,eAAe,EAAEf,KAAK;QACtBgB,WAAW,EAAE,EAAE;QACfC,UAAU,EAAE,EAAE;QACdC,YAAY,EAAE,EAAE;QAChBC,aAAa,EAAE,EAAE;QACjBX,YAAY,EAAE;MAChB,CAAC;MACDV,IAAI,EAAE;QACJE,KAAK,EAAEc,SAAS;QAChBM,UAAU,EAAE;MACd;IACF,CAAC;EACH,CAAC;EAED1B,QAAQ,CAAC,cAAc,EAAE,EAAE,EAAEmB,cAAc,CAACpB,cAAc,CAAC4B,gBAAgB,EAAE5B,cAAc,CAAC6B,wBAAwB,CAAC,CAAC;EACtH5B,QAAQ,CAAC,eAAe,EAAE,EAAE,EAAEmB,cAAc,CAACpB,cAAc,CAACQ,iBAAiB,EAAER,cAAc,CAAC8B,yBAAyB,CAAC,CAAC;EACzH7B,QAAQ,CAAC,YAAY,EAAE,EAAE,EAAEmB,cAAc,CAACpB,cAAc,CAAC+B,cAAc,EAAE/B,cAAc,CAACgC,sBAAsB,CAAC,CAAC;EAChH/B,QAAQ,CAAC,eAAe,EAAE,EAAE,EAAEmB,cAAc,CAACpB,cAAc,CAACiC,iBAAiB,EAAEjC,cAAc,CAACkC,yBAAyB,CAAC,CAAC;EACzHjC,QAAQ,CAAC,eAAe,EAAE,EAAE,EAAEmB,cAAc,CAACpB,cAAc,CAACmC,iBAAiB,EAAEnC,cAAc,CAACoC,yBAAyB,CAAC,CAAC;EACzHnC,QAAQ,CAAC,eAAe,EAAE,EAAE,EAAEmB,cAAc,CAACpB,cAAc,CAACqC,iBAAiB,EAAErC,cAAc,CAACsC,yBAAyB,CAAC,CAAC;EACzHrC,QAAQ,CAAC,YAAY,EAAE,EAAE,EAAEmB,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;EAC3DnB,QAAQ,CAAC,aAAa,EAAE,EAAE,EAAEmB,cAAc,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;EAC7DnB,QAAQ,CAAC,eAAe,EAAE,EAAE,EAAEmB,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;EAC5DnB,QAAQ,CAAC,iBAAiB,EAAE,EAAE,EAAEmB,cAAc,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;EAClEnB,QAAQ,CAAC,iBAAiB,EAAE,EAAE,EAAEmB,cAAc,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;EACjEnB,QAAQ,CAAC,aAAa,EAAE,EAAE,EAAEmB,cAAc,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;EAE5D,MAAMmB,aAAa,GAAIhC,KAAa,IAAK;IACvC,OAAO;MACLF,IAAI,EAAE;QACJE,KAAK,EAAEA;MACT;IACF,CAAC;EACH,CAAC;EAEDN,QAAQ,CAAC,aAAa,EAAE,EAAE,EAAEsC,aAAa,CAACvC,cAAc,CAACwC,oBAAoB,CAAC,CAAC;EAC/EvC,QAAQ,CAAC,WAAW,EAAE,EAAE,EAAEsC,aAAa,CAACvC,cAAc,CAACyC,kBAAkB,CAAC,CAAC;EAC3ExC,QAAQ,CAAC,cAAc,EAAE,EAAE,EAAEsC,aAAa,CAACvC,cAAc,CAAC0C,qBAAqB,CAAC,CAAC;EACjFzC,QAAQ,CAAC,cAAc,EAAE,EAAE,EAAEsC,aAAa,CAACvC,cAAc,CAAC2C,qBAAqB,CAAC,CAAC;EACjF1C,QAAQ,CAAC,cAAc,EAAE,EAAE,EAAEsC,aAAa,CAACvC,cAAc,CAAC4C,qBAAqB,CAAC,CAAC;EACjF3C,QAAQ,CAAC,aAAa,EAAE,EAAE,EAAE;IAC1BE,IAAI,EAAE;MACJgB,SAAS,EAAE;IACb;EACF,CAAkB,CAAC;EACnBlB,QAAQ,CAAC,WAAW,EAAE,EAAE,EAAE;IACxBE,IAAI,EAAE;MACJgB,SAAS,EAAE;IACb;EACF,CAAkB,CAAC;EACnBlB,QAAQ,CAAC,YAAY,EAAE,EAAE,EAAE;IACzBE,IAAI,EAAE;MACJgB,SAAS,EAAE;IACb;EACF,CAAkB,CAAC;EAGnB,MAAM0B,gBAAgB,GAAGA,CAACvC,QAAgB,EAAEwC,SAAyB,KAAK;IACxE,OAAOlD,QAAQ,CAAC;MACdS,IAAI,EAAE;QACJsB,UAAU,EAAE,KAAK;QACjBrB,QAAQ,EAAEA,QAAQ;QAClByC,MAAM,EAAE,CAAC;QACTxC,KAAK,EAAEP,cAAc,CAACgD;MACxB;IACF,CAAC,EAAmBF,SAAS,CAAC;EAChC,CAAC;EACD7C,QAAQ,CAAC,IAAI,EAAE,EAAE,EAAE4C,gBAAgB,CAAC7C,cAAc,CAACiD,gBAAgB,EAAE;IAAC5C,IAAI,EAAE;MAACsB,UAAU,EAAE;IAAM;EAAC,CAAkB,CAAC,CAAC;EACpH1B,QAAQ,CAAC,IAAI,EAAE,EAAE,EAAE4C,gBAAgB,CAAC7C,cAAc,CAACkD,gBAAgB,EAAE;IAAC7C,IAAI,EAAE;MAACsB,UAAU,EAAE;IAAK;EAAC,CAAkB,CAAC,CAAC;EACnH1B,QAAQ,CAAC,IAAI,EAAE,EAAE,EAAE4C,gBAAgB,CAAC7C,cAAc,CAACmD,gBAAgB,CAAC,CAAC;EACrElD,QAAQ,CAAC,IAAI,EAAE,EAAE,EAAE4C,gBAAgB,CAAC7C,cAAc,CAACoD,gBAAgB,CAAC,CAAC;EACrEnD,QAAQ,CAAC,IAAI,EAAE,EAAE,EAAE4C,gBAAgB,CAAC7C,cAAc,CAACqD,gBAAgB,CAAC,CAAC;EACrEpD,QAAQ,CAAC,IAAI,EAAE,EAAE,EAAE4C,gBAAgB,CAAC7C,cAAc,CAACsD,gBAAgB,CAAC,CAAC;EACrErD,QAAQ,CAAC,eAAe,EAAE,EAAE,EAAE;IAC5BI,IAAI,EAAG;MACLC,QAAQ,EAAE;IACZ;EACF,CAAkB,CAAC;EACnBL,QAAQ,CAAC,YAAY,EAAE,EAAE,EAAE;IACzBI,IAAI,EAAG;MACLE,KAAK,EAAEP,cAAc,CAACuD;IACxB;EACF,CAAkB,CAAC;EACnBtD,QAAQ,CAAC,GAAG,EAAE,EAAE,EAAE;IAChBI,IAAI,EAAG;MACLC,QAAQ,EAAE;IACZ;EACF,CAAkB,CAAC;AACrB,CAAC,CAAC","ignoreList":[]}

package/components/basic/lottie/lottie.component.js

@@ -0,0 +1,138 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+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 React from 'react';
+import axios from 'axios';
+import { Platform, View } from 'react-native';
+import LottieView from 'lottie-react-native';
+import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
+import WmLottieProps from './lottie.props';
+import { DEFAULT_CLASS } from './lottie.styles';
+export class WmLottieState extends BaseComponentState {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "animationData", void 0);
+    _defineProperty(this, "isCompleted", false);
+  }
+}
+export default class WmLottie extends BaseComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmLottieProps(), new WmLottieState());
+    _defineProperty(this, "lottie", /*#__PURE__*/React.createRef());
+  }
+  play() {
+    if (this.lottie.current) {
+      if (this.state.isCompleted) {
+        this.reset();
+      } else {
+        this.lottie.current.play();
+        this.invokeEventCallback('onPlay', [null, this.proxy]);
+      }
+    }
+  }
+  pause() {
+    if (this.lottie.current) {
+      this.lottie.current.pause();
+      this.invokeEventCallback('onPause', [null, this.proxy]);
+    }
+  }
+  reset() {
+    if (this.lottie.current) {
+      if (this.lottie.current.reset) {
+        this.lottie.current.reset();
+        this.lottie.current.play();
+      } else if (this.lottie.current.goToAndPlay) {
+        this.lottie.current.goToAndPlay(0);
+      } else {
+        return;
+      }
+      this.invokeEventCallback('onPlay', [null, this.proxy]);
+      this.updateState({
+        isCompleted: false
+      });
+    }
+  }
+  onReady() {
+    this.invokeEventCallback('onReady', [null, this.proxy]);
+    if (this.state.props.autoplay) {
+      this.invokeEventCallback('onPlay', [null, this.proxy]);
+    }
+  }
+  loadAnimationData() {
+    if (this.state.animationData || !this.loadAsset) {
+      return;
+    }
+    if (Platform.OS == 'web') {
+      const url = this.loadAsset(this.state.props.source);
+      axios.get(url).then(({
+        data
+      }) => {
+        this.updateState({
+          animationData: data
+        }, () => this.onReady());
+      });
+    } else {
+      this.updateState({
+        animationData: this.loadAsset(this.state.props.source)
+      }, () => this.onReady());
+    }
+  }
+  onPropertyChange(name, $new, $old) {
+    super.onPropertyChange(name, $new, $old);
+    switch (name) {
+      case 'src':
+        this.loadAnimationData();
+        break;
+      case 'loop':
+        if (this.initialized && !this.state.isCompleted && ($new || this.state.props.autoplay)) {
+          setTimeout(() => this.reset(), 200);
+        }
+        break;
+    }
+  }
+  componentDidMount() {
+    super.componentDidMount();
+    this.loadAnimationData();
+  }
+  renderWebLottie(props) {
+    var _Lottie;
+    let Lottie = Platform.OS == 'web' ? require('react-lottie-player') : null;
+    Lottie = ((_Lottie = Lottie) === null || _Lottie === void 0 ? void 0 : _Lottie.default) || Lottie;
+    return /*#__PURE__*/React.createElement(Lottie, {
+      animationData: this.state.animationData,
+      ref: this.lottie,
+      loop: props.loop,
+      play: props.autoplay,
+      speed: props.speed,
+      style: this.styles.content,
+      onComplete: () => {
+        this.updateState({
+          isCompleted: true
+        });
+        this.invokeEventCallback('onComplete', [null, this.proxy]);
+      }
+    });
+  }
+  renderNativeLottie(props) {
+    return /*#__PURE__*/React.createElement(LottieView, {
+      source: this.state.animationData,
+      ref: this.lottie,
+      autoPlay: props.autoplay,
+      speed: props.speed,
+      loop: props.loop,
+      style: this.styles.content,
+      onAnimationFinish: () => {
+        this.updateState({
+          isCompleted: true
+        });
+        this.invokeEventCallback('onComplete', [null, this.proxy]);
+      }
+    });
+  }
+  renderWidget(props) {
+    return /*#__PURE__*/React.createElement(View, {
+      style: this.styles.root
+    }, this._background, this.state.animationData ? Platform.OS == 'web' ? this.renderWebLottie(props) : this.renderNativeLottie(props) : null);
+  }
+}
+//# sourceMappingURL=lottie.component.js.map

package/components/basic/lottie/lottie.props.js

@@ -0,0 +1,14 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+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 { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';
+export default class WmLottieProps extends BaseProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "speed", 1);
+    _defineProperty(this, "autoplay", false);
+    _defineProperty(this, "loop", false);
+    _defineProperty(this, "source", '');
+  }
+}
+//# sourceMappingURL=lottie.props.js.map

package/components/basic/message/message.component.js

@@ -0,0 +1,78 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+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 React from 'react';
+import { View, Text } from 'react-native';
+import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
+import WmMessageProps from './message.props';
+import { DEFAULT_CLASS } from './message.styles';
+import WmIcon from '../icon/icon.component';
+import WmButton from '../button/button.component';
+import { Animatedview } from '@wavemaker/app-rn-runtime/components/basic/animatedview.component';
+import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
+export class WmMessageState extends BaseComponentState {}
+const MESSAGE_ICONS = {
+  'success': 'wm-sl-l sl-check',
+  'warning': 'wm-sl-l sl-alarm-bell',
+  'error': 'fa fa-times-circle',
+  'info': 'wi wi-info',
+  'loading': 'fa fa-spinner fa-spin'
+};
+const DEFAULT_TITLE = {
+  'success': 'Success',
+  'warning': 'Warning',
+  'error': 'Error',
+  'info': 'Info',
+  'loading': 'Processing'
+};
+export default class WmMessage extends BaseComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmMessageProps());
+    _defineProperty(this, "close", () => {
+      this.updateState({
+        props: {
+          show: false
+        }
+      }, () => this.invokeEventCallback('onClose', [null, this]));
+    });
+  }
+  showMessage() {
+    this.updateState({
+      props: {
+        show: true
+      }
+    });
+  }
+  hideMessage() {
+    this.updateState({
+      props: {
+        show: false
+      }
+    });
+  }
+  renderWidget(props) {
+    const styles = this.theme.mergeStyle(this.theme.getStyle(`${props.type}-${props.variant}-message`), this.styles);
+    return /*#__PURE__*/React.createElement(Animatedview, {
+      entryanimation: props.animation,
+      delay: props.animationdelay,
+      style: styles.root
+    }, this._background, /*#__PURE__*/React.createElement(WmIcon, {
+      id: this.getTestId('icon'),
+      iconclass: props.type && MESSAGE_ICONS[props.type],
+      styles: styles.icon
+    }), /*#__PURE__*/React.createElement(View, {
+      style: styles.message
+    }, /*#__PURE__*/React.createElement(Text, _extends({}, this.getTestPropsForLabel('title'), {
+      style: styles.title
+    }, getAccessibilityProps(AccessibilityWidgetType.MESSAGE, props)), props.title || DEFAULT_TITLE[props.type || '']), /*#__PURE__*/React.createElement(Text, _extends({}, this.getTestPropsForLabel('caption'), {
+      style: styles.text
+    }, getAccessibilityProps(AccessibilityWidgetType.MESSAGE, props)), props.caption)), props.hideclose ? null : /*#__PURE__*/React.createElement(WmButton, {
+      id: this.getTestId('close'),
+      iconclass: "wi wi-close",
+      styles: styles.closeBtn,
+      onTap: this.close
+    }));
+  }
+}
+//# sourceMappingURL=message.component.js.map

package/components/basic/message/message.props.js

@@ -0,0 +1,21 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+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 { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';
+export default class WmMessageProps extends BaseProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "animation", 'fadeIn');
+    _defineProperty(this, "animationdelay", null);
+    _defineProperty(this, "title", '');
+    _defineProperty(this, "variant", 'dark');
+    _defineProperty(this, "caption", 'Message');
+    _defineProperty(this, "type", 'success');
+    _defineProperty(this, "hideclose", false);
+    _defineProperty(this, "accessibilitylabel", undefined);
+    _defineProperty(this, "hint", undefined);
+    _defineProperty(this, "accessibilityrole", 'alert');
+    _defineProperty(this, "onClose", void 0);
+  }
+}
+//# sourceMappingURL=message.props.js.map

package/components/basic/modal/modal.props.js

@@ -0,0 +1,12 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+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 { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';
+export default class WmModalProps extends BaseProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "children", null);
+    _defineProperty(this, "animationType", 'slide');
+  }
+}
+//# sourceMappingURL=modal.props.js.map

package/components/basic/picture/picture.component.js

@@ -0,0 +1,197 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+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 React from 'react';
+import { Image, View } from 'react-native';
+// import { NumberProp, SvgUri } from 'react-native-svg';
+import { isNumber } from 'lodash-es';
+import { Tappable } from '@wavemaker/app-rn-runtime/core/tappable.component';
+import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
+import ImageSizeEstimator from '@wavemaker/app-rn-runtime/core/imageSizeEstimator';
+import { isFullPathUrl } from '@wavemaker/app-rn-runtime/core/utils';
+import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
+import WmPictureProps from './picture.props';
+import { DEFAULT_CLASS } from './picture.styles';
+import { Animatedview } from '@wavemaker/app-rn-runtime/components/basic/animatedview.component';
+import { createSkeleton } from '../skeleton/skeleton.component';
+export class WmPictureState extends BaseComponentState {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "naturalImageWidth", 0);
+    _defineProperty(this, "naturalImageHeight", 0);
+    _defineProperty(this, "imageWidth", 0);
+    _defineProperty(this, "imageHeight", 0);
+  }
+}
+export default class WmPicture extends BaseComponent {
+  constructor(_props) {
+    super(_props, DEFAULT_CLASS, new WmPictureProps());
+    _defineProperty(this, "_pictureSource", null);
+    _defineProperty(this, "_picturePlaceHolder", null);
+    _defineProperty(this, "onViewLayoutChange", e => {
+      let imageWidth = e.nativeEvent.layout.width;
+      let imageHeight = e.nativeEvent.layout.height;
+      if (!imageWidth && !imageHeight) {
+        return;
+      }
+      if (!this.styles.root.height || typeof this.styles.root.height === 'string' && !this.styles.root.height.includes('%')) {
+        imageHeight = 0;
+      }
+      if (imageWidth && !imageHeight) {
+        imageHeight = imageWidth * this.state.naturalImageHeight / this.state.naturalImageWidth;
+      } else if (imageHeight && !imageWidth) {
+        imageWidth = imageHeight * this.state.naturalImageWidth / this.state.naturalImageHeight;
+      }
+      this.updateState({
+        imageWidth: imageWidth,
+        imageHeight: imageHeight
+      });
+    });
+    _defineProperty(this, "showImage", (imageElement, props) => {
+      if (props.fastload) {
+        return imageElement;
+      }
+      return this.state.imageWidth ? imageElement : null;
+    });
+  }
+  loadImage(image) {
+    if (!image || !this.loadAsset) {
+      return null;
+    }
+    const imageSrc = this.loadAsset(image);
+    if (imageSrc && typeof imageSrc === 'object' && typeof imageSrc.default === 'function') {
+      return null;
+    }
+    if (isNumber(imageSrc)) {
+      const {
+        width,
+        height
+      } = Image.resolveAssetSource(imageSrc);
+      this.updateState({
+        naturalImageWidth: width,
+        naturalImageHeight: height
+      });
+    } else if (imageSrc !== null) {
+      const cancel = ImageSizeEstimator.getSize(imageSrc, (width, height) => {
+        this.updateState({
+          naturalImageWidth: width,
+          naturalImageHeight: height
+        });
+        this.cleanup.splice(this.cleanup.indexOf(cancel), 1);
+      });
+      this.cleanup.push(cancel);
+    }
+    return imageSrc;
+  }
+  onPropertyChange(name, $new, $old) {
+    switch (name) {
+      case 'picturesource':
+        this._pictureSource = null;
+      case 'pictureplaceholder':
+        this._picturePlaceHolder = null;
+        break;
+    }
+  }
+  createShape(shape, imageWidth) {
+    if (shape) {
+      switch (shape) {
+        case 'circle':
+          return {
+            picture: {
+              borderRadius: isNumber(imageWidth) ? imageWidth / 2 : 4
+            }
+          };
+        case 'rounded':
+          return this.theme.getStyle('rounded-image');
+        case 'thumbnail':
+          return this.theme.getStyle('thumbnail-image');
+      }
+    }
+    return {};
+  }
+  getElementToShow(props, imgSrc, shapeStyles) {
+    let elementToshow, source;
+    if (imgSrc && typeof imgSrc === 'object' && typeof (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.default) === 'function') {
+      let imgStyle = {};
+      if (props.resizemode === 'contain') {
+        imgStyle['width'] = '100%';
+        imgStyle['height'] = '100%';
+      }
+      elementToshow = /*#__PURE__*/React.createElement(imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.default, imgStyle);
+      //} else if (!isWebPreviewMode() && props.isSvg) {
+      //  svg from uri
+      //  elementToshow = <SvgUri testID={this.getTestId('picture')} width={this.styles.root.width as NumberProp} height={this.styles.root.height as NumberProp} uri={imgSrc}/>;
+    } else if (isFullPathUrl(imgSrc)) {
+      source = {
+        uri: imgSrc
+      };
+    } else {
+      source = imgSrc;
+    }
+    if (this.state.naturalImageWidth) {
+      elementToshow = /*#__PURE__*/React.createElement(Image, _extends({}, this.getTestProps('picture'), {
+        style: [this.styles.picture, shapeStyles.picture],
+        resizeMode: props.resizemode,
+        source: source
+      }, getAccessibilityProps(AccessibilityWidgetType.PICTURE, props)));
+    }
+    return elementToshow;
+  }
+  renderSkeleton(props) {
+    var _this$styles$root, _shapeStyles$root, _shapeStyles$picture, _this$styles$root2, _shapeStyles$root2, _shapeStyles$picture2, _this$styles$root3, _shapeStyles$picture3, _shapeStyles$root3, _this$styles$root4;
+    const imageWidth = this.state.imageWidth;
+    const imageHeight = this.state.imageHeight;
+    const shapeStyles = this.createShape(this.props.shape, imageWidth);
+    const skeletonWidth = this.props.skeletonwidth || ((_this$styles$root = this.styles.root) === null || _this$styles$root === void 0 ? void 0 : _this$styles$root.width) || ((_shapeStyles$root = shapeStyles.root) === null || _shapeStyles$root === void 0 ? void 0 : _shapeStyles$root.width) || ((_shapeStyles$picture = shapeStyles.picture) === null || _shapeStyles$picture === void 0 ? void 0 : _shapeStyles$picture.width) || imageWidth;
+    const skeletonHeight = this.props.skeletonheight || ((_this$styles$root2 = this.styles.root) === null || _this$styles$root2 === void 0 ? void 0 : _this$styles$root2.height) || ((_shapeStyles$root2 = shapeStyles.root) === null || _shapeStyles$root2 === void 0 ? void 0 : _shapeStyles$root2.height) || ((_shapeStyles$picture2 = shapeStyles.picture) === null || _shapeStyles$picture2 === void 0 ? void 0 : _shapeStyles$picture2.height) || imageHeight;
+    return createSkeleton(this.theme, this.styles.skeleton, {
+      ...this.styles.root,
+      borderRadius: this.props.shape == 'circle' && (_this$styles$root3 = this.styles.root) !== null && _this$styles$root3 !== void 0 && _this$styles$root3.width ? 25 : ((_shapeStyles$picture3 = shapeStyles.picture) === null || _shapeStyles$picture3 === void 0 ? void 0 : _shapeStyles$picture3.borderRadius) || ((_shapeStyles$root3 = shapeStyles.root) === null || _shapeStyles$root3 === void 0 ? void 0 : _shapeStyles$root3.borderRadius) || ((_this$styles$root4 = this.styles.root) === null || _this$styles$root4 === void 0 ? void 0 : _this$styles$root4.borderRadius) || 4,
+      width: skeletonWidth,
+      height: skeletonHeight
+    });
+  }
+  renderWidget(props) {
+    var _shapeStyles$picture4;
+    const imageWidth = this.state.imageWidth;
+    const imageHeight = this.state.imageHeight;
+    const shapeStyles = this.createShape(props.shape, imageWidth);
+    this._pictureSource = this._pictureSource || this.loadImage(props.picturesource);
+    this._picturePlaceHolder = props.fastload ? this._pictureSource || this._picturePlaceHolder || this.loadImage(props.pictureplaceholder) : this._picturePlaceHolder || this.loadImage(props.pictureplaceholder);
+    const imgSrc = this._pictureSource || this._picturePlaceHolder;
+    let elementToshow;
+    if (imgSrc) {
+      elementToshow = this.getElementToShow(props, imgSrc, shapeStyles);
+    }
+    return imgSrc && (this.state.naturalImageWidth || props.isSvg) ? /*#__PURE__*/React.createElement(View, {
+      style: [{
+        width: imageWidth,
+        height: imageHeight
+      }, this.styles.root, shapeStyles.root, shapeStyles.picture]
+    }, this._background, /*#__PURE__*/React.createElement(View, {
+      style: [{
+        overflow: 'hidden',
+        width: '100%',
+        height: '100%'
+      }],
+      onLayout: this.onViewLayoutChange
+    }, /*#__PURE__*/React.createElement(Tappable, _extends({}, this.getTestPropsForAction(), {
+      rippleColor: this.styles.root.rippleColor,
+      target: this,
+      styles: {
+        width: imageWidth ? null : '100%',
+        height: imageHeight ? null : '100%'
+      }
+    }), /*#__PURE__*/React.createElement(Animatedview, {
+      entryanimation: props.animation,
+      delay: props.animationdelay,
+      style: [{
+        height: imageHeight,
+        width: imageWidth,
+        borderRadius: (_shapeStyles$picture4 = shapeStyles.picture) === null || _shapeStyles$picture4 === void 0 ? void 0 : _shapeStyles$picture4.borderRadius
+      }]
+    }, this.showImage(elementToshow, props))))) : null;
+  }
+}
+//# sourceMappingURL=picture.component.js.map