Как получить ширину / заполнение компонента, содержащегося в iframe Storybook? - PullRequest
Новая
       11

Как получить ширину / заполнение компонента, содержащегося в iframe Storybook?

0 голосов
/ 11 апреля 2019

Вопрос: Есть ли способ получить свойства width / height / margin из компонента (по классу или id), содержащегося в iframe Storybook, путем получения ссылки на элемент и вызова offsetWidth / style.paddingLeft / style.paddingRight?

Цель: у меня есть некоторые общие компоненты «Layout», которые мы используем в нашем приложении - Row, Column, Container и т. Д. - и я хотел бы иметь возможность динамически отображать в пользовательском интерфейсе Storybook, какой отступ или высота значения - это когда разработчик или дизайнер щелкает, чтобы просмотреть Story, и изменяет некоторые значения реквизита с помощью ручек Storybook.

В качестве примера на основе приведенного ниже кода: Я хотел бы иметь возможность удалить созданный мной жестко закодированный объект PADDING_MAP, который будет отображать различные значения отступов и вместо этого заставлять их изменяться и обновляться, когда пользователь играет с различными значениями проп.

enter image description here

enter image description here

Чтобы попытаться «найти» элемент, я попробовал команды console.log(document.getElementByClassName) и console.log(document.getElementById) в самой истории, чтобы посмотреть, смогу ли я даже получить элемент с помощью className или свойства, но это не сработало.

Так же, как проверка работоспособности, я также попытался запустить $('.classNameHere') в консоли Chrome, чтобы посмотреть, смогу ли я оттуда извлечь элемент, но не смог.

По моему story: 

import React from 'react';

import Row from 'app/shared/core/Row';

// Storybook
import { storiesOf } from '@storybook/react';
import { boolean, select, text } from '@storybook/addon-knobs';

const stories = storiesOf('Layout', module);

stories.add('Row', () => {
    const PADDING_MAP = {
        zero: '0px',
        sm: '4px',
        md: '16px',
        lg: '24px',
        xl: '48px'
    };
    const props = {
        size: select('prop: size', ['sm', 'md', 'lg', 'xl', 'zero'], 'md')
    };

    return (
        <div>
            <div className="Description-Header">Vertical padding: {PADDING_MAP[props.size]}</div>
            <div className="Row-Example-Container">
                <Row {...props} className="Row-Example">
                    <div className="Row-Example-Content">{'Content inside a row'}</div>
                </Row>
            </div>
        </div>
    );
});

При попытках, описанных выше, мне не удалось получить ссылку на элемент для вызова функций свойства элемента.

...