amis-ui 1.0.0-beta.0

package/src/components/NumberInput.tsx

@@ -0,0 +1,255 @@
+import React from 'react';
+// @ts-ignore
+import InputNumber from 'rc-input-number';
+import getMiniDecimal, {
+  DecimalClass,
+  toFixed
+} from 'rc-input-number/lib/utils/MiniDecimal';
+import {getNumberPrecision} from 'rc-input-number/lib/utils/numberUtil';
+
+import {Icon} from './icons';
+import {ThemeProps, themeable} from 'amis-core';
+import {autobind, ucFirst} from 'amis-core';
+
+export interface NumberProps extends ThemeProps {
+  placeholder?: string;
+  max?: number;
+  min?: number;
+  step?: number;
+  showSteps?: boolean;
+  precision?: number;
+  disabled?: boolean;
+  /**
+   * 只读
+   */
+  readOnly?: boolean;
+  value?: number;
+  onChange?: (value: number) => void;
+  /**
+   * 边框模式，全边框，还是半边框，或者没边框。
+   */
+  borderMode?: 'full' | 'half' | 'none';
+  /**
+   * 指定输入框展示值的格式
+   */
+  formatter?: Function;
+  /**
+   * 指定从 formatter 里转换回数字的方式，和 formatter 搭配使用
+   */
+  parser?: Function;
+  inputRef?: Function;
+  /**
+   * 获取焦点事件
+   */
+  onFocus?: Function;
+  /**
+   * 失去焦点事件
+   */
+  onBlur?: Function;
+  /**
+   * 指定输入框是基础输入框，增强输入框
+   */
+  displayMode?: 'base' | 'enhance';
+  keyboard?: Boolean;
+}
+
+export class NumberInput extends React.Component<NumberProps, any> {
+  static defaultProps: Pick<NumberProps, 'step' | 'readOnly' | 'borderMode'> = {
+    step: 1,
+    readOnly: false,
+    borderMode: 'full'
+  };
+
+  @autobind
+  handleChange(value: any) {
+    const {min, max, onChange} = this.props;
+
+    if (typeof value === 'number') {
+      if (typeof min === 'number') {
+        value = Math.max(value, min);
+      }
+
+      if (typeof max === 'number') {
+        value = Math.min(value, max);
+      }
+    }
+
+    onChange?.(value);
+  }
+  @autobind
+  handleFocus(e: React.SyntheticEvent<HTMLElement>) {
+    const {onFocus} = this.props;
+    onFocus && onFocus(e);
+  }
+
+  @autobind
+  handleBlur(e: React.SyntheticEvent<HTMLElement>) {
+    const {onBlur} = this.props;
+    onBlur && onBlur(e);
+  }
+  @autobind
+  handleEnhanceModeChange(action: 'add' | 'subtract'): void {
+    const {value, step, disabled, readOnly, precision} = this.props;
+    // value为undefined会导致溢出错误
+    let val = Number(value) || 0;
+    if (disabled || readOnly) {
+      return;
+    }
+    if (isNaN(Number(step)) || !Number(step)) {
+      return;
+    }
+    let stepDecimal = getMiniDecimal(Number(step));
+    if (action !== 'add') {
+      stepDecimal = stepDecimal.negate();
+    }
+    const target = getMiniDecimal(val).add(stepDecimal.toString());
+    const getPrecision = (numStr: string) => {
+      if (precision! >= 0) {
+        return precision;
+      }
+      return Math.max(
+        getNumberPrecision(numStr),
+        getNumberPrecision(Number(step) || 1)
+      );
+    };
+    const triggerValueUpdate = (
+      newValue: DecimalClass,
+      userTyping: boolean
+    ): DecimalClass => {
+      let updateValue = newValue;
+      const numStr = updateValue.toString();
+      const mergedPrecision = getPrecision(numStr);
+      if (mergedPrecision! >= 0) {
+        updateValue = getMiniDecimal(toFixed(numStr, '.', mergedPrecision));
+      }
+
+      return updateValue;
+    };
+    const updatedValue = triggerValueUpdate(target, false);
+    val = Number(updatedValue.toString());
+    this.handleChange(val);
+  }
+  @autobind
+  renderBase() {
+    const {
+      className,
+      classPrefix: ns,
+      classnames: cx,
+      value,
+      step,
+      precision,
+      max,
+      min,
+      disabled,
+      placeholder,
+      onChange,
+      showSteps,
+      formatter,
+      parser,
+      borderMode,
+      readOnly,
+      displayMode,
+      inputRef,
+      keyboard
+    } = this.props;
+
+    let precisionProps: any = {};
+
+    if (typeof precision === 'number') {
+      precisionProps.precision = precision;
+    }
+    return (
+      <InputNumber
+        className={cx(
+          className,
+          showSteps === false ? 'no-steps' : '',
+          displayMode === 'enhance' ? 'Number--enhance-input' : '',
+          {
+            [`Number--border${ucFirst(borderMode)}`]: borderMode
+          }
+        )}
+        ref={inputRef}
+        readOnly={readOnly}
+        prefixCls={`${ns}Number`}
+        value={value}
+        step={step}
+        max={max}
+        min={min}
+        formatter={formatter}
+        parser={parser}
+        onChange={this.handleChange}
+        disabled={disabled}
+        placeholder={placeholder}
+        onFocus={this.handleFocus}
+        onBlur={this.handleBlur}
+        keyboard={keyboard}
+        {...precisionProps}
+      />
+    );
+  }
+  render(): JSX.Element {
+    const {
+      classPrefix: ns,
+      classnames: cx,
+      value,
+      precision,
+      max,
+      min,
+      disabled,
+      showSteps,
+      borderMode,
+      readOnly,
+      displayMode
+    } = this.props;
+
+    let precisionProps: any = {};
+
+    if (typeof precision === 'number') {
+      precisionProps.precision = precision;
+    }
+    return (
+      <>
+        {displayMode === 'enhance' ? (
+          <div
+            className={cx(
+              'Number--enhance',
+              disabled ? 'Number--enhance-disabled' : '',
+              showSteps === false ? 'Number--enhance-no-steps' : '',
+              {
+                [`Number--enhance-border${ucFirst(borderMode)}`]: borderMode
+              }
+            )}
+          >
+            <div
+              className={cx(
+                'Number--enhance-left-icon',
+                value && value === min ? 'Number--enhance-border-min' : '',
+                disabled ? 'Number--enhance-border-disabled' : '',
+                readOnly ? 'Number--enhance-border-readOnly' : ''
+              )}
+              onClick={() => this.handleEnhanceModeChange('subtract')}
+            >
+              <Icon icon="minus" className="icon" />
+            </div>
+            {this.renderBase()}
+            <div
+              className={cx(
+                'Number--enhance-right-icon',
+                value && value === max ? 'Number--enhance-border-max' : '',
+                disabled ? 'Number--enhance-border-disabled' : '',
+                readOnly ? 'Number--enhance-border-readOnly' : ''
+              )}
+              onClick={() => this.handleEnhanceModeChange('add')}
+            >
+              <Icon icon="plus" className="icon " />
+            </div>
+          </div>
+        ) : (
+          this.renderBase()
+        )}
+      </>
+    );
+  }
+}
+
+export default themeable(NumberInput);

