feat(configprovider): support classprefix replace for all components

Tencent · Aug 14, 2022 · d19bc4b · d19bc4b
1 parent a46ee27
commit d19bc4b
Show file tree

Hide file tree

Showing 16 changed files with 172 additions and 172 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,12 +1,6 @@
 {
   "eslint.format.enable": true,
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact",
-    "vue"
-  ],
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue"],
   "[vue]": {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
@@ -27,7 +21,5 @@
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   },
-  "cSpell.words": [
-    "tdesign"
-  ]
-}
+  "cSpell.words": ["tdesign", "popconfirm"]
+}
diff --git a/src/breadcrumb/breadcrumb-item.tsx b/src/breadcrumb/breadcrumb-item.tsx
@@ -114,7 +114,7 @@ export default mixins(classPrefixMixins).extend({
     );
 
     if (href && !disabled) {
-      textClass.push(`${this.classPrefix}`);
+      textClass.push(`${this.classPrefix}-link`);
       itemContent = (
         <a class={textClass} href={href} target={target} {...{ on: this.$listeners }}>
           {textContent}

diff --git a/src/calendar/calendar-cell.tsx b/src/calendar/calendar-cell.tsx
@@ -1,22 +1,24 @@
 // 通用库
 import dayjs from 'dayjs';
-import Vue, { VNode, PropType } from 'vue';
-import { prefix } from '../config';
+import { VNode, PropType } from 'vue';
 // 组件的一些常量
-import { COMPONENT_NAME } from './const';
 
 // 组件相关的自定义类型
 import { CalendarCell, TdCalendarProps } from './type';
 import { renderTNodeJSXDefault, renderTNodeJSX } from '../utils/render-tnode';
+import mixins from '../utils/mixins';
+import { getClassPrefixMixins } from '../config-provider/config-receiver';
+
+const classPrefixMixins = getClassPrefixMixins('calendar');
 
 const clickTypeEmitEventMap = {
   click: 'click',
   dblclick: 'dblclick',
   contextmenu: 'rightclick',
 };
 
-export default Vue.extend({
-  name: `${COMPONENT_NAME}-cell`,
+export default mixins(classPrefixMixins).extend({
+  name: 'TCalendarCell',
   props: {
     item: {
       type: Object as PropType<CalendarCell>,
@@ -56,11 +58,11 @@ export default Vue.extend({
       } = this.item;
       const isNow = mode === 'year' ? new Date().getMonth() === date.getMonth() : formattedDate === dayjs().format('YYYY-MM-DD');
       return [
-        `${prefix}-calendar__table-body-cell`,
+        `${this.componentName}__table-body-cell`,
         {
-          [`${prefix}-is-disabled`]: this.disabled,
-          [`${prefix}-is-checked`]: isCurrent,
-          [`${prefix}-calendar__table-body-cell--now`]: isNow,
+          [`${this.classPrefix}-is-disabled`]: this.disabled,
+          [`${this.classPrefix}-is-checked`]: isCurrent,
+          [`${this.componentName}__table-body-cell--now`]: isNow,
         },
       ];
     },
@@ -78,8 +80,8 @@ export default Vue.extend({
 
     const defaultNode = () => (
       <span>
-        <div class={`${prefix}-calendar__table-body-cell-display`}>{valueDisplay}</div>
-        <div class={`${prefix}-calendar__table-body-cell-content`}>
+        <div class={`${this.componentName}__table-body-cell-display`}>{valueDisplay}</div>
+        <div class={`${this.componentName}__table-body-cell-content`}>
           {allowSlot
             && renderTNodeJSX(this, 'cellAppend', {
               params: item,

diff --git a/src/calendar/calendar.tsx b/src/calendar/calendar.tsx
@@ -11,7 +11,7 @@ import { getIEVersion } from '../_common/js/utils/helper';
 
 // 组件的一些常量
 import {
-  COMPONENT_NAME, MIN_YEAR, FIRST_MONTH_OF_YEAR, LAST_MONTH_OF_YEAR, DEFAULT_YEAR_CELL_NUMINROW,
+  MIN_YEAR, FIRST_MONTH_OF_YEAR, LAST_MONTH_OF_YEAR, DEFAULT_YEAR_CELL_NUMINROW,
 } from './const';
 
 // 子组件
@@ -121,11 +121,11 @@ export default mixins(getConfigReceiverMixins<Vue, CalendarConfig>('calendar')).
     },
     // 组件最外层的class名（除去前缀，class名和theme参数一致）
     calendarCls(): Record<string, any> {
-      return [`${COMPONENT_NAME}`, `${COMPONENT_NAME}--${this.theme}`];
+      return [`${this.componentName}`, `${this.componentName}--${this.theme}`];
     },
 
     calendarPanelCls(): Record<string, any> {
-      return [`${COMPONENT_NAME}__panel`, `${COMPONENT_NAME}__panel--${this.curSelectedMode}`];
+      return [`${this.componentName}__panel`, `${this.componentName}__panel--${this.curSelectedMode}`];
     },
 
     isWeekRender(): boolean {
@@ -515,15 +515,15 @@ export default mixins(getConfigReceiverMixins<Vue, CalendarConfig>('calendar')).
     renderControl() {
       const { controllerOptions } = this;
       return (
-        <div class={`${COMPONENT_NAME}__control`}>
-          <div class={`${COMPONENT_NAME}__title`}>
+        <div class={`${this.componentName}__control`}>
+          <div class={`${this.componentName}__title`}>
             {renderTNodeJSX(this, 'head', {
               params: controllerOptions,
             })}
           </div>
-          <div class={`${COMPONENT_NAME}__control-section`}>
+          <div class={`${this.componentName}__control-section`}>
             {this.isYearVisible && (
-              <div class={`${COMPONENT_NAME}__control-section-cell`}>
+              <div class={`${this.componentName}__control-section-cell`}>
                 <t-select
                   v-model={this.curSelectedYear}
                   size={this.controlSize}
@@ -540,7 +540,7 @@ export default mixins(getConfigReceiverMixins<Vue, CalendarConfig>('calendar')).
               </div>
             )}
             {this.curSelectedMode === 'month' && this.isMonthVisible && (
-              <div class={`${COMPONENT_NAME}__control-section-cell`}>
+              <div class={`${this.componentName}__control-section-cell`}>
                 <t-select
                   v-model={this.curSelectedMonth}
                   size={this.controlSize}
@@ -557,7 +557,7 @@ export default mixins(getConfigReceiverMixins<Vue, CalendarConfig>('calendar')).
               </div>
             )}
             {this.isModeVisible && (
-              <div class={`${COMPONENT_NAME}__control-section-cell`} style="height: auto">
+              <div class={`${this.componentName}__control-section-cell`} style="height: auto">
                 <t-radio-group
                   v-model={this.curSelectedMode}
                   variant="default-filled"
@@ -575,9 +575,9 @@ export default mixins(getConfigReceiverMixins<Vue, CalendarConfig>('calendar')).
               </div>
             )}
             {this.theme === 'full' && this.curSelectedMode === 'month' && this.isWeekendToggleVisible && (
-              <div class={`${COMPONENT_NAME}__control-section-cell`}>
+              <div class={`${this.componentName}__control-section-cell`}>
                 <t-check-tag
-                  class={`${COMPONENT_NAME}__control-tag`}
+                  class={`${this.componentName}__control-tag`}
                   defaultChecked={!this.isShowWeekend}
                   disabled={this.isWeekendToggleDisabled}
                   onClick={this.onWeekendToggleClick}
@@ -588,7 +588,7 @@ export default mixins(getConfigReceiverMixins<Vue, CalendarConfig>('calendar')).
               </div>
             )}
             {this.theme === 'full' && this.isCurrentBtnVisible && (
-              <div class={`${COMPONENT_NAME}__control-section-cell`}>
+              <div class={`${this.componentName}__control-section-cell`}>
                 <t-button
                   size={this.controlSize}
                   disabled={this.isCurrentBtnDisabled}
@@ -612,12 +612,12 @@ export default mixins(getConfigReceiverMixins<Vue, CalendarConfig>('calendar')).
     } = this;
 
     const monthBody = () => (
-      <table class={`${COMPONENT_NAME}__table`}>
-        <thead class={`${COMPONENT_NAME}__table-head`}>
-          <tr class={`${COMPONENT_NAME}__table-head-row`}>
+      <table class={`${this.componentName}__table`}>
+        <thead class={`${this.componentName}__table-head`}>
+          <tr class={`${this.componentName}__table-head-row`}>
             {cellColHeaders.map(
               (item, index) => checkMonthCellColHeaderVisibled(item) && (
-                  <th class={`${COMPONENT_NAME}__table-head-cell`}>
+                  <th class={`${this.componentName}__table-head-cell`}>
                     {Array.isArray(this.week)
                       ? this.week[index]
                       : renderTNodeJSXDefault(this, 'week', {
@@ -630,9 +630,9 @@ export default mixins(getConfigReceiverMixins<Vue, CalendarConfig>('calendar')).
           </tr>
         </thead>
 
-        <tbody class={`${COMPONENT_NAME}__table-body`}>
+        <tbody class={`${this.componentName}__table-body`}>
           {this.monthCellsData.map((week, weekIndex) => (
-            <tr class={`${COMPONENT_NAME}__table-body-row`}>
+            <tr class={`${this.componentName}__table-body-row`}>
               {week.map(
                 (item, itemIndex) => this.checkMonthCellItemShowed(item) && (
                     <calendar-cell-item
@@ -657,10 +657,10 @@ export default mixins(getConfigReceiverMixins<Vue, CalendarConfig>('calendar')).
     );
 
     const yearBody = () => (
-      <table class={`${COMPONENT_NAME}__table`}>
-        <tbody class={`${COMPONENT_NAME}__table-body`}>
+      <table class={`${this.componentName}__table`}>
+        <tbody class={`${this.componentName}__table-body`}>
           {this.yearCellsData.map((cell, cellIndex) => (
-            <tr class={`${COMPONENT_NAME}__table-body-row`}>
+            <tr class={`${this.componentName}__table-body-row`}>
               {cell.map((item, itemIndex) => (
                 <calendar-cell-item
                   key={`m-${cellIndex}-${itemIndex}`}

diff --git a/src/calendar/const.ts b/src/calendar/const.ts
@@ -1,8 +1,4 @@
-import { prefix } from '../config';
-
 /** 常量 */
-// 组件名
-export const COMPONENT_NAME = `${prefix}-calendar`;
 // 非法日期的标识
 export const INVALID_DATE = 'Invalid Date';
 // 最小年份
@@ -59,7 +55,6 @@ export const MONTH_CN_MAP: Record<string, string> = {
 };
 
 export default {
-  COMPONENT_NAME,
   INVALID_DATE,
   MIN_YEAR,
   FIRST_MONTH_OF_YEAR,

diff --git a/src/checkbox/checkbox.tsx b/src/checkbox/checkbox.tsx
@@ -1,15 +1,15 @@
 import Vue, { VNode, VueConstructor } from 'vue';
 import { renderContent } from '../utils/render-tnode';
-import { prefix } from '../config';
 import CLASSNAMES from '../utils/classnames';
 import checkboxProps from './props';
 import Group from './group';
 import { omit } from '../utils/helper';
 import { ClassName } from '../common';
 import { emitEvent } from '../utils/event';
 import { TdCheckboxProps } from './type';
+import { getClassPrefixMixins } from '../config-provider/config-receiver';
 
-const name = `${prefix}-checkbox`;
+const classPrefixMixins = getClassPrefixMixins('checkbox');
 
 interface CheckboxInstance extends Vue {
   checkboxGroup: InstanceType<typeof Group>;
@@ -20,8 +20,8 @@ export default (Vue as VueConstructor<CheckboxInstance>).extend({
 
   inheritAttrs: false,
 
-  props: { ...checkboxProps },
-
+  props: { ...checkboxProps, componentName: String },
+  mixins: [classPrefixMixins],
   inject: {
     checkboxGroup: { default: undefined },
   },
@@ -36,7 +36,7 @@ export default (Vue as VueConstructor<CheckboxInstance>).extend({
   computed: {
     labelClasses(): ClassName {
       return [
-        `${name}`,
+        `${this.componentName}`,
         {
           [CLASSNAMES.STATUS.checked]: this.checked$,
           [CLASSNAMES.STATUS.disabled]: this.disabled$,
@@ -71,7 +71,7 @@ export default (Vue as VueConstructor<CheckboxInstance>).extend({
         <input
           type="checkbox"
           on={{ ...omit(this.$listeners, ['checked', 'change']) }}
-          class={`${name}__former`}
+          class={`${this.componentName}__former`}
           disabled={this.disabled$}
           readonly={this.readonly}
           indeterminate={this.indeterminate$}
@@ -80,14 +80,14 @@ export default (Vue as VueConstructor<CheckboxInstance>).extend({
           checked={this.checked$}
           onChange={this.handleChange}
         ></input>
-        <span class={`${name}__input`}></span>
-        <span class={`${name}__label`}>{renderContent(this, 'default', 'label')}</span>
+        <span class={`${this.componentName}__input`}></span>
+        <span class={`${this.componentName}__label`}>{renderContent(this, 'default', 'label')}</span>
       </label>
     );
   },
 
   methods: {
-    handleChange(e: Event) {
+    handleChange(e: Event): void {
       const value = !this.checked$;
       emitEvent<Parameters<TdCheckboxProps['onChange']>>(this, 'change', value, { e });
       e.stopPropagation();

diff --git a/src/checkbox/group.tsx b/src/checkbox/group.tsx
@@ -1,18 +1,19 @@
-import Vue, { VNode } from 'vue';
+import { VNode } from 'vue';
 import intersection from 'lodash/intersection';
-import { prefix } from '../config';
 import Checkbox from './checkbox';
 import checkboxGroupProps from './checkbox-group-props';
 import { emitEvent } from '../utils/event';
 import {
   CheckboxOptionObj, TdCheckboxProps, CheckboxGroupValue, TdCheckboxGroupProps,
 } from './type';
+import { getClassPrefixMixins } from '../config-provider/config-receiver';
+import mixins from '../utils/mixins';
 
-type CheckedChangeType = Parameters<TdCheckboxGroupProps['onChange']>;
+const classPrefixMixins = getClassPrefixMixins('checkbox');
 
-const name = `${prefix}-checkbox-group`;
+type CheckedChangeType = Parameters<TdCheckboxGroupProps['onChange']>;
 
-export default Vue.extend({
+export default mixins(classPrefixMixins).extend({
   name: 'TCheckboxGroup',
 
   components: {
@@ -118,7 +119,7 @@ export default Vue.extend({
       children = nodes;
     }
     return (
-      <div class={name} onClick={(e: MouseEvent) => this.$emit('click', e)}>
+      <div class={`${this.componentName}-group`} onClick={(e: MouseEvent) => this.$emit('click', e)}>
         {children}
       </div>
     );