@coveord/plasma-mantine 47.5.0 → 47.6.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 +7 -7
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/components/collection/Collection.js +6 -7
- 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 +6 -7
- package/dist/esm/components/collection/Collection.js.map +1 -1
- package/package.json +1 -1
- package/src/components/collection/Collection.tsx +5 -4
- package/src/components/collection/__tests__/Collection.spec.tsx +10 -6
|
@@ -30,12 +30,11 @@ 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,
|
|
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
|
|
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
|
-
"onFocus",
|
|
39
38
|
"disabled",
|
|
40
39
|
"draggable",
|
|
41
40
|
"children",
|
|
@@ -44,6 +43,7 @@ var Collection = function(props) {
|
|
|
44
43
|
"newItem",
|
|
45
44
|
"addLabel",
|
|
46
45
|
"addDisabledTooltip",
|
|
46
|
+
"allowAdd",
|
|
47
47
|
"classNames",
|
|
48
48
|
"className",
|
|
49
49
|
"styles",
|
|
@@ -75,13 +75,12 @@ var Collection = function(props) {
|
|
|
75
75
|
children: children(item, index)
|
|
76
76
|
}, index);
|
|
77
77
|
});
|
|
78
|
-
var
|
|
79
|
-
|
|
80
|
-
});
|
|
78
|
+
var ref3;
|
|
79
|
+
var addAllowed = (ref3 = allowAdd === null || allowAdd === void 0 ? void 0 : allowAdd(values)) !== null && ref3 !== void 0 ? ref3 : true;
|
|
81
80
|
var _addButton = disabled ? null : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Group, {
|
|
82
81
|
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Tooltip, {
|
|
83
82
|
label: addDisabledTooltip,
|
|
84
|
-
disabled:
|
|
83
|
+
disabled: addAllowed,
|
|
85
84
|
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Box, {
|
|
86
85
|
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Button, {
|
|
87
86
|
variant: "subtle",
|
|
@@ -91,7 +90,7 @@ var Collection = function(props) {
|
|
|
91
90
|
onClick: function() {
|
|
92
91
|
return append(newItem);
|
|
93
92
|
},
|
|
94
|
-
disabled:
|
|
93
|
+
disabled: !addAllowed,
|
|
95
94
|
children: addLabel
|
|
96
95
|
})
|
|
97
96
|
})
|
|
@@ -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 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
|
|
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={() => remove(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","children","newItem","allowAdd","classNames","className","styles","unstyled","others","useStyles","name","classes","cx","collectionID","useId","useControlledList","values","append","remove","reorder","hasOnlyOneItem","length","items","map","item","index","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":"AAAA;;;;+BA6CaA,YAAU;;;eAAVA,UAAU;;;;;;;;;gCA7CG,6BAA6B;oBAWhD,eAAe;qBACF,gBAAgB;iCAEK,qBAAqB;sBAE9B,aAAa;8BAChB,kBAAkB;sEACzB,sBAAsB;AAkB5C,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;AAEK,IAAMP,UAAU,GAAG,SAAKQ,KAAyB,EAAK;IACzD,IAqBIC,IAAiF,GAAjFA,IAAAA,KAAwB,yBAAA,EAAC,YAAY,EAAER,YAAY,EAAwBO,KAAK,CAAC,EApBjFE,KAAK,GAoBLD,IAAiF,CApBjFC,KAAK,EACLC,YAAY,GAmBZF,IAAiF,CAnBjFE,YAAY,EACZC,QAAQ,GAkBRH,IAAiF,CAlBjFG,QAAQ,EACRP,QAAQ,GAiBRI,IAAiF,CAjBjFJ,QAAQ,EACRH,SAAS,GAgBTO,IAAiF,CAhBjFP,SAAS,EACTW,QAAQ,GAeRJ,IAAiF,CAfjFI,QAAQ,EACRP,OAAO,GAcPG,IAAiF,CAdjFH,OAAO,EACPC,QAAQ,GAaRE,IAAiF,CAbjFF,QAAQ,EACRO,OAAO,GAYPL,IAAiF,CAZjFK,OAAO,EACPX,QAAQ,GAWRM,IAAiF,CAXjFN,QAAQ,EACRC,kBAAkB,GAUlBK,IAAiF,CAVjFL,kBAAkB,EAClBW,QAAQ,GASRN,IAAiF,CATjFM,QAAQ,EAER,cAAc;IACdC,UAAU,GAMVP,IAAiF,CANjFO,UAAU,EACVC,SAAS,GAKTR,IAAiF,CALjFQ,SAAS,EACTC,MAAM,GAINT,IAAiF,CAJjFS,MAAM,EACNC,QAAQ,GAGRV,IAAiF,CAHjFU,QAAQ,EAELC,MAAM,4BACTX,IAAiF;QApBjFC,OAAK;QACLC,cAAY;QACZC,UAAQ;QACRP,UAAQ;QACRH,WAAS;QACTW,UAAQ;QACRP,SAAO;QACPC,UAAQ;QACRO,SAAO;QACPX,UAAQ;QACRC,oBAAkB;QAClBW,UAAQ;QAGRC,YAAU;QACVC,WAAS;QACTC,QAAM;QACNC,UAAQ;MAG0E;IACtF,IAAsBE,GAAmE,GAAnEA,IAAAA,kBAAS,QAAA,EAAC,IAAI,EAAE;QAACL,UAAU,EAAVA,UAAU;QAAEM,IAAI,EAAE,YAAY;QAAEJ,MAAM,EAANA,MAAM;QAAEC,QAAQ,EAARA,QAAQ;KAAC,CAAC,EAAlFI,OAAO,GAAQF,GAAmE,CAAlFE,OAAO,EAAEC,EAAE,GAAIH,GAAmE,CAAzEG,EAAE,AAAwE;IAC1F,IAAMC,YAAY,GAAGC,IAAAA,MAAK,MAAA,EAAC,eAAe,CAAC,AAAC;IAE5C,IAA4CC,IAAkD,kBAAlDA,IAAAA,OAAiB,kBAAA,EAAC;QAACjB,KAAK,EAALA,KAAK;QAAEE,QAAQ,EAARA,QAAQ;QAAED,YAAY,EAAZA,YAAY;KAAC,CAAC,IAAA,EAAvFiB,MAAM,GAA+BD,IAAkD,GAAjF,SAA+BA,IAAkD,KAA9EE,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,KAAK,GAAGN,MAAM,CAACO,GAAG,CAAC,SAACC,IAAI,EAAEC,KAAK;6BACjC,qBAACC,eAAc,eAAA;YAEXjC,QAAQ,EAAEA,QAAQ;YAClBH,SAAS,EAAEA,SAAS;YACpBmC,KAAK,EAAEA,KAAK;YACZE,QAAQ,EAAE;uBAAMT,MAAM,CAACO,KAAK,CAAC;aAAA;YAC7BnB,MAAM,EAAEA,MAAM;YACdsB,SAAS,EAAE,CAAEjC,CAAAA,QAAQ,IAAIyB,cAAc,CAAA,AAAC;sBAEvCnB,QAAQ,CAACuB,IAAI,EAAEC,KAAK,CAAC;WARjBA,KAAK,CASG;KACpB,CAAC,AAAC;QAEgBtB,IAAkB;IAArC,IAAM0B,UAAU,GAAG1B,CAAAA,IAAkB,GAAlBA,QAAQ,aAARA,QAAQ,WAAU,GAAlBA,KAAAA,CAAkB,GAAlBA,QAAQ,CAAGa,MAAM,CAAC,cAAlBb,IAAkB,cAAlBA,IAAkB,GAAI,IAAI,AAAC;IAE9C,IAAM2B,UAAU,GAAGrC,QAAQ,GAAG,IAAI,iBAC9B,qBAACsC,KAAK,MAAA;kBACF,cAAA,qBAACC,KAAO,QAAA;YAACC,KAAK,EAAEzC,kBAAkB;YAAEC,QAAQ,EAAEoC,UAAU;sBACpD,cAAA,qBAACK,KAAG,IAAA;0BACA,cAAA,qBAACC,KAAM,OAAA;oBACHC,OAAO,EAAC,QAAQ;oBAChBC,QAAQ,gBAAE,qBAACC,iBAAW,YAAA;wBAACC,MAAM,EAAE,EAAE;sBAAI;oBACrCC,OAAO,EAAE;+BAAMvB,MAAM,CAACf,OAAO,CAAC;qBAAA;oBAC9BT,QAAQ,EAAE,CAACoC,UAAU;8BAEpBtC,QAAQ;kBACJ;cACP;UACA;MACN,AACX,AAAC;IAEF,qBACI,qBAACkD,kBAAe,gBAAA;QACZC,SAAS,EAAE;gBAAEC,WAAW,SAAXA,WAAW,EAAEC,MAAM,SAANA,MAAM;YAAMzB,OAAAA,OAAO,CAAC;gBAAC0B,IAAI,EAAED,MAAM,CAACnB,KAAK;gBAAEqB,EAAE,EAAEH,CAAAA,WAAW,aAAXA,WAAW,WAAO,GAAlBA,KAAAA,CAAkB,GAAlBA,WAAW,CAAElB,KAAK,CAAA,IAAI,CAAC;aAAC,CAAC,CAAA;SAAA;kBAEhG,cAAA,qBAACsB,kBAAS,UAAA;YAACC,SAAS,EAAC,UAAU;YAACC,WAAW,EAAEpC,YAAY;sBACpD,SAACqC,QAAQ;qCACN,qBAAChB,KAAG,IAAA,wEACIgB,QAAQ,CAACC,cAAc;oBAC3BC,GAAG,EAAEF,QAAQ,CAACG,QAAQ;oBACtBhD,SAAS,EAAEO,EAAE,CAACD,OAAO,CAAC2C,IAAI,EAAEjD,SAAS,CAAC;oBAClCG,MAAM;8BAEV,cAAA,sBAAC+C,KAAK,MAAA;wBAAC7D,OAAO,EAAEA,OAAO;;4BAClB4B,KAAK;4BACL4B,QAAQ,CAACM,WAAW;4BACpB1B,UAAU;;sBACP;mBACN;aACT;UACO;MACE,CACpB;AACN,CAAC,AAAC"}
|
|
@@ -10,6 +10,7 @@ interface CollectionProps<T> extends DefaultProps<Selectors<typeof useStyles>> {
|
|
|
10
10
|
onChange?: (value: T[]) => void;
|
|
11
11
|
draggable?: boolean;
|
|
12
12
|
disabled?: boolean;
|
|
13
|
+
allowAdd?: (values: T[]) => boolean;
|
|
13
14
|
addLabel?: string;
|
|
14
15
|
addDisabledTooltip?: string;
|
|
15
16
|
spacing?: MantineNumberSize;
|
|
@@ -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,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,+CAmFtB,CAAC"}
|
|
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,+CAmFtB,CAAC"}
|
|
@@ -19,12 +19,11 @@ 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,
|
|
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
|
|
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
|
-
"onFocus",
|
|
28
27
|
"disabled",
|
|
29
28
|
"draggable",
|
|
30
29
|
"children",
|
|
@@ -33,6 +32,7 @@ export var Collection = function(props) {
|
|
|
33
32
|
"newItem",
|
|
34
33
|
"addLabel",
|
|
35
34
|
"addDisabledTooltip",
|
|
35
|
+
"allowAdd",
|
|
36
36
|
"classNames",
|
|
37
37
|
"className",
|
|
38
38
|
"styles",
|
|
@@ -64,13 +64,12 @@ export var Collection = function(props) {
|
|
|
64
64
|
children: children(item, index)
|
|
65
65
|
}, index);
|
|
66
66
|
});
|
|
67
|
-
var
|
|
68
|
-
|
|
69
|
-
});
|
|
67
|
+
var ref3;
|
|
68
|
+
var addAllowed = (ref3 = allowAdd === null || allowAdd === void 0 ? void 0 : allowAdd(values)) !== null && ref3 !== void 0 ? ref3 : true;
|
|
70
69
|
var _addButton = disabled ? null : /*#__PURE__*/ _jsx(Group, {
|
|
71
70
|
children: /*#__PURE__*/ _jsx(Tooltip, {
|
|
72
71
|
label: addDisabledTooltip,
|
|
73
|
-
disabled:
|
|
72
|
+
disabled: addAllowed,
|
|
74
73
|
children: /*#__PURE__*/ _jsx(Box, {
|
|
75
74
|
children: /*#__PURE__*/ _jsx(Button, {
|
|
76
75
|
variant: "subtle",
|
|
@@ -80,7 +79,7 @@ export var Collection = function(props) {
|
|
|
80
79
|
onClick: function() {
|
|
81
80
|
return append(newItem);
|
|
82
81
|
},
|
|
83
|
-
disabled:
|
|
82
|
+
disabled: !addAllowed,
|
|
84
83
|
children: addLabel
|
|
85
84
|
})
|
|
86
85
|
})
|
|
@@ -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 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
|
|
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={() => remove(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","children","newItem","allowAdd","classNames","className","styles","unstyled","others","name","classes","cx","collectionID","values","append","remove","reorder","hasOnlyOneItem","length","items","map","item","index","onRemove","removable","addAllowed","_addButton","label","variant","leftIcon","height","onClick","onDragEnd","destination","source","from","to","direction","droppableId","provided","droppableProps","ref","innerRef","root","placeholder"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -27,6 +27,7 @@ interface CollectionProps<T> extends DefaultProps<Selectors<typeof useStyles>> {
|
|
|
27
27
|
onChange?: (value: T[]) => void;
|
|
28
28
|
draggable?: boolean;
|
|
29
29
|
disabled?: boolean;
|
|
30
|
+
allowAdd?: (values: T[]) => boolean;
|
|
30
31
|
addLabel?: string;
|
|
31
32
|
addDisabledTooltip?: string;
|
|
32
33
|
spacing?: MantineNumberSize;
|
|
@@ -47,7 +48,6 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
|
|
|
47
48
|
value,
|
|
48
49
|
defaultValue,
|
|
49
50
|
onChange,
|
|
50
|
-
onFocus,
|
|
51
51
|
disabled,
|
|
52
52
|
draggable,
|
|
53
53
|
children,
|
|
@@ -56,6 +56,7 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
|
|
|
56
56
|
newItem,
|
|
57
57
|
addLabel,
|
|
58
58
|
addDisabledTooltip,
|
|
59
|
+
allowAdd,
|
|
59
60
|
|
|
60
61
|
// Style props
|
|
61
62
|
classNames,
|
|
@@ -84,17 +85,17 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
|
|
|
84
85
|
</CollectionItem>
|
|
85
86
|
));
|
|
86
87
|
|
|
87
|
-
const
|
|
88
|
+
const addAllowed = allowAdd?.(values) ?? true;
|
|
88
89
|
|
|
89
90
|
const _addButton = disabled ? null : (
|
|
90
91
|
<Group>
|
|
91
|
-
<Tooltip label={addDisabledTooltip} disabled={
|
|
92
|
+
<Tooltip label={addDisabledTooltip} disabled={addAllowed}>
|
|
92
93
|
<Box>
|
|
93
94
|
<Button
|
|
94
95
|
variant="subtle"
|
|
95
96
|
leftIcon={<AddSize16Px height={16} />}
|
|
96
97
|
onClick={() => append(newItem)}
|
|
97
|
-
disabled={
|
|
98
|
+
disabled={!addAllowed}
|
|
98
99
|
>
|
|
99
100
|
{addLabel}
|
|
100
101
|
</Button>
|
|
@@ -96,12 +96,13 @@ describe('Collection', () => {
|
|
|
96
96
|
expect(screen.getByTestId('form-state')).toHaveTextContent('{"fruits":["banana","orange","new"]}');
|
|
97
97
|
});
|
|
98
98
|
|
|
99
|
-
it('
|
|
99
|
+
it('disables the add button whenever allowAdd callback returns false', () => {
|
|
100
|
+
const allowAdd = jest.fn().mockImplementation(() => false);
|
|
100
101
|
const Fixture = () => {
|
|
101
102
|
const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
|
|
102
103
|
return (
|
|
103
104
|
<>
|
|
104
|
-
<Collection newItem="new" {...form.getInputProps('fruits')}>
|
|
105
|
+
<Collection newItem="new" {...form.getInputProps('fruits')} allowAdd={allowAdd}>
|
|
105
106
|
{(name) => <span data-testid="item">{name}</span>}
|
|
106
107
|
</Collection>
|
|
107
108
|
<div data-testid="form-state">{JSON.stringify(form.values)}</div>
|
|
@@ -109,10 +110,13 @@ describe('Collection', () => {
|
|
|
109
110
|
);
|
|
110
111
|
};
|
|
111
112
|
|
|
112
|
-
render(<Fixture />);
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
113
|
+
const {rerender} = render(<Fixture />);
|
|
114
|
+
expect(screen.getByRole('button', {name: /add/i})).toBeDisabled();
|
|
115
|
+
expect(allowAdd).toHaveBeenCalledWith(['banana', 'orange']);
|
|
116
|
+
|
|
117
|
+
allowAdd.mockImplementation(() => true);
|
|
118
|
+
rerender(<Fixture />);
|
|
119
|
+
expect(screen.getByRole('button', {name: /add/i})).toBeEnabled();
|
|
116
120
|
});
|
|
117
121
|
|
|
118
122
|
describe('when required is true', () => {
|