@controleonline/ui-default 1.0.263 → 1.0.265

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;

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

@@ -1,61 +1,61 @@
-import {StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  button: {
-    alignItems: 'center',
-    borderRadius: 999,
-    borderWidth: 1,
-    height: 22,
-    justifyContent: 'center',
-    width: 22,
-  },
-  label: {
-    fontSize: 12,
-    fontWeight: '800',
-    lineHeight: 12,
-  },
-  overlay: {
-    alignItems: 'center',
-    backgroundColor: 'rgba(15, 23, 42, 0.55)',
-    flex: 1,
-    justifyContent: 'center',
-    padding: 18,
-  },
-  card: {
-    backgroundColor: '#FFFFFF',
-    borderRadius: 16,
-    borderWidth: 1,
-    maxWidth: 420,
-    padding: 16,
-    width: '100%',
-  },
-  cardHeader: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    gap: 10,
-    justifyContent: 'space-between',
-    marginBottom: 12,
-  },
-  title: {
-    flex: 1,
-    fontSize: 15,
-    fontWeight: '800',
-  },
-  message: {
-    color: '#334155',
-    fontSize: 13,
-    lineHeight: 19,
-  },
-  closeButton: {
-    borderRadius: 999,
-    borderWidth: 1,
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-  },
-  closeButtonText: {
-    fontSize: 12,
-    fontWeight: '700',
-  },
-});
-
-export default styles;
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    borderRadius: 999,
+    borderWidth: 1,
+    height: 22,
+    justifyContent: 'center',
+    width: 22,
+  },
+  label: {
+    fontSize: 12,
+    fontWeight: '800',
+    lineHeight: 12,
+  },
+  overlay: {
+    alignItems: 'center',
+    backgroundColor: 'rgba(15, 23, 42, 0.55)',
+    flex: 1,
+    justifyContent: 'center',
+    padding: 18,
+  },
+  card: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 16,
+    borderWidth: 1,
+    maxWidth: 420,
+    padding: 16,
+    width: '100%',
+  },
+  cardHeader: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 10,
+    justifyContent: 'space-between',
+    marginBottom: 12,
+  },
+  title: {
+    flex: 1,
+    fontSize: 15,
+    fontWeight: '800',
+  },
+  message: {
+    color: '#334155',
+    fontSize: 13,
+    lineHeight: 19,
+  },
+  closeButton: {
+    borderRadius: 999,
+    borderWidth: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+  },
+  closeButtonText: {
+    fontSize: 12,
+    fontWeight: '700',
+  },
+});
+
+export default styles;

package/src/react/components/inputs/DefaultDateInput.js

@@ -0,0 +1,150 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Text, TextInput, TouchableOpacity, View } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import Formatter from '@controleonline/ui-common/src/utils/formatter.js';
+import {
+  getColumnKey,
+  isEditableColumn,
+  normalizeText,
+  resolveCellText,
+  resolveEditValue,
+} from './defaultInputUtils';
+import styles from './DefaultInput.styles';
+
+const normalizeDateDraft = value => {
+  const text = normalizeText(value);
+  if (!text) return '';
+
+  return Formatter.formatDateToBR(text);
+};
+
+const DefaultDateInput = ({
+  accentColor = '#2563EB',
+  autoFocus = true,
+  autoSave = true,
+  column,
+  columns = [],
+  containerStyle = null,
+  displayValue,
+  editing = false,
+  inputStyle = null,
+  label = '',
+  numberOfLines = 1,
+  onCancelEditing = null,
+  onChangeValue = null,
+  onSave = null,
+  onStartEditing = null,
+  readTextStyle = null,
+  row = {},
+  saving = false,
+  showLabel = false,
+  storeName = '',
+  value,
+  variant = 'cell',
+}) => {
+  const fieldName = getColumnKey(column);
+  const isForm = variant === 'form';
+  const canEdit = isEditableColumn(column) && typeof onStartEditing === 'function';
+  const editValue = useMemo(
+    () => normalizeDateDraft(value ?? resolveEditValue(column, row)),
+    [column, row, value],
+  );
+  const [draftValue, setDraftValue] = useState(editValue);
+  const [validationMessage, setValidationMessage] = useState('');
+  const resolvedLabel =
+    displayValue ?? resolveCellText({ column, columns, row, storeName, value });
+
+  useEffect(() => {
+    setDraftValue(editValue);
+    setValidationMessage('');
+  }, [editValue, editing]);
+
+  const saveDraft = () => {
+    const validationResult = Formatter.validateBRDate(draftValue);
+
+    if (validationResult !== true) {
+      setValidationMessage(validationResult);
+      return;
+    }
+
+    setValidationMessage('');
+
+    if (autoSave) {
+      onSave?.(draftValue);
+      return;
+    }
+
+    onChangeValue?.(draftValue);
+  };
+
+  const updateDraft = nextValue => {
+    setDraftValue(nextValue);
+    if (validationMessage) setValidationMessage('');
+    if (!autoSave) onChangeValue?.(nextValue);
+  };
+
+  if (!editing && !isForm) {
+    return (
+      <View style={[styles.wrap, containerStyle]}>
+        {showLabel ? <Text style={styles.fieldLabel}>{label || column?.label || fieldName}</Text> : null}
+        <TouchableOpacity
+          style={styles.readButton}
+          activeOpacity={canEdit ? 0.78 : 1}
+          disabled={!canEdit}
+          onPress={() => onStartEditing?.()}
+        >
+          <Text
+            style={[
+              styles.readText,
+              resolvedLabel === '-' ? styles.mutedText : null,
+              readTextStyle,
+            ]}
+            numberOfLines={numberOfLines}
+          >
+            {resolvedLabel || '-'}
+          </Text>
+          {saving ? (
+            <Text style={[styles.savingText, { color: accentColor }]}>Salvando</Text>
+          ) : canEdit ? (
+            <Icon style={styles.editIcon} name="calendar" size={13} color="#64748B" />
+          ) : null}
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.wrap, containerStyle]}>
+      {showLabel ? <Text style={styles.fieldLabel}>{label || column?.label || fieldName}</Text> : null}
+      <View style={styles.editingWrap}>
+        <View style={styles.editingRow}>
+          <TextInput
+            style={[
+              styles.input,
+              isForm ? styles.formInput : null,
+              inputStyle,
+            ]}
+            value={draftValue}
+            keyboardType="numeric"
+            placeholder="DD/MM/YYYY"
+            onBlur={autoSave ? saveDraft : undefined}
+            onChangeText={updateDraft}
+            onSubmitEditing={saveDraft}
+            autoFocus={autoFocus && !isForm}
+            selectTextOnFocus
+          />
+          <Icon name="calendar" size={15} color="#64748B" />
+          {!isForm ? (
+            <TouchableOpacity style={styles.cancelButton} activeOpacity={0.8} onPress={onCancelEditing}>
+              <Icon name="x" size={14} color="#64748B" />
+            </TouchableOpacity>
+          ) : null}
+        </View>
+        {!!validationMessage && <Text style={styles.validationText}>{validationMessage}</Text>}
+        {saving ? <Text style={styles.savingText}>Salvando</Text> : null}
+      </View>
+    </View>
+  );
+};
+
+export default DefaultDateInput;