{"version":3,"file":"DragDropList.stories.jsx","sourceRoot":"","sources":["../../../src/dnd/DragDropList/DragDropList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAGvE,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EACL,mBAAmB,EACnB,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,cAAc,EACd,cAAc,EACd,IAAI,EACL,MAAM,sBAAsB,CAAC;AAE9B,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,YAAY;IACvB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAOV,MAAM,CAAC,MAAM,gBAAgB,GAAmC,CAAC,IAA2B,EAAE,EAAE;IAC9F,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;IACrD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;IAErD,OAAO,CACL,EACE;MAAA,CAAC,MAAM,CACL,OAAO,CAAC,CAAC,WAAW,CAAC,GAAG,EAAE;YACxB,SAAS,CAAC,KAAK,CAAC,EAAE;gBAChB,OAAO,CAAC,GAAG,KAAK,EAAE,GAAG,mBAAmB,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;YAClE,CAAC,CAAC,CAAC;QACL,CAAC,EAAE,EAAE,CAAC,CAAC,CAEP;;MACF,EAAE,MAAM,CACR;MAAA,CAAC,MAAM,CACL,OAAO,CAAC,CAAC,WAAW,CAAC,GAAG,EAAE;YACxB,SAAS,CAAC,KAAK,CAAC,EAAE;gBAChB,OAAO,CAAC,GAAG,KAAK,EAAE,GAAG,mBAAmB,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;YAClE,CAAC,CAAC,CAAC;QACL,CAAC,EAAE,EAAE,CAAC,CAAC,CAEP;;MACF,EAAE,MAAM,CACR;MAAA,CAAC,eAAe,CACd;QAAA,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAC5C;UAAA,CAAC,YAAY,CACX,EAAE,CAAC,CAAC,sBAAsB,CAAC,CAC3B,EAAE,CAAC,OAAO,CACV,MAAM,CAAC,CAAC,QAAQ,CAAC,CACjB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAC1D,KAAK,CAAC,CAAC,MAAM,CAAC,CACd,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,aAAa,CAAC,CAAC,SAAS,CAAC,CACzB,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAE;YACnB,SAAS,CAAC,QAAQ,CAAC,CAAC;YACpB,MAAM,CAAC,gBAAgB,CAAC,CAAC,QAAQ,CAAC,CAAC;QACrC,CAAC,CAAC,CACF,KAAK,CAAC,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC,EAGrC;;UAAA,CAAC,YAAY,CACX,EAAE,CAAC,CAAC,sBAAsB,CAAC,CAC3B,EAAE,CAAC,OAAO,CACV,MAAM,CAAC,CAAC,QAAQ,CAAC,CACjB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAC1D,KAAK,CAAC,CAAC,MAAM,CAAC,CACd,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,aAAa,CAAC,CAAC,SAAS,CAAC,CACzB,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAE;YACnB,SAAS,CAAC,QAAQ,CAAC,CAAC;YACpB,MAAM,CAAC,gBAAgB,CAAC,CAAC,QAAQ,CAAC,CAAC;QACrC,CAAC,CAAC,CACF,KAAK,CAAC,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC,EAEvC;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,eAAe,CACnB;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,QAAQ;CACnB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACvE,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC5F,CAAC","sourcesContent":["import { useCallback, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { Button, Flex } from '@pega/cosmos-react-core';\nimport { DragDropManager, DragDropList } from '@pega/cosmos-react-dnd';\nimport type { DragDropListProps } from '@pega/cosmos-react-dnd';\n\nimport { StyledDemoDragDropList } from './DragDropList.styles';\nimport {\n  createMockDataArray,\n  DemoListItem,\n  EmptyItem,\n  itemType,\n  mockDataArrayA,\n  mockDataArrayB,\n  sort\n} from './DragDropList.mocks';\n\nexport default {\n  title: 'DnD/DragDropList',\n  component: DragDropList,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface DragDropListDemoProps {\n  pullMode?: DragDropListProps['pullMode'];\n  pushMode?: DragDropListProps['pushMode'] | 'sort';\n}\n\nexport const DragDropListDemo: StoryFn<DragDropListDemoProps> = (args: DragDropListDemoProps) => {\n  const [arrayA, setArrayA] = useState(mockDataArrayA);\n  const [arrayB, setArrayB] = useState(mockDataArrayB);\n\n  return (\n    <>\n      <Button\n        onClick={useCallback(() => {\n          setArrayA(items => {\n            return [...items, ...createMockDataArray(1, itemType, 'A-new')];\n          });\n        }, [])}\n      >\n        Add to List A\n      </Button>\n      <Button\n        onClick={useCallback(() => {\n          setArrayB(items => {\n            return [...items, ...createMockDataArray(1, itemType, 'B-new')];\n          });\n        }, [])}\n      >\n        Add to List B\n      </Button>\n      <DragDropManager>\n        <Flex container style={{ minHeight: '100vh' }}>\n          <DragDropList\n            as={StyledDemoDragDropList}\n            id='list1'\n            accept={itemType}\n            pullMode={args.pullMode}\n            pushMode={args.pushMode === 'sort' ? sort : args.pushMode}\n            items={arrayA}\n            itemRenderer={DemoListItem}\n            emptyRenderer={EmptyItem}\n            onChange={newArray => {\n              setArrayA(newArray);\n              action('List A changed')(newArray);\n            }}\n            style={{ background: 'palegreen' }}\n          />\n\n          <DragDropList\n            as={StyledDemoDragDropList}\n            id='list2'\n            accept={itemType}\n            pullMode={args.pullMode}\n            pushMode={args.pushMode === 'sort' ? sort : args.pushMode}\n            items={arrayB}\n            itemRenderer={DemoListItem}\n            emptyRenderer={EmptyItem}\n            onChange={newArray => {\n              setArrayB(newArray);\n              action('List B changed')(newArray);\n            }}\n            style={{ background: 'lightblue' }}\n          />\n        </Flex>\n      </DragDropManager>\n    </>\n  );\n};\n\nDragDropListDemo.args = {\n  pullMode: 'remove',\n  pushMode: 'insert'\n};\n\nDragDropListDemo.argTypes = {\n  pullMode: { options: ['remove', 'clone'], control: { type: 'select' } },\n  pushMode: { options: ['insert', 'prepend', 'append', 'sort'], control: { type: 'select' } }\n};\n"]}