@agilemotion/oui-react-js 1.1.0 → 1.2.0

package/src/lib/components/Icon.js

@@ -1,42 +0,0 @@
-import AddIcon from '@material-ui/icons/Add';
-import RemoveIcon from '@material-ui/icons/Remove';
-import EditIcon from '@material-ui/icons/Edit';
-import SaveIcon from '@material-ui/icons/Save';
-import InfoIcon from '@material-ui/icons/Info';
-import DeleteIcon from '@material-ui/icons/Delete';
-import SearchIcon from '@material-ui/icons/Search';
-import ErrorIcon from '@material-ui/icons/Error';
-import Download from '@material-ui/icons/CloudDownload';
-import React, { Component } from "react";
-
-
-class Icon extends Component {
-
-    constructor(){
-        super();
-    }
-
-    render() {
-        if(this.props.id === 'ADD') {
-            return <AddIcon/>
-        } else if(this.props.id === 'EDIT') {
-            return <EditIcon/>
-        } else if(this.props.id === 'REMOVE') {
-            return <RemoveIcon />
-        } else if(this.props.id === 'SAVE') {
-            return <SaveIcon/>
-        } else if(this.props.id === 'INFO') {
-            return <InfoIcon/>
-        } else if(this.props.id === 'DELETE') {
-            return <DeleteIcon/>
-        } else if(this.props.id === 'DOWNLOAD') {
-            return <Download/>
-        } else if(this.props.id === 'SEARCH') {
-            return <SearchIcon/>
-        } else if(this.props.id === 'ERROR') {
-            return <ErrorIcon style={{color: '#f44336'}}/>
-        }
-    };
-}
-
-export default Icon;

package/src/lib/components/LoadingIndicator.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { usePromiseTracker } from "react-promise-tracker";
-import Loader from 'react-loader-spinner';
-import "./loader.css"
-
-export default function LoadingIndicator(props){
-    const { promiseInProgress } = usePromiseTracker();
-
-    return(
-        promiseInProgress &&
-        <div id="myModal" className="loaderModal">
-            <div style={{
-                margin: "25% auto",
-                width: "100%", height: "100", display: "flex",
-                justifyContent: "center", alignItems: "center",
-            }}>
-                <Loader type="Oval" color={props.color} height={60} width={60} />
-            </div>
-        </div>
-    )
-};

package/src/lib/components/PopupView.jsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import Dialog from '@material-ui/core/Dialog';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import Utils from "../Utils";
-import {makeStyles} from '@material-ui/core/styles';
-import {View} from "./layout/View";
-
-export default function PopupView(props) {
-
-    const height = Utils.getComponentAttribute(props.view.config, 'height', '28vh');
-    const width = Utils.getComponentAttribute(props.view.config, 'width', '40vw');
-
-    const useStyles = makeStyles(theme => ({
-        dialogPaper: {
-            minHeight: height,
-            maxHeight: height,
-            minWidth: width,
-            maxWidth: width,
-        },
-    }));
-
-    const classes = useStyles();
-    const handler = (result) => {
-        props.handler(result)
-    };
-
-    return (
-        <Dialog
-            classes={{paper: classes.dialogPaper}}
-            open={props.open}
-            aria-labelledby="alert-dialog-title"
-            aria-describedby="alert-dialog-description"
-        >
-            <DialogTitle id="alert-dialog-title">{props.view.config.title}</DialogTitle>
-            <DialogContent>
-                <View config={props.view.config} parameters={props.view.parameters} ref={props.view.ref} handle={props.view.handle}/>
-            </DialogContent>
-        </Dialog>
-    );
-}

package/src/lib/components/RegularButton.jsx

