@component-hook/picker 0.2.4 → 1.0.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +47 -163
- package/dist/react/index.css +1 -1
- package/dist/react/picker.es.d.ts +78 -40
- package/dist/react/picker.es.js +1601 -2952
- package/dist/react/picker.umd.js +15 -36
- package/dist/vue/index.css +1 -1
- package/dist/vue/picker.es.d.ts +188 -55
- package/dist/vue/picker.es.js +499 -1811
- package/dist/vue/picker.umd.js +2 -23
- package/package.json +5 -6
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @component-hook/picker
|
|
2
2
|
|
|
3
|
-
Picker component with vue3 and react
|
|
3
|
+
Picker component with `vue3` and `react`.
|
|
4
4
|
|
|
5
5
|
<p>
|
|
6
6
|
<a href="https://npm-stat.com/charts.html?package=@component-hook/picker">
|
|
@@ -13,57 +13,45 @@ Picker component with vue3 and react ([DEMO](https://tzuyi0817.github.io/compone
|
|
|
13
13
|
|
|
14
14
|
## Features
|
|
15
15
|
|
|
16
|
-
-
|
|
17
|
-
-
|
|
18
|
-
-
|
|
19
|
-
-
|
|
20
|
-
-
|
|
21
|
-
-
|
|
22
|
-
|
|
16
|
+
- Supports `single-column` and `cascade` picker
|
|
17
|
+
- Scroll wheel 3D effect for smooth selection
|
|
18
|
+
- Customize `title`, `confirm` and `cancel` buttons
|
|
19
|
+
- Flexible column structure for different use cases
|
|
20
|
+
- Built-in `DatePicker` and `TimePicker` components
|
|
21
|
+
- Full TypeScript support
|
|
22
|
+
|
|
23
|
+
## Documentation
|
|
24
|
+
|
|
25
|
+
For detailed documentation and usage examples, please visit: [Official Docs](https://tzuyi0817.github.io/component-hook/#/component/vue-picker).
|
|
23
26
|
|
|
24
27
|
## Installation
|
|
25
28
|
|
|
26
29
|
```bash
|
|
30
|
+
# Using npm
|
|
27
31
|
$ npm install @component-hook/picker
|
|
28
32
|
|
|
29
|
-
#
|
|
33
|
+
# Using yarn
|
|
30
34
|
$ yarn add @component-hook/picker
|
|
31
35
|
|
|
32
|
-
#
|
|
36
|
+
# Using pnpm
|
|
33
37
|
$ pnpm install @component-hook/picker
|
|
34
38
|
```
|
|
35
39
|
|
|
36
|
-
## Usage
|
|
40
|
+
## Base Usage
|
|
41
|
+
|
|
42
|
+
### Vue3
|
|
37
43
|
|
|
38
44
|
```vue
|
|
39
|
-
<script setup>
|
|
40
|
-
import { ref
|
|
41
|
-
import Picker from '@component-hook/picker/vue';
|
|
42
|
-
|
|
43
|
-
const currentSelect = ref({});
|
|
44
|
-
const anchor = ref([0, 1, 2]);
|
|
45
|
-
const currentSingle = ref({});
|
|
46
|
-
const anchorSingle = ref(1);
|
|
47
|
-
const currentDate = ref([2022, 7, 7]);
|
|
48
|
-
const currentTime = ref([]);
|
|
45
|
+
<script setup lang="ts">
|
|
46
|
+
import { ref } from 'vue';
|
|
47
|
+
import { Picker, type PickerSelectedValues } from '@component-hook/picker/vue';
|
|
48
|
+
|
|
49
49
|
const isShowPicker = ref(false);
|
|
50
|
-
const
|
|
51
|
-
const
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
{ langType: 1, code: 'cn', original: '中文' },
|
|
56
|
-
];
|
|
57
|
-
const dataList = ref([singleData, singleData, singleData]);
|
|
58
|
-
|
|
59
|
-
const options = reactive({
|
|
60
|
-
confirmColor: '#000',
|
|
61
|
-
cancelClass: 'test',
|
|
62
|
-
titleText: 'Title',
|
|
63
|
-
});
|
|
64
|
-
|
|
65
|
-
function onConfirm(value) {
|
|
66
|
-
currentSelect.value = value;
|
|
50
|
+
const pickerValues = ref<PickerSelectedValues>([]);
|
|
51
|
+
const columns = Array.from({ length: 50 }, (_, index) => ({ label: index, value: index }));
|
|
52
|
+
|
|
53
|
+
function onConfirm(value: PickerSelectedValues) {
|
|
54
|
+
pickerValues.value = value;
|
|
67
55
|
}
|
|
68
56
|
|
|
69
57
|
function onCancel() {
|
|
@@ -73,115 +61,49 @@ function onCancel() {
|
|
|
73
61
|
|
|
74
62
|
<template>
|
|
75
63
|
<picker
|
|
76
|
-
v-model:
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
:show-key="['original', 'original', 'original']"
|
|
80
|
-
:options="options"
|
|
81
|
-
:swipe-time="500"
|
|
64
|
+
v-model:show="isShowPicker"
|
|
65
|
+
:columns="columns"
|
|
66
|
+
title="Base Selector"
|
|
82
67
|
@confirm="onConfirm"
|
|
83
68
|
@cancel="onCancel"
|
|
84
69
|
/>
|
|
85
70
|
|
|
86
|
-
<picker
|
|
87
|
-
v-model:is-show-picker="isShowSingle"
|
|
88
|
-
v-model:anchor="anchorSingle"
|
|
89
|
-
:data="singleData"
|
|
90
|
-
show-key="original"
|
|
91
|
-
:options="options"
|
|
92
|
-
/>
|
|
93
|
-
|
|
94
|
-
<picker
|
|
95
|
-
v-model:is-show-picker="isShowDate"
|
|
96
|
-
v-model:anchor="currentDate"
|
|
97
|
-
type="date"
|
|
98
|
-
:options="{ titleText: 'date selector' }"
|
|
99
|
-
/>
|
|
71
|
+
<button @click="isShowPicker = true">toggle Base picker</button>
|
|
100
72
|
|
|
101
|
-
<
|
|
102
|
-
v-model:is-show-picker="isShowTime"
|
|
103
|
-
v-model:anchor="currentTime"
|
|
104
|
-
type="time"
|
|
105
|
-
:options="{ titleText: 'time selector' }"
|
|
106
|
-
/>
|
|
73
|
+
<p class="mt-6 text-sm font-mono">Selected value: {{ pickerValues.join('') || 'not selected yet' }}</p>
|
|
107
74
|
</template>
|
|
108
75
|
```
|
|
109
76
|
|
|
110
|
-
|
|
77
|
+
### React
|
|
111
78
|
|
|
112
79
|
```jsx
|
|
113
80
|
import { useState } from 'react';
|
|
114
|
-
import Picker from '@component-hook/picker/react';
|
|
115
|
-
|
|
116
|
-
const
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
{ langType: 1, code: 'cn', original: '中文' },
|
|
120
|
-
];
|
|
121
|
-
const cascadeData = [singleData, singleData, singleData];
|
|
122
|
-
|
|
123
|
-
const options = {
|
|
124
|
-
confirmColor: '#000',
|
|
125
|
-
cancelClass: 'test',
|
|
126
|
-
titleText: 'Title',
|
|
127
|
-
};
|
|
128
|
-
|
|
129
|
-
function PickerExample() {
|
|
130
|
-
const [currentSelect, setCurrentSelect] = useState({});
|
|
131
|
-
const [anchor, setAnchor] = useState([0, 1, 2]);
|
|
132
|
-
const [anchorSingle, setAnchorSingle] = useState(0);
|
|
133
|
-
const [currentDate, setCurrentDate] = useState([2022, 7, 7]);
|
|
134
|
-
const [currentTime, setCurrentTime] = useState([]);
|
|
81
|
+
import { Picker, type PickerSelectedValues } from '@component-hook/picker/react';
|
|
82
|
+
|
|
83
|
+
const columns = Array.from({ length: 50 }, (_, index) => ({ label: index, value: index }));
|
|
84
|
+
|
|
85
|
+
export function BasePicker() {
|
|
135
86
|
const [showPicker, setShowPicker] = useState(false);
|
|
136
|
-
const [
|
|
137
|
-
const [showDate, setShowDate] = useState(false);
|
|
138
|
-
const [showTime, setShowTime] = useState(false);
|
|
87
|
+
const [pickerValues, setPickerValues] = useState<PickerSelectedValues>([]);
|
|
139
88
|
|
|
140
|
-
function onConfirm(
|
|
141
|
-
|
|
89
|
+
function onConfirm(values: PickerSelectedValues) {
|
|
90
|
+
setPickerValues(values);
|
|
142
91
|
}
|
|
143
92
|
|
|
144
93
|
return (
|
|
145
94
|
<>
|
|
146
95
|
<Picker
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
options={{ titleText: 'cascade selector' }}
|
|
151
|
-
anchor={anchor}
|
|
152
|
-
onChangeAnchor={setAnchor}
|
|
96
|
+
show={showPicker}
|
|
97
|
+
columns={columns}
|
|
98
|
+
title="Base Selector"
|
|
153
99
|
onClose={() => setShowPicker(false)}
|
|
154
100
|
onConfirm={onConfirm}
|
|
155
101
|
onCancel={onCancel}
|
|
156
102
|
/>
|
|
157
103
|
|
|
158
|
-
<
|
|
159
|
-
data={singleData}
|
|
160
|
-
isShowPicker={showSingle}
|
|
161
|
-
anchor={anchorSingle}
|
|
162
|
-
showKey="original"
|
|
163
|
-
options={{ titleText: 'single selector' }}
|
|
164
|
-
onChangeAnchor={setAnchorSingle}
|
|
165
|
-
onClose={() => setShowSingle(false)}
|
|
166
|
-
/>
|
|
167
|
-
|
|
168
|
-
<Picker
|
|
169
|
-
isShowPicker={showDate}
|
|
170
|
-
onClose={() => setShowDate(false)}
|
|
171
|
-
anchor={currentDate}
|
|
172
|
-
type="date"
|
|
173
|
-
options={{ titleText: 'date selector' }}
|
|
174
|
-
onChangeAnchor={setCurrentDate}
|
|
175
|
-
/>
|
|
104
|
+
<button onClick={() => setShowPicker(true)}>toggle Base picker</button>
|
|
176
105
|
|
|
177
|
-
<
|
|
178
|
-
isShowPicker={showTime}
|
|
179
|
-
onClose={() => setShowTime(false)}
|
|
180
|
-
anchor={currentTime}
|
|
181
|
-
type="time"
|
|
182
|
-
options={{ titleText: 'time selector' }}
|
|
183
|
-
onChangeAnchor={setCurrentTime}
|
|
184
|
-
/>
|
|
106
|
+
<p>Selected value: {pickerValues.join('') || 'not selected yet'}</p>
|
|
185
107
|
</>
|
|
186
108
|
);
|
|
187
109
|
}
|
|
@@ -191,44 +113,6 @@ function onCancel() {
|
|
|
191
113
|
}
|
|
192
114
|
```
|
|
193
115
|
|
|
194
|
-
##
|
|
195
|
-
|
|
196
|
-
| Name | Required | Type | Description | Default |
|
|
197
|
-
| ------------ | -------- | --------------------- | --------------------------------------------------------------------------------------------------------------- | --------------------- |
|
|
198
|
-
| isShowPicker | true | `boolean` | Control picker show (`vue` use `v-model`) | — |
|
|
199
|
-
| anchor | true | `number` / `number[]` | Picker current select index (single column for `number`、 multiple columns for `number[]`, `vue` use `v-model`) | — |
|
|
200
|
-
| data | false | `array` | Picker list `[1, 2, 3]` or `[[1, 2, 3], [1, 2, 3]]` | — |
|
|
201
|
-
| type | false | `string` | Built-in picker type, no need to pass in data (date, time) | — |
|
|
202
|
-
| showKey | false | `string` / `string[]` | Wheel options name (object key) | — |
|
|
203
|
-
| swipeTime | false | `number` | Wheel swipe Time | 500 |
|
|
204
|
-
| options | false | `object` | Custom text, color and class | See below for details |
|
|
205
|
-
|
|
206
|
-
## Attributes (React)
|
|
207
|
-
|
|
208
|
-
| Name | Required | Type | Description | Default |
|
|
209
|
-
| -------------- | -------- | ------------------------------------------------ | -------------------------------------------------- | ------- |
|
|
210
|
-
| onClose | true | `Function () => void` | close picker show (need to update state) | — |
|
|
211
|
-
| onChangeAnchor | true | `Function (anchor: number` / `number[]) => void` | update picker anchor (need to update anchor state) | — |
|
|
212
|
-
|
|
213
|
-
## Options Attribute
|
|
214
|
-
|
|
215
|
-
```json
|
|
216
|
-
{
|
|
217
|
-
"cancelClass": "",
|
|
218
|
-
"confirmClass": "",
|
|
219
|
-
"titleClass": "",
|
|
220
|
-
"cancelColor": "#999",
|
|
221
|
-
"confirmColor": "#42b983",
|
|
222
|
-
"titleColor": "",
|
|
223
|
-
"cancelText": "Cancel",
|
|
224
|
-
"confirmText": "Confirm",
|
|
225
|
-
"titleText": ""
|
|
226
|
-
}
|
|
227
|
-
```
|
|
228
|
-
|
|
229
|
-
## Events
|
|
116
|
+
## License
|
|
230
117
|
|
|
231
|
-
|
|
232
|
-
| :--------------------------------- | :------------------------------------------- | :---------------------------------------- |
|
|
233
|
-
| confirm(`vue`), onConfirm(`react`) | Triggered when the confirm button is clicked | `Function (value: selected item) => void` |
|
|
234
|
-
| cancel(`vue`), onCancel(`react`) | Triggered when the cancel button is clicked | `Function () => void` |
|
|
118
|
+
This project is licensed under the MIT License.
|
package/dist/react/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
:root{--chook-picker-background: #fff;--chook-picker-border-radius: .5rem;--chook-picker-padding-bottom: 1.25rem;--chook-picker-z-index: 2147483646;--chook-picker-mask-background: rgba(0, 0, 0, .2);--chook-picker-header-padding: .75rem 0;--chook-picker-header-margin-bottom: 1.25rem;--chook-picker-title-font-size: 1rem;--chook-picker-title-font-weight: 500;--chook-picker-title-color: #323233;--chook-picker-confirm-color: #1989fa;--chook-picker-confirm-font-size: .875rem;--chook-picker-confirm-padding: 0 1rem;--chook-picker-cancel-color: #969799;--chook-picker-cancel-font-size: .875rem;--chook-picker-cancel-padding: 0 1rem;--chook-picker-active-opacity: .6;--chook-picker-columns-margin: 0 1rem;--chook-picker-columns-backdrop: linear-gradient( to bottom, #f2f2f2 0px, #f2f2f2 .0625rem, transparent .0625rem, transparent calc(100% - .0625rem) , #f2f2f2 calc(100% - .0625rem) , #f2f2f2 100% );--chook-picker-mask-backdrop: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)), linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4));--chook-picker-column-label-color: #323233;--chook-picker-column-label-padding: 0 .25rem;--chook-picker-column-font-size: 1rem;--chook-picker-column-font-weight: 500}.chook-picker-mask{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--chook-picker-mask-background);z-index:calc(var(--chook-picker-z-index) - 1)}.chook-picker-container{position:fixed;left:0;bottom:0;width:100vw;z-index:var(--chook-picker-z-index);-webkit-user-select:none;user-select:none;padding-bottom:var(--chook-picker-padding-bottom);background:var(--chook-picker-background);border-top-left-radius:var(--chook-picker-border-radius);border-top-right-radius:var(--chook-picker-border-radius)}.chook-picker-header{display:flex;align-items:center;justify-content:space-between;padding:var(--chook-picker-header-padding);margin-bottom:var(--chook-picker-header-margin-bottom)}.chook-picker-title{font-size:var(--chook-picker-title-font-size);font-weight:var(--chook-picker-title-font-weight);color:var(--chook-picker-title-color);margin:0}.chook-picker-columns{width:calc(100% - var(--chook-picker-columns-margin) * 2);height:13.5rem;overflow:hidden;position:relative;display:flex;margin:var(--chook-picker-columns-margin)}.chook-picker-columns-backdrop{background-image:var(--chook-picker-columns-backdrop);background-repeat:no-repeat;background-position:center;background-size:100% 3rem}.chook-picker-mask-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:var(--chook-picker-mask-backdrop);background-repeat:no-repeat;background-position:top,bottom;background-size:100% 5.25rem}.chook-picker-loading{height:100%;width:100%;position:absolute;top:0;left:0}.chook-picker-column{flex:1 1 0%;overflow:hidden;padding:5.375rem 0;cursor:grab}.chook-picker-column ul{margin:0;padding:0;list-style:none}.chook-picker-column-item{height:3rem;display:flex;justify-content:center;align-items:center;cursor:grab}.chook-picker-column-label{color:var(--chook-picker-column-label-color);font-size:var(--chook-picker-column-font-size);font-weight:var(--chook-picker-column-font-weight);padding:var(--chook-picker-column-label-padding);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}button.chook-picker-confirm{color:var(--chook-picker-confirm-color);font-size:var(--chook-picker-confirm-font-size);background-color:transparent;padding:var(--chook-picker-confirm-padding);border:none}button.chook-picker-confirm:active{opacity:var(--chook-picker-active-opacity)}button.chook-picker-confirm:hover{color:var(--chook-picker-confirm-color);background-color:transparent}button.chook-picker-cancel{color:var(--chook-picker-cancel-color);font-size:var(--chook-picker-cancel-font-size);background-color:transparent;padding:var(--chook-picker-cancel-padding);border:none}button.chook-picker-cancel:active{opacity:var(--chook-picker-active-opacity)}button.chook-picker-cancel:hover{color:var(--chook-picker-cancel-color);background-color:transparent}.chook-picker-fade-enter{opacity:0}.chook-picker-fade-enter-active{opacity:1;transition:all .3s ease}.chook-picker-fade-exit-active{opacity:0;transition:all .3s ease}.chook-picker-slide-enter{opacity:.5;transform:translate3d(0,100%,0)}.chook-picker-slide-enter-active{transition:all .3s ease;opacity:1;transform:translateZ(0)}.chook-picker-slide-exit-active{transition:all .3s ease;opacity:.5;transform:translate3d(0,100%,0)}
|
|
@@ -1,60 +1,98 @@
|
|
|
1
1
|
import { JSX as JSX_2 } from 'react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
2
3
|
|
|
3
|
-
export declare
|
|
4
|
+
export declare function DatePicker({ show, values, title, columnsType, minDate, maxDate, teleport, confirmButtonText, cancelButtonText, formatYearLabel, formatMonthLabel, formatDayLabel, onConfirm, onClose, onCancel, onOpen, onClosed, }: Props_2): JSX_2.Element;
|
|
4
5
|
|
|
5
|
-
export declare type
|
|
6
|
+
export declare type DatePickerColumnType = 'year' | 'month' | 'day';
|
|
6
7
|
|
|
7
|
-
declare
|
|
8
|
-
export default Picker;
|
|
8
|
+
export declare type Direction = '' | 'vertical' | 'horizontal';
|
|
9
9
|
|
|
10
|
-
export declare
|
|
10
|
+
export declare function Picker({ show, values, title, columns, linkage, loading, loadingSlot, emptySlot, teleport, confirmButtonText, cancelButtonText, columnsFieldNames, onConfirm, onClose, onChange, onCancel, onOpen, onClosed, }: Props): JSX_2.Element;
|
|
11
11
|
|
|
12
|
-
export declare type
|
|
12
|
+
export declare type PickerColumn = PickerOption[];
|
|
13
13
|
|
|
14
|
-
export declare
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
swipeTime?: number;
|
|
21
|
-
type?: PickerBuiltIn;
|
|
14
|
+
export declare type PickerColumnsType = 'single' | 'multiple' | 'cascade';
|
|
15
|
+
|
|
16
|
+
export declare interface PickerFields {
|
|
17
|
+
label?: string;
|
|
18
|
+
value?: string;
|
|
19
|
+
children?: string;
|
|
22
20
|
}
|
|
23
21
|
|
|
24
|
-
export declare type
|
|
22
|
+
export declare type PickerFormatLabel = (label: string) => string;
|
|
23
|
+
|
|
24
|
+
export declare interface PickerOption {
|
|
25
|
+
label?: string | number;
|
|
26
|
+
value?: string | number;
|
|
27
|
+
children?: PickerColumn;
|
|
28
|
+
[key: PropertyKey]: any;
|
|
29
|
+
}
|
|
25
30
|
|
|
26
|
-
export declare
|
|
31
|
+
export declare type PickerSelectedValues = Array<PickerOption['value']>;
|
|
32
|
+
|
|
33
|
+
declare interface Props {
|
|
34
|
+
show: boolean;
|
|
35
|
+
values?: PickerSelectedValues;
|
|
36
|
+
title?: string;
|
|
37
|
+
columns: PickerColumn | PickerColumn[];
|
|
38
|
+
linkage?: boolean;
|
|
39
|
+
loading?: boolean;
|
|
40
|
+
loadingSlot?: ReactNode;
|
|
41
|
+
emptySlot?: ReactNode;
|
|
42
|
+
teleport?: Element | DocumentFragment;
|
|
43
|
+
confirmButtonText?: string;
|
|
44
|
+
cancelButtonText?: string;
|
|
45
|
+
columnsFieldNames?: PickerFields;
|
|
46
|
+
onConfirm?: (values: PickerSelectedValues) => void;
|
|
27
47
|
onClose: () => void;
|
|
28
|
-
|
|
48
|
+
onChange?: (values: PickerSelectedValues) => void;
|
|
29
49
|
onCancel?: () => void;
|
|
30
|
-
|
|
50
|
+
onOpen?: () => void;
|
|
51
|
+
onClosed?: () => void;
|
|
31
52
|
}
|
|
32
53
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
54
|
+
declare interface Props_2 {
|
|
55
|
+
show: boolean;
|
|
56
|
+
values?: PickerSelectedValues;
|
|
57
|
+
title?: string;
|
|
58
|
+
columnsType?: DatePickerColumnType[];
|
|
59
|
+
minDate?: Date;
|
|
60
|
+
maxDate?: Date;
|
|
61
|
+
teleport?: Element | DocumentFragment;
|
|
62
|
+
confirmButtonText?: string;
|
|
63
|
+
cancelButtonText?: string;
|
|
64
|
+
formatYearLabel?: PickerFormatLabel;
|
|
65
|
+
formatMonthLabel?: PickerFormatLabel;
|
|
66
|
+
formatDayLabel?: PickerFormatLabel;
|
|
67
|
+
onConfirm?: (values: PickerSelectedValues) => void;
|
|
68
|
+
onClose: () => void;
|
|
69
|
+
onCancel?: () => void;
|
|
70
|
+
onOpen?: () => void;
|
|
71
|
+
onClosed?: () => void;
|
|
43
72
|
}
|
|
44
73
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
74
|
+
declare interface Props_3 {
|
|
75
|
+
show: boolean;
|
|
76
|
+
values?: PickerSelectedValues;
|
|
77
|
+
title?: string;
|
|
78
|
+
columnsType?: TimePickerColumnType[];
|
|
79
|
+
minTime?: string;
|
|
80
|
+
maxTime?: string;
|
|
81
|
+
teleport?: Element | DocumentFragment;
|
|
82
|
+
confirmButtonText?: string;
|
|
83
|
+
cancelButtonText?: string;
|
|
84
|
+
formatHourLabel?: PickerFormatLabel;
|
|
85
|
+
formatMinuteLabel?: PickerFormatLabel;
|
|
86
|
+
formatSecondLabel?: PickerFormatLabel;
|
|
87
|
+
onConfirm?: (values: PickerSelectedValues) => void;
|
|
88
|
+
onClose: () => void;
|
|
89
|
+
onCancel?: () => void;
|
|
90
|
+
onOpen?: () => void;
|
|
91
|
+
onClosed?: () => void;
|
|
53
92
|
}
|
|
54
93
|
|
|
55
|
-
export declare
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
}
|
|
94
|
+
export declare function TimePicker({ show, values, title, columnsType, minTime, maxTime, teleport, confirmButtonText, cancelButtonText, formatHourLabel, formatMinuteLabel, formatSecondLabel, onConfirm, onClose, onCancel, onOpen, onClosed, }: Props_3): JSX_2.Element;
|
|
95
|
+
|
|
96
|
+
export declare type TimePickerColumnType = 'hour' | 'minute' | 'second';
|
|
59
97
|
|
|
60
98
|
export { }
|