@wavemaker/app-rn-runtime 11.6.1-rc.5499 → 11.7.0-dev.2

package/components/chart/staticdata.js

@@ -0,0 +1,215 @@
+import _ from "lodash";
+const dataTypeJSON = ['Column', 'Line', 'Pie', 'Bar', 'Donut', 'Bubble'];
+const SAMPLE_DATA1 = {
+  'group1': 'Europe',
+  'group2': 'Asia',
+  'group3': 'America',
+  'group4': 'Australia'
+};
+const SAMPLE_DATA = {
+  'group1': '01/01/2001',
+  'group2': '01/01/2002',
+  'group3': '01/01/2003'
+};
+const SAMPLE_DATA2 = {
+  'group1': '78.6',
+  'group2': '79',
+  'group3': '80',
+  'group4': '80.66'
+};
+export const chartTypes = ['Column', 'Line', 'Area', 'Cumulative Line', 'Bar', 'Pie', 'Donut', 'Bubble'];
+export const isPieChart = type => type === 'Pie';
+
+// returns true if chart type is line
+export const isLineChart = type => type === 'Line';
+
+// returns true if chart type is bar
+export const isBarChart = type => type === 'Bar';
+
+// returns true if chart type is donut
+export const isDonutChart = type => type === 'Donut';
+
+// returns true if chart type is bubble
+export const isBubbleChart = type => type === 'Bubble';
+export const isAreaChart = type => type === 'Area';
+
+// returns true if chart type is column
+export const isColumnChart = type => type === 'Column';
+export const isPieType = type => isPieChart(type) || isDonutChart(type);
+
+// The format of chart data is array of json objects in case of the following types of chart
+export const isChartDataJSON = type => _.includes(dataTypeJSON, type) || !_.includes(chartTypes, type);
+export const constructSampleData = (dataType, yaxisLength, shape) => {
+  let first_series = [],
+    second_series = [],
+    third_series = [],
+    first_series_array = [],
+    second_series_array = [],
+    third_series_array = [],
+    data = [];
+  switch (dataType) {
+    case 'jsonFormat':
+      first_series = [{
+        'x': '01/01/2001',
+        'y': 4000000
+      }, {
+        'x': '01/01/2002',
+        'y': 1000000
+      }, {
+        'x': '01/01/2003',
+        'y': 5000000
+      }];
+      second_series = [{
+        'x': '01/01/2001',
+        'y': 3000000
+      }, {
+        'x': '01/01/2002',
+        'y': 4000000
+      }, {
+        'x': '01/01/2003',
+        'y': 7000000
+      }];
+      third_series = [{
+        'x': '01/01/2001',
+        'y': 2000000
+      }, {
+        'x': '01/01/2002',
+        'y': 8000000
+      }, {
+        'x': '01/01/2003',
+        'y': 6000000
+      }];
+      data[0] = {
+        values: first_series,
+        key: SAMPLE_DATA.group1
+      };
+      if (yaxisLength >= 2) {
+        data[1] = {
+          values: second_series,
+          key: SAMPLE_DATA.group2
+        };
+      }
+      if (yaxisLength >= 3) {
+        data[2] = {
+          values: third_series,
+          key: SAMPLE_DATA.group3
+        };
+      }
+      break;
+    case 'arrayFormat':
+      first_series_array = [[1, 4000000], [2, 1000000], [3, 5000000]];
+      second_series_array = [[1, 3000000], [2, 4000000], [3, 7000000]];
+      third_series_array = [[1, 2000000], [2, 8000000], [3, 6000000]];
+      data[0] = {
+        values: first_series_array,
+        key: SAMPLE_DATA.group1
+      };
+      if (yaxisLength >= 2) {
+        data[1] = {
+          values: second_series_array,
+          key: SAMPLE_DATA.group2
+        };
+      }
+      if (yaxisLength >= 3) {
+        data[2] = {
+          values: third_series_array,
+          key: SAMPLE_DATA.group3
+        };
+      }
+      break;
+    case 'columnChartFormat':
+      data = [{
+        'x': SAMPLE_DATA.group1,
+        'y': 3
+      }];
+      break;
+    case 'barChartFormat':
+      data = [{
+        'x': SAMPLE_DATA.group1,
+        'y': 2000000
+      }, {
+        'x': SAMPLE_DATA.group2,
+        'y': 1000000
+      }, {
+        'x': SAMPLE_DATA.group3,
+        'y': 3000000
+      }];
+      break;
+    case 'lineChartFormat':
+      data = [{
+        'x': SAMPLE_DATA1.group1,
+        'y': 2
+      }, {
+        'x': SAMPLE_DATA1.group2,
+        'y': 0
+      }, {
+        'x': SAMPLE_DATA1.group3,
+        'y': 3
+      }];
+      break;
+    case 'bubbleFormat':
+      // shape = shape === 'random' ?  shapes[Math.floor(Math.random() * shapes.length)] : shape;
+      data = [{
+        'x': SAMPLE_DATA2.group1,
+        'y': 1000000
+      }, {
+        'x': SAMPLE_DATA2.group2,
+        'y': 2000000
+      }, {
+        'x': SAMPLE_DATA2.group3,
+        'y': 3000000
+      }, {
+        'x': SAMPLE_DATA2.group4,
+        'y': 4000000
+      }];
+      break;
+    case 'pieChartFormat':
+      data = [{
+        'x': SAMPLE_DATA1.group1,
+        'y': 1000000
+      }, {
+        'x': SAMPLE_DATA1.group2,
+        'y': 2000000
+      }, {
+        'x': SAMPLE_DATA1.group3,
+        'y': 3000000
+      }, {
+        'x': SAMPLE_DATA1.group4,
+        'y': 4000000
+      }];
+      break;
+  }
+  return data;
+};
+export const getChartType = widgetContext => {
+  const type = widgetContext.type;
+  if (isLineChart(type)) {
+    return 'lineChartFormat';
+  }
+  if (isAreaChart(type)) {
+    return 'lineChartFormat';
+  }
+  if (isBarChart(type)) {
+    return 'barChartFormat';
+  }
+  if (isColumnChart(type)) {
+    return 'columnChartFormat';
+  }
+  if (isPieChart(type)) {
+    return 'pieChartFormat';
+  }
+  if (isBubbleChart(type)) {
+    return 'bubbleFormat';
+  }
+  if (isDonutChart(type)) {
+    return 'pieChartFormat';
+  }
+  return isChartDataJSON(type) ? 'jsonFormat' : 'arrayFormat';
+};
+
+// Sample data to populate when no data is bound
+export const getSampleData = widgetContext => constructSampleData(getDataType(widgetContext), _.split(widgetContext.yaxisdatakey, ',').length, widgetContext.shape);
+function getDataType(widgetContext) {
+  throw new Error("Function not implemented.");
+}
+//# sourceMappingURL=staticdata.js.map

