@ewtd/ewt-notice-bar - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

CHANGELOG.md

@@ -0,1 +1,6 @@
+<a name="0.1.3"></a>
+## [0.1.3](http://git.mistong.com/ewtd/ewt-notice-bar/compare/v0.1.2...v0.1.3) (2020-07-02)
+
+
+
 <a name="0.1.2"></a>
@@ -2,0 +7,0 @@ ## [0.1.2](http://git.mistong.com/ewtd/ewt-notice-bar/compare/v0.1.1...v0.1.2) (2020-06-30)

demo/index.js

@@ -14,2 +14,3 @@ /*
 
+import sourceCodeDynamicNotice from './sourceCodeDynamicNotice';
 import './index.scss';
@@ -19,2 +20,15 @@
 class DemoComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      notice: '前端东西确实蛮多，但也没必要什么都想学。一旦你有这个想法，多半会像个无头苍蝇乱飞。变换方法通过一个给定角度对一个指定的点进行旋转变换，你对梦想一无无所知。',
+    };
+  }
+
+  updateNotice = () => {
+    this.setState({
+      notice: `${new Date().getTime()}程序员的学习，不能仅仅依靠知识点的学习，实战项目的操作可以帮助我们整理知识点以及提高编程能力，更有助于学习和实践，最重要的是提高自己的项目经验，对于找工作而言有着大大的帮助。`,
+    });
+  }
+
   render() {
@@ -39,5 +53,7 @@ const codeLarge = `
     const arrowFunc = '() => {}';
-
+    const {
+      notice,
+    } = this.state;
     return (
-      <Demo>
+      <Demo className="ewt-notice-bar-demo">
         <h2>NoticeBar 组件</h2>
@@ -57,2 +73,9 @@ <p>公告栏，可滚动显示公告内容。</p>
         </Code>
+        <Code sourceCode={sourceCodeDynamicNotice} buttonText="公告内容更新" >
+          <NoticeBar>
+            {notice}
+          </NoticeBar>
+          <br />
+          <button className="notice-bar-demo-btn" onClick={this.updateNotice}>点我更新公告内容</button>
+        </Code>
         <h3>API</h3>
@@ -59,0 +82,0 @@ <table>

dist/index.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("classnames"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","classnames","prop-types"],t):"object"==typeof exports?exports["@ewtd/ewt-notice-bar"]=t(require("react"),require("classnames"),require("prop-types")):e["@ewtd/ewt-notice-bar"]=t(e.React,e.classNames,e.PropTypes)}(this,function(e,t,n){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={"exports":{},"id":r,"loaded":!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="/",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}var o=n(1),i=r(o);e.exports=i.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e,t,n){return t in e?Object.defineProperty(e,t,{"value":n,"enumerable":!0,"configurable":!0,"writable":!0}):e[t]=n,e}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{"constructor":{"value":e,"enumerable":!1,"writable":!0,"configurable":!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{"value":!0});var u=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),l=n(2),c=r(l),f=n(3),p=r(f),d=n(4),y=r(d),b=n(5),m=r(b);n(6);var v=function(e){function t(e){i(this,t);var n=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.onClose=function(){var e=n.props.onClose;n.firstNode=null,n.secondNode=null,n.setState({"visible":!1},function(){e()})},n.move=function(){var e=n.props,t=e.stepLength,r=e.spaceBetween,o=n.contentBox.offsetWidth||n.contentBox.clientWidth,i=n.firstNode.offsetWidth||n.firstNode.clientWidth,a=0,s=o,u=!1,l=!1,c=function f(){if(n.firstNode){u=!0;var e=function c(){if(n.secondNode)return l=!0,s-=t,n.secondNode.style.left=s+"px",s+i<o-r&&!u&&f(),s+i<=0?(l=!1,s=o,void(n.secondNode.style.left=s+"px")):void requestAnimationFrame(c)};return a-=t,n.firstNode.style.left=a+"px",a+i<o-r&&!l&&e(),a+i<=0?(u=!1,a=o,void(n.firstNode.style.left=a+"px")):void requestAnimationFrame(f)}};o<i&&requestAnimationFrame(c)},n.state={"visible":!0},n}return s(t,e),u(t,[{"key":"componentDidMount","value":function(){var e=this,t=this.props.delay;setTimeout(function(){e.move()},1e3*t)}},{"key":"render","value":function(){var e=this,t=this.props,n=t.prefixCls,r=t.children,i=t.style,a=t.className,s=this.state.visible;return s?c.default.createElement("div",{"className":(0,p.default)(""+n,o({},a,!!a)),"style":i},c.default.createElement(m.default,{"className":"ewt-notice-bar-warning-icon","type":"horn-hollow"}),c.default.createElement("div",{"className":n+"-content-box","ref":function(t){e.contentBox=t}},c.default.createElement("div",{"className":n+"-content","ref":function(t){e.firstNode=t}},r),c.default.createElement("div",{"className":n+"-content back-up","ref":function(t){e.secondNode=t}},r)),c.default.createElement(m.default,{"onClick":this.onClose,"className":"ewt-notice-bar-close-btn","type":"close"})):null}}]),t}(c.default.Component);v.displayName="ewt-notice-bar",v.propTypes={"children":y.default.any,"prefixCls":y.default.string,"style":y.default.object,"className":y.default.string,"stepLength":y.default.number,"delay":y.default.number,"spaceBetween":y.default.number,"onClose":y.default.func},v.defaultProps={"children":null,"prefixCls":"ewt-notice-bar","style":{},"className":"","stepLength":1,"delay":5,"spaceBetween":200,"onClose":function(){}},t.default=v},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t,n){!function(t,r){e.exports=r(n(2),n(3),n(4))}(this,function(e,t,n){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={"exports":{},"id":r,"loaded":!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="/",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}var o=n(1),i=r(o);e.exports=i.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e,t,n){return t in e?Object.defineProperty(e,t,{"value":n,"enumerable":!0,"configurable":!0,"writable":!0}):e[t]=n,e}function i(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{"constructor":{"value":e,"enumerable":!1,"writable":!0,"configurable":!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{"value":!0});var l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},c=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),f=n(2),p=r(f),d=n(3),y=r(d),b=n(4),m=r(b);n(5);var v=p.default.Component,h=function(e){function t(){return a(this,t),s(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return u(t,e),c(t,[{"key":"render","value":function(){var e=this.props,t=e.type,n=e.style,r=e.className,a=e.prefixCls,s=i(e,["type","style","className","prefixCls"]);return p.default.createElement("i",l({"className":(0,y.default)(o({},""+a,!0),"icon iconfont-ewt",o({},"icon-ewt-"+t,!!t),o({},r,!!r)),"style":n},s))}}]),t}(v);h.displayName="ewt-icon",h.propTypes={"type":m.default.string,"style":m.default.object,"className":m.default.string,"prefixCls":m.default.string},h.defaultProps={"type":"","style":{},"className":"","prefixCls":"ewt-icon"},t.default=h},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){}])})},function(e,t){}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("classnames"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","classnames","prop-types"],t):"object"==typeof exports?exports["@ewtd/ewt-notice-bar"]=t(require("react"),require("classnames"),require("prop-types")):e["@ewtd/ewt-notice-bar"]=t(e.React,e.classNames,e.PropTypes)}(this,function(e,t,n){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={"exports":{},"id":o,"loaded":!1};return e[o].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="/",t(0)}([function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}var r=n(1),i=o(r);e.exports=i.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t,n){return t in e?Object.defineProperty(e,t,{"value":n,"enumerable":!0,"configurable":!0,"writable":!0}):e[t]=n,e}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{"constructor":{"value":e,"enumerable":!1,"writable":!0,"configurable":!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{"value":!0});var u=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),l=n(2),c=o(l),f=n(3),p=o(f),d=n(4),y=o(d),b=n(5),m=o(b);n(6);var v=void 0,h=void 0,x=function(e){function t(e){i(this,t);var n=s(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.onClose=function(){var e=n.props.onClose;n.firstNode=null,n.secondNode=null,n.setState({"visible":!1},function(){e()})},n.move=function(){var e=n.props,t=e.stepLength,o=e.spaceBetween,r=n.contentBox.offsetWidth||n.contentBox.clientWidth,i=n.firstNode.offsetWidth||n.firstNode.clientWidth,s=0,a=r,u=!1,l=!1,c=function f(){if(n.firstNode){u=!0;var e=function c(){if(n.secondNode)return l=!0,a-=t,n.secondNode.style.left=a+"px",a+i<r-o&&!u&&f(),a+i<=0?(l=!1,a=r,void(n.secondNode.style.left=a+"px")):void requestAnimationFrame(c)};return s-=t,n.firstNode.style.left=s+"px",s+i<r-o&&!l&&e(),s+i<=0?(u=!1,s=r,void(n.firstNode.style.left=s+"px")):void requestAnimationFrame(f)}};r<i&&requestAnimationFrame(c)},n.state={"visible":!0},n}return a(t,e),u(t,[{"key":"componentDidMount","value":function(){var e=this,t=this.props.delay;setTimeout(function(){e.move()},1e3*t)}},{"key":"componentWillReceiveProps","value":function(e){var t=this,n=e.children,o=e.delay;n!==this.props.children&&(this.firstNode=null,this.secondNode=null,this.setState({"visible":!1},function(){v&&clearTimeout(v),v=setTimeout(function(){t.setState({"visible":!0},function(){h&&clearTimeout(h),h=setTimeout(function(){t.move()},1e3*o)})})}))}},{"key":"render","value":function(){var e=this,t=this.props,n=t.prefixCls,o=t.children,i=t.style,s=t.className,a=this.state.visible;return a?c.default.createElement("div",{"className":(0,p.default)(""+n,r({},s,!!s)),"style":i},c.default.createElement(m.default,{"className":"ewt-notice-bar-warning-icon","type":"horn-hollow"}),c.default.createElement("div",{"className":n+"-content-box","ref":function(t){e.contentBox=t}},c.default.createElement("div",{"className":n+"-content","ref":function(t){e.firstNode=t}},o),c.default.createElement("div",{"className":n+"-content back-up","ref":function(t){e.secondNode=t}},o)),c.default.createElement(m.default,{"onClick":this.onClose,"className":"ewt-notice-bar-close-btn","type":"close"})):null}}]),t}(c.default.Component);x.displayName="ewt-notice-bar",x.propTypes={"children":y.default.any,"prefixCls":y.default.string,"style":y.default.object,"className":y.default.string,"stepLength":y.default.number,"delay":y.default.number,"spaceBetween":y.default.number,"onClose":y.default.func},x.defaultProps={"children":null,"prefixCls":"ewt-notice-bar","style":{},"className":"","stepLength":1,"delay":5,"spaceBetween":200,"onClose":function(){}},t.default=x},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t,n){!function(t,o){e.exports=o(n(2),n(3),n(4))}(this,function(e,t,n){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={"exports":{},"id":o,"loaded":!1};return e[o].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="/",t(0)}([function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}var r=n(1),i=o(r);e.exports=i.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t,n){return t in e?Object.defineProperty(e,t,{"value":n,"enumerable":!0,"configurable":!0,"writable":!0}):e[t]=n,e}function i(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{"constructor":{"value":e,"enumerable":!1,"writable":!0,"configurable":!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{"value":!0});var l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},c=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),f=n(2),p=o(f),d=n(3),y=o(d),b=n(4),m=o(b);n(5);var v=p.default.Component,h=function(e){function t(){return s(this,t),a(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return u(t,e),c(t,[{"key":"render","value":function(){var e=this.props,t=e.type,n=e.style,o=e.className,s=e.prefixCls,a=i(e,["type","style","className","prefixCls"]);return p.default.createElement("i",l({"className":(0,y.default)(r({},""+s,!0),"icon iconfont-ewt",r({},"icon-ewt-"+t,!!t),r({},o,!!o)),"style":n},a))}}]),t}(v);h.displayName="ewt-icon",h.propTypes={"type":m.default.string,"style":m.default.object,"className":m.default.string,"prefixCls":m.default.string},h.defaultProps={"type":"","style":{},"className":"","prefixCls":"ewt-icon"},t.default=h},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){}])})},function(e,t){}])});

package.json

 {
   "name": "@ewtd/ewt-notice-bar",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "An ewt component",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/NoticeBar.js

@@ -8,2 +8,5 @@ import React from 'react';
 
+// timeout 的清除是为了防止公告内容更新过快导致的时序问题
+let updateTimeoutAnchor;
+let updateTimeoutDelayAnchor;
 export default class NoticeBar extends React.Component {
@@ -50,2 +53,42 @@ static displayName = 'ewt-notice-bar';
 
+  componentWillReceiveProps(nextProps) {
+    // 简单处理一下公告内容更新的情况
+    const {
+      children: nextChildren,
+      delay,
+    } = nextProps;
+    if (nextChildren !== this.props.children) {
+      // 两次公告内容不一样，触发重新渲染
+      this.firstNode = null;
+      this.secondNode = null;
+      // 销毁原有组件
+      this.setState({
+        visible: false,
+      }, () => {
+        /**
+         * 重新渲染新内容
+         * 这里之所以要走一次 setTimeout 是为了将 setState({visible: false}) 和
+         * setState({visible: true}) 的时序分开，否则 react 会将两个 setState 合并为一个
+         * 那么 setState({ visible: false }); 的代码就失效了，无法卸载以前的模块
+         */
+        if (updateTimeoutAnchor) {
+          clearTimeout(updateTimeoutAnchor);
+        }
+        updateTimeoutAnchor = setTimeout(() => {
+          this.setState({
+            visible: true,
+          }, () => {
+            // 新内容渲染完成后，开始计时滚动
+            if (updateTimeoutDelayAnchor) {
+              clearTimeout(updateTimeoutDelayAnchor);
+            }
+            updateTimeoutDelayAnchor = setTimeout(() => {
+              this.move();
+            }, delay * 1000);
+          });
+        });
+      });
+    }
+  }
+
   /**
@@ -52,0 +95,0 @@ * 关闭按钮点击

No alert changes

Improved metrics

Total package byte prevSize

26484

13.95%

Number of package files

13

8.33%

Lines of code

408

32.04%

No dependency changes