qt-public-ui
Version:
新设计规范下业务组件库
184 lines (183 loc) • 8.18 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _antd = require("antd");
var _classnames = _interopRequireDefault(require("classnames"));
var _utils = require("../utils");
var _ = require("..");
require("./style");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var GROUP_HEIGHT = 364;
var SEARCH_HEIGHT = 44;
var checkboxColors = (0, _utils.getCycleColor)('colors');
var barColors = (0, _utils.getCycleColor)('colors');
var CheckboxList = function CheckboxList(props) {
var _props$max = props.max,
max = _props$max === void 0 ? Infinity : _props$max,
_props$type = props.type,
type = _props$type === void 0 ? 'list' : _props$type,
_props$labelInValue = props.labelInValue,
labelInValue = _props$labelInValue === void 0 ? true : _props$labelInValue;
var isControlled = ('value' in props);
var defaultSelected = ((isControlled ? props.value : props.defaultValue) || []).slice(0, max);
var _useState = (0, _react.useState)(defaultSelected),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
selected = _useState2[0],
setSelected = _useState2[1];
var _useState3 = (0, _react.useState)(''),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
searchValue = _useState4[0],
setSearchValue = _useState4[1];
checkboxColors.reset();
barColors.reset();
(0, _react.useEffect)(function () {
isControlled && setSelected(props.value || []);
}, [isControlled, props.value]);
var onCheckboxChange = function onCheckboxChange(key, e) {
var checked = e.target.checked;
var _selected = (0, _toConsumableArray2["default"])(selected);
var index = _selected.indexOf(key);
if (index > -1) {
!checked && _selected.splice(index, 1);
} else {
checked && _selected.push(key);
}
if (_selected.length <= max) {
!isControlled && setSelected(_selected);
props.onChange && props.onChange(_selected);
}
};
var onLabelClick = function onLabelClick(opt) {
props.onLabelClick && props.onLabelClick(opt.value, opt);
};
var onSearchChange = function onSearchChange(e) {
setSearchValue(e.target.value);
};
var filterOptions = props.options.filter(function (opt) {
if (typeof opt === 'string') {
return opt.includes(searchValue);
} else {
var _opt$label;
return opt === null || opt === void 0 ? void 0 : (_opt$label = opt.label) === null || _opt$label === void 0 ? void 0 : _opt$label.includes(searchValue);
}
});
var renderList = function renderList() {
return /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _classnames["default"])('umui-checkbox-group-wrapper', {
'umui-sep-checkbox': !labelInValue,
'umui-label-in-value': labelInValue
}),
style: {
height: props.showSearch ? GROUP_HEIGHT : GROUP_HEIGHT + SEARCH_HEIGHT
}
}, filterOptions.map(function (opt) {
var _opt = typeof opt === 'string' ? {
value: opt,
label: opt,
disabled: false
} : opt;
return labelInValue ? /*#__PURE__*/_react["default"].createElement(_antd.Checkbox, {
key: _opt.value.toString(),
checked: selected.includes(_opt.value),
disabled: _opt.disabled,
onChange: onCheckboxChange.bind(null, _opt.value)
}, _opt.label) : /*#__PURE__*/_react["default"].createElement("div", {
className: "umui-checkbox-wrapper",
key: _opt.value.toString()
}, /*#__PURE__*/_react["default"].createElement(_antd.Checkbox, {
checked: selected.includes(_opt.value),
disabled: _opt.disabled,
onChange: onCheckboxChange.bind(null, _opt.value)
}, "\xA0"), /*#__PURE__*/_react["default"].createElement(_antd.Tooltip, {
title: _opt.label,
placement: "top"
}, /*#__PURE__*/_react["default"].createElement("span", {
onClick: onLabelClick.bind(null, _opt)
}, _opt.label)));
}));
};
var renderTable = function renderTable() {
var _props$tableHeaders = props.tableHeaders,
tableHeaders = _props$tableHeaders === void 0 ? [] : _props$tableHeaders,
options = props.options,
showSearch = props.showSearch;
var viewHeight = showSearch ? GROUP_HEIGHT : GROUP_HEIGHT + SEARCH_HEIGHT;
var columns = [{
title: '',
width: 24,
dataIndex: 'value',
render: function render(value) {
var cls = "color-".concat(checkboxColors.next().slice(1));
return /*#__PURE__*/_react["default"].createElement(_antd.Checkbox, {
className: cls,
checked: selected.includes(value),
onChange: onCheckboxChange.bind(null, value)
});
}
}, {
width: 112,
title: tableHeaders[0] || '名称',
dataIndex: 'label',
ellipsis: true
}, {
title: tableHeaders[1] || '占比',
dataIndex: 'percent',
render: function render(value) {
return /*#__PURE__*/_react["default"].createElement("div", {
className: "umui-checkbox-percent"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "umui-checkbox-percent-wrapper"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "umui-checkbox-percent-bar",
style: {
width: "".concat(value * 100, "%"),
backgroundColor: barColors.next()
}
})), /*#__PURE__*/_react["default"].createElement("div", {
className: "umui-checkbox-percent-value umui-number"
}, (0, _utils.formatValue)('percent')(value * 100)));
}
}];
return /*#__PURE__*/_react["default"].createElement("div", {
className: "umui-checkbox-group-wrapper table-list",
style: {
height: viewHeight
}
}, /*#__PURE__*/_react["default"].createElement(_.Table, {
collapsed: true,
rowKey: "value",
columns: columns,
dataSource: options,
pagination: false,
scroll: {
y: viewHeight - 40
}
}));
};
return /*#__PURE__*/_react["default"].createElement("div", {
className: "umui-checkbox-list",
style: props.style
}, props.showSearch && /*#__PURE__*/_react["default"].createElement(_.Input.Search, {
placeholder: props.placeholder || '输入名称进行搜索',
value: searchValue,
onChange: onSearchChange,
className: "umui-checkbox-search"
}), type === 'list' ? renderList() : renderTable(), max < Infinity && /*#__PURE__*/_react["default"].createElement("div", {
className: "umui-checkbox-hint"
}, /*#__PURE__*/_react["default"].createElement("span", null, "\u6700\u591A\u9009\u62E9", max, "\u4E2A\u8FDB\u884C\u5BF9\u6BD4"), /*#__PURE__*/_react["default"].createElement("div", {
className: "umui-checkbox-hint-num"
}, selected.length, "/", max)));
};
CheckboxList.defaultValue = {
defaultValue: []
};
CheckboxList.displayName = 'CheckboxList';
var _default = exports["default"] = CheckboxList;