@cloudbase/weda-ui 0.2.6-alhpa.0 → 0.2.9

package/src/mp/components/markdown/towxml/todogroup/todogroup.wxml

@@ -1,13 +0,0 @@
-<checkbox-group wx:if="{{data.tag === 'todogroup'}}" class="{{data.attr.class}}" bindchange="_change">
-    <block wx:if="{{data.child}}" wx:for="{{data.child}}" wx:for-item="item" wx:key="i">
-        <label wx:if="{{item.tag}}" class="{{item.attr.class}}">
-            <block wx:if="{{item.child}}" wx:for="{{item.child}}" wx:for-item="item" wx:key="i">
-                <!--解析选择框-->
-                <checkbox wx:if="{{item.tag === 'checkbox'}}" class="{{item.attr.class}}" value="{{item.attr.value}}" data-_e="{{item}}" checked="{{item.attr.checked}}" disabled="{{item.attr.disabled}}"/>
-
-                <!--解析文字-->
-                <decode wx:if="{{item.child}}" nodes="{{item}}"/>
-            </block>
-        </label>
-    </block>
-</checkbox-group>

package/src/mp/components/markdown/towxml/todogroup/todogroup.wxss

@@ -1,3 +0,0 @@
-.h2w__todolist {
-    display:block;
-}

package/src/mp/components/markdown/towxml/towxml.js

@@ -1,17 +0,0 @@
-Component({
-  options: {
-    styleIsolation: 'shared',
-  },
-  properties: {
-    nodes: {
-      type: Object,
-      value: {},
-    },
-    className: {
-      type: String,
-    },
-  },
-  data: {
-    someData: {},
-  },
-});

package/src/mp/components/markdown/towxml/towxml.json

@@ -1,6 +0,0 @@
-{
-  "component": true,
-  "usingComponents": {
-    "decode": "./decode"
-  }
-}

package/src/mp/components/markdown/towxml/towxml.wxml

@@ -1,5 +0,0 @@
-<view class="h2w h2w-{{nodes.theme}} {{className}}">
-	<view class="h2w__main">
-		<decode nodes="{{nodes}}"/>
-	</view>
-</view>

package/src/mp/components/markdown/towxml/towxml.wxss

@@ -1,8 +0,0 @@
-/**基础风格样式**/
-@import './style/main.wxss';
-
-/**主题配色（浅色样式）**/
-@import './style/theme/light.wxss';
-
-/**主题配色（深色样式）**/
-@import './style/theme/dark.wxss';

package/src/mp/components/markdown/towxml/yuml/yuml.js

@@ -1,51 +0,0 @@
-const config = require('../config');
-Component({
-  options: {
-    styleIsolation: 'shared',
-  },
-  properties: {
-    data: {
-      type: Object,
-      value: {},
-    },
-  },
-  data: {
-    attr: {
-      src: '',
-      class: '',
-    },
-    size: {
-      w: 0,
-      h: 0,
-    },
-  },
-  lifetimes: {
-    attached() {
-      const _ts = this;
-      const dataAttr = this.data.data.attr;
-
-      // 设置公式图片
-      _ts.setData({
-        attr: {
-          src: `${config.yuml.api}=${dataAttr.value}&theme=${global._theme}`,
-          class: `${dataAttr.class}`,
-        },
-      });
-    },
-  },
-  methods: {
-    load(e) {
-      const _ts = this;
-      // 公式图片加载完成则根据其图片大小、类型计算其显示的合适大小
-      const scale = 20;
-      const w = e.detail.width / scale;
-      const h = e.detail.height / scale;
-      _ts.setData({
-        size: {
-          w,
-          h,
-        },
-      });
-    },
-  },
-});

package/src/mp/components/markdown/towxml/yuml/yuml.json

@@ -1,5 +0,0 @@
-{
-  "component": true,
-  "usingComponents": {
-  }
-}

package/src/mp/components/markdown/towxml/yuml/yuml.wxml

@@ -1,5 +0,0 @@
-<view class="h2w__yumlBox">
-    <view style="width:{{size.w}}em;" class="h2w__yumlView">
-        <image class="{{attr.class}}" src="{{attr.src}}" style="width:{{size.w}}em; height:{{size.h}}em;" lazy-load="true" mode="aspectFill" bindload="load"></image>
-    </view>
-</view>

