diginet-core-ui 1.3.24 → 1.3.29

package/styles/typography.js

@@ -1,14 +1,14 @@
 import { css } from '@emotion/core';
 import { parseToPixel } from "./utils";
-export const fontFamily = `"SF Pro Display Regular", sans-serif`;
-export const fontFamilyLink = 'https://core.diginet.com.vn/theme/default/fonts/SF-Pro-Display/SF-Pro-Display-Regular.otf';
-export const fontFamilyMedium = `"SF Pro Display Medium", sans-serif`;
-export const fontFamilyMediumLink = 'https://core.diginet.com.vn/theme/default/fonts/SF-Pro-Display/SF-Pro-Display-Medium.otf';
-export const fontFamilyBold = `"SF Pro Display Bold", sans-serif`;
-export const fontFamilyBoldLink = 'https://core.diginet.com.vn/theme/default/fonts/SF-Pro-Display/SF-Pro-Display-Bold.otf';
-export const fontSize = '16px';
+import { font } from "./font";
+export const {
+  fontFamily,
+  fontSize
+} = font; //export to use general
+
 const fontNormal = css`
   font-style: normal;
+  font-family: ${fontFamily};
 `;
 const fontWeightBold = css`
   font-weight: 700;
@@ -18,7 +18,7 @@ const fontWeightRegular = css`
 `;
 const fontWeightNormal = css`
   font-weight: normal;
