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,42 @@
<ant-picker
className="ant-cascader-picker {{className || ''}}"
style="{{style}}"
animationType="{{animationType}}"
popClassName="ant-cascader-picker-popup {{popClassName || ''}}"
popStyle="{{popStyle}}"
visible="{{visible}}"
options="{{columns}}"
value="{{currentValue}}"
disabled="{{disabled}}"
title="{{title}}"
placeholder="{{placeholder}}"
okText="{{okText}}"
cancelText="{{cancelText}}"
maskStyle="{{maskStyle}}"
maskClassName="{{maskClassName}}"
indicatorStyle="{{indicatorStyle}}"
indicatorClassName="{{indicatorClassName}}"
onChange="onChange"
onCancel="onCancel"
onOk="onOk"
formattedValueText="{{formattedValueText}}"
onVisibleChange="onVisibleChange"
maskClosable="{{maskClosable}}"
>
<slot
name="content"
slot="content"
></slot>
<slot
name="title"
slot="title"
></slot>
<slot
name="prefix"
slot="prefix"
></slot>
<slot
name="suffix"
slot="suffix"
></slot>
</ant-picker>

View File

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

View File

@ -0,0 +1,189 @@
import { __awaiter, __generator } from "tslib";
import { Component, getValueFromProps, triggerEvent, triggerEventOnly, triggerEventValues, } from '../../_util/simply';
import { resolveEventValue, resolveEventValues } from '../../_util/platform';
import { CascaderDefaultProps } from './props';
import equal from 'fast-deep-equal';
import mixinValue from '../../mixins/value';
Component(CascaderDefaultProps, {
// visible受控判断
isVisibleControlled: function () {
return 'visible' in getValueFromProps(this);
},
initColumns: function () {
var _a = getValueFromProps(this, [
'options',
'visible',
'defaultVisible',
'value',
'defaultValue',
]), options = _a[0], visible = _a[1], defaultVisible = _a[2], value = _a[3], defaultValue = _a[4];
var realValue = value || defaultValue || [];
var columns = this.getterColumns(realValue, options);
// 首次无需校验value有效性onOk时会校验
this.setData({
columns: columns,
visible: this.isVisibleControlled() ? visible : defaultVisible,
currentValue: realValue,
formattedValueText: this.onFormat(),
});
},
getterColumns: function (value, options) {
var getColumns = function (options, value, columns) {
var _a;
if (columns === void 0) { columns = []; }
columns.push(options.map(function (v) { return ({ value: v.value, label: v.label }); }));
var currentOption = options.find(function (v) { return v.value === (value === null || value === void 0 ? void 0 : value[columns.length - 1]); }) ||
options[0];
if (((_a = currentOption === null || currentOption === void 0 ? void 0 : currentOption.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
return getColumns(currentOption.children, value, columns);
}
return columns;
};
return getColumns(options, value);
},
// 获取有效value若从x项开始在columns里找不到则从此项开始都选第一条
getValidValue: function (value, columns) {
var result = [];
var _loop_1 = function (i) {
if (!columns[i].some(function (v) { return (v === null || v === void 0 ? void 0 : v.value) === (value === null || value === void 0 ? void 0 : value[i]); })) {
result.push.apply(result, columns.slice(i).map(function (v) { var _a; return (_a = v === null || v === void 0 ? void 0 : v[0]) === null || _a === void 0 ? void 0 : _a.value; }));
return "break";
}
else {
result[i] = value[i];
}
};
for (var i = 0; i < columns.length; i++) {
var state_1 = _loop_1(i);
if (state_1 === "break")
break;
}
return result;
},
getOptionByValue: function (value) {
var _a;
var options = getValueFromProps(this, 'options');
if (!((value === null || value === void 0 ? void 0 : value.length) > 0))
return null;
var result = [];
var item = options.find(function (v) { return v.value === value[0]; });
var _loop_2 = function (i) {
if (!item) {
return { value: null };
}
result.push({
value: item.value,
label: item.label,
});
item = (_a = item.children) === null || _a === void 0 ? void 0 : _a.find(function (v) { return v.value === value[i + 1]; });
};
for (var i = 0; i < value.length; i++) {
var state_2 = _loop_2(i);
if (typeof state_2 === "object")
return state_2.value;
}
return result;
},
onChange: function (selectedVal) {
var selectedValue = resolveEventValues(selectedVal)[0];
var options = getValueFromProps(this, 'options');
var columns = this.data.columns;
var newColumns = this.getterColumns(selectedValue, options);
// columns没变化说明selectedValue在范围内无需重置
var newData = {};
if (!equal(columns, newColumns)) {
selectedValue = this.getValidValue(selectedValue, newColumns);
newData.columns = newColumns;
}
newData.currentValue = selectedValue;
this.setData(newData);
triggerEventValues(this, 'change', [
selectedValue,
this.getOptionByValue(selectedValue),
]);
},
onOk: function () {
return __awaiter(this, void 0, void 0, function () {
var currentValue, options, newColumns, validValue;
return __generator(this, function (_a) {
currentValue = this.data.currentValue;
options = getValueFromProps(this, 'options');
newColumns = this.getterColumns(currentValue, options);
validValue = this.getValidValue(currentValue, newColumns);
if (!this.isControlled()) {
this.update(validValue);
}
triggerEventValues(this, 'ok', [
validValue,
this.getOptionByValue(validValue),
]);
return [2 /*return*/];
});
});
},
onVisibleChange: function (visible) {
var _this = this;
var options = getValueFromProps(this, 'options');
var columns = this.data.columns;
var realValue = this.getValue();
if (!this.isVisibleControlled() && visible) {
var newColumns_1 = this.getterColumns(realValue, options);
if (!equal(columns, newColumns_1)) {
this.setData({ columns: newColumns_1 }, function () {
_this.setData({
currentValue: _this.getValidValue(realValue, newColumns_1),
formattedValueText: _this.onFormat(),
});
});
}
}
triggerEvent(this, 'visibleChange', resolveEventValue(visible));
},
defaultFormat: function (value, options) {
if (options) {
return options.map(function (v) { return v.label; }).join('');
}
return '';
},
onFormat: function () {
var realValue = this.getValue();
var onFormat = getValueFromProps(this, 'onFormat');
var formatValueByProps = onFormat && onFormat(realValue, this.getOptionByValue(realValue));
if (formatValueByProps !== undefined && formatValueByProps !== null) {
return formatValueByProps;
}
return this.defaultFormat(realValue, this.getOptionByValue(realValue));
},
onCancel: function (e) {
triggerEventOnly(this, 'cancel', e);
},
}, {
currentValue: [],
columns: [],
formattedValueText: '',
visible: false,
}, [mixinValue()], {
onInit: function () {
this.initColumns();
},
didUpdate: function (prevProps, prevData) {
var options = getValueFromProps(this, 'options');
if (!equal(options, prevProps.options)) {
var currentValue = this.data.currentValue;
var newColumns = this.getterColumns(currentValue, options);
this.setData({
columns: newColumns,
});
}
if (!this.isEqualValue(prevData)) {
var realValue = this.getValue();
var newColumns = this.getterColumns(realValue, options);
var currentValue = this.getValidValue(realValue, newColumns);
this.setData({ currentValue: currentValue, formattedValueText: this.onFormat() });
}
var visible = getValueFromProps(this, 'visible');
if (this.isVisibleControlled() && !equal(prevProps.visible, visible)) {
this.setData({ visible: visible });
}
},
});

View File

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

View File

@ -0,0 +1,107 @@
import { IBaseProps } from '../../_util/base';
export interface ICascaderOption {
label: string;
value: any;
children?: ICascaderOption[];
}
/**
* @description 级联组件基于Picker封装
*/
export interface ICascaderProps extends IBaseProps {
visible?: boolean;
defaultVisible?: boolean;
/**
* @desciption 动画类型
* @default "transform"
*/
animationType: 'transform' | 'position';
/**
* @description 当前数据
*/
value: any[];
/**
* @description 默认值
*/
defaultValue: any[];
/**
* @description 可选项数据
*/
options: ICascaderOption[];
/**
* @description 提示文案
* @default '请选择'
*/
placeholder: string;
/**
* @description 取消文案
* @default "取消"
*/
cancelText: string;
/**
* @description 是否禁用
*/
disabled?: boolean;
/**
* @description 标题
*/
title: string;
/**
* @description 确定按钮文案
* @default "确定"
*/
okText: string;
/**
*@description 选中框样式
* 版本要求: 支付宝小程序基础库 1.10.0 及以上
*/
indicatorStyle?: string;
/**
*@description 选中框类名
* 版本要求: 支付宝小程序基础库 1.10.0 及以上
*/
indicatorClassName?: string;
/**
* @description 蒙层的样式。
* 版本要求: 支付宝小程序基础库 1.10.0 及以上
*/
maskStyle?: string;
/**
* @description 蒙层的类名。
* 版本要求: 支付宝小程序基础库 1.10.0 及以上
*/
maskClassName?: string;
/**
* @description 点击确认回调
*/
onOk?: (value: any[], selectedOptions: ICascaderOption[], e: Record<string, any>) => void;
/**
* @description 点击取消回调
*/
onCancel?: (e: Record<string, any>) => void;
/**
* @description 选中值的文本显示格式
*/
onFormat?: (value: any[], selectedOptions: ICascaderOption[]) => string;
/**
* @description 切换显示隐藏
*/
onVisibleChange?: (visible: boolean, e: Record<string, any>) => void;
/**
* @description 发生滚动即触发, 与 onChange 点击 ok 后触发不同
*/
onChange?: (value: any[], selectedOptions: ICascaderOption[], e: Record<string, any>) => void;
/**
* @description 点击蒙层是否可以关闭
* @default false
*/
maskClosable: boolean;
/**
* @description 弹出框类名
*/
popClassName: string;
/**
* @description 弹出框样式
*/
popStyle: string;
}
export declare const CascaderDefaultProps: Partial<ICascaderProps>;

View File

@ -0,0 +1,17 @@
export var CascaderDefaultProps = {
visible: null,
defaultVisible: null,
animationType: 'transform',
value: null,
defaultValue: null,
options: [],
placeholder: '请选择',
cancelText: '取消',
disabled: false,
title: '',
okText: '确定',
maskClosable: true,
popClassName: '',
popStyle: '',
onFormat: null,
};

View File

@ -0,0 +1,3 @@
export declare function defaultFormat(value: any, options: any): any;
export declare function getterColumns(value: any, options?: any[]): any;
export declare function getValidValue(value: any, columns: any): any[];

View File

@ -0,0 +1,39 @@
export function defaultFormat(value, options) {
if (options) {
return options.map(function (v) { return v.label; }).join('');
}
return '';
}
export function getterColumns(value, options) {
if (options === void 0) { options = []; }
var getColumns = function (options, value, columns) {
var _a;
if (columns === void 0) { columns = []; }
columns.push(options.map(function (v) { return ({ value: v.value, label: v.label }); }));
var currentOption = options.find(function (v) { return v.value === (value === null || value === void 0 ? void 0 : value[columns.length - 1]); }) ||
options[0];
if (((_a = currentOption === null || currentOption === void 0 ? void 0 : currentOption.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
return getColumns(currentOption.children, value, columns);
}
return columns;
};
return getColumns(options, value);
}
export function getValidValue(value, columns) {
var result = [];
var _loop_1 = function (i) {
if (!columns[i].some(function (v) { return v.value === (value === null || value === void 0 ? void 0 : value[i]); })) {
result.push.apply(result, columns.slice(i).map(function (v) { var _a; return (_a = v[0]) === null || _a === void 0 ? void 0 : _a.value; }));
return "break";
}
else {
result[i] = value[i];
}
};
for (var i = 0; i < columns.length; i++) {
var state_1 = _loop_1(i);
if (state_1 === "break")
break;
}
return result;
}

View File

@ -0,0 +1,115 @@
<import-sjs
from="./index.sjs"
name="_sjs"
></import-sjs>
<view
class="ant-picker {{disabled ? 'ant-picker-disabled' : ''}} {{className || ''}}"
style="{{style || ''}}"
onTap="onOpen"
>
<slot
name="prefix"
value="{{formatValue}}"
></slot>
<view class="ant-picker-value">
<slot
name="content"
value="{{formatValue}}"
>
<view
a:if="{{formatValue}}"
class="ant-picker-value-text"
>
{{formatValue}}
</view>
<block a:else>
<view
a:if="{{placeholder}}"
class="ant-picker-value-placeholder"
>
{{placeholder}}
</view>
</block>
</slot>
</view>
<slot
name="suffix"
value="{{formatValue}}"
></slot>
</view>
<ant-popup
className="ant-picker-popup {{popClassName || ''}}"
style="{{popStyle || ''}}"
position="bottom"
animationType="{{animationType}}"
destroyOnClose
onClose="onMaskDismiss"
visible="{{visible}}"
>
<view class="ant-picker-header">
<view
class="ant-picker-header-item ant-picker-header-cancel"
hoverClass="ant-picker-header-item-hover"
hoverStartTime="20"
hoverStayTime="50"
onTap="onCancel"
>
{{cancelText}}
</view>
<view class="ant-picker-header-item ant-picker-header-title">
<slot name="title">{{title}}</slot>
</view>
<view
class="ant-picker-header-item ant-picker-header-confirm"
hoverClass="ant-picker-header-item-hover"
hoverStartTime="20"
hoverStayTime="50"
onTap="onOk"
>
{{okText}}
</view>
</view>
<view class="ant-picker-content">
<slot name="content-header"></slot>
<block a:if="{{columns.length > 0}}">
<picker-view
class="ant-picker-picker-view"
maskStyle="{{maskStyle || ''}}"
maskClass="{{maskClassName || ''}}"
indicatorStyle="{{indicatorStyle || ''}}"
indicatorClass="{{indicatorClassName || ''}}"
value="{{selectedIndex}}"
onChange="onChange"
>
<block
a:for="{{columns}}"
a:for-index="dataIndex"
a:for-item="dataRoot"
>
<picker-view-column
a:if="{{dataIndex < options.length}}"
class="ant-picker-picker-view-column"
>
<block
a:for="{{dataRoot}}"
a:for-index="index"
a:for-item="item"
>
<view class="ant-picker-content-item">
{{_sjs.getPickerViewLabel(item)}}
</view>
</block>
</picker-view-column>
</block>
</picker-view>
</block>
<block a:else>
<picker-view class="ant-picker-picker-view">
<picker-view-column class="ant-picker-picker-view-column">
<!--display: inline-->
<text style="color: #ccc">{{emptyText}}</text>
</picker-view-column>
</picker-view>
</block>
</view>
</ant-popup>

View File

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

View File

@ -0,0 +1,224 @@
import { __awaiter, __generator } from "tslib";
import { Component, triggerEvent, triggerEventOnly, triggerEventValues, getValueFromProps, } from '../_util/simply';
import equal from 'fast-deep-equal';
import { PickerDefaultProps } from './props';
import { getMatchedItemByValue, getMatchedItemByIndex, getStrictMatchedItemByValue, } from './utils';
import mixinValue from '../mixins/value';
Component(PickerDefaultProps, {
// visible受控判断
isVisibleControlled: function () {
return 'visible' in getValueFromProps(this);
},
initData: function () {
var _this = this;
var _a = getValueFromProps(this, [
'options',
'visible',
'defaultVisible',
]), options = _a[0], visible = _a[1], defaultVisible = _a[2];
var columns = this.getterColumns(options);
this.setData({
columns: columns,
}, function () {
var formatValue = _this.getterFormatText();
var selectedIndex = _this.getterSelectedIndex();
_this.setData({
formatValue: formatValue,
selectedIndex: selectedIndex,
visible: _this.isVisibleControlled() ? visible : defaultVisible,
});
});
},
getterColumns: function (options) {
var columns = [];
if (options.length > 0) {
if (options.every(function (item) { return Array.isArray(item); })) {
this.single = false;
columns = options.slice();
}
else {
this.single = true;
columns = [options];
}
}
return columns;
},
defaultFormat: function (value, column) {
if (Array.isArray(column)) {
return column
.filter(function (c) { return c !== undefined; })
.map(function (c) {
if (typeof c === 'object') {
return c.label;
}
return c;
})
.join('-');
}
return (column && column.label) || column || '';
},
getterFormatText: function () {
var _a = getValueFromProps(this, [
'onFormat',
'formattedValueText',
]), onFormat = _a[0], formattedValueText = _a[1];
if (typeof formattedValueText === 'string') {
return formattedValueText;
}
var columns = this.data.columns;
var realValue = this.getValue();
var matchedColumn = getStrictMatchedItemByValue(columns, realValue, this.single).matchedColumn;
var formatValueByProps = onFormat && onFormat(realValue, matchedColumn);
if (formatValueByProps !== undefined && formatValueByProps !== null) {
return formatValueByProps;
}
return this.defaultFormat(realValue, matchedColumn);
},
getterSelectedIndex: function () {
var selectedIndex = [];
var columns = this.data.columns;
var realValue = this.getValue();
var value = realValue || [];
if (this.single) {
value = [realValue];
}
var _loop_1 = function (i) {
var column = columns[i];
var compareValue = value[i];
if (compareValue === undefined || compareValue === null) {
selectedIndex[i] = 0;
}
var index = column.findIndex(function (c) {
return c === compareValue || c.value === compareValue;
});
if (index === -1) {
index = 0;
}
selectedIndex[i] = index;
};
for (var i = 0; i < columns.length; i++) {
_loop_1(i);
}
return selectedIndex;
},
onOpen: function () {
var disabled = getValueFromProps(this, 'disabled');
if (!disabled) {
this.tempSelectedIndex = null;
var selectedIndex = this.getterSelectedIndex();
this.setData({
selectedIndex: selectedIndex,
});
this.triggerPicker(true);
}
},
triggerPicker: function (visible) {
this.setData({
visible: visible,
});
triggerEvent(this, 'visibleChange', visible);
},
onMaskDismiss: function () {
var maskClosable = getValueFromProps(this, 'maskClosable');
if (!maskClosable) {
return;
}
this.triggerPicker(false);
triggerEventOnly(this, 'cancel', { detail: { type: 'mask' } });
},
onCancel: function () {
this.triggerPicker(false);
triggerEventOnly(this, 'cancel', { detail: { type: 'cancel' } });
},
onChange: function (e) {
var selectedIndex = e.detail.value;
this.tempSelectedIndex = selectedIndex;
this.isChangingPickerView = true;
var _a = getMatchedItemByIndex(this.data.columns, this.tempSelectedIndex, this.single), matchedColumn = _a.matchedColumn, matchedValues = _a.matchedValues;
this.setData({
selectedIndex: selectedIndex,
});
triggerEventValues(this, 'change', [matchedValues, matchedColumn], e);
},
onOk: function () {
return __awaiter(this, void 0, void 0, function () {
var result, matchedColumn, matchedValues;
return __generator(this, function (_a) {
if (this.tempSelectedIndex) {
result = getMatchedItemByIndex(this.data.columns, this.tempSelectedIndex, this.single);
}
else {
result = getMatchedItemByValue(this.data.columns, this.getValue(), this.single);
}
matchedColumn = result.matchedColumn, matchedValues = result.matchedValues;
this.triggerPicker(false);
if (!this.isControlled()) {
this.update(matchedValues);
}
triggerEventValues(this, 'ok', [matchedValues, matchedColumn]);
return [2 /*return*/];
});
});
},
}, {
formatValue: '',
columns: [],
visible: false,
selectedIndex: [],
}, [
mixinValue({
transformValue: function (value) {
return {
needUpdate: true,
value: value === undefined ? [] : value,
};
},
}),
], {
tempSelectedIndex: null,
single: false,
isChangingPickerView: false,
onInit: function () {
this.initData();
},
didUpdate: function (prevProps) {
var _this = this;
var options = getValueFromProps(this, 'options');
if (!equal(options, prevProps.options)) {
var newColums = this.getterColumns(options);
this.setData({
columns: newColums,
}, function () {
// 如果是在滚动过程中columns发生变化以onChange里抛出的selectedIndex为准
if (!_this.isChangingPickerView) {
_this.tempSelectedIndex = null;
var selectedIndex = _this.getterSelectedIndex();
_this.setData({
selectedIndex: selectedIndex,
});
}
});
}
var value = getValueFromProps(this, 'value');
if (!equal(prevProps.value, value)) {
var selectedIndex = this.getterSelectedIndex();
this.tempSelectedIndex = null;
this.setData({
selectedIndex: selectedIndex,
});
}
var visible = getValueFromProps(this, 'visible');
if (!equal(prevProps.visible, visible)) {
this.setData({ visible: visible });
}
var formatValue = this.getterFormatText();
var formattedValueText = getValueFromProps(this, 'formattedValueText');
if (formatValue !== this.data.formatValue ||
prevProps.formattedValueText !== formattedValueText) {
this.setData({
formatValue: formatValue,
});
}
this.isChangingPickerView = false;
},
});

View File

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

View File

@ -0,0 +1,78 @@
@import (reference) './variable.less';
@import '../style/mixins/hairline.less';
@pickerPrefix: ant-picker;
.@{pickerPrefix} {
display: inline-flex;
align-items: center;
color: @COLOR_TEXT_PRIMARY;
&-disabled {
color: @COLOR_TEXT_WEAK;
}
&-header {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: @picker-header-padding;
box-sizing: border-box;
.hairline('bottom', @COLOR_BORDER);
&-item {
display: flex;
align-items: center;
height: 100%;
white-space: nowrap;
font-size: @picker-header-action-size;
color: @picker-header-action-color;
box-sizing: border-box;
}
&-title {
display: flex;
justify-content: center;
overflow: hidden;
-webkit-line-clamp: 1;
box-orient: vertical;
white-space: normal;
color: @picker-item-color;
width: @picker-header-title-width;
}
}
&-content {
background: @COLOR_CARD;
.a-picker-view-picker-item {
color: @COLOR_TEXT_PRIMARY;
}
.a-picker-view-picker-indicator {
&::before,
&::after {
border-color: @COLOR_BORDER;
}
}
.a-picker-view-picker-mask {
background-image: linear-gradient(
to bottom,
fade(@COLOR_CARD, 95),
fade(@COLOR_CARD, 60)
),
linear-gradient(to top, fade(@COLOR_CARD, 95), fade(@COLOR_CARD, 60));
will-change: transform;
}
}
&-value {
&-placeholder,
&-text {
&:not(:nth-child(1)) {
display: none;
}
}
&-placeholder {
color: @picker-placeholder-color;
}
}
}

View File

@ -0,0 +1,9 @@
function getPickerViewLabel(item) {
if (typeof item === 'object' && typeof item.label === 'string') {
return item.label || '';
}
return item;
}
export default {
getPickerViewLabel: getPickerViewLabel
};

View File

@ -0,0 +1,116 @@
import { IBaseProps } from '../_util/base';
export interface PickerData {
value: PickerValue;
label: string;
}
export declare type PickerValue = string | number | PickerData | (string | number | PickerData)[];
/**
* @description 选择器,包括一个或多个不同值的可滚动列表,每个值可以在视图的中心以较暗的文本形式显示。当用户激活 **Picker** 后,将会从底部弹出。
*/
export interface IPickerProps extends IBaseProps {
visible?: boolean;
defaultVisible?: boolean;
/**
* @desciption 动画类型
* @default "transform"
*/
animationType: 'transform' | 'position';
/**
* @description picker 数据
*/
value: PickerValue;
/**
* @description 格式化后的 value 文本, 优先级大于 onFormat
*/
formattedValueText?: string;
/**
* @description 默认picker 数据
*/
defaultValue: PickerValue;
/**
* @description 是否禁用
*/
disabled?: boolean;
/**
* @description 标题
*/
title: string;
/**
* @description 确定按钮文案
* @default "确定"
*/
okText: string;
/**
* @description 取消文案
* @default "取消"
*/
cancelText: string;
/**
* @description 提示文案
* @default '请选择'
*/
placeholder: string;
/**
* @description 空状态提示文案
* @default '暂无数据'
*/
emptyText?: string;
/**
* @description picker 数据
*/
options: PickerValue[];
/**
* @description 点击蒙层是否可以关闭
* @default false
*/
maskClosable: boolean;
/**
* @description 弹出框类名
*/
popClassName: string;
/**
* @description 弹出框样式
*/
popStyle: string;
/**
*@description 选中框样式
* 版本要求: 支付宝小程序基础库 1.10.0 及以上
*/
indicatorStyle?: string;
/**
*@description 选中框类名
* 版本要求: 支付宝小程序基础库 1.10.0 及以上
*/
indicatorClassName?: string;
/**
* @description 蒙层的样式。
* 版本要求: 支付宝小程序基础库 1.10.0 及以上
*/
maskStyle?: string;
/**
* @description 蒙层的类名。
* 版本要求: 支付宝小程序基础库 1.10.0 及以上
*/
maskClassName?: string;
/**
* @description 点击确认回调
*/
onOk?: (value: PickerValue, column: PickerData, e: Record<string, any>) => void;
/**
* @description 点击取消回调
*/
onCancel?: (e: Record<string, any>) => void;
/**
* @description 发生滚动即触发, 与 onChange 点击 ok 后触发不同
*/
onChange?: (value: PickerValue, column: PickerData, e: Record<string, any>) => void;
/**
* @description 选中值的文本显示格式
*/
onFormat?: (value: PickerValue, column: PickerValue) => string;
/**
* @description 切换显示隐藏
*/
onVisibleChange?: (visible: boolean, e: Record<string, any>) => void;
}
export declare const PickerDefaultProps: Partial<IPickerProps>;

View File

@ -0,0 +1,19 @@
export var PickerDefaultProps = {
formattedValueText: null,
visible: null,
defaultVisible: null,
animationType: 'transform',
value: null,
defaultValue: null,
disabled: false,
title: '',
okText: '确定',
cancelText: '取消',
placeholder: '请选择',
options: [],
popClassName: '',
popStyle: '',
maskClosable: true,
onFormat: null,
emptyText: '暂无数据',
};

View File

@ -0,0 +1,12 @@
export declare function getStrictMatchedItemByValue(columns: any, value: any, single: any): {
matchedColumn: any;
matchedValues: any;
};
export declare function getMatchedItemByValue(columns: any, value: any, single: any): {
matchedColumn: any;
matchedValues: any;
};
export declare function getMatchedItemByIndex(columns: any, selectedIndex: any, single: any): {
matchedColumn: any;
matchedValues: any;
};

View File

@ -0,0 +1,94 @@
function getColumnValue(columnItem) {
if (typeof columnItem === 'object')
return columnItem.value;
return columnItem;
}
export function getStrictMatchedItemByValue(columns, value, single) {
if (single) {
value = [value];
}
var matchedValues = [];
var matchedColumn = [];
var index = null;
var _loop_1 = function (i) {
var column = columns[i];
var compareValue = (value || [])[i];
index = column.findIndex(function (c) {
var columnValue = getColumnValue(c);
return columnValue === compareValue;
});
matchedColumn[i] = column[index];
matchedValues[i] = getColumnValue(column[index]);
};
for (var i = 0; i < columns.length; i++) {
_loop_1(i);
}
return {
matchedColumn: single ? matchedColumn === null || matchedColumn === void 0 ? void 0 : matchedColumn[0] : matchedColumn,
matchedValues: single ? matchedValues === null || matchedValues === void 0 ? void 0 : matchedValues[0] : matchedValues,
};
}
// 如果找不到value对应的item项目返回第一项
export function getMatchedItemByValue(columns, value, single) {
if (single) {
value = [value];
}
var matchedValues = [];
var matchedColumn = [];
var index = null;
var _loop_2 = function (i) {
var column = columns[i];
var compareValue = (value || [])[i];
if (compareValue === undefined || compareValue === null) {
index = 0;
}
else {
index = column.findIndex(function (c) {
var columnValue = getColumnValue(c);
return columnValue === compareValue;
});
if (index === -1) {
index = 0;
} // 没有找到, 默认选择第一个
}
matchedColumn[i] = column[index];
matchedValues[i] = getColumnValue(column[index]);
};
for (var i = 0; i < columns.length; i++) {
_loop_2(i);
}
return {
matchedColumn: single ? matchedColumn[0] : matchedColumn,
matchedValues: single ? matchedValues[0] : matchedValues,
};
}
export function getMatchedItemByIndex(columns, selectedIndex, single) {
var _a;
var matchedValues = [];
var matchedColumn = [];
var index = null;
for (var i = 0; i < columns.length; i++) {
var column = columns[i];
var compareValue = selectedIndex[i];
index = null;
if (compareValue === undefined || compareValue === null) {
index = 0;
}
else {
index = compareValue;
// 当column变化时 picker-view onChange 里抛出来的selectedIndex有可能不正确
if (((_a = columns === null || columns === void 0 ? void 0 : columns[i]) === null || _a === void 0 ? void 0 : _a[compareValue]) === undefined) {
index = 0;
}
if (index === -1) {
index = 0;
} // 没有找到, 默认选择第一个
}
matchedColumn[i] = column[index];
matchedValues[i] = getColumnValue(column[index]);
}
return {
matchedColumn: single ? matchedColumn[0] : matchedColumn,
matchedValues: single ? matchedValues[0] : matchedValues,
};
}

View File

@ -0,0 +1,23 @@
@import (reference) '../style/themes/index.less';
// picker 选项的高度
@picker-item-height: 68 * @rpx;
// picker 选项字体颜色
@picker-item-color: @COLOR_TEXT_PRIMARY;
// picker 选项字体大小
@picker-item-size: 42 * @rpx;
// picker 选项选中字体大小
@picker-item-active-size: @font-size-list;
// 取消 和 确定认按钮颜色
@picker-header-action-color: @COLOR_BRAND1;
// 取消 和 确定按钮大小
@picker-header-action-size: 30 * @rpx;
// header 区域padding
@picker-header-padding: 30 * @rpx 24 * @rpx 24 * @rpx;
// header 区域 title 宽度
@picker-header-title-width: 518 * @rpx;
@picker-placeholder-color: @COLOR_TEXT_WEAK;
// 微信小程序 picker-view 高度
@picker-view-height: 460 * @rpx;