@vnejs/uis.react.text-controls 0.1.6 → 0.1.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/dist/TextControls.d.ts +2 -24
- package/dist/TextControls.d.ts.map +1 -1
- package/dist/TextControls.js +1 -1
- package/dist/TextControls.js.map +1 -1
- package/dist/TextControls.types.d.ts +34 -0
- package/dist/TextControls.types.d.ts.map +1 -0
- package/dist/TextControls.types.js +2 -0
- package/dist/TextControls.types.js.map +1 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/TextControls.tsx +4 -2
- package/src/TextControls.types.tsx +35 -0
- package/src/index.ts +2 -1
- package/tsconfig.json +0 -1
package/dist/TextControls.d.ts
CHANGED
|
@@ -1,25 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
selectedIndex?: number;
|
|
4
|
-
textProps?: {};
|
|
5
|
-
flexProps?: {};
|
|
6
|
-
textSize?: number;
|
|
7
|
-
textWidth?: any;
|
|
8
|
-
textAlign?: any;
|
|
9
|
-
textMarginTop?: any;
|
|
10
|
-
flexGap?: number;
|
|
11
|
-
flexGapVertical?: number;
|
|
12
|
-
flexGapHorizontal?: number;
|
|
13
|
-
flexDirection?: any;
|
|
14
|
-
flexAlign?: any;
|
|
15
|
-
flexJustify?: any;
|
|
16
|
-
flexWithWrap?: any;
|
|
17
|
-
wrapWidth?: any;
|
|
18
|
-
wrapHeight?: any;
|
|
19
|
-
wrapClassName: any;
|
|
20
|
-
withScrollbar?: boolean;
|
|
21
|
-
scrollbarWrapRef?: any;
|
|
22
|
-
onClick: any;
|
|
23
|
-
value: any;
|
|
24
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
1
|
+
import { type TextControlsProps } from "./TextControls.types.js";
|
|
2
|
+
export declare const TextControls: ({ texts, selectedIndex, textProps, flexProps, textSize, textWidth, textAlign, textMarginTop, flexGap, flexGapVertical, flexGapHorizontal, flexDirection, flexAlign, flexJustify, flexWithWrap, wrapWidth, wrapHeight, wrapClassName, withScrollbar, scrollbarWrapRef, onClick, value, }: TextControlsProps) => import("react/jsx-runtime").JSX.Element;
|
|
25
3
|
//# sourceMappingURL=TextControls.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextControls.d.ts","sourceRoot":"","sources":["../src/TextControls.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,GAAI
|
|
1
|
+
{"version":3,"file":"TextControls.d.ts","sourceRoot":"","sources":["../src/TextControls.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,eAAO,MAAM,YAAY,GAAI,yRAuB1B,iBAAiB,4CAgDnB,CAAC"}
|
package/dist/TextControls.js
CHANGED
|
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { useCallback } from "react";
|
|
3
3
|
import { Text, Flex, Scrollbar } from "@vnejs/uis.react";
|
|
4
4
|
export const TextControls = ({ texts = [], selectedIndex = -1, textProps = {}, flexProps = {}, textSize = 60, textWidth = null, textAlign = null, textMarginTop = null, flexGap = 60, flexGapVertical = 0, flexGapHorizontal = 0, flexDirection = Flex.DIRECTION.ROW, flexAlign = null, flexJustify = null, flexWithWrap = null, wrapWidth = null, wrapHeight = null, wrapClassName, withScrollbar = false, scrollbarWrapRef = null, onClick, value, }) => {
|
|
5
|
-
const renderTexts = useCallback(() => texts.map((textInfo, i) => (_jsx(Text, { size: textSize, width: textWidth, align: textAlign, onClick: onClick, isSelected: selectedIndex === i, isCurrent: value !== undefined && value === textInfo?.value, isHoverable: true, marginTop: i === 0 ? null : textMarginTop, ...textProps, ...textInfo }, i))), [texts, textProps, selectedIndex, onClick, value]);
|
|
5
|
+
const renderTexts = useCallback(() => texts.map((textInfo, i) => (_jsx(Text, { size: textSize, width: textWidth, align: textAlign, onClick: onClick, isSelected: selectedIndex === i, isCurrent: value !== undefined && value === textInfo?.value, isHoverable: true, marginTop: i === 0 ? null : textMarginTop, ...textProps, ...textInfo }, i))), [texts, textProps, selectedIndex, onClick, value, textSize, textWidth, textAlign, textMarginTop]);
|
|
6
6
|
return withScrollbar ? (_jsx(Scrollbar, { className: wrapClassName, width: wrapWidth, height: wrapHeight, scrollTo: selectedIndex, wrapRef: scrollbarWrapRef, children: renderTexts() })) : (_jsx(Flex, { className: wrapClassName, gap: flexGap, gapHorizontal: flexGapHorizontal, gapVertical: flexGapVertical, align: flexAlign, justify: flexJustify, direction: flexDirection, withWrap: flexWithWrap, width: wrapWidth, height: wrapHeight, ...flexProps, children: renderTexts() }));
|
|
7
7
|
};
|
|
8
8
|
//# sourceMappingURL=TextControls.js.map
|
package/dist/TextControls.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextControls.js","sourceRoot":"","sources":["../src/TextControls.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"TextControls.js","sourceRoot":"","sources":["../src/TextControls.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIzD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,KAAK,GAAG,EAAE,EACV,aAAa,GAAG,CAAC,CAAC,EAClB,SAAS,GAAG,EAAE,EACd,SAAS,GAAG,EAAE,EACd,QAAQ,GAAG,EAAE,EACb,SAAS,GAAG,IAAI,EAChB,SAAS,GAAG,IAAI,EAChB,aAAa,GAAG,IAAI,EACpB,OAAO,GAAG,EAAE,EACZ,eAAe,GAAG,CAAC,EACnB,iBAAiB,GAAG,CAAC,EACrB,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,EAClC,SAAS,GAAG,IAAI,EAChB,WAAW,GAAG,IAAI,EAClB,YAAY,GAAG,IAAI,EACnB,SAAS,GAAG,IAAI,EAChB,UAAU,GAAG,IAAI,EACjB,aAAa,EACb,aAAa,GAAG,KAAK,EACrB,gBAAgB,GAAG,IAAI,EACvB,OAAO,EACP,KAAK,GACa,EAAE,EAAE;IACtB,MAAM,WAAW,GAAG,WAAW,CAC7B,GAAG,EAAE,CACH,KAAK,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,CACzB,KAAC,IAAI,IAEH,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,aAAa,KAAK,CAAC,EAC/B,SAAS,EAAE,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,QAAQ,EAAE,KAAK,EAC3D,WAAW,EAAE,IAAI,EACjB,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,KACrC,SAAS,KACT,QAAQ,IAVP,CAAC,CAWN,CACH,CAAC,EACJ,CAAC,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,CAAC,CACjG,CAAC;IAEF,OAAO,aAAa,CAAC,CAAC,CAAC,CACrB,KAAC,SAAS,IACR,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,gBAAgB,YAExB,WAAW,EAAE,GACJ,CACb,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IACH,SAAS,EAAE,aAAa,EACxB,GAAG,EAAE,OAAO,EACZ,aAAa,EAAE,iBAAiB,EAChC,WAAW,EAAE,eAAe,EAC5B,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,UAAU,KACd,SAAS,YAEZ,WAAW,EAAE,GACT,CACR,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import type { CssInsertInnerText, CssInsertValueLength } from "@vnejs/uis.utils";
|
|
2
|
+
import type { MutableRefObject } from "react";
|
|
3
|
+
export type TextControlItem = {
|
|
4
|
+
text?: CssInsertInnerText;
|
|
5
|
+
value?: unknown;
|
|
6
|
+
isNotRender?: boolean;
|
|
7
|
+
} & Record<string, unknown>;
|
|
8
|
+
export type TextControlsProps<T = unknown> = {
|
|
9
|
+
texts?: TextControlItem[];
|
|
10
|
+
selectedIndex?: number;
|
|
11
|
+
textProps?: Record<string, unknown>;
|
|
12
|
+
flexProps?: Record<string, unknown>;
|
|
13
|
+
textSize?: CssInsertValueLength;
|
|
14
|
+
textWidth?: CssInsertValueLength | null;
|
|
15
|
+
textAlign?: string | null;
|
|
16
|
+
textMarginTop?: CssInsertValueLength | null;
|
|
17
|
+
flexGap?: CssInsertValueLength;
|
|
18
|
+
flexGapVertical?: CssInsertValueLength;
|
|
19
|
+
flexGapHorizontal?: CssInsertValueLength;
|
|
20
|
+
flexDirection?: string;
|
|
21
|
+
flexAlign?: string | null;
|
|
22
|
+
flexJustify?: string | null;
|
|
23
|
+
flexWithWrap?: boolean | null;
|
|
24
|
+
wrapWidth?: CssInsertValueLength | null;
|
|
25
|
+
wrapHeight?: CssInsertValueLength | null;
|
|
26
|
+
wrapClassName?: string;
|
|
27
|
+
withScrollbar?: boolean;
|
|
28
|
+
scrollbarWrapRef?: MutableRefObject<HTMLDivElement | null> | null;
|
|
29
|
+
scrollbarProps?: Record<string, unknown>;
|
|
30
|
+
activeIndex?: number;
|
|
31
|
+
onClick?: (value?: T) => void;
|
|
32
|
+
value?: T;
|
|
33
|
+
};
|
|
34
|
+
//# sourceMappingURL=TextControls.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextControls.types.d.ts","sourceRoot":"","sources":["../src/TextControls.types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACjF,OAAO,KAAK,EAAE,gBAAgB,EAAa,MAAM,OAAO,CAAC;AAEzD,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5B,MAAM,MAAM,iBAAiB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC3C,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC,SAAS,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,eAAe,CAAC,EAAE,oBAAoB,CAAC;IACvC,iBAAiB,CAAC,EAAE,oBAAoB,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC9B,SAAS,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IAClE,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,KAAK,CAAC,EAAE,CAAC,CAAC;CACX,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextControls.types.js","sourceRoot":"","sources":["../src/TextControls.types.tsx"],"names":[],"mappings":""}
|
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC"}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC"}
|
package/package.json
CHANGED
package/src/TextControls.tsx
CHANGED
|
@@ -2,6 +2,8 @@ import { useCallback } from "react";
|
|
|
2
2
|
|
|
3
3
|
import { Text, Flex, Scrollbar } from "@vnejs/uis.react";
|
|
4
4
|
|
|
5
|
+
import { type TextControlsProps } from "./TextControls.types.js";
|
|
6
|
+
|
|
5
7
|
export const TextControls = ({
|
|
6
8
|
texts = [],
|
|
7
9
|
selectedIndex = -1,
|
|
@@ -25,7 +27,7 @@ export const TextControls = ({
|
|
|
25
27
|
scrollbarWrapRef = null,
|
|
26
28
|
onClick,
|
|
27
29
|
value,
|
|
28
|
-
}) => {
|
|
30
|
+
}: TextControlsProps) => {
|
|
29
31
|
const renderTexts = useCallback(
|
|
30
32
|
() =>
|
|
31
33
|
texts.map((textInfo, i) => (
|
|
@@ -43,7 +45,7 @@ export const TextControls = ({
|
|
|
43
45
|
{...textInfo}
|
|
44
46
|
/>
|
|
45
47
|
)),
|
|
46
|
-
[texts, textProps, selectedIndex, onClick, value],
|
|
48
|
+
[texts, textProps, selectedIndex, onClick, value, textSize, textWidth, textAlign, textMarginTop],
|
|
47
49
|
);
|
|
48
50
|
|
|
49
51
|
return withScrollbar ? (
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { CssInsertInnerText, CssInsertValueLength } from "@vnejs/uis.utils";
|
|
2
|
+
import type { MutableRefObject, ReactNode } from "react";
|
|
3
|
+
|
|
4
|
+
export type TextControlItem = {
|
|
5
|
+
text?: CssInsertInnerText;
|
|
6
|
+
value?: unknown;
|
|
7
|
+
isNotRender?: boolean;
|
|
8
|
+
} & Record<string, unknown>;
|
|
9
|
+
|
|
10
|
+
export type TextControlsProps<T = unknown> = {
|
|
11
|
+
texts?: TextControlItem[];
|
|
12
|
+
selectedIndex?: number;
|
|
13
|
+
textProps?: Record<string, unknown>;
|
|
14
|
+
flexProps?: Record<string, unknown>;
|
|
15
|
+
textSize?: CssInsertValueLength;
|
|
16
|
+
textWidth?: CssInsertValueLength | null;
|
|
17
|
+
textAlign?: string | null;
|
|
18
|
+
textMarginTop?: CssInsertValueLength | null;
|
|
19
|
+
flexGap?: CssInsertValueLength;
|
|
20
|
+
flexGapVertical?: CssInsertValueLength;
|
|
21
|
+
flexGapHorizontal?: CssInsertValueLength;
|
|
22
|
+
flexDirection?: string;
|
|
23
|
+
flexAlign?: string | null;
|
|
24
|
+
flexJustify?: string | null;
|
|
25
|
+
flexWithWrap?: boolean | null;
|
|
26
|
+
wrapWidth?: CssInsertValueLength | null;
|
|
27
|
+
wrapHeight?: CssInsertValueLength | null;
|
|
28
|
+
wrapClassName?: string;
|
|
29
|
+
withScrollbar?: boolean;
|
|
30
|
+
scrollbarWrapRef?: MutableRefObject<HTMLDivElement | null> | null;
|
|
31
|
+
scrollbarProps?: Record<string, unknown>;
|
|
32
|
+
activeIndex?: number;
|
|
33
|
+
onClick?: (value?: T) => void;
|
|
34
|
+
value?: T;
|
|
35
|
+
};
|
package/src/index.ts
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export * from "./TextControls";
|
|
1
|
+
export * from "./TextControls.types.js";
|
|
2
|
+
export * from "./TextControls.js";
|