Merge pull request #2678 from okauppinen/antd-colorpicker

Antd colorpicker
oskariorg · Sep 17, 2024 · 13a37f5 · 13a37f5
2 parents df8261b + defdf8a
commit 13a37f5
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 105 deletions.
diff --git a/bundles/framework/publisher2/view/PanelToolStyles.jsx b/bundles/framework/publisher2/view/PanelToolStyles.jsx
@@ -169,7 +169,7 @@ export const PanelToolStyles = ({ mapTheme, changeTheme, fonts }) => {
                 <StyledColorPicker>
                     <ColorPicker
                         value={buttonBackground}
-                        onChange={(e) => setButtonBackground(e.target.value)}
+                        onChange={setButtonBackground}
                     />
                 </StyledColorPicker>
             </Field>
@@ -178,7 +178,7 @@ export const PanelToolStyles = ({ mapTheme, changeTheme, fonts }) => {
                 <StyledColorPicker>
                     <ColorPicker
                         value={buttonText}
-                        onChange={(e) => setButtonText(e.target.value)}
+                        onChange={setButtonText}
                     />
                 </StyledColorPicker>
             </Field>
@@ -187,7 +187,7 @@ export const PanelToolStyles = ({ mapTheme, changeTheme, fonts }) => {
                 <StyledColorPicker>
                     <ColorPicker
                         value={buttonAccent}
-                        onChange={(e) => setButtonAccent(e.target.value)}
+                        onChange={setButtonAccent}
                     />
                 </StyledColorPicker>
             </Field>
@@ -226,7 +226,7 @@ export const PanelToolStyles = ({ mapTheme, changeTheme, fonts }) => {
                 <StyledColorPicker>
                     <ColorPicker
                         value={popupHeader}
-                        onChange={(e) => setPopupHeader(e.target.value)}
+                        onChange={setPopupHeader}
                     />
                 </StyledColorPicker>
             </Field>
@@ -235,7 +235,7 @@ export const PanelToolStyles = ({ mapTheme, changeTheme, fonts }) => {
                 <StyledColorPicker>
                     <ColorPicker
                         value={popupHeaderText}
-                        onChange={(e) => setPopupHeaderText(e.target.value)}
+                        onChange={setPopupHeaderText}
                     />
                 </StyledColorPicker>
             </Field>

diff --git a/bundles/statistics/statsgrid/components/classification/editclassification/ColorSelect.jsx b/bundles/statistics/statsgrid/components/classification/editclassification/ColorSelect.jsx
@@ -31,8 +31,7 @@ export const ColorSelect = ({
     if (isSimple) {
         return (
             <ColorPicker disabled={disabled} value={value} hideTextInput
-                onChange={evt => handleColorChange(evt.target.value)}
-            />
+                onChange={handleColorChange} />
         );
     }
     // coloret: {name:'Blues', colors:['#deebf7','#9ecae1','#3182bd']}

diff --git a/...les/statistics/statsgrid2016/components/classification/editclassification/ColorSelect.jsx b/...les/statistics/statsgrid2016/components/classification/editclassification/ColorSelect.jsx
@@ -31,7 +31,7 @@ export const ColorSelect = ({
     if (isSimple) {
         return (
             <ColorPicker disabled={disabled} value={value} hideTextInput
-                onChange={evt => handleColorChange(evt.target.value)}
+                onChange={handleColorChange}
             />
         );
     }

diff --git a/src/react/components/ColorPicker.jsx b/src/react/components/ColorPicker.jsx
@@ -1,102 +1,24 @@
-import React, { useState, useRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { Button, Popover, TextInput, Tooltip, Message } from 'oskari-ui'
-import { SvgRadioButton } from './StyleEditor/index';
-import { BgColorsOutlined } from '@ant-design/icons';
-
-// Hide input softly to render color picker to correct place
-const HiddenInput = styled('input')`
-    opacity: 0;
-    width: 0px;
-    height: 0px;
-    padding: 0px;
-    border: none;
-    left: -10px;
-    top: 20px;
-    position: relative;
-`;
-
-const StyledColorPicker = styled('div')`
-    width: 210px;
-    margin-left: 7px;
-    margin-top: 7px;
-`;
-
-const ColorTextInput = styled(TextInput)`
-    width: 90px;
-    height: 34px;
-`;
-const ChooseColor = styled(Button)`
-    width: 70px;
-    height: 34px;
-    &:hover {
-        -webkit-box-shadow:inset 0px 0px 0px 2px white;
-        -moz-box-shadow:inset 0px 0px 0px 2px white;
-        box-shadow:inset 0px 0px 0px 2px white;
-    }
-`;
-
-const MoreColors = styled('div')`
-    display: inline-block;
-`;
-
-// Make array of inline SVG for pre-defined color block
-const getColorOptions = () => Oskari.custom.getColors().map((color) => {
-    return {
-        name: color,
-        data: '<svg viewBox="0 0 32 32" width="32" height="32" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="32" height="32" fill="' + color + '" /></svg>'
-    };
-});
-
-const getContent = (props) => {
-    // Don't add id to hidden input to avoid getting duplicate id with ColorTextInput, modify id if needed
-    const { id, ...inputProps } = props;
-    const colorInput = useRef(null);
-    const onClick = () => {
-        const el = colorInput.current;
-        el.focus(); // Safari might need focus before click
-        el.click();
-    }
-    return (
-        <StyledColorPicker>
-            <SvgRadioButton options={ getColorOptions() } { ...props }/>
-            <MoreColors>
-                <HiddenInput ref={colorInput} type='color' { ...inputProps }/>
-                <Button type="primary" onClick={onClick}>
-                    <Message messageKey='ColorPicker.moreColors' bundleKey='oskariui'/>
-                </Button>
-            </MoreColors>
-        </StyledColorPicker>
-    );
-};
-
-export const ColorPicker = (props) => {
-    const { value = '#FFFFFF', disabled, hideTextInput } = props;
-    const [visible, setVisible] = useState(false);
-    const chooseIconStyle = {
-        fontSize: '20px',
-        color: disabled || Oskari.util.isDarkColor(value) ? '#FFFFFF' :'#000000'
-    };
-    const chooseTooltip = disabled ? '' : <Message messageKey={`ColorPicker.tooltip`} bundleKey='oskariui'/>;
-    const renderTextInput = !hideTextInput && !disabled;
+import { ColorPicker as AntColorPicker  } from 'antd';
+import { Tooltip, Message } from 'oskari-ui'
+
+export const ColorPicker = ({ value = '#FFFFFF', disabled, hideTextInput, onChange }) => {
+    const presets = [{
+        label: null,
+        colors: Oskari.custom.getColors(),
+        defaultOpen: true
+    }];
     return (
-        <React.Fragment>
-            <Popover
-                content={getContent(props)}
-                trigger="click"
-                placement="bottom"
-                open={visible}
-                onOpenChange = {setVisible}
-                >
-            <Tooltip title={chooseTooltip}>
-                <ChooseColor style={{ background: value }} disabled={disabled} >
-                    <BgColorsOutlined style={chooseIconStyle}/>
-                </ChooseColor>
-            </Tooltip>
-            </Popover>
-            { renderTextInput && <ColorTextInput { ...props }/> }
-        </React.Fragment>
+        <Tooltip title={disabled ? '' : <Message messageKey={`ColorPicker.tooltip`} bundleKey='oskariui'/>}>
+            <AntColorPicker
+                presets={presets}
+                showText={!hideTextInput && !disabled && !!value}
+                disabledAlpha
+                disabled={disabled}
+                value={value}
+                onChange={color => onChange(color.toHexString())}/>
+        </Tooltip>
     );
 };