secullum-react-native-ui 4.3.8-beta.2 → 4.3.10

package/lib/components/DatePicker.web.d.ts

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import 'react-date-range/dist/styles.css';
+import '../../styles/RangeDatePicker.css';
+export interface DatePickerProperties {
+    label: string;
+    value?: Date;
+    clearable?: boolean;
+    onChange: (value?: Date) => void;
+    style?: StyleProp<ViewStyle>;
+    dateFormat: string;
+    nativeID?: string;
+}
+export interface DatePickerState {
+    showModal: boolean;
+}
+export declare class DatePicker extends React.Component<DatePickerProperties, DatePickerState> {
+    static defaultProps: {
+        clearable: boolean;
+        dateFormat: string;
+    };
+    state: DatePickerState;
+    private calendarRef;
+    componentWillMount(): void;
+    componentWillUnmount(): void;
+    handleClick: (event: MouseEvent) => void;
+    handlePress: () => void;
+    handleClear: () => void;
+    handleConfirm: (value: any) => void;
+    getStyles: () => {
+        container: {
+            paddingLeft: number;
+            paddingRight: number;
+            paddingVertical: number;
+            borderWidth: number;
+            borderColor: string;
+            borderRadius: number;
+            flexDirection: "row";
+            alignItems: "center";
+        };
+        modalOverlay: {
+            justifyContent: "center";
+            alignItems: "center";
+        };
+        label: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+            lineHeight: number;
+        };
+        value: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+            lineHeight: number;
+            minHeight: number;
+        };
+        clearIcon: {
+            borderWidth: number;
+            marginLeft: string;
+        };
+    };
+    render(): JSX.Element;
+}

