amis 1.5.6-beta.4 → 1.5.8-beta.2

package/src/components/Picker.tsx

@@ -2,11 +2,7 @@
  * @file Picker
  * @description 移动端列滚动选择器
  */
-import React, {
-  memo,
-  ReactNode,
-  useState
-} from 'react';
+import React, {memo, ReactNode, useState, useEffect} from 'react';
 import {uncontrollable} from 'uncontrollable';
 
 import {themeable, ThemeProps} from '../theme';
@@ -18,7 +14,7 @@ import {PickerColumnItem, default as Column} from './PickerColumn';
 export type PickerValue = string | number;
 
 export interface PickerProps extends ThemeProps, LocaleProps {
-  title?: String | ReactNode,
+  title?: String | ReactNode;
   labelField?: string;
   className?: string;
   showToolbar?: boolean;
@@ -28,17 +24,9 @@ export interface PickerProps extends ThemeProps, LocaleProps {
   visibleItemCount?: number;
   itemHeight?: number;
   columns: PickerColumnItem[] | PickerColumnItem;
-  onChange?: (
-    value?: PickerValue[],
-    index?: number,
-    confirm?: boolean
-  ) => void;
-  onClose?: (
-    value?: PickerValue[]
-  ) => void;
-  onConfirm?: (
-    value?: PickerValue[]
-  ) => void;
+  onChange?: (value?: PickerValue[], index?: number, confirm?: boolean) => void;
+  onClose?: (value?: PickerValue[]) => void;
+  onConfirm?: (value?: PickerValue[]) => void;
 }
 
 function fixToArray(data: any) {
@@ -48,7 +36,7 @@ function fixToArray(data: any) {
   return data;
 }
 
-const Picker = memo<PickerProps>((props) => {
+const Picker = memo<PickerProps>(props => {
   const {
     labelField,
     visibleItemCount = 5,
@@ -57,7 +45,7 @@ const Picker = memo<PickerProps>((props) => {
     columns = [],
     itemHeight = 30,
     showToolbar = true,
-    className='',
+    className = '',
     classnames: cx,
     classPrefix: ns,
     translate: __
@@ -65,8 +53,11 @@ const Picker = memo<PickerProps>((props) => {
 
   const _columns = fixToArray(columns);
   const [innerValue, setInnerValue] = useState<PickerValue[]>(
-    fixToArray(props.value === undefined ? props.defaultValue || [] : value )
+    fixToArray(props.value === undefined ? props.defaultValue || [] : value)
   );
+  useEffect(() => {
+    setInnerValue(value);
+  }, [value]);
 
   const close = () => {
     if (props.onClose) {
@@ -80,7 +71,11 @@ const Picker = memo<PickerProps>((props) => {
     }
   };
 
-  const onChange = (itemValue: PickerValue, columnIndex: number, confirm?: boolean) => {
+  const onChange = (
+    itemValue: PickerValue,
+    columnIndex: number,
+    confirm?: boolean
+  ) => {
     const nextInnerValue = [...innerValue];
     nextInnerValue[columnIndex] = itemValue;
     setInnerValue(nextInnerValue);
@@ -103,7 +98,9 @@ const Picker = memo<PickerProps>((props) => {
         onChange={(val: string | number, i, confirm) => {
           onChange(val, index, confirm);
         }}
-    />)
+        key={`column${index}`}
+      />
+    );
   };
 
   const wrapHeight = itemHeight * +visibleItemCount;
@@ -114,21 +111,29 @@ const Picker = memo<PickerProps>((props) => {
   };
 
   return (
-    <div
-      className={cx(className, 'PickerColumns', 'PickerColumns-popOver')}
-    >
-      {showToolbar && <div className={cx('PickerColumns-toolbar')}>
-        <Button className="PickerColumns-cancel" level="default" onClick={close}>
-          {__('cancel')}
-        </Button>
-        <Button className="PickerColumns-confirm" level="primary" onClick={confirm}>
-          {__('confirm')}
-        </Button>
-      </div>}
+    <div className={cx(className, 'PickerColumns', 'PickerColumns-popOver')}>
+      {showToolbar && (
+        <div className={cx('PickerColumns-toolbar')}>
+          <Button
+            className="PickerColumns-cancel"
+            level="default"
+            onClick={close}
+          >
+            {__('cancel')}
+          </Button>
+          <Button
+            className="PickerColumns-confirm"
+            level="primary"
+            onClick={confirm}
+          >
+            {__('confirm')}
+          </Button>
+        </div>
+      )}
       <div className={cx('PickerColumns-columns')} style={columnsStyle}>
-          {
-              _columns.map((column: PickerColumnItem, index: number) => renderColumnItem(column, index))
-          }
+        {_columns.map((column: PickerColumnItem, index: number) =>
+          renderColumnItem(column, index)
+        )}
         <div className={cx('PickerColumns-mask')} style={maskStyle}></div>
         <div className={cx('PickerColumns-frame')} style={frameStyle}></div>
       </div>

package/src/components/PickerColumn.tsx

@@ -33,7 +33,7 @@ export interface PickerColumnItem {
     index?: number,
     confirm?: boolean
   ) => void;
-};
+}
 
 export interface PickerColumnProps extends PickerColumnItem, ThemeProps {}
 
@@ -64,7 +64,7 @@ function getElementTranslateY(element: HTMLElement | null) {
 function isOptionDisabled(option: PickerOption) {
   return isObject(option) && option.disabled;
 }
-  
+
 const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
   const {
     visibleItemCount = 5,
@@ -132,11 +132,9 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
       updateState({index});
 
       if (emitChange && props.onChange) {
-        requestAnimationFrame(
-          () => {
-            props.onChange?.(options[index], index, confirm);
-          }
-        );
+        requestAnimationFrame(() => {
+          props.onChange?.(options[index], index, confirm);
+        });
         // setTimeout(() => {
         //   props.onChange?.(options[index], index, confirm);
         // }, 0);
@@ -301,7 +299,7 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
           onClickItem(index);
         }
       };
-      
+
       const childData = {
         className: 'text-ellipsis',
         children: text
@@ -357,23 +355,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>
   );
 });
 
@@ -389,4 +387,3 @@ export default themeable(
     value: 'onChange'
   })
 );
-

package/src/components/PickerContainer.tsx

@@ -10,14 +10,17 @@ import Button from './Button';
 
 export interface PickerContainerProps extends ThemeProps, LocaleProps {
   title?: string;
+  showTitle?: boolean;
   children: (props: {
     onClick: (e: React.MouseEvent) => void;
     isOpened: boolean;
   }) => JSX.Element;
-  popOverRender: (props: {
+  bodyRender: (props: {
     onClose: () => void;
     value: any;
     onChange: (value: any) => void;
+    setState: (state: any) => void;
+    [propName: string]: any;
   }) => JSX.Element;
   value?: any;
   onConfirm?: (value?: any) => void;
@@ -82,11 +85,21 @@ 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,
-      popOverRender: dropdownRender,
+      bodyRender: popOverRender,
       title,
+      showTitle,
       translate: __,
       size
     } = this.props;
@@ -103,13 +116,16 @@ export class PickerContainer extends React.Component<
           show={this.state.isOpened}
           onHide={this.close}
         >
-          <Modal.Header onClose={this.close}>
-            {__(title || 'Select.placeholder')}
-          </Modal.Header>
+          {showTitle !== false ? (
+            <Modal.Header onClose={this.close}>
+              {__(title || 'Select.placeholder')}
+            </Modal.Header>
+          ) : null}
           <Modal.Body>
-            {dropdownRender({
+            {popOverRender({
+              ...(this.state as any),
+              setState: this.updateState,
               onClose: this.close,
-              value: this.state.value,
               onChange: this.handleChange
             })}
           </Modal.Body>

package/src/components/PopUp.tsx

@@ -0,0 +1,118 @@
+/**
+ * @file PopUp
+ * @description
+ * @author fex
+ */
+
+import React from 'react';
+import {ClassNamesFn, themeable} from '../theme';
+import Transition, {
+  ENTERED,
+  EXITING,
+  EXITED,
+  ENTERING
+} from 'react-transition-group/Transition';
+import Portal from 'react-overlays/Portal';
+import {Icon} from './icons';
+
+export interface PopUpPorps {
+  className?: string;
+  style?: {
+    [styleName: string]: string;
+  };
+  overlay?: boolean;
+  onHide?: () => void;
+  classPrefix: string;
+  classnames: ClassNamesFn;
+  [propName: string]: any;
+  isShow?: boolean;
+  container?: any;
+  hideClose?: boolean;
+  placement?: 'left' | 'center' | 'right';
+  header?: JSX.Element;
+}
+
+const fadeStyles: {
+  [propName: string]: string;
+} = {
+  [ENTERED]: '',
+  [EXITING]: 'out',
+  [EXITED]: '',
+  [ENTERING]: 'in'
+};
+export class PopUp extends React.PureComponent<PopUpPorps> {
+  static defaultProps = {
+    className: '',
+    overlay: true,
+    isShow: false,
+    container: document.body,
+    hideClose: false
+  };
+
+  componentDidMount() {}
+  handleClick(e: React.MouseEvent) {
+    e.stopPropagation();
+  }
+
+  render() {
+    const {
+      style,
+      children,
+      overlay,
+      onHide,
+      classPrefix: ns,
+      classnames: cx,
+      className,
+      isShow,
+      container,
+      hideClose,
+      header,
+      placement = 'center',
+      ...rest
+    } = this.props;
+
+    const outerStyle: any = {
+      ...style
+    };
+    delete outerStyle.top;
+    return (
+      <Portal container={container}>
+        <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`)}>
+                  {!hideClose && (
+                    <div className={cx(`${ns}PopUp-closeWrap`)}>
+                      {header}
+                      <Icon
+                        icon="close"
+                        className={cx('icon', `${ns}PopUp-close`)}
+                        onClick={onHide}
+                      />
+                    </div>
+                  )}
+                  <div
+                    className={cx(`${ns}PopUp-content`, `justify-${placement}`)}
+                  >
+                    {children}
+                  </div>
+                </div>
+              </div>
+            );
+          }}
+        </Transition>
+      </Portal>
+    );
+  }
+}
+
+export default themeable(PopUp);