This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import PropTypes from "prop-types"; | |
import { StyleSheet, TouchableOpacity, Text } from "react-native"; | |
import { FontAwesome } from "@expo/vector-icons"; | |
const ICON_SQUARE_SIZE_PX = 100; | |
// returns configuration depending on notification type | |
const getConfigByType = type => { | |
switch (type) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import { NotificationBase } from "./NotificationBase"; | |
import PropTypes from "prop-types"; | |
export const SuccessNotification = props => ( | |
<NotificationBase | |
{...props} | |
colorPrimary="#dff0d8" | |
colorAccent="#3c763d" | |
iconName="check-circle" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// trying to push notification object directly to the array | |
store.notifications.push( | |
createSuccessNotification( | |
"Success", | |
"This message tells that everything goes fine." | |
) | |
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import { Routing } from "./src/Routing"; | |
import { configure } from "mobx"; | |
configure({ | |
// 'observed' means that the state needs to be changed through actions | |
// otherwise it throws an error | |
enforceActions: "observed" | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import PropTypes from "prop-types"; | |
import { StyleSheet, TouchableOpacity, Text, Animated } from "react-native"; | |
import { FontAwesome } from "@expo/vector-icons"; | |
const ICON_SQUARE_SIZE_PX = 100; | |
const ANIMATION_DURATION_MS = 150; | |
const NOTIFICATION_HEIGHT_PX = 120; | |
export const makeNotification = (iconName, colorPrimary, colorAccent) => { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import PropTypes from "prop-types"; | |
import { StyleSheet, TouchableOpacity, Text, Animated } from "react-native"; | |
import { FontAwesome } from "@expo/vector-icons"; | |
const ICON_SQUARE_SIZE_PX = 100; | |
const ANIMATION_DURATION_MS = 150; | |
const NOTIFICATION_HEIGHT_PX = 120; | |
export const makeNotification = (iconName, colorPrimary, colorAccent) => { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import PropTypes from "prop-types"; | |
import { View } from "react-native"; | |
import { observer } from "mobx-react"; | |
import { Notification } from "../Notification"; | |
import { NotificationsStore, withNotifications } from "../store"; | |
// 'observer' function turns component into reactive component | |
// component will be rerendered upon 'notifications' array change | |
const NotificationsInner = observer(props => { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { observable, action, computed } from "mobx"; | |
export class NotificationsStore { | |
constructor(notifications) { | |
this.notifications = [...notifications]; | |
} | |
// Observers will be notified and react to changes | |
// in properties which have @observable decorator. | |
@observable |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import PropTypes from "prop-types"; | |
import { View } from "react-native"; | |
import { Button, NotificationsStore, withNotifications } from "../../components"; | |
// description of buttons which add notifications | |
const controls = [{ | |
key: "create-success-notification-button", | |
iconName: "check", | |
colorPrimary: "#cbf0c4", |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { makeNotification } from "./makeNotification"; | |
export const InfoNotification = makeNotification( | |
"info-circle", | |
"#d9edf7", | |
"#31708f" | |
); |
NewerOlder