package/lib/components/DatePicker.web.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const theme_1 = require("../modules/theme");
+const layout_1 = require("../modules/layout");
+const format_1 = require("../modules/format");
+const ImageButton_1 = require("./ImageButton");
+const Modal_1 = require("./Modal");
+const react_date_range_1 = require("react-date-range");
+const react_native_1 = require("react-native");
+require("react-date-range/dist/styles.css");
+require("../../styles/RangeDatePicker.css");
+class DatePicker extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            showModal: false
+        };
+        this.calendarRef = React.createRef();
+        this.handleClick = (event) => {
+            if (this.calendarRef.current &&
+                !this.calendarRef.current.contains(event.target)) {
+                this.setState({ showModal: false });
+            }
+        };
+        this.handlePress = () => {
+            this.setState({ showModal: true });
+        };
+        this.handleClear = () => {
+            this.props.onChange(undefined);
+        };
+        this.handleConfirm = (value) => {
+            this.props.onChange(value);
+            this.setState({ showModal: false });
+        };
+        this.getStyles = () => {
+            const theme = theme_1.getTheme();
+            const styles = react_native_1.StyleSheet.create({
+                container: {
+                    paddingLeft: 16,
+                    paddingRight: 4,
+                    paddingVertical: 8,
+                    borderWidth: 1,
+                    borderColor: theme.borderColor1,
+                    borderRadius: 3,
+                    flexDirection: 'row',
+                    alignItems: 'center'
+                },
+                modalOverlay: {
+                    justifyContent: 'center',
+                    alignItems: 'center'
+                },
+                label: {
+                    color: theme.textColor2,
+                    fontFamily: theme.fontFamily3,
+                    fontSize: layout_1.isTablet() ? 15 : 12,
+                    lineHeight: 16
+                },
+                value: {
+                    color: theme.textColor1,
+                    fontFamily: theme.fontFamily1,
+                    fontSize: 16,
+                    lineHeight: 22,
+                    minHeight: 22
+                },
+                clearIcon: {
+                    borderWidth: 0,
+                    marginLeft: 'auto'
+                }
+            });
+            return styles;
+        };
+    }
+    componentWillMount() {
+        document.addEventListener('mousedown', this.handleClick, false);
+    }
+    componentWillUnmount() {
+        document.removeEventListener('mousedown', this.handleClick, false);
+    }
+    render() {
+        const { label, value, clearable, style, dateFormat, nativeID } = this.props;
+        const styles = this.getStyles();
+        const theme = theme_1.getTheme();
+        return (React.createElement(react_native_1.TouchableWithoutFeedback, { onPress: this.handlePress },
+            React.createElement(react_native_1.View, { nativeID: nativeID, style: [styles.container, style] },
+                React.createElement(react_native_1.View, { ref: ref => ref && ref.setNativeProps({ id: 'date-picker' }) },
+                    React.createElement(react_native_1.Text, { style: styles.label }, label),
+                    React.createElement(react_native_1.Text, { style: styles.value }, value != undefined ? format_1.formatDate(value, dateFormat) : '')),
+                React.createElement(ImageButton_1.ImageButton, { icon: value && clearable ? 'times' : 'calendar', style: styles.clearIcon, iconColor: value && clearable ? theme.textColor1 : theme.textColor2, onPress: value && clearable ? this.handleClear : this.handlePress, hitBoxSize: 30 }),
+                React.createElement(Modal_1.Modal, { visible: this.state.showModal, overlayStyle: styles.modalOverlay },
+                    React.createElement("div", { ref: this.calendarRef, style: {
+                            borderRadius: '5px',
+                            position: 'absolute',
+                            top: '50%',
+                            marginTop: '-150px',
+                            fontFamily: theme.fontFamily1
+                        } },
+                        React.createElement(react_date_range_1.Calendar, { locale: format_1.getDateFnsLocale(), date: value, onChange: this.handleConfirm }))))));
+    }
+}
+DatePicker.defaultProps = {
+    clearable: true,
+    dateFormat: 'dddd, DD/MM/YYYY'
+};
+exports.DatePicker = DatePicker;

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/Details.d.ts

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { StyleProp, TextStyle } from 'react-native';
+export interface DetailsIcon {
+    name: string;
+    color: string;
+    size: number;
+    onPress?: () => void;
+}
+export interface DetailsLine {
+    title?: string;
+    value?: string;
+    icons?: Array<DetailsIcon>;
+    render?: () => React.ReactNode;
+}
+export interface DetailsProperties {
+    title: string;
+    lines: Array<DetailsLine>;
+    lineTitleStyle?: StyleProp<TextStyle>;
+    lineValueStyle?: StyleProp<TextStyle>;
+}
+export declare class Details extends React.Component<DetailsProperties> {
+    getStyles: () => {
+        title: {
+            fontFamily: string;
+            fontSize: number;
+            color: string;
+        };
+        lineSection: {
+            paddingVertical: number;
+            flexDirection: "row";
+            justifyContent: "space-between";
+            alignItems: "center";
+            minHeight: number;
+        };
+        lineSectionCustomRender: {
+            padding: number;
+        };
+        lineText: {
+            fontFamily: string;
+            fontSize: number;
+            color: string;
+            minWidth: number;
+        };
+        lineValue: {
+            textAlign: "center";
+        };
+        lineTitle: {
+            textAlign: "left";
+            flexShrink: number;
+        };
+        lineValueContainer: {
+            flexDirection: "row";
+            flexGrow: number;
+            flexShrink: number;
+            alignItems: "center";
+            justifyContent: "flex-end";
+        };
+        lineValueIcon: {
+            width: number;
+            textAlign: "center";
+        };
+    };
+    renderIcon: (icon: DetailsIcon, index: number) => JSX.Element;
+    renderLine: (line: DetailsLine, index: number) => JSX.Element;
+    render(): JSX.Element;
+}