@@ -1,94 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import PropTypes from "prop-types";
-
-import {
-    makeStyles
-} from "@material-ui/core/styles";
-import Button from "@material-ui/core/Button";
-
-import styles from "../assets/jss/components/buttonStyle";
-
-const useStyles = makeStyles(styles);
-
-const RegularButton = React.forwardRef((props, ref) => {
-    const classes = useStyles();
-    const {
-        color,
-        round,
-        children,
-        fullWidth,
-        disabled,
-        simple,
-        size,
-        block,
-        link,
-        justIcon,
-        className,
-        muiClasses,
-        ...rest
-    } = props;
-    const btnClasses = classNames({
-        [classes.button]: true,
-        [classes[size]]: size,
-        [classes[color]]: color,
-        [classes.round]: round,
-        [classes.fullWidth]: fullWidth,
-        [classes.disabled]: disabled,
-        [classes.simple]: simple,
-        [classes.block]: block,
-        [classes.link]: link,
-        [classes.justIcon]: justIcon,
-        [className]: className
-    });
-    return (
-        <Button { ...rest } ref = { ref }
-                classes = {
-                    muiClasses
-                }
-                className = {
-                    btnClasses
-                } >
-            {
-                children
-            }
-        </Button>
-    );
-});
-
-RegularButton.propTypes = {
-    color: PropTypes.oneOf([
-        "primary",
-        "info",
-        "success",
-        "warning",
-        "danger",
-        "rose",
-        "white",
-        "twitter",
-        "facebook",
-        "google",
-        "linkedin",
-        "pinterest",
-        "youtube",
-        "tumblr",
-        "github",
-        "behance",
-        "dribbble",
-        "reddit",
-        "transparent"
-    ]),
-    size: PropTypes.oneOf(["sm", "lg"]),
-    simple: PropTypes.bool,
-    round: PropTypes.bool,
-    fullWidth: PropTypes.bool,
-    disabled: PropTypes.bool,
-    block: PropTypes.bool,
-    link: PropTypes.bool,
-    justIcon: PropTypes.bool,
-    className: PropTypes.string,
-    muiClasses: PropTypes.object,
-    children: PropTypes.node
-};
-
-export default RegularButton;

package/src/lib/components/TabPage.jsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography';
-import Box from '@material-ui/core/Box';
-import {makeStyles} from '@material-ui/core/styles';
-import Utils from '../Utils';
-
-const useStyles = makeStyles(theme => ({
-    formTabContainer: {
-        height: 'inherit !important',
-        overflow: 'hidden !important',
-        width: '100%',
-        zIndex: '0',
-        paddingLeft: '16px'
-    },
-    formTabPanel: {
-        width: '100%',
-        height: 'inherit !important',
-        overflow: 'hidden !important',
-        zIndex: '0',
-        paddingLeft: "0px"
-    }
-}));
-
-const TabPage = React.memo(React.forwardRef((props, ref) => {
-    const {children, value, index, ...other} = props;
-    const classes = useStyles();
-    let componentKey = 0;
-
-    return (
-        <div ref={ref} style={{width: "inherit"}}>
-            <Typography
-                component="div"
-                className="w-100"
-                role="tabpanel"
-                hidden={value !== index}
-                id={`simple-tabpanel-${index}`}
-                aria-labelledby={`simple-tab-${index}`}
-                {...other}
-            >
-                <Box p={3} className={classes.formTabPanel}>
-                    {
-                        children
-                    }
-                </Box>
-            </Typography>
-        </div>
-    );
-}));
-
-TabPage.propTypes = {
-    children: PropTypes.node,
-    index: PropTypes.any.isRequired,
-    value: PropTypes.any.isRequired,
-};
-
-export default TabPage;

package/src/lib/components/TabPanel.jsx

