@arco-design/mobile-react 2.38.3 → 2.39.0

package/esm/form/linked-container.js

@@ -5,11 +5,9 @@ import { convertTsToDateObj } from '../date-picker/helper';
 import { GlobalContext } from '../context-provider';
 export function DefaultPickerLinkedContainer(_ref) {
   var value = _ref.value;
-
   var _useContext = useContext(GlobalContext),
-      prefixCls = _useContext.prefixCls,
-      locale = _useContext.locale;
-
+    prefixCls = _useContext.prefixCls,
+    locale = _useContext.locale;
   var className = prefixCls + "-form-picker-link-container";
   return /*#__PURE__*/React.createElement("div", {
     className: className
@@ -19,30 +17,24 @@ export function DefaultPickerLinkedContainer(_ref) {
 }
 export function DefaultDatePickerLinkedContainer(_ref2) {
   var ts = _ref2.ts,
-      types = _ref2.types;
-
+    types = _ref2.types;
   var _useContext2 = useContext(GlobalContext),
-      prefixCls = _useContext2.prefixCls,
-      locale = _useContext2.locale;
-
+    prefixCls = _useContext2.prefixCls,
+    locale = _useContext2.locale;
   var className = prefixCls + "-form-picker-link-container";
   var dateTimeStr = useMemo(function () {
     if (ts === undefined) {
       return '';
     }
-
     if (typeof ts === 'number') {
       return formatDateTimeStr(ts, types);
     }
-
     return formatDateTimeStr(ts[0], types) + " ~ " + formatDateTimeStr(ts[1], types);
   }, [ts, types]);
-
   function formatDateTimeStr(timestamp, itemTypes) {
     var dateObj = convertTsToDateObj(timestamp);
     var validDateObj = Object.keys(dateObj).reduce(function (acc, key) {
       var _ref3;
-
       return _extends({}, acc, itemTypes.includes(key) ? (_ref3 = {}, _ref3[key] = formatDateNumber(dateObj[key]), _ref3) : {});
     }, {});
     var dateStr = [validDateObj.year, validDateObj.month, validDateObj.date].filter(function (v) {
@@ -53,7 +45,6 @@ export function DefaultDatePickerLinkedContainer(_ref2) {
     }).join(':');
     return dateStr + " " + timeStr;
   }
-
   return /*#__PURE__*/React.createElement("div", {
     className: className
   }, ts ? dateTimeStr : /*#__PURE__*/React.createElement("span", {

package/esm/form/type.d.ts

@@ -1,6 +1,5 @@
-import { IRules } from '@arco-design/mobile-utils';
-import { ReactElement, ReactNode } from 'react';
-import { Promise } from 'es6-promise';
+import type { IRules } from '@arco-design/mobile-utils';
+import type { ReactElement, ReactNode } from 'react';
 export declare type FieldValue = any;
 export declare type FieldItem = Record<string, FieldValue>;
 export declare type ILayout = 'horizontal' | 'vertical' | 'inline';
@@ -246,7 +245,12 @@ export interface FormItemProps {
      * 表单项名
      * @en The form item name
      */
-    label: ReactNode;
+    label?: ReactNode;
+    /**
+     * 校验提示中的字段名（当 label 为复杂节点时推荐设置）
+     * @en The field name in the validation message (recommended when label is a complex node)
+     */
+    labelName?: string;
     /**
      * 表单项Stylesheet
      * @en The form item stylesheet
@@ -333,6 +337,11 @@ export interface IFormItemInnerProps {
      * @en Form item field
      */
     field: string;
+    /**
+     * 校验提示中的字段名
+     * @en The field name in the validation message
+     */
+    labelName?: string;
     /**
      * 表单项子节点
      * @en Form item children

package/esm/form/type.js

@@ -1,7 +1,6 @@
 // 注意：自动识别form关联组件的依据，请勿轻易改变代码结构
 // Notice: Automatically identify the basis of the associated component of the form, DO NOT change the code structure.
 export var FormInternalComponentType;
-
 (function (FormInternalComponentType) {
   FormInternalComponentType["Input"] = "Input";
   FormInternalComponentType["Textarea"] = "Textarea";
@@ -17,9 +16,7 @@ export var FormInternalComponentType;
   FormInternalComponentType["Rate"] = "Rate";
   FormInternalComponentType["Stepper"] = "Stepper";
 })(FormInternalComponentType || (FormInternalComponentType = {}));
-
 export var ValidateStatus;
-
 (function (ValidateStatus) {
   ValidateStatus["Init"] = "init";
   ValidateStatus["Error"] = "error";
@@ -27,9 +24,7 @@ export var ValidateStatus;
   ValidateStatus["Validating"] = "validating";
   ValidateStatus["Success"] = "success";
 })(ValidateStatus || (ValidateStatus = {}));
-
 export var ValueChangeType;
-
 (function (ValueChangeType) {
   ValueChangeType[ValueChangeType["Update"] = 0] = "Update";
   ValueChangeType[ValueChangeType["Reset"] = 1] = "Reset";

package/esm/form/useForm.d.ts

@@ -1,3 +1,3 @@
-import { IFormInstance, InternalFormInstance } from './type';
+import type { IFormInstance, InternalFormInstance } from './type';
 export declare const defaultFormDataMethods: InternalFormInstance;
 export default function useForm(form?: IFormInstance): IFormInstance[];

package/esm/form/useForm.js

@@ -1,13 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /* eslint-disable no-console */
+
 import { useRef } from 'react';
-import { Promise } from 'es6-promise';
+import { Promise as ES6Promise } from 'es6-promise';
 import { ValueChangeType } from './type';
 import { deepClone } from './utils';
-
 var defaultFunc = function defaultFunc() {};
-
 export var defaultFormDataMethods = {
   getFieldValue: function getFieldValue(name) {
     return name;
@@ -41,88 +39,71 @@ export var defaultFormDataMethods = {
       innerSetFieldValue: defaultFunc
     };
   }
-}; // 在field的静态的状态下设置
+};
 
+// 在field的静态的状态下设置
 var FormData = function FormData() {
   var _this = this;
-
   this._formData = {};
+  // 数据源
   this._fieldsList = {};
+  // 字段列表
   this._initialValues = {};
+  // 初始值
   this._callbacks = {};
-
   this.commonSetFieldsValue = function (values, changeType) {
     var oldValues = Object.keys(values).reduce(function (acc, key) {
       var _extends2;
-
       return _extends({}, acc, (_extends2 = {}, _extends2[key] = _this.getFieldValue(key), _extends2));
     }, {});
     _this._formData = _extends({}, _this._formData, values);
-
     _this.notifyField(values, oldValues, changeType);
   };
-
   this.setFieldsValue = function (values) {
     _this.commonSetFieldsValue(values);
-
     var onValuesChange = _this._callbacks.onValuesChange;
     onValuesChange == null ? void 0 : onValuesChange(values, _this._formData);
     return true;
   };
-
   this.innerSetFieldsValue = function (values, changeType) {
     _this.commonSetFieldsValue(values, changeType);
-
     var _this$_callbacks = _this._callbacks,
-        onValuesChange = _this$_callbacks.onValuesChange,
-        onChange = _this$_callbacks.onChange;
+      onValuesChange = _this$_callbacks.onValuesChange,
+      onChange = _this$_callbacks.onChange;
     onValuesChange == null ? void 0 : onValuesChange(values, _this._formData);
     onChange == null ? void 0 : onChange(values, _this._formData);
     return true;
   };
-
   this.commonSetFieldValue = function (name, value, changeType) {
     var _oldValues, _extends3, _this$notifyField;
-
     var oldValues = (_oldValues = {}, _oldValues[name] = _this.getFieldValue(name), _oldValues);
     _this._formData = _extends({}, _this._formData, (_extends3 = {}, _extends3[name] = value, _extends3));
-
     _this.notifyField((_this$notifyField = {}, _this$notifyField[name] = value, _this$notifyField), oldValues, changeType);
   };
-
   this.setFieldValue = function (name, value) {
     var _onValuesChange;
-
     _this.commonSetFieldValue(name, value);
-
     var onValuesChange = _this._callbacks.onValuesChange;
     onValuesChange && onValuesChange((_onValuesChange = {}, _onValuesChange[name] = value, _onValuesChange), _this.getFieldsValue());
     return true;
   };
-
   this.innerSetFieldValue = function (name, value, changeType) {
     var _onValuesChange2, _onChange;
-
     _this.commonSetFieldValue(name, value, changeType);
-
     var _this$_callbacks2 = _this._callbacks,
-        onValuesChange = _this$_callbacks2.onValuesChange,
-        onChange = _this$_callbacks2.onChange;
+      onValuesChange = _this$_callbacks2.onValuesChange,
+      onChange = _this$_callbacks2.onChange;
     onValuesChange && onValuesChange((_onValuesChange2 = {}, _onValuesChange2[name] = value, _onValuesChange2), _this._formData);
     onChange && onChange((_onChange = {}, _onChange[name] = value, _onChange), _this._formData);
     return true;
   };
-
   this.notifyField = function (values, oldValues, changeType) {
     if (changeType === void 0) {
       changeType = ValueChangeType.Update;
     }
-
     Object.keys(values).map(function (fieldName) {
       var _this$_fieldsList;
-
       var fieldObj = ((_this$_fieldsList = _this._fieldsList) == null ? void 0 : _this$_fieldsList[fieldName]) || null;
-
       if (fieldObj) {
         fieldObj.onValueChange(values[fieldName], oldValues[fieldName], {
           changeType: changeType
@@ -130,74 +111,53 @@ var FormData = function FormData() {
       }
     });
   };
-
   this.getFieldsValue = function (names) {
     if (names) {
       return names.map(function (name) {
         return _this.getFieldValue(name);
       });
     }
-
     return deepClone(_this._formData);
   };
-
   this.getFieldValue = function (name) {
     var _this$_formData;
-
     return deepClone((_this$_formData = _this._formData) == null ? void 0 : _this$_formData[name]);
   };
-
   this.getFieldError = function (name) {
     var _this$_fieldsList2;
-
     var field = ((_this$_fieldsList2 = _this._fieldsList) == null ? void 0 : _this$_fieldsList2[name]) || null;
-
     if (field) {
       return field.getFieldError();
     }
-
     return [];
   };
-
   this.getFieldsError = function (names) {
     var fields = names || Object.keys(_this._fieldsList);
     return fields.reduce(function (pre, name) {
       var _this$_fieldsList3;
-
       var theField = (_this$_fieldsList3 = _this._fieldsList) == null ? void 0 : _this$_fieldsList3[name];
-
       if (theField) {
         pre[name] = theField == null ? void 0 : theField.getFieldError();
       }
-
       return pre;
     }, {});
   };
-
   this.isFieldTouched = function (name) {
     var _this$_fieldsList4;
-
     var field = ((_this$_fieldsList4 = _this._fieldsList) == null ? void 0 : _this$_fieldsList4[name]) || null;
-
     if (field) {
       return field.isFieldTouched();
     }
-
     return false;
   };
-
   this.registerField = function (name, self) {
     _this._fieldsList[name] = self;
     var initialValue = self.props.initialValue;
-
     if (initialValue !== undefined && name) {
       var _extends4, _extends5;
-
       _this._initialValues = _extends({}, _this._initialValues, (_extends4 = {}, _extends4[name] = initialValue, _extends4));
-
       _this.setFieldsValue(_extends({}, _this._formData, (_extends5 = {}, _extends5[name] = initialValue, _extends5)));
     }
-
     return function () {
       if (name in _this._fieldsList) {
         delete _this._fieldsList[name];
@@ -205,36 +165,26 @@ var FormData = function FormData() {
       }
     };
   };
-
   this.setInitialValues = function (initVal) {
     _this._initialValues = deepClone(initVal || {});
-
     _this.setFieldsValue(initVal);
   };
-
   this.setInitialValue = function (fieldName, value) {
     if (!fieldName) {
       return;
     }
-
     _this._initialValues[fieldName] = value;
-
     _this.setFieldValue(fieldName, value);
   };
-
   this.getInitialValue = function (fieldName) {
     return _this._initialValues[fieldName];
   };
-
   this.resetFields = function () {
     var oldValues = _extends({}, _this._formData);
-
     var initialValues = {};
     Object.keys(_this._formData).forEach(function (fieldName) {
       var _this$_fieldsList5;
-
       var fieldObj = ((_this$_fieldsList5 = _this._fieldsList) == null ? void 0 : _this$_fieldsList5[fieldName]) || null;
-
       if (fieldObj) {
         initialValues[fieldName] = fieldObj.getInitialValue();
       }
@@ -242,10 +192,8 @@ var FormData = function FormData() {
     var onValuesChange = _this._callbacks.onValuesChange;
     onValuesChange && onValuesChange(initialValues, _this._formData);
     _this._formData = initialValues;
-
     _this.notifyField(initialValues, oldValues, ValueChangeType.Reset);
   };
-
   this.validateFields = function () {
     var promiseList = [];
     Object.values(_this._fieldsList).forEach(function (entity) {
@@ -254,14 +202,12 @@ var FormData = function FormData() {
         return errors;
       }));
     });
-    var summaryPromise = new Promise(function (resolve, reject) {
-      Promise.all(promiseList).then(function (res) {
+    var summaryPromise = new ES6Promise(function (resolve, reject) {
+      ES6Promise.all(promiseList).then(function (res) {
         var errorResults = res.filter(function (item) {
           var _item$errors;
-
           return item == null ? void 0 : (_item$errors = item.errors) == null ? void 0 : _item$errors.length;
         });
-
         if (errorResults.length) {
           reject(errorResults);
         } else {
@@ -271,26 +217,21 @@ var FormData = function FormData() {
     });
     return summaryPromise;
   };
-
   this.submit = function () {
     _this.validateFields().then(function (result) {
       var onSubmit = _this._callbacks.onSubmit;
       onSubmit == null ? void 0 : onSubmit(_this.getFieldsValue(), result);
     }).catch(function (e) {
       var onSubmitFailed = _this._callbacks.onSubmitFailed;
-
       if (!onSubmitFailed) {
         return;
       }
-
       onSubmitFailed(_this.getFieldsValue(), e);
     });
   };
-
   this.setCallbacks = function (callbacks) {
     _this._callbacks = callbacks;
   };
-
   this.getMethods = function () {
     return {
       setFieldsValue: _this.setFieldsValue,
@@ -307,7 +248,6 @@ var FormData = function FormData() {
       validateFields: _this.validateFields
     };
   };
-
   this.getInternalHooks = function () {
     return {
       registerField: _this.registerField,
@@ -320,11 +260,9 @@ var FormData = function FormData() {
     };
   };
 };
-
 export default function useForm(form) {
   var formInstanceRef = useRef(defaultFormDataMethods);
   var isSingletonRef = useRef(false);
-
   if (!isSingletonRef.current) {
     if (form) {
       formInstanceRef.current = form;
@@ -332,9 +270,7 @@ export default function useForm(form) {
       var formIns = new FormData();
       formInstanceRef.current = formIns.getMethods();
     }
-
     isSingletonRef.current = true;
   }
-
   return [formInstanceRef.current];
 }

package/esm/form/utils.js

@@ -5,7 +5,6 @@ export var isFieldRequired = function isFieldRequired(rules) {
   if (rules === void 0) {
     rules = [];
   }
-
   return (rules || []).some(function (rule) {
     return rule == null ? void 0 : rule.required;
   });
@@ -16,15 +15,13 @@ export var getErrorAndWarnings = function getErrorAndWarnings(result) {
   var errorTypes = [];
   result.map(function (_ref) {
     var _ref$message = _ref.message,
-        message = _ref$message === void 0 ? [] : _ref$message,
-        _ref$validateLevel = _ref.validateLevel,
-        validateLevel = _ref$validateLevel === void 0 ? 'error' : _ref$validateLevel,
-        resultErrorTypes = _ref.errorTypes;
-
+      message = _ref$message === void 0 ? [] : _ref$message,
+      _ref$validateLevel = _ref.validateLevel,
+      validateLevel = _ref$validateLevel === void 0 ? 'error' : _ref$validateLevel,
+      resultErrorTypes = _ref.errorTypes;
     if (!(message != null && message.length)) {
       return;
     }
-
     if (validateLevel === 'warning') {
       warnings = [].concat(warnings, message);
     } else {
@@ -43,17 +40,13 @@ export var getDefaultValueForInterComponent = function getDefaultValueForInterCo
     case FormInternalComponentType.Input:
     case FormInternalComponentType.Textarea:
       return undefined;
-
     case FormInternalComponentType.CheckboxGroup:
       return [];
-
     case FormInternalComponentType.RadioGroup:
       return null;
-
     case FormInternalComponentType.Slider:
     case FormInternalComponentType.Rate:
       return 0;
-
     default:
       return undefined;
   }

package/esm/grid/index.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useRef, forwardRef, useImperativeHandle, useContext } from 'react';
 import { cls } from '@arco-design/mobile-utils';
 import { ContextLayout, GlobalContext } from '../context-provider';
-
 /**
  * 宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。
  * @en The grid can divide the page into equal-width blocks in the horizontal direction for displaying content or for page navigation.
@@ -13,36 +12,32 @@ import { ContextLayout, GlobalContext } from '../context-provider';
  */
 var Grid = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className,
-      style = props.style,
-      data = props.data,
-      _props$columns = props.columns,
-      columns = _props$columns === void 0 ? 3 : _props$columns,
-      _props$border = props.border,
-      border = _props$border === void 0 ? false : _props$border,
-      _props$gutter = props.gutter,
-      gutter = _props$gutter === void 0 ? 0 : _props$gutter,
-      _props$shape = props.shape,
-      shape = _props$shape === void 0 ? 'square' : _props$shape,
-      _props$direction = props.direction,
-      direction = _props$direction === void 0 ? 'vertical' : _props$direction,
-      _props$isSliding = props.isSliding,
-      isSliding = _props$isSliding === void 0 ? false : _props$isSliding;
-
+    className = _props$className === void 0 ? '' : _props$className,
+    style = props.style,
+    data = props.data,
+    _props$columns = props.columns,
+    columns = _props$columns === void 0 ? 3 : _props$columns,
+    _props$border = props.border,
+    border = _props$border === void 0 ? false : _props$border,
+    _props$gutter = props.gutter,
+    gutter = _props$gutter === void 0 ? 0 : _props$gutter,
+    _props$shape = props.shape,
+    shape = _props$shape === void 0 ? 'square' : _props$shape,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'vertical' : _props$direction,
+    _props$isSliding = props.isSliding,
+    isSliding = _props$isSliding === void 0 ? false : _props$isSliding;
   var _useContext = useContext(GlobalContext),
-      useRtl = _useContext.useRtl;
-
+    useRtl = _useContext.useRtl;
   var domRef = useRef(null);
   useImperativeHandle(ref, function () {
     return {
       dom: domRef.current
     };
   });
-
   var getRows = function getRows(prefix, rowsData, rows, row) {
     var placeholders = !isSliding && rowsData.length % columns;
     var renderData = rowsData;
-
     if (placeholders) {
       var fakeGrids = new Array(columns - placeholders).fill({
         img: null,
@@ -50,25 +45,21 @@ var Grid = /*#__PURE__*/forwardRef(function (props, ref) {
       });
       renderData = rowsData.concat(fakeGrids);
     }
-
     return /*#__PURE__*/React.createElement("div", {
       className: prefix + "-rows",
       key: row
     }, renderData.map(function (item, index) {
       var _marginStyle;
-
       var img = item.img,
-          title = item.title,
-          content = item.content,
-          itemClassName = item.className,
-          _onClick = item.onClick,
-          itemStyle = item.itemStyle,
-          renderGrid = item.renderGrid;
-
+        title = item.title,
+        content = item.content,
+        itemClassName = item.className,
+        _onClick = item.onClick,
+        itemStyle = item.itemStyle,
+        renderGrid = item.renderGrid;
       if (renderGrid) {
         return renderGrid(item, index, row);
       }
-
       var marginBottom = row + 1 === rows ? 0 : typeof gutter === 'number' ? gutter : (gutter == null ? void 0 : gutter.y) || 0;
       var rowLen = renderData.length;
       var marginValue = index + 1 === rowLen ? 0 : typeof gutter === 'number' ? gutter : (gutter == null ? void 0 : gutter.x) || 0;
@@ -101,37 +92,30 @@ var Grid = /*#__PURE__*/forwardRef(function (props, ref) {
       }) : null);
     }));
   };
-
   var getGrid = function getGrid(prefix, dataArr) {
     var rows = dataArr.length || 1;
     return /*#__PURE__*/React.createElement(React.Fragment, null, dataArr.map(function (item, index) {
       return getRows(prefix, item, rows, index);
     }));
   };
-
   var renderEl = function renderEl(_ref) {
     var prefixCls = _ref.prefixCls;
     var prefix = prefixCls + "-grid";
     var dataLength = (data == null ? void 0 : data.length) || 0;
-
     if (dataLength === 0) {
       return null;
     }
-
     var index = 0;
     var newArr = [];
-
     while (index < dataLength) {
       newArr.push(data.slice(index, isSliding ? index += dataLength : index += columns));
     }
-
     return /*#__PURE__*/React.createElement("div", {
       className: cls(prefix, className, isSliding ? 'sliding' : ''),
       style: style,
       ref: domRef
     }, getGrid(prefix, newArr));
   };
-
   return /*#__PURE__*/React.createElement(ContextLayout, null, renderEl);
 });
 export default Grid;

package/esm/icon/IconAdd/index.js

@@ -5,12 +5,11 @@ import React from 'react';
 import { ContextLayout } from '../../context-provider';
 export default function IconAdd(props) {
   var _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className,
-      _props$useCurrentColo = props.useCurrentColor,
-      useCurrentColor = _props$useCurrentColo === void 0 ? true : _props$useCurrentColo,
-      style = props.style,
-      other = _objectWithoutPropertiesLoose(props, _excluded);
-
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$useCurrentColo = props.useCurrentColor,
+    useCurrentColor = _props$useCurrentColo === void 0 ? true : _props$useCurrentColo,
+    style = props.style,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/React.createElement("svg", _extends({

package/esm/icon/IconArrowBack/index.js

@@ -5,12 +5,11 @@ import React from 'react';
 import { ContextLayout } from '../../context-provider';
 export default function IconArrowBack(props) {
   var _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className,
-      _props$useCurrentColo = props.useCurrentColor,
-      useCurrentColor = _props$useCurrentColo === void 0 ? true : _props$useCurrentColo,
-      style = props.style,
-      other = _objectWithoutPropertiesLoose(props, _excluded);
-
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$useCurrentColo = props.useCurrentColor,
+    useCurrentColor = _props$useCurrentColo === void 0 ? true : _props$useCurrentColo,
+    style = props.style,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/React.createElement("svg", _extends({

package/esm/icon/IconArrowDown/index.js

@@ -5,12 +5,11 @@ import React from 'react';
 import { ContextLayout } from '../../context-provider';
 export default function IconArrowDown(props) {
   var _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className,
-      _props$useCurrentColo = props.useCurrentColor,
-      useCurrentColor = _props$useCurrentColo === void 0 ? true : _props$useCurrentColo,
-      style = props.style,
-      other = _objectWithoutPropertiesLoose(props, _excluded);
-
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$useCurrentColo = props.useCurrentColor,
+    useCurrentColor = _props$useCurrentColo === void 0 ? true : _props$useCurrentColo,
+    style = props.style,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/React.createElement("svg", _extends({