添加位置选择器控件部分代码

scss/components/form/_location.scss

@@ -0,0 +1,78 @@
+.#{$ns}LocationPicker {
+  position: relative;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  border: $DatePicker-borderWidth solid $DatePicker-borderColor;
+  font-size: $DatePicker-fontSize;
+  padding: $DatePicker-paddingY $DatePicker-paddingX;
+  height: $DatePicker-height;
+  outline: none;
+  white-space: nowrap;
+  color: $DatePicker-color;
+  background-color: $DatePicker-bg;
+  border-radius: $DatePicker-borderRadius;
+
+  &:not(.is-disabled) {
+    cursor: pointer;
+
+    &:hover {
+      background-color: $DatePicker-onHover-bg;
+      border-color: $DatePicker-onHover-borderColor;
+
+      .#{$ns}DatePicker-toggler:before {
+        color: $DatePicker-onHover-iconColor;
+      }
+    }
+  }
+
+  &.is-focused {
+    border-color: $DatePicker-onFocused-borderColor;
+    box-shadow: $Form-input-boxShadow;
+  }
+
+  &.is-disabled {
+    background: $gray200;
+
+    > &-input {
+      color: $text--muted-color;
+    }
+  }
+
+  &-placeholder {
+    color: $DatePicker-placeholderColor;
+    user-select: none;
+    margin-right: $gap-base;
+    flex-basis: 0;
+    flex-grow: 1;
+  }
+
+  &-value {
+    margin-right: $gap-base;
+    flex-basis: 0;
+    flex-grow: 1;
+  }
+
+  &-toggler {
+    cursor: pointer;
+    color: $DatePicker-iconColor;
+
+    &:hover {
+      color: $DatePicker-onHover-iconColor;
+    }
+  }
+
+  &-clear {
+    display: inline-block;
+    @include input-clear();
+    line-height: 1;
+    margin-right: $gap-xs;
+  }
+}
+
+.#{$ns}LocationControl {
+  position: relative;
+}
+
+.#{$ns}LocationControl:not(.is-inline) > .#{$ns}LocationPicker {
+  display: flex;
+}

scss/themes/cxd.scss

@@ -548,6 +548,7 @@ $Card-actions-onChecked-onHover-bg: $white;
 @import '../components/form/number';
 @import '../components/form/select';
 @import '../components/form/list';
+@import '../components/form/location';
 @import '../components/form/matrix';
 @import '../components/form/color';
 @import '../components/form/date';

scss/themes/dark.scss

