quesbook-component
Version:
320 lines (278 loc) • 13.9 kB
JavaScript
'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 _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _QbLayout = require('./QbLayout');
var _QbLayout2 = _interopRequireDefault(_QbLayout);
var _QbDatePicker = require('./QbDatePicker');
var _QbButton = require('./QbButton');
var _QbButton2 = _interopRequireDefault(_QbButton);
var _QbHighlight = require('./QbHighlight');
var _QbHighlight2 = _interopRequireDefault(_QbHighlight);
var _QbScore = require('./QbScore');
var _QbScore2 = _interopRequireDefault(_QbScore);
var _QbInput = require('./QbInput');
var _QbModal = require('./QbModal');
var _QbDropDown = require('./QbDropDown');
var _QbMessageCard = require('./QbMessageCard');
var _QbMessageCard2 = _interopRequireDefault(_QbMessageCard);
var _QbSlider = require('./QbSlider');
var _QbSlider2 = _interopRequireDefault(_QbSlider);
var _QbCard = require('./QbCard');
var _xIcon3x = require('./assets/image/icon/x-icon@3x.png');
var _xIcon3x2 = _interopRequireDefault(_xIcon3x);
var _QbTabs = require('./QbTabs');
var _QbCollapse = require('./QbCollapse');
var _rcCollapse = require('rc-collapse');
var _rcCollapse2 = _interopRequireDefault(_rcCollapse);
require('rc-collapse/assets/index.css');
require('./scss/_variables.scss');
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; } /**
* Created by az on 2017/7/24.
*/
var Panel = _rcCollapse2.default.Panel;
var Test = function (_Component) {
_inherits(Test, _Component);
function Test(props) {
_classCallCheck(this, Test);
var _this = _possibleConstructorReturn(this, (Test.__proto__ || Object.getPrototypeOf(Test)).call(this, props));
_this.state = {
show: false,
switchState: true,
showCard: true,
numlist: ['yahaha']
};
return _this;
}
_createClass(Test, [{
key: 'toggleModal',
value: function toggleModal() {
this.setState({
show: !this.state.show
});
console.log('Tag show is, ', this.state.show);
}
}, {
key: 'switchHandler',
value: function switchHandler() {
console.log('Tag click');
this.setState(function (prevState, props) {
return { switchState: !prevState.switchState };
});
}
}, {
key: 'messageToggle',
value: function messageToggle() {
this.setState(function (prevState, props) {
return {
showCard: !prevState.showCard
};
});
}
}, {
key: 'sliderChange',
value: function sliderChange(lowPrice, highPrice) {
console.log(lowPrice, highPrice);
}
}, {
key: 'buttonIconClick',
value: function buttonIconClick() {
alert('icon cliasc');
}
}, {
key: 'add',
value: function add() {
console.log('Tag before numlist:', this.state.numlist);
var a = this.state.numlist;
a.push('another one');
this.setState({
numlist: a
});
}
}, {
key: 'render',
value: function render() {
var dropDownContent = [{
label: 'abc',
value: 'abc'
}, {
label: 'bcd',
value: 'bcd'
}, {
label: 'cde',
value: 'cde'
}];
var list = this.state.numlist.map(function (data) {
return _react2.default.createElement(
'div',
null,
data
);
});
console.log('Tag numlist:', this.state.numlist);
var collapseContent = [{
header: _react2.default.createElement(
'div',
null,
_react2.default.createElement('img', { src: '' }),
_react2.default.createElement(
'div',
{ style: { color: '#ffffff' } },
'hello'
)
),
content: _react2.default.createElement(
'div',
null,
'hi'
)
}, {
header: _react2.default.createElement(
'div',
null,
_react2.default.createElement('img', { src: '' }),
_react2.default.createElement(
'div',
null,
'god'
)
),
content: _react2.default.createElement(
'div',
null,
'like'
)
}];
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(_QbScore2.default, { content: '32' }),
_react2.default.createElement(_QbScore2.default, { content: '32', style: { 'borderColor': '#b9cff3', 'color': '#b9cff3', 'fontSize': '40px' } }),
_react2.default.createElement(
'h1',
null,
'My StudyPlan ',
_react2.default.createElement(_QbHighlight2.default, { content: 'Quesbook Web' })
),
_react2.default.createElement(
_QbButton2.default,
{ label: 'hello',
className: 'btn btn-secondary',
size: 'small',
iconClick: this.buttonIconClick.bind(this),
dataTarget: '#modal', dataToggle: 'modal' },
_react2.default.createElement('img', { src: _xIcon3x2.default, style: { height: 'inherit', width: 'inherit' } })
),
_react2.default.createElement(
'button',
{ className: 'btn btn-primary', 'data-toggle': 'modal', 'data-target': '#modal' },
't'
),
_react2.default.createElement(_QbInput.QbCheckBox, { label: 'hello', changeHandler: function changeHandler() {
return alert('hi');
}, fontStyle: { fontSize: 16 } }),
_react2.default.createElement(_QbInput.QbRadio, { label: 'hello', changeHandler: function changeHandler() {
return alert('hello');
}, fontStyle: { fontSize: 16 } }),
_react2.default.createElement(_QbInput.QbInput, { size: 'small', changeHandler: function changeHandler(e) {
return alert(e.target.value);
} }),
_react2.default.createElement(
_QbModal.QbModal,
{ target: 'modal' },
_react2.default.createElement(
_QbModal.QbModalHeader,
null,
_react2.default.createElement(
'div',
null,
'header'
)
),
_react2.default.createElement(
_QbModal.QbModalBody,
null,
_react2.default.createElement(
'div',
null,
'body'
)
),
_react2.default.createElement(
_QbModal.QbModalFooter,
null,
_react2.default.createElement(_QbButton2.default, { label: 'close', dataTarget: '#modal', dataToggle: 'modal' })
)
),
_react2.default.createElement(_QbDropDown.QbDropDown, { defaultData: { label: "nihao", value: 'hello' }, 'default': true, inputType: 'button', btnStyle: { width: 350, textAlign: 'left' },
dropdownStyle: { width: 400 }, compStyle: { position: 'relative', width: 400 },
content: dropDownContent, onChange: function onChange(data) {
return console.log('TAg data:', data);
}
}),
_react2.default.createElement(_QbInput.QbSwitcher, { switchState: this.state.switchState, clickHandler: this.switchHandler.bind(this) }),
_react2.default.createElement(_QbDatePicker.QbTimePicker, { ensureTime: function ensureTime(time) {
return console.log('Tag time is:', time);
} }),
_react2.default.createElement(_QbDatePicker.QbDatePicker, null),
_react2.default.createElement(_QbButton2.default, { label: 'show message',
className: 'btn btn-primary',
size: 'small',
clickHandler: this.messageToggle.bind(this) }),
_react2.default.createElement(_QbMessageCard2.default, { display: this.state.showCard,
title: 'hello!',
content: 'ha lou a !',
onCancelClick: this.messageToggle.bind(this) }),
_react2.default.createElement(_QbSlider2.default, { maxMark: '$10+',
minMark: 'Free!',
maxPrice: 15,
style: { height: 100, width: 300 },
changeHandler: this.sliderChange.bind(this) }),
_react2.default.createElement(_QbCard.QbCard, { cardStyle: { height: 120, width: 500 }, avatarSrc: _xIcon3x2.default, rate: 3.5 }),
_react2.default.createElement(
'button',
{ onClick: this.add.bind(this) },
'add'
),
_react2.default.createElement(
_QbTabs.QbTabs,
null,
_react2.default.createElement(
_QbTabs.QbTab,
{ ref: 'hlo' },
list
),
_react2.default.createElement(
_QbTabs.QbTab,
{ ref: 'bin' },
_react2.default.createElement(
'div',
null,
'asd'
)
),
_react2.default.createElement(
_QbTabs.QbTab,
{ ref: 'ho' },
_react2.default.createElement(
'div',
null,
'xixiix'
)
)
),
_react2.default.createElement(_QbCollapse.QbCollapse, { content: collapseContent,
panelStyle: { color: '#ffffff', background: '#203a62' } })
);
}
}]);
return Test;
}(_react.Component);
exports.default = Test;
//# sourceMappingURL=test.js.map