amis 1.8.0-beta.0 → 1.8.0-beta.3

package/src/components/Range.tsx

@@ -11,11 +11,11 @@ import difference from 'lodash/difference';
 import React from 'react';
 import {uncontrollable} from 'uncontrollable';
 
-import {RendererProps} from '../factory';
 import Overlay from './Overlay';
-import {ThemeProps, themeable} from '../theme';
+import type { ThemeProps } from '../theme'
+import {themeable} from '../theme';
 import {autobind, camel} from '../utils/helper';
-import {
+import type {
   MultipleValue,
   Value,
   FormatValue,
@@ -71,7 +71,7 @@ interface LabelProps extends ThemeProps {
  * @returns position.left
  */
 const valueToOffsetLeft = (value: any, min: number, max: number) =>
-  (value * 100) / (max - min) + '%';
+  ((value - min) * 100) / (max - min) + '%';
 
 /**
  * 滑块handle
@@ -298,7 +298,7 @@ export class Range extends React.Component<RangeItemProps, any> {
   pageXToValue(pageX: number) {
     const {x, width} = this.getBoundingClient(this.trackRef.current as Element);
     const {max, min} = this.props;
-    return ((pageX - x) * (max - min)) / width;
+    return ((pageX - x) * (max - min)) / width + min;
   }
 
   /**
@@ -366,16 +366,30 @@ export class Range extends React.Component<RangeItemProps, any> {
    */
   @autobind
   renderSteps() {
-    const {max, min, step, showSteps, classnames: cx} = this.props;
-    const steps = Math.floor((max - min) / step);
+    const {max, min, step, showSteps, classnames: cx, parts} = this.props;
+    let isShowSteps = showSteps;
+    // 只要设置了 parts 就展示分隔
+    if (parts > 1 || Array.isArray(parts)) {
+      isShowSteps = true;
+    }
+    // 总区间
+    const section = max - min;
+    // 总区间被平均分为多少块
+    const steps = parts > 1 ? parts : Math.floor(section / step);
+    // 平均分 每块的长度
+    const partLength = section / steps;
+    // parts为数组时，以0为起点(传入的值 - min)
+    const partLengthList = Array.isArray(parts)
+      ? parts.map(item => item - min)
+      : range(steps - 1).map(item => (item + 1) * partLength);
     return (
-      showSteps && (
+      isShowSteps && (
         <div>
-          {range(steps - 1).map(item => (
+          {partLengthList.map(item => (
             <span
               key={item}
               className={cx('InputRange-track-dot')}
-              style={{left: ((item + 1) * 100) / steps + '%'}}
+              style={{left: (item * 100) / (max - min) + '%'}}
             ></span>
           ))}
         </div>
@@ -437,13 +451,13 @@ export class Range extends React.Component<RangeItemProps, any> {
     const traceActiveStyle = {
       width: valueToOffsetLeft(
         multiple
-          ? (value as MultipleValue).max - (value as MultipleValue).min
+          ? (value as MultipleValue).max - (value as MultipleValue).min + min
           : value,
         min,
         max
       ),
       left: valueToOffsetLeft(
-        multiple ? (value as MultipleValue).min : 0,
+        multiple ? (value as MultipleValue).min : min,
         min,
         max
       )

package/src/components/Steps.tsx

@@ -69,8 +69,12 @@ export interface StepsSchema extends BaseSchema {
    * 展示模式
    */
   mode?: 'horizontal' | 'vertical';
-}
 
+  /**
+   * 标签放置位置
+   */
+   labelPlacement?: 'horizontal' | 'vertical';
+}
 export interface StepsProps extends ThemeProps {
   steps: StepSchema[];
   className: string;
@@ -81,6 +85,8 @@ export interface StepsProps extends ThemeProps {
         [propName: string]: StepStatus;
       };
   mode?: 'horizontal' | 'vertical';
+  labelPlacement?: 'horizontal' | 'vertical';
+  progressDot?: boolean;
   useMobileUI?: boolean;
 }
 
@@ -92,6 +98,8 @@ export function Steps(props: StepsProps) {
     current,
     status,
     mode = 'horizontal',
+    labelPlacement = 'horizontal',
+    progressDot = false,
     useMobileUI
   } = props;
   const FINISH_ICON = 'check';
@@ -129,48 +137,41 @@ export function Steps(props: StepsProps) {
 
   const mobileUI = useMobileUI && isMobile();
   return (
-    <ul
-      className={cx(
-        'Steps',
-        `Steps--${mode}`,
-        mobileUI ? 'Steps-mobile' : '',
-        className
-      )}
-    >
+    <ul className={cx( // 纵向步骤条暂时不支持labelPlacement属性
+      'Steps',
+      `Steps--Placement-${(progressDot || (labelPlacement === 'vertical' && mode != 'vertical')) ? 'vertical' : ''}`,
+      `Steps--${progressDot ? 'ProgressDot' : ''}`, 
+      `Steps--${mode}`,
+      mobileUI ? 'Steps-mobile' : '', className)}>
       {stepsRow.map((step, i) => {
         const {stepStatus, icon} = getStepStatus(step, i);
-
         return (
           <li
             key={i}
-            className={cx('StepsItem', `is-${stepStatus}`, step.className)}
+            className={cx('StepsItem', `is-${stepStatus}`, step.className, `StepsItem-${progressDot ? 'ProgressDot' : ''}`)}
           >
             <div className={cx('StepsItem-container')}>
-              <div
-                className={cx(
-                  'StepsItem-containerIcon',
-                  i < current && 'is-success'
-                )}
-              >
-                <span className={cx('StepsItem-icon')}>
-                  {icon ? <Icon icon={icon} className="icon" /> : i + 1}
-                </span>
-              </div>
+                <div className={cx('StepsItem-containerTail')}></div>
+                {progressDot ? <div className={cx('StepsItem-containerProgressDot')}></div>
+                  : <div className={cx('StepsItem-containerIcon', i < current && 'is-success')}>
+                      <span className={cx('StepsItem-icon')}>
+                          {icon ? <Icon icon={icon} className="icon" /> : i + 1}
+                      </span>
+                    </div>}
               <div className={cx('StepsItem-containerWrapper')}>
                 <div className={cx('StepsItem-body')}>
                   <div
                     className={cx(
                       'StepsItem-title',
+                      `StepsItem-${progressDot ? 'vertical-ProgressDot' : ''}`,
                       i < current && 'is-success'
                     )}
                   >
-                    <span>{step.title}</span>
-                    <span className={cx('StepsItem-subTitle')}>
-                      {step.subTitle}
-                    </span>
+                    <span className={cx('StepsItem-ellText')} title={String(step.title)}>{step.title}</span>
+                    <span className={cx('StepsItem-subTitle', 'StepsItem-ellText')} title={String(step.subTitle)}>{step.subTitle}</span>
                   </div>
-                  <div className={cx('StepsItem-description')}>
-                    {step.description}
+                  <div className={cx('StepsItem-description', 'StepsItem-ellText')} title={String(step.description)}>
+                    <span>{step.description}</span>
                   </div>
                 </div>
               </div>

package/src/components/calendar/Calendar.tsx

@@ -161,18 +161,19 @@ class BaseDatePicker extends React.Component<
       updatedState = this.getStateFromProps(props);
     }
 
-    if (updatedState.open === undefined) {
-      if (typeof props.open !== 'undefined') {
-        updatedState.open = props.open;
-      } else if (
-        prevProps.closeOnSelect &&
-        this.state.currentView !== viewModes.TIME
-      ) {
-        updatedState.open = false;
-      } else {
-        updatedState.open = this.state.open;
-      }
-    }
+    // open 是外部控制了
+    // if (updatedState.open === undefined) {
+    //   if (typeof props.open !== 'undefined') {
+    //     updatedState.open = props.open;
+    //   } else if (
+    //     prevProps.closeOnSelect &&
+    //     this.state.currentView !== viewModes.TIME
+    //   ) {
+    //     updatedState.open = false;
+    //   } else {
+    //     updatedState.open = this.state.open;
+    //   }
+    // }
 
     if (props.viewMode !== prevProps.viewMode) {
       updatedState.currentView = props.viewMode;
@@ -236,6 +237,10 @@ class BaseDatePicker extends React.Component<
       updatedState.viewDate = moment(props.viewDate);
     }
 
+    if (Object.keys(updatedState).length) {
+      this.setState(updatedState);
+    }
+
     this.checkTZ(props);
   }
 

package/src/components/calendar/YearsView.tsx

@@ -75,10 +75,6 @@ export class CustomYearsView extends React.Component<CustomYearsViewProps> {
         .clone()
         .set({year: year, month: irrelevantMonth, date: irrelevantDate});
 
-      // Not sure what 'rdtOld' is for, commenting out for now as it's not working properly
-      // if ( i === -1 | i === 10 )
-      // classes += ' rdtOld';
-
       noOfDaysInYear = parseInt(currentYear.endOf('year').format('DDD'), 10);
       daysInYear = Array.from({length: noOfDaysInYear}, function (e, i) {
         return i + 1;
@@ -95,6 +91,9 @@ export class CustomYearsView extends React.Component<CustomYearsViewProps> {
 
       if (selectedDate && selectedDate.year() === year) classes += ' rdtActive';
 
+      // 第一个和最后一个置灰
+      if (i === -1 || i === 10) classes += ' text-muted';
+
       props = {
         'key': year,
         'data-value': year,

package/src/components/formula/Editor.tsx

@@ -10,7 +10,7 @@ import {FormulaPlugin, editorFactory} from './plugin';
 import FuncList from './FuncList';
 import {VariableList} from './VariableList';
 import CodeMirrorEditor from '../CodeMirror';
-import {autobind} from '../../utils/helper';
+import {autobind, eachTree} from '../../utils/helper';
 import {themeable, ThemeProps} from '../../theme';
 import {localeable, LocaleProps} from '../../locale';
 
@@ -133,8 +133,39 @@ export class FormulaEditor extends React.Component<
     variables: Array<VariableItem>,
     functions: Array<FuncGroup>
   ) {
-    // todo 高亮原始文本
-    return value;
+    if (!Array.isArray(variables) || !variables.length || !value) {
+      return;
+    }
+
+    const varMap: {
+      [propname: string]: string;
+    } = {};
+
+    eachTree(
+      variables,
+      item => item.value && (varMap[item.value] = item.label)
+    );
+    const vars = Object.keys(varMap).sort((a, b) => b.length - a.length);
+    let content = value || '';
+
+    // 标记方法调用
+    content = content.replace(/([A-Z]+)\s*\(/g, (_, func, pos) => {
+      return _?.replace(func, `<span class="c-func">${func}</span>`);
+    });
+
+    vars.forEach(v => {
+      let from = 0;
+      let idx = -1;
+      while (~(idx = content.indexOf(v, from))) {
+        content = content.replace(
+          v,
+          `<span class="c-field">${varMap[v]}</span>`
+        );
+        from = idx + v.length;
+      }
+    });
+
+    return {html: content};
   }
 
   componentWillUnmount() {

package/src/components/formula/Picker.tsx

@@ -69,6 +69,11 @@ export interface FormulaPickerProps extends FormulaEditorProps {
    */
   disabled?: boolean;
 
+  /**
+   * 是否允许输入，否需要点击fx在弹窗中输入
+   */
+  allowInput?: boolean;
+
   /**
    * 占位文本
    */
@@ -96,12 +101,28 @@ export class FormulaPicker extends React.Component<FormulaPickerProps> {
     this.props.onChange?.(value);
   }
 
+  @autobind
+  renderFormulaValue(item: any) {
+    const {allowInput, classnames: cx} = this.props;
+    const html = {__html: item.html};
+    if (allowInput) {
+      return '';
+    }
+    return (
+      <div
+        className={cx('FormulaPicker-ResultBox')}
+        dangerouslySetInnerHTML={html}
+      ></div>
+    );
+  }
+
   render() {
     let {
       classnames: cx,
       value,
       translate: __,
       disabled,
+      allowInput,
       className,
       onChange,
       size,
@@ -186,9 +207,15 @@ export class FormulaPicker extends React.Component<FormulaPickerProps> {
                     'FormulaPicker-input',
                     isOpened ? 'is-active' : ''
                   )}
-                  allowInput
+                  allowInput={allowInput}
                   clearable={clearable}
                   value={value}
+                  result={FormulaEditor.highlightValue(
+                    value,
+                    variables,
+                    functions
+                  )}
+                  itemRender={this.renderFormulaValue}
                   onResultChange={noop}
                   onChange={this.handleConfirm}
                   disabled={disabled}

package/src/factory.tsx

@@ -42,6 +42,7 @@ import {
   RendererEvent
 } from './utils/renderer-event';
 import {runActions} from './actions/Action';
+import {enableDebug} from './utils/debug';
 
 export interface TestFunc {
   (
@@ -152,6 +153,10 @@ export interface RenderOptions {
    * 过滤 html 标签，可用来添加 xss 保护逻辑
    */
   filterHtml?: (input: string) => string;
+  /**
+   * 是否开启 amis 调试
+   */
+  enableAMISDebug?: boolean;
   [propName: string]: any;
 }
 
@@ -271,6 +276,10 @@ const defaultOptions: RenderOptions = {
   affixOffsetBottom: 0,
   richTextToken: '',
   useMobileUI: true, // 是否启用移动端原生 UI
+  enableAMISDebug:
+    (window as any).enableAMISDebug ??
+    location.search.indexOf('amisDebug=1') !== -1 ??
+    false,
   loadRenderer,
   rendererEventListeners: [],
   fetcher() {
@@ -492,6 +501,10 @@ export function render(
       translate
     } as any;
 
+    if (options.enableAMISDebug) {
+      enableDebug();
+    }
+
     store = RendererStore.create({}, options);
     stores[options.session || 'global'] = store;
   }
@@ -518,13 +531,13 @@ export function render(
   // 进行文本替换
   if (env.replaceText && isObject(env.replaceText)) {
     const replaceKeys = Object.keys(env.replaceText);
-    replaceKeys.sort().reverse(); // 避免用户将短的放前面
+    replaceKeys.sort((a, b) => b.length - a.length); // 避免用户将短的放前面
     const replaceTextIgnoreKeys = new Set(env.replaceTextIgnoreKeys || []);
     JSONTraverse(schema, (value: any, key: string, object: any) => {
       if (typeof value === 'string' && !replaceTextIgnoreKeys.has(key)) {
         for (const replaceKey of replaceKeys) {
           if (~value.indexOf(replaceKey)) {
-            object[key] = value.replaceAll(
+            value = object[key] = value.replaceAll(
               replaceKey,
               env.replaceText[replaceKey]
             );

package/src/locale/de-DE.ts

@@ -75,6 +75,19 @@ register('de-DE', {
   'Date.weekslater': '{{weeks}} Wochen später',
   'Date.yesterday': 'Gestern',
   'dateformat.year': 'YYYY',
+  'DateRange.daysago': 'letzten {{days}} Tage',
+  'DateRange.dayslater': 'innerhalb von {{days}} Tagen',
+  'DateRange.weeksago': 'letzten {{weeks}} Wochen',
+  'DateRange.weekslater': 'innerhalb von {{weeks}} Wochen',
+  'DateRange.monthsago': 'letzten {{months}} Monate',
+  'DateRange.monthslater': 'innerhalb von {{months}} Monaten',
+  'DateRange.quartersago': 'letzten {{quarters}} Quartale',
+  'DateRange.quarterslater': 'innerhalb von {{quarters}} Quartalen',
+  'DateRange.yearsago': 'letzten {{years}} Jahre',
+  'DateRange.yearslater': '{{years}} Jahren',
+  'DateRange.hoursago': 'letzten {{hours}} Stunden',
+  'DateRange.hourslater': 'innerhalb von {{hours}} Stunden',
+  'DateRange.1dayago': 'Vor 1 Tag',
   'DateRange.1daysago': 'Vor 1 Tag',
   'DateRange.7daysago': 'Vor 7 Tagen',
   'DateRange.30daysago': 'Vor 30 Tagen',

package/src/locale/en-US.ts

@@ -72,6 +72,19 @@ register('en-US', {
   'Date.weekslater': '{{weeks}} week(s) later',
   'Date.yesterday': 'Yesterday',
   'dateformat.year': 'YYYY',
+  'DateRange.daysago': 'Last {{days}} day(s)',
+  'DateRange.dayslater': 'Within {{days}} day(s)',
+  'DateRange.weeksago': 'Last {{weeks}} week(s)',
+  'DateRange.weekslater': 'Within {{weeks}} week(s)',
+  'DateRange.monthsago': 'Last {{months}} month(s)',
+  'DateRange.monthslater': 'Within {{months}} month(s)',
+  'DateRange.quartersago': 'Last {{quarters}} quarter(s)',
+  'DateRange.quarterslater': 'Within {{quarters}} quarter(s)',
+  'DateRange.yearsago': 'Last {{years}} year(s)',
+  'DateRange.yearslater': 'Within {{years}} year(s)',
+  'DateRange.hoursago': 'Last {{hours}} hour(s)',
+  'DateRange.hourslater': 'Within {{hours}} hour(s)',
+  'DateRange.1dayago': '1 day ago',
   'DateRange.1daysago': '1 day ago',
   'DateRange.7daysago': '7 days ago',
   'DateRange.30daysago': '30 days ago',

package/src/locale/zh-CN.ts

@@ -75,7 +75,20 @@ register('zh-CN', {
   'Date.weekslater': '{{weeks}}周后',
   'Date.yesterday': '昨天',
   'dateformat.year': 'YYYY年',
+  'DateRange.daysago': '最近{{days}}天',
+  'DateRange.dayslater': '{{days}}天以内',
+  'DateRange.weeksago': '最近{{weeks}}周',
+  'DateRange.weekslater': '{{weeks}}周以内',
+  'DateRange.monthsago': '最近{{months}}月',
+  'DateRange.monthslater': '{{months}}月以内',
+  'DateRange.quartersago': '最近{{quarters}}季度',
+  'DateRange.quarterslater': '{{quarters}}季度以内',
+  'DateRange.yearsago': '最近{{years}}年',
+  'DateRange.yearslater': '{{years}}年以内',
+  'DateRange.hoursago': '最近{{hours}}小时',
+  'DateRange.hourslater': '{{hours}}小时以内',
   'DateRange.1daysago': '最近1天',
+  'DateRange.1dayago': '最近1天',
   'DateRange.7daysago': '最近7天',
   'DateRange.30daysago': '最近30天',
   'DateRange.90daysago': '最近90天',

package/src/renderers/Action.tsx

@@ -753,6 +753,8 @@ export class Action extends React.Component<ActionProps, ActionState> {
       loading,
       body,
       render,
+      onMouseEnter,
+      onMouseLeave,
       classnames: cx,
       classPrefix: ns
     } = this.props;
@@ -768,7 +770,12 @@ export class Action extends React.Component<ActionProps, ActionState> {
           trigger={tooltipTrigger}
           rootClose={tooltipRootClose}
         >
-          <div className={cx('Action', className)} onClick={this.handleAction}>
+          <div
+            className={cx('Action', className)}
+            onClick={this.handleAction}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+          >
             {render('body', body) as JSX.Element}
           </div>
         </TooltipWrapper>
@@ -814,6 +821,8 @@ export class Action extends React.Component<ActionProps, ActionState> {
         loadingClassName={loadingClassName}
         loading={loading}
         onClick={this.handleAction}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
         type={type && ~allowedType.indexOf(type) ? type : 'button'}
         disabled={disabled}
         componentClass={isMenuItem ? 'a' : componentClass}
@@ -877,6 +886,16 @@ export class ActionRenderer extends React.Component<
     }
   }
 
+  @autobind
+  handleMouseEnter(e: React.MouseEvent<any>) {
+    this.props.dispatchEvent(e, this.props.data);
+  }
+
+  @autobind
+  handleMouseLeave(e: React.MouseEvent<any>) {
+    this.props.dispatchEvent(e, this.props.data);
+  }
+
   @autobind
   isCurrentAction(link: string) {
     const {env, data} = this.props;
@@ -892,6 +911,8 @@ export class ActionRenderer extends React.Component<
         env={env}
         disabled={disabled || btnDisabled}
         onAction={this.handleAction}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
         loading={loading}
         isCurrentUrl={this.isCurrentAction}
         tooltipContainer={

package/src/renderers/Carousel.tsx

@@ -278,6 +278,13 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
     clearTimeout(this.durationTimeout as number);
   }
 
+  @autobind
+  changeSlide(index: number) {
+    this.setState({
+      current: index
+    });
+  }
+
   renderDots() {
     const {classnames: cx} = this.props;
     const {current, options} = this.state;
@@ -290,6 +297,7 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
         {Array.from({length: options.length}).map((_, i) => (
           <span
             key={i}
+            onClick={() => this.changeSlide(i)}
             className={cx('Carousel-dot', current === i ? 'is-active' : '')}
           />
         ))}

package/src/renderers/Dialog.tsx

@@ -90,6 +90,11 @@ export interface DialogSchema extends BaseSchema {
    * 是否显示错误信息
    */
   showErrorMsg?: boolean;
+
+  /**
+   * 是否显示 spinner
+   */
+  showLoading?: boolean;
 }
 
 export type DialogSchemaBase = Omit<DialogSchema, 'type'>;
@@ -424,13 +429,22 @@ export default class Dialog extends React.Component<DialogProps> {
       return null;
     }
 
-    const {store, render, classnames: cx, showErrorMsg} = this.props;
+    const {
+      store,
+      render,
+      classnames: cx,
+      showErrorMsg,
+      showLoading
+    } = this.props;
 
     return (
       <div className={cx('Modal-footer')}>
-        {store.loading || store.error ? (
+        {(showLoading !== false && store.loading) ||
+        (showErrorMsg !== false && store.error) ? (
           <div className={cx('Dialog-info')} key="info">
-            <Spinner size="sm" key="info" show={store.loading} />
+            {showLoading !== false ? (
+              <Spinner size="sm" key="info" show={store.loading} />
+            ) : null}
             {store.error && showErrorMsg !== false ? (
               <span className={cx('Dialog-error')}>{store.msg}</span>
             ) : null}

package/src/renderers/DropDownButton.tsx

@@ -147,12 +147,14 @@ export default class DropDownButton extends React.Component<
   };
 
   target: any;
+  timer: ReturnType<typeof setTimeout>;
   constructor(props: DropDownButtonProps) {
     super(props);
 
     this.open = this.open.bind(this);
     this.close = this.close.bind(this);
     this.toogle = this.toogle.bind(this);
+    this.keepOpen = this.keepOpen.bind(this);
     this.domRef = this.domRef.bind(this);
   }
 
@@ -183,9 +185,17 @@ export default class DropDownButton extends React.Component<
   }
 
   close() {
-    this.setState({
-      isOpened: false
-    });
+    this.timer = setTimeout(() => {
+      this.setState({
+        isOpened: false
+      });
+    }, 200);
+  }
+
+  keepOpen() {
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
   }
 
   renderButton(
@@ -260,6 +270,7 @@ export default class DropDownButton extends React.Component<
                 menuClassName
               )}
               onClick={closeOnClick ? this.close : noop}
+              onMouseEnter={this.keepOpen}
               ref={ref}
             >
               {children