@controleonline/ui-default 1.0.263 → 1.0.264

package/src/react/components/form/DefaultForm.js

@@ -1,198 +1,200 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
-import { formatStoreColumnLabel } from '@controleonline/ui-common/src/react/utils/storeColumns';
-import DefaultInput from '../inputs/DefaultInput';
-import {
-  formatSaveValue,
-  getColumnKey,
-  isEditableColumn,
-  normalizeId,
-  normalizeText,
-  resolveEditValue,
-} from '../inputs/defaultInputUtils';
-import styles from './DefaultForm.styles';
-
-const hasValue = value => {
-  if (value === null || value === undefined) return false;
-  if (typeof value === 'boolean' || typeof value === 'number') return true;
-  if (typeof value === 'object') {
-    return normalizeText(value.value ?? value.id ?? value['@id'] ?? '') !== '';
-  }
-
-  return normalizeText(value) !== '';
-};
-
-const resolveDefaultValue = (column, row) => {
-  const fieldName = getColumnKey(column);
-  if (row && row[fieldName] !== undefined) return row[fieldName];
-  if (typeof column?.defaultValue === 'function') return column.defaultValue(row, column);
-  if (column?.defaultValue !== undefined) return column.defaultValue;
-  if (typeof column?.initialValue === 'function') return column.initialValue(row, column);
-  if (column?.initialValue !== undefined) return column.initialValue;
-  return undefined;
-};
-
-const shouldIncludeColumn = (column, row, mode) => {
-  const fieldName = getColumnKey(column);
-  if (!fieldName || column?.isIdentity === true) return false;
-  if (column?.form === false || column?.multiline === true) return false;
-  if (mode === 'create' && column?.add === false) return false;
-  if (mode !== 'create' && !isEditableColumn(column)) return false;
-  if (typeof column?.visibleForm === 'function') {
-    return column.visibleForm(row, column) !== false;
-  }
-
-  return column?.visibleForm !== false;
-};
-
-const buildDraft = (columns, row) =>
-  columns.reduce((draft, column) => {
-    const fieldName = getColumnKey(column);
-    const defaultValue = resolveDefaultValue(column, row);
-    draft[fieldName] = resolveEditValue(column, row, defaultValue);
-    return draft;
-  }, {});
-
-const DefaultForm = ({
-  accentColor = '#2563EB',
-  actions = {},
-  columns = [],
-  getOptionsForColumn = null,
-  mode = 'edit',
-  onCancel = null,
-  onSaved = null,
-  row = {},
-  storeName = '',
-}) => {
-  const formColumns = useMemo(
-    () => columns.filter(column => shouldIncludeColumn(column, row, mode)),
-    [columns, mode, row],
-  );
-  const [draft, setDraft] = useState(() => buildDraft(formColumns, row));
-  const [isSaving, setIsSaving] = useState(false);
-
-  useEffect(() => {
-    setDraft(buildDraft(formColumns, row));
-  }, [formColumns, row]);
-
-  const save = useCallback(() => {
-    if (typeof actions.save !== 'function') {
-      onCancel?.();
-      return Promise.resolve(null);
-    }
-
-    const isCreate = mode === 'create';
-    const payload = isCreate
-      ? {}
-      : { id: normalizeId(row?.['@id'] || row?.id) };
-
-    formColumns.forEach(column => {
-      const fieldName = getColumnKey(column);
-      const nextValue = draft[fieldName];
-
-      if (isCreate) {
-        if (hasValue(nextValue)) {
-          payload[fieldName] = formatSaveValue(column, nextValue, row);
-        }
-        return;
-      }
-
-      const currentValue = resolveEditValue(column, row);
-      if (normalizeText(currentValue) !== normalizeText(nextValue)) {
-        payload[fieldName] = formatSaveValue(column, nextValue, row);
-      }
-    });
-
-    const payloadKeys = Object.keys(payload);
-    if ((isCreate && payloadKeys.length === 0) || (!isCreate && payloadKeys.length <= 1)) {
-      onCancel?.();
-      return Promise.resolve(null);
-    }
-
-    setIsSaving(true);
-
-    return actions.save(payload)
-      .then(savedItem => {
-        onSaved?.(savedItem || { ...row, ...draft }, row);
-        return savedItem;
-      })
-      .catch(error => {
-        console.error(error);
-        return null;
-      })
-      .finally(() => {
-        setIsSaving(false);
-      });
-  }, [actions, draft, formColumns, mode, onCancel, onSaved, row]);
-
-  return (
-    <>
-      <ScrollView style={styles.body} keyboardShouldPersistTaps="handled">
-        {formColumns.length > 0 ? (
-          <View style={styles.formGrid}>
-            {formColumns.map(column => {
-              const fieldName = getColumnKey(column);
-              const label = formatStoreColumnLabel({
-                columns,
-                fieldName,
-                fallbackLabel: column?.label || fieldName,
-                storeName,
-              });
-
-              return (
-                <View key={fieldName} style={styles.formField}>
-                  <DefaultInput
-                    accentColor={accentColor}
-                    autoFocus={false}
-                    autoSave={false}
-                    column={column}
-                    columns={columns}
-                    editing
-                    getOptionsForColumn={getOptionsForColumn}
-                    label={label}
-                    onChangeValue={value => setDraft(prev => ({ ...prev, [fieldName]: value }))}
-                    row={row}
-                    showLabel
-                    storeName={storeName}
-                    value={draft[fieldName]}
-                    variant="form"
-                  />
-                </View>
-              );
-            })}
-          </View>
-        ) : (
-          <View style={styles.emptyBox}>
-            <Text style={styles.emptyText}>
-              {global.t?.t(storeName, 'label', 'no_fields') || 'Nenhum campo disponivel'}
-            </Text>
-          </View>
-        )}
-      </ScrollView>
-
-      <View style={styles.actions}>
-        <TouchableOpacity style={styles.secondaryButton} onPress={onCancel}>
-          <Text style={styles.secondaryButtonText}>
-            {global.t?.t(storeName, 'button', 'cancel') || 'Cancelar'}
-          </Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={[
-            styles.primaryButton,
-            { backgroundColor: accentColor },
-            isSaving ? styles.primaryButtonDisabled : null,
-          ]}
-          activeOpacity={0.86}
-          disabled={isSaving}
-          onPress={save}
-        >
-          <Text style={styles.primaryButtonText}>
-            {isSaving ? 'Salvando' : global.t?.t(storeName, 'button', 'save') || 'Salvar'}
-          </Text>
-        </TouchableOpacity>
-      </View>
-    </>
-  );
-};
-
-export default DefaultForm;
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { formatStoreColumnLabel } from '@controleonline/ui-common/src/react/utils/storeColumns';
+import DefaultInput from '../inputs/DefaultInput';
+import {
+  formatSaveValue,
+  getColumnKey,
+  isEditableColumn,
+  normalizeId,
+  normalizeText,
+  resolveEditValue,
+} from '../inputs/defaultInputUtils';
+import styles from './DefaultForm.styles';
+
+const hasValue = value => {
+  if (value === null || value === undefined) return false;
+  if (typeof value === 'boolean' || typeof value === 'number') return true;
+  if (typeof value === 'object') {
+    return normalizeText(value.value ?? value.id ?? value['@id'] ?? '') !== '';
+  }
+
+  return normalizeText(value) !== '';
+};
+
+const resolveDefaultValue = (column, row) => {
+  const fieldName = getColumnKey(column);
+  if (row && row[fieldName] !== undefined) return row[fieldName];
+  if (typeof column?.defaultValue === 'function') return column.defaultValue(row, column);
+  if (column?.defaultValue !== undefined) return column.defaultValue;
+  if (typeof column?.initialValue === 'function') return column.initialValue(row, column);
+  if (column?.initialValue !== undefined) return column.initialValue;
+  return undefined;
+};
+
+const shouldIncludeColumn = (column, row, mode) => {
+  const fieldName = getColumnKey(column);
+  if (!fieldName || column?.isIdentity === true) return false;
+  if (column?.form === false || column?.multiline === true) return false;
+  if (mode === 'create' && column?.add === false) return false;
+  if (mode !== 'create' && !isEditableColumn(column)) return false;
+  if (typeof column?.visibleForm === 'function') {
+    return column.visibleForm(row, column) !== false;
+  }
+
+  return column?.visibleForm !== false;
+};
+
+const buildDraft = (columns, row) =>
+  columns.reduce((draft, column) => {
+    const fieldName = getColumnKey(column);
+    const defaultValue = resolveDefaultValue(column, row);
+    draft[fieldName] = resolveEditValue(column, row, defaultValue);
+    return draft;
+  }, {});
+
+const DefaultForm = ({
+  accentColor = '#2563EB',
+  actions = {},
+  columns = [],
+  getOptionsForColumn = null,
+  mode = 'edit',
+  onBeforeOpen = null,
+  onCancel = null,
+  onSaved = null,
+  row = {},
+  storeName = '',
+}) => {
+  const formColumns = useMemo(
+    () => columns.filter(column => shouldIncludeColumn(column, row, mode)),
+    [columns, mode, row],
+  );
+  const [draft, setDraft] = useState(() => buildDraft(formColumns, row));
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    setDraft(buildDraft(formColumns, row));
+  }, [formColumns, row]);
+
+  const save = useCallback(() => {
+    if (typeof actions.save !== 'function') {
+      onCancel?.();
+      return Promise.resolve(null);
+    }
+
+    const isCreate = mode === 'create';
+    const payload = isCreate
+      ? {}
+      : { id: normalizeId(row?.['@id'] || row?.id) };
+
+    formColumns.forEach(column => {
+      const fieldName = getColumnKey(column);
+      const nextValue = draft[fieldName];
+
+      if (isCreate) {
+        if (hasValue(nextValue)) {
+          payload[fieldName] = formatSaveValue(column, nextValue, row);
+        }
+        return;
+      }
+
+      const currentValue = resolveEditValue(column, row);
+      if (normalizeText(currentValue) !== normalizeText(nextValue)) {
+        payload[fieldName] = formatSaveValue(column, nextValue, row);
+      }
+    });
+
+    const payloadKeys = Object.keys(payload);
+    if ((isCreate && payloadKeys.length === 0) || (!isCreate && payloadKeys.length <= 1)) {
+      onCancel?.();
+      return Promise.resolve(null);
+    }
+
+    setIsSaving(true);
+
+    return actions.save(payload)
+      .then(savedItem => {
+        onSaved?.(savedItem || { ...row, ...draft }, row);
+        return savedItem;
+      })
+      .catch(error => {
+        console.error(error);
+        return null;
+      })
+      .finally(() => {
+        setIsSaving(false);
+      });
+  }, [actions, draft, formColumns, mode, onCancel, onSaved, row]);
+
+  return (
+    <>
+      <ScrollView style={styles.body} keyboardShouldPersistTaps="handled">
+        {formColumns.length > 0 ? (
+          <View style={styles.formGrid}>
+            {formColumns.map(column => {
+              const fieldName = getColumnKey(column);
+              const label = formatStoreColumnLabel({
+                columns,
+                fieldName,
+                fallbackLabel: column?.label || fieldName,
+                storeName,
+              });
+
+              return (
+                <View key={fieldName} style={styles.formField}>
+                  <DefaultInput
+                    accentColor={accentColor}
+                    autoFocus={false}
+                    autoSave={false}
+                    column={column}
+                    columns={columns}
+                    editing
+                    getOptionsForColumn={getOptionsForColumn}
+                    label={label}
+                    onBeforeOpen={onBeforeOpen ? () => onBeforeOpen(column) : null}
+                    onChangeValue={value => setDraft(prev => ({ ...prev, [fieldName]: value }))}
+                    row={row}
+                    showLabel
+                    storeName={storeName}
+                    value={draft[fieldName]}
+                    variant="form"
+                  />
+                </View>
+              );
+            })}
+          </View>
+        ) : (
+          <View style={styles.emptyBox}>
+            <Text style={styles.emptyText}>
+              {global.t?.t(storeName, 'label', 'no_fields') || 'Nenhum campo disponivel'}
+            </Text>
+          </View>
+        )}
+      </ScrollView>
+
+      <View style={styles.actions}>
+        <TouchableOpacity style={styles.secondaryButton} onPress={onCancel}>
+          <Text style={styles.secondaryButtonText}>
+            {global.t?.t(storeName, 'button', 'cancel') || 'Cancelar'}
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[
+            styles.primaryButton,
+            { backgroundColor: accentColor },
+            isSaving ? styles.primaryButtonDisabled : null,
+          ]}
+          activeOpacity={0.86}
+          disabled={isSaving}
+          onPress={save}
+        >
+          <Text style={styles.primaryButtonText}>
+            {isSaving ? 'Salvando' : global.t?.t(storeName, 'button', 'save') || 'Salvar'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </>
+  );
+};
+
+export default DefaultForm;

