Skip to content

Commit

Permalink
feat(comp:transfer): add transfer component (#794)
Browse files Browse the repository at this point in the history
* add private component CheckableList

fix #782
  • Loading branch information
sallerli1 committed Mar 19, 2022
1 parent 48bacb2 commit e861615
Show file tree
Hide file tree
Showing 79 changed files with 8,763 additions and 4 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`CheckableList render work 1`] = `
"<div class=\\"ix-checkable-list\\">
<ul class=\\"ix-checkable-list-inner\\">
<li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"0\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-0</span>
<!---->
</label>
<!---->
</li>
<li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"1\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-1</span>
<!---->
</label>
<!---->
</li>
<li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"2\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-2</span>
<!---->
</label>
<!---->
</li>
<li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"3\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-3</span>
<!---->
</label>
<!---->
</li>
<li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"4\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-4</span>
<!---->
</label>
<!---->
</li>
<li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"5\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-5</span>
<!---->
</label>
<!---->
</li>
<li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"6\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-6</span>
<!---->
</label>
<!---->
</li>
<li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"7\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-7</span>
<!---->
</label>
<!---->
</li>
<li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"8\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-8</span>
<!---->
</label>
<!---->
</li>
<li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"9\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-9</span>
<!---->
</label>
<!---->
</li>
<li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"10\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-10</span>
<!---->
</label>
<!---->
</li>
<li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"11\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-11</span>
<!---->
</label>
<!---->
</li>
<li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"12\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-12</span>
<!---->
</label>
<!---->
</li>
<li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"13\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-13</span>
<!---->
</label>
<!---->
</li>
<li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"14\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-14</span>
<!---->
</label>
<!---->
</li>
<li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"15\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-15</span>
<!---->
</label>
<!---->
</li>
<li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"16\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-16</span>
<!---->
</label>
<!---->
</li>
<li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"17\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-17</span>
<!---->
</label>
<!---->
</li>
<li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"18\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-18</span>
<!---->
</label>
<!---->
</li>
<li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"19\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-19</span>
<!---->
</label>
<!---->
</li>
</ul>
</div>"
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`CheckableListItem render work 1`] = `
"<li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"1\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-1</span>
<!---->
</label><i class=\\"ix-icon ix-icon-close ix-checkable-list-item-close-icon\\" role=\\"img\\" aria-label=\\"close\\"></i></li>"
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import { MountingOptions, mount } from '@vue/test-utils'

import { renderWork } from '@tests'

import { CdkVirtualScroll } from '@idux/cdk/scroll'
import { IxCheckbox } from '@idux/components/checkbox'

import CheckableList from '../src/CheckableList'
import CheckableListItem from '../src/CheckableListItem'
import { CheckableListProps } from '../src/types'

const mockedDataSource = Array.from(new Array(20)).map((_, idx) => ({
key: idx,
label: `Option-${idx}`,
}))

describe('CheckableList', () => {
const CheckableListMount = (options?: MountingOptions<Partial<CheckableListProps>>) =>
mount(CheckableList, { ...(options as MountingOptions<CheckableListProps>) })

renderWork<CheckableListProps>(CheckableList, {
props: { dataSource: mockedDataSource },
})

test('checked work', async () => {
const wrapper = CheckableListMount({
props: { dataSource: mockedDataSource, checked: item => [1, 2, 3, 4].includes(item.key as number) },
})

expect(
wrapper
.findAllComponents(CheckableListItem)
.filter(item => [1, 2, 3, 4].includes(item.props().value))
.every(item => item.props().checked === true),
).toBeTruthy()
expect(
wrapper
.findAllComponents(CheckableListItem)
.filter(item => ![1, 2, 3, 4].includes(item.props().value))
.every(item => item.props().checked === false),
).toBeTruthy()
})

test('disabled work', async () => {
const wrapper = CheckableListMount({
props: { dataSource: mockedDataSource, disabled: item => [1, 2, 3, 4].includes(item.key as number) },
})

expect(
wrapper
.findAllComponents(CheckableListItem)
.filter(item => [1, 2, 3, 4].includes(item.props().value))
.every(item => item.props().disabled === true),
).toBeTruthy()
expect(
wrapper
.findAllComponents(CheckableListItem)
.filter(item => ![1, 2, 3, 4].includes(item.props().value))
.every(item => item.props().disabled === false),
).toBeTruthy()
})

test('virtual work', async () => {
const wrapper = CheckableListMount({
props: { dataSource: mockedDataSource, virtual: true, scroll: { height: 100, fullHeight: true } },
})

expect(wrapper.classes()).toContain('ix-checkable-list-virtual')
expect(wrapper.findComponent(CdkVirtualScroll).exists()).toBeTruthy()
})

test('onCheckChange work', async () => {
const onCheckChange = jest.fn()
const wrapper = CheckableListMount({
props: { dataSource: mockedDataSource, onCheckChange, checkable: true },
})

await wrapper
.findAllComponents(CheckableListItem)
.find(item => item.props().value === 3)
?.findComponent(IxCheckbox)
.find('input')
.setValue(true)
expect(onCheckChange).toBeCalledWith({ key: 3, label: 'Option-3' }, true)
})

test('onRemove work', async () => {
const onRemove = jest.fn()
const wrapper = CheckableListMount({
props: { dataSource: mockedDataSource, onRemove, removable: true },
})

await wrapper
.findAllComponents(CheckableListItem)
.find(item => item.props().value === 3)
?.find('.ix-checkable-list-item-close-icon')
.trigger('click')
expect(onRemove).toBeCalledWith({ key: 3, label: 'Option-3' })
})
})
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
import { MountingOptions, mount } from '@vue/test-utils'
import { computed, h } from 'vue'

