@jetbrains/ring-ui 4.1.5 → 5.0.0-beta.2

package/components/input/input.js

@@ -1,228 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import closeIcon from '@jetbrains/icons/close';
-
-import Theme, {withTheme} from '../global/theme';
-import Button from '../button/button';
-
-import getUID from '../global/get-uid';
-
-import Icon from '../icon/icon';
-
-import styles from './input.css';
-
-function noop() {}
-
-/**
- * @name Input
- */
-
-const Size = {
-  AUTO: 'Auto',
-  S: 'S',
-  M: 'M',
-  L: 'L',
-  FULL: 'FULL'
-};
-
-export class Input extends PureComponent {
-  static propTypes = {
-    value: PropTypes.string,
-    theme: PropTypes.string,
-    className: PropTypes.string,
-    inputClassName: PropTypes.string,
-    size: PropTypes.string,
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    active: PropTypes.bool,
-    error: PropTypes.string,
-    multiline: PropTypes.bool,
-    borderless: PropTypes.bool,
-    compact: PropTypes.bool,
-    onChange: PropTypes.func,
-    onClear: PropTypes.func,
-    inputRef: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.shape({current: PropTypes.instanceOf(HTMLInputElement)})
-    ]),
-    children: PropTypes.string,
-    enableShortcuts: PropTypes.oneOfType([PropTypes.bool, PropTypes.arrayOf(PropTypes.string)]),
-    disabled: PropTypes.bool,
-    id: PropTypes.string,
-    placeholder: PropTypes.string,
-    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-
-    renderUnderline: PropTypes.func
-  };
-
-  static defaultProps = {
-    size: Size.M,
-    onChange: noop,
-    inputRef: noop,
-    enableShortcuts: ['esc'],
-    renderUnderline: (underlineRef, errorText) => (
-      <div
-        className={styles.errorText}
-        ref={underlineRef}
-      >{errorText}</div>
-    )
-  };
-
-  state = {
-    empty: true
-  };
-
-  componentDidMount() {
-    this.adapt();
-  }
-
-  componentDidUpdate() {
-    this.adapt();
-  }
-
-  id = getUID('ring-input-');
-  getId() {
-    return this.props.id || this.id;
-  }
-
-  checkValue() {
-    this.setState({
-      empty: !this.input.value
-    });
-
-    if (this.props.multiline && this.input.scrollHeight > this.input.clientHeight) {
-      this.stretch(this.input);
-    }
-  }
-
-  stretch(el) {
-    if (!el || !el.style) {
-      return;
-    }
-    el.style.height = `${el.scrollHeight}px`;
-  }
-
-  adapt() {
-    this.checkValue();
-    this.stretch(this.underlineNode);
-  }
-
-  underlineRef = el => {
-    this.underlineNode = el;
-  };
-
-  inputRef = el => {
-    const {inputRef} = this.props;
-
-    this.input = el;
-    if (typeof inputRef === 'function') {
-      inputRef(el);
-    } else {
-      inputRef.current = el;
-    }
-  };
-
-  clear = e => {
-    this.props.onClear && this.props.onClear(e);
-  };
-
-  handleChange = e => {
-    this.props.onChange(e);
-    this.checkValue(e.target);
-  };
-
-  render() {
-    const {
-      // Modifiers
-      theme,
-      size,
-      active,
-      multiline,
-      borderless,
-      compact,
-
-      // Props
-      label,
-      error,
-      className,
-      inputClassName,
-      children,
-      value,
-      onClear,
-      disabled,
-      inputRef, onChange,
-      enableShortcuts,
-      id,
-      placeholder,
-      icon,
-      renderUnderline,
-      ...restProps
-    } = this.props;
-    const minimizeMargins = compact || borderless;
-    const {empty} = this.state;
-    const clearable = !!onClear;
-    const classes = classNames(
-      styles.container,
-      className,
-      styles[theme],
-      [styles[`size${size}`]],
-      {
-        'ring-js-shortcuts': enableShortcuts === true,
-        [styles.active]: active,
-        [styles.error]: error != null,
-        [styles.empty]: empty,
-        [styles.noLabel]: !this.props.label,
-        [styles.withIcon]: icon != null,
-        [styles.clearable]: clearable,
-        [styles.compact]: minimizeMargins
-      }
-    );
-
-    const inputClasses = classNames(styles.input, inputClassName);
-
-    const TagName = multiline ? 'textarea' : 'input';
-
-    const text = value != null ? value : children;
-
-    return (
-      <div
-        className={classes}
-        data-test="ring-input"
-      >
-        {icon && <Icon glyph={icon} className={styles.icon}/>}
-        <TagName
-          ref={this.inputRef}
-          onChange={this.handleChange}
-          className={inputClasses}
-          value={text}
-          rows={multiline ? 1 : null}
-          disabled={disabled}
-          id={this.getId()}
-          placeholder={placeholder}
-          aria-label={typeof label === 'string' && label ? label : placeholder}
-          data-enabled-shortcuts={Array.isArray(enableShortcuts) ? enableShortcuts.join(',') : null}
-          {...restProps}
-        />
-        {clearable && !disabled && (
-          <Button
-            title="Clear input"
-            data-test="ring-input-clear"
-            className={styles.clear}
-            icon={closeIcon}
-            onClick={this.clear}
-          />
-        )}
-
-        {!minimizeMargins && <label htmlFor={this.getId()} className={styles.label}>{label}</label>}
-        {!borderless && <div className={styles.underline}/>}
-        {!borderless && <div className={styles.focusUnderline}/>}
-        {!minimizeMargins && <div className={styles.errorUnderline}/>}
-        {!minimizeMargins && renderUnderline(this.underlineRef, error)}
-      </div>
-    );
-  }
-}
-
-export default withTheme()(Input);
-
-export {Size, Theme};

