@pushwoosh/dumb-components 1.1.225 → 1.1.227
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/WhatsAppPreview/WhatsAppPreview.d.ts +1 -1
- package/WhatsAppPreview/WhatsAppPreview.js +31 -92
- package/WhatsAppPreview/__tests__/attachment.test.js +17 -11
- package/WhatsAppPreview/components/WhatsAppAttachment/WhatsAppAttachment.js +41 -38
- package/WhatsAppPreview/components/WhatsAppAttachment/styles.d.ts +11 -30
- package/WhatsAppPreview/components/WhatsAppAttachment/styles.js +23 -30
- package/WhatsAppPreview/components/WhatsAppAttachment/types.d.ts +0 -5
- package/WhatsAppPreview/components/WhatsAppMessageBubble/WhatsAppMessageBubble.d.ts +1 -1
- package/WhatsAppPreview/components/WhatsAppMessageBubble/WhatsAppMessageBubble.js +14 -33
- package/WhatsAppPreview/components/WhatsAppMessageBubble/styles.d.ts +1 -18
- package/WhatsAppPreview/components/WhatsAppMessageBubble/styles.js +5 -33
- package/WhatsAppPreview/constants.d.ts +10 -40
- package/WhatsAppPreview/constants.js +11 -41
- package/WhatsAppPreview/helpers.d.ts +3 -1
- package/WhatsAppPreview/helpers.js +12 -4
- package/WhatsAppPreview/icons/index.d.ts +0 -10
- package/WhatsAppPreview/icons/index.js +1 -11
- package/WhatsAppPreview/index.d.ts +1 -1
- package/WhatsAppPreview/polyglot/messages_ar.js +2 -3
- package/WhatsAppPreview/polyglot/messages_bn.js +2 -3
- package/WhatsAppPreview/polyglot/messages_de.js +2 -3
- package/WhatsAppPreview/polyglot/messages_en.js +2 -3
- package/WhatsAppPreview/polyglot/messages_es.js +2 -3
- package/WhatsAppPreview/polyglot/messages_fr.js +2 -3
- package/WhatsAppPreview/polyglot/messages_he.js +2 -3
- package/WhatsAppPreview/polyglot/messages_hi.js +2 -3
- package/WhatsAppPreview/polyglot/messages_ja.js +2 -3
- package/WhatsAppPreview/polyglot/messages_ko.js +2 -3
- package/WhatsAppPreview/polyglot/messages_pt.js +2 -3
- package/WhatsAppPreview/polyglot/messages_ru.js +2 -3
- package/WhatsAppPreview/polyglot/messages_th.js +2 -3
- package/WhatsAppPreview/polyglot/messages_zh.js +2 -3
- package/WhatsAppPreview/polyglot/types.d.ts +3 -2
- package/WhatsAppPreview/styles.d.ts +18 -14
- package/WhatsAppPreview/styles.js +24 -19
- package/WhatsAppPreview/types.d.ts +11 -35
- package/index.d.ts +1 -1
- package/package.json +1 -1
- package/WhatsAppPreview/components/WhatsAppChatHeader/WhatsAppChatHeader.d.ts +0 -4
- package/WhatsAppPreview/components/WhatsAppChatHeader/WhatsAppChatHeader.js +0 -39
- package/WhatsAppPreview/components/WhatsAppChatHeader/index.d.ts +0 -1
- package/WhatsAppPreview/components/WhatsAppChatHeader/index.js +0 -1
- package/WhatsAppPreview/components/WhatsAppChatHeader/styles.d.ts +0 -47
- package/WhatsAppPreview/components/WhatsAppChatHeader/styles.js +0 -37
- package/WhatsAppPreview/components/WhatsAppChatHeader/types.d.ts +0 -10
- package/WhatsAppPreview/components/WhatsAppChatHeader/types.js +0 -1
- package/WhatsAppPreview/components/WhatsAppDateChip/WhatsAppDateChip.d.ts +0 -4
- package/WhatsAppPreview/components/WhatsAppDateChip/WhatsAppDateChip.js +0 -28
- package/WhatsAppPreview/components/WhatsAppDateChip/index.d.ts +0 -1
- package/WhatsAppPreview/components/WhatsAppDateChip/index.js +0 -1
- package/WhatsAppPreview/components/WhatsAppDateChip/styles.d.ts +0 -6
- package/WhatsAppPreview/components/WhatsAppDateChip/styles.js +0 -6
- package/WhatsAppPreview/components/WhatsAppDateChip/types.d.ts +0 -6
- package/WhatsAppPreview/components/WhatsAppDateChip/types.js +0 -1
- package/WhatsAppPreview/components/WhatsAppStatusBar/WhatsAppStatusBar.d.ts +0 -4
- package/WhatsAppPreview/components/WhatsAppStatusBar/WhatsAppStatusBar.js +0 -18
- package/WhatsAppPreview/components/WhatsAppStatusBar/index.d.ts +0 -1
- package/WhatsAppPreview/components/WhatsAppStatusBar/index.js +0 -1
- package/WhatsAppPreview/components/WhatsAppStatusBar/styles.d.ts +0 -69
- package/WhatsAppPreview/components/WhatsAppStatusBar/styles.js +0 -47
- package/WhatsAppPreview/components/WhatsAppStatusBar/types.d.ts +0 -5
- package/WhatsAppPreview/components/WhatsAppStatusBar/types.js +0 -1
- package/WhatsAppPreview/icons/WhatsAppAvatarIcon.svg +0 -1
- package/WhatsAppPreview/icons/WhatsAppBackIcon.svg +0 -1
- package/WhatsAppPreview/icons/WhatsAppBatteryIcon.svg +0 -1
- package/WhatsAppPreview/icons/WhatsAppCallIcon.svg +0 -1
- package/WhatsAppPreview/icons/WhatsAppMenuIcon.svg +0 -1
- package/WhatsAppPreview/icons/WhatsAppSignalIcon.svg +0 -1
- package/WhatsAppPreview/icons/WhatsAppTickIcon.svg +0 -1
- package/WhatsAppPreview/icons/WhatsAppTicksIcon.svg +0 -1
- package/WhatsAppPreview/icons/WhatsAppWallpaperPattern.svg +0 -1
- package/WhatsAppPreview/icons/WhatsAppWifiIcon.svg +0 -1
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
export declare const HeaderBox: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
|
|
2
|
-
$alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
|
|
3
|
-
$alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
4
|
-
$gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
|
|
5
|
-
$justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
|
|
6
|
-
} & {
|
|
7
|
-
$gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
|
|
8
|
-
$justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
9
|
-
$placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
10
|
-
} & {
|
|
11
|
-
$sizes: import("@pushwoosh/kit-helpers/styled-helpers").StrNum;
|
|
12
|
-
} & {
|
|
13
|
-
$alignItems: string;
|
|
14
|
-
$gap: number;
|
|
15
|
-
$sizes: string;
|
|
16
|
-
$padding: {
|
|
17
|
-
top: number;
|
|
18
|
-
right: number;
|
|
19
|
-
bottom: number;
|
|
20
|
-
left: number;
|
|
21
|
-
};
|
|
22
|
-
$bgColor: "#F6F3EF";
|
|
23
|
-
$border: {
|
|
24
|
-
bottom: string;
|
|
25
|
-
};
|
|
26
|
-
}, "$bgColor" | "$border" | "$padding" | "$alignItems" | "$gap" | "$sizes">;
|
|
27
|
-
export declare const HeaderAvatar: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
|
|
28
|
-
$alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
|
|
29
|
-
$alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
30
|
-
$gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
|
|
31
|
-
$justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
|
|
32
|
-
} & {
|
|
33
|
-
$gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
|
|
34
|
-
$justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
35
|
-
$placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
36
|
-
} & {
|
|
37
|
-
$gridAutoFlow: string;
|
|
38
|
-
} & {
|
|
39
|
-
$alignItems: string;
|
|
40
|
-
$justifyContent: string;
|
|
41
|
-
$width: number;
|
|
42
|
-
$height: number;
|
|
43
|
-
$borderRadius: string;
|
|
44
|
-
$overflow: string;
|
|
45
|
-
$bgColor: "#CFD6DB";
|
|
46
|
-
}, "$gridAutoFlow" | "$bgColor" | "$borderRadius" | "$height" | "$overflow" | "$width" | "$alignItems" | "$justifyContent">;
|
|
47
|
-
export declare const HeaderAvatarImage: import("styled-components").StyledComponent<"img", any, {}, never>;
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import styled from 'styled-components';
|
|
2
|
-
import { Columns, Horizontal } from '@pushwoosh/kit-helpers';
|
|
3
|
-
import { WHATSAPP_COLOR } from '../../constants';
|
|
4
|
-
export const HeaderBox = styled(Columns).attrs({
|
|
5
|
-
$alignItems: 'center',
|
|
6
|
-
$gap: 10,
|
|
7
|
-
$sizes: 'auto auto minmax(0, 1fr) auto',
|
|
8
|
-
$padding: {
|
|
9
|
-
top: 6,
|
|
10
|
-
right: 14,
|
|
11
|
-
bottom: 10,
|
|
12
|
-
left: 14
|
|
13
|
-
},
|
|
14
|
-
$bgColor: WHATSAPP_COLOR.HEADER,
|
|
15
|
-
$border: {
|
|
16
|
-
bottom: `1px solid ${WHATSAPP_COLOR.HEADER_BORDER}`
|
|
17
|
-
}
|
|
18
|
-
}).withConfig({
|
|
19
|
-
displayName: "HeaderBox",
|
|
20
|
-
componentId: "sc-7fu7hq-0"
|
|
21
|
-
})(["color:", ";svg{display:block;}"], WHATSAPP_COLOR.ACTION);
|
|
22
|
-
export const HeaderAvatar = styled(Horizontal).attrs({
|
|
23
|
-
$alignItems: 'center',
|
|
24
|
-
$justifyContent: 'center',
|
|
25
|
-
$width: 34,
|
|
26
|
-
$height: 34,
|
|
27
|
-
$borderRadius: '50%',
|
|
28
|
-
$overflow: 'hidden',
|
|
29
|
-
$bgColor: WHATSAPP_COLOR.AVATAR
|
|
30
|
-
}).withConfig({
|
|
31
|
-
displayName: "HeaderAvatar",
|
|
32
|
-
componentId: "sc-7fu7hq-1"
|
|
33
|
-
})(["color:", ";"], WHATSAPP_COLOR.AVATAR_GLYPH);
|
|
34
|
-
export const HeaderAvatarImage = styled.img.withConfig({
|
|
35
|
-
displayName: "HeaderAvatarImage",
|
|
36
|
-
componentId: "sc-7fu7hq-2"
|
|
37
|
-
})(["width:100%;height:100%;object-fit:cover;"]);
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { ReactNode } from 'react';
|
|
2
|
-
/** Props of {@link WhatsAppChatHeader}. */
|
|
3
|
-
export interface WhatsAppChatHeaderProps {
|
|
4
|
-
/** Business name. */
|
|
5
|
-
name: string;
|
|
6
|
-
/** Caption under the name. */
|
|
7
|
-
subtitle: ReactNode;
|
|
8
|
-
/** Avatar image URL; a glyph is drawn when absent. */
|
|
9
|
-
avatarUrl?: string;
|
|
10
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { ShapeRadius } from '@pushwoosh/kit-constants';
|
|
3
|
-
import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
|
|
4
|
-
import { DateChipText } from './styles';
|
|
5
|
-
import { WHATSAPP_COLOR } from '../../constants';
|
|
6
|
-
/** Date separator drawn above the first message of a day. */
|
|
7
|
-
export function WhatsAppDateChip(props) {
|
|
8
|
-
const {
|
|
9
|
-
children
|
|
10
|
-
} = props;
|
|
11
|
-
return _jsx(Horizontal, {
|
|
12
|
-
"$justifyContent": "center",
|
|
13
|
-
children: _jsx(Vertical, {
|
|
14
|
-
"$bgColor": WHATSAPP_COLOR.INCOMING_BUBBLE,
|
|
15
|
-
"$borderRadius": ShapeRadius.SECTION,
|
|
16
|
-
"$boxShadow": `0 1px 0.5px ${WHATSAPP_COLOR.BUBBLE_SHADOW}`,
|
|
17
|
-
"$padding": {
|
|
18
|
-
vertical: 5,
|
|
19
|
-
horizontal: 12
|
|
20
|
-
},
|
|
21
|
-
children: _jsx(DateChipText, {
|
|
22
|
-
"$color": WHATSAPP_COLOR.DATE_CHIP_TEXT,
|
|
23
|
-
"$variant": "footnote",
|
|
24
|
-
children: children
|
|
25
|
-
})
|
|
26
|
-
})
|
|
27
|
-
});
|
|
28
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { WhatsAppDateChip } from './WhatsAppDateChip';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { WhatsAppDateChip } from './WhatsAppDateChip';
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
export declare const DateChipText: import("styled-components").StyledComponent<"span", any, {
|
|
2
|
-
$color?: string | undefined;
|
|
3
|
-
$uppercase?: boolean | undefined;
|
|
4
|
-
$ellipsis?: boolean | undefined;
|
|
5
|
-
$variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
|
|
6
|
-
}, never>;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import styled from 'styled-components';
|
|
2
|
-
import { Text } from '@pushwoosh/kit-typography';
|
|
3
|
-
export const DateChipText = styled(Text).withConfig({
|
|
4
|
-
displayName: "DateChipText",
|
|
5
|
-
componentId: "sc-1n9qlgp-0"
|
|
6
|
-
})(["display:block;&::first-letter{text-transform:uppercase;}"]);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { type ReactElement } from 'react';
|
|
2
|
-
import type { WhatsAppStatusBarProps } from './types';
|
|
3
|
-
/** iOS status bar of the previewed device: clock, dynamic island and the signal indicators. */
|
|
4
|
-
export declare function WhatsAppStatusBar(props: WhatsAppStatusBarProps): ReactElement;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { StatusBarBox, StatusBarClock, StatusBarIndicators, StatusBarIsland, StatusBarRow } from './styles';
|
|
3
|
-
import { WhatsAppBatteryIcon, WhatsAppSignalIcon, WhatsAppWifiIcon } from '../../icons';
|
|
4
|
-
/** iOS status bar of the previewed device: clock, dynamic island and the signal indicators. */
|
|
5
|
-
export function WhatsAppStatusBar(props) {
|
|
6
|
-
const {
|
|
7
|
-
time
|
|
8
|
-
} = props;
|
|
9
|
-
return _jsx(StatusBarBox, {
|
|
10
|
-
children: _jsxs(StatusBarRow, {
|
|
11
|
-
children: [_jsx(StatusBarClock, {
|
|
12
|
-
children: time
|
|
13
|
-
}), _jsx(StatusBarIsland, {}), _jsxs(StatusBarIndicators, {
|
|
14
|
-
children: [_jsx(WhatsAppSignalIcon, {}), _jsx(WhatsAppWifiIcon, {}), _jsx(WhatsAppBatteryIcon, {})]
|
|
15
|
-
})]
|
|
16
|
-
})
|
|
17
|
-
});
|
|
18
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { WhatsAppStatusBar } from './WhatsAppStatusBar';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { WhatsAppStatusBar } from './WhatsAppStatusBar';
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
export declare const StatusBarBox: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
|
|
2
|
-
$alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
|
|
3
|
-
$alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
4
|
-
$gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
|
|
5
|
-
$justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
|
|
6
|
-
} & {
|
|
7
|
-
$gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
|
|
8
|
-
$justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
9
|
-
$placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
10
|
-
} & {
|
|
11
|
-
$gridAutoFlow: string;
|
|
12
|
-
}, "$gridAutoFlow">;
|
|
13
|
-
export declare const StatusBarRow: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
|
|
14
|
-
$alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
|
|
15
|
-
$alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
16
|
-
$gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
|
|
17
|
-
$justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
|
|
18
|
-
} & {
|
|
19
|
-
$gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
|
|
20
|
-
$justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
21
|
-
$placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
22
|
-
} & {
|
|
23
|
-
$gridAutoFlow: string;
|
|
24
|
-
} & {
|
|
25
|
-
$alignItems: string;
|
|
26
|
-
$justifyContent: string;
|
|
27
|
-
$position: string;
|
|
28
|
-
$height: string;
|
|
29
|
-
$padding: {
|
|
30
|
-
left: string;
|
|
31
|
-
right: string;
|
|
32
|
-
};
|
|
33
|
-
}, "$gridAutoFlow" | "$height" | "$padding" | "$position" | "$alignItems" | "$justifyContent">;
|
|
34
|
-
export declare const StatusBarIsland: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
|
|
35
|
-
$alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
|
|
36
|
-
$alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
37
|
-
$gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
|
|
38
|
-
$justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
|
|
39
|
-
} & {
|
|
40
|
-
$gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
|
|
41
|
-
$justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
42
|
-
$placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
43
|
-
} & {
|
|
44
|
-
$gridAutoFlow: string;
|
|
45
|
-
} & {
|
|
46
|
-
$position: string;
|
|
47
|
-
$bgColor: "#2B2F33";
|
|
48
|
-
$top: string;
|
|
49
|
-
$left: string;
|
|
50
|
-
$width: string;
|
|
51
|
-
$height: string;
|
|
52
|
-
$borderRadius: string;
|
|
53
|
-
}, "$gridAutoFlow" | "$bgColor" | "$borderRadius" | "$height" | "$left" | "$position" | "$top" | "$width">;
|
|
54
|
-
export declare const StatusBarIndicators: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
|
|
55
|
-
$alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
|
|
56
|
-
$alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
57
|
-
$gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
|
|
58
|
-
$justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
|
|
59
|
-
} & {
|
|
60
|
-
$gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
|
|
61
|
-
$justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
62
|
-
$placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
|
|
63
|
-
} & {
|
|
64
|
-
$gridAutoFlow: string;
|
|
65
|
-
} & {
|
|
66
|
-
$alignItems: string;
|
|
67
|
-
$gap: string;
|
|
68
|
-
}, "$gridAutoFlow" | "$alignItems" | "$gap">;
|
|
69
|
-
export declare const StatusBarClock: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import styled from 'styled-components';
|
|
2
|
-
import { FontFamily, FontWeight, LineHeight } from '@pushwoosh/kit-constants';
|
|
3
|
-
import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
|
|
4
|
-
import { WHATSAPP_COLOR, WHATSAPP_SCREEN_WIDTH, WHATSAPP_STATUS_BAR } from '../../constants';
|
|
5
|
-
function scaled(value) {
|
|
6
|
-
return `${(value / WHATSAPP_SCREEN_WIDTH * 100).toFixed(4)}cqw`;
|
|
7
|
-
}
|
|
8
|
-
export const StatusBarBox = styled(Vertical).withConfig({
|
|
9
|
-
displayName: "StatusBarBox",
|
|
10
|
-
componentId: "sc-lua8an-0"
|
|
11
|
-
})(["container-type:inline-size;"]);
|
|
12
|
-
export const StatusBarRow = styled(Horizontal).attrs({
|
|
13
|
-
$alignItems: 'center',
|
|
14
|
-
$justifyContent: 'space-between',
|
|
15
|
-
$position: 'relative',
|
|
16
|
-
$height: scaled(WHATSAPP_STATUS_BAR.HEIGHT),
|
|
17
|
-
$padding: {
|
|
18
|
-
left: scaled(WHATSAPP_STATUS_BAR.PADDING_LEFT),
|
|
19
|
-
right: scaled(WHATSAPP_STATUS_BAR.PADDING_RIGHT)
|
|
20
|
-
}
|
|
21
|
-
}).withConfig({
|
|
22
|
-
displayName: "StatusBarRow",
|
|
23
|
-
componentId: "sc-lua8an-1"
|
|
24
|
-
})([""]);
|
|
25
|
-
export const StatusBarIsland = styled(Horizontal).attrs({
|
|
26
|
-
$position: 'absolute',
|
|
27
|
-
$bgColor: WHATSAPP_COLOR.ISLAND,
|
|
28
|
-
$top: scaled(WHATSAPP_STATUS_BAR.ISLAND_TOP),
|
|
29
|
-
$left: `calc(50% - ${scaled(WHATSAPP_STATUS_BAR.ISLAND_WIDTH / 2)})`,
|
|
30
|
-
$width: scaled(WHATSAPP_STATUS_BAR.ISLAND_WIDTH),
|
|
31
|
-
$height: scaled(WHATSAPP_STATUS_BAR.ISLAND_HEIGHT),
|
|
32
|
-
$borderRadius: scaled(WHATSAPP_STATUS_BAR.ISLAND_HEIGHT / 2)
|
|
33
|
-
}).withConfig({
|
|
34
|
-
displayName: "StatusBarIsland",
|
|
35
|
-
componentId: "sc-lua8an-2"
|
|
36
|
-
})([""]);
|
|
37
|
-
export const StatusBarIndicators = styled(Horizontal).attrs({
|
|
38
|
-
$alignItems: 'center',
|
|
39
|
-
$gap: scaled(WHATSAPP_STATUS_BAR.INDICATOR_GAP)
|
|
40
|
-
}).withConfig({
|
|
41
|
-
displayName: "StatusBarIndicators",
|
|
42
|
-
componentId: "sc-lua8an-3"
|
|
43
|
-
})(["color:", ";svg{display:block;width:auto;height:", ";}"], WHATSAPP_COLOR.STATUS_BAR, scaled(WHATSAPP_STATUS_BAR.INDICATOR_HEIGHT));
|
|
44
|
-
export const StatusBarClock = styled.span.withConfig({
|
|
45
|
-
displayName: "StatusBarClock",
|
|
46
|
-
componentId: "sc-lua8an-4"
|
|
47
|
-
})(["color:", ";font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], WHATSAPP_COLOR.STATUS_BAR, FontFamily.MAIN, scaled(WHATSAPP_STATUS_BAR.CLOCK_FONT_SIZE), FontWeight.MEDIUM, LineHeight.HEADING4);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"><circle cx="12" cy="8.5" r="4"/><path d="M4 20.5c0-3.9 3.6-6.5 8-6.5s8 2.6 8 6.5z"/></svg>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m9.5 1.5-8 8.5 8 8.5"/></svg>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 12" fill="none"><rect width="21" height="10.8" x=".6" y=".6" stroke="currentColor" stroke-opacity=".4" stroke-width="1.2" rx="3"/><rect width="17.8" height="7.6" x="2.2" y="2.2" fill="currentColor" rx="1.8"/><path fill="currentColor" fill-opacity=".4" d="M23.2 4.2v3.6a2 2 0 0 0 0-3.6"/></svg>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M6.3 2.5H3.9a1.6 1.6 0 0 0-1.6 1.8c.4 3.4 1.9 6.5 4.3 8.9s5.5 3.9 8.9 4.3a1.6 1.6 0 0 0 1.8-1.6v-2.4a1.2 1.2 0 0 0-1-1.2l-2.3-.4a1.2 1.2 0 0 0-1.2.5l-.8 1.1a10.6 10.6 0 0 1-4.6-4.6l1.1-.8A1.2 1.2 0 0 0 9 6.9l-.4-2.3a1.2 1.2 0 0 0-1.2-1Z"/></svg>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"><circle cx="10" cy="4" r="1.7"/><circle cx="10" cy="10" r="1.7"/><circle cx="10" cy="16" r="1.7"/></svg>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 12" fill="currentColor"><rect width="3" height="4" y="8" rx="1"/><rect width="3" height="6.5" x="5" y="5.5" rx="1"/><rect width="3" height="9" x="10" y="3" rx="1"/><rect width="3" height="12" x="15" rx="1"/></svg>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="11" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"><path d="m1 6.1 2.6 2.7 7-6.8"/></svg>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="11" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"><path d="m1 6.1 2.6 2.7L9.2 2M6.4 6.9 8 8.8 14.6 2"/></svg>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg"><defs><pattern id="a" width="150" height="150" patternUnits="userSpaceOnUse"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"><path d="M18 24c-4-4-7-6-7-9a3.2 3.2 0 0 1 5.9-1.6A3.2 3.2 0 0 1 25 15c0 3-3 5-7 9m34-14h16a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-9l-5 4v-4h-2a3 3 0 0 1-3-3v-8a3 3 0 0 1 3-3m60 2 2.6 5.4 5.9.8-4.3 4.1 1 5.9-5.2-2.8-5.2 2.8 1-5.9-4.3-4.1 5.9-.8ZM14 56h12v8a6 6 0 0 1-12 0zm12 2h3a3 3 0 0 1 0 6h-3M13 74h14m33-6V54l10-2v14"/><circle cx="57" cy="68" r="3"/><circle cx="67" cy="66" r="3"/><path d="M100 58h4l2-3h8l2 3h4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-20a2 2 0 0 1-2-2V60a2 2 0 0 1 2-2"/><circle cx="110" cy="65" r="4.5"/><circle cx="20" cy="105" r="9"/><path d="M16 108a5 5 0 0 0 8 0"/><circle cx="17" cy="102" r=".9"/><circle cx="23" cy="102" r=".9"/><path d="M54 100h18v13H54zm9 0v13m-9-13a4 4 0 0 1 9-2 4 4 0 0 1 9 2m28 10 22-9-9 22-4-9Z"/><circle cx="133" cy="133" r="8"/><path d="M133 128v5l3 2M126 24h10m-5-5v10"/></g></pattern></defs><rect width="100%" height="100%" fill="url(#a)"/></svg>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.7"><path d="M1 4.2a11 11 0 0 1 14 0M3.6 7a7.2 7.2 0 0 1 8.8 0M6.2 9.7a3.3 3.3 0 0 1 3.6 0"/></svg>
|