import { renderWork } from '@tests'

import { IxCheckbox } from '@idux/components/checkbox'

import CheckableListItem from '../src/CheckableListItem'
import { checkableListContext } from '../src/token'
import { CheckableListItemProps } from '../src/types'

const mountGlobalOpts = {
provide: {
[checkableListContext as symbol]: {
mergedPrefixCls: computed(() => 'ix-checkable-list'),
},
},
}

describe('CheckableListItem', () => {
const CheckableListItemMount = (options?: MountingOptions<Partial<CheckableListItemProps>>) =>
mount(CheckableListItem, { ...(options as MountingOptions<CheckableListItemProps>), global: mountGlobalOpts })

renderWork<CheckableListItemProps>(CheckableListItem, {
props: {
value: '1',
label: 'Option-1',
checkable: true,
removable: true,
disabled: false,
},
global: mountGlobalOpts,
})

test('checkable work', async () => {
const wrapper = CheckableListItemMount({
props: {
value: '1',
label: 'Option-1',
checked: true,
checkable: true,
removable: true,
disabled: false,
},
})

const checkboxComp = wrapper.findComponent(IxCheckbox)
expect(checkboxComp.exists()).toBeTruthy()
expect(checkboxComp.vm.checked).toBe(true)

await wrapper.setProps({ checkable: false })
expect(wrapper.findComponent(IxCheckbox).exists()).toBeFalsy()
})

test('removable work', async () => {
const onRemove = jest.fn()
const wrapper = CheckableListItemMount({
props: {
value: '1',
label: 'Option-1',
checkable: true,
removable: true,
disabled: false,
onRemove,
},
})

const removeTrigger = wrapper.find('.ix-checkable-list-item-close-icon')
expect(removeTrigger.exists()).toBeTruthy()
await removeTrigger.trigger('click')
expect(onRemove).toBeCalled()

await wrapper.setProps({ removable: false })
expect(wrapper.find('.ix-checkable-list-item-close-icon').exists()).toBeFalsy()
})

test('disabled work', async () => {
const onCheckChange = jest.fn()
const wrapper = CheckableListItemMount({
props: {
value: '1',
label: 'Option-1',
checkable: true,
removable: true,
disabled: true,
onCheckChange,
},
})

expect(wrapper.classes()).toContain('ix-checkable-list-item-disabled')
expect(wrapper.find('.ix-checkable-list-item-close-icon').exists()).toBeFalsy()
await wrapper.findComponent(IxCheckbox).find('input').setValue(true)
expect(onCheckChange).not.toBeCalled()

await wrapper.findComponent(IxCheckbox).find('input').setValue(false)

await wrapper.setProps({ disabled: false })
expect(wrapper.classes()).not.toContain('ix-checkable-list-item-disabled')
expect(wrapper.find('.ix-checkable-list-item-close-icon').exists()).toBeTruthy()
await wrapper.findComponent(IxCheckbox).find('input').setValue(true)
expect(onCheckChange).toBeCalledWith(true)
})

test('slot work', async () => {
const wrapper = CheckableListItemMount({
props: {
value: '1',
label: 'Option-1',
checkable: true,
removable: true,
disabled: true,
},
slots: {
default: () => h('span', { class: 'custom-label-slot' }),
},
})

expect(wrapper.find('.custom-label-slot').exists()).toBeTruthy()
})
})
22 changes: 22 additions & 0 deletions packages/components/_private/checkable-list/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/**
* @license
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
*/

import type { CheckableListComponent } from './src/types'

import CheckableList from './src/CheckableList'

const ɵCheckableList = CheckableList as unknown as CheckableListComponent

export { ɵCheckableList }

export type {
CheckableListData as ɵCheckableListData,
CheckableListScroll as ɵCheckableListScroll,
CheckableListInstance as ɵCheckableListInstance,
CheckableListComponent as ɵCheckableListComponent,
CheckableListPublicProps as ɵCheckableListProps,
} from './src/types'

0 comments on commit e861615

Please sign in to comment.