Implemented the customization of styles of the Tooltip component

packages/drawing-toolbar/src/components/line-settings.jsx

@@ -18,7 +18,6 @@ const lineSizes = {
   EIGHT: 8,
 }
 
-
 export const LineSettings = ({
   currentSize, handleClick, dashed = false,
 }) => {

packages/tooltip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulms/tooltip",
-  "version": "1.0.0",
+  "version": "1.0.1-dev-0-ULMS-2928",
   "description": "",
   "keywords": [
     "lerna"

packages/tooltip/src/tooltip.jsx

@@ -3,6 +3,8 @@ import React, { memo, useMemo } from 'react'
 import styled from 'styled-components'
 import { Tooltip as TooltipComponent } from '@foxford/ui'
 
+import { deepMerge } from './utils'
+
 const styles = {
   wrapper: {
     height: '100%',
@@ -25,6 +27,8 @@ const styles = {
     fontSize: '14px',
     lineHeight: '130%',
     color: '#333',
+    textAlign: 'center',
+    whiteSpace: 'pre-line',
   },
   arrow: {
     spread: 16,
@@ -69,7 +73,17 @@ function _Tooltip ({
   dark,
   ...tooltipProps
 }) {
-  const computedStyles = useMemo(() => dark ? darkStyles : styles, [dark, customStyles])
+  const computedStyles = useMemo(
+    () => deepMerge(customStyles, dark ? darkStyles : styles),
+    [dark, customStyles]
+  )
+
+  // if (Object.keys(customStyles).length) {
+  //   console.log('!!!', {
+  //     computedStyles,
+  //     customStyles,
+  //   })
+  // }
 
   return disabled || hideTooltip
     ? (

packages/tooltip/src/utils.js

@@ -0,0 +1,49 @@
+function deepCopy (obj) {
+  const result = {}
+
+  if (typeof obj !== 'object'
+    || typeof obj === 'undefined'
+    || obj === null
+    || Array.isArray(obj)
+    || typeof obj === 'function') {
+    return obj
+  }
+
+  const keys = Object.keys(obj)
+
+  // eslint-disable-next-line guard-for-in,no-restricted-syntax
+  for (const key in keys) {
+    result[keys[key]] = deepCopy(obj[keys[key]])
+  }
+
+  return result
+}
+
+export function deepMerge (value1, value2) {
+  const obj1 = deepCopy(value1)
+  const obj2 = deepCopy(value2)
+  const mergedObj = {}
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (const key in obj1) {
+    if (typeof obj1[key] === 'object' && obj1[key] !== null) {
+      if (obj2[key] && typeof obj2[key] === 'object' && obj2[key] !== null) {
+        mergedObj[key] = deepMerge(obj1[key], obj2[key])
+      } else {
+        mergedObj[key] = obj1[key]
+      }
+    } else {
+      mergedObj[key] = obj1[key]
+    }
+  }
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (const key in obj2) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (obj2.hasOwnProperty(key) && !obj1.hasOwnProperty(key)) {
+      mergedObj[key] = obj2[key]
+    }
+  }
+
+  return mergedObj
+}