project init & fix ui

miniprogram_npm/tdesign-miniprogram/swipe-cell/README.en-US.md

@@ -0,0 +1,19 @@
+:: BASE_DOC ::
+
+## API
+
+### SwipeCell Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | String | - | \- | N
+disabled | Boolean | - | \- | N
+opened   | Boolean / Array | false  | \- | N
+left | Array / Slot | - | Typescript：`Array<SwipeActionItem>` | N
+right | Array / Slot | - | Typescript：`Array<SwipeActionItem>` `interface SwipeActionItem {text?: string; icon?: string | object; className?: string; style?: string; onClick?: () => void; [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts) | N
+
+### SwipeCell Events
+
+name | params | description
+-- | -- | --
+click | `(action: SwipeActionItem, source: SwipeSource)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts)。<br/>`type SwipeSource = 'left' \| 'right'`<br/>

miniprogram_npm/tdesign-miniprogram/swipe-cell/README.md

@@ -0,0 +1,52 @@
+---
+title: SwipeCell 滑动操作
+description: 用于承载列表中的更多操作，通过左右滑动来展示，按钮的宽度固定高度根据列表高度而变化。
+spline: message
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-95%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-83%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-92%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+   "t-swipe-cell": "tdesign-miniprogram/swipe-cell/swipe-cell"
+}
+```
+
+### 组件类型
+
+左滑单操作
+
+{{ left }}
+
+右滑单操作
+
+{{ right }}
+
+左右滑操作
+
+{{ double }}
+
+带图标的滑动操作
+
+{{ icon }}
+
+## API
+### SwipeCell Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+custom-style | String | - | 自定义组件样式 | N
+disabled | Boolean | - | 是否禁用滑动 | N
+opened   | Boolean / Array | false  | 操作项是否呈现为打开态，值为数组时表示分别控制左右滑动的展开和收起状态。TS 类型：`boolean| Array<boolean>` | N   |
+left | Array / Slot | - | 左侧滑动操作项。所有行为同 `right`。TS 类型：`Array<SwipeActionItem>` | N
+right | Array / Slot | - | 右侧滑动操作项。有两种定义方式，一种是使用数组，二种是使用插槽。`right.text` 表示操作文本，`right.className` 表示操作项类名，`right.style` 表示操作项样式，`right.onClick` 表示点击操作项后执行的回调函数。示例：`[{ text: '删除', icon: 'delete', style: 'background-color: red', onClick: () => {} }]`。TS 类型：`Array<SwipeActionItem>` `interface SwipeActionItem {text?: string; icon?: string | object, className?: string; style?: string; onClick?: () => void; [key: string]: any }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts) | N
+
+### SwipeCell Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | `(action: SwipeActionItem, source: SwipeSource)` | 操作项点击时触发（插槽写法组件不触发，业务侧自定义内容和事件）。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts)。<br/>`type SwipeSource = 'left' \| 'right'`<br/>

miniprogram_npm/tdesign-miniprogram/swipe-cell/props.d.ts

@@ -0,0 +1,3 @@
+import { TdSwipeCellProps } from './type';
+declare const props: TdSwipeCellProps;
+export default props;

miniprogram_npm/tdesign-miniprogram/swipe-cell/props.js

@@ -0,0 +1,21 @@
+const props = {
+    customStyle: {
+        type: String,
+        value: '',
+    },
+    disabled: {
+        type: Boolean,
+    },
+    left: {
+        type: Array,
+    },
+    opened: {
+        type: Boolean,
+        optionalTypes: [Array],
+        value: false,
+    },
+    right: {
+        type: Array,
+    },
+};
+export default props;

miniprogram_npm/tdesign-miniprogram/swipe-cell/swipe-cell.d.ts

@@ -0,0 +1,23 @@
+import { SuperComponent } from '../common/src/index';
+export default class SwiperCell extends SuperComponent {
+    externalClasses: string[];
+    options: {
+        multipleSlots: boolean;
+    };
+    properties: import("./type").TdSwipeCellProps;
+    data: {
+        prefix: string;
+        wrapperStyle: string;
+        closed: boolean;
+        opened: boolean;
+        classPrefix: string;
+    };
+    attached(): void;
+    setSwipeWidth(): Promise<void>;
+    detached(): void;
+    open(): void;
+    close(): void;
+    closeOther(): void;
+    onTap(): void;
+    onActionTap(event: any): void;
+}

