amis 1.4.2-beta.1 → 1.4.2-beta.6

package/src/components/SearchBox.tsx

@@ -54,7 +54,7 @@ export class SearchBox extends React.Component<SearchBoxProps> {
 
   @autobind
   handleCancel() {
-    const {onActiveChange, onChange, onCancel} = this.props;
+    const {onActiveChange, onCancel, onChange} = this.props;
     onActiveChange?.(false);
     onCancel?.();
     onChange?.('');
@@ -62,14 +62,14 @@ export class SearchBox extends React.Component<SearchBoxProps> {
 
   @autobind
   handleChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const {onChange, onSearch, searchImediately} = this.props;
+    const {searchImediately, onChange} = this.props;
     onChange?.(e.currentTarget.value);
     searchImediately && this.lazyEmitSearch();
   }
 
   @autobind
   handleSearch() {
-    const {value, onSearch} = this.props;
+    const {onSearch, value} = this.props;
     onSearch?.(value || '');
   }
 
@@ -84,14 +84,13 @@ export class SearchBox extends React.Component<SearchBoxProps> {
   render() {
     const {
       classnames: cx,
-      value,
       active,
       name,
       className,
-      onChange,
       disabled,
       placeholder,
       mini,
+      value,
       translate: __
     } = this.props;
 

package/src/components/WithRemoteConfig.tsx

@@ -12,7 +12,12 @@ import {withStore} from './WithStore';
 import {EnvContext, RendererEnv} from '../env';
 
 import {flow, Instance, isAlive, types} from 'mobx-state-tree';
-import {buildApi, isEffectiveApi, normalizeApi} from '../utils/api';
+import {
+  buildApi,
+  isEffectiveApi,
+  normalizeApi,
+  normalizeApiResponseData
+} from '../utils/api';
 import {
   isPureVariable,
   resolveVariableAndFilter,
@@ -46,7 +51,7 @@ export const Store = types
         }
 
         if (ret.ok) {
-          const data = ret.data || {};
+          const data = normalizeApiResponseData(ret.data);
           let options = config.adaptor
             ? config.adaptor(data, component.props)
             : data;

package/src/renderers/CRUD.tsx

@@ -282,6 +282,11 @@ export interface CRUDCommonSchema extends BaseSchema {
    * 默认只有当分页数大于 1 是才显示，如果总是想显示请配置。
    */
   alwaysShowPagination?: boolean;
+
+  /**
+   * 开启查询区域，会根据列元素的searchable属性值，自动生成查询条件表单
+   */
+  autoGenerateFilter?: boolean;
 }
 
 export type CRUDCardsSchema = CRUDCommonSchema & {

package/src/renderers/Chart.tsx

@@ -12,7 +12,11 @@ import {
   isPureVariable,
   dataMapping
 } from '../utils/tpl-builtin';
-import {isApiOutdated, isEffectiveApi} from '../utils/api';
+import {
+  isApiOutdated,
+  isEffectiveApi,
+  normalizeApiResponseData
+} from '../utils/api';
 import {ScopedContext, IScopedContext} from '../Scoped';
 import {createObject, findObjectsWithKey} from '../utils/helper';
 import Spinner from '../components/Spinner';
@@ -342,7 +346,7 @@ export class Chart extends React.Component<ChartProps> {
         }
         delete this.reloadCancel;
 
-        const data = result.data || {};
+        const data = normalizeApiResponseData(result.data);
         // 说明返回的是数据接口。
         if (!data.series && this.props.config) {
           const ctx = createObject(this.props.data, data);

package/src/renderers/DropDownButton.tsx

@@ -339,7 +339,7 @@ export default class DropDownButton extends React.Component<
             {rightIconElement}
             {!hideCaret ? (
               <span className={cx('DropDown-caret')}>
-                <Icon icon="ellipsis-v" className="icon" />
+                <Icon icon="caret" className="icon" />
               </span>
             ) : null}
           </button>

package/src/renderers/Link.tsx

@@ -77,12 +77,14 @@ export class LinkCmpt extends React.Component<LinkProps, object> {
 
     let value = getPropValue(this.props);
     const finnalHref = href ? filter(href, data, '| raw') : '';
-    const text = body ? render('body', body) : finnalHref || value || __('link');
+    const text = body
+      ? render('body', body)
+      : finnalHref || value || __('link');
 
     return (
       <Link
         className={className}
-        href={href}
+        href={finnalHref}
         body={text}
         blank={blank}
         disabled={disabled}
@@ -90,8 +92,7 @@ export class LinkCmpt extends React.Component<LinkProps, object> {
         htmlTarget={htmlTarget}
         icon={icon}
         position={position}
-      >
-      </Link>
+      ></Link>
     );
   }
 }

package/src/renderers/Mapping.tsx

@@ -20,7 +20,8 @@ import {
   buildApi,
   isApiOutdated,
   isEffectiveApi,
-  normalizeApi
+  normalizeApi,
+  normalizeApiResponseData
 } from '../utils/api';
 
 /**
@@ -72,7 +73,7 @@ export const Store = StoreNode.named('MappingStore')
           const ret: Payload = yield env.fetcher(api, data);
 
           if (ret.ok) {
-            const data = ret.data || {};
+            const data = normalizeApiResponseData(ret.data);
             (self as any).setMap(data);
           } else {
             throw new Error(ret.msg || 'fetch error');
@@ -175,7 +176,7 @@ export const MappingField = withStore(props =>
       }
     }
 
-    render() {
+    renderSingleValue(key: any, reactKey?: number) {
       const {
         className,
         placeholder,
@@ -185,17 +186,13 @@ export const MappingField = withStore(props =>
         data,
         store
       } = this.props;
-      const map = store.map;
-
-      let key = getPropValue(this.props);
-
       let viewValue: React.ReactNode = (
         <span className="text-muted">{placeholder}</span>
       );
-
-      key = typeof key === 'string' ? key.trim() : key; // trim 一下，干掉一些空白字符。
+      const map = store.map;
       let value: any = undefined;
-
+      // trim 一下，干掉一些空白字符。
+      key = typeof key === 'string' ? key.trim() : key;
       if (
         typeof key !== 'undefined' &&
         map &&
@@ -210,7 +207,26 @@ export const MappingField = withStore(props =>
         viewValue = render('tpl', value);
       }
 
-      return <span className={cx('MappingField', className)}>{viewValue}</span>;
+      return (
+        <span key={`map-${reactKey}`} className={cx('MappingField', className)}>
+          {viewValue}
+        </span>
+      );
+    }
+
+    render() {
+      const mapKey = getPropValue(this.props);
+      if (Array.isArray(mapKey)) {
+        return (
+          <span>
+            {mapKey.map((singleKey: string, index: number) =>
+              this.renderSingleValue(singleKey, index)
+            )}
+          </span>
+        );
+      } else {
+        return this.renderSingleValue(mapKey, 0);
+      }
     }
   }
 );

package/src/renderers/Nav.tsx

@@ -363,7 +363,7 @@ export class Navigation extends React.Component<
             onClick={this.handleClick.bind(this, link)}
             style={{paddingLeft: depth * (parseInt(indentSize as any, 10) ?? 24)}}
           >
-            {!disabled && draggable && links && links.length > 1 ? (
+            {!disabled && draggable ? (
             <div className={cx('Nav-itemDrager')}
               draggable
               onMouseDown={e => {this.toggleLink(link, true); e.stopPropagation()}}
@@ -480,7 +480,7 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
                     env &&
                     env.isCurrentUrl(filter(link.to as string, data))
                   )),
-            __id: guid()
+            __id: link.__id || guid()
           };
 
           item.unfolded =
@@ -659,7 +659,7 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
         <ThemedNavigation
           {...rest}
           loading={loading}
-          links={config || rest.links || []}
+          links={config || []}
           disabled={loading}
           onSelect={this.handleSelect}
           onToggle={this.toggleLink}
@@ -721,7 +721,6 @@ export class NavigationRenderer extends React.Component<RendererProps> {
 
   render() {
     const {...rest} = this.props;
-
     return (
       <ConditionBuilderWithRemoteOptions
         {...rest}

package/src/renderers/SearchBox.tsx

@@ -56,10 +56,17 @@ interface SearchBoxProps
   onQuery?: (query: {[propName: string]: string}) => void;
 }
 
+export interface SearchBoxState {
+  value: string;
+}
+
 @Renderer({
   type: 'search-box'
 })
-export class SearchBoxRenderer extends React.Component<SearchBoxProps> {
+export class SearchBoxRenderer extends React.Component<
+  SearchBoxProps,
+  SearchBoxState
+> {
   static defaultProps = {
     name: 'keywords',
     mini: false,
@@ -68,6 +75,18 @@ export class SearchBoxRenderer extends React.Component<SearchBoxProps> {
 
   static propsList: Array<string> = ['mini', 'searchImediately'];
 
+  constructor(props: SearchBoxProps) {
+    super(props);
+    this.state = {
+      value: getPropValue(props) || ''
+    };
+  }
+
+  @autobind
+  handleChange(value: string) {
+    this.setState({value});
+  }
+
   @autobind
   handleCancel() {
     const name = this.props.name;
@@ -100,7 +119,7 @@ export class SearchBoxRenderer extends React.Component<SearchBoxProps> {
       className
     } = this.props;
 
-    const value = getPropValue(this.props);
+    const value = this.state.value;
 
     return (
       <SearchBox
@@ -109,13 +128,13 @@ export class SearchBoxRenderer extends React.Component<SearchBoxProps> {
         disabled={!onQuery}
         defaultActive={!!value}
         defaultValue={onChange ? undefined : value}
-        value={onChange ? value : undefined}
+        value={value}
         mini={mini}
         searchImediately={searchImediately}
         onSearch={this.handleSearch}
         onCancel={this.handleCancel}
         placeholder={placeholder}
-        onChange={onChange}
+        onChange={this.handleChange}
       />
     );
   }

package/src/store/crud.ts

@@ -21,6 +21,7 @@ import {
 import {Api, Payload, fetchOptions, Action, ApiObject} from '../types';
 import pick from 'lodash/pick';
 import {resolveVariableAndFilter} from '../utils/tpl-builtin';
+import {normalizeApiResponseData} from '../utils/api';
 
 class ServerError extends Error {
   type = 'ServerError';
@@ -228,13 +229,7 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
           }
 
           self.updatedAt = Date.now();
-          let result = json.data;
-
-          if (Array.isArray(result)) {
-            result = {
-              items: result
-            };
-          }
+          let result = normalizeApiResponseData(json.data);
 
           const {
             total,
@@ -384,7 +379,7 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
 
         if (!isEmpty(json.data) || json.ok) {
           self.updateData(
-            json.data,
+            normalizeApiResponseData(json.data),
             {
               __saved: Date.now()
             },

package/src/store/form.ts

@@ -29,6 +29,7 @@ import isEqual from 'lodash/isEqual';
 import flatten from 'lodash/flatten';
 import {getStoreById, removeStore} from './manager';
 import {filter} from '../utils/tpl';
+import {normalizeApiResponseData} from '../utils/api';
 
 export const FormStore = ServiceStore.named('FormStore')
   .props({
@@ -305,7 +306,7 @@ export const FormStore = ServiceStore.named('FormStore')
           self.updatedAt = Date.now();
 
           setValues(
-            json.data,
+            normalizeApiResponseData(json.data),
             json.ok
               ? {
                   __saved: Date.now()

package/src/store/service.ts

@@ -3,6 +3,7 @@ import {iRendererStore} from './iRenderer';
 import {Api, ApiObject, Payload, fetchOptions} from '../types';
 import {extendObject, isEmpty, isObject} from '../utils/helper';
 import {ServerError} from '../utils/errors';
+import {normalizeApiResponseData} from '../utils/api';
 
 export const ServiceStore = iRendererStore
   .named('ServiceStore')
@@ -96,7 +97,7 @@ export const ServiceStore = iRendererStore
           let replace = !!(api as ApiObject).replaceData;
           let data = {
             ...(replace ? {} : self.data),
-            ...json.data
+            ...normalizeApiResponseData(json.data)
           };
           reInitData(data, replace);
           self.hasRemoteData = true;
@@ -176,7 +177,7 @@ export const ServiceStore = iRendererStore
 
           json.data &&
             self.updateData(
-              json.data,
+              normalizeApiResponseData(json.data),
               undefined,
               !!(api as ApiObject).replaceData
             );
@@ -264,7 +265,7 @@ export const ServiceStore = iRendererStore
 
           json.data &&
             self.updateData(
-              json.data,
+              normalizeApiResponseData(json.data),
               undefined,
               !!(api as ApiObject).replaceData
             );
@@ -406,7 +407,7 @@ export const ServiceStore = iRendererStore
               : {
                   type: 'wrapper',
                   wrap: false,
-                  ...json.data
+                  ...normalizeApiResponseData(json.data)
                 };
             self.schemaKey = '' + Date.now();
             isObject(json.data.data) &&

package/src/utils/api.ts

@@ -12,6 +12,7 @@ import {
   createObject,
   qsparse
 } from './helper';
+import isPlainObject from 'lodash/isPlainObject';
 
 const rSchema = /(?:^|raw\:)(get|post|put|delete|patch|options|head):/i;
 
@@ -469,4 +470,16 @@ export function clearApiCache() {
   apiCaches.splice(0, apiCaches.length);
 }
 
+export function normalizeApiResponseData(data: any) {
+  if (typeof data === 'undefined') {
+    data = {};
+  } else if (!isPlainObject(data)) {
+    data = {
+      [Array.isArray(data) ? 'items' : 'result']: data
+    };
+  }
+
+  return data;
+}
+
 // window.apiCaches = apiCaches;

package/src/utils/icon.tsx

@@ -17,6 +17,10 @@ export const generateIcon = (
   className?: string,
   classNameProp?: string
 ) => {
+  if (React.isValidElement(icon)) {
+    return icon;
+  }
+
   const isURLIcon = icon?.indexOf('.') !== -1;
 
   return icon ? (