package/src/components/Overlay.tsx

@@ -0,0 +1,317 @@
+/**
+ * @file Overlay
+ * @description
+ * @author fex
+ */
+
+import Portal from 'react-overlays/Portal';
+import classNames from 'classnames';
+import ReactDOM, {findDOMNode} from 'react-dom';
+import React, {cloneElement} from 'react';
+import {calculatePosition, getContainer, ownerDocument} from 'amis-core';
+import {autobind, getScrollParent, noop} from 'amis-core';
+import {resizeSensor, getComputedStyle} from 'amis-core';
+import {RootClose} from 'amis-core';
+
+function onScroll(elem: HTMLElement, callback: () => void) {
+  const handler = () => {
+    requestAnimationFrame(callback);
+  };
+  elem.addEventListener('scroll', handler);
+  return function () {
+    elem.removeEventListener('scroll', handler);
+  };
+}
+
+class Position extends React.Component<any, any> {
+  props: any;
+  _lastTarget: any;
+  resizeDispose: Array<() => void>;
+  watchedTarget: any;
+  setState: (state: any) => void;
+
+  static defaultProps = {
+    containerPadding: 0,
+    placement: 'right',
+    shouldUpdatePosition: false
+  };
+
+  constructor(props: any) {
+    super(props);
+
+    this.state = {
+      positionLeft: 0,
+      positionTop: 0,
+      arrowOffsetLeft: null,
+      arrowOffsetTop: null
+    };
+
+    this._lastTarget = null;
+  }
+
+  updatePosition(target: any) {
+    this._lastTarget = target;
+
+    if (!target) {
+      return this.setState({
+        positionLeft: 0,
+        positionTop: 0,
+        arrowOffsetLeft: null,
+        arrowOffsetTop: null
+      });
+    }
+
+    const watchTargetSizeChange = this.props.watchTargetSizeChange;
+    const overlay = findDOMNode(this as any) as HTMLElement;
+    const container = getContainer(
+      this.props.container,
+      ownerDocument(this).body
+    );
+
+    if (
+      (!this.watchedTarget || this.watchedTarget !== target) &&
+      getComputedStyle(target, 'position') !== 'static'
+    ) {
+      this.resizeDispose?.forEach(fn => fn());
+      this.watchedTarget = target;
+      this.resizeDispose = [
+        watchTargetSizeChange !== false
+          ? resizeSensor(target, () => this.updatePosition(target))
+          : noop,
+        resizeSensor(overlay, () => this.updatePosition(target))
+      ];
+
+      const scrollParent = getScrollParent(target);
+      if (scrollParent && container.contains(scrollParent)) {
+        this.resizeDispose.push(
+          onScroll(scrollParent, () => {
+            this.updatePosition(target);
+          })
+        );
+      }
+    }
+
+    this.setState(
+      calculatePosition(
+        this.props.placement,
+        overlay,
+        target,
+        container,
+        this.props.containerPadding,
+        this.props.offset
+      )
+    );
+  }
+
+  componentDidMount() {
+    this.updatePosition(this.getTarget());
+  }
+
+  getTarget = () => {
+    const {target} = this.props;
+    const targetElement = typeof target === 'function' ? target() : target;
+    return (targetElement && ReactDOM.findDOMNode(targetElement)) || null;
+  };
+
+  componentDidUpdate(prevProps: any) {
+    this.maybeUpdatePosition(this.props.placement !== prevProps.placement);
+  }
+
+  maybeUpdatePosition = (placementChanged: any) => {
+    const target = this.getTarget();
+
+    if (
+      !this.props.shouldUpdatePosition &&
+      target === this._lastTarget &&
+      !placementChanged
+    ) {
+      return;
+    }
+
+    this.updatePosition(target);
+  };
+
+  componentWillUnmount() {
+    this.resizeDispose?.forEach(fn => fn());
+  }
+
+  render() {
+    const {children, className, ...props} = this.props;
+    const {positionLeft, positionTop, ...arrowPosition} = this.state;
+
+    // These should not be forwarded to the child.
+    delete props.target;
+    delete props.container;
+    delete props.containerPadding;
+    delete props.shouldUpdatePosition;
+
+    const child = React.Children.only(children);
+    return cloneElement(child, {
+      ...props,
+      ...arrowPosition,
+      // FIXME: Don't forward `positionLeft` and `positionTop` via both props
+      // and `props.style`.
+      positionLeft,
+      positionTop,
+      className: classNames(className, child.props.className),
+      style: {
+        ...child.props.style,
+        left: positionLeft,
+        top: positionTop
+      }
+    });
+  }
+}
+
+interface OverlayProps {
+  placement?: string;
+  show?: boolean;
+  transition?: React.ElementType;
+  containerPadding?: number;
+  shouldUpdatePosition?: boolean;
+  rootClose?: boolean;
+  onHide?(props: any, ...args: any[]): any;
+  container?: React.ReactNode | Function;
+  target?: React.ReactNode | Function;
+  watchTargetSizeChange?: boolean;
+  offset?: [number, number];
+  onEnter?(node: HTMLElement): any;
+  onEntering?(node: HTMLElement): any;
+  onEntered?(node: HTMLElement): any;
+  onExit?(node: HTMLElement): any;
+  onExiting?(node: HTMLElement): any;
+  onExited?(node: HTMLElement): any;
+}
+interface OverlayState {
+  exited: boolean;
+}
+export default class Overlay extends React.Component<
+  OverlayProps,
+  OverlayState
+> {
+  static defaultProps = {
+    placement: 'auto'
+  };
+  constructor(props: OverlayProps) {
+    super(props as any);
+
+    this.state = {
+      exited: !props.show
+    };
+  }
+
+  position: any = null;
+  positionRef = (position: any) => {
+    this.position = position;
+  };
+
+  updatePosition() {
+    this.position?.maybeUpdatePosition(true);
+  }
+
+  componentDidUpdate(prevProps: OverlayProps) {
+    const props = this.props;
+    if (prevProps.show !== props.show && props.show) {
+      this.setState({exited: false});
+    } else if (props.transition !== prevProps.transition && !props.transition) {
+      // Otherwise let handleHidden take care of marking exited.
+      this.setState({exited: true});
+    }
+  }
+
+  @autobind
+  onHiddenListener(node: HTMLElement) {
+    this.setState({exited: true});
+
+    if (this.props.onExited) {
+      this.props.onExited(node);
+    }
+  }
+
+  render() {
+    const {
+      container,
+      containerPadding,
+      target,
+      placement,
+      shouldUpdatePosition,
+      rootClose,
+      children,
+      watchTargetSizeChange,
+      transition: Transition,
+      offset,
+      ...props
+    } = this.props;
+
+    const mountOverlay = props.show || (Transition && !this.state.exited);
+    if (!mountOverlay) {
+      // Don't bother showing anything if we don't have to.
+      return null;
+    }
+
+    let child = children;
+
+    // Position is be inner-most because it adds inline styles into the child,
+    // which the other wrappers don't forward correctly.
+    child = (
+      // @ts-ignore
+      <Position
+        {...{
+          container,
+          containerPadding,
+          target,
+          placement,
+          shouldUpdatePosition,
+          offset
+        }}
+        ref={this.positionRef}
+      >
+        {child}
+      </Position>
+    );
+
+    if (Transition) {
+      let {onExit, onExiting, onEnter, onEntering, onEntered} = props;
+
+      // This animates the child node by injecting props, so it must precede
+      // anything that adds a wrapping div.
+      child = (
+        <Transition
+          in={props.show}
+          appear
+          onExit={onExit}
+          onExiting={onExiting}
+          onExited={this.onHiddenListener}
+          onEnter={onEnter}
+          onEntering={onEntering}
+          onEntered={onEntered}
+        >
+          {child}
+        </Transition>
+      );
+    }
+
+    // This goes after everything else because it adds a wrapping div.
+    if (rootClose) {
+      return (
+        // @ts-ignore
+        <Portal container={container}>
+          <RootClose onRootClose={props.onHide}>
+            {(ref: any) => {
+              if (React.isValidElement(child)) {
+                return React.cloneElement(child, {
+                  ref: ref
+                });
+              }
+
+              return <div ref={ref}>{child}</div>;
+            }}
+          </RootClose>
+        </Portal>
+      );
+    }
+
+    // @ts-ignore
+    return <Portal container={container}>{child}</Portal>;
+  }
+}