package/lib/components/Details.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_native_1 = require("react-native");
+const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
+const Card_1 = require("./Card");
+const Space_1 = require("./Space");
+const theme_1 = require("../modules/theme");
+const layout_1 = require("../modules/layout");
+class Details extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const theme = theme_1.getTheme();
+            const styles = react_native_1.StyleSheet.create({
+                title: {
+                    fontFamily: theme.fontFamily1,
+                    fontSize: layout_1.isTablet() ? 22 : 18,
+                    color: theme.textColor1
+                },
+                lineSection: {
+                    paddingVertical: 10,
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    minHeight: 45
+                },
+                lineSectionCustomRender: {
+                    padding: 0
+                },
+                lineText: {
+                    fontFamily: theme.fontFamily2,
+                    fontSize: layout_1.isTablet() ? 18 : 14,
+                    color: theme.textColor1,
+                    minWidth: 40
+                },
+                lineValue: {
+                    textAlign: 'center'
+                },
+                lineTitle: {
+                    textAlign: 'left',
+                    flexShrink: 0
+                },
+                lineValueContainer: {
+                    flexDirection: 'row',
+                    flexGrow: 1,
+                    flexShrink: 1,
+                    alignItems: 'center',
+                    justifyContent: 'flex-end'
+                },
+                lineValueIcon: {
+                    width: 25,
+                    textAlign: 'center'
+                }
+            });
+            return styles;
+        };
+        this.renderIcon = (icon, index) => {
+            const styles = this.getStyles();
+            const fa = (React.createElement(FontAwesome_1.default, { key: index, testID: icon.name, name: icon.name, color: icon.color, size: icon.size, style: styles.lineValueIcon }));
+            if (icon.onPress) {
+                return (React.createElement(react_native_1.TouchableOpacity, { key: index, onPress: icon.onPress }, fa));
+            }
+            return fa;
+        };
+        this.renderLine = (line, index) => {
+            const styles = this.getStyles();
+            const { lineTitleStyle, lineValueStyle } = this.props;
+            const { title, value, icons, render } = line;
+            const sectionStyle = render
+                ? styles.lineSectionCustomRender
+                : styles.lineSection;
+            const children = render ? (render()) : (React.createElement(React.Fragment, null,
+                React.createElement(react_native_1.Text, { style: [styles.lineText, styles.lineTitle, lineTitleStyle] }, title),
+                React.createElement(react_native_1.View, { style: styles.lineValueContainer },
+                    icons && icons.map(this.renderIcon),
+                    React.createElement(react_native_1.Text, { style: [styles.lineText, styles.lineValue, lineValueStyle] }, value))));
+            return (React.createElement(React.Fragment, { key: index },
+                React.createElement(Space_1.Space, { height: 3 }),
+                React.createElement(Card_1.Card, null,
+                    React.createElement(Card_1.Card.Section, { style: sectionStyle }, children))));
+        };
+    }
+    render() {
+        const { title, lines } = this.props;
+        const styles = this.getStyles();
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Card_1.Card, null,
+                React.createElement(Card_1.Card.Section, null,
+                    React.createElement(react_native_1.Text, { style: styles.title }, title))),
+            lines.map(this.renderLine)));
+    }
+}
+exports.Details = Details;

package/lib/components/DetailsHeader.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+export interface DetailsHeaderProperties {
+    text: string;
+    onLeftPress?: () => void;
+    onRightPress?: () => void;
+}
+export declare class DetailsHeader extends React.Component<DetailsHeaderProperties> {
+    getStyles: () => {
+        container: {
+            flexDirection: "row";
+            alignItems: "center";
+            justifyContent: "space-between";
+        };
+        text: {
+            fontFamily: string;
+            fontSize: number;
+            color: string;
+            width: string;
+            textAlign: "center";
+        };
+        button: {
+            height: number;
+            width: number;
+            alignItems: "center";
+            justifyContent: "center";
+            borderColor: string;
+            borderWidth: number;
+            borderRadius: number;
+        };
+        buttonPlaceholder: {
+            height: number;
+            width: number;
+        };
+    };
+    renderButton: (type: "left" | "right", onPress: (() => void) | undefined) => JSX.Element;
+    render(): JSX.Element;
+}

