maxit-cli 0.1.0

package/registry/components/upload/drag.wxs

@@ -0,0 +1,242 @@
+var classPrefix = '';
+var startIndex = 0;
+var endIndex = 0;
+var dragCollisionList = [];
+
+var isOutRange = function (x1, y1, x2, y2, x3, y3) {
+  return x1 < 0 || x1 >= y1 || x2 < 0 || x2 >= y2 || x3 < 0 || x3 >= y3;
+};
+
+var sortCore = function (sKey, eKey, st) {
+  var _ = st.dragBaseData;
+
+  var excludeFix = function (cKey, type) {
+    if (st.list[cKey].fixed) {
+      // fixed 元素位置不会变化, 这里直接用 cKey(sortKey) 获取, 更加快捷
+      type ? --cKey : ++cKey;
+      return excludeFix(cKey, type);
+    }
+    return cKey;
+  };
+
+  // 先获取到 endKey 对应的 realKey, 防止下面排序过程中该 realKey 被修改
+  var endRealKey = -1;
+  st.list.forEach(function (item) {
+    if (item.sortKey === eKey) endRealKey = item.realKey;
+  });
+
+  return st.list.map(function (item) {
+    if (item.fixed) return item;
+    var cKey = item.sortKey;
+    var rKey = item.realKey;
+
+    if (sKey < eKey) {
+      // 正序拖动
+      if (cKey > sKey && cKey <= eKey) {
+        --rKey;
+        cKey = excludeFix(--cKey, true);
+      } else if (cKey === sKey) {
+        rKey = endRealKey;
+        cKey = eKey;
+      }
+    } else if (sKey > eKey) {
+      // 倒序拖动
+      if (cKey >= eKey && cKey < sKey) {
+        ++rKey;
+        cKey = excludeFix(++cKey, false);
+      } else if (cKey === sKey) {
+        rKey = endRealKey;
+        cKey = eKey;
+      }
+    }
+
+    if (item.sortKey !== cKey) {
+      item.tranX = (cKey % _.columns) * 100 + '%';
+      item.tranY = Math.floor(cKey / _.columns) * 100 + '%';
+      item.sortKey = cKey;
+      item.realKey = rKey;
+    }
+    return item;
+  });
+};
+
+var triggerCustomEvent = function (list, type, ins) {
+  var _list = [],
+    listData = [];
+
+  list.forEach(function (item) {
+    _list[item.sortKey] = item;
+  });
+
+  _list.forEach(function (item) {
+    if (!item.extraNode) {
+      listData.push(item.data);
+    }
+  });
+
+  ins.triggerEvent(type, { listData: listData });
+};
+
+var longPress = function (event, ownerInstance) {
+  var ins = event.instance;
+  var st = ownerInstance.getState();
+  var _ = st.dragBaseData;
+
+  var sTouch = event.changedTouches[0];
+  if (!sTouch) return;
+
+  st.cur = ins.getDataset().index;
+  longPressIndex = st.cur;
+
+  // 初始项是固定项则返回
+  var item = st.list[st.cur];
+  if (item && item.fixed) return;
+
+  // 如果已经在 drag 中则返回, 防止多指触发 drag 动作, touchstart 事件中有效果
+  if (st.dragging) return;
+  st.dragging = true;
+  ownerInstance.callMethod('dragStatusChange', { dragging: true });
+
+  // 计算X,Y轴初始位移, 使 item 中心移动到点击处, 单列时候X轴初始不做位移
+  st.tranX = _.columns === 1 ? 0 : sTouch.pageX - (_.itemWidth / 2 + _.wrapLeft);
+  st.tranY = sTouch.pageY - (_.itemHeight / 2 + _.wrapTop);
+  st.sId = sTouch.identifier;
+  ins.setStyle({
+    transform: 'translate3d(' + st.tranX + 'px, ' + st.tranY + 'px, 0)',
+  });
+  st.itemsInstance.forEach(function (item, index) {
+    item.removeClass(classPrefix + '__drag--tran').removeClass(classPrefix + '__drag--cur');
+    item.addClass(index === st.cur ? classPrefix + '__drag--cur' : classPrefix + '__drag--tran');
+  });
+  ownerInstance.callMethod('dragVibrate', { vibrateType: 'longPress' });
+};
+
+var touchMove = function (event, ownerInstance) {
+  var ins = event.instance;
+  var st = ownerInstance.getState();
+  var _ = st.dragBaseData;
+
+  var mTouch = event.changedTouches[0];
+  if (!mTouch) return;
+
+  if (!st.dragging) return;
+
+  // 如果不是同一个触发点则返回
+  if (st.sId !== mTouch.identifier) return;
+
+  // 计算X,Y轴位移, 单列时候X轴初始不做位移
+  var tranX = _.columns === 1 ? 0 : mTouch.pageX - (_.itemWidth / 2 + _.wrapLeft);
+  var tranY = mTouch.pageY - (_.itemHeight / 2 + _.wrapTop);
+
+  // 到顶到底自动滑动
+  if (mTouch.clientY > _.windowHeight - _.itemHeight - _.realBottomSize) {
+    // 当前触摸点pageY + item高度 - (屏幕高度 - 底部固定区域高度)
+    ownerInstance.callMethod('pageScroll', {
+      scrollTop: mTouch.pageY + _.itemHeight - (_.windowHeight - _.realBottomSize),
+    });
+  } else if (mTouch.clientY < _.itemHeight + _.realTopSize) {
+    // 当前触摸点pageY - item高度 - 顶部固定区域高度
+    ownerInstance.callMethod('pageScroll', {
+      scrollTop: mTouch.pageY - _.itemHeight - _.realTopSize,
+    });
+  }
+
+  // 设置当前激活元素偏移量
+  ins.setStyle({
+    transform: 'translate3d(' + tranX + 'px, ' + tranY + 'px, 0)',
+  });
+
+  var startKey = st.list[st.cur].sortKey;
+  var curX = Math.round(tranX / _.itemWidth);
+  var curY = Math.round(tranY / _.itemHeight);
+  var endKey = curX + _.columns * curY;
+
+  // 目标项是固定项则返回
+  var item = st.list[endKey];
+  if (item && item.fixed) return;
+
+  // X轴或Y轴超出范围则返回
+  if (isOutRange(curX, _.columns, curY, _.rows, endKey, st.list.length)) return;
+
+  // 防止拖拽过程中发生乱序问题
+  if (startKey === endKey || startKey === st.preStartKey) return;
+  st.preStartKey = startKey;
+
+  dragCollisionList = sortCore(startKey, endKey, st);
+  startIndex = startKey;
+  endIndex = endKey;
+  st.itemsInstance.forEach(function (itemIns, index) {
+    var item = dragCollisionList[index];
+    if (index !== st.cur) {
+      itemIns.setStyle({
+        transform: 'translate3d(' + item.tranX + ',' + item.tranY + ', 0)',
+      });
+    }
+  });
+
+  ownerInstance.callMethod('dragVibrate', { vibrateType: 'touchMove' });
+  ownerInstance.callMethod('dragCollision', {
+    dragCollisionList: dragCollisionList,
+    startIndex: startIndex,
+    endIndex: endIndex,
+  });
+  triggerCustomEvent(dragCollisionList, 'change', ownerInstance);
+};
+
+var touchEnd = function (event, ownerInstance) {
+  var ins = event.instance;
+  var st = ownerInstance.getState();
+
+  if (!st.dragging) return;
+  triggerCustomEvent(st.list, 'sortend', ownerInstance);
+  ins.removeClass(classPrefix + '__drag--cur');
+  ins.addClass(classPrefix + '__drag--tran');
+  ins.setStyle({
+    transform: 'translate3d(' + st.list[st.cur].tranX + ',' + st.list[st.cur].tranY + ', 0)',
+  });
+  st.preStartKey = -1;
+  st.dragging = false;
+  ownerInstance.callMethod('dragStatusChange', { dragging: false });
+  ownerInstance.callMethod('dragEnd', {
+    dragCollisionList: dragCollisionList,
+    startIndex: startIndex,
+    endIndex: endIndex,
+  });
+  st.cur = -1;
+  st.tranX = 0;
+  st.tranY = 0;
+};
+
+var baseDataObserver = function (newVal, oldVal, ownerInstance, ins) {
+  var st = ownerInstance.getState();
+  st.dragBaseData = newVal;
+  classPrefix = newVal.classPrefix;
+};
+
+var listObserver = function (newVal, oldVal, ownerInstance, ins) {
+  var st = ownerInstance.getState();
+  // 兼容 grid 拖拽（__drag-item）和 list 拖拽（__list-drag-item）
+  var gridItems = ownerInstance.selectAllComponents('.' + classPrefix + '__drag-item');
+  var listItems = ownerInstance.selectAllComponents('.' + classPrefix + '__list-drag-item');
+  st.itemsInstance = gridItems && gridItems.length > 0 ? gridItems : listItems;
+  st.list = newVal || [];
+  st.list.forEach(function (item, index) {
+    var itemIns = st.itemsInstance[index];
+    if (item && itemIns) {
+      itemIns.removeClass(classPrefix + '__drag--tran');
+      itemIns.setStyle({
+        transform: 'translate3d(' + item.tranX + ',' + item.tranY + ', 0)',
+      });
+      if (item.fixed) itemIns.addClass(classPrefix + '__drag--fixed');
+    }
+  });
+  dragCollisionList = [];
+};
+
+module.exports = {
+  longPress: longPress,
+  touchMove: touchMove,
+  touchEnd: touchEnd,
+  baseDataObserver: baseDataObserver,
+  listObserver: listObserver,
+};

