react-crud-mobile 1.3.1 → 1.3.3

package/src/elements/UIElement.tsx

@@ -1,692 +1,696 @@
-import React, {
-  createContext,
-  useContext,
-  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,
-  MethodType,
-  ActionType,
-  ComponentUtils,
-} 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 UISlider from './core/UISlider';
-import UIOption from './core/UIOption';
-import UIRadio from './core/UIRadio';
-import UIInput from './core/UIInput';
-import {
-  Alert,
-  Image,
-  Linking,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  View,
-} from 'react-native';
-import UIList from './core/UIList';
-import UIToggle from './core/UIToggle';
-import UIQuantity from './core/UIQuantity';
-import UIModal from './core/UIModal';
-import { Ionicons } from '@expo/vector-icons';
-import UIView from './core/UIView';
-import Toast from 'react-native-toast-message';
-
-const CrudContext = createContext<any>({});
-
-export default function UIElement(props: ElementType) {
-  const ctx = useContext(CrudContext);
-  const theme = Utils.nvl(props.theme, ctx?.theme);
-
-  let crud: Crud = Utils.nvl(props.crud, ctx?.crud);
-  let [scope] = useState(ScopeUtils.create({ crud, ...props, theme }));
-  let [index, setIndex] = useState(0);
-  let [error, setError]: string | any = useState(null);
-
-  crud = scope.crud;
-
-  let options: any = scope.getOptions();
-
-  let original = scope.original;
-  let ref = useRef(null);
-
-  scope.update = () => {
-    setIndex(++index);
-  };
-
-  scope.updateElement = () => {
-    setIndex(++index);
-  };
-
-  scope.toast = (message: string, type = 'info', args?: any) => {
-    Toast.show({
-      type, // 'success' | 'error' | 'info'
-      text1: message,
-      position: 'bottom', // 'top' é outra opção
-      visibilityTime: 3000, // tempo que fica visível em ms
-      ...args,
-    });
-  };
-
-  scope.prompt = (args: MethodType) => {
-    let event = args.event as ActionType;
-
-    if (event) {
-      let message = 'Você tem certeza que deseja continuar?';
-      let title = 'Atenção';
-      let prompt = event.prompt;
-
-      if (typeof prompt === 'string') {
-        message = prompt;
-      }
-
-      if (typeof prompt === 'object') {
-        message = Utils.nvl(prompt.message, message);
-        title = Utils.nvl(prompt.title, title);
-      }
-
-      Alert.alert(
-        title,
-        message,
-        [
-          {
-            text: 'Cancelar',
-            style: 'cancel',
-          },
-          {
-            text: 'Confirmar',
-            onPress: () => scope.execute(args),
-          },
-        ],
-        { cancelable: false }
-      );
-    }
-  };
-  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);
-  };
-
-  let isInput = scope.is(
-    'type',
-    'text',
-    'number',
-    'integer',
-    'int',
-    'phone',
-    'postalCode',
-    'money',
-    'password',
-    'email'
-  );
-
-  const getStyle = (part?: string, extra?: any) => {
-    let type = Utils.nvl(original.type, 'none');
-    let key = Utils.nvl(part, 'root');
-    let def = { ...styles[key] };
-    let hasChild = hasChildren();
-
-    type = Utils.nvl(original.layout, type);
-
-    if (!part && !hasChild) {
-      def = { ...def };
-    }
-
-    if (scope.isInput()) {
-      def = { ...def, ...elementStyle.input[key] };
-    }
-
-    def = { ...def, ...elementStyle?.[type]?.[key] };
-
-    if (hasChild && part) {
-      def = { ...def, ...withChildStyles[part] };
-    }
-
-    return { ...def, ...scope.getStyle(part, { ...def, ...extra }) };
-  };
-
-  let elStyle = getStyle('element');
-
-  let defaultsUI: any = {
-    required: scope.isRequired(),
-    size: 'small',
-    scope,
-    crud,
-    style: elStyle,
-    placeholder: scope.attr('placeholder', 'Digite aqui'),
-  };
-
-  scope.error = (msg: string) => {
-    error = msg;
-    setError(msg);
-  };
-
-  if (!original.list?.url && !original.load?.url) {
-    scope.start();
-  }
-
-  useEffect(() => {
-    scope.start();
-  });
-
-  const CustomIcon = () => {
-    if (typeof original.icon === 'string') {
-      return <Ionicons name={original.icon} style={scope.getStyle('icon')} />;
-    }
-    return <>{original.icon}</>;
-  };
-
-  scope.open = (args: any) => {
-    Linking.openURL(args.url);
-  };
-
-  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' &&
-      original.label !== false &&
-      !scope.isType('button', 'dialog', 'modal')
-    ) {
-      return true;
-    }
-
-    return false;
-  };
-
-  const isShowInner = () => {
-    if (hasChildren()) {
-      return false;
-    }
-    return true;
-  };
-
-  if (!scope.isRendered() || scope.is('type', 'define')) {
-    return <></>;
-  }
-
-  const isShowChild = () => {
-    if (
-      scope.isType(
-        'tabs',
-        'view',
-        'grid',
-        'list',
-        'define',
-        'repeat',
-        'modal',
-        'dialog',
-        'chart'
-      )
-    ) {
-      return false;
-    }
-
-    return true;
-  };
-
-  let Tag: any = View;
-  let custom: any = {};
-
-  if (!scope.isType('input', 'grid', 'list', 'repeat') && original.click) {
-    Tag = TouchableHighlight;
-
-    custom.underlayColor = 'transparent';
-    custom.onPress = onClick;
-  }
-
-  let Inner = () => {
-    return (
-      <>
-        {scope.getPart('render', null, <></>)}
-        {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>
-        )}
-        {isInput && (
-          <UIInput
-            {...defaultsInput}
-            {...defaultsUI}
-            InputProps={{ ...original.inputProps }}
-          />
-        )}
-        {scope.is('type', 'complete', 'autocomplete') && (
-          <UIComplete
-            scope={scope}
-            defaultsInput={defaultsInput}
-            defaultsUI={defaultsUI}
-          />
-        )}
-        {scope.is('type', 'quantity') && (
-          <UIQuantity
-            scope={scope}
-            defaultsInput={defaultsInput}
-            defaultsUI={defaultsUI}
-          />
-        )}
-        {scope.is('type', 'checkbox', 'boolean', 'switch') && (
-          <UISwitch
-            checked={isChecked()}
-            {...defaultsInput}
-            onChange={onCheck}
-          />
-        )}
-        {scope.isType('slider') && (
-          <UISlider {...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 scope={scope} crud={crud} />}
-            {!scope.is('format', 'icon', 'img') && (
-              <Text>{scope.getDisplayValue()}</Text>
-            )}
-          </>
-        )}
-        {scope.is('type', 'output', 'value') && (
-          <Text style={getStyle('value')}>{scope.getDisplayValue()}</Text>
-        )}
-      </>
-    );
-  };
-
-  let Include = ({ name, style }: any) => {
-    if (props[name]) {
-      let define = ComponentUtils.getDefine(props, name);
-
-      if (!Utils.isEmpty(define)) {
-        return (
-          <UIChildren
-            {...props}
-            scope={scope}
-            crud={crud}
-            style={getStyle(name, style)}
-          >
-            {define}
-          </UIChildren>
-        );
-      }
-    }
-    return <></>;
-  };
-
-  let Container = () => {
-    return (
-      <>
-        {isShowLabel() && (
-          <View
-            style={getStyle('outerLabel', {
-              alignSelf: 'flex-start',
-              flexDirection: 'row',
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              width: '100%',
-            })}
-          >
-            <Text style={getStyle('label')}>{scope.getLabel()}</Text>
-            <Include name="actions" style={{ width: 'auto' }} />
-          </View>
-        )}
-        {isShowInner() && (
-          <>
-            <View style={getStyle('inner')}>
-              <Inner />
-            </View>
-            {error && <View style={getStyle('error')}>{error}</View>}
-          </>
-        )}
-        {scope.isType('list', 'repeat') && (
-          <UIList {...props} scope={scope} crud={crud} />
-        )}
-        {scope.isType('dialog') && (
-          <UIModal {...props} scope={scope} crud={crud} />
-        )}
-        {scope.isType('chart') && (
-          <ElChart {...props} scope={scope} crud={crud} />
-        )}
-        {scope.isType('tabs') && (
-          <ElTabs {...props} scope={scope} crud={crud} />
-        )}
-
-        {scope.isType('view') && (
-          <UIView {...props} scope={scope} crud={crud} />
-        )}
-
-        {isShowChild() && (
-          <UIChildren
-            {...props}
-            scope={scope}
-            crud={crud}
-            style={getStyle('inner')}
-          />
-        )}
-      </>
-    );
-  };
-
-  let Card = (props: any) => {
-    let isCard = scope.is('type|layout', 'card');
-
-    if (isCard) {
-      let box = {
-        ...getStyle('box', { ...boxStyle.box, alignSelf: 'stretch' }),
-      };
-
-      return (
-        <View style={getStyle('card', { ...box })}>
-          <View
-            style={getStyle('boxInner', {
-              paddingHorizontal: 15,
-              paddingVertical: 10,
-            })}
-          >
-            {props.children}
-          </View>
-        </View>
-      );
-    }
-
-    return <>{props.children}</>;
-  };
-
-  return (
-    <CrudContext.Provider value={{ crud, theme }}>
-      <Tag ref={ref} style={getStyle()} {...custom}>
-        <Card>
-          <Container />
-        </Card>
-      </Tag>
-    </CrudContext.Provider>
-  );
-}
-
-let boxStyle = StyleSheet.create({
-  box: {
-    borderWidth: 0,
-    borderColor: '#dedede',
-    borderStyle: 'solid',
-    backgroundColor: 'white',
-    borderRadius: 12,
-    width: '100%',
-    shadowColor: '#000',
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-  },
-});
-
-const box: any = {
-  ...boxStyle.box,
-};
-//v2
-const elementStyle: any = {};
-
-elementStyle.view = {
-  inner: {
-    width: '100%',
-    alignItems: 'normal',
-    flex: 1,
-  },
-  container: {
-    width: '100%',
-    backgroundColor: 'background',
-    flex: 1,
-    gap: 10,
-  },
-  root: {
-    width: '100%',
-    flex: 1,
-    alignItems: 'normal',
-    padding: 0,
-  },
-};
-
-elementStyle.input = StyleSheet.create({
-  label: {
-    paddingLeft: 0,
-  },
-  inner: {
-    flex: 1,
-    width: '100%',
-    padding: 0,
-    gap: 10,
-    alignSelf: 'flex-start',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-});
-
-elementStyle.switch = {
-  inner: {
-    padding: 5,
-  },
-};
-
-elementStyle.quantity = {
-  inner: {
-    ...box,
-    backgroundColor: 'primarySoft',
-    fontWeight: 600,
-    fontSize: 16,
-    borderRadius: 25,
-    borderWidth: 0,
-    padding: 5,
-    paddingHorizontal: 5,
-    paddingVertical: 5,
-    flexWrap: 'nowrap',
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-};
-
-elementStyle.toggle = StyleSheet.create({
-  inner: {
-    ...box,
-    flex: 1,
-    width: '100%',
-    gap: 10,
-    justifyContent: 'center',
-    flexDirection: 'row',
-    paddingHorizontal: 10,
-    paddingVertical: 0,
-    alignSelf: 'flex-start',
-    flexWrap: 'nowrap',
-  },
-});
-
-const styles = StyleSheet.create({
-  root: {
-    gap: 5,
-    flexDirection: 'column',
-    flexWrap: 'wrap',
-    width: '100%',
-    alignItems: 'flex-start',
-  },
-  label: {
-    fontWeight: 400,
-    marginTop: 5,
-    fontSize: 12,
-    color: 'labelColor',
-  },
-  inner: { width: '100%' },
-});
-
-const withChildStyles = StyleSheet.create({
-  root: {
-    gap: 10,
-  },
-  label: {
-    width: '100%',
-    fontWeight: 500,
-    fontSize: 24,
-  },
-});
+import React, {
+  createContext,
+  useContext,
+  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,
+  MethodType,
+  ActionType,
+  ComponentUtils,
+} 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 UISlider from './core/UISlider';
+import UIOption from './core/UIOption';
+import UIRadio from './core/UIRadio';
+import UIInput from './core/UIInput';
+import {
+  Alert,
+  Image,
+  Linking,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+} from 'react-native';
+import UIList from './core/UIList';
+import UIToggle from './core/UIToggle';
+import UIQuantity from './core/UIQuantity';
+import UIModal from './core/UIModal';
+import { Ionicons } from '@expo/vector-icons';
+import UIView from './core/UIView';
+import Toast from 'react-native-toast-message';
+
+const CrudContext = createContext<any>({});
+
+export default function UIElement(props: ElementType) {
+  const ctx = useContext(CrudContext);
+  const theme = Utils.nvl(props.theme, ctx?.theme);
+
+  let crud: Crud = Utils.nvl(props.crud, ctx?.crud);
+  let [scope] = useState(ScopeUtils.create({ crud, ...props, theme }));
+  let [index, setIndex] = useState(0);
+  let [error, setError]: string | any = useState(null);
+
+  crud = scope.crud;
+
+  let options: any = scope.getOptions();
+
+  let original = scope.original;
+  let ref = useRef(null);
+
+  scope.update = () => {
+    setIndex(++index);
+  };
+
+  scope.updateElement = () => {
+    setIndex(++index);
+  };
+
+  scope.toast = (message: string, type = 'info', args?: any) => {
+    Toast.show({
+      type, // 'success' | 'error' | 'info'
+      text1: message,
+      position: 'bottom', // 'top' é outra opção
+      visibilityTime: 3000, // tempo que fica visível em ms
+      ...args,
+    });
+  };
+
+  scope.prompt = (args: MethodType) => {
+    let event = args.event as ActionType;
+
+    if (event) {
+      let message = 'Você tem certeza que deseja continuar?';
+      let title = 'Atenção';
+      let prompt = event.prompt;
+
+      if (typeof prompt === 'string') {
+        message = prompt;
+      }
+
+      if (typeof prompt === 'object') {
+        message = Utils.nvl(prompt.message, message);
+        title = Utils.nvl(prompt.title, title);
+      }
+
+      Alert.alert(
+        title,
+        message,
+        [
+          {
+            text: 'Cancelar',
+            style: 'cancel',
+          },
+          {
+            text: 'Confirmar',
+            onPress: () => scope.execute(args),
+          },
+        ],
+        { cancelable: false }
+      );
+    }
+  };
+  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);
+  };
+
+  let isInput = scope.is(
+    'type',
+    'text',
+    'number',
+    'integer',
+    'int',
+    'phone',
+    'postalCode',
+    'money',
+    'password',
+    'email'
+  );
+
+  const getStyle = (part?: string, extra?: any) => {
+    let type = Utils.nvl(original.type, 'none');
+    let key = Utils.nvl(part, 'root');
+    let def = { ...styles[key] };
+    let hasChild = hasChildren();
+
+    type = Utils.nvl(original.layout, type);
+
+    if (!part && !hasChild) {
+      def = { ...def };
+    }
+
+    if (scope.isInput()) {
+      def = { ...def, ...elementStyle.input[key] };
+    }
+
+    def = { ...def, ...elementStyle?.[type]?.[key] };
+
+    if (hasChild && part) {
+      def = { ...def, ...withChildStyles[part] };
+    }
+
+    return { ...def, ...scope.getStyle(part, { ...def, ...extra }) };
+  };
+
+  let elStyle = getStyle('element');
+
+  let defaultsUI: any = {
+    required: scope.isRequired(),
+    size: 'small',
+    scope,
+    crud,
+    style: elStyle,
+    placeholder: scope.attr('placeholder', 'Digite aqui'),
+  };
+
+  scope.error = (msg: string) => {
+    error = msg;
+    setError(msg);
+  };
+
+  if (!original.list?.url && !original.load?.url) {
+    scope.start();
+  }
+
+  useEffect(() => {
+    scope.start();
+  });
+
+  const CustomIcon = () => {
+    if (typeof original.icon === 'string') {
+      return <Ionicons name={original.icon} style={scope.getStyle('icon')} />;
+    }
+    return <>{original.icon}</>;
+  };
+
+  scope.open = (args: any) => {
+    Linking.openURL(args.url);
+  };
+
+  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' &&
+      original.label !== false &&
+      !scope.isType('button', 'dialog', 'modal')
+    ) {
+      return true;
+    }
+
+    return false;
+  };
+
+  const isShowInner = () => {
+    if (hasChildren()) {
+      return false;
+    }
+    return true;
+  };
+
+  if (!scope.isRendered() || scope.is('type', 'define')) {
+    return <></>;
+  }
+
+  const isShowChild = () => {
+    if (
+      scope.isType(
+        'tabs',
+        'view',
+        'grid',
+        'list',
+        'define',
+        'repeat',
+        'modal',
+        'dialog',
+        'chart'
+      )
+    ) {
+      return false;
+    }
+
+    return true;
+  };
+
+  let Tag: any = View;
+  let custom: any = {};
+
+  if (!scope.isType('input', 'grid', 'list', 'repeat') && original.click) {
+    Tag = TouchableHighlight;
+
+    custom.underlayColor = 'transparent';
+    custom.onPress = onClick;
+  }
+
+  let Inner = () => {
+    return (
+      <>
+        {scope.getPart('render', null, <></>)}
+        {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>
+        )}
+        {isInput && (
+          <UIInput
+            {...defaultsInput}
+            {...defaultsUI}
+            InputProps={{ ...original.inputProps }}
+          />
+        )}
+        {scope.is('type', 'complete', 'autocomplete') && (
+          <UIComplete
+            scope={scope}
+            defaultsInput={defaultsInput}
+            defaultsUI={defaultsUI}
+          />
+        )}
+        {scope.is('type', 'quantity') && (
+          <UIQuantity
+            scope={scope}
+            defaultsInput={defaultsInput}
+            defaultsUI={defaultsUI}
+          />
+        )}
+        {scope.is('type', 'checkbox', 'boolean', 'switch') && (
+          <UISwitch
+            checked={isChecked()}
+            {...defaultsInput}
+            onChange={onCheck}
+          />
+        )}
+        {scope.isType('slider') && (
+          <UISlider {...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 scope={scope} crud={crud} />}
+            {!scope.is('format', 'icon', 'img') && (
+              <Text>{scope.getDisplayValue()}</Text>
+            )}
+          </>
+        )}
+        {scope.is('type', 'output', 'value') && (
+          <Text style={getStyle('value')}>{scope.getDisplayValue()}</Text>
+        )}
+      </>
+    );
+  };
+
+  let Include = ({ name, style }: any) => {
+    if (props[name]) {
+      let define = ComponentUtils.getDefine(props, name);
+
+      if (!Utils.isEmpty(define)) {
+        return (
+          <UIChildren
+            {...props}
+            scope={scope}
+            crud={crud}
+            style={getStyle(name, style)}
+          >
+            {define}
+          </UIChildren>
+        );
+      }
+    }
+    return <></>;
+  };
+
+  let Container = () => {
+    return (
+      <>
+        {isShowLabel() && (
+          <View
+            style={getStyle('outerLabel', {
+              alignSelf: 'flex-start',
+              flexDirection: 'row',
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              width: '100%',
+            })}
+          >
+            <Text style={getStyle('label')}>{scope.getLabel()}</Text>
+            <Include name="actions" style={{ width: 'auto' }} />
+          </View>
+        )}
+        {isShowInner() && (
+          <>
+            <View style={getStyle('inner')}>
+              <Inner />
+            </View>
+            {error && <View style={getStyle('error')}>{error}</View>}
+          </>
+        )}
+        {scope.isType('list', 'repeat') && (
+          <UIList {...props} scope={scope} crud={crud} />
+        )}
+        {scope.isType('dialog') && (
+          <UIModal {...props} scope={scope} crud={crud} />
+        )}
+        {scope.isType('chart') && (
+          <ElChart {...props} scope={scope} crud={crud} />
+        )}
+        {scope.isType('tabs') && (
+          <ElTabs {...props} scope={scope} crud={crud} />
+        )}
+
+        {scope.isType('view') && (
+          <UIView {...props} scope={scope} crud={crud} />
+        )}
+
+        {isShowChild() && (
+          <UIChildren
+            {...props}
+            scope={scope}
+            crud={crud}
+            style={getStyle('inner')}
+          />
+        )}
+      </>
+    );
+  };
+
+  let Card = (props: any) => {
+    let isCard = scope.is('type|layout', 'card');
+
+    if (isCard) {
+      let box = {
+        ...getStyle('box', { ...boxStyle.box, alignSelf: 'stretch' }),
+      };
+
+      return (
+        <View style={getStyle('card', { ...box })}>
+          <View
+            style={getStyle('boxInner', {
+              paddingHorizontal: 15,
+              paddingVertical: 10,
+            })}
+          >
+            {props.children}
+          </View>
+        </View>
+      );
+    }
+
+    return (
+      <View style={getStyle('container', { padding: 2, width: '100%' })}>
+        {props.children}
+      </View>
+    );
+  };
+
+  return (
+    <CrudContext.Provider value={{ crud, theme }}>
+      <Tag ref={ref} style={getStyle()} {...custom}>
+        <Card>
+          <Container />
+        </Card>
+      </Tag>
+    </CrudContext.Provider>
+  );
+}
+
+let boxStyle = StyleSheet.create({
+  box: {
+    borderWidth: 0,
+    borderColor: '#dedede',
+    borderStyle: 'solid',
+    backgroundColor: 'white',
+    borderRadius: 12,
+    width: '100%',
+    shadowColor: '#000',
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+  },
+});
+
+const box: any = {
+  ...boxStyle.box,
+};
+//v2
+const elementStyle: any = {};
+
+elementStyle.view = {
+  inner: {
+    width: '100%',
+    alignItems: 'normal',
+    flex: 1,
+  },
+  container: {
+    width: '100%',
+    backgroundColor: 'background',
+    flex: 1,
+    gap: 10,
+  },
+  root: {
+    width: '100%',
+    flex: 1,
+    alignItems: 'normal',
+    padding: 0,
+  },
+};
+
+elementStyle.input = StyleSheet.create({
+  label: {
+    paddingLeft: 0,
+  },
+  inner: {
+    flex: 1,
+    width: '100%',
+    padding: 0,
+    gap: 10,
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+});
+
+elementStyle.switch = {
+  inner: {
+    padding: 5,
+  },
+};
+
+elementStyle.quantity = {
+  inner: {
+    ...box,
+    backgroundColor: 'primarySoft',
+    fontWeight: 600,
+    fontSize: 16,
+    borderRadius: 25,
+    borderWidth: 0,
+    padding: 5,
+    paddingHorizontal: 5,
+    paddingVertical: 5,
+    flexWrap: 'nowrap',
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+};
+
+elementStyle.toggle = StyleSheet.create({
+  inner: {
+    ...box,
+    flex: 1,
+    width: '100%',
+    gap: 10,
+    justifyContent: 'center',
+    flexDirection: 'row',
+    paddingHorizontal: 10,
+    paddingVertical: 0,
+    alignSelf: 'flex-start',
+    flexWrap: 'nowrap',
+  },
+});
+
+const styles = StyleSheet.create({
+  root: {
+    gap: 5,
+    flexDirection: 'column',
+    flexWrap: 'wrap',
+    width: '100%',
+    alignItems: 'flex-start',
+  },
+  label: {
+    fontWeight: 400,
+    marginTop: 5,
+    fontSize: 12,
+    color: 'labelColor',
+  },
+  inner: { width: '100%' },
+});
+
+const withChildStyles = StyleSheet.create({
+  root: {
+    gap: 10,
+  },
+  label: {
+    width: '100%',
+    fontWeight: 500,
+    fontSize: 24,
+  },
+});