amis 1.5.6-beta.5 → 1.6.0

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));