@@ -1,156 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography';
-import Box from '@material-ui/core/Box';
-import {makeStyles} from '@material-ui/core/styles';
-import Utils from '../Utils';
-import AppBar from '@material-ui/core/AppBar';
-import Section from "./form/Form";
-import Tab from '@material-ui/core/Tab';
-import Tabs from '@material-ui/core/Tabs';
-import TabPage from './TabPage';
-import FormSection from "./form/Section";
-import {observable, observe} from "mobx"
-
-function a11yProps(index) {
-    return {
-        id: `simple-tab-${index}`,
-        'aria-controls': `simple-tabpanel-${index}`,
-    };
-}
-
-const TabPanel = React.memo(React.forwardRef((props, ref) => {
-    const [tabValue, setTabValue] = React.useState(0);
-    const [errors, setErrors] = React.useState({});
-    const [componentHandles] = React.useState({});
-
-    const handleTabChange = (event, newValue) => {
-        setTabValue(newValue);
-    };
-
-    let tabIndex = 0;
-    let tabContentIndex = 0;
-
-    const createComponentHandle = (component) => {
-        if (Utils.isNull(componentHandles[component.id])) {
-            let handle = {};
-            componentHandles[component.id] = handle;
-            return handle;
-        }
-
-        return componentHandles[component.id];
-    };
-
-    React.useEffect(() => {
-        if (!Utils.isNull(props.form)) {
-            props.form().setContainerErrorHandler((containerErrors) => {
-                let shouldRefresh = false;
-                let properties = Object.getOwnPropertyNames(containerErrors);
-
-                for (const property of properties) {
-                    if (errors[property] !== containerErrors[property]) {
-                        shouldRefresh = true;
-                        break;
-                    }
-                }
-
-                if (shouldRefresh) {
-                    //Note that this line refreshes the entire tab page
-                    setErrors(JSON.parse(JSON.stringify(containerErrors)));
-                }
-            });
-        }
-
-        props.handle.api = api();
-    });
-
-    function renderTabPageComponent(component, tabId) {
-        if (Utils.isNull(component.id)) {
-            component.id = tabContentIndex + '-tab-content';
-        }
-
-        return component.type === 'formSection' ?
-            <FormSection keyHandler={props.keyHandler}
-                         key={tabContentIndex}
-                         config={component}
-                         handle={createComponentHandle(component)}
-                         ref={React.createRef()}
-                         form={props.form}
-                         parentId={tabId}
-                         loadCompleteHandler={props.loadCompleteHandler}
-                         viewId={props.viewId}
-                         values={props.values}
-            /> :
-            <div>{'Unsupported component type ' + component.type}</div>
-    }
-
-    function renderPage(page) {
-        return <div style={{margin: '16px'}}>
-            {
-                page.components.map((component) => {
-                    return renderTabPageComponent(component, page.id)
-                })
-            }
-        </div>
-    }
-
-    const api = () => {
-        return {
-            getId: () => {
-                return props.config.id;
-            },
-            getChildren: () => {
-                let children = [];
-
-                let properties = Object.getOwnPropertyNames(componentHandles);
-                for (const property of properties) {
-                    let componentHandle = componentHandles[property];
-                    children.push(componentHandle);
-                    if (!Utils.isNull(componentHandle.api.getChildren)) {
-                        for (const child of componentHandle.api.getChildren()) {
-                            children.push(child);
-                        }
-                    }
-                }
-
-                return children;
-            }
-        }
-    };
-
-    return (
-        <div ref={ref} style={{width: '100%'}}>
-            <AppBar position="static" color="default"
-                    style={{background: 'transparent', boxShadow: 'none', borderBottom: '1px solid #d1d1d1'}}>
-                <Tabs value={tabValue} onChange={handleTabChange} indicatorColor="primary" textColor="primary"
-                      aria-label="tabs">
-                    {
-                        (!Utils.isNull(props.config) && !Utils.isNull(props.config.tabPages) && props.config.tabPages.length > 0) ?
-                            props.config.tabPages.map((page) => {
-                                return <Tab label={page.attributes['label']} {...a11yProps(tabIndex)} key={tabIndex++}
-                                            style={{color: !Utils.isNull(props.form) && errors !== null && errors[page.id] === true ? "red" : null}}/>
-                            })
-                            :
-                            null
-                    }
-                </Tabs>
-            </AppBar>
-            {
-                (!Utils.isNull(props.config) && !Utils.isNull(props.config.tabPages) && props.config.tabPages.length > 0) ?
-                    props.config.tabPages.map((page) => {
-                        if (Utils.isNull(page.id)) {
-                            page.id = tabContentIndex + '-tab-page';
-                        }
-
-                        return <TabPage value={tabValue} key={tabContentIndex} index={tabContentIndex++}>
-                            {renderPage(page)}
-                        </TabPage>
-                    })
-                    :
-                    null
-            }
-        </div>
-    );
-}));
-
-export default TabPanel;