package/components/chart/staticdata.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_","dataTypeJSON","SAMPLE_DATA1","SAMPLE_DATA","SAMPLE_DATA2","chartTypes","isPieChart","type","isLineChart","isBarChart","isDonutChart","isBubbleChart","isAreaChart","isColumnChart","isPieType","isChartDataJSON","includes","constructSampleData","dataType","yaxisLength","shape","first_series","second_series","third_series","first_series_array","second_series_array","third_series_array","data","values","key","group1","group2","group3","group4","getChartType","widgetContext","getSampleData","getDataType","split","yaxisdatakey","length","Error"],"sources":["staticdata.tsx"],"sourcesContent":["import _ from \"lodash\";\n\nconst dataTypeJSON = ['Column', 'Line', 'Pie', 'Bar', 'Donut', 'Bubble']\n\nconst SAMPLE_DATA1 = {\n  'group1' : 'Europe',\n  'group2' : 'Asia',\n  'group3' : 'America',\n  'group4' : 'Australia'\n}\n\nconst SAMPLE_DATA = {\n    'group1' : '01/01/2001',\n    'group2' : '01/01/2002',\n    'group3' : '01/01/2003',\n};\nconst SAMPLE_DATA2 = {\n  'group1' : '78.6',\n  'group2' : '79',\n  'group3' : '80',\n  'group4' : '80.66'\n};\nexport const chartTypes = ['Column', 'Line', 'Area', 'Cumulative Line', 'Bar', 'Pie', 'Donut', 'Bubble']\n\nexport const isPieChart = (type: string) => type === 'Pie';\n\n// returns true if chart type is line\nexport const isLineChart = (type: string) => type === 'Line';\n\n// returns true if chart type is bar\nexport const isBarChart = (type: string) => type === 'Bar';\n\n// returns true if chart type is donut\nexport const isDonutChart = (type: string) => type === 'Donut';\n\n// returns true if chart type is bubble\nexport const isBubbleChart = (type: string) => type === 'Bubble';\n\nexport const isAreaChart = (type: string) => type === 'Area';\n\n// returns true if chart type is column\nexport const isColumnChart = (type: string) => type === 'Column';\n\nexport const isPieType = (type: string) => isPieChart(type) || isDonutChart(type);\n\n// The format of chart data is array of json objects in case of the following types of chart\nexport const isChartDataJSON = (type: any) => _.includes(dataTypeJSON, type) || !_.includes(chartTypes, type);\n\n\nexport const constructSampleData = (dataType: any, yaxisLength: any, shape: string) => {\n  let first_series = [],\n      second_series = [],\n      third_series = [],\n      first_series_array = [],\n      second_series_array = [],\n      third_series_array = [],\n      data: { values?:  { x: string | number; y?: string | number; size?: number; shape?: any; }[]  | number[][]; key: any; }[] | { x: any; y?: number;  }[] = [];\n  switch (dataType) {\n    case 'jsonFormat':\n      first_series = [\n          {'x': '01/01/2001', 'y': 4000000},\n          {'x': '01/01/2002', 'y': 1000000},\n          {'x': '01/01/2003', 'y': 5000000}\n      ];\n      second_series = [\n          {'x': '01/01/2001', 'y': 3000000},\n          {'x': '01/01/2002', 'y': 4000000},\n          {'x': '01/01/2003', 'y': 7000000}\n      ];\n      third_series = [\n          {'x': '01/01/2001', 'y': 2000000},\n          {'x': '01/01/2002', 'y': 8000000},\n          {'x': '01/01/2003', 'y': 6000000}\n      ];\n      data[0] = {\n          values: first_series,\n          key: SAMPLE_DATA.group1\n      };\n      if (yaxisLength >= 2) {\n          data[1] = {\n              values: second_series,\n              key: SAMPLE_DATA.group2\n          };\n      }\n      if (yaxisLength >= 3) {\n          data[2] = {\n              values: third_series,\n              key: SAMPLE_DATA.group3\n          };\n      }\n      break;\n    case 'arrayFormat':\n      first_series_array = [\n          [1, 4000000],\n          [2, 1000000],\n          [3, 5000000]\n      ];\n      second_series_array = [\n          [1, 3000000],\n          [2, 4000000],\n          [3, 7000000]\n      ];\n      third_series_array = [\n          [1, 2000000],\n          [2, 8000000],\n          [3, 6000000]\n      ];\n      data[0] = {\n          values: first_series_array,\n          key: SAMPLE_DATA.group1\n      };\n      if (yaxisLength >= 2) {\n          data[1] = {\n              values: second_series_array,\n              key: SAMPLE_DATA.group2\n          };\n      }\n      if (yaxisLength >= 3) {\n          data[2] = {\n              values: third_series_array,\n              key: SAMPLE_DATA.group3\n          };\n      }\n            break;\n            case 'columnChartFormat':\n              data = [\n                {'x': SAMPLE_DATA.group1, 'y': 3}\n            ];\n            break;\n            case 'barChartFormat':\n              data = [\n                {'x': SAMPLE_DATA.group1, 'y': 2000000},\n                {'x': SAMPLE_DATA.group2, 'y': 1000000},\n                {'x': SAMPLE_DATA.group3, 'y': 3000000}\n            ];\n            break;\n            case 'lineChartFormat':\n              data = [\n                {'x': SAMPLE_DATA1.group1, 'y': 2},\n                {'x': SAMPLE_DATA1.group2, 'y': 0},\n                {'x': SAMPLE_DATA1.group3, 'y': 3}\n            ];\n              break;\n              case 'bubbleFormat':\n                // shape = shape === 'random' ?  shapes[Math.floor(Math.random() * shapes.length)] : shape;\n                data = [\n                  {'x': SAMPLE_DATA2.group1, 'y': 1000000},\n                  {'x': SAMPLE_DATA2.group2, 'y': 2000000},\n                  {'x': SAMPLE_DATA2.group3, 'y': 3000000},\n                  {'x': SAMPLE_DATA2.group4, 'y': 4000000}\n              ];\n              break;\n                case 'pieChartFormat':\n                  data = [\n                      {'x': SAMPLE_DATA1.group1, 'y': 1000000},\n                      {'x': SAMPLE_DATA1.group2, 'y': 2000000},\n                      {'x': SAMPLE_DATA1.group3, 'y': 3000000},\n                      {'x': SAMPLE_DATA1.group4, 'y': 4000000}\n                  ];\n                  break;\n    \n  }\n  return data;\n\n};\n\nexport const getChartType = (widgetContext: { type: any; }) => {\n  const type = widgetContext.type;\n  if (isLineChart(type)) {\n      return 'lineChartFormat';\n  }\n  if (isAreaChart(type)) {\n    return 'lineChartFormat'; \n  }\n  if (isBarChart(type)) {\n    return 'barChartFormat'; \n  }\n  if (isColumnChart(type)) {\n    return 'columnChartFormat'; \n  }\n  if (isPieChart(type)) {\n      return 'pieChartFormat';\n  }\n  if (isBubbleChart(type)) {\n      return 'bubbleFormat';\n  }\n  if (isDonutChart(type)) {\n    return 'pieChartFormat';\n}\n  return isChartDataJSON(type) ? 'jsonFormat' : 'arrayFormat';\n};\n\n// Sample data to populate when no data is bound\nexport const getSampleData = (widgetContext: { yaxisdatakey: any; shape: any; }) => constructSampleData(getDataType(widgetContext), _.split(widgetContext.yaxisdatakey, ',').length, widgetContext.shape);\n\nfunction getDataType(widgetContext: { yaxisdatakey: any; shape: any; }): any {\n  throw new Error(\"Function not implemented.\");\n}\n"],"mappings":"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"}

