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.

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(date-picker): 修复 prefixIcon suffixIcon 失效问题 #1724

Merged
merged 1 commit into from
Sep 23, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
7 changes: 6 additions & 1 deletion src/date-picker/_example/custom-icon.vue
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
<template>
<t-space>
<t-space direction="vertical">
<t-date-picker clearable :prefix-icon="renderPrefixIcon">
<template #suffixIcon>
<lock-on-icon />
</template>
</t-date-picker>
<t-date-range-picker clearable :prefix-icon="renderPrefixIcon">
<template #suffixIcon>
<lock-on-icon />
</template>
</t-date-range-picker>
</t-space>
</template>

Expand Down
8 changes: 6 additions & 2 deletions src/date-picker/hooks/useRange.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { ref, computed, watchEffect } from 'vue';
import { CalendarIcon as TdCalendarIcon } from 'tdesign-icons-vue-next';
import dayjs from 'dayjs';

import { useTNodeJSX } from '../../hooks/tnode';
import { useGlobalIcon } from '../../hooks/useGlobalIcon';
import { usePrefixClass, useConfig } from '../../hooks/useConfig';

Expand All @@ -15,6 +16,7 @@ export default function useRange(props: TdDateRangePickerProps) {
const COMPONENT_NAME = usePrefixClass('date-range-picker');
const { globalConfig } = useConfig('datePicker');
const { CalendarIcon } = useGlobalIcon({ CalendarIcon: TdCalendarIcon });
const renderTNodeJSX = useTNodeJSX();

const isMountedRef = ref(false);
const inputRef = ref();
Expand All @@ -39,12 +41,14 @@ export default function useRange(props: TdDateRangePickerProps) {
...props.rangeInputProps,
ref: inputRef,
clearable: props.clearable,
prefixIcon: props.prefixIcon,
prefixIcon: () => renderTNodeJSX('prefixIcon'),
readonly: !props.allowInput,
separator: props.separator,
placeholder: props.placeholder || globalConfig.value.placeholder[props.mode],
activeIndex: popupVisible.value ? activeIndex.value : undefined,
suffixIcon: props.suffixIcon || (() => <CalendarIcon />),
suffixIcon: () => {
return renderTNodeJSX('suffixIcon') || <CalendarIcon />;
},
class: {
[`${COMPONENT_NAME.value}__input--placeholder`]: isHoverCell.value,
},
Expand Down
8 changes: 6 additions & 2 deletions src/date-picker/hooks/useSingle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { ref, computed, watchEffect } from 'vue';
import { CalendarIcon as TdCalendarIcon } from 'tdesign-icons-vue-next';
import dayjs from 'dayjs';

import { useTNodeJSX } from '../../hooks/tnode';
import { useFormDisabled } from '../../form/hooks';
import { usePrefixClass, useConfig } from '../../hooks/useConfig';
import { useGlobalIcon } from '../../hooks/useGlobalIcon';
Expand All @@ -20,6 +21,7 @@ export default function useSingle(props: TdDatePickerProps) {
const { globalConfig } = useConfig('datePicker');
const { CalendarIcon } = useGlobalIcon({ CalendarIcon: TdCalendarIcon });
const disabled = useFormDisabled();
const renderTNodeJSX = useTNodeJSX();

const inputRef = ref();

Expand All @@ -42,10 +44,12 @@ export default function useSingle(props: TdDatePickerProps) {
const inputProps = computed(() => ({
...props.inputProps,
ref: inputRef,
prefixIcon: props.prefixIcon,
prefixIcon: () => renderTNodeJSX('prefixIcon'),
readonly: !props.allowInput,
placeholder: props.placeholder || globalConfig.value.placeholder[props.mode],
suffixIcon: props.suffixIcon || (() => <CalendarIcon />),
suffixIcon: () => {
return renderTNodeJSX('suffixIcon') || <CalendarIcon />;
},
class: [
{
[`${COMPONENT_NAME.value}__input--placeholder`]: isHoverCell.value,
Expand Down
133 changes: 130 additions & 3 deletions test/snap/__snapshots__/csr.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -41788,7 +41788,7 @@ exports[`csr snapshot test > csr test ./src/date-picker/_example/base.vue 1`] =

exports[`csr snapshot test > csr test ./src/date-picker/_example/custom-icon.vue 1`] = `
<div
class="t-space t-space-horizontal"
class="t-space t-space-vertical"
style="gap: 16px;"
>

Expand Down Expand Up @@ -41849,19 +41849,26 @@ exports[`csr snapshot test > csr test ./src/date-picker/_example/custom-icon.vue
<span
class="t-input__suffix t-input__suffix-icon"
>

<svg
class="t-icon t-icon-calendar"
class="t-icon t-icon-lock-on"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z"
d="M6 10v1h4v-1H6z"
fill="currentColor"
fill-opacity="0.9"
/>
<path
d="M4.5 5v1H3a.5.5 0 00-.5.5v7c0 .28.22.5.5.5h10a.5.5 0 00.5-.5v-7A.5.5 0 0013 6h-1.5V5a3.5 3.5 0 00-7 0zm6 1h-5V5a2.5 2.5 0 015 0v1zm-7 1h9v6h-9V7z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>

</span>
</div>
<!---->
Expand All @@ -41873,6 +41880,126 @@ exports[`csr snapshot test > csr test ./src/date-picker/_example/custom-icon.vue
<!---->


<div
class="t-space-item"
>
<div
class="t-date-range-picker"
>
<div
class="t-range-input-popup"
>

<div
class="t-range-input t-range-input--prefix t-range-input--suffix"
>
<div
class="t-range-input__inner"
>
<svg
class="t-icon t-icon-browse"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M10.88 8a2.88 2.88 0 11-5.76 0 2.88 2.88 0 015.76 0zm-1 0a1.88 1.88 0 10-3.76 0 1.88 1.88 0 003.76 0z"
fill="currentColor"
fill-opacity="0.9"
/>
<path
d="M1.12 8.23A7.72 7.72 0 008 12.5c2.9 0 5.54-1.63 6.88-4.27L15 8l-.12-.23A7.73 7.73 0 008 3.5a7.74 7.74 0 00-6.88 4.27L1 8l.12.23zM8 11.5A6.73 6.73 0 012.11 8 6.73 6.73 0 0113.9 8 6.74 6.74 0 018 11.5z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<!---->
<div
class="t-input__wrap t-range-input__inner-left"
>
<div
class="t-input t-is-default t-is-readonly"
>
<!---->
<!---->
<input
class="t-input__inner"
placeholder="请选择日期"
readonly=""
type="text"
unselectable="on"
/>
<!---->
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<div
class="t-range-input__inner-separator"
>

</div>
<div
class="t-input__wrap t-range-input__inner-right"
>
<div
class="t-input t-is-default t-is-readonly"
>
<!---->
<!---->
<input
class="t-input__inner"
placeholder="请选择日期"
readonly=""
type="text"
unselectable="on"
/>
<!---->
<!---->
<!---->
<!---->
</div>
<!---->
</div>
<!---->
<span
class="t-range-input__suffix t-range-input__suffix-icon"
>

<svg
class="t-icon t-icon-lock-on"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M6 10v1h4v-1H6z"
fill="currentColor"
fill-opacity="0.9"
/>
<path
d="M4.5 5v1H3a.5.5 0 00-.5.5v7c0 .28.22.5.5.5h10a.5.5 0 00.5-.5v-7A.5.5 0 0013 6h-1.5V5a3.5 3.5 0 00-7 0zm6 1h-5V5a2.5 2.5 0 015 0v1zm-7 1h9v6h-9V7z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>

</span>
</div>
<!---->
</div>
<!---->

</div>
</div>
</div>
<!---->


</div>
`;

Expand Down
2 changes: 1 addition & 1 deletion test/snap/__snapshots__/ssr.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -281,7 +281,7 @@ exports[`ssr snapshot test > ssr test ./src/config-provider/_example/table.vue 1

exports[`ssr snapshot test > ssr test ./src/date-picker/_example/base.vue 1`] = `"<div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-date-picker\\"><!--[--><div class=\\"t-input__wrap t-select-input t-select-input--empty\\" style=\\"\\"><div class=\\"t-input t-is-default t-is-readonly t-input--prefix t-input--suffix\\"><!----><div class=\\"t-input__prefix\\"><!--[--><!----><!----><!--]--></div><input class=\\"t-input__inner\\" readonly placeholder=\\"请选择日期\\" type=\\"text\\" unselectable=\\"on\\" value><!----><!----><!----><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z\\" fill-opacity=\\"0.9\\"></path></svg></span></div><!----></div><!----><!--]--></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-date-picker\\"><!--[--><div class=\\"t-input__wrap t-select-input t-select-input--empty\\" style=\\"\\"><div class=\\"t-input t-is-default t-input--prefix t-input--suffix\\"><!----><div class=\\"t-input__prefix\\"><!--[--><!----><!----><!--]--></div><input class=\\"t-input__inner\\" placeholder=\\"可清除、可输入的日期选择器\\" type=\\"text\\" value><!----><!----><!----><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z\\" fill-opacity=\\"0.9\\"></path></svg></span></div><!----></div><!----><!--]--></div></div><!----><!--]--><!--]--></div>"`;

exports[`ssr snapshot test > ssr test ./src/date-picker/_example/custom-icon.vue 1`] = `"<div class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-date-picker\\"><!--[--><div class=\\"t-input__wrap t-select-input t-select-input--empty\\" style=\\"\\"><div class=\\"t-input t-is-default t-is-readonly t-input--prefix t-input--suffix\\"><span class=\\"t-input__prefix t-input__prefix-icon\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-browse\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M10.88 8a2.88 2.88 0 11-5.76 0 2.88 2.88 0 015.76 0zm-1 0a1.88 1.88 0 10-3.76 0 1.88 1.88 0 003.76 0z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M1.12 8.23A7.72 7.72 0 008 12.5c2.9 0 5.54-1.63 6.88-4.27L15 8l-.12-.23A7.73 7.73 0 008 3.5a7.74 7.74 0 00-6.88 4.27L1 8l.12.23zM8 11.5A6.73 6.73 0 012.11 8 6.73 6.73 0 0113.9 8 6.74 6.74 0 018 11.5z\\" fill-opacity=\\"0.9\\"></path></svg></span><div class=\\"t-input__prefix\\"><!--[--><!----><!----><!--]--></div><input class=\\"t-input__inner\\" readonly placeholder=\\"请选择日期\\" type=\\"text\\" unselectable=\\"on\\" value><!----><!----><!----><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z\\" fill-opacity=\\"0.9\\"></path></svg></span></div><!----></div><!----><!--]--></div></div><!----><!--]--><!--]--></div>"`;
exports[`ssr snapshot test > ssr test ./src/date-picker/_example/custom-icon.vue 1`] = `"<div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-date-picker\\"><!--[--><div class=\\"t-input__wrap t-select-input t-select-input--empty\\" style=\\"\\"><div class=\\"t-input t-is-default t-is-readonly t-input--prefix t-input--suffix\\"><span class=\\"t-input__prefix t-input__prefix-icon\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-browse\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M10.88 8a2.88 2.88 0 11-5.76 0 2.88 2.88 0 015.76 0zm-1 0a1.88 1.88 0 10-3.76 0 1.88 1.88 0 003.76 0z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M1.12 8.23A7.72 7.72 0 008 12.5c2.9 0 5.54-1.63 6.88-4.27L15 8l-.12-.23A7.73 7.73 0 008 3.5a7.74 7.74 0 00-6.88 4.27L1 8l.12.23zM8 11.5A6.73 6.73 0 012.11 8 6.73 6.73 0 0113.9 8 6.74 6.74 0 018 11.5z\\" fill-opacity=\\"0.9\\"></path></svg></span><div class=\\"t-input__prefix\\"><!--[--><!----><!----><!--]--></div><input class=\\"t-input__inner\\" readonly placeholder=\\"请选择日期\\" type=\\"text\\" unselectable=\\"on\\" value><!----><!----><!----><span class=\\"t-input__suffix t-input__suffix-icon\\"><!--[--><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-lock-on\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M6 10v1h4v-1H6z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M4.5 5v1H3a.5.5 0 00-.5.5v7c0 .28.22.5.5.5h10a.5.5 0 00.5-.5v-7A.5.5 0 0013 6h-1.5V5a3.5 3.5 0 00-7 0zm6 1h-5V5a2.5 2.5 0 015 0v1zm-7 1h9v6h-9V7z\\" fill-opacity=\\"0.9\\"></path></svg><!--]--></span></div><!----></div><!----><!--]--></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-date-range-picker\\"><div class=\\"t-range-input-popup\\"><!--[--><div class=\\"t-range-input t-range-input--prefix t-range-input--suffix\\"><div class=\\"t-range-input__inner\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-browse\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M10.88 8a2.88 2.88 0 11-5.76 0 2.88 2.88 0 015.76 0zm-1 0a1.88 1.88 0 10-3.76 0 1.88 1.88 0 003.76 0z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M1.12 8.23A7.72 7.72 0 008 12.5c2.9 0 5.54-1.63 6.88-4.27L15 8l-.12-.23A7.73 7.73 0 008 3.5a7.74 7.74 0 00-6.88 4.27L1 8l.12.23zM8 11.5A6.73 6.73 0 012.11 8 6.73 6.73 0 0113.9 8 6.74 6.74 0 018 11.5z\\" fill-opacity=\\"0.9\\"></path></svg><!----><div class=\\"t-input__wrap t-range-input__inner-left\\"><div class=\\"t-input t-is-default t-is-readonly\\"><!----><!----><input class=\\"t-input__inner\\" readonly placeholder=\\"请选择日期\\" type=\\"text\\" unselectable=\\"on\\" value><!----><!----><!----><!----></div><!----></div><div class=\\"t-range-input__inner-separator\\"></div><div class=\\"t-input__wrap t-range-input__inner-right\\"><div class=\\"t-input t-is-default t-is-readonly\\"><!----><!----><input class=\\"t-input__inner\\" readonly placeholder=\\"请选择日期\\" type=\\"text\\" unselectable=\\"on\\" value><!----><!----><!----><!----></div><!----></div><!----><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><!--[--><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-lock-on\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M6 10v1h4v-1H6z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M4.5 5v1H3a.5.5 0 00-.5.5v7c0 .28.22.5.5.5h10a.5.5 0 00.5-.5v-7A.5.5 0 0013 6h-1.5V5a3.5 3.5 0 00-7 0zm6 1h-5V5a2.5 2.5 0 015 0v1zm-7 1h9v6h-9V7z\\" fill-opacity=\\"0.9\\"></path></svg><!--]--></span></div><!----></div><!----><!--]--></div></div></div><!----><!--]--><!--]--></div>"`;

exports[`ssr snapshot test > ssr test ./src/date-picker/_example/date-presets-alt.vue 1`] = `"<div class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><!--[--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-date-range-picker\\"><div class=\\"t-range-input-popup\\"><!--[--><div class=\\"t-range-input t-range-input--suffix\\"><div class=\\"t-range-input__inner\\"><!----><!----><div class=\\"t-input__wrap t-range-input__inner-left\\"><div class=\\"t-input t-is-default t-is-readonly\\"><!----><!----><input class=\\"t-input__inner\\" readonly placeholder=\\"请选择日期\\" type=\\"text\\" unselectable=\\"on\\" value=\\"2022-01-01\\"><!----><!----><!----><!----></div><!----></div><div class=\\"t-range-input__inner-separator\\"></div><div class=\\"t-input__wrap t-range-input__inner-right\\"><div class=\\"t-input t-is-default t-is-readonly\\"><!----><!----><input class=\\"t-input__inner\\" readonly placeholder=\\"请选择日期\\" type=\\"text\\" unselectable=\\"on\\" value=\\"2022-08-08\\"><!----><!----><!----><!----></div><!----></div><!----><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z\\" fill-opacity=\\"0.9\\"></path></svg></span></div><!----></div><!----><!--]--></div></div></div><!----><!--]--><!--[--><div class=\\"t-space-item\\"><div class=\\"t-date-range-picker\\"><div class=\\"t-range-input-popup\\"><!--[--><div class=\\"t-range-input t-range-input--suffix\\"><div class=\\"t-range-input__inner\\"><!----><!----><div class=\\"t-input__wrap t-range-input__inner-left\\"><div class=\\"t-input t-is-default t-is-readonly\\"><!----><!----><input class=\\"t-input__inner\\" readonly placeholder=\\"请选择日期\\" type=\\"text\\" unselectable=\\"on\\" value=\\"2022-01-01 11:11:11\\"><!----><!----><!----><!----></div><!----></div><div class=\\"t-range-input__inner-separator\\"></div><div class=\\"t-input__wrap t-range-input__inner-right\\"><div class=\\"t-input t-is-default t-is-readonly\\"><!----><!----><input class=\\"t-input__inner\\" readonly placeholder=\\"请选择日期\\" type=\\"text\\" unselectable=\\"on\\" value=\\"2022-08-08 12:12:12\\"><!----><!----><!----><!----></div><!----></div><!----><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\" style=\\"\\"><path fill=\\"currentColor\\" d=\\"M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z\\" fill-opacity=\\"0.9\\"></path></svg></span></div><!----></div><!----><!--]--></div></div></div><!----><!--]--><!--]--></div>"`;

Expand Down