@cloudbase/weda-ui 2.0.27 → 3.1.1

package/src/web/components/form/input/index.tsx

@@ -1,166 +0,0 @@
-import * as React from 'react';
-import classNames from '../../../utils/classnames';
-import { usePlatform } from '../../../utils/platform';
-import { Input as TeaInput, ConfigProvider } from 'tea-component';
-import { renderDecorator } from '../renderDecorator';
-import { useSyncValue } from '../../../utils/useSyncValue';
-import './index.css';
-import type { CommonFormPropsType } from '../types';
-
-export default function Input({
-  id,
-  className,
-  style,
-  events = {},
-  // 组件属性
-  label = '标题',
-  labelVisible = true,
-  name = 'formInput',
-  defaultValue = '',
-  password = false,
-  placeholder = '请输入',
-  type = 'text',
-  maxLength = 140,
-  disabled = false,
-  focus: autoFocus = false,
-  layout = 'horizontal',
-  requiredFlag = false,
-  size = 'l',
-  clearable = true,
-  decorator,
-}: PropsType) {
-  const platform = usePlatform();
-  const cls = classNames({
-    'weda-ui': true,
-    'weda-input': true,
-    [className]: className,
-  });
-  const subCls = classNames({
-    'weui-cell': true,
-    'weui-cell_active': true,
-    'weui-cell_form': true,
-    'weui-cell_disabled': disabled,
-  });
-  const inputType = getInputType(type, password);
-
-  // 两次默认值不同时, 需要刷新value
-  const [value, setValue] = useSyncValue(defaultValue);
-
-  const onChange = function (e) {
-    const text = typeof e === 'string' ? e : e.target.value;
-    if (maxLength > 0 && text.length > maxLength) {
-      return;
-    }
-    const newValue = text;
-    setValue(newValue);
-    events.change({ value: newValue }, { originEvent: e });
-  };
-
-  const onClear = function (e) {
-    events.clear({ originValue: value }, { originEvent: e });
-    setValue('');
-    e.preventDefault();
-  };
-
-  const onKeyDown = function (e) {
-    // 确认逻辑
-    if (e.key === 'enter' || e.keyCode === 13) {
-      events.confirm({ value: e.target.value }, { originEvent: e });
-    }
-    // 数字类型的键盘, 不能输入e
-    if (inputType === 'number' && e.key === 'e') {
-      e.preventDefault();
-    }
-  };
-
-  const onFocus = function (e) {
-    events.focus({ value: e.target.value }, { originEvent: e });
-  };
-
-  const onBlur = function (e) {
-    events.blur({ value: e.target.value }, { originEvent: e });
-  };
-  const fieldEl =
-    platform === 'h5' ? (
-      <div className={subCls}>
-        <div className="weui-cell__bd weui-flex">
-          <input
-            className="weui-input"
-            type={inputType}
-            placeholder={placeholder}
-            value={value}
-            disabled={disabled}
-            name={name}
-            autoFocus={autoFocus}
-            onChange={onChange}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            onKeyDown={onKeyDown}
-            role="input"
-          />
-          {clearable && (
-            <button
-              className="weui-btn_reset weui-btn_icon weui-btn_input-clear"
-              onMouseDown={onClear}
-            >
-              <i className="weui-icon-clear"></i>
-            </button>
-          )}
-        </div>
-      </div>
-    ) : (
-      <ConfigProvider classPrefix="wedatea2td">
-        <TeaInput
-          size={size}
-          type={inputType}
-          placeholder={placeholder}
-          value={value}
-          disabled={disabled}
-          name={name}
-          autoFocus={autoFocus}
-          onChange={onChange}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          onKeyDown={onKeyDown}
-        />
-      </ConfigProvider>
-    );
-  return renderDecorator(
-    fieldEl,
-    decorator
-  )({
-    id,
-    className: cls,
-    style,
-    label: labelVisible ? label : null,
-    layout,
-    multiCell: false,
-    requiredFlag,
-    size,
-  });
-}
-
-export interface PropsType extends CommonFormPropsType {
-  defaultValue?: string;
-  password?: boolean;
-  placeholder?: string;
-  type?: 'text' | 'number' | 'idcard' | 'digit';
-  maxLength?: number;
-  focus?: boolean;
-  size?: 's' | 'm' | 'l' | 'full';
-  clearable?: boolean;
-}
-
-function getInputType(type, password) {
-  if (password) {
-    return 'password';
-  }
-  switch (type) {
-    case 'idcard':
-      return 'text';
-    case 'digit':
-      return 'number';
-    default:
-      return type;
-  }
-}

