react-crud-mobile 1.0.227 → 1.0.228

package/src/elements/UIElement.tsx

@@ -1,435 +1,436 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import UIChildren from './UIChildren';
-import ElTabs from './tabs/ElTabs';
-import ElChart from './charts/ElChart';
-import UIComplete from './UIComplete';
-import {
-  Crud,
-  HtmlUtils,
-  ScopeUtils,
-  Utils,
-  ElementType,
-} from 'react-crud-utils';
-import UILink from './core/UILink';
-import UIIcon from './core/UIIcon';
-import UIButton from './core/UIButton';
-import UISelect from './core/UISelect';
-import UISwitch from './core/UISwitch';
-import UIOption from './core/UIOption';
-import UIRadio from './core/UIRadio';
-import UIInput from './core/UIInput';
-import { Image, Linking, StyleSheet, Text, View } from 'react-native';
-import UIList from './core/UIList';
-
-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: UIList,
-    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 = {
-    scope,
-    crud,
-    onChange: onChange,
-  };
-
-  if (scope.isType('password')) {
-    defaultsInput.type = 'password';
-  }
-
-  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);
-  };
-
-  const getStyle = (part?: string) => {
-    let type = Utils.nvl(original.type, 'none');
-    let key = Utils.nvl(part, 'root');
-    let def = { ...styles[key], ...elementStyle?.[type]?.[key] };
-    let hasChild = hasChildren();
-
-    if (!part && !hasChild) {
-      def = { ...def };
-    }
-
-    if (hasChild && part) {
-      def = { ...def, ...withChildStyles[part] };
-    }
-
-    def = { ...def, ...elementStyle?.[type]?.[key] };
-
-    return { ...def, ...scope.getStyle(part) };
-  };
-
-  let elStyle = getStyle('element');
-
-  let defaultsUI: any = {
-    required: scope.isRequired(),
-    size: 'small',
-    scope,
-    crud,
-    style: elStyle,
-    placeholder: scope.attr('placeholder', 'Digite aqui'),
-  };
-
-  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 <UIIcon>{scope.getIcon()}</UIIcon>;
-    }
-    return <>{original.icon}</>;
-  };
-
-  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?.classList) {
-        let bg = HtmlUtils.getBGColor(el);
-
-        if (bg === 'rgb(255, 255, 255)') {
-          el.classList.add('ui-dark');
-        } else {
-          el.classList.add('ui-light');
-        }
-      }
-    }
-  });
-
-  const isShowLabel = () => {
-    if (typeof original.label !== 'undefined' && !scope.isType('button')) {
-      return true;
-    }
-
-    return false;
-  };
-
-  const isShowInner = () => {
-    if (hasChildren() || hasCustomRoute()) {
-      return false;
-    }
-    return true;
-  };
-
-  return (
-    <>
-      <View ref={ref} style={getStyle()}>
-        <>
-          {isShowLabel() && (
-            <Text style={getStyle('label')}>{scope.getLabel()}</Text>
-          )}
-          {isShowInner() && (
-            <>
-              <View style={getStyle('inner')}>
-                {scope.is('type', 'button') && (
-                  <UIButton
-                    {...defaultsUI}
-                    onClick={onClick}
-                    variant={scope.attr('variant', 'outlined')}
-                  >
-                    {original.icon && <CustomIcon />}
-                    {original.label && (
-                      <Text style={scope.getPart('label', 'button')}>
-                        {scope.getLabel()}
-                      </Text>
-                    )}
-                  </UIButton>
-                )}
-                {scope.is('type', 'icon') && (
-                  <UIIcon
-                    {...defaultsUI}
-                    onClick={onClick}
-                    variant={scope.attr('variant', 'outlined')}
-                  >
-                    {scope.getDisplayValue()}
-                  </UIIcon>
-                )}
-                {scope.is('type', 'link') && (
-                  <UILink
-                    {...defaultsUI}
-                    onClick={onClick}
-                    variant={scope.attr('variant', 'outlined')}
-                  >
-                    {original.icon && <CustomIcon />}
-                    {original.label && (
-                      <Text style={scope.getPart('label', 'link')}>
-                        {scope.getLabel()}
-                      </Text>
-                    )}
-                  </UILink>
-                )}
-                {scope.is(
-                  'type',
-                  'text',
-                  'number',
-                  'phone',
-                  'postalCode',
-                  'money',
-                  'password',
-                  'email'
-                ) && (
-                  <UIInput
-                    {...defaultsInput}
-                    {...defaultsUI}
-                    InputProps={{ ...original.inputProps }}
-                  />
-                )}
-                {scope.is('type', 'complete', 'autocomplete') && (
-                  <UIComplete
-                    scope={scope}
-                    defaultsInput={defaultsInput}
-                    defaultsUI={defaultsUI}
-                  />
-                )}
-                {scope.is('type', 'checkbox', 'boolean', 'switch') && (
-                  <UISwitch
-                    checked={isChecked()}
-                    {...defaultsInput}
-                    onChange={onCheck}
-                  />
-                )}
-                {scope.is('type', 'select') && (
-                  <UISelect
-                    {...defaultsInput}
-                    {...defaultsUI}
-                    value={scope.getSelectedValue()}
-                  >
-                    <UIOption value={''}>Selecione</UIOption>
-                    {options.map((row: any, i: number) => (
-                      <UIOption key={'i' + i} value={row.value}>
-                        {row.label}
-                      </UIOption>
-                    ))}
-                  </UISelect>
-                )}
-                {scope.is('type', 'radio') && (
-                  <UIRadio {...defaultsInput} {...defaultsUI} row>
-                    {options.map((row: any, i: number) => (
-                      <UIOption
-                        key={'i' + i}
-                        control={<UIRadio {...defaultsUI} />}
-                        label={row.label}
-                        value={row.value}
-                      />
-                    ))}
-                  </UIRadio>
-                )}
-                {scope.is('type', 'custom') && <Custom />}
-                {scope.is('type', 'column') && (
-                  <>
-                    {scope.is('format', 'img') && (
-                      <Image source={scope.getDisplayValue()} />
-                    )}
-                    {scope.is('format', 'icon') && (
-                      <UIIcon className={scope.getDisplayValue()} />
-                    )}
-                    {!scope.is('format', 'icon', 'img') && (
-                      <Text>{scope.getDisplayValue()}</Text>
-                    )}
-                  </>
-                )}
-                {scope.is('type', 'output', 'value') && (
-                  <Text>{scope.getDisplayValue()}</Text>
-                )}
-              </View>
-              {error && <View style={getStyle('error')}>{error}</View>}
-            </>
-          )}
-          <CurrentRouter />
-          {!scope.is('type', 'tabs', 'grid', 'list', 'define', 'repeat') && (
-            <UIChildren {...props} scope={scope} crud={crud} />
-          )}
-        </>
-      </View>
-    </>
-  );
-}
-
-const elementStyle: any = {};
-
-elementStyle.card = StyleSheet.create({
-  root: {
-    backgroundColor: 'white',
-    padding: 16,
-    borderRadius: 10,
-    width: '100%',
-    shadowColor: '#888', // iOS
-    shadowOffset: { width: 0, height: 1 }, // iOS
-    shadowOpacity: 0.25, // iOS
-    shadowRadius: 3.84, // iOS
-    elevation: 3, // Android
-  },
-  inner: {
-    flex: 1,
-    width: '100%',
-    paddingBottom: 10,
-    paddingTop: 5,
-    alignSelf: 'flex-start',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-});
-
-elementStyle.list = {
-  ...elementStyle.card,
-};
-
-const styles = StyleSheet.create({
-  root: {
-    gap: 5,
-    flexDirection: 'column',
-    flexWrap: 'wrap',
-    width: '100%',
-    alignItems: 'flex-start',
-  },
-  label: { width: '100%', fontWeight: 500, fontSize: 12 },
-  inner: { width: '100%', paddingBottom: 5, paddingTop: 5 },
-});
-
-const withChildStyles = StyleSheet.create({
-  root: {
-    gap: 10,
-  },
-  label: {
-    width: '100%',
-    fontWeight: 500,
-    fontSize: 24,
-  },
-});
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import UIChildren from './UIChildren';
+import ElTabs from './tabs/ElTabs';
+import ElChart from './charts/ElChart';
+import UIComplete from './UIComplete';
+import {
+  Crud,
+  HtmlUtils,
+  ScopeUtils,
+  Utils,
+  ElementType,
+} from 'react-crud-utils';
+import UILink from './core/UILink';
+import UIIcon from './core/UIIcon';
+import UIButton from './core/UIButton';
+import UISelect from './core/UISelect';
+import UISwitch from './core/UISwitch';
+import UIOption from './core/UIOption';
+import UIRadio from './core/UIRadio';
+import UIInput from './core/UIInput';
+import { Image, Linking, StyleSheet, Text, View } from 'react-native';
+import UIList from './core/UIList';
+import UIToggle from './core/UIToggle';
+
+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: UIList,
+    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 = {
+    scope,
+    crud,
+    onChange: onChange,
+  };
+
+  if (scope.isType('password')) {
+    defaultsInput.type = 'password';
+  }
+
+  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);
+  };
+
+  const getStyle = (part?: string) => {
+    let type = Utils.nvl(original.type, 'none');
+    let key = Utils.nvl(part, 'root');
+    let def = { ...styles[key], ...elementStyle?.[type]?.[key] };
+    let hasChild = hasChildren();
+
+    if (!part && !hasChild) {
+      def = { ...def };
+    }
+
+    if (hasChild && part) {
+      def = { ...def, ...withChildStyles[part] };
+    }
+
+    def = { ...def, ...elementStyle?.[type]?.[key] };
+
+    return { ...def, ...scope.getStyle(part) };
+  };
+
+  let elStyle = getStyle('element');
+
+  let defaultsUI: any = {
+    required: scope.isRequired(),
+    size: 'small',
+    scope,
+    crud,
+    style: elStyle,
+    placeholder: scope.attr('placeholder', 'Digite aqui'),
+  };
+
+  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 <UIIcon>{scope.getIcon()}</UIIcon>;
+    }
+    return <>{original.icon}</>;
+  };
+
+  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?.classList) {
+        let bg = HtmlUtils.getBGColor(el);
+
+        if (bg === 'rgb(255, 255, 255)') {
+          el.classList.add('ui-dark');
+        } else {
+          el.classList.add('ui-light');
+        }
+      }
+    }
+  });
+
+  const isShowLabel = () => {
+    if (typeof original.label !== 'undefined' && !scope.isType('button')) {
+      return true;
+    }
+
+    return false;
+  };
+
+  const isShowInner = () => {
+    if (hasChildren() || hasCustomRoute()) {
+      return false;
+    }
+    return true;
+  };
+
+  return (
+    <>
+      <View ref={ref} style={getStyle()}>
+        <>
+          {isShowLabel() && (
+            <Text style={getStyle('label')}>{scope.getLabel()}</Text>
+          )}
+          {isShowInner() && (
+            <>
+              <View style={getStyle('inner')}>
+                {scope.is('type', 'button') && (
+                  <UIButton
+                    {...defaultsUI}
+                    onClick={onClick}
+                    variant={scope.attr('variant', 'outlined')}
+                  >
+                    {original.icon && <CustomIcon />}
+                    {original.label && (
+                      <Text style={scope.getPart('label', 'button')}>
+                        {scope.getLabel()}
+                      </Text>
+                    )}
+                  </UIButton>
+                )}
+                {scope.is('type', 'icon') && (
+                  <UIIcon
+                    {...defaultsUI}
+                    onClick={onClick}
+                    variant={scope.attr('variant', 'outlined')}
+                  >
+                    {scope.getDisplayValue()}
+                  </UIIcon>
+                )}
+                {scope.is('type', 'link') && (
+                  <UILink
+                    {...defaultsUI}
+                    onClick={onClick}
+                    variant={scope.attr('variant', 'outlined')}
+                  >
+                    {original.icon && <CustomIcon />}
+                    {original.label && (
+                      <Text style={scope.getPart('label', 'link')}>
+                        {scope.getLabel()}
+                      </Text>
+                    )}
+                  </UILink>
+                )}
+                {scope.is(
+                  'type',
+                  'text',
+                  'number',
+                  'phone',
+                  'postalCode',
+                  'money',
+                  'password',
+                  'email'
+                ) && (
+                  <UIInput
+                    {...defaultsInput}
+                    {...defaultsUI}
+                    InputProps={{ ...original.inputProps }}
+                  />
+                )}
+                {scope.is('type', 'complete', 'autocomplete') && (
+                  <UIComplete
+                    scope={scope}
+                    defaultsInput={defaultsInput}
+                    defaultsUI={defaultsUI}
+                  />
+                )}
+                {scope.is('type', 'checkbox', 'boolean', 'switch') && (
+                  <UISwitch
+                    checked={isChecked()}
+                    {...defaultsInput}
+                    onChange={onCheck}
+                  />
+                )}
+                {scope.is('type', 'select') && (
+                  <UISelect
+                    {...defaultsInput}
+                    {...defaultsUI}
+                    value={scope.getSelectedValue()}
+                  />
+                )}
+                {scope.is('type', 'toggle') && (
+                  <UIToggle
+                    {...defaultsInput}
+                    {...defaultsUI}
+                    value={scope.getSelectedValue()}
+                  />
+                )}
+                {scope.is('type', 'radio') && (
+                  <UIRadio {...defaultsInput} {...defaultsUI} row>
+                    {options.map((row: any, i: number) => (
+                      <UIOption
+                        key={'i' + i}
+                        control={<UIRadio {...defaultsUI} />}
+                        label={row.label}
+                        value={row.value}
+                      />
+                    ))}
+                  </UIRadio>
+                )}
+                {scope.is('type', 'custom') && <Custom />}
+                {scope.is('type', 'column') && (
+                  <>
+                    {scope.is('format', 'img') && (
+                      <Image source={scope.getDisplayValue()} />
+                    )}
+                    {scope.is('format', 'icon') && (
+                      <UIIcon className={scope.getDisplayValue()} />
+                    )}
+                    {!scope.is('format', 'icon', 'img') && (
+                      <Text>{scope.getDisplayValue()}</Text>
+                    )}
+                  </>
+                )}
+                {scope.is('type', 'output', 'value') && (
+                  <Text>{scope.getDisplayValue()}</Text>
+                )}
+              </View>
+              {error && <View style={getStyle('error')}>{error}</View>}
+            </>
+          )}
+          <CurrentRouter />
+          {!scope.is('type', 'tabs', 'grid', 'list', 'define', 'repeat') && (
+            <UIChildren {...props} scope={scope} crud={crud} />
+          )}
+        </>
+      </View>
+    </>
+  );
+}
+
+const elementStyle: any = {};
+
+elementStyle.card = StyleSheet.create({
+  root: {
+    backgroundColor: 'white',
+    padding: 16,
+    borderRadius: 10,
+    width: '100%',
+    shadowColor: '#888', // iOS
+    shadowOffset: { width: 0, height: 1 }, // iOS
+    shadowOpacity: 0.25, // iOS
+    shadowRadius: 3.84, // iOS
+    elevation: 3, // Android
+  },
+  inner: {
+    flex: 1,
+    width: '100%',
+    paddingBottom: 10,
+    paddingTop: 5,
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+});
+
+elementStyle.list = {
+  ...elementStyle.card,
+};
+
+const styles = StyleSheet.create({
+  root: {
+    gap: 5,
+    flexDirection: 'column',
+    flexWrap: 'wrap',
+    width: '100%',
+    alignItems: 'flex-start',
+  },
+  label: { width: '100%', fontWeight: 500, fontSize: 12 },
+  inner: { width: '100%', paddingBottom: 5, paddingTop: 5 },
+});
+
+const withChildStyles = StyleSheet.create({
+  root: {
+    gap: 10,
+  },
+  label: {
+    width: '100%',
+    fontWeight: 500,
+    fontSize: 24,
+  },
+});