amis 1.4.2-beta.12 → 1.4.2-beta.13

package/src/components/InputBox.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {ThemeProps, themeable} from '../theme';
 import Input from './Input';
-import {autobind} from '../utils/helper';
+import {autobind, ucFirst} from '../utils/helper';
 import {Icon} from './icons';
 
 export interface InputBoxProps
@@ -17,6 +17,7 @@ export interface InputBoxProps
   placeholder?: string;
   prefix?: JSX.Element;
   children?: JSX.Element;
+  borderMode?: 'full' | 'half' | 'none';
 }
 
 export interface InputBoxState {
@@ -79,20 +80,20 @@ export class InputBox extends React.Component<InputBoxProps, InputBoxState> {
       placeholder,
       prefix: result,
       children,
+      borderMode,
       ...rest
     } = this.props;
     const isFocused = this.state.isFocused;
 
     return (
       <div
-        className={cx(
-          'InputBox',
-          className,
-          isFocused ? 'is-focused' : '',
-          disabled ? 'is-disabled' : '',
-          hasError ? 'is-error' : '',
-          rest.onClick ? 'is-clickable' : ''
-        )}
+        className={cx('InputBox', className, {
+          'is-focused': isFocused,
+          'is-disabled': disabled,
+          'is-error': hasError,
+          'is-clickable': rest.onClick,
+          [`InputBox--border${ucFirst(borderMode)}`]: borderMode
+        })}
       >
         {result}
 

package/src/components/ResultBox.tsx

@@ -4,7 +4,7 @@ import {InputBoxProps} from './InputBox';
 import {uncontrollable} from 'uncontrollable';
 import {Icon} from './icons';
 import Input from './Input';
-import {autobind} from '../utils/helper';
+import {autobind, ucFirst} from '../utils/helper';
 import {LocaleProps, localeable} from '../locale';
 
 export interface ResultBoxProps
@@ -113,20 +113,20 @@ export class ResultBox extends React.Component<ResultBoxProps> {
       onKeyPress,
       onFocus,
       onBlur,
+      borderMode,
       ...rest
     } = this.props;
     const isFocused = this.state.isFocused;
 
     return (
       <div
-        className={cx(
-          'ResultBox',
-          className,
-          isFocused ? 'is-focused' : '',
-          disabled ? 'is-disabled' : '',
-          hasError ? 'is-error' : '',
-          onResultClick ? 'is-clickable' : ''
-        )}
+        className={cx('ResultBox', className, {
+          'is-focused': isFocused,
+          'is-disabled': disabled,
+          'is-error': hasError,
+          'is-clickable': onResultClick,
+          [`ResultBox--border${ucFirst(borderMode)}`]: borderMode
+        })}
         onClick={onResultClick}
         tabIndex={!allowInput && !disabled && onFocus ? 0 : -1}
         onKeyPress={allowInput ? undefined : onKeyPress}

package/src/components/TransferDropDown.tsx

@@ -11,6 +11,7 @@ import PopOverContainer from './PopOverContainer';
 export interface TransferDropDownProps extends TransferProps {
   // 新的属性？
   multiple?: boolean;
+  borderMode?: 'full' | 'half' | 'none';
 }
 
 export class TransferDropDown extends Transfer<TransferDropDownProps> {
@@ -23,7 +24,8 @@ export class TransferDropDown extends Transfer<TransferDropDownProps> {
       className,
       onChange,
       onSearch,
-      multiple
+      multiple,
+      borderMode
     } = this.props;
     const {inputValue, searchResult} = this.state;
 
@@ -84,6 +86,7 @@ export class TransferDropDown extends Transfer<TransferDropDownProps> {
               className,
               isOpened ? 'is-active' : ''
             )}
+            borderMode={borderMode}
             allowInput={false}
             result={
               multiple

package/src/components/TransferPicker.tsx

@@ -11,6 +11,11 @@ import {autobind} from '../utils/helper';
 export interface TransferPickerProps extends Omit<TransferProps, 'itemRender'> {
   // 新的属性？
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+  /**
+   * 边框模式，全边框，还是半边框，或者没边框。
+   */
+  borderMode?: 'full' | 'half' | 'none';
 }
 
 export class TransferPicker extends React.Component<TransferPickerProps> {
@@ -37,6 +42,7 @@ export class TransferPicker extends React.Component<TransferPickerProps> {
       className,
       onChange,
       size,
+      borderMode,
       ...rest
     } = this.props;
 
@@ -64,6 +70,7 @@ export class TransferPicker extends React.Component<TransferPickerProps> {
             onResultClick={onClick}
             placeholder={__('Select.placeholder')}
             disabled={disabled}
+            borderMode={borderMode}
           >
             <span className={cx('TransferPicker-icon')}>
               <Icon icon="pencil" className="icon" />

package/src/components/icons.tsx

@@ -24,6 +24,7 @@ import ViewIcon from '../icons/view.svg';
 import RemoveIcon from '../icons/remove.svg';
 import RetryIcon from '../icons/retry.svg';
 import UploadIcon from '../icons/upload.svg';
+import DownloadIcon from '../icons/download.svg';
 import FileIcon from '../icons/file.svg';
 import StatusSuccessIcon from '../icons/status-success.svg';
 import StatusFailIcon from '../icons/status-fail.svg';
@@ -120,6 +121,7 @@ registerIcon('view', ViewIcon);
 registerIcon('remove', RemoveIcon);
 registerIcon('retry', RetryIcon);
 registerIcon('upload', UploadIcon);
+registerIcon('download', DownloadIcon);
 registerIcon('file', FileIcon);
 registerIcon('status-success', StatusSuccessIcon);
 registerIcon('status-fail', StatusFailIcon);

package/src/icons/download.svg

@@ -0,0 +1,4 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="download" class="svg-inline--fa fa-download fa-w-16" role="img"
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path>
+</svg>

package/src/locale/en-US.ts

@@ -85,6 +85,7 @@ register('en-US', {
   'Excel.placeholder': `Drag 'n' drop excel here, or click to select`,
   'fetchFailed': 'Fetch api failed',
   'File.continueAdd': 'Continue add',
+  'File.downloadTpl': 'Download template',
   'File.dragDrop': `Drag 'n' drop some files here`,
   'File.errorRetry': 'File upload failed, please try again',
   'File.failed': 'Failed files.',

package/src/locale/zh-CN.ts

@@ -87,6 +87,7 @@ register('zh-CN', {
   'Excel.placeholder': '拖拽 Excel 到这，或点击上传',
   'fetchFailed': '初始化失败',
   'File.continueAdd': '继续添加',
+  'File.downloadTpl': '下载模板',
   'File.dragDrop': '将文件拖拽到此处',
   'File.errorRetry': '文件上传失败请重试',
   'File.failed': '失败文件',

package/src/renderers/Form/InputFile.tsx

@@ -18,7 +18,8 @@ import {dataMapping} from '../../utils/tpl-builtin';
 import {
   SchemaApi,
   SchemaClassName,
-  SchemaTokenizeableString
+  SchemaTokenizeableString,
+  SchemaUrlPath
 } from '../../Schema';
 import merge from 'lodash/merge';
 
@@ -89,6 +90,11 @@ export interface FileControlSchema extends FormBaseControl {
    */
   downloadUrl?: SchemaApi;
 
+  /**
+   * 模板下载地址
+   */
+  templateUrl?: SchemaApi;
+
   /**
    * 默认 `file`, 如果你不想自己存储，则可以忽略此属性。
    * @default file
@@ -276,6 +282,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
     extractValue: false,
     delimiter: ',',
     downloadUrl: '', // '/api/file/'
+    templateUrl: '',
     useChunk: 'auto',
     chunkSize: 5 * 1024 * 1024, // 文件大于5M， 自动分块上传
     startChunkApi: '/api/upload/startChunk',
@@ -388,6 +395,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
     this.uploadBigFile = this.uploadBigFile.bind(this);
     this.handleSelect = this.handleSelect.bind(this);
     this.syncAutoFill = this.syncAutoFill.bind(this);
+    this.downloadTpl = this.downloadTpl.bind(this);
   }
 
   componentDidMount() {
@@ -535,7 +543,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
     e.preventDefault();
     e.stopPropagation();
 
-    const {data, env, downloadUrl} = this.props;
+    const {downloadUrl} = this.props;
     const urlField = this.props.urlField || 'url';
     const valueField = this.props.valueField || 'value';
 
@@ -550,10 +558,23 @@ export default class FileControl extends React.Component<FileProps, FileState> {
         ? downloadUrl
         : `${fileUrl}`;
 
+    this.handleApi(api, file);
+  }
+
+  downloadTpl(e: React.MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.handleApi(this.props.templateUrl || '');
+  }
+
+  handleApi(api: SchemaApi, payload?: object) {
+    const {data, env} = this.props;
     if (api) {
       const ctx = createObject(data, {
-        ...file
+        ...payload
       });
+
       const apiObject = normalizeApi(api);
 
       if (apiObject.method?.toLowerCase() === 'get' && !apiObject.data) {
@@ -1171,7 +1192,8 @@ export default class FileControl extends React.Component<FileProps, FileState> {
       classnames: cx,
       translate: __,
       render,
-      downloadUrl
+      downloadUrl,
+      templateUrl
     } = this.props;
     let {files, uploading, error} = this.state;
     const nameField = this.props.nameField || 'name';
@@ -1194,6 +1216,16 @@ export default class FileControl extends React.Component<FileProps, FileState> {
 
     return (
       <div className={cx('FileControl', className)}>
+        {templateUrl ? (
+          <a
+            className={cx('FileControl-templateInfo')}
+            onClick={this.downloadTpl.bind(this)}
+          >
+            <Icon icon="download" className="icon" />
+            <span>{__('File.downloadTpl')}</span>
+          </a>
+          ) : null}
+
         <DropZone
           disabled={disabled}
           key="drop-zone"

package/src/renderers/Form/Item.tsx

@@ -1089,7 +1089,8 @@ export const detectProps = [
   'items',
   'showCounter',
   'minLength',
-  'maxLength'
+  'maxLength',
+  'embed'
 ];
 
 export function asFormItem(config: Omit<FormItemConfig, 'component'>) {

package/src/renderers/Form/Select.tsx

@@ -344,7 +344,9 @@ export interface TransferDropDownProps
       | 'inputClassName'
       | 'className'
       | 'descriptionClassName'
-    > {}
+    > {
+  borderMode?: 'full' | 'half' | 'none';
+}
 
 class TransferDropdownRenderer extends BaseTransferRenderer<TransferDropDownProps> {
   render() {
@@ -363,7 +365,8 @@ class TransferDropdownRenderer extends BaseTransferRenderer<TransferDropDownProp
       selectMode,
       multiple,
       columns,
-      leftMode
+      leftMode,
+      borderMode
     } = this.props;
 
     // 目前 LeftOptions 没有接口可以动态加载
@@ -402,6 +405,7 @@ class TransferDropdownRenderer extends BaseTransferRenderer<TransferDropDownProp
           columns={columns}
           leftMode={leftMode}
           leftOptions={leftOptions}
+          borderMode={borderMode}
         />
 
         <Spinner overlay key="info" show={loading} />

package/src/renderers/Form/TransferPicker.tsx

@@ -17,6 +17,10 @@ import TransferPicker from '../../components/TransferPicker';
  */
 export interface TransferPickerControlSchema extends FormOptionsControl {
   type: 'transfer-picker';
+  /**
+   * 边框模式，全边框，还是半边框，或者没边框。
+   */
+  borderMode?: 'full' | 'half' | 'none';
 
   /**
    * 是否显示剪头
@@ -91,7 +95,8 @@ export class TransferPickerRenderer extends BaseTransferRenderer<TabsTransferPro
       pickerSize,
       columns,
       leftMode,
-      selectMode
+      selectMode,
+      borderMode
     } = this.props;
 
     // 目前 LeftOptions 没有接口可以动态加载
@@ -113,6 +118,7 @@ export class TransferPickerRenderer extends BaseTransferRenderer<TabsTransferPro
     return (
       <div className={cx('TransferControl', className)}>
         <TransferPicker
+          borderMode={borderMode}
           selectMode={selectMode}
           value={selectedOptions}
           disabled={disabled}

package/src/renderers/Form/index.tsx

@@ -1440,8 +1440,7 @@ export default class Form extends React.Component<FormProps, object> {
         className={cx(
           `Form`,
           `Form--${mode || 'normal'}`,
-          {'Form--column': columnCount},
-          `Form--column-${columnCount}`,
+          columnCount ? `Form--column Form--column-${columnCount}` : null,
           className
         )}
         onSubmit={this.handleFormSubmit}

package/src/store/table.ts

@@ -429,7 +429,7 @@ export const TableStore = iRendererStore
     }
 
     function getUnSelectedRows() {
-      return self.rows.filter(item => !item.checked);
+      return flattenTree<IRow>(self.rows).filter((item: IRow) => !item.checked);
     }
 
     function getData(superData: any): any {
@@ -604,7 +604,9 @@ export const TableStore = iRendererStore
       },
 
       get checkableRows() {
-        return self.rows.filter(item => item.checkable);
+        return flattenTree<IRow>(self.rows).filter(
+          (item: IRow) => item.checkable
+        );
       },
 
       get expandableRows() {
@@ -1023,9 +1025,10 @@ export const TableStore = iRendererStore
 
     function updateSelected(selected: Array<any>, valueField?: string) {
       self.selectedRows.clear();
-      self.rows.forEach(item => {
+
+      eachTree(self.rows, item => {
         if (~selected.indexOf(item.pristine)) {
-          self.selectedRows.push(item);
+          self.selectedRows.push(item.id);
         } else if (
           find(
             selected,
@@ -1034,9 +1037,10 @@ export const TableStore = iRendererStore
               a[valueField || 'value'] == item.pristine[valueField || 'value']
           )
         ) {
-          self.selectedRows.push(item);
+          self.selectedRows.push(item.id);
         }
       });
+
       updateCheckDisable();
     }