Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(transfer): [transfer] refactor transfer by checkbox #2396

Merged
merged 2 commits into from
Oct 25, 2024
Merged

refactor(transfer): [transfer] refactor transfer by checkbox #2396

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
22424f5
refactor(transfer): refactor transfer by checkbox
shenjunjian Oct 25, 2024
446da7e
fix(transfer): fix
shenjunjian Oct 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/transfer/custom-titles-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<tiny-transfer
v-model="value"
:data="data"
:titles="['所有数据列表', '已选数据列表']"
:titles="['数据列表', '已选列表']"
:format="{
noChecked: '未勾选 / 共${total}',
hasChecked: '已选择${checked} / 共${total}'
Expand Down
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/transfer/custom-titles.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ test('测试自定义列表标题', async ({ page }) => {
const leftPanel = transferPanels.first()
const rightPanel = transferPanels.nth(1)

await expect(leftPanel.locator('.tiny-checkbox__label').first()).toHaveText(/所有数据列表/)
await expect(leftPanel.locator('.tiny-checkbox__label').first()).toHaveText(/数据列表/)
await expect(leftPanel.locator('.tiny-checkbox__label').first()).toHaveText(/未勾选 \/ 共14/)
await expect(rightPanel.locator('.tiny-checkbox__label').first()).toHaveText(/已选数据列表/)
await expect(rightPanel.locator('.tiny-checkbox__label').first()).toHaveText(/已选列表/)
await expect(rightPanel.locator('.tiny-checkbox__label').first()).toHaveText(/未勾选 \/ 共2/)

// 全选
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/transfer/custom-titles.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<tiny-transfer
v-model="value"
:data="data"
:titles="['所有数据列表', '已选数据列表']"
:titles="['数据列表', '已选列表']"
:format="{
noChecked: '未勾选 / 共${total}',
hasChecked: '已选择${checked} / 共${total}'
Expand Down
28 changes: 0 additions & 28 deletions packages/theme/src/transfer/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,12 +198,6 @@
padding-top: var(--tv-Transfer-panel-body-filter-padding-top);
display: flex;
flex-direction: column;

.@{transfer-panel-prefix-cls}__item {
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
flex-shrink: 0;
}
}
}
}

Expand All @@ -222,28 +216,6 @@
display: flex;
}

&.@{checkbox-prefix-cls} {
color: var(--tv-Transfer-panel-item-text-color);
line-height: var(--tv-Transfer-panel-item-height);
margin: 0;
display: flex;

&.@{checkbox-prefix-cls}__label {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
box-sizing: border-box;
padding-left: var(--tv-Transfer-panel-item-checkbox-padding-left);
line-height: var(--tv-Transfer-panel-item-height);
}

.@{checkbox-prefix-cls}__input {
line-height: 1;
}
}

&:hover {
background: var(--tv-Transfer-panel-item-hover-bg-color);
color: var(--tv-Transfer-panel-item-hover-text-color);
Expand Down
43 changes: 8 additions & 35 deletions packages/vue/src/transfer-panel/src/pc.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,43 +50,16 @@
class="tiny-checkbox-group tiny-transfer-panel__list"
:class="{ 'is-filterable': filterable }"
>
<label
class="tiny-checkbox tiny-transfer-panel__item"
:class="[
item[state.disabledProp] ? 'is-disabled' : '',
state.checked.length > 0 && state.checked.indexOf(item[state.keyProp]) > -1 ? 'is-checked' : ''
]"
@click.stop.prevent="checkedEvent(item[state.keyProp], item[state.disabledProp])"
:key="item[state.keyProp]"
<tiny-checkbox
v-for="item in state.filteredData"
:key="item[state.keyProp]"
class="tiny-transfer-panel__item"
:disabled="item[state.disabledProp]"
:checked="state.checked.length > 0 && state.checked.indexOf(item[state.keyProp]) > -1"
@change="checkedEvent(item[state.keyProp], item[state.disabledProp])"
Comment on lines +58 to +59
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider optimizing checked state lookup performance.

The current implementation uses array indexOf for checking item state, which could be inefficient for large datasets.

Consider using a Set or Map for O(1) lookup:

- :checked="state.checked.length > 0 && state.checked.indexOf(item[state.keyProp]) > -1"
+ :checked="state.checkedSet.has(item[state.keyProp])"

You'll need to maintain a Set alongside the array in your component's state:

const checkedSet = computed(() => new Set(state.checked))

>
<span
class="tiny-checkbox__input"
:class="[
item[state.disabledProp] ? 'is-disabled' : '',
state.checked.length > 0 && state.checked.indexOf(item[state.keyProp]) > -1 ? 'is-checked' : ''
]"
>
<span class="tiny-checkbox__inner">
<icon-check
v-if="!(state.checked.length > 0 && state.checked.indexOf(item[state.keyProp]) > -1)"
class="tiny-svg-size icon-no-checked"
style="fill: transparent"
/>
<icon-checked-sur v-else class="tiny-svg-size icon-checked-sur" />
</span>
<input
type="checkbox"
aria-hidden="false"
:disabled="item[state.disabledProp]"
class="tiny-checkbox__original"
:value="item[state.keyProp]"
/>
</span>
<span class="tiny-checkbox__label">
<option-content :option="optionRender(item)"></option-content>
</span>
</label>
<option-content :option="optionRender(item)"></option-content>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider memoizing option rendering.

The direct call to optionRender in the template could cause unnecessary re-renders.

Consider memoizing the option render result:

- <option-content :option="optionRender(item)"></option-content>
+ <option-content :option="getMemoizedOption(item)"></option-content>

Add a computed or cached method:

const getMemoizedOption = computed(() => {
  const cache = new Map()
  return (item) => {
    if (!cache.has(item[state.keyProp])) {
      cache.set(item[state.keyProp], optionRender(item))
    }
    return cache.get(item[state.keyProp])
  }
})

</tiny-checkbox>
</div>
<component
ref="plugin"
Expand Down
Loading