@wordpress/components
Version:
UI components for WordPress.
193 lines (189 loc) • 6.88 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ColorPicker = ColorPicker;
var _reactNative = require("react-native");
var _colord = require("colord");
var _names = _interopRequireDefault(require("colord/plugins/names"));
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _compose = require("@wordpress/compose");
var _icons = require("@wordpress/icons");
var _style = _interopRequireDefault(require("./style.scss"));
var _hsvColorPickerNative = _interopRequireDefault(require("./hsv-color-picker.native.js"));
var _bottomSheet = _interopRequireDefault(require("../mobile/bottom-sheet"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
(0, _colord.extend)([_names.default]);
function ColorPicker({
shouldEnableBottomSheetScroll,
shouldEnableBottomSheetMaxHeight,
isBottomSheetContentScrolling,
setColor,
activeColor,
isGradientColor,
onNavigationBack,
onHandleClosingBottomSheet,
onBottomSheetClosed,
onHandleHardwareButtonPress,
bottomLabelText
}) {
const isIOS = _reactNative.Platform.OS === 'ios';
const hitSlop = {
top: 22,
bottom: 22,
left: 22,
right: 22
};
const {
h: initH,
s: initS,
v: initV
} = !isGradientColor && activeColor ? (0, _colord.colord)(activeColor).toHsv() : {
h: 0,
s: 50,
v: 50
};
const [hue, setHue] = (0, _element.useState)(initH);
const [sat, setSaturation] = (0, _element.useState)(initS / 100);
const [val, setValue] = (0, _element.useState)(initV / 100);
const [savedColor] = (0, _element.useState)(activeColor);
const {
paddingLeft: spacing,
height: pickerHeight,
borderRadius
} = _style.default.picker;
const {
height: pickerPointerSize
} = _style.default.pickerPointer;
const pickerWidth = _bottomSheet.default.getWidth() - 2 * spacing;
const applyButtonStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.applyButton, _style.default.applyButtonDark);
const cancelButtonStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.cancelButton, _style.default.cancelButtonDark);
const colorTextStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.colorText, _style.default.colorTextDark);
const selectColorTextStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.selectColorText, _style.default.selectColorTextDark);
const footerStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.footer, _style.default.footerDark);
const combineToHex = (h = hue, s = sat, v = val) => (0, _colord.colord)({
h,
s: s * 100,
v: v * 100
}).toHex();
const currentColor = combineToHex();
const updateColor = ({
hue: h,
saturation: s,
value: v
}) => {
if (h !== undefined) {
setHue(h);
}
if (s !== undefined) {
setSaturation(s);
}
if (v !== undefined) {
setValue(v);
}
setColor(combineToHex(h, s, v));
};
(0, _element.useEffect)(() => {
shouldEnableBottomSheetMaxHeight(false);
onHandleClosingBottomSheet(() => {
if (savedColor) {
setColor(savedColor);
}
if (onBottomSheetClosed) {
onBottomSheetClosed();
}
});
if (onHandleHardwareButtonPress) {
onHandleHardwareButtonPress(onButtonPress);
}
// TODO: Revisit this to discover if there's a good reason for omitting
// the hook’s dependencies and running it a single time. Ideally there
// may be a way to refactor and obviate the disabled lint rule. If not,
// this comment should be replaced by one that explains the reasoning.
}, []);
function onButtonPress(action) {
onNavigationBack();
onHandleClosingBottomSheet(null);
shouldEnableBottomSheetMaxHeight(true);
setColor(action === 'apply' ? currentColor : savedColor);
if (onBottomSheetClosed) {
onBottomSheetClosed();
}
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_hsvColorPickerNative.default, {
huePickerHue: hue,
currentColor: currentColor,
onHuePickerDragMove: updateColor,
onHuePickerPress: !isBottomSheetContentScrolling && updateColor,
satValPickerHue: hue,
satValPickerSaturation: sat,
satValPickerValue: val,
onSatValPickerDragMove: updateColor,
onSatValPickerPress: !isBottomSheetContentScrolling && updateColor,
onSatValPickerDragStart: () => {
shouldEnableBottomSheetScroll(false);
},
onSatValPickerDragEnd: () => shouldEnableBottomSheetScroll(true),
onHuePickerDragStart: () => shouldEnableBottomSheetScroll(false),
onHuePickerDragEnd: () => shouldEnableBottomSheetScroll(true),
huePickerBarWidth: pickerWidth,
huePickerBarHeight: pickerPointerSize / 2,
satValPickerSize: {
width: pickerWidth,
height: pickerHeight
},
satValPickerSliderSize: pickerPointerSize * 2,
satValPickerBorderRadius: borderRadius,
huePickerBorderRadius: borderRadius
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: footerStyle,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
onPress: () => onButtonPress('cancel'),
hitSlop: hitSlop,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
children: isIOS ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: cancelButtonStyle,
children: (0, _i18n.__)('Cancel')
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
icon: _icons.close,
size: 24,
style: cancelButtonStyle
})
})
}), bottomLabelText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: selectColorTextStyle,
children: bottomLabelText
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: colorTextStyle,
selectable: true,
children: currentColor.toUpperCase()
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
onPress: () => onButtonPress('apply'),
hitSlop: hitSlop,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
children: isIOS ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: applyButtonStyle,
children: (0, _i18n.__)('Apply')
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
icon: _icons.check,
size: 24,
style: applyButtonStyle
})
})
})]
})]
});
}
//# sourceMappingURL=index.native.js.map