package/components/container/container.component.js

@@ -0,0 +1,38 @@
+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 WmContainerProps from './container.props';
+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';
+export class WmContainerState extends PartialHostState {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "isPartialLoaded", false);
+  }
+}
+export default class WmContainer extends PartialHost {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmContainerProps(), new WmContainerState());
+  }
+  renderWidget(props) {
+    const dimensions = {
+      width: this.styles.root.width ? '100%' : undefined,
+      height: this.styles.root.height ? '100%' : undefined
+    };
+    return /*#__PURE__*/React.createElement(Animatedview, {
+      entryanimation: props.animation,
+      style: this.styles.root
+    }, this._background, /*#__PURE__*/React.createElement(Tappable, _extends({}, this.getTestPropsForAction(), {
+      target: this,
+      styles: dimensions
+    }), /*#__PURE__*/React.createElement(View, {
+      style: [dimensions, this.styles.content]
+    }, this.renderContent(props))));
+  }
+}
+//# sourceMappingURL=container.component.js.map

package/components/container/container.component.js.map

@@ -0,0 +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","_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} 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,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,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"}

package/components/container/panel/panel.component.js

@@ -0,0 +1,113 @@
+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 { 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 { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';
+import { CollapsiblePane } from './collapsible-pane.component';
+export class WmPanelState extends BaseComponentState {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "isPartialLoaded", false);
+  }
+}
+export default class WmPanel extends BaseComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmPanelProps());
+  }
+  onPartialLoad() {
+    this.invokeEventCallback('onLoad', [this]);
+  }
+  renderContent(props) {
+    if (props.renderPartial) {
+      if (!this.state.isPartialLoaded) {
+        setTimeout(() => {
+          this.updateState({
+            isPartialLoaded: true
+          });
+        });
+      }
+      return props.renderPartial(props, this.onPartialLoad.bind(this));
+    }
+  }
+  onPanelPress() {
+    if (!this.state.props.collapsible) {
+      return;
+    }
+    const eventName = this.state.props.expanded ? 'onCollapse' : 'onExpand';
+    this.updateState({
+      props: {
+        expanded: !this.state.props.expanded
+      }
+    });
+    this.invokeEventCallback(eventName, [null, this.proxy]);
+  }
+  expandCollapseIcon(isExpanded) {
+    const widgetProps = this.state.props;
+    //@ts-ignore
+    const badge = widgetProps.badgevalue != undefined ? /*#__PURE__*/React.createElement(Badge, {
+      style: [this.styles.badge, this.styles[widgetProps.badgetype || 'default']]
+    }, widgetProps.badgevalue) : null;
+    const iconclass = isExpanded ? 'wi wi-chevron-up' : 'wi wi-chevron-down';
+    const expandCollapseIcon = widgetProps.collapsible ? /*#__PURE__*/React.createElement(WmIcon, {
+      name: 'expand_collapse_icon',
+      styles: this.styles.toggleIcon,
+      iconclass: iconclass
+    }) : null;
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      }
+    }, badge, expandCollapseIcon);
+  }
+  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 || props.iconurl ? /*#__PURE__*/React.createElement(WmIcon, {
+      styles: this.styles.icon,
+      name: props.name + '_icon',
+      iconclass: props.iconclass,
+      iconheight: props.iconheight,
+      iconwidth: props.iconwidth,
+      iconmargin: props.iconmargin,
+      iconurl: props.iconurl
+    }) : null, /*#__PURE__*/React.createElement(View, {
+      style: {
+        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, 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

package/components/container/panel/panel.component.js.map

@@ -0,0 +1 @@
+{"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","iconurl","icon","iconheight","iconwidth","iconmargin","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 || props.iconurl ? \n        <WmIcon styles={this.styles.icon} \n        name={props.name + '_icon'}\n        iconclass={props.iconclass}\n        iconheight={props.iconheight}\n        iconwidth={props.iconwidth}\n        iconmargin={props.iconmargin}\n        iconurl={props.iconurl}\n        /> : 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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"}

package/components/container/panel/panel.props.js

@@ -0,0 +1,24 @@
+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 { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';
+export default class WmPanelProps extends BaseProps {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "animation", null);
+    _defineProperty(this, "children", void 0);
+    _defineProperty(this, "collapsible", null);
+    _defineProperty(this, "iconclass", null);
+    _defineProperty(this, "title", 'Title');
+    _defineProperty(this, "renderPartial", void 0);
+    _defineProperty(this, "subheading", null);
+    _defineProperty(this, "badgevalue", null);
+    _defineProperty(this, "badgetype", 'default');
+    _defineProperty(this, "expanded", true);
+    _defineProperty(this, "iconurl", null);
+    _defineProperty(this, "iconheight", null);
+    _defineProperty(this, "iconwidth", null);
+    _defineProperty(this, "iconmargin", null);
+  }
+}
+//# sourceMappingURL=panel.props.js.map

package/components/container/panel/panel.props.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BaseProps","WmPanelProps","constructor","arguments","_defineProperty"],"sources":["panel.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\n\nexport default class WmPanelProps extends BaseProps {\n  animation: string = null as any;\n  children: any;\n  collapsible: boolean = null as any;\n  iconclass: string = null as any;\n  title: string = 'Title';\n  renderPartial?: Function;\n  subheading: string = null as any;\n  badgevalue: string = null as any;\n  badgetype: string = 'default';\n  expanded: boolean = true;\n  iconurl?: string = null as any;\n  iconheight?: number = null as any;\n  iconwidth?: number = null as any;\n  iconmargin?: number = null as any;\n}\n"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAEzE,eAAe,MAAMC,YAAY,SAASD,SAAS,CAAC;EAAAE,YAAA;IAAA,SAAAC,SAAA;IAAAC,eAAA,oBAC9B,IAAI;IAAAA,eAAA;IAAAA,eAAA,sBAED,IAAI;IAAAA,eAAA,oBACP,IAAI;IAAAA,eAAA,gBACR,OAAO;IAAAA,eAAA;IAAAA,eAAA,qBAEF,IAAI;IAAAA,eAAA,qBACJ,IAAI;IAAAA,eAAA,oBACL,SAAS;IAAAA,eAAA,mBACT,IAAI;IAAAA,eAAA,kBACL,IAAI;IAAAA,eAAA,qBACD,IAAI;IAAAA,eAAA,oBACL,IAAI;IAAAA,eAAA,qBACH,IAAI;EAAA;AAC5B"}

package/components/container/tabs/tabheader/tabheader.component.js

@@ -0,0 +1,196 @@
+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 { Animated, Easing, Text, View } from 'react-native';
+import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
+import WmTabheaderProps from './tabheader.props';
+import { DEFAULT_CLASS } from './tabheader.styles';
+import { Tappable } from '@wavemaker/app-rn-runtime/core/tappable.component';
+import { createSkeleton } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.component';
+import { BackgroundComponent } from '@wavemaker/app-rn-runtime/styles/background.component';
+export class WmTabheaderState extends BaseComponentState {}
+export default class WmTabheader extends BaseComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmTabheaderProps(), new WmTabheaderState());
+    _defineProperty(this, "headerPanelLayout", null);
+    _defineProperty(this, "headersLayout", []);
+    _defineProperty(this, "headerScrollPosition", new Animated.Value(0));
+    _defineProperty(this, "headerScrollPositionValue", 0);
+    _defineProperty(this, "indicatorPosition", new Animated.Value(0));
+    _defineProperty(this, "reverseIndicatorWidth", new Animated.Value(0));
+    _defineProperty(this, "indicatorWidth", new Animated.Value(0));
+    this.headerScrollPosition.addListener(_ref => {
+      let {
+        value
+      } = _ref;
+      return this.headerScrollPositionValue = value;
+    });
+  }
+  setHeaderPanelPositon(nativeEvent) {
+    this.headerPanelLayout = nativeEvent.nativeEvent.layout;
+    this.forceUpdate();
+  }
+  setHeaderPositon(index, nativeEvent) {
+    this.headersLayout[index] = nativeEvent.nativeEvent.layout;
+    if (index === this.props.selectedTabIndex) {
+      this.forceUpdate();
+    }
+  }
+  onTabSelection(index) {
+    if (this.state.props.selectedTabIndex != index) {
+      this.state.props.onIndexChange && this.state.props.onIndexChange(index);
+    }
+  }
+  setPosition() {
+    var _this$headersLayout$s, _this$headerPanelLayo, _this$headerPanelLayo2;
+    const selectedTabIndex = this.state.props.selectedTabIndex;
+    let toIndicatorPosition = 0;
+    let toIndicatorWidth = ((_this$headersLayout$s = this.headersLayout[selectedTabIndex]) === null || _this$headersLayout$s === void 0 ? void 0 : _this$headersLayout$s.width) || 0;
+    let toHeaderScrollPosition = this.headerScrollPositionValue;
+    let totalWidth = 0;
+    if (this.state.props.data.length !== this.headersLayout.length) {
+      return;
+    }
+    this.headersLayout.forEach((p, i) => {
+      if (i < selectedTabIndex) {
+        toIndicatorPosition += p.width;
+      }
+      totalWidth += p.width;
+    });
+    toHeaderScrollPosition = -1 * (toIndicatorPosition - (((_this$headerPanelLayo = this.headerPanelLayout) === null || _this$headerPanelLayo === void 0 ? void 0 : _this$headerPanelLayo.width) || 0) / 2 + toIndicatorWidth / 2);
+    const minScrollPosition = -1 * (totalWidth - (((_this$headerPanelLayo2 = this.headerPanelLayout) === null || _this$headerPanelLayo2 === void 0 ? void 0 : _this$headerPanelLayo2.width) || 0));
+    const maxScrollPosition = 0;
+    toHeaderScrollPosition = Math.max(minScrollPosition, toHeaderScrollPosition);
+    toHeaderScrollPosition = Math.min(maxScrollPosition, toHeaderScrollPosition);
+    let positionIndicator = toIndicatorPosition - (100 - toIndicatorWidth) / 2;
+    let position = this.isRTL ? -positionIndicator : positionIndicator;
+    Animated.parallel([Animated.timing(this.headerScrollPosition, {
+      useNativeDriver: true,
+      toValue: toHeaderScrollPosition,
+      duration: 200,
+      easing: Easing.linear
+    }), Animated.timing(this.indicatorWidth, {
+      useNativeDriver: true,
+      toValue: toIndicatorWidth / 100,
+      duration: 200,
+      easing: Easing.linear
+    }), Animated.timing(this.reverseIndicatorWidth, {
+      useNativeDriver: true,
+      toValue: toIndicatorWidth ? 100 / toIndicatorWidth : 0,
+      duration: 200,
+      easing: Easing.linear
+    }), Animated.timing(this.indicatorPosition, {
+      useNativeDriver: true,
+      toValue: position,
+      duration: 200,
+      easing: Easing.linear
+    })]).start();
+  }
+  renderSkeleton(props) {
+    return /*#__PURE__*/React.createElement(Animated.View, {
+      style: {
+        transform: [{
+          translateX: this.headerScrollPosition
+        }]
+      },
+      onLayout: this.setHeaderPanelPositon.bind(this)
+    }, /*#__PURE__*/React.createElement(View, {
+      style: this.styles.root
+    }, this.props.data.map((header, i) => {
+      var _this$styles$root, _this$styles$root2, _this$styles$activeHe;
+      const isSelected = i === this.props.selectedTabIndex;
+      return /*#__PURE__*/React.createElement(Tappable, {
+        onTap: this.onTabSelection.bind(this, i),
+        key: header.key,
+        styles: {
+          flex: 1
+        }
+      }, /*#__PURE__*/React.createElement(View, {
+        onLayout: this.setHeaderPositon.bind(this, i),
+        style: [this.styles.header, isSelected ? this.styles.activeHeader : null]
+      }, createSkeleton(this.theme, {
+        root: {
+          borderRadius: 4
+        }
+      }, {
+        ...this.styles.root,
+        width: ((_this$styles$root = this.styles.root) === null || _this$styles$root === void 0 ? void 0 : _this$styles$root.width) || "80%",
+        height: ((_this$styles$root2 = this.styles.root) === null || _this$styles$root2 === void 0 ? void 0 : _this$styles$root2.height) || ((_this$styles$activeHe = this.styles.activeHeaderText) === null || _this$styles$activeHe === void 0 ? void 0 : _this$styles$activeHe.fontSize) || 16
+      })));
+    })), /*#__PURE__*/React.createElement(Animated.View, {
+      style: [this.styles.activeIndicator, {
+        transform: [{
+          translateX: this.indicatorPosition
+        }, {
+          scaleX: this.indicatorWidth
+        }]
+      }]
+    }));
+  }
+  renderWidget(props) {
+    this.setPosition();
+    const arrowIndicator = this.styles.arrowIndicator;
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        overflow: 'hidden',
+        zIndex: 16
+      }
+    }, /*#__PURE__*/React.createElement(Animated.View, {
+      style: {
+        transform: [{
+          translateX: this.headerScrollPosition
+        }]
+      },
+      onLayout: this.setHeaderPanelPositon.bind(this)
+    }, /*#__PURE__*/React.createElement(View, {
+      style: this.styles.root
+    }, this._background, props.data.map((header, i) => {
+      const isSelected = i === props.selectedTabIndex;
+      return /*#__PURE__*/React.createElement(Tappable, _extends({
+        onTap: this.onTabSelection.bind(this, i)
+      }, this.getTestPropsForAction(i + ''), {
+        key: header.key,
+        styles: this.styles.header.flexGrow ? {
+          flexGrow: this.styles.header.flexGrow
+        } : null
+      }), /*#__PURE__*/React.createElement(View, {
+        onLayout: this.setHeaderPositon.bind(this, i)
+      }, /*#__PURE__*/React.createElement(View, {
+        style: [this.styles.header, {
+          flexGrow: undefined
+        }, isSelected ? this.styles.activeHeader : null]
+      }, /*#__PURE__*/React.createElement(Text, _extends({
+        numberOfLines: 1,
+        style: [this.styles.headerText, isSelected ? this.styles.activeHeaderText : null]
+      }, this.getTestPropsForLabel(i + '_title')), header.title))));
+    })), /*#__PURE__*/React.createElement(Animated.View, {
+      style: [this.styles.activeIndicator, {
+        transform: [{
+          translateX: this.indicatorPosition
+        }, {
+          scaleX: this.indicatorWidth
+        }]
+      }]
+    }, /*#__PURE__*/React.createElement(Animated.View, {
+      style: [{
+        transform: [{
+          scaleX: this.reverseIndicatorWidth
+        }]
+      }, this.styles.arrowIndicator]
+    }, arrowIndicator.backgroundImage ? /*#__PURE__*/React.createElement(BackgroundComponent, {
+      image: arrowIndicator.backgroundImage,
+      position: arrowIndicator.backgroundPosition,
+      size: arrowIndicator.backgroundSize,
+      repeat: arrowIndicator.backgroundRepeat,
+      resizeMode: arrowIndicator.backgroundResizeMode,
+      style: {
+        borderRadius: this.styles.root.borderRadius
+      }
+    }) : null, /*#__PURE__*/React.createElement(View, {
+      style: this.styles.arrowIndicatorDot
+    })))));
+  }
+}
+//# sourceMappingURL=tabheader.component.js.map