@ioca/react 1.3.92 → 1.3.94
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/lib/cjs/components/button/confirm.js +3 -3
- package/lib/cjs/components/button/confirm.js.map +1 -1
- package/lib/cjs/components/form/form.js +1 -1
- package/lib/cjs/components/form/form.js.map +1 -1
- package/lib/cjs/components/popup/popup.js +26 -24
- package/lib/cjs/components/popup/popup.js.map +1 -1
- package/lib/cjs/components/select/select.js +8 -1
- package/lib/cjs/components/select/select.js.map +1 -1
- package/lib/css/index.css +1 -1
- package/lib/css/index.css.map +1 -1
- package/lib/es/components/button/confirm.js +3 -3
- package/lib/es/components/button/confirm.js.map +1 -1
- package/lib/es/components/form/form.js +1 -1
- package/lib/es/components/form/form.js.map +1 -1
- package/lib/es/components/popup/popup.js +26 -24
- package/lib/es/components/popup/popup.js.map +1 -1
- package/lib/es/components/select/select.js +8 -1
- package/lib/es/components/select/select.js.map +1 -1
- package/lib/index.js +38 -29
- package/lib/types/components/form/type.d.ts +2 -2
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form.js","sources":["../../../../packages/components/form/form.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport PubSub from \"pubsub-js\";\nimport { CSSProperties, useEffect, useMemo } from \"react\";\nimport Context from \"./context\";\nimport Field from \"./field\";\nimport \"./index.css\";\nimport { IForm } from \"./type\";\nimport useConfig from \"./useConfig\";\nimport useForm, { IFormInstance } from \"./useForm\";\n\nconst Form = (props: IForm) => {\n\tconst {\n\t\tform = {} as IFormInstance,\n\t\trules,\n\t\tinitialValues,\n\t\tstyle,\n\t\tclassName,\n\t\twidth,\n\t\tcolumns = 1,\n\t\tgap = \"1em\",\n\t\tlabelInline,\n\t\tlabelWidth,\n\t\tlabelRight,\n\t\tchildren,\n\t\tonKeyDown,\n\t\tonEnter,\n\t\tonChange,\n\t\t...restProps\n\t} = props;\n\n\tconst handleKeyDown = (e) => {\n\t\tonKeyDown?.(e);\n\n\t\tif (e.keyCode !== 13) return;\n\n\t\tonEnter?.(form.data, form);\n\t};\n\n\tconst gridColumns = useMemo(() => {\n\t\tif (!columns) return;\n\n\t\tif (typeof columns === \"number\")\n\t\t\treturn `minmax(0, 1fr) `.repeat(columns);\n\n\t\treturn columns;\n\t}, [columns]);\n\n\tuseEffect(() => {\n\t\tObject.assign(form, {\n\t\t\tdata: { ...initialValues },\n\t\t\trules,\n\t\t});\n\t}, [form]);\n\n\tuseEffect(() => {\n\t\tPubSub.subscribe(`${form.id}:change`, (evt, v) => {\n\t\t\tonChange?.(v.name, v.value);\n\t\t});\n\n\t\treturn () => {\n\t\t\tPubSub.unsubscribe(`${form.id}:change`);\n\t\t};\n\t}, []);\n\n\treturn (\n\t\t<Context value={form}>\n\t\t\t<form\n\t\t\t\tstyle={\n\t\t\t\t\t{\n\t\t\t\t\t\t...style,\n\t\t\t\t\t\twidth,\n\t\t\t\t\t\tgap,\n\t\t\t\t\t\tgridTemplateColumns: gridColumns as any,\n\t\t\t\t\t\t\"--label-width\": labelWidth,\n\t\t\t\t\t\t\"--label-align\": labelRight ? \"right\" : undefined,\n\t\t\t\t\t} as CSSProperties\n\t\t\t\t}\n\t\t\t\tclassName={classNames(\"i-form\", className, {\n\t\t\t\t\t\"i-form-inline\": labelInline,\n\t\t\t\t})}\n\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t{...restProps}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</form>\n\t\t</Context>\n\t);\n};\n\nForm.useForm = useForm;\nForm.Field = Field;\nForm.useConfig = useConfig;\n\nexport default Form;\n"],"names":["_jsx"],"mappings":";;;;;;;;;AAUA,MAAM,IAAI,GAAG,CAAC,KAAY,KAAI;AAC7B,IAAA,MAAM,EACL,IAAI,GAAG,EAAmB,EAC1B,KAAK,EACL,aAAa,EACb,KAAK,EACL,SAAS,EACT,KAAK,EACL,OAAO,GAAG,CAAC,EACX,GAAG,GAAG,KAAK,EACX,WAAW,EACX,UAAU,EACV,UAAU,EACV,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,SAAS,EACZ,GAAG,KAAK;AAET,IAAA,MAAM,aAAa,GAAG,CAAC,CAAC,KAAI;AAC3B,QAAA,SAAS,GAAG,CAAC,CAAC;AAEd,QAAA,IAAI,CAAC,CAAC,OAAO,KAAK,EAAE;YAAE;QAEtB,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"form.js","sources":["../../../../packages/components/form/form.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport PubSub from \"pubsub-js\";\nimport { CSSProperties, useEffect, useMemo } from \"react\";\nimport Context from \"./context\";\nimport Field from \"./field\";\nimport \"./index.css\";\nimport { IForm } from \"./type\";\nimport useConfig from \"./useConfig\";\nimport useForm, { IFormInstance } from \"./useForm\";\n\nconst Form = (props: IForm) => {\n\tconst {\n\t\tform = {} as IFormInstance,\n\t\trules,\n\t\tinitialValues,\n\t\tstyle,\n\t\tclassName,\n\t\twidth,\n\t\tcolumns = 1,\n\t\tgap = \"1em\",\n\t\tlabelInline,\n\t\tlabelWidth,\n\t\tlabelRight,\n\t\tchildren,\n\t\tonKeyDown,\n\t\tonEnter,\n\t\tonChange,\n\t\t...restProps\n\t} = props;\n\n\tconst handleKeyDown = (e) => {\n\t\tonKeyDown?.(e);\n\n\t\tif (e.keyCode !== 13) return;\n\n\t\tonEnter?.(e, form.data, form);\n\t};\n\n\tconst gridColumns = useMemo(() => {\n\t\tif (!columns) return;\n\n\t\tif (typeof columns === \"number\")\n\t\t\treturn `minmax(0, 1fr) `.repeat(columns);\n\n\t\treturn columns;\n\t}, [columns]);\n\n\tuseEffect(() => {\n\t\tObject.assign(form, {\n\t\t\tdata: { ...initialValues },\n\t\t\trules,\n\t\t});\n\t}, [form]);\n\n\tuseEffect(() => {\n\t\tPubSub.subscribe(`${form.id}:change`, (evt, v) => {\n\t\t\tonChange?.(v.name, v.value);\n\t\t});\n\n\t\treturn () => {\n\t\t\tPubSub.unsubscribe(`${form.id}:change`);\n\t\t};\n\t}, []);\n\n\treturn (\n\t\t<Context value={form}>\n\t\t\t<form\n\t\t\t\tstyle={\n\t\t\t\t\t{\n\t\t\t\t\t\t...style,\n\t\t\t\t\t\twidth,\n\t\t\t\t\t\tgap,\n\t\t\t\t\t\tgridTemplateColumns: gridColumns as any,\n\t\t\t\t\t\t\"--label-width\": labelWidth,\n\t\t\t\t\t\t\"--label-align\": labelRight ? \"right\" : undefined,\n\t\t\t\t\t} as CSSProperties\n\t\t\t\t}\n\t\t\t\tclassName={classNames(\"i-form\", className, {\n\t\t\t\t\t\"i-form-inline\": labelInline,\n\t\t\t\t})}\n\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t{...restProps}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</form>\n\t\t</Context>\n\t);\n};\n\nForm.useForm = useForm;\nForm.Field = Field;\nForm.useConfig = useConfig;\n\nexport default Form;\n"],"names":["_jsx"],"mappings":";;;;;;;;;AAUA,MAAM,IAAI,GAAG,CAAC,KAAY,KAAI;AAC7B,IAAA,MAAM,EACL,IAAI,GAAG,EAAmB,EAC1B,KAAK,EACL,aAAa,EACb,KAAK,EACL,SAAS,EACT,KAAK,EACL,OAAO,GAAG,CAAC,EACX,GAAG,GAAG,KAAK,EACX,WAAW,EACX,UAAU,EACV,UAAU,EACV,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,SAAS,EACZ,GAAG,KAAK;AAET,IAAA,MAAM,aAAa,GAAG,CAAC,CAAC,KAAI;AAC3B,QAAA,SAAS,GAAG,CAAC,CAAC;AAEd,QAAA,IAAI,CAAC,CAAC,OAAO,KAAK,EAAE;YAAE;QAEtB,OAAO,GAAG,CAAC,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;AAC9B,KAAC;AAED,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,MAAK;AAChC,QAAA,IAAI,CAAC,OAAO;YAAE;QAEd,IAAI,OAAO,OAAO,KAAK,QAAQ;AAC9B,YAAA,OAAO,iBAAiB,CAAC,MAAM,CAAC,OAAO,CAAC;AAEzC,QAAA,OAAO,OAAO;AACf,KAAC,EAAE,CAAC,OAAO,CAAC,CAAC;IAEb,SAAS,CAAC,MAAK;AACd,QAAA,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE;AACnB,YAAA,IAAI,EAAE,EAAE,GAAG,aAAa,EAAE;YAC1B,KAAK;AACL,SAAA,CAAC;AACH,KAAC,EAAE,CAAC,IAAI,CAAC,CAAC;IAEV,SAAS,CAAC,MAAK;AACd,QAAA,MAAM,CAAC,SAAS,CAAC,CAAA,EAAG,IAAI,CAAC,EAAE,CAAS,OAAA,CAAA,EAAE,CAAC,GAAG,EAAE,CAAC,KAAI;YAChD,QAAQ,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC;AAC5B,SAAC,CAAC;AAEF,QAAA,OAAO,MAAK;YACX,MAAM,CAAC,WAAW,CAAC,CAAA,EAAG,IAAI,CAAC,EAAE,CAAS,OAAA,CAAA,CAAC;AACxC,SAAC;KACD,EAAE,EAAE,CAAC;IAEN,QACCA,GAAC,CAAA,OAAO,EAAC,EAAA,KAAK,EAAE,IAAI,EAAA,QAAA,EACnBA,GACC,CAAA,MAAA,EAAA,EAAA,KAAK,EACJ;AACC,gBAAA,GAAG,KAAK;gBACR,KAAK;gBACL,GAAG;AACH,gBAAA,mBAAmB,EAAE,WAAkB;AACvC,gBAAA,eAAe,EAAE,UAAU;gBAC3B,eAAe,EAAE,UAAU,GAAG,OAAO,GAAG,SAAS;AAChC,aAAA,EAEnB,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAE,SAAS,EAAE;AAC1C,gBAAA,eAAe,EAAE,WAAW;aAC5B,CAAC,EACF,SAAS,EAAE,aAAa,EAAA,GACpB,SAAS,EAAA,QAAA,EAEZ,QAAQ,EAAA,CACH,EACE,CAAA;AAEZ;AAEA,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,IAAI,CAAC,SAAS,GAAG,SAAS;;;;"}
|
|
@@ -31,6 +31,7 @@ function Popup(props) {
|
|
|
31
31
|
return;
|
|
32
32
|
clearTimeout(timerRef.current);
|
|
33
33
|
timerRef.current = null;
|
|
34
|
+
statusRef.current = "";
|
|
34
35
|
};
|
|
35
36
|
const handleShow = () => {
|
|
36
37
|
if (disabled)
|
|
@@ -39,34 +40,35 @@ function Popup(props) {
|
|
|
39
40
|
(trigger !== "hover" || (trigger === "hover" && !touchable))) {
|
|
40
41
|
return;
|
|
41
42
|
}
|
|
42
|
-
state.show = true;
|
|
43
43
|
statusRef.current = "showing";
|
|
44
|
+
state.show = true;
|
|
44
45
|
timerRef.current = setTimeout(() => {
|
|
45
|
-
if (statusRef.current !== "showing")
|
|
46
|
+
if (statusRef.current !== "showing")
|
|
46
47
|
return;
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
48
|
+
requestAnimationFrame(() => {
|
|
49
|
+
const [left, top, { arrowX, arrowY, arrowPos }] = getPosition(triggerRef.current, contentRef.current, {
|
|
50
|
+
position,
|
|
51
|
+
gap,
|
|
52
|
+
offset,
|
|
53
|
+
align,
|
|
54
|
+
refWindow: referToWindow,
|
|
55
|
+
});
|
|
56
|
+
state.style = {
|
|
57
|
+
...state.style,
|
|
58
|
+
opacity: 1,
|
|
59
|
+
transform: "none",
|
|
60
|
+
left,
|
|
61
|
+
top,
|
|
62
|
+
};
|
|
63
|
+
state.arrowProps = {
|
|
64
|
+
left: arrowX,
|
|
65
|
+
top: arrowY,
|
|
66
|
+
pos: arrowPos,
|
|
67
|
+
};
|
|
68
|
+
onVisibleChange?.(true);
|
|
69
|
+
clearTimer();
|
|
70
|
+
statusRef.current = "";
|
|
54
71
|
});
|
|
55
|
-
state.style = {
|
|
56
|
-
...state.style,
|
|
57
|
-
opacity: 1,
|
|
58
|
-
transform: "none",
|
|
59
|
-
left,
|
|
60
|
-
top,
|
|
61
|
-
};
|
|
62
|
-
state.arrowProps = {
|
|
63
|
-
left: arrowX,
|
|
64
|
-
top: arrowY,
|
|
65
|
-
pos: arrowPos,
|
|
66
|
-
};
|
|
67
|
-
onVisibleChange?.(true);
|
|
68
|
-
clearTimer();
|
|
69
|
-
statusRef.current = "";
|
|
70
72
|
}, showDelay);
|
|
71
73
|
};
|
|
72
74
|
const handleHide = () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popup.js","sources":["../../../../packages/components/popup/popup.tsx"],"sourcesContent":["import { useCreation, useReactive } from \"ahooks\";\nimport {\n\tCSSProperties,\n\tChildren,\n\tMouseEvent,\n\tcloneElement,\n\tisValidElement,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseMemo,\n\tuseRef,\n} from \"react\";\nimport { useMouseUp, useResizeObserver } from \"../../js/hooks\";\nimport { getPointPosition, getPosition } from \"../../js/utils\";\nimport Content from \"./content\";\nimport \"./index.css\";\nimport { IPopup } from \"./type\";\n\nexport default function Popup(props: IPopup) {\n\tconst {\n\t\tvisible = false,\n\t\tcontent,\n\t\ttrigger = \"hover\",\n\t\tgap = 12,\n\t\toffset = 8,\n\t\tfixed,\n\t\tposition = \"top\",\n\t\tshowDelay = 16,\n\t\thideDelay = 12,\n\t\ttouchable,\n\t\tarrow = true,\n\t\talign,\n\t\tfitSize,\n\t\twatchResize,\n\t\tclickOutside = true,\n\t\tdisabled,\n\t\treferToWindow,\n\t\tstyle,\n\t\tclassName,\n\t\tgetContainer,\n\t\tchildren,\n\t\tonVisibleChange,\n\t} = props;\n\n\tconst triggerRef = useRef<HTMLElement>(null);\n\tconst contentRef = useRef<HTMLDivElement>(null);\n\tconst timerRef = useRef<any>(null);\n\tconst statusRef = useRef<string>(\"\");\n\tconst state = useReactive<{\n\t\tshow: boolean;\n\t\tstyle: CSSProperties;\n\t\tarrowProps: Record<string, any>;\n\t}>({\n\t\tshow: false,\n\t\tstyle: { position: fixed ? \"fixed\" : \"absolute\" },\n\t\tarrowProps: {},\n\t});\n\n\tuseMouseUp((e) => {\n\t\tif (!triggerRef.current || !contentRef.current || !clickOutside) return;\n\n\t\tconst tar = e.target as HTMLElement;\n\t\tconst isContain =\n\t\t\ttriggerRef.current.contains(tar) ||\n\t\t\tcontentRef.current.contains(tar);\n\n\t\tif (!state.show || isContain) return;\n\n\t\thandleToggle(false);\n\t});\n\n\tconst clearTimer = () => {\n\t\tif (!timerRef.current) return;\n\t\tclearTimeout(timerRef.current);\n\t\ttimerRef.current = null;\n\t};\n\n\tconst handleShow = () => {\n\t\tif (disabled) return;\n\t\tif (\n\t\t\tstate.show &&\n\t\t\t(trigger !== \"hover\" || (trigger === \"hover\" && !touchable))\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tstate.show = true;\n\t\tstatusRef.current = \"showing\";\n\t\ttimerRef.current = setTimeout(() => {\n\t\t\tif (statusRef.current !== \"showing\") {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst [left, top, { arrowX, arrowY, arrowPos }] = getPosition(\n\t\t\t\ttriggerRef.current,\n\t\t\t\tcontentRef.current,\n\t\t\t\t{\n\t\t\t\t\tposition,\n\t\t\t\t\tgap,\n\t\t\t\t\toffset,\n\t\t\t\t\talign,\n\t\t\t\t\trefWindow: referToWindow,\n\t\t\t\t}\n\t\t\t);\n\n\t\t\tstate.style = {\n\t\t\t\t...state.style,\n\t\t\t\topacity: 1,\n\t\t\t\ttransform: \"none\",\n\t\t\t\tleft,\n\t\t\t\ttop,\n\t\t\t};\n\t\t\tstate.arrowProps = {\n\t\t\t\tleft: arrowX,\n\t\t\t\ttop: arrowY,\n\t\t\t\tpos: arrowPos,\n\t\t\t};\n\t\t\tonVisibleChange?.(true);\n\t\t\tclearTimer();\n\t\t\tstatusRef.current = \"\";\n\t\t}, showDelay);\n\t};\n\n\tconst handleHide = () => {\n\t\tif (!state.show) return;\n\n\t\tstatusRef.current = \"hiding\";\n\t\ttimerRef.current = setTimeout(() => {\n\t\t\tif (statusRef.current !== \"hiding\") {\n\t\t\t\tclearTimer();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tstate.style = {\n\t\t\t\t...state.style,\n\t\t\t\topacity: 0,\n\t\t\t\ttransform: \"translate(0, 2px)\",\n\t\t\t};\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tstate.show = false;\n\t\t\t\tclearTimer();\n\t\t\t\tonVisibleChange?.(false);\n\t\t\t\tstatusRef.current = \"\";\n\t\t\t}, 160);\n\t\t}, hideDelay);\n\t};\n\n\tconst handleToggle = (action?: boolean) => {\n\t\tif (action !== undefined) {\n\t\t\taction ? handleShow() : handleHide();\n\t\t\treturn;\n\t\t}\n\n\t\tstate.show ? handleHide() : handleShow();\n\t};\n\tconst eventMaps = useCreation(\n\t\t() => ({\n\t\t\tclick: {\n\t\t\t\tonClick: () => handleToggle(true),\n\t\t\t},\n\t\t\thover: {\n\t\t\t\tonMouseEnter: () => handleToggle(true),\n\t\t\t\tonMouseLeave: () => handleToggle(false),\n\t\t\t},\n\t\t\tfocus: {\n\t\t\t\tonFocus: () => handleToggle(true),\n\t\t\t\tonBlur: () => handleToggle(false),\n\t\t\t},\n\t\t\tcontextmenu: {\n\t\t\t\tonContextMenu: (e: MouseEvent) => {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\te.stopPropagation();\n\n\t\t\t\t\tif (state.show) {\n\t\t\t\t\t\tconst [left, top] = getPointPosition(\n\t\t\t\t\t\t\te,\n\t\t\t\t\t\t\tcontentRef.current as HTMLElement\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tstate.style = {\n\t\t\t\t\t\t\t...state.style,\n\t\t\t\t\t\t\tleft,\n\t\t\t\t\t\t\ttop,\n\t\t\t\t\t\t};\n\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tstate.show = true;\n\n\t\t\t\t\ttimerRef.current = setTimeout(() => {\n\t\t\t\t\t\tconst [left, top] = getPointPosition(\n\t\t\t\t\t\t\te,\n\t\t\t\t\t\t\tcontentRef.current as HTMLElement\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tstate.style = {\n\t\t\t\t\t\t\t...state.style,\n\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\ttransform: \"none\",\n\t\t\t\t\t\t\tleft,\n\t\t\t\t\t\t\ttop,\n\t\t\t\t\t\t};\n\n\t\t\t\t\t\tclearTimer();\n\t\t\t\t\t\tonVisibleChange?.(true);\n\t\t\t\t\t}, showDelay);\n\t\t\t\t},\n\t\t\t},\n\t\t\tnone: {},\n\t\t}),\n\t\t[]\n\t);\n\n\tconst contentTouch = useMemo(() => {\n\t\tif (!touchable) return {};\n\t\tconst events: { [key: string]: () => void } = {};\n\n\t\tif (trigger === \"hover\") {\n\t\t\tevents[\"onMouseEnter\"] = () => {\n\t\t\t\tclearTimer();\n\t\t\t};\n\t\t\tevents[\"onMouseLeave\"] = () => handleToggle(false);\n\t\t}\n\n\t\treturn events;\n\t}, [touchable, trigger]);\n\n\tconst computePosition = () => {\n\t\tif (!state.show) return;\n\n\t\tconst [left, top, { arrowX, arrowY, arrowPos }] = getPosition(\n\t\t\ttriggerRef.current,\n\t\t\tcontentRef.current,\n\t\t\t{\n\t\t\t\tposition,\n\t\t\t\tgap,\n\t\t\t\toffset,\n\t\t\t\talign,\n\t\t\t\trefWindow: referToWindow,\n\t\t\t}\n\t\t);\n\n\t\tObject.assign(state, {\n\t\t\tstyle: { ...state.style, left, top },\n\t\t\tarrowProps: { left: arrowX, top: arrowY, pos: arrowPos },\n\t\t});\n\t};\n\n\tconst { observe, unobserve, disconnect } = useResizeObserver();\n\tuseEffect(() => {\n\t\tif (trigger === \"contextmenu\" || !observe) return;\n\n\t\ttriggerRef.current && observe(triggerRef.current, computePosition);\n\n\t\tif (!watchResize || !contentRef.current) return;\n\n\t\tobserve(contentRef.current, computePosition);\n\n\t\treturn () => {\n\t\t\tif (!watchResize || !contentRef.current) return;\n\n\t\t\tunobserve(contentRef.current);\n\t\t\ttriggerRef.current && unobserve(triggerRef.current);\n\t\t\tdisconnect();\n\t\t};\n\t}, [watchResize, contentRef.current, triggerRef.current]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!fitSize || !state.show) return;\n\n\t\tconst vertical = [\"top\", \"bottom\"].includes(position);\n\t\tconst size =\n\t\t\ttriggerRef.current?.[vertical ? \"offsetWidth\" : \"offsetHeight\"];\n\t\tstate.style = { ...state.style, [vertical ? \"width\" : \"height\"]: size };\n\t}, [state.show, fitSize]);\n\n\tuseLayoutEffect(() => {\n\t\thandleToggle(visible);\n\t}, [visible]);\n\n\treturn (\n\t\t<>\n\t\t\t{Children.map(children, (child) => {\n\t\t\t\tif (!isValidElement(child)) return;\n\n\t\t\t\tconst { className, ...restProps } = child.props as any;\n\t\t\t\tObject.keys(eventMaps[trigger]).map((evt) => {\n\t\t\t\t\tif (!restProps[evt]) return;\n\t\t\t\t\tconst fn = eventMaps[trigger][evt];\n\n\t\t\t\t\teventMaps[trigger][evt] = (e) => {\n\t\t\t\t\t\tfn();\n\t\t\t\t\t\trestProps[evt](e);\n\t\t\t\t\t};\n\t\t\t\t});\n\n\t\t\t\treturn cloneElement(child, {\n\t\t\t\t\tref: triggerRef,\n\t\t\t\t\tclassName,\n\t\t\t\t\t...restProps,\n\t\t\t\t\t...eventMaps[trigger],\n\t\t\t\t});\n\t\t\t})}\n\n\t\t\t{state.show && (\n\t\t\t\t<Content\n\t\t\t\t\tref={contentRef}\n\t\t\t\t\tarrow={arrow && trigger !== \"contextmenu\"}\n\t\t\t\t\tstyle={{ ...style, ...state.style }}\n\t\t\t\t\tarrowProps={state.arrowProps}\n\t\t\t\t\tclassName={className}\n\t\t\t\t\t{...contentTouch}\n\t\t\t\t\ttrigger={triggerRef.current as HTMLElement}\n\t\t\t\t\tgetContainer={getContainer}\n\t\t\t\t>\n\t\t\t\t\t{content}\n\t\t\t\t</Content>\n\t\t\t)}\n\t\t</>\n\t);\n}\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"popup.js","sources":["../../../../packages/components/popup/popup.tsx"],"sourcesContent":["import { useCreation, useReactive } from \"ahooks\";\nimport {\n\tCSSProperties,\n\tChildren,\n\tMouseEvent,\n\tcloneElement,\n\tisValidElement,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseMemo,\n\tuseRef,\n} from \"react\";\nimport { useMouseUp, useResizeObserver } from \"../../js/hooks\";\nimport { getPointPosition, getPosition } from \"../../js/utils\";\nimport Content from \"./content\";\nimport \"./index.css\";\nimport { IPopup } from \"./type\";\n\nexport default function Popup(props: IPopup) {\n\tconst {\n\t\tvisible = false,\n\t\tcontent,\n\t\ttrigger = \"hover\",\n\t\tgap = 12,\n\t\toffset = 8,\n\t\tfixed,\n\t\tposition = \"top\",\n\t\tshowDelay = 16,\n\t\thideDelay = 12,\n\t\ttouchable,\n\t\tarrow = true,\n\t\talign,\n\t\tfitSize,\n\t\twatchResize,\n\t\tclickOutside = true,\n\t\tdisabled,\n\t\treferToWindow,\n\t\tstyle,\n\t\tclassName,\n\t\tgetContainer,\n\t\tchildren,\n\t\tonVisibleChange,\n\t} = props;\n\n\tconst triggerRef = useRef<HTMLElement>(null);\n\tconst contentRef = useRef<HTMLDivElement>(null);\n\tconst timerRef = useRef<any>(null);\n\tconst statusRef = useRef<string>(\"\");\n\tconst state = useReactive<{\n\t\tshow: boolean;\n\t\tstyle: CSSProperties;\n\t\tarrowProps: Record<string, any>;\n\t}>({\n\t\tshow: false,\n\t\tstyle: { position: fixed ? \"fixed\" : \"absolute\" },\n\t\tarrowProps: {},\n\t});\n\n\tuseMouseUp((e) => {\n\t\tif (!triggerRef.current || !contentRef.current || !clickOutside) return;\n\n\t\tconst tar = e.target as HTMLElement;\n\t\tconst isContain =\n\t\t\ttriggerRef.current.contains(tar) ||\n\t\t\tcontentRef.current.contains(tar);\n\n\t\tif (!state.show || isContain) return;\n\n\t\thandleToggle(false);\n\t});\n\n\tconst clearTimer = () => {\n\t\tif (!timerRef.current) return;\n\t\tclearTimeout(timerRef.current);\n\t\ttimerRef.current = null;\n\t\tstatusRef.current = \"\";\n\t};\n\n\tconst handleShow = () => {\n\t\tif (disabled) return;\n\t\tif (\n\t\t\tstate.show &&\n\t\t\t(trigger !== \"hover\" || (trigger === \"hover\" && !touchable))\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tstatusRef.current = \"showing\";\n\t\tstate.show = true;\n\n\t\ttimerRef.current = setTimeout(() => {\n\t\t\tif (statusRef.current !== \"showing\") return;\n\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tconst [left, top, { arrowX, arrowY, arrowPos }] = getPosition(\n\t\t\t\t\ttriggerRef.current,\n\t\t\t\t\tcontentRef.current,\n\t\t\t\t\t{\n\t\t\t\t\t\tposition,\n\t\t\t\t\t\tgap,\n\t\t\t\t\t\toffset,\n\t\t\t\t\t\talign,\n\t\t\t\t\t\trefWindow: referToWindow,\n\t\t\t\t\t}\n\t\t\t\t);\n\n\t\t\t\tstate.style = {\n\t\t\t\t\t...state.style,\n\t\t\t\t\topacity: 1,\n\t\t\t\t\ttransform: \"none\",\n\t\t\t\t\tleft,\n\t\t\t\t\ttop,\n\t\t\t\t};\n\t\t\t\tstate.arrowProps = {\n\t\t\t\t\tleft: arrowX,\n\t\t\t\t\ttop: arrowY,\n\t\t\t\t\tpos: arrowPos,\n\t\t\t\t};\n\t\t\t\tonVisibleChange?.(true);\n\t\t\t\tclearTimer();\n\t\t\t\tstatusRef.current = \"\";\n\t\t\t});\n\t\t}, showDelay);\n\t};\n\n\tconst handleHide = () => {\n\t\tif (!state.show) return;\n\n\t\tstatusRef.current = \"hiding\";\n\t\ttimerRef.current = setTimeout(() => {\n\t\t\tif (statusRef.current !== \"hiding\") {\n\t\t\t\tclearTimer();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tstate.style = {\n\t\t\t\t...state.style,\n\t\t\t\topacity: 0,\n\t\t\t\ttransform: \"translate(0, 2px)\",\n\t\t\t};\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tstate.show = false;\n\t\t\t\tclearTimer();\n\t\t\t\tonVisibleChange?.(false);\n\t\t\t\tstatusRef.current = \"\";\n\t\t\t}, 160);\n\t\t}, hideDelay);\n\t};\n\n\tconst handleToggle = (action?: boolean) => {\n\t\tif (action !== undefined) {\n\t\t\taction ? handleShow() : handleHide();\n\t\t\treturn;\n\t\t}\n\n\t\tstate.show ? handleHide() : handleShow();\n\t};\n\tconst eventMaps = useCreation(\n\t\t() => ({\n\t\t\tclick: {\n\t\t\t\tonClick: () => handleToggle(true),\n\t\t\t},\n\t\t\thover: {\n\t\t\t\tonMouseEnter: () => handleToggle(true),\n\t\t\t\tonMouseLeave: () => handleToggle(false),\n\t\t\t},\n\t\t\tfocus: {\n\t\t\t\tonFocus: () => handleToggle(true),\n\t\t\t\tonBlur: () => handleToggle(false),\n\t\t\t},\n\t\t\tcontextmenu: {\n\t\t\t\tonContextMenu: (e: MouseEvent) => {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\te.stopPropagation();\n\n\t\t\t\t\tif (state.show) {\n\t\t\t\t\t\tconst [left, top] = getPointPosition(\n\t\t\t\t\t\t\te,\n\t\t\t\t\t\t\tcontentRef.current as HTMLElement\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tstate.style = {\n\t\t\t\t\t\t\t...state.style,\n\t\t\t\t\t\t\tleft,\n\t\t\t\t\t\t\ttop,\n\t\t\t\t\t\t};\n\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tstate.show = true;\n\n\t\t\t\t\ttimerRef.current = setTimeout(() => {\n\t\t\t\t\t\tconst [left, top] = getPointPosition(\n\t\t\t\t\t\t\te,\n\t\t\t\t\t\t\tcontentRef.current as HTMLElement\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tstate.style = {\n\t\t\t\t\t\t\t...state.style,\n\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\ttransform: \"none\",\n\t\t\t\t\t\t\tleft,\n\t\t\t\t\t\t\ttop,\n\t\t\t\t\t\t};\n\n\t\t\t\t\t\tclearTimer();\n\t\t\t\t\t\tonVisibleChange?.(true);\n\t\t\t\t\t}, showDelay);\n\t\t\t\t},\n\t\t\t},\n\t\t\tnone: {},\n\t\t}),\n\t\t[]\n\t);\n\n\tconst contentTouch = useMemo(() => {\n\t\tif (!touchable) return {};\n\t\tconst events: { [key: string]: () => void } = {};\n\n\t\tif (trigger === \"hover\") {\n\t\t\tevents[\"onMouseEnter\"] = () => {\n\t\t\t\tclearTimer();\n\t\t\t};\n\t\t\tevents[\"onMouseLeave\"] = () => handleToggle(false);\n\t\t}\n\n\t\treturn events;\n\t}, [touchable, trigger]);\n\n\tconst computePosition = () => {\n\t\tif (!state.show) return;\n\n\t\tconst [left, top, { arrowX, arrowY, arrowPos }] = getPosition(\n\t\t\ttriggerRef.current,\n\t\t\tcontentRef.current,\n\t\t\t{\n\t\t\t\tposition,\n\t\t\t\tgap,\n\t\t\t\toffset,\n\t\t\t\talign,\n\t\t\t\trefWindow: referToWindow,\n\t\t\t}\n\t\t);\n\n\t\tObject.assign(state, {\n\t\t\tstyle: { ...state.style, left, top },\n\t\t\tarrowProps: { left: arrowX, top: arrowY, pos: arrowPos },\n\t\t});\n\t};\n\n\tconst { observe, unobserve, disconnect } = useResizeObserver();\n\tuseEffect(() => {\n\t\tif (trigger === \"contextmenu\" || !observe) return;\n\n\t\ttriggerRef.current && observe(triggerRef.current, computePosition);\n\n\t\tif (!watchResize || !contentRef.current) return;\n\n\t\tobserve(contentRef.current, computePosition);\n\n\t\treturn () => {\n\t\t\tif (!watchResize || !contentRef.current) return;\n\n\t\t\tunobserve(contentRef.current);\n\t\t\ttriggerRef.current && unobserve(triggerRef.current);\n\t\t\tdisconnect();\n\t\t};\n\t}, [watchResize, contentRef.current, triggerRef.current]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!fitSize || !state.show) return;\n\n\t\tconst vertical = [\"top\", \"bottom\"].includes(position);\n\t\tconst size =\n\t\t\ttriggerRef.current?.[vertical ? \"offsetWidth\" : \"offsetHeight\"];\n\t\tstate.style = { ...state.style, [vertical ? \"width\" : \"height\"]: size };\n\t}, [state.show, fitSize]);\n\n\tuseLayoutEffect(() => {\n\t\thandleToggle(visible);\n\t}, [visible]);\n\n\treturn (\n\t\t<>\n\t\t\t{Children.map(children, (child) => {\n\t\t\t\tif (!isValidElement(child)) return;\n\n\t\t\t\tconst { className, ...restProps } = child.props as any;\n\t\t\t\tObject.keys(eventMaps[trigger]).map((evt) => {\n\t\t\t\t\tif (!restProps[evt]) return;\n\t\t\t\t\tconst fn = eventMaps[trigger][evt];\n\n\t\t\t\t\teventMaps[trigger][evt] = (e) => {\n\t\t\t\t\t\tfn();\n\t\t\t\t\t\trestProps[evt](e);\n\t\t\t\t\t};\n\t\t\t\t});\n\n\t\t\t\treturn cloneElement(child, {\n\t\t\t\t\tref: triggerRef,\n\t\t\t\t\tclassName,\n\t\t\t\t\t...restProps,\n\t\t\t\t\t...eventMaps[trigger],\n\t\t\t\t});\n\t\t\t})}\n\n\t\t\t{state.show && (\n\t\t\t\t<Content\n\t\t\t\t\tref={contentRef}\n\t\t\t\t\tarrow={arrow && trigger !== \"contextmenu\"}\n\t\t\t\t\tstyle={{ ...style, ...state.style }}\n\t\t\t\t\tarrowProps={state.arrowProps}\n\t\t\t\t\tclassName={className}\n\t\t\t\t\t{...contentTouch}\n\t\t\t\t\ttrigger={triggerRef.current as HTMLElement}\n\t\t\t\t\tgetContainer={getContainer}\n\t\t\t\t>\n\t\t\t\t\t{content}\n\t\t\t\t</Content>\n\t\t\t)}\n\t\t</>\n\t);\n}\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
|
|
@@ -32,6 +32,13 @@ const Select = (props) => {
|
|
|
32
32
|
state.value = v;
|
|
33
33
|
onChange?.(v);
|
|
34
34
|
};
|
|
35
|
+
const displayLabel = useMemo(() => {
|
|
36
|
+
if (multiple) {
|
|
37
|
+
return "";
|
|
38
|
+
}
|
|
39
|
+
const option = formattedOptions.find((opt) => opt.value === state.value);
|
|
40
|
+
return option ? option.label : state.value;
|
|
41
|
+
}, [state.value, formattedOptions]);
|
|
35
42
|
const handleSelect = (value, option) => {
|
|
36
43
|
onSelect?.(value, option);
|
|
37
44
|
if (multiple) {
|
|
@@ -86,7 +93,7 @@ const Select = (props) => {
|
|
|
86
93
|
multiple,
|
|
87
94
|
maxDisplay,
|
|
88
95
|
onSelect: handleSelect,
|
|
89
|
-
}) })) : (jsx("input", { className: 'i-input i-select', placeholder: placeholder, readOnly: true }))) : null, !multiple && (jsx("input", { value: active ? state.filterValue :
|
|
96
|
+
}) })) : (jsx("input", { className: 'i-input i-select', placeholder: placeholder, readOnly: true }))) : null, !multiple && (jsx("input", { value: active ? state.filterValue : displayLabel, className: 'i-input i-select', placeholder: displayLabel || placeholder, onChange: handleInputChange, readOnly: !filter })), jsx(Helpericon, { active: !hideArrow, icon: clearable ? undefined : jsx(UnfoldMoreRound, {}), onClick: handleHelperClick }), append] }) }), text && jsx("span", { className: 'i-input-message', children: text })] }));
|
|
90
97
|
};
|
|
91
98
|
|
|
92
99
|
export { Select as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","sources":["../../../../packages/components/select/select.tsx"],"sourcesContent":["import { UnfoldMoreRound } from \"@ricons/material\";\nimport { useReactive } from \"ahooks\";\nimport classNames from \"classnames\";\nimport { debounce } from \"radash\";\nimport { ChangeEvent, useEffect, useMemo, useState } from \"react\";\nimport \"../../css/input.css\";\nimport { formatOption } from \"../../js/utils\";\nimport { TOption } from \"../../type\";\nimport Popup from \"../popup\";\nimport Helpericon from \"../utils/helpericon\";\nimport \"./index.css\";\nimport { Options, displayValue } from \"./options\";\nimport { ISelect } from \"./type\";\n\nconst Select = (props: ISelect) => {\n\tconst {\n\t\tref,\n\t\ttype = \"text\",\n\t\tname,\n\t\tlabel,\n\t\tvalue = \"\",\n\t\tplaceholder,\n\t\toptions = [],\n\t\tmultiple,\n\t\tprepend,\n\t\tappend,\n\t\tlabelInline,\n\t\tstyle,\n\t\tclassName,\n\t\tmessage,\n\t\tstatus = \"normal\",\n\t\thideClear,\n\t\thideArrow,\n\t\tmaxDisplay,\n\t\tborder,\n\t\tfilter,\n\t\ttip,\n\t\tfilterPlaceholder = \"...\",\n\t\tpopupProps,\n\t\tonSelect,\n\t\tonChange,\n\t\t...restProps\n\t} = props;\n\n\tconst state = useReactive({\n\t\tinputValue: \"\",\n\t\tfilterValue: \"\",\n\t\tvalue,\n\t\tloading: false,\n\t});\n\n\tconst [active, setActive] = useState<boolean>(false);\n\n\tconst formattedOptions = useMemo(() => formatOption(options), [options]);\n\n\tconst filterOptions = useMemo(() => {\n\t\tconst { filterValue: fv } = state;\n\t\tif (!fv || !filter) return formattedOptions;\n\n\t\tconst filterFn =\n\t\t\ttypeof filter === \"function\"\n\t\t\t\t? filter\n\t\t\t\t: (opt) => opt.value.includes(fv) || opt.label.includes(fv);\n\n\t\treturn formattedOptions.filter(filterFn);\n\t}, [formattedOptions, filter, state.filterValue]);\n\n\tconst changeValue = (v: any) => {\n\t\tstate.value = v;\n\t\tonChange?.(v);\n\t};\n\n\tconst handleSelect = (value: any, option?: TOption) => {\n\t\tonSelect?.(value, option);\n\n\t\tif (multiple) {\n\t\t\tconst values = [...(state.value as any[])];\n\t\t\tconst i = values.findIndex((v) => v === value);\n\n\t\t\ti > -1 ? values.splice(i, 1) : values.push(value);\n\t\t\tchangeValue(values as any);\n\n\t\t\treturn;\n\t\t}\n\n\t\tsetActive(false);\n\t\tchangeValue(value);\n\t};\n\n\tconst handleVisibleChange = (visible: boolean) => {\n\t\tsetActive(visible);\n\n\t\tif (!filter) return;\n\n\t\tstate.filterValue = \"\";\n\t};\n\n\tconst handleHelperClick = (e) => {\n\t\te.stopPropagation();\n\t\tsetActive(true);\n\t\tif (!active) return;\n\n\t\tchangeValue(multiple ? [] : \"\");\n\t};\n\n\tconst handleFilterChange = debounce(\n\t\t{ delay: 400 },\n\t\t(e: ChangeEvent<HTMLInputElement>) => {\n\t\t\tconst v = e.target.value;\n\t\t\tstate.filterValue = v;\n\t\t}\n\t);\n\n\tconst handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n\t\tstate.filterValue = e.target.value;\n\t};\n\n\tuseEffect(() => {\n\t\tstate.value = value;\n\t}, [value]);\n\n\tconst hasValue = multiple\n\t\t? (state.value as any[]).length > 0\n\t\t: !!state.value;\n\tconst clearable = !hideClear && active && hasValue;\n\tconst text = message ?? tip;\n\n\treturn (\n\t\t<label\n\t\t\tclassName={classNames(\"i-input-label\", className, {\n\t\t\t\t\"i-input-inline\": labelInline,\n\t\t\t})}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{label && <span className='i-input-label-text'>{label}</span>}\n\n\t\t\t<Popup\n\t\t\t\tposition='bottom'\n\t\t\t\tarrow={false}\n\t\t\t\tfitSize\n\t\t\t\t{...popupProps}\n\t\t\t\tvisible={active}\n\t\t\t\ttrigger='none'\n\t\t\t\tonVisibleChange={handleVisibleChange}\n\t\t\t\tcontent={\n\t\t\t\t\t<Options\n\t\t\t\t\t\toptions={filterOptions}\n\t\t\t\t\t\tvalue={state.value}\n\t\t\t\t\t\tmultiple={multiple}\n\t\t\t\t\t\tfilter={!!filter}\n\t\t\t\t\t\tfilterPlaceholder={filterPlaceholder}\n\t\t\t\t\t\tonSelect={handleSelect}\n\t\t\t\t\t\tonFilter={handleFilterChange}\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={classNames(\"i-input-item\", {\n\t\t\t\t\t\t[`i-input-${status}`]: status !== \"normal\",\n\t\t\t\t\t\t\"i-input-borderless\": !border,\n\t\t\t\t\t\t\"i-input-focus\": active,\n\t\t\t\t\t})}\n\t\t\t\t\tonClick={() => setActive(true)}\n\t\t\t\t>\n\t\t\t\t\t{prepend}\n\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\ttype='hidden'\n\t\t\t\t\t\tvalue={state.value}\n\t\t\t\t\t\t{...restProps}\n\t\t\t\t\t/>\n\n\t\t\t\t\t{multiple ? (\n\t\t\t\t\t\thasValue ? (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={classNames(\"i-input i-select\", {\n\t\t\t\t\t\t\t\t\t\"i-select-multiple\": multiple,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{displayValue({\n\t\t\t\t\t\t\t\t\toptions: formattedOptions,\n\t\t\t\t\t\t\t\t\tvalue: state.value,\n\t\t\t\t\t\t\t\t\tmultiple,\n\t\t\t\t\t\t\t\t\tmaxDisplay,\n\t\t\t\t\t\t\t\t\tonSelect: handleSelect,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclassName='i-input i-select'\n\t\t\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\t\t\treadOnly\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : null}\n\n\t\t\t\t\t{!multiple && (\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tvalue={active ? state.filterValue : state.value}\n\t\t\t\t\t\t\tclassName='i-input i-select'\n\t\t\t\t\t\t\tplaceholder={state.value || placeholder}\n\t\t\t\t\t\t\tonChange={handleInputChange}\n\t\t\t\t\t\t\treadOnly={!filter}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<Helpericon\n\t\t\t\t\t\tactive={!hideArrow}\n\t\t\t\t\t\ticon={clearable ? undefined : <UnfoldMoreRound />}\n\t\t\t\t\t\tonClick={handleHelperClick}\n\t\t\t\t\t/>\n\n\t\t\t\t\t{append}\n\t\t\t\t</div>\n\t\t\t</Popup>\n\n\t\t\t{text && <span className='i-input-message'>{text}</span>}\n\t\t</label>\n\t);\n};\n\nexport default Select;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"select.js","sources":["../../../../packages/components/select/select.tsx"],"sourcesContent":["import { UnfoldMoreRound } from \"@ricons/material\";\nimport { useReactive } from \"ahooks\";\nimport classNames from \"classnames\";\nimport { debounce } from \"radash\";\nimport { ChangeEvent, useEffect, useMemo, useState } from \"react\";\nimport \"../../css/input.css\";\nimport { formatOption } from \"../../js/utils\";\nimport { TOption } from \"../../type\";\nimport Popup from \"../popup\";\nimport Helpericon from \"../utils/helpericon\";\nimport \"./index.css\";\nimport { Options, displayValue } from \"./options\";\nimport { ISelect } from \"./type\";\n\nconst Select = (props: ISelect) => {\n\tconst {\n\t\tref,\n\t\ttype = \"text\",\n\t\tname,\n\t\tlabel,\n\t\tvalue = \"\",\n\t\tplaceholder,\n\t\toptions = [],\n\t\tmultiple,\n\t\tprepend,\n\t\tappend,\n\t\tlabelInline,\n\t\tstyle,\n\t\tclassName,\n\t\tmessage,\n\t\tstatus = \"normal\",\n\t\thideClear,\n\t\thideArrow,\n\t\tmaxDisplay,\n\t\tborder,\n\t\tfilter,\n\t\ttip,\n\t\tfilterPlaceholder = \"...\",\n\t\tpopupProps,\n\t\tonSelect,\n\t\tonChange,\n\t\t...restProps\n\t} = props;\n\n\tconst state = useReactive({\n\t\tinputValue: \"\",\n\t\tfilterValue: \"\",\n\t\tvalue,\n\t\tloading: false,\n\t});\n\n\tconst [active, setActive] = useState<boolean>(false);\n\n\tconst formattedOptions = useMemo(() => formatOption(options), [options]);\n\n\tconst filterOptions = useMemo(() => {\n\t\tconst { filterValue: fv } = state;\n\t\tif (!fv || !filter) return formattedOptions;\n\n\t\tconst filterFn =\n\t\t\ttypeof filter === \"function\"\n\t\t\t\t? filter\n\t\t\t\t: (opt) => opt.value.includes(fv) || opt.label.includes(fv);\n\n\t\treturn formattedOptions.filter(filterFn);\n\t}, [formattedOptions, filter, state.filterValue]);\n\n\tconst changeValue = (v: any) => {\n\t\tstate.value = v;\n\t\tonChange?.(v);\n\t};\n\n\tconst displayLabel = useMemo(() => {\n\t\tif (multiple) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\tconst option = formattedOptions.find(\n\t\t\t(opt) => opt.value === state.value\n\t\t);\n\t\treturn option ? option.label : state.value;\n\t}, [state.value, formattedOptions]);\n\n\tconst handleSelect = (value: any, option?: TOption) => {\n\t\tonSelect?.(value, option);\n\n\t\tif (multiple) {\n\t\t\tconst values = [...(state.value as any[])];\n\t\t\tconst i = values.findIndex((v) => v === value);\n\n\t\t\ti > -1 ? values.splice(i, 1) : values.push(value);\n\t\t\tchangeValue(values as any);\n\n\t\t\treturn;\n\t\t}\n\n\t\tsetActive(false);\n\t\tchangeValue(value);\n\t};\n\n\tconst handleVisibleChange = (visible: boolean) => {\n\t\tsetActive(visible);\n\n\t\tif (!filter) return;\n\n\t\tstate.filterValue = \"\";\n\t};\n\n\tconst handleHelperClick = (e) => {\n\t\te.stopPropagation();\n\t\tsetActive(true);\n\t\tif (!active) return;\n\n\t\tchangeValue(multiple ? [] : \"\");\n\t};\n\n\tconst handleFilterChange = debounce(\n\t\t{ delay: 400 },\n\t\t(e: ChangeEvent<HTMLInputElement>) => {\n\t\t\tconst v = e.target.value;\n\t\t\tstate.filterValue = v;\n\t\t}\n\t);\n\n\tconst handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n\t\tstate.filterValue = e.target.value;\n\t};\n\n\tuseEffect(() => {\n\t\tstate.value = value;\n\t}, [value]);\n\n\tconst hasValue = multiple\n\t\t? (state.value as any[]).length > 0\n\t\t: !!state.value;\n\tconst clearable = !hideClear && active && hasValue;\n\tconst text = message ?? tip;\n\n\treturn (\n\t\t<label\n\t\t\tclassName={classNames(\"i-input-label\", className, {\n\t\t\t\t\"i-input-inline\": labelInline,\n\t\t\t})}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{label && <span className='i-input-label-text'>{label}</span>}\n\n\t\t\t<Popup\n\t\t\t\tposition='bottom'\n\t\t\t\tarrow={false}\n\t\t\t\tfitSize\n\t\t\t\t{...popupProps}\n\t\t\t\tvisible={active}\n\t\t\t\ttrigger='none'\n\t\t\t\tonVisibleChange={handleVisibleChange}\n\t\t\t\tcontent={\n\t\t\t\t\t<Options\n\t\t\t\t\t\toptions={filterOptions}\n\t\t\t\t\t\tvalue={state.value}\n\t\t\t\t\t\tmultiple={multiple}\n\t\t\t\t\t\tfilter={!!filter}\n\t\t\t\t\t\tfilterPlaceholder={filterPlaceholder}\n\t\t\t\t\t\tonSelect={handleSelect}\n\t\t\t\t\t\tonFilter={handleFilterChange}\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={classNames(\"i-input-item\", {\n\t\t\t\t\t\t[`i-input-${status}`]: status !== \"normal\",\n\t\t\t\t\t\t\"i-input-borderless\": !border,\n\t\t\t\t\t\t\"i-input-focus\": active,\n\t\t\t\t\t})}\n\t\t\t\t\tonClick={() => setActive(true)}\n\t\t\t\t>\n\t\t\t\t\t{prepend}\n\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\ttype='hidden'\n\t\t\t\t\t\tvalue={state.value}\n\t\t\t\t\t\t{...restProps}\n\t\t\t\t\t/>\n\n\t\t\t\t\t{multiple ? (\n\t\t\t\t\t\thasValue ? (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={classNames(\"i-input i-select\", {\n\t\t\t\t\t\t\t\t\t\"i-select-multiple\": multiple,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{displayValue({\n\t\t\t\t\t\t\t\t\toptions: formattedOptions,\n\t\t\t\t\t\t\t\t\tvalue: state.value,\n\t\t\t\t\t\t\t\t\tmultiple,\n\t\t\t\t\t\t\t\t\tmaxDisplay,\n\t\t\t\t\t\t\t\t\tonSelect: handleSelect,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclassName='i-input i-select'\n\t\t\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\t\t\treadOnly\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : null}\n\n\t\t\t\t\t{!multiple && (\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tvalue={active ? state.filterValue : displayLabel}\n\t\t\t\t\t\t\tclassName='i-input i-select'\n\t\t\t\t\t\t\tplaceholder={displayLabel || placeholder}\n\t\t\t\t\t\t\tonChange={handleInputChange}\n\t\t\t\t\t\t\treadOnly={!filter}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<Helpericon\n\t\t\t\t\t\tactive={!hideArrow}\n\t\t\t\t\t\ticon={clearable ? undefined : <UnfoldMoreRound />}\n\t\t\t\t\t\tonClick={handleHelperClick}\n\t\t\t\t\t/>\n\n\t\t\t\t\t{append}\n\t\t\t\t</div>\n\t\t\t</Popup>\n\n\t\t\t{text && <span className='i-input-message'>{text}</span>}\n\t\t</label>\n\t);\n};\n\nexport default Select;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
package/lib/index.js
CHANGED
|
@@ -80,7 +80,7 @@ const defaultCancel$1 = {
|
|
|
80
80
|
secondary: true,
|
|
81
81
|
};
|
|
82
82
|
function Confirm(props) {
|
|
83
|
-
const { ref, okButtonProps, cancelButtonProps, onOk, onCancel, onClick, ...restProps } = props;
|
|
83
|
+
const { ref, size, okButtonProps, cancelButtonProps, onOk, onCancel, onClick, ...restProps } = props;
|
|
84
84
|
const state = useReactive({
|
|
85
85
|
active: false,
|
|
86
86
|
loading: false,
|
|
@@ -114,9 +114,9 @@ function Confirm(props) {
|
|
|
114
114
|
state.active = false;
|
|
115
115
|
};
|
|
116
116
|
if (!state.active) {
|
|
117
|
-
return jsx(Button, { ref: ref, ...restProps, onClick: handleClick });
|
|
117
|
+
return (jsx(Button, { ref: ref, size: size, ...restProps, onClick: handleClick }));
|
|
118
118
|
}
|
|
119
|
-
return (jsxs(Button.Group, { children: [jsx(Button, { ...ok, loading: state.loading, onClick: hanldeOk }), jsx(Button, { ...cancel, disabled: state.loading, onClick: handleCancel })] }));
|
|
119
|
+
return (jsxs(Button.Group, { children: [jsx(Button, { size: size, ...ok, loading: state.loading, onClick: hanldeOk }), jsx(Button, { size: size, ...cancel, disabled: state.loading, onClick: handleCancel })] }));
|
|
120
120
|
}
|
|
121
121
|
|
|
122
122
|
function Group(props) {
|
|
@@ -1239,6 +1239,7 @@ function Popup(props) {
|
|
|
1239
1239
|
return;
|
|
1240
1240
|
clearTimeout(timerRef.current);
|
|
1241
1241
|
timerRef.current = null;
|
|
1242
|
+
statusRef.current = "";
|
|
1242
1243
|
};
|
|
1243
1244
|
const handleShow = () => {
|
|
1244
1245
|
if (disabled)
|
|
@@ -1247,34 +1248,35 @@ function Popup(props) {
|
|
|
1247
1248
|
(trigger !== "hover" || (trigger === "hover" && !touchable))) {
|
|
1248
1249
|
return;
|
|
1249
1250
|
}
|
|
1250
|
-
state.show = true;
|
|
1251
1251
|
statusRef.current = "showing";
|
|
1252
|
+
state.show = true;
|
|
1252
1253
|
timerRef.current = setTimeout(() => {
|
|
1253
|
-
if (statusRef.current !== "showing")
|
|
1254
|
+
if (statusRef.current !== "showing")
|
|
1254
1255
|
return;
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1256
|
+
requestAnimationFrame(() => {
|
|
1257
|
+
const [left, top, { arrowX, arrowY, arrowPos }] = getPosition(triggerRef.current, contentRef.current, {
|
|
1258
|
+
position,
|
|
1259
|
+
gap,
|
|
1260
|
+
offset,
|
|
1261
|
+
align,
|
|
1262
|
+
refWindow: referToWindow,
|
|
1263
|
+
});
|
|
1264
|
+
state.style = {
|
|
1265
|
+
...state.style,
|
|
1266
|
+
opacity: 1,
|
|
1267
|
+
transform: "none",
|
|
1268
|
+
left,
|
|
1269
|
+
top,
|
|
1270
|
+
};
|
|
1271
|
+
state.arrowProps = {
|
|
1272
|
+
left: arrowX,
|
|
1273
|
+
top: arrowY,
|
|
1274
|
+
pos: arrowPos,
|
|
1275
|
+
};
|
|
1276
|
+
onVisibleChange?.(true);
|
|
1277
|
+
clearTimer();
|
|
1278
|
+
statusRef.current = "";
|
|
1262
1279
|
});
|
|
1263
|
-
state.style = {
|
|
1264
|
-
...state.style,
|
|
1265
|
-
opacity: 1,
|
|
1266
|
-
transform: "none",
|
|
1267
|
-
left,
|
|
1268
|
-
top,
|
|
1269
|
-
};
|
|
1270
|
-
state.arrowProps = {
|
|
1271
|
-
left: arrowX,
|
|
1272
|
-
top: arrowY,
|
|
1273
|
-
pos: arrowPos,
|
|
1274
|
-
};
|
|
1275
|
-
onVisibleChange?.(true);
|
|
1276
|
-
clearTimer();
|
|
1277
|
-
statusRef.current = "";
|
|
1278
1280
|
}, showDelay);
|
|
1279
1281
|
};
|
|
1280
1282
|
const handleHide = () => {
|
|
@@ -1841,7 +1843,7 @@ const Form = (props) => {
|
|
|
1841
1843
|
onKeyDown?.(e);
|
|
1842
1844
|
if (e.keyCode !== 13)
|
|
1843
1845
|
return;
|
|
1844
|
-
onEnter?.(form.data, form);
|
|
1846
|
+
onEnter?.(e, form.data, form);
|
|
1845
1847
|
};
|
|
1846
1848
|
const gridColumns = useMemo(() => {
|
|
1847
1849
|
if (!columns)
|
|
@@ -3137,6 +3139,13 @@ const Select = (props) => {
|
|
|
3137
3139
|
state.value = v;
|
|
3138
3140
|
onChange?.(v);
|
|
3139
3141
|
};
|
|
3142
|
+
const displayLabel = useMemo(() => {
|
|
3143
|
+
if (multiple) {
|
|
3144
|
+
return "";
|
|
3145
|
+
}
|
|
3146
|
+
const option = formattedOptions.find((opt) => opt.value === state.value);
|
|
3147
|
+
return option ? option.label : state.value;
|
|
3148
|
+
}, [state.value, formattedOptions]);
|
|
3140
3149
|
const handleSelect = (value, option) => {
|
|
3141
3150
|
onSelect?.(value, option);
|
|
3142
3151
|
if (multiple) {
|
|
@@ -3191,7 +3200,7 @@ const Select = (props) => {
|
|
|
3191
3200
|
multiple,
|
|
3192
3201
|
maxDisplay,
|
|
3193
3202
|
onSelect: handleSelect,
|
|
3194
|
-
}) })) : (jsx("input", { className: 'i-input i-select', placeholder: placeholder, readOnly: true }))) : null, !multiple && (jsx("input", { value: active ? state.filterValue :
|
|
3203
|
+
}) })) : (jsx("input", { className: 'i-input i-select', placeholder: placeholder, readOnly: true }))) : null, !multiple && (jsx("input", { value: active ? state.filterValue : displayLabel, className: 'i-input i-select', placeholder: displayLabel || placeholder, onChange: handleInputChange, readOnly: !filter })), jsx(Helpericon, { active: !hideArrow, icon: clearable ? undefined : jsx(UnfoldMoreRound, {}), onClick: handleHelperClick }), append] }) }), text && jsx("span", { className: 'i-input-message', children: text })] }));
|
|
3195
3204
|
};
|
|
3196
3205
|
|
|
3197
3206
|
const ColorMethods = {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { HTMLAttributes, ReactNode } from 'react';
|
|
1
|
+
import { HTMLAttributes, KeyboardEvent, ReactNode } from 'react';
|
|
2
2
|
import { IFormInstance } from './useForm.js';
|
|
3
3
|
|
|
4
4
|
type TValidator = (value: any, form: IFormInstance) => boolean | string;
|
|
@@ -18,7 +18,7 @@ interface IForm extends Omit<HTMLAttributes<HTMLFormElement>, "onChange"> {
|
|
|
18
18
|
labelWidth?: string;
|
|
19
19
|
labelInline?: boolean;
|
|
20
20
|
labelRight?: boolean;
|
|
21
|
-
onEnter?: (values: Record<string, any>, form: IFormInstance) => void;
|
|
21
|
+
onEnter?: (e: KeyboardEvent, values: Record<string, any>, form: IFormInstance) => void;
|
|
22
22
|
onChange?: (name: any, value: any) => void;
|
|
23
23
|
}
|
|
24
24
|
interface IField {
|