parent
441ff3d59d
commit
c93539a268
@ -0,0 +1,169 @@
|
|||||||
|
import React from "react"
|
||||||
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||||
|
import { View, Text, StyleSheet, TouchableHighlight, Image } from "react-native";
|
||||||
|
import { City, Weather } from "../data/stub";
|
||||||
|
|
||||||
|
|
||||||
|
type CityProps = {
|
||||||
|
weather: Weather,
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Details(props: CityProps){
|
||||||
|
|
||||||
|
|
||||||
|
const weather: Weather = props.weather
|
||||||
|
const city = weather.city
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={{alignItems: "center", backgroundColor: "darksalmon", height: "100%", width: "100%"}}>
|
||||||
|
<Text style={styles.name}>{city.name}</Text>
|
||||||
|
<View style={styles.place}>
|
||||||
|
<Text style={styles.petitText}>{city.longitude} - {city.latitude}</Text>
|
||||||
|
</View>
|
||||||
|
<TouchableHighlight>
|
||||||
|
<Image style={styles.image} source={ weather?.weatherType=="Nuageux" ? require('../assets/Nuageux.png') : require('../assets/Nuageux.png')}/>
|
||||||
|
</TouchableHighlight>
|
||||||
|
<Text style={styles.weatherType}>{weather?.weatherType}</Text>
|
||||||
|
<View style={styles.supertruc}>
|
||||||
|
<Image style={styles.petitImage} source={require('../assets/temperature.png')}/>
|
||||||
|
<View style={styles.supertrucencore}>
|
||||||
|
<Text style={styles.temperature}>{weather?.temperature}°C</Text>
|
||||||
|
<Text style={styles.petitTemp}>Ressenti {weather?.temperatureFeelsLike}°C</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View style={styles.boxes}>
|
||||||
|
<View style={styles.leftBox}>
|
||||||
|
<View style={styles.imageEtTexte}>
|
||||||
|
<Image style={styles.imageHumidity} source={require('../assets/humidity.png')}/>
|
||||||
|
<Text style={styles.text}>HUMIDITY</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={styles.humidityText}>{weather?.humidity}%</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.rightBox}>
|
||||||
|
<View style={styles.imageEtTexte}>
|
||||||
|
<Image style={styles.imageHumidity} source={require('../assets/wind.png')}/>
|
||||||
|
<Text style={styles.text}>WIND SPEED</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={styles.humidityText}>{weather?.windSpeed} km/h</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View style={styles.boxes}>
|
||||||
|
<View style={styles.leftBox}>
|
||||||
|
<View style={styles.imageEtTexte}>
|
||||||
|
<Image style={styles.imageHumidity} source={require('../assets/pressure.png')}/>
|
||||||
|
<Text style={styles.text}>PRESSURE</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={styles.humidityText}>{weather?.pressure} hPa</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.rightBox}>
|
||||||
|
<View style={styles.imageEtTexte}>
|
||||||
|
<Image style={styles.imageHumidity} source={require('../assets/visibility.png')}/>
|
||||||
|
<Text style={styles.text}>VISIBILITY</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={styles.humidityText}>{weather?.visibility} km</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
name: {
|
||||||
|
marginTop: 30,
|
||||||
|
fontSize: 35,
|
||||||
|
fontWeight: "bold"
|
||||||
|
},
|
||||||
|
place: {
|
||||||
|
marginBottom: 20,
|
||||||
|
},
|
||||||
|
petitText: {
|
||||||
|
fontSize: 15
|
||||||
|
},
|
||||||
|
image: {
|
||||||
|
height: 100,
|
||||||
|
width: 100
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
fontWeight: "bold",
|
||||||
|
fontSize: 18
|
||||||
|
},
|
||||||
|
temperature: {
|
||||||
|
marginTop: 10,
|
||||||
|
fontSize: 25,
|
||||||
|
fontWeight: "600"
|
||||||
|
},
|
||||||
|
petitTemp: {
|
||||||
|
fontSize: 16,
|
||||||
|
marginBottom: 35
|
||||||
|
},
|
||||||
|
weatherType: {
|
||||||
|
fontSize: 17,
|
||||||
|
marginBottom: 20
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
height: 30,
|
||||||
|
width: 30,
|
||||||
|
marginTop: 13,
|
||||||
|
alignSelf: "flex-end",
|
||||||
|
margin: 5
|
||||||
|
},
|
||||||
|
supertruc: {
|
||||||
|
flexDirection: "row"
|
||||||
|
},
|
||||||
|
supertrucencore: {
|
||||||
|
flexDirection: "column"
|
||||||
|
},
|
||||||
|
petitImage: {
|
||||||
|
height: 40,
|
||||||
|
width: 40,
|
||||||
|
marginRight: 7,
|
||||||
|
marginTop: 15
|
||||||
|
},
|
||||||
|
imageHumidity: {
|
||||||
|
height: 20,
|
||||||
|
width: 20,
|
||||||
|
marginLeft: 10
|
||||||
|
},
|
||||||
|
leftBox: {
|
||||||
|
alignSelf: "flex-start",
|
||||||
|
margin: 25,
|
||||||
|
marginTop: 10,
|
||||||
|
marginBottom: 5,
|
||||||
|
height: 90,
|
||||||
|
width: 150,
|
||||||
|
flexDirection: "column",
|
||||||
|
backgroundColor: "powderblue",
|
||||||
|
borderRadius: 20
|
||||||
|
},
|
||||||
|
rightBox: {
|
||||||
|
alignSelf: "flex-start",
|
||||||
|
marginRight: 25,
|
||||||
|
marginTop: 10,
|
||||||
|
marginBottom: 5,
|
||||||
|
height: 90,
|
||||||
|
width: 150,
|
||||||
|
flexDirection: "column",
|
||||||
|
backgroundColor: "powderblue",
|
||||||
|
borderRadius: 20
|
||||||
|
},
|
||||||
|
humidityText: {
|
||||||
|
marginTop: 13,
|
||||||
|
fontWeight: "bold",
|
||||||
|
fontSize: 20,
|
||||||
|
alignSelf: "center"
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
fontWeight: "normal",
|
||||||
|
fontStyle: 'italic',
|
||||||
|
fontSize: 10,
|
||||||
|
alignSelf: "center",
|
||||||
|
marginLeft: 7
|
||||||
|
},
|
||||||
|
imageEtTexte: {
|
||||||
|
flexDirection: "row",
|
||||||
|
marginTop: 13
|
||||||
|
},
|
||||||
|
boxes: {
|
||||||
|
flexDirection: "row"
|
||||||
|
}
|
||||||
|
});
|
@ -0,0 +1 @@
|
|||||||
|
../react-native-vector-icons/bin/fa5-upgrade.sh
|
@ -0,0 +1 @@
|
|||||||
|
../react-native-vector-icons/bin/generate-icon.js
|
@ -1 +0,0 @@
|
|||||||
../../../../react-native/cli.js
|
|
4
iut-expo-starter/node_modules/@react-native-async-storage/async-storage/package.json
generated
vendored
4
iut-expo-starter/node_modules/@react-native-async-storage/async-storage/package.json
generated
vendored
@ -0,0 +1,130 @@
|
|||||||
|
# Change Log
|
||||||
|
|
||||||
|
All notable changes to this project will be documented in this file.
|
||||||
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||||
|
|
||||||
|
# 4.0.0-rc.7 (2022-10-28)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* add children as prop ([#3583](https://github.com/react-native-elements/react-native-elements/issues/3583)) ([d7fd4e2](https://github.com/react-native-elements/react-native-elements/commit/d7fd4e23c05990e645b4c2c923e690e65dd179d4))
|
||||||
|
* rename `white` theme color to `background` ([#3664](https://github.com/react-native-elements/react-native-elements/issues/3664)) ([48795ec](https://github.com/react-native-elements/react-native-elements/commit/48795eca211a55d447dcfdf4d17a3e1456d03ebc))
|
||||||
|
* **Switch:** Android throws an error when setting it to false ([#3601](https://github.com/react-native-elements/react-native-elements/issues/3601)) ([1246628](https://github.com/react-native-elements/react-native-elements/commit/1246628825d925f147dcde260047e8e2c614ec6e))
|
||||||
|
* **TabView:** iOS TabView issue ([#3635](https://github.com/react-native-elements/react-native-elements/issues/3635)) ([b3fc37e](https://github.com/react-native-elements/react-native-elements/commit/b3fc37ed169e25ebcde99c5d21814d28e36b474d))
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* **SeachBar:** add `onKeyboardHide` for android ([#3657](https://github.com/react-native-elements/react-native-elements/issues/3657)) ([7960f47](https://github.com/react-native-elements/react-native-elements/commit/7960f4739e094b76ae342f3bb23aab6443b709a9))
|
||||||
|
* update Tab component ([#3658](https://github.com/react-native-elements/react-native-elements/issues/3658)) ([67eb98b](https://github.com/react-native-elements/react-native-elements/commit/67eb98b82b035eb554d87b40988077b169c0d571))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# 4.0.0-rc.5 (2022-06-25)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* **Button:** theme spacing xs error ([#3563](https://github.com/react-native-elements/react-native-elements/issues/3563)) ([172499f](https://github.com/react-native-elements/react-native-elements/commit/172499fb44d0e99210a670eaa97990bbc8b3e53f))
|
||||||
|
* fix peerDependency compatibility ([#3545](https://github.com/react-native-elements/react-native-elements/issues/3545)) ([7a811f9](https://github.com/react-native-elements/react-native-elements/commit/7a811f9b3b8e674a74b173d75c657dd7fabb817a))
|
||||||
|
* **Tab:** indicator with initial index ([#3564](https://github.com/react-native-elements/react-native-elements/issues/3564)) ([8a44601](https://github.com/react-native-elements/react-native-elements/commit/8a44601650c2a141ba249cd6874d75b1c2e60452))
|
||||||
|
* **Tooltip:** add default value in measure component ([#3550](https://github.com/react-native-elements/react-native-elements/issues/3550)) ([dd72676](https://github.com/react-native-elements/react-native-elements/commit/dd72676964d4ffdc71c11d14709d19e839d94c40))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# 4.0.0-rc.4 (2022-05-21)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* **ButtonGroup:** add and improve types and add tests ([#3220](https://github.com/react-native-elements/react-native-elements/issues/3220)) ([9f08153](https://github.com/react-native-elements/react-native-elements/commit/9f08153cf25a067880c74913a1355d1cf530d414))
|
||||||
|
* **Dialog:** Action button on web ([#3514](https://github.com/react-native-elements/react-native-elements/issues/3514)) ([d835acc](https://github.com/react-native-elements/react-native-elements/commit/d835acc4457e7108cfc6008f6b49fb66c3f1af42))
|
||||||
|
* **ListItem:** Accordion children areas were not hidden ([#3517](https://github.com/react-native-elements/react-native-elements/issues/3517)) ([dc1d369](https://github.com/react-native-elements/react-native-elements/commit/dc1d369e125cfbac936d4ffe034210915a0e79aa))
|
||||||
|
* **ListItem:** left & right content width onRelease in Swipeable ([#3534](https://github.com/react-native-elements/react-native-elements/issues/3534)) ([7816555](https://github.com/react-native-elements/react-native-elements/commit/7816555f2483bc2103b85094cfbb3c87f7f98dca))
|
||||||
|
* **Tab:** inputRange using Array.from ([#3538](https://github.com/react-native-elements/react-native-elements/issues/3538)) ([65a1fa9](https://github.com/react-native-elements/react-native-elements/commit/65a1fa9f72a07ff371552cb65b92df864fb0cfe7))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# 4.0.0-rc.3 (2022-05-09)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* **Icon:** raised ios shadow issue ([#3491](https://github.com/react-native-elements/react-native-elements/issues/3491)) ([6224af4](https://github.com/react-native-elements/react-native-elements/commit/6224af4aa83979f531c160d18f81786c41c19bfa))
|
||||||
|
* **ListItem:** custom Icon for Accordion ([#3504](https://github.com/react-native-elements/react-native-elements/issues/3504)) ([fd0bbb6](https://github.com/react-native-elements/react-native-elements/commit/fd0bbb63b924c48964ba91f52d056a8aaf87af29))
|
||||||
|
* **Tab:** indicator on first render ([#3505](https://github.com/react-native-elements/react-native-elements/issues/3505)) ([974d344](https://github.com/react-native-elements/react-native-elements/commit/974d344f38ca12895711f87e2103b94479193612))
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* **base:** add makeStyles ([#3510](https://github.com/react-native-elements/react-native-elements/issues/3510)) ([2ba0764](https://github.com/react-native-elements/react-native-elements/commit/2ba07640635fe5f4456fc6d45844ced986a511c5))
|
||||||
|
* **Button:** add title as children,`size`, `color`, `radius` prop ([#3494](https://github.com/react-native-elements/react-native-elements/issues/3494)) ([4774fae](https://github.com/react-native-elements/react-native-elements/commit/4774fae98968d532f2f1e1ab43793ccb71c24b37))
|
||||||
|
* **theming:** add `spacing` to theme ([#3495](https://github.com/react-native-elements/react-native-elements/issues/3495)) ([f71f16e](https://github.com/react-native-elements/react-native-elements/commit/f71f16eae0279baa183009799f5ecfa0a96b714d))
|
||||||
|
* **Tooltip:** add `animationType` prop ([#3487](https://github.com/react-native-elements/react-native-elements/issues/3487)) ([52d2f27](https://github.com/react-native-elements/react-native-elements/commit/52d2f2705f973d2a3a15d3acb6260a3fc3a58351))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# 4.0.0-rc.2 (2022-04-27)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* **Chip:** border radius on tap ([#3442](https://github.com/react-native-elements/react-native-elements/issues/3442)) ([2720463](https://github.com/react-native-elements/react-native-elements/commit/2720463439f08c5af9553476ecea00f14424b29e))
|
||||||
|
* **ListItem:** isExpanded set default false for Accordion ([#3475](https://github.com/react-native-elements/react-native-elements/issues/3475)) ([3a66591](https://github.com/react-native-elements/react-native-elements/commit/3a66591fd3d770c0e77731da8748c84534f7d20d))
|
||||||
|
* **ListItem:** Swipeable panresponders ([#3449](https://github.com/react-native-elements/react-native-elements/issues/3449)) ([eca3f2e](https://github.com/react-native-elements/react-native-elements/commit/eca3f2efcc50e7dcf158323bce7da7e938aaa9f0))
|
||||||
|
* **Overlay:** custom backgroundColor override ([#3471](https://github.com/react-native-elements/react-native-elements/issues/3471)) ([2ad403a](https://github.com/react-native-elements/react-native-elements/commit/2ad403ac8b241420892b2b680ae9f5d7ead4ed6a))
|
||||||
|
* **SearchBar:** typescript errors ([#3437](https://github.com/react-native-elements/react-native-elements/issues/3437)) ([ec01b65](https://github.com/react-native-elements/react-native-elements/commit/ec01b65cbbb3a3795e0450a4c744acffa2b31d56))
|
||||||
|
* **Skeleton:** remove `type` from import ([#3476](https://github.com/react-native-elements/react-native-elements/issues/3476)) ([455276a](https://github.com/react-native-elements/react-native-elements/commit/455276a21eacd864883a4e7b90bec0aafba1ff35))
|
||||||
|
* **SpeedDial.Action:** wrap with pressable ([#3480](https://github.com/react-native-elements/react-native-elements/issues/3480)) ([6de7aa0](https://github.com/react-native-elements/react-native-elements/commit/6de7aa0985edc90a0325244227eda9e4aab71b60))
|
||||||
|
* **SpeedDial:** add themed FAB ([#3436](https://github.com/react-native-elements/react-native-elements/issues/3436)) ([e70d40b](https://github.com/react-native-elements/react-native-elements/commit/e70d40b262f199b31e533e42c57c2c18c6ccdfde))
|
||||||
|
* **SpeedDial:** Left placement for Actions ([#3479](https://github.com/react-native-elements/react-native-elements/issues/3479)) ([d006fe9](https://github.com/react-native-elements/react-native-elements/commit/d006fe9f532430a00931877be8a5cda4b4027942))
|
||||||
|
* **ThemeProvider:** add `children` prop explicitly ([#3477](https://github.com/react-native-elements/react-native-elements/issues/3477)) ([45f9523](https://github.com/react-native-elements/react-native-elements/commit/45f9523300d9bcc74837ddc01dc6b787cb4be54b))
|
||||||
|
* **Tooltip:** removeEventListener deprecated warning ([#3440](https://github.com/react-native-elements/react-native-elements/issues/3440)) ([f4db70d](https://github.com/react-native-elements/react-native-elements/commit/f4db70d862f906ce714ba3226dd9936e11cddc85))
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* **CheckBox:** add disabled, disabledTitleStyle, disabledStyle props ([#3430](https://github.com/react-native-elements/react-native-elements/issues/3430)) ([d35df60](https://github.com/react-native-elements/react-native-elements/commit/d35df60071b4d8ab6d6eb7724147a5eac9eeebec))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# 4.0.0-rc.1 (2022-03-28)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* pkg entry point for react-native cli ([#3403](https://github.com/react-native-elements/react-native-elements/issues/3403)) ([2c4bf8a](https://github.com/react-native-elements/react-native-elements/commit/2c4bf8a4a31498ce4dd2aefe22cff5cfc13363f1))
|
||||||
|
* remove Partial Color Type ([#3418](https://github.com/react-native-elements/react-native-elements/issues/3418)) ([c9c2bdc](https://github.com/react-native-elements/react-native-elements/commit/c9c2bdc58198392727c1b6affccf6201724a2391))
|
||||||
|
* **Tab, TabView:** conditional rendering ([#3397](https://github.com/react-native-elements/react-native-elements/issues/3397)) ([781e47a](https://github.com/react-native-elements/react-native-elements/commit/781e47adbedb4b93daa37ee659d3e9ef7b9ed5aa))
|
||||||
|
* **TabView:** swipe issue ([#3380](https://github.com/react-native-elements/react-native-elements/issues/3380)) ([fc3bb93](https://github.com/react-native-elements/react-native-elements/commit/fc3bb9365ef9cc1d8ba512ad38c5cc4ce83dc311))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# 4.0.0-rc.0 (2022-03-16)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* **AirbnbRating:** add props to parent component ([#3335](https://github.com/react-native-elements/react-native-elements/issues/3335)) ([f859d68](https://github.com/react-native-elements/react-native-elements/commit/f859d685f6415558f26b406cf05741aca84accd6))
|
||||||
|
* change TextProps from type to interface to enable declaration me… ([#3198](https://github.com/react-native-elements/react-native-elements/issues/3198)) ([c850731](https://github.com/react-native-elements/react-native-elements/commit/c8507312644c1e5bd4228f04a3f09b0f3e8c866e))
|
||||||
|
* **Dialog:** remove container view ([#3384](https://github.com/react-native-elements/react-native-elements/issues/3384)) ([bcff691](https://github.com/react-native-elements/react-native-elements/commit/bcff691f733aae5b003126575f5e3e55d0500d31))
|
||||||
|
* **docs:** broken props and links ([29fe60b](https://github.com/react-native-elements/react-native-elements/commit/29fe60b6147fb12169c978e3827d693c4e51b161))
|
||||||
|
* **FAB:** add small size style ([#3322](https://github.com/react-native-elements/react-native-elements/issues/3322)) ([b4a7296](https://github.com/react-native-elements/react-native-elements/commit/b4a729645b064ae7854eb32eeb060b8c0ac18cc2))
|
||||||
|
* **Icon:** preserve custom testID property ([#3376](https://github.com/react-native-elements/react-native-elements/issues/3376)) ([9f713f1](https://github.com/react-native-elements/react-native-elements/commit/9f713f158b41e8a40fae92bb5d168d38c7502cc3))
|
||||||
|
* **ListItem:** remove Accordion height animation ([#3352](https://github.com/react-native-elements/react-native-elements/issues/3352)) ([217f623](https://github.com/react-native-elements/react-native-elements/commit/217f6235cbab43710d0e0cc045d24f9dc3505f6f))
|
||||||
|
* **Slider:** Fix issues with scrub and allowTouchTrack ([#3203](https://github.com/react-native-elements/react-native-elements/issues/3203)) ([74de9ea](https://github.com/react-native-elements/react-native-elements/commit/74de9ea3b3f0b02f40435aa7367fa602d8150650))
|
||||||
|
* **themeColors:** add support for dark mode ([#3078](https://github.com/react-native-elements/react-native-elements/issues/3078)) ([8a7743e](https://github.com/react-native-elements/react-native-elements/commit/8a7743ebe6ade1cbab9bd5b0b896d05c65976b20))
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* Add style props to TabView component ([#3191](https://github.com/react-native-elements/react-native-elements/issues/3191)) ([efb76aa](https://github.com/react-native-elements/react-native-elements/commit/efb76aab455b2c93e875f691b82227b838b97ab2))
|
||||||
|
* **BottomSheet:** add onBackdropPress handler ([#3074](https://github.com/react-native-elements/react-native-elements/issues/3074)) ([de1a02b](https://github.com/react-native-elements/react-native-elements/commit/de1a02b551cd1ef8ea33d164b4bea6d434e5a914))
|
||||||
|
* **ListItem:** add `onSwipeBegin`,`onSwipeEnd`, resetCallback ([#3180](https://github.com/react-native-elements/react-native-elements/issues/3180)) ([2a5a8b0](https://github.com/react-native-elements/react-native-elements/commit/2a5a8b039da3a6b62d82445815229e244dacde83))
|
||||||
|
* **Skeleton:** new universal component package ([#3357](https://github.com/react-native-elements/react-native-elements/issues/3357)) ([1cca2db](https://github.com/react-native-elements/react-native-elements/commit/1cca2db1967330ef42a67c9b885a460ed27a4762))
|
||||||
|
* **Tab:** add horizontally scrollable Tab.Items ([#3336](https://github.com/react-native-elements/react-native-elements/issues/3336)) ([a0a919b](https://github.com/react-native-elements/react-native-elements/commit/a0a919bbda0888bb57fb94c329a59fd6f325cc2d))
|
||||||
|
* **TabView:** add `disableSwipe` & `disableTransition` prop ([#3372](https://github.com/react-native-elements/react-native-elements/issues/3372)) ([b45e1a9](https://github.com/react-native-elements/react-native-elements/commit/b45e1a9555fb061ca6f7e6102d3c04f9b7cc78e8))
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,174 @@
|
|||||||
|
<p align="center">
|
||||||
|
<a href="https://reactnativeelements.com/">
|
||||||
|
<img alt="react-native-elements" src="https://user-images.githubusercontent.com/5962998/65694309-a825f000-e043-11e9-8382-db0dba0851e3.png" width="200">
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
Cross Platform <a href="https://reactnative.dev">React Native</a> UI Toolkit
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://www.npmjs.com/package/@rneui/base"><img src="https://img.shields.io/npm/v/@rneui/base.svg?style=flat-square"></a>
|
||||||
|
<a href="https://www.npmjs.com/package/@rneui/base"><img src="https://img.shields.io/npm/dm/@rneui/base.svg?style=flat-square"></a>
|
||||||
|
<a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square&color=0089E3"></a>
|
||||||
|
<a href="https://github.com/react-native-elements/react-native-elements"><img src="https://img.shields.io/github/stars/react-native-elements/react-native-elements?label=stars&logo&style=flat-square&color=0089E3"></a>
|
||||||
|
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<a href="https://twitter.com/rn_elements"><img src="https://img.shields.io/twitter/follow/rn_elements?style=flat-square&label=Twitter&logo=TWITTER&color=0089E3"></a>
|
||||||
|
<a href="https://github.com/react-native-elements/react-native-elements/discussions"><img src="https://img.shields.io/github/discussions/react-native-elements/react-native-elements?label=Discussions&logo=github&style=flat-square"></a>
|
||||||
|
<a href="https://react-native-elements-slack.herokuapp.com"><img src="https://img.shields.io/badge/Join-Slack-4A154B?style=flat-square&logo=slack&color=0089E3&"></a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="#backers"><img src="https://opencollective.com/react-native-elements/backers/badge.svg?style=flat-square&color=0089E3"></a>
|
||||||
|
<a href="#sponsors"><img src="https://opencollective.com/react-native-elements/sponsors/badge.svg?style=flat-square&color=0089E3&logo=opencollective"></a>
|
||||||
|
<a href="https://github.com/sponsors/react-native-elements"><img src="https://img.shields.io/github/sponsors/react-native-elements?label=Sponsor&logo=githubsponsors&style=flat-square"></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install @rneui/base
|
||||||
|
```
|
||||||
|
|
||||||
|
Follow
|
||||||
|
[these instructions](https://reactnativeelements.com/docs/)
|
||||||
|
to install React Native Elements!
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
Start using the components or try it on Snack
|
||||||
|
[here](https://snack.expo.io/rJu6gJfBZ).
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { Button } from '@rneui/base';
|
||||||
|
|
||||||
|
const App = () => <Button title="Hello World" />;
|
||||||
|
```
|
||||||
|
|
||||||
|
## React Native Web support
|
||||||
|
|
||||||
|
As a cross platform UI Toolkit, you can now use RNE on the web & share your codebase between your React Native + React web apps. RNE components are rendered perfectly on browser. You can achieve this to target iOS, Android and Web by collaborating RNE and [React Native for Web](https://github.com/necolas/react-native-web).
|
||||||
|
|
||||||
|
Click [here](https://reactnativeelements.com/blog/2018/12/13/react-native-web) for a full walkthrough using React Native Elements + React Native Web.
|
||||||
|
|
||||||
|
## Expo demo app
|
||||||
|
|
||||||
|
Checkout the official
|
||||||
|
[React Native Elements App](https://expo.dev/@rn_elements/react-native-elements)
|
||||||
|
on Expo which uses all of the React Native Elements components.
|
||||||
|
|
||||||
|
If you are looking to contribute to the React Native Elements App, click
|
||||||
|
[here](https://github.com/react-native-elements/react-native-elements/tree/next/example) to
|
||||||
|
view the implementation & run the RNE expo app locally.
|
||||||
|
|
||||||
|
## VS Code Extension
|
||||||
|
|
||||||
|
Install the [React Native Elements VS Code Extension](https://marketplace.visualstudio.com/items?itemName=rne.snippets) to speed up development.
|
||||||
|
|
||||||
|
## Documentation
|
||||||
|
|
||||||
|
[View the full docs here](https://reactnativeelements.com/docs)
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
|
||||||
|
Interested in contributing to this repo? Check out our
|
||||||
|
[Contributing Guide](https://reactnativeelements.com/docs/contributing)
|
||||||
|
and submit a PR for a new feature/bug fix.
|
||||||
|
|
||||||
|
A big shoutout to all our contributors! You could be here too!
|
||||||
|
|
||||||
|
<a href="https://github.com/react-native-elements/react-native-elements/graphs/contributors"><img src="https://opencollective.com/react-native-elements/contributors.svg?width=890&button=false" /></a>
|
||||||
|
|
||||||
|
### First Contributors
|
||||||
|
|
||||||
|
We encourage everyone to contribute & submit PR's especially first-time
|
||||||
|
contributors. Look for the label `Good First Issue` on the issues. Click
|
||||||
|
[here](https://github.com/react-native-elements/react-native-elements/labels/%F0%9F%91%B6%20Good%20First%20Issue)
|
||||||
|
to see them.
|
||||||
|
|
||||||
|
If there is something you's like to see or request a new feature, please submit
|
||||||
|
an
|
||||||
|
[issue](https://github.com/react-native-elements/react-native-elements/issues/new)
|
||||||
|
or a
|
||||||
|
[pull request](https://github.com/react-native-elements/react-native-elements/pulls).
|
||||||
|
|
||||||
|
### Core Contributors
|
||||||
|
|
||||||
|
We are currently looking for new core contributors that can help lead this project.
|
||||||
|
|
||||||
|
[Learn more here](https://github.com/react-native-elements/react-native-elements/issues/2222)
|
||||||
|
|
||||||
|
### Slack Community
|
||||||
|
|
||||||
|
In case you have any other question or would like to come say **Hi!** to the RNE
|
||||||
|
community, join our [Slack team](https://react-native-elements-slack.herokuapp.com).
|
||||||
|
See you on the other side! 👋😃
|
||||||
|
|
||||||
|
## Backers
|
||||||
|
|
||||||
|
[Become a backer](https://opencollective.com/react-native-elements#backer) and show your support for React Native Elements.
|
||||||
|
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/0/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/1/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/2/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/3/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/4/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/5/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/6/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/7/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/8/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/9/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/10/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/11/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/12/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/13/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/14/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/15/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/16/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/17/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/18/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/19/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/20/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/21/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/22/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/23/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/24/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/25/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/26/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/27/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/28/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/backer/29/website)
|
||||||
|
|
||||||
|
## Sponsors
|
||||||
|
|
||||||
|
Do you use React Native Elements in production? If so, consider supporting this project as it will allow the maintainers to dedicate more time to maintaining this project and also building new features for everyone. Also, your app or company's logo will show [on GitHub](https://github.com/react-native-elements/react-native-elements#sponsors) and link to your website - who doesn't want a little extra exposure? [Here's the info](https://opencollective.com/react-native-elements#sponsor).
|
||||||
|
|
||||||
|
[](https://opencollective.com/react-native-elements/sponsor/0/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/sponsor/1/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/sponsor/2/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/sponsor/3/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/sponsor/4/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/sponsor/5/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/sponsor/6/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/sponsor/7/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/sponsor/8/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/sponsor/9/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/sponsor/10/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/sponsor/11/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/sponsor/12/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/sponsor/13/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/sponsor/14/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/sponsor/15/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/sponsor/16/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/sponsor/17/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/sponsor/18/website)
|
||||||
|
[](https://opencollective.com/react-native-elements/sponsor/19/website)
|
@ -0,0 +1,5 @@
|
|||||||
|
import { TapRatingProps as RatingProps } from 'react-native-ratings';
|
||||||
|
import { RneFunctionComponent } from '../helpers';
|
||||||
|
export interface TapRatingProps extends RatingProps {
|
||||||
|
}
|
||||||
|
export declare const AirbnbRating: RneFunctionComponent<TapRatingProps>;
|
@ -0,0 +1,6 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { AirbnbRating as TapRating, } from 'react-native-ratings';
|
||||||
|
export const AirbnbRating = (props) => {
|
||||||
|
return React.createElement(TapRating, Object.assign({}, props));
|
||||||
|
};
|
||||||
|
AirbnbRating.displayName = 'AirbnbRating';
|
@ -0,0 +1,3 @@
|
|||||||
|
import { AirbnbRating, TapRatingProps } from './AirbnbRating';
|
||||||
|
export { AirbnbRating };
|
||||||
|
export type { TapRatingProps };
|
@ -0,0 +1,2 @@
|
|||||||
|
import { AirbnbRating } from './AirbnbRating';
|
||||||
|
export { AirbnbRating };
|
@ -0,0 +1,9 @@
|
|||||||
|
import { StyleProp, ViewStyle, ColorValue } from 'react-native';
|
||||||
|
import { ImageProps } from '../Image';
|
||||||
|
import { IconProps } from '../Icon';
|
||||||
|
import { InlinePressableProps, RneFunctionComponent } from '../helpers';
|
||||||
|
export declare type AccessoryProps = Partial<IconProps> & Partial<ImageProps> & InlinePressableProps & {
|
||||||
|
underlayColor?: ColorValue;
|
||||||
|
style?: StyleProp<ViewStyle>;
|
||||||
|
};
|
||||||
|
export declare const Accessory: RneFunctionComponent<AccessoryProps>;
|
@ -0,0 +1,47 @@
|
|||||||
|
var __rest = (this && this.__rest) || function (s, e) {
|
||||||
|
var t = {};
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||||
|
t[p] = s[p];
|
||||||
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||||
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||||
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||||
|
t[p[i]] = s[p[i]];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
import React from 'react';
|
||||||
|
import { Pressable, View, Platform, StyleSheet, } from 'react-native';
|
||||||
|
import { Image } from '../Image';
|
||||||
|
import { Icon } from '../Icon';
|
||||||
|
import { androidRipple, } from '../helpers';
|
||||||
|
export const Accessory = (_a) => {
|
||||||
|
var { size = 10, style, underlayColor = '#000', onPress, onLongPress, onPressIn, onPressOut, source, pressableProps } = _a, rest = __rest(_a, ["size", "style", "underlayColor", "onPress", "onLongPress", "onPressIn", "onPressOut", "source", "pressableProps"]);
|
||||||
|
return (React.createElement(Pressable, Object.assign({}, Object.assign({ android_ripple: (onPress || onLongPress) && androidRipple(underlayColor) }, pressableProps), { style: [
|
||||||
|
styles.accessory,
|
||||||
|
{
|
||||||
|
width: size,
|
||||||
|
height: size,
|
||||||
|
borderRadius: size / 2,
|
||||||
|
},
|
||||||
|
style,
|
||||||
|
] }, { onPressOut, onPressIn, onPress, onLongPress }),
|
||||||
|
React.createElement(View, null, source ? (React.createElement(Image, Object.assign({ source: source, style: {
|
||||||
|
width: size,
|
||||||
|
height: size,
|
||||||
|
borderRadius: size / 2,
|
||||||
|
} }, rest))) : (React.createElement(Icon, Object.assign({ name: "mode-edit", type: "material", color: "#fff", size: size * 0.8 }, rest))))));
|
||||||
|
};
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
accessory: Object.assign({ position: 'absolute', bottom: 0, right: 0, alignItems: 'center', justifyContent: 'center', backgroundColor: '#aaa' }, Platform.select({
|
||||||
|
android: {
|
||||||
|
elevation: 1,
|
||||||
|
},
|
||||||
|
default: {
|
||||||
|
shadowColor: '#000',
|
||||||
|
shadowOffset: { width: 1, height: 1 },
|
||||||
|
shadowRadius: 2,
|
||||||
|
shadowOpacity: 0.5,
|
||||||
|
},
|
||||||
|
})),
|
||||||
|
});
|
||||||
|
Accessory.displayName = 'Avatar.Accessory';
|
@ -0,0 +1,35 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { StyleProp, ViewStyle, TextStyle, ImageSourcePropType, ImageStyle } from 'react-native';
|
||||||
|
import { InlinePressableProps, RneFunctionComponent } from '../helpers';
|
||||||
|
import { IconObject } from '../Icon';
|
||||||
|
import { ImageProps } from '../Image';
|
||||||
|
export declare const avatarSizes: {
|
||||||
|
small: number;
|
||||||
|
medium: number;
|
||||||
|
large: number;
|
||||||
|
xlarge: number;
|
||||||
|
};
|
||||||
|
declare type AvatarIcon = IconObject & {
|
||||||
|
iconStyle?: StyleProp<TextStyle>;
|
||||||
|
};
|
||||||
|
export interface AvatarProps extends InlinePressableProps {
|
||||||
|
Component?: typeof React.Component;
|
||||||
|
onPress?(): void;
|
||||||
|
onLongPress?(): void;
|
||||||
|
containerStyle?: StyleProp<ViewStyle>;
|
||||||
|
source?: ImageSourcePropType;
|
||||||
|
avatarStyle?: ImageStyle;
|
||||||
|
rounded?: boolean;
|
||||||
|
title?: string;
|
||||||
|
titleStyle?: StyleProp<TextStyle>;
|
||||||
|
overlayContainerStyle?: StyleProp<TextStyle>;
|
||||||
|
icon?: AvatarIcon;
|
||||||
|
iconStyle?: StyleProp<TextStyle>;
|
||||||
|
size?: ('small' | 'medium' | 'large' | 'xlarge') | number;
|
||||||
|
placeholderStyle?: StyleProp<ViewStyle>;
|
||||||
|
renderPlaceholderContent?: React.ReactElement<{}>;
|
||||||
|
imageProps?: Partial<ImageProps>;
|
||||||
|
ImageComponent?: React.ComponentClass;
|
||||||
|
}
|
||||||
|
export declare const Avatar: RneFunctionComponent<AvatarProps>;
|
||||||
|
export {};
|
@ -0,0 +1,89 @@
|
|||||||
|
var __rest = (this && this.__rest) || function (s, e) {
|
||||||
|
var t = {};
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||||
|
t[p] = s[p];
|
||||||
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||||
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||||
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||||
|
t[p[i]] = s[p[i]];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
import React from 'react';
|
||||||
|
import { View, Text, Image as RNImage, StyleSheet, Pressable, } from 'react-native';
|
||||||
|
import { renderNode, } from '../helpers';
|
||||||
|
import { Icon } from '../Icon';
|
||||||
|
import { Image } from '../Image';
|
||||||
|
export const avatarSizes = {
|
||||||
|
small: 34,
|
||||||
|
medium: 50,
|
||||||
|
large: 75,
|
||||||
|
xlarge: 150,
|
||||||
|
};
|
||||||
|
export const Avatar = (_a) => {
|
||||||
|
var { onPress, onLongPress, onPressIn, onPressOut, Component = onPress || onLongPress || onPressIn || onPressOut
|
||||||
|
? Pressable
|
||||||
|
: View, containerStyle, icon, iconStyle, source, size = 'small', avatarStyle, rounded, title, titleStyle, overlayContainerStyle, imageProps, placeholderStyle, renderPlaceholderContent, ImageComponent = RNImage, children, pressableProps } = _a, rest = __rest(_a, ["onPress", "onLongPress", "onPressIn", "onPressOut", "Component", "containerStyle", "icon", "iconStyle", "source", "size", "avatarStyle", "rounded", "title", "titleStyle", "overlayContainerStyle", "imageProps", "placeholderStyle", "renderPlaceholderContent", "ImageComponent", "children", "pressableProps"]);
|
||||||
|
const width = typeof size === 'number' ? size : avatarSizes[size] || avatarSizes.small;
|
||||||
|
const height = width;
|
||||||
|
const titleSize = width / 2;
|
||||||
|
const iconSize = width / 2;
|
||||||
|
const PlaceholderContent = (renderPlaceholderContent &&
|
||||||
|
renderNode(undefined, renderPlaceholderContent)) ||
|
||||||
|
(title && (React.createElement(Text, { style: StyleSheet.flatten([
|
||||||
|
styles.title,
|
||||||
|
{ fontSize: titleSize },
|
||||||
|
titleStyle,
|
||||||
|
]) }, title))) ||
|
||||||
|
(icon && (React.createElement(Icon, { style: StyleSheet.flatten([iconStyle && iconStyle]), color: icon.color || 'white', name: icon.name || 'account', size: icon.size || iconSize, type: icon.type || 'material-community' })));
|
||||||
|
const hidePlaceholder = !(source && source.uri);
|
||||||
|
const imageContainerStyle = StyleSheet.flatten([
|
||||||
|
styles.overlayContainer,
|
||||||
|
rounded && { borderRadius: width / 2, overflow: 'hidden' },
|
||||||
|
overlayContainerStyle,
|
||||||
|
imageProps && imageProps.containerStyle,
|
||||||
|
]);
|
||||||
|
if (imageProps && imageProps.containerStyle) {
|
||||||
|
delete imageProps.containerStyle;
|
||||||
|
}
|
||||||
|
return (React.createElement(Component, Object.assign({ style: StyleSheet.flatten([
|
||||||
|
styles.container,
|
||||||
|
{ height, width },
|
||||||
|
rounded && { borderRadius: width / 2 },
|
||||||
|
containerStyle,
|
||||||
|
]) }, Object.assign(Object.assign({ onPress,
|
||||||
|
onLongPress,
|
||||||
|
onPressIn,
|
||||||
|
onPressOut }, pressableProps), rest)),
|
||||||
|
React.createElement(Image, Object.assign({ testID: "RNE__Avatar__Image", placeholderStyle: StyleSheet.flatten([
|
||||||
|
placeholderStyle,
|
||||||
|
hidePlaceholder && styles.hiddenPlaceholderStyle,
|
||||||
|
]), PlaceholderContent: PlaceholderContent, containerStyle: imageContainerStyle, source: source, borderRadius: rounded ? width / 2 : undefined }, imageProps, { style: StyleSheet.flatten([
|
||||||
|
styles.avatar,
|
||||||
|
imageProps && imageProps.style,
|
||||||
|
avatarStyle,
|
||||||
|
]), ImageComponent: ImageComponent })),
|
||||||
|
children));
|
||||||
|
};
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
},
|
||||||
|
avatar: {
|
||||||
|
flex: 1,
|
||||||
|
width: undefined,
|
||||||
|
height: undefined,
|
||||||
|
},
|
||||||
|
overlayContainer: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
color: '#ffffff',
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
textAlign: 'center',
|
||||||
|
},
|
||||||
|
hiddenPlaceholderStyle: {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
Avatar.displayName = 'Avatar';
|
@ -0,0 +1,7 @@
|
|||||||
|
import { AvatarProps } from './Avatar';
|
||||||
|
import { Accessory, AccessoryProps } from './Avatar.Accessory';
|
||||||
|
declare const Avatar: import("..").RneFunctionComponent<AvatarProps> & {
|
||||||
|
Accessory: import("..").RneFunctionComponent<AccessoryProps>;
|
||||||
|
};
|
||||||
|
export { Avatar, Accessory };
|
||||||
|
export type { AccessoryProps, AvatarProps };
|
@ -0,0 +1,6 @@
|
|||||||
|
import { Avatar as AvatarBase } from './Avatar';
|
||||||
|
import { Accessory } from './Avatar.Accessory';
|
||||||
|
const Avatar = Object.assign(AvatarBase, {
|
||||||
|
Accessory,
|
||||||
|
});
|
||||||
|
export { Avatar, Accessory };
|
@ -0,0 +1,13 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { TextProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
|
||||||
|
import { InlinePressableProps, RneFunctionComponent } from '../helpers';
|
||||||
|
export interface BadgeProps extends InlinePressableProps {
|
||||||
|
containerStyle?: StyleProp<ViewStyle>;
|
||||||
|
badgeStyle?: StyleProp<ViewStyle>;
|
||||||
|
textProps?: TextProps;
|
||||||
|
textStyle?: StyleProp<TextStyle>;
|
||||||
|
value?: React.ReactNode;
|
||||||
|
Component?: typeof React.Component;
|
||||||
|
status?: 'primary' | 'success' | 'warning' | 'error';
|
||||||
|
}
|
||||||
|
export declare const Badge: RneFunctionComponent<BadgeProps>;
|
@ -0,0 +1,57 @@
|
|||||||
|
var __rest = (this && this.__rest) || function (s, e) {
|
||||||
|
var t = {};
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||||
|
t[p] = s[p];
|
||||||
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||||
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||||
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||||
|
t[p[i]] = s[p[i]];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
import React from 'react';
|
||||||
|
import { StyleSheet, Text, View, Pressable, } from 'react-native';
|
||||||
|
import { defaultTheme, renderNode, } from '../helpers';
|
||||||
|
export const Badge = (_a) => {
|
||||||
|
var _b;
|
||||||
|
var { containerStyle, textStyle, textProps, badgeStyle, onPress, onLongPress, onPressOut, onPressIn, Component = onPress || onLongPress || onPressIn || onPressOut
|
||||||
|
? Pressable
|
||||||
|
: View, value, theme = defaultTheme, status = 'primary', pressableProps } = _a, rest = __rest(_a, ["containerStyle", "textStyle", "textProps", "badgeStyle", "onPress", "onLongPress", "onPressOut", "onPressIn", "Component", "value", "theme", "status", "pressableProps"]);
|
||||||
|
const element = renderNode(Text, value, Object.assign({ style: StyleSheet.flatten([styles.text, textStyle && textStyle]) }, textProps));
|
||||||
|
return (React.createElement(View, { testID: "RNE__Badge__Container", style: StyleSheet.flatten([containerStyle && containerStyle]) },
|
||||||
|
React.createElement(Component, Object.assign({}, Object.assign(Object.assign({ onPress,
|
||||||
|
onLongPress,
|
||||||
|
onPressOut,
|
||||||
|
onPressIn }, pressableProps), rest), { testID: "RNE__Badge", style: StyleSheet.flatten([
|
||||||
|
{
|
||||||
|
alignSelf: 'center',
|
||||||
|
minWidth: size,
|
||||||
|
height: size,
|
||||||
|
borderRadius: size / 2,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
backgroundColor: (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b[status],
|
||||||
|
borderWidth: StyleSheet.hairlineWidth,
|
||||||
|
borderColor: '#fff',
|
||||||
|
},
|
||||||
|
!element && styles.miniBadge,
|
||||||
|
badgeStyle && badgeStyle,
|
||||||
|
]) }), element)));
|
||||||
|
};
|
||||||
|
const size = 18;
|
||||||
|
const miniSize = 8;
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
miniBadge: {
|
||||||
|
paddingHorizontal: 0,
|
||||||
|
paddingVertical: 0,
|
||||||
|
minWidth: miniSize,
|
||||||
|
height: miniSize,
|
||||||
|
borderRadius: miniSize / 2,
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: 'white',
|
||||||
|
paddingHorizontal: 4,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
Badge.displayName = 'Badge';
|
@ -0,0 +1,4 @@
|
|||||||
|
import { Badge, BadgeProps } from './Badge';
|
||||||
|
import { withBadge } from './withBadge';
|
||||||
|
export { withBadge, Badge };
|
||||||
|
export type { BadgeProps };
|
@ -0,0 +1,3 @@
|
|||||||
|
import { Badge } from './Badge';
|
||||||
|
import { withBadge } from './withBadge';
|
||||||
|
export { withBadge, Badge };
|
@ -0,0 +1,13 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { StyleProp, ViewStyle } from 'react-native';
|
||||||
|
import { BadgeProps } from './Badge';
|
||||||
|
declare type withBadgeOptions = {
|
||||||
|
bottom?: number;
|
||||||
|
left?: number;
|
||||||
|
right?: number;
|
||||||
|
top?: number;
|
||||||
|
hidden?: boolean;
|
||||||
|
containerStyle?: StyleProp<ViewStyle>;
|
||||||
|
} & BadgeProps;
|
||||||
|
export declare const withBadge: (value: React.ReactNode | ((props: any) => React.ReactNode), options?: withBadgeOptions) => (WrappedComponent: React.ComponentType<any>) => React.ComponentType;
|
||||||
|
export {};
|
@ -0,0 +1,43 @@
|
|||||||
|
var __rest = (this && this.__rest) || function (s, e) {
|
||||||
|
var t = {};
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||||
|
t[p] = s[p];
|
||||||
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||||
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||||
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||||
|
t[p[i]] = s[p[i]];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
import React from 'react';
|
||||||
|
import { StyleSheet, View } from 'react-native';
|
||||||
|
import { Badge } from './Badge';
|
||||||
|
export const withBadge = (value, options = {}) => (WrappedComponent) => {
|
||||||
|
const WithBadge = (props) => {
|
||||||
|
const { bottom, hidden = false, left, containerStyle } = options, badgeProps = __rest(options, ["bottom", "hidden", "left", "containerStyle"]);
|
||||||
|
let { right = -16, top = -1 } = options;
|
||||||
|
if (!value) {
|
||||||
|
right = -3;
|
||||||
|
top = 3;
|
||||||
|
}
|
||||||
|
const badgeValue = typeof value === 'function' ? value(props) : value;
|
||||||
|
return (React.createElement(View, { style: StyleSheet.flatten([styles.container, containerStyle]) },
|
||||||
|
React.createElement(WrappedComponent, Object.assign({}, props)),
|
||||||
|
!hidden && (React.createElement(Badge, Object.assign({ value: badgeValue, status: "error", containerStyle: StyleSheet.flatten([
|
||||||
|
styles.badgeContainer,
|
||||||
|
{ bottom, left, right, top },
|
||||||
|
]) }, badgeProps)))));
|
||||||
|
};
|
||||||
|
WithBadge.displayName = `WithBadge(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
|
||||||
|
return WithBadge;
|
||||||
|
};
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
badgeContainer: {
|
||||||
|
position: 'absolute',
|
||||||
|
},
|
||||||
|
container: {
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
position: 'relative',
|
||||||
|
},
|
||||||
|
});
|
@ -0,0 +1,11 @@
|
|||||||
|
import { StyleProp, ViewStyle, ModalProps, ScrollViewProps } from 'react-native';
|
||||||
|
import { RneFunctionComponent } from '../helpers';
|
||||||
|
export interface BottomSheetProps {
|
||||||
|
containerStyle?: StyleProp<ViewStyle>;
|
||||||
|
modalProps?: ModalProps;
|
||||||
|
backdropStyle?: StyleProp<ViewStyle>;
|
||||||
|
onBackdropPress?(): void;
|
||||||
|
isVisible?: boolean;
|
||||||
|
scrollViewProps?: ScrollViewProps;
|
||||||
|
}
|
||||||
|
export declare const BottomSheet: RneFunctionComponent<BottomSheetProps>;
|
@ -0,0 +1,33 @@
|
|||||||
|
var __rest = (this && this.__rest) || function (s, e) {
|
||||||
|
var t = {};
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||||
|
t[p] = s[p];
|
||||||
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||||
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||||
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||||
|
t[p[i]] = s[p[i]];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
import React from 'react';
|
||||||
|
import { Modal, View, StyleSheet, Pressable, ScrollView, } from 'react-native';
|
||||||
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||||
|
export const BottomSheet = (_a) => {
|
||||||
|
var { containerStyle, backdropStyle, onBackdropPress = () => null, isVisible = false, modalProps = {}, children, scrollViewProps = {} } = _a, rest = __rest(_a, ["containerStyle", "backdropStyle", "onBackdropPress", "isVisible", "modalProps", "children", "scrollViewProps"]);
|
||||||
|
return (React.createElement(Modal, Object.assign({ animationType: "slide", onRequestClose: onBackdropPress, transparent: true, visible: isVisible }, modalProps),
|
||||||
|
React.createElement(Pressable, { onPress: onBackdropPress, style: [StyleSheet.absoluteFill, backdropStyle], testID: "RNE__Overlay__backdrop" }),
|
||||||
|
React.createElement(SafeAreaView, Object.assign({ style: StyleSheet.flatten([
|
||||||
|
styles.safeAreaView,
|
||||||
|
containerStyle && containerStyle,
|
||||||
|
]), pointerEvents: "box-none" }, rest),
|
||||||
|
React.createElement(View, null,
|
||||||
|
React.createElement(ScrollView, Object.assign({}, scrollViewProps), children)))));
|
||||||
|
};
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
safeAreaView: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: 'rgba(0,0,0,0.2)',
|
||||||
|
flexDirection: 'column-reverse',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
BottomSheet.displayName = 'BottomSheet';
|
@ -0,0 +1,3 @@
|
|||||||
|
import { BottomSheet, BottomSheetProps } from './BottomSheet';
|
||||||
|
export { BottomSheet };
|
||||||
|
export type { BottomSheetProps };
|
@ -0,0 +1,2 @@
|
|||||||
|
import { BottomSheet } from './BottomSheet';
|
||||||
|
export { BottomSheet };
|
@ -0,0 +1,32 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { ActivityIndicatorProps, StyleProp, TextStyle, TouchableNativeFeedbackProps, TouchableOpacityProps, ViewStyle } from 'react-native';
|
||||||
|
import { StringOmit, RneFunctionComponent, ThemeSpacing } from '../helpers';
|
||||||
|
import { IconNode } from '../Icon';
|
||||||
|
import { TextProps } from '../Text';
|
||||||
|
export interface ButtonProps extends TouchableOpacityProps, TouchableNativeFeedbackProps {
|
||||||
|
title?: string | React.ReactElement<{}>;
|
||||||
|
titleStyle?: StyleProp<TextStyle>;
|
||||||
|
titleProps?: TextProps;
|
||||||
|
buttonStyle?: StyleProp<ViewStyle>;
|
||||||
|
type?: 'solid' | 'clear' | 'outline';
|
||||||
|
loading?: boolean;
|
||||||
|
loadingStyle?: StyleProp<ViewStyle>;
|
||||||
|
loadingProps?: ActivityIndicatorProps;
|
||||||
|
containerStyle?: StyleProp<ViewStyle>;
|
||||||
|
icon?: IconNode;
|
||||||
|
iconContainerStyle?: StyleProp<ViewStyle>;
|
||||||
|
iconRight?: boolean;
|
||||||
|
linearGradientProps?: object;
|
||||||
|
TouchableComponent?: typeof React.Component;
|
||||||
|
ViewComponent?: typeof React.Component;
|
||||||
|
disabled?: boolean;
|
||||||
|
disabledStyle?: StyleProp<ViewStyle>;
|
||||||
|
disabledTitleStyle?: StyleProp<TextStyle>;
|
||||||
|
raised?: boolean;
|
||||||
|
iconPosition?: 'left' | 'right' | 'top' | 'bottom';
|
||||||
|
uppercase?: boolean;
|
||||||
|
radius?: number | StringOmit<keyof ThemeSpacing>;
|
||||||
|
size?: 'sm' | 'md' | 'lg';
|
||||||
|
color?: StringOmit<'primary' | 'secondary' | 'success' | 'error' | 'warning'>;
|
||||||
|
}
|
||||||
|
export declare const Button: RneFunctionComponent<ButtonProps>;
|
@ -0,0 +1,169 @@
|
|||||||
|
var __rest = (this && this.__rest) || function (s, e) {
|
||||||
|
var t = {};
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||||
|
t[p] = s[p];
|
||||||
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||||
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||||
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||||
|
t[p[i]] = s[p[i]];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
import Color from 'color';
|
||||||
|
import React, { useCallback, useEffect, useMemo } from 'react';
|
||||||
|
import { ActivityIndicator, Platform, StyleSheet, Text, TouchableNativeFeedback, TouchableOpacity, View, } from 'react-native';
|
||||||
|
import { color, defaultTheme, renderNode, } from '../helpers';
|
||||||
|
import { Icon } from '../Icon';
|
||||||
|
const defaultLoadingProps = (type, theme) => {
|
||||||
|
var _a;
|
||||||
|
return ({
|
||||||
|
color: type === 'solid' ? 'white' : (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary,
|
||||||
|
size: 'small',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const positionStyle = {
|
||||||
|
top: 'column',
|
||||||
|
bottom: 'column-reverse',
|
||||||
|
left: 'row',
|
||||||
|
right: 'row-reverse',
|
||||||
|
};
|
||||||
|
export const Button = (_a) => {
|
||||||
|
var _b, _c, _d, _e, _f, _g, _h;
|
||||||
|
var { TouchableComponent, containerStyle, onPress = () => { }, buttonStyle, type = 'solid', loading = false, loadingStyle, loadingProps: passedLoadingProps, size = 'md', radius = 'xs', uppercase = false, color: buttonColor = 'primary', title = '', titleProps, titleStyle: passedTitleStyle, icon, iconContainerStyle, iconRight = false, disabled = false, disabledStyle, disabledTitleStyle, raised = false, linearGradientProps, ViewComponent = View, theme = defaultTheme, iconPosition = 'left', children = title } = _a, rest = __rest(_a, ["TouchableComponent", "containerStyle", "onPress", "buttonStyle", "type", "loading", "loadingStyle", "loadingProps", "size", "radius", "uppercase", "color", "title", "titleProps", "titleStyle", "icon", "iconContainerStyle", "iconRight", "disabled", "disabledStyle", "disabledTitleStyle", "raised", "linearGradientProps", "ViewComponent", "theme", "iconPosition", "children"]);
|
||||||
|
useEffect(() => {
|
||||||
|
if (linearGradientProps && !ViewComponent) {
|
||||||
|
console.warn("You need to pass a ViewComponent to use linearGradientProps !\nExample: ViewComponent={require('react-native-linear-gradient')}");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const handleOnPress = useCallback((evt) => {
|
||||||
|
if (!loading && !disabled) {
|
||||||
|
onPress(evt);
|
||||||
|
}
|
||||||
|
}, [loading, onPress, disabled]);
|
||||||
|
const TouchableComponentInternal = TouchableComponent ||
|
||||||
|
Platform.select({
|
||||||
|
android: linearGradientProps ? TouchableOpacity : TouchableNativeFeedback,
|
||||||
|
default: TouchableOpacity,
|
||||||
|
});
|
||||||
|
const titleStyle = useMemo(() => {
|
||||||
|
var _a, _b;
|
||||||
|
return StyleSheet.flatten([
|
||||||
|
{
|
||||||
|
color: type === 'solid' ? 'white' : (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary,
|
||||||
|
},
|
||||||
|
uppercase && { textTransform: 'uppercase' },
|
||||||
|
styles.title,
|
||||||
|
passedTitleStyle,
|
||||||
|
disabled && {
|
||||||
|
color: color((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.disabled).darken(0.3).string(),
|
||||||
|
},
|
||||||
|
disabled && disabledTitleStyle,
|
||||||
|
]);
|
||||||
|
}, [
|
||||||
|
disabled,
|
||||||
|
disabledTitleStyle,
|
||||||
|
passedTitleStyle,
|
||||||
|
(_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.disabled,
|
||||||
|
(_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.primary,
|
||||||
|
type,
|
||||||
|
uppercase,
|
||||||
|
]);
|
||||||
|
const background = Platform.OS === 'android' && Platform.Version >= 21
|
||||||
|
? TouchableNativeFeedback.Ripple(Color((_d = titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.color) === null || _d === void 0 ? void 0 : _d.toString()).alpha(0.32).rgb().string(), false)
|
||||||
|
: undefined;
|
||||||
|
const loadingProps = useMemo(() => (Object.assign(Object.assign({}, defaultLoadingProps(type, theme)), passedLoadingProps)), [passedLoadingProps, theme, type]);
|
||||||
|
const accessibilityState = useMemo(() => ({
|
||||||
|
disabled: !!disabled,
|
||||||
|
busy: !!loading,
|
||||||
|
}), [disabled, loading]);
|
||||||
|
const borderRadius = useMemo(() => {
|
||||||
|
var _a;
|
||||||
|
return Number((_a = theme.spacing[radius]) !== null && _a !== void 0 ? _a : (radius || '0')) || 0;
|
||||||
|
}, [radius, theme]);
|
||||||
|
return (React.createElement(View, { style: [
|
||||||
|
styles.container,
|
||||||
|
{ borderRadius },
|
||||||
|
containerStyle,
|
||||||
|
raised && !disabled && type !== 'clear' && styles.raised,
|
||||||
|
], testID: "RNE_BUTTON_WRAPPER" },
|
||||||
|
React.createElement(TouchableComponentInternal, Object.assign({ onPress: handleOnPress, delayPressIn: 0, activeOpacity: 0.3, accessibilityRole: "button", accessibilityState: accessibilityState, disabled: disabled, background: background }, rest),
|
||||||
|
React.createElement(ViewComponent, Object.assign({}, linearGradientProps, { style: StyleSheet.flatten([
|
||||||
|
styles.button,
|
||||||
|
{
|
||||||
|
padding: theme.spacing[size],
|
||||||
|
paddingHorizontal: theme.spacing[size] + 2,
|
||||||
|
borderRadius,
|
||||||
|
flexDirection: positionStyle[iconRight ? 'right' : iconPosition] || 'row',
|
||||||
|
backgroundColor: type === 'solid'
|
||||||
|
? theme.colors[buttonColor] ||
|
||||||
|
buttonColor ||
|
||||||
|
((_e = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _e === void 0 ? void 0 : _e.primary)
|
||||||
|
: 'transparent',
|
||||||
|
borderColor: (_f = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _f === void 0 ? void 0 : _f.primary,
|
||||||
|
borderWidth: type === 'outline' ? StyleSheet.hairlineWidth : 0,
|
||||||
|
},
|
||||||
|
buttonStyle,
|
||||||
|
disabled &&
|
||||||
|
type === 'solid' && {
|
||||||
|
backgroundColor: (_g = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _g === void 0 ? void 0 : _g.disabled,
|
||||||
|
},
|
||||||
|
disabled &&
|
||||||
|
type === 'outline' && {
|
||||||
|
borderColor: color((_h = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _h === void 0 ? void 0 : _h.disabled)
|
||||||
|
.darken(0.3)
|
||||||
|
.string(),
|
||||||
|
},
|
||||||
|
disabled && disabledStyle,
|
||||||
|
]) }),
|
||||||
|
loading && (React.createElement(ActivityIndicator, Object.assign({ style: StyleSheet.flatten([styles.loading, loadingStyle]), color: loadingProps.color, size: loadingProps.size }, loadingProps))),
|
||||||
|
!loading &&
|
||||||
|
icon &&
|
||||||
|
renderNode(Icon, icon, {
|
||||||
|
containerStyle: StyleSheet.flatten([
|
||||||
|
styles.iconContainer,
|
||||||
|
iconContainerStyle,
|
||||||
|
]),
|
||||||
|
}),
|
||||||
|
!loading &&
|
||||||
|
React.Children.toArray(children).map((child, index) => (React.createElement(React.Fragment, { key: index }, typeof child === 'string'
|
||||||
|
? renderNode(Text, child, Object.assign({ style: Object.assign({}, titleStyle) }, titleProps))
|
||||||
|
: child)))))));
|
||||||
|
};
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
button: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
padding: defaultTheme.spacing.md,
|
||||||
|
paddingHorizontal: defaultTheme.spacing.lg,
|
||||||
|
},
|
||||||
|
container: {
|
||||||
|
overflow: 'hidden',
|
||||||
|
},
|
||||||
|
title: Object.assign({ fontSize: 16, textAlign: 'center', paddingVertical: 1 }, Platform.select({
|
||||||
|
android: {
|
||||||
|
fontFamily: 'sans-serif-medium',
|
||||||
|
},
|
||||||
|
default: {
|
||||||
|
fontSize: 18,
|
||||||
|
},
|
||||||
|
})),
|
||||||
|
iconContainer: {
|
||||||
|
marginHorizontal: 5,
|
||||||
|
},
|
||||||
|
raised: Object.assign({ backgroundColor: '#fff', overflow: 'visible' }, Platform.select({
|
||||||
|
android: {
|
||||||
|
elevation: 4,
|
||||||
|
},
|
||||||
|
default: {
|
||||||
|
shadowColor: 'rgba(0,0,0, .4)',
|
||||||
|
shadowOffset: { height: 1, width: 1 },
|
||||||
|
shadowOpacity: 1,
|
||||||
|
shadowRadius: 1,
|
||||||
|
},
|
||||||
|
})),
|
||||||
|
loading: {
|
||||||
|
marginVertical: 2,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
Button.displayName = 'Button';
|
@ -0,0 +1,3 @@
|
|||||||
|
import { Button, ButtonProps } from './Button';
|
||||||
|
export { Button };
|
||||||
|
export type { ButtonProps };
|
@ -0,0 +1,2 @@
|
|||||||
|
import { Button } from './Button';
|
||||||
|
export { Button };
|
@ -0,0 +1,41 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { ViewStyle, StyleProp, TextStyle } from 'react-native';
|
||||||
|
import { RneFunctionComponent, InlinePressableProps } from '../helpers';
|
||||||
|
declare type ButtonComponent = React.ReactElement;
|
||||||
|
declare type ButtonObject = {
|
||||||
|
element: React.ElementType<any & {
|
||||||
|
isSelected?: boolean;
|
||||||
|
}>;
|
||||||
|
};
|
||||||
|
export interface ButtonGroupProps extends InlinePressableProps {
|
||||||
|
button?: object;
|
||||||
|
Component?: typeof React.Component;
|
||||||
|
onPress?(...args: any[]): void;
|
||||||
|
buttons?: (string | ButtonComponent | ButtonObject)[];
|
||||||
|
containerStyle?: StyleProp<ViewStyle>;
|
||||||
|
textStyle?: StyleProp<TextStyle>;
|
||||||
|
selectedTextStyle?: StyleProp<TextStyle>;
|
||||||
|
selectedButtonStyle?: StyleProp<ViewStyle>;
|
||||||
|
underlayColor?: string;
|
||||||
|
selectedIndex?: number | null;
|
||||||
|
selectedIndexes?: number[];
|
||||||
|
activeOpacity?: number;
|
||||||
|
onHideUnderlay?(): void;
|
||||||
|
onShowUnderlay?(): void;
|
||||||
|
setOpacityTo?: (value: number) => void;
|
||||||
|
innerBorderStyle?: {
|
||||||
|
color?: string;
|
||||||
|
width?: number;
|
||||||
|
};
|
||||||
|
buttonStyle?: StyleProp<ViewStyle>;
|
||||||
|
buttonContainerStyle?: StyleProp<ViewStyle>;
|
||||||
|
selectMultiple?: boolean;
|
||||||
|
disabled?: boolean | number[];
|
||||||
|
disabledStyle?: StyleProp<ViewStyle>;
|
||||||
|
disabledTextStyle?: StyleProp<TextStyle>;
|
||||||
|
disabledSelectedStyle?: StyleProp<ViewStyle>;
|
||||||
|
disabledSelectedTextStyle?: StyleProp<TextStyle>;
|
||||||
|
vertical?: boolean;
|
||||||
|
}
|
||||||
|
export declare const ButtonGroup: RneFunctionComponent<ButtonGroupProps>;
|
||||||
|
export {};
|
@ -0,0 +1,132 @@
|
|||||||
|
var __rest = (this && this.__rest) || function (s, e) {
|
||||||
|
var t = {};
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||||
|
t[p] = s[p];
|
||||||
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||||
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||||
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||||
|
t[p[i]] = s[p[i]];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
import Color from 'color';
|
||||||
|
import React from 'react';
|
||||||
|
import { View, Platform, StyleSheet, Pressable, } from 'react-native';
|
||||||
|
import { normalizeText, color, androidRipple, defaultTheme, } from '../helpers';
|
||||||
|
import { Text } from '../Text';
|
||||||
|
export const ButtonGroup = (_a) => {
|
||||||
|
var _b, _c;
|
||||||
|
var { Component = Pressable, pressableProps, buttons, onPress = () => null, onLongPress, onPressIn, onPressOut, selectedIndex = null, selectedIndexes = [], selectMultiple = false, containerStyle, innerBorderStyle, buttonStyle, buttonContainerStyle, textStyle, selectedTextStyle, selectedButtonStyle, activeOpacity, onHideUnderlay, onShowUnderlay, setOpacityTo, disabled = false, disabledStyle, disabledTextStyle, disabledSelectedStyle, disabledSelectedTextStyle, vertical = false, theme = defaultTheme, underlayColor = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary } = _a, rest = __rest(_a, ["Component", "pressableProps", "buttons", "onPress", "onLongPress", "onPressIn", "onPressOut", "selectedIndex", "selectedIndexes", "selectMultiple", "containerStyle", "innerBorderStyle", "buttonStyle", "buttonContainerStyle", "textStyle", "selectedTextStyle", "selectedButtonStyle", "activeOpacity", "onHideUnderlay", "onShowUnderlay", "setOpacityTo", "disabled", "disabledStyle", "disabledTextStyle", "disabledSelectedStyle", "disabledSelectedTextStyle", "vertical", "theme", "underlayColor"]);
|
||||||
|
let innerBorderWidth = (_c = innerBorderStyle === null || innerBorderStyle === void 0 ? void 0 : innerBorderStyle.width) !== null && _c !== void 0 ? _c : 1;
|
||||||
|
return (React.createElement(View, Object.assign({ testID: "RNE__ButtonGroupContainer" }, rest, { style: StyleSheet.flatten([
|
||||||
|
styles.container,
|
||||||
|
vertical && styles.verticalContainer,
|
||||||
|
containerStyle && containerStyle,
|
||||||
|
]) }), buttons === null || buttons === void 0 ? void 0 : buttons.map((button, i) => {
|
||||||
|
var _a, _b, _c, _d, _e, _f;
|
||||||
|
const isSelected = selectedIndex === i || selectedIndexes.includes(i);
|
||||||
|
const isDisabled = disabled === true ||
|
||||||
|
(Array.isArray(disabled) && disabled.includes(i));
|
||||||
|
return (React.createElement(View, { key: i, style: StyleSheet.flatten([
|
||||||
|
!vertical && styles.button,
|
||||||
|
vertical && styles.verticalComponent,
|
||||||
|
i !== buttons.length - 1 &&
|
||||||
|
(vertical
|
||||||
|
? {
|
||||||
|
borderBottomWidth: innerBorderWidth,
|
||||||
|
borderBottomColor: (innerBorderStyle && innerBorderStyle.color) ||
|
||||||
|
((_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.grey4),
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
borderRightWidth: innerBorderWidth,
|
||||||
|
borderRightColor: (innerBorderStyle && innerBorderStyle.color) ||
|
||||||
|
((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.grey4),
|
||||||
|
}),
|
||||||
|
buttonContainerStyle,
|
||||||
|
]) },
|
||||||
|
React.createElement(Component, Object.assign({ testID: "RNE__ButtonGroupItem", accessibilityState: {
|
||||||
|
disabled: isDisabled,
|
||||||
|
}, activeOpacity: activeOpacity, setOpacityTo: setOpacityTo, onHideUnderlay: onHideUnderlay, onShowUnderlay: onShowUnderlay, disabled: isDisabled, onPress: () => {
|
||||||
|
if (selectMultiple) {
|
||||||
|
if (selectedIndexes.includes(i)) {
|
||||||
|
onPress(selectedIndexes.filter((index) => index !== i));
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
onPress([...selectedIndexes, i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
onPress(i);
|
||||||
|
}
|
||||||
|
}, style: styles.button }, Object.assign({ android_ripple: androidRipple(Color(underlayColor).alpha(activeOpacity).rgb().toString()), onPressIn,
|
||||||
|
onPressOut,
|
||||||
|
onLongPress }, pressableProps)),
|
||||||
|
React.createElement(View, { style: StyleSheet.flatten([
|
||||||
|
styles.textContainer,
|
||||||
|
buttonStyle && buttonStyle,
|
||||||
|
isSelected && {
|
||||||
|
backgroundColor: (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.primary,
|
||||||
|
},
|
||||||
|
isSelected && selectedButtonStyle && selectedButtonStyle,
|
||||||
|
isDisabled && styles.disabled,
|
||||||
|
isDisabled && disabledStyle,
|
||||||
|
isDisabled &&
|
||||||
|
isSelected && {
|
||||||
|
backgroundColor: (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.disabled,
|
||||||
|
},
|
||||||
|
isDisabled && isSelected && disabledSelectedStyle,
|
||||||
|
]) }, hasElementKey(button) ? (React.createElement(button.element, { isSelected: isSelected })) : (React.createElement(Text, { testID: "buttonGroupItemText", style: StyleSheet.flatten([
|
||||||
|
Object.assign({ fontSize: normalizeText(13), color: (_e = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _e === void 0 ? void 0 : _e.grey2 }, Platform.select({
|
||||||
|
android: {},
|
||||||
|
default: {
|
||||||
|
fontWeight: '500',
|
||||||
|
},
|
||||||
|
})),
|
||||||
|
textStyle && textStyle,
|
||||||
|
isSelected && { color: '#fff' },
|
||||||
|
isSelected && selectedTextStyle,
|
||||||
|
isDisabled && {
|
||||||
|
color: color((_f = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _f === void 0 ? void 0 : _f.disabled)
|
||||||
|
.darken(0.3)
|
||||||
|
.toString(),
|
||||||
|
},
|
||||||
|
isDisabled && disabledTextStyle,
|
||||||
|
isDisabled && isSelected && disabledSelectedTextStyle,
|
||||||
|
]) }, button))))));
|
||||||
|
})));
|
||||||
|
};
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
button: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
textContainer: {
|
||||||
|
flex: 1,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
container: {
|
||||||
|
marginHorizontal: 10,
|
||||||
|
marginVertical: 5,
|
||||||
|
borderColor: '#e3e3e3',
|
||||||
|
borderWidth: 1,
|
||||||
|
flexDirection: 'row',
|
||||||
|
borderRadius: 3,
|
||||||
|
overflow: 'hidden',
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
height: 40,
|
||||||
|
},
|
||||||
|
verticalContainer: {
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: null,
|
||||||
|
},
|
||||||
|
verticalComponent: {
|
||||||
|
height: 40,
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
ButtonGroup.displayName = 'ButtonGroup';
|
||||||
|
const hasElementKey = (button) => {
|
||||||
|
return (typeof button === 'object' && Boolean(button.element));
|
||||||
|
};
|
@ -0,0 +1,3 @@
|
|||||||
|
import { ButtonGroup, ButtonGroupProps } from './ButtonGroup';
|
||||||
|
export { ButtonGroup };
|
||||||
|
export type { ButtonGroupProps };
|
@ -0,0 +1,2 @@
|
|||||||
|
import { ButtonGroup } from './ButtonGroup';
|
||||||
|
export { ButtonGroup };
|
@ -0,0 +1,5 @@
|
|||||||
|
import { DividerProps } from '../Divider';
|
||||||
|
import { RneFunctionComponent } from '../helpers';
|
||||||
|
export interface CardDividerProps extends DividerProps {
|
||||||
|
}
|
||||||
|
export declare const CardDivider: RneFunctionComponent<CardDividerProps>;
|
@ -0,0 +1,24 @@
|
|||||||
|
var __rest = (this && this.__rest) || function (s, e) {
|
||||||
|
var t = {};
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||||
|
t[p] = s[p];
|
||||||
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||||
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||||
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||||
|
t[p[i]] = s[p[i]];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
import React from 'react';
|
||||||
|
import { StyleSheet } from 'react-native';
|
||||||
|
import { Divider } from '../Divider';
|
||||||
|
export const CardDivider = (_a) => {
|
||||||
|
var { style } = _a, rest = __rest(_a, ["style"]);
|
||||||
|
return React.createElement(Divider, Object.assign({ style: StyleSheet.flatten([styles.divider, style]) }, rest));
|
||||||
|
};
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
divider: {
|
||||||
|
marginBottom: 15,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
CardDivider.displayName = 'Card.Divider';
|
@ -0,0 +1,5 @@
|
|||||||
|
import { TextProps } from '../Text';
|
||||||
|
import { RneFunctionComponent } from '../helpers';
|
||||||
|
export interface CardFeaturedSubtitleProps extends TextProps {
|
||||||
|
}
|
||||||
|
export declare const CardFeaturedSubtitle: RneFunctionComponent<CardFeaturedSubtitleProps>;
|
@ -0,0 +1,31 @@
|
|||||||
|
var __rest = (this && this.__rest) || function (s, e) {
|
||||||
|
var t = {};
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||||
|
t[p] = s[p];
|
||||||
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||||
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||||
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||||
|
t[p[i]] = s[p[i]];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
import React from 'react';
|
||||||
|
import { Platform, StyleSheet } from 'react-native';
|
||||||
|
import normalize from '../helpers/normalizeText';
|
||||||
|
import { fonts } from '../helpers';
|
||||||
|
import { Text } from '../Text';
|
||||||
|
import { defaultTheme } from '../helpers';
|
||||||
|
export const CardFeaturedSubtitle = (_a) => {
|
||||||
|
var _b;
|
||||||
|
var { theme = defaultTheme, style } = _a, rest = __rest(_a, ["theme", "style"]);
|
||||||
|
return (React.createElement(Text, Object.assign({ style: StyleSheet.flatten([
|
||||||
|
Object.assign({ fontSize: normalize(13), marginBottom: 8, color: (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.white }, Platform.select({
|
||||||
|
android: Object.assign({}, fonts.android.black),
|
||||||
|
default: {
|
||||||
|
fontWeight: '400',
|
||||||
|
},
|
||||||
|
})),
|
||||||
|
style,
|
||||||
|
]) }, rest)));
|
||||||
|
};
|
||||||
|
CardFeaturedSubtitle.displayName = 'Card.FeaturedSubtitle';
|
@ -0,0 +1,5 @@
|
|||||||
|
import { TextProps } from '../Text';
|
||||||
|
import { RneFunctionComponent } from '../helpers';
|
||||||
|
export interface CardFeaturedTitleProps extends TextProps {
|
||||||
|
}
|
||||||
|
export declare const CardFeaturedTitle: RneFunctionComponent<CardFeaturedTitleProps>;
|
@ -0,0 +1,31 @@
|
|||||||
|
var __rest = (this && this.__rest) || function (s, e) {
|
||||||
|
var t = {};
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||||
|
t[p] = s[p];
|
||||||
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||||
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||||
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||||
|
t[p[i]] = s[p[i]];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
import React from 'react';
|
||||||
|
import { Platform, StyleSheet } from 'react-native';
|
||||||
|
import normalize from '../helpers/normalizeText';
|
||||||
|
import { fonts } from '../helpers';
|
||||||
|
import { Text } from '../Text';
|
||||||
|
import { defaultTheme } from '../helpers';
|
||||||
|
export const CardFeaturedTitle = (_a) => {
|
||||||
|
var _b;
|
||||||
|
var { theme = defaultTheme, style } = _a, rest = __rest(_a, ["theme", "style"]);
|
||||||
|
return (React.createElement(Text, Object.assign({ style: StyleSheet.flatten([
|
||||||
|
Object.assign({ fontSize: normalize(18), marginBottom: 8, color: (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.white }, Platform.select({
|
||||||
|
android: Object.assign({}, fonts.android.black),
|
||||||
|
default: {
|
||||||
|
fontWeight: '800',
|
||||||
|
},
|
||||||
|
})),
|
||||||
|
style,
|
||||||
|
]) }, rest)));
|
||||||
|
};
|
||||||
|
CardFeaturedTitle.displayName = 'Card.FeaturedTitle';
|
@ -0,0 +1,5 @@
|
|||||||
|
import { RneFunctionComponent } from '../helpers';
|
||||||
|
import { ImageProps } from '../Image';
|
||||||
|
export interface CardImageProps extends ImageProps {
|
||||||
|
}
|
||||||
|
export declare const CardImage: RneFunctionComponent<CardImageProps>;
|
@ -0,0 +1,25 @@
|
|||||||
|
var __rest = (this && this.__rest) || function (s, e) {
|
||||||
|
var t = {};
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||||
|
t[p] = s[p];
|
||||||
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||||
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||||
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||||
|
t[p[i]] = s[p[i]];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
import React from 'react';
|
||||||
|
import { StyleSheet } from 'react-native';
|
||||||
|
import { Image } from '../Image';
|
||||||
|
export const CardImage = (_a) => {
|
||||||
|
var { style } = _a, props = __rest(_a, ["style"]);
|
||||||
|
return React.createElement(Image, Object.assign({ style: StyleSheet.flatten([styles.image, style]) }, props));
|
||||||
|
};
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
image: {
|
||||||
|
width: null,
|
||||||
|
height: 150,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
CardImage.displayName = 'Card.Image';
|
@ -0,0 +1,5 @@
|
|||||||
|
import { TextProps } from '../Text';
|
||||||
|
import { RneFunctionComponent } from '../helpers';
|
||||||
|
export interface CardTitleProps extends TextProps {
|
||||||
|
}
|
||||||
|
export declare const CardTitle: RneFunctionComponent<CardTitleProps>;
|
@ -0,0 +1,31 @@
|
|||||||
|
var __rest = (this && this.__rest) || function (s, e) {
|
||||||
|
var t = {};
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||||
|
t[p] = s[p];
|
||||||
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||||
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||||
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||||
|
t[p[i]] = s[p[i]];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
import React from 'react';
|
||||||
|
import { Platform, StyleSheet } from 'react-native';
|
||||||
|
import normalize from '../helpers/normalizeText';
|
||||||
|
import { fonts } from '../helpers';
|
||||||
|
import { Text } from '../Text';
|
||||||
|
import { defaultTheme } from '../helpers';
|
||||||
|
export const CardTitle = (_a) => {
|
||||||
|
var _b;
|
||||||
|
var { style, theme = defaultTheme } = _a, rest = __rest(_a, ["style", "theme"]);
|
||||||
|
return (React.createElement(Text, Object.assign({ testID: "cardTitle", style: StyleSheet.flatten([
|
||||||
|
Object.assign(Object.assign({ fontSize: normalize(14), color: (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.grey1 }, Platform.select({
|
||||||
|
android: Object.assign({}, fonts.android.black),
|
||||||
|
default: {
|
||||||
|
fontWeight: 'bold',
|
||||||
|
},
|
||||||
|
})), { textAlign: 'center', marginBottom: 15 }),
|
||||||
|
style,
|
||||||
|
]) }, rest)));
|
||||||
|
};
|
||||||
|
CardTitle.displayName = 'Card.Title';
|
@ -0,0 +1,7 @@
|
|||||||
|
import { StyleProp, ViewStyle } from 'react-native';
|
||||||
|
import { RneFunctionComponent } from '../helpers';
|
||||||
|
export interface CardProps {
|
||||||
|
containerStyle?: StyleProp<ViewStyle>;
|
||||||
|
wrapperStyle?: StyleProp<ViewStyle>;
|
||||||
|
}
|
||||||
|
export declare const CardBase: RneFunctionComponent<CardProps>;
|
@ -0,0 +1,42 @@
|
|||||||
|
var __rest = (this && this.__rest) || function (s, e) {
|
||||||
|
var t = {};
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||||
|
t[p] = s[p];
|
||||||
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||||
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||||
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||||
|
t[p[i]] = s[p[i]];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
import React from 'react';
|
||||||
|
import { View, Platform, StyleSheet } from 'react-native';
|
||||||
|
import { defaultTheme } from '../helpers';
|
||||||
|
export const CardBase = (_a) => {
|
||||||
|
var _b, _c;
|
||||||
|
var { children, containerStyle, wrapperStyle, theme = defaultTheme } = _a, rest = __rest(_a, ["children", "containerStyle", "wrapperStyle", "theme"]);
|
||||||
|
return (React.createElement(View, Object.assign({}, rest, { style: StyleSheet.flatten([
|
||||||
|
Object.assign({ backgroundColor: (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.white, borderWidth: 1, padding: 15, margin: 15, marginBottom: 0, borderColor: (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.grey5 }, Platform.select({
|
||||||
|
android: {
|
||||||
|
elevation: 1,
|
||||||
|
},
|
||||||
|
default: {
|
||||||
|
shadowColor: 'rgba(0,0,0, .2)',
|
||||||
|
shadowOffset: { height: 0, width: 0 },
|
||||||
|
shadowOpacity: 1,
|
||||||
|
shadowRadius: 1,
|
||||||
|
},
|
||||||
|
})),
|
||||||
|
containerStyle && containerStyle,
|
||||||
|
]) }),
|
||||||
|
React.createElement(View, { style: StyleSheet.flatten([
|
||||||
|
styles.wrapper,
|
||||||
|
wrapperStyle && wrapperStyle,
|
||||||
|
]) }, children)));
|
||||||
|
};
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
wrapper: {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
CardBase.displayName = 'Card';
|
@ -0,0 +1,14 @@
|
|||||||
|
import { CardProps } from './Card';
|
||||||
|
import { CardDividerProps } from './Card.Divider';
|
||||||
|
import { CardFeaturedSubtitleProps } from './Card.FeaturedSubtitle';
|
||||||
|
import { CardFeaturedTitleProps } from './Card.FeaturedTitle';
|
||||||
|
import { CardImageProps } from './Card.Image';
|
||||||
|
declare const Card: import("..").RneFunctionComponent<CardProps> & {
|
||||||
|
Divider: import("..").RneFunctionComponent<CardDividerProps>;
|
||||||
|
Image: import("..").RneFunctionComponent<CardImageProps>;
|
||||||
|
Title: import("..").RneFunctionComponent<import("./Card.Title").CardTitleProps>;
|
||||||
|
FeaturedTitle: import("..").RneFunctionComponent<CardFeaturedTitleProps>;
|
||||||
|
FeaturedSubtitle: import("..").RneFunctionComponent<CardFeaturedSubtitleProps>;
|
||||||
|
};
|
||||||
|
export { Card };
|
||||||
|
export type { CardProps, CardDividerProps, CardFeaturedSubtitleProps, CardFeaturedTitleProps, CardImageProps, };
|
@ -0,0 +1,14 @@
|
|||||||
|
import { CardBase } from './Card';
|
||||||
|
import { CardDivider } from './Card.Divider';
|
||||||
|
import { CardFeaturedSubtitle, } from './Card.FeaturedSubtitle';
|
||||||
|
import { CardFeaturedTitle, } from './Card.FeaturedTitle';
|
||||||
|
import { CardImage } from './Card.Image';
|
||||||
|
import { CardTitle } from './Card.Title';
|
||||||
|
const Card = Object.assign(CardBase, {
|
||||||
|
Divider: CardDivider,
|
||||||
|
Image: CardImage,
|
||||||
|
Title: CardTitle,
|
||||||
|
FeaturedTitle: CardFeaturedTitle,
|
||||||
|
FeaturedSubtitle: CardFeaturedSubtitle,
|
||||||
|
});
|
||||||
|
export { Card };
|
@ -0,0 +1,21 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { TextProps, TextStyle, ViewStyle, StyleProp, PressableProps } from 'react-native';
|
||||||
|
import { CheckBoxIconProps } from './components/CheckBoxIcon';
|
||||||
|
import { RneFunctionComponent } from '../helpers';
|
||||||
|
export interface CheckBoxProps extends PressableProps, CheckBoxIconProps {
|
||||||
|
Component?: typeof React.Component;
|
||||||
|
iconRight?: boolean;
|
||||||
|
title?: string | React.ReactElement<{}>;
|
||||||
|
titleProps?: TextProps;
|
||||||
|
center?: boolean;
|
||||||
|
right?: boolean;
|
||||||
|
containerStyle?: StyleProp<ViewStyle>;
|
||||||
|
wrapperStyle?: StyleProp<ViewStyle>;
|
||||||
|
textStyle?: StyleProp<TextStyle>;
|
||||||
|
disabled?: boolean;
|
||||||
|
disabledStyle?: StyleProp<ViewStyle>;
|
||||||
|
disabledTitleStyle?: StyleProp<TextStyle>;
|
||||||
|
checkedTitle?: string;
|
||||||
|
fontFamily?: string;
|
||||||
|
}
|
||||||
|
export declare const CheckBox: RneFunctionComponent<CheckBoxProps>;
|
@ -0,0 +1,82 @@
|
|||||||
|
var __rest = (this && this.__rest) || function (s, e) {
|
||||||
|
var t = {};
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||||
|
t[p] = s[p];
|
||||||
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||||
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||||
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||||
|
t[p[i]] = s[p[i]];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
import React from 'react';
|
||||||
|
import { StyleSheet, Pressable, View, Platform, } from 'react-native';
|
||||||
|
import { Text as TextElement } from '../Text';
|
||||||
|
import { CheckBoxIcon } from './components/CheckBoxIcon';
|
||||||
|
import { fonts } from '../helpers';
|
||||||
|
import { color, defaultTheme } from '../helpers';
|
||||||
|
export const CheckBox = (_a) => {
|
||||||
|
var _b, _c, _d;
|
||||||
|
var { checked = false, Component = Pressable, iconRight = false, title, titleProps = {}, center = false, right = false, containerStyle, wrapperStyle, textStyle, checkedTitle, fontFamily, theme = defaultTheme, onPress, onLongPress, disabled = false, disabledStyle, disabledTitleStyle, checkedColor = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary } = _a, rest = __rest(_a, ["checked", "Component", "iconRight", "title", "titleProps", "center", "right", "containerStyle", "wrapperStyle", "textStyle", "checkedTitle", "fontFamily", "theme", "onPress", "onLongPress", "disabled", "disabledStyle", "disabledTitleStyle", "checkedColor"]);
|
||||||
|
const accessibilityState = {
|
||||||
|
checked: !!checked,
|
||||||
|
};
|
||||||
|
const iconProps = Object.assign({ checked,
|
||||||
|
onLongPress,
|
||||||
|
checkedColor }, rest);
|
||||||
|
return (React.createElement(Component, Object.assign({ accessibilityRole: "checkbox", accessibilityState: accessibilityState, testID: "RNE__CheckBox__Wrapper" }, rest, { disabled: disabled, onLongPress: onLongPress, onPress: onPress, style: StyleSheet.flatten([
|
||||||
|
{
|
||||||
|
backgroundColor: theme.colors.background,
|
||||||
|
borderColor: theme.colors.white,
|
||||||
|
},
|
||||||
|
styles.container,
|
||||||
|
containerStyle && containerStyle,
|
||||||
|
disabled && disabledStyle,
|
||||||
|
]) }),
|
||||||
|
React.createElement(View, { style: StyleSheet.flatten([
|
||||||
|
styles.wrapper,
|
||||||
|
right && { justifyContent: 'flex-end' },
|
||||||
|
center && { justifyContent: 'center' },
|
||||||
|
wrapperStyle && wrapperStyle,
|
||||||
|
]) },
|
||||||
|
!iconRight && (React.createElement(CheckBoxIcon, Object.assign({}, iconProps, { checkedColor: checkedColor }))),
|
||||||
|
React.isValidElement(title)
|
||||||
|
? title
|
||||||
|
: title !== '' &&
|
||||||
|
title && (React.createElement(TextElement, Object.assign({ testID: "RNE__CheckBox__Title", style: StyleSheet.flatten([
|
||||||
|
Object.assign({ marginLeft: 10, marginRight: 10, color: (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.grey1 }, Platform.select({
|
||||||
|
android: Object.assign({}, fonts.android.bold),
|
||||||
|
default: {
|
||||||
|
fontWeight: 'bold',
|
||||||
|
},
|
||||||
|
})),
|
||||||
|
textStyle && textStyle,
|
||||||
|
fontFamily && { fontFamily },
|
||||||
|
disabled && {
|
||||||
|
color: color((_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.disabled)
|
||||||
|
.darken(0.3)
|
||||||
|
.string(),
|
||||||
|
},
|
||||||
|
disabled && disabledTitleStyle,
|
||||||
|
]) }, titleProps), checked ? checkedTitle || title : title)),
|
||||||
|
iconRight && (React.createElement(CheckBoxIcon, Object.assign({}, iconProps, { checkedColor: checkedColor }))))));
|
||||||
|
};
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
wrapper: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
container: {
|
||||||
|
margin: 5,
|
||||||
|
marginLeft: 10,
|
||||||
|
marginRight: 10,
|
||||||
|
padding: 10,
|
||||||
|
},
|
||||||
|
containerHasTitle: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderRadius: 3,
|
||||||
|
backgroundColor: '#fafafa',
|
||||||
|
borderColor: '#ededed',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
CheckBox.displayName = 'CheckBox';
|
15
iut-expo-starter/node_modules/@rneui/base/dist/CheckBox/components/CheckBoxIcon.d.ts
generated
vendored
15
iut-expo-starter/node_modules/@rneui/base/dist/CheckBox/components/CheckBoxIcon.d.ts
generated
vendored
@ -0,0 +1,15 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { RneFunctionComponent } from '../../helpers';
|
||||||
|
import { IconType } from '../../Icon';
|
||||||
|
export interface CheckBoxIconProps {
|
||||||
|
checked: boolean;
|
||||||
|
onIconPress?(): void;
|
||||||
|
onLongIconPress?(): void;
|
||||||
|
size?: number;
|
||||||
|
checkedIcon?: string | React.ReactElement<{}>;
|
||||||
|
uncheckedIcon?: string | React.ReactElement<{}>;
|
||||||
|
iconType?: IconType;
|
||||||
|
checkedColor?: string;
|
||||||
|
uncheckedColor?: string;
|
||||||
|
}
|
||||||
|
export declare const CheckBoxIcon: RneFunctionComponent<CheckBoxIconProps>;
|
14
iut-expo-starter/node_modules/@rneui/base/dist/CheckBox/components/CheckBoxIcon.js
generated
vendored
14
iut-expo-starter/node_modules/@rneui/base/dist/CheckBox/components/CheckBoxIcon.js
generated
vendored
@ -0,0 +1,14 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import getIconType from '../../helpers/getIconType';
|
||||||
|
export const CheckBoxIcon = ({ checked, onIconPress, onLongIconPress, size = 24, checkedIcon = 'check-square-o', uncheckedIcon = 'square-o', iconType, checkedColor, uncheckedColor = '#bfbfbf', }) => {
|
||||||
|
if (checked && React.isValidElement(checkedIcon)) {
|
||||||
|
return checkedIcon;
|
||||||
|
}
|
||||||
|
if (!checked && React.isValidElement(uncheckedIcon)) {
|
||||||
|
return uncheckedIcon;
|
||||||
|
}
|
||||||
|
const VectorIcon = iconType
|
||||||
|
? getIconType(iconType)
|
||||||
|
: getIconType('font-awesome');
|
||||||
|
return (React.createElement(VectorIcon, { testID: "RNE__Checkbox__Icon", color: checked ? checkedColor : uncheckedColor, name: checked ? checkedIcon : uncheckedIcon, size: size || 24, style: { minWidth: size || 24 }, onLongPress: onLongIconPress, onPress: onIconPress }));
|
||||||
|
};
|
@ -0,0 +1,3 @@
|
|||||||
|
import { CheckBox, CheckBoxProps } from './CheckBox';
|
||||||
|
export { CheckBox };
|
||||||
|
export type { CheckBoxProps };
|
@ -0,0 +1,2 @@
|
|||||||
|
import { CheckBox } from './CheckBox';
|
||||||
|
export { CheckBox };
|
@ -0,0 +1,6 @@
|
|||||||
|
import { RneFunctionComponent } from '../helpers';
|
||||||
|
import { ButtonProps } from '../Button';
|
||||||
|
export interface ChipProps extends Omit<ButtonProps, 'loading' | 'loadingStyle' | 'loadingProps'> {
|
||||||
|
type?: 'solid' | 'outline';
|
||||||
|
}
|
||||||
|
export declare const Chip: RneFunctionComponent<ChipProps>;
|
@ -0,0 +1,26 @@
|
|||||||
|
var __rest = (this && this.__rest) || function (s, e) {
|
||||||
|
var t = {};
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||||
|
t[p] = s[p];
|
||||||
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||||
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||||
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||||
|
t[p[i]] = s[p[i]];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
import React from 'react';
|
||||||
|
import { StyleSheet, TouchableWithoutFeedback } from 'react-native';
|
||||||
|
import { Button } from '../Button';
|
||||||
|
export const Chip = (_a) => {
|
||||||
|
var { titleStyle, buttonStyle, onPress } = _a, rest = __rest(_a, ["titleStyle", "buttonStyle", "onPress"]);
|
||||||
|
return (React.createElement(Button, Object.assign({ titleStyle: StyleSheet.flatten([
|
||||||
|
{ fontSize: 14, paddingHorizontal: 2 },
|
||||||
|
titleStyle,
|
||||||
|
]), radius: 30, buttonStyle: buttonStyle }, (onPress === undefined
|
||||||
|
? {
|
||||||
|
TouchableComponent: TouchableWithoutFeedback,
|
||||||
|
}
|
||||||
|
: { onPress }), rest)));
|
||||||
|
};
|
||||||
|
Chip.displayName = 'Chip';
|
@ -0,0 +1,3 @@
|
|||||||
|
import { Chip, ChipProps } from './Chip';
|
||||||
|
export { Chip };
|
||||||
|
export type { ChipProps };
|
@ -0,0 +1,2 @@
|
|||||||
|
import { Chip } from './Chip';
|
||||||
|
export { Chip };
|
@ -0,0 +1,6 @@
|
|||||||
|
import { ReactNode } from 'react';
|
||||||
|
import { RneFunctionComponent } from '../helpers';
|
||||||
|
export interface DialogActionsProps {
|
||||||
|
children?: ReactNode;
|
||||||
|
}
|
||||||
|
export declare const DialogActions: RneFunctionComponent<DialogActionsProps>;
|
@ -0,0 +1,14 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, StyleSheet } from 'react-native';
|
||||||
|
export const DialogActions = ({ children, }) => {
|
||||||
|
return (React.createElement(View, { style: styles.actionsView, testID: "Button__View" }, children));
|
||||||
|
};
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
actionsView: {
|
||||||
|
marginTop: 10,
|
||||||
|
flexDirection: 'row-reverse',
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
DialogActions.displayName = 'Dialog.Actions';
|
@ -0,0 +1,5 @@
|
|||||||
|
import { ButtonProps } from '../Button';
|
||||||
|
import { RneFunctionComponent } from '../helpers';
|
||||||
|
export interface DialogButtonProps extends ButtonProps {
|
||||||
|
}
|
||||||
|
export declare const DialogButton: RneFunctionComponent<DialogButtonProps>;
|
@ -0,0 +1,31 @@
|
|||||||
|
var __rest = (this && this.__rest) || function (s, e) {
|
||||||
|
var t = {};
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||||
|
t[p] = s[p];
|
||||||
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||||
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||||
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||||
|
t[p[i]] = s[p[i]];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
import React from 'react';
|
||||||
|
import { StyleSheet } from 'react-native';
|
||||||
|
import { Button } from '../Button';
|
||||||
|
export const DialogButton = (_a) => {
|
||||||
|
var { titleStyle } = _a, rest = __rest(_a, ["titleStyle"]);
|
||||||
|
return (React.createElement(Button, Object.assign({ style: { marginLeft: 5 }, titleStyle: StyleSheet.flatten([styles.buttonTitle, titleStyle]), containerStyle: {
|
||||||
|
width: 'auto',
|
||||||
|
}, testID: "Dialog__Button" }, rest)));
|
||||||
|
};
|
||||||
|
DialogButton.defaultProps = {
|
||||||
|
title: 'ACTION',
|
||||||
|
type: 'clear',
|
||||||
|
};
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
buttonTitle: {
|
||||||
|
fontSize: 15,
|
||||||
|
fontWeight: '500',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
DialogButton.displayName = 'Dialog.Button';
|
@ -0,0 +1,7 @@
|
|||||||
|
import { ViewStyle, ActivityIndicatorProps, StyleProp } from 'react-native';
|
||||||
|
import { RneFunctionComponent } from '../helpers';
|
||||||
|
export interface DialogLoadingProps {
|
||||||
|
loadingStyle?: StyleProp<ViewStyle>;
|
||||||
|
loadingProps?: ActivityIndicatorProps;
|
||||||
|
}
|
||||||
|
export declare const DialogLoading: RneFunctionComponent<DialogLoadingProps>;
|
@ -0,0 +1,22 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { StyleSheet, ActivityIndicator, View, } from 'react-native';
|
||||||
|
import { defaultTheme } from '../helpers';
|
||||||
|
export const DialogLoading = ({ loadingStyle, loadingProps, theme = defaultTheme, }) => {
|
||||||
|
var _a, _b, _c;
|
||||||
|
return (React.createElement(View, { style: styles.loadingView },
|
||||||
|
React.createElement(ActivityIndicator, Object.assign({ style: StyleSheet.flatten([styles.loading, loadingStyle]), color: (_a = loadingProps === null || loadingProps === void 0 ? void 0 : loadingProps.color) !== null && _a !== void 0 ? _a : (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary, size: (_c = loadingProps === null || loadingProps === void 0 ? void 0 : loadingProps.size) !== null && _c !== void 0 ? _c : 'large', testID: "Dialog__Loading" }, loadingProps))));
|
||||||
|
};
|
||||||
|
DialogLoading.defaultProps = {
|
||||||
|
loadingProps: { size: 'large' },
|
||||||
|
};
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
loading: {
|
||||||
|
marginVertical: 20,
|
||||||
|
},
|
||||||
|
loadingView: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
DialogLoading.displayName = 'Dialog.Loading';
|
@ -0,0 +1,9 @@
|
|||||||
|
import { TextStyle, StyleProp } from 'react-native';
|
||||||
|
import { RneFunctionComponent } from '../helpers';
|
||||||
|
import { TextProps } from '../Text';
|
||||||
|
export interface DialogTitleProps {
|
||||||
|
title?: string;
|
||||||
|
titleStyle?: StyleProp<TextStyle>;
|
||||||
|
titleProps?: TextProps;
|
||||||
|
}
|
||||||
|
export declare const DialogTitle: RneFunctionComponent<DialogTitleProps>;
|
@ -0,0 +1,13 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Text, StyleSheet, Platform } from 'react-native';
|
||||||
|
export const DialogTitle = ({ title, titleStyle, titleProps, }) => {
|
||||||
|
return (React.createElement(Text, Object.assign({ style: StyleSheet.flatten([styles.title, titleStyle]), testID: "Dialog__Title" }, titleProps), title));
|
||||||
|
};
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
title: {
|
||||||
|
fontSize: 18,
|
||||||
|
fontWeight: Platform.OS === 'ios' ? '600' : '700',
|
||||||
|
marginBottom: 10,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
DialogTitle.displayName = 'Dialog.Title';
|
@ -0,0 +1,9 @@
|
|||||||
|
import { ReactNode } from 'react';
|
||||||
|
import { StyleProp, ViewStyle } from 'react-native';
|
||||||
|
import { OverlayProps } from '../Overlay';
|
||||||
|
import { RneFunctionComponent } from '../helpers';
|
||||||
|
export interface DialogProps extends Partial<Omit<OverlayProps, 'fullScreen'>> {
|
||||||
|
children?: ReactNode;
|
||||||
|
overlayStyle?: StyleProp<ViewStyle>;
|
||||||
|
}
|
||||||
|
export declare const DialogBase: RneFunctionComponent<DialogProps>;
|
@ -0,0 +1,31 @@
|
|||||||
|
var __rest = (this && this.__rest) || function (s, e) {
|
||||||
|
var t = {};
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||||
|
t[p] = s[p];
|
||||||
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||||
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||||
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||||
|
t[p[i]] = s[p[i]];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
import React from 'react';
|
||||||
|
import { StyleSheet } from 'react-native';
|
||||||
|
import { Overlay } from '../Overlay';
|
||||||
|
export const DialogBase = (_a) => {
|
||||||
|
var { children, overlayStyle, onBackdropPress, isVisible } = _a, rest = __rest(_a, ["children", "overlayStyle", "onBackdropPress", "isVisible"]);
|
||||||
|
return (React.createElement(Overlay, Object.assign({ isVisible: isVisible, onBackdropPress: onBackdropPress, overlayStyle: StyleSheet.flatten([styles.dialog, overlayStyle]), testID: "Internal__Overlay" }, rest), children));
|
||||||
|
};
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
dialog: {
|
||||||
|
width: '75%',
|
||||||
|
padding: 20,
|
||||||
|
},
|
||||||
|
buttonView: {
|
||||||
|
marginTop: 10,
|
||||||
|
marginRight: -35,
|
||||||
|
flexDirection: 'row-reverse',
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
DialogBase.displayName = 'Dialog';
|
@ -0,0 +1,12 @@
|
|||||||
|
import { DialogLoadingProps } from './Dialog.Loading';
|
||||||
|
import { DialogTitleProps } from './Dialog.Title';
|
||||||
|
import { DialogButtonProps } from './Dialog.Button';
|
||||||
|
import { DialogActionsProps } from './Dialog.Actions';
|
||||||
|
import { DialogProps } from './Dialog';
|
||||||
|
export declare const Dialog: import("..").RneFunctionComponent<DialogProps> & {
|
||||||
|
Loading: import("..").RneFunctionComponent<DialogLoadingProps>;
|
||||||
|
Title: import("..").RneFunctionComponent<DialogTitleProps>;
|
||||||
|
Actions: import("..").RneFunctionComponent<DialogActionsProps>;
|
||||||
|
Button: import("..").RneFunctionComponent<DialogButtonProps>;
|
||||||
|
};
|
||||||
|
export type { DialogProps, DialogLoadingProps, DialogButtonProps, DialogTitleProps, DialogActionsProps, };
|
@ -0,0 +1,11 @@
|
|||||||
|
import { DialogLoading } from './Dialog.Loading';
|
||||||
|
import { DialogTitle } from './Dialog.Title';
|
||||||
|
import { DialogButton } from './Dialog.Button';
|
||||||
|
import { DialogActions } from './Dialog.Actions';
|
||||||
|
import { DialogBase } from './Dialog';
|
||||||
|
export const Dialog = Object.assign(DialogBase, {
|
||||||
|
Loading: DialogLoading,
|
||||||
|
Title: DialogTitle,
|
||||||
|
Actions: DialogActions,
|
||||||
|
Button: DialogButton,
|
||||||
|
});
|
@ -0,0 +1,13 @@
|
|||||||
|
import { ViewProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
|
||||||
|
import { RneFunctionComponent } from '../helpers';
|
||||||
|
export interface DividerProps extends ViewProps {
|
||||||
|
color?: string;
|
||||||
|
inset?: boolean;
|
||||||
|
insetType?: 'left' | 'right' | 'middle';
|
||||||
|
style?: StyleProp<ViewStyle>;
|
||||||
|
subHeader?: string;
|
||||||
|
subHeaderStyle?: StyleProp<TextStyle>;
|
||||||
|
orientation?: 'horizontal' | 'vertical';
|
||||||
|
width?: number;
|
||||||
|
}
|
||||||
|
export declare const Divider: RneFunctionComponent<DividerProps>;
|
@ -0,0 +1,65 @@
|
|||||||
|
var __rest = (this && this.__rest) || function (s, e) {
|
||||||
|
var t = {};
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||||
|
t[p] = s[p];
|
||||||
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||||
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||||
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||||
|
t[p[i]] = s[p[i]];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
var _a, _b;
|
||||||
|
import React from 'react';
|
||||||
|
import { View, StyleSheet, Text, } from 'react-native';
|
||||||
|
import { defaultTheme } from '../helpers';
|
||||||
|
export const Divider = (_a) => {
|
||||||
|
var { color, inset = false, insetType = 'left', orientation = 'horizontal', style, subHeader, subHeaderStyle, width } = _a, rest = __rest(_a, ["color", "inset", "insetType", "orientation", "style", "subHeader", "subHeaderStyle", "width"]);
|
||||||
|
return (React.createElement(React.Fragment, null,
|
||||||
|
React.createElement(View, Object.assign({ testID: "RNE__Divider", style: StyleSheet.flatten([
|
||||||
|
styles.divider,
|
||||||
|
style,
|
||||||
|
inset &&
|
||||||
|
(insetType === 'left'
|
||||||
|
? styles.leftInset
|
||||||
|
: insetType === 'right'
|
||||||
|
? styles.rightInset
|
||||||
|
: Object.assign(Object.assign({}, styles.leftInset), styles.rightInset)),
|
||||||
|
orientation === 'vertical' && styles.vertical,
|
||||||
|
width &&
|
||||||
|
(orientation === 'horizontal'
|
||||||
|
? { borderBottomWidth: width }
|
||||||
|
: { borderRightWidth: width }),
|
||||||
|
color &&
|
||||||
|
(orientation === 'horizontal'
|
||||||
|
? { borderBottomColor: color }
|
||||||
|
: { borderRightColor: color }),
|
||||||
|
]) }, rest)),
|
||||||
|
subHeader && orientation === 'horizontal' ? (React.createElement(Text, { style: StyleSheet.flatten([
|
||||||
|
styles.subHeader,
|
||||||
|
subHeaderStyle,
|
||||||
|
inset && styles.leftInset,
|
||||||
|
]) }, subHeader)) : null));
|
||||||
|
};
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
divider: {
|
||||||
|
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||||
|
borderBottomColor: (_a = defaultTheme === null || defaultTheme === void 0 ? void 0 : defaultTheme.colors) === null || _a === void 0 ? void 0 : _a.divider,
|
||||||
|
},
|
||||||
|
leftInset: {
|
||||||
|
marginLeft: 72,
|
||||||
|
},
|
||||||
|
rightInset: {
|
||||||
|
marginRight: 72,
|
||||||
|
},
|
||||||
|
vertical: {
|
||||||
|
borderRightWidth: StyleSheet.hairlineWidth,
|
||||||
|
borderRightColor: (_b = defaultTheme === null || defaultTheme === void 0 ? void 0 : defaultTheme.colors) === null || _b === void 0 ? void 0 : _b.divider,
|
||||||
|
height: 'auto',
|
||||||
|
alignSelf: 'stretch',
|
||||||
|
},
|
||||||
|
subHeader: {
|
||||||
|
includeFontPadding: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
Divider.displayName = 'Divider';
|
@ -0,0 +1,3 @@
|
|||||||
|
import { Divider, DividerProps } from './Divider';
|
||||||
|
export { Divider };
|
||||||
|
export type { DividerProps };
|
@ -0,0 +1,2 @@
|
|||||||
|
import { Divider } from './Divider';
|
||||||
|
export { Divider };
|
@ -0,0 +1,12 @@
|
|||||||
|
import { StyleProp, ViewStyle } from 'react-native';
|
||||||
|
import { ButtonProps } from '../Button';
|
||||||
|
import { RneFunctionComponent } from '../helpers';
|
||||||
|
export interface FABProps extends Omit<ButtonProps, 'size' | 'color'> {
|
||||||
|
color?: string;
|
||||||
|
size?: 'large' | 'small';
|
||||||
|
placement?: 'left' | 'right';
|
||||||
|
visible?: boolean;
|
||||||
|
upperCase?: boolean;
|
||||||
|
style?: StyleProp<ViewStyle>;
|
||||||
|
}
|
||||||
|
export declare const FAB: RneFunctionComponent<FABProps>;
|
@ -0,0 +1,110 @@
|
|||||||
|
var __rest = (this && this.__rest) || function (s, e) {
|
||||||
|
var t = {};
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||||
|
t[p] = s[p];
|
||||||
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||||
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||||
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||||
|
t[p[i]] = s[p[i]];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
import React from 'react';
|
||||||
|
import { StyleSheet, Animated } from 'react-native';
|
||||||
|
import { Button } from '../Button';
|
||||||
|
import { defaultTheme } from '../helpers';
|
||||||
|
export const FAB = (_a) => {
|
||||||
|
var _b, _c;
|
||||||
|
var { color, size = 'large', visible = true, disabled, upperCase, theme = defaultTheme, style, titleStyle, buttonStyle, containerStyle, iconContainerStyle, placement } = _a, rest = __rest(_a, ["color", "size", "visible", "disabled", "upperCase", "theme", "style", "titleStyle", "buttonStyle", "containerStyle", "iconContainerStyle", "placement"]);
|
||||||
|
const { current: animation } = React.useRef(new Animated.Value(Number(visible)));
|
||||||
|
React.useEffect(() => {
|
||||||
|
Animated.timing(animation, {
|
||||||
|
toValue: Number(visible),
|
||||||
|
duration: 200,
|
||||||
|
useNativeDriver: true,
|
||||||
|
}).start();
|
||||||
|
}, [animation, visible]);
|
||||||
|
return (React.createElement(Animated.View, { style: StyleSheet.flatten([
|
||||||
|
{
|
||||||
|
opacity: animation,
|
||||||
|
transform: [{ scale: animation }],
|
||||||
|
},
|
||||||
|
styles.content,
|
||||||
|
placement && {
|
||||||
|
[placement]: 0,
|
||||||
|
position: 'absolute',
|
||||||
|
margin: 16,
|
||||||
|
bottom: 0,
|
||||||
|
},
|
||||||
|
style,
|
||||||
|
]) },
|
||||||
|
React.createElement(Button, Object.assign({ buttonStyle: StyleSheet.flatten([
|
||||||
|
rest.title
|
||||||
|
? size === 'small'
|
||||||
|
? styles.smallExtendedLabel
|
||||||
|
: styles.extendedLabel
|
||||||
|
: size === 'small'
|
||||||
|
? styles.smallFAB
|
||||||
|
: styles.largeFAB,
|
||||||
|
{
|
||||||
|
backgroundColor: color || ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.secondary),
|
||||||
|
},
|
||||||
|
buttonStyle,
|
||||||
|
]), iconContainerStyle: [
|
||||||
|
rest.title
|
||||||
|
? {}
|
||||||
|
: size === 'small'
|
||||||
|
? styles.smallFAB
|
||||||
|
: styles.largeFAB,
|
||||||
|
iconContainerStyle,
|
||||||
|
], containerStyle: StyleSheet.flatten([
|
||||||
|
styles.container,
|
||||||
|
disabled && styles.disabled,
|
||||||
|
containerStyle,
|
||||||
|
]), titleStyle: [
|
||||||
|
styles.label,
|
||||||
|
{ color: (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.white },
|
||||||
|
upperCase && styles.upperCaseLabel,
|
||||||
|
titleStyle,
|
||||||
|
] }, rest, { disabled, theme }))));
|
||||||
|
};
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
elevation: 4,
|
||||||
|
borderRadius: 28,
|
||||||
|
},
|
||||||
|
largeFAB: {
|
||||||
|
height: 56,
|
||||||
|
width: 56,
|
||||||
|
padding: 16,
|
||||||
|
},
|
||||||
|
smallFAB: {
|
||||||
|
height: 40,
|
||||||
|
width: 40,
|
||||||
|
padding: 8,
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
borderRadius: 28,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
marginHorizontal: 8,
|
||||||
|
},
|
||||||
|
upperCaseLabel: {
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
},
|
||||||
|
extendedLabel: {
|
||||||
|
height: 48,
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
},
|
||||||
|
smallExtendedLabel: {
|
||||||
|
height: 40,
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
elevation: 0,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
FAB.displayName = 'FAB';
|
@ -0,0 +1,3 @@
|
|||||||
|
import { FAB, FABProps } from './FAB';
|
||||||
|
export { FAB };
|
||||||
|
export type { FABProps };
|
@ -0,0 +1,2 @@
|
|||||||
|
import { FAB } from './FAB';
|
||||||
|
export { FAB };
|
@ -0,0 +1,26 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { StyleProp, TextProps, ViewProps, StatusBarProps, StatusBarStyle, ImageSourcePropType, ImageStyle, ViewStyle } from 'react-native';
|
||||||
|
import { RneFunctionComponent } from '../helpers';
|
||||||
|
import { HeaderIcon } from './components/HeaderIcon';
|
||||||
|
declare type HeaderSubComponent = React.ReactElement<{}> | TextProps | HeaderIcon;
|
||||||
|
export interface HeaderProps extends ViewProps {
|
||||||
|
ViewComponent?: typeof React.Component;
|
||||||
|
linearGradientProps?: Object;
|
||||||
|
statusBarProps?: StatusBarProps;
|
||||||
|
barStyle?: StatusBarStyle;
|
||||||
|
leftComponent?: HeaderSubComponent;
|
||||||
|
centerComponent?: HeaderSubComponent;
|
||||||
|
rightComponent?: HeaderSubComponent;
|
||||||
|
backgroundColor?: string;
|
||||||
|
backgroundImage?: ImageSourcePropType;
|
||||||
|
backgroundImageStyle?: ImageStyle;
|
||||||
|
placement?: 'left' | 'center' | 'right';
|
||||||
|
containerStyle?: StyleProp<ViewStyle>;
|
||||||
|
centerContainerStyle?: StyleProp<ViewStyle>;
|
||||||
|
leftContainerStyle?: StyleProp<ViewStyle>;
|
||||||
|
rightContainerStyle?: StyleProp<ViewStyle>;
|
||||||
|
children?: JSX.Element | JSX.Element[];
|
||||||
|
elevated?: boolean;
|
||||||
|
}
|
||||||
|
export declare const Header: RneFunctionComponent<HeaderProps>;
|
||||||
|
export {};
|
@ -0,0 +1,88 @@
|
|||||||
|
var __rest = (this && this.__rest) || function (s, e) {
|
||||||
|
var t = {};
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||||
|
t[p] = s[p];
|
||||||
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||||
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||||
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||||
|
t[p[i]] = s[p[i]];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
import React from 'react';
|
||||||
|
import { Platform, StatusBar, StyleSheet, View, ImageBackground, } from 'react-native';
|
||||||
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||||
|
import { defaultTheme } from '../helpers';
|
||||||
|
import { Children } from './components/HeaderChildren';
|
||||||
|
export const Header = (_a) => {
|
||||||
|
var _b, _c;
|
||||||
|
var { statusBarProps, leftComponent, centerComponent, rightComponent, leftContainerStyle, centerContainerStyle, rightContainerStyle, backgroundColor, backgroundImage, backgroundImageStyle, containerStyle, placement = 'center', barStyle, children = [], linearGradientProps, ViewComponent = linearGradientProps || !backgroundImage
|
||||||
|
? View
|
||||||
|
: ImageBackground, theme = defaultTheme, elevated } = _a, rest = __rest(_a, ["statusBarProps", "leftComponent", "centerComponent", "rightComponent", "leftContainerStyle", "centerContainerStyle", "rightContainerStyle", "backgroundColor", "backgroundImage", "backgroundImageStyle", "containerStyle", "placement", "barStyle", "children", "linearGradientProps", "ViewComponent", "theme", "elevated"]);
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (linearGradientProps && !ViewComponent) {
|
||||||
|
console.warn("You need to pass a ViewComponent to use linearGradientProps !\nExample: ViewComponent={require('react-native-linear-gradient')}");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return (React.createElement(React.Fragment, null,
|
||||||
|
React.createElement(StatusBar, Object.assign({ barStyle: barStyle, translucent: true, backgroundColor: backgroundColor || ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) }, statusBarProps)),
|
||||||
|
React.createElement(ViewComponent, Object.assign({ testID: "headerContainer" }, rest, { style: StyleSheet.flatten([
|
||||||
|
{
|
||||||
|
borderBottomColor: '#f2f2f2',
|
||||||
|
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
paddingVertical: 10,
|
||||||
|
backgroundColor: (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.primary,
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
backgroundColor && { backgroundColor },
|
||||||
|
elevated && styles.elevatedHeader,
|
||||||
|
containerStyle,
|
||||||
|
]), source: backgroundImage, imageStyle: backgroundImageStyle }, linearGradientProps),
|
||||||
|
React.createElement(SafeAreaView, { edges: ['left', 'top', 'right'], style: styles.headerSafeView },
|
||||||
|
React.createElement(Children, { style: StyleSheet.flatten([
|
||||||
|
placement === 'center' && styles.rightLeftContainer,
|
||||||
|
leftContainerStyle,
|
||||||
|
]), placement: "left" }, (React.isValidElement(children) && children) ||
|
||||||
|
children[0] ||
|
||||||
|
leftComponent),
|
||||||
|
React.createElement(Children, { style: StyleSheet.flatten([
|
||||||
|
styles.centerContainer,
|
||||||
|
placement !== 'center' && {
|
||||||
|
paddingHorizontal: Platform.select({
|
||||||
|
android: 16,
|
||||||
|
default: 15,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
centerContainerStyle,
|
||||||
|
]), placement: placement }, children[1] || centerComponent),
|
||||||
|
React.createElement(Children, { style: StyleSheet.flatten([
|
||||||
|
placement === 'center' && styles.rightLeftContainer,
|
||||||
|
rightContainerStyle,
|
||||||
|
]), placement: "right" }, children[2] || rightComponent)))));
|
||||||
|
};
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
headerSafeView: {
|
||||||
|
width: '100%',
|
||||||
|
flexDirection: 'row',
|
||||||
|
},
|
||||||
|
centerContainer: {
|
||||||
|
flex: 3,
|
||||||
|
},
|
||||||
|
rightLeftContainer: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
elevatedHeader: {
|
||||||
|
shadowColor: '#000',
|
||||||
|
shadowOffset: {
|
||||||
|
width: 0,
|
||||||
|
height: 6,
|
||||||
|
},
|
||||||
|
shadowOpacity: 0.6,
|
||||||
|
shadowRadius: 8.0,
|
||||||
|
elevation: 24,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
Header.displayName = 'Header';
|
10
iut-expo-starter/node_modules/@rneui/base/dist/Header/components/HeaderChildren.d.ts
generated
vendored
10
iut-expo-starter/node_modules/@rneui/base/dist/Header/components/HeaderChildren.d.ts
generated
vendored
@ -0,0 +1,10 @@
|
|||||||
|
/// <reference types="react" />
|
||||||
|
import { StyleProp, ViewStyle } from 'react-native';
|
||||||
|
declare type Placement = 'left' | 'center' | 'right';
|
||||||
|
export interface HeaderChildrenProps {
|
||||||
|
placement: Placement;
|
||||||
|
style: StyleProp<ViewStyle>;
|
||||||
|
children: any;
|
||||||
|
}
|
||||||
|
export declare const Children: ({ style, placement, children, }: HeaderChildrenProps) => JSX.Element;
|
||||||
|
export {};
|
19
iut-expo-starter/node_modules/@rneui/base/dist/Header/components/HeaderChildren.js
generated
vendored
19
iut-expo-starter/node_modules/@rneui/base/dist/Header/components/HeaderChildren.js
generated
vendored
@ -0,0 +1,19 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { View, StyleSheet, Text, } from 'react-native';
|
||||||
|
import { renderNode } from '../../helpers';
|
||||||
|
import { Icon } from '../../Icon';
|
||||||
|
const ALIGN_STYLE = {
|
||||||
|
left: 'flex-start',
|
||||||
|
right: 'flex-end',
|
||||||
|
center: 'center',
|
||||||
|
};
|
||||||
|
export const Children = ({ style, placement, children, }) => (React.createElement(View, { style: StyleSheet.flatten([{ alignItems: ALIGN_STYLE[placement] }, style]) }, children == null || children === false
|
||||||
|
? null
|
||||||
|
: children.text
|
||||||
|
? renderNode(Text, children.text, Object.assign({ numberOfLines: 1 }, children))
|
||||||
|
: children.icon
|
||||||
|
? renderNode(Icon, Object.assign(Object.assign({}, children), { name: children.icon, containerStyle: StyleSheet.flatten([
|
||||||
|
{ alignItems: ALIGN_STYLE[placement] },
|
||||||
|
children.containerStyle,
|
||||||
|
]) }))
|
||||||
|
: renderNode(Text, children)));
|
8
iut-expo-starter/node_modules/@rneui/base/dist/Header/components/HeaderIcon.d.ts
generated
vendored
8
iut-expo-starter/node_modules/@rneui/base/dist/Header/components/HeaderIcon.d.ts
generated
vendored
@ -0,0 +1,8 @@
|
|||||||
|
import { IconObject } from '../../Icon';
|
||||||
|
import { StyleProp, TextStyle } from 'react-native';
|
||||||
|
export interface HeaderIcon extends IconObject {
|
||||||
|
icon?: string;
|
||||||
|
text?: string;
|
||||||
|
color?: string;
|
||||||
|
style?: StyleProp<TextStyle>;
|
||||||
|
}
|
@ -0,0 +1 @@
|
|||||||
|
export {};
|
@ -0,0 +1,3 @@
|
|||||||
|
import { Header, HeaderProps } from './Header';
|
||||||
|
export { Header };
|
||||||
|
export type { HeaderProps };
|
@ -0,0 +1,2 @@
|
|||||||
|
import { Header } from './Header';
|
||||||
|
export { Header };
|
@ -0,0 +1,27 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { ViewStyle, StyleProp, TextStyle } from 'react-native';
|
||||||
|
import { IconButtonProps, IconProps as VectorIconProps } from 'react-native-vector-icons/Icon';
|
||||||
|
import { InlinePressableProps, RneFunctionComponent } from '../helpers';
|
||||||
|
export declare type IconType = 'material' | 'material-community' | 'simple-line-icon' | 'zocial' | 'font-awesome' | 'octicon' | 'ionicon' | 'foundation' | 'evilicon' | 'entypo' | 'antdesign' | 'font-awesome-5' | string;
|
||||||
|
export interface IconObject {
|
||||||
|
name?: string;
|
||||||
|
color?: string;
|
||||||
|
size?: number;
|
||||||
|
type?: IconType;
|
||||||
|
iconStyle?: StyleProp<TextStyle>;
|
||||||
|
}
|
||||||
|
export declare type IconNode = boolean | React.ReactElement<{}> | Partial<IconProps>;
|
||||||
|
export interface IconProps extends InlinePressableProps, IconButtonProps {
|
||||||
|
type?: IconType;
|
||||||
|
Component?: typeof React.Component;
|
||||||
|
reverse?: boolean;
|
||||||
|
raised?: boolean;
|
||||||
|
containerStyle?: StyleProp<ViewStyle>;
|
||||||
|
iconProps?: VectorIconProps;
|
||||||
|
reverseColor?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
disabledStyle?: StyleProp<ViewStyle>;
|
||||||
|
solid?: boolean;
|
||||||
|
brand?: boolean;
|
||||||
|
}
|
||||||
|
export declare const Icon: RneFunctionComponent<IconProps>;
|
@ -0,0 +1,96 @@
|
|||||||
|
var __rest = (this && this.__rest) || function (s, e) {
|
||||||
|
var t = {};
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||||
|
t[p] = s[p];
|
||||||
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||||
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||||
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||||
|
t[p[i]] = s[p[i]];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
import React from 'react';
|
||||||
|
import { Platform, View, StyleSheet, Pressable, } from 'react-native';
|
||||||
|
import Color from 'color';
|
||||||
|
import getIconType from '../helpers/getIconType';
|
||||||
|
import getIconStyle from '../helpers/getIconStyle';
|
||||||
|
import { androidRipple, defaultTheme, } from '../helpers';
|
||||||
|
export const Icon = (_a) => {
|
||||||
|
var _b, _c, _d;
|
||||||
|
var { type = 'material', name, size = 24, color: colorProp, iconStyle, iconProps, underlayColor = 'transparent', reverse = false, raised = false, containerStyle, reverseColor: reverseColorProp, disabled = false, disabledStyle, onPress, onLongPress, onPressIn, onPressOut, Component = onPress || onLongPress || onPressIn || onPressOut
|
||||||
|
? Pressable
|
||||||
|
: View, solid = false, brand = false, theme = defaultTheme, pressableProps } = _a, rest = __rest(_a, ["type", "name", "size", "color", "iconStyle", "iconProps", "underlayColor", "reverse", "raised", "containerStyle", "reverseColor", "disabled", "disabledStyle", "onPress", "onLongPress", "onPressIn", "onPressOut", "Component", "solid", "brand", "theme", "pressableProps"]);
|
||||||
|
const color = colorProp || ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.black);
|
||||||
|
const reverseColor = reverseColorProp || ((_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.white);
|
||||||
|
const IconComponent = getIconType(type);
|
||||||
|
const iconSpecificStyle = getIconStyle(type, { solid, brand });
|
||||||
|
const getBackgroundColor = React.useMemo(() => {
|
||||||
|
var _a;
|
||||||
|
if (reverse) {
|
||||||
|
return color;
|
||||||
|
}
|
||||||
|
return raised ? (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.white : 'transparent';
|
||||||
|
}, [color, raised, reverse, (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.white]);
|
||||||
|
const buttonStyles = React.useMemo(() => ({
|
||||||
|
borderRadius: size + 4,
|
||||||
|
height: size * 2 + 4,
|
||||||
|
width: size * 2 + 4,
|
||||||
|
}), [size]);
|
||||||
|
return (React.createElement(View, { style: StyleSheet.flatten([
|
||||||
|
!raised && styles.container,
|
||||||
|
(reverse || raised) && styles.button,
|
||||||
|
(reverse || raised) && buttonStyles,
|
||||||
|
raised && styles.raised,
|
||||||
|
iconStyle && iconStyle.borderRadius
|
||||||
|
? {
|
||||||
|
borderRadius: iconStyle.borderRadius,
|
||||||
|
}
|
||||||
|
: {},
|
||||||
|
containerStyle && containerStyle,
|
||||||
|
]), testID: "RNE__ICON__CONTAINER" },
|
||||||
|
React.createElement(Component, Object.assign({ testID: "RNE__ICON__CONTAINER_ACTION" }, Object.assign(Object.assign({ android_ripple: androidRipple(Color(reverse ? color : underlayColor)
|
||||||
|
.alpha(0.3)
|
||||||
|
.rgb()
|
||||||
|
.string()), onPress,
|
||||||
|
onLongPress,
|
||||||
|
onPressIn,
|
||||||
|
onPressOut,
|
||||||
|
disabled, accessibilityRole: 'button' }, pressableProps), rest)),
|
||||||
|
React.createElement(View, { style: StyleSheet.flatten([
|
||||||
|
(reverse || raised) && buttonStyles,
|
||||||
|
{
|
||||||
|
backgroundColor: getBackgroundColor,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
disabled && styles.disabled,
|
||||||
|
disabled && disabledStyle,
|
||||||
|
]), testID: "RNE__ICON" },
|
||||||
|
React.createElement(IconComponent, Object.assign({ testID: "RNE__ICON__Component", style: StyleSheet.flatten([
|
||||||
|
{ backgroundColor: 'transparent' },
|
||||||
|
iconStyle && iconStyle,
|
||||||
|
]), size: size, name: name, color: reverse ? reverseColor : color }, iconSpecificStyle, iconProps))))));
|
||||||
|
};
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
overflow: 'hidden',
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
margin: 7,
|
||||||
|
},
|
||||||
|
raised: Object.assign({}, Platform.select({
|
||||||
|
android: {
|
||||||
|
elevation: 2,
|
||||||
|
},
|
||||||
|
default: {
|
||||||
|
shadowColor: 'rgba(0,0,0, .4)',
|
||||||
|
shadowOffset: { height: 1, width: 1 },
|
||||||
|
shadowOpacity: 1,
|
||||||
|
shadowRadius: 1,
|
||||||
|
},
|
||||||
|
})),
|
||||||
|
disabled: {
|
||||||
|
backgroundColor: '#D1D5D8',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
Icon.displayName = 'Icon';
|
@ -0,0 +1,3 @@
|
|||||||
|
import { Icon, IconProps, IconNode, IconObject, IconType } from './Icon';
|
||||||
|
export { Icon };
|
||||||
|
export type { IconProps, IconNode, IconObject, IconType };
|
@ -0,0 +1,2 @@
|
|||||||
|
import { Icon } from './Icon';
|
||||||
|
export { Icon };
|
@ -0,0 +1,14 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { ImageProps as RNImageProps, StyleProp, ViewStyle } from 'react-native';
|
||||||
|
import { InlinePressableProps, RneFunctionComponent } from '../helpers';
|
||||||
|
export interface ImageProps extends RNImageProps, InlinePressableProps {
|
||||||
|
Component?: typeof React.Component;
|
||||||
|
ImageComponent?: typeof React.Component;
|
||||||
|
PlaceholderContent?: React.ReactElement;
|
||||||
|
containerStyle?: StyleProp<ViewStyle>;
|
||||||
|
childrenContainerStyle?: StyleProp<ViewStyle>;
|
||||||
|
placeholderStyle?: StyleProp<ViewStyle>;
|
||||||
|
transition?: boolean;
|
||||||
|
transitionDuration?: number;
|
||||||
|
}
|
||||||
|
export declare const Image: RneFunctionComponent<ImageProps>;
|
@ -0,0 +1,62 @@
|
|||||||
|
var __rest = (this && this.__rest) || function (s, e) {
|
||||||
|
var t = {};
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||||
|
t[p] = s[p];
|
||||||
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||||
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||||
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||||
|
t[p[i]] = s[p[i]];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
import React, { useCallback } from 'react';
|
||||||
|
import { Animated, Image as ImageNative, StyleSheet, View, Pressable, Text, } from 'react-native';
|
||||||
|
export const Image = (_a) => {
|
||||||
|
var { onPress, onLongPress, onPressIn, onPressOut, Component = onPress || onLongPress || onPressIn || onPressOut
|
||||||
|
? Pressable
|
||||||
|
: View, placeholderStyle, PlaceholderContent, containerStyle, childrenContainerStyle = null, style = {}, ImageComponent = ImageNative, onLoad, children, transition, transitionDuration = 360, pressableProps } = _a, props = __rest(_a, ["onPress", "onLongPress", "onPressIn", "onPressOut", "Component", "placeholderStyle", "PlaceholderContent", "containerStyle", "childrenContainerStyle", "style", "ImageComponent", "onLoad", "children", "transition", "transitionDuration", "pressableProps"]);
|
||||||
|
const placeholderOpacity = React.useRef(new Animated.Value(1));
|
||||||
|
const onLoadHandler = useCallback((event) => {
|
||||||
|
if (transition) {
|
||||||
|
Animated.timing(placeholderOpacity.current, {
|
||||||
|
toValue: 0,
|
||||||
|
duration: transitionDuration,
|
||||||
|
useNativeDriver: true,
|
||||||
|
}).start();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
placeholderOpacity.current.setValue(0);
|
||||||
|
}
|
||||||
|
onLoad === null || onLoad === void 0 ? void 0 : onLoad(event);
|
||||||
|
}, [transition, transitionDuration, onLoad]);
|
||||||
|
const hasImage = Boolean(props.source);
|
||||||
|
return (React.createElement(Component, Object.assign({}, pressableProps, { onPress, onPressIn, onPressOut, onLongPress }, { accessibilityIgnoresInvertColors: true, style: StyleSheet.flatten([styles.container, containerStyle]) }),
|
||||||
|
React.createElement(ImageComponent, Object.assign({ testID: "RNE__Image" }, props, { transition, transitionDuration }, { onLoad: onLoadHandler, style: StyleSheet.flatten([StyleSheet.absoluteFill, style]) })),
|
||||||
|
React.createElement(Animated.View, { pointerEvents: hasImage ? 'none' : 'auto', accessibilityElementsHidden: hasImage, importantForAccessibility: hasImage ? 'no-hide-descendants' : 'yes', style: [
|
||||||
|
StyleSheet.absoluteFillObject,
|
||||||
|
{
|
||||||
|
opacity: hasImage ? placeholderOpacity.current : 1,
|
||||||
|
},
|
||||||
|
] },
|
||||||
|
React.createElement(View, { testID: "RNE__Image__placeholder", style: StyleSheet.flatten([
|
||||||
|
style,
|
||||||
|
styles.placeholder,
|
||||||
|
placeholderStyle,
|
||||||
|
]) }, React.isValidElement(PlaceholderContent)
|
||||||
|
? PlaceholderContent
|
||||||
|
: PlaceholderContent && (React.createElement(Text, { testID: "RNE__Image__Placeholder__Content" }, PlaceholderContent)))),
|
||||||
|
React.createElement(View, { testID: "RNE__Image__children__container", style: childrenContainerStyle !== null && childrenContainerStyle !== void 0 ? childrenContainerStyle : style }, children)));
|
||||||
|
};
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
position: 'relative',
|
||||||
|
overflow: 'hidden',
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
backgroundColor: '#bdbdbd',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
Image.displayName = 'Image';
|
@ -0,0 +1,12 @@
|
|||||||
|
import { Image as ImageNative } from 'react-native';
|
||||||
|
import { ImageProps } from './Image';
|
||||||
|
declare const Image: import("..").RneFunctionComponent<ImageProps> & {
|
||||||
|
getSize: typeof ImageNative.getSize;
|
||||||
|
getSizeWithHeaders: typeof ImageNative.getSizeWithHeaders;
|
||||||
|
prefetch: typeof ImageNative.prefetch;
|
||||||
|
abortPrefetch: typeof ImageNative.abortPrefetch;
|
||||||
|
queryCache: typeof ImageNative.queryCache;
|
||||||
|
resolveAssetSource: typeof ImageNative.resolveAssetSource;
|
||||||
|
};
|
||||||
|
export { Image };
|
||||||
|
export type { ImageProps };
|
@ -0,0 +1,11 @@
|
|||||||
|
import { Image as ImageNative } from 'react-native';
|
||||||
|
import { Image as RNEImage } from './Image';
|
||||||
|
const Image = Object.assign(RNEImage, {
|
||||||
|
getSize: ImageNative.getSize,
|
||||||
|
getSizeWithHeaders: ImageNative.getSizeWithHeaders,
|
||||||
|
prefetch: ImageNative.prefetch,
|
||||||
|
abortPrefetch: ImageNative.abortPrefetch,
|
||||||
|
queryCache: ImageNative.queryCache,
|
||||||
|
resolveAssetSource: ImageNative.resolveAssetSource,
|
||||||
|
});
|
||||||
|
export { Image };
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue