New Huajishe Check ChaoXing
This commit is contained in:
33
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/picker-item/picker-item.d.ts
vendored
Normal file
33
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/picker-item/picker-item.d.ts
vendored
Normal file
@@ -0,0 +1,33 @@
|
||||
import { SuperComponent, RelationsOptions, ComponentsOptionsType } from '../common/src/index';
|
||||
export default class PickerItem extends SuperComponent {
|
||||
relations: RelationsOptions;
|
||||
options: ComponentsOptionsType;
|
||||
externalClasses: string[];
|
||||
properties: import("./type").TdPickerItemProps;
|
||||
observers: {
|
||||
options(this: PickerItem): void;
|
||||
};
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
offset: number;
|
||||
duration: number;
|
||||
value: string;
|
||||
curIndex: number;
|
||||
columnIndex: number;
|
||||
labelAlias: string;
|
||||
valueAlias: string;
|
||||
};
|
||||
lifetimes: {
|
||||
created(): void;
|
||||
};
|
||||
methods: {
|
||||
onTouchStart(event: any): void;
|
||||
onTouchMove(event: any): void;
|
||||
onTouchEnd(): void;
|
||||
update(): void;
|
||||
resetOrigin(): void;
|
||||
getCount(): any;
|
||||
};
|
||||
calculateViewDeltaY(touchDeltaY: number, itemHeight: number): number;
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
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 { SuperComponent, wxComponent } from '../common/src/index';
|
||||
import config from '../common/config';
|
||||
import props from './props';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-picker-item`;
|
||||
const DefaultDuration = 240;
|
||||
const range = function (num, min, max) {
|
||||
return Math.min(Math.max(num, min), max);
|
||||
};
|
||||
let PickerItem = class PickerItem extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.relations = {
|
||||
'../picker/picker': {
|
||||
type: 'parent',
|
||||
linked(parent) {
|
||||
if ('keys' in parent.data) {
|
||||
const { keys } = parent.data;
|
||||
this.setData({
|
||||
labelAlias: (keys === null || keys === void 0 ? void 0 : keys.label) || 'label',
|
||||
valueAlias: (keys === null || keys === void 0 ? void 0 : keys.value) || 'value',
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
this.options = {
|
||||
multipleSlots: true,
|
||||
};
|
||||
this.externalClasses = [`${prefix}-class`];
|
||||
this.properties = props;
|
||||
this.observers = {
|
||||
options() {
|
||||
this.update();
|
||||
},
|
||||
};
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
offset: 0,
|
||||
duration: 0,
|
||||
value: '',
|
||||
curIndex: 0,
|
||||
columnIndex: 0,
|
||||
labelAlias: 'label',
|
||||
valueAlias: 'value',
|
||||
};
|
||||
this.lifetimes = {
|
||||
created() {
|
||||
this.StartY = 0;
|
||||
this.StartOffset = 0;
|
||||
},
|
||||
};
|
||||
this.methods = {
|
||||
onTouchStart(event) {
|
||||
this.StartY = event.touches[0].clientY;
|
||||
this.StartOffset = this.data.offset;
|
||||
this.setData({ duration: 0 });
|
||||
},
|
||||
onTouchMove(event) {
|
||||
const { pickItemHeight } = this.data;
|
||||
const { StartY, StartOffset } = this;
|
||||
const touchDeltaY = event.touches[0].clientY - StartY;
|
||||
const deltaY = this.calculateViewDeltaY(touchDeltaY, pickItemHeight);
|
||||
this.setData({
|
||||
offset: range(StartOffset + deltaY, -(this.getCount() * pickItemHeight), 0),
|
||||
duration: DefaultDuration,
|
||||
});
|
||||
},
|
||||
onTouchEnd() {
|
||||
const { offset, labelAlias, valueAlias, columnIndex, pickItemHeight } = this.data;
|
||||
const { options } = this.properties;
|
||||
if (offset === this.StartOffset) {
|
||||
return;
|
||||
}
|
||||
const index = range(Math.round(-offset / pickItemHeight), 0, this.getCount() - 1);
|
||||
this.setData({
|
||||
curIndex: index,
|
||||
offset: -index * pickItemHeight,
|
||||
});
|
||||
if (index === this._selectedIndex) {
|
||||
return;
|
||||
}
|
||||
wx.nextTick(() => {
|
||||
var _a, _b, _c;
|
||||
this._selectedIndex = index;
|
||||
this._selectedValue = (_a = options[index]) === null || _a === void 0 ? void 0 : _a[valueAlias];
|
||||
this._selectedLabel = (_b = options[index]) === null || _b === void 0 ? void 0 : _b[labelAlias];
|
||||
(_c = this.$parent) === null || _c === void 0 ? void 0 : _c.triggerColumnChange({
|
||||
index,
|
||||
column: columnIndex,
|
||||
});
|
||||
});
|
||||
},
|
||||
update() {
|
||||
var _a, _b;
|
||||
const { options, value, labelAlias, valueAlias, pickItemHeight } = this.data;
|
||||
const index = options.findIndex((item) => item[valueAlias] === value);
|
||||
const selectedIndex = index > 0 ? index : 0;
|
||||
this.setData({
|
||||
offset: -selectedIndex * pickItemHeight,
|
||||
curIndex: selectedIndex,
|
||||
});
|
||||
this._selectedIndex = selectedIndex;
|
||||
this._selectedValue = (_a = options[selectedIndex]) === null || _a === void 0 ? void 0 : _a[valueAlias];
|
||||
this._selectedLabel = (_b = options[selectedIndex]) === null || _b === void 0 ? void 0 : _b[labelAlias];
|
||||
},
|
||||
resetOrigin() {
|
||||
this.update();
|
||||
},
|
||||
getCount() {
|
||||
var _a, _b;
|
||||
return (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length;
|
||||
},
|
||||
};
|
||||
}
|
||||
calculateViewDeltaY(touchDeltaY, itemHeight) {
|
||||
return Math.abs(touchDeltaY) > itemHeight ? 1.2 * touchDeltaY : touchDeltaY;
|
||||
}
|
||||
};
|
||||
PickerItem = __decorate([
|
||||
wxComponent()
|
||||
], PickerItem);
|
||||
export default PickerItem;
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
|
||||
<view
|
||||
style="{{_._style([style, customStyle])}}"
|
||||
class="{{_.cls(classPrefix + '__group', [])}} class {{prefix}}-class"
|
||||
bind:touchstart="onTouchStart"
|
||||
catch:touchmove="onTouchMove"
|
||||
bind:touchend="onTouchEnd"
|
||||
bind:touchcancel="onTouchEnd"
|
||||
>
|
||||
<view
|
||||
class="{{classPrefix}}__wrapper"
|
||||
style="transition: transform {{ duration }}ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, {{ offset }}px, 0)"
|
||||
>
|
||||
<view
|
||||
class="{{_.cls(classPrefix + '__item', [['active', curIndex == index]])}}"
|
||||
style="height: {{pickItemHeight}}px"
|
||||
wx:for="{{options}}"
|
||||
wx:key="index"
|
||||
wx:for-item="option"
|
||||
data-index="{{ index }}"
|
||||
>
|
||||
<text class="{{classPrefix}}__item-label">{{option[labelAlias]}}</text>
|
||||
<slot name="label-suffix--{{index}}"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,55 @@
|
||||
.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);
|
||||
}
|
||||
:host {
|
||||
display: flex;
|
||||
}
|
||||
.t-picker-item__group {
|
||||
height: var(--td-picker-group-height, 400rpx);
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
.t-picker-item__wrapper {
|
||||
padding: 144rpx 0;
|
||||
}
|
||||
.t-picker-item__item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--td-picker-item-color, var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))));
|
||||
font-size: var(--td-picker-item-font-size, var(--td-font-size-m, 32rpx));
|
||||
}
|
||||
.t-picker-item__item-label {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.t-picker-item__item--active {
|
||||
color: var(--td-picker-item-active-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
|
||||
font-weight: 600;
|
||||
}
|
||||
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/picker-item/props.d.ts
vendored
Normal file
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/picker-item/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdPickerItemProps } from './type';
|
||||
declare const props: TdPickerItemProps;
|
||||
export default props;
|
||||
@@ -0,0 +1,10 @@
|
||||
const props = {
|
||||
format: {
|
||||
type: null,
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
14
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/picker-item/type.d.ts
vendored
Normal file
14
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/picker-item/type.d.ts
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
export interface TdPickerItemProps {
|
||||
format?: {
|
||||
type: undefined;
|
||||
value?: (option: PickerItemOption) => string;
|
||||
};
|
||||
options?: {
|
||||
type: ArrayConstructor;
|
||||
value?: PickerItemOption[];
|
||||
};
|
||||
}
|
||||
export interface PickerItemOption {
|
||||
label: string;
|
||||
value: string | number;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user