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

Comparing version 0.1.0 to 0.1.1

CHANGELOG.md

@@ -1,15 +0,5 @@
-<a name="1.0.2"></a>
-## [1.0.2](http://git.mistong.com/ewtd/ewt-template/compare/v1.0.1...v1.0.2) (2020-02-20)
+<a name="0.1.1"></a>
+## 0.1.1 (2020-06-30)
 
 
 
-<a name="1.0.1"></a>
-## [1.0.1](http://git.mistong.com/ewtd/ewt-template/compare/v1.0.0...v1.0.1) (2020-02-20)
-
-
-
-<a name="1.0.0"></a>
-# [1.0.0](http://git.mistong.com/ewtd/ewt-template/compare/1.0.0...v1.0.0) (2019-09-23)
-
-
-

demo/index.js

@@ -22,5 +22,7 @@ /*
 
-<NoticeBar style={{ width: '200px' }} type="large" />
+<NoticeBar></NoticeBar>
 `;
 
+    const arrowFunc = '() => {}';
+
     return (
@@ -38,3 +40,3 @@ <Demo>
         <Code sourceCode={codeLarge} buttonText="内容未溢出不滚动" >
-          <NoticeBar>
+          <NoticeBar onClose={() => { console.log('closed'); }}>
             前端东西确实蛮多，但也没必要什么都想学。一旦你有这个想法，多半会像个无头苍蝇乱飞。
@@ -63,2 +65,9 @@ </NoticeBar>
             <tr>
+              <td>onClose</td>
+              <td>关闭按钮点击回调函数</td>
+              <td>func</td>
+              <td>否</td>
+              <td><Code mode="inline">{arrowFunc}</Code></td>
+            </tr>
+            <tr>
               <td>stepLength</td>
@@ -65,0 +74,0 @@ <td>步长，单位px</td>

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),a=r(o);e.exports=a.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 a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(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 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}}(),s=n(2),l=r(s),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(){var e,n,r,o;a(this,t);for(var u=arguments.length,c=Array(u),s=0;s<u;s++)c[s]=arguments[s];return n=r=i(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(c))),r.move=function(){var e=r.props,t=e.stepLength,n=e.spaceBetween,o=r.contentBox.offsetWidth||r.contentBox.clientWidth,a=r.firstNode.offsetWidth||r.firstNode.clientWidth,i=0,u=o,c=!1,s=!1,l=function f(){c=!0;var e=function l(){return s=!0,u-=t,r.secondNode.style.left=u+"px",u+a<o-n&&!c&&f(),u+a<=0?(s=!1,u=o,void(r.secondNode.style.left=u+"px")):void requestAnimationFrame(l)};return i-=t,r.firstNode.style.left=i+"px",i+a<o-n&&!s&&e(),i+a<=0?(c=!1,i=o,void(r.firstNode.style.left=i+"px")):void requestAnimationFrame(f)};o<a&&requestAnimationFrame(l)},o=n,i(r,o)}return u(t,e),c(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,a=t.style,i=t.className;return l.default.createElement("div",{"className":(0,p.default)(""+n,o({},i,!!i)),"style":a},l.default.createElement(m.default,{"className":"ewt-notice-bar-warning-icon","type":"horn-hollow"}),l.default.createElement("div",{"className":n+"-content-box","ref":function(t){e.contentBox=t}},l.default.createElement("div",{"className":n+"-content","ref":function(t){e.firstNode=t}},r),l.default.createElement("div",{"className":n+"-content back-up","ref":function(t){e.secondNode=t}},r)),l.default.createElement(m.default,{"className":"ewt-notice-bar-close-btn","type":"close"}))}}]),t}(l.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},v.defaultProps={"children":null,"prefixCls":"ewt-notice-bar","style":{},"className":"","stepLength":1,"delay":5,"spaceBetween":200},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),a=r(o);e.exports=a.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 a(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 i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(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 c(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 s=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},l=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 i(this,t),u(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return c(t,e),l(t,[{"key":"render","value":function(){var e=this.props,t=e.type,n=e.style,r=e.className,i=e.prefixCls,u=a(e,["type","style","className","prefixCls"]);return p.default.createElement("i",s({"className":(0,y.default)(o({},""+i,!0),"icon iconfont-ewt",o({},"icon-ewt-"+t,!!t),o({},r,!!r)),"style":n},u))}}]),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(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){}])});

package.json

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

src/NoticeBar.js

@@ -19,2 +19,3 @@ import React from 'react';
     spaceBetween: PropTypes.number,
+    onClose: PropTypes.func,
   };
@@ -30,4 +31,12 @@
     spaceBetween: 200, // 两个滚动元素之间的间隔
+    onClose: () => {},
   };
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: true,
+    };
+  }
+
   componentDidMount() {
@@ -43,2 +52,18 @@ const {
   /**
+   * 关闭按钮点击
+   */
+  onClose = () => {
+    const {
+      onClose: propsOnClose,
+    } = this.props;
+    this.firstNode = null;
+    this.secondNode = null;
+    this.setState({
+      visible: false,
+    }, () => {
+      propsOnClose();
+    });
+  }
+
+  /**
    * 公告滚动函数
@@ -60,2 +85,8 @@ */
     } = this.props;
+    // const {
+    //   visible: visible1,
+    // } = this.state;
+    // if (!visible1) {
+    //   return;
+    // }
     const boxWidth = this.contentBox.offsetWidth || this.contentBox.clientWidth;
@@ -70,5 +101,11 @@ const contentWidth = this.firstNode.offsetWidth || this.firstNode.clientWidth;
     const firstNodeStep = () => {
+      if (!this.firstNode) {
+        return;
+      }
       isFirstNodeMoving = true;
       // 第二个元素滚动函数
       const secondNodeStep = () => {
+        if (!this.secondNode) {
+          return;
+        }
         isSecondNodeMoving = true;
@@ -121,2 +158,8 @@ secondNodeXPosition -= stepLength;
     } = this.props;
+    const {
+      visible,
+    } = this.state;
+    if (!visible) {
+      return null;
+    }
 
@@ -146,3 +189,3 @@ return (
         </div>
-        <Icon className="ewt-notice-bar-close-btn" type="close" />
+        <Icon onClick={this.onClose} className="ewt-notice-bar-close-btn" type="close" />
       </div>
@@ -149,0 +192,0 @@ );

No alert changes

Improved metrics

Total package byte prevSize

22670

4.21%

Lines of code

300

19.52%

No dependency changes