nuke-biz-custom-loading/demo/basic.js

nuke-biz-custom-loading

// {"framework" : "Rax"}
define("docs/basic", function(require) {/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, {
/******/ 				configurable: false,
/******/ 				enumerable: true,
/******/ 				get: getter
/******/ 			});
/******/ 		}
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "/";
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _rax = __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"rax\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()));

var _weexNuke = __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"weex-nuke\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()));

var _nukeBizCustomLoading = __webpack_require__(1);

var _nukeBizCustomLoading2 = _interopRequireDefault(_nukeBizCustomLoading);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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) : subClass.__proto__ = superClass; } /** @jsx createElement */


var App = function (_Component) {
  _inherits(NukeDemoIndex, _Component);

  function NukeDemoIndex() {
    _classCallCheck(this, NukeDemoIndex);

    var _this = _possibleConstructorReturn(this, (NukeDemoIndex.__proto__ || Object.getPrototypeOf(NukeDemoIndex)).call(this));

    _this.state = {
      number: 9
    };
    _this.closeHandler = _this.closeHandler.bind(_this);
    _this.showHandler = _this.showHandler.bind(_this);
    _this.showLoading = _this.showLoading.bind(_this);
    _this.hideLoading = _this.hideLoading.bind(_this);
    return _this;
  }

  _createClass(NukeDemoIndex, [{
    key: 'showLoading',
    value: function showLoading() {
      this.loading.wrappedInstance.show();
      var that = this;
      setTimeout(function () {
        that.setState({
          number: 222
        });
        that.loading.wrappedInstance.hide();
      }, 3000);
    }
  }, {
    key: 'hideLoading',
    value: function hideLoading() {
      this.loading.wrappedInstance.hide();
    }
  }, {
    key: 'closeHandler',
    value: function closeHandler() {
      console.log('loading closed');
      this.setState({
        number: 888
      });
    }
  }, {
    key: 'showHandler',
    value: function showHandler() {
      console.log('loading shown');
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      return (0, _rax.createElement)(
        _weexNuke.Page,
        { title: 'custom-loading' },
        (0, _rax.createElement)(_weexNuke.Page.Intro, { main: 'basic', sub: 'basic-sub' }),
        (0, _rax.createElement)(
          _weexNuke.Text,
          null,
          this.state.number
        ),
        (0, _rax.createElement)(
          _weexNuke.Button,
          {
            onPress: this.showLoading,
            type: 'primary',
            style: { zIndex: 1000 }
          },
          '\u6253\u5F00'
        ),
        (0, _rax.createElement)(
          _weexNuke.Button,
          {
            onPress: this.hideLoading,
            type: 'primary',
            style: { zIndex: 1000 }
          },
          '\u5173\u95ED'
        ),
        (0, _rax.createElement)(_nukeBizCustomLoading2.default, {
          ref: function ref(n) {
            _this2.loading = n;
          },
          image: {
            uri: '//laz-img-cdn.alicdn.com/tfs/TB1ISHWkgvD8KJjy0FlXXagBFXa-200-200.gif',
            style: {
              width: 90,
              height: 90
            }
          },
          animate: false,
          style: { backgroundColor: 'transparent' },
          onHide: this.closeHandler,
          onShow: this.showHandler
        })
      );
    }
  }]);

  return NukeDemoIndex;
}(_rax.Component);

(0, _rax.render)((0, _rax.createElement)(App, null));

/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _rax = __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"rax\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()));

var _weexNuke = __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"weex-nuke\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()));

var _styles = __webpack_require__(2);

var _styles2 = _interopRequireDefault(_styles);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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) : subClass.__proto__ = superClass; } /** @jsx createElement */


var connectStyle = _weexNuke.ThemeProvider.connectStyle;
var isWeb = _weexNuke.Env.isWeb;

