amis 1.10.0 → 1.10.1

package/src/Schema.ts

@@ -146,6 +146,7 @@ export type SchemaType =
   | 'color'
   | 'container'
   | 'crud'
+  | 'crud2'
   | 'custom'
   | 'date'
   | 'static-date' // 这个几个跟表单项同名，再form下面用必须带前缀 static-

package/src/components/Checkbox.tsx

@@ -74,7 +74,12 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
       labelClassName,
       optionType
     } = this.props;
-
+    const _checked = typeof checked !== 'undefined'
+      ? checked
+      : typeof value === 'undefined'
+      ? value
+      : value == trueValue;
+    
     return (
       <label
         className={cx(`Checkbox Checkbox--${type}`, className, {
@@ -82,9 +87,11 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
           // 'Checkbox--partial': partial
           [`Checkbox--${size}`]: size,
           'Checkbox--button': optionType === 'button',
-          'Checkbox--button--checked': optionType === 'button' && checked,
+          'Checkbox--button--checked': optionType === 'button' && _checked,
           'Checkbox--button--disabled--unchecked':
-            optionType === 'button' && disabled && !checked
+            optionType === 'button' && disabled && !_checked,
+          'Checkbox--button--disabled--checked':
+            optionType === 'button' && disabled && _checked
         })}
       >
         <input

package/src/components/Range.tsx

@@ -530,13 +530,20 @@ export class Range extends React.Component<RangeItemProps, any> {
           {/* 刻度标记 */}
           {marks && (
             <div className={cx('InputRange-marks')}>
-              {keys(marks).map((key: keyof MarksType) => (
-                <div key={key} style={{left: this.getOffsetLeft(key)}}>
-                  <span style={(marks[key] as any)?.style}>
-                    {(marks[key] as any)?.label || marks[key]}
-                  </span>
-                </div>
-              ))}
+              {keys(marks).map((key: keyof MarksType) => {
+                const offsetLeft = this.getOffsetLeft(key);
+                if (/^\d+%$/.test(offsetLeft)) {
+                  return (
+                    <div key={key} style={{left: offsetLeft}}>
+                      <span style={(marks[key] as any)?.style}>
+                        {(marks[key] as any)?.label || marks[key]}
+                      </span>
+                    </div>
+                  )
+                } else {
+                  return null;
+                }
+              })}
             </div>
           )}
         </div>

package/src/components/ResultBox.tsx

@@ -27,6 +27,7 @@ export interface ResultBoxProps
   hasDropDownArrow?: boolean;
   maxTagCount?: number;
   overflowTagPopover?: TooltipObject;
+  actions?: JSX.Element | JSX.Element[];
 }
 
 export class ResultBox extends React.Component<ResultBoxProps> {
@@ -59,6 +60,7 @@ export class ResultBox extends React.Component<ResultBoxProps> {
   @autobind
   clearValue(e: React.MouseEvent<any>) {
     e.preventDefault();
+    e.stopPropagation();
     this.props.onClear && this.props.onClear(e);
     this.props.onResultChange && this.props.onResultChange([]);
   }
@@ -210,6 +212,7 @@ export class ResultBox extends React.Component<ResultBoxProps> {
       borderMode,
       useMobileUI,
       hasDropDownArrow,
+      actions,
       onClear,
       ...rest
     } = this.props;
@@ -236,63 +239,71 @@ export class ResultBox extends React.Component<ResultBoxProps> {
         onFocus={allowInput ? undefined : onFocus}
         onBlur={allowInput ? undefined : onBlur}
       >
-        {Array.isArray(result) && result.length ? (
-          this.renderMultipeTags(result)
-        ) : result && !Array.isArray(result) ? (
-          <span className={cx('ResultBox-singleValue')}>
-            {isPlainObject(result) ? itemRender(result) : result}
-          </span>
-        ) : allowInput && !disabled ? null : (
-          <span className={cx('ResultBox-placeholder')}>
-            {__(placeholder || 'placeholder.noData')}
-          </span>
-        )}
+        <div className={cx('ResultBox-value-wrap')}>
+          {Array.isArray(result) && result.length ? (
+            this.renderMultipeTags(result)
+          ) : result && !Array.isArray(result) ? (
+            <span className={cx('ResultBox-singleValue')}>
+              {isPlainObject(result) ? itemRender(result) : result}
+            </span>
+          ) : allowInput && !disabled ? null : (
+            <span className={cx('ResultBox-placeholder')}>
+              {__(placeholder || 'placeholder.noData')}
+            </span>
+          )}
 
-        {allowInput && !disabled ? (
-          <Input
-            {...omit(rest, omitPropsList)}
-            onKeyPress={onKeyPress}
-            ref={this.inputRef}
-            value={value || ''}
-            onChange={this.handleChange}
-            placeholder={__(
-              Array.isArray(result) && result.length
-                ? inputPlaceholder
-                : result
-                ? ''
-                : placeholder
-            )}
-            onFocus={this.handleFocus}
-            onBlur={this.handleBlur}
-          />
-        ) : null}
+          {allowInput && !disabled ? (
+            <Input
+              {...omit(rest, omitPropsList)}
+              className={cx('ResultBox-value-input')}
+              onKeyPress={onKeyPress}
+              ref={this.inputRef}
+              value={value || ''}
+              onChange={this.handleChange}
+              placeholder={__(
+                Array.isArray(result) && result.length
+                  ? inputPlaceholder
+                  : result
+                  ? ''
+                  : placeholder
+              )}
+              onFocus={this.handleFocus}
+              onBlur={this.handleBlur}
+            />
+          ) : null}
 
-        {children}
+          {children}
+        </div>
 
-        {clearable &&
-        !disabled &&
-        (Array.isArray(result) ? result.length : result) ? (
-          <a
-            onClick={this.clearValue}
-            className={cx('ResultBox-clear', {
-              'ResultBox-clear-with-arrow': hasDropDownArrow
-            })}
-          >
-            <div className={cx('ResultBox-clear-wrap')}>
-              <Icon icon="input-clear" className="icon" />
-            </div>
-          </a>
-        ) : null}
-        {hasDropDownArrow && !mobileUI && (
-          <span className={cx('ResultBox-pc-arrow')}>
-            <Icon icon="right-arrow-bold" className="icon" />
-          </span>
-        )}
-        {!allowInput && mobileUI ? (
-          <span className={cx('ResultBox-arrow')}>
-            <Icon icon="caret" className="icon" />
-          </span>
-        ) : null}
+        <div className={cx('ResultBox-actions')}>
+          {clearable &&
+          !disabled &&
+          (Array.isArray(result) ? result.length : result) ? (
+            <a
+              onClick={this.clearValue}
+              className={cx('ResultBox-clear', {
+                'ResultBox-clear-with-arrow': hasDropDownArrow
+              })}
+            >
+              <div className={cx('ResultBox-clear-wrap')}>
+                <Icon icon="input-clear" className="icon" />
+              </div>
+            </a>
+          ) : null}
+
+          {actions}
+
+          {hasDropDownArrow && !mobileUI && (
+            <span className={cx('ResultBox-pc-arrow')}>
+              <Icon icon="right-arrow-bold" className="icon" />
+            </span>
+          )}
+          {!allowInput && mobileUI ? (
+            <span className={cx('ResultBox-arrow')}>
+              <Icon icon="caret" className="icon" />
+            </span>
+          ) : null}
+        </div>
       </div>
     );
   }

package/src/components/Select.tsx

@@ -7,6 +7,7 @@
 
 import {uncontrollable} from 'uncontrollable';
 import React from 'react';
+import merge from 'lodash/merge';
 import isInteger from 'lodash/isInteger';
 import omit from 'lodash/omit';
 import VirtualList from './virtual-list';
@@ -411,7 +412,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
       inputValue: '',
       highlightedIndex: -1,
       selection: value2array(props.value, props),
-      itemHeight: 35,
+      itemHeight: 32 /** Select选项高度保持一致 */,
       pickerSelectItem: ''
     };
   }
