@storybook/addon-ondevice-controls
Version:
Display storybook controls on your device.
60 lines (59 loc) • 3.47 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_native_theming_1 = require("@storybook/react-native-theming");
const react_1 = require("react");
const react_native_1 = require("react-native");
const react_native_modal_datetime_picker_1 = __importDefault(require("react-native-modal-datetime-picker"));
const common_1 = require("./common");
const Touchable = react_native_theming_1.styled.TouchableOpacity(({ theme }) => ({
...(0, common_1.inputStyle)({ theme }),
}));
const Label = react_native_theming_1.styled.Text(({ theme }) => ({
fontSize: theme.typography.size.s1,
color: theme.input.color,
}));
const DateType = ({ onChange, arg: { name, value } }) => {
const [visiblePicker, setVisiblePicker] = (0, react_1.useState)('none');
const theme = (0, react_native_theming_1.useTheme)();
const onDatePicked = (pickedDate) => {
onChange(pickedDate);
setVisiblePicker('none');
};
const date = (0, react_1.useMemo)(() => {
const dateValue = new Date(value);
if (isNaN(dateValue.valueOf())) {
return new Date();
}
return dateValue;
}, [value]);
// https://stackoverflow.com/a/30272803
const dateString = (0, react_1.useMemo)(() => [
`0${date.getDate()}`.slice(-2),
`0${date.getMonth() + 1}`.slice(-2),
date.getFullYear(),
].join('-'), [date]);
const timeString = (0, react_1.useMemo)(() => `${`0${date.getHours()}`.slice(-2)}:${`0${date.getMinutes()}`.slice(-2)}`, [date]);
const webDateString = (0, react_1.useMemo)(() => `${date.getFullYear()}-${`${date.getMonth() + 1}`.padStart(2, '0')}-${`${date.getDate()}`.padStart(2, '0')}T${`${date.getHours()}`.padStart(2, '0')}:${`${date.getMinutes()}`.padStart(2, '0')}`, [date]);
if (react_native_1.Platform.OS === 'web') {
return ((0, jsx_runtime_1.jsx)(react_native_1.View, { testID: name, children: (0, jsx_runtime_1.jsx)("input", { type: "datetime-local", defaultValue: webDateString, onChange: (e) => {
const newDate = new Date(e.target.value);
onChange(newDate);
},
// @ts-ignore
style: (0, common_1.inputStyle)({ theme }) }) }));
}
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { testID: name, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.row, children: [(0, jsx_runtime_1.jsx)(Touchable, { onPress: () => setVisiblePicker('date'), children: (0, jsx_runtime_1.jsx)(Label, { children: dateString }) }), (0, jsx_runtime_1.jsx)(Touchable, { style: styles.timeTouchable, onPress: () => setVisiblePicker('time'), children: (0, jsx_runtime_1.jsx)(Label, { children: timeString }) })] }), (0, jsx_runtime_1.jsx)(react_native_modal_datetime_picker_1.default, { date: date, isVisible: visiblePicker !== 'none', mode: visiblePicker === 'none' ? 'date' : visiblePicker, onConfirm: onDatePicked, onCancel: () => setVisiblePicker('none') })] }));
};
const styles = react_native_1.StyleSheet.create({
timeTouchable: {
marginLeft: 5,
},
row: { flexDirection: 'row' },
});
DateType.serialize = (value) => String(value);
DateType.deserialize = (value) => parseFloat(value);
exports.default = DateType;