Diff: STRATO-apps/wordpress_03/app/wp-content/themes/blocksy/static/js/options/options/ct-border.js
Keine Baseline-Datei – Diff nur gegen leer.
1
-
1
+
import {
2
+
createElement,
3
+
Component,
4
+
useState,
5
+
useRef,
6
+
useContext,
7
+
Fragment,
8
+
} from '@wordpress/element'
9
+
import OutsideClickHandler from './react-outside-click-handler'
10
+
import classnames from 'classnames'
11
+
import ColorPicker from './ct-color-picker'
12
+
13
+
import { __ } from 'ct-i18n'
14
+
15
+
const clamp = (min, max, value) => Math.max(min, Math.min(max, value))
16
+
17
+
const Border = ({ value, option, onChange }) => {
18
+
const [isOpen, setIsOpen] = useState(false)
19
+
20
+
return (
21
+
<div className={classnames('ct-option-border')}>
22
+
<div
23
+
className={classnames('ct-value-changer', {
24
+
['active']: isOpen,
25
+
})}>
26
+
{value.style !== 'none' && !value.inherit && (
27
+
<input
28
+
type="number"
29
+
value={value.width}
30
+
// disabled={value.style === 'none'}
31
+
onChange={({ target: { value: width } }) =>
32
+
onChange({
33
+
...value,
34
+
width: clamp(1, 5, parseInt(width, 10) || 1),
35
+
})
36
+
}
37
+
/>
38
+
)}
39
+
40
+
<span
41
+
className="ct-current-value"
42
+
data-style={value.inherit ? 'none' : value.style}
43
+
onClick={() => setIsOpen(!isOpen)}>
44
+
{value.inherit
45
+
? __('Inherit', 'blocksy')
46
+
: value.style === 'none'
47
+
? __('none', 'blocksy')
48
+
: null}
49
+
</span>
50
+
<OutsideClickHandler
51
+
className="ct-units-list"
52
+
disabled={!isOpen}
53
+
onOutsideClick={() => {
54
+
if (!isOpen) return
55
+
setIsOpen(false)
56
+
}}>
57
+
{['solid', 'dashed', 'dotted', 'none'].map((style) => (
58
+
<span
59
+
key={style}
60
+
onClick={() => {
61
+
onChange({
62
+
...value,
63
+
style,
64
+
...(Object.keys(option.value).indexOf(
65
+
'inherit'
66
+
) > -1
67
+
? {
68
+
inherit: false,
69
+
}
70
+
: {}),
71
+
})
72
+
setIsOpen(false)
73
+
}}
74
+
data-style={style}>
75
+
{style === 'none' ? __('None', 'blocksy') : null}
76
+
</span>
77
+
))}
78
+
</OutsideClickHandler>
79
+
</div>
80
+
81
+
{value.style !== 'none' && !value.inherit && (
82
+
<Fragment>
83
+
<ColorPicker
84
+
onChange={(colorValue) =>
85
+
onChange({
86
+
...value,
87
+
color: colorValue.default,
88
+
})
89
+
}
90
+
option={{
91
+
pickers: [
92
+
{
93
+
id: 'default',
94
+
title: __('Initial', 'blocksy'),
95
+
},
96
+
],
97
+
}}
98
+
value={{
99
+
default: value.color,
100
+
}}
101
+
/>
102
+
103
+
{option.secondColor && (
104
+
<ColorPicker
105
+
onChange={(colorValue) =>
106
+
onChange({
107
+
...value,
108
+
secondColor: colorValue.default,
109
+
})
110
+
}
111
+
option={{
112
+
pickers: [
113
+
{
114
+
id: 'default',
115
+
title: __('Hover', 'blocksy'),
116
+
},
117
+
],
118
+
}}
119
+
value={{
120
+
default:
121
+
value.secondColor ||
122
+
option.value.secondColor,
123
+
}}
124
+
/>
125
+
)}
126
+
</Fragment>
127
+
)}
128
+
</div>
129
+
)
130
+
}
131
+
132
+
export default Border
133
+