package/registry/components/upload/index.js

@@ -0,0 +1 @@
+export*from"./props";export*from"./upload";

package/registry/components/upload/props.js

@@ -0,0 +1 @@
+const props={addBtn:{type:Boolean,value:!0},addContent:{type:String},allowUploadDuplicateFile:{type:Boolean,value:!1},config:{type:Object},disabled:{type:null,value:void 0},draggable:{type:null},files:{type:Array,value:null},defaultFiles:{type:Array},gridConfig:{type:Object},gutter:{type:Number,value:16},imageProps:{type:Object},max:{type:Number,value:0},mediaType:{type:Array,value:["image","video"]},preview:{type:Boolean,value:!0},removeBtn:{type:null,value:!0},requestMethod:{type:null},sizeLimit:{type:null},source:{type:String,value:"media"},theme:{type:String,value:"grid"},transition:{type:Object,value:{backTransition:!0,duration:300,timingFunction:"ease"}}};export default props;

package/registry/components/upload/upload.js

@@ -0,0 +1 @@
+import{__decorate,__rest}from"../common/tslib";import{SuperComponent,wxComponent}from"../common/src/index";import props from"./props";import config from"../common/config";import{calcIcon,isOverSize,isWxWork,isPC}from"../common/utils";import{isObject}from"../common/validator";import usingConfig from"../common/mixins/using-config";const{prefix:prefix}=config,componentName="upload";let Upload=class extends SuperComponent{constructor(){super(...arguments),this.behaviors=[usingConfig({componentName:"upload"})],this.externalClasses=[`${prefix}-class`],this.options={multipleSlots:!0},this.data={classPrefix:`${prefix}-upload`,prefix:prefix,_removeBtn:{name:"close"},current:!1,proofs:[],customFiles:[],customLimit:0,column:4,dragBaseData:{},rows:0,dragWrapStyle:"",dragList:[],dragging:!0,dragLayout:!1},this.properties=props,this.controlledProps=[{key:"files",event:"success"}],this.observers={"files, max, draggable"(e,t){this.handleLimit(e,t)},gridConfig(){this.updateGrid()},"removeBtn, theme"(e,t){this.setRemoveBtn(e,t)}},this.lifetimes={ready(){this.updateGrid(),this.handleLimit(this.data.customFiles,this.data.max),this.setRemoveBtn(this.data.removeBtn,this.data.theme)}},this.methods={isMediaFile(e){return"image"===e.type||"video"===e.type||this.isImageUrl(e.url)},isPreviewable(e){return this.isMediaFile(e)&&(!e.status||"done"===e.status)},getPreviewMediaSources(){const e=[];return this.data.customFiles.forEach(t=>{if(!this.isPreviewable(t))return;const i={url:t.url,type:t.type,poster:t.thumb||void 0};e.push(i)}),e},getMediaIndex(e){const{customFiles:t}=this.data;let i=0;for(let s=0;s<e;s+=1)this.isPreviewable(t[s])&&(i+=1);return i},onPreview(e){this.onFileClick(e);const{preview:t}=this.properties;if(!t)return;const{file:i}=e.currentTarget.dataset;if(i&&!this.isMediaFile(i))return;const s=this.data.customFiles.some(e=>"video"===e.type);s?this.onPreviewMedia(e):this.onPreviewImage(e)},isImageUrl(e){if(!e)return!1;const t=e.toLowerCase();return["jpg","jpeg","png","gif","bmp","webp","svg","tiff"].some(e=>t.includes(`.${e}`))},onPreviewImage(e){var t;const{index:i}=e.currentTarget.dataset,s=this.data.customFiles.filter(e=>this.isPreviewable(e)).map(e=>e.url),r=null===(t=this.data.customFiles[i])||void 0===t?void 0:t.url;wx.previewImage({urls:s,current:r,fail(){wx.showToast({title:"Impossible d'afficher l'image",icon:"none"})}})},onPreviewMedia(e){const{index:t}=e.currentTarget.dataset,i=this.getPreviewMediaSources(),s=this.getMediaIndex(t);wx.previewMedia({sources:i,current:s,fail(){wx.showToast({title:"Impossible de lire la vidéo",icon:"none"})}})},uploadFiles(e){return Promise.resolve().then(()=>{const t=this.data.requestMethod(e);return t instanceof Promise?t:Promise.resolve({})})},startUpload(e){return"function"==typeof this.data.requestMethod?this.uploadFiles(e).then(()=>{e.forEach(e=>{e.percent=100}),this.triggerSuccessEvent(e)}).catch(e=>{this.triggerFailEvent(e)}):(this.triggerSuccessEvent(e),this.handleLimit(this.data.customFiles,this.data.max),Promise.resolve())},onAddTap(){const{disabled:e,mediaType:t,source:i}=this.properties;e||("media"===i?this.chooseMedia(t):this.chooseMessageFile(t))},chooseMedia(e){const{customLimit:t}=this.data,{config:i,sizeLimit:s}=this.properties;isWxWork||isPC?wx.chooseImage(Object.assign(Object.assign({count:Math.min(20,t)},i),{success:e=>{const t=[];e.tempFiles.forEach(e=>{const{path:i,size:r}=e;if(this.checkFileSize(r,s,"image"))return;const a=this.getRandFileName(i);t.push({name:a,type:"image",url:i,size:r,percent:0})}),this.afterSelect(t)},fail:e=>{this.triggerFailEvent(e)},complete:e=>{this.triggerEvent("complete",e)}})):wx.chooseMedia(Object.assign(Object.assign({count:Math.min(20,t),mediaType:e},i),{success:t=>{const i=[];t.tempFiles.forEach(t=>{const{size:r,fileType:a,tempFilePath:o,width:n,height:l,duration:c,thumbTempFilePath:h}=t,g=__rest(t,["size","fileType","tempFilePath","width","height","duration","thumbTempFilePath"]);if(this.checkFileSize(r,s,a))return;const d=this.getRandFileName(o);i.push(Object.assign({name:d,type:this.getFileType(e,o,a),url:o,size:r,width:n,height:l,duration:c,thumb:h,percent:0},g))}),this.afterSelect(i)},fail:e=>{this.triggerFailEvent(e)},complete:e=>{this.triggerEvent("complete",e)}}))},chooseMessageFile(e){const{customLimit:t}=this.data,{config:i,sizeLimit:s,extension:r}=this.properties;wx.chooseMessageFile(Object.assign(Object.assign(Object.assign({count:Math.min(100,t),type:Array.isArray(e)?"all":e},r&&r.length>0?{extension:r}:{}),i),{success:t=>{const i=[];t.tempFiles.forEach(t=>{const{size:r,type:a,path:o}=t,n=__rest(t,["size","type","path"]);if(this.checkFileSize(r,s,a))return;const l=this.getRandFileName(o);i.push(Object.assign({name:l,type:this.getFileType(e,o,a),url:o,size:r,percent:0},n))}),this.afterSelect(i)},fail:e=>this.triggerFailEvent(e),complete:e=>this.triggerEvent("complete",e)}))},afterSelect(e){this._trigger("select-change",{files:[...this.data.customFiles],currentSelectedFiles:[e]}),this._trigger("add",{files:e}),this.startUpload(e)},dragVibrate(e){var t;const{vibrateType:i}=e,{draggable:s}=this.data,r=null===(t=null==s?void 0:s.vibrate)||void 0===t||t,a=null==s?void 0:s.collisionVibrate;(r&&"longPress"===i||a&&"touchMove"===i)&&wx.vibrateShort({type:"light"})},dragStatusChange(e){const{dragging:t}=e;this.setData({dragging:t})},dragEnd(e){const{dragCollisionList:t}=e;let i=[];i=0===t.length?this.data.customFiles:t.reduce((e,t)=>{const{realKey:i,data:s,fixed:r}=t;return r||(e[i]=Object.assign({},s)),e},[]),this.triggerDropEvent(i)},triggerDropEvent(e){const{transition:t}=this.properties;if(t.backTransition){const i=setTimeout(()=>{this.triggerEvent("drop",{files:e}),clearTimeout(i)},t.duration)}else this.triggerEvent("drop",{files:e})}}}setRemoveBtn(e,t){const i="list"===t?"delete":"close";this.setData({_removeBtn:"boolean"==typeof e?{name:i}:calcIcon(e)||{name:i}})}handleLimit(e,t){0===t&&(t=Number.MAX_SAFE_INTEGER),this.setData({customFiles:e.length>t?e.slice(0,t):e,customLimit:t-e.length,dragging:!0}),this.initDragLayout()}triggerSuccessEvent(e){this._trigger("success",{files:[...this.data.customFiles,...e]})}triggerFailEvent(e){this.triggerEvent("fail",e)}onFileClick(e){const{file:t,index:i}=e.currentTarget.dataset;this.triggerEvent("click",{index:i,file:t})}getFileType(e,t,i){if(i)return i;if(1===e.length&&"mix"!==e[0])return e[0];const s=t.split("."),r=s[s.length-1];return["avi","wmv","mkv","mp4","mov","rm","3gp","flv","mpg","rmvb"].includes(r.toLocaleLowerCase())?"video":"image"}getRandFileName(e){const t=e.lastIndexOf("."),i=-1===t?"":e.substr(t);return parseInt(`${Date.now()}${Math.floor(900*Math.random()+100)}`,10).toString(36)+i}checkFileSize(e,t,i){if(isOverSize(e,t)){let e=("video"===i?"La vidéo":"L'image")+" dépasse la taille autorisée";if(isObject(t)){const{size:i,message:s}=t;e=null==s?void 0:s.replace("{sizeLimit}",String(i))}return wx.showToast({icon:"none",title:e}),!0}return!1}onDelete(e){const{index:t}=e.currentTarget.dataset;this.deleteHandle(t)}deleteHandle(e){const{customFiles:t}=this.data,i=t[e];this.triggerEvent("remove",{index:e,file:i})}updateGrid(){let{gridConfig:e={}}=this.properties;isObject(e)||(e={});const{column:t=4,width:i=160,height:s=160}=e;this.setData({gridItemStyle:`width:${i}rpx;height:${s}rpx`,column:t})}resetDragLayout(){this.setData({dragBaseData:{},dragWrapStyle:"",dragLayout:!1})}initDragLayout(){const{draggable:e,disabled:t}=this.properties,{customFiles:i}=this.data;e&&!t&&0!==i.length?(this.initDragList(),this.initDragBaseData()):this.resetDragLayout()}initDragList(){let e=0;const{customFiles:t,customLimit:i}=this.data,s=this.properties.theme,r=this.getDragColumn(),a="list"===s,o=[];if(t.forEach((t,i)=>{o.push({realKey:e,sortKey:i,tranX:i%r*100+"%",tranY:100*Math.floor(i/r)+"%",data:Object.assign({},t)}),e+=1}),i>0&&!a){const e=o.length;o.push({realKey:e,sortKey:e,tranX:e%r*100+"%",tranY:100*Math.floor(e/r)+"%",fixed:!0})}this.data.rows=Math.ceil(o.length/r),this.setData({dragList:o})}getDragSelectors(){const{classPrefix:e}=this.data,t="list"===this.properties.theme;return{itemSelector:t?`.${e}__list-item`:`.${e} >>> .o-grid-item`,wrapSelector:t?`.${e}__list`:`.${e} >>> .o-grid`}}getDragColumn(){return"list"===this.properties.theme?1:this.data.column}getDragItemGap(){if("list"!==this.properties.theme)return 0;return wx.getSystemInfoSync().windowWidth/750*24}initDragBaseData(){const{classPrefix:e,rows:t}=this.data,i=this.getDragColumn(),{itemSelector:s,wrapSelector:r}=this.getDragSelectors(),a=this.createSelectorQuery();a.select(s).boundingClientRect(),a.select(r).boundingClientRect(),a.selectViewport().scrollOffset(),a.exec(s=>{if(!s||!s[0]||!s[1])return;const[{width:r,height:a},{left:o,top:n},{scrollTop:l}]=s,c=a+this.getDragItemGap(),h={rows:t,classPrefix:e,itemWidth:r,itemHeight:c,wrapLeft:o,wrapTop:n+l,columns:i},g=`height: ${t*c}px`;this.setData({dragBaseData:h,dragWrapStyle:g,dragLayout:!0},()=>{const e=setTimeout(()=>{this.setData({dragging:!1}),clearTimeout(e)},0)})})}};Upload=__decorate([wxComponent()],Upload);export default Upload;

