feat: checkbox svg icon

Author: 杨国璇

package-lock.json

@@ -66,10 +66,11 @@ class CheckboxEditor extends Component {
   };
 
   renderIcon = (symbol, color) => {
-    const className = classnames('dtable-ui-checkbox-check-mark', { 'dtable-ui-checkbox-check-svg': !symbol?.startsWith('dtable-icon') });
+    let className = 'dtable-ui-checkbox-check-mark';
     if (symbol.startsWith('dtable-icon')) {
       return (<span className={`dtable-font ${symbol} ${className || ''}`} style={{ color }} />);
     }
+    className = classnames(className, { 'dtable-ui-checkbox-check-svg': !symbol?.startsWith('dtable-icon'), 'scale-icon': isMobile });
     return (<SvgIcon className={className} symbol={symbol} color={color} />);
   };
 

src/CheckboxEditor/index.js

@@ -1,6 +1,6 @@
 @import url('../css/cell-formatter.css');
 
-.dtable-ui.checkbox-formatter .checkbox-checked-mark {
+.dtable-ui.checkbox-formatter .dtable-ui-checkbox-check-mark {
   color: #20c933;
   display: flex;
   align-items: center;

src/CheckboxFormatter/index.css

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import SvgIcon from '../SvgIcon';
 import { DEFAULT_CHECKBOX_MARK_STYLE } from '../constants';
+import { isMobile } from '../utils/utils';
 
 import './index.css';
 
@@ -17,6 +18,15 @@ class CheckboxFormatter extends React.PureComponent {
     value: false
   };
 
+  renderIcon = (symbol, color) => {
+    let className = 'dtable-ui-checkbox-check-mark';
+    if (symbol.startsWith('dtable-icon')) {
+      return (<span className={`dtable-font ${symbol} ${className || ''}`} style={{ color }} />);
+    }
+    className = classnames(className, { 'dtable-ui-checkbox-check-svg': !symbol?.startsWith('dtable-icon'), 'scale-icon': isMobile });
+    return (<SvgIcon className={className} symbol={symbol} color={color} />);
+  };
+
   render() {
     let { value, containerClassName, checkboxStyle } = this.props;
     if (!checkboxStyle || !('type' in checkboxStyle && 'color' in checkboxStyle)) {
@@ -28,10 +38,7 @@ class CheckboxFormatter extends React.PureComponent {
     const classname = classnames('dtable-ui cell-formatter-container checkbox-formatter d-flex align-items-center justify-content-center', containerClassName);
     return (
       <div className={classname}>
-        {checkboxStyle.type.startsWith('dtable-icon') ?
-          <span className={`dtable-font ${checkboxStyle.type} checkbox-checked-mark`} style={{ color: checkboxStyle.color }}></span> :
-          <SvgIcon className="dtable-ui-checkbox-check-svg" symbol={checkboxStyle.type} color={checkboxStyle.color} />
-        }
+        {this.renderIcon(checkboxStyle.type, checkboxStyle.color)}
       </div>
     );
   }

src/CheckboxFormatter/index.js

@@ -177,7 +177,7 @@ class CountryEditor extends Component {
 
   getLocationData = () => {
     const { config } = this.props;
-    const { mediaUrl } = { ...window.dtable, ...config };
+    const { mediaUrl } = { ...window?.dtable, ...config };
     let geoFileName = 'en-region-location';
     if (this.lang === 'cn') {
       geoFileName = 'cn-region-location';

src/GeolocationEditor/country-editor.js

@@ -16,7 +16,7 @@ const MINE_MAP_ONLINE_SERVICE = {
 };
 
 export const getMineMapUrl = (config = {}) => {
-  const { dtableMineMapCustomConfig = {} } = { ...window.dtable, ...config };
+  const { dtableMineMapCustomConfig = {} } = { ...window?.dtable, ...config };
   const { domain_url = '', data_domain_url = '', server_domain_url = '',
     sprite_url = '', service_url = '' } = dtableMineMapCustomConfig;
   return {
@@ -44,7 +44,7 @@ export const getInitCenter = (isSelectionEditor = false) => {
 };
 
 export const getMapInfo = (config = {}) => {
-  const { dtableBaiduMapKey: baiduMapKey, dtableGoogleMapKey: googleMapKey, dtableMineMapKey: mineMapKey } = { ...window.dtable, ...config };
+  const { dtableBaiduMapKey: baiduMapKey, dtableGoogleMapKey: googleMapKey, dtableMineMapKey: mineMapKey } = { ...window?.dtable, ...config };
   let mapType;
   let mapKey;
   if (baiduMapKey) {

src/GeolocationEditor/map-editor-utils.js

@@ -123,8 +123,8 @@ class RowExpandGeolocationEditor extends React.Component {
   };
 
   getLocationInfo = (value) => {
-    const { column } = this.props;
-    const { dtableBaiduMapKey, dtableMineMapKey } = window.dtable;
+    const { column, config } = this.props;
+    const { dtableBaiduMapKey, dtableMineMapKey } = { ...window?.dtable, ...config };
     const isBaiduMap = !!(dtableBaiduMapKey || dtableMineMapKey);
     return getGeolocationDisplayString(value, column.data, { isBaiduMap, hyphen: ' ' });
   };

src/RowExpandEditor/RowExpandGeolocationEditor/index.js

@@ -3,19 +3,22 @@ import PropTypes from 'prop-types';
 
 import './index.css';
 
-const needScaleIcons = ['check', 'dot', 'cross'];
+const iconComponents = {};
+const requireContext = require.context('../assets/icons', false, /\.svg$/);
 
-const SvgIcon = (props) => {
-  const { className, symbol, color } = props;
-  let iconClass = `dtable-ui-multicolor-icon multicolor-icon-${symbol} ${className || ''}`;
-  if (needScaleIcons.includes(symbol) && window.isMobile) {
-    iconClass += ' scale-icon';
-  }
-  return (
-    <svg className={iconClass} aria-hidden="true">
-      <use fill={color} xlinkHref={`#${symbol}`} />
-    </svg>
-  );
+requireContext.keys().forEach(path => {
+  const iconName = path.replace(/^\.\/(.*?)\.svg$/, '$1').toLowerCase();
+  iconComponents[iconName] = requireContext(path).default;
+});
+
+const SvgIcon = ({ className, symbol, color }) => {
+  if (!symbol) return null;
+  const iconClass = `dtable-ui-multicolor-icon multicolor-icon-${symbol} ${className || ''}`;
+  const props = { className: iconClass, style: { fill: color }, ariaHidden: 'true' };
+
+  const IconComponent = iconComponents[symbol];
+  if (!IconComponent) return null;
+  return (<IconComponent { ...props } />);
 };
 
 SvgIcon.propTypes = {

src/SvgIcon/index.js

@@ -103,4 +103,3 @@ export { default as IconButton } from './IconButton';
 // upload
 export { default as UploadProgress } from './UploadProgress';
 
-export { default as SvgIcon } from './SvgIcon';