drip-table
Version:
A tiny and powerful enterprise-class solution for building tables.
374 lines (327 loc) • 16.5 kB
JavaScript
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; }
/*
* This file is part of the drip-table project.
* @link : https://drip-table.jd.com/
* @author : Emil Zhai (root@derzh.com)
* @modifier : Emil Zhai (root@derzh.com)
* @copyright: Copyright (c) 2021 JD Network Technology Co., Ltd.
*/
import "./index.less";
import classnames from 'classnames';
import React from 'react';
import * as childrenLike from "../../../utils/children-like";
import { parseReactCSS } from "../../../utils/dom";
import Button from "../button";
import Col from "../col";
import Dropdown from "../dropdown";
import Input from "../input";
import Menu from "../menu";
import RichText from "../rich-text";
import Row from "../row";
import Select from "../select";
import { useTableContext } from "../../../hooks";
var prefixCls = 'jfe-drip-table-rc-slot-render';
var renderCheckOutlined = function renderCheckOutlined() {
return /*#__PURE__*/React.createElement("span", {
role: "img",
"aria-label": "check"
}, /*#__PURE__*/React.createElement("svg", {
viewBox: "64 64 896 896",
focusable: "false",
"data-icon": "check",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true"
}, /*#__PURE__*/React.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.createElement("span", {
role: "img",
"aria-label": "down",
style: {
fontSize: '10px',
verticalAlign: 'baseline'
}
}, /*#__PURE__*/React.createElement("svg", {
viewBox: "64 64 896 896",
focusable: "false",
"data-icon": "down",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true"
}, /*#__PURE__*/React.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.createElement("span", {
role: "img",
"aria-label": "plus"
}, /*#__PURE__*/React.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.createElement("defs", null, /*#__PURE__*/React.createElement("style", null)), /*#__PURE__*/React.createElement("path", {
d: "M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
}), /*#__PURE__*/React.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 = useTableContext(),
tableProps = _useTableContext.props,
tableInfo = _useTableContext.info,
tableState = _useTableContext.state,
setTableState = _useTableContext.setState;
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
displayColumnVisible = _React$useState2[0],
setDisplayColumnVisible = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
layoutSelectorVisible = _React$useState4[0],
setLayoutSelectorVisible = _React$useState4[1];
var _React$useState5 = React.useState(''),
_React$useState6 = _slicedToArray(_React$useState5, 2),
searchStr = _React$useState6[0],
setSearchStr = _React$useState6[1];
var _React$useState7 = React.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.createElement("h3", {
className: "".concat(prefixCls, "-text-element")
}, config.text);
}
if (config.type === 'html') {
return /*#__PURE__*/React.createElement(RichText, {
className: "".concat(prefixCls, "-html-element"),
html: config.html
});
}
if (config.type === 'search') {
return /*#__PURE__*/React.createElement("div", {
style: config.wrapperStyle,
className: classnames("".concat(prefixCls, "-search-element"), config.wrapperClassName)
}, config.searchKeys && /*#__PURE__*/React.createElement(Select, {
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.createElement(Select.Option, {
key: i,
value: item.value
}, item.label);
})), /*#__PURE__*/React.createElement(Input.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.createElement(Slot, _extends({}, deprecatedProps, {
data: config.data,
className: classnames("".concat(prefixCls, "-slot-element"), typeof (deprecatedProps === null || deprecatedProps === void 0 ? void 0 : deprecatedProps.className) === 'string' ? deprecatedProps.className : '', config.class),
style: config.style ? 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.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.createElement(Button, {
className: classnames("".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.createElement(Menu, {
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.createElement(Menu.Item, {
key: column.key,
icon: /*#__PURE__*/React.createElement("span", {
style: {
opacity: tableState.displayColumnKeys.includes(column.key) ? 1 : 0
}
}, renderCheckOutlined())
}, column.title);
}));
return /*#__PURE__*/React.createElement(Dropdown, {
className: "".concat(prefixCls, "-display-column-selector-element"),
trigger: ['click'],
overlay: menu,
visible: displayColumnVisible,
onVisibleChange: function onVisibleChange(v) {
setDisplayColumnVisible(v);
}
}, /*#__PURE__*/React.createElement(Button, {
type: config.selectorButtonType,
icon: renderDropDownIcon()
}, config.selectorButtonText || '展示列'));
}
if (config.type === 'layout-selector') {
var _menu = /*#__PURE__*/React.createElement(Menu, {
onClick: function onClick(e) {
setTableState(function () {
return {
layout: e.key
};
});
}
}, /*#__PURE__*/React.createElement(Menu.Item, {
key: "table",
icon: /*#__PURE__*/React.createElement("span", {
style: {
opacity: tableState.layout === 'table' ? 1 : 0
}
}, renderCheckOutlined())
}, "\u5217\u8868\u6A21\u5F0F"), /*#__PURE__*/React.createElement(Menu.Item, {
key: "card",
icon: /*#__PURE__*/React.createElement("span", {
style: {
opacity: tableState.layout === 'card' ? 1 : 0
}
}, renderCheckOutlined())
}, "\u5361\u7247\u6A21\u5F0F"));
return /*#__PURE__*/React.createElement(Dropdown, {
className: "".concat(prefixCls, "-display-column-selector-element"),
trigger: ['click'],
overlay: _menu,
visible: layoutSelectorVisible,
onVisibleChange: function onVisibleChange(v) {
setLayoutSelectorVisible(v);
}
}, /*#__PURE__*/React.createElement(Button, {
type: config.selectorButtonType
}, {
table: '列表模式',
card: '卡片模式',
calendar: '日历模式'
}[tableState.layout] || '布局模式', renderDropDownIcon()));
}
return null;
};
var elements = props.schema.elements;
if (elements && elements.length > 0) {
return /*#__PURE__*/React.createElement(Row, {
className: prefixCls,
style: Object.assign({}, props.style, props.schema.style)
}, elements.map(function (item, index) {
return /*#__PURE__*/React.createElement(Col, {
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;
}
export default SlotRender;