react-crud-mobile 1.1.2 → 1.3.1

package/src/elements/UI.tsx

@@ -1,57 +1,73 @@
-import { ListType } from "react-crud-utils";
-import { UserType } from "react-crud-utils";
-import { InputType } from "react-crud-utils";
-import { ChartType } from "react-crud-utils";
-import { ContainerType } from "react-crud-utils";
-import { ListInputType } from "react-crud-utils";
-import UIElement from "./UIElement";
-import { TabsType } from "react-crud-utils";
-import { DefineType } from "react-crud-utils";
-import ElInclude from "./grid/ElInclude";
-import { ButtonType } from "react-crud-utils";
-import { LinkType } from "react-crud-utils";
-
-const UI = {
-  Grid: (props: ListType) => <UIElement {...props} type="list" />,
-  Repeat: (props: ListType) => <UIElement {...props} type="repeat" />,
-  Define: (props: DefineType) => <UIElement {...props} type="define" />,
-  Include: (props: DefineType) => <ElInclude {...props} />,
-  Column: ({ type = "column", ...props }: UserType) => (
-    <UIElement {...props} type="column" />
-  ),
-  Input: (props: InputType) => <UIElement {...props} />,
-  Text: (props: InputType) => <UIElement {...props} type="text" />,
-  Email: (props: InputType) => <UIElement {...props} type="email" />,
-  Button: (props: ButtonType) => <UIElement {...props} type="button" />,
-  Link: (props: LinkType) => <UIElement {...props} type="link" />,
-  Icon: (props: ButtonType) => <UIElement {...props} type="icon" />,
-  Output: (props: ContainerType) => <UIElement {...props} type="output" />,
-  Form: (props: ContainerType) => <UIElement {...props} type="form" />,
-  Crud: (props: ContainerType) => <UIElement {...props} type="crud" />,
-  View: (props: ContainerType) => (
-    <UIElement {...props} type="view" transient />
-  ),
-  Bottom: (props: ContainerType) => <UIElement {...props} type="bottom" />,
-  Dialog: (props: ContainerType) => <UIElement {...props} type="dialog" />,
-  Content: (props: ContainerType) => <UIElement {...props} type="content" />,
-  Top: (props: ContainerType) => <UIElement {...props} type="top" />,
-  Card: (props: ContainerType) => <UIElement {...props} type="card" />,
-  Tab: (props: ContainerType) => <UIElement {...props} type="tab" />,
-  Tabs: (props: TabsType) => <UIElement {...props} type="tabs" />,
-  Step: (props: ContainerType) => (
-    <UIElement {...props} type="tab" layout="step" />
-  ),
-  Stepper: (props: TabsType) => (
-    <UIElement {...props} type="tabs" layout="stepper" />
-  ),
-  Money: (props: InputType) => <UIElement {...props} type="money" />,
-  Chart: (props: ChartType) => <UIElement {...props} type="chart" />,
-  Password: (props: InputType) => <UIElement {...props} type="password" />,
-  Complete: (props: InputType) => <UIElement {...props} type="complete" />,
-  Checkbox: (props: InputType) => <UIElement {...props} type="checkbox" />,
-  Radio: (props: ListInputType) => <UIElement {...props} type="radio" />,
-  Select: (props: ListInputType) => <UIElement {...props} type="select" />,
-  Entity: (props: ListInputType) => <UIElement {...props} type="entity" />,
-  Element: (props: ListInputType) => <UIElement {...props} type="element" />,
-};
-export default UI;
+import {
+  ListType,
+  UserType,
+  InputType,
+  ChartType,
+  ContainerType,
+  ListInputType,
+  TabsType,
+  DefineType,
+  ButtonType,
+  IconType,
+  LinkType,
+  SliderType,
+} from 'react-crud-utils';
+import UIElement from './UIElement';
+
+import UIInclude from './core/UIInclude';
+import SafeView from './core/SafeView';
+
+const UI = {
+  List: (props: ListType) => <UIElement {...props} type="list" />,
+  Row: (props: UserType) => <UIElement {...props} type="row" />,
+  Value: (props: UserType) => <UIElement {...props} type="value" />,
+  Label: (props: UserType) => <UIElement {...props} type="label" />,
+  Repeat: (props: ListType) => (
+    <UIElement {...props} type="repeat" props={{ search: false }} />
+  ),
+  Define: (props: DefineType) => <UIElement {...props} type="define" />,
+  Include: (props: DefineType) => <UIInclude {...props} />,
+  Column: ({ type = 'column', ...props }: UserType) => (
+    <UIElement {...props} type="column" />
+  ),
+  Input: (props: InputType) => <UIElement {...props} />,
+  Text: (props: InputType) => <UIElement {...props} type="text" />,
+  Email: (props: InputType) => <UIElement {...props} type="email" />,
+  Button: (props: ButtonType) => <UIElement {...props} type="button" />,
+  Link: (props: LinkType) => <UIElement {...props} type="link" />,
+  Icon: (props: IconType) => <UIElement {...props} type="icon" />,
+  Output: (props: ContainerType) => <UIElement {...props} type="output" />,
+  Form: (props: ContainerType) => <UIElement {...props} type="form" />,
+  Crud: (props: ContainerType) => <UIElement {...props} type="crud" />,
+  View: (props: ContainerType) => (
+    <UIElement {...props} type="view" transient />
+  ),
+  Bottom: (props: ContainerType) => <UIElement {...props} type="bottom" />,
+  Dialog: (props: ContainerType) => <UIElement {...props} type="dialog" />,
+  Content: (props: ContainerType) => <UIElement {...props} type="content" />,
+  Top: (props: ContainerType) => <UIElement {...props} type="top" />,
+  Card: (props: ContainerType) => <UIElement {...props} type="card" />,
+  Tab: (props: ContainerType) => <UIElement {...props} type="tab" />,
+  Tabs: (props: TabsType) => <UIElement {...props} type="tabs" />,
+  Step: (props: ContainerType) => (
+    <UIElement {...props} type="tab" layout="step" />
+  ),
+  Stepper: (props: TabsType) => (
+    <UIElement {...props} type="tabs" layout="stepper" />
+  ),
+  Money: (props: InputType) => <UIElement {...props} type="money" />,
+  Chart: (props: ChartType) => <UIElement {...props} type="chart" />,
+  Password: (props: InputType) => <UIElement {...props} type="password" />,
+  Complete: (props: InputType) => <UIElement {...props} type="complete" />,
+  Checkbox: (props: InputType) => <UIElement {...props} type="switch" />,
+  Switch: (props: InputType) => <UIElement {...props} type="switch" />,
+  Radio: (props: ListInputType) => <UIElement {...props} type="radio" />,
+  Select: (props: ListInputType) => <UIElement {...props} type="select" />,
+  Toggle: (props: ListInputType) => <UIElement {...props} type="toggle" />,
+  Entity: (props: ListInputType) => <UIElement {...props} type="entity" />,
+  Element: (props: ListInputType) => <UIElement {...props} type="element" />,
+  Quantity: (props: ListInputType) => <UIElement {...props} type="quantity" />,
+  Slider: (props: SliderType) => <UIElement {...props} type="slider" />,
+  SafeView: SafeView,
+};
+export default UI;