package/lib/components/DetailsHeader.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_native_1 = require("react-native");
+const FontAwesome_1 = require("react-native-vector-icons/FontAwesome");
+const Card_1 = require("./Card");
+const theme_1 = require("../modules/theme");
+const layout_1 = require("../modules/layout");
+class DetailsHeader extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getStyles = () => {
+            const theme = theme_1.getTheme();
+            const styles = react_native_1.StyleSheet.create({
+                container: {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between'
+                },
+                text: {
+                    fontFamily: theme.fontFamily1,
+                    fontSize: layout_1.isTablet() ? 22 : 18,
+                    color: theme.textColor1,
+                    width: '80%',
+                    textAlign: 'center'
+                },
+                button: {
+                    height: layout_1.isTablet() ? 28 : 24,
+                    width: layout_1.isTablet() ? 28 : 24,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderColor: theme.borderColor1,
+                    borderWidth: 1,
+                    borderRadius: 24
+                },
+                buttonPlaceholder: {
+                    height: layout_1.isTablet() ? 28 : 24,
+                    width: layout_1.isTablet() ? 28 : 24
+                }
+            });
+            return styles;
+        };
+        this.renderButton = (type, onPress) => {
+            const styles = this.getStyles();
+            const theme = theme_1.getTheme();
+            if (onPress) {
+                return (React.createElement(react_native_1.TouchableOpacity, { style: styles.button, onPress: onPress },
+                    React.createElement(FontAwesome_1.default, { name: type === 'left' ? 'angle-left' : 'angle-right', color: theme.textColor3, size: 14 })));
+            }
+            return React.createElement(react_native_1.View, { style: styles.buttonPlaceholder });
+        };
+    }
+    render() {
+        const { text, onLeftPress, onRightPress } = this.props;
+        const styles = this.getStyles();
+        return (React.createElement(Card_1.Card, null,
+            React.createElement(Card_1.Card.Section, { style: styles.container },
+                this.renderButton('left', onLeftPress),
+                React.createElement(react_native_1.Text, { style: styles.text }, text),
+                this.renderButton('right', onRightPress))));
+    }
+}
+exports.DetailsHeader = DetailsHeader;

package/lib/components/DimensionsMonitor.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ScaledSize } from 'react-native';
+export interface DimensionsMonitorProperties {
+    children?: (dimensionsInfo: {
+        isDesktop: boolean;
+    }) => React.ReactNode;
+    onDimensionChange?: (isDesktop: boolean) => void;
+}
+export interface DimensionsMonitorState {
+    isDesktop: boolean;
+}
+export declare class DimensionsMonitor extends React.Component<DimensionsMonitorProperties, DimensionsMonitorState> {
+    constructor(props: DimensionsMonitorProperties);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleDimensionsChange: ({ window }: {
+        window: ScaledSize;
+    }) => void;
+    isDesktop: (size: ScaledSize) => boolean;
+    render(): {} | null | undefined;
+}

package/lib/components/DimensionsMonitor.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_native_1 = require("react-native");
+class DimensionsMonitor extends React.Component {
+    constructor(props) {
+        super(props);
+        this.handleDimensionsChange = ({ window }) => {
+            const isDesktop = this.isDesktop(window);
+            this.setState({ isDesktop });
+            if (this.props.onDimensionChange && isDesktop !== this.state.isDesktop) {
+                this.props.onDimensionChange(isDesktop);
+            }
+        };
+        this.isDesktop = (size) => {
+            return size.width >= 1024;
+        };
+        this.state = {
+            isDesktop: this.isDesktop(react_native_1.Dimensions.get('window'))
+        };
+    }
+    componentDidMount() {
+        react_native_1.Dimensions.addEventListener('change', this.handleDimensionsChange);
+    }
+    componentWillUnmount() {
+        react_native_1.Dimensions.removeEventListener('change', this.handleDimensionsChange);
+    }
+    render() {
+        if (!this.props.children) {
+            return null;
+        }
+        return this.props.children({ isDesktop: this.state.isDesktop });
+    }
+}
+exports.DimensionsMonitor = DimensionsMonitor;

package/lib/components/DropDown.d.ts

@@ -0,0 +1,35 @@
+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;
+    items: Array<{
+        label: string;
+        value: any;
+        icon?: string;
+        nativeID?: string;
+    }>;
+    value: any | null;
+    onChange: (value: any) => void;
+    emptyMessage?: string;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    inputStyle?: StyleProp<TextStyle>;
+    iconComponent?: React.ComponentClass<IconProps>;
+    nativeID?: string;
+    icon?: string | undefined;
+}
+export interface DropDownState {
+    modalOpen: boolean;
+}
+export declare class DropDown extends React.Component<DropDownProperties, DropDownState> {
+    static defaultProps: {
+        emptyMessage: string;
+    };
+    state: DropDownState;
+    handleItemPress: (value: any) => void;
+    renderClosedDropDown: (item: any, inputStyle: any) => JSX.Element | null;
+    getStyles: () => any;
+    render(): JSX.Element;
+}