amis 1.4.2-beta.6 → 1.5.0

package/src/components/Progress.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import cx from 'classnames';
+import {Circle} from 'rc-progress';
+import {ClassNamesFn, themeable, ThemeProps} from '../theme';
+import {SchemaClassName} from '../Schema';
+interface ProgressProps extends ThemeProps {
+  type: 'line' | 'circle' | 'dashboard';
+  showLabel: boolean;
+  value: number;
+  stripe?: boolean;
+  animate?: boolean;
+  map?: Array<string>;
+  placeholder?: string;
+  format?: (value?: number) => JSX.Element;
+  gapDegree?: number;
+  gapPosition?: 'top' | 'bottom' | 'left' | 'right';
+  strokeWidth?: number;
+  classNames?: string;
+  progressClassName?: SchemaClassName;
+  progressBarClassName?: SchemaClassName;
+  classnames: ClassNamesFn;
+}
+export class Progress extends React.Component<ProgressProps, Object> {
+  static defaultProps: Partial<ProgressProps> = {
+    type: 'line',
+    placeholder: '-',
+    progressClassName: '',
+    progressBarClassName: '',
+    map: ['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success'],
+    showLabel: true
+  };
+
+  autoClassName(value: number) {
+    const map = this.props.map;
+    if (!map || !map.length) {
+      return '';
+    }
+    let index = Math.floor((value * map.length) / 100);
+    index = Math.max(0, Math.min(map.length - 1, index));
+    return map[index];
+  }
+
+  getLabel(prefixCls: string) {
+    const {value, format, showLabel, classnames: cx} = this.props;
+    if (!showLabel) {
+      return null;
+    }
+    const textFormatter = format || (value => `${value}%`);
+    const content = textFormatter(value);
+    return (
+      <span className={cx(`${prefixCls}-text`)} key="value">
+        {content}
+      </span>
+    );
+  }
+
+  render() {
+    const {
+      classNames,
+      progressClassName,
+      progressBarClassName,
+      type,
+      value,
+      placeholder,
+      stripe,
+      animate,
+      showLabel,
+      gapDegree,
+      gapPosition,
+      strokeWidth,
+      classnames: cx
+    } = this.props;
+
+    const isLineType = type === 'line';
+    const prefixCls = isLineType ? 'Progress-line' : 'Progress-circle';
+
+    let viewValue: React.ReactNode = (
+      <span className="text-muted">{placeholder}</span>
+    );
+
+    if (type === 'line') {
+      viewValue = [
+        <div
+          key="progress"
+          className={cx(prefixCls, progressClassName, {
+            [`${prefixCls}-no-label`]: !showLabel
+          })}
+        >
+          <div className={cx(`${prefixCls}-inter`)}>
+            <div
+              className={cx(
+                `${prefixCls}-bar`,
+                progressBarClassName || this.autoClassName(value),
+                {[`${prefixCls}-bar--stripe`]: stripe},
+                {[`${prefixCls}-bar--animate`]: animate && !stripe},
+                {[`${prefixCls}-bar--stripe-animate`]: animate && stripe}
+              )}
+              title={`${value}%`}
+              style={{
+                width: `${value}%`
+              }}
+            />
+          </div>
+        </div>,
+        this.getLabel(prefixCls)
+      ];
+    } else if (type === 'circle' || type === 'dashboard') {
+      const circleWidth = strokeWidth || 6;
+      const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top';
+      const getGapDegree = () => {
+        if (gapDegree || gapDegree === 0) {
+          return gapDegree;
+        }
+        if (type === 'dashboard') {
+          return 75;
+        }
+        return undefined;
+      };
+
+      viewValue = [
+        <div className={cx(prefixCls)}>
+          <Circle
+            percent={value}
+            strokeColor=""
+            strokeWidth={circleWidth}
+            trailWidth={circleWidth}
+            prefixCls={this.autoClassName(value)}
+            gapDegree={getGapDegree()}
+            gapPosition={gapPos}
+          />
+          {this.getLabel(prefixCls)}
+        </div>
+      ];
+    }
+
+    return <div className={cx('Progress', classNames)}>{viewValue}</div>;
+  }
+}
+
+export default themeable(Progress);

package/src/components/Radios.tsx

@@ -11,6 +11,7 @@
  *      disabled: false
  *   }
  * ]
