amis 1.5.6-beta.0 → 1.5.6-beta.4

package/src/Root.tsx

@@ -150,6 +150,7 @@ export function renderChild(
     <SchemaRenderer
       {...props}
       schema={schema}
+      propKey={schema.key}
       $path={`${prefix ? `${prefix}/` : ''}${(schema && schema.type) || ''}`}
     />
   );

package/src/SchemaRenderer.tsx

@@ -242,6 +242,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
         data: defaultData,
         value: defaultValue,
         activeKey: defaultActiveKey,
+        key: propKey,
         ...restSchema
       } = schema;
       return rest.invisible
@@ -253,6 +254,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
             defaultData,
             defaultValue,
             defaultActiveKey,
+            propKey,
             $path: $path,
             $schema: schema,
             ref: isSFC ? undefined : this.refFn,
@@ -293,6 +295,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
     const {
       data: defaultData,
       value: defaultValue,
+      key: propKey,
       activeKey: defaultActiveKey,
       ...restSchema
     } = schema;
@@ -321,6 +324,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
         defaultData={restSchema.defaultData ?? defaultData}
         defaultValue={restSchema.defaultValue ?? defaultValue}
         defaultActiveKey={defaultActiveKey}
+        propKey={propKey}
         $path={$path}
         $schema={{...schema, ...exprProps}}
         ref={this.refFn}

package/src/components/Collapse.tsx

