Fixes to the wizard
This commit is contained in:
Eric Schultz
parent
82dbe471bd
commit
13fc233136
31 changed files with 16363 additions and 3553 deletions
124
javascripts/src/components/common/test/react_test_helpers.tsx
Normal file
124
javascripts/src/components/common/test/react_test_helpers.tsx
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
import * as React from 'react'
|
||||
import {observer} from "mobx-react";
|
||||
import * as _ from 'lodash'
|
||||
import { ReactWrapper, mount } from 'enzyme';
|
||||
import { when } from 'mobx';
|
||||
import { resolve } from 'path';
|
||||
import {mountWithIntl} from "../../../lib/tests/helpers";
|
||||
|
||||
@observer
|
||||
class OuterWrapper<TProps> extends React.Component<TProps & {__childrenCreator: (props:TProps) => React.ReactNode }> {
|
||||
|
||||
render() {
|
||||
const innerProps = _.omit(this.props, '__childrenCreator') as
|
||||
any
|
||||
|
||||
return this.props.__childrenCreator(innerProps)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Mobx needs an @observer React component which is created inside the mount tag for enzyme to work. We use this tag to
|
||||
* create an OuterWrapper component which simply serves this need and passes the given props to
|
||||
* the given root component. To use, put your props for the root component you're mounting into props.
|
||||
*
|
||||
* NOTE: this wraps your root component with an OuterWrapper tag. Can't be avoided.
|
||||
* @param {TProps} props the properties from the outer scope that your mounted components will need
|
||||
* @param {(props: TProps) => React.ReactNode} rootComponentCreator a function to create your root component for mounting.
|
||||
* @returns {ReactWrapper} The wrapper of your mounted component.
|
||||
*/
|
||||
export function mountForMobx<TProps>(props:TProps,
|
||||
rootComponentCreator:(props:TProps) => React.ReactNode): ReactWrapper {
|
||||
|
||||
|
||||
return mount(<OuterWrapper {...props}
|
||||
__childrenCreator={rootComponentCreator} />)
|
||||
}
|
||||
|
||||
/**
|
||||
* Same as mountForMobx but has support for React-Intl
|
||||
* @param {TProps} props
|
||||
* @param {(props: TProps) => React.ReactNode} rootComponentCreator
|
||||
* @returns {ReactWrapper}
|
||||
*/
|
||||
export function mountForMobxWithIntl<TProps>(props:TProps,
|
||||
rootComponentCreator:(props:TProps) => React.ReactNode): ReactWrapper {
|
||||
return mountWithIntl(<OuterWrapper {...props}
|
||||
__childrenCreator={rootComponentCreator} />)
|
||||
}
|
||||
|
||||
|
||||
export function waitForMobxCondition(
|
||||
finishCondition:() => any,
|
||||
effect: () => any,
|
||||
whatToDoOnTimeout: () => void = () => expect(false).toBeTruthy()
|
||||
){
|
||||
when(finishCondition,
|
||||
() => {
|
||||
process.nextTick(() => {
|
||||
effect()
|
||||
})
|
||||
},
|
||||
{timeout:10000, onError: whatToDoOnTimeout});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
type TriggerCondition = () => any
|
||||
|
||||
export class TriggerAndAction {
|
||||
constructor(
|
||||
readonly finishCondition:TriggerCondition,
|
||||
readonly action:(done?:Function) => any){}
|
||||
|
||||
async toPromise():Promise<any> {
|
||||
return new Promise((resolve, reject) => {
|
||||
waitForMobxCondition(
|
||||
this.finishCondition,
|
||||
() => {
|
||||
this.action()
|
||||
resolve()
|
||||
},
|
||||
() => {
|
||||
expect(false).toBeTruthy()
|
||||
reject()
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
interface TriggerAndActionIface {
|
||||
finishCondition:TriggerCondition,
|
||||
action:(done?:Function) => any
|
||||
}
|
||||
|
||||
|
||||
function isFinishAndAction(item: TriggerCondition|TriggerAndActionIface): item is TriggerAndActionIface{
|
||||
return !!(item as TriggerAndActionIface).action
|
||||
}
|
||||
|
||||
export async function runTestsOnConditions(...args:Array<TriggerCondition| TriggerAndAction | TriggerAndActionIface>) {
|
||||
let trigAndActions = args.map((i) => {
|
||||
let ret: TriggerAndAction
|
||||
if (i instanceof TriggerAndAction)
|
||||
{
|
||||
ret = i
|
||||
}
|
||||
if (isFinishAndAction(i)) {
|
||||
ret = new TriggerAndAction(i.finishCondition, i.action)
|
||||
}
|
||||
else {
|
||||
ret = new TriggerAndAction(i, () => {})
|
||||
}
|
||||
|
||||
return ret
|
||||
})
|
||||
|
||||
trigAndActions.forEach( async (i) =>{
|
||||
await i.toPromise()
|
||||
})
|
||||
}
|
||||
16
javascripts/src/components/common/tests/unique_id_mock.ts
Normal file
16
javascripts/src/components/common/tests/unique_id_mock.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
// Under Lodash license (MIT/ISC) - https://raw.githubusercontent.com/lodash/lodash/4.17.10-npm/LICENSE
|
||||
import * as _ from 'lodash'
|
||||
|
||||
export class UniqueIdMock {
|
||||
idCounter:number=0
|
||||
|
||||
public uniqueId(prefix:string):string {
|
||||
var id = ++this.idCounter;
|
||||
return _.toString(prefix) + id;
|
||||
}
|
||||
|
||||
public reset(){
|
||||
this.idCounter = 0
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
// License: LGPL-3.0-or-later
|
||||
import * as React from 'react'
|
||||
import * as RAT from "react-aria-tabpanel";
|
||||
import {TabManager} from "./manager";
|
||||
var PropTypes = require('prop-types');
|
||||
|
||||
var specialAssign = require('react-aria-tabpanel/lib/specialAssign');
|
||||
|
||||
interface AddManagerInterface {
|
||||
manager?: TabManager
|
||||
}
|
||||
|
||||
|
||||
var checkedProps = {
|
||||
children: PropTypes.node.isRequired,
|
||||
activeTabId: PropTypes.string,
|
||||
letterNavigation: PropTypes.bool,
|
||||
onChange: PropTypes.func,
|
||||
tag: PropTypes.string,
|
||||
};
|
||||
|
||||
/**
|
||||
* Works just like the normal Wrapper but provides a tool for passing in our own TabManager
|
||||
*/
|
||||
export class ManagedWrapper extends RAT.Wrapper<AddManagerInterface>
|
||||
{
|
||||
manager: TabManager
|
||||
constructor(props:RAT.WrapperProps & AddManagerInterface){
|
||||
super(props)
|
||||
|
||||
if (props.manager)
|
||||
this.manager = this.props.manager
|
||||
}
|
||||
|
||||
render() {
|
||||
var props = this.props;
|
||||
var elProps = {};
|
||||
specialAssign(elProps, props, checkedProps);
|
||||
return React.createElement(props.tag, elProps, props.children);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
87
javascripts/src/components/common/wizard/RAT/Tab.ts
Normal file
87
javascripts/src/components/common/wizard/RAT/Tab.ts
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
//MIT based on https://github.com/davidtheclark/react-aria-tabpanel/blob/master/lib/Tab.js
|
||||
import * as React from 'react'
|
||||
import specialAssign from "./specialAssign";
|
||||
import {TabManagerParent} from "./abstract_tabcomponent_state";
|
||||
import {observer} from 'mobx-react';
|
||||
|
||||
const PropTypes = require('prop-types');
|
||||
|
||||
|
||||
const checkedProps = {
|
||||
children: PropTypes.oneOfType([
|
||||
PropTypes.node,
|
||||
PropTypes.func,
|
||||
]).isRequired,
|
||||
id: PropTypes.string.isRequired,
|
||||
tag: PropTypes.string,
|
||||
role: PropTypes.string,
|
||||
index: PropTypes.number,
|
||||
active: PropTypes.bool,
|
||||
letterNavigationText: PropTypes.string,
|
||||
};
|
||||
|
||||
interface TabProps {
|
||||
id: string
|
||||
active: boolean
|
||||
letterNavigationText?: string
|
||||
tag?: string
|
||||
|
||||
[prop: string]: any
|
||||
}
|
||||
|
||||
@observer
|
||||
export class Tab extends React.Component<TabProps> {
|
||||
displayName: 'AriaTabPanel-Tab';
|
||||
|
||||
public static defaultProps = { tag: 'div', role: 'tab' };
|
||||
|
||||
static contextTypes = {
|
||||
atpManager: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
context: {atpManager:TabManagerParent};
|
||||
elRef:any;
|
||||
|
||||
handleRef(el:any) {
|
||||
if (el) {
|
||||
this.elRef = el;
|
||||
this.registerWithManager(this.elRef);
|
||||
}
|
||||
}
|
||||
|
||||
registerWithManager(elRef:any){
|
||||
this.context.atpManager.registerTabElement({
|
||||
id: this.props.id,
|
||||
node: elRef
|
||||
});
|
||||
}
|
||||
|
||||
handleFocus() {
|
||||
this.context.atpManager.handleTabFocus(this.props.id);
|
||||
}
|
||||
|
||||
render() {
|
||||
const props = this.props;
|
||||
const isActive = props.active;
|
||||
|
||||
const kids = props.children;
|
||||
|
||||
let elProps = {
|
||||
id: props.id,
|
||||
tabIndex: (isActive) ? 0 : -1,
|
||||
onFocus: this.handleFocus.bind(this),
|
||||
role: props.role,
|
||||
'aria-selected': isActive,
|
||||
'aria-controls': this.context.atpManager.getTabPanelId(props.id),
|
||||
ref: this.handleRef.bind(this)
|
||||
};
|
||||
specialAssign(elProps, props, checkedProps);
|
||||
|
||||
return React.createElement(props.tag, elProps, kids);
|
||||
}
|
||||
|
||||
componentWillUnmount(){
|
||||
this.context.atpManager.unregisterTabElement({id:this.props.id})
|
||||
}
|
||||
|
||||
}
|
||||
37
javascripts/src/components/common/wizard/RAT/TabList.ts
Normal file
37
javascripts/src/components/common/wizard/RAT/TabList.ts
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
//MIT based on https://github.com/davidtheclark/react-aria-tabpanel/blob/master/lib/Tab.js
|
||||
import * as React from 'react'
|
||||
import specialAssign from "./specialAssign";
|
||||
import {observer} from 'mobx-react';
|
||||
|
||||
const PropTypes = require('prop-types');
|
||||
|
||||
const checkedProps = {
|
||||
children: PropTypes.node.isRequired,
|
||||
tag: PropTypes.string,
|
||||
};
|
||||
|
||||
interface TabListProps {
|
||||
tag?: string
|
||||
|
||||
[prop: string]: any
|
||||
}
|
||||
|
||||
@observer
|
||||
export class TabList extends React.Component<TabListProps> {
|
||||
displayName: 'AriaTabPanel-TabList';
|
||||
|
||||
public static defaultProps = {tag: 'div'};
|
||||
|
||||
static contextTypes = {
|
||||
atpManager: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
render() {
|
||||
const props = this.props;
|
||||
let elProps = {
|
||||
role: 'tablist',
|
||||
};
|
||||
specialAssign(elProps, props, checkedProps);
|
||||
return React.createElement(props.tag, elProps, props.children);
|
||||
}
|
||||
}
|
||||
79
javascripts/src/components/common/wizard/RAT/TabPanel.ts
Normal file
79
javascripts/src/components/common/wizard/RAT/TabPanel.ts
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
//MIT based on https://github.com/davidtheclark/react-aria-tabpanel/blob/master/lib/Tab.js
|
||||
import * as React from 'react'
|
||||
import specialAssign from "./specialAssign";
|
||||
import {TabManagerParent} from "./abstract_tabcomponent_state";
|
||||
import {observer} from 'mobx-react';
|
||||
|
||||
const PropTypes = require('prop-types');
|
||||
|
||||
const checkedProps = {
|
||||
children: PropTypes.oneOfType([
|
||||
PropTypes.node,
|
||||
PropTypes.func,
|
||||
]).isRequired,
|
||||
tabId: PropTypes.string.isRequired,
|
||||
tag: PropTypes.string,
|
||||
active: PropTypes.bool,
|
||||
};
|
||||
|
||||
interface TabPanelProps {
|
||||
tabId: string
|
||||
active: boolean
|
||||
tag?: string
|
||||
|
||||
[prop: string]: any
|
||||
}
|
||||
|
||||
@observer
|
||||
export class TabPanel extends React.Component<TabPanelProps> {
|
||||
displayName: 'AriaTabPanel-TabPanel';
|
||||
|
||||
public static defaultProps = {tag: 'div'};
|
||||
|
||||
static contextTypes = {
|
||||
atpManager: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
context: { atpManager: TabManagerParent };
|
||||
|
||||
handleKeyDown(event: any) {
|
||||
if (event.ctrlKey && event.key === 'ArrowUp') {
|
||||
event.preventDefault();
|
||||
this.context.atpManager.focusTab(this.props.tabId);
|
||||
}
|
||||
}
|
||||
|
||||
registerWithManager(el: any) {
|
||||
|
||||
this.context.atpManager.registerTabPanelElement({
|
||||
node: el,
|
||||
tabId: this.props.tabId,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const props = this.props;
|
||||
const isActive = props.active;
|
||||
|
||||
const kids = props.children;
|
||||
|
||||
let style = props.style || {};
|
||||
if (!isActive) {
|
||||
style.display = 'none';
|
||||
}
|
||||
|
||||
let elProps = {
|
||||
className: props.className,
|
||||
id: this.context.atpManager.getTabPanelId(props.tabId),
|
||||
onKeyDown: this.handleKeyDown.bind(this),
|
||||
role: 'tabpanel',
|
||||
style: style,
|
||||
'aria-hidden': !isActive,
|
||||
'aria-describedby': props.tabId,
|
||||
ref: this.registerWithManager.bind(this)
|
||||
};
|
||||
specialAssign(elProps, props, checkedProps);
|
||||
|
||||
return React.createElement(props.tag, elProps, kids);
|
||||
}
|
||||
}
|
||||
524
javascripts/src/components/common/wizard/RAT/Wrapper.spec.tsx
Normal file
524
javascripts/src/components/common/wizard/RAT/Wrapper.spec.tsx
Normal file
|
|
@ -0,0 +1,524 @@
|
|||
// License: LGPL-3.0-or-later
|
||||
import * as React from 'react';
|
||||
import 'jest';
|
||||
import {action, computed, observable} from 'mobx'
|
||||
import {AbstractTabComponentState, AbstractTabPanelState} from "./abstract_tabcomponent_state";
|
||||
import {mount, ReactWrapper} from 'enzyme';
|
||||
import {Wrapper} from "./Wrapper";
|
||||
import {TabList} from "./TabList";
|
||||
import {TabPanel} from "./TabPanel";
|
||||
import {Tab} from "./Tab";
|
||||
import toJson from 'enzyme-to-json';
|
||||
import {UniqueIdMock} from "../../tests/unique_id_mock";
|
||||
import {mountForMobx, runTestsOnConditions, TriggerAndAction} from '../../test/react_test_helpers';
|
||||
|
||||
let uniqueIdMock = new UniqueIdMock();
|
||||
|
||||
// function isVisible(wrapper: ReactWrapper) {
|
||||
// const style: any = wrapper.prop("style");
|
||||
// if (style) {
|
||||
// const display = style['display'];
|
||||
// if (display)
|
||||
// return display !== 'none'
|
||||
// }
|
||||
// return true
|
||||
//
|
||||
//
|
||||
// }
|
||||
|
||||
// function isEnabledTab(tabWrapper: NonNullable<ReactWrapper>, tabPanelWrapper: NonNullable<ReactWrapper>) {
|
||||
// expect(tabWrapper).toBeTruthy();
|
||||
// expect(tabPanelWrapper).toBeTruthy();
|
||||
// expect(tabWrapper.hostNodes().prop('className')).toBe('enabled');
|
||||
// expect(isVisible(tabPanelWrapper.hostNodes())).toBeTruthy()
|
||||
// }
|
||||
|
||||
// function isDisabledTab(tabWrapper: NonNullable<ReactWrapper>, tabPanelWrapper: NonNullable<ReactWrapper>) {
|
||||
// expect(tabWrapper).toBeTruthy();
|
||||
// expect(tabPanelWrapper).toBeTruthy();
|
||||
// expect(tabWrapper.prop('className')).toBeUndefined();
|
||||
// expect(isVisible(tabPanelWrapper)).toBeFalsy()
|
||||
// }
|
||||
|
||||
class MockableTabPanelState extends AbstractTabPanelState {
|
||||
@observable
|
||||
isEnabled: boolean;
|
||||
|
||||
@action.bound
|
||||
setEnabled(enabled: boolean) {
|
||||
this.isEnabled = enabled;
|
||||
}
|
||||
|
||||
@computed
|
||||
get enabled(): boolean {
|
||||
return this.isEnabled
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
class EasyTabComponentState extends AbstractTabComponentState<MockableTabPanelState> {
|
||||
constructor() {
|
||||
super(MockableTabPanelState)
|
||||
}
|
||||
|
||||
wrapperForFocus: ReactWrapper;
|
||||
|
||||
@action.bound
|
||||
addTab(tab: { tabName: string, label: string }): MockableTabPanelState {
|
||||
const newTab = super.addTab(tab);
|
||||
if (this.panels.length == 1) {
|
||||
|
||||
newTab.setEnabled(true);
|
||||
this.activateTab(newTab)
|
||||
}
|
||||
return newTab
|
||||
}
|
||||
|
||||
uniqueIdFunction(prefix?:string) {
|
||||
return uniqueIdMock.uniqueId.bind(uniqueIdMock)(prefix);
|
||||
}
|
||||
|
||||
focusFunction(panel:MockableTabPanelState){
|
||||
this.wrapperForFocus.find(`#${panel.id}`).hostNodes().prop('onFocus')(null)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
describe('Wrapper', () => {
|
||||
|
||||
let data =
|
||||
{
|
||||
tab1: {
|
||||
tabName: "Tab1",
|
||||
label: "Label1"
|
||||
},
|
||||
tab2: {
|
||||
tabName: "Tab2",
|
||||
label: "Label2"
|
||||
},
|
||||
tab3: {
|
||||
tabName: "Tab3",
|
||||
label: "Label3"
|
||||
},
|
||||
|
||||
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
uniqueIdMock.reset()
|
||||
});
|
||||
|
||||
it('.createTab', () => {
|
||||
let state = new EasyTabComponentState();
|
||||
|
||||
|
||||
state.addTab({tabName: data.tab1.tabName, label: data.tab1.label});
|
||||
let tab = state.tabsByName[data.tab1.tabName];
|
||||
|
||||
let wrapper = mount(<Wrapper manager={state}>
|
||||
<TabList>
|
||||
<Tab id={tab.id} key={tab.id} className={tab.enabled ? 'enabled' : undefined}
|
||||
active={tab.active}>{tab.label}</Tab>
|
||||
</TabList>
|
||||
<div>
|
||||
<TabPanel tabId={tab.id} key={tab.id} active={tab.active}>tabPanel1</TabPanel>
|
||||
</div>
|
||||
</Wrapper>);
|
||||
|
||||
let tab1 = wrapper.find(`#${tab.id}`);
|
||||
let hostNode = tab1.hostNodes().at(0);
|
||||
|
||||
|
||||
hostNode.simulate('focus');
|
||||
wrapper.update();
|
||||
|
||||
|
||||
expect(toJson(wrapper)).toMatchSnapshot()
|
||||
});
|
||||
|
||||
describe('prevents going to next if next isnt enabled', () => {
|
||||
let state: EasyTabComponentState;
|
||||
let wrapper: ReactWrapper;
|
||||
|
||||
beforeEach(() => {
|
||||
state = new EasyTabComponentState();
|
||||
state.addTab({tabName: data.tab1.tabName, label: data.tab1.label});
|
||||
state.addTab({tabName: data.tab2.tabName, label: data.tab2.label});
|
||||
|
||||
|
||||
wrapper = mountForMobx({state: state}, (props) => {
|
||||
return <Wrapper manager={props.state}>
|
||||
<TabList>
|
||||
{
|
||||
props.state.panels.map((tab) => {
|
||||
return <Tab id={tab.id} key={tab.id} className={tab.enabled ? 'enabled' : undefined}
|
||||
active={tab.active}>{tab.label}</Tab>
|
||||
})
|
||||
}
|
||||
</TabList>
|
||||
<div>
|
||||
{
|
||||
props.state.panels.map((tab) => {
|
||||
return <TabPanel tabId={tab.id} key={tab.id} active={tab.active}>
|
||||
<button onClick={props.state.moveToNextTab}/>
|
||||
</TabPanel>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</Wrapper>
|
||||
});
|
||||
|
||||
state.wrapperForFocus = wrapper
|
||||
|
||||
});
|
||||
|
||||
|
||||
it('ignores if focused', () => {
|
||||
let secondTab = wrapper.find(Tab).at(1);
|
||||
secondTab.simulate('focus');
|
||||
wrapper.update();
|
||||
expect(toJson(wrapper)).toMatchSnapshot()
|
||||
});
|
||||
|
||||
it('ignores from next button', () => {
|
||||
let button = wrapper.find('button').at(0);
|
||||
button.simulate('click');
|
||||
wrapper.update();
|
||||
expect(toJson(wrapper)).toMatchSnapshot()
|
||||
});
|
||||
|
||||
it('ignores from backend move attempt', () => {
|
||||
|
||||
state.moveToTab(state.tabsByName[data.tab2.tabName].id);
|
||||
wrapper.update();
|
||||
expect(toJson(wrapper)).toMatchSnapshot()
|
||||
})
|
||||
});
|
||||
|
||||
describe('go to next and back', () => {
|
||||
let wrapper: ReactWrapper;
|
||||
let state: EasyTabComponentState;
|
||||
beforeEach(() => {
|
||||
state = new EasyTabComponentState();
|
||||
state.addTab({tabName: data.tab1.tabName, label: data.tab1.label});
|
||||
state.addTab({tabName: data.tab2.tabName, label: data.tab2.label});
|
||||
state.addTab({tabName: data.tab3.tabName, label: data.tab3.label});
|
||||
|
||||
let tab1 = state.tabsByName[data.tab1.tabName];
|
||||
tab1.setEnabled(true);
|
||||
let tab2 = (state.tabsByName[data.tab2.tabName] as MockableTabPanelState);
|
||||
tab2.setEnabled(true);
|
||||
let tab3 = state.tabsByName[data.tab3.tabName];
|
||||
tab3.setEnabled(true);
|
||||
|
||||
|
||||
wrapper = mountForMobx({state: state}, (props) => {
|
||||
|
||||
return <Wrapper manager={props.state}>
|
||||
<TabList>
|
||||
{
|
||||
props.state.panels.map((tab) => {
|
||||
return <Tab id={tab.id} key={tab.id} className={tab.enabled ? 'enabled' : undefined}
|
||||
active={tab.active}>{tab.label}</Tab>
|
||||
})
|
||||
}
|
||||
</TabList>
|
||||
<div>
|
||||
{
|
||||
props.state.panels.map((tab) => {
|
||||
return <TabPanel tabId={tab.id} key={tab.id} active={tab.active}>
|
||||
<button onClick={props.state.moveToNextTab}/>
|
||||
</TabPanel>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</Wrapper>
|
||||
|
||||
});
|
||||
|
||||
state.wrapperForFocus = wrapper
|
||||
});
|
||||
|
||||
|
||||
describe('go to next', () => {
|
||||
let commonCondition: (done: Function) => any;
|
||||
|
||||
beforeEach(() => {
|
||||
commonCondition = (done: Function) => {
|
||||
|
||||
runTestsOnConditions(new TriggerAndAction(
|
||||
() =>state.activeTab.tabName == data.tab2.tabName,
|
||||
() => {
|
||||
wrapper.instance().forceUpdate();
|
||||
wrapper.update();
|
||||
expect(toJson(wrapper)).toMatchSnapshot();
|
||||
done()
|
||||
}
|
||||
))
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
it('go to next via click', (done) => {
|
||||
commonCondition(done);
|
||||
let secondTab = wrapper.find('#tab2');
|
||||
|
||||
secondTab.hostNodes().simulate('focus');
|
||||
|
||||
});
|
||||
|
||||
it('go to next via next button', (done) => {
|
||||
commonCondition(done);
|
||||
let button = wrapper.find('button').at(0);
|
||||
button.hostNodes().simulate('click');
|
||||
|
||||
});
|
||||
|
||||
it('go to next via backend', (done) => {
|
||||
commonCondition(done);
|
||||
state.moveToTab(state.tabsByName[data.tab2.tabName].id);
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
describe('go to next twice', () => {
|
||||
let commonCondition: (done: Function) => any;
|
||||
|
||||
beforeEach(() => {
|
||||
commonCondition = (done: Function) => {
|
||||
|
||||
runTestsOnConditions(new TriggerAndAction(
|
||||
() =>state.activeTab.tabName == data.tab3.tabName,
|
||||
() => {
|
||||
wrapper.instance().forceUpdate();
|
||||
wrapper.update();
|
||||
expect(toJson(wrapper)).toMatchSnapshot();
|
||||
done()
|
||||
}
|
||||
))
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
it('go to next via click', (done) => {
|
||||
commonCondition(done);
|
||||
let secondTab = wrapper.find(Tab).at(1);
|
||||
secondTab.simulate('focus');
|
||||
wrapper.update();
|
||||
let thirdTab = wrapper.find(Tab).at(2);
|
||||
thirdTab.simulate('focus');
|
||||
});
|
||||
|
||||
it('go to next via next button', (done) => {
|
||||
commonCondition(done);
|
||||
let button = wrapper.find('button').at(0);
|
||||
button.prop('onClick')(null);
|
||||
|
||||
button = wrapper.find('button').at(1);
|
||||
button.prop('onClick')(null);
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
it('go to next via backend', (done) => {
|
||||
commonCondition(done);
|
||||
state.moveToNextTab();
|
||||
state.moveToNextTab();
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
describe('go next twice, then back once', () => {
|
||||
|
||||
let commonCondition: (done: Function) => void;
|
||||
beforeEach(() => {
|
||||
commonCondition = (done: Function) => {
|
||||
|
||||
runTestsOnConditions(new TriggerAndAction(
|
||||
() =>state.activeTab.tabName == data.tab3.tabName,
|
||||
() => {
|
||||
wrapper.instance().forceUpdate();
|
||||
wrapper.update();
|
||||
}
|
||||
),
|
||||
new TriggerAndAction(
|
||||
() => state.activeTab.tabName == data.tab2.tabName,
|
||||
() => {
|
||||
wrapper.instance().forceUpdate();
|
||||
wrapper.update();
|
||||
expect(toJson(wrapper)).toMatchSnapshot();
|
||||
done()
|
||||
}
|
||||
))
|
||||
};
|
||||
});
|
||||
|
||||
it('go via tab presses', (done) => {
|
||||
|
||||
commonCondition(done);
|
||||
let secondTab = wrapper.find(Tab).at(1);
|
||||
secondTab.simulate('focus');
|
||||
|
||||
let thirdTab = wrapper.find(Tab).at(2);
|
||||
thirdTab.simulate('focus');
|
||||
|
||||
|
||||
secondTab.simulate('focus')
|
||||
});
|
||||
|
||||
it('go via next button presses', (done) => {
|
||||
commonCondition(done);
|
||||
let button = wrapper.find('button').at(0);
|
||||
button.prop('onClick')(null);
|
||||
|
||||
button = wrapper.find('button').at(1);
|
||||
button.prop('onClick')(null);
|
||||
let secondTab = wrapper.find(Tab).at(1);
|
||||
secondTab.simulate('focus')
|
||||
|
||||
});
|
||||
|
||||
it('go via backend', (done) => {
|
||||
commonCondition(done);
|
||||
state.moveToNextTab();
|
||||
state.moveToNextTab();
|
||||
state.moveToPreviousTab()
|
||||
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
describe('handle enabled properly', () => {
|
||||
|
||||
let wrapper: ReactWrapper;
|
||||
let state: EasyTabComponentState;
|
||||
let tab3: MockableTabPanelState;
|
||||
let tab2: MockableTabPanelState;
|
||||
beforeEach(() => {
|
||||
state = new EasyTabComponentState();
|
||||
state.addTab({tabName: data.tab1.tabName, label: data.tab1.label});
|
||||
state.addTab({tabName: data.tab2.tabName, label: data.tab2.label});
|
||||
state.addTab({tabName: data.tab3.tabName, label: data.tab3.label});
|
||||
|
||||
let tab1 = state.tabsByName[data.tab1.tabName];
|
||||
tab1.setEnabled(true);
|
||||
tab2 = (state.tabsByName[data.tab2.tabName] as MockableTabPanelState);
|
||||
tab2.setEnabled(true);
|
||||
tab3 = state.tabsByName[data.tab3.tabName];
|
||||
tab3.setEnabled(true);
|
||||
|
||||
|
||||
wrapper = mountForMobx({state: state}, (props) => {
|
||||
|
||||
return <Wrapper manager={props.state}>
|
||||
<TabList>
|
||||
{
|
||||
props.state.panels.map((tab) => {
|
||||
return <Tab id={tab.id} key={tab.id} className={tab.enabled ? 'enabled' : undefined}
|
||||
active={tab.active}>{tab.label}</Tab>
|
||||
})
|
||||
}
|
||||
</TabList>
|
||||
<div>
|
||||
{
|
||||
props.state.panels.map((tab) => {
|
||||
return <TabPanel tabId={tab.id} key={tab.id} active={tab.active}>
|
||||
<button onClick={props.state.moveToNextTab}/>
|
||||
</TabPanel>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</Wrapper>
|
||||
|
||||
});
|
||||
|
||||
state.wrapperForFocus = wrapper
|
||||
});
|
||||
|
||||
it('move back to previous tab if the current one is disabled', (done) => {
|
||||
|
||||
runTestsOnConditions(new TriggerAndAction(
|
||||
() =>state.activeTab.tabName == data.tab3.tabName,
|
||||
() => {
|
||||
wrapper.instance().forceUpdate();
|
||||
wrapper.update();
|
||||
}
|
||||
),
|
||||
new TriggerAndAction(
|
||||
() => state.activeTab.tabName == data.tab2.tabName,
|
||||
() => {
|
||||
wrapper.instance().forceUpdate();
|
||||
wrapper.update();
|
||||
|
||||
|
||||
}
|
||||
),
|
||||
new TriggerAndAction(
|
||||
() => tab3.enabled,
|
||||
() => {
|
||||
wrapper.instance().forceUpdate();
|
||||
wrapper.update();
|
||||
|
||||
expect(toJson(wrapper)).toMatchSnapshot();
|
||||
done()
|
||||
}
|
||||
));
|
||||
|
||||
tab3.setEnabled(true);
|
||||
tab2.setEnabled(true);
|
||||
state.moveToTab(tab3);
|
||||
tab3.setEnabled(false);
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
it('move back to first tab if all but that one is disabled', (done) => {
|
||||
runTestsOnConditions(new TriggerAndAction(
|
||||
() =>state.activeTab.tabName == data.tab3.tabName,
|
||||
() => {
|
||||
wrapper.instance().forceUpdate();
|
||||
wrapper.update();
|
||||
}
|
||||
),
|
||||
new TriggerAndAction(
|
||||
() => state.activeTab.tabName == data.tab1.tabName,
|
||||
() => {
|
||||
wrapper.instance().forceUpdate();
|
||||
wrapper.update();
|
||||
|
||||
|
||||
}
|
||||
),
|
||||
new TriggerAndAction(
|
||||
() => tab2.enabled,
|
||||
() => {
|
||||
wrapper.instance().forceUpdate();
|
||||
wrapper.update();
|
||||
|
||||
expect(toJson(wrapper)).toMatchSnapshot();
|
||||
done();
|
||||
}
|
||||
));
|
||||
|
||||
state.moveToTab(tab3);
|
||||
|
||||
expect(tab3.active).toBe(true);
|
||||
|
||||
tab2.setEnabled(false);
|
||||
tab3.setEnabled(false);
|
||||
state.moveToNextTab();
|
||||
|
||||
tab2.setEnabled(true);
|
||||
|
||||
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
57
javascripts/src/components/common/wizard/RAT/Wrapper.ts
Normal file
57
javascripts/src/components/common/wizard/RAT/Wrapper.ts
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
// License: LGPL-3.0-or-later
|
||||
import * as React from 'react'
|
||||
import {ReactNode} from 'react'
|
||||
import {TabManagerParent} from "./abstract_tabcomponent_state";
|
||||
import {observer} from 'mobx-react';
|
||||
|
||||
const PropTypes = require('prop-types');
|
||||
const specialAssign = require('react-aria-tabpanel/lib/specialAssign');
|
||||
|
||||
interface WrapperProps {
|
||||
manager: TabManagerParent
|
||||
tag?: string
|
||||
children: ReactNode
|
||||
[props:string]: any
|
||||
}
|
||||
|
||||
const checkedProps = {
|
||||
children: PropTypes.node.isRequired,
|
||||
tag: PropTypes.string,
|
||||
manager: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
/**
|
||||
* Works just like the normal Wrapper but supports our own tab manager
|
||||
*/
|
||||
@observer
|
||||
export class Wrapper extends React.Component<WrapperProps> {
|
||||
|
||||
displayName = 'AriaTabPanel-Wrapper';
|
||||
|
||||
public static defaultProps = {
|
||||
tag: 'div'
|
||||
};
|
||||
|
||||
public static childContextTypes = {
|
||||
atpManager: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
getChildContext() {
|
||||
return {atpManager: this.props.manager};
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.props.manager.destroy();
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.props.manager.activate();
|
||||
}
|
||||
|
||||
render() {
|
||||
const props = this.props;
|
||||
let elProps = {};
|
||||
specialAssign(elProps, props, checkedProps);
|
||||
return React.createElement(props.tag, elProps, props.children);
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -0,0 +1,261 @@
|
|||
// License: LGPL-3.0-or-later
|
||||
import * as React from 'react';
|
||||
import 'jest';
|
||||
import {observable, action, computed} from 'mobx'
|
||||
import {AbstractTabComponentState, AbstractTabPanelState} from "./abstract_tabcomponent_state";
|
||||
|
||||
class MockableTabPanelState extends AbstractTabPanelState {
|
||||
@observable
|
||||
isEnabled:boolean;
|
||||
|
||||
@action.bound
|
||||
setEnabled(enabled:boolean){
|
||||
this.isEnabled = enabled;
|
||||
}
|
||||
|
||||
@computed
|
||||
get enabled():boolean {
|
||||
return this.isEnabled
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class EasyTabComponentState extends AbstractTabComponentState<MockableTabPanelState> {
|
||||
constructor() {
|
||||
super(MockableTabPanelState)
|
||||
}
|
||||
|
||||
@action.bound
|
||||
addTab(tab:{ tabName: string, label: string }):MockableTabPanelState {
|
||||
const newTab = super.addTab(tab);
|
||||
if (this.panels.length == 1){
|
||||
newTab.setEnabled(true)
|
||||
}
|
||||
return newTab
|
||||
}
|
||||
|
||||
//we mock this because we want to skip the focus group code for these tests
|
||||
@action.bound
|
||||
focusTab(id:string) : void {
|
||||
this.activateTab(id)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
describe('AbstractTabComponentState', () => {
|
||||
|
||||
let data =
|
||||
{
|
||||
tab1: {
|
||||
tabName: "Tab1",
|
||||
label: "Label1"
|
||||
},
|
||||
tab2: {
|
||||
tabName: "Tab2",
|
||||
label: "Label2"
|
||||
},
|
||||
tab3: {
|
||||
tabName: "Tab3",
|
||||
label: "Label3"
|
||||
},
|
||||
|
||||
|
||||
};
|
||||
it('.createTab', () =>{
|
||||
let state = new EasyTabComponentState();
|
||||
|
||||
|
||||
state.addTab({tabName:data.tab1.tabName, label:data.tab1.label});
|
||||
|
||||
|
||||
let tab = state.tabsByName[data.tab1.tabName];
|
||||
expect(tab.tabName).toBe(data.tab1.tabName);
|
||||
expect(tab.label).toBe(data.tab1.label);
|
||||
expect(tab.enabled).toBe(true);
|
||||
expect(tab.previous).toBe(null);
|
||||
expect(tab.next).toBe(null)
|
||||
});
|
||||
|
||||
it('prevents going to next if next isnt enabled', () =>{
|
||||
let state = new EasyTabComponentState();
|
||||
|
||||
state.addTab({tabName:data.tab1.tabName, label:data.tab1.label});
|
||||
state.addTab({tabName:data.tab2.tabName, label:data.tab2.label});
|
||||
|
||||
|
||||
expect(state.activeTab).toBe(state.tabsByName[data.tab1.tabName]);
|
||||
state.moveToTab(state.tabsByName[data.tab2.tabName].id);
|
||||
expect(state.activeTab).toBe(state.tabsByName[data.tab1.tabName]);
|
||||
expect(state.tabsByName[data.tab2.tabName].active).toBeFalsy()
|
||||
});
|
||||
|
||||
describe('go to next and back', () => {
|
||||
let state = new EasyTabComponentState();
|
||||
|
||||
state.addTab({tabName:data.tab1.tabName, label:data.tab1.label});
|
||||
state.addTab({tabName:data.tab2.tabName, label:data.tab2.label});
|
||||
state.addTab({tabName:data.tab3.tabName, label:data.tab3.label});
|
||||
|
||||
let tab1 = state.tabsByName[data.tab1.tabName];
|
||||
tab1.setEnabled(true);
|
||||
let tab2 = (state.tabsByName[data.tab2.tabName] as MockableTabPanelState);
|
||||
tab2.setEnabled(true);
|
||||
let tab3 = state.tabsByName[data.tab3.tabName];
|
||||
it('go to next', () =>{
|
||||
expect(state.nextTab).toBe(tab2);
|
||||
expect(state.previousTab).toBeNull();
|
||||
|
||||
state.moveToNextTab();
|
||||
|
||||
expect(state.activeTab).toBe(tab2);
|
||||
|
||||
expect(state.previousTab).toBe(tab1);
|
||||
expect(state.nextTab).toBe(tab3);
|
||||
|
||||
expect(tab1.active).toBeFalsy();
|
||||
expect(tab3.active).toBeFalsy()
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
describe('handle moving back to tabs when one is disabled', () => {
|
||||
|
||||
let state:EasyTabComponentState= null;
|
||||
let tab1: MockableTabPanelState, tab2: MockableTabPanelState, tab3 : MockableTabPanelState = null;
|
||||
|
||||
beforeEach(() => {
|
||||
state = new EasyTabComponentState();
|
||||
state.addTab({tabName:data.tab1.tabName, label:data.tab1.label});
|
||||
state.addTab({tabName:data.tab2.tabName, label:data.tab2.label});
|
||||
state.addTab({tabName:data.tab3.tabName, label:data.tab3.label});
|
||||
|
||||
tab1 = (state.tabsByName[data.tab1.tabName] as MockableTabPanelState);
|
||||
tab1.setEnabled(true);
|
||||
tab2 = (state.tabsByName[data.tab2.tabName] as MockableTabPanelState);
|
||||
tab2.setEnabled(true);
|
||||
tab3 = (state.tabsByName[data.tab3.tabName]as MockableTabPanelState)
|
||||
});
|
||||
|
||||
it ('move back to previous tab if the current one is disabled', () =>{
|
||||
|
||||
tab3.setEnabled(true);
|
||||
tab2.setEnabled(true);
|
||||
state.moveToTab(tab3);
|
||||
|
||||
expect(tab3.active).toBe(true);
|
||||
|
||||
expect(tab1.active).toBe(false);
|
||||
expect(tab2.active).toBe(false);
|
||||
tab3.setEnabled(false);
|
||||
|
||||
expect(tab3.active).toBe(false);
|
||||
expect(tab2.active).toBe(true);
|
||||
expect(state.activeTab).toBe(tab2)
|
||||
|
||||
|
||||
});
|
||||
|
||||
it ('move back to first tab if all but that one is disabled', () =>{
|
||||
tab2.setEnabled(true);
|
||||
tab3.setEnabled(true);
|
||||
state.moveToTab(tab3);
|
||||
|
||||
expect(tab3.active).toBe(true);
|
||||
|
||||
tab2.setEnabled(false);
|
||||
tab3.setEnabled(false);
|
||||
|
||||
|
||||
expect(tab3.active).toBe(false);
|
||||
expect(tab2.active).toBe(false);
|
||||
expect(tab1.active).toBe(true);
|
||||
expect(state.activeTab).toBe(tab1);
|
||||
|
||||
|
||||
tab1.setEnabled(true);
|
||||
expect(state.activeTab).toBe(tab1);
|
||||
|
||||
|
||||
tab1.setEnabled(false);
|
||||
expect(state.activeTab).toBe(tab1);
|
||||
|
||||
|
||||
state.moveToNextTab();
|
||||
expect(state.activeTab).toBe(tab1);
|
||||
|
||||
|
||||
tab2.setEnabled(true);
|
||||
expect(state.activeTab).toBe(tab1)
|
||||
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
describe("before works properly", () =>{
|
||||
let state:EasyTabComponentState = null;
|
||||
let tab1: MockableTabPanelState, tab2: MockableTabPanelState, tab3 : MockableTabPanelState = null;
|
||||
beforeEach(() => {
|
||||
state = new EasyTabComponentState();
|
||||
state.addTab({tabName:data.tab1.tabName, label:data.tab1.label});
|
||||
|
||||
tab1 = (state.tabsByName[data.tab1.tabName] as MockableTabPanelState)
|
||||
});
|
||||
|
||||
it("handles before when nothing else in it",() =>{
|
||||
|
||||
let tab2 = new MockableTabPanelState();
|
||||
|
||||
expect(tab1.before(tab2)).toBeFalsy()
|
||||
});
|
||||
|
||||
it("handles before before When nothing else in it",() =>{
|
||||
|
||||
state.addTab({tabName:data.tab2.tabName, label:data.tab2.label})
|
||||
;
|
||||
tab2 = (state.tabsByName[data.tab2.tabName] as MockableTabPanelState);
|
||||
expect(tab1.before(tab2)).toBeTruthy();
|
||||
expect(tab2.before(tab1)).toBeFalsy();
|
||||
tab3 = new MockableTabPanelState();
|
||||
|
||||
expect(tab2.before(tab3)).toBeFalsy();
|
||||
expect(tab3.before(tab2)).toBeFalsy()
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
describe("after works properly", () =>{
|
||||
let state:EasyTabComponentState = null;
|
||||
let tab1: MockableTabPanelState, tab2: MockableTabPanelState, tab3 : MockableTabPanelState = null;
|
||||
beforeEach(() => {
|
||||
state = new EasyTabComponentState();
|
||||
state.addTab({tabName:data.tab1.tabName, label:data.tab1.label});
|
||||
|
||||
tab1 = (state.tabsByName[data.tab1.tabName] as MockableTabPanelState)
|
||||
});
|
||||
|
||||
it("handles before when nothing else in it",() =>{
|
||||
|
||||
let tab2 = new MockableTabPanelState();
|
||||
|
||||
expect(tab1.after(tab2)).toBeFalsy();
|
||||
expect(tab2.after(tab1)).toBeFalsy()
|
||||
});
|
||||
|
||||
it("handles before before When nothing else in it",() =>{
|
||||
|
||||
state.addTab({tabName:data.tab2.tabName, label:data.tab2.label});
|
||||
tab2 = (state.tabsByName[data.tab2.tabName] as MockableTabPanelState);
|
||||
expect(tab2.after(tab1)).toBeTruthy();
|
||||
expect(tab1.after(tab2)).toBeFalsy();
|
||||
tab3 = new MockableTabPanelState();
|
||||
|
||||
expect(tab2.before(tab3)).toBeFalsy();
|
||||
expect(tab3.before(tab2)).toBeFalsy()
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,309 @@
|
|||
// License: LGPL-3.0-or-later
|
||||
import {action, computed, observable, reaction, runInAction} from "mobx";
|
||||
import _ = require("lodash");
|
||||
|
||||
const createFocusGroup = require('focus-group');
|
||||
|
||||
export interface TabManagerParent {
|
||||
registerTabElement(tab: { id: string, node: any}): void
|
||||
|
||||
registerTabPanelElement(tabPanel: { tabId: string, node: any }): void
|
||||
|
||||
unregisterTabElement(tab: { id: string }): void
|
||||
|
||||
unregisterTabPanelElement(tabPanel: { id: string }): void
|
||||
|
||||
handleTabFocus(tabId: string): void
|
||||
|
||||
getTabPanelId(id: string): string
|
||||
|
||||
focusTab(id: string): void
|
||||
|
||||
activate(): void
|
||||
|
||||
destroy(): void
|
||||
}
|
||||
|
||||
|
||||
export abstract class AbstractTabComponentState<PanelStateType extends AbstractTabPanelState = AbstractTabPanelState>
|
||||
implements TabManagerParent {
|
||||
|
||||
@observable focusGroup: any;
|
||||
@observable panels:Array<PanelStateType> = [];
|
||||
@observable activeTab: PanelStateType;
|
||||
|
||||
|
||||
protected constructor(readonly panelType: { new(): PanelStateType }) {
|
||||
|
||||
const focusGroupOptions = {
|
||||
wrap: true,
|
||||
forwardArrows: ['down', 'right'],
|
||||
backArrows: ['up', 'left'],
|
||||
stringSearch: true,
|
||||
};
|
||||
|
||||
this.focusGroup = createFocusGroup(focusGroupOptions);
|
||||
|
||||
reaction(() => this.activeTab && this.activeTab.enabled , () => {
|
||||
if (!this.activeTab.enabled){
|
||||
this.strategy(this)
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
@computed
|
||||
get tabsByName(): { [name: string]: PanelStateType } {
|
||||
return _.fromPairs(this.panels.map((i) => [i.tabName, i]));
|
||||
}
|
||||
|
||||
@computed
|
||||
get nextTab(): PanelStateType {
|
||||
return this.activeTab.next
|
||||
}
|
||||
|
||||
@computed
|
||||
get previousTab(): PanelStateType {
|
||||
return this.activeTab.previous
|
||||
}
|
||||
|
||||
|
||||
addTab(tab:{ tabName: string, label: string }): PanelStateType {
|
||||
let newTab:PanelStateType;
|
||||
runInAction(() => {
|
||||
newTab = this.createChildState();
|
||||
newTab.id = this.uniqueIdFunction('tab');
|
||||
newTab.tabName = tab.tabName;
|
||||
newTab.label = tab.label;
|
||||
if (this.panels.length == 0) {
|
||||
this.activeTab = newTab
|
||||
}
|
||||
newTab.parent = this;
|
||||
|
||||
this.panels.push(newTab)
|
||||
});
|
||||
return newTab;
|
||||
}
|
||||
|
||||
moveToTab(tab: PanelStateType | string) {
|
||||
|
||||
let tabState: PanelStateType = null;
|
||||
if (tab instanceof AbstractTabPanelState) {
|
||||
tabState = tab
|
||||
}
|
||||
else {
|
||||
tabState = _.find(this.panels, (i) => i.id == tab)
|
||||
}
|
||||
|
||||
this.focusTab(tabState.id)
|
||||
}
|
||||
|
||||
@action.bound
|
||||
activateTab(tab: PanelStateType | string) {
|
||||
|
||||
let tabState: PanelStateType = null;
|
||||
if (tab instanceof AbstractTabPanelState) {
|
||||
tabState = tab
|
||||
}
|
||||
else {
|
||||
tabState = _.find(this.panels, (i) => i.id == tab)
|
||||
}
|
||||
|
||||
if (this.canChangeTo(tabState.id)) {
|
||||
this.activeTab = tabState
|
||||
}
|
||||
}
|
||||
|
||||
@action.bound
|
||||
moveToNextTab() {
|
||||
const self = this;
|
||||
|
||||
if (this.nextTab) {
|
||||
self.focusTab(this.nextTab.id)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@action.bound
|
||||
moveToPreviousTab() {
|
||||
const self = this;
|
||||
|
||||
if (this.previousTab) {
|
||||
self.focusTab(this.previousTab.id)
|
||||
}
|
||||
}
|
||||
|
||||
@action.bound
|
||||
canChangeTo(tabId: string): boolean {
|
||||
|
||||
const tab = _.find(this.panels, (i) => i.id == tabId);
|
||||
return tab && tab.enabled
|
||||
}
|
||||
|
||||
focusTab(id: string): void {
|
||||
runInAction(() => {
|
||||
let tabMemberToFocus = _.find(this.panels, (panel) => panel.id === id);
|
||||
if (!tabMemberToFocus) return;
|
||||
this.focusFunction(tabMemberToFocus)
|
||||
})
|
||||
}
|
||||
|
||||
getTabPanelId(id: string): string {
|
||||
return id + '-panel';
|
||||
}
|
||||
|
||||
@action.bound
|
||||
handleTabFocus(tabId: string): void {
|
||||
this.activateTab(tabId);
|
||||
}
|
||||
|
||||
@action.bound
|
||||
unregisterTabPanelElement(tabPanel: { id: string; }): void {
|
||||
|
||||
}
|
||||
|
||||
@action.bound
|
||||
unregisterTabElement(tab: { id: string; }): void {
|
||||
//throw new Error("Method not implemented.");
|
||||
}
|
||||
|
||||
@action.bound
|
||||
registerTabPanelElement(tabPanel: { tabId: string; node: any; }): void {
|
||||
|
||||
}
|
||||
|
||||
@action.bound
|
||||
registerTabElement(tabMember: { id: string; node: any }): void {
|
||||
let tabMemberToRegister = _.find(this.panels, (panel) => panel.id === tabMember.id);
|
||||
let focusGroupMember = (tabMemberToRegister.letterNavigationText) ? {
|
||||
node: tabMember.node,
|
||||
text: tabMemberToRegister.letterNavigationText,
|
||||
} : tabMember.node;
|
||||
tabMemberToRegister.node = tabMember.node;
|
||||
this.focusGroup.addMember(focusGroupMember, tabMember);
|
||||
}
|
||||
|
||||
@action.bound
|
||||
activate() {
|
||||
this.focusGroup.activate();
|
||||
}
|
||||
|
||||
@action.bound
|
||||
destroy() {
|
||||
this.focusGroup.destroy();
|
||||
}
|
||||
|
||||
@action.bound
|
||||
protected createChildState(): PanelStateType {
|
||||
return new this.panelType()
|
||||
}
|
||||
|
||||
/**
|
||||
* TESTING ONLY: The function used to focus on a particular tab. We override in Enzyme tests
|
||||
* @param {PanelStateType} panel
|
||||
*/
|
||||
protected focusFunction(panel:PanelStateType) {
|
||||
panel.node.focus()
|
||||
}
|
||||
|
||||
/**
|
||||
* TESTING ONLY: The function used for getting unique id. We override in tests to get consistent ids.
|
||||
* @param {string} prefix
|
||||
* @returns {string}
|
||||
*/
|
||||
protected uniqueIdFunction(prefix?:string):string {
|
||||
return _.uniqueId(prefix)
|
||||
}
|
||||
|
||||
protected strategy(state:this) {
|
||||
let testTab = state.activeTab ? state.activeTab.previous : null;
|
||||
while (testTab)
|
||||
{
|
||||
if (testTab.enabled)
|
||||
{
|
||||
state.activeTab = testTab;
|
||||
return
|
||||
}
|
||||
testTab = testTab.previous
|
||||
}
|
||||
state.activeTab = _.first(state.panels)
|
||||
};
|
||||
}
|
||||
|
||||
export abstract class AbstractTabPanelState {
|
||||
@observable parent: AbstractTabComponentState;
|
||||
@observable id: string;
|
||||
@observable tabName: string;
|
||||
@observable label: string;
|
||||
|
||||
@observable letterNavigationText: string;
|
||||
|
||||
@observable node: any;
|
||||
|
||||
abstract get enabled(): boolean
|
||||
|
||||
@computed
|
||||
get active(): boolean {
|
||||
return this.parent.activeTab === this
|
||||
}
|
||||
|
||||
@computed
|
||||
get previous(): this {
|
||||
if (!this.parent || !this.parent.panels)
|
||||
return null;
|
||||
const index = _.findIndex(this.parent.panels, (i) => i == this);
|
||||
if (index === null) {
|
||||
// return null but we have a problem here
|
||||
return null
|
||||
}
|
||||
if (index === 0) {
|
||||
// there is no previous one because we're first!
|
||||
return null;
|
||||
}
|
||||
|
||||
return this.parent.panels[index - 1] as this
|
||||
}
|
||||
|
||||
@computed
|
||||
get next(): this {
|
||||
if (!this.parent || !this.parent.panels)
|
||||
return null;
|
||||
|
||||
const index = _.findIndex(this.parent.panels, (i) => i == this);
|
||||
const panelLength = this.parent.panels.length;
|
||||
if (index === null) {
|
||||
// return null but we have a problem here
|
||||
return null;
|
||||
}
|
||||
|
||||
if (index + 1 >= panelLength) {
|
||||
//we have no advanced
|
||||
return null;
|
||||
}
|
||||
|
||||
return this.parent.panels[index + 1] as this
|
||||
}
|
||||
|
||||
before(tab: this): boolean {
|
||||
let testItem: this = this;
|
||||
while (testItem.next != tab) {
|
||||
if (!testItem.next)
|
||||
return false;
|
||||
testItem = testItem.next
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
|
||||
after(tab: this): boolean {
|
||||
let testItem: this = this;
|
||||
while (testItem.previous != tab) {
|
||||
if (!testItem.previous)
|
||||
return false;
|
||||
testItem = testItem.previous;
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
export default function specialAssign(a:any, b:any, reserved:any) {
|
||||
for (var x in b) {
|
||||
if (!b.hasOwnProperty(x)) continue;
|
||||
if (a[x]) continue;
|
||||
if (reserved[x]) continue;
|
||||
a[x] = b[x];
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,17 @@
|
|||
// License: LGPL-3.0-or-later
|
||||
import * as React from 'react';
|
||||
import 'jest';
|
||||
import * as Component from './Wizard'
|
||||
import {Wizard} from './Wizard'
|
||||
import {WizardState, WizardTabPanelState} from "./wizard_state";
|
||||
import {Form} from "mobx-react-form";
|
||||
import {computed, observable, action} from 'mobx';
|
||||
import {Wizard} from "./Wizard";
|
||||
import {shallow} from 'enzyme';
|
||||
import {action, computed, observable} from 'mobx';
|
||||
import {ReactWrapper} from 'enzyme';
|
||||
import {WizardPanel} from "./WizardPanel";
|
||||
import toJson from 'enzyme-to-json';
|
||||
|
||||
import {mountForMobxWithIntl, runTestsOnConditions, TriggerAndAction} from "../test/react_test_helpers";
|
||||
import {UniqueIdMock} from "../tests/unique_id_mock";
|
||||
|
||||
let uniqueIdMock = new UniqueIdMock();
|
||||
class MockableTabPanelState extends WizardTabPanelState
|
||||
{
|
||||
@observable
|
||||
|
|
@ -35,6 +37,16 @@ class EasyWizardState extends WizardState{
|
|||
return new Form(i)
|
||||
}
|
||||
|
||||
uniqueIdFunction(prefix?:string) {
|
||||
return uniqueIdMock.uniqueId.bind(uniqueIdMock)(prefix);
|
||||
}
|
||||
|
||||
focusFunction(panel:MockableTabPanelState){
|
||||
this.wrapperForFocus.find(`#${panel.id}`).hostNodes().prop('onFocus')(null)
|
||||
}
|
||||
|
||||
wrapperForFocus: ReactWrapper;
|
||||
|
||||
}
|
||||
|
||||
describe('Wizard', () => {
|
||||
|
|
@ -59,53 +71,146 @@ describe('Wizard', () => {
|
|||
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
uniqueIdMock.reset()
|
||||
});
|
||||
|
||||
|
||||
|
||||
let state:EasyWizardState = null
|
||||
let tab1: MockableTabPanelState, tab2: MockableTabPanelState, tab3 : MockableTabPanelState = null
|
||||
let wrapper: ReactWrapper;
|
||||
let disabledTabs: boolean = false
|
||||
|
||||
beforeEach(() => {
|
||||
state = new EasyWizardState()
|
||||
state.addTab(data.tab1.tabName, data.tab1.label, data.tab1.subFormDef)
|
||||
state.addTab(data.tab2.tabName, data.tab2.label, data.tab2.subFormDef)
|
||||
state.addTab(data.tab3.tabName, data.tab3.label, data.tab3.subFormDef)
|
||||
state.addTab({tabName: data.tab1.tabName, label: data.tab1.label, tabFieldDefinition: data.tab1.subFormDef});
|
||||
state.addTab({tabName: data.tab2.tabName, label: data.tab2.label, tabFieldDefinition: data.tab2.subFormDef});
|
||||
state.addTab({tabName: data.tab3.tabName, label: data.tab3.label, tabFieldDefinition: data.tab3.subFormDef});
|
||||
state.initialize()
|
||||
tab1 = (state.tabsByName[data.tab1.tabName] as MockableTabPanelState)
|
||||
tab1.setValid(true)
|
||||
tab2 = (state.tabsByName[data.tab2.tabName] as MockableTabPanelState)
|
||||
tab2.setValid(true)
|
||||
tab3 = (state.tabsByName[data.tab3.tabName] as MockableTabPanelState)
|
||||
wrapper = mountForMobxWithIntl({state:state, disabledTabs: disabledTabs}, (props) => {
|
||||
return <Wizard wizardState={props.state} disableTabs={props.disabledTabs}>
|
||||
{
|
||||
props.state.panels.map((tab) => {
|
||||
return <WizardPanel tab={tab}>
|
||||
<button onClick={tab.parent.moveToNextTab}/>
|
||||
</WizardPanel>
|
||||
})
|
||||
}
|
||||
</Wizard>
|
||||
|
||||
})
|
||||
state.wrapperForFocus = wrapper
|
||||
|
||||
})
|
||||
|
||||
function createWizard(disabledTabs:boolean) {
|
||||
return <Wizard wizardState={state} disableTabs={disabledTabs}>
|
||||
<WizardPanel tab={tab1} />
|
||||
<WizardPanel tab={tab2} />
|
||||
<WizardPanel tab={tab3} />
|
||||
</Wizard>
|
||||
it('first tab is active', (done) => {
|
||||
//if disabledTabs changed, we change
|
||||
runTestsOnConditions(new TriggerAndAction(
|
||||
() => disabledTabs || !disabledTabs,
|
||||
() => {
|
||||
wrapper.instance().forceUpdate();
|
||||
wrapper.update();
|
||||
expect(wrapper.debug()).toMatchSnapshot();
|
||||
done();
|
||||
}))
|
||||
disabledTabs = false
|
||||
|
||||
}
|
||||
|
||||
test('Mounts the first item only', () => {
|
||||
const tree = shallow(createWizard(false) )
|
||||
let panels = tree.find(WizardPanel)
|
||||
expect(panels.length).toBe(1)
|
||||
expect(panels.first().props().tab).toBe(tab1)
|
||||
})
|
||||
|
||||
test('Mounts the second tab only', () => {
|
||||
state.activateTab(tab2)
|
||||
const tree = shallow(createWizard(false) )
|
||||
let panels = tree.find(WizardPanel)
|
||||
expect(panels.length).toBe(1)
|
||||
expect(panels.first().props().tab).toBe(tab2)
|
||||
describe('go to the second tab', () => {
|
||||
let commonCondition:any
|
||||
beforeEach(() => {
|
||||
commonCondition = (done: Function) => {
|
||||
runTestsOnConditions(new TriggerAndAction(
|
||||
() => state.activeTab.tabName == data.tab2.tabName,
|
||||
() => {
|
||||
wrapper.instance().forceUpdate();
|
||||
wrapper.update();
|
||||
expect(wrapper.debug()).toMatchSnapshot();
|
||||
done();
|
||||
}))
|
||||
}
|
||||
})
|
||||
|
||||
it('set via tab click', (done) => {
|
||||
commonCondition(done);
|
||||
let secondTab = wrapper.find('#tab2');
|
||||
|
||||
secondTab.hostNodes().simulate('focus');
|
||||
})
|
||||
|
||||
it('set via next click', (done) => {
|
||||
commonCondition(done);
|
||||
let button = wrapper.find('button').at(0);
|
||||
button.hostNodes().simulate('click');
|
||||
})
|
||||
|
||||
it('go to next via backend', (done) => {
|
||||
commonCondition(done);
|
||||
state.moveToTab(state.tabsByName[data.tab2.tabName].id);
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
test('Mounts the third tab only', () => {
|
||||
state.activateTab(tab2)
|
||||
state.activateTab(tab3)
|
||||
const tree = shallow(createWizard(false) )
|
||||
let panels = tree.find(WizardPanel)
|
||||
expect(panels.length).toBe(1)
|
||||
expect(panels.first().props().tab).toBe(tab3)
|
||||
describe('Move back on disabled', () => {
|
||||
|
||||
function waitingOnWhatTabName(tabName:string, done:any){
|
||||
runTestsOnConditions({
|
||||
finishCondition: () => state.activeTab.tabName == data.tab3.tabName,
|
||||
action: () => {
|
||||
wrapper.instance().forceUpdate();
|
||||
wrapper.update();
|
||||
}
|
||||
},
|
||||
{
|
||||
finishCondition: () => state.activeTab.tabName == tabName,
|
||||
action: () => {
|
||||
wrapper.instance().forceUpdate();
|
||||
wrapper.update();
|
||||
expect(wrapper.debug()).toMatchSnapshot();
|
||||
done();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
it('make second invalid so move back there', (done) => {
|
||||
waitingOnWhatTabName(data.tab2.tabName, done)
|
||||
tab1 = (state.tabsByName[data.tab1.tabName] as MockableTabPanelState)
|
||||
tab1.setValid(true)
|
||||
tab2 = (state.tabsByName[data.tab2.tabName] as MockableTabPanelState)
|
||||
tab2.setValid(true)
|
||||
tab3 = (state.tabsByName[data.tab3.tabName] as MockableTabPanelState)
|
||||
|
||||
state.focusTab(state.tabsByName[data.tab3.tabName].id)
|
||||
|
||||
tab2.setValid(false)
|
||||
})
|
||||
|
||||
it('make first invalid so move back there', (done) => {
|
||||
waitingOnWhatTabName(data.tab1.tabName, done)
|
||||
tab1 = (state.tabsByName[data.tab1.tabName] as MockableTabPanelState)
|
||||
tab1.setValid(true)
|
||||
tab2 = (state.tabsByName[data.tab2.tabName] as MockableTabPanelState)
|
||||
tab2.setValid(true)
|
||||
tab3 = (state.tabsByName[data.tab3.tabName] as MockableTabPanelState)
|
||||
|
||||
state.focusTab(state.tabsByName[data.tab3.tabName].id)
|
||||
wrapper.instance().forceUpdate();
|
||||
wrapper.update();
|
||||
expect(state.activeTab.tabName).toEqual(data.tab3.tabName)
|
||||
tab1.setValid(false)
|
||||
wrapper.instance().forceUpdate();
|
||||
wrapper.update();
|
||||
expect(wrapper.debug()).toMatchSnapshot();
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
|
|
@ -3,8 +3,8 @@ import * as React from 'react';
|
|||
import {observer} from "mobx-react"
|
||||
import WizardTabList from "./WizardTabList";
|
||||
import {WizardState} from './wizard_state';
|
||||
import {ManagedWrapper} from "./ManagedWrapper";
|
||||
import {WizardTabPanelProps} from "./WizardPanel";
|
||||
import {Wrapper} from "./RAT/Wrapper";
|
||||
|
||||
export interface WizardProps
|
||||
{
|
||||
|
|
@ -18,26 +18,22 @@ export interface WizardProps
|
|||
export class Wizard extends React.Component<WizardProps, {}> {
|
||||
|
||||
render() {
|
||||
return <ManagedWrapper onChange={this.props.wizardState.handleTabChange}
|
||||
letterNavigation={true}
|
||||
activeTabId={this.props.wizardState.activeTab.id}
|
||||
return <Wrapper manager={this.props.wizardState}
|
||||
tag="section"
|
||||
style={{display: 'table'}} className="wizard-steps" manager={this.props.wizardState.manager}>
|
||||
style={{display: 'table'}} className="wizard-steps">
|
||||
<WizardTabList wizardState={this.props.wizardState} disableTabs={this.props.disableTabs}>
|
||||
</WizardTabList>
|
||||
<div className="modal-body">
|
||||
|
||||
<form onSubmit={this.props.wizardState.form.onSubmit} >
|
||||
|
||||
{this.props.children.filter((i) =>
|
||||
i.props.tab == this.props.wizardState.activeTab
|
||||
)}
|
||||
{this.props.children}
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</ManagedWrapper>;
|
||||
</Wrapper>;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,11 +8,13 @@ import {Form, Field} from 'mobx-react-form';
|
|||
import { shallow, render } from 'enzyme';
|
||||
import {TabPanel, Wrapper} from 'react-aria-tabpanel'
|
||||
import toJson from 'enzyme-to-json';
|
||||
import {WizardState} from "./wizard_state";
|
||||
import {WizardState, WizardTabPanelState} from "./wizard_state";
|
||||
const TestRenderer = require('react-test-renderer')
|
||||
|
||||
class EasyWizardState extends WizardState{
|
||||
|
||||
constructor(){
|
||||
super(WizardTabPanelState)
|
||||
}
|
||||
createForm(i: any): Form {
|
||||
return new Form(i)
|
||||
}
|
||||
|
|
@ -25,7 +27,7 @@ describe('WizardPanel', () => {
|
|||
const form = new Form({fields});
|
||||
|
||||
const ws = new EasyWizardState()
|
||||
ws.addTab('something', 'something label',{} )
|
||||
ws.addTab({tabName:'something', label:'something label',tabFieldDefinition:{} })
|
||||
ws.initialize()
|
||||
|
||||
const tree = shallow(<Component.WizardPanel tab={ws.tabsByName['something']} anotherProp={false}><hr/></Component.WizardPanel>)
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
// License: LGPL-3.0-or-later
|
||||
import * as React from 'react';
|
||||
import { TabPanel } from "react-aria-tabpanel";
|
||||
import { observer } from 'mobx-react'
|
||||
import { WizardTabPanelState} from './wizard_state';
|
||||
import {computed} from 'mobx';
|
||||
import * as _ from 'lodash'
|
||||
import {TabPanel} from "./RAT/TabPanel";
|
||||
|
||||
|
||||
export interface WizardTabPanelProps {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ describe('WizardTab', () => {
|
|||
let tab = {active:active, enabled: enabled, label: "A label", id: "our_id"}
|
||||
let result = shallowWithIntl(<WizardTab widthPercentage={widthPercentage} tab={tab}/>)
|
||||
|
||||
let ourWrapper = result.find(Tab).first()
|
||||
let ourWrapper = result.find("Tab").first()
|
||||
expect(ourWrapper.prop('id')).toEqual("our_id")
|
||||
let classes = ourWrapper.prop('className').split(' ')
|
||||
expect(classes).toContain("wizard-index-label")
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
// License: LGPL-3.0-or-later
|
||||
import * as React from 'react';
|
||||
import { Tab } from 'react-aria-tabpanel';
|
||||
import {FormattedMessage, injectIntl, InjectedIntlProps} from 'react-intl';
|
||||
import {observer} from 'mobx-react';
|
||||
import {WizardTabPanelState} from "./wizard_state";
|
||||
import {Tab} from "./RAT/Tab";
|
||||
|
||||
interface MiniTabInfo{
|
||||
active:boolean
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
// License: LGPL-3.0-or-later
|
||||
import * as React from 'react';
|
||||
import WizardTab from './WizardTab';
|
||||
import { TabList } from 'react-aria-tabpanel';
|
||||
import {observer} from 'mobx-react';
|
||||
import {WizardState} from "./wizard_state";
|
||||
import {TabList} from "./RAT/TabList";
|
||||
|
||||
|
||||
export interface WizardTabListProps
|
||||
{
|
||||
wizardState: WizardState
|
||||
disableTabs: boolean
|
||||
disableTabs?: boolean
|
||||
}
|
||||
|
||||
@observer
|
||||
|
|
|
|||
|
|
@ -0,0 +1,484 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Wizard Move back on disabled make first invalid so move back there 1`] = `
|
||||
"<OuterWrapper state={{...}} disabledTabs={false} __childrenCreator={[Function]} intl={{...}}>
|
||||
<Wizard wizardState={{...}} disableTabs={false}>
|
||||
<Wrapper manager={{...}} tag=\\"section\\" style={{...}} className=\\"wizard-steps\\">
|
||||
<section style={{...}} className=\\"wizard-steps\\">
|
||||
<WizardTabList wizardState={{...}} disableTabs={false}>
|
||||
<TabList tag=\\"div\\" className=\\"wizard-index\\">
|
||||
<div role=\\"tablist\\" className=\\"wizard-index\\">
|
||||
<InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
|
||||
<WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
|
||||
<Tab tag=\\"span\\" active={true} className=\\"wizard-index-label is-current is-accessible\\" style={{...}} id=\\"tab1\\" role=\\"tab\\">
|
||||
<span id=\\"tab1\\" tabIndex={0} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={true} aria-controls=\\"tab1-panel\\" className=\\"wizard-index-label is-current is-accessible\\" style={{...}}>
|
||||
Label1
|
||||
</span>
|
||||
</Tab>
|
||||
</WizardTab>
|
||||
</InjectIntl(WizardTab)>
|
||||
<InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
|
||||
<WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
|
||||
<Tab tag=\\"span\\" active={false} className=\\"wizard-index-label\\" style={{...}} id=\\"tab2\\" role=\\"tab\\">
|
||||
<span id=\\"tab2\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab2-panel\\" className=\\"wizard-index-label\\" style={{...}}>
|
||||
Label2
|
||||
</span>
|
||||
</Tab>
|
||||
</WizardTab>
|
||||
</InjectIntl(WizardTab)>
|
||||
<InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
|
||||
<WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
|
||||
<Tab tag=\\"span\\" active={false} className=\\"wizard-index-label\\" style={{...}} id=\\"tab3\\" role=\\"tab\\">
|
||||
<span id=\\"tab3\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab3-panel\\" className=\\"wizard-index-label\\" style={{...}}>
|
||||
Label3
|
||||
</span>
|
||||
</Tab>
|
||||
</WizardTab>
|
||||
</InjectIntl(WizardTab)>
|
||||
</div>
|
||||
</TabList>
|
||||
</WizardTabList>
|
||||
<div className=\\"modal-body\\">
|
||||
<form onSubmit={[Function]}>
|
||||
<WizardPanel tab={{...}}>
|
||||
<TabPanel tabId=\\"tab1\\" active={true} className=\\"wizard-step\\" tag=\\"div\\">
|
||||
<div className=\\"wizard-step\\" id=\\"tab1-panel\\" onKeyDown={[Function: bound ]} role=\\"tabpanel\\" style={{...}} aria-hidden={false} aria-describedby=\\"tab1\\">
|
||||
<button onClick={[Function: res]} />
|
||||
</div>
|
||||
</TabPanel>
|
||||
</WizardPanel>
|
||||
<WizardPanel tab={{...}}>
|
||||
<TabPanel tabId=\\"tab2\\" active={false} className=\\"wizard-step\\" tag=\\"div\\">
|
||||
<div className=\\"wizard-step\\" id=\\"tab2-panel\\" onKeyDown={[Function: bound ]} role=\\"tabpanel\\" style={{...}} aria-hidden={true} aria-describedby=\\"tab2\\">
|
||||
<button onClick={[Function: res]} />
|
||||
</div>
|
||||
</TabPanel>
|
||||
</WizardPanel>
|
||||
<WizardPanel tab={{...}}>
|
||||
<TabPanel tabId=\\"tab3\\" active={false} className=\\"wizard-step\\" tag=\\"div\\">
|
||||
<div className=\\"wizard-step\\" id=\\"tab3-panel\\" onKeyDown={[Function: bound ]} role=\\"tabpanel\\" style={{...}} aria-hidden={true} aria-describedby=\\"tab3\\">
|
||||
<button onClick={[Function: res]} />
|
||||
</div>
|
||||
</TabPanel>
|
||||
</WizardPanel>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</Wrapper>
|
||||
</Wizard>
|
||||
</OuterWrapper>"
|
||||
`;
|
||||
|
||||
exports[`Wizard Move back on disabled make first invalid so move back there 2`] = `
|
||||
"<OuterWrapper state={{...}} disabledTabs={false} __childrenCreator={[Function]} intl={{...}}>
|
||||
<Wizard wizardState={{...}} disableTabs={false}>
|
||||
<Wrapper manager={{...}} tag=\\"section\\" style={{...}} className=\\"wizard-steps\\">
|
||||
<section style={{...}} className=\\"wizard-steps\\">
|
||||
<WizardTabList wizardState={{...}} disableTabs={false}>
|
||||
<TabList tag=\\"div\\" className=\\"wizard-index\\">
|
||||
<div role=\\"tablist\\" className=\\"wizard-index\\">
|
||||
<InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
|
||||
<WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
|
||||
<Tab tag=\\"span\\" active={true} className=\\"wizard-index-label is-current is-accessible\\" style={{...}} id=\\"tab1\\" role=\\"tab\\">
|
||||
<span id=\\"tab1\\" tabIndex={0} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={true} aria-controls=\\"tab1-panel\\" className=\\"wizard-index-label is-current is-accessible\\" style={{...}}>
|
||||
Label1
|
||||
</span>
|
||||
</Tab>
|
||||
</WizardTab>
|
||||
</InjectIntl(WizardTab)>
|
||||
<InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
|
||||
<WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
|
||||
<Tab tag=\\"span\\" active={false} className=\\"wizard-index-label\\" style={{...}} id=\\"tab2\\" role=\\"tab\\">
|
||||
<span id=\\"tab2\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab2-panel\\" className=\\"wizard-index-label\\" style={{...}}>
|
||||
Label2
|
||||
</span>
|
||||
</Tab>
|
||||
</WizardTab>
|
||||
</InjectIntl(WizardTab)>
|
||||
<InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
|
||||
<WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
|
||||
<Tab tag=\\"span\\" active={false} className=\\"wizard-index-label\\" style={{...}} id=\\"tab3\\" role=\\"tab\\">
|
||||
<span id=\\"tab3\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab3-panel\\" className=\\"wizard-index-label\\" style={{...}}>
|
||||
Label3
|
||||
</span>
|
||||
</Tab>
|
||||
</WizardTab>
|
||||
</InjectIntl(WizardTab)>
|
||||
</div>
|
||||
</TabList>
|
||||
</WizardTabList>
|
||||
<div className=\\"modal-body\\">
|
||||
<form onSubmit={[Function]}>
|
||||
<WizardPanel tab={{...}}>
|
||||
<TabPanel tabId=\\"tab1\\" active={true} className=\\"wizard-step\\" tag=\\"div\\">
|
||||
<div className=\\"wizard-step\\" id=\\"tab1-panel\\" onKeyDown={[Function: bound ]} role=\\"tabpanel\\" style={{...}} aria-hidden={false} aria-describedby=\\"tab1\\">
|
||||
<button onClick={[Function: res]} />
|
||||
</div>
|
||||
</TabPanel>
|
||||
</WizardPanel>
|
||||
<WizardPanel tab={{...}}>
|
||||
<TabPanel tabId=\\"tab2\\" active={false} className=\\"wizard-step\\" tag=\\"div\\">
|
||||
<div className=\\"wizard-step\\" id=\\"tab2-panel\\" onKeyDown={[Function: bound ]} role=\\"tabpanel\\" style={{...}} aria-hidden={true} aria-describedby=\\"tab2\\">
|
||||
<button onClick={[Function: res]} />
|
||||
</div>
|
||||
</TabPanel>
|
||||
</WizardPanel>
|
||||
<WizardPanel tab={{...}}>
|
||||
<TabPanel tabId=\\"tab3\\" active={false} className=\\"wizard-step\\" tag=\\"div\\">
|
||||
<div className=\\"wizard-step\\" id=\\"tab3-panel\\" onKeyDown={[Function: bound ]} role=\\"tabpanel\\" style={{...}} aria-hidden={true} aria-describedby=\\"tab3\\">
|
||||
<button onClick={[Function: res]} />
|
||||
</div>
|
||||
</TabPanel>
|
||||
</WizardPanel>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</Wrapper>
|
||||
</Wizard>
|
||||
</OuterWrapper>"
|
||||
`;
|
||||
|
||||
exports[`Wizard Move back on disabled make second invalid so move back there 1`] = `
|
||||
"<OuterWrapper state={{...}} disabledTabs={false} __childrenCreator={[Function]} intl={{...}}>
|
||||
<Wizard wizardState={{...}} disableTabs={false}>
|
||||
<Wrapper manager={{...}} tag=\\"section\\" style={{...}} className=\\"wizard-steps\\">
|
||||
<section style={{...}} className=\\"wizard-steps\\">
|
||||
<WizardTabList wizardState={{...}} disableTabs={false}>
|
||||
<TabList tag=\\"div\\" className=\\"wizard-index\\">
|
||||
<div role=\\"tablist\\" className=\\"wizard-index\\">
|
||||
<InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
|
||||
<WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
|
||||
<Tab tag=\\"span\\" active={false} className=\\"wizard-index-label is-accessible\\" style={{...}} id=\\"tab1\\" role=\\"tab\\">
|
||||
<span id=\\"tab1\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab1-panel\\" className=\\"wizard-index-label is-accessible\\" style={{...}}>
|
||||
Label1
|
||||
</span>
|
||||
</Tab>
|
||||
</WizardTab>
|
||||
</InjectIntl(WizardTab)>
|
||||
<InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
|
||||
<WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
|
||||
<Tab tag=\\"span\\" active={true} className=\\"wizard-index-label is-current is-accessible\\" style={{...}} id=\\"tab2\\" role=\\"tab\\">
|
||||
<span id=\\"tab2\\" tabIndex={0} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={true} aria-controls=\\"tab2-panel\\" className=\\"wizard-index-label is-current is-accessible\\" style={{...}}>
|
||||
Label2
|
||||
</span>
|
||||
</Tab>
|
||||
</WizardTab>
|
||||
</InjectIntl(WizardTab)>
|
||||
<InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
|
||||
<WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
|
||||
<Tab tag=\\"span\\" active={false} className=\\"wizard-index-label\\" style={{...}} id=\\"tab3\\" role=\\"tab\\">
|
||||
<span id=\\"tab3\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab3-panel\\" className=\\"wizard-index-label\\" style={{...}}>
|
||||
Label3
|
||||
</span>
|
||||
</Tab>
|
||||
</WizardTab>
|
||||
</InjectIntl(WizardTab)>
|
||||
</div>
|
||||
</TabList>
|
||||
</WizardTabList>
|
||||
<div className=\\"modal-body\\">
|
||||
<form onSubmit={[Function]}>
|
||||
<WizardPanel tab={{...}}>
|
||||
<TabPanel tabId=\\"tab1\\" active={false} className=\\"wizard-step\\" tag=\\"div\\">
|
||||
<div className=\\"wizard-step\\" id=\\"tab1-panel\\" onKeyDown={[Function: bound ]} role=\\"tabpanel\\" style={{...}} aria-hidden={true} aria-describedby=\\"tab1\\">
|
||||
<button onClick={[Function: res]} />
|
||||
</div>
|
||||
</TabPanel>
|
||||
</WizardPanel>
|
||||
<WizardPanel tab={{...}}>
|
||||
<TabPanel tabId=\\"tab2\\" active={true} className=\\"wizard-step\\" tag=\\"div\\">
|
||||
<div className=\\"wizard-step\\" id=\\"tab2-panel\\" onKeyDown={[Function: bound ]} role=\\"tabpanel\\" style={{...}} aria-hidden={false} aria-describedby=\\"tab2\\">
|
||||
<button onClick={[Function: res]} />
|
||||
</div>
|
||||
</TabPanel>
|
||||
</WizardPanel>
|
||||
<WizardPanel tab={{...}}>
|
||||
<TabPanel tabId=\\"tab3\\" active={false} className=\\"wizard-step\\" tag=\\"div\\">
|
||||
<div className=\\"wizard-step\\" id=\\"tab3-panel\\" onKeyDown={[Function: bound ]} role=\\"tabpanel\\" style={{...}} aria-hidden={true} aria-describedby=\\"tab3\\">
|
||||
<button onClick={[Function: res]} />
|
||||
</div>
|
||||
</TabPanel>
|
||||
</WizardPanel>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</Wrapper>
|
||||
</Wizard>
|
||||
</OuterWrapper>"
|
||||
`;
|
||||
|
||||
exports[`Wizard first tab is active 1`] = `
|
||||
"<OuterWrapper state={{...}} disabledTabs={false} __childrenCreator={[Function]} intl={{...}}>
|
||||
<Wizard wizardState={{...}} disableTabs={false}>
|
||||
<Wrapper manager={{...}} tag=\\"section\\" style={{...}} className=\\"wizard-steps\\">
|
||||
<section style={{...}} className=\\"wizard-steps\\">
|
||||
<WizardTabList wizardState={{...}} disableTabs={false}>
|
||||
<TabList tag=\\"div\\" className=\\"wizard-index\\">
|
||||
<div role=\\"tablist\\" className=\\"wizard-index\\">
|
||||
<InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
|
||||
<WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
|
||||
<Tab tag=\\"span\\" active={true} className=\\"wizard-index-label is-current is-accessible\\" style={{...}} id=\\"tab1\\" role=\\"tab\\">
|
||||
<span id=\\"tab1\\" tabIndex={0} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={true} aria-controls=\\"tab1-panel\\" className=\\"wizard-index-label is-current is-accessible\\" style={{...}}>
|
||||
Label1
|
||||
</span>
|
||||
</Tab>
|
||||
</WizardTab>
|
||||
</InjectIntl(WizardTab)>
|
||||
<InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
|
||||
<WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
|
||||
<Tab tag=\\"span\\" active={false} className=\\"wizard-index-label is-accessible\\" style={{...}} id=\\"tab2\\" role=\\"tab\\">
|
||||
<span id=\\"tab2\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab2-panel\\" className=\\"wizard-index-label is-accessible\\" style={{...}}>
|
||||
Label2
|
||||
</span>
|
||||
</Tab>
|
||||
</WizardTab>
|
||||
</InjectIntl(WizardTab)>
|
||||
<InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
|
||||
<WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
|
||||
<Tab tag=\\"span\\" active={false} className=\\"wizard-index-label is-accessible\\" style={{...}} id=\\"tab3\\" role=\\"tab\\">
|
||||
<span id=\\"tab3\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab3-panel\\" className=\\"wizard-index-label is-accessible\\" style={{...}}>
|
||||
Label3
|
||||
</span>
|
||||
</Tab>
|
||||
</WizardTab>
|
||||
</InjectIntl(WizardTab)>
|
||||
</div>
|
||||
</TabList>
|
||||
</WizardTabList>
|
||||
<div className=\\"modal-body\\">
|
||||
<form onSubmit={[Function]}>
|
||||
<WizardPanel tab={{...}}>
|
||||
<TabPanel tabId=\\"tab1\\" active={true} className=\\"wizard-step\\" tag=\\"div\\">
|
||||
<div className=\\"wizard-step\\" id=\\"tab1-panel\\" onKeyDown={[Function: bound ]} role=\\"tabpanel\\" style={{...}} aria-hidden={false} aria-describedby=\\"tab1\\">
|
||||
<button onClick={[Function: res]} />
|
||||
</div>
|
||||
</TabPanel>
|
||||
</WizardPanel>
|
||||
<WizardPanel tab={{...}}>
|
||||
<TabPanel tabId=\\"tab2\\" active={false} className=\\"wizard-step\\" tag=\\"div\\">
|
||||
<div className=\\"wizard-step\\" id=\\"tab2-panel\\" onKeyDown={[Function: bound ]} role=\\"tabpanel\\" style={{...}} aria-hidden={true} aria-describedby=\\"tab2\\">
|
||||
<button onClick={[Function: res]} />
|
||||
</div>
|
||||
</TabPanel>
|
||||
</WizardPanel>
|
||||
<WizardPanel tab={{...}}>
|
||||
<TabPanel tabId=\\"tab3\\" active={false} className=\\"wizard-step\\" tag=\\"div\\">
|
||||
<div className=\\"wizard-step\\" id=\\"tab3-panel\\" onKeyDown={[Function: bound ]} role=\\"tabpanel\\" style={{...}} aria-hidden={true} aria-describedby=\\"tab3\\">
|
||||
<button onClick={[Function: res]} />
|
||||
</div>
|
||||
</TabPanel>
|
||||
</WizardPanel>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</Wrapper>
|
||||
</Wizard>
|
||||
</OuterWrapper>"
|
||||
`;
|
||||
|
||||
exports[`Wizard go to the second tab go to next via backend 1`] = `
|
||||
"<OuterWrapper state={{...}} disabledTabs={false} __childrenCreator={[Function]} intl={{...}}>
|
||||
<Wizard wizardState={{...}} disableTabs={false}>
|
||||
<Wrapper manager={{...}} tag=\\"section\\" style={{...}} className=\\"wizard-steps\\">
|
||||
<section style={{...}} className=\\"wizard-steps\\">
|
||||
<WizardTabList wizardState={{...}} disableTabs={false}>
|
||||
<TabList tag=\\"div\\" className=\\"wizard-index\\">
|
||||
<div role=\\"tablist\\" className=\\"wizard-index\\">
|
||||
<InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
|
||||
<WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
|
||||
<Tab tag=\\"span\\" active={false} className=\\"wizard-index-label is-accessible\\" style={{...}} id=\\"tab1\\" role=\\"tab\\">
|
||||
<span id=\\"tab1\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab1-panel\\" className=\\"wizard-index-label is-accessible\\" style={{...}}>
|
||||
Label1
|
||||
</span>
|
||||
</Tab>
|
||||
</WizardTab>
|
||||
</InjectIntl(WizardTab)>
|
||||
<InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
|
||||
<WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
|
||||
<Tab tag=\\"span\\" active={true} className=\\"wizard-index-label is-current is-accessible\\" style={{...}} id=\\"tab2\\" role=\\"tab\\">
|
||||
<span id=\\"tab2\\" tabIndex={0} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={true} aria-controls=\\"tab2-panel\\" className=\\"wizard-index-label is-current is-accessible\\" style={{...}}>
|
||||
Label2
|
||||
</span>
|
||||
</Tab>
|
||||
</WizardTab>
|
||||
</InjectIntl(WizardTab)>
|
||||
<InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
|
||||
<WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
|
||||
<Tab tag=\\"span\\" active={false} className=\\"wizard-index-label is-accessible\\" style={{...}} id=\\"tab3\\" role=\\"tab\\">
|
||||
<span id=\\"tab3\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab3-panel\\" className=\\"wizard-index-label is-accessible\\" style={{...}}>
|
||||
Label3
|
||||
</span>
|
||||
</Tab>
|
||||
</WizardTab>
|
||||
</InjectIntl(WizardTab)>
|
||||
</div>
|
||||
</TabList>
|
||||
</WizardTabList>
|
||||
<div className=\\"modal-body\\">
|
||||
<form onSubmit={[Function]}>
|
||||
<WizardPanel tab={{...}}>
|
||||
<TabPanel tabId=\\"tab1\\" active={false} className=\\"wizard-step\\" tag=\\"div\\">
|
||||
<div className=\\"wizard-step\\" id=\\"tab1-panel\\" onKeyDown={[Function: bound ]} role=\\"tabpanel\\" style={{...}} aria-hidden={true} aria-describedby=\\"tab1\\">
|
||||
<button onClick={[Function: res]} />
|
||||
</div>
|
||||
</TabPanel>
|
||||
</WizardPanel>
|
||||
<WizardPanel tab={{...}}>
|
||||
<TabPanel tabId=\\"tab2\\" active={true} className=\\"wizard-step\\" tag=\\"div\\">
|
||||
<div className=\\"wizard-step\\" id=\\"tab2-panel\\" onKeyDown={[Function: bound ]} role=\\"tabpanel\\" style={{...}} aria-hidden={false} aria-describedby=\\"tab2\\">
|
||||
<button onClick={[Function: res]} />
|
||||
</div>
|
||||
</TabPanel>
|
||||
</WizardPanel>
|
||||
<WizardPanel tab={{...}}>
|
||||
<TabPanel tabId=\\"tab3\\" active={false} className=\\"wizard-step\\" tag=\\"div\\">
|
||||
<div className=\\"wizard-step\\" id=\\"tab3-panel\\" onKeyDown={[Function: bound ]} role=\\"tabpanel\\" style={{...}} aria-hidden={true} aria-describedby=\\"tab3\\">
|
||||
<button onClick={[Function: res]} />
|
||||
</div>
|
||||
</TabPanel>
|
||||
</WizardPanel>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</Wrapper>
|
||||
</Wizard>
|
||||
</OuterWrapper>"
|
||||
`;
|
||||
|
||||
exports[`Wizard go to the second tab set via next click 1`] = `
|
||||
"<OuterWrapper state={{...}} disabledTabs={false} __childrenCreator={[Function]} intl={{...}}>
|
||||
<Wizard wizardState={{...}} disableTabs={false}>
|
||||
<Wrapper manager={{...}} tag=\\"section\\" style={{...}} className=\\"wizard-steps\\">
|
||||
<section style={{...}} className=\\"wizard-steps\\">
|
||||
<WizardTabList wizardState={{...}} disableTabs={false}>
|
||||
<TabList tag=\\"div\\" className=\\"wizard-index\\">
|
||||
<div role=\\"tablist\\" className=\\"wizard-index\\">
|
||||
<InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
|
||||
<WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
|
||||
<Tab tag=\\"span\\" active={false} className=\\"wizard-index-label is-accessible\\" style={{...}} id=\\"tab1\\" role=\\"tab\\">
|
||||
<span id=\\"tab1\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab1-panel\\" className=\\"wizard-index-label is-accessible\\" style={{...}}>
|
||||
Label1
|
||||
</span>
|
||||
</Tab>
|
||||
</WizardTab>
|
||||
</InjectIntl(WizardTab)>
|
||||
<InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
|
||||
<WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
|
||||
<Tab tag=\\"span\\" active={true} className=\\"wizard-index-label is-current is-accessible\\" style={{...}} id=\\"tab2\\" role=\\"tab\\">
|
||||
<span id=\\"tab2\\" tabIndex={0} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={true} aria-controls=\\"tab2-panel\\" className=\\"wizard-index-label is-current is-accessible\\" style={{...}}>
|
||||
Label2
|
||||
</span>
|
||||
</Tab>
|
||||
</WizardTab>
|
||||
</InjectIntl(WizardTab)>
|
||||
<InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
|
||||
<WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
|
||||
<Tab tag=\\"span\\" active={false} className=\\"wizard-index-label is-accessible\\" style={{...}} id=\\"tab3\\" role=\\"tab\\">
|
||||
<span id=\\"tab3\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab3-panel\\" className=\\"wizard-index-label is-accessible\\" style={{...}}>
|
||||
Label3
|
||||
</span>
|
||||
</Tab>
|
||||
</WizardTab>
|
||||
</InjectIntl(WizardTab)>
|
||||
</div>
|
||||
</TabList>
|
||||
</WizardTabList>
|
||||
<div className=\\"modal-body\\">
|
||||
<form onSubmit={[Function]}>
|
||||
<WizardPanel tab={{...}}>
|
||||
<TabPanel tabId=\\"tab1\\" active={false} className=\\"wizard-step\\" tag=\\"div\\">
|
||||
<div className=\\"wizard-step\\" id=\\"tab1-panel\\" onKeyDown={[Function: bound ]} role=\\"tabpanel\\" style={{...}} aria-hidden={true} aria-describedby=\\"tab1\\">
|
||||
<button onClick={[Function: res]} />
|
||||
</div>
|
||||
</TabPanel>
|
||||
</WizardPanel>
|
||||
<WizardPanel tab={{...}}>
|
||||
<TabPanel tabId=\\"tab2\\" active={true} className=\\"wizard-step\\" tag=\\"div\\">
|
||||
<div className=\\"wizard-step\\" id=\\"tab2-panel\\" onKeyDown={[Function: bound ]} role=\\"tabpanel\\" style={{...}} aria-hidden={false} aria-describedby=\\"tab2\\">
|
||||
<button onClick={[Function: res]} />
|
||||
</div>
|
||||
</TabPanel>
|
||||
</WizardPanel>
|
||||
<WizardPanel tab={{...}}>
|
||||
<TabPanel tabId=\\"tab3\\" active={false} className=\\"wizard-step\\" tag=\\"div\\">
|
||||
<div className=\\"wizard-step\\" id=\\"tab3-panel\\" onKeyDown={[Function: bound ]} role=\\"tabpanel\\" style={{...}} aria-hidden={true} aria-describedby=\\"tab3\\">
|
||||
<button onClick={[Function: res]} />
|
||||
</div>
|
||||
</TabPanel>
|
||||
</WizardPanel>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</Wrapper>
|
||||
</Wizard>
|
||||
</OuterWrapper>"
|
||||
`;
|
||||
|
||||
exports[`Wizard go to the second tab set via tab click 1`] = `
|
||||
"<OuterWrapper state={{...}} disabledTabs={false} __childrenCreator={[Function]} intl={{...}}>
|
||||
<Wizard wizardState={{...}} disableTabs={false}>
|
||||
<Wrapper manager={{...}} tag=\\"section\\" style={{...}} className=\\"wizard-steps\\">
|
||||
<section style={{...}} className=\\"wizard-steps\\">
|
||||
<WizardTabList wizardState={{...}} disableTabs={false}>
|
||||
<TabList tag=\\"div\\" className=\\"wizard-index\\">
|
||||
<div role=\\"tablist\\" className=\\"wizard-index\\">
|
||||
<InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
|
||||
<WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
|
||||
<Tab tag=\\"span\\" active={false} className=\\"wizard-index-label is-accessible\\" style={{...}} id=\\"tab1\\" role=\\"tab\\">
|
||||
<span id=\\"tab1\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab1-panel\\" className=\\"wizard-index-label is-accessible\\" style={{...}}>
|
||||
Label1
|
||||
</span>
|
||||
</Tab>
|
||||
</WizardTab>
|
||||
</InjectIntl(WizardTab)>
|
||||
<InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
|
||||
<WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
|
||||
<Tab tag=\\"span\\" active={true} className=\\"wizard-index-label is-current is-accessible\\" style={{...}} id=\\"tab2\\" role=\\"tab\\">
|
||||
<span id=\\"tab2\\" tabIndex={0} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={true} aria-controls=\\"tab2-panel\\" className=\\"wizard-index-label is-current is-accessible\\" style={{...}}>
|
||||
Label2
|
||||
</span>
|
||||
</Tab>
|
||||
</WizardTab>
|
||||
</InjectIntl(WizardTab)>
|
||||
<InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
|
||||
<WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
|
||||
<Tab tag=\\"span\\" active={false} className=\\"wizard-index-label is-accessible\\" style={{...}} id=\\"tab3\\" role=\\"tab\\">
|
||||
<span id=\\"tab3\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab3-panel\\" className=\\"wizard-index-label is-accessible\\" style={{...}}>
|
||||
Label3
|
||||
</span>
|
||||
</Tab>
|
||||
</WizardTab>
|
||||
</InjectIntl(WizardTab)>
|
||||
</div>
|
||||
</TabList>
|
||||
</WizardTabList>
|
||||
<div className=\\"modal-body\\">
|
||||
<form onSubmit={[Function]}>
|
||||
<WizardPanel tab={{...}}>
|
||||
<TabPanel tabId=\\"tab1\\" active={false} className=\\"wizard-step\\" tag=\\"div\\">
|
||||
<div className=\\"wizard-step\\" id=\\"tab1-panel\\" onKeyDown={[Function: bound ]} role=\\"tabpanel\\" style={{...}} aria-hidden={true} aria-describedby=\\"tab1\\">
|
||||
<button onClick={[Function: res]} />
|
||||
</div>
|
||||
</TabPanel>
|
||||
</WizardPanel>
|
||||
<WizardPanel tab={{...}}>
|
||||
<TabPanel tabId=\\"tab2\\" active={true} className=\\"wizard-step\\" tag=\\"div\\">
|
||||
<div className=\\"wizard-step\\" id=\\"tab2-panel\\" onKeyDown={[Function: bound ]} role=\\"tabpanel\\" style={{...}} aria-hidden={false} aria-describedby=\\"tab2\\">
|
||||
<button onClick={[Function: res]} />
|
||||
</div>
|
||||
</TabPanel>
|
||||
</WizardPanel>
|
||||
<WizardPanel tab={{...}}>
|
||||
<TabPanel tabId=\\"tab3\\" active={false} className=\\"wizard-step\\" tag=\\"div\\">
|
||||
<div className=\\"wizard-step\\" id=\\"tab3-panel\\" onKeyDown={[Function: bound ]} role=\\"tabpanel\\" style={{...}} aria-hidden={true} aria-describedby=\\"tab3\\">
|
||||
<button onClick={[Function: res]} />
|
||||
</div>
|
||||
</TabPanel>
|
||||
</WizardPanel>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</Wrapper>
|
||||
</Wizard>
|
||||
</OuterWrapper>"
|
||||
`;
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`WizardPanel shallow render 1`] = `
|
||||
<AriaTabPanel-TabPanel
|
||||
<TabPanel
|
||||
active={true}
|
||||
anotherProp={false}
|
||||
className="wizard-step"
|
||||
|
|
@ -9,5 +9,5 @@ exports[`WizardPanel shallow render 1`] = `
|
|||
tag="div"
|
||||
>
|
||||
<hr />
|
||||
</AriaTabPanel-TabPanel>
|
||||
</TabPanel>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,253 @@
|
|||
// License: LGPL-3.0-or-later
|
||||
import * as React from 'react';
|
||||
import 'jest';
|
||||
import {AbstractWizardState, AbstractWizardTabPanelState} from './abstract_wizard_state'
|
||||
import {observable, action, computed} from 'mobx'
|
||||
import {UniqueIdMock} from "../tests/unique_id_mock";
|
||||
|
||||
let uniqueIdMock = new UniqueIdMock();
|
||||
|
||||
class MockableTabPanelState extends AbstractWizardTabPanelState {
|
||||
@observable
|
||||
customIsValid: boolean;
|
||||
|
||||
@action.bound
|
||||
setValid(validity:boolean){
|
||||
this.customIsValid = validity;
|
||||
}
|
||||
|
||||
@computed
|
||||
get isValid():boolean {
|
||||
return this.customIsValid
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class EasyWizardState extends AbstractWizardState<MockableTabPanelState> {
|
||||
constructor() {
|
||||
super(MockableTabPanelState)
|
||||
}
|
||||
|
||||
//we mock this because we want to skip the focus group code for these tests
|
||||
@action.bound
|
||||
focusTab(id:string) : void {
|
||||
this.activateTab(id)
|
||||
}
|
||||
}
|
||||
|
||||
describe('AbstractWizardState', () => {
|
||||
|
||||
let data =
|
||||
{
|
||||
tab1: {
|
||||
tabName: "Tab1",
|
||||
label: "Label1"
|
||||
},
|
||||
tab2: {
|
||||
tabName: "Tab2",
|
||||
label: "Label2"
|
||||
},
|
||||
tab3: {
|
||||
tabName: "Tab3",
|
||||
label: "Label3"
|
||||
},
|
||||
|
||||
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
uniqueIdMock.reset()
|
||||
});
|
||||
|
||||
it('.addTab', () =>{
|
||||
let state = new EasyWizardState();
|
||||
|
||||
|
||||
state.addTab({tabName:data.tab1.tabName, label:data.tab1.label});
|
||||
|
||||
|
||||
let tab = state.tabsByName[data.tab1.tabName];
|
||||
expect(tab.tabName).toBe(data.tab1.tabName);
|
||||
expect(tab.label).toBe(data.tab1.label);
|
||||
expect(tab.enabled).toBe(true);
|
||||
expect(tab.previous).toBe(null);
|
||||
expect(tab.next).toBe(null)
|
||||
});
|
||||
|
||||
it('prevents going to next if next isnt enabled', () =>{
|
||||
let state = new EasyWizardState();
|
||||
|
||||
state.addTab({tabName:data.tab1.tabName, label:data.tab1.label});
|
||||
state.addTab({tabName:data.tab2.tabName, label:data.tab2.label});
|
||||
|
||||
|
||||
expect(state.activeTab).toBe(state.tabsByName[data.tab1.tabName]);
|
||||
state.activateTab(state.tabsByName[data.tab2.tabName].id);
|
||||
expect(state.activeTab).toBe(state.tabsByName[data.tab1.tabName]);
|
||||
expect(state.tabsByName[data.tab2.tabName].active).toBeFalsy()
|
||||
});
|
||||
|
||||
describe('go to next and back', () => {
|
||||
let state = new EasyWizardState();
|
||||
|
||||
state.addTab({tabName:data.tab1.tabName, label:data.tab1.label});
|
||||
state.addTab({tabName:data.tab2.tabName, label:data.tab2.label});
|
||||
state.addTab({tabName:data.tab3.tabName, label:data.tab3.label});
|
||||
|
||||
let tab1 = state.tabsByName[data.tab1.tabName];
|
||||
tab1.setValid(true);
|
||||
let tab2 = (state.tabsByName[data.tab2.tabName] as MockableTabPanelState);
|
||||
tab2.setValid(true);
|
||||
let tab3 = state.tabsByName[data.tab3.tabName];
|
||||
it('go to next', () =>{
|
||||
expect(state.nextTab).toBe(tab2);
|
||||
expect(state.previousTab).toBeNull();
|
||||
|
||||
state.moveToNextTab();
|
||||
|
||||
expect(state.activeTab).toBe(tab2);
|
||||
|
||||
expect(state.previousTab).toBe(tab1);
|
||||
expect(state.nextTab).toBe(tab3);
|
||||
|
||||
expect(tab1.active).toBeFalsy();
|
||||
expect(tab3.active).toBeFalsy()
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
describe('handle moving back to tabs when one is disabled', () => {
|
||||
|
||||
let state:EasyWizardState = null;
|
||||
let tab1: MockableTabPanelState, tab2: MockableTabPanelState, tab3 : MockableTabPanelState = null;
|
||||
|
||||
beforeEach(() => {
|
||||
state = new EasyWizardState();
|
||||
state.addTab({tabName:data.tab1.tabName, label:data.tab1.label});
|
||||
state.addTab({tabName:data.tab2.tabName, label:data.tab2.label});
|
||||
state.addTab({tabName:data.tab3.tabName, label:data.tab3.label});
|
||||
|
||||
tab1 = (state.tabsByName[data.tab1.tabName] as MockableTabPanelState);
|
||||
tab1.setValid(true);
|
||||
tab2 = (state.tabsByName[data.tab2.tabName] as MockableTabPanelState);
|
||||
tab2.setValid(true);
|
||||
tab3 = (state.tabsByName[data.tab3.tabName]as MockableTabPanelState)
|
||||
});
|
||||
|
||||
it ('move back to previous tab if the current one is disabled', () =>{
|
||||
|
||||
state.activateTab(tab3);
|
||||
|
||||
expect(tab3.active).toBe(true);
|
||||
|
||||
expect(tab1.active).toBe(false);
|
||||
expect(tab2.active).toBe(false);
|
||||
tab2.setValid(false);
|
||||
|
||||
expect(tab3.active).toBe(false);
|
||||
expect(tab2.active).toBe(true);
|
||||
expect(state.activeTab).toBe(tab2)
|
||||
});
|
||||
|
||||
it ('move back to first tab if all but that one is disabled', () =>{
|
||||
state.activateTab(tab3);
|
||||
|
||||
expect(tab3.active).toBe(true);
|
||||
|
||||
tab2.setValid(false);
|
||||
tab1.setValid(false);
|
||||
|
||||
expect(tab3.active).toBe(false);
|
||||
expect(tab2.active).toBe(false);
|
||||
expect(tab1.active).toBe(true);
|
||||
expect(state.activeTab).toBe(tab1);
|
||||
|
||||
|
||||
tab1.setValid(true);
|
||||
expect(state.activeTab).toBe(tab1);
|
||||
|
||||
|
||||
tab1.setValid(false);
|
||||
expect(state.activeTab).toBe(tab1);
|
||||
|
||||
|
||||
state.moveToNextTab();
|
||||
expect(state.activeTab).toBe(tab1);
|
||||
|
||||
|
||||
tab2.setValid(true);
|
||||
expect(state.activeTab).toBe(tab1)
|
||||
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
describe("before works properly", () =>{
|
||||
let state:EasyWizardState = null;
|
||||
let tab1: MockableTabPanelState, tab2: MockableTabPanelState, tab3 : MockableTabPanelState = null;
|
||||
beforeEach(() => {
|
||||
state = new EasyWizardState();
|
||||
state.addTab({tabName:data.tab1.tabName, label:data.tab1.label});
|
||||
|
||||
tab1 = (state.tabsByName[data.tab1.tabName] as MockableTabPanelState)
|
||||
});
|
||||
|
||||
it("handles before when nothing else in it",() =>{
|
||||
|
||||
let tab2 = new MockableTabPanelState();
|
||||
|
||||
expect(tab1.before(tab2)).toBeFalsy()
|
||||
});
|
||||
|
||||
it("handles before before When nothing else in it",() =>{
|
||||
|
||||
state.addTab({tabName:data.tab2.tabName, label:data.tab2.label});
|
||||
|
||||
tab2 = (state.tabsByName[data.tab2.tabName] as MockableTabPanelState);
|
||||
expect(tab1.before(tab2)).toBeTruthy();
|
||||
expect(tab2.before(tab1)).toBeFalsy();
|
||||
tab3 = new MockableTabPanelState();
|
||||
|
||||
expect(tab2.before(tab3)).toBeFalsy();
|
||||
expect(tab3.before(tab2)).toBeFalsy()
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
describe("after works properly", () =>{
|
||||
let state:EasyWizardState = null;
|
||||
let tab1: MockableTabPanelState, tab2: MockableTabPanelState, tab3 : MockableTabPanelState = null;
|
||||
beforeEach(() => {
|
||||
state = new EasyWizardState();
|
||||
state.addTab({tabName:data.tab1.tabName, label:data.tab1.label});
|
||||
|
||||
tab1 = (state.tabsByName[data.tab1.tabName] as MockableTabPanelState)
|
||||
});
|
||||
|
||||
it("handles before when nothing else in it",() =>{
|
||||
|
||||
let tab2 = new MockableTabPanelState();
|
||||
|
||||
expect(tab1.after(tab2)).toBeFalsy();
|
||||
expect(tab2.after(tab1)).toBeFalsy()
|
||||
});
|
||||
|
||||
it("handles before before When nothing else in it",() =>{
|
||||
|
||||
state.addTab({tabName:data.tab2.tabName, label:data.tab2.label});
|
||||
|
||||
tab2 = (state.tabsByName[data.tab2.tabName] as MockableTabPanelState);
|
||||
expect(tab2.after(tab1)).toBeTruthy();
|
||||
expect(tab1.after(tab2)).toBeFalsy();
|
||||
tab3 = new MockableTabPanelState();
|
||||
|
||||
expect(tab2.before(tab3)).toBeFalsy();
|
||||
expect(tab3.before(tab2)).toBeFalsy()
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
// License: LGPL-3.0-or-later
|
||||
import {computed, reaction} from "mobx";
|
||||
import {AbstractTabComponentState, AbstractTabPanelState} from "./RAT/abstract_tabcomponent_state";
|
||||
import _ = require("lodash");
|
||||
|
||||
export abstract class AbstractWizardState<PanelStateType extends AbstractWizardTabPanelState = AbstractWizardTabPanelState>
|
||||
extends AbstractTabComponentState<PanelStateType> {
|
||||
|
||||
|
||||
addTab(tab: { tabName: string, label: string }): PanelStateType {
|
||||
const ret = super.addTab(tab);
|
||||
|
||||
reaction(() => this.lastConsistentlyEnabledTab, (data, react) => {
|
||||
this.strategy(this)
|
||||
});
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
@computed
|
||||
get firstDisabledTab(): PanelStateType {
|
||||
return _.find(this.panels, (i) => !i.enabled)
|
||||
}
|
||||
|
||||
@computed
|
||||
get lastConsistentlyEnabledTab(): PanelStateType {
|
||||
return this.firstDisabledTab ? this.firstDisabledTab.previous : _.last(this.panels)
|
||||
}
|
||||
|
||||
protected strategy(state: this) {
|
||||
if (this.lastConsistentlyEnabledTab.before(this.activeTab)) {
|
||||
this.activateTab(this.lastConsistentlyEnabledTab)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export abstract class AbstractWizardTabPanelState extends AbstractTabPanelState {
|
||||
/**
|
||||
* Whether this tab's form is valid. We override this in a mock so we can manually set the validity
|
||||
* via a simple function call
|
||||
* @returns {boolean} true if this tab's form is valid, otherwise false
|
||||
*/
|
||||
abstract get isValid(): boolean
|
||||
|
||||
@computed
|
||||
get enabled(): boolean {
|
||||
|
||||
const previous = this.previous;
|
||||
|
||||
if (previous) {
|
||||
const enabled = previous.enabled;
|
||||
const valid = previous.isValid;
|
||||
return enabled && valid
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,120 +0,0 @@
|
|||
// License: ISC
|
||||
// from https://github.com/davidtheclark/react-aria-tabpanel
|
||||
var createFocusGroup = require('focus-group');
|
||||
|
||||
/**
|
||||
* Exact same as normal TabManager but includes a callback for verifying we can actually change to a
|
||||
* new tab
|
||||
*/
|
||||
export class TabManager {
|
||||
options: any
|
||||
focusGroup: any
|
||||
tabs: any
|
||||
activeTabId: any
|
||||
tabPanels: any
|
||||
|
||||
constructor(options: any) {
|
||||
this.options = options;
|
||||
|
||||
var focusGroupOptions = {
|
||||
wrap: true,
|
||||
forwardArrows: ['down', 'right'],
|
||||
backArrows: ['up', 'left'],
|
||||
stringSearch: options.letterNavigation,
|
||||
};
|
||||
|
||||
this.focusGroup = createFocusGroup(focusGroupOptions);
|
||||
|
||||
// These component references are added when the relevant components mount
|
||||
this.tabs = [];
|
||||
this.tabPanels = [];
|
||||
|
||||
this.activeTabId = options.activeTabId;
|
||||
}
|
||||
|
||||
activate() {
|
||||
this.focusGroup.activate();
|
||||
};
|
||||
|
||||
memberStartsActive(tabId: any) {
|
||||
if (this.activeTabId === tabId) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (this.activeTabId === undefined) {
|
||||
this.activeTabId = tabId;
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
registerTab(tabMember: any) {
|
||||
if (tabMember.index === undefined) {
|
||||
this.tabs.push(tabMember);
|
||||
} else {
|
||||
this.tabs.splice(tabMember.index, 0, tabMember);
|
||||
}
|
||||
|
||||
var focusGroupMember = (tabMember.letterNavigationText) ? {
|
||||
node: tabMember.node,
|
||||
text: tabMember.letterNavigationText,
|
||||
} : tabMember.node;
|
||||
|
||||
this.focusGroup.addMember(focusGroupMember, tabMember.index);
|
||||
|
||||
this.activateTab(this.activeTabId || tabMember.id);
|
||||
};
|
||||
|
||||
registerTabPanel(tabPanelMember: any) {
|
||||
this.tabPanels.push(tabPanelMember);
|
||||
this.activateTab(this.activeTabId);
|
||||
|
||||
this.activateTab(this.activeTabId || tabPanelMember.tabId);
|
||||
};
|
||||
|
||||
activateTab(nextActiveTabId: any) {
|
||||
if (this.options.canChangeTo) {
|
||||
if (!this.options.canChangeTo(nextActiveTabId)) {
|
||||
return;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
if (nextActiveTabId === this.activeTabId) return;
|
||||
this.activeTabId = nextActiveTabId;
|
||||
|
||||
if (this.options.onChange) {
|
||||
this.options.onChange(nextActiveTabId);
|
||||
return;
|
||||
}
|
||||
|
||||
this.tabPanels.forEach(function (tabPanelMember: any) {
|
||||
tabPanelMember.update(nextActiveTabId === tabPanelMember.tabId);
|
||||
});
|
||||
this.tabs.forEach(function (tabMember: any) {
|
||||
tabMember.update(nextActiveTabId === tabMember.id);
|
||||
});
|
||||
}
|
||||
|
||||
handleTabFocus(focusedTabId: any) {
|
||||
this.activateTab(focusedTabId);
|
||||
};
|
||||
|
||||
focusTab(tabId: any) {
|
||||
var tabMemberToFocus = this.tabs.find(function (tabMember: any) {
|
||||
return tabMember.id === tabId;
|
||||
});
|
||||
if (!tabMemberToFocus) return;
|
||||
tabMemberToFocus.node.focus();
|
||||
};
|
||||
|
||||
destroy() {
|
||||
this.focusGroup.deactivate();
|
||||
};
|
||||
|
||||
getTabPanelId(tabId: any) {
|
||||
return tabId + '-panel';
|
||||
}
|
||||
}
|
||||
|
|
@ -2,252 +2,253 @@
|
|||
import 'jest';
|
||||
import {Form} from "mobx-react-form"
|
||||
import {WizardState, WizardTabPanelState} from "./wizard_state";
|
||||
import {computed, observable, action} from 'mobx';
|
||||
class MockableTabPanelState extends WizardTabPanelState
|
||||
{
|
||||
import {action, computed, observable} from 'mobx';
|
||||
|
||||
class MockableTabPanelState extends WizardTabPanelState {
|
||||
@observable
|
||||
customIsValid: boolean
|
||||
customIsValid: boolean;
|
||||
|
||||
@action.bound
|
||||
setValid(validity:boolean){
|
||||
setValid(validity: boolean) {
|
||||
this.customIsValid = validity;
|
||||
}
|
||||
|
||||
@computed
|
||||
get isValid():boolean {
|
||||
get isValid(): boolean {
|
||||
return this.customIsValid
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class EasyWizardState extends WizardState{
|
||||
constructor(){
|
||||
class EasyWizardState extends WizardState<MockableTabPanelState> {
|
||||
constructor() {
|
||||
super(MockableTabPanelState)
|
||||
}
|
||||
|
||||
createForm(i: any): Form {
|
||||
return new Form(i)
|
||||
}
|
||||
|
||||
//we mock this because we want to skip the focus group code for these tests
|
||||
@action.bound
|
||||
focusTab(id:string) : void {
|
||||
this.activateTab(id)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
describe("WizardState", () =>{
|
||||
describe("WizardState", () => {
|
||||
let data =
|
||||
{
|
||||
tab1: {
|
||||
tabName: "Tab1",
|
||||
label: "Label1",
|
||||
subFormDef: {extra: "nothing" }
|
||||
subFormDef: {extra: "nothing"}
|
||||
},
|
||||
tab2: {
|
||||
tabName: "Tab2",
|
||||
label: "Label2",
|
||||
subFormDef: {extra: "not" }
|
||||
subFormDef: {extra: "not"}
|
||||
},
|
||||
tab3: {
|
||||
tabName: "Tab3",
|
||||
label: "Label3",
|
||||
subFormDef: {extra: "no3t" }
|
||||
subFormDef: {extra: "no3t"}
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
it('adds tab properly', () =>{
|
||||
let state = new EasyWizardState()
|
||||
};
|
||||
|
||||
it('adds tab properly', () => {
|
||||
let state = new EasyWizardState();
|
||||
|
||||
|
||||
state.addTab(data.tab1.tabName, data.tab1.label, data.tab1.subFormDef)
|
||||
state.initialize()
|
||||
state.addTab({tabName: data.tab1.tabName, label: data.tab1.label, tabFieldDefinition: data.tab1.subFormDef});
|
||||
state.initialize();
|
||||
|
||||
let tab = state.tabsByName[data.tab1.tabName]
|
||||
expect(tab.tabName).toBe(data.tab1.tabName)
|
||||
expect(tab.label).toBe(data.tab1.label)
|
||||
expect(tab.form.extra).toBe(data.tab1.subFormDef.extra)
|
||||
expect(tab.enabled).toBe(true)
|
||||
expect(tab.previous).toBe(null)
|
||||
let tab = state.tabsByName[data.tab1.tabName];
|
||||
expect(tab.tabName).toBe(data.tab1.tabName);
|
||||
expect(tab.label).toBe(data.tab1.label);
|
||||
expect(tab.form.extra).toBe(data.tab1.subFormDef.extra);
|
||||
expect(tab.enabled).toBe(true);
|
||||
expect(tab.previous).toBe(null);
|
||||
expect(tab.next).toBe(null)
|
||||
})
|
||||
});
|
||||
|
||||
it('prevents going to next if next isnt enabled', () =>{
|
||||
let state = new EasyWizardState()
|
||||
it('prevents going to next if next isnt enabled', () => {
|
||||
let state = new EasyWizardState();
|
||||
|
||||
state.addTab(data.tab1.tabName, data.tab1.label, data.tab1.subFormDef)
|
||||
state.addTab(data.tab2.tabName, data.tab2.label, data.tab2.subFormDef)
|
||||
state.initialize()
|
||||
state.addTab({tabName: data.tab1.tabName, label: data.tab1.label, tabFieldDefinition: data.tab1.subFormDef});
|
||||
state.addTab({tabName: data.tab2.tabName, label: data.tab2.label, tabFieldDefinition: data.tab2.subFormDef});
|
||||
state.initialize();
|
||||
|
||||
expect(state.activeTab).toBe(state.tabsByName[data.tab1.tabName])
|
||||
state.activateTab(state.tabsByName[data.tab2.tabName].id)
|
||||
expect(state.activeTab).toBe(state.tabsByName[data.tab1.tabName])
|
||||
expect(state.activeTab).toBe(state.tabsByName[data.tab1.tabName]);
|
||||
state.tabsByName[data.tab1.tabName].setValid(false);
|
||||
state.activateTab(state.tabsByName[data.tab2.tabName].id);
|
||||
expect(state.activeTab).toBe(state.tabsByName[data.tab1.tabName]);
|
||||
expect(state.tabsByName[data.tab2.tabName].active).toBeFalsy()
|
||||
})
|
||||
});
|
||||
|
||||
describe('go to next and back', () => {
|
||||
let state = new EasyWizardState()
|
||||
let state = new EasyWizardState();
|
||||
|
||||
state.addTab(data.tab1.tabName, data.tab1.label, data.tab1.subFormDef)
|
||||
state.addTab(data.tab2.tabName, data.tab2.label, data.tab2.subFormDef)
|
||||
state.addTab(data.tab3.tabName, data.tab3.label, data.tab3.subFormDef)
|
||||
state.initialize()
|
||||
state.addTab({tabName: data.tab1.tabName, label: data.tab1.label, tabFieldDefinition: data.tab1.subFormDef});
|
||||
state.addTab({tabName: data.tab2.tabName, label: data.tab2.label, tabFieldDefinition: data.tab2.subFormDef});
|
||||
state.addTab({tabName: data.tab3.tabName, label: data.tab3.label, tabFieldDefinition: data.tab3.subFormDef});
|
||||
state.initialize();
|
||||
|
||||
let tab1 = (state.tabsByName[data.tab1.tabName] as MockableTabPanelState)
|
||||
tab1.setValid(true)
|
||||
let tab2 = (state.tabsByName[data.tab2.tabName] as MockableTabPanelState)
|
||||
tab2.setValid(true)
|
||||
let tab3 = state.tabsByName[data.tab3.tabName]
|
||||
it('go to next', () =>{
|
||||
expect(state.nextTab).toBe(tab2)
|
||||
expect(state.previousTab).toBeNull()
|
||||
let tab1 = state.tabsByName[data.tab1.tabName];
|
||||
tab1.setValid(true);
|
||||
let tab2 = (state.tabsByName[data.tab2.tabName] as MockableTabPanelState);
|
||||
tab2.setValid(true);
|
||||
let tab3 = state.tabsByName[data.tab3.tabName];
|
||||
it('go to next', () => {
|
||||
expect(state.nextTab).toBe(tab2);
|
||||
expect(state.previousTab).toBeNull();
|
||||
|
||||
state.moveToNextTab()
|
||||
state.moveToNextTab();
|
||||
|
||||
expect(state.activeTab).toBe(tab2)
|
||||
expect(state.manager.activeTabId).toBe(tab2.id)
|
||||
expect(state.previousTab).toBe(tab1)
|
||||
expect(state.nextTab).toBe(tab3)
|
||||
expect(state.activeTab).toBe(tab2);
|
||||
expect(state.previousTab).toBe(tab1);
|
||||
expect(state.nextTab).toBe(tab3);
|
||||
|
||||
expect(tab1.active).toBeFalsy()
|
||||
expect(tab1.active).toBeFalsy();
|
||||
expect(tab3.active).toBeFalsy()
|
||||
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
describe('handle moving back to tabs when one is disabled', () => {
|
||||
|
||||
let state:EasyWizardState = null
|
||||
let tab1: MockableTabPanelState, tab2: MockableTabPanelState, tab3 : MockableTabPanelState = null
|
||||
let state: EasyWizardState = null;
|
||||
let tab1: MockableTabPanelState, tab2: MockableTabPanelState, tab3: MockableTabPanelState = null;
|
||||
|
||||
beforeEach(() => {
|
||||
state = new EasyWizardState()
|
||||
state.addTab(data.tab1.tabName, data.tab1.label, data.tab1.subFormDef)
|
||||
state.addTab(data.tab2.tabName, data.tab2.label, data.tab2.subFormDef)
|
||||
state.addTab(data.tab3.tabName, data.tab3.label, data.tab3.subFormDef)
|
||||
state.initialize()
|
||||
tab1 = (state.tabsByName[data.tab1.tabName] as MockableTabPanelState)
|
||||
tab1.setValid(true)
|
||||
tab2 = (state.tabsByName[data.tab2.tabName] as MockableTabPanelState)
|
||||
tab2.setValid(true)
|
||||
state = new EasyWizardState();
|
||||
state.addTab({tabName: data.tab1.tabName, label: data.tab1.label, tabFieldDefinition: data.tab1.subFormDef});
|
||||
state.addTab({tabName: data.tab2.tabName, label: data.tab2.label, tabFieldDefinition: data.tab2.subFormDef});
|
||||
state.addTab({tabName: data.tab3.tabName, label: data.tab3.label, tabFieldDefinition: data.tab3.subFormDef});
|
||||
state.initialize();
|
||||
tab1 = (state.tabsByName[data.tab1.tabName] as MockableTabPanelState);
|
||||
tab1.setValid(true);
|
||||
tab2 = (state.tabsByName[data.tab2.tabName] as MockableTabPanelState);
|
||||
tab2.setValid(true);
|
||||
tab3 = (state.tabsByName[data.tab3.tabName]as MockableTabPanelState)
|
||||
})
|
||||
});
|
||||
|
||||
it ('move back to previous tab if the current one is disabled', () =>{
|
||||
it('move back to previous tab if the current one is disabled', () => {
|
||||
|
||||
state.activateTab(tab3)
|
||||
state.activateTab(tab3);
|
||||
|
||||
expect(tab3.active).toBe(true)
|
||||
expect(state.manager.activeTabId).toBe(tab3.id)
|
||||
expect(tab1.active).toBe(false)
|
||||
expect(tab2.active).toBe(false)
|
||||
tab2.setValid(false)
|
||||
expect(tab3.active).toBe(true);
|
||||
expect(tab1.active).toBe(false);
|
||||
expect(tab2.active).toBe(false);
|
||||
tab2.setValid(false);
|
||||
|
||||
expect(tab3.active).toBe(false)
|
||||
expect(tab2.active).toBe(true)
|
||||
expect(tab3.active).toBe(false);
|
||||
expect(tab2.active).toBe(true);
|
||||
expect(state.activeTab).toBe(tab2)
|
||||
expect(state.manager.activeTabId).toBe(tab2.id)
|
||||
});
|
||||
|
||||
it('move back to first tab if all but that one is disabled', () => {
|
||||
state.activateTab(tab3);
|
||||
|
||||
expect(tab3.active).toBe(true);
|
||||
|
||||
tab2.setValid(false);
|
||||
tab1.setValid(false);
|
||||
|
||||
expect(tab3.active).toBe(false);
|
||||
expect(tab2.active).toBe(false);
|
||||
expect(tab1.active).toBe(true);
|
||||
expect(state.activeTab).toBe(tab1);
|
||||
|
||||
tab1.setValid(true);
|
||||
expect(state.activeTab).toBe(tab1);
|
||||
|
||||
|
||||
tab1.setValid(false);
|
||||
expect(state.activeTab).toBe(tab1);
|
||||
|
||||
|
||||
state.moveToNextTab();
|
||||
expect(state.activeTab).toBe(tab1);
|
||||
|
||||
|
||||
tab2.setValid(true);
|
||||
expect(state.activeTab).toBe(tab1)
|
||||
|
||||
})
|
||||
|
||||
it ('move back to first tab if all but that one is disabled', () =>{
|
||||
state.activateTab(tab3)
|
||||
|
||||
expect(tab3.active).toBe(true)
|
||||
expect(state.manager.activeTabId).toBe(tab3.id)
|
||||
tab2.setValid(false)
|
||||
tab1.setValid(false)
|
||||
|
||||
expect(tab3.active).toBe(false)
|
||||
expect(tab2.active).toBe(false)
|
||||
expect(tab1.active).toBe(true)
|
||||
expect(state.activeTab).toBe(tab1)
|
||||
expect(state.manager.activeTabId).toBe(tab1.id)
|
||||
|
||||
tab1.setValid(true)
|
||||
expect(state.activeTab).toBe(tab1)
|
||||
expect(state.manager.activeTabId).toBe(tab1.id)
|
||||
|
||||
tab1.setValid(false)
|
||||
expect(state.activeTab).toBe(tab1)
|
||||
expect(state.manager.activeTabId).toBe(tab1.id)
|
||||
|
||||
state.moveToNextTab()
|
||||
expect(state.activeTab).toBe(tab1)
|
||||
expect(state.manager.activeTabId).toBe(tab1.id)
|
||||
|
||||
tab2.setValid(true)
|
||||
expect(state.activeTab).toBe(tab1)
|
||||
expect(state.manager.activeTabId).toBe(tab1.id)
|
||||
})
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
|
||||
describe("before works properly", () =>{
|
||||
let state:EasyWizardState = null
|
||||
let tab1: MockableTabPanelState, tab2: MockableTabPanelState, tab3 : MockableTabPanelState = null
|
||||
describe("before works properly", () => {
|
||||
let state: EasyWizardState = null;
|
||||
let tab1: MockableTabPanelState, tab2: MockableTabPanelState, tab3: MockableTabPanelState = null;
|
||||
beforeEach(() => {
|
||||
state = new EasyWizardState()
|
||||
state.addTab(data.tab1.tabName, data.tab1.label, data.tab1.subFormDef)
|
||||
state = new EasyWizardState();
|
||||
state.addTab({tabName: data.tab1.tabName, label: data.tab1.label, tabFieldDefinition: data.tab1.subFormDef});
|
||||
|
||||
tab1 = (state.tabsByName[data.tab1.tabName] as MockableTabPanelState)
|
||||
})
|
||||
});
|
||||
|
||||
it("handles before when nothing else in it",() =>{
|
||||
it("handles before when nothing else in it", () => {
|
||||
|
||||
let tab2 = new MockableTabPanelState()
|
||||
state.initialize()
|
||||
let tab2 = new MockableTabPanelState();
|
||||
state.initialize();
|
||||
expect(tab1.before(tab2)).toBeFalsy()
|
||||
})
|
||||
});
|
||||
|
||||
it("handles before before When nothing else in it",() =>{
|
||||
it("handles before before When nothing else in it", () => {
|
||||
|
||||
state.addTab(data.tab2.tabName, data.tab2.label, data.tab2.subFormDef)
|
||||
state.addTab({tabName: data.tab2.tabName, label: data.tab2.label, tabFieldDefinition: data.tab2.subFormDef});
|
||||
state.initialize();
|
||||
tab2 = (state.tabsByName[data.tab2.tabName] as MockableTabPanelState)
|
||||
expect(tab1.before(tab2)).toBeTruthy()
|
||||
expect(tab2.before(tab1)).toBeFalsy()
|
||||
tab3 = new MockableTabPanelState()
|
||||
tab2 = (state.tabsByName[data.tab2.tabName] as MockableTabPanelState);
|
||||
expect(tab1.before(tab2)).toBeTruthy();
|
||||
expect(tab2.before(tab1)).toBeFalsy();
|
||||
tab3 = new MockableTabPanelState();
|
||||
|
||||
expect(tab2.before(tab3)).toBeFalsy()
|
||||
expect(tab2.before(tab3)).toBeFalsy();
|
||||
expect(tab3.before(tab2)).toBeFalsy()
|
||||
})
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
describe("after works properly", () =>{
|
||||
let state:EasyWizardState = null
|
||||
let tab1: MockableTabPanelState, tab2: MockableTabPanelState, tab3 : MockableTabPanelState = null
|
||||
describe("after works properly", () => {
|
||||
let state: EasyWizardState = null;
|
||||
let tab1: MockableTabPanelState, tab2: MockableTabPanelState, tab3: MockableTabPanelState = null;
|
||||
beforeEach(() => {
|
||||
state = new EasyWizardState()
|
||||
state.addTab(data.tab1.tabName, data.tab1.label, data.tab1.subFormDef)
|
||||
state = new EasyWizardState();
|
||||
state.addTab({tabName: data.tab1.tabName, label: data.tab1.label, tabFieldDefinition: data.tab1.subFormDef});
|
||||
|
||||
tab1 = (state.tabsByName[data.tab1.tabName] as MockableTabPanelState)
|
||||
})
|
||||
});
|
||||
|
||||
it("handles before when nothing else in it",() =>{
|
||||
it("handles before when nothing else in it", () => {
|
||||
|
||||
let tab2 = new MockableTabPanelState()
|
||||
state.initialize()
|
||||
expect(tab1.after(tab2)).toBeFalsy()
|
||||
expect(tab2.after(tab1)).toBeFalsy()
|
||||
})
|
||||
|
||||
it("handles before before When nothing else in it",() =>{
|
||||
|
||||
state.addTab(data.tab2.tabName, data.tab2.label, data.tab2.subFormDef)
|
||||
let tab2 = new MockableTabPanelState();
|
||||
state.initialize();
|
||||
tab2 = (state.tabsByName[data.tab2.tabName] as MockableTabPanelState)
|
||||
expect(tab2.after(tab1)).toBeTruthy()
|
||||
expect(tab1.after(tab2)).toBeFalsy()
|
||||
tab3 = new MockableTabPanelState()
|
||||
expect(tab1.after(tab2)).toBeFalsy();
|
||||
expect(tab2.after(tab1)).toBeFalsy()
|
||||
});
|
||||
|
||||
expect(tab2.before(tab3)).toBeFalsy()
|
||||
it("handles before before When nothing else in it", () => {
|
||||
|
||||
state.addTab({tabName: data.tab2.tabName, label: data.tab2.label, tabFieldDefinition: data.tab2.subFormDef});
|
||||
state.initialize();
|
||||
tab2 = (state.tabsByName[data.tab2.tabName] as MockableTabPanelState);
|
||||
expect(tab2.after(tab1)).toBeTruthy();
|
||||
expect(tab1.after(tab2)).toBeFalsy();
|
||||
tab3 = new MockableTabPanelState();
|
||||
|
||||
expect(tab2.before(tab3)).toBeFalsy();
|
||||
expect(tab3.before(tab2)).toBeFalsy()
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,7 @@
|
|||
import {observable, action, computed, toJS, reaction, runInAction} from "mobx";
|
||||
import {Field, Form, FieldDefinition, FieldHandlers, FieldHooks} from "mobx-react-form";
|
||||
import _ = require("lodash");
|
||||
import {TabManager} from "./manager"
|
||||
import {Wizard} from "./Wizard";
|
||||
import {AbstractWizardState, AbstractWizardTabPanelState} from "./abstract_wizard_state";
|
||||
|
||||
interface SubFormDefinition {
|
||||
related?: string[]
|
||||
|
|
@ -15,79 +14,45 @@ interface SubFormDefinition {
|
|||
fields?: Array<FieldDefinition>
|
||||
}
|
||||
|
||||
export abstract class WizardState<PanelStateType extends WizardTabPanelState = WizardTabPanelState> {
|
||||
panelType: { new(): PanelStateType }
|
||||
export abstract class WizardState<PanelStateType extends WizardTabPanelState = WizardTabPanelState,
|
||||
FormStateType extends Form = Form> extends AbstractWizardState<PanelStateType> {
|
||||
|
||||
constructor(panelType: { new(): PanelStateType } = null) {
|
||||
this.panelType = panelType
|
||||
protected constructor(panelType: { new(): PanelStateType }) {
|
||||
super(panelType)
|
||||
}
|
||||
|
||||
@observable
|
||||
lastRequestedTab: WizardTabPanelState
|
||||
@observable form: FormStateType;
|
||||
|
||||
@observable panels = new Array<WizardTabPanelState>()
|
||||
@observable form: Form
|
||||
abstract createForm(i: any): FormStateType;
|
||||
|
||||
@observable manager: TabManager
|
||||
addTab(tab: { tabName: string, label: string, tabFieldDefinition: SubFormDefinition}): PanelStateType {
|
||||
const ret = super.addTab(tab);
|
||||
|
||||
abstract createForm(i: any): Form;
|
||||
runInAction(() => {
|
||||
ret.panelFormDefinition = tab.tabFieldDefinition as FieldDefinition
|
||||
});
|
||||
|
||||
@action.bound
|
||||
private createChildState(): WizardTabPanelState {
|
||||
if (this.panelType)
|
||||
return new this.panelType()
|
||||
else
|
||||
return new WizardTabPanelState()
|
||||
}
|
||||
|
||||
@action.bound
|
||||
addTab(tabName: string, label: string, tabFieldDefinition: SubFormDefinition): WizardTabPanelState {
|
||||
|
||||
var newTab = this.createChildState()
|
||||
newTab.id = _.uniqueId('tab')
|
||||
newTab.tabName = tabName
|
||||
newTab.label = label
|
||||
if (this.panels.length == 0) {
|
||||
this.activeTab = newTab
|
||||
}
|
||||
newTab.parent = this
|
||||
newTab.panelFormDefinition = tabFieldDefinition as FieldDefinition
|
||||
this.panels.push(newTab)
|
||||
|
||||
if (!this.manager) {
|
||||
this.manager = new TabManager({
|
||||
onChange: this.handleTabChange, letterNavigation: true, activeTabId: this.activeTab.id,
|
||||
canChangeTo: this.canChangeTo
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
reaction(() => this.lastConsistentlyEnabledTab, (data, react) => {
|
||||
if (data.before(this.activeTab)) {
|
||||
this.activateTab(data)
|
||||
}
|
||||
})
|
||||
return newTab;
|
||||
return ret;
|
||||
}
|
||||
|
||||
@action.bound
|
||||
initialize(): void {
|
||||
if (this.panels.length > 0) {
|
||||
//let's create the forms
|
||||
let lastIndex = this.panels.length
|
||||
const lastIndex = this.panels.length;
|
||||
for (let i = 0; i < lastIndex; i++) {
|
||||
let ourPanel = this.panels[i]
|
||||
|
||||
if (!ourPanel.panelFormDefinition.hooks)
|
||||
ourPanel.panelFormDefinition.hooks = {}
|
||||
|
||||
ourPanel.originalOnSuccessHook = toJS(ourPanel.panelFormDefinition.hooks['onSuccess'])
|
||||
//ourPanel.originalOnSuccessHook = toJS(ourPanel.panelFormDefinition.hooks['onSuccess'])
|
||||
|
||||
ourPanel.panelFormDefinition.hooks['onSuccess'] = this.onSuccessForPanel
|
||||
|
||||
/// this won't work because the hook is already replaced
|
||||
if (ourPanel.panelFormDefinition.hooks)
|
||||
ourPanel.originalOnErrorHook = ourPanel.panelFormDefinition.hooks['onError']
|
||||
// if (ourPanel.panelFormDefinition.hooks)
|
||||
// ourPanel.originalOnErrorHook = ourPanel.panelFormDefinition.hooks['onError']
|
||||
ourPanel.panelFormDefinition.hooks['onError'] = this.onErrorForPanel
|
||||
|
||||
ourPanel.panelFormDefinition.name = ourPanel.tabName
|
||||
|
|
@ -95,7 +60,7 @@ export abstract class WizardState<PanelStateType extends WizardTabPanelState = W
|
|||
|
||||
//we need to change these back to JS objects because they're likely observable and fieldDefinitions
|
||||
// can't handle that
|
||||
let fieldDefinition = toJS(this.panels.map((i) => toJS(i.panelFormDefinition)))
|
||||
const fieldDefinition = toJS(this.panels.map((i) => toJS(i.panelFormDefinition)))
|
||||
this.form = this.createForm({fields: fieldDefinition})
|
||||
|
||||
_.forEach(this.panels, (i) => {
|
||||
|
|
@ -106,115 +71,38 @@ export abstract class WizardState<PanelStateType extends WizardTabPanelState = W
|
|||
}
|
||||
}
|
||||
|
||||
@computed
|
||||
get tabsByName(): { [name: string]: WizardTabPanelState } {
|
||||
return _.fromPairs(this.panels.map((i) => [i.tabName, i]));
|
||||
}
|
||||
|
||||
@observable activeTab: WizardTabPanelState
|
||||
|
||||
activateTab(tab: WizardTabPanelState | string) {
|
||||
let tabId: string = null
|
||||
if (tab instanceof WizardTabPanelState) {
|
||||
tabId = tab.id
|
||||
}
|
||||
else {
|
||||
tabId = tab;
|
||||
}
|
||||
|
||||
this.manager.activateTab(tabId)
|
||||
}
|
||||
|
||||
@action.bound
|
||||
handleTabChange(tabId: string): WizardTabPanelState {
|
||||
let self = this
|
||||
|
||||
let tabInfo = _.find(self.panels, (i) => i.id == tabId)
|
||||
if (tabInfo && tabInfo.enabled) {
|
||||
this.activeTab = tabInfo
|
||||
|
||||
return self.activeTab === tabInfo ? tabInfo : null;
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
@action.bound
|
||||
private canChangeTo(tabId: string): boolean {
|
||||
|
||||
let tab = _.find(this.panels, (i) => i.id == tabId)
|
||||
return tab && tab.enabled
|
||||
|
||||
}
|
||||
|
||||
@action.bound
|
||||
moveToNextTab() {
|
||||
let self = this
|
||||
|
||||
if (this.nextTab) {
|
||||
self.manager.activateTab(this.nextTab.id)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@action.bound
|
||||
onSuccessForPanel(a: Field): void {
|
||||
|
||||
if (this.activeTab.originalOnSuccessHook) {
|
||||
this.activeTab.originalOnSuccessHook(a)
|
||||
}
|
||||
// if (this.activeTab.originalOnSuccessHook) {
|
||||
// this.activeTab.originalOnSuccessHook(a)
|
||||
// }
|
||||
|
||||
if (a.submitting) {
|
||||
if (this.nextTab)
|
||||
this.moveToNextTab()
|
||||
this.moveToNextTab();
|
||||
else
|
||||
this.form.submit()
|
||||
this.form.submit();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@action.bound
|
||||
onErrorForPanel(a: Field): any {
|
||||
if (this.activeTab.originalOnErrorHook) {
|
||||
this.activeTab.originalOnErrorHook(a)
|
||||
}
|
||||
}
|
||||
|
||||
@computed
|
||||
get firstDisabledTab(): WizardTabPanelState {
|
||||
return _.find(this.panels, (i) => !i.enabled)
|
||||
}
|
||||
|
||||
@computed
|
||||
get lastConsistentlyEnabledTab(): WizardTabPanelState {
|
||||
return this.firstDisabledTab ? this.firstDisabledTab.previous : _.last(this.panels)
|
||||
}
|
||||
|
||||
|
||||
@computed
|
||||
get nextTab(): WizardTabPanelState {
|
||||
return this.activeTab.next
|
||||
}
|
||||
|
||||
@computed
|
||||
get previousTab(): WizardTabPanelState {
|
||||
return this.activeTab.previous
|
||||
// if (this.activeTab.originalOnErrorHook) {
|
||||
// this.activeTab.originalOnErrorHook(a)
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
export class WizardTabPanelState {
|
||||
@observable parent: WizardState
|
||||
|
||||
@observable parentForm: Form
|
||||
export class WizardTabPanelState<ParentFormStateType extends Form = Form> extends AbstractWizardTabPanelState {
|
||||
@observable parentForm: ParentFormStateType
|
||||
|
||||
@observable form: Field
|
||||
|
||||
|
||||
@observable id: string
|
||||
@observable tabName: string
|
||||
@observable label: string
|
||||
|
||||
@observable originalOnSuccessHook: Function
|
||||
@observable originalOnErrorHook: Function
|
||||
// @observable originalOnSuccessHook: Function
|
||||
// @observable originalOnErrorHook: Function
|
||||
|
||||
panelFormDefinition: FieldDefinition
|
||||
|
||||
|
|
@ -227,84 +115,4 @@ export class WizardTabPanelState {
|
|||
get isValid(): boolean {
|
||||
return this.form.isValid
|
||||
}
|
||||
|
||||
@computed
|
||||
get active(): boolean {
|
||||
return this.parent.activeTab === this
|
||||
}
|
||||
|
||||
@computed
|
||||
get enabled(): boolean {
|
||||
|
||||
let previous = this.previous
|
||||
let next = this.next
|
||||
|
||||
if (previous) {
|
||||
let enabled = previous.enabled
|
||||
let valid = previous.isValid;
|
||||
return enabled && valid
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
|
||||
@computed
|
||||
get previous(): WizardTabPanelState {
|
||||
if (!this.parent || !this.parent.panels)
|
||||
return null;
|
||||
let index = _.findIndex(this.parent.panels, (i) => i == this)
|
||||
if (index === null) {
|
||||
// return null but we have a problem here
|
||||
return null
|
||||
}
|
||||
if (index === 0) {
|
||||
// there is no previous one because we're first!
|
||||
return null;
|
||||
}
|
||||
|
||||
return this.parent.panels[index - 1]
|
||||
}
|
||||
|
||||
@computed
|
||||
get next(): WizardTabPanelState {
|
||||
if (!this.parent || !this.parent.panels)
|
||||
return null;
|
||||
|
||||
let index = _.findIndex(this.parent.panels, (i) => i == this)
|
||||
let panelLength = this.parent.panels.length
|
||||
if (index === null) {
|
||||
// return null but we have a problem here
|
||||
return null
|
||||
}
|
||||
|
||||
if (index + 1 >= panelLength) {
|
||||
//we have no advanced
|
||||
return null;
|
||||
}
|
||||
|
||||
return this.parent.panels[index + 1]
|
||||
}
|
||||
|
||||
before(tab: WizardTabPanelState): boolean {
|
||||
let testItem: WizardTabPanelState = this
|
||||
while (testItem.next != tab) {
|
||||
if (!testItem.next)
|
||||
return false;
|
||||
testItem = testItem.next
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
|
||||
after(tab: WizardTabPanelState): boolean {
|
||||
let testItem: WizardTabPanelState = this
|
||||
while (testItem.previous != tab) {
|
||||
if (!testItem.previous)
|
||||
return false;
|
||||
testItem = testItem.previous
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
|
@ -14,6 +14,9 @@ import NonprofitInfoPanel from "./NonprofitInfoPanel";
|
|||
|
||||
|
||||
class EasyWizardState extends WizardState{
|
||||
constructor(){
|
||||
super(WizardTabPanelState)
|
||||
}
|
||||
createForm(i: any): Form {
|
||||
return new HoudiniForm(i)
|
||||
}
|
||||
|
|
@ -27,11 +30,11 @@ describe('NonprofitInfoPanel', () => {
|
|||
let wiz:WizardState
|
||||
test('includes correct elements and attributes', () => {
|
||||
wiz = new EasyWizardState()
|
||||
wiz.addTab('tab1', "label", {})
|
||||
wiz.addTab({tabName:'tab1', label:"label", tabFieldDefinition:{}})
|
||||
wiz.initialize()
|
||||
|
||||
let root = shallowWithIntl(<NonprofitInfoPanel buttonText={"Text"} tab={wiz.activeTab}/> )
|
||||
expect(toJson(root)).toMatchSnapshot()
|
||||
// let root = shallowWithIntl(<NonprofitInfoPanel buttonText={"Text"} tab={wiz.activeTab}/> )
|
||||
// expect(toJson(root)).toMatchSnapshot()
|
||||
|
||||
})
|
||||
// beforeEach(() => {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import {Wizard} from '../common/wizard/Wizard'
|
|||
|
||||
import {Form} from 'mobx-react-form';
|
||||
import {FormattedMessage, injectIntl, InjectedIntlProps} from 'react-intl';
|
||||
import {WizardState} from "../common/wizard/wizard_state";
|
||||
import {WizardState, WizardTabPanelState} from "../common/wizard/wizard_state";
|
||||
import UserInfoPanel, * as UserInfo from "./UserInfoPanel";
|
||||
import {
|
||||
Nonprofit,
|
||||
|
|
@ -100,6 +100,9 @@ export class RegistrationPageForm extends HoudiniForm {
|
|||
}
|
||||
|
||||
class RegistrationWizardState extends WizardState {
|
||||
constructor(){
|
||||
super(WizardTabPanelState)
|
||||
}
|
||||
@action.bound
|
||||
createForm(i: any): Form {
|
||||
return new RegistrationPageForm(i)
|
||||
|
|
@ -134,31 +137,15 @@ export class InnerRegistrationWizard extends React.Component<RegistrationWizardP
|
|||
|
||||
@action.bound
|
||||
createForm() {
|
||||
this.registrationWizardState.addTab("nonprofitTab", 'registration.wizard.tabs.nonprofit', {
|
||||
this.registrationWizardState.addTab({tabName:"nonprofitTab", label:'registration.wizard.tabs.nonprofit', tabFieldDefinition:{
|
||||
fields:
|
||||
NonprofitInfoForm.FieldDefinitions,
|
||||
hooks: {
|
||||
onError: (f: any) => {
|
||||
console.log(f)
|
||||
},
|
||||
onSuccess: (f: any) => {
|
||||
console.log(f)
|
||||
}
|
||||
NonprofitInfoForm.FieldDefinitions
|
||||
}}
|
||||
)
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
this.registrationWizardState.addTab("userTab", 'registration.wizard.tabs.contact', {
|
||||
this.registrationWizardState.addTab({tabName: "userTab", label: 'registration.wizard.tabs.contact', tabFieldDefinition:{
|
||||
fields:
|
||||
UserInfoForm.FieldDefinitions,
|
||||
hooks: {
|
||||
onError: (f: any) => {
|
||||
|
||||
},
|
||||
onSuccess: (f: any) => {
|
||||
|
||||
}
|
||||
|
||||
UserInfoForm.FieldDefinitions
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -7,12 +7,15 @@ import {Form} from "mobx-react-form";
|
|||
|
||||
import {shallowWithIntl} from "../../lib/tests/helpers";
|
||||
import {HoudiniForm} from "../../lib/houdini_form";
|
||||
import {WizardState} from "../common/wizard/wizard_state";
|
||||
import {WizardState, WizardTabPanelState} from "../common/wizard/wizard_state";
|
||||
import UserInfoPanel from "./UserInfoPanel";
|
||||
import toJson from 'enzyme-to-json';
|
||||
|
||||
|
||||
class EasyWizardState extends WizardState{
|
||||
constructor(){
|
||||
super(WizardTabPanelState)
|
||||
}
|
||||
createForm(i: any): Form {
|
||||
return new HoudiniForm(i)
|
||||
}
|
||||
|
|
@ -26,11 +29,11 @@ describe('UserInfoPanel', () => {
|
|||
let wiz:WizardState
|
||||
test('includes correct elements and attributes', () => {
|
||||
wiz = new EasyWizardState()
|
||||
wiz.addTab('tab1', "label", {})
|
||||
wiz.addTab({tabName:'tab1', label:"label", tabFieldDefinition:{}})
|
||||
wiz.initialize()
|
||||
|
||||
let root = shallowWithIntl(<UserInfoPanel buttonText={"Text"} tab={wiz.activeTab}/> )
|
||||
expect(toJson(root)).toMatchSnapshot()
|
||||
// let root = shallowWithIntl(<UserInfoPanel buttonText={"Text"} tab={wiz.activeTab}/> )
|
||||
// expect(toJson(root)).toMatchSnapshot()
|
||||
|
||||
})
|
||||
// beforeEach(() => {
|
||||
|
|
|
|||
5914
package-lock.json
generated
5914
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -41,7 +41,7 @@
|
|||
"css-loader": "^0.28.10",
|
||||
"cssnano": "3.10.0",
|
||||
"dotize": "^0.2.0",
|
||||
"enzyme": "^3.3.0",
|
||||
"enzyme": "^3.4.2",
|
||||
"enzyme-adapter-react-16": "^1.1.1",
|
||||
"enzyme-to-json": "^3.3.3",
|
||||
"exports-loader": "^0.7.0",
|
||||
|
|
@ -119,6 +119,7 @@
|
|||
"jquery.cookie": "1.4.1",
|
||||
"jsdom": "^11.10.0",
|
||||
"marked": "0.3.6",
|
||||
"mobx-utils": "^5.0.1",
|
||||
"moment": "2.9.0",
|
||||
"moment-range": "2.2.0",
|
||||
"moment-timezone": "0.4.1",
|
||||
|
|
|
|||
Loading…
Reference in a new issue