amis-ui 1.0.0-beta.0

package/src/components/virtual-list/index.tsx

@@ -0,0 +1,447 @@
+/**
+ * 基于 https://github.com/clauderic/react-tiny-virtual-list 改造，主要是加了宽度自适应
+ */
+
+import * as React from 'react';
+import {findDOMNode} from 'react-dom';
+import * as PropTypes from 'prop-types';
+import SizeAndPositionManager, {ItemSize} from './SizeAndPositionManager';
+import {
+  ALIGNMENT,
+  DIRECTION,
+  SCROLL_CHANGE_REASON,
+  marginProp,
+  oppositeMarginProp,
+  positionProp,
+  scrollProp,
+  sizeProp
+} from './constants';
+
+export {DIRECTION as ScrollDirection} from './constants';
+
+export type ItemPosition = 'absolute' | 'sticky';
+
+export interface ItemStyle {
+  position: ItemPosition;
+  top?: number;
+  left: number;
+  width: string | number;
+  height?: number;
+  marginTop?: number;
+  marginLeft?: number;
+  marginRight?: number;
+  marginBottom?: number;
+  zIndex?: number;
+}
+
+interface StyleCache {
+  [id: number]: ItemStyle;
+}
+
+export interface ItemInfo {
+  index: number;
+  style: ItemStyle;
+}
+
+export interface RenderedRows {
+  startIndex: number;
+  stopIndex: number;
+}
+
+export interface Props {
+  className?: string;
+  estimatedItemSize?: number;
+  height: number | string;
+  itemCount: number;
+  itemSize: ItemSize;
+  overscanCount?: number;
+  scrollOffset?: number;
+  scrollToIndex?: number;
+  scrollToAlignment?: ALIGNMENT;
+  scrollDirection?: DIRECTION;
+  stickyIndices?: number[];
+  style?: React.CSSProperties;
+  width?: number | string;
+  onItemsRendered?({startIndex, stopIndex}: RenderedRows): void;
+  onScroll?(offset: number, event: UIEvent): void;
+  renderItem(itemInfo: ItemInfo): React.ReactNode;
+}
+
+export interface State {
+  offset: number;
+  scrollChangeReason: SCROLL_CHANGE_REASON;
+}
+
+const STYLE_WRAPPER: React.CSSProperties = {
+  overflow: 'auto',
+  willChange: 'transform',
+  WebkitOverflowScrolling: 'touch'
+};
+
+const STYLE_INNER: React.CSSProperties = {
+  position: 'relative',
+  width: 'auto',
+  whiteSpace: 'nowrap',
+  minHeight: '100%'
+};
+
+const STYLE_ITEM: {
+  position: ItemStyle['position'];
+  top: ItemStyle['top'];
+  left: ItemStyle['left'];
+  width: ItemStyle['width'];
+} = {
+  position: 'absolute' as ItemPosition,
+  top: 0,
+  left: 0,
+  width: 'auto'
+};
+
+const STYLE_STICKY_ITEM = {
+  ...STYLE_ITEM,
+  position: 'sticky' as ItemPosition
+};
+
+export default class VirtualList extends React.PureComponent<Props, State> {
+  static defaultProps = {
+    overscanCount: 3,
+    scrollDirection: DIRECTION.VERTICAL,
+    width: '100%'
+  };
+
+  static propTypes = {
+    estimatedItemSize: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+      .isRequired,
+    itemCount: PropTypes.number.isRequired,
+    itemSize: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.array,
+      PropTypes.func
+    ]).isRequired,
+    onScroll: PropTypes.func,
+    onItemsRendered: PropTypes.func,
+    overscanCount: PropTypes.number,
+    renderItem: PropTypes.func.isRequired,
+    scrollOffset: PropTypes.number,
+    scrollToIndex: PropTypes.number,
+    scrollToAlignment: PropTypes.oneOf([
+      ALIGNMENT.AUTO,
+      ALIGNMENT.START,
+      ALIGNMENT.CENTER,
+      ALIGNMENT.END
+    ]),
+    scrollDirection: PropTypes.oneOf([
+      DIRECTION.HORIZONTAL,
+      DIRECTION.VERTICAL
+    ]),
+    stickyIndices: PropTypes.arrayOf(PropTypes.number),
+    style: PropTypes.object,
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  };
+
+  itemSizeGetter = (itemSize: Props['itemSize']) => {
+    return (index: any) => this.getSize(index, itemSize);
+  };
+
+  sizeAndPositionManager = new SizeAndPositionManager({
+    itemCount: this.props.itemCount,
+    itemSizeGetter: this.itemSizeGetter(this.props.itemSize),
+    estimatedItemSize: this.getEstimatedItemSize()
+  });
+
+  readonly state: State = {
+    offset:
+      this.props.scrollOffset ||
+      (this.props.scrollToIndex != null &&
+        this.getOffsetForIndex(this.props.scrollToIndex)) ||
+      0,
+    scrollChangeReason: SCROLL_CHANGE_REASON.REQUESTED
+  };
+
+  private rootNode: HTMLElement;
+
+  private styleCache: StyleCache = {};
+
+  componentDidMount() {
+    const {scrollOffset, scrollToIndex} = this.props;
+    this.rootNode.addEventListener('scroll', this.handleScroll, {
+      passive: true
+    });
+    this.updateRootWidth();
+    if (scrollOffset != null) {
+      this.scrollTo(scrollOffset);
+    } else if (scrollToIndex != null) {
+      this.scrollTo(this.getOffsetForIndex(scrollToIndex));
+    }
+  }
+
+  // 自适应宽度
+  updateRootWidth() {
+    const itemsDom = this.rootNode.children[0].children;
+    const scrollbarWidth =
+      window.innerWidth - document.documentElement.clientWidth || 15;
+    const containerWidth =
+      this.rootNode.parentElement!.getBoundingClientRect().width;
+    let maxItemWidth = 0;
+    for (let i = 0; i < itemsDom.length; i++) {
+      let itemWidth = itemsDom[i].getBoundingClientRect().width;
+      if (itemWidth > maxItemWidth) {
+        maxItemWidth = itemWidth;
+      }
+    }
+    if (maxItemWidth > containerWidth) {
+      this.rootNode.style.width = maxItemWidth + scrollbarWidth + 'px';
+    }
+  }
+
+  componentDidUpdate(prevProps: Props, prevState: State) {
+    const props = this.props;
+    const {
+      estimatedItemSize,
+      itemCount,
+      itemSize,
+      scrollOffset,
+      scrollToAlignment,
+      scrollToIndex
+    } = prevProps;
+    const scrollPropsHaveChanged =
+      props.scrollToIndex !== scrollToIndex ||
+      props.scrollToAlignment !== scrollToAlignment;
+    const itemPropsHaveChanged =
+      props.itemCount !== itemCount ||
+      props.itemSize !== itemSize ||
+      props.estimatedItemSize !== estimatedItemSize;
+
+    if (props.itemSize !== itemSize) {
+      this.sizeAndPositionManager.updateConfig({
+        itemSizeGetter: this.itemSizeGetter(props.itemSize)
+      });
+    }
+
+    if (
+      props.itemCount !== itemCount ||
+      props.estimatedItemSize !== estimatedItemSize
+    ) {
+      this.sizeAndPositionManager.updateConfig({
+        itemCount: props.itemCount,
+        estimatedItemSize: this.getEstimatedItemSize(props)
+      });
+    }
+
+    if (itemPropsHaveChanged) {
+      this.recomputeSizes();
+    }
+
+    if (props.scrollOffset !== scrollOffset) {
+      this.setState({
+        offset: props.scrollOffset || 0,
+        scrollChangeReason: SCROLL_CHANGE_REASON.REQUESTED
+      });
+    } else if (
+      typeof props.scrollToIndex === 'number' &&
+      (scrollPropsHaveChanged || itemPropsHaveChanged)
+    ) {
+      this.setState({
+        offset: this.getOffsetForIndex(
+          props.scrollToIndex,
+          props.scrollToAlignment,
+          props.itemCount
+        ),
+        scrollChangeReason: SCROLL_CHANGE_REASON.REQUESTED
+      });
+    }
+
+    const {offset, scrollChangeReason} = this.state;
+    if (
+      prevState.offset !== offset &&
+      scrollChangeReason === SCROLL_CHANGE_REASON.REQUESTED
+    ) {
+      this.scrollTo(offset);
+    }
+  }
+
+  componentWillUnmount() {
+    this.rootNode.removeEventListener('scroll', this.handleScroll);
+  }
+
+  scrollTo(value: number) {
+    const {scrollDirection = DIRECTION.VERTICAL} = this.props;
+
+    (this.rootNode as any)[scrollProp[scrollDirection]] = value;
+  }
+
+  getOffsetForIndex(
+    index: number,
+    scrollToAlignment = this.props.scrollToAlignment,
+    itemCount: number = this.props.itemCount
+  ): number {
+    const {scrollDirection = DIRECTION.VERTICAL} = this.props;
+
+    if (index < 0 || index >= itemCount) {
+      index = 0;
+    }
+
+    return this.sizeAndPositionManager.getUpdatedOffsetForIndex({
+      align: scrollToAlignment,
+      containerSize: this.props[sizeProp[scrollDirection] as 'scrollOffset']!,
+      currentOffset: (this.state && this.state.offset) || 0,
+      targetIndex: index
+    });
+  }
+
+  recomputeSizes(startIndex = 0) {
+    this.styleCache = {};
+    this.sizeAndPositionManager.resetItem(startIndex);
+  }
+
+  render() {
+    const {
+      estimatedItemSize,
+      height,
+      overscanCount = 3,
+      renderItem,
+      itemCount,
+      itemSize,
+      onItemsRendered,
+      onScroll,
+      scrollDirection = DIRECTION.VERTICAL,
+      scrollOffset,
+      scrollToIndex,
+      scrollToAlignment,
+      stickyIndices,
+      style,
+      width,
+      ...props
+    } = this.props;
+    const {offset} = this.state;
+    const {start, stop} = this.sizeAndPositionManager.getVisibleRange({
+      containerSize: (this as any).props[sizeProp[scrollDirection]] || 0,
+      offset,
+      overscanCount
+    });
+    const items: React.ReactNode[] = [];
+    const wrapperStyle = {...STYLE_WRAPPER, ...style, height, width};
+    const innerStyle = {
+      ...STYLE_INNER,
+      [sizeProp[scrollDirection]]: this.sizeAndPositionManager.getTotalSize()
+    };
+
+    if (stickyIndices != null && stickyIndices.length !== 0) {
+      stickyIndices.forEach((index: number) =>
+        items.push(
+          renderItem({
+            index,
+            style: this.getStyle(index, true)
+          })
+        )
+      );
+
+      if (scrollDirection === DIRECTION.HORIZONTAL) {
+        innerStyle.display = 'flex';
+      }
+    }
+
+    if (typeof start !== 'undefined' && typeof stop !== 'undefined') {
+      for (let index = start; index <= stop; index++) {
+        if (stickyIndices != null && ~stickyIndices.indexOf(index)) {
+          continue;
+        }
+
+        items.push(
+          renderItem({
+            index,
+            style: this.getStyle(index, false)
+          })
+        );
+      }
+
+      if (typeof onItemsRendered === 'function') {
+        onItemsRendered({
+          startIndex: start,
+          stopIndex: stop
+        });
+      }
+    }
+
+    return (
+      <div ref={this.getRef} {...props} style={wrapperStyle}>
+        <div style={innerStyle}>{items}</div>
+      </div>
+    );
+  }
+
+  private getRef = (node: HTMLDivElement): void => {
+    this.rootNode = node;
+  };
+
+  private handleScroll = (event: UIEvent) => {
+    const {onScroll} = this.props;
+    const offset = this.getNodeOffset();
+
+    if (
+      offset < 0 ||
+      this.state.offset === offset ||
+      event.target !== this.rootNode
+    ) {
+      return;
+    }
+
+    this.setState({
+      offset,
+      scrollChangeReason: SCROLL_CHANGE_REASON.OBSERVED
+    });
+
+    if (typeof onScroll === 'function') {
+      onScroll(offset, event);
+    }
+  };
+
+  private getNodeOffset() {
+    const {scrollDirection = DIRECTION.VERTICAL} = this.props;
+
+    return (this as any).rootNode[scrollProp[scrollDirection]];
+  }
+
+  private getEstimatedItemSize(props = this.props) {
+    return (
+      props.estimatedItemSize ||
+      (typeof props.itemSize === 'number' && props.itemSize) ||
+      50
+    );
+  }
+
+  private getSize(index: number, itemSize: any) {
+    if (typeof itemSize === 'function') {
+      return itemSize(index);
+    }
+
+    return Array.isArray(itemSize) ? itemSize[index] : itemSize;
+  }
+
+  private getStyle(index: number, sticky: boolean) {
+    const style = this.styleCache[index];
+
+    if (style) {
+      return style;
+    }
+
+    const {scrollDirection = DIRECTION.VERTICAL} = this.props;
+    const {size, offset} =
+      this.sizeAndPositionManager.getSizeAndPositionForIndex(index);
+
+    return (this.styleCache[index] = sticky
+      ? {
+          ...STYLE_STICKY_ITEM,
+          [sizeProp[scrollDirection]]: size,
+          [marginProp[scrollDirection]]: offset,
+          [oppositeMarginProp[scrollDirection]]: -(offset + size),
+          zIndex: 1
+        }
+      : {
+          ...STYLE_ITEM,
+          [sizeProp[scrollDirection]]: size,
+          [positionProp[scrollDirection]]: offset
+        });
+  }
+}