package/src/web/components/form/enumSelect/FormContainer.jsx

@@ -1,41 +0,0 @@
-import * as React from 'react';
-import classNames from '../../../utils/classnames';
-import FormCell from '../formcell';
-import { formContainerPropsTypes } from './props/propsTypes';
-
-const FormContainer = ({
-  style,
-  className,
-  // weda 组件属性
-  label,
-  labelVisible,
-  layout,
-  requiredFlag,
-
-  children,
-}) => {
-  const cls = classNames({
-    'weda-ui': true,
-    [className]: className,
-  });
-  const subCls = classNames({
-    'weui-cell': true,
-    'weui-cell_active': true,
-    'weui-cell_form': true,
-    'weui-cell_disabled': true,
-  });
-  return (
-    <FormCell
-      className={cls}
-      style={style}
-      label={labelVisible ? label : null}
-      layout={layout}
-      multiCell={false}
-      requiredFlag={requiredFlag}
-    >
-      <div className={subCls}>{children}</div>
-    </FormCell>
-  );
-};
-FormContainer.propTypes = formContainerPropsTypes;
-export default FormContainer;

package/src/web/components/form/position/MapView.jsx

@@ -1,124 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { KEY, tmapApiUrl } from './constants';
-
-const { useEffect, useRef } = React;
-
-export default function MapView({ value, getAddress }) {
-  const mapRef = useRef();
-  const markerRef = useRef();
-
-  const [lat, lng] = value || [];
-  const initMap = () => {
-    // @ts-ignore
-    const TMap = window.TMap;
-    const canLoad = TMap && lat && lng;
-    if (canLoad) {
-      //定义地图中心点坐标
-      const center = new TMap.LatLng(lat, lng);
-      //定义map变量，调用 TMap.Map() 构造函数创建地图
-      mapRef.current = new TMap.Map(document.getElementById('container'), {
-        center, //设置地图中心点坐标
-        zoom: 17.2, //设置地图缩放级别
-      });
-      initMarker();
-      initAddress();
-    }
-  };
-  const initMarker = () => {
-    // @ts-ignore
-    const TMap = window.TMap;
-    const canLoad = TMap && lat && lng && mapRef.current;
-    if (canLoad) {
-      const position = new TMap.LatLng(lat, lng);
-      markerRef.current = new TMap.MultiMarker({
-        map: mapRef.current,
-        styles: {
-          pointer: new TMap.MarkerStyle({
-            width: 25,
-            height: 35,
-          }),
-        },
-        geometries: [
-          {
-            id: 'pointer',
-            styleId: 'pointer',
-            position,
-          },
-        ],
-      });
-    }
-  };
-  const initAddress = async () => {
-    // @ts-ignore
-    const TMap = window.TMap;
-    // @ts-ignore
-    if (lat && lng && TMap) {
-      const geocoder = new TMap.service.Geocoder();
-      const latLng = new TMap.LatLng(lat, lng);
-      const response = await geocoder.getAddress({
-        location: latLng,
-        poiOptions: 'policy=5;radius=100',
-        getPoi: true,
-      });
-      const address = response?.result?.address;
-      getAddress(address);
-    }
-  };
-  useEffect(() => {
-    // @ts-ignore
-    const TMap = window.TMap;
-    // @ts-ignore
-    if (lat && lng) {
-      if (!mapRef.current && !markerRef.current) {
-        initMap();
-      } else {
-        const newLatLng = new TMap.LatLng(lat, lng);
-        // @ts-ignore
-        mapRef.current.panTo(newLatLng);
-        // @ts-ignore
-        markerRef.current.updateGeometries([
-          {
-            styleId: 'pointer',
-            id: 'pointer',
-            position: newLatLng,
-          },
-        ]);
-      }
-    }
-  }, [lat, lng]);
-
-  useEffect(() => {
-    function loadScript() {
-      const script = document.createElement('script');
-      script.type = 'text/javascript';
-      script.src = `${tmapApiUrl}?v=2.exp&key=${KEY}&callback=init&libraries=service`;
-      script.onload = () => {
-        initMap();
-      };
-      document.body.appendChild(script);
-    }
-    loadScript();
-  }, []);
-
-  useEffect(() => {
-    initAddress();
-  }, [lat, lng]);
-
-  if (lat && lng) {
-    return (
-      <div id="container" style={{ height: '660px', width: '100%' }}></div>
-    );
-  }
-  return null;
-}
-
-MapView.propTypes = {
-  value: PropTypes.array,
-  getAddress: PropTypes.func,
-};
-
-MapView.defaultProps = {
-  value: [],
-  getAddress: () => {},
-};

