Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Null/undefined color value #128

Open
Nosferatu31 opened this issue Sep 21, 2023 · 10 comments
Open

Null/undefined color value #128

Nosferatu31 opened this issue Sep 21, 2023 · 10 comments

Comments

@Nosferatu31
Copy link
Contributor

Could Swatches support a null color swatch to unset the color?

@Nosferatu31
Copy link
Contributor Author

@jaywcjlove would it be against the library standard to support nullish values for the several packages?
e,g,; Saturation, HueSlider, EditableInputs, Swatches, et cetera.

@jaywcjlove
Copy link
Member

@Nosferatu31 like this?

<Saturation
+    hsva={null}
 />

@Nosferatu31
Copy link
Contributor Author

@Nosferatu31 like this?

<Saturation
+    hsva={null}
 />

Exactly

@Nosferatu31
Copy link
Contributor Author

Thank you for the new <Saturation> upgrade.
Is it planned to do the same for other components? (e,g,; HueSlider, EditableInputs, Swatches, et cetera.)

@jaywcjlove
Copy link
Member

<Hue hue={undefined/null} />

@Nosferatu31 The Hue component supports passing undefined/null values, but the default value is 0. I don’t know what display you need to do after you want to pass a null value.

jaywcjlove added a commit that referenced this issue Sep 22, 2023
@jaywcjlove
Copy link
Member

@Nosferatu31 I adjusted the hue Typescript type to be optional.

@akwasin
Copy link

akwasin commented Nov 8, 2023

I currently have an extra (x) button that sets the color to null. Is it possible to get this type of button inside the the swatches? like an x or something similar? Lets say that the last square in the github or compact style had an x inside it.

jaywcjlove added a commit that referenced this issue Nov 9, 2023
@jaywcjlove
Copy link
Member

@akwasin Upgrade v2.0.1

Add clear button

import React, { useState } from 'react';
import Github from '@uiw/react-color-github';

export default function Demo() {
  const [hex, setHex] = useState("#fff");
  return (
    <>
      <Github
        color={hex}
        style={{
          '--github-background-color': '#d1eff9'
        }}
        onChange={(color) => {
          setHex(color.hex);
        }}
        rectRender={(props) => {
          if (props.key == 15) {
            return <button key={props.key} onClick={() => setHex(null)}>x</button>
          }
        }}
      />
      <div style={{ width: 120, height: 50, backgroundColor: hex }} />
    </>
  );
}

@akwasin
Copy link

akwasin commented Nov 13, 2023

rectRender only exists on Github style? was hoping that this was a universal thing. Im using Compact as well.

@jaywcjlove
Copy link
Member

jaywcjlove commented Nov 13, 2023

@akwasin Upgrade v2.0.2

github-actions bot pushed a commit that referenced this issue Nov 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants