amis 1.5.4 → 1.5.6-beta.5

package/src/renderers/Form/TreeSelect.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Overlay from '../../components/Overlay';
 import PopOver from '../../components/PopOver';
+import PopUp from '../../components/PopUp';
 
 import {
   OptionsControl,
@@ -17,7 +18,7 @@ import {Api} from '../../types';
 import {isEffectiveApi} from '../../utils/api';
 import Spinner from '../../components/Spinner';
 import ResultBox from '../../components/ResultBox';
-import {autobind, getTreeAncestors} from '../../utils/helper';
+import {autobind, getTreeAncestors, isMobile} from '../../utils/helper';
 import {findDOMNode} from 'react-dom';
 import {normalizeOptions} from '../../components/Select';
 
@@ -90,6 +91,7 @@ export interface TreeSelectProps extends OptionsControlProps {
   hideNodePathLabel?: boolean;
   enableNodePath?: boolean;
   pathSeparator?: string;
+  useMobileUI?: boolean;
 }
 
 export interface TreeSelectState {
@@ -502,67 +504,51 @@ export default class TreeSelectControl extends React.Component<
         : options;
 
     return (
-      <Overlay
-        container={popOverContainer || (() => this.container.current)}
-        target={() => this.target}
-        show
-      >
-        <PopOver
-          classPrefix={ns}
-          className={`${ns}TreeSelect-popover`}
-          style={{
-            minWidth: this.target ? this.target.offsetWidth : undefined
-          }}
-          onHide={this.close}
-          overlay
-        >
-          <TreeSelector
-            classPrefix={ns}
-            onlyChildren={onlyChildren}
-            labelField={labelField}
-            valueField={valueField}
-            disabled={disabled}
-            onChange={this.handleChange}
-            joinValues={joinValues}
-            extractValue={extractValue}
-            delimiter={delimiter}
-            placeholder={__(optionsPlaceholder)}
-            options={filtedOptions}
-            highlightTxt={this.state.inputValue}
-            multiple={multiple}
-            initiallyOpen={initiallyOpen}
-            unfoldedLevel={unfoldedLevel}
-            withChildren={withChildren}
-            rootLabel={__(rootLabel)}
-            rootValue={rootValue}
-            showIcon={showIcon}
-            showRadio={showRadio}
-            cascade={cascade}
-            foldedField="collapsed"
-            hideRoot
-            value={value || ''}
-            nodePath={nodePath}
-            enableNodePath={enableNodePath}
-            pathSeparator={pathSeparator}
-            maxLength={maxLength}
-            minLength={minLength}
-            onAdd={onAdd}
-            creatable={creatable}
-            createTip={createTip}
-            rootCreatable={rootCreatable}
-            rootCreateTip={rootCreateTip}
-            onEdit={onEdit}
-            editable={editable}
-            editTip={editTip}
-            removable={removable}
-            removeTip={removeTip}
-            onDelete={onDelete}
-            bultinCUD={!addControls && !editControls}
-            onDeferLoad={deferLoad}
-            onExpandTree={expandTreeOptions}
-          />
-        </PopOver>
-      </Overlay>
+      <TreeSelector
+        classPrefix={ns}
+        onlyChildren={onlyChildren}
+        labelField={labelField}
+        valueField={valueField}
+        disabled={disabled}
+        onChange={this.handleChange}
+        joinValues={joinValues}
+        extractValue={extractValue}
+        delimiter={delimiter}
+        placeholder={__(optionsPlaceholder)}
+        options={filtedOptions}
+        highlightTxt={this.state.inputValue}
+        multiple={multiple}
+        initiallyOpen={initiallyOpen}
+        unfoldedLevel={unfoldedLevel}
+        withChildren={withChildren}
+        rootLabel={__(rootLabel)}
+        rootValue={rootValue}
+        showIcon={showIcon}
+        showRadio={showRadio}
+        cascade={cascade}
+        foldedField="collapsed"
+        hideRoot
+        value={value || ''}
+        nodePath={nodePath}
+        enableNodePath={enableNodePath}
+        pathSeparator={pathSeparator}
+        maxLength={maxLength}
+        minLength={minLength}
+        onAdd={onAdd}
+        creatable={creatable}
+        createTip={createTip}
+        rootCreatable={rootCreatable}
+        rootCreateTip={rootCreateTip}
+        onEdit={onEdit}
+        editable={editable}
+        editTip={editTip}
+        removable={removable}
+        removeTip={removeTip}
+        onDelete={onDelete}
+        bultinCUD={!addControls && !editControls}
+        onDeferLoad={deferLoad}
+        onExpandTree={expandTreeOptions}
+      />
     );
   }
 
@@ -581,9 +567,13 @@ export default class TreeSelectControl extends React.Component<
       autoComplete,
       selectedOptions,
       placeholder,
+      popOverContainer,
+      env,
       translate: __
     } = this.props;
 
