amis 1.9.0-beta.12 → 1.9.0-beta.15

package/src/components/Rating.tsx

@@ -9,6 +9,9 @@ import cx from 'classnames';
 import {ClassNamesFn, themeable} from '../theme';
 
 import {isObject} from '../utils/helper';
+import {
+  validations
+} from '../utils/validations';
 import {Icon} from './icons';
 
 export type textPositionType = 'left' | 'right';
@@ -112,7 +115,8 @@ export class Rating extends React.Component<RatingProps, any> {
   }
 
   sortKeys(map: {[propName: number]: string}) {
-    return Object.keys(map).sort(
+    // 需验证 key 是否是数字，需要过滤掉非数字key，如 $$id
+    return Object.keys(map).filter(item => validations.isNumeric({}, item)).sort(
       (a: number | string, b: number | string) => Number(a) - Number(b)
     );
   }
@@ -137,10 +141,13 @@ export class Rating extends React.Component<RatingProps, any> {
       const showKey = keys.filter(item => Number(item) < value).length;
 
       const showColor = keys[showKey] !== undefined && colors[keys[showKey]];
-      showColor &&
-        this.setState({
-          showColor
-        });
+      
+      // 取最大 key 的颜色，避免如下情况：colors 只设置了 1-4，value 为 5，导致取不到颜色而无法显示
+      const lastColor = keys.length && colors[keys[keys.length - 1]];
+
+      this.setState({
+        showColor: showColor || lastColor || ''
+      });
     } else if (colors && typeof colors === 'string') {
       this.setState({
         showColor: colors
@@ -153,10 +160,10 @@ export class Rating extends React.Component<RatingProps, any> {
       const showText =
         keys[showKey] !== undefined &&
         texts[keys[showKey] as keyof typeof texts];
-      showText &&
-        this.setState({
-          showText
-        });
+
+      this.setState({
+        showText: showText || ''
+      });
     }
   }
 

package/src/components/Select.tsx

@@ -883,7 +883,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
           ) : null}
 
           {renderMenu ? (
-            checkAll || multiple ? (
+            multiple ? (
               <Checkbox
                 checked={checked}
                 trueValue={item.value}
@@ -913,7 +913,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
                 index
               })
             )
-          ) : checkAll || multiple ? (
+          ) : multiple ? (
             <Checkbox
               checked={checked}
               trueValue={item.value}
@@ -1101,7 +1101,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
         isOpen={this.state.isOpen}
         inputValue={inputValue}
         onChange={
-          /*展示 Checkbox 的时候，会出发多次 onChange 原因待查*/ multiple ||
+          /*展示 Checkbox 的时候，会出发多次 onChange 原因待查*/ multiple &&
           checkAll
             ? noop
             : this.handleChange

package/src/components/Tag.tsx

@@ -0,0 +1,179 @@
+/**
+ * @file Tag
+ */
+
+import React from 'react';
+import {themeable, ThemeProps} from '../theme';
+import {Icon, getIcon} from './icons';
+import {generateIcon} from '../utils/icon';
+import {autobind, noop} from '../utils/helper';
+
+export interface TagProps extends ThemeProps {
+  style: React.CSSProperties;
+  color?: string;
+  label?: string | React.ReactNode;
+  displayMode?: 'normal' | 'rounded' | 'status';
+  icon?: string | React.ReactNode;
+  closable?: boolean;
+  disabled?: boolean;
+  closeIcon?: string | React.ReactNode;
+  onClose?: (e: React.MouseEvent) => void;
+}
+
+export interface CheckableTagProps extends TagProps {
+  onClick?: (e: React.MouseEvent) => void;
+  onChange?: (checked: boolean) => void;
+  checked?: boolean;
+}
+
+export type TagLevel =
+  | 'inactive'
+  | 'active'
+  | 'success'
+  | 'processing'
+  | 'error'
+  | 'warning';
+
+const PRESET_COLOR: TagLevel[] = [
+  'inactive',
+  'active',
+  'success',
+  'processing',
+  'error',
+  'warning'
+];
+
+export class Tag extends React.Component<TagProps> {
+  static defaultProps: Partial<TagProps> = {
+    displayMode: 'normal'
+  };
+
+  renderCloseIcon() {
+    const {closeIcon, classnames: cx, closable} = this.props;
+
+    if (!closable) {
+      return null;
+    }
+
+    const icon =
+      typeof closeIcon === 'string' ? (
+        getIcon(closeIcon) ? (
+          <Icon icon={closeIcon} className="icon" />
+        ) : (
+          generateIcon(cx, closeIcon, 'Icon')
+        )
+      ) : React.isValidElement(closeIcon) ? (
+        closeIcon
+      ) : (
+        <Icon icon="close" className="icon" />
+      );
+
+    return (
+      <span className={cx(`Tag--close`)} onClick={this.handleClose}>
+        {icon}
+      </span>
+    );
+  }
+
+  @autobind
+  handleClose(e: React.MouseEvent<HTMLElement>) {
+    const {onClose} = this.props;
+    e.stopPropagation();
+    onClose?.(e);
+  }
+
+  render() {
+    const {
+      children,
+      classnames: cx,
+      className,
+      displayMode,
+      disabled,
+      color,
+      icon,
+      style,
+      label
+    } = this.props;
+
+    const isPresetColor =
+      color && PRESET_COLOR.indexOf(color as TagLevel) !== -1;
+
+    const customColor = color && !isPresetColor ? color : undefined;
+
+    const tagStyle = {
+      backgroundColor: displayMode === 'normal' ? customColor : undefined,
+      borderColor: displayMode === 'rounded' ? customColor : undefined,
+      color: displayMode === 'rounded' ? customColor : undefined,
+      ...style
+    };
+
+    const prevIcon = displayMode === 'status' && (
+      <span className={cx('Tag--prev')}>
+        {typeof icon === 'string' ? (
+          getIcon(icon) ? (
+            <Icon icon={icon} className="icon" />
+          ) : (
+            generateIcon(cx, icon, 'Icon')
+          )
+        ) : React.isValidElement(icon) ? (
+          icon
+        ) : (
+          <Icon icon="dot" className="icon" />
+        )}
+      </span>
+    );
+
+    return (
+      <span
+        className={cx('Tag', `Tag--${displayMode}`, className, {
+          [`Tag--${displayMode}--${color}`]: isPresetColor,
+          [`Tag--${displayMode}--hasColor`]: color,
+          [`Tag--disabled`]: disabled
+        })}
+        style={tagStyle}
+      >
+        {prevIcon}
+        {label || children}
+        {this.renderCloseIcon()}
+      </span>
+    );
+  }
+}
+
+class CheckableTagComp extends React.Component<CheckableTagProps> {
+  @autobind
+  handleClick(e: React.MouseEvent) {
+    const {onChange, onClick, checked} = this.props;
+
+    onChange?.(!checked);
+    onClick?.(e);
+  }
+
+  render() {
+    const {
+      classnames: cx,
+      className,
+      disabled,
+      label,
+      children,
+      checked,
+      style = {}
+    } = this.props;
+
+    return (
+      <span
+        className={cx(className, 'Tag', 'Tag--checkable', {
+          'Tag--checkable--checked': checked,
+          'Tag--checkable--disabled': disabled
+        })}
+        onClick={disabled ? noop : this.handleClick}
+        style={style}
+      >
+        {label || children}
+      </span>
+    );
+  }
+}
+
+export const CheckableTag = themeable(CheckableTagComp);
+export default themeable(Tag);

package/src/components/TooltipWrapper.tsx

@@ -92,9 +92,13 @@ export interface TooltipWrapperProps {
   rootClose: boolean;
   overlay?: any;
   delay: number;
-  theme?: string;
+  tooltipTheme?: string;
   tooltipClassName?: string;
   style?: React.CSSProperties;
+  /**
+   * 显示&隐藏时触发
+   */
+   onVisibleChange?: (visible: boolean) => void;
 }
 
 interface TooltipWrapperState {
@@ -151,6 +155,10 @@ export class TooltipWrapper extends React.Component<
   show() {
     this.setState({
       show: true
+    }, () => {
+      if (this.props.onVisibleChange) {
+        this.props.onVisibleChange(true);
+      }
     });
   }
 
@@ -159,6 +167,10 @@ export class TooltipWrapper extends React.Component<
     this.moutned &&
       this.setState({
         show: false
+      }, () => {
+        if (this.props.onVisibleChange) {
+          this.props.onVisibleChange(false);
+        }
       });
   }
 
@@ -262,6 +274,7 @@ export class TooltipWrapper extends React.Component<
       tooltipClassName: props.tooltipClassName,
       style: props.style,
       mouseLeaveDelay: props.delay,
+      tooltipTheme: props.tooltipTheme as 'dark' | 'light',
       ...(typeof props.tooltip === 'string'
         ? {content: props.tooltip}
         : props.tooltip)

package/src/components/TransferDropDown.tsx

@@ -15,6 +15,7 @@ export interface TransferDropDownProps extends TransferProps {
   borderMode?: 'full' | 'half' | 'none';
   useMobileUI?: boolean;
   popOverContainer?: any;
+  itemRender: (value: any) => JSX.Element | string;
 }
 
 export class TransferDropDown extends Transfer<TransferDropDownProps> {
@@ -22,6 +23,7 @@ export class TransferDropDown extends Transfer<TransferDropDownProps> {
     const {
       classnames: cx,
       value,
+      itemRender,
       translate: __,
       disabled,
       clearable,
@@ -108,6 +110,7 @@ export class TransferDropDown extends Transfer<TransferDropDownProps> {
             disabled={disabled}
             clearable={clearable}
             ref={ref}
+            itemRender={itemRender}
             useMobileUI={useMobileUI}
           >
             {!mobileUI ? (

package/src/components/formula/VariableList.tsx

@@ -15,6 +15,7 @@ import type {TabsMode} from '../Tabs';
 export interface VariableListProps extends ThemeProps {
   className?: string;
   itemClassName?: string;
+  value?: any;
   data: Array<VariableItem>;
   selectMode?: 'list' | 'tree' | 'tabs';
   tabsMode?: TabsMode;

package/src/components/icons.tsx

@@ -84,6 +84,7 @@ import FunctionIcon from '../icons/function.svg';
 import InputClearIcon from '../icons/input-clear.svg';
 import SliderHandleIcon from '../icons/slider-handle-icon.svg';
 import TrashIcon from '../icons/trash.svg';
+import DotIcon from '../icons/dot.svg';
 
 // 兼容原来的用法，后续不直接试用。
 
@@ -194,6 +195,7 @@ registerIcon('cloud-upload', CloudUploadIcon);
 registerIcon('image', ImageIcon);
 registerIcon('refresh', RefreshIcon);
 registerIcon('trash', TrashIcon);
+registerIcon('dot', DotIcon);
 
 export function Icon({
   icon,

package/src/components/index.tsx

@@ -58,6 +58,9 @@ import TableSelection from './TableSelection';
 import TreeSelection from './TreeSelection';
 import AssociatedSelection from './AssociatedSelection';
 import PullRefresh from './PullRefresh';
+import Table from './table';
+import SchemaVariableListPicker from './schema-editor/SchemaVariableListPicker';
+import SchemaVariableList from './schema-editor/SchemaVariableList';
 
 export {
   NotFound,
@@ -119,5 +122,8 @@ export {
   NumberInput,
   ArrayInput,
   AnchorNav,
-  PullRefresh
+  PullRefresh,
+  Table,
+  SchemaVariableListPicker,
+  SchemaVariableList
 };

package/src/components/schema-editor/Array.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import {autobind} from '../../utils/helper';
+import {Icon} from '../icons';
+import {SchemaEditorItemCommon} from './Common';
+import {SchemaEditorItem} from './Item';
+
+export class SchemaEditorItemArray extends SchemaEditorItemCommon {
+  state = {
+    collapsed: false
+  };
+
+  @autobind
+  toggleCollapsed() {
+    this.setState({
+      collapsed: !this.state.collapsed
+    });
+  }
+
+  @autobind
+  handleItemsChange(items: any) {
+    const value: any = {
+      ...this.props.value,
+      type: 'array',
+      items
+    };
+    this.props.onChange?.(value);
+  }
+
+  renderItems() {
+    const {
+      classnames: cx,
+      value,
+      renderExtraProps,
+      locale,
+      translate: __,
+      classPrefix,
+      disabled,
+      showInfo,
+      types,
+      onTypeChange
+    } = this.props;
+    const items = value?.items || {
+      type: 'string'
+    };
+
+    return (
+      <div
+        className={cx('SchemaEditorProps SchemaEditorArrayProps', {
+          'SchemaEditorProps--depth': showInfo !== false
+        })}
+      >
+        <SchemaEditorItem
+          types={types}
+          onTypeChange={onTypeChange}
+          prefix={
+            <div className={cx('SchemaEditor-itemsLabel')}>
+              {__('JSONSchema.array_items')}
+            </div>
+          }
+          value={items as any}
+          onChange={this.handleItemsChange}
+          renderExtraProps={renderExtraProps}
+          locale={locale}
+          translate={__}
+          classnames={cx}
+          classPrefix={classPrefix}
+          disabled={disabled || !!(items as any)?.$ref}
+        />
+      </div>
+    );
+  }
+
+  render() {
+    const {classnames: cx, showInfo, disabled} = this.props;
+
+    return (
+      <div className={cx('SchemaEditorItem SchemaEditorArray')}>
+        {showInfo !== false ? (
+          <>
+            <a
+              className={cx('SchemaEditor-caret', {
+                'is-collapsed': this.state.collapsed
+              })}
+              onClick={this.toggleCollapsed}
+            >
+              <Icon icon="caret" className="icon" />
+            </a>
+            {this.renderCommon()}
+          </>
+        ) : null}
+        {this.state.collapsed ? null : this.renderItems()}
+      </div>
+    );
+  }
+}

package/src/components/schema-editor/Common.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import {LocaleProps} from '../../locale';
+import {ThemeProps} from '../../theme';
+import type {JSONSchema} from '../../utils/DataScope';
+import {autobind} from '../../utils/helper';
+import Checkbox from '../Checkbox';
+import InputBox from '../InputBox';
+import Select from '../Select';
+
+export interface SchemaEditorItemCommonProps extends LocaleProps, ThemeProps {
+  value?: JSONSchema;
+  onChange: (value: JSONSchema) => void;
+  types: Array<{
+    label: string;
+    value: string;
+    [propName: string]: any;
+  }>;
+  onTypeChange?: (
+    type: string,
+    value: JSONSchema,
+    origin?: JSONSchema
+  ) => JSONSchema | void;
+  disabled?: boolean;
+  required?: boolean;
+  onRequiredChange?: (value: boolean) => void;
+  typeMutable?: boolean;
+  showInfo?: boolean;
+  renderExtraProps?: (
+    value: JSONSchema,
+    onChange: (value: JSONSchema) => void
+  ) => JSX.Element;
+  prefix?: JSX.Element;
+  affix?: JSX.Element;
+}
+
+export class SchemaEditorItemCommon<
+  P extends SchemaEditorItemCommonProps = SchemaEditorItemCommonProps,
+  S = any
+> extends React.Component<P, S> {
+  @autobind
+  handleTypeChange(type: any) {
+    const {value, onChange, onTypeChange} = this.props;
+    let newValue: any = {
+      type
+    };
+
+    newValue = onTypeChange?.(type, newValue, value) ?? newValue;
+    onChange?.(newValue);
+  }
+
+  @autobind
+  handleDescriptionChange(description: string) {
+    const {value, onChange} = this.props;
+    onChange?.({
+      ...value,
+      description
+    });
+  }
+
+  @autobind
+  handleExtraPropsChange(newValue: JSONSchema) {
+    const {onChange} = this.props;
+    onChange?.({
+      ...newValue
+    });
+  }
+
+  // @autobind
+  // handleSettingClick() {}
+
+  renderCommon() {
+    const {
+      value,
+      translate: __,
+      typeMutable,
+      disabled,
+      classnames: cx,
+      required,
+      onRequiredChange,
+      renderExtraProps,
+      prefix,
+      affix,
+      types
+    } = this.props;
+
+    return (
+      <>
+        {prefix}
+
+        <Select
+          options={types}
+          className={cx('SchemaEditor-type')}
+          value={value?.$ref || value?.type || 'string'}
+          onChange={this.handleTypeChange}
+          clearable={false}
+          disabled={disabled || typeMutable === false}
+          simpleValue
+        />
+
+        {onRequiredChange ? (
+          <Checkbox
+            className={cx('SchemaEditor-required')}
+            label={__('Required')}
+            value={required}
+            onChange={onRequiredChange}
+            disabled={disabled || typeMutable === false}
+          />
+        ) : null}
+
+        <InputBox
+          className={cx('SchemaEditor-description')}
+          value={value?.description || ''}
+          onChange={this.handleDescriptionChange}
+          placeholder={__('JSONSchema.description')}
+          disabled={disabled}
+        />
+
+        {renderExtraProps?.(value!, this.handleExtraPropsChange)}
+
+        {/* todo 后面扩充详细配置
+         <Button
+          className={cx('SchemaEditor-btn')}
+          onClick={this.handleSettingClick}
+          iconOnly
+        >
+          <Icon icon="setting" className="icon" />
+        </Button> */}
+
+        {affix}
+      </>
+    );
+  }
+
+  render() {
+    const {classnames: cx} = this.props;
+    return <div className={cx('SchemaEditorItem')}>{this.renderCommon()}</div>;
+  }
+}

package/src/components/schema-editor/Item.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {LocaleProps} from '../../locale';
+import {ThemeProps} from '../../theme';
+import type {JSONSchema} from '../../utils/DataScope';
+import {autobind} from '../../utils/helper';
+import Checkbox from '../Checkbox';
+import InputBox from '../InputBox';
+import Select from '../Select';
+import {SchemaEditorItemArray} from './Array';
+import {SchemaEditorItemCommon, SchemaEditorItemCommonProps} from './Common';
+import {SchemaEditorItemObject} from './Object';
+
+export interface SchemaEditorItemProps
+  extends SchemaEditorItemCommonProps,
+    LocaleProps,
+    ThemeProps {}
+
+export class SchemaEditorItem extends React.Component<SchemaEditorItemProps> {
+  render() {
+    const {value} = this.props;
+
+    // 动态Component要用大写开头的才会被识别
+    let Renderer = SchemaEditorItemCommon;
+    switch (value?.type) {
+      case 'object':
+        Renderer = SchemaEditorItemObject as any;
+        break;
+
+      case 'array':
+        Renderer = SchemaEditorItemArray as any;
+        break;
+    }
+
+    return <Renderer {...this.props} />;
+  }
+}