miniprogram_npm/tdesign-miniprogram/swipe-cell/swipe-cell.js

@@ -0,0 +1,79 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+import { getRect } from '../common/utils';
+let ARRAY = [];
+const { prefix } = config;
+const name = `${prefix}-swipe-cell`;
+const ContainerClass = `.${name}`;
+let SwiperCell = class SwiperCell extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [`${prefix}-class`];
+        this.options = {
+            multipleSlots: true,
+        };
+        this.properties = props;
+        this.data = {
+            prefix,
+            wrapperStyle: '',
+            closed: true,
+            opened: false,
+            classPrefix: name,
+        };
+    }
+    attached() {
+        ARRAY.push(this);
+        wx.nextTick(() => {
+            this.setSwipeWidth();
+        });
+    }
+    setSwipeWidth() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const rightRect = yield getRect(this, `${ContainerClass}__right`);
+            const leftRect = yield getRect(this, `${ContainerClass}__left`);
+            this.setData({
+                leftWidth: leftRect.width,
+                rightWidth: rightRect.width,
+            });
+        });
+    }
+    detached() {
+        ARRAY = ARRAY.filter((item) => item !== this);
+    }
+    open() {
+        this.setData({ opened: true });
+    }
+    close() {
+        this.setData({ opened: false });
+    }
+    closeOther() {
+        ARRAY.filter((item) => item !== this).forEach((item) => item.close());
+    }
+    onTap() {
+        this.close();
+    }
+    onActionTap(event) {
+        const { currentTarget: { dataset: { action }, }, } = event;
+        this.triggerEvent('click', action);
+    }
+};
+SwiperCell = __decorate([
+    wxComponent()
+], SwiperCell);
+export default SwiperCell;

miniprogram_npm/tdesign-miniprogram/swipe-cell/swipe-cell.json

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

miniprogram_npm/tdesign-miniprogram/swipe-cell/swipe-cell.wxml

@@ -0,0 +1,58 @@
+<import src="../common/template/icon.wxml" />
+<wxs src="./swipe-cell.wxs" module="swipe"></wxs>
+
+<view
+  class="{{prefix}}-class {{classPrefix}}"
+  data-key="cell"
+  capture-bind:tap="onTap"
+  bindtouchstart="{{disabled || swipe.startDrag}}"
+  capture-bind:touchmove="{{disabled || swipe.onDrag}}"
+  bindtouchend="{{disabled || swipe.endDrag}}"
+  bindtouchcancel="{{disabled || swipe.endDrag}}"
+  opened="{{opened}}"
+  change:opened="{{swipe.onOpenedChange}}"
+  leftWidth="{{leftWidth}}"
+  rightWidth="{{rightWidth}}"
+  change:leftWidth="{{swipe.initLeftWidth}}"
+  change:rightWidth="{{swipe.initRightWidth}}"
+>
+  <view id="wrapper">
+    <view class="{{classPrefix}}__left" data-key="left">
+      <slot name="left" />
+      <view
+        wx:for="{{left}}"
+        class="{{classPrefix}}__content {{item.className}}"
+        style="{{item.style}}"
+        wx:key="index"
+        data-action="{{item}}"
+        bind:tap="onActionTap"
+      >
+        <template
+          wx:if="{{item.icon}}"
+          is="icon"
+          data="{{class: classPrefix + '__icon', name: item.icon, ...item.icon}}"
+        ></template>
+        <text wx:if="{{item.text}}" class="{{classPrefix}}__text">{{item.text}}</text>
+      </view>
+    </view>
+    <slot />
+    <view class="{{classPrefix}}__right" data-key="right">
+      <slot name="right" />
+      <view
+        wx:for="{{right}}"
+        class="{{classPrefix}}__content {{item.className}}"
+        style="{{item.style}}"
+        wx:key="index"
+        data-action="{{item}}"
+        bind:tap="onActionTap"
+      >
+        <template
+          wx:if="{{item.icon}}"
+          is="icon"
+          data="{{class: classPrefix + '__icon', name: item.icon, ...item.icon}}"
+        ></template>
+        <text wx:if="{{item.text}}" class="{{classPrefix}}__text">{{item.text}}</text>
+      </view>
+    </view>
+  </view>
+</view>