package/src/custom.d.ts

@@ -0,0 +1,14 @@
+declare module '*.svg' {
+  const content: any;
+  export default content;
+}
+
+declare module '*.md' {
+  const content: any;
+  export default content;
+}
+
+declare module '*.scss' {
+  const content: any;
+  export default content;
+}

package/src/hooks/index.ts

@@ -0,0 +1,7 @@
+/**
+ * @file 常用 hooks
+ */
+export {default as useSetState} from './use-set-state';
+export {default as useUpdateEffect} from './use-update-effect';
+export {default as useTouch} from './use-touch';
+export {default as useValidationResolver} from './use-validation-resolver';

package/src/hooks/use-set-state.ts

@@ -0,0 +1,19 @@
+import {useCallback, useState} from 'react';
+import isFunction from 'lodash/isFunction';
+
+const useSetState = <T extends object>(
+  initialState: T = {} as T
+): [T, (patch: Partial<T> | ((prevState: T) => Partial<T>)) => void] => {
+  const [state, setState] = useState<T>(initialState);
+
+  const setMergeState = useCallback(patch => {
+    setState(prevState => ({
+      ...prevState,
+      ...(isFunction(patch) ? patch(prevState) : patch)
+    }));
+  }, []);
+
+  return [state, setMergeState];
+};
+
+export default useSetState;

