amis-ui 1.0.0-beta.0

package/src/components/PopOverContainer.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import {autobind, isMobile} from 'amis-core';
+import Overlay from './Overlay';
+import PopOver from './PopOver';
+import PopUp from './PopUp';
+import {findDOMNode} from 'react-dom';
+
+export interface PopOverContainerProps {
+  children: (props: {
+    onClick: (e: React.MouseEvent) => void;
+    isOpened: boolean;
+    ref: any;
+  }) => JSX.Element;
+  popOverRender: (props: {onClose: () => void}) => JSX.Element;
+  popOverContainer?: any;
+  popOverClassName?: string;
+  useMobileUI?: boolean;
+}
+
+export interface PopOverContainerState {
+  isOpened: boolean;
+}
+
+export class PopOverContainer extends React.Component<
+  PopOverContainerProps,
+  PopOverContainerState
+> {
+  state: PopOverContainerState = {
+    isOpened: false
+  };
+
+  target: any;
+
+  @autobind
+  targetRef(target: any) {
+    this.target = target ? findDOMNode(target) : null;
+  }
+
+  @autobind
+  handleClick() {
+    this.setState({
+      isOpened: true
+    });
+  }
+
+  @autobind
+  close() {
+    this.setState({
+      isOpened: false
+    });
+  }
+
+  @autobind
+  getTarget() {
+    return this.target || (findDOMNode(this) as HTMLElement);
+  }
+
+  @autobind
+  getParent() {
+    return this.getTarget()?.parentElement;
+  }
+
+  render() {
+    const {
+      useMobileUI,
+      children,
+      popOverContainer,
+      popOverClassName,
+      popOverRender: dropdownRender
+    } = this.props;
+    const mobileUI = useMobileUI && isMobile();
+    return (
+      <>
+        {children({
+          isOpened: this.state.isOpened,
+          onClick: this.handleClick,
+          ref: this.targetRef
+        })}
+        {mobileUI ? (
+          <PopUp
+            isShow={this.state.isOpened}
+            container={popOverContainer}
+            className={popOverClassName}
+            onHide={this.close}
+          >
+            {dropdownRender({onClose: this.close})}
+          </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>
+        )}
+      </>
+    );
+  }
+}
+
+export default PopOverContainer;

package/src/components/PopUp.tsx

@@ -0,0 +1,161 @@
+/**
+ * @file PopUp
+ * @description
+ * @author fex
+ */
+
+import React from 'react';
+import {themeable, ThemeProps} from 'amis-core';
+import {localeable, LocaleProps} from 'amis-core';
+import Transition, {
+  ENTERED,
+  EXITING,
+  EXITED,
+  ENTERING
+} from 'react-transition-group/Transition';
+import Portal from 'react-overlays/Portal';
+import {Icon} from './icons';
+import Button from './Button';
+
+export interface PopUpPorps extends ThemeProps, LocaleProps {
+  title?: string;
+  className?: string;
+  style?: {
+    [styleName: string]: string;
+  };
+  overlay?: boolean;
+  onHide?: () => void;
+  isShow?: boolean;
+  container?: any;
+  showConfirm?: boolean;
+  onConfirm?: (value: any) => void;
+  showClose?: 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> {
+  scrollTop: number = 0;
+  static defaultProps = {
+    className: '',
+    overlay: true,
+    isShow: false,
+    container: document.body,
+    showClose: true,
+    onConfirm: () => {}
+  };
+  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();
+  }
+
+  render() {
+    const {
+      style,
+      title,
+      children,
+      overlay,
+      onHide,
+      onConfirm,
+      classPrefix: ns,
+      classnames: cx,
+      className,
+      isShow,
+      container,
+      showConfirm,
+      translate: __,
+      showClose,
+      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`)}>
+                  {!showConfirm && showClose ? (
+                    <div className={cx(`${ns}PopUp-closeWrap`)}>
+                      {header}
+                      <span className={cx(`PopUp-closeBox`)} onClick={onHide}>
+                        <Icon
+                          icon="close"
+                          className={cx('icon', `${ns}PopUp-close`)}
+                        />
+                      </span>
+                    </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}`)}
+                  >
+                    {isShow ? children : null}
+                  </div>
+                  <div className={cx(`PopUp-safearea`)}></div>
+                </div>
+              </div>
+            );
+          }}
+        </Transition>
+      </Portal>
+    );
+  }
+}
+
+export default themeable(localeable(PopUp));

