@tra-tech/react-native-kitra
Version:
UI kit for React Native
215 lines (214 loc) • 8.96 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.NotificationProvider = exports.NotificationContext = void 0;
var _expoLinearGradient = require("expo-linear-gradient");
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _Ionicons = _interopRequireDefault(require("../../components/Icons/Ionicons"));
var _useTheme = _interopRequireDefault(require("../hooks/useTheme"));
var _useTypography = _interopRequireDefault(require("../hooks/useTypography"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const messageTypes = {
SUCCESS: {
backgroundColor: '#09CE63',
icon: 'checkmark'
},
WARNING: {
backgroundColor: '#FFD234',
icon: 'alert'
},
ERROR: {
backgroundColor: '#FF3434',
icon: 'close'
},
INFO: {
backgroundColor: '#67A7C1',
icon: 'information'
}
};
const NotificationContext = /*#__PURE__*/_react.default.createContext({});
exports.NotificationContext = NotificationContext;
const NotificationProvider = _ref => {
let {
children,
limit = 3,
messageType = messageTypes,
linearMessageType,
containerStyle
} = _ref;
const [queue, setQueue] = (0, _react.useState)([{
type: '',
message: '',
header: ''
}]);
const {
theme,
colorScheme
} = (0, _useTheme.default)();
const {
typography
} = (0, _useTypography.default)();
const showNotification = item => {
pushQueue(item);
};
const pushQueue = item => {
setTimeout(() => {
setQueue(prev => {
limit <= prev.length ? popQueue(1) : popQueue();
if (prev.length > 0) popQueue();
return [{
...item,
keyID: Math.random()
}, ...prev];
});
}, 100);
};
const popQueue = function () {
let duration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 5000;
setTimeout(() => {
setQueue(prev => {
const newQueue = [...prev];
if (newQueue.length) {
newQueue.pop();
return newQueue;
}
return [...prev];
});
}, duration);
};
const contextValue = (0, _react.useMemo)(() => ({
showNotification
}), []);
function onPress(index) {
const queueTemp = [...queue];
queueTemp.splice(index, 1);
setQueue(queueTemp);
}
return (
/*#__PURE__*/
// @ts-ignore
_react.default.createElement(NotificationContext.Provider, {
value: contextValue
}, children, queue.map((item, index) => {
var _messageType$item$typ, _linearMessageType$it, _linearMessageType$it2, _linearMessageType$it3, _linearMessageType$it4, _linearMessageType$it5, _messageType$item$typ2;
return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
key: item.keyID || index,
entering: _reactNativeReanimated.LightSpeedInLeft,
exiting: _reactNativeReanimated.FadeOut,
layout: _reactNativeReanimated.Layout.springify(),
style: [styles.itemContainer, {
alignSelf: 'center',
top: 150
}, containerStyle, {
position: 'absolute',
backgroundColor: !linearMessageType ? (_messageType$item$typ = messageType[item === null || item === void 0 ? void 0 : item.type]) === null || _messageType$item$typ === void 0 ? void 0 : _messageType$item$typ.backgroundColor : 'transparent',
marginTop: 110 * (index - 1)
}]
}, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
style: {
flexDirection: 'row',
flex: 1
},
onPress: () => onPress(index)
}, linearMessageType && item.type && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_expoLinearGradient.LinearGradient, {
colors: ((_linearMessageType$it = linearMessageType(theme, colorScheme)[item === null || item === void 0 ? void 0 : item.type]) === null || _linearMessageType$it === void 0 ? void 0 : _linearMessageType$it.backgroundColor.color) || [],
locations: (_linearMessageType$it2 = linearMessageType(theme, colorScheme)[item === null || item === void 0 ? void 0 : item.type]) === null || _linearMessageType$it2 === void 0 ? void 0 : _linearMessageType$it2.backgroundColor.location,
start: {
x: 0.3,
y: 0.7
},
end: {
x: 1,
y: 0
},
style: [styles.linearConteiner]
}), /*#__PURE__*/_react.default.createElement(_expoLinearGradient.LinearGradient, {
colors: ((_linearMessageType$it3 = linearMessageType(theme, colorScheme)[item === null || item === void 0 ? void 0 : item.type]) === null || _linearMessageType$it3 === void 0 ? void 0 : _linearMessageType$it3.backgroundColor.bottomColor) || [],
locations: (_linearMessageType$it4 = linearMessageType(theme, colorScheme)[item === null || item === void 0 ? void 0 : item.type]) === null || _linearMessageType$it4 === void 0 ? void 0 : _linearMessageType$it4.backgroundColor.bottomLocation,
start: {
x: 0.3,
y: 0.7
},
end: {
x: 1,
y: 0
},
style: [styles.linearConteiner, {
height: 102,
zIndex: 10
}]
})), linearMessageType ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.iconContainer
}, (_linearMessageType$it5 = linearMessageType(theme, colorScheme)[item === null || item === void 0 ? void 0 : item.type]) === null || _linearMessageType$it5 === void 0 ? void 0 : _linearMessageType$it5.icon) : /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [styles.iconContainer, {
backgroundColor: theme === null || theme === void 0 ? void 0 : theme.white
}]
}, /*#__PURE__*/_react.default.createElement(_Ionicons.default, {
name: (_messageType$item$typ2 = messageType[item === null || item === void 0 ? void 0 : item.type]) === null || _messageType$item$typ2 === void 0 ? void 0 : _messageType$item$typ2.icon,
size: 15
})), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
flex: 1,
zIndex: 100
}
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
ellipsizeMode: "middle",
numberOfLines: 3,
style: [styles.headerText, {
color: theme.white
}]
}, (item === null || item === void 0 ? void 0 : item.header) || (item === null || item === void 0 ? void 0 : item.type)), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
ellipsizeMode: "middle",
numberOfLines: 3,
style: [styles.descText, {
color: theme.white
}]
}, item === null || item === void 0 ? void 0 : item.message))));
}))
);
};
exports.NotificationProvider = NotificationProvider;
const styles = _reactNative.StyleSheet.create({
itemContainer: {
alignItems: 'center',
width: '100%',
paddingHorizontal: 24,
zIndex: 100,
height: 100,
borderRadius: 10
},
linearConteiner: {
alignItems: 'center',
position: 'absolute',
width: '100%',
height: 100,
borderRadius: 10,
zIndex: 20
},
iconContainer: {
zIndex: 100,
marginTop: 21,
marginLeft: 18,
width: 28,
height: 28,
borderRadius: 100,
alignItems: 'center',
justifyContent: 'center'
},
headerText: {
fontWeight: '500',
marginTop: 17,
paddingHorizontal: 20
},
descText: {
fontWeight: '400',
marginTop: 6,
paddingHorizontal: 20
}
});
//# sourceMappingURL=notification.js.map