@canvas-components/react-components 0.1.1 → 0.1.5
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 +168 -0
- package/dist/index.cjs +936 -309
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +286 -2
- package/dist/index.d.ts +286 -2
- package/dist/index.js +712 -110
- package/dist/index.js.map +1 -1
- package/package.json +7 -3
package/dist/index.js
CHANGED
|
@@ -1,17 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { forwardRef, useRef, useEffect, useImperativeHandle, createContext, useState, useMemo, useLayoutEffect, useContext } from 'react';
|
|
2
3
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
3
4
|
import { createPortal } from 'react-dom';
|
|
4
5
|
|
|
5
|
-
// src/components/checkbox/index.tsx
|
|
6
|
-
|
|
7
|
-
// src/shared/class-names.ts
|
|
8
|
-
function joinClassNames(...values) {
|
|
9
|
-
return values.filter(Boolean).join(" ");
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
// src/shared/prefix.ts
|
|
13
|
-
var REACT_COMPONENT_PREFIX = "canvas-react";
|
|
14
|
-
|
|
15
6
|
// #style-inject:#style-inject
|
|
16
7
|
function styleInject(css, { insertAt } = {}) {
|
|
17
8
|
if (!css || typeof document === "undefined") return;
|
|
@@ -34,6 +25,17 @@ function styleInject(css, { insertAt } = {}) {
|
|
|
34
25
|
}
|
|
35
26
|
}
|
|
36
27
|
|
|
28
|
+
// src/styles/variables.css
|
|
29
|
+
styleInject(":root {\n --canvas-react-color-primary: #1677ff;\n --canvas-react-color-primary-hover: #4096ff;\n --canvas-react-color-border: #d9d9d9;\n --canvas-react-color-border-strong: #bfbfbf;\n --canvas-react-color-text: #1f2937;\n --canvas-react-color-text-muted: #6b7280;\n --canvas-react-color-bg: #ffffff;\n --canvas-react-color-bg-soft: #f5f5f5;\n --canvas-react-color-bg-hover: #f3f4f6;\n --canvas-react-color-bg-active: #e6f4ff;\n --canvas-react-shadow-focus: 0 0 0 2px rgba(22, 119, 255, 0.12);\n --canvas-react-shadow-popup: 0 8px 24px rgba(15, 23, 42, 0.16);\n --canvas-react-radius-sm: 6px;\n --canvas-react-radius-md: 8px;\n --canvas-react-control-height: 32px;\n --canvas-react-font-size: 14px;\n --canvas-react-control-padding-inline: 11px;\n --canvas-react-control-padding-block: 0px;\n --canvas-react-content-zoom: 1;\n}\n");
|
|
30
|
+
|
|
31
|
+
// src/shared/class-names.ts
|
|
32
|
+
function joinClassNames(...values) {
|
|
33
|
+
return values.filter(Boolean).join(" ");
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// src/shared/prefix.ts
|
|
37
|
+
var REACT_COMPONENT_PREFIX = "canvas-react";
|
|
38
|
+
|
|
37
39
|
// src/components/checkbox/style.css
|
|
38
40
|
styleInject('@import "../../styles/variables.css";\n.canvas-react-checkbox {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n cursor: pointer;\n user-select: none;\n}\n.canvas-react-checkbox-disabled {\n opacity: 0.56;\n cursor: not-allowed;\n}\n.canvas-react-checkbox-input {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n.canvas-react-checkbox-box {\n position: relative;\n flex: none;\n width: 16px;\n height: 16px;\n box-sizing: border-box;\n border: 1px solid var(--canvas-react-color-border-strong);\n border-radius: 4px;\n background: var(--canvas-react-color-bg);\n transition:\n border-color 0.2s ease,\n background-color 0.2s ease,\n box-shadow 0.2s ease;\n}\n.canvas-react-checkbox:hover .canvas-react-checkbox-box {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-checkbox-input:focus-visible + .canvas-react-checkbox-box {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-checkbox-checked .canvas-react-checkbox-box,\n.canvas-react-checkbox-indeterminate .canvas-react-checkbox-box {\n border-color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-primary);\n}\n.canvas-react-checkbox-box::after {\n position: absolute;\n content: "";\n opacity: 0;\n box-sizing: border-box;\n transform: scale(0);\n transition: opacity 0.2s ease, transform 0.2s ease;\n}\n.canvas-react-checkbox-checked .canvas-react-checkbox-box::after {\n top: 50%;\n left: 22%;\n width: 5.5px;\n height: 9px;\n border-right: 2px solid #fff;\n border-bottom: 2px solid #fff;\n transform: translateY(-58%) rotate(45deg) scale(1);\n transform-origin: center;\n opacity: 1;\n}\n.canvas-react-checkbox-indeterminate .canvas-react-checkbox-box::after {\n top: 50%;\n left: 50%;\n width: 8px;\n border-bottom: 2px solid #fff;\n transform: translate(-50%, -50%);\n opacity: 1;\n}\n.canvas-react-checkbox-label {\n min-width: 0;\n}\n');
|
|
39
41
|
var ReactCheckbox = forwardRef(
|
|
@@ -91,7 +93,7 @@ var ReactCheckbox = forwardRef(
|
|
|
91
93
|
);
|
|
92
94
|
|
|
93
95
|
// src/components/input/style.css
|
|
94
|
-
styleInject('@import "../../styles/variables.css";\n.canvas-react-input-affix-wrapper {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-input-affix-wrapper:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-input-affix-wrapper:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-input-affix-wrapper-disabled {\n background: #fafafa;\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-input {\n box-sizing: border-box;\n flex: 1 1 auto;\n width: 100%;\n min-width: 0;\n height: 100%;\n padding:
|
|
96
|
+
styleInject('@import "../../styles/variables.css";\n.canvas-react-input-affix-wrapper {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-input-affix-wrapper:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-input-affix-wrapper:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-input-affix-wrapper-disabled {\n background: #fafafa;\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-input {\n box-sizing: border-box;\n flex: 1 1 auto;\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n border: none;\n background: transparent;\n color: inherit;\n font-size: inherit;\n outline: none;\n}\n.canvas-react-input::placeholder {\n color: #9ca3af;\n}\n.canvas-react-input-suffix {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding-right: var(--canvas-react-control-padding-inline, 11px);\n}\n.canvas-react-input-clear {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-input-affix-wrapper:hover .canvas-react-input-clear,\n.canvas-react-input-affix-wrapper:focus-within .canvas-react-input-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-input-clear:hover {\n color: #6b7280;\n transform: rotate(90deg);\n}\n.canvas-react-input-clear-icon,\n.canvas-react-input-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-input-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-input-clear-icon::before {\n transform: rotate(90deg);\n}\n');
|
|
95
97
|
var ReactInput = forwardRef(
|
|
96
98
|
function ReactInput2(props, ref) {
|
|
97
99
|
const {
|
|
@@ -173,9 +175,113 @@ var ReactInput = forwardRef(
|
|
|
173
175
|
}
|
|
174
176
|
}
|
|
175
177
|
);
|
|
178
|
+
var DEFAULT_CONTENT_SCALE = {
|
|
179
|
+
scale: 1
|
|
180
|
+
};
|
|
181
|
+
var ReactContentScaleContext = createContext(DEFAULT_CONTENT_SCALE);
|
|
182
|
+
function ReactContentScaleProvider(props) {
|
|
183
|
+
const { children, scale = 1 } = props;
|
|
184
|
+
const value = useMemo(() => {
|
|
185
|
+
const nextScale = typeof scale === "number" && Number.isFinite(scale) && scale > 0 ? scale : 1;
|
|
186
|
+
return { scale: nextScale };
|
|
187
|
+
}, [scale]);
|
|
188
|
+
return /* @__PURE__ */ jsx(ReactContentScaleContext.Provider, { value, children });
|
|
189
|
+
}
|
|
190
|
+
function useReactContentScale() {
|
|
191
|
+
return useContext(ReactContentScaleContext);
|
|
192
|
+
}
|
|
193
|
+
function toContentLayoutSize(size, scale) {
|
|
194
|
+
const nextScale = typeof scale === "number" && Number.isFinite(scale) && scale > 0 ? scale : 1;
|
|
195
|
+
if (nextScale === 1) {
|
|
196
|
+
return size;
|
|
197
|
+
}
|
|
198
|
+
return size / nextScale;
|
|
199
|
+
}
|
|
200
|
+
function useReactTransition(options) {
|
|
201
|
+
const {
|
|
202
|
+
appear = true,
|
|
203
|
+
duration = 0,
|
|
204
|
+
name = "canvas-react-transition",
|
|
205
|
+
show
|
|
206
|
+
} = options;
|
|
207
|
+
const enterDuration = resolveDuration(duration, "enter");
|
|
208
|
+
const leaveDuration = resolveDuration(duration, "leave");
|
|
209
|
+
const previousShowRef = useRef(show);
|
|
210
|
+
const [rendered, setRendered] = useState(show);
|
|
211
|
+
const [phase, setPhase] = useState(() => {
|
|
212
|
+
if (!show) {
|
|
213
|
+
return "leave-to";
|
|
214
|
+
}
|
|
215
|
+
return appear ? "enter-from" : "entered";
|
|
216
|
+
});
|
|
217
|
+
useLayoutEffect(() => {
|
|
218
|
+
if (previousShowRef.current === show) {
|
|
219
|
+
return;
|
|
220
|
+
}
|
|
221
|
+
previousShowRef.current = show;
|
|
222
|
+
if (show) {
|
|
223
|
+
setRendered(true);
|
|
224
|
+
setPhase("enter-from");
|
|
225
|
+
return;
|
|
226
|
+
}
|
|
227
|
+
setPhase("leave-from");
|
|
228
|
+
}, [show]);
|
|
229
|
+
useLayoutEffect(() => {
|
|
230
|
+
let firstFrameId = null;
|
|
231
|
+
let secondFrameId = null;
|
|
232
|
+
let timerId = null;
|
|
233
|
+
if (phase === "enter-from" || phase === "leave-from") {
|
|
234
|
+
firstFrameId = window.requestAnimationFrame(() => {
|
|
235
|
+
secondFrameId = window.requestAnimationFrame(() => {
|
|
236
|
+
setPhase(phase === "enter-from" ? "enter-to" : "leave-to");
|
|
237
|
+
});
|
|
238
|
+
});
|
|
239
|
+
} else if (phase === "enter-to") {
|
|
240
|
+
timerId = window.setTimeout(() => {
|
|
241
|
+
setPhase("entered");
|
|
242
|
+
}, enterDuration);
|
|
243
|
+
} else if (phase === "leave-to" && rendered) {
|
|
244
|
+
timerId = window.setTimeout(() => {
|
|
245
|
+
setRendered(false);
|
|
246
|
+
}, leaveDuration);
|
|
247
|
+
}
|
|
248
|
+
return () => {
|
|
249
|
+
if (firstFrameId !== null) {
|
|
250
|
+
window.cancelAnimationFrame(firstFrameId);
|
|
251
|
+
}
|
|
252
|
+
if (secondFrameId !== null) {
|
|
253
|
+
window.cancelAnimationFrame(secondFrameId);
|
|
254
|
+
}
|
|
255
|
+
if (timerId !== null) {
|
|
256
|
+
window.clearTimeout(timerId);
|
|
257
|
+
}
|
|
258
|
+
};
|
|
259
|
+
}, [enterDuration, leaveDuration, phase, rendered]);
|
|
260
|
+
return {
|
|
261
|
+
className: resolveTransitionClassName(name, phase),
|
|
262
|
+
phase,
|
|
263
|
+
rendered
|
|
264
|
+
};
|
|
265
|
+
}
|
|
266
|
+
function ReactTransition(props) {
|
|
267
|
+
const { children, ...options } = props;
|
|
268
|
+
const state = useReactTransition(options);
|
|
269
|
+
return state.rendered ? children(state) : null;
|
|
270
|
+
}
|
|
271
|
+
function resolveTransitionClassName(name, phase) {
|
|
272
|
+
if (phase === "entered") {
|
|
273
|
+
return void 0;
|
|
274
|
+
}
|
|
275
|
+
const direction = phase.startsWith("enter") ? "enter" : "leave";
|
|
276
|
+
return `${name}-${phase} ${name}-${direction}-active`;
|
|
277
|
+
}
|
|
278
|
+
function resolveDuration(duration, direction) {
|
|
279
|
+
const value = typeof duration === "number" ? duration : duration[direction] ?? 0;
|
|
280
|
+
return Number.isFinite(value) && value > 0 ? value : 0;
|
|
281
|
+
}
|
|
176
282
|
|
|
177
283
|
// src/components/popup/style.css
|
|
178
|
-
styleInject('@import "../../styles/variables.css";\n.canvas-react-popup {\n position: fixed;\n z-index: 1200;\n box-sizing: border-box;\n pointer-events: auto;\n}\n.canvas-react-popup-surface {\n overflow: hidden;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-md);\n background: var(--canvas-react-color-bg);\n box-shadow: var(--canvas-react-shadow-popup);\n transform-origin: top center;\n transition: opacity 0.18s ease, transform 0.18s
|
|
284
|
+
styleInject('@import "../../styles/variables.css";\n.canvas-react-popup {\n position: fixed;\n z-index: 1200;\n box-sizing: border-box;\n pointer-events: auto;\n}\n.canvas-react-popup-surface {\n overflow: hidden;\n border: 1px solid var(--canvas-react-color-border, #d9d9d9);\n border-radius: var(--canvas-react-radius-md, 8px);\n background: var(--canvas-react-color-bg, #ffffff);\n box-shadow: var( --canvas-react-shadow-popup, 0 8px 24px rgba(15, 23, 42, 0.16) );\n transform-origin: top center;\n}\n.canvas-react-popup-surface-enter-active,\n.canvas-react-popup-surface-leave-active {\n transition: opacity 0.18s ease-out, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);\n}\n.canvas-react-popup-surface-enter-from,\n.canvas-react-popup-surface-leave-to {\n opacity: 0;\n transform: translateY(-6px) scale(0.98);\n}\n.canvas-react-popup-surface-enter-to,\n.canvas-react-popup-surface-leave-from {\n opacity: 1;\n transform: translate(0) scale(1);\n}\n.canvas-react-popup[data-placement^=top] .canvas-react-popup-surface {\n transform-origin: bottom center;\n}\n.canvas-react-popup[data-placement^=top] .canvas-react-popup-surface-enter-from,\n.canvas-react-popup[data-placement^=top] .canvas-react-popup-surface-leave-to {\n transform: translateY(6px) scale(0.98);\n}\n.canvas-react-popup[data-placement^=bottom] .canvas-react-popup-surface {\n transform-origin: top center;\n}\n.canvas-react-popup[data-placement^=left] .canvas-react-popup-surface {\n transform-origin: center right;\n}\n.canvas-react-popup[data-placement^=left] .canvas-react-popup-surface-enter-from,\n.canvas-react-popup[data-placement^=left] .canvas-react-popup-surface-leave-to {\n transform: translateX(6px) scale(0.98);\n}\n.canvas-react-popup[data-placement^=right] .canvas-react-popup-surface {\n transform-origin: center left;\n}\n.canvas-react-popup[data-placement^=right] .canvas-react-popup-surface-enter-from,\n.canvas-react-popup[data-placement^=right] .canvas-react-popup-surface-leave-to {\n transform: translateX(-6px) scale(0.98);\n}\n.canvas-react-popup-leave {\n pointer-events: none;\n}\n@media (prefers-reduced-motion: reduce) {\n .canvas-react-popup-surface-enter-active,\n .canvas-react-popup-surface-leave-active {\n transition-duration: 0.01ms;\n }\n}\n');
|
|
179
285
|
var POPUP_MOTION_DURATION = 180;
|
|
180
286
|
function ReactPopup(props) {
|
|
181
287
|
const {
|
|
@@ -194,40 +300,15 @@ function ReactPopup(props) {
|
|
|
194
300
|
surfaceStyle,
|
|
195
301
|
zIndex = 1200
|
|
196
302
|
} = props;
|
|
303
|
+
const { scale: contentScale } = useReactContentScale();
|
|
304
|
+
const transition = useReactTransition({
|
|
305
|
+
duration: POPUP_MOTION_DURATION,
|
|
306
|
+
name: `${REACT_COMPONENT_PREFIX}-popup-surface`,
|
|
307
|
+
show: open
|
|
308
|
+
});
|
|
309
|
+
const { rendered } = transition;
|
|
197
310
|
const [position, setPosition] = useState(null);
|
|
198
|
-
const [rendered, setRendered] = useState(open);
|
|
199
|
-
const [motionState, setMotionState] = useState(
|
|
200
|
-
open ? "entered" : "leave"
|
|
201
|
-
);
|
|
202
311
|
const surfaceRef = useRef(null);
|
|
203
|
-
const timerRef = useRef(null);
|
|
204
|
-
useEffect(() => {
|
|
205
|
-
if (timerRef.current != null) {
|
|
206
|
-
window.clearTimeout(timerRef.current);
|
|
207
|
-
timerRef.current = null;
|
|
208
|
-
}
|
|
209
|
-
if (open) {
|
|
210
|
-
setRendered(true);
|
|
211
|
-
setMotionState("enter");
|
|
212
|
-
const frameId = window.requestAnimationFrame(() => {
|
|
213
|
-
setMotionState("entered");
|
|
214
|
-
});
|
|
215
|
-
return () => {
|
|
216
|
-
window.cancelAnimationFrame(frameId);
|
|
217
|
-
};
|
|
218
|
-
}
|
|
219
|
-
setMotionState("leave");
|
|
220
|
-
timerRef.current = window.setTimeout(() => {
|
|
221
|
-
setRendered(false);
|
|
222
|
-
timerRef.current = null;
|
|
223
|
-
}, POPUP_MOTION_DURATION);
|
|
224
|
-
return () => {
|
|
225
|
-
if (timerRef.current != null) {
|
|
226
|
-
window.clearTimeout(timerRef.current);
|
|
227
|
-
timerRef.current = null;
|
|
228
|
-
}
|
|
229
|
-
};
|
|
230
|
-
}, [open]);
|
|
231
312
|
useLayoutEffect(() => {
|
|
232
313
|
if (!rendered) {
|
|
233
314
|
return;
|
|
@@ -239,14 +320,15 @@ function ReactPopup(props) {
|
|
|
239
320
|
}
|
|
240
321
|
const nextPosition = resolvePopupPosition({
|
|
241
322
|
anchor: nextAnchor,
|
|
323
|
+
contentScale,
|
|
242
324
|
matchAnchorWidth,
|
|
243
325
|
minWidth,
|
|
244
326
|
offset,
|
|
245
327
|
placement,
|
|
246
|
-
popupRect: resolvePopupSurfaceRect(surfaceRef.current)
|
|
328
|
+
popupRect: resolvePopupSurfaceRect(surfaceRef.current, contentScale)
|
|
247
329
|
});
|
|
248
330
|
setPosition((prev) => {
|
|
249
|
-
if (prev?.left === nextPosition.left && prev?.top === nextPosition.top && prev?.width === nextPosition.width && prev?.minWidth === nextPosition.minWidth) {
|
|
331
|
+
if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth) {
|
|
250
332
|
return prev;
|
|
251
333
|
}
|
|
252
334
|
return nextPosition;
|
|
@@ -272,6 +354,7 @@ function ReactPopup(props) {
|
|
|
272
354
|
}, [
|
|
273
355
|
anchorRect,
|
|
274
356
|
anchorRef,
|
|
357
|
+
contentScale,
|
|
275
358
|
matchAnchorWidth,
|
|
276
359
|
minWidth,
|
|
277
360
|
offset,
|
|
@@ -289,14 +372,15 @@ function ReactPopup(props) {
|
|
|
289
372
|
}
|
|
290
373
|
const nextPosition = resolvePopupPosition({
|
|
291
374
|
anchor: nextAnchor,
|
|
375
|
+
contentScale,
|
|
292
376
|
matchAnchorWidth,
|
|
293
377
|
minWidth,
|
|
294
378
|
offset,
|
|
295
379
|
placement,
|
|
296
|
-
popupRect: resolvePopupSurfaceRect(surfaceRef.current)
|
|
380
|
+
popupRect: resolvePopupSurfaceRect(surfaceRef.current, contentScale)
|
|
297
381
|
});
|
|
298
382
|
setPosition((prev) => {
|
|
299
|
-
if (prev?.left === nextPosition.left && prev?.top === nextPosition.top && prev?.width === nextPosition.width && prev?.minWidth === nextPosition.minWidth) {
|
|
383
|
+
if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth) {
|
|
300
384
|
return prev;
|
|
301
385
|
}
|
|
302
386
|
return nextPosition;
|
|
@@ -313,6 +397,7 @@ function ReactPopup(props) {
|
|
|
313
397
|
}, [
|
|
314
398
|
anchorRect,
|
|
315
399
|
anchorRef,
|
|
400
|
+
contentScale,
|
|
316
401
|
matchAnchorWidth,
|
|
317
402
|
minWidth,
|
|
318
403
|
offset,
|
|
@@ -349,27 +434,33 @@ function ReactPopup(props) {
|
|
|
349
434
|
if (!rendered || !position) {
|
|
350
435
|
return null;
|
|
351
436
|
}
|
|
437
|
+
const contentScaleStyle = contentScale !== 1 ? {
|
|
438
|
+
transform: `scale(${contentScale})`,
|
|
439
|
+
transformOrigin: "top left"
|
|
440
|
+
} : void 0;
|
|
352
441
|
return createPortal(
|
|
353
442
|
/* @__PURE__ */ jsx(
|
|
354
443
|
"div",
|
|
355
444
|
{
|
|
356
445
|
className: joinClassNames(
|
|
357
446
|
`${REACT_COMPONENT_PREFIX}-popup`,
|
|
358
|
-
`${REACT_COMPONENT_PREFIX}-popup
|
|
447
|
+
transition.phase.startsWith("leave") && `${REACT_COMPONENT_PREFIX}-popup-leave`,
|
|
359
448
|
className
|
|
360
449
|
),
|
|
361
450
|
style: {
|
|
362
|
-
...position,
|
|
451
|
+
...position.style,
|
|
363
452
|
...style,
|
|
453
|
+
...contentScaleStyle,
|
|
364
454
|
zIndex
|
|
365
455
|
},
|
|
456
|
+
"data-placement": position.placement,
|
|
366
457
|
children: /* @__PURE__ */ jsx(
|
|
367
458
|
"div",
|
|
368
459
|
{
|
|
369
460
|
ref: surfaceRef,
|
|
370
461
|
className: joinClassNames(
|
|
371
462
|
`${REACT_COMPONENT_PREFIX}-popup-surface`,
|
|
372
|
-
|
|
463
|
+
transition.className,
|
|
373
464
|
surfaceClassName
|
|
374
465
|
),
|
|
375
466
|
style: surfaceStyle,
|
|
@@ -382,12 +473,25 @@ function ReactPopup(props) {
|
|
|
382
473
|
);
|
|
383
474
|
}
|
|
384
475
|
function resolvePopupPosition(params) {
|
|
385
|
-
const {
|
|
476
|
+
const {
|
|
477
|
+
anchor,
|
|
478
|
+
contentScale,
|
|
479
|
+
matchAnchorWidth,
|
|
480
|
+
minWidth,
|
|
481
|
+
offset,
|
|
482
|
+
placement,
|
|
483
|
+
popupRect
|
|
484
|
+
} = params;
|
|
386
485
|
const margin = 8;
|
|
387
486
|
const viewportWidth = window.innerWidth;
|
|
388
487
|
const viewportHeight = window.innerHeight;
|
|
389
|
-
const
|
|
390
|
-
const
|
|
488
|
+
const layoutMinWidth = typeof minWidth === "number" ? minWidth : void 0;
|
|
489
|
+
const layoutAnchorWidth = toContentLayoutSize(anchor.width, contentScale);
|
|
490
|
+
const preferredVisualWidth = popupRect?.width ?? Math.max(
|
|
491
|
+
(minWidth ?? 0) * contentScale,
|
|
492
|
+
matchAnchorWidth ? anchor.width : 0
|
|
493
|
+
);
|
|
494
|
+
const popupWidth = preferredVisualWidth;
|
|
391
495
|
const popupHeight = popupRect?.height ?? 0;
|
|
392
496
|
const isHorizontalPlacement = placement.startsWith("left") || placement.startsWith("right");
|
|
393
497
|
const preferredVertical = placement.startsWith("top") ? "top" : placement.endsWith("Top") ? "top" : "bottom";
|
|
@@ -427,12 +531,32 @@ function resolvePopupPosition(params) {
|
|
|
427
531
|
const maxLeft = Math.max(margin, viewportWidth - popupWidth - margin);
|
|
428
532
|
const left = clamp(rawLeft, margin, maxLeft);
|
|
429
533
|
return {
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
534
|
+
placement: resolvePlacement({
|
|
535
|
+
horizontal: resolvedHorizontal,
|
|
536
|
+
isHorizontalPlacement,
|
|
537
|
+
vertical: resolvedVertical
|
|
538
|
+
}),
|
|
539
|
+
style: {
|
|
540
|
+
left,
|
|
541
|
+
top,
|
|
542
|
+
width: matchAnchorWidth ? layoutAnchorWidth : void 0,
|
|
543
|
+
minWidth: layoutMinWidth ?? (matchAnchorWidth ? layoutAnchorWidth : void 0)
|
|
544
|
+
}
|
|
434
545
|
};
|
|
435
546
|
}
|
|
547
|
+
function resolvePlacement(params) {
|
|
548
|
+
const { horizontal, isHorizontalPlacement, vertical } = params;
|
|
549
|
+
if (isHorizontalPlacement) {
|
|
550
|
+
if (horizontal === "left") {
|
|
551
|
+
return vertical === "top" ? "leftTop" : "leftBottom";
|
|
552
|
+
}
|
|
553
|
+
return vertical === "top" ? "rightTop" : "rightBottom";
|
|
554
|
+
}
|
|
555
|
+
if (vertical === "top") {
|
|
556
|
+
return horizontal === "left" ? "topLeft" : "topRight";
|
|
557
|
+
}
|
|
558
|
+
return horizontal === "left" ? "bottomLeft" : "bottomRight";
|
|
559
|
+
}
|
|
436
560
|
function resolveRawTop(params) {
|
|
437
561
|
const { anchor, isHorizontalPlacement, offset, popupHeight, vertical } = params;
|
|
438
562
|
if (isHorizontalPlacement) {
|
|
@@ -468,18 +592,19 @@ function resolveAnchorRect(element) {
|
|
|
468
592
|
height: rect.height
|
|
469
593
|
};
|
|
470
594
|
}
|
|
471
|
-
function resolvePopupSurfaceRect(element) {
|
|
595
|
+
function resolvePopupSurfaceRect(element, contentScale = 1) {
|
|
472
596
|
if (!element) {
|
|
473
597
|
return null;
|
|
474
598
|
}
|
|
599
|
+
const scale = typeof contentScale === "number" && Number.isFinite(contentScale) && contentScale > 0 ? contentScale : 1;
|
|
475
600
|
return {
|
|
476
|
-
height: element.offsetHeight,
|
|
477
|
-
width: element.offsetWidth
|
|
601
|
+
height: element.offsetHeight * scale,
|
|
602
|
+
width: element.offsetWidth * scale
|
|
478
603
|
};
|
|
479
604
|
}
|
|
480
605
|
|
|
481
606
|
// src/components/color/style.css
|
|
482
|
-
styleInject(".canvas-react-color-wrap {\n display: inline-flex;\n width: 100%;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n}\n.canvas-react-color {\n display: flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n min-height: 0;\n box-sizing: border-box;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n cursor: pointer;\n}\n.canvas-react-color:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-color-open,\n.canvas-react-color:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-color-disabled {\n color: #9ca3af;\n background: var(--canvas-react-color-bg-soft);\n cursor: not-allowed;\n}\n.canvas-react-color-preview {\n flex: 0 0 24px;\n height: 24px;\n margin-left: 3px;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 4px;\n}\n.canvas-react-color-input-wrap {\n flex: 1;\n min-width: 0;\n height: 100%;\n min-height: 0;\n border: 0;\n box-shadow: none;\n}\n.canvas-react-color-input-wrap:hover,\n.canvas-react-color-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-color-input {\n cursor: pointer;\n text-transform: uppercase;\n}\n.canvas-react-color-arrow {\n flex: 0 0 auto;\n width:
|
|
607
|
+
styleInject(".canvas-react-color-wrap {\n display: inline-flex;\n width: 100%;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n}\n.canvas-react-color {\n display: flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n min-height: 0;\n box-sizing: border-box;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n cursor: pointer;\n}\n.canvas-react-color:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-color-open,\n.canvas-react-color:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-color-disabled {\n color: #9ca3af;\n background: var(--canvas-react-color-bg-soft);\n cursor: not-allowed;\n}\n.canvas-react-color-preview {\n flex: 0 0 auto;\n width: calc(24px * var(--canvas-react-content-zoom, 1));\n height: calc(24px * var(--canvas-react-content-zoom, 1));\n margin-left: 3px;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 4px;\n}\n.canvas-react-color-input-wrap {\n flex: 1;\n min-width: 0;\n height: 100%;\n min-height: 0;\n border: 0;\n box-shadow: none;\n}\n.canvas-react-color .canvas-react-input-affix-wrapper {\n height: 100%;\n min-height: 0;\n}\n.canvas-react-color-input-wrap:hover,\n.canvas-react-color-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-color-input {\n cursor: pointer;\n text-transform: uppercase;\n}\n.canvas-react-color-arrow {\n flex: 0 0 auto;\n width: 0.5em;\n height: 0.5em;\n min-width: 6px;\n min-height: 6px;\n margin-right: var(--canvas-react-control-padding-inline, 11px);\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: rotate(45deg) translateY(-2px);\n transition: transform 0.18s ease;\n}\n.canvas-react-color-arrow-open {\n transform: rotate(225deg) translate(-1px, -1px);\n}\n.canvas-react-color-dropdown {\n overflow: hidden;\n}\n.canvas-react-color-panel {\n padding: 12px;\n box-sizing: border-box;\n}\n.canvas-react-color-saturation {\n position: relative;\n height: 150px;\n overflow: hidden;\n border-radius: 6px;\n cursor: crosshair;\n background-image:\n linear-gradient(\n to top,\n #000,\n transparent),\n linear-gradient(\n to right,\n #fff,\n transparent);\n touch-action: none;\n}\n.canvas-react-color-saturation-thumb {\n position: absolute;\n width: 12px;\n height: 12px;\n border: 2px solid #fff;\n border-radius: 50%;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.28);\n transform: translate(-50%, -50%);\n pointer-events: none;\n}\n.canvas-react-color-controls {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-top: 12px;\n}\n.canvas-react-color-current {\n flex: 0 0 28px;\n height: 28px;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 50%;\n}\n.canvas-react-color-hue {\n width: 100%;\n height: 12px;\n margin: 0;\n appearance: none;\n border-radius: 999px;\n background:\n linear-gradient(\n to right,\n #f00,\n #ff0,\n #0f0,\n #0ff,\n #00f,\n #f0f,\n #f00);\n cursor: pointer;\n}\n.canvas-react-color-hue::-webkit-slider-thumb {\n width: 14px;\n height: 14px;\n appearance: none;\n border: 2px solid #fff;\n border-radius: 50%;\n background: transparent;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);\n}\n.canvas-react-color-value-row {\n display: grid;\n grid-template-columns: 36px 1fr;\n align-items: center;\n gap: 8px;\n margin-top: 12px;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n}\n.canvas-react-color-value-row .canvas-react-input-affix-wrapper {\n height: 28px;\n}\n.canvas-react-color-presets {\n display: grid;\n grid-template-columns: repeat(8, 20px);\n gap: 7px;\n margin-top: 12px;\n}\n.canvas-react-color-preset {\n width: 20px;\n height: 20px;\n padding: 0;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 4px;\n cursor: pointer;\n transition: transform 0.16s ease, box-shadow 0.16s ease;\n}\n.canvas-react-color-preset:hover {\n transform: scale(1.12);\n}\n.canvas-react-color-preset-selected {\n box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--canvas-react-color-primary);\n}\n");
|
|
483
608
|
var DEFAULT_COLOR = "#1677ff";
|
|
484
609
|
var PRESET_COLORS = [
|
|
485
610
|
"#ff4d4f",
|
|
@@ -509,6 +634,7 @@ var ReactColorPicker = forwardRef(function ReactColorPicker2(props, ref) {
|
|
|
509
634
|
presets = PRESET_COLORS,
|
|
510
635
|
style,
|
|
511
636
|
value,
|
|
637
|
+
showArrow = true,
|
|
512
638
|
...restProps
|
|
513
639
|
} = props;
|
|
514
640
|
const triggerRef = useRef(null);
|
|
@@ -602,7 +728,7 @@ var ReactColorPicker = forwardRef(function ReactColorPicker2(props, ref) {
|
|
|
602
728
|
}
|
|
603
729
|
}
|
|
604
730
|
),
|
|
605
|
-
/* @__PURE__ */ jsx(
|
|
731
|
+
showArrow ? /* @__PURE__ */ jsx(
|
|
606
732
|
"span",
|
|
607
733
|
{
|
|
608
734
|
className: joinClassNames(
|
|
@@ -610,7 +736,7 @@ var ReactColorPicker = forwardRef(function ReactColorPicker2(props, ref) {
|
|
|
610
736
|
open && `${REACT_COMPONENT_PREFIX}-color-arrow-open`
|
|
611
737
|
)
|
|
612
738
|
}
|
|
613
|
-
)
|
|
739
|
+
) : null
|
|
614
740
|
]
|
|
615
741
|
}
|
|
616
742
|
),
|
|
@@ -769,7 +895,7 @@ function clamp2(value, min, max) {
|
|
|
769
895
|
}
|
|
770
896
|
|
|
771
897
|
// src/components/year/style.css
|
|
772
|
-
styleInject('@import "../../styles/variables.css";\n.canvas-react-year-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-year {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding:
|
|
898
|
+
styleInject('@import "../../styles/variables.css";\n.canvas-react-year-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-year {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-year:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-year-open {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-year-disabled {\n color: #9ca3af;\n background: #fafafa;\n cursor: not-allowed;\n}\n.canvas-react-year-input-wrap {\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n box-shadow: none;\n}\n.canvas-react-year .canvas-react-input-affix-wrapper {\n height: 100%;\n min-height: 0;\n}\n.canvas-react-year-input-wrap:hover,\n.canvas-react-year-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-year-input {\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0;\n line-height: 1;\n}\n.canvas-react-year-actions {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 1em;\n min-width: 12px;\n height: 1em;\n min-height: 12px;\n margin-left: max(6px, calc(var(--canvas-react-control-padding-inline, 11px) * 0.5));\n}\n.canvas-react-year-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0.5em;\n height: 0.5em;\n min-width: 6px;\n min-height: 6px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: translate(-50%, -58%) rotate(45deg);\n transition:\n opacity 0.18s ease,\n transform 0.18s ease,\n border-color 0.18s ease;\n}\n.canvas-react-year:hover .canvas-react-year-arrow,\n.canvas-react-year-open .canvas-react-year-arrow {\n border-color: #6b7280;\n}\n.canvas-react-year-arrow-open {\n border-color: #6b7280;\n transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-year-clear {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transform: translate(-50%, -50%) rotate(0deg);\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-year:hover .canvas-react-year-clear,\n.canvas-react-year-open .canvas-react-year-clear,\n.canvas-react-year:focus-within .canvas-react-year-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-year:hover .canvas-react-year-actions-clearable .canvas-react-year-arrow,\n.canvas-react-year-open .canvas-react-year-actions-clearable .canvas-react-year-arrow,\n.canvas-react-year:focus-within .canvas-react-year-actions-clearable .canvas-react-year-arrow {\n opacity: 0;\n}\n.canvas-react-year-clear-icon,\n.canvas-react-year-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-year-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-year-clear-icon::before {\n transform: rotate(90deg);\n}\n.canvas-react-year-dropdown {\n padding: 0;\n}\n.canvas-react-year-panel {\n overflow: hidden;\n border-radius: 12px;\n}\n.canvas-react-year-header {\n display: grid;\n grid-template-columns: 40px 1fr 40px;\n align-items: center;\n height: 44px;\n border-bottom: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-year-title {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n border: none;\n background: transparent;\n color: var(--canvas-react-color-text);\n font-size: 16px;\n font-weight: 600;\n line-height: 1;\n text-align: center;\n cursor: pointer;\n transition: color 0.18s ease;\n}\n.canvas-react-year-title:hover {\n color: var(--canvas-react-color-primary);\n}\n.canvas-react-year-nav {\n position: relative;\n height: 100%;\n border: none;\n background: transparent;\n color: var(--canvas-react-color-text-muted);\n cursor: pointer;\n transition: color 0.18s ease, background-color 0.18s ease;\n}\n.canvas-react-year-nav:hover {\n color: var(--canvas-react-color-primary);\n background: rgba(22, 119, 255, 0.05);\n}\n.canvas-react-year-nav-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 7px;\n height: 7px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transition: border-color 0.18s ease, transform 0.18s ease;\n}\n.canvas-react-year-nav:hover .canvas-react-year-nav-arrow {\n border-color: var(--canvas-react-color-primary);\n}\n.canvas-react-year-nav-arrow-left {\n transform: translate(-42%, -50%) rotate(135deg);\n}\n.canvas-react-year-nav-arrow-right {\n transform: translate(-58%, -50%) rotate(-45deg);\n}\n.canvas-react-year-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 8px 4px;\n padding: 16px 12px 12px;\n}\n.canvas-react-year-cell {\n height: 40px;\n border: none;\n border-radius: var(--canvas-react-radius-sm);\n background: transparent;\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n cursor: pointer;\n transition: background-color 0.18s ease, color 0.18s ease;\n}\n.canvas-react-year-cell:hover {\n background: var(--canvas-react-color-bg-hover);\n}\n.canvas-react-year-cell-selected {\n background: var(--canvas-react-color-bg-active);\n color: var(--canvas-react-color-primary);\n font-weight: 600;\n}\n.canvas-react-year-cell-muted {\n color: #c4c7cf;\n}\n');
|
|
773
899
|
|
|
774
900
|
// src/components/date/style.css
|
|
775
901
|
styleInject('@import "../month/style.css";\n.canvas-react-date-panel {\n padding-bottom: 8px;\n}\n.canvas-react-date-weekdays,\n.canvas-react-date-grid {\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 6px 4px;\n padding: 0 12px;\n}\n.canvas-react-date-weekdays {\n padding-top: 12px;\n padding-bottom: 8px;\n}\n.canvas-react-date-weekday {\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n line-height: 1;\n text-align: center;\n}\n.canvas-react-date-cell {\n height: 36px;\n}\n');
|
|
@@ -791,6 +917,7 @@ var ReactDatePicker = forwardRef(
|
|
|
791
917
|
placeholder = "\u8BF7\u9009\u62E9\u65E5\u671F",
|
|
792
918
|
popupClassName,
|
|
793
919
|
allowClear = true,
|
|
920
|
+
showArrow = true,
|
|
794
921
|
style,
|
|
795
922
|
value,
|
|
796
923
|
...restProps
|
|
@@ -920,7 +1047,7 @@ var ReactDatePicker = forwardRef(
|
|
|
920
1047
|
}
|
|
921
1048
|
}
|
|
922
1049
|
),
|
|
923
|
-
/* @__PURE__ */ jsxs(
|
|
1050
|
+
showClear || showArrow ? /* @__PURE__ */ jsxs(
|
|
924
1051
|
"span",
|
|
925
1052
|
{
|
|
926
1053
|
className: joinClassNames(
|
|
@@ -950,7 +1077,7 @@ var ReactDatePicker = forwardRef(
|
|
|
950
1077
|
children: /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-year-clear-icon` })
|
|
951
1078
|
}
|
|
952
1079
|
) : null,
|
|
953
|
-
/* @__PURE__ */ jsx(
|
|
1080
|
+
showArrow ? /* @__PURE__ */ jsx(
|
|
954
1081
|
"span",
|
|
955
1082
|
{
|
|
956
1083
|
className: joinClassNames(
|
|
@@ -958,10 +1085,10 @@ var ReactDatePicker = forwardRef(
|
|
|
958
1085
|
open && `${REACT_COMPONENT_PREFIX}-year-arrow-open`
|
|
959
1086
|
)
|
|
960
1087
|
}
|
|
961
|
-
)
|
|
1088
|
+
) : null
|
|
962
1089
|
]
|
|
963
1090
|
}
|
|
964
|
-
)
|
|
1091
|
+
) : null
|
|
965
1092
|
]
|
|
966
1093
|
}
|
|
967
1094
|
),
|
|
@@ -1290,7 +1417,7 @@ function resolveDecadeStart(year) {
|
|
|
1290
1417
|
}
|
|
1291
1418
|
|
|
1292
1419
|
// src/components/date-range/style.css
|
|
1293
|
-
styleInject('@import "../../styles/variables.css";\n@import "../date/style.css";\n@import "../time/style.css";\n.canvas-react-date-range-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-date-range {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding:
|
|
1420
|
+
styleInject('@import "../../styles/variables.css";\n@import "../date/style.css";\n@import "../time/style.css";\n.canvas-react-date-range-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-date-range {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-date-range-control {\n position: relative;\n}\n.canvas-react-date-range:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-date-range-open {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-date-range-disabled {\n color: #9ca3af;\n background: #fafafa;\n cursor: not-allowed;\n}\n.canvas-react-date-range-input-wrap {\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n box-shadow: none;\n}\n.canvas-react-date-range .canvas-react-input-affix-wrapper {\n height: 100%;\n min-height: 0;\n}\n.canvas-react-date-range-input-wrap:hover,\n.canvas-react-date-range-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-date-range-hidden-input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n opacity: 0;\n pointer-events: none;\n}\n.canvas-react-date-range-input {\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0;\n line-height: 1;\n}\n.canvas-react-date-range-values {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n min-width: 0;\n height: 100%;\n}\n.canvas-react-date-range-value {\n position: relative;\n display: flex;\n flex: 1 1 0;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n min-width: 0;\n height: 100%;\n padding: 0;\n border: none;\n background: transparent;\n color: inherit;\n font: inherit;\n line-height: 1;\n text-align: left;\n box-sizing: border-box;\n cursor: pointer;\n}\n.canvas-react-date-range-value::after {\n position: absolute;\n right: 0;\n bottom: -1px;\n left: 0;\n height: 2px;\n border-radius: 999px;\n background: transparent;\n content: "";\n transition: background-color 0.18s ease;\n}\n.canvas-react-date-range-value-active::after {\n background: var(--canvas-react-color-primary);\n}\n.canvas-react-date-range-value-text {\n display: block;\n width: 100%;\n min-width: 0;\n height: auto;\n padding: 0;\n border: none;\n outline: none;\n overflow: hidden;\n background: transparent;\n color: inherit;\n font: inherit;\n line-height: normal;\n text-overflow: ellipsis;\n white-space: nowrap;\n cursor: pointer;\n}\n@supports (height: 1lh) {\n .canvas-react-date-range-value-text {\n height: 1lh;\n }\n}\n.canvas-react-date-range-value-text::placeholder {\n color: inherit;\n opacity: 1;\n}\n.canvas-react-date-range-separator {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n}\n.canvas-react-date-range-actions {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 1em;\n min-width: 12px;\n height: 1em;\n min-height: 12px;\n margin-left: max(6px, calc(var(--canvas-react-control-padding-inline, 11px) * 0.5));\n}\n.canvas-react-date-range-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0.5em;\n height: 0.5em;\n min-width: 6px;\n min-height: 6px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: translate(-50%, -58%) rotate(45deg);\n transition:\n opacity 0.18s ease,\n transform 0.18s ease,\n border-color 0.18s ease;\n}\n.canvas-react-date-range:hover .canvas-react-date-range-arrow,\n.canvas-react-date-range-open .canvas-react-date-range-arrow {\n border-color: #6b7280;\n}\n.canvas-react-date-range-arrow-open {\n border-color: #6b7280;\n transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-date-range-clear {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transform: translate(-50%, -50%) rotate(0deg);\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-date-range:hover .canvas-react-date-range-clear,\n.canvas-react-date-range-open .canvas-react-date-range-clear,\n.canvas-react-date-range:focus-within .canvas-react-date-range-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-date-range-clear-icon,\n.canvas-react-date-range-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-date-range-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-date-range-clear-icon::before {\n transform: rotate(90deg);\n}\n.canvas-react-date-range-dropdown {\n padding: 4px;\n}\n.canvas-react-date-range-panel {\n display: flex;\n flex-direction: column;\n height: 400px;\n box-sizing: border-box;\n}\n.canvas-react-date-range-calendars {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n flex: 1 1 auto;\n min-height: 0;\n}\n.canvas-react-date-range-calendar {\n display: flex;\n flex-direction: column;\n min-width: 0;\n min-height: 0;\n}\n.canvas-react-date-range-calendar + .canvas-react-date-range-calendar {\n border-left: 1px solid var(--canvas-react-color-split, #f0f0f0);\n}\n.canvas-react-date-range-calendar .canvas-react-year-title {\n cursor: default;\n}\n.canvas-react-date-range-calendar .canvas-react-year-nav:disabled {\n cursor: default;\n opacity: 0;\n}\n.canvas-react-date-range-calendar .canvas-react-date-grid {\n flex: 1 1 auto;\n min-height: 0;\n}\n.canvas-react-date-range-cell {\n position: relative;\n border-radius: 0;\n}\n.canvas-react-date-range-cell.canvas-react-year-cell-selected {\n background: rgba(22, 119, 255, 0.12);\n color: var(--canvas-react-color-primary);\n font-weight: 600;\n}\n.canvas-react-date-range-cell::before {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background: transparent;\n content: "";\n}\n.canvas-react-date-range-cell-in-range {\n background: rgba(22, 119, 255, 0.12);\n}\n.canvas-react-date-range-cell-in-range::before {\n background: transparent;\n}\n.canvas-react-date-range-cell-range-start {\n border-top-left-radius: var(--canvas-react-radius-sm);\n border-bottom-left-radius: var(--canvas-react-radius-sm);\n}\n.canvas-react-date-range-cell-range-start::before {\n left: 0;\n}\n.canvas-react-date-range-cell-range-end {\n border-top-right-radius: var(--canvas-react-radius-sm);\n border-bottom-right-radius: var(--canvas-react-radius-sm);\n}\n.canvas-react-date-range-cell-range-end::before {\n right: 0;\n}\n.canvas-react-date-range-cell-range-start.canvas-react-date-range-cell-range-end {\n border-radius: var(--canvas-react-radius-sm);\n}\n.canvas-react-date-range-cell-range-start.canvas-react-date-range-cell-range-end::before {\n left: 0;\n right: 0;\n}\n.canvas-react-date-range-cell-text {\n position: relative;\n z-index: 1;\n}\n.canvas-react-date-range-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 8px 4px 4px;\n border-top: 1px solid var(--canvas-react-color-border);\n}\n');
|
|
1294
1421
|
var WEEKDAY_LABELS2 = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
|
|
1295
1422
|
var ReactDateRangePicker = forwardRef(function ReactDateRangePicker2(props, ref) {
|
|
1296
1423
|
const {
|
|
@@ -1305,6 +1432,7 @@ var ReactDateRangePicker = forwardRef(function ReactDateRangePicker2(props, ref)
|
|
|
1305
1432
|
popupClassName,
|
|
1306
1433
|
rangeSeparator = " ~ ",
|
|
1307
1434
|
allowClear = true,
|
|
1435
|
+
showArrow = true,
|
|
1308
1436
|
style,
|
|
1309
1437
|
value,
|
|
1310
1438
|
...restProps
|
|
@@ -1523,7 +1651,7 @@ var ReactDateRangePicker = forwardRef(function ReactDateRangePicker2(props, ref)
|
|
|
1523
1651
|
}
|
|
1524
1652
|
)
|
|
1525
1653
|
] }),
|
|
1526
|
-
/* @__PURE__ */ jsxs(
|
|
1654
|
+
showClear || showArrow ? /* @__PURE__ */ jsxs(
|
|
1527
1655
|
"span",
|
|
1528
1656
|
{
|
|
1529
1657
|
className: joinClassNames(
|
|
@@ -1559,7 +1687,7 @@ var ReactDateRangePicker = forwardRef(function ReactDateRangePicker2(props, ref)
|
|
|
1559
1687
|
)
|
|
1560
1688
|
}
|
|
1561
1689
|
) : null,
|
|
1562
|
-
/* @__PURE__ */ jsx(
|
|
1690
|
+
showArrow ? /* @__PURE__ */ jsx(
|
|
1563
1691
|
"span",
|
|
1564
1692
|
{
|
|
1565
1693
|
className: joinClassNames(
|
|
@@ -1567,10 +1695,10 @@ var ReactDateRangePicker = forwardRef(function ReactDateRangePicker2(props, ref)
|
|
|
1567
1695
|
open && `${REACT_COMPONENT_PREFIX}-date-range-arrow-open`
|
|
1568
1696
|
)
|
|
1569
1697
|
}
|
|
1570
|
-
)
|
|
1698
|
+
) : null
|
|
1571
1699
|
]
|
|
1572
1700
|
}
|
|
1573
|
-
)
|
|
1701
|
+
) : null
|
|
1574
1702
|
]
|
|
1575
1703
|
}
|
|
1576
1704
|
),
|
|
@@ -2184,10 +2312,10 @@ function getCurrentTimeValue() {
|
|
|
2184
2312
|
}
|
|
2185
2313
|
|
|
2186
2314
|
// src/components/time/style.css
|
|
2187
|
-
styleInject('@import "../../styles/variables.css";\n.canvas-react-time-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-time {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding: 0 11px;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-time:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-time-open {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-time-disabled {\n color: #9ca3af;\n background: #fafafa;\n cursor: not-allowed;\n}\n.canvas-react-time-input-wrap {\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n box-shadow: none;\n}\n.canvas-react-time-input-wrap:hover,\n.canvas-react-time-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-time-input {\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0;\n line-height: 1;\n}\n.canvas-react-time-actions {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 14px;\n min-width: 14px;\n height: 14px;\n margin-left: 8px;\n}\n.canvas-react-time-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 7px;\n height: 7px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: translate(-50%, -58%) rotate(45deg);\n transition:\n opacity 0.18s ease,\n transform 0.18s ease,\n border-color 0.18s ease;\n}\n.canvas-react-time:hover .canvas-react-time-arrow,\n.canvas-react-time-open .canvas-react-time-arrow {\n border-color: #6b7280;\n}\n.canvas-react-time-arrow-open {\n border-color: #6b7280;\n transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-time-clear {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transform: translate(-50%, -50%) rotate(0deg);\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-time-clear:hover {\n color: #6b7280;\n transform: translate(-50%, -50%) rotate(90deg);\n}\n.canvas-react-time:hover .canvas-react-time-clear,\n.canvas-react-time-open .canvas-react-time-clear,\n.canvas-react-time:focus-within .canvas-react-time-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-time:hover .canvas-react-time-actions-clearable .canvas-react-time-arrow,\n.canvas-react-time-open .canvas-react-time-actions-clearable .canvas-react-time-arrow,\n.canvas-react-time:focus-within .canvas-react-time-actions-clearable .canvas-react-time-arrow {\n opacity: 0;\n}\n.canvas-react-time-clear-icon,\n.canvas-react-time-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-time-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-time-clear-icon::before {\n transform: rotate(90deg);\n}\n.canvas-react-time-dropdown {\n padding: 4px;\n}\n.canvas-react-time-popup-panel,\n.canvas-react-time-range-panel {\n display: flex;\n flex-direction: column;\n height: 400px;\n box-sizing: border-box;\n}\n.canvas-react-time-range-control {\n position: relative;\n}\n.canvas-react-time-range-hidden-input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n opacity: 0;\n pointer-events: none;\n}\n.canvas-react-time-range-values {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n min-width: 0;\n height: 100%;\n}\n.canvas-react-time-range-value {\n position: relative;\n display: flex;\n flex: 1 1 0;\n align-items: center;\n justify-content: flex-start;\n min-width: 0;\n height: 100%;\n padding: 0;\n border: none;\n background: transparent;\n color: inherit;\n font: inherit;\n line-height: 1;\n text-align: left;\n box-sizing: border-box;\n cursor: pointer;\n}\n.canvas-react-time-range-value::after {\n position: absolute;\n right: 0;\n bottom: -1px;\n left: 0;\n height: 2px;\n border-radius: 999px;\n background: transparent;\n content: "";\n transition: background-color 0.18s ease;\n}\n.canvas-react-time-range-value-active::after {\n background: var(--canvas-react-color-primary);\n}\n.canvas-react-time-range-value-text {\n display: block;\n width: 100%;\n min-width: 0;\n height: auto;\n padding: 0;\n border: none;\n outline: none;\n overflow: hidden;\n background: transparent;\n color: inherit;\n font: inherit;\n line-height: normal;\n text-overflow: ellipsis;\n white-space: nowrap;\n cursor: pointer;\n}\n@supports (height: 1lh) {\n .canvas-react-time-range-value-text {\n height: 1lh;\n }\n}\n.canvas-react-time-range-value-text::placeholder {\n color: inherit;\n opacity: 1;\n}\n.canvas-react-time-range-separator {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n}\n.canvas-react-time-popup-header {\n padding: 0 4px;\n border-bottom: 1px solid var(--canvas-react-color-border);\n box-sizing: border-box;\n}\n.canvas-react-time-panel {\n min-width: 216px;\n}\n.canvas-react-time-header,\n.canvas-react-time-body {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 4px;\n}\n.canvas-react-time-header {\n align-items: center;\n height: 44px;\n margin-bottom: 4px;\n}\n.canvas-react-time-popup-header .canvas-react-time-header {\n height: 44px;\n margin-bottom: 0;\n}\n.canvas-react-time-body {\n position: relative;\n}\n.canvas-react-time-popup-content {\n display: flex;\n flex: 1 1 auto;\n min-height: 0;\n padding: 0 4px;\n box-sizing: border-box;\n}\n.canvas-react-time-popup-content .canvas-react-time-panel {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n width: 100%;\n min-height: 100%;\n}\n.canvas-react-time-popup-content .canvas-react-time-body {\n flex: 1 1 auto;\n min-height: 0;\n}\n.canvas-react-time-popup-content .canvas-react-time-column {\n display: flex;\n min-height: 0;\n}\n.canvas-react-time-popup-content .canvas-react-time-column-list {\n flex: 1 1 auto;\n max-height: none;\n min-height: 0;\n}\n.canvas-react-time-selection-highlight {\n position: absolute;\n left: 0;\n right: 0;\n top: 50%;\n height: 32px;\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg-active);\n transform: translateY(-50%);\n pointer-events: none;\n z-index: 0;\n}\n.canvas-react-time-column {\n position: relative;\n z-index: 1;\n}\n.canvas-react-time-column-label {\n padding: 4px 0;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n line-height: 1;\n text-align: center;\n}\n.canvas-react-time-column-list {\n max-height: 196px;\n overflow-y: auto;\n padding: 0 4px;\n border-radius: var(--canvas-react-radius-sm);\n background: transparent;\n scroll-behavior: smooth;\n scroll-snap-type: y mandatory;\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n.canvas-react-time-column-list::-webkit-scrollbar {\n display: none;\n}\n.canvas-react-time-option {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 32px;\n padding: 0 6px;\n border: none;\n border-radius: var(--canvas-react-radius-sm);\n background: transparent;\n color: var(--canvas-react-color-text-muted);\n font-size: var(--canvas-react-font-size);\n line-height: 1;\n cursor: pointer;\n scroll-snap-align: center;\n transition: background-color 0.18s ease, color 0.18s ease;\n}\n.canvas-react-time-option:hover {\n color: var(--canvas-react-color-text);\n}\n.canvas-react-time-option-selected {\n color: var(--canvas-react-color-primary);\n font-weight: 500;\n}\n.canvas-react-time-footer,\n.canvas-react-time-popup-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 8px 4px 4px;\n border-top: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-time-footer-now,\n.canvas-react-time-footer-confirm {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 28px;\n padding: 0 12px;\n border-radius: var(--canvas-react-radius-sm);\n font-size: 12px;\n cursor: pointer;\n transition:\n border-color 0.18s ease,\n background-color 0.18s ease,\n color 0.18s ease;\n}\n.canvas-react-time-footer-now {\n border: none;\n background: transparent;\n color: var(--canvas-react-color-primary);\n}\n.canvas-react-time-footer-now:hover {\n color: var(--canvas-react-color-primary-hover);\n background: rgba(22, 119, 255, 0.06);\n}\n.canvas-react-time-footer-confirm {\n border: 1px solid var(--canvas-react-color-primary);\n background: var(--canvas-react-color-primary);\n color: #fff;\n}\n.canvas-react-time-footer-confirm:hover {\n border-color: var(--canvas-react-color-primary-hover);\n background: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-time-range-dropdown {\n width: 260px;\n}\n.canvas-react-time-range-header {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n border-bottom: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-time-range-content {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n min-height: 0;\n}\n.canvas-react-time-range-header-tab {\n height: 44px;\n padding: 0 10px;\n border: none;\n background: transparent;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n cursor: pointer;\n transition: background-color 0.18s ease, color 0.18s ease;\n}\n.canvas-react-time-range-header-tab + .canvas-react-time-range-header-tab {\n border-left: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-time-range-header-tab:hover {\n color: var(--canvas-react-color-primary-hover);\n background: rgba(22, 119, 255, 0.05);\n}\n.canvas-react-time-range-header-tab-active {\n background: var(--canvas-react-color-bg-active);\n color: var(--canvas-react-color-primary);\n font-weight: 600;\n}\n');
|
|
2315
|
+
styleInject('@import "../../styles/variables.css";\n.canvas-react-time-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-time {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-time:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-time-open {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-time-disabled {\n color: #9ca3af;\n background: #fafafa;\n cursor: not-allowed;\n}\n.canvas-react-time-input-wrap {\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n box-shadow: none;\n}\n.canvas-react-time .canvas-react-input-affix-wrapper {\n height: 100%;\n min-height: 0;\n}\n.canvas-react-time-input-wrap:hover,\n.canvas-react-time-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-time-input {\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0;\n line-height: 1;\n}\n.canvas-react-time-actions {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 1em;\n min-width: 12px;\n height: 1em;\n min-height: 12px;\n margin-left: max(6px, calc(var(--canvas-react-control-padding-inline, 11px) * 0.5));\n}\n.canvas-react-time-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0.5em;\n height: 0.5em;\n min-width: 6px;\n min-height: 6px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: translate(-50%, -58%) rotate(45deg);\n transition:\n opacity 0.18s ease,\n transform 0.18s ease,\n border-color 0.18s ease;\n}\n.canvas-react-time:hover .canvas-react-time-arrow,\n.canvas-react-time-open .canvas-react-time-arrow {\n border-color: #6b7280;\n}\n.canvas-react-time-arrow-open {\n border-color: #6b7280;\n transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-time-clear {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transform: translate(-50%, -50%) rotate(0deg);\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-time-clear:hover {\n color: #6b7280;\n transform: translate(-50%, -50%) rotate(90deg);\n}\n.canvas-react-time:hover .canvas-react-time-clear,\n.canvas-react-time-open .canvas-react-time-clear,\n.canvas-react-time:focus-within .canvas-react-time-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-time:hover .canvas-react-time-actions-clearable .canvas-react-time-arrow,\n.canvas-react-time-open .canvas-react-time-actions-clearable .canvas-react-time-arrow,\n.canvas-react-time:focus-within .canvas-react-time-actions-clearable .canvas-react-time-arrow {\n opacity: 0;\n}\n.canvas-react-time-clear-icon,\n.canvas-react-time-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-time-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-time-clear-icon::before {\n transform: rotate(90deg);\n}\n.canvas-react-time-dropdown {\n padding: 4px;\n}\n.canvas-react-time-popup-panel,\n.canvas-react-time-range-panel {\n display: flex;\n flex-direction: column;\n height: 400px;\n box-sizing: border-box;\n}\n.canvas-react-time-range-control {\n position: relative;\n}\n.canvas-react-time-range-hidden-input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n opacity: 0;\n pointer-events: none;\n}\n.canvas-react-time-range-values {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n min-width: 0;\n height: 100%;\n}\n.canvas-react-time-range-value {\n position: relative;\n display: flex;\n flex: 1 1 0;\n align-items: center;\n justify-content: flex-start;\n min-width: 0;\n height: 100%;\n padding: 0;\n border: none;\n background: transparent;\n color: inherit;\n font: inherit;\n line-height: 1;\n text-align: left;\n box-sizing: border-box;\n cursor: pointer;\n}\n.canvas-react-time-range-value::after {\n position: absolute;\n right: 0;\n bottom: -1px;\n left: 0;\n height: 2px;\n border-radius: 999px;\n background: transparent;\n content: "";\n transition: background-color 0.18s ease;\n}\n.canvas-react-time-range-value-active::after {\n background: var(--canvas-react-color-primary);\n}\n.canvas-react-time-range-value-text {\n display: block;\n width: 100%;\n min-width: 0;\n height: auto;\n padding: 0;\n border: none;\n outline: none;\n overflow: hidden;\n background: transparent;\n color: inherit;\n font: inherit;\n line-height: normal;\n text-overflow: ellipsis;\n white-space: nowrap;\n cursor: pointer;\n}\n@supports (height: 1lh) {\n .canvas-react-time-range-value-text {\n height: 1lh;\n }\n}\n.canvas-react-time-range-value-text::placeholder {\n color: inherit;\n opacity: 1;\n}\n.canvas-react-time-range-separator {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n}\n.canvas-react-time-popup-header {\n padding: 0 4px;\n border-bottom: 1px solid var(--canvas-react-color-border);\n box-sizing: border-box;\n}\n.canvas-react-time-panel {\n min-width: 216px;\n}\n.canvas-react-time-header,\n.canvas-react-time-body {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 4px;\n}\n.canvas-react-time-header {\n align-items: center;\n height: 44px;\n margin-bottom: 4px;\n}\n.canvas-react-time-popup-header .canvas-react-time-header {\n height: 44px;\n margin-bottom: 0;\n}\n.canvas-react-time-body {\n position: relative;\n}\n.canvas-react-time-popup-content {\n display: flex;\n flex: 1 1 auto;\n min-height: 0;\n padding: 0 4px;\n box-sizing: border-box;\n}\n.canvas-react-time-popup-content .canvas-react-time-panel {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n width: 100%;\n min-height: 100%;\n}\n.canvas-react-time-popup-content .canvas-react-time-body {\n flex: 1 1 auto;\n min-height: 0;\n}\n.canvas-react-time-popup-content .canvas-react-time-column {\n display: flex;\n min-height: 0;\n}\n.canvas-react-time-popup-content .canvas-react-time-column-list {\n flex: 1 1 auto;\n max-height: none;\n min-height: 0;\n}\n.canvas-react-time-selection-highlight {\n position: absolute;\n left: 0;\n right: 0;\n top: 50%;\n height: 32px;\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg-active);\n transform: translateY(-50%);\n pointer-events: none;\n z-index: 0;\n}\n.canvas-react-time-column {\n position: relative;\n z-index: 1;\n}\n.canvas-react-time-column-label {\n padding: 4px 0;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n line-height: 1;\n text-align: center;\n}\n.canvas-react-time-column-list {\n max-height: 196px;\n overflow-y: auto;\n padding: 0 4px;\n border-radius: var(--canvas-react-radius-sm);\n background: transparent;\n scroll-behavior: smooth;\n scroll-snap-type: y mandatory;\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n.canvas-react-time-column-list::-webkit-scrollbar {\n display: none;\n}\n.canvas-react-time-option {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 32px;\n padding: 0 6px;\n border: none;\n border-radius: var(--canvas-react-radius-sm);\n background: transparent;\n color: var(--canvas-react-color-text-muted);\n font-size: var(--canvas-react-font-size);\n line-height: 1;\n cursor: pointer;\n scroll-snap-align: center;\n transition: background-color 0.18s ease, color 0.18s ease;\n}\n.canvas-react-time-option:hover {\n color: var(--canvas-react-color-text);\n}\n.canvas-react-time-option-selected {\n color: var(--canvas-react-color-primary);\n font-weight: 500;\n}\n.canvas-react-time-footer,\n.canvas-react-time-popup-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 8px 4px 4px;\n border-top: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-time-footer-now,\n.canvas-react-time-footer-confirm {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 28px;\n padding: 0 12px;\n border-radius: var(--canvas-react-radius-sm);\n font-size: 12px;\n cursor: pointer;\n transition:\n border-color 0.18s ease,\n background-color 0.18s ease,\n color 0.18s ease;\n}\n.canvas-react-time-footer-now {\n border: none;\n background: transparent;\n color: var(--canvas-react-color-primary);\n}\n.canvas-react-time-footer-now:hover {\n color: var(--canvas-react-color-primary-hover);\n background: rgba(22, 119, 255, 0.06);\n}\n.canvas-react-time-footer-confirm {\n border: 1px solid var(--canvas-react-color-primary);\n background: var(--canvas-react-color-primary);\n color: #fff;\n}\n.canvas-react-time-footer-confirm:hover {\n border-color: var(--canvas-react-color-primary-hover);\n background: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-time-range-dropdown {\n width: 260px;\n}\n.canvas-react-time-range-header {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n border-bottom: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-time-range-content {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n min-height: 0;\n}\n.canvas-react-time-range-header-tab {\n height: 44px;\n padding: 0 10px;\n border: none;\n background: transparent;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n cursor: pointer;\n transition: background-color 0.18s ease, color 0.18s ease;\n}\n.canvas-react-time-range-header-tab + .canvas-react-time-range-header-tab {\n border-left: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-time-range-header-tab:hover {\n color: var(--canvas-react-color-primary-hover);\n background: rgba(22, 119, 255, 0.05);\n}\n.canvas-react-time-range-header-tab-active {\n background: var(--canvas-react-color-bg-active);\n color: var(--canvas-react-color-primary);\n font-weight: 600;\n}\n');
|
|
2188
2316
|
|
|
2189
2317
|
// src/components/datetime/style.css
|
|
2190
|
-
styleInject('@import "../../styles/variables.css";\n@import "../date/style.css";\n.canvas-react-datetime-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-datetime {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding:
|
|
2318
|
+
styleInject('@import "../../styles/variables.css";\n@import "../date/style.css";\n.canvas-react-datetime-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-datetime {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-datetime:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-datetime-open {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-datetime-disabled {\n color: #9ca3af;\n background: #fafafa;\n cursor: not-allowed;\n}\n.canvas-react-datetime-input-wrap {\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n box-shadow: none;\n}\n.canvas-react-datetime .canvas-react-input-affix-wrapper {\n height: 100%;\n min-height: 0;\n}\n.canvas-react-datetime-input-wrap:hover,\n.canvas-react-datetime-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-datetime-input {\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0;\n line-height: 1;\n}\n.canvas-react-datetime-actions {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 1em;\n min-width: 12px;\n height: 1em;\n min-height: 12px;\n margin-left: max(6px, calc(var(--canvas-react-control-padding-inline, 11px) * 0.5));\n}\n.canvas-react-datetime-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0.5em;\n height: 0.5em;\n min-width: 6px;\n min-height: 6px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: translate(-50%, -58%) rotate(45deg);\n transition:\n opacity 0.18s ease,\n transform 0.18s ease,\n border-color 0.18s ease;\n}\n.canvas-react-datetime:hover .canvas-react-datetime-arrow,\n.canvas-react-datetime-open .canvas-react-datetime-arrow {\n border-color: #6b7280;\n}\n.canvas-react-datetime-arrow-open {\n border-color: #6b7280;\n transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-datetime-clear {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transform: translate(-50%, -50%) rotate(0deg);\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-datetime-clear:hover {\n color: #6b7280;\n transform: translate(-50%, -50%) rotate(90deg);\n}\n.canvas-react-datetime:hover .canvas-react-datetime-clear,\n.canvas-react-datetime-open .canvas-react-datetime-clear,\n.canvas-react-datetime:focus-within .canvas-react-datetime-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-datetime:hover .canvas-react-datetime-actions-clearable .canvas-react-datetime-arrow,\n.canvas-react-datetime-open .canvas-react-datetime-actions-clearable .canvas-react-datetime-arrow,\n.canvas-react-datetime:focus-within .canvas-react-datetime-actions-clearable .canvas-react-datetime-arrow {\n opacity: 0;\n}\n.canvas-react-datetime-clear-icon,\n.canvas-react-datetime-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-datetime-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-datetime-clear-icon::before {\n transform: rotate(90deg);\n}\n.canvas-react-datetime-dropdown {\n padding: 4px;\n}\n.canvas-react-datetime-panel {\n display: flex;\n flex-direction: column;\n height: 400px;\n box-sizing: border-box;\n}\n.canvas-react-datetime-header {\n display: grid;\n grid-template-columns: 296px 218px;\n gap: 8px;\n align-items: stretch;\n border-bottom: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-datetime-header-date {\n border-right: 1px solid var(--canvas-react-color-split, #f0f0f0);\n}\n.canvas-react-datetime-header-date .canvas-react-year-header,\n.canvas-react-datetime-header-time .canvas-react-time-header {\n border-bottom: none;\n}\n.canvas-react-datetime-header-time {\n display: block;\n min-width: 0;\n padding: 0 4px;\n box-sizing: border-box;\n}\n.canvas-react-datetime-content {\n display: grid;\n grid-template-columns: 296px 218px;\n gap: 8px;\n flex: 1 1 auto;\n min-height: 0;\n align-items: stretch;\n}\n.canvas-react-datetime-date-panel {\n display: flex;\n flex-direction: column;\n min-height: 0;\n border-right: 1px solid var(--canvas-react-color-split, #f0f0f0);\n}\n.canvas-react-datetime-time-panel {\n overflow: hidden;\n display: flex;\n min-height: 0;\n padding: 0 4px;\n box-sizing: border-box;\n}\n.canvas-react-datetime-header-time .canvas-react-time-header {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 4px;\n align-items: center;\n width: 100%;\n height: 44px;\n margin-bottom: 0;\n box-sizing: border-box;\n}\n.canvas-react-datetime-header-time .canvas-react-time-column-label {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0;\n}\n.canvas-react-datetime-time-panel .canvas-react-time-panel {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n width: 100%;\n min-height: 100%;\n min-width: 210px;\n}\n.canvas-react-datetime-time-panel .canvas-react-time-body {\n flex: 1 1 auto;\n min-height: 0;\n}\n.canvas-react-datetime-time-panel .canvas-react-time-column {\n display: flex;\n min-height: 0;\n}\n.canvas-react-datetime-time-panel .canvas-react-time-column-list {\n flex: 1 1 auto;\n max-height: none;\n min-height: 0;\n}\n.canvas-react-datetime-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n padding: 8px 0 0;\n margin-top: 8px;\n border-top: 1px solid var(--canvas-react-color-border);\n}\n');
|
|
2191
2319
|
var MONTHS2 = Array.from(
|
|
2192
2320
|
{ length: 12 },
|
|
2193
2321
|
(_, index) => String(index + 1).padStart(2, "0")
|
|
@@ -2205,6 +2333,7 @@ var ReactDateTimePicker = forwardRef(function ReactDateTimePicker2(props, ref) {
|
|
|
2205
2333
|
placeholder = "\u8BF7\u9009\u62E9\u65E5\u671F\u65F6\u95F4",
|
|
2206
2334
|
popupClassName,
|
|
2207
2335
|
allowClear = true,
|
|
2336
|
+
showArrow = true,
|
|
2208
2337
|
style,
|
|
2209
2338
|
value,
|
|
2210
2339
|
...restProps
|
|
@@ -2328,7 +2457,7 @@ var ReactDateTimePicker = forwardRef(function ReactDateTimePicker2(props, ref) {
|
|
|
2328
2457
|
}
|
|
2329
2458
|
}
|
|
2330
2459
|
),
|
|
2331
|
-
/* @__PURE__ */ jsxs(
|
|
2460
|
+
showClear || showArrow ? /* @__PURE__ */ jsxs(
|
|
2332
2461
|
"span",
|
|
2333
2462
|
{
|
|
2334
2463
|
className: joinClassNames(
|
|
@@ -2358,7 +2487,7 @@ var ReactDateTimePicker = forwardRef(function ReactDateTimePicker2(props, ref) {
|
|
|
2358
2487
|
children: /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-datetime-clear-icon` })
|
|
2359
2488
|
}
|
|
2360
2489
|
) : null,
|
|
2361
|
-
/* @__PURE__ */ jsx(
|
|
2490
|
+
showArrow ? /* @__PURE__ */ jsx(
|
|
2362
2491
|
"span",
|
|
2363
2492
|
{
|
|
2364
2493
|
className: joinClassNames(
|
|
@@ -2366,10 +2495,10 @@ var ReactDateTimePicker = forwardRef(function ReactDateTimePicker2(props, ref) {
|
|
|
2366
2495
|
open && `${REACT_COMPONENT_PREFIX}-datetime-arrow-open`
|
|
2367
2496
|
)
|
|
2368
2497
|
}
|
|
2369
|
-
)
|
|
2498
|
+
) : null
|
|
2370
2499
|
]
|
|
2371
2500
|
}
|
|
2372
|
-
)
|
|
2501
|
+
) : null
|
|
2373
2502
|
]
|
|
2374
2503
|
}
|
|
2375
2504
|
),
|
|
@@ -2843,6 +2972,7 @@ var ReactDateTimeRangePicker = forwardRef(function ReactDateTimeRangePicker2(pro
|
|
|
2843
2972
|
popupClassName,
|
|
2844
2973
|
rangeSeparator = " ~ ",
|
|
2845
2974
|
allowClear = true,
|
|
2975
|
+
showArrow = true,
|
|
2846
2976
|
style,
|
|
2847
2977
|
value,
|
|
2848
2978
|
...restProps
|
|
@@ -3082,7 +3212,7 @@ var ReactDateTimeRangePicker = forwardRef(function ReactDateTimeRangePicker2(pro
|
|
|
3082
3212
|
}
|
|
3083
3213
|
)
|
|
3084
3214
|
] }),
|
|
3085
|
-
/* @__PURE__ */ jsxs(
|
|
3215
|
+
showClear || showArrow ? /* @__PURE__ */ jsxs(
|
|
3086
3216
|
"span",
|
|
3087
3217
|
{
|
|
3088
3218
|
className: joinClassNames(
|
|
@@ -3118,7 +3248,7 @@ var ReactDateTimeRangePicker = forwardRef(function ReactDateTimeRangePicker2(pro
|
|
|
3118
3248
|
)
|
|
3119
3249
|
}
|
|
3120
3250
|
) : null,
|
|
3121
|
-
/* @__PURE__ */ jsx(
|
|
3251
|
+
showArrow ? /* @__PURE__ */ jsx(
|
|
3122
3252
|
"span",
|
|
3123
3253
|
{
|
|
3124
3254
|
className: joinClassNames(
|
|
@@ -3126,10 +3256,10 @@ var ReactDateTimeRangePicker = forwardRef(function ReactDateTimeRangePicker2(pro
|
|
|
3126
3256
|
open && `${REACT_COMPONENT_PREFIX}-datetime-arrow-open`
|
|
3127
3257
|
)
|
|
3128
3258
|
}
|
|
3129
|
-
)
|
|
3259
|
+
) : null
|
|
3130
3260
|
]
|
|
3131
3261
|
}
|
|
3132
|
-
)
|
|
3262
|
+
) : null
|
|
3133
3263
|
]
|
|
3134
3264
|
}
|
|
3135
3265
|
),
|
|
@@ -3811,6 +3941,7 @@ var ReactMonthPicker = forwardRef(
|
|
|
3811
3941
|
placeholder = "\u8BF7\u9009\u62E9\u6708\u4EFD",
|
|
3812
3942
|
popupClassName,
|
|
3813
3943
|
allowClear = true,
|
|
3944
|
+
showArrow = true,
|
|
3814
3945
|
style,
|
|
3815
3946
|
value,
|
|
3816
3947
|
...restProps
|
|
@@ -3925,7 +4056,7 @@ var ReactMonthPicker = forwardRef(
|
|
|
3925
4056
|
}
|
|
3926
4057
|
}
|
|
3927
4058
|
),
|
|
3928
|
-
/* @__PURE__ */ jsxs(
|
|
4059
|
+
showClear || showArrow ? /* @__PURE__ */ jsxs(
|
|
3929
4060
|
"span",
|
|
3930
4061
|
{
|
|
3931
4062
|
className: joinClassNames(
|
|
@@ -3955,7 +4086,7 @@ var ReactMonthPicker = forwardRef(
|
|
|
3955
4086
|
children: /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-year-clear-icon` })
|
|
3956
4087
|
}
|
|
3957
4088
|
) : null,
|
|
3958
|
-
/* @__PURE__ */ jsx(
|
|
4089
|
+
showArrow ? /* @__PURE__ */ jsx(
|
|
3959
4090
|
"span",
|
|
3960
4091
|
{
|
|
3961
4092
|
className: joinClassNames(
|
|
@@ -3963,10 +4094,10 @@ var ReactMonthPicker = forwardRef(
|
|
|
3963
4094
|
open && `${REACT_COMPONENT_PREFIX}-year-arrow-open`
|
|
3964
4095
|
)
|
|
3965
4096
|
}
|
|
3966
|
-
)
|
|
4097
|
+
) : null
|
|
3967
4098
|
]
|
|
3968
4099
|
}
|
|
3969
|
-
)
|
|
4100
|
+
) : null
|
|
3970
4101
|
]
|
|
3971
4102
|
}
|
|
3972
4103
|
),
|
|
@@ -4188,7 +4319,7 @@ function resolveDecadeStart4(year) {
|
|
|
4188
4319
|
}
|
|
4189
4320
|
|
|
4190
4321
|
// src/components/number-input/style.css
|
|
4191
|
-
styleInject('@import "../../styles/variables.css";\n.canvas-react-number-input-affix-wrapper {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-number-input-affix-wrapper:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-number-input-affix-wrapper:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-number-input-affix-wrapper-disabled {\n background: #fafafa;\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-number-input {\n box-sizing: border-box;\n flex: 1 1 auto;\n width: 100%;\n min-width: 0;\n height: 100%;\n padding:
|
|
4322
|
+
styleInject('@import "../../styles/variables.css";\n.canvas-react-number-input-affix-wrapper {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-number-input-affix-wrapper:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-number-input-affix-wrapper:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-number-input-affix-wrapper-disabled {\n background: #fafafa;\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-number-input {\n box-sizing: border-box;\n flex: 1 1 auto;\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n border: none;\n background: transparent;\n color: inherit;\n font-size: inherit;\n outline: none;\n appearance: textfield;\n -moz-appearance: textfield;\n}\n.canvas-react-number-input::placeholder {\n color: #9ca3af;\n}\n.canvas-react-number-input::-webkit-outer-spin-button,\n.canvas-react-number-input::-webkit-inner-spin-button {\n margin: 0;\n -webkit-appearance: none;\n}\n.canvas-react-number-input-suffix {\n display: inline-flex;\n align-items: center;\n padding-right: var(--canvas-react-control-padding-inline, 11px);\n}\n.canvas-react-number-input-clear {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-number-input-affix-wrapper:hover .canvas-react-number-input-clear,\n.canvas-react-number-input-affix-wrapper:focus-within .canvas-react-number-input-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-number-input-clear:hover {\n color: #6b7280;\n transform: rotate(90deg);\n}\n.canvas-react-number-input-clear-icon,\n.canvas-react-number-input-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-number-input-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-number-input-clear-icon::before {\n transform: rotate(90deg);\n}\n');
|
|
4192
4323
|
var ReactNumberInput = forwardRef(
|
|
4193
4324
|
function ReactNumberInput2(props, ref) {
|
|
4194
4325
|
const {
|
|
@@ -4258,6 +4389,238 @@ function toDisplayValue(value) {
|
|
|
4258
4389
|
return value == null ? "" : String(value);
|
|
4259
4390
|
}
|
|
4260
4391
|
|
|
4392
|
+
// src/components/input-number/style.css
|
|
4393
|
+
styleInject('@import "../../styles/variables.css";\n.canvas-react-input-number {\n box-sizing: border-box;\n display: inline-flex;\n align-items: stretch;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n overflow: hidden;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-input-number:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-input-number-focused {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-input-number-disabled {\n background: #fafafa;\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-input-number-handler {\n position: relative;\n display: flex;\n flex: 0 0 28px;\n align-items: center;\n justify-content: center;\n margin: 0;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--canvas-react-color-text-muted);\n cursor: pointer;\n transition: color 0.16s ease, background-color 0.16s ease;\n}\n.canvas-react-input-number-handler-down {\n border-right: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-input-number-handler-up {\n border-left: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-input-number-handler:hover:not(:disabled) {\n color: var(--canvas-react-color-primary);\n background: rgba(22, 119, 255, 0.06);\n}\n.canvas-react-input-number-handler:disabled {\n color: #c4c7cf;\n cursor: not-allowed;\n}\n.canvas-react-input-number-handler-icon {\n position: relative;\n display: block;\n width: 10px;\n height: 10px;\n}\n.canvas-react-input-number-handler-icon::before,\n.canvas-react-input-number-handler-icon::after {\n content: "";\n position: absolute;\n top: 50%;\n left: 50%;\n background: currentColor;\n border-radius: 1px;\n transform: translate(-50%, -50%);\n}\n.canvas-react-input-number-handler-icon::before {\n width: 10px;\n height: 1.5px;\n}\n.canvas-react-input-number-handler-up .canvas-react-input-number-handler-icon::after {\n width: 1.5px;\n height: 10px;\n}\n.canvas-react-input-number-input-wrap {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n min-width: 0;\n height: 100%;\n}\n.canvas-react-input-number-input {\n box-sizing: border-box;\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0 8px;\n border: none;\n background: transparent;\n color: inherit;\n font-size: inherit;\n outline: none;\n text-align: center;\n appearance: textfield;\n -moz-appearance: textfield;\n}\n.canvas-react-input-number-input::placeholder {\n color: #9ca3af;\n}\n.canvas-react-input-number-input::-webkit-outer-spin-button,\n.canvas-react-input-number-input::-webkit-inner-spin-button {\n margin: 0;\n -webkit-appearance: none;\n}\n.canvas-react-input-number-addon {\n flex: 0 0 auto;\n padding-right: 8px;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n line-height: 1;\n user-select: none;\n}\n');
|
|
4394
|
+
var ReactInputNumber = forwardRef(
|
|
4395
|
+
function ReactInputNumber2(props, ref) {
|
|
4396
|
+
const {
|
|
4397
|
+
addonAfter,
|
|
4398
|
+
className,
|
|
4399
|
+
defaultValue = null,
|
|
4400
|
+
disabled,
|
|
4401
|
+
formatter,
|
|
4402
|
+
max,
|
|
4403
|
+
min,
|
|
4404
|
+
onBlur,
|
|
4405
|
+
onChange,
|
|
4406
|
+
onCommit,
|
|
4407
|
+
onFocus,
|
|
4408
|
+
onKeyDown,
|
|
4409
|
+
parser,
|
|
4410
|
+
precision,
|
|
4411
|
+
step = 1,
|
|
4412
|
+
style,
|
|
4413
|
+
value,
|
|
4414
|
+
...restProps
|
|
4415
|
+
} = props;
|
|
4416
|
+
const isControlled = value !== void 0;
|
|
4417
|
+
const [innerValue, setInnerValue] = useState(
|
|
4418
|
+
isControlled ? value ?? null : defaultValue
|
|
4419
|
+
);
|
|
4420
|
+
const currentValue = isControlled ? value ?? null : innerValue;
|
|
4421
|
+
const [draftText, setDraftText] = useState(
|
|
4422
|
+
formatDisplayValue(
|
|
4423
|
+
currentValue,
|
|
4424
|
+
formatter,
|
|
4425
|
+
resolvePrecision(precision, step),
|
|
4426
|
+
step
|
|
4427
|
+
)
|
|
4428
|
+
);
|
|
4429
|
+
const [focused, setFocused] = useState(false);
|
|
4430
|
+
const resolvedPrecision = useMemo(
|
|
4431
|
+
() => resolvePrecision(precision, step),
|
|
4432
|
+
[precision, step]
|
|
4433
|
+
);
|
|
4434
|
+
useEffect(() => {
|
|
4435
|
+
if (!focused) {
|
|
4436
|
+
setDraftText(
|
|
4437
|
+
formatDisplayValue(currentValue, formatter, resolvedPrecision, step)
|
|
4438
|
+
);
|
|
4439
|
+
}
|
|
4440
|
+
}, [currentValue, focused, formatter, resolvedPrecision, step]);
|
|
4441
|
+
const commitValue = (nextValue) => {
|
|
4442
|
+
const normalized = normalizeNumberValue(nextValue, {
|
|
4443
|
+
min,
|
|
4444
|
+
max,
|
|
4445
|
+
precision: resolvedPrecision
|
|
4446
|
+
});
|
|
4447
|
+
if (!isControlled) {
|
|
4448
|
+
setInnerValue(normalized);
|
|
4449
|
+
}
|
|
4450
|
+
onChange?.(normalized);
|
|
4451
|
+
onCommit?.(normalized);
|
|
4452
|
+
setDraftText(
|
|
4453
|
+
formatDisplayValue(normalized, formatter, resolvedPrecision, step)
|
|
4454
|
+
);
|
|
4455
|
+
return normalized;
|
|
4456
|
+
};
|
|
4457
|
+
const stepBy = (direction) => {
|
|
4458
|
+
if (disabled) {
|
|
4459
|
+
return;
|
|
4460
|
+
}
|
|
4461
|
+
const base = currentValue == null || !Number.isFinite(currentValue) ? 0 : currentValue;
|
|
4462
|
+
const next = base + direction * step;
|
|
4463
|
+
commitValue(next);
|
|
4464
|
+
};
|
|
4465
|
+
const atMin = currentValue != null && min != null && currentValue <= min + Number.EPSILON;
|
|
4466
|
+
const atMax = currentValue != null && max != null && currentValue >= max - Number.EPSILON;
|
|
4467
|
+
return /* @__PURE__ */ jsxs(
|
|
4468
|
+
"span",
|
|
4469
|
+
{
|
|
4470
|
+
className: joinClassNames(
|
|
4471
|
+
`${REACT_COMPONENT_PREFIX}-input-number`,
|
|
4472
|
+
focused && `${REACT_COMPONENT_PREFIX}-input-number-focused`,
|
|
4473
|
+
disabled && `${REACT_COMPONENT_PREFIX}-input-number-disabled`,
|
|
4474
|
+
className
|
|
4475
|
+
),
|
|
4476
|
+
style,
|
|
4477
|
+
children: [
|
|
4478
|
+
/* @__PURE__ */ jsx(
|
|
4479
|
+
"button",
|
|
4480
|
+
{
|
|
4481
|
+
type: "button",
|
|
4482
|
+
tabIndex: -1,
|
|
4483
|
+
disabled: disabled || atMin,
|
|
4484
|
+
className: joinClassNames(
|
|
4485
|
+
`${REACT_COMPONENT_PREFIX}-input-number-handler`,
|
|
4486
|
+
`${REACT_COMPONENT_PREFIX}-input-number-handler-down`
|
|
4487
|
+
),
|
|
4488
|
+
"aria-label": "\u51CF\u5C11",
|
|
4489
|
+
onMouseDown: (event) => {
|
|
4490
|
+
event.preventDefault();
|
|
4491
|
+
},
|
|
4492
|
+
onClick: () => {
|
|
4493
|
+
stepBy(-1);
|
|
4494
|
+
},
|
|
4495
|
+
children: /* @__PURE__ */ jsx(
|
|
4496
|
+
"span",
|
|
4497
|
+
{
|
|
4498
|
+
className: `${REACT_COMPONENT_PREFIX}-input-number-handler-icon`,
|
|
4499
|
+
"aria-hidden": "true"
|
|
4500
|
+
}
|
|
4501
|
+
)
|
|
4502
|
+
}
|
|
4503
|
+
),
|
|
4504
|
+
/* @__PURE__ */ jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-input-number-input-wrap`, children: [
|
|
4505
|
+
/* @__PURE__ */ jsx(
|
|
4506
|
+
"input",
|
|
4507
|
+
{
|
|
4508
|
+
...restProps,
|
|
4509
|
+
ref,
|
|
4510
|
+
disabled,
|
|
4511
|
+
inputMode: "decimal",
|
|
4512
|
+
value: draftText,
|
|
4513
|
+
className: `${REACT_COMPONENT_PREFIX}-input-number-input`,
|
|
4514
|
+
onFocus: (event) => {
|
|
4515
|
+
setFocused(true);
|
|
4516
|
+
onFocus?.(event);
|
|
4517
|
+
},
|
|
4518
|
+
onChange: (event) => {
|
|
4519
|
+
const nextText = event.target.value;
|
|
4520
|
+
setDraftText(nextText);
|
|
4521
|
+
const parsed = parser ? parser(nextText) : parseNumberText(nextText);
|
|
4522
|
+
if (!isControlled) {
|
|
4523
|
+
setInnerValue(parsed);
|
|
4524
|
+
}
|
|
4525
|
+
onChange?.(parsed);
|
|
4526
|
+
},
|
|
4527
|
+
onBlur: (event) => {
|
|
4528
|
+
setFocused(false);
|
|
4529
|
+
const parsed = parser ? parser(event.target.value) : parseNumberText(event.target.value);
|
|
4530
|
+
commitValue(parsed);
|
|
4531
|
+
onBlur?.(event);
|
|
4532
|
+
},
|
|
4533
|
+
onKeyDown: (event) => {
|
|
4534
|
+
if (event.key === "ArrowUp") {
|
|
4535
|
+
event.preventDefault();
|
|
4536
|
+
stepBy(1);
|
|
4537
|
+
} else if (event.key === "ArrowDown") {
|
|
4538
|
+
event.preventDefault();
|
|
4539
|
+
stepBy(-1);
|
|
4540
|
+
} else if (event.key === "Enter") {
|
|
4541
|
+
const parsed = parser ? parser(event.currentTarget.value) : parseNumberText(event.currentTarget.value);
|
|
4542
|
+
commitValue(parsed);
|
|
4543
|
+
}
|
|
4544
|
+
onKeyDown?.(event);
|
|
4545
|
+
}
|
|
4546
|
+
}
|
|
4547
|
+
),
|
|
4548
|
+
addonAfter != null ? /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-input-number-addon`, children: addonAfter }) : null
|
|
4549
|
+
] }),
|
|
4550
|
+
/* @__PURE__ */ jsx(
|
|
4551
|
+
"button",
|
|
4552
|
+
{
|
|
4553
|
+
type: "button",
|
|
4554
|
+
tabIndex: -1,
|
|
4555
|
+
disabled: disabled || atMax,
|
|
4556
|
+
className: joinClassNames(
|
|
4557
|
+
`${REACT_COMPONENT_PREFIX}-input-number-handler`,
|
|
4558
|
+
`${REACT_COMPONENT_PREFIX}-input-number-handler-up`
|
|
4559
|
+
),
|
|
4560
|
+
"aria-label": "\u589E\u52A0",
|
|
4561
|
+
onMouseDown: (event) => {
|
|
4562
|
+
event.preventDefault();
|
|
4563
|
+
},
|
|
4564
|
+
onClick: () => {
|
|
4565
|
+
stepBy(1);
|
|
4566
|
+
},
|
|
4567
|
+
children: /* @__PURE__ */ jsx(
|
|
4568
|
+
"span",
|
|
4569
|
+
{
|
|
4570
|
+
className: `${REACT_COMPONENT_PREFIX}-input-number-handler-icon`,
|
|
4571
|
+
"aria-hidden": "true"
|
|
4572
|
+
}
|
|
4573
|
+
)
|
|
4574
|
+
}
|
|
4575
|
+
)
|
|
4576
|
+
]
|
|
4577
|
+
}
|
|
4578
|
+
);
|
|
4579
|
+
}
|
|
4580
|
+
);
|
|
4581
|
+
function parseNumberText(value) {
|
|
4582
|
+
const text = value.trim().replace(/%/g, "");
|
|
4583
|
+
if (!text) {
|
|
4584
|
+
return null;
|
|
4585
|
+
}
|
|
4586
|
+
const nextValue = Number(text);
|
|
4587
|
+
return Number.isFinite(nextValue) ? nextValue : null;
|
|
4588
|
+
}
|
|
4589
|
+
function resolvePrecision(precision, step) {
|
|
4590
|
+
if (typeof precision === "number" && Number.isInteger(precision) && precision >= 0) {
|
|
4591
|
+
return precision;
|
|
4592
|
+
}
|
|
4593
|
+
const stepText = String(step);
|
|
4594
|
+
if (!stepText.includes(".")) {
|
|
4595
|
+
return 0;
|
|
4596
|
+
}
|
|
4597
|
+
return stepText.split(".")[1]?.length ?? 0;
|
|
4598
|
+
}
|
|
4599
|
+
function normalizeNumberValue(value, options) {
|
|
4600
|
+
if (value == null || !Number.isFinite(value)) {
|
|
4601
|
+
return null;
|
|
4602
|
+
}
|
|
4603
|
+
let next = value;
|
|
4604
|
+
if (options.min != null) {
|
|
4605
|
+
next = Math.max(options.min, next);
|
|
4606
|
+
}
|
|
4607
|
+
if (options.max != null) {
|
|
4608
|
+
next = Math.min(options.max, next);
|
|
4609
|
+
}
|
|
4610
|
+
const factor = 10 ** options.precision;
|
|
4611
|
+
return Math.round(next * factor) / factor;
|
|
4612
|
+
}
|
|
4613
|
+
function formatDisplayValue(value, formatter, precision, step) {
|
|
4614
|
+
if (formatter) {
|
|
4615
|
+
return formatter(value);
|
|
4616
|
+
}
|
|
4617
|
+
if (value == null || !Number.isFinite(value)) {
|
|
4618
|
+
return "";
|
|
4619
|
+
}
|
|
4620
|
+
const digits = resolvePrecision(precision, step);
|
|
4621
|
+
return digits > 0 ? value.toFixed(digits) : String(Math.round(value));
|
|
4622
|
+
}
|
|
4623
|
+
|
|
4261
4624
|
// src/components/virtual-list/style.css
|
|
4262
4625
|
styleInject('@import "../../styles/variables.css";\n.canvas-react-virtual-list {\n position: relative;\n overflow-y: auto;\n}\n.canvas-react-virtual-list-inner {\n position: relative;\n min-width: 100%;\n}\n.canvas-react-virtual-list-empty {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 11px;\n color: #9ca3af;\n font-size: var(--canvas-react-font-size);\n}\n');
|
|
4263
4626
|
var ReactVirtualList = forwardRef(function ReactVirtualListInner(props, ref) {
|
|
@@ -4344,7 +4707,7 @@ var ReactVirtualList = forwardRef(function ReactVirtualListInner(props, ref) {
|
|
|
4344
4707
|
});
|
|
4345
4708
|
|
|
4346
4709
|
// src/components/select/style.css
|
|
4347
|
-
styleInject('@import "../../styles/variables.css";\n.canvas-react-select-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-select {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding:
|
|
4710
|
+
styleInject('@import "../../styles/variables.css";\n.canvas-react-select-wrap {\n position: relative;\n display: inline-flex;\n width: 100%;\n height: 100%;\n}\n.canvas-react-select {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n outline: none;\n cursor: pointer;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease,\n background-color 0.2s ease;\n}\n.canvas-react-select-input-wrap {\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n box-shadow: none;\n}\n.canvas-react-select .canvas-react-input-affix-wrapper {\n height: 100%;\n min-height: 0;\n}\n.canvas-react-select-input-wrap:hover,\n.canvas-react-select-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-select-input {\n width: 100%;\n min-width: 0;\n height: 100%;\n padding: 0;\n line-height: normal;\n}\n.canvas-react-select-input::placeholder {\n color: #9ca3af;\n}\n.canvas-react-select:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-select:focus {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-open {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-disabled {\n color: #9ca3af;\n background: #fafafa;\n cursor: not-allowed;\n}\n.canvas-react-select-actions {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 1em;\n min-width: 12px;\n height: 1em;\n min-height: 12px;\n margin-left: max(6px, calc(var(--canvas-react-control-padding-inline, 11px) * 0.5));\n}\n.canvas-react-select-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0.5em;\n height: 0.5em;\n min-width: 6px;\n min-height: 6px;\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: translate(-50%, -58%) rotate(45deg);\n opacity: 1;\n transition:\n opacity 0.18s ease,\n transform 0.18s ease,\n border-color 0.18s ease;\n}\n.canvas-react-select:hover .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-arrow {\n border-color: #6b7280;\n}\n.canvas-react-select-arrow-open {\n border-color: #6b7280;\n transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-select-clear {\n position: absolute;\n top: 50%;\n left: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 12px;\n height: 12px;\n padding: 0;\n border: none;\n background: transparent;\n color: #9ca3af;\n opacity: 0;\n pointer-events: none;\n cursor: pointer;\n transform: translate(-50%, -50%) rotate(0deg);\n transition:\n color 0.2s ease,\n opacity 0.2s ease,\n transform 0.18s ease;\n}\n.canvas-react-select-clear:hover {\n color: #6b7280;\n transform: translate(-50%, -50%) rotate(90deg);\n}\n.canvas-react-select:hover .canvas-react-select-clear,\n.canvas-react-select-open .canvas-react-select-clear,\n.canvas-react-select:focus-within .canvas-react-select-clear {\n opacity: 1;\n pointer-events: auto;\n}\n.canvas-react-select:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select:focus-within .canvas-react-select-actions-clearable .canvas-react-select-arrow {\n opacity: 0;\n}\n.canvas-react-select-clear-icon,\n.canvas-react-select-clear-icon::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 8px;\n height: 1.25px;\n margin-top: -0.625px;\n margin-left: -4px;\n border-radius: 999px;\n background: currentColor;\n content: "";\n}\n.canvas-react-select-clear-icon {\n transform: rotate(45deg);\n}\n.canvas-react-select-clear-icon::before {\n transform: rotate(90deg);\n}\n.canvas-react-select-dropdown {\n padding: 4px;\n}\n.canvas-react-select-list {\n position: relative;\n overflow-y: auto;\n}\n.canvas-react-select-list-inner {\n position: relative;\n}\n.canvas-react-select-option {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n padding: 0 11px;\n border-radius: var(--canvas-react-radius-sm);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n cursor: pointer;\n}\n.canvas-react-select-option:hover,\n.canvas-react-select-option-active {\n background: var(--canvas-react-color-bg-hover);\n}\n.canvas-react-select-option-selected {\n background: var(--canvas-react-color-bg-active);\n color: var(--canvas-react-color-primary);\n}\n.canvas-react-select-option-disabled {\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-select-empty {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 11px;\n color: #9ca3af;\n font-size: var(--canvas-react-font-size);\n}\n');
|
|
4348
4711
|
var ReactSelect = forwardRef(
|
|
4349
4712
|
function ReactSelect2(props, ref) {
|
|
4350
4713
|
const {
|
|
@@ -4361,6 +4724,7 @@ var ReactSelect = forwardRef(
|
|
|
4361
4724
|
placeholder,
|
|
4362
4725
|
popupClassName,
|
|
4363
4726
|
allowClear = true,
|
|
4727
|
+
showArrow = true,
|
|
4364
4728
|
showSearch = false,
|
|
4365
4729
|
style,
|
|
4366
4730
|
value,
|
|
@@ -4552,7 +4916,7 @@ var ReactSelect = forwardRef(
|
|
|
4552
4916
|
}
|
|
4553
4917
|
}
|
|
4554
4918
|
),
|
|
4555
|
-
/* @__PURE__ */ jsxs(
|
|
4919
|
+
showClear || showArrow ? /* @__PURE__ */ jsxs(
|
|
4556
4920
|
"span",
|
|
4557
4921
|
{
|
|
4558
4922
|
className: joinClassNames(
|
|
@@ -4580,7 +4944,7 @@ var ReactSelect = forwardRef(
|
|
|
4580
4944
|
)
|
|
4581
4945
|
}
|
|
4582
4946
|
) : null,
|
|
4583
|
-
/* @__PURE__ */ jsx(
|
|
4947
|
+
showArrow ? /* @__PURE__ */ jsx(
|
|
4584
4948
|
"span",
|
|
4585
4949
|
{
|
|
4586
4950
|
className: joinClassNames(
|
|
@@ -4588,10 +4952,10 @@ var ReactSelect = forwardRef(
|
|
|
4588
4952
|
open && `${REACT_COMPONENT_PREFIX}-select-arrow-open`
|
|
4589
4953
|
)
|
|
4590
4954
|
}
|
|
4591
|
-
)
|
|
4955
|
+
) : null
|
|
4592
4956
|
]
|
|
4593
4957
|
}
|
|
4594
|
-
)
|
|
4958
|
+
) : null
|
|
4595
4959
|
]
|
|
4596
4960
|
}
|
|
4597
4961
|
),
|
|
@@ -4830,6 +5194,240 @@ function clampPage(page, totalPages) {
|
|
|
4830
5194
|
}
|
|
4831
5195
|
return Math.min(Math.max(1, Math.trunc(page)), totalPages);
|
|
4832
5196
|
}
|
|
5197
|
+
var compatibleIdSeed = 0;
|
|
5198
|
+
function useCompatibleId(prefix = "canvas-react-id") {
|
|
5199
|
+
const nativeUseId = React.useId;
|
|
5200
|
+
const fallbackIdRef = React.useRef();
|
|
5201
|
+
if (!fallbackIdRef.current) {
|
|
5202
|
+
compatibleIdSeed += 1;
|
|
5203
|
+
fallbackIdRef.current = `${prefix}-${compatibleIdSeed}`;
|
|
5204
|
+
}
|
|
5205
|
+
return nativeUseId ? nativeUseId() : fallbackIdRef.current;
|
|
5206
|
+
}
|
|
5207
|
+
|
|
5208
|
+
// src/components/popconfirm/style.css
|
|
5209
|
+
styleInject('@import "../../styles/variables.css";\n.canvas-react-popconfirm-trigger {\n display: inline-flex;\n max-width: 100%;\n}\n.canvas-react-popconfirm-trigger-disabled {\n cursor: not-allowed;\n}\n.canvas-react-popconfirm-popup {\n overflow: visible;\n}\n.canvas-react-popconfirm {\n position: relative;\n box-sizing: border-box;\n width: max-content;\n min-width: 180px;\n max-width: 320px;\n padding: 12px;\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n line-height: 1.5;\n}\n.canvas-react-popconfirm-arrow {\n position: absolute;\n z-index: 1;\n box-sizing: border-box;\n width: 10px;\n height: 10px;\n border: 0;\n background: var(--canvas-react-color-bg, #ffffff);\n pointer-events: none;\n transform: rotate(45deg);\n}\n.canvas-react-popup[data-placement^=bottom] .canvas-react-popconfirm-arrow {\n top: -5px;\n border-top: 1px solid var(--canvas-react-color-border, #d9d9d9);\n border-left: 1px solid var(--canvas-react-color-border, #d9d9d9);\n}\n.canvas-react-popup[data-placement^=top] .canvas-react-popconfirm-arrow {\n bottom: -5px;\n border-right: 1px solid var(--canvas-react-color-border, #d9d9d9);\n border-bottom: 1px solid var(--canvas-react-color-border, #d9d9d9);\n}\n.canvas-react-popup[data-placement$=Left] .canvas-react-popconfirm-arrow {\n left: 24px;\n}\n.canvas-react-popup[data-placement$=Right] .canvas-react-popconfirm-arrow {\n right: 24px;\n}\n.canvas-react-popup[data-placement^=left] .canvas-react-popconfirm-arrow {\n right: -5px;\n border-top: 1px solid var(--canvas-react-color-border, #d9d9d9);\n border-right: 1px solid var(--canvas-react-color-border, #d9d9d9);\n}\n.canvas-react-popup[data-placement^=right] .canvas-react-popconfirm-arrow {\n left: -5px;\n border-bottom: 1px solid var(--canvas-react-color-border, #d9d9d9);\n border-left: 1px solid var(--canvas-react-color-border, #d9d9d9);\n}\n.canvas-react-popup[data-placement$=Top] .canvas-react-popconfirm-arrow {\n top: 18px;\n}\n.canvas-react-popup[data-placement$=Bottom] .canvas-react-popconfirm-arrow {\n bottom: 18px;\n}\n.canvas-react-popconfirm-message {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n}\n.canvas-react-popconfirm-icon {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n margin-top: 2px;\n color: #faad14;\n font-size: 12px;\n line-height: 1;\n}\n.canvas-react-popconfirm-default-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: #faad14;\n color: #ffffff;\n font-size: 11px;\n font-weight: 700;\n line-height: 1;\n}\n.canvas-react-popconfirm-text {\n min-width: 0;\n}\n.canvas-react-popconfirm-title {\n color: var(--canvas-react-color-text);\n font-weight: 500;\n word-break: break-word;\n}\n.canvas-react-popconfirm-description {\n margin-top: 4px;\n color: var(--canvas-react-color-text-muted);\n word-break: break-word;\n}\n.canvas-react-popconfirm-actions {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n margin-top: 12px;\n}\n.canvas-react-popconfirm-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n height: 26px;\n min-width: 48px;\n padding: 0 10px;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: 12px;\n line-height: 1;\n white-space: nowrap;\n cursor: pointer;\n transition:\n border-color 0.18s ease,\n background-color 0.18s ease,\n color 0.18s ease,\n opacity 0.18s ease;\n}\n.canvas-react-popconfirm-button:hover {\n border-color: var(--canvas-react-color-primary-hover);\n color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-popconfirm-button-primary {\n border-color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-primary);\n color: #ffffff;\n}\n.canvas-react-popconfirm-button-primary:hover {\n border-color: var(--canvas-react-color-primary-hover);\n background: var(--canvas-react-color-primary-hover);\n color: #ffffff;\n}\n.canvas-react-popconfirm-button:disabled {\n opacity: 0.56;\n cursor: not-allowed;\n}\n.canvas-react-popconfirm-button:disabled:hover {\n border-color: var(--canvas-react-color-border);\n color: var(--canvas-react-color-text);\n}\n.canvas-react-popconfirm-button-primary:disabled:hover {\n border-color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-primary);\n color: #ffffff;\n}\n.canvas-react-popconfirm-loading {\n width: 12px;\n height: 12px;\n border: 2px solid rgba(255, 255, 255, 0.45);\n border-top-color: #ffffff;\n border-radius: 50%;\n animation: canvas-react-popconfirm-loading 0.8s linear infinite;\n}\n@keyframes canvas-react-popconfirm-loading {\n to {\n transform: rotate(360deg);\n }\n}\n');
|
|
5210
|
+
function ReactPopconfirm(props) {
|
|
5211
|
+
const {
|
|
5212
|
+
cancelButtonProps,
|
|
5213
|
+
cancelText = "\u53D6\u6D88",
|
|
5214
|
+
children,
|
|
5215
|
+
className,
|
|
5216
|
+
confirmLoading,
|
|
5217
|
+
defaultOpen = false,
|
|
5218
|
+
description,
|
|
5219
|
+
disabled = false,
|
|
5220
|
+
icon,
|
|
5221
|
+
offset = 8,
|
|
5222
|
+
okButtonProps,
|
|
5223
|
+
okText = "\u786E\u5B9A",
|
|
5224
|
+
onCancel,
|
|
5225
|
+
onConfirm,
|
|
5226
|
+
onOpenChange,
|
|
5227
|
+
open,
|
|
5228
|
+
placement = "topLeft",
|
|
5229
|
+
popupClassName,
|
|
5230
|
+
popupStyle,
|
|
5231
|
+
showCancel = true,
|
|
5232
|
+
style,
|
|
5233
|
+
title,
|
|
5234
|
+
zIndex
|
|
5235
|
+
} = props;
|
|
5236
|
+
const triggerRef = useRef(null);
|
|
5237
|
+
const [innerOpen, setInnerOpen] = useState(defaultOpen);
|
|
5238
|
+
const [innerConfirmLoading, setInnerConfirmLoading] = useState(false);
|
|
5239
|
+
const titleId = useCompatibleId("canvas-react-popconfirm-title");
|
|
5240
|
+
const descriptionId = useCompatibleId("canvas-react-popconfirm-description");
|
|
5241
|
+
const controlled = open !== void 0;
|
|
5242
|
+
const mergedOpen = controlled ? Boolean(open) : innerOpen;
|
|
5243
|
+
const popupOpen = mergedOpen && !disabled;
|
|
5244
|
+
const mergedConfirmLoading = confirmLoading ?? innerConfirmLoading;
|
|
5245
|
+
const hasTitle = title !== null && title !== void 0 && title !== false;
|
|
5246
|
+
const hasDescription = description !== null && description !== void 0 && description !== false;
|
|
5247
|
+
const {
|
|
5248
|
+
className: okButtonClassName,
|
|
5249
|
+
disabled: okButtonDisabled,
|
|
5250
|
+
...restOkButtonProps
|
|
5251
|
+
} = okButtonProps ?? {};
|
|
5252
|
+
const {
|
|
5253
|
+
className: cancelButtonClassName,
|
|
5254
|
+
disabled: cancelButtonDisabled,
|
|
5255
|
+
...restCancelButtonProps
|
|
5256
|
+
} = cancelButtonProps ?? {};
|
|
5257
|
+
useEffect(() => {
|
|
5258
|
+
if (!disabled || !mergedOpen) {
|
|
5259
|
+
return;
|
|
5260
|
+
}
|
|
5261
|
+
if (!controlled) {
|
|
5262
|
+
setInnerOpen(false);
|
|
5263
|
+
}
|
|
5264
|
+
onOpenChange?.(false);
|
|
5265
|
+
}, [controlled, disabled, mergedOpen, onOpenChange]);
|
|
5266
|
+
const setOpen = (nextOpen) => {
|
|
5267
|
+
const safeOpen = disabled ? false : nextOpen;
|
|
5268
|
+
if (!controlled) {
|
|
5269
|
+
setInnerOpen(safeOpen);
|
|
5270
|
+
}
|
|
5271
|
+
if (safeOpen !== mergedOpen) {
|
|
5272
|
+
onOpenChange?.(safeOpen);
|
|
5273
|
+
}
|
|
5274
|
+
};
|
|
5275
|
+
const handleConfirm = (event) => {
|
|
5276
|
+
if (mergedConfirmLoading || okButtonDisabled) {
|
|
5277
|
+
return;
|
|
5278
|
+
}
|
|
5279
|
+
const result = onConfirm?.(event);
|
|
5280
|
+
if (isPromiseLike(result)) {
|
|
5281
|
+
setInnerConfirmLoading(true);
|
|
5282
|
+
Promise.resolve(result).then(() => {
|
|
5283
|
+
setOpen(false);
|
|
5284
|
+
}).catch(() => void 0).finally(() => {
|
|
5285
|
+
setInnerConfirmLoading(false);
|
|
5286
|
+
});
|
|
5287
|
+
return;
|
|
5288
|
+
}
|
|
5289
|
+
setOpen(false);
|
|
5290
|
+
};
|
|
5291
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
5292
|
+
/* @__PURE__ */ jsx(
|
|
5293
|
+
"span",
|
|
5294
|
+
{
|
|
5295
|
+
ref: triggerRef,
|
|
5296
|
+
className: joinClassNames(
|
|
5297
|
+
`${REACT_COMPONENT_PREFIX}-popconfirm-trigger`,
|
|
5298
|
+
disabled && `${REACT_COMPONENT_PREFIX}-popconfirm-trigger-disabled`,
|
|
5299
|
+
className
|
|
5300
|
+
),
|
|
5301
|
+
style,
|
|
5302
|
+
"aria-expanded": popupOpen,
|
|
5303
|
+
"aria-haspopup": "dialog",
|
|
5304
|
+
onClick: () => {
|
|
5305
|
+
if (disabled) {
|
|
5306
|
+
return;
|
|
5307
|
+
}
|
|
5308
|
+
setOpen(!mergedOpen);
|
|
5309
|
+
},
|
|
5310
|
+
children
|
|
5311
|
+
}
|
|
5312
|
+
),
|
|
5313
|
+
/* @__PURE__ */ jsx(
|
|
5314
|
+
ReactPopup,
|
|
5315
|
+
{
|
|
5316
|
+
open: popupOpen,
|
|
5317
|
+
anchorRef: triggerRef,
|
|
5318
|
+
offset,
|
|
5319
|
+
placement,
|
|
5320
|
+
zIndex,
|
|
5321
|
+
surfaceClassName: joinClassNames(
|
|
5322
|
+
`${REACT_COMPONENT_PREFIX}-popconfirm-popup`,
|
|
5323
|
+
`${REACT_COMPONENT_PREFIX}-popconfirm-placement-${placement}`,
|
|
5324
|
+
popupClassName
|
|
5325
|
+
),
|
|
5326
|
+
surfaceStyle: popupStyle,
|
|
5327
|
+
onOpenChange: setOpen,
|
|
5328
|
+
children: /* @__PURE__ */ jsxs(
|
|
5329
|
+
"div",
|
|
5330
|
+
{
|
|
5331
|
+
className: `${REACT_COMPONENT_PREFIX}-popconfirm`,
|
|
5332
|
+
role: "alertdialog",
|
|
5333
|
+
"aria-labelledby": hasTitle ? titleId : void 0,
|
|
5334
|
+
"aria-describedby": hasDescription ? descriptionId : void 0,
|
|
5335
|
+
children: [
|
|
5336
|
+
/* @__PURE__ */ jsx(
|
|
5337
|
+
"span",
|
|
5338
|
+
{
|
|
5339
|
+
className: `${REACT_COMPONENT_PREFIX}-popconfirm-arrow`,
|
|
5340
|
+
"aria-hidden": "true"
|
|
5341
|
+
}
|
|
5342
|
+
),
|
|
5343
|
+
/* @__PURE__ */ jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-popconfirm-message`, children: [
|
|
5344
|
+
icon !== null ? /* @__PURE__ */ jsx(
|
|
5345
|
+
"span",
|
|
5346
|
+
{
|
|
5347
|
+
className: `${REACT_COMPONENT_PREFIX}-popconfirm-icon`,
|
|
5348
|
+
"aria-hidden": "true",
|
|
5349
|
+
children: icon ?? /* @__PURE__ */ jsx(
|
|
5350
|
+
"span",
|
|
5351
|
+
{
|
|
5352
|
+
className: `${REACT_COMPONENT_PREFIX}-popconfirm-default-icon`,
|
|
5353
|
+
children: "!"
|
|
5354
|
+
}
|
|
5355
|
+
)
|
|
5356
|
+
}
|
|
5357
|
+
) : null,
|
|
5358
|
+
/* @__PURE__ */ jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-popconfirm-text`, children: [
|
|
5359
|
+
hasTitle ? /* @__PURE__ */ jsx(
|
|
5360
|
+
"div",
|
|
5361
|
+
{
|
|
5362
|
+
id: titleId,
|
|
5363
|
+
className: `${REACT_COMPONENT_PREFIX}-popconfirm-title`,
|
|
5364
|
+
children: title
|
|
5365
|
+
}
|
|
5366
|
+
) : null,
|
|
5367
|
+
hasDescription ? /* @__PURE__ */ jsx(
|
|
5368
|
+
"div",
|
|
5369
|
+
{
|
|
5370
|
+
id: descriptionId,
|
|
5371
|
+
className: `${REACT_COMPONENT_PREFIX}-popconfirm-description`,
|
|
5372
|
+
children: description
|
|
5373
|
+
}
|
|
5374
|
+
) : null
|
|
5375
|
+
] })
|
|
5376
|
+
] }),
|
|
5377
|
+
/* @__PURE__ */ jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-popconfirm-actions`, children: [
|
|
5378
|
+
showCancel ? /* @__PURE__ */ jsx(
|
|
5379
|
+
"button",
|
|
5380
|
+
{
|
|
5381
|
+
...restCancelButtonProps,
|
|
5382
|
+
type: "button",
|
|
5383
|
+
className: joinClassNames(
|
|
5384
|
+
`${REACT_COMPONENT_PREFIX}-popconfirm-button`,
|
|
5385
|
+
`${REACT_COMPONENT_PREFIX}-popconfirm-button-cancel`,
|
|
5386
|
+
cancelButtonClassName
|
|
5387
|
+
),
|
|
5388
|
+
disabled: mergedConfirmLoading || cancelButtonDisabled,
|
|
5389
|
+
onClick: (event) => {
|
|
5390
|
+
onCancel?.(event);
|
|
5391
|
+
setOpen(false);
|
|
5392
|
+
},
|
|
5393
|
+
children: cancelText
|
|
5394
|
+
}
|
|
5395
|
+
) : null,
|
|
5396
|
+
/* @__PURE__ */ jsxs(
|
|
5397
|
+
"button",
|
|
5398
|
+
{
|
|
5399
|
+
...restOkButtonProps,
|
|
5400
|
+
type: "button",
|
|
5401
|
+
className: joinClassNames(
|
|
5402
|
+
`${REACT_COMPONENT_PREFIX}-popconfirm-button`,
|
|
5403
|
+
`${REACT_COMPONENT_PREFIX}-popconfirm-button-primary`,
|
|
5404
|
+
okButtonClassName
|
|
5405
|
+
),
|
|
5406
|
+
disabled: mergedConfirmLoading || okButtonDisabled,
|
|
5407
|
+
onClick: handleConfirm,
|
|
5408
|
+
children: [
|
|
5409
|
+
mergedConfirmLoading ? /* @__PURE__ */ jsx(
|
|
5410
|
+
"span",
|
|
5411
|
+
{
|
|
5412
|
+
className: `${REACT_COMPONENT_PREFIX}-popconfirm-loading`,
|
|
5413
|
+
"aria-hidden": "true"
|
|
5414
|
+
}
|
|
5415
|
+
) : null,
|
|
5416
|
+
/* @__PURE__ */ jsx("span", { children: okText })
|
|
5417
|
+
]
|
|
5418
|
+
}
|
|
5419
|
+
)
|
|
5420
|
+
] })
|
|
5421
|
+
]
|
|
5422
|
+
}
|
|
5423
|
+
)
|
|
5424
|
+
}
|
|
5425
|
+
)
|
|
5426
|
+
] });
|
|
5427
|
+
}
|
|
5428
|
+
function isPromiseLike(value) {
|
|
5429
|
+
return typeof value === "object" && value !== null && "then" in value && typeof value.then === "function";
|
|
5430
|
+
}
|
|
4833
5431
|
|
|
4834
5432
|
// src/components/quarter/style.css
|
|
4835
5433
|
styleInject('@import "../year/style.css";\n.canvas-react-quarter-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 12px 8px;\n}\n.canvas-react-quarter-cell {\n height: 56px;\n font-size: 16px;\n font-weight: 600;\n}\n');
|
|
@@ -4847,6 +5445,7 @@ var ReactQuarterPicker = forwardRef(
|
|
|
4847
5445
|
placeholder = "\u8BF7\u9009\u62E9\u5B63\u5EA6",
|
|
4848
5446
|
popupClassName,
|
|
4849
5447
|
allowClear = true,
|
|
5448
|
+
showArrow = true,
|
|
4850
5449
|
style,
|
|
4851
5450
|
value,
|
|
4852
5451
|
...restProps
|
|
@@ -4960,7 +5559,7 @@ var ReactQuarterPicker = forwardRef(
|
|
|
4960
5559
|
}
|
|
4961
5560
|
}
|
|
4962
5561
|
),
|
|
4963
|
-
/* @__PURE__ */ jsxs(
|
|
5562
|
+
showClear || showArrow ? /* @__PURE__ */ jsxs(
|
|
4964
5563
|
"span",
|
|
4965
5564
|
{
|
|
4966
5565
|
className: joinClassNames(
|
|
@@ -4990,7 +5589,7 @@ var ReactQuarterPicker = forwardRef(
|
|
|
4990
5589
|
children: /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-year-clear-icon` })
|
|
4991
5590
|
}
|
|
4992
5591
|
) : null,
|
|
4993
|
-
/* @__PURE__ */ jsx(
|
|
5592
|
+
showArrow ? /* @__PURE__ */ jsx(
|
|
4994
5593
|
"span",
|
|
4995
5594
|
{
|
|
4996
5595
|
className: joinClassNames(
|
|
@@ -4998,10 +5597,10 @@ var ReactQuarterPicker = forwardRef(
|
|
|
4998
5597
|
open && `${REACT_COMPONENT_PREFIX}-year-arrow-open`
|
|
4999
5598
|
)
|
|
5000
5599
|
}
|
|
5001
|
-
)
|
|
5600
|
+
) : null
|
|
5002
5601
|
]
|
|
5003
5602
|
}
|
|
5004
|
-
)
|
|
5603
|
+
) : null
|
|
5005
5604
|
]
|
|
5006
5605
|
}
|
|
5007
5606
|
),
|
|
@@ -5227,6 +5826,7 @@ var ReactTimePicker = forwardRef(
|
|
|
5227
5826
|
placeholder = "HH:mm:ss",
|
|
5228
5827
|
popupClassName,
|
|
5229
5828
|
allowClear = true,
|
|
5829
|
+
showArrow = true,
|
|
5230
5830
|
style,
|
|
5231
5831
|
value,
|
|
5232
5832
|
...restProps
|
|
@@ -5326,7 +5926,7 @@ var ReactTimePicker = forwardRef(
|
|
|
5326
5926
|
}
|
|
5327
5927
|
}
|
|
5328
5928
|
),
|
|
5329
|
-
/* @__PURE__ */ jsxs(
|
|
5929
|
+
showClear || showArrow ? /* @__PURE__ */ jsxs(
|
|
5330
5930
|
"span",
|
|
5331
5931
|
{
|
|
5332
5932
|
className: joinClassNames(
|
|
@@ -5356,7 +5956,7 @@ var ReactTimePicker = forwardRef(
|
|
|
5356
5956
|
children: /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-time-clear-icon` })
|
|
5357
5957
|
}
|
|
5358
5958
|
) : null,
|
|
5359
|
-
/* @__PURE__ */ jsx(
|
|
5959
|
+
showArrow ? /* @__PURE__ */ jsx(
|
|
5360
5960
|
"span",
|
|
5361
5961
|
{
|
|
5362
5962
|
className: joinClassNames(
|
|
@@ -5364,10 +5964,10 @@ var ReactTimePicker = forwardRef(
|
|
|
5364
5964
|
open && `${REACT_COMPONENT_PREFIX}-time-arrow-open`
|
|
5365
5965
|
)
|
|
5366
5966
|
}
|
|
5367
|
-
)
|
|
5967
|
+
) : null
|
|
5368
5968
|
]
|
|
5369
5969
|
}
|
|
5370
|
-
)
|
|
5970
|
+
) : null
|
|
5371
5971
|
]
|
|
5372
5972
|
}
|
|
5373
5973
|
),
|
|
@@ -5465,6 +6065,7 @@ var ReactTimeRangePicker = forwardRef(function ReactTimeRangePicker2(props, ref)
|
|
|
5465
6065
|
rangeSeparator = " ~ ",
|
|
5466
6066
|
style,
|
|
5467
6067
|
value,
|
|
6068
|
+
showArrow = true,
|
|
5468
6069
|
...restProps
|
|
5469
6070
|
} = props;
|
|
5470
6071
|
const triggerRef = useRef(null);
|
|
@@ -5646,7 +6247,7 @@ var ReactTimeRangePicker = forwardRef(function ReactTimeRangePicker2(props, ref)
|
|
|
5646
6247
|
}
|
|
5647
6248
|
)
|
|
5648
6249
|
] }),
|
|
5649
|
-
/* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-time-actions`, children: /* @__PURE__ */ jsx(
|
|
6250
|
+
showArrow ? /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-time-actions`, children: /* @__PURE__ */ jsx(
|
|
5650
6251
|
"span",
|
|
5651
6252
|
{
|
|
5652
6253
|
className: joinClassNames(
|
|
@@ -5654,7 +6255,7 @@ var ReactTimeRangePicker = forwardRef(function ReactTimeRangePicker2(props, ref)
|
|
|
5654
6255
|
open && `${REACT_COMPONENT_PREFIX}-time-arrow-open`
|
|
5655
6256
|
)
|
|
5656
6257
|
}
|
|
5657
|
-
) })
|
|
6258
|
+
) }) : null
|
|
5658
6259
|
]
|
|
5659
6260
|
}
|
|
5660
6261
|
),
|
|
@@ -5783,6 +6384,7 @@ var ReactYearPicker = forwardRef(
|
|
|
5783
6384
|
placeholder = "\u8BF7\u9009\u62E9\u5E74\u4EFD",
|
|
5784
6385
|
popupClassName,
|
|
5785
6386
|
allowClear = true,
|
|
6387
|
+
showArrow = true,
|
|
5786
6388
|
style,
|
|
5787
6389
|
value,
|
|
5788
6390
|
...restProps
|
|
@@ -5895,7 +6497,7 @@ var ReactYearPicker = forwardRef(
|
|
|
5895
6497
|
}
|
|
5896
6498
|
}
|
|
5897
6499
|
),
|
|
5898
|
-
/* @__PURE__ */ jsxs(
|
|
6500
|
+
showClear || showArrow ? /* @__PURE__ */ jsxs(
|
|
5899
6501
|
"span",
|
|
5900
6502
|
{
|
|
5901
6503
|
className: joinClassNames(
|
|
@@ -5925,7 +6527,7 @@ var ReactYearPicker = forwardRef(
|
|
|
5925
6527
|
children: /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-year-clear-icon` })
|
|
5926
6528
|
}
|
|
5927
6529
|
) : null,
|
|
5928
|
-
/* @__PURE__ */ jsx(
|
|
6530
|
+
showArrow ? /* @__PURE__ */ jsx(
|
|
5929
6531
|
"span",
|
|
5930
6532
|
{
|
|
5931
6533
|
className: joinClassNames(
|
|
@@ -5933,10 +6535,10 @@ var ReactYearPicker = forwardRef(
|
|
|
5933
6535
|
open && `${REACT_COMPONENT_PREFIX}-year-arrow-open`
|
|
5934
6536
|
)
|
|
5935
6537
|
}
|
|
5936
|
-
)
|
|
6538
|
+
) : null
|
|
5937
6539
|
]
|
|
5938
6540
|
}
|
|
5939
|
-
)
|
|
6541
|
+
) : null
|
|
5940
6542
|
]
|
|
5941
6543
|
}
|
|
5942
6544
|
),
|
|
@@ -6094,6 +6696,6 @@ function resolveDecadeStart6(year) {
|
|
|
6094
6696
|
return Math.floor(year / 10) * 10;
|
|
6095
6697
|
}
|
|
6096
6698
|
|
|
6097
|
-
export { REACT_COMPONENT_PREFIX, ReactCheckbox, ReactColorPicker, ReactDatePicker, ReactDateRangePicker, ReactDateTimePicker, ReactDateTimeRangePicker, ReactImagePreview, ReactInput, ReactMonthPicker, ReactNumberInput, ReactPagination, ReactPopup, ReactQuarterPicker, ReactSelect, ReactTimePicker, ReactTimeRangePicker, ReactVirtualList, ReactYearPicker };
|
|
6699
|
+
export { REACT_COMPONENT_PREFIX, ReactCheckbox, ReactColorPicker, ReactContentScaleProvider, ReactDatePicker, ReactDateRangePicker, ReactDateTimePicker, ReactDateTimeRangePicker, ReactImagePreview, ReactInput, ReactInputNumber, ReactMonthPicker, ReactNumberInput, ReactPagination, ReactPopconfirm, ReactPopup, ReactQuarterPicker, ReactSelect, ReactTimePicker, ReactTimeRangePicker, ReactTransition, ReactVirtualList, ReactYearPicker, useReactContentScale, useReactTransition };
|
|
6098
6700
|
//# sourceMappingURL=index.js.map
|
|
6099
6701
|
//# sourceMappingURL=index.js.map
|