package/registry/components/upload/upload.json

@@ -0,0 +1 @@
+{"component":true,"styleIsolation":"apply-shared","usingComponents":{"o-grid":"../grid/grid","o-grid-item":"../grid-item/grid-item","o-icon":"../icon/icon","o-image":"../image/image","o-button":"../button/button"}}

package/registry/components/upload/upload.wxml

@@ -0,0 +1 @@
+<import src="../common/template/icon.wxml"/><wxs src="../common/utils.wxs" module="_"/><wxs src="./upload.wxs" module="_this"/><wxs src="./drag.wxs" module="handler"/><template name="list-item-content"><block wx:if="{{file.status == 'loading'}}"><o-icon o-class="{{classPrefix}}__list-item-loading" name="loading" size="48rpx" aria-hidden/></block><block wx:elif="{{file.status == 'failed' || file.status == 'reload'}}"><o-icon o-class="{{classPrefix}}__list-item-error-icon" name="error-circle-filled" aria-hidden/></block><block wx:elif="{{_this.isImageType(file) && file.url}}"><view style="position: relative; flex-shrink: 0"><o-image o-class="{{classPrefix}}__list-item-thumbnail" src="{{file.thumb || file.url}}" mode="{{imageProps && imageProps.mode || 'aspectFill'}}" shape="round"/><view wx:if="{{disabled}}" class="{{classPrefix}}__disabled-mask"/></view></block><block wx:else><view class="{{classPrefix}}__list-item-icon"><o-icon o-class="{{classPrefix}}__file-type {{_this.getFileTypeIconColorClass(file, classPrefix)}}" name="{{_this.getFileTypeIcon(file)}}"/></view></block><view class="{{classPrefix}}__list-item-content"><view class="{{classPrefix}}__list-item-name">{{file.name || ''}}</view><view class="{{classPrefix}}__list-item-size">{{file.status == 'loading' ? (file.percent ? globalConfig.progress.uploadingText + ' ' + file.percent + '%' : globalConfig.progress.uploadingText) : file.status == 'failed' || file.status == 'reload' ? globalConfig.progress.failText : _this.formatSize(file.size)}}</view></view><view wx:if="{{_.isBoolean(file.removeBtn) ? file.removeBtn : removeBtn}}" class="{{classPrefix}}__list-item-action" data-index="{{index}}" aria-role="button" aria-label="Supprimer" catchtap="onDelete"><template is="icon" data="{{oClass: classPrefix + '__list-item-delete', ..._removeBtn}}"/></view></template><template name="grid-item-content"><view class="{{classPrefix}}__wrapper {{!_this.isImageType(file) && file.type !== 'video' ? classPrefix + '__wrapper--file' : ''}}" style="{{gridItemStyle}}" aria-role="{{ariaRole || _this.getWrapperAriaRole(file)}}" aria-label="{{ariaLabel || _this.getWrapperAriaLabel(file)}}"><o-image wx:if="{{_this.isImageType(file)}}" data-file="{{file}}" data-index="{{index}}" o-class="{{classPrefix}}__thumbnail" style="{{imageProps && imageProps.style || ''}}" src="{{ file.thumb || file.url }}" mode="{{imageProps && imageProps.mode || 'aspectFill'}}" error="{{imageProps && imageProps.error || 'default'}}" lazy="{{imageProps && imageProps.lazy || false}}" loading="{{imageProps && imageProps.loading || 'default'}}" shape="{{imageProps && imageProps.shape || 'round'}}" webp="{{imageProps && imageProps.webp || false}}" showMenuByLongpress="{{imageProps && imageProps.showMenuByLongpress || false}}" bind:tap="onPreview"/><video wx:elif="{{file.type === 'video'}}" class="{{classPrefix}}__thumbnail" src="{{file.url}}" poster="{{ file.thumb }}" controls autoplay="{{false}}" objectFit="contain" data-file="{{file}}" data-index="{{index}}" bind:tap="onPreview"/><view wx:elif="{{!file.status || file.status == 'done'}}" class="{{classPrefix}}__file-content" data-file="{{file}}" data-index="{{index}}" bind:tap="onFileClick"><view class="{{classPrefix}}__file-icon"><o-icon o-class="{{classPrefix}}__file-type {{_this.getFileTypeIconColorClass(file, classPrefix)}}" name="{{_this.getFileTypeIcon(file)}}"/></view><view class="{{classPrefix}}__file-name">{{file.name || ''}}</view></view><view wx:if="{{!_this.isImageType(file) && file.type !== 'video' && file.status && file.status != 'done'}}" class="{{classPrefix}}__progress-mask {{classPrefix}}__progress-mask--file" data-index="{{index}}" data-file="{{file}}" bind:tap="onFileClick"><block wx:if="{{file.status == 'loading'}}"><o-icon o-class="{{classPrefix}}__progress-loading" name="loading" size="48rpx" aria-hidden/><view class="{{classPrefix}}__progress-text">{{file.percent ? file.percent + '%' : globalConfig.progress.uploadingText}}</view></block><o-icon wx:else name="{{file.status == 'reload' ? 'refresh' : 'close-circle'}}" size="48rpx" aria-hidden/><view wx:if="{{file.status == 'reload' || file.status == 'failed'}}" class="{{classPrefix}}__progress-text">{{file.status == 'reload' ? globalConfig.progress.reloadText : globalConfig.progress.failText}}</view></view><view wx:if="{{(_this.isImageType(file) || file.type === 'video') && file.status && file.status != 'done'}}" class="{{classPrefix}}__progress-mask" data-index="{{index}}" data-file="{{file}}" bind:tap="onFileClick"><block wx:if="{{file.status == 'loading'}}"><o-icon o-class="{{classPrefix}}__progress-loading" name="loading" size="48rpx" aria-hidden/><view class="{{classPrefix}}__progress-text">{{file.percent ? file.percent + '%' : globalConfig.progress.uploadingText}}</view></block><o-icon wx:else name="{{file.status == 'reload' ? 'refresh' : 'close-circle'}}" size="48rpx" aria-hidden/><view wx:if="{{file.status == 'reload' || file.status == 'failed'}}" class="{{classPrefix}}__progress-text">{{file.status == 'reload' ? globalConfig.progress.reloadText : globalConfig.progress.failText}}</view></view><view wx:if="{{disabled && (_this.isImageType(file) || file.type === 'video') && file.status !== 'loading' && file.status !== 'failed' && file.status !== 'reload'}}" class="{{classPrefix}}__disabled-mask"/><view wx:if="{{ _.isBoolean(file.removeBtn) ? file.removeBtn : removeBtn}}" class="{{classPrefix}}__close-btn hotspot-expanded" data-index="{{index}}" aria-role="button" aria-label="Supprimer" bindtap="onDelete"><template is="icon" data="{{oClass: '', size: '32rpx', color: '#fff', ..._removeBtn}}"/></view></view></template><view style="{{_._style([style, customStyle])}}" class="{{classPrefix}} {{classPrefix}}--{{theme || 'grid'}} {{disabled ? classPrefix + '--disabled' : ''}} class {{prefix}}-class"><block wx:if="{{theme === 'list'}}"><view wx:if="{{addBtn && customLimit > 0}}" class="{{classPrefix}}__list-trigger" bindtap="onAddTap"><slot wx:if="{{addContent === 'slot'}}" name="add-content"/><block wx:elif="{{addContent}}">{{addContent}}</block><o-button wx:else theme="primary" size="medium" disabled="{{disabled}}" icon="upload" bindtap="onAddTap">Upload</o-button></view><block wx:if="{{!dragLayout}}"><view wx:if="{{customFiles.length > 0}}" class="{{classPrefix}}__list"><view wx:for="{{customFiles}}" wx:key="url" wx:for-item="file" class="{{classPrefix}}__list-item {{file.status == 'failed' || file.status == 'reload' ? classPrefix + '__list-item--fail' : ''}} {{file.status == 'loading' ? classPrefix + '__list-item--progress' : ''}}" data-file="{{file}}" data-index="{{index}}" bind:tap="onPreview"><template is="list-item-content" data="{{file, index, classPrefix, disabled, imageProps, removeBtn, _removeBtn, globalConfig}}"/></view></view></block><block wx:else><view class="{{classPrefix}}__list-drag" list="{{dragList}}" style="{{dragWrapStyle}}" dragBaseData="{{dragBaseData}}" change:list="{{handler.listObserver}}" change:dragBaseData="{{handler.baseDataObserver}}"><view class="{{classPrefix}}__list-drag-item" style="--o-upload-drag-transition-duration: {{transition.duration}}ms; --o-upload-drag-transition-timing-function: {{transition.timingFunction}}" wx:for="{{customFiles}}" wx:key="url" wx:for-item="file" data-index="{{index}}" bind:longpress="{{handler.longPress}}" catch:touchmove="{{dragging ? handler.touchMove : ''}}" catch:touchend="{{dragging ? handler.touchEnd : ''}}"><view class="{{classPrefix}}__list-item {{file.status == 'failed' || file.status == 'reload' ? classPrefix + '__list-item--fail' : ''}} {{file.status == 'loading' ? classPrefix + '__list-item--progress' : ''}}" data-file="{{file}}" data-index="{{index}}" bind:tap="onPreview"><template is="list-item-content" data="{{file, index, classPrefix, disabled, imageProps, removeBtn, _removeBtn, globalConfig}}"/></view></view></view></block></block><block wx:else><o-grid gutter="{{gutter}}" border="{{false}}" align="center" column="{{column}}" style="{{draggable? 'overflow: visible' : ''}}"><block wx:if="{{!dragLayout}}"><o-grid-item wx:for="{{customFiles}}" wx:key="url" wx:for-item="file" o-class="{{classPrefix}}__grid {{classPrefix}}__grid-file" o-class-content="{{classPrefix}}__grid-content" aria-role="presentation"><template is="grid-item-content" data="{{file, index, classPrefix, disabled, gridItemStyle, ariaRole, ariaLabel, imageProps, removeBtn, _removeBtn, globalConfig}}"/></o-grid-item><o-grid-item wx:if="{{ addBtn && customLimit > 0}}" o-class="{{classPrefix}}__grid" o-class-content="{{classPrefix}}__grid-content" aria-label="Ajouter" bindclick="onAddTap"><view class="{{classPrefix}}__wrapper" style="{{gridItemStyle}}"><slot wx:if="{{addContent === 'slot'}}" name="add-content"/><block wx:elif="{{addContent}}">{{addContent}}</block><view wx:else class="{{classPrefix}}__add-icon"><o-icon name="add"/></view></view></o-grid-item></block><block wx:else><view class="{{classPrefix}}__drag" list="{{dragList}}" style="{{dragWrapStyle}}" dragBaseData="{{dragBaseData}}" change:list="{{handler.listObserver}}" change:dragBaseData="{{handler.baseDataObserver}}"><view class="{{classPrefix}}__drag-item" style="width: {{100 / column}}%; --o-upload-drag-transition-duration: {{transition.duration}}ms; --o-upload-drag-transition-timing-function: {{transition.timingFunction}}" wx:for="{{customFiles}}" wx:key="url" wx:for-item="file" data-index="{{index}}" bind:longpress="{{handler.longPress}}" catch:touchmove="{{dragging ? handler.touchMove : ''}}" catch:touchend="{{dragging ? handler.touchEnd : ''}}"><o-grid-item o-class="{{classPrefix}}__grid {{classPrefix}}__grid-file" o-class-content="{{classPrefix}}__grid-content" aria-role="presentation" style="width: 100%"><template is="grid-item-content" data="{{file, index, classPrefix, disabled, gridItemStyle, ariaRole, ariaLabel, imageProps, removeBtn, _removeBtn, globalConfig}}"/></o-grid-item></view><view wx:if="{{addBtn && customLimit > 0}}" class="{{classPrefix}}__drag-item" style="width: {{100 / column}}%"><o-grid-item o-class="{{classPrefix}}__grid" o-class-content="{{classPrefix}}__grid-content" aria-label="Ajouter" style="width: 100%" bindclick="onAddTap"><view class="{{classPrefix}}__wrapper" style="{{gridItemStyle}}"><slot wx:if="{{addContent === 'slot'}}" name="add-content"/><block wx:elif="{{addContent}}">{{addContent}}</block><view wx:else class="{{classPrefix}}__add-icon"><o-icon name="add"/></view></view></o-grid-item></view></view></block></o-grid></block></view>

