GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-09 00:19:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

REFACTOR knobs field to use field component

Browse Source
This commit is contained in:
Norbert de Langen 2018-06-02 00:08:04 +02:00
parent cc68e66c52
commit d2faeb720f
No known key found for this signature in database
GPG Key ID: 976651DA156C2825
1 changed files with 2 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
addons/knobs/src/components/PropField.js
View File

@ -1,32 +1,15 @@
import PropTypes from 'prop-types';
import React from 'react';
import styled from 'react-emotion';
import { Field } from '@storybook/components';
import TypeMap from './types';
const InvalidType = () => <span>Invalid Type</span>;
const Field = styled('div')({
display: 'table-row',
padding: '5px',
});
const Label = styled('label')({
display: 'table-cell',
boxSizing: 'border-box',
verticalAlign: 'top',
paddingRight: 5,
paddingTop: 5,
textAlign: 'right',
width: 80,
fontSize: 12,
fontWeight: 600,
});
export default function PropField({ onChange, onClick, knob }) {
const InputType = TypeMap[knob.type] || InvalidType;
return (
<Field>
<Label htmlFor={knob.name}>{!knob.hideLabel && `${knob.name}`}</Label>
<Field label={!knob.hideLabel && `${knob.name}`}>
<InputType knob={knob} onChange={onChange} onClick={onClick} />
</Field>
);