amis 1.4.2-beta.1 → 1.4.2-beta.15

package/src/components/PickerContainer.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import {autobind} from '../utils/helper';
+import Overlay from './Overlay';
+import PopOver from './PopOver';
+import {findDOMNode} from 'react-dom';
+import Modal from './Modal';
+import {themeable, ThemeProps} from '../theme';
+import {localeable, LocaleProps} from '../locale';
+import Button from './Button';
+
+export interface PickerContainerProps extends ThemeProps, LocaleProps {
+  title?: string;
+  children: (props: {
+    onClick: (e: React.MouseEvent) => void;
+    isOpened: boolean;
+  }) => JSX.Element;
+  popOverRender: (props: {
+    onClose: () => void;
+    value: any;
+    onChange: (value: any) => void;
+  }) => JSX.Element;
+  value?: any;
+  onConfirm?: (value?: any) => void;
+  onCancel?: () => void;
+  popOverContainer?: any;
+  popOverClassName?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+}
+
+export interface PickerContainerState {
+  isOpened: boolean;
+  value?: any;
+}
+
+export class PickerContainer extends React.Component<
+  PickerContainerProps,
+  PickerContainerState
+> {
+  state: PickerContainerState = {
+    isOpened: false,
+    value: this.props.value
+  };
+
+  componentDidUpdate(prevProps: PickerContainerProps) {
+    const props = this.props;
+
+    if (props.value !== prevProps.value) {
+      this.setState({
+        value: props.value
+      });
+    }
+  }
+
+  @autobind
+  handleClick() {
+    this.setState({
+      isOpened: true
+    });
+  }
+
+  @autobind
+  close(e?: any, callback?: () => void) {
+    this.setState(
+      {
+        isOpened: false
+      },
+      callback || (() => this.props.onCancel?.())
+    );
+  }
+
+  @autobind
+  handleChange(value: any) {
+    this.setState({
+      value
+    });
+  }
+
+  @autobind
+  confirm() {
+    const {onConfirm} = this.props;
+
+    this.close(undefined, () => onConfirm?.(this.state.value));
+  }
+
+  render() {
+    const {
+      children,
+      popOverRender: dropdownRender,
+      title,
+      translate: __,
+      size
+    } = this.props;
+    return (
+      <>
+        {children({
+          isOpened: this.state.isOpened,
+          onClick: this.handleClick
+        })}
+
+        <Modal
+          size={size}
+          closeOnEsc
+          show={this.state.isOpened}
+          onHide={this.close}
+        >
+          <Modal.Header onClose={this.close}>
+            {__(title || 'Select.placeholder')}
+          </Modal.Header>
+          <Modal.Body>
+            {dropdownRender({
+              onClose: this.close,
+              value: this.state.value,
+              onChange: this.handleChange
+            })}
+          </Modal.Body>
+          <Modal.Footer>
+            <Button onClick={this.close}>{__('cancel')}</Button>
+            <Button onClick={this.confirm} level="primary">
+              {__('confirm')}
+            </Button>
+          </Modal.Footer>
+        </Modal>
+      </>
+    );
+  }
+}
+
+export default themeable(localeable(PickerContainer));

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

@@ -54,7 +54,7 @@ export class SearchBox extends React.Component<SearchBoxProps> {
 
   @autobind
   handleCancel() {
-    const {onActiveChange, onChange, onCancel} = this.props;
+    const {onActiveChange, onCancel, onChange} = this.props;
     onActiveChange?.(false);
     onCancel?.();
     onChange?.('');
@@ -62,14 +62,14 @@ export class SearchBox extends React.Component<SearchBoxProps> {
 
   @autobind
   handleChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const {onChange, onSearch, searchImediately} = this.props;
+    const {searchImediately, onChange} = this.props;
     onChange?.(e.currentTarget.value);
     searchImediately && this.lazyEmitSearch();
   }
 
   @autobind
   handleSearch() {
-    const {value, onSearch} = this.props;
+    const {onSearch, value} = this.props;
     onSearch?.(value || '');
   }
 
@@ -84,14 +84,13 @@ export class SearchBox extends React.Component<SearchBoxProps> {
   render() {
     const {
       classnames: cx,
-      value,
       active,
       name,
       className,
-      onChange,
       disabled,
       placeholder,
       mini,
+      value,
       translate: __
     } = this.props;
 

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'
     })
   )