bokuweb · bokuweb · Jun 14, 2016 · Jun 14, 2016 · Jun 14, 2016 · Jun 14, 2016
diff --git a/README.md b/README.md
@@ -255,6 +255,13 @@ The `style` property is used to set the style of a Pane component.
 
 ## Changelog
 
+### V0.5.0
+
+- Fixes a nasty bug
+- Add isResizable props to Pane component
+- Set `user-select: none` when resizeing or moving.
+- update example
+
 ### V0.4.1
 
 - Fixes a nasty bug where all Panes could end up sharing the same static style #44 (thanks @ara4n)

diff --git a/example/index.html b/example/index.html
@@ -1,25 +1,70 @@
 <!doctype html>
 <html lang="ja">
-<head>
-  <meta charset="UTF-8">
-  <title>React-resizable-and-movable example</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <style>
-   .body {
-       width: 100%;
-       height: 100%;
-       overflow-x:scroll;
-   }
-   #content {
-       margin: 100px auto;
-       width: 800px;
-   }
-  </style>
-</head>
+    <head>
+        <meta charset="UTF-8">
+        <title>react-sortable-pane example</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
+        <style>
+         html {
+             background: #1fc8db;
+             background-size: cover;
+             background-attachment: fixed;
+         }
+         body {
+             width:100%;
+             height:100%;
+             min-height: 100%;
+             margin:0;
+             padding:0;
+         }
 
-<body>
-  <div id="content"></div>
-  <script src="dist/bundle.js"></script>
-</body>
+         #content {
+             width: 500px;
+             height: 100%;
+             margin: 120px auto;
+             overflow: auto;
+         }
+         h1 {
+             font-family: 'Pacifico', cursive;
+             color: #fff;
+             font-size: 56px;
+             text-align: center;
+         }
+
+         .item {
+             text-align:center;
+             border: solid 1px #fff;
+             border-radius: 5px;
+             font-size:18px;
+             overflow: hidden;
+             color: #fff;
+             line-height: 100%;
+             display: -webkit-flex;
+             display: flex;
+             -webkit-align-items: center;
+             align-items: center;
+             -webkit-justify-content:
+             justify-content: center;
+             margin: 0 auto;
+             padding: 4px;
+             cursor: pointer;
+         }
+         .item span{
+             text-align: center;
+             display: inline-block;
+             width: 100%;
+             font-family: 'Pacifico', cursive;
+             font-size: 32px;
+         }
+
+        </style>
+    </head>
+
+    <body>
+         <div id="content"></div>
+         <a href="https://github.com/bokuweb/react-sortable-pane" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#1fc8db; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+        <script src="dist/bundle.js"></script>
+    </body>
 
 </html>
diff --git a/example/src/example.js b/example/src/example.js
@@ -1,15 +1,12 @@
 import React, { Component } from 'react';
 import { SortablePane, Pane } from '../../src';
+import { Button } from 're-bulma';
 
 const style = {
   fontSize: '40px',
   textAlign: 'center',
-  paddingTop: '60px',
-  paddingRight: '60px',
-  height: '400px',
-  border: 'solid 1px #ccc',
   borderRadius: '5px',
-  backgroundColor: '#fff',
+  padding: '15px',
 };
 
 export default class Example extends Component {
@@ -22,43 +19,46 @@ export default class Example extends Component {
         <Pane
           id={1}
           key={1}
-          width={200}
-          height={70}
+          width={420}
+          height={120}
           minWidth={100}
           maxWidth={800}
           minHeight={100}
           style={style}
+          className="item"
         >
-          1
+          <span>no1<br />resize or sort me!!</span>
         </Pane>,
         <Pane
           id={2}
           key={2}
-          width={300}
-          height={50}
+          width={450}
+          height={100}
           minWidth={100}
           minHeight={100}
           style={style}
+          className="item"
         >
-          2
+          <span>no2<br />resize or sort me!!</span>
         </Pane>,
         <Pane
           id={3}
           key={3}
-          width={100}
-          height={40}
+          width={470}
+          height={110}
           minWidth={100}
           minHeight={100}
           style={style}
+          className="item"
         >
-          3
+          <span>no3<br />resize or sort me!!</span>
         </Pane>,
       ],
     };
     this.add = ::this.add;
     this.remove = ::this.remove;
     this.onResize = ::this.onResize;
-    setInterval(() => this.setState({ order: this.state.order.map(order => (order + 1) % 3) }), 1000);
+    // setInterval(() => this.setState({ order: this.state.order.map(order => (order + 1) % 3) }), 1000);
   }
 
   onResize(i) {
@@ -70,13 +70,14 @@ export default class Example extends Component {
       <Pane
         id={++this.id}
         key={this.id}
-        width={~~(Math.random() * 200) + 100}
+        width={~~(Math.random() * 100) + 350}
         height={~~(Math.random() * 200) + 100}
         minWidth={50}
         minHeight={100}
         style={style}
+        className="item"
       >
-       {this.id}
+        <span>no{this.id}<br />resize or sort me!!</span>
       </Pane>
     ));
     this.setState({ list: this.state.list });
@@ -90,11 +91,29 @@ export default class Example extends Component {
   render() {
     return (
       <div>
-        <a onClick={this.add} >add</a>
-        <a onClick={this.remove} >remove</a>
+        <h1>sortable pane</h1>
+        <Button
+          onClick={this.add}
+          style="isOutlined"
+          color="isPrimary"
+          customStyle={{
+            color: '#fff', borderColor: '#fff',
+          }}
+        >
+          Add
+        </Button>
+        <Button
+          onClick={this.remove}
+          style="isOutlined"
+          color="isPrimary"
+          customStyle={{
+            color: '#fff', borderColor: '#fff', margin: '0 0 30px 10px',
+          }}
+        >
+          Remove</Button>
         <SortablePane
           direction="vertical"
-          margin={10}
+          margin={20}
           onResize={this.onResize}
           onOrderChange={(pane) => console.dir(pane)}
           order={this.state.order}

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-sortable-pane",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -52,22 +52,8 @@
     "eslint": "^2.7.0",
     "eslint-config-airbnb": "^6.2.0",
     "eslint-plugin-react": "^4.2.0",
-    "espower-babel": "^3.3.0",
-    "espower-loader": "^1.0.0",
-    "espowerify": "^1.0.0",
-    "estraverse": "^4.1.1",
-    "estraverse-fb": "^1.3.1",
     "husky": "^0.11.4",
-    "intelli-espower-loader": "^1.0.0",
-    "karma": "^0.13.19",
-    "karma-browserify": "^4.4.0",
-    "karma-cli": "^0.1.1",
-    "karma-mocha": "^0.2.0",
-    "karma-phantomjs-launcher": "^0.2.1",
-    "mocha": "^2.3.3",
-    "phantomjs": "^1.9.18",
-    "phantomjs-polyfill": "^0.0.1",
-    "power-assert": "^1.1.0",
+    "re-bulma": "0.0.5",
     "react": "^15.0.1",
     "react-addons-test-utils": "^15.0.1",
     "sinon": "^1.17.2",
@@ -83,7 +69,7 @@
   ],
   "dependencies": {
     "lodash.isequal": "^4.1.1",
-    "react-motion": "^0.4.3",
-    "react-resizable-box": "^1.2.1"
+    "react-motion": "^0.4.4",
+    "react-resizable-box": "^1.3.2"
   }
 }
diff --git a/screenshot/screenshot.gif b/screenshot/screenshot.gif