amis 1.8.0-beta.1 → 1.8.0-beta.5

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,20 +161,6 @@ class BaseDatePicker extends React.Component<
       updatedState = this.getStateFromProps(props);
     }
 
-    // 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;
     }
@@ -237,7 +223,8 @@ class BaseDatePicker extends React.Component<
       updatedState.viewDate = moment(props.viewDate);
     }
 
-    if (Object.keys(updatedState).length) {
+    // time-range 下会有问题，先不支持
+    if (Object.keys(updatedState).length && props.viewMode !== 'time') {
       this.setState(updatedState);
     }
 

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/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,13 @@ export function render(
       translate
     } as any;
 
+    if (options.enableAMISDebug) {
+      // 因为里面还有 render
+      setTimeout(() => {
+        enableDebug();
+      }, 10);
+    }
+
     store = RendererStore.create({}, options);
     stores[options.session || 'global'] = store;
   }

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/CRUD.tsx

@@ -105,6 +105,16 @@ export interface CRUDCommonSchema extends BaseSchema {
    */
   perPage?: number;
 
+  /**
+   * 默认排序字段
+   */
+  orderBy?: string;
+
+  /**
+   * 默认排序方向
+   */
+  orderDir?: 'asc' | 'desc';
+
   /**
    * 可以默认给定初始参数如： {\"perPage\": 24}
    */
@@ -772,11 +782,17 @@ export default class CRUD extends React.Component<CRUDProps, any> {
   }
 
   handleFilterInit(values: object) {
-    const {defaultParams, data, store} = this.props;
+    const {defaultParams, data, store, orderBy, orderDir} = this.props;
+    const params = {...defaultParams};
+
+    if (orderBy) {
+      params['orderBy'] = orderBy;
+      params['orderDir'] = orderDir || 'asc';
+    }
 
     this.handleFilterSubmit(
       {
-        ...defaultParams,
+        ...params,
         ...values,
         ...store.query
       },
@@ -1025,7 +1041,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
       env,
       loadDataOnce,
       loadDataOnceFetchOnFilter,
-      source
+      source,
+      columns
     } = this.props;
 
     // reload 需要清空用户选择。
@@ -1066,7 +1083,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
             pageField,
             perPageField,
             loadDataMode,
-            syncResponse2Query
+            syncResponse2Query,
+            columns: store.columns ?? columns
           })
           .then(value => {
             interval &&

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/Form/Checkbox.tsx

@@ -19,12 +19,12 @@ export interface CheckboxControlSchema extends FormBaseControl {
   /**
    * 勾选值
    */
-  trueValue?: any;
+  trueValue?: boolean | string | number;
 
   /**
    * 未勾选值
    */
-  falseValue?: any;
+  falseValue?: boolean | string | number;
 
   /**
    * 选项说明
@@ -35,6 +35,9 @@ export interface CheckboxControlSchema extends FormBaseControl {
    * 角标
    */
   badge?: BadgeSchema;
+  partial?: boolean;
+  optionType?: 'default' | 'button';
+  checked?: boolean;
 }
 
 export interface CheckboxProps
@@ -89,6 +92,9 @@ export default class CheckboxControl extends React.Component<
       onChange,
       disabled,
       render,
+      partial,
+      optionType,
+      checked,
       classPrefix: ns
     } = this.props;
 
@@ -101,6 +107,9 @@ export default class CheckboxControl extends React.Component<
           falseValue={falseValue}
           disabled={disabled}
           onChange={(value: any) => this.dispatchChangeEvent(value)}
+          partial={partial}
+          optionType={optionType}
+          checked={checked}
         >
           {option ? render('option', option) : null}
         </Checkbox>