amis 1.5.7 → 1.5.8-beta.2

package/src/components/calendar/DaysView.tsx

@@ -41,13 +41,14 @@ interface CustomDaysViewProps extends LocaleProps {
   handleClickOutside: () => void;
   classnames: ClassNamesFn;
   schedules?: Array<{
-    startTime: Date,
-    endTime: Date,
-    content: any,
-    className?: string
+    startTime: Date;
+    endTime: Date;
+    content: any;
+    className?: string;
   }>;
   largeMode?: boolean;
   onScheduleClick?: (scheduleData: any) => void;
+  hideHeader?: boolean;
 }
 
 export class CustomDaysView extends DaysView {
@@ -129,7 +130,12 @@ export class CustomDaysView extends DaysView {
     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)) {
+        if (
+          currentDate.isSameOrAfter(
+            moment(item.startTime).subtract(1, 'days')
+          ) &&
+          currentDate.isSameOrBefore(item.endTime)
+        ) {
           schedule.push(item);
         }
       });
@@ -141,8 +147,11 @@ export class CustomDaysView extends DaysView {
           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'),
-            }
+              time:
+                moment(item.startTime).format('YYYY-MM-DD HH:mm:ss') +
+                ' - ' +
+                moment(item.endTime).format('YYYY-MM-DD HH:mm:ss')
+            };
           }),
           currentDate
         };
@@ -156,8 +165,7 @@ export class CustomDaysView extends DaysView {
             }
             if (moment(schedule[i].startTime).isSame(currentDate, 'day')) {
               showSchedule.push(schedule[i]);
-            }
-            else if (currentDate.weekday() === 0) {
+            } else if (currentDate.weekday() === 0) {
               // 周一重新设置日程
               showSchedule.push({
                 ...schedule[i],
@@ -166,46 +174,86 @@ export class CustomDaysView extends DaysView {
             }
           }
           [0, 1, 2].forEach((i: number) => {
-            const findSchedule = find(schedule, (item: any) => item.height === i);
-            if (findSchedule && findSchedule !== showSchedule[i] && currentDate.weekday() !== 0) {
+            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 {
+            } 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%'}}
-              onClick={() => this.props.onScheduleClick && this.props.onScheduleClick(scheduleData)}>
-                <div className={cx('ScheduleCalendar-text-overflow')}>{item.content}</div>
-            </div>;
+            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%'}}
+                onClick={() =>
+                  this.props.onScheduleClick &&
+                  this.props.onScheduleClick(scheduleData)
+                }
+              >
+                <div className={cx('ScheduleCalendar-text-overflow')}>
+                  {item.content}
+                </div>
+              </div>
+            );
           });
-          return <td {...props}>
+          return (
+            <td {...props}>
               <div className={cx('ScheduleCalendar-large-day-wrap')}>
-                <div className={cx('ScheduleCalendar-large-schedule-header')}>{currentDate.date()}</div>
+                <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>}
+                {schedule.length > 3 && (
+                  <div className={cx('ScheduleCalendar-large-schedule-footer')}>
+                    {schedule.length - 3} {__('more')}
+                  </div>
+                )}
               </div>
-          </td>
+            </td>
+          );
         }
 
         // 正常模式
-        const ScheduleIcon = <span className={cx('ScheduleCalendar-icon', schedule[0].className)}
-           onClick={() => this.props.onScheduleClick && this.props.onScheduleClick(scheduleData)}></span>;
-        return <td {...props}>
-          {currentDate.date()}
-          {ScheduleIcon}
-        </td>;
+        const ScheduleIcon = (
+          <span
+            className={cx('ScheduleCalendar-icon', schedule[0].className)}
+            onClick={() =>
+              this.props.onScheduleClick &&
+              this.props.onScheduleClick(scheduleData)
+            }
+          ></span>
+        );
+        return (
+          <td {...props}>
+            {currentDate.date()}
+            {ScheduleIcon}
+          </td>
+        );
       }
     }
     return <td {...props}>{currentDate.date()}</td>;
