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

package/components/chart/stack-chart/stack-chart.component.js

@@ -0,0 +1,348 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import { View, Platform } from 'react-native';
+import { Svg } from 'react-native-svg';
+import { VictoryStack, VictoryBar, VictoryChart, VictoryPie, VictoryLegend, VictoryAxis } from 'victory-native';
+import { Axis, Scale } from 'victory-core';
+import { orderBy, cloneDeep, findIndex, isString } from 'lodash';
+import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
+import WmStackChartProps from './stack-chart.props';
+import { DEFAULT_CLASS } from './stack-chart.styles';
+import { BaseChartComponent, BaseChartComponentState } from '@wavemaker/app-rn-runtime/components/chart/basechart.component';
+export class WmStackChartState extends BaseChartComponentState {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "chartWidth", 0);
+  }
+}
+export default class WmStackChart extends BaseChartComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmStackChartProps(), new WmStackChartState());
+    _defineProperty(this, "onViewLayoutChange", e => {
+      let viewWidth = e.nativeEvent.layout.width;
+      this.updateState({
+        chartWidth: viewWidth
+      });
+    });
+  }
+  componentDidMount() {
+    super.componentDidMount();
+    this.setHeightWidthOnChart();
+  }
+  getNegativeValuesArray() {
+    let negativeValuesArray = cloneDeep(this.state.data[0]).filter(d => d.y < 0);
+    negativeValuesArray = orderBy(negativeValuesArray, 'y', 'desc');
+    return negativeValuesArray;
+  }
+  getPositiveValuesArray() {
+    let positiveValuesArray = cloneDeep(this.state.data[0]).filter(d => d.y > 0);
+    positiveValuesArray = orderBy(positiveValuesArray, 'y', 'asc');
+    return positiveValuesArray;
+  }
+  getData() {
+    const negativeValues = cloneDeep(this.getNegativeValuesArray());
+    return negativeValues.concat(cloneDeep(this.getPositiveValuesArray()));
+  }
+  updateColors() {
+    if (this.state.colors.length === 1) {
+      return this.state.colors[0];
+    } else {
+      let colorCodes = cloneDeep(this.state.colors);
+      if (this.state.data.length > 0) {
+        const orderedData = this.getData();
+        this.state.data[0].map((d, i) => {
+          let index = findIndex(orderedData, d);
+          colorCodes[index] = this.state.colors[i];
+        });
+        return colorCodes;
+      }
+    }
+  }
+  getLegendColors() {
+    if (this.state.colors.length === 1) {
+      return this.state.colors[0];
+    } else {
+      let colorCodes = cloneDeep(this.state.colors);
+      if (this.state.data.length > 0) {
+        const orderedData = orderBy(this.state.data[0], 'y', 'asc');
+        ;
+        this.state.data[0].map((d, i) => {
+          let index = findIndex(orderedData, d);
+          colorCodes[index] = this.state.colors[i];
+        });
+        return colorCodes;
+      }
+    }
+  }
+  getBarChart(props) {
+    if (this.state.data.length > 0) {
+      const negativeValues = cloneDeep(this.getNegativeValuesArray());
+      const data = this.getData();
+      let currentValue = 0;
+      const yValues = data.map(d => d.y);
+      const minValue = Math.min(...yValues);
+      const maxValue = Math.max(...yValues);
+      return data.map((d, i) => {
+        let cornerRadius;
+        if (d.y === minValue) {
+          cornerRadius = d.y > 0 ? {
+            bottom: 10
+          } : {
+            top: 10
+          };
+        } else if (d.y === maxValue) {
+          cornerRadius = d.y > 0 ? {
+            top: 10
+          } : {
+            bottom: 10
+          };
+        } else {
+          cornerRadius = 0;
+        }
+        let d1 = [];
+        d.index = d.x;
+        d.x = 0;
+        d.y = d.y - currentValue;
+        d1.push(d);
+        currentValue = d.y < 0 && i === negativeValues.length - 1 ? 0 : d.y + currentValue;
+        return /*#__PURE__*/React.createElement(VictoryBar, {
+          key: props.name + '_' + i,
+          cornerRadius: cornerRadius,
+          barWidth: this.state.props.thickness,
+          data: d1,
+          events: [{
+            target: 'data',
+            eventHandlers: Platform.OS === 'web' ? {
+              onClick: this.onSelect.bind(this)
+            } : {
+              onPress: this.onSelect.bind(this)
+            }
+          }]
+        });
+      });
+    }
+  }
+  getColorCodes() {
+    const colors = cloneDeep(this.updateColors());
+    return isString(colors) ? [colors] : colors.reverse();
+  }
+  getArcChart(props) {
+    if (this.state.data.length > 0) {
+      let data = this.getData();
+      let negativeValues = cloneDeep(this.getNegativeValuesArray());
+      let currentValue = 0;
+      let prevValue = 0;
+      data = data.map((d, i) => {
+        d.y = d.y - currentValue;
+        prevValue = d.y;
+        d.y = Math.abs(d.y);
+        d.index = d.x;
+        currentValue = prevValue < 0 && i === negativeValues.length - 1 ? 0 : prevValue + currentValue;
+        return d;
+      });
+      data.reverse();
+      if (negativeValues.length > 1) {
+        const portionToReverse = data.slice(-negativeValues.length);
+        const reversedPortion = portionToReverse.reverse();
+        data = [...data.slice(0, -negativeValues.length), ...reversedPortion];
+      }
+      const radius = Math.min(this.state.chartWidth / 2, this.state.chartHeight - 50);
+      const angles = data.map((d, i) => {
+        let total = data.reduce((sum, item) => sum + item.y, 0);
+        return Math.round(d.y / total * 160);
+      });
+      let startAngle = 80;
+      return data.map((d, i) => {
+        let d1 = [];
+        d1.push(d);
+        if (i != 0) {
+          startAngle = startAngle - angles[i - 1] + angles[i - 1] / 10;
+        }
+        return /*#__PURE__*/React.createElement(VictoryPie, {
+          key: props.name + '_' + i,
+          radius: radius,
+          colorScale: [this.state.colors[d.index], '#fff0'],
+          startAngle: angles ? startAngle : -80,
+          endAngle: -80,
+          cornerRadius: 100,
+          standalone: false,
+          origin: {
+            x: this.state.chartWidth / 2,
+            y: this.state.chartHeight - 50
+          },
+          innerRadius: radius - this.state.props.thickness,
+          labels: [],
+          events: [{
+            target: 'data',
+            eventHandlers: Platform.OS == "web" ? {
+              onClick: this.onSelect.bind(this)
+            } : {
+              onPress: this.onSelect.bind(this)
+            }
+          }],
+          data: d1
+        });
+      });
+    }
+  }
+  getArcAxis() {
+    const ticks = this.getTickValues();
+    const radius = Math.min(this.state.chartWidth / 2, this.state.chartHeight - 50);
+    const axisData = [];
+    ticks.forEach((d, i) => {
+      axisData.push({
+        x: `${this.state.props.yunits}${d}`,
+        y: 1
+      });
+    });
+    return /*#__PURE__*/React.createElement(VictoryPie, {
+      style: {
+        labels: {
+          fontSize: 12,
+          paddingLeft: 50,
+          paddingRight: 80
+        }
+      },
+      startAngle: -90,
+      endAngle: 90,
+      standalone: false,
+      colorScale: ['#fff0'],
+      origin: {
+        x: this.state.chartWidth / 2 - 5,
+        y: this.state.chartHeight - 50
+      },
+      labelRadius: radius - this.state.props.thickness - 20,
+      data: axisData
+    });
+  }
+  getTickValues() {
+    let ticks = [];
+    if (this.state.data[0].length) {
+      let data = cloneDeep(this.state.data[0]);
+      const maxValue = Math.max(...data.map(o => o.y ? o.y : 0));
+      const minValue = Math.min(...data.map(o => o.y ? o.y : 0));
+      const scale = Scale.getBaseScale({}, 'x');
+      scale.domain([minValue > 0 ? 0 : minValue, maxValue]);
+      ticks = Axis.getTicks({}, scale);
+      ticks[ticks.length - 1] = maxValue;
+      if (minValue < 0) {
+        if (ticks[0] === 0) {
+          ticks.unshift(minValue);
+        } else {
+          ticks[0] = minValue;
+        }
+      } else {
+        ticks[0] = this.state.props.minvalue;
+      }
+    }
+    return ticks;
+  }
+  onSelect(event, data) {
+    let props = this.state.props;
+    let index = data.datum.index;
+    let yaxisKey = props.yaxisdatakey;
+    let label = this.state.xaxisDatakeyArr[index];
+    let value = props.dataset[index][yaxisKey];
+    let selectedItem = props.dataset[index];
+    let selectedChartItem = [{
+      series: 0,
+      x: index,
+      y: value,
+      _dataObj: selectedItem
+    }, index];
+    const nativeEvent = event.nativeEvent;
+    this.setTooltipPosition(nativeEvent);
+    this.updateState({
+      tooltipXaxis: label,
+      tooltipYaxis: value,
+      isTooltipOpen: true,
+      selectedItem: {
+        ...selectedItem,
+        index: index
+      }
+    });
+    this.invokeEventCallback('onSelect', [event.nativeEvent, this.proxy, selectedItem, selectedChartItem]);
+  }
+  renderWidget(props) {
+    this.invokeEventCallback('onBeforerender', [this.proxy, null]);
+    if (!this.state.data.length) {
+      return null;
+    }
+    let mindomain = {
+      x: this.props.xdomain === 'Min' ? this.state.chartMinX : undefined,
+      y: this.props.ydomain === 'Min' ? this.state.chartMinY : undefined
+    };
+    return /*#__PURE__*/React.createElement(View, _extends({}, getAccessibilityProps(AccessibilityWidgetType.LINECHART, props), {
+      style: this.styles.root,
+      onLayout: this.onViewLayoutChange
+    }), this.getTooltip(), props.viewtype === 'Bar' ? /*#__PURE__*/React.createElement(VictoryChart, {
+      theme: this.state.theme,
+      minDomain: mindomain,
+      height: this.styles.root.height,
+      width: this.styles.root.width || this.state.chartWidth || 200,
+      padding: {
+        top: props.offsettop,
+        bottom: props.offsetbottom,
+        left: props.offsetleft,
+        right: props.offsetright
+      }
+    }, /*#__PURE__*/React.createElement(VictoryLegend, {
+      name: 'legend',
+      containerComponent: /*#__PURE__*/React.createElement(Svg, null),
+      style: {
+        title: {
+          fontFamily: "'Helvetica Neue', 'Helvetica', sans-serif",
+          fontSize: 18
+        }
+      },
+      title: [props.title, props.subheading],
+      orientation: "horizontal",
+      gutter: 20,
+      data: [],
+      theme: this.state.theme
+    }), this.getLegendView(this.getLegendColors()), /*#__PURE__*/React.createElement(VictoryAxis, {
+      crossAxis: true,
+      style: {
+        tickLabels: {
+          fill: this.state.props.showyaxis === false ? 'transparent' : '#000000',
+          fontSize: 12,
+          padding: this.state.props.thickness / 2 + 5
+        },
+        axisLabel: {
+          padding: 15 + this.state.props.thickness / 2
+        },
+        grid: {
+          stroke: 'none'
+        },
+        axis: {
+          stroke: 'none'
+        },
+        ticks: {
+          stroke: 'none'
+        }
+      },
+      theme: this.state.theme,
+      tickValues: this.getTickValues(),
+      tickFormat: t => this.state.props.yunits ? `${this.abbreviateNumber(t)}${this.state.props.yunits}` : `${this.abbreviateNumber(t)}`,
+      dependentAxis: true
+    }), /*#__PURE__*/React.createElement(VictoryStack, {
+      colorScale: this.updateColors(),
+      horizontal: true
+    }, this.getBarChart(props))) : /*#__PURE__*/React.createElement(Svg, {
+      width: this.state.chartWidth,
+      height: this.state.chartHeight
+    }, /*#__PURE__*/React.createElement(VictoryLegend, {
+      name: 'legend',
+      containerComponent: /*#__PURE__*/React.createElement(Svg, null),
+      title: [props.title, props.subheading],
+      orientation: "horizontal",
+      gutter: 20,
+      data: [],
+      theme: this.state.theme
+    }), this.getArcChart(props), this.getArcAxis()));
+  }
+}
+//# sourceMappingURL=stack-chart.component.js.map

