@pie-lib/drag 2.29.1-mui-update.0 → 2.30.0-mui-update.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/CHANGELOG.md +11 -0
- package/lib/placeholder.js +21 -18
- package/lib/placeholder.js.map +1 -1
- package/package.json +4 -4
- package/src/placeholder.jsx +20 -17
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
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.30.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.29.1-mui-update.0...@pie-lib/drag@2.30.0-mui-update.0) (2025-11-26)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* placehoder styles in drag ([431adbe](https://github.com/pie-framework/pie-lib/commit/431adbe6c020f32615910885dee5d4bd5efbe76a))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [2.29.1-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.29.0-mui-update.0...@pie-lib/drag@2.29.1-mui-update.0) (2025-11-20)
|
|
7
18
|
|
|
8
19
|
|
package/lib/placeholder.js
CHANGED
|
@@ -17,22 +17,24 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
17
17
|
var StyledPlaceholder = (0, _styles.styled)('div')(function (_ref) {
|
|
18
18
|
var theme = _ref.theme;
|
|
19
19
|
return {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
20
|
+
'&.placeholder': {
|
|
21
|
+
WebkitTouchCallout: 'none',
|
|
22
|
+
WebkitUserSelect: 'none',
|
|
23
|
+
KhtmlUserSelect: 'none',
|
|
24
|
+
MozUserSelect: 'none',
|
|
25
|
+
MsUserSelect: 'none',
|
|
26
|
+
userSelect: 'none',
|
|
27
|
+
width: '100%',
|
|
28
|
+
height: '100%',
|
|
29
|
+
background: _renderUi.color.white(),
|
|
30
|
+
transition: 'background-color 200ms linear, border-color 200ms linear',
|
|
31
|
+
boxSizing: 'border-box',
|
|
32
|
+
display: 'grid',
|
|
33
|
+
gridRowGap: "".concat(theme.spacing(1), "px"),
|
|
34
|
+
gridColumnGap: "".concat(theme.spacing(1), "px"),
|
|
35
|
+
padding: theme.spacing(1),
|
|
36
|
+
border: "2px dashed ".concat(_renderUi.color.black())
|
|
37
|
+
},
|
|
36
38
|
'&.disabled': {
|
|
37
39
|
boxShadow: 'none',
|
|
38
40
|
background: theme.palette.background.paper
|
|
@@ -79,7 +81,8 @@ var PlaceHolder = exports.PlaceHolder = function PlaceHolder(props) {
|
|
|
79
81
|
choiceBoard = props.choiceBoard,
|
|
80
82
|
isCategorize = props.isCategorize,
|
|
81
83
|
isVerticalPool = props.isVerticalPool,
|
|
82
|
-
minHeight = props.minHeight
|
|
84
|
+
minHeight = props.minHeight,
|
|
85
|
+
extraStyles = props.extraStyles;
|
|
83
86
|
var names = (0, _classnames["default"])('placeholder', disabled && 'disabled', isOver && 'over', type, className);
|
|
84
87
|
var style = {};
|
|
85
88
|
if (grid && grid.columns) {
|
|
@@ -102,7 +105,7 @@ var PlaceHolder = exports.PlaceHolder = function PlaceHolder(props) {
|
|
|
102
105
|
return /*#__PURE__*/_react["default"].createElement(StyledPlaceholder, {
|
|
103
106
|
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
104
107
|
minHeight: minHeight
|
|
105
|
-
}),
|
|
108
|
+
}, extraStyles),
|
|
106
109
|
className: (0, _classnames["default"])(choiceBoard ? boardStyle : names, isVerticalPool && 'verticalPool')
|
|
107
110
|
}, children);
|
|
108
111
|
};
|
package/lib/placeholder.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"placeholder.js","names":["_react","_interopRequireDefault","require","_styles","_classnames","_propTypes","_renderUi","_colors","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","StyledPlaceholder","styled","_ref","theme","WebkitTouchCallout","WebkitUserSelect","KhtmlUserSelect","MozUserSelect","MsUserSelect","userSelect","width","height","background","color","white","transition","boxSizing","display","gridRowGap","concat","spacing","gridColumnGap","padding","border","black","boxShadow","palette","paper","grey","backgroundColor","flexWrap","alignItems","minHeight","justifyContent","overflow","touchAction","backgroundDark","flexFlow","PlaceHolder","exports","props","children","className","isOver","type","grid","disabled","choiceBoard","isCategorize","isVerticalPool","names","classNames","style","columns","gridTemplateColumns","rows","repeatValue","rowsRepeatValue","gridTemplateRows","borderLight","boardStyle","createElement","propTypes","PropTypes","bool","shape","number","string","oneOfType","arrayOf","node","isRequired","index","_default"],"sources":["../src/placeholder.jsx"],"sourcesContent":["import React from 'react';\nimport { styled } from '@mui/material/styles';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { color } from '@pie-lib/render-ui';\nimport { grey } from '@mui/material/colors';\n\nconst StyledPlaceholder = styled('div')(({ theme }) => ({\n WebkitTouchCallout: 'none',\n
|
|
1
|
+
{"version":3,"file":"placeholder.js","names":["_react","_interopRequireDefault","require","_styles","_classnames","_propTypes","_renderUi","_colors","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","StyledPlaceholder","styled","_ref","theme","WebkitTouchCallout","WebkitUserSelect","KhtmlUserSelect","MozUserSelect","MsUserSelect","userSelect","width","height","background","color","white","transition","boxSizing","display","gridRowGap","concat","spacing","gridColumnGap","padding","border","black","boxShadow","palette","paper","grey","backgroundColor","flexWrap","alignItems","minHeight","justifyContent","overflow","touchAction","backgroundDark","flexFlow","PlaceHolder","exports","props","children","className","isOver","type","grid","disabled","choiceBoard","isCategorize","isVerticalPool","extraStyles","names","classNames","style","columns","gridTemplateColumns","rows","repeatValue","rowsRepeatValue","gridTemplateRows","borderLight","boardStyle","createElement","propTypes","PropTypes","bool","shape","number","string","oneOfType","arrayOf","node","isRequired","index","_default"],"sources":["../src/placeholder.jsx"],"sourcesContent":["import React from 'react';\nimport { styled } from '@mui/material/styles';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { color } from '@pie-lib/render-ui';\nimport { grey } from '@mui/material/colors';\n\nconst StyledPlaceholder = styled('div')(({ theme }) => ({\n '&.placeholder': {\n WebkitTouchCallout: 'none',\n WebkitUserSelect: 'none',\n KhtmlUserSelect: 'none',\n MozUserSelect: 'none',\n MsUserSelect: 'none',\n userSelect: 'none',\n width: '100%',\n height: '100%',\n background: color.white(),\n transition: 'background-color 200ms linear, border-color 200ms linear',\n boxSizing: 'border-box',\n display: 'grid',\n gridRowGap: `${theme.spacing(1)}px`,\n gridColumnGap: `${theme.spacing(1)}px`,\n padding: theme.spacing(1),\n border: `2px dashed ${color.black()}`,\n },\n '&.disabled': {\n boxShadow: 'none',\n background: theme.palette.background.paper,\n },\n '&.over': {\n border: `1px solid ${grey[500]}`,\n backgroundColor: `${grey[300]}`,\n },\n '&.board': {\n padding: theme.spacing(1),\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n minHeight: '100px',\n justifyContent: 'center',\n overflow: 'hidden',\n touchAction: 'none',\n backgroundColor: color.backgroundDark(),\n },\n '&.categorizeBoard': {\n padding: theme.spacing(0.5),\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n minHeight: '100px',\n justifyContent: 'center',\n overflow: 'hidden',\n touchAction: 'none',\n backgroundColor: color.backgroundDark(),\n },\n '&.verticalPool': {\n display: 'flex',\n flexFlow: 'column wrap',\n },\n}));\n\nexport const PlaceHolder = (props) => {\n const {\n children,\n className,\n isOver,\n type,\n grid,\n disabled,\n choiceBoard,\n isCategorize,\n isVerticalPool,\n minHeight,\n extraStyles\n } = props;\n\n const names = classNames(\n 'placeholder',\n disabled && 'disabled',\n isOver && 'over',\n type,\n className,\n );\n\n const style = {};\n\n if (grid && grid.columns) {\n style.gridTemplateColumns = `repeat(${grid.columns}, 1fr)`;\n }\n\n if (grid && grid.rows) {\n const repeatValue = grid.rowsRepeatValue || '1fr';\n\n style.gridTemplateRows = `repeat(${grid.rows}, ${repeatValue})`;\n }\n\n // The \"type\" is only sent through placement-ordering / placeholder\n // It can be \"choice\" or \"target\"\n // We apply a different style for the \"choice\" type\n // For any other type, use a dashed black border and a white fill\n if (type === 'choice') {\n style.border = `1px solid ${color.borderLight()}`;\n style.background = color.backgroundDark();\n }\n\n const boardStyle = isCategorize ? 'categorizeBoard' : 'board';\n\n return (\n <StyledPlaceholder\n style={{ ...style, minHeight: minHeight, ...extraStyles }}\n className={classNames(\n choiceBoard ? boardStyle : names,\n isVerticalPool && 'verticalPool',\n )}\n >\n {children}\n </StyledPlaceholder>\n );\n};\n\nPlaceHolder.propTypes = {\n choiceBoard: PropTypes.bool,\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 isCategorize: PropTypes.bool,\n isVerticalPool: PropTypes.bool,\n minHeight: PropTypes.number,\n};\n\nexport default PlaceHolder;\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-lib/drag",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.30.0-mui-update.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "src/index.js",
|
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
"@emotion/style": "^0.8.0",
|
|
13
13
|
"@mui/icons-material": "^7.3.4",
|
|
14
14
|
"@mui/material": "^7.3.4",
|
|
15
|
-
"@pie-lib/math-rendering": "3.
|
|
16
|
-
"@pie-lib/render-ui": "4.
|
|
15
|
+
"@pie-lib/math-rendering": "3.34.0-mui-update.0",
|
|
16
|
+
"@pie-lib/render-ui": "4.43.0-mui-update.0",
|
|
17
17
|
"classnames": "^2.2.6",
|
|
18
18
|
"lodash": "^4.17.11",
|
|
19
19
|
"prop-types": "^15.7.2",
|
|
@@ -25,5 +25,5 @@
|
|
|
25
25
|
"scripts": {},
|
|
26
26
|
"author": "",
|
|
27
27
|
"license": "ISC",
|
|
28
|
-
"gitHead": "
|
|
28
|
+
"gitHead": "094026045c44d3d7e558beb7e6986f2652661f75"
|
|
29
29
|
}
|
package/src/placeholder.jsx
CHANGED
|
@@ -6,22 +6,24 @@ import { color } from '@pie-lib/render-ui';
|
|
|
6
6
|
import { grey } from '@mui/material/colors';
|
|
7
7
|
|
|
8
8
|
const StyledPlaceholder = styled('div')(({ theme }) => ({
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
9
|
+
'&.placeholder': {
|
|
10
|
+
WebkitTouchCallout: 'none',
|
|
11
|
+
WebkitUserSelect: 'none',
|
|
12
|
+
KhtmlUserSelect: 'none',
|
|
13
|
+
MozUserSelect: 'none',
|
|
14
|
+
MsUserSelect: 'none',
|
|
15
|
+
userSelect: 'none',
|
|
16
|
+
width: '100%',
|
|
17
|
+
height: '100%',
|
|
18
|
+
background: color.white(),
|
|
19
|
+
transition: 'background-color 200ms linear, border-color 200ms linear',
|
|
20
|
+
boxSizing: 'border-box',
|
|
21
|
+
display: 'grid',
|
|
22
|
+
gridRowGap: `${theme.spacing(1)}px`,
|
|
23
|
+
gridColumnGap: `${theme.spacing(1)}px`,
|
|
24
|
+
padding: theme.spacing(1),
|
|
25
|
+
border: `2px dashed ${color.black()}`,
|
|
26
|
+
},
|
|
25
27
|
'&.disabled': {
|
|
26
28
|
boxShadow: 'none',
|
|
27
29
|
background: theme.palette.background.paper,
|
|
@@ -70,6 +72,7 @@ export const PlaceHolder = (props) => {
|
|
|
70
72
|
isCategorize,
|
|
71
73
|
isVerticalPool,
|
|
72
74
|
minHeight,
|
|
75
|
+
extraStyles
|
|
73
76
|
} = props;
|
|
74
77
|
|
|
75
78
|
const names = classNames(
|
|
@@ -105,7 +108,7 @@ export const PlaceHolder = (props) => {
|
|
|
105
108
|
|
|
106
109
|
return (
|
|
107
110
|
<StyledPlaceholder
|
|
108
|
-
style={{ ...style, minHeight: minHeight }}
|
|
111
|
+
style={{ ...style, minHeight: minHeight, ...extraStyles }}
|
|
109
112
|
className={classNames(
|
|
110
113
|
choiceBoard ? boardStyle : names,
|
|
111
114
|
isVerticalPool && 'verticalPool',
|