search

hxf31891 / react-gradient-color-picker

An easy to use color/gradient picker for React.js
MIT License
126 stars 39 forks source link

Getting error for gradients without an angle in value #67

Closed abkarim closed 7 months ago

abkarim commented 7 months ago

I'm building a WordPress plugin, and these gradients value is generated dynamically by the user or by the theme.

My gradient value is linear-gradient(to bottom, #C2A990 0%, #F9F9F9 100%)", name: "Vertical soft sandstone to white it doesn't have an angle. What can I do in this case ? I getting error for this.

ERROR: Uncaught Error: NaN%, RGBA(207,202,190,1) 0%, rgba(249,249,249,1) 100%): Missing )

It would be great if this package can handle any valid css gradients value. Can you help me with a path to achieve this target ?

My Code 

<ColorPicker
      value={gradient}
      hideColorTypeBtns={true}
      className="bg-white border shadow-md"
      onChange={(data) => update(data)}
  />

All erros 

Uncaught Error: ", name: "Vertical soft sandstone to white: Invalid input not EOF
    error webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/utils/gradientParser.js?:53
    getAST webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/utils/gradientParser.js?:61
    gradientParser webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/utils/gradientParser.js?:368
    getColors webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/utils/formatters.js?:27
    PickerContextWrapper webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/context.js?:46
    React 16
    onClick webpack://xynity-blocks/./src/components/input/Gradient.jsx?:67
    React 23
    <anonymous> webpack://xynity-blocks/./src/index.js?:13
    js http://localhost/wp-content/plugins/xynity-blocks//dashboard/index.js?ver=6.4.1:59
    __webpack_require__ http://localhost/wp-content/plugins/xynity-blocks//dashboard/index.js?ver=6.4.1:273
    <anonymous> http://localhost/wp-content/plugins/xynity-blocks//dashboard/index.js?ver=6.4.1:568
    <anonymous> http://localhost/wp-content/plugins/xynity-blocks//dashboard/index.js?ver=6.4.1:570
[vendors-node_modules_react-best-gradient-color-picker_lib_index_js.index.js line 281 > eval:53:15](http://localhost/wp-content/plugins/xynity-blocks//dashboard/vendors-node_modules_react-best-gradient-color-picker_lib_index_js.index.js%20line%20281%20%3E%20eval)

Uncaught Error: ", name: "Vertical soft sandstone to white: Invalid input not EOF
    error webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/utils/gradientParser.js?:53
    getAST webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/utils/gradientParser.js?:61
    gradientParser webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/utils/gradientParser.js?:368
    getColors webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/utils/formatters.js?:27
    PickerContextWrapper webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/context.js?:46
    React 17
    onClick webpack://xynity-blocks/./src/components/input/Gradient.jsx?:67
    React 23
    <anonymous> webpack://xynity-blocks/./src/index.js?:13
    js http://localhost/wp-content/plugins/xynity-blocks//dashboard/index.js?ver=6.4.1:59
    __webpack_require__ http://localhost/wp-content/plugins/xynity-blocks//dashboard/index.js?ver=6.4.1:273
    <anonymous> http://localhost/wp-content/plugins/xynity-blocks//dashboard/index.js?ver=6.4.1:568
    <anonymous> http://localhost/wp-content/plugins/xynity-blocks//dashboard/index.js?ver=6.4.1:570
[vendors-node_modules_react-best-gradient-color-picker_lib_index_js.index.js line 281 > eval:53:15](http://localhost/wp-content/plugins/xynity-blocks//dashboard/vendors-node_modules_react-best-gradient-color-picker_lib_index_js.index.js%20line%20281%20%3E%20eval)

The above error occurred in the <PickerContextWrapper> component:

PickerContextWrapper@webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/context.js?:34:18
div
ColorPicker@webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/index.js?:40:20
div
div
GradientInput@webpack://xynity-blocks/./src/components/input/Gradient.jsx?:11:23
div
div
div
div
div
section
Colors@webpack://xynity-blocks/./src/settings/Colors.jsx?:106:68
Suspense
figure
div
section
Settings@webpack://xynity-blocks/./src/settings/App.jsx?:112:78
Suspense
div
div
App@webpack://xynity-blocks/./src/App.jsx?:66:74
NotificationContextContainer@webpack://xynity-blocks/./src/context/notification.jsx?:18:38

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Uncaught Error: ", name: "Vertical soft sandstone to white: Invalid input not EOF
    error webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/utils/gradientParser.js?:53
    getAST webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/utils/gradientParser.js?:61
    gradientParser webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/utils/gradientParser.js?:368
    getColors webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/utils/formatters.js?:27
    PickerContextWrapper webpack://xynity-blocks/./node_modules/react-best-gradient-color-picker/lib/context.js?:46
    React 14
    onClick webpack://xynity-blocks/./src/components/input/Gradient.jsx?:67
    React 23
    <anonymous> webpack://xynity-blocks/./src/index.js?:13
    js http://localhost/wp-content/plugins/xynity-blocks//dashboard/index.js?ver=6.4.1:59
    __webpack_require__ http://localhost/wp-content/plugins/xynity-blocks//dashboard/index.js?ver=6.4.1:273
    <anonymous> http://localhost/wp-content/plugins/xynity-blocks//dashboard/index.js?ver=6.4.1:568
    <anonymous> http://localhost/wp-content/plugins/xynity-blocks//dashboard/index.js?ver=6.4.1:570
[vendors-node_modules_react-best-gradient-color-picker_lib_index_js.index.js line 281 > eval:53:15](http://localhost/wp-content/plugins/xynity-blocks//dashboard/vendors-node_modules_react-best-gradient-color-picker_lib_index_js.index.js%20line%20281%20%3E%20eval)
hxf31891 commented 7 months ago

hey @abkarim

I updated the parsing function to except shorthand values for directions (to top, to bottom, to bottom left etc). However, I am not sure what the additional string after your css gradient is i.e. ", name: "Vertical soft sandstone to white: Invalid input not EOF.

From what I can tell, your value is "linear-gradient(to bottom, #C2A990 0%, #F9F9F9 100%)", name: "Vertical soft sandstone to white"... if you remove the string from the end, resulting in "linear-gradient(to bottom, #C2A990 0%, #F9F9F9 100%)" if will work fine.

Hope this helps.