@storybook/addon-ondevice-controls
Version:
Display storybook controls on your device.
57 lines (56 loc) • 3.82 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 polished_1 = require("polished");
const PropField_1 = __importDefault(require("./PropField"));
const react_native_1 = require("react-native");
const Container = react_native_theming_1.styled.View(() => ({ paddingTop: 0 }));
const Label = react_native_theming_1.styled.Text(({ theme }) => ({
fontSize: theme.typography.size.s2 - 1,
fontWeight: 'bold',
color: theme.color.defaultText,
}));
const TableHeaderText = react_native_theming_1.styled.Text(({ theme }) => ({
fontWeight: 'bold',
fontSize: theme.typography.size.s2 - 1,
color: theme.base === 'light'
? (0, polished_1.transparentize)(0.25, theme.color.defaultText)
: (0, polished_1.transparentize)(0.45, theme.color.defaultText),
}));
const TableRow = react_native_theming_1.styled.View(({ theme, hasBottomBorder }) => ({
flexDirection: 'row',
columnGap: 10,
paddingVertical: 10,
paddingHorizontal: 20,
borderBottomWidth: hasBottomBorder ? 1 : 0,
borderBottomColor: hasBottomBorder ? theme.appBorderColor : undefined,
}));
const PropForm = ({ args, isPristine, onFieldChange, onReset }) => {
const makeChangeHandler = (name) => {
return (value) => {
onFieldChange({ [name]: value });
};
};
return ((0, jsx_runtime_1.jsxs)(Container, { children: [(0, jsx_runtime_1.jsxs)(TableRow, { hasBottomBorder: true, children: [(0, jsx_runtime_1.jsx)(TableHeaderText, { style: { width: '25%', paddingVertical: 10 }, children: "Name" }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
width: '75%',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
}, children: [(0, jsx_runtime_1.jsx)(TableHeaderText, { children: "Control" }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: onReset, style: {
marginRight: 10,
padding: 10,
}, hitSlop: { top: 10, bottom: 10, left: 10, right: 10 }, children: (0, jsx_runtime_1.jsx)(react_native_1.Image, { source: {
// undo icon
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADUSURBVHgB1ZHdCcJQDIXTm+qzIziCHaUT6AZa/1AEKYoo+NPrBI6gTqIb6Aiij20Se0ELStEWnzwPSSDn40AC8Ks6k6DSHi8OWf32E2LiLSG6WUHLlNZoeQKQ8hfnrmCjN+t75ySRkFxFaovI7nzQPb4zDT8oKcW1MKRDbxo4BlZmoWMzx5Cw2qSFad+7rIYtbYmsw4g2SeITjpsDHxSJrVGobmYF+VXKDSJSVUT2ZrazAH58nCtyHQQaXETnBWyOljULJPU4N+CLAjlGBXT04x1/pDtOIFUpwlNuTQAAAABJRU5ErkJggg==',
width: 14,
height: 14,
} }) })] })] }), Object.values(args).map((arg, i) => {
const changeHandler = makeChangeHandler(arg.name);
return ((0, jsx_runtime_1.jsxs)(TableRow, { hasBottomBorder: i !== Object.values(args).length - 1, children: [(0, jsx_runtime_1.jsx)(Label, { style: { width: '25%' }, children: arg.name }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width: '75%' }, children: (0, jsx_runtime_1.jsx)(PropField_1.default, { arg: arg, isPristine: isPristine, onChange: changeHandler }) })] }, arg.name));
})] }));
};
exports.default = PropForm;