| 1 |
const { __ } = wp.i18n; |
| 2 |
|
| 3 |
import { |
| 4 |
SortableContainer, |
| 5 |
SortableElement, |
| 6 |
SortableHandle, |
| 7 |
} from "react-sortable-hoc"; |
| 8 |
import ColorControl from "../color-control"; |
| 9 |
|
| 10 |
// Style objects |
| 11 |
const trashStyle = { |
| 12 |
fontSize: 14, |
| 13 |
borderLeft: "1px solid #b4b4cb", |
| 14 |
lineHeight: "2.5em", |
| 15 |
flex: 2, |
| 16 |
textAlign: "center", |
| 17 |
display: "flex", |
| 18 |
justifyContent: "center", |
| 19 |
}; |
| 20 |
|
| 21 |
const TrashIcon = ({ position, onDeleteProfile }) => ( |
| 22 |
<span |
| 23 |
className="eb-social-delete-icon" |
| 24 |
style={trashStyle} |
| 25 |
onClick={() => onDeleteProfile(position)} |
| 26 |
> |
| 27 |
<svg |
| 28 |
xmlns="http://www.w3.org/2000/svg" |
| 29 |
x="0" |
| 30 |
y="0" |
| 31 |
enableBackground="new 0 0 512 512" |
| 32 |
version="1.1" |
| 33 |
viewBox="0 0 512 512" |
| 34 |
xmlSpace="preserve" |
| 35 |
style={{ width: 14 }} |
| 36 |
> |
| 37 |
<path |
| 38 |
d="M423.3 86.6H89c-16.8.1-32.2 9.3-40.1 24.1-7.9 14.8-7.1 32.7 2.2 46.8l37.2 55.6V456c0 30.9 25.1 56 56 56h223.9c30.9 0 56-25.1 56-56V213.1l37.2-56c9.1-14 9.8-31.8 1.9-46.5-8.1-14.7-23.4-23.9-40-24zm-198 347c0 13.9-11.3 25.2-25.2 25.2-13.9 0-25.2-11.3-25.2-25.2V220.9c0-13.9 11.3-25.2 25.2-25.2 13.9 0 25.2 11.3 25.2 25.2v212.7zm112 0c0 13.9-11.3 25.2-25.2 25.2-13.9 0-25.2-11.3-25.2-25.2V220.9c0-13.9 11.3-25.2 25.2-25.2 13.9 0 25.2 11.3 25.2 25.2v212.7zM325.8 19.4C309.9 7.1 290.2 0 269.3 0h-26.4c-20.9 0-40.6 7.1-56.5 19.4-11.2 8.7-20.5 20.1-26.9 33.4h193.1c-6.3-13.3-15.6-24.7-26.8-33.4z" |
| 39 |
style={{ fill: "#FF6464" }} |
| 40 |
></path> |
| 41 |
</svg> |
| 42 |
</span> |
| 43 |
); |
| 44 |
|
| 45 |
const DragHandle = SortableHandle(() => ( |
| 46 |
<span className="drag-handle"> |
| 47 |
<svg |
| 48 |
xmlns="http://www.w3.org/2000/svg" |
| 49 |
x="0" |
| 50 |
y="0" |
| 51 |
enableBackground="new 0 0 512 512" |
| 52 |
version="1.1" |
| 53 |
viewBox="0 0 512 512" |
| 54 |
xmlSpace="preserve" |
| 55 |
style={{ height: 14 }} |
| 56 |
> |
| 57 |
<path |
| 58 |
d="M512 256L402.6 146.6 402.6 210.3 301 210.3 301 109.4 365.4 109.4 256 0 146.6 109.4 211 109.4 211 210.3 109.4 210.3 109.4 146.6 0 256 109.4 365.4 109.4 300.3 211 300.3 211 402.6 146.6 402.6 256 512 365.4 402.6 301 402.6 301 300.3 402.6 300.3 402.6 365.4z" |
| 59 |
style={{ fill: "#a9a9a9" }} |
| 60 |
></path> |
| 61 |
</svg> |
| 62 |
</span> |
| 63 |
)); |
| 64 |
|
| 65 |
const SortableItem = SortableElement( |
| 66 |
({ |
| 67 |
position, |
| 68 |
profile, |
| 69 |
onProfileClick, |
| 70 |
onDeleteProfile, |
| 71 |
onColorChange, |
| 72 |
onBgColorChange, |
| 73 |
// selectedIcon, |
| 74 |
url, |
| 75 |
onUrlChange, |
| 76 |
// onSubmit, |
| 77 |
}) => ( |
| 78 |
<li className="drag-helper"> |
| 79 |
<span className="profile-wrapper"> |
| 80 |
<span |
| 81 |
className="profile-icon-container" |
| 82 |
onClick={() => onProfileClick(profile.icon)} |
| 83 |
> |
| 84 |
<span className={profile.icon} /> |
| 85 |
<span className="selected-profile-icon"> |
| 86 |
{(profile.icon || " ").replace(/^fa[bsr] fa-/i, "")} |
| 87 |
{ |
| 88 |
// (profile.icon || " ").replace(/^fa[\w] fa-/i, "") |
| 89 |
} |
| 90 |
</span> |
| 91 |
</span> |
| 92 |
<DragHandle /> |
| 93 |
<TrashIcon position={position} onDeleteProfile={onDeleteProfile} /> |
| 94 |
</span> |
| 95 |
|
| 96 |
{ |
| 97 |
// selectedIcon === profile.icon && |
| 98 |
profile.isExpanded && ( |
| 99 |
<div className="link-form-wrapper"> |
| 100 |
<ColorControl |
| 101 |
label={__("Icon Color", "betterdocs")} |
| 102 |
color={profile.color} |
| 103 |
onChange={(color) => onColorChange(color, position)} |
| 104 |
/> |
| 105 |
<ColorControl |
| 106 |
label={__("Icon Background", "betterdocs")} |
| 107 |
color={profile.bgColor} |
| 108 |
onChange={(bgColor) => onBgColorChange(bgColor, position)} |
| 109 |
/> |
| 110 |
|
| 111 |
<label className="iconLbl" for={`iconId-${profile.icon}`}> |
| 112 |
URL (use <i>https://</i> at the beginning) |
| 113 |
</label> |
| 114 |
|
| 115 |
<form |
| 116 |
className="input_wrapp" |
| 117 |
onSubmit={(e) => { |
| 118 |
e.preventDefault(); |
| 119 |
// onSubmit(profile.icon); |
| 120 |
}} |
| 121 |
> |
| 122 |
<input |
| 123 |
type="text" |
| 124 |
className="social-link-input" |
| 125 |
id={`iconId-${profile.icon}`} |
| 126 |
// placeholder={`Enter ${profile.icon} link`} |
| 127 |
value={url} |
| 128 |
onChange={(event) => onUrlChange(event)} |
| 129 |
/> |
| 130 |
{/* <button |
| 131 |
className="save-button" |
| 132 |
onClick={() => onSubmit(profile.icon)} |
| 133 |
> |
| 134 |
Save |
| 135 |
</button> */} |
| 136 |
</form> |
| 137 |
</div> |
| 138 |
) |
| 139 |
} |
| 140 |
</li> |
| 141 |
) |
| 142 |
); |
| 143 |
|
| 144 |
const SortableList = SortableContainer((props) => { |
| 145 |
const { profiles, ...rest } = props; |
| 146 |
|
| 147 |
return ( |
| 148 |
<ul> |
| 149 |
{profiles.map((profile, index) => ( |
| 150 |
<SortableItem |
| 151 |
profile={profile} |
| 152 |
key={index} |
| 153 |
{...rest} |
| 154 |
position={index} |
| 155 |
index={index} |
| 156 |
/> |
| 157 |
))} |
| 158 |
</ul> |
| 159 |
); |
| 160 |
}); |
| 161 |
|
| 162 |
const SortableComponent = ({ profiles, onSortEnd, ...rest }) => { |
| 163 |
if (profiles.length === 0) return <ul />; |
| 164 |
|
| 165 |
return ( |
| 166 |
<SortableList |
| 167 |
profiles={profiles} |
| 168 |
useDragHandle={true} |
| 169 |
onSortEnd={onSortEnd} |
| 170 |
{...rest} |
| 171 |
/> |
| 172 |
); |
| 173 |
}; |
| 174 |
|
| 175 |
export default SortableComponent; |
| 176 |
|