package/src/elements/UIChildren.tsx

@@ -1,117 +1,139 @@
-import React, { useState } from "react";
-import UIElement from "./UIElement";
-import { Crud, Scope, ScopeUtils, Utils } from "react-crud-utils";
-
-interface UIChildrenType {
-  scope: Scope;
-  crud?: Crud;
-  validateScope?: String;
-  children?: any;
-  elements?: any;
-  transient?: boolean;
-  part?: string;
-  childProps?: any;
-}
-
-export default function UIChildren(props: UIChildrenType) {
-  let [scope] = useState(Utils.nvl(props.scope, ScopeUtils.create(props)));
-  let crud = Utils.nvl(props.crud, scope.crud);
-  let validateScope = Utils.nvl(props.validateScope, "global");
-  let name = Utils.nvl(props.part, "child");
-
-  if (scope.isInput()) {
-    return <></>;
-  }
-
-  let Paint = ({ child }: any) => {
-    if (!child) {
-      return <></>;
-    }
-    if (typeof child === "string") {
-      return <>{child}</>;
-    }
-
-    let Custom = child.type;
-    let pps = { ...child.props };
-
-    delete pps.children;
-
-    if (typeof Custom === "string") {
-      if (Utils.isEmpty(child.props.children)) {
-        return <Custom {...pps} />;
-      }
-      return (
-        <Custom {...pps}>
-          <UIChildren
-            transient
-            validateScope={validateScope}
-            {...child.props}
-            scope={scope}
-            crud={crud}
-          ></UIChildren>
-        </Custom>
-      );
-    } else if (typeof Custom === "function") {
-      return (
-        <Custom
-          validateScope={validateScope}
-          {...child.props}
-          parent={scope}
-          crud={crud}
-        ></Custom>
-      );
-    }
-
-    if (!Utils.isEmpty(child.props.children)) {
-      return (
-        <UIChildren
-          validateScope={validateScope}
-          {...child.props}
-          scope={scope}
-          crud={crud}
-          transient
-        ></UIChildren>
-      );
-    }
-    return <></>;
-  };
-
-  const Draw = () => {
-    if (props.elements) {
-      return (
-        <>
-          {Object.entries(props.elements).map((t: any, k) => {
-            return <UIElement crud={crud} {...t[1]} />;
-          })}
-        </>
-      );
-    }
-    return (
-      <>
-        {React.Children.map(props.children, (child) => {
-          return <Paint child={child}></Paint>;
-        })}
-      </>
-    );
-  };
-
-  if (props.transient) {
-    return <Draw />;
-  }
-
-  if (Utils.isEmpty(props.children) && Utils.isEmpty(props.elements)) {
-    return <></>;
-  }
-
-  return (
-    <>
-      <div
-        className={scope.getStyleClass(name)}
-        style={scope.getStyle(name)}
-        {...props.childProps}
-      >
-        <Draw />
-      </div>
-    </>
-  );
-}
+import React, { useState } from 'react';
+import UIElement from './UIElement';
+import { Crud, Scope, ScopeUtils, Utils } from 'react-crud-utils';
+import { StyleSheet, View } from 'react-native';
+
+interface UIChildrenType {
+  scope: Scope;
+  crud?: Crud;
+  validateScope?: String;
+  children?: any;
+  elements?: any;
+  transient?: boolean;
+  part?: string;
+  style?: any;
+  childProps?: any;
+}
+
+export default function UIChildren(props: UIChildrenType) {
+  let [scope] = useState(Utils.nvl(props.scope, ScopeUtils.create(props)));
+  let crud = Utils.nvl(props.crud, scope.crud);
+  let validateScope = Utils.nvl(props.validateScope, 'global');
+  let name = Utils.nvl(props.part, 'child');
+
+  if (scope.isInput()) {
+    return <></>;
+  }
+
+  let Paint = ({ child }: any) => {
+    if (!child) {
+      return <></>;
+    }
+    if (typeof child === 'string') {
+      return <>{child}</>;
+    }
+
+    let Custom = child.type;
+    let pps = { ...child.props };
+
+    delete pps.children;
+
+    if (typeof Custom === 'string') {
+      if (Utils.isEmpty(child.props.children)) {
+        return <Custom {...pps} />;
+      }
+      return (
+        <Custom {...pps}>
+          <UIChildren
+            transient
+            validateScope={validateScope}
+            {...child.props}
+            scope={scope}
+            crud={crud}
+          ></UIChildren>
+        </Custom>
+      );
+    } else if (typeof Custom === 'function') {
+      return (
+        <Custom
+          validateScope={validateScope}
+          {...child.props}
+          parent={scope}
+          crud={crud}
+        ></Custom>
+      );
+    }
+
+    if (!Utils.isEmpty(child.props?.children)) {
+      return (
+        <UIChildren
+          validateScope={validateScope}
+          {...child.props}
+          scope={scope}
+          crud={crud}
+          transient
+        ></UIChildren>
+      );
+    }
+    return <></>;
+  };
+
+  const Draw = () => {
+    if (props.elements) {
+      return (
+        <>
+          {Object.entries(props.elements).map((t: any, k) => {
+            return <UIElement crud={crud} {...t[1]} />;
+          })}
+        </>
+      );
+    }
+    return (
+      <>
+        {React.Children.map(props.children, child => {
+          return <Paint child={child}></Paint>;
+        })}
+      </>
+    );
+  };
+
+  if (props.transient) {
+    return <Draw />;
+  }
+
+  if (Utils.isEmpty(props.children) && Utils.isEmpty(props.elements)) {
+    return <></>;
+  }
+
+  const getStyle = (part?: string) => {
+    let key = Utils.nvl(part, 'root');
+    let def = styles[key];
+    let css = {};
+
+    if (!Utils.isEmpty(props.style)) {
+      if (props.style?.push) {
+        Utils.each(props.style, s => {
+          if (s) {
+            css = { ...css, ...s };
+          }
+        });
+      } else {
+        css = { ...props.style };
+      }
+    }
+    return { ...def, ...css, ...scope.getStyle(part) };
+  };
+
+  return (
+    <>
+      <View style={getStyle(name)}>
+        <Draw />
+      </View>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  child: { width: '100%' },
+  inner: { width: '100%' },
+});

package/src/elements/UIComplete.tsx

@@ -1,15 +1,14 @@
-import React from 'react';
-import { ChildType } from 'react-crud-utils';
-import AutoComplete from './core/AutoComplete';
-
-export default function UIComplete({
-  defaultsInput,
-  defaultsUI,
-  scope,
-}: ChildType) {
-  return (
-    <>
-      <AutoComplete {...defaultsInput} {...defaultsUI} />
-    </>
-  );
-}
+import { ChildType } from 'react-crud-utils';
+import AutoComplete from './core/UIAutoComplete';
+
+export default function UIComplete({
+  defaultsInput,
+  defaultsUI,
+  scope,
+}: ChildType) {
+  return (
+    <>
+      <AutoComplete {...defaultsInput} {...defaultsUI} />
+    </>
+  );
+}