@draftbit/core 46.10.3-f6ea70.2 → 46.10.3-fb35c9.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.
Files changed (71) hide show
  1. package/lib/commonjs/components/Accordion/AccordionItem.js +4 -23
  2. package/lib/commonjs/components/Checkbox/CheckboxRow.js +6 -23
  3. package/lib/commonjs/components/CircleImage.js +1 -15
  4. package/lib/commonjs/components/DeprecatedButton.js +3 -20
  5. package/lib/commonjs/components/Picker/PickerComponent.web.js +3 -20
  6. package/lib/commonjs/components/RadioButton/RadioButton.js +2 -13
  7. package/lib/commonjs/constants.js +1 -1
  8. package/lib/commonjs/mappings/FieldSearchBarFull.js +1 -3
  9. package/lib/commonjs/mappings/StarRating.js +2 -6
  10. package/lib/module/components/Portal/PortalManager.js +33 -7
  11. package/package.json +3 -3
  12. package/lib/commonjs/components/DeprecatedCardWrapper.js +0 -54
  13. package/lib/commonjs/components/DeprecatedFAB.js +0 -157
  14. package/lib/commonjs/components/ProgressIndicator.js +0 -55
  15. package/lib/commonjs/components/ResizeMode.js +0 -5
  16. package/lib/commonjs/mappings/CardBlock.js +0 -126
  17. package/lib/commonjs/mappings/CardContainer.js +0 -108
  18. package/lib/commonjs/mappings/CardContainerRating.js +0 -130
  19. package/lib/commonjs/mappings/CardContainerShortImage.js +0 -124
  20. package/lib/commonjs/mappings/CardInline.js +0 -59
  21. package/lib/commonjs/mappings/ProgressIndicator.js +0 -188
  22. package/lib/module/components/DeprecatedCardWrapper.js +0 -32
  23. package/lib/module/components/DeprecatedFAB.js +0 -147
  24. package/lib/module/components/ProgressIndicator.js +0 -45
  25. package/lib/module/components/ResizeMode.js +0 -1
  26. package/lib/module/mappings/CardBlock.js +0 -119
  27. package/lib/module/mappings/CardContainer.js +0 -101
  28. package/lib/module/mappings/CardContainerRating.js +0 -123
  29. package/lib/module/mappings/CardContainerShortImage.js +0 -117
  30. package/lib/module/mappings/CardInline.js +0 -52
  31. package/lib/module/mappings/ProgressIndicator.js +0 -181
  32. package/lib/typescript/src/components/DeprecatedCardWrapper.d.ts +0 -15
  33. package/lib/typescript/src/components/DeprecatedCardWrapper.d.ts.map +0 -1
  34. package/lib/typescript/src/components/DeprecatedFAB.d.ts +0 -56
  35. package/lib/typescript/src/components/DeprecatedFAB.d.ts.map +0 -1
  36. package/lib/typescript/src/components/ProgressIndicator.d.ts +0 -24
  37. package/lib/typescript/src/components/ProgressIndicator.d.ts.map +0 -1
  38. package/lib/typescript/src/components/ResizeMode.d.ts +0 -2
  39. package/lib/typescript/src/components/ResizeMode.d.ts.map +0 -1
  40. package/lib/typescript/src/mappings/CardBlock.d.ts +0 -289
  41. package/lib/typescript/src/mappings/CardBlock.d.ts.map +0 -1
  42. package/lib/typescript/src/mappings/CardContainer.d.ts +0 -102
  43. package/lib/typescript/src/mappings/CardContainer.d.ts.map +0 -1
  44. package/lib/typescript/src/mappings/CardContainerRating.d.ts +0 -108
  45. package/lib/typescript/src/mappings/CardContainerRating.d.ts.map +0 -1
  46. package/lib/typescript/src/mappings/CardContainerShortImage.d.ts +0 -139
  47. package/lib/typescript/src/mappings/CardContainerShortImage.d.ts.map +0 -1
  48. package/lib/typescript/src/mappings/CardInline.d.ts +0 -62
  49. package/lib/typescript/src/mappings/CardInline.d.ts.map +0 -1
  50. package/lib/typescript/src/mappings/ProgressIndicator.d.ts +0 -181
  51. package/lib/typescript/src/mappings/ProgressIndicator.d.ts.map +0 -1
  52. package/src/components/DeprecatedCardWrapper.js +0 -18
  53. package/src/components/DeprecatedCardWrapper.tsx +0 -46
  54. package/src/components/DeprecatedFAB.js +0 -114
  55. package/src/components/DeprecatedFAB.tsx +0 -231
  56. package/src/components/ProgressIndicator.js +0 -27
  57. package/src/components/ProgressIndicator.tsx +0 -71
  58. package/src/components/ResizeMode.js +0 -1
  59. package/src/components/ResizeMode.ts +0 -7
  60. package/src/mappings/CardBlock.js +0 -123
  61. package/src/mappings/CardBlock.ts +0 -136
  62. package/src/mappings/CardContainer.js +0 -104
  63. package/src/mappings/CardContainer.ts +0 -116
  64. package/src/mappings/CardContainerRating.js +0 -126
  65. package/src/mappings/CardContainerRating.ts +0 -137
  66. package/src/mappings/CardContainerShortImage.js +0 -120
  67. package/src/mappings/CardContainerShortImage.ts +0 -130
  68. package/src/mappings/CardInline.js +0 -52
  69. package/src/mappings/CardInline.ts +0 -61
  70. package/src/mappings/ProgressIndicator.js +0 -181
  71. package/src/mappings/ProgressIndicator.ts +0 -190
