fix(date-picker): 修复 prefixIcon suffixIcon 失效问题 (#1724)

Tencent · Sep 23, 2022 · 1198228 · 1198228
1 parent 1979baf
commit 1198228
Show file tree

Hide file tree

Showing 6 changed files with 150 additions and 10 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/date-picker/_example/custom-icon.vue b/src/date-picker/_example/custom-icon.vue
@@ -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>
 

diff --git a/src/date-picker/hooks/useRange.tsx b/src/date-picker/hooks/useRange.tsx
@@ -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';
 
@@ -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();
@@ -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,
     },

diff --git a/src/date-picker/hooks/useSingle.tsx b/src/date-picker/hooks/useSingle.tsx
@@ -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';
@@ -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();
 
@@ -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,

diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap
@@ -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;"
 >
 
@@ -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>
         <!---->
@@ -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>
 `;
 

diff --git a/test/snap/__snapshots__/ssr.test.js.snap b/test/snap/__snapshots__/ssr.test.js.snap
@@ -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>"`;