@ywfe/materials-design
Version:
YwDesign for lowcode
282 lines (274 loc) • 11 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _balloon = _interopRequireDefault(require("@alifd/next/lib/balloon"));
var _search = _interopRequireDefault(require("@alifd/next/lib/search"));
var _radio = _interopRequireDefault(require("@alifd/next/lib/radio"));
var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _react = _interopRequireWildcard(require("react"));
var _utils = require("../../_utils");
require("./style.less");
var _excluded = ["type", "icons"]; // setter使用@alifd/next，和编辑器保持一致
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 IconGroupNameMap = {
outlined: '线框风格',
filled: '实底风格',
'two-tone': '双色风格',
iconfont: 'Iconfont'
// 'customIcon': '自定义',
};
function getIconfontIconList() {
var iframe = document.querySelector('iframe.lc-simulator-content-frame');
// const antdIcons = get(iframe, 'contentWindow.icons', {}) as Record<string, any>;
// iconfont的js会在页面中添加svg元素
var symbols = Array.prototype.slice.call(iframe.contentDocument.querySelectorAll('svg[style="position: absolute; width: 0px; height: 0px; overflow: hidden;"][aria-hidden="true"] > symbol'));
// const Icon = antdIcons.createFromIconfontCN();
return symbols.map(function (symbol) {
var id = symbol.id;
return {
name: id,
group: 'iconfont',
icon: function icon() {
return /*#__PURE__*/_react["default"].createElement("span", {
role: "img",
className: "anticon"
}, /*#__PURE__*/_react["default"].createElement("svg", {
viewBox: "64 64 896 896",
width: "1em",
height: "1em",
fill: "currentColor",
dangerouslySetInnerHTML: {
__html: symbol.innerHTML
}
}));
}
};
});
}
function getAntdIconList() {
var iframe = document.querySelector('iframe.lc-simulator-content-frame');
// const icons: Record<string, any> = {};
// document.querySelectorAll('svg[style="position: absolute; width: 0px; height: 0px; overflow: hidden;"][aria-hidden="true"]')
var antdIcons = (0, _utils.get)(iframe, 'contentWindow.icons', {});
return Object.keys(antdIcons).map(function (key) {
var _ref, _item$displayName, _item$render;
var item = antdIcons[key];
if (typeof item !== 'object') {
return null;
}
var name = (_ref = (_item$displayName = item === null || item === void 0 ? void 0 : item.displayName) !== null && _item$displayName !== void 0 ? _item$displayName : item === null || item === void 0 ? void 0 : (_item$render = item.render) === null || _item$render === void 0 ? void 0 : _item$render.displayName) !== null && _ref !== void 0 ? _ref : key;
var group = 'outlined';
var lowercaseName = name.toLowerCase();
if (/outlined$/.test(lowercaseName)) {
group = 'outlined';
} else if (/filled$/.test(lowercaseName)) {
group = 'filled';
} else if (/twotone$/.test(lowercaseName)) {
group = 'two-tone';
} else {
return null;
}
return {
name: name,
group: group,
icon: item
};
}).filter(Boolean);
}
function getIconList() {
var iconfontIconList = getIconfontIconList();
var antdIconList = getAntdIconList();
return [].concat(antdIconList, iconfontIconList);
}
var Icon = function Icon(props) {
var type = props.type,
_props$icons = props.icons,
icons = _props$icons === void 0 ? {} : _props$icons,
rest = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
var Comp = icons[type];
if (!Comp) return null;
return /*#__PURE__*/_react["default"].createElement(Comp, rest);
};
var AntdIconSetter = function AntdIconSetter(props) {
var _props;
var _useState = (0, _react.useState)(''),
search = _useState[0],
setSearch = _useState[1];
var _useState2 = (0, _react.useState)({}),
icons = _useState2[0],
setIcons = _useState2[1];
var _useState3 = (0, _react.useState)([]),
groups = _useState3[0],
setGroups = _useState3[1];
var _useState4 = (0, _react.useState)('outlined'),
selectedGroup = _useState4[0],
setSelectedGroup = _useState4[1];
var _useState5 = (0, _react.useState)(true),
firstLoad = _useState5[0],
setFirstLoad = _useState5[1];
var _useState6 = (0, _react.useState)([]),
list = _useState6[0],
setList = _useState6[1];
var value = props.value,
defaultValue = props.defaultValue,
type = props.type,
onChange = props.onChange,
placeholder = props.placeholder,
hasClear = props.hasClear;
var _value = typeof value === 'object' ? value === null || value === void 0 ? void 0 : (_props = value.props) === null || _props === void 0 ? void 0 : _props.type : value;
if (firstLoad && defaultValue && typeof value === 'undefined') {
onChange(defaultValue);
setFirstLoad(false);
}
var handleChange = function handleChange(icon) {
if (type === 'string') {
onChange(icon);
} else if (type === 'node') {
onChange({
componentName: 'YwIcon',
props: {
type: icon
}
});
}
};
(0, _react.useEffect)(function () {
var _groups$;
var iconList = getIconList();
var groups = [];
var icons = {};
iconList.forEach(function (item) {
var _ref2 = item,
group = _ref2.group;
if (groups.every(function (item) {
return item.group !== group;
})) {
groups.push({
group: group,
list: []
});
}
var target = groups.find(function (item) {
return item.group === group;
});
target.list.push(item);
icons[item.name] = item === null || item === void 0 ? void 0 : item.icon;
});
setIcons(icons);
setGroups(groups);
setSelectedGroup((_groups$ = groups[0]) === null || _groups$ === void 0 ? void 0 : _groups$.group);
}, []);
(0, _react.useEffect)(function () {
var _currentGroup$list;
var currentGroup = groups.find(function (item) {
return item.group === selectedGroup;
});
setList(((_currentGroup$list = currentGroup === null || currentGroup === void 0 ? void 0 : currentGroup.list) !== null && _currentGroup$list !== void 0 ? _currentGroup$list : []).filter(function (item) {
return search ? item.name.toLowerCase().indexOf(search.toLowerCase()) > -1 : true;
}));
}, [selectedGroup, search, groups]);
var currentIcon = /*#__PURE__*/_react["default"].createElement(Icon, {
type: _value,
icons: icons,
style: {
fontSize: 16
}
});
var clearIcon = hasClear && /*#__PURE__*/_react["default"].createElement(_icon["default"], {
size: "xs",
id: "icon-clear",
type: "delete-filling",
onClick: function onClick(e) {
e.preventDefault();
e.stopPropagation();
handleChange('');
}
});
var triggerNode = /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_input["default"], {
placeholder: placeholder,
addonTextBefore: currentIcon,
onChange: handleChange,
value: _value,
defaultValue: defaultValue,
readOnly: true,
addonTextAfter: clearIcon
}));
return /*#__PURE__*/_react["default"].createElement("div", {
className: "lc-antd-icon-setter"
}, /*#__PURE__*/_react["default"].createElement(_balloon["default"], {
className: "lc-antd-icon-setter-balloon",
trigger: triggerNode,
needAdjust: true,
triggerType: "click",
closable: false,
alignEdge: true,
align: "lt",
style: {
width: 300
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "lc-antd-icon-setter-header"
}, /*#__PURE__*/_react["default"].createElement(_radio["default"].Group, {
className: "lc-antd-icon-setter-header-style",
shape: "button",
value: selectedGroup,
onChange: function onChange(value) {
return setSelectedGroup(value);
}
}, groups.map(function (item) {
return /*#__PURE__*/_react["default"].createElement(_radio["default"], {
key: item.group,
value: item.group
}, IconGroupNameMap[item.group]);
})), /*#__PURE__*/_react["default"].createElement(_search["default"], {
className: "lc-antd-icon-setter-header-search",
size: "medium",
shape: "simple",
onChange: setSearch
})), /*#__PURE__*/_react["default"].createElement("div", {
className: "lc-antd-icon-setter-content"
}, /*#__PURE__*/_react["default"].createElement("ul", {
className: "lc-antd-icon-setter-list"
}, list.map(function (item) {
return /*#__PURE__*/_react["default"].createElement("li", {
key: item.name,
className: "lc-antd-icon-setter-list-item",
onClick: function onClick() {
return handleChange(item.name);
}
}, /*#__PURE__*/_react["default"].createElement(Icon, {
type: item.name,
icons: icons
}), /*#__PURE__*/_react["default"].createElement("div", {
className: "lc-antd-icon-setter-list-item-name"
}, item.name));
})))));
};
AntdIconSetter.defaultProps = {
value: undefined,
type: 'string',
defaultValue: '',
hasClear: false,
placeholder: '请点击选择 Icon',
onChange: function onChange() {
return undefined;
}
};
// 因为下面这个问题，setter必须使用class组件
// http://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/issues/109046
var _default = exports["default"] = /*#__PURE__*/function (_Component) {
function _default() {
return _Component.apply(this, arguments) || this;
}
(0, _inheritsLoose2["default"])(_default, _Component);
var _proto = _default.prototype;
_proto.render = function render() {
return /*#__PURE__*/_react["default"].createElement(AntdIconSetter, this.props);
};
return _default;
}(_react.Component);