@canvas-components/react-components 0.3.17 → 0.3.19
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 +282 -172
- package/dist/index.d.cts +76 -57
- package/dist/index.d.ts +76 -57
- package/dist/index.js +283 -174
- package/package.json +1 -1
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,
|
|
2
|
+
import { forwardRef, useRef, useEffect, useImperativeHandle, createContext, useState, useMemo, useLayoutEffect, useSyncExternalStore, useContext, isValidElement, 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
|
|
|
@@ -717,7 +717,7 @@ var ReactVirtualList = forwardRef(function ReactVirtualListInner(props, ref) {
|
|
|
717
717
|
});
|
|
718
718
|
|
|
719
719
|
// src/components/select/style.css
|
|
720
|
-
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.canvas-react-select:focus-within {\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');
|
|
720
|
+
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.canvas-react-select:focus-within {\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-label {\n display: block;\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\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');
|
|
721
721
|
var ReactSelect = forwardRef(
|
|
722
722
|
function ReactSelect2(props, ref) {
|
|
723
723
|
const {
|
|
@@ -1041,9 +1041,16 @@ var ReactSelect = forwardRef(
|
|
|
1041
1041
|
}
|
|
1042
1042
|
selectOption(option, "mouse");
|
|
1043
1043
|
},
|
|
1044
|
-
children:
|
|
1045
|
-
|
|
1046
|
-
|
|
1044
|
+
children: /* @__PURE__ */ jsx(
|
|
1045
|
+
"span",
|
|
1046
|
+
{
|
|
1047
|
+
className: `${REACT_COMPONENT_PREFIX}-select-option-label`,
|
|
1048
|
+
title: option.label,
|
|
1049
|
+
children: renderSelectOptionLabel(
|
|
1050
|
+
option.label,
|
|
1051
|
+
showSearch ? searchKeyword : ""
|
|
1052
|
+
)
|
|
1053
|
+
}
|
|
1047
1054
|
)
|
|
1048
1055
|
},
|
|
1049
1056
|
String(option.value)
|
|
@@ -1490,6 +1497,275 @@ function actionStyle(primary) {
|
|
|
1490
1497
|
return { minWidth: 72, height: 32, padding: "0 12px", borderRadius: 6, border: primary ? "1px solid #1677ff" : "1px solid #d9d9d9", background: primary ? "#1677ff" : "#fff", color: primary ? "#fff" : "#374151", cursor: "pointer" };
|
|
1491
1498
|
}
|
|
1492
1499
|
|
|
1500
|
+
// src/components/form/style.css
|
|
1501
|
+
styleInject(".canvas-react-form {\n min-width: 0;\n}\n.canvas-react-form-vertical {\n display: grid;\n gap: 16px;\n}\n.canvas-react-form-horizontal {\n display: grid;\n gap: 12px;\n}\n.canvas-react-form-inline {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n gap: 12px 16px;\n}\n.canvas-react-form-item {\n box-sizing: border-box;\n min-width: 0;\n}\n.canvas-react-form-item-vertical {\n display: grid;\n gap: 6px;\n}\n.canvas-react-form-item-horizontal {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n align-items: center;\n column-gap: 10px;\n row-gap: 4px;\n}\n.canvas-react-form-item-inline {\n display: inline-grid;\n grid-template-columns: auto minmax(0, 1fr);\n align-items: center;\n column-gap: 8px;\n}\n.canvas-react-form-item-no-wrap {\n flex-wrap: nowrap;\n}\n.canvas-react-form-item-horizontal.canvas-react-form-item-no-wrap {\n display: grid;\n grid-template-columns: max-content minmax(0, 1fr);\n}\n.canvas-react-form-horizontal > .canvas-react-form-item {\n margin-bottom: var(--canvas-react-form-item-spacing, 16px);\n}\n.canvas-react-form-item-inline.canvas-react-form-item-no-wrap {\n display: inline-grid;\n grid-template-columns: max-content minmax(0, 1fr);\n}\n.canvas-react-form-item-no-wrap > .canvas-react-form-label {\n white-space: nowrap;\n}\n.canvas-react-form-label {\n display: inline-flex;\n align-items: center;\n gap: 3px;\n min-width: 0;\n color: #475569;\n font-size: 13px;\n line-height: 1.4;\n}\n.canvas-react-form-horizontal > .canvas-react-form-item > .canvas-react-form-label {\n min-height: 32px;\n}\n.canvas-react-form-required {\n color: #dc2626;\n}\n.canvas-react-form-control {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n.canvas-react-form-error {\n color: #dc2626;\n font-size: 12px;\n}\n.canvas-react-form-help,\n.canvas-react-form-extra {\n color: #64748b;\n font-size: 12px;\n}\n.canvas-react-form-item-error .canvas-react-form-control > input,\n.canvas-react-form-item-error .canvas-react-form-control > textarea {\n border-color: #dc2626;\n}\n");
|
|
1502
|
+
function createFormInstance() {
|
|
1503
|
+
const store = {
|
|
1504
|
+
values: {},
|
|
1505
|
+
initialValues: {},
|
|
1506
|
+
errors: {},
|
|
1507
|
+
rules: /* @__PURE__ */ new Map(),
|
|
1508
|
+
listeners: /* @__PURE__ */ new Set(),
|
|
1509
|
+
revision: 0,
|
|
1510
|
+
notify() {
|
|
1511
|
+
store.revision += 1;
|
|
1512
|
+
store.listeners.forEach((listener) => listener());
|
|
1513
|
+
}
|
|
1514
|
+
};
|
|
1515
|
+
return {
|
|
1516
|
+
__store: store,
|
|
1517
|
+
getFieldValue: (name) => store.values[name],
|
|
1518
|
+
setFieldsValue(values) {
|
|
1519
|
+
store.values = { ...store.values, ...values };
|
|
1520
|
+
Object.keys(values).forEach((name) => {
|
|
1521
|
+
delete store.errors[name];
|
|
1522
|
+
});
|
|
1523
|
+
store.notify();
|
|
1524
|
+
},
|
|
1525
|
+
resetFields() {
|
|
1526
|
+
store.values = { ...store.initialValues };
|
|
1527
|
+
store.errors = {};
|
|
1528
|
+
store.notify();
|
|
1529
|
+
},
|
|
1530
|
+
async validateFields() {
|
|
1531
|
+
const errors = {};
|
|
1532
|
+
for (const [name, rules] of store.rules) {
|
|
1533
|
+
const value = store.values[name];
|
|
1534
|
+
for (const rawRule of rules) {
|
|
1535
|
+
const rule = typeof rawRule === "function" ? rawRule({ getFieldValue: (field) => store.values[field] }) : rawRule;
|
|
1536
|
+
if (rule.required && (value === void 0 || value === null || value === "")) {
|
|
1537
|
+
errors[name] = rule.message ?? "\u6B64\u9879\u4E3A\u5FC5\u586B\u9879";
|
|
1538
|
+
break;
|
|
1539
|
+
}
|
|
1540
|
+
if ((rule.type === "number" || rule.type === "integer") && typeof value === "number" && rule.min !== void 0 && value < rule.min) {
|
|
1541
|
+
errors[name] = rule.message ?? `\u4E0D\u80FD\u5C0F\u4E8E ${rule.min}`;
|
|
1542
|
+
break;
|
|
1543
|
+
}
|
|
1544
|
+
if ((rule.type === "number" || rule.type === "integer") && typeof value === "number" && rule.max !== void 0 && value > rule.max) {
|
|
1545
|
+
errors[name] = rule.message ?? `\u4E0D\u80FD\u5927\u4E8E ${rule.max}`;
|
|
1546
|
+
break;
|
|
1547
|
+
}
|
|
1548
|
+
if (rule.type === "integer" && typeof value === "number" && !Number.isInteger(value)) {
|
|
1549
|
+
errors[name] = rule.message ?? "\u8BF7\u8F93\u5165\u6574\u6570";
|
|
1550
|
+
break;
|
|
1551
|
+
}
|
|
1552
|
+
if (rule.validator) {
|
|
1553
|
+
try {
|
|
1554
|
+
await rule.validator(rule, value);
|
|
1555
|
+
} catch (error) {
|
|
1556
|
+
errors[name] = error instanceof Error ? error.message : "\u6821\u9A8C\u5931\u8D25";
|
|
1557
|
+
break;
|
|
1558
|
+
}
|
|
1559
|
+
}
|
|
1560
|
+
}
|
|
1561
|
+
}
|
|
1562
|
+
store.errors = errors;
|
|
1563
|
+
store.notify();
|
|
1564
|
+
if (Object.keys(errors).length > 0) {
|
|
1565
|
+
return Promise.reject({
|
|
1566
|
+
errorFields: errors,
|
|
1567
|
+
values: { ...store.values }
|
|
1568
|
+
});
|
|
1569
|
+
}
|
|
1570
|
+
return { ...store.values };
|
|
1571
|
+
}
|
|
1572
|
+
};
|
|
1573
|
+
}
|
|
1574
|
+
function useReactForm() {
|
|
1575
|
+
const formRef = useRef(null);
|
|
1576
|
+
if (!formRef.current) formRef.current = createFormInstance();
|
|
1577
|
+
return [formRef.current];
|
|
1578
|
+
}
|
|
1579
|
+
function useReactFormWatch(name, form) {
|
|
1580
|
+
useSyncExternalStore(
|
|
1581
|
+
(listener) => {
|
|
1582
|
+
form.__store.listeners.add(listener);
|
|
1583
|
+
return () => form.__store.listeners.delete(listener);
|
|
1584
|
+
},
|
|
1585
|
+
() => form.__store.revision,
|
|
1586
|
+
() => 0
|
|
1587
|
+
);
|
|
1588
|
+
return form.getFieldValue(name);
|
|
1589
|
+
}
|
|
1590
|
+
var FormContext = createContext(null);
|
|
1591
|
+
var emptySubscribe = () => () => {
|
|
1592
|
+
};
|
|
1593
|
+
var emptySnapshot = () => 0;
|
|
1594
|
+
function ReactFormRoot({
|
|
1595
|
+
form: formProp,
|
|
1596
|
+
initialValues,
|
|
1597
|
+
layout = "vertical",
|
|
1598
|
+
noWrap = false,
|
|
1599
|
+
itemSpacing,
|
|
1600
|
+
labelWidth,
|
|
1601
|
+
labelAlign = "right",
|
|
1602
|
+
colon = false,
|
|
1603
|
+
requiredMark = true,
|
|
1604
|
+
className,
|
|
1605
|
+
children,
|
|
1606
|
+
...props
|
|
1607
|
+
}) {
|
|
1608
|
+
const internalForm = useRef(null);
|
|
1609
|
+
if (!internalForm.current) internalForm.current = createFormInstance();
|
|
1610
|
+
const form = formProp ?? internalForm.current;
|
|
1611
|
+
const initialKey = useMemo(
|
|
1612
|
+
() => JSON.stringify(initialValues ?? {}),
|
|
1613
|
+
[initialValues]
|
|
1614
|
+
);
|
|
1615
|
+
useEffect(() => {
|
|
1616
|
+
form.__store.initialValues = { ...initialValues };
|
|
1617
|
+
form.__store.values = { ...initialValues, ...form.__store.values };
|
|
1618
|
+
form.__store.notify();
|
|
1619
|
+
}, [form, initialKey]);
|
|
1620
|
+
const contextValue = useMemo(
|
|
1621
|
+
() => ({
|
|
1622
|
+
form,
|
|
1623
|
+
layout,
|
|
1624
|
+
noWrap,
|
|
1625
|
+
labelWidth,
|
|
1626
|
+
labelAlign,
|
|
1627
|
+
colon,
|
|
1628
|
+
requiredMark
|
|
1629
|
+
}),
|
|
1630
|
+
[colon, form, labelAlign, labelWidth, layout, noWrap, requiredMark]
|
|
1631
|
+
);
|
|
1632
|
+
return /* @__PURE__ */ jsx(FormContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
|
|
1633
|
+
"form",
|
|
1634
|
+
{
|
|
1635
|
+
...props,
|
|
1636
|
+
style: itemSpacing === void 0 ? props.style : {
|
|
1637
|
+
...props.style,
|
|
1638
|
+
"--canvas-react-form-item-spacing": itemSpacing
|
|
1639
|
+
},
|
|
1640
|
+
className: joinClassNames(
|
|
1641
|
+
`${REACT_COMPONENT_PREFIX}-form`,
|
|
1642
|
+
`${REACT_COMPONENT_PREFIX}-form-${layout}`,
|
|
1643
|
+
className
|
|
1644
|
+
),
|
|
1645
|
+
onSubmit: (event) => event.preventDefault(),
|
|
1646
|
+
children
|
|
1647
|
+
}
|
|
1648
|
+
) });
|
|
1649
|
+
}
|
|
1650
|
+
function ReactFormItem({
|
|
1651
|
+
label,
|
|
1652
|
+
name,
|
|
1653
|
+
children,
|
|
1654
|
+
rules = [],
|
|
1655
|
+
initialValue,
|
|
1656
|
+
required,
|
|
1657
|
+
colon,
|
|
1658
|
+
labelWidth,
|
|
1659
|
+
labelAlign,
|
|
1660
|
+
labelStyle,
|
|
1661
|
+
controlStyle,
|
|
1662
|
+
help,
|
|
1663
|
+
extra,
|
|
1664
|
+
className,
|
|
1665
|
+
style,
|
|
1666
|
+
noWrap
|
|
1667
|
+
}) {
|
|
1668
|
+
const context = useContext(FormContext);
|
|
1669
|
+
const form = context?.form ?? null;
|
|
1670
|
+
if (name && !form) throw new Error("ReactForm.Item \u5FC5\u987B\u5728 ReactForm \u5185\u4F7F\u7528");
|
|
1671
|
+
useSyncExternalStore(
|
|
1672
|
+
form ? (listener) => {
|
|
1673
|
+
form.__store.listeners.add(listener);
|
|
1674
|
+
return () => form.__store.listeners.delete(listener);
|
|
1675
|
+
} : emptySubscribe,
|
|
1676
|
+
form ? () => form.__store.revision : emptySnapshot,
|
|
1677
|
+
emptySnapshot
|
|
1678
|
+
);
|
|
1679
|
+
useEffect(() => {
|
|
1680
|
+
if (!form || !name) return;
|
|
1681
|
+
form.__store.rules.set(name, rules);
|
|
1682
|
+
if (form.getFieldValue(name) === void 0 && initialValue !== void 0) {
|
|
1683
|
+
form.setFieldsValue({ [name]: initialValue });
|
|
1684
|
+
}
|
|
1685
|
+
return () => {
|
|
1686
|
+
form.__store.rules.delete(name);
|
|
1687
|
+
};
|
|
1688
|
+
}, [form, initialValue, name, rules]);
|
|
1689
|
+
const childProps = isValidElement(children) ? children.props : {};
|
|
1690
|
+
const value = form && name ? form.getFieldValue(name) : void 0;
|
|
1691
|
+
const child = form && name && isValidElement(children) ? cloneElement(children, {
|
|
1692
|
+
value: value ?? "",
|
|
1693
|
+
onChange: (...args) => {
|
|
1694
|
+
const first = args[0];
|
|
1695
|
+
const nextValue = typeof first === "object" && first !== null && "target" in first ? first.target?.value : first;
|
|
1696
|
+
form.setFieldsValue({ [name]: nextValue });
|
|
1697
|
+
const childOnChange = childProps.onChange;
|
|
1698
|
+
if (typeof childOnChange === "function") childOnChange(...args);
|
|
1699
|
+
}
|
|
1700
|
+
}) : children;
|
|
1701
|
+
const error = form && name ? form.__store.errors[name] : void 0;
|
|
1702
|
+
const isRequired = required ?? rules.some((rule) => typeof rule !== "function" && rule.required === true);
|
|
1703
|
+
const resolvedLabelWidth = labelWidth ?? context?.labelWidth;
|
|
1704
|
+
const resolvedLabelAlign = labelAlign ?? context?.labelAlign ?? "right";
|
|
1705
|
+
const showColon = colon ?? context?.colon ?? false;
|
|
1706
|
+
const shouldMarkRequired = context?.requiredMark ?? true;
|
|
1707
|
+
const resolvedLayout = context?.layout ?? "vertical";
|
|
1708
|
+
const resolvedNoWrap = noWrap ?? context?.noWrap ?? false;
|
|
1709
|
+
const labelElementId = typeof childProps.id === "string" ? childProps.id : void 0;
|
|
1710
|
+
return /* @__PURE__ */ jsxs(
|
|
1711
|
+
"div",
|
|
1712
|
+
{
|
|
1713
|
+
className: joinClassNames(
|
|
1714
|
+
`${REACT_COMPONENT_PREFIX}-form-item`,
|
|
1715
|
+
`${REACT_COMPONENT_PREFIX}-form-item-${resolvedLayout}`,
|
|
1716
|
+
resolvedNoWrap && `${REACT_COMPONENT_PREFIX}-form-item-no-wrap`,
|
|
1717
|
+
className,
|
|
1718
|
+
error && `${REACT_COMPONENT_PREFIX}-form-item-error`
|
|
1719
|
+
),
|
|
1720
|
+
style,
|
|
1721
|
+
children: [
|
|
1722
|
+
label ? /* @__PURE__ */ jsxs(
|
|
1723
|
+
"label",
|
|
1724
|
+
{
|
|
1725
|
+
className: `${REACT_COMPONENT_PREFIX}-form-label`,
|
|
1726
|
+
htmlFor: labelElementId,
|
|
1727
|
+
style: {
|
|
1728
|
+
width: resolvedLabelWidth,
|
|
1729
|
+
flexBasis: resolvedLabelWidth,
|
|
1730
|
+
textAlign: resolvedLabelAlign,
|
|
1731
|
+
...labelStyle
|
|
1732
|
+
},
|
|
1733
|
+
children: [
|
|
1734
|
+
shouldMarkRequired && isRequired ? /* @__PURE__ */ jsx(
|
|
1735
|
+
"span",
|
|
1736
|
+
{
|
|
1737
|
+
"aria-hidden": "true",
|
|
1738
|
+
className: `${REACT_COMPONENT_PREFIX}-form-required`,
|
|
1739
|
+
children: "*"
|
|
1740
|
+
}
|
|
1741
|
+
) : null,
|
|
1742
|
+
/* @__PURE__ */ jsx("span", { children: label }),
|
|
1743
|
+
showColon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: ":" }) : null
|
|
1744
|
+
]
|
|
1745
|
+
}
|
|
1746
|
+
) : null,
|
|
1747
|
+
/* @__PURE__ */ jsxs(
|
|
1748
|
+
"div",
|
|
1749
|
+
{
|
|
1750
|
+
className: `${REACT_COMPONENT_PREFIX}-form-control`,
|
|
1751
|
+
style: controlStyle,
|
|
1752
|
+
children: [
|
|
1753
|
+
child,
|
|
1754
|
+
error ? /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-form-error`, children: error }) : help ? /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-form-help`, children: help }) : null,
|
|
1755
|
+
extra ? /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-form-extra`, children: extra }) : null
|
|
1756
|
+
]
|
|
1757
|
+
}
|
|
1758
|
+
)
|
|
1759
|
+
]
|
|
1760
|
+
}
|
|
1761
|
+
);
|
|
1762
|
+
}
|
|
1763
|
+
var ReactForm = Object.assign(ReactFormRoot, {
|
|
1764
|
+
Item: ReactFormItem,
|
|
1765
|
+
useForm: useReactForm,
|
|
1766
|
+
useWatch: useReactFormWatch
|
|
1767
|
+
});
|
|
1768
|
+
|
|
1493
1769
|
// src/components/color/style.css
|
|
1494
1770
|
styleInject(".canvas-react-color-wrap {\n display: inline-flex;\n width: 100%;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n}\n.canvas-react-color {\n display: flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n height: var(--canvas-react-control-height);\n min-height: 0;\n box-sizing: border-box;\n border: 1px solid var(--canvas-react-color-border);\n border-radius: var(--canvas-react-radius-sm);\n background: var(--canvas-react-color-bg);\n color: var(--canvas-react-color-text);\n font-size: var(--canvas-react-font-size);\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n cursor: pointer;\n}\n.canvas-react-color:hover {\n border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-color-open,\n.canvas-react-color:focus-within {\n border-color: var(--canvas-react-color-primary);\n box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-color-disabled {\n color: #9ca3af;\n background: var(--canvas-react-color-bg-soft);\n cursor: not-allowed;\n}\n.canvas-react-color-preview {\n flex: 0 0 auto;\n width: calc(24px * var(--canvas-react-content-zoom, 1));\n height: calc(24px * var(--canvas-react-content-zoom, 1));\n margin-left: 3px;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 4px;\n}\n.canvas-react-color-input-wrap {\n flex: 1;\n min-width: 0;\n height: 100%;\n min-height: 0;\n border: 0;\n box-shadow: none;\n}\n.canvas-react-color .canvas-react-input-affix-wrapper {\n height: 100%;\n min-height: 0;\n}\n.canvas-react-color-input-wrap:hover,\n.canvas-react-color-input-wrap:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n.canvas-react-color-input {\n cursor: pointer;\n text-transform: uppercase;\n}\n.canvas-react-color-arrow {\n flex: 0 0 auto;\n width: 0.5em;\n height: 0.5em;\n min-width: 6px;\n min-height: 6px;\n margin-right: var(--canvas-react-control-padding-inline, 11px);\n border-right: 1.5px solid var(--canvas-react-color-text-muted);\n border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n transform: rotate(45deg) translateY(-2px);\n transition: transform 0.18s ease;\n}\n.canvas-react-color-arrow-open {\n transform: rotate(225deg) translate(-1px, -1px);\n}\n.canvas-react-color-dropdown {\n overflow: hidden;\n}\n.canvas-react-color-panel {\n padding: 12px;\n box-sizing: border-box;\n}\n.canvas-react-color-saturation {\n position: relative;\n height: 150px;\n overflow: hidden;\n border-radius: 6px;\n cursor: crosshair;\n background-image:\n linear-gradient(\n to top,\n #000,\n transparent),\n linear-gradient(\n to right,\n #fff,\n transparent);\n touch-action: none;\n}\n.canvas-react-color-saturation-thumb {\n position: absolute;\n width: 12px;\n height: 12px;\n border: 2px solid #fff;\n border-radius: 50%;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.28);\n transform: translate(-50%, -50%);\n pointer-events: none;\n}\n.canvas-react-color-controls {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-top: 12px;\n}\n.canvas-react-color-current {\n flex: 0 0 28px;\n height: 28px;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 50%;\n}\n.canvas-react-color-hue {\n width: 100%;\n height: 12px;\n margin: 0;\n appearance: none;\n border-radius: 999px;\n background:\n linear-gradient(\n to right,\n #f00,\n #ff0,\n #0f0,\n #0ff,\n #00f,\n #f0f,\n #f00);\n cursor: pointer;\n}\n.canvas-react-color-hue::-webkit-slider-thumb {\n width: 14px;\n height: 14px;\n appearance: none;\n border: 2px solid #fff;\n border-radius: 50%;\n background: transparent;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);\n}\n.canvas-react-color-value-row {\n display: grid;\n grid-template-columns: 36px 1fr;\n align-items: center;\n gap: 8px;\n margin-top: 12px;\n color: var(--canvas-react-color-text-muted);\n font-size: 12px;\n}\n.canvas-react-color-value-row .canvas-react-input-affix-wrapper {\n height: 28px;\n}\n.canvas-react-color-presets {\n display: grid;\n grid-template-columns: repeat(8, 20px);\n gap: 7px;\n margin-top: 12px;\n}\n.canvas-react-color-preset {\n width: 20px;\n height: 20px;\n padding: 0;\n box-sizing: border-box;\n border: 1px solid rgba(0, 0, 0, 0.12);\n border-radius: 4px;\n cursor: pointer;\n transition: transform 0.16s ease, box-shadow 0.16s ease;\n}\n.canvas-react-color-preset:hover {\n transform: scale(1.12);\n}\n.canvas-react-color-preset-selected {\n box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--canvas-react-color-primary);\n}\n");
|
|
1495
1771
|
var DEFAULT_COLOR = "#1677ff";
|
|
@@ -5886,7 +6162,7 @@ function isPromiseLike(value) {
|
|
|
5886
6162
|
}
|
|
5887
6163
|
|
|
5888
6164
|
// src/components/compat/style.css
|
|
5889
|
-
styleInject(".canvas-react-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n min-height: 32px;\n padding: 4px 14px;\n border: 1px solid var(--cc-border-color, #d9d9d9);\n border-radius: 6px;\n color: var(--cc-text-color, #1f2937);\n background: var(--cc-surface-color, #fff);\n cursor: pointer;\n}\n.canvas-react-button:hover:not(:disabled) {\n color: #1677ff;\n border-color: #1677ff;\n}\n.canvas-react-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.canvas-react-button-primary {\n color: #fff;\n border-color: #1677ff;\n background: #1677ff;\n}\n.canvas-react-button-danger {\n color: #dc2626;\n border-color: #fca5a5;\n}\n.canvas-react-button-small {\n min-height: 24px;\n padding: 2px 8px;\n}\n.canvas-react-button-large {\n min-height: 40px;\n padding: 6px 18px;\n}\n.canvas-react-button-icon {\n display: inline-flex;\n}\n.canvas-react-row {\n display: flex;\n flex-flow: row wrap;\n}\n.canvas-react-col {\n min-width: 0;\n padding-inline: 8px;\n}\n.canvas-react-radio-group {\n display: flex;\n gap: 16px;\n}\n.canvas-react-radio {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n}\n.canvas-react-radio input {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n.canvas-react-radio-mark {\n width: 14px;\n height: 14px;\n border: 1px solid #94a3b8;\n border-radius: 50%;\n box-sizing: border-box;\n}\n.canvas-react-radio input:checked + .canvas-react-radio-mark {\n border: 4px solid #1677ff;\n}\n.canvas-react-form-item {\n display: flex;\n flex-direction: column;\n gap: 6px;\n margin-bottom: 16px;\n}\n.canvas-react-form-label {\n color: #334155;\n font-size: 14px;\n}\n.canvas-react-form-error {\n color: #dc2626;\n font-size: 12px;\n}\n.canvas-react-textarea {\n width: 100%;\n min-height: 72px;\n padding: 8px 10px;\n border: 1px solid #d9d9d9;\n border-radius: 6px;\n box-sizing: border-box;\n font: inherit;\n resize: vertical;\n}\n.canvas-react-message-host {\n position: fixed;\n z-index: 3000;\n top: 24px;\n left: 50%;\n display: flex;\n flex-direction: column;\n gap: 8px;\n transform: translateX(-50%);\n pointer-events: none;\n}\n.canvas-react-message {\n padding: 9px 14px;\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n color: #334155;\n background: #fff;\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);\n}\n.canvas-react-message-error {\n color: #b91c1c;\n border-color: #fecaca;\n}\n");
|
|
6165
|
+
styleInject(".canvas-react-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n min-height: 32px;\n padding: 4px 14px;\n border: 1px solid var(--cc-border-color, #d9d9d9);\n border-radius: 6px;\n color: var(--cc-text-color, #1f2937);\n background: var(--cc-surface-color, #fff);\n cursor: pointer;\n}\n.canvas-react-button:hover:not(:disabled) {\n color: #1677ff;\n border-color: #1677ff;\n}\n.canvas-react-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.canvas-react-button-primary {\n color: #fff;\n border-color: #1677ff;\n background: #1677ff;\n}\n.canvas-react-button-primary:hover:not(:disabled) {\n color: #fff;\n border-color: #4096ff;\n background: #4096ff;\n}\n.canvas-react-button-danger {\n color: #dc2626;\n border-color: #fca5a5;\n}\n.canvas-react-button-small {\n min-height: 24px;\n padding: 2px 8px;\n}\n.canvas-react-button-large {\n min-height: 40px;\n padding: 6px 18px;\n}\n.canvas-react-button-icon {\n display: inline-flex;\n}\n.canvas-react-row {\n display: flex;\n flex-flow: row wrap;\n}\n.canvas-react-col {\n min-width: 0;\n padding-inline: 8px;\n}\n.canvas-react-radio-group {\n display: flex;\n gap: 16px;\n}\n.canvas-react-radio {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n}\n.canvas-react-radio input {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n.canvas-react-radio-mark {\n width: 14px;\n height: 14px;\n border: 1px solid #94a3b8;\n border-radius: 50%;\n box-sizing: border-box;\n}\n.canvas-react-radio input:checked + .canvas-react-radio-mark {\n border: 4px solid #1677ff;\n}\n.canvas-react-form-item {\n display: flex;\n flex-direction: column;\n gap: 6px;\n margin-bottom: 16px;\n}\n.canvas-react-form-label {\n color: #334155;\n font-size: 14px;\n}\n.canvas-react-form-error {\n color: #dc2626;\n font-size: 12px;\n}\n.canvas-react-textarea {\n width: 100%;\n min-height: 72px;\n padding: 8px 10px;\n border: 1px solid #d9d9d9;\n border-radius: 6px;\n box-sizing: border-box;\n font: inherit;\n resize: vertical;\n}\n.canvas-react-message-host {\n position: fixed;\n z-index: 3000;\n top: 24px;\n left: 50%;\n display: flex;\n flex-direction: column;\n gap: 8px;\n transform: translateX(-50%);\n pointer-events: none;\n}\n.canvas-react-message {\n padding: 9px 14px;\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n color: #334155;\n background: #fff;\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);\n}\n.canvas-react-message-error {\n color: #b91c1c;\n border-color: #fecaca;\n}\n");
|
|
5890
6166
|
function ReactButton({
|
|
5891
6167
|
children,
|
|
5892
6168
|
className,
|
|
@@ -6048,173 +6324,6 @@ function ReactTextArea({ className, ...props }) {
|
|
|
6048
6324
|
}
|
|
6049
6325
|
);
|
|
6050
6326
|
}
|
|
6051
|
-
function createFormInstance() {
|
|
6052
|
-
const store = {
|
|
6053
|
-
values: {},
|
|
6054
|
-
initialValues: {},
|
|
6055
|
-
errors: {},
|
|
6056
|
-
rules: /* @__PURE__ */ new Map(),
|
|
6057
|
-
listeners: /* @__PURE__ */ new Set(),
|
|
6058
|
-
revision: 0,
|
|
6059
|
-
notify() {
|
|
6060
|
-
store.revision += 1;
|
|
6061
|
-
store.listeners.forEach((listener) => listener());
|
|
6062
|
-
}
|
|
6063
|
-
};
|
|
6064
|
-
return {
|
|
6065
|
-
__store: store,
|
|
6066
|
-
getFieldValue: (name) => store.values[name],
|
|
6067
|
-
setFieldsValue(values) {
|
|
6068
|
-
store.values = { ...store.values, ...values };
|
|
6069
|
-
Object.keys(values).forEach((name) => {
|
|
6070
|
-
delete store.errors[name];
|
|
6071
|
-
});
|
|
6072
|
-
store.notify();
|
|
6073
|
-
},
|
|
6074
|
-
resetFields() {
|
|
6075
|
-
store.values = { ...store.initialValues };
|
|
6076
|
-
store.errors = {};
|
|
6077
|
-
store.notify();
|
|
6078
|
-
},
|
|
6079
|
-
async validateFields() {
|
|
6080
|
-
const errors = {};
|
|
6081
|
-
for (const [name, rules] of store.rules) {
|
|
6082
|
-
const value = store.values[name];
|
|
6083
|
-
for (const rawRule of rules) {
|
|
6084
|
-
const rule = typeof rawRule === "function" ? rawRule({ getFieldValue: (field) => store.values[field] }) : rawRule;
|
|
6085
|
-
if (rule.required && (value === void 0 || value === null || value === "")) {
|
|
6086
|
-
errors[name] = rule.message ?? "\u6B64\u9879\u4E3A\u5FC5\u586B\u9879";
|
|
6087
|
-
break;
|
|
6088
|
-
}
|
|
6089
|
-
if ((rule.type === "number" || rule.type === "integer") && typeof value === "number" && rule.min !== void 0 && value < rule.min) {
|
|
6090
|
-
errors[name] = rule.message ?? `\u4E0D\u80FD\u5C0F\u4E8E ${rule.min}`;
|
|
6091
|
-
break;
|
|
6092
|
-
}
|
|
6093
|
-
if ((rule.type === "number" || rule.type === "integer") && typeof value === "number" && rule.max !== void 0 && value > rule.max) {
|
|
6094
|
-
errors[name] = rule.message ?? `\u4E0D\u80FD\u5927\u4E8E ${rule.max}`;
|
|
6095
|
-
break;
|
|
6096
|
-
}
|
|
6097
|
-
if (rule.type === "integer" && typeof value === "number" && !Number.isInteger(value)) {
|
|
6098
|
-
errors[name] = rule.message ?? "\u8BF7\u8F93\u5165\u6574\u6570";
|
|
6099
|
-
break;
|
|
6100
|
-
}
|
|
6101
|
-
if (rule.validator) {
|
|
6102
|
-
try {
|
|
6103
|
-
await rule.validator(rule, value);
|
|
6104
|
-
} catch (error) {
|
|
6105
|
-
errors[name] = error instanceof Error ? error.message : "\u6821\u9A8C\u5931\u8D25";
|
|
6106
|
-
break;
|
|
6107
|
-
}
|
|
6108
|
-
}
|
|
6109
|
-
}
|
|
6110
|
-
}
|
|
6111
|
-
store.errors = errors;
|
|
6112
|
-
store.notify();
|
|
6113
|
-
if (Object.keys(errors).length > 0) {
|
|
6114
|
-
return Promise.reject({
|
|
6115
|
-
errorFields: errors,
|
|
6116
|
-
values: { ...store.values }
|
|
6117
|
-
});
|
|
6118
|
-
}
|
|
6119
|
-
return { ...store.values };
|
|
6120
|
-
}
|
|
6121
|
-
};
|
|
6122
|
-
}
|
|
6123
|
-
function useReactForm() {
|
|
6124
|
-
const formRef = useRef();
|
|
6125
|
-
if (!formRef.current) formRef.current = createFormInstance();
|
|
6126
|
-
return [formRef.current];
|
|
6127
|
-
}
|
|
6128
|
-
function useReactFormWatch(name, form) {
|
|
6129
|
-
return useSyncExternalStore(
|
|
6130
|
-
(listener) => {
|
|
6131
|
-
form.__store.listeners.add(listener);
|
|
6132
|
-
return () => form.__store.listeners.delete(listener);
|
|
6133
|
-
},
|
|
6134
|
-
() => form.__store.revision,
|
|
6135
|
-
() => 0
|
|
6136
|
-
) >= 0 ? form.getFieldValue(name) : void 0;
|
|
6137
|
-
}
|
|
6138
|
-
var FormContext = createContext(null);
|
|
6139
|
-
function ReactFormRoot({
|
|
6140
|
-
form,
|
|
6141
|
-
initialValues,
|
|
6142
|
-
layout = "vertical",
|
|
6143
|
-
className,
|
|
6144
|
-
children,
|
|
6145
|
-
...props
|
|
6146
|
-
}) {
|
|
6147
|
-
const initialKey = useMemo(
|
|
6148
|
-
() => JSON.stringify(initialValues ?? {}),
|
|
6149
|
-
[initialValues]
|
|
6150
|
-
);
|
|
6151
|
-
useEffect(() => {
|
|
6152
|
-
form.__store.initialValues = { ...initialValues };
|
|
6153
|
-
form.__store.values = { ...initialValues, ...form.__store.values };
|
|
6154
|
-
form.__store.notify();
|
|
6155
|
-
}, [form, initialKey]);
|
|
6156
|
-
return /* @__PURE__ */ jsx(FormContext.Provider, { value: form, children: /* @__PURE__ */ jsx(
|
|
6157
|
-
"form",
|
|
6158
|
-
{
|
|
6159
|
-
...props,
|
|
6160
|
-
className: joinClassNames(
|
|
6161
|
-
`${REACT_COMPONENT_PREFIX}-form`,
|
|
6162
|
-
`${REACT_COMPONENT_PREFIX}-form-${layout}`,
|
|
6163
|
-
className
|
|
6164
|
-
),
|
|
6165
|
-
onSubmit: (event) => event.preventDefault(),
|
|
6166
|
-
children
|
|
6167
|
-
}
|
|
6168
|
-
) });
|
|
6169
|
-
}
|
|
6170
|
-
function ReactFormItem({
|
|
6171
|
-
label,
|
|
6172
|
-
name,
|
|
6173
|
-
children,
|
|
6174
|
-
rules = [],
|
|
6175
|
-
initialValue
|
|
6176
|
-
}) {
|
|
6177
|
-
const form = useContext(FormContext);
|
|
6178
|
-
if (!form) throw new Error("ReactForm.Item \u5FC5\u987B\u5728 ReactForm \u5185\u4F7F\u7528");
|
|
6179
|
-
useSyncExternalStore(
|
|
6180
|
-
(listener) => {
|
|
6181
|
-
form.__store.listeners.add(listener);
|
|
6182
|
-
return () => form.__store.listeners.delete(listener);
|
|
6183
|
-
},
|
|
6184
|
-
() => form.__store.revision,
|
|
6185
|
-
() => 0
|
|
6186
|
-
);
|
|
6187
|
-
useEffect(() => {
|
|
6188
|
-
form.__store.rules.set(name, rules);
|
|
6189
|
-
if (form.getFieldValue(name) === void 0 && initialValue !== void 0) {
|
|
6190
|
-
form.setFieldsValue({ [name]: initialValue });
|
|
6191
|
-
}
|
|
6192
|
-
return () => {
|
|
6193
|
-
form.__store.rules.delete(name);
|
|
6194
|
-
};
|
|
6195
|
-
}, [form, initialValue, name, rules]);
|
|
6196
|
-
const childProps = children.props;
|
|
6197
|
-
const value = form.getFieldValue(name);
|
|
6198
|
-
return /* @__PURE__ */ jsxs("label", { className: `${REACT_COMPONENT_PREFIX}-form-item`, children: [
|
|
6199
|
-
label ? /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-form-label`, children: label }) : null,
|
|
6200
|
-
cloneElement(children, {
|
|
6201
|
-
value: value ?? "",
|
|
6202
|
-
onChange: (...args) => {
|
|
6203
|
-
const first = args[0];
|
|
6204
|
-
const nextValue = typeof first === "object" && first !== null && "target" in first ? first.target?.value : first;
|
|
6205
|
-
form.setFieldsValue({ [name]: nextValue });
|
|
6206
|
-
const childOnChange = childProps.onChange;
|
|
6207
|
-
if (typeof childOnChange === "function") childOnChange(...args);
|
|
6208
|
-
}
|
|
6209
|
-
}),
|
|
6210
|
-
form.__store.errors[name] ? /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-form-error`, children: form.__store.errors[name] }) : null
|
|
6211
|
-
] });
|
|
6212
|
-
}
|
|
6213
|
-
var ReactForm = Object.assign(ReactFormRoot, {
|
|
6214
|
-
Item: ReactFormItem,
|
|
6215
|
-
useForm: useReactForm,
|
|
6216
|
-
useWatch: useReactFormWatch
|
|
6217
|
-
});
|
|
6218
6327
|
function showMessage(type, content) {
|
|
6219
6328
|
if (typeof document === "undefined") return;
|
|
6220
6329
|
const hostId = `${REACT_COMPONENT_PREFIX}-message-host`;
|
|
@@ -9798,4 +9907,4 @@ function resolveDecadeStart6(year) {
|
|
|
9798
9907
|
return Math.floor(year / 10) * 10;
|
|
9799
9908
|
}
|
|
9800
9909
|
|
|
9801
|
-
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, ReactScrollbarPositionDialog, ReactScrollbarSettingsDialog, ReactSelect, ReactTextArea, ReactTimePicker, ReactTimeRangePicker, ReactTooltip, ReactTransition, ReactTreeSelect, ReactVirtualList, ReactYearPicker, getSharedScrollbarSettings, reactMessage, resolveReactScrollbarMode, resolveResizablePanelSizes, setSharedScrollbarSettings, subscribeSharedScrollbarSettings, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
|
|
9910
|
+
export { REACT_COMPONENT_PREFIX, ReactAutoComplete, ReactButton, ReactCascader, ReactCheckbox, ReactCol, ReactColorPicker, ReactContentScaleProvider, ReactDatePicker, ReactDateRangePicker, ReactDateTimePicker, ReactDateTimeRangePicker, ReactFilterPanel, ReactFlex, ReactForm, ReactFormItem, ReactImagePreview, ReactInput, ReactInputNumber, ReactInputRange, ReactModal, ReactMonthPicker, ReactNumberInput, ReactPagination, ReactPopconfirm, ReactPopup, ReactQuarterPicker, ReactRadio, ReactResizablePanels, ReactRow, ReactScrollbarPositionDialog, ReactScrollbarSettingsDialog, ReactSelect, ReactTextArea, ReactTimePicker, ReactTimeRangePicker, ReactTooltip, ReactTransition, ReactTreeSelect, ReactVirtualList, ReactYearPicker, getSharedScrollbarSettings, reactMessage, resolveReactScrollbarMode, resolveResizablePanelSizes, setSharedScrollbarSettings, subscribeSharedScrollbarSettings, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
|