package/src/web/components/form/position/SelectModal.css

@@ -1,3 +0,0 @@
-.weda-position-address {
-  vertical-align: middle;
-}

package/src/web/components/form/position/SelectModal.jsx

@@ -1,112 +0,0 @@
-import * as React from 'react';
-import { Modal, Button } from 'tea-component';
-import * as PropTypes from 'prop-types';
-import { locPickerUrl, KEY, APP_NAME } from './constants';
-import classNames from '../../../utils/classnames';
-
-import './SelectModal.css';
-
-const { useState, useEffect, useRef } = React;
-
-export default function SelectModal({ value, onChange, address, readOnly }) {
-  const [lat = null, lng = null] = value || [];
-  const isEdit = lat && lng;
-  const buttonType = isEdit ? 'weak' : 'primary';
-  const buttonText = isEdit ? '重新定位' : '选择地理位置';
-  const coord = lat && lng ? `&coord=${lat},${lng}` : '';
-  const pickerUrl = `${locPickerUrl}?search=1&type=1&key=${KEY}&referer=${APP_NAME}${coord}`;
-
-  const [visible, setVisible] = useState(false);
-  const positionRef = useRef([lat, lng]);
-
-  const open = () => setVisible(true);
-  const close = () => setVisible(false);
-  const confirm = () => {
-    onChange && onChange(positionRef.current);
-    close();
-  };
-  const getMapMessage = (event) => {
-    // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
-    const loc = event.data;
-    if (loc && loc.module === 'locationPicker') {
-      positionRef.current = [loc.latlng.lat, loc.latlng.lng];
-    }
-  };
-  useEffect(() => {
-    window.addEventListener('message', getMapMessage, false);
-    return () => {
-      window.removeEventListener('message', getMapMessage);
-    };
-  }, []);
-
-  const renderButton = () => {
-    if (readOnly) {
-      return null;
-    }
-    return (
-      <Button type={buttonType} onClick={open}>
-        {buttonText}
-      </Button>
-    );
-  };
-  return (
-    <>
-      <div className="wedatea2td-justify-grid _weda-fn-map__local">
-        {isEdit ? (
-          <>
-            <div className="wedatea2td-justify-grid__col wedatea2td-justify-grid__col--left">
-              <i className="wedatea2td-icon _weda-fn-icon-local"></i>
-              <span
-                className={classNames(
-                  'wedatea2td-fz-reset',
-                  'weda-position-address'
-                )}
-              >
-                {address}
-              </span>
-            </div>
-            <div className="wedatea2td-justify-grid__col wedatea2td-justify-grid__col--right">
-              {renderButton()}
-            </div>
-          </>
-        ) : (
-          <div className="wedatea2td-justify-grid__col wedatea2td-justify-grid__col--left">
-            {renderButton()}
-          </div>
-        )}
-      </div>
-      {!readOnly ? (
-        <Modal visible={visible} caption="选择地理位置" onClose={close}>
-          <Modal.Body>
-            <iframe
-              id="mapPage"
-              width="100%"
-              height="500"
-              frameBorder={0}
-              src={pickerUrl}
-            />
-          </Modal.Body>
-          <Modal.Footer>
-            <Button type="primary" onClick={confirm}>
-              确定
-            </Button>
-            <Button type="weak" onClick={close}>
-              取消
-            </Button>
-          </Modal.Footer>
-        </Modal>
-      ) : null}
-    </>
-  );
-}
-
-SelectModal.propTypes = {
-  value: PropTypes.array,
-  onChange: PropTypes.func,
-  address: PropTypes.string,
-  readOnly: PropTypes.bool,
-};
-SelectModal.defaultProps = {
-  value: [],
-  onChange: () => {},
-};

package/src/web/components/form/position/constants.js

