react-component / color-picker Goto Github PK

https://github.com/react-component/calendar/blob/master/src/Picker.jsx

Hi, i just started using your package but sometimes i got this error:Error: Cannot find module 'react' in ColorPicker.js.

I'm currently using your color-picker in a meteor package that i'm building and i have [email protected] in my peerDependencies. Doest it comes from that or you think it can be something else?

Observed in 1.2.0, but not in 1.1.3.

If you drag the mouse out of the bounds of the colour picker, the hue is reset to red.

Confirmed even on the demo page on both Chrome and Safari:

http://react-component.github.io/color-picker/examples/panel.html

Can there be UMD support, so there is a /dist directory with a prebuilt version? This allows the package to be hosted on cdns, such as https://unpkg.com/. There's something similar done for react-tabs. Thanks!

Css class for alpha label contains ' character, probably typo.
https://github.com/react-component/color-picker/blob/master/src/Params.jsx#L220

I'd like this:

https://github.com/react-component/color-picker/blob/master/src/ColorPicker.jsx#L177-L179

not to happen.

Can we make this optional?

proptypes is deprecated

Hi there,
For the use of my app, I have a window listener for the keypress event, meaning that I need to stop the event propagation when I am filling up an RGBA or HEX color manually, by the inputs. How can I do that ?
Thanks for the lib !
Cheers
Arnaud

When typing or selecting hex code #dddddd or RGB values 221, 221, 221, they are changed to #dedede and 222, 222, 222.

Is there a possibility to add a new property so that in some cases picker is not opened?

I am using this component as a form element, sometimes it needs to be disabled.

In this scenario, if one needs to record changed values, he would want to prevent recording all mouse moves, but just consider the last one, before mouse is released.

Can an event like this exist ?

Hi, Can I please get some help with regards to the ColorPicker plug-in.

So far, I’ve managed to implement the picker successfully and log the output of the selected colour to the console by logging it as “console.log(colors.color).

The problem is that it only logs the colour in HEX, rather than RGB. According to the API, RGB is the default mode, however, this does not appear to be the case.

I’ve even manually added “mode={‘RGB’} in the render of the ColorPicker element, but it still fails to print in RGB.

I'd really appreciate help with this.

Thanks

Why I consider this inactive:

• The last publish to this package was a long time ago
• There are many issues and pull requests that are not active. These are important pull requestsabout dependencies with vulnerabilities.

That's why I created a fork that fixes these things: https://github.com/ChocolateLoverRaj/color-picker.

Hi,
Could we please have a typings .d.ts file created for the color picker, as compilers don't like the repo without it.
Kind thanks.

Hi there,
This is an excellent picker. It is much more performant then the one here - http://react-components.com/component/react-color

I was wondering if I can drop this into my webpage without have to use webpack or browserify? Because those two are bundling a bunch of extra code with it.

My webpage already has React 15.0.1 loaded and I just want to drop your picker in

Thanks for this component! I'd like to disable the functionality that sets the trigger background color without overriding styles using !important. It would be nice to have prop to do that. Thank you!

In 16.x PropTypes and createClass will be moved from React package

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

Warning: Align: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

I think it may be useful to have the color passed into the onClose handler. Currently it just seems to pass {open: false} which is a bit obvious. The onChange handler receives the alpha/color/hsv but I want to hook up my change handler to some ajax calls and onChange fires off too many times.

it would be really cool if all components from 'react-component' would have same namespace. E.g.: rc-colors-picker

just a suggestion

I'm loving rc-color-picker 1.2.6 with Meteor 1.8, thanks!

Using dynamic modules as built-in to Meteor, I notice that importing rc-color-picker requires lots of other modules to be imported to the client, including babel-runtime, core-js, etc. Here's a screenshot of 3 out of the 4 pages of imported modules taken from my production app. None of these are imported if I don't import rc-color-picker on this route of my app:

Are these all really necessary on the client? I'm not really clear on what babel does, but doesn't it transpile the code during the build process, not on the client?

I'm importing it using:

var RCColorPicker = require('rc-color-picker');
import 'rc-color-picker/assets/index.css';

Is this normal?

Is there a way to support Microsoft Edge? Or do you know a lib that supports Microsoft Edge?

When clicking on the closed picker, with a defaultColor set, the onChange callback is called, even before the user even changes the value.
I expect the onChange callback to be called only when the user changes the value.

First, great component!
I was wondering if there's a way to remove the alpha slider for the picker.

Update: Or at least pass a class to the component to remove it by CSS

Thanks

On IE11 I can't properly select a color from a color picker. The panel closes right after first click.
Look at the gif:

It's taken from your example page ( on IE 11 ) http://react-component.github.io/color-picker/examples/simple.html

Using the latest version of React - 0.14 - gives the following error:
Warning: React.findDOMNode is deprecated. Please use ReactDOM.findDOMNode from require('react-dom') instead.

Manually typing in values to the hex, rgb, and alpha fields do not trigger the onChange handler with the right color. Instead, they are triggered with the previous state color

This plugin is awesome. Is there a support for typescript?

Wrong repo

