2020-07-11 21:29:08 +02:00
import NOOP from "../../modules/noop"
import WebpackLoader from "../../modules/WebpackLoader"
import Tooltip from "../general/Tooltip"
import Utils from "../../modules/Utils"
const Constants = {
defaultColor : 10070709 ,
baseColors : [
1752220 ,
3066993 ,
3447003 ,
10181046 ,
15277667 ,
15844367 ,
15105570 ,
15158332 ,
9807270 ,
6323595 ,
1146986 ,
2067276 ,
2123412 ,
7419530 ,
11342935 ,
12745742 ,
11027200 ,
10038562 ,
9936031 ,
5533306
]
}
type ColorPickerProps = {
defaultColor? : number ,
customColor? : number ,
baseColors? : number [ ] ,
value? : string ,
disabled? : boolean ,
onChange ? : ( color :number ) = > void
}
let ColorPickerModules
let isFetching = null
2020-07-15 01:50:02 +02:00
/ * *
* This componennt needs to be loaded . As a result , you may experience 100 - 300 ms loading the first time .
* Render will return ` null ` before loaded .
* /
2020-07-11 21:29:08 +02:00
export default class ColorPicker extends React . PureComponent < ColorPickerProps , { value ? : string , lastColor : any } > {
constructor ( props :ColorPickerProps ) {
super ( props )
this . state = {
value : props.value || null ,
lastColor : this.props.value
}
this . onChange = this . onChange . bind ( this )
}
2020-07-15 01:50:02 +02:00
/** Preload the component. */
static preload ( ) {
if ( ColorPicker . prototype . module s [ 0 ] ) return
if ( isFetching ) return
new ColorPicker ( { } ) . render ( )
}
2020-07-11 21:29:08 +02:00
onChange ( val ) {
this . props . onChange ( val )
this . setState ( {
value : val
} )
this . forceUpdate ( )
}
static defaultProps :ColorPickerProps = {
defaultColor : Constants.defaultColor ,
customColor : null ,
baseColors : Constants.baseColors ,
value : null ,
disabled : false ,
onChange : NOOP
}
get module s ( ) {
return ColorPickerModules || ( ColorPickerModules = [
WebpackLoader . find ( e = > e . default && e . default . displayName === "ColorPicker" )
] )
}
renderColorPicker ( ) {
let [
ColorPickerComponent
] = this . module s
if ( ! ColorPickerComponent ) {
2020-07-15 01:50:02 +02:00
if ( isFetching ) { // support for multiple color picker
isFetching . then ( ( ) = > this . forceUpdate ( ) )
return null
}
2020-07-11 21:29:08 +02:00
ColorPickerModules = null
let resolve
isFetching = new Promise ( res = > ( resolve = res ) )
const GuildSettingsRoles = new ( WebpackLoader . find ( e = > e . default && e . default . displayName && e . default . displayName . includes ( "GuildSettingsRoles" ) ) . default ) ( ) . render ( ) . type
const settings = GuildSettingsRoles . prototype . renderRoleSettings . call ( {
props : {
guild : {
roles : [ ] ,
id : null ,
isOwner : ( ) = > false
} ,
currentUser : {
id : null
}
} ,
getSelectedRole ( ) {
return {
id : null
}
}
} )
const GuildRoleSettings = settings . props . children . type
let children = GuildRoleSettings . prototype . renderColorPicker . call ( {
props : {
role : {
id : null ,
color : 0
} ,
locked : false ,
everyone : false
}
} ) . props . children
children . type ( children . props ) . props . children . type . _ctor ( ) . then ( c = > {
this . forceUpdate ( )
resolve ( )
} )
return null
}
return < ColorPickerComponent.default colors = { this . props . baseColors } defaultColor = { this . props . defaultColor } value = { this . state . value }
disabled = { this . props . disabled } onChange = { this . onChange } customColor = { this . props . customColor } >
< / ColorPickerComponent.default >
}
render ( ) {
if ( this . state . lastColor !== this . props . value ) {
this . state = {
value : this.props.value ,
lastColor : this.props.value
}
}
return this . renderColorPicker ( )
}
static get AllPreviews ( ) {
return AllPreviews || ( ( ) = > {
AllPreviews = [ ]
AllPreviews . push ( [
{
disabled : false
} ,
{
disabled : true
}
] , [
{
value : Utils.HexColorToDecimal ( "#7289DA" )
} , {
value : null
}
] , [
{
onChange : ( color ) = > { }
}
] )
return AllPreviews
} ) ( )
}
static help = {
2020-07-15 01:50:02 +02:00
info : "To convert hex colors to decimal, you can do `Lightcord.Api.Utils.HexColorToDecimal('#yourcolor')` and go back with `Lightcord.Api.Utils.DecimalColorToHex(7506394)`" ,
2020-07-17 14:54:49 +02:00
warn : "The component may not appear instantly. The component needs to be loaded, so you could experience 50-300ms loading time depending on your internet connection."
2020-07-11 21:29:08 +02:00
}
}
let AllPreviews