feat: disableApha #23 (#52)

Author: mikbry

src/components/ColorBox/index.jsx

@@ -85,9 +85,9 @@ const StyledBox = styled.div`
   }
 `;
 
-const ColorBox = ({ value, palette, inputFormats, deferred, onChange: _onChange, ...props }) => {
+const ColorBox = ({ value, palette, inputFormats, deferred, onChange: _onChange, disableAlpha, ...props }) => {
   const { t, i18n } = useTranslate();
-  let color = validateColor(value, t, i18n.language);
+  let color = validateColor(value, disableAlpha, t, i18n.language);
   let onChange = _onChange;
   let onDeferredChange;
   if (deferred) {
@@ -138,6 +138,7 @@ const ColorBox = ({ value, palette, inputFormats, deferred, onChange: _onChange,
             key={input}
             value={color}
             format={input}
+            disableAlpha
             className="muicc-colorbox-input"
             onChange={handleInputChange}
           />
@@ -164,22 +165,29 @@ const ColorBox = ({ value, palette, inputFormats, deferred, onChange: _onChange,
             max={360}
             onChange={handleHueChange}
           />
-          <AlphaSlider
-            data-testid="alphaslider"
-            color={cssColor}
-            valueLabelDisplay="auto"
-            aria-label="alpha slider"
-            value={alpha}
-            min={0}
-            max={100}
-            onChange={handleAlphaChange}
-          />
+          {!disableAlpha && (
+            <AlphaSlider
+              data-testid="alphaslider"
+              color={cssColor}
+              valueLabelDisplay="auto"
+              aria-label="alpha slider"
+              value={alpha}
+              min={0}
+              max={100}
+              onChange={handleAlphaChange}
+            />
+          )}
         </div>
         {displayInput(inputFormats)}
         {palette && (
           <>
             <Divider />
-            <ColorPalette size={26.65} palette={palette} onSelect={handlePaletteSelection} />
+            <ColorPalette
+              size={26.65}
+              palette={palette}
+              onSelect={handlePaletteSelection}
+              disableAlpha={disableAlpha}
+            />
           </>
         )}
         {deferred && (
@@ -198,13 +206,18 @@ ColorBox.propTypes = {
   palette: CommonTypes.palette,
   inputFormats: CommonTypes.inputFormats,
   onChange: PropTypes.func.isRequired,
+  /**
+    Don't use alpha
+   */
+  disableAlpha: PropTypes.bool,
 };
 
 ColorBox.defaultProps = {
   value: undefined,
   deferred: false,
   palette: undefined,
   inputFormats: ['hex', 'rgb'],
+  disableAlpha: false,
 };
 
 export default uncontrolled(ColorBox);

src/components/ColorButton.jsx

@@ -49,9 +49,9 @@ 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, ...props }) => {
+const ColorButton = ({ color: c, size, borderWidth, borderColor, forwardRef, tooltip, disableAlpha, ...props }) => {
   const { t, i18n } = useTranslate();
-  const color = ColorTool.validateColor(c, t, i18n.language);
+  const color = ColorTool.validateColor(c, t, disableAlpha, i18n.language);
   const translated = t(tooltip);
   const style = color.css; // || { backgroundColor: ColorTool.getCssColor(color) };
   let l = color.hsl[2] - 10;
@@ -92,6 +92,10 @@ ColorButton.propTypes = {
     The size of the button in pixel
    */
   size: PropTypes.number,
+  /**
+    Don't use alpha
+   */
+  disableAlpha: PropTypes.bool,
   /**
     The width of the button's border, not displayed if borderWidth=0
    */
@@ -116,6 +120,7 @@ ColorButton.defaultProps = {
   borderColor: undefined,
   forwardRef: undefined,
   tooltip: undefined,
+  disableAlpha: false,
 };
 
 export default ColorButton;

src/components/ColorInput.jsx

@@ -35,9 +35,9 @@ const StyledRoot = styled.div`
   }
 `;
 
-const ColorInput = ({ value, format, onChange, forwardRef, ...props }) => {
+const ColorInput = ({ value, format, onChange, disableAlpha, forwardRef, ...props }) => {
   const { t, i18n } = useTranslate();
-  const color = ColorTool.validateColor(value, t, i18n.language);
+  const color = ColorTool.validateColor(value, disableAlpha, t, i18n.language);
   let field;
   let components;
 
@@ -87,7 +87,7 @@ const ColorInput = ({ value, format, onChange, forwardRef, ...props }) => {
   if (format === 'plain') {
     field = buildInput('color-plain', 'Color', color.raw);
   } else {
-    components = ColorTool.getComponents(color, format, t);
+    components = ColorTool.getComponents(color, format, disableAlpha, t);
     const names = Object.keys(components);
     field = (
       <StyledRoot ref={forwardRef}>
@@ -111,6 +111,10 @@ ColorInput.propTypes = {
   value: CommonTypes.color,
   format: PropTypes.string,
   onChange: PropTypes.func.isRequired,
+  /**
+    Don't use alpha
+   */
+  disableAlpha: PropTypes.bool,
   /**
     Internal usage
    */
@@ -121,6 +125,7 @@ ColorInput.defaultProps = {
   value: '',
   format: 'plain',
   forwardRef: undefined,
+  disableAlpha: false,
 };
 
 export default uncontrolled(ColorInput);

src/components/ColorPalette.jsx

@@ -25,7 +25,7 @@ const StyledRoot = styled.div`
   }
 `;
 
-const ColorPalette = ({ size, borderWidth, palette, onSelect }) => {
+const ColorPalette = ({ size, borderWidth, palette, onSelect, disableAlpha }) => {
   const { t } = useTranslate();
   const handleSelectColor = name => {
     const translatedName = t(name);
@@ -42,6 +42,7 @@ const ColorPalette = ({ size, borderWidth, palette, onSelect }) => {
           className="muicc-palette-button"
           borderWidth={borderWidth}
           tooltip={name}
+          disableAlpha={disableAlpha}
           onClick={() => handleSelectColor(name)}
         />
       ))}
@@ -55,13 +56,18 @@ ColorPalette.propTypes = {
   palette: CommonTypes.palette.isRequired,
   forwardRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
   onSelect: PropTypes.func,
+  /**
+    Don't use alpha
+   */
+  disableAlpha: PropTypes.bool,
 };
 
 ColorPalette.defaultProps = {
   borderWidth: 0,
   size: 24,
   forwardRef: undefined,
   onSelect: undefined,
+  disableAlpha: false,
 };
 
 export default ColorPalette;

src/components/ColorPicker.jsx

@@ -54,11 +54,12 @@ const ColorPicker = ({
   onChange,
   onOpen,
   doPopup,
+  disableAlpha,
 }) => {
   const refPicker = React.useRef();
   const [open, setOpen] = React.useState(openAtStart);
   const { t, i18n } = useTranslate();
-  const color = ColorTool.validateColor(value, t, i18n.language);
+  const color = ColorTool.validateColor(value, disableAlpha, t, i18n.language);
   const raw = getColorText(color);
   const handleClick = () => {
     const b = Boolean(refPicker.current);
@@ -89,6 +90,7 @@ const ColorPicker = ({
       deferred={deferred}
       palette={palette}
       inputFormats={inputFormats}
+      disableAlpha={disableAlpha}
       onChange={handleColorChange}
     />
   );
@@ -145,6 +147,10 @@ ColorPicker.propTypes = {
   onOpen: PropTypes.func,
   openAtStart: PropTypes.bool,
   doPopup: PropTypes.func,
+  /**
+    Don't use alpha
+   */
+  disableAlpha: PropTypes.bool,
 };
 
 ColorPicker.defaultProps = {
@@ -156,6 +162,7 @@ ColorPicker.defaultProps = {
   onOpen: undefined,
   openAtStart: false,
   doPopup: undefined,
+  disableAlpha: false,
 };
 
 export default uncontrolled(ColorPicker);

src/helpers/colorTool.js

@@ -296,7 +296,7 @@ const colorsCssConditions = [
   value => value.startsWith('hsl(') || value.startsWith('hsla('),
 ];
 
-const parse = (raw, _format) => {
+const parse = (raw, _format, disableAlpha = false) => {
   const color = { raw };
   let value;
   let alpha;
@@ -363,7 +363,14 @@ const parse = (raw, _format) => {
   color.value = value;
   color.alpha = Number.isNaN(alpha) || alpha === undefined ? 1 : alpha / 255;
   color.format = format;
-  const hex = getCssHexa(value, alpha);
+  let alpha255;
+  if (!disableAlpha && color.alpha !== 1) {
+    alpha255 = Math.floor(color.alpha * 255);
+  } else if (color.alpha === 1 && color.value === -16777216) {
+    // special case to distinguish between black 0x000000FF and transparent 0x000
+    alpha255 = 255;
+  }
+  const hex = getCssHexa(value, alpha255);
   color.hex = hex;
   rgb = rgb || getRgb(value);
   color.rgb = rgb;
@@ -379,18 +386,21 @@ const parse = (raw, _format) => {
   return color;
 };
 
-const getCssColor = (color, format, noAlpha) => {
+const getCssColor = (color, format, disableAlpha) => {
   let value;
   if (format === 'hex') {
-    value = `#${getCssHexa(color.value, noAlpha || color.alpha === 1 ? undefined : Math.floor(color.alpha * 255))}`;
+    value = `#${getCssHexa(
+      color.value,
+      disableAlpha || color.alpha === 1 ? undefined : Math.floor(color.alpha * 255),
+    )}`;
   }
   return value;
 };
 
 let cssColorsTranslated;
 let language;
 
-const validateColor = (_color, translate, translateLanguage) => {
+const validateColor = (_color, disableAlpha, translate, translateLanguage) => {
   let color = _color;
   let isTranslated = false;
   if (!(_color && _color.format && _color.name)) {
@@ -406,7 +416,7 @@ const validateColor = (_color, translate, translateLanguage) => {
       color = cssColorsTranslated[color] || color;
       isTranslated = color !== _color;
     }
-    color = parse(color);
+    color = parse(color, null, disableAlpha);
     if (color.name && translate) {
       color.translated = translate(color.name);
       if (isTranslated && color.translated) {
@@ -420,8 +430,8 @@ const validateColor = (_color, translate, translateLanguage) => {
   return color;
 };
 
-const getComponents = (_color, format, translate = value => value) => {
-  const color = validateColor(_color, translate);
+const getComponents = (_color, format, disableAlpha, translate = value => value) => {
+  const color = validateColor(_color, disableAlpha, translate);
   const components = {};
   if (format === 'rgb') {
     components.r = { value: color.rgb[0], format: 'integer', min: 0, max: 255, name: translate('R') };

stories/ColorPicker.stories.js

@@ -4,7 +4,7 @@
 import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import Button from '@material-ui/core/Button';
-import { useTheme } from '@material-ui/styles';
+// import { useTheme } from '@material-ui/styles';
 import { ColorPicker, useTranslate } from '../src';
 
 import frFR from '../translations/frFR.json';
@@ -37,6 +37,11 @@ Basic.story = {
   parameters: { defaultValue: '#000' },
 };
 
+export const DisableAlpha = () => <ColorPicker defaultValue="#000" disableAlpha />;
+DisableAlpha.story = {
+  parameters: { defaultValue: '#000', disableAlpha: true },
+};
+
 export const Palette = () => (
   <div>
     <ColorPicker defaultValue="transparent" palette={paletteObj} />
@@ -97,8 +102,8 @@ Controlled.story = {
 
 export const Localization = () => {
   const [language, setLanguage] = useState('enUS');
-  const theme = useTheme();
-  console.log('theme', theme);
+  // TODO can't access MUi theme
+  // const theme = useTheme();
   const handleChange = () => {
     const newLanguage = language === 'enUS' ? 'frFR' : 'enUS';
     setLanguage(newLanguage);
@@ -112,7 +117,7 @@ export const Localization = () => {
   useTranslate(() => ({ i18n: { language }, t: translate }));
   return (
     <div style={style}>
-      <ColorPicker defaultValue="red" deferred palette={paletteObj} translate={v => translate(v)} />
+      <ColorPicker defaultValue="#fe0" deferred palette={paletteObj} translate={v => translate(v)} />
       <Button variant="outlined" style={{ marginTop: '100px' }} onClick={handleChange}>
         {language === 'enUS' ? 'english' : 'français'}
       </Button>