@wavemaker/app-rn-runtime 12.0.0-next.141167 → 12.0.0-next.141177

app-rn-runtime/components/container/accordion/accordion.styles.js

@@ -106,6 +106,10 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
     },
     primary: {
       backgroundColor: themeVariables.labelPrimaryColor
+    },
+    skeleton: {
+      root: {},
+      text: {}
     }
   });
   addStyle(DEFAULT_CLASS, '', defaultStyles);

app-rn-runtime/components/container/accordion/accordion.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["BASE_THEME","defineStyles","Platform","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","width","borderWidth","borderStyle","borderColor","accordionBorderColor","borderRadius","backgroundColor","transparent","text","color","accordionTitleColor","fontSize","firstHeader","borderTopLeftRadius","borderTopRightRadius","pane","header","borderBottomWidth","accordionHeaderBgColor","padding","flexDirection","justifyContent","lastHeader","borderBottomLeftRadius","borderBottomRightRadius","activeHeader","accordionActiveHeaderBgColor","activeHeaderTitle","accordionActiveHeaderTextColor","subheading","icon","alignSelf","height","accordionIconColor","fontWeight","leftToggleIcon","rightToggleIcon","activeIcon","activeBadge","badge","marginRight","alignContent","titleIcon","default","success","labelSuccessColor","danger","labelDangerColor","warning","labelWarningColor","info","labelInfoColor","primary","labelPrimaryColor","OS","textAlign","marginBottom"],"sources":["accordion.styles.ts"],"sourcesContent":["import BASE_THEME, {AllStyle} from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmIconStyles } from '@wavemaker/app-rn-runtime/components/basic/icon/icon.styles';\nimport { TextStyle, ViewStyle, Platform } from 'react-native';\nimport Color from 'color';\n\nexport type WmAccordionStyles = BaseStyles & {\n  icon: WmIconStyles,\n  rightToggleIcon: WmIconStyles,\n  leftToggleIcon: WmIconStyles,\n  activeIcon: WmIconStyles,\n  pane: AllStyle,\n  badge: AllStyle,\n  activeBadge: AllStyle,\n  firstHeader: ViewStyle,\n  lastHeader: ViewStyle,\n  header: AllStyle,\n  activeHeader: AllStyle,\n  activeHeaderTitle: TextStyle,\n  subheading: AllStyle,\n  titleIcon: WmIconStyles\n};\n\nexport const DEFAULT_CLASS = 'app-accordion';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n  const defaultStyles: WmAccordionStyles = defineStyles({\n      root: {\n        width: '100%',\n        borderWidth: 0,\n        borderStyle: 'solid',\n        borderColor: themeVariables.accordionBorderColor,\n        borderRadius: 6,\n        backgroundColor: themeVariables.transparent\n      },\n      text: {\n        color: themeVariables.accordionTitleColor,\n        fontSize: 18\n      },\n      firstHeader: {\n        borderTopLeftRadius: 6,\n        borderTopRightRadius: 6\n      },\n      pane : {},\n      header: {\n        borderBottomWidth: 1,\n        borderStyle: 'solid',\n        borderColor: themeVariables.accordionBorderColor,\n        backgroundColor: themeVariables.accordionHeaderBgColor,\n        padding: 8,\n        flexDirection: 'row',\n        justifyContent: 'center'\n      },\n      lastHeader: {\n        borderBottomWidth: 0,\n        borderBottomLeftRadius: 6,\n        borderBottomRightRadius: 6\n      },\n      activeHeader: {\n        borderColor: themeVariables.accordionActiveHeaderBgColor,\n        backgroundColor: themeVariables.accordionActiveHeaderBgColor\n      },\n      activeHeaderTitle: {\n        color: themeVariables.accordionActiveHeaderTextColor\n      },\n      subheading: {\n\n      },\n      icon: {\n        root: {\n          alignSelf: 'auto',\n          width: 24,\n          height: 24,\n          borderRadius: 24,\n          justifyContent: 'center'\n        },\n        icon: {\n          color: themeVariables.accordionIconColor,\n          alignSelf: 'center',\n          justifyContent: 'center',\n          fontSize: 16,\n          fontWeight: 'bold'\n        }\n      } as WmIconStyles,\n      leftToggleIcon: {\n        root: {}\n      } as WmIconStyles,\n      rightToggleIcon: {\n        root: {}\n      } as WmIconStyles,\n      activeIcon : {\n        root: {\n          borderColor: themeVariables.accordionActiveHeaderTextColor,\n        },\n        icon: {\n          color: themeVariables.accordionActiveHeaderTextColor\n        }\n      } as WmIconStyles,\n      activeBadge: {\n        borderColor: themeVariables.accordionActiveHeaderTextColor,\n        color: themeVariables.accordionActiveHeaderTextColor\n      },\n      badge: {\n          color: themeVariables.accordionIconColor,\n          fontSize: 14,\n          marginRight: 4,\n          width: 24,\n          height: 24,\n          borderRadius: 12,\n          alignContent: 'center',\n          borderStyle: 'solid',\n          borderWidth: 2,\n          borderColor: themeVariables.accordionIconColor,\n          backgroundColor: themeVariables.transparent\n      },\n      titleIcon: {} as WmIconStyles,\n      default: {},\n      success: {\n        backgroundColor: themeVariables.labelSuccessColor\n      },\n      danger: {\n        backgroundColor: themeVariables.labelDangerColor\n      },\n      warning: {\n        backgroundColor: themeVariables.labelWarningColor\n      },\n      info: {\n        backgroundColor: themeVariables.labelInfoColor\n      },\n      primary: {\n        backgroundColor: themeVariables.labelPrimaryColor\n      }\n  });\n\n  addStyle(DEFAULT_CLASS, '', defaultStyles);\n  addStyle(DEFAULT_CLASS + '-rtl', '', Platform.OS==\"web\"?{\n    text:{\n        textAlign:'right',\n    }  \n  }:{\n    text:{\n      textAlign:'left',\n    }  \n  });\n  addStyle('app-accordion1', '', {\n    pane: {\n      marginBottom: 0\n    },\n    leftToggleIcon: {\n      root: {\n        width: 1\n      }\n    },\n    icon: {\n      root: {\n        backgroundColor: 'rgba(255, 255, 255, 0.1)'\n      }\n    }\n  } as WmAccordionStyles);\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["BASE_THEME","defineStyles","Platform","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","width","borderWidth","borderStyle","borderColor","accordionBorderColor","borderRadius","backgroundColor","transparent","text","color","accordionTitleColor","fontSize","firstHeader","borderTopLeftRadius","borderTopRightRadius","pane","header","borderBottomWidth","accordionHeaderBgColor","padding","flexDirection","justifyContent","lastHeader","borderBottomLeftRadius","borderBottomRightRadius","activeHeader","accordionActiveHeaderBgColor","activeHeaderTitle","accordionActiveHeaderTextColor","subheading","icon","alignSelf","height","accordionIconColor","fontWeight","leftToggleIcon","rightToggleIcon","activeIcon","activeBadge","badge","marginRight","alignContent","titleIcon","default","success","labelSuccessColor","danger","labelDangerColor","warning","labelWarningColor","info","labelInfoColor","primary","labelPrimaryColor","skeleton","OS","textAlign","marginBottom"],"sources":["accordion.styles.ts"],"sourcesContent":["import BASE_THEME, {AllStyle} from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmIconStyles } from '@wavemaker/app-rn-runtime/components/basic/icon/icon.styles';\nimport { TextStyle, ViewStyle, Platform } from 'react-native';\nimport Color from 'color';\nimport { WmSkeletonStyles } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.styles';\n\nexport type WmAccordionStyles = BaseStyles & {\n  icon: WmIconStyles,\n  rightToggleIcon: WmIconStyles,\n  leftToggleIcon: WmIconStyles,\n  activeIcon: WmIconStyles,\n  pane: AllStyle,\n  badge: AllStyle,\n  activeBadge: AllStyle,\n  firstHeader: ViewStyle,\n  lastHeader: ViewStyle,\n  header: AllStyle,\n  activeHeader: AllStyle,\n  activeHeaderTitle: TextStyle,\n  subheading: AllStyle,\n  titleIcon: WmIconStyles,\n  skeleton: WmSkeletonStyles\n};\n \nexport const DEFAULT_CLASS = 'app-accordion';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n  const defaultStyles: WmAccordionStyles = defineStyles({\n      root: {\n        width: '100%',\n        borderWidth: 0,\n        borderStyle: 'solid',\n        borderColor: themeVariables.accordionBorderColor,\n        borderRadius: 6,\n        backgroundColor: themeVariables.transparent\n      },\n      text: {\n        color: themeVariables.accordionTitleColor,\n        fontSize: 18\n      },\n      firstHeader: {\n        borderTopLeftRadius: 6,\n        borderTopRightRadius: 6\n      },\n      pane : {},\n      header: {\n        borderBottomWidth: 1,\n        borderStyle: 'solid',\n        borderColor: themeVariables.accordionBorderColor,\n        backgroundColor: themeVariables.accordionHeaderBgColor,\n        padding: 8,\n        flexDirection: 'row',\n        justifyContent: 'center'\n      },\n      lastHeader: {\n        borderBottomWidth: 0,\n        borderBottomLeftRadius: 6,\n        borderBottomRightRadius: 6\n      },\n      activeHeader: {\n        borderColor: themeVariables.accordionActiveHeaderBgColor,\n        backgroundColor: themeVariables.accordionActiveHeaderBgColor\n      },\n      activeHeaderTitle: {\n        color: themeVariables.accordionActiveHeaderTextColor\n      },\n      subheading: {\n\n      },\n      icon: {\n        root: {\n          alignSelf: 'auto',\n          width: 24,\n          height: 24,\n          borderRadius: 24,\n          justifyContent: 'center'\n        },\n        icon: {\n          color: themeVariables.accordionIconColor,\n          alignSelf: 'center',\n          justifyContent: 'center',\n          fontSize: 16,\n          fontWeight: 'bold'\n        }\n      } as WmIconStyles,\n      leftToggleIcon: {\n        root: {}\n      } as WmIconStyles,\n      rightToggleIcon: {\n        root: {}\n      } as WmIconStyles,\n      activeIcon : {\n        root: {\n          borderColor: themeVariables.accordionActiveHeaderTextColor,\n        },\n        icon: {\n          color: themeVariables.accordionActiveHeaderTextColor\n        }\n      } as WmIconStyles,\n      activeBadge: {\n        borderColor: themeVariables.accordionActiveHeaderTextColor,\n        color: themeVariables.accordionActiveHeaderTextColor\n      },\n      badge: {\n          color: themeVariables.accordionIconColor,\n          fontSize: 14,\n          marginRight: 4,\n          width: 24,\n          height: 24,\n          borderRadius: 12,\n          alignContent: 'center',\n          borderStyle: 'solid',\n          borderWidth: 2,\n          borderColor: themeVariables.accordionIconColor,\n          backgroundColor: themeVariables.transparent\n      },\n      titleIcon: {} as WmIconStyles,\n      default: {},\n      success: {\n        backgroundColor: themeVariables.labelSuccessColor\n      },\n      danger: {\n        backgroundColor: themeVariables.labelDangerColor\n      },\n      warning: {\n        backgroundColor: themeVariables.labelWarningColor\n      },\n      info: {\n        backgroundColor: themeVariables.labelInfoColor\n      },\n      primary: {\n        backgroundColor: themeVariables.labelPrimaryColor\n      },\n      skeleton: {\n        root: {\n        },\n        text: {}\n      } as WmSkeletonStyles\n  });\n\n  addStyle(DEFAULT_CLASS, '', defaultStyles);\n  addStyle(DEFAULT_CLASS + '-rtl', '', Platform.OS==\"web\"?{\n    text:{\n        textAlign:'right',\n    }  \n  }:{\n    text:{\n      textAlign:'left',\n    }  \n  });\n  addStyle('app-accordion1', '', {\n    pane: {\n      marginBottom: 0\n    },\n    leftToggleIcon: {\n      root: {\n        width: 1\n      }\n    },\n    icon: {\n      root: {\n        backgroundColor: 'rgba(255, 255, 255, 0.1)'\n      }\n    }\n  } as WmAccordionStyles);\n});\n"],"mappings":"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","ignoreList":[]}

