react-crud-mobile 0.1.7

package/src/elements/UIElement.tsx

@@ -0,0 +1,379 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import ElGrid from './grid/ElGrid';
+import ElCard from './card/ElCard';
+import UIChildren from './UIChildren';
+import ElTabs from './tabs/ElTabs';
+import ElLabel from './grid/ElLabel';
+import ElChart from './charts/ElChart';
+import UIComplete from './UIComplete';
+import ElRepeat from './grid/ElRepeat';
+import {
+  Crud,
+  HtmlUtils,
+  ScopeUtils,
+  Utils,
+  ElementType,
+} from 'react-crud-utils';
+import Link from './core/Link';
+import Icon from './core/Icon';
+import Button from './core/Button';
+import Select from './core/Select';
+import Switch from './core/Switch';
+import Option from './core/Option';
+import Radio from './core/Radio';
+import Input from './core/Input';
+import { Linking } from 'react-native';
+
+export default function UIElement(props: ElementType) {
+  let [scope] = useState(ScopeUtils.create(props));
+  let [index, setIndex] = useState(0);
+  let [error, setError]: string | any = useState(null);
+  let options: any = scope.getOptions();
+  let crud: Crud = Utils.nvl(props.crud, scope.crud);
+  let original = scope.original;
+  let type = original.type;
+  let ref = useRef(null);
+
+  scope.update = () => {
+    setIndex(++index);
+  };
+
+  let router: any = {
+    list: ElGrid,
+    grid: ElGrid,
+    label: ElLabel,
+    card: ElCard,
+    repeat: ElRepeat,
+    tabs: ElTabs,
+    chart: ElChart,
+  };
+
+  let CurrentRouter = () => {
+    if (router[type]) {
+      let Aux = router[type];
+
+      return <Aux crud={crud} {...props} scope={scope} />;
+    }
+    return <></>;
+  };
+
+  const Custom = () => {
+    let c: any = original.custom;
+
+    if (c) {
+      if (typeof c === 'string') {
+        return (
+          <UIElement
+            element={{ value: c, type: 'dummy' }}
+            crud={crud}
+          ></UIElement>
+        );
+      }
+
+      return (
+        <UIElement
+          type={c.type}
+          tag={c.type}
+          {...c.props}
+          crud={crud}
+        ></UIElement>
+      );
+    }
+
+    return <></>;
+  };
+
+  if (scope.is('type', 'dummy')) {
+    return <>{scope.getDisplayValue()}</>;
+  }
+
+  let onCheck = () => {
+    let v = scope.getValue();
+    let check = !(v === true);
+
+    onChange({ target: { value: check } });
+  };
+
+  let onChange = (e: any) => {
+    let val = e.target.value;
+
+    if (scope.isType('integer', 'int', 'number')) {
+      val = parseInt(val);
+    } else if (scope.isType('decimal')) {
+      val = parseFloat(val);
+    }
+
+    if (scope.isType('select', 'complete')) {
+      val = scope.getSelectedItem(val);
+    }
+
+    scope.changeValue(val);
+    scope.update();
+  };
+
+  let onClick = (e: any) => {
+    scope.call('click');
+  };
+
+  let defaultsInput: any = {
+    label: scope.getLabel(),
+    value: scope.getValue(),
+    onChange: onChange,
+  };
+
+  if (scope.isType('password')) {
+    defaultsInput.type = 'password';
+  }
+
+  let elStyle = scope.getStyle('element');
+
+  let defaultsUI: any = {
+    required: scope.isRequired(),
+    size: 'small',
+    style: elStyle,
+    placeholder: scope.attr('placeholder', 'Digite aqui'),
+  };
+
+  let isChecked = () => {
+    let v = scope.getValue();
+
+    return v === true;
+  };
+
+  let hasChildren = () => {
+    if (scope.isInput()) {
+      return false;
+    }
+
+    return !Utils.isEmpty(props.children) || !Utils.isEmpty(props.elements);
+  };
+
+  if (!scope.isRendered() || scope.is('type', 'define')) {
+    return <></>;
+  }
+
+  scope.error = (msg: string) => {
+    error = msg;
+    setError(msg);
+  };
+
+  useEffect(() => {
+    if (!scope.ready) {
+      scope.ready = true;
+
+      scope.call('load');
+
+      if (scope.isType('list', 'repeat')) {
+        scope.search();
+      } else if (original.list) {
+        scope.call('list');
+      }
+      scope.start();
+    }
+  });
+
+  const CustomIcon = () => {
+    if (typeof original.icon === 'string') {
+      return <Icon>{scope.getIcon()}</Icon>;
+    }
+    return <>{original.icon}</>;
+  };
+
+  const getLabelClass = (type: string) => {
+    let clss = `ui-text ui-${type}-text`;
+    let icon = scope.getIcon();
+
+    if (icon) {
+      clss = clss + ` ui-icon ui-${type}-icon`;
+    }
+    return clss;
+  };
+
+  let hasCustomRoute = () => {
+    if (router[type]) return true;
+    return false;
+  };
+
+  scope.open = (args: any) => {
+    Linking.openURL(args.url);
+  };
+
+  if (scope.isType('dialog')) {
+    let name = original.name;
+
+    if (!crud.dialogs[name]) {
+      let dlg: any = { config: { ...original } };
+
+      dlg.component = (args: any) => {
+        return <UIChildren {...props} scope={scope} crud={crud} />;
+      };
+
+      crud.dialogs[name] = dlg;
+    }
+    return <></>;
+  }
+
+  useLayoutEffect(() => {
+    if (ref?.current && scope.is('type', 'card', 'list', 'tabs', 'stepper')) {
+      let el: any = ref?.current;
+
+      if (el) {
+        let bg = HtmlUtils.getBGColor(el);
+
+        if (bg === 'rgb(255, 255, 255)') {
+          el.classList.add('ui-dark');
+        } else {
+          el.classList.add('ui-light');
+        }
+      }
+    }
+  });
+
+  const isShowInner = () => {
+    if (hasChildren() || hasCustomRoute()) {
+      return false;
+    }
+    return true;
+  };
+
+  return (
+    <>
+      <div
+        className={'ui-el ' + scope.getStyleClass()}
+        ref={ref}
+        style={scope.getStyle()}
+      >
+        {isShowInner() && (
+          <>
+            <div
+              className={scope.getStyleClass('inner')}
+              style={scope.getStyle('inner')}
+            >
+              {scope.is('type', 'button') && (
+                <Button
+                  {...defaultsUI}
+                  onClick={onClick}
+                  variant={scope.attr('variant', 'outlined')}
+                >
+                  {original.icon && <CustomIcon />}
+                  {original.label && (
+                    <span className={getLabelClass('button')}>
+                      {scope.getLabel()}
+                    </span>
+                  )}
+                </Button>
+              )}
+              {scope.is('type', 'icon') && (
+                <Icon
+                  {...defaultsUI}
+                  onClick={onClick}
+                  variant={scope.attr('variant', 'outlined')}
+                >
+                  {scope.getDisplayValue()}
+                </Icon>
+              )}
+              {scope.is('type', 'link') && (
+                <Link
+                  {...defaultsUI}
+                  onClick={onClick}
+                  variant={scope.attr('variant', 'outlined')}
+                >
+                  {original.icon && <CustomIcon />}
+                  {original.label && (
+                    <span className={getLabelClass('link')}>
+                      {scope.getLabel()}
+                    </span>
+                  )}
+                </Link>
+              )}
+              {scope.is(
+                'type',
+                'text',
+                'number',
+                'phone',
+                'postalCode',
+                'money',
+                'password',
+                'email'
+              ) && (
+                <Input
+                  {...defaultsInput}
+                  {...defaultsUI}
+                  InputProps={{ ...original.inputProps }}
+                />
+              )}
+              {scope.is('type', 'complete', 'autocomplete') && (
+                <UIComplete
+                  scope={scope}
+                  defaultsInput={defaultsInput}
+                  defaultsUI={defaultsUI}
+                />
+              )}
+              {scope.is('type', 'checkbox', 'boolean', 'switch') && (
+                <Switch
+                  checked={isChecked()}
+                  {...defaultsInput}
+                  onChange={onCheck}
+                />
+              )}
+              {scope.is('type', 'select') && (
+                <Select
+                  {...defaultsInput}
+                  {...defaultsUI}
+                  value={scope.getSelectedValue()}
+                >
+                  <Option value={''}>Selecione</Option>
+                  {options.map((row: any, i: number) => (
+                    <Option key={'i' + i} value={row.value}>
+                      {row.label}
+                    </Option>
+                  ))}
+                </Select>
+              )}
+              {scope.is('type', 'radio') && (
+                <Radio {...defaultsInput} {...defaultsUI} row>
+                  {options.map((row: any, i: number) => (
+                    <Option
+                      key={'i' + i}
+                      control={<Radio {...defaultsUI} />}
+                      label={row.label}
+                      value={row.value}
+                    />
+                  ))}
+                </Radio>
+              )}
+              {scope.is('type', 'custom') && <Custom />}
+              {scope.is('type', 'column') && (
+                <>
+                  {scope.is('format', 'img') && (
+                    <img src={scope.getDisplayValue()} />
+                  )}
+                  {scope.is('format', 'icon') && (
+                    <i className={scope.getDisplayValue()} />
+                  )}
+                  {!scope.is('format', 'icon', 'img') && (
+                    <span>{scope.getDisplayValue()}</span>
+                  )}
+                </>
+              )}
+              {scope.is('type', 'output') && (
+                <span>{scope.getDisplayValue()}</span>
+              )}
+            </div>
+            {error && <div className="ui-error">{error}</div>}
+          </>
+        )}
+        <CurrentRouter />
+        {!scope.is(
+          'type',
+          'card',
+          'tabs',
+          'grid',
+          'list',
+          'define',
+          'repeat'
+        ) && <UIChildren {...props} scope={scope} crud={crud} />}
+      </div>
+    </>
+  );
+}

