amis 1.5.6 → 1.6.1-beta.0

package/src/components/PickerColumn.tsx

@@ -21,6 +21,7 @@ import useTouch from '../hooks/use-touch';
 
 export interface PickerColumnItem {
   labelField?: string;
+  valueField?: string;
   readonly?: boolean;
   value?: PickerOption;
   swipeDuration?: number;
@@ -33,7 +34,7 @@ export interface PickerColumnItem {
     index?: number,
     confirm?: boolean
   ) => void;
-};
+}
 
 export interface PickerColumnProps extends PickerColumnItem, ThemeProps {}
 
@@ -64,12 +65,13 @@ function getElementTranslateY(element: HTMLElement | null) {
 function isOptionDisabled(option: PickerOption) {
   return isObject(option) && option.disabled;
 }
-  
+
 const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
   const {
     visibleItemCount = 5,
-    itemHeight = 30,
+    itemHeight = 48,
     value,
+    valueField = 'value',
     swipeDuration = 1000,
     labelField = 'text',
     options = [],
@@ -88,7 +90,24 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
 
   const touch = useTouch();
   const count = options.length;
-  const defaultIndex = options.findIndex(item => item === value);
+
+  const getOptionText = (option: [] | PickerOption) => {
+    if (isObject(option) && labelField in option) {
+      //@ts-ignore
+      return option[labelField];
+    }
+    return option;
+  };
+
+  const getOptionValue = (option: [] | PickerOption) => {
+    if (isObject(option) && valueField in option) {
+      //@ts-ignore
+      return option[valueField];
+    }
+    return option;
+  };
+
+  const defaultIndex = options.findIndex(item => getOptionValue(item) === value);
 
   const baseOffset = useMemo(() => {
     // 默认转入第一个选项的位置
@@ -134,12 +153,9 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
       if (emitChange && props.onChange) {
         requestAnimationFrame(
           () => {
-            props.onChange?.(options[index], index, confirm);
+            props.onChange?.(getOptionValue(options[index]), index, confirm);
           }
         );
-        // setTimeout(() => {
-        //   props.onChange?.(options[index], index, confirm);
-        // }, 0);
       }
     };
 
@@ -156,7 +172,7 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
   const setOptions = (options: Array<PickerOption>) => {
     if (JSON.stringify(options) !== JSON.stringify(state.options)) {
       updateState({options});
-      const index = options.findIndex(item => item === value) || 0;
+      const index = options.findIndex(item => getOptionValue(item) === value) || 0;
       setIndex(index, true, true);
     }
   };
@@ -170,14 +186,6 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
     setIndex(index, true, true);
   };
 
-  const getOptionText = (option: [] | PickerOption) => {
-    if (isObject(option) && labelField in option) {
-      //@ts-ignore
-      return option[labelField];
-    }
-    return option;
-  };
-
   const getIndexByOffset = (offset: number) =>
     range(Math.round(-offset / itemHeight), 0, count - 1);
 
@@ -301,7 +309,7 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
           onClickItem(index);
         }
       };
-      
+
       const childData = {
         className: 'text-ellipsis',
         children: text
@@ -357,23 +365,23 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
     transitionProperty: state.duration ? 'all' : 'none'
   };
   return (
-      <div
-          ref={root}
-          className={props.classnames('PickerColumns', props.className)}
-          onTouchStart={onTouchStart}
-          onTouchMove={onTouchMove}
-          onTouchEnd={onTouchEnd}
-          onTouchCancel={onTouchEnd}
+    <div
+      ref={root}
+      className={props.classnames('PickerColumns', props.className)}
+      onTouchStart={onTouchStart}
+      onTouchMove={onTouchMove}
+      onTouchEnd={onTouchEnd}
+      onTouchCancel={onTouchEnd}
+    >
+      <ul
+        ref={wrapper}
+        style={wrapperStyle}
+        className={props.classnames('PickerColumns-columnWrapper')}
+        onTransitionEnd={stopMomentum}
       >
-          <ul
-          ref={wrapper}
-          style={wrapperStyle}
-          className={props.classnames('PickerColumns-columnWrapper')}
-          onTransitionEnd={stopMomentum}
-          >
-          {renderOptions()}
-          </ul>
-      </div>
+        {renderOptions()}
+      </ul>
+    </div>
   );
 });
 
@@ -381,7 +389,7 @@ PickerColumn.defaultProps = {
   options: [],
   visibleItemCount: 5,
   swipeDuration: 1000,
-  itemHeight: 30
+  itemHeight: 48
 };
 
 export default themeable(
@@ -389,4 +397,3 @@ export default themeable(
     value: 'onChange'
   })
 );
