@controleonline/ui-default 1.0.263

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

@@ -0,0 +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;

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

@@ -0,0 +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;

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

@@ -0,0 +1,160 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Text, TextInput, TouchableOpacity, View } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import {
+  getColumnKey,
+  isEditableColumn,
+  normalizeText,
+  resolveCellText,
+  resolveEditValue,
+} from './defaultInputUtils';
+import DefaultSelect from './DefaultSelect';
+import styles from './DefaultInput.styles';
+
+const DefaultInput = ({
+  accentColor = '#2563EB',
+  autoFocus = true,
+  autoSave = true,
+  column,
+  columns = [],
+  containerStyle = null,
+  displayValue,
+  editing = false,
+  getOptionsForColumn = null,
+  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(
+    () => normalizeText(value ?? resolveEditValue(column, row)),
+    [column, row, value],
+  );
+  const [draftValue, setDraftValue] = useState(editValue);
+  const resolvedLabel =
+    displayValue ?? resolveCellText({ column, columns, row, storeName, value });
+
+  useEffect(() => {
+    setDraftValue(editValue);
+  }, [editValue, editing]);
+
+  if (column?.list) {
+    return (
+      <DefaultSelect
+        accentColor={accentColor}
+        autoSave={autoSave}
+        column={column}
+        columns={columns}
+        containerStyle={containerStyle}
+        displayValue={displayValue}
+        editing={editing}
+        getOptionsForColumn={getOptionsForColumn}
+        label={label}
+        numberOfLines={numberOfLines}
+        onCancelEditing={onCancelEditing}
+        onChangeValue={onChangeValue}
+        onSave={onSave}
+        onStartEditing={onStartEditing}
+        readTextStyle={readTextStyle}
+        row={row}
+        saving={saving}
+        showLabel={showLabel}
+        storeName={storeName}
+        value={value}
+        variant={variant}
+      />
+    );
+  }
+
+  const saveDraft = () => {
+    if (autoSave) {
+      onSave?.(draftValue);
+      return;
+    }
+
+    onChangeValue?.(draftValue);
+  };
+
+  const updateDraft = nextValue => {
+    setDraftValue(nextValue);
+    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}
+          >
+            {column?.prefix || ''}
+            {resolvedLabel || '-'}
+            {column?.sufix || column?.suffix || ''}
+          </Text>
+          {saving ? (
+            <Text style={[styles.savingText, { color: accentColor }]}>Salvando</Text>
+          ) : canEdit ? (
+            <Icon style={styles.editIcon} name="edit-2" 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={column?.inputType === 'number' || column?.inputType === 'float' ? 'numeric' : 'default'}
+            placeholder={global.t?.t(storeName, 'input', column?.label || fieldName)}
+            onBlur={autoSave ? saveDraft : undefined}
+            onChangeText={updateDraft}
+            onSubmitEditing={saveDraft}
+            autoFocus={autoFocus && !isForm}
+            selectTextOnFocus
+          />
+          {!isForm ? (
+            <TouchableOpacity style={styles.cancelButton} activeOpacity={0.8} onPress={onCancelEditing}>
+              <Icon name="x" size={14} color="#64748B" />
+            </TouchableOpacity>
+          ) : null}
+        </View>
+        {saving ? <Text style={styles.savingText}>Salvando</Text> : null}
+      </View>
+    </View>
+  );
+};
+
+export default DefaultInput;

package/src/react/components/inputs/DefaultInput.styles.js

@@ -0,0 +1,93 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  wrap: {
+    width: '100%',
+    minWidth: 0,
+  },
+  readButton: {
+    minHeight: 28,
+    width: '100%',
+    minWidth: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  readButtonForm: {
+    minHeight: 34,
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    backgroundColor: '#FFFFFF',
+  },
+  readText: {
+    flex: 1,
+    minWidth: 0,
+    color: '#0F172A',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  mutedText: {
+    color: '#94A3B8',
+  },
+  editIcon: {
+    flexShrink: 0,
+  },
+  fieldLabel: {
+    marginBottom: 4,
+    color: '#64748B',
+    fontSize: 10,
+    fontWeight: '900',
+    letterSpacing: 0.3,
+    textTransform: 'uppercase',
+  },
+  editingWrap: {
+    width: '100%',
+    minWidth: 0,
+  },
+  editingRow: {
+    width: '100%',
+    minWidth: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  input: {
+    flex: 1,
+    minWidth: 0,
+    height: 32,
+    borderWidth: 1,
+    borderColor: '#93C5FD',
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    color: '#0F172A',
+    fontSize: 12,
+    fontWeight: '700',
+    backgroundColor: '#FFFFFF',
+  },
+  formInput: {
+    height: 34,
+    borderColor: '#CBD5E1',
+    paddingHorizontal: 10,
+  },
+  cancelButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#FFFFFF',
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+  },
+  savingText: {
+    marginTop: 2,
+    color: '#64748B',
+    fontSize: 9,
+    fontWeight: '800',
+    textTransform: 'uppercase',
+  },
+});
+
+export default styles;

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

@@ -0,0 +1,192 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  Modal,
+  ScrollView,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import {
+  buildOptionsFromColumn,
+  getColumnKey,
+  isEditableColumn,
+  normalizeOptionKey,
+  normalizeText,
+  resolveCellText,
+  resolveEditValue,
+} from './defaultInputUtils';
+import inputStyles from './DefaultInput.styles';
+import styles from './DefaultSelect.styles';
+
+const DefaultSelect = ({
+  accentColor = '#2563EB',
+  autoSave = true,
+  column,
+  columns = [],
+  containerStyle = null,
+  displayValue,
+  editing = false,
+  getOptionsForColumn = null,
+  label = '',
+  numberOfLines = 1,
+  onCancelEditing = null,
+  onChangeValue = null,
+  onSave = null,
+  onStartEditing = null,
+  readTextStyle = null,
+  row = {},
+  saving = false,
+  showLabel = false,
+  storeName = '',
+  value,
+  variant = 'cell',
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchText, setSearchText] = useState('');
+
+  const fieldName = getColumnKey(column);
+  const selectedKey = normalizeOptionKey(value ?? resolveEditValue(column, row));
+  const options = useMemo(
+    () => buildOptionsFromColumn(column, getOptionsForColumn, storeName),
+    [column, getOptionsForColumn, storeName],
+  );
+  const selected = options.find(option => option.key === selectedKey);
+  const resolvedLabel =
+    displayValue ??
+    selected?.label ??
+    resolveCellText({ column, columns, row, storeName, value });
+  const canEdit = isEditableColumn(column) && typeof onStartEditing === 'function';
+  const isForm = variant === 'form';
+  const filteredOptions = useMemo(() => {
+    const query = normalizeText(searchText).toLowerCase();
+    if (!query) return options;
+    return options.filter(option =>
+      normalizeText(option.label).toLowerCase().includes(query) ||
+      normalizeText(option.key).toLowerCase().includes(query),
+    );
+  }, [options, searchText]);
+
+  useEffect(() => {
+    if (editing && autoSave) setIsOpen(true);
+  }, [autoSave, editing]);
+
+  const close = () => {
+    setIsOpen(false);
+    setSearchText('');
+    if (autoSave) onCancelEditing?.();
+  };
+
+  const selectOption = option => {
+    setIsOpen(false);
+    setSearchText('');
+
+    if (autoSave) {
+      onSave?.({
+        value: option.key,
+        label: option.label,
+        object: option.raw,
+      });
+      return;
+    }
+
+    onChangeValue?.(option.key, {
+      value: option.key,
+      label: option.label,
+      object: option.raw,
+    });
+  };
+
+  const open = () => {
+    if (!canEdit && !isForm) return;
+    if (!editing && !isForm) onStartEditing?.();
+    setIsOpen(true);
+  };
+
+  return (
+    <View style={[inputStyles.wrap, containerStyle]}>
+      {showLabel ? <Text style={inputStyles.fieldLabel}>{label || column?.label || fieldName}</Text> : null}
+
+      <TouchableOpacity
+        style={[inputStyles.readButton, isForm ? inputStyles.readButtonForm : null]}
+        activeOpacity={canEdit || isForm ? 0.78 : 1}
+        disabled={!canEdit && !isForm}
+        onPress={open}
+      >
+        <Text
+          style={[
+            inputStyles.readText,
+            resolvedLabel === '-' ? inputStyles.mutedText : null,
+            readTextStyle,
+          ]}
+          numberOfLines={numberOfLines}
+        >
+          {resolvedLabel || '-'}
+        </Text>
+        {saving ? (
+          <Text style={[inputStyles.savingText, { color: accentColor }]}>Salvando</Text>
+        ) : canEdit || isForm ? (
+          <Icon style={inputStyles.editIcon} name="chevron-down" size={14} color="#64748B" />
+        ) : null}
+      </TouchableOpacity>
+
+      <Modal visible={isOpen} transparent animationType="fade" onRequestClose={close}>
+        <View style={styles.overlay}>
+          <View style={styles.modalCard}>
+            <View style={styles.modalHeader}>
+              <Text style={styles.modalTitle} numberOfLines={1}>
+                {label || column?.label || fieldName}
+              </Text>
+              <TouchableOpacity style={inputStyles.cancelButton} onPress={close}>
+                <Icon name="x" size={16} color="#64748B" />
+              </TouchableOpacity>
+            </View>
+
+            <View style={styles.searchBox}>
+              <TextInput
+                style={[inputStyles.input, inputStyles.formInput]}
+                value={searchText}
+                placeholder={global.t?.t(storeName, 'input', column?.searchParam || 'search')}
+                onChangeText={setSearchText}
+              />
+            </View>
+
+            <ScrollView keyboardShouldPersistTaps="handled">
+              {filteredOptions.length > 0 ? (
+                filteredOptions.map(option => {
+                  const isSelected = option.key === selectedKey;
+                  return (
+                    <TouchableOpacity
+                      key={`${option.key}_${option.label}`}
+                      style={styles.optionRow}
+                      activeOpacity={0.78}
+                      onPress={() => selectOption(option)}
+                    >
+                      <Icon
+                        name={isSelected ? 'check-circle' : 'circle'}
+                        size={15}
+                        color={isSelected ? accentColor : '#CBD5E1'}
+                      />
+                      <Text style={styles.optionText}>
+                        {option.label}
+                      </Text>
+                    </TouchableOpacity>
+                  );
+                })
+              ) : (
+                <View style={styles.emptyBox}>
+                  <Text style={styles.emptyText}>
+                    Nenhum resultado encontrado
+                  </Text>
+                </View>
+              )}
+            </ScrollView>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+export default DefaultSelect;

package/src/react/components/inputs/DefaultSelect.styles.js

@@ -0,0 +1,65 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 16,
+    backgroundColor: 'rgba(15,23,42,0.38)',
+  },
+  modalCard: {
+    width: '100%',
+    maxWidth: 420,
+    maxHeight: '78%',
+    borderRadius: 12,
+    backgroundColor: '#FFFFFF',
+    overflow: 'hidden',
+  },
+  modalHeader: {
+    minHeight: 48,
+    paddingHorizontal: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E2E8F0',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+  },
+  modalTitle: {
+    flex: 1,
+    color: '#0F172A',
+    fontSize: 15,
+    fontWeight: '900',
+  },
+  searchBox: {
+    padding: 10,
+  },
+  optionRow: {
+    minHeight: 40,
+    paddingHorizontal: 14,
+    paddingVertical: 9,
+    borderTopWidth: 1,
+    borderTopColor: '#F1F5F9',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  optionText: {
+    flex: 1,
+    color: '#0F172A',
+    fontSize: 13,
+    fontWeight: '700',
+  },
+  emptyBox: {
+    padding: 18,
+    alignItems: 'center',
+  },
+  emptyText: {
+    color: '#64748B',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+});
+
+export default styles;