@@ -364,7 +412,7 @@ export class CustomDaysView extends DaysView {
     const __ = this.props.translate;
 
     const tableChildren = [
-      <thead key="th">
+      this.props.hideHeader ? null : <thead key="th">
         <tr>
           <th colSpan={7}>
             <div className="rdtHeader">

package/src/components/calendar/MonthsView.tsx

@@ -3,14 +3,18 @@ import MonthsView from 'react-datetime/src/MonthsView';
 import moment from 'moment';
 import React from 'react';
 import {LocaleProps, localeable, TranslateFn} from '../../locale';
+import Picker from '../Picker';
+import {convertDateToObject, getRange, isMobile} from '../../utils/helper';
 
 export interface OtherProps {
   inputFormat?: string;
+  hideHeader?: boolean;
 }
 
 export class CustomMonthsView extends MonthsView {
   props: {
     viewDate: moment.Moment;
+    selectedDate: moment.Moment;
     subtractTime: (
       amount: number,
       type: string,
@@ -22,9 +26,59 @@ export class CustomMonthsView extends MonthsView {
       toSelected?: moment.Moment
     ) => () => void;
     showView: (view: string) => () => void;
+    minDate?: moment.Moment;
+    maxDate?: moment.Moment;
+    onChange?: () => void;
+    onClose?: () => void;
+    onConfirm?: (value: number[], types: string[]) => void;
+    useMobileUI: boolean;
   } & LocaleProps &
     OtherProps;
+  maxDateObject: {year: number; month: number; day?: number};
+  minDateObject: {year: number; month: number; day?: number};
+  state: {columns: {options: number[]}[]};
+  setState: (arg0: any) => () => any;
   renderMonths: () => JSX.Element;
+
+  constructor(props: any) {
+    super(props);
+
+    const {minDate, maxDate, selectedDate, viewDate} = props;
+    const currentDate = selectedDate || viewDate || moment();
+    const year = currentDate.year();
+    this.maxDateObject = maxDate
+      ? convertDateToObject(maxDate)
+      : {
+          year: year + 100,
+          month: 12
+        };
+    this.minDateObject = minDate
+      ? convertDateToObject(minDate)
+      : {
+          year: year - 100,
+          month: 1
+        };
+
+    const columns = ['year', 'month'].map((type: 'year' | 'month') => {
+      if (type === 'month') {
+        const minMonth =
+          year === this.minDateObject.year ? this.minDateObject.month : 1;
+        const maxMonth =
+          year === this.maxDateObject.year ? this.maxDateObject.month : 12;
+        return {
+          options: getRange(minMonth, maxMonth, 1)
+        };
+      }
+      return {
+        options: getRange(this.minDateObject[type], this.maxDateObject[type], 1)
+      };
+    });
+
+    this.state = {
+      columns
+    };
+  }
+
   renderMonth = (props: any, month: number) => {
     var localMoment = this.props.viewDate;
     var monthStr = localMoment
@@ -40,11 +94,71 @@ export class CustomMonthsView extends MonthsView {
       </td>
     );
   };
+
+  onConfirm = (value: number[]) => {
+    // 将月份的值减1 ，月份是0-11
+    value[1] && --value[1];
+    this.props.onConfirm && this.props.onConfirm(value, ['year', 'month']);
+  };
+
+  onPickerChange = (value: number[], index: number) => {
+    const columns = [...this.state.columns];
+    // 选择年份是最大值的年或者最小值的月时，需要重新计算月分选择的cloumn
+    if (index === 0) {
+      if (
+        value[0] === this.minDateObject.year &&
+        value[0] === this.maxDateObject.year
+      ) {
+        columns[1] = {
+          options: getRange(
+            this.minDateObject.month,
+            this.maxDateObject.month,
+            1
+          )
+        };
+      } else if (value[0] === this.minDateObject.year) {
+        columns[1] = {
+          options: getRange(this.minDateObject.month, 12, 1)
+        };
+      } else if (value[0] === this.maxDateObject.year) {
+        columns[1] = {
+          options: getRange(1, this.maxDateObject.month, 1)
+        };
+      } else {
+        columns[1] = {
+          options: getRange(1, 12, 1)
+        };
+      }
+      this.setState({columns});
+    }
+  };
+
+  renderPicker = () => {
+    const {selectedDate, viewDate} = this.props;
+    const currentDate = selectedDate || viewDate || moment();
+    const year = currentDate.year();
+    const month = parseInt(currentDate.format('MM'), 10);
+
+    return (
+      <Picker
+        translate={this.props.translate}
+        locale={this.props.locale}
+        columns={this.state.columns}
+        value={[year, month]}
+        onChange={this.onPickerChange}
+        onConfirm={this.onConfirm}
+        onClose={this.props.onClose}
+      />
+    );
+  };
+
   render() {
     const __ = this.props.translate;
-    const showYearHead = !/^mm$/i.test(this.props.inputFormat || '');
+    const showYearHead = !/^mm$/i.test(this.props.inputFormat || '') && !this.props.hideHeader;
     const canClick = /yy/i.test(this.props.inputFormat || '');
-
+    if (isMobile() && this.props.useMobileUI) {
+      return <div className="rdtYears">{this.renderPicker()}</div>;
+    }
     return (
       <div className="rdtMonths">
         {showYearHead && (

package/src/components/calendar/QuartersView.tsx

@@ -23,6 +23,7 @@ export interface QuarterViewProps extends LocaleProps, ThemeProps {
   updateSelectedDate: (e: any, close?: boolean) => void;
   renderQuarter: any;
   isValidDate: (date: moment.Moment) => boolean;
+  hideHeader?: boolean;
 }
 
 export class QuarterView extends React.Component<QuarterViewProps> {
@@ -140,11 +141,11 @@ export class QuarterView extends React.Component<QuarterViewProps> {
   }
 
   render() {
-    const {classnames: cx} = this.props;
+    const {classnames: cx, hideHeader} = this.props;
 
     return (
       <div className={cx('ClalendarQuarter')}>
-        {this.renderYear()}
+        {hideHeader ? null : this.renderYear()}
         <table>
           <tbody>{this.renderQuarters()}</tbody>
         </table>

package/src/components/calendar/TimeView.tsx

@@ -7,7 +7,7 @@ import {Icon} from '../icons';
 import {ClassNamesFn} from '../../theme';
 import Picker from '../Picker';
 import {PickerColumnItem} from '../PickerColumn';
-import {getRange, isMobile} from "../../utils/helper";
+import {getRange, isMobile} from '../../utils/helper';
 
 export class CustomTimeView extends TimeView {
   props: {
@@ -29,6 +29,8 @@ export class CustomTimeView extends TimeView {
     onClose?: () => void;
     onConfirm?: (value: number[], types: string[]) => void;
     useMobileUI: boolean;
+    showToolbar?: boolean;
+    onChange?: (value: any) => void;
   } & LocaleProps;
   onStartClicking: any;
   disableContextMenu: any;
@@ -44,6 +46,10 @@ export class CustomTimeView extends TimeView {
     milliseconds: 3
   };
 
+  static defaultProps = {
+    showToolbar: true
+  };
+
   renderDayPart = () => {
     const {translate: __, classnames: cx} = this.props;
     return (
@@ -90,7 +96,7 @@ export class CustomTimeView extends TimeView {
       return parseInt(value);
     }
     return 0;
-  }
+  };
 
   renderCounter = (type: string) => {
     const cx = this.props.classnames;
@@ -150,12 +156,12 @@ export class CustomTimeView extends TimeView {
 
   onConfirm = (value: number[]) => {
     this.props.onConfirm && this.props.onConfirm(value, this.state.counters);
-  }
+  };
 
   getDayPartOptions = () => {
     const {translate: __} = this.props;
     let options = ['am', 'pm'];
-    if ( this.props.timeFormat.indexOf( ' A' ) !== -1 ) {
+    if (this.props.timeFormat.indexOf(' A') !== -1) {
       options = ['AM', 'PM'];
     }
 
@@ -163,7 +169,7 @@ export class CustomTimeView extends TimeView {
       text: __(daypart),
       value: daypart
     }));
-  }
+  };
 
   renderTimeViewPicker = () => {
     const columns: PickerColumnItem[] = [];
@@ -174,10 +180,12 @@ export class CustomTimeView extends TimeView {
         const counterValue: number = this.getCounterValue(type);
         let {min, max, step} = this.timeConstraints[type];
         // 修正am pm时hours可选最大值
-        if (type === 'hours'
-          && this.state.daypart !== false
-          && this.props.timeFormat.toLowerCase().indexOf(' a') !== -1) {
-            max = max > 12 ? 12 : max;
+        if (
+          type === 'hours' &&
+          this.state.daypart !== false &&
+          this.props.timeFormat.toLowerCase().indexOf(' a') !== -1
+        ) {
+          max = max > 12 ? 12 : max;
         }
         columns.push({
           options: getRange(min, max, step)
@@ -189,7 +197,7 @@ export class CustomTimeView extends TimeView {
       columns.push({
         options: this.getDayPartOptions()
       });
-      values.push(this.state.daypart)
+      values.push(this.state.daypart);
     }
 
     return (
@@ -197,21 +205,23 @@ export class CustomTimeView extends TimeView {
         translate={this.props.translate}
         locale={this.props.locale}
         columns={columns}
-        value={values} 
+        value={values}
         onConfirm={this.onConfirm}
         onClose={this.props.onClose}
+        showToolbar={this.props.showToolbar}
+        onChange={this.props.onChange}
         />
     );
-  }
+  };
 
   render() {
     let counters: Array<JSX.Element | null> = [];
     const cx = this.props.classnames;
-    
+
     if (isMobile() && this.props.useMobileUI) {
-      return <div className={cx('CalendarTime')}>
-          {this.renderTimeViewPicker()}
-        </div>
+      return (
+        <div className={cx('CalendarTime')}>{this.renderTimeViewPicker()}</div>
+      );
     }
     this.state.counters.forEach(c => {
       if (counters.length) {

package/src/components/calendar/YearsView.tsx

@@ -4,7 +4,7 @@ import moment from 'moment';
 import React from 'react';
 import {LocaleProps, localeable} from '../../locale';
 import Picker from '../Picker';
-import {convertDateToObject, getRange, isMobile} from "../../utils/helper";
+import {convertDateToObject, getRange, isMobile} from '../../utils/helper';
 
 export class CustomYearsView extends YearsView {
   props: {
@@ -38,28 +38,30 @@ export class CustomYearsView extends YearsView {
   };
 
   onConfirm = (value: number[]) => {
-    this.props.onConfirm && this.props.onConfirm(value, ["year"])
-  }
+    this.props.onConfirm && this.props.onConfirm(value, ['year']);
+  };
 
   renderYearPicker = () => {
-    const {minDate, maxDate, selectedDate, viewDate} =  this.props;
+    const {minDate, maxDate, selectedDate, viewDate} = this.props;
     const year = (selectedDate || viewDate || moment()).year();
     const maxYear = maxDate ? convertDateToObject(maxDate)!.year : year + 100;
     const minYear = minDate ? convertDateToObject(minDate)!.year : year - 100;
-    
-    const columns = [{
-      options: getRange(minYear, maxYear, 1)
-    }];
+
+    const columns = [
+      {
+        options: getRange(minYear, maxYear, 1)
+      }
+    ];
 
     return (
       <Picker
         translate={this.props.translate}
         locale={this.props.locale}
         columns={columns}
-        value={[year]} 
+        value={[year]}
         onConfirm={this.onConfirm}
         onClose={this.props.onClose}
-        />
+      />
     );
   };
 
@@ -67,13 +69,9 @@ export class CustomYearsView extends YearsView {
     let year = this.props.viewDate.year();
     year = year - (year % 10);
     const __ = this.props.translate;
-    
+
     if (isMobile() && this.props.useMobileUI) {
-      return (
-        <div className="rdtYears">
-          {this.renderYearPicker()}
-        </div>
-      );
+      return <div className="rdtYears">{this.renderYearPicker()}</div>;
     }
     return (
       <div className="rdtYears">

package/src/components/condition-builder/Field.tsx

@@ -114,9 +114,7 @@ export class ConditionField extends React.Component<
               ref={ref}
               allowInput={false}
               result={
-                value
-                  ? findTree(options, item => item.name === value)?.label
-                  : ''
+                value ? findTree(options, item => item.name === value) : ''
               }
               onResultChange={noop}
               onResultClick={onClick}

package/src/components/condition-builder/Func.tsx

@@ -97,7 +97,7 @@ export class ConditionFunc extends React.Component<ConditionFuncProps> {
                 )}
                 ref={ref}
                 allowInput={false}
-                result={func?.label}
+                result={func}
                 onResultChange={noop}
                 onResultClick={onClick}
                 placeholder="请选择字段"

package/src/components/formula/Editor.tsx

@@ -45,6 +45,9 @@ export interface FormulaEditorProps extends ThemeProps, LocaleProps {
    */
   variables: Array<VariableItem>;
 
+  /**
+   * 变量展现模式，可选值：'tabs' ｜ 'tree'
+   */
   variableMode?: 'tabs' | 'tree';
 
   /**
@@ -216,17 +219,19 @@ export class FormulaEditor extends React.Component<
           'is-focused': focused
         })}
       >
-        <div className={cx(`FormulaEditor-header`)}>{header ?? '表达式'}</div>
-
-        <CodeMirrorEditor
-          className={cx('FormulaEditor-editor')}
-          value={value}
-          onChange={this.handleOnChange}
-          editorFactory={this.editorFactory}
-          editorDidMount={this.handleEditorMounted}
-          onFocus={this.handleFocus}
-          onBlur={this.handleBlur}
-        ></CodeMirrorEditor>
+        <div className={cx(`FormulaEditor-content`)}>
+          <div className={cx(`FormulaEditor-header`)}>{header ?? '表达式'}</div>
+
+          <CodeMirrorEditor
+            className={cx('FormulaEditor-editor')}
+            value={value}
+            onChange={this.handleOnChange}
+            editorFactory={this.editorFactory}
+            editorDidMount={this.handleEditorMounted}
+            onFocus={this.handleFocus}
+            onBlur={this.handleBlur}
+          ></CodeMirrorEditor>
+        </div>
 
         <div className={cx('FormulaEditor-settings')}>
           {Array.isArray(functions) && functions.length ? (

package/src/components/formula/FuncList.tsx

@@ -69,7 +69,9 @@ export function FuncList(props: FuncListProps) {
         <div className={cx('FormulaFuncList-column')}>
           {activeFunc ? (
             <div className={cx('FormulaFuncList-funcDetail')}>
-              <p>{activeFunc.example}</p>
+              <pre>
+                <code>{activeFunc.example}</code>
+              </pre>
               <div>{activeFunc.description}</div>
             </div>
           ) : null}

package/src/components/formula/Picker.tsx

@@ -1,7 +1,7 @@
 import {uncontrollable} from 'uncontrollable';
 import React from 'react';
 import {FormulaEditor, FormulaEditorProps} from './Editor';
-import {autobind} from '../../utils/helper';
+import {autobind, noop} from '../../utils/helper';
 import PickerContainer from '../PickerContainer';
 import Editor from './Editor';
 import ResultBox from '../ResultBox';
@@ -63,6 +63,7 @@ export class FormulaPicker extends React.Component<FormulaPickerProps> {
               rest.variables,
               rest.functions
             )}
+            onResultChange={noop}
             onResultClick={onClick}
             disabled={disabled}
             borderMode={borderMode}

package/src/components/icons.tsx

@@ -43,6 +43,7 @@ import ExchangeIcon from '../icons/exchange.svg';
 import ColmunsIcon from '../icons/columns.svg';
 import CalendarIcon from '../icons/calendar.svg';
 import ClockIcon from '../icons/clock.svg';
+import TreeDownIcon from '../icons/tree-down.svg';
 
 import CopyIcon from '../icons/copy.svg';
 import FilterIcon from '../icons/filter.svg';
@@ -176,6 +177,7 @@ registerIcon('alert-success', AlertSuccess);
 registerIcon('alert-info', AlertInfo);
 registerIcon('alert-warning', AlertWarning);
 registerIcon('alert-danger', AlertDanger);
+registerIcon('tree-down', TreeDownIcon);
 
 export function Icon({
   icon,

package/src/components/index.tsx

@@ -8,6 +8,7 @@ import NotFound from './404';
 import {default as Alert, alert, confirm, prompt} from './Alert';
 import {default as ContextMenu, openContextMenus} from './ContextMenu';
 import AsideNav from './AsideNav';
+import Avatar from './Avatar';
 import Button from './Button';
 import Checkbox from './Checkbox';
 import Checkboxes from './Selection';
@@ -60,6 +61,7 @@ export {
   NotFound,
   Alert as AlertComponent,
   alert,
+  Avatar,
   confirm,
   prompt,
   ContextMenu,