@canlooks/can-ui 0.0.68 → 0.0.69
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/cjs/components/accordion/accordion.js +2 -2
- package/dist/cjs/components/alert/alert.js +4 -3
- package/dist/cjs/components/boundary/errorBoundary.js +2 -2
- package/dist/cjs/components/bubbleConfirm/bubbleConfirm.js +2 -2
- package/dist/cjs/components/calendar/panelYear.js +2 -2
- package/dist/cjs/components/cascade/cascade.js +3 -3
- package/dist/cjs/components/cascade/cascadePanel.js +2 -2
- package/dist/cjs/components/checkboxBase/checkboxBase.js +2 -2
- package/dist/cjs/components/counter/counter.js +3 -3
- package/dist/cjs/components/curd/curd.js +5 -5
- package/dist/cjs/components/curd/curd.style.js +5 -0
- package/dist/cjs/components/curd/curdColumnConfig.js +2 -2
- package/dist/cjs/components/curd/curdDialog.js +2 -2
- package/dist/cjs/components/curd/curdFilter.js +3 -3
- package/dist/cjs/components/curd/curdResizable.js +2 -2
- package/dist/cjs/components/dataGrid/dataGridHead.js +2 -2
- package/dist/cjs/components/dataGrid/dataGridRows.js +3 -3
- package/dist/cjs/components/dateTimePicker/dateTimePicker.js +3 -3
- package/dist/cjs/components/dialog/dialog.js +2 -2
- package/dist/cjs/components/drawer/drawer.js +2 -2
- package/dist/cjs/components/gallery/gallery.js +5 -5
- package/dist/cjs/components/image/image.d.ts +1 -1
- package/dist/cjs/components/image/image.js +5 -4
- package/dist/cjs/components/inputBase/inputBase.js +2 -2
- package/dist/cjs/components/menuItem/menuItem.js +2 -2
- package/dist/cjs/components/pagination/pager.js +3 -3
- package/dist/cjs/components/palette/palette.js +2 -2
- package/dist/cjs/components/pickerDialog/pickerDialog.js +2 -2
- package/dist/cjs/components/pinchable/pinchable.js +7 -0
- package/dist/cjs/components/progress/progress.js +3 -3
- package/dist/cjs/components/rating/rating.js +2 -2
- package/dist/cjs/components/select/select.js +3 -3
- package/dist/cjs/components/snackbarBase/snackbarBase.js +3 -3
- package/dist/cjs/components/stepper/step.js +5 -5
- package/dist/cjs/components/tabs/tabsEllipsis.js +2 -2
- package/dist/cjs/components/tag/tag.js +2 -2
- package/dist/cjs/components/transfer/transfer.js +3 -3
- package/dist/cjs/components/tree/tree.js +2 -2
- package/dist/cjs/components/tree/treeNode.js +2 -2
- package/dist/cjs/components/treeSelect/treeSelect.js +2 -2
- package/dist/cjs/components/typography/typography.js +4 -4
- package/dist/cjs/components/upload/dropArea.js +2 -2
- package/dist/cjs/components/upload/fileItem.js +5 -5
- package/dist/cjs/components/upload/imageItem.js +3 -3
- package/dist/cjs/components/upload/upload.js +3 -3
- package/dist/cjs/extensions/documentViewer/documentViewer.js +4 -3
- package/dist/cjs/extensions/documentViewer/documentViewer.style.js +2 -1
- package/dist/cjs/extensions/documentViewer/svgViewer.d.ts +2 -2
- package/dist/cjs/extensions/documentViewer/svgViewer.js +13 -9
- package/dist/esm/components/accordion/accordion.js +1 -1
- package/dist/esm/components/alert/alert.js +2 -1
- package/dist/esm/components/boundary/errorBoundary.js +1 -1
- package/dist/esm/components/bubbleConfirm/bubbleConfirm.js +1 -1
- package/dist/esm/components/calendar/panelYear.js +1 -1
- package/dist/esm/components/cascade/cascade.js +1 -1
- package/dist/esm/components/cascade/cascadePanel.js +1 -1
- package/dist/esm/components/checkboxBase/checkboxBase.js +1 -1
- package/dist/esm/components/counter/counter.js +1 -1
- package/dist/esm/components/curd/curd.js +1 -1
- package/dist/esm/components/curd/curd.style.js +5 -0
- package/dist/esm/components/curd/curdColumnConfig.js +1 -1
- package/dist/esm/components/curd/curdDialog.js +1 -1
- package/dist/esm/components/curd/curdFilter.js +1 -1
- package/dist/esm/components/curd/curdResizable.js +1 -1
- package/dist/esm/components/dataGrid/dataGridHead.js +1 -1
- package/dist/esm/components/dataGrid/dataGridRows.js +1 -1
- package/dist/esm/components/dateTimePicker/dateTimePicker.js +1 -1
- package/dist/esm/components/dialog/dialog.js +1 -1
- package/dist/esm/components/drawer/drawer.js +1 -1
- package/dist/esm/components/gallery/gallery.js +1 -1
- package/dist/esm/components/image/image.d.ts +1 -1
- package/dist/esm/components/image/image.js +3 -2
- package/dist/esm/components/inputBase/inputBase.js +1 -1
- package/dist/esm/components/menuItem/menuItem.js +1 -1
- package/dist/esm/components/pagination/pager.js +1 -1
- package/dist/esm/components/palette/palette.js +1 -1
- package/dist/esm/components/pickerDialog/pickerDialog.js +1 -1
- package/dist/esm/components/pinchable/pinchable.js +7 -0
- package/dist/esm/components/progress/progress.js +1 -1
- package/dist/esm/components/rating/rating.js +1 -1
- package/dist/esm/components/select/select.js +1 -1
- package/dist/esm/components/snackbarBase/snackbarBase.js +1 -1
- package/dist/esm/components/stepper/step.js +1 -1
- package/dist/esm/components/tabs/tabsEllipsis.js +1 -1
- package/dist/esm/components/tag/tag.js +1 -1
- package/dist/esm/components/transfer/transfer.js +1 -1
- package/dist/esm/components/tree/tree.js +1 -1
- package/dist/esm/components/tree/treeNode.js +1 -1
- package/dist/esm/components/treeSelect/treeSelect.js +1 -1
- package/dist/esm/components/typography/typography.js +1 -1
- package/dist/esm/components/upload/dropArea.js +1 -1
- package/dist/esm/components/upload/fileItem.js +1 -1
- package/dist/esm/components/upload/imageItem.js +1 -1
- package/dist/esm/components/upload/upload.js +1 -1
- package/dist/esm/extensions/documentViewer/documentViewer.js +2 -1
- package/dist/esm/extensions/documentViewer/documentViewer.style.js +2 -1
- package/dist/esm/extensions/documentViewer/svgViewer.d.ts +2 -2
- package/dist/esm/extensions/documentViewer/svgViewer.js +12 -8
- package/documentation/dist/assets/{index-GiFWv3kZ.js → index-DvrKS6Tv.js} +2978 -2957
- package/documentation/dist/index.html +1 -1
- package/package.json +1 -2
|
@@ -6,7 +6,7 @@ const accordion_style_1 = require("./accordion.style");
|
|
|
6
6
|
const utils_1 = require("../../utils");
|
|
7
7
|
const theme_1 = require("../theme");
|
|
8
8
|
const transitionBase_1 = require("../transitionBase");
|
|
9
|
-
const
|
|
9
|
+
const icon_1 = require("../icon");
|
|
10
10
|
const faCaretRight_1 = require("@fortawesome/free-solid-svg-icons/faCaretRight");
|
|
11
11
|
function Accordion({ size, title, prefix, suffix, expandIcon, defaultExpanded = false, expanded, onExpandedChange, readOnly, disabled, ...props }) {
|
|
12
12
|
const theme = (0, theme_1.useTheme)();
|
|
@@ -17,7 +17,7 @@ function Accordion({ size, title, prefix, suffix, expandIcon, defaultExpanded =
|
|
|
17
17
|
};
|
|
18
18
|
const renderExpandIcon = () => {
|
|
19
19
|
if (!expandIcon) {
|
|
20
|
-
return (0, jsx_runtime_1.jsx)(
|
|
20
|
+
return (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCaretRight_1.faCaretRight, className: accordion_style_1.classes.expandIcon });
|
|
21
21
|
}
|
|
22
22
|
if (typeof expandIcon === 'function') {
|
|
23
23
|
return expandIcon(innerExpanded.current);
|
|
@@ -8,12 +8,13 @@ const alert_style_1 = require("./alert.style");
|
|
|
8
8
|
const button_1 = require("../button");
|
|
9
9
|
const skeleton_1 = require("../skeleton");
|
|
10
10
|
const faXmark_1 = require("@fortawesome/free-solid-svg-icons/faXmark");
|
|
11
|
-
const
|
|
11
|
+
const icon_1 = require("../icon");
|
|
12
|
+
const status_1 = require("../status");
|
|
12
13
|
exports.Alert = (0, react_1.memo)(({ variant = 'standard', status = 'error', color = status, showIcon = true, icon, title, description, prefix, suffix, closable, onClose, loading, ...props }) => {
|
|
13
14
|
return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, alert_style_1.useStyle)({ color: color || 'error' }), className: (0, utils_1.clsx)(alert_style_1.classes.root, props.className), "data-variant": variant, children: [showIcon &&
|
|
14
15
|
(0, jsx_runtime_1.jsx)("div", { className: alert_style_1.classes.icon, children: loading
|
|
15
16
|
? (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { variant: "circular" })
|
|
16
|
-
: icon ?? (0, jsx_runtime_1.jsx)(
|
|
17
|
+
: icon ?? (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: status_1.statusMapToIconDefinition[status] }) }), !loading && !!prefix &&
|
|
17
18
|
(0, jsx_runtime_1.jsx)("div", { className: alert_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsxs)("div", { className: alert_style_1.classes.content, children: [!!(loading || title) &&
|
|
18
19
|
(0, jsx_runtime_1.jsx)("div", { className: alert_style_1.classes.title, children: loading
|
|
19
20
|
? (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { width: "40%" })
|
|
@@ -22,5 +23,5 @@ exports.Alert = (0, react_1.memo)(({ variant = 'standard', status = 'error', col
|
|
|
22
23
|
? (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, {})
|
|
23
24
|
: description })] }), !loading && !!suffix &&
|
|
24
25
|
(0, jsx_runtime_1.jsx)("div", { className: alert_style_1.classes.suffix, children: suffix }), closable &&
|
|
25
|
-
(0, jsx_runtime_1.jsx)(button_1.Button, { className: alert_style_1.classes.close, variant: "text", shape: "circular", color: variant === 'filled' ? '#fff' : 'text.secondary', onClick: onClose, disabled: loading, children: (0, jsx_runtime_1.jsx)(
|
|
26
|
+
(0, jsx_runtime_1.jsx)(button_1.Button, { className: alert_style_1.classes.close, variant: "text", shape: "circular", color: variant === 'filled' ? '#fff' : 'text.secondary', onClick: onClose, disabled: loading, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faXmark_1.faXmark }) })] }));
|
|
26
27
|
});
|
|
@@ -7,7 +7,7 @@ const utils_1 = require("../../utils");
|
|
|
7
7
|
const errorBoundary_style_1 = require("./errorBoundary.style");
|
|
8
8
|
const placeholder_1 = require("../placeholder");
|
|
9
9
|
const button_1 = require("../button");
|
|
10
|
-
const
|
|
10
|
+
const icon_1 = require("../icon");
|
|
11
11
|
const faRotateRight_1 = require("@fortawesome/free-solid-svg-icons/faRotateRight");
|
|
12
12
|
const placeholderSlots = {
|
|
13
13
|
description: 'pre'
|
|
@@ -25,5 +25,5 @@ exports.ErrorBoundary = (0, react_1.memo)(({ error, reload, reloadable, ...props
|
|
|
25
25
|
}
|
|
26
26
|
};
|
|
27
27
|
return ((0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, { status: "error", description: renderDescriptions(), slots: placeholderSlots, extra: reloadable &&
|
|
28
|
-
(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", color: "text.secondary", prefix: (0, jsx_runtime_1.jsx)(
|
|
28
|
+
(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", color: "text.secondary", prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faRotateRight_1.faRotateRight }), onClick: reload, children: "\u91CD\u65B0\u52A0\u8F7D" }), ...props, css: errorBoundary_style_1.style, className: (0, utils_1.clsx)(errorBoundary_style_1.classes.root, props.className) }));
|
|
29
29
|
});
|
|
@@ -7,9 +7,9 @@ const bubbleConfirm_style_1 = require("./bubbleConfirm.style");
|
|
|
7
7
|
const utils_1 = require("../../utils");
|
|
8
8
|
const button_1 = require("../button");
|
|
9
9
|
const theme_1 = require("../theme");
|
|
10
|
-
const
|
|
10
|
+
const icon_1 = require("../icon");
|
|
11
11
|
const faCircleQuestion_1 = require("@fortawesome/free-solid-svg-icons/faCircleQuestion");
|
|
12
|
-
function BubbleConfirm({ icon = (0, jsx_runtime_1.jsx)(
|
|
12
|
+
function BubbleConfirm({ icon = (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCircleQuestion_1.faCircleQuestion }), title, footer, showArrow = true, offset, loading = false, onConfirm, defaultOpen = false, open, onOpenChange, ...props }) {
|
|
13
13
|
const { spacing } = (0, theme_1.useTheme)();
|
|
14
14
|
offset ??= showArrow ? spacing[3] : spacing[2];
|
|
15
15
|
const [innerOpen, _setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
|
|
@@ -6,7 +6,7 @@ const react_1 = require("react");
|
|
|
6
6
|
const calendar_style_1 = require("./calendar.style");
|
|
7
7
|
const button_1 = require("../button");
|
|
8
8
|
const tooltip_1 = require("../tooltip");
|
|
9
|
-
const
|
|
9
|
+
const icon_1 = require("../icon");
|
|
10
10
|
const faAngleLeft_1 = require("@fortawesome/free-solid-svg-icons/faAngleLeft");
|
|
11
11
|
const faAngleRight_1 = require("@fortawesome/free-solid-svg-icons/faAngleRight");
|
|
12
12
|
exports.PanelYear = (0, react_1.memo)(({ innerD, setInnerD, onSelected, min, max }) => {
|
|
@@ -32,5 +32,5 @@ exports.PanelYear = (0, react_1.memo)(({ innerD, setInnerD, onSelected, min, max
|
|
|
32
32
|
}
|
|
33
33
|
return ret;
|
|
34
34
|
};
|
|
35
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: calendar_style_1.classes.head, children: [(0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.headSide, children: renderHeadControl((0, jsx_runtime_1.jsx)(
|
|
35
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: calendar_style_1.classes.head, children: [(0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.headSide, children: renderHeadControl((0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faAngleLeft_1.faAngleLeft }), '上一页', () => setPage(p => p - 1)) }), (0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.headSide, children: renderHeadControl((0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faAngleRight_1.faAngleRight }), '下一页', () => setPage(p => p + 1)) }), (0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.headCenter, children: "\u5E74\u4EFD" })] }), (0, jsx_runtime_1.jsx)("div", { className: calendar_style_1.classes.body, "data-view-type": "year", children: renderButtons() })] }));
|
|
36
36
|
});
|
|
@@ -13,7 +13,7 @@ const cascade_style_1 = require("./cascade.style");
|
|
|
13
13
|
const cascadePanel_1 = require("./cascadePanel");
|
|
14
14
|
const searchResult_1 = require("./searchResult");
|
|
15
15
|
const selectionContext_1 = require("../selectionContext");
|
|
16
|
-
const
|
|
16
|
+
const icon_1 = require("../icon");
|
|
17
17
|
const faMagnifyingGlass_1 = require("@fortawesome/free-solid-svg-icons/faMagnifyingGlass");
|
|
18
18
|
const faCaretDown_1 = require("@fortawesome/free-solid-svg-icons/faCaretDown");
|
|
19
19
|
const CascadeContext = (0, react_1.createContext)({});
|
|
@@ -196,7 +196,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
|
|
|
196
196
|
}
|
|
197
197
|
};
|
|
198
198
|
return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: cascade_style_1.cascadePopperStyle, open: innerOpen.current, placement: "bottomLeft", trigger: ['click', 'enter'], disabled: props.disabled, content: (0, jsx_runtime_1.jsxs)("div", { children: [searchable &&
|
|
199
|
-
(0, jsx_runtime_1.jsx)(input_1.Input, { prefix: (0, jsx_runtime_1.jsx)(
|
|
199
|
+
(0, jsx_runtime_1.jsx)(input_1.Input, { prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMagnifyingGlass_1.faMagnifyingGlass }), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, className: (0, utils_1.clsx)(cascade_style_1.classes.searchInput, searchInputProps?.className), onChange: e => {
|
|
200
200
|
searchInputProps?.onChange?.(e);
|
|
201
201
|
setInnerSearchValue(e.target.value);
|
|
202
202
|
} }), deferredSearchValue
|
|
@@ -209,5 +209,5 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
|
|
|
209
209
|
verticalIndex: verticalIndex.current, setVerticalIndex, horizontalIndex: horizontalIndex.current
|
|
210
210
|
}, children: (0, jsx_runtime_1.jsx)(cascadePanel_1.CascadePanel, { options: actualOptions }) }) })] }), ...popperProps, popperRef: popperRef, onOpenChange: openChangeHandler, onOpenChangeEnd: onOpenChangeEnd, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, css: cascade_style_1.style, className: (0, utils_1.clsx)(cascade_style_1.classes.root, props.className), onClear: clearHandler, clearable: clearable, value: pathifiedValue.current, "data-focused": innerOpen.current, loading: innerLoading.current, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsxs)("div", { className: cascade_style_1.classes.contentWrap, children: [!pathifiedValue.current?.length
|
|
211
211
|
? (0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.placeholder, children: props.placeholder })
|
|
212
|
-
: (0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.backfill, children: renderBackfillFn() }), (0, jsx_runtime_1.jsx)("input", { ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputProps?.ref), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.arrow, "data-open": innerOpen.current, children: (0, jsx_runtime_1.jsx)(
|
|
212
|
+
: (0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.backfill, children: renderBackfillFn() }), (0, jsx_runtime_1.jsx)("input", { ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputProps?.ref), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.arrow, "data-open": innerOpen.current, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCaretDown_1.faCaretDown }) })] }) }) }));
|
|
213
213
|
});
|
|
@@ -10,7 +10,7 @@ const cascade_style_1 = require("./cascade.style");
|
|
|
10
10
|
const transitionBase_1 = require("../transitionBase");
|
|
11
11
|
const cascade_1 = require("./cascade");
|
|
12
12
|
const utils_1 = require("../../utils");
|
|
13
|
-
const
|
|
13
|
+
const icon_1 = require("../icon");
|
|
14
14
|
const faChevronRight_1 = require("@fortawesome/free-solid-svg-icons/faChevronRight");
|
|
15
15
|
function CascadePanel({ options, index = 0 }) {
|
|
16
16
|
const { innerLoading, loadingOption, multiple, showCheckbox, primaryKey, labelKey, childrenKey, pathifiedValue, selectionStatus, optionsMap, openedPanels, onOptionClick, onCheckboxClick, verticalIndex, setVerticalIndex, horizontalIndex } = (0, cascade_1.useCascadeContext)();
|
|
@@ -52,7 +52,7 @@ function CascadePanel({ options, index = 0 }) {
|
|
|
52
52
|
}
|
|
53
53
|
}, selected: isSelected(optVal) || (opened && hasChildren), focused: horizontalIndex === index && verticalIndex === i, label: opt[labelKey], onClick: () => onOptionClick(opt, index), onPointerEnter: onPointerEnter, suffix: innerLoading && loadingOption === optVal
|
|
54
54
|
? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {})
|
|
55
|
-
: hasChildren && (0, jsx_runtime_1.jsx)(
|
|
55
|
+
: hasChildren && (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faChevronRight_1.faChevronRight }), children: null }, optVal));
|
|
56
56
|
});
|
|
57
57
|
};
|
|
58
58
|
const nextOptions = optionsMap.get(openedPanels[index])?.[childrenKey];
|
|
@@ -6,7 +6,7 @@ const react_1 = require("react");
|
|
|
6
6
|
const utils_1 = require("../../utils");
|
|
7
7
|
const checkboxBase_style_1 = require("./checkboxBase.style");
|
|
8
8
|
const checkboxBaseGroup_1 = require("../checkboxBaseGroup");
|
|
9
|
-
const
|
|
9
|
+
const icon_1 = require("../icon");
|
|
10
10
|
const faCheck_1 = require("@fortawesome/free-solid-svg-icons/faCheck");
|
|
11
11
|
exports.CheckboxBase = (0, react_1.memo)(({ inputProps, _type, size, color, label, value, indeterminate, disabled, readOnly, defaultChecked = false, checked, onChange, ...props }) => {
|
|
12
12
|
const context = (0, checkboxBaseGroup_1.useCheckboxBaseGroupContext)();
|
|
@@ -39,7 +39,7 @@ exports.CheckboxBase = (0, react_1.memo)(({ inputProps, _type, size, color, labe
|
|
|
39
39
|
? (0, jsx_runtime_1.jsx)("div", { ref: checkboxRef, className: checkboxBase_style_1.classes.checkbox, children: indeterminate
|
|
40
40
|
? (0, jsx_runtime_1.jsx)("div", { className: checkboxBase_style_1.classes.indeterminate })
|
|
41
41
|
: innerChecked.current
|
|
42
|
-
? (0, jsx_runtime_1.jsx)(
|
|
42
|
+
? (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCheck_1.faCheck, className: checkboxBase_style_1.classes.icon })
|
|
43
43
|
: null })
|
|
44
44
|
: (0, jsx_runtime_1.jsx)("div", { ref: checkboxRef, className: `${checkboxBase_style_1.classes.checkbox} ${checkboxBase_style_1.classes.radio}`, children: innerChecked.current
|
|
45
45
|
? (0, jsx_runtime_1.jsx)("div", { className: checkboxBase_style_1.classes.radioChecked })
|
|
@@ -8,7 +8,7 @@ const utils_1 = require("../../utils");
|
|
|
8
8
|
const button_1 = require("../button");
|
|
9
9
|
const input_1 = require("../input");
|
|
10
10
|
const flex_1 = require("../flex");
|
|
11
|
-
const
|
|
11
|
+
const icon_1 = require("../icon");
|
|
12
12
|
const faMinus_1 = require("@fortawesome/free-solid-svg-icons/faMinus");
|
|
13
13
|
const faPlus_1 = require("@fortawesome/free-solid-svg-icons/faPlus");
|
|
14
14
|
exports.Counter = (0, react_1.memo)(({ size, min = -Infinity, max = Infinity, step = 1, precision = 0, defaultValue = 0, value, onChange, decreaseProps, increaseProps, inputProps, ...props }) => {
|
|
@@ -24,11 +24,11 @@ exports.Counter = (0, react_1.memo)(({ size, min = -Infinity, max = Infinity, st
|
|
|
24
24
|
return ((0, jsx_runtime_1.jsxs)(flex_1.Flex, { compact: true, ...props, css: counter_style_1.style, className: (0, utils_1.clsx)(counter_style_1.classes.root, props.className), children: [(0, jsx_runtime_1.jsx)(button_1.Button, { disabled: innerValue.current <= min, ...commonButtonProps, ...decreaseProps, onClick: e => {
|
|
25
25
|
decreaseProps?.onClick?.(e);
|
|
26
26
|
clickHandler(-1);
|
|
27
|
-
}, children: (0, jsx_runtime_1.jsx)(
|
|
27
|
+
}, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMinus_1.faMinus }) }), (0, jsx_runtime_1.jsx)(input_1.Input, { type: "number", widthAdaptable: true, size: size, min: min, max: max, step: step, precision: precision, ...inputProps, className: (0, utils_1.clsx)(counter_style_1.classes.input, inputProps?.className), value: innerValue.current, onChange: e => {
|
|
28
28
|
inputProps?.onChange?.(e);
|
|
29
29
|
setInnerValue(+e.target.value);
|
|
30
30
|
} }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: innerValue.current >= max, ...commonButtonProps, ...increaseProps, onClick: e => {
|
|
31
31
|
increaseProps?.onClick?.(e);
|
|
32
32
|
clickHandler(1);
|
|
33
|
-
}, children: (0, jsx_runtime_1.jsx)(
|
|
33
|
+
}, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faPlus_1.faPlus }) })] }));
|
|
34
34
|
});
|
|
@@ -17,7 +17,7 @@ const curdDialog_1 = require("./curdDialog");
|
|
|
17
17
|
const app_1 = require("../app");
|
|
18
18
|
const bubbleConfirm_1 = require("../bubbleConfirm");
|
|
19
19
|
const selectionContext_1 = require("../selectionContext");
|
|
20
|
-
const
|
|
20
|
+
const icon_1 = require("../icon");
|
|
21
21
|
const faTrashCan_1 = require("@fortawesome/free-regular-svg-icons/faTrashCan");
|
|
22
22
|
const faPenToSquare_1 = require("@fortawesome/free-regular-svg-icons/faPenToSquare");
|
|
23
23
|
const faPlus_1 = require("@fortawesome/free-solid-svg-icons/faPlus");
|
|
@@ -78,11 +78,11 @@ exports.Curd = (0, react_1.memo)((props) => {
|
|
|
78
78
|
const _updateProps = _updatable ? (typeof updateButtonProps === 'function' ? updateButtonProps(row) : updateButtonProps) : void 0;
|
|
79
79
|
const _deleteProps = _deletable ? (typeof deleteButtonProps === 'function' ? deleteButtonProps(row) : deleteButtonProps) : void 0;
|
|
80
80
|
return ((0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.control, children: [renderExtraControl?.(row), _updatable &&
|
|
81
|
-
(0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(
|
|
81
|
+
(0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faPenToSquare_1.faPenToSquare }), variant: "plain", ..._updateProps, onClick: e => {
|
|
82
82
|
_updateProps?.onClick?.(e);
|
|
83
83
|
updateHandler(row);
|
|
84
84
|
}, children: "\u7F16\u8F91" }), _deletable &&
|
|
85
|
-
(0, jsx_runtime_1.jsx)(bubbleConfirm_1.BubbleConfirm, { title: `删除${dataName}`, content: `删除后不可恢复,确定要删除该${dataName || '数据'}吗?`, ...deleteConfirmProps, onConfirm: e => deleteHandler(row, e), children: (0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(
|
|
85
|
+
(0, jsx_runtime_1.jsx)(bubbleConfirm_1.BubbleConfirm, { title: `删除${dataName}`, content: `删除后不可恢复,确定要删除该${dataName || '数据'}吗?`, ...deleteConfirmProps, onConfirm: e => deleteHandler(row, e), children: (0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faTrashCan_1.faTrashCan }), variant: "plain", color: "error", ..._deleteProps, children: "\u5220\u9664" }) })] }));
|
|
86
86
|
}
|
|
87
87
|
};
|
|
88
88
|
return [...columns || [], controlColumn];
|
|
@@ -190,9 +190,9 @@ exports.Curd = (0, react_1.memo)((props) => {
|
|
|
190
190
|
};
|
|
191
191
|
return ((0, jsx_runtime_1.jsxs)("div", { ...wrapperProps, ref: wrapperRef, css: curd_style_1.style, className: (0, utils_1.clsx)(curd_style_1.classes.root, wrapperProps?.className), "data-variant": variant, children: [renderFilterFn(), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
|
|
192
192
|
(0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbar, children: [(0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbarLeft, children: [creatable &&
|
|
193
|
-
(0, jsx_runtime_1.jsxs)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(
|
|
193
|
+
(0, jsx_runtime_1.jsxs)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faPlus_1.faPlus }), ...createButtonProps, onClick: createHandler, children: [createName, dataName] }), toolbarLeft] }), (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.toolbarRight, children: [!!toolbarRight &&
|
|
194
194
|
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [toolbarRight, (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: curd_style_1.classes.divider, orientation: "vertical" })] }), reloadable &&
|
|
195
|
-
(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u5237\u65B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", prefix: (0, jsx_runtime_1.jsx)(
|
|
195
|
+
(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u5237\u65B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faRotateRight_1.faRotateRight }), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
|
|
196
196
|
(0, jsx_runtime_1.jsx)(curdResizable_1.CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
|
|
197
197
|
(0, jsx_runtime_1.jsx)(curdColumnConfig_1.CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), (0, jsx_runtime_1.jsx)("div", { className: curd_style_1.classes.card, children: (0, jsx_runtime_1.jsx)(dataGrid_1.DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
|
|
198
198
|
...props.tableProps,
|
|
@@ -4,6 +4,7 @@ exports.dialogStyle = exports.style = exports.classes = void 0;
|
|
|
4
4
|
const react_1 = require("@emotion/react");
|
|
5
5
|
const utils_1 = require("../../utils");
|
|
6
6
|
const button_style_1 = require("../button/button.style");
|
|
7
|
+
const loading_style_1 = require("../loading/loading.style");
|
|
7
8
|
exports.classes = (0, utils_1.defineInnerClasses)('curd', [
|
|
8
9
|
'filter',
|
|
9
10
|
'filterGridContainer',
|
|
@@ -76,6 +77,10 @@ exports.style = (0, utils_1.defineCss)(({ spacing, text, background, borderRadiu
|
|
|
76
77
|
.${exports.classes.card} {
|
|
77
78
|
min-height: 0;
|
|
78
79
|
border-radius: ${borderRadius}px;
|
|
80
|
+
|
|
81
|
+
.${loading_style_1.classes.container} {
|
|
82
|
+
height: 100%;
|
|
83
|
+
}
|
|
79
84
|
}
|
|
80
85
|
|
|
81
86
|
&[data-variant=standard] {
|
|
@@ -12,7 +12,7 @@ const sortableItem_1 = require("../sortableItem");
|
|
|
12
12
|
const core_1 = require("@dnd-kit/core");
|
|
13
13
|
const sortable_1 = require("@dnd-kit/sortable");
|
|
14
14
|
const utils_1 = require("../../utils");
|
|
15
|
-
const
|
|
15
|
+
const icon_1 = require("../icon");
|
|
16
16
|
const faGear_1 = require("@fortawesome/free-solid-svg-icons/faGear");
|
|
17
17
|
exports.CurdColumnConfig = (0, react_1.memo)(({ columns, innerVisible, setInnerVisible, setInnerOrder, }) => {
|
|
18
18
|
columns ||= [];
|
|
@@ -28,5 +28,5 @@ exports.CurdColumnConfig = (0, react_1.memo)(({ columns, innerVisible, setInnerV
|
|
|
28
28
|
? [...o, key]
|
|
29
29
|
: o.filter(k => k !== key));
|
|
30
30
|
};
|
|
31
|
-
return ((0, jsx_runtime_1.jsx)(bubble_1.Bubble, { css: curdColumnConfig_style_1.style, placement: "bottomRight", content: (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: columns?.map((col, i) => col._key ?? i), children: (0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.content, children: [(0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.title, children: "\u5217\u8BBE\u7F6E" }), columns?.map((col, i) => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { id: col._key ?? i, component: menuItem_1.MenuItem, className: curdColumnConfig_style_1.classes.item, prefix: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: curdColumnConfig_style_1.classes.checkbox, checked: !(0, utils_1.isUnset)(col._key) && visibleSet.has(col._key), onChange: e => !(0, utils_1.isUnset)(col._key) && toggleVisible(col._key, e.target.checked) }), label: col.title }, col._key ?? i))] }) }) }), autoClose: false, children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", children: (0, jsx_runtime_1.jsx)(
|
|
31
|
+
return ((0, jsx_runtime_1.jsx)(bubble_1.Bubble, { css: curdColumnConfig_style_1.style, placement: "bottomRight", content: (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: columns?.map((col, i) => col._key ?? i), children: (0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.content, children: [(0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.title, children: "\u5217\u8BBE\u7F6E" }), columns?.map((col, i) => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { id: col._key ?? i, component: menuItem_1.MenuItem, className: curdColumnConfig_style_1.classes.item, prefix: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: curdColumnConfig_style_1.classes.checkbox, checked: !(0, utils_1.isUnset)(col._key) && visibleSet.has(col._key), onChange: e => !(0, utils_1.isUnset)(col._key) && toggleVisible(col._key, e.target.checked) }), label: col.title }, col._key ?? i))] }) }) }), autoClose: false, children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faGear_1.faGear }) }) }));
|
|
32
32
|
});
|
|
@@ -12,7 +12,7 @@ const loading_1 = require("../loading");
|
|
|
12
12
|
const button_1 = require("../button");
|
|
13
13
|
const curd_style_1 = require("./curd.style");
|
|
14
14
|
const pickerDialog_1 = require("../pickerDialog");
|
|
15
|
-
const
|
|
15
|
+
const icon_1 = require("../icon");
|
|
16
16
|
const faCopy_1 = require("@fortawesome/free-regular-svg-icons/faCopy");
|
|
17
17
|
exports.CurdDialog = (0, react_2.memo)(({ ref, onFinish, curdProps, ...props }) => {
|
|
18
18
|
const { columns, rowToForm, copyable, titleKey, formProps, formRef, dataName = '', createName = '添加', updateName = '编辑' } = curdProps;
|
|
@@ -131,6 +131,6 @@ exports.CurdDialog = (0, react_2.memo)(({ ref, onFinish, curdProps, ...props })
|
|
|
131
131
|
return ((0, jsx_runtime_1.jsxs)(dialog_1.Dialog, { css: curd_style_1.dialogStyle, width: 600, title: activeRow
|
|
132
132
|
? `${updateName}${dataName}${rowTitle ? ' - ' + rowTitle : ''}`
|
|
133
133
|
: (0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.dialogTitle, children: [(0, jsx_runtime_1.jsxs)("span", { children: [createName, dataName] }), copyable &&
|
|
134
|
-
(0, jsx_runtime_1.jsxs)(button_1.Button, { variant: "plain", prefix: (0, jsx_runtime_1.jsx)(
|
|
134
|
+
(0, jsx_runtime_1.jsxs)(button_1.Button, { variant: "plain", prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCopy_1.faCopy }), onClick: onCopyButtonClick, children: ["\u4ECE\u5DF2\u6709", dataName || '数据', "\u590D\u5236"] })] }), ...props, open: innerOpen.current, onClose: closeHandler, onConfirm: confirmHandler, confirmLoading: innerLoading.current, children: [(0, jsx_runtime_1.jsx)(loading_1.Loading, { open: transforming.current, children: (0, jsx_runtime_1.jsx)(form_1.Form, { labelWidth: "20%", ...formProps, ref: (0, utils_1.cloneRef)(formRef, innerFormRef), onFinish: finishHandler, children: renderedFormItems }) }), copyable &&
|
|
135
135
|
(0, jsx_runtime_1.jsx)(pickerDialog_1.PickerDialog, { ref: pickerDialogRef, multiple: selectMode === 'multiple', onToggle: toggleHandler, children: (0, jsx_runtime_1.jsx)(curd_1.Curd, { ...curdProps, variant: "embeded", copyable: false, creatable: false, updatable: false, deletable: false }) })] }));
|
|
136
136
|
});
|
|
@@ -11,7 +11,7 @@ const grid_1 = require("../grid");
|
|
|
11
11
|
const button_1 = require("../button");
|
|
12
12
|
const transitionBase_1 = require("../transitionBase");
|
|
13
13
|
const theme_1 = require("../theme");
|
|
14
|
-
const
|
|
14
|
+
const icon_1 = require("../icon");
|
|
15
15
|
const faChevronDown_1 = require("@fortawesome/free-solid-svg-icons/faChevronDown");
|
|
16
16
|
const faFilter_1 = require("@fortawesome/free-solid-svg-icons/faFilter");
|
|
17
17
|
exports.CurdFilter = (0, react_2.memo)(({ ref, columns, expandable, showButton, renderConditions, buttonProps, onFilter, ...props }) => {
|
|
@@ -56,7 +56,7 @@ exports.CurdFilter = (0, react_2.memo)(({ ref, columns, expandable, showButton,
|
|
|
56
56
|
? (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { className: curd_style_1.classes.filterGridContainer, in: expanded, collapsedSize: () => firstItemRef.current?.offsetHeight || 56, appear: false, children: renderedGrid })
|
|
57
57
|
: renderedGrid, (expandable || showButton) &&
|
|
58
58
|
(0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.filterControl, children: [expandable &&
|
|
59
|
-
(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", suffix: (0, jsx_runtime_1.jsx)(
|
|
60
|
-
(0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(
|
|
59
|
+
(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", suffix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faChevronDown_1.faChevronDown, style: { rotate: expanded ? '180deg' : void 0 } }), onClick: () => setExpanded(o => !o), children: expanded ? '收起' : '展开' }), showButton &&
|
|
60
|
+
(0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faFilter_1.faFilter }), variant: "outlined", ...buttonProps, onClick: clickHandler, children: buttonProps?.children ?? '筛选' })] })] }) }), !!renderConditions &&
|
|
61
61
|
(0, jsx_runtime_1.jsxs)("div", { className: curd_style_1.classes.filtered, children: [(0, jsx_runtime_1.jsx)("div", { className: curd_style_1.classes.filteredTitle, children: "\u5DF2\u7B5B\u9009\uFF1A" }), renderConditions(filteredConditions, formRef.current)] })] }));
|
|
62
62
|
});
|
|
@@ -7,8 +7,8 @@ const tooltip_1 = require("../tooltip");
|
|
|
7
7
|
const bubble_1 = require("../bubble");
|
|
8
8
|
const menuItem_1 = require("../menuItem");
|
|
9
9
|
const button_1 = require("../button");
|
|
10
|
-
const
|
|
10
|
+
const icon_1 = require("../icon");
|
|
11
11
|
const faArrowsUpDown_1 = require("@fortawesome/free-solid-svg-icons/faArrowsUpDown");
|
|
12
12
|
exports.CurdResizable = (0, react_1.memo)(({ innerSize, setInnerSize }) => {
|
|
13
|
-
return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u8868\u683C\u5C3A\u5BF8", children: (0, jsx_runtime_1.jsx)(bubble_1.Bubble, { placement: "bottom", content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "small", label: "\u5C0F", selected: innerSize === 'small', onClick: () => setInnerSize('small') }), (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "medium", label: "\u4E2D", selected: innerSize === 'medium', onClick: () => setInnerSize('medium') }), (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "large", label: "\u5927", selected: innerSize === 'large', onClick: () => setInnerSize('large') })] }), children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", children: (0, jsx_runtime_1.jsx)(
|
|
13
|
+
return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u8868\u683C\u5C3A\u5BF8", children: (0, jsx_runtime_1.jsx)(bubble_1.Bubble, { placement: "bottom", content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "small", label: "\u5C0F", selected: innerSize === 'small', onClick: () => setInnerSize('small') }), (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "medium", label: "\u4E2D", selected: innerSize === 'medium', onClick: () => setInnerSize('medium') }), (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: "large", label: "\u5927", selected: innerSize === 'large', onClick: () => setInnerSize('large') })] }), children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faArrowsUpDown_1.faArrowsUpDown }) }) }) }));
|
|
14
14
|
});
|
|
@@ -9,7 +9,7 @@ const dataGrid_1 = require("./dataGrid");
|
|
|
9
9
|
const columnResize_1 = require("./columnResize");
|
|
10
10
|
const checkbox_1 = require("../checkbox");
|
|
11
11
|
const utils_1 = require("../../utils");
|
|
12
|
-
const
|
|
12
|
+
const icon_1 = require("../icon");
|
|
13
13
|
const selectionContext_1 = require("../selectionContext");
|
|
14
14
|
const tooltip_1 = require("../tooltip");
|
|
15
15
|
const faCaretDown_1 = require("@fortawesome/free-solid-svg-icons/faCaretDown");
|
|
@@ -84,7 +84,7 @@ exports.DataGridHead = (0, react_2.memo)(({ flattedColumns, completedColumns, ro
|
|
|
84
84
|
onOrderChange?.(_key, currentOrderType === 'descend' ? 'ascend' : 'descend');
|
|
85
85
|
}
|
|
86
86
|
} }, sorter
|
|
87
|
-
? (0, jsx_runtime_1.jsxs)("div", { className: dataGrid_style_1.classes.sorter, children: [(0, jsx_runtime_1.jsx)("div", { className: dataGrid_style_1.classes.title, children: title }), (0, jsx_runtime_1.jsx)(
|
|
87
|
+
? (0, jsx_runtime_1.jsxs)("div", { className: dataGrid_style_1.classes.sorter, children: [(0, jsx_runtime_1.jsx)("div", { className: dataGrid_style_1.classes.title, children: title }), (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCaretDown_1.faCaretDown, className: dataGrid_style_1.classes.icon })] })
|
|
88
88
|
: title));
|
|
89
89
|
return [
|
|
90
90
|
sortable
|
|
@@ -12,7 +12,7 @@ const radio_1 = require("../radio");
|
|
|
12
12
|
const table_1 = require("../table");
|
|
13
13
|
const button_1 = require("../button");
|
|
14
14
|
const transitionBase_1 = require("../transitionBase");
|
|
15
|
-
const
|
|
15
|
+
const icon_1 = require("../icon");
|
|
16
16
|
const faMinusSquare_1 = require("@fortawesome/free-regular-svg-icons/faMinusSquare");
|
|
17
17
|
const faPlusSquare_1 = require("@fortawesome/free-regular-svg-icons/faPlusSquare");
|
|
18
18
|
const dataGrid_style_1 = require("./dataGrid.style");
|
|
@@ -61,8 +61,8 @@ exports.DataGridRows = (0, react_2.memo)(({ rows, _level = 0 }) => {
|
|
|
61
61
|
? (0, jsx_runtime_1.jsxs)("div", { className: dataGrid_style_1.classes.expandableWrap, style: { paddingLeft: _level * indent }, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", shape: "circular", color: "text.disabled", onClick: () => toggleExpanded(trKey), style: expandable ? void 0 : { visibility: 'hidden' }, children: renderExpandIcon
|
|
62
62
|
? renderExpandIcon(trKey, currentExpanded, [...expandedSet])
|
|
63
63
|
: currentExpanded
|
|
64
|
-
? (0, jsx_runtime_1.jsx)(
|
|
65
|
-
: (0, jsx_runtime_1.jsx)(
|
|
64
|
+
? (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMinusSquare_1.faMinusSquare })
|
|
65
|
+
: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faPlusSquare_1.faPlusSquare }) }), renderedContent] })
|
|
66
66
|
: renderedContent));
|
|
67
67
|
}))
|
|
68
68
|
];
|
|
@@ -13,7 +13,7 @@ const dayjs_1 = tslib_1.__importDefault(require("dayjs"));
|
|
|
13
13
|
const customParseFormat_1 = tslib_1.__importDefault(require("dayjs/plugin/customParseFormat"));
|
|
14
14
|
const calendar_1 = require("../calendar");
|
|
15
15
|
const timer_1 = require("./timer");
|
|
16
|
-
const
|
|
16
|
+
const icon_1 = require("../icon");
|
|
17
17
|
const faCalendar_1 = require("@fortawesome/free-regular-svg-icons/faCalendar");
|
|
18
18
|
const faClock_1 = require("@fortawesome/free-regular-svg-icons/faClock");
|
|
19
19
|
dayjs_1.default.extend(customParseFormat_1.default);
|
|
@@ -222,6 +222,6 @@ exports.DateTimePicker = (0, react_1.memo)(({ inputProps, popperProps, min, max,
|
|
|
222
222
|
popperProps?.onPointerDown?.(e);
|
|
223
223
|
e.preventDefault();
|
|
224
224
|
}, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, css: dateTimePicker_style_1.style, className: (0, utils_1.clsx)(dateTimePicker_style_1.classes.root, props.className), "data-focused": innerOpen.current, value: dateValue.current, onClear: clearHandler, onSelect: selectHandler, onFocus: focusHandler, onBlur: blurHandler, onKeyDown: keydownHandler, children: ({ ref, value, onChange, ...rest }) => (0, jsx_runtime_1.jsxs)("div", { className: dateTimePicker_style_1.classes.container, children: [(0, jsx_runtime_1.jsx)("input", { ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputProps?.ref, innerInputRef), className: (0, utils_1.clsx)(dateTimePicker_style_1.classes.input, inputProps?.className) }), (0, jsx_runtime_1.jsx)("div", { className: dateTimePicker_style_1.classes.dateTimeIcon, children: showTimer && !showCalendar
|
|
225
|
-
? (0, jsx_runtime_1.jsx)(
|
|
226
|
-
: (0, jsx_runtime_1.jsx)(
|
|
225
|
+
? (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faClock_1.faClock })
|
|
226
|
+
: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCalendar_1.faCalendar }) })] }) }) }));
|
|
227
227
|
});
|
|
@@ -8,7 +8,7 @@ const dialog_style_1 = require("./dialog.style");
|
|
|
8
8
|
const utils_1 = require("../../utils");
|
|
9
9
|
const button_1 = require("../button");
|
|
10
10
|
const draggable_1 = require("../draggable");
|
|
11
|
-
const
|
|
11
|
+
const icon_1 = require("../icon");
|
|
12
12
|
const faXmark_1 = require("@fortawesome/free-solid-svg-icons/faXmark");
|
|
13
13
|
function Dialog({ ref, icon, title, footer, prefix, suffix, width = 420, minWidth, maxWidth = '100%', showClose = true, closeProps, showConfirm = true, confirmText = '确 定', confirmProps, onConfirm, confirmLoading = false, showCancel = true, cancelText = '取 消', cancelProps, onCancel, draggable = true, maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, ...props }) {
|
|
14
14
|
const [innerOpen, _setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open);
|
|
@@ -84,7 +84,7 @@ function Dialog({ ref, icon, title, footer, prefix, suffix, width = 420, minWidt
|
|
|
84
84
|
return ((0, jsx_runtime_1.jsx)(modal_1.Modal, { ...props, ref: (0, utils_1.cloneRef)(ref, overlayRef), css: dialog_style_1.style, className: (0, utils_1.clsx)(dialog_style_1.classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-draggable": draggable, children: (0, jsx_runtime_1.jsx)(draggable_1.Draggable, { container: () => overlayRef.current, children: (targetProps, handleProps) => (0, jsx_runtime_1.jsxs)("div", { className: dialog_style_1.classes.card, ...targetProps, style: { width, minWidth, maxWidth, ...targetProps.style }, children: [!!icon &&
|
|
85
85
|
(0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.icon, children: icon }), (0, jsx_runtime_1.jsxs)("div", { className: dialog_style_1.classes.content, children: [!!(title || showClose) &&
|
|
86
86
|
(0, jsx_runtime_1.jsxs)("div", { className: dialog_style_1.classes.titleRow, ...handleProps, children: [(0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.title, children: title }), showClose &&
|
|
87
|
-
(0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", ...closeProps, className: (0, utils_1.clsx)(dialog_style_1.classes.close, closeProps?.className), onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(
|
|
87
|
+
(0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", ...closeProps, className: (0, utils_1.clsx)(dialog_style_1.classes.close, closeProps?.className), onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faXmark_1.faXmark }) })] }), (0, jsx_runtime_1.jsxs)("div", { ref: bodyRef, className: dialog_style_1.classes.body, onScroll: onScroll, children: [!!prefix &&
|
|
88
88
|
(0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { ref: bodyWrapRef, className: dialog_style_1.classes.bodyWrap, children: props.children }), !!suffix &&
|
|
89
89
|
(0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.suffix, children: suffix })] }), (typeof footer === 'undefined' || !!footer) &&
|
|
90
90
|
(0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.footer, children: renderFooter() })] })] }) }) }));
|
|
@@ -8,7 +8,7 @@ const utils_1 = require("../../utils");
|
|
|
8
8
|
const overlayBase_1 = require("../overlayBase");
|
|
9
9
|
const button_1 = require("../button");
|
|
10
10
|
const transitionBase_1 = require("../transitionBase");
|
|
11
|
-
const
|
|
11
|
+
const icon_1 = require("../icon");
|
|
12
12
|
const faAnglesRight_1 = require("@fortawesome/free-solid-svg-icons/faAnglesRight");
|
|
13
13
|
const placementToDirection = {
|
|
14
14
|
left: 'right',
|
|
@@ -51,7 +51,7 @@ function Drawer({ title, footer, showClose = true, size = { xs: '100%', sm: '75%
|
|
|
51
51
|
}, [innerOpen.current]);
|
|
52
52
|
return ((0, jsx_runtime_1.jsx)(overlayBase_1.OverlayBase, { ...props, css: (0, drawer_style_1.useStyle)({ size: typeof size === 'object' ? size : { xs: size } }), className: (0, utils_1.clsx)(drawer_style_1.classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-placement": placement, children: (0, jsx_runtime_1.jsx)(transitionBase_1.Slide, { direction: placementToDirection[placement], ...slideProps, in: innerOpen.current, className: (0, utils_1.clsx)(drawer_style_1.classes.drawer, slideProps?.className), children: (0, jsx_runtime_1.jsxs)("div", { className: drawer_style_1.classes.drawerWrap, children: [!!(title || showClose) &&
|
|
53
53
|
(0, jsx_runtime_1.jsxs)("div", { className: drawer_style_1.classes.titleRow, children: [(0, jsx_runtime_1.jsx)("div", { className: drawer_style_1.classes.title, children: title }), showClose &&
|
|
54
|
-
(0, jsx_runtime_1.jsx)(button_1.Button, { className: drawer_style_1.classes.close, shape: "circular", variant: "text", color: "text.secondary", onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(
|
|
54
|
+
(0, jsx_runtime_1.jsx)(button_1.Button, { className: drawer_style_1.classes.close, shape: "circular", variant: "text", color: "text.secondary", onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faAnglesRight_1.faAnglesRight, style: {
|
|
55
55
|
rotate: {
|
|
56
56
|
left: '180deg',
|
|
57
57
|
right: '0',
|
|
@@ -8,7 +8,7 @@ const utils_1 = require("../../utils");
|
|
|
8
8
|
const gallery_style_1 = require("./gallery.style");
|
|
9
9
|
const button_1 = require("../button");
|
|
10
10
|
const tooltip_1 = require("../tooltip");
|
|
11
|
-
const
|
|
11
|
+
const icon_1 = require("../icon");
|
|
12
12
|
const faXmark_1 = require("@fortawesome/free-solid-svg-icons/faXmark");
|
|
13
13
|
const faExpand_1 = require("@fortawesome/free-solid-svg-icons/faExpand");
|
|
14
14
|
const faAngleLeft_1 = require("@fortawesome/free-solid-svg-icons/faAngleLeft");
|
|
@@ -154,10 +154,10 @@ exports.Gallery = (0, react_1.memo)(({ src, defaultIndex = 0, index, onIndexChan
|
|
|
154
154
|
return ((0, jsx_runtime_1.jsx)(modal_1.Modal, { ...props, css: gallery_style_1.style, className: (0, utils_1.clsx)(gallery_style_1.classes.root, props.className), open: innerOpen.current, onClosed: resetAll, maskProps: {
|
|
155
155
|
...props.maskProps,
|
|
156
156
|
children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: gallery_style_1.classes.control, children: [renderControl, showRotation &&
|
|
157
|
-
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: rotateLeft, children: (0, jsx_runtime_1.jsx)(
|
|
158
|
-
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u7F29\u5C0F", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: zoomOut, children: (0, jsx_runtime_1.jsx)(
|
|
159
|
-
(0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: close, children: (0, jsx_runtime_1.jsx)(
|
|
160
|
-
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: gallery_style_1.classes.swap, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: goPrevLoop, children: (0, jsx_runtime_1.jsx)(
|
|
157
|
+
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: rotateLeft, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faArrowRotateLeft_1.faArrowRotateLeft }) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: rotateRight, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faArrowRotateRight_1.faArrowRotateRight }) }) })] }), showZoom &&
|
|
158
|
+
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u7F29\u5C0F", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: zoomOut, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMagnifyingGlassMinus_1.faMagnifyingGlassMinus }) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u653E\u5927", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: zoomIn, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMagnifyingGlassPlus_1.faMagnifyingGlassPlus }) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: reset, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faExpand_1.faExpand }) }) })] }), showClose &&
|
|
159
|
+
(0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: close, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faXmark_1.faXmark }) })] }), srcArr.current.length > 1 &&
|
|
160
|
+
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: gallery_style_1.classes.swap, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: goPrevLoop, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faAngleLeft_1.faAngleLeft }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: goNextLoop, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faAngleRight_1.faAngleRight }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: gallery_style_1.classes.counter, children: [innerIndex.current + 1, " / ", srcArr.current.length] })] })] }))
|
|
161
161
|
}, children: srcArr.current.length > 0 &&
|
|
162
162
|
(0, jsx_runtime_1.jsx)("div", { className: gallery_style_1.classes.galleryContainer, ...draggableHandles, onDoubleClick: doubleClickHandler, children: (0, jsx_runtime_1.jsx)("div", { ref: wrapperRef, className: gallery_style_1.classes.galleryWrapper, style: { left: -innerIndex.current * 100 + '%' }, onTransitionEnd: e => e.currentTarget.dataset.transition = '', children: srcArr.current.map((src, i) => (0, jsx_runtime_1.jsx)(imageItem_1.ImageItem, { ref: r => {
|
|
163
163
|
r && imageItemRefs.current.push(r);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { CSSProperties, ReactNode, JSX, ReactElement } from 'react';
|
|
2
2
|
import { DivProps } from '../../types';
|
|
3
|
-
import { Gallery, ImagePreviewProps } from '../gallery
|
|
3
|
+
import { Gallery, ImagePreviewProps } from '../gallery';
|
|
4
4
|
export interface ImageProps extends DivProps {
|
|
5
5
|
src?: string;
|
|
6
6
|
fallback?: string;
|
|
@@ -5,8 +5,9 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
|
|
5
5
|
const react_1 = require("react");
|
|
6
6
|
const image_style_1 = require("./image.style");
|
|
7
7
|
const utils_1 = require("../../utils");
|
|
8
|
-
const gallery_1 = require("../gallery
|
|
9
|
-
const
|
|
8
|
+
const gallery_1 = require("../gallery");
|
|
9
|
+
const icon_1 = require("../icon");
|
|
10
|
+
const skeleton_1 = require("../skeleton");
|
|
10
11
|
const faEye_1 = require("@fortawesome/free-regular-svg-icons/faEye");
|
|
11
12
|
exports.Image = (0, react_1.memo)(({ src, fallback, onLoad, onError, renderLoading, alt = '', width, height, objectFit = 'cover', objectPosition = 'center', imgProps, actions, previewable = true, previewProps, onPreview, ...props }) => {
|
|
12
13
|
const imgRef = (0, react_1.useRef)(null);
|
|
@@ -35,7 +36,7 @@ exports.Image = (0, react_1.memo)(({ src, fallback, onLoad, onError, renderLoadi
|
|
|
35
36
|
};
|
|
36
37
|
const renderedActions = (() => {
|
|
37
38
|
if (typeof actions === 'undefined' && previewable) {
|
|
38
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: image_style_1.classes.previewButton, onClick: previewHandler, children: [(0, jsx_runtime_1.jsx)(
|
|
39
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: image_style_1.classes.previewButton, onClick: previewHandler, children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faEye_1.faEye }), (0, jsx_runtime_1.jsx)("div", { children: "\u9884\u89C8" })] }));
|
|
39
40
|
}
|
|
40
41
|
return actions;
|
|
41
42
|
})();
|
|
@@ -44,7 +45,7 @@ exports.Image = (0, react_1.memo)(({ src, fallback, onLoad, onError, renderLoadi
|
|
|
44
45
|
objectPosition,
|
|
45
46
|
...imgProps?.style
|
|
46
47
|
}, onLoad: loadHandler, onError: errorHandler }), loading.current &&
|
|
47
|
-
(renderLoading ?? (0, jsx_runtime_1.jsx)(
|
|
48
|
+
(renderLoading ?? (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: image_style_1.classes.skeleton })), !!renderedActions && !failed.current &&
|
|
48
49
|
(0, jsx_runtime_1.jsx)("div", { className: image_style_1.classes.mask, children: renderedActions }), previewable && src &&
|
|
49
50
|
(0, jsx_runtime_1.jsx)(gallery_1.Gallery, { src: [src], ...previewProps, open: previewOpen.current, onOpenChange: setPreviewOpen })] }));
|
|
50
51
|
});
|
|
@@ -8,7 +8,7 @@ const utils_1 = require("../../utils");
|
|
|
8
8
|
const theme_1 = require("../theme");
|
|
9
9
|
const button_1 = require("../button");
|
|
10
10
|
const loadingIndicator_1 = require("../loadingIndicator");
|
|
11
|
-
const
|
|
11
|
+
const icon_1 = require("../icon");
|
|
12
12
|
const faCircleXmark_1 = require("@fortawesome/free-solid-svg-icons/faCircleXmark");
|
|
13
13
|
exports.InputBase = (({ variant = 'outlined', size, shape, color = 'primary', children, prefix, suffix, onClear, loading, type, clearable = type !== 'number',
|
|
14
14
|
// 以下属性传递给<input/>
|
|
@@ -76,6 +76,6 @@ min, max, step, precision, placeholder, disabled, readOnly, autoFocus, defaultVa
|
|
|
76
76
|
onKeyDown: (e) => e.key === 'Enter' && blurHandler(e)
|
|
77
77
|
}) }), loading &&
|
|
78
78
|
(0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {}), clearable && !disabled && !readOnly && (Array.isArray(innerValue.current) ? !!innerValue.current.length : !!innerValue.current) &&
|
|
79
|
-
(0, jsx_runtime_1.jsx)(button_1.Button, { className: inputBase_style_1.classes.clear, variant: "plain", color: "text.disabled", onClick: clear, tabIndex: -1, children: (0, jsx_runtime_1.jsx)(
|
|
79
|
+
(0, jsx_runtime_1.jsx)(button_1.Button, { className: inputBase_style_1.classes.clear, variant: "plain", color: "text.disabled", onClick: clear, tabIndex: -1, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCircleXmark_1.faCircleXmark }) }), !!suffix &&
|
|
80
80
|
(0, jsx_runtime_1.jsx)("div", { className: inputBase_style_1.classes.suffix, children: suffix })] }));
|
|
81
81
|
});
|
|
@@ -9,7 +9,7 @@ const checkbox_1 = require("../checkbox");
|
|
|
9
9
|
const popper_1 = require("../popper");
|
|
10
10
|
const menu_1 = require("../menu");
|
|
11
11
|
const transitionBase_1 = require("../transitionBase");
|
|
12
|
-
const
|
|
12
|
+
const icon_1 = require("../icon");
|
|
13
13
|
const faChevronDown_1 = require("@fortawesome/free-solid-svg-icons/faChevronDown");
|
|
14
14
|
exports.MenuItem = (0, react_1.memo)(({ value, size, color = 'primary', emphasized = false, selected, focused = false, disabled = false, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, _level = 0, indent, expandIcon, defaultExpanded = false, expanded, onExpandedChange, ...props }) => {
|
|
15
15
|
const context = (0, menu_1.useMenuContext)();
|
|
@@ -43,7 +43,7 @@ exports.MenuItem = (0, react_1.memo)(({ value, size, color = 'primary', emphasiz
|
|
|
43
43
|
return;
|
|
44
44
|
}
|
|
45
45
|
if (!expandIcon) {
|
|
46
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: menuItem_style_1.classes.arrow, "data-open": innerExpanded.current, children: (0, jsx_runtime_1.jsx)(
|
|
46
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: menuItem_style_1.classes.arrow, "data-open": innerExpanded.current, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faChevronDown_1.faChevronDown }) }));
|
|
47
47
|
}
|
|
48
48
|
if (typeof expandIcon === 'function') {
|
|
49
49
|
return expandIcon(innerExpanded.current);
|
|
@@ -8,7 +8,7 @@ const pagination_style_1 = require("./pagination.style");
|
|
|
8
8
|
const pagination_1 = require("./pagination");
|
|
9
9
|
const utils_1 = require("../../utils");
|
|
10
10
|
const theme_1 = require("../theme");
|
|
11
|
-
const
|
|
11
|
+
const icon_1 = require("../icon");
|
|
12
12
|
const faEllipsis_1 = require("@fortawesome/free-solid-svg-icons/faEllipsis");
|
|
13
13
|
const faAngleLeft_1 = require("@fortawesome/free-solid-svg-icons/faAngleLeft");
|
|
14
14
|
const faAngleRight_1 = require("@fortawesome/free-solid-svg-icons/faAngleRight");
|
|
@@ -18,7 +18,7 @@ exports.PaginationPager = (0, react_1.memo)((props) => {
|
|
|
18
18
|
const renderPageButton = (i, ellipsis) => {
|
|
19
19
|
const btnPage = i + 1;
|
|
20
20
|
const isActive = !ellipsis && btnPage === page;
|
|
21
|
-
return ((0, jsx_runtime_1.jsx)(button_1.Button, { className: pagination_style_1.classes.button, variant: isActive ? 'outlined' : 'text', color: isActive ? 'primary' : text.primary, size: size, readOnly: isActive, onClick: () => onPageChange(btnPage), children: ellipsis ? (0, jsx_runtime_1.jsx)(
|
|
21
|
+
return ((0, jsx_runtime_1.jsx)(button_1.Button, { className: pagination_style_1.classes.button, variant: isActive ? 'outlined' : 'text', color: isActive ? 'primary' : text.primary, size: size, readOnly: isActive, onClick: () => onPageChange(btnPage), children: ellipsis ? (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faEllipsis_1.faEllipsis }) : btnPage }, i));
|
|
22
22
|
};
|
|
23
23
|
const renderPageList = () => {
|
|
24
24
|
if (pageCount <= 9) {
|
|
@@ -52,5 +52,5 @@ exports.PaginationPager = (0, react_1.memo)((props) => {
|
|
|
52
52
|
: renderPageButton(page + i - 5, i === 1 || i === 7);
|
|
53
53
|
});
|
|
54
54
|
};
|
|
55
|
-
return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.clsx)(pagination_style_1.classes.pager, props.className), children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: pagination_style_1.classes.button, variant: "text", size: size, color: "text.secondary", disabled: page === 1, onClick: () => onPageChange(page - 1), children: (0, jsx_runtime_1.jsx)(
|
|
55
|
+
return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.clsx)(pagination_style_1.classes.pager, props.className), children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: pagination_style_1.classes.button, variant: "text", size: size, color: "text.secondary", disabled: page === 1, onClick: () => onPageChange(page - 1), children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faAngleLeft_1.faAngleLeft }) }), renderPageList(), (0, jsx_runtime_1.jsx)(button_1.Button, { className: pagination_style_1.classes.button, variant: "text", size: size, color: "text.secondary", disabled: page === pageCount, onClick: () => onPageChange(page + 1), children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faAngleRight_1.faAngleRight }) })] }));
|
|
56
56
|
});
|