@cloudbase/weda-ui 0.2.15 → 1.0.21

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Checkbox as TeaCheckbox, ConfigProvider } from 'tea-component';
 
 import classNames from '../../../utils/classnames';
@@ -8,6 +8,8 @@ import fromEntries from 'object.fromentries';
 import { usePlatform } from '../../../utils/platform';
 import { renderDecorator } from '../renderDecorator';
 import { CommonFormPropsType } from '../types';
+import { callWedaApi } from '../../../utils/tcb';
+import destr from 'destr';
 
 export default function Checkbox({
   // 系统属性
@@ -19,6 +21,8 @@ export default function Checkbox({
   name = 'formCheckbox',
   label = '标题',
   labelVisible = true,
+  format = '',
+  enumName = '',
   range = [],
   layout = 'horizontal',
   disabled = false,
@@ -40,21 +44,47 @@ export default function Checkbox({
     'weui-cell_disabled': isH5 && disabled,
   });
 
+  const [option, setOption] = useState(range);
   const [checkedItems, setCheckedItems] = React.useState(
-    platform === 'h5' ? fromEntries(range.map(({ value, checked }) => [value, !!checked]))
-    : range.filter(({checked}) => checked).map(({value}) => value)
+    platform === 'h5' ? fromEntries(option.map(({ value, checked }) => [value, !!checked]))
+      : option.filter(({ checked }) => checked).map(({ value }) => value)
   );
   // 两次range不同时, 需要刷新checkedItems
   const prevRangeRef = React.useRef<object[]>();
   React.useEffect(() => {
-    if (!isObjectEqual(prevRangeRef.current, range)) {
-      prevRangeRef.current = range;
+    if (!isObjectEqual(prevRangeRef.current, option)) {
+      prevRangeRef.current = option;
       setCheckedItems(
-        fromEntries(range.map(({ value, checked }) => [value, !!checked]))
+        fromEntries(option.map(({ value, checked }) => [value, !!checked]))
       );
     }
   });
 
+  useEffect(() => {
+    // 如果绑定字段类型为枚举，且传入自定义选项集的名称则默认使用自定义选项集的内容作为选项
+    if (format === 'x-enum' && enumName) {
+      fetchData({ OptNameList: [enumName], PageIndex: 1, PageSize: 10 });
+    }
+  }, []);
+
+  const fetchData = async (param:
+    { OptNameList?: object, PageIndex?: number, PageSize?: number }
+  ) => {
+    let data = await callWedaApi({
+      action: 'DescribeGeneralOptionsDetailList',
+      data: param,
+    });
+    const config = destr(data?.Items?.[0]?.Config) ?? [];
+    const enumOption = config.map(item => {
+      return {
+        label: item.value,
+        value: item.key,
+        checked: false
+      };
+    });
+    setOption(enumOption);
+  };
+
   /**
    * 在ios h5端, label和input的绑定不生效
    * 导致 onChange 事件触发有问题, 所以改为监听 onClick 事件
@@ -82,8 +112,8 @@ export default function Checkbox({
   // 现在低码组件往源码组件传入的id不唯一, 暂时使用hashcode替代
   const hashcode = React.useMemo(() => getLocalCounter(), []);
   let checkboxElement;
-  if(platform === 'h5') {
-    checkboxElement = range.map(({ label, value }, index) => {
+  if (platform === 'h5') {
+    checkboxElement = option.map(({ label, value }, index) => {
       const _id = `checkbox-${hashcode}-${index}`;
       const _name = `checkbox-${hashcode}-${name}`;
       return (
@@ -120,17 +150,17 @@ export default function Checkbox({
             .map(([value]) => value)
           }
           onChange={value => {
-            const newMap = range
-            .map((opt) => opt.value)
-            .reduce((acc, cur) => {
-              const idx = value.indexOf(cur);
-              if(idx < 0) {
-                acc[cur] = false;
-              } else {
-                acc[cur] = true;
-              }
-              return acc;
-            }, {});
+            const newMap = option
+              .map((opt) => opt.value)
+              .reduce((acc, cur) => {
+                const idx = value.indexOf(cur);
+                if (idx < 0) {
+                  acc[cur] = false;
+                } else {
+                  acc[cur] = true;
+                }
+                return acc;
+              }, {});
             setCheckedItems(newMap);
             events.change(
               {
@@ -141,7 +171,7 @@ export default function Checkbox({
             );
           }}
         >
-          {range.map(({value, label}, index) => {
+          {option.map(({ value, label }, index) => {
             const _id = `checkbox-${hashcode}-${index}`;
             return (
               <TeaCheckbox key={_id} name={value} id={_id}>
@@ -149,7 +179,7 @@ export default function Checkbox({
               </TeaCheckbox>
             );
           })}
-    </TeaCheckbox.Group>
+        </TeaCheckbox.Group>
       </ConfigProvider>
     );
   }
@@ -167,5 +197,7 @@ export default function Checkbox({
 }
 
 export interface PropsType extends CommonFormPropsType {
-  range?: {label: string, value: any; [key: string]: any}[];
-}
+  range?: { label: string, value: any;[key: string]: any }[];
+  format?: string;
+  enumName?: string;
+}

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

@@ -0,0 +1,178 @@
+/* mapChoose组件 */
+.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: 15px;
+  line-height: 31px;
+  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: 46px;
+  text-align: center;
+  font-size: 16px;
+  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: 14px;
+  line-height: 18px;
+  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: 20px;
+  top: 50%;
+  transform: translate(0, -50%);
+  width: 16px;
+  height: 16px;
+  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: 14px;
+  line-height: 27px;
+  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

@@ -0,0 +1,343 @@
+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,
+};