-
Notifications
You must be signed in to change notification settings - Fork 141
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(comp: select): maxLabel support responsive (#806)
* feat(comp:overflow): add overflow * feat(comp: select): maxLabelCount support responsive (#756) BREAKING CHANGE: `maxLabelCount` was deprecated, please use `maxLabel` instead
- Loading branch information
1 parent
120390b
commit 115b5ec
Showing
24 changed files
with
735 additions
and
79 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
69 changes: 69 additions & 0 deletions
69
packages/components/_private/overflow/__tests__/__snapshots__/overflow.spec.ts.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`Overflow maxLabel responsive work 1`] = ` | ||
"<div class=\\"ix-overflow ix-test-overflow\\"> | ||
<div class=\\"ix-overflow-item\\">0</div> | ||
<div class=\\"ix-overflow-item\\">1</div> | ||
<div class=\\"ix-overflow-item\\">2</div> | ||
<div class=\\"ix-overflow-item\\">3</div> | ||
<div class=\\"ix-overflow-item\\">4</div> | ||
<div class=\\"ix-overflow-item\\">5</div> | ||
<div class=\\"ix-overflow-item\\">6</div> | ||
<div class=\\"ix-overflow-item\\">7</div> | ||
<div class=\\"ix-overflow-item\\">8</div> | ||
<div class=\\"ix-overflow-item\\">9</div> | ||
<div class=\\"ix-overflow-item\\">10</div> | ||
<div class=\\"ix-overflow-item\\">11</div> | ||
<div class=\\"ix-overflow-item\\">12</div> | ||
<div class=\\"ix-overflow-item\\">13</div> | ||
<div class=\\"ix-overflow-item\\">14</div> | ||
<div class=\\"ix-overflow-item\\">15</div> | ||
<div class=\\"ix-overflow-item\\">16</div> | ||
<div class=\\"ix-overflow-item\\">17</div> | ||
<div class=\\"ix-overflow-item\\">18</div> | ||
<div class=\\"ix-overflow-item\\">19</div> | ||
<!----> | ||
<!----> | ||
</div>" | ||
`; | ||
exports[`Overflow maxLabel responsive work 2`] = ` | ||
"<div class=\\"ix-overflow ix-test-overflow\\"> | ||
<div class=\\"ix-overflow-item\\">0</div> | ||
<div class=\\"ix-overflow-item\\" style=\\"display: none;\\">1</div> | ||
<div class=\\"ix-overflow-item\\" style=\\"display: none;\\">2</div> | ||
<div class=\\"ix-overflow-item\\" style=\\"display: none;\\">3</div> | ||
<div class=\\"ix-overflow-item\\" style=\\"display: none;\\">4</div> | ||
<div class=\\"ix-overflow-item\\" style=\\"display: none;\\">5</div> | ||
<div class=\\"ix-overflow-item\\" style=\\"display: none;\\">6</div> | ||
<div class=\\"ix-overflow-item\\" style=\\"display: none;\\">7</div> | ||
<div class=\\"ix-overflow-item\\" style=\\"display: none;\\">8</div> | ||
<div class=\\"ix-overflow-item\\" style=\\"display: none;\\">9</div> | ||
<div class=\\"ix-overflow-item\\" style=\\"display: none;\\">10</div> | ||
<div class=\\"ix-overflow-item\\" style=\\"display: none;\\">11</div> | ||
<div class=\\"ix-overflow-item\\" style=\\"display: none;\\">12</div> | ||
<div class=\\"ix-overflow-item\\" style=\\"display: none;\\">13</div> | ||
<div class=\\"ix-overflow-item\\" style=\\"display: none;\\">14</div> | ||
<div class=\\"ix-overflow-item\\" style=\\"display: none;\\">15</div> | ||
<div class=\\"ix-overflow-item\\" style=\\"display: none;\\">16</div> | ||
<div class=\\"ix-overflow-item\\" style=\\"display: none;\\">17</div> | ||
<div class=\\"ix-overflow-item\\" style=\\"display: none;\\">18</div> | ||
<div class=\\"ix-overflow-item\\" style=\\"display: none;\\">19</div> | ||
<div class=\\"ix-overflow-item ix-overflow-rest\\" style=\\"\\">+ 19 ...</div> | ||
<!----> | ||
</div>" | ||
`; | ||
exports[`Overflow render work 1`] = ` | ||
"<div class=\\"ix-overflow undefined-overflow\\"> | ||
<!----> | ||
<!----> | ||
</div>" | ||
`; | ||
exports[`Overflow render work 2`] = ` | ||
"<div class=\\"ix-overflow undefined-overflow\\"> | ||
<div class=\\"ix-overflow-item ix-overflow-rest\\" style=\\"display: none;\\">+ 0 ...</div> | ||
<!----> | ||
</div>" | ||
`; |
95 changes: 95 additions & 0 deletions
95
packages/components/_private/overflow/__tests__/overflow.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,95 @@ | ||
import { MountingOptions, mount } from '@vue/test-utils' | ||
|
||
import { merge } from 'lodash-es' | ||
|
||
import { renderWork } from '@tests' | ||
|
||
import Overflow from '../src/Overflow' | ||
import { OverflowProps } from '../src/types' | ||
|
||
interface OverflowData { | ||
value: number | ||
key: string | ||
} | ||
|
||
describe('Overflow', () => { | ||
const overfolwData: OverflowData[] = Array.from(Array(20)).map((_, idx) => ({ value: idx, key: `${idx}-key` })) | ||
const totalLen = overfolwData.length | ||
|
||
const OverflowMount = (options?: MountingOptions<Partial<OverflowProps>>) => { | ||
return mount(Overflow, { | ||
...(merge( | ||
{ | ||
props: { | ||
getKey: (item: OverflowData) => item.key, | ||
prefixCls: 'ix-test', | ||
dataSource: overfolwData, | ||
}, | ||
slots: { item: `<template #item="item">{{ item.value }}</template>` }, | ||
}, | ||
options, | ||
) as MountingOptions<OverflowProps>), | ||
}) | ||
} | ||
|
||
renderWork<OverflowProps>(Overflow, { | ||
props: { maxLabel: 4 }, | ||
}) | ||
|
||
renderWork<OverflowData>(Overflow, { | ||
props: { maxLabel: 'responsive' }, | ||
}) | ||
|
||
test('maxLabel work', async () => { | ||
const wrapper = OverflowMount() | ||
|
||
let items = wrapper.findAll('.ix-overflow-item') | ||
|
||
expect(items.length).toBe(totalLen) | ||
|
||
await wrapper.setProps({ maxLabel: 3 }) | ||
|
||
// [0, 1, 2, + 17 ...] | ||
items = wrapper.findAll('.ix-overflow-item') | ||
|
||
expect(items.length).toBe(4) | ||
expect(items[3].text()).toBe('+ 17 ...') | ||
expect(items[3].attributes('style')).toEqual(expect.not.stringContaining('display: none')) | ||
}) | ||
test('maxLabel responsive work', async () => { | ||
const wrapper = OverflowMount() | ||
|
||
expect(wrapper.html()).toMatchSnapshot() | ||
|
||
await wrapper.setProps({ maxLabel: 'responsive' }) | ||
|
||
expect(wrapper.html()).toMatchSnapshot() | ||
}) | ||
test('item slot work', async () => { | ||
const wrapper = OverflowMount({ props: { maxLabel: 2 } }) | ||
|
||
const items = wrapper.findAll('.ix-overflow-item') | ||
|
||
expect(items[0].text()).toBe('0') | ||
expect(items[1].text()).toBe('1') | ||
}) | ||
test('rest slot work', async () => { | ||
const wrapper = OverflowMount({ | ||
props: { maxLabel: 2 }, | ||
slots: { rest: `<template #rest="rest">+ {{ rest.length }} more</template>` }, | ||
}) | ||
|
||
const rest = wrapper.find('.ix-overflow-rest') | ||
|
||
expect(rest.text()).toBe('+ 18 more') | ||
}) | ||
test('suffix slot work', async () => { | ||
const wrapper = OverflowMount({ | ||
props: { maxLabel: 2 }, | ||
slots: { suffix: `x` }, | ||
}) | ||
|
||
const suffix = wrapper.find('.ix-overflow-suffix') | ||
expect(suffix.text()).toBe('x') | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
/** | ||
* @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 { OverflowComponent } from './src/types' | ||
|
||
import Overflow from './src/Overflow' | ||
|
||
const ɵOverflow = Overflow as unknown as OverflowComponent | ||
|
||
export { ɵOverflow } | ||
|
||
export type { | ||
OverflowInstance as ɵOverflowInstance, | ||
OverflowComponent as ɵOverflowComponent, | ||
OverflowPublicProps as ɵOverflowProps, | ||
} from './src/types' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
/** | ||
* @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 { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue' | ||
|
||
import { callEmit, offResize, onResize } from '@idux/cdk/utils' | ||
|
||
import { overflowItemProps } from './types' | ||
|
||
export default defineComponent({ | ||
name: 'IxOverflowItem', | ||
props: overflowItemProps, | ||
setup(props, { slots }) { | ||
const itemElRef = ref<HTMLElement | undefined>() | ||
const handleResize = (entry: ResizeObserverEntry) => callEmit(props.onSizeChange, entry.target, props.itemKey ?? '') | ||
|
||
onMounted(() => onResize(itemElRef.value, handleResize)) | ||
onBeforeUnmount(() => { | ||
offResize(itemElRef.value, handleResize) | ||
}) | ||
|
||
return () => { | ||
return ( | ||
<div v-show={props.display} class={`${props.prefixCls}-item`} ref={itemElRef}> | ||
{slots.default?.()} | ||
</div> | ||
) | ||
} | ||
}, | ||
}) |
Oops, something went wrong.