joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
584 lines (537 loc) • 23.2 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 _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _redux = require('redux');
var _reactRedux = require('react-redux');
var _dva = require('dva');
var _request = require('./../utils/request');
var _request2 = _interopRequireDefault(_request);
var _aloneTip = require('./../tips/aloneTip');
var _aloneTip2 = _interopRequireDefault(_aloneTip);
var _Reply = require('./../shareAs/Reply');
var _Reply2 = _interopRequireDefault(_Reply);
var _Emoji = require('./../shareAs/Emoji');
var _Emoji2 = _interopRequireDefault(_Emoji);
var _Dialog = require('@material-ui/core/Dialog');
var _Dialog2 = _interopRequireDefault(_Dialog);
var _DialogTitle = require('@material-ui/core/DialogTitle');
var _DialogTitle2 = _interopRequireDefault(_DialogTitle);
var _Slide = require('@material-ui/core/Slide');
var _Slide2 = _interopRequireDefault(_Slide);
var _joywokMaterialComponents = require('joywok-material-components');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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; } /**
组件说明：文件信息流分享
files：[], 要分享的文件list
selfinfo : {} 转发者信息
*/
require('./style/Index.css');
// const Transition = React.forwardRef(function Transition(props, ref) {
// return <Slide direction="up" ref={ref} {...props} />;
// });
var ShareAs = function (_Component) {
_inherits(ShareAs, _Component);
function ShareAs(props) {
_classCallCheck(this, ShareAs);
var _this = _possibleConstructorReturn(this, (ShareAs.__proto__ || Object.getPrototypeOf(ShareAs)).call(this, props));
_this.myref = _react2.default.createRef();
_this.reply = _react2.default.createRef();
_this.state = {
selfinfo: props.selfinfo,
owner: "zhangsan",
val: "",
open: true,
spaces: spaces,
spacesValue: "无分类",
shareFlag: 0,
downloadFlag: 0,
categoryFlag: false,
shareObjList: [],
shareObj: [{
id: 'public',
name: '公开'
}],
files: props.files ? props.files : []
};
return _this;
}
_createClass(ShareAs, [{
key: 'componentDidMount',
value: function componentDidMount() {}
}, {
key: 'handleClose',
value: function handleClose() {
var self = this;
self.setState({
open: false
});
self.props.onClose && self.props.onClose();
}
}, {
key: 'onFocus',
value: function onFocus() {}
}, {
key: 'submitComment',
value: function submitComment() {}
}, {
key: 'onBlur',
value: function onBlur() {}
}, {
key: 'onSubmit',
value: function onSubmit() {
var self = this;
var body = {};
var publicFlag = false;
_.map(self.state.shareObj, function (item) {
if (item.id === "public") {
publicFlag = true;
}
});
body.append = self.state.files;
body.content = self.state.val;
if (publicFlag) {
body.share_scope = 'public';
} else {
body.share_scope = 'custom';
}
body.allow_download = self.state.downloadFlag;
body.space = self.state.spacesValue;
body.allow_share = self.state.shareFlag;
console.log(body);
(0, _request2.default)(basurl + '/api/as/sharefile', {
method: "POST",
body: JSON.stringify(body)
}).then(function (resp) {
if (resp.data.data && resp.data.data.errcode) {
self.setState({
loading: false
});
} else {
self.setState({
open: false
});
}
});
}
}, {
key: 'onChangeReply',
value: function onChangeReply(value) {
var self = this;
console.log(value);
self.setState({
val: value
});
}
}, {
key: 'openEmoji',
value: function openEmoji() {
var self = this;
self.myref.current.open($('#fileEmoji'));
}
}, {
key: 'emojiChange',
value: function emojiChange(obj, index) {
var self = this;
console.log(obj, index);
self.setState({
val: self.state.val + obj.text
});
setTimeout(function () {
self.props.onChange && self.props.onChange(self.state);
self.reply.current.setValue(self.state.val);
});
}
}, {
key: 'onCloseEmoji',
value: function onCloseEmoji() {
var self = this;
self.setState({
emojiFlag: false
});
}
}, {
key: 'changeForceFollow',
value: function changeForceFollow(e, key) {
console.log(e, key);
var self = this;
var obj = {};
obj[key + 'Flag'] = e.target.checked == 1 ? 1 : 0;
self.setState(obj);
}
}, {
key: 'selectSpace',
value: function selectSpace(item) {
var self = this;
self.setState({
spacesValue: item,
categoryFlag: false
});
}
}, {
key: 'showCategory',
value: function showCategory() {
var self = this;
self.setState({
categoryFlag: !!!self.state.categoryFlag
});
}
}, {
key: 'closeCategory',
value: function closeCategory() {
var self = this;
console.log(111);
self.setState({
categoryFlag: false
});
}
}, {
key: 'openShareObj',
value: function openShareObj() {
var self = this;
self.setState({
shareObjFlag: true
});
setTimeout(function () {
$('#shareObjInput').focus();
}, 200);
}
}, {
key: 'selectObj',
value: function selectObj(item) {
var self = this;
var arr = self.state.shareObj;
arr.push(item);
console.log(item, arr);
self.setState({
shareObj: arr,
shareObjFlag: false,
shareObjValue: ''
});
}
}, {
key: 'shareObjBlur',
value: function shareObjBlur(v) {
console.log(v);
var self = this;
if (v.target.value == "") {
self.setState({
shareObjFlag: false
});
}
}
}, {
key: 'delShareObj',
value: function delShareObj(item) {
var self = this;
var arr = [];
_.map(self.state.shareObj, function (i) {
if (i.id != item.id) {
arr.push(i);
}
});
self.setState({
shareObj: arr
});
}
}, {
key: 'getObj',
value: function getObj(str) {
var self = this;
// self.setState({
// shareObjListFlag: true,
// shareObjFlag: true,
// shareObjValue: str
// })
// return;
(0, _request2.default)(basurl + '/suggestion/index?s=' + str, {
method: "GET"
}).then(function (resp) {
if (resp.data.data && resp.data.data.errcode) {
self.setState({
loading: false
});
} else {
self.setState({
shareObjList: resp.data.data,
shareObjListFlag: true,
shareObjFlag: true,
shareObjValue: str
});
}
});
}
}, {
key: 'shareObjOnChange',
value: function shareObjOnChange(v) {
var self = this;
self.getObj(v.target.value);
}
}, {
key: 'shareObjFocus',
value: function shareObjFocus(v) {
var self = this;
self.setState({
shareObjFlag: true,
shareObjListFlag: true
});
}
}, {
key: 'render',
value: function render() {
var _React$createElement;
var self = this;
// if(!self.state.selfinfo){
// return <div>请传入正确的参数</div>
// }
var style = {};
var length = self.state.files.length;
style = {
width: 210 * length + 'px'
};
var offset = void 0;
if (self.state.categoryFlag) {
var el = $('.category');
if (el && el.offset()) {
offset = el.offset();
}
}
var offsetShareObj = void 0;
if (self.state.shareObjFlag) {
console.log(1111);
var _el = $('.share-obj-input');
if (_el && _el.offset()) {
offsetShareObj = _el.offset();
if (offsetShareObj.top > 210) {
offsetShareObj.top = offsetShareObj.top - 210;
} else {
offsetShareObj.top = 10;
}
offsetShareObj.left = offsetShareObj.left - 50;
}
}
var submitFlag = true;
if (self.state.val == "") {
submitFlag = false;
} else if (self.state.files.length == 0) {
submitFlag = false;
}
return _react2.default.createElement(
_Dialog2.default,
{
open: self.state.open,
onClose: self.handleClose.bind(self)
// TransitionComponent={Transition}
, keepMounted: true,
disableBackdropClick: true,
disableEscapeKeyDown: true,
PaperProps: { tabIndex: 0 },
className: 'jw-dialog'
},
_react2.default.createElement(
_DialogTitle2.default,
{ className: 'shareAs-title' },
'\u5206\u4EAB\u5230\u4FE1\u606F\u6D41'
),
_react2.default.createElement(
'div',
{ className: 'shareAs-txt' },
_react2.default.createElement(_Reply2.default, { ref: self.reply, placeholder: "分享你的想法给大家", callback: {
onFocus: self.onFocus.bind(self, self.props.article_id),
onBlur: self.onBlur.bind(self),
onChange: self.onChangeReply.bind(self)
} })
),
_react2.default.createElement(
'div',
{ className: 'share-files' },
_react2.default.createElement(
'div',
{ className: 'files-form' },
'\u6B64\u6587\u4EF6\u6700\u5F00\u59CB\u7531 ',
_react2.default.createElement(
'span',
null,
self.state.owner
),
' \u53D1\u5E03'
),
self.state.files.length == 1 ? _react2.default.createElement(
'div',
{ className: 'file-single' },
_react2.default.createElement('img', { src: 'http://bpic.588ku.com/element_origin_min_pic/16/10/29/2ac8e99273bc079e40a8dc079ca11b1f.jpg' })
) : _react2.default.createElement(
'div',
{ className: 'file-multi' },
_react2.default.createElement(
'div',
{ className: 'file-multi-c', style: style },
_.map(self.state.files, function (item) {
return _react2.default.createElement(
'div',
{ className: 'file-multi-item' },
_react2.default.createElement('img', { src: item.url })
);
})
)
)
),
_react2.default.createElement(
'div',
{ className: 'funcs' },
_react2.default.createElement(
'div',
{ className: 'emoji-c' },
_react2.default.createElement('i', { 'class': 'icon icon-shareAs-emoji', id: 'fileEmoji', onClick: self.openEmoji.bind(self) }),
_react2.default.createElement(_Emoji2.default, (_React$createElement = { ref: self.myref, onClose: self.onCloseEmoji.bind(self), el: $('#fileEmoji') }, _defineProperty(_React$createElement, 'onClose', self.onCloseEmoji.bind(self)), _defineProperty(_React$createElement, 'open', false), _defineProperty(_React$createElement, 'onChange', self.emojiChange.bind(self)), _React$createElement))
),
_react2.default.createElement(
'div',
{ className: 'category' },
_react2.default.createElement('i', { 'class': 'icon icon-shareAs-category', onClick: self.showCategory.bind(self) }),
_react2.default.createElement(
'span',
null,
self.state.spacesValue == "无分类" ? "" : self.state.spacesValue
),
_react2.default.createElement(
'div',
{ className: self.state.categoryFlag ? "category-c" : "category-c hide" },
_react2.default.createElement(
'div',
{ className: 'category-bg', onClick: self.closeCategory.bind(self) },
'\xA0'
),
_react2.default.createElement(
'div',
{ className: self.state.categoryFlag ? "category-list" : "category-list hide", style: offset },
_.map(self.state.spaces, function (item) {
var className = item == self.state.spacesValue ? "selected" : "";
return _react2.default.createElement(
'div',
{ className: "category-item " + className, onClick: self.selectSpace.bind(self, item) },
_react2.default.createElement('span', { className: 'jw-fd-i' }),
_react2.default.createElement(
'span',
null,
item
)
);
})
)
)
)
),
_react2.default.createElement(
'div',
{ className: 'share-obj' },
_react2.default.createElement(
'div',
{ className: 'share-obj-c' },
_.map(self.state.shareObj, function (item) {
return _react2.default.createElement(
'div',
{ className: 'obj-item' },
item.name,
' ',
_react2.default.createElement('i', { onClick: self.delShareObj.bind(self, item), className: 'ico-shareAs-del' })
);
}),
self.state.shareObjFlag ? _react2.default.createElement(_joywokMaterialComponents.TextField, { className: 'share-obj-input', onChange: self.shareObjOnChange.bind(self), value: self.state.shareObjValue, onBlur: self.shareObjBlur.bind(self), id: 'shareObjInput' }) : _react2.default.createElement(
'div',
{ className: 'share-obj-add', onClick: self.openShareObj.bind(self) },
'+\u6DFB\u52A0'
),
_react2.default.createElement(
'div',
{ className: self.state.shareObjListFlag ? "share-list" : "share-list hide", style: offsetShareObj },
self.state.shareObjValue == "" ? _react2.default.createElement('div', { className: 'offen-use' }) : _react2.default.createElement(
'div',
{ className: 'share-list-c' },
_.map(self.state.shareObjList, function (item) {
var flag = true;
_.map(self.state.shareObj, function (i) {
if (item.id == i.id) {
flag = false;
}
});
if (flag) {
return _react2.default.createElement(
'div',
{ className: 'share-list-item', onClick: self.selectObj.bind(self, item) },
item.name
);
}
})
)
)
)
),
_react2.default.createElement(
'div',
{ className: 'dialog-footer' },
_react2.default.createElement(
'div',
{ className: 'jw-m-common-checkbox-item' },
_react2.default.createElement(_joywokMaterialComponents.Checkbox, {
className: 'jw-m-common-checkbox',
colorSystem: 'blue',
value: 'force_follow',
checked: this.state.shareFlag == 1 ? true : false,
onChange: function onChange(e) {
return self.changeForceFollow(e, 'share');
}
}),
_react2.default.createElement(
'font',
null,
'\u7981\u6B62\u6D4F\u89C8\u8005\u5206\u4EAB'
)
),
_react2.default.createElement(
'div',
{ className: 'jw-m-common-checkbox-item' },
_react2.default.createElement(_joywokMaterialComponents.Checkbox, {
className: 'jw-m-common-checkbox',
colorSystem: 'blue',
value: 'force_follow',
checked: this.state.downloadFlag == 1 ? true : false,
onChange: function onChange(e) {
return self.changeForceFollow(e, 'download');
}
}),
_react2.default.createElement(
'font',
null,
'\u7981\u6B62\u6D4F\u89C8\u8005\u4E0B\u8F7D'
)
),
submitFlag ? _react2.default.createElement(
_joywokMaterialComponents.Button,
{ className: 'sure', style: { "background": "#3297fc" }, onClick: self.onSubmit.bind(self) },
'\u53D1\u5E03'
) : _react2.default.createElement(
_joywokMaterialComponents.Button,
{ className: 'sure', style: { "background": "#EEEEEE" }, disabled: 'disabled' },
'\u53D1\u5E03'
),
_react2.default.createElement(
_joywokMaterialComponents.Button,
{ onClick: self.handleClose.bind(self) },
'\u53D6\u6D88'
)
)
);
}
}]);
return ShareAs;
}(_react.Component);
exports.default = ShareAs;