@ttk/component
Version:
ttk组件库
608 lines (525 loc) • 22.2 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var defineProperty = require('../defineProperty-ad97b418.js');
var index = require('../index-11a467e5.js');
var getPrototypeOf = require('../getPrototypeOf-3a7a3df9.js');
var React = require('react');
var classNames = require('classnames');
var isequal = require('lodash.isequal');
var clonedeep = require('lodash.clonedeep');
var Button = require('../button');
var Tabs = require('../tabs');
var Checkbox = require('../checkbox');
var Icon = require('../icon');
var Input = require('../input');
require('../_commonjsHelpers-badc9712.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
var isequal__default = /*#__PURE__*/_interopDefaultLegacy(isequal);
var clonedeep__default = /*#__PURE__*/_interopDefaultLegacy(clonedeep);
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
var Tabs__default = /*#__PURE__*/_interopDefaultLegacy(Tabs);
var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
var Icon__default = /*#__PURE__*/_interopDefaultLegacy(Icon);
var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { defineProperty._defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = getPrototypeOf._getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf._getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return getPrototypeOf._possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var ItemOption = /*#__PURE__*/function (_React$Component) {
getPrototypeOf._inherits(ItemOption, _React$Component);
var _super = _createSuper$1(ItemOption);
function ItemOption(props) {
var _this;
getPrototypeOf._classCallCheck(this, ItemOption);
_this = _super.call(this, props);
_this.checkAllChecked = function (option, checkedKey) {
if (!option) {
return false;
}
var flag = true;
option.forEach(function (item) {
if (!item[checkedKey]) {
flag = false;
}
});
return flag;
};
_this.checkIndeterminate = function () {
var _this$state = _this.state,
option = _this$state.option,
checkAll = _this$state.checkAll;
var checkedKey = _this.props.checkedKey;
if (checkAll || !option) {
return false;
}
var flag = false;
option.forEach(function (item) {
if (item[checkedKey]) {
flag = true;
}
});
return flag;
};
_this.componentWillUnmount = function () {
if (window.removeEventListener) {
window.removeEventListener('click', _this.winClick, false);
} else if (window.detachEvent) {
window.detachEvent('click', _this.winClick);
} else {
window.onclick = undefined;
}
};
_this.componentDidMount = function () {
if (window.addEventListener) {
window.addEventListener('click', _this.winClick, false);
} else if (window.attachEvent) {
window.attachEvent('click', _this.winClick);
} else {
window.onclick = _this.winClick;
}
};
_this.checkInputHidden = function (className) {
if (!className) {
return true;
} else {
return !className.includes('ttk-ColumnsSetting-item-input') && !className.includes('ttk-ColumnsSetting-item-action-edit');
}
};
_this.winClick = function (e) {
if (e && e.target && _this.state.editingKey && _this.checkInputHidden(e.target.className)) {
_this.setState({
editingKey: null
});
}
};
_this.itemClick = function (key, e) {
var _this$props = _this.props,
singleKey = _this$props.singleKey,
checkedKey = _this$props.checkedKey,
itemClick = _this$props.itemClick;
var option = _this.state.option;
var index = option.findIndex(function (item) {
return item[singleKey] == key;
});
if (index > -1) {
option[index][checkedKey] = e.target.checked;
_this.setState({
option: option,
checkAll: _this.checkAllChecked(option, checkedKey)
});
itemClick && itemClick(option, option[index]);
}
};
_this.exchangeArritemPosition = function (arr, x, y) {
var a = arr[x],
b = arr[y];
arr[y] = a;
arr[x] = b;
return arr;
};
_this.arrowUp = function (key) {
var singleKey = _this.props.singleKey;
var option = _this.state.option;
var index = option.findIndex(function (item) {
return item[singleKey] == key;
});
if (index > 0) {
_this.setState({
option: _this.exchangeArritemPosition(option, index, index - 1)
});
}
};
_this.arrowDown = function (key) {
var singleKey = _this.props.singleKey;
var option = _this.state.option;
var index = option.findIndex(function (item) {
return item[singleKey] == key;
});
if (index < option.length - 1) {
_this.setState({
option: _this.exchangeArritemPosition(option, index, index + 1)
});
}
};
_this.editClick = function (key) {
_this.setState({
editingKey: key
});
};
_this.inputEdit = function (key, e) {
var _this$props2 = _this.props,
singleKey = _this$props2.singleKey,
labelKey = _this$props2.labelKey;
var option = _this.state.option;
var index = option.findIndex(function (item) {
return item[singleKey] == key;
});
option[index][labelKey] = e.target.value;
_this.setState({
option: option
});
};
_this.renderItem = function (arr) {
var _this$props3 = _this.props,
itemClassName = _this$props3.itemClassName,
labelKey = _this$props3.labelKey,
checkedKey = _this$props3.checkedKey,
singleKey = _this$props3.singleKey,
sort = _this$props3.sort,
editName = _this$props3.editName;
var editingKey = _this.state.editingKey;
var className = classNames__default["default"](defineProperty._defineProperty({
'ttk-ColumnsSetting-item': true
}, itemClassName, !!itemClassName));
return arr.map(function (item) {
return /*#__PURE__*/React__default["default"].createElement("div", {
className: className,
key: item[singleKey]
}, /*#__PURE__*/React__default["default"].createElement("div", {
className: "ttk-ColumnsSetting-item-container"
}, editingKey == item[singleKey] ? /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
className: "ttk-ColumnsSetting-item-input",
value: item[labelKey],
onChange: function onChange(e) {
return _this.inputEdit(item[singleKey], e);
}
}) : /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
checked: item[checkedKey],
disabled: item.isMustSelect == true ? true : false,
onChange: function onChange(e) {
return _this.itemClick(item[singleKey], e);
}
}, item[labelKey])), /*#__PURE__*/React__default["default"].createElement("div", {
className: "ttk-ColumnsSetting-item-action",
style: {
textAlign: "right"
}
}, sort ? /*#__PURE__*/React__default["default"].createElement(Icon__default["default"], {
type: "arrow-up",
title: "\u4E0A\u79FB",
onClick: function onClick() {
return _this.arrowUp(item[singleKey]);
}
}) : null, sort ? /*#__PURE__*/React__default["default"].createElement(Icon__default["default"], {
type: "arrow-down",
title: "\u4E0B\u79FB",
onClick: function onClick() {
return _this.arrowDown(item[singleKey]);
}
}) : null, editName ? /*#__PURE__*/React__default["default"].createElement(Icon__default["default"], {
className: "ttk-ColumnsSetting-item-action-edit",
fontFamily: "edficon",
type: "bianji",
title: "\u7F16\u8F91",
onClick: function onClick() {
return _this.editClick(item[singleKey]);
}
}) : null));
});
};
_this.getValue = function () {
return clonedeep__default["default"](_this.state.option);
};
_this.onCheckAllChange = function (e) {
var option = _this.state.option;
var checkedKey = _this.props.checkedKey;
var flag = false;
if (!option) {
option = [];
}
option.forEach(function (item) {
if (!item[checkedKey]) {
flag = true;
}
});
var value;
if (flag) {
value = option.map(function (item) {
return _objectSpread$1(_objectSpread$1({}, item), {}, defineProperty._defineProperty({}, checkedKey, true));
});
} else {
value = option.map(function (item) {
return _objectSpread$1(_objectSpread$1({}, item), {}, defineProperty._defineProperty({}, checkedKey, false));
});
}
_this.setState({
option: value,
checkAll: flag
});
};
_this.state = {
option: clonedeep__default["default"](props.option) || [],
label: '',
editingKey: null,
checkAll: _this.checkAllChecked(props.option, props.checkedKey)
};
return _this;
}
getPrototypeOf._createClass(ItemOption, [{
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
if (!isequal__default["default"](nextProps, this.props)) {
this.setState({
option: clonedeep__default["default"](nextProps.option) || [],
checkAll: this.checkAllChecked(nextProps.option, nextProps.checkedKey)
});
}
}
}, {
key: "render",
value: function render() {
var props = this.props;
var option = this.state.option;
classNames__default["default"](defineProperty._defineProperty({
'ttk-ColumnsSetting': true
}, props.className, !!props.className));
return /*#__PURE__*/React__default["default"].createElement("div", {
className: "ttk-ColumnsSetting-container"
}, /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
indeterminate: this.checkIndeterminate(),
onChange: this.onCheckAllChange,
checked: this.state.checkAll
}, "\u5168\u9009"), this.renderItem(option));
}
}]);
return ItemOption;
}(React__default["default"].Component);
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { defineProperty._defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = getPrototypeOf._getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf._getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return getPrototypeOf._possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
Tabs__default["default"].TabPane;
var ColumnsSetting = /*#__PURE__*/function (_PureComponent) {
getPrototypeOf._inherits(ColumnsSetting, _PureComponent);
var _super = _createSuper(ColumnsSetting);
function ColumnsSetting(_props) {
var _this;
getPrototypeOf._classCallCheck(this, ColumnsSetting);
_this = _super.call(this, _props);
_this.onOk = /*#__PURE__*/index._asyncToGenerator( /*#__PURE__*/index.regenerator.mark(function _callee() {
var option, value;
return index.regenerator.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
// const { confirmClick } = this.props
option = _this.state.option;
value = option.map(function (item) {
if (_this.childRef[item.key]) {
return _objectSpread(_objectSpread({}, item), {}, {
option: _this.childRef[item.key].getValue()
});
}
return item;
});
_this.setState({
option: value
});
return _context.abrupt("return", {
type: 'confirm',
option: clonedeep__default["default"](value)
});
case 4:
case "end":
return _context.stop();
}
}
}, _callee);
}));
_this.onCancel = /*#__PURE__*/index._asyncToGenerator( /*#__PURE__*/index.regenerator.mark(function _callee2() {
return index.regenerator.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
case "end":
return _context2.stop();
}
}
}, _callee2);
}));
_this.getProps = function (props) {
var option = props.option,
singleKey = props.singleKey,
checkedKey = props.checkedKey,
labelKey = props.labelKey,
sort = props.sort,
editName = props.editName,
itemClassName = props.itemClassName;
return {
option: option,
singleKey: singleKey,
checkedKey: checkedKey,
labelKey: labelKey,
sort: sort,
editName: editName,
itemClassName: itemClassName
};
};
_this.renderItem = function (arr) {
var _this$props = _this.props,
itemClassName = _this$props.itemClassName,
labelKey = _this$props.labelKey,
checkedKey = _this$props.checkedKey,
singleKey = _this$props.singleKey,
sort = _this$props.sort,
editName = _this$props.editName;
_this.state.editingKey;
classNames__default["default"](defineProperty._defineProperty({
'ttk-ColumnsSetting-item': true
}, itemClassName, !!itemClassName));
var width = 100 / arr.length;
var childArr = arr.map(function (item) {
var key = item.key ? item.key : item.name;
return /*#__PURE__*/React__default["default"].createElement("div", {
key: key,
style: {
width: "".concat(width, "%")
},
className: "ttk-ColumnsSetting-modal-item"
}, /*#__PURE__*/React__default["default"].createElement("div", {
className: "ttk-ColumnsSetting-modal-item-tit"
}, item.name), /*#__PURE__*/React__default["default"].createElement(ItemOption, {
num: _this.state.num,
ref: function ref(child) {
return _this.childRef[key] = child;
},
option: item.option,
labelKey: labelKey,
checkedKey: checkedKey,
singleKey: singleKey,
sort: sort,
editName: editName,
itemClassName: itemClassName
}));
});
return /*#__PURE__*/React__default["default"].createElement("div", {
className: "ttk-ColumnsSetting-modal"
}, /*#__PURE__*/React__default["default"].createElement("span", {
className: "ttk-ColumnsSetting-modal-line"
}), childArr);
};
_this.resetClick = function () {
var _this$props2 = _this.props,
option = _this$props2.option,
resetClick = _this$props2.resetClick;
_this.setState({
option: clonedeep__default["default"](option)
});
if (_this.props.closeModal) {
return _this.props.closeModal({
type: 'reset',
option: clonedeep__default["default"](_this.props.option)
});
}
return resetClick && resetClick();
};
_this.confirmClick = function () {
var confirmClick = _this.props.confirmClick;
var option = _this.state.option;
var value = option.map(function (item) {
var key = item.key ? item.key : item.name;
if (_this.childRef[key]) {
return _objectSpread(_objectSpread({}, item), {}, {
option: _this.childRef[key].getValue()
});
}
return item;
});
_this.setState({
option: value
});
if (_this.props.closeModal) {
return _this.props.closeModal({
type: 'confirm',
option: clonedeep__default["default"](value)
});
}
return confirmClick && confirmClick(value);
};
_this.cancelClick = function () {
var _this$props3 = _this.props,
cancelClick = _this$props3.cancelClick,
option = _this$props3.option;
_this.setState({
option: clonedeep__default["default"](option),
num: Math.random()
});
if (_this.props.closeModal) {
return _this.props.closeModal({
type: 'cancel',
option: clonedeep__default["default"](_this.props.option)
});
}
return cancelClick && cancelClick();
};
_this.state = {
option: clonedeep__default["default"](_props.option) || [],
num: 0 //该字段的作用是itemoption组件重新实例（）。
};
_this.childRef = {};
if (_props.setOkListener) {
_props.setOkListener(_this.onOk);
}
if (_props.setCancelLister) {
_props.setCancelLister(_this.onCancel);
}
return _this;
}
getPrototypeOf._createClass(ColumnsSetting, [{
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
var nextOption = this.getProps(nextProps);
var preOption = this.getProps(this.props);
if (!isequal__default["default"](nextOption, preOption)) {
this.setState({
option: clonedeep__default["default"](nextProps.option) || []
});
}
}
}, {
key: "render",
value: function render() {
var props = this.props;
var option = this.state.option;
var className = classNames__default["default"](defineProperty._defineProperty({
'ttk-ColumnsSetting': true
}, props.className, !!props.className));
return /*#__PURE__*/React__default["default"].createElement("div", {
className: className,
style: {
paddingBottom: 0,
paddingTop: 0
}
}, /*#__PURE__*/React__default["default"].createElement("div", {
className: "ttk-ColumnsSetting-container"
}, this.renderItem(option)), /*#__PURE__*/React__default["default"].createElement("div", {
className: "ttk-ColumnsSetting-footer",
style: {
marginTop: 12
}
}, /*#__PURE__*/React__default["default"].createElement("span", {
className: "ttk-ColumnsSetting-footer-line"
}), /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
style: {
width: 60
},
onClick: this.cancelClick
}, "\u53D6\u6D88"), /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
style: {
width: 60
},
onClick: this.resetClick
}, "\u91CD\u7F6E"), /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
style: {
width: 60
},
type: "primary",
onClick: this.confirmClick
}, "\u786E\u5B9A")) );
}
}]);
return ColumnsSetting;
}(React.PureComponent);
exports["default"] = ColumnsSetting;