react-crud-mobile 0.1.7

package/src/elements/grid/ElGridCheck.tsx

@@ -0,0 +1,67 @@
+import UI from '../UI';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { useState } from 'react';
+import { GridRowType, Utils } from 'react-crud-utils';
+
+export default function ElGridCheck({ scope, value, rowIndex }: GridRowType) {
+  let original = scope.original;
+  let [index, setIndex] = useState(0);
+  let key = scope.key('check', rowIndex, 's', index);
+
+  let check = () => {
+    let cs = scope.crudSearch;
+
+    if (cs) {
+      if (!cs.selecteds) {
+        cs.selecteds = {};
+      }
+
+      let itemValue = Utils.nvl(original.itemValue, 'id');
+      let key = value[itemValue];
+
+      if (typeof key !== 'undefined') {
+        if (typeof cs.selecteds[key] === 'undefined') {
+          cs.selecteds[key] = value;
+        } else {
+          delete cs.selecteds[key];
+        }
+      }
+    }
+    setIndex(++index);
+  };
+
+  let getCheckIcon = () => {
+    if (isChecked()) {
+      return <Ionicons />;
+    }
+    return <Ionicons />;
+  };
+
+  let isChecked = () => {
+    let cs = scope.crudSearch;
+
+    if (cs) {
+      if (!cs.selecteds) {
+        cs.selecteds = {};
+      }
+
+      let itemValue = Utils.nvl(original.itemValue, 'id');
+      let key = value[itemValue];
+
+      if (typeof key !== 'undefined') {
+        if (typeof cs.selecteds[key] !== 'undefined') {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+
+  return (
+    <UI.Button
+      key={key}
+      icon={getCheckIcon()}
+      click={{ action: check }}
+    ></UI.Button>
+  );
+}

package/src/elements/grid/ElGridColumn.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import UIChildren from "../UIChildren";
+import { Scope, Utils } from "react-crud-utils";
+
+interface ElGridColumnType {
+  scope: Scope;
+  styleClass?: string;
+  children?: any;
+  colspan?: number;
+  column?: any;
+}
+
+export default function ElGridColumn(props: ElGridColumnType) {
+  let scope = props.scope;
+  let col = Utils.nvl(props.column?.props, {});
+  let [colScope] = useState(new Scope(col, scope, scope.crud));
+
+  let getStyleClass = () => {
+    let def = Utils.nvl(props.styleClass, "");
+
+    return "ui-grid-col " + def + " " + colScope.getStyleClass("column");
+  };
+  return (
+    <td
+      className={getStyleClass()}
+      style={colScope.getStyle("column")}
+      colSpan={props.colspan}
+    >
+      <UIChildren scope={scope}>{props.children}</UIChildren>
+    </td>
+  );
+}

package/src/elements/grid/ElGridFilter.tsx

@@ -0,0 +1,5 @@
+import { ChildType } from "react-crud-utils";
+
+export default function ElGridFilter(props: ChildType) {
+  return <></>;
+}

package/src/elements/grid/ElGridPaginator.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import UI from '../UI';
+import { ChildType, Utils } from 'react-crud-utils';
+import Ionicons from '@expo/vector-icons/Ionicons';
+
+interface ElGridPaginatorType extends ChildType {
+  next?: boolean;
+  previous?: boolean;
+  first?: boolean;
+  size?: boolean;
+  last?: boolean;
+  position: string;
+}
+
+export default function ElGridPaginator({
+  scope,
+  next,
+  previous,
+  first,
+  size,
+  last,
+  position,
+}: ElGridPaginatorType) {
+  let [sizes] = useState([10, 20, 30, 50, 100, 200, 500]);
+  let defaults = {
+    crud: scope.crudSearch,
+    owner: scope,
+    variant: scope.attr('variant', 'text'),
+  };
+
+  let paginatorPosition = Utils.nvl(scope.original.paginatorPosition, 'bottom');
+
+  if (paginatorPosition !== position) {
+    return <></>;
+  }
+
+  return (
+    <>
+      <UI.Button
+        field="first"
+        space={0}
+        rendered={first !== false}
+        {...defaults}
+        click="first"
+        icon={<Ionicons />}
+      ></UI.Button>
+      <UI.Button
+        field="previous"
+        space={0}
+        rendered={previous !== false}
+        click="previous"
+        {...defaults}
+        icon={<Ionicons />}
+      ></UI.Button>
+      <UI.Select
+        field="size"
+        space={0}
+        rendered={size !== false}
+        default={10}
+        {...defaults}
+        data={sizes}
+        change="search"
+      ></UI.Select>
+      <UI.Button
+        field="next"
+        space={0}
+        rendered={next !== false}
+        {...defaults}
+        click="next"
+        icon={<Ionicons />}
+      ></UI.Button>
+      <UI.Button
+        field="last"
+        space={0}
+        rendered={last !== false}
+        {...defaults}
+        click="last"
+        icon={<Ionicons />}
+      ></UI.Button>
+    </>
+  );
+}

package/src/elements/grid/ElGridRow.tsx

@@ -0,0 +1,123 @@
+import React, { useState } from 'react';
+import ElGridColumn from './ElGridColumn';
+import ElGridCheck from './ElGridCheck';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import UI from '../UI';
+import UIChildren from '../UIChildren';
+import {
+  ComponentUtils,
+  CrudUtils,
+  ListType,
+  RowType,
+  Scope,
+  Utils,
+} from 'react-crud-utils';
+
+export default function ElGridRow(props: RowType) {
+  let expansion = props.expansion;
+  let value = props.value;
+  let scope = props.scope;
+  let index = props.index;
+  let original: ListType = scope.original;
+
+  let row = CrudUtils.create('row', {
+    index,
+    row: true,
+    itemVar: scope.original.itemVar,
+    parent: scope.crudSearch,
+    data: value,
+  });
+
+  let [expanded, setExpanded] = useState(false);
+  let [rowScope] = useState(new Scope(scope.original, scope, row));
+
+  let getRowStyleClass = () => {
+    let s = 'ui-grid-row';
+
+    s = s + ' ui-grid-row-';
+
+    if (index % 2 == 0) {
+      s = s + 'even';
+    } else {
+      s = s + 'odd';
+    }
+    return s;
+  };
+
+  let cols = ComponentUtils.getChild(props, 'Column');
+  let colspan = cols.length;
+
+  let ExpansionStatus = () => {
+    return (
+      <>
+        {!expanded && <Ionicons />}
+        {expanded && <Ionicons />}
+      </>
+    );
+  };
+
+  let onExpansion = () => {
+    setExpanded(!expanded);
+  };
+
+  let hasExpansion = !Utils.isEmpty(expansion);
+  let multiple = original.multiple;
+
+  if (hasExpansion) colspan++;
+  if (multiple) colspan++;
+
+  return (
+    <>
+      <tr className={getRowStyleClass()} style={rowScope.getStyle('row')}>
+        {hasExpansion && (
+          <ElGridColumn
+            key={'r' + index + 'e'}
+            scope={rowScope}
+            styleClass="ui-click ui-icon-only ui-expansion"
+          >
+            <UI.Button
+              icon={<ExpansionStatus />}
+              click={onExpansion}
+            ></UI.Button>
+          </ElGridColumn>
+        )}
+        {multiple && (
+          <ElGridColumn
+            key={'r' + index + 'c'}
+            scope={rowScope}
+            styleClass="ui-click ui-icon-only ui-multiple"
+          >
+            <ElGridCheck
+              key={'check-' + index}
+              scope={scope}
+              value={value}
+              rowIndex={index}
+            />
+          </ElGridColumn>
+        )}
+        {cols.map((col: any, i: number) => (
+          <ElGridColumn
+            column={col}
+            key={'r' + index + 'c' + i}
+            scope={rowScope}
+          >
+            {col}
+          </ElGridColumn>
+        ))}
+      </tr>
+      {expanded && (
+        <tr className={getRowStyleClass()} style={rowScope.getStyle('row')}>
+          <ElGridColumn
+            key={'r' + index + '-expanded'}
+            scope={rowScope}
+            colspan={colspan}
+          >
+            <UIChildren {...props} crud={row}>
+              {expansion}
+            </UIChildren>
+          </ElGridColumn>
+        </tr>
+      )}
+    </>
+  );
+}

package/src/elements/grid/ElGridTop.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import UI from '../UI';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import ElGridPaginator from './ElGridPaginator';
+import { ChildType } from 'react-crud-utils';
+
+export default function ElGridTop(props: ChildType) {
+  let scope = props.scope;
+
+  return (
+    <>
+      <UI.Output styleClass="ui-grid-top">
+        <UI.Output field="search" position="left" space={4}>
+          <UI.Include {...props} transient name="top" position="left" />
+          <UI.Text
+            field="query"
+            space={0}
+            label="Pesquisar"
+            placeholder={scope.attr('placeholder', 'Pesquisar')}
+          >
+            <UI.Define name="right">
+              <UI.Button
+                field="search"
+                icon={<Ionicons />}
+                space={0}
+                variant="text"
+                owner={scope}
+                click={'search'}
+              ></UI.Button>
+            </UI.Define>
+          </UI.Text>
+        </UI.Output>
+        <UI.Output position="right" space={8}>
+          <UI.Include {...props} transient name="top" position="right" />
+          <ElGridPaginator
+            scope={scope}
+            last={false}
+            first={false}
+            position="top"
+          ></ElGridPaginator>
+        </UI.Output>
+      </UI.Output>
+    </>
+  );
+}

package/src/elements/grid/ElInclude.tsx

@@ -0,0 +1,40 @@
+import UIChildren from "../UIChildren";
+import { ComponentUtils, DefineType, Utils } from "react-crud-utils";
+
+export default function ElInclude(props: DefineType) {
+  if (props.rendered === false) {
+    return <></>;
+  }
+
+  let includes = ComponentUtils.getDefine(props, props.name, props.position);
+
+  if (Utils.isEmpty(includes)) {
+    includes = props.default;
+  }
+
+  if (!Utils.isEmpty(includes)) {
+    let Aux = (tagProp: any) => {
+      let Tag: any = props.tag;
+
+      if (!Utils.isEmpty(Tag)) {
+        return <Tag {...tagProp}>{tagProp.children}</Tag>;
+      }
+      return <>{tagProp.children}</>;
+    };
+
+    return (
+      <Aux {...props.tagProps}>
+        <UIChildren
+          transient
+          {...props}
+          scope={props.scope}
+          crud={props.crud}
+          part={props.name}
+        >
+          {includes}
+        </UIChildren>
+      </Aux>
+    );
+  }
+  return <>{includes}</>;
+}

package/src/elements/grid/ElLabel.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import UI from '../UI';
+import { ChildType, Utils } from 'react-crud-utils';
+import Icon from '../core/Icon';
+
+interface ElLabelType extends ChildType {
+  position?: string;
+}
+export default function ElLabel(props: ElLabelType) {
+  let scope = props.scope;
+  let original = scope.original;
+  let defaultPos = 'outside';
+
+  let elPos = Utils.nvl(original.labelPos, defaultPos);
+  let lbPos = Utils.nvl(props.position, defaultPos);
+
+  if (elPos != lbPos) {
+    return <></>;
+  }
+
+  const CustomIcon = () => {
+    if (!scope.is('type', 'list', 'grid')) {
+      return <></>;
+    }
+
+    if (typeof original.icon === 'string') {
+      return (
+        <div className="ui-label-icon">
+          <Icon className={scope.getIcon()}></Icon>
+        </div>
+      );
+    }
+    return <div className="ui-label-icon">{original.icon}</div>;
+  };
+
+  let label = scope.getLabel();
+
+  return (
+    <div className={'ui-label ui-label-' + lbPos}>
+      <div className="ui-label-left">
+        <UI.Include {...props} transient name="label" position="left" />
+        <CustomIcon />
+        {label && <div className="ui-label-value">{label}</div>}
+      </div>
+      <div className="ui-label-right">
+        <UI.Include {...props} transient name="label" position="right" />
+      </div>
+    </div>
+  );
+}

package/src/elements/grid/ElRepeat.tsx

@@ -0,0 +1,24 @@
+import ElRepeatRow from './ElRepeatRow';
+import { ChildType, Scope } from 'react-crud-utils';
+
+export default function ElRepeat(props: ChildType) {
+  let scope: Scope = props.scope;
+  let items: any = scope.getItems();
+
+  return (
+    <div
+      className={scope.getStyleClass('inner')}
+      style={scope.getStyle('inner')}
+    >
+      {items.map((row: any, i: number) => (
+        <ElRepeatRow
+          {...props}
+          key={'r' + i}
+          scope={scope}
+          value={row}
+          index={i}
+        />
+      ))}
+    </div>
+  );
+}

package/src/elements/grid/ElRepeatRow.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import UIChildren from "../UIChildren";
+import { CrudUtils, RowType, Scope } from "react-crud-utils";
+
+export default function ElRepeatRow(props: RowType) {
+  let value = props.value;
+  let scope = props.scope;
+  let index = props.index;
+
+  let row = CrudUtils.create("row", {
+    index,
+    row: true,
+    itemVar: scope.original.itemVar,
+    parent: scope.crudSearch,
+    data: value,
+  });
+
+  let [rowScope] = useState(new Scope(scope.original, scope, row));
+
+  let getRowStyleClass = () => {
+    let s = rowScope.getStyleClass("row");
+
+    s = s + " ui-repeat-row-";
+
+    if (index % 2 == 0) {
+      s = s + "even";
+    } else {
+      s = s + "odd";
+    }
+    return s;
+  };
+
+  return (
+    <div className={getRowStyleClass()} style={rowScope.getStyle("row")}>
+      <UIChildren transient {...props} crud={row}>
+        {props.children}
+      </UIChildren>
+    </div>
+  );
+}

package/src/elements/index.ts

@@ -0,0 +1 @@
+export { default as UI } from "./UI";

package/src/elements/tabs/ElTabs.tsx

@@ -0,0 +1,178 @@
+import React, { useState, useEffect } from 'react';
+import UIChildren from '../UIChildren';
+import UI from '../UI';
+
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { ChildType, CrudUtils, Utils } from 'react-crud-utils';
+
+export default function ElTabs(props: ChildType) {
+  let scope = props.scope;
+  let [selectedIndex, setSelectedIndex]: any = useState(0);
+  let element = scope.original;
+  let items = scope.getItems();
+  let counter = 0;
+
+  let tabs: any = [];
+  let [selected, setSelected]: any = useState(null);
+
+  const onChangeTab = (tab: any, validate = true) => {
+    if (tab) {
+      scope.execute({
+        event: {
+          validate,
+          validateScope: element.validateScope,
+          action: () => {
+            scope.changeValue(tab.data);
+
+            selected = tab;
+            selectedIndex = tab.index;
+
+            setSelectedIndex(selectedIndex);
+            setSelected(tab);
+          },
+        },
+      });
+    }
+  };
+
+  const getStyleClass = (t: any) => {
+    let s = 'ui-tabs-item ui-click';
+
+    if (selected?.index === t.index) {
+      s = s + ' ui-tab-selected';
+    }
+    return s;
+  };
+
+  const addTab = (child: any, item: any) => {
+    let original = { ...child.props };
+
+    if (!item) {
+      item = scope.crud.data;
+    }
+
+    let crudTab = CrudUtils.create('tabs', {
+      data: item,
+      changed: item,
+      parent: scope.crud,
+    });
+
+    let element = Utils.resolve(original, crudTab);
+
+    if (element.rendered === false) {
+      return;
+    }
+
+    tabs.push({
+      ...element,
+      child,
+      element,
+      original,
+      index: counter++,
+      data: item,
+    });
+  };
+
+  React.Children.map(props.children, (child, index) => {
+    if (Utils.isEmpty(items)) {
+      addTab(child, {});
+    } else {
+      for (const i in items) {
+        let o = items[i];
+
+        addTab(child, o);
+      }
+    }
+  });
+
+  if (!selected) {
+    onChangeTab(tabs[selectedIndex], false);
+  }
+
+  const nav = (i: any) => {
+    let t = tabs[selectedIndex + i];
+
+    onChangeTab(t);
+  };
+
+  const previous = () => {
+    nav(-1);
+  };
+
+  const next = () => {
+    nav(1);
+  };
+
+  let isStepper = element.layout === 'stepper';
+
+  return (
+    <div
+      className={scope.getStyleClass('inner')}
+      style={scope.getStyle('inner')}
+    >
+      <div className="ui-tabs-content">
+        <div className="ui-tabs-items">
+          {tabs.map((t: any, i: number) => (
+            <div
+              key={Utils.key(element.id, 'tab', i)}
+              className={getStyleClass(t)}
+              onClick={() => {
+                onChangeTab(t);
+              }}
+            >
+              {isStepper && <div className="ui-tab-item-divisor" />}
+              <div className="ui-tab-item-inner">
+                {isStepper && <div className="ui-step-line" />}
+                <div className="ui-tab-item-label">
+                  {isStepper ? t.index + 1 : t.label}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+        {selected && (
+          <>
+            {isStepper && <div className="ui-tabs-label">{selected.label}</div>}
+            <div className="ui-tabs-area">
+              <UIChildren {...props} scope={scope}>
+                {selected.child}
+              </UIChildren>
+            </div>
+            {element.layout === 'stepper' && (
+              <div className="ui-tabs-actions">
+                <UI.Output space={6} layout="left">
+                  <UI.Include
+                    {...props}
+                    transient
+                    name="left"
+                    default={
+                      <UI.Button
+                        rendered={selectedIndex > 0}
+                        icon={<Ionicons />}
+                        click={previous}
+                      />
+                    }
+                  />
+                </UI.Output>
+                <UI.Output space={6} layout="right">
+                  <UI.Include
+                    {...props}
+                    transient
+                    name="right"
+                    default={
+                      <UI.Button
+                        rendered={selectedIndex < tabs.length - 1}
+                        icon={<Ionicons />}
+                        click={next}
+                      />
+                    }
+                  />
+                </UI.Output>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./elements";