amis-ui 1.0.0-beta.0

package/src/components/Badge.tsx

@@ -0,0 +1,300 @@
+/**
+ * @file 角标组件
+ */
+
+import React from 'react';
+import hoistNonReactStatic from 'hoist-non-react-statics';
+
+import {evalExpression, buildStyle} from 'amis-core';
+import {resolveVariable, resolveVariableAndFilter} from 'amis-core';
+import {ClassNamesFn} from 'amis-core';
+import type {BaseSchema, SchemaExpression} from 'amis-core/dist/schema';
+
+/**
+ * Badge 角标。
+ * 文档：https://baidu.gitee.io/amis/docs/components/badge
+ */
+export interface BadgeSchema extends Omit<BaseSchema, 'type'> {
+  /**
+   * 文本内容
+   */
+  text?: string | number;
+
+  /**
+   * 大小
+   */
+  size?: number;
+
+  /**
+   * 角标类型
+   */
+  mode?: 'text' | 'dot' | 'ribbon';
+
+  /**
+   * 角标位置，优先级大于position
+   */
+  offset?: [number | string, number | string];
+
+  /**
+   * 角标位置
+   */
+  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+
+  /**
+   * 封顶的数字值
+   */
+  overflowCount?: number;
+
+  /**
+   * 动态控制是否显示
+   */
+  visibleOn?: SchemaExpression;
+
+  /**
+   * 是否显示动画
+   */
+  animation?: boolean;
+
+  /**
+   * 角标的自定义样式
+   */
+  style?: {
+    [propName: string]: any;
+  };
+
+  /**
+   * 提示类型
+   */
+  level?: 'info' | 'warning' | 'success' | 'danger' | SchemaExpression;
+}
+
+export interface BadgeProps {
+  badge?: BadgeSchema;
+  classnames: ClassNamesFn;
+  data: any;
+}
+
+export class Badge extends React.Component<BadgeProps, object> {
+  static propsList: Array<string> = ['body', 'className', 'children'];
+
+  constructor(props: BadgeProps) {
+    super(props);
+  }
+
+  renderBadge(
+    text: any,
+    size: number,
+    position: any,
+    offsetStyle: any,
+    sizeStyle: any,
+    animationElement: any
+  ) {
+    const {classnames: cx, badge, data} = this.props;
+    let {mode = 'dot', level = 'danger', style} = badge as BadgeSchema;
+
+    const customStyle = buildStyle(style, data);
+
+    if (typeof level === 'string' && level[0] === '$') {
+      level = resolveVariableAndFilter(level, data);
+    }
+
+    switch (mode) {
+      case 'dot':
+        return (
+          <span
+            className={cx('Badge-dot', `Badge--${position}`, `Badge--${level}`)}
+            style={{...offsetStyle, ...sizeStyle, ...customStyle}}
+          >
+            {animationElement}
+          </span>
+        );
+      case 'text':
+        return (
+          <span
+            className={cx(
+              'Badge-text',
+              `Badge--${position}`,
+              `Badge--${level}`
+            )}
+            style={{...offsetStyle, ...sizeStyle, ...customStyle}}
+          >
+            {text}
+            {animationElement}
+          </span>
+        );
+      case 'ribbon':
+        const outSize = size * Math.sqrt(2) + 5;
+        return (
+          <div
+            className={cx('Badge-ribbon-out', `Badge-ribbon-out--${position}`)}
+            style={{width: outSize, height: outSize}}
+          >
+            <span
+              className={cx(
+                'Badge-ribbon',
+                `Badge-ribbon--${position}`,
+                `Badge--${level}`
+              )}
+              style={{...sizeStyle, ...customStyle}}
+            >
+              {text}
+              {animationElement}
+            </span>
+          </div>
+        );
+      default:
+        return null;
+    }
+  }
+
+  render() {
+    const badge = this.props.badge;
+    if (!badge) {
+      return this.props.children;
+    }
+    const {children, classnames: cx, data} = this.props;
+    let isDisplay = true;
+    if (typeof badge === 'string') {
+      isDisplay = evalExpression(badge, data) === true;
+    }
+
+    let {
+      mode = 'dot',
+      text,
+      level,
+      size,
+      style,
+      offset,
+      position = 'top-right',
+      overflowCount = 99,
+      visibleOn,
+      className,
+      animation
+    } = badge;
+
+    if (visibleOn) {
+      isDisplay = evalExpression(visibleOn, data) === true;
+    }
+
+    if (typeof text === 'string' && text[0] === '$') {
+      text = resolveVariableAndFilter(text, data);
+    }
+
+    // 设置默认值
+    if (typeof size === 'undefined') {
+      if (mode === 'dot') {
+        size = 6;
+      } else if (mode === 'ribbon') {
+        size = 12;
+      } else {
+        size = 16;
+      }
+    }
+
+    let sizeStyle = {};
+    if (mode === 'text') {
+      sizeStyle = {
+        borderRadius: size / 2,
+        height: size,
+        lineHeight: size + 'px'
+      };
+      // 当text、overflowCount都为number类型时，进行封顶值处理
+      if (typeof text === 'number' && typeof overflowCount === 'number') {
+        text = (
+          (text as number) > (overflowCount as number)
+            ? `${overflowCount}+`
+            : text
+        ) as string | number;
+      }
+
+      if (!text) {
+        isDisplay = false;
+      }
+    }
+
+    if (mode === 'dot') {
+      sizeStyle = {width: size, height: size};
+    }
+
+    if (mode === 'ribbon') {
+      sizeStyle = {
+        height: size,
+        lineHeight: size + 'px',
+        fontSize: size
+      };
+    }
+
+    let offsetStyle = {};
+    // 如果设置了offset属性，offset在position为'top-right'的基础上进行translate定位
+    if (offset && offset.length) {
+      position = 'top-right';
+      const left = `calc(50% + ${parseInt(offset[0] as string, 10)}px)`;
+      const right = `calc(-50% + ${parseInt(offset[1] as string, 10)}px)`;
+      offsetStyle = {
+        transform: `translate(${left}, ${right})`
+      };
+    }
+
+    let animationBackground = 'var(--danger)';
+
+    if (style && style.background) {
+      animationBackground = style.background;
+    }
+
+    const animationElement = animation ? (
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          border: `1px solid ${animationBackground}`,
+          borderRadius: '50%',
+          animation: 'badgeDotAnimation 1.2s infinite ease-in-out'
+        }}
+      ></div>
+    ) : null;
+
+    return (
+      <div className={cx('Badge', className)}>
+        {children}
+        {isDisplay
+          ? this.renderBadge(
+              text,
+              size,
+              position,
+              offsetStyle,
+              sizeStyle,
+              animationElement
+            )
+          : null}
+      </div>
+    );
+  }
+}
+
+export function withBadge<P extends object>(Component: React.ComponentType<P>) {
+  return hoistNonReactStatic(
+    class WithBadge extends React.Component<P & BadgeProps> {
+      static displayName = `WithBadge(${
+        Component.displayName || Component.name
+      })`;
+
+      render() {
+        const badge = this.props.badge;
+
+        if (!badge) {
+          return <Component {...(this.props as P)} />;
+        }
+
+        return (
+          <Badge {...(this.props as BadgeProps)}>
+            <Component {...(this.props as P)} />
+          </Badge>
+        );
+      }
+    },
+    Component
+  );
+}

