secullum-react-native-ui 4.3.2 → 4.3.5

package/lib/components/CheckBox.d.ts

@@ -6,6 +6,7 @@ interface Props {
     onChange?: (value: boolean) => void;
     disabled?: boolean;
     style?: StyleProp<ViewStyle>;
+    renderLabel?: () => React.ReactNode;
     labelStyle?: StyleProp<TextStyle>;
     nativeID?: string;
 }

package/lib/components/CheckBox.js

@@ -32,7 +32,7 @@ class CheckBox extends React.Component {
         };
     }
     render() {
-        const { label, value, onChange, disabled, style, labelStyle, nativeID } = this.props;
+        const { label, value, onChange, disabled, style, labelStyle, renderLabel, nativeID } = this.props;
         const styles = this.getStyles();
         return (React.createElement(react_native_1.TouchableOpacity, { style: [styles.container, style], disabled: disabled, onPress: () => {
                 if (onChange) {
@@ -40,7 +40,7 @@ class CheckBox extends React.Component {
                 }
             } },
             React.createElement(FontAwesome_1.default, { nativeID: nativeID, name: value ? 'check-square-o' : 'square-o', style: styles.icon }),
-            React.createElement(react_native_1.Text, { style: [styles.label, labelStyle] }, label)));
+            React.createElement(react_native_1.Text, { style: [styles.label, labelStyle] }, renderLabel ? renderLabel() : label)));
     }
 }
 exports.CheckBox = CheckBox;

package/lib/components/Header.d.ts

