Merge pull request #159 from treadpit/develop

feat: always show todo label when selected #158
treadpit · Aug 8, 2019 · 3c284d0 · 3c284d0
2 parents 4f1a889 + 5d550c3
commit 3c284d0
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 17 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -217,8 +217,8 @@ this.calendar.setTodoLabels({
   // 待办点标记设置
   pos: 'bottom', // 待办点标记位置 ['top', 'bottom']
   dotColor: '#40', // 待办点标记颜色
-  // 待办圆圈标记设置（如圆圈标记已签到日期），该设置与点标记设置互斥
-  circle: true, // 待办
+  circle: true, // 待办圆圈标记设置（如圆圈标记已签到日期），该设置与点标记设置互斥
+  showLabelAlways: true, // 点击时是否显示代办标记（圆点/文字），在 circle 为 true 时无效
   days: [{
     year: 2018,
     month: 1,

diff --git a/src/component/calendar/index.wxml b/src/component/calendar/index.wxml
@@ -39,13 +39,13 @@
               </view>
               <view
                 wx:if="{{item.showTodoLabel}}"
-                class="{{item.todoText ? 'todo-text' : 'todo-dot'}} {{calendar.todoLabelPos === 'bottom' ? 'todo-text-bottom todo-dot-bottom' : 'todo-text-top todo-dot-top'}}"
+                class="{{item.todoText ? 'todo-text' : 'todo-dot'}} {{calendar.todoLabelPos === 'bottom' ? 'todo-text-bottom todo-dot-bottom' : 'todo-text-top todo-dot-top'}} {{calendar.showLabelAlways && item.choosed && calendar.todoLabelPos === 'bottom' ? 'todo-text-bottom-always todo-dot-bottom-always' : ''}} {{calendar.showLabelAlways && item.choosed && calendar.todoLabelPos === 'top' ? 'todo-text-top-always todo-dot-top-always' : ''}}"
                 style="background-color: {{calendar.todoLabelColor}};">
                   {{item.todoText}}
                 </view>
             </view>
             <view wx:else class="dot-day-height b tb ac pc">
-              <view class="day border-radius {{(item.week === 0 || item.week === 6) ? 'pink-color' : ''}} {{item.showTodoLabel ? 'day-circle' : '' }} {{item.choosed ? 'day-choosed-color day-choosed-bg' : ''}} {{ item.disable ? 'disable-day-color disable-day-bg' : '' }} b ac pc">{{item.day}}</view>
+              <view class="day border-radius {{(item.week === 0 || item.week === 6) ? 'pink-color' : ''}} {{item.showTodoLabel && !item.choosed ? 'day-circle' : '' }} {{item.choosed ? 'day-choosed-color day-choosed-bg' : ''}} {{ item.disable ? 'disable-day-color disable-day-bg' : '' }} b ac pc">{{item.day}}</view>
             </view>
         </view>
         <view class="grid disable-day-color b ac pc"

diff --git a/src/component/calendar/index.wxss b/src/component/calendar/index.wxss
@@ -140,18 +140,34 @@
     top: 8rpx;
 }
 
+.todo-dot.todo-dot-top-always {
+    top: -3rpx;
+}
+
 .todo-dot.todo-dot-bottom {
     bottom: 0;
 }
 
+.todo-dot.todo-dot-bottom-always {
+    bottom: -5rpx;
+}
+
 .todo-text.todo-text-top {
     top: -6rpx;
 }
 
+.todo-text.todo-text-top-always {
+    top: -20rpx;
+}
+
 .todo-text.todo-text-bottom {
     bottom: -8rpx;
 }
 
+.todo-text.todo-text-bottom-always {
+    bottom: -20rpx;
+}
+
 .dot-day-height {
     height: 72rpx;
     position: relative;

diff --git a/src/component/calendar/main.js b/src/component/calendar/main.js
@@ -442,7 +442,12 @@ const conf = {
     } else {
       currentSelected = day;
       currentSelected.cancel = false;
-      currentSelected.showTodoLabel = false;
+      const { showLabelAlways } = getData('calendar');
+      if (showLabelAlways && currentSelected.showTodoLabel) {
+        currentSelected.showTodoLabel = true;
+      } else {
+        currentSelected.showTodoLabel = false;
+      }
       selectedDays.push(currentSelected);
     }
     const config = getCalendarConfig();
@@ -496,11 +501,19 @@ const conf = {
     if (preSelectedDate.day !== currentDay.day) {
       preSelectedDate.choosed = false;
       currentDay.choosed = true;
-      currentDay.showTodoLabel = false;
+      if (!calendar.showLabelAlways || !currentDay.showTodoLabel) {
+        currentDay.showTodoLabel = false;
+      }
       tmp['calendar.selectedDay'] = [currentSelected];
     } else if (config.inverse) {
       currentDay.choosed = !currentDay.choosed;
-      if (currentDay.choosed) currentDay.showTodoLabel = false;
+      if (currentDay.choosed) {
+        if (currentDay.showTodoLabel && calendar.showLabelAlways) {
+          currentDay.showTodoLabel = true;
+        } else {
+          currentDay.showTodoLabel = false;
+        }
+      }
       tmp['calendar.selectedDay'] = [];
     }
     setData(tmp);
@@ -555,8 +568,13 @@ const conf = {
     }
     const days = calendar.days.slice();
     const { curYear, curMonth } = calendar;
-    const { days: todoDays = [], pos = 'bottom', dotColor = '', circle } =
-      options || this.todoConfig;
+    const {
+      circle,
+      dotColor = '',
+      pos = 'bottom',
+      showLabelAlways,
+      days: todoDays = []
+    } = options || this.todoConfig;
     const { todoLabels = [], todoLabelPos, todoLabelColor } = calendar;
     const shouldMarkerTodoDay = todoDays.filter(
       item => +item.year === +curYear && +item.month === +curMonth
@@ -572,7 +590,11 @@ const conf = {
         target = days[item.day - 1];
       }
       if (target) {
-        target.showTodoLabel = !target.choosed;
+        if (showLabelAlways) {
+          target.showTodoLabel = true;
+        } else {
+          target.showTodoLabel = !target.choosed;
+        }
         if (target.showTodoLabel && item.todoText) {
           target.todoText = item.todoText;
         }
@@ -587,10 +609,9 @@ const conf = {
       if (dotColor && dotColor !== todoLabelColor) {
         o['calendar.todoLabelColor'] = dotColor;
       }
-      o['calendar.todoLabelCircle'] = false;
-    } else {
-      o['calendar.todoLabelCircle'] = true;
     }
+    o['calendar.todoLabelCircle'] = circle || false;
+    o['calendar.showLabelAlways'] = showLabelAlways || false;
     setData(o);
   },
   /**
@@ -748,7 +769,9 @@ const conf = {
    */
   initSelectedDay(days) {
     const daysCopy = days.slice();
-    const { selectedDay = [], todoLabels = [] } = getData('calendar');
+    const { selectedDay = [], todoLabels = [], showLabelAlways } = getData(
+      'calendar'
+    );
     const selectedDayStr = selectedDay.map(
       item => `${+item.year}-${+item.month}-${+item.day}`
     );
@@ -767,7 +790,11 @@ const conf = {
         `${+item.year}-${+item.month}-${+item.day}`
       );
       if (idx !== -1) {
-        item.showTodoLabel = !item.choosed;
+        if (showLabelAlways) {
+          item.showTodoLabel = true;
+        } else {
+          item.showTodoLabel = !item.choosed;
+        }
         const todoLabel = todoLabels[idx];
         if (item.showTodoLabel && todoLabel && todoLabel.todoText)
           item.todoText = todoLabel.todoText;
@@ -1291,7 +1318,7 @@ export function setSelectedDays(selected, componentId) {
   if (!config.multi) {
     return warn('单选模式下不能设置多日期选中，请配置 multi');
   }
-  const { selectedDay, days } = getData('calendar');
+  const { selectedDay, days, showLabelAlways } = getData('calendar');
   let newSelectedDay = [];
   if (!selected) {
     days.map(item => {
@@ -1317,7 +1344,11 @@ export function setSelectedDays(selected, componentId) {
         currentSelectedDays.includes(`${item.year}-${item.month}-${item.day}`)
       ) {
         item.choosed = true;
-        item.showTodoLabel = false;
+        if (showLabelAlways && item.showTodoLabel) {
+          item.showTodoLabel = true;
+        } else {
+          item.showTodoLabel = false;
+        }
       }
     });
   }