diginet-core-ui 1.3.87 → 1.3.88

package/components/typography/index.js

@@ -1,11 +1,13 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
+import { Popover } from "./..";
+import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, Fragment, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Popover } from '..';
-import { breakAll, breakWord, cursorPointer, displayBlock, displayInlineBlock, overflowHidden, pointerEventsNone, positionRelative, textCapitalize, textCenter, textUppercase } from "../../styles/general";
-import { useColor as colors, useTheme, useTypography as typography } from "../../theme";
+import { breakAll, breakWord, cursorPointer, displayBlock, displayInlineBlock, italic, overflowHidden, parseHeight, parseMaxWidth, pd, positionRelative, textCapitalize, textCenter, textColor, textLineThrough, textLowercase, textunderline, textUppercase, whiteSpaceBreakSpaces } from "../../styles/general";
+import { useTheme, useTypography as typography } from "../../theme";
 import { classNames, renderHTML } from "../../utils";
 const {
   colors: {
@@ -13,20 +15,18 @@ const {
       rest: systemRest
     },
     text: {
-      main: textMain,
-      tooltip: textTooltip
+      main: textMain
     },
     fill: {
       tooltip: fillTooltip
     }
-  },
-  typography: {
-    paragraph1
-  },
-  spacing
+  }
 } = useTheme();
 const colorMap = new Map([['default', textMain], ['secondary', systemRest]]);
+const formatMap = new Map([['capitalize', textCapitalize], ['uppercase', textUppercase], ['lowercase', textLowercase], ['italic', italic], ['line-through', textLineThrough], ['underline', textunderline]]);
+
 const isTextClamped = elm => (elm === null || elm === void 0 ? void 0 : elm.scrollHeight) > (elm === null || elm === void 0 ? void 0 : elm.clientHeight);
+
 const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   capitalize,
@@ -34,8 +34,10 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   className,
   color,
+  format,
   fullWidth,
   hoverTooltip,
+  italic,
   lineClamp,
   mapping,
   onClick,
@@ -45,37 +47,51 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   ...props
 }, reference) => {
   var _ref$current;
+
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
+  const formatCSS = [];
+  format.forEach(item => {
+    formatCSS.push(formatMap.get(item));
+  });
   const [openTooltip, setOpenTooltip] = useState(false);
-  const _TextRootCSS = TextRootCSS(color, type, lineClamp, onClick, hoverTooltip);
+  const _TextRootCSS = [TextRootCSS(color, type, lineClamp, onClick, hoverTooltip), ...formatCSS];
+
   const showTooltip = () => {
     if (!hoverTooltip) return;
+
     if (isTextClamped(ref.current)) {
       setOpenTooltip(true);
     }
   };
+
   const hideTooltip = () => {
     if (!hoverTooltip) return;
+
     if (isTextClamped(ref.current)) {
       setOpenTooltip(false);
     }
   };
+
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = {
-      ...action
+    const _instance = { ...action
     }; // methods
+
     _instance.__proto__ = {}; // hidden methods
+
     currentRef.instance = _instance;
     return currentRef;
   });
+
   const classes = (inTooltip = false) => classNames('DGN-UI-Typography', center && 'DGN-Typography-center', fullWidth && 'DGN-Typography-fullWidth', `DGN-Typography-${type}`, uppercase && `DGN-Typography-Uppercase`, capitalize && 'DGN-Typography-Capitalize', !inTooltip && lineClamp && 'DGN-Typography-Clamp', className);
+
   const content = Array.isArray(children) && !children.some(node => node && String(node.$$typeof) === 'Symbol(react.element)') ? children.join('') : children;
   const renderTooltip = hoverTooltip ? jsx(Popover, {
-    css: PopoverCSS,
     open: openTooltip,
     pressESCToClose: false,
+    fullScreen: false,
     bgColor: fillTooltip,
     anchor: ref,
     width: ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientWidth) || 'max-content',
@@ -94,26 +110,24 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: onClick,
       ...props
     }), renderTooltip);
-  }, [capitalize, center, children, className, color, fullWidth, hoverTooltip, lineClamp, mapping, onClick, tooltipDirection, type, uppercase, props, openTooltip]);
+  }, [capitalize, center, children, className, color, format, fullWidth, hoverTooltip, italic, lineClamp, mapping, onClick, props, tooltipDirection, type, uppercase, openTooltip]);
 }));
+
 const TextRootCSS = (color, type, lineClamp, onClick, hoverTooltip) => css`
     ${displayInlineBlock};
     ${positionRelative};
-    ${paragraph1};
     ${onClick && cursorPointer};
     ${hoverTooltip && lineClamp === 1 ? breakAll : breakWord};
-    white-space: break-spaces;
-    color: ${colorMap.get(color) || colors[color] || color};
-    max-width: max-content;
-    &.DGN-Typography-${type} {
-        ${typography[type]};
-    }
+    ${whiteSpaceBreakSpaces};
+    ${textColor(colorMap.get(color) || color)};
+    ${parseMaxWidth('max-content')};
+    ${typography[type]};
     &.DGN-Typography-center {
         ${textCenter};
     }
     &.DGN-Typography-fullWidth {
         ${displayBlock};
-        max-width: initial;
+        ${parseMaxWidth('initial')};
     }
     &.DGN-Typography-Uppercase {
         ${textUppercase};
@@ -128,66 +142,75 @@ const TextRootCSS = (color, type, lineClamp, onClick, hoverTooltip) => css`
         -webkit-box-orient: vertical;
     }
 `;
-const PopoverCSS = css`
-    ${pointerEventsNone};
-    color: ${textTooltip};
-`;
+
 const PopoverContentCSS = css`
