Emails
1 month ago
EngagementChart
2 months ago
MediaHub
1 month ago
Onboarding
2 months ago
Popup
2 months ago
Skeletons
1 month ago
WhatsNew
2 months ago
charts
2 months ago
test
2 months ago
AdminMenuSync.js
2 months ago
ChartEmptyState.js
2 months ago
ChooseDate.js
2 months ago
ColorPicker.js
2 months ago
ExtendPlugins.js
2 months ago
Filters.js
2 months ago
Link.js
2 months ago
Navbar.js
1 month ago
NoFound.js
2 months ago
PageHeader.js
2 months ago
PluginRecommendations.js
2 months ago
PostScheduleField.js
2 months ago
PrestoPlayerIcon.js
2 months ago
ProGateOverlay.js
2 months ago
QuickAccess.js
2 months ago
RankedTable.js
2 months ago
StatCard.js
2 months ago
TopMedia.js
2 months ago
TopPerformingMedia.js
2 months ago
TopUsers.js
2 months ago
TruncatedTitle.js
2 months ago
UpgradeNotice.js
2 months ago
UpgradeToPro.js
2 months ago
VideoModal.js
2 months ago
WelcomeBanner.js
2 months ago
ColorPicker.js
84 lines
| 1 | import { useState, useEffect } from 'react'; |
| 2 | import { __ } from '@wordpress/i18n'; |
| 3 | import { SketchPicker } from 'react-color'; |
| 4 | import { Text, Button } from '@bsf/force-ui'; |
| 5 | import { RefreshCcw } from 'lucide-react'; |
| 6 | |
| 7 | function ColorPicker( props ) { |
| 8 | const { name, value, defaultColor, presetColors, hideReset = false } = props; |
| 9 | const [ displayColorPicker, setDisplayColorPicker ] = useState( false ); |
| 10 | const [ color, setColor ] = useState( value ); |
| 11 | |
| 12 | useEffect( () => { |
| 13 | setColor( value ); |
| 14 | }, [ value ] ); |
| 15 | |
| 16 | const handleClick = () => { |
| 17 | setDisplayColorPicker( ( prev ) => ! prev ); |
| 18 | }; |
| 19 | |
| 20 | const handleClose = () => { |
| 21 | setDisplayColorPicker( false ); |
| 22 | }; |
| 23 | |
| 24 | const handleColorChange = ( newColor ) => { |
| 25 | const hexValue = |
| 26 | newColor && newColor.hex ? newColor.hex : newColor; |
| 27 | if ( ! hexValue ) { |
| 28 | return; |
| 29 | } |
| 30 | setColor( hexValue ); |
| 31 | props.onChange( name, hexValue ); |
| 32 | }; |
| 33 | |
| 34 | const handleResetColor = () => { |
| 35 | handleColorChange( defaultColor ); |
| 36 | }; |
| 37 | |
| 38 | const displayColor = color || defaultColor || '#ffffff'; |
| 39 | |
| 40 | return ( |
| 41 | <div className="flex items-center gap-2"> |
| 42 | <div className="relative"> |
| 43 | <button |
| 44 | type="button" |
| 45 | onClick={ handleClick } |
| 46 | className="w-8 h-8 cursor-pointer rounded border border-solid border-border-subtle p-0" |
| 47 | style={ { background: displayColor } } |
| 48 | title={ __( 'Select Color', 'presto-player' ) } |
| 49 | aria-label={ __( 'Select Color', 'presto-player' ) } |
| 50 | /> |
| 51 | { displayColorPicker && ( |
| 52 | <> |
| 53 | <div |
| 54 | className="fixed inset-0 z-40" |
| 55 | onClick={ handleClose } |
| 56 | /> |
| 57 | <div className="absolute left-0 top-full mt-2 z-50"> |
| 58 | <SketchPicker |
| 59 | color={ displayColor } |
| 60 | onChange={ handleColorChange } |
| 61 | presetColors={ presetColors } |
| 62 | disableAlpha |
| 63 | /> |
| 64 | </div> |
| 65 | </> |
| 66 | ) } |
| 67 | </div> |
| 68 | <Text size="sm" className="text-text-primary"> |
| 69 | { color || defaultColor || __( 'Select Color', 'presto-player' ) } |
| 70 | </Text> |
| 71 | { ! hideReset && ( |
| 72 | <Button |
| 73 | variant="ghost" |
| 74 | size="xs" |
| 75 | icon={ <RefreshCcw className="w-3 h-3" /> } |
| 76 | onClick={ handleResetColor } |
| 77 | /> |
| 78 | ) } |
| 79 | </div> |
| 80 | ); |
| 81 | } |
| 82 | |
| 83 | export default ColorPicker; |
| 84 |