@@ -1 +0,0 @@
1
- {"version":3,"file":"CardInline.d.ts","sourceRoot":"","sources":["../../../../src/mappings/CardInline.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDrB,CAAC"}
@@ -1,181 +0,0 @@
1
- export declare const SEED_DATA: {
2
- name: string;
3
- tag: string;
4
- description: string;
5
- category: string;
6
- stylesPanelSections: string[];
7
- preview_image_url: string;
8
- supports_list_render: boolean;
9
- layout: {};
10
- props: {
11
- numberOfSteps: {
12
- group: string;
13
- label: string;
14
- description: string;
15
- editable: boolean;
16
- required: boolean;
17
- formType: string;
18
- propType: string;
19
- min: number;
20
- max: number;
21
- step: number;
22
- precision: number;
23
- defaultValue: number;
24
- };
25
- currentStep: {
26
- group: string;
27
- label: string;
28
- description: string;
29
- editable: boolean;
30
- required: boolean;
31
- formType: string;
32
- propType: string;
33
- min: number;
34
- max: number;
35
- step: number;
36
- precision: number;
37
- defaultValue: number;
38
- };
39
- stepIndicatorSize: {
40
- group: string;
41
- label: string;
42
- description: string;
43
- editable: boolean;
44
- required: boolean;
45
- formType: string;
46
- propType: string;
47
- min: number;
48
- max: number;
49
- step: number;
50
- precision: number;
51
- defaultValue: number;
52
- };
53
- stepIndicatorLabelFontSize: {
54
- group: string;
55
- label: string;
56
- description: string;
57
- editable: boolean;
58
- required: boolean;
59
- formType: string;
60
- propType: string;
61
- min: number;
62
- max: number;
63
- step: number;
64
- precision: number;
65
- defaultValue: number;
66
- };
67
- currentStepIndicatorLabelFontSize: {
68
- group: string;
69
- label: string;
70
- description: string;
71
- editable: boolean;
72
- required: boolean;
73
- formType: string;
74
- propType: string;
75
- min: number;
76
- max: number;
77
- step: number;
78
- precision: number;
79
- defaultValue: number;
80
- };
81
- unfinishedColor: {
82
- group: string;
83
- label: string;
84
- description: string;
85
- editable: boolean;
86
- required: boolean;
87
- formType: string;
88
- propType: string;
89
- defaultValue: null;
90
- };
91
- finishedColor: {
92
- group: string;
93
- label: string;
94
- description: string;
95
- editable: boolean;
96
- required: boolean;
97
- formType: string;
98
- propType: string;
99
- defaultValue: null;
100
- };
101
- stepNumberUnfinishedColor: {
102
- group: string;
103
- label: string;
104
- description: string;
105
- editable: boolean;
106
- required: boolean;
107
- formType: string;
108
- propType: string;
109
- defaultValue: null;
110
- };
111
- stepNumberFinishedColor: {
112
- group: string;
113
- label: string;
114
- description: string;
115
- editable: boolean;
116
- required: boolean;
117
- formType: string;
118
- propType: string;
119
- defaultValue: null;
120
- };
121
- stepIndicatorCurrentColor: {
122
- group: string;
123
- label: string;
124
- description: string;
125
- editable: boolean;
126
- required: boolean;
127
- formType: string;
128
- propType: string;
129
- defaultValue: null;
130
- };
131
- stepIndicatorLabelCurrentColor: {
132
- group: string;
133
- label: string;
134
- description: string;
135
- editable: boolean;
136
- required: boolean;
137
- formType: string;
138
- propType: string;
139
- defaultValue: null;
140
- };
141
- stepStrokeCurrentColor: {
142
- group: string;
143
- label: string;
144
- description: string;
145
- editable: boolean;
146
- required: boolean;
147
- formType: string;
148
- propType: string;
149
- defaultValue: null;
150
- };
151
- currentStepStrokeWidth: {
152
- group: string;
153
- label: string;
154
- description: string;
155
- editable: boolean;
156
- required: boolean;
157
- formType: string;
158
- propType: string;
159
- min: number;
160
- max: number;
161
- step: number;
162
- precision: number;
163
- defaultValue: number;
164
- };
165
- currentStepIndicatorSize: {
166
- group: string;
167
- label: string;
168
- description: string;
169
- editable: boolean;
170
- required: boolean;
171
- formType: string;
172
- propType: string;
173
- min: number;
174
- max: number;
175
- step: number;
176
- precision: number;
177
- defaultValue: null;
178
- };
179
- };
180
- };
181
- //# sourceMappingURL=ProgressIndicator.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ProgressIndicator.d.ts","sourceRoot":"","sources":["../../../../src/mappings/ProgressIndicator.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqLrB,CAAC"}
@@ -1,18 +0,0 @@
1
- import React from "react";
2
- import { withTheme } from "../theming";
3
- import Touchable from "./Touchable";
4
- const getWidth = (numColumns) => {
5
- switch (numColumns) {
6
- case 1:
7
- return "33%";
8
- case 2:
9
- return "50%";
10
- default:
11
- return "100%";
12
- }
13
- };
14
- const Card = ({ numColumns = 3, children, onPress, style, ...rest }) => {
15
- const width = getWidth(numColumns);
16
- return (React.createElement(Touchable, { disabled: !onPress, onPress: onPress, style: [style, { width }], ...rest }, children));
17
- };
18
- export default withTheme(Card);
@@ -1,46 +0,0 @@
1
- import React from "react";
2
- import { withTheme } from "../theming";
3
- import Touchable from "./Touchable";
4
- import { StyleProp, ViewStyle } from "react-native";
5
- import theme from "../styles/DefaultTheme";
6
-
7
- type Props = {
8
- numColumns?: number;
9
- children?: React.ReactNode;
10
- onPress?: () => void;
11
- style?: StyleProp<ViewStyle>;
12
- theme: typeof theme;
13
- };
14
-
15
- const getWidth = (numColumns: number) => {
16
- switch (numColumns) {
17
- case 1:
18
- return "33%";
19
- case 2:
20
- return "50%";
21
- default:
22
- return "100%";
23
- }
24
- };
25
-
26
- const Card: React.FC<React.PropsWithChildren<Props>> = ({
27
- numColumns = 3,
28
- children,
29
- onPress,
30
- style,
31
- ...rest
32
- }) => {
33
- const width = getWidth(numColumns);
34
- return (
35
- <Touchable
36
- disabled={!onPress}
37
- onPress={onPress}
38
- style={[style, { width }]}
39
- {...rest}
40
- >
41
- {children}
42
- </Touchable>
43
- );
44
- };
45
-
46
- export default withTheme(Card);
@@ -1,114 +0,0 @@
1
- import * as React from "react";
2
- import { ActivityIndicator, View, StyleSheet, Pressable, } from "react-native";
3
- import color from "color";
4
- import Config from "./Config";
5
- import Text from "./Text";
6
- import Elevation from "./Elevation";
7
- import { withTheme } from "../theming";
8
- const FAB = ({ Icon, icon, disabled = false, type = "solid", loading = false, color: colorOverride, label, onPress, elevation = 0, style, theme: { colors, disabledOpacity, roundness, typography }, ...rest }) => {
9
- let backgroundColor, borderColor, textColor, borderWidth;
10
- const buttonColor = colorOverride || colors.primary;
11
- if (type === "standard" || type === "extended" || type === "fixed") {
12
- backgroundColor = buttonColor;
13
- if (disabled) {
14
- textColor = color(colors.surface).alpha(disabledOpacity).rgb().string();
15
- }
16
- else {
17
- textColor = colors.surface;
18
- }
19
- }
20
- else {
21
- backgroundColor = "transparent";
22
- if (disabled) {
23
- textColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
24
- }
25
- else {
26
- textColor = buttonColor;
27
- }
28
- }
29
- if (type === "outline") {
30
- if (disabled) {
31
- borderColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
32
- }
33
- else {
34
- borderColor = buttonColor;
35
- }
36
- borderWidth = StyleSheet.hairlineWidth;
37
- }
38
- else {
39
- borderColor = "transparent";
40
- borderWidth = 0;
41
- }
42
- const buttonStyle = {
43
- backgroundColor,
44
- borderColor,
45
- borderWidth,
46
- borderRadius: roundness,
47
- alignItems: "center",
48
- justifyContent: "center",
49
- };
50
- const buttonStyles = [styles.button, buttonStyle];
51
- const contentStyle = [styles.content];
52
- const textStyle = {
53
- textAlign: "center",
54
- color: textColor,
55
- };
56
- const iconStyle = [
57
- styles.icon,
58
- {
59
- width: Config.buttonIconSize,
60
- },
61
- ];
62
- if (type === "standard" || type === "outline") {
63
- buttonStyle.width = Config.FABSize;
64
- buttonStyle.height = Config.FABSize;
65
- buttonStyle.borderRadius = Config.FABBorderRadius;
66
- contentStyle.push({
67
- width: Config.FABSize,
68
- height: Config.FABSize,
69
- });
70
- }
71
- if (type === "extended" || type === "fixed") {
72
- iconStyle.push({
73
- marginLeft: 16,
74
- marginRight: -8,
75
- });
76
- textStyle.margin = 16;
77
- }
78
- if (type === "fixed") {
79
- buttonStyles.push({
80
- height: Config.FABFixedHeight,
81
- alignSelf: "stretch",
82
- });
83
- }
84
- return (React.createElement(Elevation, { style: [{ elevation }, style] },
85
- React.createElement(Pressable, { ...rest, onPress: onPress, accessibilityState: { disabled }, accessibilityRole: "button", disabled: disabled || loading, style: buttonStyles },
86
- React.createElement(View, { style: styles.content },
87
- icon && loading !== true ? (React.createElement(View, { style: iconStyle },
88
- React.createElement(Icon, { name: icon, size: Config.buttonIconSize, color: textColor }))) : null,
89
- loading ? (React.createElement(ActivityIndicator, { size: "small", color: textColor, style: iconStyle })) : null,
90
- label ? (React.createElement(Text, { numberOfLines: 1, style: [textStyle, typography.button] }, label)) : null))));
91
- };
92
- const styles = StyleSheet.create({
93
- button: {
94
- borderStyle: "solid",
95
- },
96
- content: {
97
- flexDirection: "row",
98
- alignItems: "center",
99
- justifyContent: "center",
100
- },
101
- icon: {
102
- alignItems: "center",
103
- justifyContent: "center",
104
- width: Config.buttonIconSize,
105
- },
106
- fixed: {
107
- left: 0,
108
- right: 0,
109
- bottom: 0,
110
- height: 64,
111
- borderRadius: 0,
112
- },
113
- });
114
- export default withTheme(FAB);
@@ -1,231 +0,0 @@
1
- import * as React from "react";
2
- import {
3
- ActivityIndicator,
4
- View,
5
- StyleSheet,
6
- StyleProp,
7
- ViewStyle,
8
- TextStyle,
9
- Pressable,
10
- PressableProps,
11
- } from "react-native";
12
- import color from "color";
13
- import Config from "./Config";
14
- import Text from "./Text";
15
- import Elevation from "./Elevation";
16
- import { withTheme } from "../theming";
17
-
18
- import type { Theme } from "../styles/DefaultTheme";
19
- import type { IconSlot } from "../interfaces/Icon";
20
-
21
- /**
22
- * A floating action button represents the primary action in an application.
23
- *
24
- * <div class="screenshots">
25
- * <img src="screenshots/fab-1.png" />
26
- * <img src="screenshots/fab-2.png" />
27
- * </div>
28
- *
29
- * ## Usage
30
- * ```js
31
- * import * as React from 'react';
32
- * import { StyleSheet } from 'react-native';
33
- * import { FAB } from '@draftbit/ui';
34
- *
35
- * const MyComponent = () => (
36
- * <FAB
37
- * style={styles.fab}
38
- * type="outline"
39
- * icon="add"
40
- * onPress={() => console.log('Pressed')}
41
- * />
42
- * );
43
- *
44
- * const styles = StyleSheet.create({
45
- * fab: {
46
- * position: 'absolute',
47
- * margin: 16,
48
- * right: 0,
49
- * bottom: 0,
50
- * },
51
- * })
52
- *
53
- * export default MyComponent;
54
- * ```
55
- */
56
-
57
- type Props = {
58
- disabled?: boolean;
59
- type?: "solid" | "extended" | "outline" | "fixed" | "standard";
60
- loading?: boolean;
61
- icon?: string;
62
- color?: string;
63
- label?: string;
64
- onPress: () => void;
65
- elevation?: number;
66
- theme: Theme;
67
- style?: StyleProp<ViewStyle>;
68
- } & PressableProps &
69
- IconSlot;
70
-
71
- const FAB: React.FC<React.PropsWithChildren<Props>> = ({
72
- Icon,
73
- icon,
74
- disabled = false,
75
- type = "solid",
76
- loading = false,
77
- color: colorOverride,
78
- label,
79
- onPress,
80
- elevation = 0,
81
- style,
82
- theme: { colors, disabledOpacity, roundness, typography },
83
- ...rest
84
- }) => {
85
- let backgroundColor, borderColor, textColor, borderWidth;
86
- const buttonColor = colorOverride || colors.primary;
87
-
88
- if (type === "standard" || type === "extended" || type === "fixed") {
89
- backgroundColor = buttonColor;
90
-
91
- if (disabled) {
92
- textColor = color(colors.surface).alpha(disabledOpacity).rgb().string();
93
- } else {
94
- textColor = colors.surface;
95
- }
96
- } else {
97
- backgroundColor = "transparent";
98
-
99
- if (disabled) {
100
- textColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
101
- } else {
102
- textColor = buttonColor;
103
- }
104
- }
105
-
106
- if (type === "outline") {
107
- if (disabled) {
108
- borderColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
109
- } else {
110
- borderColor = buttonColor;
111
- }
112
- borderWidth = StyleSheet.hairlineWidth;
113
- } else {
114
- borderColor = "transparent";
115
- borderWidth = 0;
116
- }
117
-
118
- const buttonStyle: StyleProp<ViewStyle> = {
119
- backgroundColor,
120
- borderColor,
121
- borderWidth,
122
- borderRadius: roundness,
123
- alignItems: "center",
124
- justifyContent: "center",
125
- };
126
-
127
- const buttonStyles: StyleProp<ViewStyle>[] = [styles.button, buttonStyle];
128
-
129
- const contentStyle: StyleProp<ViewStyle>[] = [styles.content];
130
-
131
- const textStyle: StyleProp<TextStyle> = {
132
- textAlign: "center",
133
- color: textColor,
134
- };
135
-
136
- const iconStyle: StyleProp<ViewStyle>[] = [
137
- styles.icon,
138
- {
139
- width: Config.buttonIconSize,
140
- },
141
- ];
142
-
143
- if (type === "standard" || type === "outline") {
144
- buttonStyle.width = Config.FABSize;
145
- buttonStyle.height = Config.FABSize;
146
- buttonStyle.borderRadius = Config.FABBorderRadius;
147
-
148
- contentStyle.push({
149
- width: Config.FABSize,
150
- height: Config.FABSize,
151
- });
152
- }
153
-
154
- if (type === "extended" || type === "fixed") {
155
- iconStyle.push({
156
- marginLeft: 16,
157
- marginRight: -8,
158
- });
159
-
160
- textStyle.margin = 16;
161
- }
162
-
163
- if (type === "fixed") {
164
- buttonStyles.push({
165
- height: Config.FABFixedHeight,
166
- alignSelf: "stretch",
167
- });
168
- }
169
-
170
- return (
171
- <Elevation style={[{ elevation }, style]}>
172
- <Pressable
173
- {...rest}
174
- onPress={onPress}
175
- accessibilityState={{ disabled }}
176
- accessibilityRole="button"
177
- disabled={disabled || loading}
178
- style={buttonStyles}
179
- >
180
- <View style={styles.content}>
181
- {icon && loading !== true ? (
182
- <View style={iconStyle}>
183
- <Icon
184
- name={icon}
185
- size={Config.buttonIconSize}
186
- color={textColor}
187
- />
188
- </View>
189
- ) : null}
190
- {loading ? (
191
- <ActivityIndicator
192
- size="small"
193
- color={textColor}
194
- style={iconStyle}
195
- />
196
- ) : null}
197
- {label ? (
198
- <Text numberOfLines={1} style={[textStyle, typography.button]}>
199
- {label}
200
- </Text>
201
- ) : null}
202
- </View>
203
- </Pressable>
204
- </Elevation>
205
- );
206
- };
207
-
208
- const styles = StyleSheet.create({
209
- button: {
210
- borderStyle: "solid",
211
- },
212
- content: {
213
- flexDirection: "row",
214
- alignItems: "center",
215
- justifyContent: "center",
216
- },
217
- icon: {
218
- alignItems: "center",
219
- justifyContent: "center",
220
- width: Config.buttonIconSize,
221
- },
222
- fixed: {
223
- left: 0,
224
- right: 0,
225
- bottom: 0,
226
- height: 64,
227
- borderRadius: 0,
228
- },
229
- });
230
-
231
- export default withTheme(FAB);
@@ -1,27 +0,0 @@
1
- import * as React from "react";
2
- import StepIndicator from "./StepIndicator";
3
- import { withTheme } from "../theming";
4
- const ProgressIndicator = ({ numberOfSteps, currentStep, currentStepStrokeWidth = 3, stepStrokeCurrentColor = "primary", stepIndicatorSize, currentStepIndicatorSize, stepIndicatorCurrentColor, stepIndicatorLabelCurrentColor, stepIndicatorLabelFontSize = 12, stepNumberFinishedColor = "strongInverse", stepNumberUnfinishedColor = "primary", unfinishedColor = "light", finishedColor = "primary", theme, }) => {
5
- const currentPosition = currentStep - 1;
6
- return (React.createElement(StepIndicator, { stepCount: numberOfSteps, currentPosition: currentPosition, customStyles: {
7
- stepIndicatorSize,
8
- currentStepIndicatorSize: currentStepIndicatorSize
9
- ? currentStepIndicatorSize
10
- : stepIndicatorSize,
11
- stepStrokeFinishedColor: finishedColor,
12
- stepStrokeUnFinishedColor: unfinishedColor,
13
- separatorFinishedColor: finishedColor,
14
- separatorUnFinishedColor: unfinishedColor,
15
- stepIndicatorFinishedColor: finishedColor,
16
- stepIndicatorUnFinishedColor: unfinishedColor,
17
- currentStepStrokeWidth,
18
- stepStrokeCurrentColor: stepStrokeCurrentColor || stepIndicatorCurrentColor,
19
- stepIndicatorLabelUnFinishedColor: stepNumberUnfinishedColor,
20
- stepIndicatorLabelFinishedColor: stepNumberFinishedColor,
21
- stepIndicatorCurrentColor: stepIndicatorCurrentColor || unfinishedColor,
22
- stepIndicatorLabelCurrentColor: stepIndicatorLabelCurrentColor || stepNumberUnfinishedColor,
23
- stepIndicatorLabelFontSize,
24
- labelFontFamily: theme.typography.body1.fontFamily,
25
- } }));
26
- };
27
- export default withTheme(ProgressIndicator);
@@ -1,71 +0,0 @@
1
- import * as React from "react";
2
- import StepIndicator from "./StepIndicator";
3
- import { withTheme } from "../theming";
4
- import themeT from "../styles/DefaultTheme";
5
- import { colorTypes } from "@draftbit/types";
6
-
7
- type Props = {
8
- numberOfSteps: number;
9
- currentStep: number;
10
- currentStepStrokeWidth?: number;
11
- stepStrokeCurrentColor?: colorTypes;
12
- stepIndicatorSize?: number;
13
- currentStepIndicatorSize?: number;
14
- stepIndicatorCurrentColor?: colorTypes;
15
- stepIndicatorLabelCurrentColor?: colorTypes;
16
- stepIndicatorLabelFontSize?: number;
17
- stepNumberFinishedColor?: colorTypes;
18
- stepNumberUnfinishedColor?: colorTypes;
19
- unfinishedColor?: colorTypes;
20
- finishedColor?: colorTypes;
21
- theme: typeof themeT;
22
- };
23
-
24
- const ProgressIndicator: React.FC<React.PropsWithChildren<Props>> = ({
25
- numberOfSteps,
26
- currentStep,
27
- currentStepStrokeWidth = 3,
28
- stepStrokeCurrentColor = "primary",
29
- stepIndicatorSize,
30
- currentStepIndicatorSize,
31
- stepIndicatorCurrentColor,
32
- stepIndicatorLabelCurrentColor,
33
- stepIndicatorLabelFontSize = 12,
34
- stepNumberFinishedColor = "strongInverse",
35
- stepNumberUnfinishedColor = "primary",
36
- unfinishedColor = "light",
37
- finishedColor = "primary",
38
- theme,
39
- }) => {
40
- const currentPosition = currentStep - 1;
41
- return (
42
- <StepIndicator
43
- stepCount={numberOfSteps}
44
- currentPosition={currentPosition}
45
- customStyles={{
46
- stepIndicatorSize,
47
- currentStepIndicatorSize: currentStepIndicatorSize
48
- ? currentStepIndicatorSize
49
- : stepIndicatorSize,
50
- stepStrokeFinishedColor: finishedColor,
51
- stepStrokeUnFinishedColor: unfinishedColor,
52
- separatorFinishedColor: finishedColor,
53
- separatorUnFinishedColor: unfinishedColor,
54
- stepIndicatorFinishedColor: finishedColor,
55
- stepIndicatorUnFinishedColor: unfinishedColor,
56
- currentStepStrokeWidth,
57
- stepStrokeCurrentColor:
58
- stepStrokeCurrentColor || stepIndicatorCurrentColor,
59
- stepIndicatorLabelUnFinishedColor: stepNumberUnfinishedColor,
60
- stepIndicatorLabelFinishedColor: stepNumberFinishedColor,
61
- stepIndicatorCurrentColor: stepIndicatorCurrentColor || unfinishedColor,
62
- stepIndicatorLabelCurrentColor:
63
- stepIndicatorLabelCurrentColor || stepNumberUnfinishedColor,
64
- stepIndicatorLabelFontSize,
65
- labelFontFamily: theme.typography.body1.fontFamily,
66
- }}
67
- />
68
- );
69
- };
70
-
71
- export default withTheme(ProgressIndicator);
@@ -1 +0,0 @@
1
- export {};