@vnejs/uis.react.wrap-with-content 0.1.2 → 0.1.4
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/WrapWithContent.d.ts +0 -1
- package/dist/WrapWithContent.d.ts.map +1 -1
- package/dist/WrapWithContent.js +2 -3
- package/dist/WrapWithContent.js.map +1 -1
- package/dist/WrapWithContent.styles.d.ts +2 -0
- package/dist/WrapWithContent.styles.d.ts.map +1 -0
- package/dist/WrapWithContent.styles.js +27 -0
- package/dist/WrapWithContent.styles.js.map +1 -0
- package/package.json +12 -18
- package/src/WrapWithContent.stories.tsx +104 -0
- package/src/WrapWithContent.styles.ts +29 -0
- package/src/WrapWithContent.tsx +117 -0
- package/src/index.ts +1 -0
- package/tsconfig.json +18 -0
- package/dist/WrapWithContent.styl +0 -17
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import "./WrapWithContent.styl";
|
|
2
1
|
export declare const WrapWithContent: ({ className, imageSrc, isSelected, isRounded, withHover, width, height, borderWidth, top, right, bottom, left, transition, renderTopLeft, renderTopRight, renderBottomLeft, renderBottomRight, topLeftText, topLeftSize, topRightText, topRightSize, bottomLeftText, bottomLeftSize, onClick, value, }: {
|
|
3
2
|
className: any;
|
|
4
3
|
imageSrc?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WrapWithContent.d.ts","sourceRoot":"","sources":["../src/WrapWithContent.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"WrapWithContent.d.ts","sourceRoot":"","sources":["../src/WrapWithContent.tsx"],"names":[],"mappings":"AAqCA,eAAO,MAAM,eAAe,GAAI;;;;;;;;;;;;;;;;;;;;;;;;;;CA2B/B,4CAoDA,CAAC"}
|
package/dist/WrapWithContent.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback, useMemo } from "react";
|
|
3
|
-
import {
|
|
3
|
+
import { getVneLength } from "@vnejs/uis.utils";
|
|
4
4
|
import { Text, Wrap } from "@vnejs/uis.react";
|
|
5
|
-
import "./WrapWithContent.
|
|
6
|
-
const b = cn("WrapWithContent");
|
|
5
|
+
import { b } from "./WrapWithContent.styles.js";
|
|
7
6
|
const getCssPosition = (value) => () => value ? getVneLength(value) : "0";
|
|
8
7
|
const renderOneItem = (props, style, renderFunc) => renderFunc && (_jsx("div", { className: b("item"), style: style, children: renderFunc(props) }));
|
|
9
8
|
const useRenderContentCallback = (renderFunc, text, size) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WrapWithContent.js","sourceRoot":"","sources":["../src/WrapWithContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"WrapWithContent.js","sourceRoot":"","sources":["../src/WrapWithContent.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WrapWithContent.styles.d.ts","sourceRoot":"","sources":["../src/WrapWithContent.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,CAAC,4BAAwB,CAAC"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { cn, injectStyles, sel } from "@vnejs/uis.utils";
|
|
2
|
+
export const b = cn("WrapWithContent");
|
|
3
|
+
const CSS = `
|
|
4
|
+
${sel(b())} {
|
|
5
|
+
display: block;
|
|
6
|
+
position: relative;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
${sel(b("item"))} {
|
|
10
|
+
position: absolute;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
${sel(b("content"))} {
|
|
14
|
+
background: rgba(0, 0, 0, 0.3);
|
|
15
|
+
position: absolute;
|
|
16
|
+
top: 0;
|
|
17
|
+
right: 0;
|
|
18
|
+
bottom: 0;
|
|
19
|
+
left: 0;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
${sel(b({ withHover: true }))} ${sel(b("content"))}[vne-cursor-target] {
|
|
23
|
+
background: transparent;
|
|
24
|
+
}
|
|
25
|
+
`;
|
|
26
|
+
injectStyles(CSS);
|
|
27
|
+
//# sourceMappingURL=WrapWithContent.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WrapWithContent.styles.js","sourceRoot":"","sources":["../src/WrapWithContent.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,CAAC;AAEvC,MAAM,GAAG,GAAG;EACV,GAAG,CAAC,CAAC,EAAE,CAAC;;;;;EAKR,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;;;;EAId,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;;;;;;;;;EASjB,GAAG,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;;;CAGjD,CAAC;AAEF,YAAY,CAAC,GAAG,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,32 +1,26 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vnejs/uis.react.wrap-with-content",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.4",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"scripts": {
|
|
7
|
-
"build": "
|
|
8
|
-
"publish:major:
|
|
9
|
-
"publish:minor:
|
|
10
|
-
"publish:patch:
|
|
11
|
-
"publish:major": "
|
|
12
|
-
"publish:minor": "
|
|
13
|
-
"publish:patch": "
|
|
7
|
+
"build": "npx @vnejs/monorepo package",
|
|
8
|
+
"publish:major:uis:react": "npm run publish:major",
|
|
9
|
+
"publish:minor:uis:react": "npm run publish:minor",
|
|
10
|
+
"publish:patch:uis:react": "npm run publish:patch",
|
|
11
|
+
"publish:major": "npx @vnejs/monorepo publish major --access public",
|
|
12
|
+
"publish:minor": "npx @vnejs/monorepo publish minor --access public",
|
|
13
|
+
"publish:patch": "npx @vnejs/monorepo publish patch --access public"
|
|
14
14
|
},
|
|
15
15
|
"peerDependencies": {
|
|
16
|
-
"@
|
|
17
|
-
"@vnejs/uis.utils": "~0.1.0",
|
|
18
|
-
"react": "19.2.4",
|
|
19
|
-
"react-dom": "19.2.4",
|
|
20
|
-
"@vnejs/uis.react": "~0.1.0"
|
|
16
|
+
"@vnejs/uis.utils": "~0.1.0"
|
|
21
17
|
},
|
|
22
18
|
"devDependencies": {
|
|
23
|
-
"@vnejs/uis.react": "~0.1.0"
|
|
24
|
-
"typescript": "^5.7.3",
|
|
25
|
-
"@types/react": "^19.0.10",
|
|
26
|
-
"@types/react-dom": "^19.0.4"
|
|
19
|
+
"@vnejs/uis.react": "~0.1.0"
|
|
27
20
|
},
|
|
28
21
|
"files": [
|
|
29
22
|
"dist",
|
|
30
|
-
"
|
|
23
|
+
"src",
|
|
24
|
+
"tsconfig.json"
|
|
31
25
|
]
|
|
32
26
|
}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import { VneWrap, renderWithVneWrap } from "@vnejs/uis.react";
|
|
2
|
+
|
|
3
|
+
import { Flex, Text } from "@vnejs/uis.react";
|
|
4
|
+
|
|
5
|
+
import { WrapWithContent } from "@vnejs/uis.react";
|
|
6
|
+
|
|
7
|
+
export const Common = {
|
|
8
|
+
args: {
|
|
9
|
+
...VneWrap.DEFAULT_ARGS,
|
|
10
|
+
|
|
11
|
+
transition: 300,
|
|
12
|
+
imageSrc: "./light.png",
|
|
13
|
+
|
|
14
|
+
top: 24,
|
|
15
|
+
right: 24,
|
|
16
|
+
bottom: 24,
|
|
17
|
+
left: 24,
|
|
18
|
+
|
|
19
|
+
borderWidth: 0,
|
|
20
|
+
|
|
21
|
+
isSelected: false,
|
|
22
|
+
isRounded: false,
|
|
23
|
+
withHover: true,
|
|
24
|
+
},
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export default {
|
|
28
|
+
title: "Base/WrapWithContent",
|
|
29
|
+
render: renderWithVneWrap(({ ...args }) => (
|
|
30
|
+
<Flex
|
|
31
|
+
align={Flex.ALIGN.CENTER}
|
|
32
|
+
gap={120}
|
|
33
|
+
>
|
|
34
|
+
<WrapWithContent
|
|
35
|
+
{...args}
|
|
36
|
+
width={800}
|
|
37
|
+
height={450}
|
|
38
|
+
renderTopLeft={({ isSelected }) => (
|
|
39
|
+
<Text
|
|
40
|
+
isSelected={isSelected}
|
|
41
|
+
size={36}
|
|
42
|
+
text="30.04.2026"
|
|
43
|
+
/>
|
|
44
|
+
)}
|
|
45
|
+
renderTopRight={({ isSelected }) => (
|
|
46
|
+
<Text
|
|
47
|
+
isSelected={isSelected}
|
|
48
|
+
size={36}
|
|
49
|
+
text="12:00:00"
|
|
50
|
+
/>
|
|
51
|
+
)}
|
|
52
|
+
renderBottomLeft={({ isSelected }) => (
|
|
53
|
+
<Text
|
|
54
|
+
isSelected={isSelected}
|
|
55
|
+
size={48}
|
|
56
|
+
text="Глава первая: Пролог"
|
|
57
|
+
/>
|
|
58
|
+
)}
|
|
59
|
+
/>
|
|
60
|
+
|
|
61
|
+
<WrapWithContent
|
|
62
|
+
{...args}
|
|
63
|
+
width={800}
|
|
64
|
+
height={450}
|
|
65
|
+
renderTopLeft={({ isSelected }) => (
|
|
66
|
+
<Text
|
|
67
|
+
isSelected={isSelected}
|
|
68
|
+
size={36}
|
|
69
|
+
text="Нажмите, чтобы сохранить игру"
|
|
70
|
+
/>
|
|
71
|
+
)}
|
|
72
|
+
renderBottomLeft={({ isSelected }) => (
|
|
73
|
+
<Text
|
|
74
|
+
isSelected={isSelected}
|
|
75
|
+
size={48}
|
|
76
|
+
text="Новое сохранение"
|
|
77
|
+
/>
|
|
78
|
+
)}
|
|
79
|
+
/>
|
|
80
|
+
|
|
81
|
+
<WrapWithContent
|
|
82
|
+
{...args}
|
|
83
|
+
width={800}
|
|
84
|
+
height={450}
|
|
85
|
+
imageSrc=""
|
|
86
|
+
withHover={false}
|
|
87
|
+
/>
|
|
88
|
+
</Flex>
|
|
89
|
+
)),
|
|
90
|
+
argTypes: {
|
|
91
|
+
// engine
|
|
92
|
+
...VneWrap.ARGS,
|
|
93
|
+
|
|
94
|
+
transition: { control: { type: "number", min: 0, max: 1000, step: 50 } },
|
|
95
|
+
imageSrc: { control: { type: "select" }, options: ["./light.png", "./dark.png", ""] },
|
|
96
|
+
|
|
97
|
+
top: { control: { type: "number", min: 0, max: 120, step: 6 } },
|
|
98
|
+
right: { control: { type: "number", min: 0, max: 120, step: 6 } },
|
|
99
|
+
bottom: { control: { type: "number", min: 0, max: 120, step: 6 } },
|
|
100
|
+
left: { control: { type: "number", min: 0, max: 120, step: 6 } },
|
|
101
|
+
|
|
102
|
+
borderWidth: { control: { type: "number", min: 0, max: 24, step: 2 } },
|
|
103
|
+
},
|
|
104
|
+
};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { cn, injectStyles, sel } from "@vnejs/uis.utils";
|
|
2
|
+
|
|
3
|
+
export const b = cn("WrapWithContent");
|
|
4
|
+
|
|
5
|
+
const CSS = `
|
|
6
|
+
${sel(b())} {
|
|
7
|
+
display: block;
|
|
8
|
+
position: relative;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
${sel(b("item"))} {
|
|
12
|
+
position: absolute;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
${sel(b("content"))} {
|
|
16
|
+
background: rgba(0, 0, 0, 0.3);
|
|
17
|
+
position: absolute;
|
|
18
|
+
top: 0;
|
|
19
|
+
right: 0;
|
|
20
|
+
bottom: 0;
|
|
21
|
+
left: 0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
${sel(b({ withHover: true }))} ${sel(b("content"))}[vne-cursor-target] {
|
|
25
|
+
background: transparent;
|
|
26
|
+
}
|
|
27
|
+
`;
|
|
28
|
+
|
|
29
|
+
injectStyles(CSS);
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import { useCallback, useMemo } from "react";
|
|
2
|
+
|
|
3
|
+
import { getVneLength } from "@vnejs/uis.utils";
|
|
4
|
+
|
|
5
|
+
import { Text, Wrap } from "@vnejs/uis.react";
|
|
6
|
+
|
|
7
|
+
import { b } from "./WrapWithContent.styles.js";
|
|
8
|
+
|
|
9
|
+
const getCssPosition = (value) => () => value ? getVneLength(value) : "0";
|
|
10
|
+
|
|
11
|
+
const renderOneItem = (props, style, renderFunc) =>
|
|
12
|
+
renderFunc && (
|
|
13
|
+
<div
|
|
14
|
+
className={b("item")}
|
|
15
|
+
style={style}
|
|
16
|
+
>
|
|
17
|
+
{renderFunc(props)}
|
|
18
|
+
</div>
|
|
19
|
+
);
|
|
20
|
+
|
|
21
|
+
const useRenderContentCallback = (renderFunc, text, size) => {
|
|
22
|
+
return useCallback(
|
|
23
|
+
({ isSelected = false }) => {
|
|
24
|
+
if (text)
|
|
25
|
+
return (
|
|
26
|
+
<Text
|
|
27
|
+
isSelected={isSelected}
|
|
28
|
+
text={text}
|
|
29
|
+
size={size}
|
|
30
|
+
/>
|
|
31
|
+
);
|
|
32
|
+
if (renderFunc) return renderFunc();
|
|
33
|
+
},
|
|
34
|
+
[renderFunc, text, size],
|
|
35
|
+
);
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
export const WrapWithContent = ({
|
|
39
|
+
//
|
|
40
|
+
className,
|
|
41
|
+
imageSrc = "",
|
|
42
|
+
isSelected = false,
|
|
43
|
+
isRounded = false,
|
|
44
|
+
withHover = false,
|
|
45
|
+
width = 0,
|
|
46
|
+
height = 0,
|
|
47
|
+
borderWidth = 0,
|
|
48
|
+
top = 0,
|
|
49
|
+
right = 0,
|
|
50
|
+
bottom = 0,
|
|
51
|
+
left = 0,
|
|
52
|
+
transition = 300,
|
|
53
|
+
renderTopLeft,
|
|
54
|
+
renderTopRight,
|
|
55
|
+
renderBottomLeft,
|
|
56
|
+
renderBottomRight,
|
|
57
|
+
topLeftText,
|
|
58
|
+
topLeftSize,
|
|
59
|
+
topRightText,
|
|
60
|
+
topRightSize,
|
|
61
|
+
bottomLeftText,
|
|
62
|
+
bottomLeftSize,
|
|
63
|
+
onClick,
|
|
64
|
+
value,
|
|
65
|
+
}) => {
|
|
66
|
+
const realTop = useMemo(getCssPosition(top), [top]);
|
|
67
|
+
const realRight = useMemo(getCssPosition(right), [right]);
|
|
68
|
+
const realBottom = useMemo(getCssPosition(bottom), [bottom]);
|
|
69
|
+
const realLeft = useMemo(getCssPosition(left), [left]);
|
|
70
|
+
|
|
71
|
+
const styleTopLeft = useMemo(() => ({ top: realTop, left: realLeft }), [realTop, realLeft]);
|
|
72
|
+
const styleTopRight = useMemo(() => ({ top: realTop, right: realRight }), [realTop, realRight]);
|
|
73
|
+
const styleBottomLeft = useMemo(() => ({ bottom: realBottom, left: realLeft }), [realBottom, realLeft]);
|
|
74
|
+
const styleBottomRight = useMemo(() => ({ bottom: realBottom, right: realRight }), [realBottom, realRight]);
|
|
75
|
+
|
|
76
|
+
const props = useMemo(() => ({ isSelected }), [isSelected]);
|
|
77
|
+
|
|
78
|
+
const addClassNames = useMemo(() => [className, withHover && "TextHoverParent"].filter(Boolean), [className, withHover]);
|
|
79
|
+
|
|
80
|
+
const styleContent = useMemo(() => {
|
|
81
|
+
const result: Record<string, any> = {};
|
|
82
|
+
|
|
83
|
+
if (transition) result.transition = `${transition}ms`;
|
|
84
|
+
|
|
85
|
+
return result;
|
|
86
|
+
}, [transition]);
|
|
87
|
+
|
|
88
|
+
const renderTopLeftHandler = useRenderContentCallback(renderTopLeft, topLeftText, topLeftSize);
|
|
89
|
+
const renderTopRightHandler = useRenderContentCallback(renderTopRight, topRightText, topRightSize);
|
|
90
|
+
const renderBottomLeftHandler = useRenderContentCallback(renderBottomLeft, bottomLeftText, bottomLeftSize);
|
|
91
|
+
|
|
92
|
+
return (
|
|
93
|
+
<Wrap
|
|
94
|
+
className={b({ withHover }, addClassNames)}
|
|
95
|
+
width={width}
|
|
96
|
+
height={height}
|
|
97
|
+
padding={0}
|
|
98
|
+
borderWidth={borderWidth}
|
|
99
|
+
isSelected={isSelected}
|
|
100
|
+
isRounded={isRounded}
|
|
101
|
+
withHover={withHover}
|
|
102
|
+
imageSrc={imageSrc}
|
|
103
|
+
onClick={onClick}
|
|
104
|
+
value={value}
|
|
105
|
+
>
|
|
106
|
+
<div
|
|
107
|
+
className={b("content")}
|
|
108
|
+
style={styleContent}
|
|
109
|
+
>
|
|
110
|
+
{renderOneItem(props, styleTopLeft, renderTopLeftHandler)}
|
|
111
|
+
{renderOneItem(props, styleTopRight, renderTopRightHandler)}
|
|
112
|
+
{renderOneItem(props, styleBottomLeft, renderBottomLeftHandler)}
|
|
113
|
+
{renderOneItem(props, styleBottomRight, renderBottomRight)}
|
|
114
|
+
</div>
|
|
115
|
+
</Wrap>
|
|
116
|
+
);
|
|
117
|
+
};
|
package/src/index.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./WrapWithContent";
|
package/tsconfig.json
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": "../../../tsconfig.react.base.json",
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"outDir": "dist",
|
|
5
|
+
"rootDir": "src"
|
|
6
|
+
},
|
|
7
|
+
"include": [
|
|
8
|
+
"src/**/*.ts",
|
|
9
|
+
"src/**/*.tsx",
|
|
10
|
+
"../../../globals.d.ts",
|
|
11
|
+
"../../../peer-modules.d.ts"
|
|
12
|
+
],
|
|
13
|
+
"exclude": [
|
|
14
|
+
"dist",
|
|
15
|
+
"node_modules",
|
|
16
|
+
"src/**/*.stories.tsx"
|
|
17
|
+
]
|
|
18
|
+
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
.WrapWithContent
|
|
2
|
-
display: block
|
|
3
|
-
position: relative
|
|
4
|
-
|
|
5
|
-
&-item
|
|
6
|
-
position: absolute
|
|
7
|
-
|
|
8
|
-
&-content
|
|
9
|
-
background: rgba(0, 0, 0, 0.3)
|
|
10
|
-
position: absolute
|
|
11
|
-
top: 0
|
|
12
|
-
right: 0
|
|
13
|
-
bottom: 0
|
|
14
|
-
left: 0
|
|
15
|
-
|
|
16
|
-
&_withHover &-content[vne-cursor-target]
|
|
17
|
-
background: transparent
|