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

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

@@ -1,64 +0,0 @@
-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

@@ -1,105 +0,0 @@
-"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

@@ -1,12 +0,0 @@
-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

@@ -1,21 +0,0 @@
-"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

@@ -1,66 +0,0 @@
-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

@@ -1,94 +0,0 @@
-"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

@@ -1,37 +0,0 @@
-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

@@ -1,63 +0,0 @@
-"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

@@ -1,21 +0,0 @@
-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

@@ -1,35 +0,0 @@
-"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

@@ -1,34 +0,0 @@
-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;
-}
-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;
-}