+    const { isOpened } = this.state;
+    const { useMobileUI } = env;
     return (
       <div ref={this.container} className={cx(`TreeSelectControl`, className)}>
         <ResultBox
@@ -622,7 +612,36 @@ export default class TreeSelectControl extends React.Component<
         >
           {loading ? <Spinner size="sm" /> : undefined}
         </ResultBox>
-        {this.state.isOpened ? this.renderOuter() : null}
+        { !(useMobileUI && isMobile()) && isOpened ? (
+          <Overlay
+            container={popOverContainer || (() => this.container.current)}
+            target={() => this.target}
+            show
+          >
+            <PopOver
+              classPrefix={ns}
+              className={`${ns}TreeSelect-popover`}
+              style={{
+                minWidth: this.target ? this.target.offsetWidth : undefined
+              }}
+              onHide={this.close}
+              overlay
+            >
+              {this.renderOuter()}
+            </PopOver>
+          </Overlay>
+        ) : null}
+        {
+          useMobileUI && isMobile() && (
+            <PopUp
+              className={cx(`${ns}TreeSelect-popup`)}
+              isShow={isOpened}
+              onHide={this.close}
+            >
+              {this.renderOuter()}
+            </PopUp>
+          )
+        }
       </div>
     );
   }

package/src/renderers/Form/index.tsx

@@ -1167,9 +1167,9 @@ export default class Form extends React.Component<FormProps, object> {
     store.closeDialog(true);
   }
 
