drip-table
Version:
A tiny and powerful enterprise-class solution for building tables.
398 lines (330 loc) • 18.9 kB
JavaScript
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("./index.less");
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireDefault(require("react"));
var childrenLike = _interopRequireWildcard(require("../../../utils/children-like"));
var _dom = require("../../../utils/dom");
var _button = _interopRequireDefault(require("../button"));
var _col = _interopRequireDefault(require("../col"));
var _dropdown = _interopRequireDefault(require("../dropdown"));
var _input = _interopRequireDefault(require("../input"));
var _menu2 = _interopRequireDefault(require("../menu"));
var _richText = _interopRequireDefault(require("../rich-text"));
var _row = _interopRequireDefault(require("../row"));
var _select = _interopRequireDefault(require("../select"));
var _hooks = require("../../../hooks");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var prefixCls = 'jfe-drip-table-rc-slot-render';
var renderCheckOutlined = function renderCheckOutlined() {
return /*#__PURE__*/_react.default.createElement("span", {
role: "img",
"aria-label": "check"
}, /*#__PURE__*/_react.default.createElement("svg", {
viewBox: "64 64 896 896",
focusable: "false",
"data-icon": "check",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true"
}, /*#__PURE__*/_react.default.createElement("path", {
d: "M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
})));
};
var renderDropDownIcon = function renderDropDownIcon() {
return /*#__PURE__*/_react.default.createElement("span", {
role: "img",
"aria-label": "down",
style: {
fontSize: '10px',
verticalAlign: 'baseline'
}
}, /*#__PURE__*/_react.default.createElement("svg", {
viewBox: "64 64 896 896",
focusable: "false",
"data-icon": "down",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true"
}, /*#__PURE__*/_react.default.createElement("path", {
d: "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
})));
};
var renderPlusOutlined = function renderPlusOutlined() {
return /*#__PURE__*/_react.default.createElement("span", {
role: "img",
"aria-label": "plus"
}, /*#__PURE__*/_react.default.createElement("svg", {
style: {
shapeRendering: 'optimizeSpeed'
},
viewBox: "64 64 896 896",
focusable: "false",
"data-icon": "plus",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true"
}, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("style", null)), /*#__PURE__*/_react.default.createElement("path", {
d: "M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
}), /*#__PURE__*/_react.default.createElement("path", {
d: "M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
})));
};
function SlotRender(props) {
var _props$schema$element;
var _useTableContext = (0, _hooks.useTableContext)(),
tableProps = _useTableContext.props,
tableInfo = _useTableContext.info,
tableState = _useTableContext.state,
setTableState = _useTableContext.setState;
var _React$useState = _react.default.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
displayColumnVisible = _React$useState2[0],
setDisplayColumnVisible = _React$useState2[1];
var _React$useState3 = _react.default.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
layoutSelectorVisible = _React$useState4[0],
setLayoutSelectorVisible = _React$useState4[1];
var _React$useState5 = _react.default.useState(''),
_React$useState6 = _slicedToArray(_React$useState5, 2),
searchStr = _React$useState6[0],
setSearchStr = _React$useState6[1];
var _React$useState7 = _react.default.useState((_props$schema$element = props.schema.elements) === null || _props$schema$element === void 0 ? void 0 : _props$schema$element.map(function (s) {
return s.type === 'search' ? s.searchKeyDefaultValue : '';
}).find(Boolean)),
_React$useState8 = _slicedToArray(_React$useState7, 2),
searchKey = _React$useState8[0],
setSearchKey = _React$useState8[1];
var renderColumnContent = function renderColumnContent(config) {
if (config.type === 'spacer') {
return null;
}
if (config.type === 'text') {
return /*#__PURE__*/_react.default.createElement("h3", {
className: "".concat(prefixCls, "-text-element")
}, config.text);
}
if (config.type === 'html') {
return /*#__PURE__*/_react.default.createElement(_richText.default, {
className: "".concat(prefixCls, "-html-element"),
html: config.html
});
}
if (config.type === 'search') {
return /*#__PURE__*/_react.default.createElement("div", {
style: config.wrapperStyle,
className: (0, _classnames.default)("".concat(prefixCls, "-search-element"), config.wrapperClassName)
}, config.searchKeys && /*#__PURE__*/_react.default.createElement(_select.default, {
defaultValue: config.searchKeyDefaultValue,
className: "".concat(prefixCls, "-search-element__select"),
value: searchKey,
onChange: function onChange(value) {
return setSearchKey(value);
}
}, config.searchKeys.map(function (item, i) {
return /*#__PURE__*/_react.default.createElement(_select.default.Option, {
key: i,
value: item.value
}, item.label);
})), /*#__PURE__*/_react.default.createElement(_input.default.Search, {
allowClear: config.allowClear,
placeholder: config.placeholder,
enterButton: config.searchButtonText || true,
size: config.searchButtonSize,
value: searchStr,
onChange: function onChange(e) {
return setSearchStr(e.target.value.trim());
},
onSearch: function onSearch(value) {
var _tableProps$onSearch;
(_tableProps$onSearch = tableProps.onSearch) === null || _tableProps$onSearch === void 0 ? void 0 : _tableProps$onSearch.call(tableProps, {
searchKey: searchKey,
searchStr: value
}, tableInfo);
}
}));
}
if (config.type === 'slot') {
var _tableProps$slots, _tableProps$slots2;
var Slot = ((_tableProps$slots = tableProps.slots) === null || _tableProps$slots === void 0 ? void 0 : _tableProps$slots[config.slot]) || ((_tableProps$slots2 = tableProps.slots) === null || _tableProps$slots2 === void 0 ? void 0 : _tableProps$slots2.default);
var columnIndex = typeof props.columnKey === 'string' ? childrenLike.findIndexRecursive(tableProps.schema.columns, function (c) {
return c.key === props.columnKey;
}) : -1;
if (Slot) {
var DEPRECATED_PROPS = 'props';
var deprecatedProps = config[DEPRECATED_PROPS];
if (deprecatedProps) {
console.warn('Slot props field is deprecated, please use data/class/style fields instead.');
}
return /*#__PURE__*/_react.default.createElement(Slot, _extends({}, deprecatedProps, {
data: config.data,
className: (0, _classnames.default)("".concat(prefixCls, "-slot-element"), typeof (deprecatedProps === null || deprecatedProps === void 0 ? void 0 : deprecatedProps.className) === 'string' ? deprecatedProps.className : '', config.class),
style: config.style ? (0, _dom.parseReactCSS)(config.style) : void 0,
slotType: config.slot,
schema: tableProps.schema,
ext: tableProps.ext,
dataSource: tableProps.dataSource,
columnIndex: columnIndex === -1 ? void 0 : columnIndex,
record: props.record,
recordIndex: props.recordIndex,
onSearch: function onSearch(searchParams) {
var _tableProps$onSearch2;
(_tableProps$onSearch2 = tableProps.onSearch) === null || _tableProps$onSearch2 === void 0 ? void 0 : _tableProps$onSearch2.call(tableProps, searchParams, tableInfo);
},
fireEvent: function fireEvent(event) {
var _tableProps$onEvent;
return (_tableProps$onEvent = tableProps.onEvent) === null || _tableProps$onEvent === void 0 ? void 0 : _tableProps$onEvent.call(tableProps, _objectSpread({
record: props.record,
recordIndex: props.recordIndex,
columnIndex: columnIndex
}, event), tableInfo);
}
}));
}
return /*#__PURE__*/_react.default.createElement("span", {
className: "".concat(prefixCls, "-slot-element__error")
}, "\u81EA\u5B9A\u4E49\u63D2\u69FD\u7EC4\u4EF6\u6E32\u67D3\u51FD\u6570 tableProps.slots['".concat(config.slot, "'] \u4E0D\u5B58\u5728"));
}
if (config.type === 'insert-button') {
return /*#__PURE__*/_react.default.createElement(_button.default, {
className: (0, _classnames.default)("".concat(prefixCls, "-insert-button-element"), config.insertButtonClassName),
type: "primary",
icon: config.showIcon && renderPlusOutlined(),
style: config.insertButtonStyle,
onClick: function onClick(e) {
var _tableProps$onInsertB;
return (_tableProps$onInsertB = tableProps.onInsertButtonClick) === null || _tableProps$onInsertB === void 0 ? void 0 : _tableProps$onInsertB.call(tableProps, e, tableInfo);
}
}, config.insertButtonText);
}
if (config.type === 'display-column-selector') {
var hidableColumns = childrenLike.filterRecursive(tableProps.schema.columns, function (c) {
return c.hidable;
});
if (hidableColumns.length === 0) {
return null;
}
var menu = /*#__PURE__*/_react.default.createElement(_menu2.default, {
onClick: function onClick(e) {
setTableState(function (state) {
var _tableProps$onDisplay;
var displayColumnKeys = state.displayColumnKeys.filter(function (k) {
return k !== e.key;
}) || [];
if (!state.displayColumnKeys.includes(e.key)) {
displayColumnKeys.push(e.key);
}
(_tableProps$onDisplay = tableProps.onDisplayColumnKeysChange) === null || _tableProps$onDisplay === void 0 ? void 0 : _tableProps$onDisplay.call(tableProps, displayColumnKeys, tableInfo);
return {
displayColumnKeys: displayColumnKeys
};
});
}
}, hidableColumns.map(function (column) {
return /*#__PURE__*/_react.default.createElement(_menu2.default.Item, {
key: column.key,
icon: /*#__PURE__*/_react.default.createElement("span", {
style: {
opacity: tableState.displayColumnKeys.includes(column.key) ? 1 : 0
}
}, renderCheckOutlined())
}, column.title);
}));
return /*#__PURE__*/_react.default.createElement(_dropdown.default, {
className: "".concat(prefixCls, "-display-column-selector-element"),
trigger: ['click'],
overlay: menu,
visible: displayColumnVisible,
onVisibleChange: function onVisibleChange(v) {
setDisplayColumnVisible(v);
}
}, /*#__PURE__*/_react.default.createElement(_button.default, {
type: config.selectorButtonType,
icon: renderDropDownIcon()
}, config.selectorButtonText || '展示列'));
}
if (config.type === 'layout-selector') {
var _menu = /*#__PURE__*/_react.default.createElement(_menu2.default, {
onClick: function onClick(e) {
setTableState(function () {
return {
layout: e.key
};
});
}
}, /*#__PURE__*/_react.default.createElement(_menu2.default.Item, {
key: "table",
icon: /*#__PURE__*/_react.default.createElement("span", {
style: {
opacity: tableState.layout === 'table' ? 1 : 0
}
}, renderCheckOutlined())
}, "\u5217\u8868\u6A21\u5F0F"), /*#__PURE__*/_react.default.createElement(_menu2.default.Item, {
key: "card",
icon: /*#__PURE__*/_react.default.createElement("span", {
style: {
opacity: tableState.layout === 'card' ? 1 : 0
}
}, renderCheckOutlined())
}, "\u5361\u7247\u6A21\u5F0F"));
return /*#__PURE__*/_react.default.createElement(_dropdown.default, {
className: "".concat(prefixCls, "-display-column-selector-element"),
trigger: ['click'],
overlay: _menu,
visible: layoutSelectorVisible,
onVisibleChange: function onVisibleChange(v) {
setLayoutSelectorVisible(v);
}
}, /*#__PURE__*/_react.default.createElement(_button.default, {
type: config.selectorButtonType
}, {
table: '列表模式',
card: '卡片模式',
calendar: '日历模式'
}[tableState.layout] || '布局模式', renderDropDownIcon()));
}
return null;
};
var elements = props.schema.elements;
if (elements && elements.length > 0) {
return /*#__PURE__*/_react.default.createElement(_row.default, {
className: prefixCls,
style: Object.assign({}, props.style, props.schema.style)
}, elements.map(function (item, index) {
return /*#__PURE__*/_react.default.createElement(_col.default, {
key: index,
className: item.className,
style: _objectSpread({
width: typeof item.span === 'string' && item.span !== 'flex-auto' ? item.span : void 0,
display: 'flex',
flex: item.span === 'flex-auto' ? '1 1 auto' : void 0,
justifyContent: item.align || 'center',
paddingLeft: index === 0 ? '0' : '3px'
}, item.style),
span: typeof item.span === 'string' ? void 0 : item.span
}, item.visible === false ? null : renderColumnContent(item));
}));
}
return null;
}
var _default = SlotRender;
exports.default = _default;