@pie-lib/drag 2.0.5-next.0 → 2.0.5

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/CHANGELOG.md CHANGED
@@ -3,6 +3,18 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [2.0.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.0.4...@pie-lib/drag@2.0.5) (2023-01-03)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **drag:** fix drop for match-list ([728203d](https://github.com/pie-framework/pie-lib/commit/728203d8014ce83b843b2695bf969c4fc53eb381))
12
+ * **drag:** fix drop function for drag-in-the-blank element ([b491299](https://github.com/pie-framework/pie-lib/commit/b4912998d920c7e085dc9c9eb4e70c432cb7eb1c))
13
+
14
+
15
+
16
+
17
+
6
18
  ## [2.0.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.0.3...@pie-lib/drag@2.0.4) (2022-12-19)
7
19
 
8
20
 
@@ -0,0 +1,103 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.spec = exports["default"] = void 0;
9
+
10
+ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
11
+
12
+ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
13
+
14
+ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
15
+
16
+ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
17
+
18
+ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
19
+
20
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
21
+
22
+ var _react = _interopRequireDefault(require("react"));
23
+
24
+ var _placeholder = _interopRequireDefault(require("./placeholder"));
25
+
26
+ var _propTypes = _interopRequireDefault(require("prop-types"));
27
+
28
+ var _reactDnd = require("react-dnd");
29
+
30
+ var _window$demo, _window$demo$markup;
31
+
32
+ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
33
+
34
+ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
35
+
36
+ var DRAG_TYPE = (_window$demo = window.demo) !== null && _window$demo !== void 0 && (_window$demo$markup = _window$demo.markup) !== null && _window$demo$markup !== void 0 && _window$demo$markup.includes('match-list') ? 'Answer' : 'MaskBlank';
37
+
38
+ var DroppablePlaceholder = /*#__PURE__*/function (_React$Component) {
39
+ (0, _inherits2["default"])(DroppablePlaceholder, _React$Component);
40
+
41
+ var _super = _createSuper(DroppablePlaceholder);
42
+
43
+ function DroppablePlaceholder() {
44
+ (0, _classCallCheck2["default"])(this, DroppablePlaceholder);
45
+ return _super.apply(this, arguments);
46
+ }
47
+
48
+ (0, _createClass2["default"])(DroppablePlaceholder, [{
49
+ key: "render",
50
+ value: function render() {
51
+ var _this$props = this.props,
52
+ children = _this$props.children,
53
+ connectDropTarget = _this$props.connectDropTarget,
54
+ isOver = _this$props.isOver,
55
+ disabled = _this$props.disabled,
56
+ classes = _this$props.classes;
57
+ return connectDropTarget( /*#__PURE__*/_react["default"].createElement("div", {
58
+ style: {
59
+ flex: 1
60
+ }
61
+ }, /*#__PURE__*/_react["default"].createElement(_placeholder["default"], {
62
+ disabled: disabled,
63
+ isOver: isOver,
64
+ choiceBoard: true,
65
+ className: classes
66
+ }, children)));
67
+ }
68
+ }]);
69
+ return DroppablePlaceholder;
70
+ }(_react["default"].Component);
71
+
72
+ (0, _defineProperty2["default"])(DroppablePlaceholder, "propTypes", {
73
+ connectDropTarget: _propTypes["default"].func.isRequired,
74
+ isOver: _propTypes["default"].bool,
75
+ children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
76
+ disabled: _propTypes["default"].bool
77
+ });
78
+ var spec = {
79
+ canDrop: function canDrop(props) {
80
+ return !props.disabled;
81
+ },
82
+ drop: function drop(props, monitor) {
83
+ var item = monitor.getItem();
84
+
85
+ if (DRAG_TYPE === 'Answer') {
86
+ props.onRemoveAnswer(item.promptId);
87
+ } else if (item.id) {
88
+ return {
89
+ dropped: true
90
+ };
91
+ }
92
+ }
93
+ };
94
+ exports.spec = spec;
95
+ var WithTarget = (0, _reactDnd.DropTarget)(DRAG_TYPE, spec, function (connect, monitor) {
96
+ return {
97
+ connectDropTarget: connect.dropTarget(),
98
+ isOver: monitor.isOver()
99
+ };
100
+ })(DroppablePlaceholder);
101
+ var _default = WithTarget;
102
+ exports["default"] = _default;
103
+ //# sourceMappingURL=droppable-placeholder.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/droppable-placeholder.jsx"],"names":["DRAG_TYPE","window","demo","markup","includes","DroppablePlaceholder","props","children","connectDropTarget","isOver","disabled","classes","flex","React","Component","PropTypes","func","isRequired","bool","oneOfType","arrayOf","node","spec","canDrop","drop","monitor","item","getItem","onRemoveAnswer","promptId","id","dropped","WithTarget","connect","dropTarget"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAEA,IAAMA,SAAS,GAAG,gBAAAC,MAAM,CAACC,IAAP,6EAAaC,MAAb,oEAAqBC,QAArB,CAA8B,YAA9B,IAA8C,QAA9C,GAAyD,WAA3E;;IAEMC,oB;;;;;;;;;;;;WAQJ,kBAAS;AACP,wBAAmE,KAAKC,KAAxE;AAAA,UAAQC,QAAR,eAAQA,QAAR;AAAA,UAAkBC,iBAAlB,eAAkBA,iBAAlB;AAAA,UAAqCC,MAArC,eAAqCA,MAArC;AAAA,UAA6CC,QAA7C,eAA6CA,QAA7C;AAAA,UAAuDC,OAAvD,eAAuDA,OAAvD;AAEA,aAAOH,iBAAiB,eACtB;AAAK,QAAA,KAAK,EAAE;AAAEI,UAAAA,IAAI,EAAE;AAAR;AAAZ,sBACE,gCAAC,uBAAD;AAAa,QAAA,QAAQ,EAAEF,QAAvB;AAAiC,QAAA,MAAM,EAAED,MAAzC;AAAiD,QAAA,WAAW,EAAE,IAA9D;AAAoE,QAAA,SAAS,EAAEE;AAA/E,SACGJ,QADH,CADF,CADsB,CAAxB;AAOD;;;EAlBgCM,kBAAMC,S;;iCAAnCT,oB,eACe;AACjBG,EAAAA,iBAAiB,EAAEO,sBAAUC,IAAV,CAAeC,UADjB;AAEjBR,EAAAA,MAAM,EAAEM,sBAAUG,IAFD;AAGjBX,EAAAA,QAAQ,EAAEQ,sBAAUI,SAAV,CAAoB,CAACJ,sBAAUK,OAAV,CAAkBL,sBAAUM,IAA5B,CAAD,EAAoCN,sBAAUM,IAA9C,CAApB,EAAyEJ,UAHlE;AAIjBP,EAAAA,QAAQ,EAAEK,sBAAUG;AAJH,C;AAoBd,IAAMI,IAAI,GAAG;AAClBC,EAAAA,OAAO,EAAE,iBAACjB,KAAD,EAAW;AAClB,WAAO,CAACA,KAAK,CAACI,QAAd;AACD,GAHiB;AAIlBc,EAAAA,IAAI,EAAE,cAAClB,KAAD,EAAQmB,OAAR,EAAoB;AACxB,QAAMC,IAAI,GAAGD,OAAO,CAACE,OAAR,EAAb;;AAEA,QAAI3B,SAAS,KAAK,QAAlB,EAA4B;AAC1BM,MAAAA,KAAK,CAACsB,cAAN,CAAqBF,IAAI,CAACG,QAA1B;AACD,KAFD,MAEO,IAAIH,IAAI,CAACI,EAAT,EAAa;AAClB,aAAO;AACLC,QAAAA,OAAO,EAAE;AADJ,OAAP;AAGD;AACF;AAdiB,CAAb;;AAiBP,IAAMC,UAAU,GAAG,0BAAWhC,SAAX,EAAsBsB,IAAtB,EAA4B,UAACW,OAAD,EAAUR,OAAV;AAAA,SAAuB;AACpEjB,IAAAA,iBAAiB,EAAEyB,OAAO,CAACC,UAAR,EADiD;AAEpEzB,IAAAA,MAAM,EAAEgB,OAAO,CAAChB,MAAR;AAF4D,GAAvB;AAAA,CAA5B,EAGfJ,oBAHe,CAAnB;eAKe2B,U","sourcesContent":["import React from 'react';\nimport PlaceHolder from './placeholder';\nimport PropTypes from 'prop-types';\nimport { DropTarget } from 'react-dnd';\n\nconst DRAG_TYPE = window.demo?.markup?.includes('match-list') ? 'Answer' : 'MaskBlank';\n\nclass DroppablePlaceholder extends React.Component {\n static propTypes = {\n connectDropTarget: PropTypes.func.isRequired,\n isOver: PropTypes.bool,\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n disabled: PropTypes.bool,\n };\n\n render() {\n const { children, connectDropTarget, isOver, disabled, classes } = this.props;\n\n return connectDropTarget(\n <div style={{ flex: 1 }}>\n <PlaceHolder disabled={disabled} isOver={isOver} choiceBoard={true} className={classes}>\n {children}\n </PlaceHolder>\n </div>,\n );\n }\n}\n\nexport const spec = {\n canDrop: (props) => {\n return !props.disabled;\n },\n drop: (props, monitor) => {\n const item = monitor.getItem();\n\n if (DRAG_TYPE === 'Answer') {\n props.onRemoveAnswer(item.promptId);\n } else if (item.id) {\n return {\n dropped: true,\n };\n }\n },\n};\n\nconst WithTarget = DropTarget(DRAG_TYPE, spec, (connect, monitor) => ({\n connectDropTarget: connect.dropTarget(),\n isOver: monitor.isOver(),\n}))(DroppablePlaceholder);\n\nexport default WithTarget;\n"],"file":"droppable-placeholder.js"}
package/lib/index.js CHANGED
@@ -31,6 +31,12 @@ Object.defineProperty(exports, "DropTarget", {
31
31
  return _reactDnd.DropTarget;
32
32
  }
33
33
  });
34
+ Object.defineProperty(exports, "DroppablePlaceholder", {
35
+ enumerable: true,
36
+ get: function get() {
37
+ return _droppablePlaceholder["default"];
38
+ }
39
+ });
34
40
  Object.defineProperty(exports, "PlaceHolder", {
35
41
  enumerable: true,
36
42
  get: function get() {
@@ -55,6 +61,8 @@ var _reactDnd = require("react-dnd");
55
61
 
56
62
  var _placeholder = _interopRequireDefault(require("./placeholder"));
57
63
 
64
+ var _droppablePlaceholder = _interopRequireDefault(require("./droppable-placeholder"));
65
+
58
66
  var _choice = _interopRequireDefault(require("./choice"));
59
67
 
60
68
  var _withDragContext = _interopRequireDefault(require("./with-drag-context"));
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["import { DndProvider, DragSource, DropTarget } from 'react-dnd';\n\nimport PlaceHolder from './placeholder';\nimport Choice from './choice';\nimport withDragContext from './with-drag-context';\nimport swap from './swap';\nimport * as uid from './uid-context';\n\nexport { DndProvider, PlaceHolder, withDragContext, Choice, swap, uid, DragSource, DropTarget };\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["import { DndProvider, DragSource, DropTarget } from 'react-dnd';\n\nimport PlaceHolder from './placeholder';\nimport DroppablePlaceholder from './droppable-placeholder';\nimport Choice from './choice';\nimport withDragContext from './with-drag-context';\nimport swap from './swap';\nimport * as uid from './uid-context';\n\nexport { DndProvider, PlaceHolder, DroppablePlaceholder, withDragContext, Choice, swap, uid, DragSource, DropTarget };\n"],"file":"index.js"}
@@ -85,13 +85,12 @@ var styles = function styles(theme) {
85
85
  },
86
86
  board: {
87
87
  border: '1px solid #D1D1D1',
88
- padding: '4px',
88
+ padding: '10px',
89
89
  display: 'flex',
90
90
  flexWrap: 'wrap',
91
91
  alignItems: 'center',
92
- justifyContent: 'center',
93
- marginLeft: '20px',
94
- minHeight: '200px'
92
+ minHeight: '200px',
93
+ justifyContent: 'space-between'
95
94
  }
96
95
  };
97
96
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/placeholder.jsx"],"names":["PlaceHolder","props","children","classes","className","isOver","type","grid","disabled","choiceBoard","names","placeholder","over","style","columns","gridTemplateColumns","rows","repeatValue","rowsRepeatValue","gridTemplateRows","board","propTypes","PropTypes","object","isRequired","shape","number","string","oneOfType","arrayOf","node","bool","index","styles","theme","width","height","background","border","transition","boxSizing","display","gridRowGap","spacing","unit","gridColumnGap","padding","boxShadow","grey","backgroundColor","flexWrap","alignItems","justifyContent","marginLeft","minHeight"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport grey from '@material-ui/core/colors/grey';\n\nexport const PlaceHolder = (props) => {\n const { children, classes, className, isOver, type, grid, disabled, choiceBoard } = props;\n const names = classNames(\n classes.placeholder,\n disabled && classes.disabled,\n isOver && classes.over,\n classes[type],\n className,\n );\n\n const style = {};\n\n if (grid && grid.columns) {\n style.gridTemplateColumns = `repeat(${grid.columns}, 1fr)`;\n }\n if (grid && grid.rows) {\n const repeatValue = grid.rowsRepeatValue || '1fr';\n\n style.gridTemplateRows = `repeat(${grid.rows}, ${repeatValue})`;\n }\n\n return (\n <div style={style} className={choiceBoard ? classes.board : names}>\n {children}\n </div>\n );\n};\n\nPlaceHolder.propTypes = {\n classes: PropTypes.object.isRequired,\n grid: PropTypes.shape({\n columns: PropTypes.number,\n rows: PropTypes.number,\n // if a different value then 1fr is wanted\n rowsRepeatValue: PropTypes.string,\n }),\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n className: PropTypes.string,\n isOver: PropTypes.bool,\n index: PropTypes.number,\n type: PropTypes.string,\n disabled: PropTypes.bool,\n};\n\nconst styles = (theme) => ({\n placeholder: {\n width: '100%',\n height: '100%',\n background: '#EEEEEE',\n border: '1px solid #D1D1D1',\n transition: 'background-color 200ms linear, border-color 200ms linear',\n boxSizing: 'border-box',\n display: 'grid',\n gridRowGap: `${theme.spacing.unit}px`,\n gridColumnGap: `${theme.spacing.unit}px`,\n padding: theme.spacing.unit * 1,\n },\n disabled: {\n boxShadow: 'none',\n background: 'white',\n },\n over: {\n border: `1px solid ${grey[500]}`,\n backgroundColor: `${grey[300]}`,\n },\n board: {\n border: '1px solid #D1D1D1',\n padding: '4px',\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n justifyContent: 'center',\n marginLeft: '20px',\n minHeight: '200px',\n },\n});\n\nexport default withStyles(styles)(PlaceHolder);\n"],"file":"placeholder.js"}
1
+ {"version":3,"sources":["../src/placeholder.jsx"],"names":["PlaceHolder","props","children","classes","className","isOver","type","grid","disabled","choiceBoard","names","placeholder","over","style","columns","gridTemplateColumns","rows","repeatValue","rowsRepeatValue","gridTemplateRows","board","propTypes","PropTypes","object","isRequired","shape","number","string","oneOfType","arrayOf","node","bool","index","styles","theme","width","height","background","border","transition","boxSizing","display","gridRowGap","spacing","unit","gridColumnGap","padding","boxShadow","grey","backgroundColor","flexWrap","alignItems","minHeight","justifyContent"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport grey from '@material-ui/core/colors/grey';\n\nexport const PlaceHolder = (props) => {\n const { children, classes, className, isOver, type, grid, disabled, choiceBoard } = props;\n const names = classNames(\n classes.placeholder,\n disabled && classes.disabled,\n isOver && classes.over,\n classes[type],\n className,\n );\n\n const style = {};\n\n if (grid && grid.columns) {\n style.gridTemplateColumns = `repeat(${grid.columns}, 1fr)`;\n }\n if (grid && grid.rows) {\n const repeatValue = grid.rowsRepeatValue || '1fr';\n\n style.gridTemplateRows = `repeat(${grid.rows}, ${repeatValue})`;\n }\n\n return (\n <div style={style} className={choiceBoard ? classes.board : names}>\n {children}\n </div>\n );\n};\n\nPlaceHolder.propTypes = {\n classes: PropTypes.object.isRequired,\n grid: PropTypes.shape({\n columns: PropTypes.number,\n rows: PropTypes.number,\n // if a different value then 1fr is wanted\n rowsRepeatValue: PropTypes.string,\n }),\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n className: PropTypes.string,\n isOver: PropTypes.bool,\n index: PropTypes.number,\n type: PropTypes.string,\n disabled: PropTypes.bool,\n};\n\nconst styles = (theme) => ({\n placeholder: {\n width: '100%',\n height: '100%',\n background: '#EEEEEE',\n border: '1px solid #D1D1D1',\n transition: 'background-color 200ms linear, border-color 200ms linear',\n boxSizing: 'border-box',\n display: 'grid',\n gridRowGap: `${theme.spacing.unit}px`,\n gridColumnGap: `${theme.spacing.unit}px`,\n padding: theme.spacing.unit * 1,\n },\n disabled: {\n boxShadow: 'none',\n background: 'white',\n },\n over: {\n border: `1px solid ${grey[500]}`,\n backgroundColor: `${grey[300]}`,\n },\n board: {\n border: '1px solid #D1D1D1',\n padding: '10px',\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n minHeight: '200px',\n justifyContent: 'space-between',\n },\n});\n\nexport default withStyles(styles)(PlaceHolder);\n"],"file":"placeholder.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pie-lib/drag",
3
- "version": "2.0.5-next.0+7f572075",
3
+ "version": "2.0.5",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "module": "src/index.js",
@@ -17,5 +17,5 @@
17
17
  "scripts": {},
18
18
  "author": "",
19
19
  "license": "ISC",
20
- "gitHead": "7f5720751281e2019ec8ff9c513703d81bcb1aef"
20
+ "gitHead": "252c387e845b7f3b5887d10ae458cefb76ad3fa5"
21
21
  }
@@ -0,0 +1,51 @@
1
+ import React from 'react';
2
+ import PlaceHolder from './placeholder';
3
+ import PropTypes from 'prop-types';
4
+ import { DropTarget } from 'react-dnd';
5
+
6
+ const DRAG_TYPE = window.demo?.markup?.includes('match-list') ? 'Answer' : 'MaskBlank';
7
+
8
+ class DroppablePlaceholder extends React.Component {
9
+ static propTypes = {
10
+ connectDropTarget: PropTypes.func.isRequired,
11
+ isOver: PropTypes.bool,
12
+ children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
13
+ disabled: PropTypes.bool,
14
+ };
15
+
16
+ render() {
17
+ const { children, connectDropTarget, isOver, disabled, classes } = this.props;
18
+
19
+ return connectDropTarget(
20
+ <div style={{ flex: 1 }}>
21
+ <PlaceHolder disabled={disabled} isOver={isOver} choiceBoard={true} className={classes}>
22
+ {children}
23
+ </PlaceHolder>
24
+ </div>,
25
+ );
26
+ }
27
+ }
28
+
29
+ export const spec = {
30
+ canDrop: (props) => {
31
+ return !props.disabled;
32
+ },
33
+ drop: (props, monitor) => {
34
+ const item = monitor.getItem();
35
+
36
+ if (DRAG_TYPE === 'Answer') {
37
+ props.onRemoveAnswer(item.promptId);
38
+ } else if (item.id) {
39
+ return {
40
+ dropped: true,
41
+ };
42
+ }
43
+ },
44
+ };
45
+
46
+ const WithTarget = DropTarget(DRAG_TYPE, spec, (connect, monitor) => ({
47
+ connectDropTarget: connect.dropTarget(),
48
+ isOver: monitor.isOver(),
49
+ }))(DroppablePlaceholder);
50
+
51
+ export default WithTarget;
package/src/index.js CHANGED
@@ -1,9 +1,10 @@
1
1
  import { DndProvider, DragSource, DropTarget } from 'react-dnd';
2
2
 
3
3
  import PlaceHolder from './placeholder';
4
+ import DroppablePlaceholder from './droppable-placeholder';
4
5
  import Choice from './choice';
5
6
  import withDragContext from './with-drag-context';
6
7
  import swap from './swap';
7
8
  import * as uid from './uid-context';
8
9
 
9
- export { DndProvider, PlaceHolder, withDragContext, Choice, swap, uid, DragSource, DropTarget };
10
+ export { DndProvider, PlaceHolder, DroppablePlaceholder, withDragContext, Choice, swap, uid, DragSource, DropTarget };
@@ -71,13 +71,12 @@ const styles = (theme) => ({
71
71
  },
72
72
  board: {
73
73
  border: '1px solid #D1D1D1',
74
- padding: '4px',
74
+ padding: '10px',
75
75
  display: 'flex',
76
76
  flexWrap: 'wrap',
77
77
  alignItems: 'center',
78
- justifyContent: 'center',
79
- marginLeft: '20px',
80
78
  minHeight: '200px',
79
+ justifyContent: 'space-between',
81
80
  },
82
81
  });
83
82