feat: useTranslation (#51)

fix: french color names
fix: colorbox return translated name in deferred mode

Author: mikbry

src/components/ColorBox/index.jsx

@@ -22,6 +22,7 @@ import AlphaSlider from './AlphaSlider';
 import { parse as colorParse, getCssColor, validateColor } from '../../helpers/colorTool';
 import uncontrolled from '../../helpers/uncontrolled';
 import * as CommonTypes from '../../helpers/commonTypes';
+import useTranslate from '../../helpers/useTranslate';
 
 // To stay compatible with MUI theme
 // TODO remove in future
@@ -84,8 +85,9 @@ const StyledBox = styled.div`
   }
 `;
 
-const ColorBox = ({ value, palette, inputFormats, deferred, onChange: _onChange, translate, ...props }) => {
-  let color = validateColor(value, translate);
+const ColorBox = ({ value, palette, inputFormats, deferred, onChange: _onChange, ...props }) => {
+  const { t, i18n } = useTranslate();
+  let color = validateColor(value, t, i18n.language);
   let onChange = _onChange;
   let onDeferredChange;
   if (deferred) {
@@ -115,6 +117,8 @@ const ColorBox = ({ value, palette, inputFormats, deferred, onChange: _onChange,
 
   const handlePaletteSelection = (name, colour) => {
     const c = colorParse(colour);
+    // To handle back the translated name
+    c.name = name;
     onChange(c);
   };
 
@@ -136,7 +140,6 @@ const ColorBox = ({ value, palette, inputFormats, deferred, onChange: _onChange,
             format={input}
             className="muicc-colorbox-input"
             onChange={handleInputChange}
-            translate={translate}
           />
         ))}
       </div>
@@ -176,12 +179,12 @@ const ColorBox = ({ value, palette, inputFormats, deferred, onChange: _onChange,
         {palette && (
           <>
             <Divider />
-            <ColorPalette size={26.65} palette={palette} onSelect={handlePaletteSelection} translate={translate} />
+            <ColorPalette size={26.65} palette={palette} onSelect={handlePaletteSelection} />
           </>
         )}
         {deferred && (
           <div className="muicc-colorbox-controls">
-            <Button onClick={handleSet}>{translate('Set')}</Button>
+            <Button onClick={handleSet}>{t('Set')}</Button>
           </div>
         )}
       </StyledBox>
@@ -195,18 +198,13 @@ ColorBox.propTypes = {
   palette: CommonTypes.palette,
   inputFormats: CommonTypes.inputFormats,
   onChange: PropTypes.func.isRequired,
-  /**
-    The localization utils function
-   */
-  translate: PropTypes.func,
 };
 
 ColorBox.defaultProps = {
   value: undefined,
   deferred: false,
   palette: undefined,
   inputFormats: ['hex', 'rgb'],
-  translate: v => v,
 };
 
 export default uncontrolled(ColorBox);

src/components/ColorButton.jsx

@@ -14,6 +14,7 @@ import Button from '@material-ui/core/Button';
 import Tooltip from '@material-ui/core/Tooltip';
 import * as ColorTool from '../helpers/colorTool';
 import * as CommonTypes from '../helpers/commonTypes';
+import useTranslate from '../helpers/useTranslate';
 
 const StyledButton = styled(({ color, style, size, hoverColor, borderColor, borderWidth, tooltip, ...other }) => (
   <Button data-testid="colorbutton" {...other} />
@@ -48,9 +49,10 @@ const Styleddiv = styled.div`
 - Use a ColorButton to select a predefined color by clicking on this button.
 - If the color is not valid or transparent a crossed background is displayed.
  */
-const ColorButton = ({ color: c, size, borderWidth, borderColor, forwardRef, tooltip, translate, ...props }) => {
-  const color = ColorTool.validateColor(c, translate);
-  const translated = translate(tooltip);
+const ColorButton = ({ color: c, size, borderWidth, borderColor, forwardRef, tooltip, ...props }) => {
+  const { t, i18n } = useTranslate();
+  const color = ColorTool.validateColor(c, t, i18n.language);
+  const translated = t(tooltip);
   const style = color.css; // || { backgroundColor: ColorTool.getCssColor(color) };
   let l = color.hsl[2] - 10;
   if (l < 30) l = color.hsl[2] + 50;
@@ -102,10 +104,6 @@ ColorButton.propTypes = {
     A tooltip could be added to the button to display the color name or value
    */
   tooltip: PropTypes.string,
-  /**
-    The localization utils function
-   */
-  translate: PropTypes.func,
   /**
     Internal usage
    */
@@ -118,7 +116,6 @@ ColorButton.defaultProps = {
   borderColor: undefined,
   forwardRef: undefined,
   tooltip: undefined,
-  translate: v => v,
 };
 
 export default ColorButton;

src/components/ColorInput.jsx

@@ -18,6 +18,7 @@ import InputAdornment from '@material-ui/core/InputAdornment';
 import * as ColorTool from '../helpers/colorTool';
 import uncontrolled from '../helpers/uncontrolled';
 import * as CommonTypes from '../helpers/commonTypes';
+import useTranslate from '../helpers/useTranslate';
 
 const StyledFormControl = styled(FormControl)`
   width: 100px;
@@ -34,8 +35,9 @@ const StyledRoot = styled.div`
   }
 `;
 
-const ColorInput = ({ value, format, onChange, forwardRef, translate, ...props }) => {
-  const color = ColorTool.validateColor(value, translate);
+const ColorInput = ({ value, format, onChange, forwardRef, ...props }) => {
+  const { t, i18n } = useTranslate();
+  const color = ColorTool.validateColor(value, t, i18n.language);
   let field;
   let components;
 
@@ -85,7 +87,7 @@ const ColorInput = ({ value, format, onChange, forwardRef, translate, ...props }
   if (format === 'plain') {
     field = buildInput('color-plain', 'Color', color.raw);
   } else {
-    components = ColorTool.getComponents(color, format, translate);
+    components = ColorTool.getComponents(color, format, t);
     const names = Object.keys(components);
     field = (
       <StyledRoot ref={forwardRef}>
@@ -109,10 +111,6 @@ ColorInput.propTypes = {
   value: CommonTypes.color,
   format: PropTypes.string,
   onChange: PropTypes.func.isRequired,
-  /**
-    The localization utils function
-   */
-  translate: PropTypes.func,
   /**
     Internal usage
    */
@@ -122,7 +120,6 @@ ColorInput.propTypes = {
 ColorInput.defaultProps = {
   value: '',
   format: 'plain',
-  translate: undefined,
   forwardRef: undefined,
 };
 

src/components/ColorPalette.jsx

@@ -12,6 +12,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import ColorButton from './ColorButton';
 import * as CommonTypes from '../helpers/commonTypes';
+import useTranslate from '../helpers/useTranslate';
 
 const StyledRoot = styled.div`
   display: flex;
@@ -24,9 +25,11 @@ const StyledRoot = styled.div`
   }
 `;
 
-const ColorPalette = ({ size, borderWidth, palette, translate, onSelect }) => {
+const ColorPalette = ({ size, borderWidth, palette, onSelect }) => {
+  const { t } = useTranslate();
   const handleSelectColor = name => {
-    if (onSelect) onSelect(name, palette[name]);
+    const translatedName = t(name);
+    if (onSelect) onSelect(translatedName, palette[name]);
   };
 
   return (
@@ -39,7 +42,6 @@ const ColorPalette = ({ size, borderWidth, palette, translate, onSelect }) => {
           className="muicc-palette-button"
           borderWidth={borderWidth}
           tooltip={name}
-          translate={translate}
           onClick={() => handleSelectColor(name)}
         />
       ))}
@@ -53,18 +55,13 @@ ColorPalette.propTypes = {
   palette: CommonTypes.palette.isRequired,
   forwardRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
   onSelect: PropTypes.func,
-  /**
-    The localization utils function
-   */
-  translate: PropTypes.func,
 };
 
 ColorPalette.defaultProps = {
   borderWidth: 0,
   size: 24,
   forwardRef: undefined,
   onSelect: undefined,
-  translate: undefined,
 };
 
 export default ColorPalette;

src/components/ColorPicker.jsx

@@ -19,6 +19,7 @@ import ColorBox from './ColorBox';
 import * as ColorTool from '../helpers/colorTool';
 import uncontrolled from '../helpers/uncontrolled';
 import * as CommonTypes from '../helpers/commonTypes';
+import useTranslate from '../helpers/useTranslate';
 
 const StyledRoot = styled.div`
   display: flex;
@@ -53,11 +54,11 @@ const ColorPicker = ({
   onChange,
   onOpen,
   doPopup,
-  translate,
 }) => {
   const refPicker = React.useRef();
   const [open, setOpen] = React.useState(openAtStart);
-  const color = ColorTool.validateColor(value, translate);
+  const { t, i18n } = useTranslate();
+  const color = ColorTool.validateColor(value, t, i18n.language);
   const raw = getColorText(color);
   const handleClick = () => {
     const b = Boolean(refPicker.current);
@@ -88,7 +89,6 @@ const ColorPicker = ({
       deferred={deferred}
       palette={palette}
       inputFormats={inputFormats}
-      translate={translate}
       onChange={handleColorChange}
     />
   );
@@ -145,10 +145,6 @@ ColorPicker.propTypes = {
   onOpen: PropTypes.func,
   openAtStart: PropTypes.bool,
   doPopup: PropTypes.func,
-  /**
-    The localization utils function
-   */
-  translate: PropTypes.func,
 };
 
 ColorPicker.defaultProps = {
@@ -160,7 +156,6 @@ ColorPicker.defaultProps = {
   onOpen: undefined,
   openAtStart: false,
   doPopup: undefined,
-  translate: undefined,
 };
 
 export default uncontrolled(ColorPicker);

src/helpers/colorTool.js

@@ -390,14 +390,14 @@ const getCssColor = (color, format, noAlpha) => {
 let cssColorsTranslated;
 let language;
 
-const validateColor = (_color, translate) => {
+const validateColor = (_color, translate, translateLanguage) => {
   let color = _color;
   let isTranslated = false;
   if (!(_color && _color.format && _color.name)) {
     color = _color;
     if (translate && typeof color === 'string') {
-      if (!cssColorsTranslated || translate('language') !== language) {
-        language = translate('language');
+      if (!cssColorsTranslated || translateLanguage !== language) {
+        language = translateLanguage;
         cssColorsTranslated = {};
         Object.keys(cssColors).forEach(name => {
           cssColorsTranslated[translate(name)] = name;

src/helpers/useTranslate.js

@@ -0,0 +1,17 @@
+/* eslint-disable no-bitwise */
+/**
+ * Copyright (c) Mik BRY
+ * [email protected]
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const globalTranslate = { use: () => ({ i18n: { language: 'us' }, t: v => v }) };
+
+const useTranslate = _translation => {
+  if (_translation) globalTranslate.use = _translation;
+  return globalTranslate.use();
+};
+
+export default useTranslate;

src/index.js

@@ -11,5 +11,6 @@ import ColorButton from './components/ColorButton';
 import ColorBox from './components/ColorBox';
 import ColorInput from './components/ColorInput';
 import ColorPalette from './components/ColorPalette';
+import useTranslate from './helpers/useTranslate';
 
-export { ColorPicker, ColorButton, ColorBox, ColorInput, ColorPalette };
+export { ColorPicker, ColorButton, ColorBox, ColorInput, ColorPalette, useTranslate };

stories/ColorPicker.stories.js

@@ -4,7 +4,9 @@
 import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import Button from '@material-ui/core/Button';
-import { ColorPicker } from '../src';
+import { useTheme } from '@material-ui/styles';
+import { ColorPicker, useTranslate } from '../src';
+
 import frFR from '../translations/frFR.json';
 
 const paletteObj = {
@@ -94,21 +96,25 @@ Controlled.story = {
 };
 
 export const Localization = () => {
-  const [language, setLanguage] = useState('us');
+  const [language, setLanguage] = useState('enUS');
+  const theme = useTheme();
+  console.log('theme', theme);
   const handleChange = () => {
-    setLanguage(language === 'us' ? 'fr' : 'us');
-    action('changed')(language);
+    const newLanguage = language === 'enUS' ? 'frFR' : 'enUS';
+    setLanguage(newLanguage);
+    action('changed')(newLanguage);
   };
   const translate = value => {
     let valueTranslated;
-    if (language === 'fr') valueTranslated = frFR[value];
+    if (value && language === 'frFR') valueTranslated = frFR[value];
     return valueTranslated || value;
   };
+  useTranslate(() => ({ i18n: { language }, t: translate }));
   return (
     <div style={style}>
       <ColorPicker defaultValue="red" deferred palette={paletteObj} translate={v => translate(v)} />
       <Button variant="outlined" style={{ marginTop: '100px' }} onClick={handleChange}>
-        {language}
+        {language === 'enUS' ? 'english' : 'français'}
       </Button>
     </div>
   );