element: string; | element: string; | ||||
onSelect: (element: string) => Promise<void>; | onSelect: (element: string) => Promise<void>; | ||||
onUnselect: (element: string) => Promise<void>; | onUnselect: (element: string) => Promise<void>; | ||||
renderElement: (element: string) => React.ReactNode; | |||||
renderElement: (element: string) => React.ReactNode | [React.ReactNode, React.ReactNode]; | |||||
selected: boolean; | selected: boolean; | ||||
} | } | ||||
}; | }; | ||||
render() { | render() { | ||||
let item = this.props.renderElement(this.props.element); | |||||
let extra; | |||||
if (Array.isArray(item)) { | |||||
extra = item[1]; | |||||
item = item[0]; | |||||
} | |||||
return ( | return ( | ||||
<li | <li | ||||
className={classNames({ | |||||
className={classNames('display-flex-center', { | |||||
'select-list-list-disabled': this.props.disabled | 'select-list-list-disabled': this.props.disabled | ||||
})}> | })}> | ||||
<Checkbox | <Checkbox | ||||
checked={this.props.selected} | checked={this.props.selected} | ||||
className={classNames('select-list-list-checkbox display-flex-center', { | |||||
className={classNames('select-list-list-checkbox flex-1', { | |||||
active: this.props.active | active: this.props.active | ||||
})} | })} | ||||
disabled={this.props.disabled} | disabled={this.props.disabled} | ||||
loading={this.state.loading} | loading={this.state.loading} | ||||
onCheck={this.handleCheck}> | onCheck={this.handleCheck}> | ||||
<span className="little-spacer-left flex-1"> | |||||
{this.props.renderElement(this.props.element)} | |||||
</span> | |||||
<span className="little-spacer-left">{item}</span> | |||||
</Checkbox> | </Checkbox> | ||||
{extra && <span className="select-list-list-extra">{extra}</span>} | |||||
</li> | </li> | ||||
); | ); | ||||
} | } |
import { waitAndUpdate } from '../../../helpers/testUtils'; | import { waitAndUpdate } from '../../../helpers/testUtils'; | ||||
import SelectListListElement from '../SelectListListElement'; | import SelectListListElement from '../SelectListListElement'; | ||||
const listElement = ( | |||||
<SelectListListElement | |||||
element="foo" | |||||
key="foo" | |||||
onSelect={jest.fn(() => Promise.resolve())} | |||||
onUnselect={jest.fn(() => Promise.resolve())} | |||||
renderElement={(foo: string) => foo} | |||||
selected={false} | |||||
/> | |||||
); | |||||
it('should display a loader when checking', async () => { | it('should display a loader when checking', async () => { | ||||
const wrapper = shallow<SelectListListElement>(listElement); | |||||
expect(wrapper).toMatchSnapshot(); | |||||
const wrapper = shallowRender(); | |||||
expect(wrapper).toMatchSnapshot('default'); | |||||
expect(wrapper.state().loading).toBe(false); | expect(wrapper.state().loading).toBe(false); | ||||
(wrapper.instance() as SelectListListElement).handleCheck(true); | |||||
wrapper.instance().handleCheck(true); | |||||
expect(wrapper.state().loading).toBe(true); | expect(wrapper.state().loading).toBe(true); | ||||
expect(wrapper).toMatchSnapshot(); | |||||
expect(wrapper).toMatchSnapshot('loading'); | |||||
await waitAndUpdate(wrapper); | await waitAndUpdate(wrapper); | ||||
expect(wrapper.state().loading).toBe(false); | expect(wrapper.state().loading).toBe(false); | ||||
}); | }); | ||||
it('should correctly handle a render callback that returns 2 elements', () => { | |||||
const wrapper = shallowRender({ | |||||
renderElement: (foo: string) => [foo, 'extra info'] | |||||
}); | |||||
expect(wrapper.find('.select-list-list-extra').exists()).toBe(true); | |||||
}); | |||||
function shallowRender(props: Partial<SelectListListElement['props']> = {}) { | |||||
return shallow<SelectListListElement>( | |||||
<SelectListListElement | |||||
element="foo" | |||||
key="foo" | |||||
onSelect={jest.fn(() => Promise.resolve())} | |||||
onUnselect={jest.fn(() => Promise.resolve())} | |||||
renderElement={(foo: string) => foo} | |||||
selected={false} | |||||
{...props} | |||||
/> | |||||
); | |||||
} |
// Jest Snapshot v1, https://goo.gl/fbAQLP | // Jest Snapshot v1, https://goo.gl/fbAQLP | ||||
exports[`should display a loader when checking 1`] = ` | |||||
exports[`should display a loader when checking: default 1`] = ` | |||||
<li | <li | ||||
className="" | |||||
className="display-flex-center" | |||||
> | > | ||||
<Checkbox | <Checkbox | ||||
checked={false} | checked={false} | ||||
className="select-list-list-checkbox display-flex-center" | |||||
className="select-list-list-checkbox flex-1" | |||||
loading={false} | loading={false} | ||||
onCheck={[Function]} | onCheck={[Function]} | ||||
thirdState={false} | thirdState={false} | ||||
> | > | ||||
<span | <span | ||||
className="little-spacer-left flex-1" | |||||
className="little-spacer-left" | |||||
> | > | ||||
foo | foo | ||||
</span> | </span> | ||||
</li> | </li> | ||||
`; | `; | ||||
exports[`should display a loader when checking 2`] = ` | |||||
exports[`should display a loader when checking: loading 1`] = ` | |||||
<li | <li | ||||
className="" | |||||
className="display-flex-center" | |||||
> | > | ||||
<Checkbox | <Checkbox | ||||
checked={false} | checked={false} | ||||
className="select-list-list-checkbox display-flex-center" | |||||
className="select-list-list-checkbox flex-1" | |||||
loading={true} | loading={true} | ||||
onCheck={[Function]} | onCheck={[Function]} | ||||
thirdState={false} | thirdState={false} | ||||
> | > | ||||
<span | <span | ||||
className="little-spacer-left flex-1" | |||||
className="little-spacer-left" | |||||
> | > | ||||
foo | foo | ||||
</span> | </span> |