diff --git a/app.json b/app.json index 44e5032..fecc057 100644 --- a/app.json +++ b/app.json @@ -7,7 +7,8 @@ "pages/message/index" ], "usingComponents": { - "t-icon": "/components/icon/icon" + "t-icon": "/components/icon/icon", + "t-checkbox": "/components/checkbox/checkbox" }, "window": { "backgroundTextStyle": "light", diff --git a/components/action-sheet/README.md b/components/action-sheet/README.md new file mode 100644 index 0000000..4483838 --- /dev/null +++ b/components/action-sheet/README.md @@ -0,0 +1,92 @@ +--- +title: ActionSheet 动作面板 +description: 由用户操作后触发的一种特定的模态弹出框 ，呈现一组与当前情境相关的两个或多个选项。 +spline: data +isComponent: true +--- + + +## 引入 + +全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。 + +```json +"usingComponents": { + "t-action-sheet": "tdesign-miniprogram/action-sheet/action-sheet", +} +``` + +## 代码演示 + +### 基础用法 + +{{ list }} + +### 图标列表型 + +{{ icon-list }} + +### 宫格型 + +{{ grid }} + +### 宫格型-多页 + +{{ grid-multi }} + +### 支持指令调用 + +```javascript +import ActionSheet, { ActionSheetTheme } from 'tdesign-miniprogram/action-sheet/index'; + +// 指令调用不同于组件引用不需要传入visible +const basicListOption: ActionSheetShowOption = { + theme: ActionSheetTheme.List, + selector: '#t-action-sheet', + items: [ + { + label: '默认选项', + }, + { + label: '失效选项', + disabled: true, + }, + { + label: '警告选项', + color: '#e34d59', + }, + ], +}; + +const handler = ActionSheet.show(basicListOption); +``` + +指令调用的关闭如下 + +```javascript +handler.close(); +``` + + +## API +### ActionSheet Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +cancel-text | String | 取消 | 设置取消按钮的文本 | N +count | Number | 8 | 设置每页展示菜单的数量，仅当 type=grid 时有效 | N +items | Array | - | 必需。菜单项。TS 类型：`Array` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean; icon?: string; }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | Y +show-cancel | Boolean | true | 是否显示取消按钮 | N +theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N +visible | Boolean | null | 必需。显示与隐藏 | Y +default-visible | Boolean | false | 必需。显示与隐藏。非受控属性 | Y +external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、组件内容部分、取消按钮 等元素类名。`['t-class', 't-class-content', 't-class-cancel']` | N + +### ActionSheet Events + +名称 | 参数 | 描述 +-- | -- | -- +visible-change | `(visible: Boolean)` | 当浮层隐藏或显示时触发。 +cancel | - | 点击取消按钮时触发 +selected | `(selected: ActionSheetItem | String, index: Number)` | 选择菜单项时触发 + diff --git a/components/action-sheet/action-sheet.d.ts b/components/action-sheet/action-sheet.d.ts new file mode 100644 index 0000000..6dc9f74 --- /dev/null +++ b/components/action-sheet/action-sheet.d.ts @@ -0,0 +1,58 @@ +import { SuperComponent } from '../common/src/index'; +export default class ActionSheet extends SuperComponent { + static show: (options: import("./show").ActionSheetShowOption) => WechatMiniprogram.Component.TrivialInstance; + externalClasses: string[]; + properties: { + cancelText?: { + type: StringConstructor; + value?: string; + }; + count?: { + type: NumberConstructor; + value?: number; + }; + items: { + type: ArrayConstructor; + value?: (string | import("./type").ActionSheetItem)[]; + }; + showCancel?: { + type: BooleanConstructor; + value?: boolean; + }; + theme?: { + type: StringConstructor; + value?: "list" | "grid"; + }; + visible: { + type: BooleanConstructor; + value?: boolean; + }; + defaultVisible: { + type: BooleanConstructor; + value?: boolean; + }; + }; + data: { + prefix: string; + classPrefix: string; + gridThemeItems: any[]; + currentSwiperIndex: number; + }; + controlledProps: { + key: string; + event: string; + }[]; + ready(): void; + methods: { + onSwiperChange(e: WechatMiniprogram.TouchEvent): void; + splitGridThemeActions(): void; + show(options: any): void; + memoInitialData(): void; + close(): void; + onPopupVisibleChange({ detail }: { + detail: any; + }): void; + onSelect(event: WechatMiniprogram.TouchEvent): void; + onCancel(): void; + }; +} diff --git a/components/action-sheet/action-sheet.js b/components/action-sheet/action-sheet.js new file mode 100644 index 0000000..06880cc --- /dev/null +++ b/components/action-sheet/action-sheet.js @@ -0,0 +1,91 @@ +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; +}; +import { chunk } from '../common/utils'; +import { SuperComponent, wxComponent } from '../common/src/index'; +import config from '../common/config'; +import { ActionSheetTheme, show } from './show'; +import props from './props'; +const { prefix } = config; +const name = `${prefix}-action-sheet`; +let ActionSheet = class ActionSheet extends SuperComponent { + constructor() { + super(...arguments); + this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-cancel`]; + this.properties = Object.assign({}, props); + this.data = { + prefix, + classPrefix: name, + gridThemeItems: [], + currentSwiperIndex: 0, + }; + this.controlledProps = [ + { + key: 'visible', + event: 'visible-change', + }, + ]; + this.methods = { + onSwiperChange(e) { + const { detail: { current }, } = e; + this.setData({ + currentSwiperIndex: current, + }); + }, + splitGridThemeActions() { + if (this.data.theme !== ActionSheetTheme.Grid) + return; + this.setData({ + gridThemeItems: chunk(this.data.items, this.data.count), + }); + }, + show(options) { + this.setData(Object.assign(Object.assign(Object.assign({}, this.initialData), options), { visible: true })); + this.splitGridThemeActions(); + this.autoClose = true; + this._trigger('visible-change', { visible: true }); + }, + memoInitialData() { + this.initialData = Object.assign(Object.assign({}, this.properties), this.data); + }, + close() { + this._trigger('visible-change', { visible: false }); + }, + onPopupVisibleChange({ detail }) { + if (!detail.visible) { + this._trigger('visible-change', { visible: false }); + } + if (this.autoClose) { + this.setData({ visible: false }); + this.autoClose = false; + } + }, + onSelect(event) { + const { currentSwiperIndex, items, gridThemeItems, count, theme } = this.data; + const { index } = event.currentTarget.dataset; + const isSwiperMode = theme === ActionSheetTheme.Grid; + const item = isSwiperMode ? gridThemeItems[currentSwiperIndex][index] : items[index]; + const realIndex = isSwiperMode ? index + currentSwiperIndex * count : index; + if (item) { + this.triggerEvent('selected', { selected: item, index: realIndex }); + this._trigger('visible-change', { visible: false }); + } + }, + onCancel() { + this.triggerEvent('cancel'); + }, + }; + } + ready() { + this.memoInitialData(); + this.splitGridThemeActions(); + } +}; +ActionSheet.show = show; +ActionSheet = __decorate([ + wxComponent() +], ActionSheet); +export default ActionSheet; diff --git a/components/action-sheet/action-sheet.json b/components/action-sheet/action-sheet.json new file mode 100644 index 0000000..a52f661 --- /dev/null +++ b/components/action-sheet/action-sheet.json @@ -0,0 +1,12 @@ +{ + "component": true, + "usingComponents": { + "t-icon": "../icon/icon", + "t-popup": "../popup/popup", + "t-swiper": "../swiper/swiper", + "t-swiper-item": "../swiper/swiper-item", + "t-image": "../image/image", + "t-grid": "../grid/grid", + "t-grid-item": "../grid/grid-item" + } +} diff --git a/components/action-sheet/action-sheet.wxml b/components/action-sheet/action-sheet.wxml new file mode 100644 index 0000000..59e3f7e --- /dev/null +++ b/components/action-sheet/action-sheet.wxml @@ -0,0 +1,32 @@ + + + + + + + +