diff --git a/src/Item.js b/src/Item.js index 37335b9..bd2e098 100644 --- a/src/Item.js +++ b/src/Item.js @@ -5,7 +5,7 @@ class ReactCoolLayoutItem extends Component { constructor(props, context) { super(props); - context.env.init(this); + context.env.init(this, props.onItemLayoutSet); } componentWillUnmount() { this.context.env.dispose(this); diff --git a/src/Layout.js b/src/Layout.js index a21604f..dc1ce93 100644 --- a/src/Layout.js +++ b/src/Layout.js @@ -37,7 +37,7 @@ class ReactCoolLayout extends Component { - init(instance) { + init(instance, onItemLayoutSet) { this.map.set(instance, { effectComponent: [], listenPage: {}, @@ -48,6 +48,7 @@ class ReactCoolLayout extends Component { left: 0, top: 0, }, + onItemLayoutSet, dispose: [], }); } @@ -61,6 +62,14 @@ class ReactCoolLayout extends Component { this.map.delete(instance); } + setItemLayout = (instance, type, value) => { + const instanceValue = this.map.get(instance); + setStyle(instance.dom, type, value); + if (typeof instanceValue.onItemLayoutSet === 'function') { + instanceValue.onItemLayoutSet(type, value); + } + } + componentDidMount() { this.map.list.forEach(({ key, value }) => { const { defaultLeft, defaultTop, defaultWidth, defaultHeight } = key.props; @@ -104,9 +113,9 @@ class ReactCoolLayout extends Component { }, }); value.listen[type] = key.props[type]; - setStyle(key.dom, type, val); + this.setItemLayout(key, type, val); } else { - setStyle(key.dom, type, key.props[type]); + this.setItemLayout(key, type, key.props[type]); } this.props.onChange(); } @@ -138,7 +147,7 @@ class ReactCoolLayout extends Component { }; }, }); - setStyle(key.dom, type, val); + this.setItemLayout(key, type, val); this.props.onChange(); })); } @@ -172,7 +181,7 @@ class ReactCoolLayout extends Component { }; }, }); - setStyle(item.dom, type, value); + this.setItemLayout(item, type, value); this.props.onChange(); } });