package/src/elements/UITag.tsx

@@ -0,0 +1,13 @@
+import React, { useState } from "react";
+import { Utils } from "react-crud-utils";
+
+interface UITagType {
+  name: string;
+  [otherOptions: string]: unknown;
+}
+
+export default function UITag(props: UITagType) {
+  let Aux = Utils.nvl(props.name, "span");
+
+  return <Aux {...props} />;
+}

package/src/elements/card/ElCard.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import UIChildren from '../UIChildren';
+import ElLabel from '../grid/ElLabel';
+import ElInclude from '../grid/ElInclude';
+import { ChildType } from 'react-crud-utils';
+
+export default function ElCard(props: ChildType) {
+  let scope = props.scope;
+
+  return (
+    <div
+      className={scope.getStyleClass('inner')}
+      style={scope.getStyle('inner')}
+    >
+      <ElLabel {...props} scope={scope}></ElLabel>
+      <UIChildren {...props} scope={scope} />
+
+      <div
+        className={scope.getStyleClass('bottom')}
+        style={scope.getStyle('bottom')}
+      >
+        <ElInclude {...props} scope={scope} name="bottom" />
+      </div>
+    </div>
+  );
+}

package/src/elements/charts/ElChart.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { ChildType, Scope, Utils } from "react-crud-utils";
+
+export default function ElChart(props: ChildType) {
+  let scope: Scope = props.scope;
+  let items: any = scope.getItems();
+  let columns = Utils.asList(scope.original.columns);
+
+  return <div className="ui-chart-data"></div>;
+}

