日历组件代码重构成组合式api

src/calendar/calendar-cell.tsx

@@ -1,12 +1,13 @@
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 import dayjs from 'dayjs';
-import { emitEvent } from '../utils/event';
 
-import { usePrefixClass, useCommonClassName } from '../config-provider';
+import { useCommonClassName } from '../config-provider';
+import { useContent } from '../hooks/tnode';
+
+import { useCalendarCellClass } from './hook';
 
 // 组件相关的自定义类型
 import { CalendarCell } from './type';
-import { renderTNodeJSXDefault, renderTNodeJSX } from '../utils/render-tnode';
 
 const clickTypeEmitEventMap = {
   click: 'click',
@@ -32,82 +33,73 @@ export default defineComponent({
     },
     t: Function,
     global: Object,
-    cell: Function,
+    cell: [String, Function],
   },
-  emits: ['click', 'dblclick', 'rightclick'],
-  setup() {
-    const COMPONENT_NAME = usePrefixClass('calendar');
-    const classPrefix = usePrefixClass();
+  emits: [...Object.values(clickTypeEmitEventMap)],
+  setup(props, { emit }) {
+    const renderContent = useContent();
+    const cls = useCalendarCellClass();
     const { STATUS } = useCommonClassName();
-    return {
-      STATUS,
-      COMPONENT_NAME,
-      classPrefix,
-    };
-  },
-  computed: {
-    allowSlot(): boolean {
-      return this.theme === 'full';
-    },
-    disabled(): boolean {
-      return this.item.mode === 'month' && this.item.belongTo !== 0;
-    },
-    valueDisplay(): string {
-      if (this.item.mode === 'month') {
-        const dateNum = this.item.date.getDate();
-        const fillZero = dateNum < 10 && (this.fillWithZero ?? this.global.fillWithZero ?? true);
+
+    const valueDisplay = computed<string>(() => {
+      if (props.item.mode === 'month') {
+        const dateNum = props.item.date.getDate();
+        const fillZero = dateNum < 10 && (props.fillWithZero ?? props.global.fillWithZero ?? true);
         return fillZero ? `0${dateNum}` : dateNum;
       }
-      const map = this.t(this.global.cellMonth).split(',');
-      return map[this.item.date.getMonth().toString()];
-    },
-    cellCls(): Record<string, any> {
-      const { mode, date, formattedDate, isCurrent } = this.item;
+      const map = props.t(props.global.cellMonth).split(',');
+      return map[props.item.date.getMonth().toString()];
+    });
+    const allowSlot = computed<boolean>(() => {
+      return props.theme === 'full';
+    });
+    const disabled = computed<boolean>(() => {
+      return props.item.mode === 'month' && props.item.belongTo !== 0;
+    });
+    const cellCls = computed(() => {
+      const { mode, date, formattedDate, isCurrent } = props.item;
       const isNow =
         mode === 'year' ? new Date().getMonth() === date.getMonth() : formattedDate === dayjs().format('YYYY-MM-DD');
       return [
-        `${this.COMPONENT_NAME}__table-body-cell`,
+        cls.tableBodyCell.value,
         {
-          [this.STATUS.disabled]: this.disabled,
-          [this.STATUS.checked]: isCurrent,
-          [`${this.COMPONENT_NAME}__table-body-cell--now`]: isNow,
+          [STATUS.value.disabled]: disabled.value,
+          [STATUS.value.checked]: isCurrent,
+          [cls.tableBodyCell4Now.value]: isNow,
         },
       ];
-    },
-  },
-  methods: {
-    clickCell(e: MouseEvent) {
-      if (this.disabled) return;
-      emitEvent(this, clickTypeEmitEventMap[e.type], e);
-    },
-  },
-  render() {
-    // const { item, cellCls, clickCell, dblclick, contextmenuClick, valueDisplay, allowSlot } = this;
-    const { item, cellCls, clickCell, valueDisplay, allowSlot } = this;
+    });
+    const clickCell = (e: MouseEvent): void => {
+      if (disabled.value) return;
+      const emitName = clickTypeEmitEventMap[e.type];
+      emit(emitName, e);
+    };
 
-    const defaultNode = () => (
-      <span>
-        <div class={`${this.COMPONENT_NAME}__table-body-cell-display`}>{valueDisplay}</div>
-        <div class={`${this.COMPONENT_NAME}__table-body-cell-content`}>
-          {allowSlot &&
-            renderTNodeJSX(this, 'cellAppend', {
-              params: item,
+    const renderDefaultNode = () => (
+      <>
+        <div class={cls.tableBodyCellDisplay.value}>{valueDisplay.value}</div>
+        <div class={cls.tableBodyCellCsontent.value}>
+          {allowSlot.value &&
+            renderContent('cellAppend', undefined, {
+              params: { ...props.item },
             })}
         </div>
-      </span>
+      </>
     );
 
-    return (
-      item && (
-        <div class={cellCls} onClick={clickCell} ondblclick={clickCell} oncontextmenu={clickCell}>
-          {typeof this.cell === 'function'
-            ? this.cell(item)
-            : renderTNodeJSXDefault(this, 'cell', {
-                defaultNode: defaultNode(),
-                params: item,
-              })}
-        </div>
-      )
-    );
+    return () => {
+      return (
+        props.item && (
+          <td class={cellCls.value} onClick={clickCell} ondblclick={clickCell} oncontextmenu={clickCell}>
+            {typeof props.cell === 'function'
+              ? props.cell({ ...props.item })
+              : renderContent('cell', undefined, {
+                  defaultNode: renderDefaultNode(),
+                  params: { ...props.item },
+                })}
+          </td>
+        )
+      );
+    };
   },
 });