amis 1.5.2 → 1.5.3

package/src/components/Collapse.tsx

@@ -227,7 +227,7 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
           {
             'is-active': !this.state.collapsed,
             [`Collapse--${size}`]: size,
-            'Collapse--disabled': disabled || collapsable === false,
+            'Collapse--disabled': disabled,
             'Collapse--title-bottom': headerPosition === 'bottom'
           },
           className

package/src/components/DatePicker.tsx

@@ -278,6 +278,15 @@ export interface DateProps extends LocaleProps, ThemeProps {
   borderMode?: 'full' | 'half' | 'none';
   // 是否为内嵌模式，如果开启就不是 picker 了，直接页面点选。
   embed?: boolean;
+  schedules?: Array<{
+    startTime: Date,
+    endTime: Date,
+    content: any,
+    className?: string
+  }>;
+  scheduleClassNames?: Array<string>;
+  largeMode?: boolean;
+  onScheduleClick?: (scheduleData: any) => void;
 
   // 下面那个千万不要写，写了就会导致 keyof DateProps 得到的结果是 string | number;
   // [propName: string]: any;
@@ -302,7 +311,8 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     viewMode: 'days' as 'years' | 'months' | 'days' | 'time',
     shortcuts: '',
     closeOnSelect: true,
-    overlayPlacement: 'auto'
+    overlayPlacement: 'auto',
+    scheduleClassNames: ['bg-warning', 'bg-danger', 'bg-success', 'bg-info', 'bg-secondary']
   };
   state: DatePickerState = {
     isOpened: false,
@@ -546,7 +556,11 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
       format,
       borderMode,
       embed,
-      minDate
+      minDate,
+      schedules,
+      largeMode,
+      scheduleClassNames,
+      onScheduleClick
     } = this.props;
 
     const __ = this.props.translate;
@@ -554,12 +568,33 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     let date: moment.Moment | undefined = this.state.value;
 
     if (embed) {
+      let schedulesData: DateProps['schedules'] = undefined;
+      if (schedules && Array.isArray(schedules)) {
+        // 设置日程颜色
+        let index = 0;
+        schedulesData = schedules.map((schedule: any) => {
+          let className = schedule.className;
+          if (!className && scheduleClassNames) {
+            className = scheduleClassNames[index];
+            index++;
+            if (index >= scheduleClassNames.length) {
+              index = 0;
+            }
+          }
+          return {
+            ...schedule,
+            className
+          };
+        });
+      }
       return (
         <div
           className={cx(
             `DateCalendar`,
             {
-              'is-disabled': disabled
+              'is-disabled': disabled,
+              'ScheduleCalendar': schedulesData,
+              'ScheduleCalendar-large': largeMode
             },
             className
           )}
@@ -578,6 +613,9 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
             locale={locale}
             minDate={minDate}
             // utc={utc}
+            schedules={schedulesData}
+            largeMode={largeMode}
+            onScheduleClick={onScheduleClick}
           />
         </div>
       );

package/src/components/calendar/Calendar.tsx

@@ -28,6 +28,14 @@ interface BaseDatePickerProps
     year?: number,
     date?: moment.Moment
   ) => JSX.Element;