@@ -55,7 +55,6 @@ export interface CollapseState {
 }
 
 export class Collapse extends React.Component<CollapseProps, CollapseState> {
-
   static defaultProps: Partial<CollapseProps> = {
     mountOnEnter: false,
     unmountOnExit: false,
@@ -82,7 +81,10 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
     this.state.collapsed = !!props.collapsed;
   }
 
-  static getDerivedStateFromProps(nextProps: CollapseProps, preState: CollapseState) {
+  static getDerivedStateFromProps(
+    nextProps: CollapseProps,
+    preState: CollapseState
+  ) {
     if (nextProps.propsUpdate && nextProps.collapsed !== preState.collapsed) {
       return {
         collapsed: !!nextProps.collapsed
@@ -164,7 +166,9 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
       children
     } = this.props;
 
-    const finalHeader = this.state.collapsed ? header : collapseHeader || header;
+    const finalHeader = this.state.collapsed
+      ? header
+      : collapseHeader || header;
 
     let dom = [
       finalHeader ? (
@@ -173,14 +177,18 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
           onClick={this.toggleCollapsed}
           className={cx(`Collapse-header`, headingClassName)}
         >
-          {showArrow && collapsable
-            ? expandIcon
-              ? React.cloneElement(expandIcon, {
-                  ...expandIcon.props,
-                  className: cx('Collapse-icon-tranform')
-                })
-              : <span className={cx('Collapse-arrow')} />
-              : ''}
+          {showArrow && collapsable ? (
+            expandIcon ? (
+              React.cloneElement(expandIcon, {
+                ...expandIcon.props,
+                className: cx('Collapse-icon-tranform')
+              })
+            ) : (
+              <span className={cx('Collapse-arrow')} />
+            )
+          ) : (
+            ''
+          )}
           {finalHeader}
         </HeadingComponent>
       ) : null,
@@ -213,7 +221,6 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
           );
         }}
       </Transition>
-      
     ];
 
     if (headerPosition === 'bottom') {

package/src/components/CollapseGroup.tsx

@@ -28,7 +28,6 @@ class CollapseGroup extends React.Component<
   CollapseGroupProps,
   CollapseGroupState
 > {
-
   static defaultProps: Partial<CollapseGroupProps> = {
     className: '',
     accordion: false,
@@ -58,21 +57,18 @@ class CollapseGroup extends React.Component<
     if (collapsed) {
       if (this.props.accordion) {
         activeKey = [];
-      }
-      else {
-        for(let i = 0; i < activeKey.length; i++) {
+      } else {
+        for (let i = 0; i < activeKey.length; i++) {
           if (activeKey[i] === item.id) {
             activeKey.splice(i, 1);
             break;
           }
         }
       }
-    }
-    else {
+    } else {
       if (this.props.accordion) {
         activeKey = [item.id];
-      }
-      else {
+      } else {
         activeKey.push(item.id);
       }
     }
@@ -88,7 +84,8 @@ class CollapseGroup extends React.Component<
 
     return children.map((child: React.ReactElement, index: number) => {
       let props = child.props;
-      const id = props.schema.key || String(index);
+
+      const id = props.propKey || String(index);
       const collapsed = this.state.activeKey.indexOf(id) === -1;
 
       return React.cloneElement(child as any, {
@@ -98,7 +95,8 @@ class CollapseGroup extends React.Component<
         collapsed,
         expandIcon: this.props.expandIcon,
         propsUpdate: true,
-        onCollapse: (item: CollapseProps, collapsed: boolean) => this.collapseChange(item, collapsed)
+        onCollapse: (item: CollapseProps, collapsed: boolean) =>
+          this.collapseChange(item, collapsed)
       });
     });
   };
@@ -116,7 +114,7 @@ class CollapseGroup extends React.Component<
         className={cx(
           `CollapseGroup`,
           {
-            'icon-position-right': expandIconPosition === 'right',
+            'icon-position-right': expandIconPosition === 'right'
           },
           className
         )}

package/src/components/index.tsx

@@ -12,6 +12,7 @@ import Button from './Button';
 import Checkbox from './Checkbox';
 import Checkboxes from './Selection';
 import Collapse from './Collapse';
+import CollapseGroup from './CollapseGroup';
 import DatePicker from './DatePicker';
 import DateRangePicker from './DateRangePicker';
 import Drawer from './Drawer';
@@ -69,6 +70,7 @@ export {
   Checkbox,
   Checkboxes,
   Collapse,
+  CollapseGroup,
   DatePicker,
   DateRangePicker,
   Drawer,

package/src/renderers/Collapse.tsx

@@ -1,12 +1,7 @@
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
 import {Collapse as BasicCollapse} from '../components/Collapse';
-import {
-  BaseSchema,
-  SchemaCollection,
-  SchemaTpl,
-  SchemaObject
-} from '../Schema';
+import {BaseSchema, SchemaCollection, SchemaTpl, SchemaObject} from '../Schema';
 
 /**
  * Collapse 折叠渲染器，格式说明。
@@ -63,9 +58,9 @@ export interface CollapseSchema extends BaseSchema {
    */
   showArrow?: boolean;
 
-   /**
-    * 自定义切换图标
-    */
+  /**
+   * 自定义切换图标
+   */
   expandIcon?: SchemaObject;
 
   /**
@@ -104,14 +99,9 @@ export interface CollapseProps
   children?: JSX.Element | ((props?: any) => JSX.Element);
 }
 
-export default class Collapse extends React.Component<
-  CollapseProps,
-  {}
-> {
-
+export default class Collapse extends React.Component<CollapseProps, {}> {
   render() {
     const {
-      key,
       id,
       classPrefix: ns,
       classnames: cx,
@@ -144,7 +134,6 @@ export default class Collapse extends React.Component<
 
     return (
       <BasicCollapse
-        key={key}
         id={id}
         classnames={cx}
         classPrefix={ns}
@@ -162,19 +151,30 @@ export default class Collapse extends React.Component<
         showArrow={showArrow}
         disabled={disabled}
         propsUpdate={propsUpdate}
-        expandIcon={expandIcon ? render('arrow-icon', expandIcon || '', {className: cx('Collapse-icon-tranform')}) : null}
-        collapseHeader={collapseTitle || collapseHeader ? render('heading', collapseTitle || collapseHeader) : null}
+        expandIcon={
+          expandIcon
+            ? render('arrow-icon', expandIcon || '', {
+                className: cx('Collapse-icon-tranform')
+              })
+            : null
+        }
+        collapseHeader={
+          collapseTitle || collapseHeader
+            ? render('heading', collapseTitle || collapseHeader)
+            : null
+        }
         header={render('heading', title || header || '')}
-        body={children
-          ? typeof children === 'function'
-            ? children(this.props)
-            : children
-          : body
-          ? render('body', body)
-          : null}
+        body={
+          children
+            ? typeof children === 'function'
+              ? children(this.props)
+              : children
+            : body
+            ? render('body', body)
+            : null
+        }
         onCollapse={onCollapse}
-      >
-      </BasicCollapse>
+      ></BasicCollapse>
     );
   }
 }

package/src/renderers/CollapseGroup.tsx

@@ -41,11 +41,13 @@ export interface CollapseGroupSchema extends BaseSchema {
 export interface CollapseGroupProps
   extends RendererProps,
     Omit<CollapseGroupSchema, 'type' | 'className'> {
-
   children?: JSX.Element | ((props?: any) => JSX.Element);
 }
 
-export class CollapseGroupRender extends React.Component<CollapseGroupProps, {}> {
+export class CollapseGroupRender extends React.Component<
+  CollapseGroupProps,
+  {}
+> {
   constructor(props: CollapseGroupProps) {
     super(props);
   }
@@ -61,19 +63,18 @@ export class CollapseGroupRender extends React.Component<CollapseGroupProps, {}>
     } = this.props;
     return (
       <CollapseGroup
-          defaultActiveKey={defaultActiveKey}
-          accordion={accordion}
-          expandIcon={expandIcon}
-          expandIconPosition={expandIconPosition}
-          className={className}
-        >
-          {render('body', body || '')}
-        </CollapseGroup>
-    )
+        defaultActiveKey={defaultActiveKey}
+        accordion={accordion}
+        expandIcon={expandIcon}
+        expandIconPosition={expandIconPosition}
+        className={className}
+      >
+        {render('body', body || '')}
+      </CollapseGroup>
+    );
   }
 }
 
-
 @Renderer({
   type: 'collapse-group'
 })

package/src/store/formItem.ts

@@ -712,6 +712,21 @@ export const FormItemStore = StoreNode.named('FormItemStore')
         data
       );
 
+      // 插入新的子节点，用于之后BaseSelection.resolveSelected查找
+      if (Array.isArray(self.options[0].children)) {
+        const children = self.options[0].children.concat();
+
+        flattenTree(self.options[0].leftOptions).forEach(item => {
+          if (
+            !findTree(self.options[0].children, node => node.ref === item.value)
+          ) {
+            children.push({ref: item.value, defer: true});
+          }
+        });
+
+        setOptions([{...self.options[0], children}], undefined, data);
+      }
+
       return json;
     });
 

package/src/utils/helper.ts

@@ -891,11 +891,7 @@ export function filterTree<T extends TreeItem>(
           ? filterTree(item.children, iterator, level + 1, depthFirst)
           : undefined;
 
-        if (
-          Array.isArray(children) &&
-          Array.isArray(item.children) &&
-          children.length !== item.children.length
-        ) {
+        if (Array.isArray(children) && Array.isArray(item.children)) {
           item = {...item, children: children};
         }
 
@@ -915,11 +911,7 @@ export function filterTree<T extends TreeItem>(
           depthFirst
         );
 
-        if (
-          Array.isArray(children) &&
-          Array.isArray(item.children) &&
-          children.length !== item.children.length
-        ) {
+        if (Array.isArray(children) && Array.isArray(item.children)) {
           item = {...item, children: children};
         }
       }
@@ -1593,13 +1585,12 @@ export function JSONTraverse(
   });
 }
 
-
 export function convertDateArrayToDate(
   value: number[],
   types: string[],
   date: moment.Moment
 ): moment.Moment | null {
-  if (value.length === 0) return date
+  if (value.length === 0) return date;
   for (let i = 0; i < types.length; i++) {
     const type = types[i];
     // @ts-ignore
@@ -1622,7 +1613,7 @@ export function convertDateToObject(value: moment.Moment) {
 export function getRange(min: number, max: number, step: number = 1) {
   const arr = [];
   for (let i = min; i <= max; i += step) {
-      arr.push(i);
+    arr.push(i);
   }
   return arr;
-};
+}