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

package/components/container/wizard/wizard.component.js

@@ -0,0 +1,293 @@
+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, Platform, TouchableWithoutFeedback } from 'react-native';
+import { isArray, merge } from 'lodash';
+import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
+import WmWizardProps from './wizard.props';
+import { DEFAULT_CLASS } from './wizard.styles';
+import WmButton from '@wavemaker/app-rn-runtime/components/basic/button/button.component';
+import WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';
+import WmAnchor from '@wavemaker/app-rn-runtime/components/basic/anchor/anchor.component';
+import WmProgressCircle from '@wavemaker/app-rn-runtime/components/basic/progress-circle/progress-circle.component';
+import WmPopover from '@wavemaker/app-rn-runtime/components/navigation/popover/popover.component';
+import WmLabel from '@wavemaker/app-rn-runtime/components/basic/label/label.component';
+export class WmWizardState extends BaseComponentState {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "currentStep", 0);
+    _defineProperty(this, "isDone", false);
+  }
+}
+export default class WmWizard extends BaseComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmWizardProps());
+    _defineProperty(this, "numberOfSteps", null);
+    _defineProperty(this, "steps", []);
+    _defineProperty(this, "popOverRef", null);
+    _defineProperty(this, "listener", {
+      onComponentInit: c => {
+        if (c instanceof WmPopover) {
+          this.popOverRef = c;
+        }
+      }
+    });
+    const steps = props.children;
+    let defaultStepIndex = 0;
+    if (isArray(steps) && props.defaultstep) {
+      steps.map((item, index) => {
+        if (props.defaultstep === item.props.name) {
+          defaultStepIndex = index;
+        }
+      });
+    }
+    this.updateCurrentStep(defaultStepIndex);
+  }
+  addWizardStep(step) {
+    this.steps[step.props.index] = step;
+    this.forceUpdate();
+  }
+  componentDidMount() {
+    super.componentDidMount();
+    this.showActiveStep();
+  }
+  showActiveStep() {
+    var _this$steps$this$stat;
+    (_this$steps$this$stat = this.steps[this.state.currentStep]) === null || _this$steps$this$stat === void 0 ? void 0 : _this$steps$this$stat.setActive();
+  }
+  updateCurrentStep(index) {
+    var _this$steps$this$stat2;
+    let isDone = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    const lastStep = this.state.currentStep;
+    (_this$steps$this$stat2 = this.steps[this.state.currentStep]) === null || _this$steps$this$stat2 === void 0 ? void 0 : _this$steps$this$stat2.setInActive();
+    this.updateState({
+      currentStep: index,
+      isDone: isDone
+    }, () => {
+      this.showActiveStep();
+      if (lastStep !== index) {
+        this.invokeEventCallback('onChange', [null, this.proxy, index + 1, lastStep + 1]);
+      }
+    });
+  }
+  getStepStyle(index) {
+    const style = [this.styles.step];
+    if (this.state.isDone || index < this.state.currentStep) {
+      style.push(this.styles.doneStep);
+    } else if (this.state.currentStep === index) {
+      style.push(this.styles.activeStep);
+    }
+    return style;
+  }
+  renderMenuPopover() {
+    const menuDataset = this.props.getmenudataexpression || ((item, index) => '');
+    const Labels = this.steps.map(step => step.state.props.title);
+    return /*#__PURE__*/React.createElement(WmPopover, {
+      id: this.getTestId('menu'),
+      styles: this.styles.popover,
+      contentanimation: 'slideInDown',
+      caption: '',
+      popoverheight: this.styles.popover.popover.height || null,
+      popoverwidth: this.styles.popover.popover.width || null,
+      listener: this.listener,
+      iconclass: this.props.popovericonclass || 'fa fa-caret-down',
+      iconposition: "right",
+      type: "dropdown"
+    }, /*#__PURE__*/React.createElement(View, {
+      style: this.styles.popover.popover
+    }, Labels.map((item, index) => {
+      const currentMenuItem = index == this.state.currentStep;
+      const caption = menuDataset({
+        "count": this.steps.length
+      }, index);
+      return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+        key: 'wizard_menu_item_' + index,
+        onPress: () => {
+          this.popOverRef.hide();
+        }
+      }, /*#__PURE__*/React.createElement(View, {
+        style: [this.styles.stepMenu, currentMenuItem ? this.styles.activeStepMenu : {}]
+      }, /*#__PURE__*/React.createElement(WmIcon, {
+        caption: caption,
+        iconclass: currentMenuItem ? "wi wi-radio-button-checked" : 'wi wi-radio-button-unchecked',
+        styles: currentMenuItem ? this.styles.stepMenuActiveIcon : this.styles.stepMenuIcon
+      }), /*#__PURE__*/React.createElement(WmLabel, {
+        caption: item,
+        styles: currentMenuItem ? this.styles.stepMenuActiveLabel : this.styles.stepMenuLabel
+      })));
+    })));
+  }
+  renderProgressCircleHeader(item, index) {
+    const progressTitle = this.props.progresstitle || index + 1 + '/' + this.steps.length;
+    return /*#__PURE__*/React.createElement(View, {
+      style: [this.styles.headerWrapper],
+      key: index + 1
+    }, /*#__PURE__*/React.createElement(View, {
+      style: this.styles.stepWrapper
+    }, /*#__PURE__*/React.createElement(View, {
+      style: {
+        flex: 1,
+        alignItems: 'flex-start',
+        justifyContent: 'center',
+        flexDirection: 'row'
+      }
+    }, /*#__PURE__*/React.createElement(WmProgressCircle, {
+      minvalue: 0,
+      maxvalue: this.steps.length,
+      datavalue: index + 1,
+      captionplacement: 'inside',
+      type: this.props.progresstype,
+      title: progressTitle,
+      subtitle: '',
+      styles: this.styles.progressCircle
+    })), /*#__PURE__*/React.createElement(View, {
+      style: {
+        flex: 2,
+        justifyContent: 'center',
+        flexDirection: 'column'
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: this.styles.stepTitle
+    }, item.props.title || 'Step Title'), /*#__PURE__*/React.createElement(Text, {
+      style: this.styles.stepSubTitle
+    }, item.props.subtitle || 'Step Sub Title')), /*#__PURE__*/React.createElement(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        justifyContent: 'flex-end'
+      }
+    }, this.renderMenuPopover())));
+  }
+  renderWizardHeader(item, index) {
+    const isLastStep = index === this.numberOfSteps - 1;
+    const isFirstStep = index === 0;
+    const isActiveStep = index === this.state.currentStep;
+    const isNumberTextLayout = this.state.props.classname === 'number-text-inline';
+    return item.state.props.show != false ? /*#__PURE__*/React.createElement(View, {
+      style: [this.styles.headerWrapper, isNumberTextLayout ? {
+        paddingRight: isActiveStep ? 0 : 5,
+        paddingLeft: index === this.state.currentStep + 1 ? 0 : 5
+      } : {}],
+      key: index + 1
+    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: this.styles.stepWrapper,
+      onPress: this.updateCurrentStep.bind(this, index, false),
+      disabled: index >= this.state.currentStep
+    }, /*#__PURE__*/React.createElement(View, {
+      style: this.getStepStyle(index)
+    }, index >= this.state.currentStep && !this.state.isDone && /*#__PURE__*/React.createElement(Text, {
+      style: isActiveStep ? this.styles.activeStep : this.styles.stepCounter
+    }, index + 1), (index < this.state.currentStep || this.state.isDone) && /*#__PURE__*/React.createElement(WmIcon, {
+      styles: merge({}, this.styles.stepIcon, {
+        icon: {
+          color: this.styles.activeStep.color
+        }
+      }),
+      iconclass: item.state.props.iconclass || 'wm-sl-l sl-check'
+    })), (isNumberTextLayout && isActiveStep || !isNumberTextLayout) && /*#__PURE__*/React.createElement(Text, {
+      style: this.styles.stepTitle
+    }, item.state.props.title || 'Step Title'), this.numberOfSteps > 1 && isActiveStep && /*#__PURE__*/React.createElement(View, {
+      style: [this.styles.numberTextStepConnector, {
+        width: isLastStep ? 0 : 50
+      }]
+    })), this.numberOfSteps > 1 && /*#__PURE__*/React.createElement(View, {
+      style: [this.styles.stepConnector, {
+        width: isFirstStep || isLastStep ? '50%' : '100%',
+        left: Platform.OS == "web" ? !this.isRTL && isFirstStep || this.isRTL && isLastStep ? '50%' : '0%' : isFirstStep ? '50%' : '0%'
+      }]
+    })) : null;
+  }
+  prev() {
+    const index = this.state.currentStep;
+    if (index <= 0) {
+      return;
+    }
+    const currentStep = this.steps[index];
+    if (currentStep.invokePrevCB(index) == false) {
+      return;
+    }
+    this.updateCurrentStep(index - 1);
+  }
+  next(eventName) {
+    const index = this.state.currentStep;
+    if (index >= this.steps.length - 1) {
+      return;
+    }
+    const currentStep = this.steps[index];
+    if (eventName === 'skip') {
+      currentStep.invokeSkipCB(index);
+    } else if (currentStep.invokeNextCB(index) == false) {
+      return;
+    }
+    this.updateCurrentStep(index + 1);
+  }
+  done($event) {
+    if (this.state.currentStep !== this.steps.length - 1) {
+      return;
+    }
+    this.updateState({
+      isDone: true
+    });
+    this.invokeEventCallback('onDone', [$event, this.proxy]);
+  }
+  cancel() {
+    this.invokeEventCallback('onCancel', [null, this.proxy]);
+  }
+  skip() {
+    this.next('skip');
+  }
+  renderWidget(props) {
+    var _this$state$props$cla;
+    this.numberOfSteps = this.steps.length;
+    const activeStep = this.steps[this.state.currentStep];
+    const isSkippable = activeStep && activeStep.state.props.enableskip;
+    const isProgressCircleHeader = (_this$state$props$cla = this.state.props.classname) === null || _this$state$props$cla === void 0 ? void 0 : _this$state$props$cla.includes('progress-circle-header');
+    return /*#__PURE__*/React.createElement(View, {
+      style: this.styles.root
+    }, this._background, /*#__PURE__*/React.createElement(View, {
+      style: this.styles.wizardHeader
+    }, activeStep && isProgressCircleHeader ? this.renderProgressCircleHeader(activeStep, this.state.currentStep) : this.steps ? this.steps.map((step, i) => this.renderWizardHeader(step, i)) : null), /*#__PURE__*/React.createElement(View, {
+      style: this.styles.wizardBody
+    }, props.children), /*#__PURE__*/React.createElement(View, {
+      style: [this.styles.wizardFooter, {
+        flexDirection: props.actionsalignment === 'right' ? 'row-reverse' : 'row'
+      }]
+    }, this.state.currentStep + 1 === this.numberOfSteps && activeStep.state.props.showdone && /*#__PURE__*/React.createElement(WmButton, {
+      iconclass: 'wm-sl-l sl-check',
+      styles: merge({}, this.styles.wizardActions, this.theme.getStyle('btn-default'), this.styles.doneButton),
+      id: this.getTestId('donebtn'),
+      caption: props.donebtnlabel,
+      onTap: this.done.bind(this),
+      disabled: activeStep.state.props.disabledone
+    }), this.state.currentStep + 1 < this.numberOfSteps && activeStep.state.props.shownext && /*#__PURE__*/React.createElement(WmButton, {
+      iconclass: 'wi wi-chevron-right',
+      styles: merge({}, this.styles.wizardActions, this.theme.getStyle('btn-default'), this.styles.nextButton),
+      id: this.getTestId('nextbtn'),
+      iconposition: 'right',
+      caption: props.nextbtnlabel,
+      onTap: this.next.bind(this),
+      disabled: activeStep.state.props.disablenext
+    }), this.state.currentStep > 0 && activeStep.state.props.showprev && /*#__PURE__*/React.createElement(WmButton, {
+      iconclass: 'wi wi-chevron-left',
+      styles: merge({}, this.theme.getStyle('btn-default'), this.styles.wizardActions, this.styles.prevButton),
+      caption: props.previousbtnlabel,
+      id: this.getTestId('prevbtn'),
+      onTap: this.prev.bind(this),
+      disabled: activeStep.state.props.disableprev
+    }), props.cancelable ? /*#__PURE__*/React.createElement(WmButton, {
+      id: this.getTestId('cancelbtn'),
+      caption: props.cancelbtnlabel,
+      styles: merge({}, this.theme.getStyle('btn-default'), this.styles.wizardActions, this.styles.cancelButton),
+      onTap: this.cancel.bind(this)
+    }) : null, isSkippable && /*#__PURE__*/React.createElement(WmAnchor, {
+      iconclass: 'wi wi-chevron-right',
+      iconposition: 'right',
+      caption: 'Skip',
+      id: this.getTestId('skip'),
+      styles: merge({}, this.styles.wizardActions, this.styles.skipLink),
+      onTap: this.skip.bind(this)
+    })));
+  }
+}
+//# sourceMappingURL=wizard.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Text","View","TouchableOpacity","Platform","TouchableWithoutFeedback","isArray","merge","BaseComponent","BaseComponentState","WmWizardProps","DEFAULT_CLASS","WmButton","WmIcon","WmAnchor","WmProgressCircle","WmPopover","WmLabel","WmWizardState","constructor","arguments","_defineProperty","WmWizard","props","onComponentInit","c","popOverRef","steps","children","defaultStepIndex","defaultstep","map","item","index","name","updateCurrentStep","addWizardStep","step","forceUpdate","componentDidMount","showActiveStep","_this$steps$this$stat","state","currentStep","setActive","_this$steps$this$stat2","isDone","length","undefined","lastStep","setInActive","updateState","invokeEventCallback","proxy","getStepStyle","style","styles","push","doneStep","activeStep","renderMenuPopover","menuDataset","getmenudataexpression","Labels","title","createElement","id","getTestId","popover","contentanimation","caption","popoverheight","height","popoverwidth","width","listener","iconclass","popovericonclass","iconposition","type","currentMenuItem","key","onPress","hide","stepMenu","activeStepMenu","stepMenuActiveIcon","stepMenuIcon","stepMenuActiveLabel","stepMenuLabel","renderProgressCircleHeader","progressTitle","progresstitle","headerWrapper","stepWrapper","flex","alignItems","justifyContent","flexDirection","minvalue","maxvalue","datavalue","captionplacement","progresstype","subtitle","progressCircle","stepTitle","stepSubTitle","renderWizardHeader","isLastStep","numberOfSteps","isFirstStep","isActiveStep","isNumberTextLayout","classname","show","paddingRight","paddingLeft","bind","disabled","stepCounter","stepIcon","icon","color","numberTextStepConnector","stepConnector","left","OS","isRTL","prev","invokePrevCB","next","eventName","invokeSkipCB","invokeNextCB","done","$event","cancel","skip","renderWidget","_this$state$props$cla","isSkippable","enableskip","isProgressCircleHeader","includes","root","_background","wizardHeader","i","wizardBody","wizardFooter","actionsalignment","showdone","wizardActions","theme","getStyle","doneButton","donebtnlabel","onTap","disabledone","shownext","nextButton","nextbtnlabel","disablenext","showprev","prevButton","previousbtnlabel","disableprev","cancelable","cancelbtnlabel","cancelButton","skipLink"],"sources":["wizard.component.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View, TouchableOpacity, Platform, TouchableWithoutFeedback } from 'react-native';\nimport { isArray, merge } from 'lodash';\nimport { BaseComponent, BaseComponentState, LifecycleListener } from '@wavemaker/app-rn-runtime/core/base.component';\n\nimport WmWizardProps from './wizard.props';\nimport { DEFAULT_CLASS, WmWizardStyles } from './wizard.styles';\nimport WmButton from '@wavemaker/app-rn-runtime/components/basic/button/button.component';\nimport WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';\nimport WmAnchor from '@wavemaker/app-rn-runtime/components/basic/anchor/anchor.component';\nimport WmWizardstep from './wizardstep/wizardstep.component';\nimport WmProgressCircle from '@wavemaker/app-rn-runtime/components/basic/progress-circle/progress-circle.component';\nimport WmPopover from '@wavemaker/app-rn-runtime/components/navigation/popover/popover.component';\nimport WmLabel from '@wavemaker/app-rn-runtime/components/basic/label/label.component';\n\nexport class WmWizardState extends BaseComponentState<WmWizardProps> {\n  currentStep: number = 0;\n  isDone: boolean = false;\n}\n\nexport default class WmWizard extends BaseComponent<WmWizardProps, WmWizardState, WmWizardStyles> {\n  private numberOfSteps: number = null as any;\n  private steps = [] as WmWizardstep[];\n  private popOverRef: WmPopover = null as any;\n\n  private listener: LifecycleListener = {\n    onComponentInit: (c) => {\n      if (c instanceof WmPopover) {\n        this.popOverRef = c;\n      }\n    }\n  };\n\n  constructor(props: WmWizardProps) {\n    super(props, DEFAULT_CLASS, new WmWizardProps());\n    const steps = props.children;\n    let defaultStepIndex = 0;\n    if (isArray(steps) && props.defaultstep) {\n      steps.map((item: any, index: any) => {\n        if (props.defaultstep === item.props.name) {\n          defaultStepIndex = index;\n        }\n      })\n    }\n    this.updateCurrentStep(defaultStepIndex);\n  }\n\n  addWizardStep(step: WmWizardstep) {\n    this.steps[step.props.index] = step;\n    this.forceUpdate();\n  }\n\n  componentDidMount() {\n    super.componentDidMount();\n    this.showActiveStep();\n  }\n\n  showActiveStep() {\n    this.steps[this.state.currentStep]?.setActive();\n  }\n\n  updateCurrentStep(index: number, isDone = false) {\n    const lastStep = this.state.currentStep;\n    this.steps[this.state.currentStep]?.setInActive();\n    this.updateState({\n      currentStep: index,\n      isDone: isDone\n    } as WmWizardState, () => {\n      this.showActiveStep();\n      if (lastStep !== index) {\n        this.invokeEventCallback('onChange', [null, this.proxy, index + 1, lastStep + 1]);\n      }\n    });\n  }\n\n  getStepStyle(index: number) {\n    const style = [this.styles.step];\n    if (this.state.isDone || index < this.state.currentStep) {\n      style.push(this.styles.doneStep);\n    } else if (this.state.currentStep === index) {\n      style.push(this.styles.activeStep);\n    }\n    return style;\n  }\n\n  renderMenuPopover(){\n    const menuDataset = this.props.getmenudataexpression || ((item: any, index: number) => '') ;\n    const Labels = this.steps.map((step: WmWizardstep) => step.state.props.title);\n    return (\n      <WmPopover\n        id={this.getTestId('menu')}\n        styles={this.styles.popover}\n        contentanimation={'slideInDown'}\n        caption={''}\n        popoverheight={this.styles.popover.popover.height as string | number | undefined || null}\n        popoverwidth={this.styles.popover.popover.width as string | number | undefined || null}\n        listener={this.listener}\n        iconclass={this.props.popovericonclass || 'fa fa-caret-down'}\n        iconposition=\"right\"\n        type='dropdown'>\n          <View style={this.styles.popover.popover}>\n            {Labels.map((item: any, index: number) => {\n              const currentMenuItem = index==this.state.currentStep;\n              const caption = menuDataset({\"count\":this.steps.length}, index); \n              return (\n              <TouchableWithoutFeedback key={'wizard_menu_item_'+index} onPress={()=>{this.popOverRef.hide();}}>\n                <View style={[this.styles.stepMenu, currentMenuItem?this.styles.activeStepMenu:{}]}>\n                  <WmIcon caption={caption} iconclass={currentMenuItem? \"wi wi-radio-button-checked\" : 'wi wi-radio-button-unchecked'} styles={currentMenuItem?this.styles.stepMenuActiveIcon:this.styles.stepMenuIcon}/>\n                  <WmLabel caption={item} styles={currentMenuItem?this.styles.stepMenuActiveLabel:this.styles.stepMenuLabel}/>\n                </View>\n              </TouchableWithoutFeedback>\n            )})}\n          </View>\n      </WmPopover>\n    );\n  }\n\n  renderProgressCircleHeader(item: any, index: number) {\n    const progressTitle = this.props.progresstitle || (index + 1 + '/' + this.steps.length);\n    return (\n      <View style={[this.styles.headerWrapper]} key={index + 1}>\n        <View style={this.styles.stepWrapper}>\n          <View style={{ flex: 1, alignItems: 'flex-start', justifyContent: 'center', flexDirection:'row' }}>\n            <WmProgressCircle minvalue={0} maxvalue={this.steps.length} datavalue={index + 1} captionplacement={'inside'} type={this.props.progresstype} title={progressTitle} subtitle={''} styles={this.styles.progressCircle} />\n          </View>\n        <View style={{ flex: 2, justifyContent: 'center', flexDirection: 'column' }}>\n            <Text style={this.styles.stepTitle}>\n              {item.props.title || 'Step Title'}</Text>\n            <Text style={this.styles.stepSubTitle}>\n              {item.props.subtitle || 'Step Sub Title'}</Text>\n          </View>\n          <View style={{ flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'flex-end' }}>\n            {this.renderMenuPopover()}\n          </View>\n        </View>\n      </View>\n    );\n  }\n\n  renderWizardHeader(item: any, index: number) {\n    const isLastStep = index === this.numberOfSteps - 1;\n    const isFirstStep = index === 0;\n    const isActiveStep = index === this.state.currentStep;\n    const isNumberTextLayout = this.state.props.classname === 'number-text-inline';\n    return item.state.props.show != false ? (\n      <View style={[this.styles.headerWrapper, isNumberTextLayout ?\n        {paddingRight: isActiveStep ? 0 : 5, paddingLeft: index === this.state.currentStep + 1 ? 0 : 5}: {}]} key={index+1}>\n        <TouchableOpacity style={this.styles.stepWrapper}\n                          onPress={this.updateCurrentStep.bind(this, index, false)} disabled={index >= this.state.currentStep}>\n            <View style={this.getStepStyle(index)}>\n              {index >= this.state.currentStep && !this.state.isDone &&\n                <Text style={isActiveStep ? this.styles.activeStep : this.styles.stepCounter}>{index+1}</Text>}\n              {(index < this.state.currentStep || this.state.isDone) &&\n                <WmIcon styles={merge({}, this.styles.stepIcon, {icon: {color: this.styles.activeStep.color}})}\n                        iconclass={item.state.props.iconclass || 'wm-sl-l sl-check'}></WmIcon>}\n            </View>\n            {((isNumberTextLayout && isActiveStep) || !isNumberTextLayout) &&\n              <Text style={this.styles.stepTitle}>\n              {item.state.props.title || 'Step Title'}</Text> }\n            {this.numberOfSteps > 1 && isActiveStep &&\n              <View style={[this.styles.numberTextStepConnector, {width: isLastStep ? 0 : 50}]}></View>}\n        </TouchableOpacity>\n        {this.numberOfSteps > 1 && <View style={[this.styles.stepConnector, { width: isFirstStep || isLastStep ? '50%' : '100%',\n                                                      left: Platform.OS == \"web\"?(!this.isRTL && isFirstStep) || (this.isRTL && isLastStep) ? '50%': '0%': isFirstStep ? '50%': '0%'}]}></View>}\n      </View>\n    ) : null;\n  }\n\n  prev() {\n    const index = this.state.currentStep;\n    if (index <= 0) {\n      return;\n    }\n    const currentStep = this.steps[index];\n    if(currentStep.invokePrevCB(index) == false){\n      return;\n    }\n    this.updateCurrentStep(index - 1);\n  }\n\n  next(eventName?: string) {\n    const index = this.state.currentStep;\n    if (index >= this.steps.length - 1) {\n      return;\n    }\n    const currentStep = this.steps[index];\n    if (eventName === 'skip') {\n      currentStep.invokeSkipCB(index);\n    } else if (currentStep.invokeNextCB(index) == false) {\n      return;\n    }\n    this.updateCurrentStep(index + 1);\n  }\n\n  done($event: any) {\n    if (this.state.currentStep !== this.steps.length - 1) {\n      return;\n    }\n    this.updateState({\n      isDone: true\n    } as WmWizardState);\n    this.invokeEventCallback('onDone', [$event, this.proxy]);\n  }\n\n  cancel() {\n    this.invokeEventCallback('onCancel', [null, this.proxy]);\n  }\n  \n  skip() {\n    this.next('skip');\n  }\n\n  renderWidget(props: WmWizardProps) {\n    this.numberOfSteps = this.steps.length;\n    const activeStep = this.steps[this.state.currentStep];\n    const isSkippable = activeStep && activeStep.state.props.enableskip;\n    const isProgressCircleHeader = this.state.props.classname?.includes('progress-circle-header');\n    return (\n      <View style={this.styles.root}>\n        {this._background}\n        <View style={this.styles.wizardHeader}>\n          {activeStep && isProgressCircleHeader ? (this.renderProgressCircleHeader(activeStep, this.state.currentStep)) : (this.steps ? this.steps.map((step, i) => this.renderWizardHeader(step, i)) : null)}\n        </View>\n        <View style={this.styles.wizardBody}>\n          {props.children}\n        </View>\n        <View style={[this.styles.wizardFooter,\n          {flexDirection: props.actionsalignment === 'right' ? 'row-reverse': 'row'}]}>\n          {(this.state.currentStep+1) === this.numberOfSteps && activeStep.state.props.showdone &&\n            <WmButton iconclass={'wm-sl-l sl-check'} styles={merge({}, this.styles.wizardActions, this.theme.getStyle('btn-default'), this.styles.doneButton)}\n              id = {this.getTestId('donebtn')} caption={props.donebtnlabel} onTap={this.done.bind(this)} disabled={activeStep.state.props.disabledone}></WmButton>\n          }\n          {(this.state.currentStep+1) < this.numberOfSteps && activeStep.state.props.shownext &&\n            <WmButton iconclass={'wi wi-chevron-right'} styles={merge({}, this.styles.wizardActions, this.theme.getStyle('btn-default'), this.styles.nextButton)}\n                id = {this.getTestId('nextbtn')}\n                      iconposition={'right'} caption={props.nextbtnlabel} onTap={this.next.bind(this)} disabled={activeStep.state.props.disablenext}></WmButton>\n          }\n          {this.state.currentStep > 0 && activeStep.state.props.showprev &&\n            <WmButton iconclass={'wi wi-chevron-left'} styles={merge({}, this.theme.getStyle('btn-default'), this.styles.wizardActions, this.styles.prevButton)} caption={props.previousbtnlabel}\n                id = {this.getTestId('prevbtn')}\n                onTap={this.prev.bind(this)} disabled={activeStep.state.props.disableprev}></WmButton>\n          }\n          {props.cancelable ?\n              <WmButton id = {this.getTestId('cancelbtn')}  caption={props.cancelbtnlabel} styles={merge({}, this.theme.getStyle('btn-default'), this.styles.wizardActions, this.styles.cancelButton)} onTap={this.cancel.bind(this)}></WmButton>\n              : null\n          }\n          {isSkippable &&\n              <WmAnchor iconclass={'wi wi-chevron-right'} iconposition={'right'} caption={'Skip'}\n                id = {this.getTestId('skip')}        \n                styles={merge({}, this.styles.wizardActions, this.styles.skipLink)} onTap={this.skip.bind(this)}></WmAnchor>\n          }\n        </View>\n      </View>\n    );\n  }\n}\n"],"mappings":"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"}