miniprogram_npm/tdesign-miniprogram/swipe-cell/swipe-cell.wxs

@@ -0,0 +1,176 @@
+var THRESHOLD = 0.3;
+var MIN_DISTANCE = 10;
+var owner;
+var state;
+
+var getState = function (ownerInstance) {
+  owner = ownerInstance;
+  state = owner.getState();
+  state.leftWidth = state.leftWidth || 0;
+  state.rightWidth = state.rightWidth || 0;
+  state.offset = state.offset || 0;
+  state.startOffset = state.startOffset || 0;
+  state.opened = state.opened || false;
+};
+
+var initRightWidth = function (newVal, oldVal, ownerInstance) {
+  getState(ownerInstance);
+  state.rightWidth = newVal;
+  initOpen(ownerInstance);
+};
+
+var initLeftWidth = function (newVal, oldVal, ownerInstance) {
+  getState(ownerInstance);
+  state.leftWidth = newVal;
+  initOpen(ownerInstance);
+};
+
+var initOpen = function (ownerInstance) {
+  getState(ownerInstance);
+  if (state.opened.constructor === 'Boolean') {
+    // opened为boolen类型，判断默认打开
+    if (state.opened && state.rightWidth > 0) {
+      swipeMove(-state.rightWidth);
+    } else if (state.opened && state.leftWidth > 0) {
+      swipeMove(state.leftWidth);
+    }
+  }
+
+  if (state.opened.constructor === 'Array') {
+    // opened为array类型，判断默认打开，同时设定左右action时优先打开右边
+    if (state.opened[1] && state.rightWidth > 0) {
+      swipeMove(-state.rightWidth);
+    } else if (state.opened[0] && state.leftWidth > 0) {
+      swipeMove(state.leftWidth);
+    }
+  }
+};
+
+var resetTouchStatus = function () {
+  state.direction = '';
+  state.deltaX = 0;
+  state.deltaY = 0;
+  state.offsetX = 0;
+  state.offsetY = 0;
+};
+
+var touchMove = function (event) {
+  var touchPoint = event.touches[0];
+  state.deltaX = touchPoint.clientX - state.startX;
+  state.deltaY = touchPoint.clientY - state.startY;
+  state.offsetX = Math.abs(state.deltaX);
+  state.offsetY = Math.abs(state.deltaY);
+  state.direction = state.direction || getDirection(state.offsetX, state.offsetY);
+};
+
+var getDirection = function (x, y) {
+  if (x > y && x > MIN_DISTANCE) {
+    return 'horizontal';
+  }
+  if (y > x && y > MIN_DISTANCE) {
+    return 'vertical';
+  }
+  return '';
+};
+
+var range = function (num, min, max) {
+  return Math.min(Math.max(num, min), max);
+};
+
+var swipeMove = function (_offset) {
+  if (_offset === undefined) _offset = 0;
+  state.offset = range(_offset, -state.rightWidth, +state.leftWidth);
+  var transform = 'translate3d(' + state.offset + 'px, 0, 0)';
+  var transition = state.dragging ? 'none' : 'transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)';
+  owner.selectComponent('#wrapper').setStyle({
+    '-webkit-transform': transform,
+    '-webkit-transition': transition,
+    transform: transform,
+    transition: transition,
+  });
+};
+
+var close = function () {
+  swipeMove(0);
+};
+
+var onCloseChange = function (newVal, oldVal, ownerInstance) {
+  getState(ownerInstance);
+  if (newVal === oldVal) return;
+  if (newVal) {
+    close();
+  }
+};
+
+var onOpenedChange = function (newVal, oldVal, ownerInstance) {
+  getState(ownerInstance);
+  state.opened = newVal;
+  if (newVal === oldVal) return;
+  if (!newVal) {
+    close();
+  }
+};
+
+var touchStart = function (event) {
+  resetTouchStatus();
+  state.startOffset = state.offset;
+  var touchPoint = event.touches[0];
+  state.startX = touchPoint.clientX;
+  state.startY = touchPoint.clientY;
+  owner.callMethod('closeOther');
+};
+
+var startDrag = function (event, ownerInstance) {
+  getState(ownerInstance);
+  touchStart(event);
+};
+
+var onDrag = function (event, ownerInstance) {
+  getState(ownerInstance);
+  touchMove(event);
+  if (state.direction !== 'horizontal') {
+    return;
+  }
+  state.dragging = true;
+  swipeMove(state.startOffset + state.deltaX);
+};
+
+var open = function (position) {
+  var _offset = position === 'left' ? +state.leftWidth : -state.rightWidth;
+  owner.callMethod('open', { position: position });
+  swipeMove(_offset);
+};
+
+var endDrag = function (event, ownerInstance) {
+  getState(ownerInstance);
+  state.dragging = false;
+  // 左/右侧有可滑动区域，且当前不是已open状态，且滑动幅度超过阈值时open左/右侧（滚动到该侧的最边上）
+  if (
+    +state.rightWidth > 0 &&
+    -state.startOffset < +state.rightWidth &&
+    -state.offset > +state.rightWidth * THRESHOLD
+  ) {
+    open('right');
+  } else if (
+    +state.leftWidth > 0 &&
+    state.startOffset < +state.leftWidth &&
+    state.offset > +state.leftWidth * THRESHOLD
+  ) {
+    open('left');
+  } else {
+    // 仅在有发生侧滑的情况下自动关闭（由js控制是否异步关闭）
+    if (state.startOffset !== state.offset) {
+      close();
+    }
+  }
+};
+
+module.exports = {
+  initLeftWidth: initLeftWidth,
+  initRightWidth: initRightWidth,
+  startDrag: startDrag,
+  onDrag: onDrag,
+  endDrag: endDrag,
+  onCloseChange: onCloseChange,
+  onOpenedChange: onOpenedChange,
+};

