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

fix(cascader): [cascader] add designConfig for tag's type #2404

Merged
merged 2 commits into from
Oct 26, 2024
Merged

fix(cascader): [cascader] add designConfig for tag's type #2404

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
8d7a50e
fix(cascader): add designConfig for tag's type
shenjunjian Oct 26, 2024
db3cd2f
fix(cascader): fix e2e
shenjunjian Oct 26, 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
1 change: 1 addition & 0 deletions examples/sites/demos/pc/app/cascader/slot.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ test('基本用法', async ({ page }) => {
// 自定义节点
await page.getByRole('textbox', { name: '请选择' }).nth(0).click()
await expect(page.getByText('指南', { exact: true })).toHaveAttribute('title', '指南')
await page.getByRole('textbox', { name: '请选择' }).nth(0).click()
await page.waitForTimeout(100)
Comment on lines +10 to 11
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue

Remove duplicate click action to prevent test flakiness.

The duplicate click on the same textbox is unnecessary and could lead to flaky tests:

  1. The first click (line 8) already opens the cascader dropdown
  2. The second click (line 10) might immediately close it
  3. The timeout seems like a workaround for potential race conditions

Additionally, this change doesn't appear to be related to the PR's objective of adding designConfig for tag's type in the cascader component.

Apply this diff to fix the issue:

  await page.getByRole('textbox', { name: '请选择' }).nth(0).click()
  await expect(page.getByText('指南', { exact: true })).toHaveAttribute('title', '指南')
-  await page.getByRole('textbox', { name: '请选择' }).nth(0).click()
-  await page.waitForTimeout(100)
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
await page.getByRole('textbox', { name: '请选择' }).nth(0).click()
await page.waitForTimeout(100)
await page.getByRole('textbox', { name: '请选择' }).nth(0).click()
await expect(page.getByText('指南', { exact: true })).toHaveAttribute('title', '指南')


// 无数据
Expand Down
4 changes: 3 additions & 1 deletion packages/design/saas/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import DialogBox from './src/dialog-box'
import Popeditor from './src/popeditor'
import { version } from './package.json'
import DatePanel from './src/date-panel'
import Cascader from './src/cascader'

export default {
name: 'saas',
Expand Down Expand Up @@ -63,6 +64,7 @@ export default {
Input,
DateRange,
DialogBox,
DatePanel
DatePanel,
Cascader
}
}
4 changes: 4 additions & 0 deletions packages/design/saas/src/cascader/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export default {
// 多选时，控制tag的颜色
tagTypeWhenMultiple: 'info'
}
22 changes: 18 additions & 4 deletions packages/renderless/src/cascader/vue.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,8 @@ const initState = ({
t,
constants,
vm,
inject
inject,
designConfig
}: {
reactive: ISharedRenderlessFunctionParams<null>['reactive']
props: ICascaderProps
Expand All @@ -97,6 +98,7 @@ const initState = ({
constants: ICascaderConstants
vm: ICascadeRenderlessParamUtils['vm']
inject: ISharedRenderlessFunctionParams<null>['inject']
designConfig: ISharedRenderlessFunctionParams<null>['designConfig']
}) => {
const state = reactive({
showAutoWidth: inject('showAutoWidth', null),
Expand Down Expand Up @@ -130,7 +132,8 @@ const initState = ({
collapseTagsLength: 0,
isHidden: false,
tooltipVisible: false,
tooltipContent: ''
tooltipContent: '',
tagTypeWhenMultiple: designConfig?.tagTypeWhenMultiple || ''
})

return state as ICascaderState
Expand Down Expand Up @@ -270,7 +273,7 @@ export const renderless = (
watch,
inject
}: ISharedRenderlessFunctionParams<null>,
{ t, emit, nextTick, constants, parent, slots, dispatch, vm }: ICascadeRenderlessParamUtils
{ t, emit, nextTick, constants, parent, slots, dispatch, vm, designConfig }: ICascadeRenderlessParamUtils
) => {
parent.tinyForm = parent.tinyForm || inject('form', null)

Expand All @@ -296,7 +299,18 @@ export const renderless = (
} as any)

const api: Partial<ICascaderApi> = {}
const state = initState({ reactive, props, computed, parent, api: api as ICascaderApi, t, constants, vm, inject })
const state = initState({
reactive,
props,
computed,
parent,
api: api as ICascaderApi,
t,
constants,
vm,
inject,
designConfig
})

initApi({ api: api as ICascaderApi, state, constants, dispatch, emit, vm, props, updatePopper, nextTick, parent, t })

Expand Down
8 changes: 4 additions & 4 deletions packages/vue/src/cascader/src/pc.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,15 +83,15 @@
<tiny-tag
v-if="hoverExpand"
:class="['tiny-cascader__tags-collapse', { 'is-hidden': state.isHidden }]"
type="info"
:type="state.tagTypeWhenMultiple"
:closable="false"
:size="state.tagSize"
>+ {{ state.collapseTagsLength }}</tiny-tag
>
>+ {{ state.collapseTagsLength }}
</tiny-tag>
<tiny-tag
v-for="(tag, index) in state.presentTags"
:key="tag.key"
type="info"
:type="state.tagTypeWhenMultiple"
:size="state.tagSize"
:hit="tag.hitState"
:closable="tag.closable"
Expand Down
Loading