-`;
+`; // follow rules line-height = fontsize + 4
 
 const getFontSize = size => css`
   font-size: ${parseToPixel(size)};
@@ -28,78 +28,77 @@ const getFontSize = size => css`
 const title1 = css`
   ${fontNormal};
   ${fontWeightBold};
-  ${getFontSize(32)};
+  ${getFontSize(parseInt(fontSize) + 16)}; //32
 `;
 const title2 = css`
   ${fontNormal};
   ${fontWeightBold};
-  ${getFontSize(26)};
+  ${getFontSize(parseInt(fontSize) + 10)}; //26
 `;
 const title3 = css`
   ${fontNormal};
   ${fontWeightBold};
-  ${getFontSize(24)};
+  ${getFontSize(parseInt(fontSize) + 8)}; //24
 `;
 const title4 = css`
   ${fontNormal};
   ${fontWeightBold};
-  ${getFontSize(22)};
+  ${getFontSize(parseInt(fontSize) + 6)}; //22
 `;
 const heading1 = css`
   ${fontNormal};
   ${fontWeightBold};
-  ${getFontSize(20)};
+  ${getFontSize(parseInt(fontSize) + 4)}; //20
 `;
 const heading2 = css`
   ${fontNormal};
   ${fontWeightBold};
-  ${getFontSize(18)};
+  ${getFontSize(parseInt(fontSize) + 2)}; //18
 `;
 const heading3 = css`
   ${fontNormal};
   ${fontWeightBold};
-  font-size: 16px;
-  line-height: 20px;
+  ${getFontSize(parseInt(fontSize))}; //16
 `;
 const heading4 = css`
   ${fontNormal};
   ${fontWeightBold};
-  ${getFontSize(14)};
+  ${getFontSize(parseInt(fontSize) - 2)}; //14
 `;
 const heading5 = css`
   ${fontNormal};
   ${fontWeightBold};
-  ${getFontSize(12)};
+  ${getFontSize(parseInt(fontSize) - 4)}; //12
 `;
 const heading6 = css`
   ${fontNormal};
   ${fontWeightRegular}
-  ${getFontSize(12)};
+  ${getFontSize(parseInt(fontSize) - 4)}; //12
 `;
 const paragraph1 = css`
   ${fontNormal};
   ${fontWeightNormal};
-  ${getFontSize(16)};
+  ${getFontSize(parseInt(fontSize))}; //16
 `;
 const paragraph2 = css`
   ${fontNormal};
   ${fontWeightNormal};
-  ${getFontSize(14)};
+  ${getFontSize(parseInt(fontSize) - 2)}; //14
 `;
 const paragraph3 = css`
   ${fontNormal};
   ${fontWeightNormal};
-  ${getFontSize(12)};
+  ${getFontSize(parseInt(fontSize) - 4)}; //12
 `;
 const uppercase = css`
-  textTransform: uppercase
+  text-transform: uppercase
 `;
 const label = css`
-  font-size: 12px;
-  ${fontWeightBold};
+  font-size: ${parseInt(fontSize) - 4}px; //12
+  ${fontWeightBold}
 `;
 const helperText = css`
-  font-size: 12px;
+  font-size: ${parseInt(fontSize) - 4}px; //12
   ${fontWeightNormal}
 `;
 export const typography = {

package/theme/settings.js

@@ -1,5 +1,12 @@
-import { fontSize, fontFamily, fontFamilyMedium, fontFamilyBold } from '../styles/typography';
 import * as colors from '../styles/colors';
+import { font } from '../styles/font';
+const {
+  fontSize,
+  fontFamily,
+  fontFamilyBold,
+  fontFamilyMedium
+} = font;
+import { color } from '../styles/colors';
 const settings = {
   border: {
     radius: '4px',
@@ -9,7 +16,7 @@ const settings = {
     large: '0 4px 4px 0 rgba(0, 0, 0, 0.25)',
     small: '0 2px 2px 0 rgba(0, 0, 0, 0.25)'
   },
-  colors: {
+  colors: { ...color,
     bgDisabled: colors.dark12,
     bgProgress: colors.brand12,
     border: colors.dark6,

package/theme/theme-provider.js

@@ -5,33 +5,41 @@ import { memo, useEffect } from 'react';
 import { jsx, css } from '@emotion/core';
 import { setTheme } from './set-theme';
 import { makeStylesEls } from './make-styles';
-import { fontFamilyLink, fontFamilyMediumLink, fontFamilyBoldLink } from '../styles/typography';
 import { string, object, node } from 'prop-types';
+import { font } from '../styles/font';
+const {
+  fontFamily,
+  fontFamilyBold,
+  fontFamilyMedium,
+  fontFamilyLink,
+  fontFamilyBoldLink,
+  fontFamilyMediumLink
+} = font;
 const ThemeProviderRoot = css`
     @font-face {
-        font-family: 'SF Pro Display Bold';
+        font-family: ${fontFamilyBold};
         src: url('${fontFamilyBoldLink}') format('opentype');
     }
     @font-face {
-        font-family: 'SF Pro Display Medium';
+        font-family: ${fontFamilyMedium};
         src: url('${fontFamilyMediumLink}') format('opentype');
     }
     @font-face {
-        font-family: 'SF Pro Display Regular';
+        font-family: ${fontFamily};
         src: url('${fontFamilyLink}') format('opentype');
     }
     @font-face {
-        font-family: 'SF Pro Display';
+        font-family: ${fontFamily};
         font-weight: 400;
         src: url('${fontFamilyLink}') format('opentype');
     }
     @font-face {
-        font-family: 'SF Pro Display';
+        font-family: ${fontFamily};
         font-weight: 500;
         src: url('${fontFamilyMediumLink}') format('opentype');
     }
     @font-face {
-        font-family: 'SF Pro Display';
+        font-family: ${fontFamily};
         font-weight: 700;
         src: url('${fontFamilyBoldLink}') format('opentype');
     }

package/theme/with-styles.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -9,9 +7,9 @@ import makeStyles from './make-styles';
 const WithStyles = styles => Component => props => {
   const useStyle = makeStyles(styles);
   const classes = useStyle();
-  return jsx(Component, _extends({}, props, {
+  return jsx(Component, { ...props,
     classes: classes
-  }));
+  });
 };
 
 export default WithStyles;

package/theme/with-theme.js

@@ -1,11 +1,9 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import settings from './settings';
 
 const withTheme = Component => props => {
-  return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(Component, { ...props,
     theme: settings
-  }));
+  });
 };
 
 export default withTheme;

package/utils/isMobile.js

@@ -0,0 +1,21 @@
+const isMobile = {
+  iOS: function () {
+    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
+  },
+  Android: function () {
+    return navigator.userAgent.match(/Android/i);
+  },
+  BlackBerry: function () {
+    return navigator.userAgent.match(/BlackBerry/i);
+  },
+  Opera: function () {
+    return navigator.userAgent.match(/Opera Mini/i);
+  },
+  Windows: function () {
+    return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i);
+  },
+  any: function () {
+    return isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows();
+  }
+};
+export default isMobile;

package/utils/renderHTML.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -8,14 +6,15 @@ import parseTextToHTML from './parseHTML';
 
 const renderHTML = (text = null, TagName = 'div', options = {}) => {
   if (text && (text.$$typeof && String(text.$$typeof) === 'Symbol(react.element)' || Array.isArray(text) && text.some(node => node && String(node.$$typeof) === 'Symbol(react.element)'))) {
-    return jsx(TagName, options, text);
+    return jsx(TagName, { ...options
+    }, text);
   }
 
-  return jsx(TagName, _extends({}, options, {
+  return jsx(TagName, { ...options,
     dangerouslySetInnerHTML: {
       __html: parseTextToHTML(String(text))
     }
-  }));
+  });
 };
 
 export default renderHTML;

package/utils/renderIcon.js

@@ -1,10 +1,9 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import Icon, * as Icons from '../icons';
+import { ButtonIcon } from '../components';
+import * as Icons from '../icons';
 import { parseTextToHTML, capitalize } from './';
 /**
  * render icon form source (dynamic type)
@@ -20,28 +19,33 @@ const renderIcon = (source, type, options = {}) => {
         let IconComp = Icons[capitalize(source)];
 
         if (IconComp) {
-          return jsx(IconComp, options);
+          return jsx(IconComp, { ...options
+          });
         }
 
         return null;
 
       case 'effect':
-        return jsx(Icon, _extends({
-          name: source
-        }, options));
+        return jsx(ButtonIcon, {
+          viewType: 'ghost',
+          name: source,
+          ...options
+        });
 
       case 'link':
       case 'imgLink':
-        return jsx("img", _extends({
-          src: source
-        }, options));
+        return jsx("img", {
+          src: source,
+          ...options
+        });
 
       default:
         if (source.length < 20) {
           const IconComp = Icons[capitalize(source)];
 
           if (IconComp) {
-            return jsx(IconComp, options);
+            return jsx(IconComp, { ...options
+            });
           }
 
           return null;

package/utils/updatePosition.js

@@ -14,7 +14,7 @@ const updatePosition = (anchorEl, transformEl, cb) => {
   } = transformEl.getBoundingClientRect(); // Vertical
 
   if (bottom < 0 || top > innerHeight) {
-    cb();
+    cb === null || cb === void 0 ? void 0 : cb();
   } else if (bottom + 4 + nodeHeight > innerHeight) {
     if (top - (nodeHeight + 4) > 0) {
       transformEl.style.top = top - (nodeHeight + 4) + 'px';
@@ -27,7 +27,7 @@ const updatePosition = (anchorEl, transformEl, cb) => {
 
 
   if (left < 0 || right > innerWidth) {
-    cb();
+    cb === null || cb === void 0 ? void 0 : cb();
   } else {
     transformEl.style.left = left + 'px';
   }