Merge branch 'master' of https://github.com/Tencent/omi

docs/main-concepts.cn.md

@@ -266,6 +266,30 @@ render(<my-first-element></my-first-element>, 'body')
 
 在元素上添加 `ref={e => { this.anyNameYouWant = e }}` ，然后你就可以 JS 代码里使用 `this.anyNameYouWant` 访问该元素。
 
+你也可以使用 `createRef` 来得到更高的性能:
+
+```js
+import { define, WeElement, createRef } from 'omi'
+
+define('my-first-element', class extends WeElement {
+  onClick = (evt) => {
+    console.log(this.myRef.current)  //h1
+  }
+
+  myRef = createRef()
+
+  render(props) {
+    return (
+      <div>
+        <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>
+      </div>
+    )
+  }
+})
+
+render(<my-first-element></my-first-element>, 'body')
+```
+
 ### extractClass
 
 ```js

docs/main-concepts.md

@@ -283,6 +283,30 @@ render(<my-first-element></my-first-element>, 'body')
 
 Add `ref={e => { this.anyNameYouWant = e }}` to attrs of the element, then you can get it by `this.anyNameYouWant`.
 
+You can also use `createRef`:
+
+```js
+import { define, WeElement, createRef } from 'omi'
+
+define('my-first-element', class extends WeElement {
+  onClick = (evt) => {
+    console.log(this.myRef.current)  //h1
+  }
+
+  myRef = createRef()
+
+  render(props) {
+    return (
+      <div>
+        <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>
+      </div>
+    )
+  }
+})
+
+render(<my-first-element></my-first-element>, 'body')
+```
+
 ### extractClass
 
 ```js

packages/omiu/examples/src/timeline.js

@@ -1,6 +1,12 @@
 import { WeElement, define, render } from 'omi'