package/components/chart/stack-chart/stack-chart.props.js

@@ -0,0 +1,17 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import BaseChartComponentProps from '@wavemaker/app-rn-runtime/components/chart/basechart.props';
+export default class WmStackChartProps extends BaseChartComponentProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "viewtype", 'Bar');
+    _defineProperty(this, "showlegend", 'left');
+    _defineProperty(this, "thickness", 30);
+    _defineProperty(this, "offsetleft", 25);
+    _defineProperty(this, "offsetright", 35);
+    _defineProperty(this, "onSelect", void 0);
+    _defineProperty(this, "minvalue", 0);
+  }
+}
+//# sourceMappingURL=stack-chart.props.js.map

package/components/container/accordion/accordion.component.js

@@ -0,0 +1,190 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+import { Badge } from 'react-native-paper';
+import { isArray } from 'lodash';
+import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
+import WmAccordionProps from './accordion.props';
+import { DEFAULT_CLASS } from './accordion.styles';
+import WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';
+import { isDefined } from '@wavemaker/app-rn-runtime/core/utils';
+import { createSkeleton } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.component';
+import WmLabel from '@wavemaker/app-rn-runtime/components/basic/label/label.component';
+export class WmAccordionState extends BaseComponentState {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "lastExpandedIndex", -1);
+    _defineProperty(this, "isExpanded", []);
+  }
+}
+export default class WmAccordion extends BaseComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmAccordionProps(), new WmAccordionState());
+    _defineProperty(this, "accordionPanes", []);
+    _defineProperty(this, "newIndex", 0);
+  }
+  addAccordionPane(accordionPane) {
+    const i = this.accordionPanes.findIndex(t => {
+      return t.paneId === accordionPane.paneId;
+    });
+    if (i >= 0) {
+      this.accordionPanes[i] = accordionPane;
+    } else {
+      accordionPane.paneId = `accordionPane${this.newIndex++}`;
+      this.accordionPanes.push(accordionPane);
+    }
+    this.toggle(this.state.props.defaultpaneindex + 1);
+  }
+  removeAccordionPane(accordionPane) {
+    const index = this.accordionPanes.findIndex(t => t.paneId === accordionPane.paneId);
+    if (index >= 0) {
+      this.accordionPanes.splice(index, 1);
+      this.newIndex--;
+    }
+  }
+  expand(accordionName) {
+    const i = this.accordionPanes.findIndex(t => t.props.name === accordionName);
+    this.toggle(i + 1, true);
+  }
+  collapse(accordionName) {
+    const i = this.accordionPanes.findIndex(t => t.props.name === accordionName);
+    this.toggle(i + 1, false);
+  }
+  expandCollapseIcon(item, index, showBadge = true, showIcon = true, useChevron = true, isExpanded = false) {
+    const widgetProps = item.props;
+    //@ts-ignore
+    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']]
+    }, this.getTestProps('badge' + index)), widgetProps.badgevalue) : null;
+    let iconclass = null;
+    if (useChevron) {
+      iconclass = isExpanded ? 'wi wi-chevron-down' : 'wi wi-chevron-up';
+    } else {
+      iconclass = isExpanded ? 'wi wi-minus' : 'wi wi-plus';
+    }
+    return /*#__PURE__*/React.createElement(View, {
+      style: {
+        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
+    }) : null);
+  }
+  renderAccordionpane(item, index, accordionpanes = []) {
+    const showIconOnLeft = this.styles.leftToggleIcon.root.width !== undefined;
+    const isExpanded = this.state.isExpanded[index];
+    const titleIconStyles = this.theme.mergeStyle(this.styles.icon, this.styles.titleIcon);
+    return item.props.show != false ? /*#__PURE__*/React.createElement(View, {
+      style: this.styles.pane,
+      key: item.props.title
+    }, /*#__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, index, false, showIconOnLeft, true, isExpanded), item.props.iconclass ? /*#__PURE__*/React.createElement(WmIcon, {
+      id: this.getTestId('icon'),
+      styles: titleIconStyles,
+      name: item.props.name + '_icon',
+      iconclass: item.props.iconclass
+    }) : null, /*#__PURE__*/React.createElement(View, {
+      style: {
+        flexDirection: 'column',
+        flex: 1,
+        justifyContent: 'center'
+      }
+    }, this._showSkeleton ? /*#__PURE__*/React.createElement(WmLabel, {
+      showskeleton: true,
+      styles: {
+        root: [this.styles.text, this.styles.heading]
+      },
+      caption: isDefined(item.props.title) ? item.props.title : 'Title'
+    }) : /*#__PURE__*/React.createElement(Text, _extends({
+      style: [this.styles.text, this.styles.heading, isExpanded ? this.styles.activeHeaderTitle : {}]
+    }, this.getTestPropsForAction(`header${index}_title`), {
+      accessibilityRole: "header"
+    }), isDefined(item.props.title) ? item.props.title : 'Title'), item.props.description ? this._showSkeleton ? /*#__PURE__*/React.createElement(WmLabel, {
+      styles: {
+        root: this.styles.subheading
+      },
+      showskeleton: true,
+      caption: item.props.description
+    }) : /*#__PURE__*/React.createElement(Text, _extends({
+      style: this.styles.subheading
+    }, this.getTestPropsForAction(`header${index}_description`)), item.props.description) : null), this.expandCollapseIcon(item, index, true, !showIconOnLeft, true, isExpanded)), item) : null;
+  }
+  toggle(index, expand = true) {
+    let expandedId = expand ? index : -1;
+    let collapseId = expand ? -1 : index;
+    const expandedPane = expandedId ? this.accordionPanes[expandedId - 1] : null;
+    if (expand && this.state.isExpanded[expandedId - 1] && !(expandedPane !== null && expandedPane !== void 0 && expandedPane.state.collapsed) || !expand && this.state.isExpanded[collapseId - 1] === false && expandedPane !== null && expandedPane !== void 0 && expandedPane.state.collapsed) {
+      return;
+    }
+    if (collapseId < 0 && this.state.props.closeothers) {
+      collapseId = this.state.lastExpandedIndex;
+    }
+    const collapsedPane = this.accordionPanes[collapseId - 1];
+    collapsedPane === null || collapsedPane === void 0 || collapsedPane.hide();
+    Promise.resolve().then(() => {
+      expandedPane === null || expandedPane === void 0 || expandedPane.show();
+      this.setState(state => {
+        if (collapseId > 0 && collapsedPane) {
+          state.isExpanded[collapseId - 1] = false;
+        }
+        if (expandedId > 0 && expandedPane) {
+          state.isExpanded[expandedId - 1] = true;
+        }
+        return {
+          lastExpandedIndex: expandedId,
+          isExpanded: [...state.isExpanded]
+        };
+      }, () => {
+        this.invokeEventCallback('onChange', [{}, this.proxy, expandedId - 1, collapseId ? collapseId - 1 : null, expandedPane && expandedPane.props.name, collapsedPane && collapsedPane.props.name]);
+      });
+    }, () => {});
+  }
+  componentDidMount() {
+    super.componentDidMount();
+    this.toggle(this.state.props.defaultpaneindex + 1);
+  }
+  getBackground() {
+    return this._showSkeleton ? null : this._background;
+  }
+  renderSkeleton(props) {
+    const accordionpanes = props.children;
+    if (!props.showskeletonchildren) {
+      var _this$props;
+      const skeletonStyles = ((_this$props = this.props) === null || _this$props === void 0 || (_this$props = _this$props.styles) === null || _this$props === void 0 ? void 0 : _this$props.skeleton) || {
+        root: {},
+        text: {}
+      };
+      return createSkeleton(this.theme, skeletonStyles, {
+        ...this.styles.root
+      }, /*#__PURE__*/React.createElement(View, {
+        style: [this.styles.root, {
+          opacity: 0
+        }]
+      }, accordionpanes ? isArray(accordionpanes) && accordionpanes.length ? accordionpanes.map((item, index) => this.renderAccordionpane(item, index, accordionpanes)) : this.renderAccordionpane(accordionpanes, 0) : null));
+    }
+    return null;
+  }
+  renderWidget(props) {
+    var _this$styles$skeleton;
+    const accordionpanes = props.children;
+    const expandedId = this.state.lastExpandedIndex || 0;
+    const styles = this._showSkeleton ? {
+      ...this.styles.root,
+      ...((_this$styles$skeleton = this.styles.skeleton) === null || _this$styles$skeleton === void 0 ? void 0 : _this$styles$skeleton.root)
+    } : this.styles.root;
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles
+    }, this.getBackground(), accordionpanes ? isArray(accordionpanes) && accordionpanes.length ? accordionpanes.map((item, index) => this.renderAccordionpane(item, index, accordionpanes)) : this.renderAccordionpane(accordionpanes, 0) : null);
+  }
+}
+//# sourceMappingURL=accordion.component.js.map

