BorderControl.js
1 year ago
BoxShadowControl.js
1 year ago
ColorSelectorControl.js
1 year ago
FontSizeControl.js
1 year ago
LatepointIcons.js
1 year ago
LetterSpacingControl.js
1 year ago
LineHeightControl.js
1 year ago
PaddingBoxControl.js
1 year ago
TypographyControl.js
1 year ago
BorderControl.js
102 lines
| 1 | import {__} from '@wordpress/i18n'; |
| 2 | import { |
| 3 | SelectControl, |
| 4 | __experimentalUnitControl as UnitControl, |
| 5 | PanelRow, |
| 6 | TabPanel |
| 7 | } from '@wordpress/components'; |
| 8 | |
| 9 | import React from "react"; |
| 10 | import ColorSelectorControl from "./ColorSelectorControl"; |
| 11 | |
| 12 | const BorderControl = ({attributes, setAttributes, borderRadiusAttr}) => { |
| 13 | |
| 14 | return ( |
| 15 | <> |
| 16 | <UnitControl |
| 17 | label={__('Border Radius')} |
| 18 | className="latepoint-control-two-columns" |
| 19 | onChange={(value) => { |
| 20 | setAttributes({[borderRadiusAttr]: value}) |
| 21 | }} |
| 22 | units={[ |
| 23 | {value: 'px', label: 'px', default: 0}, |
| 24 | {value: '%', label: '%', default: 10}, |
| 25 | {value: 'em', label: 'em', default: 0}, |
| 26 | ]} |
| 27 | value={attributes[borderRadiusAttr]} |
| 28 | /> |
| 29 | |
| 30 | <SelectControl |
| 31 | label={__('Style', 'latepoint')} |
| 32 | value={attributes.border_style} |
| 33 | className="latepoint-control-two-columns" |
| 34 | options={[ |
| 35 | {label: __('Default', 'latepoint'), value: 'default'}, |
| 36 | {label: __('None', 'latepoint'), value: 'none'}, |
| 37 | {label: __('Solid', 'latepoint'), value: 'solid'}, |
| 38 | {label: __('Dotted', 'latepoint'), value: 'dotted'}, |
| 39 | {label: __('Dashed', 'latepoint'), value: 'dashed'}, |
| 40 | ]} |
| 41 | onChange={(border_style) => setAttributes({border_style})} |
| 42 | /> |
| 43 | |
| 44 | {attributes.border_style !== 'default' && attributes.border_style !== 'none' && ( |
| 45 | <> |
| 46 | <UnitControl |
| 47 | label={__('Border Width')} |
| 48 | className="latepoint-control-two-columns" |
| 49 | onChange={(value) => { |
| 50 | setAttributes({border_width: value}) |
| 51 | }} |
| 52 | units={[ |
| 53 | {value: 'px', label: 'px', default: 0}, |
| 54 | {value: '%', label: '%', default: 10}, |
| 55 | {value: 'em', label: 'em', default: 0}, |
| 56 | ]} |
| 57 | value={attributes.border_width} |
| 58 | /> |
| 59 | |
| 60 | <TabPanel |
| 61 | className="lb-tabs" |
| 62 | activeClass="active-tab" |
| 63 | tabs={[ |
| 64 | {name: 'tab-normal', title: 'Normal',}, |
| 65 | {name: 'tab-hover', title: 'Hover',}, |
| 66 | ]} |
| 67 | > |
| 68 | {(tab) => { |
| 69 | if (tab.name === 'tab-normal') { |
| 70 | return ( |
| 71 | <> |
| 72 | <ColorSelectorControl |
| 73 | attributes={attributes} |
| 74 | setAttributes={setAttributes} |
| 75 | colorAttribute="border_color" |
| 76 | label={__('Border Color', 'latepoint')} |
| 77 | ></ColorSelectorControl> |
| 78 | </> |
| 79 | ); |
| 80 | } |
| 81 | if (tab.name === 'tab-hover') { |
| 82 | return ( |
| 83 | <> |
| 84 | <ColorSelectorControl |
| 85 | attributes={attributes} |
| 86 | setAttributes={setAttributes} |
| 87 | colorAttribute="border_color_hover" |
| 88 | label={__('Border Color', 'latepoint')} |
| 89 | ></ColorSelectorControl> |
| 90 | </> |
| 91 | ); |
| 92 | } |
| 93 | }} |
| 94 | </TabPanel> |
| 95 | </> |
| 96 | )} |
| 97 | </> |
| 98 | ); |
| 99 | }; |
| 100 | |
| 101 | export default BorderControl; |
| 102 |