@hkyhy/marsun-components-core 0.1.63 → 0.1.65
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/components/Form/index.d.ts +1 -0
- package/dist/components/Form/kneFormInfo.d.ts +7 -1
- package/dist/components/Form/kneFormInfo.js +39 -21
- package/dist/components/Form/kneFormInfo.js.map +1 -1
- package/dist/components/Form/normalizeLabelTips.d.ts +14 -0
- package/dist/components/Form/normalizeLabelTips.js +40 -0
- package/dist/components/Form/normalizeLabelTips.js.map +1 -0
- package/dist/components/StateBar/StateBar.d.ts +17 -2
- package/dist/components/StateBar/StateBar.js +74 -33
- package/dist/components/StateBar/StateBar.js.map +1 -1
- package/dist/components/StateBar/index.d.ts +1 -1
- package/dist/components/StateBar/style.module.scss.js +10 -8
- package/dist/components/StateBar/style.module.scss.js.map +1 -1
- package/dist/index.js +139 -136
- package/dist/index.js.map +1 -1
- package/dist/marsun-components-core.css +1 -1
- package/dist/styles/global.css +1 -1
- package/package.json +1 -1
|
@@ -11,6 +11,7 @@ export type { FormDataSyncProps } from './FormDataSync';
|
|
|
11
11
|
/** @kne/form-info — 业务从包根导入,勿直连 @kne/form-info */
|
|
12
12
|
export { FormInfo, Form, FormModal, FormSteps, FormStepsModal, List, TableList, MultiField, Input, TextArea, Select, TreeSelect, InputNumber, Switch, RadioGroup, SubmitButton, ResetButton, CancelButton, } from './kneFormInfo';
|
|
13
13
|
export type { FormInfoProps, FormProps, FormModalProps, FormStepsProps, FormStepsModalProps, ListProps, TableListProps, MultiFieldProps, } from './kneFormInfo';
|
|
14
|
+
export { normalizeLabelTips, withNormalizedLabelTips } from './normalizeLabelTips';
|
|
14
15
|
/** @kne/react-form — 引擎 API;默认组件为 ReactForm(勿与 FormInfo 的 Form 混淆) */
|
|
15
16
|
export { ReactForm, GroupList, useField, useFormApi, useFormContext, useGroup, useSubmit, useReset, RULES, preset, interceptors, compileErrMsg, computedFieldValueFromFormData, computedFormDataFormState, filterEmpty, findField, formUtils, isEmpty, isNotEmpty, matchFields, stateToError, stateToIsPass, } from './kneReactForm';
|
|
16
17
|
export type { GroupListRenderProps } from './kneReactForm';
|
|
@@ -3,6 +3,8 @@ import { ComponentType, FC, ReactNode } from 'react';
|
|
|
3
3
|
type FieldProps = {
|
|
4
4
|
name: string;
|
|
5
5
|
label?: ReactNode;
|
|
6
|
+
/** 字符串自动变 Info 悬停;也可传 ReactNode / (props)=>ReactNode 自定义 */
|
|
7
|
+
labelTips?: ReactNode | ((props: FieldProps) => ReactNode);
|
|
6
8
|
rule?: string;
|
|
7
9
|
placeholder?: string;
|
|
8
10
|
disabled?: boolean;
|
|
@@ -37,7 +39,10 @@ export declare const TableList: FC<Omit<TableListProps, "itemTitle"> & {
|
|
|
37
39
|
itemTitle?: (ctx: ItemTitleCtx) => string;
|
|
38
40
|
}>;
|
|
39
41
|
export declare const MultiField: FC<MultiFieldProps>;
|
|
40
|
-
|
|
42
|
+
type KneInputType = ComponentType<FieldProps> & {
|
|
43
|
+
Password: ComponentType<FieldProps>;
|
|
44
|
+
};
|
|
45
|
+
export declare const Input: KneInputType;
|
|
41
46
|
export declare const TextArea: ComponentType<FieldProps>;
|
|
42
47
|
export declare const Select: ComponentType<FieldProps>;
|
|
43
48
|
export declare const TreeSelect: ComponentType<FieldProps>;
|
|
@@ -47,3 +52,4 @@ export declare const RadioGroup: ComponentType<FieldProps>;
|
|
|
47
52
|
export declare const SubmitButton: ComponentType<ButtonProps>;
|
|
48
53
|
export declare const ResetButton: ComponentType<ButtonProps>;
|
|
49
54
|
export declare const CancelButton: ComponentType<ButtonProps>;
|
|
55
|
+
export { normalizeLabelTips, withNormalizedLabelTips } from './normalizeLabelTips';
|
|
@@ -1,25 +1,43 @@
|
|
|
1
1
|
/* empty css */
|
|
2
|
-
import
|
|
3
|
-
import { CancelButton as u,
|
|
4
|
-
|
|
2
|
+
import s, { Form as e, FormModal as n, FormSteps as a, FormStepsModal as r, List as c, MultiField as i, TableList as m } from "@kne/form-info";
|
|
3
|
+
import { CancelButton as u, ResetButton as l, SubmitButton as p, Input as S, TextArea as d, Select as F, TreeSelect as $, InputNumber as b, Switch as T, RadioGroup as B } from "@kne/react-form-antd";
|
|
4
|
+
import { withNormalizedLabelTips as t } from "./normalizeLabelTips.js";
|
|
5
|
+
import { normalizeLabelTips as H } from "./normalizeLabelTips.js";
|
|
6
|
+
const R = s, x = e, h = n, N = a, A = r, C = c, G = m, z = i, o = S, I = t(o), P = Object.assign(I, {
|
|
7
|
+
Password: t(o.Password)
|
|
8
|
+
}), g = t(
|
|
9
|
+
d
|
|
10
|
+
), j = t(
|
|
11
|
+
F
|
|
12
|
+
), y = t(
|
|
13
|
+
$
|
|
14
|
+
), K = t(
|
|
15
|
+
b
|
|
16
|
+
), O = t(
|
|
17
|
+
T
|
|
18
|
+
), W = t(
|
|
19
|
+
B
|
|
20
|
+
), k = p, q = l, v = u;
|
|
5
21
|
export {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
v as CancelButton,
|
|
23
|
+
x as Form,
|
|
24
|
+
R as FormInfo,
|
|
25
|
+
h as FormModal,
|
|
26
|
+
N as FormSteps,
|
|
27
|
+
A as FormStepsModal,
|
|
28
|
+
P as Input,
|
|
29
|
+
K as InputNumber,
|
|
30
|
+
C as List,
|
|
31
|
+
z as MultiField,
|
|
32
|
+
W as RadioGroup,
|
|
33
|
+
q as ResetButton,
|
|
34
|
+
j as Select,
|
|
35
|
+
k as SubmitButton,
|
|
36
|
+
O as Switch,
|
|
37
|
+
G as TableList,
|
|
38
|
+
g as TextArea,
|
|
39
|
+
y as TreeSelect,
|
|
40
|
+
H as normalizeLabelTips,
|
|
41
|
+
t as withNormalizedLabelTips
|
|
24
42
|
};
|
|
25
43
|
//# sourceMappingURL=kneFormInfo.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kneFormInfo.js","sources":["../../../src/components/Form/kneFormInfo.ts"],"sourcesContent":["/**\n * 经 core 再导出 @kne/form-info(业务唯一入口)。\n * 布局组件来自 @kne/form-info;字段组件须从 @kne/react-form-antd 具名导入\n * (form-info 的 `export *` 在 Vite 下经 namespace 读取时常为 undefined)。\n */\nimport '@kne/form-info/dist/index.css';\nimport FormInfoBase, {\n Form as KneForm,\n FormModal as KneFormModal,\n FormSteps as KneFormSteps,\n FormStepsModal as KneFormStepsModal,\n List as KneList,\n MultiField as KneMultiField,\n TableList as KneTableList,\n type FormModalProps,\n type FormProps,\n type FormStepsModalProps,\n type FormStepsProps,\n type ListProps,\n type MultiFieldProps,\n type TableListProps,\n type FormInfoProps,\n} from '@kne/form-info';\nimport {\n CancelButton as KneCancelButton,\n Input as KneInput,\n InputNumber as KneInputNumber,\n RadioGroup as KneRadioGroup,\n ResetButton as KneResetButton,\n Select as KneSelect,\n SubmitButton as KneSubmitButton,\n Switch as KneSwitch,\n TextArea as KneTextArea,\n TreeSelect as KneTreeSelect,\n} from '@kne/react-form-antd';\nimport type { ComponentType, FC, ReactNode } from 'react';\n\ntype FieldProps = {\n name: string;\n label?: ReactNode;\n rule?: string;\n placeholder?: string;\n disabled?: boolean;\n block?: boolean;\n rows?: number;\n options?: unknown[];\n [key: string]: unknown;\n};\n\ntype ButtonProps = {\n children?: ReactNode;\n type?: string;\n loading?: boolean;\n [key: string]: unknown;\n};\n\ntype ItemTitleCtx = { index: number; data?: Record<string, unknown> };\n\nexport type {\n FormInfoProps,\n FormProps,\n FormModalProps,\n FormStepsProps,\n FormStepsModalProps,\n ListProps,\n TableListProps,\n MultiFieldProps,\n};\n\nexport const FormInfo = FormInfoBase;\nexport const Form = KneForm;\nexport const FormModal = KneFormModal as FC<FormModalProps & { children?: ReactNode }>;\nexport const FormSteps = KneFormSteps as FC<FormStepsProps>;\nexport const FormStepsModal = KneFormStepsModal as FC<FormStepsModalProps>;\n\nexport const List = KneList as FC<\n Omit<ListProps, 'itemTitle'> & {\n maxLength?: number;\n itemTitle?: (ctx: ItemTitleCtx) => string;\n }\n>;\nexport const TableList = KneTableList as FC<\n Omit<TableListProps, 'itemTitle'> & {\n itemTitle?: (ctx: ItemTitleCtx) => string;\n }\n>;\nexport const MultiField = KneMultiField as FC<MultiFieldProps>;\n\nexport const Input =
|
|
1
|
+
{"version":3,"file":"kneFormInfo.js","sources":["../../../src/components/Form/kneFormInfo.ts"],"sourcesContent":["/**\n * 经 core 再导出 @kne/form-info(业务唯一入口)。\n * 布局组件来自 @kne/form-info;字段组件须从 @kne/react-form-antd 具名导入\n * (form-info 的 `export *` 在 Vite 下经 namespace 读取时常为 undefined)。\n *\n * 字段 `labelTips`:字符串由 {@link withNormalizedLabelTips} 统一包成 Info+TooltipInfo。\n */\nimport '@kne/form-info/dist/index.css';\nimport FormInfoBase, {\n Form as KneForm,\n FormModal as KneFormModal,\n FormSteps as KneFormSteps,\n FormStepsModal as KneFormStepsModal,\n List as KneList,\n MultiField as KneMultiField,\n TableList as KneTableList,\n type FormModalProps,\n type FormProps,\n type FormStepsModalProps,\n type FormStepsProps,\n type ListProps,\n type MultiFieldProps,\n type TableListProps,\n type FormInfoProps,\n} from '@kne/form-info';\nimport {\n CancelButton as KneCancelButton,\n Input as KneInput,\n InputNumber as KneInputNumber,\n RadioGroup as KneRadioGroup,\n ResetButton as KneResetButton,\n Select as KneSelect,\n SubmitButton as KneSubmitButton,\n Switch as KneSwitch,\n TextArea as KneTextArea,\n TreeSelect as KneTreeSelect,\n} from '@kne/react-form-antd';\nimport type { ComponentType, FC, ReactNode } from 'react';\nimport { withNormalizedLabelTips } from './normalizeLabelTips';\n\ntype FieldProps = {\n name: string;\n label?: ReactNode;\n /** 字符串自动变 Info 悬停;也可传 ReactNode / (props)=>ReactNode 自定义 */\n labelTips?: ReactNode | ((props: FieldProps) => ReactNode);\n rule?: string;\n placeholder?: string;\n disabled?: boolean;\n block?: boolean;\n rows?: number;\n options?: unknown[];\n [key: string]: unknown;\n};\n\ntype ButtonProps = {\n children?: ReactNode;\n type?: string;\n loading?: boolean;\n [key: string]: unknown;\n};\n\ntype ItemTitleCtx = { index: number; data?: Record<string, unknown> };\n\nexport type {\n FormInfoProps,\n FormProps,\n FormModalProps,\n FormStepsProps,\n FormStepsModalProps,\n ListProps,\n TableListProps,\n MultiFieldProps,\n};\n\nexport const FormInfo = FormInfoBase;\nexport const Form = KneForm;\nexport const FormModal = KneFormModal as FC<FormModalProps & { children?: ReactNode }>;\nexport const FormSteps = KneFormSteps as FC<FormStepsProps>;\nexport const FormStepsModal = KneFormStepsModal as FC<FormStepsModalProps>;\n\nexport const List = KneList as FC<\n Omit<ListProps, 'itemTitle'> & {\n maxLength?: number;\n itemTitle?: (ctx: ItemTitleCtx) => string;\n }\n>;\nexport const TableList = KneTableList as FC<\n Omit<TableListProps, 'itemTitle'> & {\n itemTitle?: (ctx: ItemTitleCtx) => string;\n }\n>;\nexport const MultiField = KneMultiField as FC<MultiFieldProps>;\n\ntype KneInputType = ComponentType<FieldProps> & { Password: ComponentType<FieldProps> };\nconst KneInputTyped = KneInput as unknown as KneInputType;\nconst InputWrapped = withNormalizedLabelTips(KneInputTyped);\nexport const Input = Object.assign(InputWrapped, {\n Password: withNormalizedLabelTips(KneInputTyped.Password),\n}) as KneInputType;\n\nexport const TextArea = withNormalizedLabelTips(\n KneTextArea as ComponentType<FieldProps>,\n) as ComponentType<FieldProps>;\nexport const Select = withNormalizedLabelTips(\n KneSelect as ComponentType<FieldProps>,\n) as ComponentType<FieldProps>;\nexport const TreeSelect = withNormalizedLabelTips(\n KneTreeSelect as ComponentType<FieldProps>,\n) as ComponentType<FieldProps>;\nexport const InputNumber = withNormalizedLabelTips(\n KneInputNumber as ComponentType<FieldProps>,\n) as ComponentType<FieldProps>;\nexport const Switch = withNormalizedLabelTips(\n KneSwitch as ComponentType<FieldProps>,\n) as ComponentType<FieldProps>;\nexport const RadioGroup = withNormalizedLabelTips(\n KneRadioGroup as ComponentType<FieldProps>,\n) as ComponentType<FieldProps>;\n\nexport const SubmitButton = KneSubmitButton as ComponentType<ButtonProps>;\nexport const ResetButton = KneResetButton as ComponentType<ButtonProps>;\nexport const CancelButton = KneCancelButton as ComponentType<ButtonProps>;\n\nexport { normalizeLabelTips, withNormalizedLabelTips } from './normalizeLabelTips';\n"],"names":["FormInfo","FormInfoBase","Form","KneForm","FormModal","KneFormModal","FormSteps","KneFormSteps","FormStepsModal","KneFormStepsModal","List","KneList","TableList","KneTableList","MultiField","KneMultiField","KneInputTyped","KneInput","InputWrapped","withNormalizedLabelTips","Input","TextArea","KneTextArea","Select","KneSelect","TreeSelect","KneTreeSelect","InputNumber","KneInputNumber","Switch","KneSwitch","RadioGroup","KneRadioGroup","SubmitButton","KneSubmitButton","ResetButton","KneResetButton","CancelButton","KneCancelButton"],"mappings":";;;;;AA0EO,MAAMA,IAAWC,GACXC,IAAOC,GACPC,IAAYC,GACZC,IAAYC,GACZC,IAAiBC,GAEjBC,IAAOC,GAMPC,IAAYC,GAKZC,IAAaC,GAGpBC,IAAgBC,GAChBC,IAAeC,EAAwBH,CAAa,GAC7CI,IAAQ,OAAO,OAAOF,GAAc;AAAA,EAC/C,UAAUC,EAAwBH,EAAc,QAAQ;AAC1D,CAAC,GAEYK,IAAWF;AAAA,EACtBG;AACF,GACaC,IAASJ;AAAA,EACpBK;AACF,GACaC,IAAaN;AAAA,EACxBO;AACF,GACaC,IAAcR;AAAA,EACzBS;AACF,GACaC,IAASV;AAAA,EACpBW;AACF,GACaC,IAAaZ;AAAA,EACxBa;AACF,GAEaC,IAAeC,GACfC,IAAcC,GACdC,IAAeC;"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ComponentType, ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* kne 原生会把字符串 `labelTips` 直接拼进 label 旁正文。
|
|
4
|
+
* core 约定:字符串 / 数字 → Info + TooltipInfo(悬停说明);
|
|
5
|
+
* 已是 ReactNode / function → 原样透传(业务可自定义)。
|
|
6
|
+
* 必填仍用 `rule="REQ"`,不要把「必填/选填」写进 tip。
|
|
7
|
+
*/
|
|
8
|
+
export declare function normalizeLabelTips(labelTips: unknown): ReactNode | undefined;
|
|
9
|
+
type WithLabelTips = {
|
|
10
|
+
labelTips?: unknown;
|
|
11
|
+
};
|
|
12
|
+
/** 包装 kne 字段:拦截 labelTips 字符串并规范化 */
|
|
13
|
+
export declare function withNormalizedLabelTips<P extends WithLabelTips>(Comp: ComponentType<P>): ComponentType<P>;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import s from "../TooltipInfo/TooltipInfo.js";
|
|
3
|
+
import { Info as f } from "../Icons/Info.js";
|
|
4
|
+
function l(t) {
|
|
5
|
+
if (!(t == null || t === !1)) {
|
|
6
|
+
if (typeof t == "string" || typeof t == "number") {
|
|
7
|
+
const i = String(t).trim();
|
|
8
|
+
return i ? /* @__PURE__ */ r(
|
|
9
|
+
s,
|
|
10
|
+
{
|
|
11
|
+
type: "note",
|
|
12
|
+
note: { title: "说明", description: i },
|
|
13
|
+
minWidth: 220,
|
|
14
|
+
maxWidth: 360,
|
|
15
|
+
children: /* @__PURE__ */ r(
|
|
16
|
+
f,
|
|
17
|
+
{
|
|
18
|
+
size: 14,
|
|
19
|
+
"aria-label": "说明",
|
|
20
|
+
style: { marginLeft: 4, cursor: "pointer", verticalAlign: "-2px" }
|
|
21
|
+
}
|
|
22
|
+
)
|
|
23
|
+
}
|
|
24
|
+
) : void 0;
|
|
25
|
+
}
|
|
26
|
+
return t;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
function u(t) {
|
|
30
|
+
const i = (o) => {
|
|
31
|
+
const { labelTips: a, ...m } = o, e = l(a);
|
|
32
|
+
return /* @__PURE__ */ r(t, { ...m, ...e !== void 0 ? { labelTips: e } : {} });
|
|
33
|
+
}, n = t.displayName || t.name || "Field";
|
|
34
|
+
return i.displayName = `WithNormalizedLabelTips(${n})`, i;
|
|
35
|
+
}
|
|
36
|
+
export {
|
|
37
|
+
l as normalizeLabelTips,
|
|
38
|
+
u as withNormalizedLabelTips
|
|
39
|
+
};
|
|
40
|
+
//# sourceMappingURL=normalizeLabelTips.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"normalizeLabelTips.js","sources":["../../../src/components/Form/normalizeLabelTips.tsx"],"sourcesContent":["import type { ComponentType, ReactNode } from 'react';\nimport { Info } from '@/components/Icons';\nimport { TooltipInfo } from '@/components/TooltipInfo';\n\n/**\n * kne 原生会把字符串 `labelTips` 直接拼进 label 旁正文。\n * core 约定:字符串 / 数字 → Info + TooltipInfo(悬停说明);\n * 已是 ReactNode / function → 原样透传(业务可自定义)。\n * 必填仍用 `rule=\"REQ\"`,不要把「必填/选填」写进 tip。\n */\nexport function normalizeLabelTips(labelTips: unknown): ReactNode | undefined {\n if (labelTips == null || labelTips === false) {\n return undefined;\n }\n if (typeof labelTips === 'string' || typeof labelTips === 'number') {\n const text = String(labelTips).trim();\n if (!text) {\n return undefined;\n }\n return (\n <TooltipInfo\n type=\"note\"\n note={{ title: '说明', description: text }}\n minWidth={220}\n maxWidth={360}\n >\n <Info\n size={14}\n aria-label=\"说明\"\n style={{ marginLeft: 4, cursor: 'pointer', verticalAlign: '-2px' }}\n />\n </TooltipInfo>\n );\n }\n return labelTips as ReactNode;\n}\n\ntype WithLabelTips = { labelTips?: unknown };\n\n/** 包装 kne 字段:拦截 labelTips 字符串并规范化 */\nexport function withNormalizedLabelTips<P extends WithLabelTips>(\n Comp: ComponentType<P>,\n): ComponentType<P> {\n const Wrapped = (props: P) => {\n const { labelTips, ...rest } = props;\n const next = normalizeLabelTips(labelTips);\n return <Comp {...(rest as P)} {...(next !== undefined ? { labelTips: next } : {})} />;\n };\n const name = Comp.displayName || Comp.name || 'Field';\n Wrapped.displayName = `WithNormalizedLabelTips(${name})`;\n return Wrapped;\n}\n"],"names":["normalizeLabelTips","labelTips","text","jsx","TooltipInfo","Info","withNormalizedLabelTips","Comp","Wrapped","props","rest","next","name"],"mappings":";;;AAUO,SAASA,EAAmBC,GAA2C;AAC5E,MAAI,EAAAA,KAAa,QAAQA,MAAc,KAGvC;AAAA,QAAI,OAAOA,KAAc,YAAY,OAAOA,KAAc,UAAU;AAClE,YAAMC,IAAO,OAAOD,CAAS,EAAE,KAAA;AAC/B,aAAKC,IAIH,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,MAAM,EAAE,OAAO,MAAM,aAAaF,EAAA;AAAA,UAClC,UAAU;AAAA,UACV,UAAU;AAAA,UAEV,UAAA,gBAAAC;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,MAAM;AAAA,cACN,cAAW;AAAA,cACX,OAAO,EAAE,YAAY,GAAG,QAAQ,WAAW,eAAe,OAAA;AAAA,YAAO;AAAA,UAAA;AAAA,QACnE;AAAA,MAAA,IAbF;AAAA,IAgBJ;AACA,WAAOJ;AAAA;AACT;AAKO,SAASK,EACdC,GACkB;AAClB,QAAMC,IAAU,CAACC,MAAa;AAC5B,UAAM,EAAE,WAAAR,GAAW,GAAGS,EAAA,IAASD,GACzBE,IAAOX,EAAmBC,CAAS;AACzC,WAAO,gBAAAE,EAACI,GAAA,EAAM,GAAIG,GAAa,GAAIC,MAAS,SAAY,EAAE,WAAWA,EAAA,IAAS,CAAA,EAAC,CAAI;AAAA,EACrF,GACMC,IAAOL,EAAK,eAAeA,EAAK,QAAQ;AAC9C,SAAAC,EAAQ,cAAc,2BAA2BI,CAAI,KAC9CJ;AACT;"}
|
|
@@ -1,14 +1,29 @@
|
|
|
1
1
|
import { TabsProps } from 'antd';
|
|
2
|
-
import { CSSProperties, ReactNode } from 'react';
|
|
2
|
+
import { CSSProperties, MouseEvent, ReactNode } from 'react';
|
|
3
|
+
import { IconName } from '../Icons';
|
|
3
4
|
import { DescriptionItem } from '../Descriptions/CommonDescriptions';
|
|
4
5
|
export type StateBarType = 'tab' | 'radio' | 'step';
|
|
6
|
+
/** Tab 项旁操作(icon + 可选文案提示 + 点击) */
|
|
7
|
+
export type StateBarActionItem = {
|
|
8
|
+
/** Icons 注册表名,如 `Info` / `Plus` / `Pencil` */
|
|
9
|
+
iconType: IconName;
|
|
10
|
+
/** Tooltip 文案;缺省不包 Tooltip */
|
|
11
|
+
label?: string;
|
|
12
|
+
onClick?: (e: MouseEvent<HTMLElement>) => void;
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
className?: string;
|
|
15
|
+
/** 图标尺寸,默认 14 */
|
|
16
|
+
size?: number;
|
|
17
|
+
};
|
|
5
18
|
export type StateBarOption = {
|
|
6
19
|
key: string;
|
|
7
20
|
/** 选项卡标题(优先于 label) */
|
|
8
21
|
tab?: ReactNode;
|
|
9
22
|
label?: ReactNode;
|
|
10
|
-
/** 标题旁 Info + TooltipInfo(对齐 Modal/InteractiveBlock);为空不展示
|
|
23
|
+
/** 标题旁 Info + TooltipInfo(对齐 Modal/InteractiveBlock);为空不展示 */
|
|
11
24
|
info?: DescriptionItem[];
|
|
25
|
+
/** 标题旁额外操作图标(可与 info 并存) */
|
|
26
|
+
actions?: StateBarActionItem[];
|
|
12
27
|
children?: ReactNode;
|
|
13
28
|
disabled?: boolean;
|
|
14
29
|
className?: string;
|
|
@@ -1,61 +1,102 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { Tabs as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import { Info as
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { jsx as o, jsxs as c } from "react/jsx-runtime";
|
|
2
|
+
import { Tabs as C, Tooltip as y } from "antd";
|
|
3
|
+
import i from "classnames";
|
|
4
|
+
import l from "./style.module.scss.js";
|
|
5
|
+
import I from "../TooltipInfo/TooltipInfo.js";
|
|
6
|
+
import { Info as N } from "../Icons/Info.js";
|
|
7
|
+
import { ICON_REGISTRY as T } from "../Icons/registry.js";
|
|
8
|
+
function k(e, s) {
|
|
9
|
+
const t = T[e.iconType];
|
|
10
|
+
if (!t) return null;
|
|
11
|
+
const n = /* @__PURE__ */ o(
|
|
12
|
+
"span",
|
|
13
|
+
{
|
|
14
|
+
role: e.onClick ? "button" : void 0,
|
|
15
|
+
tabIndex: e.onClick && !e.disabled ? 0 : void 0,
|
|
16
|
+
className: i(
|
|
17
|
+
"marsun-state-bar-action",
|
|
18
|
+
l["state-bar-action"],
|
|
19
|
+
e.disabled && "marsun-state-bar-action-disabled",
|
|
20
|
+
e.disabled && l["state-bar-action-disabled"],
|
|
21
|
+
e.className
|
|
22
|
+
),
|
|
23
|
+
"aria-label": e.label || e.iconType,
|
|
24
|
+
"aria-disabled": e.disabled || void 0,
|
|
25
|
+
onClick: (a) => {
|
|
26
|
+
var r;
|
|
27
|
+
a.stopPropagation(), !e.disabled && ((r = e.onClick) == null || r.call(e, a));
|
|
28
|
+
},
|
|
29
|
+
onKeyDown: (a) => {
|
|
30
|
+
var r;
|
|
31
|
+
a.key !== "Enter" && a.key !== " " || (a.preventDefault(), a.stopPropagation(), !e.disabled && ((r = e.onClick) == null || r.call(e, a)));
|
|
32
|
+
},
|
|
33
|
+
children: /* @__PURE__ */ o(t, { size: e.size ?? 14, "aria-hidden": !0 })
|
|
34
|
+
},
|
|
35
|
+
s
|
|
36
|
+
);
|
|
37
|
+
return e.label ? /* @__PURE__ */ o(y, { title: e.label, children: n }, s) : n;
|
|
38
|
+
}
|
|
39
|
+
function g(e, s, t) {
|
|
40
|
+
const n = !!(s && s.length > 0), a = !!(t && t.length > 0);
|
|
41
|
+
return !n && !a ? e : /* @__PURE__ */ c("span", { className: i("marsun-state-bar-tab-label", l["state-bar-tab-label"]), children: [
|
|
9
42
|
e,
|
|
10
|
-
/* @__PURE__ */
|
|
11
|
-
|
|
43
|
+
n ? /* @__PURE__ */ o(
|
|
44
|
+
I,
|
|
12
45
|
{
|
|
13
|
-
content:
|
|
46
|
+
content: s,
|
|
14
47
|
placement: "topLeft",
|
|
15
48
|
minWidth: 220,
|
|
16
49
|
maxWidth: 360,
|
|
17
50
|
overlayClassName: "marsun-state-bar-info-tooltip",
|
|
18
|
-
children: /* @__PURE__ */
|
|
51
|
+
children: /* @__PURE__ */ o(
|
|
52
|
+
"span",
|
|
53
|
+
{
|
|
54
|
+
className: i("marsun-state-bar-info", l["state-bar-info"]),
|
|
55
|
+
onClick: (r) => r.stopPropagation(),
|
|
56
|
+
children: /* @__PURE__ */ o(N, { size: 14, "aria-hidden": !0 })
|
|
57
|
+
}
|
|
58
|
+
)
|
|
19
59
|
}
|
|
20
|
-
)
|
|
60
|
+
) : null,
|
|
61
|
+
a ? t.map((r, d) => k(r, `${r.iconType}-${d}`)) : null
|
|
21
62
|
] });
|
|
22
63
|
}
|
|
23
|
-
const
|
|
64
|
+
const A = ({
|
|
24
65
|
className: e,
|
|
25
|
-
type:
|
|
26
|
-
stateOption:
|
|
27
|
-
isInner:
|
|
28
|
-
style:
|
|
29
|
-
...
|
|
66
|
+
type: s = "tab",
|
|
67
|
+
stateOption: t = [],
|
|
68
|
+
isInner: n,
|
|
69
|
+
style: a,
|
|
70
|
+
...r
|
|
30
71
|
}) => {
|
|
31
|
-
const
|
|
32
|
-
return /* @__PURE__ */
|
|
33
|
-
|
|
72
|
+
const d = t.some((b) => b.children != null);
|
|
73
|
+
return /* @__PURE__ */ o(
|
|
74
|
+
C,
|
|
34
75
|
{
|
|
35
|
-
...
|
|
76
|
+
...r,
|
|
36
77
|
"data-testid": "components-core-state-bar",
|
|
37
78
|
animated: !1,
|
|
38
|
-
className:
|
|
79
|
+
className: i(
|
|
39
80
|
"marsun-state-bar",
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
81
|
+
l["state-bar"],
|
|
82
|
+
l[`tab-${s}-control`],
|
|
83
|
+
n && l["inner-state-bar"],
|
|
84
|
+
d && l["has-children"],
|
|
44
85
|
e
|
|
45
86
|
),
|
|
46
87
|
style: {
|
|
47
|
-
"--total-count":
|
|
48
|
-
...
|
|
88
|
+
"--total-count": t.length,
|
|
89
|
+
...a
|
|
49
90
|
},
|
|
50
|
-
items:
|
|
91
|
+
items: t.map(({ tab: b, label: m, info: p, actions: u, key: f, ...h }) => ({
|
|
51
92
|
key: f,
|
|
52
|
-
label:
|
|
93
|
+
label: g(b ?? m, p, u),
|
|
53
94
|
...h
|
|
54
95
|
}))
|
|
55
96
|
}
|
|
56
97
|
);
|
|
57
98
|
};
|
|
58
99
|
export {
|
|
59
|
-
|
|
100
|
+
A as default
|
|
60
101
|
};
|
|
61
102
|
//# sourceMappingURL=StateBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StateBar.js","sources":["../../../src/components/StateBar/StateBar.tsx"],"sourcesContent":["import { Tabs } from 'antd';\nimport type { TabsProps } from 'antd';\nimport classNames from 'classnames';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { Info } from '../Icons';\nimport type { DescriptionItem } from '../Descriptions/CommonDescriptions';\nimport { TooltipInfo } from '../TooltipInfo';\nimport styles from './style.module.scss';\n\nexport type StateBarType = 'tab' | 'radio' | 'step';\n\nexport type StateBarOption = {\n key: string;\n /** 选项卡标题(优先于 label) */\n tab?: ReactNode;\n label?: ReactNode;\n /** 标题旁 Info + TooltipInfo(对齐 Modal/InteractiveBlock);为空不展示
|
|
1
|
+
{"version":3,"file":"StateBar.js","sources":["../../../src/components/StateBar/StateBar.tsx"],"sourcesContent":["import { Tabs, Tooltip } from 'antd';\nimport type { TabsProps } from 'antd';\nimport classNames from 'classnames';\nimport type { CSSProperties, MouseEvent, ReactNode } from 'react';\nimport { Info, ICON_REGISTRY, type IconName } from '../Icons';\nimport type { DescriptionItem } from '../Descriptions/CommonDescriptions';\nimport { TooltipInfo } from '../TooltipInfo';\nimport styles from './style.module.scss';\n\nexport type StateBarType = 'tab' | 'radio' | 'step';\n\n/** Tab 项旁操作(icon + 可选文案提示 + 点击) */\nexport type StateBarActionItem = {\n /** Icons 注册表名,如 `Info` / `Plus` / `Pencil` */\n iconType: IconName;\n /** Tooltip 文案;缺省不包 Tooltip */\n label?: string;\n onClick?: (e: MouseEvent<HTMLElement>) => void;\n disabled?: boolean;\n className?: string;\n /** 图标尺寸,默认 14 */\n size?: number;\n};\n\nexport type StateBarOption = {\n key: string;\n /** 选项卡标题(优先于 label) */\n tab?: ReactNode;\n label?: ReactNode;\n /** 标题旁 Info + TooltipInfo(对齐 Modal/InteractiveBlock);为空不展示 */\n info?: DescriptionItem[];\n /** 标题旁额外操作图标(可与 info 并存) */\n actions?: StateBarActionItem[];\n children?: ReactNode;\n disabled?: boolean;\n className?: string;\n style?: CSSProperties;\n};\n\nexport type StateBarProps = Omit<TabsProps, 'items' | 'type'> & {\n /** 状态项列表 */\n stateOption?: StateBarOption[];\n /** 展示样式 */\n type?: StateBarType;\n /** 底部线延展至容器全宽 */\n isInner?: boolean;\n className?: string;\n};\n\nfunction renderActionItem(action: StateBarActionItem, key: string): ReactNode {\n const Icon = ICON_REGISTRY[action.iconType];\n if (!Icon) return null;\n\n const node = (\n <span\n key={key}\n role={action.onClick ? 'button' : undefined}\n tabIndex={action.onClick && !action.disabled ? 0 : undefined}\n className={classNames(\n 'marsun-state-bar-action',\n styles['state-bar-action'],\n action.disabled && 'marsun-state-bar-action-disabled',\n action.disabled && styles['state-bar-action-disabled'],\n action.className,\n )}\n aria-label={action.label || action.iconType}\n aria-disabled={action.disabled || undefined}\n onClick={(e) => {\n e.stopPropagation();\n if (action.disabled) return;\n action.onClick?.(e);\n }}\n onKeyDown={(e) => {\n if (e.key !== 'Enter' && e.key !== ' ') return;\n e.preventDefault();\n e.stopPropagation();\n if (action.disabled) return;\n action.onClick?.(e as unknown as MouseEvent<HTMLElement>);\n }}\n >\n <Icon size={action.size ?? 14} aria-hidden />\n </span>\n );\n\n if (!action.label) return node;\n return (\n <Tooltip key={key} title={action.label}>\n {node}\n </Tooltip>\n );\n}\n\n/** 渲染 Tab 标题:文字 + 可选 Info + actions */\nfunction renderTabLabel(\n label: ReactNode,\n info?: DescriptionItem[],\n actions?: StateBarActionItem[],\n): ReactNode {\n const hasInfo = Boolean(info && info.length > 0);\n const hasActions = Boolean(actions && actions.length > 0);\n if (!hasInfo && !hasActions) return label;\n\n return (\n <span className={classNames('marsun-state-bar-tab-label', styles['state-bar-tab-label'])}>\n {label}\n {hasInfo ? (\n <TooltipInfo\n content={info!}\n placement=\"topLeft\"\n minWidth={220}\n maxWidth={360}\n overlayClassName=\"marsun-state-bar-info-tooltip\"\n >\n <span\n className={classNames('marsun-state-bar-info', styles['state-bar-info'])}\n onClick={(e) => e.stopPropagation()}\n >\n <Info size={14} aria-hidden />\n </span>\n </TooltipInfo>\n ) : null}\n {hasActions\n ? actions!.map((action, i) => renderActionItem(action, `${action.iconType}-${i}`))\n : null}\n </span>\n );\n}\n\n/**\n * 基于 antd Tabs 的状态栏(对齐 kne-union StateBar)。\n * 无 children 时仅作切换条(隐藏 content-holder);有 children 时展示面板。\n */\nconst StateBar: React.FC<StateBarProps> = ({\n className,\n type = 'tab',\n stateOption = [],\n isInner,\n style,\n ...props\n}) => {\n const hasChildren = stateOption.some((item) => item.children != null);\n\n return (\n <Tabs\n {...props}\n data-testid=\"components-core-state-bar\"\n animated={false}\n className={classNames(\n 'marsun-state-bar',\n styles['state-bar'],\n styles[`tab-${type}-control`],\n isInner && styles['inner-state-bar'],\n hasChildren && styles['has-children'],\n className,\n )}\n style={\n {\n ['--total-count' as string]: stateOption.length,\n ...style,\n } as CSSProperties\n }\n items={stateOption.map(({ tab, label, info, actions, key, ...rest }) => ({\n key,\n label: renderTabLabel(tab ?? label, info, actions),\n ...rest,\n }))}\n />\n );\n};\n\nexport default StateBar;\n"],"names":["renderActionItem","action","key","Icon","ICON_REGISTRY","node","jsx","classNames","styles","e","_a","Tooltip","renderTabLabel","label","info","actions","hasInfo","hasActions","jsxs","TooltipInfo","Info","i","StateBar","className","type","stateOption","isInner","style","props","hasChildren","item","Tabs","tab","rest"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { default as StateBar, default } from './StateBar';
|
|
2
|
-
export type { StateBarOption, StateBarProps, StateBarType } from './StateBar';
|
|
2
|
+
export type { StateBarActionItem, StateBarOption, StateBarProps, StateBarType } from './StateBar';
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
const t = {
|
|
2
|
-
"state-bar": "_state-
|
|
3
|
-
"has-children": "_has-
|
|
4
|
-
"state-bar-tab-label": "_state-bar-tab-
|
|
5
|
-
"state-bar-info": "_state-bar-
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"tab-
|
|
9
|
-
"
|
|
2
|
+
"state-bar": "_state-bar_17mf7_2",
|
|
3
|
+
"has-children": "_has-children_17mf7_8",
|
|
4
|
+
"state-bar-tab-label": "_state-bar-tab-label_17mf7_15",
|
|
5
|
+
"state-bar-info": "_state-bar-info_17mf7_21",
|
|
6
|
+
"state-bar-action": "_state-bar-action_17mf7_22",
|
|
7
|
+
"state-bar-action-disabled": "_state-bar-action-disabled_17mf7_31",
|
|
8
|
+
"tab-tab-control": "_tab-tab-control_17mf7_36",
|
|
9
|
+
"tab-radio-control": "_tab-radio-control_17mf7_51",
|
|
10
|
+
"tab-step-control": "_tab-step-control_17mf7_131",
|
|
11
|
+
"inner-state-bar": "_inner-state-bar_17mf7_240"
|
|
10
12
|
};
|
|
11
13
|
export {
|
|
12
14
|
t as default
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"style.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
|