package/components/container/accordion/accordion.props.js

@@ -0,0 +1,14 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';
+export default class WmAccordionProps extends BaseProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "animation", 'fadeInDown');
+    _defineProperty(this, "children", void 0);
+    _defineProperty(this, "defaultpaneindex", 0);
+    _defineProperty(this, "closeothers", true);
+  }
+}
+//# sourceMappingURL=accordion.props.js.map

package/components/container/accordion/accordionpane/accordionpane.component.js

@@ -0,0 +1,85 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import { 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';
+import { CollapsiblePane } from '../../panel/collapsible-pane.component';
+export class WmAccordionpaneState extends BaseComponentState {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "isPartialLoaded", false);
+    _defineProperty(this, "collapsed", true);
+  }
+}
+export default class WmAccordionpane extends BaseComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmAccordionpaneProps(), new WmAccordionpaneState());
+    _defineProperty(this, "paneId", "");
+  }
+  isCollapsed() {
+    return this.state.collapsed;
+  }
+  show() {
+    this.updateState({
+      collapsed: false
+    });
+    this.invokeEventCallback('onExpand', [null, this.proxy]);
+  }
+  hide() {
+    this.updateState({
+      collapsed: true
+    });
+    this.invokeEventCallback('onCollapse', [null, this.proxy]);
+  }
+  expand() {
+    this.parent.expand(this.props.name || '');
+  }
+  collapse() {
+    this.parent.expand(this.props.name || '');
+  }
+  componentDidMount() {
+    const accordion = this.parent;
+    // When skeleton is enabled in the accordion component, the parent would be WMSkeleton which doesnot have addAccordionPane function
+    if (accordion.addAccordionPane) {
+      accordion.addAccordionPane(this);
+    }
+    super.componentDidMount();
+  }
+  componentWillUnmount() {
+    const accordion = this.parent;
+    if (accordion.removeAccordionPane) {
+      accordion.removeAccordionPane(this);
+    }
+  }
+  onPartialLoad() {
+    this.invokeEventCallback('onLoad', [this]);
+  }
+  renderContent(props) {
+    if (props.renderPartial) {
+      if (!this.state.isPartialLoaded) {
+        setTimeout(() => {
+          this.updateState({
+            isPartialLoaded: true
+          });
+        });
+      }
+      return props.renderPartial(props, this.onPartialLoad.bind(this));
+    }
+    return props.children;
+  }
+  renderWidget(props) {
+    return isWebPreviewMode() ? /*#__PURE__*/React.createElement(View, {
+      style: this.state.collapsed ? {
+        maxHeight: 0,
+        overflow: 'hidden'
+      } : {}
+    }, this._background, this.renderContent(props)) : /*#__PURE__*/React.createElement(CollapsiblePane, {
+      close: this.state.collapsed
+    }, this._background, this.renderContent(props));
+  }
+}
+//# sourceMappingURL=accordionpane.component.js.map

package/components/container/accordion/accordionpane/accordionpane.props.js

@@ -0,0 +1,17 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';
+export default class WmAccordionpaneProps extends BaseProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "children", void 0);
+    _defineProperty(this, "iconclass", null);
+    _defineProperty(this, "title", 'Title');
+    _defineProperty(this, "renderPartial", void 0);
+    _defineProperty(this, "subheading", null);
+    _defineProperty(this, "badgevalue", null);
+    _defineProperty(this, "badgetype", null);
+  }
+}
+//# sourceMappingURL=accordionpane.props.js.map