package/src/components/BaiduMapPicker.tsx

@@ -0,0 +1,394 @@
+import React from 'react';
+import {ClassNamesFn, themeable} from 'amis-core';
+import {loadScript, autobind, uuid} from 'amis-core';
+import debounce from 'lodash/debounce';
+import {Icon} from './icons';
+
+declare const BMap: any;
+
+/**
+ * 坐标常量说明：
+ * COORDINATES_WGS84 = 1, WGS84坐标
+ * COORDINATES_WGS84_MC = 2, WGS84的平面墨卡托坐标
+ * COORDINATES_GCJ02 = 3，GCJ02坐标
+ * COORDINATES_GCJ02_MC = 4, GCJ02的平面墨卡托坐标
+ * COORDINATES_BD09 = 5, 百度bd09经纬度坐标
+ * COORDINATES_BD09_MC = 6，百度bd09墨卡托坐标
+ * COORDINATES_MAPBAR = 7，mapbar地图坐标
+ * COORDINATES_51 = 8，51地图坐标
+ */
+const COORDINATES_WGS84 = 1;
+const COORDINATES_WGS84_MC = 2;
+const COORDINATES_GCJ02 = 3;
+const COORDINATES_GCJ02_MC = 4;
+const COORDINATES_BD09 = 5;
+const COORDINATES_BD09_MC = 6;
+const COORDINATES_MAPBAR = 7;
+const COORDINATES_51 = 8;
+
+interface MapPickerProps {
+  ak: string;
+  coordinatesType: string;
+  classnames: ClassNamesFn;
+  classPrefix: string;
+  value?: {
+    address: string;
+    lat: number;
+    lng: number;
+    city?: string;
+  };
+  onChange: (value: any) => void;
+}
+
+interface LocationItem {
+  title?: string;
+  address: string;
+  lat: number;
+  lng: number;
+  city?: string;
+}
+
+interface MapPickerState {
+  inputValue: string;
+  locIndex?: number;
+  locs: Array<LocationItem>;
+  sugs: Array<string>;
+}
+
+export class BaiduMapPicker extends React.Component<
+  MapPickerProps,
+  MapPickerState
+> {
+  state: MapPickerState = {
+    inputValue: '',
+    locs: [],
+    locIndex: -1,
+    sugs: []
+  };
+
+  id = uuid();
+  mapRef: React.RefObject<HTMLDivElement> = React.createRef();
+  placeholderInput?: HTMLInputElement;
+  map: any;
+  ac: any;
+  search = debounce(
+    () => {
+      if (this.state.inputValue) {
+        this.ac?.search(this.state.inputValue);
+      } else {
+        this.setState({
+          sugs: []
+        });
+      }
+    },
+    250,
+    {
+      trailing: true,
+      leading: false
+    }
+  );
+  convertor: any;
+
+  componentDidMount() {
+    if ((window as any).BMap) {
+      this.initMap();
+    } else {
+      loadScript(
+        `//api.map.baidu.com/api?v=3.0&ak=${this.props.ak}&callback={{callback}}`
+      ).then(this.initMap);
+    }
+  }
+
+  componentWillUnmount() {
+    this.ac?.dispose();
+    document.body.removeChild(this.placeholderInput!);
+
+    delete this.placeholderInput;
+    delete this.map;
+  }
+
+  @autobind
+  async initMap() {
+    const map = new BMap.Map(this.mapRef.current, {
+      enableMapClick: false
+    });
+    this.map = map;
+    this.convertor = new BMap.Convertor();
+
+    const value = this.props.value;
+    let point = value
+      ? new BMap.Point(value.lng, value.lat)
+      : new BMap.Point(116.404, 39.915);
+    if (this.props.coordinatesType == 'gcj02') {
+      point = await this.covertPoint(
+        point,
+        COORDINATES_GCJ02,
+        COORDINATES_BD09
+      );
+      map.centerAndZoom(point, 15);
+    } else {
+      map.centerAndZoom(point, 15);
+    }
+
+    map.addControl(
+      // @ts-ignore
+      new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL})
+    );
+
+    const geolocationControl = new BMap.GeolocationControl();
+    geolocationControl.addEventListener('locationSuccess', (e: any) => {
+      this.getLocations(e.point);
+    });
+    map.addControl(geolocationControl);
+
+    map.addEventListener('click', (e: any) => {
+      this.getLocations(e.point, true);
+    });
+
+    const input = document.createElement('input');
+    input.className = 'invisible';
+    this.placeholderInput = input;
+    document.body.appendChild(input);
+
+    this.ac = new BMap.Autocomplete({
+      input,
+      location: map,
+      onSearchComplete: (result: any) => {
+        // 说明已经销毁了。
+        if (!this.map) {
+          return;
+        }
+
+        const sugs: Array<string> = [];
+
+        const poiLength = result.getNumPois();
+        if (poiLength) {
+          for (let i = 0; i < poiLength; i++) {
+            const poi = result.getPoi(i);
+            sugs.push(
+              [
+                poi.province,
+                poi.city,
+                poi.district,
+                poi.street,
+                poi.business
+              ].join(' ')
+            );
+          }
+          this.setState({
+            sugs
+          });
+        }
+      }
+    });
+
+    value ? this.getLocations(point) : geolocationControl.location();
+  }
+
+  getLocations(point: any, select?: boolean) {
+    const map = this.map;
+
+    map.clearOverlays();
+    const mk = new BMap.Marker(point);
+    map.addOverlay(mk);
+    map.panTo(point);
+
+    var geoc = new BMap.Geocoder();
+    geoc.getLocation(point, (rs: any) => {
+      // 说明已经销毁了。
+      if (!this.map) {
+        return;
+      }
+
+      const index = 0;
+      const locs: Array<LocationItem> = [];
+
+      locs.push({
+        title: '当前位置',
+        address: rs.address,
+        city: rs.addressComponents.city,
+        lat: rs.point.lat,
+        lng: rs.point.lng
+      });
+
+      if (Array.isArray(rs.surroundingPois)) {
+        rs.surroundingPois.forEach((item: any) => {
+          locs.push({
+            title: item.title,
+            address: item.address,
+            city: item.city,
+            lat: item.point.lat,
+            lng: item.point.lng
+          });
+        });
+      }
+
+      this.setState(
+        {
+          locIndex: index,
+          locs
+        },
+        () => {
+          if (!select) {
+            return;
+          }
+
+          this.triggerOnChange(locs[0]);
+        }
+      );
+    });
+  }
+
+  @autobind
+  handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    this.setState(
+      {
+        inputValue: e.currentTarget.value
+      },
+      this.search
+    );
+  }
+
+  @autobind
+  handleSelect(e: React.MouseEvent<HTMLElement>) {
+    const index = parseInt(e.currentTarget.getAttribute('data-index')!, 10);
+    const loc = this.state.locs[index];
+
+    this.setState(
+      {
+        locIndex: index
+      },
+      () => {
+        const point = new BMap.Point(loc.lng, loc.lat);
+
+        this.map.clearOverlays();
+        const mk = new BMap.Marker(point);
+        this.map.addOverlay(mk);
+        this.map.panTo(point);
+
+        this.triggerOnChange(loc);
+      }
+    );
+  }
+
+  covertPoint(point: any, from: number, to: number) {
+    return new Promise((resolve, reject) => {
+      this.convertor.translate([point], from, to, (res: any) => {
+        if (res.status === 0 && res.points.length) {
+          resolve(new BMap.Point(res.points[0].lng, res.points[0].lat));
+        } else {
+          reject();
+        }
+      });
+    });
+  }
+
+  triggerOnChange(loc: LocationItem) {
+    const point = new BMap.Point(loc.lng, loc.lat);
+    if (this.props.coordinatesType == 'gcj02') {
+      this.covertPoint(point, COORDINATES_BD09, COORDINATES_GCJ02).then(
+        (convertedPoint: any) => {
+          this.props?.onChange({
+            address: loc.address.trim() || loc.title,
+            lat: convertedPoint.lat,
+            lng: convertedPoint.lng,
+            city: loc.city
+          });
+        }
+      );
+    } else {
+      this.props?.onChange({
+        address: loc.address.trim() || loc.title,
+        lat: loc.lat,
+        lng: loc.lng,
+        city: loc.city
+      });
+    }
+  }
+
+  @autobind
+  handleSugSelect(e: React.MouseEvent<HTMLDivElement>) {
+    const value = e.currentTarget.innerText;
+    this.setState({
+      inputValue: value
+    });
+
+    var local = new BMap.LocalSearch(this.map, {
+      //智能搜索
+      onSearchComplete: () => {
+        const results = local.getResults();
+        const poi = results.getPoi(0);
+        this.setState({
+          inputValue: poi.title,
+          sugs: []
+        });
+        this.getLocations(poi.point, true);
+      }
+    });
+    local.search(value);
+  }
+
+  render() {
+    const {classnames: cx} = this.props;
+    const {locIndex, locs, inputValue, sugs} = this.state;
+    const hasSug = Array.isArray(sugs) && sugs.length;
+
+    return (
+      <div className={cx('MapPicker')}>
+        <div className={cx('MapPicker-search TextControl-control')}>
+          <div className={cx('TextControl-input')}>
+            <input
+              onChange={this.handleChange}
+              value={inputValue}
+              placeholder="搜索地点"
+            />
+          </div>
+        </div>
+
+        <div
+          ref={this.mapRef}
+          className={cx('MapPicker-map', {
+            invisible: hasSug
+          })}
+        />
+
+        <div
+          className={cx('MapPicker-result', {
+            invisible: hasSug
+          })}
+        >
+          {locs.map((item, index) => (
+            <div
+              onClick={this.handleSelect}
+              key={index}
+              data-index={index}
+              className={cx('MapPicker-item')}
+            >
+              <div className={cx('MapPicker-itemTitle')}>{item.title}</div>
+              <div className={cx('MapPicker-itemDesc')}>{item.address}</div>
+              {locIndex === index ? (
+                <Icon icon="success" className="icon" />
+              ) : null}
+            </div>
+          ))}
+        </div>
+
+        {hasSug ? (
+          <div className={cx('MapPicker-sug')}>
+            {sugs.map(item => (
+              <div
+                onClick={this.handleSugSelect}
+                className={cx('MapPicker-sugItem')}
+                key={item}
+              >
+                {item}
+              </div>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+}
+
+export default themeable(BaiduMapPicker);