feat: at-calendar组件支持senondary样式

aotuzuche · May 13, 2021 · 29631f7 · 29631f7
1 parent cdccb6f
commit 29631f7
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 24 deletions.
diff --git a/components/at-calendar/active-border-s.png b/components/at-calendar/active-border-s.png
diff --git a/components/at-calendar/controller.ts b/components/at-calendar/controller.ts
@@ -22,6 +22,7 @@ interface IChooseTipsData {
 interface IProps {
   readonly?: boolean
   title?: string
+  type?: 'primary' | 'secondary'
   onClose: () => void
   disabledBefore?: Date
   monthRange?: [Date, Date]
@@ -134,20 +135,6 @@ class Controller extends React.PureComponent<IProps, IState> {
     }
   }
 
-  componentDidMount() {
-    let cur = document.querySelector('#x-calendar-body .active-first')
-    if (!cur) {
-      cur = document.querySelector('#x-calendar-body .month-day:not(.empty):not(.disabled)')
-    }
-    if (cur) {
-      setTimeout(() => {
-        const top = (cur as any).offsetTop || 0
-        const height = (cur as any).offsetHeight || 0
-        document.querySelector('#x-calendar-body')!.scrollTop = top - height / 3
-      }, 1)
-    }
-  }
-
   // 公开方法，替换范围
   replaceRange = (range: [Date, Date]) => {
     const rentDay = stringToDate(dateFormat(range[0], 'yyyyMMdd'))
@@ -343,7 +330,7 @@ class Controller extends React.PureComponent<IProps, IState> {
 
     let timePickerTips = {}
     if (this.props.onDayClick) {
-      Loading()
+      Loading({ type: this.props.type })
       try {
         const res = await this.props.onDayClick(day, type)
         timePickerTips = res || {}

diff --git a/components/at-calendar/index.tsx b/components/at-calendar/index.tsx
@@ -12,7 +12,10 @@ import './style/index.scss'
 class AtCalendar extends Controller {
   render() {
     return (
-      <Layout className="at-calendar" supportDarkMode={this.props.supportDarkMode}>
+      <Layout
+        className={cn('at-calendar', { 'at-calendar--secondary': this.props.type === 'secondary' })}
+        supportDarkMode={this.props.supportDarkMode}
+      >
         {this.renderHeader()}
         {this.renderBody()}
         {this.renderFooter()}
@@ -278,7 +281,12 @@ class AtCalendar extends Controller {
         {!this.props.readonly && (
           <div className="bottom">
             <div className="footer-tips">{this.renderFooterTips()}</div>
-            <Button className="submit" onClick={this.onSubmit}>
+            <Button
+              className="submit"
+              capsule={this.props.type !== 'secondary'}
+              type={this.props.type}
+              onClick={this.onSubmit}
+            >
               确定
             </Button>
           </div>
@@ -315,7 +323,9 @@ class AtCalendar extends Controller {
       <Popup
         visible={this.state.timePickerVisible}
         noPadding={true}
-        className="at-calendar__time-picker"
+        className={cn('at-calendar__time-picker', {
+          'at-calendar__time-picker--secondary': this.props.type === 'secondary',
+        })}
         onMaskClick={this.timePickerCancel}
         height="4.9rem"
       >

diff --git a/components/at-calendar/style/index.scss b/components/at-calendar/style/index.scss
@@ -3,6 +3,13 @@
 @import '../../theme.scss';
 
 .at-calendar {
+  --border-image: url('../active-border.png');
+
+  &--secondary {
+    --x-primary-color: var(--x-secondary-color);
+    --border-image: url('../active-border-s.png');
+  }
+
   background: var(--x-bg-color-lighter);
 
   .x-app-header__inner {
@@ -444,23 +451,23 @@
         bottom: 0;
         left: 0;
         display: block;
-        background: url('../active-border.png') 0 center no-repeat;
+        background: var(--border-image) 0 center no-repeat;
         background-size: 200% 100%;
         content: '';
       }
 
       &.active-end em::before {
         right: 0;
         left: 50%;
-        background: url('../active-border.png') right center no-repeat;
+        background: var(--border-image) right center no-repeat;
         background-size: 200% 100%;
       }
 
       &.active-first.active-end {
         em::before {
           right: 0;
           left: 0;
-          background: url('../active-border.png');
+          background: var(--border-image);
           background-size: 100% 100%;
         }
       }
@@ -537,6 +544,10 @@
 }
 
 .at-calendar__time-picker {
+  &--secondary {
+    --x-primary-color: var(--x-secondary-color);
+  }
+
   .x-popup__inner {
     overflow: hidden;
   }

diff --git a/components/at-calendar/style/index.tsx b/components/at-calendar/style/index.tsx
@@ -1,7 +1,5 @@
-import './index.scss'
-
-// style dependences
 import '../../button/style/css'
 import '../../layout/style/css'
 import '../../popup/style/css'
 import '../../time-picker/style/css'
+import './index.scss'
diff --git a/wiki_src/src/pages/at-calendar.tsx b/wiki_src/src/pages/at-calendar.tsx
@@ -38,6 +38,7 @@ export default class View extends React.PureComponent {
       <span class="token operator">&lt;</span>AtCalendar
         title<span class="token operator">=</span><span class="token string">"查看可租用时间"</span>
         onClose<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onClose<span class="token punctuation">}</span>
+        type<span class="token operator">=</span><span class="token string">"secondary"</span>
         chooseRange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2019</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2019</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">13</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
         defaultRentTime<span class="token operator">=</span><span class="token string">"10:30"</span>
         defaultRevertTime<span class="token operator">=</span><span class="token string">"05:15"</span>