@coveord/plasma-mantine 52.10.0 → 52.10.1
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/.turbo/turbo-build.log +3 -3
- package/.turbo/turbo-test.log +28 -28
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/components/code-editor/CodeEditor.js +4 -1
- package/dist/cjs/components/code-editor/CodeEditor.js.map +1 -1
- package/dist/cjs/components/collection/Collection.js +5 -3
- package/dist/cjs/components/collection/Collection.js.map +1 -1
- package/dist/cjs/components/date-range-picker/EditableDateRangePicker.js +2 -2
- package/dist/cjs/components/date-range-picker/EditableDateRangePicker.js.map +1 -1
- package/dist/cjs/components/modal-wizard/ModalWizard.js +2 -2
- package/dist/cjs/components/modal-wizard/ModalWizard.js.map +1 -1
- package/dist/cjs/components/table/Table.js +2 -1
- package/dist/cjs/components/table/Table.js.map +1 -1
- package/dist/cjs/components/table/TablePerPage.js +2 -2
- package/dist/cjs/components/table/TablePerPage.js.map +1 -1
- package/dist/cjs/components/table/layouts/RowLayout.js.map +1 -1
- package/dist/cjs/theme/Theme.js +1 -1
- package/dist/cjs/theme/Theme.js.map +1 -1
- package/dist/esm/components/code-editor/CodeEditor.js +4 -1
- package/dist/esm/components/code-editor/CodeEditor.js.map +1 -1
- package/dist/esm/components/collection/Collection.js +5 -3
- package/dist/esm/components/collection/Collection.js.map +1 -1
- package/dist/esm/components/date-range-picker/EditableDateRangePicker.js +2 -2
- package/dist/esm/components/date-range-picker/EditableDateRangePicker.js.map +1 -1
- package/dist/esm/components/modal-wizard/ModalWizard.js +2 -2
- package/dist/esm/components/modal-wizard/ModalWizard.js.map +1 -1
- package/dist/esm/components/table/Table.js +2 -1
- package/dist/esm/components/table/Table.js.map +1 -1
- package/dist/esm/components/table/TablePerPage.js +2 -2
- package/dist/esm/components/table/TablePerPage.js.map +1 -1
- package/dist/esm/components/table/layouts/RowLayout.js.map +1 -1
- package/dist/esm/theme/Theme.js +1 -1
- package/dist/esm/theme/Theme.js.map +1 -1
- package/package.json +16 -16
- package/src/components/code-editor/CodeEditor.tsx +1 -1
|
@@ -173,7 +173,10 @@ var CodeEditor = function(props) {
|
|
|
173
173
|
onMount: function(editor, monaco) {
|
|
174
174
|
editorRef.current = editor;
|
|
175
175
|
registerLanguages(monaco);
|
|
176
|
-
editor.onDidFocusEditorText(
|
|
176
|
+
editor.onDidFocusEditorText(function() {
|
|
177
|
+
var _onFocus;
|
|
178
|
+
return (_onFocus = onFocus) === null || _onFocus === void 0 ? void 0 : _onFocus();
|
|
179
|
+
});
|
|
177
180
|
editor.onDidBlurEditorText(/*#__PURE__*/ _async_to_generator._(function() {
|
|
178
181
|
return _ts_generator._(this, function(_state) {
|
|
179
182
|
switch(_state.label){
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"sourcesContent":["import {\n Box,\n Center,\n createStyles,\n DefaultProps,\n Group,\n Input,\n InputWrapperBaseProps,\n Loader,\n px,\n Selectors,\n Space,\n Stack,\n useComponentDefaultProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport Editor, {loader, Monaco} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect, useState, useRef} from 'react';\n\nimport {useParentHeight} from '../../hooks';\nimport {XML} from './languages/xml';\nimport {CopyToClipboard} from '../copyToClipboard';\nimport {Search} from './search';\n\nconst useStyles = createStyles((theme) => ({\n root: {},\n editor: {\n border: `1px solid ${theme.colors.gray[2]}`,\n borderRadius: theme.defaultRadius,\n backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n height: '100%',\n },\n}));\n\ninterface CodeEditorProps\n extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n DefaultProps<Selectors<typeof useStyles>> {\n /**\n * The language syntax of the editor\n *\n * @default 'plaintext'\n */\n language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml';\n /** Default value for uncontrolled input */\n defaultValue?: string;\n /** Value for controlled input */\n value?: string;\n /** onChange value for controlled input */\n onChange?(value: string): void;\n /** Called whenever the code editor gets the focus */\n onFocus?(): void;\n /**\n * The minimal height of the CodeEditor (label and description included)\n *\n * By default the CodeEditor is adjusted to fill its parent height.\n * In the case where the parent height is too short, it will use this value as minimum.\n *\n * @default 300\n */\n minHeight?: number;\n /**\n * The maximal height of the CodeEditor (label and description included)\n *\n * By default the CodeEditor is adjusted to fill its parent height.\n * In the case where the parent height would be too high for your liking, you can use this prop to set a maximum.\n */\n maxHeight?: number;\n disabled?: boolean;\n /**\n * Defines how the monaco editor files will be loaded.\n * Note that using `'local'` requires [some additional configuration](https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package).\n *\n * @default 'local'\n */\n monacoLoader?: 'cdn' | 'local';\n}\n\nconst defaultProps: Partial<CodeEditorProps> = {\n language: 'plaintext',\n monacoLoader: 'local',\n defaultValue: '',\n minHeight: 300,\n};\n\nexport const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {\n const {\n language,\n defaultValue,\n onChange,\n onFocus,\n value,\n label,\n required,\n labelProps,\n error,\n errorProps,\n description,\n descriptionProps,\n minHeight,\n maxHeight,\n disabled,\n monacoLoader,\n ...others\n } = useComponentDefaultProps('CodeEditor', defaultProps, props);\n const [loaded, setLoaded] = useState(false);\n const {classes, theme} = useStyles();\n const [_value, handleChange] = useUncontrolled<string>({\n value,\n defaultValue,\n onChange,\n finalValue: '',\n });\n const [parentHeight, ref] = useParentHeight();\n const editorRef = useRef(null);\n\n const loadLocalMonaco = async () => {\n const monacoInstance = await import('monaco-editor');\n loader.config({monaco: monacoInstance});\n setLoaded(true);\n };\n\n const registerLanguages = (monaco: Monaco) => {\n if (monaco && language === 'xml') {\n XML.register(monaco);\n }\n };\n\n const handleSearch = () => {\n if (editorRef.current) {\n editorRef.current.focus();\n editorRef.current.trigger('editor', 'actions.find', '');\n }\n };\n\n useEffect(() => {\n if (monacoLoader === 'local') {\n loadLocalMonaco();\n } else {\n setLoaded(true);\n }\n }, []);\n\n const _label = label ? (\n <Input.Label required={required} {...labelProps}>\n {label}\n </Input.Label>\n ) : null;\n\n const _description = description ? (\n <Input.Description {...descriptionProps}>{description}</Input.Description>\n ) : null;\n\n const _error = error ? (\n <Input.Error mt=\"xs\" {...errorProps}>\n {error}\n </Input.Error>\n ) : (\n <Space h=\"xs\" />\n );\n\n const _header =\n _label || _description ? (\n <Box>\n {_label}\n {_description}\n </Box>\n ) : null;\n\n const _buttons = (\n <Group position=\"right\" spacing={0}>\n <Search handleSearch={handleSearch} />\n <CopyToClipboard value={_value} />\n </Group>\n );\n\n const _editor = loaded ? (\n <Box p=\"md\" pl=\"xs\" className={classes.editor}>\n <Editor\n defaultLanguage={language}\n theme={theme.colorScheme === 'light' ? 'light' : 'vs-dark'}\n options={{\n minimap: {enabled: false},\n wordWrap: 'on',\n wrappingStrategy: 'advanced',\n scrollBeyondLastLine: false,\n formatOnPaste: true,\n fontSize: px(theme.fontSizes.xs),\n readOnly: disabled,\n tabSize: 2,\n }}\n value={_value}\n onChange={handleChange}\n onMount={(editor, monaco) => {\n editorRef.current = editor;\n registerLanguages(monaco);\n editor.onDidFocusEditorText(onFocus);\n editor.onDidBlurEditorText(async () => {\n await editor.getAction('editor.action.formatDocument').run();\n });\n }}\n />\n </Box>\n ) : (\n <Center className={classes.editor}>\n <Loader />\n </Center>\n );\n\n return (\n <Stack\n justify=\"flex-start\"\n className={classes.root}\n spacing={0}\n sx={{height: Math.max(parentHeight, minHeight), maxHeight}}\n ref={ref}\n {...others}\n >\n {_header}\n {_buttons}\n {_editor}\n {_error}\n </Stack>\n );\n};\n"],"names":["CodeEditor","useStyles","createStyles","theme","root","editor","border","colors","gray","borderRadius","defaultRadius","backgroundColor","colorScheme","white","black","height","defaultProps","language","monacoLoader","defaultValue","minHeight","props","useComponentDefaultProps","onChange","onFocus","value","label","required","labelProps","error","errorProps","description","descriptionProps","maxHeight","disabled","others","useState","loaded","setLoaded","classes","useUncontrolled","finalValue","_value","handleChange","useParentHeight","parentHeight","ref","editorRef","useRef","loadLocalMonaco","monacoInstance","loader","config","monaco","registerLanguages","XML","register","handleSearch","current","focus","trigger","useEffect","_label","Input","Label","_description","Description","_error","Error","mt","Space","h","_header","Box","_buttons","Group","position","spacing","Search","CopyToClipboard","_editor","p","pl","className","Editor","defaultLanguage","options","minimap","enabled","wordWrap","wrappingStrategy","scrollBeyondLastLine","formatOnPaste","fontSize","px","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","Center","Loader","Stack","justify","sx","Math","max"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"sourcesContent":["import {\n Box,\n Center,\n createStyles,\n DefaultProps,\n Group,\n Input,\n InputWrapperBaseProps,\n Loader,\n px,\n Selectors,\n Space,\n Stack,\n useComponentDefaultProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport Editor, {loader, Monaco} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect, useState, useRef} from 'react';\n\nimport {useParentHeight} from '../../hooks';\nimport {XML} from './languages/xml';\nimport {CopyToClipboard} from '../copyToClipboard';\nimport {Search} from './search';\n\nconst useStyles = createStyles((theme) => ({\n root: {},\n editor: {\n border: `1px solid ${theme.colors.gray[2]}`,\n borderRadius: theme.defaultRadius,\n backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n height: '100%',\n },\n}));\n\ninterface CodeEditorProps\n extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n DefaultProps<Selectors<typeof useStyles>> {\n /**\n * The language syntax of the editor\n *\n * @default 'plaintext'\n */\n language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml';\n /** Default value for uncontrolled input */\n defaultValue?: string;\n /** Value for controlled input */\n value?: string;\n /** onChange value for controlled input */\n onChange?(value: string): void;\n /** Called whenever the code editor gets the focus */\n onFocus?(): void;\n /**\n * The minimal height of the CodeEditor (label and description included)\n *\n * By default the CodeEditor is adjusted to fill its parent height.\n * In the case where the parent height is too short, it will use this value as minimum.\n *\n * @default 300\n */\n minHeight?: number;\n /**\n * The maximal height of the CodeEditor (label and description included)\n *\n * By default the CodeEditor is adjusted to fill its parent height.\n * In the case where the parent height would be too high for your liking, you can use this prop to set a maximum.\n */\n maxHeight?: number;\n disabled?: boolean;\n /**\n * Defines how the monaco editor files will be loaded.\n * Note that using `'local'` requires [some additional configuration](https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package).\n *\n * @default 'local'\n */\n monacoLoader?: 'cdn' | 'local';\n}\n\nconst defaultProps: Partial<CodeEditorProps> = {\n language: 'plaintext',\n monacoLoader: 'local',\n defaultValue: '',\n minHeight: 300,\n};\n\nexport const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {\n const {\n language,\n defaultValue,\n onChange,\n onFocus,\n value,\n label,\n required,\n labelProps,\n error,\n errorProps,\n description,\n descriptionProps,\n minHeight,\n maxHeight,\n disabled,\n monacoLoader,\n ...others\n } = useComponentDefaultProps('CodeEditor', defaultProps, props);\n const [loaded, setLoaded] = useState(false);\n const {classes, theme} = useStyles();\n const [_value, handleChange] = useUncontrolled<string>({\n value,\n defaultValue,\n onChange,\n finalValue: '',\n });\n const [parentHeight, ref] = useParentHeight();\n const editorRef = useRef(null);\n\n const loadLocalMonaco = async () => {\n const monacoInstance = await import('monaco-editor');\n loader.config({monaco: monacoInstance});\n setLoaded(true);\n };\n\n const registerLanguages = (monaco: Monaco) => {\n if (monaco && language === 'xml') {\n XML.register(monaco);\n }\n };\n\n const handleSearch = () => {\n if (editorRef.current) {\n editorRef.current.focus();\n editorRef.current.trigger('editor', 'actions.find', '');\n }\n };\n\n useEffect(() => {\n if (monacoLoader === 'local') {\n loadLocalMonaco();\n } else {\n setLoaded(true);\n }\n }, []);\n\n const _label = label ? (\n <Input.Label required={required} {...labelProps}>\n {label}\n </Input.Label>\n ) : null;\n\n const _description = description ? (\n <Input.Description {...descriptionProps}>{description}</Input.Description>\n ) : null;\n\n const _error = error ? (\n <Input.Error mt=\"xs\" {...errorProps}>\n {error}\n </Input.Error>\n ) : (\n <Space h=\"xs\" />\n );\n\n const _header =\n _label || _description ? (\n <Box>\n {_label}\n {_description}\n </Box>\n ) : null;\n\n const _buttons = (\n <Group position=\"right\" spacing={0}>\n <Search handleSearch={handleSearch} />\n <CopyToClipboard value={_value} />\n </Group>\n );\n\n const _editor = loaded ? (\n <Box p=\"md\" pl=\"xs\" className={classes.editor}>\n <Editor\n defaultLanguage={language}\n theme={theme.colorScheme === 'light' ? 'light' : 'vs-dark'}\n options={{\n minimap: {enabled: false},\n wordWrap: 'on',\n wrappingStrategy: 'advanced',\n scrollBeyondLastLine: false,\n formatOnPaste: true,\n fontSize: px(theme.fontSizes.xs),\n readOnly: disabled,\n tabSize: 2,\n }}\n value={_value}\n onChange={handleChange}\n onMount={(editor, monaco) => {\n editorRef.current = editor;\n registerLanguages(monaco);\n editor.onDidFocusEditorText(() => onFocus?.());\n editor.onDidBlurEditorText(async () => {\n await editor.getAction('editor.action.formatDocument').run();\n });\n }}\n />\n </Box>\n ) : (\n <Center className={classes.editor}>\n <Loader />\n </Center>\n );\n\n return (\n <Stack\n justify=\"flex-start\"\n className={classes.root}\n spacing={0}\n sx={{height: Math.max(parentHeight, minHeight), maxHeight}}\n ref={ref}\n {...others}\n >\n {_header}\n {_buttons}\n {_editor}\n {_error}\n </Stack>\n );\n};\n"],"names":["CodeEditor","useStyles","createStyles","theme","root","editor","border","colors","gray","borderRadius","defaultRadius","backgroundColor","colorScheme","white","black","height","defaultProps","language","monacoLoader","defaultValue","minHeight","props","useComponentDefaultProps","onChange","onFocus","value","label","required","labelProps","error","errorProps","description","descriptionProps","maxHeight","disabled","others","useState","loaded","setLoaded","classes","useUncontrolled","finalValue","_value","handleChange","useParentHeight","parentHeight","ref","editorRef","useRef","loadLocalMonaco","monacoInstance","loader","config","monaco","registerLanguages","XML","register","handleSearch","current","focus","trigger","useEffect","_label","Input","Label","_description","Description","_error","Error","mt","Space","h","_header","Box","_buttons","Group","position","spacing","Search","CopyToClipboard","_editor","p","pl","className","Editor","defaultLanguage","options","minimap","enabled","wordWrap","wrappingStrategy","scrollBeyondLastLine","formatOnPaste","fontSize","px","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","Center","Loader","Stack","justify","sx","Math","max"],"mappings":"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"}
|
|
@@ -35,7 +35,7 @@ var defaultProps = {
|
|
|
35
35
|
}
|
|
36
36
|
};
|
|
37
37
|
var Collection = function(props) {
|
|
38
|
-
var
|
|
38
|
+
var _allowAdd;
|
|
39
39
|
var _useComponentDefaultProps = (0, _core1.useComponentDefaultProps)("Collection", defaultProps, props), value = _useComponentDefaultProps.value, onChange = _useComponentDefaultProps.onChange, onRemoveItem = _useComponentDefaultProps.onRemoveItem, onReorderItem = _useComponentDefaultProps.onReorderItem, onInsertItem = _useComponentDefaultProps.onInsertItem, disabled = _useComponentDefaultProps.disabled, draggable = _useComponentDefaultProps.draggable, children = _useComponentDefaultProps.children, spacing = _useComponentDefaultProps.spacing, required = _useComponentDefaultProps.required, newItem = _useComponentDefaultProps.newItem, addLabel = _useComponentDefaultProps.addLabel, addDisabledTooltip = _useComponentDefaultProps.addDisabledTooltip, allowAdd = _useComponentDefaultProps.allowAdd, label = _useComponentDefaultProps.label, labelProps = _useComponentDefaultProps.labelProps, withAsterisk = _useComponentDefaultProps.withAsterisk, description = _useComponentDefaultProps.description, descriptionProps = _useComponentDefaultProps.descriptionProps, error = _useComponentDefaultProps.error, errorProps = _useComponentDefaultProps.errorProps, getItemId = _useComponentDefaultProps.getItemId, // Style props
|
|
40
40
|
classNames = _useComponentDefaultProps.classNames, className = _useComponentDefaultProps.className, styles = _useComponentDefaultProps.styles, unstyled = _useComponentDefaultProps.unstyled, others = _object_without_properties._(_useComponentDefaultProps, [
|
|
41
41
|
"value",
|
|
@@ -101,10 +101,11 @@ var Collection = function(props) {
|
|
|
101
101
|
_description
|
|
102
102
|
]
|
|
103
103
|
}) : null;
|
|
104
|
-
var
|
|
104
|
+
var _getItemId;
|
|
105
105
|
var standardizedItems = value.map(function(item, index) {
|
|
106
|
+
var _getItemId1;
|
|
106
107
|
return {
|
|
107
|
-
id: (
|
|
108
|
+
id: (_getItemId = (_getItemId1 = getItemId) === null || _getItemId1 === void 0 ? void 0 : _getItemId1(item)) !== null && _getItemId !== void 0 ? _getItemId : String(index),
|
|
108
109
|
data: item
|
|
109
110
|
};
|
|
110
111
|
});
|
|
@@ -136,6 +137,7 @@ var Collection = function(props) {
|
|
|
136
137
|
height: 16
|
|
137
138
|
}),
|
|
138
139
|
onClick: function() {
|
|
140
|
+
var _value;
|
|
139
141
|
return onInsertItem(newItem, (_value_length = (_value = value) === null || _value === void 0 ? void 0 : _value.length) !== null && _value_length !== void 0 ? _value_length : 0);
|
|
140
142
|
},
|
|
141
143
|
disabled: !addAllowed,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {DndContext, DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors} from '@dnd-kit/core';\nimport {restrictToParentElement, restrictToVerticalAxis} from '@dnd-kit/modifiers';\nimport {SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy} from '@dnd-kit/sortable';\nimport {\n Box,\n DefaultProps,\n Group,\n Input,\n InputWrapperBaseProps,\n MantineNumberSize,\n Selectors,\n Stack,\n Tooltip,\n useComponentDefaultProps,\n} from '@mantine/core';\nimport {ReorderPayload} from '@mantine/form/lib/types';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {ReactNode} from 'react';\n\nimport {Button} from '../button';\nimport useStyles from './Collection.styles';\nimport {CollectionItem} from './CollectionItem';\n\ninterface CollectionProps<T>\n extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n DefaultProps<Selectors<typeof useStyles>> {\n /**\n * The default value each new item should have\n */\n newItem: T;\n /**\n * A render function called for each item passed in the `value` prop.\n *\n * @param item The current item's value\n * @param index The current item's index\n */\n children: (item: T, index: number) => ReactNode;\n /**\n * The list of items to display inside the collection\n *\n * @default []\n */\n value?: T[];\n /**\n * Defines how each item is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n *\n * This method is required when using this component with ReactHookForm.\n *\n * @see {@link https://react-hook-form.com/api/usefieldarray/} for using a collection with ReactHookForm.\n *\n * @param originalItem The original item\n */\n getItemId?: (originalItem: T) => string;\n /**\n * Unused, has no effect\n */\n onFocus?: () => void;\n /**\n * Function called whenever the value needs to be updated\n *\n * @param value The whole list of items after the change\n */\n onChange?: (value: T[]) => void;\n /**\n * Function called after an item is removed from the collection using the remove button\n *\n * @param itemIndex The index of the item that was removed\n */\n onRemoveItem?: (itemIndex: number) => void;\n /**\n * Function that gets called whenever a collection item needs to be reordered\n *\n * @param payload The origin and destination index of the item to reorder\n */\n onReorderItem?: (payload: ReorderPayload) => void;\n /**\n * Function that gets called when a new item needs to be added to the collection\n *\n * @param value The the value of the item to insert\n * @param index The index of the new item to insert\n */\n onInsertItem?: (value: T, index: number) => void;\n /**\n * Whether the collection should have drag and drop behavior enabled\n *\n * @default false\n */\n draggable?: boolean;\n /**\n * Whether the collection is disabled, or in other words in read only mode\n *\n * @default false\n */\n disabled?: boolean;\n /**\n * Function that determines if the add item button should be enabled given the current items of the collection.\n * The button is always enabled if this props remains undefined\n *\n * @param values The current items of the collection\n */\n allowAdd?: (values: T[]) => boolean;\n /**\n * The label of the add item button\n *\n * @default \"Add item\"\n */\n addLabel?: string;\n /**\n * The tooltip text displayed when hovering over the disabled add item button\n *\n * @default 'There is already an empty item'\n */\n addDisabledTooltip?: string;\n /**\n * The spacing between the colleciton items\n *\n * @default 'xs'\n */\n spacing?: MantineNumberSize;\n /**\n * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item\n *\n * @default false\n */\n required?: boolean;\n}\n\nconst defaultProps: Partial<CollectionProps<unknown>> = {\n draggable: false,\n addLabel: 'Add item',\n addDisabledTooltip: 'There is already an empty item',\n disabled: false,\n spacing: 'xs',\n required: false,\n getItemId: ({id}: any) => id,\n};\n\nexport const Collection = <T,>(props: CollectionProps<T>) => {\n const {\n value,\n onChange,\n onRemoveItem,\n onReorderItem,\n onInsertItem,\n disabled,\n draggable,\n children,\n spacing,\n required,\n newItem,\n addLabel,\n addDisabledTooltip,\n allowAdd,\n label,\n labelProps,\n withAsterisk,\n description,\n descriptionProps,\n error,\n errorProps,\n getItemId,\n\n // Style props\n classNames,\n className,\n styles,\n unstyled,\n\n ...others\n } = useComponentDefaultProps('Collection', defaultProps as CollectionProps<T>, props);\n const {classes, cx} = useStyles(null, {classNames, name: 'Collection', styles, unstyled});\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates,\n })\n );\n\n const hasOnlyOneItem = value.length === 1;\n\n /**\n * Enforcing onChange when the value is modified will make sure the errors are carried through.\n */\n useDidUpdate(() => {\n onChange?.(value);\n }, [JSON.stringify(value)]);\n\n const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n const _label = label ? (\n <Input.Label required={isRequired} {...labelProps}>\n {label}\n </Input.Label>\n ) : null;\n\n const _description = description ? (\n <Input.Description {...descriptionProps}>{description}</Input.Description>\n ) : null;\n const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;\n const _header =\n _label || _description ? (\n <>\n {_label}\n {_description}\n </>\n ) : null;\n\n const standardizedItems = value.map((item, index) => ({id: getItemId?.(item) ?? String(index), data: item}));\n\n const items = standardizedItems.map((item, index) => (\n <CollectionItem\n key={item.id}\n id={item.id}\n disabled={disabled}\n draggable={draggable}\n onRemove={() => onRemoveItem?.(index)}\n styles={styles}\n removable={!(required && hasOnlyOneItem)}\n >\n {children(item.data, index)}\n </CollectionItem>\n ));\n\n const addAllowed = allowAdd?.(value) ?? true;\n\n const _addButton = disabled ? null : (\n <Group>\n <Tooltip label={addDisabledTooltip} disabled={addAllowed}>\n <Box>\n <Button\n variant=\"subtle\"\n leftIcon={<AddSize16Px height={16} />}\n onClick={() => onInsertItem(newItem, value?.length ?? 0)}\n disabled={!addAllowed}\n >\n {addLabel}\n </Button>\n </Box>\n </Tooltip>\n </Group>\n );\n\n const getIndex = (id: string) => standardizedItems.findIndex((item) => item.id === id);\n\n const handleDragEnd = ({over, active}: DragEndEvent): void => {\n if (over) {\n const activeIndex = getIndex(String(active.id));\n const overIndex = getIndex(String(over.id));\n if (activeIndex !== overIndex) {\n onReorderItem?.({from: activeIndex, to: overIndex});\n }\n }\n };\n\n return (\n <DndContext\n onDragEnd={handleDragEnd}\n sensors={sensors}\n modifiers={[restrictToVerticalAxis, restrictToParentElement]}\n >\n <SortableContext items={standardizedItems} strategy={verticalListSortingStrategy}>\n <Box className={cx(classes.root, className)} {...others}>\n {_header}\n <Stack spacing={spacing}>\n {items}\n {_addButton}\n {_error}\n </Stack>\n </Box>\n </SortableContext>\n </DndContext>\n );\n};\n"],"names":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","getItemId","id","props","allowAdd","value","useComponentDefaultProps","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","classNames","className","styles","unstyled","others","useStyles","name","classes","cx","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","hasOnlyOneItem","length","useDidUpdate","JSON","stringify","isRequired","_label","Input","Label","_description","Description","_error","Error","_header","standardizedItems","map","item","index","String","data","items","CollectionItem","onRemove","removable","addAllowed","_addButton","Group","Tooltip","Box","Button","variant","leftIcon","AddSize16Px","height","onClick","getIndex","findIndex","handleDragEnd","over","active","activeIndex","overIndex","from","to","DndContext","onDragEnd","modifiers","restrictToVerticalAxis","restrictToParentElement","SortableContext","strategy","verticalListSortingStrategy","root","Stack"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {DndContext, DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors} from '@dnd-kit/core';\nimport {restrictToParentElement, restrictToVerticalAxis} from '@dnd-kit/modifiers';\nimport {SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy} from '@dnd-kit/sortable';\nimport {\n Box,\n DefaultProps,\n Group,\n Input,\n InputWrapperBaseProps,\n MantineNumberSize,\n Selectors,\n Stack,\n Tooltip,\n useComponentDefaultProps,\n} from '@mantine/core';\nimport {ReorderPayload} from '@mantine/form/lib/types';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {ReactNode} from 'react';\n\nimport {Button} from '../button';\nimport useStyles from './Collection.styles';\nimport {CollectionItem} from './CollectionItem';\n\ninterface CollectionProps<T>\n extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n DefaultProps<Selectors<typeof useStyles>> {\n /**\n * The default value each new item should have\n */\n newItem: T;\n /**\n * A render function called for each item passed in the `value` prop.\n *\n * @param item The current item's value\n * @param index The current item's index\n */\n children: (item: T, index: number) => ReactNode;\n /**\n * The list of items to display inside the collection\n *\n * @default []\n */\n value?: T[];\n /**\n * Defines how each item is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n *\n * This method is required when using this component with ReactHookForm.\n *\n * @see {@link https://react-hook-form.com/api/usefieldarray/} for using a collection with ReactHookForm.\n *\n * @param originalItem The original item\n */\n getItemId?: (originalItem: T) => string;\n /**\n * Unused, has no effect\n */\n onFocus?: () => void;\n /**\n * Function called whenever the value needs to be updated\n *\n * @param value The whole list of items after the change\n */\n onChange?: (value: T[]) => void;\n /**\n * Function called after an item is removed from the collection using the remove button\n *\n * @param itemIndex The index of the item that was removed\n */\n onRemoveItem?: (itemIndex: number) => void;\n /**\n * Function that gets called whenever a collection item needs to be reordered\n *\n * @param payload The origin and destination index of the item to reorder\n */\n onReorderItem?: (payload: ReorderPayload) => void;\n /**\n * Function that gets called when a new item needs to be added to the collection\n *\n * @param value The the value of the item to insert\n * @param index The index of the new item to insert\n */\n onInsertItem?: (value: T, index: number) => void;\n /**\n * Whether the collection should have drag and drop behavior enabled\n *\n * @default false\n */\n draggable?: boolean;\n /**\n * Whether the collection is disabled, or in other words in read only mode\n *\n * @default false\n */\n disabled?: boolean;\n /**\n * Function that determines if the add item button should be enabled given the current items of the collection.\n * The button is always enabled if this props remains undefined\n *\n * @param values The current items of the collection\n */\n allowAdd?: (values: T[]) => boolean;\n /**\n * The label of the add item button\n *\n * @default \"Add item\"\n */\n addLabel?: string;\n /**\n * The tooltip text displayed when hovering over the disabled add item button\n *\n * @default 'There is already an empty item'\n */\n addDisabledTooltip?: string;\n /**\n * The spacing between the colleciton items\n *\n * @default 'xs'\n */\n spacing?: MantineNumberSize;\n /**\n * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item\n *\n * @default false\n */\n required?: boolean;\n}\n\nconst defaultProps: Partial<CollectionProps<unknown>> = {\n draggable: false,\n addLabel: 'Add item',\n addDisabledTooltip: 'There is already an empty item',\n disabled: false,\n spacing: 'xs',\n required: false,\n getItemId: ({id}: any) => id,\n};\n\nexport const Collection = <T,>(props: CollectionProps<T>) => {\n const {\n value,\n onChange,\n onRemoveItem,\n onReorderItem,\n onInsertItem,\n disabled,\n draggable,\n children,\n spacing,\n required,\n newItem,\n addLabel,\n addDisabledTooltip,\n allowAdd,\n label,\n labelProps,\n withAsterisk,\n description,\n descriptionProps,\n error,\n errorProps,\n getItemId,\n\n // Style props\n classNames,\n className,\n styles,\n unstyled,\n\n ...others\n } = useComponentDefaultProps('Collection', defaultProps as CollectionProps<T>, props);\n const {classes, cx} = useStyles(null, {classNames, name: 'Collection', styles, unstyled});\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates,\n })\n );\n\n const hasOnlyOneItem = value.length === 1;\n\n /**\n * Enforcing onChange when the value is modified will make sure the errors are carried through.\n */\n useDidUpdate(() => {\n onChange?.(value);\n }, [JSON.stringify(value)]);\n\n const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n const _label = label ? (\n <Input.Label required={isRequired} {...labelProps}>\n {label}\n </Input.Label>\n ) : null;\n\n const _description = description ? (\n <Input.Description {...descriptionProps}>{description}</Input.Description>\n ) : null;\n const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;\n const _header =\n _label || _description ? (\n <>\n {_label}\n {_description}\n </>\n ) : null;\n\n const standardizedItems = value.map((item, index) => ({id: getItemId?.(item) ?? String(index), data: item}));\n\n const items = standardizedItems.map((item, index) => (\n <CollectionItem\n key={item.id}\n id={item.id}\n disabled={disabled}\n draggable={draggable}\n onRemove={() => onRemoveItem?.(index)}\n styles={styles}\n removable={!(required && hasOnlyOneItem)}\n >\n {children(item.data, index)}\n </CollectionItem>\n ));\n\n const addAllowed = allowAdd?.(value) ?? true;\n\n const _addButton = disabled ? null : (\n <Group>\n <Tooltip label={addDisabledTooltip} disabled={addAllowed}>\n <Box>\n <Button\n variant=\"subtle\"\n leftIcon={<AddSize16Px height={16} />}\n onClick={() => onInsertItem(newItem, value?.length ?? 0)}\n disabled={!addAllowed}\n >\n {addLabel}\n </Button>\n </Box>\n </Tooltip>\n </Group>\n );\n\n const getIndex = (id: string) => standardizedItems.findIndex((item) => item.id === id);\n\n const handleDragEnd = ({over, active}: DragEndEvent): void => {\n if (over) {\n const activeIndex = getIndex(String(active.id));\n const overIndex = getIndex(String(over.id));\n if (activeIndex !== overIndex) {\n onReorderItem?.({from: activeIndex, to: overIndex});\n }\n }\n };\n\n return (\n <DndContext\n onDragEnd={handleDragEnd}\n sensors={sensors}\n modifiers={[restrictToVerticalAxis, restrictToParentElement]}\n >\n <SortableContext items={standardizedItems} strategy={verticalListSortingStrategy}>\n <Box className={cx(classes.root, className)} {...others}>\n {_header}\n <Stack spacing={spacing}>\n {items}\n {_addButton}\n {_error}\n </Stack>\n </Box>\n </SortableContext>\n </DndContext>\n );\n};\n"],"names":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","getItemId","id","props","allowAdd","useComponentDefaultProps","value","onChange","onRemoveItem","onReorderItem","onInsertItem","children","newItem","label","labelProps","withAsterisk","description","descriptionProps","error","errorProps","classNames","className","styles","unstyled","others","useStyles","name","classes","cx","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","hasOnlyOneItem","length","useDidUpdate","JSON","stringify","isRequired","_label","Input","Label","_description","Description","_error","Error","_header","standardizedItems","map","item","index","String","data","items","CollectionItem","onRemove","removable","addAllowed","_addButton","Group","Tooltip","Box","Button","variant","leftIcon","AddSize16Px","height","onClick","getIndex","findIndex","handleDragEnd","over","active","activeIndex","overIndex","from","to","DndContext","onDragEnd","modifiers","restrictToVerticalAxis","restrictToParentElement","SortableContext","strategy","verticalListSortingStrategy","root","Stack"],"mappings":"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"}
|
|
@@ -17,14 +17,14 @@ var EditableDateRangePicker = function(param) {
|
|
|
17
17
|
var value = param.value, onChange = param.onChange, onFocus = param.onFocus, _param_separator = param.separator, separator = _param_separator === void 0 ? "to" : _param_separator, _param_startProps = param.startProps, startProps = _param_startProps === void 0 ? {} : _param_startProps, _param_endProps = param.endProps, endProps = _param_endProps === void 0 ? {} : _param_endProps;
|
|
18
18
|
var _value, _value1;
|
|
19
19
|
var onChangeStart = function(date) {
|
|
20
|
-
var
|
|
20
|
+
var _value, _onChange;
|
|
21
21
|
(_onChange = onChange) === null || _onChange === void 0 ? void 0 : _onChange([
|
|
22
22
|
(0, _dayjs.default)(date).startOf("day").toDate(),
|
|
23
23
|
(_value = value) === null || _value === void 0 ? void 0 : _value[1]
|
|
24
24
|
]);
|
|
25
25
|
};
|
|
26
26
|
var onChangeEnd = function(date) {
|
|
27
|
-
var
|
|
27
|
+
var _value, _onChange;
|
|
28
28
|
(_onChange = onChange) === null || _onChange === void 0 ? void 0 : _onChange([
|
|
29
29
|
(_value = value) === null || _value === void 0 ? void 0 : _value[0],
|
|
30
30
|
(0, _dayjs.default)(date).endOf("day").toDate()
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/date-range-picker/EditableDateRangePicker.tsx"],"sourcesContent":["import {DateInput, DatePickerProps} from '@mantine/dates';\nimport dayjs from 'dayjs';\nimport {ReactNode} from 'react';\nimport {DateRangePickerValue} from './DateRangePickerInlineCalendar';\n\nexport interface EditableDateRangePickerProps {\n value: DateRangePickerValue;\n onChange?(value: DateRangePickerValue): void;\n onFocus?: () => void;\n separator?: ReactNode;\n /**\n * Props for the start input\n */\n startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n /**\n * Props for the end input\n */\n endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n}\n\nexport const EditableDateRangePicker = ({\n value,\n onChange,\n onFocus,\n separator = 'to',\n startProps = {},\n endProps = {},\n}: EditableDateRangePickerProps) => {\n const onChangeStart = (date: Date) => {\n onChange?.([dayjs(date).startOf('day').toDate(), value?.[1]]);\n };\n const onChangeEnd = (date: Date) => {\n onChange?.([value?.[0], dayjs(date).endOf('day').toDate()]);\n };\n\n return (\n <>\n <DateInput\n clearable={false}\n label=\"Start\"\n value={value?.[0]}\n onChange={onChangeStart}\n onFocus={onFocus}\n popoverProps={{styles: {dropdown: {display: 'none'}}}}\n styles={{...startProps.styles}}\n />\n {separator}\n <DateInput\n clearable={false}\n label=\"End\"\n value={value?.[1]}\n onChange={onChangeEnd}\n onFocus={onFocus}\n popoverProps={{styles: {dropdown: {display: 'none'}}}}\n styles={{...endProps.styles}}\n />\n </>\n );\n};\n"],"names":["EditableDateRangePicker","value","onChange","onFocus","separator","startProps","endProps","onChangeStart","date","dayjs","startOf","toDate","onChangeEnd","endOf","DateInput","clearable","label","popoverProps","styles","dropdown","display"],"mappings":";;;;+BAoBaA;;;eAAAA;;;;;;qBApB4B;8DACvB;AAmBX,IAAMA,0BAA0B;QACnCC,cAAAA,OACAC,iBAAAA,UACAC,gBAAAA,kCACAC,WAAAA,0CAAY,mDACZC,YAAAA,4CAAa,CAAC,+CACdC,UAAAA,wCAAW,CAAC;QAcOL,QAUAA;IAtBnB,IAAMM,gBAAgB,SAACC;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/date-range-picker/EditableDateRangePicker.tsx"],"sourcesContent":["import {DateInput, DatePickerProps} from '@mantine/dates';\nimport dayjs from 'dayjs';\nimport {ReactNode} from 'react';\nimport {DateRangePickerValue} from './DateRangePickerInlineCalendar';\n\nexport interface EditableDateRangePickerProps {\n value: DateRangePickerValue;\n onChange?(value: DateRangePickerValue): void;\n onFocus?: () => void;\n separator?: ReactNode;\n /**\n * Props for the start input\n */\n startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n /**\n * Props for the end input\n */\n endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n}\n\nexport const EditableDateRangePicker = ({\n value,\n onChange,\n onFocus,\n separator = 'to',\n startProps = {},\n endProps = {},\n}: EditableDateRangePickerProps) => {\n const onChangeStart = (date: Date) => {\n onChange?.([dayjs(date).startOf('day').toDate(), value?.[1]]);\n };\n const onChangeEnd = (date: Date) => {\n onChange?.([value?.[0], dayjs(date).endOf('day').toDate()]);\n };\n\n return (\n <>\n <DateInput\n clearable={false}\n label=\"Start\"\n value={value?.[0]}\n onChange={onChangeStart}\n onFocus={onFocus}\n popoverProps={{styles: {dropdown: {display: 'none'}}}}\n styles={{...startProps.styles}}\n />\n {separator}\n <DateInput\n clearable={false}\n label=\"End\"\n value={value?.[1]}\n onChange={onChangeEnd}\n onFocus={onFocus}\n popoverProps={{styles: {dropdown: {display: 'none'}}}}\n styles={{...endProps.styles}}\n />\n </>\n );\n};\n"],"names":["EditableDateRangePicker","value","onChange","onFocus","separator","startProps","endProps","onChangeStart","date","dayjs","startOf","toDate","onChangeEnd","endOf","DateInput","clearable","label","popoverProps","styles","dropdown","display"],"mappings":";;;;+BAoBaA;;;eAAAA;;;;;;qBApB4B;8DACvB;AAmBX,IAAMA,0BAA0B;QACnCC,cAAAA,OACAC,iBAAAA,UACAC,gBAAAA,kCACAC,WAAAA,0CAAY,mDACZC,YAAAA,4CAAa,CAAC,+CACdC,UAAAA,wCAAW,CAAC;QAcOL,QAUAA;IAtBnB,IAAMM,gBAAgB,SAACC;YAC8BP,QAAjDC;SAAAA,YAAAA,sBAAAA,gCAAAA,UAAW;YAACO,IAAAA,cAAK,EAACD,MAAME,OAAO,CAAC,OAAOC,MAAM;aAAIV,SAAAA,mBAAAA,6BAAAA,MAAO,CAAC,EAAE;SAAC;IAChE;IACA,IAAMW,cAAc,SAACJ;YACLP,QAAZC;SAAAA,YAAAA,sBAAAA,gCAAAA,UAAW;aAACD,SAAAA,mBAAAA,6BAAAA,MAAO,CAAC,EAAE;YAAEQ,IAAAA,cAAK,EAACD,MAAMK,KAAK,CAAC,OAAOF,MAAM;SAAG;IAC9D;IAEA,qBACI;;0BACI,qBAACG,gBAAS;gBACNC,WAAW;gBACXC,OAAM;gBACNf,KAAK,GAAEA,SAAAA,mBAAAA,6BAAAA,MAAO,CAAC,EAAE;gBACjBC,UAAUK;gBACVJ,SAASA;gBACTc,cAAc;oBAACC,QAAQ;wBAACC,UAAU;4BAACC,SAAS;wBAAM;oBAAC;gBAAC;gBACpDF,QAAQ,qBAAIb,WAAWa,MAAM;;YAEhCd;0BACD,qBAACU,gBAAS;gBACNC,WAAW;gBACXC,OAAM;gBACNf,KAAK,GAAEA,UAAAA,mBAAAA,8BAAAA,OAAO,CAAC,EAAE;gBACjBC,UAAUU;gBACVT,SAASA;gBACTc,cAAc;oBAACC,QAAQ;wBAACC,UAAU;4BAACC,SAAS;wBAAM;oBAAC;gBAAC;gBACpDF,QAAQ,qBAAIZ,SAASY,MAAM;;;;AAI3C"}
|
|
@@ -51,7 +51,7 @@ var ModalWizard = function(_param) {
|
|
|
51
51
|
"children",
|
|
52
52
|
"isStepValidatedOnNext"
|
|
53
53
|
]);
|
|
54
|
-
var _currentStep_props_validateStep,
|
|
54
|
+
var _currentStep_props_validateStep, _currentStep_props, _currentStep, _classNames, _classNames1;
|
|
55
55
|
var _useStyles = useStyles(null, {
|
|
56
56
|
name: "ModalWizard",
|
|
57
57
|
classNames: classNames,
|
|
@@ -71,7 +71,7 @@ var ModalWizard = function(_param) {
|
|
|
71
71
|
var _currentStep_props_validateStep1;
|
|
72
72
|
var isValid = (isStepValidatedOnNext ? {
|
|
73
73
|
isValid: true
|
|
74
|
-
} : (_currentStep_props_validateStep1 = (
|
|
74
|
+
} : (_currentStep_props_validateStep1 = (_currentStep = currentStep) === null || _currentStep === void 0 ? void 0 : (_currentStep_props = _currentStep.props) === null || _currentStep_props === void 0 ? void 0 : (_currentStep_props_validateStep = _currentStep_props.validateStep) === null || _currentStep_props_validateStep === void 0 ? void 0 : _currentStep_props_validateStep.call(_currentStep_props, currentStepIndex, numberOfSteps)) !== null && _currentStep_props_validateStep1 !== void 0 ? _currentStep_props_validateStep1 : {
|
|
75
75
|
isValid: true
|
|
76
76
|
}).isValid;
|
|
77
77
|
(0, _react.useEffect)(function() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/modal-wizard/ModalWizard.tsx"],"sourcesContent":["import {Box, CloseButton, createStyles, DefaultProps, Modal, ModalProps, Progress, Selectors} from '@mantine/core';\nimport {Children, ReactElement, useEffect, useMemo, useState} from 'react';\n\nimport {Button} from '../button';\nimport {Header} from '../header';\nimport {StickyFooter} from '../sticky-footer';\nimport {ModalWizardStep, ModalWizardStepProps, ResolveStep} from './ModalWizardStep';\n\nconst useStyles = createStyles(() => ({\n content: {\n display: 'flex',\n flexDirection: 'column',\n },\n body: {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n },\n}));\n\ntype ModalWizardStylesNames = Selectors<typeof useStyles>;\n\nexport interface ModalWizardProps\n extends Omit<DefaultProps<ModalWizardStylesNames>, 'classNames' | 'styles'>,\n Omit<ModalProps, 'centered' | 'title'> {\n /**\n * The label of the cancel button\n *\n * @default \"Cancel\"\n */\n cancelButtonLabel?: string;\n\n /**\n * The label of the next button\n *\n * @default \"Next\"\n */\n nextButtonLabel?: string;\n\n /**\n * The label of the previous button\n *\n * @default \"Previous\"\n */\n previousButtonLabel?: string;\n\n /**\n * The label of the finish button\n *\n * @default \"Finish\"\n */\n finishButtonLabel?: string;\n\n /**\n * A callback function that is executed when the user clicks on the next button\n */\n onNext?: (newStep: number, setCurrentStep?: React.Dispatch<number>) => unknown;\n\n /**\n * A callback function that is executed when the user clicks on the previous button\n */\n onPrevious?: (newStep: number) => unknown;\n\n /**\n * A function that is executed when user completes all the steps.\n *\n * @param close A function that closes the modal when called.\n */\n onFinish?: () => unknown;\n\n /**\n * Determine if user interacted with any steps in the modal wizard\n */\n isDirty?: () => boolean;\n\n /**\n * A function to confirm close if the state is dirty before closing\n */\n handleDirtyState?: () => boolean;\n\n /**\n * Children to display in modal wizard\n * */\n children?: Array<ReturnType<typeof ModalWizardStep>>;\n\n /**\n * Indicates if step validation should be performed when clicking on to the next step\n * If true, the next step will always be enabled\n *\n * @default false\n */\n isStepValidatedOnNext?: boolean;\n}\n\ninterface ModalWizardType {\n (props: ModalWizardProps): ReactElement;\n\n Step: typeof ModalWizardStep;\n}\n\nexport const ModalWizard: ModalWizardType = ({\n cancelButtonLabel = 'Cancel',\n nextButtonLabel = 'Next',\n previousButtonLabel = 'Previous',\n finishButtonLabel = 'Finish',\n opened,\n onNext,\n onPrevious,\n onClose,\n onFinish,\n isDirty,\n handleDirtyState,\n classNames,\n styles,\n unstyled,\n children,\n isStepValidatedOnNext,\n ...modalProps\n}) => {\n const {\n classes: {content, body},\n cx,\n } = useStyles(null, {\n name: 'ModalWizard',\n classNames,\n styles,\n unstyled,\n });\n\n const [currentStepIndex, setCurrentStepIndex] = useState(0);\n const modalSteps = (Children.toArray(children) as ReactElement[]).filter((child) => child.type === ModalWizardStep);\n\n const numberOfSteps = modalSteps.length;\n const isFirstStep = currentStepIndex === 0;\n const isLastStep = currentStepIndex === numberOfSteps - 1;\n const currentStep = modalSteps.filter((step: ReactElement, index: number) => index === currentStepIndex)[0];\n\n const {isValid} = isStepValidatedOnNext\n ? {isValid: true}\n : currentStep?.props?.validateStep?.(currentStepIndex, numberOfSteps) ?? {isValid: true};\n\n useEffect(() => {\n if (opened) {\n setCurrentStepIndex(0);\n }\n }, [opened]);\n\n const handleClose = (confirmDirty: boolean) => {\n if (confirmDirty) {\n const isModalDirty = isDirty?.() ?? false;\n if (isModalDirty) {\n const discardChanges = handleDirtyState?.() ?? true;\n if (!discardChanges) {\n return;\n }\n }\n }\n onClose?.();\n };\n\n const resolveStepDependentProp = <P extends keyof ModalWizardStepProps>(\n prop: P\n ): ResolveStep<ModalWizardStepProps[P]> =>\n typeof currentStep.props[prop] === 'function'\n ? currentStep.props[prop](currentStepIndex + 1, numberOfSteps)\n : currentStep.props[prop];\n\n const getProgress = useMemo(\n () => (currStepIndex: number) => {\n const totalNumberOfSteps = modalSteps.filter((step) => step.props.countsAsProgress).length;\n const numberOfCompletedSteps = modalSteps.filter(\n (step, index) => step.props.countsAsProgress && index <= currStepIndex\n ).length;\n return (numberOfCompletedSteps / totalNumberOfSteps) * 100;\n },\n []\n );\n\n return (\n <Modal\n opened={opened}\n classNames={{content: cx(content, classNames?.content), body: cx(body, classNames?.body)}}\n centered\n onClose={() => handleClose(true)}\n withCloseButton={false}\n padding={0}\n {...modalProps}\n >\n <Header\n p=\"lg\"\n pr=\"md\"\n variant=\"modal\"\n description={resolveStepDependentProp('description')}\n borderBottom={!currentStep.props.showProgressBar}\n >\n {resolveStepDependentProp('title')}\n {resolveStepDependentProp('docLink') ? (\n <Header.DocAnchor\n href={resolveStepDependentProp('docLink')}\n label={resolveStepDependentProp('docLinkTooltipLabel')}\n />\n ) : null}\n <Header.Actions>\n <CloseButton aria-label={'close-modal'} onClick={() => handleClose(true)} />\n </Header.Actions>\n </Header>\n {currentStep.props.showProgressBar && (\n <Progress color=\"navy.5\" size=\"sm\" radius={0} value={getProgress(currentStepIndex)} />\n )}\n <Box p=\"lg\">{currentStep}</Box>\n <Box\n sx={{\n marginTop: 'auto',\n }}\n >\n <StickyFooter borderTop>\n <Button\n name={isFirstStep ? cancelButtonLabel : previousButtonLabel}\n variant=\"outline\"\n onClick={() => {\n if (isFirstStep) {\n handleClose(true);\n } else {\n onPrevious?.(currentStepIndex - 1);\n setCurrentStepIndex(currentStepIndex - 1);\n }\n }}\n >\n {isFirstStep ? cancelButtonLabel : previousButtonLabel}\n </Button>\n\n <Button\n disabled={!isValid}\n onClick={() => {\n if (isLastStep) {\n onFinish?.() ?? handleClose(false);\n } else {\n onNext?.(currentStepIndex + 1, setCurrentStepIndex);\n\n if (!isStepValidatedOnNext) {\n setCurrentStepIndex(currentStepIndex + 1);\n }\n }\n }}\n >\n {isLastStep ? finishButtonLabel : nextButtonLabel}\n </Button>\n </StickyFooter>\n </Box>\n </Modal>\n );\n};\n\nModalWizard.Step = ModalWizardStep;\n"],"names":["ModalWizard","useStyles","createStyles","content","display","flexDirection","body","flex","cancelButtonLabel","nextButtonLabel","previousButtonLabel","finishButtonLabel","opened","onNext","onPrevious","onClose","onFinish","isDirty","handleDirtyState","classNames","styles","unstyled","children","isStepValidatedOnNext","modalProps","currentStep","name","classes","cx","useState","currentStepIndex","setCurrentStepIndex","modalSteps","Children","toArray","filter","child","type","ModalWizardStep","numberOfSteps","length","isFirstStep","isLastStep","step","index","isValid","props","validateStep","useEffect","handleClose","confirmDirty","isModalDirty","discardChanges","resolveStepDependentProp","prop","getProgress","useMemo","currStepIndex","totalNumberOfSteps","countsAsProgress","numberOfCompletedSteps","Modal","centered","withCloseButton","padding","Header","p","pr","variant","description","borderBottom","showProgressBar","DocAnchor","href","label","Actions","CloseButton","aria-label","onClick","Progress","color","size","radius","value","Box","sx","marginTop","StickyFooter","borderTop","Button","disabled","Step"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/modal-wizard/ModalWizard.tsx"],"sourcesContent":["import {Box, CloseButton, createStyles, DefaultProps, Modal, ModalProps, Progress, Selectors} from '@mantine/core';\nimport {Children, ReactElement, useEffect, useMemo, useState} from 'react';\n\nimport {Button} from '../button';\nimport {Header} from '../header';\nimport {StickyFooter} from '../sticky-footer';\nimport {ModalWizardStep, ModalWizardStepProps, ResolveStep} from './ModalWizardStep';\n\nconst useStyles = createStyles(() => ({\n content: {\n display: 'flex',\n flexDirection: 'column',\n },\n body: {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n },\n}));\n\ntype ModalWizardStylesNames = Selectors<typeof useStyles>;\n\nexport interface ModalWizardProps\n extends Omit<DefaultProps<ModalWizardStylesNames>, 'classNames' | 'styles'>,\n Omit<ModalProps, 'centered' | 'title'> {\n /**\n * The label of the cancel button\n *\n * @default \"Cancel\"\n */\n cancelButtonLabel?: string;\n\n /**\n * The label of the next button\n *\n * @default \"Next\"\n */\n nextButtonLabel?: string;\n\n /**\n * The label of the previous button\n *\n * @default \"Previous\"\n */\n previousButtonLabel?: string;\n\n /**\n * The label of the finish button\n *\n * @default \"Finish\"\n */\n finishButtonLabel?: string;\n\n /**\n * A callback function that is executed when the user clicks on the next button\n */\n onNext?: (newStep: number, setCurrentStep?: React.Dispatch<number>) => unknown;\n\n /**\n * A callback function that is executed when the user clicks on the previous button\n */\n onPrevious?: (newStep: number) => unknown;\n\n /**\n * A function that is executed when user completes all the steps.\n *\n * @param close A function that closes the modal when called.\n */\n onFinish?: () => unknown;\n\n /**\n * Determine if user interacted with any steps in the modal wizard\n */\n isDirty?: () => boolean;\n\n /**\n * A function to confirm close if the state is dirty before closing\n */\n handleDirtyState?: () => boolean;\n\n /**\n * Children to display in modal wizard\n * */\n children?: Array<ReturnType<typeof ModalWizardStep>>;\n\n /**\n * Indicates if step validation should be performed when clicking on to the next step\n * If true, the next step will always be enabled\n *\n * @default false\n */\n isStepValidatedOnNext?: boolean;\n}\n\ninterface ModalWizardType {\n (props: ModalWizardProps): ReactElement;\n\n Step: typeof ModalWizardStep;\n}\n\nexport const ModalWizard: ModalWizardType = ({\n cancelButtonLabel = 'Cancel',\n nextButtonLabel = 'Next',\n previousButtonLabel = 'Previous',\n finishButtonLabel = 'Finish',\n opened,\n onNext,\n onPrevious,\n onClose,\n onFinish,\n isDirty,\n handleDirtyState,\n classNames,\n styles,\n unstyled,\n children,\n isStepValidatedOnNext,\n ...modalProps\n}) => {\n const {\n classes: {content, body},\n cx,\n } = useStyles(null, {\n name: 'ModalWizard',\n classNames,\n styles,\n unstyled,\n });\n\n const [currentStepIndex, setCurrentStepIndex] = useState(0);\n const modalSteps = (Children.toArray(children) as ReactElement[]).filter((child) => child.type === ModalWizardStep);\n\n const numberOfSteps = modalSteps.length;\n const isFirstStep = currentStepIndex === 0;\n const isLastStep = currentStepIndex === numberOfSteps - 1;\n const currentStep = modalSteps.filter((step: ReactElement, index: number) => index === currentStepIndex)[0];\n\n const {isValid} = isStepValidatedOnNext\n ? {isValid: true}\n : currentStep?.props?.validateStep?.(currentStepIndex, numberOfSteps) ?? {isValid: true};\n\n useEffect(() => {\n if (opened) {\n setCurrentStepIndex(0);\n }\n }, [opened]);\n\n const handleClose = (confirmDirty: boolean) => {\n if (confirmDirty) {\n const isModalDirty = isDirty?.() ?? false;\n if (isModalDirty) {\n const discardChanges = handleDirtyState?.() ?? true;\n if (!discardChanges) {\n return;\n }\n }\n }\n onClose?.();\n };\n\n const resolveStepDependentProp = <P extends keyof ModalWizardStepProps>(\n prop: P\n ): ResolveStep<ModalWizardStepProps[P]> =>\n typeof currentStep.props[prop] === 'function'\n ? currentStep.props[prop](currentStepIndex + 1, numberOfSteps)\n : currentStep.props[prop];\n\n const getProgress = useMemo(\n () => (currStepIndex: number) => {\n const totalNumberOfSteps = modalSteps.filter((step) => step.props.countsAsProgress).length;\n const numberOfCompletedSteps = modalSteps.filter(\n (step, index) => step.props.countsAsProgress && index <= currStepIndex\n ).length;\n return (numberOfCompletedSteps / totalNumberOfSteps) * 100;\n },\n []\n );\n\n return (\n <Modal\n opened={opened}\n classNames={{content: cx(content, classNames?.content), body: cx(body, classNames?.body)}}\n centered\n onClose={() => handleClose(true)}\n withCloseButton={false}\n padding={0}\n {...modalProps}\n >\n <Header\n p=\"lg\"\n pr=\"md\"\n variant=\"modal\"\n description={resolveStepDependentProp('description')}\n borderBottom={!currentStep.props.showProgressBar}\n >\n {resolveStepDependentProp('title')}\n {resolveStepDependentProp('docLink') ? (\n <Header.DocAnchor\n href={resolveStepDependentProp('docLink')}\n label={resolveStepDependentProp('docLinkTooltipLabel')}\n />\n ) : null}\n <Header.Actions>\n <CloseButton aria-label={'close-modal'} onClick={() => handleClose(true)} />\n </Header.Actions>\n </Header>\n {currentStep.props.showProgressBar && (\n <Progress color=\"navy.5\" size=\"sm\" radius={0} value={getProgress(currentStepIndex)} />\n )}\n <Box p=\"lg\">{currentStep}</Box>\n <Box\n sx={{\n marginTop: 'auto',\n }}\n >\n <StickyFooter borderTop>\n <Button\n name={isFirstStep ? cancelButtonLabel : previousButtonLabel}\n variant=\"outline\"\n onClick={() => {\n if (isFirstStep) {\n handleClose(true);\n } else {\n onPrevious?.(currentStepIndex - 1);\n setCurrentStepIndex(currentStepIndex - 1);\n }\n }}\n >\n {isFirstStep ? cancelButtonLabel : previousButtonLabel}\n </Button>\n\n <Button\n disabled={!isValid}\n onClick={() => {\n if (isLastStep) {\n onFinish?.() ?? handleClose(false);\n } else {\n onNext?.(currentStepIndex + 1, setCurrentStepIndex);\n\n if (!isStepValidatedOnNext) {\n setCurrentStepIndex(currentStepIndex + 1);\n }\n }\n }}\n >\n {isLastStep ? finishButtonLabel : nextButtonLabel}\n </Button>\n </StickyFooter>\n </Box>\n </Modal>\n );\n};\n\nModalWizard.Step = ModalWizardStep;\n"],"names":["ModalWizard","useStyles","createStyles","content","display","flexDirection","body","flex","cancelButtonLabel","nextButtonLabel","previousButtonLabel","finishButtonLabel","opened","onNext","onPrevious","onClose","onFinish","isDirty","handleDirtyState","classNames","styles","unstyled","children","isStepValidatedOnNext","modalProps","currentStep","name","classes","cx","useState","currentStepIndex","setCurrentStepIndex","modalSteps","Children","toArray","filter","child","type","ModalWizardStep","numberOfSteps","length","isFirstStep","isLastStep","step","index","isValid","props","validateStep","useEffect","handleClose","confirmDirty","isModalDirty","discardChanges","resolveStepDependentProp","prop","getProgress","useMemo","currStepIndex","totalNumberOfSteps","countsAsProgress","numberOfCompletedSteps","Modal","centered","withCloseButton","padding","Header","p","pr","variant","description","borderBottom","showProgressBar","DocAnchor","href","label","Actions","CloseButton","aria-label","onClick","Progress","color","size","radius","value","Box","sx","marginTop","StickyFooter","borderTop","Button","disabled","Step"],"mappings":"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"}
|
|
@@ -43,7 +43,7 @@ var Table = function(param) {
|
|
|
43
43
|
var data = param.data, getRowId = param.getRowId, noDataChildren = param.noDataChildren, getExpandChildren = param.getExpandChildren, _param_initialState = param.initialState, initialState = _param_initialState === void 0 ? {} : _param_initialState, columns = param.columns, _param_layouts = param.layouts, layouts = _param_layouts === void 0 ? [
|
|
44
44
|
_TableLayouts.TableLayouts.Rows
|
|
45
45
|
] : _param_layouts, onMount = param.onMount, onChange = param.onChange, children = param.children, _param_loading = param.loading, loading = _param_loading === void 0 ? false : _param_loading, doubleClickAction = param.doubleClickAction, multiRowSelectionEnabled = param.multiRowSelectionEnabled, disableRowSelection = param.disableRowSelection, onRowSelectionChange = param.onRowSelectionChange, additionalRootNodes = param.additionalRootNodes, _param_options = param.options, options = _param_options === void 0 ? {} : _param_options;
|
|
46
|
-
var _initialState, _initialState1, _initialState2, _options,
|
|
46
|
+
var _initialState, _initialState1, _initialState2, _options, _form_values, _form_values_dateRange, _form_values_dateRange1;
|
|
47
47
|
var convertedChildren = _react.Children.toArray(children);
|
|
48
48
|
var header = convertedChildren.find(function(child) {
|
|
49
49
|
return child.type === _TableHeader.TableHeader;
|
|
@@ -90,6 +90,7 @@ var Table = function(param) {
|
|
|
90
90
|
enableMultiRowSelection: !!multiRowSelectionEnabled,
|
|
91
91
|
getRowId: getRowId,
|
|
92
92
|
getRowCanExpand: function(row) {
|
|
93
|
+
var _getExpandChildren;
|
|
93
94
|
return (_ref = !!((_getExpandChildren = getExpandChildren) === null || _getExpandChildren === void 0 ? void 0 : _getExpandChildren(row.original))) !== null && _ref !== void 0 ? _ref : false;
|
|
94
95
|
},
|
|
95
96
|
enableRowSelection: !loading
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Loader} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {ColumnDef, getCoreRowModel, Row, TableState as TanstackTableState, useReactTable} from '@tanstack/react-table';\nimport debounce from 'lodash.debounce';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, cloneElement, Dispatch, ReactElement, useCallback, useEffect, useState} from 'react';\n\nimport {TableLayouts} from './layouts/TableLayouts';\nimport useStyles from './Table.styles';\nimport {TableFormType, TableProps, TableState, TableType} from './Table.types';\nimport {TableActions} from './TableActions';\nimport {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';\nimport {TableConsumer} from './TableConsumer';\nimport {TableContext} from './TableContext';\nimport {TableDateRangePicker} from './TableDateRangePicker';\nimport {TableFilter} from './TableFilter';\nimport {TableFooter} from './TableFooter';\nimport {TableHeader} from './TableHeader';\nimport {TableLastUpdated} from './TableLastUpdated';\nimport {TableLoading} from './TableLoading';\nimport {TablePagination} from './TablePagination';\nimport {TablePerPage} from './TablePerPage';\nimport {TablePredicate} from './TablePredicate';\nimport {TableSelectableColumn} from './TableSelectableColumn';\nimport {useRowSelection} from './useRowSelection';\n\nexport const Table: TableType = <T,>({\n data,\n getRowId,\n noDataChildren,\n getExpandChildren,\n initialState = {},\n columns,\n layouts = [TableLayouts.Rows],\n onMount,\n onChange,\n children,\n loading = false,\n doubleClickAction,\n multiRowSelectionEnabled,\n disableRowSelection,\n onRowSelectionChange,\n additionalRootNodes,\n options = {},\n}: TableProps<T>) => {\n const convertedChildren = Children.toArray(children) as ReactElement[];\n const header = convertedChildren.find((child) => child.type === TableHeader);\n const footer = convertedChildren.find((child) => child.type === TableFooter);\n const consumer = convertedChildren.find((child) => child.type === TableConsumer);\n const lastUpdated = convertedChildren.find((child) => child.type === TableLastUpdated);\n\n const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n const form = useForm<TableFormType>({\n initialValues: {\n predicates: initialState?.predicates ?? {},\n dateRange: initialState?.dateRange ?? [null, null],\n layout: initialState?.layout ?? layouts[0].name,\n },\n });\n const {classes} = useStyles();\n\n const table = useReactTable({\n initialState: defaultsDeep(initialStateWithoutForm, {\n pagination: {pageSize: TablePerPage.DEFAULT_SIZE},\n globalFilter: '',\n }),\n data,\n columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,\n getCoreRowModel: getCoreRowModel(),\n manualPagination: options?.getPaginationRowModel === undefined,\n enableMultiRowSelection: !!multiRowSelectionEnabled,\n getRowId,\n getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n enableRowSelection: !loading,\n ...options,\n });\n\n const [state, setState] = useState<TableState<T>>(table.initialState as TableState<T>);\n table.setOptions((prev) => ({\n ...prev,\n state: state as TanstackTableState,\n onStateChange: setState as Dispatch<React.SetStateAction<TanstackTableState>>,\n }));\n const {clearSelection, getSelectedRow, getSelectedRows, outsideClickRef} = useRowSelection(table, {\n multiRowSelectionEnabled,\n onRowSelectionChange,\n additionalRootNodes,\n });\n const isFiltered =\n !!state.globalFilter ||\n Object.keys(form.values?.predicates ?? {}).some((predicate) => !!form.values.predicates[predicate]) ||\n !!form.values.dateRange?.[0] ||\n !!form.values.dateRange?.[1];\n\n const triggerChange = debounce(() => onChange?.({...state, ...form.values}), 500);\n\n useEffect(() => {\n onMount?.({...state, ...form.values});\n return () => {\n triggerChange.cancel();\n };\n }, []);\n\n useDidUpdate(() => {\n triggerChange();\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n }, [\n state.globalFilter,\n state.pagination,\n state.sorting,\n JSON.stringify(form.values.dateRange),\n JSON.stringify(form.values.predicates),\n ]);\n\n const clearFilters = useCallback(() => {\n form.setFieldValue('predicates', initialState.predicates ?? {});\n setState((prevState) => ({...prevState, globalFilter: ''}));\n }, []);\n\n if (!data) {\n return (\n <Center sx={{flexGrow: 1}}>\n <Loader />\n </Center>\n );\n }\n\n const Layout = layouts.find(({name}) => name === form.values.layout);\n const hasRows = table.getRowModel().rows.length > 0;\n\n return (\n <Box ref={outsideClickRef}>\n <TableContext.Provider\n value={{\n onChange: triggerChange,\n state,\n isFiltered,\n setState,\n clearFilters,\n getSelectedRow,\n getSelectedRows,\n clearSelection,\n form,\n containerRef: outsideClickRef,\n multiRowSelectionEnabled,\n getPageCount: table.getPageCount,\n disableRowSelection,\n layouts,\n }}\n >\n {consumer}\n {!hasRows && !isFiltered && !loading ? (\n noDataChildren\n ) : (\n <>\n <Box component=\"table\" className={classes.table} pb=\"sm\">\n <thead className={classes.header}>\n {!!header ? (\n <tr>\n <th style={{padding: 0}} colSpan={table.getAllColumns().length}>\n {header}\n </th>\n </tr>\n ) : null}\n <Layout.Header\n table={table}\n doubleClickAction={doubleClickAction}\n getExpandChildren={getExpandChildren}\n loading={loading}\n />\n </thead>\n <tbody>\n {hasRows ? (\n <Layout.Body\n table={table}\n doubleClickAction={doubleClickAction}\n getExpandChildren={getExpandChildren}\n loading={loading}\n />\n ) : (\n <tr>\n <td colSpan={table.getAllColumns().length}>\n <TableLoading visible={loading}>{noDataChildren}</TableLoading>\n </td>\n </tr>\n )}\n </tbody>\n </Box>\n {footer}\n {lastUpdated\n ? cloneElement(lastUpdated, {\n dependencies: [data, ...(lastUpdated.props.dependencies ?? [])],\n })\n : null}\n </>\n )}\n </TableContext.Provider>\n </Box>\n );\n};\n\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.LastUpdated = TableLastUpdated;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.AccordionColumn = TableAccordionColumn;\nTable.DateRangePicker = TableDateRangePicker;\nTable.Consumer = TableConsumer;\nTable.Loading = TableLoading;\nTable.Layouts = TableLayouts;\n"],"names":["Table","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","layouts","TableLayouts","Rows","onMount","onChange","children","loading","doubleClickAction","multiRowSelectionEnabled","disableRowSelection","onRowSelectionChange","additionalRootNodes","options","form","convertedChildren","Children","toArray","header","find","child","type","TableHeader","footer","TableFooter","consumer","TableConsumer","lastUpdated","TableLastUpdated","predicates","dateRange","initialStateWithoutForm","useForm","initialValues","layout","name","classes","useStyles","table","useReactTable","defaultsDeep","pagination","pageSize","TablePerPage","DEFAULT_SIZE","globalFilter","TableSelectableColumn","concat","getCoreRowModel","manualPagination","getPaginationRowModel","undefined","enableMultiRowSelection","getRowCanExpand","row","original","enableRowSelection","useState","state","setState","setOptions","prev","onStateChange","useRowSelection","clearSelection","getSelectedRow","getSelectedRows","outsideClickRef","isFiltered","Object","keys","values","some","predicate","triggerChange","debounce","useEffect","cancel","useDidUpdate","sorting","JSON","stringify","clearFilters","useCallback","setFieldValue","prevState","Center","sx","flexGrow","Loader","Layout","hasRows","getRowModel","rows","length","Box","ref","TableContext","Provider","value","containerRef","getPageCount","component","className","pb","thead","tr","th","style","padding","colSpan","getAllColumns","Header","tbody","Body","td","TableLoading","visible","cloneElement","dependencies","props","Actions","TableActions","Filter","TableFilter","Footer","LastUpdated","Pagination","TablePagination","Predicate","TablePredicate","PerPage","CollapsibleColumn","TableCollapsibleColumn","AccordionColumn","TableAccordionColumn","DateRangePicker","TableDateRangePicker","Consumer","Loading","Layouts"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Loader} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {ColumnDef, getCoreRowModel, Row, TableState as TanstackTableState, useReactTable} from '@tanstack/react-table';\nimport debounce from 'lodash.debounce';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, cloneElement, Dispatch, ReactElement, useCallback, useEffect, useState} from 'react';\n\nimport {TableLayouts} from './layouts/TableLayouts';\nimport useStyles from './Table.styles';\nimport {TableFormType, TableProps, TableState, TableType} from './Table.types';\nimport {TableActions} from './TableActions';\nimport {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';\nimport {TableConsumer} from './TableConsumer';\nimport {TableContext} from './TableContext';\nimport {TableDateRangePicker} from './TableDateRangePicker';\nimport {TableFilter} from './TableFilter';\nimport {TableFooter} from './TableFooter';\nimport {TableHeader} from './TableHeader';\nimport {TableLastUpdated} from './TableLastUpdated';\nimport {TableLoading} from './TableLoading';\nimport {TablePagination} from './TablePagination';\nimport {TablePerPage} from './TablePerPage';\nimport {TablePredicate} from './TablePredicate';\nimport {TableSelectableColumn} from './TableSelectableColumn';\nimport {useRowSelection} from './useRowSelection';\n\nexport const Table: TableType = <T,>({\n data,\n getRowId,\n noDataChildren,\n getExpandChildren,\n initialState = {},\n columns,\n layouts = [TableLayouts.Rows],\n onMount,\n onChange,\n children,\n loading = false,\n doubleClickAction,\n multiRowSelectionEnabled,\n disableRowSelection,\n onRowSelectionChange,\n additionalRootNodes,\n options = {},\n}: TableProps<T>) => {\n const convertedChildren = Children.toArray(children) as ReactElement[];\n const header = convertedChildren.find((child) => child.type === TableHeader);\n const footer = convertedChildren.find((child) => child.type === TableFooter);\n const consumer = convertedChildren.find((child) => child.type === TableConsumer);\n const lastUpdated = convertedChildren.find((child) => child.type === TableLastUpdated);\n\n const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n const form = useForm<TableFormType>({\n initialValues: {\n predicates: initialState?.predicates ?? {},\n dateRange: initialState?.dateRange ?? [null, null],\n layout: initialState?.layout ?? layouts[0].name,\n },\n });\n const {classes} = useStyles();\n\n const table = useReactTable({\n initialState: defaultsDeep(initialStateWithoutForm, {\n pagination: {pageSize: TablePerPage.DEFAULT_SIZE},\n globalFilter: '',\n }),\n data,\n columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,\n getCoreRowModel: getCoreRowModel(),\n manualPagination: options?.getPaginationRowModel === undefined,\n enableMultiRowSelection: !!multiRowSelectionEnabled,\n getRowId,\n getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n enableRowSelection: !loading,\n ...options,\n });\n\n const [state, setState] = useState<TableState<T>>(table.initialState as TableState<T>);\n table.setOptions((prev) => ({\n ...prev,\n state: state as TanstackTableState,\n onStateChange: setState as Dispatch<React.SetStateAction<TanstackTableState>>,\n }));\n const {clearSelection, getSelectedRow, getSelectedRows, outsideClickRef} = useRowSelection(table, {\n multiRowSelectionEnabled,\n onRowSelectionChange,\n additionalRootNodes,\n });\n const isFiltered =\n !!state.globalFilter ||\n Object.keys(form.values?.predicates ?? {}).some((predicate) => !!form.values.predicates[predicate]) ||\n !!form.values.dateRange?.[0] ||\n !!form.values.dateRange?.[1];\n\n const triggerChange = debounce(() => onChange?.({...state, ...form.values}), 500);\n\n useEffect(() => {\n onMount?.({...state, ...form.values});\n return () => {\n triggerChange.cancel();\n };\n }, []);\n\n useDidUpdate(() => {\n triggerChange();\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n }, [\n state.globalFilter,\n state.pagination,\n state.sorting,\n JSON.stringify(form.values.dateRange),\n JSON.stringify(form.values.predicates),\n ]);\n\n const clearFilters = useCallback(() => {\n form.setFieldValue('predicates', initialState.predicates ?? {});\n setState((prevState) => ({...prevState, globalFilter: ''}));\n }, []);\n\n if (!data) {\n return (\n <Center sx={{flexGrow: 1}}>\n <Loader />\n </Center>\n );\n }\n\n const Layout = layouts.find(({name}) => name === form.values.layout);\n const hasRows = table.getRowModel().rows.length > 0;\n\n return (\n <Box ref={outsideClickRef}>\n <TableContext.Provider\n value={{\n onChange: triggerChange,\n state,\n isFiltered,\n setState,\n clearFilters,\n getSelectedRow,\n getSelectedRows,\n clearSelection,\n form,\n containerRef: outsideClickRef,\n multiRowSelectionEnabled,\n getPageCount: table.getPageCount,\n disableRowSelection,\n layouts,\n }}\n >\n {consumer}\n {!hasRows && !isFiltered && !loading ? (\n noDataChildren\n ) : (\n <>\n <Box component=\"table\" className={classes.table} pb=\"sm\">\n <thead className={classes.header}>\n {!!header ? (\n <tr>\n <th style={{padding: 0}} colSpan={table.getAllColumns().length}>\n {header}\n </th>\n </tr>\n ) : null}\n <Layout.Header\n table={table}\n doubleClickAction={doubleClickAction}\n getExpandChildren={getExpandChildren}\n loading={loading}\n />\n </thead>\n <tbody>\n {hasRows ? (\n <Layout.Body\n table={table}\n doubleClickAction={doubleClickAction}\n getExpandChildren={getExpandChildren}\n loading={loading}\n />\n ) : (\n <tr>\n <td colSpan={table.getAllColumns().length}>\n <TableLoading visible={loading}>{noDataChildren}</TableLoading>\n </td>\n </tr>\n )}\n </tbody>\n </Box>\n {footer}\n {lastUpdated\n ? cloneElement(lastUpdated, {\n dependencies: [data, ...(lastUpdated.props.dependencies ?? [])],\n })\n : null}\n </>\n )}\n </TableContext.Provider>\n </Box>\n );\n};\n\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.LastUpdated = TableLastUpdated;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.AccordionColumn = TableAccordionColumn;\nTable.DateRangePicker = TableDateRangePicker;\nTable.Consumer = TableConsumer;\nTable.Loading = TableLoading;\nTable.Layouts = TableLayouts;\n"],"names":["Table","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","layouts","TableLayouts","Rows","onMount","onChange","children","loading","doubleClickAction","multiRowSelectionEnabled","disableRowSelection","onRowSelectionChange","additionalRootNodes","options","form","convertedChildren","Children","toArray","header","find","child","type","TableHeader","footer","TableFooter","consumer","TableConsumer","lastUpdated","TableLastUpdated","predicates","dateRange","initialStateWithoutForm","useForm","initialValues","layout","name","classes","useStyles","table","useReactTable","defaultsDeep","pagination","pageSize","TablePerPage","DEFAULT_SIZE","globalFilter","TableSelectableColumn","concat","getCoreRowModel","manualPagination","getPaginationRowModel","undefined","enableMultiRowSelection","getRowCanExpand","row","original","enableRowSelection","useState","state","setState","setOptions","prev","onStateChange","useRowSelection","clearSelection","getSelectedRow","getSelectedRows","outsideClickRef","isFiltered","Object","keys","values","some","predicate","triggerChange","debounce","useEffect","cancel","useDidUpdate","sorting","JSON","stringify","clearFilters","useCallback","setFieldValue","prevState","Center","sx","flexGrow","Loader","Layout","hasRows","getRowModel","rows","length","Box","ref","TableContext","Provider","value","containerRef","getPageCount","component","className","pb","thead","tr","th","style","padding","colSpan","getAllColumns","Header","tbody","Body","td","TableLoading","visible","cloneElement","dependencies","props","Actions","TableActions","Filter","TableFilter","Footer","LastUpdated","Pagination","TablePagination","Predicate","TablePredicate","PerPage","CollapsibleColumn","TableCollapsibleColumn","AccordionColumn","TableAccordionColumn","DateRangePicker","TableDateRangePicker","Consumer","Loading","Layouts"],"mappings":"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"}
|
|
@@ -19,7 +19,7 @@ var TablePerPage = function(param) {
|
|
|
19
19
|
50,
|
|
20
20
|
100
|
|
21
21
|
] : _param_values;
|
|
22
|
-
var
|
|
22
|
+
var _values;
|
|
23
23
|
var _useTable = (0, _TableContext.useTable)(), state = _useTable.state, setState = _useTable.setState;
|
|
24
24
|
var updatePerPage = function(newPerPage) {
|
|
25
25
|
setState(function(prevState) {
|
|
@@ -40,7 +40,7 @@ var TablePerPage = function(param) {
|
|
|
40
40
|
children: label
|
|
41
41
|
}),
|
|
42
42
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.SegmentedControl, {
|
|
43
|
-
value: (_state_pagination_pageSize_toString = state.pagination.pageSize.toString()) !== null && _state_pagination_pageSize_toString !== void 0 ? _state_pagination_pageSize_toString : (_values = values) === null || _values === void 0 ? void 0 :
|
|
43
|
+
value: (_state_pagination_pageSize_toString = state.pagination.pageSize.toString()) !== null && _state_pagination_pageSize_toString !== void 0 ? _state_pagination_pageSize_toString : (_values = values) === null || _values === void 0 ? void 0 : _values[1].toString(),
|
|
44
44
|
onChange: updatePerPage,
|
|
45
45
|
data: values.map(function(value) {
|
|
46
46
|
return value.toString();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TablePerPage.tsx"],"sourcesContent":["import {Group, SegmentedControl, Text} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nimport {useTable} from './TableContext';\n\ninterface TablePerPageProps {\n /**\n * The label displayed before the control\n *\n * @default Results per page\n */\n label?: string;\n /**\n * The per page choices to display\n *\n * @default [25, 50, 100]\n */\n values?: number[];\n}\n\nexport const TablePerPage: FunctionComponent<TablePerPageProps> & {DEFAULT_SIZE: number} = ({\n label = 'Results per page',\n values = [25, 50, 100],\n}) => {\n const {state, setState} = useTable();\n\n const updatePerPage = (newPerPage: string) => {\n setState((prevState) => ({\n ...prevState,\n pagination: {pageIndex: 0, pageSize: parseInt(newPerPage, 10)},\n }));\n };\n\n return (\n <Group spacing=\"sm\">\n <Text fw={500}>{label}</Text>\n <SegmentedControl\n value={state.pagination.pageSize.toString() ?? values?.[1].toString()}\n onChange={updatePerPage}\n data={values.map((value) => value.toString())}\n color=\"action\"\n size=\"sm\"\n />\n </Group>\n );\n};\n\nTablePerPage.DEFAULT_SIZE = 50;\n"],"names":["TablePerPage","label","values","useTable","state","setState","updatePerPage","newPerPage","prevState","pagination","pageIndex","pageSize","parseInt","Group","spacing","Text","fw","SegmentedControl","value","toString","onChange","data","map","color","size","DEFAULT_SIZE"],"mappings":";;;;+BAoBaA;;;eAAAA;;;;;;oBApB+B;4BAGrB;AAiBhB,IAAMA,eAA8E;6BACvFC,OAAAA,kCAAQ,yDACRC,QAAAA,oCAAS;QAAC;QAAI;QAAI;KAAI;QAeqCA
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TablePerPage.tsx"],"sourcesContent":["import {Group, SegmentedControl, Text} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nimport {useTable} from './TableContext';\n\ninterface TablePerPageProps {\n /**\n * The label displayed before the control\n *\n * @default Results per page\n */\n label?: string;\n /**\n * The per page choices to display\n *\n * @default [25, 50, 100]\n */\n values?: number[];\n}\n\nexport const TablePerPage: FunctionComponent<TablePerPageProps> & {DEFAULT_SIZE: number} = ({\n label = 'Results per page',\n values = [25, 50, 100],\n}) => {\n const {state, setState} = useTable();\n\n const updatePerPage = (newPerPage: string) => {\n setState((prevState) => ({\n ...prevState,\n pagination: {pageIndex: 0, pageSize: parseInt(newPerPage, 10)},\n }));\n };\n\n return (\n <Group spacing=\"sm\">\n <Text fw={500}>{label}</Text>\n <SegmentedControl\n value={state.pagination.pageSize.toString() ?? values?.[1].toString()}\n onChange={updatePerPage}\n data={values.map((value) => value.toString())}\n color=\"action\"\n size=\"sm\"\n />\n </Group>\n );\n};\n\nTablePerPage.DEFAULT_SIZE = 50;\n"],"names":["TablePerPage","label","values","useTable","state","setState","updatePerPage","newPerPage","prevState","pagination","pageIndex","pageSize","parseInt","Group","spacing","Text","fw","SegmentedControl","value","toString","onChange","data","map","color","size","DEFAULT_SIZE"],"mappings":";;;;+BAoBaA;;;eAAAA;;;;;;oBApB+B;4BAGrB;AAiBhB,IAAMA,eAA8E;6BACvFC,OAAAA,kCAAQ,yDACRC,QAAAA,oCAAS;QAAC;QAAI;QAAI;KAAI;QAeqCA;IAb3D,IAA0BC,YAAAA,IAAAA,sBAAQ,KAA3BC,QAAmBD,UAAnBC,OAAOC,WAAYF,UAAZE;IAEd,IAAMC,gBAAgB,SAACC;QACnBF,SAAS,SAACG;mBAAe,4CAClBA;gBACHC,YAAY;oBAACC,WAAW;oBAAGC,UAAUC,SAASL,YAAY;gBAAG;;;IAErE;QAMmBH;IAJnB,qBACI,sBAACS,WAAK;QAACC,SAAQ;;0BACX,qBAACC,UAAI;gBAACC,IAAI;0BAAMf;;0BAChB,qBAACgB,sBAAgB;gBACbC,OAAOd,CAAAA,sCAAAA,MAAMK,UAAU,CAACE,QAAQ,CAACQ,QAAQ,gBAAlCf,iDAAAA,uCAAwCF,UAAAA,oBAAAA,8BAAAA,OAAQ,CAAC,EAAE,CAACiB,QAAQ;gBACnEC,UAAUd;gBACVe,MAAMnB,OAAOoB,GAAG,CAAC,SAACJ;2BAAUA,MAAMC,QAAQ;;gBAC1CI,OAAM;gBACNC,MAAK;;;;AAIrB;AAEAxB,aAAayB,YAAY,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/table/layouts/RowLayout.tsx"],"sourcesContent":["import {ListSize16Px} from '@coveord/plasma-react-icons';\nimport {Box, Collapse, createStyles, rem} from '@mantine/core';\nimport {flexRender} from '@tanstack/react-table';\nimport {defaultColumnSizing} from '@tanstack/table-core';\nimport {Fragment, type MouseEvent} from 'react';\nimport {TableLayout, TableLayoutProps} from '../Table.types';\nimport {TableCollapsibleColumn} from '../TableCollapsibleColumn';\nimport {useTable} from '../TableContext';\nimport {TableLoading} from '../TableLoading';\nimport {TableSelectableColumn} from '../TableSelectableColumn';\nimport {Th} from '../Th';\n\ninterface TableStylesParams {\n multiRowSelectionEnabled: boolean;\n disableRowSelection: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelectionEnabled, disableRowSelection}) => {\n const rowBackgroundColor =\n theme.colorScheme === 'dark' ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2) : theme.colors.gray[1];\n const border = `${rem(1)} solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`;\n return {\n headerColumns: {\n '& th:first-of-type > *': {\n paddingLeft: '40px',\n },\n\n '& input[type=checkbox]': {\n backgroundColor: disableRowSelection ? `${theme.colors.gray[2]}` : undefined,\n borderColor: disableRowSelection ? `${theme.colors.gray[3]}` : `${theme.colors.gray[4]}`,\n pointerEvents: disableRowSelection ? 'none' : 'auto',\n cursor: disableRowSelection ? 'not-allowed' : 'default',\n\n '& + svg': {\n color: disableRowSelection ? `${theme.colors.gray[5]}` : 'inherit',\n },\n },\n },\n\n rowSelected: {\n backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n },\n\n rowUnselectable: {\n '& input[type=checkbox]': {\n backgroundColor: `${theme.colors.gray[2]}`,\n borderColor: `${theme.colors.gray[3]}`,\n pointerEvents: 'none',\n cursor: 'not-allowed',\n\n '&:checked + svg': {\n color: `${theme.colors.gray[5]}`,\n },\n },\n },\n\n rowCollapsibleButtonCell: {\n textAlign: 'right',\n padding: `calc(${theme.spacing.xs}/2) ${theme.spacing.sm} !important`,\n },\n\n row: {\n '& td:first-of-type': {\n paddingLeft: '40px',\n },\n '&:hover': {\n backgroundColor: rowBackgroundColor,\n },\n },\n\n cell: {\n verticalAlign: 'middle',\n // We must use height instead of minHeight here, otherwise it doesn't apply\n height: '56px',\n padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n borderBottom: border,\n },\n\n collapsible: {\n backgroundColor: rowBackgroundColor,\n borderBottom: border,\n },\n };\n});\n\nconst RowLayoutHeader = <T,>({table}: TableLayoutProps<T>) => {\n const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n const {classes} = useStyles({disableRowSelection, multiRowSelectionEnabled});\n const headers = table.getHeaderGroups().map((headerGroup) => (\n <tr key={headerGroup.id} className={classes.headerColumns}>\n {headerGroup.headers.map((columnHeader) => (\n <Th key={columnHeader.id} header={columnHeader} />\n ))}\n </tr>\n ));\n return <>{headers}</>;\n};\n\nconst RowLayoutBody = <T,>({table, doubleClickAction, getExpandChildren, loading}: TableLayoutProps<T>) => {\n const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n const {classes, cx} = useStyles({disableRowSelection, multiRowSelectionEnabled});\n\n const toggleCollapsible = (el: HTMLTableRowElement) => {\n const cell = el.children[el.children.length - 1] as HTMLTableCellElement;\n cell.querySelector('button').click();\n };\n\n const rows = table.getRowModel().rows.map((row) => {\n const rowChildren = getExpandChildren?.(row.original) ?? null;\n const isSelected = !!row.getIsSelected();\n const onClick = (event: MouseEvent<HTMLTableRowElement>) => {\n if (rowChildren) {\n toggleCollapsible(event.currentTarget);\n }\n if (!disableRowSelection && !multiRowSelectionEnabled) {\n row.toggleSelected();\n }\n };\n\n return (\n <Fragment key={row.id}>\n <tr\n onClick={onClick}\n onDoubleClick={() => doubleClickAction?.(row.original)}\n className={cx(classes.row, {\n [classes.rowSelected]: isSelected,\n [classes.rowUnselectable]: disableRowSelection,\n })}\n aria-selected={isSelected}\n >\n {row.getVisibleCells().map((cell) => {\n const size = cell.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n const onCollapsibleCellClick = (event: MouseEvent<HTMLTableCellElement>) => {\n if (cell.column.id === TableSelectableColumn.id && !disableRowSelection) {\n event.stopPropagation();\n row.getToggleSelectedHandler();\n }\n };\n return (\n <td\n key={cell.id}\n style={{width}}\n className={cx(classes.cell, {\n [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n })}\n onClick={onCollapsibleCellClick}\n >\n <TableLoading visible={loading}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableLoading>\n </td>\n );\n })}\n </tr>\n {rowChildren ? (\n <tr>\n <td\n colSpan={table.getAllColumns().length}\n style={{\n padding: 0,\n }}\n >\n <Collapse in={row.getIsExpanded()}>\n <Box className={classes.collapsible} px=\"sm\" py=\"xs\">\n {rowChildren}\n </Box>\n </Collapse>\n </td>\n </tr>\n ) : null}\n </Fragment>\n );\n });\n\n return <>{rows}</>;\n};\n\nexport const RowLayout: TableLayout = {\n name: 'Rows',\n icon: ListSize16Px,\n Header: RowLayoutHeader,\n Body: RowLayoutBody,\n};\n"],"names":["RowLayout","useStyles","createStyles","theme","multiRowSelectionEnabled","disableRowSelection","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","gray","border","rem","dark","headerColumns","paddingLeft","backgroundColor","undefined","borderColor","pointerEvents","cursor","color","rowSelected","rowUnselectable","rowCollapsibleButtonCell","textAlign","padding","spacing","xs","sm","row","cell","verticalAlign","height","borderBottom","collapsible","RowLayoutHeader","table","useTable","classes","headers","getHeaderGroups","map","headerGroup","tr","className","columnHeader","Th","header","id","RowLayoutBody","doubleClickAction","getExpandChildren","loading","cx","toggleCollapsible","el","children","length","querySelector","click","rows","getRowModel","rowChildren","original","isSelected","getIsSelected","onClick","event","currentTarget","toggleSelected","Fragment","onDoubleClick","aria-selected","getVisibleCells","size","column","getSize","width","defaultColumnSizing","onCollapsibleCellClick","TableSelectableColumn","stopPropagation","getToggleSelectedHandler","td","style","TableCollapsibleColumn","TableLoading","visible","flexRender","columnDef","getContext","colSpan","getAllColumns","Collapse","in","getIsExpanded","Box","px","py","name","icon","ListSize16Px","Header","Body"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/table/layouts/RowLayout.tsx"],"sourcesContent":["import {ListSize16Px} from '@coveord/plasma-react-icons';\nimport {Box, Collapse, createStyles, rem} from '@mantine/core';\nimport {flexRender} from '@tanstack/react-table';\nimport {defaultColumnSizing} from '@tanstack/table-core';\nimport {Fragment, type MouseEvent} from 'react';\nimport {TableLayout, TableLayoutProps} from '../Table.types';\nimport {TableCollapsibleColumn} from '../TableCollapsibleColumn';\nimport {useTable} from '../TableContext';\nimport {TableLoading} from '../TableLoading';\nimport {TableSelectableColumn} from '../TableSelectableColumn';\nimport {Th} from '../Th';\n\ninterface TableStylesParams {\n multiRowSelectionEnabled: boolean;\n disableRowSelection: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelectionEnabled, disableRowSelection}) => {\n const rowBackgroundColor =\n theme.colorScheme === 'dark' ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2) : theme.colors.gray[1];\n const border = `${rem(1)} solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`;\n return {\n headerColumns: {\n '& th:first-of-type > *': {\n paddingLeft: '40px',\n },\n\n '& input[type=checkbox]': {\n backgroundColor: disableRowSelection ? `${theme.colors.gray[2]}` : undefined,\n borderColor: disableRowSelection ? `${theme.colors.gray[3]}` : `${theme.colors.gray[4]}`,\n pointerEvents: disableRowSelection ? 'none' : 'auto',\n cursor: disableRowSelection ? 'not-allowed' : 'default',\n\n '& + svg': {\n color: disableRowSelection ? `${theme.colors.gray[5]}` : 'inherit',\n },\n },\n },\n\n rowSelected: {\n backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n },\n\n rowUnselectable: {\n '& input[type=checkbox]': {\n backgroundColor: `${theme.colors.gray[2]}`,\n borderColor: `${theme.colors.gray[3]}`,\n pointerEvents: 'none',\n cursor: 'not-allowed',\n\n '&:checked + svg': {\n color: `${theme.colors.gray[5]}`,\n },\n },\n },\n\n rowCollapsibleButtonCell: {\n textAlign: 'right',\n padding: `calc(${theme.spacing.xs}/2) ${theme.spacing.sm} !important`,\n },\n\n row: {\n '& td:first-of-type': {\n paddingLeft: '40px',\n },\n '&:hover': {\n backgroundColor: rowBackgroundColor,\n },\n },\n\n cell: {\n verticalAlign: 'middle',\n // We must use height instead of minHeight here, otherwise it doesn't apply\n height: '56px',\n padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n borderBottom: border,\n },\n\n collapsible: {\n backgroundColor: rowBackgroundColor,\n borderBottom: border,\n },\n };\n});\n\nconst RowLayoutHeader = <T,>({table}: TableLayoutProps<T>) => {\n const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n const {classes} = useStyles({disableRowSelection, multiRowSelectionEnabled});\n const headers = table.getHeaderGroups().map((headerGroup) => (\n <tr key={headerGroup.id} className={classes.headerColumns}>\n {headerGroup.headers.map((columnHeader) => (\n <Th key={columnHeader.id} header={columnHeader} />\n ))}\n </tr>\n ));\n return <>{headers}</>;\n};\n\nconst RowLayoutBody = <T,>({table, doubleClickAction, getExpandChildren, loading}: TableLayoutProps<T>) => {\n const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n const {classes, cx} = useStyles({disableRowSelection, multiRowSelectionEnabled});\n\n const toggleCollapsible = (el: HTMLTableRowElement) => {\n const cell = el.children[el.children.length - 1] as HTMLTableCellElement;\n cell.querySelector('button').click();\n };\n\n const rows = table.getRowModel().rows.map((row) => {\n const rowChildren = getExpandChildren?.(row.original) ?? null;\n const isSelected = !!row.getIsSelected();\n const onClick = (event: MouseEvent<HTMLTableRowElement>) => {\n if (rowChildren) {\n toggleCollapsible(event.currentTarget);\n }\n if (!disableRowSelection && !multiRowSelectionEnabled) {\n row.toggleSelected();\n }\n };\n\n return (\n <Fragment key={row.id}>\n <tr\n onClick={onClick}\n onDoubleClick={() => doubleClickAction?.(row.original)}\n className={cx(classes.row, {\n [classes.rowSelected]: isSelected,\n [classes.rowUnselectable]: disableRowSelection,\n })}\n aria-selected={isSelected}\n >\n {row.getVisibleCells().map((cell) => {\n const size = cell.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n const onCollapsibleCellClick = (event: MouseEvent<HTMLTableCellElement>) => {\n if (cell.column.id === TableSelectableColumn.id && !disableRowSelection) {\n event.stopPropagation();\n row.getToggleSelectedHandler();\n }\n };\n return (\n <td\n key={cell.id}\n style={{width}}\n className={cx(classes.cell, {\n [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n })}\n onClick={onCollapsibleCellClick}\n >\n <TableLoading visible={loading}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableLoading>\n </td>\n );\n })}\n </tr>\n {rowChildren ? (\n <tr>\n <td\n colSpan={table.getAllColumns().length}\n style={{\n padding: 0,\n }}\n >\n <Collapse in={row.getIsExpanded()}>\n <Box className={classes.collapsible} px=\"sm\" py=\"xs\">\n {rowChildren}\n </Box>\n </Collapse>\n </td>\n </tr>\n ) : null}\n </Fragment>\n );\n });\n\n return <>{rows}</>;\n};\n\nexport const RowLayout: TableLayout = {\n name: 'Rows',\n icon: ListSize16Px,\n Header: RowLayoutHeader,\n Body: RowLayoutBody,\n};\n"],"names":["RowLayout","useStyles","createStyles","theme","multiRowSelectionEnabled","disableRowSelection","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","gray","border","rem","dark","headerColumns","paddingLeft","backgroundColor","undefined","borderColor","pointerEvents","cursor","color","rowSelected","rowUnselectable","rowCollapsibleButtonCell","textAlign","padding","spacing","xs","sm","row","cell","verticalAlign","height","borderBottom","collapsible","RowLayoutHeader","table","useTable","classes","headers","getHeaderGroups","map","headerGroup","tr","className","columnHeader","Th","header","id","RowLayoutBody","doubleClickAction","getExpandChildren","loading","cx","toggleCollapsible","el","children","length","querySelector","click","rows","getRowModel","rowChildren","original","isSelected","getIsSelected","onClick","event","currentTarget","toggleSelected","Fragment","onDoubleClick","aria-selected","getVisibleCells","size","column","getSize","width","defaultColumnSizing","onCollapsibleCellClick","TableSelectableColumn","stopPropagation","getToggleSelectedHandler","td","style","TableCollapsibleColumn","TableLoading","visible","flexRender","columnDef","getContext","colSpan","getAllColumns","Collapse","in","getIsExpanded","Box","px","py","name","icon","ListSize16Px","Header","Body"],"mappings":";;;;+BAkLaA;;;eAAAA;;;;;gCAlLc;oBACoB;0BACtB;yBACS;qBACM;sCAEH;4BACd;4BACI;qCACS;kBACnB;AAOjB,IAAMC,YAAYC,IAAAA,kBAAY,EAA4B,SAACC;QAAQC,iCAAAA,0BAA0BC,4BAAAA;IACzF,IAAMC,qBACFH,MAAMI,WAAW,KAAK,SAASJ,MAAMK,EAAE,CAACC,IAAI,CAACN,MAAMO,MAAM,CAACP,MAAMQ,YAAY,CAAC,CAAC,EAAE,EAAE,OAAOR,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;IACjH,IAAMC,SAAS,AAAC,GAAkBV,OAAhBW,IAAAA,SAAG,EAAC,IAAG,WAAoF,OAA3EX,MAAMI,WAAW,KAAK,SAASJ,MAAMO,MAAM,CAACK,IAAI,CAAC,EAAE,GAAGZ,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;IAC5G,OAAO;QACHI,eAAe;YACX,0BAA0B;gBACtBC,aAAa;YACjB;YAEA,0BAA0B;gBACtBC,iBAAiBb,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAKO;gBACnEC,aAAaf,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAK,AAAC,GAAuB,OAArBT,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACtFS,eAAehB,sBAAsB,SAAS;gBAC9CiB,QAAQjB,sBAAsB,gBAAgB;gBAE9C,WAAW;oBACPkB,OAAOlB,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAK;gBAC7D;YACJ;QACJ;QAEAY,aAAa;YACTN,iBAAiBd,2BAA2Be,YAAYb;QAC5D;QAEAmB,iBAAiB;YACb,0BAA0B;gBACtBP,iBAAiB,AAAC,GAAuB,OAArBf,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACxCQ,aAAa,AAAC,GAAuB,OAArBjB,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACpCS,eAAe;gBACfC,QAAQ;gBAER,mBAAmB;oBACfC,OAAO,AAAC,GAAuB,OAArBpB,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBAClC;YACJ;QACJ;QAEAc,0BAA0B;YACtBC,WAAW;YACXC,SAAS,AAAC,QAA8BzB,OAAvBA,MAAM0B,OAAO,CAACC,EAAE,EAAC,QAAuB,OAAjB3B,MAAM0B,OAAO,CAACE,EAAE,EAAC;QAC7D;QAEAC,KAAK;YACD,sBAAsB;gBAClBf,aAAa;YACjB;YACA,WAAW;gBACPC,iBAAiBZ;YACrB;QACJ;QAEA2B,MAAM;YACFC,eAAe;YACf,2EAA2E;YAC3EC,QAAQ;YACRP,SAAS,AAAC,GAAsBzB,OAApBA,MAAM0B,OAAO,CAACC,EAAE,EAAC,KAAoB,OAAjB3B,MAAM0B,OAAO,CAACE,EAAE;YAChDK,cAAcvB;QAClB;QAEAwB,aAAa;YACTnB,iBAAiBZ;YACjB8B,cAAcvB;QAClB;IACJ;AACJ;AAEA,IAAMyB,kBAAkB;QAAMC,cAAAA;IAC1B,IAAwDC,YAAAA,IAAAA,sBAAQ,KAAzDpC,2BAAiDoC,UAAjDpC,0BAA0BC,sBAAuBmC,UAAvBnC;IACjC,IAAM,AAACoC,UAAWxC,UAAU;QAACI,qBAAAA;QAAqBD,0BAAAA;IAAwB,GAAnEqC;IACP,IAAMC,UAAUH,MAAMI,eAAe,GAAGC,GAAG,CAAC,SAACC;6BACzC,qBAACC;YAAwBC,WAAWN,QAAQzB,aAAa;sBACpD6B,YAAYH,OAAO,CAACE,GAAG,CAAC,SAACI;qCACtB,qBAACC,MAAE;oBAAuBC,QAAQF;mBAAzBA,aAAaG,EAAE;;WAFvBN,YAAYM,EAAE;;IAM3B,qBAAO;kBAAGT;;AACd;AAEA,IAAMU,gBAAgB;QAAMb,cAAAA,OAAOc,0BAAAA,mBAAmBC,0BAAAA,mBAAmBC,gBAAAA;IACrE,IAAwDf,YAAAA,IAAAA,sBAAQ,KAAzDpC,2BAAiDoC,UAAjDpC,0BAA0BC,sBAAuBmC,UAAvBnC;IACjC,IAAsBJ,aAAAA,UAAU;QAACI,qBAAAA;QAAqBD,0BAAAA;IAAwB,IAAvEqC,UAAexC,WAAfwC,SAASe,KAAMvD,WAANuD;IAEhB,IAAMC,oBAAoB,SAACC;QACvB,IAAMzB,OAAOyB,GAAGC,QAAQ,CAACD,GAAGC,QAAQ,CAACC,MAAM,GAAG,EAAE;QAChD3B,KAAK4B,aAAa,CAAC,UAAUC,KAAK;IACtC;IAEA,IAAMC,OAAOxB,MAAMyB,WAAW,GAAGD,IAAI,CAACnB,GAAG,CAAC,SAACZ;YACnBsB;YAAAA;QAApB,IAAMW,cAAcX,CAAAA,uBAAAA,qBAAAA,+BAAAA,yCAAAA,mBAAoBtB,IAAIkC,QAAQ,eAAhCZ,iCAAAA,sBAAqC;QACzD,IAAMa,aAAa,CAAC,CAACnC,IAAIoC,aAAa;QACtC,IAAMC,UAAU,SAACC;YACb,IAAIL,aAAa;gBACbR,kBAAkBa,MAAMC,aAAa;YACzC;YACA,IAAI,CAAClE,uBAAuB,CAACD,0BAA0B;gBACnD4B,IAAIwC,cAAc;YACtB;QACJ;YAOuC;QALvC,qBACI,sBAACC,eAAQ;;8BACL,qBAAC3B;oBACGuB,SAASA;oBACTK,eAAe;4BAAMrB;gCAAAA,qBAAAA,+BAAAA,yCAAAA,mBAAoBrB,IAAIkC,QAAQ;;oBACrDnB,WAAWS,GAAGf,QAAQT,GAAG,GAAE,WACvB,mBADuB,MACtBS,QAAQjB,WAAW,EAAG2C,aACvB,mBAFuB,MAEtB1B,QAAQhB,eAAe,EAAGpB,sBAFJ;oBAI3BsE,iBAAeR;8BAEdnC,IAAI4C,eAAe,GAAGhC,GAAG,CAAC,SAACX;wBACxB,IAAM4C,OAAO5C,KAAK6C,MAAM,CAACC,OAAO;wBAChC,IAAMC,QAAQH,SAASI,8BAAmB,CAACJ,IAAI,GAAGA,OAAO1D;wBACzD,IAAM+D,yBAAyB,SAACZ;4BAC5B,IAAIrC,KAAK6C,MAAM,CAAC3B,EAAE,KAAKgC,4CAAqB,CAAChC,EAAE,IAAI,CAAC9C,qBAAqB;gCACrEiE,MAAMc,eAAe;gCACrBpD,IAAIqD,wBAAwB;4BAChC;wBACJ;wBACA,qBACI,qBAACC;4BAEGC,OAAO;gCAACP,OAAAA;4BAAK;4BACbjC,WAAWS,GAAGf,QAAQR,IAAI,EACtB,uBAACQ,QAAQf,wBAAwB,EAAGO,KAAK6C,MAAM,CAAC3B,EAAE,KAAKqC,8CAAsB,CAACrC,EAAE;4BAEpFkB,SAASa;sCAET,cAAA,qBAACO,0BAAY;gCAACC,SAASnC;0CAClBoC,IAAAA,sBAAU,EAAC1D,KAAK6C,MAAM,CAACc,SAAS,CAAC3D,IAAI,EAAEA,KAAK4D,UAAU;;2BARtD5D,KAAKkB,EAAE;oBAYxB;;gBAEHc,4BACG,qBAACnB;8BACG,cAAA,qBAACwC;wBACGQ,SAASvD,MAAMwD,aAAa,GAAGnC,MAAM;wBACrC2B,OAAO;4BACH3D,SAAS;wBACb;kCAEA,cAAA,qBAACoE,cAAQ;4BAACC,IAAIjE,IAAIkE,aAAa;sCAC3B,cAAA,qBAACC,SAAG;gCAACpD,WAAWN,QAAQJ,WAAW;gCAAE+D,IAAG;gCAAKC,IAAG;0CAC3CpC;;;;qBAKjB;;WAlDOjC,IAAImB,EAAE;IAqD7B;IAEA,qBAAO;kBAAGY;;AACd;AAEO,IAAM/D,YAAyB;IAClCsG,MAAM;IACNC,MAAMC,8BAAY;IAClBC,QAAQnE;IACRoE,MAAMtD;AACV"}
|
package/dist/cjs/theme/Theme.js
CHANGED
|
@@ -16,7 +16,6 @@ var _plasmareacticons = require("@coveord/plasma-react-icons");
|
|
|
16
16
|
var _plasmatokens = require("@coveord/plasma-tokens");
|
|
17
17
|
var _core = require("@mantine/core");
|
|
18
18
|
var _PlasmaColors = require("./PlasmaColors");
|
|
19
|
-
var _theme_colors;
|
|
20
19
|
var plasmaTheme = {
|
|
21
20
|
// These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts
|
|
22
21
|
colorScheme: "light",
|
|
@@ -299,6 +298,7 @@ var plasmaTheme = {
|
|
|
299
298
|
Notification: {
|
|
300
299
|
styles: function(theme, param) {
|
|
301
300
|
var notificationType = param.color;
|
|
301
|
+
var _theme_colors;
|
|
302
302
|
return {
|
|
303
303
|
root: {
|
|
304
304
|
borderColor: theme.colors.gray[3],
|