@toptal/picasso-timepicker 100.0.3 → 100.0.4-alpha-pf-react-19-improvements-970580a42.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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/TimePicker/TimePicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;
|
|
1
|
+
{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/TimePicker/TimePicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAGvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;AAG5D,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,IAAI,CACF,UAAU,EACR,IAAI,GACJ,OAAO,GACP,UAAU,GACV,UAAU,GACV,MAAM,GACN,WAAW,GACX,MAAM,GACN,cAAc,GACd,MAAM,GACN,MAAM,GACN,cAAc,GACd,SAAS,GACT,cAAc,GACd,gBAAgB,GAChB,oBAAoB,GACpB,SAAS,GACT,OAAO,GACP,aAAa,GACb,QAAQ,CACX;IACH,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gFAAgF;IAChF,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAA;IACzD,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAID,eAAO,MAAM,UAAU;2BAAsC,KAAK;;CAoEjE,CAAA;AAID,eAAe,UAAU,CAAA"}
|
|
@@ -10,8 +10,6 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import React, { useEffect, useState } from 'react';
|
|
13
|
-
import InputMask from 'react-input-mask';
|
|
14
|
-
import { detect } from 'detect-browser';
|
|
15
13
|
import { Input } from '@toptal/picasso-input';
|
|
16
14
|
import { Time16 } from '@toptal/picasso-icons';
|
|
17
15
|
import { twMerge } from '@toptal/picasso-tailwind-merge';
|
|
@@ -36,25 +34,12 @@ export const TimePicker = (_a) => {
|
|
|
36
34
|
externalOnChange === null || externalOnChange === void 0 ? void 0 : externalOnChange('');
|
|
37
35
|
}
|
|
38
36
|
};
|
|
39
|
-
const browser = detect();
|
|
40
|
-
const isSafari = (browser === null || browser === void 0 ? void 0 : browser.name) === 'safari';
|
|
41
|
-
const startsWithTwo = value && value[0] === '2';
|
|
42
|
-
const inputMask = [
|
|
43
|
-
/[0-2]/,
|
|
44
|
-
startsWithTwo ? /[0-3]/ : /[0-9]/,
|
|
45
|
-
':',
|
|
46
|
-
/[0-5]/,
|
|
47
|
-
/[0-9]/,
|
|
48
|
-
];
|
|
49
37
|
const icon = (React.createElement(Time16, { classes: {
|
|
50
38
|
root: 'bg-white absolute right-[0.625rem] pointer-events-none m-0 select-none',
|
|
51
39
|
} }));
|
|
52
40
|
const inputClassName = twMerge('cursor-default', className);
|
|
53
41
|
const inputPropClassName = `-mr-[8px] [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:right-2
|
|
54
42
|
[&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:bg-none`;
|
|
55
|
-
if (isSafari) {
|
|
56
|
-
return (React.createElement(Input, { type: 'text', readOnly: true, iconPosition: 'end', icon: icon, width: width, status: status, className: inputClassName, highlight: highlight, size: size, inputProps: Object.assign({ className: inputPropClassName }, rest), startAdornment: React.createElement(InputMask, { mask: inputMask, alwaysShowMask: true, maskPlaceholder: '-', value: value, onChange: onChange, className: 'text-sm border-none p-0 m-0 outline-hidden' }) }));
|
|
57
|
-
}
|
|
58
43
|
return (React.createElement(Input, { type: 'time', value: value, className: inputClassName, onChange: onChange, iconPosition: 'end', highlight: highlight, icon: icon, width: width, size: size, status: status, inputProps: Object.assign({ className: inputPropClassName, step: 60 }, rest) }));
|
|
59
44
|
};
|
|
60
45
|
TimePicker.displayName = 'TimePicker';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimePicker.js","sourceRoot":"","sources":["../../../src/TimePicker/TimePicker.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,
|
|
1
|
+
{"version":3,"file":"TimePicker.js","sourceRoot":"","sources":["../../../src/TimePicker/TimePicker.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAG9C,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAkCxD,MAAM,gBAAgB,GAAG,IAAI,MAAM,CAAC,kCAAkC,CAAC,CAAA;AAEvE,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAuC,EAAE,EAAE;QAA3C,EAAE,MAAM,GAAG,SAAS,OAAmB,EAAd,KAAK,cAA9B,UAAgC,CAAF;IACvD,MAAM,EACJ,QAAQ,EAAE,gBAAgB,EAC1B,KAAK,EAAE,aAAa,EACpB,KAAK,EACL,SAAS,EACT,SAAS,EACT,IAAI,KAEF,KAAK,EADJ,IAAI,UACL,KAAK,EARH,gEAQL,CAAQ,CAAA;IAET,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA;IAEjD,SAAS,CAAC,GAAG,EAAE;QACb,uEAAuE;QACvE,IAAI,aAAa,IAAI,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC;YAC1D,QAAQ,CAAC,aAAa,CAAC,CAAA;QACzB,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAEnB,MAAM,QAAQ,GAAG,CACf,KAEC,EACD,EAAE;QACF,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAA;QAEnC,QAAQ,CAAC,QAAQ,CAAC,CAAA;QAElB,IAAI,QAAQ,IAAI,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAChD,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,QAAQ,CAAC,CAAA;QAC9B,CAAC;aAAM,CAAC;YACN,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,EAAE,CAAC,CAAA;QACxB,CAAC;IACH,CAAC,CAAA;IAED,MAAM,IAAI,GAAG,CACX,oBAAC,MAAM,IACL,OAAO,EAAE;YACP,IAAI,EAAE,wEAAwE;SAC/E,GACD,CACH,CAAA;IAED,MAAM,cAAc,GAAG,OAAO,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAA;IAE3D,MAAM,kBAAkB,GAAG;yGAC4E,CAAA;IAEvG,OAAO,CACL,oBAAC,KAAK,IACJ,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,cAAc,EACzB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAC,KAAK,EAClB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,UAAU,kBACR,SAAS,EAAE,kBAAkB,EAC7B,IAAI,EAAE,EAAE,IACL,IAAI,IAET,CACH,CAAA;AACH,CAAC,CAAA;AAED,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,eAAe,UAAU,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-timepicker",
|
|
3
|
-
"version": "100.0.
|
|
3
|
+
"version": "100.0.4-alpha-pf-react-19-improvements-970580a42.0",
|
|
4
4
|
"description": "Toptal UI components library - Timepicker",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -18,27 +18,25 @@
|
|
|
18
18
|
},
|
|
19
19
|
"homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"@toptal/picasso-
|
|
24
|
-
"@toptal/picasso-
|
|
25
|
-
"@toptal/picasso-outlined-input": "100.1.0",
|
|
26
|
-
"@toptal/picasso-utils": "100.0.1"
|
|
21
|
+
"@toptal/picasso-input": "100.0.4-alpha-pf-react-19-improvements-970580a42.0",
|
|
22
|
+
"@toptal/picasso-utils": "100.0.2-alpha-pf-react-19-improvements-970580a42.0",
|
|
23
|
+
"@toptal/picasso-outlined-input": "100.1.1-alpha-pf-react-19-improvements-970580a42.0",
|
|
24
|
+
"@toptal/picasso-icons": "100.0.2-alpha-pf-react-19-improvements-970580a42.0"
|
|
27
25
|
},
|
|
28
26
|
"sideEffects": [
|
|
29
27
|
"**/styles.ts",
|
|
30
28
|
"**/styles.js"
|
|
31
29
|
],
|
|
32
30
|
"peerDependencies": {
|
|
33
|
-
"react": "
|
|
34
|
-
"@toptal/picasso-tailwind-merge": "^100.0.0",
|
|
35
|
-
"@toptal/picasso-tailwind": "^100.0.0"
|
|
31
|
+
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
32
|
+
"@toptal/picasso-tailwind-merge": "^100.0.1-alpha-pf-react-19-improvements-970580a42.0",
|
|
33
|
+
"@toptal/picasso-tailwind": "^100.0.1-alpha-pf-react-19-improvements-970580a42.0"
|
|
36
34
|
},
|
|
37
35
|
"exports": {
|
|
38
36
|
".": "./dist-package/src/index.js"
|
|
39
37
|
},
|
|
40
38
|
"devDependencies": {
|
|
41
|
-
"@toptal/picasso-test-utils": "100.1.0"
|
|
39
|
+
"@toptal/picasso-test-utils": "100.1.1-alpha-pf-react-19-improvements-970580a42.0"
|
|
42
40
|
},
|
|
43
41
|
"files": [
|
|
44
42
|
"dist-package/**",
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import React, { useEffect, useState } from 'react'
|
|
2
2
|
import type { BaseProps } from '@toptal/picasso-shared'
|
|
3
|
-
import InputMask from 'react-input-mask'
|
|
4
|
-
import { detect } from 'detect-browser'
|
|
5
3
|
import { Input } from '@toptal/picasso-input'
|
|
6
4
|
import { Time16 } from '@toptal/picasso-icons'
|
|
7
5
|
import type { InputProps } from '@toptal/picasso-input'
|
|
@@ -78,18 +76,6 @@ export const TimePicker = ({ status = 'default', ...props }: Props) => {
|
|
|
78
76
|
}
|
|
79
77
|
}
|
|
80
78
|
|
|
81
|
-
const browser = detect()
|
|
82
|
-
const isSafari = browser?.name === 'safari'
|
|
83
|
-
const startsWithTwo = value && value[0] === '2'
|
|
84
|
-
|
|
85
|
-
const inputMask = [
|
|
86
|
-
/[0-2]/,
|
|
87
|
-
startsWithTwo ? /[0-3]/ : /[0-9]/,
|
|
88
|
-
':',
|
|
89
|
-
/[0-5]/,
|
|
90
|
-
/[0-9]/,
|
|
91
|
-
]
|
|
92
|
-
|
|
93
79
|
const icon = (
|
|
94
80
|
<Time16
|
|
95
81
|
classes={{
|
|
@@ -103,36 +89,6 @@ export const TimePicker = ({ status = 'default', ...props }: Props) => {
|
|
|
103
89
|
const inputPropClassName = `-mr-[8px] [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:right-2
|
|
104
90
|
[&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:bg-none`
|
|
105
91
|
|
|
106
|
-
if (isSafari) {
|
|
107
|
-
return (
|
|
108
|
-
<Input
|
|
109
|
-
type='text'
|
|
110
|
-
readOnly
|
|
111
|
-
iconPosition='end'
|
|
112
|
-
icon={icon}
|
|
113
|
-
width={width}
|
|
114
|
-
status={status}
|
|
115
|
-
className={inputClassName}
|
|
116
|
-
highlight={highlight}
|
|
117
|
-
size={size}
|
|
118
|
-
inputProps={{
|
|
119
|
-
className: inputPropClassName,
|
|
120
|
-
...rest,
|
|
121
|
-
}}
|
|
122
|
-
startAdornment={
|
|
123
|
-
<InputMask
|
|
124
|
-
mask={inputMask}
|
|
125
|
-
alwaysShowMask
|
|
126
|
-
maskPlaceholder='-'
|
|
127
|
-
value={value}
|
|
128
|
-
onChange={onChange}
|
|
129
|
-
className={'text-sm border-none p-0 m-0 outline-hidden'}
|
|
130
|
-
/>
|
|
131
|
-
}
|
|
132
|
-
/>
|
|
133
|
-
)
|
|
134
|
-
}
|
|
135
|
-
|
|
136
92
|
return (
|
|
137
93
|
<Input
|
|
138
94
|
type='time'
|