@wordpress/components
Version:
UI components for WordPress.
236 lines (232 loc) • 7.53 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 _cell = _interopRequireDefault(require("../cell"));
var _stepper = _interopRequireDefault(require("./stepper"));
var _style = _interopRequireDefault(require("./style.scss"));
var _rangeTextInput = _interopRequireDefault(require("../range-text-input"));
var _utils = require("../../utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const STEP_DELAY = 200;
const DEFAULT_STEP = 1;
const isIOS = _reactNative.Platform.OS === 'ios';
class BottomSheetStepperCell extends _element.Component {
constructor(props) {
super(props);
this.announceValue = this.announceValue.bind(this);
this.onDecrementValue = this.onDecrementValue.bind(this);
this.onDecrementValuePressIn = this.onDecrementValuePressIn.bind(this);
this.onIncrementValue = this.onIncrementValue.bind(this);
this.onIncrementValuePressIn = this.onIncrementValuePressIn.bind(this);
this.onPressOut = this.onPressOut.bind(this);
const {
value,
defaultValue,
min
} = props;
const initialValue = value || defaultValue || min;
this.state = {
inputValue: initialValue,
stepperValue: initialValue
};
}
componentWillUnmount() {
clearTimeout(this.timeout);
clearInterval(this.interval);
clearTimeout(this.timeoutAnnounceValue);
}
onIncrementValue() {
const {
step,
max,
onChange,
value,
decimalNum
} = this.props;
let newValue = (0, _utils.toFixed)(value + step, decimalNum);
newValue = parseInt(newValue) === newValue ? parseInt(newValue) : newValue;
if (newValue <= max || max === undefined) {
onChange(newValue);
this.setState({
inputValue: newValue
});
this.announceValue(newValue);
}
}
onDecrementValue() {
const {
step,
min,
onChange,
value,
decimalNum
} = this.props;
let newValue = (0, _utils.toFixed)(value - step, decimalNum);
newValue = parseInt(newValue) === newValue ? parseInt(newValue) : newValue;
if (newValue >= min) {
onChange(newValue);
this.setState({
inputValue: newValue
});
this.announceValue(newValue);
}
}
onIncrementValuePressIn() {
this.onIncrementValue();
this.timeout = setTimeout(() => {
this.startPressInterval(this.onIncrementValue);
}, 500);
}
onDecrementValuePressIn() {
this.onDecrementValue();
this.timeout = setTimeout(() => {
this.startPressInterval(this.onDecrementValue);
}, 500);
}
onPressOut() {
clearTimeout(this.timeout);
clearInterval(this.interval);
}
startPressInterval(callback, speed = STEP_DELAY) {
let counter = 0;
this.interval = setInterval(() => {
callback();
counter += 1;
if (counter === 10) {
clearInterval(this.interval);
this.startPressInterval(callback, speed / 2);
}
}, speed);
}
announceValue(value) {
const {
label,
unitLabel = ''
} = this.props;
if (isIOS) {
// On Android it triggers the accessibilityLabel with the value change
clearTimeout(this.timeoutAnnounceValue);
this.timeoutAnnounceValue = setTimeout(() => {
_reactNative.AccessibilityInfo.announceForAccessibility(`${value} ${unitLabel} ${label}`);
}, 300);
}
}
render() {
const {
label,
settingLabel = 'Value',
unitLabel = '',
icon,
min,
max,
value,
separatorType,
children,
shouldDisplayTextInput = false,
preview,
onChange,
openUnitPicker,
decimalNum,
cellContainerStyle,
disabled
} = this.props;
const {
inputValue
} = this.state;
const isMinValue = value === min;
const isMaxValue = value === max;
const labelStyle = [_style.default.cellLabel, !icon ? _style.default.cellLabelNoIcon : {}];
const getAccessibilityHint = () => {
return openUnitPicker ? (0, _i18n.__)('double-tap to change unit') : '';
};
const accessibilityLabel = (0, _i18n.sprintf)(/* translators: accessibility text. Inform about current value. 1: Control label. 2: setting label (example: width). 3: Current value. 4: value measurement unit (example: pixels) */
(0, _i18n.__)('%1$s. %2$s is %3$s %4$s.'), label, settingLabel, value, unitLabel);
const containerStyle = [_style.default.rowContainer, isIOS ? _style.default.containerIOS : _style.default.containerAndroid];
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
accessible: true,
accessibilityRole: "adjustable",
accessibilityLabel: accessibilityLabel,
accessibilityHint: getAccessibilityHint(),
accessibilityActions: [{
name: 'increment'
}, {
name: 'decrement'
}, {
name: 'activate'
}],
onAccessibilityAction: event => {
switch (event.nativeEvent.actionName) {
case 'increment':
this.onIncrementValue();
break;
case 'decrement':
this.onDecrementValue();
break;
case 'activate':
if (openUnitPicker) {
openUnitPicker();
}
break;
}
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
importantForAccessibility: "no-hide-descendants",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cell.default, {
accessible: false,
cellContainerStyle: [_style.default.cellContainerStyle, preview && _style.default.columnContainer, cellContainerStyle],
cellRowContainerStyle: preview ? containerStyle : _style.default.cellRowStyles,
editable: false,
icon: icon,
label: label,
labelStyle: labelStyle,
leftAlign: true,
separatorType: separatorType,
disabled: disabled,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: preview && containerStyle,
children: [preview, /*#__PURE__*/(0, _jsxRuntime.jsx)(_stepper.default, {
isMaxValue: isMaxValue,
isMinValue: isMinValue,
onPressInDecrement: this.onDecrementValuePressIn,
onPressInIncrement: this.onIncrementValuePressIn,
onPressOut: this.onPressOut,
value: value,
shouldDisplayTextInput: shouldDisplayTextInput,
children: shouldDisplayTextInput && /*#__PURE__*/(0, _jsxRuntime.jsx)(_rangeTextInput.default, {
label: label,
onChange: onChange,
defaultValue: `${inputValue}`,
value: value,
min: min,
step: 1,
decimalNum: decimalNum,
children: children
})
})]
})
})
})
});
}
}
BottomSheetStepperCell.defaultProps = {
step: DEFAULT_STEP
};
var _default = exports.default = (0, _compose.withPreferredColorScheme)(BottomSheetStepperCell);
//# sourceMappingURL=index.native.js.map