package/components/input/input.test.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import Input from './input';
-
-describe('Input', () => {
-  let input;
-  const inputRef = el => {
-    input = el;
-  };
-  const shallowInput = props => shallow(<Input {...props}/>);
-  const mountInput = props => mount(
-    <Input
-      inputRef={inputRef}
-      {...props}
-    />
-  );
-
-  it('should create component', () => {
-    mountInput().type().should.equal(Input.type);
-  });
-
-  it('should wrap children with div', () => {
-    shallowInput().should.have.tagName('div');
-  });
-
-  it('should create input by default', () => {
-    mountInput();
-    input.should.match('input');
-  });
-
-  it('should create textarea with multiline option', () => {
-    mountInput({multiline: true});
-    input.should.match('textarea');
-  });
-
-  it('should use passed className', () => {
-    mountInput({className: 'test-class'}).should.have.className('test-class');
-  });
-});

package/components/island/adaptive-island-hoc.js

@@ -1,38 +0,0 @@
-import React, {Component, createContext} from 'react';
-
-import {interpolateLinear} from '../global/linear-function';
-
-const TITLE_RESIZE_END = 20;
-const TITLE_RESIZE_THRESHOLD = 36;
-
-export const PhaseContext = createContext();
-export const ScrollHandlerContext = createContext();
-
-export default function adaptiveIslandHOC(ComposedComponent) {
-
-  return class AdaptiveIsland extends Component {
-    static propTypes = ComposedComponent.propTypes;
-
-    state = {
-      phase: 0
-    };
-
-    onContentScroll = ({scrollTop, scrollHeight, clientHeight}) => {
-      if (scrollHeight - clientHeight >=
-        interpolateLinear(TITLE_RESIZE_THRESHOLD, TITLE_RESIZE_END, this.state.phase)) {
-        const phase = Math.min(1, scrollTop / TITLE_RESIZE_END);
-        this.setState({phase});
-      }
-    };
-
-    render() {
-      return (
-        <PhaseContext.Provider value={this.state.phase}>
-          <ScrollHandlerContext.Provider value={this.onContentScroll}>
-            <ComposedComponent {...this.props}/>
-          </ScrollHandlerContext.Provider>
-        </PhaseContext.Provider>
-      );
-    }
-  };
-}

package/components/island/content.js

