react-crud-mobile 1.1.3 → 1.3.2

package/src/elements/UIElement.tsx

@@ -1,62 +1,121 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import ElGrid from './grid/ElGrid';
-import ElCard from './card/ElCard';
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 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,
+  MethodType,
+  ActionType,
+  ComponentUtils,
 } 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';
+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) {
-  let [scope] = useState(ScopeUtils.create(props));
+  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 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,
+  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,
+    });
   };
 
-  let CurrentRouter = () => {
-    if (router[type]) {
-      let Aux = router[type];
+  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;
 
-      return <Aux crud={crud} {...props} scope={scope} />;
+      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 }
+      );
     }
-    return <></>;
   };
-
   const Custom = () => {
     let c: any = original.custom;
 
@@ -116,8 +175,8 @@ export default function UIElement(props: ElementType) {
   };
 
   let defaultsInput: any = {
-    label: scope.getLabel(),
-    value: scope.getValue(),
+    scope,
+    crud,
     onChange: onChange,
   };
 
@@ -125,15 +184,6 @@ export default function UIElement(props: ElementType) {
     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();
 
@@ -148,76 +198,84 @@ export default function UIElement(props: ElementType) {
     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);
-  };
+  let isInput = scope.is(
+    'type',
+    'text',
+    'number',
+    'integer',
+    'int',
+    'phone',
+    'postalCode',
+    'money',
+    'password',
+    'email'
+  );
 
-  useEffect(() => {
-    if (!scope.ready) {
-      scope.ready = true;
+  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();
 
-      scope.call('load');
+    type = Utils.nvl(original.layout, type);
 
-      if (scope.isType('list', 'repeat')) {
-        scope.search();
-      } else if (original.list) {
-        scope.call('list');
-      }
-      scope.start();
+    if (!part && !hasChild) {
+      def = { ...def };
     }
-  });
 
-  const CustomIcon = () => {
-    if (typeof original.icon === 'string') {
-      return <Icon>{scope.getIcon()}</Icon>;
+    if (scope.isInput()) {
+      def = { ...def, ...elementStyle.input[key] };
     }
-    return <>{original.icon}</>;
-  };
 
-  const getLabelClass = (type: string) => {
-    let clss = `ui-text ui-${type}-text`;
-    let icon = scope.getIcon();
+    def = { ...def, ...elementStyle?.[type]?.[key] };
 
-    if (icon) {
-      clss = clss + ` ui-icon ui-${type}-icon`;
+    if (hasChild && part) {
+      def = { ...def, ...withChildStyles[part] };
     }
-    return clss;
-  };
 
-  let hasCustomRoute = () => {
-    if (router[type]) return true;
-    return false;
+    return { ...def, ...scope.getStyle(part, { ...def, ...extra }) };
   };
 
-  scope.open = (args: any) => {
-    Linking.openURL(args.url);
+  let elStyle = getStyle('element');
+
+  let defaultsUI: any = {
+    required: scope.isRequired(),
+    size: 'small',
+    scope,
+    crud,
+    style: elStyle,
+    placeholder: scope.attr('placeholder', 'Digite aqui'),
   };
 
-  if (scope.isType('dialog')) {
-    let name = original.name;
+  scope.error = (msg: string) => {
+    error = msg;
+    setError(msg);
+  };
 
-    if (!crud.dialogs[name]) {
-      let dlg: any = { config: { ...original } };
+  if (!original.list?.url && !original.load?.url) {
+    scope.start();
+  }
 
-      dlg.component = (args: any) => {
-        return <UIChildren {...props} scope={scope} crud={crud} />;
-      };
+  useEffect(() => {
+    scope.start();
+  });
 
-      crud.dialogs[name] = dlg;
+  const CustomIcon = () => {
+    if (typeof original.icon === 'string') {
+      return <Ionicons name={original.icon} style={scope.getStyle('icon')} />;
     }
-    return <></>;
-  }
+    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) {
+      if (el?.classList) {
         let bg = HtmlUtils.getBGColor(el);
 
         if (bg === 'rgb(255, 255, 255)') {
@@ -229,151 +287,410 @@ export default function UIElement(props: ElementType) {
     }
   });
 
+  const isShowLabel = () => {
+    if (
+      typeof original.label !== 'undefined' &&
+      original.label !== false &&
+      !scope.isType('button', 'dialog', 'modal')
+    ) {
+      return true;
+    }
+
+    return false;
+  };
+
   const isShowInner = () => {
-    if (hasChildren() || hasCustomRoute()) {
+    if (hasChildren()) {
       return false;
     }
     return true;
   };
 
-  return (
-    <>
-      <div
-        className={'ui-el ' + scope.getStyleClass()}
-        ref={ref}
-        style={scope.getStyle()}
-      >
+  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() && (
           <>
-            <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>}
+            <View style={getStyle('inner')}>
+              <Inner />
+            </View>
+            {error && <View style={getStyle('error')}>{error}</View>}
           </>
         )}
-        <CurrentRouter />
-        {!scope.is(
-          'type',
-          'card',
-          'tabs',
-          'grid',
-          'list',
-          'define',
-          'repeat'
-        ) && <UIChildren {...props} scope={scope} crud={crud} />}
-      </div>
-    </>
+        {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 })}>
+        {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,
+  },
+});