@pagopa/io-app-design-system 1.38.4 → 1.38.6
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/layout/HeaderSecondLevel.js +32 -20
- package/lib/commonjs/components/layout/HeaderSecondLevel.js.map +1 -1
- package/lib/commonjs/components/searchInput/SearchInput.js +10 -4
- package/lib/commonjs/components/searchInput/SearchInput.js.map +1 -1
- package/lib/module/components/layout/HeaderSecondLevel.js +34 -22
- package/lib/module/components/layout/HeaderSecondLevel.js.map +1 -1
- package/lib/module/components/searchInput/SearchInput.js +11 -5
- package/lib/module/components/searchInput/SearchInput.js.map +1 -1
- package/lib/typescript/components/layout/HeaderSecondLevel.d.ts +3 -1
- package/lib/typescript/components/layout/HeaderSecondLevel.d.ts.map +1 -1
- package/lib/typescript/components/searchInput/SearchInput.d.ts +4 -1
- package/lib/typescript/components/searchInput/SearchInput.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/layout/HeaderSecondLevel.tsx +58 -32
- package/src/components/searchInput/SearchInput.tsx +175 -150
|
@@ -6,19 +6,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = exports.HeaderSecondLevel = void 0;
|
|
7
7
|
var React = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
|
-
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
|
|
10
9
|
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
10
|
+
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
|
|
11
11
|
var _core = require("../../core");
|
|
12
|
-
var _spacer = require("../spacer");
|
|
13
|
-
var _IconButton = _interopRequireDefault(require("../buttons/IconButton"));
|
|
14
12
|
var _fonts = require("../../utils/fonts");
|
|
13
|
+
var _IconButton = _interopRequireDefault(require("../buttons/IconButton"));
|
|
14
|
+
var _spacer = require("../spacer");
|
|
15
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
16
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
17
17
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
18
18
|
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); }
|
|
19
|
-
const HEADER_BG_COLOR = "white";
|
|
20
|
-
const borderColorDisabled = (0, _core.hexToRgba)(_core.IOColors["grey-100"], 0);
|
|
21
|
-
const headerTransparent = (0, _core.hexToRgba)(_core.IOColors[HEADER_BG_COLOR], 0);
|
|
22
19
|
const titleHorizontalMargin = 16;
|
|
23
20
|
const styles = _reactNative.StyleSheet.create({
|
|
24
21
|
headerInner: {
|
|
@@ -59,6 +56,8 @@ const HeaderSecondLevel = _ref => {
|
|
|
59
56
|
backTestID,
|
|
60
57
|
title,
|
|
61
58
|
type,
|
|
59
|
+
variant = "neutral",
|
|
60
|
+
backgroundColor,
|
|
62
61
|
transparent = false,
|
|
63
62
|
isModal = false,
|
|
64
63
|
testID,
|
|
@@ -70,8 +69,18 @@ const HeaderSecondLevel = _ref => {
|
|
|
70
69
|
const {
|
|
71
70
|
isExperimental
|
|
72
71
|
} = (0, _core.useIOExperimentalDesign)();
|
|
72
|
+
const theme = (0, _core.useIOTheme)();
|
|
73
73
|
const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
|
|
74
74
|
const isTitleAccessible = React.useMemo(() => !!title.trim(), [title]);
|
|
75
|
+
const iconButtonColor = variant === "neutral" ? "neutral" : "contrast";
|
|
76
|
+
const titleColor = variant === "neutral" ? _core.IOColors[theme["textHeading-default"]] : _core.IOColors.white;
|
|
77
|
+
|
|
78
|
+
/* Visual attributes when there are transitions between states */
|
|
79
|
+
const HEADER_DEFAULT_BG_COLOR = "white";
|
|
80
|
+
const headerBgColorTransparentState = backgroundColor ? (0, _core.hexToRgba)(backgroundColor, 0) : (0, _core.hexToRgba)(_core.IOColors[HEADER_DEFAULT_BG_COLOR], 0);
|
|
81
|
+
const headerBgColorSolidState = backgroundColor ?? _core.IOColors[HEADER_DEFAULT_BG_COLOR];
|
|
82
|
+
const borderColorTransparentState = backgroundColor ? (0, _core.hexToRgba)(backgroundColor, 0) : (0, _core.hexToRgba)(_core.IOColors["grey-100"], 0);
|
|
83
|
+
const borderColorSolidState = backgroundColor ?? _core.IOColors["grey-100"];
|
|
75
84
|
React.useLayoutEffect(() => {
|
|
76
85
|
if (isTitleAccessible) {
|
|
77
86
|
const reactNode = (0, _reactNative.findNodeHandle)(titleRef.current);
|
|
@@ -81,21 +90,22 @@ const HeaderSecondLevel = _ref => {
|
|
|
81
90
|
}
|
|
82
91
|
});
|
|
83
92
|
const headerWrapperAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
|
|
84
|
-
backgroundColor:
|
|
85
|
-
borderColor: scrollValues ? (0, _reactNativeReanimated.interpolateColor)(scrollValues.contentOffsetY.value, [0, scrollValues.triggerOffset], [
|
|
93
|
+
backgroundColor: scrollValues ? (0, _reactNativeReanimated.interpolateColor)(scrollValues.contentOffsetY.value, [0, scrollValues.triggerOffset], [headerBgColorTransparentState, headerBgColorSolidState]) : headerBgColorSolidState,
|
|
94
|
+
borderColor: scrollValues ? (0, _reactNativeReanimated.interpolateColor)(scrollValues.contentOffsetY.value, [0, scrollValues.triggerOffset], [borderColorTransparentState, borderColorSolidState]) : "transparent"
|
|
86
95
|
}));
|
|
87
96
|
const titleAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
|
|
88
97
|
opacity: scrollValues ? (0, _reactNativeReanimated.interpolate)(scrollValues.contentOffsetY.value, [0, scrollValues.triggerOffset], [0, 1]) : 1
|
|
89
98
|
}));
|
|
90
99
|
return /*#__PURE__*/React.createElement(_reactNativeReanimated.default.View, {
|
|
91
100
|
accessibilityRole: "header",
|
|
92
|
-
style: [
|
|
93
|
-
borderBottomWidth:
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
101
|
+
style: [{
|
|
102
|
+
borderBottomWidth: 1,
|
|
103
|
+
borderColor: borderColorTransparentState
|
|
104
|
+
}, isModal ? {
|
|
105
|
+
borderColor: borderColorSolidState
|
|
106
|
+
} : {}, transparent ? headerWrapperAnimatedStyle : {
|
|
107
|
+
backgroundColor: headerBgColorSolidState
|
|
108
|
+
}]
|
|
99
109
|
}, /*#__PURE__*/React.createElement(_reactNativeReanimated.default.View, {
|
|
100
110
|
testID: testID,
|
|
101
111
|
style: [isModal ? {} : {
|
|
@@ -106,7 +116,7 @@ const HeaderSecondLevel = _ref => {
|
|
|
106
116
|
android: "backAndroid",
|
|
107
117
|
default: "backiOS"
|
|
108
118
|
}),
|
|
109
|
-
color:
|
|
119
|
+
color: iconButtonColor,
|
|
110
120
|
onPress: goBack,
|
|
111
121
|
accessibilityLabel: backAccessibilityLabel,
|
|
112
122
|
testID: backTestID
|
|
@@ -123,21 +133,23 @@ const HeaderSecondLevel = _ref => {
|
|
|
123
133
|
}, /*#__PURE__*/React.createElement(_reactNativeReanimated.default.Text, {
|
|
124
134
|
numberOfLines: 1,
|
|
125
135
|
accessible: false,
|
|
126
|
-
style: [styles.headerTitle,
|
|
136
|
+
style: [styles.headerTitle, {
|
|
137
|
+
color: titleColor
|
|
138
|
+
}, isExperimental ? styles.headerTitleFont : styles.headerTitleLegacyFont, titleAnimatedStyle]
|
|
127
139
|
}, title)), /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
128
140
|
style: [_core.IOStyles.row, {
|
|
129
141
|
flexShrink: 0
|
|
130
142
|
}]
|
|
131
143
|
}, type === "threeActions" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_IconButton.default, _extends({}, thirdAction, {
|
|
132
|
-
color:
|
|
144
|
+
color: iconButtonColor
|
|
133
145
|
})), /*#__PURE__*/React.createElement(_spacer.HSpacer, {
|
|
134
146
|
size: 16
|
|
135
147
|
})), (type === "twoActions" || type === "threeActions") && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_IconButton.default, _extends({}, secondAction, {
|
|
136
|
-
color:
|
|
148
|
+
color: iconButtonColor
|
|
137
149
|
})), /*#__PURE__*/React.createElement(_spacer.HSpacer, {
|
|
138
150
|
size: 16
|
|
139
151
|
})), type !== "base" ? /*#__PURE__*/React.createElement(_IconButton.default, _extends({}, firstAction, {
|
|
140
|
-
color:
|
|
152
|
+
color: iconButtonColor
|
|
141
153
|
})) : /*#__PURE__*/React.createElement(_spacer.HSpacer, {
|
|
142
154
|
size: _core.iconBtnSizeSmall
|
|
143
155
|
}))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","
|
|
1
|
+
{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_reactNativeSafeAreaContext","_core","_fonts","_IconButton","_interopRequireDefault","_spacer","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","titleHorizontalMargin","styles","StyleSheet","create","headerInner","paddingHorizontal","IOVisualCostants","appMarginDefault","height","headerHeight","flexGrow","flexDirection","alignItems","justifyContent","titleContainer","flexShrink","marginHorizontal","headerTitle","fontSize","textAlign","headerTitleFont","makeFontStyleObject","headerTitleLegacyFont","HeaderSecondLevel","_ref","scrollValues","undefined","goBack","backAccessibilityLabel","backTestID","title","type","variant","backgroundColor","transparent","isModal","testID","firstAction","secondAction","thirdAction","titleRef","createRef","isExperimental","useIOExperimentalDesign","theme","useIOTheme","insets","useSafeAreaInsets","isTitleAccessible","useMemo","trim","iconButtonColor","titleColor","IOColors","white","HEADER_DEFAULT_BG_COLOR","headerBgColorTransparentState","hexToRgba","headerBgColorSolidState","borderColorTransparentState","borderColorSolidState","useLayoutEffect","reactNode","findNodeHandle","current","AccessibilityInfo","setAccessibilityFocus","headerWrapperAnimatedStyle","useAnimatedStyle","interpolateColor","contentOffsetY","value","triggerOffset","borderColor","titleAnimatedStyle","opacity","interpolate","createElement","View","accessibilityRole","style","borderBottomWidth","marginTop","top","icon","Platform","select","android","color","onPress","accessibilityLabel","HSpacer","size","ref","accessibilityElementsHidden","importantForAccessibility","accessible","Text","numberOfLines","IOStyles","row","Fragment","iconBtnSizeSmall","exports","_default"],"sourceRoot":"../../../../src","sources":["components/layout/HeaderSecondLevel.tsx"],"mappings":"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"}
|
|
@@ -37,7 +37,7 @@ const inputWithTimingConfig = {
|
|
|
37
37
|
duration: inputTransitionDuration,
|
|
38
38
|
easing: _reactNativeReanimated.Easing.inOut(_reactNativeReanimated.Easing.cubic)
|
|
39
39
|
};
|
|
40
|
-
const SearchInput = _ref => {
|
|
40
|
+
const SearchInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
41
41
|
let {
|
|
42
42
|
accessibilityLabel,
|
|
43
43
|
cancelButtonLabel,
|
|
@@ -71,6 +71,12 @@ const SearchInput = _ref => {
|
|
|
71
71
|
setCancelButtonWidth(nativeEvent.layout.width);
|
|
72
72
|
};
|
|
73
73
|
const inputWidthWithCancel = inputWidth - cancelButtonWidth;
|
|
74
|
+
(0, _react.useImperativeHandle)(ref, () => ({
|
|
75
|
+
focus() {
|
|
76
|
+
var _searchInputRef$curre;
|
|
77
|
+
(_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 || _searchInputRef$curre.focus();
|
|
78
|
+
}
|
|
79
|
+
}), []);
|
|
74
80
|
|
|
75
81
|
/* Reanimated styles */
|
|
76
82
|
const inputAnimatedWidth = (0, _reactNativeReanimated.useSharedValue)(inputWidth);
|
|
@@ -115,9 +121,9 @@ const SearchInput = _ref => {
|
|
|
115
121
|
onCancel === null || onCancel === void 0 || onCancel(event);
|
|
116
122
|
}, [onCancel, onChangeText]);
|
|
117
123
|
const clear = (0, _react.useCallback)(() => {
|
|
118
|
-
var _searchInputRef$
|
|
124
|
+
var _searchInputRef$curre2;
|
|
119
125
|
onChangeText === null || onChangeText === void 0 || onChangeText("");
|
|
120
|
-
(_searchInputRef$
|
|
126
|
+
(_searchInputRef$curre2 = searchInputRef.current) === null || _searchInputRef$curre2 === void 0 || _searchInputRef$curre2.clear();
|
|
121
127
|
}, [onChangeText]);
|
|
122
128
|
const handleChangeText = (0, _react.useCallback)(text => onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text), [onChangeText]);
|
|
123
129
|
const renderSearchBar = () => /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
@@ -170,7 +176,7 @@ const SearchInput = _ref => {
|
|
|
170
176
|
accessibilityLabel: placeholder,
|
|
171
177
|
onPress: pressable === null || pressable === void 0 ? void 0 : pressable.onPress
|
|
172
178
|
}, renderSearchBar()) : renderSearchBar();
|
|
173
|
-
};
|
|
179
|
+
});
|
|
174
180
|
exports.SearchInput = SearchInput;
|
|
175
181
|
const styles = _reactNative.StyleSheet.create({
|
|
176
182
|
searchBar: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_core","_fonts","_buttons","_icons","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","inputPaddingHorizontal","inputPaddingClearButton","inputRadius","inputBgColorDefault","IOColors","inputBgColorFocused","inputColorPlaceholder","iconMargin","iconColor","iconSize","iconCloseSize","inputFontSizePlaceholder","cancelButtonMargin","inputTransitionDuration","inputHeightIOS","inputHeightAndroid","AnimatedTextInput","Animated","createAnimatedComponent","TextInput","AnimatedPressable","Pressable","inputWithTimingConfig","duration","easing","Easing","inOut","cubic","SearchInput","_ref","accessibilityLabel","cancelButtonLabel","clearAccessibilityLabel","onCancel","onChangeText","placeholder","value","autoFocus","pressable","testID","searchInputRef","useRef","theme","useIOTheme","isExperimental","useIOExperimentalDesign","inputCaretColor","inputWidth","Dimensions","width","IOVisualCostants","appMarginDefault","cancelButtonWidth","setCancelButtonWidth","useState","getCancelButtonWidth","_ref2","nativeEvent","layout","inputWidthWithCancel","inputAnimatedWidth","useSharedValue","isFocused","animatedStyle","useAnimatedStyle","withTiming","backgroundColor","interpolateColor","cancelButtonAnimatedStyle","transform","translateX","interpolate","Extrapolate","CLAMP","opacity","clearButtonAnimatedStyle","showClearButton","length","scale","handleFocus","handleBlur","cancel","useCallback","event","clear","_searchInputRef$curre","current","handleChangeText","text","renderSearchBar","createElement","View","style","styles","searchBar","searchInput","pointerEvents","iconContainer","Icon","name","size","color","ref","inputMode","returnKeyType","accessibilityRole","textInput","Platform","OS","textInputIOS","textInputAndroid","placeholderLegacy","selectionColor","cursorColor","placeholderTextColor","onFocus","onBlur","clearButton","onPress","hitSlop","onLayout","cancelButton","ButtonLink","label","exports","StyleSheet","create","flexDirection","justifyContent","alignItems","flexShrink","borderRadius","borderCurve","paddingLeft","paddingRight","flexGrow","height","marginRight","fontSize","makeFontStyleObject","position","right","marginLeft"],"sourceRoot":"../../../../src","sources":["components/searchInput/SearchInput.tsx"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAaA,IAAAE,sBAAA,GAAAH,uBAAA,CAAAC,OAAA;AAUA,IAAAG,KAAA,GAAAH,OAAA;AAOA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAAiD,SAAAO,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAT,wBAAAa,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAlCjD;;AAoCA;AACA,MAAMW,sBAAsC,GAAG,EAAE;AACjD,MAAMC,uBAAuC,GAAG,CAAC;AACjD,MAAMC,WAAmB,GAAG,CAAC;AAC7B,MAAMC,mBAA+B,GAAGC,cAAQ,CAAC,SAAS,CAAC;AAC3D,MAAMC,mBAA+B,GAAGD,cAAQ,CAAC,UAAU,CAAC;AAC5D,MAAME,qBAAiC,GAAGF,cAAQ,CAAC,UAAU,CAAC;AAC9D,MAAMG,UAA0B,GAAG,CAAC;AACpC,MAAMC,SAAmB,GAAG,UAAU;AACtC,MAAMC,QAAyB,GAAG,EAAE;AACpC,MAAMC,aAA8B,GAAG,EAAE;AACzC,MAAMC,wBAAgC,GAAG,EAAE;AAC3C,MAAMC,kBAAkC,GAAG,EAAE;AAC7C,MAAMC,uBAA+B,GAAG,GAAG;AAC3C,MAAMC,cAAsB,GAAG,EAAE;AACjC,MAAMC,kBAA0B,GAAG,EAAE;AA6BrC,MAAMC,iBAAiB,GAAGC,8BAAQ,CAACC,uBAAuB,CAACC,sBAAS,CAAC;AACrE,MAAMC,iBAAiB,GAAGH,8BAAQ,CAACC,uBAAuB,CAACG,sBAAS,CAAC;AAErE,MAAMC,qBAAqB,GAAG;EAC5BC,QAAQ,EAAEV,uBAAuB;EACjCW,MAAM,EAAEC,6BAAM,CAACC,KAAK,CAACD,6BAAM,CAACE,KAAK;AACnC,CAAC;AAEM,MAAMC,WAAW,GAAGC,IAAA,IAWH;EAAA,IAXI;IAC1BC,kBAAkB;IAClBC,iBAAiB;IACjBC,uBAAuB;IACvBC,QAAQ;IACRC,YAAY;IACZC,WAAW;IACXC,KAAK,GAAG,EAAE;IACVC,SAAS;IACTC,SAAS;IACTC;EACgB,CAAC,GAAAV,IAAA;EACjB,MAAMW,cAAc,GAAG,IAAAC,aAAM,EAAY,IAAI,CAAC;;EAE9C;EACA,MAAMC,KAAK,GAAG,IAAAC,gBAAU,EAAC,CAAC;EAC1B,MAAM;IAAEC;EAAe,CAAC,GAAG,IAAAC,6BAAuB,EAAC,CAAC;EACpD,MAAMC,eAAe,GAAG1C,cAAQ,CAACsC,KAAK,CAAC,yBAAyB,CAAC,CAAC;;EAElE;AACF;AACA;EACE,MAAMK,UAAkB,GACtBC,uBAAU,CAAC5D,GAAG,CAAC,QAAQ,CAAC,CAAC6D,KAAK,GAAGC,sBAAgB,CAACC,gBAAgB,GAAG,CAAC;EAExE,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAC7C,IAAAC,eAAQ,EAA2B,CAAC,CAAC;EAEvC,MAAMC,oBAAoB,GAAGC,KAAA,IAAwC;IAAA,IAAvC;MAAEC;IAA+B,CAAC,GAAAD,KAAA;IAC9DH,oBAAoB,CAACI,WAAW,CAACC,MAAM,CAACT,KAAK,CAAC;EAChD,CAAC;EAED,MAAMU,oBAA4B,GAAGZ,UAAU,GAAGK,iBAAiB;;EAEnE;EACA,MAAMQ,kBAAkB,GAAG,IAAAC,qCAAc,EAASd,UAAU,CAAC;EAC7D,MAAMe,SAAS,GAAG,IAAAD,qCAAc,EAAC,CAAC,CAAC;;EAEnC;EACA,MAAME,aAAa,GAAG,IAAAC,uCAAgB,EAAC,OAAO;IAC5Cf,KAAK,EAAE,IAAAgB,iCAAU,EAACL,kBAAkB,CAACxB,KAAK,EAAEd,qBAAqB,CAAC;IAClE4C,eAAe,EAAE,IAAAC,uCAAgB,EAC/BL,SAAS,CAAC1B,KAAK,EACf,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAACjC,mBAAmB,EAAEE,mBAAmB,CAC3C;EACF,CAAC,CAAC,CAAC;;EAEH;EACA,MAAM+D,yBAAyB,GAAG,IAAAJ,uCAAgB,EAAC,OAAO;IACxDK,SAAS,EAAE,CACT;MACEC,UAAU,EAAE,IAAAC,kCAAW,EACrBT,SAAS,CAAC1B,KAAK,EACf,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAACgB,iBAAiB,GAAGF,sBAAgB,CAACC,gBAAgB,EAAE,CAAC,CAAC,EAC1DqB,kCAAW,CAACC,KACd;IACF,CAAC,CACF;IACDC,OAAO,EAAE,IAAAH,kCAAW,EAACT,SAAS,CAAC1B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;EACxD,CAAC,CAAC,CAAC;;EAEH;EACA,MAAMuC,wBAAwB,GAAG,IAAAX,uCAAgB,EAAC,MAAM;IACtD,MAAMY,eAAe,GAAGxC,KAAK,CAACyC,MAAM,GAAG,CAAC;IAExC,OAAO;MACLR,SAAS,EAAE,CACT;QACES,KAAK,EAAEF,eAAe,GAClB,IAAAX,iCAAU,EAAC,CAAC,EAAE3C,qBAAqB,CAAC,GACpC,IAAA2C,iCAAU,EAAC,GAAG,EAAE3C,qBAAqB;MAC3C,CAAC,CACF;MACDoD,OAAO,EAAE,IAAAT,iCAAU,EAACW,eAAe,GAAG,CAAC,GAAG,CAAC,EAAEtD,qBAAqB;IACpE,CAAC;EACH,CAAC,EAAE,CAACc,KAAK,CAAC,CAAC;;EAEX;EACA,MAAM2C,WAAW,GAAGA,CAAA,KAAM;IACxBjB,SAAS,CAAC1B,KAAK,GAAG,IAAA6B,iCAAU,EAAC,CAAC,EAAE3C,qBAAqB,CAAC;IACtDsC,kBAAkB,CAACxB,KAAK,GAAGuB,oBAAoB;EACjD,CAAC;EAED,MAAMqB,UAAU,GAAGA,CAAA,KAAM;IACvBlB,SAAS,CAAC1B,KAAK,GAAG,IAAA6B,iCAAU,EAAC,CAAC,EAAE3C,qBAAqB,CAAC;IACtDsC,kBAAkB,CAACxB,KAAK,GAAGW,UAAU;EACvC,CAAC;EAED,MAAMkC,MAAM,GAAG,IAAAC,kBAAW,EACvBC,KAA4B,IAAK;IAChCjD,YAAY,aAAZA,YAAY,eAAZA,YAAY,CAAG,EAAE,CAAC;IAClBD,QAAQ,aAARA,QAAQ,eAARA,QAAQ,CAAGkD,KAAK,CAAC;EACnB,CAAC,EACD,CAAClD,QAAQ,EAAEC,YAAY,CACzB,CAAC;EAED,MAAMkD,KAAK,GAAG,IAAAF,kBAAW,EAAC,MAAM;IAAA,IAAAG,qBAAA;IAC9BnD,YAAY,aAAZA,YAAY,eAAZA,YAAY,CAAG,EAAE,CAAC;IAClB,CAAAmD,qBAAA,GAAA7C,cAAc,CAAC8C,OAAO,cAAAD,qBAAA,eAAtBA,qBAAA,CAAwBD,KAAK,CAAC,CAAC;EACjC,CAAC,EAAE,CAAClD,YAAY,CAAC,CAAC;EAElB,MAAMqD,gBAAgB,GAAG,IAAAL,kBAAW,EACjCM,IAAY,IAAKtD,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGsD,IAAI,CAAC,EACtC,CAACtD,YAAY,CACf,CAAC;EAED,MAAMuD,eAAe,GAAGA,CAAA,kBACtBxH,MAAA,CAAAgB,OAAA,CAAAyG,aAAA,CAACrH,sBAAA,CAAAY,OAAQ,CAAC0G,IAAI;IAACC,KAAK,EAAEC,MAAM,CAACC;EAAU,gBACrC7H,MAAA,CAAAgB,OAAA,CAAAyG,aAAA,CAACrH,sBAAA,CAAAY,OAAQ,CAAC0G,IAAI;IACZC,KAAK,EAAE,CAACC,MAAM,CAACE,WAAW,EAAEhC,aAAa,CAAE;IAC3CiC,aAAa,EAAE1D,SAAS,GAAG,MAAM,GAAG;EAAO,gBAE3CrE,MAAA,CAAAgB,OAAA,CAAAyG,aAAA,CAACtH,YAAA,CAAAuH,IAAI;IAACC,KAAK,EAAEC,MAAM,CAACI;EAAc,gBAChChI,MAAA,CAAAgB,OAAA,CAAAyG,aAAA,CAACjH,MAAA,CAAAyH,IAAI;IAACC,IAAI,EAAC,QAAQ;IAACC,IAAI,EAAE3F,QAAS;IAAC4F,KAAK,EAAE7F;EAAU,CAAE,CACnD,CAAC,eACPvC,MAAA,CAAAgB,OAAA,CAAAyG,aAAA,CAAC1E,iBAAiB;IAChBuB,MAAM,EAAEA,MAAO;IACf+D,GAAG,EAAE9D,cAAe;IACpB+D,SAAS,EAAC,QAAQ;IAClBC,aAAa,EAAC,QAAQ;IACtBC,iBAAiB,EAAE,QAAS;IAC5B3E,kBAAkB,EAAEA,kBAAmB;IACvC8D,KAAK,EAAE,CACLC,MAAM,CAACa,SAAS,EAChBC,qBAAQ,CAACC,EAAE,KAAK,KAAK,GACjBf,MAAM,CAACgB,YAAY,GACnBhB,MAAM,CAACiB,gBAAgB,EAC3BlE,cAAc,GAAGiD,MAAM,CAAC1D,WAAW,GAAG0D,MAAM,CAACkB,iBAAiB,CAC9D;IACFC,cAAc,EAAElE,eAAgB;IAChCmE,WAAW,EAAEnE,eAAgB;IAC7BX,WAAW,EAAEA,WAAY;IACzB+E,oBAAoB,EAAE5G,qBAAsB;IAC5C6G,OAAO,EAAEpC,WAAY;IACrBqC,MAAM,EAAEpC,UAAW;IACnB9C,YAAY,EAAEqD,gBAAiB;IAC/BnD,KAAK,EAAEA,KAAM;IACbC,SAAS,EAAEA;EAAU,CACtB,CAAC,eACFpE,MAAA,CAAAgB,OAAA,CAAAyG,aAAA,CAACtE,iBAAiB;IAChBwE,KAAK,EAAE,CAACC,MAAM,CAACwB,WAAW,EAAE1C,wBAAwB,CAAE;IACtD2C,OAAO,EAAElC,KAAM;IACftD,kBAAkB,EAAEE,uBAAwB;IAC5CyE,iBAAiB,EAAC,QAAQ;IAC1Bc,OAAO,EAAE;EAAG,gBAEZtJ,MAAA,CAAAgB,OAAA,CAAAyG,aAAA,CAACjH,MAAA,CAAAyH,IAAI;IAACC,IAAI,EAAC,YAAY;IAACC,IAAI,EAAE1F,aAAc;IAAC2F,KAAK,EAAE7F;EAAU,CAAE,CAC/C,CACN,CAAC,eAChBvC,MAAA,CAAAgB,OAAA,CAAAyG,aAAA,CAACrH,sBAAA,CAAAY,OAAQ,CAAC0G,IAAI;IACZ6B,QAAQ,EAAEjE,oBAAqB;IAC/BqC,KAAK,EAAE,CAACC,MAAM,CAAC4B,YAAY,EAAErD,yBAAyB;EAAE,gBAExDnG,MAAA,CAAAgB,OAAA,CAAAyG,aAAA,CAAClH,QAAA,CAAAkJ,UAAU;IAACC,KAAK,EAAE5F,iBAAkB;IAACuF,OAAO,EAAErC;EAAO,CAAE,CAC3C,CACF,CAChB;EAED,OAAO3C,SAAS,gBACdrE,MAAA,CAAAgB,OAAA,CAAAyG,aAAA,CAACtH,YAAA,CAAAiD,SAAS;IACRoF,iBAAiB,EAAC,QAAQ;IAC1B3E,kBAAkB,EAAEK,WAAY;IAChCmF,OAAO,EAAEhF,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEgF;EAAQ,GAE3B7B,eAAe,CAAC,CACR,CAAC,GAEZA,eAAe,CAAC,CACjB;AACH,CAAC;AAACmC,OAAA,CAAAhG,WAAA,GAAAA,WAAA;AAEF,MAAMiE,MAAM,GAAGgC,uBAAU,CAACC,MAAM,CAAC;EAC/BhC,SAAS,EAAE;IACT7C,KAAK,EAAE,MAAM;IACb8E,aAAa,EAAE,KAAK;IACpBC,cAAc,EAAE,YAAY;IAC5BC,UAAU,EAAE;EACd,CAAC;EACDlC,WAAW,EAAE;IACXmC,UAAU,EAAE,CAAC;IACbC,YAAY,EAAEjI,WAAW;IACzBkI,WAAW,EAAE,YAAY;IACzBL,aAAa,EAAE,KAAK;IACpBE,UAAU,EAAE,QAAQ;IACpBI,WAAW,EAAErI,sBAAsB;IACnCsI,YAAY,EAAErI;EAChB,CAAC;EACDyG,SAAS,EAAE;IACTwB,UAAU,EAAE,CAAC;IACbK,QAAQ,EAAE;EACZ,CAAC;EACD1B,YAAY,EAAE;IACZ2B,MAAM,EAAE1H;EACV,CAAC;EACDgG,gBAAgB,EAAE;IAChB0B,MAAM,EAAEzH;EACV,CAAC;EACDkF,aAAa,EAAE;IACbwC,WAAW,EAAElI;EACf,CAAC;EACD4B,WAAW,EAAE;IACXuG,QAAQ,EAAE/H,wBAAwB;IAClC,GAAG,IAAAgI,0BAAmB,EAAC,SAAS,EAAE,KAAK,EAAE,WAAW;EACtD,CAAC;EACD5B,iBAAiB,EAAE;IACjB2B,QAAQ,EAAE/H,wBAAwB;IAClC,GAAG,IAAAgI,0BAAmB,EAAC,SAAS,EAAE,KAAK,EAAE,cAAc;EACzD,CAAC;EACDlB,YAAY,EAAE;IACZmB,QAAQ,EAAE,UAAU;IACpBC,KAAK,EAAE,CAAC;IACRR,WAAW,EAAEzH;EACf,CAAC;EACDyG,WAAW,EAAE;IACXyB,UAAU,EAAEvI;EACd;AACF,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_core","_fonts","_buttons","_icons","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","inputPaddingHorizontal","inputPaddingClearButton","inputRadius","inputBgColorDefault","IOColors","inputBgColorFocused","inputColorPlaceholder","iconMargin","iconColor","iconSize","iconCloseSize","inputFontSizePlaceholder","cancelButtonMargin","inputTransitionDuration","inputHeightIOS","inputHeightAndroid","AnimatedTextInput","Animated","createAnimatedComponent","TextInput","AnimatedPressable","Pressable","inputWithTimingConfig","duration","easing","Easing","inOut","cubic","SearchInput","forwardRef","_ref","ref","accessibilityLabel","cancelButtonLabel","clearAccessibilityLabel","onCancel","onChangeText","placeholder","value","autoFocus","pressable","testID","searchInputRef","useRef","theme","useIOTheme","isExperimental","useIOExperimentalDesign","inputCaretColor","inputWidth","Dimensions","width","IOVisualCostants","appMarginDefault","cancelButtonWidth","setCancelButtonWidth","useState","getCancelButtonWidth","_ref2","nativeEvent","layout","inputWidthWithCancel","useImperativeHandle","focus","_searchInputRef$curre","current","inputAnimatedWidth","useSharedValue","isFocused","animatedStyle","useAnimatedStyle","withTiming","backgroundColor","interpolateColor","cancelButtonAnimatedStyle","transform","translateX","interpolate","Extrapolate","CLAMP","opacity","clearButtonAnimatedStyle","showClearButton","length","scale","handleFocus","handleBlur","cancel","useCallback","event","clear","_searchInputRef$curre2","handleChangeText","text","renderSearchBar","createElement","View","style","styles","searchBar","searchInput","pointerEvents","iconContainer","Icon","name","size","color","inputMode","returnKeyType","accessibilityRole","textInput","Platform","OS","textInputIOS","textInputAndroid","placeholderLegacy","selectionColor","cursorColor","placeholderTextColor","onFocus","onBlur","clearButton","onPress","hitSlop","onLayout","cancelButton","ButtonLink","label","exports","StyleSheet","create","flexDirection","justifyContent","alignItems","flexShrink","borderRadius","borderCurve","paddingLeft","paddingRight","flexGrow","height","marginRight","fontSize","makeFontStyleObject","position","right","marginLeft"],"sourceRoot":"../../../../src","sources":["components/searchInput/SearchInput.tsx"],"mappings":"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"}
|
|
@@ -1,15 +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
|
import * as React from "react";
|
|
3
|
-
import {
|
|
4
|
-
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
3
|
+
import { AccessibilityInfo, Platform, StyleSheet, View, findNodeHandle } from "react-native";
|
|
5
4
|
import Animated, { interpolate, interpolateColor, useAnimatedStyle } from "react-native-reanimated";
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import IconButton from "../buttons/IconButton";
|
|
5
|
+
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
6
|
+
import { IOColors, IOStyles, IOVisualCostants, hexToRgba, iconBtnSizeSmall, useIOExperimentalDesign, useIOTheme } from "../../core";
|
|
9
7
|
import { makeFontStyleObject } from "../../utils/fonts";
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
const headerTransparent = hexToRgba(IOColors[HEADER_BG_COLOR], 0);
|
|
8
|
+
import IconButton from "../buttons/IconButton";
|
|
9
|
+
import { HSpacer } from "../spacer";
|
|
13
10
|
const titleHorizontalMargin = 16;
|
|
14
11
|
const styles = StyleSheet.create({
|
|
15
12
|
headerInner: {
|
|
@@ -50,6 +47,8 @@ export const HeaderSecondLevel = _ref => {
|
|
|
50
47
|
backTestID,
|
|
51
48
|
title,
|
|
52
49
|
type,
|
|
50
|
+
variant = "neutral",
|
|
51
|
+
backgroundColor,
|
|
53
52
|
transparent = false,
|
|
54
53
|
isModal = false,
|
|
55
54
|
testID,
|
|
@@ -61,8 +60,18 @@ export const HeaderSecondLevel = _ref => {
|
|
|
61
60
|
const {
|
|
62
61
|
isExperimental
|
|
63
62
|
} = useIOExperimentalDesign();
|
|
63
|
+
const theme = useIOTheme();
|
|
64
64
|
const insets = useSafeAreaInsets();
|
|
65
65
|
const isTitleAccessible = React.useMemo(() => !!title.trim(), [title]);
|
|
66
|
+
const iconButtonColor = variant === "neutral" ? "neutral" : "contrast";
|
|
67
|
+
const titleColor = variant === "neutral" ? IOColors[theme["textHeading-default"]] : IOColors.white;
|
|
68
|
+
|
|
69
|
+
/* Visual attributes when there are transitions between states */
|
|
70
|
+
const HEADER_DEFAULT_BG_COLOR = "white";
|
|
71
|
+
const headerBgColorTransparentState = backgroundColor ? hexToRgba(backgroundColor, 0) : hexToRgba(IOColors[HEADER_DEFAULT_BG_COLOR], 0);
|
|
72
|
+
const headerBgColorSolidState = backgroundColor ?? IOColors[HEADER_DEFAULT_BG_COLOR];
|
|
73
|
+
const borderColorTransparentState = backgroundColor ? hexToRgba(backgroundColor, 0) : hexToRgba(IOColors["grey-100"], 0);
|
|
74
|
+
const borderColorSolidState = backgroundColor ?? IOColors["grey-100"];
|
|
66
75
|
React.useLayoutEffect(() => {
|
|
67
76
|
if (isTitleAccessible) {
|
|
68
77
|
const reactNode = findNodeHandle(titleRef.current);
|
|
@@ -72,21 +81,22 @@ export const HeaderSecondLevel = _ref => {
|
|
|
72
81
|
}
|
|
73
82
|
});
|
|
74
83
|
const headerWrapperAnimatedStyle = useAnimatedStyle(() => ({
|
|
75
|
-
backgroundColor:
|
|
76
|
-
borderColor: scrollValues ? interpolateColor(scrollValues.contentOffsetY.value, [0, scrollValues.triggerOffset], [
|
|
84
|
+
backgroundColor: scrollValues ? interpolateColor(scrollValues.contentOffsetY.value, [0, scrollValues.triggerOffset], [headerBgColorTransparentState, headerBgColorSolidState]) : headerBgColorSolidState,
|
|
85
|
+
borderColor: scrollValues ? interpolateColor(scrollValues.contentOffsetY.value, [0, scrollValues.triggerOffset], [borderColorTransparentState, borderColorSolidState]) : "transparent"
|
|
77
86
|
}));
|
|
78
87
|
const titleAnimatedStyle = useAnimatedStyle(() => ({
|
|
79
88
|
opacity: scrollValues ? interpolate(scrollValues.contentOffsetY.value, [0, scrollValues.triggerOffset], [0, 1]) : 1
|
|
80
89
|
}));
|
|
81
90
|
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
82
91
|
accessibilityRole: "header",
|
|
83
|
-
style: [
|
|
84
|
-
borderBottomWidth:
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
92
|
+
style: [{
|
|
93
|
+
borderBottomWidth: 1,
|
|
94
|
+
borderColor: borderColorTransparentState
|
|
95
|
+
}, isModal ? {
|
|
96
|
+
borderColor: borderColorSolidState
|
|
97
|
+
} : {}, transparent ? headerWrapperAnimatedStyle : {
|
|
98
|
+
backgroundColor: headerBgColorSolidState
|
|
99
|
+
}]
|
|
90
100
|
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
91
101
|
testID: testID,
|
|
92
102
|
style: [isModal ? {} : {
|
|
@@ -97,7 +107,7 @@ export const HeaderSecondLevel = _ref => {
|
|
|
97
107
|
android: "backAndroid",
|
|
98
108
|
default: "backiOS"
|
|
99
109
|
}),
|
|
100
|
-
color:
|
|
110
|
+
color: iconButtonColor,
|
|
101
111
|
onPress: goBack,
|
|
102
112
|
accessibilityLabel: backAccessibilityLabel,
|
|
103
113
|
testID: backTestID
|
|
@@ -114,21 +124,23 @@ export const HeaderSecondLevel = _ref => {
|
|
|
114
124
|
}, /*#__PURE__*/React.createElement(Animated.Text, {
|
|
115
125
|
numberOfLines: 1,
|
|
116
126
|
accessible: false,
|
|
117
|
-
style: [styles.headerTitle,
|
|
127
|
+
style: [styles.headerTitle, {
|
|
128
|
+
color: titleColor
|
|
129
|
+
}, isExperimental ? styles.headerTitleFont : styles.headerTitleLegacyFont, titleAnimatedStyle]
|
|
118
130
|
}, title)), /*#__PURE__*/React.createElement(View, {
|
|
119
131
|
style: [IOStyles.row, {
|
|
120
132
|
flexShrink: 0
|
|
121
133
|
}]
|
|
122
134
|
}, type === "threeActions" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, _extends({}, thirdAction, {
|
|
123
|
-
color:
|
|
135
|
+
color: iconButtonColor
|
|
124
136
|
})), /*#__PURE__*/React.createElement(HSpacer, {
|
|
125
137
|
size: 16
|
|
126
138
|
})), (type === "twoActions" || type === "threeActions") && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, _extends({}, secondAction, {
|
|
127
|
-
color:
|
|
139
|
+
color: iconButtonColor
|
|
128
140
|
})), /*#__PURE__*/React.createElement(HSpacer, {
|
|
129
141
|
size: 16
|
|
130
142
|
})), type !== "base" ? /*#__PURE__*/React.createElement(IconButton, _extends({}, firstAction, {
|
|
131
|
-
color:
|
|
143
|
+
color: iconButtonColor
|
|
132
144
|
})) : /*#__PURE__*/React.createElement(HSpacer, {
|
|
133
145
|
size: iconBtnSizeSmall
|
|
134
146
|
}))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
1
|
+
{"version":3,"names":["React","AccessibilityInfo","Platform","StyleSheet","View","findNodeHandle","Animated","interpolate","interpolateColor","useAnimatedStyle","useSafeAreaInsets","IOColors","IOStyles","IOVisualCostants","hexToRgba","iconBtnSizeSmall","useIOExperimentalDesign","useIOTheme","makeFontStyleObject","IconButton","HSpacer","titleHorizontalMargin","styles","create","headerInner","paddingHorizontal","appMarginDefault","height","headerHeight","flexGrow","flexDirection","alignItems","justifyContent","titleContainer","flexShrink","marginHorizontal","headerTitle","fontSize","textAlign","headerTitleFont","headerTitleLegacyFont","HeaderSecondLevel","_ref","scrollValues","undefined","goBack","backAccessibilityLabel","backTestID","title","type","variant","backgroundColor","transparent","isModal","testID","firstAction","secondAction","thirdAction","titleRef","createRef","isExperimental","theme","insets","isTitleAccessible","useMemo","trim","iconButtonColor","titleColor","white","HEADER_DEFAULT_BG_COLOR","headerBgColorTransparentState","headerBgColorSolidState","borderColorTransparentState","borderColorSolidState","useLayoutEffect","reactNode","current","setAccessibilityFocus","headerWrapperAnimatedStyle","contentOffsetY","value","triggerOffset","borderColor","titleAnimatedStyle","opacity","createElement","accessibilityRole","style","borderBottomWidth","marginTop","top","icon","select","android","default","color","onPress","accessibilityLabel","size","ref","accessibilityElementsHidden","importantForAccessibility","accessible","Text","numberOfLines","row","Fragment","_extends"],"sourceRoot":"../../../../src","sources":["components/layout/HeaderSecondLevel.tsx"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* eslint-disable functional/immutable-data */
|
|
2
|
-
import React, { useCallback, useRef, useState } from "react";
|
|
2
|
+
import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
|
|
3
3
|
import { Dimensions, Platform, Pressable, StyleSheet, TextInput, View } from "react-native";
|
|
4
4
|
import Animated, { Easing, Extrapolate, interpolate, interpolateColor, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
|
|
5
5
|
import { IOColors, IOVisualCostants, useIOExperimentalDesign, useIOTheme } from "../../core";
|
|
@@ -29,7 +29,7 @@ const inputWithTimingConfig = {
|
|
|
29
29
|
duration: inputTransitionDuration,
|
|
30
30
|
easing: Easing.inOut(Easing.cubic)
|
|
31
31
|
};
|
|
32
|
-
export const SearchInput = _ref => {
|
|
32
|
+
export const SearchInput = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
33
33
|
let {
|
|
34
34
|
accessibilityLabel,
|
|
35
35
|
cancelButtonLabel,
|
|
@@ -63,6 +63,12 @@ export const SearchInput = _ref => {
|
|
|
63
63
|
setCancelButtonWidth(nativeEvent.layout.width);
|
|
64
64
|
};
|
|
65
65
|
const inputWidthWithCancel = inputWidth - cancelButtonWidth;
|
|
66
|
+
useImperativeHandle(ref, () => ({
|
|
67
|
+
focus() {
|
|
68
|
+
var _searchInputRef$curre;
|
|
69
|
+
(_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 || _searchInputRef$curre.focus();
|
|
70
|
+
}
|
|
71
|
+
}), []);
|
|
66
72
|
|
|
67
73
|
/* Reanimated styles */
|
|
68
74
|
const inputAnimatedWidth = useSharedValue(inputWidth);
|
|
@@ -107,9 +113,9 @@ export const SearchInput = _ref => {
|
|
|
107
113
|
onCancel === null || onCancel === void 0 || onCancel(event);
|
|
108
114
|
}, [onCancel, onChangeText]);
|
|
109
115
|
const clear = useCallback(() => {
|
|
110
|
-
var _searchInputRef$
|
|
116
|
+
var _searchInputRef$curre2;
|
|
111
117
|
onChangeText === null || onChangeText === void 0 || onChangeText("");
|
|
112
|
-
(_searchInputRef$
|
|
118
|
+
(_searchInputRef$curre2 = searchInputRef.current) === null || _searchInputRef$curre2 === void 0 || _searchInputRef$curre2.clear();
|
|
113
119
|
}, [onChangeText]);
|
|
114
120
|
const handleChangeText = useCallback(text => onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text), [onChangeText]);
|
|
115
121
|
const renderSearchBar = () => /*#__PURE__*/React.createElement(Animated.View, {
|
|
@@ -162,7 +168,7 @@ export const SearchInput = _ref => {
|
|
|
162
168
|
accessibilityLabel: placeholder,
|
|
163
169
|
onPress: pressable === null || pressable === void 0 ? void 0 : pressable.onPress
|
|
164
170
|
}, renderSearchBar()) : renderSearchBar();
|
|
165
|
-
};
|
|
171
|
+
});
|
|
166
172
|
const styles = StyleSheet.create({
|
|
167
173
|
searchBar: {
|
|
168
174
|
width: "100%",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useRef","useState","Dimensions","Platform","Pressable","StyleSheet","TextInput","View","Animated","Easing","Extrapolate","interpolate","interpolateColor","useAnimatedStyle","useSharedValue","withTiming","IOColors","IOVisualCostants","useIOExperimentalDesign","useIOTheme","makeFontStyleObject","ButtonLink","Icon","inputPaddingHorizontal","inputPaddingClearButton","inputRadius","inputBgColorDefault","inputBgColorFocused","inputColorPlaceholder","iconMargin","iconColor","iconSize","iconCloseSize","inputFontSizePlaceholder","cancelButtonMargin","inputTransitionDuration","inputHeightIOS","inputHeightAndroid","AnimatedTextInput","createAnimatedComponent","AnimatedPressable","inputWithTimingConfig","duration","easing","inOut","cubic","SearchInput","_ref","accessibilityLabel","cancelButtonLabel","clearAccessibilityLabel","onCancel","onChangeText","placeholder","value","autoFocus","pressable","testID","searchInputRef","theme","isExperimental","inputCaretColor","inputWidth","get","width","appMarginDefault","cancelButtonWidth","setCancelButtonWidth","getCancelButtonWidth","_ref2","nativeEvent","layout","inputWidthWithCancel","inputAnimatedWidth","isFocused","animatedStyle","backgroundColor","cancelButtonAnimatedStyle","transform","translateX","CLAMP","opacity","clearButtonAnimatedStyle","showClearButton","length","scale","handleFocus","handleBlur","cancel","event","clear","_searchInputRef$
|
|
1
|
+
{"version":3,"names":["React","forwardRef","useCallback","useImperativeHandle","useRef","useState","Dimensions","Platform","Pressable","StyleSheet","TextInput","View","Animated","Easing","Extrapolate","interpolate","interpolateColor","useAnimatedStyle","useSharedValue","withTiming","IOColors","IOVisualCostants","useIOExperimentalDesign","useIOTheme","makeFontStyleObject","ButtonLink","Icon","inputPaddingHorizontal","inputPaddingClearButton","inputRadius","inputBgColorDefault","inputBgColorFocused","inputColorPlaceholder","iconMargin","iconColor","iconSize","iconCloseSize","inputFontSizePlaceholder","cancelButtonMargin","inputTransitionDuration","inputHeightIOS","inputHeightAndroid","AnimatedTextInput","createAnimatedComponent","AnimatedPressable","inputWithTimingConfig","duration","easing","inOut","cubic","SearchInput","_ref","ref","accessibilityLabel","cancelButtonLabel","clearAccessibilityLabel","onCancel","onChangeText","placeholder","value","autoFocus","pressable","testID","searchInputRef","theme","isExperimental","inputCaretColor","inputWidth","get","width","appMarginDefault","cancelButtonWidth","setCancelButtonWidth","getCancelButtonWidth","_ref2","nativeEvent","layout","inputWidthWithCancel","focus","_searchInputRef$curre","current","inputAnimatedWidth","isFocused","animatedStyle","backgroundColor","cancelButtonAnimatedStyle","transform","translateX","CLAMP","opacity","clearButtonAnimatedStyle","showClearButton","length","scale","handleFocus","handleBlur","cancel","event","clear","_searchInputRef$curre2","handleChangeText","text","renderSearchBar","createElement","style","styles","searchBar","searchInput","pointerEvents","iconContainer","name","size","color","inputMode","returnKeyType","accessibilityRole","textInput","OS","textInputIOS","textInputAndroid","placeholderLegacy","selectionColor","cursorColor","placeholderTextColor","onFocus","onBlur","clearButton","onPress","hitSlop","onLayout","cancelButton","label","create","flexDirection","justifyContent","alignItems","flexShrink","borderRadius","borderCurve","paddingLeft","paddingRight","flexGrow","height","marginRight","fontSize","position","right","marginLeft"],"sourceRoot":"../../../../src","sources":["components/searchInput/SearchInput.tsx"],"mappings":"AAAA;AACA,OAAOA,KAAK,IACVC,UAAU,EACVC,WAAW,EACXC,mBAAmB,EACnBC,MAAM,EACNC,QAAQ,QACH,OAAO;AACd,SAEEC,UAAU,EAIVC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,SAAS,EAETC,IAAI,QACC,cAAc;AACrB,OAAOC,QAAQ,IACbC,MAAM,EACNC,WAAW,EACXC,WAAW,EACXC,gBAAgB,EAChBC,gBAAgB,EAChBC,cAAc,EACdC,UAAU,QACL,yBAAyB;AAEhC,SACEC,QAAQ,EAERC,gBAAgB,EAChBC,uBAAuB,EACvBC,UAAU,QACL,YAAY;AACnB,SAASC,mBAAmB,QAAQ,mBAAmB;AACvD,SAASC,UAAU,QAAQ,YAAY;AACvC,SAA0BC,IAAI,QAAQ,UAAU;;AAEhD;AACA,MAAMC,sBAAsC,GAAG,EAAE;AACjD,MAAMC,uBAAuC,GAAG,CAAC;AACjD,MAAMC,WAAmB,GAAG,CAAC;AAC7B,MAAMC,mBAA+B,GAAGV,QAAQ,CAAC,SAAS,CAAC;AAC3D,MAAMW,mBAA+B,GAAGX,QAAQ,CAAC,UAAU,CAAC;AAC5D,MAAMY,qBAAiC,GAAGZ,QAAQ,CAAC,UAAU,CAAC;AAC9D,MAAMa,UAA0B,GAAG,CAAC;AACpC,MAAMC,SAAmB,GAAG,UAAU;AACtC,MAAMC,QAAyB,GAAG,EAAE;AACpC,MAAMC,aAA8B,GAAG,EAAE;AACzC,MAAMC,wBAAgC,GAAG,EAAE;AAC3C,MAAMC,kBAAkC,GAAG,EAAE;AAC7C,MAAMC,uBAA+B,GAAG,GAAG;AAC3C,MAAMC,cAAsB,GAAG,EAAE;AACjC,MAAMC,kBAA0B,GAAG,EAAE;AAiCrC,MAAMC,iBAAiB,GAAG9B,QAAQ,CAAC+B,uBAAuB,CAACjC,SAAS,CAAC;AACrE,MAAMkC,iBAAiB,GAAGhC,QAAQ,CAAC+B,uBAAuB,CAACnC,SAAS,CAAC;AAErE,MAAMqC,qBAAqB,GAAG;EAC5BC,QAAQ,EAAEP,uBAAuB;EACjCQ,MAAM,EAAElC,MAAM,CAACmC,KAAK,CAACnC,MAAM,CAACoC,KAAK;AACnC,CAAC;AAED,OAAO,MAAMC,WAAW,gBAAGjD,UAAU,CACnC,CAAAkD,IAAA,EAaEC,GAAG,KACA;EAAA,IAbH;IACEC,kBAAkB;IAClBC,iBAAiB;IACjBC,uBAAuB;IACvBC,QAAQ;IACRC,YAAY;IACZC,WAAW;IACXC,KAAK,GAAG,EAAE;IACVC,SAAS;IACTC,SAAS;IACTC;EACF,CAAC,GAAAX,IAAA;EAGD,MAAMY,cAAc,GAAG3D,MAAM,CAAY,IAAI,CAAC;;EAE9C;EACA,MAAM4D,KAAK,GAAGzC,UAAU,CAAC,CAAC;EAC1B,MAAM;IAAE0C;EAAe,CAAC,GAAG3C,uBAAuB,CAAC,CAAC;EACpD,MAAM4C,eAAe,GAAG9C,QAAQ,CAAC4C,KAAK,CAAC,yBAAyB,CAAC,CAAC;;EAElE;AACJ;AACA;EACI,MAAMG,UAAkB,GACtB7D,UAAU,CAAC8D,GAAG,CAAC,QAAQ,CAAC,CAACC,KAAK,GAAGhD,gBAAgB,CAACiD,gBAAgB,GAAG,CAAC;EAExE,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAC7CnE,QAAQ,CAA2B,CAAC,CAAC;EAEvC,MAAMoE,oBAAoB,GAAGC,KAAA,IAAwC;IAAA,IAAvC;MAAEC;IAA+B,CAAC,GAAAD,KAAA;IAC9DF,oBAAoB,CAACG,WAAW,CAACC,MAAM,CAACP,KAAK,CAAC;EAChD,CAAC;EAED,MAAMQ,oBAA4B,GAAGV,UAAU,GAAGI,iBAAiB;EAEnEpE,mBAAmB,CACjBiD,GAAG,EACH,OAAO;IACL0B,KAAKA,CAAA,EAAG;MAAA,IAAAC,qBAAA;MACN,CAAAA,qBAAA,GAAAhB,cAAc,CAACiB,OAAO,cAAAD,qBAAA,eAAtBA,qBAAA,CAAwBD,KAAK,CAAC,CAAC;IACjC;EACF,CAAC,CAAC,EACF,EACF,CAAC;;EAED;EACA,MAAMG,kBAAkB,GAAG/D,cAAc,CAASiD,UAAU,CAAC;EAC7D,MAAMe,SAAS,GAAGhE,cAAc,CAAC,CAAC,CAAC;;EAEnC;EACA,MAAMiE,aAAa,GAAGlE,gBAAgB,CAAC,OAAO;IAC5CoD,KAAK,EAAElD,UAAU,CAAC8D,kBAAkB,CAACtB,KAAK,EAAEd,qBAAqB,CAAC;IAClEuC,eAAe,EAAEpE,gBAAgB,CAC/BkE,SAAS,CAACvB,KAAK,EACf,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAAC7B,mBAAmB,EAAEC,mBAAmB,CAC3C;EACF,CAAC,CAAC,CAAC;;EAEH;EACA,MAAMsD,yBAAyB,GAAGpE,gBAAgB,CAAC,OAAO;IACxDqE,SAAS,EAAE,CACT;MACEC,UAAU,EAAExE,WAAW,CACrBmE,SAAS,CAACvB,KAAK,EACf,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAACY,iBAAiB,GAAGlD,gBAAgB,CAACiD,gBAAgB,EAAE,CAAC,CAAC,EAC1DxD,WAAW,CAAC0E,KACd;IACF,CAAC,CACF;IACDC,OAAO,EAAE1E,WAAW,CAACmE,SAAS,CAACvB,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;EACxD,CAAC,CAAC,CAAC;;EAEH;EACA,MAAM+B,wBAAwB,GAAGzE,gBAAgB,CAAC,MAAM;IACtD,MAAM0E,eAAe,GAAGhC,KAAK,CAACiC,MAAM,GAAG,CAAC;IAExC,OAAO;MACLN,SAAS,EAAE,CACT;QACEO,KAAK,EAAEF,eAAe,GAClBxE,UAAU,CAAC,CAAC,EAAE0B,qBAAqB,CAAC,GACpC1B,UAAU,CAAC,GAAG,EAAE0B,qBAAqB;MAC3C,CAAC,CACF;MACD4C,OAAO,EAAEtE,UAAU,CAACwE,eAAe,GAAG,CAAC,GAAG,CAAC,EAAE9C,qBAAqB;IACpE,CAAC;EACH,CAAC,EAAE,CAACc,KAAK,CAAC,CAAC;;EAEX;EACA,MAAMmC,WAAW,GAAGA,CAAA,KAAM;IACxBZ,SAAS,CAACvB,KAAK,GAAGxC,UAAU,CAAC,CAAC,EAAE0B,qBAAqB,CAAC;IACtDoC,kBAAkB,CAACtB,KAAK,GAAGkB,oBAAoB;EACjD,CAAC;EAED,MAAMkB,UAAU,GAAGA,CAAA,KAAM;IACvBb,SAAS,CAACvB,KAAK,GAAGxC,UAAU,CAAC,CAAC,EAAE0B,qBAAqB,CAAC;IACtDoC,kBAAkB,CAACtB,KAAK,GAAGQ,UAAU;EACvC,CAAC;EAED,MAAM6B,MAAM,GAAG9F,WAAW,CACvB+F,KAA4B,IAAK;IAChCxC,YAAY,aAAZA,YAAY,eAAZA,YAAY,CAAG,EAAE,CAAC;IAClBD,QAAQ,aAARA,QAAQ,eAARA,QAAQ,CAAGyC,KAAK,CAAC;EACnB,CAAC,EACD,CAACzC,QAAQ,EAAEC,YAAY,CACzB,CAAC;EAED,MAAMyC,KAAK,GAAGhG,WAAW,CAAC,MAAM;IAAA,IAAAiG,sBAAA;IAC9B1C,YAAY,aAAZA,YAAY,eAAZA,YAAY,CAAG,EAAE,CAAC;IAClB,CAAA0C,sBAAA,GAAApC,cAAc,CAACiB,OAAO,cAAAmB,sBAAA,eAAtBA,sBAAA,CAAwBD,KAAK,CAAC,CAAC;EACjC,CAAC,EAAE,CAACzC,YAAY,CAAC,CAAC;EAElB,MAAM2C,gBAAgB,GAAGlG,WAAW,CACjCmG,IAAY,IAAK5C,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAG4C,IAAI,CAAC,EACtC,CAAC5C,YAAY,CACf,CAAC;EAED,MAAM6C,eAAe,GAAGA,CAAA,kBACtBtG,KAAA,CAAAuG,aAAA,CAAC3F,QAAQ,CAACD,IAAI;IAAC6F,KAAK,EAAEC,MAAM,CAACC;EAAU,gBACrC1G,KAAA,CAAAuG,aAAA,CAAC3F,QAAQ,CAACD,IAAI;IACZ6F,KAAK,EAAE,CAACC,MAAM,CAACE,WAAW,EAAExB,aAAa,CAAE;IAC3CyB,aAAa,EAAE/C,SAAS,GAAG,MAAM,GAAG;EAAO,gBAE3C7D,KAAA,CAAAuG,aAAA,CAAC5F,IAAI;IAAC6F,KAAK,EAAEC,MAAM,CAACI;EAAc,gBAChC7G,KAAA,CAAAuG,aAAA,CAAC7E,IAAI;IAACoF,IAAI,EAAC,QAAQ;IAACC,IAAI,EAAE5E,QAAS;IAAC6E,KAAK,EAAE9E;EAAU,CAAE,CACnD,CAAC,eACPlC,KAAA,CAAAuG,aAAA,CAAC7D,iBAAiB;IAChBoB,MAAM,EAAEA,MAAO;IACfV,GAAG,EAAEW,cAAe;IACpBkD,SAAS,EAAC,QAAQ;IAClBC,aAAa,EAAC,QAAQ;IACtBC,iBAAiB,EAAE,QAAS;IAC5B9D,kBAAkB,EAAEA,kBAAmB;IACvCmD,KAAK,EAAE,CACLC,MAAM,CAACW,SAAS,EAChB7G,QAAQ,CAAC8G,EAAE,KAAK,KAAK,GACjBZ,MAAM,CAACa,YAAY,GACnBb,MAAM,CAACc,gBAAgB,EAC3BtD,cAAc,GAAGwC,MAAM,CAAC/C,WAAW,GAAG+C,MAAM,CAACe,iBAAiB,CAC9D;IACFC,cAAc,EAAEvD,eAAgB;IAChCwD,WAAW,EAAExD,eAAgB;IAC7BR,WAAW,EAAEA,WAAY;IACzBiE,oBAAoB,EAAE3F,qBAAsB;IAC5C4F,OAAO,EAAE9B,WAAY;IACrB+B,MAAM,EAAE9B,UAAW;IACnBtC,YAAY,EAAE2C,gBAAiB;IAC/BzC,KAAK,EAAEA,KAAM;IACbC,SAAS,EAAEA;EAAU,CACtB,CAAC,eACF5D,KAAA,CAAAuG,aAAA,CAAC3D,iBAAiB;IAChB4D,KAAK,EAAE,CAACC,MAAM,CAACqB,WAAW,EAAEpC,wBAAwB,CAAE;IACtDqC,OAAO,EAAE7B,KAAM;IACf7C,kBAAkB,EAAEE,uBAAwB;IAC5C4D,iBAAiB,EAAC,QAAQ;IAC1Ba,OAAO,EAAE;EAAG,gBAEZhI,KAAA,CAAAuG,aAAA,CAAC7E,IAAI;IAACoF,IAAI,EAAC,YAAY;IAACC,IAAI,EAAE3E,aAAc;IAAC4E,KAAK,EAAE9E;EAAU,CAAE,CAC/C,CACN,CAAC,eAChBlC,KAAA,CAAAuG,aAAA,CAAC3F,QAAQ,CAACD,IAAI;IACZsH,QAAQ,EAAExD,oBAAqB;IAC/B+B,KAAK,EAAE,CAACC,MAAM,CAACyB,YAAY,EAAE7C,yBAAyB;EAAE,gBAExDrF,KAAA,CAAAuG,aAAA,CAAC9E,UAAU;IAAC0G,KAAK,EAAE7E,iBAAkB;IAACyE,OAAO,EAAE/B;EAAO,CAAE,CAC3C,CACF,CAChB;EAED,OAAOnC,SAAS,gBACd7D,KAAA,CAAAuG,aAAA,CAAC/F,SAAS;IACR2G,iBAAiB,EAAC,QAAQ;IAC1B9D,kBAAkB,EAAEK,WAAY;IAChCqE,OAAO,EAAElE,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEkE;EAAQ,GAE3BzB,eAAe,CAAC,CACR,CAAC,GAEZA,eAAe,CAAC,CACjB;AACH,CACF,CAAC;AAED,MAAMG,MAAM,GAAGhG,UAAU,CAAC2H,MAAM,CAAC;EAC/B1B,SAAS,EAAE;IACTrC,KAAK,EAAE,MAAM;IACbgE,aAAa,EAAE,KAAK;IACpBC,cAAc,EAAE,YAAY;IAC5BC,UAAU,EAAE;EACd,CAAC;EACD5B,WAAW,EAAE;IACX6B,UAAU,EAAE,CAAC;IACbC,YAAY,EAAE5G,WAAW;IACzB6G,WAAW,EAAE,YAAY;IACzBL,aAAa,EAAE,KAAK;IACpBE,UAAU,EAAE,QAAQ;IACpBI,WAAW,EAAEhH,sBAAsB;IACnCiH,YAAY,EAAEhH;EAChB,CAAC;EACDwF,SAAS,EAAE;IACToB,UAAU,EAAE,CAAC;IACbK,QAAQ,EAAE;EACZ,CAAC;EACDvB,YAAY,EAAE;IACZwB,MAAM,EAAEtG;EACV,CAAC;EACD+E,gBAAgB,EAAE;IAChBuB,MAAM,EAAErG;EACV,CAAC;EACDoE,aAAa,EAAE;IACbkC,WAAW,EAAE9G;EACf,CAAC;EACDyB,WAAW,EAAE;IACXsF,QAAQ,EAAE3G,wBAAwB;IAClC,GAAGb,mBAAmB,CAAC,SAAS,EAAE,KAAK,EAAE,WAAW;EACtD,CAAC;EACDgG,iBAAiB,EAAE;IACjBwB,QAAQ,EAAE3G,wBAAwB;IAClC,GAAGb,mBAAmB,CAAC,SAAS,EAAE,KAAK,EAAE,cAAc;EACzD,CAAC;EACD0G,YAAY,EAAE;IACZe,QAAQ,EAAE,UAAU;IACpBC,KAAK,EAAE,CAAC;IACRP,WAAW,EAAErG;EACf,CAAC;EACDwF,WAAW,EAAE;IACXqB,UAAU,EAAElH;EACd;AACF,CAAC,CAAC"}
|
|
@@ -19,6 +19,8 @@ type CommonProps = WithTestID<{
|
|
|
19
19
|
scrollValues?: ScrollValues;
|
|
20
20
|
title: string;
|
|
21
21
|
transparent?: boolean;
|
|
22
|
+
variant?: "neutral" | "contrast";
|
|
23
|
+
backgroundColor?: string;
|
|
22
24
|
isModal?: boolean;
|
|
23
25
|
}>;
|
|
24
26
|
interface Base extends CommonProps {
|
|
@@ -51,6 +53,6 @@ export type HeaderSecondLevel = BackProps & (Base | OneAction | TwoActions | Thr
|
|
|
51
53
|
* @param {HeaderSecondLevel} props - The props of the component
|
|
52
54
|
* @returns React Element
|
|
53
55
|
*/
|
|
54
|
-
export declare const HeaderSecondLevel: ({ scrollValues, goBack, backAccessibilityLabel, backTestID, title, type, transparent, isModal, testID, firstAction, secondAction, thirdAction }: HeaderSecondLevel) => React.JSX.Element;
|
|
56
|
+
export declare const HeaderSecondLevel: ({ scrollValues, goBack, backAccessibilityLabel, backTestID, title, type, variant, backgroundColor, transparent, isModal, testID, firstAction, secondAction, thirdAction }: HeaderSecondLevel) => React.JSX.Element;
|
|
55
57
|
export default HeaderSecondLevel;
|
|
56
58
|
//# sourceMappingURL=HeaderSecondLevel.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderSecondLevel.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/HeaderSecondLevel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"HeaderSecondLevel.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/HeaderSecondLevel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,QAIN,MAAM,yBAAyB,CAAC;AAajC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAG/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,KAAK,YAAY,GAAG;IAClB,cAAc,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7C,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,SAAS,GACV;IACE,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GACD;IACE,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,sBAAsB,CAAC,EAAE,KAAK,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEN,KAAK,WAAW,GAAG,UAAU,CAAC;IAC5B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IAEd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,UAAU,IAAK,SAAQ,WAAW;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB;AAED,UAAU,SAAU,SAAQ,WAAW;IACrC,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB;AAED,UAAU,UAAW,SAAQ,WAAW;IACtC,IAAI,EAAE,YAAY,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,YAAY,EAAE,UAAU,CAAC;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB;AAED,UAAU,YAAa,SAAQ,WAAW;IACxC,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,EAAE,UAAU,CAAC;IACxB,YAAY,EAAE,UAAU,CAAC;IACzB,WAAW,EAAE,UAAU,CAAC;CACzB;AAED,MAAM,MAAM,iBAAiB,GAAG,SAAS,GACvC,CAAC,IAAI,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,CAAC,CAAC;AA8BjD;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,8KAe3B,iBAAiB,sBAiJnB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -22,6 +22,9 @@ type SearchInputProps = WithTestID<{
|
|
|
22
22
|
placeholder: TextInputProps["placeholder"];
|
|
23
23
|
autoFocus?: TextInputProps["autoFocus"];
|
|
24
24
|
}> & SearchInputActionProps;
|
|
25
|
-
export
|
|
25
|
+
export type SearchInputRef = {
|
|
26
|
+
focus: () => void;
|
|
27
|
+
};
|
|
28
|
+
export declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<SearchInputRef>>;
|
|
26
29
|
export {};
|
|
27
30
|
//# sourceMappingURL=SearchInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../../src/components/searchInput/SearchInput.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../../src/components/searchInput/SearchInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAGL,qBAAqB,EAOrB,cAAc,EAEf,MAAM,cAAc,CAAC;AAUtB,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AA6B7C,KAAK,yBAAyB,GAAG;IAC/B,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACjD,CAAC;AAEF,KAAK,sBAAsB,GACvB;IACE,SAAS,EAAE,yBAAyB,CAAC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,GACD;IACE,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEN,KAAK,gBAAgB,GAAG,UAAU,CAAC;IACjC,kBAAkB,EAAE,cAAc,CAAC,oBAAoB,CAAC,CAAC;IACzD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,uBAAuB,EAAE,MAAM,CAAC;IAChC,WAAW,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;CACzC,CAAC,GACA,sBAAsB,CAAC;AAEzB,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAUF,eAAO,MAAM,WAAW,yFA0LvB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,30 +1,33 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { ComponentProps } from "react";
|
|
2
3
|
import {
|
|
3
|
-
|
|
4
|
-
|
|
4
|
+
AccessibilityInfo,
|
|
5
|
+
ColorValue,
|
|
5
6
|
Platform,
|
|
6
|
-
|
|
7
|
-
|
|
7
|
+
StyleSheet,
|
|
8
|
+
View,
|
|
9
|
+
findNodeHandle
|
|
8
10
|
} from "react-native";
|
|
9
|
-
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
10
11
|
import Animated, {
|
|
11
12
|
interpolate,
|
|
12
13
|
interpolateColor,
|
|
13
14
|
useAnimatedStyle
|
|
14
15
|
} from "react-native-reanimated";
|
|
16
|
+
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
15
17
|
import {
|
|
18
|
+
IOColors,
|
|
16
19
|
IOStyles,
|
|
17
20
|
IOVisualCostants,
|
|
18
|
-
iconBtnSizeSmall,
|
|
19
|
-
IOColors,
|
|
20
21
|
hexToRgba,
|
|
21
|
-
|
|
22
|
+
iconBtnSizeSmall,
|
|
23
|
+
useIOExperimentalDesign,
|
|
24
|
+
useIOTheme
|
|
22
25
|
} from "../../core";
|
|
23
|
-
import {
|
|
24
|
-
import
|
|
26
|
+
import type { IOSpacer, IOSpacingScale } from "../../core/IOSpacing";
|
|
27
|
+
import { makeFontStyleObject } from "../../utils/fonts";
|
|
25
28
|
import { WithTestID } from "../../utils/types";
|
|
26
29
|
import IconButton from "../buttons/IconButton";
|
|
27
|
-
import {
|
|
30
|
+
import { HSpacer } from "../spacer";
|
|
28
31
|
import { ActionProp } from "./common";
|
|
29
32
|
|
|
30
33
|
type ScrollValues = {
|
|
@@ -49,6 +52,8 @@ type CommonProps = WithTestID<{
|
|
|
49
52
|
title: string;
|
|
50
53
|
// Visual attributes
|
|
51
54
|
transparent?: boolean;
|
|
55
|
+
variant?: "neutral" | "contrast";
|
|
56
|
+
backgroundColor?: string;
|
|
52
57
|
isModal?: boolean;
|
|
53
58
|
}>;
|
|
54
59
|
|
|
@@ -83,10 +88,7 @@ interface ThreeActions extends CommonProps {
|
|
|
83
88
|
export type HeaderSecondLevel = BackProps &
|
|
84
89
|
(Base | OneAction | TwoActions | ThreeActions);
|
|
85
90
|
|
|
86
|
-
const
|
|
87
|
-
const borderColorDisabled = hexToRgba(IOColors["grey-100"], 0);
|
|
88
|
-
const headerTransparent = hexToRgba(IOColors[HEADER_BG_COLOR], 0);
|
|
89
|
-
const titleHorizontalMargin: IOSpacer = 16;
|
|
91
|
+
const titleHorizontalMargin: IOSpacingScale = 16;
|
|
90
92
|
|
|
91
93
|
const styles = StyleSheet.create({
|
|
92
94
|
headerInner: {
|
|
@@ -126,6 +128,8 @@ export const HeaderSecondLevel = ({
|
|
|
126
128
|
backTestID,
|
|
127
129
|
title,
|
|
128
130
|
type,
|
|
131
|
+
variant = "neutral",
|
|
132
|
+
backgroundColor,
|
|
129
133
|
transparent = false,
|
|
130
134
|
isModal = false,
|
|
131
135
|
testID,
|
|
@@ -136,9 +140,31 @@ export const HeaderSecondLevel = ({
|
|
|
136
140
|
const titleRef = React.createRef<View>();
|
|
137
141
|
|
|
138
142
|
const { isExperimental } = useIOExperimentalDesign();
|
|
143
|
+
const theme = useIOTheme();
|
|
139
144
|
const insets = useSafeAreaInsets();
|
|
140
145
|
const isTitleAccessible = React.useMemo(() => !!title.trim(), [title]);
|
|
141
146
|
|
|
147
|
+
const iconButtonColor: ComponentProps<typeof IconButton>["color"] =
|
|
148
|
+
variant === "neutral" ? "neutral" : "contrast";
|
|
149
|
+
const titleColor: ColorValue =
|
|
150
|
+
variant === "neutral"
|
|
151
|
+
? IOColors[theme["textHeading-default"]]
|
|
152
|
+
: IOColors.white;
|
|
153
|
+
|
|
154
|
+
/* Visual attributes when there are transitions between states */
|
|
155
|
+
const HEADER_DEFAULT_BG_COLOR: IOColors = "white";
|
|
156
|
+
|
|
157
|
+
const headerBgColorTransparentState = backgroundColor
|
|
158
|
+
? hexToRgba(backgroundColor, 0)
|
|
159
|
+
: hexToRgba(IOColors[HEADER_DEFAULT_BG_COLOR], 0);
|
|
160
|
+
const headerBgColorSolidState =
|
|
161
|
+
backgroundColor ?? IOColors[HEADER_DEFAULT_BG_COLOR];
|
|
162
|
+
|
|
163
|
+
const borderColorTransparentState = backgroundColor
|
|
164
|
+
? hexToRgba(backgroundColor, 0)
|
|
165
|
+
: hexToRgba(IOColors["grey-100"], 0);
|
|
166
|
+
const borderColorSolidState = backgroundColor ?? IOColors["grey-100"];
|
|
167
|
+
|
|
142
168
|
React.useLayoutEffect(() => {
|
|
143
169
|
if (isTitleAccessible) {
|
|
144
170
|
const reactNode = findNodeHandle(titleRef.current);
|
|
@@ -149,19 +175,18 @@ export const HeaderSecondLevel = ({
|
|
|
149
175
|
});
|
|
150
176
|
|
|
151
177
|
const headerWrapperAnimatedStyle = useAnimatedStyle(() => ({
|
|
152
|
-
backgroundColor:
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
: IOColors[HEADER_BG_COLOR],
|
|
178
|
+
backgroundColor: scrollValues
|
|
179
|
+
? interpolateColor(
|
|
180
|
+
scrollValues.contentOffsetY.value,
|
|
181
|
+
[0, scrollValues.triggerOffset],
|
|
182
|
+
[headerBgColorTransparentState, headerBgColorSolidState]
|
|
183
|
+
)
|
|
184
|
+
: headerBgColorSolidState,
|
|
160
185
|
borderColor: scrollValues
|
|
161
186
|
? interpolateColor(
|
|
162
187
|
scrollValues.contentOffsetY.value,
|
|
163
188
|
[0, scrollValues.triggerOffset],
|
|
164
|
-
[
|
|
189
|
+
[borderColorTransparentState, borderColorSolidState]
|
|
165
190
|
)
|
|
166
191
|
: "transparent"
|
|
167
192
|
}));
|
|
@@ -180,11 +205,11 @@ export const HeaderSecondLevel = ({
|
|
|
180
205
|
<Animated.View
|
|
181
206
|
accessibilityRole="header"
|
|
182
207
|
style={[
|
|
208
|
+
{ borderBottomWidth: 1, borderColor: borderColorTransparentState },
|
|
209
|
+
isModal ? { borderColor: borderColorSolidState } : {},
|
|
183
210
|
transparent
|
|
184
|
-
?
|
|
185
|
-
: { backgroundColor:
|
|
186
|
-
{ borderBottomWidth: 1 },
|
|
187
|
-
headerWrapperAnimatedStyle
|
|
211
|
+
? headerWrapperAnimatedStyle
|
|
212
|
+
: { backgroundColor: headerBgColorSolidState }
|
|
188
213
|
]}
|
|
189
214
|
>
|
|
190
215
|
<Animated.View
|
|
@@ -197,7 +222,7 @@ export const HeaderSecondLevel = ({
|
|
|
197
222
|
android: "backAndroid",
|
|
198
223
|
default: "backiOS"
|
|
199
224
|
})}
|
|
200
|
-
color=
|
|
225
|
+
color={iconButtonColor}
|
|
201
226
|
onPress={goBack}
|
|
202
227
|
accessibilityLabel={backAccessibilityLabel}
|
|
203
228
|
testID={backTestID}
|
|
@@ -221,6 +246,7 @@ export const HeaderSecondLevel = ({
|
|
|
221
246
|
accessible={false}
|
|
222
247
|
style={[
|
|
223
248
|
styles.headerTitle,
|
|
249
|
+
{ color: titleColor },
|
|
224
250
|
isExperimental
|
|
225
251
|
? styles.headerTitleFont
|
|
226
252
|
: styles.headerTitleLegacyFont,
|
|
@@ -233,21 +259,21 @@ export const HeaderSecondLevel = ({
|
|
|
233
259
|
<View style={[IOStyles.row, { flexShrink: 0 }]}>
|
|
234
260
|
{type === "threeActions" && (
|
|
235
261
|
<>
|
|
236
|
-
<IconButton {...thirdAction} color=
|
|
262
|
+
<IconButton {...thirdAction} color={iconButtonColor} />
|
|
237
263
|
{/* Same as above */}
|
|
238
264
|
<HSpacer size={16} />
|
|
239
265
|
</>
|
|
240
266
|
)}
|
|
241
267
|
{(type === "twoActions" || type === "threeActions") && (
|
|
242
268
|
<>
|
|
243
|
-
<IconButton {...secondAction} color=
|
|
269
|
+
<IconButton {...secondAction} color={iconButtonColor} />
|
|
244
270
|
{/* Ideally, with the "gap" flex property,
|
|
245
271
|
we can get rid of these ugly constructs */}
|
|
246
272
|
<HSpacer size={16} />
|
|
247
273
|
</>
|
|
248
274
|
)}
|
|
249
275
|
{type !== "base" ? (
|
|
250
|
-
<IconButton {...firstAction} color=
|
|
276
|
+
<IconButton {...firstAction} color={iconButtonColor} />
|
|
251
277
|
) : (
|
|
252
278
|
<HSpacer size={iconBtnSizeSmall as IOSpacer} />
|
|
253
279
|
)}
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
/* eslint-disable functional/immutable-data */
|
|
2
|
-
import React, {
|
|
2
|
+
import React, {
|
|
3
|
+
forwardRef,
|
|
4
|
+
useCallback,
|
|
5
|
+
useImperativeHandle,
|
|
6
|
+
useRef,
|
|
7
|
+
useState
|
|
8
|
+
} from "react";
|
|
3
9
|
import {
|
|
4
10
|
ColorValue,
|
|
5
11
|
Dimensions,
|
|
@@ -78,6 +84,10 @@ type SearchInputProps = WithTestID<{
|
|
|
78
84
|
}> &
|
|
79
85
|
SearchInputActionProps;
|
|
80
86
|
|
|
87
|
+
export type SearchInputRef = {
|
|
88
|
+
focus: () => void;
|
|
89
|
+
};
|
|
90
|
+
|
|
81
91
|
const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
|
|
82
92
|
const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
|
|
83
93
|
|
|
@@ -86,178 +96,193 @@ const inputWithTimingConfig = {
|
|
|
86
96
|
easing: Easing.inOut(Easing.cubic)
|
|
87
97
|
};
|
|
88
98
|
|
|
89
|
-
export const SearchInput = (
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
const inputCaretColor = IOColors[theme["interactiveElem-default"]];
|
|
99
|
+
export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
|
|
100
|
+
(
|
|
101
|
+
{
|
|
102
|
+
accessibilityLabel,
|
|
103
|
+
cancelButtonLabel,
|
|
104
|
+
clearAccessibilityLabel,
|
|
105
|
+
onCancel,
|
|
106
|
+
onChangeText,
|
|
107
|
+
placeholder,
|
|
108
|
+
value = "",
|
|
109
|
+
autoFocus,
|
|
110
|
+
pressable,
|
|
111
|
+
testID
|
|
112
|
+
},
|
|
113
|
+
ref
|
|
114
|
+
) => {
|
|
115
|
+
const searchInputRef = useRef<TextInput>(null);
|
|
107
116
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
Dimensions.get("window").width - IOVisualCostants.appMarginDefault * 2;
|
|
117
|
+
/* Component visual attributes */
|
|
118
|
+
const theme = useIOTheme();
|
|
119
|
+
const { isExperimental } = useIOExperimentalDesign();
|
|
120
|
+
const inputCaretColor = IOColors[theme["interactiveElem-default"]];
|
|
113
121
|
|
|
114
|
-
|
|
115
|
-
|
|
122
|
+
/* Widths used for the transition:
|
|
123
|
+
- `SearchInput` entire width
|
|
124
|
+
- `Cancel` button */
|
|
125
|
+
const inputWidth: number =
|
|
126
|
+
Dimensions.get("window").width - IOVisualCostants.appMarginDefault * 2;
|
|
116
127
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
};
|
|
128
|
+
const [cancelButtonWidth, setCancelButtonWidth] =
|
|
129
|
+
useState<LayoutRectangle["width"]>(0);
|
|
120
130
|
|
|
121
|
-
|
|
131
|
+
const getCancelButtonWidth = ({ nativeEvent }: LayoutChangeEvent) => {
|
|
132
|
+
setCancelButtonWidth(nativeEvent.layout.width);
|
|
133
|
+
};
|
|
122
134
|
|
|
123
|
-
|
|
124
|
-
const inputAnimatedWidth = useSharedValue<number>(inputWidth);
|
|
125
|
-
const isFocused = useSharedValue(0);
|
|
135
|
+
const inputWidthWithCancel: number = inputWidth - cancelButtonWidth;
|
|
126
136
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
137
|
+
useImperativeHandle(
|
|
138
|
+
ref,
|
|
139
|
+
() => ({
|
|
140
|
+
focus() {
|
|
141
|
+
searchInputRef.current?.focus();
|
|
142
|
+
}
|
|
143
|
+
}),
|
|
144
|
+
[]
|
|
145
|
+
);
|
|
136
146
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
{
|
|
141
|
-
translateX: interpolate(
|
|
142
|
-
isFocused.value,
|
|
143
|
-
[0, 1],
|
|
144
|
-
[cancelButtonWidth + IOVisualCostants.appMarginDefault, 0],
|
|
145
|
-
Extrapolate.CLAMP
|
|
146
|
-
)
|
|
147
|
-
}
|
|
148
|
-
],
|
|
149
|
-
opacity: interpolate(isFocused.value, [0, 1], [0.5, 1])
|
|
150
|
-
}));
|
|
147
|
+
/* Reanimated styles */
|
|
148
|
+
const inputAnimatedWidth = useSharedValue<number>(inputWidth);
|
|
149
|
+
const isFocused = useSharedValue(0);
|
|
151
150
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
151
|
+
/* Applied to the `SearchInput` */
|
|
152
|
+
const animatedStyle = useAnimatedStyle(() => ({
|
|
153
|
+
width: withTiming(inputAnimatedWidth.value, inputWithTimingConfig),
|
|
154
|
+
backgroundColor: interpolateColor(
|
|
155
|
+
isFocused.value,
|
|
156
|
+
[0, 1],
|
|
157
|
+
[inputBgColorDefault, inputBgColorFocused]
|
|
158
|
+
)
|
|
159
|
+
}));
|
|
155
160
|
|
|
156
|
-
|
|
161
|
+
/* Applied to the `Cancel` button */
|
|
162
|
+
const cancelButtonAnimatedStyle = useAnimatedStyle(() => ({
|
|
157
163
|
transform: [
|
|
158
164
|
{
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
165
|
+
translateX: interpolate(
|
|
166
|
+
isFocused.value,
|
|
167
|
+
[0, 1],
|
|
168
|
+
[cancelButtonWidth + IOVisualCostants.appMarginDefault, 0],
|
|
169
|
+
Extrapolate.CLAMP
|
|
170
|
+
)
|
|
162
171
|
}
|
|
163
172
|
],
|
|
164
|
-
opacity:
|
|
173
|
+
opacity: interpolate(isFocused.value, [0, 1], [0.5, 1])
|
|
174
|
+
}));
|
|
175
|
+
|
|
176
|
+
/* Applied to the `Clear` button inside the `SearchInput` */
|
|
177
|
+
const clearButtonAnimatedStyle = useAnimatedStyle(() => {
|
|
178
|
+
const showClearButton = value.length > 0;
|
|
179
|
+
|
|
180
|
+
return {
|
|
181
|
+
transform: [
|
|
182
|
+
{
|
|
183
|
+
scale: showClearButton
|
|
184
|
+
? withTiming(1, inputWithTimingConfig)
|
|
185
|
+
: withTiming(0.5, inputWithTimingConfig)
|
|
186
|
+
}
|
|
187
|
+
],
|
|
188
|
+
opacity: withTiming(showClearButton ? 1 : 0, inputWithTimingConfig)
|
|
189
|
+
};
|
|
190
|
+
}, [value]);
|
|
191
|
+
|
|
192
|
+
/* Related event handlers */
|
|
193
|
+
const handleFocus = () => {
|
|
194
|
+
isFocused.value = withTiming(1, inputWithTimingConfig);
|
|
195
|
+
inputAnimatedWidth.value = inputWidthWithCancel;
|
|
165
196
|
};
|
|
166
|
-
}, [value]);
|
|
167
197
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
};
|
|
198
|
+
const handleBlur = () => {
|
|
199
|
+
isFocused.value = withTiming(0, inputWithTimingConfig);
|
|
200
|
+
inputAnimatedWidth.value = inputWidth;
|
|
201
|
+
};
|
|
173
202
|
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
203
|
+
const cancel = useCallback(
|
|
204
|
+
(event: GestureResponderEvent) => {
|
|
205
|
+
onChangeText?.("");
|
|
206
|
+
onCancel?.(event);
|
|
207
|
+
},
|
|
208
|
+
[onCancel, onChangeText]
|
|
209
|
+
);
|
|
178
210
|
|
|
179
|
-
|
|
180
|
-
(event: GestureResponderEvent) => {
|
|
211
|
+
const clear = useCallback(() => {
|
|
181
212
|
onChangeText?.("");
|
|
182
|
-
|
|
183
|
-
},
|
|
184
|
-
[onCancel, onChangeText]
|
|
185
|
-
);
|
|
186
|
-
|
|
187
|
-
const clear = useCallback(() => {
|
|
188
|
-
onChangeText?.("");
|
|
189
|
-
searchInputRef.current?.clear();
|
|
190
|
-
}, [onChangeText]);
|
|
213
|
+
searchInputRef.current?.clear();
|
|
214
|
+
}, [onChangeText]);
|
|
191
215
|
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
216
|
+
const handleChangeText = useCallback(
|
|
217
|
+
(text: string) => onChangeText?.(text),
|
|
218
|
+
[onChangeText]
|
|
219
|
+
);
|
|
196
220
|
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
>
|
|
203
|
-
<View style={styles.iconContainer}>
|
|
204
|
-
<Icon name="search" size={iconSize} color={iconColor} />
|
|
205
|
-
</View>
|
|
206
|
-
<AnimatedTextInput
|
|
207
|
-
testID={testID}
|
|
208
|
-
ref={searchInputRef}
|
|
209
|
-
inputMode="search"
|
|
210
|
-
returnKeyType="search"
|
|
211
|
-
accessibilityRole={"search"}
|
|
212
|
-
accessibilityLabel={accessibilityLabel}
|
|
213
|
-
style={[
|
|
214
|
-
styles.textInput,
|
|
215
|
-
Platform.OS === "ios"
|
|
216
|
-
? styles.textInputIOS
|
|
217
|
-
: styles.textInputAndroid,
|
|
218
|
-
isExperimental ? styles.placeholder : styles.placeholderLegacy
|
|
219
|
-
]}
|
|
220
|
-
selectionColor={inputCaretColor}
|
|
221
|
-
cursorColor={inputCaretColor}
|
|
222
|
-
placeholder={placeholder}
|
|
223
|
-
placeholderTextColor={inputColorPlaceholder}
|
|
224
|
-
onFocus={handleFocus}
|
|
225
|
-
onBlur={handleBlur}
|
|
226
|
-
onChangeText={handleChangeText}
|
|
227
|
-
value={value}
|
|
228
|
-
autoFocus={autoFocus}
|
|
229
|
-
/>
|
|
230
|
-
<AnimatedPressable
|
|
231
|
-
style={[styles.clearButton, clearButtonAnimatedStyle]}
|
|
232
|
-
onPress={clear}
|
|
233
|
-
accessibilityLabel={clearAccessibilityLabel}
|
|
234
|
-
accessibilityRole="button"
|
|
235
|
-
hitSlop={16}
|
|
221
|
+
const renderSearchBar = () => (
|
|
222
|
+
<Animated.View style={styles.searchBar}>
|
|
223
|
+
<Animated.View
|
|
224
|
+
style={[styles.searchInput, animatedStyle]}
|
|
225
|
+
pointerEvents={pressable ? "none" : "auto"}
|
|
236
226
|
>
|
|
237
|
-
<
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
227
|
+
<View style={styles.iconContainer}>
|
|
228
|
+
<Icon name="search" size={iconSize} color={iconColor} />
|
|
229
|
+
</View>
|
|
230
|
+
<AnimatedTextInput
|
|
231
|
+
testID={testID}
|
|
232
|
+
ref={searchInputRef}
|
|
233
|
+
inputMode="search"
|
|
234
|
+
returnKeyType="search"
|
|
235
|
+
accessibilityRole={"search"}
|
|
236
|
+
accessibilityLabel={accessibilityLabel}
|
|
237
|
+
style={[
|
|
238
|
+
styles.textInput,
|
|
239
|
+
Platform.OS === "ios"
|
|
240
|
+
? styles.textInputIOS
|
|
241
|
+
: styles.textInputAndroid,
|
|
242
|
+
isExperimental ? styles.placeholder : styles.placeholderLegacy
|
|
243
|
+
]}
|
|
244
|
+
selectionColor={inputCaretColor}
|
|
245
|
+
cursorColor={inputCaretColor}
|
|
246
|
+
placeholder={placeholder}
|
|
247
|
+
placeholderTextColor={inputColorPlaceholder}
|
|
248
|
+
onFocus={handleFocus}
|
|
249
|
+
onBlur={handleBlur}
|
|
250
|
+
onChangeText={handleChangeText}
|
|
251
|
+
value={value}
|
|
252
|
+
autoFocus={autoFocus}
|
|
253
|
+
/>
|
|
254
|
+
<AnimatedPressable
|
|
255
|
+
style={[styles.clearButton, clearButtonAnimatedStyle]}
|
|
256
|
+
onPress={clear}
|
|
257
|
+
accessibilityLabel={clearAccessibilityLabel}
|
|
258
|
+
accessibilityRole="button"
|
|
259
|
+
hitSlop={16}
|
|
260
|
+
>
|
|
261
|
+
<Icon name="closeSmall" size={iconCloseSize} color={iconColor} />
|
|
262
|
+
</AnimatedPressable>
|
|
263
|
+
</Animated.View>
|
|
264
|
+
<Animated.View
|
|
265
|
+
onLayout={getCancelButtonWidth}
|
|
266
|
+
style={[styles.cancelButton, cancelButtonAnimatedStyle]}
|
|
267
|
+
>
|
|
268
|
+
<ButtonLink label={cancelButtonLabel} onPress={cancel} />
|
|
269
|
+
</Animated.View>
|
|
245
270
|
</Animated.View>
|
|
246
|
-
|
|
247
|
-
);
|
|
271
|
+
);
|
|
248
272
|
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
}
|
|
273
|
+
return pressable ? (
|
|
274
|
+
<Pressable
|
|
275
|
+
accessibilityRole="button"
|
|
276
|
+
accessibilityLabel={placeholder}
|
|
277
|
+
onPress={pressable?.onPress}
|
|
278
|
+
>
|
|
279
|
+
{renderSearchBar()}
|
|
280
|
+
</Pressable>
|
|
281
|
+
) : (
|
|
282
|
+
renderSearchBar()
|
|
283
|
+
);
|
|
284
|
+
}
|
|
285
|
+
);
|
|
261
286
|
|
|
262
287
|
const styles = StyleSheet.create({
|
|
263
288
|
searchBar: {
|