This commit is contained in:
Ling53666
2025-08-18 09:11:51 +08:00
commit 02554225da
2516 changed files with 133155 additions and 0 deletions

View File

@ -0,0 +1 @@
.ant-collapse-item-disabled .ant-collapse-item-brief-container,.ant-collapse-item-disabled .ant-collapse-item-title-node{opacity:.4}.ant-collapse-item-disabled .ant-collapse-item-title:active{background:#fff;transition:0s}.ant-collapse-item-line{display:flex;flex:1;border-bottom:1px solid #eee;padding:0 12px 12px 0}.ant-collapse-item-title{position:relative;display:flex;text-align:justify;align-items:center;justify-content:space-between;line-height:24px;padding:12px 0 0 12px;font-size:17px;color:#333;background-color:#fff;transition:all .3s linear;box-sizing:border-box}.ant-collapse-item-title-node{display:flex;flex:1;max-width:100%;font-size:17px;color:#333}.ant-collapse-item-title-arrow{color:#ccc}.ant-collapse-item-title-icon{width:22px;height:22px;overflow:hidden;margin-right:12px}.ant-collapse-item-title-icon .ant-icon{font-size:20px}.ant-collapse-item-title-icon image{width:22px;height:22px}.ant-collapse-item-title:active{background-color:#eee;transition:0s}.ant-collapse-item-brief-container{display:flex}.ant-collapse-item-brief-container .ant-icon{font-size:20px}.ant-collapse-item-brief-node{display:flex;flex:1;font-size:15px;color:#999;margin-right:4px}.ant-collapse-item-content{color:#333;border-bottom:1px solid #eee;padding:12px 12px 12px 0;box-sizing:border-box}.ant-collapse-item-content-container{padding-left:12px;background:#fff}.ant-collapse-item-content-wrap{will-change:height;overflow:hidden}.ant-collapse-item-content-wrap-active{animation:trigger1 .2s}.ant-collapse-item-content-wrap-non-active{animation:trigger2 .2s}.ant-collapse-item-content-wrap-transition{transition:height .2s ease-in-out}.ant-collapse-item-content-wrap-first{height:0}@keyframes trigger1{0%{content:''}100%{content:''}}@keyframes trigger2{0%{content:''}100%{content:''}}

View File

@ -0,0 +1,78 @@
<import-sjs
from="./index.sjs"
name="utils"
></import-sjs>
<view
class="ant-collapse {{className ? className : ''}}"
style="{{style}}"
>
<block
a:for="{{items}}"
a:for-index="index"
a:for-item="item"
>
<view class="ant-collapse-item {{item.className || ''}} {{utils.isActive(mixin.value, index, item.disabled) ? 'ant-collapse-item-active' : ''}} {{item.disabled ? 'ant-collapse-item-disabled' : ''}}">
<view
class="ant-collapse-item-title"
data-active="{{utils.isActive(mixin.value, index, item.disabled)}}"
data-index="{{index}}"
data-id="{{$id}}"
onTap="onChange"
>
<view class="ant-collapse-item-line">
<view class="ant-collapse-item-title-node">
<slot
name="title"
value="{{item}}"
index="{{index}}"
current="{{mixin.value}}"
>
{{item.title}}
</slot>
</view>
<view class="ant-collapse-item-brief-container">
<view class="ant-collapse-item-brief-node">
<slot
name="brief"
value="{{item}}"
index="{{index}}"
current="{{mixin.value}}"
>
{{brief}}
</slot>
</view>
<view class="ant-collapse-item-title-arrow">
<slot
name="icon"
value="{{item}}"
index="{{index}}"
current="{{mixin.value}}"
>
<ant-icon type="{{utils.isActive(mixin.value, index, item.disabled) ? 'UpOutline' : 'DownOutline'}}"></ant-icon>
</slot>
</view>
</view>
</view>
</view>
<view
class="ant-collapse-item-content-wrap {{hasChange ? 'ant-collapse-item-content-wrap-transition' : ''}} ant-collapse-item-content-wrap{{$id ? '-' + $id : ''}}-{{index}}"
onTransitionEnd="resetContentHeight"
style="{{utils.getStyleHeight(index, contentHeight, item.disabled)}}"
data-index="{{index}}"
>
<view class="ant-collapse-item-content-container">
<view class="ant-collapse-item-content ant-collapse-item-content{{$id ? '-' + $id : ''}}-{{index}}">
<slot
name="content"
value="{{item}}"
index="{{index}}"
current="{{mixin.value}}"
>
{{item.content}}
</slot>
</view>
</view>
</view>
</view>
</block>
</view>

View File

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

View File

@ -0,0 +1,178 @@
import { __awaiter, __generator, __spreadArray } from "tslib";
import { Component, triggerEvent, getValueFromProps } from '../_util/simply';
import { CollapseDefaultProps } from './props';
import { getInstanceBoundingClientRect } from '../_util/jsapi/get-instance-bounding-client-rect';
import createValue from '../mixins/value';
Component(CollapseDefaultProps, {
getInstance: function () {
if (this.$id) {
return my;
}
return this;
},
getBoundingClientRectWithBuilder: function (builder) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, getInstanceBoundingClientRect(this.getInstance(), builder(this.$id ? "-".concat(this.$id) : ''))];
case 1: return [2 /*return*/, _a.sent()];
}
});
});
},
formatCurrent: function (val, props) {
var current = __spreadArray([], (val || []), true);
var items = props.items;
current = current.filter(function (item) {
if (!items[item] || items[item].disabled) {
return false;
}
return true;
});
if (props.accordion) {
current = current.length > 0 ? [current[0]] : [];
}
return __spreadArray([], current, true);
},
onChange: function (e) {
var itemIndex = parseInt(e.currentTarget.dataset.index, 10);
var _a = getValueFromProps(this, [
'items',
'accordion',
]), items = _a[0], accordion = _a[1];
if (items[itemIndex] && items[itemIndex].disabled) {
return;
}
var arr = this.getValue();
var current = __spreadArray([], arr, true);
var index = current.indexOf(itemIndex);
if (index >= 0) {
current.splice(index, 1);
}
else {
if (accordion) {
current = [itemIndex];
}
else {
current.push(itemIndex);
current.sort();
}
}
if (!this.isControlled()) {
this.update(current);
}
triggerEvent(this, 'change', current, e);
},
updateContentHeight: function (prevCurrent, nextCurrent) {
return __awaiter(this, void 0, void 0, function () {
var prevCurrentArray, nextCurrentArray, expandArray, closeArray, items, contentHeight;
var _this = this;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
prevCurrentArray = prevCurrent;
nextCurrentArray = nextCurrent;
expandArray = [];
closeArray = [];
nextCurrentArray.forEach(function (item) {
if (prevCurrentArray.indexOf(item) < 0) {
expandArray.push(item);
}
});
prevCurrentArray.forEach(function (item) {
if (nextCurrentArray.indexOf(item) < 0) {
closeArray.push(item);
}
});
items = getValueFromProps(this, 'items');
return [4 /*yield*/, Promise.all(items.map(function (item, index) { return __awaiter(_this, void 0, void 0, function () {
var height;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!(expandArray.indexOf(index) >= 0 ||
closeArray.indexOf(index) >= 0)) return [3 /*break*/, 2];
return [4 /*yield*/, this.getBoundingClientRectWithBuilder(function (id) { return ".ant-collapse-item-content".concat(id, "-").concat(index); })];
case 1:
height = (_a.sent()).height;
return [2 /*return*/, "".concat(height, "px")];
case 2: return [2 /*return*/, this.data.contentHeight[index]];
}
});
}); }))];
case 1:
contentHeight = _a.sent();
if (closeArray.length === 0) {
this.setData({
contentHeight: contentHeight,
});
}
else {
this.setData({
contentHeight: contentHeight,
});
setTimeout(function () {
contentHeight = contentHeight.map(function (item, index) {
if (closeArray.indexOf(index) >= 0) {
return '0px';
}
return item;
});
_this.setData({
contentHeight: contentHeight,
});
}, 10);
}
return [2 /*return*/];
}
});
});
},
resetContentHeight: function (e) {
var index = parseInt(e.currentTarget.dataset.index, 10);
if (this.getValue().indexOf(index) < 0) {
return;
}
var contentHeight = __spreadArray([], this.data.contentHeight, true);
contentHeight[index] = '';
this.setData({
contentHeight: contentHeight,
});
},
}, {
contentHeight: [],
hasChange: false,
}, [
createValue({
valueKey: 'current',
defaultValueKey: 'defaultCurrent',
transformValue: function (current, extra) {
var value = this.formatCurrent(current, extra ? extra.nextProps : getValueFromProps(this));
return {
needUpdate: true,
value: value,
};
},
}),
], {
didUpdate: function (prevProps, prevData) {
console.log(prevProps.items !== this.props.items, !this.isEqualValue(prevData));
if (prevProps.items !== this.props.items ||
!this.isEqualValue(prevData)) {
this.updateContentHeight(this.getValue(prevData), this.getValue());
}
},
didMount: function () {
var current = this.getValue();
var contentHeight = this.props.items.map(function (item, index) {
if (current.indexOf(index) >= 0) {
return '';
}
return '0px';
});
this.setData({
hasChange: true,
contentHeight: contentHeight,
});
},
});

