@stackcraftmx/calcita 0.31.0 → 0.32.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -0
- package/dist/DataTable/AuditTrailDialog.js +4 -1
- package/dist/DataTable/AuditTrailDialog.js.map +1 -1
- package/dist/DataTable/AuditTrailTable.js +4 -1
- package/dist/DataTable/AuditTrailTable.js.map +1 -1
- package/dist/DataTable/ColumnFilters/HeaderFilterPopover.js +3 -1
- package/dist/DataTable/ColumnFilters/HeaderFilterPopover.js.map +1 -1
- package/dist/DataTable/ColumnFilters/MultiSelectColumnFilter.js +3 -1
- package/dist/DataTable/ColumnFilters/MultiSelectColumnFilter.js.map +1 -1
- package/dist/DataTable/ColumnFilters/SortableFilterHeader.js +4 -1
- package/dist/DataTable/ColumnFilters/SortableFilterHeader.js.map +1 -1
- package/dist/DataTable/ColumnFilters/TextColumnFilter.js +3 -1
- package/dist/DataTable/ColumnFilters/TextColumnFilter.js.map +1 -1
- package/dist/DataTable/EmptyState.js +3 -1
- package/dist/DataTable/EmptyState.js.map +1 -1
- package/dist/DataTable/FilterChips.js +3 -1
- package/dist/DataTable/FilterChips.js.map +1 -1
- package/dist/DataTable/GoToPage.js +3 -1
- package/dist/DataTable/GoToPage.js.map +1 -1
- package/dist/DataTable/ServerTable.js +4 -1
- package/dist/DataTable/ServerTable.js.map +1 -1
- package/dist/DataTable/columns.js +3 -1
- package/dist/DataTable/columns.js.map +1 -1
- package/dist/access/Can.js +3 -1
- package/dist/access/Can.js.map +1 -1
- package/dist/access/PermissionMatrix.js +3 -1
- package/dist/access/PermissionMatrix.js.map +1 -1
- package/dist/access/RequireAccess.js +3 -1
- package/dist/access/RequireAccess.js.map +1 -1
- package/dist/account/AccountProvider.js +3 -1
- package/dist/account/AccountProvider.js.map +1 -1
- package/dist/account/AccountSecuritySection.js +3 -1
- package/dist/account/AccountSecuritySection.js.map +1 -1
- package/dist/account/DemoTotpCodeButton.js +3 -1
- package/dist/account/DemoTotpCodeButton.js.map +1 -1
- package/dist/account/ForgotPasswordScreen.js +3 -1
- package/dist/account/ForgotPasswordScreen.js.map +1 -1
- package/dist/account/ProfileScreen.js +4 -1
- package/dist/account/ProfileScreen.js.map +1 -1
- package/dist/account/ResetPasswordScreen.js +4 -1
- package/dist/account/ResetPasswordScreen.js.map +1 -1
- package/dist/account/SignInScreen.js +3 -1
- package/dist/account/SignInScreen.js.map +1 -1
- package/dist/appShell/AccountMenu.js +3 -1
- package/dist/appShell/AccountMenu.js.map +1 -1
- package/dist/appShell/AppLayout.js +4 -1
- package/dist/appShell/AppLayout.js.map +1 -1
- package/dist/appShell/AppearanceSettings.js +4 -1
- package/dist/appShell/AppearanceSettings.js.map +1 -1
- package/dist/appShell/AuthLayout.js +3 -1
- package/dist/appShell/AuthLayout.js.map +1 -1
- package/dist/appShell/BarActions.js +3 -1
- package/dist/appShell/BarActions.js.map +1 -1
- package/dist/appShell/BarSearch.js +3 -1
- package/dist/appShell/BarSearch.js.map +1 -1
- package/dist/appShell/HeaderTools.js +4 -1
- package/dist/appShell/HeaderTools.js.map +1 -1
- package/dist/appShell/MenuLinks.js +3 -1
- package/dist/appShell/MenuLinks.js.map +1 -1
- package/dist/appShell/MobileTabBar.js +3 -1
- package/dist/appShell/MobileTabBar.js.map +1 -1
- package/dist/appShell/SettingsMenu.js +3 -1
- package/dist/appShell/SettingsMenu.js.map +1 -1
- package/dist/appShell/SideMenu.js +4 -1
- package/dist/appShell/SideMenu.js.map +1 -1
- package/dist/appShell/SideMenuEntry.js +3 -1
- package/dist/appShell/SideMenuEntry.js.map +1 -1
- package/dist/appShell/SubmenuActionsMenu.js +3 -1
- package/dist/appShell/SubmenuActionsMenu.js.map +1 -1
- package/dist/appShell/TabBarEditor.js +3 -1
- package/dist/appShell/TabBarEditor.js.map +1 -1
- package/dist/appShell/TopMenu.js +3 -1
- package/dist/appShell/TopMenu.js.map +1 -1
- package/dist/appShell/Wordmark.js +3 -1
- package/dist/appShell/Wordmark.js.map +1 -1
- package/dist/appShell/pageTitle.js +3 -1
- package/dist/appShell/pageTitle.js.map +1 -1
- package/dist/auth/PasswordChecklist.js +3 -1
- package/dist/auth/PasswordChecklist.js.map +1 -1
- package/dist/calendar/EventCalendar.js +4 -1
- package/dist/calendar/EventCalendar.js.map +1 -1
- package/dist/calendar/EventDetails.js +3 -1
- package/dist/calendar/EventDetails.js.map +1 -1
- package/dist/datePickers/DateInput.js +4 -1
- package/dist/datePickers/DateInput.js.map +1 -1
- package/dist/downloads/DownloadManager.js +3 -1
- package/dist/downloads/DownloadManager.js.map +1 -1
- package/dist/feedback/ConfirmDialog.js +4 -1
- package/dist/feedback/ConfirmDialog.js.map +1 -1
- package/dist/feedback/ModalWaiting.js +3 -1
- package/dist/feedback/ModalWaiting.js.map +1 -1
- package/dist/feedback/NewBuildNotice.js +3 -1
- package/dist/feedback/NewBuildNotice.js.map +1 -1
- package/dist/filepond/FileDropzone.js +4 -1
- package/dist/filepond/FileDropzone.js.map +1 -1
- package/dist/formatting.js +8 -5
- package/dist/formatting.js.map +1 -1
- package/dist/forms/FormProblemAlert.js +3 -1
- package/dist/forms/FormProblemAlert.js.map +1 -1
- package/dist/forms/FormServerProblem.js +3 -1
- package/dist/forms/FormServerProblem.js.map +1 -1
- package/dist/forms/FormWizard.js +3 -1
- package/dist/forms/FormWizard.js.map +1 -1
- package/dist/forms/auth/ChangePasswordForm.js +3 -1
- package/dist/forms/auth/ChangePasswordForm.js.map +1 -1
- package/dist/forms/auth/ForgotPasswordForm.js +3 -1
- package/dist/forms/auth/ForgotPasswordForm.js.map +1 -1
- package/dist/forms/auth/SignInForm.js +3 -1
- package/dist/forms/auth/SignInForm.js.map +1 -1
- package/dist/forms/security/SecondStepForm.js +3 -1
- package/dist/forms/security/SecondStepForm.js.map +1 -1
- package/dist/forms/security/TwoStepVerificationCard.js +3 -1
- package/dist/forms/security/TwoStepVerificationCard.js.map +1 -1
- package/dist/hookForm/FormProblemAlert.js +3 -1
- package/dist/hookForm/FormProblemAlert.js.map +1 -1
- package/dist/hookForm/FormWizard.js +3 -1
- package/dist/hookForm/FormWizard.js.map +1 -1
- package/dist/inbox/InboxLayout.js +4 -1
- package/dist/inbox/InboxLayout.js.map +1 -1
- package/dist/inbox/MessageList.js +4 -1
- package/dist/inbox/MessageList.js.map +1 -1
- package/dist/inbox/MessageView.js +3 -1
- package/dist/inbox/MessageView.js.map +1 -1
- package/dist/index.js +3 -1
- package/dist/inputs/CatalogInput.js +4 -1
- package/dist/inputs/CatalogInput.js.map +1 -1
- package/dist/inputs/ColorInput.js +4 -1
- package/dist/inputs/ColorInput.js.map +1 -1
- package/dist/inputs/FieldFrame.js +3 -1
- package/dist/inputs/FieldFrame.js.map +1 -1
- package/dist/inputs/FormSection.js +5 -2
- package/dist/inputs/FormSection.js.map +1 -1
- package/dist/inputs/NumberInput.js +4 -1
- package/dist/inputs/NumberInput.js.map +1 -1
- package/dist/inputs/SelectInput.js +4 -1
- package/dist/inputs/SelectInput.js.map +1 -1
- package/dist/inputs/WizardLayout.js +4 -1
- package/dist/inputs/WizardLayout.js.map +1 -1
- package/dist/kanban/KanbanBoard.js +4 -1
- package/dist/kanban/KanbanBoard.js.map +1 -1
- package/dist/maps/MapView.js +4 -1
- package/dist/maps/MapView.js.map +1 -1
- package/dist/pwa/InstallAppSetting.js +3 -1
- package/dist/pwa/InstallAppSetting.js.map +1 -1
- package/dist/pwa/InstallInstructionsDialog.js +3 -1
- package/dist/pwa/InstallInstructionsDialog.js.map +1 -1
- package/dist/pwa/InstallPromptBanner.js +3 -1
- package/dist/pwa/InstallPromptBanner.js.map +1 -1
- package/dist/security/ActivityLog.js +3 -1
- package/dist/security/ActivityLog.js.map +1 -1
- package/dist/security/RecoveryCodesDialog.js +3 -1
- package/dist/security/RecoveryCodesDialog.js.map +1 -1
- package/dist/security/SessionsCard.js +3 -1
- package/dist/security/SessionsCard.js.map +1 -1
- package/dist/theme/createToolkitTheme.js +4 -1
- package/dist/theme/createToolkitTheme.js.map +1 -1
- package/dist/toolkit/ComponentTexts.js +3 -1
- package/dist/toolkit/ComponentTexts.js.map +1 -1
- package/dist/toolkit/ToolkitProvider.js +24 -3
- package/dist/toolkit/ToolkitProvider.js.map +1 -1
- package/dist/toolkit/toolkitContext.js.map +1 -1
- package/dist/toolkit/toolkitSettings.js +9 -0
- package/dist/toolkit/toolkitSettings.js.map +1 -1
- package/dist/toolkit/unknownProps.js +33 -0
- package/dist/toolkit/unknownProps.js.map +1 -0
- package/dist/types/DataTable/AuditTrailTable.d.ts +1 -1
- package/dist/types/DataTable/ColumnFilters/TextColumnFilter.d.ts +1 -1
- package/dist/types/DataTable/columns.d.ts +3 -1
- package/dist/types/access/Can.d.ts +1 -1
- package/dist/types/access/RequireAccess.d.ts +1 -1
- package/dist/types/account/AccountProvider.d.ts +1 -1
- package/dist/types/account/ForgotPasswordScreen.d.ts +1 -1
- package/dist/types/account/ResetPasswordScreen.d.ts +1 -1
- package/dist/types/appShell/MenuLinks.d.ts +1 -1
- package/dist/types/appShell/pageTitle.d.ts +1 -1
- package/dist/types/datePickers/DateInput.d.ts +1 -1
- package/dist/types/downloads/DownloadManager.d.ts +1 -1
- package/dist/types/formatting.d.ts +2 -1
- package/dist/types/forms/FormProblemAlert.d.ts +1 -1
- package/dist/types/forms/FormServerProblem.d.ts +1 -1
- package/dist/types/forms/FormWizard.d.ts +1 -1
- package/dist/types/forms/auth/ChangePasswordForm.d.ts +1 -1
- package/dist/types/forms/auth/ForgotPasswordForm.d.ts +1 -1
- package/dist/types/hookForm/FormProblemAlert.d.ts +1 -1
- package/dist/types/hookForm/FormWizard.d.ts +1 -1
- package/dist/types/index.d.ts +1 -1
- package/dist/types/inputs/CatalogInput.d.ts +1 -1
- package/dist/types/inputs/FieldFrame.d.ts +1 -1
- package/dist/types/inputs/NumberInput.d.ts +1 -1
- package/dist/types/pwa/InstallAppSetting.d.ts +1 -1
- package/dist/types/theme/createToolkitTheme.d.ts +1 -1
- package/dist/types/toolkit/ComponentTexts.d.ts +1 -1
- package/dist/types/toolkit/ToolkitProvider.d.ts +4 -1
- package/dist/types/toolkit/toolkitContext.d.ts +2 -1
- package/dist/types/toolkit/toolkitSettings.d.ts +13 -2
- package/dist/types/toolkit/unknownProps.d.ts +23 -0
- package/dist/types/ui/actions/CopyButton.d.ts +1 -1
- package/dist/types/ui/actions/SecretField.d.ts +1 -1
- package/dist/types/ui/labels/DictionaryText.d.ts +1 -1
- package/dist/types/ui/layout/FullPageLoader.d.ts +1 -1
- package/dist/types/ui/metrics/CalendarHeatmap.d.ts +9 -8
- package/dist/types/ui/metrics/chartParts.d.ts +3 -3
- package/dist/types/ui/metrics/heatmapScale.d.ts +23 -0
- package/dist/types/ui/navigation/DocumentTitle.d.ts +1 -1
- package/dist/ui/actions/ActionsMenu.js +3 -1
- package/dist/ui/actions/ActionsMenu.js.map +1 -1
- package/dist/ui/actions/CopyButton.js +3 -1
- package/dist/ui/actions/CopyButton.js.map +1 -1
- package/dist/ui/actions/DownloadMenu.js +4 -1
- package/dist/ui/actions/DownloadMenu.js.map +1 -1
- package/dist/ui/actions/SecretField.js +3 -1
- package/dist/ui/actions/SecretField.js.map +1 -1
- package/dist/ui/actions/SelectionActions.js +3 -1
- package/dist/ui/actions/SelectionActions.js.map +1 -1
- package/dist/ui/filters/DateRangeFilter.js +3 -1
- package/dist/ui/filters/DateRangeFilter.js.map +1 -1
- package/dist/ui/filters/PeriodRangeSelector.js +3 -1
- package/dist/ui/filters/PeriodRangeSelector.js.map +1 -1
- package/dist/ui/filters/QuickFilters.js +3 -1
- package/dist/ui/filters/QuickFilters.js.map +1 -1
- package/dist/ui/filters/SegmentedControl.js +3 -1
- package/dist/ui/filters/SegmentedControl.js.map +1 -1
- package/dist/ui/labels/DictionaryText.js +3 -1
- package/dist/ui/labels/DictionaryText.js.map +1 -1
- package/dist/ui/labels/StatusChip.js +3 -1
- package/dist/ui/labels/StatusChip.js.map +1 -1
- package/dist/ui/layout/CollapsibleSection.js +3 -1
- package/dist/ui/layout/CollapsibleSection.js.map +1 -1
- package/dist/ui/layout/ContentDialog.js +3 -1
- package/dist/ui/layout/ContentDialog.js.map +1 -1
- package/dist/ui/layout/DefinitionList.js +3 -1
- package/dist/ui/layout/DefinitionList.js.map +1 -1
- package/dist/ui/layout/DetailHeader.js +3 -1
- package/dist/ui/layout/DetailHeader.js.map +1 -1
- package/dist/ui/layout/ErrorPage.js +4 -1
- package/dist/ui/layout/ErrorPage.js.map +1 -1
- package/dist/ui/layout/FullPageLoader.js +3 -1
- package/dist/ui/layout/FullPageLoader.js.map +1 -1
- package/dist/ui/layout/PageHeader.js +3 -1
- package/dist/ui/layout/PageHeader.js.map +1 -1
- package/dist/ui/layout/PageHeading.js +3 -1
- package/dist/ui/layout/PageHeading.js.map +1 -1
- package/dist/ui/layout/ProfileHeader.js +3 -1
- package/dist/ui/layout/ProfileHeader.js.map +1 -1
- package/dist/ui/layout/SectionCard.js +3 -1
- package/dist/ui/layout/SectionCard.js.map +1 -1
- package/dist/ui/metrics/BarList.js +3 -1
- package/dist/ui/metrics/BarList.js.map +1 -1
- package/dist/ui/metrics/CalendarHeatmap.js +13 -4
- package/dist/ui/metrics/CalendarHeatmap.js.map +1 -1
- package/dist/ui/metrics/ChartTooltip.js.map +1 -1
- package/dist/ui/metrics/ColumnChart.js +4 -1
- package/dist/ui/metrics/ColumnChart.js.map +1 -1
- package/dist/ui/metrics/LineChart.js +4 -1
- package/dist/ui/metrics/LineChart.js.map +1 -1
- package/dist/ui/metrics/MetricCard.js +4 -1
- package/dist/ui/metrics/MetricCard.js.map +1 -1
- package/dist/ui/metrics/TableToggle.js +3 -1
- package/dist/ui/metrics/TableToggle.js.map +1 -1
- package/dist/ui/metrics/chartParts.js +7 -3
- package/dist/ui/metrics/chartParts.js.map +1 -1
- package/dist/ui/metrics/heatmapScale.js +15 -1
- package/dist/ui/metrics/heatmapScale.js.map +1 -1
- package/dist/ui/navigation/ColorSchemeToggle.js +3 -1
- package/dist/ui/navigation/ColorSchemeToggle.js.map +1 -1
- package/dist/ui/navigation/DocumentTitle.js +3 -1
- package/dist/ui/navigation/DocumentTitle.js.map +1 -1
- package/dist/ui/navigation/FontSizeToggle.js +3 -1
- package/dist/ui/navigation/FontSizeToggle.js.map +1 -1
- package/dist/ui/navigation/LanguageToggle.js +3 -1
- package/dist/ui/navigation/LanguageToggle.js.map +1 -1
- package/dist/ui/navigation/PageBreadcrumbs.js +3 -1
- package/dist/ui/navigation/PageBreadcrumbs.js.map +1 -1
- package/dist/ui/timeline/GroupedTimeline.js +3 -1
- package/dist/ui/timeline/GroupedTimeline.js.map +1 -1
- package/dist/upload/FileDropzone.js +4 -1
- package/dist/upload/FileDropzone.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GroupedTimeline.js","sources":["../../../src/ui/timeline/GroupedTimeline.jsx"],"sourcesContent":["// Línea de tiempo por grupos (Timeline de @mui/lab al estilo del ejemplo «Customization» de MUI): cada grupo con su\n// título y una insignia opcional, y cada evento con su ícono dentro del punto, su título, su hora y un detalle libre.\n//\n// Uso típico: el historial de un registro agrupado por etapa o por intento (detalle de un pedido: un grupo por intento de entrega,\n// el vigente resaltado). El énfasis de cada grupo (TIMELINE_EMPHASIS) decide cómo se pintan sus puntos (timelineDot.js).\n//\n// En pantalla ancha los eventos alternan de lado y la hora va del otro lado del punto; en celular todo va de un lado, con\n// la hora abajo del título, para que quepa.\n//\n// Un grupo plegable (isCollapsible) enseña solo su título y su resumen hasta que se abre: sirve para que lo viejo no\n// obligue a bajar (los intentos anteriores van plegados).\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaGroupedTimeline con defaultProps y\n// styleOverrides de sus partes: group, groupHeader, groupButton, groupTitle, expandIcon, timeline, opposite, connector,\n// content, entryTitle.\n//\n// Genérico del paquete: function (regla de la casa). No sabe de negocio: títulos, horas y detalles llegan ya traducidos y\n// formateados, y el ícono y el tono de cada evento los decide quien la usa (con sus diccionarios).\nimport {useState} from 'react';\nimport Timeline from '@mui/lab/Timeline';\nimport TimelineConnector from '@mui/lab/TimelineConnector';\nimport TimelineContent from '@mui/lab/TimelineContent';\nimport TimelineDot from '@mui/lab/TimelineDot';\nimport TimelineItem, {timelineItemClasses} from '@mui/lab/TimelineItem';\nimport TimelineOppositeContent from '@mui/lab/TimelineOppositeContent';\nimport TimelineSeparator from '@mui/lab/TimelineSeparator';\nimport Box from '@mui/material/Box';\nimport ButtonBase from '@mui/material/ButtonBase';\nimport Chip from '@mui/material/Chip';\nimport Collapse from '@mui/material/Collapse';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\nimport {useTheme} from '@mui/material/styles';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\n\nimport {paletteOf} from '@/theme/components/paletteOf.js';\nimport {TIMELINE_EMPHASIS, timelineDotOf} from '@/ui/timeline/timelineDot.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaGroupedTimeline)\nconst THEME_NAME = 'CalcitaGroupedTimeline';\nconst TimelineGroup = piecePart(THEME_NAME, 'Group', Box);\nconst TimelineGroupHeader = piecePart(THEME_NAME, 'GroupHeader', Stack);\nconst TimelineGroupButton = piecePart(THEME_NAME, 'GroupButton', ButtonBase);\nconst TimelineGroupTitle = piecePart(THEME_NAME, 'GroupTitle', Typography);\nconst TimelineExpandIcon = piecePart(THEME_NAME, 'ExpandIcon', ExpandMoreIcon);\nconst TimelineTimeline = piecePart(THEME_NAME, 'Timeline', Timeline);\nconst TimelineOpposite = piecePart(THEME_NAME, 'Opposite', TimelineOppositeContent);\nconst TimelineConnectorPart = piecePart(THEME_NAME, 'Connector', TimelineConnector);\nconst TimelineContentPart = piecePart(THEME_NAME, 'Content', TimelineContent);\nconst TimelineEntryTitle = piecePart(THEME_NAME, 'EntryTitle', Typography);\n\n// el fondo del grupo resaltado: cuánto del color principal (por ciento)\nconst HIGHLIGHT_TINT_PERCENT = 8;\n// en celular la línea va pegada a la izquierda: sin la columna de enfrente que @mui/lab reserva por omisión\nconst LEFT_ALIGNED_TIMELINE = {m: 0, px: 0, py: 0.5, [`& .${timelineItemClasses.root}::before`]: {flex: 0, p: 0}};\nconst ALTERNATE_TIMELINE = {m: 0, px: 0, py: 0.5};\n\n/**\n * @param {object} props\n * @param {Object[]} props.groups\n * @param {string} props.groups[].key\n * @param {string} [props.groups[].title] texto ya traducido; sin título el grupo no pinta encabezado\n * @param {string} [props.groups[].badge] insignia junto al título (p. ej. «Intento actual»)\n * @param {string} [props.groups[].summary] lo que se lee junto al título del grupo plegado (p. ej. «6 eventos»)\n * @param {boolean} [props.groups[].isCollapsible] el título se vuelve un botón que abre y cierra el grupo (necesita\n * title)\n * @param {boolean} [props.groups[].defaultExpanded] si un grupo plegable arranca abierto (por omisión, sí)\n * @param {'highlighted'|'normal'|'muted'} [props.groups[].emphasis]\n * @param {Object[]} props.groups[].items\n * @param {string} props.groups[].items[].key\n * @param {import('react').ElementType} [props.groups[].items[].icon] ícono dentro del punto\n * @param {string} [props.groups[].items[].tone] success, warning, error, info, primary o grey\n * @param {import('react').ReactNode} props.groups[].items[].title\n * @param {string} [props.groups[].items[].timestamp] fecha y hora ya formateadas\n * @param {import('react').ReactNode} [props.groups[].items[].details] lo que va abajo del título (chip de resultado, una liga...)\n * @param {(groupKey: string, isExpanded: boolean) => void} [props.onGroupToggle] la persona abrió o plegó un grupo (por ejemplo,\n * para pedir sus eventos hasta que se abre)\n */\nexport default function GroupedTimeline(props) {\n // lo que el proyecto puso en su tema (components.CalcitaGroupedTimeline.defaultProps) y encima lo que llega aquí\n const {groups, onGroupToggle} = usePieceProps(props, THEME_NAME);\n const theme = useTheme();\n const isWide = useMediaQuery(theme.breakpoints.up('md'));\n // llaves de los grupos plegables que el usuario tiene abiertos; arrancan como dice defaultExpanded\n const [expandedKeys, setExpandedKeys] = useState(() => new Set(\n groups.filter((timelineGroup) => timelineGroup.defaultExpanded !== false).map((timelineGroup) => timelineGroup.key),\n ));\n const toggleGroup = (groupKey) => {\n const isOpening = !expandedKeys.has(groupKey);\n const nextKeys = new Set(expandedKeys);\n if (isOpening) {\n nextKeys.add(groupKey);\n } else {\n nextKeys.delete(groupKey);\n }\n setExpandedKeys(nextKeys);\n onGroupToggle?.(groupKey, isOpening);\n };\n\n return (\n <Stack spacing={1.5}>\n {groups.map((timelineGroup) => {\n const emphasis = timelineGroup.emphasis ?? TIMELINE_EMPHASIS.normal;\n const isHighlighted = emphasis === TIMELINE_EMPHASIS.highlighted;\n const isMuted = emphasis === TIMELINE_EMPHASIS.muted;\n const isCollapsible = Boolean(timelineGroup.isCollapsible && timelineGroup.title);\n const isExpanded = !isCollapsible || expandedKeys.has(timelineGroup.key);\n\n return (\n // el borde transparente en los demás grupos mantiene todo alineado con el grupo resaltado\n <TimelineGroup key={timelineGroup.key} ownSx={{\n border: 1, borderRadius: 1.5, px: 1.5, pt: 1.25, pb: isExpanded ? 0 : 1.25,\n borderColor: isHighlighted ? 'primary.main' : 'transparent',\n // un tinte del color principal: primary.lighter no existe en el tema de MUI y el grupo se quedaba sin fondo\n bgcolor: (theme) => (isHighlighted ? `color-mix(in srgb, ${paletteOf(theme).primary.main} ${HIGHLIGHT_TINT_PERCENT}%, transparent)` : 'transparent'),\n }}>\n {timelineGroup.title && (\n <TimelineGroupHeader direction=\"row\" spacing={1} ownSx={{alignItems: 'center', justifyContent: isWide ? 'center' : 'flex-start'}}>\n <TimelineGroupButton disabled={!isCollapsible} onClick={() => toggleGroup(timelineGroup.key)}\n aria-expanded={isCollapsible ? isExpanded : undefined}\n ownSx={{gap: 1, px: 1, py: 0.25, borderRadius: 1, '&.Mui-disabled': {pointerEvents: 'none'}}}>\n <TimelineGroupTitle variant=\"h6\" component=\"h3\" ownSx={{fontWeight: 700, color: isMuted ? 'text.secondary' : 'text.primary'}}>\n {timelineGroup.title}\n </TimelineGroupTitle>\n {/* plegado, el grupo dice cuántos eventos trae: se sabe qué hay sin abrirlo */}\n {isCollapsible && timelineGroup.summary && (\n <Typography variant=\"body2\" color=\"text.secondary\" component=\"span\">{timelineGroup.summary}</Typography>\n )}\n {isCollapsible && (\n <TimelineExpandIcon fontSize=\"small\" ownSx={{\n color: 'text.secondary', transition: theme.transitions.create('transform'),\n transform: isExpanded ? 'rotate(180deg)' : 'none',\n }} />\n )}\n </TimelineGroupButton>\n {timelineGroup.badge && <Chip size=\"small\" color=\"primary\" label={timelineGroup.badge} />}\n </TimelineGroupHeader>\n )}\n <Collapse in={isExpanded} unmountOnExit>\n <TimelineTimeline position={isWide ? 'alternate' : 'right'} ownSx={isWide ? ALTERNATE_TIMELINE : LEFT_ALIGNED_TIMELINE}>\n {timelineGroup.items.map((timelineEntry, entryPosition) => {\n const EntryIcon = timelineEntry.icon;\n const isFirstEntry = entryPosition === 0;\n const isLastEntry = entryPosition === timelineGroup.items.length - 1;\n\n return (\n <TimelineItem key={timelineEntry.key}>\n {isWide && (\n <TimelineOpposite variant=\"body2\" color=\"text.secondary\" ownSx={{m: 'auto 0'}}>\n {timelineEntry.timestamp}\n </TimelineOpposite>\n )}\n <TimelineSeparator>\n <TimelineConnectorPart ownSx={{visibility: isFirstEntry ? 'hidden' : 'visible'}} />\n <TimelineDot {...timelineDotOf({emphasis, tone: timelineEntry.tone})}>\n {EntryIcon && <EntryIcon fontSize=\"small\" />}\n </TimelineDot>\n <TimelineConnectorPart ownSx={{visibility: isLastEntry ? 'hidden' : 'visible'}} />\n </TimelineSeparator>\n <TimelineContentPart ownSx={{py: 1.5, px: 2, minWidth: 0}}>\n <TimelineEntryTitle variant=\"body2\" component=\"p\" ownSx={{fontWeight: 600, color: isMuted ? 'text.secondary' : 'text.primary'}}>\n {timelineEntry.title}\n </TimelineEntryTitle>\n {!isWide && timelineEntry.timestamp && (\n <Typography variant=\"caption\" color=\"text.secondary\" component=\"p\">{timelineEntry.timestamp}</Typography>\n )}\n {timelineEntry.details}\n </TimelineContentPart>\n </TimelineItem>\n );\n })}\n </TimelineTimeline>\n </Collapse>\n </TimelineGroup>\n );\n })}\n </Stack>\n );\n}\n"],"names":["theme"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"GroupedTimeline.js","sources":["../../../src/ui/timeline/GroupedTimeline.jsx"],"sourcesContent":["// Línea de tiempo por grupos (Timeline de @mui/lab al estilo del ejemplo «Customization» de MUI): cada grupo con su\n// título y una insignia opcional, y cada evento con su ícono dentro del punto, su título, su hora y un detalle libre.\n//\n// Uso típico: el historial de un registro agrupado por etapa o por intento (detalle de un pedido: un grupo por intento de entrega,\n// el vigente resaltado). El énfasis de cada grupo (TIMELINE_EMPHASIS) decide cómo se pintan sus puntos (timelineDot.js).\n//\n// En pantalla ancha los eventos alternan de lado y la hora va del otro lado del punto; en celular todo va de un lado, con\n// la hora abajo del título, para que quepa.\n//\n// Un grupo plegable (isCollapsible) enseña solo su título y su resumen hasta que se abre: sirve para que lo viejo no\n// obligue a bajar (los intentos anteriores van plegados).\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaGroupedTimeline con defaultProps y\n// styleOverrides de sus partes: group, groupHeader, groupButton, groupTitle, expandIcon, timeline, opposite, connector,\n// content, entryTitle.\n//\n// Genérico del paquete: function (regla de la casa). No sabe de negocio: títulos, horas y detalles llegan ya traducidos y\n// formateados, y el ícono y el tono de cada evento los decide quien la usa (con sus diccionarios).\nimport {useState} from 'react';\nimport Timeline from '@mui/lab/Timeline';\nimport TimelineConnector from '@mui/lab/TimelineConnector';\nimport TimelineContent from '@mui/lab/TimelineContent';\nimport TimelineDot from '@mui/lab/TimelineDot';\nimport TimelineItem, {timelineItemClasses} from '@mui/lab/TimelineItem';\nimport TimelineOppositeContent from '@mui/lab/TimelineOppositeContent';\nimport TimelineSeparator from '@mui/lab/TimelineSeparator';\nimport Box from '@mui/material/Box';\nimport ButtonBase from '@mui/material/ButtonBase';\nimport Chip from '@mui/material/Chip';\nimport Collapse from '@mui/material/Collapse';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\nimport {useTheme} from '@mui/material/styles';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\n\nimport {paletteOf} from '@/theme/components/paletteOf.js';\nimport {TIMELINE_EMPHASIS, timelineDotOf} from '@/ui/timeline/timelineDot.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaGroupedTimeline)\nconst THEME_NAME = 'CalcitaGroupedTimeline';\nconst TimelineGroup = piecePart(THEME_NAME, 'Group', Box);\nconst TimelineGroupHeader = piecePart(THEME_NAME, 'GroupHeader', Stack);\nconst TimelineGroupButton = piecePart(THEME_NAME, 'GroupButton', ButtonBase);\nconst TimelineGroupTitle = piecePart(THEME_NAME, 'GroupTitle', Typography);\nconst TimelineExpandIcon = piecePart(THEME_NAME, 'ExpandIcon', ExpandMoreIcon);\nconst TimelineTimeline = piecePart(THEME_NAME, 'Timeline', Timeline);\nconst TimelineOpposite = piecePart(THEME_NAME, 'Opposite', TimelineOppositeContent);\nconst TimelineConnectorPart = piecePart(THEME_NAME, 'Connector', TimelineConnector);\nconst TimelineContentPart = piecePart(THEME_NAME, 'Content', TimelineContent);\nconst TimelineEntryTitle = piecePart(THEME_NAME, 'EntryTitle', Typography);\n\n// el fondo del grupo resaltado: cuánto del color principal (por ciento)\nconst HIGHLIGHT_TINT_PERCENT = 8;\n// en celular la línea va pegada a la izquierda: sin la columna de enfrente que @mui/lab reserva por omisión\nconst LEFT_ALIGNED_TIMELINE = {m: 0, px: 0, py: 0.5, [`& .${timelineItemClasses.root}::before`]: {flex: 0, p: 0}};\nconst ALTERNATE_TIMELINE = {m: 0, px: 0, py: 0.5};\n\n/**\n * @param {object} props\n * @param {Object[]} props.groups\n * @param {string} props.groups[].key\n * @param {string} [props.groups[].title] texto ya traducido; sin título el grupo no pinta encabezado\n * @param {string} [props.groups[].badge] insignia junto al título (p. ej. «Intento actual»)\n * @param {string} [props.groups[].summary] lo que se lee junto al título del grupo plegado (p. ej. «6 eventos»)\n * @param {boolean} [props.groups[].isCollapsible] el título se vuelve un botón que abre y cierra el grupo (necesita\n * title)\n * @param {boolean} [props.groups[].defaultExpanded] si un grupo plegable arranca abierto (por omisión, sí)\n * @param {'highlighted'|'normal'|'muted'} [props.groups[].emphasis]\n * @param {Object[]} props.groups[].items\n * @param {string} props.groups[].items[].key\n * @param {import('react').ElementType} [props.groups[].items[].icon] ícono dentro del punto\n * @param {string} [props.groups[].items[].tone] success, warning, error, info, primary o grey\n * @param {import('react').ReactNode} props.groups[].items[].title\n * @param {string} [props.groups[].items[].timestamp] fecha y hora ya formateadas\n * @param {import('react').ReactNode} [props.groups[].items[].details] lo que va abajo del título (chip de resultado, una liga...)\n * @param {(groupKey: string, isExpanded: boolean) => void} [props.onGroupToggle] la persona abrió o plegó un grupo (por ejemplo,\n * para pedir sus eventos hasta que se abre)\n */\nexport default function GroupedTimeline(props) {\n // lo que el proyecto puso en su tema (components.CalcitaGroupedTimeline.defaultProps) y encima lo que llega aquí\n const {groups, onGroupToggle, ...unknownProps} = usePieceProps(props, THEME_NAME);\n warnUnknownProps(THEME_NAME, unknownProps);\n const theme = useTheme();\n const isWide = useMediaQuery(theme.breakpoints.up('md'));\n // llaves de los grupos plegables que el usuario tiene abiertos; arrancan como dice defaultExpanded\n const [expandedKeys, setExpandedKeys] = useState(() => new Set(\n groups.filter((timelineGroup) => timelineGroup.defaultExpanded !== false).map((timelineGroup) => timelineGroup.key),\n ));\n const toggleGroup = (groupKey) => {\n const isOpening = !expandedKeys.has(groupKey);\n const nextKeys = new Set(expandedKeys);\n if (isOpening) {\n nextKeys.add(groupKey);\n } else {\n nextKeys.delete(groupKey);\n }\n setExpandedKeys(nextKeys);\n onGroupToggle?.(groupKey, isOpening);\n };\n\n return (\n <Stack spacing={1.5}>\n {groups.map((timelineGroup) => {\n const emphasis = timelineGroup.emphasis ?? TIMELINE_EMPHASIS.normal;\n const isHighlighted = emphasis === TIMELINE_EMPHASIS.highlighted;\n const isMuted = emphasis === TIMELINE_EMPHASIS.muted;\n const isCollapsible = Boolean(timelineGroup.isCollapsible && timelineGroup.title);\n const isExpanded = !isCollapsible || expandedKeys.has(timelineGroup.key);\n\n return (\n // el borde transparente en los demás grupos mantiene todo alineado con el grupo resaltado\n <TimelineGroup key={timelineGroup.key} ownSx={{\n border: 1, borderRadius: 1.5, px: 1.5, pt: 1.25, pb: isExpanded ? 0 : 1.25,\n borderColor: isHighlighted ? 'primary.main' : 'transparent',\n // un tinte del color principal: primary.lighter no existe en el tema de MUI y el grupo se quedaba sin fondo\n bgcolor: (theme) => (isHighlighted ? `color-mix(in srgb, ${paletteOf(theme).primary.main} ${HIGHLIGHT_TINT_PERCENT}%, transparent)` : 'transparent'),\n }}>\n {timelineGroup.title && (\n <TimelineGroupHeader direction=\"row\" spacing={1} ownSx={{alignItems: 'center', justifyContent: isWide ? 'center' : 'flex-start'}}>\n <TimelineGroupButton disabled={!isCollapsible} onClick={() => toggleGroup(timelineGroup.key)}\n aria-expanded={isCollapsible ? isExpanded : undefined}\n ownSx={{gap: 1, px: 1, py: 0.25, borderRadius: 1, '&.Mui-disabled': {pointerEvents: 'none'}}}>\n <TimelineGroupTitle variant=\"h6\" component=\"h3\" ownSx={{fontWeight: 700, color: isMuted ? 'text.secondary' : 'text.primary'}}>\n {timelineGroup.title}\n </TimelineGroupTitle>\n {/* plegado, el grupo dice cuántos eventos trae: se sabe qué hay sin abrirlo */}\n {isCollapsible && timelineGroup.summary && (\n <Typography variant=\"body2\" color=\"text.secondary\" component=\"span\">{timelineGroup.summary}</Typography>\n )}\n {isCollapsible && (\n <TimelineExpandIcon fontSize=\"small\" ownSx={{\n color: 'text.secondary', transition: theme.transitions.create('transform'),\n transform: isExpanded ? 'rotate(180deg)' : 'none',\n }} />\n )}\n </TimelineGroupButton>\n {timelineGroup.badge && <Chip size=\"small\" color=\"primary\" label={timelineGroup.badge} />}\n </TimelineGroupHeader>\n )}\n <Collapse in={isExpanded} unmountOnExit>\n <TimelineTimeline position={isWide ? 'alternate' : 'right'} ownSx={isWide ? ALTERNATE_TIMELINE : LEFT_ALIGNED_TIMELINE}>\n {timelineGroup.items.map((timelineEntry, entryPosition) => {\n const EntryIcon = timelineEntry.icon;\n const isFirstEntry = entryPosition === 0;\n const isLastEntry = entryPosition === timelineGroup.items.length - 1;\n\n return (\n <TimelineItem key={timelineEntry.key}>\n {isWide && (\n <TimelineOpposite variant=\"body2\" color=\"text.secondary\" ownSx={{m: 'auto 0'}}>\n {timelineEntry.timestamp}\n </TimelineOpposite>\n )}\n <TimelineSeparator>\n <TimelineConnectorPart ownSx={{visibility: isFirstEntry ? 'hidden' : 'visible'}} />\n <TimelineDot {...timelineDotOf({emphasis, tone: timelineEntry.tone})}>\n {EntryIcon && <EntryIcon fontSize=\"small\" />}\n </TimelineDot>\n <TimelineConnectorPart ownSx={{visibility: isLastEntry ? 'hidden' : 'visible'}} />\n </TimelineSeparator>\n <TimelineContentPart ownSx={{py: 1.5, px: 2, minWidth: 0}}>\n <TimelineEntryTitle variant=\"body2\" component=\"p\" ownSx={{fontWeight: 600, color: isMuted ? 'text.secondary' : 'text.primary'}}>\n {timelineEntry.title}\n </TimelineEntryTitle>\n {!isWide && timelineEntry.timestamp && (\n <Typography variant=\"caption\" color=\"text.secondary\" component=\"p\">{timelineEntry.timestamp}</Typography>\n )}\n {timelineEntry.details}\n </TimelineContentPart>\n </TimelineItem>\n );\n })}\n </TimelineTimeline>\n </Collapse>\n </TimelineGroup>\n );\n })}\n </Stack>\n );\n}\n"],"names":["theme"],"mappings":"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"}
|
|
@@ -19,6 +19,7 @@ import { toastError } from "../feedback/toast.js";
|
|
|
19
19
|
import { useFormatters } from "../toolkit/useFormatters.js";
|
|
20
20
|
import { resolveAccept, parseFileSize, matchesAccept, FILE_REJECTION } from "./fileRules.js";
|
|
21
21
|
import { piecePart, usePieceProps } from "../theme/themePieces.js";
|
|
22
|
+
import { warnUnknownProps } from "../toolkit/unknownProps.js";
|
|
22
23
|
const THEME_NAME = "CalcitaFileDropzone";
|
|
23
24
|
const DropzoneRoot = piecePart(THEME_NAME, "Root", Paper);
|
|
24
25
|
const DropzoneFileArea = piecePart(THEME_NAME, "FileArea", Box);
|
|
@@ -49,8 +50,10 @@ function FileDropzone(props) {
|
|
|
49
50
|
actions,
|
|
50
51
|
children,
|
|
51
52
|
sx,
|
|
52
|
-
texts
|
|
53
|
+
texts,
|
|
54
|
+
...unknownProps
|
|
53
55
|
} = usePieceProps(props, THEME_NAME);
|
|
56
|
+
warnUnknownProps(THEME_NAME, unknownProps);
|
|
54
57
|
const { t } = useToolkitTranslation("common", texts);
|
|
55
58
|
const { formatFileSize } = useFormatters();
|
|
56
59
|
const inputRef = useRef(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileDropzone.js","sources":["../../src/upload/FileDropzone.jsx"],"sourcesContent":["// La zona para soltar UN archivo, con puro MUI (sin librerías): se suelta o se elige, se revisa su tipo y su peso, y el\n// elegido se ve con su ícono, su nombre y su peso, con la × para quitarlo sin volver a abrir la ventana de archivos.\n//\n// Hay otra con el mismo uso y FilePond por dentro (@stackcraftmx/calcita/filepond): animaciones, varios archivos y\n// avance por archivo. Cambiar de una a otra es cambiar el import.\n//\n// Solo ELIGE el archivo (controlado: value / onChange). Enviarlo es de la pantalla: arma su FormData con los campos que\n// pida su backend y lo sube (uploadWithProgress + uploadMachine). Para eso están los huecos:\n// actions botones junto a «Elegir archivo» (p. ej. el de enviar)\n// children lo que va abajo (campos del formulario, el avance de la subida)\n//\n// Configuración: accept y maxSize (upload/fileRules.js); busy pone el candado mientras se sube (no se puede quitar ni\n// cambiar el archivo a media subida) y busyModal además bloquea toda la pantalla con ModalWaiting.\n//\n// Lo que se rechaza se avisa con toastError y los textos del paquete; con onReject la pantalla decide qué hacer.\n//\n// Mobile primero: en el teléfono no hay arrastrar; el botón es el camino y los botones se apilan a lo ancho.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaFileDropzone con defaultProps y\n// styleOverrides de sus partes: root, fileArea, fileChip, hint, actions, limits, extra.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useRef, useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Chip from '@mui/material/Chip';\nimport Paper from '@mui/material/Paper';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport CancelIcon from '@mui/icons-material/Cancel';\nimport DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';\nimport ImageOutlinedIcon from '@mui/icons-material/ImageOutlined';\nimport InsertDriveFileOutlinedIcon from '@mui/icons-material/InsertDriveFileOutlined';\nimport PictureAsPdfOutlinedIcon from '@mui/icons-material/PictureAsPdfOutlined';\nimport TableViewOutlinedIcon from '@mui/icons-material/TableViewOutlined';\n\nimport ModalWaiting from '@/feedback/ModalWaiting.jsx';\nimport {toastError} from '@/feedback/toast.jsx';\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {FILE_REJECTION, matchesAccept, parseFileSize, resolveAccept} from '@/upload/fileRules.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaFileDropzone)\nconst THEME_NAME = 'CalcitaFileDropzone';\nconst DropzoneRoot = piecePart(THEME_NAME, 'Root', Paper);\nconst DropzoneFileArea = piecePart(THEME_NAME, 'FileArea', Box);\nconst DropzoneFileChip = piecePart(THEME_NAME, 'FileChip', Chip);\nconst DropzoneHint = piecePart(THEME_NAME, 'Hint', Typography);\nconst DropzoneActions = piecePart(THEME_NAME, 'Actions', Stack);\nconst DropzoneLimits = piecePart(THEME_NAME, 'Limits', Typography);\nconst DropzoneExtra = piecePart(THEME_NAME, 'Extra', Box);\n\n// el ícono según el tipo del archivo elegido, con el mismo color que el panel de descargas\nconst FILE_APPEARANCES = [\n {pattern: /\\.(xlsx?|csv)$/, Icon: TableViewOutlinedIcon, color: 'success'},\n {pattern: /\\.pdf$/, Icon: PictureAsPdfOutlinedIcon, color: 'error'},\n {pattern: /\\.(png|jpe?g|gif|webp|svg|avif)$/, Icon: ImageOutlinedIcon, color: 'info'},\n {pattern: /\\.(docx?|txt|md)$/, Icon: DescriptionOutlinedIcon, color: 'primary'},\n];\nconst DEFAULT_FILE_APPEARANCE = {Icon: InsertDriveFileOutlinedIcon, color: 'action'};\n\n/**\n * @param {object} props\n * @param {File|null} [props.value] el archivo elegido\n * @param {(file: File|null) => void} props.onChange null al quitarlo\n * @param {string|string[]} [props.accept] 'excel' | ['excel', 'pdf'] | '.xlsx,.xls' | 'image/*'\n * @param {number|string} [props.maxSize] bytes o '10 MB'\n * @param {string} [props.hint] ya traducido; por omisión «Arrastre aquí su archivo»\n * @param {string} [props.buttonLabel] ya traducido; por omisión «Elegir archivo»\n * @param {boolean} [props.disabled]\n * @param {boolean} [props.busy] candado mientras se sube: no se puede soltar, elegir ni quitar\n * @param {boolean|{title?: string, text?: string}} [props.busyModal] además bloquea la pantalla mientras busy\n * @param {(file: File, reason: string) => void} [props.onReject] reason es uno de FILE_REJECTION; sin él, un aviso\n * @param {import('react').ReactNode} [props.actions]\n * @param {import('react').ReactNode} [props.children]\n * @param {object} [props.sx] ajustes del recuadro\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function FileDropzone(props) {\n // lo que el proyecto puso en su tema (components.CalcitaFileDropzone.defaultProps) y encima lo que llega aquí\n const {\n value = null, onChange, accept, maxSize, hint, buttonLabel, disabled = false, busy = false, busyModal = false, onReject, actions,\n children, sx, texts,\n} = usePieceProps(props, THEME_NAME);\n const {t} = useToolkitTranslation('common', texts);\n const {formatFileSize} = useFormatters();\n const inputRef = useRef(null);\n const [isDragging, setIsDragging] = useState(false);\n const isLocked = disabled || busy;\n const resolvedAccept = resolveAccept(accept);\n const maxBytes = parseFileSize(maxSize);\n const hintText = hint ?? t('upload.hint');\n\n const reject = (file, reason) => {\n if (onReject) {\n onReject(file, reason);\n return;\n }\n const message = reason === FILE_REJECTION.size\n ? t('upload.tooLarge', {name: file.name, max: formatFileSize(maxBytes)})\n : t('upload.invalidType', {name: file.name, accept: resolvedAccept});\n toastError(message);\n };\n\n const pick = (file) => {\n // guard clause: se cerró la ventana sin elegir, o el candado está puesto\n if (!file || isLocked) {\n return;\n }\n if (!matchesAccept(file, resolvedAccept)) {\n reject(file, FILE_REJECTION.type);\n return;\n }\n if (maxBytes && file.size > maxBytes) {\n reject(file, FILE_REJECTION.size);\n return;\n }\n onChange(file);\n };\n\n const openPicker = () => {\n // OJO: se limpia el valor del input para poder volver a elegir EL MISMO archivo (corregido en disco); sin esto\n // el navegador no avisa el cambio\n if (inputRef.current) {\n inputRef.current.value = '';\n }\n inputRef.current?.click();\n };\n\n const appearance = value\n ? FILE_APPEARANCES.find(({pattern}) => pattern.test(value.name.toLowerCase())) ?? DEFAULT_FILE_APPEARANCE\n : null;\n\n return (\n <DropzoneRoot\n variant=\"outlined\"\n aria-busy={busy}\n onDragOver={(event) => {\n event.preventDefault();\n setIsDragging(!isLocked);\n }}\n onDragLeave={() => setIsDragging(false)}\n onDrop={(event) => {\n event.preventDefault();\n setIsDragging(false);\n pick(event.dataTransfer.files?.[0]);\n }}\n ownSx={{\n p: {xs: 3, sm: 5},\n textAlign: 'center',\n borderStyle: 'dashed',\n borderWidth: 2,\n borderColor: isDragging ? 'primary.main' : 'divider',\n bgcolor: isDragging ? 'action.hover' : 'background.paper',\n transition: 'border-color .15s ease, background-color .15s ease',\n opacity: disabled ? 0.6 : 1,\n ...sx,\n }}\n >\n <input ref={inputRef} type=\"file\" accept={resolvedAccept} hidden disabled={isLocked} aria-label={hintText}\n onChange={(event) => pick(event.target.files?.[0])} />\n {value ? (\n <DropzoneFileArea ownSx={{mb: 2}}>\n <DropzoneFileChip\n icon={<appearance.Icon fontSize=\"small\" color={appearance.color} />}\n label={`${value.name} · ${formatFileSize(value.size)}`}\n variant=\"outlined\"\n onDelete={isLocked ? undefined : () => onChange(null)}\n deleteIcon={<CancelIcon aria-label={t('upload.remove', {name: value.name})} />}\n ownSx={{maxWidth: '100%', height: 'auto', py: 0.5, '& .MuiChip-label': {whiteSpace: 'normal', overflowWrap: 'anywhere'}}}\n />\n </DropzoneFileArea>\n ) : (\n <DropzoneHint variant=\"body1\" ownSx={{mb: 2, overflowWrap: 'anywhere'}}>{hintText}</DropzoneHint>\n )}\n <DropzoneActions direction={{xs: 'column', sm: 'row'}} spacing={2} ownSx={{justifyContent: 'center', alignItems: {xs: 'stretch', sm: 'center'}}}>\n <Button variant=\"outlined\" onClick={openPicker} disabled={isLocked}>{buttonLabel ?? t('upload.choose')}</Button>\n {actions}\n </DropzoneActions>\n {/* el límite, discreto, solo si hay límite */}\n {maxBytes && (\n <DropzoneLimits variant=\"caption\" color=\"text.secondary\" ownSx={{display: 'block', mt: 1.5}}>\n {t('upload.maxSizeHint', {max: formatFileSize(maxBytes)})}\n </DropzoneLimits>\n )}\n {children && <DropzoneExtra ownSx={{mt: 3, textAlign: 'left'}}>{children}</DropzoneExtra>}\n {busyModal && <ModalWaiting open={busy} title={busyModal.title} text={busyModal.text} />}\n </DropzoneRoot>\n );\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"FileDropzone.js","sources":["../../src/upload/FileDropzone.jsx"],"sourcesContent":["// La zona para soltar UN archivo, con puro MUI (sin librerías): se suelta o se elige, se revisa su tipo y su peso, y el\n// elegido se ve con su ícono, su nombre y su peso, con la × para quitarlo sin volver a abrir la ventana de archivos.\n//\n// Hay otra con el mismo uso y FilePond por dentro (@stackcraftmx/calcita/filepond): animaciones, varios archivos y\n// avance por archivo. Cambiar de una a otra es cambiar el import.\n//\n// Solo ELIGE el archivo (controlado: value / onChange). Enviarlo es de la pantalla: arma su FormData con los campos que\n// pida su backend y lo sube (uploadWithProgress + uploadMachine). Para eso están los huecos:\n// actions botones junto a «Elegir archivo» (p. ej. el de enviar)\n// children lo que va abajo (campos del formulario, el avance de la subida)\n//\n// Configuración: accept y maxSize (upload/fileRules.js); busy pone el candado mientras se sube (no se puede quitar ni\n// cambiar el archivo a media subida) y busyModal además bloquea toda la pantalla con ModalWaiting.\n//\n// Lo que se rechaza se avisa con toastError y los textos del paquete; con onReject la pantalla decide qué hacer.\n//\n// Mobile primero: en el teléfono no hay arrastrar; el botón es el camino y los botones se apilan a lo ancho.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaFileDropzone con defaultProps y\n// styleOverrides de sus partes: root, fileArea, fileChip, hint, actions, limits, extra.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useRef, useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Chip from '@mui/material/Chip';\nimport Paper from '@mui/material/Paper';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport CancelIcon from '@mui/icons-material/Cancel';\nimport DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';\nimport ImageOutlinedIcon from '@mui/icons-material/ImageOutlined';\nimport InsertDriveFileOutlinedIcon from '@mui/icons-material/InsertDriveFileOutlined';\nimport PictureAsPdfOutlinedIcon from '@mui/icons-material/PictureAsPdfOutlined';\nimport TableViewOutlinedIcon from '@mui/icons-material/TableViewOutlined';\n\nimport ModalWaiting from '@/feedback/ModalWaiting.jsx';\nimport {toastError} from '@/feedback/toast.jsx';\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {FILE_REJECTION, matchesAccept, parseFileSize, resolveAccept} from '@/upload/fileRules.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaFileDropzone)\nconst THEME_NAME = 'CalcitaFileDropzone';\nconst DropzoneRoot = piecePart(THEME_NAME, 'Root', Paper);\nconst DropzoneFileArea = piecePart(THEME_NAME, 'FileArea', Box);\nconst DropzoneFileChip = piecePart(THEME_NAME, 'FileChip', Chip);\nconst DropzoneHint = piecePart(THEME_NAME, 'Hint', Typography);\nconst DropzoneActions = piecePart(THEME_NAME, 'Actions', Stack);\nconst DropzoneLimits = piecePart(THEME_NAME, 'Limits', Typography);\nconst DropzoneExtra = piecePart(THEME_NAME, 'Extra', Box);\n\n// el ícono según el tipo del archivo elegido, con el mismo color que el panel de descargas\nconst FILE_APPEARANCES = [\n {pattern: /\\.(xlsx?|csv)$/, Icon: TableViewOutlinedIcon, color: 'success'},\n {pattern: /\\.pdf$/, Icon: PictureAsPdfOutlinedIcon, color: 'error'},\n {pattern: /\\.(png|jpe?g|gif|webp|svg|avif)$/, Icon: ImageOutlinedIcon, color: 'info'},\n {pattern: /\\.(docx?|txt|md)$/, Icon: DescriptionOutlinedIcon, color: 'primary'},\n];\nconst DEFAULT_FILE_APPEARANCE = {Icon: InsertDriveFileOutlinedIcon, color: 'action'};\n\n/**\n * @param {object} props\n * @param {File|null} [props.value] el archivo elegido\n * @param {(file: File|null) => void} props.onChange null al quitarlo\n * @param {string|string[]} [props.accept] 'excel' | ['excel', 'pdf'] | '.xlsx,.xls' | 'image/*'\n * @param {number|string} [props.maxSize] bytes o '10 MB'\n * @param {string} [props.hint] ya traducido; por omisión «Arrastre aquí su archivo»\n * @param {string} [props.buttonLabel] ya traducido; por omisión «Elegir archivo»\n * @param {boolean} [props.disabled]\n * @param {boolean} [props.busy] candado mientras se sube: no se puede soltar, elegir ni quitar\n * @param {boolean|{title?: string, text?: string}} [props.busyModal] además bloquea la pantalla mientras busy\n * @param {(file: File, reason: string) => void} [props.onReject] reason es uno de FILE_REJECTION; sin él, un aviso\n * @param {import('react').ReactNode} [props.actions]\n * @param {import('react').ReactNode} [props.children]\n * @param {object} [props.sx] ajustes del recuadro\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function FileDropzone(props) {\n // lo que el proyecto puso en su tema (components.CalcitaFileDropzone.defaultProps) y encima lo que llega aquí\n const {\n value = null, onChange, accept, maxSize, hint, buttonLabel, disabled = false, busy = false, busyModal = false, onReject, actions,\n children, sx, texts,\n ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n warnUnknownProps(THEME_NAME, unknownProps);\n const {t} = useToolkitTranslation('common', texts);\n const {formatFileSize} = useFormatters();\n const inputRef = useRef(null);\n const [isDragging, setIsDragging] = useState(false);\n const isLocked = disabled || busy;\n const resolvedAccept = resolveAccept(accept);\n const maxBytes = parseFileSize(maxSize);\n const hintText = hint ?? t('upload.hint');\n\n const reject = (file, reason) => {\n if (onReject) {\n onReject(file, reason);\n return;\n }\n const message = reason === FILE_REJECTION.size\n ? t('upload.tooLarge', {name: file.name, max: formatFileSize(maxBytes)})\n : t('upload.invalidType', {name: file.name, accept: resolvedAccept});\n toastError(message);\n };\n\n const pick = (file) => {\n // guard clause: se cerró la ventana sin elegir, o el candado está puesto\n if (!file || isLocked) {\n return;\n }\n if (!matchesAccept(file, resolvedAccept)) {\n reject(file, FILE_REJECTION.type);\n return;\n }\n if (maxBytes && file.size > maxBytes) {\n reject(file, FILE_REJECTION.size);\n return;\n }\n onChange(file);\n };\n\n const openPicker = () => {\n // OJO: se limpia el valor del input para poder volver a elegir EL MISMO archivo (corregido en disco); sin esto\n // el navegador no avisa el cambio\n if (inputRef.current) {\n inputRef.current.value = '';\n }\n inputRef.current?.click();\n };\n\n const appearance = value\n ? FILE_APPEARANCES.find(({pattern}) => pattern.test(value.name.toLowerCase())) ?? DEFAULT_FILE_APPEARANCE\n : null;\n\n return (\n <DropzoneRoot\n variant=\"outlined\"\n aria-busy={busy}\n onDragOver={(event) => {\n event.preventDefault();\n setIsDragging(!isLocked);\n }}\n onDragLeave={() => setIsDragging(false)}\n onDrop={(event) => {\n event.preventDefault();\n setIsDragging(false);\n pick(event.dataTransfer.files?.[0]);\n }}\n ownSx={{\n p: {xs: 3, sm: 5},\n textAlign: 'center',\n borderStyle: 'dashed',\n borderWidth: 2,\n borderColor: isDragging ? 'primary.main' : 'divider',\n bgcolor: isDragging ? 'action.hover' : 'background.paper',\n transition: 'border-color .15s ease, background-color .15s ease',\n opacity: disabled ? 0.6 : 1,\n ...sx,\n }}\n >\n <input ref={inputRef} type=\"file\" accept={resolvedAccept} hidden disabled={isLocked} aria-label={hintText}\n onChange={(event) => pick(event.target.files?.[0])} />\n {value ? (\n <DropzoneFileArea ownSx={{mb: 2}}>\n <DropzoneFileChip\n icon={<appearance.Icon fontSize=\"small\" color={appearance.color} />}\n label={`${value.name} · ${formatFileSize(value.size)}`}\n variant=\"outlined\"\n onDelete={isLocked ? undefined : () => onChange(null)}\n deleteIcon={<CancelIcon aria-label={t('upload.remove', {name: value.name})} />}\n ownSx={{maxWidth: '100%', height: 'auto', py: 0.5, '& .MuiChip-label': {whiteSpace: 'normal', overflowWrap: 'anywhere'}}}\n />\n </DropzoneFileArea>\n ) : (\n <DropzoneHint variant=\"body1\" ownSx={{mb: 2, overflowWrap: 'anywhere'}}>{hintText}</DropzoneHint>\n )}\n <DropzoneActions direction={{xs: 'column', sm: 'row'}} spacing={2} ownSx={{justifyContent: 'center', alignItems: {xs: 'stretch', sm: 'center'}}}>\n <Button variant=\"outlined\" onClick={openPicker} disabled={isLocked}>{buttonLabel ?? t('upload.choose')}</Button>\n {actions}\n </DropzoneActions>\n {/* el límite, discreto, solo si hay límite */}\n {maxBytes && (\n <DropzoneLimits variant=\"caption\" color=\"text.secondary\" ownSx={{display: 'block', mt: 1.5}}>\n {t('upload.maxSizeHint', {max: formatFileSize(maxBytes)})}\n </DropzoneLimits>\n )}\n {children && <DropzoneExtra ownSx={{mt: 3, textAlign: 'left'}}>{children}</DropzoneExtra>}\n {busyModal && <ModalWaiting open={busy} title={busyModal.title} text={busyModal.text} />}\n </DropzoneRoot>\n );\n}\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stackcraftmx/calcita",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.32.0",
|
|
4
4
|
"description": "Componentes y utilidades de React con MUI para arrancar proyectos rápido: tabla de servidor, diálogos, avisos, descargas, formularios, formatos y reportes en Excel.",
|
|
5
5
|
"license": "FSL-1.1-MIT",
|
|
6
6
|
"author": "calcifux",
|