@coveord/plasma-mantine 48.0.0 → 48.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +3 -3
- package/.turbo/turbo-test.log +8 -8
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/components/collection/Collection.js +9 -4
- package/dist/cjs/components/collection/Collection.js.map +1 -1
- package/dist/definitions/components/collection/Collection.d.ts +1 -0
- package/dist/definitions/components/collection/Collection.d.ts.map +1 -1
- package/dist/esm/components/collection/Collection.js +9 -4
- package/dist/esm/components/collection/Collection.js.map +1 -1
- package/package.json +1 -1
- package/src/components/collection/Collection.tsx +8 -1
- package/src/components/collection/__tests__/Collection.spec.tsx +27 -0
|
@@ -30,11 +30,12 @@ var defaultProps = {
|
|
|
30
30
|
required: false
|
|
31
31
|
};
|
|
32
32
|
var Collection = function(props) {
|
|
33
|
-
var _ref = (0, _core.useComponentDefaultProps)("Collection", defaultProps, props), value = _ref.value, defaultValue = _ref.defaultValue, onChange = _ref.onChange, disabled = _ref.disabled, draggable = _ref.draggable, children = _ref.children, spacing = _ref.spacing, required = _ref.required, newItem = _ref.newItem, addLabel = _ref.addLabel, addDisabledTooltip = _ref.addDisabledTooltip, allowAdd = _ref.allowAdd, // Style props
|
|
33
|
+
var _ref = (0, _core.useComponentDefaultProps)("Collection", defaultProps, props), value = _ref.value, defaultValue = _ref.defaultValue, onChange = _ref.onChange, onRemoveItem = _ref.onRemoveItem, disabled = _ref.disabled, draggable = _ref.draggable, children = _ref.children, spacing = _ref.spacing, required = _ref.required, newItem = _ref.newItem, addLabel = _ref.addLabel, addDisabledTooltip = _ref.addDisabledTooltip, allowAdd = _ref.allowAdd, // Style props
|
|
34
34
|
classNames = _ref.classNames, className = _ref.className, styles = _ref.styles, unstyled = _ref.unstyled, others = _objectWithoutProperties(_ref, [
|
|
35
35
|
"value",
|
|
36
36
|
"defaultValue",
|
|
37
37
|
"onChange",
|
|
38
|
+
"onRemoveItem",
|
|
38
39
|
"disabled",
|
|
39
40
|
"draggable",
|
|
40
41
|
"children",
|
|
@@ -62,14 +63,18 @@ var Collection = function(props) {
|
|
|
62
63
|
defaultValue: defaultValue
|
|
63
64
|
}), 2), values = ref1[0], ref2 = ref1[1], append = ref2.append, remove = ref2.remove, reorder = ref2.reorder;
|
|
64
65
|
var hasOnlyOneItem = values.length === 1;
|
|
66
|
+
var removeItem = function(index) {
|
|
67
|
+
return function() {
|
|
68
|
+
remove(index);
|
|
69
|
+
onRemoveItem === null || onRemoveItem === void 0 ? void 0 : onRemoveItem(index);
|
|
70
|
+
};
|
|
71
|
+
};
|
|
65
72
|
var items = values.map(function(item, index) {
|
|
66
73
|
return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_collectionItem.CollectionItem, {
|
|
67
74
|
disabled: disabled,
|
|
68
75
|
draggable: draggable,
|
|
69
76
|
index: index,
|
|
70
|
-
onRemove:
|
|
71
|
-
return remove(index);
|
|
72
|
-
},
|
|
77
|
+
onRemove: removeItem(index),
|
|
73
78
|
styles: styles,
|
|
74
79
|
removable: !(required && hasOnlyOneItem),
|
|
75
80
|
children: children(item, index)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {\n Box,\n Button,\n DefaultProps,\n Group,\n MantineNumberSize,\n Selectors,\n Stack,\n Tooltip,\n useComponentDefaultProps,\n} from '@mantine/core';\nimport {useId} from '@mantine/hooks';\nimport {ReactNode} from 'react';\nimport {DragDropContext, Droppable} from 'react-beautiful-dnd';\n\nimport {useControlledList} from '../../hooks';\nimport {CollectionItem} from './CollectionItem';\nimport useStyles from './Colllection.styles';\n\ninterface CollectionProps<T> extends DefaultProps<Selectors<typeof useStyles>> {\n newItem: T;\n children: (item: T, index: number) => ReactNode;\n defaultValue?: T[];\n value?: T[];\n onFocus?: () => void;\n onChange?: (value: T[]) => void;\n draggable?: boolean;\n disabled?: boolean;\n allowAdd?: (values: T[]) => boolean;\n addLabel?: string;\n addDisabledTooltip?: string;\n spacing?: MantineNumberSize;\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};\n\nexport const Collection = <T,>(props: CollectionProps<T>) => {\n const {\n value,\n defaultValue,\n onChange,\n disabled,\n draggable,\n children,\n spacing,\n required,\n newItem,\n addLabel,\n addDisabledTooltip,\n allowAdd,\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 collectionID = useId('dnd-droppable');\n\n const [values, {append, remove, reorder}] = useControlledList({value, onChange, defaultValue});\n const hasOnlyOneItem = values.length === 1;\n const items = values.map((item, index) => (\n <CollectionItem\n key={index}\n disabled={disabled}\n draggable={draggable}\n index={index}\n onRemove={(
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {\n Box,\n Button,\n DefaultProps,\n Group,\n MantineNumberSize,\n Selectors,\n Stack,\n Tooltip,\n useComponentDefaultProps,\n} from '@mantine/core';\nimport {useId} from '@mantine/hooks';\nimport {ReactNode} from 'react';\nimport {DragDropContext, Droppable} from 'react-beautiful-dnd';\n\nimport {useControlledList} from '../../hooks';\nimport {CollectionItem} from './CollectionItem';\nimport useStyles from './Colllection.styles';\n\ninterface CollectionProps<T> extends DefaultProps<Selectors<typeof useStyles>> {\n newItem: T;\n children: (item: T, index: number) => ReactNode;\n defaultValue?: T[];\n value?: T[];\n onFocus?: () => void;\n onChange?: (value: T[]) => void;\n onRemoveItem?: (itemIndex: number) => void;\n draggable?: boolean;\n disabled?: boolean;\n allowAdd?: (values: T[]) => boolean;\n addLabel?: string;\n addDisabledTooltip?: string;\n spacing?: MantineNumberSize;\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};\n\nexport const Collection = <T,>(props: CollectionProps<T>) => {\n const {\n value,\n defaultValue,\n onChange,\n onRemoveItem,\n disabled,\n draggable,\n children,\n spacing,\n required,\n newItem,\n addLabel,\n addDisabledTooltip,\n allowAdd,\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 collectionID = useId('dnd-droppable');\n\n const [values, {append, remove, reorder}] = useControlledList({value, onChange, defaultValue});\n const hasOnlyOneItem = values.length === 1;\n const removeItem = (index: number) => () => {\n remove(index);\n onRemoveItem?.(index);\n };\n\n const items = values.map((item, index) => (\n <CollectionItem\n key={index}\n disabled={disabled}\n draggable={draggable}\n index={index}\n onRemove={removeItem(index)}\n styles={styles}\n removable={!(required && hasOnlyOneItem)}\n >\n {children(item, index)}\n </CollectionItem>\n ));\n\n const addAllowed = allowAdd?.(values) ?? 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={() => append(newItem)}\n disabled={!addAllowed}\n >\n {addLabel}\n </Button>\n </Box>\n </Tooltip>\n </Group>\n );\n\n return (\n <DragDropContext\n onDragEnd={({destination, source}) => reorder({from: source.index, to: destination?.index || 0})}\n >\n <Droppable direction=\"vertical\" droppableId={collectionID}>\n {(provided) => (\n <Box\n {...provided.droppableProps}\n ref={provided.innerRef}\n className={cx(classes.root, className)}\n {...others}\n >\n <Stack spacing={spacing}>\n {items}\n {provided.placeholder}\n {_addButton}\n </Stack>\n </Box>\n )}\n </Droppable>\n </DragDropContext>\n );\n};\n"],"names":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","props","useComponentDefaultProps","value","defaultValue","onChange","onRemoveItem","children","newItem","allowAdd","classNames","className","styles","unstyled","others","useStyles","name","classes","cx","collectionID","useId","useControlledList","values","append","remove","reorder","hasOnlyOneItem","length","removeItem","index","items","map","item","CollectionItem","onRemove","removable","addAllowed","_addButton","Group","Tooltip","label","Box","Button","variant","leftIcon","AddSize16Px","height","onClick","DragDropContext","onDragEnd","destination","source","from","to","Droppable","direction","droppableId","provided","droppableProps","ref","innerRef","root","Stack","placeholder"],"mappings":"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"}
|
|
@@ -8,6 +8,7 @@ interface CollectionProps<T> extends DefaultProps<Selectors<typeof useStyles>> {
|
|
|
8
8
|
value?: T[];
|
|
9
9
|
onFocus?: () => void;
|
|
10
10
|
onChange?: (value: T[]) => void;
|
|
11
|
+
onRemoveItem?: (itemIndex: number) => void;
|
|
11
12
|
draggable?: boolean;
|
|
12
13
|
disabled?: boolean;
|
|
13
14
|
allowAdd?: (values: T[]) => boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Collection.tsx"],"names":[],"mappings":"AACA,OAAO,EAGH,YAAY,EAEZ,iBAAiB,EACjB,SAAS,EAIZ,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAKhC,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAE7C,UAAU,eAAe,CAAC,CAAC,CAAE,SAAQ,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC1E,OAAO,EAAE,CAAC,CAAC;IACX,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAChD,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAWD,eAAO,MAAM,UAAU,+
|
|
1
|
+
{"version":3,"file":"Collection.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Collection.tsx"],"names":[],"mappings":"AACA,OAAO,EAGH,YAAY,EAEZ,iBAAiB,EACjB,SAAS,EAIZ,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAKhC,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAE7C,UAAU,eAAe,CAAC,CAAC,CAAE,SAAQ,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC1E,OAAO,EAAE,CAAC,CAAC;IACX,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAChD,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAWD,eAAO,MAAM,UAAU,+CAyFtB,CAAC"}
|
|
@@ -19,11 +19,12 @@ var defaultProps = {
|
|
|
19
19
|
required: false
|
|
20
20
|
};
|
|
21
21
|
export var Collection = function(props) {
|
|
22
|
-
var _ref = useComponentDefaultProps("Collection", defaultProps, props), value = _ref.value, defaultValue = _ref.defaultValue, onChange = _ref.onChange, disabled = _ref.disabled, draggable = _ref.draggable, children = _ref.children, spacing = _ref.spacing, required = _ref.required, newItem = _ref.newItem, addLabel = _ref.addLabel, addDisabledTooltip = _ref.addDisabledTooltip, allowAdd = _ref.allowAdd, // Style props
|
|
22
|
+
var _ref = useComponentDefaultProps("Collection", defaultProps, props), value = _ref.value, defaultValue = _ref.defaultValue, onChange = _ref.onChange, onRemoveItem = _ref.onRemoveItem, disabled = _ref.disabled, draggable = _ref.draggable, children = _ref.children, spacing = _ref.spacing, required = _ref.required, newItem = _ref.newItem, addLabel = _ref.addLabel, addDisabledTooltip = _ref.addDisabledTooltip, allowAdd = _ref.allowAdd, // Style props
|
|
23
23
|
classNames = _ref.classNames, className = _ref.className, styles = _ref.styles, unstyled = _ref.unstyled, others = _object_without_properties(_ref, [
|
|
24
24
|
"value",
|
|
25
25
|
"defaultValue",
|
|
26
26
|
"onChange",
|
|
27
|
+
"onRemoveItem",
|
|
27
28
|
"disabled",
|
|
28
29
|
"draggable",
|
|
29
30
|
"children",
|
|
@@ -51,14 +52,18 @@ export var Collection = function(props) {
|
|
|
51
52
|
defaultValue: defaultValue
|
|
52
53
|
}), 2), values = ref1[0], ref2 = ref1[1], append = ref2.append, remove = ref2.remove, reorder = ref2.reorder;
|
|
53
54
|
var hasOnlyOneItem = values.length === 1;
|
|
55
|
+
var removeItem = function(index) {
|
|
56
|
+
return function() {
|
|
57
|
+
remove(index);
|
|
58
|
+
onRemoveItem === null || onRemoveItem === void 0 ? void 0 : onRemoveItem(index);
|
|
59
|
+
};
|
|
60
|
+
};
|
|
54
61
|
var items = values.map(function(item, index) {
|
|
55
62
|
return /*#__PURE__*/ _jsx(CollectionItem, {
|
|
56
63
|
disabled: disabled,
|
|
57
64
|
draggable: draggable,
|
|
58
65
|
index: index,
|
|
59
|
-
onRemove:
|
|
60
|
-
return remove(index);
|
|
61
|
-
},
|
|
66
|
+
onRemove: removeItem(index),
|
|
62
67
|
styles: styles,
|
|
63
68
|
removable: !(required && hasOnlyOneItem),
|
|
64
69
|
children: children(item, index)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {\n Box,\n Button,\n DefaultProps,\n Group,\n MantineNumberSize,\n Selectors,\n Stack,\n Tooltip,\n useComponentDefaultProps,\n} from '@mantine/core';\nimport {useId} from '@mantine/hooks';\nimport {ReactNode} from 'react';\nimport {DragDropContext, Droppable} from 'react-beautiful-dnd';\n\nimport {useControlledList} from '../../hooks';\nimport {CollectionItem} from './CollectionItem';\nimport useStyles from './Colllection.styles';\n\ninterface CollectionProps<T> extends DefaultProps<Selectors<typeof useStyles>> {\n newItem: T;\n children: (item: T, index: number) => ReactNode;\n defaultValue?: T[];\n value?: T[];\n onFocus?: () => void;\n onChange?: (value: T[]) => void;\n draggable?: boolean;\n disabled?: boolean;\n allowAdd?: (values: T[]) => boolean;\n addLabel?: string;\n addDisabledTooltip?: string;\n spacing?: MantineNumberSize;\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};\n\nexport const Collection = <T,>(props: CollectionProps<T>) => {\n const {\n value,\n defaultValue,\n onChange,\n disabled,\n draggable,\n children,\n spacing,\n required,\n newItem,\n addLabel,\n addDisabledTooltip,\n allowAdd,\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 collectionID = useId('dnd-droppable');\n\n const [values, {append, remove, reorder}] = useControlledList({value, onChange, defaultValue});\n const hasOnlyOneItem = values.length === 1;\n const items = values.map((item, index) => (\n <CollectionItem\n key={index}\n disabled={disabled}\n draggable={draggable}\n index={index}\n onRemove={(
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {\n Box,\n Button,\n DefaultProps,\n Group,\n MantineNumberSize,\n Selectors,\n Stack,\n Tooltip,\n useComponentDefaultProps,\n} from '@mantine/core';\nimport {useId} from '@mantine/hooks';\nimport {ReactNode} from 'react';\nimport {DragDropContext, Droppable} from 'react-beautiful-dnd';\n\nimport {useControlledList} from '../../hooks';\nimport {CollectionItem} from './CollectionItem';\nimport useStyles from './Colllection.styles';\n\ninterface CollectionProps<T> extends DefaultProps<Selectors<typeof useStyles>> {\n newItem: T;\n children: (item: T, index: number) => ReactNode;\n defaultValue?: T[];\n value?: T[];\n onFocus?: () => void;\n onChange?: (value: T[]) => void;\n onRemoveItem?: (itemIndex: number) => void;\n draggable?: boolean;\n disabled?: boolean;\n allowAdd?: (values: T[]) => boolean;\n addLabel?: string;\n addDisabledTooltip?: string;\n spacing?: MantineNumberSize;\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};\n\nexport const Collection = <T,>(props: CollectionProps<T>) => {\n const {\n value,\n defaultValue,\n onChange,\n onRemoveItem,\n disabled,\n draggable,\n children,\n spacing,\n required,\n newItem,\n addLabel,\n addDisabledTooltip,\n allowAdd,\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 collectionID = useId('dnd-droppable');\n\n const [values, {append, remove, reorder}] = useControlledList({value, onChange, defaultValue});\n const hasOnlyOneItem = values.length === 1;\n const removeItem = (index: number) => () => {\n remove(index);\n onRemoveItem?.(index);\n };\n\n const items = values.map((item, index) => (\n <CollectionItem\n key={index}\n disabled={disabled}\n draggable={draggable}\n index={index}\n onRemove={removeItem(index)}\n styles={styles}\n removable={!(required && hasOnlyOneItem)}\n >\n {children(item, index)}\n </CollectionItem>\n ));\n\n const addAllowed = allowAdd?.(values) ?? 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={() => append(newItem)}\n disabled={!addAllowed}\n >\n {addLabel}\n </Button>\n </Box>\n </Tooltip>\n </Group>\n );\n\n return (\n <DragDropContext\n onDragEnd={({destination, source}) => reorder({from: source.index, to: destination?.index || 0})}\n >\n <Droppable direction=\"vertical\" droppableId={collectionID}>\n {(provided) => (\n <Box\n {...provided.droppableProps}\n ref={provided.innerRef}\n className={cx(classes.root, className)}\n {...others}\n >\n <Stack spacing={spacing}>\n {items}\n {provided.placeholder}\n {_addButton}\n </Stack>\n </Box>\n )}\n </Droppable>\n </DragDropContext>\n );\n};\n"],"names":["AddSize16Px","Box","Button","Group","Stack","Tooltip","useComponentDefaultProps","useId","DragDropContext","Droppable","useControlledList","CollectionItem","useStyles","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","Collection","props","value","defaultValue","onChange","onRemoveItem","children","newItem","allowAdd","classNames","className","styles","unstyled","others","name","classes","cx","collectionID","values","append","remove","reorder","hasOnlyOneItem","length","removeItem","index","items","map","item","onRemove","removable","addAllowed","_addButton","label","variant","leftIcon","height","onClick","onDragEnd","destination","source","from","to","direction","droppableId","provided","droppableProps","ref","innerRef","root","placeholder"],"mappings":"AAAA;;;;;AAAA,SAAQA,WAAW,QAAO,6BAA6B,CAAC;AACxD,SACIC,GAAG,EACHC,MAAM,EAENC,KAAK,EAGLC,KAAK,EACLC,OAAO,EACPC,wBAAwB,QACrB,eAAe,CAAC;AACvB,SAAQC,KAAK,QAAO,gBAAgB,CAAC;AAErC,SAAQC,eAAe,EAAEC,SAAS,QAAO,qBAAqB,CAAC;AAE/D,SAAQC,iBAAiB,QAAO,aAAa,CAAC;AAC9C,SAAQC,cAAc,QAAO,kBAAkB,CAAC;AAChD,OAAOC,SAAS,MAAM,sBAAsB,CAAC;AAmB7C,IAAMC,YAAY,GAAsC;IACpDC,SAAS,EAAE,KAAK;IAChBC,QAAQ,EAAE,UAAU;IACpBC,kBAAkB,EAAE,gCAAgC;IACpDC,QAAQ,EAAE,KAAK;IACfC,OAAO,EAAE,IAAI;IACbC,QAAQ,EAAE,KAAK;CAClB,AAAC;AAEF,OAAO,IAAMC,UAAU,GAAG,SAAKC,KAAyB,EAAK;IACzD,IAsBIf,IAAiF,GAAjFA,wBAAwB,CAAC,YAAY,EAAEO,YAAY,EAAwBQ,KAAK,CAAC,EArBjFC,KAAK,GAqBLhB,IAAiF,CArBjFgB,KAAK,EACLC,YAAY,GAoBZjB,IAAiF,CApBjFiB,YAAY,EACZC,QAAQ,GAmBRlB,IAAiF,CAnBjFkB,QAAQ,EACRC,YAAY,GAkBZnB,IAAiF,CAlBjFmB,YAAY,EACZR,QAAQ,GAiBRX,IAAiF,CAjBjFW,QAAQ,EACRH,SAAS,GAgBTR,IAAiF,CAhBjFQ,SAAS,EACTY,QAAQ,GAeRpB,IAAiF,CAfjFoB,QAAQ,EACRR,OAAO,GAcPZ,IAAiF,CAdjFY,OAAO,EACPC,QAAQ,GAaRb,IAAiF,CAbjFa,QAAQ,EACRQ,OAAO,GAYPrB,IAAiF,CAZjFqB,OAAO,EACPZ,QAAQ,GAWRT,IAAiF,CAXjFS,QAAQ,EACRC,kBAAkB,GAUlBV,IAAiF,CAVjFU,kBAAkB,EAClBY,QAAQ,GASRtB,IAAiF,CATjFsB,QAAQ,EAER,cAAc;IACdC,UAAU,GAMVvB,IAAiF,CANjFuB,UAAU,EACVC,SAAS,GAKTxB,IAAiF,CALjFwB,SAAS,EACTC,MAAM,GAINzB,IAAiF,CAJjFyB,MAAM,EACNC,QAAQ,GAGR1B,IAAiF,CAHjF0B,QAAQ,EAELC,MAAM,8BACT3B,IAAiF;QArBjFgB,OAAK;QACLC,cAAY;QACZC,UAAQ;QACRC,cAAY;QACZR,UAAQ;QACRH,WAAS;QACTY,UAAQ;QACRR,SAAO;QACPC,UAAQ;QACRQ,SAAO;QACPZ,UAAQ;QACRC,oBAAkB;QAClBY,UAAQ;QAGRC,YAAU;QACVC,WAAS;QACTC,QAAM;QACNC,UAAQ;MAG0E;IACtF,IAAsBpB,GAAmE,GAAnEA,SAAS,CAAC,IAAI,EAAE;QAACiB,UAAU,EAAVA,UAAU;QAAEK,IAAI,EAAE,YAAY;QAAEH,MAAM,EAANA,MAAM;QAAEC,QAAQ,EAARA,QAAQ;KAAC,CAAC,EAAlFG,OAAO,GAAQvB,GAAmE,CAAlFuB,OAAO,EAAEC,EAAE,GAAIxB,GAAmE,CAAzEwB,EAAE,AAAwE;IAC1F,IAAMC,YAAY,GAAG9B,KAAK,CAAC,eAAe,CAAC,AAAC;IAE5C,IAA4CG,IAAkD,oBAAlDA,iBAAiB,CAAC;QAACY,KAAK,EAALA,KAAK;QAAEE,QAAQ,EAARA,QAAQ;QAAED,YAAY,EAAZA,YAAY;KAAC,CAAC,IAAA,EAAvFe,MAAM,GAA+B5B,IAAkD,GAAjF,SAA+BA,IAAkD,KAA9E6B,MAAM,QAANA,MAAM,EAAEC,MAAM,QAANA,MAAM,EAAEC,OAAO,QAAPA,OAAO,AAAwD;IAC/F,IAAMC,cAAc,GAAGJ,MAAM,CAACK,MAAM,KAAK,CAAC,AAAC;IAC3C,IAAMC,UAAU,GAAG,SAACC,KAAa;QAAK,OAAA,WAAM;YACxCL,MAAM,CAACK,KAAK,CAAC,CAAC;YACdpB,YAAY,aAAZA,YAAY,WAAS,GAArBA,KAAAA,CAAqB,GAArBA,YAAY,CAAGoB,KAAK,CAAC,CAAC;QAC1B,CAAC,CAAA;KAAA,AAAC;IAEF,IAAMC,KAAK,GAAGR,MAAM,CAACS,GAAG,CAAC,SAACC,IAAI,EAAEH,KAAK;6BACjC,KAAClC,cAAc;YAEXM,QAAQ,EAAEA,QAAQ;YAClBH,SAAS,EAAEA,SAAS;YACpB+B,KAAK,EAAEA,KAAK;YACZI,QAAQ,EAAEL,UAAU,CAACC,KAAK,CAAC;YAC3Bd,MAAM,EAAEA,MAAM;YACdmB,SAAS,EAAE,CAAE/B,CAAAA,QAAQ,IAAIuB,cAAc,CAAA,AAAC;sBAEvChB,QAAQ,CAACsB,IAAI,EAAEH,KAAK,CAAC;WARjBA,KAAK,CASG;KACpB,CAAC,AAAC;QAEgBjB,IAAkB;IAArC,IAAMuB,UAAU,GAAGvB,CAAAA,IAAkB,GAAlBA,QAAQ,aAARA,QAAQ,WAAU,GAAlBA,KAAAA,CAAkB,GAAlBA,QAAQ,CAAGU,MAAM,CAAC,cAAlBV,IAAkB,cAAlBA,IAAkB,GAAI,IAAI,AAAC;IAE9C,IAAMwB,UAAU,GAAGnC,QAAQ,GAAG,IAAI,iBAC9B,KAACd,KAAK;kBACF,cAAA,KAACE,OAAO;YAACgD,KAAK,EAAErC,kBAAkB;YAAEC,QAAQ,EAAEkC,UAAU;sBACpD,cAAA,KAAClD,GAAG;0BACA,cAAA,KAACC,MAAM;oBACHoD,OAAO,EAAC,QAAQ;oBAChBC,QAAQ,gBAAE,KAACvD,WAAW;wBAACwD,MAAM,EAAE,EAAE;sBAAI;oBACrCC,OAAO,EAAE;+BAAMlB,MAAM,CAACZ,OAAO,CAAC;qBAAA;oBAC9BV,QAAQ,EAAE,CAACkC,UAAU;8BAEpBpC,QAAQ;kBACJ;cACP;UACA;MACN,AACX,AAAC;IAEF,qBACI,KAACP,eAAe;QACZkD,SAAS,EAAE;gBAAEC,WAAW,SAAXA,WAAW,EAAEC,MAAM,SAANA,MAAM;YAAMnB,OAAAA,OAAO,CAAC;gBAACoB,IAAI,EAAED,MAAM,CAACf,KAAK;gBAAEiB,EAAE,EAAEH,CAAAA,WAAW,aAAXA,WAAW,WAAO,GAAlBA,KAAAA,CAAkB,GAAlBA,WAAW,CAAEd,KAAK,CAAA,IAAI,CAAC;aAAC,CAAC,CAAA;SAAA;kBAEhG,cAAA,KAACpC,SAAS;YAACsD,SAAS,EAAC,UAAU;YAACC,WAAW,EAAE3B,YAAY;sBACpD,SAAC4B,QAAQ;qCACN,KAAChE,GAAG,8EACIgE,QAAQ,CAACC,cAAc;oBAC3BC,GAAG,EAAEF,QAAQ,CAACG,QAAQ;oBACtBtC,SAAS,EAAEM,EAAE,CAACD,OAAO,CAACkC,IAAI,EAAEvC,SAAS,CAAC;oBAClCG,MAAM;8BAEV,cAAA,MAAC7B,KAAK;wBAACc,OAAO,EAAEA,OAAO;;4BAClB4B,KAAK;4BACLmB,QAAQ,CAACK,WAAW;4BACpBlB,UAAU;;sBACP;mBACN;aACT;UACO;MACE,CACpB;AACN,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -25,6 +25,7 @@ interface CollectionProps<T> extends DefaultProps<Selectors<typeof useStyles>> {
|
|
|
25
25
|
value?: T[];
|
|
26
26
|
onFocus?: () => void;
|
|
27
27
|
onChange?: (value: T[]) => void;
|
|
28
|
+
onRemoveItem?: (itemIndex: number) => void;
|
|
28
29
|
draggable?: boolean;
|
|
29
30
|
disabled?: boolean;
|
|
30
31
|
allowAdd?: (values: T[]) => boolean;
|
|
@@ -48,6 +49,7 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
|
|
|
48
49
|
value,
|
|
49
50
|
defaultValue,
|
|
50
51
|
onChange,
|
|
52
|
+
onRemoveItem,
|
|
51
53
|
disabled,
|
|
52
54
|
draggable,
|
|
53
55
|
children,
|
|
@@ -71,13 +73,18 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
|
|
|
71
73
|
|
|
72
74
|
const [values, {append, remove, reorder}] = useControlledList({value, onChange, defaultValue});
|
|
73
75
|
const hasOnlyOneItem = values.length === 1;
|
|
76
|
+
const removeItem = (index: number) => () => {
|
|
77
|
+
remove(index);
|
|
78
|
+
onRemoveItem?.(index);
|
|
79
|
+
};
|
|
80
|
+
|
|
74
81
|
const items = values.map((item, index) => (
|
|
75
82
|
<CollectionItem
|
|
76
83
|
key={index}
|
|
77
84
|
disabled={disabled}
|
|
78
85
|
draggable={draggable}
|
|
79
86
|
index={index}
|
|
80
|
-
onRemove={(
|
|
87
|
+
onRemove={removeItem(index)}
|
|
81
88
|
styles={styles}
|
|
82
89
|
removable={!(required && hasOnlyOneItem)}
|
|
83
90
|
>
|
|
@@ -51,6 +51,33 @@ describe('Collection', () => {
|
|
|
51
51
|
expect(screen.getByTestId('form-state')).toHaveTextContent('{"fruits":["orange"]}');
|
|
52
52
|
});
|
|
53
53
|
|
|
54
|
+
it('calls the onRemoveItem function when clicking on a remove button', async () => {
|
|
55
|
+
const onRemoveItemSpy = jest.fn();
|
|
56
|
+
const Fixture = () => {
|
|
57
|
+
const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
|
|
58
|
+
return (
|
|
59
|
+
<Collection newItem="" {...form.getInputProps('fruits')} onRemoveItem={onRemoveItemSpy}>
|
|
60
|
+
{(name) => <span data-testid="item">{name}</span>}
|
|
61
|
+
</Collection>
|
|
62
|
+
);
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
render(<Fixture />);
|
|
66
|
+
let items = screen.getAllByTestId('item');
|
|
67
|
+
expect(items).toHaveLength(2);
|
|
68
|
+
/* eslint-disable-next-line testing-library/no-node-access */
|
|
69
|
+
const removeOrange = await within(items[1].parentElement).findByRole('button', {name: /remove/i});
|
|
70
|
+
userEvent.click(removeOrange);
|
|
71
|
+
|
|
72
|
+
expect(onRemoveItemSpy).toHaveBeenCalledWith(1);
|
|
73
|
+
|
|
74
|
+
items = screen.getAllByTestId('item');
|
|
75
|
+
const removeBanana = await within(items[0].parentElement).findByRole('button', {name: /remove/i});
|
|
76
|
+
userEvent.click(removeBanana);
|
|
77
|
+
|
|
78
|
+
expect(onRemoveItemSpy).toHaveBeenCalledWith(0);
|
|
79
|
+
});
|
|
80
|
+
|
|
54
81
|
it('does not render the remove button when disabled', async () => {
|
|
55
82
|
const Fixture = () => {
|
|
56
83
|
const [disabled, setDisabled] = useState(false);
|