secullum-react-native-ui 4.3.5 → 4.3.8-beta.0

package/lib/components/Delay.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface DelayProperties {
+    wait: number;
+}
+export interface DelayState {
+    hidden: boolean;
+}
+export declare class Delay extends React.Component<DelayProperties, DelayState> {
+    state: DelayState;
+    componentDidMount(): void;
+    render(): {} | null | undefined;
+}

package/lib/components/Delay.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+class Delay extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            hidden: true
+        };
+    }
+    componentDidMount() {
+        const { wait } = this.props;
+        setTimeout(() => {
+            this.setState({ hidden: false });
+        }, wait);
+    }
+    render() {
+        return this.state.hidden ? null : this.props.children;
+    }
+}
+exports.Delay = Delay;

package/lib/components/DropDown.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { IconProps } from 'react-native-vector-icons/Icon';
 import { StyleProp, ViewStyle, TextStyle } from 'react-native';
 export interface DropDownProperties {
-    label: string;
+    label?: string;
     items: Array<{
         label: string;
         value: any;
@@ -18,6 +18,7 @@ export interface DropDownProperties {
     inputStyle?: StyleProp<TextStyle>;
     iconComponent?: React.ComponentClass<IconProps>;
     nativeID?: string;
+    icon?: string | undefined;
 }
 export interface DropDownState {
     modalOpen: boolean;

package/lib/components/DropDown.js

@@ -131,14 +131,11 @@ class DropDown extends React.Component {
         };
         this.getStyles = () => {
             const theme = theme_1.getTheme();
+            const { icon } = this.props;
             const styles = react_native_1.StyleSheet.create({
-                container: {
-                    paddingHorizontal: 16,
-                    paddingVertical: 8,
-                    borderWidth: 1,
-                    borderColor: theme.borderColor1,
-                    borderRadius: 3
-                },
+                container: Object.assign({ paddingHorizontal: 16, paddingVertical: 8, borderWidth: 1, borderColor: theme.borderColor1, borderRadius: 3 }, (icon ? { flexDirection: 'row' } : {}), (icon && react_native_1.Platform.OS === 'web'
+                    ? { minHeight: 40 }
+                    : { minHeight: 48 })),
                 label: {
                     color: theme.textColor2,
                     fontFamily: theme.fontFamily3,
@@ -148,7 +145,7 @@ class DropDown extends React.Component {
                 text: {
                     lineHeight: 22,
                     minHeight: 22,
-                    alignSelf: 'flex-start',
+                    textAlignVertical: 'center',
                     color: theme.textColor1,
                     fontFamily: theme.fontFamily1,
                     fontSize: 16
@@ -215,6 +212,14 @@ class DropDown extends React.Component {
                     paddingHorizontal: 16,
                     paddingVertical: 8,
                     fontSize: 26
+                },
+                icone: {
+                    color: theme.textColor2,
+                    fontSize: layout_1.isTablet() ? 21 : 19,
+                    marginRight: 10,
+                    minWidth: 25,
+                    textAlignVertical: 'center',
+                    flex: 0
                 }
             });
             return styles;
@@ -222,13 +227,13 @@ class DropDown extends React.Component {
     }
     render() {
         const { modalOpen } = this.state;
-        const { label, items, value, emptyMessage, style, disabled, labelStyle, inputStyle, iconComponent, nativeID } = this.props;
+        const { label, items, value, emptyMessage, style, disabled, labelStyle, inputStyle, iconComponent, nativeID, icon } = this.props;
         const selectedItem = items.find(x => x.value === value);
         const styles = this.getStyles();
         const theme = theme_1.getTheme();
         return (React.createElement(react_native_1.TouchableWithoutFeedback, { onPress: () => this.setState({ modalOpen: true }), disabled: disabled },
             React.createElement(react_native_1.View, { nativeID: nativeID, style: [styles.container, style, disabled ? styles.readonly : null] },
-                React.createElement(react_native_1.Text, { style: [styles.label, labelStyle] }, label),
+                icon ? (React.createElement(FontAwesome_1.default, { name: icon, style: styles.icone })) : (React.createElement(react_native_1.Text, { style: [styles.label, labelStyle] }, label)),
                 this.renderClosedDropDown(selectedItem, inputStyle),
                 React.createElement(Modal_1.Modal, { visible: modalOpen, onRequestClose: () => this.setState({ modalOpen: false }), overlayStyle: styles.modalOverlay },
                     React.createElement(react_native_1.TouchableWithoutFeedback, null,

package/lib/components/Modal.js

@@ -6,7 +6,7 @@ const react_native_1 = require("react-native");
 class Modal extends React.Component {
     render() {
         const { children, visible, overlayStyle, onRequestClose } = this.props;
-        return (React.createElement(react_native_web_modal_1.default, { animationType: "fade", transparent: true, visible: visible, onRequestClose: onRequestClose },
+        return (React.createElement(react_native_web_modal_1.default, { animationType: "fade", transparent: true, visible: visible, supportedOrientations: ['landscape', 'portrait'], onRequestClose: onRequestClose },
             React.createElement(react_native_1.TouchableWithoutFeedback, { onPress: onRequestClose },
                 React.createElement(react_native_1.View, { style: [styles.overlay, overlayStyle] }, children))));
     }

package/lib/components/RangeDatePicker.js

@@ -7,6 +7,7 @@ const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
 const format_1 = require("../modules/format");
 const layout_1 = require("../modules/layout");
 const theme_1 = require("../modules/theme");
+const Delay_1 = require("./Delay");
 const react_native_1 = require("react-native");
 class RangeDatePicker extends React.Component {
     constructor() {
@@ -113,13 +114,13 @@ class RangeDatePicker extends React.Component {
                     React.createElement(react_native_1.Text, { style: styles.label }, label),
                     React.createElement(react_native_1.Text, { style: styles.value }, displayText)),
                 React.createElement(FontAwesome_1.default, { name: "calendar", style: styles.icon }),
-                react_native_1.Platform.OS !== 'web' && (React.createElement(React.Fragment, null,
-                    React.createElement(react_native_modal_datetime_picker_1.default, { date: startDate, isVisible: showStartDateModal, onConfirm: this.handleStartDateConfirm, onCancel: this.handleStartDateCancel, isDarkModeEnabled: isDarkModeEnabled, 
+                react_native_1.Platform.OS !== 'web' &&
+                    (showStartDateModal ? (React.createElement(react_native_modal_datetime_picker_1.default, { date: startDate, isVisible: true, onConfirm: this.handleStartDateConfirm, onCancel: this.handleStartDateCancel, isDarkModeEnabled: isDarkModeEnabled, 
                         //@ts-ignore
-                        display: react_native_1.Platform.OS == 'ios' ? 'inline' : 'default' }),
-                    React.createElement(react_native_modal_datetime_picker_1.default, { date: endDate, isVisible: showEndDateModal, onConfirm: this.handleEndDateConfirm, onCancel: this.handleEndDateCancel, isDarkModeEnabled: isDarkModeEnabled, 
-                        //@ts-ignore
-                        display: react_native_1.Platform.OS == 'ios' ? 'inline' : 'default' }))))));
+                        display: react_native_1.Platform.OS == 'ios' ? 'inline' : 'default' })) : showEndDateModal ? (React.createElement(Delay_1.Delay, { wait: 5 },
+                        React.createElement(react_native_modal_datetime_picker_1.default, { date: endDate, isVisible: true, onConfirm: this.handleEndDateConfirm, onCancel: this.handleEndDateCancel, isDarkModeEnabled: isDarkModeEnabled, 
+                            //@ts-ignore
+                            display: react_native_1.Platform.OS == 'ios' ? 'inline' : 'default' }))) : null))));
     }
 }
 exports.RangeDatePicker = RangeDatePicker;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "secullum-react-native-ui",
-  "version": "4.3.5",
+  "version": "4.3.8-beta.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [