@octanejs/content-loader 0.0.17 → 0.0.19
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/package.json +4 -4
- package/src/web/Svg.tsrx +26 -24
- package/src/web/presets/BulletListStyle.tsrx +12 -10
- package/src/web/presets/CodeStyle.tsrx +12 -10
- package/src/web/presets/FacebookStyle.tsrx +10 -8
- package/src/web/presets/InstagramStyle.tsrx +8 -6
- package/src/web/presets/ListStyle.tsrx +10 -8
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@octanejs/content-loader",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.19",
|
|
4
4
|
"description": "Octane binding for react-content-loader 7.1.2 (web). Native/React Native is an explicit gap.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -33,11 +33,11 @@
|
|
|
33
33
|
"./package.json": "./package.json"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
|
-
"octane": "^0.
|
|
36
|
+
"octane": "^0.12.0"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@octanejs/testing-library": "0.1.
|
|
40
|
-
"octane": "0.
|
|
39
|
+
"@octanejs/testing-library": "0.1.62",
|
|
40
|
+
"octane": "0.12.0",
|
|
41
41
|
"vitest": "^4.1.10"
|
|
42
42
|
},
|
|
43
43
|
"scripts": {
|
package/src/web/Svg.tsrx
CHANGED
|
@@ -32,34 +32,36 @@ export default function Svg({
|
|
|
32
32
|
const from = `${gradientRatio * -1} 0`;
|
|
33
33
|
const to = `${gradientRatio} 0`;
|
|
34
34
|
|
|
35
|
-
return
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
<
|
|
49
|
-
|
|
50
|
-
<
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
?
|
|
35
|
+
return (
|
|
36
|
+
<svg aria-labelledby={idAria} role="img" style={{ ...style, ...rtlStyle }} {...props}>
|
|
37
|
+
{title ? <title id={idAria}>{title as string}</title> : null}
|
|
38
|
+
{beforeMask && isValidElement(beforeMask) ? beforeMask : null}
|
|
39
|
+
<rect
|
|
40
|
+
role="presentation"
|
|
41
|
+
x="0"
|
|
42
|
+
y="0"
|
|
43
|
+
width="100%"
|
|
44
|
+
height="100%"
|
|
45
|
+
clipPath={`url(${baseUrl}#${idClip})`}
|
|
46
|
+
style={{ fill: `url(${baseUrl}#${idGradient})` }}
|
|
47
|
+
/>
|
|
48
|
+
<defs>
|
|
49
|
+
<clipPath id={idClip}>{children}</clipPath>
|
|
50
|
+
<linearGradient id={idGradient} gradientTransform={`translate(${from})`}>
|
|
51
|
+
<stop offset="0%" stopColor={backgroundColor} stopOpacity={backgroundOpacity} />
|
|
52
|
+
<stop offset="50%" stopColor={foregroundColor} stopOpacity={foregroundOpacity} />
|
|
53
|
+
<stop offset="100%" stopColor={backgroundColor} stopOpacity={backgroundOpacity} />
|
|
54
|
+
{animate ? (
|
|
55
|
+
<animateTransform
|
|
55
56
|
attributeName="gradientTransform"
|
|
56
57
|
type="translate"
|
|
57
58
|
values={`${from}; 0 0; ${to}`}
|
|
58
59
|
dur={dur}
|
|
59
60
|
repeatCount="indefinite"
|
|
60
61
|
/>
|
|
61
|
-
: null}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
62
|
+
) : null}
|
|
63
|
+
</linearGradient>
|
|
64
|
+
</defs>
|
|
65
|
+
</svg>
|
|
66
|
+
);
|
|
65
67
|
}
|
|
@@ -3,14 +3,16 @@ import ContentLoader from '../ContentLoader.tsrx';
|
|
|
3
3
|
import type { IContentLoaderProps } from '../types';
|
|
4
4
|
|
|
5
5
|
export default function BulletList(props: IContentLoaderProps): OctaneNode {
|
|
6
|
-
return
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
6
|
+
return (
|
|
7
|
+
<ContentLoader viewBox="0 0 245 125" {...props}>
|
|
8
|
+
<circle cx="10" cy="20" r="8" />
|
|
9
|
+
<rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
|
|
10
|
+
<circle cx="10" cy="50" r="8" />
|
|
11
|
+
<rect x="25" y="45" rx="5" ry="5" width="220" height="10" />
|
|
12
|
+
<circle cx="10" cy="80" r="8" />
|
|
13
|
+
<rect x="25" y="75" rx="5" ry="5" width="220" height="10" />
|
|
14
|
+
<circle cx="10" cy="110" r="8" />
|
|
15
|
+
<rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
|
|
16
|
+
</ContentLoader>
|
|
17
|
+
);
|
|
16
18
|
}
|
|
@@ -3,14 +3,16 @@ import type { IContentLoaderProps } from '../types';
|
|
|
3
3
|
import ContentLoader from '../ContentLoader.tsrx';
|
|
4
4
|
|
|
5
5
|
export default function Code(props: IContentLoaderProps): OctaneNode {
|
|
6
|
-
return
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
6
|
+
return (
|
|
7
|
+
<ContentLoader viewBox="0 0 340 84" {...props}>
|
|
8
|
+
<rect x="0" y="0" width="67" height="11" rx="3" />
|
|
9
|
+
<rect x="76" y="0" width="140" height="11" rx="3" />
|
|
10
|
+
<rect x="127" y="48" width="53" height="11" rx="3" />
|
|
11
|
+
<rect x="187" y="48" width="72" height="11" rx="3" />
|
|
12
|
+
<rect x="18" y="48" width="100" height="11" rx="3" />
|
|
13
|
+
<rect x="0" y="71" width="37" height="11" rx="3" />
|
|
14
|
+
<rect x="18" y="23" width="140" height="11" rx="3" />
|
|
15
|
+
<rect x="166" y="23" width="173" height="11" rx="3" />
|
|
16
|
+
</ContentLoader>
|
|
17
|
+
);
|
|
16
18
|
}
|
|
@@ -3,12 +3,14 @@ import type { IContentLoaderProps } from '../types';
|
|
|
3
3
|
import ContentLoader from '../ContentLoader.tsrx';
|
|
4
4
|
|
|
5
5
|
export default function Facebook(props: IContentLoaderProps): OctaneNode {
|
|
6
|
-
return
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
6
|
+
return (
|
|
7
|
+
<ContentLoader viewBox="0 0 476 124" {...props}>
|
|
8
|
+
<rect x="48" y="8" width="88" height="6" rx="3" />
|
|
9
|
+
<rect x="48" y="26" width="52" height="6" rx="3" />
|
|
10
|
+
<rect x="0" y="56" width="410" height="6" rx="3" />
|
|
11
|
+
<rect x="0" y="72" width="380" height="6" rx="3" />
|
|
12
|
+
<rect x="0" y="88" width="178" height="6" rx="3" />
|
|
13
|
+
<circle cx="20" cy="20" r="20" />
|
|
14
|
+
</ContentLoader>
|
|
15
|
+
);
|
|
14
16
|
}
|
|
@@ -3,10 +3,12 @@ import type { IContentLoaderProps } from '../types';
|
|
|
3
3
|
import ContentLoader from '../ContentLoader.tsrx';
|
|
4
4
|
|
|
5
5
|
export default function Instagram(props: IContentLoaderProps): OctaneNode {
|
|
6
|
-
return
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
6
|
+
return (
|
|
7
|
+
<ContentLoader viewBox="0 0 400 460" {...props}>
|
|
8
|
+
<circle cx="31" cy="31" r="15" />
|
|
9
|
+
<rect x="58" y="18" rx="2" ry="2" width="140" height="10" />
|
|
10
|
+
<rect x="58" y="34" rx="2" ry="2" width="140" height="10" />
|
|
11
|
+
<rect x="0" y="60" rx="2" ry="2" width="400" height="400" />
|
|
12
|
+
</ContentLoader>
|
|
13
|
+
);
|
|
12
14
|
}
|
|
@@ -3,12 +3,14 @@ import type { IContentLoaderProps } from '../types';
|
|
|
3
3
|
import ContentLoader from '../ContentLoader.tsrx';
|
|
4
4
|
|
|
5
5
|
export default function List(props: IContentLoaderProps): OctaneNode {
|
|
6
|
-
return
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
6
|
+
return (
|
|
7
|
+
<ContentLoader viewBox="0 0 400 110" {...props}>
|
|
8
|
+
<rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
|
|
9
|
+
<rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
|
|
10
|
+
<rect x="20" y="40" rx="3" ry="3" width="170" height="10" />
|
|
11
|
+
<rect x="0" y="60" rx="3" ry="3" width="250" height="10" />
|
|
12
|
+
<rect x="20" y="80" rx="3" ry="3" width="200" height="10" />
|
|
13
|
+
<rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
|
|
14
|
+
</ContentLoader>
|
|
15
|
+
);
|
|
14
16
|
}
|