package/src/components/Progress.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import cx from 'classnames';
+import {Circle} from 'rc-progress';
+import {ClassNamesFn, themeable, ThemeProps} from 'amis-core';
+import type {SchemaClassName} from 'amis-core/dist/schema';
+interface ColorProps {
+  value: number;
+  color: string;
+}
+
+export type ColorMapType = Array<string> | Array<ColorProps> | string;
+
+interface ProgressProps extends ThemeProps {
+  type: 'line' | 'circle' | 'dashboard';
+  showLabel: boolean;
+  value: number;
+  stripe?: boolean;
+  animate?: boolean;
+  map?: ColorMapType;
+  placeholder?: string;
+  format?: (value?: number) => JSX.Element;
+  gapDegree?: number;
+  gapPosition?: 'top' | 'bottom' | 'left' | 'right';
+  strokeWidth?: number;
+  progressClassName?: SchemaClassName;
+  classnames: ClassNamesFn;
+}
+export class Progress extends React.Component<ProgressProps, Object> {
+  static defaultProps: Partial<ProgressProps> = {
+    type: 'line',
+    placeholder: '-',
+    progressClassName: '',
+    map: ['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success'],
+    showLabel: true
+  };
+
+  getCurrentColor() {
+    const color = this.props.map;
+    if (!color || !color.length) {
+      return 'bg-primary';
+    }
+    if (typeof color === 'string') {
+      return color;
+    } else {
+      return this.getLevelColor(color);
+    }
+  }
+
+  getLevelColor(color: Array<string> | Array<ColorProps>) {
+    const value = this.props.value;
+    const colorArray = this.getColorArray(color).sort(
+      (a: {value: number}, b: {value: number}) => a.value - b.value
+    );
+    for (let i = 0; i < colorArray.length; i++) {
+      if (colorArray[i].value >= value) {
+        return colorArray[i].color;
+      }
+    }
+    return colorArray[colorArray.length - 1].color;
+  }
+
+  getColorArray(color: Array<string> | Array<ColorProps>) {
+    const span = 100 / color.length;
+    return color.map((item, index) => {
+      if (typeof item === 'string') {
+        return {
+          color: item,
+          value: (index + 1) * span
+        };
+      }
+      return item;
+    });
+  }
+
+  getLabel(prefixCls: string) {
+    const {value, format, showLabel, classnames: cx} = this.props;
+    if (!showLabel) {
+      return null;
+    }
+    const textFormatter = format || (value => `${value}%`);
+    const content = textFormatter(value);
+    return (
+      <span className={cx(`${prefixCls}-text`)} key="value">
+        {content}
+      </span>
+    );
+  }
+
+  render() {
+    const {
+      className,
+      progressClassName,
+      type,
+      value,
+      placeholder,
+      stripe,
+      animate,
+      gapDegree,
+      gapPosition,
+      strokeWidth,
+      classnames: cx
+    } = this.props;
+
+    const isLineType = type === 'line';
+    const prefixCls = isLineType ? 'Progress-line' : 'Progress-circle';
+    const bgColor = this.getCurrentColor();
+    const isColorClass = /bg-/.test(bgColor);
+
+    let viewValue: React.ReactNode;
+    if (typeof value !== 'number') {
+      viewValue = <span className="text-muted">{placeholder}</span>;
+    } else if (type === 'line') {
+      const barStyle: any = {
+        width: `${value}%`
+      };
+      strokeWidth && (barStyle.height = strokeWidth);
+      !isColorClass && (barStyle.backgroundColor = bgColor);
+
+      viewValue = [
+        <div key="progress" className={cx(prefixCls, progressClassName)}>
+          <div className={cx(`${prefixCls}-inter`)}>
+            <div
+              className={cx(
+                `${prefixCls}-bar`,
+                {[bgColor]: isColorClass},
+                {[`${prefixCls}-bar--stripe`]: stripe},
+                {[`${prefixCls}-bar--animate`]: animate && !stripe},
+                {[`${prefixCls}-bar--stripe-animate`]: animate && stripe}
+              )}
+              title={`${value}%`}
+              style={barStyle}
+            />
+          </div>
+        </div>,
+        this.getLabel(prefixCls)
+      ];
+    } else if (type === 'circle' || type === 'dashboard') {
+      const circleWidth = strokeWidth || 6;
+      const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top';
+      const getGapDegree = () => {
+        if (gapDegree || gapDegree === 0) {
+          return gapDegree;
+        }
+        if (type === 'dashboard') {
+          return 75;
+        }
+        return undefined;
+      };
+
+      viewValue = [
+        <div
+          className={cx(prefixCls, progressClassName || 'w-ssm')}
+          key="circle"
+        >
+          <Circle
+            percent={value}
+            strokeColor={!isColorClass ? bgColor : ''}
+            strokeWidth={circleWidth}
+            trailWidth={circleWidth}
+            prefixCls={isColorClass ? bgColor : ''}
+            gapDegree={getGapDegree()}
+            gapPosition={gapPos}
+          />
+          {this.getLabel(prefixCls)}
+        </div>
+      ];
+    }
+
+    return <div className={cx('Progress', className)}>{viewValue}</div>;
+  }
+}
+
+export default themeable(Progress);

package/src/components/PullRefresh.tsx

