@wordpress/components
Version:
UI components for WordPress.
201 lines (197 loc) • 7.85 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _native = require("@react-navigation/native");
var _colorPalette = _interopRequireDefault(require("../../color-palette"));
var _colorIndicator = _interopRequireDefault(require("../../color-indicator"));
var _navBar = _interopRequireDefault(require("../bottom-sheet/nav-bar"));
var _segmentedControl = _interopRequireDefault(require("../segmented-control"));
var _utils = require("./utils");
var _body = _interopRequireDefault(require("../../panel/body"));
var _bottomSheetContext = require("../bottom-sheet/bottom-sheet-context");
var _colorControl = _interopRequireDefault(require("../../color-control"));
var _style = _interopRequireDefault(require("./style.scss"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const HIT_SLOP = {
top: 8,
bottom: 8,
left: 8,
right: 8
};
const PaletteScreen = () => {
const route = (0, _native.useRoute)();
const navigation = (0, _native.useNavigation)();
const {
shouldEnableBottomSheetScroll
} = (0, _element.useContext)(_bottomSheetContext.BottomSheetContext);
const {
label,
onColorChange,
onGradientChange,
onColorCleared,
colorValue,
defaultSettings,
hideNavigation = false
} = route.params || {};
const {
segments,
isGradient
} = _utils.colorsUtils;
const [currentValue, setCurrentValue] = (0, _element.useState)(colorValue);
const isGradientColor = isGradient(currentValue);
const selectedSegmentIndex = isGradientColor ? 1 : 0;
const [currentSegment, setCurrentSegment] = (0, _element.useState)(segments[selectedSegmentIndex]);
const isGradientSegment = currentSegment === _utils.colorsUtils.segments[1];
const currentSegmentColors = !isGradientSegment ? defaultSettings.colors : defaultSettings.gradients;
const allAvailableColors = defaultSettings?.allAvailableColors || [];
const allAvailableGradients = currentSegmentColors.flatMap(({
gradients
}) => gradients).filter(Boolean);
const horizontalSeparatorStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.horizontalSeparator, _style.default.horizontalSeparatorDark);
const clearButtonStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.clearButton, _style.default.clearButtonDark);
const selectedColorTextStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.colorText, _style.default.colorTextDark);
const isSolidSegment = currentSegment === segments[0];
const isCustomGadientShown = !isSolidSegment && isGradientColor;
const setColor = color => {
setCurrentValue(color);
if (isSolidSegment && onColorChange && onGradientChange) {
onColorChange(color);
} else if (isSolidSegment && onColorChange) {
onColorChange(color);
} else if (!isSolidSegment && onGradientChange) {
onGradientChange(color);
}
};
function onClear() {
setCurrentValue(undefined);
if (onColorCleared) {
onColorCleared();
}
}
function onCustomPress() {
if (isSolidSegment) {
navigation.navigate(_utils.colorsUtils.screens.picker, {
currentValue,
setColor
});
} else {
navigation.navigate(_utils.colorsUtils.screens.gradientPicker, {
setColor,
isGradientColor,
currentValue
});
}
}
function getClearButton() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
accessibilityLabel: (0, _i18n.__)('Clear selected color'),
onPress: onClear,
hitSlop: HIT_SLOP,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: _style.default.clearButtonContainer,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: clearButtonStyle,
children: (0, _i18n.__)('Reset')
})
})
});
}
function getFooter() {
if (onGradientChange) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_segmentedControl.default, {
segments: segments,
segmentHandler: setCurrentSegment,
selectedIndex: segments.indexOf(currentSegment),
addonLeft: currentValue && /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorIndicator.default, {
color: currentValue,
style: _style.default.colorIndicator
}),
addonRight: currentValue && getClearButton()
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: _style.default.footer,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: _style.default.flex,
children: currentValue && /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorIndicator.default, {
color: currentValue,
style: _style.default.colorIndicator
})
}), currentValue ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: selectedColorTextStyle,
maxFontSizeMultiplier: 2,
selectable: true,
children: currentValue.toUpperCase()
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: _style.default.selectColorText,
maxFontSizeMultiplier: 2,
children: (0, _i18n.__)('Select a color above')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: _style.default.flex,
children: currentValue && getClearButton()
})]
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
children: [!hideNavigation && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_navBar.default, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_navBar.default.BackButton, {
onPress: navigation.goBack
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_navBar.default.Heading, {
children: [label, " "]
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: _style.default.colorPalettes,
children: currentSegmentColors.map((palette, paletteKey) => {
const paletteSettings = {
colors: palette.colors,
gradients: palette.gradients,
allColors: allAvailableColors,
allGradients: allAvailableGradients
};
// Limit to show the custom indicator to the first available palette
const enableCustomColor = paletteKey === 0;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorPalette.default, {
enableCustomColor: enableCustomColor,
label: palette.name,
setColor: setColor,
activeColor: currentValue,
isGradientColor: isGradientColor,
currentSegment: currentSegment,
onCustomPress: onCustomPress,
shouldEnableBottomSheetScroll: shouldEnableBottomSheetScroll,
defaultSettings: paletteSettings
}, paletteKey);
})
}), isCustomGadientShown && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: horizontalSeparatorStyle
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_body.default, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorControl.default, {
label: (0, _i18n.__)('Customize Gradient'),
onPress: onCustomPress,
withColorIndicator: false
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: horizontalSeparatorStyle
}), getFooter()]
});
};
var _default = exports.default = PaletteScreen;
//# sourceMappingURL=palette.screen.native.js.map