-

package/src/components/PickerContainer.tsx

@@ -19,6 +19,8 @@ export interface PickerContainerProps extends ThemeProps, LocaleProps {
     onClose: () => void;
     value: any;
     onChange: (value: any) => void;
+    setState: (state: any) => void;
+    [propName: string]: any;
   }) => JSX.Element;
   value?: any;
   onConfirm?: (value?: any) => void;
@@ -83,6 +85,15 @@ export class PickerContainer extends React.Component<
     this.close(undefined, () => onConfirm?.(this.state.value));
   }
 
+  @autobind
+  updateState(state: any = {}) {
+    const {isOpened, ...rest} = state;
+    this.setState({
+      ...this.state,
+      ...rest
+    });
+  }
+
   render() {
     const {
       children,
@@ -112,8 +123,9 @@ export class PickerContainer extends React.Component<
           ) : null}
           <Modal.Body>
             {popOverRender({
+              ...(this.state as any),
+              setState: this.updateState,
               onClose: this.close,
-              value: this.state.value,
               onChange: this.handleChange
             })}
           </Modal.Body>

package/src/components/PopOverContainer.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import {autobind} from '../utils/helper';
+import {autobind, isMobile} from '../utils/helper';
 import Overlay from './Overlay';
 import PopOver from './PopOver';
