@draftbit/core 46.10.3-6f5759.2 → 46.10.3-e89832.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/AnimatedCircularProgress.js +12 -1
- package/lib/commonjs/components/AvatarEdit.js +15 -4
- package/lib/commonjs/components/Banner.js +23 -4
- package/lib/commonjs/components/Button.js +33 -10
- package/lib/commonjs/components/Checkbox/CheckboxGroupRow.js +23 -5
- package/lib/commonjs/components/Checkbox/CheckboxRow.js +6 -23
- package/lib/commonjs/components/Container.js +15 -4
- package/lib/commonjs/components/DeprecatedButton.js +20 -3
- package/lib/commonjs/components/Divider.js +14 -1
- package/lib/commonjs/components/FieldSearchBarFull.js +1 -2
- package/lib/commonjs/components/Layout.js +40 -19
- package/lib/commonjs/components/NumberInput.js +12 -3
- package/lib/commonjs/components/Picker/PickerComponent.android.js +20 -3
- package/lib/commonjs/components/Portal/PortalConsumer.js +22 -7
- package/lib/commonjs/components/Portal/PortalManager.js +34 -8
- package/lib/commonjs/components/RadioButton/RadioButton.js +13 -2
- package/lib/commonjs/components/RadioButton/RadioButtonFieldGroup.js +9 -1
- package/lib/commonjs/components/RadioButton/RadioButtonGroup.js +15 -2
- package/lib/commonjs/components/RadioButton/RadioButtonRow.js +23 -5
- package/lib/commonjs/components/Row.js +73 -0
- package/lib/commonjs/components/RowBodyIcon.js +45 -0
- package/lib/commonjs/components/RowHeadlineImageCaption.js +45 -0
- package/lib/commonjs/components/RowHeadlineImageIcon.js +51 -0
- package/lib/commonjs/components/ScreenContainer.js +24 -6
- package/lib/commonjs/components/Shadow.js +15 -2
- package/lib/commonjs/components/Slider.js +21 -4
- package/lib/commonjs/components/StarRating.js +23 -4
- package/lib/commonjs/components/StepIndicator.js +57 -18
- package/lib/commonjs/components/Surface.js +14 -2
- package/lib/commonjs/components/Text.js +50 -4
- package/lib/commonjs/components/TextField.js +76 -28
- package/lib/commonjs/components/ToggleButton.js +15 -2
- package/lib/commonjs/components/Touchable.js +15 -2
- package/lib/commonjs/constants.js +1 -1
- package/lib/commonjs/index.js +21 -0
- package/lib/commonjs/styles/overlay.js +1 -3
- package/lib/commonjs/utilities.js +1 -2
- package/lib/module/components/Row.js +63 -0
- package/lib/module/components/RowBodyIcon.js +35 -0
- package/lib/module/components/RowHeadlineImageCaption.js +35 -0
- package/lib/module/components/RowHeadlineImageIcon.js +41 -0
- package/lib/module/index.js +3 -0
- package/lib/typescript/src/components/Row.d.ts +21 -0
- package/lib/typescript/src/components/Row.d.ts.map +1 -0
- package/lib/typescript/src/components/RowBodyIcon.d.ts +16 -0
- package/lib/typescript/src/components/RowBodyIcon.d.ts.map +1 -0
- package/lib/typescript/src/components/RowHeadlineImageCaption.d.ts +16 -0
- package/lib/typescript/src/components/RowHeadlineImageCaption.d.ts.map +1 -0
- package/lib/typescript/src/components/RowHeadlineImageIcon.d.ts +18 -0
- package/lib/typescript/src/components/RowHeadlineImageIcon.d.ts.map +1 -0
- package/lib/typescript/src/index.d.ts +3 -0
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/components/Row.js +48 -0
- package/src/components/Row.tsx +108 -0
- package/src/components/RowBodyIcon.js +8 -0
- package/src/components/RowBodyIcon.tsx +47 -0
- package/src/components/RowHeadlineImageCaption.js +12 -0
- package/src/components/RowHeadlineImageCaption.tsx +49 -0
- package/src/components/RowHeadlineImageIcon.js +14 -0
- package/src/components/RowHeadlineImageIcon.tsx +61 -0
- package/src/index.js +3 -0
- package/src/index.tsx +3 -0
- package/lib/commonjs/mappings/NativeBase/Layout.js +0 -107
- package/lib/module/mappings/NativeBase/Layout.js +0 -100
- package/lib/typescript/src/mappings/NativeBase/Layout.d.ts +0 -117
- package/lib/typescript/src/mappings/NativeBase/Layout.d.ts.map +0 -1
- package/src/mappings/NativeBase/Layout.js +0 -112
- package/src/mappings/NativeBase/Layout.ts +0 -133
|
@@ -57,7 +57,6 @@ function extractBorderAndMarginStyles(style, additionalBorderStyles, additionalM
|
|
|
57
57
|
marginStyles
|
|
58
58
|
};
|
|
59
59
|
}
|
|
60
|
-
|
|
61
60
|
/**
|
|
62
61
|
* Merges a style object on top of another style object. In React Native,
|
|
63
62
|
* keys with undefined values in a style object will still override styles
|
|
@@ -90,4 +89,4 @@ function getValueForRadioButton(value) {
|
|
|
90
89
|
} else {
|
|
91
90
|
throw new Error("Invalid value: ".concat(value));
|
|
92
91
|
}
|
|
93
|
-
}
|
|
92
|
+
}}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { View, Text, Image, StyleSheet } from "react-native";
|
|
3
|
+
import { withTheme } from "../theming";
|
|
4
|
+
import Config from "./Config";
|
|
5
|
+
const Row = _ref => {
|
|
6
|
+
let {
|
|
7
|
+
titleTypeStyle,
|
|
8
|
+
titleColor,
|
|
9
|
+
subtitleTypeStyle,
|
|
10
|
+
subtitleColor,
|
|
11
|
+
title,
|
|
12
|
+
subtitle,
|
|
13
|
+
multilineSubtitle,
|
|
14
|
+
image,
|
|
15
|
+
right,
|
|
16
|
+
style
|
|
17
|
+
} = _ref;
|
|
18
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
19
|
+
style: [styles.container, {
|
|
20
|
+
padding: 16
|
|
21
|
+
}, style]
|
|
22
|
+
}, /*#__PURE__*/React.createElement(View, {
|
|
23
|
+
style: styles.leftContainer
|
|
24
|
+
}, image && /*#__PURE__*/React.createElement(Image, {
|
|
25
|
+
source: typeof image === "string" ? {
|
|
26
|
+
uri: image
|
|
27
|
+
} : image,
|
|
28
|
+
style: {
|
|
29
|
+
marginRight: 12,
|
|
30
|
+
width: subtitle ? Config.rowMultiLineImageSize : Config.rowSingleLineImageSize,
|
|
31
|
+
height: subtitle ? Config.rowMultiLineImageSize : Config.rowSingleLineImageSize
|
|
32
|
+
}
|
|
33
|
+
}), /*#__PURE__*/React.createElement(View, {
|
|
34
|
+
style: styles.textContainer
|
|
35
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
36
|
+
style: [titleTypeStyle, {
|
|
37
|
+
color: titleColor
|
|
38
|
+
}],
|
|
39
|
+
numberOfLines: 1
|
|
40
|
+
}, title), subtitle ? /*#__PURE__*/React.createElement(Text, {
|
|
41
|
+
style: [subtitleTypeStyle, {
|
|
42
|
+
color: subtitleColor,
|
|
43
|
+
marginTop: 4
|
|
44
|
+
}],
|
|
45
|
+
numberOfLines: multilineSubtitle ? undefined : 1
|
|
46
|
+
}, subtitle) : null)), right && right());
|
|
47
|
+
};
|
|
48
|
+
const styles = StyleSheet.create({
|
|
49
|
+
leftContainer: {
|
|
50
|
+
flexDirection: "row",
|
|
51
|
+
flex: 1
|
|
52
|
+
},
|
|
53
|
+
container: {
|
|
54
|
+
flexDirection: "row",
|
|
55
|
+
justifyContent: "space-between",
|
|
56
|
+
alignItems: "center"
|
|
57
|
+
},
|
|
58
|
+
textContainer: {
|
|
59
|
+
flex: 1,
|
|
60
|
+
justifyContent: "center"
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
export default withTheme(Row);
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { withTheme } from "../theming";
|
|
3
|
+
import Row from "./Row";
|
|
4
|
+
import Config from "./Config";
|
|
5
|
+
const RowBodyIcon = _ref => {
|
|
6
|
+
let {
|
|
7
|
+
Icon,
|
|
8
|
+
title,
|
|
9
|
+
subtitle,
|
|
10
|
+
icon,
|
|
11
|
+
style,
|
|
12
|
+
theme: {
|
|
13
|
+
colors,
|
|
14
|
+
typography
|
|
15
|
+
}
|
|
16
|
+
} = _ref;
|
|
17
|
+
return /*#__PURE__*/React.createElement(Row, {
|
|
18
|
+
titleTypeStyle: typography.body1,
|
|
19
|
+
titleColor: colors.medium,
|
|
20
|
+
subtitleTypeStyle: typography.subtitle2,
|
|
21
|
+
subtitleColor: colors.light,
|
|
22
|
+
title: title,
|
|
23
|
+
subtitle: subtitle,
|
|
24
|
+
right: () => /*#__PURE__*/React.createElement(Icon, {
|
|
25
|
+
name: icon,
|
|
26
|
+
size: Config.rowSingleLineIconSize,
|
|
27
|
+
color: colors.light,
|
|
28
|
+
style: {
|
|
29
|
+
marginLeft: 16
|
|
30
|
+
}
|
|
31
|
+
}),
|
|
32
|
+
style: style
|
|
33
|
+
});
|
|
34
|
+
};
|
|
35
|
+
export default withTheme(RowBodyIcon);
|
|
@@ -0,0 +1,35 @@
|
|
|
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 = _ref => {
|
|
6
|
+
let {
|
|
7
|
+
title,
|
|
8
|
+
subtitle,
|
|
9
|
+
caption,
|
|
10
|
+
image,
|
|
11
|
+
style,
|
|
12
|
+
theme: {
|
|
13
|
+
colors,
|
|
14
|
+
typography
|
|
15
|
+
}
|
|
16
|
+
} = _ref;
|
|
17
|
+
return /*#__PURE__*/React.createElement(Row, {
|
|
18
|
+
titleTypeStyle: typography.headline6,
|
|
19
|
+
titleColor: colors.strong,
|
|
20
|
+
subtitleTypeStyle: typography.body2,
|
|
21
|
+
subtitleColor: colors.medium,
|
|
22
|
+
title: title,
|
|
23
|
+
subtitle: subtitle,
|
|
24
|
+
image: image,
|
|
25
|
+
right: () => /*#__PURE__*/React.createElement(Text, {
|
|
26
|
+
style: {
|
|
27
|
+
...typography.caption,
|
|
28
|
+
color: colors.strong,
|
|
29
|
+
marginLeft: 16
|
|
30
|
+
}
|
|
31
|
+
}, caption),
|
|
32
|
+
style: style
|
|
33
|
+
});
|
|
34
|
+
};
|
|
35
|
+
export default withTheme(RowHeadlineImageCaption);
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { withTheme } from "../theming";
|
|
3
|
+
import Row from "./Row";
|
|
4
|
+
import Config from "./Config";
|
|
5
|
+
const RowHeadlineImageIcon = _ref => {
|
|
6
|
+
let {
|
|
7
|
+
Icon,
|
|
8
|
+
icon,
|
|
9
|
+
title,
|
|
10
|
+
image,
|
|
11
|
+
subtitle,
|
|
12
|
+
multilineSubtitle = false,
|
|
13
|
+
style,
|
|
14
|
+
theme: {
|
|
15
|
+
colors,
|
|
16
|
+
typography
|
|
17
|
+
}
|
|
18
|
+
} = _ref;
|
|
19
|
+
return /*#__PURE__*/React.createElement(Row, {
|
|
20
|
+
titleTypeStyle: typography.headline6,
|
|
21
|
+
titleColor: colors.strong,
|
|
22
|
+
subtitleTypeStyle: typography.body2,
|
|
23
|
+
subtitleColor: colors.medium,
|
|
24
|
+
title: title,
|
|
25
|
+
subtitle: subtitle,
|
|
26
|
+
multilineSubtitle: multilineSubtitle,
|
|
27
|
+
image: image,
|
|
28
|
+
right: () => /*#__PURE__*/React.createElement(Icon, {
|
|
29
|
+
name: icon,
|
|
30
|
+
size: multilineSubtitle ? Config.rowMultiLineIconSize : Config.rowSingleLineIconSize,
|
|
31
|
+
color: colors.light,
|
|
32
|
+
style: {
|
|
33
|
+
marginLeft: 16,
|
|
34
|
+
alignSelf: multilineSubtitle ? "flex-start" : "center",
|
|
35
|
+
marginTop: multilineSubtitle ? 4 : 0
|
|
36
|
+
}
|
|
37
|
+
}),
|
|
38
|
+
style: style
|
|
39
|
+
});
|
|
40
|
+
};
|
|
41
|
+
export default withTheme(RowHeadlineImageIcon);
|
package/lib/module/index.js
CHANGED
|
@@ -43,6 +43,9 @@ export { default as DatePicker } from "./components/DatePicker/DatePicker";
|
|
|
43
43
|
export { default as Picker } from "./components/Picker/Picker";
|
|
44
44
|
export { default as ProgressBar } from "./components/ProgressBar";
|
|
45
45
|
export { default as ProgressCircle } from "./components/ProgressCircle";
|
|
46
|
+
export { default as RowBodyIcon } from "./components/RowBodyIcon";
|
|
47
|
+
export { default as RowHeadlineImageCaption } from "./components/RowHeadlineImageCaption";
|
|
48
|
+
export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIcon";
|
|
46
49
|
export { default as Slider } from "./components/Slider";
|
|
47
50
|
export { default as Stepper } from "./components/Stepper";
|
|
48
51
|
export { useAuthState } from "./components/useAuthState";
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { ImageSourcePropType, StyleProp, TextStyle, ViewStyle } from "react-native";
|
|
3
|
+
import theme from "../styles/DefaultTheme";
|
|
4
|
+
declare type Props = {
|
|
5
|
+
titleTypeStyle?: StyleProp<TextStyle>;
|
|
6
|
+
titleColor?: string;
|
|
7
|
+
subtitleTypeStyle?: StyleProp<TextStyle>;
|
|
8
|
+
subtitleColor?: string;
|
|
9
|
+
title?: string;
|
|
10
|
+
subtitle?: string;
|
|
11
|
+
multilineSubtitle?: boolean;
|
|
12
|
+
image?: string | ImageSourcePropType;
|
|
13
|
+
right?: () => React.ReactNode;
|
|
14
|
+
style?: StyleProp<ViewStyle>;
|
|
15
|
+
theme: typeof theme;
|
|
16
|
+
};
|
|
17
|
+
declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<Props>, "theme"> & {
|
|
18
|
+
theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
|
|
19
|
+
}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<React.PropsWithChildren<Props>> & React.FC<React.PropsWithChildren<Props>>, {}>;
|
|
20
|
+
export default _default;
|
|
21
|
+
//# sourceMappingURL=Row.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Row.d.ts","sourceRoot":"","sources":["../../../../src/components/Row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,mBAAmB,EAEnB,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,MAAM,wBAAwB,CAAC;AAE3C,aAAK,KAAK,GAAG;IACX,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,OAAO,KAAK,CAAC;CACrB,CAAC;;;;AAgFF,wBAA8B"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { Theme } from "../styles/DefaultTheme";
|
|
3
|
+
import type { IconSlot } from "../interfaces/Icon";
|
|
4
|
+
import { StyleProp, ViewStyle } from "react-native";
|
|
5
|
+
declare type Props = {
|
|
6
|
+
title?: string;
|
|
7
|
+
subtitle?: string;
|
|
8
|
+
icon: string;
|
|
9
|
+
style?: StyleProp<ViewStyle>;
|
|
10
|
+
theme: Theme;
|
|
11
|
+
} & IconSlot;
|
|
12
|
+
declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<Props>, "theme"> & {
|
|
13
|
+
theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
|
|
14
|
+
}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<React.PropsWithChildren<Props>> & React.FC<React.PropsWithChildren<Props>>, {}>;
|
|
15
|
+
export default _default;
|
|
16
|
+
//# sourceMappingURL=RowBodyIcon.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RowBodyIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/RowBodyIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAInD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC;CACd,GAAG,QAAQ,CAAC;;;;AA+Bb,wBAAsC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { ImageSourcePropType, StyleProp, ViewStyle } from "react-native";
|
|
3
|
+
import theme from "../styles/DefaultTheme";
|
|
4
|
+
declare type Props = {
|
|
5
|
+
title?: string;
|
|
6
|
+
subtitle?: string;
|
|
7
|
+
caption?: string;
|
|
8
|
+
image: string | ImageSourcePropType;
|
|
9
|
+
style?: StyleProp<ViewStyle>;
|
|
10
|
+
theme: typeof theme;
|
|
11
|
+
};
|
|
12
|
+
declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<Props>, "theme"> & {
|
|
13
|
+
theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
|
|
14
|
+
}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<React.PropsWithChildren<Props>> & React.FC<React.PropsWithChildren<Props>>, {}>;
|
|
15
|
+
export default _default;
|
|
16
|
+
//# sourceMappingURL=RowHeadlineImageCaption.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RowHeadlineImageCaption.d.ts","sourceRoot":"","sources":["../../../../src/components/RowHeadlineImageCaption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAQ,mBAAmB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG/E,OAAO,KAAK,MAAM,wBAAwB,CAAC;AAE3C,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,OAAO,KAAK,CAAC;CACrB,CAAC;;;;AAmCF,wBAAkD"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { Theme } from "../styles/DefaultTheme";
|
|
3
|
+
import type { IconSlot } from "../interfaces/Icon";
|
|
4
|
+
import { ImageSourcePropType, StyleProp, ViewStyle } from "react-native";
|
|
5
|
+
declare type Props = {
|
|
6
|
+
title?: string;
|
|
7
|
+
image: string | ImageSourcePropType;
|
|
8
|
+
subtitle?: string;
|
|
9
|
+
multilineSubtitle?: boolean;
|
|
10
|
+
icon: string;
|
|
11
|
+
style?: StyleProp<ViewStyle>;
|
|
12
|
+
theme: Theme;
|
|
13
|
+
} & IconSlot;
|
|
14
|
+
declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<Props>, "theme"> & {
|
|
15
|
+
theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
|
|
16
|
+
}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<React.PropsWithChildren<Props>> & React.FC<React.PropsWithChildren<Props>>, {}>;
|
|
17
|
+
export default _default;
|
|
18
|
+
//# sourceMappingURL=RowHeadlineImageIcon.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RowHeadlineImageIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/RowHeadlineImageIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAInD,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzE,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC;CACd,GAAG,QAAQ,CAAC;;;;AA2Cb,wBAA+C"}
|
|
@@ -41,6 +41,9 @@ export { default as DatePicker } from "./components/DatePicker/DatePicker";
|
|
|
41
41
|
export { default as Picker } from "./components/Picker/Picker";
|
|
42
42
|
export { default as ProgressBar } from "./components/ProgressBar";
|
|
43
43
|
export { default as ProgressCircle } from "./components/ProgressCircle";
|
|
44
|
+
export { default as RowBodyIcon } from "./components/RowBodyIcon";
|
|
45
|
+
export { default as RowHeadlineImageCaption } from "./components/RowHeadlineImageCaption";
|
|
46
|
+
export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIcon";
|
|
44
47
|
export { default as Slider } from "./components/Slider";
|
|
45
48
|
export { default as Stepper } from "./components/Stepper";
|
|
46
49
|
export { useAuthState } from "./components/useAuthState";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "46.10.3-
|
|
3
|
+
"version": "46.10.3-e89832.2+e898328",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"@date-io/date-fns": "^1.3.13",
|
|
43
43
|
"@draftbit/react-theme-provider": "^2.1.1",
|
|
44
|
-
"@draftbit/types": "^46.10.3-
|
|
44
|
+
"@draftbit/types": "^46.10.3-e89832.2+e898328",
|
|
45
45
|
"@material-ui/core": "^4.11.0",
|
|
46
46
|
"@material-ui/pickers": "^3.2.10",
|
|
47
47
|
"@react-native-community/slider": "4.2.3",
|
|
@@ -100,5 +100,5 @@
|
|
|
100
100
|
]
|
|
101
101
|
]
|
|
102
102
|
},
|
|
103
|
-
"gitHead": "
|
|
103
|
+
"gitHead": "e898328b35cd0240030d6e8de8354f2044e35f29"
|
|
104
104
|
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { View, Text, Image, StyleSheet, } from "react-native";
|
|
3
|
+
import { withTheme } from "../theming";
|
|
4
|
+
import Config from "./Config";
|
|
5
|
+
const Row = ({ titleTypeStyle, titleColor, subtitleTypeStyle, subtitleColor, title, subtitle, multilineSubtitle, image, right, style, }) => {
|
|
6
|
+
return (React.createElement(View, { style: [styles.container, { padding: 16 }, style] },
|
|
7
|
+
React.createElement(View, { style: styles.leftContainer },
|
|
8
|
+
image && (React.createElement(Image, { source: typeof image === "string" ? { uri: image } : image, style: {
|
|
9
|
+
marginRight: 12,
|
|
10
|
+
width: subtitle
|
|
11
|
+
? Config.rowMultiLineImageSize
|
|
12
|
+
: Config.rowSingleLineImageSize,
|
|
13
|
+
height: subtitle
|
|
14
|
+
? Config.rowMultiLineImageSize
|
|
15
|
+
: Config.rowSingleLineImageSize,
|
|
16
|
+
} })),
|
|
17
|
+
React.createElement(View, { style: styles.textContainer },
|
|
18
|
+
React.createElement(Text, { style: [
|
|
19
|
+
titleTypeStyle,
|
|
20
|
+
{
|
|
21
|
+
color: titleColor,
|
|
22
|
+
},
|
|
23
|
+
], numberOfLines: 1 }, title),
|
|
24
|
+
subtitle ? (React.createElement(Text, { style: [
|
|
25
|
+
subtitleTypeStyle,
|
|
26
|
+
{
|
|
27
|
+
color: subtitleColor,
|
|
28
|
+
marginTop: 4,
|
|
29
|
+
},
|
|
30
|
+
], numberOfLines: multilineSubtitle ? undefined : 1 }, subtitle)) : null)),
|
|
31
|
+
right && right()));
|
|
32
|
+
};
|
|
33
|
+
const styles = StyleSheet.create({
|
|
34
|
+
leftContainer: {
|
|
35
|
+
flexDirection: "row",
|
|
36
|
+
flex: 1,
|
|
37
|
+
},
|
|
38
|
+
container: {
|
|
39
|
+
flexDirection: "row",
|
|
40
|
+
justifyContent: "space-between",
|
|
41
|
+
alignItems: "center",
|
|
42
|
+
},
|
|
43
|
+
textContainer: {
|
|
44
|
+
flex: 1,
|
|
45
|
+
justifyContent: "center",
|
|
46
|
+
},
|
|
47
|
+
});
|
|
48
|
+
export default withTheme(Row);
|
|
@@ -0,0 +1,108 @@
|
|
|
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);
|
|
@@ -0,0 +1,8 @@
|
|
|
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);
|
|
@@ -0,0 +1,47 @@
|
|
|
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);
|
|
@@ -0,0 +1,12 @@
|
|
|
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);
|
|
@@ -0,0 +1,49 @@
|
|
|
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);
|
|
@@ -0,0 +1,14 @@
|
|
|
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);
|