Skip to content

Commit 781b32c

Browse files
zombieJzombieJ
authored
refactor: New Picker interactive (#691)
* fix: preset should not trigger when invalidate * fix: block disabled * fix: picker logic * test: no clickable * test: more test case * chore: init needConfirm prop def * refactor: needConfirm logic * fix: new test case * fix: lock logic * fix: active logic * fix: no need hover * test: fix test case * chore: init logic desc * chore: new confirm logic * chore: renew flush logic * chore: tmp of it * chore: sync flush * chore: rm submit effect * chore: off it * chore: support switch on !needConfirm * chore: open logic * fix: part logic * chore: fix validate logic * chore: clean up * test: more test case * chore: dbl click * refactor: motion scroll * chore: clean up * test: dbl click * chore: all the logic * chore: open false also can submit * chore: open false also can submit * fix: scroll sync * fix: logic missing * feat: input support render * test: reset with onChange * chore: resize also realign the popup * test: fix test case * chore: enter to submit * test: coverage * test: test driven * fix: onPickerValue change * feat: focus provider it * chore: focus info * chore: fix warning message * chore: part ts * chore: ability * chore: more ts * chore: tmp of it * refactor: split calendarValue * chore: clean up * chore: tmp of it * chore: tmp of it * chore: all disabled logic * chore: tmp of it * chore: pickerValue * chore: new pickerValue logic * chore: clean up * test: 7 days * feat: auto limit * chore: comment it * chore: sync in range * test: add test case * test: update test case * refactor: use changeOnBlur * test: update test case * docs: update * chore: tmp of it * chore: tmp of it * chore: tmp of it * chore: tmp of it * chore: clean up * chore: single selector * chore: tmp of it * chore: tmp of it * chore: tmp of it * chore: tmp of it * refactor: generic of useUtil * refactor: generic of SinglePicker * chore: tmp of it * chore: merge filled logic * refactor: more hooks * chore: comment it * chore: move more * chore: more exclude * chore: ts update * chore: move more * chore: fix type * chore: merge code * chore: more info * chore: clean up * chore: fix type * fix: event * chore: unique * chore: tmp of it * chore: merge more * chore: tmp of it * chore: tmp of it * chore: refix Range type * chore: fix type * chore: move more * chore: fix type * chore: fix type * chore: more * chore: more ts * chore: more types * chore: more types * chore: fix mode change * chore: clean up * chore: more info * chore: more info * chore: rename to onSelect * refactor: rename onCalendarChange to onSelect * chore: ts support multiple * chore: tmp of it * chore: split code * refactor: type of it * chore: clean up * refactor: pass type * chore: part of it * chore: tmp of selection * refactor: toggle logic outside * refactor: use unique panelType * refactor: logic adjust * chore: support panel multiple * chore: tmp of def * chore: more ts * chore: fix ts logic * chore: refactor part of code * chore: fix SinglePicker warning * chore: adjust useInput logic * chore: fix crash * fix: allowEmpty check * chore: merged values * chore: fix logic * chore: part refactor of range values * chore: unique disabled submit check * chore: move order type to interface * chore: change after close * test: part of test * fix: should not open when all disabled * fix: go to emptys * fix: change logic * chore: add missing picker reset * fix: invalidate logic * chore: tmp of demo * chore: onPickerValue change also provide the mode info * chore: adjust logic * refactor: rollback * chore: add comment * chore: all trigger panelChange * chore: fix decade format * chore: refactoring of OK logic * chore: add onNow btn * fix: now should block * test: update snapshot * chore: depecated inputRender * test: fix test case * test: fix test case * fix: showNow on time * chore: support of it * refactor: support ts * chore: adjust align * chore: useHookContext * refactor: move in hooks * refactor: move in hooks * chore: clean up * chore: support of content format * chore: fix logic * test: fix test case * chore: tmp of it * test: update snapshot * chore: pick props * chore: fix props * fix: reset logic * test: update snapshot * chore: fix type * test: update test case * fix: Enter should open picker * fix: missing onKeyDown * chore: move preventDefault to native event * test: all test * test: update blur test * chore: preserveInvalidOnBlur * chore: wrap info * clean up * fix: disabledTime range * fix: disabled logic * chore: fix type * refactor: part * chore: fix selection * chore: tmp of it * chore: add warning * fix: panel switch * fix: clear test * test: update snapshot * test: update test case * chore: add rtl * chore: back of warning * test: more test case * test: more test case * test: update snapshot * test: find * chore: picker test * chore: tmp of it * chore: selection * chore: multiple values * chore: multiple style * chore: not trigger change when opened * test: add test case * test: add test case * chore: clean types * chore: clean up * clean up * clean up * chore: merge code * test: coverage * chore: refactoring * chore: refactoring * chore: fix more ts * chore: ts part * refactor: move hooks * refactor: move hooks * refactor: move util * refactor: move index * refactor: move trigger * refactor: move part panels * refactor: move part panels * fix: link code * refactor: clean up * refactor: move picker * refactor: move picker hooks * refactor: move picker popup * refactor: move picker seletor hooks * refactor: placement pass support * test: coverage * test: coverage * docs: fix demo * refactor: fix demo * docs: more demo * chore: fix break * fix: pickerProps logic * chore: clean up * test: coverage * test: coverage * refactor: hover values * refactor: split hover * chore: support hover * chore: clean up * chore: coverage
1 parent 09b3ab1 commit 781b32c

File tree

148 files changed

+15564
-12956
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

148 files changed

+15564
-12956
lines changed

‎assets/index.less‎

Lines changed: 85 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44

55
@input-placeholder-color: hsv(0, 0, 75%);
66

7+
@time-panel-padding-total: 180px;
8+
// @time-panel-padding-top: 90px;
9+
@time-panel-padding-top: 0;
10+
711
.placeholder(@color: @input-placeholder-color) {
812
// Firefox
913
&::-moz-placeholder {
@@ -20,6 +24,7 @@
2024
}
2125

2226
.@{prefix-cls} {
27+
position: relative;
2328
display: inline-flex;
2429

2530
&-rtl {
@@ -29,6 +34,9 @@
2934
&-focused {
3035
border: 1px solid blue;
3136
}
37+
&-invalid {
38+
box-shadow: 0 0 2px red;
39+
}
3240
&-panel {
3341
display: inline-block;
3442
vertical-align: top;
@@ -115,6 +123,11 @@
115123
&-in-range > &-inner {
116124
background: fade(blue, 5%);
117125
}
126+
127+
&-hover > &-inner {
128+
background: orange;
129+
}
130+
118131
&-range-hover-start,
119132
&-range-hover-end,
120133
&-range-hover {
@@ -249,15 +262,39 @@
249262
width: auto;
250263

251264
.@{prefix-cls}-content {
265+
position: relative;
252266
display: flex;
253267
max-height: 200px;
268+
269+
// &::after {
270+
// position: absolute;
271+
// top: @time-panel-padding-top;
272+
// right: -5px;
273+
// left: -5px;
274+
// height: 20px;
275+
// background: rgba(255, 0, 0, 0.05);
276+
// content: '';
277+
// pointer-events: none;
278+
// }
279+
}
280+
281+
&-column-holder {
282+
display: flex;
283+
flex-direction: column;
284+
text-align: center;
285+
}
286+
287+
&-column-title {
288+
font-size: 14px;
289+
line-height: 20px;
254290
}
255291

256292
&-column {
257-
flex: none;
293+
flex: auto;
258294
width: 50px;
259295
margin: 0;
260-
padding: 0 0 180px 0;
296+
// padding: 0 0 180px 0;
297+
padding: @time-panel-padding-top 0 (@time-panel-padding-total - @time-panel-padding-top);
261298
overflow-x: hidden;
262299
overflow-y: hidden;
263300
font-size: 12px;
@@ -274,6 +311,7 @@
274311
}
275312

276313
> li {
314+
width: 50px;
277315
margin: 0;
278316
padding: 0;
279317
cursor: pointer;
@@ -282,17 +320,21 @@
282320
&-disabled {
283321
opacity: 0.5;
284322
}
323+
324+
&-selected {
325+
background: rgba(0, 0, 255, 0.5);
326+
}
285327
}
286328

287329
.@{prefix-cls}-time-panel-cell-inner {
288330
display: block;
289331
width: 100%;
290332
height: 20px;
291333
margin: 0;
292-
padding: 0 0 0 12px;
334+
// padding: 0 0 0 12px;
293335
color: #333;
294336
line-height: 20px;
295-
text-align: left;
337+
text-align: center;
296338

297339
.@{prefix-cls}-panel-rtl & {
298340
padding: 0 12px 0 0;
@@ -339,6 +381,12 @@
339381
text-align: right;
340382
}
341383

384+
&-active {
385+
> input {
386+
background: rgba(0, 0, 255, 0.05);
387+
}
388+
}
389+
342390
> input {
343391
width: 100%;
344392
.placeholder();
@@ -371,6 +419,7 @@
371419
&-dropdown {
372420
position: absolute;
373421
box-shadow: 0 0 1px red;
422+
pointer-events: none;
374423

375424
&-range {
376425
padding: 10px 0;
@@ -393,7 +442,7 @@
393442
&-placement-bottomLeft,
394443
&-placement-bottomright {
395444
.@{prefix-cls}-range-arrow {
396-
top: @arrow-size / 2 + 1px;
445+
top: (@arrow-size / 2 + 1px);
397446
transform: rotate(-45deg);
398447
}
399448
}
@@ -433,7 +482,7 @@
433482
&::before {
434483
width: @arrow-size;
435484
height: @arrow-size;
436-
border: @arrow-size / 2 solid blue;
485+
border: (@arrow-size / 2) solid blue;
437486
border-color: blue blue transparent transparent;
438487
}
439488
&::after {
@@ -476,11 +525,41 @@
476525
display: inline-block;
477526
vertical-align: top;
478527
transition: margin 0.3s;
528+
pointer-events: all;
479529
}
480530

481531
&-panel-layout {
482532
display: flex;
483533
flex-wrap: nowrap;
484534
align-items: stretch;
485535
}
536+
537+
// ========================================================
538+
// = Overflow =
539+
// ========================================================
540+
&-selector {
541+
width: 100%;
542+
}
543+
544+
&-selection-overflow {
545+
display: flex;
546+
flex-wrap: wrap;
547+
box-sizing: border-box;
548+
width: 100%;
549+
border: 1px solid green;
550+
551+
&-item {
552+
flex: none;
553+
max-width: 100%;
554+
}
555+
}
556+
557+
&-selection-item {
558+
border: 1px solid blue;
559+
}
560+
561+
&-multiple-input {
562+
width: 10px;
563+
opacity: 0.1;
564+
}
486565
}

‎docs/demo/debug.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: debug
3+
nav:
4+
title: Demo
5+
path: /demo
6+
---
7+
8+
<code src="../examples/debug.tsx"></code>

‎docs/examples/basic.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
import React from 'react';
21
import type { Moment } from 'moment';
32
import moment from 'moment';
4-
import Picker from '../../src/Picker';
3+
import React from 'react';
4+
import '../../assets/index.less';
5+
import { Picker, type PickerRef } from '../../src';
56
import momentGenerateConfig from '../../src/generate/moment';
6-
import zhCN from '../../src/locale/zh_CN';
77
import enUS from '../../src/locale/en_US';
8-
import '../../assets/index.less';
8+
import zhCN from '../../src/locale/zh_CN';
99

1010
// const defaultValue = moment('2019-09-03 05:02:03');
1111
const defaultValue = moment('2019-11-28 01:02:03');
1212

1313
export default () => {
1414
const [value, setValue] = React.useState<Moment | null>(defaultValue);
15-
const weekRef = React.useRef<Picker<Moment>>(null);
15+
const weekRef = React.useRef<PickerRef>(null);
1616

1717
const onSelect = (newValue: Moment) => {
1818
console.log('Select:', newValue);
@@ -36,7 +36,7 @@ export default () => {
3636
{
3737
label: 'Now',
3838
value: () => moment(),
39-
}
39+
},
4040
],
4141
};
4242

‎docs/examples/calendar.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1+
import type { Moment } from 'moment';
12
import React from 'react';
2-
import { Moment } from 'moment';
3-
import Picker from '../../src/Picker';
4-
import PickerPanel from '../../src/PickerPanel';
3+
import '../../assets/index.less';
4+
import { Picker, PickerPanel } from '../../src';
55
import momentGenerateConfig from '../../src/generate/moment';
66
import zhCN from '../../src/locale/zh_CN';
7-
import '../../assets/index.less';
87
import './calendar.less';
98

109
function dateRender(date: Moment, today: Moment) {

‎docs/examples/cellRender.tsx‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,9 @@ import type { Moment } from 'moment';
22
import moment from 'moment';
33
import React from 'react';
44
import '../../assets/index.less';
5+
import { Picker, RangePicker } from '../../src';
56
import momentGenerateConfig from '../../src/generate/moment';
67
import zhCN from '../../src/locale/zh_CN';
7-
import Picker from '../../src/Picker';
8-
import RangePicker from '../../src/RangePicker';
98

109
const defaultValue = moment('2019-11-28 01:02:03');
1110

@@ -23,7 +22,6 @@ export default () => {
2322
defaultEndValue,
2423
]);
2524

26-
2725
const onSelect = (newValue: Moment) => {
2826
console.log('Select:', newValue);
2927
};
@@ -46,7 +44,10 @@ export default () => {
4644
],
4745
};
4846

49-
const onRangeChange = (newValue: [Moment | null, Moment | null] | null, formatStrings?: string[]) => {
47+
const onRangeChange = (
48+
newValue: [Moment | null, Moment | null] | null,
49+
formatStrings?: string[],
50+
) => {
5051
console.log('Change:', newValue, formatStrings);
5152
setRangeValue(newValue);
5253
};
@@ -66,7 +67,7 @@ export default () => {
6667
<Picker<Moment>
6768
{...sharedProps}
6869
locale={zhCN}
69-
cellRender={(current, info) =>
70+
cellRender={(current: Moment, info) =>
7071
React.cloneElement(
7172
info.originNode,
7273
{
@@ -79,7 +80,7 @@ export default () => {
7980
<Picker<Moment>
8081
{...sharedProps}
8182
locale={zhCN}
82-
cellRender={(current, info) =>
83+
cellRender={(current: Moment, info) =>
8384
React.cloneElement(
8485
info.originNode,
8586
{
@@ -93,7 +94,7 @@ export default () => {
9394
{...sharedProps}
9495
locale={zhCN}
9596
picker="week"
96-
cellRender={(current, info) =>
97+
cellRender={(current: Moment, info) =>
9798
React.cloneElement(
9899
info.originNode,
99100
{
@@ -107,7 +108,7 @@ export default () => {
107108
{...sharedProps}
108109
locale={zhCN}
109110
picker="year"
110-
cellRender={(current, info) =>
111+
cellRender={(current: Moment, info) =>
111112
React.cloneElement(
112113
info.originNode,
113114
{
@@ -121,7 +122,7 @@ export default () => {
121122
{...sharedProps}
122123
locale={zhCN}
123124
picker="month"
124-
cellRender={(current, info) =>
125+
cellRender={(current: Moment, info) =>
125126
React.cloneElement(
126127
info.originNode,
127128
{
@@ -135,7 +136,7 @@ export default () => {
135136
{...sharedProps}
136137
locale={zhCN}
137138
picker="quarter"
138-
cellRender={(current, info) =>
139+
cellRender={(current: Moment, info) =>
139140
React.cloneElement(
140141
info.originNode,
141142
{
@@ -162,17 +163,23 @@ export default () => {
162163
</div>
163164
<div style={{ margin: '0 8px' }}>
164165
<h3>Range</h3>
165-
<h4>RangeValue: {rangeValue ? `${formatDate(rangeValue[0])} ~ ${formatDate(rangeValue[1])}` : 'null'}</h4>
166+
<h4>
167+
RangeValue:{' '}
168+
{rangeValue ? `${formatDate(rangeValue[0])} ~ ${formatDate(rangeValue[1])}` : 'null'}
169+
</h4>
166170
<RangePicker<Moment>
167171
{...rangeSharedProps}
168172
locale={zhCN}
169173
allowClear
170174
showTime
171175
style={{ width: 580 }}
172-
cellRender={(current, info) => {
176+
cellRender={(current: Moment, info) => {
173177
return (
174-
<div title={info.type} style={{ background: info.type === 'time' ? 'green' : 'yellow' }}>
175-
{info.type === "time" ? current : current.get('date')}
178+
<div
179+
title={info.type}
180+
style={{ background: info.type === 'time' ? 'green' : 'yellow' }}
181+
>
182+
{info.type === 'time' ? current : current.get('date')}
176183
</div>
177184
);
178185
}}

0 commit comments

Comments
 (0)