wix-style-react/dist/es/stories/Input/ExampleStandard.js

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import Input from 'wix-style-react/Input';

var style = {
  display: 'inline-block',
  padding: '0 5px',
  width: '200px',
  lineHeight: '22px'
};

var Example = function Example(_ref) {
  var theme = _ref.theme;
  return React.createElement(
    'div',
    null,
    React.createElement(
      'div',
      { style: style },
      'Input',
      React.createElement('br', null),
      React.createElement(Input, { theme: theme })
    ),
    React.createElement(
      'div',
      { style: style },
      'Focus',
      React.createElement(Input, { theme: theme, forceFocus: true })
    ),
    React.createElement(
      'div',
      { style: style },
      'Hover',
      React.createElement(Input, { theme: theme, forceHover: true })
    ),
    React.createElement(
      'div',
      { style: style },
      'With placeholder',
      React.createElement(Input, { theme: theme, placeholder: 'Search...' })
    ),
    React.createElement(
      'div',
      { style: style },
      'Disabled',
      React.createElement('br', null),
      React.createElement(Input, { theme: theme, disabled: true, placeholder: 'disabled' })
    ),
    React.createElement(
      'div',
      { style: style },
      'Disabled with search',
      React.createElement('br', null),
      React.createElement(Input, {
        theme: theme,
        magnifyingGlass: true,
        disabled: true,
        placeholder: 'disabled with search'
      })
    ),
    theme === 'amaterial' && React.createElement(
      'div',
      { style: style },
      React.createElement(Input, { title: 'With Title', placeholder: 'Placeholder...', theme: theme })
    )
  );
};

Example.propTypes = {
  theme: PropTypes.string
};

export default Example;