From 86c337f98cd86b9e2997272edb17c219fc961162 Mon Sep 17 00:00:00 2001 From: bokuweb Date: Sun, 4 Mar 2018 16:17:55 +0900 Subject: [PATCH 1/4] chore: fix flow error --- .flowconfig | 4 +- lib/index.js | 582 ---------------------------------------- lib/pane.js | 80 ------ package.json | 4 +- src/components/index.js | 53 ++-- yarn.lock | 33 ++- 6 files changed, 59 insertions(+), 697 deletions(-) delete mode 100644 lib/index.js delete mode 100644 lib/pane.js diff --git a/.flowconfig b/.flowconfig index 90e30b01..029f0350 100755 --- a/.flowconfig +++ b/.flowconfig @@ -4,12 +4,10 @@ .*/node_modules/findup.* .*/node_modules/radium.* .*/node_modules/eslint-plugin-jsx-a11y.* -.*/lib.* - +./lib.* [include] [libs] -./decls [options] suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowIgnore.* diff --git a/lib/index.js b/lib/index.js deleted file mode 100644 index 3b5f525f..00000000 --- a/lib/index.js +++ /dev/null @@ -1,582 +0,0 @@ -'use strict'; - -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports.SortablePane = exports.Pane = undefined; - -var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -var _reactMotion = require('react-motion'); - -var _reactResizableBox = require('react-resizable-box'); - -var _reactResizableBox2 = _interopRequireDefault(_reactResizableBox); - -var _propTypes = require('prop-types'); - -var _propTypes2 = _interopRequireDefault(_propTypes); - -var _lodash = require('lodash.isequal'); - -var _lodash2 = _interopRequireDefault(_lodash); - -var _pane = require('./pane'); - -var _pane2 = _interopRequireDefault(_pane); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } - -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } - -var reinsert = function reinsert(array, from, to) { - var a = array.slice(0); - var v = a[from]; - a.splice(from, 1); - a.splice(to, 0, v); - return a; -}; - -var clamp = function clamp(n) { - var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : n; - var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : n; - return Math.max(Math.min(n, max), min); -}; - -var springConfig = [500, 30]; - -var SortablePane = function (_Component) { - _inherits(SortablePane, _Component); - - function SortablePane(props) { - _classCallCheck(this, SortablePane); - - var _this = _possibleConstructorReturn(this, _Component.call(this, props)); - - _this.state = { - delta: 0, - mouse: 0, - isPressed: false, - lastPressed: 0, - isResizing: false, - panes: _this.props.children.map(function (child, order) { - return { - id: child.props.id, - width: child.props.width, - height: child.props.height, - order: order - }; - }) - }; - _this.sizePropsUpdated = false; - _this.handleTouchMove = _this.handleTouchMove.bind(_this); - _this.handleMouseUp = _this.handleMouseUp.bind(_this); - _this.handleMouseMove = _this.handleMouseMove.bind(_this); - if (typeof window !== 'undefined') { - window.addEventListener('touchmove', _this.handleTouchMove); - window.addEventListener('touchend', _this.handleMouseUp); - window.addEventListener('mousemove', _this.handleMouseMove); - window.addEventListener('mouseup', _this.handleMouseUp); - } - return _this; - } - - SortablePane.prototype.componentDidMount = function componentDidMount() { - this.setSize(); - }; - - SortablePane.prototype.componentWillReceiveProps = function componentWillReceiveProps(next) { - var newPanes = []; - var order = this.getPanePropsArrayOf('order'); - if (!(0, _lodash2.default)(this.props.order, next.order)) { - for (var i = 0; i < next.order.length; i++) { - newPanes[next.order[i]] = this.state.panes[order[i]]; - } - this.setState({ panes: newPanes }); - } - for (var _i = 0; _i < this.props.children.length; _i++) { - if (next.children[_i]) { - var width = this.props.children[_i].props.width; - var height = this.props.children[_i].props.height; - var newWidth = next.children[_i].props.width; - var newHeight = next.children[_i].props.height; - if (width !== newWidth || height !== newHeight) this.sizePropsUpdated = true; - } - } - }; - - SortablePane.prototype.componentDidUpdate = function componentDidUpdate() { - var panes = this.state.panes; - - if (this.props.children.length > panes.length) return this.addPane(); - if (this.props.children.length < panes.length) return this.removePane(); - - if (this.sizePropsUpdated) { - this.sizePropsUpdated = false; - this.setSize(); - } - return null; - }; - - SortablePane.prototype.componentWillUnmount = function componentWillUnmount() { - if (typeof window !== 'undefined') { - window.removeEventListener('touchmove', this.handleTouchMove); - window.removeEventListener('touchend', this.handleMouseUp); - window.removeEventListener('mousemove', this.handleMouseMove); - window.removeEventListener('mouseup', this.handleMouseUp); - } - }; - - SortablePane.prototype.onResize = function onResize(i, dir, size, rect) { - var _this2 = this; - - var panes = this.state.panes; - - var order = this.getPanePropsArrayOf('order'); - panes = panes.map(function (pane, index) { - if (order.indexOf(i) === index) { - var _refs$panes$children$ = _this2.refs.panes.children[i], - offsetWidth = _refs$panes$children$.offsetWidth, - offsetHeight = _refs$panes$children$.offsetHeight; - - return { - width: offsetWidth, - height: offsetHeight, - order: pane.order, - id: pane.id - }; - } - return pane; - }); - this.setState({ panes: panes }); - this.props.onResize({ id: panes[order.indexOf(i)].id, dir: dir, size: size, rect: rect }); - }; - - SortablePane.prototype.getPanePropsArrayOf = function getPanePropsArrayOf(key) { - return this.state.panes.map(function (pane) { - return pane[key]; - }); - }; - - SortablePane.prototype.getPaneSizeList = function getPaneSizeList() { - var width = this.getPanePropsArrayOf('width'); - var height = this.getPanePropsArrayOf('height'); - return this.isHorizontal() ? width : height; - }; - - /** - * Find the position sum of halfway points of panes surrounding a given pane - * - * |-------------| - * | | ---> 'previous' halfway - * |-------------| - * <--- margin - * |-------------| - * | currentPane | - * |-------------| - * <--- margin - * |-------------| - * | | - * | | ---> 'next' halfway - * | | - * |-------------| - * - * - * @param {number} currentPane - Index of rerference pane - * @param {number[]} sizes - Array of pane sizes - * @param {number} margin - The margin between panes - * @return {object} - Object containing 'prevoius' and 'next' - * pane halfway points - */ - - - SortablePane.prototype.getSurroundingHalfSizes = function getSurroundingHalfSizes(currentPane, sizes, margin) { - var nextPane = currentPane + 1; - var prevPane = currentPane - 1; - - return sizes.reduce(function (sums, val, index) { - var newSums = {}; - if (index < prevPane) { - newSums.previous = sums.previous + val + margin; - } else if (index === prevPane) { - newSums.previous = sums.previous + val / 2; - } else { - newSums.previous = sums.previous; - } - - if (index < nextPane) { - newSums.next = sums.next + val + margin; - } else if (index === nextPane) { - newSums.next = sums.next + val / 2; - } else { - newSums.next = sums.next; - } - return newSums; - }, { previous: 0, next: 0 }); - }; - - /** - * Determine where a particular pane should be ordered - * - * @param {number} position - Top of the current pane - * @param {number} paneIndex - Index of the pane - * @return {number} - New index of the pane based on position - */ - - - SortablePane.prototype.getItemCountByPosition = function getItemCountByPosition(position, paneIndex) { - var size = this.getPaneSizeList(); - var margin = this.props.margin; - - var halfsizes = this.getSurroundingHalfSizes(paneIndex, size, margin); - - if (position + size[paneIndex] > halfsizes.next) return paneIndex + 1; - if (position < halfsizes.previous) return paneIndex - 1; - return paneIndex; - }; - - SortablePane.prototype.setSize = function setSize() { - var _this3 = this; - - var panes = this.props.children.map(function (child, i) { - var _refs$panes$children$2 = _this3.refs.panes.children[i], - offsetWidth = _refs$panes$children$2.offsetWidth, - offsetHeight = _refs$panes$children$2.offsetHeight; - - return { - id: child.props.id, - width: offsetWidth, - height: offsetHeight, - order: i - }; - }); - if (!(0, _lodash2.default)(panes, this.state.panes)) this.setState({ panes: panes }); - }; - - SortablePane.prototype.getItemPositionByIndex = function getItemPositionByIndex(index) { - var size = this.getPaneSizeList(); - var sum = 0; - for (var i = 0; i < index; i++) { - sum += size[i] + this.props.margin; - }return sum; - }; - - SortablePane.prototype.isHorizontal = function isHorizontal() { - return this.props.direction === 'horizontal'; - }; - - SortablePane.prototype.updateOrder = function updateOrder(panes, index, mode) { - return panes.map(function (pane) { - if (pane.order >= index) { - var id = pane.id, - width = pane.width, - height = pane.height, - order = pane.order; - - return { id: id, width: width, height: height, order: mode === 'add' ? order + 1 : order - 1 }; - } - return pane; - }); - }; - - SortablePane.prototype.addPane = function addPane() { - var _this4 = this; - - var newPanes = this.state.panes; - this.props.children.forEach(function (child, i) { - var ids = _this4.state.panes.map(function (pane) { - return pane.id; - }); - if (ids.indexOf(child.props.id) === -1) { - newPanes = _this4.updateOrder(newPanes, i, 'add'); - var id = child.props.id; - - var _refs$panes$children$3 = _this4.refs.panes.children[i].getBoundingClientRect(), - width = _refs$panes$children$3.width, - height = _refs$panes$children$3.height; - - var pane = { id: id, width: width, height: height, order: i }; - newPanes.splice(i, 0, pane); - } - }); - this.setState({ panes: newPanes }); - }; - - SortablePane.prototype.removePane = function removePane() { - var _this5 = this; - - var newPanes = void 0; - this.state.panes.forEach(function (pane, i) { - var ids = _this5.props.children.map(function (child) { - return child.props.id; - }); - if (ids.indexOf(pane.id) === -1) { - newPanes = _this5.updateOrder(_this5.state.panes, pane.order, 'remove'); - newPanes.splice(i, 1); - } - }); - this.setState({ panes: newPanes }); - }; - - SortablePane.prototype.handleResizeStart = function handleResizeStart(i) { - var order = this.getPanePropsArrayOf('order'); - this.setState({ isResizing: true }); - this.props.onResizeStart({ id: this.state.panes[order.indexOf(i)].id }); - }; - - SortablePane.prototype.handleResizeStop = function handleResizeStop(i, dir, size, rect) { - var panes = this.state.panes; - - var order = this.getPanePropsArrayOf('order'); - this.setState({ isResizing: false }); - this.props.onResizeStop({ id: panes[order.indexOf(i)].id, dir: dir, size: size, rect: rect }); - }; - - SortablePane.prototype.handleMouseDown = function handleMouseDown(pos, pressX, pressY, _ref) { - var pageX = _ref.pageX, - pageY = _ref.pageY; - - this.setState({ - delta: this.isHorizontal() ? pageX - pressX : pageY - pressY, - mouse: this.isHorizontal() ? pressX : pressY, - isPressed: true, - lastPressed: pos - }); - this.props.children[pos].props.onDragStart(); - this.props.onDragStart(this.props.children[pos].props.id); - }; - - SortablePane.prototype.handleMouseMove = function handleMouseMove(_ref2) { - var pageX = _ref2.pageX, - pageY = _ref2.pageY; - var _state = this.state, - isPressed = _state.isPressed, - delta = _state.delta, - lastPressed = _state.lastPressed, - isResizing = _state.isResizing, - panes = _state.panes; - var onOrderChange = this.props.onOrderChange; - - if (isPressed && !isResizing) { - var mouse = this.isHorizontal() ? pageX - delta : pageY - delta; - var length = this.props.children.length; - - var order = this.getPanePropsArrayOf('order'); - var newPosition = this.getItemCountByPosition(mouse, order.indexOf(lastPressed)); - var row = clamp(Math.round(newPosition), 0, length - 1); - var newPanes = reinsert(panes, order.indexOf(lastPressed), row); - this.setState({ mouse: mouse, panes: newPanes }); - if (!(0, _lodash2.default)(panes, newPanes)) onOrderChange(panes, newPanes); - } - }; - - SortablePane.prototype.handleTouchStart = function handleTouchStart(key, pressLocation, e) { - this.handleMouseDown(key, pressLocation, e.touches[0]); - }; - - SortablePane.prototype.handleTouchMove = function handleTouchMove(e) { - e.preventDefault(); - this.handleMouseMove(e.touches[0]); - }; - - SortablePane.prototype.handleMouseUp = function handleMouseUp(e) { - if (this.props.children.length === 0) return; - this.setState({ isPressed: false, delta: 0 }); - var lastPressedId = this.props.children[this.state.lastPressed].props.id; - this.props.children[this.state.lastPressed].props.onDragEnd(e, this.state.panes.find(function (p) { - return p.id === lastPressedId; - })); - this.props.onDragEnd(e, lastPressedId, this.state.panes); - }; - - SortablePane.prototype.renderPanes = function renderPanes() { - var _this6 = this; - - var _state2 = this.state, - mouse = _state2.mouse, - isPressed = _state2.isPressed, - lastPressed = _state2.lastPressed, - isResizing = _state2.isResizing; - - var order = this.getPanePropsArrayOf('order'); - var _props = this.props, - children = _props.children, - disableEffect = _props.disableEffect, - isSortable = _props.isSortable, - zIndex = _props.zIndex; - - return children.map(function (child, i) { - var springPosition = (0, _reactMotion.spring)(_this6.getItemPositionByIndex(order.indexOf(i)), springConfig); - var style = lastPressed === i && isPressed ? { - scale: disableEffect ? 1 : (0, _reactMotion.spring)(1.05, springConfig), - shadow: disableEffect ? 0 : (0, _reactMotion.spring)(16, springConfig), - x: _this6.isHorizontal() ? mouse : 0, - y: !_this6.isHorizontal() ? mouse : 0 - } : { - scale: disableEffect ? 1 : (0, _reactMotion.spring)(1, springConfig), - shadow: disableEffect ? 0 : (0, _reactMotion.spring)(0, springConfig), - x: _this6.isHorizontal() ? springPosition : 0, - y: !_this6.isHorizontal() ? springPosition : 0 - }; - return _react2.default.createElement( - _reactMotion.Motion, - { style: style, key: child.props.id }, - function (_ref3) { - var scale = _ref3.scale, - shadow = _ref3.shadow, - x = _ref3.x, - y = _ref3.y; - - var onResize = _this6.onResize.bind(_this6, i); - var onMouseDown = isSortable ? _this6.handleMouseDown.bind(_this6, i, x, y) : function () { - return null; - }; - var onTouchStart = _this6.handleTouchStart.bind(_this6, i, x, y); - var onResizeStart = _this6.handleResizeStart.bind(_this6, i); - var onResizeStop = _this6.handleResizeStop.bind(_this6, i); - var userSelect = isPressed || isResizing ? { - userSelect: 'none', - MozUserSelect: 'none', - WebkitUserSelect: 'none', - MsUserSelect: 'none' - } : { - userSelect: 'auto', - MozUserSelect: 'auto', - WebkitUserSelect: 'auto', - MsUserSelect: 'auto' - }; - - // take a copy rather than direct-manipulating the child's prop, which violates React - // and causes problems if the child's prop is a static default {}, which then will be - // shared across all children! - var customStyle = _extends({}, child.props.style); - _extends(customStyle, _extends({ - boxShadow: 'rgba(0, 0, 0, 0.2) 0px ' + shadow + 'px ' + 2 * shadow + 'px 0px', - transform: 'translate3d(' + x + 'px, ' + y + 'px, 0px) scale(' + scale + ')', - WebkitTransform: 'translate3d(' + x + 'px, ' + y + 'px, 0px) scale(' + scale + ')', - MozTransform: 'translate3d(' + x + 'px, ' + y + 'px, 0px) scale(' + scale + ')', - MsTransform: 'translate3d(' + x + 'px, ' + y + 'px, 0px) scale(' + scale + ')', - zIndex: i === lastPressed ? zIndex + children.length : zIndex + i, - position: 'absolute' - }, userSelect)); - - var extendsProps = { - onMouseDown: onMouseDown, - onTouchStart: onTouchStart - }; - - return _react2.default.createElement( - _reactResizableBox2.default, - { - className: child.props.className, - onResize: onResize, - enable: { - top: false, - right: child.props.isResizable.x, - bottomRight: child.props.isResizable.xy, - bottom: child.props.isResizable.y, - left: false, - topRight: false, - bottomLeft: false, - topLeft: false - }, - width: child.props.width, - height: child.props.height, - minWidth: child.props.minWidth, - minHeight: child.props.minHeight, - maxWidth: child.props.maxWidth, - maxHeight: child.props.maxHeight, - style: customStyle, - onResizeStart: onResizeStart, - onResizeStop: onResizeStop, - extendsProps: extendsProps - }, - child.props.children - ); - } - ); - }); - }; - - SortablePane.prototype.render = function render() { - var _props2 = this.props, - style = _props2.style, - className = _props2.className; - - return _react2.default.createElement( - 'div', - { - ref: 'panes', - className: className, - style: _extends({ position: 'relative' }, style) - }, - this.renderPanes() - ); - }; - - return SortablePane; -}(_react.Component); - -SortablePane.propTypes = { - order: _propTypes2.default.arrayOf(_propTypes2.default.number), - direction: _propTypes2.default.oneOf(['horizontal', 'vertical']), - margin: _propTypes2.default.number, - style: _propTypes2.default.object, - children: _propTypes2.default.array, - onResizeStart: _propTypes2.default.func, - onResize: _propTypes2.default.func, - onResizeStop: _propTypes2.default.func, - onDragStart: _propTypes2.default.func, - onDragEnd: _propTypes2.default.func, - onOrderChange: _propTypes2.default.func, - className: _propTypes2.default.string, - disableEffect: _propTypes2.default.bool, - isSortable: _propTypes2.default.bool, - zIndex: _propTypes2.default.number -}; -SortablePane.defaultProps = { - order: [], - direction: 'horizontal', - margin: 0, - onClick: function onClick() { - return null; - }, - onTouchStart: function onTouchStart() { - return null; - }, - onResizeStart: function onResizeStart() { - return null; - }, - onResize: function onResize() { - return null; - }, - onResizeStop: function onResizeStop() { - return null; - }, - onDragStart: function onDragStart() { - return null; - }, - onDragEnd: function onDragEnd() { - return null; - }, - onOrderChange: function onOrderChange() { - return null; - }, - customStyle: {}, - className: '', - disableEffect: false, - isSortable: true, - zIndex: 100 -}; -exports.Pane = _pane2.default; -exports.SortablePane = SortablePane; \ No newline at end of file diff --git a/lib/pane.js b/lib/pane.js deleted file mode 100644 index 68a07ac3..00000000 --- a/lib/pane.js +++ /dev/null @@ -1,80 +0,0 @@ -'use strict'; - -Object.defineProperty(exports, "__esModule", { - value: true -}); - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -var _propTypes = require('prop-types'); - -var _propTypes2 = _interopRequireDefault(_propTypes); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } - -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } - -var Pane = function (_Component) { - _inherits(Pane, _Component); - - function Pane() { - _classCallCheck(this, Pane); - - return _possibleConstructorReturn(this, _Component.apply(this, arguments)); - } - - Pane.prototype.render = function render() { - return _react2.default.createElement( - 'div', - { className: this.props.className }, - this.props.children - ); - }; - - return Pane; -}(_react.Component); - -Pane.propTypes = { - id: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]).isRequired, - width: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]), - height: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]), - minWidth: _propTypes2.default.number, - maxWidth: _propTypes2.default.number, - minHeight: _propTypes2.default.number, - maxHeight: _propTypes2.default.number, - onDragStart: _propTypes2.default.func, - onDragEnd: _propTypes2.default.func, - style: _propTypes2.default.object, - className: _propTypes2.default.string, - children: _propTypes2.default.any, - isResizable: _propTypes2.default.shape({ - x: _react2.default.PropTypes.bool, - y: _react2.default.PropTypes.bool, - xy: _react2.default.PropTypes.bool - }) -}; -Pane.defaultProps = { - onDragStart: function onDragStart() { - return null; - }, - onDragEnd: function onDragEnd() { - return null; - }, - style: {}, - className: '', - isResizable: { - x: true, - y: true, - xy: true - } -}; -exports.default = Pane; -module.exports = exports['default']; \ No newline at end of file diff --git a/package.json b/package.json index 00e3f347..f27d8c77 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ }, "dependencies": { "lodash.isequal": "^4.1.1", - "re-resizable": "^4.3.2", + "re-resizable": "^4.4.0", "react-motion": "^0.5.2" }, "devDependencies": { @@ -37,7 +37,7 @@ "babel-preset-env": "^1.6.1", "babel-preset-flow": "^6.23.0", "babel-preset-react": "^6.24.1", - "eslint": "^4.18.1", + "eslint": "^4.18.2", "eslint-config-airbnb": "^16.1.0", "eslint-plugin-flowtype": "^2.46.1", "eslint-plugin-import": "^2.9.0", diff --git a/src/components/index.js b/src/components/index.js index 6afe1ce7..0326272e 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,12 +1,9 @@ /* @flow */ import * as React from 'react'; -// $FlowIgnore import { Motion, spring } from 'react-motion'; -// $FlowIgnore import Resizable from 're-resizable'; -// $FlowIgnore -import type { Direction } from 're-resizable'; +import type { ResizeDirection } from 're-resizable'; import isEqual from 'lodash.isequal'; import Pane from './pane'; @@ -54,7 +51,7 @@ export type PaneMode = 'add' | 'remove'; export type PaneResizeData = $Exact<{ pane: PaneProperty, - direction: $Values, + direction: 'x' | 'y' | 'xy', delta: PaneSize, }>; @@ -65,7 +62,7 @@ export type IdWithPanes = { export type SortablePaneProps = $Exact<{ order: number[], - direction?: Direction, + direction?: 'horizontal' | 'vertical', margin?: number, style?: { [key: string]: string }, children?: Pane[], @@ -220,7 +217,7 @@ class SortablePane extends React.Component { onResize( i: number, e: MouseEvent | TouchEvent, - dir: Direction, + dir: ResizeDirection, refToElement: HTMLElement, delta: PaneSize, ) { @@ -242,9 +239,15 @@ class SortablePane extends React.Component { const pane = panes[order.indexOf(i)]; if (!pane) return; if (!this.props.onResize) return; + let direction; + if (dir === 'right' || dir === 'bottom' || dir === 'bottomRight') { + direction = directionDict[dir]; + } else { + return; + } this.props.onResize(e, pane.id, panes, { pane, - direction: directionDict[dir], + direction, delta, }); } @@ -424,7 +427,7 @@ class SortablePane extends React.Component { handleResizeStop( i: number, e: MouseEvent | TouchEvent, - dir: Direction, + dir: ResizeDirection, refToElement: HTMLElement, delta: PaneSize, ) { @@ -435,9 +438,15 @@ class SortablePane extends React.Component { const { id } = pane; if (typeof id === 'undefined') return; if (this.props.onResizeStop) { + let direction; + if (dir === 'right' || dir === 'bottom' || dir === 'bottomRight') { + direction = directionDict[dir]; + } else { + return; + } this.props.onResizeStop(e, id, panes, { pane, - direction: directionDict[dir], + direction, delta, }); } @@ -547,8 +556,8 @@ class SortablePane extends React.Component { return ( {({ - scale, shadow, x, y, -}) => { + scale, shadow, x, y, + }) => { const onResize = this.onResize.bind(this, i); const onMouseDown = isSortable ? this.handleMouseDown.bind(this, i, x, y) : () => null; const onTouchStart = this.handleTouchStart.bind(this, i, x, y); @@ -557,17 +566,17 @@ class SortablePane extends React.Component { const userSelect = isPressed || isResizing ? { - userSelect: 'none', - MozUserSelect: 'none', - WebkitUserSelect: 'none', - MsUserSelect: 'none', - } + userSelect: 'none', + MozUserSelect: 'none', + WebkitUserSelect: 'none', + MsUserSelect: 'none', + } : { - userSelect: 'auto', - MozUserSelect: 'auto', - WebkitUserSelect: 'auto', - MsUserSelect: 'auto', - }; + userSelect: 'auto', + MozUserSelect: 'auto', + WebkitUserSelect: 'auto', + MsUserSelect: 'auto', + }; // take a copy rather than direct-manipulating the child's prop, which violates React // and causes problems if the child's prop is a static default {}, which then will be diff --git a/yarn.lock b/yarn.lock index 9f810694..74462bcf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -372,7 +372,7 @@ ajv@^5.0.0, ajv@^5.1.5: json-schema-traverse "^0.3.0" json-stable-stringify "^1.0.1" -ajv@^5.1.0, ajv@^5.3.0: +ajv@^5.1.0, ajv@^5.2.3, ajv@^5.3.0: version "5.5.2" resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965" dependencies: @@ -3189,9 +3189,9 @@ eslint@^4.0.0, eslint@^4.5.0: table "^4.0.1" text-table "~0.2.0" -eslint@^4.18.1: - version "4.18.1" - resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.18.1.tgz#b9138440cb1e98b2f44a0d578c6ecf8eae6150b0" +eslint@^4.18.2: + version "4.18.2" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.18.2.tgz#0f81267ad1012e7d2051e186a9004cc2267b8d45" dependencies: ajv "^5.3.0" babel-code-frame "^6.22.0" @@ -3228,7 +3228,7 @@ eslint@^4.18.1: semver "^5.3.0" strip-ansi "^4.0.0" strip-json-comments "~2.0.1" - table "^4.0.1" + table "4.0.2" text-table "~0.2.0" espree@^3.5.2: @@ -6357,9 +6357,9 @@ rc@^1.1.7: minimist "^1.2.0" strip-json-comments "~2.0.1" -re-resizable@^4.3.2: - version "4.3.2" - resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-4.3.2.tgz#2f3c106f0d5d3156ff1648ea3bb15b314a4f4cb8" +re-resizable@^4.4.0: + version "4.4.0" + resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-4.4.0.tgz#f8909e9335bd1bd30e38c4fc1a06d30c8ecdab87" react-docgen@^2.20.0: version "2.20.0" @@ -7159,6 +7159,12 @@ slice-ansi@0.0.4: version "0.0.4" resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35" +slice-ansi@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-1.0.0.tgz#044f1a49d8842ff307aad6b505ed178bd950134d" + dependencies: + is-fullwidth-code-point "^2.0.0" + slide@^1.1.5: version "1.1.6" resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707" @@ -7479,6 +7485,17 @@ symbol-observable@1.0.4, symbol-observable@^1.0.3: version "3.2.2" resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6" +table@4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/table/-/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36" + dependencies: + ajv "^5.2.3" + ajv-keywords "^2.1.0" + chalk "^2.1.0" + lodash "^4.17.4" + slice-ansi "1.0.0" + string-width "^2.1.1" + table@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/table/-/table-4.0.1.tgz#a8116c133fac2c61f4a420ab6cdf5c4d61f0e435" From 8d866d324d43421e3a2e0f167658efde95d8d6b1 Mon Sep 17 00:00:00 2001 From: bokuweb Date: Sun, 4 Mar 2018 18:37:04 +0900 Subject: [PATCH 2/4] fix: remove order property from pane --- src/components/index.js | 82 ++++++++++++++++++++++++----------------- 1 file changed, 49 insertions(+), 33 deletions(-) diff --git a/src/components/index.js b/src/components/index.js index 0326272e..343d870a 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -42,7 +42,7 @@ export type PaneProperty = $Exact<{ id: PaneId, width: number | string, height: number | string, - order: number, + // order: number, }>; export type PaneDirection = 'horizontal' | 'vertical'; @@ -61,7 +61,7 @@ export type IdWithPanes = { }; export type SortablePaneProps = $Exact<{ - order: number[], + // order: number[], direction?: 'horizontal' | 'vertical', margin?: number, style?: { [key: string]: string }, @@ -114,7 +114,7 @@ class SortablePane extends React.Component { handleMove: (e: MouseEvent | Touch) => void; static defaultProps = { - order: [], + // order: [], direction: 'horizontal', style: {}, children: [], @@ -140,11 +140,11 @@ class SortablePane extends React.Component { isPressed: false, lastPressed: 0, isResizing: false, - panes: (this.props.children || []).map((child: Pane, order: number) => ({ + panes: (this.props.children || []).map((child: Pane /* , order: number */) => ({ id: child.props.id, width: child.props.width, height: child.props.height, - order, + // order, })), }; this.sizePropsUpdated = false; @@ -166,16 +166,18 @@ class SortablePane extends React.Component { componentWillReceiveProps(next: SortablePaneProps) { const newPanes = []; - const order = this.getPanePropsArrayOf('order'); + // const order = this.getPanePropsArrayOf('order'); + /* if (!isEqual(this.props.order, next.order)) { for (let i = 0; i < next.order.length; i += 1) { if (this.state.panes.length) { - const pane = this.state.panes[parseInt(order[i], 10)]; + const pane = this.state.panes[parseInt(this.order[i], 10)]; newPanes[next.order[i]] = pane; } } this.setState({ panes: newPanes }); } + */ if (!next.children || next.children.length === 0) return; const children = this.props.children || []; @@ -214,6 +216,13 @@ class SortablePane extends React.Component { } } + get order() { + const children = this.props.children || []; + return this.state.panes.map(p => { + return children.findIndex(c => p.id === c.props.id); + }); + } + onResize( i: number, e: MouseEvent | TouchEvent, @@ -222,21 +231,22 @@ class SortablePane extends React.Component { delta: PaneSize, ) { let { panes } = this.state; - const order = this.getPanePropsArrayOf('order'); + // const order = this.getPanePropsArrayOf('order'); panes = panes.map((pane: PaneProperty, index: number) => { - if (order.indexOf(i) === index && this.panes) { - const { offsetWidth, offsetHeight } = this.panes.children[i]; + if (this.order.indexOf(i) === index && this.panes) { + const { offsetWidth, offsetHeight, scrollWidth, clientWidth, scrollHeight } = this.panes.children[i]; + console.log(offsetWidth, scrollWidth, clientWidth) return { - width: offsetWidth, - height: offsetHeight, - order: pane.order, + width: scrollWidth, + height: scrollHeight, + // order: pane.order, id: pane.id, }; } return pane; }); this.setState({ panes }); - const pane = panes[order.indexOf(i)]; + const pane = panes[this.order.indexOf(i)]; if (!pane) return; if (!this.props.onResize) return; let direction; @@ -324,10 +334,10 @@ class SortablePane extends React.Component { getItemCountByPosition(position: number, paneIndex: number): number { const size: number[] = this.getPaneSizeList(); const { margin } = this.props; - const halfsizes = this.getSurroundingHalfSizes(paneIndex, size, margin || 0); + const halfSizes = this.getSurroundingHalfSizes(paneIndex, size, margin || 0); - if (position + size[paneIndex] > halfsizes.next) return paneIndex + 1; - if (position < halfsizes.previous) return paneIndex - 1; + if (position + size[paneIndex] > halfSizes.next) return paneIndex + 1; + if (position < halfSizes.previous) return paneIndex - 1; return paneIndex; } @@ -340,7 +350,7 @@ class SortablePane extends React.Component { id: child.props.id, width: offsetWidth, height: offsetHeight, - order: i, + // order: i, }; }); if (!isEqual(newPanes, this.state.panes)) this.setState({ panes: newPanes }); @@ -361,16 +371,20 @@ class SortablePane extends React.Component { } updateOrder = (panes: PaneProperty[], index: number, mode: PaneMode) => { - return panes.map((pane: any) => { - if (pane.order >= index) { + const children = this.props.children || []; + // return this.state.panes.map(p => { + //const index = children.findIndex(c => pane.id === c.props.id); + // }); + return panes.map((pane) => { + if (children.findIndex(c => pane.id === c.props.id) >= index) { const { - id, width, height, order, + id, width, height, /* , order, */ } = pane; return { id, width, height, - order: mode === 'add' ? order + 1 : order - 1, + // order: mode === 'add' ? order + 1 : order - 1, }; } return pane; @@ -390,7 +404,7 @@ class SortablePane extends React.Component { if (!panes) return; const { width, height } = panes.children[i].getBoundingClientRect(); const pane = { - id, width, height, order: i, + id, width, height, //, order: i, }; newPanes.splice(i, 0, pane); } @@ -415,9 +429,9 @@ class SortablePane extends React.Component { e: SyntheticMouseEvent | SyntheticTouchEvent, ) { const { panes } = this.state; - const order = this.getPanePropsArrayOf('order'); + // const order = this.getPanePropsArrayOf('order'); this.setState({ isResizing: true }); - const { id } = panes[order.indexOf(i)]; + const { id } = panes[this.order.indexOf(i)]; if (typeof id === 'undefined') return; if (this.props.onResizeStart) { this.props.onResizeStart(e, id, panes); @@ -432,9 +446,9 @@ class SortablePane extends React.Component { delta: PaneSize, ) { const { panes } = this.state; - const order = this.getPanePropsArrayOf('order'); + // const order = this.getPanePropsArrayOf('order'); this.setState({ isResizing: false }); - const pane = panes[order.indexOf(i)]; + const pane = panes[this.order.indexOf(i)]; const { id } = pane; if (typeof id === 'undefined') return; if (this.props.onResizeStop) { @@ -494,10 +508,12 @@ class SortablePane extends React.Component { if (isPressed && !isResizing) { const mouse = this.isHorizontal() ? pageX - delta : pageY - delta; const { length } = this.props.children || []; - const order = this.getPanePropsArrayOf('order'); - const newPosition = this.getItemCountByPosition(mouse, order.indexOf(lastPressed)); + const children = this.props.children || []; + // const order = this.getPanePropsArrayOf('order'); + const newPosition = this.getItemCountByPosition(mouse, this.order.indexOf(lastPressed)); const row = clamp(Math.round(newPosition), 0, length - 1); - const newPanes = reinsert(panes, order.indexOf(lastPressed), row); + // console.log(this.order, lastPressed, row) + const newPanes = reinsert(panes, this.order.indexOf(lastPressed), row); this.setState({ mouse, panes: newPanes }); if (!this.props.onOrderChange) return; if (!isEqual(panes, newPanes)) { @@ -534,11 +550,11 @@ class SortablePane extends React.Component { const { mouse, isPressed, lastPressed, isResizing, } = this.state; - const order = this.getPanePropsArrayOf('order'); + // const order = this.getPanePropsArrayOf('order'); const { disableEffect, isSortable } = this.props; const children = this.props.children || []; return children.map((child: Pane, i) => { - const springPosition = spring(this.getItemPositionByIndex(order.indexOf(i)), springConfig); + const springPosition = spring(this.getItemPositionByIndex(this.order.indexOf(i)), springConfig); const style = lastPressed === i && isPressed ? { @@ -592,7 +608,7 @@ class SortablePane extends React.Component { MsTransform: `translate3d(${x}px, ${y}px, 0px) scale(${scale})`, zIndex: i === lastPressed && this.state.isPressed - ? 9999 + ? 999999 : (child.props.style && child.props.style.zIndex) || 'auto', position: 'absolute', }, From 443d93940e87620335a8bc1bf8adfab35e00752c Mon Sep 17 00:00:00 2001 From: bokuweb Date: Mon, 5 Mar 2018 23:23:22 +0900 Subject: [PATCH 3/4] fix: remove order from pane --- .prittierrc | 23 +++++----- package.json | 2 +- src/components/index.js | 99 +++++++---------------------------------- yarn.lock | 6 +-- 4 files changed, 30 insertions(+), 100 deletions(-) diff --git a/.prittierrc b/.prittierrc index dd653b39..50d934d4 100644 --- a/.prittierrc +++ b/.prittierrc @@ -1,13 +1,10 @@ - -{ - "useTabs": false, - "printWidth": 150, - "tabWidth": 2, - "singleQuote": true, - "trailingComma": "all", - "jsxBracketSameLine": false, - "parser": "flow", - "semi": true, - "rcVerbose": true, - "trailing-comma": "es6" -} +useTabs: fals +printWidth: 100 +tabWidth: 2 +singleQuote: true +trailingComma: "all" +jsxBracketSameLine: false +parser: "flow" +semi: true +rcVerbose: true +trailing-comma: "es6" diff --git a/package.json b/package.json index f27d8c77..932e0698 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ }, "dependencies": { "lodash.isequal": "^4.1.1", - "re-resizable": "^4.4.0", + "re-resizable": "4.4.2", "react-motion": "^0.5.2" }, "devDependencies": { diff --git a/src/components/index.js b/src/components/index.js index 343d870a..eeb276c9 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -42,7 +42,6 @@ export type PaneProperty = $Exact<{ id: PaneId, width: number | string, height: number | string, - // order: number, }>; export type PaneDirection = 'horizontal' | 'vertical'; @@ -61,7 +60,6 @@ export type IdWithPanes = { }; export type SortablePaneProps = $Exact<{ - // order: number[], direction?: 'horizontal' | 'vertical', margin?: number, style?: { [key: string]: string }, @@ -114,7 +112,6 @@ class SortablePane extends React.Component { handleMove: (e: MouseEvent | Touch) => void; static defaultProps = { - // order: [], direction: 'horizontal', style: {}, children: [], @@ -140,11 +137,10 @@ class SortablePane extends React.Component { isPressed: false, lastPressed: 0, isResizing: false, - panes: (this.props.children || []).map((child: Pane /* , order: number */) => ({ + panes: (this.props.children || []).map((child: Pane) => ({ id: child.props.id, width: child.props.width, height: child.props.height, - // order, })), }; this.sizePropsUpdated = false; @@ -164,36 +160,6 @@ class SortablePane extends React.Component { this.setSize(); } - componentWillReceiveProps(next: SortablePaneProps) { - const newPanes = []; - // const order = this.getPanePropsArrayOf('order'); - /* - if (!isEqual(this.props.order, next.order)) { - for (let i = 0; i < next.order.length; i += 1) { - if (this.state.panes.length) { - const pane = this.state.panes[parseInt(this.order[i], 10)]; - newPanes[next.order[i]] = pane; - } - } - this.setState({ panes: newPanes }); - } - */ - - if (!next.children || next.children.length === 0) return; - const children = this.props.children || []; - for (let i = 0; i < children.length; i += 1) { - if (next.children[i]) { - const child = children[i]; - if (child) { - const { width, height } = child.props; - const newWidth = next.children[i].props.width; - const newHeight = next.children[i].props.height; - if (width !== newWidth || height !== newHeight) this.sizePropsUpdated = true; - } - } - } - } - componentDidUpdate() { const { panes } = this.state; const children = this.props.children || []; @@ -218,8 +184,10 @@ class SortablePane extends React.Component { get order() { const children = this.props.children || []; - return this.state.panes.map(p => { - return children.findIndex(c => p.id === c.props.id); + return this.state.panes.map((p) => { + return children.findIndex((c) => { + return p.id === c.props.id; + }); }); } @@ -231,15 +199,12 @@ class SortablePane extends React.Component { delta: PaneSize, ) { let { panes } = this.state; - // const order = this.getPanePropsArrayOf('order'); panes = panes.map((pane: PaneProperty, index: number) => { if (this.order.indexOf(i) === index && this.panes) { - const { offsetWidth, offsetHeight, scrollWidth, clientWidth, scrollHeight } = this.panes.children[i]; - console.log(offsetWidth, scrollWidth, clientWidth) + const { offsetWidth, offsetHeight } = this.panes.children[i]; return { - width: scrollWidth, - height: scrollHeight, - // order: pane.order, + width: offsetWidth, + height: offsetHeight, id: pane.id, }; } @@ -350,7 +315,6 @@ class SortablePane extends React.Component { id: child.props.id, width: offsetWidth, height: offsetHeight, - // order: i, }; }); if (!isEqual(newPanes, this.state.panes)) this.setState({ panes: newPanes }); @@ -370,42 +334,18 @@ class SortablePane extends React.Component { return this.props.direction === 'horizontal'; } - updateOrder = (panes: PaneProperty[], index: number, mode: PaneMode) => { - const children = this.props.children || []; - // return this.state.panes.map(p => { - //const index = children.findIndex(c => pane.id === c.props.id); - // }); - return panes.map((pane) => { - if (children.findIndex(c => pane.id === c.props.id) >= index) { - const { - id, width, height, /* , order, */ - } = pane; - return { - id, - width, - height, - // order: mode === 'add' ? order + 1 : order - 1, - }; - } - return pane; - }); - }; - addPane() { if (!this.panes || !this.panes.children) return; - let newPanes = this.state.panes; + const newPanes = this.state.panes; const children = this.props.children || []; children.forEach((child, i) => { const ids = this.state.panes.map(pane => pane.id); if (ids.indexOf(child.props.id) === -1) { - newPanes = this.updateOrder(newPanes, i, 'add'); const { id } = child.props; const { panes } = this; if (!panes) return; const { width, height } = panes.children[i].getBoundingClientRect(); - const pane = { - id, width, height, //, order: i, - }; + const pane = { id, width, height }; newPanes.splice(i, 0, pane); } }); @@ -413,11 +353,10 @@ class SortablePane extends React.Component { } removePane() { - let newPanes; + const newPanes = this.state.panes; this.state.panes.forEach((pane, i) => { const ids = (this.props.children || []).map(child => child.props.id); if (ids.indexOf(pane.id) === -1) { - newPanes = this.updateOrder(this.state.panes, pane.order, 'remove'); newPanes.splice(i, 1); } }); @@ -429,7 +368,6 @@ class SortablePane extends React.Component { e: SyntheticMouseEvent | SyntheticTouchEvent, ) { const { panes } = this.state; - // const order = this.getPanePropsArrayOf('order'); this.setState({ isResizing: true }); const { id } = panes[this.order.indexOf(i)]; if (typeof id === 'undefined') return; @@ -446,7 +384,6 @@ class SortablePane extends React.Component { delta: PaneSize, ) { const { panes } = this.state; - // const order = this.getPanePropsArrayOf('order'); this.setState({ isResizing: false }); const pane = panes[this.order.indexOf(i)]; const { id } = pane; @@ -508,12 +445,9 @@ class SortablePane extends React.Component { if (isPressed && !isResizing) { const mouse = this.isHorizontal() ? pageX - delta : pageY - delta; const { length } = this.props.children || []; - const children = this.props.children || []; - // const order = this.getPanePropsArrayOf('order'); const newPosition = this.getItemCountByPosition(mouse, this.order.indexOf(lastPressed)); - const row = clamp(Math.round(newPosition), 0, length - 1); - // console.log(this.order, lastPressed, row) - const newPanes = reinsert(panes, this.order.indexOf(lastPressed), row); + const pos = clamp(Math.round(newPosition), 0, length - 1); + const newPanes = reinsert(panes, this.order.indexOf(lastPressed), pos); this.setState({ mouse, panes: newPanes }); if (!this.props.onOrderChange) return; if (!isEqual(panes, newPanes)) { @@ -539,7 +473,6 @@ class SortablePane extends React.Component { this.setState({ isPressed: false, delta: 0 }); const child = children[this.state.lastPressed]; const lastPressedId = child.props.id; - // const pane = this.state.panes.find(p => p.id === lastPressedId); if (!this.props.isSortable) return; if (this.props.onDragStop) { this.props.onDragStop(e, lastPressedId, this.state.panes); @@ -550,13 +483,13 @@ class SortablePane extends React.Component { const { mouse, isPressed, lastPressed, isResizing, } = this.state; - // const order = this.getPanePropsArrayOf('order'); const { disableEffect, isSortable } = this.props; const children = this.props.children || []; return children.map((child: Pane, i) => { - const springPosition = spring(this.getItemPositionByIndex(this.order.indexOf(i)), springConfig); + const pos = this.getItemPositionByIndex(this.order.indexOf(i)); + const springPosition = spring(pos, springConfig); const style = - lastPressed === i && isPressed + lastPressed === i && isPressed && !isResizing ? { scale: disableEffect ? 1 : spring(1.05, springConfig), shadow: disableEffect ? 0 : spring(16, springConfig), diff --git a/yarn.lock b/yarn.lock index 74462bcf..f82d6a24 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6357,9 +6357,9 @@ rc@^1.1.7: minimist "^1.2.0" strip-json-comments "~2.0.1" -re-resizable@^4.4.0: - version "4.4.0" - resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-4.4.0.tgz#f8909e9335bd1bd30e38c4fc1a06d30c8ecdab87" +re-resizable@4.4.2: + version "4.4.2" + resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-4.4.2.tgz#c39cbbf4db21639a4557337ff38879ff44b1f60a" react-docgen@^2.20.0: version "2.20.0" From b5f5f82c59787612bc7c79b404474d8e9701f714 Mon Sep 17 00:00:00 2001 From: bokuweb Date: Tue, 6 Mar 2018 09:30:32 +0900 Subject: [PATCH 4/4] feat: add resize observer --- README.md | 8 ++--- package.json | 3 +- src/components/index.js | 15 ++++++-- stories/index.js | 2 ++ stories/vertical-pane-with-handle.js | 2 +- stories/vertical-percent-panes.js | 53 ++++++++++++++++++++++++++++ yarn.lock | 4 +++ 7 files changed, 77 insertions(+), 10 deletions(-) create mode 100644 stories/vertical-percent-panes.js diff --git a/README.md b/README.md index b28e02e0..5776fee0 100644 --- a/README.md +++ b/README.md @@ -74,7 +74,7 @@ export default () => { #### `className?: string` -The `className` property is used to set the css `classname` of a component. +The `className` property is used to set the css `className` of a component. #### `style?: {[key: string]: string }` @@ -90,7 +90,6 @@ If omitted the default direction is `'horizontal'`. The `margin` property is used to set the margin between `Pane` component. If omitted the default margin is `0`. - #### `grid?: Array;` The `grid` property is used to specify the increments that resizing should snap to. Defaults to `[1, 1]`. @@ -120,7 +119,6 @@ type PaneProperty = $Exact<{ id: PaneId; width: number | string; height: number | string; - order: number; }> ``` @@ -317,7 +315,7 @@ If you want to permit only x direction resizing, please set `{ x: true, y: false ### V0.2.5 - Add order props to change order by parent component. -- Add husky and prepush hook. +- Add husky and pre push hook. ### V0.2.4 @@ -337,7 +335,7 @@ If you want to permit only x direction resizing, please set `{ x: true, y: false ### V0.2.0 -- Support pane appen and remove. +- Support pane append and remove. - Support vertical mode. - Fix pane size calculator. diff --git a/package.json b/package.json index 932e0698..3d127bb0 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,8 @@ "dependencies": { "lodash.isequal": "^4.1.1", "re-resizable": "4.4.2", - "react-motion": "^0.5.2" + "react-motion": "^0.5.2", + "resize-observer-polyfill": "^1.5.0" }, "devDependencies": { "@storybook/react": "^3.3.14", diff --git a/src/components/index.js b/src/components/index.js index eeb276c9..4c58f8c5 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -3,6 +3,7 @@ import * as React from 'react'; import { Motion, spring } from 'react-motion'; import Resizable from 're-resizable'; +import ResizeObserver from 'resize-observer-polyfill'; import type { ResizeDirection } from 're-resizable'; import isEqual from 'lodash.isequal'; import Pane from './pane'; @@ -110,6 +111,7 @@ class SortablePane extends React.Component { handleTouchMove: () => void; handleMouseUp: () => void; handleMove: (e: MouseEvent | Touch) => void; + resizeObserver: ResizeObserver; static defaultProps = { direction: 'horizontal', @@ -147,6 +149,7 @@ class SortablePane extends React.Component { this.handleTouchMove = this.handleTouchMove.bind(this); this.handleMouseUp = this.handleMouseUp.bind(this); this.handleMove = this.handleMove.bind(this); + this.updateSize = this.updateSize.bind(this); } componentDidMount() { @@ -156,8 +159,10 @@ class SortablePane extends React.Component { panes.addEventListener('touchend', this.handleMouseUp); panes.addEventListener('mousemove', this.handleMove); panes.addEventListener('mouseup', this.handleMouseUp); + this.resizeObserver = new ResizeObserver(this.updateSize); + this.resizeObserver.observe(this.panes.parentElement); } - this.setSize(); + this.updateSize(); } componentDidUpdate() { @@ -167,7 +172,7 @@ class SortablePane extends React.Component { if (children.length < panes.length) return this.removePane(); if (this.sizePropsUpdated) { this.sizePropsUpdated = false; - this.setSize(); + this.updateSize(); } return undefined; } @@ -179,6 +184,7 @@ class SortablePane extends React.Component { panes.removeEventListener('touchend', this.handleMouseUp); panes.removeEventListener('mousemove', this.handleMove); panes.removeEventListener('mouseup', this.handleMouseUp); + this.resizeObserver.unobserve(this.panes.parentElement); } } @@ -306,7 +312,10 @@ class SortablePane extends React.Component { return paneIndex; } - setSize() { + /** + * Update pane size + */ + updateSize() { if (!this.panes || !this.panes.children) return; const { panes } = this; const newPanes = (this.props.children || []).map((child, i) => { diff --git a/stories/index.js b/stories/index.js index 1fcb25ea..337321a0 100644 --- a/stories/index.js +++ b/stories/index.js @@ -4,11 +4,13 @@ import './styles.css'; import VerticalPane from './vertical-pane-basic'; import HorizontalPane from './horizontal-pane-basic'; import VerticalPaneWithHandle from './vertical-pane-with-handle'; +import VerticalPercentPanes from './vertical-percent-panes'; import VerticalPaneWithController from './vertical-pane-with-controller'; storiesOf('SortablePane', module) .add('vertical pane basic', () => ) .add('horizontal basic pane basic', () => ) .add('vertical pane with drag handle', () => ) + .add('vertical percent size panes', () => ) .add('vertical pane with controller', () => ); diff --git a/stories/vertical-pane-with-handle.js b/stories/vertical-pane-with-handle.js index c0dc8619..39b08b83 100644 --- a/stories/vertical-pane-with-handle.js +++ b/stories/vertical-pane-with-handle.js @@ -22,7 +22,7 @@ export default () => { console.log('onOrderChange', panes, next); }} onDragStart={(e, id, panes) => console.log('onDragStart', e, id, panes)} - onDragStop={(e, id, panes) => console.log('onDragStop', e, id, panes)} + onDragStop={(e, id, panes) => console.log('onDragStop', e, id, panes)} > {[0, 1, 2].map(id => ( { + return ( +
+ { + console.log('onResize', e, id, panes, data); + }} + onResizeStart={(e, id, panes) => { + console.log('onResizeStart', e, id, panes); + }} + onResizeStop={(e, id, panes, data) => { + console.log('onResizeStop', e, id, panes, data); + }} + onOrderChange={(panes, next) => { + console.log('onOrderChange', panes, next); + }} + onDragStart={(e, id, panes) => console.log('onDragStart', e, id, panes)} + onDragStop={(e, id, panes) => console.log('onDragStop', e, id, panes)} + > + {[0, 1, 2].map(id => ( + +

+ 00{id} +

+ + ))} + +
+ ); +}; diff --git a/yarn.lock b/yarn.lock index f82d6a24..fcda8df4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6818,6 +6818,10 @@ reserved-words@^0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/reserved-words/-/reserved-words-0.1.2.tgz#00a0940f98cd501aeaaac316411d9adc52b31ab1" +resize-observer-polyfill@^1.5.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69" + resolve-from@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"