amis 1.5.8-beta.2 → 1.6.0

package/src/renderers/Form/InputDateRange.tsx

@@ -6,6 +6,7 @@ import 'moment/locale/zh-cn';
 import DateRangePicker, {
   DateRangePicker as BaseDateRangePicker
 } from '../../components/DateRangePicker';
+import {isMobile} from '../../utils/helper';
 
 /**
  * DateRange 日期范围控件
@@ -173,14 +174,21 @@ export default class DateRangeControl extends React.Component<DateRangeProps> {
       data,
       format,
       env,
+      useMobileUI,
       ...rest
     } = this.props;
-
+    const mobileUI = useMobileUI && isMobile();
     return (
       <div className={cx(`${ns}DateRangeControl`, className)}>
         <DateRangePicker
           {...rest}
+          useMobileUI={useMobileUI}
           classPrefix={ns}
+          popOverContainer={
+            mobileUI && env && env.getModalContainer
+              ? env.getModalContainer
+              : undefined
+          }
           data={data}
           format={format}
           minDate={minDate ? filterDate(minDate, data, format) : undefined}

package/src/renderers/Form/Item.tsx

@@ -9,7 +9,13 @@ import {
   TestFunc,
   RendererConfig
 } from '../../factory';
-import {anyChanged, ucFirst, getWidthRate, autobind} from '../../utils/helper';
+import {
+  anyChanged,
+  ucFirst,
+  getWidthRate,
+  autobind,
+  isMobile
+} from '../../utils/helper';
 import {observer} from 'mobx-react';
 import {FormHorizontal, FormSchema, FormSchemaHorizontal} from '.';
 import {Api, Schema} from '../../types';
@@ -456,9 +462,11 @@ export class FormItemWrap extends React.Component<FormItemProps> {
       sizeMutable,
       size,
       defaultSize,
+      useMobileUI,
       ...rest
     } = this.props;
 
+    const mobileUI = useMobileUI && isMobile();
     if (renderControl) {
       const controlSize = size || defaultSize;
       return renderControl({
@@ -470,7 +478,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
         className: cx(
           `Form-control`,
           {
-            'is-inline': !!rest.inline,
+            'is-inline': !!rest.inline && !mobileUI,
             'is-error': model && !model.valid,
             [`Form-control--withSize Form-control--size${ucFirst(
               controlSize
@@ -1205,14 +1213,16 @@ export function asFormItem(config: Omit<FormItemConfig, 'component'>) {
               type,
               size,
               defaultSize,
+              useMobileUI,
               ...rest
             } = this.props;
 
             const controlSize = size || defaultSize;
-
+            const mobileUI = useMobileUI && isMobile();
             return (
               <Control
                 {...rest}
+                useMobileUI={useMobileUI}
                 onOpenDialog={this.handleOpenDialog}
                 size={config.sizeMutable !== false ? undefined : size}
                 onFocus={this.handleFocus}
@@ -1225,7 +1235,7 @@ export function asFormItem(config: Omit<FormItemConfig, 'component'>) {
                 className={cx(
                   `Form-control`,
                   {
-                    'is-inline': !!rest.inline,
+                    'is-inline': !!rest.inline && !mobileUI,
                     'is-error': model && !model.valid,
                     [`Form-control--withSize Form-control--size${ucFirst(
                       controlSize

package/src/renderers/Form/NestedSelect.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Overlay from '../../components/Overlay';
 import Checkbox from '../../components/Checkbox';
 import PopOver from '../../components/PopOver';
+import PopUp from '../../components/PopUp';
 import {Icon} from '../../components/icons';
 import {
   autobind,
@@ -10,7 +11,8 @@ import {
   string2regExp,
   getTreeAncestors,
   getTreeParent,
-  ucFirst
+  ucFirst,
+  isMobile
 } from '../../utils/helper';
 import {
   FormOptionsControl,
@@ -24,6 +26,7 @@ import xor from 'lodash/xor';
 import union from 'lodash/union';
 import compact from 'lodash/compact';
 import {RootClose} from '../../utils/RootClose';
+import Cascader from '../../components/Cascader';
 
 /**
  * Nested Select
@@ -68,6 +71,7 @@ export interface NestedSelectProps extends OptionsControlProps {
   withChildren?: boolean;
   onlyChildren?: boolean;
   hideNodePathLabel?: boolean;
+  useMobileUI?: boolean;
 }
 
 export interface NestedSelectState {
@@ -625,12 +629,16 @@ export default class NestedSelectControl extends React.Component<
       selectedOptions,
       clearable,
       loading,
-      borderMode
+      borderMode,
+      useMobileUI,
+      env
     } = this.props;
 
+    const mobileUI = useMobileUI && isMobile();
     return (
       <div className={cx('NestedSelectControl', className)}>
         <ResultBox
+          useMobileUI={useMobileUI}
           disabled={disabled}
           ref={this.domRef}
           placeholder={__(placeholder || '空')}
@@ -665,7 +673,27 @@ export default class NestedSelectControl extends React.Component<
         >
           {loading ? <Spinner size="sm" /> : undefined}
         </ResultBox>
-        {this.state.isOpened ? this.renderOuter() : null}
+        {mobileUI ? (
+          <PopUp
+            className={cx(`NestedSelect-popup`)}
+            container={
+              env && env.getModalContainer ? env.getModalContainer : undefined
+            }
+            isShow={this.state.isOpened}
+            onHide={this.close}
+            showConfirm={false}
+            showClose={false}
+          >
+            <Cascader
+              onClose={this.close}
+              {...this.props}
+              options={this.props.options.slice()}
+              value={selectedOptions}
+            />
+          </PopUp>
+        ) : this.state.isOpened ? (
+          this.renderOuter()
+        ) : null}
       </div>
     );
   }

package/src/renderers/Form/Select.tsx

@@ -11,7 +11,7 @@ import find from 'lodash/find';
 import debouce from 'lodash/debounce';
 import {Api} from '../../types';
 import {isEffectiveApi} from '../../utils/api';
-import {isEmpty, createObject, autobind} from '../../utils/helper';
+import {isEmpty, createObject, autobind, isMobile} from '../../utils/helper';
 import {dataMapping} from '../../utils/tpl-builtin';
 import {SchemaApi} from '../../Schema';
 import Spinner from '../../components/Spinner';
@@ -91,6 +91,7 @@ export interface SelectProps extends OptionsControlProps {
   autoComplete?: Api;
   searchable?: boolean;
   defaultOpen?: boolean;
+  useMobileUI?: boolean;
 }
 
 export default class SelectControl extends React.Component<SelectProps, any> {
@@ -298,6 +299,7 @@ export default class SelectControl extends React.Component<SelectProps, any> {
       borderMode,
       selectMode,
       env,
+      useMobileUI,
       ...rest
     } = this.props;
 
@@ -305,6 +307,8 @@ export default class SelectControl extends React.Component<SelectProps, any> {
       noResultsText = render('noResultText', noResultsText);
     }
 
+    const mobileUI = useMobileUI && isMobile();
+
     return (
       <div className={cx(`${classPrefix}SelectControl`, className)}>
         {['table', 'list', 'group', 'tree', 'chained', 'associated'].includes(
@@ -314,6 +318,12 @@ export default class SelectControl extends React.Component<SelectProps, any> {
         ) : (
           <Select
             {...rest}
+            useMobileUI={useMobileUI}
+            popOverContainer={
+              mobileUI && env && env.getModalContainer
+                ? env.getModalContainer
+                : undefined
+            }
             borderMode={borderMode}
             placeholder={placeholder}
             multiple={multiple || multi}
@@ -347,6 +357,7 @@ export interface TransferDropDownProps
       | 'descriptionClassName'
     > {
   borderMode?: 'full' | 'half' | 'none';
+  useMobileUI?: boolean;
 }
 
 class TransferDropdownRenderer extends BaseTransferRenderer<TransferDropDownProps> {
@@ -367,7 +378,8 @@ class TransferDropdownRenderer extends BaseTransferRenderer<TransferDropDownProp
       multiple,
       columns,
       leftMode,
-      borderMode
+      borderMode,
+      useMobileUI
     } = this.props;
 
     // 目前 LeftOptions 没有接口可以动态加载
@@ -407,6 +419,7 @@ class TransferDropdownRenderer extends BaseTransferRenderer<TransferDropDownProp
           leftMode={leftMode}
           leftOptions={leftOptions}
           borderMode={borderMode}
+          useMobileUI={useMobileUI}
         />
 
         <Spinner overlay key="info" show={loading} />

package/src/renderers/Form/TreeSelect.tsx

@@ -568,12 +568,13 @@ export default class TreeSelectControl extends React.Component<
       selectedOptions,
       placeholder,
       popOverContainer,
-      env,
-      translate: __
+      useMobileUI,
+      translate: __,
+      env
     } = this.props;
 
     const {isOpened} = this.state;
-    const {useMobileUI} = env;
+    const mobileUI = useMobileUI && isMobile();
     return (
       <div ref={this.container} className={cx(`TreeSelectControl`, className)}>
         <ResultBox
@@ -612,7 +613,7 @@ export default class TreeSelectControl extends React.Component<
         >
           {loading ? <Spinner size="sm" /> : undefined}
         </ResultBox>
-        {!(useMobileUI && isMobile()) && isOpened ? (
+        {!mobileUI && isOpened ? (
           <Overlay
             container={popOverContainer || (() => this.container.current)}
             target={() => this.target}
@@ -631,15 +632,18 @@ export default class TreeSelectControl extends React.Component<
             </PopOver>
           </Overlay>
         ) : null}
-        {useMobileUI && isMobile() && (
+        {mobileUI ? (
           <PopUp
+            container={
+              env && env.getModalContainer ? env.getModalContainer : undefined
+            }
             className={cx(`${ns}TreeSelect-popup`)}
             isShow={isOpened}
             onHide={this.close}
           >
             {this.renderOuter()}
           </PopUp>
-        )}
+        ) : null}
       </div>
     );
   }

package/src/renderers/Remark.tsx

@@ -107,7 +107,8 @@ class Remark extends React.Component<RemarkProps> {
               body:
                 tooltip && typeof tooltip !== 'string'
                   ? tooltip.content
-                  : tooltip
+                  : tooltip,
+              actions: []
             }
           },
           data

package/src/schemaExtend.ts

@@ -18,15 +18,22 @@ addSchemaFilter(function (schema: Schema, renderer, props?: any) {
         const arr: Array<any> = [];
         Object.keys(value).forEach(key => {
           const valueType = typeof value[key];
-          arr.push({
-            key: key || '',
-            value:
-              valueType === 'string' ||
-              valueType === 'number' ||
-              valueType === 'boolean'
-                ? value[key]
-                : JSON.stringify(value[key])
-          });
+          if (key.endsWith('___tmp')) {
+            arr.push({
+              key: key.replace('___tmp', ''),
+              value: ''
+            });
+          } else {
+            arr.push({
+              key: key || '',
+              value:
+                valueType === 'string' ||
+                valueType === 'number' ||
+                valueType === 'boolean'
+                  ? value[key]
+                  : JSON.stringify(value[key])
+            });
+          }
         });
         return arr;
       },
@@ -41,7 +48,12 @@ addSchemaFilter(function (schema: Schema, renderer, props?: any) {
           try {
             value = JSON.parse(value);
           } catch (e) {}
-          obj[key] = value;
+          // 如果先输入了 a 作为 key，想输入 aa 的时候会先进入这里，导致无法输入 aa，因此当遇到 key 相同的时候加个 ___tmp 后缀
+          if (key in obj && typeof value === 'undefined') {
+            obj[key + '___tmp'] = '';
+          } else {
+            obj[key] = value;
+          }
         });
         return obj;
       },

package/src/utils/helper.ts

@@ -1585,30 +1585,20 @@ export function JSONTraverse(
   });
 }
 
-export function convertDateArrayToDate(
+export function convertArrayValueToMoment(
   value: number[],
   types: string[],
-  date: moment.Moment
-): moment.Moment | null {
-  if (value.length === 0) return date;
+  mom: moment.Moment
+): moment.Moment {
+  if (value.length === 0) return mom;
   for (let i = 0; i < types.length; i++) {
     const type = types[i];
     // @ts-ignore
-    date[type](value[i]);
+    mom.set(type, value[i]);
   }
-  return date;
+  return mom;
 }
 
-export function convertDateToObject(value: moment.Moment) {
-  if (value) {
-    return {
-      year: value.year(),
-      month: parseInt(value.format('MM'), 10),
-      day: parseInt(value.format('DD'), 10)
-    };
-  }
-  return value;
-}
 
 export function getRange(min: number, max: number, step: number = 1) {
   const arr = [];