package/src/hooks/use-touch.ts

@@ -0,0 +1,100 @@
+import {useCallback, useRef} from 'react';
+
+const MIN_DISTANCE = 10;
+
+type Direction = '' | 'vertical' | 'horizontal';
+
+function getDirection(x: number, y: number) {
+  if (x > y && x > MIN_DISTANCE) {
+    return 'horizontal';
+  }
+  if (y > x && y > MIN_DISTANCE) {
+    return 'vertical';
+  }
+  return '';
+}
+
+const INITIAL_STATE = {
+  startX: 0,
+  startY: 0,
+  deltaX: 0,
+  deltaY: 0,
+  offsetX: 0,
+  offsetY: 0,
+  direction: '' as Direction
+};
+
+type StateType = Partial<typeof INITIAL_STATE>;
+type StateFunctionType = (value: StateType) => typeof INITIAL_STATE;
+
+const useTouch = () => {
+  const refState = useRef(INITIAL_STATE);
+  const innerState = refState.current;
+
+  const update = (value: StateType | StateFunctionType) => {
+    if (typeof value === 'function') {
+      value = value(refState.current);
+    }
+    Object.entries(value).forEach(([k, v]) => {
+      //@ts-ignore
+      refState.current[k] = v;
+    });
+  };
+
+  const isVertical = useCallback(
+    () => innerState.direction === 'vertical',
+    [innerState.direction]
+  );
+  const isHorizontal = useCallback(
+    () => innerState.direction === 'horizontal',
+    [innerState.direction]
+  );
+
+  const reset = () => {
+    update({
+      deltaX: 0,
+      deltaY: 0,
+      offsetX: 0,
+      offsetY: 0,
+      direction: ''
+    });
+  };
+
+  const start = ((event: TouchEvent) => {
+    reset();
+    update({
+      startX: event.touches[0].clientX,
+      startY: event.touches[0].clientY
+    });
+  }) as EventListener;
+
+  const move = ((event: TouchEvent) => {
+    const touch = event.touches[0];
+
+    update(value => {
+      // Fix: Safari back will set clientX to negative number
+      const newState = {...value} as typeof innerState;
+
+      newState.deltaX = touch.clientX < 0 ? 0 : touch.clientX - newState.startX;
+      newState.deltaY = touch.clientY - newState.startY;
+      newState.offsetX = Math.abs(newState.deltaX);
+      newState.offsetY = Math.abs(newState.deltaY);
+
+      if (!newState.direction) {
+        newState.direction = getDirection(newState.offsetX, newState.offsetY);
+      }
+      return newState;
+    });
+  }) as EventListener;
+
+  return {
+    ...innerState,
+    move,
+    start,
+    reset,
+    isVertical,
+    isHorizontal
+  };
+};
+
+export default useTouch;