package/src/elements/core/AutoComplete.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
+
+export default function AutoComplete(props: any) {
+  const handlePress = () => {
+    Linking.openURL('https://reactnative.dev/');
+  };
+
+  return (
+    <TouchableOpacity onPress={handlePress}>
+      <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = {
+  link: {},
+};

package/src/elements/core/Button.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
+
+export default function Button(props: any) {
+  const handlePress = () => {
+    Linking.openURL('https://reactnative.dev/');
+  };
+
+  return (
+    <TouchableOpacity onPress={handlePress}>
+      <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = {
+  link: {},
+};

package/src/elements/core/Icon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
+
+export default function Icon(props: any) {
+  const handlePress = () => {
+    Linking.openURL('https://reactnative.dev/');
+  };
+
+  return (
+    <TouchableOpacity onPress={handlePress}>
+      <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = {
+  link: {},
+};

package/src/elements/core/Input.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
+
+export default function Input(props: any) {
+  const handlePress = () => {
+    Linking.openURL('https://reactnative.dev/');
+  };
+
+  return (
+    <TouchableOpacity onPress={handlePress}>
+      <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = {
+  link: {},
+};

package/src/elements/core/Link.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
+
+export default function Link(props: any) {
+  const handlePress = () => {
+    Linking.openURL('https://reactnative.dev/');
+  };
+
+  return (
+    <TouchableOpacity onPress={handlePress}>
+      <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = {
+  link: {},
+};

package/src/elements/core/Option.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
+
+export default function Option(props: any) {
+  const handlePress = () => {
+    Linking.openURL('https://reactnative.dev/');
+  };
+
+  return (
+    <TouchableOpacity onPress={handlePress}>
+      <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = {
+  link: {},
+};

package/src/elements/core/Radio.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
+
+export default function Radio(props: any) {
+  const handlePress = () => {
+    Linking.openURL('https://reactnative.dev/');
+  };
+
+  return (
+    <TouchableOpacity onPress={handlePress}>
+      <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = {
+  link: {},
+};

package/src/elements/core/Select.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
+
+export default function Select(props: any) {
+  const handlePress = () => {
+    Linking.openURL('https://reactnative.dev/');
+  };
+
+  return (
+    <TouchableOpacity onPress={handlePress}>
+      <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = {
+  link: {},
+};

package/src/elements/core/Switch.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
+
+export default function Switch(props: any) {
+  const handlePress = () => {
+    Linking.openURL('https://reactnative.dev/');
+  };
+
+  return (
+    <TouchableOpacity onPress={handlePress}>
+      <Text style={styles.link}>Clique aqui para acessar o React Native</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = {
+  link: {},
+};

package/src/elements/grid/ElGrid.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import ElGridRow from './ElGridRow';
+import ElGridTop from './ElGridTop';
+import ElGridFilter from './ElGridFilter';
+import ElGridBotom from './ElGridBotom';
+import ElLabel from './ElLabel';
+import { ChildType, ComponentUtils, Scope } from 'react-crud-utils';
+
+export default function ElGrid(props: ChildType) {
+  let scope: Scope = props.scope;
+  let items: any = scope.getItems();
+  let expansion = ComponentUtils.getDefine(props, 'expansion');
+
+  return (
+    <div
+      className={scope.getStyleClass('inner')}
+      style={scope.getStyle('inner')}
+    >
+      <ElLabel {...props} scope={scope} position="outside"></ElLabel>
+      <div
+        className={scope.getStyleClass('child')}
+        style={scope.getStyle('child')}
+      >
+        <ElLabel {...props} scope={scope} position="inside"></ElLabel>
+        <div className="ui-data">
+          <ElGridTop {...props} scope={scope}></ElGridTop>
+          <ElGridFilter scope={scope}></ElGridFilter>
+          <div className="ui-grid-data">
+            <table className="ui-grid ui-table">
+              <tbody>
+                {items.map((row: any, i: number) => (
+                  <ElGridRow
+                    {...props}
+                    expansion={expansion}
+                    key={'r' + i}
+                    scope={scope}
+                    value={row}
+                    index={i}
+                  />
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <ElGridBotom {...props} scope={scope} />
+      </div>
+    </div>
+  );
+}

package/src/elements/grid/ElGridBotom.tsx

@@ -0,0 +1,21 @@
+import React, { useState } from "react";
+import ElGridPaginator from "./ElGridPaginator";
+import UI from "../UI";
+import { ChildType } from "react-crud-utils";
+
+export default function ElGridBotom(props: ChildType) {
+  let scope = props.scope;
+  let children = props.children;
+
+  return (
+    <div className="ui-grid-bottom">
+      <div className="ui-grid-bottom-inner">
+        <UI.Include {...props} transient name="bottomLeft" />
+        <ElGridPaginator scope={scope} position="bottom">
+          {children}
+        </ElGridPaginator>
+        <UI.Include {...props} transient name="bottomRight" />
+      </div>
+    </div>
+  );
+}