@shoutem/ui 7.1.0-beta.1 → 7.1.0-beta.3

package/components/HorizontalPager/HorizontalPager.js

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { InteractionManager, LayoutAnimation, ScrollView } from 'react-native';
+import { InteractionManager, LayoutAnimation, ScrollView, Platform } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
@@ -219,7 +219,14 @@ class HorizontalPager extends PureComponent {
       );
 
       return (
-        <View key={pageIndex} style={{ width: containerWidth }}>
+        <View
+          key={pageIndex}
+          style={{ 
+            width: containerWidth, 
+            ...(Platform.OS === 'web' && {
+              height: '100%',
+            })
+          }}>
           {pageContent}
         </View>
       );

package/components/TextInput.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-multi-comp */
 import React, { forwardRef, PureComponent } from 'react';
-import { TextInput as RNTextInput } from 'react-native';
+import { TextInput as RNTextInput, Platform } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import { TextInputPropTypes } from 'deprecated-react-native-prop-types';
 import PropTypes from 'prop-types';
@@ -60,14 +60,16 @@ class TextInput extends PureComponent {
       withoutBorder,
       wiggleAnimation,
       errorText,
+      height,
       ...otherStyle
     } = style;
 
+    const containerStyle = Platform.OS === "web" ? { height } : undefined;
     const hasBorder = (isFocused && highlightOnFocus) || !!errorMessage;
     const startErrorAnimation = animate && !!errorMessage;
 
     return (
-      <View>
+      <View style={containerStyle}>
         <Wiggle style={wiggleAnimation} startAnimation={startErrorAnimation}>
           <RNTextInput
             {...otherProps}
@@ -80,6 +82,7 @@ class TextInput extends PureComponent {
               ...(hasBorder ? withBorder : withoutBorder),
               ...(errorMessage ? errorBorderColor : {}),
               ...otherStyle,
+              height: 50,
             }}
             ref={forwardedRef}
           />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "7.1.0-beta.1",
+  "version": "7.1.0-beta.3",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",

package/web/style/Alert.scss

@@ -0,0 +1,65 @@
+.alert-container {
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+  font-size: 15px;
+}
+
+.alert-popup {
+  border-radius: 18px;
+  padding-bottom: 0px;
+  overflow: hidden;
+}
+
+.alert-title {
+  color: black;
+  font-size: 20px;
+  margin-top: 10px;
+  margin-bottom: -10px;
+}
+
+.alert-actions {
+  border-top: 1px solid;
+  margin: 20px 0px 0px 0px;
+}
+
+.alert-confirm {
+  color: cornflowerblue;
+  background-color: transparent;
+  margin: 0;
+  height: 100%;
+  border-radius: 0;
+  padding: 15px;
+}
+
+.alert-cancel {
+  color: cornflowerblue;
+  background-color: transparent;
+  margin: 0;
+  height: 100%;
+  border-radius: 0;
+  padding: 15px;
+}
+
+.alert-deny {
+  color: red;
+  background-color: transparent;
+  margin: 0;
+  height: 100%;
+  border-radius: 0;
+  padding: 15px;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.half-width {
+  width: 50%;
+}
+
+.third-width {
+  width: 33%;
+}
+
+.border-right {
+  border-right: 1px solid black;
+}