package/src/hooks/use-update-effect.ts

@@ -0,0 +1,16 @@
+import {useEffect, useRef} from 'react';
+
+const useUpdateEffect: typeof useEffect = (effect, deps) => {
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    if (!isMounted.current) {
+      isMounted.current = true;
+    } else {
+      return effect();
+    }
+    return undefined;
+  }, deps);
+};
+
+export default useUpdateEffect;

package/src/hooks/use-validation-resolver.ts

@@ -0,0 +1,47 @@
+/**
+ * @file 用 amis 内置的验证来验证 react-hook-form 里面的表单数据
+ */
+import pick from 'lodash/pick';
+import React from 'react';
+import {validateObject, validations} from 'amis-core';
+
+function formatErrors(errors: any) {
+  const formated: any = {};
+  Object.keys(errors).forEach(key => {
+    const origin = errors[key][0];
+    if (origin) {
+      formated[key] = {
+        type: origin.rule,
+        message: origin.msg
+      };
+    }
+  });
+  return formated;
+}
+
+export function useValidationResolver(__ = (str: string) => str) {
+  return React.useCallback<any>(
+    async (values: any, context: any, config: any) => {
+      const rules: any = {};
+      const ruleKeys = Object.keys(validations);
+      for (let key of Object.keys(config.fields)) {
+        const field = config.fields[key];
+        rules[key] = pick(field, ruleKeys);
+
+        if (field.required) {
+          rules[key].isRequired = true;
+        }
+      }
+
+      const errors = validateObject(values, rules, undefined, __);
+
+      return {
+        values,
+        errors: formatErrors(errors)
+      };
+    },
+    [__]
+  );
+}
+
+export default useValidationResolver;

