@draftbit/core 46.10.3-93b2ea.2 → 46.10.3-a0279d.2
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/lib/commonjs/components/Checkbox/CheckboxGroupRow.js +23 -5
- package/lib/commonjs/index.js +0 -28
- package/lib/commonjs/mappings/NativeBase/Layout.js +108 -0
- package/lib/module/index.js +0 -4
- package/lib/module/mappings/NativeBase/Layout.js +101 -0
- package/lib/typescript/src/index.d.ts +0 -4
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/mappings/NativeBase/Layout.d.ts +133 -0
- package/lib/typescript/src/mappings/NativeBase/Layout.d.ts.map +1 -0
- package/package.json +3 -3
- package/src/index.js +0 -4
- package/src/index.tsx +0 -4
- package/src/mappings/NativeBase/Layout.js +124 -0
- package/src/mappings/NativeBase/Layout.ts +145 -0
- package/lib/commonjs/components/Container.js +0 -93
- package/lib/commonjs/components/Row.js +0 -73
- package/lib/commonjs/components/RowBodyIcon.js +0 -45
- package/lib/commonjs/components/RowHeadlineImageCaption.js +0 -45
- package/lib/commonjs/components/RowHeadlineImageIcon.js +0 -51
- package/lib/commonjs/mappings/Container.js +0 -37
- package/lib/module/components/Container.js +0 -83
- package/lib/module/components/Row.js +0 -63
- package/lib/module/components/RowBodyIcon.js +0 -35
- package/lib/module/components/RowHeadlineImageCaption.js +0 -35
- package/lib/module/components/RowHeadlineImageIcon.js +0 -41
- package/lib/module/mappings/Container.js +0 -30
- package/lib/typescript/src/components/Container.d.ts +0 -21
- package/lib/typescript/src/components/Container.d.ts.map +0 -1
- package/lib/typescript/src/components/Row.d.ts +0 -21
- package/lib/typescript/src/components/Row.d.ts.map +0 -1
- package/lib/typescript/src/components/RowBodyIcon.d.ts +0 -16
- package/lib/typescript/src/components/RowBodyIcon.d.ts.map +0 -1
- package/lib/typescript/src/components/RowHeadlineImageCaption.d.ts +0 -16
- package/lib/typescript/src/components/RowHeadlineImageCaption.d.ts.map +0 -1
- package/lib/typescript/src/components/RowHeadlineImageIcon.d.ts +0 -18
- package/lib/typescript/src/components/RowHeadlineImageIcon.d.ts.map +0 -1
- package/lib/typescript/src/mappings/Container.d.ts +0 -55
- package/lib/typescript/src/mappings/Container.d.ts.map +0 -1
- package/src/components/Container.js +0 -43
- package/src/components/Container.tsx +0 -116
- package/src/components/Row.js +0 -48
- package/src/components/Row.tsx +0 -108
- package/src/components/RowBodyIcon.js +0 -8
- package/src/components/RowBodyIcon.tsx +0 -47
- package/src/components/RowHeadlineImageCaption.js +0 -12
- package/src/components/RowHeadlineImageCaption.tsx +0 -49
- package/src/components/RowHeadlineImageIcon.js +0 -14
- package/src/components/RowHeadlineImageIcon.tsx +0 -61
- package/src/mappings/Container.js +0 -30
- package/src/mappings/Container.ts +0 -41
package/src/components/Row.tsx
DELETED
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import {
|
|
3
|
-
View,
|
|
4
|
-
Text,
|
|
5
|
-
Image,
|
|
6
|
-
ImageSourcePropType,
|
|
7
|
-
StyleSheet,
|
|
8
|
-
StyleProp,
|
|
9
|
-
TextStyle,
|
|
10
|
-
ViewStyle,
|
|
11
|
-
} from "react-native";
|
|
12
|
-
import { withTheme } from "../theming";
|
|
13
|
-
import Config from "./Config";
|
|
14
|
-
import theme from "../styles/DefaultTheme";
|
|
15
|
-
|
|
16
|
-
type Props = {
|
|
17
|
-
titleTypeStyle?: StyleProp<TextStyle>;
|
|
18
|
-
titleColor?: string;
|
|
19
|
-
subtitleTypeStyle?: StyleProp<TextStyle>;
|
|
20
|
-
subtitleColor?: string;
|
|
21
|
-
title?: string;
|
|
22
|
-
subtitle?: string;
|
|
23
|
-
multilineSubtitle?: boolean;
|
|
24
|
-
image?: string | ImageSourcePropType;
|
|
25
|
-
right?: () => React.ReactNode;
|
|
26
|
-
style?: StyleProp<ViewStyle>;
|
|
27
|
-
theme: typeof theme;
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
const Row: React.FC<React.PropsWithChildren<Props>> = ({
|
|
31
|
-
titleTypeStyle,
|
|
32
|
-
titleColor,
|
|
33
|
-
subtitleTypeStyle,
|
|
34
|
-
subtitleColor,
|
|
35
|
-
title,
|
|
36
|
-
subtitle,
|
|
37
|
-
multilineSubtitle,
|
|
38
|
-
image,
|
|
39
|
-
right,
|
|
40
|
-
style,
|
|
41
|
-
}) => {
|
|
42
|
-
return (
|
|
43
|
-
<View style={[styles.container, { padding: 16 }, style]}>
|
|
44
|
-
<View style={styles.leftContainer}>
|
|
45
|
-
{image && (
|
|
46
|
-
<Image
|
|
47
|
-
source={typeof image === "string" ? { uri: image } : image}
|
|
48
|
-
style={{
|
|
49
|
-
marginRight: 12,
|
|
50
|
-
width: subtitle
|
|
51
|
-
? Config.rowMultiLineImageSize
|
|
52
|
-
: Config.rowSingleLineImageSize,
|
|
53
|
-
height: subtitle
|
|
54
|
-
? Config.rowMultiLineImageSize
|
|
55
|
-
: Config.rowSingleLineImageSize,
|
|
56
|
-
}}
|
|
57
|
-
/>
|
|
58
|
-
)}
|
|
59
|
-
<View style={styles.textContainer}>
|
|
60
|
-
<Text
|
|
61
|
-
style={[
|
|
62
|
-
titleTypeStyle,
|
|
63
|
-
{
|
|
64
|
-
color: titleColor,
|
|
65
|
-
},
|
|
66
|
-
]}
|
|
67
|
-
numberOfLines={1}
|
|
68
|
-
>
|
|
69
|
-
{title}
|
|
70
|
-
</Text>
|
|
71
|
-
{subtitle ? (
|
|
72
|
-
<Text
|
|
73
|
-
style={[
|
|
74
|
-
subtitleTypeStyle,
|
|
75
|
-
{
|
|
76
|
-
color: subtitleColor,
|
|
77
|
-
marginTop: 4,
|
|
78
|
-
},
|
|
79
|
-
]}
|
|
80
|
-
numberOfLines={multilineSubtitle ? undefined : 1}
|
|
81
|
-
>
|
|
82
|
-
{subtitle}
|
|
83
|
-
</Text>
|
|
84
|
-
) : null}
|
|
85
|
-
</View>
|
|
86
|
-
</View>
|
|
87
|
-
{right && right()}
|
|
88
|
-
</View>
|
|
89
|
-
);
|
|
90
|
-
};
|
|
91
|
-
|
|
92
|
-
const styles = StyleSheet.create({
|
|
93
|
-
leftContainer: {
|
|
94
|
-
flexDirection: "row",
|
|
95
|
-
flex: 1,
|
|
96
|
-
},
|
|
97
|
-
container: {
|
|
98
|
-
flexDirection: "row",
|
|
99
|
-
justifyContent: "space-between",
|
|
100
|
-
alignItems: "center",
|
|
101
|
-
},
|
|
102
|
-
textContainer: {
|
|
103
|
-
flex: 1,
|
|
104
|
-
justifyContent: "center",
|
|
105
|
-
},
|
|
106
|
-
});
|
|
107
|
-
|
|
108
|
-
export default withTheme(Row);
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { withTheme } from "../theming";
|
|
3
|
-
import Row from "./Row";
|
|
4
|
-
import Config from "./Config";
|
|
5
|
-
const RowBodyIcon = ({ Icon, title, subtitle, icon, style, theme: { colors, typography }, }) => {
|
|
6
|
-
return (React.createElement(Row, { titleTypeStyle: typography.body1, titleColor: colors.medium, subtitleTypeStyle: typography.subtitle2, subtitleColor: colors.light, title: title, subtitle: subtitle, right: () => (React.createElement(Icon, { name: icon, size: Config.rowSingleLineIconSize, color: colors.light, style: { marginLeft: 16 } })), style: style }));
|
|
7
|
-
};
|
|
8
|
-
export default withTheme(RowBodyIcon);
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { withTheme } from "../theming";
|
|
3
|
-
import type { Theme } from "../styles/DefaultTheme";
|
|
4
|
-
import type { IconSlot } from "../interfaces/Icon";
|
|
5
|
-
|
|
6
|
-
import Row from "./Row";
|
|
7
|
-
import Config from "./Config";
|
|
8
|
-
import { StyleProp, ViewStyle } from "react-native";
|
|
9
|
-
|
|
10
|
-
type Props = {
|
|
11
|
-
title?: string;
|
|
12
|
-
subtitle?: string;
|
|
13
|
-
icon: string;
|
|
14
|
-
style?: StyleProp<ViewStyle>;
|
|
15
|
-
theme: Theme;
|
|
16
|
-
} & IconSlot;
|
|
17
|
-
|
|
18
|
-
const RowBodyIcon: React.FC<React.PropsWithChildren<Props>> = ({
|
|
19
|
-
Icon,
|
|
20
|
-
title,
|
|
21
|
-
subtitle,
|
|
22
|
-
icon,
|
|
23
|
-
style,
|
|
24
|
-
theme: { colors, typography },
|
|
25
|
-
}) => {
|
|
26
|
-
return (
|
|
27
|
-
<Row
|
|
28
|
-
titleTypeStyle={typography.body1}
|
|
29
|
-
titleColor={colors.medium}
|
|
30
|
-
subtitleTypeStyle={typography.subtitle2}
|
|
31
|
-
subtitleColor={colors.light}
|
|
32
|
-
title={title}
|
|
33
|
-
subtitle={subtitle}
|
|
34
|
-
right={() => (
|
|
35
|
-
<Icon
|
|
36
|
-
name={icon}
|
|
37
|
-
size={Config.rowSingleLineIconSize}
|
|
38
|
-
color={colors.light}
|
|
39
|
-
style={{ marginLeft: 16 }}
|
|
40
|
-
/>
|
|
41
|
-
)}
|
|
42
|
-
style={style}
|
|
43
|
-
/>
|
|
44
|
-
);
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
export default withTheme(RowBodyIcon);
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { Text } from "react-native";
|
|
3
|
-
import { withTheme } from "../theming";
|
|
4
|
-
import Row from "./Row";
|
|
5
|
-
const RowHeadlineImageCaption = ({ title, subtitle, caption, image, style, theme: { colors, typography }, }) => {
|
|
6
|
-
return (React.createElement(Row, { titleTypeStyle: typography.headline6, titleColor: colors.strong, subtitleTypeStyle: typography.body2, subtitleColor: colors.medium, title: title, subtitle: subtitle, image: image, right: () => (React.createElement(Text, { style: {
|
|
7
|
-
...typography.caption,
|
|
8
|
-
color: colors.strong,
|
|
9
|
-
marginLeft: 16,
|
|
10
|
-
} }, caption)), style: style }));
|
|
11
|
-
};
|
|
12
|
-
export default withTheme(RowHeadlineImageCaption);
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { Text, ImageSourcePropType, StyleProp, ViewStyle } from "react-native";
|
|
3
|
-
import { withTheme } from "../theming";
|
|
4
|
-
import Row from "./Row";
|
|
5
|
-
import theme from "../styles/DefaultTheme";
|
|
6
|
-
|
|
7
|
-
type Props = {
|
|
8
|
-
title?: string;
|
|
9
|
-
subtitle?: string;
|
|
10
|
-
caption?: string;
|
|
11
|
-
image: string | ImageSourcePropType;
|
|
12
|
-
style?: StyleProp<ViewStyle>;
|
|
13
|
-
theme: typeof theme;
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
const RowHeadlineImageCaption: React.FC<React.PropsWithChildren<Props>> = ({
|
|
17
|
-
title,
|
|
18
|
-
subtitle,
|
|
19
|
-
caption,
|
|
20
|
-
image,
|
|
21
|
-
style,
|
|
22
|
-
theme: { colors, typography },
|
|
23
|
-
}) => {
|
|
24
|
-
return (
|
|
25
|
-
<Row
|
|
26
|
-
titleTypeStyle={typography.headline6}
|
|
27
|
-
titleColor={colors.strong}
|
|
28
|
-
subtitleTypeStyle={typography.body2}
|
|
29
|
-
subtitleColor={colors.medium}
|
|
30
|
-
title={title}
|
|
31
|
-
subtitle={subtitle}
|
|
32
|
-
image={image}
|
|
33
|
-
right={() => (
|
|
34
|
-
<Text
|
|
35
|
-
style={{
|
|
36
|
-
...typography.caption,
|
|
37
|
-
color: colors.strong,
|
|
38
|
-
marginLeft: 16,
|
|
39
|
-
}}
|
|
40
|
-
>
|
|
41
|
-
{caption}
|
|
42
|
-
</Text>
|
|
43
|
-
)}
|
|
44
|
-
style={style}
|
|
45
|
-
/>
|
|
46
|
-
);
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
export default withTheme(RowHeadlineImageCaption);
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { withTheme } from "../theming";
|
|
3
|
-
import Row from "./Row";
|
|
4
|
-
import Config from "./Config";
|
|
5
|
-
const RowHeadlineImageIcon = ({ Icon, icon, title, image, subtitle, multilineSubtitle = false, style, theme: { colors, typography }, }) => {
|
|
6
|
-
return (React.createElement(Row, { titleTypeStyle: typography.headline6, titleColor: colors.strong, subtitleTypeStyle: typography.body2, subtitleColor: colors.medium, title: title, subtitle: subtitle, multilineSubtitle: multilineSubtitle, image: image, right: () => (React.createElement(Icon, { name: icon, size: multilineSubtitle
|
|
7
|
-
? Config.rowMultiLineIconSize
|
|
8
|
-
: Config.rowSingleLineIconSize, color: colors.light, style: {
|
|
9
|
-
marginLeft: 16,
|
|
10
|
-
alignSelf: multilineSubtitle ? "flex-start" : "center",
|
|
11
|
-
marginTop: multilineSubtitle ? 4 : 0,
|
|
12
|
-
} })), style: style }));
|
|
13
|
-
};
|
|
14
|
-
export default withTheme(RowHeadlineImageIcon);
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { withTheme } from "../theming";
|
|
3
|
-
import type { Theme } from "../styles/DefaultTheme";
|
|
4
|
-
import type { IconSlot } from "../interfaces/Icon";
|
|
5
|
-
|
|
6
|
-
import Row from "./Row";
|
|
7
|
-
import Config from "./Config";
|
|
8
|
-
import { ImageSourcePropType, StyleProp, ViewStyle } from "react-native";
|
|
9
|
-
|
|
10
|
-
type Props = {
|
|
11
|
-
title?: string;
|
|
12
|
-
image: string | ImageSourcePropType;
|
|
13
|
-
subtitle?: string;
|
|
14
|
-
multilineSubtitle?: boolean;
|
|
15
|
-
icon: string;
|
|
16
|
-
style?: StyleProp<ViewStyle>;
|
|
17
|
-
theme: Theme;
|
|
18
|
-
} & IconSlot;
|
|
19
|
-
|
|
20
|
-
const RowHeadlineImageIcon: React.FC<React.PropsWithChildren<Props>> = ({
|
|
21
|
-
Icon,
|
|
22
|
-
icon,
|
|
23
|
-
title,
|
|
24
|
-
image,
|
|
25
|
-
subtitle,
|
|
26
|
-
multilineSubtitle = false,
|
|
27
|
-
style,
|
|
28
|
-
theme: { colors, typography },
|
|
29
|
-
}) => {
|
|
30
|
-
return (
|
|
31
|
-
<Row
|
|
32
|
-
titleTypeStyle={typography.headline6}
|
|
33
|
-
titleColor={colors.strong}
|
|
34
|
-
subtitleTypeStyle={typography.body2}
|
|
35
|
-
subtitleColor={colors.medium}
|
|
36
|
-
title={title}
|
|
37
|
-
subtitle={subtitle}
|
|
38
|
-
multilineSubtitle={multilineSubtitle}
|
|
39
|
-
image={image}
|
|
40
|
-
right={() => (
|
|
41
|
-
<Icon
|
|
42
|
-
name={icon}
|
|
43
|
-
size={
|
|
44
|
-
multilineSubtitle
|
|
45
|
-
? Config.rowMultiLineIconSize
|
|
46
|
-
: Config.rowSingleLineIconSize
|
|
47
|
-
}
|
|
48
|
-
color={colors.light}
|
|
49
|
-
style={{
|
|
50
|
-
marginLeft: 16,
|
|
51
|
-
alignSelf: multilineSubtitle ? "flex-start" : "center",
|
|
52
|
-
marginTop: multilineSubtitle ? 4 : 0,
|
|
53
|
-
}}
|
|
54
|
-
/>
|
|
55
|
-
)}
|
|
56
|
-
style={style}
|
|
57
|
-
/>
|
|
58
|
-
);
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
export default withTheme(RowHeadlineImageIcon);
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, createElevationType, createImageProp, createResizeModeProp, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
|
|
2
|
-
export const SEED_DATA = {
|
|
3
|
-
name: "Container",
|
|
4
|
-
tag: "Container",
|
|
5
|
-
description: "A container component with gutter padding",
|
|
6
|
-
category: COMPONENT_TYPES.deprecated,
|
|
7
|
-
stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
|
|
8
|
-
layout: {
|
|
9
|
-
height: 250,
|
|
10
|
-
},
|
|
11
|
-
props: {
|
|
12
|
-
useThemeGutterPadding: {
|
|
13
|
-
group: GROUPS.basic,
|
|
14
|
-
label: "Use gutter padding",
|
|
15
|
-
description: "When true, uses the theme gutter spacing as the container's horizontal padding",
|
|
16
|
-
formType: FORM_TYPES.boolean,
|
|
17
|
-
propType: PROP_TYPES.BOOLEAN,
|
|
18
|
-
defaultValue: false,
|
|
19
|
-
editable: false,
|
|
20
|
-
required: true,
|
|
21
|
-
},
|
|
22
|
-
backgroundImage: createImageProp({
|
|
23
|
-
label: "Background Image",
|
|
24
|
-
description: "Apply a custom background image",
|
|
25
|
-
defaultValue: null,
|
|
26
|
-
}),
|
|
27
|
-
backgroundImageResizeMode: createResizeModeProp(),
|
|
28
|
-
elevation: createElevationType(0),
|
|
29
|
-
},
|
|
30
|
-
};
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
GROUPS,
|
|
3
|
-
COMPONENT_TYPES,
|
|
4
|
-
FORM_TYPES,
|
|
5
|
-
PROP_TYPES,
|
|
6
|
-
createElevationType,
|
|
7
|
-
createImageProp,
|
|
8
|
-
createResizeModeProp,
|
|
9
|
-
CONTAINER_COMPONENT_STYLES_SECTIONS,
|
|
10
|
-
} from "@draftbit/types";
|
|
11
|
-
|
|
12
|
-
export const SEED_DATA = {
|
|
13
|
-
name: "Container",
|
|
14
|
-
tag: "Container",
|
|
15
|
-
description: "A container component with gutter padding",
|
|
16
|
-
category: COMPONENT_TYPES.deprecated,
|
|
17
|
-
stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
|
|
18
|
-
layout: {
|
|
19
|
-
height: 250,
|
|
20
|
-
},
|
|
21
|
-
props: {
|
|
22
|
-
useThemeGutterPadding: {
|
|
23
|
-
group: GROUPS.basic,
|
|
24
|
-
label: "Use gutter padding",
|
|
25
|
-
description:
|
|
26
|
-
"When true, uses the theme gutter spacing as the container's horizontal padding",
|
|
27
|
-
formType: FORM_TYPES.boolean,
|
|
28
|
-
propType: PROP_TYPES.BOOLEAN,
|
|
29
|
-
defaultValue: false,
|
|
30
|
-
editable: false,
|
|
31
|
-
required: true,
|
|
32
|
-
},
|
|
33
|
-
backgroundImage: createImageProp({
|
|
34
|
-
label: "Background Image",
|
|
35
|
-
description: "Apply a custom background image",
|
|
36
|
-
defaultValue: null,
|
|
37
|
-
}),
|
|
38
|
-
backgroundImageResizeMode: createResizeModeProp(),
|
|
39
|
-
elevation: createElevationType(0),
|
|
40
|
-
},
|
|
41
|
-
};
|