Merge pull request #105 from VKCOM/2.8.0

v2.8.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "2.7.1",
+  "version": "2.8.0",
   "main": "dist/vkui.js",
   "license": "MIT",
   "description": "VKUI library",
@@ -30,29 +30,30 @@
     "postcss-import": "^9.1.0",
     "postcss-loader": "^2.1.5",
     "pre-commit": "^1.2.2",
+    "prop-types": "^15.6.1",
+    "react": "^16.4.0",
     "react-docgen": "^2.20.0",
+    "react-dom": "^16.4.0",
     "react-frame-component": "^3.0.0",
     "react-styleguidist": "^7.0.17",
     "schema-utils": "^0.4.3",
     "style-loader": "^0.13.2",
     "stylelint": "^9.3.0",
     "stylelint-config-standard": "^16.0.0",
+    "url-loader": "^1.1.1",
     "webpack": "^4.12.0",
     "webpack-bundle-analyzer": "^2.9.2",
     "webpack-cli": "^3.0.3",
     "webpack-merge": "^4.0.0",
-    "webpack-stats-plugin": "^0.1.4",
-    "react-dom": "^16.4.0",
-    "react": "^16.4.0",
-    "prop-types": "^15.6.1"
+    "webpack-stats-plugin": "^0.1.4"
   },
   "peerDependencies": {
     "react-dom": "^16.4.0",
     "react": "^16.4.0",
     "prop-types": "^15.6.1"
   },
   "dependencies": {
-    "@vkontakte/icons": "^1.1.1"
+    "@vkontakte/icons": "^1.2.0"
   },
   "scripts": {
     "prepublishOnly": "npm run clear && npm run build",

src/components/Avatar/Avatar.js

@@ -6,7 +6,7 @@ import './Avatar.css';
 
 const baseClassName = getClassName('Avatar');
 
-const Avatar = ({ src, size, type, style, className, children, ...restProps }) => {
+const Avatar = ({ src, size, type, style, className, children, getRootRef, ...restProps }) => {
   const Component = src ? 'img' : 'div';
   let borderRadius;
 
@@ -23,7 +23,7 @@ const Avatar = ({ src, size, type, style, className, children, ...restProps }) =
   }
 
   return (
-    <div className={classnames(baseClassName, className, { [`Avatar--type-${type}`]: true })}>
+    <div className={classnames(baseClassName, className, { [`Avatar--type-${type}`]: true })} ref={getRootRef}>
       <div className="Avatar__in">
         <Component
           {...restProps}
@@ -43,7 +43,8 @@ Avatar.propTypes = {
   style: PropTypes.object,
   className: PropTypes.string,
   type: PropTypes.oneOf(['default', 'image', 'app']),
-  children: PropTypes.node
+  children: PropTypes.node,
+  getRootRef: PropTypes.func
 };
 
 Avatar.defaultProps = {

src/components/Cell/Cell.js

@@ -22,6 +22,7 @@ export default class Cell extends Component {
     onClick: PropTypes.func,
     multiline: PropTypes.bool,
     description: PropTypes.node,
+    getRootRef: PropTypes.func,
     /**
      * Контейнер для произвольного содержимого под `description`. Рисуется только если передать `size="l"`.
      */
@@ -111,7 +112,10 @@ export default class Cell extends Component {
 
   getRemoveRef = el => this.removeButton = el;
 
-  getRootRef = el => this.rootEl = el;
+  getRootRef = el => {
+    this.rootEl = el;
+    this.props.getRootRef && this.props.getRootRef(el);
+  };
 
   render () {
     const {
@@ -121,6 +125,7 @@ export default class Cell extends Component {
       expandable,
       onClick,
       children,
+      getRootRef,
       description,
       selectable,
       multiline,

src/components/Checkbox/Checkbox.js

@@ -10,14 +10,15 @@ import Icon16Done from '@vkontakte/icons/dist/16/done';
 const osname = platform();
 const baseClassName = getClassName('Checkbox');
 
-const Checkbox = ({ children, className, style, ...restProps }) => {
+const Checkbox = ({ children, className, style, getRootRef, ...restProps }) => {
   return (
     <Tappable
       component="label"
       className={classnames(baseClassName, className)}
       style={style}
       disabled={restProps.disabled}
       activeEffectDelay={osname === IOS ? 100 : ACTIVE_EFFECT_DELAY }
+      getRootRef={getRootRef}
     >
       <input {...restProps} type="checkbox" className="Checkbox__input" />
       <div className="Checkbox__container">
@@ -31,7 +32,8 @@ const Checkbox = ({ children, className, style, ...restProps }) => {
 Checkbox.propTypes = {
   children: PropTypes.node,
   style: PropTypes.object,
-  className: PropTypes.string
+  className: PropTypes.string,
+  getRootRef: PropTypes.func
 };
 
 export default Checkbox;

src/components/Div/Div.js

@@ -6,12 +6,13 @@ import getClassName from '../../helpers/getClassName';
 
 const baseClassNames = getClassName('Div');
 
-export default function Div ({ className, children, ...restProps }) {
-  return <div {...restProps} className={classnames(baseClassNames, className)}>{children}</div>;
+export default function Div ({ className, children, getRootRef, ...restProps }) {
+  return <div {...restProps} ref={getRootRef} className={classnames(baseClassNames, className)}>{children}</div>;
 }
 
 Div.propTypes = {
   style: PropTypes.object,
   children: PropTypes.node,
-  className: PropTypes.string
+  className: PropTypes.string,
+  getRootRef: PropTypes.func
 };

src/components/File/File.js

@@ -44,6 +44,7 @@ export default class File extends Component {
      */
     before: PropTypes.any,
     getRef: PropTypes.func,
+    getRootRef: PropTypes.func,
     /**
      * @deprecated Используйте children
      */
@@ -62,7 +63,7 @@ export default class File extends Component {
   };
 
   render () {
-    const { children, label, alignment, align, size, level, type, stretched, before, className, style, getRef, ...restProps } = this.props;
+    const { children, label, alignment, align, size, level, type, stretched, before, className, style, getRef, getRootRef, ...restProps } = this.props;
 
     return (
       <Button
@@ -75,6 +76,7 @@ export default class File extends Component {
         size={size}
         before={before}
         style={style}
+        getRootRef={getRootRef}
       >
         <input {...restProps} className="File__input" type="file" ref={getRef}/>
         {children || label}

src/components/Group/Group.js

@@ -13,17 +13,18 @@ export default class Group extends Component {
     title: PropTypes.node,
     description: PropTypes.node,
     children: PropTypes.node,
-    className: PropTypes.string
+    className: PropTypes.string,
+    getRootRef: PropTypes.func
   };
   static defaultProps = {
     title: null,
     description: null
   };
   render () {
-    const { title, description, className, children, ...restProps } = this.props;
+    const { title, description, className, children, getRootRef, ...restProps } = this.props;
 
     return (
-      <div {...restProps} className={classnames(baseClassNames, className)}>
+      <div {...restProps} ref={getRootRef} className={classnames(baseClassNames, className)}>
         {title && <Header level="2">{title}</Header>}
         {children && <div className="Group__content">{children}</div>}
         {description && <div className="Group__description">{description}</div>}

src/components/Header/Header.js

@@ -6,9 +6,13 @@ import './Header.css';
 
 const baseClassNames = getClassName('Header');
 
-const Header = ({ className, level, children, aside, ...restProps }) => {
+const Header = ({ className, level, children, aside, getRootRef, ...restProps }) => {
   return (
-    <div {...restProps} className={classnames(baseClassNames, className, { [`Header--level-${level}`]: true })}>
+    <div
+      {...restProps}
+      ref={getRootRef}
+      className={classnames(baseClassNames, className, { [`Header--level-${level}`]: true })}
+    >
       <div className="Header__in">
         <div className="Header__content">{children}</div>
         {aside && <div className="Header__aside">{aside}</div>}
@@ -22,7 +26,8 @@ Header.propTypes = {
   level: PropTypes.oneOf(['1', '2']),
   aside: PropTypes.node,
   children: PropTypes.node,
-  style: PropTypes.object
+  style: PropTypes.object,
+  getRootRef: PropTypes.func
 };
 
 Header.defaultProps = {

src/components/Input/Input.js

@@ -35,6 +35,7 @@ export default class Input extends Component {
     placeholder: PropTypes.string,
     status: PropTypes.oneOf(['default', 'error', 'verified']),
     getRef: PropTypes.func,
+    getRootRef: PropTypes.func,
     className: PropTypes.string
   };
 
@@ -75,7 +76,7 @@ export default class Input extends Component {
   }
 
   render () {
-    const { onChange, defaultValue, alignment, placeholder, value, status, getRef, className, ...restProps } = this.props;
+    const { onChange, defaultValue, alignment, placeholder, value, status, getRef, className, getRootRef, ...restProps } = this.props;
 
     const modifiers = {
       'Input--left': alignment === 'left',
@@ -87,7 +88,7 @@ export default class Input extends Component {
     const customPlaceolder = ['date', 'datetime-local', 'time', 'month'].indexOf(this.props.type) > -1 && this.context.isWebView ? this.props.placeholder : null;
 
     return (
-      <div className={classnames(baseClassName, modifiers, className)}>
+      <div className={classnames(baseClassName, modifiers, className)} ref={getRootRef}>
         <input
           className="Input__el"
           ref={this.getRef}

src/components/Link/Link.js

@@ -6,14 +6,15 @@ import './Link.css';
 
 const baseClassName = getClassName('Link');
 
-const Link = ({children, className, Component, ...restProps}) => (
-  <Component {...restProps} className={classnames(baseClassName, className)}>{children}</Component>
+const Link = ({children, className, Component, getRootRef, ...restProps}) => (
+  <Component {...restProps} ref={getRootRef} className={classnames(baseClassName, className)}>{children}</Component>
 );
 
 Link.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  Component: PropTypes.any
+  Component: PropTypes.any,
+  getRootRef: PropTypes.func
 };
 
 Link.defaultProps = {

src/components/Progress/Progress.js

@@ -6,9 +6,9 @@ import './Progress.css';
 
 const baseClassName = getClassName('Progress');
 
-const Progress = ({ value, className, color, ...restProps }) => {
+const Progress = ({ value, className, color, getRootRef, ...restProps }) => {
   return (
-    <div{...restProps} className={classnames(baseClassName, className)}>
+    <div {...restProps} ref={getRootRef} className={classnames(baseClassName, className)}>
       <div className="Progress__in" style={{ width: `${value}%`, backgroundColor: color }} />
     </div>
   );
@@ -18,7 +18,8 @@ Progress.propTypes = {
   color: PropTypes.string,
   style: PropTypes.object,
   className: PropTypes.string,
-  value: PropTypes.number
+  value: PropTypes.number,
+  getRootRef: PropTypes.func
 };
 
 Progress.defaultProps = {