@@ -0,0 +1,197 @@
+/**
+ * @file PullRefresh.tsx
+ * @description 下拉刷新
+ * @author hongyang03
+ */
+
+import React, {forwardRef, useEffect} from 'react';
+import {ClassNamesFn, themeable} from 'amis-core';
+import {useSetState} from '../hooks';
+import useTouch from '../hooks/use-touch';
+import {Icon} from './icons';
+import {TranslateFn} from 'amis-core';
+
+export interface PullRefreshProps {
+  classnames: ClassNamesFn;
+  classPrefix: string;
+  translate: TranslateFn;
+  disabled?: boolean;
+  pullingText?: string;
+  loosingText?: string;
+  loadingText?: string;
+  successText?: string;
+  onRefresh?: () => void;
+  loading?: boolean;
+  successDuration?: number;
+  loadingDuration?: number;
+}
+
+type statusText = 'normal' | 'pulling' | 'loosing' | 'success' | 'loading';
+
+export interface PullRefreshState {
+  status: statusText;
+  offsetY: number;
+}
+
+const defaultProps = {
+  successDuration: 0,
+  loadingDuration: 0
+};
+
+const defaultHeaderHeight = 28;
+
+const PullRefresh = forwardRef<{}, PullRefreshProps>((props, ref) => {
+  const {
+    classnames: cx,
+    translate: __,
+    children,
+    successDuration,
+    loadingDuration
+  } = props;
+
+  const refreshText = {
+    pullingText: __('pullRefresh.pullingText'),
+    loosingText: __('pullRefresh.loosingText'),
+    loadingText: __('pullRefresh.loadingText'),
+    successText: __('pullRefresh.successText')
+  };
+
+  const touch = useTouch();
+
+  useEffect(() => {
+    if (props.loading === false) {
+      loadSuccess();
+    }
+  }, [props.loading]);
+
+  const [state, updateState] = useSetState({
+    status: 'normal',
+    offsetY: 0
+  } as PullRefreshState);
+
+  const isTouchable = () => {
+    return (
+      !props.disabled &&
+      state.status !== 'loading' &&
+      state.status !== 'success'
+    );
+  };
+
+  const ease = (distance: number) => {
+    const pullDistance = defaultHeaderHeight;
+
+    if (distance > pullDistance) {
+      if (distance < pullDistance * 2) {
+        distance = pullDistance + (distance - pullDistance) / 2;
+      } else {
+        distance = pullDistance * 1.5 + (distance - pullDistance * 2) / 4;
+      }
+    }
+
+    return Math.round(distance);
+  };
+
+  const setStatus = (distance: number, isLoading?: boolean) => {
+    const pullDistance = defaultHeaderHeight;
+    let status: statusText = 'normal';
+
+    if (isLoading) {
+      status = 'loading';
+    } else if (distance === 0) {
+      status = 'normal';
+    } else if (distance < pullDistance) {
+      status = 'pulling';
+    } else {
+      status = 'loosing';
+    }
+
+    updateState({offsetY: distance, status});
+  };
+
+  const loadSuccess = () => {
+    if (!successDuration) {
+      setStatus(0);
+      return;
+    }
+    updateState({status: 'success'});
+
+    setTimeout(() => {
+      setStatus(0);
+    }, successDuration);
+  };
+
+  const onTouchStart = (event: any) => {
+    event.stopPropagation();
+
+    if (isTouchable() && state.offsetY === 0) {
+      touch.start(event);
+      updateState({});
+    }
+  };
+
+  const onTouchMove = (event: any) => {
+    event.stopPropagation();
+
+    if (isTouchable()) {
+      touch.move(event);
+      updateState({});
+      if (touch.isVertical() && touch.deltaY > 0) {
+        setStatus(ease(touch.deltaY));
+      }
+    }
+    return false;
+  };
+
+  const onTouchEnd = (event: any) => {
+    event.stopPropagation();
+
+    if (isTouchable() && state.offsetY > 0) {
+      if (state.status === 'loosing') {
+        if (loadingDuration) {
+          setStatus(defaultHeaderHeight, true);
+        } else {
+          setStatus(0);
+        }
+        props.onRefresh && props.onRefresh();
+      } else {
+        setStatus(0);
+      }
+    }
+  };
+
+  const transformStyle = {
+    transform: `translate3d(0, ${state.offsetY}px, 0)`,
+    touchAction: 'none'
+  };
+
+  const getStatusText = (status: statusText) => {
+    if (status === 'normal') {
+      return '';
+    }
+    return props[`${status}Text`] || refreshText[`${status}Text`];
+  };
+
+  return (
+    <div
+      className={cx('PullRefresh')}
+      onTouchStart={onTouchStart}
+      onTouchMove={onTouchMove}
+      onTouchEnd={onTouchEnd}
+      onTouchCancel={onTouchEnd}
+    >
+      <div className={cx('PullRefresh-wrap')} style={transformStyle}>
+        <div className={cx('PullRefresh-header')}>
+          {state.status === 'loading' && (
+            <Icon icon="loading-outline" className="icon loading-icon" />
+          )}
+          {getStatusText(state.status)}
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+});
+
+PullRefresh.defaultProps = defaultProps;
+
+export default themeable(PullRefresh);