first commit
This commit is contained in:
Blizzard
@@ -0,0 +1,36 @@
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
export default class Picker extends SuperComponent {
|
||||
behaviors: string[];
|
||||
properties: import("./type").TdPickerProps;
|
||||
externalClasses: string[];
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
relations: RelationsOptions;
|
||||
observers: {
|
||||
'value, visible'(value: any, visible: any): void;
|
||||
'itemHeight, visibleItemCount'(): void;
|
||||
};
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
defaultPopUpProps: {};
|
||||
defaultPopUpzIndex: number;
|
||||
indicatorTop: number;
|
||||
};
|
||||
methods: {
|
||||
updateChildren(): void;
|
||||
getSelectedValue(): any[];
|
||||
getColumnIndexes(): any;
|
||||
onConfirm(): void;
|
||||
triggerColumnChange({ column, index }: {
|
||||
column: any;
|
||||
index: any;
|
||||
}): void;
|
||||
onCancel(): void;
|
||||
onPopupChange(e: any): void;
|
||||
close(trigger: any): void;
|
||||
updateIndicatorPosition(): void;
|
||||
};
|
||||
ready(): void;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import useCustomNavbar from"../mixins/using-custom-navbar";const{prefix:prefix}=config,name=`${prefix}-picker`,DEFAULT_KEYS={value:"value",label:"label",icon:"icon"};let Picker=class extends SuperComponent{constructor(){super(...arguments),this.behaviors=[useCustomNavbar],this.properties=props,this.externalClasses=[`${prefix}-class`,`${prefix}-class-confirm`,`${prefix}-class-cancel`,`${prefix}-class-title`],this.options={multipleSlots:!0},this.relations={"../picker-item/picker-item":{type:"child",linked(){this.updateChildren()}}},this.observers={"value, visible"(e,i){const{usePopup:t}=this.properties;t&&!i||(this.updateChildren(),this.updateIndicatorPosition())},"itemHeight, visibleItemCount"(){this.updateIndicatorPosition()}},this.data={prefix:prefix,classPrefix:name,defaultPopUpProps:{},defaultPopUpzIndex:11500,indicatorTop:72},this.methods={updateChildren(){const{value:e,defaultValue:i,itemHeight:t,visibleItemCount:s,keys:o}=this.properties;this.$children.forEach((n,r)=>{var l,a;n.setData({value:null!==(a=null!==(l=null==e?void 0:e[r])&&void 0!==l?l:null==i?void 0:i[r])&&void 0!==a?a:"",columnIndex:r,itemHeight:t,visibleItemCount:s,keys:Object.assign(Object.assign({},DEFAULT_KEYS),o||{})}),n.update()})},getSelectedValue(){return[this.$children.map(e=>e._selectedValue),this.$children.map(e=>e._selectedLabel)]},getColumnIndexes(){return this.$children.map((e,i)=>({column:i,index:e._selectedIndex}))},onConfirm(){const e=[],i=[],t=[];this.$children.forEach((s,o)=>{const n=s.getCurrentSelected();e.push(n.value),i.push(n.label),t.push({column:o,index:n.index})}),this.close("confirm-btn"),this.triggerEvent("confirm",{value:e,label:i,columns:t}),JSON.stringify(this.data.value)!==JSON.stringify(e)&&this.triggerEvent("change",{value:e,label:i,columns:t})},triggerColumnChange({column:e,index:i}){const[t,s]=this.getSelectedValue();this.triggerEvent("pick",{value:t,label:s,column:e,index:i})},onCancel(){this.close("cancel-btn"),this.triggerEvent("cancel")},onPopupChange(e){const{visible:i}=e.detail;this.close("overlay"),this.triggerEvent("visible-change",{visible:i})},close(e){this.data.autoClose&&this.setData({visible:!1}),this.triggerEvent("close",{trigger:e})},updateIndicatorPosition(){const{itemHeight:e,visibleItemCount:i}=this.properties,t=(i-1)/2*e;this.setData({indicatorTop:t})}}}ready(){this.$children.map((e,i)=>e.columnIndex=i),this.updateIndicatorPosition()}};Picker=__decorate([wxComponent()],Picker);export default Picker;
|
||||
@@ -0,0 +1 @@
|
||||
{"component":true,"styleIsolation":"apply-shared","usingComponents":{"t-popup":"../popup/popup"}}
|
||||
@@ -0,0 +1 @@
|
||||
<wxs src="../common/utils.wxs" module="_"/><wxs src="./picker.wxs" module="_this"/><t-popup wx:if="{{usePopup}}" class="class" close-on-overlay-click="{{autoClose}}" visible="{{visible}}" placement="bottom" show-overlay="{{_this.isShowOverlay(popupProps.showOverlay, true)}}" using-custom-navbar="{{usingCustomNavbar || popupProps.usingCustomNavbar}}" z-index="{{ popupProps.zIndex || defaultPopUpzIndex }}" overlay-props="{{ popupProps.overlayProps || defaultPopUpProps }}" bind:visible-change="onPopupChange"><include src="./template.wxml"/></t-popup><block wx:else><include src="./template.wxml"/></block>
|
||||
@@ -0,0 +1,9 @@
|
||||
var utils = require('../common/utils.wxs');
|
||||
|
||||
function isShowOverlay(value, defaultValue) {
|
||||
return utils.isBoolean(value) ? value : defaultValue;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
isShowOverlay: isShowOverlay,
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
@import '../common/style/index.wxss';.t-picker{position:relative;background-color:var(--td-picker-bg-color,var(--td-bg-color-container,var(--td-font-white-1,#fff)));border-top-left-radius:var(--td-picker-border-radius,24rpx);border-top-right-radius:var(--td-picker-border-radius,24rpx);}
|
||||
.t-picker__toolbar{display:flex;align-items:center;justify-content:space-between;overflow:hidden;height:var(--td-picker-toolbar-height,116rpx);}
|
||||
.t-picker__title{flex:1;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--td-picker-title-color,var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9))));font:var(--td-picker-title-font,var(--td-font-title-large,600 36rpx / 52rpx var(--td-font-family,PingFang SC,Microsoft YaHei,Arial Regular)));}
|
||||
.t-picker__cancel,.t-picker__confirm{display:flex;align-items:center;justify-content:center;user-select:none;font:var(--td-picker-button-font,var(--td-font-body-large,32rpx / 48rpx var(--td-font-family,PingFang SC,Microsoft YaHei,Arial Regular)));height:100%;padding:0 32rpx;}
|
||||
.t-picker__cancel{color:var(--td-picker-cancel-color,var(--td-text-color-secondary,var(--td-font-gray-2,rgba(0,0,0,.6))));}
|
||||
.t-picker__confirm{color:var(--td-picker-confirm-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));}
|
||||
.t-picker__main{position:relative;display:flex;justify-content:center;padding-left:64rpx;padding-right:64rpx;}
|
||||
.t-picker__mask{position:absolute;left:0;right:0;z-index:3;backface-visibility:hidden;pointer-events:none;height:96rpx;}
|
||||
.t-picker__mask--top{top:0;background:linear-gradient(180deg,var(--td-picker-bg-color,var(--td-bg-color-container,var(--td-font-white-1,#fff))) 0,var(--td-picker-transparent-color) 100%);}
|
||||
.t-picker__mask--bottom{bottom:0;background:linear-gradient(180deg,var(--td-picker-bg-color,var(--td-bg-color-container,var(--td-font-white-1,#fff))) 0,var(--td-picker-transparent-color) 100%);transform:matrix(1,0,0,-1,0,0);}
|
||||
.t-picker__indicator{position:absolute;left:32rpx;right:32rpx;pointer-events:none;background-color:var(--td-picker-indicator-bg-color,var(--td-bg-color-secondarycontainer,var(--td-gray-color-1,#f3f3f3)));border-radius:var(--td-picker-indicator-border-radius,12rpx);}
|
||||
@@ -0,0 +1,3 @@
|
||||
import { TdPickerProps } from './type';
|
||||
declare const props: TdPickerProps;
|
||||
export default props;
|
||||
@@ -0,0 +1 @@
|
||||
const props={autoClose:{type:Boolean,value:!0},cancelBtn:{type:null,value:!0},confirmBtn:{type:null,value:!0},header:{type:Boolean,value:!0},itemHeight:{type:Number,value:40},keys:{type:Object},popupProps:{type:Object,value:{}},title:{type:String,value:""},usePopup:{type:Boolean,value:!0},usingCustomNavbar:{type:Boolean,value:!1},value:{type:Array,value:null},defaultValue:{type:Array},visible:{type:Boolean,value:!1},visibleItemCount:{type:Number,value:5}};export default props;
|
||||
@@ -0,0 +1 @@
|
||||
<wxs src="../common/utils.wxs" module="_"/><view slot="content" style="{{_._style([style, customStyle])}}" class="{{classPrefix}} {{prefix}}-class"><view class="{{classPrefix}}__toolbar" wx:if="{{header}}"><view class="{{classPrefix}}__cancel {{prefix}}-class-cancel" wx:if="{{cancelBtn}}" bindtap="onCancel">{{cancelBtn}}</view><view class="{{classPrefix}}__title {{prefix}}-class-title">{{title}}</view><view class="{{classPrefix}}__confirm {{prefix}}-class-confirm" wx:if="{{confirmBtn}}" bindtap="onConfirm">{{confirmBtn}}</view></view><slot name="header"/><slot name="content"/><view class="{{_.cls(classPrefix + '__main', [])}}"><slot/><view class="{{classPrefix}}__mask {{classPrefix}}__mask--top"/><view class="{{classPrefix}}__mask {{classPrefix}}__mask--bottom"/><view class="{{classPrefix}}__indicator" style="height: {{itemHeight}}px; top: {{indicatorTop}}px"></view></view><slot name="footer"/></view>
|
||||
@@ -0,0 +1,61 @@
|
||||
import { PopupProps } from '../popup/index';
|
||||
import { KeysType } from '../common/common';
|
||||
export interface TdPickerProps {
|
||||
autoClose?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
cancelBtn?: {
|
||||
type: null;
|
||||
value?: boolean | string;
|
||||
};
|
||||
confirmBtn?: {
|
||||
type: null;
|
||||
value?: boolean | string;
|
||||
};
|
||||
header?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
itemHeight?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
keys?: {
|
||||
type: ObjectConstructor;
|
||||
value?: KeysType;
|
||||
};
|
||||
popupProps?: {
|
||||
type: ObjectConstructor;
|
||||
value?: PopupProps;
|
||||
};
|
||||
title?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
usePopup?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
usingCustomNavbar?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
value?: {
|
||||
type: ArrayConstructor;
|
||||
value?: Array<PickerValue>;
|
||||
};
|
||||
defaultValue?: {
|
||||
type: ArrayConstructor;
|
||||
value?: Array<PickerValue>;
|
||||
};
|
||||
visible?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
visibleItemCount?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
}
|
||||
export declare type PickerValue = string | number;
|
||||
@@ -0,0 +1 @@
|
||||
export{};
|
||||
Reference in New Issue
Block a user