amis 1.5.6-beta.5 → 1.6.0

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 {getRange, isMobile} from '../../utils/helper';
 
 export class CustomYearsView extends YearsView {
   props: {
@@ -28,6 +28,8 @@ export class CustomYearsView extends YearsView {
     onConfirm?: (value: number[], types: string[]) => void;
     useMobileUI: boolean;
   } & LocaleProps;
+  state: {pickerValue: number[]};
+  setState: (arg0: any) => () => any;
   renderYears: (year: number) => JSX.Element;
   renderYear = (props: any, year: number) => {
     return (
@@ -37,29 +39,49 @@ export class CustomYearsView extends YearsView {
     );
   };
 
+  constructor(props: any) {
+    super(props);
+
+    const {selectedDate, viewDate} =  props;
+    const currentDate = (selectedDate || viewDate || moment());
+
+    this.state = {
+      pickerValue: currentDate.toObject().years
+    }
+  }
+
   onConfirm = (value: number[]) => {
-    this.props.onConfirm && this.props.onConfirm(value, ["year"])
+    this.props.onConfirm && this.props.onConfirm(value, ['year']);
+  };
+
+  onPickerChange = (value: number[]) => {
+    this.setState({pickerValue: value[0]});
   }
 
   renderYearPicker = () => {
-    const {minDate, maxDate, selectedDate, viewDate} =  this.props;
+    const {translate: __, 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 maxYear = maxDate ? maxDate.toObject().years : year + 100;
+    const minYear = minDate ? minDate.toObject().years : year - 100;
+    const title = __('Date.titleYear');
+
+    const columns = [
+      {
+        options: getRange(minYear, maxYear, 1)
+      }
+    ];
 
     return (
       <Picker
         translate={this.props.translate}
         locale={this.props.locale}
+        title={title}
         columns={columns}
-        value={[year]} 
+        value={this.state.pickerValue}
         onConfirm={this.onConfirm}
+        onChange={this.onPickerChange}
         onClose={this.props.onClose}
-        />
+      />
     );
   };
 
@@ -67,13 +89,8 @@ 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';
@@ -70,6 +71,7 @@ import ExpandAltIcon from '../icons/expand-alt.svg';
 import CompressAltIcon from '../icons/compress-alt.svg';
 import TransparentIcon from '../icons/transparent.svg';
 import LoadingOutline from '../icons/loading-outline.svg';
+import Star from '../icons/star.svg';
 import AlertSuccess from '../icons/alert-success.svg';
 import AlertInfo from '../icons/alert-info.svg';
 import AlertWarning from '../icons/alert-warning.svg';
@@ -170,10 +172,12 @@ registerIcon('expand-alt', ExpandAltIcon);
 registerIcon('compress-alt', CompressAltIcon);
 registerIcon('transparent', TransparentIcon);
 registerIcon('loading-outline', LoadingOutline);
+registerIcon('star', Star);
 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,

package/src/components/virtual-list/SizeAndPositionManager.ts

@@ -72,7 +72,8 @@ export default class SizeAndPositionManager {
     }
 
     if (index > this.lastMeasuredIndex) {
-      const lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
+      const lastMeasuredSizeAndPosition =
+        this.getSizeAndPositionOfLastMeasuredItem();
       let offset =
         lastMeasuredSizeAndPosition.offset + lastMeasuredSizeAndPosition.size;
 
@@ -109,7 +110,8 @@ export default class SizeAndPositionManager {
    * As items as measured the estimate will be updated.
    */
   getTotalSize(): number {
-    const lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
+    const lastMeasuredSizeAndPosition =
+      this.getSizeAndPositionOfLastMeasuredItem();
 
     return (
       lastMeasuredSizeAndPosition.offset +
@@ -232,7 +234,8 @@ export default class SizeAndPositionManager {
     // So make sure the offset is at least 0 or no match will be found.
     offset = Math.max(0, offset);
 
-    const lastMeasuredSizeAndPosition = this.getSizeAndPositionOfLastMeasuredItem();
+    const lastMeasuredSizeAndPosition =
+      this.getSizeAndPositionOfLastMeasuredItem();
     const lastMeasuredIndex = Math.max(0, this.lastMeasuredIndex);
 
     if (lastMeasuredSizeAndPosition.offset >= offset) {

package/src/components/virtual-list/index.tsx

@@ -181,8 +181,8 @@ export default class VirtualList extends React.PureComponent<Props, State> {
     const itemsDom = this.rootNode.children[0].children;
     const scrollbarWidth =
       window.innerWidth - document.documentElement.clientWidth || 15;
-    const containerWidth = this.rootNode.parentElement!.getBoundingClientRect()
-      .width;
+    const containerWidth =
+      this.rootNode.parentElement!.getBoundingClientRect().width;
     let maxItemWidth = 0;
     for (let i = 0; i < itemsDom.length; i++) {
       let itemWidth = itemsDom[i].getBoundingClientRect().width;
@@ -427,10 +427,8 @@ export default class VirtualList extends React.PureComponent<Props, State> {
     }
 
     const {scrollDirection = DIRECTION.VERTICAL} = this.props;
-    const {
-      size,
-      offset
-    } = this.sizeAndPositionManager.getSizeAndPositionForIndex(index);
+    const {size, offset} =
+      this.sizeAndPositionManager.getSizeAndPositionForIndex(index);
 
     return (this.styleCache[index] = sticky
       ? {

package/src/factory.tsx

@@ -257,6 +257,7 @@ const defaultOptions: RenderOptions = {
   affixOffsetTop: 0,
   affixOffsetBottom: 0,
   richTextToken: '',
+  useMobileUI: true, // 是否启用移动端原生 UI
   loadRenderer,
   fetcher() {
     return Promise.reject('fetcher is required');
@@ -410,6 +411,11 @@ export function render(
     env.locale = locale;
   }
 
+  // 默认将开启移动端原生 UI
+  if (typeof options.useMobileUI) {
+    props.useMobileUI = true;
+  }
+
   // 进行文本替换
   if (env.replaceText && isObject(env.replaceText)) {
     const replaceKeys = Object.keys(env.replaceText);

package/src/icons/star.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="11px" viewBox="0 0 12 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>星星</title>
+    <g id="页面-1" stroke-width="1" fill-rule="evenodd">
+        <g id="画板备份-8" transform="translate(-453.000000, -354.000000)">
+            <g id="编组" transform="translate(451.000000, 352.000000)">
+                <rect id="矩形" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect>
+                <path d="M5.991,5.57 L3.50612104,5.93019955 C2.95954884,6.00942879 2.58069251,6.51674109 2.65992175,7.0633133 C2.69148792,7.28107625 2.79399678,7.48234825 2.95156285,7.63593881 L4.75,9.389 L4.75,9.389 L4.32487658,11.8655653 C4.23143888,12.4098886 4.59695386,12.9268961 5.14127715,13.0203338 C5.35808617,13.0575509 5.58111746,13.0222392 5.77582605,12.9198682 L7.999,11.751 L7.999,11.751 L10.223309,12.9201739 C10.712173,13.1771377 11.3167859,12.9891455 11.5737498,12.5002815 C11.6760846,12.3055935 11.7113789,12.0825978 11.6741677,11.8658233 L11.249,9.389 L11.249,9.389 L13.0473242,7.63660227 C13.4428666,7.25116142 13.4510555,6.6180494 13.0656146,6.22250699 C12.9120633,6.06493147 12.7108304,5.96239489 12.4930948,5.93078419 L10.008,5.57 L10.008,5.57 L8.89657099,3.31725295 C8.65221378,2.82196717 8.05261467,2.61854938 7.5573289,2.86290659 C7.36008347,2.96022079 7.20042315,3.11984957 7.10306997,3.31707577 L5.991,5.57 L5.991,5.57 Z" id="图标-填色"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/icons/tree-down.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024" width="30"
+    fill="currentColor">
+    <path d="M512 704L256 384h512z"></path>
+</svg>

package/src/index.tsx

@@ -165,6 +165,7 @@ import './renderers/Icon';
 import './renderers/Carousel';
 import './renderers/AnchorNav';
 import './renderers/Steps';
+import './renderers/Timeline';
 import './renderers/Markdown';
 import './renderers/TableView';
 import './renderers/Code';

package/src/locale/de-DE.ts

@@ -6,6 +6,15 @@ register('de-DE', {
   'asc': 'Aufsteigend',
   'App.home': 'Startseite',
   'App.navigation': 'Navigation',
+  'Calendar.datepicker': 'Auswahl des Datums',
+  'Calendar.yearmonth': 'YYYY MM',
+  'Calendar.year': 'YYYY',
+  'Calendar.begin': 'beginnt',
+  'Calendar.end': 'ende',
+  'Calendar.beginAndEnd': 'b/e',
+  'Calendar.toast': 'Außerhalb des Datumsbereichs',
+  'Calendar.startPick': 'Wählen Sie Startzeit',
+  'Calendar.endPick': 'Wählen Sie Endzeit',
   'cancel': 'Abbrechen',
   'Card.dragTip': 'Obere Schaltfläche zum Sortieren ziehen',
   'Card.toggleDrag': 'Zum Sortieren umschalten',
@@ -34,6 +43,10 @@ register('de-DE', {
   'CRUD.paginationGoText': 'Wechseln zu',
   'CRUD.paginationPageText': 'Seite',
   'PaginationWrapper.placeholder': 'Textkörper konfigurieren',
+  'Date.titleYear': '',
+  'Date.titleMonth': '',
+  'Date.titleDate': '',
+  'Date.titleTime': '',
   'Date.daysago': 'Vor {{days}} Tag(en)',
   'Date.dayslater': '{{days}} Tag(e) später',
   'Date.endOfMonth': 'Letzter Tag des Monats',
@@ -215,7 +228,7 @@ register('de-DE', {
   'validate.minimum': 'Der Eingabewert ist kleiner als der Mindestwert von $1.',
   'validate.minLength': 'Geben Sie weitere Zeichen ein, mindestens $1.',
   'validate.notEmptyString': 'Geben Sie nicht nur Leerzeichen ein.',
-  'validateFailed': 'Fehler bei der Überprüfung,',
+  'validateFailed': 'Fehler bei der Überprüfung',
   'Wizard.configError': 'Konfigurationsfehler',
   'Wizard.finish': 'Ende',
   'Wizard.next': 'Weiter',
@@ -254,5 +267,7 @@ register('de-DE', {
   'Condition.cond_placeholder': 'Bedingung auswählen',
   'Condition.field_placeholder': 'Feld auswählen',
   'Condition.blank': 'leer',
-  'InputTable.uniqueError': 'Column `{{label}}` unique validate failed'
+  'InputTable.uniqueError': 'Column `{{label}}` unique validate failed',
+  'Timeline.collapseText': 'Entfalten',
+  'Timeline.expandText': 'Falten'
 });

package/src/locale/en-US.ts

@@ -6,6 +6,15 @@ register('en-US', {
   'App.home': 'Home',
   'App.navigation': 'Navigation',
   'asc': 'Asc',
+  'Calendar.datepicker': 'Date Picker',
+  'Calendar.yearmonth': 'YYYY MM',
+  'Calendar.year': 'YYYY',
+  'Calendar.begin': 'begin',
+  'Calendar.end': 'end',
+  'Calendar.beginAndEnd': 'b/e',
+  'Calendar.toast': 'Out of date range',
+  'Calendar.startPick': 'Select start time',
+  'Calendar.endPick': 'Select end time',
   'cancel': 'Cancel',
   'Card.dragTip': 'Drag top button to sort',
   'Card.toggleDrag': 'Toggle drag to sort',
@@ -34,6 +43,10 @@ register('en-US', {
   'CRUD.paginationGoText': 'Go to',
   'CRUD.paginationPageText': 'page',
   'PaginationWrapper.placeholder': 'please config body',
+  'Date.titleYear': 'select year',
+  'Date.titleMonth': 'select month and year',
+  'Date.titleDate': 'select month, year and day',
+  'Date.titleTime': 'select time',
   'Date.daysago': '{{days}} day(s) ago',
   'Date.dayslater': '{{days}} day(s) later',
   'Date.endOfMonth': 'last day of the month',
@@ -217,7 +230,7 @@ register('en-US', {
   'validate.minimum': 'The input value is lower than the minimum value of $1',
   'validate.minLength': 'Please enter more, at least $1 characters.',
   'validate.notEmptyString': 'Please do not enter all blank characters',
-  'validateFailed': 'Validate failed,',
+  'validateFailed': 'Validate failed',
   'Wizard.configError': 'Config error',
   'Wizard.finish': 'Finish',
   'Wizard.next': 'Next',
@@ -256,5 +269,7 @@ register('en-US', {
   'Condition.cond_placeholder': 'select condition',
   'Condition.field_placeholder': 'select field',
   'Condition.blank': 'blank',
-  'InputTable.uniqueError': 'Column `{{label}}` unique validate failed'
+  'InputTable.uniqueError': 'Column `{{label}}` unique validate failed',
+  'Timeline.collapseText': 'Unfold',
+  'Timeline.expandText': 'Fold'
 });

package/src/locale/zh-CN.ts

@@ -6,6 +6,15 @@ register('zh-CN', {
   'App.home': '首页',
   'App.navigation': '导航',
   'asc': '正序',
+  'Calendar.datepicker': '日期选择',
+  'Calendar.yearmonth': 'YYYY年MM月',
+  'Calendar.year': 'YYYY年',
+  'Calendar.begin': '开始',
+  'Calendar.end': '结束',
+  'Calendar.beginAndEnd': '始/终',
+  'Calendar.toast': '超出日期范围',
+  'Calendar.startPick': '选择开始时间',
+  'Calendar.endPick': '选择结束时间',
   'cancel': '取消',
   'Card.dragTip': '请拖动顶部的按钮进行排序',
   'Card.toggleDrag': '对卡片进行排序操作',
@@ -34,6 +43,10 @@ register('zh-CN', {
   'CRUD.paginationGoText': '前往',
   'CRUD.paginationPageText': '页',
   'PaginationWrapper.placeholder': '请配置内容',
+  'Date.titleYear': '选择年',
+  'Date.titleMonth': '选择年月',
+  'Date.titleDate': '选择年月日',
+  'Date.titleTime': '选择时间',
   'Date.daysago': '{{days}}天前',
   'Date.dayslater': '{{days}}天后',
   'Date.endOfMonth': '本月最后一天',
@@ -260,5 +273,7 @@ register('zh-CN', {
   'Condition.cond_placeholder': '请选择操作',
   'Condition.field_placeholder': '请选择字段',
   'Condition.blank': '空',
-  'InputTable.uniqueError': '列`{{label}}`没有通过唯一验证'
+  'InputTable.uniqueError': '列`{{label}}`没有通过唯一验证',
+  'Timeline.collapseText': '展开',
+  'Timeline.expandText': '折叠'
 });