Hi!
I was very surprised when I saw that color picker (version 1.2.6) does not work in Safari 11.0.3
I thought that problem on my side, but the live example also does not work correctly.

STR:

1. Open Safari.
2. Goto example http://react-component.github.io/color-picker/examples/panel.html
3. Try to change color by clicking on rc-color-picker-panel-board-handler
4. Try to open native color picker by clicking on rc-color-picker-panel-preview

Actual result:

Can't change color and can't open native color picker under Safari. In Chrome and Firefox everything is working.

Version: 1.2.2

This can be seen here: http://react-component.github.io/color-picker/examples/simple.html

Changing the alpha using the text input does not work - whatever value you type is immediately replaced by 0.

If you paste a bigger value, such as 2000, it is replaced by 1 (instead of 100).

I think the issue might be in Params.jsx, looks like there is an extra division by 100 in handleAlphaHandler.

1. In mobile terminal, The panel can be slid or clicked, but the ribbon can only be clicked.
   look at the gif:
   
   when I bind the sliding event with "touchmove" and "touchend" in Ribbon.js, the ribbon can be slid.
2. In addition, I used the method of preventing bubbling to prevent the sliding event of the component from affecting the outer layer, which caused the sliding event of the component to be prohibited.
   Perhaps the sliding event should not be bound to the "window", but to the specified dom element?

1.the value of alpha is set to 0
2.and close the panel
3.and open the panel again , then the textbox of alpha display value is 100

I want an option to disable the alpha controls.
Currently the alpha prop fixes the value of alpha. But there is no option to disable / hide the alpha control from the component.

import React, { Component } from 'react';
import 'rc-color-picker/assets/index.css';
import ColorPicker from 'rc-color-picker';

class GradientList extends Component {
    addColor = () => {

    };

    componentDidCatch(...args) {
      console.log(args);
    }

    render() {
      // const { classes } = this.props;props
      // const { pallete } = this.state;
      return (
        <div>
          <div>
            <ColorPicker
              color="#36c"
              alpha={30}
              onClose={this.addColor}
              placement="topLeft"
              className="some-class"
            >
              <span className="rc-color-picker-trigger" />
            </ColorPicker>
          </div>
        </div>
      );
    }
}


export default (GradientList);

Error is following

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of ColorPicker.
in ColorPicker (created by GradientList)
in div (created by GradientList)
in div (created by GradientList)
in GradientList (created by FormControl)
in div (created by FormControl)
in div (created by FormControl)
in section (created by FormControl)
in FormControl (created by Controls)
in Controls (created by WithStyles(Controls))
in WithStyles(Controls) (created by Mediator)
in Mediator (created by App)
in App (created by Route)
in Route (created by Root)
in Switch (created by Root)
in Router (created by BrowserRouter)
in BrowserRouter (created by Root)
in Root
in AppContainer

http://react-component.github.io/react-colors-picker/examples/anim.html

At this example, console.log write out 2 times.

I am trying to modify the following CSS class:
.rc-color-picker-panel-inner { position: relative; border-radius: 4px; box-shadow: 0 1px 5px #ccc; border: 1px solid #ccc; padding-bottom: 8px; }

I am unable to override it or change the CSS file.
What am I missing? Is it possible to modify this class?

Example: put #EEDDAA into the hex field and #EDDCA8 comes out in the on-change event. Seems like your parsing is off by 1 or two.

Example 2: put in #ff0000 and the color is yellow, not red

Captured a gif of the issue from the samples page

I want to set getCalendarContainer for rc-color-pick,
just like configProvider.getPopupContainer for antd, but there is on props for me to handle it.
And I don't see outer porps get into color.jsx, which have no work around methods
help

Let me know if you want a PR opened for this!

hi，当拖动选择颜色时，如果拖到Board外会引发MouseUp丢失，导致window上的listener没有remove，组件Unmount之后再移动鼠标，pointMoveTo方法就会报错：
Uncaught Invariant Violation: findDOMNode was called on an unmounted component.

Windows下比较容易复现，Mac下不容易复现

尝试把事件绑在document上，会好很多但还是会有这个问题，现象是拖动时有卡顿，鼠标变成not-allowed

有什么方法可以解决这个问题吗？谢谢

need onchangecomplete like "react-color". @jdalton

https://stackoverflow.com/questions/11167281/webkit-css-to-control-the-box-around-the-color-in-an-inputtype-color

Hi, thanks for the component 👍

Currently i'm receiving this error with "react": "^16.13.1"

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
• Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: Panel, Params

• 不应包含 visiable 的状态
• 由父级组件控制 visiable

Hello!

I've noticed that onBlur handler only state changes

onBlur() {
    this.setState({
      open: false,
    });
}

without call a trigger onOpen/onClose. So if I pass onClose prop, my onClose will not be called on onBlur. Does it make sense to call setOpen(false) in onBlur?

onBlur() {
    this.setOpen(false);
}

Hi, I want to set the z-index of picker, so I want to set like follwing:

            <ColorsPicker
              color={ '#36c' }
              onChange={ (colos) => console.log(colos) }
             style={{ zIndex: 9999 }}
            />

cause the default z-index is 1000, it will work bad sometimes.