diginet-core-ui 1.3.65-beta.1 → 1.3.65-beta.2

package/components/form-control/input-base/index.js

@@ -1,17 +1,17 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import useInput from '../../../utils/useInput';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { renderIcon } from '../../../utils';
 import theme from '../../../theme/settings';
 import { typography } from '../../../styles/typography';
 const {
   colors
 } = theme;
 import { getGlobal } from '../../../global';
+import Icon from '../../../icons';
 const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   type,
   viewType,
@@ -588,26 +588,46 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onFocus: onFocus,
     ...bind
   }));
+  const StartIcon = useMemo(() => {
+    let node = startIcon;
+
+    if (typeof node === 'string') {
+      node = jsx(Icon, {
+        name: startIcon,
+        style: iconStyle
+      });
+    }
+
+    return jsx("div", {
+      css: inputBaseIconCSS,
+      ...startIconProps,
+      className: ['start-icon', startIconProps.className ? startIconProps.className : ''].join(' ').trim()
+    }, node);
+  }, [startIcon]);
+  const EndIcon = useMemo(() => {
+    let node = endIcon;
+
+    if (typeof node === 'string') {
+      node = jsx(Icon, {
+        name: endIcon,
+        style: iconStyle
+      });
+    }
+
+    return jsx("div", {
+      css: inputBaseIconCSS,
+      ...endIconProps,
+      className: ['end-icon', endIconProps.className ? endIconProps.className : ''].join(' ').trim()
+    }, ' ', node, ' ');
+  }, [endIcon]);
   const InputComp = jsx("div", {
     css: inputBaseRoot,
     ref: ref,
     ...props,
     className: ['DGN-UI-InputBase', newClass, className, status].join(' ').trim()
-  }, jsx("div", {
+  }, startIcon && StartIcon, jsx("div", {
     css: inputBaseCSS
-  }, !!startIcon && jsx("div", {
-    css: inputBaseIconCSS,
-    ...startIconProps,
-    className: 'start-icon ' + (startIconProps.className ? startIconProps.className : '')
-  }, renderIcon(startIcon, typeof startIcon === 'string' && startIcon.length < 20 ? 'effect' : null, {
-    onClick: startIconProps.onClick ? null : () => inputBaseRef.current.focus(),
-    style: {
-      padding: 0,
-      minHeight: '24px',
-      ...iconStyle
-    },
-    viewBox: true
-  })), jsx("input", {
+  }, jsx("input", {
     type: type,
     autoComplete: autoComplete,
     placeholder: isEnabled ? placeholder : '',
@@ -627,18 +647,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onBlur: onBlur,
     onFocus: onFocus,
     ...bind
-  })), !!endIcon && jsx("div", {
-    css: inputBaseIconCSS,
-    ...endIconProps,
-    className: 'end-icon ' + (endIconProps.className ? endIconProps.className : '')
-  }, renderIcon(endIcon, null, {
-    style: {
-      padding: 0,
-      minHeight: '24px',
-      ...iconStyle
-    },
-    viewBox: true
-  })));
+  })), endIcon && EndIcon);
   const InputBaseComp = multiline ? MultipleInputComp : InputComp;
   /* End component */
 
@@ -724,10 +733,10 @@ InputBase.propTypes = {
   required: PropTypes.bool,
 
   /** icon element display in the left of input */
-  startIcon: PropTypes.any,
+  startIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
   /** icon element display in the right of input */
-  endIcon: PropTypes.any,
+  endIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
   /** props of input in InputBase component */
   inputProps: PropTypes.object,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.65-beta.1",
+  "version": "1.3.65-beta.2",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",