joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
241 lines (210 loc) • 29.2 kB
JavaScript
;
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 _select = require('joywok-material-components/lib/select');
var _select2 = _interopRequireDefault(_select);
var _MenuItem = require('@material-ui/core/MenuItem');
var _MenuItem2 = _interopRequireDefault(_MenuItem);
var _UserScopeItem = require('./UserScopeItem');
var _UserScopeItem2 = _interopRequireDefault(_UserScopeItem);
var _constants = require('../constants');
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; } /**
*
* @api {} ShareScope
* @apiName ShareScope
* @apiGroup 组件使用
*
* @apiParam {String } flag 组件样式 special:特殊样式（Beans） 如果没有flag，样式则为应用管理分享范围的样式
* @apiParam {String } data {share_type: 1,share_scope:[]} share_type:分享范围类型 1：所有 2：自定义 share_scope:分享范围数据
* @apiParam {Bool } onlyCustom 只支持自定义， true 只支持自定义， false 同时支持 所有 和 自定义， 默认为 false 同时支持
* @apiParam {Function } onChange 数据变化的回调事件（传回Array）
*
* @apiSuccessExample {json} 使用案例:
* import ShareScope from 'joywok-material-components/lib/sharescope/UserScope';
* let item = {
share_type: 2,
share_scope: [
{
"type":"obj",
"objs":[{
"id":"S5dv0jysN2j9IR8R",
"type":"jw_n_role",
"name":"角色1"
}]
},
{
"type":"usergroup",
"objs":[{
"id":"c0a69feaddb031d72c7b3909c6c14257",
"type":"jw_n_usergroup",
"name":"用户组1",
}]
}
]}
* <ShareScope
type="default"
data= { item }
className={item.share_type==2 ? '' : 'hide'}
onChange={(data)=>self.changeShare(data)}
/>
*
*
*/
// sharescope={item['share_scope']&&item['share_scope'].length==0 ? [] : item['share_scope']}
require('./style/userscope.css');
var UserScope = function (_Component) {
_inherits(UserScope, _Component);
function UserScope(props) {
_classCallCheck(this, UserScope);
var _this = _possibleConstructorReturn(this, (UserScope.__proto__ || Object.getPrototypeOf(UserScope)).call(this, props));
var onlyCustom = props.onlyCustom == true ? true : false;
_this.state = {
share_type: onlyCustom == true ? 2 : 1,
// 只允许自定义，不能选择全部
onlyCustom: onlyCustom
};
return _this;
}
// 再添加一组
_createClass(UserScope, [{
key: 'addGroup',
value: function addGroup() {
this.props.data.share_scope.push({ type: 'usergroup', objs: [] });
var data = {
share_type: this.state.share_type * 1,
share_scope: this.props.data.share_scope
};
this.props.onChange(data);
// this.props.onChange(this.props.data.share_scope);
}
// AppShareItem onChange
}, {
key: 'groupChange',
value: function groupChange(data) {
this.props.onChange(data);
}
// 更换分享范围类型
}, {
key: 'changeScopeType',
value: function changeScopeType(e) {
var _this2 = this;
console.log('changeScopeType:', e.target.value);
var data = {
share_type: e.target.value,
share_scope: this.props.data.share_scope.length == 0 && e.target.value == 2 ? [{ type: "usergroup", objs: [] }] : this.props.data.share_scope
};
this.setState({
share_type: e.target.value
}, function () {
return _this2.props.onChange(data);
});
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
this.setState({
share_type: this.props.data.share_type
});
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(newP) {
console.log('componentWillReceiveProps newP:', newP);
if (newP.data == undefined) return;
var changeData = {};
if (newP.data.share_type != this.state.share_type) {
changeData.share_type = newP.data.share_type;
}
if (newP.data.share_scope != this.state.share_scope) {
changeData.share_scope = newP.data.share_scope;
}
if (JSON.stringify(changeData) != '{}') {
this.setState(changeData);
}
}
}, {
key: 'render',
value: function render() {
var _this3 = this;
var self = this;
var data = this.props.data;
if (data == undefined) {
data = {};
}
var shareScope = data.share_scope;
if (data.share_scope.length == 0) {
data.share_scope = [{ type: 'usergroup', objs: [] }];
}
var curShareType = this.state.share_type * 1;
// console.log("shareScope:::::",shareScope,this.props)
return _react2.default.createElement(
'div',
null,
this.state.onlyCustom == true ? '' : _react2.default.createElement(
_select2.default,
{
className: "jw-scope-select ",
value: curShareType,
onChange: function onChange(e) {
return _this3.changeScopeType(e);
}
},
_react2.default.createElement(
_MenuItem2.default,
{ className: 'jw-scope-dropdown', value: 1 },
(0, _constants.COMPONENT_DICT)('label.business.userscope.all')
),
_react2.default.createElement(
_MenuItem2.default,
{ className: 'jw-scope-dropdown', value: 2 },
(0, _constants.COMPONENT_DICT)('label.business.userscope.custom.scope')
)
),
_react2.default.createElement(
'div',
{ className: "jw-user-scope " + (this.props.flag && this.props.flag == "special" ? 'jw-user-scope-special ' : '') + this.props.className },
_react2.default.createElement(
'div',
{ className: 'app-range-c' },
_react2.default.createElement(
'div',
{ className: "app-range-share " + (curShareType == 1 ? 'hide' : '') },
_.map(shareScope, function (item, index) {
return _react2.default.createElement(_UserScopeItem2.default, { shareType: self.state.share_type, key: index, type: self.props.type && self.props.type, flag: self.props.flag && self.props.flag, index: index, sharescope: shareScope, groupItem: item, groupIndex: index, onChange: function onChange(data) {
return self.groupChange(data);
} });
}),
_react2.default.createElement(
'div',
{ className: 'add-group-btn-w' },
_react2.default.createElement(
'button',
{ className: 'add-group-btn', onClick: function onClick() {
return _this3.addGroup();
} },
_react2.default.createElement('i', { className: 'icon-add-item' }),
_react2.default.createElement(
'span',
null,
(0, _constants.COMPONENT_DICT)('label.business.userscope.add.group')
)
)
)
)
)
)
);
}
}]);
return UserScope;
}(_react.Component);
exports.default = UserScope;