@fountain-ui/core 3.0.0-alpha.20 → 3.0.0-alpha.22
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/build/commonjs/Accordion/Accordion.js +8 -4
- package/build/commonjs/Accordion/Accordion.js.map +1 -1
- package/build/commonjs/Accordion/AccordionProps.js.map +1 -1
- package/build/commonjs/AppBar/AppBar.js +1 -1
- package/build/commonjs/AppBar/AppBar.js.map +1 -1
- package/build/commonjs/ButtonBase/ButtonBase.js +1 -1
- package/build/commonjs/ButtonBase/ButtonBase.js.map +1 -1
- package/build/commonjs/Image/Image.js +1 -1
- package/build/commonjs/Image/Image.js.map +1 -1
- package/build/commonjs/Pagination/NumberPagination.js +3 -1
- package/build/commonjs/Pagination/NumberPagination.js.map +1 -1
- package/build/commonjs/Tab/useVariantStyleMap.js +1 -1
- package/build/commonjs/Tab/useVariantStyleMap.js.map +1 -1
- package/build/commonjs/Tabs/Tabs.js +7 -4
- package/build/commonjs/Tabs/Tabs.js.map +1 -1
- package/build/commonjs/Tabs/useTabsStyle.js +51 -26
- package/build/commonjs/Tabs/useTabsStyle.js.map +1 -1
- package/build/commonjs/TextField/TextField.js +26 -7
- package/build/commonjs/TextField/TextField.js.map +1 -1
- package/build/commonjs/TextField/useVariantStyleMap.js +6 -9
- package/build/commonjs/TextField/useVariantStyleMap.js.map +1 -1
- package/build/commonjs/Toolbar/BackButton/BackButton.js +4 -4
- package/build/commonjs/Toolbar/BackButton/BackButton.js.map +1 -1
- package/build/commonjs/hooks/useCollapsibleAppBar.js +2 -9
- package/build/commonjs/hooks/useCollapsibleAppBar.js.map +1 -1
- package/build/commonjs/hooks/useFadeInAppBar.js +1 -1
- package/build/commonjs/hooks/useFadeInAppBar.js.map +1 -1
- package/build/commonjs/internal/icons/AppBarChevronLeft.js +23 -0
- package/build/commonjs/internal/icons/AppBarChevronLeft.js.map +1 -0
- package/build/commonjs/internal/icons/Clear.js +3 -3
- package/build/commonjs/internal/icons/Clear.js.map +1 -1
- package/build/commonjs/internal/icons/Search.js +2 -2
- package/build/commonjs/internal/icons/Search.js.map +1 -1
- package/build/commonjs/internal/icons/index.js +8 -0
- package/build/commonjs/internal/icons/index.js.map +1 -1
- package/build/module/Accordion/Accordion.js +8 -4
- package/build/module/Accordion/Accordion.js.map +1 -1
- package/build/module/Accordion/AccordionProps.js.map +1 -1
- package/build/module/AppBar/AppBar.js +1 -1
- package/build/module/AppBar/AppBar.js.map +1 -1
- package/build/module/ButtonBase/ButtonBase.js +1 -1
- package/build/module/ButtonBase/ButtonBase.js.map +1 -1
- package/build/module/Image/Image.js +1 -1
- package/build/module/Image/Image.js.map +1 -1
- package/build/module/Pagination/NumberPagination.js +3 -1
- package/build/module/Pagination/NumberPagination.js.map +1 -1
- package/build/module/Tab/useVariantStyleMap.js +1 -1
- package/build/module/Tab/useVariantStyleMap.js.map +1 -1
- package/build/module/Tabs/Tabs.js +7 -4
- package/build/module/Tabs/Tabs.js.map +1 -1
- package/build/module/Tabs/useTabsStyle.js +51 -26
- package/build/module/Tabs/useTabsStyle.js.map +1 -1
- package/build/module/TextField/TextField.js +26 -7
- package/build/module/TextField/TextField.js.map +1 -1
- package/build/module/TextField/useVariantStyleMap.js +6 -9
- package/build/module/TextField/useVariantStyleMap.js.map +1 -1
- package/build/module/Toolbar/BackButton/BackButton.js +5 -5
- package/build/module/Toolbar/BackButton/BackButton.js.map +1 -1
- package/build/module/hooks/useCollapsibleAppBar.js +3 -9
- package/build/module/hooks/useCollapsibleAppBar.js.map +1 -1
- package/build/module/hooks/useFadeInAppBar.js +1 -1
- package/build/module/hooks/useFadeInAppBar.js.map +1 -1
- package/build/module/internal/icons/AppBarChevronLeft.js +9 -0
- package/build/module/internal/icons/AppBarChevronLeft.js.map +1 -0
- package/build/module/internal/icons/Clear.js +3 -3
- package/build/module/internal/icons/Clear.js.map +1 -1
- package/build/module/internal/icons/Search.js +2 -2
- package/build/module/internal/icons/Search.js.map +1 -1
- package/build/module/internal/icons/index.js +1 -0
- package/build/module/internal/icons/index.js.map +1 -1
- package/build/typescript/Accordion/AccordionProps.d.ts +4 -1
- package/build/typescript/Tabs/useTabsStyle.d.ts +2 -1
- package/build/typescript/hooks/useCollapsibleAppBar.d.ts +0 -1
- package/build/typescript/internal/icons/AppBarChevronLeft.d.ts +131 -0
- package/build/typescript/internal/icons/index.d.ts +1 -0
- package/package.json +2 -2
- package/src/Accordion/Accordion.tsx +7 -1
- package/src/Accordion/AccordionProps.ts +4 -2
- package/src/AppBar/AppBar.tsx +1 -1
- package/src/ButtonBase/ButtonBase.tsx +1 -1
- package/src/Image/Image.tsx +1 -1
- package/src/Pagination/NumberPagination.tsx +6 -1
- package/src/Tab/useVariantStyleMap.ts +1 -1
- package/src/Tabs/Tabs.tsx +12 -2
- package/src/Tabs/useTabsStyle.ts +36 -10
- package/src/TextField/TextField.tsx +28 -11
- package/src/TextField/useVariantStyleMap.ts +4 -6
- package/src/Toolbar/BackButton/BackButton.tsx +7 -5
- package/src/hooks/useCollapsibleAppBar.ts +3 -22
- package/src/hooks/useFadeInAppBar.ts +1 -1
- package/src/internal/icons/AppBarChevronLeft.tsx +15 -0
- package/src/internal/icons/Clear.tsx +3 -3
- package/src/internal/icons/Search.tsx +2 -2
- package/src/internal/icons/index.ts +1 -0
|
@@ -40,6 +40,20 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
40
40
|
secureToggleButton: {
|
|
41
41
|
alignItems: 'flex-end',
|
|
42
42
|
padding: 0
|
|
43
|
+
},
|
|
44
|
+
searchIconContainer: {
|
|
45
|
+
left: 12,
|
|
46
|
+
position: 'absolute'
|
|
47
|
+
},
|
|
48
|
+
loadingSinner: {
|
|
49
|
+
height: 19,
|
|
50
|
+
width: 19
|
|
51
|
+
},
|
|
52
|
+
clearButton: {
|
|
53
|
+
height: 36,
|
|
54
|
+
position: 'absolute',
|
|
55
|
+
right: 2,
|
|
56
|
+
width: 32
|
|
43
57
|
}
|
|
44
58
|
});
|
|
45
59
|
|
|
@@ -109,11 +123,15 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
|
|
|
109
123
|
style: titleFontStyle
|
|
110
124
|
}) : null, /*#__PURE__*/_react.default.createElement(_Row.default, {
|
|
111
125
|
style: containerStyle
|
|
112
|
-
}, isSearch ?
|
|
126
|
+
}, isSearch ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
127
|
+
style: styles.searchIconContainer
|
|
128
|
+
}, isLoading ? /*#__PURE__*/_react.default.createElement(_icons.LoadingSpinner, {
|
|
129
|
+
style: styles.loadingSinner
|
|
130
|
+
}) : /*#__PURE__*/_react.default.createElement(_icons.Search, {
|
|
113
131
|
color: 'base',
|
|
114
|
-
height:
|
|
115
|
-
width:
|
|
116
|
-
}) : null, /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, _extends({
|
|
132
|
+
height: 19,
|
|
133
|
+
width: 19
|
|
134
|
+
})) : null, /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, _extends({
|
|
117
135
|
autoFocus: autoFocus,
|
|
118
136
|
editable: !disabled,
|
|
119
137
|
onBlur: handleBlur,
|
|
@@ -127,10 +145,11 @@ const TextField = /*#__PURE__*/_react.default.forwardRef(function TextField(prop
|
|
|
127
145
|
}, otherProps)), showClearButton && value !== null && value !== void 0 && value.length && value.length > 0 ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
|
|
128
146
|
color: 'base',
|
|
129
147
|
children: /*#__PURE__*/_react.default.createElement(_icons.Clear, {
|
|
130
|
-
height:
|
|
131
|
-
width: 15
|
|
148
|
+
height: 17.31,
|
|
149
|
+
width: 15.9
|
|
132
150
|
}),
|
|
133
|
-
onPress: handleClear
|
|
151
|
+
onPress: handleClear,
|
|
152
|
+
style: styles.clearButton
|
|
134
153
|
}) : null, secureTextEntryProp && !isSearch ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
|
|
135
154
|
color: 'base',
|
|
136
155
|
onPress: handleSecureTogglePress,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["styles","StyleSheet","create","root","alignItems","flexGrow","input","secureToggleButton","padding","TextField","React","forwardRef","props","ref","autoFocus","containerStyle","containerStyleProp","editable","hint","isLoading","onBlur","onChangeText","onChangeTextProp","onFocus","placeholderTextColor","placeholderTextColorProp","secureTextEntry","secureTextEntryProp","showClearButton","showClearButtonProp","status","style","styleProp","title","value","variant","otherProps","isSearch","disabled","theme","useTheme","isFocused","setIsFocused","useState","setSecureTextEntry","variantStyles","useVariantStyleMap","handleBlur","event","handleFocus","handleSecureTogglePress","current","handleChangeText","text","handleClear","titleFontStyle","createFontStyle","selector","typography","caption1","color","palette","strong","inputStyle","css","Platform","OS","outlineWidth","disabledLabel","opacity","length","hintStyle"],"sources":["TextField.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';\nimport { Platform, StyleSheet, Text, TextInput, View } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { css } from '@fountain-ui/styles';\nimport IconButton from '../IconButton/IconButton';\nimport { Clear, EyeOff, EyeOn, LoadingSpinner, Search } from '../internal/icons';\nimport Row from '../Row';\nimport { createFontStyle, useTheme } from '../styles';\nimport type TextFieldProps from './TextFieldProps';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n root: {\n alignItems: 'center',\n flexGrow: 1,\n },\n input: {\n flexGrow: 1,\n },\n secureToggleButton: {\n alignItems: 'flex-end',\n padding: 0,\n },\n});\n\nconst TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {\n const {\n autoFocus,\n containerStyle: containerStyleProp,\n editable = true,\n hint,\n isLoading,\n onBlur,\n onChangeText: onChangeTextProp,\n onFocus,\n placeholderTextColor: placeholderTextColorProp,\n secureTextEntry: secureTextEntryProp,\n showClearButton: showClearButtonProp,\n status = 'default' as TextFieldStatus,\n style: styleProp,\n title,\n value,\n variant = 'default' as TextFieldVariant,\n ...otherProps\n } = props;\n\n const isSearch = variant === 'search';\n\n const disabled = !editable || isLoading;\n\n const theme = useTheme();\n\n const [isFocused, setIsFocused] = useState<boolean>(autoFocus ?? false);\n const [secureTextEntry, setSecureTextEntry] = useState<boolean>(secureTextEntryProp ?? false);\n\n const variantStyles = useVariantStyleMap(variant, status, isFocused);\n\n const handleBlur = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n setIsFocused(false);\n onBlur?.(event);\n };\n\n const handleFocus = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n setIsFocused(true);\n onFocus?.(event);\n };\n\n const handleSecureTogglePress = () => {\n setSecureTextEntry((current) => !current);\n };\n\n const handleChangeText = (text: string) => {\n onChangeTextProp?.(text);\n };\n\n const handleClear = () => {\n handleChangeText('');\n };\n\n const showClearButton = showClearButtonProp ?? isSearch;\n\n const titleFontStyle = createFontStyle(theme, {\n selector: (typography) => typography.caption1['semiBold'],\n color: theme.palette.text.strong,\n });\n\n const inputStyle = css([\n styles.input,\n variantStyles.inputStyle,\n Platform.OS === 'web' ? { outlineWidth: 0 } as FountainUiStyle : {},\n styleProp,\n ]);\n\n const placeholderTextColor = placeholderTextColorProp ?? theme.palette.status.disabledLabel;\n\n const containerStyle = css([\n styles.root,\n variantStyles.containerStyle,\n { opacity: disabled ? 0.3 : 1 },\n containerStyleProp,\n ]);\n\n return (\n <View>\n {title && !isSearch ? (\n <Text\n children={title}\n style={titleFontStyle}\n />\n ) : null}\n\n <Row style={containerStyle}>\n {isSearch ? (\n isLoading ? (\n <LoadingSpinner/>\n ) : (\n <Search\n color={'base'}\n height={18}\n width={18}\n />\n )\n ) : null}\n\n <TextInput\n autoFocus={autoFocus}\n editable={!disabled}\n onBlur={handleBlur}\n onChangeText={handleChangeText}\n onFocus={handleFocus}\n placeholderTextColor={placeholderTextColor}\n ref={ref}\n secureTextEntry={secureTextEntry}\n style={inputStyle}\n value={value}\n {...otherProps}\n />\n\n {showClearButton && value?.length && value.length > 0 ? (\n <IconButton\n color={'base'}\n children={\n <Clear\n height={13.75}\n width={15}\n />\n }\n onPress={handleClear}\n />\n ) : null}\n\n {secureTextEntryProp && !isSearch ? (\n <IconButton\n color={'base'}\n onPress={handleSecureTogglePress}\n style={styles.secureToggleButton}\n >\n {secureTextEntry ? (\n <EyeOff\n height={19}\n width={17.42}\n />\n ) : (\n <EyeOn\n height={19}\n width={17.42}\n />\n )}\n </IconButton>\n ) : null}\n </Row>\n\n {hint && !isSearch ? (\n <Text\n children={hint}\n style={variantStyles.hintStyle}\n />\n ) : null}\n </View>\n );\n});\n\nexport default TextField;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["styles","StyleSheet","create","root","alignItems","flexGrow","input","secureToggleButton","padding","searchIconContainer","left","position","loadingSinner","height","width","clearButton","right","TextField","React","forwardRef","props","ref","autoFocus","containerStyle","containerStyleProp","editable","hint","isLoading","onBlur","onChangeText","onChangeTextProp","onFocus","placeholderTextColor","placeholderTextColorProp","secureTextEntry","secureTextEntryProp","showClearButton","showClearButtonProp","status","style","styleProp","title","value","variant","otherProps","isSearch","disabled","theme","useTheme","isFocused","setIsFocused","useState","setSecureTextEntry","variantStyles","useVariantStyleMap","handleBlur","event","handleFocus","handleSecureTogglePress","current","handleChangeText","text","handleClear","titleFontStyle","createFontStyle","selector","typography","caption1","color","palette","strong","inputStyle","css","Platform","OS","outlineWidth","disabledLabel","opacity","length","hintStyle"],"sources":["TextField.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';\nimport { Platform, StyleSheet, Text, TextInput, View } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { css } from '@fountain-ui/styles';\nimport IconButton from '../IconButton/IconButton';\nimport { Clear, EyeOff, EyeOn, LoadingSpinner, Search } from '../internal/icons';\nimport Row from '../Row';\nimport { createFontStyle, useTheme } from '../styles';\nimport type TextFieldProps from './TextFieldProps';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\nconst styles = StyleSheet.create({\n root: {\n alignItems: 'center',\n flexGrow: 1,\n },\n input: {\n flexGrow: 1,\n },\n secureToggleButton: {\n alignItems: 'flex-end',\n padding: 0,\n },\n searchIconContainer: {\n left: 12,\n position: 'absolute',\n },\n loadingSinner: {\n height: 19,\n width: 19,\n },\n clearButton: {\n height: 36,\n position: 'absolute',\n right: 2,\n width: 32,\n },\n});\n\nconst TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {\n const {\n autoFocus,\n containerStyle: containerStyleProp,\n editable = true,\n hint,\n isLoading,\n onBlur,\n onChangeText: onChangeTextProp,\n onFocus,\n placeholderTextColor: placeholderTextColorProp,\n secureTextEntry: secureTextEntryProp,\n showClearButton: showClearButtonProp,\n status = 'default' as TextFieldStatus,\n style: styleProp,\n title,\n value,\n variant = 'default' as TextFieldVariant,\n ...otherProps\n } = props;\n\n const isSearch = variant === 'search';\n\n const disabled = !editable || isLoading;\n\n const theme = useTheme();\n\n const [isFocused, setIsFocused] = useState<boolean>(autoFocus ?? false);\n const [secureTextEntry, setSecureTextEntry] = useState<boolean>(secureTextEntryProp ?? false);\n\n const variantStyles = useVariantStyleMap(variant, status, isFocused);\n\n const handleBlur = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n setIsFocused(false);\n onBlur?.(event);\n };\n\n const handleFocus = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {\n setIsFocused(true);\n onFocus?.(event);\n };\n\n const handleSecureTogglePress = () => {\n setSecureTextEntry((current) => !current);\n };\n\n const handleChangeText = (text: string) => {\n onChangeTextProp?.(text);\n };\n\n const handleClear = () => {\n handleChangeText('');\n };\n\n const showClearButton = showClearButtonProp ?? isSearch;\n\n const titleFontStyle = createFontStyle(theme, {\n selector: (typography) => typography.caption1['semiBold'],\n color: theme.palette.text.strong,\n });\n\n const inputStyle = css([\n styles.input,\n variantStyles.inputStyle,\n Platform.OS === 'web' ? { outlineWidth: 0 } as FountainUiStyle : {},\n styleProp,\n ]);\n\n const placeholderTextColor = placeholderTextColorProp ?? theme.palette.status.disabledLabel;\n\n const containerStyle = css([\n styles.root,\n variantStyles.containerStyle,\n { opacity: disabled ? 0.3 : 1 },\n containerStyleProp,\n ]);\n\n return (\n <View>\n {title && !isSearch ? (\n <Text\n children={title}\n style={titleFontStyle}\n />\n ) : null}\n\n <Row style={containerStyle}>\n {isSearch ? (\n <View style={styles.searchIconContainer}>\n {isLoading ? (\n <LoadingSpinner style={styles.loadingSinner}/>\n ) : (\n <Search\n color={'base'}\n height={19}\n width={19}\n />\n )}\n </View>\n ) : null}\n\n <TextInput\n autoFocus={autoFocus}\n editable={!disabled}\n onBlur={handleBlur}\n onChangeText={handleChangeText}\n onFocus={handleFocus}\n placeholderTextColor={placeholderTextColor}\n ref={ref}\n secureTextEntry={secureTextEntry}\n style={inputStyle}\n value={value}\n {...otherProps}\n />\n\n {showClearButton && value?.length && value.length > 0 ? (\n <IconButton\n color={'base'}\n children={\n <Clear\n height={17.31}\n width={15.9}\n />\n }\n onPress={handleClear}\n style={styles.clearButton}\n />\n ) : null}\n\n {secureTextEntryProp && !isSearch ? (\n <IconButton\n color={'base'}\n onPress={handleSecureTogglePress}\n style={styles.secureToggleButton}\n >\n {secureTextEntry ? (\n <EyeOff\n height={19}\n width={17.42}\n />\n ) : (\n <EyeOn\n height={19}\n width={17.42}\n />\n )}\n </IconButton>\n ) : null}\n </Row>\n\n {hint && !isSearch ? (\n <Text\n children={hint}\n style={variantStyles.hintStyle}\n />\n ) : null}\n </View>\n );\n});\n\nexport default TextField;\n"],"mappings":"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"}
|
|
@@ -47,7 +47,8 @@ function useVariantStyleMap(variant, status, isFocused) {
|
|
|
47
47
|
return {
|
|
48
48
|
containerStyle: {
|
|
49
49
|
borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,
|
|
50
|
-
borderBottomWidth: 1
|
|
50
|
+
borderBottomWidth: 1,
|
|
51
|
+
minHeight: 60
|
|
51
52
|
},
|
|
52
53
|
inputStyle: {
|
|
53
54
|
paddingLeft: 0,
|
|
@@ -79,15 +80,11 @@ function useVariantStyleMap(variant, status, isFocused) {
|
|
|
79
80
|
borderColor: theme.palette.border.base,
|
|
80
81
|
borderRadius: theme.shape.radius.md,
|
|
81
82
|
borderWidth: 0.5,
|
|
82
|
-
|
|
83
|
-
|
|
83
|
+
paddingBottom: 12,
|
|
84
|
+
paddingHorizontal: 39,
|
|
85
|
+
paddingTop: 11
|
|
84
86
|
},
|
|
85
|
-
inputStyle: {
|
|
86
|
-
paddingBottom: theme.spacing(2.5),
|
|
87
|
-
paddingLeft: theme.spacing(2),
|
|
88
|
-
paddingRight: theme.spacing(1),
|
|
89
|
-
paddingTop: theme.spacing(2.25),
|
|
90
|
-
...(0, _styles2.createFontStyle)(theme, {
|
|
87
|
+
inputStyle: { ...(0, _styles2.createFontStyle)(theme, {
|
|
91
88
|
selector: _ => (0, _styles.typographyOf)({
|
|
92
89
|
fontSize: 16,
|
|
93
90
|
lineHeight: 19.2,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","useTheme","useMemo","containerStyle","borderBottomColor","strong","borderBottomWidth","inputStyle","paddingLeft","paddingRight","spacing","paddingVertical","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","color","hintStyle","marginTop","typography","caption1","backgroundColor","surface","supportive","borderRadius","shape","radius","md","borderWidth","paddingBottom","paddingTop"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle, Theme } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\n\ninterface VariantStyleMap {\n containerStyle?: FountainUiStyle;\n inputStyle?: FountainUiStyle;\n hintStyle?: FountainUiStyle;\n}\n\nfunction useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: string; hintColor: string; } {\n switch (status) {\n default:\n case 'default':\n return {\n borderColor: theme.palette.border.base,\n hintColor: theme.palette.text.weak,\n };\n case 'success':\n return {\n borderColor: theme.palette.status.success,\n hintColor: theme.palette.status.success,\n };\n case 'error':\n return {\n borderColor: theme.palette.status.danger,\n hintColor: theme.palette.status.danger,\n };\n }\n}\n\nexport default function useVariantStyleMap(variant: TextFieldVariant, status: TextFieldStatus, isFocused: boolean): VariantStyleMap {\n const theme = useTheme();\n\n const {\n borderColor,\n hintColor,\n } = useStatusColor(theme, status);\n\n return useMemo(() => {\n switch (variant) {\n default:\n case 'default':\n return {\n containerStyle: {\n borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,\n borderBottomWidth: 1,\n },\n inputStyle: {\n paddingLeft: 0,\n paddingRight: theme.spacing(4),\n paddingVertical: theme.spacing(4),\n ...createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 18,\n lineHeight: 27,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: 0,\n }),\n color: theme.palette.text.strong,\n }),\n },\n hintStyle: {\n marginTop: theme.spacing(2),\n ...createFontStyle(theme, {\n selector: (typography) => typography.caption1['regular'],\n color: hintColor,\n }),\n },\n };\n case 'search':\n return {\n containerStyle: {\n backgroundColor: theme.palette.surface.supportive,\n borderColor: theme.palette.border.base,\n borderRadius: theme.shape.radius.md,\n borderWidth: 0.5,\n
|
|
1
|
+
{"version":3,"names":["useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","useTheme","useMemo","containerStyle","borderBottomColor","strong","borderBottomWidth","minHeight","inputStyle","paddingLeft","paddingRight","spacing","paddingVertical","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","color","hintStyle","marginTop","typography","caption1","backgroundColor","surface","supportive","borderRadius","shape","radius","md","borderWidth","paddingBottom","paddingHorizontal","paddingTop"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle, Theme } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\n\ninterface VariantStyleMap {\n containerStyle?: FountainUiStyle;\n inputStyle?: FountainUiStyle;\n hintStyle?: FountainUiStyle;\n}\n\nfunction useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: string; hintColor: string; } {\n switch (status) {\n default:\n case 'default':\n return {\n borderColor: theme.palette.border.base,\n hintColor: theme.palette.text.weak,\n };\n case 'success':\n return {\n borderColor: theme.palette.status.success,\n hintColor: theme.palette.status.success,\n };\n case 'error':\n return {\n borderColor: theme.palette.status.danger,\n hintColor: theme.palette.status.danger,\n };\n }\n}\n\nexport default function useVariantStyleMap(variant: TextFieldVariant, status: TextFieldStatus, isFocused: boolean): VariantStyleMap {\n const theme = useTheme();\n\n const {\n borderColor,\n hintColor,\n } = useStatusColor(theme, status);\n\n return useMemo(() => {\n switch (variant) {\n default:\n case 'default':\n return {\n containerStyle: {\n borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,\n borderBottomWidth: 1,\n minHeight: 60,\n },\n inputStyle: {\n paddingLeft: 0,\n paddingRight: theme.spacing(4),\n paddingVertical: theme.spacing(4),\n ...createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 18,\n lineHeight: 27,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: 0,\n }),\n color: theme.palette.text.strong,\n }),\n },\n hintStyle: {\n marginTop: theme.spacing(2),\n ...createFontStyle(theme, {\n selector: (typography) => typography.caption1['regular'],\n color: hintColor,\n }),\n },\n };\n case 'search':\n return {\n containerStyle: {\n backgroundColor: theme.palette.surface.supportive,\n borderColor: theme.palette.border.base,\n borderRadius: theme.shape.radius.md,\n borderWidth: 0.5,\n paddingBottom: 12,\n paddingHorizontal: 39,\n paddingTop: 11,\n },\n inputStyle: {\n ...createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 16,\n lineHeight: 19.2,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: -0.16,\n }),\n color: theme.palette.text.strong,\n }),\n },\n };\n }\n }, [theme, borderColor, hintColor, variant, isFocused]);\n}\n"],"mappings":"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"}
|
|
@@ -39,9 +39,9 @@ function BackButton(props) {
|
|
|
39
39
|
const rootStyle = (0, _styles.css)([styles.root, styleProp]);
|
|
40
40
|
return /*#__PURE__*/_react.default.createElement(_IconButton.default, _extends({
|
|
41
41
|
style: rootStyle
|
|
42
|
-
}, otherProps), /*#__PURE__*/_react.default.createElement(_internal.
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}));
|
|
42
|
+
}, otherProps), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_internal.AppBarChevronLeft, {
|
|
43
|
+
height: 18,
|
|
44
|
+
width: 10
|
|
45
|
+
})));
|
|
46
46
|
}
|
|
47
47
|
//# sourceMappingURL=BackButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["styles","StyleSheet","create","root","height","left","paddingLeft","paddingRight","paddingVertical","position","width","BackButton","props","style","styleProp","otherProps","rootStyle","css"],"sources":["BackButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\nimport IconButton from '../../IconButton';\nimport {
|
|
1
|
+
{"version":3,"names":["styles","StyleSheet","create","root","height","left","paddingLeft","paddingRight","paddingVertical","position","width","BackButton","props","style","styleProp","otherProps","rootStyle","css"],"sources":["BackButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\nimport IconButton from '../../IconButton';\nimport { AppBarChevronLeft } from '../../internal';\nimport type BackButtonProps from './BackButtonProps';\nimport { css } from '@fountain-ui/styles';\n\nconst styles = StyleSheet.create({\n root: {\n height: 40,\n left: 4,\n paddingLeft: 5,\n paddingRight: 11,\n paddingVertical: 8,\n position: 'absolute',\n width: 40,\n },\n});\n\nexport default function BackButton(props: BackButtonProps) {\n const {\n style: styleProp,\n ...otherProps\n } = props;\n\n const rootStyle = css([\n styles.root,\n styleProp,\n ]);\n\n return (\n <IconButton\n style={rootStyle}\n {...otherProps}\n >\n <React.Fragment>\n <AppBarChevronLeft\n height={18}\n width={10}\n />\n </React.Fragment>\n </IconButton>\n );\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAEA,MAAMA,MAAM,GAAGC,uBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,MAAM,EAAE,EADN;IAEFC,IAAI,EAAE,CAFJ;IAGFC,WAAW,EAAE,CAHX;IAIFC,YAAY,EAAE,EAJZ;IAKFC,eAAe,EAAE,CALf;IAMFC,QAAQ,EAAE,UANR;IAOFC,KAAK,EAAE;EAPL;AADuB,CAAlB,CAAf;;AAYe,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,KAAK,EAAEC,SADL;IAEF,GAAGC;EAFD,IAGFH,KAHJ;EAKA,MAAMI,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBjB,MAAM,CAACG,IADW,EAElBW,SAFkB,CAAJ,CAAlB;EAKA,oBACI,6BAAC,mBAAD;IACI,KAAK,EAAEE;EADX,GAEQD,UAFR,gBAII,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,2BAAD;IACI,MAAM,EAAE,EADZ;IAEI,KAAK,EAAE;EAFX,EADJ,CAJJ,CADJ;AAaH"}
|
|
@@ -13,8 +13,6 @@ var _reactNativeReanimated = require("react-native-reanimated");
|
|
|
13
13
|
|
|
14
14
|
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
|
|
15
15
|
|
|
16
|
-
var _styles = require("@fountain-ui/styles");
|
|
17
|
-
|
|
18
16
|
var _hooks = require("../internal/hooks");
|
|
19
17
|
|
|
20
18
|
var _useAppbarStyles = _interopRequireDefault(require("./useAppbarStyles"));
|
|
@@ -23,7 +21,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
23
21
|
|
|
24
22
|
const defaultOptions = {
|
|
25
23
|
keyboardDismissMode: 'none',
|
|
26
|
-
dividerExposureMode: 'overlapped',
|
|
27
24
|
supportsReverseScroll: true
|
|
28
25
|
};
|
|
29
26
|
const ANIMATION_CONFIG = {
|
|
@@ -38,7 +35,6 @@ function useCollapsibleAppBar() {
|
|
|
38
35
|
let userOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultOptions;
|
|
39
36
|
const {
|
|
40
37
|
keyboardDismissMode,
|
|
41
|
-
dividerExposureMode,
|
|
42
38
|
supportsReverseScroll
|
|
43
39
|
} = { ...defaultOptions,
|
|
44
40
|
...userOptions
|
|
@@ -53,17 +49,14 @@ function useCollapsibleAppBar() {
|
|
|
53
49
|
const lastOffsetY = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
54
50
|
const overlapped = (0, _reactNativeReanimated.useSharedValue)(false);
|
|
55
51
|
const [isScrolled, setIsScrolled] = (0, _react.useState)(false);
|
|
56
|
-
const theme = (0, _styles.useTheme)();
|
|
57
52
|
const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
58
53
|
const transform = [{
|
|
59
54
|
translateY: translateY.value
|
|
60
55
|
}];
|
|
61
56
|
return {
|
|
62
|
-
transform
|
|
63
|
-
borderColor: dividerExposureMode === 'always' || overlapped.value ? theme.palette.divider : TRANSPARENT,
|
|
64
|
-
borderBottomWidth: _reactNative.StyleSheet.hairlineWidth
|
|
57
|
+
transform
|
|
65
58
|
};
|
|
66
|
-
}, [
|
|
59
|
+
}, []);
|
|
67
60
|
const indexRef = (0, _react.useRef)(0);
|
|
68
61
|
const offsetsRef = (0, _react.useRef)([]);
|
|
69
62
|
const onScrollViewChanged = (0, _react.useCallback)(nextIndex => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["defaultOptions","keyboardDismissMode","dividerExposureMode","supportsReverseScroll","ANIMATION_CONFIG","duration","TRANSPARENT","SUPPORTS_DRAG_DETECTION","Platform","OS","dismissKeyboard","Keyboard","dismiss","useCollapsibleAppBar","userOptions","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","appBarHeight","onAppBarLayout","useHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","isScrolled","setIsScrolled","useState","theme","useTheme","animatedStyle","useAnimatedStyle","transform","value","borderColor","palette","divider","borderBottomWidth","StyleSheet","hairlineWidth","indexRef","useRef","offsetsRef","onScrollViewChanged","useCallback","nextIndex","prevIndex","current","savedOffsetY","withTiming","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","maxTy","dy","Math","min","max","minOffsetY","maxOffsetY","contentSize","height","layoutMeasurement","safeOffsetY","safeLastOffsetY","newTranslateY","onEndDrag","onMomentumEnd","ty","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useCollapsibleAppBar.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport {\n Falsy,\n Keyboard,\n Platform,\n RegisteredStyle,\n ScrollViewProps,\n StyleSheet,\n ViewProps,\n ViewStyle,\n} from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport {\n runOnJS,\n useAnimatedScrollHandler,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useTheme } from '@fountain-ui/styles';\nimport { useHeight } from '../internal/hooks';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n top?: number;\n bottom?: number;\n left?: number;\n right?: number;\n}\n\nexport interface Options {\n keyboardDismissMode?: 'none' | 'on-drag';\n dividerExposureMode?: 'always' | 'overlapped';\n supportsReverseScroll?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n appBarStyle: ViewStyleProp;\n onAppBarLayout: OnLayoutCallback;\n onCollapsibleToolbarLayout: OnLayoutCallback;\n onScroll: OnScroll;\n onScrollViewChanged: (index: number) => void;\n scrollContentInsets: ContentInsets;\n isScrolled: boolean;\n}\n\nconst defaultOptions: Required<Options> = {\n keyboardDismissMode: 'none',\n dividerExposureMode: 'overlapped',\n supportsReverseScroll: true,\n};\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 100 };\nconst TRANSPARENT = '#FFFFFF00';\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\nconst dismissKeyboard = () => Keyboard.dismiss();\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n const { keyboardDismissMode, dividerExposureMode, supportsReverseScroll }: Required<Options> = {\n ...defaultOptions,\n ...userOptions,\n };\n\n const styles = useAppbarStyles();\n\n const safeAreaInsets = useSafeAreaInsets();\n\n const [appBarHeight, onAppBarLayout] = useHeight();\n const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);\n\n const translateY = useSharedValue<number>(0);\n const lastTranslateY = useSharedValue<number>(0);\n const lastOffsetY = useSharedValue<number>(0);\n const overlapped = useSharedValue<boolean>(false);\n\n const [isScrolled, setIsScrolled] = useState<boolean>(false);\n\n const theme = useTheme();\n\n const animatedStyle = useAnimatedStyle(() => {\n const transform = [{ translateY: translateY.value }];\n\n return {\n transform,\n borderColor: dividerExposureMode === 'always' || overlapped.value ? theme.palette.divider : TRANSPARENT,\n borderBottomWidth: StyleSheet.hairlineWidth,\n };\n }, [\n theme,\n dividerExposureMode,\n ]);\n\n const indexRef = useRef<number>(0);\n const offsetsRef = useRef<Array<number>>([]);\n\n const onScrollViewChanged = useCallback((nextIndex: number) => {\n const prevIndex = indexRef.current;\n if (prevIndex === nextIndex) {\n return;\n }\n\n offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n lastOffsetY.value = savedOffsetY;\n\n indexRef.current = nextIndex;\n\n // Determine whether to overlap every time index is changed.\n overlapped.value = savedOffsetY > 0;\n\n // If next ScrollView's offset is too short, expand app bar.\n if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n translateY.value = withTiming(0, ANIMATION_CONFIG);\n }\n }, [appBarHeight]);\n\n const scrollHandler = useAnimatedScrollHandler({\n onBeginDrag: () => {\n if (keyboardDismissMode === 'on-drag') {\n runOnJS(dismissKeyboard)();\n }\n lastTranslateY.value = translateY.value;\n },\n onMomentumBegin: () => {\n lastTranslateY.value = translateY.value;\n },\n onScroll: (event) => {\n const offsetY = event.contentOffset.y;\n\n if (!isScrolled && offsetY > 0) {\n runOnJS(setIsScrolled)(true);\n } else if (isScrolled && offsetY <= 0) {\n runOnJS(setIsScrolled)(false);\n }\n\n const maxTy = maxTranslateY.value;\n\n if (SUPPORTS_DRAG_DETECTION) {\n const dy = offsetY - lastOffsetY.value;\n\n translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n overlapped.value = offsetY + translateY.value > 0;\n } else {\n const minOffsetY = -maxTy;\n const maxOffsetY = event.contentSize.height - event.layoutMeasurement.height;\n\n const safeOffsetY = Math.min(Math.max(offsetY, minOffsetY), maxOffsetY);\n const safeLastOffsetY = Math.min(Math.max(lastOffsetY.value, minOffsetY), maxOffsetY);\n const dy = safeOffsetY - safeLastOffsetY;\n\n const newTranslateY = safeOffsetY <= minOffsetY\n ? 0\n : supportsReverseScroll\n ? dy === 0\n ? lastTranslateY.value\n : dy > 0\n ? maxTy\n : 0\n : maxTy;\n\n translateY.value = withTiming(newTranslateY, ANIMATION_CONFIG);\n lastTranslateY.value = newTranslateY;\n\n overlapped.value = offsetY > 0;\n\n lastOffsetY.value = offsetY;\n }\n },\n onEndDrag: (event) => {\n lastOffsetY.value = event.contentOffset.y;\n },\n onMomentumEnd: (event) => {\n const offsetY = event.contentOffset.y;\n\n lastOffsetY.value = offsetY;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n // If toolbar is already positioned on edge, do nothing.\n if (ty <= maxTy || ty >= 0) {\n return;\n }\n\n const threshold = maxTy * 0.5;\n\n const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n overlapped.value = offsetY + nextTranslateY > 0;\n\n translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);\n },\n });\n\n const hasCollapsible = collapsibleToolbarHeight > 0;\n\n const appBarStyle = [\n animatedStyle,\n { paddingTop: safeAreaInsets.top },\n hasCollapsible ? styles.floating : undefined,\n ];\n\n return {\n appBarStyle,\n onAppBarLayout,\n onCollapsibleToolbarLayout,\n onScroll: scrollHandler,\n onScrollViewChanged,\n scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n isScrolled,\n };\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["defaultOptions","keyboardDismissMode","supportsReverseScroll","ANIMATION_CONFIG","duration","TRANSPARENT","SUPPORTS_DRAG_DETECTION","Platform","OS","dismissKeyboard","Keyboard","dismiss","useCollapsibleAppBar","userOptions","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","appBarHeight","onAppBarLayout","useHeight","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","isScrolled","setIsScrolled","useState","animatedStyle","useAnimatedStyle","transform","value","indexRef","useRef","offsetsRef","onScrollViewChanged","useCallback","nextIndex","prevIndex","current","savedOffsetY","withTiming","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","maxTy","dy","Math","min","max","minOffsetY","maxOffsetY","contentSize","height","layoutMeasurement","safeOffsetY","safeLastOffsetY","newTranslateY","onEndDrag","onMomentumEnd","ty","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","floating","undefined","scrollContentInsets"],"sources":["useCollapsibleAppBar.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport type { WithTimingConfig } from 'react-native-reanimated';\nimport {\n runOnJS,\n useAnimatedScrollHandler,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withTiming,\n} from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useHeight } from '../internal/hooks';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n top?: number;\n bottom?: number;\n left?: number;\n right?: number;\n}\n\nexport interface Options {\n keyboardDismissMode?: 'none' | 'on-drag';\n supportsReverseScroll?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n appBarStyle: ViewStyleProp;\n onAppBarLayout: OnLayoutCallback;\n onCollapsibleToolbarLayout: OnLayoutCallback;\n onScroll: OnScroll;\n onScrollViewChanged: (index: number) => void;\n scrollContentInsets: ContentInsets;\n isScrolled: boolean;\n}\n\nconst defaultOptions: Required<Options> = {\n keyboardDismissMode: 'none',\n supportsReverseScroll: true,\n};\n\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 100 };\nconst TRANSPARENT = '#FFFFFF00';\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\nconst dismissKeyboard = () => Keyboard.dismiss();\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n const { keyboardDismissMode, supportsReverseScroll }: Required<Options> = {\n ...defaultOptions,\n ...userOptions,\n };\n\n const styles = useAppbarStyles();\n\n const safeAreaInsets = useSafeAreaInsets();\n\n const [appBarHeight, onAppBarLayout] = useHeight();\n const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);\n\n const translateY = useSharedValue<number>(0);\n const lastTranslateY = useSharedValue<number>(0);\n const lastOffsetY = useSharedValue<number>(0);\n const overlapped = useSharedValue<boolean>(false);\n\n const [isScrolled, setIsScrolled] = useState<boolean>(false);\n\n const animatedStyle = useAnimatedStyle(() => {\n const transform = [{ translateY: translateY.value }];\n\n return {\n transform,\n };\n }, []);\n\n const indexRef = useRef<number>(0);\n const offsetsRef = useRef<Array<number>>([]);\n\n const onScrollViewChanged = useCallback((nextIndex: number) => {\n const prevIndex = indexRef.current;\n if (prevIndex === nextIndex) {\n return;\n }\n\n offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n lastOffsetY.value = savedOffsetY;\n\n indexRef.current = nextIndex;\n\n // Determine whether to overlap every time index is changed.\n overlapped.value = savedOffsetY > 0;\n\n // If next ScrollView's offset is too short, expand app bar.\n if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n translateY.value = withTiming(0, ANIMATION_CONFIG);\n }\n }, [appBarHeight]);\n\n const scrollHandler = useAnimatedScrollHandler({\n onBeginDrag: () => {\n if (keyboardDismissMode === 'on-drag') {\n runOnJS(dismissKeyboard)();\n }\n lastTranslateY.value = translateY.value;\n },\n onMomentumBegin: () => {\n lastTranslateY.value = translateY.value;\n },\n onScroll: (event) => {\n const offsetY = event.contentOffset.y;\n\n if (!isScrolled && offsetY > 0) {\n runOnJS(setIsScrolled)(true);\n } else if (isScrolled && offsetY <= 0) {\n runOnJS(setIsScrolled)(false);\n }\n\n const maxTy = maxTranslateY.value;\n\n if (SUPPORTS_DRAG_DETECTION) {\n const dy = offsetY - lastOffsetY.value;\n\n translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n overlapped.value = offsetY + translateY.value > 0;\n } else {\n const minOffsetY = -maxTy;\n const maxOffsetY = event.contentSize.height - event.layoutMeasurement.height;\n\n const safeOffsetY = Math.min(Math.max(offsetY, minOffsetY), maxOffsetY);\n const safeLastOffsetY = Math.min(Math.max(lastOffsetY.value, minOffsetY), maxOffsetY);\n const dy = safeOffsetY - safeLastOffsetY;\n\n const newTranslateY = safeOffsetY <= minOffsetY\n ? 0\n : supportsReverseScroll\n ? dy === 0\n ? lastTranslateY.value\n : dy > 0\n ? maxTy\n : 0\n : maxTy;\n\n translateY.value = withTiming(newTranslateY, ANIMATION_CONFIG);\n lastTranslateY.value = newTranslateY;\n\n overlapped.value = offsetY > 0;\n\n lastOffsetY.value = offsetY;\n }\n },\n onEndDrag: (event) => {\n lastOffsetY.value = event.contentOffset.y;\n },\n onMomentumEnd: (event) => {\n const offsetY = event.contentOffset.y;\n\n lastOffsetY.value = offsetY;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n // If toolbar is already positioned on edge, do nothing.\n if (ty <= maxTy || ty >= 0) {\n return;\n }\n\n const threshold = maxTy * 0.5;\n\n const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n overlapped.value = offsetY + nextTranslateY > 0;\n\n translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);\n },\n });\n\n const hasCollapsible = collapsibleToolbarHeight > 0;\n\n const appBarStyle = [\n animatedStyle,\n { paddingTop: safeAreaInsets.top },\n hasCollapsible ? styles.floating : undefined,\n ];\n\n return {\n appBarStyle,\n onAppBarLayout,\n onCollapsibleToolbarLayout,\n onScroll: scrollHandler,\n onScrollViewChanged,\n scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n isScrolled,\n };\n};\n"],"mappings":"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"}
|
|
@@ -55,7 +55,7 @@ function useFadeInAppBar() {
|
|
|
55
55
|
const dy = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
56
56
|
const lastOffsetY = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
57
57
|
const normalized = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
58
|
-
const originalBackgroundColor = theme.palette.background.
|
|
58
|
+
const originalBackgroundColor = theme.palette.background.base;
|
|
59
59
|
const rgbValues = (0, _react.useMemo)(() => (0, _utils.rgb)(originalBackgroundColor), [originalBackgroundColor]);
|
|
60
60
|
const animatedAppBarStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
61
61
|
const [r, g, b] = rgbValues;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["defaultOptions","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","dismissKeyboard","Keyboard","dismiss","useFadeInAppBar","userOptions","theme","useTheme","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","onAppBarLayout","useHeight","fromOffsetY","toOffsetY","useMemo","beginY","scrollY","useSharedValue","dy","lastOffsetY","normalized","originalBackgroundColor","palette","background","
|
|
1
|
+
{"version":3,"names":["defaultOptions","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","dismissKeyboard","Keyboard","dismiss","useFadeInAppBar","userOptions","theme","useTheme","styles","useAppbarStyles","safeAreaInsets","useSafeAreaInsets","onAppBarLayout","useHeight","fromOffsetY","toOffsetY","useMemo","beginY","scrollY","useSharedValue","dy","lastOffsetY","normalized","originalBackgroundColor","palette","background","base","rgbValues","rgb","animatedAppBarStyle","useAnimatedStyle","r","g","b","backgroundColor","value","borderColor","divider","borderBottomWidth","StyleSheet","hairlineWidth","animatedTitleStyle","opacity","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","onScroll","event","offsetY","contentOffset","y","distance","Math","max","localOffsetY","min","onEndDrag","onMomentumEnd","appBarStyle","paddingTop","top","undefined","titleStyle"],"sources":["useFadeInAppBar.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Falsy, Keyboard, RegisteredStyle, ScrollViewProps, StyleSheet, ViewProps, ViewStyle } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimated';\nimport { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { rgb } from '@fountain-ui/utils';\nimport { useHeight } from '../internal/hooks';\nimport { useTheme } from '../styles';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface Options {\n fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);\n fadeInEndY?: number | ((appBarHeight: number) => number);\n floating?: boolean;\n keyboardDismissMode?: 'none' | 'on-drag';\n}\n\nexport interface FadeInAppBar {\n appBarStyle: ViewStyleProp;\n titleStyle: ViewStyleProp;\n onAppBarLayout: OnLayoutCallback;\n onScroll: OnScroll;\n scrollY: SharedValue<number>;\n dy: SharedValue<number>;\n normalized: SharedValue<number>;\n}\n\nconst defaultOptions: Required<Options> = {\n fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,\n fadeInEndY: (appBarHeight) => appBarHeight,\n floating: true,\n keyboardDismissMode: 'none',\n};\n\nconst dismissKeyboard = () => Keyboard.dismiss();\n\nexport default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {\n const {\n fadeInBeginY,\n fadeInEndY,\n floating,\n keyboardDismissMode,\n }: Required<Options> = {\n ...defaultOptions,\n ...userOptions,\n };\n\n const theme = useTheme();\n\n const styles = useAppbarStyles();\n\n const safeAreaInsets = useSafeAreaInsets();\n\n const [appBarHeight, onAppBarLayout] = useHeight();\n\n const [fromOffsetY, toOffsetY] = useMemo(() => {\n const endY = typeof fadeInEndY === 'function'\n ? fadeInEndY(appBarHeight)\n : fadeInEndY;\n\n const beginY = typeof fadeInBeginY === 'function'\n ? fadeInBeginY(endY, appBarHeight)\n : fadeInBeginY;\n\n return [beginY, endY];\n }, [fadeInBeginY, fadeInBeginY, appBarHeight]);\n\n const scrollY = useSharedValue<number>(0);\n const dy = useSharedValue<number>(0);\n const lastOffsetY = useSharedValue<number>(0);\n const normalized = useSharedValue<number>(0);\n\n const originalBackgroundColor = theme.palette.background.base;\n const rgbValues = useMemo(() => rgb(originalBackgroundColor), [originalBackgroundColor]);\n\n const animatedAppBarStyle = useAnimatedStyle(() => {\n const [r, g, b] = rgbValues;\n const backgroundColor = `rgba(${r}, ${g}, ${b}, ${normalized.value})`;\n\n return {\n backgroundColor,\n borderColor: theme.palette.divider,\n borderBottomWidth: normalized.value >= 1 ? StyleSheet.hairlineWidth : 0,\n };\n }, [rgbValues]);\n\n const animatedTitleStyle = useAnimatedStyle(() => ({\n opacity: normalized.value,\n }), []);\n\n const scrollHandler = useAnimatedScrollHandler({\n onBeginDrag: () => {\n if (keyboardDismissMode === 'on-drag') {\n runOnJS(dismissKeyboard)();\n }\n },\n onScroll: (event) => {\n const offsetY = event.contentOffset.y;\n scrollY.value = offsetY;\n\n const distance = Math.max(toOffsetY - fromOffsetY, 1);\n const localOffsetY = offsetY - fromOffsetY;\n\n dy.value = offsetY - lastOffsetY.value;\n\n normalized.value = Math.min(Math.max(localOffsetY / distance, 0), 1);\n },\n onEndDrag: (event) => {\n lastOffsetY.value = event.contentOffset.y;\n },\n onMomentumEnd: (event) => {\n lastOffsetY.value = event.contentOffset.y;\n },\n });\n\n const appBarStyle = [\n animatedAppBarStyle,\n { paddingTop: safeAreaInsets.top },\n floating ? styles.floating : undefined,\n ];\n\n return {\n appBarStyle,\n titleStyle: [animatedTitleStyle],\n onAppBarLayout,\n onScroll: scrollHandler,\n scrollY,\n dy,\n normalized,\n };\n};\n"],"mappings":"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"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _reactNativeSvg = require("react-native-svg");
|
|
11
|
+
|
|
12
|
+
var _utils = require("../../utils");
|
|
13
|
+
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
|
|
16
|
+
var _default = (0, _utils.createSvgIcon)( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Path, {
|
|
17
|
+
fillRule: "evenodd",
|
|
18
|
+
clipRule: "evenodd",
|
|
19
|
+
d: "M0.292893 9.70711C-0.0976311 9.31658 -0.0976311 8.68342 0.292893 8.29289L8.2929 0.292893C8.68342 -0.097631 9.31658 -0.097631 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L2.41421 9L9.70711 16.2929C10.0976 16.6834 10.0976 17.3166 9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L0.292893 9.70711Z"
|
|
20
|
+
})), 'AppBarChevronLeft', '0 0 10 18');
|
|
21
|
+
|
|
22
|
+
exports.default = _default;
|
|
23
|
+
//# sourceMappingURL=AppBarChevronLeft.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["createSvgIcon"],"sources":["AppBarChevronLeft.tsx"],"sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n <React.Fragment>\n <Path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M0.292893 9.70711C-0.0976311 9.31658 -0.0976311 8.68342 0.292893 8.29289L8.2929 0.292893C8.68342 -0.097631 9.31658 -0.097631 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L2.41421 9L9.70711 16.2929C10.0976 16.6834 10.0976 17.3166 9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L0.292893 9.70711Z\"\n />\n </React.Fragment>,\n 'AppBarChevronLeft',\n '0 0 10 18',\n);\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe,IAAAA,oBAAA,gBACX,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,oBAAD;EACI,QAAQ,EAAC,SADb;EAEI,QAAQ,EAAC,SAFb;EAGI,CAAC,EAAC;AAHN,EADJ,CADW,EAQX,mBARW,EASX,WATW,C"}
|
|
@@ -16,12 +16,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
16
16
|
var _default = (0, _utils.createSvgIcon)( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Path, {
|
|
17
17
|
fillRule: "evenodd",
|
|
18
18
|
clipRule: "evenodd",
|
|
19
|
-
d: "
|
|
19
|
+
d: "M5.32076 6.32681C5.603 6.04521 6.06061 6.04521 6.34285 6.32681L7.99999 7.98019L9.65712 6.32681C9.93937 6.04521 10.397 6.04521 10.6792 6.32681C10.9615 6.60842 10.9615 7.06498 10.6792 7.34659L9.02208 8.99997L10.6792 10.6533C10.9615 10.9349 10.9615 11.3915 10.6792 11.6731C10.397 11.9547 9.93937 11.9547 9.65712 11.6731L7.99999 10.0197L6.34285 11.6731C6.06061 11.9547 5.603 11.9547 5.32076 11.6731C5.03852 11.3915 5.03852 10.9349 5.32076 10.6533L6.9779 8.99997L5.32076 7.34659C5.03852 7.06498 5.03852 6.60842 5.32076 6.32681Z"
|
|
20
20
|
}), /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Path, {
|
|
21
21
|
fillRule: "evenodd",
|
|
22
22
|
clipRule: "evenodd",
|
|
23
|
-
d: "M7 2.
|
|
24
|
-
})), 'Clear', '0 0
|
|
23
|
+
d: "M7.99999 2.51017C4.40763 2.51017 1.49544 5.41575 1.49544 8.99997C1.49544 12.5842 4.40763 15.4898 7.99999 15.4898C11.5923 15.4898 14.5045 12.5842 14.5045 8.99997C14.5045 5.41575 11.5923 2.51017 7.99999 2.51017ZM0.0499878 8.99997C0.0499878 4.61926 3.60932 1.06799 7.99999 1.06799C12.3907 1.06799 15.95 4.61926 15.95 8.99997C15.95 13.3807 12.3907 16.9319 7.99999 16.9319C3.60932 16.9319 0.0499878 13.3807 0.0499878 8.99997Z"
|
|
24
|
+
})), 'Clear', '0 0 16 18');
|
|
25
25
|
|
|
26
26
|
exports.default = _default;
|
|
27
27
|
//# sourceMappingURL=Clear.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createSvgIcon"],"sources":["Clear.tsx"],"sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n <React.Fragment>\n <Path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"
|
|
1
|
+
{"version":3,"names":["createSvgIcon"],"sources":["Clear.tsx"],"sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n <React.Fragment>\n <Path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M5.32076 6.32681C5.603 6.04521 6.06061 6.04521 6.34285 6.32681L7.99999 7.98019L9.65712 6.32681C9.93937 6.04521 10.397 6.04521 10.6792 6.32681C10.9615 6.60842 10.9615 7.06498 10.6792 7.34659L9.02208 8.99997L10.6792 10.6533C10.9615 10.9349 10.9615 11.3915 10.6792 11.6731C10.397 11.9547 9.93937 11.9547 9.65712 11.6731L7.99999 10.0197L6.34285 11.6731C6.06061 11.9547 5.603 11.9547 5.32076 11.6731C5.03852 11.3915 5.03852 10.9349 5.32076 10.6533L6.9779 8.99997L5.32076 7.34659C5.03852 7.06498 5.03852 6.60842 5.32076 6.32681Z\"\n />\n <Path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M7.99999 2.51017C4.40763 2.51017 1.49544 5.41575 1.49544 8.99997C1.49544 12.5842 4.40763 15.4898 7.99999 15.4898C11.5923 15.4898 14.5045 12.5842 14.5045 8.99997C14.5045 5.41575 11.5923 2.51017 7.99999 2.51017ZM0.0499878 8.99997C0.0499878 4.61926 3.60932 1.06799 7.99999 1.06799C12.3907 1.06799 15.95 4.61926 15.95 8.99997C15.95 13.3807 12.3907 16.9319 7.99999 16.9319C3.60932 16.9319 0.0499878 13.3807 0.0499878 8.99997Z\"\n />\n </React.Fragment>,\n 'Clear',\n '0 0 16 18',\n);\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe,IAAAA,oBAAA,gBACX,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,oBAAD;EACI,QAAQ,EAAC,SADb;EAEI,QAAQ,EAAC,SAFb;EAGI,CAAC,EAAC;AAHN,EADJ,eAMI,6BAAC,oBAAD;EACI,QAAQ,EAAC,SADb;EAEI,QAAQ,EAAC,SAFb;EAGI,CAAC,EAAC;AAHN,EANJ,CADW,EAaX,OAbW,EAcX,WAdW,C"}
|
|
@@ -16,8 +16,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
16
16
|
var _default = (0, _utils.createSvgIcon)( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Path, {
|
|
17
17
|
fillRule: "evenodd",
|
|
18
18
|
clipRule: "evenodd",
|
|
19
|
-
d: "M8.
|
|
20
|
-
})), 'Search', '0 0
|
|
19
|
+
d: "M8.70834 3.16665C5.64776 3.16665 3.16667 5.64774 3.16667 8.70831C3.16667 11.7689 5.64776 14.25 8.70834 14.25C10.2024 14.25 11.5585 13.6587 12.5551 12.6973C12.5755 12.6711 12.5977 12.6458 12.6218 12.6217C12.6459 12.5977 12.6711 12.5754 12.6974 12.5551C13.6587 11.5584 14.25 10.2024 14.25 8.70831C14.25 5.64774 11.7689 3.16665 8.70834 3.16665ZM14.2753 13.1556C15.2503 11.9367 15.8333 10.3906 15.8333 8.70831C15.8333 4.77328 12.6434 1.58331 8.70834 1.58331C4.77331 1.58331 1.58334 4.77328 1.58334 8.70831C1.58334 12.6433 4.77331 15.8333 8.70834 15.8333C10.3906 15.8333 11.9368 15.2503 13.1557 14.2752L16.0655 17.1851C16.3747 17.4942 16.8759 17.4942 17.1851 17.1851C17.4943 16.8759 17.4943 16.3747 17.1851 16.0655L14.2753 13.1556Z"
|
|
20
|
+
})), 'Search', '0 0 19 19');
|
|
21
21
|
|
|
22
22
|
exports.default = _default;
|
|
23
23
|
//# sourceMappingURL=Search.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createSvgIcon"],"sources":["Search.tsx"],"sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n <React.Fragment>\n <Path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M8.
|
|
1
|
+
{"version":3,"names":["createSvgIcon"],"sources":["Search.tsx"],"sourcesContent":["import React from 'react';\nimport { Path } from 'react-native-svg';\nimport { createSvgIcon } from '../../utils';\n\nexport default createSvgIcon(\n <React.Fragment>\n <Path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M8.70834 3.16665C5.64776 3.16665 3.16667 5.64774 3.16667 8.70831C3.16667 11.7689 5.64776 14.25 8.70834 14.25C10.2024 14.25 11.5585 13.6587 12.5551 12.6973C12.5755 12.6711 12.5977 12.6458 12.6218 12.6217C12.6459 12.5977 12.6711 12.5754 12.6974 12.5551C13.6587 11.5584 14.25 10.2024 14.25 8.70831C14.25 5.64774 11.7689 3.16665 8.70834 3.16665ZM14.2753 13.1556C15.2503 11.9367 15.8333 10.3906 15.8333 8.70831C15.8333 4.77328 12.6434 1.58331 8.70834 1.58331C4.77331 1.58331 1.58334 4.77328 1.58334 8.70831C1.58334 12.6433 4.77331 15.8333 8.70834 15.8333C10.3906 15.8333 11.9368 15.2503 13.1557 14.2752L16.0655 17.1851C16.3747 17.4942 16.8759 17.4942 17.1851 17.1851C17.4943 16.8759 17.4943 16.3747 17.1851 16.0655L14.2753 13.1556Z\"\n />\n </React.Fragment>,\n 'Search',\n '0 0 19 19',\n);\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe,IAAAA,oBAAA,gBACX,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,oBAAD;EACI,QAAQ,EAAC,SADb;EAEI,QAAQ,EAAC,SAFb;EAGI,CAAC,EAAC;AAHN,EADJ,CADW,EAQX,QARW,EASX,WATW,C"}
|
|
@@ -3,6 +3,12 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
Object.defineProperty(exports, "AppBarChevronLeft", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _AppBarChevronLeft.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
6
12
|
Object.defineProperty(exports, "Check", {
|
|
7
13
|
enumerable: true,
|
|
8
14
|
get: function () {
|
|
@@ -112,6 +118,8 @@ Object.defineProperty(exports, "Search", {
|
|
|
112
118
|
}
|
|
113
119
|
});
|
|
114
120
|
|
|
121
|
+
var _AppBarChevronLeft = _interopRequireDefault(require("./AppBarChevronLeft"));
|
|
122
|
+
|
|
115
123
|
var _Check = _interopRequireDefault(require("./Check"));
|
|
116
124
|
|
|
117
125
|
var _Checkbox = _interopRequireDefault(require("./Checkbox"));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as Check } from './Check';\nexport { default as Checkbox } from './Checkbox';\nexport { default as CheckboxChecked } from './CheckboxChecked';\nexport { default as CheckboxOn } from './CheckboxOn';\nexport { default as CheckCircle } from './CheckCircle';\nexport { default as ChevronDown } from './ChevronDown';\nexport { default as ChevronLeft } from './ChevronLeft';\nexport { default as ChevronRight } from './ChevronRight';\nexport { default as CircularProgress } from './CircularProgress';\nexport { default as Clear } from './Clear';\nexport { default as Close } from './Close';\nexport { default as EyeOff } from './EyeOff';\nexport { default as EyeOn } from './EyeOn';\nexport { default as InfoCircle } from './InfoCircle';\nexport { default as LoadingSpinner } from './LoadingSpinner';\nexport { default as Radio } from './Radio';\nexport { default as RadioChecked } from './RadioChecked';\nexport { default as Search } from './Search';\n"],"mappings":"
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as AppBarChevronLeft } from './AppBarChevronLeft';\nexport { default as Check } from './Check';\nexport { default as Checkbox } from './Checkbox';\nexport { default as CheckboxChecked } from './CheckboxChecked';\nexport { default as CheckboxOn } from './CheckboxOn';\nexport { default as CheckCircle } from './CheckCircle';\nexport { default as ChevronDown } from './ChevronDown';\nexport { default as ChevronLeft } from './ChevronLeft';\nexport { default as ChevronRight } from './ChevronRight';\nexport { default as CircularProgress } from './CircularProgress';\nexport { default as Clear } from './Clear';\nexport { default as Close } from './Close';\nexport { default as EyeOff } from './EyeOff';\nexport { default as EyeOn } from './EyeOn';\nexport { default as InfoCircle } from './InfoCircle';\nexport { default as LoadingSpinner } from './LoadingSpinner';\nexport { default as Radio } from './Radio';\nexport { default as RadioChecked } from './RadioChecked';\nexport { default as Search } from './Search';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA"}
|
|
@@ -1,3 +1,5 @@
|
|
|
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
|
+
|
|
1
3
|
import React, { useEffect, useRef, useState } from 'react';
|
|
2
4
|
import { Text, View } from 'react-native';
|
|
3
5
|
import Animated, { useAnimatedStyle, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
|
|
@@ -40,7 +42,9 @@ export default function Accordion(props) {
|
|
|
40
42
|
RightIcon,
|
|
41
43
|
LeftComponent,
|
|
42
44
|
isInitialExpanded = false,
|
|
43
|
-
|
|
45
|
+
style: styleProp,
|
|
46
|
+
variant = 'solid',
|
|
47
|
+
...otherProps
|
|
44
48
|
} = props;
|
|
45
49
|
const styles = useStyles();
|
|
46
50
|
const theme = useTheme();
|
|
@@ -92,10 +96,10 @@ export default function Accordion(props) {
|
|
|
92
96
|
animatedHeight.value = withTiming(isExpanded ? contentHeight : 0, ANIMATION_CONFIG);
|
|
93
97
|
animatedOpacity.value = isExpanded ? withDelay(CONTENT_OPACITY_DELAY_MILLIS, withTiming(1, ANIMATION_CONFIG)) : withTiming(0, ANIMATION_CONFIG);
|
|
94
98
|
}, [isExpanded, contentHeight]);
|
|
95
|
-
const rootStyle = css([styles.root, containerStyle]);
|
|
96
|
-
return /*#__PURE__*/React.createElement(Column, {
|
|
99
|
+
const rootStyle = css([styles.root, containerStyle, styleProp]);
|
|
100
|
+
return /*#__PURE__*/React.createElement(Column, _extends({
|
|
97
101
|
style: rootStyle
|
|
98
|
-
}, /*#__PURE__*/React.createElement(ButtonBase, {
|
|
102
|
+
}, otherProps), /*#__PURE__*/React.createElement(ButtonBase, {
|
|
99
103
|
onPress: onPress
|
|
100
104
|
}, /*#__PURE__*/React.createElement(Row, {
|
|
101
105
|
style: titleStyle
|