Merge branch 'master' of https://github.com/baidu/amis

docs/renderers/Form/Checkboxes.md

@@ -11,6 +11,8 @@
 -   `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。
 -   `delimiter` 默认为 `,`
 -   `columnsCount` 默认为 `1` 可以配置成一行显示多个。
+-   `checkAll` 默认为 `false` 开启后支持全选
+-   `defaultCheckAll` 是否默认全选，默认为`false`
 -   **还有更多通用配置请参考** [FormItem](./FormItem.md)
 
 ```schema:height="330" scope="form"

docs/renderers/Form/Color.md

@@ -4,6 +4,8 @@
 
 -   `type` 请设置成 `color`
 -   `format` 请选择 `hex`、`hls`、`rgb`或者`rgba`。默认为 `hex`。
+-   `presetColors` 选择器底部的默认颜色
+    - 默认为`['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']`，数组内为空则不显示默认颜色
 -   `clearable` 是否显示清除按钮。
 
 ```schema:height="400" scope="form-item"

scss/components/_table.scss

@@ -134,6 +134,7 @@
     &-content {
         min-height: 0.01%;
         overflow-x: auto;
+        transform: translateZ(0);
     }
 
     &-table {

src/components/ColorPicker.tsx

@@ -27,6 +27,7 @@ export interface ColorProps {
     classPrefix: string;
     classnames: ClassNamesFn;
     onChange: (value: any) => void;
+    presetColors?: string[];
 }
 
 export interface ColorControlState {
@@ -178,6 +179,7 @@ export class ColorControl extends React.PureComponent<ColorProps, ColorControlSt
             clearable,
             placement,
             classnames: cx,
+            presetColors
         } = this.props;
 
         const isOpened = this.state.isOpened;
@@ -236,6 +238,7 @@ export class ColorControl extends React.PureComponent<ColorProps, ColorControlSt
                             <SketchPicker
                                 disableAlpha={!!~['rgb', 'hex'].indexOf(format as string)}
                                 color={value}
+                                presetColors={presetColors}
                                 onChangeComplete={this.handleChange}
                             />
                         </PopOver>

src/components/Radios.tsx

@@ -43,7 +43,14 @@ export class Radios extends React.Component<RadioProps, any> {
     };
 
     toggleOption(option: Option) {
-        const {value, onChange, joinValues, extractValue, valueField, clearable, delimiter, options} = this.props;
+        const {
+            value,
+            onChange,
+            valueField,
+            clearable,
+            delimiter,
+            options
+        } = this.props;
 
         let valueArray = value2array(value, {
             multiple: false,
@@ -61,14 +68,6 @@ export class Radios extends React.Component<RadioProps, any> {
 
         let newValue = valueArray[0];
 
-        if (newValue && (joinValues || extractValue)) {
-            newValue = newValue[valueField || 'value'];
-        }
-
-        // if (joinValues && newValue) {
-        //     newValue = newValue[valueField || 'value'];
-        // }
-
         onChange && onChange(newValue);
     }
 

src/components/Select.tsx

@@ -44,6 +44,7 @@ export interface OptionProps {
     delimiter?: string;
     clearable?: boolean;
     placeholder?: string;
+    autoFill?: {[propName:string]: any}
 }
 
 export type OptionValue = string | number | null | undefined | Option;
@@ -482,17 +483,12 @@ export class Select extends React.Component<SelectProps, SelectState> {
         if (
             inputValue &&
             creatable &&
-            (!filtedOptions.length ||
+            !find(options, (item) => item[labelField || 'label'] == inputValue)
-                (isOpen &&
-                    loadOptions &&
-                    !matchSorter(options, inputValue, {
-                        keys: [labelField || 'label', valueField || 'value'],
-                    }).length))
         ) {
-            filtedOptions.push({
+            filtedOptions.unshift({
                 [labelField]: inputValue,
                 [valueField]: inputValue,
-                isNew: true,
+                isNew: true
             });
         }
 

src/renderers/Carousel.tsx

@@ -55,7 +55,7 @@ const defaultSchema = {
         <% } %>
     <% } else if (data.hasOwnProperty('html')) { %>
         <%= data.html %>
-    <% } else if (data.hasOwnproperty('item')) { %>
+    <% } else if (data.hasOwnProperty('item')) { %>
         <%= data.item %>
     <% } else { %>
         <%= '未找到渲染数据' %>

src/renderers/Form/ButtonGroup.tsx

@@ -2,12 +2,14 @@ import React from 'react';
 import cx from 'classnames';
 import {
     OptionsControl,
-    OptionsControlProps
+    OptionsControlProps,
+    Option
 } from './Options';
 import {
     Button
 } from '../../types';
-import { getLevelFromClassName } from '../../utils/helper';
+import { getLevelFromClassName, autobind, isEmpty} from '../../utils/helper';
+import { dataMapping } from '../../utils/tpl-builtin';
 
 export interface ButtonGroupProps extends OptionsControlProps {
     buttons?: Array<Button>;
@@ -26,6 +28,20 @@ export default class ButtonGroupControl extends React.Component<ButtonGroupProps
         vertical: false
     }
 
+    @autobind
+    handleToggle(option: Option) {
+        const {
+            onToggle,
+            multiple,
+            autoFill,
+            onBulkChange
+        } = this.props;
+
+        const sendTo = !multiple && autoFill && !isEmpty(autoFill) && dataMapping(autoFill, option as Option);
+        sendTo && onBulkChange(sendTo);
+        onToggle(option)
+    }
+
     render(props = this.props) {
         const {
             render,
@@ -38,7 +54,6 @@ export default class ButtonGroupControl extends React.Component<ButtonGroupProps
             placeholder,
             btnClassName,
             btnActiveClassName,
-            onToggle,
             selectedOptions,
             buttons,
             size,
@@ -69,7 +84,7 @@ export default class ButtonGroupControl extends React.Component<ButtonGroupProps
                     className: cx(option.className, btnClassName),
                     disabled: option.disabled || disabled,
                     onClick: (e:React.UIEvent<any>) => {
-                        onToggle(option);
+                        this.handleToggle(option);
                         e.preventDefault(); // 禁止 onAction 触发
                     }
                 });

src/renderers/Form/Checkboxes.tsx

@@ -7,7 +7,6 @@ import {
 import cx from 'classnames';
 import Checkbox from '../../components/Checkbox';
 import chunk = require('lodash/chunk');
-import { autobind } from '../../utils/helper';
 
 export interface CheckboxesProps extends OptionsControlProps {
     placeholder?: any;

src/renderers/Form/Color.tsx

@@ -11,6 +11,7 @@ export interface ColorProps extends FormControlProps {
     format?: string;
     timeConstrainst?: object;
     closeOnSelect?:boolean;
+    presetColors?: string[];
 };
 
 export interface ColorControlState {

src/renderers/Form/File.tsx

@@ -294,6 +294,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
                 files.splice(idx, 1, newFile);
                 this.current = null;
                 this.setState({
+                    error: error ? error : null,
                     files: files
                 }, this.tick);
             }));

src/renderers/Form/List.tsx

@@ -6,7 +6,8 @@ import {
 } from './Options';
 import { Item } from 'react-bootstrap/lib/Breadcrumb';
 import { Schema } from '../../types';
-import { createObject } from '../../utils/helper';
+import { createObject, isEmpty } from '../../utils/helper';
+import {dataMapping} from '../../utils/tpl-builtin';
 
 export interface ListProps extends OptionsControlProps {
     imageClassName: string;
@@ -38,7 +39,17 @@ export default class ListControl extends React.Component<ListProps, any> {
             return;
         }
 
-        this.props.onToggle(option);
+        const {
+            onToggle,
+            multiple,
+            autoFill,
+            onBulkChange
+        } = this.props;
+
+        const sendTo = !multiple && autoFill && !isEmpty(autoFill) && dataMapping(autoFill, option as Option);
+        sendTo && onBulkChange(sendTo);
+
+        onToggle(option);
     }
 
     render() {

src/renderers/Form/NestedSelect.tsx

@@ -6,7 +6,8 @@ import Checkbox from '../../components/Checkbox';
 import PopOver from '../../components/PopOver';
 import {RootCloseWrapper} from 'react-overlays';
 import {closeIcon, rightArrowIcon} from '../../components/icons';
-import {autobind, flattenTree} from '../../utils/helper'
+import {autobind, flattenTree, isEmpty} from '../../utils/helper';
+import {dataMapping} from '../../utils/tpl-builtin';
 
 import {
     OptionsControl,
@@ -102,10 +103,16 @@ export default class NestedSelectControl extends React.Component<NestedSelectPro
             onChange,
             joinValues,
             extractValue,
-            valueField
+            valueField,
+            autoFill,
+            onBulkChange
         } = this.props;
 
         e.stopPropagation();
+
+        const sendTo = !multiple && autoFill && !isEmpty(autoFill) && dataMapping(autoFill, option);
+        sendTo && onBulkChange(sendTo);
+
         onChange(joinValues ? option[valueField || 'value'] : extractValue ? option[valueField || 'value'] : option);
         !multiple && this.close();
     }

src/renderers/Form/Picker.tsx

@@ -17,6 +17,8 @@ import findIndex = require('lodash/findIndex');
 import Html from '../../components/Html';
 import { filter } from '../../utils/tpl';
 import { closeIcon } from '../../components/icons';
+import {isEmpty} from '../../utils/helper';
+import {dataMapping} from '../../utils/tpl-builtin';
 
 export interface PickerProps extends OptionsControlProps {
     modalMode: 'dialog' | 'drawer';
@@ -127,7 +129,9 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
             multiple,
             options,
             setOptions,
-            onChange
+            onChange,
+            autoFill,
+            onBulkChange
         } = this.props;
 
         let value: any = items;
@@ -148,6 +152,8 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
         });
 
         additionalOptions.length && setOptions(options.concat(additionalOptions));
+        const sendTo = !multiple && autoFill && !isEmpty(autoFill) && dataMapping(autoFill, value as Option);
+        sendTo && onBulkChange(sendTo);
         onChange(value);
     }
 

src/renderers/Form/Radios.tsx

@@ -10,6 +10,8 @@ import {
     OptionsControlProps,
     Option
 } from './Options';
+import {autobind, isEmpty} from '../../utils/helper';
+import {dataMapping} from '../../utils/tpl-builtin';
 
 export interface RadiosProps extends OptionsControlProps {
     placeholder?: any;
@@ -21,6 +23,27 @@ export default class RadiosControl extends React.Component<RadiosProps, any> {
         columnsCount: 1
     }
 
+    @autobind
+    handleChange(option: Option) {
+        const {
+            joinValues,
+            extractValue,
+            valueField,
+            onChange,
+            autoFill,
+            onBulkChange
+        } = this.props;
+
+        const sendTo = autoFill && !isEmpty(autoFill) && dataMapping(autoFill, option);
+        sendTo && onBulkChange && onBulkChange(sendTo);
+
+        if (option && (joinValues || extractValue)) {
+            option = option[valueField || 'value'];
+        }
+
+        onChange && onChange(option);
+    }
+
     render() {
         const {
             className,
@@ -46,7 +69,7 @@ export default class RadiosControl extends React.Component<RadiosProps, any> {
                 className={cx(`${ns}RadiosControl`, className)}
                 value={(typeof value === 'undefined' || value === null) ? '' : value}
                 disabled={disabled}
-                onChange={onChange}
+                onChange={this.handleChange}
                 joinValues={joinValues}
                 extractValue={extractValue}
                 delimiter={delimiter}

src/renderers/Form/Select.tsx

@@ -10,6 +10,8 @@ import find = require('lodash/find');
 import debouce = require('lodash/debounce');
 import {Api} from '../../types';
 import {isEffectiveApi} from '../../utils/api';
+import {isEmpty} from '../../utils/helper';
+import {dataMapping} from '../../utils/tpl-builtin';
 
 export interface SelectProps extends OptionsControlProps {
     autoComplete?: Api;
@@ -55,7 +57,9 @@ export default class SelectControl extends React.Component<SelectProps, any> {
             type,
             onChange,
             setOptions,
-            options
+            options,
+            autoFill,
+            onBulkChange
         } = this.props;
 
         let newValue: string | Option | Array<Option> | void = value;
@@ -83,6 +87,8 @@ export default class SelectControl extends React.Component<SelectProps, any> {
         // 不设置没法回显
         additonalOptions.length && setOptions(options.concat(additonalOptions));
 
+        const sendTo = !multiple && autoFill && !isEmpty(autoFill) && dataMapping(autoFill, value as Option);
+        sendTo && onBulkChange(sendTo);
         onChange(newValue);
     }