@@ -1,7 +0,0 @@
-const KEY = 'XX5BZ-UJLKR-B7WWP-WURRR-UYBGS-4VBMM';
-const APP_NAME = 'map';
-const poiMarkerUrl = 'https://apis.map.qq.com/tools/poimarker';
-const locPickerUrl = 'https://apis.map.qq.com/tools/locpicker';
-const tmapApiUrl = 'https://map.qq.com/api/gljs';
-
-export { KEY, APP_NAME, poiMarkerUrl, locPickerUrl, tmapApiUrl };

package/src/web/components/form/position/index.jsx

@@ -1,68 +0,0 @@
-import * as React from 'react';
-import { ConfigProvider } from 'tea-component';
-import * as PropTypes from 'prop-types';
-import classNames from '../../../utils/classnames';
-import MapView from './MapView';
-import SelectModal from './SelectModal';
-
-const { useState, useEffect } = React;
-
-function MapPosition({
-  value = [22.540366, 113.934559],
-  onChange,
-  events,
-  className,
-  style,
-  readOnly,
-}) {
-  const [position, setPosition] = useState(value);
-  const [address, serAddress] = useState('');
-
-  const onChangePosition = (chosenValue) => {
-    setPosition(chosenValue);
-    events.change({ value: chosenValue });
-    onChange && onChange(chosenValue);
-  };
-  const getAddress = (address) => {
-    serAddress(address);
-  };
-
-  useEffect(() => {
-    setPosition(value);
-  }, []);
-  return (
-    <ConfigProvider classPrefix="wedatea2td">
-      <div
-        className={classNames('wedatea2td-form__controls', className)}
-        style={style}
-      >
-        <div className="_weda-fn-map">
-          <SelectModal
-            value={position}
-            onChange={onChangePosition}
-            address={address}
-            readOnly={readOnly}
-          />
-          <div className="_weda-fn-map__map">
-            <MapView value={position} getAddress={getAddress} />
-          </div>
-        </div>
-      </div>
-    </ConfigProvider>
-  );
-}
-MapPosition.propTypes = {
-  value: PropTypes.array,
-  onChange: PropTypes.func,
-  events: PropTypes.objectOf(PropTypes.func),
-  className: PropTypes.string,
-  style: PropTypes.string,
-  readOnly: PropTypes.bool,
-};
-MapPosition.defaultProps = {
-  value: [],
-  onChange: () => {},
-  events: {},
-  readOnly: false,
-};
-export default MapPosition;

package/src/web/components/form/uploader/uploaderH5.jsx

