@canvas-components/react-components 0.3.6 → 0.3.8
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/dist/index.cjs +353 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +28 -1
- package/dist/index.d.ts +28 -1
- package/dist/index.js +354 -7
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -565,6 +565,8 @@ interface PopupAnchorRect {
|
|
|
565
565
|
height: number;
|
|
566
566
|
}
|
|
567
567
|
interface ReactPopupProps {
|
|
568
|
+
/** 将面板高度限制在视口内，超出部分在面板内部滚动。 */
|
|
569
|
+
constrainHeight?: boolean;
|
|
568
570
|
/**
|
|
569
571
|
* 是否显示弹层。
|
|
570
572
|
*/
|
|
@@ -925,6 +927,31 @@ interface ReactSelectProps extends Omit<ReactInputProps, "value" | "onChange" |
|
|
|
925
927
|
*/
|
|
926
928
|
declare const ReactSelect: react.ForwardRefExoticComponent<ReactSelectProps & react.RefAttributes<HTMLInputElement>>;
|
|
927
929
|
|
|
930
|
+
/** 级联选择树节点；值保留原始字符串或数字类型。 */
|
|
931
|
+
interface ReactCascaderOption {
|
|
932
|
+
label: string;
|
|
933
|
+
value: string | number;
|
|
934
|
+
disabled?: boolean;
|
|
935
|
+
children?: ReactCascaderOption[];
|
|
936
|
+
}
|
|
937
|
+
/** 选择来源及是否已完成路径选择。 */
|
|
938
|
+
interface ReactCascaderChangeInfo {
|
|
939
|
+
trigger: "mouse" | "keyboard" | "clear";
|
|
940
|
+
complete: boolean;
|
|
941
|
+
}
|
|
942
|
+
/** 单路径级联选择配置。 */
|
|
943
|
+
interface ReactCascaderProps extends Omit<ReactInputProps, "value" | "defaultValue" | "onChange" | "onPressEnter" | "displayRender"> {
|
|
944
|
+
value?: (string | number)[];
|
|
945
|
+
options?: ReactCascaderOption[];
|
|
946
|
+
showSearch?: boolean;
|
|
947
|
+
changeOnSelect?: boolean;
|
|
948
|
+
expandTrigger?: "click" | "hover";
|
|
949
|
+
displayRender?: (labels: string[], selectedOptions: ReactCascaderOption[]) => string;
|
|
950
|
+
onChange?: (value: (string | number)[], selectedOptions: ReactCascaderOption[], info: ReactCascaderChangeInfo) => void;
|
|
951
|
+
}
|
|
952
|
+
/** 多列展开的级联选择器，复用现有输入框、浮层及主题。 */
|
|
953
|
+
declare function ReactCascader(props: ReactCascaderProps): react.JSX.Element;
|
|
954
|
+
|
|
928
955
|
interface ReactAutoCompleteProps extends Omit<ReactSelectProps, "allowCustomValue" | "onChange" | "onInputValueChange" | "onPressEnter"> {
|
|
929
956
|
/** 当前值。 */
|
|
930
957
|
value?: string | number;
|
|
@@ -1289,4 +1316,4 @@ declare function useReactContentScale(): ReactContentScaleValue;
|
|
|
1289
1316
|
*/
|
|
1290
1317
|
declare const REACT_COMPONENT_PREFIX = "canvas-react";
|
|
1291
1318
|
|
|
1292
|
-
export { REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactButton, type ReactButtonProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactCol, type ReactColProps, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactFlex, type ReactFlexProps, ReactForm, type ReactFormInstance, type ReactFormItemProps, type ReactFormProps, type ReactFormRule, type ReactFormRuleConfig, type ReactFormValues, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, type ReactMessageType, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, type ReactPaginationStyles, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactRadio, type ReactRadioGroupProps, type ReactRadioProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactRow, type ReactRowProps, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTextArea, type ReactTextAreaProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTooltip, type ReactTooltipProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, reactMessage, resolveResizablePanelSizes, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
|
|
1319
|
+
export { REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactButton, type ReactButtonProps, ReactCascader, type ReactCascaderChangeInfo, type ReactCascaderOption, type ReactCascaderProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactCol, type ReactColProps, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactFlex, type ReactFlexProps, ReactForm, type ReactFormInstance, type ReactFormItemProps, type ReactFormProps, type ReactFormRule, type ReactFormRuleConfig, type ReactFormValues, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, type ReactMessageType, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, type ReactPaginationStyles, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactRadio, type ReactRadioGroupProps, type ReactRadioProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactRow, type ReactRowProps, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTextArea, type ReactTextAreaProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTooltip, type ReactTooltipProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, reactMessage, resolveResizablePanelSizes, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
|
package/dist/index.d.ts
CHANGED
|
@@ -565,6 +565,8 @@ interface PopupAnchorRect {
|
|
|
565
565
|
height: number;
|
|
566
566
|
}
|
|
567
567
|
interface ReactPopupProps {
|
|
568
|
+
/** 将面板高度限制在视口内，超出部分在面板内部滚动。 */
|
|
569
|
+
constrainHeight?: boolean;
|
|
568
570
|
/**
|
|
569
571
|
* 是否显示弹层。
|
|
570
572
|
*/
|
|
@@ -925,6 +927,31 @@ interface ReactSelectProps extends Omit<ReactInputProps, "value" | "onChange" |
|
|
|
925
927
|
*/
|
|
926
928
|
declare const ReactSelect: react.ForwardRefExoticComponent<ReactSelectProps & react.RefAttributes<HTMLInputElement>>;
|
|
927
929
|
|
|
930
|
+
/** 级联选择树节点；值保留原始字符串或数字类型。 */
|
|
931
|
+
interface ReactCascaderOption {
|
|
932
|
+
label: string;
|
|
933
|
+
value: string | number;
|
|
934
|
+
disabled?: boolean;
|
|
935
|
+
children?: ReactCascaderOption[];
|
|
936
|
+
}
|
|
937
|
+
/** 选择来源及是否已完成路径选择。 */
|
|
938
|
+
interface ReactCascaderChangeInfo {
|
|
939
|
+
trigger: "mouse" | "keyboard" | "clear";
|
|
940
|
+
complete: boolean;
|
|
941
|
+
}
|
|
942
|
+
/** 单路径级联选择配置。 */
|
|
943
|
+
interface ReactCascaderProps extends Omit<ReactInputProps, "value" | "defaultValue" | "onChange" | "onPressEnter" | "displayRender"> {
|
|
944
|
+
value?: (string | number)[];
|
|
945
|
+
options?: ReactCascaderOption[];
|
|
946
|
+
showSearch?: boolean;
|
|
947
|
+
changeOnSelect?: boolean;
|
|
948
|
+
expandTrigger?: "click" | "hover";
|
|
949
|
+
displayRender?: (labels: string[], selectedOptions: ReactCascaderOption[]) => string;
|
|
950
|
+
onChange?: (value: (string | number)[], selectedOptions: ReactCascaderOption[], info: ReactCascaderChangeInfo) => void;
|
|
951
|
+
}
|
|
952
|
+
/** 多列展开的级联选择器，复用现有输入框、浮层及主题。 */
|
|
953
|
+
declare function ReactCascader(props: ReactCascaderProps): react.JSX.Element;
|
|
954
|
+
|
|
928
955
|
interface ReactAutoCompleteProps extends Omit<ReactSelectProps, "allowCustomValue" | "onChange" | "onInputValueChange" | "onPressEnter"> {
|
|
929
956
|
/** 当前值。 */
|
|
930
957
|
value?: string | number;
|
|
@@ -1289,4 +1316,4 @@ declare function useReactContentScale(): ReactContentScaleValue;
|
|
|
1289
1316
|
*/
|
|
1290
1317
|
declare const REACT_COMPONENT_PREFIX = "canvas-react";
|
|
1291
1318
|
|
|
1292
|
-
export { REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactButton, type ReactButtonProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactCol, type ReactColProps, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactFlex, type ReactFlexProps, ReactForm, type ReactFormInstance, type ReactFormItemProps, type ReactFormProps, type ReactFormRule, type ReactFormRuleConfig, type ReactFormValues, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, type ReactMessageType, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, type ReactPaginationStyles, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactRadio, type ReactRadioGroupProps, type ReactRadioProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactRow, type ReactRowProps, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTextArea, type ReactTextAreaProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTooltip, type ReactTooltipProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, reactMessage, resolveResizablePanelSizes, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
|
|
1319
|
+
export { REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactButton, type ReactButtonProps, ReactCascader, type ReactCascaderChangeInfo, type ReactCascaderOption, type ReactCascaderProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactCol, type ReactColProps, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactFlex, type ReactFlexProps, ReactForm, type ReactFormInstance, type ReactFormItemProps, type ReactFormProps, type ReactFormRule, type ReactFormRuleConfig, type ReactFormValues, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, type ReactMessageType, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, type ReactPaginationStyles, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactRadio, type ReactRadioGroupProps, type ReactRadioProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactRow, type ReactRowProps, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTextArea, type ReactTextAreaProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTooltip, type ReactTooltipProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, reactMessage, resolveResizablePanelSizes, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { forwardRef, useRef, useEffect, useImperativeHandle, createContext, useState, useMemo, useLayoutEffect, useContext, useSyncExternalStore, cloneElement, Fragment as Fragment$1 } from 'react';
|
|
2
|
+
import { forwardRef, useRef, useEffect, useImperativeHandle, createContext, useState, useMemo, useLayoutEffect, useContext, useSyncExternalStore, cloneElement, Fragment as Fragment$1, useId } from 'react';
|
|
3
3
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
4
4
|
import { createPortal } from 'react-dom';
|
|
5
5
|
|
|
@@ -298,6 +298,7 @@ function ReactPopup(props) {
|
|
|
298
298
|
style,
|
|
299
299
|
surfaceClassName,
|
|
300
300
|
surfaceStyle,
|
|
301
|
+
constrainHeight = false,
|
|
301
302
|
zIndex = 1200
|
|
302
303
|
} = props;
|
|
303
304
|
const { scale: contentScale } = useReactContentScale();
|
|
@@ -319,6 +320,7 @@ function ReactPopup(props) {
|
|
|
319
320
|
return;
|
|
320
321
|
}
|
|
321
322
|
const nextPosition = resolvePopupPosition({
|
|
323
|
+
constrainHeight,
|
|
322
324
|
anchor: nextAnchor,
|
|
323
325
|
contentScale,
|
|
324
326
|
matchAnchorWidth,
|
|
@@ -328,7 +330,7 @@ function ReactPopup(props) {
|
|
|
328
330
|
popupRect: resolvePopupSurfaceRect(surfaceRef.current, contentScale)
|
|
329
331
|
});
|
|
330
332
|
setPosition((prev) => {
|
|
331
|
-
if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth) {
|
|
333
|
+
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 && prev?.style.maxHeight === nextPosition.style.maxHeight) {
|
|
332
334
|
return prev;
|
|
333
335
|
}
|
|
334
336
|
return nextPosition;
|
|
@@ -355,6 +357,7 @@ function ReactPopup(props) {
|
|
|
355
357
|
anchorRect,
|
|
356
358
|
anchorRef,
|
|
357
359
|
contentScale,
|
|
360
|
+
constrainHeight,
|
|
358
361
|
matchAnchorWidth,
|
|
359
362
|
minWidth,
|
|
360
363
|
offset,
|
|
@@ -371,6 +374,7 @@ function ReactPopup(props) {
|
|
|
371
374
|
return;
|
|
372
375
|
}
|
|
373
376
|
const nextPosition = resolvePopupPosition({
|
|
377
|
+
constrainHeight,
|
|
374
378
|
anchor: nextAnchor,
|
|
375
379
|
contentScale,
|
|
376
380
|
matchAnchorWidth,
|
|
@@ -380,7 +384,7 @@ function ReactPopup(props) {
|
|
|
380
384
|
popupRect: resolvePopupSurfaceRect(surfaceRef.current, contentScale)
|
|
381
385
|
});
|
|
382
386
|
setPosition((prev) => {
|
|
383
|
-
if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth) {
|
|
387
|
+
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 && prev?.style.maxHeight === nextPosition.style.maxHeight) {
|
|
384
388
|
return prev;
|
|
385
389
|
}
|
|
386
390
|
return nextPosition;
|
|
@@ -398,6 +402,7 @@ function ReactPopup(props) {
|
|
|
398
402
|
anchorRect,
|
|
399
403
|
anchorRef,
|
|
400
404
|
contentScale,
|
|
405
|
+
constrainHeight,
|
|
401
406
|
matchAnchorWidth,
|
|
402
407
|
minWidth,
|
|
403
408
|
offset,
|
|
@@ -463,7 +468,7 @@ function ReactPopup(props) {
|
|
|
463
468
|
transition.className,
|
|
464
469
|
surfaceClassName
|
|
465
470
|
),
|
|
466
|
-
style: surfaceStyle,
|
|
471
|
+
style: resolvePopupSurfaceStyle(surfaceStyle, position.style.maxHeight),
|
|
467
472
|
children
|
|
468
473
|
}
|
|
469
474
|
)
|
|
@@ -492,7 +497,8 @@ function resolvePopupPosition(params) {
|
|
|
492
497
|
matchAnchorWidth ? anchor.width : 0
|
|
493
498
|
);
|
|
494
499
|
const popupWidth = preferredVisualWidth;
|
|
495
|
-
const
|
|
500
|
+
const maxVisualHeight = Math.max(0, viewportHeight - margin * 2);
|
|
501
|
+
const popupHeight = params.constrainHeight ? Math.min(popupRect?.height ?? 0, maxVisualHeight) : popupRect?.height ?? 0;
|
|
496
502
|
const isHorizontalPlacement = placement.startsWith("left") || placement.startsWith("right");
|
|
497
503
|
const preferredVertical = placement.startsWith("top") ? "top" : placement.endsWith("Top") ? "top" : "bottom";
|
|
498
504
|
const preferredTop = resolveRawTop({
|
|
@@ -537,6 +543,7 @@ function resolvePopupPosition(params) {
|
|
|
537
543
|
vertical: resolvedVertical
|
|
538
544
|
}),
|
|
539
545
|
style: {
|
|
546
|
+
...params.constrainHeight ? { maxHeight: toContentLayoutSize(maxVisualHeight, contentScale) } : {},
|
|
540
547
|
left,
|
|
541
548
|
top,
|
|
542
549
|
width: matchAnchorWidth ? layoutAnchorWidth : void 0,
|
|
@@ -544,6 +551,19 @@ function resolvePopupPosition(params) {
|
|
|
544
551
|
}
|
|
545
552
|
};
|
|
546
553
|
}
|
|
554
|
+
function resolvePopupSurfaceStyle(style, viewportMaxHeight) {
|
|
555
|
+
if (typeof viewportMaxHeight !== "number") return style;
|
|
556
|
+
const custom = style?.maxHeight;
|
|
557
|
+
const maxHeight = typeof custom === "number" ? Math.min(custom, viewportMaxHeight) : typeof custom === "string" && custom !== "none" ? `min(${custom}, ${viewportMaxHeight}px)` : viewportMaxHeight;
|
|
558
|
+
return {
|
|
559
|
+
...style,
|
|
560
|
+
boxSizing: "border-box",
|
|
561
|
+
minHeight: 0,
|
|
562
|
+
maxHeight,
|
|
563
|
+
overflowY: "auto",
|
|
564
|
+
overscrollBehaviorY: "contain"
|
|
565
|
+
};
|
|
566
|
+
}
|
|
547
567
|
function resolvePlacement(params) {
|
|
548
568
|
const { horizontal, isHorizontalPlacement, vertical } = params;
|
|
549
569
|
if (isHorizontalPlacement) {
|
|
@@ -693,7 +713,7 @@ var ReactVirtualList = forwardRef(function ReactVirtualListInner(props, ref) {
|
|
|
693
713
|
});
|
|
694
714
|
|
|
695
715
|
// src/components/select/style.css
|
|
696
|
-
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}\n.canvas-react-select-option-searching {\n color: var(--canvas-react-color-text);\n}\n.canvas-react-select-option-searching:hover,\n.canvas-react-select-option-searching.canvas-react-select-option-active {\n background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-select-option-disabled {\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-select-option-highlight {\n color: var(--canvas-react-color-primary);\n font-weight: 600;\n}\n.canvas-react-select-option-disabled .canvas-react-select-option-highlight {\n color: inherit;\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');
|
|
716
|
+
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 pointer-events: none;\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.canvas-react-cascader:hover .canvas-react-select-clear,\n.canvas-react-cascader-open .canvas-react-select-clear,\n.canvas-react-cascader: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.canvas-react-cascader:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader: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}\n.canvas-react-select-option-searching {\n color: var(--canvas-react-color-text);\n}\n.canvas-react-select-option-searching:hover,\n.canvas-react-select-option-searching.canvas-react-select-option-active {\n background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-select-option-disabled {\n color: #9ca3af;\n cursor: not-allowed;\n}\n.canvas-react-select-option-highlight {\n color: var(--canvas-react-color-primary);\n font-weight: 600;\n}\n.canvas-react-select-option-disabled .canvas-react-select-option-highlight {\n color: inherit;\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');
|
|
697
717
|
var ReactSelect = forwardRef(
|
|
698
718
|
function ReactSelect2(props, ref) {
|
|
699
719
|
const {
|
|
@@ -7218,6 +7238,333 @@ function clamp3(value, min, max) {
|
|
|
7218
7238
|
}
|
|
7219
7239
|
return Math.min(Math.max(value, min), max);
|
|
7220
7240
|
}
|
|
7241
|
+
|
|
7242
|
+
// src/components/cascader/style.css
|
|
7243
|
+
styleInject('@import "../../styles/variables.css";\n.canvas-react-cascader {\n width: 100%;\n min-width: 0;\n}\n.canvas-react-cascader > .canvas-react-input-affix-wrapper {\n width: 100%;\n}\n.canvas-react-cascader-menus {\n display: flex;\n max-width: calc(100vw - 24px);\n overflow: auto;\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n}\n.canvas-react-cascader-menu {\n flex: 0 0 auto;\n min-width: 120px;\n max-width: 320px;\n max-height: min(256px, calc(100vh - 48px));\n overflow: auto;\n padding: 4px;\n}\n.canvas-react-cascader-menu + .canvas-react-cascader-menu {\n border-left: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-cascader-option {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n padding: 5px 10px;\n line-height: 22px;\n border-radius: var(--canvas-react-radius-sm);\n cursor: pointer;\n white-space: nowrap;\n}\n.canvas-react-cascader-option[aria-selected=true] {\n color: var(--canvas-react-color-primary);\n background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-cascader-option[data-active=true] {\n background: var(--canvas-react-color-bg-hover, #f5f5f5);\n}\n.canvas-react-cascader-option[aria-disabled=true] {\n opacity: 0.4;\n cursor: not-allowed;\n}\n.canvas-react-cascader-empty {\n padding: 8px 10px;\n color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-cascader-chevron {\n width: 7px;\n height: 7px;\n flex: 0 0 auto;\n margin-left: 8px;\n border-top: 1.5px solid #9ca3af;\n border-right: 1.5px solid #9ca3af;\n transform: rotate(45deg);\n transform-origin: center;\n transition: transform 0.18s ease, border-color 0.18s ease;\n}\n.canvas-react-cascader-option:not([aria-disabled=true]):hover .canvas-react-cascader-chevron,\n.canvas-react-cascader-option[aria-selected=true] .canvas-react-cascader-chevron {\n border-color: #6b7280;\n transform: rotate(135deg);\n}\n');
|
|
7244
|
+
function resolvePath(options, value) {
|
|
7245
|
+
const path = [];
|
|
7246
|
+
for (const part of value) {
|
|
7247
|
+
const item = options.find((option) => option.value === part);
|
|
7248
|
+
if (!item) break;
|
|
7249
|
+
path.push(item);
|
|
7250
|
+
options = item.children ?? [];
|
|
7251
|
+
}
|
|
7252
|
+
return path;
|
|
7253
|
+
}
|
|
7254
|
+
var EMPTY_OPTIONS = [];
|
|
7255
|
+
var EMPTY_VALUE = [];
|
|
7256
|
+
function ReactCascader(props) {
|
|
7257
|
+
const {
|
|
7258
|
+
value = EMPTY_VALUE,
|
|
7259
|
+
options = EMPTY_OPTIONS,
|
|
7260
|
+
showSearch = false,
|
|
7261
|
+
changeOnSelect = false,
|
|
7262
|
+
expandTrigger = "click",
|
|
7263
|
+
displayRender,
|
|
7264
|
+
onChange,
|
|
7265
|
+
allowClear = true,
|
|
7266
|
+
disabled,
|
|
7267
|
+
readOnly,
|
|
7268
|
+
onFocus,
|
|
7269
|
+
onBlur,
|
|
7270
|
+
onClick,
|
|
7271
|
+
onKeyDown,
|
|
7272
|
+
...inputProps
|
|
7273
|
+
} = props;
|
|
7274
|
+
const anchorRef = useRef(null);
|
|
7275
|
+
const inputRef = useRef(null);
|
|
7276
|
+
const popupRef = useRef(null);
|
|
7277
|
+
const popupId = useId();
|
|
7278
|
+
const selected = useMemo(() => resolvePath(options, value), [options, value]);
|
|
7279
|
+
const [path, setPath] = useState(selected);
|
|
7280
|
+
const [open, setOpen] = useState(false);
|
|
7281
|
+
const [keyword, setKeyword] = useState("");
|
|
7282
|
+
const [typing, setTyping] = useState(false);
|
|
7283
|
+
const [focus, setFocus] = useState({ column: 0, index: -1 });
|
|
7284
|
+
const interactive = !disabled && !readOnly;
|
|
7285
|
+
useEffect(() => {
|
|
7286
|
+
setPath(selected);
|
|
7287
|
+
}, [selected]);
|
|
7288
|
+
const labels = value.map(
|
|
7289
|
+
(part, index) => selected[index]?.label ?? String(part)
|
|
7290
|
+
);
|
|
7291
|
+
const text = displayRender?.(labels, selected) ?? labels.join(" / ");
|
|
7292
|
+
const columns = [options];
|
|
7293
|
+
for (const item of path) {
|
|
7294
|
+
if (!item.children?.length) break;
|
|
7295
|
+
columns.push(item.children);
|
|
7296
|
+
}
|
|
7297
|
+
const searching = showSearch && keyword.trim().length > 0;
|
|
7298
|
+
const results = useMemo(() => {
|
|
7299
|
+
if (!keyword.trim()) return [];
|
|
7300
|
+
const matches = [];
|
|
7301
|
+
const visit = (items, parents) => {
|
|
7302
|
+
for (const item of items) {
|
|
7303
|
+
if (item.disabled) continue;
|
|
7304
|
+
const next = [...parents, item];
|
|
7305
|
+
if ((!item.children?.length || changeOnSelect) && next.map((part) => part.label).join(" / ").toLocaleLowerCase().includes(keyword.trim().toLocaleLowerCase()))
|
|
7306
|
+
matches.push(next);
|
|
7307
|
+
if (item.children?.length) visit(item.children, next);
|
|
7308
|
+
}
|
|
7309
|
+
};
|
|
7310
|
+
visit(options, []);
|
|
7311
|
+
return matches;
|
|
7312
|
+
}, [options, keyword, changeOnSelect]);
|
|
7313
|
+
useEffect(() => {
|
|
7314
|
+
popupRef.current?.querySelector("[data-active='true']")?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
|
|
7315
|
+
}, [focus, open]);
|
|
7316
|
+
const choose = (next, trigger, fromSearch = false) => {
|
|
7317
|
+
const item = next[next.length - 1];
|
|
7318
|
+
if (!item || next.some((option) => option.disabled)) return;
|
|
7319
|
+
setPath(next);
|
|
7320
|
+
const complete = !item.children?.length || fromSearch;
|
|
7321
|
+
if (complete || changeOnSelect)
|
|
7322
|
+
onChange?.(
|
|
7323
|
+
next.map((option) => option.value),
|
|
7324
|
+
next,
|
|
7325
|
+
{ trigger, complete }
|
|
7326
|
+
);
|
|
7327
|
+
if (complete) {
|
|
7328
|
+
setOpen(false);
|
|
7329
|
+
setKeyword("");
|
|
7330
|
+
setTyping(false);
|
|
7331
|
+
}
|
|
7332
|
+
};
|
|
7333
|
+
const show = () => {
|
|
7334
|
+
if (!interactive) return;
|
|
7335
|
+
setOpen(true);
|
|
7336
|
+
setPath(selected);
|
|
7337
|
+
};
|
|
7338
|
+
return /* @__PURE__ */ jsxs(
|
|
7339
|
+
"div",
|
|
7340
|
+
{
|
|
7341
|
+
ref: anchorRef,
|
|
7342
|
+
className: `canvas-react-cascader${open && interactive ? " canvas-react-cascader-open" : ""}`,
|
|
7343
|
+
children: [
|
|
7344
|
+
/* @__PURE__ */ jsx(
|
|
7345
|
+
ReactInput,
|
|
7346
|
+
{
|
|
7347
|
+
ref: inputRef,
|
|
7348
|
+
...inputProps,
|
|
7349
|
+
disabled,
|
|
7350
|
+
readOnly: readOnly || !showSearch,
|
|
7351
|
+
allowClear: false,
|
|
7352
|
+
role: "combobox",
|
|
7353
|
+
"aria-haspopup": "listbox",
|
|
7354
|
+
"aria-expanded": open,
|
|
7355
|
+
"aria-controls": open ? popupId : void 0,
|
|
7356
|
+
"aria-activedescendant": open && focus.index >= 0 ? `${popupId}-${searching ? 0 : focus.column}-${focus.index}` : void 0,
|
|
7357
|
+
value: open && showSearch && typing ? keyword : text,
|
|
7358
|
+
onFocus: (event) => {
|
|
7359
|
+
show();
|
|
7360
|
+
onFocus?.(event);
|
|
7361
|
+
},
|
|
7362
|
+
onClick: (event) => {
|
|
7363
|
+
show();
|
|
7364
|
+
onClick?.(event);
|
|
7365
|
+
},
|
|
7366
|
+
onBlur: (event) => {
|
|
7367
|
+
setOpen(false);
|
|
7368
|
+
setKeyword("");
|
|
7369
|
+
setTyping(false);
|
|
7370
|
+
onBlur?.(event);
|
|
7371
|
+
},
|
|
7372
|
+
onChange: (event) => {
|
|
7373
|
+
setTyping(true);
|
|
7374
|
+
setKeyword(event.target.value);
|
|
7375
|
+
setOpen(true);
|
|
7376
|
+
setFocus({ column: 0, index: -1 });
|
|
7377
|
+
},
|
|
7378
|
+
onKeyDown: (event) => {
|
|
7379
|
+
onKeyDown?.(event);
|
|
7380
|
+
if (event.defaultPrevented || !interactive) return;
|
|
7381
|
+
if (event.key === "Escape") {
|
|
7382
|
+
event.preventDefault();
|
|
7383
|
+
setOpen(false);
|
|
7384
|
+
setKeyword("");
|
|
7385
|
+
setTyping(false);
|
|
7386
|
+
return;
|
|
7387
|
+
}
|
|
7388
|
+
if (![
|
|
7389
|
+
"ArrowDown",
|
|
7390
|
+
"ArrowUp",
|
|
7391
|
+
"ArrowRight",
|
|
7392
|
+
"ArrowLeft",
|
|
7393
|
+
"Enter"
|
|
7394
|
+
].includes(event.key))
|
|
7395
|
+
return;
|
|
7396
|
+
event.preventDefault();
|
|
7397
|
+
setOpen(true);
|
|
7398
|
+
const column = searching ? 0 : Math.min(focus.column, columns.length - 1);
|
|
7399
|
+
const items = searching ? results.map((result) => result[result.length - 1]) : columns[column];
|
|
7400
|
+
if (event.key === "ArrowDown" || event.key === "ArrowUp") {
|
|
7401
|
+
const direction = event.key === "ArrowDown" ? 1 : -1;
|
|
7402
|
+
let index = focus.index;
|
|
7403
|
+
if (index < 0) index = direction === 1 ? -1 : 0;
|
|
7404
|
+
for (let count = 0; count < items.length; count++) {
|
|
7405
|
+
index = (index + direction + items.length) % items.length;
|
|
7406
|
+
if (!items[index].disabled) {
|
|
7407
|
+
setFocus({ column, index });
|
|
7408
|
+
break;
|
|
7409
|
+
}
|
|
7410
|
+
}
|
|
7411
|
+
} else if (event.key === "ArrowLeft" && !searching) {
|
|
7412
|
+
const previous = Math.max(0, column - 1);
|
|
7413
|
+
setFocus({
|
|
7414
|
+
column: previous,
|
|
7415
|
+
index: columns[previous].indexOf(path[previous])
|
|
7416
|
+
});
|
|
7417
|
+
} else {
|
|
7418
|
+
const item = items[focus.index];
|
|
7419
|
+
if (!item || item.disabled) return;
|
|
7420
|
+
const next = searching ? results[focus.index] : [...path.slice(0, column), item];
|
|
7421
|
+
if (event.key === "Enter") choose(next, "keyboard", searching);
|
|
7422
|
+
else if (event.key !== "ArrowRight") return;
|
|
7423
|
+
if (!searching && item.children?.length) {
|
|
7424
|
+
setPath(next);
|
|
7425
|
+
setFocus({
|
|
7426
|
+
column: column + 1,
|
|
7427
|
+
index: item.children.findIndex((child) => !child.disabled)
|
|
7428
|
+
});
|
|
7429
|
+
}
|
|
7430
|
+
}
|
|
7431
|
+
},
|
|
7432
|
+
suffix: /* @__PURE__ */ jsxs(
|
|
7433
|
+
"span",
|
|
7434
|
+
{
|
|
7435
|
+
className: `canvas-react-select-actions${allowClear && interactive && value.length > 0 ? " canvas-react-select-actions-clearable" : ""}`,
|
|
7436
|
+
onPointerDown: (event) => {
|
|
7437
|
+
if (!interactive) return;
|
|
7438
|
+
event.preventDefault();
|
|
7439
|
+
event.stopPropagation();
|
|
7440
|
+
},
|
|
7441
|
+
onMouseDown: (event) => {
|
|
7442
|
+
if (!interactive) return;
|
|
7443
|
+
event.preventDefault();
|
|
7444
|
+
event.stopPropagation();
|
|
7445
|
+
},
|
|
7446
|
+
onClick: (event) => {
|
|
7447
|
+
if (!interactive) return;
|
|
7448
|
+
event.stopPropagation();
|
|
7449
|
+
inputRef.current?.focus({ preventScroll: true });
|
|
7450
|
+
show();
|
|
7451
|
+
},
|
|
7452
|
+
children: [
|
|
7453
|
+
allowClear && interactive && value.length > 0 ? /* @__PURE__ */ jsx(
|
|
7454
|
+
"button",
|
|
7455
|
+
{
|
|
7456
|
+
type: "button",
|
|
7457
|
+
className: "canvas-react-select-clear",
|
|
7458
|
+
tabIndex: -1,
|
|
7459
|
+
"aria-label": "\u6E05\u7A7A\u7EA7\u8054\u9009\u62E9",
|
|
7460
|
+
onPointerDown: (event) => {
|
|
7461
|
+
event.preventDefault();
|
|
7462
|
+
event.stopPropagation();
|
|
7463
|
+
},
|
|
7464
|
+
onMouseDown: (event) => {
|
|
7465
|
+
event.preventDefault();
|
|
7466
|
+
event.stopPropagation();
|
|
7467
|
+
},
|
|
7468
|
+
onClick: (event) => {
|
|
7469
|
+
event.preventDefault();
|
|
7470
|
+
event.stopPropagation();
|
|
7471
|
+
inputRef.current?.focus({ preventScroll: true });
|
|
7472
|
+
setKeyword("");
|
|
7473
|
+
setTyping(false);
|
|
7474
|
+
setPath([]);
|
|
7475
|
+
setFocus({ column: 0, index: -1 });
|
|
7476
|
+
setOpen(true);
|
|
7477
|
+
onChange?.([], [], { trigger: "clear", complete: false });
|
|
7478
|
+
},
|
|
7479
|
+
children: /* @__PURE__ */ jsx(
|
|
7480
|
+
"span",
|
|
7481
|
+
{
|
|
7482
|
+
className: "canvas-react-select-clear-icon",
|
|
7483
|
+
"aria-hidden": "true"
|
|
7484
|
+
}
|
|
7485
|
+
)
|
|
7486
|
+
}
|
|
7487
|
+
) : null,
|
|
7488
|
+
/* @__PURE__ */ jsx(
|
|
7489
|
+
"span",
|
|
7490
|
+
{
|
|
7491
|
+
className: `canvas-react-select-arrow${open && interactive ? " canvas-react-select-arrow-open" : ""}`,
|
|
7492
|
+
"aria-hidden": "true"
|
|
7493
|
+
}
|
|
7494
|
+
)
|
|
7495
|
+
]
|
|
7496
|
+
}
|
|
7497
|
+
)
|
|
7498
|
+
}
|
|
7499
|
+
),
|
|
7500
|
+
/* @__PURE__ */ jsx(
|
|
7501
|
+
ReactPopup,
|
|
7502
|
+
{
|
|
7503
|
+
constrainHeight: true,
|
|
7504
|
+
open: open && interactive,
|
|
7505
|
+
anchorRef,
|
|
7506
|
+
onOpenChange: setOpen,
|
|
7507
|
+
surfaceClassName: "canvas-react-cascader-popup",
|
|
7508
|
+
children: /* @__PURE__ */ jsx(
|
|
7509
|
+
"div",
|
|
7510
|
+
{
|
|
7511
|
+
ref: popupRef,
|
|
7512
|
+
id: popupId,
|
|
7513
|
+
className: "canvas-react-cascader-menus",
|
|
7514
|
+
children: (searching ? [results.map((result) => result[result.length - 1])] : columns).map((items, column) => /* @__PURE__ */ jsx(
|
|
7515
|
+
"div",
|
|
7516
|
+
{
|
|
7517
|
+
role: "listbox",
|
|
7518
|
+
"aria-label": searching ? "\u641C\u7D22\u7ED3\u679C" : `\u7B2C ${column + 1} \u7EA7\u9009\u9879`,
|
|
7519
|
+
className: "canvas-react-cascader-menu",
|
|
7520
|
+
children: items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "canvas-react-cascader-empty", children: "\u6682\u65E0\u6570\u636E" }) : items.map((item, index) => {
|
|
7521
|
+
const next = searching ? results[index] : [...path.slice(0, column), item];
|
|
7522
|
+
const active = focus.column === column && focus.index === index;
|
|
7523
|
+
return /* @__PURE__ */ jsxs(
|
|
7524
|
+
"div",
|
|
7525
|
+
{
|
|
7526
|
+
id: `${popupId}-${column}-${index}`,
|
|
7527
|
+
role: "option",
|
|
7528
|
+
"aria-selected": path[column] === item,
|
|
7529
|
+
"aria-disabled": !!item.disabled,
|
|
7530
|
+
"data-active": active,
|
|
7531
|
+
className: "canvas-react-cascader-option",
|
|
7532
|
+
onMouseDown: (event) => event.preventDefault(),
|
|
7533
|
+
onMouseEnter: () => {
|
|
7534
|
+
if (item.disabled) return;
|
|
7535
|
+
setFocus({ column, index });
|
|
7536
|
+
if (expandTrigger === "hover" && !searching && item.children?.length)
|
|
7537
|
+
setPath(next);
|
|
7538
|
+
},
|
|
7539
|
+
onClick: () => {
|
|
7540
|
+
setFocus({ column, index });
|
|
7541
|
+
choose(next, "mouse", searching);
|
|
7542
|
+
},
|
|
7543
|
+
children: [
|
|
7544
|
+
/* @__PURE__ */ jsx("span", { children: searching ? next.map((part) => part.label).join(" / ") : item.label }),
|
|
7545
|
+
!searching && item.children?.length ? /* @__PURE__ */ jsx(
|
|
7546
|
+
"span",
|
|
7547
|
+
{
|
|
7548
|
+
className: "canvas-react-cascader-chevron",
|
|
7549
|
+
"aria-hidden": "true"
|
|
7550
|
+
}
|
|
7551
|
+
) : null
|
|
7552
|
+
]
|
|
7553
|
+
},
|
|
7554
|
+
index
|
|
7555
|
+
);
|
|
7556
|
+
})
|
|
7557
|
+
},
|
|
7558
|
+
column
|
|
7559
|
+
))
|
|
7560
|
+
}
|
|
7561
|
+
)
|
|
7562
|
+
}
|
|
7563
|
+
)
|
|
7564
|
+
]
|
|
7565
|
+
}
|
|
7566
|
+
);
|
|
7567
|
+
}
|
|
7221
7568
|
var ReactAutoComplete = forwardRef(function ReactAutoComplete2(props, ref) {
|
|
7222
7569
|
const {
|
|
7223
7570
|
onChange,
|
|
@@ -8505,6 +8852,6 @@ var reactMessage = {
|
|
|
8505
8852
|
error: (content) => showMessage("error", content)
|
|
8506
8853
|
};
|
|
8507
8854
|
|
|
8508
|
-
export { REACT_COMPONENT_PREFIX, ReactAutoComplete, ReactButton, ReactCheckbox, ReactCol, ReactColorPicker, ReactContentScaleProvider, ReactDatePicker, ReactDateRangePicker, ReactDateTimePicker, ReactDateTimeRangePicker, ReactFilterPanel, ReactFlex, ReactForm, ReactImagePreview, ReactInput, ReactInputNumber, ReactInputRange, ReactModal, ReactMonthPicker, ReactNumberInput, ReactPagination, ReactPopconfirm, ReactPopup, ReactQuarterPicker, ReactRadio, ReactResizablePanels, ReactRow, ReactSelect, ReactTextArea, ReactTimePicker, ReactTimeRangePicker, ReactTooltip, ReactTransition, ReactVirtualList, ReactYearPicker, reactMessage, resolveResizablePanelSizes, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
|
|
8855
|
+
export { REACT_COMPONENT_PREFIX, ReactAutoComplete, ReactButton, ReactCascader, ReactCheckbox, ReactCol, ReactColorPicker, ReactContentScaleProvider, ReactDatePicker, ReactDateRangePicker, ReactDateTimePicker, ReactDateTimeRangePicker, ReactFilterPanel, ReactFlex, ReactForm, ReactImagePreview, ReactInput, ReactInputNumber, ReactInputRange, ReactModal, ReactMonthPicker, ReactNumberInput, ReactPagination, ReactPopconfirm, ReactPopup, ReactQuarterPicker, ReactRadio, ReactResizablePanels, ReactRow, ReactSelect, ReactTextArea, ReactTimePicker, ReactTimeRangePicker, ReactTooltip, ReactTransition, ReactVirtualList, ReactYearPicker, reactMessage, resolveResizablePanelSizes, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
|
|
8509
8856
|
//# sourceMappingURL=index.js.map
|
|
8510
8857
|
//# sourceMappingURL=index.js.map
|