-import '../../src/input-label'
-import '../../src/input-button'
+import '../../src/path-progress'
+
+//https://progressbarjs.readthedocs.io/en/latest/api/shape/
+const options = {
+  strokeWidth: 2,
+  color: '#07C160',
+  trailColor: '#ddd'
+};
 
 define('my-app', class extends WeElement {
 
@@ -11,11 +17,48 @@ define('my-app', class extends WeElement {
   render() {
     return (
       <div>
-        <o-input-label label='UserName' />
+        <o-path-progress
+          type='Line' progress={0.5}
+          text={'test'}
+          options={options}
+          initialAnimate={true}
+          containerStyle={{
+            width: '200px',
+            height: '20px'
+          }}
+          containerClassName={'.progressbar'}
+        ></o-path-progress>
         <br />
-        <o-input-button buttonText='提交' onClick={this.onClick} />
-        
+        <br /><br />
+        <o-path-progress
+          type='Circle' progress={0.5}
+
+          text={'test'}
+          options={options}
+          initialAnimate={true}
+          containerStyle={{
+            width: '200px',
+            height: '200px'
+          }}
+          containerClassName={'.progressbar'}
+        ></o-path-progress>
+        <br /><br /><br />
+        <o-path-progress
+          type='SemiCircle' progress={0.5}
+
+          text={'test'}
+          options={options}
+          initialAnimate={true}
+          containerStyle={{
+            width: '200px',
+            height: '100px'
+          }}
+          containerClassName={'.progressbar'}
+        ></o-path-progress>
+
       </div>
+
+
     )
   }
 })

packages/omiu/package.json

@@ -44,6 +44,7 @@
     "esprima-fb": "^15001.1001.0-dev-harmony-fb",
     "file-loader": "^2.0.0",
     "omi": "latest",
+    "progressbar.js": "latest",
     "to-string-loader": "^1.1.5",
     "url-loader": "^1.1.2",
     "webpack": "^3.4.1"

packages/omiu/src/index.js

@@ -32,4 +32,5 @@ import './date-picker'
 import './popover'
 import './rate'
 import './input-label'
-import './input-button'
+import './input-button'
+import './path-progress'

packages/omiu/src/path-progress/index.js

@@ -0,0 +1,100 @@
+import { define, WeElement, extractClass } from 'omi'
+import ProgressBar from 'progressbar.js';
+
+define('o-path-progress', class extends WeElement {
+  defaultProps = {
+    options: {},
+    progress: 0,
+    text: null,
+    initialAnimate: false,
+    containerStyle: {},
+    containerClassName: '.o-path-progress'
+  }
+
+  install() {
+
+    this.data = {
+      shape: null
+    }
+  }
+
+  render(props) {
+    const { containerStyle } = this.props
+    return <div {...extractClass(props)} style={containerStyle} ref={e => { this.progressBar = e }}></div>;
+  }
+
+  // receiveProps(nextProps) {
+  //   if (!isEqual(this.props.options, nextProps.options)) {
+  //     this._destroy();
+  //     this._create(nextProps, this.props);
+
+  //     return;
+  //   }
+
+  //   this._animateProgress(nextProps.progress);
+  //   this._setText(nextProps.text);
+  // }
+
+  installed() {
+    this._create(this.props);
+  }
+
+  uninstall() {
+    this._destroy();
+  }
+
+  _create(props, oldProps) {
+    if (this.data.shape !== null) {
+      throw new Error('Progressbar is already created');
+    }
+
+    // setdata function is not used to prevent a new render cycle
+    // This handling happens outside of React component's lifecycle
+    const container = this.progressBar
+
+    this.data.shape = new ProgressBar[props.type](
+      container,
+      props.options
+    );
+
+
+    if (props.initialAnimate) {
+      if (oldProps) {
+        this._setProgress(oldProps.progress);
+      }
+
+      this._animateProgress(props.progress);
+    } else {
+      this._setProgress(props.progress);
+    }
+
+    this._setText(props.text);
+  }
+
+  _destroy() {
+    if (this.data.shape) {
+      this.data.shape.destroy();
+      this.data.shape = null;
+    }
+  }
+
+  _animateProgress(progress) {
+    this.data.shape.animate(progress);
+  }
+
+  _setProgress(progress) {
+    this.data.shape.set(progress);
+  }
+
+  _setText(text) {
+    if (text) {
+      this.data.shape.setText(text);
+    }
+  }
+})
+
+// class Path extends WeElement {
+//   render() {
+//     return <Shape {...this.props} ShapeClass={ProgressBar.Path} />;
+//   }
+// }

packages/omiu/src/popover/_index.css

@@ -17,7 +17,6 @@
 .o-inner {
   width: auto;
   height: auto;
-  padding: 10px;
   box-sizing: border-box;
   z-index: 100;
 }

packages/omiu/src/popover/index.js

@@ -8,6 +8,11 @@ define('o-popover', class extends WeElement {
     return css
   }
 
+  static defaultProps = {
+    x: 0,
+    y: 0
+  }
+
   close = () => {
     this.props.onClose && this.props.onClose()
   }
@@ -22,11 +27,7 @@ define('o-popover', class extends WeElement {
   bodyClickHandler = () => {
     this.props.onClose && this.props.onClose()
   }
-
-  installed() {
-    document.body.addEventListener('mousedown', this.bodyClickHandler)
-  }
-
+  
   uninstall() {
     document.body.removeEventListener('mousedown', this.bodyClickHandler)
   }
@@ -36,70 +37,83 @@ define('o-popover', class extends WeElement {
   }
 
   updated() {
+    this._setPosition()
+  }
+
+  installed() {
+    document.body.addEventListener('mousedown', this.bodyClickHandler)
+    this._setPosition()
+  }
+
+  _setPosition() {
     if (this.props.show) {
       const rectA = this.base.getBoundingClientRect()
       const rectB = this.props.target.getBoundingClientRect()
 
       let tempLeft, tempTop
+      let st = document.documentElement.scrollTop || document.body.scrollTop
 
 
       switch (this.props.direction) {
         case 'top-left':
-          tempLeft = rectB.left + 'px'
-          tempTop = (rectB.top - rectA.height - 10) + 'px'
+          tempLeft = rectB.left
+          tempTop = (rectB.top - rectA.height - 10)
           break
         case 'top':
-          tempLeft = rectB.left + (rectB.width / 2 - rectA.width / 2) + 'px'
-          tempTop = (rectB.top - rectA.height - 10) + 'px'
+          tempLeft = rectB.left + (rectB.width / 2 - rectA.width / 2)
+          tempTop = (rectB.top - rectA.height - 10)
           break
         case 'top-right':
-          tempLeft = rectB.left + rectB.width - rectA.width + 'px'
-          tempTop = (rectB.top - rectA.height - 10) + 'px'
+          tempLeft = rectB.left + rectB.width - rectA.width
+          tempTop = (rectB.top - rectA.height - 10)
           break
 
         case 'left':
-          tempLeft = rectB.left - rectA.width - 10 + 'px'
-          tempTop = rectB.top + (rectB.height - rectA.height) / 2 + 'px'
+          tempLeft = rectB.left - rectA.width - 10
+          tempTop = rectB.top + (rectB.height - rectA.height) / 2
           break
         case 'left-top':
-          tempLeft = rectB.left - rectA.width - 10 + 'px'
-          tempTop = rectB.top + 'px'
+          tempLeft = rectB.left - rectA.width - 10
+          tempTop = rectB.top
           break
 
         case 'left-bottom':
-          tempLeft = rectB.left - rectA.width - 10 + 'px'
-          tempTop = rectB.top + (rectB.height - rectA.height) + 'px'
+          tempLeft = rectB.left - rectA.width - 10
+          tempTop = rectB.top + (rectB.height - rectA.height)
           break
 
         case 'bottom-left':
-          tempLeft = rectB.left + 'px'
-          tempTop = (rectB.top + rectB.height + 10) + 'px'
+          tempLeft = rectB.left
+          tempTop = (rectB.top + rectB.height + 10)
           break
         case 'bottom':
-          tempLeft = rectB.left + (rectB.width / 2 - rectA.width / 2) + 'px'
-          tempTop = (rectB.top + rectB.height + 10) + 'px'
+          tempLeft = rectB.left + (rectB.width / 2 - rectA.width / 2)
+          tempTop = (rectB.top + rectB.height + 10)
           break
         case 'bottom-right':
-          tempLeft = rectB.left + rectB.width - rectA.width + 'px'
-          tempTop = (rectB.top + rectB.height + 10) + 'px'
+          tempLeft = rectB.left + rectB.width - rectA.width
+          tempTop = (rectB.top + rectB.height + 10)
           break
 
 
         case 'right':
-          tempLeft = rectB.left + rectB.width + 10 + 'px'
-          tempTop = rectB.top + (rectB.height - rectA.height) / 2 + 'px'
+          tempLeft = rectB.left + rectB.width + 10
+          tempTop = rectB.top + (rectB.height - rectA.height) / 2
           break
         case 'right-top':
-          tempLeft = rectB.left + rectB.width + 10 + 'px'
-          tempTop = rectB.top + 'px'
+          tempLeft = rectB.left + rectB.width + 10
+          tempTop = rectB.top
           break
 
         case 'right-bottom':
-          tempLeft = rectB.left + rectB.width + 10 + 'px'
-          tempTop = rectB.top + (rectB.height - rectA.height) + 'px'
+          tempLeft = rectB.left + rectB.width + 10
+          tempTop = rectB.top + (rectB.height - rectA.height)
           break
       }
 
+      tempLeft = tempLeft + this.props.x + 'px'
+      tempTop = tempTop + this.props.y + st + 'px'
+
       if (this.left !== tempLeft || this.top !== tempTop) {
         this.left = tempLeft
         this.top = tempTop
@@ -113,10 +127,11 @@ define('o-popover', class extends WeElement {
     if (!props.show) return
 
     const cls = classNames('_arrow', '_' + props.direction)
+    const { style, ...other } = props
     return (
-      <div class="o-popover" onMouseDown={this.mouseDownHandler} style={{ left: this.left, top: this.top }}>
+      <div class="o-popover" onMouseDown={this.mouseDownHandler} style={{ left: this.left, top: this.top, ...style }}  {...other}>
         <div class={cls}></div>
-        <div class="o-inner" >
+        <div class="o-inner">
           {props.children}
         </div>
       </div>