package/src/react/components/help/DefaultTooltip.js

@@ -1,87 +1,87 @@
-import React, {useCallback, useState} from 'react';
-import {Modal, Pressable, Text, TouchableOpacity, View} from 'react-native';
-import styles from './DefaultTooltip.styles';
-
-const DefaultTooltip = ({
-  accentColor = '#0EA5E9',
-  label = '?',
-  message = '',
-  style = null,
-  textStyle = null,
-  title = 'Ajuda',
-}) => {
-  const [visible, setVisible] = useState(false);
-
-  const openTooltip = useCallback(() => {
-    if (!message) {
-      return;
-    }
-
-    setVisible(true);
-  }, [message]);
-
-  const closeTooltip = useCallback(() => {
-    setVisible(false);
-  }, []);
-
-  return (
-    <>
-      <TouchableOpacity
-        accessibilityRole="button"
-        activeOpacity={0.85}
-        disabled={!message}
-        onPress={openTooltip}
-        style={[
-          styles.button,
-          {
-            borderColor: accentColor,
-            backgroundColor: `${accentColor}14`,
-          },
-          !message && {opacity: 0.55},
-          style,
-        ]}>
-        <Text style={[styles.label, {color: accentColor}, textStyle]}>
-          {label}
-        </Text>
-      </TouchableOpacity>
-
-      <Modal
-        animationType="fade"
-        onRequestClose={closeTooltip}
-        transparent
-        visible={visible}>
-        <Pressable style={styles.overlay} onPress={closeTooltip}>
-          <View
-            onStartShouldSetResponder={() => true}
-            style={[
-              styles.card,
-              {
-                borderColor: accentColor,
-              },
-            ]}>
-            <View style={styles.cardHeader}>
-              <Text style={[styles.title, {color: accentColor}]}>{title}</Text>
-              <TouchableOpacity
-                accessibilityRole="button"
-                activeOpacity={0.8}
-                onPress={closeTooltip}
-                style={[
-                  styles.closeButton,
-                  {
-                    borderColor: accentColor,
-                  },
-                ]}>
-                <Text style={[styles.closeButtonText, {color: accentColor}]}>
-                  Fechar
-                </Text>
-              </TouchableOpacity>
-            </View>
-            <Text style={styles.message}>{message}</Text>
-          </View>
-        </Pressable>
-      </Modal>
-    </>
-  );
-};
-
-export default DefaultTooltip;
+import React, {useCallback, useState} from 'react';
+import {Modal, Pressable, Text, TouchableOpacity, View} from 'react-native';
+import styles from './DefaultTooltip.styles';
+
+const DefaultTooltip = ({
+  accentColor = '#0EA5E9',
+  label = '?',
+  message = '',
+  style = null,
+  textStyle = null,
+  title = 'Ajuda',
+}) => {
+  const [visible, setVisible] = useState(false);
+
+  const openTooltip = useCallback(() => {
+    if (!message) {
+      return;
+    }
+
+    setVisible(true);
+  }, [message]);
+
+  const closeTooltip = useCallback(() => {
+    setVisible(false);
+  }, []);
+
+  return (
+    <>
+      <TouchableOpacity
+        accessibilityRole="button"
+        activeOpacity={0.85}
+        disabled={!message}
+        onPress={openTooltip}
+        style={[
+          styles.button,
+          {
+            borderColor: accentColor,
+            backgroundColor: `${accentColor}14`,
+          },
+          !message && {opacity: 0.55},
+          style,
+        ]}>
+        <Text style={[styles.label, {color: accentColor}, textStyle]}>
+          {label}
+        </Text>
+      </TouchableOpacity>
+
+      <Modal
+        animationType="fade"
+        onRequestClose={closeTooltip}
+        transparent
+        visible={visible}>
+        <Pressable style={styles.overlay} onPress={closeTooltip}>
+          <View
+            onStartShouldSetResponder={() => true}
+            style={[
+              styles.card,
+              {
+                borderColor: accentColor,
+              },
+            ]}>
+            <View style={styles.cardHeader}>
+              <Text style={[styles.title, {color: accentColor}]}>{title}</Text>
+              <TouchableOpacity
+                accessibilityRole="button"
+                activeOpacity={0.8}
+                onPress={closeTooltip}
+                style={[
+                  styles.closeButton,
+                  {
+                    borderColor: accentColor,
+                  },
+                ]}>
+                <Text style={[styles.closeButtonText, {color: accentColor}]}>
+                  Fechar
+                </Text>
+              </TouchableOpacity>
+            </View>
+            <Text style={styles.message}>{message}</Text>
+          </View>
+        </Pressable>
+      </Modal>
+    </>
+  );
+};
+
+export default DefaultTooltip;