| 1 |
import { merge } from 'lodash'; |
| 2 |
import { debounce } from 'throttle-debounce'; |
| 3 |
|
| 4 |
import apiFetch from '@wordpress/api-fetch'; |
| 5 |
import { ToggleControl } from '@wordpress/components'; |
| 6 |
import { Component } from '@wordpress/element'; |
| 7 |
|
| 8 |
const { GHOSTKIT } = window; |
| 9 |
|
| 10 |
class Icons extends Component { |
| 11 |
constructor(props) { |
| 12 |
super(props); |
| 13 |
|
| 14 |
this.state = { |
| 15 |
settings: GHOSTKIT.settings || {}, |
| 16 |
}; |
| 17 |
|
| 18 |
this.getSetting = this.getSetting.bind(this); |
| 19 |
this.updateSetting = this.updateSetting.bind(this); |
| 20 |
this.updateIconsDebounce = debounce( |
| 21 |
1000, |
| 22 |
this.updateIconsDebounce.bind(this) |
| 23 |
); |
| 24 |
} |
| 25 |
|
| 26 |
getSetting(name, defaultVal) { |
| 27 |
let result = defaultVal; |
| 28 |
|
| 29 |
if (typeof this.state.settings[name] !== 'undefined') { |
| 30 |
result = this.state.settings[name]; |
| 31 |
} |
| 32 |
|
| 33 |
return result; |
| 34 |
} |
| 35 |
|
| 36 |
updateSetting(name, val) { |
| 37 |
this.setState( |
| 38 |
(prevState) => ({ |
| 39 |
settings: merge({}, prevState.settings, { |
| 40 |
[name]: val, |
| 41 |
}), |
| 42 |
}), |
| 43 |
() => { |
| 44 |
this.updateIconsDebounce(); |
| 45 |
} |
| 46 |
); |
| 47 |
} |
| 48 |
|
| 49 |
updateIconsDebounce() { |
| 50 |
apiFetch({ |
| 51 |
path: '/ghostkit/v1/update_settings', |
| 52 |
method: 'POST', |
| 53 |
data: { |
| 54 |
settings: this.state.settings, |
| 55 |
}, |
| 56 |
}).then((result) => { |
| 57 |
if (!result.success || !result.response) { |
| 58 |
// eslint-disable-next-line no-console |
| 59 |
console.log(result); |
| 60 |
} |
| 61 |
}); |
| 62 |
} |
| 63 |
|
| 64 |
render() { |
| 65 |
const { icons } = GHOSTKIT; |
| 66 |
|
| 67 |
return ( |
| 68 |
<div className="ghostkit-settings-content-wrapper ghostkit-settings-icons"> |
| 69 |
{icons && Object.keys(icons).length ? ( |
| 70 |
<> |
| 71 |
{Object.keys(icons).map((k) => ( |
| 72 |
<ToggleControl |
| 73 |
key={k} |
| 74 |
label={icons[k].name} |
| 75 |
checked={this.getSetting( |
| 76 |
`icon_pack_${k}`, |
| 77 |
true |
| 78 |
)} |
| 79 |
onChange={() => { |
| 80 |
this.updateSetting( |
| 81 |
`icon_pack_${k}`, |
| 82 |
!this.getSetting(`icon_pack_${k}`, true) |
| 83 |
); |
| 84 |
}} |
| 85 |
/> |
| 86 |
))} |
| 87 |
</> |
| 88 |
) : null} |
| 89 |
</div> |
| 90 |
); |
| 91 |
} |
| 92 |
} |
| 93 |
|
| 94 |
export default Icons; |
| 95 |
|
