Date: Fri, 17 May 2024 10:01:42 +0800
Subject: [PATCH 4/6] chore: format code
---
src/cascader/cascader.tsx | 81 ++++++++++++++++++++-------------------
1 file changed, 41 insertions(+), 40 deletions(-)
diff --git a/src/cascader/cascader.tsx b/src/cascader/cascader.tsx
index 3bd229263..30f6ff05a 100644
--- a/src/cascader/cascader.tsx
+++ b/src/cascader/cascader.tsx
@@ -53,7 +53,7 @@ export default defineComponent({
const cascaderClass = usePrefixClass('cascader');
const { globalConfig } = useConfig('cascader');
- const { visible, value, modelValue, subTitles, options, keys, checkStrictly } = toRefs(props);
+ const { visible, value, modelValue, keys } = toRefs(props);
const open = ref(visible.value || false);
const [cascaderValue, setCascaderValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
@@ -62,24 +62,13 @@ export default defineComponent({
const stepIndex = ref(0);
const selectedIndexes = reactive
([]);
const selectedValue = reactive([]);
- const items: Array> = reactive([options.value ?? []]);
+ const items: Array> = reactive([props.options ?? []]);
const steps = reactive([placeholder.value]);
- watch(placeholder, (newValue, oldValue) => {
- const index = steps.indexOf(oldValue);
- if (index !== -1) {
- steps[index] = newValue;
- }
- });
-
- onMounted(() => {
- initWithValue();
- });
-
const initWithValue = () => {
if (value.value != null) {
steps.pop();
- const path = getIndexesByValue(options.value, value.value);
+ const path = getIndexesByValue(props.options, value.value);
path?.forEach((e: number) => {
// @ts-ignore
selectedIndexes.push(e);
@@ -89,7 +78,7 @@ export default defineComponent({
};
const watchSelectedIndexes = () => {
- if (options.value && options.value.length > 0) {
+ if (props.options && props.options.length > 0) {
for (let i = 0, size = selectedIndexes.length; i < size; i += 1) {
const index = selectedIndexes[i];
const next = items[i]?.[index];
@@ -171,33 +160,13 @@ export default defineComponent({
}
props.onPick?.({ level, value: item[(keys as Ref).value?.value ?? 'value'], index });
- if (checkStrictly.value && selectedValue.includes(String(value))) {
+ if (props.checkStrictly && selectedValue.includes(String(value))) {
cancelSelect(value, level, index, item);
} else {
chooseSelect(value, level, index, item);
}
};
- watch(open, () => {
- context.emit('update:visible', open.value);
- });
-
- watch(visible, () => {
- open.value = visible.value;
- });
-
- watch(
- () => props.options,
- () => {
- if (open.value) {
- handleSelect(childrenInfo.value, childrenInfo.level);
- }
- },
- {
- deep: true,
- },
- );
-
const close = (trigger: TriggerSource) => {
props.onClose?.(trigger);
};
@@ -222,7 +191,7 @@ export default defineComponent({
};
const onCloseBtn = () => {
- if (checkStrictly.value) {
+ if (props.checkStrictly) {
updateCascaderValue();
onClose();
} else {
@@ -237,6 +206,38 @@ export default defineComponent({
const onTabChange = (value: number | string) => {
stepIndex.value = Number(value);
};
+
+ watch(open, () => {
+ context.emit('update:visible', open.value);
+ });
+
+ watch(visible, () => {
+ open.value = visible.value;
+ });
+
+ watch(
+ () => props.options,
+ () => {
+ if (open.value) {
+ handleSelect(childrenInfo.value, childrenInfo.level);
+ }
+ },
+ {
+ deep: true,
+ },
+ );
+
+ watch(placeholder, (newValue, oldValue) => {
+ const index = steps.indexOf(oldValue);
+ if (index !== -1) {
+ steps[index] = newValue;
+ }
+ });
+
+ onMounted(() => {
+ initWithValue();
+ });
+
return () => {
const title = renderTNodeJSX('title') || globalConfig.value.title;
const closeBtn = renderTNodeJSX('closeBtn', { defaultNode: });
@@ -310,8 +311,8 @@ export default defineComponent({
{readerSteps()}
- {subTitles.value && subTitles.value[stepIndex.value] && (
-
{subTitles.value[stepIndex.value]}
+ {props.subTitles && props.subTitles[stepIndex.value] && (
+
{props.subTitles[stepIndex.value]}
)}
Date: Fri, 17 May 2024 10:08:53 +0800
Subject: [PATCH 5/6] fix: keys
---
.../__test__/__snapshots__/demo.test.jsx.snap | 40 ++++++++++++----
src/cascader/cascader.tsx | 47 ++++++++++---------
2 files changed, 57 insertions(+), 30 deletions(-)
diff --git a/src/cascader/__test__/__snapshots__/demo.test.jsx.snap b/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
index da6b8825b..bce4216ab 100644
--- a/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
@@ -576,6 +576,7 @@ exports[`Cascader > Cascader keysVue demo works fine 1`] = `
class="t-radio__original"
name=""
type="radio"
+ value="110000"
/>
Cascader keysVue demo works fine 1`] = `
-
-
+
+ 北京市
+
+
@@ -600,6 +606,7 @@ exports[`Cascader > Cascader keysVue demo works fine 1`] = `
class="t-radio__original"
name=""
type="radio"
+ value="120000"
/>
Cascader keysVue demo works fine 1`] = `
-
-
+
+ 天津市
+
+
@@ -1657,6 +1669,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
class="t-radio__original"
name=""
type="radio"
+ value="110000"
/>
Cascader mobileVue demo works fine 1`] = `
-
-
+
+ 北京市
+
+
@@ -1681,6 +1699,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
class="t-radio__original"
name=""
type="radio"
+ value="120000"
/>
Cascader mobileVue demo works fine 1`] = `
-
-
+
+ 天津市
+
+
diff --git a/src/cascader/cascader.tsx b/src/cascader/cascader.tsx
index 30f6ff05a..f7928fedf 100644
--- a/src/cascader/cascader.tsx
+++ b/src/cascader/cascader.tsx
@@ -53,10 +53,10 @@ export default defineComponent({
const cascaderClass = usePrefixClass('cascader');
const { globalConfig } = useConfig('cascader');
- const { visible, value, modelValue, keys } = toRefs(props);
- const open = ref(visible.value || false);
+ const { visible, value, modelValue } = toRefs(props);
const [cascaderValue, setCascaderValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
+ const open = ref(visible.value || false);
const placeholder = computed(() => props.placeholder || globalConfig.value.placeholder);
const stepIndex = ref(0);
@@ -79,13 +79,14 @@ export default defineComponent({
const watchSelectedIndexes = () => {
if (props.options && props.options.length > 0) {
+ const keys = props.keys as KeysType;
for (let i = 0, size = selectedIndexes.length; i < size; i += 1) {
const index = selectedIndexes[i];
const next = items[i]?.[index];
- selectedValue.push(next[(keys as Ref).value?.value ?? 'value']);
- steps.push(next[(keys as Ref).value?.label ?? 'label']);
- if (next[(keys as Ref).value?.children ?? 'children']) {
- items.push(next[(keys as Ref).value?.children ?? 'children']);
+ selectedValue.push(next[keys?.value ?? 'value']);
+ steps.push(next[keys?.label ?? 'label']);
+ if (next[keys?.children ?? 'children']) {
+ items.push(next[keys?.children ?? 'children']);
}
}
}
@@ -96,12 +97,13 @@ export default defineComponent({
};
const getIndexesByValue = (options: any, value: any) => {
+ const keys = props.keys as KeysType;
for (let i = 0; i < options.length; i++) {
- if (options[i][(keys as Ref).value?.value ?? 'value'] === value) {
+ if (options[i][keys?.value ?? 'value'] === value) {
return [i];
}
- if (options[i][(keys as Ref).value?.children ?? 'children']) {
- const res: any = getIndexesByValue(options[i][(keys as Ref).value?.children ?? 'children'], value);
+ if (options[i][keys?.children ?? 'children']) {
+ const res: any = getIndexesByValue(options[i][keys?.children ?? 'children'], value);
if (res) {
return [i, ...res];
}
@@ -110,24 +112,25 @@ export default defineComponent({
};
const chooseSelect = (value: RadioValue, level: number, index: number, item: any) => {
+ const keys = props.keys as KeysType;
selectedIndexes[level] = index;
selectedIndexes.length = level + 1;
selectedValue[level] = String(value);
selectedValue.length = level + 1;
- steps[level] = item[(keys as Ref).value?.label ?? 'label'] as string;
+ steps[level] = item[keys?.label ?? 'label'] as string;
- if (item[(keys as Ref).value?.children ?? 'children']?.length) {
- items[level + 1] = item[(keys as Ref).value?.children ?? 'children'];
+ if (item[keys?.children ?? 'children']?.length) {
+ items[level + 1] = item[keys?.children ?? 'children'];
items.length = level + 2;
stepIndex.value += 1;
steps[level + 1] = placeholder.value;
steps.length = level + 2;
- } else if (item[(keys as Ref).value?.children ?? 'children']?.length === 0) {
+ } else if (item[keys?.children ?? 'children']?.length === 0) {
childrenInfo.value = value;
childrenInfo.level = level;
} else {
setCascaderValue(
- item[(keys as Ref).value?.value ?? 'value'],
+ item[keys?.value ?? 'value'],
items.map((item, index) => toRaw(item?.[selectedIndexes[index]])),
);
close('finish');
@@ -135,6 +138,7 @@ export default defineComponent({
};
const cancelSelect = (value: RadioValue, level: number, index: number, item: any) => {
+ const keys = props.keys as KeysType;
selectedIndexes[level] = index;
selectedIndexes.length = level;
selectedValue.length = level;
@@ -142,23 +146,22 @@ export default defineComponent({
steps[level + 1] = placeholder.value;
steps.length = level + 1;
- if (item[(keys as Ref).value?.children ?? 'children']?.length) {
- items[level + 1] = item[(keys as Ref).value?.children ?? 'children'];
- } else if (item[(keys as Ref).value?.children ?? 'children']?.length === 0) {
+ if (item[keys?.children ?? 'children']?.length) {
+ items[level + 1] = item[keys?.children ?? 'children'];
+ } else if (item[keys?.children ?? 'children']?.length === 0) {
childrenInfo.value = value;
childrenInfo.level = level;
}
};
const handleSelect = (value: RadioValue, level: number) => {
- const index = items[level].findIndex(
- (item: any) => item[(keys as Ref).value?.value ?? 'value'] === value,
- );
+ const keys = props.keys as KeysType;
+ const index = items[level].findIndex((item: any) => item[keys?.value ?? 'value'] === value);
const item = items[level][index];
if (item.disabled) {
return;
}
- props.onPick?.({ level, value: item[(keys as Ref).value?.value ?? 'value'], index });
+ props.onPick?.({ level, value: item[keys?.value ?? 'value'], index });
if (props.checkStrictly && selectedValue.includes(String(value))) {
cancelSelect(value, level, index, item);
@@ -325,7 +328,7 @@ export default defineComponent({
Date: Fri, 17 May 2024 14:38:58 +0800
Subject: [PATCH 6/6] =?UTF-8?q?test:=20=E6=B5=8B=E8=AF=95=E6=A1=88?=
=?UTF-8?q?=E4=BE=8B=E6=8A=A5=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/cascader/__test__/index.test.jsx | 17 ++++++++++++-----
src/cascader/cascader.tsx | 6 +++---
2 files changed, 15 insertions(+), 8 deletions(-)
diff --git a/src/cascader/__test__/index.test.jsx b/src/cascader/__test__/index.test.jsx
index 8c268cf31..4a758d238 100644
--- a/src/cascader/__test__/index.test.jsx
+++ b/src/cascader/__test__/index.test.jsx
@@ -287,19 +287,26 @@ describe('cascader', () => {
});
describe('events', () => {
- it(': close', async () => {
+ it(': close trigger closeBtn', async () => {
const onClose = vi.fn();
const wrapper = mount();
const $closeBtn = wrapper.find(`.${name}__close-btn`);
await $closeBtn.trigger('click');
expect(onClose).toHaveBeenCalledTimes(1);
- expect(onClose).toHaveBeenLastCalledWith({ trigger: 'close-btn' });
+ expect(onClose).toHaveBeenLastCalledWith('close-btn');
+
+ });
+
+ it(': close trigger overlay', async () => {
+ const onClose = vi.fn();
+ const wrapper = mount();
// overlay
- const $overlay = wrapper.find(`.${prefix}-overlay`);
+ const $overlay = wrapper.find(`.${prefix}-overlay--active`);
+ expect($overlay.exists()).toBeTruthy()
$overlay.trigger('click');
- expect(onClose).toBeCalledTimes(2);
- expect(onClose).toHaveBeenLastCalledWith({ trigger: 'overlay' });
+ expect(onClose).toBeCalledTimes(1);
+ expect(onClose).toHaveBeenLastCalledWith('overlay');
});
it(': pick', async () => {
diff --git a/src/cascader/cascader.tsx b/src/cascader/cascader.tsx
index f7928fedf..ab38af7cf 100644
--- a/src/cascader/cascader.tsx
+++ b/src/cascader/cascader.tsx
@@ -21,8 +21,8 @@ import TdCascaderProps from './props';
import { useVModel } from '../shared';
import { TreeOptionData } from '../common';
import { useConfig } from '../config-provider/useConfig';
-import { useTNodeJSX } from '@/hooks/tnode';
-import { usePrefixClass } from '@/hooks/useClass';
+import { useTNodeJSX } from '../hooks/tnode';
+import { usePrefixClass } from '../hooks/useClass';
import { TriggerSource } from './type';
const { prefix } = config;
@@ -66,7 +66,7 @@ export default defineComponent({
const steps = reactive([placeholder.value]);
const initWithValue = () => {
- if (value.value != null) {
+ if (cascaderValue.value != null) {
steps.pop();
const path = getIndexesByValue(props.options, value.value);
path?.forEach((e: number) => {