+import PopUp from './PopUp';
 import {findDOMNode} from 'react-dom';
 
 export interface PopOverContainerProps {
@@ -13,6 +14,7 @@ export interface PopOverContainerProps {
   popOverRender: (props: {onClose: () => void}) => JSX.Element;
   popOverContainer?: any;
   popOverClassName?: string;
+  useMobileUI?: boolean;
 }
 
 export interface PopOverContainerState {
@@ -60,11 +62,13 @@ export class PopOverContainer extends React.Component<
 
   render() {
     const {
+      useMobileUI,
       children,
       popOverContainer,
       popOverClassName,
       popOverRender: dropdownRender
     } = this.props;
+    const mobileUI = useMobileUI && isMobile();
     return (
       <>
         {children({
@@ -72,26 +76,36 @@ export class PopOverContainer extends React.Component<
           onClick: this.handleClick,
           ref: this.targetRef
         })}
-
-        <Overlay
-          container={popOverContainer || this.getParent}
-          target={this.getTarget}
-          placement={'auto'}
-          show={this.state.isOpened}
-        >
-          <PopOver
-            overlay
+        {mobileUI ? (
+          <PopUp
+            isShow={this.state.isOpened}
+            container={popOverContainer}
             className={popOverClassName}
-            style={{
-              minWidth: this.target
-                ? Math.max(this.target.offsetWidth, 100)
-                : 'auto'
-            }}
             onHide={this.close}
           >
             {dropdownRender({onClose: this.close})}
-          </PopOver>
-        </Overlay>
+          </PopUp>
+        ) : (
+          <Overlay
+            container={popOverContainer || this.getParent}
+            target={this.getTarget}
+            placement={'auto'}
+            show={this.state.isOpened}
+          >
+            <PopOver
+              overlay
+              className={popOverClassName}
+              style={{
+                minWidth: this.target
+                  ? Math.max(this.target.offsetWidth, 100)
+                  : 'auto'
+              }}
+              onHide={this.close}
+            >
+              {dropdownRender({onClose: this.close})}
+            </PopOver>
+          </Overlay>
+        )}
       </>
     );
   }

package/src/components/PopUp.tsx

@@ -5,7 +5,8 @@
  */
 
 import React from 'react';
-import {ClassNamesFn, themeable} from '../theme';
+import {themeable, ThemeProps} from '../theme';
+import {localeable, LocaleProps} from '../locale';
 import Transition, {
   ENTERED,
   EXITING,
@@ -13,23 +14,24 @@ import Transition, {
   ENTERING
 } from 'react-transition-group/Transition';
 import Portal from 'react-overlays/Portal';
-import { Icon } from './icons';
+import {Icon} from './icons';
+import Button from './Button';
 
-
-export interface PopUpPorps {
+export interface PopUpPorps extends ThemeProps, LocaleProps {
+  title?: string;
   className?: string;
   style?: {
     [styleName: string]: string;
   };
   overlay?: boolean;
   onHide?: () => void;
-  classPrefix: string;
-  classnames: ClassNamesFn;
-  [propName: string]: any;
   isShow?: boolean;
   container?: any;
-  hideClose?: boolean;
+  showConfirm?: boolean;
+  onConfirm?: (value: any) => void;
+  showClose?: boolean;
   placement?: 'left' | 'center' | 'right';
+  header?: JSX.Element;
 }
 
 const fadeStyles: {
@@ -41,16 +43,28 @@ const fadeStyles: {
   [ENTERING]: 'in'
 };
 export class PopUp extends React.PureComponent<PopUpPorps> {
+  scrollTop: number = 0;
   static defaultProps = {
     className: '',
     overlay: true,
     isShow: false,
     container: document.body,
-    hideClose: false,
+    showClose: true,
+    onConfirm: () => {}
   };
-
-  componentDidMount() {
-
+  componentDidUpdate() {
+    if (this.props.isShow) {
+      this.scrollTop =
+        document.body.scrollTop || document.documentElement.scrollTop;
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'auto';
+      document.body.scrollTop = this.scrollTop;
+    }
+  }
+  componentWillUnmount() {
+    document.body.style.overflow = 'auto';
+    document.body.scrollTop = this.scrollTop;
   }
   handleClick(e: React.MouseEvent) {
     e.stopPropagation();
@@ -59,75 +73,88 @@ export class PopUp extends React.PureComponent<PopUpPorps> {
   render() {
     const {
       style,
+      title,
       children,
       overlay,
       onHide,
+      onConfirm,
       classPrefix: ns,
       classnames: cx,
       className,
       isShow,
       container,
-      hideClose,
-      placement='center',
+      showConfirm,
+      translate: __,
+      showClose,
+      header,
+      placement = 'center',
       ...rest
     } = this.props;
 
     const outerStyle: any = {
-      ...style,
+      ...style
     };
     delete outerStyle.top;
     return (
       <Portal container={container}>
-        <Transition
-          mountOnEnter
-          unmountOnExit
-          in={isShow}
-          timeout={500}
-          appear
-        >
+        <Transition mountOnEnter unmountOnExit in={isShow} timeout={500} appear>
           {(status: string) => {
-              return (
-                <div
-                  className={cx(
-                    `${ns}PopUp`,
-                    className,
-                    fadeStyles[status]
-                  )}
-                  style={outerStyle}
-                  {...rest}
-                  onClick={this.handleClick}
-                >
-                  {overlay && (
-                    <div className={`${ns}PopUp-overlay`} onClick={onHide}/>
-                  )}
-                  <div className={cx(
-                    `${ns}PopUp-inner`
+            return (
+              <div
+                className={cx(`${ns}PopUp`, className, fadeStyles[status])}
+                style={outerStyle}
+                {...rest}
+                onClick={this.handleClick}
+              >
+                {overlay && (
+                  <div className={`${ns}PopUp-overlay`} onClick={onHide} />
+                )}
+                <div className={cx(`${ns}PopUp-inner`)}>
+                  {!showConfirm && showClose ? (
+                    <div className={cx(`${ns}PopUp-closeWrap`)}>
+                      {header}
+                      <Icon
+                        icon="close"
+                        className={cx('icon', `${ns}PopUp-close`)}
+                        onClick={onHide}
+                      />
+                    </div>
+                  ) : null}
+                  {showConfirm && (
+                    <div className={cx(`${ns}PopUp-toolbar`)}>
+                      <Button
+                        className={cx(`${ns}PopUp-cancel`)}
+                        level="text"
+                        onClick={onHide}
+                      >
+                        {__('cancel')}
+                      </Button>
+                      {title && (
+                        <span className={cx(`${ns}PopUp-title`)}>{title}</span>
+                      )}
+                      <Button
+                        className={cx(`${ns}PopUp-confirm`)}
+                        level="text"
+                        onClick={onConfirm}
+                      >
+                        {__('confirm')}
+                      </Button>
+                    </div>
                   )}
+                  <div
+                    className={cx(`${ns}PopUp-content`, `justify-${placement}`)}
                   >
-                    {
-                      !hideClose && (
-                        <div className={cx(`${ns}PopUp-closeWrap`, 'text-right')}>
-                          <Icon
-                            icon="close"
-                          className={cx('icon', `${ns}PopUp-close`)}
-                            onClick={onHide}
-                          />
-                        </div>
-                      )
-                    }
-                    <div
-                      className={cx(`${ns}PopUp-content`, `justify-${placement}`)}
-                    >
-                      {children}
-                    </div>
+                    {isShow ? children : null}
                   </div>
+                  <div className={cx(`PopUp-safearea`)}></div>
                 </div>
-              )
+              </div>
+            );
           }}
         </Transition>
       </Portal>
-    )
+    );
   }
 }
 
-export default themeable(PopUp);
+export default themeable(localeable(PopUp));

package/src/components/ResultBox.tsx

@@ -4,8 +4,9 @@ import {InputBoxProps} from './InputBox';
 import {uncontrollable} from 'uncontrollable';
 import {Icon} from './icons';
 import Input from './Input';
-import {autobind, ucFirst} from '../utils/helper';
+import {autobind, isMobile, ucFirst} from '../utils/helper';
 import {LocaleProps, localeable} from '../locale';
+import isPlainObject = require('lodash/isPlainObject');
 
 export interface ResultBoxProps
   extends ThemeProps,
@@ -18,6 +19,7 @@ export interface ResultBoxProps
   onResultChange?: (value: Array<any>) => void;
   allowInput?: boolean;
   inputPlaceholder: string;
+  useMobileUI?: boolean;
 }
 
 export class ResultBox extends React.Component<ResultBoxProps> {
@@ -114,9 +116,11 @@ export class ResultBox extends React.Component<ResultBoxProps> {
       onFocus,
       onBlur,
       borderMode,
+      useMobileUI,
       ...rest
     } = this.props;
     const isFocused = this.state.isFocused;
+    const mobileUI = useMobileUI && isMobile();
 
     return (
       <div
@@ -125,6 +129,7 @@ export class ResultBox extends React.Component<ResultBoxProps> {
           'is-disabled': disabled,
           'is-error': hasError,
           'is-clickable': onResultClick,
+          'is-mobile': mobileUI,
           [`ResultBox--border${ucFirst(borderMode)}`]: borderMode
         })}
         onClick={onResultClick}
@@ -147,7 +152,9 @@ export class ResultBox extends React.Component<ResultBoxProps> {
             </div>
           ))
         ) : result && !Array.isArray(result) ? (
-          <span className={cx('ResultBox-singleValue')}>{result}</span>
+          <span className={cx('ResultBox-singleValue')}>
+            {isPlainObject(result) ? itemRender(result) : result}
+          </span>
         ) : allowInput && !disabled ? null : (
           <span className={cx('ResultBox-placeholder')}>
             {__(placeholder || 'placeholder.noData')}
@@ -180,6 +187,11 @@ export class ResultBox extends React.Component<ResultBoxProps> {
             <Icon icon="close" className="icon" />
           </a>
         ) : null}
+        {!allowInput && mobileUI ? (
+          <span className={cx('ResultBox-arrow')}>
+            <Icon icon="caret" className="icon" />
+          </span>
+        ) : null}
       </div>
     );
   }

package/src/components/ResultList.tsx

@@ -13,21 +13,28 @@ import {LocaleProps, localeable} from '../locale';
 export interface ResultListProps extends ThemeProps, LocaleProps {
   className?: string;
   value?: Array<Option>;
-  onChange?: (value: Array<Option>) => void;
+  onChange?: (value: Array<Option>, optionModified?: boolean) => void;
   sortable?: boolean;
   disabled?: boolean;
   title?: string;
   placeholder: string;
-  itemRender: (option: Option) => JSX.Element;
+  itemRender: (option: Option, states: ItemRenderStates) => JSX.Element;
   itemClassName?: string;
 }
 
+export interface ItemRenderStates {
+  index: number;
+  disabled?: boolean;
+  onChange: (value: any, name: string) => void;
+}
+
 export class ResultList extends React.Component<ResultListProps> {
+  static itemRender(option: any) {
+    return <span>{`${option.scopeLabel || ''}${option.label}`}</span>;
+  }
   static defaultProps: Pick<ResultListProps, 'placeholder' | 'itemRender'> = {
     placeholder: 'placeholder.selectData',
-    itemRender: (option: any) => (
-      <span>{`${option.scopeLabel || ''}${option.label}`}</span>
-    )
+    itemRender: ResultList.itemRender
   };
 
   id = guid();
@@ -114,6 +121,23 @@ export class ResultList extends React.Component<ResultListProps> {
     delete this.sortable;
   }
 
+  handleValueChange(index: number, value: any, name: string) {
+    if (typeof name !== 'string') {
+      return;
+    }
+    const {value: list, onChange} = this.props;
+
+    const result = Array.isArray(list) ? list.concat() : [];
+    if (!result[index]) {
+      return;
+    }
+    result.splice(index, 1, {
+      ...result[index],
+      [name]: value
+    });
+    onChange?.(result, true);
+  }
+
   render() {
     const {
       classnames: cx,
@@ -150,7 +174,13 @@ export class ResultList extends React.Component<ResultListProps> {
                   />
                 ) : null}
 
-                <label>{itemRender(option)}</label>
+                <label>
+                  {itemRender(option, {
+                    index,
+                    disabled,
+                    onChange: this.handleValueChange.bind(this, index)
+                  })}
+                </label>
 
                 {!disabled ? (
                   <a