var CustomLoading = function (_Component) {
  _inherits(CustomLoading, _Component);

  function CustomLoading(props) {
    _classCallCheck(this, CustomLoading);

    var _this = _possibleConstructorReturn(this, (CustomLoading.__proto__ || Object.getPrototypeOf(CustomLoading)).call(this, props));

    var defaultVisible = props.defaultVisible;
    _this.state = {
      shown: defaultVisible
    };
    _this.show = _this.show.bind(_this);
    _this.hide = _this.hide.bind(_this);
    _this.onShow = _this.onShow.bind(_this);
    _this.onHide = _this.onHide.bind(_this);
    return _this;
  }

  _createClass(CustomLoading, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.loading = this.refs.mask;
      if (this.state.shown) {
        this.show();
      }
    }
  }, {
    key: 'shouldComponentUpdate',
    value: function shouldComponentUpdate(nextProps, nextState) {
      return nextState.shown !== this.state.shown;
    }
  }, {
    key: 'onShow',
    value: function onShow() {
      this.props.onShow && this.props.onShow();
    }
  }, {
    key: 'onHide',
    value: function onHide() {
      this.setState({
        shown: false
      });
      this.props.onHide && this.props.onHide();
    }
  }, {
    key: 'show',
    value: function show() {
      if (this.loading) {
        this.setState({
          shown: true
        });
        this.loading.show && this.loading.show();
      }
    }
  }, {
    key: 'hide',
    value: function hide() {
      if (this.loading) {
        this.loading.hide && this.loading.hide();
      }
    }
  }, {
    key: 'wrapPress',
    value: function wrapPress(e) {
      if (isWeb) {
        e.stopPropagation();
      }
    }
  }, {
    key: 'touchMove',
    value: function touchMove(e) {
      if (isWeb) {
        e.preventDefault();
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var styles = this.props.themeStyle;
      var _props = this.props,
          _props$image = _props.image,
          image = _props$image === undefined ? { style: {} } : _props$image,
          animate = _props.animate,
          _props$style = _props.style,
          style = _props$style === undefined ? {} : _props$style;


      var imageWrap = Object.assign({}, styles.imageWrap, image.style.width ? { width: image.style.width } : {}, image.style.height ? { height: image.style.height } : {});
      return (0, _rax.createElement)(
        _weexNuke.Mask,
        {
          style: [styles.mask, style],
          maskClosable: false,
          defaultVisible: false,
          animate: animate,
          onShow: this.onShow,
          onHide: this.onHide,
          onTouchmove: this.touchMove,
          ref: 'mask'
        },
        (0, _rax.createElement)(
          _weexNuke.View,
          { style: imageWrap },
          (0, _rax.createElement)(_weexNuke.Image, {
            source: { uri: image.uri },
            style: [styles.image, image.style],
            resizeMode: 'cover',
            quality: 'original'
          })
        )
      );
    }
  }]);

  return CustomLoading;
}(_rax.Component);

CustomLoading.propTypes = {
  themeStyle: _rax.PropTypes.any,
  style: _rax.PropTypes.any,
  image: _rax.PropTypes.any,
  onHide: _rax.PropTypes.func,
  onShow: _rax.PropTypes.func
};

CustomLoading.defaultProps = {
  themeStyle: {},
  image: {},
  style: {},
  animate: true,
  onHide: function onHide() {},
  onShow: function onShow() {}
};
CustomLoading.displayName = 'CustomLoading';
var StyledCustomLoading = connectStyle(_styles2.default)(CustomLoading);

exports.default = StyledCustomLoading;
module.exports = exports['default'];

/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
  value: true
});

var _variable = __webpack_require__(3);

var _variable2 = _interopRequireDefault(_variable);

var _mixin = __webpack_require__(4);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function styleProvider() {
  var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

  var Variables = (0, _variable2.default)(theme);
  return {
    CustomLoading: {
      mask: {
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
        flex: 1,
        backgroundColor: (0, _mixin.rgba)(Variables['mask-bg-color'], Variables.opacity)
      },
      imageWrap: {
        width: Variables['icon-size'],
        height: Variables['icon-size']

      },
      image: {
        width: Variables['icon-size'],
        height: Variables['icon-size'],
        quality: 'original'

      }

    }
  };
}
exports.default = styleProvider;
module.exports = exports['default'];

/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
  value: true
});

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; };

function VariableMix(theme) {
  var Core = theme.Core;
  var ComponentCustomStyle = theme.CustomLoading;
  var MaskBgColor = Core['color-black'];

  // / size
  // / @namespace size/icon
  var IconSize = 70;

  // / icon-color
  // / @namespace statement
  var IconColor = Core['color-white'];

  // / opacity
  // / @namespace statement
  var Opacity = '.6';

  var variables = {
    'mask-bg-color': MaskBgColor,
    'icon-size': IconSize,
    'icon-color': IconColor,
    opacity: Opacity

  };
  return _extends({}, variables, ComponentCustomStyle);
}
exports.default = VariableMix;
module.exports = exports['default'];

/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
  value: true
});
function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function (m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  if (!result) return null;

  return {

    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  };
}
function rgba(hex, opacity) {
  var result = hexToRgb(hex);
  if (!result) return null;

  return "rgba(" + result.r + "," + result.g + "," + result.b + "," + opacity + ")";
}

exports.rgba = rgba;

/***/ })
/******/ ])}); require("docs/basic");;