@@ -27,7 +27,7 @@ interface Props { | |||
element: string; | |||
onSelect: (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; | |||
} | |||
@@ -60,23 +60,28 @@ export default class SelectListListElement extends React.PureComponent<Props, St | |||
}; | |||
render() { | |||
let item = this.props.renderElement(this.props.element); | |||
let extra; | |||
if (Array.isArray(item)) { | |||
extra = item[1]; | |||
item = item[0]; | |||
} | |||
return ( | |||
<li | |||
className={classNames({ | |||
className={classNames('display-flex-center', { | |||
'select-list-list-disabled': this.props.disabled | |||
})}> | |||
<Checkbox | |||
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 | |||
})} | |||
disabled={this.props.disabled} | |||
loading={this.state.loading} | |||
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> | |||
{extra && <span className="select-list-list-extra">{extra}</span>} | |||
</li> | |||
); | |||
} |
@@ -22,26 +22,36 @@ import * as React from 'react'; | |||
import { waitAndUpdate } from '../../../helpers/testUtils'; | |||
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 () => { | |||
const wrapper = shallow<SelectListListElement>(listElement); | |||
expect(wrapper).toMatchSnapshot(); | |||
const wrapper = shallowRender(); | |||
expect(wrapper).toMatchSnapshot('default'); | |||
expect(wrapper.state().loading).toBe(false); | |||
(wrapper.instance() as SelectListListElement).handleCheck(true); | |||
wrapper.instance().handleCheck(true); | |||
expect(wrapper.state().loading).toBe(true); | |||
expect(wrapper).toMatchSnapshot(); | |||
expect(wrapper).toMatchSnapshot('loading'); | |||
await waitAndUpdate(wrapper); | |||
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} | |||
/> | |||
); | |||
} |
@@ -1,18 +1,18 @@ | |||
// 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 | |||
className="" | |||
className="display-flex-center" | |||
> | |||
<Checkbox | |||
checked={false} | |||
className="select-list-list-checkbox display-flex-center" | |||
className="select-list-list-checkbox flex-1" | |||
loading={false} | |||
onCheck={[Function]} | |||
thirdState={false} | |||
> | |||
<span | |||
className="little-spacer-left flex-1" | |||
className="little-spacer-left" | |||
> | |||
foo | |||
</span> | |||
@@ -20,19 +20,19 @@ exports[`should display a loader when checking 1`] = ` | |||
</li> | |||
`; | |||
exports[`should display a loader when checking 2`] = ` | |||
exports[`should display a loader when checking: loading 1`] = ` | |||
<li | |||
className="" | |||
className="display-flex-center" | |||
> | |||
<Checkbox | |||
checked={false} | |||
className="select-list-list-checkbox display-flex-center" | |||
className="select-list-list-checkbox flex-1" | |||
loading={true} | |||
onCheck={[Function]} | |||
thirdState={false} | |||
> | |||
<span | |||
className="little-spacer-left flex-1" | |||
className="little-spacer-left" | |||
> | |||
foo | |||
</span> |