package/src/web/components/form/location/common/mapChoose.css

@@ -1,180 +0,0 @@
-/* mapChoose组件 */
-
-/* em = 16px */
-.weda-ui_map-choose {
-  width: 100%;
-  height: 100%;
-}
-.map-choose-pc {
-  display: flex;
-}
-.map-choose-pc-left {
-  width: 45%;
-  position: relative;
-}
-.map-choose-pc-right {
-  width: 55%;
-}
-.map-choose-header {
-  width: 100%;
-  padding: 8px 15px;
-  position: relative;
-  border-bottom: 1px solid #d3d3d3;
-}
-.map-choose-header_focus {
-  padding-right: 60px;
-}
-.map-choose-header_focus .map-choose-header_search_cancel {
-  display: block;
-}
-.map-choose-header_focus .map-choose-header_search_place {
-  left: 10px;
-  transform: translate(0, 0);
-}
-.map-choose-header_search {
-  height: 30px;
-  background-color: #ebebeb;
-  padding-left: 10px;
-  padding-right: 10px;
-  color: #b4b4b4;
-  font-size: 1em;
-  line-height: 2em;
-  border-radius: 5px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  position: relative;
-}
-.map-choose-header_search_place {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  display: flex;
-  align-items: center;
-  transform: translate(-50%, 0);
-}
-.map-choose-header_search_cancel {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 55px;
-  height: 46px;
-  line-height: 2.875em;
-  text-align: center;
-  font-size: 1em;
-  color: #0079ff;
-  background-color: #fff;
-  cursor: pointer;
-  display: none;
-}
-.map-choose-header_search img {
-  width: 16px;
-  height: 16px;
-  margin-right: 4px;
-}
-.map-choose-header_search input {
-  display: block;
-  width: 100%;
-  padding-top: 6px;
-  padding-bottom: 6px;
-  border: 0;
-  font-size: 0.875em;
-  line-height: 1.125em;
-  background: 0 0;
-  position: relative;
-  z-index: 1;
-}
-
-.map-choose-con {
-  width: 100%;
-  height: calc(100% - 50px);
-  position: relative;
-}
-.map-choose-warp,
-.map-choose-explore {
-  width: 100%;
-  height: 100%;
-}
-.map-choose-explore-pc {
-  height: calc(100% - 47px);
-}
-.map-choose-explore {
-  display: none;
-}
-.map-choose-explore_show {
-  display: block;
-  position: absolute;
-  z-index: 1000;
-  top: 0;
-  left: 0;
-  background-color: #fff;
-  overflow: hidden;
-}
-.map-choose-explore_show-pc {
-  top: 47px;
-}
-
-.map-choose-warp_sugges {
-  height: 55%;
-  width: 100%;
-}
-.map-choose-warp_sugges-pc {
-  height: calc(100% - 47px);
-  width: 100%;
-}
-.map-choose-warp_sugges ul,
-.map-choose-explore_show ul {
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  overflow: scroll;
-  overflow-x: hidden;
-}
-.map-choose-warp_sugges li,
-.map-choose-explore_show li {
-  width: 100%;
-  height: 59px;
-  padding-top: 6px;
-  position: relative;
-  border-bottom: 1px solid #d3d3d3;
-  cursor: pointer;
-  position: relative;
-}
-.map-choose-warp_sugges li span {
-  display: none;
-}
-.map-choose-warp_sugges_choosed span {
-  position: absolute;
-  right: 1.25em;
-  top: 50%;
-  transform: translate(0, -50%);
-  width: 1em;
-  height: 1em;
-  display: block !important;
-  background-image: url('https://qcloudimg.tencent-cloud.cn/raw/354c15c0cb845120ac3e9c474e6737b3.png');
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-}
-.map-choose-warp_sugges li div,
-.map-choose-explore_show li div {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  width: 98%;
-}
-.map-choose-warp_sugges_title,
-.map-choose-explore_title {
-  font-size: 0.875em;
-  line-height: 1.6875em;
-  color: #333;
-  font-weight: 400;
-  display: block;
-}
-
-.map-choose-explore_show_inSearch {
-  display: none;
-}
-.map-choose-explore_show-h5 {
-  height: auto;
-  min-height: 75vh;
-}

package/src/web/components/form/location/common/mapChoose.jsx