app-rn-runtime/components/container/accordion/accordionpane/accordionpane.component.js

@@ -18,6 +18,7 @@ export class WmAccordionpaneState extends BaseComponentState {
 export default class WmAccordionpane extends BaseComponent {
   constructor(props) {
     super(props, DEFAULT_CLASS, new WmAccordionpaneProps(), new WmAccordionpaneState());
+    _defineProperty(this, "paneId", "");
   }
   isCollapsed() {
     return this.state.collapsed;
@@ -42,9 +43,18 @@ export default class WmAccordionpane extends BaseComponent {
   }
   componentDidMount() {
     const accordion = this.parent;
-    accordion.addAccordionPane(this);
+    // When skeleton is enabled in the accordion component, the parent would be WMSkeleton which doesnot have addAccordionPane function
+    if (accordion.addAccordionPane) {
+      accordion.addAccordionPane(this);
+    }
     super.componentDidMount();
   }
+  componentWillUnmount() {
+    const accordion = this.parent;
+    if (accordion.removeAccordionPane) {
+      accordion.removeAccordionPane(this);
+    }
+  }
   onPartialLoad() {
     this.invokeEventCallback('onLoad', [this]);
   }

app-rn-runtime/components/container/accordion/accordionpane/accordionpane.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","BaseComponent","BaseComponentState","WmAccordionpaneProps","DEFAULT_CLASS","View","isWebPreviewMode","CollapsiblePane","WmAccordionpaneState","constructor","args","_defineProperty","WmAccordionpane","props","isCollapsed","state","collapsed","show","updateState","invokeEventCallback","proxy","hide","expand","parent","name","collapse","componentDidMount","accordion","addAccordionPane","onPartialLoad","renderContent","renderPartial","isPartialLoaded","setTimeout","bind","children","renderWidget","createElement","style","maxHeight","overflow","_background","close"],"sources":["accordionpane.component.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from 'react';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmAccordionpaneProps from './accordionpane.props';\nimport { DEFAULT_CLASS, WmAccordionpaneStyles } from './accordionpane.styles';\nimport WmAccordion from '../accordion.component';\nimport { View } from 'react-native';\nimport { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';\nimport { CollapsiblePane } from '../../panel/collapsible-pane.component';\n\nexport class WmAccordionpaneState extends BaseComponentState<WmAccordionpaneProps> {\n  isPartialLoaded = false;\n  collapsed = true;\n}\n\nexport default class WmAccordionpane extends BaseComponent<WmAccordionpaneProps, WmAccordionpaneState, WmAccordionpaneStyles> {\n\n  constructor(props: WmAccordionpaneProps) {\n    super(props, DEFAULT_CLASS, new WmAccordionpaneProps(), new WmAccordionpaneState());\n  }\n\n  isCollapsed() {\n    return this.state.collapsed;\n  }\n  \n  show() {\n    this.updateState({\n      collapsed: false\n    } as WmAccordionpaneState);\n    this.invokeEventCallback('onExpand', [null, this.proxy]);\n  }\n\n  hide() {\n    this.updateState({\n      collapsed: true\n    } as WmAccordionpaneState);\n    this.invokeEventCallback('onCollapse', [null, this.proxy]);\n  }\n\n  expand() {\n    (this.parent as WmAccordion).expand(this.props.name || '');\n  }\n\n  collapse() {\n    (this.parent as WmAccordion).expand(this.props.name || '');\n  }\n\n  componentDidMount() {\n    const accordion = (this.parent) as WmAccordion;\n    accordion.addAccordionPane(this);\n    super.componentDidMount();\n  }\n\n  onPartialLoad() {\n    this.invokeEventCallback('onLoad', [this]);\n  }\n\n  renderContent(props: WmAccordionpaneProps) {\n    if (props.renderPartial) {\n      if (!this.state.isPartialLoaded) {\n        setTimeout(() => {\n          this.updateState({\n            isPartialLoaded: true\n          } as WmAccordionpaneState);\n        });\n      }\n      return props.renderPartial(props, this.onPartialLoad.bind(this));\n    }\n    return props.children;\n  }\n  renderWidget(props: WmAccordionpaneProps) {\n    return isWebPreviewMode() ? \n    (<View style={this.state.collapsed ? {maxHeight: 0, overflow: 'hidden'} : {}}>\n      {this._background}\n      {this.renderContent(props)}\n    </View>) :\n    (<CollapsiblePane close={this.state.collapsed}>\n      {this._background}\n      {this.renderContent(props)}\n    </CollapsiblePane>);\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","BaseComponent","BaseComponentState","WmAccordionpaneProps","DEFAULT_CLASS","View","isWebPreviewMode","CollapsiblePane","WmAccordionpaneState","constructor","args","_defineProperty","WmAccordionpane","props","isCollapsed","state","collapsed","show","updateState","invokeEventCallback","proxy","hide","expand","parent","name","collapse","componentDidMount","accordion","addAccordionPane","componentWillUnmount","removeAccordionPane","onPartialLoad","renderContent","renderPartial","isPartialLoaded","setTimeout","bind","children","renderWidget","createElement","style","maxHeight","overflow","_background","close"],"sources":["accordionpane.component.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from 'react';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmAccordionpaneProps from './accordionpane.props';\nimport { DEFAULT_CLASS, WmAccordionpaneStyles } from './accordionpane.styles';\nimport WmAccordion from '../accordion.component';\nimport { View } from 'react-native';\nimport { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';\nimport { CollapsiblePane } from '../../panel/collapsible-pane.component';\n\nexport class WmAccordionpaneState extends BaseComponentState<WmAccordionpaneProps> {\n  isPartialLoaded = false;\n  collapsed = true;\n}\n\nexport default class WmAccordionpane extends BaseComponent<WmAccordionpaneProps, WmAccordionpaneState, WmAccordionpaneStyles> {\n  public paneId: string = \"\";\n  constructor(props: WmAccordionpaneProps) {\n    super(props, DEFAULT_CLASS, new WmAccordionpaneProps(), new WmAccordionpaneState());\n  }\n\n  isCollapsed() {\n    return this.state.collapsed;\n  }\n  \n  show() {\n    this.updateState({\n      collapsed: false\n    } as WmAccordionpaneState);\n    this.invokeEventCallback('onExpand', [null, this.proxy]);\n  }\n\n  hide() {\n    this.updateState({\n      collapsed: true\n    } as WmAccordionpaneState);\n    this.invokeEventCallback('onCollapse', [null, this.proxy]);\n  }\n\n  expand() {\n    (this.parent as WmAccordion).expand(this.props.name || '');\n  }\n\n  collapse() {\n    (this.parent as WmAccordion).expand(this.props.name || '');\n  }\n\n  componentDidMount() {\n    const accordion = (this.parent) as WmAccordion;\n    // When skeleton is enabled in the accordion component, the parent would be WMSkeleton which doesnot have addAccordionPane function\n    if(accordion.addAccordionPane) {\n      accordion.addAccordionPane(this);\n    }\n    super.componentDidMount();\n  }\n\n  componentWillUnmount() {\n    const accordion = (this.parent) as WmAccordion;\n    if(accordion.removeAccordionPane) {\n      accordion.removeAccordionPane(this);\n    }\n  }\n\n  onPartialLoad() {\n    this.invokeEventCallback('onLoad', [this]);\n  }\n\n  renderContent(props: WmAccordionpaneProps) {\n    if (props.renderPartial) {\n      if (!this.state.isPartialLoaded) {\n        setTimeout(() => {\n          this.updateState({\n            isPartialLoaded: true\n          } as WmAccordionpaneState);\n        });\n      }\n      return props.renderPartial(props, this.onPartialLoad.bind(this));\n    }\n    return props.children;\n  }\n  renderWidget(props: WmAccordionpaneProps) {\n    return isWebPreviewMode() ? \n    (<View style={this.state.collapsed ? {maxHeight: 0, overflow: 'hidden'} : {}}>\n      {this._background}\n      {this.renderContent(props)}\n    </View>) :\n    (<CollapsiblePane close={this.state.collapsed}>\n      {this._background}\n      {this.renderContent(props)}\n    </CollapsiblePane>);\n  }\n}\n"],"mappings":"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","ignoreList":[]}

app-rn-runtime/components/container/container.component.js

@@ -9,6 +9,7 @@ import { DEFAULT_CLASS } from './container.styles';
 import { Tappable } from '@wavemaker/app-rn-runtime/core/tappable.component';
 import { Animatedview } from '@wavemaker/app-rn-runtime/components/basic/animatedview.component';
 import { PartialHost, PartialHostState } from './partial-host.component';
+import { createSkeleton } from '../basic/skeleton/skeleton.component';
 export class WmContainerState extends PartialHostState {
   constructor(...args) {
     super(...args);
@@ -19,16 +20,49 @@ export default class WmContainer extends PartialHost {
   constructor(props) {
     super(props, DEFAULT_CLASS, new WmContainerProps(), new WmContainerState());
   }
+  getBackground() {
+    return this._showSkeleton ? null : this._background;
+  }
+  renderSkeleton(props) {
+    if (!props.showskeletonchildren) {
+      var _this$props;
+      const dimensions = {
+        width: this.styles.root.width ? '100%' : undefined,
+        height: this.styles.root.height ? '100%' : undefined
+      };
+      const skeletonStyles = ((_this$props = this.props) === null || _this$props === void 0 || (_this$props = _this$props.styles) === null || _this$props === void 0 ? void 0 : _this$props.skeleton) || {
+        root: {},
+        text: {}
+      };
+      return createSkeleton(this.theme, skeletonStyles, {
+        ...this.styles.root
+      }, /*#__PURE__*/React.createElement(View, {
+        style: [this.styles.root, {
+          opacity: 0
+        }]
+      }, /*#__PURE__*/React.createElement(Tappable, _extends({}, this.getTestPropsForAction(), {
+        target: this,
+        styles: dimensions
+      }), /*#__PURE__*/React.createElement(View, {
+        style: [dimensions, this.styles.content]
+      }, this.renderContent(props)))));
+    }
+    return null;
+  }
   renderWidget(props) {
     const dimensions = {
       width: this.styles.root.width ? '100%' : undefined,
       height: this.styles.root.height ? '100%' : undefined
     };
+    const styles = this._showSkeleton ? {
+      ...this.styles.root,
+      ...this.styles.skeleton.root
+    } : this.styles.root;
     return /*#__PURE__*/React.createElement(Animatedview, {
       entryanimation: props.animation,
       delay: props.animationdelay,
-      style: this.styles.root
-    }, this._background, /*#__PURE__*/React.createElement(Tappable, _extends({}, this.getTestPropsForAction(), {
+      style: styles
+    }, this.getBackground(), /*#__PURE__*/React.createElement(Tappable, _extends({}, this.getTestPropsForAction(), {
       target: this,
       styles: dimensions
     }), /*#__PURE__*/React.createElement(View, {

app-rn-runtime/components/container/container.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","WmContainerProps","DEFAULT_CLASS","Tappable","Animatedview","PartialHost","PartialHostState","WmContainerState","constructor","args","_defineProperty","WmContainer","props","renderWidget","dimensions","width","styles","root","undefined","height","createElement","entryanimation","animation","delay","animationdelay","style","_background","_extends","getTestPropsForAction","target","content","renderContent"],"sources":["container.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View, ViewStyle } from 'react-native';\n\nimport WmContainerProps from './container.props';\nimport { DEFAULT_CLASS, WmContainerStyles } from './container.styles';\nimport { Tappable } from '@wavemaker/app-rn-runtime/core/tappable.component';\nimport { Animatedview } from '@wavemaker/app-rn-runtime/components/basic/animatedview.component';\nimport { PartialHost, PartialHostState } from './partial-host.component';\n\nexport class WmContainerState extends PartialHostState<WmContainerProps> {\n  isPartialLoaded = false;\n}\n\nexport default class WmContainer extends PartialHost<WmContainerProps, WmContainerState, WmContainerStyles> {\n  constructor(props: WmContainerProps) {\n    super(props, DEFAULT_CLASS, new WmContainerProps(), new WmContainerState());\n  }\n\n  renderWidget(props: WmContainerProps) {\n    const dimensions = {\n      width: this.styles.root.width ? '100%' : undefined,\n      height: this.styles.root.height ? '100%' : undefined\n    };\n    return (\n      <Animatedview entryanimation={props.animation} delay={props.animationdelay} style={this.styles.root}>\n        {this._background}\n        <Tappable {...this.getTestPropsForAction()} target={this} styles={dimensions}>\n            <View style={[dimensions as ViewStyle,  this.styles.content]}>{this.renderContent(props)}</View>\n        </Tappable>\n      </Animatedview>\n    );\n  }\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAmB,cAAc;AAE9C,OAAOC,gBAAgB,MAAM,mBAAmB;AAChD,SAASC,aAAa,QAA2B,oBAAoB;AACrE,SAASC,QAAQ,QAAQ,mDAAmD;AAC5E,SAASC,YAAY,QAAQ,mEAAmE;AAChG,SAASC,WAAW,EAAEC,gBAAgB,QAAQ,0BAA0B;AAExE,OAAO,MAAMC,gBAAgB,SAASD,gBAAgB,CAAmB;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,0BACrD,KAAK;EAAA;AACzB;AAEA,eAAe,MAAMC,WAAW,SAASN,WAAW,CAAwD;EAC1GG,WAAWA,CAACI,KAAuB,EAAE;IACnC,KAAK,CAACA,KAAK,EAAEV,aAAa,EAAE,IAAID,gBAAgB,CAAC,CAAC,EAAE,IAAIM,gBAAgB,CAAC,CAAC,CAAC;EAC7E;EAEAM,YAAYA,CAACD,KAAuB,EAAE;IACpC,MAAME,UAAU,GAAG;MACjBC,KAAK,EAAE,IAAI,CAACC,MAAM,CAACC,IAAI,CAACF,KAAK,GAAG,MAAM,GAAGG,SAAS;MAClDC,MAAM,EAAE,IAAI,CAACH,MAAM,CAACC,IAAI,CAACE,MAAM,GAAG,MAAM,GAAGD;IAC7C,CAAC;IACD,oBACEnB,KAAA,CAAAqB,aAAA,CAAChB,YAAY;MAACiB,cAAc,EAAET,KAAK,CAACU,SAAU;MAACC,KAAK,EAAEX,KAAK,CAACY,cAAe;MAACC,KAAK,EAAE,IAAI,CAACT,MAAM,CAACC;IAAK,GACjG,IAAI,CAACS,WAAW,eACjB3B,KAAA,CAAAqB,aAAA,CAACjB,QAAQ,EAAAwB,QAAA,KAAK,IAAI,CAACC,qBAAqB,CAAC,CAAC;MAAEC,MAAM,EAAE,IAAK;MAACb,MAAM,EAAEF;IAAW,iBACzEf,KAAA,CAAAqB,aAAA,CAACpB,IAAI;MAACyB,KAAK,EAAE,CAACX,UAAU,EAAgB,IAAI,CAACE,MAAM,CAACc,OAAO;IAAE,GAAE,IAAI,CAACC,aAAa,CAACnB,KAAK,CAAQ,CACzF,CACE,CAAC;EAEnB;AACF","ignoreList":[]}
+{"version":3,"names":["React","View","WmContainerProps","DEFAULT_CLASS","Tappable","Animatedview","PartialHost","PartialHostState","createSkeleton","WmContainerState","constructor","args","_defineProperty","WmContainer","props","getBackground","_showSkeleton","_background","renderSkeleton","showskeletonchildren","_this$props","dimensions","width","styles","root","undefined","height","skeletonStyles","skeleton","text","theme","createElement","style","opacity","_extends","getTestPropsForAction","target","content","renderContent","renderWidget","entryanimation","animation","delay","animationdelay"],"sources":["container.component.tsx"],"sourcesContent":["import React from 'react';\nimport { ColorValue, View, ViewStyle } from 'react-native';\n\nimport WmContainerProps from './container.props';\nimport { DEFAULT_CLASS, WmContainerStyles } from './container.styles';\nimport { Tappable } from '@wavemaker/app-rn-runtime/core/tappable.component';\nimport { Animatedview } from '@wavemaker/app-rn-runtime/components/basic/animatedview.component';\nimport { PartialHost, PartialHostState } from './partial-host.component';\nimport { createSkeleton } from '../basic/skeleton/skeleton.component';\nimport { WmSkeletonStyles } from '../basic/skeleton/skeleton.styles';\n\nexport class WmContainerState extends PartialHostState<WmContainerProps> {\n  isPartialLoaded = false;\n}\n\nexport default class WmContainer extends PartialHost<WmContainerProps, WmContainerState, WmContainerStyles> {\n  constructor(props: WmContainerProps) {\n    super(props, DEFAULT_CLASS, new WmContainerProps(), new WmContainerState());\n  }\n\n  getBackground(): React.JSX.Element | null {\n    return this._showSkeleton ? null : this._background\n  } \n  \n  public renderSkeleton(props: WmContainerProps): React.ReactNode {\n      if(!props.showskeletonchildren) {\n        const dimensions = {\n          width: this.styles.root.width ? '100%' : undefined,\n          height: this.styles.root.height ? '100%' : undefined\n        };    \n        const skeletonStyles: WmSkeletonStyles = this.props?.styles?.skeleton || { root: {}, text: {}  } as WmSkeletonStyles\n        return createSkeleton(this.theme, skeletonStyles, {\n          ...this.styles.root\n        }, (<View style={[this.styles.root, { opacity: 0 }]}>\n                  <Tappable {...this.getTestPropsForAction()} target={this} styles={dimensions}>\n            <View style={[dimensions as ViewStyle,  this.styles.content]}>{this.renderContent(props)}</View>\n        </Tappable>\n\n        </View>))\n      }\n      return null;\n    }\n\n\n  renderWidget(props: WmContainerProps) {\n    const dimensions = {\n      width: this.styles.root.width ? '100%' : undefined,\n      height: this.styles.root.height ? '100%' : undefined\n    };\n\n    const styles = this._showSkeleton ? {\n      ...this.styles.root,\n      ...this.styles.skeleton.root\n    } : this.styles.root\n    return (\n      <Animatedview entryanimation={props.animation} delay={props.animationdelay} style={styles}>\n        {this.getBackground()}\n        <Tappable {...this.getTestPropsForAction()} target={this} styles={dimensions}>\n            <View style={[dimensions as ViewStyle,  this.styles.content]}>{this.renderContent(props)}</View>\n        </Tappable>\n      </Animatedview>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

app-rn-runtime/components/container/container.styles.js

@@ -7,6 +7,13 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
     text: {},
     content: {
       flexDirection: 'column'
+    },
+    skeleton: {
+      root: {
+        borderColor: 'transparent',
+        shadowColor: 'transparent',
+        backgroundColor: 'transparent'
+      }
     }
   });
   addStyle(DEFAULT_CLASS, '', defaultStyles);

app-rn-runtime/components/container/container.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","text","content","flexDirection","flex","paddingLeft","paddingRight","justifyContent","shadowColor","shadowOffset","width","height","shadowRadius","borderRadius","borderWidth","borderColor","containerOutlineColor","borderStyle"],"sources":["container.styles.ts"],"sourcesContent":["import BASE_THEME, { AllStyle }  from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\n\nexport type WmContainerStyles = BaseStyles & {\n    content: AllStyle\n};\n\nexport const DEFAULT_CLASS = 'app-container';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles: WmContainerStyles = defineStyles({\n        root: {},\n        text: {},\n        content: {\n            flexDirection: 'column'\n        }\n    });\n\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n    addStyle('media-body', '', {\n        root: {\n            flex: 1,\n            paddingLeft: 8,\n            paddingRight: 8,\n            justifyContent: 'center'\n        }\n    } as WmContainerStyles);\n    addStyle('media-right', '', {\n        root: {\n            justifyContent: 'center'\n        }\n    } as WmContainerStyles);\n    addStyle('app-elevated-container', '', {\n        root: {\n            shadowColor: 'rgba(0, 0, 0, 0.2)',\n            shadowOffset: {\n                width: 2,\n                height: 2\n            },\n            shadowRadius: 2,\n            borderRadius: 8\n        }\n    } as WmContainerStyles);\n    addStyle('app-outlined-container', '', {\n        root: {\n            borderWidth: 1,\n            borderColor: themeVariables.containerOutlineColor,\n            borderStyle: 'solid'\n        }\n    } as WmContainerStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAqB,wCAAwC;AAC9E,SAAqBC,YAAY,QAAQ,+CAA+C;AAMxF,OAAO,MAAMC,aAAa,GAAG,eAAe;AAC5CF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAAgC,GAAGL,YAAY,CAAC;IAClDM,IAAI,EAAE,CAAC,CAAC;IACRC,IAAI,EAAE,CAAC,CAAC;IACRC,OAAO,EAAE;MACLC,aAAa,EAAE;IACnB;EACJ,CAAC,CAAC;EAEFL,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;EAC1CD,QAAQ,CAAC,YAAY,EAAE,EAAE,EAAE;IACvBE,IAAI,EAAE;MACFI,IAAI,EAAE,CAAC;MACPC,WAAW,EAAE,CAAC;MACdC,YAAY,EAAE,CAAC;MACfC,cAAc,EAAE;IACpB;EACJ,CAAsB,CAAC;EACvBT,QAAQ,CAAC,aAAa,EAAE,EAAE,EAAE;IACxBE,IAAI,EAAE;MACFO,cAAc,EAAE;IACpB;EACJ,CAAsB,CAAC;EACvBT,QAAQ,CAAC,wBAAwB,EAAE,EAAE,EAAE;IACnCE,IAAI,EAAE;MACFQ,WAAW,EAAE,oBAAoB;MACjCC,YAAY,EAAE;QACVC,KAAK,EAAE,CAAC;QACRC,MAAM,EAAE;MACZ,CAAC;MACDC,YAAY,EAAE,CAAC;MACfC,YAAY,EAAE;IAClB;EACJ,CAAsB,CAAC;EACvBf,QAAQ,CAAC,wBAAwB,EAAE,EAAE,EAAE;IACnCE,IAAI,EAAE;MACFc,WAAW,EAAE,CAAC;MACdC,WAAW,EAAElB,cAAc,CAACmB,qBAAqB;MACjDC,WAAW,EAAE;IACjB;EACJ,CAAsB,CAAC;AAC3B,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","text","content","flexDirection","skeleton","borderColor","shadowColor","backgroundColor","flex","paddingLeft","paddingRight","justifyContent","shadowOffset","width","height","shadowRadius","borderRadius","borderWidth","containerOutlineColor","borderStyle"],"sources":["container.styles.ts"],"sourcesContent":["import BASE_THEME, { AllStyle }  from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmSkeletonStyles } from '../basic/skeleton/skeleton.styles';\n\nexport type WmContainerStyles = BaseStyles & {\n    content: AllStyle,\n    skeleton: WmSkeletonStyles\n};\n\nexport const DEFAULT_CLASS = 'app-container';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles: WmContainerStyles = defineStyles({\n        root: {},\n        text: {},\n        content: {\n            flexDirection: 'column'\n        },\n        skeleton: {\n            root: {\n                borderColor: 'transparent',\n                shadowColor: 'transparent',\n                backgroundColor: 'transparent',\n            },\n        } as any as WmSkeletonStyles\n    });\n\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n    addStyle('media-body', '', {\n        root: {\n            flex: 1,\n            paddingLeft: 8,\n            paddingRight: 8,\n            justifyContent: 'center'\n        }\n    } as WmContainerStyles);\n    addStyle('media-right', '', {\n        root: {\n            justifyContent: 'center'\n        }\n    } as WmContainerStyles);\n    addStyle('app-elevated-container', '', {\n        root: {\n            shadowColor: 'rgba(0, 0, 0, 0.2)',\n            shadowOffset: {\n                width: 2,\n                height: 2\n            },\n            shadowRadius: 2,\n            borderRadius: 8\n        }\n    } as WmContainerStyles);\n    addStyle('app-outlined-container', '', {\n        root: {\n            borderWidth: 1,\n            borderColor: themeVariables.containerOutlineColor,\n            borderStyle: 'solid'\n        }\n    } as WmContainerStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAqB,wCAAwC;AAC9E,SAAqBC,YAAY,QAAQ,+CAA+C;AAQxF,OAAO,MAAMC,aAAa,GAAG,eAAe;AAC5CF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAAgC,GAAGL,YAAY,CAAC;IAClDM,IAAI,EAAE,CAAC,CAAC;IACRC,IAAI,EAAE,CAAC,CAAC;IACRC,OAAO,EAAE;MACLC,aAAa,EAAE;IACnB,CAAC;IACDC,QAAQ,EAAE;MACNJ,IAAI,EAAE;QACFK,WAAW,EAAE,aAAa;QAC1BC,WAAW,EAAE,aAAa;QAC1BC,eAAe,EAAE;MACrB;IACJ;EACJ,CAAC,CAAC;EAEFT,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;EAC1CD,QAAQ,CAAC,YAAY,EAAE,EAAE,EAAE;IACvBE,IAAI,EAAE;MACFQ,IAAI,EAAE,CAAC;MACPC,WAAW,EAAE,CAAC;MACdC,YAAY,EAAE,CAAC;MACfC,cAAc,EAAE;IACpB;EACJ,CAAsB,CAAC;EACvBb,QAAQ,CAAC,aAAa,EAAE,EAAE,EAAE;IACxBE,IAAI,EAAE;MACFW,cAAc,EAAE;IACpB;EACJ,CAAsB,CAAC;EACvBb,QAAQ,CAAC,wBAAwB,EAAE,EAAE,EAAE;IACnCE,IAAI,EAAE;MACFM,WAAW,EAAE,oBAAoB;MACjCM,YAAY,EAAE;QACVC,KAAK,EAAE,CAAC;QACRC,MAAM,EAAE;MACZ,CAAC;MACDC,YAAY,EAAE,CAAC;MACfC,YAAY,EAAE;IAClB;EACJ,CAAsB,CAAC;EACvBlB,QAAQ,CAAC,wBAAwB,EAAE,EAAE,EAAE;IACnCE,IAAI,EAAE;MACFiB,WAAW,EAAE,CAAC;MACdZ,WAAW,EAAER,cAAc,CAACqB,qBAAqB;MACjDC,WAAW,EAAE;IACjB;EACJ,CAAsB,CAAC;AAC3B,CAAC,CAAC","ignoreList":[]}

app-rn-runtime/components/container/layoutgrid/gridrow/gridrow.component.js

@@ -9,8 +9,12 @@ export default class WmGridrow extends BaseComponent {
     super(props, DEFAULT_CLASS, new WmGridrowProps());
   }
   renderWidget(props) {
+    const styles = this._showSkeleton ? {
+      ...this.styles.root,
+      ...this.styles.skeleton.root
+    } : this.styles.root;
     return /*#__PURE__*/React.createElement(View, {
-      style: this.styles.root
+      style: styles
     }, this._background, props.children);
   }
 }

app-rn-runtime/components/container/layoutgrid/gridrow/gridrow.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","BaseComponent","BaseComponentState","WmGridrowProps","DEFAULT_CLASS","WmGridrowState","WmGridrow","constructor","props","renderWidget","createElement","style","styles","root","_background","children"],"sources":["gridrow.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmGridrowProps from './gridrow.props';\nimport { DEFAULT_CLASS, WmGridRowStyles } from './gridrow.styles';\n\nexport class WmGridrowState extends BaseComponentState<WmGridrowProps> {\n\n}\n\nexport default class WmGridrow extends BaseComponent<WmGridrowProps, WmGridrowState, WmGridRowStyles> {\n\n  constructor(props: WmGridrowProps) {\n    super(props, DEFAULT_CLASS, new WmGridrowProps());\n  }\n\n  renderWidget(props: WmGridrowProps) {\n    return (\n      <View style={this.styles.root}>{this._background}{props.children}</View>\n    ); \n  }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAEjG,OAAOC,cAAc,MAAM,iBAAiB;AAC5C,SAASC,aAAa,QAAyB,kBAAkB;AAEjE,OAAO,MAAMC,cAAc,SAASH,kBAAkB,CAAiB;AAIvE,eAAe,MAAMI,SAAS,SAASL,aAAa,CAAkD;EAEpGM,WAAWA,CAACC,KAAqB,EAAE;IACjC,KAAK,CAACA,KAAK,EAAEJ,aAAa,EAAE,IAAID,cAAc,CAAC,CAAC,CAAC;EACnD;EAEAM,YAAYA,CAACD,KAAqB,EAAE;IAClC,oBACET,KAAA,CAAAW,aAAA,CAACV,IAAI;MAACW,KAAK,EAAE,IAAI,CAACC,MAAM,CAACC;IAAK,GAAE,IAAI,CAACC,WAAW,EAAEN,KAAK,CAACO,QAAe,CAAC;EAE5E;AACF","ignoreList":[]}
+{"version":3,"names":["React","View","BaseComponent","BaseComponentState","WmGridrowProps","DEFAULT_CLASS","WmGridrowState","WmGridrow","constructor","props","renderWidget","styles","_showSkeleton","root","skeleton","createElement","style","_background","children"],"sources":["gridrow.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmGridrowProps from './gridrow.props';\nimport { DEFAULT_CLASS, WmGridRowStyles } from './gridrow.styles';\nimport { WmSkeletonStyles } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.styles';\n\nexport class WmGridrowState extends BaseComponentState<WmGridrowProps> {\n\n}\n\nexport default class WmGridrow extends BaseComponent<WmGridrowProps, WmGridrowState, WmGridRowStyles> {\n\n  constructor(props: WmGridrowProps) {\n    super(props, DEFAULT_CLASS, new WmGridrowProps());\n  }\n\n  renderWidget(props: WmGridrowProps) {\n    const styles = this._showSkeleton ?  {\n      ...this.styles.root,\n      ...this.styles.skeleton.root\n    } : this.styles.root\n\n    return (\n      <View style={styles}>{this._background}{props.children}</View>\n    ); \n  }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAEjG,OAAOC,cAAc,MAAM,iBAAiB;AAC5C,SAASC,aAAa,QAAyB,kBAAkB;AAGjE,OAAO,MAAMC,cAAc,SAASH,kBAAkB,CAAiB;AAIvE,eAAe,MAAMI,SAAS,SAASL,aAAa,CAAkD;EAEpGM,WAAWA,CAACC,KAAqB,EAAE;IACjC,KAAK,CAACA,KAAK,EAAEJ,aAAa,EAAE,IAAID,cAAc,CAAC,CAAC,CAAC;EACnD;EAEAM,YAAYA,CAACD,KAAqB,EAAE;IAClC,MAAME,MAAM,GAAG,IAAI,CAACC,aAAa,GAAI;MACnC,GAAG,IAAI,CAACD,MAAM,CAACE,IAAI;MACnB,GAAG,IAAI,CAACF,MAAM,CAACG,QAAQ,CAACD;IAC1B,CAAC,GAAG,IAAI,CAACF,MAAM,CAACE,IAAI;IAEpB,oBACEb,KAAA,CAAAe,aAAA,CAACd,IAAI;MAACe,KAAK,EAAEL;IAAO,GAAE,IAAI,CAACM,WAAW,EAAER,KAAK,CAACS,QAAe,CAAC;EAElE;AACF","ignoreList":[]}

app-rn-runtime/components/container/layoutgrid/gridrow/gridrow.styles.js

@@ -8,7 +8,12 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
       width: '100%',
       flexWrap: 'wrap'
     },
-    text: {}
+    text: {},
+    skeleton: {
+      root: {
+        borderColor: 'transparent'
+      }
+    }
   });
   addStyle(DEFAULT_CLASS, '', defaultStyles);
   addStyle('table-row', '', {

app-rn-runtime/components/container/layoutgrid/gridrow/gridrow.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","flexDirection","width","flexWrap","text","borderBottomWidth","borderStyle","borderColor","gridColumnBorderColor","backgroundColor","layoutGridHeaderBgColor","layoutGridStripColor1","layoutGridStripColor2"],"sources":["gridrow.styles.ts"],"sourcesContent":["import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\n\nexport type WmGridRowStyles = BaseStyles & {};\n\nexport const DEFAULT_CLASS = 'app-gridrow';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n  const defaultStyles: WmGridRowStyles = defineStyles({\n      root: {\n          flexDirection: 'row',\n          width: '100%',\n          flexWrap: 'wrap'\n      },\n      text: {}\n  });\n\n  addStyle(DEFAULT_CLASS, '', defaultStyles);\n  addStyle('table-row', '', {\n      root: {\n          borderBottomWidth: 1,\n          borderStyle: 'solid',\n          borderColor: themeVariables.gridColumnBorderColor\n      }\n  });\n  addStyle('table-header-row', '', {\n      root: {\n          backgroundColor: themeVariables.layoutGridHeaderBgColor\n      }\n  });\n  addStyle('table-striped-row0', '', {\n    root: {\n      backgroundColor: themeVariables.layoutGridStripColor1\n    }\n  });\n  addStyle('table-striped-row1', '', {\n    root: {\n      backgroundColor: themeVariables.layoutGridStripColor2\n    }\n  });\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAM,wCAAwC;AAC/D,SAAqBC,YAAY,QAAQ,+CAA+C;AAIxF,OAAO,MAAMC,aAAa,GAAG,aAAa;AAC1CF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACrD,MAAMC,aAA8B,GAAGL,YAAY,CAAC;IAChDM,IAAI,EAAE;MACFC,aAAa,EAAE,KAAK;MACpBC,KAAK,EAAE,MAAM;MACbC,QAAQ,EAAE;IACd,CAAC;IACDC,IAAI,EAAE,CAAC;EACX,CAAC,CAAC;EAEFN,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;EAC1CD,QAAQ,CAAC,WAAW,EAAE,EAAE,EAAE;IACtBE,IAAI,EAAE;MACFK,iBAAiB,EAAE,CAAC;MACpBC,WAAW,EAAE,OAAO;MACpBC,WAAW,EAAEV,cAAc,CAACW;IAChC;EACJ,CAAC,CAAC;EACFV,QAAQ,CAAC,kBAAkB,EAAE,EAAE,EAAE;IAC7BE,IAAI,EAAE;MACFS,eAAe,EAAEZ,cAAc,CAACa;IACpC;EACJ,CAAC,CAAC;EACFZ,QAAQ,CAAC,oBAAoB,EAAE,EAAE,EAAE;IACjCE,IAAI,EAAE;MACJS,eAAe,EAAEZ,cAAc,CAACc;IAClC;EACF,CAAC,CAAC;EACFb,QAAQ,CAAC,oBAAoB,EAAE,EAAE,EAAE;IACjCE,IAAI,EAAE;MACJS,eAAe,EAAEZ,cAAc,CAACe;IAClC;EACF,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","flexDirection","width","flexWrap","text","skeleton","borderColor","borderBottomWidth","borderStyle","gridColumnBorderColor","backgroundColor","layoutGridHeaderBgColor","layoutGridStripColor1","layoutGridStripColor2"],"sources":["gridrow.styles.ts"],"sourcesContent":["import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmSkeletonStyles } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.styles';\n\nexport type WmGridRowStyles = BaseStyles & {\n  skeleton: WmSkeletonStyles;\n};\n\nexport const DEFAULT_CLASS = 'app-gridrow';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n  const defaultStyles: WmGridRowStyles = defineStyles({\n      root: {\n          flexDirection: 'row',\n          width: '100%',\n          flexWrap: 'wrap'\n      },\n      text: {},\n      skeleton: {\n        root: {\n          borderColor: 'transparent'\n        } \n      } as any as WmSkeletonStyles\n  });\n\n  addStyle(DEFAULT_CLASS, '', defaultStyles);\n  addStyle('table-row', '', {\n      root: {\n          borderBottomWidth: 1,\n          borderStyle: 'solid',\n          borderColor: themeVariables.gridColumnBorderColor\n      }\n  });\n  addStyle('table-header-row', '', {\n      root: {\n          backgroundColor: themeVariables.layoutGridHeaderBgColor\n      }\n  });\n  addStyle('table-striped-row0', '', {\n    root: {\n      backgroundColor: themeVariables.layoutGridStripColor1\n    }\n  });\n  addStyle('table-striped-row1', '', {\n    root: {\n      backgroundColor: themeVariables.layoutGridStripColor2\n    }\n  });\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAM,wCAAwC;AAC/D,SAAqBC,YAAY,QAAQ,+CAA+C;AAOxF,OAAO,MAAMC,aAAa,GAAG,aAAa;AAC1CF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACrD,MAAMC,aAA8B,GAAGL,YAAY,CAAC;IAChDM,IAAI,EAAE;MACFC,aAAa,EAAE,KAAK;MACpBC,KAAK,EAAE,MAAM;MACbC,QAAQ,EAAE;IACd,CAAC;IACDC,IAAI,EAAE,CAAC,CAAC;IACRC,QAAQ,EAAE;MACRL,IAAI,EAAE;QACJM,WAAW,EAAE;MACf;IACF;EACJ,CAAC,CAAC;EAEFR,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;EAC1CD,QAAQ,CAAC,WAAW,EAAE,EAAE,EAAE;IACtBE,IAAI,EAAE;MACFO,iBAAiB,EAAE,CAAC;MACpBC,WAAW,EAAE,OAAO;MACpBF,WAAW,EAAET,cAAc,CAACY;IAChC;EACJ,CAAC,CAAC;EACFX,QAAQ,CAAC,kBAAkB,EAAE,EAAE,EAAE;IAC7BE,IAAI,EAAE;MACFU,eAAe,EAAEb,cAAc,CAACc;IACpC;EACJ,CAAC,CAAC;EACFb,QAAQ,CAAC,oBAAoB,EAAE,EAAE,EAAE;IACjCE,IAAI,EAAE;MACJU,eAAe,EAAEb,cAAc,CAACe;IAClC;EACF,CAAC,CAAC;EACFd,QAAQ,CAAC,oBAAoB,EAAE,EAAE,EAAE;IACjCE,IAAI,EAAE;MACJU,eAAe,EAAEb,cAAc,CAACgB;IAClC;EACF,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}

app-rn-runtime/components/container/layoutgrid/layoutgrid.component.js

@@ -3,15 +3,41 @@ import { View } from 'react-native';
 import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
 import WmLayoutgridProps from './layoutgrid.props';
 import { DEFAULT_CLASS } from './layoutgrid.styles';
+import { createSkeleton } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.component';
 export class WmLayoutgridState extends BaseComponentState {}
 export default class WmLayoutgrid extends BaseComponent {
   constructor(props) {
     super(props, DEFAULT_CLASS, new WmLayoutgridProps());
   }
+  getBackground() {
+    return this._showSkeleton ? null : this._background;
+  }
+  renderSkeleton(props) {
+    if (!props.showskeletonchildren) {
+      var _this$props;
+      const skeletonStyles = ((_this$props = this.props) === null || _this$props === void 0 || (_this$props = _this$props.styles) === null || _this$props === void 0 ? void 0 : _this$props.skeleton) || {
+        root: {},
+        text: {}
+      };
+      return createSkeleton(this.theme, skeletonStyles, {
+        ...this.styles.root
+      }, /*#__PURE__*/React.createElement(View, {
+        style: [this.styles.root, {
+          opacity: 0
+        }]
+      }, props.children));
+    }
+    return null;
+  }
   renderWidget(props) {
+    const styles = this._showSkeleton ? {
+      ...this.styles.root,
+      ...this.styles.skeleton.root
+    } : this.styles.root;
     return /*#__PURE__*/React.createElement(View, {
-      style: this.styles.root
-    }, this._background, props.children);
+      style: styles,
+      testID: this.getTestId()
+    }, this.getBackground(), props.children);
   }
 }
 //# sourceMappingURL=layoutgrid.component.js.map

app-rn-runtime/components/container/layoutgrid/layoutgrid.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","BaseComponent","BaseComponentState","WmLayoutgridProps","DEFAULT_CLASS","WmLayoutgridState","WmLayoutgrid","constructor","props","renderWidget","createElement","style","styles","root","_background","children"],"sources":["layoutgrid.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmLayoutgridProps from './layoutgrid.props';\nimport { DEFAULT_CLASS, WmLayoutGridStyles } from './layoutgrid.styles';\n\nexport class WmLayoutgridState extends BaseComponentState<WmLayoutgridProps> {\n\n}\n\nexport default class WmLayoutgrid extends BaseComponent<WmLayoutgridProps, WmLayoutgridState, WmLayoutGridStyles> {\n\n  constructor(props: WmLayoutgridProps) {\n    super(props, DEFAULT_CLASS, new WmLayoutgridProps());\n  }\n\n  renderWidget(props: WmLayoutgridProps) {\n    return (\n      <View style={this.styles.root}>{this._background}{props.children}</View>\n    ); \n  }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAEjG,OAAOC,iBAAiB,MAAM,oBAAoB;AAClD,SAASC,aAAa,QAA4B,qBAAqB;AAEvE,OAAO,MAAMC,iBAAiB,SAASH,kBAAkB,CAAoB;AAI7E,eAAe,MAAMI,YAAY,SAASL,aAAa,CAA2D;EAEhHM,WAAWA,CAACC,KAAwB,EAAE;IACpC,KAAK,CAACA,KAAK,EAAEJ,aAAa,EAAE,IAAID,iBAAiB,CAAC,CAAC,CAAC;EACtD;EAEAM,YAAYA,CAACD,KAAwB,EAAE;IACrC,oBACET,KAAA,CAAAW,aAAA,CAACV,IAAI;MAACW,KAAK,EAAE,IAAI,CAACC,MAAM,CAACC;IAAK,GAAE,IAAI,CAACC,WAAW,EAAEN,KAAK,CAACO,QAAe,CAAC;EAE5E;AACF","ignoreList":[]}
+{"version":3,"names":["React","View","BaseComponent","BaseComponentState","WmLayoutgridProps","DEFAULT_CLASS","createSkeleton","WmLayoutgridState","WmLayoutgrid","constructor","props","getBackground","_showSkeleton","_background","renderSkeleton","showskeletonchildren","_this$props","skeletonStyles","styles","skeleton","root","text","theme","createElement","style","opacity","children","renderWidget","testID","getTestId"],"sources":["layoutgrid.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmLayoutgridProps from './layoutgrid.props';\nimport { DEFAULT_CLASS, WmLayoutGridStyles } from './layoutgrid.styles';\nimport { WmSkeletonStyles } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.styles';\nimport { createSkeleton } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.component';\n\nexport class WmLayoutgridState extends BaseComponentState<WmLayoutgridProps> {\n\n}\n\nexport default class WmLayoutgrid extends BaseComponent<WmLayoutgridProps, WmLayoutgridState, WmLayoutGridStyles> {\n\n  constructor(props: WmLayoutgridProps) {\n    super(props, DEFAULT_CLASS, new WmLayoutgridProps());\n  }\n\n  getBackground(): React.JSX.Element | null {\n    return this._showSkeleton ? null : this._background\n  } \n\n  public renderSkeleton(props: WmLayoutgridProps): React.ReactNode {\n    if(!props.showskeletonchildren) {\n      const skeletonStyles: WmSkeletonStyles = this.props?.styles?.skeleton || { root: {}, text: {}  } as WmSkeletonStyles\n      return createSkeleton(this.theme, skeletonStyles, {\n        ...this.styles.root\n      }, (<View style={[this.styles.root, { opacity: 0 }]}>\n        {props.children}\n      </View>))\n    }\n    return null;\n  }\n\n\n  renderWidget(props: WmLayoutgridProps) {\n    const styles = this._showSkeleton ? {\n      ...this.styles.root,\n      ...this.styles.skeleton.root\n    } : this.styles.root\n    return (\n      <View style={styles} testID={this.getTestId()}>{this.getBackground()}{props.children}</View>\n    ); \n  }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAEjG,OAAOC,iBAAiB,MAAM,oBAAoB;AAClD,SAASC,aAAa,QAA4B,qBAAqB;AAEvE,SAASC,cAAc,QAAQ,wEAAwE;AAEvG,OAAO,MAAMC,iBAAiB,SAASJ,kBAAkB,CAAoB;AAI7E,eAAe,MAAMK,YAAY,SAASN,aAAa,CAA2D;EAEhHO,WAAWA,CAACC,KAAwB,EAAE;IACpC,KAAK,CAACA,KAAK,EAAEL,aAAa,EAAE,IAAID,iBAAiB,CAAC,CAAC,CAAC;EACtD;EAEAO,aAAaA,CAAA,EAA6B;IACxC,OAAO,IAAI,CAACC,aAAa,GAAG,IAAI,GAAG,IAAI,CAACC,WAAW;EACrD;EAEOC,cAAcA,CAACJ,KAAwB,EAAmB;IAC/D,IAAG,CAACA,KAAK,CAACK,oBAAoB,EAAE;MAAA,IAAAC,WAAA;MAC9B,MAAMC,cAAgC,GAAG,EAAAD,WAAA,OAAI,CAACN,KAAK,cAAAM,WAAA,gBAAAA,WAAA,GAAVA,WAAA,CAAYE,MAAM,cAAAF,WAAA,uBAAlBA,WAAA,CAAoBG,QAAQ,KAAI;QAAEC,IAAI,EAAE,CAAC,CAAC;QAAEC,IAAI,EAAE,CAAC;MAAG,CAAqB;MACpH,OAAOf,cAAc,CAAC,IAAI,CAACgB,KAAK,EAAEL,cAAc,EAAE;QAChD,GAAG,IAAI,CAACC,MAAM,CAACE;MACjB,CAAC,eAAGpB,KAAA,CAAAuB,aAAA,CAACtB,IAAI;QAACuB,KAAK,EAAE,CAAC,IAAI,CAACN,MAAM,CAACE,IAAI,EAAE;UAAEK,OAAO,EAAE;QAAE,CAAC;MAAE,GACjDf,KAAK,CAACgB,QACH,CAAE,CAAC;IACX;IACA,OAAO,IAAI;EACb;EAGAC,YAAYA,CAACjB,KAAwB,EAAE;IACrC,MAAMQ,MAAM,GAAG,IAAI,CAACN,aAAa,GAAG;MAClC,GAAG,IAAI,CAACM,MAAM,CAACE,IAAI;MACnB,GAAG,IAAI,CAACF,MAAM,CAACC,QAAQ,CAACC;IAC1B,CAAC,GAAG,IAAI,CAACF,MAAM,CAACE,IAAI;IACpB,oBACEpB,KAAA,CAAAuB,aAAA,CAACtB,IAAI;MAACuB,KAAK,EAAEN,MAAO;MAACU,MAAM,EAAE,IAAI,CAACC,SAAS,CAAC;IAAE,GAAE,IAAI,CAAClB,aAAa,CAAC,CAAC,EAAED,KAAK,CAACgB,QAAe,CAAC;EAEhG;AACF","ignoreList":[]}

app-rn-runtime/components/container/layoutgrid/layoutgrid.props.js.map

@@ -1 +1 @@
-{"version":3,"names":["BaseProps","WmLayoutgridProps","constructor","args","_defineProperty"],"sources":["layoutgrid.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\n\nexport default class WmLayoutgridProps extends BaseProps {\n  children: any;\n}"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAEzE,eAAe,MAAMC,iBAAiB,SAASD,SAAS,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA;EAAA;AAEzD","ignoreList":[]}
+{"version":3,"names":["BaseProps","WmLayoutgridProps","constructor","args","_defineProperty"],"sources":["layoutgrid.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\n\nexport default class WmLayoutgridProps extends BaseProps {\n  children: any;\n}\n"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAEzE,eAAe,MAAMC,iBAAiB,SAASD,SAAS,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA;EAAA;AAEzD","ignoreList":[]}

app-rn-runtime/components/container/layoutgrid/layoutgrid.styles.js

@@ -7,7 +7,10 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
       flexDirection: 'column',
       width: '100%'
     },
-    text: {}
+    text: {},
+    skeleton: {
+      root: {}
+    }
   });
   addStyle(DEFAULT_CLASS, '', defaultStyles);
   addStyle('table', '', {

app-rn-runtime/components/container/layoutgrid/layoutgrid.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","flexDirection","width","text","backgroundColor","layoutGridBgColor","borderWidth","borderLeftWidth","borderTopWidth","borderStyle","borderColor","layoutGridBorderColor","borderRadius","color","layoutGridHeaderTextColor","fontWeight"],"sources":["layoutgrid.styles.ts"],"sourcesContent":["import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmLabelStyles } from '@wavemaker/app-rn-runtime/components/basic/label/label.styles';\n\nexport type WmLayoutGridStyles = BaseStyles & {};\n\nexport const DEFAULT_CLASS = 'app-layoutgrid';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n  const defaultStyles: WmLayoutGridStyles = defineStyles({\n      root: {\n        flexDirection: 'column',\n        width: '100%'\n      },\n      text: {}\n  });\n\n  addStyle(DEFAULT_CLASS, '', defaultStyles);\n\n  addStyle('table', '', {\n    root: {\n      backgroundColor: themeVariables.layoutGridBgColor,\n      borderWidth: 1,\n      borderLeftWidth: 1,\n      borderTopWidth: 1,\n      borderStyle: 'solid',\n      borderColor: themeVariables.layoutGridBorderColor,\n      borderRadius: 2\n    }\n  });\n\n  addStyle('table-header-label', '', {\n      text: {\n        color: themeVariables.layoutGridHeaderTextColor,\n        fontWeight: 'bold'\n      }\n  } as WmLabelStyles);\n});\n"],"mappings":"AAAA,OAAOA,UAAU,MAAM,wCAAwC;AAC/D,SAAqBC,YAAY,QAAQ,+CAA+C;AAKxF,OAAO,MAAMC,aAAa,GAAG,gBAAgB;AAC7CF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACrD,MAAMC,aAAiC,GAAGL,YAAY,CAAC;IACnDM,IAAI,EAAE;MACJC,aAAa,EAAE,QAAQ;MACvBC,KAAK,EAAE;IACT,CAAC;IACDC,IAAI,EAAE,CAAC;EACX,CAAC,CAAC;EAEFL,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;EAE1CD,QAAQ,CAAC,OAAO,EAAE,EAAE,EAAE;IACpBE,IAAI,EAAE;MACJI,eAAe,EAAEP,cAAc,CAACQ,iBAAiB;MACjDC,WAAW,EAAE,CAAC;MACdC,eAAe,EAAE,CAAC;MAClBC,cAAc,EAAE,CAAC;MACjBC,WAAW,EAAE,OAAO;MACpBC,WAAW,EAAEb,cAAc,CAACc,qBAAqB;MACjDC,YAAY,EAAE;IAChB;EACF,CAAC,CAAC;EAEFd,QAAQ,CAAC,oBAAoB,EAAE,EAAE,EAAE;IAC/BK,IAAI,EAAE;MACJU,KAAK,EAAEhB,cAAc,CAACiB,yBAAyB;MAC/CC,UAAU,EAAE;IACd;EACJ,CAAkB,CAAC;AACrB,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","flexDirection","width","text","skeleton","backgroundColor","layoutGridBgColor","borderWidth","borderLeftWidth","borderTopWidth","borderStyle","borderColor","layoutGridBorderColor","borderRadius","color","layoutGridHeaderTextColor","fontWeight"],"sources":["layoutgrid.styles.ts"],"sourcesContent":["import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmLabelStyles } from '@wavemaker/app-rn-runtime/components/basic/label/label.styles';\nimport { WmSkeletonStyles } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.styles';\n\nexport type WmLayoutGridStyles = BaseStyles & {\n  skeleton: WmSkeletonStyles\n}\n\nexport const DEFAULT_CLASS = 'app-layoutgrid';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n  const defaultStyles: WmLayoutGridStyles = defineStyles({\n      root: {\n        flexDirection: 'column',\n        width: '100%'\n      },\n      text: {},\n      skeleton: {\n        root: {\n        }\n      } as any as WmSkeletonStyles\n  });\n\n  addStyle(DEFAULT_CLASS, '', defaultStyles);\n\n  addStyle('table', '', {\n    root: {\n      backgroundColor: themeVariables.layoutGridBgColor,\n      borderWidth: 1,\n      borderLeftWidth: 1,\n      borderTopWidth: 1,\n      borderStyle: 'solid',\n      borderColor: themeVariables.layoutGridBorderColor,\n      borderRadius: 2\n    }\n  });\n\n  addStyle('table-header-label', '', {\n      text: {\n        color: themeVariables.layoutGridHeaderTextColor,\n        fontWeight: 'bold'\n      }\n  } as WmLabelStyles);\n});\n"],"mappings":"AAAA,OAAOA,UAAU,MAAM,wCAAwC;AAC/D,SAAqBC,YAAY,QAAQ,+CAA+C;AAQxF,OAAO,MAAMC,aAAa,GAAG,gBAAgB;AAC7CF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACrD,MAAMC,aAAiC,GAAGL,YAAY,CAAC;IACnDM,IAAI,EAAE;MACJC,aAAa,EAAE,QAAQ;MACvBC,KAAK,EAAE;IACT,CAAC;IACDC,IAAI,EAAE,CAAC,CAAC;IACRC,QAAQ,EAAE;MACRJ,IAAI,EAAE,CACN;IACF;EACJ,CAAC,CAAC;EAEFF,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;EAE1CD,QAAQ,CAAC,OAAO,EAAE,EAAE,EAAE;IACpBE,IAAI,EAAE;MACJK,eAAe,EAAER,cAAc,CAACS,iBAAiB;MACjDC,WAAW,EAAE,CAAC;MACdC,eAAe,EAAE,CAAC;MAClBC,cAAc,EAAE,CAAC;MACjBC,WAAW,EAAE,OAAO;MACpBC,WAAW,EAAEd,cAAc,CAACe,qBAAqB;MACjDC,YAAY,EAAE;IAChB;EACF,CAAC,CAAC;EAEFf,QAAQ,CAAC,oBAAoB,EAAE,EAAE,EAAE;IAC/BK,IAAI,EAAE;MACJW,KAAK,EAAEjB,cAAc,CAACkB,yBAAyB;MAC/CC,UAAU,EAAE;IACd;EACJ,CAAkB,CAAC;AACrB,CAAC,CAAC","ignoreList":[]}

app-rn-runtime/components/container/linearlayout/linearlayout.component.js

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
 import WmLinearlayoutProps from './linearlayout.props';
 import { DEFAULT_CLASS } from './linearlayout.styles';
+import { createSkeleton } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.component';
 const ALIGNMENT_MAP = {
   'top': 'flex-start',
   'left': 'flex-start',
@@ -31,13 +32,38 @@ export default class WmLinearlayout extends BaseComponent {
     }
     return s;
   }
+  getBackground() {
+    return this._showSkeleton ? null : this._background;
+  }
+  renderSkeleton(props) {
+    if (!props.showskeletonchildren) {
+      var _this$props;
+      const skeletonStyles = ((_this$props = this.props) === null || _this$props === void 0 || (_this$props = _this$props.styles) === null || _this$props === void 0 ? void 0 : _this$props.skeleton) || {
+        root: {},
+        text: {}
+      };
+      return createSkeleton(this.theme, skeletonStyles, {
+        ...this.styles.root
+      }, /*#__PURE__*/React.createElement(View, {
+        style: [this.styles.root, {
+          opacity: 0
+        }]
+      }, props.children));
+    }
+    return null;
+  }
   renderWidget(props) {
+    const rootStyles = {
+      ...this.getStyles(props),
+      ...this.styles.root
+    };
+    const styles = this._showSkeleton ? {
+      ...rootStyles,
+      ...this.styles.skeleton.root
+    } : rootStyles;
     return /*#__PURE__*/React.createElement(View, {
-      style: {
-        ...this.getStyles(props),
-        ...this.styles.root
-      }
-    }, this._background, props.children);
+      style: styles
+    }, this.getBackground(), props.children);
   }
 }
 //# sourceMappingURL=linearlayout.component.js.map

app-rn-runtime/components/container/linearlayout/linearlayout.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","BaseComponent","BaseComponentState","WmLinearlayoutProps","DEFAULT_CLASS","ALIGNMENT_MAP","WmLinearlayoutState","WmLinearlayout","constructor","props","getStyles","s","direction","display","width","flexDirection","isHorizontal","startsWith","justifyContent","horizontalalign","alignItems","verticalalign","renderWidget","createElement","style","styles","root","_background","children"],"sources":["linearlayout.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View, ViewStyle } from 'react-native';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmLinearlayoutProps from './linearlayout.props';\nimport { DEFAULT_CLASS, WmLinearlayoutStyles } from './linearlayout.styles';\n\nconst ALIGNMENT_MAP = {\n  'top':  'flex-start',\n  'left': 'flex-start',\n  'center': 'center',\n  'right': 'flex-end',\n  'bottom': 'flex-end'\n} as any;\n\nexport class WmLinearlayoutState extends BaseComponentState<WmLinearlayoutProps> {}\n\nexport default class WmLinearlayout extends BaseComponent<WmLinearlayoutProps, WmLinearlayoutState, WmLinearlayoutStyles> {\n\n  constructor(props: WmLinearlayoutProps) {\n    super(props, DEFAULT_CLASS, new WmLinearlayoutProps());\n  }\n\n  getStyles(props: WmLinearlayoutProps) {\n    const s = {} as ViewStyle;\n    const direction = props.direction;\n    s.display = 'flex';\n    s.width = \"100%\";\n    s.flexDirection = direction;\n    const isHorizontal = direction.startsWith('row');\n    if (isHorizontal) {\n      s.justifyContent = ALIGNMENT_MAP[props.horizontalalign];\n      s.alignItems = ALIGNMENT_MAP[props.verticalalign];\n    } else {\n      s.justifyContent = ALIGNMENT_MAP[props.verticalalign];\n      s.alignItems = ALIGNMENT_MAP[props.horizontalalign];\n    }\n    return s;\n  }\n\n  renderWidget(props: WmLinearlayoutProps) {\n    return (<View style={{...this.getStyles(props), ...this.styles.root}}>\n      {this._background}{props.children}\n      </View>); \n  }\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAmB,cAAc;AAC9C,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAEjG,OAAOC,mBAAmB,MAAM,sBAAsB;AACtD,SAASC,aAAa,QAA8B,uBAAuB;AAE3E,MAAMC,aAAa,GAAG;EACpB,KAAK,EAAG,YAAY;EACpB,MAAM,EAAE,YAAY;EACpB,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,UAAU;EACnB,QAAQ,EAAE;AACZ,CAAQ;AAER,OAAO,MAAMC,mBAAmB,SAASJ,kBAAkB,CAAsB;AAEjF,eAAe,MAAMK,cAAc,SAASN,aAAa,CAAiE;EAExHO,WAAWA,CAACC,KAA0B,EAAE;IACtC,KAAK,CAACA,KAAK,EAAEL,aAAa,EAAE,IAAID,mBAAmB,CAAC,CAAC,CAAC;EACxD;EAEAO,SAASA,CAACD,KAA0B,EAAE;IACpC,MAAME,CAAC,GAAG,CAAC,CAAc;IACzB,MAAMC,SAAS,GAAGH,KAAK,CAACG,SAAS;IACjCD,CAAC,CAACE,OAAO,GAAG,MAAM;IAClBF,CAAC,CAACG,KAAK,GAAG,MAAM;IAChBH,CAAC,CAACI,aAAa,GAAGH,SAAS;IAC3B,MAAMI,YAAY,GAAGJ,SAAS,CAACK,UAAU,CAAC,KAAK,CAAC;IAChD,IAAID,YAAY,EAAE;MAChBL,CAAC,CAACO,cAAc,GAAGb,aAAa,CAACI,KAAK,CAACU,eAAe,CAAC;MACvDR,CAAC,CAACS,UAAU,GAAGf,aAAa,CAACI,KAAK,CAACY,aAAa,CAAC;IACnD,CAAC,MAAM;MACLV,CAAC,CAACO,cAAc,GAAGb,aAAa,CAACI,KAAK,CAACY,aAAa,CAAC;MACrDV,CAAC,CAACS,UAAU,GAAGf,aAAa,CAACI,KAAK,CAACU,eAAe,CAAC;IACrD;IACA,OAAOR,CAAC;EACV;EAEAW,YAAYA,CAACb,KAA0B,EAAE;IACvC,oBAAQV,KAAA,CAAAwB,aAAA,CAACvB,IAAI;MAACwB,KAAK,EAAE;QAAC,GAAG,IAAI,CAACd,SAAS,CAACD,KAAK,CAAC;QAAE,GAAG,IAAI,CAACgB,MAAM,CAACC;MAAI;IAAE,GAClE,IAAI,CAACC,WAAW,EAAElB,KAAK,CAACmB,QACnB,CAAC;EACX;AACF","ignoreList":[]}
+{"version":3,"names":["React","View","BaseComponent","BaseComponentState","WmLinearlayoutProps","DEFAULT_CLASS","createSkeleton","ALIGNMENT_MAP","WmLinearlayoutState","WmLinearlayout","constructor","props","getStyles","s","direction","display","width","flexDirection","isHorizontal","startsWith","justifyContent","horizontalalign","alignItems","verticalalign","getBackground","_showSkeleton","_background","renderSkeleton","showskeletonchildren","_this$props","skeletonStyles","styles","skeleton","root","text","theme","createElement","style","opacity","children","renderWidget","rootStyles"],"sources":["linearlayout.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View, ViewStyle } from 'react-native';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmLinearlayoutProps from './linearlayout.props';\nimport { DEFAULT_CLASS, WmLinearlayoutStyles } from './linearlayout.styles';\nimport { WmSkeletonStyles } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.styles';\nimport { createSkeleton } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.component';\n\nconst ALIGNMENT_MAP = {\n  'top':  'flex-start',\n  'left': 'flex-start',\n  'center': 'center',\n  'right': 'flex-end',\n  'bottom': 'flex-end'\n} as any;\n\nexport class WmLinearlayoutState extends BaseComponentState<WmLinearlayoutProps> {}\n\nexport default class WmLinearlayout extends BaseComponent<WmLinearlayoutProps, WmLinearlayoutState, WmLinearlayoutStyles> {\n\n  constructor(props: WmLinearlayoutProps) {\n    super(props, DEFAULT_CLASS, new WmLinearlayoutProps());\n  }\n\n  getStyles(props: WmLinearlayoutProps) {\n    const s = {} as ViewStyle;\n    const direction = props.direction;\n    s.display = 'flex';\n    s.width = \"100%\";\n    s.flexDirection = direction;\n    const isHorizontal = direction.startsWith('row');\n    if (isHorizontal) {\n      s.justifyContent = ALIGNMENT_MAP[props.horizontalalign];\n      s.alignItems = ALIGNMENT_MAP[props.verticalalign];\n    } else {\n      s.justifyContent = ALIGNMENT_MAP[props.verticalalign];\n      s.alignItems = ALIGNMENT_MAP[props.horizontalalign];\n    }\n    return s;\n  }\n\n  protected getBackground(): React.JSX.Element | null {\n    return this._showSkeleton ? null : this._background\n  } \n  \n  public renderSkeleton(props: WmLinearlayoutProps): React.ReactNode {\n      if(!props.showskeletonchildren) {\n        const skeletonStyles: WmSkeletonStyles = this.props?.styles?.skeleton || { root: {}, text: {}  } as WmSkeletonStyles\n        return createSkeleton(this.theme, skeletonStyles, {\n          ...this.styles.root\n        }, (<View style={[this.styles.root, { opacity: 0 }]}>\n          {props.children}\n        </View>))\n      }\n      return null;\n    }\n\n\n  renderWidget(props: WmLinearlayoutProps) {\n\n    const rootStyles = {...this.getStyles(props), ...this.styles.root}\n    const styles = this._showSkeleton ? {\n      ...rootStyles,\n      ...this.styles.skeleton.root\n    } : rootStyles\n\n    return (<View style={styles}>\n      {this.getBackground()}{props.children}\n      </View>); \n  }\n}\n"],"mappings":"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","ignoreList":[]}

app-rn-runtime/components/container/linearlayout/linearlayout.props.js.map

@@ -1 +1 @@
-{"version":3,"names":["BaseProps","WmLinearlayoutProps","constructor","args","_defineProperty"],"sources":["linearlayout.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\n\nexport default class WmLinearlayoutProps extends BaseProps {\n    children? = [] as any[];\n    direction: 'row'|'row-reverse' | 'column' | 'column-reverse' = 'row';\n    horizontalalign: 'left' | 'center' | 'right' = 'left';\n    verticalalign: 'top' | 'center' | 'bottom' = 'top';\n    spacing = 0;\n}"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAEzE,eAAe,MAAMC,mBAAmB,SAASD,SAAS,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,mBAC3C,EAAE;IAAAA,eAAA,oBACiD,KAAK;IAAAA,eAAA,0BACrB,MAAM;IAAAA,eAAA,wBACR,KAAK;IAAAA,eAAA,kBACxC,CAAC;EAAA;AACf","ignoreList":[]}
+{"version":3,"names":["BaseProps","WmLinearlayoutProps","constructor","args","_defineProperty"],"sources":["linearlayout.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\n\nexport default class WmLinearlayoutProps extends BaseProps {\n    children? = [] as any[];\n    direction: 'row'|'row-reverse' | 'column' | 'column-reverse' = 'row';\n    horizontalalign: 'left' | 'center' | 'right' = 'left';\n    verticalalign: 'top' | 'center' | 'bottom' = 'top';\n    spacing = 0;\n}\n"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAEzE,eAAe,MAAMC,mBAAmB,SAASD,SAAS,CAAC;EAAAE,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,mBAC3C,EAAE;IAAAA,eAAA,oBACiD,KAAK;IAAAA,eAAA,0BACrB,MAAM;IAAAA,eAAA,wBACR,KAAK;IAAAA,eAAA,kBACxC,CAAC;EAAA;AACf","ignoreList":[]}

app-rn-runtime/components/container/linearlayout/linearlayout.styles.js

@@ -4,7 +4,10 @@ export const DEFAULT_CLASS = 'app-linearlayout';
 BASE_THEME.registerStyle((themeVariables, addStyle) => {
   const defaultStyles = defineStyles({
     root: {},
-    text: {}
+    text: {},
+    skeleton: {
+      root: {}
+    }
   });
   addStyle(DEFAULT_CLASS, '', defaultStyles);
 });

app-rn-runtime/components/container/linearlayout/linearlayout.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","text"],"sources":["linearlayout.styles.ts"],"sourcesContent":["import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\n\nexport type WmLinearlayoutStyles = BaseStyles & {};\n\nexport const DEFAULT_CLASS = 'app-linearlayout';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles: WmLinearlayoutStyles = defineStyles({\n        root: {},\n        text: {}\n    });\n\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAM,wCAAwC;AAC/D,SAAqBC,YAAY,QAAQ,+CAA+C;AAIxF,OAAO,MAAMC,aAAa,GAAG,kBAAkB;AAC/CF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAAmC,GAAGL,YAAY,CAAC;IACrDM,IAAI,EAAE,CAAC,CAAC;IACRC,IAAI,EAAE,CAAC;EACX,CAAC,CAAC;EAEFH,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;AAC9C,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","text","skeleton"],"sources":["linearlayout.styles.ts"],"sourcesContent":["import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmSkeletonStyles } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.styles';\n\nexport type WmLinearlayoutStyles = BaseStyles & {\n    skeleton: WmSkeletonStyles\n};\n\nexport const DEFAULT_CLASS = 'app-linearlayout';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles: WmLinearlayoutStyles = defineStyles({\n        root: {},\n        text: {},\n        skeleton: {\n            root: {\n            }\n        } as WmSkeletonStyles\n    });\n\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAM,wCAAwC;AAC/D,SAAqBC,YAAY,QAAQ,+CAA+C;AAOxF,OAAO,MAAMC,aAAa,GAAG,kBAAkB;AAC/CF,UAAU,CAACG,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAAmC,GAAGL,YAAY,CAAC;IACrDM,IAAI,EAAE,CAAC,CAAC;IACRC,IAAI,EAAE,CAAC,CAAC;IACRC,QAAQ,EAAE;MACNF,IAAI,EAAE,CACN;IACJ;EACJ,CAAC,CAAC;EAEFF,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;AAC9C,CAAC,CAAC","ignoreList":[]}

app-rn-runtime/components/container/panel/panel.component.js

@@ -12,6 +12,8 @@ import WmPanelProps from './panel.props';
 import { DEFAULT_CLASS } from './panel.styles';
 import { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';
 import { CollapsiblePane } from './collapsible-pane.component';
+import { createSkeleton } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.component';
+import WmLabel from '@wavemaker/app-rn-runtime/components/basic/label/label.component';
 export class WmPanelState extends BaseComponentState {
   constructor(...args) {
     super(...args);
@@ -90,9 +92,21 @@ export default class WmPanel extends BaseComponent {
         flex: 1,
         justifyContent: 'center'
       }
-    }, /*#__PURE__*/React.createElement(Text, _extends({
+    }, this._showSkeleton ? /*#__PURE__*/React.createElement(WmLabel, {
+      showskeleton: true,
+      styles: {
+        root: [this.styles.text, this.styles.heading]
+      },
+      caption: isUndefined(props.title) ? 'Title' : props.title
+    }) : /*#__PURE__*/React.createElement(Text, _extends({
       style: [this.styles.text, this.styles.heading]
-    }, this.getTestPropsForAction(`header_title`)), isUndefined(props.title) ? 'Title' : props.title), props.subheading ? /*#__PURE__*/React.createElement(Text, _extends({
+    }, this.getTestPropsForAction(`header_title`)), isUndefined(props.title) ? 'Title' : props.title), props.subheading ? this._showSkeleton ? /*#__PURE__*/React.createElement(WmLabel, {
+      showskeleton: true,
+      styles: {
+        root: this.styles.subheading
+      },
+      caption: props.subheading
+    }) : /*#__PURE__*/React.createElement(Text, _extends({
       style: this.styles.subheading
     }, this.getTestPropsForAction(`subheader`)), props.subheading) : null), this.expandCollapseIcon(props.expanded));
   }
@@ -107,10 +121,35 @@ export default class WmPanel extends BaseComponent {
       close: !expanded
     }, content);
   }
+  getBackground() {
+    return this._showSkeleton ? null : this._background;
+  }
+  renderSkeleton(props) {
+    if (!props.showskeletonchildren) {
+      var _this$props;
+      const skeletonStyles = ((_this$props = this.props) === null || _this$props === void 0 || (_this$props = _this$props.styles) === null || _this$props === void 0 ? void 0 : _this$props.skeleton) || {
+        root: {},
+        text: {}
+      };
+      return createSkeleton(this.theme, skeletonStyles, {
+        ...this.styles.root
+      }, /*#__PURE__*/React.createElement(View, {
+        style: [this.styles.root, {
+          opacity: 0
+        }]
+      }, this.renderHeader(), this.renderPane( /*#__PURE__*/React.createElement(React.Fragment, null, this.renderContent(props), /*#__PURE__*/React.createElement(View, null, props.children)))));
+    }
+    return null;
+  }
   renderWidget(props) {
+    const styles = this._showSkeleton ? {
+      ...this.styles.root,
+      ...this.styles.skeleton.root
+    } : this.styles.root;
     return /*#__PURE__*/React.createElement(View, {
-      style: this.styles.root
-    }, this._background, this.renderHeader(), this.renderPane( /*#__PURE__*/React.createElement(React.Fragment, null, this.renderContent(props), /*#__PURE__*/React.createElement(View, null, props.children))));
+      style: styles,
+      testID: this.getTestId()
+    }, this.getBackground(), this.renderHeader(), this.renderPane( /*#__PURE__*/React.createElement(React.Fragment, null, this.renderContent(props), /*#__PURE__*/React.createElement(View, null, props.children))));
   }
 }
 //# sourceMappingURL=panel.component.js.map