-  handleDialogClose() {
+  handleDialogClose(confirmed = false) {
     const {store} = this.props;
-    store.closeDialog(false);
+    store.closeDialog(confirmed);
   }
 
   handleDrawerConfirm(

package/src/renderers/Page.tsx

@@ -95,7 +95,7 @@ export interface PageSchema extends BaseSchema {
    */
   asideMinWidth?: number;
 
-   /**
+  /**
    * 边栏最小宽度
    */
   asideMaxWidth?: number;
@@ -471,12 +471,12 @@ export default class Page extends React.Component<PageProps> {
       return;
     }
 
-    store.closeDialog();
+    store.closeDialog(true);
   }
 
-  handleDialogClose() {
+  handleDialogClose(confirmed = false) {
     const {store} = this.props;
-    store.closeDialog();
+    store.closeDialog(confirmed);
   }
 
   handleDrawerConfirm(values: object[], action: Action, ...args: Array<any>) {
@@ -734,11 +734,13 @@ export default class Page extends React.Component<PageProps> {
         style={styleVar}
       >
         {hasAside ? (
-          <div className={cx(
-            `Page-aside`,
-            asideResizor ? 'relative' : 'Page-aside--withWidth',
-            asideClassName
-          )}>
+          <div
+            className={cx(
+              `Page-aside`,
+              asideResizor ? 'relative' : 'Page-aside--withWidth',
+              asideClassName
+            )}
+          >
             {render('aside', aside || '', {
               ...subProps,
               ...(typeof aside === 'string'
@@ -754,7 +756,6 @@ export default class Page extends React.Component<PageProps> {
                 className={cx(`Page-asideResizor`)}
               ></div>
             ) : null}
-            
           </div>
         ) : null}
 

package/src/renderers/Steps.tsx

@@ -83,9 +83,10 @@ export function StepsCmpt(props: StepsProps) {
     data,
     source,
     config,
-    render
+    render,
+    env
   } = props;
-  
+
   const stepsRow =
     (resolveVariable(source, data) as Array<StepSchema>) ||
     config ||
@@ -140,6 +141,7 @@ export function StepsCmpt(props: StepsProps) {
       className={className}
       status={status}
       mode={mode}
+      useMobileUI={env.useMobileUI}
     ></Steps>
   );
 }

package/src/renderers/Wizard.tsx

@@ -9,7 +9,8 @@ import {
   until,
   isVisible,
   getScrollParent,
-  autobind
+  autobind,
+  SkipOperation
 } from '../utils/helper';
 import {isApiOutdated, isEffectiveApi} from '../utils/api';
 import {IFormStore} from '../store/form';
@@ -546,8 +547,16 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
         .then(async () => {
           this.form && this.form.isValidated() && this.form.validate(true);
 
-          if (action.feedback && isVisible(action.feedback, store.data)) {
-            await this.openFeedback(action.feedback, store.data);
+          const feedback = action.feedback;
+          if (feedback && isVisible(feedback, store.data)) {
+            const confirmed = await this.openFeedback(feedback, store.data);
+
+            // 如果 feedback 配置了，取消就跳过原有逻辑。
+            if (feedback.skipRestOnCancel && !confirmed) {
+              throw new SkipOperation();
+            } else if (feedback.skipRestOnConfirm && confirmed) {
+              throw new SkipOperation();
+            }
           }
 
           const reidrect =
@@ -556,7 +565,11 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
 
           action.reload && this.reloadTarget(action.reload, store.data);
         })
-        .catch(() => {});
+        .catch(reason => {
+          if (reason instanceof SkipOperation) {
+            return;
+          }
+        });
     } else if (action.actionType === 'reload') {
       action.target && this.reloadTarget(action.target, data);
     } else if (onAction) {
@@ -667,14 +680,29 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
               }
             }
           })
-          .then((value: any) =>
+          .then(async (value: any) => {
+            const feedback = action.feedback;
+            if (feedback && isVisible(feedback, value)) {
+              const confirmed = await this.openFeedback(feedback, value);
+
+              // 如果 feedback 配置了，取消就跳过原有逻辑。
+              if (feedback.skipRestOnCancel && !confirmed) {
+                throw new SkipOperation();
+              } else if (feedback.skipRestOnConfirm && confirmed) {
+                throw new SkipOperation();
+              }
+            }
+
             this.gotoStep(
               value && typeof value.step === 'number'
                 ? value.step
                 : this.state.currentStep + 1
-            )
-          )
-          .catch(() => {
+            );
+          })
+          .catch(reason => {
+            if (reason instanceof SkipOperation) {
+              return;
+            }
             // do nothing
           });
       } else {
@@ -715,7 +743,19 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
               );
             }
           })
-          .then(value => {
+          .then(async value => {
+            const feedback = action.feedback;
+            if (feedback && isVisible(feedback, value)) {
+              const confirmed = await this.openFeedback(feedback, value);
+
+              // 如果 feedback 配置了，取消就跳过原有逻辑。
+              if (feedback.skipRestOnCancel && !confirmed) {
+                throw new SkipOperation();
+              } else if (feedback.skipRestOnConfirm && confirmed) {
+                throw new SkipOperation();
+              }
+            }
+
             this.setState({completeStep: steps.length});
             store.updateData({
               ...store.data,
@@ -771,13 +811,13 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
       store.updateData(values[0]);
     }
 
-    store.closeDialog();
+    store.closeDialog(true);
   }
 
   @autobind
-  handleDialogClose() {
+  handleDialogClose(confirmed = false) {
     const {store} = this.props;
-    store.closeDialog();
+    store.closeDialog(confirmed);
   }
 
   renderSteps() {

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/api.ts

@@ -98,14 +98,17 @@ export function buildApi(
   if (~idx) {
     const hashIdx = api.url.indexOf('#');
     const params = qsparse(
-      api.url.substring(idx + 1, ~hashIdx ? hashIdx : undefined)
+      api.url.substring(
+        idx + 1,
+        ~hashIdx && hashIdx > idx ? hashIdx : undefined
+      )
     );
     api.url =
       tokenize(api.url.substring(0, idx + 1), data, '| url_encode') +
       qsstringify(
         (api.query = dataMapping(params, data, undefined, api.convertKeyToPath))
       ) +
-      (~hashIdx ? api.url.substring(hashIdx) : '');
+      (~hashIdx && hashIdx > idx ? api.url.substring(hashIdx) : '');
   } else {
     api.url = tokenize(api.url, data, '| url_encode');
   }

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;
-};
+}