@6thquake/react-material
Version:
React components that implement Google's Material Design.
396 lines (321 loc) • 14.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
var _icons = require("@material-ui/icons");
var _reactDnd = require("react-dnd");
var _GridList = _interopRequireDefault(require("../GridList"));
var _GridListTile = _interopRequireDefault(require("../GridListTile"));
var _GridListTileBar = _interopRequireDefault(require("../GridListTileBar"));
var _DragAndDrop = require("../DragAndDrop");
var _reResizable = _interopRequireDefault(require("re-resizable"));
var _withDragAndDrop = _interopRequireDefault(require("../DragAndDrop/withDragAndDrop"));
/**
* @ignore - do not document.
*/
/*
需要get到penal的clientOffset xy
*/
/*
flex布局 分为12份
将总宽度 eg 1000px/12 得到每一栅格的宽度 perflex
将组件宽度Math.round(300px/perflex) 得到所占的栅格数 flexCount
得到组件新的宽度 flexCount/12
cellSize int //每个网格的宽度
*/
var myCellSize = 50;
var defaultColsCount = 12;
var defaultPanelSize = {
width: 650,
height: 600
};
var styles = {
root: {
minWidth: '100px',
minHeight: '100px',
position: 'relative',
backgroundImage: 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAAEH5aXCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTQzODRDNjY1OTEyMTFFODkwMDFEODY0QTdDMDVBRTMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTQzODRDNjU1OTEyMTFFODkwMDFEODY0QTdDMDVBRTMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MzJDMUZEQTU3NzYxMUU4OTEwMkY1OEVDQkZDMUIzNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2MzJDMUZEQjU3NzYxMUU4OTEwMkY1OEVDQkZDMUIzNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpaCGOAAAAFLSURBVHjaYpDXMJT6//8/AymYiYEMMKppVBMVNAEEECMoAdLUllENoxpwAIAAYiCntKRL6UqXvDdqyaglo5YMUUsAAojkinM0TkYtGbVk1JJRS0YtGbVk1JJRSwavJQAB2K9jEwBgEAiATaawSps2+w8nWeLBcILfn18ZeUwTm7nWN7WDgICAgICAgICAgICAgICATJ/1Yp9b0yEtALt2TAMAAIAwzL9rNOwlxUEPHoKBTkdAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBSbh50E6C9O7QBAIQBIAgJ+4+GxaKYg1TUdoDmXlVzqWvCjAu6GO7Zb8iKCAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiAAPEEQFS0cmjxn2mDPp5bn+8Ii2+BAAAAAElFTkSuQmCC")',
backgroundSize: "".concat(myCellSize, "px ").concat(myCellSize, "px")
},
resize: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderTop: '1px solid rgba(0,0,0,0.1)',
borderRight: '1px solid rgba(0,0,0,0.1)',
borderBottom: '1px solid rgba(0,0,0,0.1)' // border: 'solid 1px #ddd',
// background: '#f0f0f0',
},
resizeInnerWrap: {
height: '100%',
width: '100%',
overflow: 'visible',
'&> ul': {
overflow: 'visible' // backgroundImage:'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAAEH5aXCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA0xpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjMyQzFGREI1Nzc2MTFFODkxMDJGNThFQ0JGQzFCMzQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjMyQzFGREE1Nzc2MTFFODkxMDJGNThFQ0JGQzFCMzQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmRkNzZhNTk4LTllZWYtMTE3Yi1hNWRmLWM5MWVjYTRjYTk3ZCIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmRkNzZhNTk4LTllZWYtMTE3Yi1hNWRmLWM5MWVjYTRjYTk3ZCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhWNmR8AAAE6SURBVHjaYmRkZGQgFTAxkAFGNY1qooImgABiJDXBMtHcWaMaRooGgABiJKe0pEu2GLVk1JJRS0YtwQ0AAogeZZf8aJyMWjJqyaglo5aMWjJqyaglo5bQxxKAAOzXQQkAAAgDwI897N9SUwyUGyzA4cdFhmkgmQfyzdlBQEBAQEBAQEBAQEBAQEBAzqe2/QEyArBrxzQAAAAIw/y7RsNeUhz04CEY6HQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQk5eZBNwHauWMaAIAQCILFI+D9qyWhxQC5zFoYygsVsqBLaA7qATnTBwJEQIAICBABASIgQIAAERAgAgJEQIAICBAgQAQEiIAAERAgAgJEQAQEiIAAERAgAgJEQAQEiIAAERAgAgJEQLRAYj6xpdSuGwYph8fsCgAAAABJRU5ErkJggg==")',
// backgroundSize: myCellSize+'px '+myCellSize+'px',
// overflow: 'visible'
}
},
gridListTile: {
'@global div': {
overflow: 'visible'
},
transition: 'all 0.5s cubic-bezier(.23,.66,.37,.8)'
},
dragsourceResizeable: {
background: 'rgba(0,0,0,0.1)',
margin: '1px',
'&:hover': {
border: '1px dashed rgba(0,0,0,0.1)',
borderRedius: '3px'
}
}
};
var boxTarget = {
drop: function drop(props, monitor, component) {
console.log('drop.......');
var item = monitor.getItem();
console.log(item);
if (!item.component) {
// 当comp不是从panel外部拉入
component.hasDroped = true;
}
if (!item.component) {
// 如果没有component 说明不是从外部拖进来的 不予处理
return;
} // 取到drop时的xy坐标，
// 计算出栅格的坐标值,
if (!component.state.childComponents) {
component.state.childComponents = [];
}
component.state.childComponents.push({
component: item.component,
size: [item.component.props.cols, item.component.props.rows]
});
component.setState({
childComponents: component.state.childComponents
});
},
hover: function hover(props, monitor, component) {// console.log('now hover');
}
};
var _Panel =
/*#__PURE__*/
function (_React$Component) {
(0, _inherits2.default)(_Panel, _React$Component);
function _Panel(props) {
var _this;
(0, _classCallCheck2.default)(this, _Panel);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(_Panel).call(this, props));
_this.sequenceComponent = function (from, to, callback) {
// from 是指原数组的第from个位置 to 是指原数组的第to个位置
var _cc = _this.state.childComponents;
if (!_cc) {
return;
}
var mycom = _cc.splice(from, 1);
_cc.splice(to, 0, mycom[0]); // this.state();
_this.setState({
childComponents: _cc
});
if (!!callback && typeof callback === 'function') {
callback();
}
};
_this.removeComponent = function (index) {
if (!index && index != 0) {
return;
}
if (_this.hasDroped) {// 说明drop在了panel内部 不作处理
} else {
// 说明drop在了panle外部 需要删除指定index
console.log("remove".concat(index));
var _cc = _this.state.childComponents;
if (!_cc) {
return;
}
_cc.splice(index, 1);
_this.setState({
childComponents: _cc
});
}
_this.hasDroped = false;
};
_this.dragSourceResize = function (event, direction, refToElement, delta) {
var mc = _this.state.childComponents;
var cs = parseInt(_this.state.cellSize || 0); // 当source被resize时，
// _i 当先对象的index 123
var _i = refToElement.getAttribute('datakey');
if (!_i && _i != 0) {
return;
} // 原始宽高
var _h = refToElement.offsetHeight;
var _w = refToElement.offsetWidth; // 改变的宽高
var _dw = delta.width;
var _dh = delta.height;
var _col = Math.round(_w / cs);
var _row = Math.round(_h / cs);
mc[_i].size = [_col, _row]; // 用state更新size of <Resizable>
_this.setState({
childComponents: mc
}); // 从而得到新的宽高
// 通过新的宽高 得到新的row和cols
// console.log(direction,delta)
};
_this.resizePanel = function (event, direction, refToElement, delta) {
_this.refCallBack(refToElement);
};
_this.refCallBack = function (node) {
console.log('**************', 'refcallback');
if (node && node.offsetWidth) {
var _offsetWidth = node.offsetWidth;
var _colsCount = _this.state.colsCount || defaultColsCount;
var _cellSize = Math.round(_offsetWidth / _colsCount);
if (_cellSize != _this.state.cellSize) {
// const ul = node.querySelector('ul[class^="MuiGridList"]');
var coreWidth = _colsCount * _cellSize;
var myPadding = _offsetWidth - coreWidth;
if (_this.state.panelSize) {
_this.state.panelSize.width = coreWidth;
}
var _paddingLeft = 0;
var _paddingRight = 0;
if (myPadding >= 1) {
_paddingLeft = Math.floor(myPadding / 2);
_paddingRight = Math.ceil(myPadding / 2);
}
_this.setState({
cellSize: _cellSize,
spacing: [_paddingLeft, _paddingRight],
panelSize: _this.state.panelSize
});
}
}
};
_this.state = {
// childComponents:props.defaultChildren,
cellSize: myCellSize,
spacing: [0, 0],
panelSize: defaultPanelSize,
colsCount: defaultColsCount
};
_this.state.childComponents = props.defaultChildren.map(function (v, i) {
return {
component: v,
size: [v.props.cols, v.props.rows]
};
});
return _this;
}
(0, _createClass2.default)(_Panel, [{
key: "componentDidMount",
value: function componentDidMount() {// this.
//
// const a = this.refs['panelwrap'].getBoundingClientRect();
// this.worldCoordinate = [a.x,a.y]
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var self = this;
var _this$state = this.state,
childComponents = _this$state.childComponents,
cellSize = _this$state.cellSize,
colsCount = _this$state.colsCount,
spacing = _this$state.spacing,
panelSize = _this$state.panelSize;
var _this$props = this.props,
classes = _this$props.classes,
connectDropTarget = _this$props.connectDropTarget;
var _childComponents = (childComponents || []).map(function (value, index) {
if (value && value.size instanceof Array && value.size.length === 2) {
return _react.default.createElement(_GridListTile.default, {
className: classes.gridListTile,
key: index,
cols: value.size[0],
rows: value.size[1]
}, _react.default.createElement(_reResizable.default, {
size: {
width: value.size[0] * cellSize - 4,
height: value.size[1] * cellSize - 4
},
minWidth: 10,
minHeight: 10,
datakey: index,
onResizeStop: _this2.dragSourceResize,
className: classes.dragsourceResizeable,
bounds: 'window'
}, _react.default.createElement(_DragAndDrop.DragSource, {
type: 'POSITION',
sequence: _this2.sequenceComponent,
remove: _this2.removeComponent,
index: index
}, value.component)));
}
return null;
});
return connectDropTarget(_react.default.createElement("div", {
className: classes.root,
ref: this.refCallBack,
style: {
backgroundSize: "".concat(cellSize, "px ").concat(cellSize, "px"),
marginRight: "".concat(spacing[1], "px"),
marginLeft: "".concat(spacing[0], "px")
}
}, _react.default.createElement(_reResizable.default, {
className: classes.resize,
defaultSize: panelSize,
size: panelSize,
minWidth: 100,
minHeight: 100,
bounds: 'window',
onResizeStop: this.resizePanel
}, _react.default.createElement("div", {
className: classes.resizeInnerWrap
}, _react.default.createElement(_GridList.default, {
spacing: 0,
cellHeight: cellSize,
cols: colsCount
}, _childComponents)))));
}
}]);
return _Panel;
}(_react.default.Component);
var Panel = (0, _reactDnd.DropTarget)(['DRAGANDDROP'], boxTarget, function (connect, monitor) {
return {
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver({
shallow: true
}),
// isOverCurrent: monitor.isOver({ shallow: false }),
canDrop: monitor.canDrop(),
itemType: monitor.getItemType()
};
})(_Panel);
Panel.propTypes = {
/**
*Array of Jsx，it will be render in this panel eg.
*[(<div cols={4} rows={2}>
<Button color="primary">默认的button</Button>
</div>),
(<div cols={5} rows={2}>
<div>默认的div1</div>
</div>)]
*/
defaultChildren: _propTypes.default.array.isRequired
};
var _default = (0, _withStyles.default)(styles, {
name: 'RMPanel'
})((0, _withDragAndDrop.default)()(Panel));
exports.default = _default;