@formant/ava-react
Version:
React components of AVA.
130 lines • 8.78 kB
JavaScript
var _excluded = ["spec", "size", "theme", "palette", "pluginManager", "showCollapse"],
_excluded2 = ["onClickParagraph", "onMouseEnterParagraph", "onMouseLeaveParagraph"];
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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import React, { useState } from 'react';
import { v4 } from 'uuid';
import { Ol, Ul, Li, P as StyledP } from "../styled";
import { Phrases } from "../phrases";
import { NTV_PREFIX_CLS } from "../constants";
import { getCollapseProps } from "../utils";
import { classnames as cx } from "../../utils";
import { presetPluginManager } from "../chore/plugin";
// TODO 嵌套列表支持 render 自定义元素？
export function Bullets(_ref) {
var spec = _ref.spec,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 'normal' : _ref$size,
_ref$theme = _ref.theme,
theme = _ref$theme === void 0 ? 'dark' : _ref$theme,
palette = _ref.palette,
_ref$pluginManager = _ref.pluginManager,
pluginManager = _ref$pluginManager === void 0 ? presetPluginManager : _ref$pluginManager,
_ref$showCollapse = _ref.showCollapse,
showCollapse = _ref$showCollapse === void 0 ? false : _ref$showCollapse,
events = _objectWithoutProperties(_ref, _excluded);
var themeStyles = {
theme: theme,
size: size,
palette: palette
};
var _ref2 = events || {},
onClickParagraph = _ref2.onClickParagraph,
onMouseEnterParagraph = _ref2.onMouseEnterParagraph,
onMouseLeaveParagraph = _ref2.onMouseLeaveParagraph,
phraseEvents = _objectWithoutProperties(_ref2, _excluded2);
var collapseProps = getCollapseProps(showCollapse);
if (!spec.bullets) return null;
// 配置折叠属性 && 有孙子节点的才可折叠，只有儿子的不用显示折叠属性
var collapsible = !!collapseProps && spec.bullets.some(function (bullet) {
return bullet.subBullet;
});
// 儿子节点均含有 key 的时候表示可以受控
var collapseControlled = !!collapseProps && spec.bullets.every(function (bullet) {
return bullet.key;
});
var _useState = useState(collapseControlled && collapseProps && (collapseProps === null || collapseProps === void 0 ? void 0 : collapseProps.collapsedKeys) || []),
_useState2 = _slicedToArray(_useState, 2),
collapsedKeys = _useState2[0],
setCollapsedKeys = _useState2[1];
var children = spec.bullets.map(function (bullet, index) {
var collapseKey = bullet.key || "".concat(index);
var collapsed = collapsedKeys.includes(collapseKey);
var onClickLi = function onClickLi() {
onClickParagraph === null || onClickParagraph === void 0 || onClickParagraph(bullet);
};
var onMouseEnterLi = function onMouseEnterLi() {
onMouseEnterParagraph === null || onMouseEnterParagraph === void 0 || onMouseEnterParagraph(bullet);
};
var onMouseLeaveLi = function onMouseLeaveLi() {
onMouseLeaveParagraph === null || onMouseLeaveParagraph === void 0 || onMouseLeaveParagraph(bullet);
};
var toggleCollapse = function toggleCollapse() {
var newCollapsedKeys = _toConsumableArray(collapsedKeys);
if (collapsed) {
newCollapsedKeys = newCollapsedKeys.filter(function (i) {
return i !== collapseKey;
});
} else {
newCollapsedKeys.push(collapseKey);
}
// 只有当用户指定 key 的时候折叠受控才生效
if (bullet.key && collapseProps && collapseProps.onCollapsed) {
collapseProps.onCollapsed(newCollapsedKeys);
}
setCollapsedKeys(newCollapsedKeys);
};
return /*#__PURE__*/React.createElement(Li, _extends({
key: bullet.key || v4(),
className: cx("".concat(NTV_PREFIX_CLS, "-li"), bullet.className),
style: bullet.styles
}, themeStyles, {
collapsible: collapsible,
showBulletsLine: collapseProps && collapseProps.showBulletsLine,
onClick: onClickLi,
onMouseEnter: onMouseEnterLi,
onMouseLeave: onMouseLeaveLi
}), (bullet === null || bullet === void 0 ? void 0 : bullet.subBullet) && collapseProps && /*#__PURE__*/React.createElement("span", {
className: cx("".concat(NTV_PREFIX_CLS, "-switcher-icon")),
onClick: toggleCollapse
}, collapseProps.switcherIcon(collapsed)), /*#__PURE__*/React.createElement(StyledP, themeStyles, /*#__PURE__*/React.createElement(Phrases, _extends({
spec: bullet.phrases,
pluginManager: pluginManager
}, themeStyles, phraseEvents))), !collapsed && bullet !== null && bullet !== void 0 && bullet.subBullet ? /*#__PURE__*/React.createElement(Bullets, _extends({
spec: bullet === null || bullet === void 0 ? void 0 : bullet.subBullet,
pluginManager: pluginManager,
showCollapse: showCollapse
}, themeStyles, events)) : null);
});
var tag = spec.isOrder ? 'ol' : 'ul';
var Comp = spec.isOrder ? Ol : Ul;
var onClick = function onClick() {
onClickParagraph === null || onClickParagraph === void 0 || onClickParagraph(spec);
};
var onMouseEnter = function onMouseEnter() {
onMouseEnterParagraph === null || onMouseEnterParagraph === void 0 || onMouseEnterParagraph(spec);
};
var onMouseLeave = function onMouseLeave() {
onMouseLeaveParagraph === null || onMouseLeaveParagraph === void 0 || onMouseLeaveParagraph(spec);
};
return /*#__PURE__*/React.createElement(Comp, _extends({
as: tag
}, themeStyles, {
onClick: onClick,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
className: cx("".concat(NTV_PREFIX_CLS, "-").concat(tag), spec.className),
style: spec.styles
}), children);
}