@@ -726,7 +727,9 @@ export class Select extends React.Component<SelectProps, SelectState> {
 
   @autobind
   menuItemRef(ref: any) {
-    ref && this.setState({itemHeight: ref.offsetHeight});
+    if (ref && typeof ref.offsetHeight === 'number' && ref > 0) {
+      this.setState({itemHeight: ref.offsetHeight});
+    }
   }
 
   renderValue({inputValue, isOpen}: ControllerStateAndHelpers<any>) {
@@ -944,7 +947,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
       hideSelected,
       renderMenu,
       mobileClassName,
-      virtualThreshold = 200,
+      virtualThreshold = 100,
       useMobileUI = false
     } = this.props;
     const {selection} = this.state;
@@ -958,7 +961,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
           })
         : options.concat()
     ).filter((option: Option) => !option.hidden && option.visible !== false);
-
+    const enableVirtualRender =
+      filtedOptions.length && filtedOptions.length > virtualThreshold;
     const selectionValues = selection.map(select => select[valueField]);
     if (multiple && checkAll) {
       const optionsValues = (checkAllBySearch ? filtedOptions : options).map(
@@ -998,7 +1002,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
             item,
             disabled: item.disabled
           })}
-          style={style}
+          style={merge(style, enableVirtualRender ? {width: '100%'} : {})}
           className={cx(`Select-option`, {
             'is-disabled': item.disabled,
             'is-highlight': highlightedIndex === index,
@@ -1105,8 +1109,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
       <div
         ref={this.menu}
         className={cx('Select-menu', {
-          'Select--longlist':
-            filtedOptions.length && filtedOptions.length > virtualThreshold,
+          'Select--longlist': enableVirtualRender,
           'is-mobile': mobileUI
         })}
       >

package/src/components/Steps.tsx

@@ -35,6 +35,8 @@ export type StepSchema = {
   description?: string | JSX.Element;
 
   status?: StepStatus;
+
+  iconClassName?: string;
 } & Omit<BaseSchema, 'type'>;
 
 export interface StepsSchema extends BaseSchema {
@@ -73,7 +75,7 @@ export interface StepsSchema extends BaseSchema {
   /**
    * 标签放置位置
    */
-   labelPlacement?: 'horizontal' | 'vertical';
+  labelPlacement?: 'horizontal' | 'vertical';
 }
 export interface StepsProps extends ThemeProps {
   steps: StepSchema[];
@@ -137,27 +139,49 @@ export function Steps(props: StepsProps) {
 
   const mobileUI = useMobileUI && isMobile();
   return (
-    <ul className={cx( // 纵向步骤条暂时不支持labelPlacement属性
-      'Steps',
-      `Steps--Placement-${(progressDot || (labelPlacement === 'vertical' && mode != 'vertical')) ? 'vertical' : ''}`,
-      `Steps--${progressDot ? 'ProgressDot' : ''}`, 
-      `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, `StepsItem-${progressDot ? 'ProgressDot' : ''}`)}
+            className={cx(
+              'StepsItem',
+              `is-${stepStatus}`,
+              step.className,
+              `StepsItem-${progressDot ? 'ProgressDot' : ''}`
+            )}
           >
             <div className={cx('StepsItem-container')}>
-                <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-containerTail')}></div>
+              {progressDot ? (
+                <div className={cx('StepsItem-containerProgressDot')}></div>
+              ) : (
+                <div
+                  className={cx(
+                    'StepsItem-containerIcon',
+                    i < current && 'is-success'
+                  )}
+                >
+                  <span className={cx('StepsItem-icon', step.iconClassName)}>
+                    {icon ? <Icon icon={icon} className="icon" /> : i + 1}
+                  </span>
+                </div>
+              )}
               <div className={cx('StepsItem-containerWrapper')}>
                 <div className={cx('StepsItem-body')}>
                   <div
@@ -167,10 +191,28 @@ export function Steps(props: StepsProps) {
                       i < current && 'is-success'
                     )}
                   >
-                    <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>
+                    <span
+                      className={cx('StepsItem-ellText')}
+                      title={String(step.title)}
+                    >
+                      {step.title}
+                    </span>
+                    {step.subTitle && (
+                      <span
+                        className={cx(
+                          'StepsItem-subTitle',
+                          'StepsItem-ellText'
+                        )}
+                        title={String(step.subTitle)}
+                      >
+                        {step.subTitle}
+                      </span>
+                    )}
                   </div>
-                  <div className={cx('StepsItem-description', 'StepsItem-ellText')} title={String(step.description)}>
+                  <div
+                    className={cx('StepsItem-description', 'StepsItem-ellText')}
+                    title={String(step.description)}
+                  >
                     <span>{step.description}</span>
                   </div>
                 </div>

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

@@ -11,20 +11,28 @@ import {
   spliceTree,
   getTree,
   mapTree,
-  guid
+  guid,
+  noop
 } from '../../utils/helper';
 import animtion from '../../utils/Animation';
 import {FormulaPickerProps} from '../formula/Picker';
+import {PickerContainer} from '../PickerContainer';
+import {ResultBox} from '../ResultBox';
+import {Icon} from '../icons';
 
 export interface ConditionBuilderProps extends ThemeProps, LocaleProps {
   builderMode?: 'simple' | 'full'; // 简单模式｜完整模式
+  embed?: boolean;
+  pickerIcon?: JSX.Element;
+  placeholder?: string;
+  title?: string;
   fields: Fields;
   funcs?: Funcs;
   showNot?: boolean;
   showANDOR?: boolean;
   value?: ConditionGroupValue;
   data?: any;
-  onChange: (value: ConditionGroupValue) => void;
+  onChange: (value?: ConditionGroupValue) => void;
   config?: Config;
   disabled?: boolean;
   searchable?: boolean;
@@ -34,7 +42,14 @@ export interface ConditionBuilderProps extends ThemeProps, LocaleProps {
   renderEtrValue?: any;
 }
 
-export class QueryBuilder extends React.Component<ConditionBuilderProps> {
+export interface ConditionBuilderState {
+  tmpValue: ConditionGroupValue;
+}
+
+export class QueryBuilder extends React.Component<
+  ConditionBuilderProps,
+  ConditionBuilderState
+> {
   config = {...defaultConfig, ...this.props.config};
 
   dragTarget?: HTMLElement;
@@ -197,14 +212,33 @@ export class QueryBuilder extends React.Component<ConditionBuilderProps> {
     delete this.ghost;
   }
 
-  render() {
+  @autobind
+  handleClear() {
+    this.props.onChange();
+  }
+
+  @autobind
+  highlightValue(value: ConditionGroupValue) {
+    const {classnames: cx} = this.props;
+    const html = {
+      __html: `<span class="label label-info">已配置</span>`
+    };
+
+    return (
+      <div className={cx('CPGroup-result')} dangerouslySetInnerHTML={html} />
+    );
+  }
+
+  renderBody(
+    onChange: (value: ConditionGroupValue) => void,
+    value?: ConditionGroupValue,
+    popOverContainer?: any
+  ) {
     const {
       classnames: cx,
       fieldClassName,
       fields,
       funcs,
-      onChange,
-      value,
       showNot,
       showANDOR,
       data,
@@ -212,7 +246,6 @@ export class QueryBuilder extends React.Component<ConditionBuilderProps> {
       searchable,
       builderMode,
       formula,
-      popOverContainer,
       renderEtrValue
     } = this.props;
 
@@ -250,11 +283,77 @@ export class QueryBuilder extends React.Component<ConditionBuilderProps> {
         disabled={disabled}
         searchable={searchable}
         formula={formula}
-        popOverContainer={popOverContainer}
         renderEtrValue={renderEtrValue}
+        popOverContainer={popOverContainer}
       />
     );
   }
+
+  render() {
+    const {
+      classnames: cx,
+      placeholder,
+      embed = true,
+      pickerIcon,
+      locale,
+      translate,
+      classPrefix,
+      onChange: onFinalChange,
+      value,
+      title,
+      disabled,
+      popOverContainer
+    } = this.props;
+
+    if (embed) {
+      return this.renderBody(onFinalChange, value, popOverContainer);
+    }
+
+    return (
+      <PickerContainer
+        classnames={cx}
+        classPrefix={classPrefix}
+        translate={translate}
+        locale={locale}
+        onConfirm={onFinalChange}
+        value={value}
+        size={'md'}
+        popOverContainer={popOverContainer}
+        bodyRender={(params: {
+          value: ConditionGroupValue;
+          onChange: (value: ConditionGroupValue) => void;
+        }) => this.renderBody(params.onChange, params.value)}
+        title={title}
+      >
+        {({onClick, isOpened}) => (
+          <ResultBox
+            classnames={cx}
+            classPrefix={classPrefix}
+            translate={translate}
+            locale={locale}
+            className={cx('CBGroup-result', {'is-active': isOpened})}
+            allowInput={false}
+            clearable={true}
+            result={value}
+            itemRender={this.highlightValue}
+            onResultChange={noop}
+            onClear={this.handleClear}
+            disabled={disabled}
+            borderMode={'full'}
+            placeholder={placeholder}
+            actions={
+              pickerIcon && (
+                <span className={cx('CBPicker-trigger')} onClick={onClick}>
+                  {pickerIcon}
+                </span>
+              )
+            }
+            onResultClick={pickerIcon ? undefined : onClick}
+          ></ResultBox>
+        )}
+      </PickerContainer>
+    );
+  }
 }
 
 export default themeable(

package/src/components/formula/Picker.tsx

@@ -174,12 +174,6 @@ export class FormulaPicker extends React.Component<
     this.setState({value}, () => this.handleConfirm());
   }
 
-  @autobind
-  handleInputGroupChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const onChange = this.props.onChange;
-    onChange && onChange(e.currentTarget.value);
-  }
-
   @autobind
   handleEditorChange(value: string) {
     this.setState({
@@ -248,10 +242,11 @@ export class FormulaPicker extends React.Component<
     const {translate: __} = this.props;
 
     try {
-      parse(value, {
-        evalMode: this.props.evalMode,
-        allowFilter: false
-      });
+      value &&
+        parse(value, {
+          evalMode: this.props.evalMode,
+          allowFilter: false
+        });
 
       return true;
     } catch (e) {
@@ -380,14 +375,30 @@ export class FormulaPicker extends React.Component<
             )}
             {mode === 'input-group' && (
               <>
-                <Input
-                  className={cx('FormulaPicker-input')}
-                  onChange={this.handleInputGroupChange}
-                  placeholder={allowInput ? placeholder : ''}
-                  autoComplete="off"
+                <ResultBox
+                  className={cx(
+                    'FormulaPicker-input',
+                    isOpened ? 'is-active' : '',
+                    !!isError ? 'is-error' : ''
+                  )}
+                  allowInput={allowInput}
+                  clearable={clearable}
                   value={value}
+                  result={
+                    allowInput
+                      ? void 0
+                      : FormulaEditor.highlightValue(
+                          value,
+                          variables!,
+                          this.props.evalMode
+                        )
+                  }
+                  itemRender={this.renderFormulaValue}
+                  onResultChange={noop}
+                  onChange={this.handleInputChange}
                   disabled={disabled}
-                  readOnly={!allowInput}
+                  borderMode={borderMode}
+                  placeholder={placeholder}
                 />
 
                 <a