Sid Gifari File Manager Pro v10.0.3

✏️ Editing: color.js Writable

import PropTypes from "prop-types";
import SwatchesControl from "./swatches";
import KadenceColorPicker from "./color-picker";
import Icons from "./icons";
import { __ } from "@wordpress/i18n";
const { Component, Fragment } = wp.element;
const {
	Button,
	Popover,
	Dashicon,
	ColorIndicator,
	Tooltip,
	Icon,
	TabPanel,
	GradientPicker,
	__experimentalGradientPicker,
} = wp.components;
import KadenceGradientPicker from "../gradient-control/index.js";

class ColorControl extends Component {
	constructor(props) {
		super(props);
		this.onChangeState = this.onChangeState.bind(this);
		this.onChangeComplete = this.onChangeComplete.bind(this);
		this.onChangeGradientComplete =
			this.onChangeGradientComplete.bind(this);
		this.state = {
			isVisible: false,
			refresh: false,
			stateColor: this.props.color,
			color: this.props.color,
			isPalette:
				this.props.color &&
				this.props.color.includes("palette") &&
				!this.props.color.includes("gradient")
					? true
					: false,
			palette:
				this.props.presetColors && this.props.presetColors
					? this.props.presetColors
					: [],
			activePalette:
				this.props.presetColors && this.props.presetColors.active
					? this.props.presetColors.active
					: "palette",
			supportGradient:
				undefined === GradientPicker &&
				undefined === __experimentalGradientPicker
					? false
					: true,
			showSyncMessage: true,
		};
	}

render() {
		// Helper function to check if we should show sync message
		const shouldShowSyncMessage = () => {
			return (
				this.props.paletteName === "palette10" &&
				this.props.color === "#FfFfFf" &&
				this.state.showSyncMessage === true
			);
		};

const shouldShowResyncMessage = () => {
			return (
				this.props.paletteName === "palette10" &&
				this.props.color !== "#FfFfFf" &&
				this.state.showSyncMessage === false
			);
		};

const toggleClose = () => {
			if (this.state.isVisible === true) {
				this.setState({ isVisible: false });
			}
		};

const position = this.props.position
			? this.props.position
			: "bottom right";
		const showingGradient =
			this.props.allowGradient && this.state.supportGradient
				? true
				: false;

const syncMessageContent = () => {
			return (
				<div
					className="kadence-sync-message"
					style={{ padding: "16px", textAlign: "center" }}
				>
					<p>
						{__(
							"This color is currently linked as the compliment to your accent color.",
							"kadence"
						)}
					</p>
					<Button
						onClick={() =>
							this.setState({ showSyncMessage: false })
						}
						variant="secondary"
						isSmall
					>
						{__("Unlink Color", "kadence")}
					</Button>
				</div>
			);
		};

onChangeState(color, palette) {
		let newColor;
		if (palette) {
			newColor = palette;
		} else if (
			undefined !== color.rgb &&
			undefined !== color.rgb.a &&
			1 !== color.rgb.a
		) {
			newColor =
				"rgba(" +
				color.rgb.r +
				"," +
				color.rgb.g +
				"," +
				color.rgb.b +
				"," +
				color.rgb.a +
				")";
		} else {
			newColor = color.hex;
		}
		this.setState({ color: newColor, isPalette: palette ? true : false });
		if (undefined !== this.props.onChange) {
			this.props.onChange(color, palette);
		}
	}
	onChangeGradientComplete(gradient) {
		let newColor;
		if (undefined === gradient) {
			newColor = "";
		} else {
			newColor = gradient;
		}
		this.setState({ color: newColor, isPalette: false });
		this.props.onChangeComplete(newColor, "");
	}
	onChangeComplete(color, palette) {
		let newColor;
		if (palette) {
			newColor = palette;
		} else if (
			undefined !== color.rgb &&
			undefined !== color.rgb.a &&
			1 !== color.rgb.a
		) {
			newColor =
				"rgba(" +
				color.rgb.r +
				"," +
				color.rgb.g +
				"," +
				color.rgb.b +
				"," +
				color.rgb.a +
				")";
		} else {
			newColor = color.hex;
		}
		this.setState({ color: newColor, isPalette: palette ? true : false });
		this.props.onChangeComplete(color, palette);
	}
}

ColorControl.propTypes = {
	color: PropTypes.string,
	usePalette: PropTypes.bool,
	palette: PropTypes.string,
	presetColors: PropTypes.array,
	onChangeComplete: PropTypes.func,
	onChange: PropTypes.func,
	customizer: PropTypes.object,
};

export default ColorControl;

✏️ Editing: color.js Writable

const shouldShowResyncMessage = () => {
			return (
				this.props.paletteName === "palette10" &&
				this.props.color !== "#FfFfFf" &&
				this.state.showSyncMessage === false
			);
		};

const toggleClose = () => {
			if (this.state.isVisible === true) {
				this.setState({ isVisible: false });
			}
		};

const position = this.props.position
			? this.props.position
			: "bottom right";
		const showingGradient =
			this.props.allowGradient && this.state.supportGradient
				? true
				: false;

export default ColorControl;

📁 File Manager Pro

📁 File Manager Pro