@wordpress/components
Version:
UI components for WordPress.
149 lines (148 loc) • 5.02 kB
JavaScript
/**
* External dependencies
*/
import { View, TouchableWithoutFeedback, Text, Platform, Animated, Easing } from 'react-native';
/**
* WordPress dependencies
*/
import { useState, useEffect } from '@wordpress/element';
import { usePreferredColorSchemeStyle } from '@wordpress/compose';
/**
* Internal dependencies
*/
import { performLayoutAnimation } from '../layout-animation';
import styles from './style.scss';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const ANIMATION_DURATION = 200;
const isIOS = Platform.OS === 'ios';
const Segment = ({
isSelected,
title,
onPress,
onLayout,
...props
}) => {
const isSelectedIOS = isIOS && isSelected;
const segmentStyle = [styles.segment, isIOS && styles.segmentIOS];
const textStyle = usePreferredColorSchemeStyle(styles.buttonTextDefault, styles.buttonTextDefaultDark);
const selectedTextStyle = usePreferredColorSchemeStyle(styles.buttonTextSelected, styles.buttonTextSelectedDark);
const shadowStyle = usePreferredColorSchemeStyle(styles.shadowIOS, {});
return /*#__PURE__*/_jsx(View, {
style: isSelectedIOS && shadowStyle,
children: /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
onPress: onPress,
children: /*#__PURE__*/_jsx(View, {
style: segmentStyle,
onLayout: onLayout,
...props,
children: /*#__PURE__*/_jsx(Text, {
style: [textStyle, isSelected && selectedTextStyle],
maxFontSizeMultiplier: 2,
children: title
})
})
})
});
};
const SegmentedControls = ({
segments,
segmentHandler,
selectedIndex,
addonLeft,
addonRight
}) => {
const selectedSegmentIndex = selectedIndex || 0;
const [activeSegmentIndex, setActiveSegmentIndex] = useState(selectedSegmentIndex);
const [segmentsDimensions, setSegmentsDimensions] = useState({
[activeSegmentIndex]: {
width: 0,
height: 0
}
});
const [positionAnimationValue] = useState(new Animated.Value(0));
useEffect(() => {
setActiveSegmentIndex(selectedSegmentIndex);
segmentHandler(segments[selectedSegmentIndex]);
// See https://github.com/WordPress/gutenberg/pull/41166
}, []);
useEffect(() => {
positionAnimationValue.setValue(calculateEndValue(activeSegmentIndex));
// See https://github.com/WordPress/gutenberg/pull/41166
}, [segmentsDimensions]);
const containerStyle = usePreferredColorSchemeStyle(styles.container, styles.containerDark);
function performSwatchAnimation(index) {
Animated.timing(positionAnimationValue, {
toValue: calculateEndValue(index),
duration: ANIMATION_DURATION,
easing: Easing.ease,
useNativeDriver: false
}).start();
}
function calculateEndValue(index) {
const {
paddingLeft: offset
} = isIOS ? styles.containerIOS : styles.container;
const widths = Object.values(segmentsDimensions).map(dimension => dimension.width);
const widthsDistance = widths.slice(0, index);
const widthsDistanceSum = widthsDistance.reduce((sum, n) => sum + n, 0);
const endValue = index === 0 ? 0 : widthsDistanceSum;
return endValue + offset;
}
function onHandlePress(segment, index) {
performLayoutAnimation(ANIMATION_DURATION);
setActiveSegmentIndex(index);
segmentHandler(segment);
performSwatchAnimation(index);
}
function segmentOnLayout(event, index) {
const {
width,
height
} = event.nativeEvent.layout;
setSegmentsDimensions({
...segmentsDimensions,
[index]: {
width,
height
}
});
}
const selectedStyle = usePreferredColorSchemeStyle(styles.selected, styles.selectedDark);
const width = segmentsDimensions[activeSegmentIndex]?.width;
const height = segmentsDimensions[activeSegmentIndex]?.height;
const outlineStyle = [styles.outline, isIOS && styles.outlineIOS];
return /*#__PURE__*/_jsxs(View, {
style: styles.row,
children: [/*#__PURE__*/_jsx(View, {
style: styles.flex,
children: addonLeft
}), /*#__PURE__*/_jsxs(View, {
style: [containerStyle, isIOS && styles.containerIOS],
children: [/*#__PURE__*/_jsx(Animated.View, {
style: [{
width,
left: positionAnimationValue,
height
}, selectedStyle, outlineStyle]
}), segments.map((segment, index) => {
return /*#__PURE__*/_jsx(Segment, {
title: segment,
onPress: () => onHandlePress(segment, index),
isSelected: activeSegmentIndex === index,
onLayout: event => segmentOnLayout(event, index),
accessibilityState: {
selected: activeSegmentIndex === index
},
accessibilityRole: "button",
accessibilityLabel: segment,
accessibilityHint: `${index + 1} on ${segments.length}`
}, index);
})]
}), /*#__PURE__*/_jsx(View, {
style: styles.flex,
children: addonRight
})]
});
};
export default SegmentedControls;
//# sourceMappingURL=index.native.js.map