amis 1.5.8-beta.2 → 1.6.0

package/src/components/Picker.tsx

@@ -2,7 +2,12 @@
  * @file Picker
  * @description 移动端列滚动选择器
  */
-import React, {memo, ReactNode, useState, useEffect} from 'react';
+import React, {
+  memo,
+  ReactNode,
+  useState,
+  useEffect
+} from 'react';
 import {uncontrollable} from 'uncontrollable';
 
 import {themeable, ThemeProps} from '../theme';
@@ -16,6 +21,7 @@ export type PickerValue = string | number;
 export interface PickerProps extends ThemeProps, LocaleProps {
   title?: String | ReactNode;
   labelField?: string;
+  valueField?: string;
   className?: string;
   showToolbar?: boolean;
   defaultValue?: PickerValue[];
@@ -38,12 +44,14 @@ function fixToArray(data: any) {
 
 const Picker = memo<PickerProps>(props => {
   const {
+    title,
     labelField,
+    valueField,
     visibleItemCount = 5,
     value = [],
     swipeDuration = 1000,
     columns = [],
-    itemHeight = 30,
+    itemHeight = 48,
     showToolbar = true,
     className = '',
     classnames: cx,
@@ -55,9 +63,11 @@ const Picker = memo<PickerProps>(props => {
   const [innerValue, setInnerValue] = useState<PickerValue[]>(
     fixToArray(props.value === undefined ? props.defaultValue || [] : value)
   );
+
   useEffect(() => {
-    setInnerValue(value);
-  }, [value]);
+    if (value === innerValue) return
+    setInnerValue(fixToArray(value));
+  }, [value])
 
   const close = () => {
     if (props.onClose) {
@@ -90,7 +100,8 @@ const Picker = memo<PickerProps>(props => {
         {...item}
         classnames={cx}
         classPrefix={ns}
-        labelField={labelField}
+        labelField={labelField || item.labelField} 
+        valueField={valueField || item.valueField}
         itemHeight={itemHeight}
         swipeDuration={swipeDuration}
         visibleItemCount={visibleItemCount}
@@ -109,25 +120,29 @@ const Picker = memo<PickerProps>(props => {
   const maskStyle = {
     backgroundSize: `100% ${(wrapHeight - itemHeight) / 2}px`
   };
-
+  const hasHeader = showToolbar || title;
   return (
     <div className={cx(className, 'PickerColumns', 'PickerColumns-popOver')}>
-      {showToolbar && (
-        <div className={cx('PickerColumns-toolbar')}>
-          <Button
+      {hasHeader && (<div className={cx('PickerColumns-header')}>
+          {showToolbar && (<Button
             className="PickerColumns-cancel"
             level="default"
             onClick={close}
           >
             {__('cancel')}
-          </Button>
-          <Button
+          </Button>)}
+          {title && (
+            <div className={cx('PickerColumns-title')}>
+              {title}
+            </div>
+          )}
+          {showToolbar && (<Button
             className="PickerColumns-confirm"
             level="primary"
             onClick={confirm}
           >
             {__('confirm')}
-          </Button>
+          </Button>)}
         </div>
       )}
       <div className={cx('PickerColumns-columns')} style={columnsStyle}>

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;
@@ -68,8 +69,9 @@ function isOptionDisabled(option: PickerOption) {
 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(() => {
     // 默认转入第一个选项的位置
@@ -132,12 +151,11 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
       updateState({index});
 
       if (emitChange && props.onChange) {
-        requestAnimationFrame(() => {
-          props.onChange?.(options[index], index, confirm);
-        });
-        // setTimeout(() => {
-        //   props.onChange?.(options[index], index, confirm);
-        // }, 0);
+        requestAnimationFrame(
+          () => {
+            props.onChange?.(getOptionValue(options[index]), index, confirm);
+          }
+        );
       }
     };
 
@@ -154,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);
     }
   };
@@ -168,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);
 
@@ -379,7 +389,7 @@ PickerColumn.defaultProps = {
   options: [],
   visibleItemCount: 5,
   swipeDuration: 1000,
-  itemHeight: 30
+  itemHeight: 48
 };
 
 export default themeable(

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,
@@ -14,20 +15,21 @@ import Transition, {
 } from 'react-transition-group/Transition';
 import Portal from 'react-overlays/Portal';
 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;
 }
@@ -41,15 +43,29 @@ 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();
   }
@@ -57,15 +73,19 @@ export class PopUp extends React.PureComponent<PopUpPorps> {
   render() {
     const {
       style,
+      title,
       children,
       overlay,
       onHide,
+      onConfirm,
       classPrefix: ns,
       classnames: cx,
       className,
       isShow,
       container,
-      hideClose,
+      showConfirm,
+      translate: __,
+      showClose,
       header,
       placement = 'center',
       ...rest
@@ -90,7 +110,7 @@ export class PopUp extends React.PureComponent<PopUpPorps> {
                   <div className={`${ns}PopUp-overlay`} onClick={onHide} />
                 )}
                 <div className={cx(`${ns}PopUp-inner`)}>
-                  {!hideClose && (
+                  {!showConfirm && showClose ? (
                     <div className={cx(`${ns}PopUp-closeWrap`)}>
                       {header}
                       <Icon
@@ -99,12 +119,34 @@ export class PopUp extends React.PureComponent<PopUpPorps> {
                         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}`)}
                   >
-                    {children}
+                    {isShow ? children : null}
                   </div>
+                  <div className={cx(`PopUp-safearea`)}></div>
                 </div>
               </div>
             );
@@ -115,4 +157,4 @@ export class PopUp extends React.PureComponent<PopUpPorps> {
   }
 }
 
-export default themeable(PopUp);
+export default themeable(localeable(PopUp));

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, ucFirst} from '../utils/helper';
+import {autobind, isMobile, ucFirst} from '../utils/helper';
 import {LocaleProps, localeable} from '../locale';
 import isPlainObject = require('lodash/isPlainObject');
 
@@ -19,6 +19,7 @@ export interface ResultBoxProps
   onResultChange?: (value: Array<any>) => void;
   allowInput?: boolean;
   inputPlaceholder: string;
+  useMobileUI?: boolean;
 }
 
 export class ResultBox extends React.Component<ResultBoxProps> {
@@ -115,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
@@ -126,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}
@@ -183,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/Select.tsx

@@ -37,6 +37,7 @@ import Spinner from './Spinner';
 import {Option, Options} from '../Schema';
 import {RemoteOptionsProps, withRemoteConfig} from './WithRemoteConfig';
 import Picker from './Picker';
+import PopUp from './PopUp';
 
 export {Option, Options};
 
@@ -923,23 +924,13 @@ export class Select extends React.Component<SelectProps, SelectState> {
       labelField: 'label',
       options: filtedOptions
     };
-    const menu = mobileUI ? (
-      <Picker
-        className={cx('PickerColumns-column', mobileClassName)}
-        labelField="label"
-        value={value[0]}
-        translate={this.props.translate}
-        locale={this.props.locale}
-        columns={[column]}
-        onChange={checkAll ? noop : this.handlePickerChange}
-        onClose={this.close}
-        onConfirm={this.confirm}
-      />
-    ) : (
+    const menu = (
       <div
         ref={this.menu}
         className={cx('Select-menu', {
-          'Select--longlist': filtedOptions.length && filtedOptions.length > 100
+          'Select--longlist':
+            filtedOptions.length && filtedOptions.length > 100,
+          'is-mobile': mobileUI
         })}
       >
         {searchable ? (
@@ -1021,8 +1012,16 @@ export class Select extends React.Component<SelectProps, SelectState> {
         )}
       </div>
     );
-
-    return (
+    return mobileUI ? (
+      <PopUp
+        className={cx(`Select-popup`)}
+        container={popOverContainer}
+        isShow={this.state.isOpen}
+        onHide={this.close}
+      >
+        {menu}
+      </PopUp>
+    ) : (
       <Overlay
         container={popOverContainer || this.getTarget}
         target={this.getTarget}
@@ -1031,11 +1030,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
       >
         <PopOver
           overlay
-          className={cx(
-            'Select-popover',
-            popoverClassName,
-            mobileUI ? 'PopOver-isMobile' : ''
-          )}
+          className={cx('Select-popover')}
           style={{
             minWidth: this.target ? this.target.offsetWidth : 'auto'
           }}
@@ -1061,13 +1056,14 @@ export class Select extends React.Component<SelectProps, SelectState> {
       labelField,
       disabled,
       checkAll,
-      borderMode
+      borderMode,
+      useMobileUI
     } = this.props;
 
     const selection = this.state.selection;
     const inputValue = this.state.inputValue;
     const resetValue = this.props.resetValue;
-
+    const mobileUI = useMobileUI && isMobile();
     return (
       <Downshift
         selectedItem={selection}
@@ -1101,6 +1097,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
                   'is-opened': isOpen,
                   'is-focused': this.state.isFocused,
                   'is-disabled': disabled,
+                  'is-mobile': mobileUI,
                   [`Select--border${ucFirst(borderMode)}`]: borderMode
                 },
                 className

package/src/components/TransferDropDown.tsx

@@ -7,11 +7,13 @@ import ResultBox from './ResultBox';
 import {Icon} from './icons';
 import InputBox from './InputBox';
 import PopOverContainer from './PopOverContainer';
+import {isMobile} from '../utils/helper';
 
 export interface TransferDropDownProps extends TransferProps {
   // 新的属性？
   multiple?: boolean;
   borderMode?: 'full' | 'half' | 'none';
+  useMobileUI?: boolean;
 }
 
 export class TransferDropDown extends Transfer<TransferDropDownProps> {
@@ -25,15 +27,22 @@ export class TransferDropDown extends Transfer<TransferDropDownProps> {
       onChange,
       onSearch,
       multiple,
-      borderMode
+      borderMode,
+      useMobileUI
     } = this.props;
     const {inputValue, searchResult} = this.state;
 
+    const mobileUI = useMobileUI && isMobile();
     return (
       <PopOverContainer
+        useMobileUI={useMobileUI}
         popOverClassName={cx('TransferDropDown-popover')}
         popOverRender={({onClose}) => (
-          <div className={cx('TransferDropDown-content')}>
+          <div
+            className={cx('TransferDropDown-content', {
+              'is-mobile': mobileUI
+            })}
+          >
             {onSearch ? (
               <div className={cx('Transfer-search')}>
                 <InputBox
@@ -94,10 +103,15 @@ export class TransferDropDown extends Transfer<TransferDropDownProps> {
             placeholder={__('Select.placeholder')}
             disabled={disabled}
             ref={ref}
+            useMobileUI={useMobileUI}
           >
-            <span className={cx('TransferDropDown-icon')}>
-              <Icon icon="caret" className="icon" />
-            </span>
+            {!mobileUI ? (
+              <span className={cx('TransferDropDown-icon')}>
+                <Icon icon="caret" className="icon" />
+              </span>
+            ) : (
+              <></>
+            )}
           </ResultBox>
         )}
       </PopOverContainer>