refact: Change lots of className

Author: zombieJ

assets/index.less

@@ -31,78 +31,78 @@
     display: flex;
     flex-direction: column;
 
-    // Header
-    &-header {
-      display: flex;
-
-      > * {
-        flex: none;
-      }
+    table {
+      text-align: center;
+    }
+  }
 
-      &-view {
-        flex: auto;
-        text-align: center;
+  // Header
+  &-header {
+    display: flex;
 
-        > button {
-          border: 0;
-          padding: 0;
-        }
-      }
+    > * {
+      flex: none;
     }
 
-    // Content
-    &-cell {
-      color: #aaa;
-
-      &-disabled {
-        opacity: 0.2;
-      }
+    &-view {
+      flex: auto;
+      text-align: center;
 
-      &-inner {
-        font-size: 12px;
-        width: 100%;
-        height: 20px;
-        line-height: 20px;
-        display: inline-block;
-        box-sizing: border-box;
+      > button {
         border: 0;
         padding: 0;
-        margin: 0;
-        background: transparent;
-        cursor: pointer;
-        outline: none;
-        border: none;
-        transition: background 0.3s, border 0.3s;
-
-        &:hover {
-          background: fade(blue, 30%) !important;
-        }
       }
+    }
+  }
 
-      &-in-view {
-        color: #333;
-      }
+  // Content
+  &-cell {
+    color: #aaa;
 
-      &-in-range > &-inner {
-        background: fade(blue, 5%);
-      }
-      &-today > &-inner {
-        border: 1px solid blue;
-      }
-      &-selected > &-inner {
-        background: fade(blue, 20%);
+    &-disabled {
+      opacity: 0.2;
+    }
+
+    &-inner {
+      font-size: 12px;
+      width: 100%;
+      height: 20px;
+      line-height: 20px;
+      display: inline-block;
+      box-sizing: border-box;
+      border: 0;
+      padding: 0;
+      margin: 0;
+      background: transparent;
+      cursor: pointer;
+      outline: none;
+      border: none;
+      transition: background 0.3s, border 0.3s;
+
+      &:hover {
+        background: fade(blue, 30%) !important;
       }
     }
 
-    table {
-      text-align: center;
+    &-in-view {
+      color: #333;
+    }
+
+    &-in-range > &-inner {
+      background: fade(blue, 5%);
+    }
+    &-today > &-inner {
+      border: 1px solid blue;
+    }
+    &-selected > &-inner {
+      background: fade(blue, 20%);
     }
   }
 
   // ================== Year & Month Panel ==================
   &-year-panel,
   &-month-panel {
-    &-cell-inner {
+    .@{prefix-cls}-cell-inner {
       width: 80px;
     }
   }
@@ -111,38 +111,38 @@
   &-week-panel {
     &-row {
       &:hover {
-        .@{prefix-cls}-week-panel-cell {
+        .@{prefix-cls}-cell {
           background: red;
         }
       }
 
       &-selected {
-        .@{prefix-cls}-week-panel-cell {
+        .@{prefix-cls}-cell {
           background: rgba(0, 0, 255, 0.3);
         }
       }
     }
 
-    &-cell,
-    &-cell-inner {
+    .@{prefix-cls}-cell,
+    .@{prefix-cls}-cell-inner {
       width: 20px;
     }
 
-    &-cell-week {
+    .@{prefix-cls}-cell-week {
       font-size: 12px;
       color: #999;
       font-weight: bold;
     }
 
-    &-cell:hover > &-cell-inner,
-    &-cell-selected > &-cell-inner {
+    .@{prefix-cls}-cell:hover > .@{prefix-cls}-cell-inner,
+    .@{prefix-cls}-cell-selected > .@{prefix-cls}-cell-inner {
       background: transparent;
     }
   }
 
   // ====================== Date Panel ======================
   &-date-panel {
-    &-cell-inner {
+    .@{prefix-cls}-cell-inner {
       width: 20px;
     }
   }
@@ -151,7 +151,7 @@
   &-time-panel {
     width: auto;
 
-    &-content {
+    .@{prefix-cls}-content {
       display: flex;
       max-height: 200px;
     }
@@ -163,8 +163,10 @@
       margin: 0;
       padding: 0 0 180px 0;
       overflow-y: hidden;
+      overflow-x: hidden;
       width: 50px;
       transition: background 0.3s;
+      font-size: 12px;
 
       &-active {
         background: rgba(0, 0, 255, 0.1);

src/panels/DatePanel/index.tsx

@@ -73,7 +73,7 @@ function DatePanel<DateType>(props: DatePanelProps<DateType>) {
     >
       <DateHeader
         {...props}
-        prefixCls={panelPrefixCls}
+        prefixCls={prefixCls}
         value={value}
         viewDate={viewDate}
         // View Operation
@@ -98,7 +98,7 @@ function DatePanel<DateType>(props: DatePanelProps<DateType>) {
       />
       <DateBody
         {...props}
-        prefixCls={panelPrefixCls}
+        prefixCls={prefixCls}
         value={value}
         viewDate={viewDate}
         rowCount={DATE_ROW_COUNT}

src/panels/DecadePanel/index.tsx

@@ -64,7 +64,7 @@ function DecadePanel<DateType>(props: DecadePanelProps<DateType>) {
     <div className={panelPrefixCls}>
       <DecadeHeader
         {...props}
-        prefixCls={panelPrefixCls}
+        prefixCls={prefixCls}
         onPrevDecades={() => {
           onDecadesChange(-1);
         }}
@@ -74,7 +74,7 @@ function DecadePanel<DateType>(props: DecadePanelProps<DateType>) {
       />
       <DecadeBody
         {...props}
-        prefixCls={panelPrefixCls}
+        prefixCls={prefixCls}
         onSelect={onInternalSelect}
       />
     </div>

src/panels/MonthPanel/index.tsx

@@ -52,7 +52,7 @@ function MonthPanel<DateType>(props: MonthPanelProps<DateType>) {
     <div className={panelPrefixCls}>
       <MonthHeader
         {...props}
-        prefixCls={panelPrefixCls}
+        prefixCls={prefixCls}
         onPrevYear={() => {
           onYearChange(-1);
         }}
@@ -65,7 +65,7 @@ function MonthPanel<DateType>(props: MonthPanelProps<DateType>) {
       />
       <MonthBody<DateType>
         {...props}
-        prefixCls={panelPrefixCls}
+        prefixCls={prefixCls}
         onSelect={date => {
           onSelect(date);
           onPanelChange('date', date);

src/panels/TimePanel/TimeBody.tsx

@@ -64,6 +64,7 @@ function TimeBody<DateType>(props: TimeBodyProps<DateType>) {
     onSelect: (diff: number) => void;
   }[] = [];
   const contentPrefixCls = `${prefixCls}-content`;
+  const columnPrefixCls = `${prefixCls}-time-panel`;
 
   let isPM: boolean | undefined;
   let hour = value ? generateConfig.getHour(value) : -1;
@@ -155,6 +156,7 @@ function TimeBody<DateType>(props: TimeBodyProps<DateType>) {
     if (condition !== false) {
       columns.push({
         node: React.cloneElement(node, {
+          prefixCls: columnPrefixCls,
           value: columnValue,
           active: activeColumnIndex === columns.length,
           onSelect: onColumnSelect,
@@ -169,20 +171,14 @@ function TimeBody<DateType>(props: TimeBodyProps<DateType>) {
   }
 
   // Hour
-  addColumnNode(
-    showHour,
-    <TimeUnitColumn key="hour" prefixCls={prefixCls} />,
-    hour,
-    hours,
-    num => {
-      onSelect(setTime(isPM, num, minute, second));
-    },
-  );
+  addColumnNode(showHour, <TimeUnitColumn key="hour" />, hour, hours, num => {
+    onSelect(setTime(isPM, num, minute, second));
+  });
 
   // Minute
   addColumnNode(
     showMinute,
-    <TimeUnitColumn key="minute" prefixCls={prefixCls} />,
+    <TimeUnitColumn key="minute" />,
     minute,
     minutes,
     num => {
@@ -193,7 +189,7 @@ function TimeBody<DateType>(props: TimeBodyProps<DateType>) {
   // Second
   addColumnNode(
     showSecond,
-    <TimeUnitColumn key="second" prefixCls={prefixCls} />,
+    <TimeUnitColumn key="second" />,
     second,
     seconds,
     num => {
@@ -209,7 +205,7 @@ function TimeBody<DateType>(props: TimeBodyProps<DateType>) {
 
   addColumnNode(
     use12Hours === true,
-    <TimeUnitColumn key="12hours" prefixCls={prefixCls} />,
+    <TimeUnitColumn key="12hours" />,
     PMIndex,
     [{ label: 'AM', value: 0 }, { label: 'PM', value: 1 }],
     num => {

src/panels/TimePanel/TimeUnitColumn.tsx

@@ -9,7 +9,7 @@ export interface Unit {
 }
 
 export interface TimeUnitColumnProps {
-  prefixCls: string;
+  prefixCls?: string;
   units?: Unit[];
   value?: number;
   active?: boolean;

src/panels/TimePanel/index.tsx

@@ -86,10 +86,10 @@ function TimePanel<DateType>(props: TimePanelProps<DateType>) {
         [`${panelPrefixCls}-active`]: active,
       })}
     >
-      <TimeHeader {...props} format={format} prefixCls={panelPrefixCls} />
+      <TimeHeader {...props} format={format} prefixCls={prefixCls} />
       <TimeBody
         {...props}
-        prefixCls={panelPrefixCls}
+        prefixCls={prefixCls}
         activeColumnIndex={activeColumnIndex}
         operationRef={bodyOperationRef}
       />

src/panels/WeekPanel/index.tsx

@@ -10,7 +10,7 @@ function WeekPanel<DateType>(props: WeekPanelProps<DateType>) {
   const { prefixCls, generateConfig, locale, value } = props;
 
   // Render additional column
-  const cellPrefixCls = `${prefixCls}-week-panel-cell`;
+  const cellPrefixCls = `${prefixCls}-cell`;
   const prefixColumn = (date: DateType) => (
     <td
       key="week"

src/panels/YearPanel/index.tsx

@@ -54,7 +54,7 @@ function YearPanel<DateType>(props: YearPanelProps<DateType>) {
     <div className={panelPrefixCls}>
       <YearHeader
         {...props}
-        prefixCls={panelPrefixCls}
+        prefixCls={prefixCls}
         onPrevDecade={() => {
           onDecadeChange(-1);
         }}
@@ -67,7 +67,7 @@ function YearPanel<DateType>(props: YearPanelProps<DateType>) {
       />
       <YearBody
         {...props}
-        prefixCls={panelPrefixCls}
+        prefixCls={prefixCls}
         onSelect={date => {
           onPanelChange('month', date);
           onSelect(date);

tests/__snapshots__/panel.spec.tsx.snap

@@ -9,16 +9,16 @@ exports[`Panel time disabled columns 1`] = `
     class="rc-picker-time-panel"
   >
     <div
-      class="rc-picker-time-panel-header"
+      class="rc-picker-header"
     >
       <div
-        class="rc-picker-time-panel-header-view"
+        class="rc-picker-header-view"
       >
          
       </div>
     </div>
     <div
-      class="rc-picker-time-panel-content"
+      class="rc-picker-content"
     >
       <ul
         class="rc-picker-time-panel-column"