@jetbrains/ring-ui 4.1.3 → 5.0.0-beta.0

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';

package/components/island/island.test.js

@@ -1,59 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import Island, {AdaptiveIsland, Content, Header} from './island';
-
-const LINE_HEIGHT = '28px';
-
-describe('Island', () => {
-  const shallowIsland = params => shallow(<Island {...params}/>);
-  const mountIsland = params => mount(<Island {...params}/>);
-
-  it('should create Island component', () => {
-    mountIsland().should.have.type(Island);
-  });
-
-  it('should wrap children with div', () => {
-    shallowIsland().should.have.tagName('div');
-  });
-
-  it('should use passed className', () => {
-    shallowIsland({className: 'test-class'}).should.have.className('test-class');
-  });
-
-  it('should join with passed data-test', () => {
-    shallowIsland({['data-test']: 'foobar'}).should.have.attr('data-test', 'ring-island foobar');
-  });
-
-  describe('AdaptiveIsland', () => {
-    it('should render AdaptiveIsland', () => {
-      mount(<AdaptiveIsland/>).should.have.type(AdaptiveIsland);
-    });
-
-    it('should change header size if content is scrolled', () => {
-      const wrapper = mount(
-        <AdaptiveIsland>
-          <Header/>
-          <Content/>
-        </AdaptiveIsland>
-      );
-
-      const headerNode = wrapper.find('[data-test="ring-island-header"]');
-
-      wrapper.instance().onContentScroll({scrollTop: 10});
-      headerNode.should.have.style('line-height', LINE_HEIGHT);
-    });
-  });
-
-  describe('Header', () => {
-    it('should render header', () => {
-      mount(<Header/>).should.have.type(Header);
-    });
-
-    it('should change header size', () => {
-      const phase = 0.75;
-      const wrapper = shallow(<Header phase={phase}/>);
-      wrapper.should.have.style('line-height', LINE_HEIGHT);
-    });
-  });
-});

package/components/island-legacy/content-legacy.js

@@ -1,26 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import './island-legacy.css';
-
-export default class Content extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node
-  };
-
-  render() {
-    const {children, className, ...restProps} = this.props;
-    const classes = classNames('ring-island__content', className);
-
-    return (
-      <div
-        {...restProps}
-        className={classes}
-      >
-        {children}
-      </div>
-    );
-  }
-}

package/components/island-legacy/header-legacy.js

@@ -1,28 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import './island-legacy.css';
-
-export default class Header extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node
-  };
-
-  render() {
-    const {children, className, ...restProps} = this.props;
-    const classes = classNames('ring-island__header', className);
-
-    return (
-      <div
-        {...restProps}
-        className={classes}
-      >
-        <div className="ring-island__title">
-          {children}
-        </div>
-      </div>
-    );
-  }
-}

package/components/island-legacy/island-legacy.examples.js

@@ -1,33 +0,0 @@
-import '@jetbrains/ring-ui/components/island-legacy/island-legacy.css';
-
-export default {
-  title: 'Style-only/Island',
-
-  parameters: {
-    notes: 'Displays an island.'
-  }
-};
-
-export const basic = () => `
-    <div class="ring-island">
-      <div class="ring-island__header">
-        <span class="ring-island__title">Title</span>
-      </div>
-      <div class="ring-island__content">Content</div>
-    </div>
-    `;
-
-basic.storyName = 'basic';
-
-export const withAHeaderAndButtons = () => `
-    <div class="ring-island">
-      <div class="ring-island__header">
-        <span class="ring-island__title">Title</span>
-        <span class="ring-island__header-button">Button1</span>
-        <span class="ring-island__header-button">Button2</span>
-      </div>
-      <div class="ring-island__content">Content</div>
-    </div>
-  `;
-
-withAHeaderAndButtons.storyName = 'with a header and buttons';

package/components/island-legacy/island-legacy.js

@@ -1,29 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import './island-legacy.css';
-
-export default class Island extends PureComponent {
-  static propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node
-  };
-
-  render() {
-    const {children, className, ...restProps} = this.props;
-    const classes = classNames('ring-island', className);
-
-    return (
-      <div
-        {...restProps}
-        className={classes}
-      >
-        {children}
-      </div>
-    );
-  }
-}
-
-export {default as Header} from './header-legacy';
-export {default as Content} from './content-legacy';

package/components/island-legacy/island-legacy.test.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import Island from './island-legacy';
-
-describe('Island Legacy', () => {
-  const shallowIsland = params => shallow(<Island {...params}/>);
-  const mountIsland = params => mount(<Island {...params}/>);
-
-  it('should create component', () => {
-    mountIsland().should.have.type(Island);
-  });
-
-  it('should wrap children with div', () => {
-    shallowIsland().should.have.tagName('div');
-  });
-
-  it('should use passed className', () => {
-    shallowIsland({className: 'test-class'}).should.have.className('test-class');
-  });
-});

package/components/link/clickableLink.js

@@ -1,48 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-
-const LEFT_BUTTON = 0;
-// Cmd/Ctrl/Shift/Alt + Click should trigger default browser behaviour. Same applies to non-left clicks
-const isPlainLeftClick = e =>
-  e.button === LEFT_BUTTON && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
-
-export default class ClickableLink extends PureComponent {
-  static propTypes = {
-    onClick: PropTypes.func,
-    onPlainLeftClick: PropTypes.func,
-    onConditionalClick: PropTypes.func,
-    activeClassName: PropTypes.string,
-    href: PropTypes.string.isRequired,
-    children: PropTypes.node.isRequired
-  };
-
-  onClick = e => {
-    const {onClick, onConditionalClick, onPlainLeftClick} = this.props;
-
-    const isPlainLeft = isPlainLeftClick(e);
-
-    if (onClick) {
-      onClick(e);
-    }
-
-    if (onConditionalClick) {
-      onConditionalClick(isPlainLeft, e);
-    }
-
-    if (onPlainLeftClick && isPlainLeft) {
-      e.preventDefault();
-      onPlainLeftClick(e);
-    }
-  };
-
-  render() {
-    const {
-      onConditionalClick, onPlainLeftClick, activeClassName,
-      href,
-      children,
-      ...restProps
-    } = this.props;
-
-    return <a href={href} {...restProps} onClick={this.onClick}>{children}</a>;
-  }
-}