+  schedules?: Array<{
+    startTime: Date;
+    endTime: Date;
+    content: string | React.ReactElement;
+    color?: string;
+  }>;
+  largeMode?: boolean;
+  onScheduleClick?: (scheduleData: any) => void;
 }
 
 class BaseDatePicker extends ReactDatePicker {
@@ -82,7 +90,10 @@ class BaseDatePicker extends ReactDatePicker {
         'nextIcon',
         'isEndDate',
         'classnames',
-        'minDate'
+        'minDate',
+        'schedules',
+        'largeMode',
+        'onScheduleClick'
       ].forEach(key => (props[key] = (this.props as any)[key]));
 
       return props;

package/src/components/calendar/DaysView.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 import Downshift from 'downshift';
 import {LocaleProps, localeable} from '../../locale';
 import {ClassNamesFn} from '../../theme';
+import find from 'lodash/find';
 
 interface CustomDaysViewProps extends LocaleProps {
   classPrefix?: string;
@@ -39,6 +40,14 @@ interface CustomDaysViewProps extends LocaleProps {
   updateSelectedDate: (event: React.MouseEvent<any>, close?: boolean) => void;
   handleClickOutside: () => void;
   classnames: ClassNamesFn;
+  schedules?: Array<{
+    startTime: Date,
+    endTime: Date,
+    content: any,
+    className?: string
+  }>;
+  largeMode?: boolean;
+  onScheduleClick?: (scheduleData: any) => void;
 }
 
 export class CustomDaysView extends DaysView {
@@ -117,6 +126,86 @@ export class CustomDaysView extends DaysView {
   };
 
   renderDay = (props: any, currentDate: moment.Moment) => {
+    if (this.props.schedules) {
+      let schedule: any[] = [];
+      this.props.schedules.forEach((item: any) => {
+        if (currentDate.isSameOrAfter(moment(item.startTime).subtract(1, 'days')) && currentDate.isSameOrBefore(item.endTime)) {
+          schedule.push(item);
+        }
+      });
+      if (schedule.length > 0) {
+        const cx = this.props.classnames;
+        const __ = this.props.translate;
+        // 日程数据
+        const scheduleData = {
+          scheduleData: schedule.map((item: any) => {
+            return {
+              ...item,
+              time: moment(item.startTime).format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment(item.endTime).format('YYYY-MM-DD HH:mm:ss'),
+            }
+          }),
+          currentDate
+        };
+
+        // 放大模式
+        if (this.props.largeMode) {
+          let showSchedule: any[] = [];
+          for (let i = 0; i < schedule.length; i++) {
+            if (showSchedule.length > 3) {
+              break;
+            }
+            if (moment(schedule[i].startTime).isSame(currentDate, 'day')) {
+              showSchedule.push(schedule[i]);
+            }
+            else if (currentDate.weekday() === 0) {
+              // 周一重新设置日程
+              showSchedule.push({
+                ...schedule[i],
+                width: moment(schedule[i].endTime).date() - currentDate.date()
+              });
+            }
+          }
+          [0, 1, 2].forEach((i: number) => {
+            const findSchedule = find(schedule, (item: any) => item.height === i);
+            if (findSchedule && findSchedule !== showSchedule[i] && currentDate.weekday() !== 0) {
+              // 生成一个空白格占位
+              showSchedule.splice(i, 0, {
+                width: 1,
+                className: 'bg-transparent',
+                content: ''
+              });
+            }
+            else {
+              showSchedule[i] && (showSchedule[i].height = i);
+            }
+          });
+          // 最多展示3个
+          showSchedule = showSchedule.slice(0, 3);
+          const scheduleDiv = showSchedule.map((item: any, index: number) => {
+            const width = item.width || Math.min(moment(item.endTime).diff(moment(item.startTime), 'days') + 1, 7 - moment(item.startTime).weekday());
+            return <div key={props.key + 'content' + index}
+              className={cx('ScheduleCalendar-large-schedule-content', item.className)}
+              style={{width: width + '00%'}}>
+                <div className={cx('ScheduleCalendar-text-overflow')}>{item.content}</div>
+            </div>;
+          });
+          return <td {...props} onClick={() => this.props.onScheduleClick && this.props.onScheduleClick(scheduleData)}>
+              <div className={cx('ScheduleCalendar-large-day-wrap')}>
+                <div className={cx('ScheduleCalendar-large-schedule-header')}>{currentDate.date()}</div>
+                {scheduleDiv}
+                {schedule.length > 3 && <div className={cx('ScheduleCalendar-large-schedule-footer')}>{schedule.length - 3} {__('more')}</div>}
+              </div>
+          </td>
+        }
+
+        // 正常模式
+        const ScheduleIcon = <span className={cx('ScheduleCalendar-icon', schedule[0].className)}></span>;
+        return <td {...props} onClick={() => this.props.onScheduleClick && this.props.onScheduleClick(scheduleData)}>
+          {currentDate.date()}
+          {ScheduleIcon}
+        </td>;
+      }
+    }
     return <td {...props}>{currentDate.date()}</td>;
   };
 

package/src/renderers/Form/InputDate.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import {FormItem, FormControlProps, FormBaseControl} from './Item';
 import cx from 'classnames';
-import {filterDate} from '../../utils/tpl-builtin';
+import {filterDate, isPureVariable, resolveVariableAndFilter} from '../../utils/tpl-builtin';
 import moment from 'moment';
 import 'moment/locale/zh-cn';
 import DatePicker from '../../components/DatePicker';
+import {SchemaObject} from '../../Schema';
+import {createObject, anyChanged} from '../../utils/helper';
 
 export interface InputDateBaseControlSchema extends FormBaseControl {
   /**
@@ -85,6 +87,24 @@ export interface DateControlSchema extends InputDateBaseControlSchema {
    * 限制最大日期
    */
   maxDate?: string;
+
+  /**
+   * 日程
+   */
+  schedules?: Array<{
+    startTime: Date,
+    endTime: Date,
+    content: any,
+    className?: string
+  }> | string;
+  /**
+   * 日程显示颜色自定义
+   */
+  scheduleClassNames?: Array<string>;
+  /**
+   * 日程点击展示
+   */
+  scheduleAction?: SchemaObject;
 }
 
 /**
@@ -267,6 +287,12 @@ export interface DateProps extends FormControlProps {
 interface DateControlState {
   minDate?: moment.Moment;
   maxDate?: moment.Moment;
+  schedules?: Array<{
+    startTime: Date,
+    endTime: Date,
+    content: any,
+    className?: string
+  }>;
 }
 
 export default class DateControl extends React.PureComponent<
@@ -304,9 +330,18 @@ export default class DateControl extends React.PureComponent<
       setPrinstineValue((utc ? moment.utc(date) : date).format(format));
     }
 
+    let schedulesData = props.schedules;
+    if (typeof schedulesData === 'string') {
+      const resolved = resolveVariableAndFilter(schedulesData, data, '| raw');
+      if (Array.isArray(resolved)) {
+        schedulesData = resolved;
+      }
+    }
+
     this.state = {
       minDate: minDate ? filterDate(minDate, data, format) : undefined,
-      maxDate: maxDate ? filterDate(maxDate, data, format) : undefined
+      maxDate: maxDate ? filterDate(maxDate, data, format) : undefined,
+      schedules: schedulesData
     };
   }
 
@@ -334,6 +369,47 @@ export default class DateControl extends React.PureComponent<
           : undefined
       });
     }
+
+    if (anyChanged(['schedules', 'data'], prevProps, props)
+      && (typeof props.schedules === 'string' && isPureVariable(props.schedules))
+    ) {
+      const schedulesData = resolveVariableAndFilter(props.schedules, props.data, '| raw');
+      const preSchedulesData = resolveVariableAndFilter(prevProps.schedules, prevProps.data, '| raw');
+      if (Array.isArray(schedulesData) && preSchedulesData !== schedulesData) {
+        this.setState({
+          schedules: schedulesData
+        })
+      }
+    }
+  }
+
+  // 日程点击事件
+  onScheduleClick(scheduleData: any) {
+    const {scheduleAction, onAction, data, translate: __} = this.props;
+    const defaultscheduleAction = {
+      actionType: 'dialog',
+      dialog: {
+        title: __('Schedule'),
+        actions: [],
+        body: {
+          type: 'table',
+          columns: [
+            {
+              name: 'time',
+              label: __('Time')
+            },
+            {
+              name: 'content',
+              label: __('Content')
+            }
+          ],
+          data: '${scheduleData}'
+        }
+      }
+    };
+
+    onAction && onAction(null, scheduleAction || defaultscheduleAction, createObject(data, scheduleData));
+
   }
 
   render() {
@@ -348,6 +424,8 @@ export default class DateControl extends React.PureComponent<
       format,
       timeFormat,
       valueFormat,
+      largeMode,
+      render,
       ...rest
     } = this.props;
 
@@ -363,6 +441,9 @@ export default class DateControl extends React.PureComponent<
           format={valueFormat || format}
           {...this.state}
           classnames={cx}
+          schedules={this.state.schedules}
+          largeMode={largeMode}
+          onScheduleClick={this.onScheduleClick.bind(this)}
         />
       </div>
     );

package/src/renderers/Status.tsx

@@ -92,7 +92,9 @@ export class StatusField extends React.Component<StatusProps, object> {
     } = this.props;
     let value = getPropValue(this.props);
     let viewValue: React.ReactNode = (
-      <span className="text-muted">{placeholder}</span>
+      <span className="text-muted" key="status-value">
+        {placeholder}
+      </span>
     );
     let wrapClassName: string = '';