@@ -1,141 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import createResizeDetector from 'element-resize-detector';
-
-import scheduleRAF from '../global/schedule-raf';
-
-import styles from './island.css';
-import {ScrollHandlerContext} from './adaptive-island-hoc';
-
-const scheduleScrollAction = scheduleRAF();
-const noop = () => {};
-const END_DISTANCE = 16;
-
-class Content extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    scrollableWrapperClassName: PropTypes.string,
-    fade: PropTypes.bool,
-    bottomBorder: PropTypes.bool,
-    onScroll: PropTypes.func,
-    onScrollToBottom: PropTypes.func
-  };
-
-  static defaultProps = {
-    fade: true,
-    bottomBorder: false,
-    onScroll: noop,
-    onScrollToBottom: noop
-  };
-
-  state = {
-    scrolledToTop: true,
-    scrolledToBottom: false
-  };
-
-  componentWillUnmount() {
-    this.scrollableNode = null;
-    if (!this.wrapperNode) {
-      return;
-    }
-    this.resizeDetector.removeAllListeners(this.wrapperNode);
-  }
-
-  resizeDetector = createResizeDetector({strategy: 'scroll'});
-
-  setWrapper = node => {
-    if (!node) {
-      return;
-    }
-    this.wrapperNode = node;
-    this.resizeDetector.listenTo(node, this.calculateScrollPosition);
-  };
-
-  calculateScrollPosition = () => scheduleScrollAction(() => {
-    const {scrollableNode} = this;
-    if (!scrollableNode) {
-      return;
-    }
-    const {scrollTop, scrollHeight, offsetHeight} = scrollableNode;
-    const scrolledToTop = scrollTop === 0;
-    const scrolledToBottom = offsetHeight + scrollTop >= scrollHeight - END_DISTANCE;
-
-    if (scrolledToBottom) {
-      this.props.onScrollToBottom();
-    }
-
-    this.setState({scrolledToTop, scrolledToBottom});
-  });
-
-  onScroll = () => {
-    this.props.onScroll(this.scrollableNode);
-    this.calculateScrollPosition();
-  };
-
-  setScrollableNodeAndCalculatePosition = node => {
-    if (!node) {
-      return;
-    }
-    this.scrollableNode = node;
-    this.calculateScrollPosition();
-  };
-
-  render() {
-    const {
-      children, className, bottomBorder, scrollableWrapperClassName,
-      onScroll, onScrollToBottom, fade, ...restProps
-    } = this.props;
-    const {scrolledToTop, scrolledToBottom} = this.state;
-
-    const classes = classNames(styles.content, className, {
-      [styles.contentWithTopFade]: fade && !scrolledToTop,
-      [styles.contentWithBottomFade]: fade && !scrolledToBottom,
-      [styles.withTransparentBottomBorder]: bottomBorder,
-      [styles.withBottomBorder]: bottomBorder && !scrolledToBottom
-    });
-
-    const scrollableWrapperClasses = classNames(
-      styles.scrollableWrapper,
-      scrollableWrapperClassName
-    );
-
-    return (
-      <div
-        {...restProps}
-        data-test="ring-island-content"
-        className={classes}
-      >
-        <div
-          // it has to be focusable because it can be scrollable
-          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-          tabIndex={0}
-          data-scrollable-container
-          className={scrollableWrapperClasses}
-          ref={this.setScrollableNodeAndCalculatePosition}
-          onScroll={fade ? this.onScroll : noop}
-        >
-          {fade && (
-            <div ref={this.setWrapper}>
-              {children}
-            </div>
-          )}
-
-          {!fade && children}
-        </div>
-      </div>
-    );
-  }
-}
-
-const ContentWrapper = props => (
-  <ScrollHandlerContext.Consumer>
-    {onScroll => {
-      const addProps = onScroll != null ? {onScroll, bottomBorder: true} : {};
-      return <Content {...props} {...addProps}/>;
-    }}
-  </ScrollHandlerContext.Consumer>
-);
-
-export default ContentWrapper;

package/components/island/header.js