-    color: ${textTooltip};
-    padding: ${spacing([1, 1.5])};
-    height: 'fit-content';
+    ${textColor('text.tooltip')};
+    ${pd([1, 1.5])};
+    ${parseHeight('fit-content')};
 `;
 Typography.defaultProps = {
   center: false,
   className: '',
   color: 'default',
+  format: [],
   fullWidth: true,
   hoverTooltip: false,
   mapping: 'span',
   tooltipDirection: 'bottom',
   type: 'p1'
 };
-
-/** type of text<br/>
- * h1: Title <br/>
- * h2: Header Popup <br/>
- * h3: Header popup <br/>
- * h4: Button, Tab, Title group <br/>
- * h5: Label column, Title group <br/>
- * h6: Label form <br/>
- * p1: Body text <br/>
- * p2: Body text <br/>
- * p3: Notice, Tooltip <br/>
+/** type of text<br/>
+ * h1: Title <br/>
+ * h2: Header Popup <br/>
+ * h3: Header popup <br/>
+ * h4: Button, Tab, Title group <br/>
+ * h5: Label column, Title group <br/>
+ * h6: Label form <br/>
+ * p1: Body text <br/>
+ * p2: Body text <br/>
+ * p3: Notice, Tooltip <br/>
  */
+
 export const arrTypeTypography = ['t1', 't2', 't3', 't4', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p1', 'p2', 'p3', 'title1', 'title2', 'title3', 'title4', 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6', 'paragraph1', 'paragraph2', 'paragraph3'];
 Typography.propTypes = {
-  /** If `true`, text-transform is capitalized. It overrides the value of the `uppercase` prop. */
-  capitalize: PropTypes.bool,
   /** If `true`, text-align is center. */
   center: PropTypes.bool,
+
   /** The content of the component. */
   children: PropTypes.node,
+
   /** Class for component. */
   className: PropTypes.string,
+
   /** Color of text ['primary', 'secondary', 'success', 'warning', 'danger', 'info', '#hex', rgb(#,#,#)]. */
   color: PropTypes.string,
+
+  /** Option to make the text bold, italic, capitalize or underline. */
+  format: PropTypes.arrayOf(PropTypes.oneOf(['capitalize', 'uppercase', 'lowercase', 'italic', 'line-through', 'underline'])),
+
   /** If `true`, the component will take up the full width of its container. */
   fullWidth: PropTypes.bool,
+
   /** If `true`, hover will show tooltip when text clamped. */
   hoverTooltip: PropTypes.bool,
+
   /** The line-clamp property truncates text at a specific number of lines. */
   lineClamp: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]),
+
   /** The component used for the root node. Either a string to use a HTML element or a component. */
   mapping: PropTypes.string,
+
   /** Callback fired when the component is clicked. */
   onClick: PropTypes.func,
+
   /** Accepts all props which `mapping` tag support. */
   props: PropTypes.object,
+
   /** Tooltip direction. */
   tooltipDirection: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+
   /** Applies the theme typography styles. */
-  type: PropTypes.oneOf(arrTypeTypography),
-  /** If `true`, text-transform is uppercase. */
-  uppercase: PropTypes.bool
+  type: PropTypes.oneOf(arrTypeTypography)
 };
-export default Typography;
+export { Typography };
+export default OptionWrapper(Typography);

package/global/index.js

@@ -149,16 +149,21 @@ const globalObject = {
 };
 export const getGlobal = (key, language = locale.get()) => {
   var _globalObject$languag;
+
   if (Array.isArray(key)) {
     let result = globalObject[language];
+
     for (let i = 0; i < key.length; i++) {
       if (!result[key[i]]) {
         return null;
       }
+
       result = result[key[i]];
     }
+
     return result;
   }
+
   return globalObject[key] || ((_globalObject$languag = globalObject[language]) === null || _globalObject$languag === void 0 ? void 0 : _globalObject$languag[key]);
 };
 export const setGlobal = global => {
@@ -169,9 +174,11 @@ export const setGlobal = global => {
     });
   }
 };
+
 const overrideGlobal = (newGlobal, ingredient, key) => {
   const newGlobalValue = newGlobal[key];
   const rootValue = ingredient[key];
+
   if (typeof newGlobalValue === 'object' && typeof rootValue === 'object') {
     const newGlobalKeys = Object.keys(newGlobalValue);
     newGlobalKeys.forEach(newKey => {
@@ -183,4 +190,5 @@ const overrideGlobal = (newGlobal, ingredient, key) => {
     globalObject[key] = newGlobalValue;
   }
 };
+
 export default globalObject;