storybook-addon-customize-antd-theme/dist/esm/components/ArgRow.js

a Storybook addon help you visually customize an ant design theme

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React from 'react';
import Markdown from 'markdown-to-jsx';
import { styled } from '@storybook/theming';
import { transparentize } from 'polished';
import ArgControl from './ArgControl';

var codeCommon = function codeCommon(_ref) {
  var theme = _ref.theme;
  return {
    lineHeight: 1,
    margin: '0 2px',
    padding: '3px 5px',
    whiteSpace: 'nowrap',
    borderRadius: 3,
    fontSize: theme.typography.size.s2 - 1,
    border: theme.base === 'light' ? "1px solid ".concat(theme.color.mediumlight) : "1px solid ".concat(theme.color.darker),
    color: theme.base === 'light' ? transparentize(0.1, theme.color.defaultText) : transparentize(0.3, theme.color.defaultText),
    backgroundColor: theme.base === 'light' ? theme.color.lighter : theme.color.border
  };
};

var Name = styled.span({
  fontWeight: 'bold'
});
var Description = styled.div(function (_ref2) {
  var theme = _ref2.theme;
  return {
    '&&': {
      p: {
        margin: '0 0 10px 0'
      },
      a: {
        color: theme.color.secondary
      }
    },
    code: codeCommon({
      theme: theme
    }),
    '& code': {
      margin: 0,
      display: 'inline-block'
    }
  };
});
var Text = styled.span(codeCommon, function (_ref3) {
  var theme = _ref3.theme,
      _ref3$simple = _ref3.simple,
      simple = _ref3$simple === void 0 ? false : _ref3$simple;
  return _objectSpread({
    flex: '0 0 auto',
    fontFamily: theme.typography.fonts.mono,
    fontSize: theme.typography.size.s1,
    wordBreak: 'break-word',
    whiteSpace: 'normal',
    maxWidth: '100%',
    margin: 0,
    marginRight: '4px',
    marginBottom: '4px',
    paddingTop: '2px',
    paddingBottom: '2px',
    lineHeight: '13px'
  }, simple && {
    background: 'transparent',
    border: '0 none',
    paddingLeft: 0
  });
});
var StyledTd = styled.td(function (_ref4) {
  var theme = _ref4.theme,
      expandable = _ref4.expandable;
  return {
    paddingLeft: expandable ? '40px !important' : '20px !important'
  };
});
export default function ArgRow(_ref5) {
  var row = _ref5.row,
      arg = _ref5.arg,
      updateArgs = _ref5.updateArgs,
      expandable = _ref5.expandable;
  var name = row.name,
      desc = row.desc,
      value = row.value,
      type = row.type;
  var hasDescription = desc != null && desc !== '';
  return /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement(StyledTd, {
    expandable: expandable
  }, /*#__PURE__*/React.createElement(Name, null, name)), /*#__PURE__*/React.createElement("td", null, hasDescription && /*#__PURE__*/React.createElement(Description, null, /*#__PURE__*/React.createElement(Markdown, null, desc))), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Text, null, value)), updateArgs ? /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(ArgControl, {
    control: {
      key: name,
      type: type
    },
    arg: arg,
    updateArgs: updateArgs
  })) : null);
}