diginet-core-ui 1.3.64-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/components/paging/page-info.js

@@ -78,7 +78,6 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     e,
     changeBy
   }) => {
-    if (page === currentPageState) return;
     const lastPage = getLastPage(totalItemsState, itemsPerPageState);
     let disablePrev = false;
     let disableNext = false; // If last page = 1. Disable all
@@ -98,6 +97,10 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       disablePrev = true;
     }
 
+    setDisablePrevState(disablePrev);
+    setDisableNextState(disableNext);
+    if (page === currentPageState) return;
+
     if (onChangingPage) {
       const event = { ...e,
         cancel: false,
@@ -119,8 +122,6 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentPageRef.current = page;
     setCurrentPageState(page);
     setInputPageValue(page);
-    setDisablePrevState(disablePrev);
-    setDisableNextState(disableNext);
     if (onChangePage) onChangePage(page);
   };
 
@@ -523,7 +524,8 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
         .DGN-UI-Dropdown-Form {
             min-height: 24px;
             padding: 0;
-            input {
+            input,
+            span {
                 ${paragraph2};
                 ${noPadding};
                 ${cursorPointer};

package/components/paging/page-selector2.js

@@ -69,7 +69,6 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     e,
     changeBy
   }) => {
-    if (page === currentPageState) return;
     let disablePrev = false;
     let disableNext = false; // If last page = 1. Disable all
 
@@ -88,6 +87,10 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       disablePrev = true;
     }
 
+    setDisablePrevState(disablePrev);
+    setDisableNextState(disableNext);
+    if (page === currentPageState) return;
+
     if (onChangingPage) {
       const event = { ...e,
         cancel: false,
@@ -107,8 +110,6 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     currentPageRef.current = page;
     setCurrentPageState(page);
-    setDisablePrevState(disablePrev);
-    setDisableNextState(disableNext);
     if (onChangePage) onChangePage(page);
   };
 

package/package.json

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

package/readme.md

@@ -38,6 +38,9 @@ npm test
 ```
 
 ## Changelog
+## 1.3.65
+- \[Changed\]: Dropdown – Add viewType none
+
 ## 1.3.64
 - \[Added\]: COLORS – Add new colors
 - \[Changed\]: Checkbox – Add case checked, defaultChecked is number 0,1