@economic/taco 2.18.0 → 2.19.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/dist/components/Select2/Select2.d.ts +2 -0
- package/dist/components/Select2/components/Context.d.ts +2 -0
- package/dist/components/Select2/components/Group.d.ts +2 -0
- package/dist/components/Select2/components/Option.d.ts +3 -0
- package/dist/components/Table3/Table3.d.ts +1 -1
- package/dist/components/Table3/components/toolbar/FontSize.d.ts +0 -4
- package/dist/components/Table3/hooks/useCssGrid.d.ts +2 -2
- package/dist/components/Table3/hooks/useCssVars.d.ts +3 -2
- package/dist/components/Table3/types.d.ts +4 -4
- package/dist/esm/index.css +12 -12
- package/dist/esm/packages/taco/src/components/Select2/Select2.js +2 -0
- package/dist/esm/packages/taco/src/components/Select2/Select2.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Select2/components/Context.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Select2/components/Group.js +4 -1
- package/dist/esm/packages/taco/src/components/Select2/components/Group.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Select2/components/Option.js +8 -2
- package/dist/esm/packages/taco/src/components/Select2/components/Option.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Select2/hooks/useChildren.js +1 -1
- package/dist/esm/packages/taco/src/components/Select2/hooks/useChildren.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/Table3.js +4 -5
- package/dist/esm/packages/taco/src/components/Table3/Table3.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingControl.js +1 -0
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingControl.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/controls/TextareaControl.js +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/controls/TextareaControl.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Actions.js +3 -3
- package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Actions.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/FontSize.js +5 -9
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/FontSize.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/PrintButton/PrintIFrame.js +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/RowHeight.js +3 -3
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/RowHeight.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Settings.js +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/useCssGrid.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/useCssVars.js +10 -10
- package/dist/esm/packages/taco/src/components/Table3/hooks/useCssVars.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/types.js.map +1 -1
- package/dist/esm/packages/taco/src/index.js +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTable/features/useTableFontSize.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTable/listeners/useTableFontSizeListener.js +7 -7
- package/dist/esm/packages/taco/src/primitives/Table/useTable/listeners/useTableFontSizeListener.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTable/util/columns.js +4 -4
- package/dist/esm/packages/taco/src/primitives/Table/useTable/util/columns.js.map +1 -1
- package/dist/esm/packages/taco/src/types.js +7 -1
- package/dist/esm/packages/taco/src/types.js.map +1 -1
- package/dist/index.css +12 -12
- package/dist/primitives/Table/types.d.ts +0 -6
- package/dist/primitives/Table/useTable/features/useTableFontSize.d.ts +2 -2
- package/dist/primitives/Table/useTable/util/columns.d.ts +2 -2
- package/dist/taco.cjs.development.js +67 -64
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/dist/types.d.ts +6 -0
- package/package.json +2 -2
- package/types.json +10671 -10529
- package/dist/esm/packages/taco/src/primitives/Table/types.js +0 -10
- package/dist/esm/packages/taco/src/primitives/Table/types.js.map +0 -1
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Table3.js","sources":["../../../../../../../src/components/Table3/Table3.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { flexRender, TableMeta } from '@tanstack/react-table';\nimport { FocusScope } from '@react-aria/focus';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { useCssGrid } from './hooks/useCssGrid';\nimport { useTable } from './hooks/useTable';\nimport { useTableRenderStrategy } from './strategies';\nimport { Table3ColumnProps, Table3GroupProps, Table3Props, Table3Ref } from './types';\nimport { Toolbar } from './components/toolbar/Toolbar';\nimport { useColumnFreezingStyle } from './hooks/features/useColumnFreezing';\nimport { useTableRefInstanceSetup } from './hooks/useTableRefInstanceSetup';\nimport { Summary } from './components/columns/footer/Summary';\nimport { useCssVars } from './hooks/useCssVars';\nimport './style.css';\nimport { useHeaderOffsetStyle } from './hooks/features/useHeaderOffsetStyle';\nimport { FONT_SIZE } from './components/toolbar/FontSize';\nimport { ErrorAlert } from './components/alert/ErrorAlert';\nimport { fixedForwardRef } from '../../types';\n\nfunction Column<TType = unknown>(_: Table3ColumnProps<TType>) {\n return null;\n}\nColumn.displayName = 'Table3Column';\n\nfunction Group(_: Table3GroupProps) {\n return null;\n}\nGroup.displayName = 'Table3Group';\n\nconst Table = fixedForwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n const {\n emptyState: EmptyState,\n customSettings,\n toolbarLeft,\n toolbarRight,\n defaultCurrentRowIndex: defaultRowActiveIndex,\n } = props;\n const internalRef = useMergedRef<Table3Ref>(ref);\n\n const { table, length } = useTable<TType>(props, internalRef);\n useTableRefInstanceSetup(table, internalRef);\n\n React.useEffect(() => {\n if (props.autoFocus) {\n internalRef.current?.focus();\n }\n }, []);\n\n const { renderBody, scrollToIndex } = useTableRenderStrategy<TType>(props, table, internalRef);\n const tableMeta = table.options.meta as TableMeta<TType>;\n const state = table.getState();\n\n const bodyRef = React.useRef<HTMLDivElement | null>(null);\n\n React.useEffect(() => {\n // On a very first render, the tanstack table rendered without any rows,\n // so we delaying default row scrolling logic with using of requestAnimation frame\n const animationFrameId = requestAnimationFrame(() => {\n if (defaultRowActiveIndex) {\n scrollToIndex(defaultRowActiveIndex, { align: 'center' });\n }\n });\n\n return () => {\n cancelAnimationFrame(animationFrameId);\n };\n }, []);\n\n React.useEffect(\n () => {\n const handleKeyDown = (event: KeyboardEvent) => {\n const target = event.target as HTMLElement;\n const dialog = target.closest('[role=\"dialog\"]');\n // Select2 also have combobox role to align with W3C guidelines\n const eventOriginatedFromCombobox = !!target.closest('[role=\"combobox\"]:not([data-taco=\"Select2\"])');\n\n // Don't trigger global shortcuts on the table if event originated from a combobox or if table is\n // outside the dialog\n if (\n eventOriginatedFromCombobox ||\n (dialog && !dialog?.contains(internalRef.current)) ||\n tableMeta.shortcutsState.isPaused\n ) {\n return;\n }\n\n const rows = table.getRowModel().rows;\n\n tableMeta.rowActive.handleKeyDown(\n event,\n rows.length,\n scrollToIndex,\n tableMeta.editing.isEditing ? undefined : internalRef\n );\n if (tableMeta.rowActive.rowActiveIndex !== undefined) {\n tableMeta.rowClick.handleKeyDown(event, rows[tableMeta.rowActive.rowActiveIndex]?.original);\n }\n tableMeta.rowSelection.handleKeyDown(event, table);\n tableMeta.editing.handleKeyDown(event);\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n },\n // See https://github.com/e-conomic/taco/blob/dev/packages/taco/src/components/Table3/strategies/virtualised.tsx#L143\n // scrollToIndex function changes when row count changes, so it is important to update handlers with new\n // scrollToIndex function.\n [scrollToIndex, tableMeta.editing.isEditing, internalRef.current, tableMeta.rowActive.rowActiveIndex]\n );\n\n const handleBlur = tableMeta.editing.isEnabled\n ? (event: React.FocusEvent) => {\n tableMeta.editing.handleBlur(event);\n }\n : undefined;\n\n const handleFocus =\n tableMeta.rowActive.rowActiveIndex === undefined\n ? (event: React.FocusEvent) => {\n tableMeta.rowActive.handleFocus(event, table.getRowModel().rows.length, scrollToIndex);\n }\n : undefined;\n\n // mouse capture fires before focus, so we can prevent propagation and stop double setting of the active row\n const handleMouseCapture =\n tableMeta.rowActive.rowActiveIndex === undefined\n ? (event: React.MouseEvent) => {\n tableMeta.rowActive.handleMouseCapture(event, table.getRowModel().rows.length);\n }\n : undefined;\n\n const handleScroll = async (event: React.MouseEvent<HTMLDivElement>) => {\n tableMeta.columnFreezing.handleScroll(event);\n };\n\n const className = cn(\n 'border-grey-300 relative grid h-full w-full flex-grow overflow-auto rounded border bg-white scroll-mt-[41px] focus-visible:outline-none',\n '[&[data-resizing=\"true\"]]:select-none',\n {\n 'text-xs': tableMeta.fontSize.size === FONT_SIZE.small,\n 'text-sm': tableMeta.fontSize.size === FONT_SIZE.medium,\n 'text-base': tableMeta.fontSize.size === FONT_SIZE.large,\n }\n );\n\n // Print tables have \"_print\" as the postfix for the table id, so we can use the it to determine\n // if the table is a print table or not.\n const { style: cssGridStyle } = useCssGrid<TType>(\n table,\n tableMeta.printing.isPrinting,\n tableMeta.rowActions.actionsForRowLength,\n tableMeta.fontSize.size\n );\n const { style: cssVars } = useCssVars(tableMeta.rowHeight.height, tableMeta.fontSize.size);\n\n const style = {\n ...cssVars,\n ...cssGridStyle,\n // create a new stacking context so our internal z-indexes don't effect external components\n // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n opacity: 0.999,\n };\n\n const columnFreezingStyle = useColumnFreezingStyle(props.id, table);\n const headerOffsetStyle = useHeaderOffsetStyle(props.id, table);\n const isServerLoadingAndNotReady = tableMeta.isUsingServer && props.length === undefined;\n\n return (\n <>\n {columnFreezingStyle ? <style data-taco=\"table3-column-freezing-styles\">{columnFreezingStyle}</style> : null}\n {headerOffsetStyle && !tableMeta.printing.isPrinting ? (\n <style data-taco=\"table3-column-header-offset-styles\">{headerOffsetStyle}</style>\n ) : null}\n <Toolbar\n table={table}\n tableProps={props}\n total={length}\n left={toolbarLeft}\n right={toolbarRight}\n customSettings={customSettings}\n scrollToIndex={scrollToIndex}\n />\n <ErrorAlert table={table} tableRef={internalRef} scrollToIndex={scrollToIndex} rowIdentifier={props.rowIdentifier} />\n <div\n className={className}\n id={props.id}\n data-font-size={tableMeta.fontSize.size}\n data-editing={tableMeta.editing.isEditing}\n data-horizontally-scrolled={tableMeta.columnFreezing.horizontallyScrolled}\n data-pause-hover={tableMeta?.rowActive.isHoverStatePaused}\n data-resizing={!!state.columnSizingInfo.isResizingColumn}\n data-taco=\"table2\"\n onBlur={handleBlur}\n onFocus={handleFocus}\n onScroll={handleScroll}\n ref={internalRef}\n role=\"table\"\n style={style}\n tabIndex={-1}>\n {isServerLoadingAndNotReady ? null : (\n <div className=\"group/header contents\" data-taco=\"table2-header\" role=\"rowgroup\">\n {table.getHeaderGroups().map(headerGroup => (\n <div className=\"contents\" key={headerGroup.id} role=\"row\">\n {headerGroup.headers.map((header, index) => {\n // We need to render separator if column is not the last in array, if index is not equal to freeze column index,\n // if next element is not placeholder and if column itself is not placeholder.\n const hasSeparator =\n index !== tableMeta.columnFreezing.frozenColumnIndex &&\n index !== headerGroup.headers.length - 1 &&\n (!headerGroup.headers[index + 1]?.isPlaceholder || !header.isPlaceholder);\n return (\n <React.Fragment key={header.id}>\n {flexRender(header.column.columnDef.header, {\n ...header.getContext(),\n scrollToIndex,\n hasSeparator,\n })}\n </React.Fragment>\n );\n })}\n </div>\n ))}\n </div>\n )}\n {table.getRowModel().rows.length ? (\n <>\n <FocusScope autoFocus={tableMeta.editing.isEditing}>\n <div\n onMouseDownCapture={handleMouseCapture}\n className=\"group/body contents\"\n data-taco=\"table2-body\"\n role=\"rowgroup\"\n ref={bodyRef}>\n {renderBody()}\n </div>\n </FocusScope>\n {/* This div makes sure that there is always a free space between the rows and footer when\n table height exceeds the cumulative height of all rows. See useCSSGrid.ts */}\n {/* By vertically translating the div a pixel down, we hide the div border below footer so that\n the footer border doesn't appear an extra pixel thick */}\n <div className=\"border-grey-300 col-span-full translate-y-px border-t\" />\n {tableMeta.enableFooter ? (\n <div className=\"group/footer contents\" data-taco=\"table2-footer\" role=\"rowgroup\">\n {\n // Render the footer cell only for individual columns, excluding column groups.\n table\n .getFooterGroups()\n .slice(0, 1)\n .map(footerGroup => (\n <div className=\"contents\" key={footerGroup.id} role=\"row\">\n {footerGroup.headers.map(footer => (\n <React.Fragment key={footer.id}>\n {flexRender(footer.column.columnDef.footer, footer.getContext())}\n </React.Fragment>\n ))}\n </div>\n ))\n }\n {length ? (\n <Summary currentLength={table.getRowModel().rows.length} length={length} table={table} />\n ) : null}\n </div>\n ) : null}\n </>\n ) : (\n <div className=\"col-span-full min-h-[theme(spacing.8)]\">{EmptyState ? <EmptyState /> : null}</div>\n )}\n </div>\n </>\n );\n});\n\ntype Table3WithStatics = (<TType = unknown>(props: Table3Props<TType> & React.RefAttributes<Table3Ref>) => JSX.Element) & {\n Column: typeof Column;\n Group: typeof Group;\n};\n\nexport const Table3 = fixedForwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n const stringifiedChildren = String(props.children);\n // we force a remount (using key) when the child columns change because there are too many places to add children as an effect\n // this is cheaper from a complexity perspective, and probably performance wise as well\n const key = React.useMemo(() => String('tableKey_' + stringifiedChildren), [stringifiedChildren]);\n return <Table<TType> {...props} key={key} ref={ref} />;\n}) as Table3WithStatics;\nTable3.Column = Column;\nTable3.Group = Group;\n\n// hooks\nexport { useTable3DataLoader } from './hooks/useTableDataLoader';\n\n// types\nexport type {\n useTable3DataFetcher,\n useTable3DataOptions,\n useTable3DataFetcherValues as useTableDataValues,\n} from './hooks/useTableDataLoader';\n\nexport type {\n Table3Ref,\n Table3Props,\n Table3Preset,\n Table3Settings,\n Table3SettingsHandler,\n Table3RowHeight,\n Table3FilterComparator,\n Table3FilterHandler,\n Table3LoadPageHandler,\n Table3LoadAllHandler,\n Table3RowGotoHandler,\n Table3SortHandler,\n Table3Shortcuts,\n Table3ShortcutHandlerFn,\n Table3ShortcutHandlerObject,\n Table3FontSize,\n Table3SortDirection,\n Table3SortFn,\n Table3RowActionRenderer,\n Table3RowSelectionHandler,\n Table3RowExpansionRenderer,\n Table3RowDropHandler,\n Table3RowDragHandler,\n Table3RowClickHandler,\n Table3ColumnProps,\n Table3ColumnAlignment,\n Table3ColumnDataType,\n Table3ColumnHeaderMenu,\n Table3ColumnClassNameHandler,\n Table3ColumnFooterRenderer,\n Table3ColumnRenderer,\n Table3ColumnControlRenderer,\n Table3ColumnControlProps,\n} from './types';\n"],"names":["Column","_","displayName","Group","Table","fixedForwardRef","Table3","props","ref","emptyState","EmptyState","customSettings","toolbarLeft","toolbarRight","defaultCurrentRowIndex","defaultRowActiveIndex","internalRef","useMergedRef","table","length","useTable","useTableRefInstanceSetup","React","useEffect","autoFocus","_internalRef$current","current","focus","renderBody","scrollToIndex","useTableRenderStrategy","tableMeta","options","meta","state","getState","bodyRef","useRef","animationFrameId","requestAnimationFrame","align","cancelAnimationFrame","handleKeyDown","event","target","dialog","closest","eventOriginatedFromCombobox","contains","shortcutsState","isPaused","rows","getRowModel","rowActive","editing","isEditing","undefined","rowActiveIndex","_rows$tableMeta$rowAc","rowClick","original","rowSelection","document","addEventListener","removeEventListener","handleBlur","isEnabled","handleFocus","handleMouseCapture","handleScroll","columnFreezing","Promise","resolve","e","reject","className","cn","fontSize","size","FONT_SIZE","small","medium","large","style","cssGridStyle","useCssGrid","printing","isPrinting","rowActions","actionsForRowLength","cssVars","useCssVars","rowHeight","height","opacity","columnFreezingStyle","useColumnFreezingStyle","id","headerOffsetStyle","useHeaderOffsetStyle","isServerLoadingAndNotReady","isUsingServer","Toolbar","tableProps","total","left","right","ErrorAlert","tableRef","rowIdentifier","horizontallyScrolled","isHoverStatePaused","columnSizingInfo","isResizingColumn","onBlur","onFocus","onScroll","role","tabIndex","getHeaderGroups","map","headerGroup","key","headers","header","index","hasSeparator","frozenColumnIndex","_headerGroup$headers","isPlaceholder","Fragment","flexRender","column","columnDef","getContext","FocusScope","onMouseDownCapture","enableFooter","getFooterGroups","slice","footerGroup","footer","Summary","currentLength","stringifiedChildren","String","children","useMemo"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"Table3.js","sources":["../../../../../../../src/components/Table3/Table3.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { flexRender, TableMeta } from '@tanstack/react-table';\nimport { FocusScope } from '@react-aria/focus';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { useCssGrid } from './hooks/useCssGrid';\nimport { useTable } from './hooks/useTable';\nimport { useTableRenderStrategy } from './strategies';\nimport { Table3ColumnProps, Table3GroupProps, Table3Props, Table3Ref } from './types';\nimport { Toolbar } from './components/toolbar/Toolbar';\nimport { useColumnFreezingStyle } from './hooks/features/useColumnFreezing';\nimport { useTableRefInstanceSetup } from './hooks/useTableRefInstanceSetup';\nimport { Summary } from './components/columns/footer/Summary';\nimport { useCssVars } from './hooks/useCssVars';\nimport './style.css';\nimport { useHeaderOffsetStyle } from './hooks/features/useHeaderOffsetStyle';\nimport { ErrorAlert } from './components/alert/ErrorAlert';\nimport { fixedForwardRef, FontSizes } from '../../types';\n\nfunction Column<TType = unknown>(_: Table3ColumnProps<TType>) {\n return null;\n}\nColumn.displayName = 'Table3Column';\n\nfunction Group(_: Table3GroupProps) {\n return null;\n}\nGroup.displayName = 'Table3Group';\n\nconst Table = fixedForwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n const {\n emptyState: EmptyState,\n customSettings,\n toolbarLeft,\n toolbarRight,\n defaultCurrentRowIndex: defaultRowActiveIndex,\n } = props;\n const internalRef = useMergedRef<Table3Ref>(ref);\n\n const { table, length } = useTable<TType>(props, internalRef);\n useTableRefInstanceSetup(table, internalRef);\n\n React.useEffect(() => {\n if (props.autoFocus) {\n internalRef.current?.focus();\n }\n }, []);\n\n const { renderBody, scrollToIndex } = useTableRenderStrategy<TType>(props, table, internalRef);\n const tableMeta = table.options.meta as TableMeta<TType>;\n const state = table.getState();\n\n const bodyRef = React.useRef<HTMLDivElement | null>(null);\n\n React.useEffect(() => {\n // On a very first render, the tanstack table rendered without any rows,\n // so we delaying default row scrolling logic with using of requestAnimation frame\n const animationFrameId = requestAnimationFrame(() => {\n if (defaultRowActiveIndex) {\n scrollToIndex(defaultRowActiveIndex, { align: 'center' });\n }\n });\n\n return () => {\n cancelAnimationFrame(animationFrameId);\n };\n }, []);\n\n React.useEffect(\n () => {\n const handleKeyDown = (event: KeyboardEvent) => {\n const target = event.target as HTMLElement;\n const dialog = target.closest('[role=\"dialog\"]');\n // Select2 also have combobox role to align with W3C guidelines\n const eventOriginatedFromCombobox = !!target.closest('[role=\"combobox\"]:not([data-taco=\"Select2\"])');\n\n // Don't trigger global shortcuts on the table if event originated from a combobox or if table is\n // outside the dialog\n if (\n eventOriginatedFromCombobox ||\n (dialog && !dialog?.contains(internalRef.current)) ||\n tableMeta.shortcutsState.isPaused\n ) {\n return;\n }\n\n const rows = table.getRowModel().rows;\n\n tableMeta.rowActive.handleKeyDown(\n event,\n rows.length,\n scrollToIndex,\n tableMeta.editing.isEditing ? undefined : internalRef\n );\n if (tableMeta.rowActive.rowActiveIndex !== undefined) {\n tableMeta.rowClick.handleKeyDown(event, rows[tableMeta.rowActive.rowActiveIndex]?.original);\n }\n tableMeta.rowSelection.handleKeyDown(event, table);\n tableMeta.editing.handleKeyDown(event);\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n },\n // See https://github.com/e-conomic/taco/blob/dev/packages/taco/src/components/Table3/strategies/virtualised.tsx#L143\n // scrollToIndex function changes when row count changes, so it is important to update handlers with new\n // scrollToIndex function.\n [scrollToIndex, tableMeta.editing.isEditing, internalRef.current, tableMeta.rowActive.rowActiveIndex]\n );\n\n const handleBlur = tableMeta.editing.isEnabled\n ? (event: React.FocusEvent) => {\n tableMeta.editing.handleBlur(event);\n }\n : undefined;\n\n const handleFocus =\n tableMeta.rowActive.rowActiveIndex === undefined\n ? (event: React.FocusEvent) => {\n tableMeta.rowActive.handleFocus(event, table.getRowModel().rows.length, scrollToIndex);\n }\n : undefined;\n\n // mouse capture fires before focus, so we can prevent propagation and stop double setting of the active row\n const handleMouseCapture =\n tableMeta.rowActive.rowActiveIndex === undefined\n ? (event: React.MouseEvent) => {\n tableMeta.rowActive.handleMouseCapture(event, table.getRowModel().rows.length);\n }\n : undefined;\n\n const handleScroll = async (event: React.MouseEvent<HTMLDivElement>) => {\n tableMeta.columnFreezing.handleScroll(event);\n };\n\n const className = cn(\n 'border-grey-300 relative grid h-full w-full flex-grow overflow-auto rounded border bg-white scroll-mt-[41px] focus-visible:outline-none',\n '[&[data-resizing=\"true\"]]:select-none',\n {\n 'text-xs': tableMeta.fontSize.size === FontSizes.small,\n 'text-sm': tableMeta.fontSize.size === FontSizes.medium,\n 'text-base': tableMeta.fontSize.size === FontSizes.large,\n }\n );\n\n // Print tables have \"_print\" as the postfix for the table id, so we can use the it to determine\n // if the table is a print table or not.\n const { style: cssGridStyle } = useCssGrid<TType>(\n table,\n tableMeta.printing.isPrinting,\n tableMeta.rowActions.actionsForRowLength,\n tableMeta.fontSize.size\n );\n const { style: cssVars } = useCssVars(tableMeta.rowHeight.height, tableMeta.fontSize.size);\n\n const style = {\n ...cssVars,\n ...cssGridStyle,\n // create a new stacking context so our internal z-indexes don't effect external components\n // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n opacity: 0.999,\n };\n\n const columnFreezingStyle = useColumnFreezingStyle(props.id, table);\n const headerOffsetStyle = useHeaderOffsetStyle(props.id, table);\n const isServerLoadingAndNotReady = tableMeta.isUsingServer && props.length === undefined;\n\n return (\n <>\n {columnFreezingStyle ? <style data-taco=\"table3-column-freezing-styles\">{columnFreezingStyle}</style> : null}\n {headerOffsetStyle && !tableMeta.printing.isPrinting ? (\n <style data-taco=\"table3-column-header-offset-styles\">{headerOffsetStyle}</style>\n ) : null}\n <Toolbar\n table={table}\n tableProps={props}\n total={length}\n left={toolbarLeft}\n right={toolbarRight}\n customSettings={customSettings}\n scrollToIndex={scrollToIndex}\n />\n <ErrorAlert table={table} tableRef={internalRef} scrollToIndex={scrollToIndex} rowIdentifier={props.rowIdentifier} />\n <div\n className={className}\n id={props.id}\n data-font-size={tableMeta.fontSize.size}\n data-editing={tableMeta.editing.isEditing}\n data-horizontally-scrolled={tableMeta.columnFreezing.horizontallyScrolled}\n data-pause-hover={tableMeta?.rowActive.isHoverStatePaused}\n data-resizing={!!state.columnSizingInfo.isResizingColumn}\n data-taco=\"table2\"\n onBlur={handleBlur}\n onFocus={handleFocus}\n onScroll={handleScroll}\n ref={internalRef}\n role=\"table\"\n style={style}\n tabIndex={-1}>\n {isServerLoadingAndNotReady ? null : (\n <div className=\"group/header contents\" data-taco=\"table2-header\" role=\"rowgroup\">\n {table.getHeaderGroups().map(headerGroup => (\n <div className=\"contents\" key={headerGroup.id} role=\"row\">\n {headerGroup.headers.map((header, index) => {\n // We need to render separator if column is not the last in array, if index is not equal to freeze column index,\n // if next element is not placeholder and if column itself is not placeholder.\n const hasSeparator =\n index !== tableMeta.columnFreezing.frozenColumnIndex &&\n index !== headerGroup.headers.length - 1 &&\n (!headerGroup.headers[index + 1]?.isPlaceholder || !header.isPlaceholder);\n return (\n <React.Fragment key={header.id}>\n {flexRender(header.column.columnDef.header, {\n ...header.getContext(),\n scrollToIndex,\n hasSeparator,\n })}\n </React.Fragment>\n );\n })}\n </div>\n ))}\n </div>\n )}\n {table.getRowModel().rows.length ? (\n <>\n <FocusScope autoFocus={tableMeta.editing.isEditing}>\n <div\n onMouseDownCapture={handleMouseCapture}\n className=\"group/body contents\"\n data-taco=\"table2-body\"\n role=\"rowgroup\"\n ref={bodyRef}>\n {renderBody()}\n </div>\n </FocusScope>\n {/* This div makes sure that there is always a free space between the rows and footer when\n table height exceeds the cumulative height of all rows. See useCSSGrid.ts */}\n {/* By vertically translating the div a pixel down, we hide the div border below footer so that\n the footer border doesn't appear an extra pixel thick */}\n <div className=\"border-grey-300 col-span-full translate-y-px border-t\" />\n {tableMeta.enableFooter ? (\n <div className=\"group/footer contents\" data-taco=\"table2-footer\" role=\"rowgroup\">\n {\n // Render the footer cell only for individual columns, excluding column groups.\n table\n .getFooterGroups()\n .slice(0, 1)\n .map(footerGroup => (\n <div className=\"contents\" key={footerGroup.id} role=\"row\">\n {footerGroup.headers.map(footer => (\n <React.Fragment key={footer.id}>\n {flexRender(footer.column.columnDef.footer, footer.getContext())}\n </React.Fragment>\n ))}\n </div>\n ))\n }\n {length ? (\n <Summary currentLength={table.getRowModel().rows.length} length={length} table={table} />\n ) : null}\n </div>\n ) : null}\n </>\n ) : (\n <div className=\"col-span-full min-h-[theme(spacing.8)]\">{EmptyState ? <EmptyState /> : null}</div>\n )}\n </div>\n </>\n );\n});\n\ntype Table3WithStatics = (<TType = unknown>(props: Table3Props<TType> & React.RefAttributes<Table3Ref>) => JSX.Element) & {\n Column: typeof Column;\n Group: typeof Group;\n};\n\nexport const Table3 = fixedForwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n const stringifiedChildren = String(props.children);\n // we force a remount (using key) when the child columns change because there are too many places to add children as an effect\n // this is cheaper from a complexity perspective, and probably performance wise as well\n const key = React.useMemo(() => String('tableKey_' + stringifiedChildren), [stringifiedChildren]);\n return <Table<TType> {...props} key={key} ref={ref} />;\n}) as Table3WithStatics;\nTable3.Column = Column;\nTable3.Group = Group;\n\n// hooks\nexport { useTable3DataLoader } from './hooks/useTableDataLoader';\n\n// types\nexport type {\n useTable3DataFetcher,\n useTable3DataOptions,\n useTable3DataFetcherValues as useTableDataValues,\n} from './hooks/useTableDataLoader';\n\nexport type {\n Table3Ref,\n Table3Props,\n Table3Preset,\n Table3Settings,\n Table3SettingsHandler,\n Table3RowHeight,\n Table3FilterComparator,\n Table3FilterHandler,\n Table3LoadPageHandler,\n Table3LoadAllHandler,\n Table3RowGotoHandler,\n Table3SortHandler,\n Table3Shortcuts,\n Table3ShortcutHandlerFn,\n Table3ShortcutHandlerObject,\n Table3SortDirection,\n Table3SortFn,\n Table3RowActionRenderer,\n Table3RowSelectionHandler,\n Table3RowExpansionRenderer,\n Table3RowDropHandler,\n Table3RowDragHandler,\n Table3RowClickHandler,\n Table3ColumnProps,\n Table3ColumnAlignment,\n Table3ColumnDataType,\n Table3ColumnHeaderMenu,\n Table3ColumnClassNameHandler,\n Table3ColumnFooterRenderer,\n Table3ColumnRenderer,\n Table3ColumnControlRenderer,\n Table3ColumnControlProps,\n} from './types';\n"],"names":["Column","_","displayName","Group","Table","fixedForwardRef","Table3","props","ref","emptyState","EmptyState","customSettings","toolbarLeft","toolbarRight","defaultCurrentRowIndex","defaultRowActiveIndex","internalRef","useMergedRef","table","length","useTable","useTableRefInstanceSetup","React","useEffect","autoFocus","_internalRef$current","current","focus","renderBody","scrollToIndex","useTableRenderStrategy","tableMeta","options","meta","state","getState","bodyRef","useRef","animationFrameId","requestAnimationFrame","align","cancelAnimationFrame","handleKeyDown","event","target","dialog","closest","eventOriginatedFromCombobox","contains","shortcutsState","isPaused","rows","getRowModel","rowActive","editing","isEditing","undefined","rowActiveIndex","_rows$tableMeta$rowAc","rowClick","original","rowSelection","document","addEventListener","removeEventListener","handleBlur","isEnabled","handleFocus","handleMouseCapture","handleScroll","columnFreezing","Promise","resolve","e","reject","className","cn","fontSize","size","FontSizes","small","medium","large","style","cssGridStyle","useCssGrid","printing","isPrinting","rowActions","actionsForRowLength","cssVars","useCssVars","rowHeight","height","opacity","columnFreezingStyle","useColumnFreezingStyle","id","headerOffsetStyle","useHeaderOffsetStyle","isServerLoadingAndNotReady","isUsingServer","Toolbar","tableProps","total","left","right","ErrorAlert","tableRef","rowIdentifier","horizontallyScrolled","isHoverStatePaused","columnSizingInfo","isResizingColumn","onBlur","onFocus","onScroll","role","tabIndex","getHeaderGroups","map","headerGroup","key","headers","header","index","hasSeparator","frozenColumnIndex","_headerGroup$headers","isPlaceholder","Fragment","flexRender","column","columnDef","getContext","FocusScope","onMouseDownCapture","enableFooter","getFooterGroups","slice","footerGroup","footer","Summary","currentLength","stringifiedChildren","String","children","useMemo"],"mappings":"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"}
|
package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingControl.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"EditingControl.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingControl.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Cell as RTCell, Column as RTColumn, Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport _ from 'lodash';\n\nimport { deselectInputValue } from '../../../../../utils/input';\nimport { hasChanged } from '../../../util/editing';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Input } from '../../../../Input/Input';\nimport { getCellAlignmentClasses, getInputAppearanceClassnames } from '../styles';\nimport { mergeRefs } from '../../../../../utils/mergeRefs';\nimport { Table3ColumnAlignment, Table3ColumnDataType } from '../../../types';\nimport { TextareaControl } from './controls/TextareaControl';\nimport { shouldTriggerShortcut } from '../../../../../utils/keyboard';\nimport { getTableLeftScrollDistance } from '../../../util/scrolling';\n\nexport type EditingControlProps<TType = unknown> = {\n align?: Table3ColumnAlignment;\n column: RTColumn<TType, unknown>;\n data: TType;\n initialValue: any;\n value: any;\n onBlur: (event: React.FocusEvent) => void;\n onFocus: (event: React.FocusEvent) => void;\n onChange: (value: any) => void;\n ref: React.Ref<HTMLElement>;\n table: RTTable<TType>;\n tableRef: React.RefObject<HTMLDivElement>;\n cell: RTCell<TType, unknown>;\n error?: string;\n tabIndex?: number;\n isActiveRow?: boolean;\n};\n\nexport const EditingControl = React.forwardRef<HTMLElement, any>(function Control<TType = unknown>(\n props: EditingControlProps<TType>,\n externalRef: React.Ref<HTMLElement>\n) {\n const {\n align,\n column,\n data,\n initialValue,\n onChange: handleChange,\n table,\n tableRef,\n value,\n cell,\n error,\n isActiveRow,\n ...attributes\n } = props;\n\n const tableMeta = table.options.meta as TableMeta<unknown>;\n const ref = React.useRef<HTMLElement>();\n const refCallback = mergeRefs([ref, externalRef]);\n\n const columnMeta = column.columnDef.meta;\n const controlRenderer = columnMeta?.control;\n\n const isCellInDetailMode =\n tableMeta.editing.detailModeEditing && (ref as React.RefObject<HTMLElement>)?.current?.contains(document.activeElement);\n\n const originalRow = cell.row.original as TType;\n\n // Revert to initial value if escape was pressed\n const handleKeyDown = (event: React.KeyboardEvent) => {\n // For some reason keydown event handler is not propogated to the table when input or other control element is\n // in focus so we need to check for shortcut that toggles the editing.\n if (shouldTriggerShortcut(event, { key: 'e', meta: true, shift: false })) {\n tableMeta.editing.toggleEditing(false);\n return;\n }\n\n const target = event.target as HTMLInputElement;\n\n if (target.readOnly) {\n return;\n }\n\n // Prevent row arrow shortcuts triggering when in detail mode\n if (tableMeta.editing.detailModeEditing && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {\n event.stopPropagation();\n }\n\n // Revert to initial value if escape was pressed\n if (event.key === 'Escape') {\n event.preventDefault();\n\n if (tableMeta.editing.detailModeEditing) {\n tableMeta.editing.setDetailModeEditing(false);\n\n if (value !== initialValue) {\n // Before reseting to initial value, we need to check if edited row with cell initial value is the same as original row,\n // and in this case we need to completely remove row from editing state to avoid saving the same data as original.\n const changedRow: any = tableMeta.editing.changes ? tableMeta.editing.changes[cell.row.id] : {};\n const rowEdtitingDataWithInitialValue = { ...changedRow, [cell.column.id]: initialValue };\n if (_.isEqual(cell.row.original, rowEdtitingDataWithInitialValue)) {\n tableMeta.editing.resetChange(cell.row.id);\n } else {\n handleChange(initialValue);\n }\n }\n } else {\n tableMeta.editing.toggleEditing(false);\n tableRef.current?.focus();\n }\n\n return;\n }\n\n // Should enable/disable editing mode if Enter was clicked\n if (event.key === 'Enter') {\n event.preventDefault();\n\n if (!tableMeta.editing.detailModeEditing) {\n deselectInputValue(target);\n } else {\n target?.select?.();\n }\n\n // Ketydown \"Enter\" should toggle edititng mode\n tableMeta.editing.setDetailModeEditing(!tableMeta.editing.detailModeEditing);\n\n return;\n }\n };\n\n const isNumber = columnMeta?.dataType === ('number' as Table3ColumnDataType);\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n handleKeyDown(event);\n\n // Switching to editing mode, when key pressed any alphabetical character or number\n if (/^[a-z0-9]$/i.test(event.key)) {\n tableMeta.editing.setDetailModeEditing(true);\n }\n };\n\n const handleFocus = (event: React.FocusEvent) => {\n const { frozenColumnIndex: externalFrozenColumnIndex = -1, frozenInternalColumnCount = 0 } = tableMeta.columnFreezing;\n const tableElement = tableMeta.tableRef.current;\n const frozenColumnIndex =\n externalFrozenColumnIndex > -1\n ? externalFrozenColumnIndex + frozenInternalColumnCount\n : frozenInternalColumnCount - 1;\n const cell = event.target?.closest('[role=\"cell\"]');\n\n if (!tableElement || !cell) {\n return;\n }\n\n const isEditing = true;\n const leftScrollDistance = getTableLeftScrollDistance(tableElement, cell, frozenColumnIndex, isEditing);\n\n if (leftScrollDistance !== null) {\n tableElement.scrollLeft = leftScrollDistance;\n }\n };\n\n if (typeof controlRenderer === 'function') {\n return controlRenderer(\n {\n ...attributes,\n invalid: !!error,\n onFocus: handleFocus,\n ref: refCallback,\n setValue: nextValue => {\n if (nextValue !== value) {\n handleChange(nextValue);\n }\n },\n value,\n },\n data\n );\n } else if (controlRenderer === 'datepicker') {\n const handleDatepickerChange = event => {\n // When datepicker looses focus, it triggers change event, even if date wasn't changed,\n // so adding additional check here to prevent adding change to the edititng state.\n const originalDate = originalRow[cell.column.id];\n const changedDate = (event as any).detail;\n if (hasChanged(originalDate, changedDate)) {\n handleChange(changedDate);\n }\n };\n\n return (\n <Datepicker\n {...attributes}\n invalid={!!error}\n className={cn({\n '[&_input]:!yt-focus-dark': isCellInDetailMode,\n })}\n onChange={handleDatepickerChange}\n onFocus={handleFocus}\n onKeyDown={handleInputKeyDown}\n ref={refCallback}\n value={value as Date}\n />\n );\n } else if (controlRenderer === 'switch') {\n return (\n <Switch {...attributes} checked={Boolean(value)} onChange={handleChange} onFocus={handleFocus} ref={refCallback} />\n );\n } else if (controlRenderer === 'textarea') {\n return (\n <TextareaControl\n {...props}\n invalid={!!error}\n isCellInDetailMode={isCellInDetailMode}\n onFocus={handleFocus}\n onKeyDown={handleInputKeyDown}\n ref={refCallback}\n fontSize={tableMeta.fontSize.size}\n />\n );\n }\n\n return (\n <Input\n {...attributes}\n invalid={!!error}\n className={cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {\n '!yt-focus-dark': isCellInDetailMode,\n })}\n onChange={event => {\n handleChange(event.target.value);\n }}\n onFocus={handleFocus}\n onKeyDown={handleInputKeyDown}\n ref={refCallback}\n type={isNumber ? 'number' : undefined}\n value={isNumber ? value : String(value ?? '')}\n />\n );\n});\n"],"names":["EditingControl","React","forwardRef","Control","props","externalRef","align","column","data","initialValue","onChange","handleChange","table","tableRef","value","cell","error","isActiveRow","attributes","tableMeta","options","meta","ref","useRef","refCallback","mergeRefs","columnMeta","columnDef","controlRenderer","control","isCellInDetailMode","editing","detailModeEditing","_ref$current","current","contains","document","activeElement","originalRow","row","original","handleKeyDown","event","shouldTriggerShortcut","key","shift","toggleEditing","target","readOnly","stopPropagation","preventDefault","setDetailModeEditing","changedRow","changes","id","rowEdtitingDataWithInitialValue","_","isEqual","resetChange","_tableRef$current","focus","deselectInputValue","_target$select","select","call","isNumber","dataType","handleInputKeyDown","test","handleFocus","frozenColumnIndex","externalFrozenColumnIndex","frozenInternalColumnCount","columnFreezing","tableElement","_event$target","closest","isEditing","leftScrollDistance","getTableLeftScrollDistance","scrollLeft","invalid","onFocus","setValue","nextValue","handleDatepickerChange","originalDate","changedDate","detail","hasChanged","Datepicker","className","cn","onKeyDown","Switch","checked","Boolean","TextareaControl","fontSize","size","Input","getInputAppearanceClassnames","getCellAlignmentClasses","type","undefined","String"],"mappings":";;;;;;;;;;;;;;MAmCaA,cAAc,gBAAGC,cAAK,CAACC,UAAU,CAAmB,SAASC,OAAOA,CAC7EC,KAAiC,EACjCC,WAAmC;;EAEnC,MAAM;IACFC,KAAK;IACLC,MAAM;IACNC,IAAI;IACJC,YAAY;IACZC,QAAQ,EAAEC,YAAY;IACtBC,KAAK;IACLC,QAAQ;IACRC,KAAK;IACLC,IAAI;IACJC,KAAK;IACLC,WAAW;IACX,GAAGC;GACN,GAAGd,KAAK;EAET,MAAMe,SAAS,GAAGP,KAAK,CAACQ,OAAO,CAACC,IAA0B;EAC1D,MAAMC,GAAG,GAAGrB,cAAK,CAACsB,MAAM,EAAe;EACvC,MAAMC,WAAW,GAAGC,SAAS,CAAC,CAACH,GAAG,EAAEjB,WAAW,CAAC,CAAC;EAEjD,MAAMqB,UAAU,GAAGnB,MAAM,CAACoB,SAAS,CAACN,IAAI;EACxC,MAAMO,eAAe,GAAGF,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEG,OAAO;EAE3C,MAAMC,kBAAkB,GACpBX,SAAS,CAACY,OAAO,CAACC,iBAAiB,KAAKV,GAAoC,aAApCA,GAAoC,wBAAAW,YAAA,GAApCX,GAAoC,CAAEY,OAAO,cAAAD,YAAA,uBAA7CA,YAAA,CAA+CE,QAAQ,CAACC,QAAQ,CAACC,aAAa,CAAC;EAE3H,MAAMC,WAAW,GAAGvB,IAAI,CAACwB,GAAG,CAACC,QAAiB;;EAG9C,MAAMC,aAAa,GAAIC,KAA0B;;;IAG7C,IAAIC,qBAAqB,CAACD,KAAK,EAAE;MAAEE,GAAG,EAAE,GAAG;MAAEvB,IAAI,EAAE,IAAI;MAAEwB,KAAK,EAAE;KAAO,CAAC,EAAE;MACtE1B,SAAS,CAACY,OAAO,CAACe,aAAa,CAAC,KAAK,CAAC;MACtC;;IAGJ,MAAMC,MAAM,GAAGL,KAAK,CAACK,MAA0B;IAE/C,IAAIA,MAAM,CAACC,QAAQ,EAAE;MACjB;;;IAIJ,IAAI7B,SAAS,CAACY,OAAO,CAACC,iBAAiB,KAAKU,KAAK,CAACE,GAAG,KAAK,SAAS,IAAIF,KAAK,CAACE,GAAG,KAAK,WAAW,CAAC,EAAE;MAC/FF,KAAK,CAACO,eAAe,EAAE;;;IAI3B,IAAIP,KAAK,CAACE,GAAG,KAAK,QAAQ,EAAE;MACxBF,KAAK,CAACQ,cAAc,EAAE;MAEtB,IAAI/B,SAAS,CAACY,OAAO,CAACC,iBAAiB,EAAE;QACrCb,SAAS,CAACY,OAAO,CAACoB,oBAAoB,CAAC,KAAK,CAAC;QAE7C,IAAIrC,KAAK,KAAKL,YAAY,EAAE;;;UAGxB,MAAM2C,UAAU,GAAQjC,SAAS,CAACY,OAAO,CAACsB,OAAO,GAAGlC,SAAS,CAACY,OAAO,CAACsB,OAAO,CAACtC,IAAI,CAACwB,GAAG,CAACe,EAAE,CAAC,GAAG,EAAE;UAC/F,MAAMC,+BAA+B,GAAG;YAAE,GAAGH,UAAU;YAAE,CAACrC,IAAI,CAACR,MAAM,CAAC+C,EAAE,GAAG7C;WAAc;UACzF,IAAI+C,CAAC,CAACC,OAAO,CAAC1C,IAAI,CAACwB,GAAG,CAACC,QAAQ,EAAEe,+BAA+B,CAAC,EAAE;YAC/DpC,SAAS,CAACY,OAAO,CAAC2B,WAAW,CAAC3C,IAAI,CAACwB,GAAG,CAACe,EAAE,CAAC;WAC7C,MAAM;YACH3C,YAAY,CAACF,YAAY,CAAC;;;OAGrC,MAAM;QAAA,IAAAkD,iBAAA;QACHxC,SAAS,CAACY,OAAO,CAACe,aAAa,CAAC,KAAK,CAAC;QACtC,CAAAa,iBAAA,GAAA9C,QAAQ,CAACqB,OAAO,cAAAyB,iBAAA,uBAAhBA,iBAAA,CAAkBC,KAAK,EAAE;;MAG7B;;;IAIJ,IAAIlB,KAAK,CAACE,GAAG,KAAK,OAAO,EAAE;MACvBF,KAAK,CAACQ,cAAc,EAAE;MAEtB,IAAI,CAAC/B,SAAS,CAACY,OAAO,CAACC,iBAAiB,EAAE;QACtC6B,kBAAkB,CAACd,MAAM,CAAC;OAC7B,MAAM;QAAA,IAAAe,cAAA;QACHf,MAAM,aAANA,MAAM,wBAAAe,cAAA,GAANf,MAAM,CAAEgB,MAAM,cAAAD,cAAA,uBAAdA,cAAA,CAAAE,IAAA,CAAAjB,OAAkB;;;MAItB5B,SAAS,CAACY,OAAO,CAACoB,oBAAoB,CAAC,CAAChC,SAAS,CAACY,OAAO,CAACC,iBAAiB,CAAC;MAE5E;;GAEP;EAED,MAAMiC,QAAQ,GAAG,CAAAvC,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEwC,QAAQ,MAAM,QAAiC;EAC5E,MAAMC,kBAAkB,GAAIzB,KAAkE;IAC1FD,aAAa,CAACC,KAAK,CAAC;;IAGpB,IAAI,aAAa,CAAC0B,IAAI,CAAC1B,KAAK,CAACE,GAAG,CAAC,EAAE;MAC/BzB,SAAS,CAACY,OAAO,CAACoB,oBAAoB,CAAC,IAAI,CAAC;;GAEnD;EAED,MAAMkB,WAAW,GAAI3B,KAAuB;;IACxC,MAAM;MAAE4B,iBAAiB,EAAEC,yBAAyB,GAAG,CAAC,CAAC;MAAEC,yBAAyB,GAAG;KAAG,GAAGrD,SAAS,CAACsD,cAAc;IACrH,MAAMC,YAAY,GAAGvD,SAAS,CAACN,QAAQ,CAACqB,OAAO;IAC/C,MAAMoC,iBAAiB,GACnBC,yBAAyB,GAAG,CAAC,CAAC,GACxBA,yBAAyB,GAAGC,yBAAyB,GACrDA,yBAAyB,GAAG,CAAC;IACvC,MAAMzD,IAAI,IAAA4D,aAAA,GAAGjC,KAAK,CAACK,MAAM,cAAA4B,aAAA,uBAAZA,aAAA,CAAcC,OAAO,CAAC,eAAe,CAAC;IAEnD,IAAI,CAACF,YAAY,IAAI,CAAC3D,IAAI,EAAE;MACxB;;IAGJ,MAAM8D,SAAS,GAAG,IAAI;IACtB,MAAMC,kBAAkB,GAAGC,0BAA0B,CAACL,YAAY,EAAE3D,IAAI,EAAEuD,iBAAiB,EAAEO,SAAS,CAAC;IAEvG,IAAIC,kBAAkB,KAAK,IAAI,EAAE;MAC7BJ,YAAY,CAACM,UAAU,GAAGF,kBAAkB;;GAEnD;EAED,IAAI,OAAOlD,eAAe,KAAK,UAAU,EAAE;IACvC,OAAOA,eAAe,CAClB;MACI,GAAGV,UAAU;MACb+D,OAAO,EAAE,CAAC,CAACjE,KAAK;MAChBkE,OAAO,EAAEb,WAAW;MACpB/C,GAAG,EAAEE,WAAW;MAChB2D,QAAQ,EAAEC,SAAS;QACf,IAAIA,SAAS,KAAKtE,KAAK,EAAE;UACrBH,YAAY,CAACyE,SAAS,CAAC;;OAE9B;MACDtE;KACH,EACDN,IAAI,CACP;GACJ,MAAM,IAAIoB,eAAe,KAAK,YAAY,EAAE;IACzC,MAAMyD,sBAAsB,GAAG3C,KAAK;;;MAGhC,MAAM4C,YAAY,GAAGhD,WAAW,CAACvB,IAAI,CAACR,MAAM,CAAC+C,EAAE,CAAC;MAChD,MAAMiC,WAAW,GAAI7C,KAAa,CAAC8C,MAAM;MACzC,IAAIC,UAAU,CAACH,YAAY,EAAEC,WAAW,CAAC,EAAE;QACvC5E,YAAY,CAAC4E,WAAW,CAAC;;KAEhC;IAED,oBACItF,6BAACyF,UAAU,oBACHxE,UAAU;MACd+D,OAAO,EAAE,CAAC,CAACjE,KAAK;MAChB2E,SAAS,EAAEC,EAAE,CAAC;QACV,0BAA0B,EAAE9D;OAC/B,CAAC;MACFpB,QAAQ,EAAE2E,sBAAsB;MAChCH,OAAO,EAAEb,WAAW;MACpBwB,SAAS,EAAE1B,kBAAkB;MAC7B7C,GAAG,EAAEE,WAAW;MAChBV,KAAK,EAAEA;OACT;GAET,MAAM,IAAIc,eAAe,KAAK,QAAQ,EAAE;IACrC,oBACI3B,6BAAC6F,MAAM,oBAAK5E,UAAU;MAAE6E,OAAO,EAAEC,OAAO,CAAClF,KAAK,CAAC;MAAEJ,QAAQ,EAAEC,YAAY;MAAEuE,OAAO,EAAEb,WAAW;MAAE/C,GAAG,EAAEE;OAAe;GAE1H,MAAM,IAAII,eAAe,KAAK,UAAU,EAAE;IACvC,oBACI3B,6BAACgG,eAAe,oBACR7F,KAAK;MACT6E,OAAO,EAAE,CAAC,CAACjE,KAAK;MAChBc,kBAAkB,EAAEA,kBAAkB;MACtCoD,OAAO,EAAEb,WAAW;MACpBwB,SAAS,EAAE1B,kBAAkB;MAC7B7C,GAAG,EAAEE,WAAW;MAChB0E,QAAQ,EAAE/E,SAAS,CAAC+E,QAAQ,CAACC;OAC/B;;EAIV,oBACIlG,6BAACmG,KAAK,oBACElF,UAAU;IACd+D,OAAO,EAAE,CAAC,CAACjE,KAAK;IAChB2E,SAAS,EAAEC,EAAE,CAACS,4BAA4B,EAAE,EAAEC,uBAAuB,CAAChG,KAAK,CAAC,EAAE;MAC1E,gBAAgB,EAAEwB;KACrB,CAAC;IACFpB,QAAQ,EAAEgC,KAAK;MACX/B,YAAY,CAAC+B,KAAK,CAACK,MAAM,CAACjC,KAAK,CAAC;KACnC;IACDoE,OAAO,EAAEb,WAAW;IACpBwB,SAAS,EAAE1B,kBAAkB;IAC7B7C,GAAG,EAAEE,WAAW;IAChB+E,IAAI,EAAEtC,QAAQ,GAAG,QAAQ,GAAGuC,SAAS;IACrC1F,KAAK,EAAEmD,QAAQ,GAAGnD,KAAK,GAAG2F,MAAM,CAAC3F,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAE;KAC9C;AAEV,CAAC;;;;"}
|
1
|
+
{"version":3,"file":"EditingControl.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingControl.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Cell as RTCell, Column as RTColumn, Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport _ from 'lodash';\n\nimport { deselectInputValue } from '../../../../../utils/input';\nimport { hasChanged } from '../../../util/editing';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Input } from '../../../../Input/Input';\nimport { getCellAlignmentClasses, getInputAppearanceClassnames } from '../styles';\nimport { mergeRefs } from '../../../../../utils/mergeRefs';\nimport { Table3ColumnAlignment, Table3ColumnDataType } from '../../../types';\nimport { TextareaControl } from './controls/TextareaControl';\nimport { shouldTriggerShortcut } from '../../../../../utils/keyboard';\nimport { getTableLeftScrollDistance } from '../../../util/scrolling';\n\nexport type EditingControlProps<TType = unknown> = {\n align?: Table3ColumnAlignment;\n column: RTColumn<TType, unknown>;\n data: TType;\n initialValue: any;\n value: any;\n onBlur: (event: React.FocusEvent) => void;\n onFocus: (event: React.FocusEvent) => void;\n onChange: (value: any) => void;\n ref: React.Ref<HTMLElement>;\n table: RTTable<TType>;\n tableRef: React.RefObject<HTMLDivElement>;\n cell: RTCell<TType, unknown>;\n error?: string;\n tabIndex?: number;\n isActiveRow?: boolean;\n};\n\nexport const EditingControl = React.forwardRef<HTMLElement, any>(function Control<TType = unknown>(\n props: EditingControlProps<TType>,\n externalRef: React.Ref<HTMLElement>\n) {\n const {\n align,\n column,\n data,\n initialValue,\n onChange: handleChange,\n table,\n tableRef,\n value,\n cell,\n error,\n isActiveRow,\n ...attributes\n } = props;\n\n const tableMeta = table.options.meta as TableMeta<unknown>;\n const ref = React.useRef<HTMLElement>();\n const refCallback = mergeRefs([ref, externalRef]);\n\n const columnMeta = column.columnDef.meta;\n const controlRenderer = columnMeta?.control;\n\n const isCellInDetailMode =\n tableMeta.editing.detailModeEditing && (ref as React.RefObject<HTMLElement>)?.current?.contains(document.activeElement);\n\n const originalRow = cell.row.original as TType;\n\n // Revert to initial value if escape was pressed\n const handleKeyDown = (event: React.KeyboardEvent) => {\n // For some reason keydown event handler is not propogated to the table when input or other control element is\n // in focus so we need to check for shortcut that toggles the editing.\n if (shouldTriggerShortcut(event, { key: 'e', meta: true, shift: false })) {\n tableMeta.editing.toggleEditing(false);\n return;\n }\n\n const target = event.target as HTMLInputElement;\n\n if (target.readOnly) {\n return;\n }\n\n // Prevent row arrow shortcuts triggering when in detail mode\n if (tableMeta.editing.detailModeEditing && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {\n event.stopPropagation();\n }\n\n // Revert to initial value if escape was pressed\n if (event.key === 'Escape') {\n event.preventDefault();\n\n if (tableMeta.editing.detailModeEditing) {\n tableMeta.editing.setDetailModeEditing(false);\n\n if (value !== initialValue) {\n // Before reseting to initial value, we need to check if edited row with cell initial value is the same as original row,\n // and in this case we need to completely remove row from editing state to avoid saving the same data as original.\n const changedRow: any = tableMeta.editing.changes ? tableMeta.editing.changes[cell.row.id] : {};\n const rowEdtitingDataWithInitialValue = { ...changedRow, [cell.column.id]: initialValue };\n if (_.isEqual(cell.row.original, rowEdtitingDataWithInitialValue)) {\n tableMeta.editing.resetChange(cell.row.id);\n } else {\n handleChange(initialValue);\n }\n }\n } else {\n tableMeta.editing.toggleEditing(false);\n tableRef.current?.focus();\n }\n\n return;\n }\n\n // Should enable/disable editing mode if Enter was clicked\n if (event.key === 'Enter') {\n event.preventDefault();\n\n if (!tableMeta.editing.detailModeEditing) {\n deselectInputValue(target);\n } else {\n target?.select?.();\n }\n\n // Ketydown \"Enter\" should toggle edititng mode\n tableMeta.editing.setDetailModeEditing(!tableMeta.editing.detailModeEditing);\n\n return;\n }\n };\n\n const isNumber = columnMeta?.dataType === ('number' as Table3ColumnDataType);\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n handleKeyDown(event);\n\n // Switching to editing mode, when key pressed any alphabetical character or number\n if (/^[a-z0-9]$/i.test(event.key)) {\n tableMeta.editing.setDetailModeEditing(true);\n }\n };\n\n const handleFocus = (event: React.FocusEvent) => {\n const { frozenColumnIndex: externalFrozenColumnIndex = -1, frozenInternalColumnCount = 0 } = tableMeta.columnFreezing;\n const tableElement = tableMeta.tableRef.current;\n const frozenColumnIndex =\n externalFrozenColumnIndex > -1\n ? externalFrozenColumnIndex + frozenInternalColumnCount\n : frozenInternalColumnCount - 1;\n const cell = event.target?.closest('[role=\"cell\"]');\n\n if (!tableElement || !cell) {\n return;\n }\n\n const isEditing = true;\n const leftScrollDistance = getTableLeftScrollDistance(tableElement, cell, frozenColumnIndex, isEditing);\n\n if (leftScrollDistance !== null) {\n tableElement.scrollLeft = leftScrollDistance;\n }\n };\n\n if (typeof controlRenderer === 'function') {\n return controlRenderer(\n {\n ...attributes,\n invalid: !!error,\n onFocus: handleFocus,\n ref: refCallback,\n setValue: nextValue => {\n if (nextValue !== value) {\n handleChange(nextValue);\n }\n },\n fontSize: tableMeta.fontSize.size,\n value,\n },\n data\n );\n } else if (controlRenderer === 'datepicker') {\n const handleDatepickerChange = event => {\n // When datepicker looses focus, it triggers change event, even if date wasn't changed,\n // so adding additional check here to prevent adding change to the edititng state.\n const originalDate = originalRow[cell.column.id];\n const changedDate = (event as any).detail;\n if (hasChanged(originalDate, changedDate)) {\n handleChange(changedDate);\n }\n };\n\n return (\n <Datepicker\n {...attributes}\n invalid={!!error}\n className={cn({\n '[&_input]:!yt-focus-dark': isCellInDetailMode,\n })}\n onChange={handleDatepickerChange}\n onFocus={handleFocus}\n onKeyDown={handleInputKeyDown}\n ref={refCallback}\n value={value as Date}\n />\n );\n } else if (controlRenderer === 'switch') {\n return (\n <Switch {...attributes} checked={Boolean(value)} onChange={handleChange} onFocus={handleFocus} ref={refCallback} />\n );\n } else if (controlRenderer === 'textarea') {\n return (\n <TextareaControl\n {...props}\n invalid={!!error}\n isCellInDetailMode={isCellInDetailMode}\n onFocus={handleFocus}\n onKeyDown={handleInputKeyDown}\n ref={refCallback}\n fontSize={tableMeta.fontSize.size}\n />\n );\n }\n\n return (\n <Input\n {...attributes}\n invalid={!!error}\n className={cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {\n '!yt-focus-dark': isCellInDetailMode,\n })}\n onChange={event => {\n handleChange(event.target.value);\n }}\n onFocus={handleFocus}\n onKeyDown={handleInputKeyDown}\n ref={refCallback}\n type={isNumber ? 'number' : undefined}\n value={isNumber ? value : String(value ?? '')}\n />\n );\n});\n"],"names":["EditingControl","React","forwardRef","Control","props","externalRef","align","column","data","initialValue","onChange","handleChange","table","tableRef","value","cell","error","isActiveRow","attributes","tableMeta","options","meta","ref","useRef","refCallback","mergeRefs","columnMeta","columnDef","controlRenderer","control","isCellInDetailMode","editing","detailModeEditing","_ref$current","current","contains","document","activeElement","originalRow","row","original","handleKeyDown","event","shouldTriggerShortcut","key","shift","toggleEditing","target","readOnly","stopPropagation","preventDefault","setDetailModeEditing","changedRow","changes","id","rowEdtitingDataWithInitialValue","_","isEqual","resetChange","_tableRef$current","focus","deselectInputValue","_target$select","select","call","isNumber","dataType","handleInputKeyDown","test","handleFocus","frozenColumnIndex","externalFrozenColumnIndex","frozenInternalColumnCount","columnFreezing","tableElement","_event$target","closest","isEditing","leftScrollDistance","getTableLeftScrollDistance","scrollLeft","invalid","onFocus","setValue","nextValue","fontSize","size","handleDatepickerChange","originalDate","changedDate","detail","hasChanged","Datepicker","className","cn","onKeyDown","Switch","checked","Boolean","TextareaControl","Input","getInputAppearanceClassnames","getCellAlignmentClasses","type","undefined","String"],"mappings":"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"}
|
@@ -117,7 +117,7 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
|
|
117
117
|
handleTextareaKeyDown(e);
|
118
118
|
},
|
119
119
|
onBlur: handleBlur,
|
120
|
-
className: cn(getCellAlignmentClasses(align), `h-fit resize-none`, {
|
120
|
+
className: cn(getCellAlignmentClasses(align), `h-fit resize-none overflow-y-hidden focus:overflow-y-auto`, {
|
121
121
|
[`!min-h-[${minMaxHeight.min}px]`]: columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate,
|
122
122
|
'!yt-focus-dark': isCellInDetailMode,
|
123
123
|
[`h-[${minMaxHeight.min}px]`]: !isCellInDetailMode && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate),
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"TextareaControl.js","sources":["../../../../../../../../../../../src/components/Table3/components/columns/cell/controls/TextareaControl.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Textarea } from '../../../../../Textarea/Textarea';\nimport { EditingControlProps } from '../EditingControl';\nimport { getCellAlignmentClasses } from '../../styles';\nimport { useMergedRef } from '../../../../../../hooks/useMergedRef';\nimport { Table3FontSize } from '../../../../types';\n\ntype TextareaHeight = {\n min: number;\n max: number;\n};\n// By UX design, textarea should fold to min size when blured and extend to max 5 lines height when edited in enableTruncate mode,\n// for this reason we need to set min/max height limits for each font size value.\nconst heights: Record<Table3FontSize, TextareaHeight> = {\n small: {\n min: 24,\n max: 86,\n },\n medium: {\n min: 32,\n max: 100,\n },\n large: {\n min: 40,\n max: 140,\n },\n};\n\ntype TextareaControlProps<TType = unknown> = EditingControlProps<TType> & {\n onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n fontSize: Table3FontSize;\n invalid: boolean;\n isCellInDetailMode?: boolean;\n};\n\nexport const TextareaControl = React.forwardRef<HTMLElement, any>(function TextareaControl<TType = unknown>(\n props: TextareaControlProps<TType>,\n externalRef: React.Ref<HTMLElement>\n) {\n const {\n onKeyDown: handleKeyDown,\n onChange: handleChange,\n onBlur,\n column,\n isCellInDetailMode,\n align,\n isActiveRow,\n value,\n fontSize,\n ...attributes\n } = props;\n\n const minMaxHeight = heights[fontSize];\n\n const columnMeta = column.columnDef.meta;\n\n const ref = useMergedRef<HTMLTextAreaElement>(externalRef);\n\n React.useEffect(() => {\n if (ref?.current) {\n // Need to reset textarea to min height when font size got changed and if column in enable truncate mode.\n if (columnMeta?.enableTruncate) {\n const textareaElement = ref?.current as HTMLTextAreaElement;\n textareaElement.style.height = `${minMaxHeight.min}px`;\n\n // If truncation is not enabled, then textarea should re-calculate it's height to fit with it's own content, when initialized or fonsSize got changed.\n } else {\n const textareaElement = ref?.current as HTMLTextAreaElement;\n resizeTextArea(textareaElement);\n }\n }\n }, [fontSize]);\n\n React.useEffect(() => {\n // If truncation is enabled, then textarea should only adjust to it's own content, when in detail mode.\n // Otherwise it should collapse to minimal height.\n if (ref?.current && columnMeta?.enableTruncate) {\n const textareaElement = ref?.current as HTMLTextAreaElement;\n\n if (isCellInDetailMode) {\n resizeTextArea(textareaElement);\n } else {\n textareaElement.style.height = `${minMaxHeight.min}px`;\n }\n }\n }, [isCellInDetailMode]);\n\n const resizeTextArea = (textareaElement: HTMLTextAreaElement) => {\n // Need to set inherit before calculating height, so that browser sets the scrollHeight properly,\n // depending on text inside.\n const textareaRect = textareaElement.getBoundingClientRect();\n const prevHeight = textareaRect.height;\n if (columnMeta?.enableTruncate) {\n if (prevHeight < minMaxHeight.max) {\n textareaElement.style.height = 'inherit';\n textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, minMaxHeight.max)}px`;\n }\n } else {\n textareaElement.style.height = 'inherit';\n textareaElement.style.height = `${textareaElement.scrollHeight}px`;\n }\n };\n\n const handleTextareaChange = e => {\n resizeTextArea(e.target);\n };\n\n const textareaContainerClassName = cn('w-full', {\n 'focus-within:absolute focus-within:left-0 focus-within:top-0 focus-within:z-[9]': columnMeta?.enableTruncate,\n });\n const handleTextareaKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n // By default Shift + Enter in textarea makes a new line, we want to keep this behaviour\n if (event.shiftKey && event.key === 'Enter') {\n return;\n } else {\n handleKeyDown(event);\n }\n };\n\n const handleBlur = event => {\n // If truncation is enabled, then textarea should shring back to min height, when loosing focus.\n if (columnMeta?.enableTruncate) {\n const textareaElement = event.currentTarget;\n textareaElement.style.height = `${minMaxHeight.min}px`;\n }\n onBlur(event);\n };\n\n return (\n <div data-taco=\"input-container\">\n {/**\n * Textarea should have min height placeholder, because it becomes absolute positioned when focused,\n * which leads to overlapping of validation message rendered bellow.\n * Somehow tailwind cannot dynamically assign min height when arbitary value has been used(in this particular case),\n * so assigning it through style prop here\n **/}\n <div style={{ minHeight: `${minMaxHeight.min}px` }} className=\"relative\">\n <div className={textareaContainerClassName}>\n <Textarea\n {...attributes}\n onChange={event => {\n handleChange(event.target.value);\n handleTextareaChange(event);\n }}\n rows={1}\n onKeyDown={e => {\n handleTextareaKeyDown(e);\n }}\n onBlur={handleBlur}\n className={cn(getCellAlignmentClasses(align), `h-fit resize-none`, {\n [`!min-h-[${minMaxHeight.min}px]`]: columnMeta?.enableTruncate,\n '!yt-focus-dark': isCellInDetailMode,\n [`h-[${minMaxHeight.min}px]`]: !isCellInDetailMode && columnMeta?.enableTruncate,\n // Only allow resizing when focused and truncation enabled\n 'focus:resize-y': isActiveRow && columnMeta?.enableTruncate,\n })}\n ref={ref}\n value={String(value ?? '')}\n />\n </div>\n </div>\n </div>\n );\n});\n"],"names":["heights","small","min","max","medium","large","TextareaControl","React","forwardRef","props","externalRef","onKeyDown","handleKeyDown","onChange","handleChange","onBlur","column","isCellInDetailMode","align","isActiveRow","value","fontSize","attributes","minMaxHeight","columnMeta","columnDef","meta","ref","useMergedRef","useEffect","current","enableTruncate","textareaElement","style","height","resizeTextArea","textareaRect","getBoundingClientRect","prevHeight","Math","scrollHeight","handleTextareaChange","e","target","textareaContainerClassName","cn","handleTextareaKeyDown","event","shiftKey","key","handleBlur","currentTarget","minHeight","className","Textarea","rows","getCellAlignmentClasses","String"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"TextareaControl.js","sources":["../../../../../../../../../../../src/components/Table3/components/columns/cell/controls/TextareaControl.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Textarea } from '../../../../../Textarea/Textarea';\nimport { EditingControlProps } from '../EditingControl';\nimport { getCellAlignmentClasses } from '../../styles';\nimport { useMergedRef } from '../../../../../../hooks/useMergedRef';\nimport { FontSize } from '../../../../../../types';\n\ntype TextareaHeight = {\n min: number;\n max: number;\n};\n// By UX design, textarea should fold to min size when blured and extend to max 5 lines height when edited in enableTruncate mode,\n// for this reason we need to set min/max height limits for each font size value.\nconst heights: Record<FontSize, TextareaHeight> = {\n small: {\n min: 24,\n max: 86,\n },\n medium: {\n min: 32,\n max: 100,\n },\n large: {\n min: 40,\n max: 140,\n },\n};\n\ntype TextareaControlProps<TType = unknown> = EditingControlProps<TType> & {\n onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n fontSize: FontSize;\n invalid: boolean;\n isCellInDetailMode?: boolean;\n};\n\nexport const TextareaControl = React.forwardRef<HTMLElement, any>(function TextareaControl<TType = unknown>(\n props: TextareaControlProps<TType>,\n externalRef: React.Ref<HTMLElement>\n) {\n const {\n onKeyDown: handleKeyDown,\n onChange: handleChange,\n onBlur,\n column,\n isCellInDetailMode,\n align,\n isActiveRow,\n value,\n fontSize,\n ...attributes\n } = props;\n\n const minMaxHeight = heights[fontSize];\n\n const columnMeta = column.columnDef.meta;\n\n const ref = useMergedRef<HTMLTextAreaElement>(externalRef);\n\n React.useEffect(() => {\n if (ref?.current) {\n // Need to reset textarea to min height when font size got changed and if column in enable truncate mode.\n if (columnMeta?.enableTruncate) {\n const textareaElement = ref?.current as HTMLTextAreaElement;\n textareaElement.style.height = `${minMaxHeight.min}px`;\n\n // If truncation is not enabled, then textarea should re-calculate it's height to fit with it's own content, when initialized or fonsSize got changed.\n } else {\n const textareaElement = ref?.current as HTMLTextAreaElement;\n resizeTextArea(textareaElement);\n }\n }\n }, [fontSize]);\n\n React.useEffect(() => {\n // If truncation is enabled, then textarea should only adjust to it's own content, when in detail mode.\n // Otherwise it should collapse to minimal height.\n if (ref?.current && columnMeta?.enableTruncate) {\n const textareaElement = ref?.current as HTMLTextAreaElement;\n\n if (isCellInDetailMode) {\n resizeTextArea(textareaElement);\n } else {\n textareaElement.style.height = `${minMaxHeight.min}px`;\n }\n }\n }, [isCellInDetailMode]);\n\n const resizeTextArea = (textareaElement: HTMLTextAreaElement) => {\n // Need to set inherit before calculating height, so that browser sets the scrollHeight properly,\n // depending on text inside.\n const textareaRect = textareaElement.getBoundingClientRect();\n const prevHeight = textareaRect.height;\n if (columnMeta?.enableTruncate) {\n if (prevHeight < minMaxHeight.max) {\n textareaElement.style.height = 'inherit';\n textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, minMaxHeight.max)}px`;\n }\n } else {\n textareaElement.style.height = 'inherit';\n textareaElement.style.height = `${textareaElement.scrollHeight}px`;\n }\n };\n\n const handleTextareaChange = e => {\n resizeTextArea(e.target);\n };\n\n const textareaContainerClassName = cn('w-full', {\n 'focus-within:absolute focus-within:left-0 focus-within:top-0 focus-within:z-[9]': columnMeta?.enableTruncate,\n });\n const handleTextareaKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n // By default Shift + Enter in textarea makes a new line, we want to keep this behaviour\n if (event.shiftKey && event.key === 'Enter') {\n return;\n } else {\n handleKeyDown(event);\n }\n };\n\n const handleBlur = event => {\n // If truncation is enabled, then textarea should shring back to min height, when loosing focus.\n if (columnMeta?.enableTruncate) {\n const textareaElement = event.currentTarget;\n textareaElement.style.height = `${minMaxHeight.min}px`;\n }\n onBlur(event);\n };\n\n return (\n <div data-taco=\"input-container\">\n {/**\n * Textarea should have min height placeholder, because it becomes absolute positioned when focused,\n * which leads to overlapping of validation message rendered bellow.\n * Somehow tailwind cannot dynamically assign min height when arbitary value has been used(in this particular case),\n * so assigning it through style prop here\n **/}\n <div style={{ minHeight: `${minMaxHeight.min}px` }} className=\"relative\">\n <div className={textareaContainerClassName}>\n <Textarea\n {...attributes}\n onChange={event => {\n handleChange(event.target.value);\n handleTextareaChange(event);\n }}\n rows={1}\n onKeyDown={e => {\n handleTextareaKeyDown(e);\n }}\n onBlur={handleBlur}\n className={cn(\n getCellAlignmentClasses(align),\n `h-fit resize-none overflow-y-hidden focus:overflow-y-auto`,\n {\n [`!min-h-[${minMaxHeight.min}px]`]: columnMeta?.enableTruncate,\n '!yt-focus-dark': isCellInDetailMode,\n [`h-[${minMaxHeight.min}px]`]: !isCellInDetailMode && columnMeta?.enableTruncate,\n // Only allow resizing when focused and truncation enabled\n 'focus:resize-y': isActiveRow && columnMeta?.enableTruncate,\n }\n )}\n ref={ref}\n value={String(value ?? '')}\n />\n </div>\n </div>\n </div>\n );\n});\n"],"names":["heights","small","min","max","medium","large","TextareaControl","React","forwardRef","props","externalRef","onKeyDown","handleKeyDown","onChange","handleChange","onBlur","column","isCellInDetailMode","align","isActiveRow","value","fontSize","attributes","minMaxHeight","columnMeta","columnDef","meta","ref","useMergedRef","useEffect","current","enableTruncate","textareaElement","style","height","resizeTextArea","textareaRect","getBoundingClientRect","prevHeight","Math","scrollHeight","handleTextareaChange","e","target","textareaContainerClassName","cn","handleTextareaKeyDown","event","shiftKey","key","handleBlur","currentTarget","minHeight","className","Textarea","rows","getCellAlignmentClasses","String"],"mappings":"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"}
|
@@ -4,11 +4,11 @@ import { IconButton } from '../../../../IconButton/IconButton.js';
|
|
4
4
|
import { useLocalization } from '../../../../Provider/Localization.js';
|
5
5
|
import { Shortcut } from '../../../../Shortcut/Shortcut.js';
|
6
6
|
import { Menu } from '../../../../Menu/Menu.js';
|
7
|
+
import { FontSizes } from '../../../../../types.js';
|
7
8
|
import { Header } from '../header/Header.js';
|
8
9
|
import { RowContext } from '../../rows/RowContext.js';
|
9
10
|
import { DisplayCell } from '../cell/DisplayCell.js';
|
10
11
|
import { Footer } from '../footer/Footer.js';
|
11
|
-
import { FONT_SIZE } from '../../toolbar/FontSize.js';
|
12
12
|
import { isIndicatorVisible, getIndicatorCellClassName } from '../cell/Indicator.js';
|
13
13
|
|
14
14
|
const COLUMN_ID = '__actions';
|
@@ -53,8 +53,8 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
|
|
53
53
|
const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);
|
54
54
|
const className = cn('-mb-2 flex justify-end pl-2 text-right', {
|
55
55
|
// Adjust negative margin on row actions cell to ensure that the cell aligns vertically.
|
56
|
-
'-mt-2': fontSize ===
|
57
|
-
'-mt-1.5': fontSize !==
|
56
|
+
'-mt-2': fontSize === FontSizes.small,
|
57
|
+
'-mt-1.5': fontSize !== FontSizes.small
|
58
58
|
}, props.className);
|
59
59
|
content = /*#__PURE__*/React__default.createElement("span", {
|
60
60
|
className: className,
|
package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Actions.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Actions.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Actions.tsx"],"sourcesContent":["import React from 'react';\nimport { CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Table3FontSize, Table3RowActionRenderer } from '../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Menu } from '../../../../Menu/Menu';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\nimport { Footer } from '../footer/Footer';\nimport { FONT_SIZE } from '../../toolbar/FontSize';\nimport { getIndicatorCellClassName, isIndicatorVisible } from '../cell/Indicator';\n\nexport const COLUMN_ID = '__actions';\n\ntype MemoedCellProps<TType = unknown> = CellContext<TType, unknown> & {\n actions?: Table3RowActionRenderer<TType>[];\n actionsLength: number;\n className?: string;\n fontSize: Table3FontSize;\n isActiveRow: boolean;\n isEditing: boolean;\n isResizingColumn: boolean;\n isHoverStatePaused: boolean;\n};\n\nconst MemoedCell = React.memo(function MemoedCell<TType = unknown>(props: MemoedCellProps<TType>) {\n const { actions, actionsLength, fontSize, isActiveRow, isEditing, isResizingColumn, isHoverStatePaused, row } = props;\n const { isHovered } = React.useContext(RowContext);\n const { texts } = useLocalization();\n const ref = React.useRef<HTMLSpanElement | null>(null);\n /*\n const size = table.getState().columnSizing[COLUMN_ID];\n\n // the actions column needs to set its size based on its content, not the actual column\n // so we do this here instead of in the header\n React.useLayoutEffect(() => {\n if (ref.current && !size) {\n const width = ref.current.getBoundingClientRect().width;\n\n table.setColumnSizing(sizes => ({\n ...sizes,\n [COLUMN_ID]: width,\n }));\n }\n }, [ref.current]);\n */\n\n let content;\n\n // We don't want to show actions in edit mode, since we have editing actions,\n // which is shown in edit mode instead.\n if (actions?.length && !isEditing && (isActiveRow || (isHovered && !isHoverStatePaused && !isResizingColumn))) {\n const visibleActions = actions.map(action => action(row.original)).filter(action => !!action) as JSX.Element[];\n\n const actionsOnRow =\n visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);\n const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);\n\n const className = cn(\n '-mb-2 flex justify-end pl-2 text-right',\n {\n // Adjust negative margin on row actions cell to ensure that the cell aligns vertically.\n '-mt-2': fontSize === FONT_SIZE.small,\n '-mt-1.5': fontSize !== FONT_SIZE.small,\n },\n props.className\n );\n\n content = (\n <span className={className} ref={ref}>\n {actionsOnRow.map((button, index) => {\n const tooltip = String(button.props.tooltip ?? button.props['aria-label'] ?? '');\n\n return React.cloneElement(button, {\n appearance: 'transparent',\n key: index,\n tabIndex: isActiveRow ? 0 : -1,\n tooltip: button.props.shortcut ? (\n <>\n {tooltip}\n <Shortcut className=\"ml-2\" keys={button.props.shortcut} />\n </>\n ) : (\n tooltip\n ),\n });\n })}\n {actionsInMenu.length ? (\n <IconButton\n appearance=\"transparent\"\n aria-label={texts.table3.columns.actions.tooltip}\n icon=\"more\"\n tabIndex={isActiveRow ? 0 : -1}\n menu={menuProps => (\n <Menu {...menuProps}>\n <Menu.Content>\n {actionsInMenu.map((action, i) => (\n <Menu.Item key={i} {...action.props} shortcut={action.props.shortcut}>\n {action.props['aria-label']}\n </Menu.Item>\n ))}\n </Menu.Content>\n </Menu>\n )}\n />\n ) : null}\n </span>\n );\n }\n\n return <DisplayCell {...props}>{content}</DisplayCell>;\n}) as <TType = unknown>(props: MemoedCellProps<TType>) => JSX.Element;\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown>;\n\nfunction Cell<TType = unknown>(context: CellProps<TType>) {\n const { rowIndex } = React.useContext(RowContext);\n const tableMeta = context.table.options.meta as TableMeta<TType>;\n const allVisibleColumns = context.table.getVisibleLeafColumns();\n const lastColumnIndex = allVisibleColumns.length > 0 ? allVisibleColumns.length - 1 : 0;\n const className = isIndicatorVisible(rowIndex, tableMeta.rowActive.rowActiveIndex, tableMeta.editing.rowMoveReason)\n ? getIndicatorCellClassName(context.index, lastColumnIndex)\n : undefined;\n\n return (\n <MemoedCell<TType>\n {...context}\n actions={tableMeta.rowActions.actionsForRow}\n actionsLength={tableMeta.rowActions.actionsForRowLength}\n className={className}\n fontSize={tableMeta.fontSize.size}\n isActiveRow={tableMeta.rowActive.rowActiveIndex === rowIndex}\n isEditing={tableMeta.editing.isEditing}\n isResizingColumn={!!context.table.getState().columnSizingInfo.isResizingColumn}\n isHoverStatePaused={!!tableMeta.rowActive.isHoverStatePaused}\n />\n );\n}\n\nexport function createRowActionsColumn<TType = unknown>(): DisplayColumnDef<TType, unknown> {\n return {\n id: COLUMN_ID,\n header: ColumnHeader,\n cell: Cell,\n footer: Footer,\n meta: {\n align: 'right',\n className: cn(\n '!pt-[var(--table3-cell-padding-y)] print:opacity-0 [[role=\"table\"][data-editing=\"false\"]_&]:group-[[data-current=\"true\"]]/row:sticky [[role=\"table\"][data-pause-hover=\"false\"][data-editing=\"false\"]_&]:group-hover/row:sticky right-0 !pl-1 !pr-1',\n 'shadow-[-6px_0px_6px_var(--table3-row-actions-shadow)]',\n 'group-[[data-current=\"true\"][data-selected=\"false\"]]/row:text-grey-200',\n 'group-[[data-selected=\"true\"]]/row:text-blue-100',\n 'group-[[data-selected=\"false\"]:hover]/row:text-grey-100'\n ),\n enableOrdering: false,\n enableSearch: false,\n enableTruncate: false,\n header: '',\n headerClassName: 'items-center !p-0',\n },\n // options\n enableResizing: false,\n };\n}\n"],"names":["COLUMN_ID","MemoedCell","React","memo","props","actions","actionsLength","fontSize","isActiveRow","isEditing","isResizingColumn","isHoverStatePaused","row","isHovered","useContext","RowContext","texts","useLocalization","ref","useRef","content","length","visibleActions","map","action","original","filter","actionsOnRow","slice","actionsInMenu","className","cn","FONT_SIZE","small","button","index","tooltip","String","_ref","_button$props$tooltip","cloneElement","appearance","key","tabIndex","shortcut","Shortcut","keys","IconButton","table3","columns","icon","menu","menuProps","Menu","Content","i","Item","DisplayCell","Cell","context","rowIndex","tableMeta","table","options","meta","allVisibleColumns","getVisibleLeafColumns","lastColumnIndex","isIndicatorVisible","rowActive","rowActiveIndex","editing","rowMoveReason","getIndicatorCellClassName","undefined","rowActions","actionsForRow","actionsForRowLength","size","getState","columnSizingInfo","createRowActionsColumn","id","header","ColumnHeader","cell","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"Actions.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Actions.tsx"],"sourcesContent":["import React from 'react';\nimport { CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Table3RowActionRenderer } from '../../../types';\nimport { FontSize, FontSizes } from '../../../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Menu } from '../../../../Menu/Menu';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\nimport { Footer } from '../footer/Footer';\nimport { getIndicatorCellClassName, isIndicatorVisible } from '../cell/Indicator';\n\nexport const COLUMN_ID = '__actions';\n\ntype MemoedCellProps<TType = unknown> = CellContext<TType, unknown> & {\n actions?: Table3RowActionRenderer<TType>[];\n actionsLength: number;\n className?: string;\n fontSize: FontSize;\n isActiveRow: boolean;\n isEditing: boolean;\n isResizingColumn: boolean;\n isHoverStatePaused: boolean;\n};\n\nconst MemoedCell = React.memo(function MemoedCell<TType = unknown>(props: MemoedCellProps<TType>) {\n const { actions, actionsLength, fontSize, isActiveRow, isEditing, isResizingColumn, isHoverStatePaused, row } = props;\n const { isHovered } = React.useContext(RowContext);\n const { texts } = useLocalization();\n const ref = React.useRef<HTMLSpanElement | null>(null);\n /*\n const size = table.getState().columnSizing[COLUMN_ID];\n\n // the actions column needs to set its size based on its content, not the actual column\n // so we do this here instead of in the header\n React.useLayoutEffect(() => {\n if (ref.current && !size) {\n const width = ref.current.getBoundingClientRect().width;\n\n table.setColumnSizing(sizes => ({\n ...sizes,\n [COLUMN_ID]: width,\n }));\n }\n }, [ref.current]);\n */\n\n let content;\n\n // We don't want to show actions in edit mode, since we have editing actions,\n // which is shown in edit mode instead.\n if (actions?.length && !isEditing && (isActiveRow || (isHovered && !isHoverStatePaused && !isResizingColumn))) {\n const visibleActions = actions.map(action => action(row.original)).filter(action => !!action) as JSX.Element[];\n\n const actionsOnRow =\n visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);\n const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);\n\n const className = cn(\n '-mb-2 flex justify-end pl-2 text-right',\n {\n // Adjust negative margin on row actions cell to ensure that the cell aligns vertically.\n '-mt-2': fontSize === FontSizes.small,\n '-mt-1.5': fontSize !== FontSizes.small,\n },\n props.className\n );\n\n content = (\n <span className={className} ref={ref}>\n {actionsOnRow.map((button, index) => {\n const tooltip = String(button.props.tooltip ?? button.props['aria-label'] ?? '');\n\n return React.cloneElement(button, {\n appearance: 'transparent',\n key: index,\n tabIndex: isActiveRow ? 0 : -1,\n tooltip: button.props.shortcut ? (\n <>\n {tooltip}\n <Shortcut className=\"ml-2\" keys={button.props.shortcut} />\n </>\n ) : (\n tooltip\n ),\n });\n })}\n {actionsInMenu.length ? (\n <IconButton\n appearance=\"transparent\"\n aria-label={texts.table3.columns.actions.tooltip}\n icon=\"more\"\n tabIndex={isActiveRow ? 0 : -1}\n menu={menuProps => (\n <Menu {...menuProps}>\n <Menu.Content>\n {actionsInMenu.map((action, i) => (\n <Menu.Item key={i} {...action.props} shortcut={action.props.shortcut}>\n {action.props['aria-label']}\n </Menu.Item>\n ))}\n </Menu.Content>\n </Menu>\n )}\n />\n ) : null}\n </span>\n );\n }\n\n return <DisplayCell {...props}>{content}</DisplayCell>;\n}) as <TType = unknown>(props: MemoedCellProps<TType>) => JSX.Element;\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown>;\n\nfunction Cell<TType = unknown>(context: CellProps<TType>) {\n const { rowIndex } = React.useContext(RowContext);\n const tableMeta = context.table.options.meta as TableMeta<TType>;\n const allVisibleColumns = context.table.getVisibleLeafColumns();\n const lastColumnIndex = allVisibleColumns.length > 0 ? allVisibleColumns.length - 1 : 0;\n const className = isIndicatorVisible(rowIndex, tableMeta.rowActive.rowActiveIndex, tableMeta.editing.rowMoveReason)\n ? getIndicatorCellClassName(context.index, lastColumnIndex)\n : undefined;\n\n return (\n <MemoedCell<TType>\n {...context}\n actions={tableMeta.rowActions.actionsForRow}\n actionsLength={tableMeta.rowActions.actionsForRowLength}\n className={className}\n fontSize={tableMeta.fontSize.size}\n isActiveRow={tableMeta.rowActive.rowActiveIndex === rowIndex}\n isEditing={tableMeta.editing.isEditing}\n isResizingColumn={!!context.table.getState().columnSizingInfo.isResizingColumn}\n isHoverStatePaused={!!tableMeta.rowActive.isHoverStatePaused}\n />\n );\n}\n\nexport function createRowActionsColumn<TType = unknown>(): DisplayColumnDef<TType, unknown> {\n return {\n id: COLUMN_ID,\n header: ColumnHeader,\n cell: Cell,\n footer: Footer,\n meta: {\n align: 'right',\n className: cn(\n '!pt-[var(--table3-cell-padding-y)] print:opacity-0 [[role=\"table\"][data-editing=\"false\"]_&]:group-[[data-current=\"true\"]]/row:sticky [[role=\"table\"][data-pause-hover=\"false\"][data-editing=\"false\"]_&]:group-hover/row:sticky right-0 !pl-1 !pr-1',\n 'shadow-[-6px_0px_6px_var(--table3-row-actions-shadow)]',\n 'group-[[data-current=\"true\"][data-selected=\"false\"]]/row:text-grey-200',\n 'group-[[data-selected=\"true\"]]/row:text-blue-100',\n 'group-[[data-selected=\"false\"]:hover]/row:text-grey-100'\n ),\n enableOrdering: false,\n enableSearch: false,\n enableTruncate: false,\n header: '',\n headerClassName: 'items-center !p-0',\n },\n // options\n enableResizing: false,\n };\n}\n"],"names":["COLUMN_ID","MemoedCell","React","memo","props","actions","actionsLength","fontSize","isActiveRow","isEditing","isResizingColumn","isHoverStatePaused","row","isHovered","useContext","RowContext","texts","useLocalization","ref","useRef","content","length","visibleActions","map","action","original","filter","actionsOnRow","slice","actionsInMenu","className","cn","FontSizes","small","button","index","tooltip","String","_ref","_button$props$tooltip","cloneElement","appearance","key","tabIndex","shortcut","Shortcut","keys","IconButton","table3","columns","icon","menu","menuProps","Menu","Content","i","Item","DisplayCell","Cell","context","rowIndex","tableMeta","table","options","meta","allVisibleColumns","getVisibleLeafColumns","lastColumnIndex","isIndicatorVisible","rowActive","rowActiveIndex","editing","rowMoveReason","getIndicatorCellClassName","undefined","rowActions","actionsForRow","actionsForRowLength","size","getState","columnSizingInfo","createRowActionsColumn","id","header","ColumnHeader","cell","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing"],"mappings":"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"}
|
@@ -1,12 +1,8 @@
|
|
1
1
|
import React__default from 'react';
|
2
2
|
import { useLocalization } from '../../../Provider/Localization.js';
|
3
3
|
import { Menu } from '../../../Menu/Menu.js';
|
4
|
+
import { FontSizes } from '../../../../types.js';
|
4
5
|
|
5
|
-
const FONT_SIZE = {
|
6
|
-
small: 'small',
|
7
|
-
medium: 'medium',
|
8
|
-
large: 'large'
|
9
|
-
};
|
10
6
|
function FontSize(props) {
|
11
7
|
const {
|
12
8
|
texts
|
@@ -17,14 +13,14 @@ function FontSize(props) {
|
|
17
13
|
onChange: handleChange,
|
18
14
|
value: meta.fontSize.size
|
19
15
|
}, /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
|
20
|
-
value:
|
16
|
+
value: FontSizes.small
|
21
17
|
}, texts.table3.fontSize.sizes.small), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
|
22
|
-
value:
|
18
|
+
value: FontSizes.medium
|
23
19
|
}, texts.table3.fontSize.sizes.medium), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
|
24
20
|
disabled: meta.rowHeight.height === 'short',
|
25
|
-
value:
|
21
|
+
value: FontSizes.large
|
26
22
|
}, texts.table3.fontSize.sizes.large)));
|
27
23
|
}
|
28
24
|
|
29
|
-
export {
|
25
|
+
export { FontSize };
|
30
26
|
//# sourceMappingURL=FontSize.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"FontSize.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/FontSize.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { Menu } from '../../../Menu/Menu';\nimport { useLocalization } from '../../../Provider/Localization';\nimport {
|
1
|
+
{"version":3,"file":"FontSize.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/FontSize.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { Menu } from '../../../Menu/Menu';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { FontSizes } from '../../../../types';\nimport { RadioGroupItemValue } from '../../../..';\n\ntype FontSizeButtonProps<TType = unknown> = {\n table: RTable<TType>;\n};\n\nexport function FontSize<TType = unknown>(props: FontSizeButtonProps<TType>) {\n const { texts } = useLocalization();\n const meta = props.table.options.meta as TableMeta<unknown>;\n const handleChange = (value: RadioGroupItemValue) => meta.fontSize.setSize(value as FontSizes);\n\n return (\n <Menu.SubMenu>\n <Menu.RadioGroup onChange={handleChange} value={meta.fontSize.size}>\n <Menu.RadioGroup.Item value={FontSizes.small}>{texts.table3.fontSize.sizes.small}</Menu.RadioGroup.Item>\n <Menu.RadioGroup.Item value={FontSizes.medium}>{texts.table3.fontSize.sizes.medium}</Menu.RadioGroup.Item>\n <Menu.RadioGroup.Item disabled={meta.rowHeight.height === 'short'} value={FontSizes.large}>\n {texts.table3.fontSize.sizes.large}\n </Menu.RadioGroup.Item>\n </Menu.RadioGroup>\n </Menu.SubMenu>\n );\n}\n"],"names":["FontSize","props","texts","useLocalization","meta","table","options","handleChange","value","fontSize","setSize","React","Menu","SubMenu","RadioGroup","onChange","size","Item","FontSizes","small","table3","sizes","medium","disabled","rowHeight","height","large"],"mappings":";;;;;SAWgBA,QAAQA,CAAkBC,KAAiC;EACvE,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,IAAI,GAAGH,KAAK,CAACI,KAAK,CAACC,OAAO,CAACF,IAA0B;EAC3D,MAAMG,YAAY,GAAIC,KAA0B,IAAKJ,IAAI,CAACK,QAAQ,CAACC,OAAO,CAACF,KAAkB,CAAC;EAE9F,oBACIG,6BAACC,IAAI,CAACC,OAAO,qBACTF,6BAACC,IAAI,CAACE,UAAU;IAACC,QAAQ,EAAER,YAAY;IAAEC,KAAK,EAAEJ,IAAI,CAACK,QAAQ,CAACO;kBAC1DL,6BAACC,IAAI,CAACE,UAAU,CAACG,IAAI;IAACT,KAAK,EAAEU,SAAS,CAACC;KAAQjB,KAAK,CAACkB,MAAM,CAACX,QAAQ,CAACY,KAAK,CAACF,KAAK,CAAwB,eACxGR,6BAACC,IAAI,CAACE,UAAU,CAACG,IAAI;IAACT,KAAK,EAAEU,SAAS,CAACI;KAASpB,KAAK,CAACkB,MAAM,CAACX,QAAQ,CAACY,KAAK,CAACC,MAAM,CAAwB,eAC1GX,6BAACC,IAAI,CAACE,UAAU,CAACG,IAAI;IAACM,QAAQ,EAAEnB,IAAI,CAACoB,SAAS,CAACC,MAAM,KAAK,OAAO;IAAEjB,KAAK,EAAEU,SAAS,CAACQ;KAC/ExB,KAAK,CAACkB,MAAM,CAACX,QAAQ,CAACY,KAAK,CAACK,KAAK,CACf,CACT,CACP;AAEvB;;;;"}
|
package/dist/esm/packages/taco/src/components/Table3/components/toolbar/PrintButton/PrintIFrame.js
CHANGED
@@ -55,6 +55,7 @@ import '../../../../SearchInput/SearchInput.js';
|
|
55
55
|
import '../../../../SearchInput2/SearchInput2.js';
|
56
56
|
import '../../../../../primitives/Collection/Collection.js';
|
57
57
|
import '../../../../Tag/Tag.js';
|
58
|
+
import '../../../../../types.js';
|
58
59
|
import '../../../../Select2/Select2.js';
|
59
60
|
import '../../../../Switch/Switch.js';
|
60
61
|
import '../../../../Table/components/Table.js';
|
@@ -68,7 +69,6 @@ import '../../../../Textarea/Textarea.js';
|
|
68
69
|
import '../../../../../hooks/useMatchMedia.js';
|
69
70
|
import '../../../../../hooks/useIsLargeScreen.js';
|
70
71
|
import { useParentStylesheets } from './hooks/useParentStylesheets.js';
|
71
|
-
import '../../../../../types.js';
|
72
72
|
import '../../../hooks/useTableDataLoader.js';
|
73
73
|
import { Table3 } from '../../../Table3.js';
|
74
74
|
import '../../../../Tabs/Tabs.js';
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React__default from 'react';
|
2
2
|
import { useLocalization } from '../../../Provider/Localization.js';
|
3
3
|
import { Menu } from '../../../Menu/Menu.js';
|
4
|
-
import {
|
4
|
+
import { FontSizes } from '../../../../types.js';
|
5
5
|
|
6
6
|
function RowHeight(props) {
|
7
7
|
const {
|
@@ -11,8 +11,8 @@ function RowHeight(props) {
|
|
11
11
|
const handleChange = value => {
|
12
12
|
const height = value;
|
13
13
|
meta.rowHeight.setHeight(height);
|
14
|
-
if (height === 'short' && meta.fontSize.size ===
|
15
|
-
meta.fontSize.setSize(
|
14
|
+
if (height === 'short' && meta.fontSize.size === FontSizes.large) {
|
15
|
+
meta.fontSize.setSize(FontSizes.medium);
|
16
16
|
}
|
17
17
|
};
|
18
18
|
return /*#__PURE__*/React__default.createElement(Menu.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu.RadioGroup, {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"RowHeight.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/RowHeight.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { Menu } from '../../../Menu/Menu';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Table3RowHeight } from '../../types';\nimport { RadioGroupItemValue } from '../../../..';\nimport {
|
1
|
+
{"version":3,"file":"RowHeight.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/RowHeight.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { Menu } from '../../../Menu/Menu';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Table3RowHeight } from '../../types';\nimport { RadioGroupItemValue } from '../../../..';\nimport { FontSizes } from '../../../../types';\n\ntype RowHeightButtonProps<TType = unknown> = {\n table: RTable<TType>;\n};\n\nexport function RowHeight<TType = unknown>(props: RowHeightButtonProps<TType>) {\n const { texts } = useLocalization();\n const meta = props.table.options.meta as TableMeta<unknown>;\n const handleChange = (value: RadioGroupItemValue) => {\n const height = value as Table3RowHeight;\n\n meta.rowHeight.setHeight(height);\n\n if (height === 'short' && meta.fontSize.size === FontSizes.large) {\n meta.fontSize.setSize(FontSizes.medium);\n }\n };\n\n return (\n <Menu.SubMenu>\n <Menu.RadioGroup onChange={handleChange} value={meta.rowHeight.height}>\n <Menu.RadioGroup.Item value=\"short\">{texts.table3.rowHeight.sizes.short}</Menu.RadioGroup.Item>\n <Menu.RadioGroup.Item value=\"medium\">{texts.table3.rowHeight.sizes.medium}</Menu.RadioGroup.Item>\n <Menu.RadioGroup.Item value=\"tall\">{texts.table3.rowHeight.sizes.tall}</Menu.RadioGroup.Item>\n <Menu.RadioGroup.Item value=\"extra-tall\">{texts.table3.rowHeight.sizes.extraTall}</Menu.RadioGroup.Item>\n </Menu.RadioGroup>\n </Menu.SubMenu>\n );\n}\n"],"names":["RowHeight","props","texts","useLocalization","meta","table","options","handleChange","value","height","rowHeight","setHeight","fontSize","size","FontSizes","large","setSize","medium","React","Menu","SubMenu","RadioGroup","onChange","Item","table3","sizes","short","tall","extraTall"],"mappings":";;;;;SAYgBA,SAASA,CAAkBC,KAAkC;EACzE,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,IAAI,GAAGH,KAAK,CAACI,KAAK,CAACC,OAAO,CAACF,IAA0B;EAC3D,MAAMG,YAAY,GAAIC,KAA0B;IAC5C,MAAMC,MAAM,GAAGD,KAAwB;IAEvCJ,IAAI,CAACM,SAAS,CAACC,SAAS,CAACF,MAAM,CAAC;IAEhC,IAAIA,MAAM,KAAK,OAAO,IAAIL,IAAI,CAACQ,QAAQ,CAACC,IAAI,KAAKC,SAAS,CAACC,KAAK,EAAE;MAC9DX,IAAI,CAACQ,QAAQ,CAACI,OAAO,CAACF,SAAS,CAACG,MAAM,CAAC;;GAE9C;EAED,oBACIC,6BAACC,IAAI,CAACC,OAAO,qBACTF,6BAACC,IAAI,CAACE,UAAU;IAACC,QAAQ,EAAEf,YAAY;IAAEC,KAAK,EAAEJ,IAAI,CAACM,SAAS,CAACD;kBAC3DS,6BAACC,IAAI,CAACE,UAAU,CAACE,IAAI;IAACf,KAAK,EAAC;KAASN,KAAK,CAACsB,MAAM,CAACd,SAAS,CAACe,KAAK,CAACC,KAAK,CAAwB,eAC/FR,6BAACC,IAAI,CAACE,UAAU,CAACE,IAAI;IAACf,KAAK,EAAC;KAAUN,KAAK,CAACsB,MAAM,CAACd,SAAS,CAACe,KAAK,CAACR,MAAM,CAAwB,eACjGC,6BAACC,IAAI,CAACE,UAAU,CAACE,IAAI;IAACf,KAAK,EAAC;KAAQN,KAAK,CAACsB,MAAM,CAACd,SAAS,CAACe,KAAK,CAACE,IAAI,CAAwB,eAC7FT,6BAACC,IAAI,CAACE,UAAU,CAACE,IAAI;IAACf,KAAK,EAAC;KAAcN,KAAK,CAACsB,MAAM,CAACd,SAAS,CAACe,KAAK,CAACG,SAAS,CAAwB,CAC1F,CACP;AAEvB;;;;"}
|
@@ -2,9 +2,9 @@ import React__default from 'react';
|
|
2
2
|
import { IconButton } from '../../../IconButton/IconButton.js';
|
3
3
|
import { useLocalization } from '../../../Provider/Localization.js';
|
4
4
|
import { Menu } from '../../../Menu/Menu.js';
|
5
|
-
import { FontSize } from './FontSize.js';
|
6
5
|
import { RowHeight } from './RowHeight.js';
|
7
6
|
import { ColumnSettingsPopover } from './ColumnSettings.js';
|
7
|
+
import { FontSize } from './FontSize.js';
|
8
8
|
|
9
9
|
function SettingsButton(props) {
|
10
10
|
const {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useCssGrid.js","sources":["../../../../../../../../src/components/Table3/hooks/useCssGrid.ts"],"sourcesContent":["import React from 'react';\nimport { Table as RTable } from '@tanstack/react-table';\n\nimport { isInternalColumn } from '../util/columns';\nimport { getFontBasedMinColumnSize, PRINT_MIN_COLUMN_SIZE } from '../components/columns/styles';\nimport { COLUMN_ID as ACTIONS_COLUMN_ID } from '../components/columns/internal/Actions';\nimport {
|
1
|
+
{"version":3,"file":"useCssGrid.js","sources":["../../../../../../../../src/components/Table3/hooks/useCssGrid.ts"],"sourcesContent":["import React from 'react';\nimport { Table as RTable } from '@tanstack/react-table';\n\nimport { isInternalColumn } from '../util/columns';\nimport { getFontBasedMinColumnSize, PRINT_MIN_COLUMN_SIZE } from '../components/columns/styles';\nimport { COLUMN_ID as ACTIONS_COLUMN_ID } from '../components/columns/internal/Actions';\nimport { FontSize } from '../../../types';\n\nexport const useCssGrid = <TType = unknown>(\n table: RTable<TType>,\n isPrintTable = false,\n actionsForRowLength = 0,\n fontSize: FontSize\n) => {\n const allVisibleColumns = table.getVisibleLeafColumns();\n const columnSizing = table.getState().columnSizing;\n const rowsLength = table.getRowModel().rows.length;\n const expandedRowsLength = Object.keys(table.getState().expanded).length;\n const length = rowsLength + expandedRowsLength;\n const minColumnSize = getFontBasedMinColumnSize(fontSize);\n const gridTemplateColumns = React.useMemo(() => {\n return allVisibleColumns.reduce((accum, column, index) => {\n let size;\n const isLastColumn = index === allVisibleColumns.length - 1;\n // column has a getSize function, but it always returns a default value (150), and we want the\n // first render to use auto layout - so we get the size directly from table state where it is undefined\n const width = columnSizing[column.id] as number | '1fr';\n const isColumnInternal = isInternalColumn(column.id);\n\n if (isPrintTable) {\n const maxWidth = isColumnInternal ? `${column.getSize()}px` : '1fr';\n\n size = `minmax(${PRINT_MIN_COLUMN_SIZE}px, ${maxWidth})`;\n } else if (isColumnInternal) {\n if (column.id === ACTIONS_COLUMN_ID) {\n const minWidth = actionsForRowLength * 32 + 8 /* button margins l+r */ + 8; /* cell padding l+r */\n size = `minmax(${minWidth}px, auto)`;\n } else {\n // getSize method is used instead of columnSizing state because columnSizing state doesn't have\n // sizes of internal columns.\n size = `${column.getSize()}px`;\n }\n } else if (width !== undefined) {\n if (width === '1fr') {\n size = 'minmax(max-content, 1fr)';\n } else if (isLastColumn) {\n size = `minmax(${width}px, auto)`;\n } else if (width < minColumnSize) {\n // the react-table getResizeHandler function does not respect the minSize property on columns, it is possible\n // to go below the minSize - so we have to prevent it entirely on the grid layout\n size = `${minColumnSize}px`;\n } else {\n size = `${width}px`;\n }\n } else {\n size = 'minmax(max-content, auto)';\n }\n\n return `${accum} ${size}`.trim();\n }, '');\n }, [allVisibleColumns, columnSizing, minColumnSize]);\n\n const gridTemplateRows = React.useMemo(() => {\n // 1fr makes sure that there is always a free space between the rows and footer when table height exceeds the\n // cumulative height of all rows\n return `min-content repeat(${length}, min-content) 1fr min-content`;\n }, [length]);\n\n const style: React.CSSProperties = {\n gridTemplateColumns,\n gridTemplateRows,\n };\n\n return { style };\n};\n"],"names":["useCssGrid","table","isPrintTable","actionsForRowLength","fontSize","allVisibleColumns","getVisibleLeafColumns","columnSizing","getState","rowsLength","getRowModel","rows","length","expandedRowsLength","Object","keys","expanded","minColumnSize","getFontBasedMinColumnSize","gridTemplateColumns","React","useMemo","reduce","accum","column","index","size","isLastColumn","width","id","isColumnInternal","isInternalColumn","maxWidth","getSize","PRINT_MIN_COLUMN_SIZE","ACTIONS_COLUMN_ID","minWidth","undefined","trim","gridTemplateRows","style"],"mappings":";;;;;MAQaA,UAAU,GAAGA,CACtBC,KAAoB,EACpBC,YAAY,GAAG,KAAK,EACpBC,mBAAmB,GAAG,CAAC,EACvBC,QAAkB;EAElB,MAAMC,iBAAiB,GAAGJ,KAAK,CAACK,qBAAqB,EAAE;EACvD,MAAMC,YAAY,GAAGN,KAAK,CAACO,QAAQ,EAAE,CAACD,YAAY;EAClD,MAAME,UAAU,GAAGR,KAAK,CAACS,WAAW,EAAE,CAACC,IAAI,CAACC,MAAM;EAClD,MAAMC,kBAAkB,GAAGC,MAAM,CAACC,IAAI,CAACd,KAAK,CAACO,QAAQ,EAAE,CAACQ,QAAQ,CAAC,CAACJ,MAAM;EACxE,MAAMA,MAAM,GAAGH,UAAU,GAAGI,kBAAkB;EAC9C,MAAMI,aAAa,GAAGC,yBAAyB,CAACd,QAAQ,CAAC;EACzD,MAAMe,mBAAmB,GAAGC,cAAK,CAACC,OAAO,CAAC;IACtC,OAAOhB,iBAAiB,CAACiB,MAAM,CAAC,CAACC,KAAK,EAAEC,MAAM,EAAEC,KAAK;MACjD,IAAIC,IAAI;MACR,MAAMC,YAAY,GAAGF,KAAK,KAAKpB,iBAAiB,CAACO,MAAM,GAAG,CAAC;;;MAG3D,MAAMgB,KAAK,GAAGrB,YAAY,CAACiB,MAAM,CAACK,EAAE,CAAmB;MACvD,MAAMC,gBAAgB,GAAGC,gBAAgB,CAACP,MAAM,CAACK,EAAE,CAAC;MAEpD,IAAI3B,YAAY,EAAE;QACd,MAAM8B,QAAQ,GAAGF,gBAAgB,MAAMN,MAAM,CAACS,OAAO,MAAM,GAAG,KAAK;QAEnEP,IAAI,aAAaQ,4BAA4BF,WAAW;OAC3D,MAAM,IAAIF,gBAAgB,EAAE;QACzB,IAAIN,MAAM,CAACK,EAAE,KAAKM,SAAiB,EAAE;UACjC,MAAMC,QAAQ,GAAGjC,mBAAmB,GAAG,EAAE,GAAG,CAAC,4BAA4B,CAAC,CAAC;UAC3EuB,IAAI,aAAaU,mBAAmB;SACvC,MAAM;;;UAGHV,IAAI,MAAMF,MAAM,CAACS,OAAO,MAAM;;OAErC,MAAM,IAAIL,KAAK,KAAKS,SAAS,EAAE;QAC5B,IAAIT,KAAK,KAAK,KAAK,EAAE;UACjBF,IAAI,GAAG,0BAA0B;SACpC,MAAM,IAAIC,YAAY,EAAE;UACrBD,IAAI,aAAaE,gBAAgB;SACpC,MAAM,IAAIA,KAAK,GAAGX,aAAa,EAAE;;;UAG9BS,IAAI,MAAMT,iBAAiB;SAC9B,MAAM;UACHS,IAAI,MAAME,SAAS;;OAE1B,MAAM;QACHF,IAAI,GAAG,2BAA2B;;MAGtC,UAAUH,SAASG,MAAM,CAACY,IAAI,EAAE;KACnC,EAAE,EAAE,CAAC;GACT,EAAE,CAACjC,iBAAiB,EAAEE,YAAY,EAAEU,aAAa,CAAC,CAAC;EAEpD,MAAMsB,gBAAgB,GAAGnB,cAAK,CAACC,OAAO,CAAC;;;IAGnC,6BAA6BT,sCAAsC;GACtE,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,MAAM4B,KAAK,GAAwB;IAC/BrB,mBAAmB;IACnBoB;GACH;EAED,OAAO;IAAEC;GAAO;AACpB;;;;"}
|