@aloudata/aloudata-design 3.0.19 → 3.0.21
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/README.md +145 -59
- package/dist/Alert/index.js +1 -1
- package/dist/Alert/index.js.map +1 -1
- package/dist/Avatar/component/Avatar/index.js +2 -2
- package/dist/Avatar/component/Avatar/index.js.map +1 -1
- package/dist/Avatar/component/Avatar/type.js +3 -3
- package/dist/Avatar/component/Avatar/type.js.map +1 -1
- package/dist/Badge/index.js +5 -5
- package/dist/Badge/index.js.map +1 -1
- package/dist/Breadcrumb/index.js +4 -4
- package/dist/Breadcrumb/index.js.map +1 -1
- package/dist/Button/index.js +8 -8
- package/dist/Button/index.js.map +1 -1
- package/dist/Card/index.js +2 -2
- package/dist/Card/index.js.map +1 -1
- package/dist/Checkbox/index.js +3 -3
- package/dist/Checkbox/index.js.map +1 -1
- package/dist/Collapse/index.js +1 -1
- package/dist/Collapse/index.js.map +1 -1
- package/dist/ColorPicker/ComplexColorPicker/ColorAlphaInput.js +1 -1
- package/dist/ColorPicker/ComplexColorPicker/ColorAlphaInput.js.map +1 -1
- package/dist/ColorPicker/ComplexColorPicker/ColorHsbInput.js +1 -1
- package/dist/ColorPicker/ComplexColorPicker/ColorHsbInput.js.map +1 -1
- package/dist/ColorPicker/ComplexColorPicker/ColorRgbInput.js +1 -1
- package/dist/ColorPicker/ComplexColorPicker/ColorRgbInput.js.map +1 -1
- package/dist/ColorPicker/ComplexColorPicker/index.js +2 -2
- package/dist/ColorPicker/ComplexColorPicker/index.js.map +1 -1
- package/dist/ColorPicker/index.js +11 -11
- package/dist/ColorPicker/index.js.map +1 -1
- package/dist/ColorPicker/util.d.ts +1 -1
- package/dist/ColorPicker/util.js.map +1 -1
- package/dist/DataPreviewTable/components/Body/Cell.js +2 -2
- package/dist/DataPreviewTable/components/Body/Cell.js.map +1 -1
- package/dist/DataPreviewTable/components/Body/index.js +1 -1
- package/dist/DataPreviewTable/components/Body/index.js.map +1 -1
- package/dist/DataPreviewTable/components/DragBar/index.js +1 -1
- package/dist/DataPreviewTable/components/DragBar/index.js.map +1 -1
- package/dist/DataPreviewTable/components/Header/index.js +3 -3
- package/dist/DataPreviewTable/components/Header/index.js.map +1 -1
- package/dist/DataPreviewTable/index.js +1 -1
- package/dist/DataPreviewTable/index.js.map +1 -1
- package/dist/Divider/index.js +1 -1
- package/dist/Divider/index.js.map +1 -1
- package/dist/Drawer/index.js +3 -3
- package/dist/Drawer/index.js.map +1 -1
- package/dist/Dropdown/index.d.ts +5 -0
- package/dist/Dropdown/index.js +3 -1
- package/dist/Dropdown/index.js.map +1 -1
- package/dist/Empty/image/Data.js +16 -16
- package/dist/Empty/image/Data.js.map +1 -1
- package/dist/Empty/image/User.js +16 -16
- package/dist/Empty/image/User.js.map +1 -1
- package/dist/Empty/image/WorkBook.js +17 -17
- package/dist/Empty/image/WorkBook.js.map +1 -1
- package/dist/Form/index.js +3 -3
- package/dist/Form/index.js.map +1 -1
- package/dist/Icon/components/SortAscendingOrderColor.js +1 -1
- package/dist/Icon/components/SortAscendingOrderColor.js.map +1 -1
- package/dist/Icon/components/SortDescendingOrderColor.js +1 -1
- package/dist/Icon/components/SortDescendingOrderColor.js.map +1 -1
- package/dist/Icon/components/User.js +2 -2
- package/dist/Icon/components/User.js.map +1 -1
- package/dist/Icon/components/UserGroup.js +2 -2
- package/dist/Icon/components/UserGroup.js.map +1 -1
- package/dist/Input/components/Input/index.js +3 -4
- package/dist/Input/components/Input/index.js.map +1 -1
- package/dist/Input/components/TextArea/index.js +3 -3
- package/dist/Input/components/TextArea/index.js.map +1 -1
- package/dist/InputNumber/index.js +4 -4
- package/dist/InputNumber/index.js.map +1 -1
- package/dist/LogicTree/components/LogicItem/index.js +2 -2
- package/dist/LogicTree/components/LogicItem/index.js.map +1 -1
- package/dist/MemberPicker/components/SelectedMemberTags.js +1 -1
- package/dist/MemberPicker/components/SelectedMemberTags.js.map +1 -1
- package/dist/Modal/index.js +8 -8
- package/dist/Modal/index.js.map +1 -1
- package/dist/Popconfirm/index.js +1 -1
- package/dist/Popconfirm/index.js.map +1 -1
- package/dist/Popover/index.js +2 -2
- package/dist/Popover/index.js.map +1 -1
- package/dist/Progress/index.js +1 -1
- package/dist/Progress/index.js.map +1 -1
- package/dist/RenameInput/index.js +4 -4
- package/dist/RenameInput/index.js.map +1 -1
- package/dist/Result/index.js +4 -4
- package/dist/Result/index.js.map +1 -1
- package/dist/Select/components/Suffix.js +3 -3
- package/dist/Select/components/Suffix.js.map +1 -1
- package/dist/Slider/index.js +4 -4
- package/dist/Slider/index.js.map +1 -1
- package/dist/Spin/CustomIcon/index.js +2 -2
- package/dist/Spin/CustomIcon/index.js.map +1 -1
- package/dist/StatusLight/index.js +15 -15
- package/dist/StatusLight/index.js.map +1 -1
- package/dist/Steps/index.js +6 -6
- package/dist/Steps/index.js.map +1 -1
- package/dist/Switch/index.js +3 -3
- package/dist/Switch/index.js.map +1 -1
- package/dist/Table/components/Header.js +3 -3
- package/dist/Table/components/Header.js.map +1 -1
- package/dist/Tabs/index.js +9 -9
- package/dist/Tabs/index.js.map +1 -1
- package/dist/Tag/index.js +11 -11
- package/dist/Tag/index.js.map +1 -1
- package/dist/TextLink/index.js +2 -2
- package/dist/TextLink/index.js.map +1 -1
- package/dist/Tooltip/index.js +3 -3
- package/dist/Tooltip/index.js.map +1 -1
- package/dist/Tour/index.js +1 -1
- package/dist/Tour/index.js.map +1 -1
- package/dist/Tree/Tree2.js +2 -2
- package/dist/Tree/Tree2.js.map +1 -1
- package/dist/Typography/index.js +1 -1
- package/dist/Typography/index.js.map +1 -1
- package/dist/User/index.js +1 -1
- package/dist/User/index.js.map +1 -1
- package/dist/Watermark/index.js +2 -1
- package/dist/Watermark/index.js.map +1 -1
- package/dist/aloudata-design.css +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +11 -5
- package/dist/message/index.js +1 -1
- package/dist/message/index.js.map +1 -1
- package/dist/notification/index.js +5 -5
- package/dist/notification/index.js.map +1 -1
- package/dist/theme/contract/shadowGeneratorSpecification.d.ts +37 -0
- package/dist/theme/contract/tokenCssBridge.d.ts +60 -0
- package/dist/theme/contract/tokenCssBridge.js +2 -0
- package/dist/theme/contract/tokenOutputContract.d.ts +35 -0
- package/dist/theme/contract/tokenOutputContract.js +198 -0
- package/dist/theme/contract/tokenOutputContract.js.map +1 -0
- package/dist/theme/generator/acceptedColorValues.d.ts +97 -0
- package/dist/theme/generator/acceptedColorValues.js +2 -0
- package/dist/theme/generator/cssArtifactEmitter.d.ts +62 -0
- package/dist/theme/generator/cssArtifactEmitter.js +2 -0
- package/dist/theme/generator/generator.d.ts +41 -0
- package/dist/theme/generator/generator.js +2 -0
- package/dist/theme/generator/generatorDiff.d.ts +53 -0
- package/dist/theme/generator/generatorDiff.js +2 -0
- package/dist/theme/generator/generatorEmitter.d.ts +73 -0
- package/dist/theme/generator/generatorEmitter.js +2 -0
- package/dist/theme/generator/generatorMappingStrategy.d.ts +43 -0
- package/dist/theme/generator/generatorMappingStrategy.js +2 -0
- package/dist/theme/generator/generatorOutputSchema.d.ts +80 -0
- package/dist/theme/generator/generatorOutputSchema.js +2 -0
- package/dist/theme/generator/minimalAcceptedColorValues.d.ts +27 -0
- package/dist/theme/generator/minimalAcceptedColorValues.js +2 -0
- package/dist/theme/generator/valueResolver.d.ts +64 -0
- package/dist/theme/generator/valueResolver.js +2 -0
- package/dist/theme/governance/migrationMappingRegistry.d.ts +22 -0
- package/dist/theme/governance/migrationMappingRegistry.js +459 -0
- package/dist/theme/governance/migrationMappingRegistry.js.map +1 -0
- package/dist/theme/governance/reviewGate.d.ts +33 -0
- package/dist/theme/governance/reviewGate.js +116 -0
- package/dist/theme/governance/reviewGate.js.map +1 -0
- package/dist/theme/governance/validateMigrationMapping.d.ts +50 -0
- package/dist/theme/governance/validateMigrationMapping.js +157 -0
- package/dist/theme/governance/validateMigrationMapping.js.map +1 -0
- package/dist/theme/index.d.ts +16 -5
- package/dist/theme/index.js +10 -4
- package/dist/theme/runtime/colorValueMode/index.d.ts +5 -0
- package/dist/theme/runtime/colorValueMode/index.js +49 -0
- package/dist/theme/runtime/colorValueMode/index.js.map +1 -0
- package/dist/theme/runtime/colorValueMode/registry.d.ts +29 -0
- package/dist/theme/runtime/colorValueMode/registry.js +39 -0
- package/dist/theme/runtime/colorValueMode/registry.js.map +1 -0
- package/dist/theme/runtime/colorValueMode/v3.d.ts +98 -0
- package/dist/theme/runtime/colorValueMode/v3.js +230 -0
- package/dist/theme/runtime/colorValueMode/v3.js.map +1 -0
- package/dist/theme/runtime/colorValueMode.d.ts +2 -0
- package/dist/theme/{createTheme.js → runtime/createTheme.js} +1 -1
- package/dist/theme/runtime/createTheme.js.map +1 -0
- package/dist/theme/{defaultTheme.js → runtime/defaultTheme.js} +1 -1
- package/dist/theme/runtime/defaultTheme.js.map +1 -0
- package/dist/theme/{initAldTheme.js → runtime/initAldTheme.js} +1 -1
- package/dist/theme/runtime/initAldTheme.js.map +1 -0
- package/dist/theme/runtime/integrationController.d.ts +26 -0
- package/dist/theme/runtime/integrationController.js +2 -0
- package/dist/theme/runtime/runtimeAdapter.d.ts +31 -0
- package/dist/theme/runtime/runtimeAdapter.js +2 -0
- package/dist/theme/{themeToCssVars.js → runtime/themeToCssVars.js} +1 -1
- package/dist/theme/runtime/themeToCssVars.js.map +1 -0
- package/dist/theme/{tokenMap.js → runtime/tokenMap.js} +1 -1
- package/dist/theme/runtime/tokenMap.js.map +1 -0
- package/dist/theme/runtime/types.js +2 -0
- package/package.json +15 -1
- package/dist/theme/createTheme.js.map +0 -1
- package/dist/theme/defaultTheme.js.map +0 -1
- package/dist/theme/initAldTheme.js.map +0 -1
- package/dist/theme/themeToCssVars.js.map +0 -1
- package/dist/theme/tokenMap.js.map +0 -1
- /package/dist/theme/{types.js → contract/shadowGeneratorSpecification.js} +0 -0
- /package/dist/theme/{createTheme.d.ts → runtime/createTheme.d.ts} +0 -0
- /package/dist/theme/{defaultTheme.d.ts → runtime/defaultTheme.d.ts} +0 -0
- /package/dist/theme/{initAldTheme.d.ts → runtime/initAldTheme.d.ts} +0 -0
- /package/dist/theme/{themeToCssVars.d.ts → runtime/themeToCssVars.d.ts} +0 -0
- /package/dist/theme/{tokenMap.d.ts → runtime/tokenMap.d.ts} +0 -0
- /package/dist/theme/{types.d.ts → runtime/types.d.ts} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SortAscendingOrderColor.js","names":[],"sources":["../../../src/Icon/components/SortAscendingOrderColor.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { SVGProps } from 'react';\nimport { Ref, forwardRef, memo } from 'react';\ninterface SVGRProps {\n size?: number | string;\n title?: string;\n titleId?: string;\n desc?: string;\n descId?: string;\n}\nconst SortAscendingOrderColor = (\n {\n title,\n titleId,\n desc,\n descId,\n ...props\n }: SVGProps<SVGSVGElement> & SVGRProps,\n ref: Ref<SVGSVGElement>,\n) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.width || props.size || 16}\n height={props.height || props.size || 16}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n ref={ref}\n aria-labelledby={titleId}\n aria-describedby={descId}\n {...props}\n >\n {desc ? <desc id={descId}>{desc}</desc> : null}\n {title ? <title id={titleId}>{title}</title> : null}\n <path\n fill=\"
|
|
1
|
+
{"version":3,"file":"SortAscendingOrderColor.js","names":[],"sources":["../../../src/Icon/components/SortAscendingOrderColor.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { SVGProps } from 'react';\nimport { Ref, forwardRef, memo } from 'react';\ninterface SVGRProps {\n size?: number | string;\n title?: string;\n titleId?: string;\n desc?: string;\n descId?: string;\n}\nconst SortAscendingOrderColor = (\n {\n title,\n titleId,\n desc,\n descId,\n ...props\n }: SVGProps<SVGSVGElement> & SVGRProps,\n ref: Ref<SVGSVGElement>,\n) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.width || props.size || 16}\n height={props.height || props.size || 16}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n ref={ref}\n aria-labelledby={titleId}\n aria-describedby={descId}\n {...props}\n >\n {desc ? <desc id={descId}>{desc}</desc> : null}\n {title ? <title id={titleId}>{title}</title> : null}\n <path\n fill=\"var(--content-brand-secondary)\"\n d=\"M15.293 10a.713.713 0 0 0 .64-.38.624.624 0 0 0-.097-.701l-3.293-3.682A.73.73 0 0 0 12 5a.73.73 0 0 0-.543.237L8.163 8.92a.624.624 0 0 0-.097.701c.116.232.366.38.64.38h6.585Z\"\n />\n <path\n fill={props.color || 'currentColor'}\n d=\"M15.293 14c.274 0 .524.148.64.38a.624.624 0 0 1-.097.701l-3.293 3.682A.73.73 0 0 1 12 19a.73.73 0 0 1-.543-.237L8.163 15.08a.624.624 0 0 1-.097-.701.713.713 0 0 1 .64-.38h6.585Z\"\n />\n </svg>\n);\nconst ForwardRef = forwardRef(SortAscendingOrderColor);\nconst Memo = memo(ForwardRef);\nexport default Memo;\n"],"mappings":";;;AAUA,IAAM,2BACJ,EACE,OACA,SACA,MACA,QACA,GAAG,SAEL,QAEA,qBAAC,OAAD;CACE,OAAM;CACN,OAAO,MAAM,SAAS,MAAM,QAAQ;CACpC,QAAQ,MAAM,UAAU,MAAM,QAAQ;CACtC,MAAK;CACL,SAAQ;CACH;CACL,mBAAiB;CACjB,oBAAkB;CAClB,GAAI;WATN;EAWG,OAAO,oBAAC,QAAD;GAAM,IAAI;aAAS;GAAY,CAAA,GAAG;EACzC,QAAQ,oBAAC,SAAD;GAAO,IAAI;aAAU;GAAc,CAAA,GAAG;EAC/C,oBAAC,QAAD;GACE,MAAK;GACL,GAAE;GACF,CAAA;EACF,oBAAC,QAAD;GACE,MAAM,MAAM,SAAS;GACrB,GAAE;GACF,CAAA;EACE;;AAGR,IAAM,OAAO,KADM,WAAW,wBAAwB,CACzB"}
|
|
@@ -25,7 +25,7 @@ var SortDescendingOrderColor = ({ title, titleId, desc, descId, ...props }, ref)
|
|
|
25
25
|
d: "M15.293 10a.713.713 0 0 0 .64-.38.624.624 0 0 0-.097-.701l-3.293-3.682A.73.73 0 0 0 12 5a.73.73 0 0 0-.543.237L8.163 8.92a.624.624 0 0 0-.097.701c.116.232.366.38.64.38h6.585Z"
|
|
26
26
|
}),
|
|
27
27
|
/* @__PURE__ */ jsx("path", {
|
|
28
|
-
fill: "
|
|
28
|
+
fill: "var(--content-brand-secondary)",
|
|
29
29
|
d: "M15.293 14c.274 0 .524.148.64.38a.624.624 0 0 1-.097.701l-3.293 3.682A.73.73 0 0 1 12 19a.73.73 0 0 1-.543-.237L8.163 15.08a.624.624 0 0 1-.097-.701.713.713 0 0 1 .64-.38h6.585Z"
|
|
30
30
|
})
|
|
31
31
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SortDescendingOrderColor.js","names":[],"sources":["../../../src/Icon/components/SortDescendingOrderColor.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { SVGProps } from 'react';\nimport { Ref, forwardRef, memo } from 'react';\ninterface SVGRProps {\n size?: number | string;\n title?: string;\n titleId?: string;\n desc?: string;\n descId?: string;\n}\nconst SortDescendingOrderColor = (\n {\n title,\n titleId,\n desc,\n descId,\n ...props\n }: SVGProps<SVGSVGElement> & SVGRProps,\n ref: Ref<SVGSVGElement>,\n) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.width || props.size || 16}\n height={props.height || props.size || 16}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n ref={ref}\n aria-labelledby={titleId}\n aria-describedby={descId}\n {...props}\n >\n {desc ? <desc id={descId}>{desc}</desc> : null}\n {title ? <title id={titleId}>{title}</title> : null}\n <path\n fill={props.color || 'currentColor'}\n d=\"M15.293 10a.713.713 0 0 0 .64-.38.624.624 0 0 0-.097-.701l-3.293-3.682A.73.73 0 0 0 12 5a.73.73 0 0 0-.543.237L8.163 8.92a.624.624 0 0 0-.097.701c.116.232.366.38.64.38h6.585Z\"\n />\n <path\n fill=\"
|
|
1
|
+
{"version":3,"file":"SortDescendingOrderColor.js","names":[],"sources":["../../../src/Icon/components/SortDescendingOrderColor.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { SVGProps } from 'react';\nimport { Ref, forwardRef, memo } from 'react';\ninterface SVGRProps {\n size?: number | string;\n title?: string;\n titleId?: string;\n desc?: string;\n descId?: string;\n}\nconst SortDescendingOrderColor = (\n {\n title,\n titleId,\n desc,\n descId,\n ...props\n }: SVGProps<SVGSVGElement> & SVGRProps,\n ref: Ref<SVGSVGElement>,\n) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.width || props.size || 16}\n height={props.height || props.size || 16}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n ref={ref}\n aria-labelledby={titleId}\n aria-describedby={descId}\n {...props}\n >\n {desc ? <desc id={descId}>{desc}</desc> : null}\n {title ? <title id={titleId}>{title}</title> : null}\n <path\n fill={props.color || 'currentColor'}\n d=\"M15.293 10a.713.713 0 0 0 .64-.38.624.624 0 0 0-.097-.701l-3.293-3.682A.73.73 0 0 0 12 5a.73.73 0 0 0-.543.237L8.163 8.92a.624.624 0 0 0-.097.701c.116.232.366.38.64.38h6.585Z\"\n />\n <path\n fill=\"var(--content-brand-secondary)\"\n d=\"M15.293 14c.274 0 .524.148.64.38a.624.624 0 0 1-.097.701l-3.293 3.682A.73.73 0 0 1 12 19a.73.73 0 0 1-.543-.237L8.163 15.08a.624.624 0 0 1-.097-.701.713.713 0 0 1 .64-.38h6.585Z\"\n />\n </svg>\n);\nconst ForwardRef = forwardRef(SortDescendingOrderColor);\nconst Memo = memo(ForwardRef);\nexport default Memo;\n"],"mappings":";;;AAUA,IAAM,4BACJ,EACE,OACA,SACA,MACA,QACA,GAAG,SAEL,QAEA,qBAAC,OAAD;CACE,OAAM;CACN,OAAO,MAAM,SAAS,MAAM,QAAQ;CACpC,QAAQ,MAAM,UAAU,MAAM,QAAQ;CACtC,MAAK;CACL,SAAQ;CACH;CACL,mBAAiB;CACjB,oBAAkB;CAClB,GAAI;WATN;EAWG,OAAO,oBAAC,QAAD;GAAM,IAAI;aAAS;GAAY,CAAA,GAAG;EACzC,QAAQ,oBAAC,SAAD;GAAO,IAAI;aAAU;GAAc,CAAA,GAAG;EAC/C,oBAAC,QAAD;GACE,MAAM,MAAM,SAAS;GACrB,GAAE;GACF,CAAA;EACF,oBAAC,QAAD;GACE,MAAK;GACL,GAAE;GACF,CAAA;EACE;;AAGR,IAAM,OAAO,KADM,WAAW,yBAAyB,CAC1B"}
|
|
@@ -24,11 +24,11 @@ var User = ({ title, titleId, desc, descId, ...props }, ref) => /* @__PURE__ */
|
|
|
24
24
|
cx: 50,
|
|
25
25
|
cy: 50,
|
|
26
26
|
r: 50,
|
|
27
|
-
fill: "
|
|
27
|
+
fill: "var(--background-warning-muted)",
|
|
28
28
|
opacity: .25
|
|
29
29
|
}),
|
|
30
30
|
/* @__PURE__ */ jsx("path", {
|
|
31
|
-
fill: "
|
|
31
|
+
fill: "var(--content-warning-secondary)",
|
|
32
32
|
fillRule: "evenodd",
|
|
33
33
|
d: "M62.992 45.79a15.626 15.626 0 1 0-25.986-17.362A15.626 15.626 0 0 0 62.992 45.79ZM50 93.75c13.386 0 25.367-6.011 33.392-15.482C75.594 68.424 63.534 62.11 50 62.11c-13.534 0-25.594 6.315-33.392 16.16C24.633 87.738 36.614 93.75 50 93.75Z",
|
|
34
34
|
clipRule: "evenodd"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"User.js","names":[],"sources":["../../../src/Icon/components/User.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\nimport * as React from 'react';\nimport { Ref, forwardRef, memo } from 'react';\ninterface SVGRProps {\n size?: number | string;\n title?: string;\n titleId?: string;\n desc?: string;\n descId?: string;\n}\nconst User = (\n {\n title,\n titleId,\n desc,\n descId,\n ...props\n }: SVGProps<SVGSVGElement> & SVGRProps,\n ref: Ref<SVGSVGElement>,\n) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.width || props.size || 16}\n height={props.height || props.size || 16}\n fill=\"none\"\n viewBox=\"0 0 100 100\"\n ref={ref}\n aria-labelledby={titleId}\n aria-describedby={descId}\n {...props}\n >\n {desc ? <desc id={descId}>{desc}</desc> : null}\n {title ? <title id={titleId}>{title}</title> : null}\n <circle
|
|
1
|
+
{"version":3,"file":"User.js","names":[],"sources":["../../../src/Icon/components/User.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\nimport * as React from 'react';\nimport { Ref, forwardRef, memo } from 'react';\ninterface SVGRProps {\n size?: number | string;\n title?: string;\n titleId?: string;\n desc?: string;\n descId?: string;\n}\nconst User = (\n {\n title,\n titleId,\n desc,\n descId,\n ...props\n }: SVGProps<SVGSVGElement> & SVGRProps,\n ref: Ref<SVGSVGElement>,\n) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.width || props.size || 16}\n height={props.height || props.size || 16}\n fill=\"none\"\n viewBox=\"0 0 100 100\"\n ref={ref}\n aria-labelledby={titleId}\n aria-describedby={descId}\n {...props}\n >\n {desc ? <desc id={descId}>{desc}</desc> : null}\n {title ? <title id={titleId}>{title}</title> : null}\n <circle\n cx={50}\n cy={50}\n r={50}\n fill=\"var(--background-warning-muted)\"\n opacity={0.25}\n />\n <path\n fill=\"var(--content-warning-secondary)\"\n fillRule=\"evenodd\"\n d=\"M62.992 45.79a15.626 15.626 0 1 0-25.986-17.362A15.626 15.626 0 0 0 62.992 45.79ZM50 93.75c13.386 0 25.367-6.011 33.392-15.482C75.594 68.424 63.534 62.11 50 62.11c-13.534 0-25.594 6.315-33.392 16.16C24.633 87.738 36.614 93.75 50 93.75Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n);\nconst ForwardRef = forwardRef(User);\nconst Memo = memo(ForwardRef);\nexport default Memo;\n"],"mappings":";;;AAUA,IAAM,QACJ,EACE,OACA,SACA,MACA,QACA,GAAG,SAEL,QAEA,qBAAC,OAAD;CACE,OAAM;CACN,OAAO,MAAM,SAAS,MAAM,QAAQ;CACpC,QAAQ,MAAM,UAAU,MAAM,QAAQ;CACtC,MAAK;CACL,SAAQ;CACH;CACL,mBAAiB;CACjB,oBAAkB;CAClB,GAAI;WATN;EAWG,OAAO,oBAAC,QAAD;GAAM,IAAI;aAAS;GAAY,CAAA,GAAG;EACzC,QAAQ,oBAAC,SAAD;GAAO,IAAI;aAAU;GAAc,CAAA,GAAG;EAC/C,oBAAC,UAAD;GACE,IAAI;GACJ,IAAI;GACJ,GAAG;GACH,MAAK;GACL,SAAS;GACT,CAAA;EACF,oBAAC,QAAD;GACE,MAAK;GACL,UAAS;GACT,GAAE;GACF,UAAS;GACT,CAAA;EACE;;AAGR,IAAM,OAAO,KADM,WAAW,KAAK,CACN"}
|
|
@@ -24,11 +24,11 @@ var UserGroup = ({ title, titleId, desc, descId, ...props }, ref) => /* @__PURE_
|
|
|
24
24
|
cx: 50,
|
|
25
25
|
cy: 50,
|
|
26
26
|
r: 50,
|
|
27
|
-
fill: "
|
|
27
|
+
fill: "var(--background-brand-muted)",
|
|
28
28
|
opacity: .25
|
|
29
29
|
}),
|
|
30
30
|
/* @__PURE__ */ jsx("path", {
|
|
31
|
-
fill: "
|
|
31
|
+
fill: "var(--content-brand-secondary)",
|
|
32
32
|
d: "M68 90.162A43.844 43.844 0 0 1 50 94c-14.145 0-26.732-6.675-34.78-17.047C19.91 68.061 29.246 62 40 62c15.464 0 28 12.536 28 28v.162ZM84.78 76.953a44.255 44.255 0 0 1-9.036 8.733C74.614 76.22 69.81 67.882 62.8 62.138c9.558.949 17.703 6.704 21.982 14.815ZM40 53c8.837 0 16-7.163 16-16s-7.163-16-16-16-16 7.163-16 16 7.163 16 16 16ZM64 37a23.91 23.91 0 0 1-6.001 15.876c.655.082 1.323.124 2.001.124 8.837 0 16-7.163 16-16s-7.163-16-16-16c-.678 0-1.346.042-2.001.124A23.91 23.91 0 0 1 64 37Z"
|
|
33
33
|
})
|
|
34
34
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UserGroup.js","names":[],"sources":["../../../src/Icon/components/UserGroup.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\nimport * as React from 'react';\nimport { Ref, forwardRef, memo } from 'react';\ninterface SVGRProps {\n size?: number | string;\n title?: string;\n titleId?: string;\n desc?: string;\n descId?: string;\n}\nconst UserGroup = (\n {\n title,\n titleId,\n desc,\n descId,\n ...props\n }: SVGProps<SVGSVGElement> & SVGRProps,\n ref: Ref<SVGSVGElement>,\n) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.width || props.size || 16}\n height={props.height || props.size || 16}\n fill=\"none\"\n viewBox=\"0 0 100 100\"\n ref={ref}\n aria-labelledby={titleId}\n aria-describedby={descId}\n {...props}\n >\n {desc ? <desc id={descId}>{desc}</desc> : null}\n {title ? <title id={titleId}>{title}</title> : null}\n <circle
|
|
1
|
+
{"version":3,"file":"UserGroup.js","names":[],"sources":["../../../src/Icon/components/UserGroup.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\nimport * as React from 'react';\nimport { Ref, forwardRef, memo } from 'react';\ninterface SVGRProps {\n size?: number | string;\n title?: string;\n titleId?: string;\n desc?: string;\n descId?: string;\n}\nconst UserGroup = (\n {\n title,\n titleId,\n desc,\n descId,\n ...props\n }: SVGProps<SVGSVGElement> & SVGRProps,\n ref: Ref<SVGSVGElement>,\n) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.width || props.size || 16}\n height={props.height || props.size || 16}\n fill=\"none\"\n viewBox=\"0 0 100 100\"\n ref={ref}\n aria-labelledby={titleId}\n aria-describedby={descId}\n {...props}\n >\n {desc ? <desc id={descId}>{desc}</desc> : null}\n {title ? <title id={titleId}>{title}</title> : null}\n <circle\n cx={50}\n cy={50}\n r={50}\n fill=\"var(--background-brand-muted)\"\n opacity={0.25}\n />\n <path\n fill=\"var(--content-brand-secondary)\"\n d=\"M68 90.162A43.844 43.844 0 0 1 50 94c-14.145 0-26.732-6.675-34.78-17.047C19.91 68.061 29.246 62 40 62c15.464 0 28 12.536 28 28v.162ZM84.78 76.953a44.255 44.255 0 0 1-9.036 8.733C74.614 76.22 69.81 67.882 62.8 62.138c9.558.949 17.703 6.704 21.982 14.815ZM40 53c8.837 0 16-7.163 16-16s-7.163-16-16-16-16 7.163-16 16 7.163 16 16 16ZM64 37a23.91 23.91 0 0 1-6.001 15.876c.655.082 1.323.124 2.001.124 8.837 0 16-7.163 16-16s-7.163-16-16-16c-.678 0-1.346.042-2.001.124A23.91 23.91 0 0 1 64 37Z\"\n />\n </svg>\n);\nconst ForwardRef = forwardRef(UserGroup);\nconst Memo = memo(ForwardRef);\nexport default Memo;\n"],"mappings":";;;AAUA,IAAM,aACJ,EACE,OACA,SACA,MACA,QACA,GAAG,SAEL,QAEA,qBAAC,OAAD;CACE,OAAM;CACN,OAAO,MAAM,SAAS,MAAM,QAAQ;CACpC,QAAQ,MAAM,UAAU,MAAM,QAAQ;CACtC,MAAK;CACL,SAAQ;CACH;CACL,mBAAiB;CACjB,oBAAkB;CAClB,GAAI;WATN;EAWG,OAAO,oBAAC,QAAD;GAAM,IAAI;aAAS;GAAY,CAAA,GAAG;EACzC,QAAQ,oBAAC,SAAD;GAAO,IAAI;aAAU;GAAc,CAAA,GAAG;EAC/C,oBAAC,UAAD;GACE,IAAI;GACJ,IAAI;GACJ,GAAG;GACH,MAAK;GACL,SAAS;GACT,CAAA;EACF,oBAAC,QAAD;GACE,MAAK;GACL,GAAE;GACF,CAAA;EACE;;AAGR,IAAM,OAAO,KADM,WAAW,UAAU,CACX"}
|
|
@@ -42,7 +42,6 @@ var Input = forwardRef((props, ref) => {
|
|
|
42
42
|
inputRef.current.dispatchEvent(nativeEvent);
|
|
43
43
|
}
|
|
44
44
|
if (!isControlled) setInnerValue("");
|
|
45
|
-
onChange?.({ target: { value: "" } });
|
|
46
45
|
};
|
|
47
46
|
const handleKeyDown = (e) => {
|
|
48
47
|
if (e.key === "Enter") onPressEnter?.(e);
|
|
@@ -55,7 +54,7 @@ var Input = forwardRef((props, ref) => {
|
|
|
55
54
|
}) : showCount ? `${currentValue.length}${maxLength ? `/${maxLength}` : ""}` : null;
|
|
56
55
|
const compactClasses = compactItemClassnames ? cn(!compactItemClassnames["ald-input-compact-first-item"] && "!tw-rounded-l-none", !compactItemClassnames["ald-input-compact-last-item"] && "!tw-rounded-r-none", !compactItemClassnames["ald-input-compact-first-item"] && "-tw-ml-px") : void 0;
|
|
57
56
|
return /* @__PURE__ */ jsxs("span", {
|
|
58
|
-
className: cn("ald-input ant-input-affix-wrapper tw-inline-flex tw-w-full tw-items-center tw-bg-[var(--
|
|
57
|
+
className: cn("ald-input ant-input-affix-wrapper tw-inline-flex tw-w-full tw-items-center tw-bg-[var(--background-default)]", bordered && "tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)]", focused && "ant-input-affix-wrapper-focused tw-border-[var(--border-brand-strong)]", !mergedDisabled && !focused && "hover:tw-border-[var(--border-brand-strong)]", `ald-input-${getSizeType(size)}`, size === "small" && "tw-h-7 tw-text-xs", size === "large" && "tw-h-9 tw-text-sm", (size === "middle" || !size) && "tw-h-8 tw-text-sm", status === "error" && `ald-input-error tw-border-[var(--border-negative-strong)]`, status === "warning" && `ald-input-warning tw-border-[var(--border-warning-subtle)]`, mergedDisabled && "ald-input-disabled tw-cursor-not-allowed tw-bg-[var(--background-neutral-on-subtle)] tw-text-[var(--content-secondary)]", compactClasses, className),
|
|
59
58
|
style: {
|
|
60
59
|
...style,
|
|
61
60
|
width
|
|
@@ -81,7 +80,7 @@ var Input = forwardRef((props, ref) => {
|
|
|
81
80
|
ref: inputRef,
|
|
82
81
|
id,
|
|
83
82
|
type: type || "text",
|
|
84
|
-
className: "tw-min-w-0 tw-flex-1 tw-self-stretch tw-border-0 tw-bg-
|
|
83
|
+
className: "tw-min-w-0 tw-flex-1 tw-self-stretch tw-border-0 tw-bg-[var(--action-ghost-normal)] tw-px-2 tw-text-[var(--content-primary)] tw-text-inherit tw-outline-none",
|
|
85
84
|
value: currentValue,
|
|
86
85
|
onChange: handleChange,
|
|
87
86
|
onBlur: (e) => {
|
|
@@ -112,7 +111,7 @@ var Input = forwardRef((props, ref) => {
|
|
|
112
111
|
onClick: handleClear,
|
|
113
112
|
children: /* @__PURE__ */ jsx(Memo, {
|
|
114
113
|
size: 16,
|
|
115
|
-
color: "var(--
|
|
114
|
+
color: "var(--content-secondary)"
|
|
116
115
|
})
|
|
117
116
|
}),
|
|
118
117
|
suffix && /* @__PURE__ */ jsx("span", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Input/components/Input/index.tsx"],"sourcesContent":["import React, {\n ReactNode,\n forwardRef,\n useContext,\n useRef,\n useState,\n} from 'react';\nimport DisabledContext from '../../../ConfigProvider/DisabledContext';\nimport SizeContext, { SizeType } from '../../../ConfigProvider/sizeContext';\nimport { CloseCircleFill } from '../../../Icon';\nimport { cn } from '../../../lib/utils';\nimport { useCompactItemContext } from '../../../Space/CompactContext';\n\ninterface IShowCountProps {\n formatter: (args: { count: number; maxLength?: number }) => string;\n}\nexport type TSize = SizeType;\nexport type InputRef = HTMLInputElement & {\n /** antd v4 compat — points to the underlying <input> element */\n input?: HTMLInputElement | null;\n};\n\ntype ChangeEventHandler = (e: React.ChangeEvent<HTMLInputElement>) => void;\n\nexport interface IInputProps\n extends Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n | 'size'\n | 'prefix'\n | 'value'\n | 'defaultValue'\n | 'onChange'\n | 'disabled'\n | 'type'\n | 'max'\n > {\n addonAfter?: ReactNode;\n addonBefore?: ReactNode;\n size?: TSize;\n id?: string;\n prefix?: ReactNode;\n suffix?: ReactNode;\n allowClear?: boolean;\n disabled?: boolean;\n showCount?: boolean | IShowCountProps;\n maxLength?: number;\n minLength?: number;\n max?: number;\n value?: string;\n defaultValue?: string;\n onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;\n onChange?: ChangeEventHandler;\n className?: string;\n style?: React.CSSProperties;\n placeholder?: string;\n type?: string;\n bordered?: boolean;\n status?: 'error' | 'warning' | '';\n autoComplete?: string;\n autoFocus?: boolean;\n readOnly?: boolean;\n width?: number | string;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n onCompositionStart?: React.CompositionEventHandler<HTMLInputElement>;\n onCompositionEnd?: React.CompositionEventHandler<HTMLInputElement>;\n /** 透传到内部 input 元素的 data-testid,用于自动化测试定位 */\n 'data-testid'?: string;\n /** 透传到内部 input 元素的 aria-label,用于可访问性与自动化测试定位 */\n 'aria-label'?: string;\n}\n\nexport function getSizeType(sizeType: TSize): TSize {\n if (['small', 'middle', 'large'].includes(sizeType || '')) {\n return sizeType;\n }\n return 'middle';\n}\n\nconst Input = forwardRef<InputRef, IInputProps>((props, ref) => {\n const {\n size: customSize,\n className,\n bordered = true,\n status,\n disabled,\n allowClear,\n prefix,\n suffix,\n addonBefore,\n addonAfter,\n showCount,\n maxLength,\n minLength,\n value: controlledValue,\n defaultValue,\n onChange,\n onPressEnter,\n onBlur,\n onFocus,\n onKeyDown,\n onCompositionStart,\n onCompositionEnd,\n placeholder,\n type,\n id,\n autoComplete = 'off',\n autoFocus,\n readOnly,\n width,\n style,\n 'data-testid': dataTestid,\n 'aria-label': ariaLabel,\n ...restInputProps\n } = props;\n\n const contextDisabled = useContext(DisabledContext);\n const mergedDisabled = disabled ?? contextDisabled;\n\n const contentSize = useContext(SizeContext);\n const { compactSize, compactItemClassnames } =\n useCompactItemContext('ald-input');\n const size = customSize || compactSize || contentSize || 'middle';\n\n const isControlled = 'value' in props;\n const [innerValue, setInnerValue] = useState(defaultValue ?? '');\n const currentValue = isControlled ? controlledValue ?? '' : innerValue;\n const [focused, setFocused] = useState(false);\n const inputRef = useRef<HTMLInputElement>(null);\n\n React.useImperativeHandle(ref, () => {\n const el = inputRef.current!;\n // Expose .input for antd v4 compat (ref.current.input.focus())\n (el as InputRef).input = el;\n return el as InputRef;\n });\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (!isControlled) setInnerValue(e.target.value);\n onChange?.(e);\n };\n\n const handleClear = () => {\n const nativeEvent = new Event('input', { bubbles: true });\n if (inputRef.current) {\n const nativeSetter = Object.getOwnPropertyDescriptor(\n HTMLInputElement.prototype,\n 'value',\n )?.set;\n nativeSetter?.call(inputRef.current, '');\n inputRef.current.dispatchEvent(nativeEvent);\n }\n if (!isControlled) setInnerValue('');\n onChange?.({\n target: { value: '' },\n } as React.ChangeEvent<HTMLInputElement>);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter') onPressEnter?.(e);\n onKeyDown?.(e);\n };\n\n const showClearIcon = allowClear && currentValue && !mergedDisabled;\n\n const countInfo =\n showCount && typeof showCount === 'object'\n ? showCount.formatter({\n count: currentValue.length,\n maxLength,\n })\n : showCount\n ? `${currentValue.length}${maxLength ? `/${maxLength}` : ''}`\n : null;\n\n // Build compact-mode border-radius and margin overrides\n const compactClasses = compactItemClassnames\n ? cn(\n !compactItemClassnames['ald-input-compact-first-item'] &&\n '!tw-rounded-l-none',\n !compactItemClassnames['ald-input-compact-last-item'] &&\n '!tw-rounded-r-none',\n !compactItemClassnames['ald-input-compact-first-item'] && '-tw-ml-px',\n )\n : undefined;\n\n return (\n <span\n className={cn(\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ald-input ant-input-affix-wrapper tw-inline-flex tw-w-full tw-items-center tw-bg-[var(--interaction-background-form-field)]',\n bordered &&\n 'tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--interaction-border-neutral-normal)]',\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n // focus 仅变 border-color,不加额外 box-shadow/outline。\n // 消费方通过 CSS 将 border 设为 0 后 focus 高亮自然消失,和 antd 行为一致。\n focused &&\n 'ant-input-affix-wrapper-focused tw-border-[var(--interaction-focus-default)]',\n !mergedDisabled &&\n !focused &&\n 'hover:tw-border-[var(--interaction-border-hover)]',\n `ald-input-${getSizeType(size)}`,\n size === 'small' && 'tw-h-7 tw-text-xs',\n size === 'large' && 'tw-h-9 tw-text-sm',\n (size === 'middle' || !size) && 'tw-h-8 tw-text-sm',\n status === 'error' &&\n `ald-input-error tw-border-[var(--border-negative-strong)]`,\n status === 'warning' &&\n `ald-input-warning tw-border-[var(--border-warning-subtle)]`,\n mergedDisabled &&\n 'ald-input-disabled tw-cursor-not-allowed tw-bg-[var(--global-cool-gray-alpha-50)] tw-text-[var(--content-secondary)]',\n compactClasses,\n className,\n )}\n style={{\n ...style,\n width,\n }}\n onMouseDown={(e) => {\n // 点击 wrapper 非 input 区域时:\n // 如果 input 已聚焦 → preventDefault 防止点击 wrapper 导致丢焦\n // 如果 input 未聚焦 → 不阻止默认行为,让浏览器正常处理 blur 上一个元素\n if (e.target !== inputRef.current) {\n if (document.activeElement === inputRef.current) {\n e.preventDefault();\n }\n }\n }}\n onMouseUp={(e) => {\n // 在 mouseUp 时将焦点转发给内部 input(兼容 prefix/suffix/padding 区域的点击)\n if (e.target !== inputRef.current && inputRef.current) {\n inputRef.current.focus();\n }\n }}\n >\n {addonBefore && (\n <span className=\"ald-input-addon tw-flex tw-shrink-0 tw-items-center tw-self-stretch tw-border-r tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-neutral-subtle)] tw-px-3 tw-text-[var(--content-secondary)]\">\n {addonBefore}\n </span>\n )}\n {/* antd 兼容:保留 ant-input-prefix class,消费方 CSS 可能依赖该选择器 */}\n {prefix && (\n <span className=\"ald-input-prefix ant-input-prefix tw-flex tw-items-center tw-pl-2 tw-text-[var(--content-secondary)]\">\n {prefix}\n </span>\n )}\n <input\n ref={inputRef}\n id={id}\n type={type || 'text'}\n className=\"tw-min-w-0 tw-flex-1 tw-self-stretch tw-border-0 tw-bg-transparent tw-px-2 tw-text-[var(--content-primary)] tw-text-inherit tw-outline-none\"\n value={currentValue}\n onChange={handleChange}\n onBlur={(e) => {\n setFocused(false);\n onBlur?.(e);\n }}\n onFocus={(e) => {\n setFocused(true);\n onFocus?.(e);\n }}\n onKeyDown={handleKeyDown}\n onCompositionStart={onCompositionStart}\n onCompositionEnd={onCompositionEnd}\n disabled={mergedDisabled}\n placeholder={placeholder}\n maxLength={maxLength}\n minLength={minLength}\n autoComplete={autoComplete}\n autoFocus={autoFocus}\n readOnly={readOnly}\n spellCheck={false}\n data-testid={dataTestid}\n aria-label={ariaLabel}\n {...restInputProps}\n />\n {showClearIcon && (\n <span\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n className=\"ald-input-clear ant-input-clear-icon tw-flex tw-cursor-pointer tw-items-center tw-pr-1\"\n onClick={handleClear}\n >\n <CloseCircleFill size={16} color=\"var(--alias-colors-icon-subtle)\" />\n </span>\n )}\n {/* antd 兼容:保留 ant-input-suffix class,消费方 CSS 可能依赖该选择器 */}\n {suffix && (\n <span className=\"ald-input-suffix ant-input-suffix tw-flex tw-items-center tw-pr-2 tw-text-[var(--content-secondary)]\">\n {suffix}\n </span>\n )}\n {countInfo && (\n <span className=\"ald-input-count tw-pr-2 tw-text-xs tw-text-[var(--content-tertiary)]\">\n {countInfo}\n </span>\n )}\n {addonAfter && (\n <span className=\"ald-input-addon tw-border-l tw-border-solid tw-border-[var(--border-default)] tw-px-2 tw-text-[var(--content-secondary)]\">\n {addonAfter}\n </span>\n )}\n </span>\n );\n});\n\nexport default Input;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Input/components/Input/index.tsx"],"sourcesContent":["import React, {\n ReactNode,\n forwardRef,\n useContext,\n useRef,\n useState,\n} from 'react';\nimport DisabledContext from '../../../ConfigProvider/DisabledContext';\nimport SizeContext, { SizeType } from '../../../ConfigProvider/sizeContext';\nimport { CloseCircleFill } from '../../../Icon';\nimport { cn } from '../../../lib/utils';\nimport { useCompactItemContext } from '../../../Space/CompactContext';\n\ninterface IShowCountProps {\n formatter: (args: { count: number; maxLength?: number }) => string;\n}\nexport type TSize = SizeType;\nexport type InputRef = HTMLInputElement & {\n /** antd v4 compat — points to the underlying <input> element */\n input?: HTMLInputElement | null;\n};\n\ntype ChangeEventHandler = (e: React.ChangeEvent<HTMLInputElement>) => void;\n\nexport interface IInputProps\n extends Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n | 'size'\n | 'prefix'\n | 'value'\n | 'defaultValue'\n | 'onChange'\n | 'disabled'\n | 'type'\n | 'max'\n > {\n addonAfter?: ReactNode;\n addonBefore?: ReactNode;\n size?: TSize;\n id?: string;\n prefix?: ReactNode;\n suffix?: ReactNode;\n allowClear?: boolean;\n disabled?: boolean;\n showCount?: boolean | IShowCountProps;\n maxLength?: number;\n minLength?: number;\n max?: number;\n value?: string;\n defaultValue?: string;\n onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;\n onChange?: ChangeEventHandler;\n className?: string;\n style?: React.CSSProperties;\n placeholder?: string;\n type?: string;\n bordered?: boolean;\n status?: 'error' | 'warning' | '';\n autoComplete?: string;\n autoFocus?: boolean;\n readOnly?: boolean;\n width?: number | string;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n onCompositionStart?: React.CompositionEventHandler<HTMLInputElement>;\n onCompositionEnd?: React.CompositionEventHandler<HTMLInputElement>;\n /** 透传到内部 input 元素的 data-testid,用于自动化测试定位 */\n 'data-testid'?: string;\n /** 透传到内部 input 元素的 aria-label,用于可访问性与自动化测试定位 */\n 'aria-label'?: string;\n}\n\nexport function getSizeType(sizeType: TSize): TSize {\n if (['small', 'middle', 'large'].includes(sizeType || '')) {\n return sizeType;\n }\n return 'middle';\n}\n\nconst Input = forwardRef<InputRef, IInputProps>((props, ref) => {\n const {\n size: customSize,\n className,\n bordered = true,\n status,\n disabled,\n allowClear,\n prefix,\n suffix,\n addonBefore,\n addonAfter,\n showCount,\n maxLength,\n minLength,\n value: controlledValue,\n defaultValue,\n onChange,\n onPressEnter,\n onBlur,\n onFocus,\n onKeyDown,\n onCompositionStart,\n onCompositionEnd,\n placeholder,\n type,\n id,\n autoComplete = 'off',\n autoFocus,\n readOnly,\n width,\n style,\n 'data-testid': dataTestid,\n 'aria-label': ariaLabel,\n ...restInputProps\n } = props;\n\n const contextDisabled = useContext(DisabledContext);\n const mergedDisabled = disabled ?? contextDisabled;\n\n const contentSize = useContext(SizeContext);\n const { compactSize, compactItemClassnames } =\n useCompactItemContext('ald-input');\n const size = customSize || compactSize || contentSize || 'middle';\n\n const isControlled = 'value' in props;\n const [innerValue, setInnerValue] = useState(defaultValue ?? '');\n const currentValue = isControlled ? controlledValue ?? '' : innerValue;\n const [focused, setFocused] = useState(false);\n const inputRef = useRef<HTMLInputElement>(null);\n\n React.useImperativeHandle(ref, () => {\n const el = inputRef.current!;\n // Expose .input for antd v4 compat (ref.current.input.focus())\n (el as InputRef).input = el;\n return el as InputRef;\n });\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (!isControlled) setInnerValue(e.target.value);\n onChange?.(e);\n };\n\n const handleClear = () => {\n // 通过原生 input 事件统一触发 React onChange,确保事件契约完整且只回调一次。\n const nativeEvent = new Event('input', { bubbles: true });\n if (inputRef.current) {\n const nativeSetter = Object.getOwnPropertyDescriptor(\n HTMLInputElement.prototype,\n 'value',\n )?.set;\n nativeSetter?.call(inputRef.current, '');\n inputRef.current.dispatchEvent(nativeEvent);\n }\n if (!isControlled) setInnerValue('');\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter') onPressEnter?.(e);\n onKeyDown?.(e);\n };\n\n const showClearIcon = allowClear && currentValue && !mergedDisabled;\n\n const countInfo =\n showCount && typeof showCount === 'object'\n ? showCount.formatter({\n count: currentValue.length,\n maxLength,\n })\n : showCount\n ? `${currentValue.length}${maxLength ? `/${maxLength}` : ''}`\n : null;\n\n // Build compact-mode border-radius and margin overrides\n const compactClasses = compactItemClassnames\n ? cn(\n !compactItemClassnames['ald-input-compact-first-item'] &&\n '!tw-rounded-l-none',\n !compactItemClassnames['ald-input-compact-last-item'] &&\n '!tw-rounded-r-none',\n !compactItemClassnames['ald-input-compact-first-item'] && '-tw-ml-px',\n )\n : undefined;\n\n return (\n <span\n className={cn(\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n 'ald-input ant-input-affix-wrapper tw-inline-flex tw-w-full tw-items-center tw-bg-[var(--background-default)]',\n bordered &&\n 'tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)]',\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n // focus 仅变 border-color,不加额外 box-shadow/outline。\n // 消费方通过 CSS 将 border 设为 0 后 focus 高亮自然消失,和 antd 行为一致。\n focused &&\n 'ant-input-affix-wrapper-focused tw-border-[var(--border-brand-strong)]',\n !mergedDisabled &&\n !focused &&\n 'hover:tw-border-[var(--border-brand-strong)]',\n `ald-input-${getSizeType(size)}`,\n size === 'small' && 'tw-h-7 tw-text-xs',\n size === 'large' && 'tw-h-9 tw-text-sm',\n (size === 'middle' || !size) && 'tw-h-8 tw-text-sm',\n status === 'error' &&\n `ald-input-error tw-border-[var(--border-negative-strong)]`,\n status === 'warning' &&\n `ald-input-warning tw-border-[var(--border-warning-subtle)]`,\n mergedDisabled &&\n 'ald-input-disabled tw-cursor-not-allowed tw-bg-[var(--background-neutral-on-subtle)] tw-text-[var(--content-secondary)]',\n compactClasses,\n className,\n )}\n style={{\n ...style,\n width,\n }}\n onMouseDown={(e) => {\n // 点击 wrapper 非 input 区域时:\n // 如果 input 已聚焦 → preventDefault 防止点击 wrapper 导致丢焦\n // 如果 input 未聚焦 → 不阻止默认行为,让浏览器正常处理 blur 上一个元素\n if (e.target !== inputRef.current) {\n if (document.activeElement === inputRef.current) {\n e.preventDefault();\n }\n }\n }}\n onMouseUp={(e) => {\n // 在 mouseUp 时将焦点转发给内部 input(兼容 prefix/suffix/padding 区域的点击)\n if (e.target !== inputRef.current && inputRef.current) {\n inputRef.current.focus();\n }\n }}\n >\n {addonBefore && (\n <span className=\"ald-input-addon tw-flex tw-shrink-0 tw-items-center tw-self-stretch tw-border-r tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-neutral-subtle)] tw-px-3 tw-text-[var(--content-secondary)]\">\n {addonBefore}\n </span>\n )}\n {/* antd 兼容:保留 ant-input-prefix class,消费方 CSS 可能依赖该选择器 */}\n {prefix && (\n <span className=\"ald-input-prefix ant-input-prefix tw-flex tw-items-center tw-pl-2 tw-text-[var(--content-secondary)]\">\n {prefix}\n </span>\n )}\n <input\n ref={inputRef}\n id={id}\n type={type || 'text'}\n className=\"tw-min-w-0 tw-flex-1 tw-self-stretch tw-border-0 tw-bg-[var(--action-ghost-normal)] tw-px-2 tw-text-[var(--content-primary)] tw-text-inherit tw-outline-none\"\n value={currentValue}\n onChange={handleChange}\n onBlur={(e) => {\n setFocused(false);\n onBlur?.(e);\n }}\n onFocus={(e) => {\n setFocused(true);\n onFocus?.(e);\n }}\n onKeyDown={handleKeyDown}\n onCompositionStart={onCompositionStart}\n onCompositionEnd={onCompositionEnd}\n disabled={mergedDisabled}\n placeholder={placeholder}\n maxLength={maxLength}\n minLength={minLength}\n autoComplete={autoComplete}\n autoFocus={autoFocus}\n readOnly={readOnly}\n spellCheck={false}\n data-testid={dataTestid}\n aria-label={ariaLabel}\n {...restInputProps}\n />\n {showClearIcon && (\n <span\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n className=\"ald-input-clear ant-input-clear-icon tw-flex tw-cursor-pointer tw-items-center tw-pr-1\"\n onClick={handleClear}\n >\n <CloseCircleFill size={16} color=\"var(--content-secondary)\" />\n </span>\n )}\n {/* antd 兼容:保留 ant-input-suffix class,消费方 CSS 可能依赖该选择器 */}\n {suffix && (\n <span className=\"ald-input-suffix ant-input-suffix tw-flex tw-items-center tw-pr-2 tw-text-[var(--content-secondary)]\">\n {suffix}\n </span>\n )}\n {countInfo && (\n <span className=\"ald-input-count tw-pr-2 tw-text-xs tw-text-[var(--content-tertiary)]\">\n {countInfo}\n </span>\n )}\n {addonAfter && (\n <span className=\"ald-input-addon tw-border-l tw-border-solid tw-border-[var(--border-default)] tw-px-2 tw-text-[var(--content-secondary)]\">\n {addonAfter}\n </span>\n )}\n </span>\n );\n});\n\nexport default Input;\n"],"mappings":"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"}
|
|
@@ -33,12 +33,12 @@ var TextArea_default = forwardRef((props, ref) => {
|
|
|
33
33
|
const minRows = typeof autoSize === "object" ? autoSize.minRows : void 0;
|
|
34
34
|
const maxRows = typeof autoSize === "object" ? autoSize.maxRows : void 0;
|
|
35
35
|
return /* @__PURE__ */ jsxs("div", {
|
|
36
|
-
className: cn("ald-input ald-input-textarea tw-relative", `ald-input-textarea-${getSizeType(size)}`, isBordered && "tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-
|
|
36
|
+
className: cn("ald-input ald-input-textarea tw-relative", `ald-input-textarea-${getSizeType(size)}`, isBordered && "tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)]", mergedDisabled && "ald-input-disabled tw-opacity-50", className),
|
|
37
37
|
style,
|
|
38
38
|
children: [
|
|
39
39
|
/* @__PURE__ */ jsx("textarea", {
|
|
40
40
|
ref: textareaRef,
|
|
41
|
-
className: "tw-w-full tw-resize-y tw-border-0 tw-bg-
|
|
41
|
+
className: "tw-w-full tw-resize-y tw-border-0 tw-bg-[var(--action-ghost-normal)] tw-px-3 tw-py-2 tw-text-sm tw-text-[var(--content-primary)] tw-outline-none",
|
|
42
42
|
value: currentValue,
|
|
43
43
|
onChange: handleChange,
|
|
44
44
|
onBlur,
|
|
@@ -63,7 +63,7 @@ var TextArea_default = forwardRef((props, ref) => {
|
|
|
63
63
|
onClick: handleClear,
|
|
64
64
|
children: /* @__PURE__ */ jsx(Memo, {
|
|
65
65
|
size: 16,
|
|
66
|
-
color: "var(--
|
|
66
|
+
color: "var(--content-secondary)"
|
|
67
67
|
})
|
|
68
68
|
}),
|
|
69
69
|
showCount && /* @__PURE__ */ jsx("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Input/components/TextArea/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useRef, useState } from 'react';\nimport DisabledContext from '../../../ConfigProvider/DisabledContext';\nimport SizeContext from '../../../ConfigProvider/sizeContext';\nimport { CloseCircleFill } from '../../../Icon';\nimport { cn } from '../../../lib/utils';\nimport { TSize, getSizeType } from '../Input';\n\nexport type TextAreaRef = HTMLTextAreaElement;\n\nexport interface ITextAreaProps\n extends Omit<\n React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n 'size' | 'value' | 'defaultValue' | 'onChange' | 'disabled' | 'rows'\n > {\n autoFocus?: boolean;\n allowClear?: boolean;\n autoSize?: boolean | { minRows?: number; maxRows?: number };\n defaultValue?: string;\n maxLength?: number;\n showCount?:\n | boolean\n | { formatter: (args: { count: number; maxLength?: number }) => string };\n value?: string;\n onPressEnter?: React.KeyboardEventHandler<HTMLTextAreaElement>;\n onResize?: (size: { width: number; height: number }) => void;\n border?: boolean;\n bordered?: boolean;\n className?: string;\n size?: TSize;\n disabled?: boolean;\n placeholder?: string;\n rows?: number;\n onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;\n onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;\n onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;\n onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;\n onCompositionStart?: React.CompositionEventHandler<HTMLTextAreaElement>;\n onCompositionEnd?: React.CompositionEventHandler<HTMLTextAreaElement>;\n style?: React.CSSProperties;\n}\n\nexport default forwardRef<TextAreaRef, ITextAreaProps>((props, ref) => {\n const {\n bordered,\n border,\n size: customSize,\n disabled,\n className = '',\n allowClear = false,\n value: controlledValue,\n defaultValue,\n onChange,\n onPressEnter,\n maxLength,\n showCount,\n autoSize,\n placeholder,\n rows,\n onBlur,\n onFocus,\n onKeyDown,\n onCompositionStart,\n onCompositionEnd,\n style,\n ...restTextAreaProps\n } = props;\n\n const isBordered = bordered ?? border ?? true;\n\n const contextDisabled = useContext(DisabledContext);\n const mergedDisabled = disabled ?? contextDisabled;\n\n const contentSize = useContext(SizeContext);\n const size = customSize || contentSize || 'middle';\n const isControlled = 'value' in props;\n const [innerValue, setInnerValue] = useState(defaultValue ?? '');\n const currentValue = isControlled ? controlledValue ?? '' : innerValue;\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n React.useImperativeHandle(ref, () => textareaRef.current!);\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n if (!isControlled) setInnerValue(e.target.value);\n onChange?.(e);\n };\n\n const handleClear = () => {\n if (!isControlled) setInnerValue('');\n onChange?.({\n target: { value: '' },\n } as React.ChangeEvent<HTMLTextAreaElement>);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (e.key === 'Enter') onPressEnter?.(e);\n onKeyDown?.(e);\n };\n\n const minRows = typeof autoSize === 'object' ? autoSize.minRows : undefined;\n const maxRows = typeof autoSize === 'object' ? autoSize.maxRows : undefined;\n\n return (\n <div\n className={cn(\n 'ald-input ald-input-textarea tw-relative',\n `ald-input-textarea-${getSizeType(size)}`,\n isBordered &&\n 'tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Input/components/TextArea/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useRef, useState } from 'react';\nimport DisabledContext from '../../../ConfigProvider/DisabledContext';\nimport SizeContext from '../../../ConfigProvider/sizeContext';\nimport { CloseCircleFill } from '../../../Icon';\nimport { cn } from '../../../lib/utils';\nimport { TSize, getSizeType } from '../Input';\n\nexport type TextAreaRef = HTMLTextAreaElement;\n\nexport interface ITextAreaProps\n extends Omit<\n React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n 'size' | 'value' | 'defaultValue' | 'onChange' | 'disabled' | 'rows'\n > {\n autoFocus?: boolean;\n allowClear?: boolean;\n autoSize?: boolean | { minRows?: number; maxRows?: number };\n defaultValue?: string;\n maxLength?: number;\n showCount?:\n | boolean\n | { formatter: (args: { count: number; maxLength?: number }) => string };\n value?: string;\n onPressEnter?: React.KeyboardEventHandler<HTMLTextAreaElement>;\n onResize?: (size: { width: number; height: number }) => void;\n border?: boolean;\n bordered?: boolean;\n className?: string;\n size?: TSize;\n disabled?: boolean;\n placeholder?: string;\n rows?: number;\n onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;\n onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;\n onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;\n onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;\n onCompositionStart?: React.CompositionEventHandler<HTMLTextAreaElement>;\n onCompositionEnd?: React.CompositionEventHandler<HTMLTextAreaElement>;\n style?: React.CSSProperties;\n}\n\nexport default forwardRef<TextAreaRef, ITextAreaProps>((props, ref) => {\n const {\n bordered,\n border,\n size: customSize,\n disabled,\n className = '',\n allowClear = false,\n value: controlledValue,\n defaultValue,\n onChange,\n onPressEnter,\n maxLength,\n showCount,\n autoSize,\n placeholder,\n rows,\n onBlur,\n onFocus,\n onKeyDown,\n onCompositionStart,\n onCompositionEnd,\n style,\n ...restTextAreaProps\n } = props;\n\n const isBordered = bordered ?? border ?? true;\n\n const contextDisabled = useContext(DisabledContext);\n const mergedDisabled = disabled ?? contextDisabled;\n\n const contentSize = useContext(SizeContext);\n const size = customSize || contentSize || 'middle';\n const isControlled = 'value' in props;\n const [innerValue, setInnerValue] = useState(defaultValue ?? '');\n const currentValue = isControlled ? controlledValue ?? '' : innerValue;\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n React.useImperativeHandle(ref, () => textareaRef.current!);\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n if (!isControlled) setInnerValue(e.target.value);\n onChange?.(e);\n };\n\n const handleClear = () => {\n if (!isControlled) setInnerValue('');\n onChange?.({\n target: { value: '' },\n } as React.ChangeEvent<HTMLTextAreaElement>);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (e.key === 'Enter') onPressEnter?.(e);\n onKeyDown?.(e);\n };\n\n const minRows = typeof autoSize === 'object' ? autoSize.minRows : undefined;\n const maxRows = typeof autoSize === 'object' ? autoSize.maxRows : undefined;\n\n return (\n <div\n className={cn(\n 'ald-input ald-input-textarea tw-relative',\n `ald-input-textarea-${getSizeType(size)}`,\n isBordered &&\n 'tw-rounded-r-75 tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)]',\n mergedDisabled && 'ald-input-disabled tw-opacity-50',\n className,\n )}\n style={style}\n >\n <textarea\n ref={textareaRef}\n className=\"tw-w-full tw-resize-y tw-border-0 tw-bg-[var(--action-ghost-normal)] tw-px-3 tw-py-2 tw-text-sm tw-text-[var(--content-primary)] tw-outline-none\"\n value={currentValue}\n onChange={handleChange}\n onBlur={onBlur}\n onFocus={onFocus}\n onKeyDown={handleKeyDown}\n onCompositionStart={onCompositionStart}\n onCompositionEnd={onCompositionEnd}\n disabled={mergedDisabled}\n placeholder={placeholder}\n maxLength={maxLength}\n rows={rows || (minRows ?? 3)}\n spellCheck={false}\n autoComplete=\"off\"\n {...restTextAreaProps}\n style={{\n minHeight: minRows ? `${minRows * 22}px` : undefined,\n maxHeight: maxRows ? `${maxRows * 22}px` : undefined,\n }}\n />\n {allowClear && currentValue && !mergedDisabled && (\n <span\n className=\"tw-absolute tw-right-2 tw-top-2 tw-cursor-pointer\"\n onClick={handleClear}\n >\n <CloseCircleFill size={16} color=\"var(--content-secondary)\" />\n </span>\n )}\n {showCount && (\n <div className=\"tw-px-2 tw-pb-1 tw-text-right tw-text-xs tw-text-[var(--content-tertiary)]\">\n {typeof showCount === 'object'\n ? showCount.formatter({ count: currentValue.length, maxLength })\n : `${currentValue.length}${maxLength ? `/${maxLength}` : ''}`}\n </div>\n )}\n </div>\n );\n});\n"],"mappings":";;;;;;;;AAyCA,IAAA,mBAAe,YAAyC,OAAO,QAAQ;CACrE,MAAM,EACJ,UACA,QACA,MAAM,YACN,UACA,YAAY,IACZ,aAAa,OACb,OAAO,iBACP,cACA,UACA,cACA,WACA,WACA,UACA,aACA,MACA,QACA,SACA,WACA,oBACA,kBACA,OACA,GAAG,sBACD;CAEJ,MAAM,aAAa,YAAY,UAAU;CAEzC,MAAM,kBAAkB,WAAW,gBAAgB;CACnD,MAAM,iBAAiB,YAAY;CAEnC,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,OAAO,cAAc,eAAe;CAC1C,MAAM,eAAe,WAAW;CAChC,MAAM,CAAC,YAAY,iBAAiB,SAAS,gBAAgB,GAAG;CAChE,MAAM,eAAe,eAAe,mBAAmB,KAAK;CAC5D,MAAM,cAAc,OAA4B,KAAK;AAErD,OAAM,oBAAoB,WAAW,YAAY,QAAS;CAE1D,MAAM,gBAAgB,MAA8C;AAClE,MAAI,CAAC,aAAc,eAAc,EAAE,OAAO,MAAM;AAChD,aAAW,EAAE;;CAGf,MAAM,oBAAoB;AACxB,MAAI,CAAC,aAAc,eAAc,GAAG;AACpC,aAAW,EACT,QAAQ,EAAE,OAAO,IAAI,EACtB,CAA2C;;CAG9C,MAAM,iBAAiB,MAAgD;AACrE,MAAI,EAAE,QAAQ,QAAS,gBAAe,EAAE;AACxC,cAAY,EAAE;;CAGhB,MAAM,UAAU,OAAO,aAAa,WAAW,SAAS,UAAU;CAClE,MAAM,UAAU,OAAO,aAAa,WAAW,SAAS,UAAU;AAElE,QACE,qBAAC,OAAD;EACE,WAAW,GACT,4CACA,sBAAsB,YAAY,KAAK,IACvC,cACE,sFACF,kBAAkB,oCAClB,UACD;EACM;YATT;GAWE,oBAAC,YAAD;IACE,KAAK;IACL,WAAU;IACV,OAAO;IACP,UAAU;IACF;IACC;IACT,WAAW;IACS;IACF;IAClB,UAAU;IACG;IACF;IACX,MAAM,SAAS,WAAW;IAC1B,YAAY;IACZ,cAAa;IACb,GAAI;IACJ,OAAO;KACL,WAAW,UAAU,GAAG,UAAU,GAAG,MAAM;KAC3C,WAAW,UAAU,GAAG,UAAU,GAAG,MAAM;KAC5C;IACD,CAAA;GACD,cAAc,gBAAgB,CAAC,kBAC9B,oBAAC,QAAD;IACE,WAAU;IACV,SAAS;cAET,oBAAC,MAAD;KAAiB,MAAM;KAAI,OAAM;KAA6B,CAAA;IACzD,CAAA;GAER,aACC,oBAAC,OAAD;IAAK,WAAU;cACZ,OAAO,cAAc,WAClB,UAAU,UAAU;KAAE,OAAO,aAAa;KAAQ;KAAW,CAAC,GAC9D,GAAG,aAAa,SAAS,YAAY,IAAI,cAAc;IACvD,CAAA;GAEJ;;EAER"}
|
|
@@ -84,7 +84,7 @@ function InputNumber(props) {
|
|
|
84
84
|
const inputBox = /* @__PURE__ */ jsxs("div", {
|
|
85
85
|
"data-testid": !hasAddon ? dataTestId : void 0,
|
|
86
86
|
"aria-label": !hasAddon ? ariaLabel : void 0,
|
|
87
|
-
className: cn("ald-input-number tw-inline-flex tw-w-[90px] tw-min-w-0 tw-items-center tw-overflow-hidden", bordered && "tw-border tw-border-solid tw-border-[var(--
|
|
87
|
+
className: cn("ald-input-number tw-inline-flex tw-w-[90px] tw-min-w-0 tw-items-center tw-overflow-hidden", bordered && "tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)]", mergedDisabled ? "ald-input-number-disabled tw-cursor-not-allowed tw-bg-[var(--background-neutral-on-subtle)] tw-text-[var(--content-secondary)]" : "tw-bg-[var(--background-default)] tw-text-[var(--content-primary)] hover:tw-border-[var(--border-brand-strong)]", !hasAddon && sizeClasses, hasAddon ? "tw-h-auto tw-flex-1 tw-self-stretch tw-rounded-none" : radiusClasses, status === "error" && "tw-border-[var(--border-negative-strong)]", status === "warning" && "tw-border-[var(--border-warning-subtle)]", "focus-within:tw-border-[var(--border-brand-strong)] focus-within:tw-outline focus-within:tw-outline-1 focus-within:tw-outline-[var(--border-brand-strong)]", !hasAddon && className),
|
|
88
88
|
style: !hasAddon ? style : void 0,
|
|
89
89
|
children: [prefix && /* @__PURE__ */ jsx("span", {
|
|
90
90
|
className: "tw-px-2 tw-text-[var(--content-secondary)]",
|
|
@@ -95,7 +95,7 @@ function InputNumber(props) {
|
|
|
95
95
|
type: "text",
|
|
96
96
|
inputMode: "numeric",
|
|
97
97
|
size: 1,
|
|
98
|
-
className: cn("tw-min-w-0 tw-flex-1 tw-border-0 tw-bg-
|
|
98
|
+
className: cn("tw-min-w-0 tw-flex-1 tw-border-0 tw-bg-[var(--action-ghost-normal)] tw-px-[7px] tw-text-inherit tw-outline-none", mergedDisabled && "tw-cursor-not-allowed tw-text-[var(--content-secondary)]"),
|
|
99
99
|
value: displayValue,
|
|
100
100
|
onChange: handleChange,
|
|
101
101
|
onBlur: handleBlur,
|
|
@@ -115,12 +115,12 @@ function InputNumber(props) {
|
|
|
115
115
|
style,
|
|
116
116
|
children: [
|
|
117
117
|
addonBefore && /* @__PURE__ */ jsx("span", {
|
|
118
|
-
className: cn("ald-input-number-addon tw-flex tw-shrink-0 tw-items-center tw-border tw-border-r-0 tw-border-solid tw-border-[var(--
|
|
118
|
+
className: cn("ald-input-number-addon tw-flex tw-shrink-0 tw-items-center tw-border tw-border-r-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-neutral-subtle)] tw-px-3 tw-text-[var(--content-secondary)]", size === "large" && "tw-rounded-l-[8px]", size === "small" && "tw-rounded-l-[4px]", size !== "large" && size !== "small" && "tw-rounded-l-[6px]"),
|
|
119
119
|
children: addonBefore
|
|
120
120
|
}),
|
|
121
121
|
inputBox,
|
|
122
122
|
addonAfter && /* @__PURE__ */ jsx("span", {
|
|
123
|
-
className: cn("ald-input-number-addon tw-flex tw-shrink-0 tw-items-center tw-border tw-border-l-0 tw-border-solid tw-border-[var(--
|
|
123
|
+
className: cn("ald-input-number-addon tw-flex tw-shrink-0 tw-items-center tw-border tw-border-l-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-neutral-subtle)] tw-px-3 tw-text-[var(--content-secondary)]", size === "large" && "tw-rounded-r-[8px]", size === "small" && "tw-rounded-r-[4px]", size !== "large" && size !== "small" && "tw-rounded-r-[6px]"),
|
|
124
124
|
children: addonAfter
|
|
125
125
|
})
|
|
126
126
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/InputNumber/index.tsx"],"sourcesContent":["import React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { cn } from '../lib/utils';\nimport { IInputNumberProps } from './type';\n\nexport default function InputNumber(props: IInputNumberProps) {\n const {\n className,\n disabled: customDisabled,\n size: customSize,\n status,\n value: controlledValue,\n defaultValue,\n min = -Infinity,\n max = Infinity,\n step = 1,\n precision,\n onChange,\n onPressEnter,\n onBlur,\n onFocus,\n formatter,\n parser,\n prefix,\n addonBefore,\n addonAfter,\n placeholder,\n autoFocus,\n bordered = true,\n keyboard = true,\n readonly: readOnly,\n style,\n id,\n 'data-testid': dataTestId,\n 'aria-label': ariaLabel,\n } = props;\n\n const contentSize = useContext(SizeContext);\n const size = customSize || contentSize || 'middle';\n const disabled = useContext(DisabledContext);\n const mergedDisabled = customDisabled ?? disabled;\n\n const isControlled = 'value' in props;\n const [innerValue, setInnerValue] = useState<number | null | undefined>(\n defaultValue ?? null,\n );\n const currentValue = isControlled ? controlledValue : innerValue;\n\n const [inputStr, setInputStr] = useState(\n currentValue !== null && currentValue !== undefined\n ? String(currentValue)\n : '',\n );\n const inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (currentValue !== null && currentValue !== undefined) {\n setInputStr(String(currentValue));\n } else {\n setInputStr('');\n }\n }, [currentValue]);\n\n const clamp = useCallback(\n (val: number) => {\n let v = Math.max(min, Math.min(max, val));\n if (precision !== undefined) {\n v = Number(v.toFixed(precision));\n }\n return v;\n },\n [min, max, precision],\n );\n\n const updateValue = useCallback(\n (newVal: number | null) => {\n const clamped = newVal !== null ? clamp(newVal) : null;\n if (!isControlled) setInnerValue(clamped);\n onChange?.(clamped);\n },\n [clamp, isControlled, onChange],\n );\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const raw = e.target.value;\n setInputStr(raw);\n if (raw === '') {\n // 清空立即同步到 value,对齐 antd 行为。\n // 否则消费方\"清空后直接点确定\"(未 blur 触发 handleBlur 的 null 兜底)拿到的\n // 仍是旧值,把已清空的筛选条件错误带进 query(被 release-2.3_test 周期实例\n // 更多浮窗实测复现)。\n updateValue(null);\n return;\n }\n if (raw === '-') return;\n const parsed = parser ? parser(raw) : Number(raw);\n if (!isNaN(parsed)) {\n updateValue(parsed);\n }\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n if (inputStr === '' || inputStr === '-') {\n updateValue(null);\n setInputStr('');\n } else {\n const parsed = parser ? parser(inputStr) : Number(inputStr);\n if (!isNaN(parsed)) {\n const clamped = clamp(parsed);\n updateValue(clamped);\n setInputStr(String(clamped));\n }\n }\n onBlur?.(e);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter') {\n onPressEnter?.(e);\n }\n if (!keyboard) return;\n const numStep = typeof step === 'string' ? Number(step) : step;\n if (e.key === 'ArrowUp') {\n e.preventDefault();\n updateValue(clamp((currentValue ?? 0) + numStep));\n } else if (e.key === 'ArrowDown') {\n e.preventDefault();\n updateValue(clamp((currentValue ?? 0) - numStep));\n }\n };\n\n const displayValue = formatter\n ? formatter(currentValue ?? undefined, {\n userTyping: document.activeElement === inputRef.current,\n input: inputStr,\n })\n : inputStr;\n\n const hasAddon = addonBefore || addonAfter;\n\n const sizeClasses = cn(\n size === 'large' && 'ald-input-number-large tw-h-9 tw-text-base',\n size === 'small' && 'ald-input-number-small tw-h-7 tw-text-xs',\n size !== 'large' &&\n size !== 'small' &&\n 'ald-input-number-middle tw-h-8 tw-text-sm',\n );\n\n const radiusClasses = cn(\n size === 'large' && 'tw-rounded-[8px]',\n size === 'small' && 'tw-rounded-[4px]',\n size !== 'large' && size !== 'small' && 'tw-rounded-[6px]',\n );\n\n const inputBox = (\n <div\n data-testid={!hasAddon ? dataTestId : undefined}\n aria-label={!hasAddon ? ariaLabel : undefined}\n className={cn(\n // 默认宽度 90px 与 antd InputNumber 对齐:input 上 size={1} 会让 intrinsic\n // 宽度坍缩到 1 字符,若 wrapper 也不给宽度,整个组件在 flex / inline 上下\n // 文里就只剩 ~9px。消费方可通过 className(`w-[xxx]`)或 style 覆盖。\n 'ald-input-number tw-inline-flex tw-w-[90px] tw-min-w-0 tw-items-center tw-overflow-hidden',\n bordered &&\n 'tw-border tw-border-solid tw-border-[var(--interaction-border-neutral-normal)]',\n mergedDisabled\n ? 'ald-input-number-disabled tw-cursor-not-allowed tw-bg-[var(--global-cool-gray-alpha-50)] tw-text-[var(--content-secondary)]'\n : 'tw-bg-[var(--interaction-background-form-field)] tw-text-[var(--content-primary)] hover:tw-border-[var(--interaction-border-hover)]',\n !hasAddon && sizeClasses,\n hasAddon\n ? 'tw-h-auto tw-flex-1 tw-self-stretch tw-rounded-none'\n : radiusClasses,\n status === 'error' && 'tw-border-[var(--border-negative-strong)]',\n status === 'warning' && 'tw-border-[var(--border-warning-subtle)]',\n 'focus-within:tw-border-[var(--interaction-border-hover)] focus-within:tw-outline focus-within:tw-outline-1 focus-within:tw-outline-[var(--global-blue-500)]',\n !hasAddon && className,\n )}\n style={!hasAddon ? style : undefined}\n >\n {prefix && (\n <span className=\"tw-px-2 tw-text-[var(--content-secondary)]\">\n {prefix}\n </span>\n )}\n <input\n ref={inputRef}\n id={id}\n type=\"text\"\n inputMode=\"numeric\"\n // size=1 让 <input> 的 intrinsic 宽度坍缩到 1 个字符,\n // 在 flex 父容器中按 width / flex-1 受控,避免默认 size=20 把 inline-flex 外层撑出 ~150px 内容宽度。\n size={1}\n className={cn(\n 'tw-min-w-0 tw-flex-1 tw-border-0 tw-bg-transparent tw-px-[7px] tw-text-inherit tw-outline-none',\n mergedDisabled &&\n 'tw-cursor-not-allowed tw-text-[var(--content-secondary)]',\n )}\n value={displayValue}\n onChange={handleChange}\n onBlur={handleBlur}\n onFocus={onFocus}\n onKeyDown={handleKeyDown}\n disabled={mergedDisabled}\n readOnly={readOnly}\n autoFocus={autoFocus}\n placeholder={placeholder}\n />\n </div>\n );\n\n if (!hasAddon) return inputBox;\n\n return (\n <div\n data-testid={dataTestId}\n aria-label={ariaLabel}\n className={cn(\n // 自然宽 = 内部 inputBox 默认 90px + addonBefore/After 内容宽。inline-flex\n // 让外层按内容宽呈现,不再 `tw-w-full` 强吞 flex 父级剩余空间——后者会把\n // 同 flex 行的 Slider 挤成 0 宽(看板\"图形宽度\"行只剩 thumb 圆点的根因)。\n // `tw-min-w-0` 让本身作为 flex item 时受消费方 `flex-basis` / `width`\n // 真正约束——默认 `min-width: auto = min-content` 会被内部 input(90px) +\n // addon 撑到 ~126px,覆盖消费方的 flex-basis。内部 inputBox 已 `tw-min-w-0\n // tw-overflow-hidden`,被约束后内容会按 input flex-1 收缩,不会溢出。\n // 消费方需要撑满显式加 `tw-w-full` className,需要更窄/更宽直接覆盖宽度。\n 'ald-input-number-group tw-inline-flex tw-min-w-0 tw-items-stretch',\n sizeClasses,\n radiusClasses,\n mergedDisabled && 'ald-input-number-disabled',\n className,\n )}\n style={style}\n >\n {addonBefore && (\n <span\n className={cn(\n 'ald-input-number-addon tw-flex tw-shrink-0 tw-items-center tw-border tw-border-r-0 tw-border-solid tw-border-[var(--interaction-border-neutral-normal)] tw-bg-[var(--background-neutral-subtle)] tw-px-3 tw-text-[var(--content-secondary)]',\n size === 'large' && 'tw-rounded-l-[8px]',\n size === 'small' && 'tw-rounded-l-[4px]',\n size !== 'large' && size !== 'small' && 'tw-rounded-l-[6px]',\n )}\n >\n {addonBefore}\n </span>\n )}\n {inputBox}\n {addonAfter && (\n <span\n className={cn(\n 'ald-input-number-addon tw-flex tw-shrink-0 tw-items-center tw-border tw-border-l-0 tw-border-solid tw-border-[var(--interaction-border-neutral-normal)] tw-bg-[var(--background-neutral-subtle)] tw-px-3 tw-text-[var(--content-secondary)]',\n size === 'large' && 'tw-rounded-r-[8px]',\n size === 'small' && 'tw-rounded-r-[4px]',\n size !== 'large' && size !== 'small' && 'tw-rounded-r-[6px]',\n )}\n >\n {addonAfter}\n </span>\n )}\n </div>\n );\n}\n\nexport type { IInputNumberProps };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/InputNumber/index.tsx"],"sourcesContent":["import React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { cn } from '../lib/utils';\nimport { IInputNumberProps } from './type';\n\nexport default function InputNumber(props: IInputNumberProps) {\n const {\n className,\n disabled: customDisabled,\n size: customSize,\n status,\n value: controlledValue,\n defaultValue,\n min = -Infinity,\n max = Infinity,\n step = 1,\n precision,\n onChange,\n onPressEnter,\n onBlur,\n onFocus,\n formatter,\n parser,\n prefix,\n addonBefore,\n addonAfter,\n placeholder,\n autoFocus,\n bordered = true,\n keyboard = true,\n readonly: readOnly,\n style,\n id,\n 'data-testid': dataTestId,\n 'aria-label': ariaLabel,\n } = props;\n\n const contentSize = useContext(SizeContext);\n const size = customSize || contentSize || 'middle';\n const disabled = useContext(DisabledContext);\n const mergedDisabled = customDisabled ?? disabled;\n\n const isControlled = 'value' in props;\n const [innerValue, setInnerValue] = useState<number | null | undefined>(\n defaultValue ?? null,\n );\n const currentValue = isControlled ? controlledValue : innerValue;\n\n const [inputStr, setInputStr] = useState(\n currentValue !== null && currentValue !== undefined\n ? String(currentValue)\n : '',\n );\n const inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (currentValue !== null && currentValue !== undefined) {\n setInputStr(String(currentValue));\n } else {\n setInputStr('');\n }\n }, [currentValue]);\n\n const clamp = useCallback(\n (val: number) => {\n let v = Math.max(min, Math.min(max, val));\n if (precision !== undefined) {\n v = Number(v.toFixed(precision));\n }\n return v;\n },\n [min, max, precision],\n );\n\n const updateValue = useCallback(\n (newVal: number | null) => {\n const clamped = newVal !== null ? clamp(newVal) : null;\n if (!isControlled) setInnerValue(clamped);\n onChange?.(clamped);\n },\n [clamp, isControlled, onChange],\n );\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const raw = e.target.value;\n setInputStr(raw);\n if (raw === '') {\n // 清空立即同步到 value,对齐 antd 行为。\n // 否则消费方\"清空后直接点确定\"(未 blur 触发 handleBlur 的 null 兜底)拿到的\n // 仍是旧值,把已清空的筛选条件错误带进 query(被 release-2.3_test 周期实例\n // 更多浮窗实测复现)。\n updateValue(null);\n return;\n }\n if (raw === '-') return;\n const parsed = parser ? parser(raw) : Number(raw);\n if (!isNaN(parsed)) {\n updateValue(parsed);\n }\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n if (inputStr === '' || inputStr === '-') {\n updateValue(null);\n setInputStr('');\n } else {\n const parsed = parser ? parser(inputStr) : Number(inputStr);\n if (!isNaN(parsed)) {\n const clamped = clamp(parsed);\n updateValue(clamped);\n setInputStr(String(clamped));\n }\n }\n onBlur?.(e);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter') {\n onPressEnter?.(e);\n }\n if (!keyboard) return;\n const numStep = typeof step === 'string' ? Number(step) : step;\n if (e.key === 'ArrowUp') {\n e.preventDefault();\n updateValue(clamp((currentValue ?? 0) + numStep));\n } else if (e.key === 'ArrowDown') {\n e.preventDefault();\n updateValue(clamp((currentValue ?? 0) - numStep));\n }\n };\n\n const displayValue = formatter\n ? formatter(currentValue ?? undefined, {\n userTyping: document.activeElement === inputRef.current,\n input: inputStr,\n })\n : inputStr;\n\n const hasAddon = addonBefore || addonAfter;\n\n const sizeClasses = cn(\n size === 'large' && 'ald-input-number-large tw-h-9 tw-text-base',\n size === 'small' && 'ald-input-number-small tw-h-7 tw-text-xs',\n size !== 'large' &&\n size !== 'small' &&\n 'ald-input-number-middle tw-h-8 tw-text-sm',\n );\n\n const radiusClasses = cn(\n size === 'large' && 'tw-rounded-[8px]',\n size === 'small' && 'tw-rounded-[4px]',\n size !== 'large' && size !== 'small' && 'tw-rounded-[6px]',\n );\n\n const inputBox = (\n <div\n data-testid={!hasAddon ? dataTestId : undefined}\n aria-label={!hasAddon ? ariaLabel : undefined}\n className={cn(\n // 默认宽度 90px 与 antd InputNumber 对齐:input 上 size={1} 会让 intrinsic\n // 宽度坍缩到 1 字符,若 wrapper 也不给宽度,整个组件在 flex / inline 上下\n // 文里就只剩 ~9px。消费方可通过 className(`w-[xxx]`)或 style 覆盖。\n 'ald-input-number tw-inline-flex tw-w-[90px] tw-min-w-0 tw-items-center tw-overflow-hidden',\n bordered &&\n 'tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)]',\n mergedDisabled\n ? 'ald-input-number-disabled tw-cursor-not-allowed tw-bg-[var(--background-neutral-on-subtle)] tw-text-[var(--content-secondary)]'\n : 'tw-bg-[var(--background-default)] tw-text-[var(--content-primary)] hover:tw-border-[var(--border-brand-strong)]',\n !hasAddon && sizeClasses,\n hasAddon\n ? 'tw-h-auto tw-flex-1 tw-self-stretch tw-rounded-none'\n : radiusClasses,\n status === 'error' && 'tw-border-[var(--border-negative-strong)]',\n status === 'warning' && 'tw-border-[var(--border-warning-subtle)]',\n 'focus-within:tw-border-[var(--border-brand-strong)] focus-within:tw-outline focus-within:tw-outline-1 focus-within:tw-outline-[var(--border-brand-strong)]',\n !hasAddon && className,\n )}\n style={!hasAddon ? style : undefined}\n >\n {prefix && (\n <span className=\"tw-px-2 tw-text-[var(--content-secondary)]\">\n {prefix}\n </span>\n )}\n <input\n ref={inputRef}\n id={id}\n type=\"text\"\n inputMode=\"numeric\"\n // size=1 让 <input> 的 intrinsic 宽度坍缩到 1 个字符,\n // 在 flex 父容器中按 width / flex-1 受控,避免默认 size=20 把 inline-flex 外层撑出 ~150px 内容宽度。\n size={1}\n className={cn(\n 'tw-min-w-0 tw-flex-1 tw-border-0 tw-bg-[var(--action-ghost-normal)] tw-px-[7px] tw-text-inherit tw-outline-none',\n mergedDisabled &&\n 'tw-cursor-not-allowed tw-text-[var(--content-secondary)]',\n )}\n value={displayValue}\n onChange={handleChange}\n onBlur={handleBlur}\n onFocus={onFocus}\n onKeyDown={handleKeyDown}\n disabled={mergedDisabled}\n readOnly={readOnly}\n autoFocus={autoFocus}\n placeholder={placeholder}\n />\n </div>\n );\n\n if (!hasAddon) return inputBox;\n\n return (\n <div\n data-testid={dataTestId}\n aria-label={ariaLabel}\n className={cn(\n // 自然宽 = 内部 inputBox 默认 90px + addonBefore/After 内容宽。inline-flex\n // 让外层按内容宽呈现,不再 `tw-w-full` 强吞 flex 父级剩余空间——后者会把\n // 同 flex 行的 Slider 挤成 0 宽(看板\"图形宽度\"行只剩 thumb 圆点的根因)。\n // `tw-min-w-0` 让本身作为 flex item 时受消费方 `flex-basis` / `width`\n // 真正约束——默认 `min-width: auto = min-content` 会被内部 input(90px) +\n // addon 撑到 ~126px,覆盖消费方的 flex-basis。内部 inputBox 已 `tw-min-w-0\n // tw-overflow-hidden`,被约束后内容会按 input flex-1 收缩,不会溢出。\n // 消费方需要撑满显式加 `tw-w-full` className,需要更窄/更宽直接覆盖宽度。\n 'ald-input-number-group tw-inline-flex tw-min-w-0 tw-items-stretch',\n sizeClasses,\n radiusClasses,\n mergedDisabled && 'ald-input-number-disabled',\n className,\n )}\n style={style}\n >\n {addonBefore && (\n <span\n className={cn(\n 'ald-input-number-addon tw-flex tw-shrink-0 tw-items-center tw-border tw-border-r-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-neutral-subtle)] tw-px-3 tw-text-[var(--content-secondary)]',\n size === 'large' && 'tw-rounded-l-[8px]',\n size === 'small' && 'tw-rounded-l-[4px]',\n size !== 'large' && size !== 'small' && 'tw-rounded-l-[6px]',\n )}\n >\n {addonBefore}\n </span>\n )}\n {inputBox}\n {addonAfter && (\n <span\n className={cn(\n 'ald-input-number-addon tw-flex tw-shrink-0 tw-items-center tw-border tw-border-l-0 tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-neutral-subtle)] tw-px-3 tw-text-[var(--content-secondary)]',\n size === 'large' && 'tw-rounded-r-[8px]',\n size === 'small' && 'tw-rounded-r-[4px]',\n size !== 'large' && size !== 'small' && 'tw-rounded-r-[6px]',\n )}\n >\n {addonAfter}\n </span>\n )}\n </div>\n );\n}\n\nexport type { IInputNumberProps };\n"],"mappings":"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"}
|
|
@@ -214,7 +214,7 @@ function LogicItem({ value, addCondition, addRelation, changeRecordData, remove,
|
|
|
214
214
|
setHoverId(value.id);
|
|
215
215
|
},
|
|
216
216
|
size: 16,
|
|
217
|
-
color: "
|
|
217
|
+
color: "var(--content-secondary)",
|
|
218
218
|
className: "ald-logic-tree-node-drag-icon"
|
|
219
219
|
})
|
|
220
220
|
}),
|
|
@@ -275,7 +275,7 @@ function LogicItem({ value, addCondition, addRelation, changeRecordData, remove,
|
|
|
275
275
|
setHoverId(value.id);
|
|
276
276
|
},
|
|
277
277
|
size: 16,
|
|
278
|
-
color: "
|
|
278
|
+
color: "var(--content-secondary)",
|
|
279
279
|
className: "ald-logic-tree-record-node-drag-icon"
|
|
280
280
|
})
|
|
281
281
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/LogicTree/components/LogicItem/index.tsx"],"sourcesContent":["import { cn } from '../../../lib/utils';\nimport _ from 'lodash';\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { DragPreviewImage, useDrag, useDrop } from 'react-dnd';\nimport { EPutPosition, TRenderCondition } from '../..';\nimport DragLightLine from '../../../Icon/components/DragLightLine';\nimport PlusIcon from '../../../Icon/components/SignLightLine';\nimport TrashLightLine from '../../../Icon/components/TrashLightLine';\nimport IconButton from '../../../IconButton';\nimport Select from '../../../Select';\nimport TextLink from '../../../TextLink';\nimport {\n ELangType,\n LocaleContext,\n getTranslator,\n} from '../../../locale/default';\nimport { ELogicType, ENodeType, TNode } from '../../type';\n\nconst dargPreviewImg =\n 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAYSURBVHgB7cAxAQAAAMKg9U9tCU8oAPgYBlQAAX19SpgAAAAASUVORK5CYII=';\n\ninterface IProps<T> {\n value: TNode<T>;\n addCondition: (id: string) => void;\n addRelation: (id: string) => void;\n remove: (id: string) => void;\n changeRecordData: (id: string, data: T) => void;\n changeRelation: (id: string, logicType: ELogicType) => void;\n renderCondition: TRenderCondition<T>;\n onDragEnd: (\n dragId: string,\n hoverId: string,\n dropPosition: EPutPosition,\n ) => void;\n hoverId: string;\n setHoverId: (id: string) => void;\n isRoot?: boolean;\n hideBottomBtn?: {\n addRelation?: boolean;\n };\n}\n\nconst TWO = 2;\n\nexport default function LogicItem<T>({\n value,\n addCondition,\n addRelation,\n changeRecordData,\n remove,\n changeRelation,\n renderCondition,\n onDragEnd,\n hoverId,\n setHoverId,\n isRoot = false,\n hideBottomBtn,\n}: IProps<T>) {\n const [isHoverDragBox, setIsHoverDragBox] = useState(false);\n const [firstNodeHight, setFirstNodeHight] = useState(0);\n const [lastNodeHight, setLastNodeHight] = useState(0);\n const [dropPosition, setDropPosition] = useState<EPutPosition>();\n\n const { locale } = useContext(LocaleContext);\n const t = getTranslator(locale);\n\n const logicOptions = [\n {\n value: ELogicType.AND,\n label: t.LogicTree.select.and,\n },\n {\n value: ELogicType.OR,\n label: t.LogicTree.select.or,\n },\n ];\n\n const { type } = value;\n\n const ref = useRef<HTMLDivElement>(null);\n const firstResizeObserverRef = useRef<ResizeObserver | null>(null);\n const lastResizeObserverRef = useRef<ResizeObserver | null>(null);\n\n const [{ isDragging }, drag, preview] = useDrag({\n type: 'LOGIC_ITEM',\n item: { id: value.id },\n collect: (monitor) => ({\n isDragging: monitor.isDragging(),\n }),\n canDrag: !isRoot && isHoverDragBox,\n });\n\n const [{ isOver, canDrop }, drop] = useDrop({\n accept: 'LOGIC_ITEM',\n hover(item: { id: string }, monitor) {\n if (!ref.current) {\n return;\n }\n const dragId = item.id;\n const hoverId = value.id;\n\n if (dragId === hoverId) {\n return;\n }\n // 检查是否为最顶层的放置目标\n if (monitor.didDrop()) {\n return;\n }\n\n // 获取鼠标位置和目标元素位置\n const hoverBoundingRect = ref.current.getBoundingClientRect();\n const hoverMiddleY =\n (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;\n const clientOffset = monitor.getClientOffset();\n if (clientOffset) {\n const hoverClientY = clientOffset.y - hoverBoundingRect.top;\n\n const dropPosition =\n hoverClientY < hoverMiddleY ? EPutPosition.TOP : EPutPosition.BOTTOM;\n\n setDropPosition(dropPosition);\n } else setDropPosition(undefined);\n },\n drop(item: { id: string }, monitor) {\n if (!ref.current) {\n return;\n }\n const dragId = item.id;\n const hoverId = value.id;\n\n if (dragId === hoverId) {\n return;\n }\n // 检查是否为最顶层的放置目标\n if (monitor.didDrop()) {\n return;\n }\n\n // 获取鼠标位置和目标元素位置\n const hoverBoundingRect = ref.current.getBoundingClientRect();\n const hoverMiddleY =\n (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;\n const clientOffset = monitor.getClientOffset();\n if (clientOffset) {\n const hoverClientY = clientOffset.y - hoverBoundingRect.top;\n\n // 确定放置位置\n const dropPosition =\n hoverClientY < hoverMiddleY ? EPutPosition.TOP : EPutPosition.BOTTOM;\n\n onDragEnd(dragId, hoverId, dropPosition);\n }\n },\n collect: (monitor) => ({\n isOver: monitor.isOver({ shallow: true }),\n canDrop: monitor.canDrop(),\n }),\n });\n\n drag(drop(ref));\n\n const isDragOver = isOver && canDrop && !isRoot;\n\n const firstRef = useCallback((node: HTMLElement | null) => {\n if (firstResizeObserverRef.current) {\n firstResizeObserverRef.current.disconnect();\n firstResizeObserverRef.current = null;\n }\n\n if (!node) return;\n\n const resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n const newHeight = entry.contentRect.height;\n if (newHeight > 0) {\n setFirstNodeHight(newHeight);\n }\n }\n });\n resizeObserver.observe(node);\n firstResizeObserverRef.current = resizeObserver;\n }, []);\n\n const lastRef = useCallback((node: HTMLElement | null) => {\n if (lastResizeObserverRef.current) {\n lastResizeObserverRef.current.disconnect();\n lastResizeObserverRef.current = null;\n }\n\n if (!node) return;\n\n const resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n const newHeight = entry.contentRect.height;\n if (newHeight > 0) {\n setLastNodeHight(newHeight);\n }\n }\n });\n resizeObserver.observe(node);\n lastResizeObserverRef.current = resizeObserver;\n }, []);\n\n const onAddCondition = () => {\n const { id } = value;\n addCondition(id);\n };\n\n const onAddRelation = () => {\n const { id } = value;\n addRelation(id);\n };\n\n const onRemove = () => {\n const { id } = value;\n remove(id);\n };\n\n const onChangeRelation = (logicType: ELogicType) => {\n const { id } = value;\n changeRelation(id, logicType);\n };\n\n const onChangeRecordData = (data: T) => {\n const { id } = value;\n changeRecordData(id, data);\n };\n\n useEffect(() => {\n return () => {\n if (firstResizeObserverRef.current) {\n firstResizeObserverRef.current.disconnect();\n firstResizeObserverRef.current = null;\n }\n if (lastResizeObserverRef.current) {\n lastResizeObserverRef.current.disconnect();\n lastResizeObserverRef.current = null;\n }\n };\n }, []);\n\n const isEn = locale === ELangType.EN;\n\n if (type === ENodeType.LOGIC) {\n const { nodes, logicType } = value;\n const verticalLineHeight =\n nodes.length > 1\n ? `calc(100% - ${firstNodeHight / TWO}px - ${\n lastNodeHight / TWO\n }px - 42px)`\n : `30px`;\n\n return (\n <div\n className={cn('ald-logic-tree-logic-node', {\n 'is-hover-drag-box': isHoverDragBox,\n 'is-dragging': isDragging,\n 'is-hover-top': isDragOver && dropPosition === EPutPosition.TOP,\n 'is-hover-bottom': isDragOver && dropPosition === EPutPosition.BOTTOM,\n })}\n onMouseMove={(e) => {\n e.stopPropagation();\n setHoverId(value.id);\n }}\n onMouseOut={(e) => {\n e.stopPropagation();\n setHoverId('');\n }}\n ref={ref}\n >\n {_.map(nodes, (node, index) => {\n let heightRef = null;\n if (index === 0) {\n heightRef = firstRef;\n } else if (index === nodes.length - 1) {\n heightRef = lastRef;\n }\n\n return (\n <div\n className=\"ald-logic-tree-node-wrap\"\n key={node.id}\n ref={heightRef}\n >\n <div className=\"ald-logic-tree-horizontal-line\" />\n <LogicItem\n key={node.id}\n value={node}\n addCondition={addCondition}\n addRelation={addRelation}\n remove={remove}\n changeRelation={changeRelation}\n renderCondition={renderCondition}\n changeRecordData={changeRecordData}\n hoverId={hoverId}\n setHoverId={setHoverId}\n onDragEnd={onDragEnd}\n />\n </div>\n );\n })}\n <div className=\"ald-logic-tree-operation\">\n <div className=\"ald-logic-tree-left-bottom-dash-line\" />\n <TextLink icon={<PlusIcon size={24} />} onClick={onAddCondition}>\n {t.LogicTree.btn.addCondition}\n </TextLink>\n {!hideBottomBtn?.addRelation && (\n <TextLink icon={<PlusIcon size={24} />} onClick={onAddRelation}>\n {t.LogicTree.btn.addRelation}\n </TextLink>\n )}\n </div>\n {!!_.size(nodes) && (\n <div\n className=\"ald-logic-tree-logic-vertical-line\"\n style={{\n height: verticalLineHeight,\n top: `${firstNodeHight / TWO + 4}px`,\n }}\n />\n )}\n {!isRoot && (hoverId === value.id || isDragging) && (\n <div\n className=\"ald-logic-tree-node-drag-icon-wrapper\"\n onMouseMove={(e) => {\n e.stopPropagation();\n setIsHoverDragBox(true);\n setHoverId(value.id);\n }}\n onMouseOut={(e) => {\n e.stopPropagation();\n setIsHoverDragBox(false);\n }}\n >\n <DragLightLine\n onMouseMove={(e) => {\n e.stopPropagation();\n setIsHoverDragBox(true);\n setHoverId(value.id);\n }}\n size={16}\n color=\"#374151\"\n className=\"ald-logic-tree-node-drag-icon\"\n />\n </div>\n )}\n\n <Select\n options={logicOptions}\n className={cn('ald-logic-tree-select-relation', {\n 'ald-logic-tree-select-relation-en': isEn,\n })}\n size=\"small\"\n popupMatchSelectWidth={false}\n value={logicType}\n onChange={onChangeRelation}\n />\n <DragPreviewImage connect={preview} src={dargPreviewImg} />\n </div>\n );\n }\n\n return (\n <>\n <DragPreviewImage connect={preview} src={dargPreviewImg} />\n <div\n className={cn('ald-logic-tree-record-node', {\n 'is-hover-drag-box': isHoverDragBox,\n 'is-dragging': isDragging,\n 'is-hover-top': isDragOver && dropPosition === EPutPosition.TOP,\n 'is-hover-bottom': isDragOver && dropPosition === EPutPosition.BOTTOM,\n })}\n ref={ref}\n onMouseMove={(e) => {\n e.stopPropagation();\n setHoverId(value.id);\n }}\n onMouseOut={(e) => {\n e.stopPropagation();\n setHoverId('');\n }}\n >\n <div\n className=\"ald-logic-tree-node-drag-icon-preview\"\n ref={preview}\n ></div>\n {(hoverId === value.id || isDragging) && (\n <div\n className=\"ald-logic-tree-record-node-drag-icon-wrapper\"\n onMouseMove={(e) => {\n e.stopPropagation();\n setIsHoverDragBox(true);\n setHoverId(value.id);\n }}\n onMouseOut={(e) => {\n e.stopPropagation();\n setIsHoverDragBox(false);\n }}\n >\n <DragLightLine\n onMouseMove={(e) => {\n e.stopPropagation();\n setIsHoverDragBox(true);\n setHoverId(value.id);\n }}\n size={16}\n color=\"#374151\"\n className=\"ald-logic-tree-record-node-drag-icon\"\n />\n </div>\n )}\n\n <div className=\"ald-logic-tree-render-condition-wrap\">\n {renderCondition(\n value.data,\n { changeData: onChangeRecordData },\n value.id,\n )}\n </div>\n <IconButton\n icon={<TrashLightLine size={16} />}\n size={'small'}\n onClick={onRemove}\n />\n </div>\n </>\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/LogicTree/components/LogicItem/index.tsx"],"sourcesContent":["import { cn } from '../../../lib/utils';\nimport _ from 'lodash';\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { DragPreviewImage, useDrag, useDrop } from 'react-dnd';\nimport { EPutPosition, TRenderCondition } from '../..';\nimport DragLightLine from '../../../Icon/components/DragLightLine';\nimport PlusIcon from '../../../Icon/components/SignLightLine';\nimport TrashLightLine from '../../../Icon/components/TrashLightLine';\nimport IconButton from '../../../IconButton';\nimport Select from '../../../Select';\nimport TextLink from '../../../TextLink';\nimport {\n ELangType,\n LocaleContext,\n getTranslator,\n} from '../../../locale/default';\nimport { ELogicType, ENodeType, TNode } from '../../type';\n\nconst dargPreviewImg =\n 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAYSURBVHgB7cAxAQAAAMKg9U9tCU8oAPgYBlQAAX19SpgAAAAASUVORK5CYII=';\n\ninterface IProps<T> {\n value: TNode<T>;\n addCondition: (id: string) => void;\n addRelation: (id: string) => void;\n remove: (id: string) => void;\n changeRecordData: (id: string, data: T) => void;\n changeRelation: (id: string, logicType: ELogicType) => void;\n renderCondition: TRenderCondition<T>;\n onDragEnd: (\n dragId: string,\n hoverId: string,\n dropPosition: EPutPosition,\n ) => void;\n hoverId: string;\n setHoverId: (id: string) => void;\n isRoot?: boolean;\n hideBottomBtn?: {\n addRelation?: boolean;\n };\n}\n\nconst TWO = 2;\n\nexport default function LogicItem<T>({\n value,\n addCondition,\n addRelation,\n changeRecordData,\n remove,\n changeRelation,\n renderCondition,\n onDragEnd,\n hoverId,\n setHoverId,\n isRoot = false,\n hideBottomBtn,\n}: IProps<T>) {\n const [isHoverDragBox, setIsHoverDragBox] = useState(false);\n const [firstNodeHight, setFirstNodeHight] = useState(0);\n const [lastNodeHight, setLastNodeHight] = useState(0);\n const [dropPosition, setDropPosition] = useState<EPutPosition>();\n\n const { locale } = useContext(LocaleContext);\n const t = getTranslator(locale);\n\n const logicOptions = [\n {\n value: ELogicType.AND,\n label: t.LogicTree.select.and,\n },\n {\n value: ELogicType.OR,\n label: t.LogicTree.select.or,\n },\n ];\n\n const { type } = value;\n\n const ref = useRef<HTMLDivElement>(null);\n const firstResizeObserverRef = useRef<ResizeObserver | null>(null);\n const lastResizeObserverRef = useRef<ResizeObserver | null>(null);\n\n const [{ isDragging }, drag, preview] = useDrag({\n type: 'LOGIC_ITEM',\n item: { id: value.id },\n collect: (monitor) => ({\n isDragging: monitor.isDragging(),\n }),\n canDrag: !isRoot && isHoverDragBox,\n });\n\n const [{ isOver, canDrop }, drop] = useDrop({\n accept: 'LOGIC_ITEM',\n hover(item: { id: string }, monitor) {\n if (!ref.current) {\n return;\n }\n const dragId = item.id;\n const hoverId = value.id;\n\n if (dragId === hoverId) {\n return;\n }\n // 检查是否为最顶层的放置目标\n if (monitor.didDrop()) {\n return;\n }\n\n // 获取鼠标位置和目标元素位置\n const hoverBoundingRect = ref.current.getBoundingClientRect();\n const hoverMiddleY =\n (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;\n const clientOffset = monitor.getClientOffset();\n if (clientOffset) {\n const hoverClientY = clientOffset.y - hoverBoundingRect.top;\n\n const dropPosition =\n hoverClientY < hoverMiddleY ? EPutPosition.TOP : EPutPosition.BOTTOM;\n\n setDropPosition(dropPosition);\n } else setDropPosition(undefined);\n },\n drop(item: { id: string }, monitor) {\n if (!ref.current) {\n return;\n }\n const dragId = item.id;\n const hoverId = value.id;\n\n if (dragId === hoverId) {\n return;\n }\n // 检查是否为最顶层的放置目标\n if (monitor.didDrop()) {\n return;\n }\n\n // 获取鼠标位置和目标元素位置\n const hoverBoundingRect = ref.current.getBoundingClientRect();\n const hoverMiddleY =\n (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;\n const clientOffset = monitor.getClientOffset();\n if (clientOffset) {\n const hoverClientY = clientOffset.y - hoverBoundingRect.top;\n\n // 确定放置位置\n const dropPosition =\n hoverClientY < hoverMiddleY ? EPutPosition.TOP : EPutPosition.BOTTOM;\n\n onDragEnd(dragId, hoverId, dropPosition);\n }\n },\n collect: (monitor) => ({\n isOver: monitor.isOver({ shallow: true }),\n canDrop: monitor.canDrop(),\n }),\n });\n\n drag(drop(ref));\n\n const isDragOver = isOver && canDrop && !isRoot;\n\n const firstRef = useCallback((node: HTMLElement | null) => {\n if (firstResizeObserverRef.current) {\n firstResizeObserverRef.current.disconnect();\n firstResizeObserverRef.current = null;\n }\n\n if (!node) return;\n\n const resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n const newHeight = entry.contentRect.height;\n if (newHeight > 0) {\n setFirstNodeHight(newHeight);\n }\n }\n });\n resizeObserver.observe(node);\n firstResizeObserverRef.current = resizeObserver;\n }, []);\n\n const lastRef = useCallback((node: HTMLElement | null) => {\n if (lastResizeObserverRef.current) {\n lastResizeObserverRef.current.disconnect();\n lastResizeObserverRef.current = null;\n }\n\n if (!node) return;\n\n const resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n const newHeight = entry.contentRect.height;\n if (newHeight > 0) {\n setLastNodeHight(newHeight);\n }\n }\n });\n resizeObserver.observe(node);\n lastResizeObserverRef.current = resizeObserver;\n }, []);\n\n const onAddCondition = () => {\n const { id } = value;\n addCondition(id);\n };\n\n const onAddRelation = () => {\n const { id } = value;\n addRelation(id);\n };\n\n const onRemove = () => {\n const { id } = value;\n remove(id);\n };\n\n const onChangeRelation = (logicType: ELogicType) => {\n const { id } = value;\n changeRelation(id, logicType);\n };\n\n const onChangeRecordData = (data: T) => {\n const { id } = value;\n changeRecordData(id, data);\n };\n\n useEffect(() => {\n return () => {\n if (firstResizeObserverRef.current) {\n firstResizeObserverRef.current.disconnect();\n firstResizeObserverRef.current = null;\n }\n if (lastResizeObserverRef.current) {\n lastResizeObserverRef.current.disconnect();\n lastResizeObserverRef.current = null;\n }\n };\n }, []);\n\n const isEn = locale === ELangType.EN;\n\n if (type === ENodeType.LOGIC) {\n const { nodes, logicType } = value;\n const verticalLineHeight =\n nodes.length > 1\n ? `calc(100% - ${firstNodeHight / TWO}px - ${\n lastNodeHight / TWO\n }px - 42px)`\n : `30px`;\n\n return (\n <div\n className={cn('ald-logic-tree-logic-node', {\n 'is-hover-drag-box': isHoverDragBox,\n 'is-dragging': isDragging,\n 'is-hover-top': isDragOver && dropPosition === EPutPosition.TOP,\n 'is-hover-bottom': isDragOver && dropPosition === EPutPosition.BOTTOM,\n })}\n onMouseMove={(e) => {\n e.stopPropagation();\n setHoverId(value.id);\n }}\n onMouseOut={(e) => {\n e.stopPropagation();\n setHoverId('');\n }}\n ref={ref}\n >\n {_.map(nodes, (node, index) => {\n let heightRef = null;\n if (index === 0) {\n heightRef = firstRef;\n } else if (index === nodes.length - 1) {\n heightRef = lastRef;\n }\n\n return (\n <div\n className=\"ald-logic-tree-node-wrap\"\n key={node.id}\n ref={heightRef}\n >\n <div className=\"ald-logic-tree-horizontal-line\" />\n <LogicItem\n key={node.id}\n value={node}\n addCondition={addCondition}\n addRelation={addRelation}\n remove={remove}\n changeRelation={changeRelation}\n renderCondition={renderCondition}\n changeRecordData={changeRecordData}\n hoverId={hoverId}\n setHoverId={setHoverId}\n onDragEnd={onDragEnd}\n />\n </div>\n );\n })}\n <div className=\"ald-logic-tree-operation\">\n <div className=\"ald-logic-tree-left-bottom-dash-line\" />\n <TextLink icon={<PlusIcon size={24} />} onClick={onAddCondition}>\n {t.LogicTree.btn.addCondition}\n </TextLink>\n {!hideBottomBtn?.addRelation && (\n <TextLink icon={<PlusIcon size={24} />} onClick={onAddRelation}>\n {t.LogicTree.btn.addRelation}\n </TextLink>\n )}\n </div>\n {!!_.size(nodes) && (\n <div\n className=\"ald-logic-tree-logic-vertical-line\"\n style={{\n height: verticalLineHeight,\n top: `${firstNodeHight / TWO + 4}px`,\n }}\n />\n )}\n {!isRoot && (hoverId === value.id || isDragging) && (\n <div\n className=\"ald-logic-tree-node-drag-icon-wrapper\"\n onMouseMove={(e) => {\n e.stopPropagation();\n setIsHoverDragBox(true);\n setHoverId(value.id);\n }}\n onMouseOut={(e) => {\n e.stopPropagation();\n setIsHoverDragBox(false);\n }}\n >\n <DragLightLine\n onMouseMove={(e) => {\n e.stopPropagation();\n setIsHoverDragBox(true);\n setHoverId(value.id);\n }}\n size={16}\n color=\"var(--content-secondary)\"\n className=\"ald-logic-tree-node-drag-icon\"\n />\n </div>\n )}\n\n <Select\n options={logicOptions}\n className={cn('ald-logic-tree-select-relation', {\n 'ald-logic-tree-select-relation-en': isEn,\n })}\n size=\"small\"\n popupMatchSelectWidth={false}\n value={logicType}\n onChange={onChangeRelation}\n />\n <DragPreviewImage connect={preview} src={dargPreviewImg} />\n </div>\n );\n }\n\n return (\n <>\n <DragPreviewImage connect={preview} src={dargPreviewImg} />\n <div\n className={cn('ald-logic-tree-record-node', {\n 'is-hover-drag-box': isHoverDragBox,\n 'is-dragging': isDragging,\n 'is-hover-top': isDragOver && dropPosition === EPutPosition.TOP,\n 'is-hover-bottom': isDragOver && dropPosition === EPutPosition.BOTTOM,\n })}\n ref={ref}\n onMouseMove={(e) => {\n e.stopPropagation();\n setHoverId(value.id);\n }}\n onMouseOut={(e) => {\n e.stopPropagation();\n setHoverId('');\n }}\n >\n <div\n className=\"ald-logic-tree-node-drag-icon-preview\"\n ref={preview}\n ></div>\n {(hoverId === value.id || isDragging) && (\n <div\n className=\"ald-logic-tree-record-node-drag-icon-wrapper\"\n onMouseMove={(e) => {\n e.stopPropagation();\n setIsHoverDragBox(true);\n setHoverId(value.id);\n }}\n onMouseOut={(e) => {\n e.stopPropagation();\n setIsHoverDragBox(false);\n }}\n >\n <DragLightLine\n onMouseMove={(e) => {\n e.stopPropagation();\n setIsHoverDragBox(true);\n setHoverId(value.id);\n }}\n size={16}\n color=\"var(--content-secondary)\"\n className=\"ald-logic-tree-record-node-drag-icon\"\n />\n </div>\n )}\n\n <div className=\"ald-logic-tree-render-condition-wrap\">\n {renderCondition(\n value.data,\n { changeData: onChangeRecordData },\n value.id,\n )}\n </div>\n <IconButton\n icon={<TrashLightLine size={16} />}\n size={'small'}\n onClick={onRemove}\n />\n </div>\n </>\n );\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectedMemberTags.js","names":[],"sources":["../../../src/MemberPicker/components/SelectedMemberTags.tsx"],"sourcesContent":["import { cn } from '../../lib/utils';\nimport _ from 'lodash';\nimport React, { ReactNode, useContext } from 'react';\nimport Badge from '../../Badge';\nimport ConfigProvider from '../../ConfigProvider';\nimport {\n IUserGroup,\n TUser,\n TUserGroupValue,\n TUserValue,\n} from '../../ConfigProvider/getUserList';\nimport { CloseMLine } from '../../Icon';\nimport ScrollArea from '../../ScrollArea';\nimport { LocaleContext, getTranslator } from '../../locale/default';\nimport { IUser } from '../interface';\nimport { getAccount, getId, getPhoto } from '../utils';\nimport { isUser } from '../utils/getUsersWithUserId';\nimport NickLabel from './NickLabel';\ninterface ISelectedMemberTagsProps {\n className?: string;\n selectedUsers: TUser;\n onRemove?: (user: IUser | IUserGroup) => void;\n width: number;\n lockedIds: Array<TUserValue | TUserGroupValue>;\n userList: TUser;\n renderSelectedTag?: (\n user: IUser | IUserGroup,\n originNode: ReactNode,\n ) => ReactNode;\n}\n\nexport default function SelectedMemberTags(props: ISelectedMemberTagsProps) {\n const {\n className,\n selectedUsers,\n width,\n lockedIds = [],\n renderSelectedTag,\n } = props;\n\n const { getMemberPickerItemMoreInfoKey } = ConfigProvider.useGetUserList();\n\n const { locale } = useContext(LocaleContext);\n const t = getTranslator(locale);\n\n return (\n <div\n className={cn(className, 'ald-member-picker-selected-member-tags-wrap')}\n >\n <div className={'ald-member-picker-has-selected'}>\n {t.MemberPicker.selectedTotal(selectedUsers.length)}\n </div>\n <ScrollArea className={'ald-member-selected-member-wrapper'}>\n <div className={'ald-member-picker-tags'} style={{ width: width - 17 }}>\n {selectedUsers.map((user) => {\n let hasLocked = false;\n\n if (user && Object.prototype.hasOwnProperty.call(user, 'groupId')) {\n const index = _.findIndex(lockedIds, {\n groupId: (user as TUserGroupValue).groupId,\n type: (user as TUserGroupValue).type,\n });\n hasLocked = index !== -1;\n } else {\n const index = _.findIndex(lockedIds, {\n userId: (user as TUserValue).userId,\n type: (user as TUserValue).type,\n });\n\n hasLocked = index !== -1;\n }\n\n const originNode = (\n <div\n className={'ald-member-picker-selected-member-tag'}\n key={getId(user)}\n >\n <div className={'ald-member-picker-selected-member-tag-user'}>\n <NickLabel\n type={user.type}\n id={getId(user)}\n name={user.name as string}\n photo={getPhoto(user)}\n account={getAccount(user)}\n addonBefore={\n user.type === 'USER' && (\n <span className=\"ald-member-picker-option-id\">\n {getMemberPickerItemMoreInfoKey\n ? getMemberPickerItemMoreInfoKey(user)\n : user.userId}\n </span>\n )\n }\n ></NickLabel>\n </div>\n {/* 如果是用户的话并且user.ban为true,则展示 已停用 Tag */}\n {isUser(user) && user.ban && (\n <Badge\n status=\"default\"\n count={t.MemberPicker.ban}\n className={'ald-member-picker-ban-badge'}\n ></Badge>\n )}\n {!hasLocked && (\n <CloseMLine\n size={20}\n className={'ald-member-picker-close'}\n color=\"
|
|
1
|
+
{"version":3,"file":"SelectedMemberTags.js","names":[],"sources":["../../../src/MemberPicker/components/SelectedMemberTags.tsx"],"sourcesContent":["import { cn } from '../../lib/utils';\nimport _ from 'lodash';\nimport React, { ReactNode, useContext } from 'react';\nimport Badge from '../../Badge';\nimport ConfigProvider from '../../ConfigProvider';\nimport {\n IUserGroup,\n TUser,\n TUserGroupValue,\n TUserValue,\n} from '../../ConfigProvider/getUserList';\nimport { CloseMLine } from '../../Icon';\nimport ScrollArea from '../../ScrollArea';\nimport { LocaleContext, getTranslator } from '../../locale/default';\nimport { IUser } from '../interface';\nimport { getAccount, getId, getPhoto } from '../utils';\nimport { isUser } from '../utils/getUsersWithUserId';\nimport NickLabel from './NickLabel';\ninterface ISelectedMemberTagsProps {\n className?: string;\n selectedUsers: TUser;\n onRemove?: (user: IUser | IUserGroup) => void;\n width: number;\n lockedIds: Array<TUserValue | TUserGroupValue>;\n userList: TUser;\n renderSelectedTag?: (\n user: IUser | IUserGroup,\n originNode: ReactNode,\n ) => ReactNode;\n}\n\nexport default function SelectedMemberTags(props: ISelectedMemberTagsProps) {\n const {\n className,\n selectedUsers,\n width,\n lockedIds = [],\n renderSelectedTag,\n } = props;\n\n const { getMemberPickerItemMoreInfoKey } = ConfigProvider.useGetUserList();\n\n const { locale } = useContext(LocaleContext);\n const t = getTranslator(locale);\n\n return (\n <div\n className={cn(className, 'ald-member-picker-selected-member-tags-wrap')}\n >\n <div className={'ald-member-picker-has-selected'}>\n {t.MemberPicker.selectedTotal(selectedUsers.length)}\n </div>\n <ScrollArea className={'ald-member-selected-member-wrapper'}>\n <div className={'ald-member-picker-tags'} style={{ width: width - 17 }}>\n {selectedUsers.map((user) => {\n let hasLocked = false;\n\n if (user && Object.prototype.hasOwnProperty.call(user, 'groupId')) {\n const index = _.findIndex(lockedIds, {\n groupId: (user as TUserGroupValue).groupId,\n type: (user as TUserGroupValue).type,\n });\n hasLocked = index !== -1;\n } else {\n const index = _.findIndex(lockedIds, {\n userId: (user as TUserValue).userId,\n type: (user as TUserValue).type,\n });\n\n hasLocked = index !== -1;\n }\n\n const originNode = (\n <div\n className={'ald-member-picker-selected-member-tag'}\n key={getId(user)}\n >\n <div className={'ald-member-picker-selected-member-tag-user'}>\n <NickLabel\n type={user.type}\n id={getId(user)}\n name={user.name as string}\n photo={getPhoto(user)}\n account={getAccount(user)}\n addonBefore={\n user.type === 'USER' && (\n <span className=\"ald-member-picker-option-id\">\n {getMemberPickerItemMoreInfoKey\n ? getMemberPickerItemMoreInfoKey(user)\n : user.userId}\n </span>\n )\n }\n ></NickLabel>\n </div>\n {/* 如果是用户的话并且user.ban为true,则展示 已停用 Tag */}\n {isUser(user) && user.ban && (\n <Badge\n status=\"default\"\n count={t.MemberPicker.ban}\n className={'ald-member-picker-ban-badge'}\n ></Badge>\n )}\n {!hasLocked && (\n <CloseMLine\n size={20}\n className={'ald-member-picker-close'}\n color=\"var(--content-tertiary)\"\n onClick={() => {\n props.onRemove?.(user);\n }}\n />\n )}\n </div>\n );\n\n if (renderSelectedTag) {\n return renderSelectedTag(user, originNode);\n }\n\n return originNode;\n })}\n </div>\n </ScrollArea>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;AA+BA,SAAwB,mBAAmB,OAAiC;CAC1E,MAAM,EACJ,WACA,eACA,OACA,YAAY,EAAE,EACd,sBACE;CAEJ,MAAM,EAAE,mCAAmC,wBAAe,gBAAgB;CAE1E,MAAM,EAAE,WAAW,WAAW,cAAc;CAC5C,MAAM,IAAI,cAAc,OAAO;AAE/B,QACE,qBAAC,OAAD;EACE,WAAW,GAAG,WAAW,8CAA8C;YADzE,CAGE,oBAAC,OAAD;GAAK,WAAW;aACb,EAAE,aAAa,cAAc,cAAc,OAAO;GAC/C,CAAA,EACN,oBAAC,oBAAD;GAAY,WAAW;aACrB,oBAAC,OAAD;IAAK,WAAW;IAA0B,OAAO,EAAE,OAAO,QAAQ,IAAI;cACnE,cAAc,KAAK,SAAS;KAC3B,IAAI,YAAY;AAEhB,SAAI,QAAQ,OAAO,UAAU,eAAe,KAAK,MAAM,UAAU,CAK/D,aAJc,EAAE,UAAU,WAAW;MACnC,SAAU,KAAyB;MACnC,MAAO,KAAyB;MACjC,CAAC,KACoB;SAOtB,aALc,EAAE,UAAU,WAAW;MACnC,QAAS,KAAoB;MAC7B,MAAO,KAAoB;MAC5B,CAAC,KAEoB;KAGxB,MAAM,aACJ,qBAAC,OAAD;MACE,WAAW;gBADb;OAIE,oBAAC,OAAD;QAAK,WAAW;kBACd,oBAAC,mBAAD;SACE,MAAM,KAAK;SACX,IAAI,MAAM,KAAK;SACf,MAAM,KAAK;SACX,OAAO,SAAS,KAAK;SACrB,SAAS,WAAW,KAAK;SACzB,aACE,KAAK,SAAS,UACZ,oBAAC,QAAD;UAAM,WAAU;oBACb,iCACG,+BAA+B,KAAK,GACpC,KAAK;UACJ,CAAA;SAGA,CAAA;QACT,CAAA;OAEL,OAAO,KAAK,IAAI,KAAK,OACpB,oBAAC,OAAD;QACE,QAAO;QACP,OAAO,EAAE,aAAa;QACtB,WAAW;QACJ,CAAA;OAEV,CAAC,aACA,oBAAC,MAAD;QACE,MAAM;QACN,WAAW;QACX,OAAM;QACN,eAAe;AACb,eAAM,WAAW,KAAK;;QAExB,CAAA;OAEA;QAtCC,MAAM,KAAK,CAsCZ;AAGR,SAAI,kBACF,QAAO,kBAAkB,MAAM,WAAW;AAG5C,YAAO;MACP;IACE,CAAA;GACK,CAAA,CACT"}
|