@@ -1,196 +0,0 @@
-import * as PropTypes from 'prop-types';
-import * as React from 'react';
-import weui from '../../../utils/weui';
-import classNames from '../../../utils/classnames';
-import { getCloudInstance } from '../../../utils/tcb';
-import { useGetSet } from 'react-use';
-
-const uploadPath = 'weda-uploader';
-/**
- * H5端
- */
-export function UploaderH5({
-  title,
-  maxUploadCount,
-  className,
-  id,
-  events,
-  layout,
-  defaultValue,
-  single = false,
-  onChange,
-  style,
-}) {
-  const cls = classNames({
-    'weda-ui': true,
-    'weui-cells': true,
-    'weui-cells_form': true,
-    [className]: className,
-  });
-
-  const [fileIDList, setfileIDList] = React.useState([]);
-  React.useEffect(() => {
-    if(defaultValue === undefined) {
-      const root = document.getElementById(id);
-      if(root) {
-        root.querySelector('#uploaderFiles').innerHTML = '';
-        defaultValue = [];
-      }
-    }
-  }, [defaultValue]);
-  const prevValueRef = React.useRef(defaultValue);
-  React.useEffect(() => {
-    if(prevValueRef.current !== defaultValue) {
-      let initialValue = []
-      .concat(defaultValue ?? [])
-      .filter((d) => typeof d === 'string' && d !== '');
-      if (single) {
-        maxUploadCount = 1;
-        initialValue = initialValue[0] ? [initialValue[0]] : [];
-      }
-      setfileIDList(initialValue);
-      prevValueRef.current = defaultValue;
-    }
-  }, [defaultValue, maxUploadCount, single]);
-  
-  const [uploadCount, setUploadConut] = useGetSet(0);
-  React.useEffect(() => {
-    events.change && events.change({ value: fileIDList });
-    if (single) {
-      const file = fileIDList[0] || '';
-      file && onChange && onChange(file);
-    } else {
-      onChange && onChange(fileIDList);
-    }
-  }, [fileIDList]);
-  React.useEffect(() => {
-    const opts = {
-      url: 'http://localhost:8081',
-      auto: true,
-      type: 'file',
-      fileVal: 'fileVal',
-      compress: {
-        width: 1600,
-        height: 1600,
-        quality: 0.8,
-      },
-      onBeforeQueued: function (files) {
-        // `this` 是轮询到的文件, `files` 是所有文件
-
-        if (
-          ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'].indexOf(
-            this.type
-          ) < 0
-        ) {
-          weui.alert('请上传图片');
-          return false; // 阻止文件添加
-        }
-        if (this.size > 10 * 1024 * 1024) {
-          weui.alert('请上传不超过10M的图片');
-          return false;
-        }
-
-        if (files.length > maxUploadCount) {
-          // 防止一下子选择过多文件
-          weui.alert(`最多只能上传${maxUploadCount}张图片，请重新选择`);
-          return false;
-        }
-        if (uploadCount() + 1 > maxUploadCount) {
-          weui.alert(`最多只能上传${maxUploadCount}张图片`);
-          return false;
-        }
-
-        setUploadConut(c => c + 1);
-
-      },
-      onQueued: function () {
-
-        const file = this;
-        getCloudInstance().then(async (tcb) => {
-          try {
-            const fileType = file.type.split('/')?.[1];
-            const cloudPath = `${uploadPath}/uploader-${Date.now()}.${fileType}`;
-            const { fileID } = await tcb.uploadFile({
-              cloudPath,
-              filePath: file,
-            });
-            fileID && setfileIDList((list) => [...list, fileID]);
-            fileID && events.success && events.success({ value: fileID, file });
-            const r = opts.onSuccess(file, );
-            if(!r) {
-              
-              const $el = document.querySelector(`#${id}`);
-              const $file = $el.querySelector(`[data-id="${file.id}"]`);
-              $file.classList.remove('weui-uploader__file_status');
-              $file.querySelector('.weui-uploader__file-content').remove();
-            }
-          } catch (err) {
-            opts.onError(err);
-          }
-        });
-      },
-      onBeforeSend: function () {
-        // $.extend(data, { test: 1 }); // 可以扩展此对象来控制上传参数
-        // $.extend(headers, { Origin: 'http://127.0.0.1' }); // 可以扩展此对象来控制上传头部
-
-        return false; // 阻止文件上传
-      },
-      onProgress: function () {
-        // console.log(this, percent);
-        // return true; // 阻止默认行为，不使用默认的进度显示
-      },
-      onSuccess: function (ret) {
-        events.success && events.success(ret);
-        return false;
-      },
-      onError: function (err) {
-        events.error && events.error(err);
-        return false;
-      },
-    };
-    weui.uploader(`#${id}`, opts);
-  }, []);
-
-  return (
-    <div className={cls} id={id} style={style}>
-      <div className="weui-cell">
-        <div className="weui-cell__bd">
-          <div className={classNames("weui-uploader", layout)}>
-            <div className={classNames("weui-uploader__hd", layout)}>
-              <p className="weui-uploader__title">{title}</p>
-              <div className="weui-uploader__info">
-                <span id="uploadCount">{uploadCount()}</span>
-                {`/${maxUploadCount}`}
-              </div>
-            </div>
-            <div className="weui-uploader__bd">
-              <ul className="weui-uploader__files" id="uploaderFiles"></ul>
-              <div className="weui-uploader__input-box">
-                <input
-                  id="uploaderInput"
-                  className="weui-uploader__input"
-                  type="file"
-                  accept="image/*"
-                  multiple
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-UploaderH5.propTypes = {
-  id: PropTypes.string,
-  title: PropTypes.string,
-  className: PropTypes.string, // 传入类
-  maxUploadCount: PropTypes.number, // 【上传图片最大数量】
-  events: PropTypes.objectOf(PropTypes.func), // 事件
-  style: PropTypes.object,
-  layout: PropTypes.oneOf(['horizontal', 'vertical']),
-  defaultValue: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), // 初始值，该参数需配合 formily 使用
-  single: PropTypes.bool, // 单张上传还是多张上传，对应 onChange 参数为字符串还是字符串数组，value 在处理过程统一转为字符串数组
-  onChange: PropTypes.objectOf(PropTypes.func), // 值变化，该参数需配合 formily 使用
-};