@ywfe/materials-design
Version:
YwDesign for lowcode
278 lines (270 loc) • 9.38 kB
JavaScript
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _Balloon from "@alifd/next/lib/balloon";
import _Search from "@alifd/next/lib/search";
import _Radio from "@alifd/next/lib/radio";
import _Input from "@alifd/next/lib/input";
import _Icon from "@alifd/next/lib/icon";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["type", "icons"];
import React, { useState, useEffect, Component } from 'react';
// setter使用@alifd/next，和编辑器保持一致
import { get } from "../../_utils";
import "./style.less";
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.createElement("span", {
role: "img",
className: "anticon"
}, /*#__PURE__*/React.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 = 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 = _objectWithoutPropertiesLoose(props, _excluded);
var Comp = icons[type];
if (!Comp) return null;
return /*#__PURE__*/React.createElement(Comp, rest);
};
var AntdIconSetter = function AntdIconSetter(props) {
var _props;
var _useState = useState(''),
search = _useState[0],
setSearch = _useState[1];
var _useState2 = useState({}),
icons = _useState2[0],
setIcons = _useState2[1];
var _useState3 = useState([]),
groups = _useState3[0],
setGroups = _useState3[1];
var _useState4 = useState('outlined'),
selectedGroup = _useState4[0],
setSelectedGroup = _useState4[1];
var _useState5 = useState(true),
firstLoad = _useState5[0],
setFirstLoad = _useState5[1];
var _useState6 = 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
}
});
}
};
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);
}, []);
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.createElement(Icon, {
type: _value,
icons: icons,
style: {
fontSize: 16
}
});
var clearIcon = hasClear && /*#__PURE__*/React.createElement(_Icon, {
size: "xs",
id: "icon-clear",
type: "delete-filling",
onClick: function onClick(e) {
e.preventDefault();
e.stopPropagation();
handleChange('');
}
});
var triggerNode = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Input, {
placeholder: placeholder,
addonTextBefore: currentIcon,
onChange: handleChange,
value: _value,
defaultValue: defaultValue,
readOnly: true,
addonTextAfter: clearIcon
}));
return /*#__PURE__*/React.createElement("div", {
className: "lc-antd-icon-setter"
}, /*#__PURE__*/React.createElement(_Balloon, {
className: "lc-antd-icon-setter-balloon",
trigger: triggerNode,
needAdjust: true,
triggerType: "click",
closable: false,
alignEdge: true,
align: "lt",
style: {
width: 300
}
}, /*#__PURE__*/React.createElement("div", {
className: "lc-antd-icon-setter-header"
}, /*#__PURE__*/React.createElement(_Radio.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.createElement(_Radio, {
key: item.group,
value: item.group
}, IconGroupNameMap[item.group]);
})), /*#__PURE__*/React.createElement(_Search, {
className: "lc-antd-icon-setter-header-search",
size: "medium",
shape: "simple",
onChange: setSearch
})), /*#__PURE__*/React.createElement("div", {
className: "lc-antd-icon-setter-content"
}, /*#__PURE__*/React.createElement("ul", {
className: "lc-antd-icon-setter-list"
}, list.map(function (item) {
return /*#__PURE__*/React.createElement("li", {
key: item.name,
className: "lc-antd-icon-setter-list-item",
onClick: function onClick() {
return handleChange(item.name);
}
}, /*#__PURE__*/React.createElement(Icon, {
type: item.name,
icons: icons
}), /*#__PURE__*/React.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 = /*#__PURE__*/function (_Component) {
function _default() {
return _Component.apply(this, arguments) || this;
}
_inheritsLoose(_default, _Component);
var _proto = _default.prototype;
_proto.render = function render() {
return /*#__PURE__*/React.createElement(AntdIconSetter, this.props);
};
return _default;
}(Component);
export { _default as default };