View File

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

View File

@ -0,0 +1,23 @@
function isActive(current, index, disabled) {
if (disabled) {
return false;
}
return (current || []).indexOf(index) >= 0;
}
function getStyleHeight(index, contentHeight, disabled) {
if (disabled) {
return 'height: 0px';
}
var height = contentHeight[index];
if (height === '') {
return '';
}
if (height) {
return "height: ".concat(height);
}
return 'height: 0px';
}
export default {
isActive: isActive,
getStyleHeight: getStyleHeight
};

View File

@ -0,0 +1,35 @@
import { IBaseProps } from '../_util/base';
/**
* @description 手风琴
*/
export interface ICollapseProps extends IBaseProps {
/**
* @description 是否是手风琴模式,仅一个内容被展开
*/
/**
* @description 选中
*/
current?: number[];
/**
* @description 选中初始值
*/
defaultCurrent?: number[];
/**
* @description accordion模式
*/
accordion?: boolean;
/**
* @description 列表
*/
items?: {
title?: string;
content?: string;
disabled?: boolean;
className?: string;
}[];
/**
* @description collapse 切换时的回调
*/
onChange?: (current: number[] | undefined, e: Record<string, any>) => void;
}
export declare const CollapseDefaultProps: ICollapseProps;

View File

@ -0,0 +1,6 @@
export var CollapseDefaultProps = {
current: null,
defaultCurrent: [],
accordion: false,
items: [],
};