package/registry/components/upload/upload.wxs

@@ -0,0 +1,129 @@
+module.exports.getWrapperAriaRole = function (file) {
+  return file.status && file.status != 'done' ? 'text' : 'button';
+};
+
+module.exports.getWrapperAriaLabel = function (file) {
+  if (file.status && file.status != 'done') {
+    if (file.status == 'loading') {
+      return file.percent ? 'Envoi : ' + file.percent + '%' : 'Envoi...';
+    } else {
+      return file.status == 'reload' ? 'Réessayer' : 'Échec de l\'envoi';
+    }
+  } else {
+    return file.type === 'video' ? 'Vidéo' : 'Image';
+  }
+};
+
+module.exports.isImageType = function (file) {
+  if (file.type === 'image') return true;
+  if (file.url) {
+    var imageExts = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'tiff'];
+    var url = file.url.toLowerCase();
+    for (var i = 0; i < imageExts.length; i++) {
+      if (url.indexOf('.' + imageExts[i]) !== -1) return true;
+    }
+  }
+  return false;
+};
+
+function getFileExt(file) {
+  var name = file.name || '';
+  var url = file.url || '';
+  var ext = '';
+  var dotIndex = name.lastIndexOf('.');
+  if (dotIndex !== -1) {
+    ext = name.substring(dotIndex).toLowerCase();
+  }
+  if (ext === '' && url) {
+    var urlDotIndex = url.lastIndexOf('.');
+    if (urlDotIndex !== -1) {
+      var qIndex = url.indexOf('?', urlDotIndex);
+      if (qIndex !== -1) {
+        ext = url.substring(urlDotIndex, qIndex).toLowerCase();
+      } else {
+        ext = url.substring(urlDotIndex).toLowerCase();
+      }
+    }
+  }
+  return ext;
+}
+
+function getFileCategory(ext) {
+  if (ext === '.pdf') return 'pdf';
+  if (
+    ext === '.xlsx' ||
+    ext === '.xls' ||
+    ext === '.csv' ||
+    ext === '.xlc' ||
+    ext === '.xlm' ||
+    ext === '.xlt' ||
+    ext === '.xlw'
+  )
+    return 'excel';
+  if (ext === '.pptx' || ext === '.ppt' || ext === '.key') return 'ppt';
+  if (ext === '.docx' || ext === '.doc' || ext === '.document' || ext === '.wps' || ext === '.wdb' || ext === '.msword')
+    return 'word';
+  if (
+    ext === '.avi' ||
+    ext === '.mp4' ||
+    ext === '.wmv' ||
+    ext === '.mpg' ||
+    ext === '.mpeg' ||
+    ext === '.mov' ||
+    ext === '.rm' ||
+    ext === '.ram' ||
+    ext === '.swf' ||
+    ext === '.flv' ||
+    ext === '.rmvb' ||
+    ext === '.3gp' ||
+    ext === '.mp2' ||
+    ext === '.mp3' ||
+    ext === '.ogg' ||
+    ext === '.3gpp' ||
+    ext === '.ac3' ||
+    ext === '.au'
+  )
+    return 'media';
+  if (
+    ext === '.zip' ||
+    ext === '.rar' ||
+    ext === '.7z' ||
+    ext === '.tar' ||
+    ext === '.gz' ||
+    ext === '.bz2' ||
+    ext === '.xz'
+  )
+    return 'zip';
+  return 'other';
+}
+
+var FILE_CATEGORY_ICON_MAP = {
+  pdf: 'file-pdf-filled',
+  excel: 'file-excel-filled',
+  ppt: 'file-powerpoint-filled',
+  word: 'file-word-filled',
+  media: 'video-filled',
+  zip: 'file-zip-filled',
+  other: 'file-1',
+};
+
+module.exports.getFileTypeIcon = function (file) {
+  var ext = getFileExt(file);
+  var category = getFileCategory(ext);
+  return FILE_CATEGORY_ICON_MAP[category];
+};
+
+module.exports.getFileTypeIconColorClass = function (file, classPrefix) {
+  var ext = getFileExt(file);
+  var category = getFileCategory(ext);
+  return classPrefix + '__file-type--' + category;
+};
+
+module.exports.formatSize = function (size) {
+  if (size == null || size === undefined) return '';
+  var num = +size;
+  if (num < 1024) return num + 'B';
+  if (num < 1024 * 1024) return (num / 1024).toFixed(1) + 'KB';
+  if (num < 1024 * 1024 * 1024) return (num / (1024 * 1024)).toFixed(1) + 'MB';
+  return (num / (1024 * 1024 * 1024)).toFixed(1) + 'GB';
+};