package/src/icons/alert-danger.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="16px" fill="currentColor"><path d="M667.904 704.32L508.992 546.56l-157.888 158.912-45.376-45.056 157.824-158.976L304.64 343.488l45.12-45.376 158.912 157.824 157.888-158.848 45.44 45.056L553.984 501.12l158.976 157.888-45.12 45.44zM510.528 64a448 448 0 1 0 2.944 896 448 448 0 0 0-2.944-896z" fill="#E8684A"></path></svg>

package/src/icons/alert-info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="16px" fill="currentColor"><path d="M512 64A448 448 0 1 1 512 960 448 448 0 0 1 512 64z m32 354.944h-64V768h64V418.944zM512 256a38.4 38.4 0 1 0-0.128 76.672A38.4 38.4 0 0 0 512 256z" fill="#2468F2"></path></svg>

package/src/icons/alert-success.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="16px" fill="currentColor"><path d="M449.856 706.56l-45.44-45.056 0.128-0.064L268.16 526.016l45.12-45.44 136.32 135.488 270.592-272.384 45.376 45.056-315.712 317.888zM510.528 64A448 448 0 1 0 960 510.528 448 448 0 0 0 510.528 64z" fill="#0BC286"></path></svg>

package/src/icons/alert-warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="16px" fill="currentColor"><path d="M512 64A448 448 0 1 1 512 960 448 448 0 0 1 512 64z m0 627.2A38.4 38.4 0 1 0 512 768a38.4 38.4 0 0 0 0-76.8zM544 256h-64v349.12h64V256z" fill="#FFB200"></path></svg>

package/src/icons/back.svg

@@ -0,0 +1,11 @@
+<svg viewBox="0 0 9 12" version="1.1" 
+    xmlns="http://www.w3.org/2000/svg" p-id="3506" 
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-11.000000, -9.000000)" fill="currentColor" fill-rule="nonzero">
+            <g transform="translate(11.000000, 9.000000)">
+                <polygon transform="translate(4.294118, 6.000000) rotate(-270.000000) translate(-4.294118, -6.000000) " points="8.76684493 2 4.29411765 6.79999999 -0.178609633 2 -1.70588235 3.6 4.29411765 10 10.2941176 3.6"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>