@@ -214,6 +214,7 @@ pre {
 @import '../components/form/number';
 @import '../components/form/select';
 @import '../components/form/list';
+@import '../components/form/location';
 @import '../components/form/matrix';
 @import '../components/form/color';
 @import '../components/form/date';

scss/themes/default.scss

@@ -79,6 +79,7 @@ $Form-input-borderColor: #cfdadd;
 @import '../components/form/number';
 @import '../components/form/select';
 @import '../components/form/list';
+@import '../components/form/location';
 @import '../components/form/matrix';
 @import '../components/form/color';
 @import '../components/form/date';

src/components/BaiduMapPicker.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default class BaiduMapPicker extends React.Component<any> {
+  render() {
+    return <p>233</p>;
+  }
+}

src/components/LocationPicker.tsx

@@ -0,0 +1,187 @@
+import React from 'react';
+import {themeable, ClassNamesFn} from '../theme';
+import Overlay from './Overlay';
+import PopOver from './PopOver';
+import {Icon} from './icons';
+import {autobind} from '../utils/helper';
+import Alert2 from './Alert2';
+import BaiduMapPicker from './BaiduMapPicker';
+
+export interface LocationProps {
+  vendor: 'baidu' | 'gaode' | 'tenxun';
+  placeholder: string;
+  clearable: boolean;
+  value?: {
+    address: string;
+    lat: number;
+    lng: number;
+    city?: string;
+  };
+  disabled?: boolean;
+  className?: string;
+  onChange: (value: any) => void;
+  classnames: ClassNamesFn;
+  classPrefix: string;
+  popOverContainer?: any;
+}
+
+export interface LocationState {
+  isFocused: boolean;
+  isOpened: boolean;
+}
+
+export class LocationPicker extends React.Component<
+  LocationProps,
+  LocationState
+> {
+  static defaultProps = {
+    placeholder: '请选择位置',
+    clearable: false
+  };
+  domRef: React.RefObject<HTMLDivElement> = React.createRef();
+  state = {
+    isFocused: false,
+    isOpened: false
+  };
+
+  @autobind
+  handleKeyPress(e: React.KeyboardEvent) {
+    if (e.key === ' ') {
+      this.handleClick();
+      e.preventDefault();
+    }
+  }
+
+  @autobind
+  handleFocus() {
+    this.setState({
+      isFocused: true
+    });
+  }
+
+  @autobind
+  handleBlur() {
+    this.setState({
+      isFocused: true
+    });
+  }
+
+  @autobind
+  handleClick() {
+    this.state.isOpened ? this.close() : this.open();
+  }
+
+  @autobind
+  getTarget() {
+    return this.domRef.current;
+  }
+
+  @autobind
+  getParent() {
+    return this.domRef.current?.parentElement;
+  }
+
+  @autobind
+  open(fn?: () => void) {
+    this.props.disabled ||
+      this.setState(
+        {
+          isOpened: true
+        },
+        fn
+      );
+  }
+
+  @autobind
+  close() {
+    this.setState({
+      isOpened: false
+    });
+  }
+
+  @autobind
+  clearValue(e: React.MouseEvent<any>) {
+    e.preventDefault();
+    e.stopPropagation();
+    const onChange = this.props.onChange;
+    onChange('');
+  }
+
+  @autobind
+  handlePopOverClick(e: React.MouseEvent<any>) {
+    e.stopPropagation();
+    e.preventDefault();
+  }
+
+  render() {
+    const {
+      classnames: cx,
+      value,
+      className,
+      disabled,
+      placeholder,
+      clearable,
+      popOverContainer,
+      vendor
+    } = this.props;
+    const {isFocused, isOpened} = this.state;
+
+    return (
+      <div
+        tabIndex={0}
+        onKeyPress={this.handleKeyPress}
+        onFocus={this.handleFocus}
+        onBlur={this.handleBlur}
+        className={cx(
+          `LocationPicker`,
+          {
+            'is-disabled': disabled,
+            'is-focused': isFocused
+          },
+          className
+        )}
+        ref={this.domRef}
+        onClick={this.handleClick}
+      >
+        {value ? (
+          <span className={cx('LocationPicker-value')}>{value.address}</span>
+        ) : (
+          <span className={cx('LocationPicker-placeholder')}>
+            {placeholder}
+          </span>
+        )}
+
+        {clearable && !disabled && value ? (
+          <a className={cx('LocationPicker-clear')} onClick={this.clearValue}>
+            <Icon icon="close" className="icon" />
+          </a>
+        ) : null}
+
+        <a className={cx('LocationPicker-toggler')}>
+          <Icon icon="search" />
+        </a>
+
+        <Overlay
+          target={this.getTarget}
+          container={popOverContainer || this.getParent}
+          rootClose={false}
+          show={isOpened}
+        >
+          <PopOver
+            className={cx('LocationPicker-popover')}
+            onHide={this.close}
+            overlay
+            onClick={this.handlePopOverClick}
+          >
+            {vendor === 'baidu' ? (
+              <BaiduMapPicker />
+            ) : (<Alert2>{vendor} 地图控件不支持</Alert2>)}
+          </PopOver>
+        </Overlay>
+      </div>
+    );
+  }
+}
+
+const ThemedCity = themeable(LocationPicker);
+export default ThemedCity;

src/index.tsx

@@ -97,6 +97,7 @@ import './renderers/Form/ButtonGroup';
 import './renderers/Form/ButtonToolbar';
 import './renderers/Form/Radios';
 import './renderers/Form/List';
+import './renderers/Form/Location';
 import './renderers/Form/Select';
 import './renderers/Form/Static';
 import './renderers/Form/Date';

src/renderers/Form/Location.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {themeable, ClassNamesFn} from '../../theme';
+import FormItem, {FormControlProps} from './Item';
+import LocationPicker from '../../components/LocationPicker';
+
+export interface LocationControlProps extends FormControlProps {
+  vendor: 'baidu' | 'gaode' | 'tenxun';
+  value: any;
+  onChange: (value: any) => void;
+  classnames: ClassNamesFn;
+  classPrefix: string;
+}
+
+export class LocationControl extends React.Component<LocationControlProps> {
+  static defaultProps = {
+    vendor: 'baidu'
+  };
+
+  render() {
+    return (
+      <div className={this.props.classnames('LocationControl')}>
+        <LocationPicker {...this.props} />
+      </div>
+    );
+  }
+}
+
+@FormItem({
+  type: 'location'
+})
+export class LocationRenderer extends LocationControl {}