@@ -1,102 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import {interpolateLinear} from '../global/linear-function';
-
-import styles from './island.css';
-import {PhaseContext} from './adaptive-island-hoc';
-
-const Start = {
-  FONT_SIZE: 24,
-  LINE_HEIGHT: 28,
-  PADDING: 16
-};
-
-const End = {
-  FONT_SIZE: 13,
-  LINE_HEIGHT: 28,
-
-  // Compensation
-  X: 0.4,
-  Y: 0.1,
-  SPACING: 1.09
-};
-
-const BORDER_APPEAR_PHASE = 0.5;
-
-class Header extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    border: PropTypes.bool,
-    wrapWithTitle: PropTypes.bool,
-    phase: PropTypes.number
-  };
-
-  static defaultProps = {
-    wrapWithTitle: true
-  };
-
-  style(name) {
-    return interpolateLinear(Start[name] || 0, End[name] || 0, this.props.phase);
-  }
-
-  render() {
-    const {children, className, wrapWithTitle, border, phase, ...restProps} = this.props;
-    const classes = classNames(styles.header, className, {
-      [styles.withBottomBorder]: border || phase >= BORDER_APPEAR_PHASE
-    });
-
-
-    const headerStyle = phase != null
-      ? {
-        lineHeight: `${this.style('LINE_HEIGHT')}px`, // need to append px because number is a valid line-height value
-        paddingTop: this.style('PADDING')
-      }
-      : null;
-
-    const scaleFont = phase != null && this.style('FONT_SIZE') / Start.FONT_SIZE;
-
-    const titleStyle = (phase != null && phase < 1)
-      ? {
-        fontSize: Start.FONT_SIZE,
-        transform: `translate(${this.style('X')}px, ${this.style('Y')}px) scale(${scaleFont})`,
-        letterSpacing: this.style('SPACING')
-      }
-      : null;
-
-    return (
-      <div
-        {...restProps}
-        data-test="ring-island-header"
-        className={classes}
-        style={headerStyle}
-      >
-        {wrapWithTitle &&
-        (
-          <h2
-            className={styles.title}
-            style={titleStyle}
-          >
-            {children}
-          </h2>
-        )}
-
-        {!wrapWithTitle && children}
-
-      </div>
-    );
-  }
-}
-
-const HeaderWrapper = props => (
-  <PhaseContext.Consumer>
-    {phase => {
-      const addProps = phase != null ? {phase} : {};
-      return <Header {...props} {...addProps}/>;
-    }}
-  </PhaseContext.Consumer>
-);
-
-export default HeaderWrapper;

package/components/island/island.examples.js

@@ -1,74 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Island, {AdaptiveIsland, Header, Content} from '@jetbrains/ring-ui/components/island/island';
-
-export default {
-  title: 'Components/Island',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Displays an island.',
-    hermione: {captureSelector: '*[data-test~=ring-island]'}
-  }
-};
-
-export const basic = () => (
-  <Island>
-    <Header border>Title</Header>
-    <Content>Content</Content>
-  </Island>
-);
-
-basic.storyName = 'basic';
-
-export const withScroll = () => (
-  <Island className="limited-island" narrow>
-    <Header border>Title</Header>
-    <Content fade>
-      {`Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-      been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
-      galley of type and scrambled it to make a type specimen book. It has survived not only five
-      centuries, but also the leap into electronic typesetting, remaining essentially unchanged.`}
-    </Content>
-  </Island>
-);
-
-withScroll.storyName = 'with scroll';
-
-withScroll.parameters = {
-  storyStyles: `
-<style>
-  .limited-island {
-    height: 200px;
-    width: 200px;
-  }
-</style>
-      `
-};
-
-export const withResizeableHeader = () => (
-  <AdaptiveIsland className="limited-island" narrow>
-    <Header>Title</Header>
-    <Content fade>
-      {`Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-      been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
-      galley of type and scrambled it to make a type specimen book. It has survived not only five
-      centuries, but also the leap into electronic typesetting, remaining essentially unchanged.`}
-    </Content>
-  </AdaptiveIsland>
-);
-
-withResizeableHeader.storyName = 'with resizeable header';
-
-withResizeableHeader.parameters = {
-  storyStyles: `
-<style>
-  .limited-island {
-    height: 200px;
-    width: 200px;
-  }
-</style>
-      `
-};

package/components/island/island.js

@@ -1,53 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import dataTests from '../global/data-tests';
-
-import adaptiveIslandHOC from './adaptive-island-hoc';
-
-import styles from './island.css';
-
-/**
- * @name Island
- */
-
-export default class Island extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    narrow: PropTypes.bool,
-    withoutPaddings: PropTypes.bool,
-    'data-test': PropTypes.string
-  };
-
-  render() {
-    const {
-      children,
-      className,
-      narrow,
-      withoutPaddings,
-      'data-test': dataTest,
-      ...restProps
-    } = this.props;
-    const classes = classNames(styles.island, className, {
-      [styles.narrowIsland]: narrow,
-      [styles.withoutPaddings]: withoutPaddings
-    });
-
-    return (
-      <div
-        {...restProps}
-        className={classes}
-        data-test={dataTests('ring-island', dataTest)}
-      >
-        {children}
-      </div>
-    );
-  }
-}
-
-export const AdaptiveIsland = adaptiveIslandHOC(Island);
-
-export {default as Header} from './header';
-export {default as Content} from './content';