@tiny-codes/react-easy 1.7.7 → 1.7.8
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/CHANGELOG.md +9 -0
- package/es/components/ConfigProvider/index.js +8 -7
- package/es/components/ConfigProvider/index.js.map +1 -1
- package/es/components/EllipsisTypography/withEllipsisTypography.d.ts +16 -0
- package/es/components/EllipsisTypography/withEllipsisTypography.js +18 -2
- package/es/components/EllipsisTypography/withEllipsisTypography.js.map +1 -1
- package/es/components/Iconfont/createIconfont.d.ts +15 -1
- package/es/components/Iconfont/createIconfont.js.map +1 -1
- package/lib/components/ConfigProvider/index.js +6 -2
- package/lib/components/ConfigProvider/index.js.map +2 -2
- package/lib/components/EllipsisTypography/withEllipsisTypography.d.ts +16 -0
- package/lib/components/EllipsisTypography/withEllipsisTypography.js +16 -2
- package/lib/components/EllipsisTypography/withEllipsisTypography.js.map +2 -2
- package/lib/components/Iconfont/createIconfont.d.ts +15 -1
- package/lib/components/Iconfont/createIconfont.js.map +2 -2
- package/package.json +2 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
# Changelog
|
|
4
4
|
|
|
5
|
+
## 1.7.8
|
|
6
|
+
|
|
7
|
+
2026-3-18
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
- **EllipsisText**, **EllipsisParagraph**, **EllipsisTitle**, **EllipsisLink**
|
|
12
|
+
- ✨ add `watchResize` prop to monitor component size and adjust ellipsis accordingly.
|
|
13
|
+
|
|
5
14
|
## 1.7.7
|
|
6
15
|
|
|
7
16
|
2026-3-9
|
|
@@ -17,7 +17,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
|
|
|
17
17
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
18
18
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
19
19
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
20
|
-
import { useContext, useEffect, useMemo } from 'react';
|
|
20
|
+
import { useCallback, useContext, useEffect, useMemo } from 'react';
|
|
21
21
|
import { ConfigProvider as ReactConfigProvider } from 'antd';
|
|
22
22
|
import classNames from 'classnames';
|
|
23
23
|
import locales, { langs, resources } from "../../locales";
|
|
@@ -37,25 +37,26 @@ var ConfigProvider = function ConfigProvider(props) {
|
|
|
37
37
|
restProps = _objectWithoutProperties(props, _excluded);
|
|
38
38
|
var langInProps = restProps.lang;
|
|
39
39
|
var _useContext = useContext(ReactConfigProvider.ConfigContext),
|
|
40
|
-
|
|
40
|
+
getPrefixCls = _useContext.getPrefixCls,
|
|
41
41
|
rootPrefixCls = _useContext.rootPrefixCls;
|
|
42
|
-
var prefixCls =
|
|
42
|
+
var prefixCls = getPrefixCls('react-easy', prefixClsInProps);
|
|
43
43
|
var _useStyle = useStyle(prefixCls, rootPrefixCls),
|
|
44
44
|
_useStyle2 = _slicedToArray(_useStyle, 3),
|
|
45
45
|
wrapCSSVar = _useStyle2[0],
|
|
46
46
|
hashId = _useStyle2[1],
|
|
47
47
|
cssVarCls = _useStyle2[2];
|
|
48
|
+
var getEasyPrefixCls = useCallback(function (suffixCls, customizePrefixCls) {
|
|
49
|
+
return getPrefixCls("easy-".concat(suffixCls), customizePrefixCls);
|
|
50
|
+
}, [getPrefixCls]);
|
|
48
51
|
var contextValue = useMemo(function () {
|
|
49
52
|
if (langInProps !== locales.language) {
|
|
50
53
|
locales.changeLanguage(langInProps || 'en-US');
|
|
51
54
|
}
|
|
52
55
|
return _objectSpread(_objectSpread({}, restProps), {}, {
|
|
53
|
-
getPrefixCls:
|
|
54
|
-
return _getPrefixCls("easy-".concat(suffixCls), customizePrefixCls);
|
|
55
|
-
}
|
|
56
|
+
getPrefixCls: getEasyPrefixCls
|
|
56
57
|
});
|
|
57
58
|
}, // eslint-disable-next-line @tiny-codes/react-hooks/exhaustive-deps
|
|
58
|
-
[langInProps,
|
|
59
|
+
[langInProps, getEasyPrefixCls].concat(_toConsumableArray(Object.values(restProps))));
|
|
59
60
|
useEffect(function () {
|
|
60
61
|
// Dynamically add language pack
|
|
61
62
|
if (userLocales) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useContext","useEffect","useMemo","ConfigProvider","ReactConfigProvider","classNames","locales","langs","resources","ReactEasyContext","useStyle","jsx","_jsx","props","children","userLocales","prefixClsInProps","prefixCls","className","style","restProps","_objectWithoutProperties","_excluded","langInProps","lang","_useContext","ConfigContext","getPrefixCls","rootPrefixCls","_useStyle","_useStyle2","_slicedToArray","wrapCSSVar","hashId","cssVarCls","
|
|
1
|
+
{"version":3,"names":["useCallback","useContext","useEffect","useMemo","ConfigProvider","ReactConfigProvider","classNames","locales","langs","resources","ReactEasyContext","useStyle","jsx","_jsx","props","children","userLocales","prefixClsInProps","prefixCls","className","style","restProps","_objectWithoutProperties","_excluded","langInProps","lang","_useContext","ConfigContext","getPrefixCls","rootPrefixCls","_useStyle","_useStyle2","_slicedToArray","wrapCSSVar","hashId","cssVarCls","getEasyPrefixCls","suffixCls","customizePrefixCls","concat","contextValue","language","changeLanguage","_objectSpread","_toConsumableArray","Object","values","includes","removeResourceBundle","addResourceBundle","translation","Provider","value","displayName"],"sources":["../../../src/components/ConfigProvider/index.tsx"],"sourcesContent":["import type { CSSProperties, FC, ReactNode } from 'react';\nimport { useCallback, useContext, useEffect, useMemo } from 'react';\nimport { ConfigProvider as ReactConfigProvider } from 'antd';\nimport classNames from 'classnames';\nimport locales, { langs, resources } from '../../locales';\nimport type localesEn from '../../locales/langs/en';\nimport ReactEasyContext, { type ReactEasyContextProps } from './context';\nimport useStyle from './style';\n\nexport interface ConfigProviderProps extends Omit<ReactEasyContextProps, 'getPrefixCls'> {\n /**\n * - **EN:** Child elements of the ConfigProvider\n * - **CN:** ConfigProvider 的子元素\n */\n children: ReactNode;\n /**\n * - **EN:** Custom prefix for the component's CSS class.\n * - **CN:** 组件的自定义 CSS 类前缀。\n */\n prefixCls?: string;\n /**\n * - **EN:** Custom class name for the root element\n * - **CN:** 根元素的自定义类名\n */\n className?: string;\n /**\n * - **EN:** Custom styles for the root element\n * - **CN:** 根元素的自定义样式\n */\n style?: CSSProperties;\n /**\n * - **EN:** Custom localization resources, if `lang` exists, it will override the localization\n * resources of that language, otherwise, it will add a new language\n * - **CN:** 自定义本地化资源，如果`lang`存在，则会覆盖该语言的本地化资源，否则，会添加一种新的语言\n */\n locales?: Partial<typeof localesEn>;\n}\n\n/**\n * - **EN:** Provide global configuration for AntdHelper\n * - **CN:** 提供AntdHelper的全局配置\n */\nconst ConfigProvider: FC<ConfigProviderProps> & { ConfigContext: typeof ReactEasyContext } = (props) => {\n const { children, locales: userLocales, prefixCls: prefixClsInProps, className, style, ...restProps } = props;\n const { lang: langInProps } = restProps;\n const { getPrefixCls, rootPrefixCls } = useContext(ReactConfigProvider.ConfigContext);\n const prefixCls = getPrefixCls('react-easy', prefixClsInProps);\n const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootPrefixCls);\n const getEasyPrefixCls = useCallback(\n (suffixCls: string, customizePrefixCls?: string) => getPrefixCls(`easy-${suffixCls}`, customizePrefixCls),\n [getPrefixCls]\n );\n const contextValue = useMemo(\n () => {\n if (langInProps !== locales.language) {\n locales.changeLanguage(langInProps || 'en-US');\n }\n return {\n ...restProps,\n getPrefixCls: getEasyPrefixCls,\n };\n },\n // eslint-disable-next-line @tiny-codes/react-hooks/exhaustive-deps\n [langInProps, getEasyPrefixCls, ...Object.values(restProps)]\n );\n\n useEffect(() => {\n // Dynamically add language pack\n if (userLocales) {\n const lang = langInProps || 'en-US';\n if (lang && langs.includes(lang)) {\n locales.removeResourceBundle(lang, 'translation');\n locales.addResourceBundle(lang, 'translation', { ...resources[lang].translation, ...userLocales });\n } else {\n locales.addResourceBundle(lang, 'translation', { ...resources['en-US'].translation, ...userLocales });\n }\n }\n }, [langInProps, userLocales]);\n\n return wrapCSSVar(\n <ReactEasyContext.Provider value={contextValue}>\n <div className={classNames(hashId, cssVarCls, prefixCls, className)} style={style}>\n {children}\n </div>\n </ReactEasyContext.Provider>\n );\n};\nConfigProvider.displayName = 'ReactEasyConfigProvider';\nConfigProvider.ConfigContext = ReactEasyContext;\n\nexport default ConfigProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AACA,SAASA,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AACnE,SAASC,cAAc,IAAIC,mBAAmB,QAAQ,MAAM;AAC5D,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,IAAIC,KAAK,EAAEC,SAAS;AAElC,OAAOC,gBAAgB;AACvB,OAAOC,QAAQ;AAAgB,SAAAC,GAAA,IAAAC,IAAA;AA+B/B;AACA;AACA;AACA;AACA,IAAMT,cAAoF,GAAG,SAAvFA,cAAoFA,CAAIU,KAAK,EAAK;EACtG,IAAQC,QAAQ,GAAwFD,KAAK,CAArGC,QAAQ;IAAWC,WAAW,GAAkEF,KAAK,CAA3FP,OAAO;IAA0BU,gBAAgB,GAAqCH,KAAK,CAArEI,SAAS;IAAoBC,SAAS,GAA0BL,KAAK,CAAxCK,SAAS;IAAEC,KAAK,GAAmBN,KAAK,CAA7BM,KAAK;IAAKC,SAAS,GAAAC,wBAAA,CAAKR,KAAK,EAAAS,SAAA;EAC7G,IAAcC,WAAW,GAAKH,SAAS,CAA/BI,IAAI;EACZ,IAAAC,WAAA,GAAwCzB,UAAU,CAACI,mBAAmB,CAACsB,aAAa,CAAC;IAA7EC,YAAY,GAAAF,WAAA,CAAZE,YAAY;IAAEC,aAAa,GAAAH,WAAA,CAAbG,aAAa;EACnC,IAAMX,SAAS,GAAGU,YAAY,CAAC,YAAY,EAAEX,gBAAgB,CAAC;EAC9D,IAAAa,SAAA,GAAwCnB,QAAQ,CAACO,SAAS,EAAEW,aAAa,CAAC;IAAAE,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAnEG,UAAU,GAAAF,UAAA;IAAEG,MAAM,GAAAH,UAAA;IAAEI,SAAS,GAAAJ,UAAA;EACpC,IAAMK,gBAAgB,GAAGpC,WAAW,CAClC,UAACqC,SAAiB,EAAEC,kBAA2B;IAAA,OAAKV,YAAY,SAAAW,MAAA,CAASF,SAAS,GAAIC,kBAAkB,CAAC;EAAA,GACzG,CAACV,YAAY,CACf,CAAC;EACD,IAAMY,YAAY,GAAGrC,OAAO,CAC1B,YAAM;IACJ,IAAIqB,WAAW,KAAKjB,OAAO,CAACkC,QAAQ,EAAE;MACpClC,OAAO,CAACmC,cAAc,CAAClB,WAAW,IAAI,OAAO,CAAC;IAChD;IACA,OAAAmB,aAAA,CAAAA,aAAA,KACKtB,SAAS;MACZO,YAAY,EAAEQ;IAAgB;EAElC,CAAC,EACD;EAAA,CACCZ,WAAW,EAAEY,gBAAgB,EAAAG,MAAA,CAAAK,kBAAA,CAAKC,MAAM,CAACC,MAAM,CAACzB,SAAS,CAAC,EAC7D,CAAC;EAEDnB,SAAS,CAAC,YAAM;IACd;IACA,IAAIc,WAAW,EAAE;MACf,IAAMS,IAAI,GAAGD,WAAW,IAAI,OAAO;MACnC,IAAIC,IAAI,IAAIjB,KAAK,CAACuC,QAAQ,CAACtB,IAAI,CAAC,EAAE;QAChClB,OAAO,CAACyC,oBAAoB,CAACvB,IAAI,EAAE,aAAa,CAAC;QACjDlB,OAAO,CAAC0C,iBAAiB,CAACxB,IAAI,EAAE,aAAa,EAAAkB,aAAA,CAAAA,aAAA,KAAOlC,SAAS,CAACgB,IAAI,CAAC,CAACyB,WAAW,GAAKlC,WAAW,CAAE,CAAC;MACpG,CAAC,MAAM;QACLT,OAAO,CAAC0C,iBAAiB,CAACxB,IAAI,EAAE,aAAa,EAAAkB,aAAA,CAAAA,aAAA,KAAOlC,SAAS,CAAC,OAAO,CAAC,CAACyC,WAAW,GAAKlC,WAAW,CAAE,CAAC;MACvG;IACF;EACF,CAAC,EAAE,CAACQ,WAAW,EAAER,WAAW,CAAC,CAAC;EAE9B,OAAOiB,UAAU,eACfpB,IAAA,CAACH,gBAAgB,CAACyC,QAAQ;IAACC,KAAK,EAAEZ,YAAa;IAAAzB,QAAA,eAC7CF,IAAA;MAAKM,SAAS,EAAEb,UAAU,CAAC4B,MAAM,EAAEC,SAAS,EAAEjB,SAAS,EAAEC,SAAS,CAAE;MAACC,KAAK,EAAEA,KAAM;MAAAL,QAAA,EAC/EA;IAAQ,CACN;EAAC,CACmB,CAC7B,CAAC;AACH,CAAC;AACDX,cAAc,CAACiD,WAAW,GAAG,yBAAyB;AACtDjD,cAAc,CAACuB,aAAa,GAAGjB,gBAAgB;AAE/C,eAAeN,cAAc"}
|
|
@@ -4,7 +4,23 @@ import type { TextProps } from 'antd/es/typography/Text';
|
|
|
4
4
|
import type { TitleProps } from 'antd/es/typography/Title';
|
|
5
5
|
declare function withEllipsisTypography<T extends TextProps | ParagraphProps | TitleProps>(Component: ComponentType<MakeEllipsisTypographyProps<T>>): (props: MakeEllipsisTypographyProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
export type MakeEllipsisTypographyProps<T> = Omit<T, 'children'> & {
|
|
7
|
+
/**
|
|
8
|
+
* - **EN:** The text content to display. If not provided, the children will be used.
|
|
9
|
+
* - **CN:** 要显示的文本内容。如果未提供，将使用子元素。
|
|
10
|
+
*/
|
|
7
11
|
text?: string | undefined;
|
|
12
|
+
/**
|
|
13
|
+
* - **EN:** The children content to display. The `text` prop will take precedence if both are
|
|
14
|
+
* provided.
|
|
15
|
+
* - **CN:** 要显示的子元素内容。如果同时提供了 `text` 属性，将优先使用 `text`。
|
|
16
|
+
*/
|
|
8
17
|
children?: string | undefined | null;
|
|
18
|
+
/**
|
|
19
|
+
* - **EN:** Whether to monitor the component's size and adjust the ellipsis accordingly.
|
|
20
|
+
* - **CN:** 是否监控组件的大小并相应地调整省略号。
|
|
21
|
+
*
|
|
22
|
+
* @default true
|
|
23
|
+
*/
|
|
24
|
+
watchResize?: boolean;
|
|
9
25
|
};
|
|
10
26
|
export default withEllipsisTypography;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _excluded = ["ellipsis", "children", "text"];
|
|
1
|
+
var _excluded = ["ellipsis", "children", "text", "watchResize"];
|
|
2
2
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
3
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
4
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
@@ -15,6 +15,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
|
15
15
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
16
16
|
import { useEffect, useMemo, useState } from 'react';
|
|
17
17
|
import { Tooltip } from 'antd';
|
|
18
|
+
import { useResizeDetector } from 'react-resize-detector';
|
|
19
|
+
import { useRefFunction, useRefValue } from "../../hooks";
|
|
18
20
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
19
21
|
function withEllipsisTypography(Component) {
|
|
20
22
|
return function EllipsisText(props) {
|
|
@@ -23,6 +25,8 @@ function withEllipsisTypography(Component) {
|
|
|
23
25
|
children = props.children,
|
|
24
26
|
_props$text = props.text,
|
|
25
27
|
text = _props$text === void 0 ? children : _props$text,
|
|
28
|
+
_props$watchResize = props.watchResize,
|
|
29
|
+
watchResize = _props$watchResize === void 0 ? true : _props$watchResize,
|
|
26
30
|
rest = _objectWithoutProperties(props, _excluded);
|
|
27
31
|
var _useState = useState(false),
|
|
28
32
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -32,6 +36,7 @@ function withEllipsisTypography(Component) {
|
|
|
32
36
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
33
37
|
dom = _useState4[0],
|
|
34
38
|
setDom = _useState4[1];
|
|
39
|
+
var domRef = useRefValue(dom);
|
|
35
40
|
var isAutoEllipsis = useMemo(function () {
|
|
36
41
|
return ellipsis === true;
|
|
37
42
|
}, [ellipsis]);
|
|
@@ -47,10 +52,21 @@ function withEllipsisTypography(Component) {
|
|
|
47
52
|
var tooltipTitle = useMemo(function () {
|
|
48
53
|
return isEllipsis ? text : undefined;
|
|
49
54
|
}, [isEllipsis, text]);
|
|
55
|
+
var detectEllipsis = useRefFunction(function () {
|
|
56
|
+
return dom && setIsEllipsis(dom.scrollWidth > dom.clientWidth || dom.scrollHeight > dom.clientHeight);
|
|
57
|
+
});
|
|
58
|
+
useResizeDetector({
|
|
59
|
+
targetRef: watchResize ? domRef : undefined,
|
|
60
|
+
onResize: detectEllipsis,
|
|
61
|
+
refreshRate: 10,
|
|
62
|
+
refreshOptions: {
|
|
63
|
+
leading: false
|
|
64
|
+
}
|
|
65
|
+
});
|
|
50
66
|
useEffect(function () {
|
|
51
67
|
if (dom && isAuto) {
|
|
52
68
|
Promise.resolve().then(function () {
|
|
53
|
-
|
|
69
|
+
detectEllipsis();
|
|
54
70
|
});
|
|
55
71
|
}
|
|
56
72
|
}, [text, isAuto, dom]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useEffect","useMemo","useState","Tooltip","jsx","_jsx","withEllipsisTypography","Component","EllipsisText","props","_props$ellipsis","ellipsis","children","_props$text","text","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","isEllipsis","setIsEllipsis","_useState3","_useState4","dom","setDom","isAutoEllipsis","isAutoTooltip","_typeof","tooltip","isAutoTooltipTitle","title","isAuto","tooltipTitle","undefined","
|
|
1
|
+
{"version":3,"names":["useEffect","useMemo","useState","Tooltip","useResizeDetector","useRefFunction","useRefValue","jsx","_jsx","withEllipsisTypography","Component","EllipsisText","props","_props$ellipsis","ellipsis","children","_props$text","text","_props$watchResize","watchResize","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","isEllipsis","setIsEllipsis","_useState3","_useState4","dom","setDom","domRef","isAutoEllipsis","isAutoTooltip","_typeof","tooltip","isAutoTooltipTitle","title","isAuto","tooltipTitle","undefined","detectEllipsis","scrollWidth","clientWidth","scrollHeight","clientHeight","targetRef","onResize","refreshRate","refreshOptions","leading","Promise","resolve","then","_objectSpread","ref"],"sources":["../../../src/components/EllipsisTypography/withEllipsisTypography.tsx"],"sourcesContent":["import type { ComponentType } from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport type { TooltipProps } from 'antd';\nimport { Tooltip } from 'antd';\nimport type { EllipsisConfig } from 'antd/es/typography/Base';\nimport type { ParagraphProps } from 'antd/es/typography/Paragraph';\nimport type { TextProps } from 'antd/es/typography/Text';\nimport type { TitleProps } from 'antd/es/typography/Title';\nimport { useResizeDetector } from 'react-resize-detector';\nimport { useRefFunction, useRefValue } from '../../hooks';\n\nfunction withEllipsisTypography<T extends TextProps | ParagraphProps | TitleProps>(\n Component: ComponentType<MakeEllipsisTypographyProps<T>>\n) {\n return function EllipsisText(props: MakeEllipsisTypographyProps<T>) {\n const { ellipsis = true, children, text = children, watchResize = true, ...rest } = props;\n const [isEllipsis, setIsEllipsis] = useState(false);\n const [dom, setDom] = useState<HTMLElement | null>(null);\n const domRef = useRefValue(dom);\n const isAutoEllipsis = useMemo(() => ellipsis === true, [ellipsis]);\n const isAutoTooltip = useMemo(() => typeof ellipsis === 'object' && ellipsis.tooltip === true, [ellipsis]);\n const isAutoTooltipTitle = useMemo(\n () =>\n typeof ellipsis === 'object' &&\n ellipsis.tooltip &&\n typeof ellipsis.tooltip === 'object' &&\n 'title' in ellipsis.tooltip &&\n ellipsis.tooltip.title === true,\n [ellipsis]\n );\n const isAuto = useMemo(\n () => isAutoEllipsis || isAutoTooltip || isAutoTooltipTitle,\n [isAutoEllipsis, isAutoTooltip, isAutoTooltipTitle]\n );\n const tooltipTitle = useMemo(() => (isEllipsis ? text : undefined), [isEllipsis, text]);\n\n const detectEllipsis = useRefFunction(\n () => dom && setIsEllipsis(dom.scrollWidth > dom.clientWidth || dom.scrollHeight > dom.clientHeight)\n );\n useResizeDetector({\n targetRef: watchResize ? domRef : undefined,\n onResize: detectEllipsis,\n refreshRate: 10,\n refreshOptions: {\n leading: false,\n },\n });\n\n useEffect(() => {\n if (dom && isAuto) {\n Promise.resolve().then(() => {\n detectEllipsis();\n });\n }\n }, [text, isAuto, dom]);\n\n return (\n <Tooltip {...((ellipsis as EllipsisConfig)?.tooltip as TooltipProps)} title={tooltipTitle}>\n <Component\n ref={setDom}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n {...(rest as any)}\n ellipsis={\n isAutoEllipsis\n ? { tooltip: undefined }\n : isAutoTooltip\n ? {\n ...(ellipsis as EllipsisConfig),\n tooltip: undefined,\n }\n : isAutoTooltipTitle\n ? {\n ...(ellipsis as EllipsisConfig),\n tooltip: {\n ...((ellipsis as EllipsisConfig)?.tooltip as TooltipProps),\n title: undefined,\n },\n }\n : ellipsis\n }\n >\n {text}\n </Component>\n </Tooltip>\n );\n };\n}\n\nexport type MakeEllipsisTypographyProps<T> = Omit<T, 'children'> & {\n /**\n * - **EN:** The text content to display. If not provided, the children will be used.\n * - **CN:** 要显示的文本内容。如果未提供，将使用子元素。\n */\n text?: string | undefined;\n /**\n * - **EN:** The children content to display. The `text` prop will take precedence if both are\n * provided.\n * - **CN:** 要显示的子元素内容。如果同时提供了 `text` 属性，将优先使用 `text`。\n */\n children?: string | undefined | null;\n /**\n * - **EN:** Whether to monitor the component's size and adjust the ellipsis accordingly.\n * - **CN:** 是否监控组件的大小并相应地调整省略号。\n *\n * @default true\n */\n watchResize?: boolean;\n};\n\nexport default withEllipsisTypography;\n"],"mappings":"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"}
|
|
@@ -4,12 +4,26 @@ import type { IconFontProps as AntIconFontProps } from '@ant-design/icons/es/com
|
|
|
4
4
|
* - **EN:** Props for the Iconfont component
|
|
5
5
|
* - **CN:** Iconfont 组件的props
|
|
6
6
|
*/
|
|
7
|
-
export interface IconfontProps<T extends string = string> extends Omit<AntIconFontProps<T>, 'type' | 'size'> {
|
|
7
|
+
export interface IconfontProps<T extends string = string> extends Omit<AntIconFontProps<T>, 'type' | 'size' | 'spin' | 'rotate'> {
|
|
8
8
|
/**
|
|
9
9
|
* - **EN:** Icon name. Find an icon in iconfont and click `Copy Code`
|
|
10
10
|
* - **CN:** 图标名称。在 iconfont 中找到某个图标，点击`复制代码`
|
|
11
11
|
*/
|
|
12
12
|
type: T;
|
|
13
|
+
/**
|
|
14
|
+
* - **EN:** Whether the icon should spin continuously, can be used to indicate loading
|
|
15
|
+
* - **CN:** 图标是否持续旋转，可以实现 loading 的效果
|
|
16
|
+
*
|
|
17
|
+
* @default false
|
|
18
|
+
*/
|
|
19
|
+
spin?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* - **EN:** Rotate the icon by a fixed angle clockwise
|
|
22
|
+
* - **CN:** 图标顺时针旋转一个固定角度
|
|
23
|
+
*
|
|
24
|
+
* @default 0
|
|
25
|
+
*/
|
|
26
|
+
rotate?: number;
|
|
13
27
|
/**
|
|
14
28
|
* - **EN:** Icon size, an alias for `style.fontSize`
|
|
15
29
|
* - **CN:** 图标尺寸，是 `style.fontSize` 的别名
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useContext","classNames","createFromIconfontCN","ConfigProvider","jsx","_jsx","createIconfont","scriptUrl","options","_ref","_ref$iconPrefix","iconPrefix","AntdIconfont","Iconfont","props","_style$fontSize","type","className","size","style","iconProps","_objectWithoutProperties","_excluded","_useContext","ConfigContext","getPrefixCls","iconType","startsWith","concat","_objectSpread","fontSize"],"sources":["../../../src/components/Iconfont/createIconfont.tsx"],"sourcesContent":["import { type CSSProperties, type FC, useContext } from 'react';\nimport classNames from 'classnames';\nimport { createFromIconfontCN } from '@ant-design/icons';\nimport type { IconFontProps as AntIconFontProps } from '@ant-design/icons/es/components/IconFont';\nimport ConfigProvider from '../ConfigProvider';\n\n/**\n * - **EN:** Props for the Iconfont component\n * - **CN:** Iconfont 组件的props\n */\nexport interface IconfontProps<T extends string = string
|
|
1
|
+
{"version":3,"names":["useContext","classNames","createFromIconfontCN","ConfigProvider","jsx","_jsx","createIconfont","scriptUrl","options","_ref","_ref$iconPrefix","iconPrefix","AntdIconfont","Iconfont","props","_style$fontSize","type","className","size","style","iconProps","_objectWithoutProperties","_excluded","_useContext","ConfigContext","getPrefixCls","iconType","startsWith","concat","_objectSpread","fontSize"],"sources":["../../../src/components/Iconfont/createIconfont.tsx"],"sourcesContent":["import { type CSSProperties, type FC, useContext } from 'react';\nimport classNames from 'classnames';\nimport { createFromIconfontCN } from '@ant-design/icons';\nimport type { IconFontProps as AntIconFontProps } from '@ant-design/icons/es/components/IconFont';\nimport ConfigProvider from '../ConfigProvider';\n\n/**\n * - **EN:** Props for the Iconfont component\n * - **CN:** Iconfont 组件的props\n */\nexport interface IconfontProps<T extends string = string>\n extends Omit<AntIconFontProps<T>, 'type' | 'size' | 'spin' | 'rotate'> {\n /**\n * - **EN:** Icon name. Find an icon in iconfont and click `Copy Code`\n * - **CN:** 图标名称。在 iconfont 中找到某个图标，点击`复制代码`\n */\n type: T;\n /**\n * - **EN:** Whether the icon should spin continuously, can be used to indicate loading\n * - **CN:** 图标是否持续旋转，可以实现 loading 的效果\n *\n * @default false\n */\n spin?: boolean;\n /**\n * - **EN:** Rotate the icon by a fixed angle clockwise\n * - **CN:** 图标顺时针旋转一个固定角度\n *\n * @default 0\n */\n rotate?: number;\n /**\n * - **EN:** Icon size, an alias for `style.fontSize`\n * - **CN:** 图标尺寸，是 `style.fontSize` 的别名\n */\n size?: CSSProperties['fontSize'];\n}\n\n/**\n * - **EN:** Create an Iconfont component with a specified iconfont script URL.\n * - **CN:** 创建一个Iconfont组件，指定iconfont的脚本地址\n *\n * @param scriptUrl - Path to the iconfont script | 字体图标的路径\n */\nexport const createIconfont = <T extends string = string>(\n scriptUrl: string,\n options?: {\n /** Icon name prefix | 图标名称前缀 */\n iconPrefix?: string;\n }\n): FC<IconfontProps<T>> => {\n const { iconPrefix = '' } = options || {};\n const AntdIconfont = createFromIconfontCN({ scriptUrl });\n /**\n * - **EN:** Render an iconfont icon, setting the `type` prop to the iconfont icon name.\n * - **CN:** 渲染一个 iconfont 的图标，把 `type` 属性设置为 iconfont 字体的图标名\n */\n const Iconfont: FC<IconfontProps<T>> = (props) => {\n const { type, className, size, style, ...iconProps } = props;\n const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n const iconType = type.startsWith(iconPrefix) ? type : `${iconPrefix}-${type}`;\n\n return (\n <AntdIconfont\n type={iconType}\n className={classNames(getPrefixCls('iconfont'), className)}\n style={{\n ...style,\n fontSize: style?.fontSize ?? size,\n }}\n {...iconProps}\n />\n );\n };\n return Iconfont;\n};\n"],"mappings":";;;;;;;;;AAAA,SAAsCA,UAAU,QAAQ,OAAO;AAC/D,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,oBAAoB,QAAQ,mBAAmB;AAExD,OAAOC,cAAc;;AAErB;AACA;AACA;AACA;AAHA,SAAAC,GAAA,IAAAC,IAAA;AAgCA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CACzBC,SAAiB,EACjBC,OAGC,EACwB;EACzB,IAAAC,IAAA,GAA4BD,OAAO,IAAI,CAAC,CAAC;IAAAE,eAAA,GAAAD,IAAA,CAAjCE,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAG,EAAE,GAAAA,eAAA;EACvB,IAAME,YAAY,GAAGV,oBAAoB,CAAC;IAAEK,SAAS,EAATA;EAAU,CAAC,CAAC;EACxD;AACF;AACA;AACA;EACE,IAAMM,QAA8B,GAAG,SAAjCA,QAA8BA,CAAIC,KAAK,EAAK;IAAA,IAAAC,eAAA;IAChD,IAAQC,IAAI,GAA2CF,KAAK,CAApDE,IAAI;MAAEC,SAAS,GAAgCH,KAAK,CAA9CG,SAAS;MAAEC,IAAI,GAA0BJ,KAAK,CAAnCI,IAAI;MAAEC,KAAK,GAAmBL,KAAK,CAA7BK,KAAK;MAAKC,SAAS,GAAAC,wBAAA,CAAKP,KAAK,EAAAQ,SAAA;IAC5D,IAAAC,WAAA,GAAyBvB,UAAU,CAACG,cAAc,CAACqB,aAAa,CAAC;MAAzDC,YAAY,GAAAF,WAAA,CAAZE,YAAY;IACpB,IAAMC,QAAQ,GAAGV,IAAI,CAACW,UAAU,CAAChB,UAAU,CAAC,GAAGK,IAAI,MAAAY,MAAA,CAAMjB,UAAU,OAAAiB,MAAA,CAAIZ,IAAI,CAAE;IAE7E,oBACEX,IAAA,CAACO,YAAY,EAAAiB,aAAA;MACXb,IAAI,EAAEU,QAAS;MACfT,SAAS,EAAEhB,UAAU,CAACwB,YAAY,CAAC,UAAU,CAAC,EAAER,SAAS,CAAE;MAC3DE,KAAK,EAAAU,aAAA,CAAAA,aAAA,KACAV,KAAK;QACRW,QAAQ,GAAAf,eAAA,GAAEI,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEW,QAAQ,cAAAf,eAAA,cAAAA,eAAA,GAAIG;MAAI;IACjC,GACEE,SAAS,CACd,CAAC;EAEN,CAAC;EACD,OAAOP,QAAQ;AACjB,CAAC"}
|
|
@@ -44,6 +44,10 @@ var ConfigProvider = (props) => {
|
|
|
44
44
|
const { getPrefixCls, rootPrefixCls } = (0, import_react.useContext)(import_antd.ConfigProvider.ConfigContext);
|
|
45
45
|
const prefixCls = getPrefixCls("react-easy", prefixClsInProps);
|
|
46
46
|
const [wrapCSSVar, hashId, cssVarCls] = (0, import_style.default)(prefixCls, rootPrefixCls);
|
|
47
|
+
const getEasyPrefixCls = (0, import_react.useCallback)(
|
|
48
|
+
(suffixCls, customizePrefixCls) => getPrefixCls(`easy-${suffixCls}`, customizePrefixCls),
|
|
49
|
+
[getPrefixCls]
|
|
50
|
+
);
|
|
47
51
|
const contextValue = (0, import_react.useMemo)(
|
|
48
52
|
() => {
|
|
49
53
|
if (langInProps !== import_locales.default.language) {
|
|
@@ -51,11 +55,11 @@ var ConfigProvider = (props) => {
|
|
|
51
55
|
}
|
|
52
56
|
return {
|
|
53
57
|
...restProps,
|
|
54
|
-
getPrefixCls:
|
|
58
|
+
getPrefixCls: getEasyPrefixCls
|
|
55
59
|
};
|
|
56
60
|
},
|
|
57
61
|
// eslint-disable-next-line @tiny-codes/react-hooks/exhaustive-deps
|
|
58
|
-
[langInProps,
|
|
62
|
+
[langInProps, getEasyPrefixCls, ...Object.values(restProps)]
|
|
59
63
|
);
|
|
60
64
|
(0, import_react.useEffect)(() => {
|
|
61
65
|
if (userLocales) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/ConfigProvider/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { CSSProperties, FC, ReactNode } from 'react';\nimport { useContext, useEffect, useMemo } from 'react';\nimport { ConfigProvider as ReactConfigProvider } from 'antd';\nimport classNames from 'classnames';\nimport locales, { langs, resources } from '../../locales';\nimport type localesEn from '../../locales/langs/en';\nimport ReactEasyContext, { type ReactEasyContextProps } from './context';\nimport useStyle from './style';\n\nexport interface ConfigProviderProps extends Omit<ReactEasyContextProps, 'getPrefixCls'> {\n /**\n * - **EN:** Child elements of the ConfigProvider\n * - **CN:** ConfigProvider 的子元素\n */\n children: ReactNode;\n /**\n * - **EN:** Custom prefix for the component's CSS class.\n * - **CN:** 组件的自定义 CSS 类前缀。\n */\n prefixCls?: string;\n /**\n * - **EN:** Custom class name for the root element\n * - **CN:** 根元素的自定义类名\n */\n className?: string;\n /**\n * - **EN:** Custom styles for the root element\n * - **CN:** 根元素的自定义样式\n */\n style?: CSSProperties;\n /**\n * - **EN:** Custom localization resources, if `lang` exists, it will override the localization\n * resources of that language, otherwise, it will add a new language\n * - **CN:** 自定义本地化资源，如果`lang`存在，则会覆盖该语言的本地化资源，否则，会添加一种新的语言\n */\n locales?: Partial<typeof localesEn>;\n}\n\n/**\n * - **EN:** Provide global configuration for AntdHelper\n * - **CN:** 提供AntdHelper的全局配置\n */\nconst ConfigProvider: FC<ConfigProviderProps> & { ConfigContext: typeof ReactEasyContext } = (props) => {\n const { children, locales: userLocales, prefixCls: prefixClsInProps, className, style, ...restProps } = props;\n const { lang: langInProps } = restProps;\n const { getPrefixCls, rootPrefixCls } = useContext(ReactConfigProvider.ConfigContext);\n const prefixCls = getPrefixCls('react-easy', prefixClsInProps);\n const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootPrefixCls);\n const contextValue = useMemo(\n () => {\n if (langInProps !== locales.language) {\n locales.changeLanguage(langInProps || 'en-US');\n }\n return {\n ...restProps,\n getPrefixCls:
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,
|
|
4
|
+
"sourcesContent": ["import type { CSSProperties, FC, ReactNode } from 'react';\nimport { useCallback, useContext, useEffect, useMemo } from 'react';\nimport { ConfigProvider as ReactConfigProvider } from 'antd';\nimport classNames from 'classnames';\nimport locales, { langs, resources } from '../../locales';\nimport type localesEn from '../../locales/langs/en';\nimport ReactEasyContext, { type ReactEasyContextProps } from './context';\nimport useStyle from './style';\n\nexport interface ConfigProviderProps extends Omit<ReactEasyContextProps, 'getPrefixCls'> {\n /**\n * - **EN:** Child elements of the ConfigProvider\n * - **CN:** ConfigProvider 的子元素\n */\n children: ReactNode;\n /**\n * - **EN:** Custom prefix for the component's CSS class.\n * - **CN:** 组件的自定义 CSS 类前缀。\n */\n prefixCls?: string;\n /**\n * - **EN:** Custom class name for the root element\n * - **CN:** 根元素的自定义类名\n */\n className?: string;\n /**\n * - **EN:** Custom styles for the root element\n * - **CN:** 根元素的自定义样式\n */\n style?: CSSProperties;\n /**\n * - **EN:** Custom localization resources, if `lang` exists, it will override the localization\n * resources of that language, otherwise, it will add a new language\n * - **CN:** 自定义本地化资源，如果`lang`存在，则会覆盖该语言的本地化资源，否则，会添加一种新的语言\n */\n locales?: Partial<typeof localesEn>;\n}\n\n/**\n * - **EN:** Provide global configuration for AntdHelper\n * - **CN:** 提供AntdHelper的全局配置\n */\nconst ConfigProvider: FC<ConfigProviderProps> & { ConfigContext: typeof ReactEasyContext } = (props) => {\n const { children, locales: userLocales, prefixCls: prefixClsInProps, className, style, ...restProps } = props;\n const { lang: langInProps } = restProps;\n const { getPrefixCls, rootPrefixCls } = useContext(ReactConfigProvider.ConfigContext);\n const prefixCls = getPrefixCls('react-easy', prefixClsInProps);\n const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootPrefixCls);\n const getEasyPrefixCls = useCallback(\n (suffixCls: string, customizePrefixCls?: string) => getPrefixCls(`easy-${suffixCls}`, customizePrefixCls),\n [getPrefixCls]\n );\n const contextValue = useMemo(\n () => {\n if (langInProps !== locales.language) {\n locales.changeLanguage(langInProps || 'en-US');\n }\n return {\n ...restProps,\n getPrefixCls: getEasyPrefixCls,\n };\n },\n // eslint-disable-next-line @tiny-codes/react-hooks/exhaustive-deps\n [langInProps, getEasyPrefixCls, ...Object.values(restProps)]\n );\n\n useEffect(() => {\n // Dynamically add language pack\n if (userLocales) {\n const lang = langInProps || 'en-US';\n if (lang && langs.includes(lang)) {\n locales.removeResourceBundle(lang, 'translation');\n locales.addResourceBundle(lang, 'translation', { ...resources[lang].translation, ...userLocales });\n } else {\n locales.addResourceBundle(lang, 'translation', { ...resources['en-US'].translation, ...userLocales });\n }\n }\n }, [langInProps, userLocales]);\n\n return wrapCSSVar(\n <ReactEasyContext.Provider value={contextValue}>\n <div className={classNames(hashId, cssVarCls, prefixCls, className)} style={style}>\n {children}\n </div>\n </ReactEasyContext.Provider>\n );\n};\nConfigProvider.displayName = 'ReactEasyConfigProvider';\nConfigProvider.ConfigContext = ReactEasyContext;\n\nexport default ConfigProvider;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA4D;AAC5D,kBAAsD;AACtD,wBAAuB;AACvB,qBAA0C;AAE1C,qBAA6D;AAC7D,mBAAqB;AAmCrB,IAAM,iBAAuF,CAAC,UAAU;AACtG,QAAM,EAAE,UAAU,SAAS,aAAa,WAAW,kBAAkB,WAAW,OAAO,GAAG,UAAU,IAAI;AACxG,QAAM,EAAE,MAAM,YAAY,IAAI;AAC9B,QAAM,EAAE,cAAc,cAAc,QAAI,yBAAW,YAAAA,eAAoB,aAAa;AACpF,QAAM,YAAY,aAAa,cAAc,gBAAgB;AAC7D,QAAM,CAAC,YAAY,QAAQ,SAAS,QAAI,aAAAC,SAAS,WAAW,aAAa;AACzE,QAAM,uBAAmB;AAAA,IACvB,CAAC,WAAmB,uBAAgC,aAAa,QAAQ,aAAa,kBAAkB;AAAA,IACxG,CAAC,YAAY;AAAA,EACf;AACA,QAAM,mBAAe;AAAA,IACnB,MAAM;AACJ,UAAI,gBAAgB,eAAAC,QAAQ,UAAU;AACpC,uBAAAA,QAAQ,eAAe,eAAe,OAAO;AAAA,MAC/C;AACA,aAAO;AAAA,QACL,GAAG;AAAA,QACH,cAAc;AAAA,MAChB;AAAA,IACF;AAAA;AAAA,IAEA,CAAC,aAAa,kBAAkB,GAAG,OAAO,OAAO,SAAS,CAAC;AAAA,EAC7D;AAEA,8BAAU,MAAM;AAEd,QAAI,aAAa;AACf,YAAM,OAAO,eAAe;AAC5B,UAAI,QAAQ,qBAAM,SAAS,IAAI,GAAG;AAChC,uBAAAA,QAAQ,qBAAqB,MAAM,aAAa;AAChD,uBAAAA,QAAQ,kBAAkB,MAAM,eAAe,EAAE,GAAG,yBAAU,IAAI,EAAE,aAAa,GAAG,YAAY,CAAC;AAAA,MACnG,OAAO;AACL,uBAAAA,QAAQ,kBAAkB,MAAM,eAAe,EAAE,GAAG,yBAAU,OAAO,EAAE,aAAa,GAAG,YAAY,CAAC;AAAA,MACtG;AAAA,IACF;AAAA,EACF,GAAG,CAAC,aAAa,WAAW,CAAC;AAE7B,SAAO;AAAA,IACL,oCAAC,eAAAC,QAAiB,UAAjB,EAA0B,OAAO,gBAChC,oCAAC,SAAI,eAAW,kBAAAC,SAAW,QAAQ,WAAW,WAAW,SAAS,GAAG,SAClE,QACH,CACF;AAAA,EACF;AACF;AACA,eAAe,cAAc;AAC7B,eAAe,gBAAgB,eAAAD;AAE/B,IAAO,yBAAQ;",
|
|
6
6
|
"names": ["ReactConfigProvider", "useStyle", "locales", "ReactEasyContext", "classNames"]
|
|
7
7
|
}
|
|
@@ -4,7 +4,23 @@ import type { TextProps } from 'antd/es/typography/Text';
|
|
|
4
4
|
import type { TitleProps } from 'antd/es/typography/Title';
|
|
5
5
|
declare function withEllipsisTypography<T extends TextProps | ParagraphProps | TitleProps>(Component: ComponentType<MakeEllipsisTypographyProps<T>>): (props: MakeEllipsisTypographyProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
export type MakeEllipsisTypographyProps<T> = Omit<T, 'children'> & {
|
|
7
|
+
/**
|
|
8
|
+
* - **EN:** The text content to display. If not provided, the children will be used.
|
|
9
|
+
* - **CN:** 要显示的文本内容。如果未提供，将使用子元素。
|
|
10
|
+
*/
|
|
7
11
|
text?: string | undefined;
|
|
12
|
+
/**
|
|
13
|
+
* - **EN:** The children content to display. The `text` prop will take precedence if both are
|
|
14
|
+
* provided.
|
|
15
|
+
* - **CN:** 要显示的子元素内容。如果同时提供了 `text` 属性，将优先使用 `text`。
|
|
16
|
+
*/
|
|
8
17
|
children?: string | undefined | null;
|
|
18
|
+
/**
|
|
19
|
+
* - **EN:** Whether to monitor the component's size and adjust the ellipsis accordingly.
|
|
20
|
+
* - **CN:** 是否监控组件的大小并相应地调整省略号。
|
|
21
|
+
*
|
|
22
|
+
* @default true
|
|
23
|
+
*/
|
|
24
|
+
watchResize?: boolean;
|
|
9
25
|
};
|
|
10
26
|
export default withEllipsisTypography;
|
|
@@ -24,11 +24,14 @@ __export(withEllipsisTypography_exports, {
|
|
|
24
24
|
module.exports = __toCommonJS(withEllipsisTypography_exports);
|
|
25
25
|
var import_react = require("react");
|
|
26
26
|
var import_antd = require("antd");
|
|
27
|
+
var import_react_resize_detector = require("react-resize-detector");
|
|
28
|
+
var import_hooks = require("../../hooks");
|
|
27
29
|
function withEllipsisTypography(Component) {
|
|
28
30
|
return function EllipsisText(props) {
|
|
29
|
-
const { ellipsis = true, children, text = children, ...rest } = props;
|
|
31
|
+
const { ellipsis = true, children, text = children, watchResize = true, ...rest } = props;
|
|
30
32
|
const [isEllipsis, setIsEllipsis] = (0, import_react.useState)(false);
|
|
31
33
|
const [dom, setDom] = (0, import_react.useState)(null);
|
|
34
|
+
const domRef = (0, import_hooks.useRefValue)(dom);
|
|
32
35
|
const isAutoEllipsis = (0, import_react.useMemo)(() => ellipsis === true, [ellipsis]);
|
|
33
36
|
const isAutoTooltip = (0, import_react.useMemo)(() => typeof ellipsis === "object" && ellipsis.tooltip === true, [ellipsis]);
|
|
34
37
|
const isAutoTooltipTitle = (0, import_react.useMemo)(
|
|
@@ -40,10 +43,21 @@ function withEllipsisTypography(Component) {
|
|
|
40
43
|
[isAutoEllipsis, isAutoTooltip, isAutoTooltipTitle]
|
|
41
44
|
);
|
|
42
45
|
const tooltipTitle = (0, import_react.useMemo)(() => isEllipsis ? text : void 0, [isEllipsis, text]);
|
|
46
|
+
const detectEllipsis = (0, import_hooks.useRefFunction)(
|
|
47
|
+
() => dom && setIsEllipsis(dom.scrollWidth > dom.clientWidth || dom.scrollHeight > dom.clientHeight)
|
|
48
|
+
);
|
|
49
|
+
(0, import_react_resize_detector.useResizeDetector)({
|
|
50
|
+
targetRef: watchResize ? domRef : void 0,
|
|
51
|
+
onResize: detectEllipsis,
|
|
52
|
+
refreshRate: 10,
|
|
53
|
+
refreshOptions: {
|
|
54
|
+
leading: false
|
|
55
|
+
}
|
|
56
|
+
});
|
|
43
57
|
(0, import_react.useEffect)(() => {
|
|
44
58
|
if (dom && isAuto) {
|
|
45
59
|
Promise.resolve().then(() => {
|
|
46
|
-
|
|
60
|
+
detectEllipsis();
|
|
47
61
|
});
|
|
48
62
|
}
|
|
49
63
|
}, [text, isAuto, dom]);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/EllipsisTypography/withEllipsisTypography.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { ComponentType } from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport type { TooltipProps } from 'antd';\nimport { Tooltip } from 'antd';\nimport type { EllipsisConfig } from 'antd/es/typography/Base';\nimport type { ParagraphProps } from 'antd/es/typography/Paragraph';\nimport type { TextProps } from 'antd/es/typography/Text';\nimport type { TitleProps } from 'antd/es/typography/Title';\n\nfunction withEllipsisTypography<T extends TextProps | ParagraphProps | TitleProps>(\n Component: ComponentType<MakeEllipsisTypographyProps<T>>\n) {\n return function EllipsisText(props: MakeEllipsisTypographyProps<T>) {\n const { ellipsis = true, children, text = children, ...rest } = props;\n const [isEllipsis, setIsEllipsis] = useState(false);\n const [dom, setDom] = useState<HTMLElement | null>(null);\n const isAutoEllipsis = useMemo(() => ellipsis === true, [ellipsis]);\n const isAutoTooltip = useMemo(() => typeof ellipsis === 'object' && ellipsis.tooltip === true, [ellipsis]);\n const isAutoTooltipTitle = useMemo(\n () =>\n typeof ellipsis === 'object' &&\n ellipsis.tooltip &&\n typeof ellipsis.tooltip === 'object' &&\n 'title' in ellipsis.tooltip &&\n ellipsis.tooltip.title === true,\n [ellipsis]\n );\n const isAuto = useMemo(\n () => isAutoEllipsis || isAutoTooltip || isAutoTooltipTitle,\n [isAutoEllipsis, isAutoTooltip, isAutoTooltipTitle]\n );\n const tooltipTitle = useMemo(() => (isEllipsis ? text : undefined), [isEllipsis, text]);\n\n useEffect(() => {\n if (dom && isAuto) {\n Promise.resolve().then(() => {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA6C;AAE7C,kBAAwB;
|
|
4
|
+
"sourcesContent": ["import type { ComponentType } from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport type { TooltipProps } from 'antd';\nimport { Tooltip } from 'antd';\nimport type { EllipsisConfig } from 'antd/es/typography/Base';\nimport type { ParagraphProps } from 'antd/es/typography/Paragraph';\nimport type { TextProps } from 'antd/es/typography/Text';\nimport type { TitleProps } from 'antd/es/typography/Title';\nimport { useResizeDetector } from 'react-resize-detector';\nimport { useRefFunction, useRefValue } from '../../hooks';\n\nfunction withEllipsisTypography<T extends TextProps | ParagraphProps | TitleProps>(\n Component: ComponentType<MakeEllipsisTypographyProps<T>>\n) {\n return function EllipsisText(props: MakeEllipsisTypographyProps<T>) {\n const { ellipsis = true, children, text = children, watchResize = true, ...rest } = props;\n const [isEllipsis, setIsEllipsis] = useState(false);\n const [dom, setDom] = useState<HTMLElement | null>(null);\n const domRef = useRefValue(dom);\n const isAutoEllipsis = useMemo(() => ellipsis === true, [ellipsis]);\n const isAutoTooltip = useMemo(() => typeof ellipsis === 'object' && ellipsis.tooltip === true, [ellipsis]);\n const isAutoTooltipTitle = useMemo(\n () =>\n typeof ellipsis === 'object' &&\n ellipsis.tooltip &&\n typeof ellipsis.tooltip === 'object' &&\n 'title' in ellipsis.tooltip &&\n ellipsis.tooltip.title === true,\n [ellipsis]\n );\n const isAuto = useMemo(\n () => isAutoEllipsis || isAutoTooltip || isAutoTooltipTitle,\n [isAutoEllipsis, isAutoTooltip, isAutoTooltipTitle]\n );\n const tooltipTitle = useMemo(() => (isEllipsis ? text : undefined), [isEllipsis, text]);\n\n const detectEllipsis = useRefFunction(\n () => dom && setIsEllipsis(dom.scrollWidth > dom.clientWidth || dom.scrollHeight > dom.clientHeight)\n );\n useResizeDetector({\n targetRef: watchResize ? domRef : undefined,\n onResize: detectEllipsis,\n refreshRate: 10,\n refreshOptions: {\n leading: false,\n },\n });\n\n useEffect(() => {\n if (dom && isAuto) {\n Promise.resolve().then(() => {\n detectEllipsis();\n });\n }\n }, [text, isAuto, dom]);\n\n return (\n <Tooltip {...((ellipsis as EllipsisConfig)?.tooltip as TooltipProps)} title={tooltipTitle}>\n <Component\n ref={setDom}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n {...(rest as any)}\n ellipsis={\n isAutoEllipsis\n ? { tooltip: undefined }\n : isAutoTooltip\n ? {\n ...(ellipsis as EllipsisConfig),\n tooltip: undefined,\n }\n : isAutoTooltipTitle\n ? {\n ...(ellipsis as EllipsisConfig),\n tooltip: {\n ...((ellipsis as EllipsisConfig)?.tooltip as TooltipProps),\n title: undefined,\n },\n }\n : ellipsis\n }\n >\n {text}\n </Component>\n </Tooltip>\n );\n };\n}\n\nexport type MakeEllipsisTypographyProps<T> = Omit<T, 'children'> & {\n /**\n * - **EN:** The text content to display. If not provided, the children will be used.\n * - **CN:** 要显示的文本内容。如果未提供，将使用子元素。\n */\n text?: string | undefined;\n /**\n * - **EN:** The children content to display. The `text` prop will take precedence if both are\n * provided.\n * - **CN:** 要显示的子元素内容。如果同时提供了 `text` 属性，将优先使用 `text`。\n */\n children?: string | undefined | null;\n /**\n * - **EN:** Whether to monitor the component's size and adjust the ellipsis accordingly.\n * - **CN:** 是否监控组件的大小并相应地调整省略号。\n *\n * @default true\n */\n watchResize?: boolean;\n};\n\nexport default withEllipsisTypography;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA6C;AAE7C,kBAAwB;AAKxB,mCAAkC;AAClC,mBAA4C;AAE5C,SAAS,uBACP,WACA;AACA,SAAO,SAAS,aAAa,OAAuC;AAClE,UAAM,EAAE,WAAW,MAAM,UAAU,OAAO,UAAU,cAAc,MAAM,GAAG,KAAK,IAAI;AACpF,UAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAClD,UAAM,CAAC,KAAK,MAAM,QAAI,uBAA6B,IAAI;AACvD,UAAM,aAAS,0BAAY,GAAG;AAC9B,UAAM,qBAAiB,sBAAQ,MAAM,aAAa,MAAM,CAAC,QAAQ,CAAC;AAClE,UAAM,oBAAgB,sBAAQ,MAAM,OAAO,aAAa,YAAY,SAAS,YAAY,MAAM,CAAC,QAAQ,CAAC;AACzG,UAAM,yBAAqB;AAAA,MACzB,MACE,OAAO,aAAa,YACpB,SAAS,WACT,OAAO,SAAS,YAAY,YAC5B,WAAW,SAAS,WACpB,SAAS,QAAQ,UAAU;AAAA,MAC7B,CAAC,QAAQ;AAAA,IACX;AACA,UAAM,aAAS;AAAA,MACb,MAAM,kBAAkB,iBAAiB;AAAA,MACzC,CAAC,gBAAgB,eAAe,kBAAkB;AAAA,IACpD;AACA,UAAM,mBAAe,sBAAQ,MAAO,aAAa,OAAO,QAAY,CAAC,YAAY,IAAI,CAAC;AAEtF,UAAM,qBAAiB;AAAA,MACrB,MAAM,OAAO,cAAc,IAAI,cAAc,IAAI,eAAe,IAAI,eAAe,IAAI,YAAY;AAAA,IACrG;AACA,wDAAkB;AAAA,MAChB,WAAW,cAAc,SAAS;AAAA,MAClC,UAAU;AAAA,MACV,aAAa;AAAA,MACb,gBAAgB;AAAA,QACd,SAAS;AAAA,MACX;AAAA,IACF,CAAC;AAED,gCAAU,MAAM;AACd,UAAI,OAAO,QAAQ;AACjB,gBAAQ,QAAQ,EAAE,KAAK,MAAM;AAC3B,yBAAe;AAAA,QACjB,CAAC;AAAA,MACH;AAAA,IACF,GAAG,CAAC,MAAM,QAAQ,GAAG,CAAC;AAEtB,WACE,oCAAC,uBAAS,GAAK,qCAA6B,SAA0B,OAAO,gBAC3E;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QAEJ,GAAI;AAAA,QACL,UACE,iBACI,EAAE,SAAS,OAAU,IACrB,gBACE;AAAA,UACE,GAAI;AAAA,UACJ,SAAS;AAAA,QACX,IACA,qBACE;AAAA,UACE,GAAI;AAAA,UACJ,SAAS;AAAA,YACP,GAAK,qCAA6B;AAAA,YAClC,OAAO;AAAA,UACT;AAAA,QACF,IACA;AAAA;AAAA,MAGT;AAAA,IACH,CACF;AAAA,EAEJ;AACF;AAuBA,IAAO,iCAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,12 +4,26 @@ import type { IconFontProps as AntIconFontProps } from '@ant-design/icons/es/com
|
|
|
4
4
|
* - **EN:** Props for the Iconfont component
|
|
5
5
|
* - **CN:** Iconfont 组件的props
|
|
6
6
|
*/
|
|
7
|
-
export interface IconfontProps<T extends string = string> extends Omit<AntIconFontProps<T>, 'type' | 'size'> {
|
|
7
|
+
export interface IconfontProps<T extends string = string> extends Omit<AntIconFontProps<T>, 'type' | 'size' | 'spin' | 'rotate'> {
|
|
8
8
|
/**
|
|
9
9
|
* - **EN:** Icon name. Find an icon in iconfont and click `Copy Code`
|
|
10
10
|
* - **CN:** 图标名称。在 iconfont 中找到某个图标，点击`复制代码`
|
|
11
11
|
*/
|
|
12
12
|
type: T;
|
|
13
|
+
/**
|
|
14
|
+
* - **EN:** Whether the icon should spin continuously, can be used to indicate loading
|
|
15
|
+
* - **CN:** 图标是否持续旋转，可以实现 loading 的效果
|
|
16
|
+
*
|
|
17
|
+
* @default false
|
|
18
|
+
*/
|
|
19
|
+
spin?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* - **EN:** Rotate the icon by a fixed angle clockwise
|
|
22
|
+
* - **CN:** 图标顺时针旋转一个固定角度
|
|
23
|
+
*
|
|
24
|
+
* @default 0
|
|
25
|
+
*/
|
|
26
|
+
rotate?: number;
|
|
13
27
|
/**
|
|
14
28
|
* - **EN:** Icon size, an alias for `style.fontSize`
|
|
15
29
|
* - **CN:** 图标尺寸，是 `style.fontSize` 的别名
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Iconfont/createIconfont.tsx"],
|
|
4
|
-
"sourcesContent": ["import { type CSSProperties, type FC, useContext } from 'react';\nimport classNames from 'classnames';\nimport { createFromIconfontCN } from '@ant-design/icons';\nimport type { IconFontProps as AntIconFontProps } from '@ant-design/icons/es/components/IconFont';\nimport ConfigProvider from '../ConfigProvider';\n\n/**\n * - **EN:** Props for the Iconfont component\n * - **CN:** Iconfont 组件的props\n */\nexport interface IconfontProps<T extends string = string
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwD;AACxD,wBAAuB;AACvB,mBAAqC;AAErC,4BAA2B;
|
|
4
|
+
"sourcesContent": ["import { type CSSProperties, type FC, useContext } from 'react';\nimport classNames from 'classnames';\nimport { createFromIconfontCN } from '@ant-design/icons';\nimport type { IconFontProps as AntIconFontProps } from '@ant-design/icons/es/components/IconFont';\nimport ConfigProvider from '../ConfigProvider';\n\n/**\n * - **EN:** Props for the Iconfont component\n * - **CN:** Iconfont 组件的props\n */\nexport interface IconfontProps<T extends string = string>\n extends Omit<AntIconFontProps<T>, 'type' | 'size' | 'spin' | 'rotate'> {\n /**\n * - **EN:** Icon name. Find an icon in iconfont and click `Copy Code`\n * - **CN:** 图标名称。在 iconfont 中找到某个图标，点击`复制代码`\n */\n type: T;\n /**\n * - **EN:** Whether the icon should spin continuously, can be used to indicate loading\n * - **CN:** 图标是否持续旋转，可以实现 loading 的效果\n *\n * @default false\n */\n spin?: boolean;\n /**\n * - **EN:** Rotate the icon by a fixed angle clockwise\n * - **CN:** 图标顺时针旋转一个固定角度\n *\n * @default 0\n */\n rotate?: number;\n /**\n * - **EN:** Icon size, an alias for `style.fontSize`\n * - **CN:** 图标尺寸，是 `style.fontSize` 的别名\n */\n size?: CSSProperties['fontSize'];\n}\n\n/**\n * - **EN:** Create an Iconfont component with a specified iconfont script URL.\n * - **CN:** 创建一个Iconfont组件，指定iconfont的脚本地址\n *\n * @param scriptUrl - Path to the iconfont script | 字体图标的路径\n */\nexport const createIconfont = <T extends string = string>(\n scriptUrl: string,\n options?: {\n /** Icon name prefix | 图标名称前缀 */\n iconPrefix?: string;\n }\n): FC<IconfontProps<T>> => {\n const { iconPrefix = '' } = options || {};\n const AntdIconfont = createFromIconfontCN({ scriptUrl });\n /**\n * - **EN:** Render an iconfont icon, setting the `type` prop to the iconfont icon name.\n * - **CN:** 渲染一个 iconfont 的图标，把 `type` 属性设置为 iconfont 字体的图标名\n */\n const Iconfont: FC<IconfontProps<T>> = (props) => {\n const { type, className, size, style, ...iconProps } = props;\n const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n const iconType = type.startsWith(iconPrefix) ? type : `${iconPrefix}-${type}`;\n\n return (\n <AntdIconfont\n type={iconType}\n className={classNames(getPrefixCls('iconfont'), className)}\n style={{\n ...style,\n fontSize: style?.fontSize ?? size,\n }}\n {...iconProps}\n />\n );\n };\n return Iconfont;\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwD;AACxD,wBAAuB;AACvB,mBAAqC;AAErC,4BAA2B;AAwCpB,IAAM,iBAAiB,CAC5B,WACA,YAIyB;AACzB,QAAM,EAAE,aAAa,GAAG,IAAI,WAAW,CAAC;AACxC,QAAM,mBAAe,mCAAqB,EAAE,UAAU,CAAC;AAKvD,QAAM,WAAiC,CAAC,UAAU;AAChD,UAAM,EAAE,MAAM,WAAW,MAAM,OAAO,GAAG,UAAU,IAAI;AACvD,UAAM,EAAE,aAAa,QAAI,yBAAW,sBAAAA,QAAe,aAAa;AAChE,UAAM,WAAW,KAAK,WAAW,UAAU,IAAI,OAAO,GAAG,cAAc;AAEvE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,eAAW,kBAAAC,SAAW,aAAa,UAAU,GAAG,SAAS;AAAA,QACzD,OAAO;AAAA,UACL,GAAG;AAAA,UACH,WAAU,+BAAO,aAAY;AAAA,QAC/B;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACA,SAAO;AACT;",
|
|
6
6
|
"names": ["ConfigProvider", "classNames"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tiny-codes/react-easy",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.8",
|
|
4
4
|
"description": "Simplify React and AntDesign development with practical components and hooks",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -46,6 +46,7 @@
|
|
|
46
46
|
"crypto-js": "^4.2.0",
|
|
47
47
|
"lexical": "^0.33.1",
|
|
48
48
|
"react-contexify": "^6.0.0",
|
|
49
|
+
"react-resize-detector": "^12.3.0",
|
|
49
50
|
"sockjs-client": "^1.6.1"
|
|
50
51
|
},
|
|
51
52
|
"devDependencies": {
|