package/components/container/wizard/wizard.styles.js

@@ -0,0 +1,308 @@
+import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';
+import { defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';
+export const DEFAULT_CLASS = 'app-wizard';
+BASE_THEME.registerStyle((themeVariables, addStyle) => {
+  const defaultStyles = defineStyles({
+    root: {
+      flexDirection: 'column',
+      backgroundColor: themeVariables.wizardBackgroundColor,
+      display: 'flex',
+      minHeight: 240
+    },
+    text: {},
+    activeStep: {
+      backgroundColor: themeVariables.wizardStepActiveColor,
+      borderColor: themeVariables.wizardStepActiveColor,
+      color: themeVariables.wizardActiveStepColor
+    },
+    doneStep: {
+      backgroundColor: themeVariables.wizardStepDoneColor,
+      color: themeVariables.wizardDoneStepColor,
+      borderColor: themeVariables.wizardStepDoneColor
+    },
+    wizardHeader: {
+      padding: 8,
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      justifyContent: 'center'
+    },
+    stepWrapper: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      zIndex: 20
+    },
+    headerWrapper: {
+      flex: 1
+    },
+    wizardBody: {
+      alignSelf: 'flex-start',
+      paddingTop: 10,
+      flex: 1,
+      width: '100%',
+      borderWidth: 0,
+      borderTopWidth: 1,
+      borderBottomWidth: 1,
+      borderColor: themeVariables.wizardBorderColor
+    },
+    wizardFooter: {
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      padding: 12,
+      width: '100%'
+    },
+    buttonWrapper: {
+      flexDirection: 'row'
+    },
+    stepTitle: {
+      textTransform: 'capitalize',
+      fontSize: 12,
+      color: themeVariables.wizardStepTitleColor
+    },
+    stepSubTitle: {
+      color: themeVariables.wizardStepTitleColor
+    },
+    step: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 37,
+      backgroundColor: themeVariables.wizardBackgroundColor,
+      height: 37,
+      borderWidth: 1,
+      borderRadius: 18.5,
+      color: themeVariables.wizardStepColor,
+      borderColor: themeVariables.wizardStepColor
+    },
+    wizardActions: {
+      root: {
+        marginRight: 8
+      },
+      text: {
+        textTransform: 'capitalize',
+        fontSize: 14
+      }
+    },
+    nextButton: {
+      root: {
+        marginRight: 0,
+        paddingRight: 8,
+        backgroundColor: themeVariables.wizardNextBtnColor,
+        borderColor: themeVariables.wizardActiveStepColor
+      },
+      text: {
+        color: themeVariables.wizardActiveStepColor
+      }
+    },
+    prevButton: {
+      root: {
+        paddingLeft: 16
+      },
+      icon: {
+        icon: {
+          paddingRight: 0,
+          paddingLeft: 0
+        }
+      }
+    },
+    cancelButton: {
+      root: {
+        minHeight: 46
+      }
+    },
+    doneButton: {
+      root: {
+        marginRight: 0,
+        backgroundColor: themeVariables.wizardDoneBtnColor,
+        borderColor: themeVariables.wizardActiveStepColor
+      },
+      text: {
+        color: themeVariables.wizardActiveStepColor
+      },
+      icon: {
+        text: {
+          fontSize: 12,
+          color: themeVariables.wizardActiveStepColor
+        }
+      }
+    },
+    stepIcon: {
+      root: {
+        alignSelf: 'center',
+        justifyContent: 'center',
+        paddingLeft: 8
+      },
+      text: {
+        color: themeVariables.wizardStepIconColor,
+        fontSize: 15
+      }
+    },
+    skipLink: {
+      root: {
+        padding: 8,
+        alignSelf: 'flex-end'
+      }
+    },
+    stepConnector: {
+      backgroundColor: themeVariables.wizardStepConnectorColor,
+      position: 'absolute',
+      top: 17.5,
+      zIndex: 10,
+      height: 2
+    },
+    numberTextStepConnector: {
+      display: 'none'
+    },
+    stepCounter: {
+      fontSize: 15,
+      color: themeVariables.wizardStepColor
+    },
+    progressCircle: {},
+    popover: {},
+    stepMenu: {},
+    activeStepMenu: {},
+    stepMenuLabel: {},
+    stepMenuActiveLabel: {},
+    stepMenuIcon: {},
+    stepMenuActiveIcon: {}
+  });
+  addStyle(DEFAULT_CLASS, '', defaultStyles);
+  addStyle('number-text-inline', '', {
+    stepConnector: {
+      display: 'none'
+    },
+    numberTextStepConnector: {
+      backgroundColor: themeVariables.wizardStepConnectorColor,
+      height: 2,
+      display: 'flex'
+    },
+    stepWrapper: {
+      flexDirection: 'row'
+    },
+    wizardHeader: {
+      justifyContent: 'flex-start'
+    },
+    headerWrapper: {
+      flex: -1
+    },
+    stepTitle: {
+      padding: 5
+    }
+  });
+  addStyle('progress-circle-header', '', {
+    stepWrapper: {
+      paddingBottom: 4,
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    wizardHeader: {
+      justifyContent: 'flex-start',
+      alignItems: 'center',
+      backgroundColor: themeVariables.wizardBackgroundColor,
+      height: 120,
+      borderRadius: 30
+    },
+    stepSubTitle: {
+      fontSize: 12,
+      paddingHorizontal: 5
+    },
+    headerWrapper: {
+      flex: 1
+    },
+    stepTitle: {
+      fontSize: 16,
+      paddingHorizontal: 5
+    },
+    progressCircle: {
+      root: {
+        height: 60,
+        width: 60
+      },
+      text: {},
+      progressValue: {
+        height: 8
+      }
+    },
+    popover: {
+      popover: {
+        width: 160,
+        paddingTop: 8,
+        paddingBottom: 8,
+        backgroundColor: themeVariables.menuBackgroundColor,
+        minHeight: 160,
+        borderBottomLeftRadius: 28,
+        borderBottomRightRadius: 28
+      },
+      popoverContent: {
+        root: {
+          //@ts-ignore
+          flex: undefined
+        }
+      },
+      modalContent: {
+        borderBottomLeftRadius: 28,
+        borderBottomRightRadius: 28
+      }
+    },
+    stepMenu: {
+      flexDirection: 'row',
+      padding: 14,
+      alignItems: 'center',
+      justifyContent: 'flex-start'
+    },
+    activeStepMenu: {},
+    stepMenuLabel: {
+      text: {
+        color: themeVariables.menuItemTextColor
+      }
+    },
+    stepMenuActiveLabel: {
+      text: {
+        color: themeVariables.primaryColor
+      }
+    },
+    stepMenuIcon: {
+      root: {
+        paddingRight: 4
+      },
+      text: {
+        color: themeVariables.menuItemTextColor
+      }
+    },
+    stepMenuActiveIcon: {
+      root: {
+        paddingRight: 4
+      },
+      text: {
+        color: themeVariables.primaryColor
+      }
+    }
+  });
+  addStyle(DEFAULT_CLASS + '-rtl', '', {
+    wizardActions: {
+      icon: {
+        root: {
+          transform: [{
+            rotateY: '180deg'
+          }]
+        }
+      }
+    },
+    nextButton: {
+      root: {
+        marginRight: 8
+      }
+    },
+    doneButton: {
+      root: {
+        marginRight: 8
+      },
+      icon: {
+        root: {
+          transform: [{
+            rotateY: '0deg'
+          }]
+        }
+      }
+    }
+  });
+});
+//# sourceMappingURL=wizard.styles.js.map