+ *
  */
 
 import React from 'react';
@@ -48,14 +49,8 @@ export class Radios extends React.Component<RadioProps, any> {
   };
 
   toggleOption(option: Option) {
-    const {
-      value,
-      onChange,
-      valueField,
-      clearable,
-      delimiter,
-      options
-    } = this.props;
+    const {value, onChange, valueField, clearable, delimiter, options} =
+      this.props;
 
     let valueArray = value2array(value, {
       multiple: false,

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/Select.tsx

@@ -20,7 +20,8 @@ import {
   findTree,
   autobind,
   ucFirst,
-  normalizeNodePath
+  normalizeNodePath,
+  isMobile
 } from '../utils/helper';
 import find from 'lodash/find';
 import isPlainObject from 'lodash/isPlainObject';
@@ -35,6 +36,7 @@ import {LocaleProps, localeable} from '../locale';
 import Spinner from './Spinner';
 import {Option, Options} from '../Schema';
 import {RemoteOptionsProps, withRemoteConfig} from './WithRemoteConfig';
+import PickerColumn from './PickerColumn';
 
 export {Option, Options};
 
@@ -317,6 +319,7 @@ interface SelectProps extends OptionProps, ThemeProps, LocaleProps {
   defaultCheckAll?: boolean;
   simpleValue?: boolean;
   defaultOpen?: boolean;
+  useMobileUI?: boolean;
 
   /**
    * 边框模式，全边框，还是半边框，或者没边框。
@@ -326,6 +329,11 @@ interface SelectProps extends OptionProps, ThemeProps, LocaleProps {
    * 是否隐藏已选项
    */
   hideSelected?: boolean;
+
+  /**
+   * 移动端样式类名
+   */
+  mobileClassName?: string;
 }
 
 interface SelectState {
@@ -335,6 +343,7 @@ interface SelectState {
   inputValue: string;
   highlightedIndex: number;
   selection: Array<Option>;
+  pickerSelectItem: any;
 }
 
 export class Select extends React.Component<SelectProps, SelectState> {
@@ -368,6 +377,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
 
     this.open = this.open.bind(this);
     this.close = this.close.bind(this);
+    this.confirm = this.confirm.bind(this);
+    this.handlePickerChange = this.handlePickerChange.bind(this);
     this.toggle = this.toggle.bind(this);
     this.onBlur = this.onBlur.bind(this);
     this.onFocus = this.onFocus.bind(this);
@@ -391,7 +402,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
       inputValue: '',
       highlightedIndex: -1,
       selection: value2array(props.value, props),
-      itemHeight: 35
+      itemHeight: 35,
+      pickerSelectItem: ''
     };
   }
 
@@ -435,6 +447,14 @@ export class Select extends React.Component<SelectProps, SelectState> {
     });
   }
 
+  confirm() {
+    // @ts-ignore
+    this.handleChange(this.state.pickerSelectItem);
+    this.setState({
+      isOpen: false
+    });
+  }
+
   toggle(e?: React.MouseEvent<HTMLDivElement>) {
     if (
       e &&
@@ -549,6 +569,16 @@ export class Select extends React.Component<SelectProps, SelectState> {
     );
   }
 
+  handlePickerChange(selectItem: any, index: number, confirm: boolean) {
+    this.setState({
+      pickerSelectItem: selectItem
+    });
+    // 直接选中选项
+    if (confirm) {
+      this.handleChange(selectItem);
+    }
+  }
+
   handleChange(selectItem: any) {
     const {onChange, multiple, simpleValue, valueField} = this.props;
     let {selection} = this.state;
@@ -716,6 +746,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
     const {
       popOverContainer,
       options,
+      value,
       valueField,
       labelField,
       noResultsText,
@@ -737,7 +768,9 @@ export class Select extends React.Component<SelectProps, SelectState> {
       overlayPlacement,
       translate: __,
       hideSelected,
-      renderMenu
+      renderMenu,
+      mobileClassName,
+      useMobileUI = false
     } = this.props;
     const {selection} = this.state;
 
@@ -882,7 +915,22 @@ export class Select extends React.Component<SelectProps, SelectState> {
       );
     };
 
-    const menu = (
+    const mobileUI = isMobile() && useMobileUI;
+    const menu = mobileUI ? (
+      <PickerColumn
+        mobileClassName={mobileClassName}
+        labelField={'label'}
+        readonly={false}
+        className={'PickerColumns-column'}
+        value={value && value[0]}
+        swipeDuration={1000}
+        visibleItemCount={5}
+        options={filtedOptions}
+        onChange={checkAll ? noop : this.handlePickerChange}
+        onClose={this.close}
+        onConfirm={this.confirm}
+      ></PickerColumn>
+    ) : (
       <div
         ref={this.menu}
         className={cx('Select-menu', {
@@ -978,7 +1026,11 @@ export class Select extends React.Component<SelectProps, SelectState> {
       >
         <PopOver
           overlay
-          className={cx('Select-popover', popoverClassName)}
+          className={cx(
+            'Select-popover',
+            popoverClassName,
+            mobileUI ? 'PopOver-isMobile' : ''
+          )}
           style={{
             minWidth: this.target ? this.target.offsetWidth : 'auto'
           }}

package/src/components/{Checkboxes.tsx → Selection.tsx}

@@ -16,29 +16,33 @@ import isEqual from 'lodash/isEqual';
 import {LocaleProps, localeable} from '../locale';
 // import isPlainObject from 'lodash/isPlainObject';
 
-export interface BaseCheckboxesProps extends ThemeProps, LocaleProps {
+export interface BaseSelectionProps extends ThemeProps, LocaleProps {
   options: Options;
   className?: string;
   placeholder?: string;
-  value?: Array<any>;
-  onChange?: (value: Array<Option>) => void;
+  value?: any | Array<any>;
+  multiple?: boolean;
+  clearable?: boolean;
+  onChange?: (value: Array<any> | any) => void;
   onDeferLoad?: (option: Option) => void;
   inline?: boolean;
   labelClassName?: string;
   option2value?: (option: Option) => any;
   itemClassName?: string;
   itemRender: (option: Option) => JSX.Element;
-
   disabled?: boolean;
+  onClick?: (e: React.MouseEvent) => void;
 }
 
-export class BaseCheckboxes<
-  T extends BaseCheckboxesProps = BaseCheckboxesProps,
+export class BaseSelection<
+  T extends BaseSelectionProps = BaseSelectionProps,
   S = any
 > extends React.Component<T, S> {
   static defaultProps = {
     placeholder: 'placeholder.noOption',
-    itemRender: (option: Option) => <span>{option.label}</span>
+    itemRender: (option: Option) => <span>{option.label}</span>,
+    multiple: true,
+    clearable: false
   };
 
   static value2array(
@@ -62,36 +66,82 @@ export class BaseCheckboxes<
     });
   }
 
+  static resolveSelected(
+    value: any,
+    options: Options,
+    option2value: (option: Option) => any = (option: Option) => option
+  ) {
+    value = Array.isArray(value) ? value[0] : value;
+    return findTree(options, option => isEqual(option2value(option), value));
+  }
+
+  // 获取两个数组的交集
+  intersectArray(
+    arr1: undefined | Array<Option>,
+    arr2: undefined | Array<Option>
+  ): Array<Option> {
+    if (!Array.isArray(arr1) || !Array.isArray(arr2)) {
+      return [];
+    }
+    const len1 = arr1.length;
+    const len2 = arr2.length;
+    if (len1 < len2) {
+      return this.intersectArray(arr2, arr1);
+    }
+    return Array.from(new Set(arr1.filter(item => arr2.includes(item))));
+  }
+
   toggleOption(option: Option) {
-    const {value, onChange, option2value, options, disabled} = this.props;
+    const {
+      value,
+      onChange,
+      option2value,
+      options,
+      disabled,
+      multiple,
+      clearable
+    } = this.props;
 
     if (disabled || option.disabled) {
       return;
     }
 
-    let valueArray = BaseCheckboxes.value2array(value, options, option2value);
+    let valueArray = BaseSelection.value2array(value, options, option2value);
     let idx = valueArray.indexOf(option);
 
-    if (~idx) {
+    if (~idx && (multiple || clearable)) {
       valueArray.splice(idx, 1);
-    } else {
+    } else if (multiple) {
       valueArray.push(option);
+    } else {
+      valueArray = [option];
     }
 
     let newValue: string | Array<Option> = option2value
       ? valueArray.map(item => option2value(item))
       : valueArray;
 
-    onChange && onChange(newValue);
+    onChange && onChange(multiple ? newValue : newValue[0]);
   }
 
   @autobind
   toggleAll() {
-    const {value, onChange, option2value, options} = this.props;
+    const {value, onChange, option2value, options, multiple} = this.props;
+    if (multiple) {
+      return;
+    }
+
     let valueArray: Array<Option> = [];
 
-    if (!Array.isArray(value) || !value.length) {
-      valueArray = options.filter(option => !option.disabled);
+    const availableOptions = options.filter(option => !option.disabled);
+    const intersectOptions = this.intersectArray(value, availableOptions);
+
+    if (!Array.isArray(value)) {
+      valueArray = availableOptions;
+    } else if (intersectOptions.length < availableOptions.length) {
+      valueArray = Array.from(new Set([...value, ...availableOptions]));
+    } else {
+      valueArray = value.filter(item => !availableOptions.includes(item));
     }
 
     let newValue: string | Array<Option> = option2value
@@ -113,17 +163,20 @@ export class BaseCheckboxes<
       classnames: cx,
       option2value,
       itemClassName,
-      itemRender
+      itemRender,
+      multiple,
+      onClick
     } = this.props;
 
     const __ = this.props.translate;
 
-    let valueArray = BaseCheckboxes.value2array(value, options, option2value);
+    let valueArray = BaseSelection.value2array(value, options, option2value);
     let body: Array<React.ReactNode> = [];
 
     if (Array.isArray(options) && options.length) {
       body = options.map((option, key) => (
         <Checkbox
+          type={multiple ? 'checkbox' : 'radio'}
           className={cx(itemClassName, option.className)}
           key={key}
           onChange={() => this.toggleOption(option)}
@@ -140,10 +193,11 @@ export class BaseCheckboxes<
     return (
       <div
         className={cx(
-          'Checkboxes',
+          'Selection',
           className,
-          inline ? 'Checkboxes--inline' : ''
+          inline ? 'Selection--inline' : ''
         )}
+        onClick={onClick}
       >
         {body && body.length ? body : <div>{__(placeholder)}</div>}
       </div>
@@ -151,11 +205,11 @@ export class BaseCheckboxes<
   }
 }
 
-export class Checkboxes extends BaseCheckboxes {}
+export class Selection extends BaseSelection {}
 
 export default themeable(
   localeable(
-    uncontrollable(Checkboxes, {
+    uncontrollable(Selection, {
       value: 'onChange'
     })
   )

package/src/components/{TableCheckboxes.tsx → TableSelection.tsx}

@@ -1,4 +1,4 @@
-import {BaseCheckboxes, BaseCheckboxesProps} from './Checkboxes';
+import {BaseSelection, BaseSelectionProps} from './Selection';
 import {themeable} from '../theme';
 import React from 'react';
 import {uncontrollable} from 'uncontrollable';
@@ -7,7 +7,7 @@ import {Option} from './Select';
 import {resolveVariable} from '../utils/tpl-builtin';
 import {localeable} from '../locale';
 
-export interface TableCheckboxesProps extends BaseCheckboxesProps {
+export interface TableSelectionProps extends BaseSelectionProps {
   columns: Array<{
     name: string;
     label: string;
@@ -25,9 +25,9 @@ export interface TableCheckboxesProps extends BaseCheckboxesProps {
   ) => JSX.Element;
 }
 
-export class TableCheckboxes extends BaseCheckboxes<TableCheckboxesProps> {
+export class TableSelection extends BaseSelection<TableSelectionProps> {
   static defaultProps = {
-    ...BaseCheckboxes.defaultProps,
+    ...BaseSelection.defaultProps,
     cellRender: (
       column: {
         name: string;
@@ -50,9 +50,16 @@ export class TableCheckboxes extends BaseCheckboxes<TableCheckboxesProps> {
   }
 
   renderTHead() {
-    const {options, classnames: cx, value, disabled, option2value} = this.props;
+    const {
+      options,
+      classnames: cx,
+      value,
+      disabled,
+      option2value,
+      multiple
+    } = this.props;
     let columns = this.getColumns();
-    let valueArray = BaseCheckboxes.value2array(value, options, option2value);
+    let valueArray = BaseSelection.value2array(value, options, option2value);
     const availableOptions = options.filter(option => !option.disabled);
     let partialChecked = false;
     let allChecked = !!availableOptions.length;
@@ -70,9 +77,10 @@ export class TableCheckboxes extends BaseCheckboxes<TableCheckboxesProps> {
     return (
       <thead>
         <tr>
-          {Array.isArray(options) && options.length ? (
+          {multiple && Array.isArray(options) && options.length ? (
             <th className={cx('Table-checkCell')}>
               <Checkbox
+                key="checkbox"
                 size="sm"
                 disabled={disabled}
                 onChange={this.toggleAll}
@@ -97,11 +105,13 @@ export class TableCheckboxes extends BaseCheckboxes<TableCheckboxesProps> {
       cellRender,
       value,
       disabled,
+      multiple,
       option2value,
-      translate: __
+      translate: __,
+      itemClassName
     } = this.props;
     const columns = this.getColumns();
-    let valueArray = BaseCheckboxes.value2array(value, options, option2value);
+    let valueArray = BaseSelection.value2array(value, options, option2value);
 
     return (
       <tbody>
@@ -113,10 +123,18 @@ export class TableCheckboxes extends BaseCheckboxes<TableCheckboxesProps> {
               <tr
                 key={rowIndex}
                 onClick={e => e.defaultPrevented || this.toggleOption(option)}
+                className={cx(
+                  itemClassName,
+                  option.className,
+                  disabled || option.disabled ? 'is-disabled' : '',
+                  !!~valueArray.indexOf(option) ? 'is-active' : ''
+                )}
               >
-                <td className={cx('Table-checkCell')}>
-                  <Checkbox size="sm" checked={checked} disabled={disabled} />
-                </td>
+                {multiple ? (
+                  <td className={cx('Table-checkCell')} key="checkbox">
+                    <Checkbox size="sm" checked={checked} disabled={disabled} />
+                  </td>
+                ) : null}
                 {columns.map((column, colIndex) => (
                   <td key={colIndex}>
                     {cellRender(column, option, colIndex, rowIndex)}
@@ -144,10 +162,11 @@ export class TableCheckboxes extends BaseCheckboxes<TableCheckboxesProps> {
       classnames: cx,
       option2value,
       itemClassName,
-      itemRender
+      itemRender,
+      multiple
     } = this.props;
 
-    let valueArray = BaseCheckboxes.value2array(value, options, option2value);
+    let valueArray = BaseSelection.value2array(value, options, option2value);
     let body: Array<React.ReactNode> = [];
 
     if (Array.isArray(options) && options.length) {
@@ -155,30 +174,32 @@ export class TableCheckboxes extends BaseCheckboxes<TableCheckboxesProps> {
         <div
           key={key}
           className={cx(
-            'TableCheckboxes-item',
+            'TableSelection-item',
             itemClassName,
             option.className,
             disabled || option.disabled ? 'is-disabled' : ''
           )}
           onClick={() => this.toggleOption(option)}
         >
-          <div className={cx('TableCheckboxes-itemLabel')}>
+          <div className={cx('TableSelection-itemLabel')}>
             {itemRender(option)}
           </div>
 
-          <Checkbox
-            size="sm"
-            checked={!!~valueArray.indexOf(option)}
-            disabled={disabled || option.disabled}
-            labelClassName={labelClassName}
-            description={option.description}
-          />
+          {multiple ? (
+            <Checkbox
+              size="sm"
+              checked={!!~valueArray.indexOf(option)}
+              disabled={disabled || option.disabled}
+              labelClassName={labelClassName}
+              description={option.description}
+            />
+          ) : null}
         </div>
       ));
     }
 
     return (
-      <div className={cx('TableCheckboxes', className)}>
+      <div className={cx('TableSelection', className)}>
         <div className={cx('Table-content')}>
           <table className={cx('Table-table')}>
             {this.renderTHead()}
@@ -192,7 +213,7 @@ export class TableCheckboxes extends BaseCheckboxes<TableCheckboxesProps> {
 
 export default themeable(
   localeable(
-    uncontrollable(TableCheckboxes, {
+    uncontrollable(TableSelection, {
       value: 'onChange'
     })
   )