amis 1.6.2 → 1.6.3

package/src/Schema.ts

@@ -9,6 +9,7 @@ import {ButtonToolbarSchema} from './renderers/Form/ButtonToolbar';
 import {CardSchema} from './renderers/Card';
 import {CardsSchema} from './renderers/Cards';
 import {FormSchema} from './renderers/Form';
+import {CalendarSchema} from './renderers/Calendar';
 import {CarouselSchema} from './renderers/Carousel';
 import {ChartSchema} from './renderers/Chart';
 import {CollapseSchema} from './renderers/Collapse';
@@ -132,6 +133,7 @@ export type SchemaType =
   | 'cards'
   | 'carousel'
   | 'chart'
+  | 'calendar'
   | 'collapse'
   | 'collapse-group'
   | 'color'
@@ -340,6 +342,7 @@ export type SchemaObject =
   | AvatarSchema
   | ButtonGroupSchema
   | ButtonToolbarSchema
+  | CalendarSchema
   | CardSchema
   | CardsSchema
   | CarouselSchema

package/src/components/Collapse.tsx

@@ -182,7 +182,10 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
             expandIcon ? (
               React.cloneElement(expandIcon, {
                 ...expandIcon.props,
-                className: cx('Collapse-icon-tranform')
+                className: cx(
+                  'Collapse-icon-tranform',
+                  expandIcon.props?.className
+                )
               })
             ) : (
               <span className={cx('Collapse-arrow')} />

package/src/components/ColorPicker.tsx

@@ -267,7 +267,7 @@ export class ColorControl extends React.PureComponent<
 
         {clearable && !disabled && value ? (
           <a onClick={this.clearValue} className={cx('ColorPicker-clear')}>
-            <Icon icon="close" className="icon" />
+            <Icon icon="input-clear" className="icon" />
           </a>
         ) : null}
 

package/src/components/DatePicker.tsx

@@ -700,7 +700,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
 
         {clearable && !disabled && normalizeValue(value, format) ? (
           <a className={cx(`DatePicker-clear`)} onClick={this.clearValue}>
-            <Icon icon="close" className="icon" />
+            <Icon icon="input-clear" className="icon" />
           </a>
         ) : null}
 

package/src/components/DateRangePicker.tsx

@@ -426,7 +426,7 @@ export class DateRangePicker extends React.Component<
 
     if (
       startDate &&
-      !endDate &&
+      (!endDate || (endDate && newValue.isSame(startDate))) && // 没有结束时间，或者新的时间也是开始时间，这时都会将新值当成结束时间
       newValue.isSameOrAfter(startDate) &&
       (!minDuration || newValue.isAfter(startDate.clone().add(minDuration))) &&
       (!maxDuration || newValue.isBefore(startDate.clone().add(maxDuration)))
@@ -885,7 +885,7 @@ export class DateRangePicker extends React.Component<
 
         {clearable && !disabled && value ? (
           <a className={`${ns}DateRangePicker-clear`} onClick={this.clearValue}>
-            <Icon icon="close" className="icon" />
+            <Icon icon="input-clear" className="icon" />
           </a>
         ) : null}
 

package/src/components/LocationPicker.tsx

@@ -171,7 +171,7 @@ export class LocationPicker extends React.Component<
 
         {clearable && !disabled && value ? (
           <a className={cx('LocationPicker-clear')} onClick={this.clearValue}>
-            <Icon icon="close" className="icon" />
+            <Icon icon="input-clear" className="icon" />
           </a>
         ) : null}
 

package/src/components/PickerContainer.tsx

@@ -11,6 +11,7 @@ import Button from './Button';
 export interface PickerContainerProps extends ThemeProps, LocaleProps {
   title?: string;
   showTitle?: boolean;
+  headerClassName?: string;
   children: (props: {
     onClick: (e: React.MouseEvent) => void;
     isOpened: boolean;
@@ -100,6 +101,7 @@ export class PickerContainer extends React.Component<
       bodyRender: popOverRender,
       title,
       showTitle,
+      headerClassName,
       translate: __,
       size
     } = this.props;
@@ -117,7 +119,7 @@ export class PickerContainer extends React.Component<
           onHide={this.close}
         >
           {showTitle !== false ? (
-            <Modal.Header onClose={this.close}>
+            <Modal.Header onClose={this.close} className={headerClassName}>
               {__(title || 'Select.placeholder')}
             </Modal.Header>
           ) : null}

package/src/components/ResultBox.tsx

@@ -184,7 +184,7 @@ export class ResultBox extends React.Component<ResultBoxProps> {
         !disabled &&
         (Array.isArray(result) ? result.length : result) ? (
           <a onClick={this.clearValue} className={cx('ResultBox-clear')}>
-            <Icon icon="close" className="icon" />
+            <Icon icon="input-clear" className="icon" />
           </a>
         ) : null}
         {!allowInput && mobileUI ? (

package/src/components/Tabs.tsx

@@ -21,6 +21,8 @@ const transitionStyles: {
   [ENTERED]: 'in'
 };
 
+export type TabsMode = '' | 'line' | 'card' | 'radio' | 'vertical' | 'chrome';
+
 export interface TabProps extends ThemeProps {
   title?: string | React.ReactNode; // 标题
   icon?: string;
@@ -85,8 +87,8 @@ class TabComponent extends React.PureComponent<TabProps> {
 export const Tab = themeable(TabComponent);
 
 export interface TabsProps extends ThemeProps {
-  mode: '' | 'line' | 'card' | 'radio' | 'vertical' | 'chrome';
-  tabsMode?: '' | 'line' | 'card' | 'radio' | 'vertical' | 'chrome';
+  mode: TabsMode;
+  tabsMode?: TabsMode;
   additionBtns?: React.ReactNode;
   onSelect?: (key: string | number) => void;
   activeKey?: string | number;

package/src/components/calendar/Calendar.tsx

@@ -132,8 +132,7 @@ class BaseDatePicker extends ReactDatePicker {
         'updateOn',
         'useMobileUI',
         'showToolbar',
-        'embed',
-        'onScheduleClick'
+        'embed'
       ].forEach(key => (props[key] = (this.props as any)[key]));
 
       return props;

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

@@ -19,6 +19,7 @@ import {ThemeProps, themeable} from '../../theme';
 import {Config} from './config';
 import InputBox from '../InputBox';
 import Formula from './Formula';
+import {FormulaPickerProps} from '../formula/Picker';
 
 /**
  * 支持4中表达式设置方式
@@ -43,6 +44,7 @@ export interface ExpressionProps extends ThemeProps {
   disabled?: boolean;
   searchable?: boolean;
   fieldClassName?: string;
+  formula?: FormulaPickerProps;
 }
 
 const fieldMap = {
@@ -132,7 +134,8 @@ export class Expression extends React.Component<ExpressionProps> {
       config,
       data,
       disabled,
-      searchable
+      searchable,
+      formula
     } = this.props;
     const inputType =
       ((value as any)?.type === 'field'
@@ -146,7 +149,6 @@ export class Expression extends React.Component<ExpressionProps> {
         : undefined) ||
       allowedTypes?.[0] ||
       'value';
-
     const types = allowedTypes || ['value', 'field', 'func'];
 
     if ((!Array.isArray(funcs) || !funcs.length) && ~types.indexOf('func')) {
@@ -163,6 +165,7 @@ export class Expression extends React.Component<ExpressionProps> {
             op={op}
             data={data}
             disabled={disabled}
+            formula={formula}
           />
         ) : null}
 

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

@@ -7,6 +7,7 @@ import {autobind, guid} from '../../utils/helper';
 import {Config} from './config';
 import {Icon} from '../icons';
 import {localeable, LocaleProps} from '../../locale';
+import {FormulaPickerProps} from '../formula/Picker';
 
 export interface ConditionGroupProps extends ThemeProps, LocaleProps {
   builderMode?: 'simple' | 'full';
@@ -15,6 +16,7 @@ export interface ConditionGroupProps extends ThemeProps, LocaleProps {
   fields: Fields;
   funcs?: Funcs;
   showNot?: boolean;
+  showANDOR?: boolean;
   data?: any;
   disabled?: boolean;
   searchable?: boolean;
@@ -23,6 +25,7 @@ export interface ConditionGroupProps extends ThemeProps, LocaleProps {
   onRemove?: (e: React.MouseEvent) => void;
   onDragStart?: (e: React.MouseEvent) => void;
   fieldClassName?: string;
+  formula?: FormulaPickerProps;
 }
 
 export class ConditionGroup extends React.Component<ConditionGroupProps> {
@@ -127,14 +130,16 @@ export class ConditionGroup extends React.Component<ConditionGroupProps> {
       onRemove,
       onDragStart,
       showNot,
+      showANDOR = false,
       disabled,
       searchable,
-      translate: __
+      translate: __,
+      formula
     } = this.props;
     return (
       <div className={cx('CBGroup')} data-group-id={value?.id}>
         <div className={cx('CBGroup-toolbar')}>
-          {builderMode === 'simple' ? null : (
+          {builderMode === 'simple' && showANDOR === false ? null : (
             <div className={cx('CBGroup-toolbarCondition')}>
               {showNot ? (
                 <Button
@@ -216,6 +221,7 @@ export class ConditionGroup extends React.Component<ConditionGroupProps> {
                 disabled={disabled}
                 searchable={searchable}
                 builderMode={builderMode}
+                formula={formula}
               />
             ))
           ) : (

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

@@ -6,6 +6,7 @@ import {Icon} from '../icons';
 import {autobind} from '../../utils/helper';
 import ConditionGroup from './Group';
 import ConditionItem from './Item';
+import {FormulaPickerProps} from '../formula/Picker';
 
 export interface CBGroupOrItemProps extends ThemeProps {
   builderMode?: 'simple' | 'full';
@@ -23,6 +24,7 @@ export interface CBGroupOrItemProps extends ThemeProps {
   onDragStart?: (e: React.MouseEvent) => void;
   onRemove?: (index: number) => void;
   fieldClassName?: string;
+  formula?: FormulaPickerProps;
 }
 
 export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
@@ -49,7 +51,8 @@ export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
       data,
       disabled,
       searchable,
-      onDragStart
+      onDragStart,
+      formula
     } = this.props;
 
     return (
@@ -97,6 +100,7 @@ export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
                 fieldClassName={fieldClassName}
                 funcs={funcs}
                 data={data}
+                formula={formula}
               />
               <a className={cx('CBDelete')} onClick={this.handleItemRemove}>
                 <Icon icon="close" className="icon" />

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

@@ -21,6 +21,7 @@ import PopOverContainer from '../PopOverContainer';
 import GroupedSelection from '../GroupedSelection';
 import ResultBox from '../ResultBox';
 import {localeable, LocaleProps} from '../../locale';
+import {FormulaPickerProps} from '../formula/Picker';
 
 const option2value = (item: any) => item.value;
 
@@ -35,6 +36,7 @@ export interface ConditionItemProps extends ThemeProps, LocaleProps {
   searchable?: boolean;
   onChange: (value: ConditionRule, index?: number) => void;
   fieldClassName?: string;
+  formula?: FormulaPickerProps;
 }
 
 export class ConditionItem extends React.Component<ConditionItemProps> {
@@ -239,7 +241,8 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
       fields,
       config,
       classnames: cx,
-      disabled
+      disabled,
+      formula
     } = this.props;
     let field = {
       ...config.types[type],
@@ -278,6 +281,7 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
               config.valueTypes || ['value', 'field', 'func', 'formula']
             }
             disabled={disabled}
+            formula={formula}
           />
 
           <span className={cx('CBSeprator')}>~</span>
@@ -295,6 +299,7 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
               config.valueTypes || ['value', 'field', 'func', 'formula']
             }
             disabled={disabled}
+            formula={formula}
           />
         </>
       );
@@ -315,6 +320,7 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
           config.valueTypes || ['value', 'field', 'func', 'formula']
         }
         disabled={disabled}
+        formula={formula}
       />
     );
   }

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

@@ -7,6 +7,7 @@ import DatePicker from '../DatePicker';
 import {SelectWithRemoteOptions as Select} from '../Select';
 import Switch from '../Switch';
 import {localeable, LocaleProps} from '../../locale';
+import {FormulaPicker, FormulaPickerProps} from '../formula/Picker';
 
 export interface ValueProps extends ThemeProps, LocaleProps {
   value: any;
@@ -15,11 +16,12 @@ export interface ValueProps extends ThemeProps, LocaleProps {
   field: FieldSimple;
   op?: OperatorType;
   disabled?: boolean;
+  formula?: FormulaPickerProps;
 }
 
 export class Value extends React.Component<ValueProps> {
   render() {
-    const {
+    let {
       classnames: cx,
       field,
       value,
@@ -27,11 +29,22 @@ export class Value extends React.Component<ValueProps> {
       op,
       translate: __,
       data,
-      disabled
+      disabled,
+      formula
     } = this.props;
     let input: JSX.Element | undefined = undefined;
-
-    if (field.type === 'text') {
+    if (formula) {
+      // 如果配置了 formula 字段，则所有的输入变为 formula 形式
+      formula = Object.assign(formula, {
+        translate: __,
+        classnames: cx,
+        data,
+        value: value ?? field.defaultValue,
+        onChange,
+        disabled
+      });
+      input = <FormulaPicker {...formula} />;
+    } else if (field.type === 'text') {
       input = (
         <InputBox
           value={value ?? field.defaultValue}

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

@@ -15,12 +15,14 @@ import {
 } from '../../utils/helper';
 import {findDOMNode} from 'react-dom';
 import animtion from '../../utils/Animation';
+import {FormulaPickerProps} from '../formula/Picker';
 
 export interface ConditionBuilderProps extends ThemeProps, LocaleProps {
   builderMode?: 'simple' | 'full'; // 简单模式｜完整模式
   fields: Fields;
   funcs?: Funcs;
   showNot?: boolean;
+  showANDOR?: boolean;
   value?: ConditionGroupValue;
   data?: any;
   onChange: (value: ConditionGroupValue) => void;
@@ -28,6 +30,7 @@ export interface ConditionBuilderProps extends ThemeProps, LocaleProps {
   disabled?: boolean;
   searchable?: boolean;
   fieldClassName?: string;
+  formula?: FormulaPickerProps;
 }
 
 export class QueryBuilder extends React.Component<ConditionBuilderProps> {
@@ -202,10 +205,12 @@ export class QueryBuilder extends React.Component<ConditionBuilderProps> {
       onChange,
       value,
       showNot,
+      showANDOR,
       data,
       disabled,
       searchable,
-      builderMode
+      builderMode,
+      formula
     } = this.props;
 
     const normalizedValue = Array.isArray(value?.children)
@@ -236,10 +241,12 @@ export class QueryBuilder extends React.Component<ConditionBuilderProps> {
         fieldClassName={fieldClassName}
         removeable={false}
         onDragStart={this.handleDragStart}
+        showANDOR={showANDOR}
         showNot={showNot}
         data={data}
         disabled={disabled}
         searchable={searchable}
+        formula={formula}
       />
     );
   }

package/src/components/formula/Editor.tsx

@@ -3,13 +3,14 @@
  */
 import React from 'react';
 import {uncontrollable} from 'uncontrollable';
-import {FormulaPlugin, editorFactory} from './plugin';
+import {parse} from 'amis-formula';
 import {doc} from 'amis-formula/dist/doc';
+
+import {FormulaPlugin, editorFactory} from './plugin';
 import FuncList from './FuncList';
 import {VariableList} from './VariableList';
-import {parse} from 'amis-formula';
-import {autobind} from '../../utils/helper';
 import CodeMirrorEditor from '../CodeMirror';
+import {autobind} from '../../utils/helper';
 import {themeable, ThemeProps} from '../../theme';
 import {localeable, LocaleProps} from '../../locale';
 
@@ -17,6 +18,8 @@ export interface VariableItem {
   label: string;
   value?: string;
   children?: Array<VariableItem>;
+  type: '';
+  tag?: string;
   selectMode?: 'tree' | 'tabs';
 }
 
@@ -60,6 +63,10 @@ export interface FormulaEditorProps extends ThemeProps, LocaleProps {
    * 顶部标题，默认为表达式
    */
   header: string;
+
+  variableClassName?: string;
+
+  functionClassName?: string;
 }
 
 export interface FunctionsProps {
@@ -116,7 +123,7 @@ export class FormulaEditor extends React.Component<
     FormulaEditorProps,
     'functions' | 'variables' | 'evalMode'
   > = {
-    functions: this.buildDefaultFunctions(doc),
+    functions: FormulaEditor.buildDefaultFunctions(doc),
     variables: [],
     evalMode: true
   };
@@ -209,18 +216,23 @@ export class FormulaEditor extends React.Component<
       value,
       functions,
       variableMode,
-      classnames: cx
+      translate: __,
+      classnames: cx,
+      variableClassName,
+      functionClassName,
+      classPrefix
     } = this.props;
     const {focused} = this.state;
-
     return (
       <div
         className={cx(`FormulaEditor`, {
           'is-focused': focused
         })}
       >
-        <div className={cx(`FormulaEditor-content`)}>
-          <div className={cx(`FormulaEditor-header`)}>{header ?? '表达式'}</div>
+        <section className={cx(`FormulaEditor-content`)}>
+          <header className={cx(`FormulaEditor-header`)}>
+            {__(header || 'FormulaEditor.title')}
+          </header>
 
           <CodeMirrorEditor
             className={cx('FormulaEditor-editor')}
@@ -230,28 +242,36 @@ export class FormulaEditor extends React.Component<
             editorDidMount={this.handleEditorMounted}
             onFocus={this.handleFocus}
             onBlur={this.handleBlur}
-          ></CodeMirrorEditor>
-        </div>
+          />
+        </section>
 
-        <div className={cx('FormulaEditor-settings')}>
-          {Array.isArray(functions) && functions.length ? (
-            <div>
-              <h3>变量</h3>
+        <section className={cx('FormulaEditor-settings')}>
+          <div className={cx('FormulaEditor-panel')}>
+            <div className={cx('FormulaEditor-panel-header')}>
+              {__('FormulaEditor.variable')}
+            </div>
+            <div className={cx('FormulaEditor-panel-body')}>
               <VariableList
-                className={cx('VariableList')}
+                classPrefix={classPrefix}
+                className={cx(
+                  'FormulaEditor-VariableList',
+                  'FormulaEditor-VariableList-root',
+                  variableClassName
+                )}
                 selectMode={variableMode}
                 data={variables}
                 onSelect={this.handleVariableSelect}
               />
             </div>
-          ) : null}
-          {Array.isArray(variables) && variables.length ? (
-            <div>
-              <h3>函数</h3>
-              <FuncList data={functions} onSelect={this.handleFunctionSelect} />
-            </div>
-          ) : null}
-        </div>
+          </div>
+
+          <FuncList
+            className={functionClassName}
+            title={__('FormulaEditor.function')}
+            data={functions}
+            onSelect={this.handleFunctionSelect}
+          />
+        </section>
       </div>
     );
   }