package/src/lib/components/TableCellContent.jsx

@@ -1,218 +0,0 @@
-import React from "react";
-import TextField from "./form/TextField";
-import DatePicker from "./form/DatePicker";
-import SelectItem from "./form/SelectItem";
-import Utils from '../Utils';
-import LookupField from "./form/LookupField";
-import ErrorIcon from '@material-ui/icons/Error';
-import CustomTooltip from "./Tooltip";
-import applicationContext from "../ApplicationContext";
-
-const TableCellContent = React.memo(React.forwardRef((props, ref) => {
-    const [contentType] = React.useState(props.contentType);
-    const [refresher, setRefresher] = React.useState(true);
-
-    const validate = (value) => {
-        let validator = props.validator;
-        let errors = props.row.errors;
-        if (!Utils.isNull(errors)) {
-            errors = errors.filter((error) => {
-                return error.column !== props.dataBinding;
-            });
-
-            props.row.errors = errors;
-        }
-
-        if (!Utils.isNull(validator)) {
-            let required = false;
-            if (!Utils.isNull(validator.nullable)) {
-                let nullableExpression = validator.nullable.replace(/\[#i]/g, `[${props.row.index}]`);
-                required = !Utils.evaluateBooleanExpression(nullableExpression, props.dataBinding);
-            }
-
-            let validation = Utils.validateField(props.dataBinding,
-                required, props.formValues, value, validator);
-            if (!validation.valid) {
-                let error = {};
-                error.column = props.dataBinding;
-                error.message = validation.message;
-
-                if (Utils.isNull(errors)) {
-                    errors = [];
-                    props.row.errors = errors;
-                }
-
-                props.row.errors.push(error);
-                return error;
-            }
-        }
-
-        return null;
-    };
-
-    const valueChangeHandler = (value) => {
-        validate(value);
-        props.valueChangeHandler(props.row.id, props.dataBinding, value);
-    };
-
-    React.useEffect(() => {
-        if (!Utils.isNull(ref.current)) {
-            props.refCallback(props.row, props.dataBinding, {
-                "api": api
-            });
-        }
-    }, [ref.current]);
-
-    React.useEffect(() => {
-        if (!Utils.isNull(props.editor)) {
-            props.editor.id = props.editor.id.replace(".", "_");
-            if (Utils.isNull(props.editor.attributes)) {
-                props.editor.attributes = {};
-            }
-
-            props.editor.attributes['minWidth'] = 0;
-            valueChangeHandler(null);
-        }
-    }, [props.editor]);
-
-    const getStaticDisplayValue = () => {
-        let displayValue;
-        let contentValue = props.row[props.dataBinding];
-
-        if(props.columnConfig.cellFormat === 'MONEY' || props.columnConfig.cellFormat === 'NUMBER') {
-            return Utils.isNull(contentValue) ? '' : contentValue.toFixed(2);
-        } else {
-            if (Utils.isNull(contentValue)) {
-                displayValue = "";
-            } else if (contentType === 'DATE') {
-                displayValue = new Date(contentValue).toLocaleDateString();
-            } else if (contentType === 'TIME') {
-                displayValue = new Date(contentValue).toLocaleTimeString();
-            } else {
-                if (typeof contentValue === 'object') {
-                    // TODO : First check if the editor has a display template. If it does, use it to get the display value
-                    if (!Utils.isNull(contentValue.map)) {
-                        displayValue = contentValue.map.label;
-                    } else {
-                        displayValue = contentValue.label;
-                    }
-                } else {
-                    displayValue = contentValue;
-                }
-            }
-
-            return displayValue;
-        }
-    };
-
-    const doRender = () => {
-        if (!props.selected) {
-            return getStaticDisplayValue();
-        } else {
-            if (!Utils.isNull(props.editor)) {
-                props.formValues[props.editor.id] = props.row[props.dataBinding];
-
-                if (props.editor.fieldType === "TEXT_FIELD") {
-                    return <TextField valueChangeHandler={valueChangeHandler}
-                                      config={props.editor}
-                                      loadCompleteHandler={props.loadCompleteHandler}
-                                      form={props.form}
-                                      handle={{}}
-                                      ref={React.createRef()}
-                                      bindValueToForm={false}
-                                      values={props.formValues}
-                                      viewId={props.viewId}
-                    />
-                } else if (props.editor.fieldType === "DATE") {
-                    return <DatePicker valueChangeHandler={valueChangeHandler}
-                                       config={props.editor}
-                                       form={props.form}
-                                       handle={{}}
-                                       ref={React.createRef()}
-                                       bindValueToForm={false}
-                                       loadCompleteHandler={props.loadCompleteHandler}
-                                       values={props.formValues}
-                                       viewId={props.viewId}
-                    />
-                } else if (props.editor.fieldType === "SELECT") {
-                    let objectReference = props.row[props.dataBinding];
-                    if (!Utils.isNull(objectReference)) {
-                        objectReference.toString = () => {
-                            return objectReference.label;
-                        };
-                    }
-
-                    return <SelectItem valueChangeHandler={valueChangeHandler}
-                                       config={props.editor}
-                                       form={props.form}
-                                       handle={{}}
-                                       ref={React.createRef()}
-                                       bindValueToForm={false}
-                                       loadCompleteHandler={props.loadCompleteHandler}
-                                       values={props.formValues}
-                                       value={objectReference}
-                                       viewId={props.viewId}
-                    />
-                } else if (props.editor.fieldType === "LOOKUP") {
-                    let data = props.row[props.dataBinding];
-                    if (!Utils.isNull(data)) {
-                        if(!Utils.isNull(data.map)) {
-                            data = data.map;
-                            props.formValues[props.editor.id] = data;
-                        }
-
-                        data.toString = () => {
-                            return data.label;
-                        };
-                    }
-
-                    return <LookupField valueChangeHandler={valueChangeHandler}
-                                        config={props.editor}
-                                        form={props.form}
-                                        handle={{}}
-                                        ref={React.createRef()}
-                                        bindValueToForm={false}
-                                        loadCompleteHandler={(id) => {
-                                            applicationContext.resolveComponentApi(id).refresh()
-                                        }}
-                                        values={props.formValues}
-                                        value={data}
-                                        viewId={props.viewId}
-                    />
-                }
-            } else {
-                return getStaticDisplayValue();
-            }
-        }
-    };
-
-    const render = () => {
-        let error = validate(props.row[props.dataBinding]);
-        let hasError = !Utils.isNull(error);
-        return <table className={'tableCellContentContainer'} border="0" ref={ref}>
-            <tbody>
-            <tr>
-                {hasError ?
-                    <td style={{width: '8px'}}><CustomTooltip title={error.message} type={'ERROR'}><ErrorIcon
-                        style={{color: '#f44336'}}/></CustomTooltip>
-                    </td> : null}
-                <td style={props.columnConfig.cellFormat === 'MONEY' || props.columnConfig.cellFormat === 'NUMBER'
-                    ? {textAlign: 'right'} : {textAlign: 'left'}}>{doRender()}</td>
-            </tr>
-            </tbody>
-        </table>
-    };
-
-    const api = {
-        refresh: () => {
-            setRefresher(!refresher);
-            if (Utils.isNull(props.editor)) {
-                valueChangeHandler(props.row[props.dataBinding]);
-            }
-        }
-    };
-
-    return render();
-}));
-
-export default TableCellContent;