working on custom tk
This commit is contained in:
paul
265
src/frameworks/customtk/plugins/analogTimepicker.js
Normal file
265
src/frameworks/customtk/plugins/analogTimepicker.js
Normal file
@@ -0,0 +1,265 @@
|
||||
import React from "react"
|
||||
|
||||
import { timePicker } from 'analogue-time-picker'
|
||||
|
||||
import Widget from "../../../canvas/widgets/base"
|
||||
import Tools from "../../../canvas/constants/tools"
|
||||
import { convertObjectToKeyValueString, removeKeyFromObject } from "../../../utils/common"
|
||||
import { TkinterBase } from "../widgets/base"
|
||||
|
||||
import "./styles/timepickerStyle.css"
|
||||
|
||||
|
||||
const Themes = {
|
||||
NAVY_BLUE: "Navy Blue",
|
||||
DRACULA: "Dracula",
|
||||
PURPLE: "Purple",
|
||||
NONE: ""
|
||||
}
|
||||
|
||||
class AnalogTimePicker extends TkinterBase{
|
||||
|
||||
static widgetType = "analog_timepicker"
|
||||
|
||||
static requiredImports = [
|
||||
...TkinterBase.requiredImports,
|
||||
'from tktimepicker import AnalogPicker, AnalogThemes, constants'
|
||||
]
|
||||
|
||||
static requirements = ["tkTimePicker"]
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
this.droppableTags = null
|
||||
|
||||
const newAttrs = removeKeyFromObject("layout", this.state.attrs)
|
||||
|
||||
this.timePicker = null
|
||||
|
||||
this.timePickerRef = React.createRef()
|
||||
|
||||
this.minSize = {width: 100, height: 100}
|
||||
|
||||
this.state = {
|
||||
...this.state,
|
||||
widgetName: "Timepicker",
|
||||
size: { width: 250, height: 350 },
|
||||
attrs: {
|
||||
...newAttrs,
|
||||
styling: {
|
||||
theme:{
|
||||
label: "Theme",
|
||||
tool: Tools.SELECT_DROPDOWN,
|
||||
toolProps: {placeholder: "select theme"},
|
||||
value: "",
|
||||
options: Object.values(Themes).map(val => ({value: val, label: val})),
|
||||
onChange: (value) => this.handleThemeChange(value)
|
||||
},
|
||||
...newAttrs.styling,
|
||||
clockColor: {
|
||||
label: "Clock Color",
|
||||
tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
|
||||
value: "#EEEEEE",
|
||||
onChange: (value) => {
|
||||
this.setAttrValue("styling.clockColor", value)
|
||||
}
|
||||
},
|
||||
displayColor: {
|
||||
label: "Display Color",
|
||||
tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
|
||||
value: "#000",
|
||||
onChange: (value) => {
|
||||
this.setAttrValue("styling.displayColor", value)
|
||||
}
|
||||
},
|
||||
numberColor: {
|
||||
label: "Numbers Color",
|
||||
tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
|
||||
value: "#000",
|
||||
onChange: (value) => {
|
||||
this.setAttrValue("styling.numberColor", value)
|
||||
}
|
||||
},
|
||||
handleColor: {
|
||||
label: "Handle Color",
|
||||
tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
|
||||
value: "#000000",
|
||||
onChange: (value) => {
|
||||
this.setAttrValue("styling.handleColor", value)
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
clockMode:{
|
||||
label: "Clock Mode",
|
||||
tool: Tools.SELECT_DROPDOWN,
|
||||
toolProps: {placeholder: "select mode", defaultValue: 12},
|
||||
value: 12,
|
||||
options: [12, 24].map(val => ({value: val, label: val})),
|
||||
onChange: (value) => {
|
||||
this.setAttrValue("clockMode", value)
|
||||
if (value === 24){
|
||||
// FIXME: the timepicker for 24 hrs also shows 12 hrs time
|
||||
|
||||
this.timePicker.set24h()
|
||||
|
||||
}else{
|
||||
this.timePicker.set12h()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
this.handleThemeChange = this.handleThemeChange.bind(this)
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
super.componentDidMount()
|
||||
this.timePicker = timePicker({
|
||||
element: this.timePickerRef.current,
|
||||
mode: "12",
|
||||
width: this.state.size.width,
|
||||
// height: this.state.size.height
|
||||
})
|
||||
|
||||
// used to remove ok and cancel buttons
|
||||
const timePickerBtns = this.timePickerRef.current.getElementsByClassName("atp-clock-btn")
|
||||
for (let i = 0; i < timePickerBtns.length; i++) {
|
||||
timePickerBtns[i].remove()
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount(){
|
||||
this.timePicker.dispose()
|
||||
}
|
||||
|
||||
setResize(pos, size){
|
||||
super.setResize(pos, size)
|
||||
this.timePicker.setWidth(size.width)
|
||||
}
|
||||
|
||||
handleThemeChange(value){
|
||||
this.setAttrValue("styling.theme", value)
|
||||
|
||||
if (value === Themes.NAVY_BLUE){
|
||||
this.setAttrValue("styling.handleColor", "#009688")
|
||||
this.setAttrValue("styling.displayColor", "#009688")
|
||||
this.setAttrValue("styling.backgroundColor", "#fff")
|
||||
this.setAttrValue("styling.clockColor", "#EEEEEE")
|
||||
this.setAttrValue("styling.numberColor", "#000")
|
||||
}else if (value === Themes.DRACULA){
|
||||
this.setAttrValue("styling.handleColor", "#863434")
|
||||
this.setAttrValue("styling.displayColor", "#404040")
|
||||
this.setAttrValue("styling.backgroundColor", "#404040")
|
||||
this.setAttrValue("styling.clockColor", "#363636")
|
||||
this.setAttrValue("styling.numberColor", "#fff")
|
||||
}else if (value === Themes.PURPLE){
|
||||
this.setAttrValue("styling.handleColor", "#EE333D")
|
||||
this.setAttrValue("styling.displayColor", "#71135C")
|
||||
this.setAttrValue("styling.backgroundColor", "#4E0D3A")
|
||||
this.setAttrValue("styling.clockColor", "#71135C")
|
||||
this.setAttrValue("styling.numberColor", "#fff")
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
generateCode(variableName, parent){
|
||||
|
||||
const theme = this.getAttrValue("styling.theme")
|
||||
|
||||
const mode = this.getAttrValue("clockMode")
|
||||
const bgColor = this.getAttrValue("styling.backgroundColor")
|
||||
const clockColor = this.getAttrValue("styling.clockColor")
|
||||
const displayColor = this.getAttrValue("styling.displayColor")
|
||||
const numColor = this.getAttrValue("styling.numberColor")
|
||||
const handleColor = this.getAttrValue("styling.handleColor")
|
||||
|
||||
const code = [
|
||||
`${variableName} = AnalogPicker(parent=${parent}, type=${mode===12 ? "constants.HOURS12" : "constants.HOURS24"})`,
|
||||
]
|
||||
|
||||
if (theme){
|
||||
|
||||
code.push(`${variableName}_theme = AnalogThemes(${variableName})`)
|
||||
if (theme === Themes.NAVY_BLUE){
|
||||
code.push(`${variableName}_theme.setNavyBlue()`)
|
||||
}else if (theme === Themes.DRACULA){
|
||||
code.push(`${variableName}_theme.setDracula()`)
|
||||
}else if (theme === Themes.PURPLE){
|
||||
code.push(`${variableName}_theme.setPurple()`)
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
const configAnalog = {
|
||||
"canvas_bg": `"${bgColor}"`,
|
||||
"textcolor": `"${numColor}"`,
|
||||
"bg": `"${clockColor}"`,
|
||||
"handcolor": `"${handleColor}"`,
|
||||
"headcolor": `"${handleColor}"`
|
||||
}
|
||||
|
||||
const displayConfig = {
|
||||
bg: `"${displayColor}"`
|
||||
}
|
||||
|
||||
code.push(`${variableName}.configAnalog(${convertObjectToKeyValueString(configAnalog)})`)
|
||||
code.push(`${variableName}.configSpin(${convertObjectToKeyValueString(displayConfig)})`)
|
||||
|
||||
|
||||
// code.push(`configAnalog(canvas_bg="${bgColor}", textcolor="${numColor}",
|
||||
// bg="${clockColor}", handcolor="${handleColor}", headcolor="${handleColor}")`)
|
||||
|
||||
// code.push(`configSpin(bg="${displayColor}"`)
|
||||
}
|
||||
|
||||
return [
|
||||
...code,
|
||||
`${variableName}.${this.getLayoutCode()}`
|
||||
]
|
||||
}
|
||||
|
||||
getToolbarAttrs(){
|
||||
|
||||
const toolBarAttrs = super.getToolbarAttrs()
|
||||
|
||||
|
||||
return ({
|
||||
id: this.__id,
|
||||
widgetName: toolBarAttrs.widgetName,
|
||||
size: toolBarAttrs.size,
|
||||
|
||||
...this.state.attrs,
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
renderContent(){
|
||||
const timePickerStyling = {
|
||||
'--bg': this.getAttrValue("styling.backgroundColor"),
|
||||
'--clock-color': this.getAttrValue("styling.clockColor"),
|
||||
'--number-color': this.getAttrValue("styling.numberColor"),
|
||||
'--time-display': this.getAttrValue("styling.displayColor"),
|
||||
'--main-handle-color': this.getAttrValue("styling.handleColor"),
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md
|
||||
tw-border tw-border-solid tw-border-gray-400 tw-overflow-hidden">
|
||||
<div className="tw-p-2 tw-w-full tw-h-full tw-flex tw-content-start tw-pointer-events-none"
|
||||
style={timePickerStyling}
|
||||
ref={this.timePickerRef}>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
export default AnalogTimePicker
|
||||
Reference in New Issue
Block a user