@@ -17,8 +17,8 @@ export declare class Header extends React.Component<HeaderProperties> {
     static defaultProps: {
         leftButtonType: string;
     };
-    height: number;
-    getStyles: (height: number) => {
+    static height: number;
+    getStyles: () => {
         header: {
             backgroundColor: string;
             height: number;
@@ -50,7 +50,7 @@ export declare class Header extends React.Component<HeaderProperties> {
             fontSize: number;
         };
     };
-    renderButton: (button: HeaderButton, type: "left" | "right", height: number | undefined) => JSX.Element;
+    renderButton: (button: HeaderButton, type: "left" | "right") => JSX.Element;
     renderButtonInvisible: (type: "left" | "right") => JSX.Element;
     render(): JSX.Element;
 }

package/lib/components/Header.js

@@ -5,17 +5,15 @@ const react_native_1 = require("react-native");
 const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
 const theme_1 = require("../modules/theme");
 const layout_1 = require("../modules/layout");
-const react_native_safe_area_context_1 = require("react-native-safe-area-context");
 class Header extends React.Component {
     constructor() {
         super(...arguments);
-        this.height = layout_1.isTablet() ? 65 : 50;
-        this.getStyles = (height) => {
+        this.getStyles = () => {
             const theme = theme_1.getTheme();
             const styles = react_native_1.StyleSheet.create({
                 header: {
                     backgroundColor: theme.backgroundColor3,
-                    height: height,
+                    height: layout_1.isTablet() ? 65 : 50,
                     flexDirection: 'row',
                     alignItems: 'center',
                     justifyContent: 'center'
@@ -46,8 +44,8 @@ class Header extends React.Component {
             });
             return styles;
         };
-        this.renderButton = (button, type, height) => {
-            const styles = this.getStyles(height || this.height);
+        this.renderButton = (button, type) => {
+            const styles = this.getStyles();
             const theme = theme_1.getTheme();
             const icon = (React.createElement(React.Fragment, null,
                 React.createElement(FontAwesome_1.default, { nativeID: button.nativeID, name: button.icon, size: layout_1.isTablet() ? 30 : 20, color: button.disabled ? theme.textColor1 : theme.textColor4, style: button.buttonStyle }),
@@ -63,7 +61,7 @@ class Header extends React.Component {
             return (React.createElement(react_native_1.TouchableOpacity, { onPress: button.onPress, style: style }, icon));
         };
         this.renderButtonInvisible = (type) => {
-            const styles = this.getStyles(this.height);
+            const styles = this.getStyles();
             const style = [
                 styles.button,
                 type === 'left' ? { marginRight: 'auto' } : { marginLeft: 'auto' }
@@ -73,18 +71,19 @@ class Header extends React.Component {
     }
     render() {
         const { title, leftButton, rightButton } = this.props;
-        const styles = this.getStyles(this.height);
-        return (React.createElement(react_native_safe_area_context_1.SafeAreaInsetsContext.Consumer, null, insets => (React.createElement(react_native_1.View, { style: styles.header },
+        const styles = this.getStyles();
+        return (React.createElement(react_native_1.View, { style: styles.header },
             leftButton
-                ? this.renderButton(leftButton, 'left', insets ? insets.top : undefined)
+                ? this.renderButton(leftButton, 'left')
                 : this.renderButtonInvisible('left'),
             React.createElement(react_native_1.Text, { style: styles.title }, title),
             rightButton
-                ? this.renderButton(rightButton, 'right', insets ? insets.top : undefined)
-                : this.renderButtonInvisible('right')))));
+                ? this.renderButton(rightButton, 'right')
+                : this.renderButtonInvisible('right')));
     }
 }
 Header.defaultProps = {
     leftButtonType: 'menu'
 };
+Header.height = layout_1.isTablet() ? 65 : 50;
 exports.Header = Header;

package/lib/components/Message.js

@@ -24,7 +24,7 @@ class Message extends React.Component {
                     alignItems: 'center'
                 },
                 text: {
-                    color: theme.messageTextColor,
+                    color: theme.textColor3,
                     fontFamily: theme.fontFamily1,
                     fontSize: layout_1.isTablet() ? 25 : 16,
                     textAlign: 'center',

package/lib/components/RangeDatePicker.js

@@ -113,12 +113,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' &&
-                    (showStartDateModal ? (React.createElement(react_native_modal_datetime_picker_1.default, { date: startDate, isVisible: true, onConfirm: this.handleStartDateConfirm, onCancel: this.handleStartDateCancel, isDarkModeEnabled: isDarkModeEnabled, 
+                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, 
                         //@ts-ignore
-                        display: react_native_1.Platform.OS == 'ios' ? 'inline' : 'default' })) : showEndDateModal ? (React.createElement(react_native_modal_datetime_picker_1.default, { date: endDate, isVisible: true, onConfirm: this.handleEndDateConfirm, onCancel: this.handleEndDateCancel, isDarkModeEnabled: isDarkModeEnabled, 
+                        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' })) : null))));
+                        display: react_native_1.Platform.OS == 'ios' ? 'inline' : 'default' }))))));
     }
 }
 exports.RangeDatePicker = RangeDatePicker;

package/lib/modules/theme.d.ts

@@ -1,6 +1,6 @@
 export declare const BLACK = "#282c37";
 export declare const WHITE = "#ffffff";
-export declare const GRAY = "#8c9aa8";
+export declare const GRAY = "#555";
 export declare const GRAY_1 = "#eef1f6";
 export declare const GRAY_2 = "#dddddd";
 export declare const GRAY_3 = "#c2c2c2";

package/lib/modules/theme.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const browser_1 = require("./browser");
 exports.BLACK = '#282c37';
 exports.WHITE = '#ffffff';
-exports.GRAY = '#8c9aa8';
+exports.GRAY = '#555';
 exports.GRAY_1 = '#eef1f6';
 exports.GRAY_2 = '#dddddd';
 exports.GRAY_3 = '#c2c2c2';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "secullum-react-native-ui",
-  "version": "4.3.2",
+  "version": "4.3.5",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [
@@ -27,7 +27,6 @@
     "react-native-elevated-view": "^0.0.6",
     "react-native-masked-text": "^1.7.2",
     "react-native-modal-datetime-picker": "^9.1.0",
-    "react-native-safe-area-context": "^3.2.0",
     "react-native-vector-icons": "^8.0.0",
     "react-native-web-modal": "^1.0.1"
   },