@canvas-components/react-components 0.1.1 → 0.1.4
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 +161 -0
- package/dist/index.cjs +705 -108
- 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 +701 -110
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -4,16 +4,6 @@ var react = require('react');
|
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
var reactDom = require('react-dom');
|
|
6
6
|
|
|
7
|
-
// src/components/checkbox/index.tsx
|
|
8
|
-
|
|
9
|
-
// src/shared/class-names.ts
|
|
10
|
-
function joinClassNames(...values) {
|
|
11
|
-
return values.filter(Boolean).join(" ");
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
// src/shared/prefix.ts
|
|
15
|
-
var REACT_COMPONENT_PREFIX = "canvas-react";
|
|
16
|
-
|
|
17
7
|
// #style-inject:#style-inject
|
|
18
8
|
function styleInject(css, { insertAt } = {}) {
|
|
19
9
|
if (!css || typeof document === "undefined") return;
|
|
@@ -36,6 +26,17 @@ function styleInject(css, { insertAt } = {}) {
|
|
|
36
26
|
}
|
|
37
27
|
}
|
|
38
28
|
|
|
29
|
+
// src/styles/variables.css
|
|
30
|
+
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");
|
|
31
|
+
|
|
32
|
+
// src/shared/class-names.ts
|
|
33
|
+
function joinClassNames(...values) {
|
|
34
|
+
return values.filter(Boolean).join(" ");
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// src/shared/prefix.ts
|
|
38
|
+
var REACT_COMPONENT_PREFIX = "canvas-react";
|
|
39
|
+
|
|
39
40
|
// src/components/checkbox/style.css
|
|
40
41
|
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');
|
|
41
42
|
var ReactCheckbox = react.forwardRef(
|
|
@@ -93,7 +94,7 @@ var ReactCheckbox = react.forwardRef(
|
|
|
93
94
|
);
|
|
94
95
|
|
|
95
96
|
// src/components/input/style.css
|
|
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:
|
|
97
|
+
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');
|
|
97
98
|
var ReactInput = react.forwardRef(
|
|
98
99
|
function ReactInput2(props, ref) {
|
|
99
100
|
const {
|
|
@@ -175,9 +176,113 @@ var ReactInput = react.forwardRef(
|
|
|
175
176
|
}
|
|
176
177
|
}
|
|
177
178
|
);
|
|
179
|
+
var DEFAULT_CONTENT_SCALE = {
|
|
180
|
+
scale: 1
|
|
181
|
+
};
|
|
182
|
+
var ReactContentScaleContext = react.createContext(DEFAULT_CONTENT_SCALE);
|
|
183
|
+
function ReactContentScaleProvider(props) {
|
|
184
|
+
const { children, scale = 1 } = props;
|
|
185
|
+
const value = react.useMemo(() => {
|
|
186
|
+
const nextScale = typeof scale === "number" && Number.isFinite(scale) && scale > 0 ? scale : 1;
|
|
187
|
+
return { scale: nextScale };
|
|
188
|
+
}, [scale]);
|
|
189
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ReactContentScaleContext.Provider, { value, children });
|
|
190
|
+
}
|
|
191
|
+
function useReactContentScale() {
|
|
192
|
+
return react.useContext(ReactContentScaleContext);
|
|
193
|
+
}
|
|
194
|
+
function toContentLayoutSize(size, scale) {
|
|
195
|
+
const nextScale = typeof scale === "number" && Number.isFinite(scale) && scale > 0 ? scale : 1;
|
|
196
|
+
if (nextScale === 1) {
|
|
197
|
+
return size;
|
|
198
|
+
}
|
|
199
|
+
return size / nextScale;
|
|
200
|
+
}
|
|
201
|
+
function useReactTransition(options) {
|
|
202
|
+
const {
|
|
203
|
+
appear = true,
|
|
204
|
+
duration = 0,
|
|
205
|
+
name = "canvas-react-transition",
|
|
206
|
+
show
|
|
207
|
+
} = options;
|
|
208
|
+
const enterDuration = resolveDuration(duration, "enter");
|
|
209
|
+
const leaveDuration = resolveDuration(duration, "leave");
|
|
210
|
+
const previousShowRef = react.useRef(show);
|
|
211
|
+
const [rendered, setRendered] = react.useState(show);
|
|
212
|
+
const [phase, setPhase] = react.useState(() => {
|
|
213
|
+
if (!show) {
|
|
214
|
+
return "leave-to";
|
|
215
|
+
}
|
|
216
|
+
return appear ? "enter-from" : "entered";
|
|
217
|
+
});
|
|
218
|
+
react.useLayoutEffect(() => {
|
|
219
|
+
if (previousShowRef.current === show) {
|
|
220
|
+
return;
|
|
221
|
+
}
|
|
222
|
+
previousShowRef.current = show;
|
|
223
|
+
if (show) {
|
|
224
|
+
setRendered(true);
|
|
225
|
+
setPhase("enter-from");
|
|
226
|
+
return;
|
|
227
|
+
}
|
|
228
|
+
setPhase("leave-from");
|
|
229
|
+
}, [show]);
|
|
230
|
+
react.useLayoutEffect(() => {
|
|
231
|
+
let firstFrameId = null;
|
|
232
|
+
let secondFrameId = null;
|
|
233
|
+
let timerId = null;
|
|
234
|
+
if (phase === "enter-from" || phase === "leave-from") {
|
|
235
|
+
firstFrameId = window.requestAnimationFrame(() => {
|
|
236
|
+
secondFrameId = window.requestAnimationFrame(() => {
|
|
237
|
+
setPhase(phase === "enter-from" ? "enter-to" : "leave-to");
|
|
238
|
+
});
|
|
239
|
+
});
|
|
240
|
+
} else if (phase === "enter-to") {
|
|
241
|
+
timerId = window.setTimeout(() => {
|
|
242
|
+
setPhase("entered");
|
|
243
|
+
}, enterDuration);
|
|
244
|
+
} else if (phase === "leave-to" && rendered) {
|
|
245
|
+
timerId = window.setTimeout(() => {
|
|
246
|
+
setRendered(false);
|
|
247
|
+
}, leaveDuration);
|
|
248
|
+
}
|
|
249
|
+
return () => {
|
|
250
|
+
if (firstFrameId !== null) {
|
|
251
|
+
window.cancelAnimationFrame(firstFrameId);
|
|
252
|
+
}
|
|
253
|
+
if (secondFrameId !== null) {
|
|
254
|
+
window.cancelAnimationFrame(secondFrameId);
|
|
255
|
+
}
|
|
256
|
+
if (timerId !== null) {
|
|
257
|
+
window.clearTimeout(timerId);
|
|
258
|
+
}
|
|
259
|
+
};
|
|
260
|
+
}, [enterDuration, leaveDuration, phase, rendered]);
|
|
261
|
+
return {
|
|
262
|
+
className: resolveTransitionClassName(name, phase),
|
|
263
|
+
phase,
|
|
264
|
+
rendered
|
|
265
|
+
};
|
|
266
|
+
}
|
|
267
|
+
function ReactTransition(props) {
|
|
268
|
+
const { children, ...options } = props;
|
|
269
|
+
const state = useReactTransition(options);
|
|
270
|
+
return state.rendered ? children(state) : null;
|
|
271
|
+
}
|
|
272
|
+
function resolveTransitionClassName(name, phase) {
|
|
273
|
+
if (phase === "entered") {
|
|
274
|
+
return void 0;
|
|
275
|
+
}
|
|
276
|
+
const direction = phase.startsWith("enter") ? "enter" : "leave";
|
|
277
|
+
return `${name}-${phase} ${name}-${direction}-active`;
|
|
278
|
+
}
|
|
279
|
+
function resolveDuration(duration, direction) {
|
|
280
|
+
const value = typeof duration === "number" ? duration : duration[direction] ?? 0;
|
|
281
|
+
return Number.isFinite(value) && value > 0 ? value : 0;
|
|
282
|
+
}
|
|
178
283
|
|
|
179
284
|
// src/components/popup/style.css
|
|
180
|
-
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
|
|
285
|
+
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');
|
|
181
286
|
var POPUP_MOTION_DURATION = 180;
|
|
182
287
|
function ReactPopup(props) {
|
|
183
288
|
const {
|
|
@@ -196,40 +301,15 @@ function ReactPopup(props) {
|
|
|
196
301
|
surfaceStyle,
|
|
197
302
|
zIndex = 1200
|
|
198
303
|
} = props;
|
|
304
|
+
const { scale: contentScale } = useReactContentScale();
|
|
305
|
+
const transition = useReactTransition({
|
|
306
|
+
duration: POPUP_MOTION_DURATION,
|
|
307
|
+
name: `${REACT_COMPONENT_PREFIX}-popup-surface`,
|
|
308
|
+
show: open
|
|
309
|
+
});
|
|
310
|
+
const { rendered } = transition;
|
|
199
311
|
const [position, setPosition] = react.useState(null);
|
|
200
|
-
const [rendered, setRendered] = react.useState(open);
|
|
201
|
-
const [motionState, setMotionState] = react.useState(
|
|
202
|
-
open ? "entered" : "leave"
|
|
203
|
-
);
|
|
204
312
|
const surfaceRef = react.useRef(null);
|
|
205
|
-
const timerRef = react.useRef(null);
|
|
206
|
-
react.useEffect(() => {
|
|
207
|
-
if (timerRef.current != null) {
|
|
208
|
-
window.clearTimeout(timerRef.current);
|
|
209
|
-
timerRef.current = null;
|
|
210
|
-
}
|
|
211
|
-
if (open) {
|
|
212
|
-
setRendered(true);
|
|
213
|
-
setMotionState("enter");
|
|
214
|
-
const frameId = window.requestAnimationFrame(() => {
|
|
215
|
-
setMotionState("entered");
|
|
216
|
-
});
|
|
217
|
-
return () => {
|
|
218
|
-
window.cancelAnimationFrame(frameId);
|
|
219
|
-
};
|
|
220
|
-
}
|
|
221
|
-
setMotionState("leave");
|
|
222
|
-
timerRef.current = window.setTimeout(() => {
|
|
223
|
-
setRendered(false);
|
|
224
|
-
timerRef.current = null;
|
|
225
|
-
}, POPUP_MOTION_DURATION);
|
|
226
|
-
return () => {
|
|
227
|
-
if (timerRef.current != null) {
|
|
228
|
-
window.clearTimeout(timerRef.current);
|
|
229
|
-
timerRef.current = null;
|
|
230
|
-
}
|
|
231
|
-
};
|
|
232
|
-
}, [open]);
|
|
233
313
|
react.useLayoutEffect(() => {
|
|
234
314
|
if (!rendered) {
|
|
235
315
|
return;
|
|
@@ -241,14 +321,15 @@ function ReactPopup(props) {
|
|
|
241
321
|
}
|
|
242
322
|
const nextPosition = resolvePopupPosition({
|
|
243
323
|
anchor: nextAnchor,
|
|
324
|
+
contentScale,
|
|
244
325
|
matchAnchorWidth,
|
|
245
326
|
minWidth,
|
|
246
327
|
offset,
|
|
247
328
|
placement,
|
|
248
|
-
popupRect: resolvePopupSurfaceRect(surfaceRef.current)
|
|
329
|
+
popupRect: resolvePopupSurfaceRect(surfaceRef.current, contentScale)
|
|
249
330
|
});
|
|
250
331
|
setPosition((prev) => {
|
|
251
|
-
if (prev?.left === nextPosition.left && prev?.top === nextPosition.top && prev?.width === nextPosition.width && prev?.minWidth === nextPosition.minWidth) {
|
|
332
|
+
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) {
|
|
252
333
|
return prev;
|
|
253
334
|
}
|
|
254
335
|
return nextPosition;
|
|
@@ -274,6 +355,7 @@ function ReactPopup(props) {
|
|
|
274
355
|
}, [
|
|
275
356
|
anchorRect,
|
|
276
357
|
anchorRef,
|
|
358
|
+
contentScale,
|
|
277
359
|
matchAnchorWidth,
|
|
278
360
|
minWidth,
|
|
279
361
|
offset,
|
|
@@ -291,14 +373,15 @@ function ReactPopup(props) {
|
|
|
291
373
|
}
|
|
292
374
|
const nextPosition = resolvePopupPosition({
|
|
293
375
|
anchor: nextAnchor,
|
|
376
|
+
contentScale,
|
|
294
377
|
matchAnchorWidth,
|
|
295
378
|
minWidth,
|
|
296
379
|
offset,
|
|
297
380
|
placement,
|
|
298
|
-
popupRect: resolvePopupSurfaceRect(surfaceRef.current)
|
|
381
|
+
popupRect: resolvePopupSurfaceRect(surfaceRef.current, contentScale)
|
|
299
382
|
});
|
|
300
383
|
setPosition((prev) => {
|
|
301
|
-
if (prev?.left === nextPosition.left && prev?.top === nextPosition.top && prev?.width === nextPosition.width && prev?.minWidth === nextPosition.minWidth) {
|
|
384
|
+
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) {
|
|
302
385
|
return prev;
|
|
303
386
|
}
|
|
304
387
|
return nextPosition;
|
|
@@ -315,6 +398,7 @@ function ReactPopup(props) {
|
|
|
315
398
|
}, [
|
|
316
399
|
anchorRect,
|
|
317
400
|
anchorRef,
|
|
401
|
+
contentScale,
|
|
318
402
|
matchAnchorWidth,
|
|
319
403
|
minWidth,
|
|
320
404
|
offset,
|
|
@@ -351,27 +435,33 @@ function ReactPopup(props) {
|
|
|
351
435
|
if (!rendered || !position) {
|
|
352
436
|
return null;
|
|
353
437
|
}
|
|
438
|
+
const contentScaleStyle = contentScale !== 1 ? {
|
|
439
|
+
transform: `scale(${contentScale})`,
|
|
440
|
+
transformOrigin: "top left"
|
|
441
|
+
} : void 0;
|
|
354
442
|
return reactDom.createPortal(
|
|
355
443
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
356
444
|
"div",
|
|
357
445
|
{
|
|
358
446
|
className: joinClassNames(
|
|
359
447
|
`${REACT_COMPONENT_PREFIX}-popup`,
|
|
360
|
-
`${REACT_COMPONENT_PREFIX}-popup
|
|
448
|
+
transition.phase.startsWith("leave") && `${REACT_COMPONENT_PREFIX}-popup-leave`,
|
|
361
449
|
className
|
|
362
450
|
),
|
|
363
451
|
style: {
|
|
364
|
-
...position,
|
|
452
|
+
...position.style,
|
|
365
453
|
...style,
|
|
454
|
+
...contentScaleStyle,
|
|
366
455
|
zIndex
|
|
367
456
|
},
|
|
457
|
+
"data-placement": position.placement,
|
|
368
458
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
369
459
|
"div",
|
|
370
460
|
{
|
|
371
461
|
ref: surfaceRef,
|
|
372
462
|
className: joinClassNames(
|
|
373
463
|
`${REACT_COMPONENT_PREFIX}-popup-surface`,
|
|
374
|
-
|
|
464
|
+
transition.className,
|
|
375
465
|
surfaceClassName
|
|
376
466
|
),
|
|
377
467
|
style: surfaceStyle,
|
|
@@ -384,12 +474,25 @@ function ReactPopup(props) {
|
|
|
384
474
|
);
|
|
385
475
|
}
|
|
386
476
|
function resolvePopupPosition(params) {
|
|
387
|
-
const {
|
|
477
|
+
const {
|
|
478
|
+
anchor,
|
|
479
|
+
contentScale,
|
|
480
|
+
matchAnchorWidth,
|
|
481
|
+
minWidth,
|
|
482
|
+
offset,
|
|
483
|
+
placement,
|
|
484
|
+
popupRect
|
|
485
|
+
} = params;
|
|
388
486
|
const margin = 8;
|
|
389
487
|
const viewportWidth = window.innerWidth;
|
|
390
488
|
const viewportHeight = window.innerHeight;
|
|
391
|
-
const
|
|
392
|
-
const
|
|
489
|
+
const layoutMinWidth = typeof minWidth === "number" ? minWidth : void 0;
|
|
490
|
+
const layoutAnchorWidth = toContentLayoutSize(anchor.width, contentScale);
|
|
491
|
+
const preferredVisualWidth = popupRect?.width ?? Math.max(
|
|
492
|
+
(minWidth ?? 0) * contentScale,
|
|
493
|
+
matchAnchorWidth ? anchor.width : 0
|
|
494
|
+
);
|
|
495
|
+
const popupWidth = preferredVisualWidth;
|
|
393
496
|
const popupHeight = popupRect?.height ?? 0;
|
|
394
497
|
const isHorizontalPlacement = placement.startsWith("left") || placement.startsWith("right");
|
|
395
498
|
const preferredVertical = placement.startsWith("top") ? "top" : placement.endsWith("Top") ? "top" : "bottom";
|
|
@@ -429,12 +532,32 @@ function resolvePopupPosition(params) {
|
|
|
429
532
|
const maxLeft = Math.max(margin, viewportWidth - popupWidth - margin);
|
|
430
533
|
const left = clamp(rawLeft, margin, maxLeft);
|
|
431
534
|
return {
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
535
|
+
placement: resolvePlacement({
|
|
536
|
+
horizontal: resolvedHorizontal,
|
|
537
|
+
isHorizontalPlacement,
|
|
538
|
+
vertical: resolvedVertical
|
|
539
|
+
}),
|
|
540
|
+
style: {
|
|
541
|
+
left,
|
|
542
|
+
top,
|
|
543
|
+
width: matchAnchorWidth ? layoutAnchorWidth : void 0,
|
|
544
|
+
minWidth: layoutMinWidth ?? (matchAnchorWidth ? layoutAnchorWidth : void 0)
|
|
545
|
+
}
|
|
436
546
|
};
|
|
437
547
|
}
|
|
548
|
+
function resolvePlacement(params) {
|
|
549
|
+
const { horizontal, isHorizontalPlacement, vertical } = params;
|
|
550
|
+
if (isHorizontalPlacement) {
|
|
551
|
+
if (horizontal === "left") {
|
|
552
|
+
return vertical === "top" ? "leftTop" : "leftBottom";
|
|
553
|
+
}
|
|
554
|
+
return vertical === "top" ? "rightTop" : "rightBottom";
|
|
555
|
+
}
|
|
556
|
+
if (vertical === "top") {
|
|
557
|
+
return horizontal === "left" ? "topLeft" : "topRight";
|
|
558
|
+
}
|
|
559
|
+
return horizontal === "left" ? "bottomLeft" : "bottomRight";
|
|
560
|
+
}
|
|
438
561
|
function resolveRawTop(params) {
|
|
439
562
|
const { anchor, isHorizontalPlacement, offset, popupHeight, vertical } = params;
|
|
440
563
|
if (isHorizontalPlacement) {
|
|
@@ -470,18 +593,19 @@ function resolveAnchorRect(element) {
|
|
|
470
593
|
height: rect.height
|
|
471
594
|
};
|
|
472
595
|
}
|
|
473
|
-
function resolvePopupSurfaceRect(element) {
|
|
596
|
+
function resolvePopupSurfaceRect(element, contentScale = 1) {
|
|
474
597
|
if (!element) {
|
|
475
598
|
return null;
|
|
476
599
|
}
|
|
600
|
+
const scale = typeof contentScale === "number" && Number.isFinite(contentScale) && contentScale > 0 ? contentScale : 1;
|
|
477
601
|
return {
|
|
478
|
-
height: element.offsetHeight,
|
|
479
|
-
width: element.offsetWidth
|
|
602
|
+
height: element.offsetHeight * scale,
|
|
603
|
+
width: element.offsetWidth * scale
|
|
480
604
|
};
|
|
481
605
|
}
|
|
482
606
|
|
|
483
607
|
// src/components/color/style.css
|
|
484
|
-
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:
|
|
608
|
+
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");
|
|
485
609
|
var DEFAULT_COLOR = "#1677ff";
|
|
486
610
|
var PRESET_COLORS = [
|
|
487
611
|
"#ff4d4f",
|
|
@@ -511,6 +635,7 @@ var ReactColorPicker = react.forwardRef(function ReactColorPicker2(props, ref) {
|
|
|
511
635
|
presets = PRESET_COLORS,
|
|
512
636
|
style,
|
|
513
637
|
value,
|
|
638
|
+
showArrow = true,
|
|
514
639
|
...restProps
|
|
515
640
|
} = props;
|
|
516
641
|
const triggerRef = react.useRef(null);
|
|
@@ -604,7 +729,7 @@ var ReactColorPicker = react.forwardRef(function ReactColorPicker2(props, ref) {
|
|
|
604
729
|
}
|
|
605
730
|
}
|
|
606
731
|
),
|
|
607
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
732
|
+
showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
608
733
|
"span",
|
|
609
734
|
{
|
|
610
735
|
className: joinClassNames(
|
|
@@ -612,7 +737,7 @@ var ReactColorPicker = react.forwardRef(function ReactColorPicker2(props, ref) {
|
|
|
612
737
|
open && `${REACT_COMPONENT_PREFIX}-color-arrow-open`
|
|
613
738
|
)
|
|
614
739
|
}
|
|
615
|
-
)
|
|
740
|
+
) : null
|
|
616
741
|
]
|
|
617
742
|
}
|
|
618
743
|
),
|
|
@@ -771,7 +896,7 @@ function clamp2(value, min, max) {
|
|
|
771
896
|
}
|
|
772
897
|
|
|
773
898
|
// src/components/year/style.css
|
|
774
|
-
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:
|
|
899
|
+
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');
|
|
775
900
|
|
|
776
901
|
// src/components/date/style.css
|
|
777
902
|
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');
|
|
@@ -793,6 +918,7 @@ var ReactDatePicker = react.forwardRef(
|
|
|
793
918
|
placeholder = "\u8BF7\u9009\u62E9\u65E5\u671F",
|
|
794
919
|
popupClassName,
|
|
795
920
|
allowClear = true,
|
|
921
|
+
showArrow = true,
|
|
796
922
|
style,
|
|
797
923
|
value,
|
|
798
924
|
...restProps
|
|
@@ -922,7 +1048,7 @@ var ReactDatePicker = react.forwardRef(
|
|
|
922
1048
|
}
|
|
923
1049
|
}
|
|
924
1050
|
),
|
|
925
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1051
|
+
showClear || showArrow ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
926
1052
|
"span",
|
|
927
1053
|
{
|
|
928
1054
|
className: joinClassNames(
|
|
@@ -952,7 +1078,7 @@ var ReactDatePicker = react.forwardRef(
|
|
|
952
1078
|
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-year-clear-icon` })
|
|
953
1079
|
}
|
|
954
1080
|
) : null,
|
|
955
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1081
|
+
showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
956
1082
|
"span",
|
|
957
1083
|
{
|
|
958
1084
|
className: joinClassNames(
|
|
@@ -960,10 +1086,10 @@ var ReactDatePicker = react.forwardRef(
|
|
|
960
1086
|
open && `${REACT_COMPONENT_PREFIX}-year-arrow-open`
|
|
961
1087
|
)
|
|
962
1088
|
}
|
|
963
|
-
)
|
|
1089
|
+
) : null
|
|
964
1090
|
]
|
|
965
1091
|
}
|
|
966
|
-
)
|
|
1092
|
+
) : null
|
|
967
1093
|
]
|
|
968
1094
|
}
|
|
969
1095
|
),
|
|
@@ -1292,7 +1418,7 @@ function resolveDecadeStart(year) {
|
|
|
1292
1418
|
}
|
|
1293
1419
|
|
|
1294
1420
|
// src/components/date-range/style.css
|
|
1295
|
-
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:
|
|
1421
|
+
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');
|
|
1296
1422
|
var WEEKDAY_LABELS2 = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
|
|
1297
1423
|
var ReactDateRangePicker = react.forwardRef(function ReactDateRangePicker2(props, ref) {
|
|
1298
1424
|
const {
|
|
@@ -1307,6 +1433,7 @@ var ReactDateRangePicker = react.forwardRef(function ReactDateRangePicker2(props
|
|
|
1307
1433
|
popupClassName,
|
|
1308
1434
|
rangeSeparator = " ~ ",
|
|
1309
1435
|
allowClear = true,
|
|
1436
|
+
showArrow = true,
|
|
1310
1437
|
style,
|
|
1311
1438
|
value,
|
|
1312
1439
|
...restProps
|
|
@@ -1525,7 +1652,7 @@ var ReactDateRangePicker = react.forwardRef(function ReactDateRangePicker2(props
|
|
|
1525
1652
|
}
|
|
1526
1653
|
)
|
|
1527
1654
|
] }),
|
|
1528
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1655
|
+
showClear || showArrow ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1529
1656
|
"span",
|
|
1530
1657
|
{
|
|
1531
1658
|
className: joinClassNames(
|
|
@@ -1561,7 +1688,7 @@ var ReactDateRangePicker = react.forwardRef(function ReactDateRangePicker2(props
|
|
|
1561
1688
|
)
|
|
1562
1689
|
}
|
|
1563
1690
|
) : null,
|
|
1564
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1691
|
+
showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1565
1692
|
"span",
|
|
1566
1693
|
{
|
|
1567
1694
|
className: joinClassNames(
|
|
@@ -1569,10 +1696,10 @@ var ReactDateRangePicker = react.forwardRef(function ReactDateRangePicker2(props
|
|
|
1569
1696
|
open && `${REACT_COMPONENT_PREFIX}-date-range-arrow-open`
|
|
1570
1697
|
)
|
|
1571
1698
|
}
|
|
1572
|
-
)
|
|
1699
|
+
) : null
|
|
1573
1700
|
]
|
|
1574
1701
|
}
|
|
1575
|
-
)
|
|
1702
|
+
) : null
|
|
1576
1703
|
]
|
|
1577
1704
|
}
|
|
1578
1705
|
),
|
|
@@ -2186,10 +2313,10 @@ function getCurrentTimeValue() {
|
|
|
2186
2313
|
}
|
|
2187
2314
|
|
|
2188
2315
|
// src/components/time/style.css
|
|
2189
|
-
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');
|
|
2316
|
+
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');
|
|
2190
2317
|
|
|
2191
2318
|
// src/components/datetime/style.css
|
|
2192
|
-
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:
|
|
2319
|
+
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');
|
|
2193
2320
|
var MONTHS2 = Array.from(
|
|
2194
2321
|
{ length: 12 },
|
|
2195
2322
|
(_, index) => String(index + 1).padStart(2, "0")
|
|
@@ -2207,6 +2334,7 @@ var ReactDateTimePicker = react.forwardRef(function ReactDateTimePicker2(props,
|
|
|
2207
2334
|
placeholder = "\u8BF7\u9009\u62E9\u65E5\u671F\u65F6\u95F4",
|
|
2208
2335
|
popupClassName,
|
|
2209
2336
|
allowClear = true,
|
|
2337
|
+
showArrow = true,
|
|
2210
2338
|
style,
|
|
2211
2339
|
value,
|
|
2212
2340
|
...restProps
|
|
@@ -2330,7 +2458,7 @@ var ReactDateTimePicker = react.forwardRef(function ReactDateTimePicker2(props,
|
|
|
2330
2458
|
}
|
|
2331
2459
|
}
|
|
2332
2460
|
),
|
|
2333
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2461
|
+
showClear || showArrow ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2334
2462
|
"span",
|
|
2335
2463
|
{
|
|
2336
2464
|
className: joinClassNames(
|
|
@@ -2360,7 +2488,7 @@ var ReactDateTimePicker = react.forwardRef(function ReactDateTimePicker2(props,
|
|
|
2360
2488
|
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-datetime-clear-icon` })
|
|
2361
2489
|
}
|
|
2362
2490
|
) : null,
|
|
2363
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2491
|
+
showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
2364
2492
|
"span",
|
|
2365
2493
|
{
|
|
2366
2494
|
className: joinClassNames(
|
|
@@ -2368,10 +2496,10 @@ var ReactDateTimePicker = react.forwardRef(function ReactDateTimePicker2(props,
|
|
|
2368
2496
|
open && `${REACT_COMPONENT_PREFIX}-datetime-arrow-open`
|
|
2369
2497
|
)
|
|
2370
2498
|
}
|
|
2371
|
-
)
|
|
2499
|
+
) : null
|
|
2372
2500
|
]
|
|
2373
2501
|
}
|
|
2374
|
-
)
|
|
2502
|
+
) : null
|
|
2375
2503
|
]
|
|
2376
2504
|
}
|
|
2377
2505
|
),
|
|
@@ -2845,6 +2973,7 @@ var ReactDateTimeRangePicker = react.forwardRef(function ReactDateTimeRangePicke
|
|
|
2845
2973
|
popupClassName,
|
|
2846
2974
|
rangeSeparator = " ~ ",
|
|
2847
2975
|
allowClear = true,
|
|
2976
|
+
showArrow = true,
|
|
2848
2977
|
style,
|
|
2849
2978
|
value,
|
|
2850
2979
|
...restProps
|
|
@@ -3084,7 +3213,7 @@ var ReactDateTimeRangePicker = react.forwardRef(function ReactDateTimeRangePicke
|
|
|
3084
3213
|
}
|
|
3085
3214
|
)
|
|
3086
3215
|
] }),
|
|
3087
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3216
|
+
showClear || showArrow ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3088
3217
|
"span",
|
|
3089
3218
|
{
|
|
3090
3219
|
className: joinClassNames(
|
|
@@ -3120,7 +3249,7 @@ var ReactDateTimeRangePicker = react.forwardRef(function ReactDateTimeRangePicke
|
|
|
3120
3249
|
)
|
|
3121
3250
|
}
|
|
3122
3251
|
) : null,
|
|
3123
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3252
|
+
showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
3124
3253
|
"span",
|
|
3125
3254
|
{
|
|
3126
3255
|
className: joinClassNames(
|
|
@@ -3128,10 +3257,10 @@ var ReactDateTimeRangePicker = react.forwardRef(function ReactDateTimeRangePicke
|
|
|
3128
3257
|
open && `${REACT_COMPONENT_PREFIX}-datetime-arrow-open`
|
|
3129
3258
|
)
|
|
3130
3259
|
}
|
|
3131
|
-
)
|
|
3260
|
+
) : null
|
|
3132
3261
|
]
|
|
3133
3262
|
}
|
|
3134
|
-
)
|
|
3263
|
+
) : null
|
|
3135
3264
|
]
|
|
3136
3265
|
}
|
|
3137
3266
|
),
|
|
@@ -3813,6 +3942,7 @@ var ReactMonthPicker = react.forwardRef(
|
|
|
3813
3942
|
placeholder = "\u8BF7\u9009\u62E9\u6708\u4EFD",
|
|
3814
3943
|
popupClassName,
|
|
3815
3944
|
allowClear = true,
|
|
3945
|
+
showArrow = true,
|
|
3816
3946
|
style,
|
|
3817
3947
|
value,
|
|
3818
3948
|
...restProps
|
|
@@ -3927,7 +4057,7 @@ var ReactMonthPicker = react.forwardRef(
|
|
|
3927
4057
|
}
|
|
3928
4058
|
}
|
|
3929
4059
|
),
|
|
3930
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
4060
|
+
showClear || showArrow ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3931
4061
|
"span",
|
|
3932
4062
|
{
|
|
3933
4063
|
className: joinClassNames(
|
|
@@ -3957,7 +4087,7 @@ var ReactMonthPicker = react.forwardRef(
|
|
|
3957
4087
|
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-year-clear-icon` })
|
|
3958
4088
|
}
|
|
3959
4089
|
) : null,
|
|
3960
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4090
|
+
showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
3961
4091
|
"span",
|
|
3962
4092
|
{
|
|
3963
4093
|
className: joinClassNames(
|
|
@@ -3965,10 +4095,10 @@ var ReactMonthPicker = react.forwardRef(
|
|
|
3965
4095
|
open && `${REACT_COMPONENT_PREFIX}-year-arrow-open`
|
|
3966
4096
|
)
|
|
3967
4097
|
}
|
|
3968
|
-
)
|
|
4098
|
+
) : null
|
|
3969
4099
|
]
|
|
3970
4100
|
}
|
|
3971
|
-
)
|
|
4101
|
+
) : null
|
|
3972
4102
|
]
|
|
3973
4103
|
}
|
|
3974
4104
|
),
|
|
@@ -4190,7 +4320,7 @@ function resolveDecadeStart4(year) {
|
|
|
4190
4320
|
}
|
|
4191
4321
|
|
|
4192
4322
|
// src/components/number-input/style.css
|
|
4193
|
-
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:
|
|
4323
|
+
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');
|
|
4194
4324
|
var ReactNumberInput = react.forwardRef(
|
|
4195
4325
|
function ReactNumberInput2(props, ref) {
|
|
4196
4326
|
const {
|
|
@@ -4260,6 +4390,238 @@ function toDisplayValue(value) {
|
|
|
4260
4390
|
return value == null ? "" : String(value);
|
|
4261
4391
|
}
|
|
4262
4392
|
|
|
4393
|
+
// src/components/input-number/style.css
|
|
4394
|
+
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');
|
|
4395
|
+
var ReactInputNumber = react.forwardRef(
|
|
4396
|
+
function ReactInputNumber2(props, ref) {
|
|
4397
|
+
const {
|
|
4398
|
+
addonAfter,
|
|
4399
|
+
className,
|
|
4400
|
+
defaultValue = null,
|
|
4401
|
+
disabled,
|
|
4402
|
+
formatter,
|
|
4403
|
+
max,
|
|
4404
|
+
min,
|
|
4405
|
+
onBlur,
|
|
4406
|
+
onChange,
|
|
4407
|
+
onCommit,
|
|
4408
|
+
onFocus,
|
|
4409
|
+
onKeyDown,
|
|
4410
|
+
parser,
|
|
4411
|
+
precision,
|
|
4412
|
+
step = 1,
|
|
4413
|
+
style,
|
|
4414
|
+
value,
|
|
4415
|
+
...restProps
|
|
4416
|
+
} = props;
|
|
4417
|
+
const isControlled = value !== void 0;
|
|
4418
|
+
const [innerValue, setInnerValue] = react.useState(
|
|
4419
|
+
isControlled ? value ?? null : defaultValue
|
|
4420
|
+
);
|
|
4421
|
+
const currentValue = isControlled ? value ?? null : innerValue;
|
|
4422
|
+
const [draftText, setDraftText] = react.useState(
|
|
4423
|
+
formatDisplayValue(
|
|
4424
|
+
currentValue,
|
|
4425
|
+
formatter,
|
|
4426
|
+
resolvePrecision(precision, step),
|
|
4427
|
+
step
|
|
4428
|
+
)
|
|
4429
|
+
);
|
|
4430
|
+
const [focused, setFocused] = react.useState(false);
|
|
4431
|
+
const resolvedPrecision = react.useMemo(
|
|
4432
|
+
() => resolvePrecision(precision, step),
|
|
4433
|
+
[precision, step]
|
|
4434
|
+
);
|
|
4435
|
+
react.useEffect(() => {
|
|
4436
|
+
if (!focused) {
|
|
4437
|
+
setDraftText(
|
|
4438
|
+
formatDisplayValue(currentValue, formatter, resolvedPrecision, step)
|
|
4439
|
+
);
|
|
4440
|
+
}
|
|
4441
|
+
}, [currentValue, focused, formatter, resolvedPrecision, step]);
|
|
4442
|
+
const commitValue = (nextValue) => {
|
|
4443
|
+
const normalized = normalizeNumberValue(nextValue, {
|
|
4444
|
+
min,
|
|
4445
|
+
max,
|
|
4446
|
+
precision: resolvedPrecision
|
|
4447
|
+
});
|
|
4448
|
+
if (!isControlled) {
|
|
4449
|
+
setInnerValue(normalized);
|
|
4450
|
+
}
|
|
4451
|
+
onChange?.(normalized);
|
|
4452
|
+
onCommit?.(normalized);
|
|
4453
|
+
setDraftText(
|
|
4454
|
+
formatDisplayValue(normalized, formatter, resolvedPrecision, step)
|
|
4455
|
+
);
|
|
4456
|
+
return normalized;
|
|
4457
|
+
};
|
|
4458
|
+
const stepBy = (direction) => {
|
|
4459
|
+
if (disabled) {
|
|
4460
|
+
return;
|
|
4461
|
+
}
|
|
4462
|
+
const base = currentValue == null || !Number.isFinite(currentValue) ? 0 : currentValue;
|
|
4463
|
+
const next = base + direction * step;
|
|
4464
|
+
commitValue(next);
|
|
4465
|
+
};
|
|
4466
|
+
const atMin = currentValue != null && min != null && currentValue <= min + Number.EPSILON;
|
|
4467
|
+
const atMax = currentValue != null && max != null && currentValue >= max - Number.EPSILON;
|
|
4468
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4469
|
+
"span",
|
|
4470
|
+
{
|
|
4471
|
+
className: joinClassNames(
|
|
4472
|
+
`${REACT_COMPONENT_PREFIX}-input-number`,
|
|
4473
|
+
focused && `${REACT_COMPONENT_PREFIX}-input-number-focused`,
|
|
4474
|
+
disabled && `${REACT_COMPONENT_PREFIX}-input-number-disabled`,
|
|
4475
|
+
className
|
|
4476
|
+
),
|
|
4477
|
+
style,
|
|
4478
|
+
children: [
|
|
4479
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4480
|
+
"button",
|
|
4481
|
+
{
|
|
4482
|
+
type: "button",
|
|
4483
|
+
tabIndex: -1,
|
|
4484
|
+
disabled: disabled || atMin,
|
|
4485
|
+
className: joinClassNames(
|
|
4486
|
+
`${REACT_COMPONENT_PREFIX}-input-number-handler`,
|
|
4487
|
+
`${REACT_COMPONENT_PREFIX}-input-number-handler-down`
|
|
4488
|
+
),
|
|
4489
|
+
"aria-label": "\u51CF\u5C11",
|
|
4490
|
+
onMouseDown: (event) => {
|
|
4491
|
+
event.preventDefault();
|
|
4492
|
+
},
|
|
4493
|
+
onClick: () => {
|
|
4494
|
+
stepBy(-1);
|
|
4495
|
+
},
|
|
4496
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4497
|
+
"span",
|
|
4498
|
+
{
|
|
4499
|
+
className: `${REACT_COMPONENT_PREFIX}-input-number-handler-icon`,
|
|
4500
|
+
"aria-hidden": "true"
|
|
4501
|
+
}
|
|
4502
|
+
)
|
|
4503
|
+
}
|
|
4504
|
+
),
|
|
4505
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-input-number-input-wrap`, children: [
|
|
4506
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4507
|
+
"input",
|
|
4508
|
+
{
|
|
4509
|
+
...restProps,
|
|
4510
|
+
ref,
|
|
4511
|
+
disabled,
|
|
4512
|
+
inputMode: "decimal",
|
|
4513
|
+
value: draftText,
|
|
4514
|
+
className: `${REACT_COMPONENT_PREFIX}-input-number-input`,
|
|
4515
|
+
onFocus: (event) => {
|
|
4516
|
+
setFocused(true);
|
|
4517
|
+
onFocus?.(event);
|
|
4518
|
+
},
|
|
4519
|
+
onChange: (event) => {
|
|
4520
|
+
const nextText = event.target.value;
|
|
4521
|
+
setDraftText(nextText);
|
|
4522
|
+
const parsed = parser ? parser(nextText) : parseNumberText(nextText);
|
|
4523
|
+
if (!isControlled) {
|
|
4524
|
+
setInnerValue(parsed);
|
|
4525
|
+
}
|
|
4526
|
+
onChange?.(parsed);
|
|
4527
|
+
},
|
|
4528
|
+
onBlur: (event) => {
|
|
4529
|
+
setFocused(false);
|
|
4530
|
+
const parsed = parser ? parser(event.target.value) : parseNumberText(event.target.value);
|
|
4531
|
+
commitValue(parsed);
|
|
4532
|
+
onBlur?.(event);
|
|
4533
|
+
},
|
|
4534
|
+
onKeyDown: (event) => {
|
|
4535
|
+
if (event.key === "ArrowUp") {
|
|
4536
|
+
event.preventDefault();
|
|
4537
|
+
stepBy(1);
|
|
4538
|
+
} else if (event.key === "ArrowDown") {
|
|
4539
|
+
event.preventDefault();
|
|
4540
|
+
stepBy(-1);
|
|
4541
|
+
} else if (event.key === "Enter") {
|
|
4542
|
+
const parsed = parser ? parser(event.currentTarget.value) : parseNumberText(event.currentTarget.value);
|
|
4543
|
+
commitValue(parsed);
|
|
4544
|
+
}
|
|
4545
|
+
onKeyDown?.(event);
|
|
4546
|
+
}
|
|
4547
|
+
}
|
|
4548
|
+
),
|
|
4549
|
+
addonAfter != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-input-number-addon`, children: addonAfter }) : null
|
|
4550
|
+
] }),
|
|
4551
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4552
|
+
"button",
|
|
4553
|
+
{
|
|
4554
|
+
type: "button",
|
|
4555
|
+
tabIndex: -1,
|
|
4556
|
+
disabled: disabled || atMax,
|
|
4557
|
+
className: joinClassNames(
|
|
4558
|
+
`${REACT_COMPONENT_PREFIX}-input-number-handler`,
|
|
4559
|
+
`${REACT_COMPONENT_PREFIX}-input-number-handler-up`
|
|
4560
|
+
),
|
|
4561
|
+
"aria-label": "\u589E\u52A0",
|
|
4562
|
+
onMouseDown: (event) => {
|
|
4563
|
+
event.preventDefault();
|
|
4564
|
+
},
|
|
4565
|
+
onClick: () => {
|
|
4566
|
+
stepBy(1);
|
|
4567
|
+
},
|
|
4568
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4569
|
+
"span",
|
|
4570
|
+
{
|
|
4571
|
+
className: `${REACT_COMPONENT_PREFIX}-input-number-handler-icon`,
|
|
4572
|
+
"aria-hidden": "true"
|
|
4573
|
+
}
|
|
4574
|
+
)
|
|
4575
|
+
}
|
|
4576
|
+
)
|
|
4577
|
+
]
|
|
4578
|
+
}
|
|
4579
|
+
);
|
|
4580
|
+
}
|
|
4581
|
+
);
|
|
4582
|
+
function parseNumberText(value) {
|
|
4583
|
+
const text = value.trim().replace(/%/g, "");
|
|
4584
|
+
if (!text) {
|
|
4585
|
+
return null;
|
|
4586
|
+
}
|
|
4587
|
+
const nextValue = Number(text);
|
|
4588
|
+
return Number.isFinite(nextValue) ? nextValue : null;
|
|
4589
|
+
}
|
|
4590
|
+
function resolvePrecision(precision, step) {
|
|
4591
|
+
if (typeof precision === "number" && Number.isInteger(precision) && precision >= 0) {
|
|
4592
|
+
return precision;
|
|
4593
|
+
}
|
|
4594
|
+
const stepText = String(step);
|
|
4595
|
+
if (!stepText.includes(".")) {
|
|
4596
|
+
return 0;
|
|
4597
|
+
}
|
|
4598
|
+
return stepText.split(".")[1]?.length ?? 0;
|
|
4599
|
+
}
|
|
4600
|
+
function normalizeNumberValue(value, options) {
|
|
4601
|
+
if (value == null || !Number.isFinite(value)) {
|
|
4602
|
+
return null;
|
|
4603
|
+
}
|
|
4604
|
+
let next = value;
|
|
4605
|
+
if (options.min != null) {
|
|
4606
|
+
next = Math.max(options.min, next);
|
|
4607
|
+
}
|
|
4608
|
+
if (options.max != null) {
|
|
4609
|
+
next = Math.min(options.max, next);
|
|
4610
|
+
}
|
|
4611
|
+
const factor = 10 ** options.precision;
|
|
4612
|
+
return Math.round(next * factor) / factor;
|
|
4613
|
+
}
|
|
4614
|
+
function formatDisplayValue(value, formatter, precision, step) {
|
|
4615
|
+
if (formatter) {
|
|
4616
|
+
return formatter(value);
|
|
4617
|
+
}
|
|
4618
|
+
if (value == null || !Number.isFinite(value)) {
|
|
4619
|
+
return "";
|
|
4620
|
+
}
|
|
4621
|
+
const digits = resolvePrecision(precision, step);
|
|
4622
|
+
return digits > 0 ? value.toFixed(digits) : String(Math.round(value));
|
|
4623
|
+
}
|
|
4624
|
+
|
|
4263
4625
|
// src/components/virtual-list/style.css
|
|
4264
4626
|
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');
|
|
4265
4627
|
var ReactVirtualList = react.forwardRef(function ReactVirtualListInner(props, ref) {
|
|
@@ -4346,7 +4708,7 @@ var ReactVirtualList = react.forwardRef(function ReactVirtualListInner(props, re
|
|
|
4346
4708
|
});
|
|
4347
4709
|
|
|
4348
4710
|
// src/components/select/style.css
|
|
4349
|
-
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:
|
|
4711
|
+
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');
|
|
4350
4712
|
var ReactSelect = react.forwardRef(
|
|
4351
4713
|
function ReactSelect2(props, ref) {
|
|
4352
4714
|
const {
|
|
@@ -4363,6 +4725,7 @@ var ReactSelect = react.forwardRef(
|
|
|
4363
4725
|
placeholder,
|
|
4364
4726
|
popupClassName,
|
|
4365
4727
|
allowClear = true,
|
|
4728
|
+
showArrow = true,
|
|
4366
4729
|
showSearch = false,
|
|
4367
4730
|
style,
|
|
4368
4731
|
value,
|
|
@@ -4554,7 +4917,7 @@ var ReactSelect = react.forwardRef(
|
|
|
4554
4917
|
}
|
|
4555
4918
|
}
|
|
4556
4919
|
),
|
|
4557
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
4920
|
+
showClear || showArrow ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4558
4921
|
"span",
|
|
4559
4922
|
{
|
|
4560
4923
|
className: joinClassNames(
|
|
@@ -4582,7 +4945,7 @@ var ReactSelect = react.forwardRef(
|
|
|
4582
4945
|
)
|
|
4583
4946
|
}
|
|
4584
4947
|
) : null,
|
|
4585
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4948
|
+
showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
4586
4949
|
"span",
|
|
4587
4950
|
{
|
|
4588
4951
|
className: joinClassNames(
|
|
@@ -4590,10 +4953,10 @@ var ReactSelect = react.forwardRef(
|
|
|
4590
4953
|
open && `${REACT_COMPONENT_PREFIX}-select-arrow-open`
|
|
4591
4954
|
)
|
|
4592
4955
|
}
|
|
4593
|
-
)
|
|
4956
|
+
) : null
|
|
4594
4957
|
]
|
|
4595
4958
|
}
|
|
4596
|
-
)
|
|
4959
|
+
) : null
|
|
4597
4960
|
]
|
|
4598
4961
|
}
|
|
4599
4962
|
),
|
|
@@ -4833,6 +5196,230 @@ function clampPage(page, totalPages) {
|
|
|
4833
5196
|
return Math.min(Math.max(1, Math.trunc(page)), totalPages);
|
|
4834
5197
|
}
|
|
4835
5198
|
|
|
5199
|
+
// src/components/popconfirm/style.css
|
|
5200
|
+
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');
|
|
5201
|
+
function ReactPopconfirm(props) {
|
|
5202
|
+
const {
|
|
5203
|
+
cancelButtonProps,
|
|
5204
|
+
cancelText = "\u53D6\u6D88",
|
|
5205
|
+
children,
|
|
5206
|
+
className,
|
|
5207
|
+
confirmLoading,
|
|
5208
|
+
defaultOpen = false,
|
|
5209
|
+
description,
|
|
5210
|
+
disabled = false,
|
|
5211
|
+
icon,
|
|
5212
|
+
offset = 8,
|
|
5213
|
+
okButtonProps,
|
|
5214
|
+
okText = "\u786E\u5B9A",
|
|
5215
|
+
onCancel,
|
|
5216
|
+
onConfirm,
|
|
5217
|
+
onOpenChange,
|
|
5218
|
+
open,
|
|
5219
|
+
placement = "topLeft",
|
|
5220
|
+
popupClassName,
|
|
5221
|
+
popupStyle,
|
|
5222
|
+
showCancel = true,
|
|
5223
|
+
style,
|
|
5224
|
+
title,
|
|
5225
|
+
zIndex
|
|
5226
|
+
} = props;
|
|
5227
|
+
const triggerRef = react.useRef(null);
|
|
5228
|
+
const [innerOpen, setInnerOpen] = react.useState(defaultOpen);
|
|
5229
|
+
const [innerConfirmLoading, setInnerConfirmLoading] = react.useState(false);
|
|
5230
|
+
const titleId = react.useId();
|
|
5231
|
+
const descriptionId = react.useId();
|
|
5232
|
+
const controlled = open !== void 0;
|
|
5233
|
+
const mergedOpen = controlled ? Boolean(open) : innerOpen;
|
|
5234
|
+
const popupOpen = mergedOpen && !disabled;
|
|
5235
|
+
const mergedConfirmLoading = confirmLoading ?? innerConfirmLoading;
|
|
5236
|
+
const hasTitle = title !== null && title !== void 0 && title !== false;
|
|
5237
|
+
const hasDescription = description !== null && description !== void 0 && description !== false;
|
|
5238
|
+
const {
|
|
5239
|
+
className: okButtonClassName,
|
|
5240
|
+
disabled: okButtonDisabled,
|
|
5241
|
+
...restOkButtonProps
|
|
5242
|
+
} = okButtonProps ?? {};
|
|
5243
|
+
const {
|
|
5244
|
+
className: cancelButtonClassName,
|
|
5245
|
+
disabled: cancelButtonDisabled,
|
|
5246
|
+
...restCancelButtonProps
|
|
5247
|
+
} = cancelButtonProps ?? {};
|
|
5248
|
+
react.useEffect(() => {
|
|
5249
|
+
if (!disabled || !mergedOpen) {
|
|
5250
|
+
return;
|
|
5251
|
+
}
|
|
5252
|
+
if (!controlled) {
|
|
5253
|
+
setInnerOpen(false);
|
|
5254
|
+
}
|
|
5255
|
+
onOpenChange?.(false);
|
|
5256
|
+
}, [controlled, disabled, mergedOpen, onOpenChange]);
|
|
5257
|
+
const setOpen = (nextOpen) => {
|
|
5258
|
+
const safeOpen = disabled ? false : nextOpen;
|
|
5259
|
+
if (!controlled) {
|
|
5260
|
+
setInnerOpen(safeOpen);
|
|
5261
|
+
}
|
|
5262
|
+
if (safeOpen !== mergedOpen) {
|
|
5263
|
+
onOpenChange?.(safeOpen);
|
|
5264
|
+
}
|
|
5265
|
+
};
|
|
5266
|
+
const handleConfirm = (event) => {
|
|
5267
|
+
if (mergedConfirmLoading || okButtonDisabled) {
|
|
5268
|
+
return;
|
|
5269
|
+
}
|
|
5270
|
+
const result = onConfirm?.(event);
|
|
5271
|
+
if (isPromiseLike(result)) {
|
|
5272
|
+
setInnerConfirmLoading(true);
|
|
5273
|
+
Promise.resolve(result).then(() => {
|
|
5274
|
+
setOpen(false);
|
|
5275
|
+
}).catch(() => void 0).finally(() => {
|
|
5276
|
+
setInnerConfirmLoading(false);
|
|
5277
|
+
});
|
|
5278
|
+
return;
|
|
5279
|
+
}
|
|
5280
|
+
setOpen(false);
|
|
5281
|
+
};
|
|
5282
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
5283
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5284
|
+
"span",
|
|
5285
|
+
{
|
|
5286
|
+
ref: triggerRef,
|
|
5287
|
+
className: joinClassNames(
|
|
5288
|
+
`${REACT_COMPONENT_PREFIX}-popconfirm-trigger`,
|
|
5289
|
+
disabled && `${REACT_COMPONENT_PREFIX}-popconfirm-trigger-disabled`,
|
|
5290
|
+
className
|
|
5291
|
+
),
|
|
5292
|
+
style,
|
|
5293
|
+
"aria-expanded": popupOpen,
|
|
5294
|
+
"aria-haspopup": "dialog",
|
|
5295
|
+
onClick: () => {
|
|
5296
|
+
if (disabled) {
|
|
5297
|
+
return;
|
|
5298
|
+
}
|
|
5299
|
+
setOpen(!mergedOpen);
|
|
5300
|
+
},
|
|
5301
|
+
children
|
|
5302
|
+
}
|
|
5303
|
+
),
|
|
5304
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5305
|
+
ReactPopup,
|
|
5306
|
+
{
|
|
5307
|
+
open: popupOpen,
|
|
5308
|
+
anchorRef: triggerRef,
|
|
5309
|
+
offset,
|
|
5310
|
+
placement,
|
|
5311
|
+
zIndex,
|
|
5312
|
+
surfaceClassName: joinClassNames(
|
|
5313
|
+
`${REACT_COMPONENT_PREFIX}-popconfirm-popup`,
|
|
5314
|
+
`${REACT_COMPONENT_PREFIX}-popconfirm-placement-${placement}`,
|
|
5315
|
+
popupClassName
|
|
5316
|
+
),
|
|
5317
|
+
surfaceStyle: popupStyle,
|
|
5318
|
+
onOpenChange: setOpen,
|
|
5319
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5320
|
+
"div",
|
|
5321
|
+
{
|
|
5322
|
+
className: `${REACT_COMPONENT_PREFIX}-popconfirm`,
|
|
5323
|
+
role: "alertdialog",
|
|
5324
|
+
"aria-labelledby": hasTitle ? titleId : void 0,
|
|
5325
|
+
"aria-describedby": hasDescription ? descriptionId : void 0,
|
|
5326
|
+
children: [
|
|
5327
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5328
|
+
"span",
|
|
5329
|
+
{
|
|
5330
|
+
className: `${REACT_COMPONENT_PREFIX}-popconfirm-arrow`,
|
|
5331
|
+
"aria-hidden": "true"
|
|
5332
|
+
}
|
|
5333
|
+
),
|
|
5334
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-popconfirm-message`, children: [
|
|
5335
|
+
icon !== null ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
5336
|
+
"span",
|
|
5337
|
+
{
|
|
5338
|
+
className: `${REACT_COMPONENT_PREFIX}-popconfirm-icon`,
|
|
5339
|
+
"aria-hidden": "true",
|
|
5340
|
+
children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(
|
|
5341
|
+
"span",
|
|
5342
|
+
{
|
|
5343
|
+
className: `${REACT_COMPONENT_PREFIX}-popconfirm-default-icon`,
|
|
5344
|
+
children: "!"
|
|
5345
|
+
}
|
|
5346
|
+
)
|
|
5347
|
+
}
|
|
5348
|
+
) : null,
|
|
5349
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-popconfirm-text`, children: [
|
|
5350
|
+
hasTitle ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
5351
|
+
"div",
|
|
5352
|
+
{
|
|
5353
|
+
id: titleId,
|
|
5354
|
+
className: `${REACT_COMPONENT_PREFIX}-popconfirm-title`,
|
|
5355
|
+
children: title
|
|
5356
|
+
}
|
|
5357
|
+
) : null,
|
|
5358
|
+
hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
5359
|
+
"div",
|
|
5360
|
+
{
|
|
5361
|
+
id: descriptionId,
|
|
5362
|
+
className: `${REACT_COMPONENT_PREFIX}-popconfirm-description`,
|
|
5363
|
+
children: description
|
|
5364
|
+
}
|
|
5365
|
+
) : null
|
|
5366
|
+
] })
|
|
5367
|
+
] }),
|
|
5368
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-popconfirm-actions`, children: [
|
|
5369
|
+
showCancel ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
5370
|
+
"button",
|
|
5371
|
+
{
|
|
5372
|
+
...restCancelButtonProps,
|
|
5373
|
+
type: "button",
|
|
5374
|
+
className: joinClassNames(
|
|
5375
|
+
`${REACT_COMPONENT_PREFIX}-popconfirm-button`,
|
|
5376
|
+
`${REACT_COMPONENT_PREFIX}-popconfirm-button-cancel`,
|
|
5377
|
+
cancelButtonClassName
|
|
5378
|
+
),
|
|
5379
|
+
disabled: mergedConfirmLoading || cancelButtonDisabled,
|
|
5380
|
+
onClick: (event) => {
|
|
5381
|
+
onCancel?.(event);
|
|
5382
|
+
setOpen(false);
|
|
5383
|
+
},
|
|
5384
|
+
children: cancelText
|
|
5385
|
+
}
|
|
5386
|
+
) : null,
|
|
5387
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5388
|
+
"button",
|
|
5389
|
+
{
|
|
5390
|
+
...restOkButtonProps,
|
|
5391
|
+
type: "button",
|
|
5392
|
+
className: joinClassNames(
|
|
5393
|
+
`${REACT_COMPONENT_PREFIX}-popconfirm-button`,
|
|
5394
|
+
`${REACT_COMPONENT_PREFIX}-popconfirm-button-primary`,
|
|
5395
|
+
okButtonClassName
|
|
5396
|
+
),
|
|
5397
|
+
disabled: mergedConfirmLoading || okButtonDisabled,
|
|
5398
|
+
onClick: handleConfirm,
|
|
5399
|
+
children: [
|
|
5400
|
+
mergedConfirmLoading ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
5401
|
+
"span",
|
|
5402
|
+
{
|
|
5403
|
+
className: `${REACT_COMPONENT_PREFIX}-popconfirm-loading`,
|
|
5404
|
+
"aria-hidden": "true"
|
|
5405
|
+
}
|
|
5406
|
+
) : null,
|
|
5407
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: okText })
|
|
5408
|
+
]
|
|
5409
|
+
}
|
|
5410
|
+
)
|
|
5411
|
+
] })
|
|
5412
|
+
]
|
|
5413
|
+
}
|
|
5414
|
+
)
|
|
5415
|
+
}
|
|
5416
|
+
)
|
|
5417
|
+
] });
|
|
5418
|
+
}
|
|
5419
|
+
function isPromiseLike(value) {
|
|
5420
|
+
return typeof value === "object" && value !== null && "then" in value && typeof value.then === "function";
|
|
5421
|
+
}
|
|
5422
|
+
|
|
4836
5423
|
// src/components/quarter/style.css
|
|
4837
5424
|
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');
|
|
4838
5425
|
var QUARTERS = ["Q1", "Q2", "Q3", "Q4"];
|
|
@@ -4849,6 +5436,7 @@ var ReactQuarterPicker = react.forwardRef(
|
|
|
4849
5436
|
placeholder = "\u8BF7\u9009\u62E9\u5B63\u5EA6",
|
|
4850
5437
|
popupClassName,
|
|
4851
5438
|
allowClear = true,
|
|
5439
|
+
showArrow = true,
|
|
4852
5440
|
style,
|
|
4853
5441
|
value,
|
|
4854
5442
|
...restProps
|
|
@@ -4962,7 +5550,7 @@ var ReactQuarterPicker = react.forwardRef(
|
|
|
4962
5550
|
}
|
|
4963
5551
|
}
|
|
4964
5552
|
),
|
|
4965
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5553
|
+
showClear || showArrow ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4966
5554
|
"span",
|
|
4967
5555
|
{
|
|
4968
5556
|
className: joinClassNames(
|
|
@@ -4992,7 +5580,7 @@ var ReactQuarterPicker = react.forwardRef(
|
|
|
4992
5580
|
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-year-clear-icon` })
|
|
4993
5581
|
}
|
|
4994
5582
|
) : null,
|
|
4995
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5583
|
+
showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
4996
5584
|
"span",
|
|
4997
5585
|
{
|
|
4998
5586
|
className: joinClassNames(
|
|
@@ -5000,10 +5588,10 @@ var ReactQuarterPicker = react.forwardRef(
|
|
|
5000
5588
|
open && `${REACT_COMPONENT_PREFIX}-year-arrow-open`
|
|
5001
5589
|
)
|
|
5002
5590
|
}
|
|
5003
|
-
)
|
|
5591
|
+
) : null
|
|
5004
5592
|
]
|
|
5005
5593
|
}
|
|
5006
|
-
)
|
|
5594
|
+
) : null
|
|
5007
5595
|
]
|
|
5008
5596
|
}
|
|
5009
5597
|
),
|
|
@@ -5229,6 +5817,7 @@ var ReactTimePicker = react.forwardRef(
|
|
|
5229
5817
|
placeholder = "HH:mm:ss",
|
|
5230
5818
|
popupClassName,
|
|
5231
5819
|
allowClear = true,
|
|
5820
|
+
showArrow = true,
|
|
5232
5821
|
style,
|
|
5233
5822
|
value,
|
|
5234
5823
|
...restProps
|
|
@@ -5328,7 +5917,7 @@ var ReactTimePicker = react.forwardRef(
|
|
|
5328
5917
|
}
|
|
5329
5918
|
}
|
|
5330
5919
|
),
|
|
5331
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5920
|
+
showClear || showArrow ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5332
5921
|
"span",
|
|
5333
5922
|
{
|
|
5334
5923
|
className: joinClassNames(
|
|
@@ -5358,7 +5947,7 @@ var ReactTimePicker = react.forwardRef(
|
|
|
5358
5947
|
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-time-clear-icon` })
|
|
5359
5948
|
}
|
|
5360
5949
|
) : null,
|
|
5361
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5950
|
+
showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
5362
5951
|
"span",
|
|
5363
5952
|
{
|
|
5364
5953
|
className: joinClassNames(
|
|
@@ -5366,10 +5955,10 @@ var ReactTimePicker = react.forwardRef(
|
|
|
5366
5955
|
open && `${REACT_COMPONENT_PREFIX}-time-arrow-open`
|
|
5367
5956
|
)
|
|
5368
5957
|
}
|
|
5369
|
-
)
|
|
5958
|
+
) : null
|
|
5370
5959
|
]
|
|
5371
5960
|
}
|
|
5372
|
-
)
|
|
5961
|
+
) : null
|
|
5373
5962
|
]
|
|
5374
5963
|
}
|
|
5375
5964
|
),
|
|
@@ -5467,6 +6056,7 @@ var ReactTimeRangePicker = react.forwardRef(function ReactTimeRangePicker2(props
|
|
|
5467
6056
|
rangeSeparator = " ~ ",
|
|
5468
6057
|
style,
|
|
5469
6058
|
value,
|
|
6059
|
+
showArrow = true,
|
|
5470
6060
|
...restProps
|
|
5471
6061
|
} = props;
|
|
5472
6062
|
const triggerRef = react.useRef(null);
|
|
@@ -5648,7 +6238,7 @@ var ReactTimeRangePicker = react.forwardRef(function ReactTimeRangePicker2(props
|
|
|
5648
6238
|
}
|
|
5649
6239
|
)
|
|
5650
6240
|
] }),
|
|
5651
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-time-actions`, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
6241
|
+
showArrow ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-time-actions`, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5652
6242
|
"span",
|
|
5653
6243
|
{
|
|
5654
6244
|
className: joinClassNames(
|
|
@@ -5656,7 +6246,7 @@ var ReactTimeRangePicker = react.forwardRef(function ReactTimeRangePicker2(props
|
|
|
5656
6246
|
open && `${REACT_COMPONENT_PREFIX}-time-arrow-open`
|
|
5657
6247
|
)
|
|
5658
6248
|
}
|
|
5659
|
-
) })
|
|
6249
|
+
) }) : null
|
|
5660
6250
|
]
|
|
5661
6251
|
}
|
|
5662
6252
|
),
|
|
@@ -5785,6 +6375,7 @@ var ReactYearPicker = react.forwardRef(
|
|
|
5785
6375
|
placeholder = "\u8BF7\u9009\u62E9\u5E74\u4EFD",
|
|
5786
6376
|
popupClassName,
|
|
5787
6377
|
allowClear = true,
|
|
6378
|
+
showArrow = true,
|
|
5788
6379
|
style,
|
|
5789
6380
|
value,
|
|
5790
6381
|
...restProps
|
|
@@ -5897,7 +6488,7 @@ var ReactYearPicker = react.forwardRef(
|
|
|
5897
6488
|
}
|
|
5898
6489
|
}
|
|
5899
6490
|
),
|
|
5900
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
6491
|
+
showClear || showArrow ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5901
6492
|
"span",
|
|
5902
6493
|
{
|
|
5903
6494
|
className: joinClassNames(
|
|
@@ -5927,7 +6518,7 @@ var ReactYearPicker = react.forwardRef(
|
|
|
5927
6518
|
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-year-clear-icon` })
|
|
5928
6519
|
}
|
|
5929
6520
|
) : null,
|
|
5930
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6521
|
+
showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
5931
6522
|
"span",
|
|
5932
6523
|
{
|
|
5933
6524
|
className: joinClassNames(
|
|
@@ -5935,10 +6526,10 @@ var ReactYearPicker = react.forwardRef(
|
|
|
5935
6526
|
open && `${REACT_COMPONENT_PREFIX}-year-arrow-open`
|
|
5936
6527
|
)
|
|
5937
6528
|
}
|
|
5938
|
-
)
|
|
6529
|
+
) : null
|
|
5939
6530
|
]
|
|
5940
6531
|
}
|
|
5941
|
-
)
|
|
6532
|
+
) : null
|
|
5942
6533
|
]
|
|
5943
6534
|
}
|
|
5944
6535
|
),
|
|
@@ -6099,21 +6690,27 @@ function resolveDecadeStart6(year) {
|
|
|
6099
6690
|
exports.REACT_COMPONENT_PREFIX = REACT_COMPONENT_PREFIX;
|
|
6100
6691
|
exports.ReactCheckbox = ReactCheckbox;
|
|
6101
6692
|
exports.ReactColorPicker = ReactColorPicker;
|
|
6693
|
+
exports.ReactContentScaleProvider = ReactContentScaleProvider;
|
|
6102
6694
|
exports.ReactDatePicker = ReactDatePicker;
|
|
6103
6695
|
exports.ReactDateRangePicker = ReactDateRangePicker;
|
|
6104
6696
|
exports.ReactDateTimePicker = ReactDateTimePicker;
|
|
6105
6697
|
exports.ReactDateTimeRangePicker = ReactDateTimeRangePicker;
|
|
6106
6698
|
exports.ReactImagePreview = ReactImagePreview;
|
|
6107
6699
|
exports.ReactInput = ReactInput;
|
|
6700
|
+
exports.ReactInputNumber = ReactInputNumber;
|
|
6108
6701
|
exports.ReactMonthPicker = ReactMonthPicker;
|
|
6109
6702
|
exports.ReactNumberInput = ReactNumberInput;
|
|
6110
6703
|
exports.ReactPagination = ReactPagination;
|
|
6704
|
+
exports.ReactPopconfirm = ReactPopconfirm;
|
|
6111
6705
|
exports.ReactPopup = ReactPopup;
|
|
6112
6706
|
exports.ReactQuarterPicker = ReactQuarterPicker;
|
|
6113
6707
|
exports.ReactSelect = ReactSelect;
|
|
6114
6708
|
exports.ReactTimePicker = ReactTimePicker;
|
|
6115
6709
|
exports.ReactTimeRangePicker = ReactTimeRangePicker;
|
|
6710
|
+
exports.ReactTransition = ReactTransition;
|
|
6116
6711
|
exports.ReactVirtualList = ReactVirtualList;
|
|
6117
6712
|
exports.ReactYearPicker = ReactYearPicker;
|
|
6713
|
+
exports.useReactContentScale = useReactContentScale;
|
|
6714
|
+
exports.useReactTransition = useReactTransition;
|
|
6118
6715
|
//# sourceMappingURL=index.cjs.map
|
|
6119
6716
|
//# sourceMappingURL=index.cjs.map
|