@draftbit/core 46.4.4-4b8f38.2 → 46.4.4-5206b0.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/Provider.js +9 -0
- package/lib/commonjs/components/Accordion/AccordionGroup.js +14 -0
- package/lib/commonjs/components/Accordion/AccordionItem.js +13 -0
- package/lib/commonjs/components/Accordion/index.js +3 -0
- package/lib/commonjs/components/ActionSheet/ActionSheet.js +9 -0
- package/lib/commonjs/components/ActionSheet/ActionSheetCancel.js +5 -0
- package/lib/commonjs/components/ActionSheet/ActionSheetItem.js +7 -0
- package/lib/commonjs/components/ActionSheet/index.js +4 -0
- package/lib/commonjs/components/AnimatedCircularProgress.js +15 -0
- package/lib/commonjs/components/AspectRatio.js +10 -0
- package/lib/commonjs/components/AvatarEdit.js +12 -0
- package/lib/commonjs/components/Banner.js +23 -9
- package/lib/commonjs/components/Button.js +19 -2
- package/lib/commonjs/components/Card.js +14 -0
- package/lib/commonjs/components/CardBlock.js +15 -0
- package/lib/commonjs/components/CardContainer.js +18 -0
- package/lib/commonjs/components/CardContainerRating.js +20 -2
- package/lib/commonjs/components/CardContainerShortImage.js +12 -0
- package/lib/commonjs/components/CardInline.js +14 -1
- package/lib/commonjs/components/Carousel.js +21 -3
- package/lib/commonjs/components/Checkbox/Checkbox.js +18 -3
- package/lib/commonjs/components/Checkbox/CheckboxGroup.js +11 -0
- package/lib/commonjs/components/Checkbox/CheckboxGroupRow.js +20 -0
- package/lib/commonjs/components/Checkbox/CheckboxRow.js +24 -3
- package/lib/commonjs/components/Checkbox/context.js +5 -0
- package/lib/commonjs/components/Checkbox/index.js +4 -0
- package/lib/commonjs/components/CircleImage.js +9 -0
- package/lib/commonjs/components/CircularProgress.js +13 -3
- package/lib/commonjs/components/Config.js +13 -5
- package/lib/commonjs/components/Container.js +11 -0
- package/lib/commonjs/components/DatePicker/DatePicker.js +48 -16
- package/lib/commonjs/components/DatePicker/DatePickerComponent.js +7 -0
- package/lib/commonjs/components/DatePicker/DatePickerComponent.web.js +10 -0
- package/lib/commonjs/components/DeprecatedButton.js +23 -0
- package/lib/commonjs/components/DeprecatedCardWrapper.js +11 -0
- package/lib/commonjs/components/DeprecatedFAB.js +26 -0
- package/lib/commonjs/components/Divider.js +9 -0
- package/lib/commonjs/components/Elevation.js +11 -0
- package/lib/commonjs/components/FAB.js +10 -0
- package/lib/commonjs/components/FieldSearchBarFull.js +18 -0
- package/lib/commonjs/components/FormRow.js +10 -0
- package/lib/commonjs/components/Header.js +13 -0
- package/lib/commonjs/components/HeaderLarge.js +9 -0
- package/lib/commonjs/components/HeaderMedium.js +9 -0
- package/lib/commonjs/components/HeaderOverline.js +9 -0
- package/lib/commonjs/components/IconButton.js +10 -0
- package/lib/commonjs/components/Image.js +17 -0
- package/lib/commonjs/components/Layout.js +12 -2
- package/lib/commonjs/components/NumberInput.js +21 -8
- package/lib/commonjs/components/Picker/Picker.js +42 -9
- package/lib/commonjs/components/Picker/PickerComponent.android.js +23 -6
- package/lib/commonjs/components/Picker/PickerComponent.ios.js +27 -8
- package/lib/commonjs/components/Picker/PickerComponent.web.js +23 -6
- package/lib/commonjs/components/Portal/Portal.js +14 -4
- package/lib/commonjs/components/Portal/PortalConsumer.js +15 -5
- package/lib/commonjs/components/Portal/PortalHost.js +31 -4
- package/lib/commonjs/components/Portal/PortalManager.js +34 -14
- package/lib/commonjs/components/ProgressBar.js +25 -5
- package/lib/commonjs/components/ProgressCircle.js +10 -0
- package/lib/commonjs/components/ProgressIndicator.js +9 -0
- package/lib/commonjs/components/RadioButton/RadioButton.js +14 -1
- package/lib/commonjs/components/RadioButton/RadioButtonFieldGroup.js +10 -0
- package/lib/commonjs/components/RadioButton/RadioButtonGroup.js +14 -0
- package/lib/commonjs/components/RadioButton/RadioButtonRow.js +21 -1
- package/lib/commonjs/components/RadioButton/context.js +5 -0
- package/lib/commonjs/components/RadioButton/index.js +5 -0
- package/lib/commonjs/components/Row.js +11 -0
- package/lib/commonjs/components/RowBodyIcon.js +10 -0
- package/lib/commonjs/components/RowHeadlineImageCaption.js +11 -2
- package/lib/commonjs/components/RowHeadlineImageIcon.js +10 -0
- package/lib/commonjs/components/SVG.js +9 -0
- package/lib/commonjs/components/ScreenContainer.js +14 -0
- package/lib/commonjs/components/Slider.js +21 -0
- package/lib/commonjs/components/StarRating.js +10 -0
- package/lib/commonjs/components/StepIndicator.js +39 -5
- package/lib/commonjs/components/Stepper.js +18 -4
- package/lib/commonjs/components/Surface.js +14 -0
- package/lib/commonjs/components/Swiper/Swiper.js +8 -0
- package/lib/commonjs/components/Swiper/SwiperItem.js +6 -0
- package/lib/commonjs/components/Swiper/index.js +3 -0
- package/lib/commonjs/components/Switch.js +18 -5
- package/lib/commonjs/components/Text.js +18 -3
- package/lib/commonjs/components/TextField.js +62 -12
- package/lib/commonjs/components/ToggleButton.js +14 -0
- package/lib/commonjs/components/Touchable.js +5 -0
- package/lib/commonjs/components/Touchable.web.js +2 -0
- package/lib/commonjs/components/Typography.js +5 -0
- package/lib/commonjs/components/useAuthState.js +9 -0
- package/lib/commonjs/constants.js +5 -1
- package/lib/commonjs/hooks.js +7 -4
- package/lib/commonjs/index.js +52 -0
- package/lib/commonjs/interfaces/Icon.js +5 -3
- package/lib/commonjs/mappings/Accordion.js +2 -0
- package/lib/commonjs/mappings/AccordionItem.js +2 -0
- package/lib/commonjs/mappings/ActionSheet.js +2 -0
- package/lib/commonjs/mappings/ActionSheetCancel.js +2 -0
- package/lib/commonjs/mappings/ActionSheetItem.js +2 -0
- package/lib/commonjs/mappings/ActivityIndicator.js +2 -0
- package/lib/commonjs/mappings/AudioPlayer.js +2 -0
- package/lib/commonjs/mappings/AvatarEdit.js +2 -0
- package/lib/commonjs/mappings/Banner.js +2 -0
- package/lib/commonjs/mappings/BlurView.js +2 -0
- package/lib/commonjs/mappings/Button.js +5 -6
- package/lib/commonjs/mappings/Card.js +4 -3
- package/lib/commonjs/mappings/CardBlock.js +5 -6
- package/lib/commonjs/mappings/CardContainer.js +7 -5
- package/lib/commonjs/mappings/CardContainerRating.js +4 -4
- package/lib/commonjs/mappings/CardContainerShortImage.js +2 -0
- package/lib/commonjs/mappings/CardInline.js +2 -0
- package/lib/commonjs/mappings/Carousel.js +2 -0
- package/lib/commonjs/mappings/Checkbox.js +2 -0
- package/lib/commonjs/mappings/CheckboxGroup.js +2 -0
- package/lib/commonjs/mappings/CheckboxRow.js +2 -0
- package/lib/commonjs/mappings/CircleImage.js +2 -0
- package/lib/commonjs/mappings/Container.js +2 -0
- package/lib/commonjs/mappings/CustomCode.js +2 -0
- package/lib/commonjs/mappings/DatePicker.js +4 -4
- package/lib/commonjs/mappings/Divider.js +2 -0
- package/lib/commonjs/mappings/FAB.js +2 -0
- package/lib/commonjs/mappings/Fetch.js +2 -0
- package/lib/commonjs/mappings/FieldSearchBarFull.js +3 -2
- package/lib/commonjs/mappings/FlashList.js +2 -0
- package/lib/commonjs/mappings/FlatList.js +2 -0
- package/lib/commonjs/mappings/HeaderLarge.js +2 -0
- package/lib/commonjs/mappings/HeaderMedium.js +2 -0
- package/lib/commonjs/mappings/HeaderOverline.js +2 -0
- package/lib/commonjs/mappings/Icon.js +3 -2
- package/lib/commonjs/mappings/IconButton.js +2 -0
- package/lib/commonjs/mappings/Image.js +2 -0
- package/lib/commonjs/mappings/ImageBackground.js +2 -0
- package/lib/commonjs/mappings/KeyboardAvoidingView.js +2 -0
- package/lib/commonjs/mappings/KeyboardAwareScrollView.js +2 -0
- package/lib/commonjs/mappings/Layout.js +2 -0
- package/lib/commonjs/mappings/LinearGradient.js +2 -0
- package/lib/commonjs/mappings/MapCallout.js +2 -0
- package/lib/commonjs/mappings/MapMarker.js +2 -0
- package/lib/commonjs/mappings/MapView.js +2 -0
- package/lib/commonjs/mappings/Modal.js +2 -0
- package/lib/commonjs/mappings/NumberInput.js +4 -4
- package/lib/commonjs/mappings/Picker.js +4 -4
- package/lib/commonjs/mappings/ProgressBar.js +2 -0
- package/lib/commonjs/mappings/ProgressCircle.js +2 -0
- package/lib/commonjs/mappings/ProgressIndicator.js +2 -0
- package/lib/commonjs/mappings/RadioButton.js +2 -0
- package/lib/commonjs/mappings/RadioButtonGroup.js +2 -0
- package/lib/commonjs/mappings/RadioButtonRow.js +2 -0
- package/lib/commonjs/mappings/RowBodyIcon.js +2 -0
- package/lib/commonjs/mappings/RowHeadlineImageCaption.js +2 -0
- package/lib/commonjs/mappings/RowHeadlineImageIcon.js +8 -12
- package/lib/commonjs/mappings/SVG.js +2 -0
- package/lib/commonjs/mappings/SafeAreaView.js +2 -0
- package/lib/commonjs/mappings/ScrollView.js +2 -0
- package/lib/commonjs/mappings/Slider.js +2 -0
- package/lib/commonjs/mappings/StarRating.js +3 -1
- package/lib/commonjs/mappings/Stepper.js +2 -0
- package/lib/commonjs/mappings/Surface.js +2 -0
- package/lib/commonjs/mappings/Swiper.js +2 -0
- package/lib/commonjs/mappings/SwiperItem.js +2 -0
- package/lib/commonjs/mappings/Switch.js +2 -0
- package/lib/commonjs/mappings/Text.js +5 -5
- package/lib/commonjs/mappings/TextArea.js +3 -2
- package/lib/commonjs/mappings/TextField.js +8 -7
- package/lib/commonjs/mappings/TextInput.js +3 -2
- package/lib/commonjs/mappings/ToggleButton.js +2 -0
- package/lib/commonjs/mappings/Touchable.js +2 -0
- package/lib/commonjs/mappings/Video.js +2 -0
- package/lib/commonjs/mappings/View.js +2 -0
- package/lib/commonjs/mappings/WebView.js +2 -0
- package/lib/commonjs/styles/DarkTheme.js +6 -5
- package/lib/commonjs/styles/DefaultTheme.js +17 -26
- package/lib/commonjs/styles/fonts.js +5 -3
- package/lib/commonjs/styles/overlay.js +14 -5
- package/lib/commonjs/styles/shadow.js +9 -0
- package/lib/commonjs/theming.js +4 -0
- package/lib/commonjs/utilities.js +14 -2
- package/lib/module/Provider.js +1 -0
- package/lib/module/components/Accordion/AccordionGroup.js +4 -0
- package/lib/module/components/Accordion/AccordionItem.js +3 -0
- package/lib/module/components/ActionSheet/ActionSheet.js +2 -0
- package/lib/module/components/ActionSheet/ActionSheetCancel.js +2 -0
- package/lib/module/components/ActionSheet/ActionSheetItem.js +2 -0
- package/lib/module/components/AnimatedCircularProgress.js +6 -0
- package/lib/module/components/AspectRatio.js +6 -0
- package/lib/module/components/AvatarEdit.js +3 -0
- package/lib/module/components/Banner.js +10 -9
- package/lib/module/components/Button.js +10 -2
- package/lib/module/components/Card.js +2 -0
- package/lib/module/components/CardBlock.js +6 -0
- package/lib/module/components/CardContainer.js +7 -0
- package/lib/module/components/CardContainerRating.js +8 -2
- package/lib/module/components/CardContainerShortImage.js +3 -0
- package/lib/module/components/CardInline.js +2 -0
- package/lib/module/components/Carousel.js +9 -3
- package/lib/module/components/Checkbox/Checkbox.js +9 -3
- package/lib/module/components/Checkbox/CheckboxGroup.js +5 -0
- package/lib/module/components/Checkbox/CheckboxGroupRow.js +8 -0
- package/lib/module/components/Checkbox/CheckboxRow.js +11 -3
- package/lib/module/components/Checkbox/context.js +2 -0
- package/lib/module/components/CircleImage.js +3 -0
- package/lib/module/components/CircularProgress.js +9 -3
- package/lib/module/components/Config.js +11 -5
- package/lib/module/components/Container.js +3 -0
- package/lib/module/components/DatePicker/DatePicker.js +33 -16
- package/lib/module/components/DatePicker/DatePickerComponent.js +2 -0
- package/lib/module/components/DatePicker/DatePickerComponent.web.js +2 -0
- package/lib/module/components/DeprecatedButton.js +9 -0
- package/lib/module/components/DeprecatedCardWrapper.js +6 -0
- package/lib/module/components/DeprecatedFAB.js +13 -0
- package/lib/module/components/Divider.js +3 -0
- package/lib/module/components/Elevation.js +3 -0
- package/lib/module/components/FAB.js +3 -0
- package/lib/module/components/FieldSearchBarFull.js +9 -0
- package/lib/module/components/FormRow.js +1 -0
- package/lib/module/components/Header.js +2 -0
- package/lib/module/components/HeaderLarge.js +2 -0
- package/lib/module/components/HeaderMedium.js +2 -0
- package/lib/module/components/HeaderOverline.js +2 -0
- package/lib/module/components/IconButton.js +3 -0
- package/lib/module/components/Image.js +10 -0
- package/lib/module/components/Layout.js +3 -4
- package/lib/module/components/NumberInput.js +16 -8
- package/lib/module/components/Picker/Picker.js +25 -8
- package/lib/module/components/Picker/PickerComponent.android.js +10 -6
- package/lib/module/components/Picker/PickerComponent.ios.js +11 -8
- package/lib/module/components/Picker/PickerComponent.web.js +10 -6
- package/lib/module/components/Portal/Portal.js +6 -4
- package/lib/module/components/Portal/PortalConsumer.js +10 -5
- package/lib/module/components/Portal/PortalHost.js +22 -4
- package/lib/module/components/Portal/PortalManager.js +14 -7
- package/lib/module/components/ProgressBar.js +17 -5
- package/lib/module/components/ProgressCircle.js +2 -0
- package/lib/module/components/ProgressIndicator.js +2 -0
- package/lib/module/components/RadioButton/RadioButton.js +6 -1
- package/lib/module/components/RadioButton/RadioButtonFieldGroup.js +3 -0
- package/lib/module/components/RadioButton/RadioButtonGroup.js +7 -0
- package/lib/module/components/RadioButton/RadioButtonRow.js +9 -1
- package/lib/module/components/RadioButton/context.js +2 -0
- package/lib/module/components/Row.js +2 -0
- package/lib/module/components/RowBodyIcon.js +2 -0
- package/lib/module/components/RowHeadlineImageCaption.js +3 -2
- package/lib/module/components/RowHeadlineImageIcon.js +2 -0
- package/lib/module/components/SVG.js +2 -0
- package/lib/module/components/ScreenContainer.js +6 -0
- package/lib/module/components/Slider.js +10 -0
- package/lib/module/components/StarRating.js +3 -0
- package/lib/module/components/StepIndicator.js +29 -5
- package/lib/module/components/Stepper.js +9 -6
- package/lib/module/components/Surface.js +5 -0
- package/lib/module/components/Swiper/Swiper.js +4 -0
- package/lib/module/components/Swiper/SwiperItem.js +2 -0
- package/lib/module/components/Switch.js +7 -5
- package/lib/module/components/Text.js +10 -3
- package/lib/module/components/TextField.js +50 -12
- package/lib/module/components/ToggleButton.js +5 -0
- package/lib/module/components/Touchable.js +1 -0
- package/lib/module/components/useAuthState.js +4 -0
- package/lib/module/constants.js +1 -2
- package/lib/module/hooks.js +2 -4
- package/lib/module/index.js +2 -4
- package/lib/module/interfaces/Icon.js +1 -2
- package/lib/module/mappings/Button.js +3 -6
- package/lib/module/mappings/Card.js +2 -3
- package/lib/module/mappings/CardBlock.js +3 -6
- package/lib/module/mappings/CardContainer.js +5 -5
- package/lib/module/mappings/CardContainerRating.js +2 -4
- package/lib/module/mappings/DatePicker.js +2 -4
- package/lib/module/mappings/Fetch.js +1 -0
- package/lib/module/mappings/FieldSearchBarFull.js +1 -2
- package/lib/module/mappings/Icon.js +1 -2
- package/lib/module/mappings/NumberInput.js +2 -4
- package/lib/module/mappings/Picker.js +2 -4
- package/lib/module/mappings/RowHeadlineImageIcon.js +6 -12
- package/lib/module/mappings/StarRating.js +1 -1
- package/lib/module/mappings/Text.js +3 -5
- package/lib/module/mappings/TextArea.js +1 -2
- package/lib/module/mappings/TextField.js +6 -7
- package/lib/module/mappings/TextInput.js +1 -2
- package/lib/module/styles/DarkTheme.js +2 -4
- package/lib/module/styles/DefaultTheme.js +13 -26
- package/lib/module/styles/fonts.js +1 -2
- package/lib/module/styles/overlay.js +10 -4
- package/lib/module/styles/shadow.js +6 -0
- package/lib/module/utilities.js +5 -2
- package/package.json +3 -3
- package/src/components/Picker/Picker.js +1 -1
- package/src/components/Picker/Picker.tsx +2 -2
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
function _defineProperty(obj, key, value) {
|
|
2
|
-
|
|
3
|
-
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
1
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
2
|
+
|
|
4
3
|
// @ts-nocheck
|
|
5
4
|
import React, { Component } from "react";
|
|
6
5
|
import { View, Text, StyleSheet, Animated, TouchableWithoutFeedback } from "react-native";
|
|
@@ -12,12 +11,14 @@ const STEP_STATUS = {
|
|
|
12
11
|
export default class StepIndicator extends Component {
|
|
13
12
|
constructor(props) {
|
|
14
13
|
super(props);
|
|
14
|
+
|
|
15
15
|
_defineProperty(this, "renderProgressBarBackground", () => {
|
|
16
16
|
const {
|
|
17
17
|
stepCount,
|
|
18
18
|
direction
|
|
19
19
|
} = this.props;
|
|
20
20
|
let progressBarBackgroundStyle;
|
|
21
|
+
|
|
21
22
|
if (direction === "vertical") {
|
|
22
23
|
progressBarBackgroundStyle = {
|
|
23
24
|
backgroundColor: this.state.customStyles.separatorUnFinishedColor,
|
|
@@ -37,6 +38,7 @@ export default class StepIndicator extends Component {
|
|
|
37
38
|
height: this.state.customStyles.separatorStrokeUnfinishedWidth === 0 ? this.state.customStyles.separatorStrokeWidth : this.state.customStyles.separatorStrokeUnfinishedWidth
|
|
38
39
|
};
|
|
39
40
|
}
|
|
41
|
+
|
|
40
42
|
return /*#__PURE__*/React.createElement(View, {
|
|
41
43
|
onLayout: event => {
|
|
42
44
|
if (direction === "vertical") {
|
|
@@ -56,12 +58,14 @@ export default class StepIndicator extends Component {
|
|
|
56
58
|
style: progressBarBackgroundStyle
|
|
57
59
|
});
|
|
58
60
|
});
|
|
61
|
+
|
|
59
62
|
_defineProperty(this, "renderProgressBar", () => {
|
|
60
63
|
const {
|
|
61
64
|
stepCount,
|
|
62
65
|
direction
|
|
63
66
|
} = this.props;
|
|
64
67
|
let progressBarStyle;
|
|
68
|
+
|
|
65
69
|
if (direction === "vertical") {
|
|
66
70
|
progressBarStyle = {
|
|
67
71
|
backgroundColor: this.state.customStyles.separatorFinishedColor,
|
|
@@ -83,16 +87,19 @@ export default class StepIndicator extends Component {
|
|
|
83
87
|
width: this.progressAnim
|
|
84
88
|
};
|
|
85
89
|
}
|
|
90
|
+
|
|
86
91
|
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
87
92
|
style: progressBarStyle
|
|
88
93
|
});
|
|
89
94
|
});
|
|
95
|
+
|
|
90
96
|
_defineProperty(this, "renderStepIndicator", () => {
|
|
91
97
|
let steps = [];
|
|
92
98
|
const {
|
|
93
99
|
stepCount,
|
|
94
100
|
direction
|
|
95
101
|
} = this.props;
|
|
102
|
+
|
|
96
103
|
for (let position = 0; position < stepCount; position++) {
|
|
97
104
|
steps.push( /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
|
|
98
105
|
key: position,
|
|
@@ -105,6 +112,7 @@ export default class StepIndicator extends Component {
|
|
|
105
112
|
}]
|
|
106
113
|
}, this.renderStep(position))));
|
|
107
114
|
}
|
|
115
|
+
|
|
108
116
|
return /*#__PURE__*/React.createElement(View, {
|
|
109
117
|
onLayout: event => this.setState({
|
|
110
118
|
width: event.nativeEvent.layout.width,
|
|
@@ -119,6 +127,7 @@ export default class StepIndicator extends Component {
|
|
|
119
127
|
}]
|
|
120
128
|
}, steps);
|
|
121
129
|
});
|
|
130
|
+
|
|
122
131
|
_defineProperty(this, "renderStepLabels", () => {
|
|
123
132
|
const {
|
|
124
133
|
labels,
|
|
@@ -162,12 +171,14 @@ export default class StepIndicator extends Component {
|
|
|
162
171
|
}]
|
|
163
172
|
}, labelViews);
|
|
164
173
|
});
|
|
174
|
+
|
|
165
175
|
_defineProperty(this, "renderStep", position => {
|
|
166
176
|
const {
|
|
167
177
|
renderStepIndicator
|
|
168
178
|
} = this.props;
|
|
169
179
|
let stepStyle;
|
|
170
180
|
let indicatorLabelStyle;
|
|
181
|
+
|
|
171
182
|
switch (this.getStepStatus(position)) {
|
|
172
183
|
case STEP_STATUS.CURRENT:
|
|
173
184
|
{
|
|
@@ -185,6 +196,7 @@ export default class StepIndicator extends Component {
|
|
|
185
196
|
};
|
|
186
197
|
break;
|
|
187
198
|
}
|
|
199
|
+
|
|
188
200
|
case STEP_STATUS.FINISHED:
|
|
189
201
|
{
|
|
190
202
|
stepStyle = {
|
|
@@ -201,6 +213,7 @@ export default class StepIndicator extends Component {
|
|
|
201
213
|
};
|
|
202
214
|
break;
|
|
203
215
|
}
|
|
216
|
+
|
|
204
217
|
case STEP_STATUS.UNFINISHED:
|
|
205
218
|
{
|
|
206
219
|
stepStyle = {
|
|
@@ -218,8 +231,10 @@ export default class StepIndicator extends Component {
|
|
|
218
231
|
};
|
|
219
232
|
break;
|
|
220
233
|
}
|
|
234
|
+
|
|
221
235
|
default:
|
|
222
236
|
}
|
|
237
|
+
|
|
223
238
|
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
224
239
|
key: "step-indicator",
|
|
225
240
|
style: [styles.step, stepStyle]
|
|
@@ -228,12 +243,14 @@ export default class StepIndicator extends Component {
|
|
|
228
243
|
stepStatus: this.getStepStatus(position)
|
|
229
244
|
}) : /*#__PURE__*/React.createElement(Text, {
|
|
230
245
|
style: indicatorLabelStyle
|
|
231
|
-
},
|
|
246
|
+
}, "".concat(position + 1)));
|
|
232
247
|
});
|
|
248
|
+
|
|
233
249
|
_defineProperty(this, "getStepStatus", stepPosition => {
|
|
234
250
|
const {
|
|
235
251
|
currentPosition
|
|
236
252
|
} = this.props;
|
|
253
|
+
|
|
237
254
|
if (stepPosition === currentPosition) {
|
|
238
255
|
return STEP_STATUS.CURRENT;
|
|
239
256
|
} else if (stepPosition < currentPosition) {
|
|
@@ -242,13 +259,16 @@ export default class StepIndicator extends Component {
|
|
|
242
259
|
return STEP_STATUS.UNFINISHED;
|
|
243
260
|
}
|
|
244
261
|
});
|
|
262
|
+
|
|
245
263
|
_defineProperty(this, "onCurrentPositionChanged", position => {
|
|
246
264
|
let {
|
|
247
265
|
stepCount
|
|
248
266
|
} = this.props;
|
|
267
|
+
|
|
249
268
|
if (position > stepCount - 1) {
|
|
250
269
|
position = stepCount - 1;
|
|
251
270
|
}
|
|
271
|
+
|
|
252
272
|
const animateToPosition = this.state.progressBarSize / (stepCount - 1) * position;
|
|
253
273
|
this.sizeAnim.setValue(this.state.customStyles.stepIndicatorSize);
|
|
254
274
|
this.borderRadiusAnim.setValue(this.state.customStyles.stepIndicatorSize / 2);
|
|
@@ -263,6 +283,7 @@ export default class StepIndicator extends Component {
|
|
|
263
283
|
duration: 100
|
|
264
284
|
})])]).start();
|
|
265
285
|
});
|
|
286
|
+
|
|
266
287
|
const defaultStyles = {
|
|
267
288
|
stepIndicatorSize: 30,
|
|
268
289
|
currentStepIndicatorSize: 40,
|
|
@@ -300,11 +321,13 @@ export default class StepIndicator extends Component {
|
|
|
300
321
|
this.sizeAnim = new Animated.Value(this.state.customStyles.stepIndicatorSize);
|
|
301
322
|
this.borderRadiusAnim = new Animated.Value(this.state.customStyles.stepIndicatorSize / 2);
|
|
302
323
|
}
|
|
324
|
+
|
|
303
325
|
stepPressed(position) {
|
|
304
326
|
if (this.props.onPress) {
|
|
305
327
|
this.props.onPress(position);
|
|
306
328
|
}
|
|
307
329
|
}
|
|
330
|
+
|
|
308
331
|
render() {
|
|
309
332
|
const {
|
|
310
333
|
labels,
|
|
@@ -319,6 +342,7 @@ export default class StepIndicator extends Component {
|
|
|
319
342
|
}]
|
|
320
343
|
}, this.state.width !== 0 && this.renderProgressBarBackground(), this.state.width !== 0 && this.renderProgressBar(), this.renderStepIndicator(), labels && this.renderStepLabels());
|
|
321
344
|
}
|
|
345
|
+
|
|
322
346
|
componentDidUpdate(prevProps) {
|
|
323
347
|
// if (prevProps.customStyles !== this.props.customStyles) {
|
|
324
348
|
// this.setState((state) => ({
|
|
@@ -328,11 +352,11 @@ export default class StepIndicator extends Component {
|
|
|
328
352
|
// ),
|
|
329
353
|
// }));
|
|
330
354
|
// }
|
|
331
|
-
|
|
332
355
|
if (prevProps.currentPosition !== this.props.currentPosition) {
|
|
333
356
|
this.onCurrentPositionChanged(this.props.currentPosition);
|
|
334
357
|
}
|
|
335
358
|
}
|
|
359
|
+
|
|
336
360
|
}
|
|
337
361
|
const styles = StyleSheet.create({
|
|
338
362
|
container: {
|
|
@@ -3,6 +3,7 @@ import { View, Text } from "react-native";
|
|
|
3
3
|
import { isNumber } from "lodash";
|
|
4
4
|
import { withTheme } from "../theming";
|
|
5
5
|
import IconButton from "./IconButton";
|
|
6
|
+
|
|
6
7
|
const Stepper = _ref => {
|
|
7
8
|
let {
|
|
8
9
|
min = -Infinity,
|
|
@@ -20,20 +21,24 @@ const Stepper = _ref => {
|
|
|
20
21
|
},
|
|
21
22
|
Icon
|
|
22
23
|
} = _ref;
|
|
23
|
-
const [value, setValue] = useState(defaultValue
|
|
24
|
+
const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0);
|
|
25
|
+
|
|
24
26
|
const isValidValue = valueArg => valueArg >= min && valueArg <= max;
|
|
27
|
+
|
|
25
28
|
const handlePlusOrMinus = type => {
|
|
26
29
|
const newValue = type === "plus" ? value + 1 : value - 1;
|
|
30
|
+
|
|
27
31
|
if (isValidValue(newValue)) {
|
|
28
32
|
setValue(newValue);
|
|
29
33
|
onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
|
|
30
34
|
}
|
|
31
35
|
};
|
|
36
|
+
|
|
32
37
|
useEffect(() => {
|
|
33
38
|
if (valueProp != null && isNumber(valueProp) && valueProp !== value && isValidValue(valueProp)) {
|
|
34
39
|
setValue(valueProp);
|
|
35
|
-
}
|
|
36
|
-
|
|
40
|
+
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
41
|
+
|
|
37
42
|
}, [valueProp]);
|
|
38
43
|
return /*#__PURE__*/React.createElement(View, {
|
|
39
44
|
style: [{
|
|
@@ -68,7 +73,5 @@ const Stepper = _ref => {
|
|
|
68
73
|
}
|
|
69
74
|
}));
|
|
70
75
|
};
|
|
71
|
-
|
|
72
|
-
}));
|
|
73
|
-
};
|
|
76
|
+
|
|
74
77
|
export default withTheme(Stepper);
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
2
3
|
/* Copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx */
|
|
3
4
|
import * as React from "react";
|
|
4
5
|
import { Animated, StyleSheet } from "react-native";
|
|
5
6
|
import shadow from "../styles/shadow";
|
|
6
7
|
import overlay from "../styles/overlay";
|
|
7
8
|
import { withTheme } from "../theming";
|
|
9
|
+
|
|
8
10
|
const Surface = _ref => {
|
|
9
11
|
let {
|
|
10
12
|
elevation: propElevation,
|
|
@@ -25,6 +27,7 @@ const Surface = _ref => {
|
|
|
25
27
|
} = theme;
|
|
26
28
|
const elevation = propElevation || styleElevation;
|
|
27
29
|
const evalationStyles = elevation ? shadow(elevation) : {};
|
|
30
|
+
|
|
28
31
|
const getBackgroundColor = () => {
|
|
29
32
|
if (backgroundColor) {
|
|
30
33
|
return backgroundColor;
|
|
@@ -34,6 +37,7 @@ const Surface = _ref => {
|
|
|
34
37
|
return colors.surface;
|
|
35
38
|
}
|
|
36
39
|
};
|
|
40
|
+
|
|
37
41
|
return /*#__PURE__*/React.createElement(Animated.View, _extends({}, rest, {
|
|
38
42
|
style: [{
|
|
39
43
|
backgroundColor: getBackgroundColor(),
|
|
@@ -43,4 +47,5 @@ const Surface = _ref => {
|
|
|
43
47
|
}]
|
|
44
48
|
}), children);
|
|
45
49
|
};
|
|
50
|
+
|
|
46
51
|
export default withTheme(Surface);
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { View } from "react-native";
|
|
3
3
|
import SwiperComponent from "react-native-web-swiper";
|
|
4
|
+
|
|
4
5
|
const Swiper = _ref => {
|
|
5
6
|
let {
|
|
6
7
|
vertical = false,
|
|
@@ -55,13 +56,16 @@ const Swiper = _ref => {
|
|
|
55
56
|
item,
|
|
56
57
|
index
|
|
57
58
|
});
|
|
59
|
+
|
|
58
60
|
if (!component) {
|
|
59
61
|
return null;
|
|
60
62
|
}
|
|
63
|
+
|
|
61
64
|
const key = keyExtractor ? keyExtractor(item, index) : index;
|
|
62
65
|
return /*#__PURE__*/React.cloneElement(component, {
|
|
63
66
|
key
|
|
64
67
|
});
|
|
65
68
|
}) : children));
|
|
66
69
|
};
|
|
70
|
+
|
|
67
71
|
export default Swiper;
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
2
3
|
import * as React from "react";
|
|
3
4
|
import { Switch as NativeSwitch } from "react-native";
|
|
4
5
|
import { withTheme } from "../theming";
|
|
5
6
|
import FormRow from "./FormRow";
|
|
6
7
|
import { RowDirection } from "@draftbit/types";
|
|
7
8
|
import { usePrevious } from "../hooks";
|
|
9
|
+
|
|
8
10
|
function Switch(_ref) {
|
|
9
11
|
let {
|
|
10
12
|
value,
|
|
@@ -28,10 +30,9 @@ function Switch(_ref) {
|
|
|
28
30
|
if (value != null && value !== checked) {
|
|
29
31
|
setChecked(value);
|
|
30
32
|
}
|
|
31
|
-
}, [value, checked]);
|
|
32
|
-
|
|
33
|
-
// This special logic is to handle weird APIs like Airtable that return
|
|
33
|
+
}, [value, checked]); // This special logic is to handle weird APIs like Airtable that return
|
|
34
34
|
// true or undefined for a boolean
|
|
35
|
+
|
|
35
36
|
const previousDefaultValue = usePrevious(defaultValue);
|
|
36
37
|
React.useEffect(() => {
|
|
37
38
|
if (defaultValue !== previousDefaultValue) {
|
|
@@ -45,8 +46,7 @@ function Switch(_ref) {
|
|
|
45
46
|
false: inactiveTrackThemeColor,
|
|
46
47
|
true: activeTrackThemeColor
|
|
47
48
|
},
|
|
48
|
-
thumbColor: value ? activeThumbThemeColor : inactiveThumbThemeColor
|
|
49
|
-
// @ts-ignore react-native-web only
|
|
49
|
+
thumbColor: value ? activeThumbThemeColor : inactiveThumbThemeColor // @ts-ignore react-native-web only
|
|
50
50
|
,
|
|
51
51
|
activeThumbColor: activeThumbThemeColor,
|
|
52
52
|
ios_backgroundColor: inactiveTrackThemeColor,
|
|
@@ -57,6 +57,7 @@ function Switch(_ref) {
|
|
|
57
57
|
}
|
|
58
58
|
}, rest));
|
|
59
59
|
}
|
|
60
|
+
|
|
60
61
|
function Row(_ref2) {
|
|
61
62
|
let {
|
|
62
63
|
label = "Label",
|
|
@@ -104,6 +105,7 @@ function Row(_ref2) {
|
|
|
104
105
|
inactiveThumbColor: inactiveThumbColor
|
|
105
106
|
}));
|
|
106
107
|
}
|
|
108
|
+
|
|
107
109
|
const SwitchRow = withTheme(Row);
|
|
108
110
|
export { SwitchRow };
|
|
109
111
|
export default withTheme(Switch);
|
|
@@ -1,21 +1,26 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
|
-
function
|
|
4
|
-
|
|
2
|
+
|
|
3
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
|
+
|
|
5
5
|
import * as React from "react";
|
|
6
6
|
import { Text as NativeText, I18nManager } from "react-native";
|
|
7
7
|
import { withTheme } from "../theming";
|
|
8
|
+
|
|
8
9
|
class Text extends React.Component {
|
|
9
10
|
constructor() {
|
|
10
11
|
super(...arguments);
|
|
12
|
+
|
|
11
13
|
_defineProperty(this, "_root", void 0);
|
|
14
|
+
|
|
12
15
|
_defineProperty(this, "state", {
|
|
13
16
|
nativeProps: {}
|
|
14
17
|
});
|
|
15
18
|
}
|
|
19
|
+
|
|
16
20
|
setNativeProps(args) {
|
|
17
21
|
this.state.nativeProps = args || {};
|
|
18
22
|
}
|
|
23
|
+
|
|
19
24
|
render() {
|
|
20
25
|
const {
|
|
21
26
|
style,
|
|
@@ -32,7 +37,9 @@ class Text extends React.Component {
|
|
|
32
37
|
}, style]
|
|
33
38
|
}));
|
|
34
39
|
}
|
|
40
|
+
|
|
35
41
|
}
|
|
42
|
+
|
|
36
43
|
export const BaseLink = _ref => {
|
|
37
44
|
let {
|
|
38
45
|
style,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
|
-
function
|
|
4
|
-
|
|
2
|
+
|
|
3
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
|
+
|
|
5
5
|
import * as React from "react";
|
|
6
6
|
import { View, Animated, TextInput as NativeTextInput, StyleSheet, Text, I18nManager } from "react-native";
|
|
7
7
|
import { withTheme } from "../theming";
|
|
@@ -10,9 +10,11 @@ const AnimatedText = Animated.createAnimatedComponent(Text);
|
|
|
10
10
|
const FOCUS_ANIMATION_DURATION = 150;
|
|
11
11
|
const BLUR_ANIMATION_DURATION = 180;
|
|
12
12
|
const ICON_SIZE = 24;
|
|
13
|
+
|
|
13
14
|
class TextField extends React.Component {
|
|
14
15
|
constructor() {
|
|
15
16
|
super(...arguments);
|
|
17
|
+
|
|
16
18
|
_defineProperty(this, "state", {
|
|
17
19
|
nativeProps: {},
|
|
18
20
|
labeled: new Animated.Value(this.props.value || this.props.error ? 0 : 1),
|
|
@@ -23,49 +25,59 @@ class TextField extends React.Component {
|
|
|
23
25
|
width: 0
|
|
24
26
|
}
|
|
25
27
|
});
|
|
28
|
+
|
|
26
29
|
_defineProperty(this, "_timer", setTimeout(() => {}, 0));
|
|
27
|
-
_defineProperty(this, "_showPlaceholder", () => {
|
|
28
|
-
clearTimeout(this._timer);
|
|
29
30
|
|
|
30
|
-
|
|
31
|
+
_defineProperty(this, "_showPlaceholder", () => {
|
|
32
|
+
clearTimeout(this._timer); // Set the placeholder in a delay to offset the label animation
|
|
31
33
|
// If we show it immediately, they'll overlap and look ugly
|
|
34
|
+
|
|
32
35
|
this._timer = setTimeout(() => this.setState({
|
|
33
36
|
placeholder: this.props.placeholder
|
|
34
37
|
}), 50);
|
|
35
38
|
});
|
|
39
|
+
|
|
36
40
|
_defineProperty(this, "_hidePlaceholder", () => this.setState({
|
|
37
41
|
placeholder: ""
|
|
38
42
|
}));
|
|
43
|
+
|
|
39
44
|
_defineProperty(this, "_restoreLabel", () => Animated.timing(this.state.labeled, {
|
|
40
45
|
toValue: 1,
|
|
41
46
|
duration: FOCUS_ANIMATION_DURATION,
|
|
42
47
|
useNativeDriver: true
|
|
43
48
|
}).start());
|
|
49
|
+
|
|
44
50
|
_defineProperty(this, "_minmizeLabel", () => Animated.timing(this.state.labeled, {
|
|
45
51
|
toValue: 0,
|
|
46
52
|
duration: BLUR_ANIMATION_DURATION,
|
|
47
53
|
useNativeDriver: true
|
|
48
54
|
}).start());
|
|
55
|
+
|
|
49
56
|
_defineProperty(this, "_handleFocus", () => {
|
|
50
57
|
if (this.props.disabled) {
|
|
51
58
|
return;
|
|
52
59
|
}
|
|
60
|
+
|
|
53
61
|
this.setState({
|
|
54
62
|
focused: true
|
|
55
63
|
});
|
|
56
64
|
});
|
|
65
|
+
|
|
57
66
|
_defineProperty(this, "_handleBlur", () => {
|
|
58
67
|
if (this.props.disabled) {
|
|
59
68
|
return;
|
|
60
69
|
}
|
|
70
|
+
|
|
61
71
|
this.setState({
|
|
62
72
|
focused: false
|
|
63
73
|
});
|
|
64
74
|
});
|
|
75
|
+
|
|
65
76
|
_defineProperty(this, "_handleChangeText", value => {
|
|
66
77
|
if (this.props.disabled) {
|
|
67
78
|
return;
|
|
68
79
|
}
|
|
80
|
+
|
|
69
81
|
if (typeof value === "string") {
|
|
70
82
|
this.setState({
|
|
71
83
|
value
|
|
@@ -78,21 +90,26 @@ class TextField extends React.Component {
|
|
|
78
90
|
this.props.onChangeText && this.props.onChangeText(value.nativeEvent.text);
|
|
79
91
|
}
|
|
80
92
|
});
|
|
93
|
+
|
|
81
94
|
_defineProperty(this, "_root", undefined);
|
|
82
95
|
}
|
|
96
|
+
|
|
83
97
|
static getDerivedStateFromProps(nextProps, prevState) {
|
|
84
98
|
return {
|
|
85
99
|
value: typeof nextProps.value !== "undefined" ? nextProps.value : prevState.value
|
|
86
100
|
};
|
|
87
101
|
}
|
|
102
|
+
|
|
88
103
|
componentDidMount() {
|
|
89
104
|
if (this.props.defaultValue) {
|
|
90
105
|
this._handleChangeText(this.props.defaultValue);
|
|
91
106
|
}
|
|
107
|
+
|
|
92
108
|
if (this.props.placeholder) {
|
|
93
109
|
this._minmizeLabel();
|
|
94
110
|
}
|
|
95
111
|
}
|
|
112
|
+
|
|
96
113
|
componentDidUpdate(prevProps, prevState) {
|
|
97
114
|
if (prevState.focused !== this.state.focused || prevState.value !== this.state.value) {
|
|
98
115
|
// The label should be minimized if the text input is focused, or has text
|
|
@@ -103,6 +120,7 @@ class TextField extends React.Component {
|
|
|
103
120
|
this._restoreLabel();
|
|
104
121
|
}
|
|
105
122
|
}
|
|
123
|
+
|
|
106
124
|
if (prevState.focused !== this.state.focused || prevProps.label !== this.props.label) {
|
|
107
125
|
// Show placeholder text only if the input is focused, or has error, or there's no label
|
|
108
126
|
// We don't show placeholder if there's a label because the label acts as placeholder
|
|
@@ -114,35 +132,42 @@ class TextField extends React.Component {
|
|
|
114
132
|
}
|
|
115
133
|
}
|
|
116
134
|
}
|
|
135
|
+
|
|
117
136
|
componentWillUnmount() {
|
|
118
137
|
clearTimeout(this._timer);
|
|
119
138
|
}
|
|
139
|
+
|
|
120
140
|
toggleFocus() {
|
|
121
141
|
this.setState(prevState => ({
|
|
122
142
|
focused: !prevState.focused
|
|
123
143
|
}));
|
|
124
144
|
}
|
|
145
|
+
|
|
125
146
|
/**
|
|
126
147
|
* @internal
|
|
127
148
|
*/
|
|
128
149
|
setNativeProps(args) {
|
|
129
|
-
this.setState(state => ({
|
|
130
|
-
...state,
|
|
150
|
+
this.setState(state => ({ ...state,
|
|
131
151
|
nativeState: args || {}
|
|
132
152
|
}));
|
|
133
153
|
}
|
|
154
|
+
|
|
134
155
|
isFocused() {
|
|
135
156
|
return this._root && this._root.isFocused();
|
|
136
157
|
}
|
|
158
|
+
|
|
137
159
|
clear() {
|
|
138
160
|
return this._root && this._root.clear();
|
|
139
161
|
}
|
|
162
|
+
|
|
140
163
|
focus() {
|
|
141
164
|
return this._root && this._root.focus();
|
|
142
165
|
}
|
|
166
|
+
|
|
143
167
|
blur() {
|
|
144
168
|
return this._root && this._root.blur();
|
|
145
169
|
}
|
|
170
|
+
|
|
146
171
|
render() {
|
|
147
172
|
const {
|
|
148
173
|
Icon,
|
|
@@ -175,6 +200,7 @@ class TextField extends React.Component {
|
|
|
175
200
|
const hasActiveOutline = this.state.focused || error;
|
|
176
201
|
let inputTextColor, activeColor, underlineColor, borderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
|
|
177
202
|
inputTextColor = colors.strong;
|
|
203
|
+
|
|
178
204
|
if (disabled) {
|
|
179
205
|
activeColor = colors.light;
|
|
180
206
|
placeholderColor = colors.light;
|
|
@@ -187,9 +213,11 @@ class TextField extends React.Component {
|
|
|
187
213
|
underlineColor = underlineColorProp;
|
|
188
214
|
backgroundColor = colors.background;
|
|
189
215
|
}
|
|
216
|
+
|
|
190
217
|
if (rest.placeholderTextColor) {
|
|
191
218
|
placeholderColor = rest.placeholderTextColor;
|
|
192
219
|
}
|
|
220
|
+
|
|
193
221
|
const {
|
|
194
222
|
lineHeight,
|
|
195
223
|
...subtitle1
|
|
@@ -201,10 +229,13 @@ class TextField extends React.Component {
|
|
|
201
229
|
paddingRight: rightIconName ? ICON_SIZE + 16 + 4 : 12,
|
|
202
230
|
...subtitle1
|
|
203
231
|
};
|
|
232
|
+
|
|
204
233
|
if (!multiline) {
|
|
205
234
|
inputStyle.height = lineHeight;
|
|
206
235
|
}
|
|
236
|
+
|
|
207
237
|
let assistiveTextLeftMargin;
|
|
238
|
+
|
|
208
239
|
if (type === "underline") {
|
|
209
240
|
containerStyle = {
|
|
210
241
|
borderTopLeftRadius: roundness,
|
|
@@ -212,6 +243,7 @@ class TextField extends React.Component {
|
|
|
212
243
|
paddingBottom: 12,
|
|
213
244
|
marginTop: 16
|
|
214
245
|
};
|
|
246
|
+
|
|
215
247
|
if (leftIconName && leftIconMode === "outset") {
|
|
216
248
|
assistiveTextLeftMargin = ICON_SIZE + 8;
|
|
217
249
|
} else {
|
|
@@ -227,6 +259,7 @@ class TextField extends React.Component {
|
|
|
227
259
|
opacity: disabled ? disabledOpacity : 1,
|
|
228
260
|
backgroundColor
|
|
229
261
|
};
|
|
262
|
+
|
|
230
263
|
if (leftIconName && leftIconMode === "inset") {
|
|
231
264
|
assistiveTextLeftMargin = 16 + 4;
|
|
232
265
|
} else if (leftIconName && leftIconMode === "outset") {
|
|
@@ -234,12 +267,16 @@ class TextField extends React.Component {
|
|
|
234
267
|
} else {
|
|
235
268
|
assistiveTextLeftMargin = 12;
|
|
236
269
|
}
|
|
270
|
+
|
|
237
271
|
inputStyle.paddingHorizontal = 12;
|
|
238
272
|
}
|
|
273
|
+
|
|
239
274
|
if (leftIconName && leftIconMode === "outset") {
|
|
240
275
|
containerStyle.marginLeft = ICON_SIZE + 8;
|
|
241
276
|
}
|
|
277
|
+
|
|
242
278
|
let leftIconColor;
|
|
279
|
+
|
|
243
280
|
if (error) {
|
|
244
281
|
leftIconColor = colors.error;
|
|
245
282
|
} else if (this.state.focused) {
|
|
@@ -247,6 +284,7 @@ class TextField extends React.Component {
|
|
|
247
284
|
} else {
|
|
248
285
|
leftIconColor = colors.light;
|
|
249
286
|
}
|
|
287
|
+
|
|
250
288
|
const leftIconProps = {
|
|
251
289
|
size: 24,
|
|
252
290
|
color: leftIconColor,
|
|
@@ -257,8 +295,7 @@ class TextField extends React.Component {
|
|
|
257
295
|
marginTop: type === "solid" ? MINIMIZED_LABEL_FONT_SIZE + 4 : leftIconMode === "outset" ? 16 : 0,
|
|
258
296
|
marginLeft: leftIconMode === "inset" && type === "solid" ? 16 : 0
|
|
259
297
|
};
|
|
260
|
-
const labelStyle = {
|
|
261
|
-
...typography.subtitle1,
|
|
298
|
+
const labelStyle = { ...typography.subtitle1,
|
|
262
299
|
top: type === "solid" ? 16 : 0,
|
|
263
300
|
left: leftIconName && leftIconMode === "inset" ? ICON_SIZE + (type === "solid" ? 16 : 12) : 0,
|
|
264
301
|
transform: [{
|
|
@@ -342,8 +379,7 @@ class TextField extends React.Component {
|
|
|
342
379
|
React.createElement(View, {
|
|
343
380
|
pointerEvents: "none",
|
|
344
381
|
style: [StyleSheet.absoluteFill, {
|
|
345
|
-
opacity:
|
|
346
|
-
// Hide the label in minimized state until we measure its width
|
|
382
|
+
opacity: // Hide the label in minimized state until we measure its width
|
|
347
383
|
this.state.value || this.state.focused ? this.state.labelLayout.measured ? 1 : 0 : 1
|
|
348
384
|
}]
|
|
349
385
|
}, /*#__PURE__*/React.createElement(AnimatedText, {
|
|
@@ -412,7 +448,9 @@ class TextField extends React.Component {
|
|
|
412
448
|
}]
|
|
413
449
|
}, assistiveText) : null);
|
|
414
450
|
}
|
|
451
|
+
|
|
415
452
|
}
|
|
453
|
+
|
|
416
454
|
export default withTheme(TextField);
|
|
417
455
|
const styles = StyleSheet.create({
|
|
418
456
|
container: {
|