@wavemaker/app-rn-runtime 11.5.0-next.24732 → 11.5.0-next.24736

app-rn-runtime/components/basic/video/video.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","ResizeMode","Video","BaseComponent","BaseComponentState","WmVideoProps","DEFAULT_CLASS","isFullPathUrl","WmVideoState","WmVideo","constructor","props","_defineProperty","getSource","path","resource","loadAsset","uri","componentDidMount","state","autoplay","_this$video","video","playAsync","renderWidget","createElement","style","styles","root","_background","ref","width","height","flex","source","mp4format","webmformat","posterSource","videoposter","useNativeControls","controls","resizeMode","CONTAIN","isLooping","loop","isMuted","muted"],"sources":["video.component.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { ResizeMode, Video } from 'expo-av';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmVideoProps from './video.props';\nimport { DEFAULT_CLASS, WmVideoStyles } from './video.styles';\nimport { isString } from 'lodash-es';\nimport { isFullPathUrl } from '@wavemaker/app-rn-runtime/core/utils';\n\nexport class WmVideoState extends BaseComponentState<WmVideoProps> {}\n\nexport default class WmVideo extends BaseComponent<WmVideoProps, WmVideoState, WmVideoStyles> {\n\n  private video: Video | null = null as any;\n\n  constructor(props: WmVideoProps) {\n    super(props, DEFAULT_CLASS, new WmVideoProps(), new WmVideoState());\n  }\n\n  getSource(path: string) {\n    if (!path) {\n      return null;\n    }\n    const resource = this.loadAsset(path);\n    if (isFullPathUrl(resource as string)) {\n      return {\n        uri: resource\n      };\n    }\n    return resource;\n  }\n\n  componentDidMount(): void {\n    if (this.state.props.autoplay) {\n      this.video?.playAsync();\n    }\n  }\n\n  renderWidget(props: WmVideoProps) {\n    return (\n      <View style={this.styles.root}>\n        {this._background}\n        <Video\n          ref={(video) => { this.video = video; }}\n          style={{ width: '100%', height: '100%', flex: 1 }}\n          source={this.getSource(\n            props.mp4format\n            || props.webmformat) as any}\n          posterSource={ this.getSource(props.videoposter) as any }\n          useNativeControls={props.controls}\n          resizeMode={ResizeMode.CONTAIN}\n          isLooping={props.loop}\n          isMuted={props.muted}\n        />\n      </View>); \n  }\n}\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAeC,IAAI,QAAQ,cAAc;AACzC,SAASC,UAAU,EAAEC,KAAK,QAAQ,SAAS;AAC3C,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAEjG,OAAOC,YAAY,MAAM,eAAe;AACxC,SAASC,aAAa,QAAuB,gBAAgB;AAE7D,SAASC,aAAa,QAAQ,sCAAsC;AAEpE,OAAO,MAAMC,YAAY,SAASJ,kBAAkB,CAAe;AAEnE,eAAe,MAAMK,OAAO,SAASN,aAAa,CAA4C;EAI5FO,WAAWA,CAACC,KAAmB,EAAE;IAC/B,KAAK,CAACA,KAAK,EAAEL,aAAa,EAAE,IAAID,YAAY,CAAC,CAAC,EAAE,IAAIG,YAAY,CAAC,CAAC,CAAC;IAACI,eAAA,gBAHxC,IAAI;EAIlC;EAEAC,SAASA,CAACC,IAAY,EAAE;IACtB,IAAI,CAACA,IAAI,EAAE;MACT,OAAO,IAAI;IACb;IACA,MAAMC,QAAQ,GAAG,IAAI,CAACC,SAAS,CAACF,IAAI,CAAC;IACrC,IAAIP,aAAa,CAACQ,QAAkB,CAAC,EAAE;MACrC,OAAO;QACLE,GAAG,EAAEF;MACP,CAAC;IACH;IACA,OAAOA,QAAQ;EACjB;EAEAG,iBAAiBA,CAAA,EAAS;IACxB,IAAI,IAAI,CAACC,KAAK,CAACR,KAAK,CAACS,QAAQ,EAAE;MAAA,IAAAC,WAAA;MAC7B,CAAAA,WAAA,OAAI,CAACC,KAAK,cAAAD,WAAA,uBAAVA,WAAA,CAAYE,SAAS,CAAC,CAAC;IACzB;EACF;EAEAC,YAAYA,CAACb,KAAmB,EAAE;IAChC,oBACEZ,KAAA,CAAA0B,aAAA,CAACzB,IAAI;MAAC0B,KAAK,EAAE,IAAI,CAACC,MAAM,CAACC;IAAK,GAC3B,IAAI,CAACC,WAAW,eACjB9B,KAAA,CAAA0B,aAAA,CAACvB,KAAK;MACJ4B,GAAG,EAAGR,KAAK,IAAK;QAAE,IAAI,CAACA,KAAK,GAAGA,KAAK;MAAE,CAAE;MACxCI,KAAK,EAAE;QAAEK,KAAK,EAAE,MAAM;QAAEC,MAAM,EAAE,MAAM;QAAEC,IAAI,EAAE;MAAE,CAAE;MAClDC,MAAM,EAAE,IAAI,CAACrB,SAAS,CACpBF,KAAK,CAACwB,SAAS,IACZxB,KAAK,CAACyB,UAAU,CAAS;MAC9BC,YAAY,EAAG,IAAI,CAACxB,SAAS,CAACF,KAAK,CAAC2B,WAAW,CAAU;MACzDC,iBAAiB,EAAE5B,KAAK,CAAC6B,QAAS;MAClCC,UAAU,EAAExC,UAAU,CAACyC,OAAQ;MAC/BC,SAAS,EAAEhC,KAAK,CAACiC,IAAK;MACtBC,OAAO,EAAElC,KAAK,CAACmC;IAAM,CACtB,CACG,CAAC;EACX;AACF"}
+{"version":3,"names":["React","View","ResizeMode","Video","BaseComponent","BaseComponentState","WmVideoProps","DEFAULT_CLASS","isFullPathUrl","WmVideoState","WmVideo","constructor","props","_defineProperty","getSource","path","resource","loadAsset","uri","componentDidMount","state","autoplay","_this$video","video","playAsync","renderWidget","createElement","style","styles","root","_background","ref","width","height","flex","source","mp4format","webmformat","posterSource","videoposter","useNativeControls","controls","resizeMode","CONTAIN","isLooping","loop","isMuted","muted","testID","getTestId"],"sources":["video.component.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { ResizeMode, Video } from 'expo-av';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmVideoProps from './video.props';\nimport { DEFAULT_CLASS, WmVideoStyles } from './video.styles';\nimport { isString } from 'lodash-es';\nimport { isFullPathUrl } from '@wavemaker/app-rn-runtime/core/utils';\n\nexport class WmVideoState extends BaseComponentState<WmVideoProps> {}\n\nexport default class WmVideo extends BaseComponent<WmVideoProps, WmVideoState, WmVideoStyles> {\n\n  private video: Video | null = null as any;\n\n  constructor(props: WmVideoProps) {\n    super(props, DEFAULT_CLASS, new WmVideoProps(), new WmVideoState());\n  }\n\n  getSource(path: string) {\n    if (!path) {\n      return null;\n    }\n    const resource = this.loadAsset(path);\n    if (isFullPathUrl(resource as string)) {\n      return {\n        uri: resource\n      };\n    }\n    return resource;\n  }\n\n  componentDidMount(): void {\n    if (this.state.props.autoplay) {\n      this.video?.playAsync();\n    }\n  }\n\n  renderWidget(props: WmVideoProps) {\n    return (\n      <View style={this.styles.root}>\n        {this._background}\n        <Video\n          ref={(video) => { this.video = video; }}\n          style={{ width: '100%', height: '100%', flex: 1 }}\n          source={this.getSource(\n            props.mp4format\n            || props.webmformat) as any}\n          posterSource={ this.getSource(props.videoposter) as any }\n          useNativeControls={props.controls}\n          resizeMode={ResizeMode.CONTAIN}\n          isLooping={props.loop}\n          isMuted={props.muted}\n          testID={this.getTestId('video')}\n        />\n      </View>); \n  }\n}\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAeC,IAAI,QAAQ,cAAc;AACzC,SAASC,UAAU,EAAEC,KAAK,QAAQ,SAAS;AAC3C,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,+CAA+C;AAEjG,OAAOC,YAAY,MAAM,eAAe;AACxC,SAASC,aAAa,QAAuB,gBAAgB;AAE7D,SAASC,aAAa,QAAQ,sCAAsC;AAEpE,OAAO,MAAMC,YAAY,SAASJ,kBAAkB,CAAe;AAEnE,eAAe,MAAMK,OAAO,SAASN,aAAa,CAA4C;EAI5FO,WAAWA,CAACC,KAAmB,EAAE;IAC/B,KAAK,CAACA,KAAK,EAAEL,aAAa,EAAE,IAAID,YAAY,CAAC,CAAC,EAAE,IAAIG,YAAY,CAAC,CAAC,CAAC;IAACI,eAAA,gBAHxC,IAAI;EAIlC;EAEAC,SAASA,CAACC,IAAY,EAAE;IACtB,IAAI,CAACA,IAAI,EAAE;MACT,OAAO,IAAI;IACb;IACA,MAAMC,QAAQ,GAAG,IAAI,CAACC,SAAS,CAACF,IAAI,CAAC;IACrC,IAAIP,aAAa,CAACQ,QAAkB,CAAC,EAAE;MACrC,OAAO;QACLE,GAAG,EAAEF;MACP,CAAC;IACH;IACA,OAAOA,QAAQ;EACjB;EAEAG,iBAAiBA,CAAA,EAAS;IACxB,IAAI,IAAI,CAACC,KAAK,CAACR,KAAK,CAACS,QAAQ,EAAE;MAAA,IAAAC,WAAA;MAC7B,CAAAA,WAAA,OAAI,CAACC,KAAK,cAAAD,WAAA,uBAAVA,WAAA,CAAYE,SAAS,CAAC,CAAC;IACzB;EACF;EAEAC,YAAYA,CAACb,KAAmB,EAAE;IAChC,oBACEZ,KAAA,CAAA0B,aAAA,CAACzB,IAAI;MAAC0B,KAAK,EAAE,IAAI,CAACC,MAAM,CAACC;IAAK,GAC3B,IAAI,CAACC,WAAW,eACjB9B,KAAA,CAAA0B,aAAA,CAACvB,KAAK;MACJ4B,GAAG,EAAGR,KAAK,IAAK;QAAE,IAAI,CAACA,KAAK,GAAGA,KAAK;MAAE,CAAE;MACxCI,KAAK,EAAE;QAAEK,KAAK,EAAE,MAAM;QAAEC,MAAM,EAAE,MAAM;QAAEC,IAAI,EAAE;MAAE,CAAE;MAClDC,MAAM,EAAE,IAAI,CAACrB,SAAS,CACpBF,KAAK,CAACwB,SAAS,IACZxB,KAAK,CAACyB,UAAU,CAAS;MAC9BC,YAAY,EAAG,IAAI,CAACxB,SAAS,CAACF,KAAK,CAAC2B,WAAW,CAAU;MACzDC,iBAAiB,EAAE5B,KAAK,CAAC6B,QAAS;MAClCC,UAAU,EAAExC,UAAU,CAACyC,OAAQ;MAC/BC,SAAS,EAAEhC,KAAK,CAACiC,IAAK;MACtBC,OAAO,EAAElC,KAAK,CAACmC,KAAM;MACrBC,MAAM,EAAE,IAAI,CAACC,SAAS,CAAC,OAAO;IAAE,CACjC,CACG,CAAC;EACX;AACF"}

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

@@ -1,3 +1,4 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
@@ -43,16 +44,16 @@ export default class WmAccordion extends BaseComponent {
     const i = this.accordionPanes.findIndex(t => t.props.name === accordionName);
     this.toggle(i + 1, false);
   }
-  expandCollapseIcon(item) {
-    let showBadge = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    let showIcon = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-    let useChevron = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
-    let isExpanded = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  expandCollapseIcon(item, index) {
+    let showBadge = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    let showIcon = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+    let useChevron = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+    let isExpanded = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
     const widgetProps = item.props;
     //@ts-ignore
-    const badge = showBadge && widgetProps.badgevalue != undefined ? /*#__PURE__*/React.createElement(Badge, {
+    const badge = showBadge && widgetProps.badgevalue != undefined ? /*#__PURE__*/React.createElement(Badge, _extends({
       style: [this.styles.badge, isExpanded ? this.styles.activeBadge : null, this.styles[widgetProps.badgetype || 'default']]
-    }, widgetProps.badgevalue) : null;
+    }, this.getTestProps('badge' + index)), widgetProps.badgevalue) : null;
     let iconclass = null;
     if (useChevron) {
       iconclass = isExpanded ? 'wi wi-chevron-down' : 'wi wi-chevron-up';
@@ -64,6 +65,7 @@ export default class WmAccordion extends BaseComponent {
         flexDirection: 'row'
       }
     }, badge, showIcon ? /*#__PURE__*/React.createElement(WmIcon, {
+      id: this.getTestId('icon' + index),
       styles: this.theme.mergeStyle({}, this.styles.icon, isExpanded ? this.styles.activeIcon : null),
       name: 'expand_collapse_icon',
       iconclass: iconclass
@@ -76,11 +78,12 @@ export default class WmAccordion extends BaseComponent {
     return /*#__PURE__*/React.createElement(View, {
       style: this.styles.pane,
       key: item.props.title
-    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
-      key: 'accordionpane_' + (index + 1),
+    }, /*#__PURE__*/React.createElement(TouchableOpacity, _extends({
+      key: 'accordionpane_' + (index + 1)
+    }, this.getTestPropsForAction(`header${index}`), {
       style: [this.styles.header, index === 0 ? this.styles.firstHeader : null, index === accordionpanes.length - 1 && !isExpanded ? this.styles.lastHeader : null, isExpanded ? this.styles.activeHeader : {}],
       onPress: this.toggle.bind(this, index + 1, !isExpanded)
-    }, this.expandCollapseIcon(item, false, showIconOnLeft, true, isExpanded), item.props.iconclass ? /*#__PURE__*/React.createElement(WmIcon, {
+    }), this.expandCollapseIcon(item, index, false, showIconOnLeft, true, isExpanded), item.props.iconclass ? /*#__PURE__*/React.createElement(WmIcon, {
       styles: this.styles.icon,
       name: item.props.name + '_icon',
       iconclass: item.props.iconclass
@@ -90,11 +93,11 @@ export default class WmAccordion extends BaseComponent {
         flex: 1,
         justifyContent: 'center'
       }
-    }, /*#__PURE__*/React.createElement(Text, {
+    }, /*#__PURE__*/React.createElement(Text, _extends({
       style: [this.styles.text, this.styles.heading, isExpanded ? this.styles.activeHeaderTitle : {}]
-    }, isDefined(item.props.title) ? item.props.title : 'Title'), item.props.description ? /*#__PURE__*/React.createElement(Text, {
+    }, this.getTestPropsForAction(`header${index}_title`)), isDefined(item.props.title) ? item.props.title : 'Title'), item.props.description ? /*#__PURE__*/React.createElement(Text, _extends({
       style: this.styles.subheading
-    }, item.props.description) : null), this.expandCollapseIcon(item, true, !showIconOnLeft, true, isExpanded)), item);
+    }, this.getTestPropsForAction(`header${index}_description`)), item.props.description) : null), this.expandCollapseIcon(item, index, true, !showIconOnLeft, true, isExpanded)), item);
   }
   toggle(index) {
     let expand = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;

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

@@ -1 +1 @@
-{"version":3,"names":["React","Text","TouchableOpacity","View","Badge","isArray","BaseComponent","BaseComponentState","WmAccordionProps","DEFAULT_CLASS","WmIcon","isDefined","WmAccordionState","constructor","arguments","_defineProperty","WmAccordion","props","addAccordionPane","accordionPane","_this$state$isExpande","i","accordionPanes","findIndex","t","title","newIndex","state","isExpanded","find","v","toggle","defaultpaneindex","expand","accordionName","name","collapse","expandCollapseIcon","item","showBadge","length","undefined","showIcon","useChevron","widgetProps","badge","badgevalue","createElement","style","styles","activeBadge","badgetype","iconclass","flexDirection","theme","mergeStyle","icon","activeIcon","renderAccordionpane","index","accordionpanes","showIconOnLeft","leftToggleIcon","root","width","pane","key","header","firstHeader","lastHeader","activeHeader","onPress","bind","flex","justifyContent","text","heading","activeHeaderTitle","description","subheading","expandedId","collapseId","closeothers","lastExpandedIndex","collapsedPane","hide","Promise","resolve","then","expandedPane","show","setState","invokeEventCallback","proxy","componentDidMount","renderWidget","children","_background","map"],"sources":["accordion.component.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, TouchableOpacity, View } from 'react-native';\nimport { Badge } from 'react-native-paper';\nimport { isArray } from 'lodash';\n\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\nimport WmAccordionProps from './accordion.props';\nimport { DEFAULT_CLASS, WmAccordionStyles } from './accordion.styles';\nimport WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';\nimport WmAccordionpane from './accordionpane/accordionpane.component';\nimport { isDefined } from '@wavemaker/app-rn-runtime/core/utils';\n\nexport class WmAccordionState extends BaseComponentState<WmAccordionProps> {\n  lastExpandedIndex = -1;\n  isExpanded = [] as boolean[];\n}\n\nexport default class WmAccordion extends BaseComponent<WmAccordionProps, WmAccordionState, WmAccordionStyles> {\n  public accordionPanes = [] as WmAccordionpane[];\n  private newIndex = 0;\n\n  constructor(props: WmAccordionProps) {\n    super(props, DEFAULT_CLASS, new WmAccordionProps(), new WmAccordionState());\n  }\n\n  addAccordionPane(accordionPane: WmAccordionpane) {\n    const i = this.accordionPanes.findIndex(t => t.props.title === accordionPane.props.title);\n    if (i >= 0) {\n      this.accordionPanes[i] = accordionPane;\n    } else {\n      this.accordionPanes[this.newIndex++] = accordionPane;\n    }\n    if (!(this.state.isExpanded?.find((v) => v))) {\n      this.toggle(this.state.props.defaultpaneindex + 1);\n    }\n  }\n\n  expand(accordionName: string) {\n    const i = this.accordionPanes.findIndex(t => t.props.name === accordionName);\n    this.toggle(i + 1, true);\n  }\n\n  collapse(accordionName: string) {\n    const i = this.accordionPanes.findIndex(t => t.props.name === accordionName);\n    this.toggle(i + 1, false);\n  }\n\n  expandCollapseIcon(item: any, showBadge = true, showIcon = true, useChevron = true, isExpanded = false) {\n    const widgetProps = item.props;\n    //@ts-ignore\n    const badge = showBadge && widgetProps.badgevalue != undefined ? (\n      <Badge style={[\n        this.styles.badge,\n        isExpanded ? this.styles.activeBadge: null,\n        this.styles[widgetProps.badgetype || 'default']]}>\n        {widgetProps.badgevalue}\n      </Badge>): null;\n    let iconclass = null;\n    if (useChevron) {\n      iconclass = isExpanded ? 'wi wi-chevron-down' : 'wi wi-chevron-up';\n    } else {\n      iconclass = isExpanded ? 'wi wi-minus' : 'wi wi-plus';\n    }\n    return (<View style={{flexDirection: 'row'}}>\n            {badge}\n            {showIcon ? (\n              <WmIcon\n              styles={this.theme.mergeStyle({}, this.styles.icon, isExpanded ? this.styles.activeIcon : null)}\n              name={'expand_collapse_icon'}\n              iconclass={iconclass}></WmIcon>): null}\n          </View>);\n  }\n\n  renderAccordionpane(item: any, index: any, accordionpanes: any[] = []) {\n    const showIconOnLeft = this.styles.leftToggleIcon.root.width !== undefined;\n    const isExpanded = this.state.isExpanded[index];\n    return (\n      <View style={this.styles.pane} key={item.props.title}>\n        <TouchableOpacity key={'accordionpane_' + (index + 1)}\n              style={[this.styles.header,\n                index === 0 ? this.styles.firstHeader: null,\n                index === accordionpanes.length - 1 && !isExpanded ? this.styles.lastHeader: null,\n                isExpanded ? this.styles.activeHeader : {}]}\n                onPress={this.toggle.bind(this, index + 1, !isExpanded)}>\n          {this.expandCollapseIcon(item, false, showIconOnLeft, true, isExpanded)}\n          {item.props.iconclass ? <WmIcon styles={this.styles.icon} name={item.props.name + '_icon'} iconclass={item.props.iconclass}></WmIcon>: null}\n          <View style={{flexDirection: 'column', flex: 1, justifyContent: 'center'}}>\n            <Text style={[\n              this.styles.text,\n              this.styles.heading,\n              isExpanded ? this.styles.activeHeaderTitle : {}]}>\n                {isDefined(item.props.title) ? item.props.title : 'Title'}\n            </Text>\n            {item.props.description ? \n              (<Text style={this.styles.subheading}>{item.props.description}</Text>) : null }\n          </View>\n          {this.expandCollapseIcon(item, true, !showIconOnLeft, true, isExpanded)}\n        </TouchableOpacity>\n        {item}\n      </View>\n    );\n  }\n\n  toggle(index: number, expand = true) {\n    let expandedId = expand ? index : -1;\n    let collapseId = expand ? -1 : index;\n    if (expand && this.state.isExpanded[expandedId - 1]\n        || !expand && this.state.isExpanded[collapseId - 1] === false) {\n        return;\n    }\n    if (collapseId < 0 && this.state.props.closeothers) {\n      collapseId = this.state.lastExpandedIndex;\n    }\n    const collapsedPane = this.accordionPanes[collapseId -1];\n    collapsedPane?.hide();\n    Promise.resolve().then(() => {\n      const expandedPane = expandedId ? this.accordionPanes[expandedId - 1]: null;\n      expandedPane?.show();\n      this.setState((state) => {\n        if (collapseId > 0 && collapsedPane) {\n          state.isExpanded[collapseId - 1] = false;\n        }\n        if (expandedId > 0 && expandedPane) {\n          state.isExpanded[expandedId - 1] = true;\n        }\n        return {\n          lastExpandedIndex: expandedId,\n          isExpanded: [...state.isExpanded]\n        };\n      }, () => {\n        this.invokeEventCallback('onChange', [{},\n          this.proxy,\n          expandedId - 1,\n          collapseId ? collapseId - 1 : null,\n          expandedPane && expandedPane.props.name,\n          collapsedPane && collapsedPane.props.name]);\n        });\n    }, () => {});\n  }\n\n  public componentDidMount(): void {\n      super.componentDidMount();\n      this.toggle(this.state.props.defaultpaneindex + 1);\n  }\n\n  renderWidget(props: WmAccordionProps) {\n    const accordionpanes = props.children;\n    const expandedId = this.state.lastExpandedIndex || 0;\n    return (\n        <View style={this.styles.root}>\n          {this._background}\n            {accordionpanes\n              ? isArray(accordionpanes) && accordionpanes.length\n                ? accordionpanes.map((item: any, index: any) => this.renderAccordionpane(item, index, accordionpanes))\n                : this.renderAccordionpane(accordionpanes, 0)\n              : null}\n        </View>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["React","Text","TouchableOpacity","View","Badge","isArray","BaseComponent","BaseComponentState","WmAccordionProps","DEFAULT_CLASS","WmIcon","isDefined","WmAccordionState","constructor","arguments","_defineProperty","WmAccordion","props","addAccordionPane","accordionPane","_this$state$isExpande","i","accordionPanes","findIndex","t","title","newIndex","state","isExpanded","find","v","toggle","defaultpaneindex","expand","accordionName","name","collapse","expandCollapseIcon","item","index","showBadge","length","undefined","showIcon","useChevron","widgetProps","badge","badgevalue","createElement","_extends","style","styles","activeBadge","badgetype","getTestProps","iconclass","flexDirection","id","getTestId","theme","mergeStyle","icon","activeIcon","renderAccordionpane","accordionpanes","showIconOnLeft","leftToggleIcon","root","width","pane","key","getTestPropsForAction","header","firstHeader","lastHeader","activeHeader","onPress","bind","flex","justifyContent","text","heading","activeHeaderTitle","description","subheading","expandedId","collapseId","closeothers","lastExpandedIndex","collapsedPane","hide","Promise","resolve","then","expandedPane","show","setState","invokeEventCallback","proxy","componentDidMount","renderWidget","children","_background","map"],"sources":["accordion.component.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, TouchableOpacity, View } from 'react-native';\nimport { Badge } from 'react-native-paper';\nimport { isArray } from 'lodash';\n\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\nimport WmAccordionProps from './accordion.props';\nimport { DEFAULT_CLASS, WmAccordionStyles } from './accordion.styles';\nimport WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';\nimport WmAccordionpane from './accordionpane/accordionpane.component';\nimport { isDefined } from '@wavemaker/app-rn-runtime/core/utils';\n\nexport class WmAccordionState extends BaseComponentState<WmAccordionProps> {\n  lastExpandedIndex = -1;\n  isExpanded = [] as boolean[];\n}\n\nexport default class WmAccordion extends BaseComponent<WmAccordionProps, WmAccordionState, WmAccordionStyles> {\n  public accordionPanes = [] as WmAccordionpane[];\n  private newIndex = 0;\n\n  constructor(props: WmAccordionProps) {\n    super(props, DEFAULT_CLASS, new WmAccordionProps(), new WmAccordionState());\n  }\n\n  addAccordionPane(accordionPane: WmAccordionpane) {\n    const i = this.accordionPanes.findIndex(t => t.props.title === accordionPane.props.title);\n    if (i >= 0) {\n      this.accordionPanes[i] = accordionPane;\n    } else {\n      this.accordionPanes[this.newIndex++] = accordionPane;\n    }\n    if (!(this.state.isExpanded?.find((v) => v))) {\n      this.toggle(this.state.props.defaultpaneindex + 1);\n    }\n  }\n\n  expand(accordionName: string) {\n    const i = this.accordionPanes.findIndex(t => t.props.name === accordionName);\n    this.toggle(i + 1, true);\n  }\n\n  collapse(accordionName: string) {\n    const i = this.accordionPanes.findIndex(t => t.props.name === accordionName);\n    this.toggle(i + 1, false);\n  }\n\n  expandCollapseIcon(item: any, index: number, showBadge = true, showIcon = true, useChevron = true, isExpanded = false) {\n    const widgetProps = item.props;\n    //@ts-ignore\n    const badge = showBadge && widgetProps.badgevalue != undefined ? (\n      <Badge style={[\n        this.styles.badge,\n        isExpanded ? this.styles.activeBadge: null,\n        this.styles[widgetProps.badgetype || 'default']]}\n        {...this.getTestProps('badge'+index)}>\n        {widgetProps.badgevalue}\n      </Badge>): null;\n    let iconclass = null;\n    if (useChevron) {\n      iconclass = isExpanded ? 'wi wi-chevron-down' : 'wi wi-chevron-up';\n    } else {\n      iconclass = isExpanded ? 'wi wi-minus' : 'wi wi-plus';\n    }\n    return (<View style={{flexDirection: 'row'}}>\n            {badge}\n            {showIcon ? (\n              <WmIcon\n              id={this.getTestId('icon' + index)}\n              styles={this.theme.mergeStyle({}, this.styles.icon, isExpanded ? this.styles.activeIcon : null)}\n              name={'expand_collapse_icon'}\n              iconclass={iconclass}></WmIcon>): null}\n          </View>);\n  }\n\n  renderAccordionpane(item: any, index: any, accordionpanes: any[] = []) {\n    const showIconOnLeft = this.styles.leftToggleIcon.root.width !== undefined;\n    const isExpanded = this.state.isExpanded[index];\n    return (\n      <View style={this.styles.pane} key={item.props.title}>\n        <TouchableOpacity key={'accordionpane_' + (index + 1)}\n              {...this.getTestPropsForAction(`header${index}`)}\n              style={[this.styles.header,\n                index === 0 ? this.styles.firstHeader: null,\n                index === accordionpanes.length - 1 && !isExpanded ? this.styles.lastHeader: null,\n                isExpanded ? this.styles.activeHeader : {}]}\n                onPress={this.toggle.bind(this, index + 1, !isExpanded)}>\n          {this.expandCollapseIcon(item, index, false, showIconOnLeft, true, isExpanded)}\n          {item.props.iconclass ? <WmIcon styles={this.styles.icon} name={item.props.name + '_icon'} iconclass={item.props.iconclass}></WmIcon>: null}\n          <View style={{flexDirection: 'column', flex: 1, justifyContent: 'center'}}>\n            <Text style={[\n              this.styles.text,\n              this.styles.heading,\n              isExpanded ? this.styles.activeHeaderTitle : {}]}\n              {...this.getTestPropsForAction(`header${index}_title`)}>\n                {isDefined(item.props.title) ? item.props.title : 'Title'}\n            </Text>\n            {item.props.description ? \n              (<Text style={this.styles.subheading}\n                {...this.getTestPropsForAction(`header${index}_description`)}>{item.props.description}</Text>) : null }\n          </View>\n          {this.expandCollapseIcon(item, index, true, !showIconOnLeft, true, isExpanded)}\n        </TouchableOpacity>\n        {item}\n      </View>\n    );\n  }\n\n  toggle(index: number, expand = true) {\n    let expandedId = expand ? index : -1;\n    let collapseId = expand ? -1 : index;\n    if (expand && this.state.isExpanded[expandedId - 1]\n        || !expand && this.state.isExpanded[collapseId - 1] === false) {\n        return;\n    }\n    if (collapseId < 0 && this.state.props.closeothers) {\n      collapseId = this.state.lastExpandedIndex;\n    }\n    const collapsedPane = this.accordionPanes[collapseId -1];\n    collapsedPane?.hide();\n    Promise.resolve().then(() => {\n      const expandedPane = expandedId ? this.accordionPanes[expandedId - 1]: null;\n      expandedPane?.show();\n      this.setState((state) => {\n        if (collapseId > 0 && collapsedPane) {\n          state.isExpanded[collapseId - 1] = false;\n        }\n        if (expandedId > 0 && expandedPane) {\n          state.isExpanded[expandedId - 1] = true;\n        }\n        return {\n          lastExpandedIndex: expandedId,\n          isExpanded: [...state.isExpanded]\n        };\n      }, () => {\n        this.invokeEventCallback('onChange', [{},\n          this.proxy,\n          expandedId - 1,\n          collapseId ? collapseId - 1 : null,\n          expandedPane && expandedPane.props.name,\n          collapsedPane && collapsedPane.props.name]);\n        });\n    }, () => {});\n  }\n\n  public componentDidMount(): void {\n      super.componentDidMount();\n      this.toggle(this.state.props.defaultpaneindex + 1);\n  }\n\n  renderWidget(props: WmAccordionProps) {\n    const accordionpanes = props.children;\n    const expandedId = this.state.lastExpandedIndex || 0;\n    return (\n        <View style={this.styles.root}>\n          {this._background}\n            {accordionpanes\n              ? isArray(accordionpanes) && accordionpanes.length\n                ? accordionpanes.map((item: any, index: any) => this.renderAccordionpane(item, index, accordionpanes))\n                : this.renderAccordionpane(accordionpanes, 0)\n              : null}\n        </View>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1,13 +1,13 @@
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-import React, { useState } from 'react';
+import React from 'react';
 import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
 import WmAccordionpaneProps from './accordionpane.props';
 import { DEFAULT_CLASS } from './accordionpane.styles';
 import { View } from 'react-native';
 import { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';
-const Animated = isWebPreviewMode() ? {} : require('react-native-reanimated');
+import { CollapsiblePane } from '../../panel/collapsible-pane.component';
 export class WmAccordionpaneState extends BaseComponentState {
   constructor() {
     super(...arguments);
@@ -15,25 +15,6 @@ export class WmAccordionpaneState extends BaseComponentState {
     _defineProperty(this, "collapsed", true);
   }
 }
-const AnimatedView = props => {
-  const [height, setHeight] = useState(0);
-  const offset = Animated.useSharedValue(0);
-  offset.value = props.close ? 0 : 1;
-  const onLayoutChange = e => {
-    var _e$nativeEvent;
-    setHeight((((_e$nativeEvent = e.nativeEvent) === null || _e$nativeEvent === void 0 || (_e$nativeEvent = _e$nativeEvent.layout) === null || _e$nativeEvent === void 0 ? void 0 : _e$nativeEvent.height) || height || 100000000) + 1000);
-  };
-  const animatedStyles = Animated.useAnimatedStyle(() => {
-    return {
-      maxHeight: Animated.withTiming(offset.value * height)
-    };
-  });
-  return /*#__PURE__*/React.createElement(Animated.default.View, {
-    style: [animatedStyles]
-  }, /*#__PURE__*/React.createElement(View, {
-    onLayout: onLayoutChange
-  }, props.children));
-};
 export default class WmAccordionpane extends BaseComponent {
   constructor(props) {
     super(props, DEFAULT_CLASS, new WmAccordionpaneProps(), new WmAccordionpaneState());
@@ -86,7 +67,7 @@ export default class WmAccordionpane extends BaseComponent {
         maxHeight: 0,
         overflow: 'hidden'
       } : {}
-    }, this._background, this.renderContent(props)) : /*#__PURE__*/React.createElement(AnimatedView, {
+    }, this._background, this.renderContent(props)) : /*#__PURE__*/React.createElement(CollapsiblePane, {
       close: this.state.collapsed
     }, this._background, this.renderContent(props));
   }

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

@@ -1 +1 @@
-{"version":3,"names":["React","useState","BaseComponent","BaseComponentState","WmAccordionpaneProps","DEFAULT_CLASS","View","isWebPreviewMode","Animated","require","WmAccordionpaneState","constructor","arguments","_defineProperty","AnimatedView","props","height","setHeight","offset","useSharedValue","value","close","onLayoutChange","e","_e$nativeEvent","nativeEvent","layout","animatedStyles","useAnimatedStyle","maxHeight","withTiming","createElement","default","style","onLayout","children","WmAccordionpane","isCollapsed","state","collapsed","show","updateState","invokeEventCallback","proxy","hide","expand","parent","name","collapse","componentDidMount","accordion","addAccordionPane","onPartialLoad","renderContent","renderPartial","isPartialLoaded","setTimeout","bind","renderWidget","overflow","_background"],"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 { LayoutChangeEvent, View } from 'react-native';\nimport { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';\n\nconst Animated: any = isWebPreviewMode() ? {} : require('react-native-reanimated');\n\nexport class WmAccordionpaneState extends BaseComponentState<WmAccordionpaneProps> {\n  isPartialLoaded = false;\n  collapsed = true;\n}\n\nconst AnimatedView = (props: {\n  close: boolean,\n  children: any\n}) => {\n  const [height, setHeight] = useState(0);\n  const offset = Animated.useSharedValue(0);\n  offset.value = props.close ? 0 : 1;\n  const onLayoutChange = (e: LayoutChangeEvent) => {\n    setHeight((e.nativeEvent?.layout?.height || height || 100000000) + 1000);\n  };\n  const animatedStyles = Animated.useAnimatedStyle(() => {\n    return {\n      maxHeight: Animated.withTiming(offset.value * height)\n    };\n  });\n  return (\n      <Animated.default.View style={[animatedStyles]}>\n        <View onLayout={onLayoutChange}>\n          {props.children}\n        </View>\n      </Animated.default.View>\n    );\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    (<AnimatedView close={this.state.collapsed}>\n      {this._background}\n      {this.renderContent(props)}\n    </AnimatedView>);\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["React","BaseComponent","BaseComponentState","WmAccordionpaneProps","DEFAULT_CLASS","View","isWebPreviewMode","CollapsiblePane","WmAccordionpaneState","constructor","arguments","_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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"}

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

@@ -1,3 +1,4 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
@@ -26,10 +27,10 @@ export default class WmContainer extends PartialHost {
     return /*#__PURE__*/React.createElement(Animatedview, {
       entryanimation: props.animation,
       style: this.styles.root
-    }, this._background, /*#__PURE__*/React.createElement(Tappable, {
+    }, this._background, /*#__PURE__*/React.createElement(Tappable, _extends({}, this.getTestPropsForAction(), {
       target: this,
       styles: dimensions
-    }, /*#__PURE__*/React.createElement(View, {
+    }), /*#__PURE__*/React.createElement(View, {
       style: [dimensions, this.styles.content]
     }, this.renderContent(props))));
   }

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","arguments","_defineProperty","WmContainer","props","renderWidget","dimensions","width","styles","root","undefined","height","createElement","entryanimation","animation","style","_background","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());\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} style={this.styles.root}>\n        {this._background}\n        <Tappable 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;IAAA,SAAAC,SAAA;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,CAAC;EACrD;EAEAY,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,EAAE,IAAI,CAACP,MAAM,CAACC;IAAK,GACpE,IAAI,CAACO,WAAW,eACjBzB,KAAA,CAAAqB,aAAA,CAACjB,QAAQ;MAACsB,MAAM,EAAE,IAAK;MAACT,MAAM,EAAEF;IAAW,gBACvCf,KAAA,CAAAqB,aAAA,CAACpB,IAAI;MAACuB,KAAK,EAAE,CAACT,UAAU,EAAgB,IAAI,CAACE,MAAM,CAACU,OAAO;IAAE,GAAE,IAAI,CAACC,aAAa,CAACf,KAAK,CAAQ,CACzF,CACE,CAAC;EAEnB;AACF"}
+{"version":3,"names":["React","View","WmContainerProps","DEFAULT_CLASS","Tappable","Animatedview","PartialHost","PartialHostState","WmContainerState","constructor","arguments","_defineProperty","WmContainer","props","renderWidget","dimensions","width","styles","root","undefined","height","createElement","entryanimation","animation","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());\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} 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;IAAA,SAAAC,SAAA;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,CAAC;EACrD;EAEAY,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,EAAE,IAAI,CAACP,MAAM,CAACC;IAAK,GACpE,IAAI,CAACO,WAAW,eACjBzB,KAAA,CAAAqB,aAAA,CAACjB,QAAQ,EAAAsB,QAAA,KAAK,IAAI,CAACC,qBAAqB,CAAC,CAAC;MAAEC,MAAM,EAAE,IAAK;MAACX,MAAM,EAAEF;IAAW,iBACzEf,KAAA,CAAAqB,aAAA,CAACpB,IAAI;MAACuB,KAAK,EAAE,CAACT,UAAU,EAAgB,IAAI,CAACE,MAAM,CAACY,OAAO;IAAE,GAAE,IAAI,CAACC,aAAa,CAACjB,KAAK,CAAQ,CACzF,CACE,CAAC;EAEnB;AACF"}

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

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';
+const Animated = isWebPreviewMode() ? {} : require('react-native-reanimated');
+export const CollapsiblePane = props => {
+  const [height, setHeight] = useState(0);
+  const offset = Animated.useSharedValue(0);
+  offset.value = props.close ? 0 : 1;
+  const onLayoutChange = e => {
+    var _e$nativeEvent;
+    setHeight((((_e$nativeEvent = e.nativeEvent) === null || _e$nativeEvent === void 0 || (_e$nativeEvent = _e$nativeEvent.layout) === null || _e$nativeEvent === void 0 ? void 0 : _e$nativeEvent.height) || height || 100000000) + 1000);
+  };
+  const animatedStyles = Animated.useAnimatedStyle(() => {
+    return {
+      maxHeight: Animated.withTiming(offset.value * height)
+    };
+  });
+  return /*#__PURE__*/React.createElement(Animated.default.View, {
+    style: [{
+      overflow: 'hidden'
+    }, animatedStyles]
+  }, /*#__PURE__*/React.createElement(View, {
+    onLayout: onLayoutChange
+  }, props.children));
+};
+//# sourceMappingURL=collapsible-pane.component.js.map

app-rn-runtime/components/container/panel/collapsible-pane.component.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","View","isWebPreviewMode","Animated","require","CollapsiblePane","props","height","setHeight","offset","useSharedValue","value","close","onLayoutChange","e","_e$nativeEvent","nativeEvent","layout","animatedStyles","useAnimatedStyle","maxHeight","withTiming","createElement","default","style","overflow","onLayout","children"],"sources":["collapsible-pane.component.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from 'react';\nimport { LayoutChangeEvent, View } from 'react-native';\nimport { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';\n\nconst Animated: any = isWebPreviewMode() ? {} : require('react-native-reanimated');\n\nexport const CollapsiblePane = (props: {\n    close: boolean,\n    children: any\n  }) => {\n    const [height, setHeight] = useState(0);\n    const offset = Animated.useSharedValue(0);\n    offset.value = props.close ? 0 : 1;\n    const onLayoutChange = (e: LayoutChangeEvent) => {\n      setHeight((e.nativeEvent?.layout?.height || height || 100000000) + 1000);\n    };\n    const animatedStyles = Animated.useAnimatedStyle(() => {\n      return {\n        maxHeight: Animated.withTiming(offset.value * height)\n      };\n    });\n    return (\n        <Animated.default.View style={[{overflow: 'hidden'}, animatedStyles]}>\n          <View onLayout={onLayoutChange}>\n            {props.children}\n          </View>\n        </Animated.default.View>\n      );\n  };"],"mappings":"AAAA,OAAOA,KAAK,IAA0BC,QAAQ,QAAQ,OAAO;AAC7D,SAA4BC,IAAI,QAAQ,cAAc;AACtD,SAASC,gBAAgB,QAAQ,sCAAsC;AAEvE,MAAMC,QAAa,GAAGD,gBAAgB,CAAC,CAAC,GAAG,CAAC,CAAC,GAAGE,OAAO,CAAC,yBAAyB,CAAC;AAElF,OAAO,MAAMC,eAAe,GAAIC,KAG7B,IAAK;EACJ,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGR,QAAQ,CAAC,CAAC,CAAC;EACvC,MAAMS,MAAM,GAAGN,QAAQ,CAACO,cAAc,CAAC,CAAC,CAAC;EACzCD,MAAM,CAACE,KAAK,GAAGL,KAAK,CAACM,KAAK,GAAG,CAAC,GAAG,CAAC;EAClC,MAAMC,cAAc,GAAIC,CAAoB,IAAK;IAAA,IAAAC,cAAA;IAC/CP,SAAS,CAAC,CAAC,EAAAO,cAAA,GAAAD,CAAC,CAACE,WAAW,cAAAD,cAAA,gBAAAA,cAAA,GAAbA,cAAA,CAAeE,MAAM,cAAAF,cAAA,uBAArBA,cAAA,CAAuBR,MAAM,KAAIA,MAAM,IAAI,SAAS,IAAI,IAAI,CAAC;EAC1E,CAAC;EACD,MAAMW,cAAc,GAAGf,QAAQ,CAACgB,gBAAgB,CAAC,MAAM;IACrD,OAAO;MACLC,SAAS,EAAEjB,QAAQ,CAACkB,UAAU,CAACZ,MAAM,CAACE,KAAK,GAAGJ,MAAM;IACtD,CAAC;EACH,CAAC,CAAC;EACF,oBACIR,KAAA,CAAAuB,aAAA,CAACnB,QAAQ,CAACoB,OAAO,CAACtB,IAAI;IAACuB,KAAK,EAAE,CAAC;MAACC,QAAQ,EAAE;IAAQ,CAAC,EAAEP,cAAc;EAAE,gBACnEnB,KAAA,CAAAuB,aAAA,CAACrB,IAAI;IAACyB,QAAQ,EAAEb;EAAe,GAC5BP,KAAK,CAACqB,QACH,CACe,CAAC;AAE9B,CAAC"}

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

@@ -1,28 +1,26 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import React from 'react';
-import { View } from 'react-native';
-import { Badge, List } from 'react-native-paper';
+import { Text, View, TouchableOpacity } from 'react-native';
+import { isUndefined } from 'lodash';
+import { Badge } from 'react-native-paper';
 import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
 import WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';
 import WmPanelProps from './panel.props';
 import { DEFAULT_CLASS } from './panel.styles';
-import { Animatedview } from '@wavemaker/app-rn-runtime/components/basic/animatedview.component';
+import { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';
+import { CollapsiblePane } from './collapsible-pane.component';
 export class WmPanelState extends BaseComponentState {
   constructor() {
     super(...arguments);
-    _defineProperty(this, "expandedId", void 0);
     _defineProperty(this, "isPartialLoaded", false);
   }
 }
 export default class WmPanel extends BaseComponent {
   constructor(props) {
     super(props, DEFAULT_CLASS, new WmPanelProps());
-    _defineProperty(this, "animatedRef", void 0);
-    this.updateState({
-      expandedId: this.state.props.expanded ? 1 : -1
-    });
   }
   onPartialLoad() {
     this.invokeEventCallback('onLoad', [this]);
@@ -39,31 +37,16 @@ export default class WmPanel extends BaseComponent {
       return props.renderPartial(props, this.onPartialLoad.bind(this));
     }
   }
-  onPanelPress(expandedId) {
+  onPanelPress() {
     if (!this.state.props.collapsible) {
       return;
     }
-    const paneId = expandedId === this.state.expandedId ? -1 : 1;
-    const eventName = paneId === 1 ? 'onExpand' : 'onCollapse';
-    if (eventName === 'onCollapse') {
-      this.animatedRef.triggerExit().then(res => {
-        if (res) {
-          this.updateState({
-            expandedId: paneId,
-            props: {
-              expanded: false
-            }
-          });
-        }
-      });
-    } else {
-      this.updateState({
-        expandedId: paneId,
-        props: {
-          expanded: true
-        }
-      });
-    }
+    const eventName = this.state.props.expanded ? 'onCollapse' : 'onExpand';
+    this.updateState({
+      props: {
+        expanded: !this.state.props.expanded
+      }
+    });
     this.invokeEventCallback(eventName, [null, this.proxy]);
   }
   expandCollapseIcon(isExpanded) {
@@ -80,48 +63,47 @@ export default class WmPanel extends BaseComponent {
     }) : null;
     return /*#__PURE__*/React.createElement(View, {
       style: {
-        flexDirection: 'row'
+        flexDirection: 'row',
+        alignItems: 'center'
       }
     }, badge, expandCollapseIcon);
   }
-  renderPanel(props) {
-    const icon = /*#__PURE__*/React.createElement(WmIcon, {
+  renderHeader() {
+    const props = this.state.props;
+    return /*#__PURE__*/React.createElement(TouchableOpacity, _extends({}, this.getTestPropsForAction(`header`), {
+      style: [this.styles.header],
+      onPress: this.onPanelPress.bind(this)
+    }), props.iconclass ? /*#__PURE__*/React.createElement(WmIcon, {
       styles: this.styles.icon,
       name: props.name + '_icon',
       iconclass: props.iconclass
-    });
-    return /*#__PURE__*/React.createElement(List.Accordion, {
-      title: props.title,
-      style: this.styles.header,
-      id: 1,
-      titleStyle: this.styles.text,
-      descriptionStyle: this.styles.subheading,
-      description: props.subheading,
-      expanded: props.expanded,
-      right: _ref => {
-        let {
-          isExpanded
-        } = _ref;
-        return this.expandCollapseIcon(isExpanded);
-      },
-      left: props => icon
-    }, /*#__PURE__*/React.createElement(Animatedview, {
+    }) : null, /*#__PURE__*/React.createElement(View, {
       style: {
-        marginLeft: -64
-      },
-      ref: ref => this.animatedRef = ref,
-      entryanimation: 'fadeInDown'
-    }, /*#__PURE__*/React.createElement(View, null, this.renderContent(props)), /*#__PURE__*/React.createElement(View, null, props.children)));
+        flexDirection: 'column',
+        flex: 1,
+        justifyContent: 'center'
+      }
+    }, /*#__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({
+      style: this.styles.subheading
+    }, this.getTestPropsForAction(`subheader`)), props.subheading) : null), this.expandCollapseIcon(props.expanded));
+  }
+  renderPane(content) {
+    const expanded = this.state.props.expanded;
+    return isWebPreviewMode() ? /*#__PURE__*/React.createElement(View, {
+      style: expanded ? {} : {
+        maxHeight: 0,
+        overflow: 'hidden'
+      }
+    }, content) : /*#__PURE__*/React.createElement(CollapsiblePane, {
+      close: !expanded
+    }, content);
   }
   renderWidget(props) {
     return /*#__PURE__*/React.createElement(View, {
       style: this.styles.root
-    }, this._background, /*#__PURE__*/React.createElement(List.AccordionGroup, {
-      expandedId: this.state.expandedId,
-      onAccordionPress: this.onPanelPress.bind(this)
-    }, /*#__PURE__*/React.createElement(Animatedview, {
-      entryanimation: props.animation
-    }, this.renderPanel(props))));
+    }, this._background, 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

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

@@ -1 +1 @@
-{"version":3,"names":["React","View","Badge","List","BaseComponent","BaseComponentState","WmIcon","WmPanelProps","DEFAULT_CLASS","Animatedview","WmPanelState","constructor","arguments","_defineProperty","WmPanel","props","updateState","expandedId","state","expanded","onPartialLoad","invokeEventCallback","renderContent","renderPartial","isPartialLoaded","setTimeout","bind","onPanelPress","collapsible","paneId","eventName","animatedRef","triggerExit","then","res","proxy","expandCollapseIcon","isExpanded","widgetProps","badge","badgevalue","undefined","createElement","style","styles","badgetype","iconclass","name","toggleIcon","flexDirection","renderPanel","icon","Accordion","title","header","id","titleStyle","text","descriptionStyle","subheading","description","right","_ref","left","marginLeft","ref","entryanimation","children","renderWidget","root","_background","AccordionGroup","onAccordionPress","animation"],"sources":["panel.component.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport { Badge, List } from 'react-native-paper';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\nimport WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';\n\nimport WmPanelProps from './panel.props';\nimport { DEFAULT_CLASS, WmPanelStyles } from './panel.styles';\nimport { Animatedview } from '@wavemaker/app-rn-runtime/components/basic/animatedview.component';\n\nexport class WmPanelState extends BaseComponentState<WmPanelProps> {\n  expandedId: any;\n  isPartialLoaded = false;\n}\n\nexport default class WmPanel extends BaseComponent<WmPanelProps, WmPanelState, WmPanelStyles> {\n  private animatedRef: any;\n  constructor(props: WmPanelProps) {\n    super(props, DEFAULT_CLASS, new WmPanelProps());\n    this.updateState({\n      expandedId: this.state.props.expanded ? 1 : -1,\n    } as WmPanelState);\n  }\n\n  onPartialLoad() {\n    this.invokeEventCallback('onLoad', [this]);\n  }\n\n  renderContent(props: WmPanelProps) {\n    if (props.renderPartial) {\n      if (!this.state.isPartialLoaded) {\n        setTimeout(() => {\n          this.updateState({\n            isPartialLoaded: true\n          } as WmPanelState);\n        });\n      }\n      return props.renderPartial(props, this.onPartialLoad.bind(this));\n    }\n  }\n\n  onPanelPress(expandedId: any) {\n    if (!this.state.props.collapsible) {\n      return;\n    }\n    const paneId = expandedId === this.state.expandedId ? -1 : 1;\n    const eventName = paneId === 1 ? 'onExpand' : 'onCollapse';\n\n    if (eventName === 'onCollapse') {\n      this.animatedRef.triggerExit().then((res: any) => {\n        if (res) {\n          this.updateState({\n            expandedId: paneId,\n            props: {\n              expanded: false\n            }\n          } as WmPanelState);\n        }\n      })\n    } else {\n      this.updateState({\n        expandedId: paneId,\n        props: {\n          expanded: true\n        }\n      } as WmPanelState);\n    }\n\n    this.invokeEventCallback(eventName, [null, this.proxy]);\n  }\n\n  expandCollapseIcon(isExpanded: boolean) {\n    const widgetProps = this.state.props;\n    //@ts-ignore\n    const badge = widgetProps.badgevalue != undefined ? (<Badge style={[this.styles.badge, this.styles[widgetProps.badgetype || 'default']]}>{widgetProps.badgevalue}</Badge>): null;\n    const iconclass = isExpanded ? 'wi wi-chevron-up' : 'wi wi-chevron-down';\n    const expandCollapseIcon = widgetProps.collapsible ? (<WmIcon name={'expand_collapse_icon'} styles={this.styles.toggleIcon} iconclass={iconclass}></WmIcon>) : null;\n    return (<View style={{flexDirection: 'row'}}>{badge}{expandCollapseIcon}</View>);\n  }\n\n  renderPanel(props: WmPanelProps) {\n    const icon = (<WmIcon styles={this.styles.icon} name={props.name + '_icon'} iconclass={props.iconclass}></WmIcon>);\n    return (\n      <List.Accordion title={props.title} style={this.styles.header} id={1}\n                      titleStyle={this.styles.text} descriptionStyle={this.styles.subheading}\n                      description={props.subheading}\n                      expanded={props.expanded} \n                      right={({isExpanded}) => this.expandCollapseIcon(isExpanded)} left={props => icon}>\n        <Animatedview style={{marginLeft: -64}} ref={ref => this.animatedRef = ref} entryanimation={'fadeInDown'}>\n          <View>{this.renderContent(props)}</View>\n          <View>{props.children}</View>\n        </Animatedview>\n      </List.Accordion>\n    );\n  }\n\n  renderWidget(props: WmPanelProps) {\n    return (<View style={this.styles.root}>\n                  {this._background}\n                  <List.AccordionGroup expandedId={this.state.expandedId} onAccordionPress={this.onPanelPress.bind(this)}>\n                      <Animatedview entryanimation={props.animation}>\n                        {this.renderPanel(props)}\n                      </Animatedview>\n                  </List.AccordionGroup>\n            </View>);\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["React","Text","View","TouchableOpacity","isUndefined","Badge","BaseComponent","BaseComponentState","WmIcon","WmPanelProps","DEFAULT_CLASS","isWebPreviewMode","CollapsiblePane","WmPanelState","constructor","arguments","_defineProperty","WmPanel","props","onPartialLoad","invokeEventCallback","renderContent","renderPartial","state","isPartialLoaded","setTimeout","updateState","bind","onPanelPress","collapsible","eventName","expanded","proxy","expandCollapseIcon","isExpanded","widgetProps","badge","badgevalue","undefined","createElement","style","styles","badgetype","iconclass","name","toggleIcon","flexDirection","alignItems","renderHeader","_extends","getTestPropsForAction","header","onPress","icon","flex","justifyContent","text","heading","title","subheading","renderPane","content","maxHeight","overflow","close","renderWidget","root","_background","Fragment","children"],"sources":["panel.component.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View, TouchableOpacity } from 'react-native';\nimport { isUndefined } from 'lodash';\nimport { Badge } from 'react-native-paper';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\nimport WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';\n\nimport WmPanelProps from './panel.props';\nimport { DEFAULT_CLASS, WmPanelStyles } from './panel.styles';\nimport { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';\nimport { CollapsiblePane } from './collapsible-pane.component';\n\nexport class WmPanelState extends BaseComponentState<WmPanelProps> {\n  isPartialLoaded = false;\n}\n\nexport default class WmPanel extends BaseComponent<WmPanelProps, WmPanelState, WmPanelStyles> {\n  constructor(props: WmPanelProps) {\n    super(props, DEFAULT_CLASS, new WmPanelProps());\n  }\n\n  onPartialLoad() {\n    this.invokeEventCallback('onLoad', [this]);\n  }\n\n  renderContent(props: WmPanelProps) {\n    if (props.renderPartial) {\n      if (!this.state.isPartialLoaded) {\n        setTimeout(() => {\n          this.updateState({\n            isPartialLoaded: true\n          } as WmPanelState);\n        });\n      }\n      return props.renderPartial(props, this.onPartialLoad.bind(this));\n    }\n  }\n\n  onPanelPress() {\n    if (!this.state.props.collapsible) {\n      return;\n    }\n    const eventName = this.state.props.expanded ? 'onCollapse' : 'onExpand';\n    this.updateState({\n      props: {\n        expanded: !this.state.props.expanded\n      }\n    } as WmPanelState);\n\n    this.invokeEventCallback(eventName, [null, this.proxy]);\n  }\n\n  expandCollapseIcon(isExpanded: boolean) {\n    const widgetProps = this.state.props;\n    //@ts-ignore\n    const badge = widgetProps.badgevalue != undefined ? (<Badge style={[this.styles.badge, this.styles[widgetProps.badgetype || 'default']]}>{widgetProps.badgevalue}</Badge>): null;\n    const iconclass = isExpanded ? 'wi wi-chevron-up' : 'wi wi-chevron-down';\n    const expandCollapseIcon = widgetProps.collapsible ? (<WmIcon name={'expand_collapse_icon'} styles={this.styles.toggleIcon} iconclass={iconclass}></WmIcon>) : null;\n    return (<View style={{flexDirection: 'row', alignItems: 'center'}}>{badge}{expandCollapseIcon}</View>);\n  }\n\n  renderHeader() {\n    const props = this.state.props;\n    return (\n      <TouchableOpacity\n            {...this.getTestPropsForAction(`header`)}\n            style={[this.styles.header]}\n              onPress={this.onPanelPress.bind(this)}>\n        {props.iconclass ? <WmIcon styles={this.styles.icon} name={props.name + '_icon'} iconclass={props.iconclass}></WmIcon>: null}\n        <View style={{flexDirection: 'column', flex: 1, justifyContent: 'center'}}>\n          <Text style={[\n            this.styles.text,\n            this.styles.heading]}\n            {...this.getTestPropsForAction(`header_title`)}>\n              {isUndefined(props.title) ? 'Title' : props.title}\n          </Text>\n          {props.subheading ? \n            (<Text style={this.styles.subheading}\n              {...this.getTestPropsForAction(`subheader`)}>{props.subheading}</Text>) : null }\n        </View>\n        {this.expandCollapseIcon(props.expanded)}\n      </TouchableOpacity>\n    );\n  }\n\n  renderPane(content: React.ReactNode) {\n    const expanded = this.state.props.expanded;\n    return isWebPreviewMode() ? \n      (<View style={expanded ? {} : {maxHeight: 0, overflow: 'hidden'}}>\n        {content}\n      </View>) :\n      (<CollapsiblePane close={!expanded}>\n        {content}\n      </CollapsiblePane>);\n  }\n\n  renderWidget(props: WmPanelProps) {\n    return (<View style={this.styles.root}>\n      {this._background}\n      {this.renderHeader()}\n      {this.renderPane((\n        <>\n        {this.renderContent(props)}\n        <View>{props.children}</View>\n        </>\n      ))}\n    </View>);\n  }\n}\n"],"mappings":"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"}

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

@@ -17,6 +17,7 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
       fontWeight: 'bold'
     },
     header: {
+      flexDirection: 'row',
       backgroundColor: themeVariables.panelHeaderBgColor,
       paddingHorizontal: 8,
       paddingVertical: 4,
@@ -26,7 +27,12 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
       borderTopLeftRadius: 6,
       borderTopRightRadius: 6
     },
-    subheading: {},
+    heading: {
+      paddingHorizontal: 16
+    },
+    subheading: {
+      paddingHorizontal: 16
+    },
     icon: {
       root: {
         alignSelf: 'auto',
@@ -40,7 +46,8 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
     },
     badge: {
       color: themeVariables.badgeTextColor,
-      marginRight: 8
+      marginRight: 8,
+      alignSelf: 'center'
     },
     default: {
       backgroundColor: themeVariables.labelDefaultColor