@@ -1,343 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import classNames from '../../../../utils/classnames';
-import debounce from '../../../../utils/debounce';
-import { tmapApiUrl } from '../constants';
-import { getTMap } from '../../../../utils/tmap';
-import './mapChoose.css';
-
-const { useEffect, useState, useRef } = React;
-
-export default function MapChoose({
-  changeLocation,
-  latlng = {
-    lat: null,
-    lng: null,
-  },
-  isPC,
-  APIKEY = '',
-}) {
-  const { lat, lng } = latlng;
-
-  const mapRef = useRef();
-  const markerRef = useRef();
-  const centerRef = useRef();
-
-  const [isSearch, setIsSearch] = useState(false);
-  const [searchValue, setSearchValue] = useState('');
-  const [chooseLoc, setChooseLoc] = useState({
-    location: {
-      lat: null,
-      lng: null,
-    },
-    title: '',
-    address: '',
-    id: '',
-  });
-  const [exploreList, setExploreList] = useState([]);
-  const [searchList, setSearchList] = useState([]);
-  const [mapDomName, setMapDomName] = useState(new Date().getTime());
-
-  useEffect(() => {
-    if (!APIKEY || APIKEY == '这里是示例') return;
-    function loadScript() {
-      const script = document.createElement('script');
-      script.type = 'text/javascript';
-      script.src = `${tmapApiUrl}?v=2.exp&key=${APIKEY}&callback=init&libraries=service`;
-      script.onload = () => {
-        initMap();
-      };
-      script.onerror = (error) => {
-        console.log(' load mapchoose error success', APIKEY);
-      };
-      document.body.appendChild(script);
-    }
-    if (getTMap()) {
-      initMap();
-    } else {
-      loadScript();
-    }
-    exploreNear();
-    return () => {
-      // @ts-ignore
-      mapRef.current && mapRef.current.destroy();
-    };
-  }, [APIKEY]);
-
-  const initMap = () => {
-    if (!getTMap()) return;
-    const TMap = getTMap();
-    //定义地图中心点坐标
-    const center = new TMap.LatLng(lat, lng);
-    //定义map变量，调用 TMap.Map() 构造函数创建地图
-    mapRef.current = new TMap.Map(
-      document.getElementById(`form-map-choose-${mapDomName}`),
-      {
-        center, //设置地图中心点坐标
-        zoom: 16, //设置地图缩放级别
-      }
-    );
-    initMarker(getTMap(), mapRef.current);
-  };
-
-  const initMarker = (TMap, map) => {
-    const canLoad = lat && lng && TMap && map;
-    if (canLoad) {
-      const position = new TMap.LatLng(lat, lng);
-      markerRef.current = new TMap.MultiMarker({
-        map: mapRef.current,
-        styles: {
-          pointer: new TMap.MarkerStyle({
-            width: 26,
-            height: 35,
-          }),
-        },
-        geometries: [
-          {
-            id: `pointer-origin-${mapDomName}`,
-            styleId: 'pointer',
-            position,
-          },
-          {
-            id: `pointer-${mapDomName}`,
-            styleId: 'pointer',
-            position,
-          },
-        ],
-      });
-      // 监听中心点变化事件，更新marker的位置
-      map.on('center_changed', updateCenter);
-    }
-  };
-
-  const updateCenter = () => {
-    const TMap = getTMap();
-    const canLoad = TMap && lat && lng && mapRef.current;
-    if (canLoad) {
-      const nowPosition = new TMap.LatLng(lat, lng);
-      // @ts-ignore
-      let centerPosition = mapRef.current.getCenter();
-      centerRef.current = centerPosition;
-      // @ts-ignore
-      markerRef.current.updateGeometries([
-        {
-          id: `pointer-origin-${mapDomName}`,
-          styleId: 'pointer',
-          position: nowPosition,
-        },
-        {
-          id: `pointer-${mapDomName}`,
-          styleId: 'pointer',
-          // @ts-ignore
-          position: mapRef.current.getCenter(),
-        },
-      ]);
-      exploreNear();
-    }
-  };
-
-  const handleFocus = (value) => {
-    setIsSearch(value);
-  };
-
-  const exploreNear = debounce(() => {
-    const { lat, lng } = centerRef.current || latlng;
-    let TMap = getTMap();
-    let search = new TMap.service.Search({ pageSize: 20 }); // 新建一个地点搜索类
-    search
-      .explore({
-        center: new TMap.LatLng(lat, lng),
-        policy: 1,
-        radius: 2000,
-        pageIndex: 1,
-      })
-      .then((res) => {
-        res.data && setExploreList(res.data);
-      });
-  }, 500);
-
-  const chooseLoction = (value, type) => {
-    const TMap = getTMap();
-    //定义地图中心点坐标
-    const center = new TMap.LatLng(value.location.lat, value.location.lng);
-    // @ts-ignore
-    mapRef.current.setCenter(center);
-    setChooseLoc(value);
-    changeLocation(value);
-    type && cancleSearch();
-  };
-
-  const changeSearchValue = (event) => {
-    if (event.target.value) {
-      setSearchValue(event.target.value);
-      let TMap = getTMap();
-      let search = new TMap.service.Search({ pageSize: 10 }); // 新建一个地点搜索类
-      search
-        .searchNearby({
-          keyword: event.target.value,
-          center: new TMap.LatLng(lat, lng),
-          radius: 2000,
-          pageIndex: 1,
-        })
-        .then((res) => {
-          setSearchList(res.data);
-        })
-        .catch((error) => {
-          console.log('error', error);
-        });
-    } else {
-      setSearchValue('');
-      setTimeout(() => {
-        setSearchList([]);
-      }, 300);
-    }
-  };
-
-  const cancleSearch = () => {
-    handleFocus(false);
-    setSearchValue('');
-    setSearchList([]);
-  };
-
-  const renderHeader = () => {
-    return (
-      <div
-        className={classNames({
-          'map-choose-header': true,
-          'map-choose-header_focus': isSearch,
-        })}
-      >
-        <div className="map-choose-header_search">
-          <input
-            type="text"
-            onFocus={() => {
-              handleFocus(true);
-            }}
-            onChange={changeSearchValue}
-            value={searchValue}
-          />
-          {!searchValue && (
-            <div className="map-choose-header_search_place">
-              <img
-                src="https://qcloudimg.tencent-cloud.cn/raw/388c48cdcbe9ca07f5682fb10d05ebdd.png"
-                alt=""
-              />
-              <span>搜索地点</span>
-            </div>
-          )}
-        </div>
-        <span
-          className="map-choose-header_search_cancel"
-          onClick={cancleSearch}
-        >
-          取消
-        </span>
-      </div>
-    );
-  };
-  const renderMapView = () => {
-    return (
-      <div
-        id={`form-map-choose-${mapDomName}`}
-        style={{ height: isPC ? '100%' : '45%', width: '100%' }}
-      ></div>
-    );
-  };
-  const renderSuggestList = () => {
-    return (
-      <div
-        className={classNames({
-          'map-choose-warp_sugges': true,
-          'map-choose-explore_show_inSearch': isSearch,
-          'map-choose-warp_sugges-pc': isPC,
-        })}
-      >
-        <ul>
-          {exploreList.map((item, index) => (
-            <li
-              key={index}
-              onClick={() => {
-                chooseLoction(item);
-              }}
-              className={classNames({
-                'map-choose-warp_sugges_choosed': chooseLoc.id == item.id,
-              })}
-            >
-              <div className="map-choose-warp_sugges_title">{item.title}</div>
-              <div>{item.address}</div>
-              <span />
-            </li>
-          ))}
-        </ul>
-      </div>
-    );
-  };
-  const renderExplore = () => {
-    return (
-      <div
-        className={classNames({
-          'map-choose-explore': true,
-          'map-choose-explore_show': isSearch,
-          'map-choose-explore_show-h5': isSearch && !isPC,
-          'map-choose-explore-pc': isPC,
-          'map-choose-explore_show-pc': isPC,
-        })}
-      >
-        <ul>
-          {searchList.map((item, index) => (
-            <li
-              key={index}
-              onClick={() => {
-                chooseLoction(item, true);
-              }}
-              className={classNames({
-                'map-choose-explore_choosed': chooseLoc.id == item.id,
-              })}
-            >
-              <div className="map-choose-explore_title">{item.title}</div>
-              <div>{item.address}</div>
-              <span />
-            </li>
-          ))}
-        </ul>
-      </div>
-    );
-  };
-  if (isPC) {
-    return (
-      <div
-        className={classNames(
-          'map-choose',
-          'map-choose-pc',
-          'weda-ui_map-choose'
-        )}
-      >
-        <div className="map-choose-pc-left">
-          {renderHeader()}
-          {renderSuggestList()}
-          {renderExplore()}
-        </div>
-        <div className="map-choose-pc-right">{renderMapView()}</div>
-      </div>
-    );
-  }
-  return (
-    <div className="map-choose weda-ui_map-choose">
-      {renderHeader()}
-      <div className="map-choose-con">
-        <div className="map-choose-warp">
-          {renderMapView()}
-          {renderSuggestList()}
-        </div>
-        {renderExplore()}
-      </div>
-    </div>
-  );
-}
-
-MapChoose.propTypes = {
-  APIKEY: PropTypes.string,
-  latlng: PropTypes.object,
-  changeLocation: PropTypes.func,
-  isPC: PropTypes.bool,
-};