miniprogram_npm/tdesign-miniprogram/swipe-cell/swipe-cell.wxss

@@ -0,0 +1,59 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+.t-swipe-cell {
+  position: relative;
+  overflow: hidden;
+}
+.t-swipe-cell__left,
+.t-swipe-cell__right {
+  position: absolute;
+  top: 0;
+  height: 100%;
+}
+.t-swipe-cell__left {
+  left: 0;
+  transform: translate3d(-100%, 0, 0);
+}
+.t-swipe-cell__right {
+  right: 0;
+  transform: translate3d(100%, 0, 0);
+}
+.t-swipe-cell__content {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 var(--td-spacer-2, 32rpx);
+}
+.t-swipe-cell__icon {
+  font-size: var(--td-font-size-l, 40rpx);
+}
+.t-swipe-cell__icon + .t-swipe-cell__text:not(:empty) {
+  margin-left: var(--td-spacer, 16rpx);
+  font-size: var(--td-font-size-base, 28rpx);
+  line-height: 44rpx;
+}

miniprogram_npm/tdesign-miniprogram/swipe-cell/type.d.ts

@@ -0,0 +1,31 @@
+export interface TdSwipeCellProps {
+    customStyle?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    disabled?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    left?: {
+        type: ArrayConstructor;
+        value?: Array<SwipeActionItem>;
+    };
+    opened?: {
+        type: BooleanConstructor;
+        optionalTypes: Array<ArrayConstructor>;
+        value?: boolean | Array<boolean>;
+        required?: boolean;
+    };
+    right?: {
+        type: ArrayConstructor;
+        value?: Array<SwipeActionItem>;
+    };
+}
+export interface SwipeActionItem {
+    text: string;
+    className?: string;
+    style?: string;
+    onClick?: () => void;
+    [key: string]: any;
+}

miniprogram_npm/tdesign-miniprogram/swipe-cell/type.js

@@ -0,0 +1 @@
+export {};