Stylable components

bem · Sep 2, 2017 · 69c129c · 69c129c
1 parent d4826eb
commit 69c129c
Show file tree

Hide file tree

Showing 36 changed files with 164 additions and 71 deletions.
diff --git a/blocks/Attach/Attach.js b/blocks/Attach/Attach.js
@@ -1,10 +1,11 @@
 import { decl } from 'bem-react-core';
 import React from 'react';
 import PropTypes from 'prop-types';
+import Stylable from 'b:Stylable';
 import File from 'e:File';
 import NoFile from 'e:NoFile';
 
-export default decl({
+export default decl([Stylable], {
     block : 'Attach',
 
     willInit() {

diff --git a/blocks/Attach/_switcher/Attach_switcher_button.js b/blocks/Attach/_switcher/Attach_switcher_button.js
@@ -7,10 +7,12 @@ import Switcher from 'e:Switcher';
 export default declMod({ switcher : 'button' }, {
     block : 'Attach',
 
-    content({ text, icon }) {
+    content({ text, icon, theme, size }) {
         return [
             <Switcher onChange={this._onChange} key="switcher">
                 <Button
+                    theme={theme}
+                    size={size}
                     key="button"
                     mix={{ block : this.block, elem : 'button' }}
                     icon={icon}>

diff --git a/blocks/Button/Button.js b/blocks/Button/Button.js
@@ -2,9 +2,10 @@ import { decl } from 'bem-react-core';
 import PropTypes from 'prop-types';
 import React from 'react';
 import warning from 'warning';
+import Stylable from 'b:Stylable';
 import ButtonText from 'e:Text';
 
-export default decl({
+export default decl([Stylable], {
     block : 'Button',
 
     willInit({ focused, disabled }) {
@@ -57,6 +58,7 @@ export default decl({
     mods({ disabled, checked }) {
         const { focused, hovered, pressed } = this.state;
         return {
+            ...this.__base(...arguments),
             disabled,
             focused,
             hovered,

diff --git a/blocks/Button/Button.css → blocks/Button/Button.tests/simple.css b/blocks/Button/Button.css → blocks/Button/Button.tests/simple.css
@@ -20,3 +20,9 @@
 {
     background: orange;
 }
+
+
+.Button_type_link
+{
+    text-decoration: none;
+}
diff --git a/blocks/Button/Button.tests/simple.js b/blocks/Button/Button.tests/simple.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDom from 'react-dom';
+import './simple.css';
 import Button from 'b:Button m:type=link';
 import Icon from 'b:Icon';
 

diff --git a/blocks/Button/_type/Button_type_link.css b/blocks/Button/_type/Button_type_link.css
diff --git a/blocks/Button/_type/Button_type_link.js b/blocks/Button/_type/Button_type_link.js
@@ -4,14 +4,14 @@ export default declMod(({ type }) => type === 'link', {
     block : 'Button',
 
     mods({ type }) {
-        return { ...this.__base.apply(this, arguments), type };
+        return { ...this.__base(...arguments), type };
     },
 
     tag : 'a',
 
     attrs({ target, disabled, url }) {
         const res = {
-            ...this.__base.apply(this, arguments),
+            ...this.__base(...arguments),
             target,
             role : 'link'
         };
@@ -24,7 +24,7 @@ export default declMod(({ type }) => type === 'link', {
     },
 
     _onKeyUp(e) {
-        this.__base.apply(this, arguments);
+        this.__base(...arguments);
         if(this.state.pressed && e.key === ' ') {
             this.props.onClick(e);
             e.isDefaultPrevented() || (document.location = this.props.url);

diff --git a/blocks/CheckBox/CheckBox.js b/blocks/CheckBox/CheckBox.js
@@ -2,9 +2,10 @@ import Bem, { decl } from 'bem-react-core';
 import PropTypes from 'prop-types';
 import React from 'react';
 import warning from 'warning';
+import Stylable from 'b:Stylable';
 import CheckBoxControl from 'e:Control';
 
-export default decl({
+export default decl([Stylable], {
     block : 'CheckBox',
 
     willInit({ focused, disabled }) {
@@ -25,7 +26,7 @@ export default decl({
 
     mods({ type, disabled }) {
         const { focused } = this.state;
-        return { type, disabled, focused };
+        return { ...this.__base(...arguments), type, disabled, focused };
     },
 
     attrs({ title }) {

diff --git a/blocks/CheckBox/_type/CheckBox_type_button.js b/blocks/CheckBox/_type/CheckBox_type_button.js
@@ -3,19 +3,19 @@ import React from 'react';
 import Button from 'b:Button';
 import CheckBoxControl from 'e:Control';
 
-export default declMod(({ type }) => type === 'button', {
+export default declMod({ type : 'button' }, {
     block : 'CheckBox',
 
     willInit() {
-        this.__base.apply(this, arguments);
+        this.__base(...arguments);
         this._onCheckChange = this._onCheckChange.bind(this);
     },
 
     mods({ type }) {
-        return { ...this.__base.apply(this, arguments), type };
+        return { ...this.__base(...arguments), type };
     },
 
-    content({ checked, disabled, name, value, title, text, icon }) {
+    content({ checked, disabled, name, value, title, text, icon, theme, size }) {
         return [
             <Button
                 key="button"
@@ -26,6 +26,8 @@ export default declMod(({ type }) => type === 'button', {
                 title={title}
                 text={text}
                 icon={icon}
+                theme={theme}
+                size={size}
                 focused={this.state.focused}
                 onFocusChange={this._onControlFocusChange}
                 onCheckChange={this._onCheckChange}/>,

diff --git a/blocks/CheckBoxGroup/CheckBoxGroup.js b/blocks/CheckBoxGroup/CheckBoxGroup.js
@@ -1,9 +1,10 @@
 import React, { Children } from 'React';
 import PropTypes from 'prop-types';
 import warning from 'warning';
+import Stylable from 'b:Stylable';
 import { decl } from 'bem-react-core';
 
-export default decl({
+export default decl([Stylable], {
     block : 'CheckBoxGroup',
 
     willInit({ focused, disabled }) {
@@ -21,12 +22,14 @@ export default decl({
     },
 
     getChildContext() {
-        const { name, type, value, disabled } = this.props;
+        const { name, type, value, disabled, theme, size } = this.props;
         return {
             _checkBoxGroupName : name,
             _checkBoxGroupType : type,
             _checkBoxGroupValue : value,
             _checkBoxGroupDisabled : disabled,
+            _checkBoxGroupTheme : theme,
+            _checkBoxGroupSize : size,
             _checkBoxGroupRegisterOption : this._registerOption.bind(this),
             _checkBoxGroupOnOptionChange : this._onOptionChange.bind(this),
             _checkBoxGroupOnOptionFocusChange : this._onOptionFocusChange.bind(this)
@@ -35,7 +38,7 @@ export default decl({
 
     mods({ type, disabled }) {
         const { focused } = this.state;
-        return { type, disabled, focused };
+        return { ...this.__base(...arguments), type, disabled, focused };
     },
 
     content({ children, type }) {
@@ -86,6 +89,8 @@ export default decl({
         _checkBoxGroupType : PropTypes.string,
         _checkBoxGroupValue : PropTypes.array,
         _checkBoxGroupDisabled : PropTypes.bool,
+        _checkBoxGroupTheme : PropTypes.string,
+        _checkBoxGroupSize : PropTypes.string,
         _checkBoxGroupRegisterOption : PropTypes.func,
         _checkBoxGroupOnOptionChange : PropTypes.func,
         _checkBoxGroupOnOptionFocusChange : PropTypes.func

diff --git a/blocks/CheckBoxGroup/Option/CheckBoxGroup-Option.js b/blocks/CheckBoxGroup/Option/CheckBoxGroup-Option.js
@@ -16,7 +16,9 @@ export default decl({
                 _checkBoxGroupName : name,
                 _checkBoxGroupType : type,
                 _checkBoxGroupValue : groupValue,
-                _checkBoxGroupDisabled : groupDisabled
+                _checkBoxGroupDisabled : groupDisabled,
+                _checkBoxGroupTheme : groupTheme,
+                _checkBoxGroupSize : groupSize
             } = this.context,
             { value, text, title, disabled } = this.props;
 
@@ -26,6 +28,8 @@ export default decl({
             text={text}
             title={title}
             value={value}
+            theme={groupTheme}
+            size={groupSize}
             onFocusChange={this.context._checkBoxGroupOnOptionFocusChange}
             onChange={this.context._checkBoxGroupOnOptionChange}
             checked={this._checked = groupValue.indexOf(value) > -1}
@@ -44,6 +48,8 @@ export default decl({
         _checkBoxGroupType : PropTypes.string,
         _checkBoxGroupValue : PropTypes.array,
         _checkBoxGroupDisabled : PropTypes.bool,
+        _checkBoxGroupTheme : PropTypes.string,
+        _checkBoxGroupSize : PropTypes.string,
         _checkBoxGroupRegisterOption : PropTypes.func,
         _checkBoxGroupOnOptionChange : PropTypes.func,
         _checkBoxGroupOnOptionFocusChange : PropTypes.func

diff --git a/blocks/Dropdown/Dropdown.js b/blocks/Dropdown/Dropdown.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { decl } from 'bem-react-core';
+import Stylable from 'b:Stylable';
 import Popup from 'b:Popup m:autoclosable m:target=anchor';
 
-export default decl({
+export default decl([Stylable], {
     block : 'Dropdown',
 
     willInit() {
@@ -13,11 +14,13 @@ export default decl({
         this._anchorRef = this._anchorRef.bind(this);
     },
 
-    content({ children, autoclosable, onClose, opened }) {
+    content({ children, autoclosable, onClose, opened, theme, size }) {
         return (
             <Popup
                 key="popup"
                 mix={{ block : this.block, elem : 'popup' }}
+                theme={theme}
+                size={size}
                 target="anchor"
                 anchor={this._anchorRef}
                 autoclosable

diff --git a/blocks/Dropdown/_switcher/Dropdown_switcher_button.js b/blocks/Dropdown/_switcher/Dropdown_switcher_button.js
@@ -5,13 +5,15 @@ import Button from 'b:Button';
 export default declMod({ switcher : 'button' }, {
     block : 'Dropdown',
 
-    content({ tabIndex, disabled, text, opened, focused, onFocusChange }) {
+    content({ tabIndex, disabled, text, opened, focused, theme, size, onFocusChange }) {
         return [
             <Button
                 key="button"
                 mix={{ block : this.block, elem : 'switcher' }}
                 ref={this._anchorRef}
                 tabIndex={tabIndex}
+                theme={theme}
+                size={size}
                 disabled={disabled}
                 onClick={this._onSwitcherClick}
                 focused={focused}

diff --git a/blocks/Dropdown/_switcher/Dropdown_switcher_link.js b/blocks/Dropdown/_switcher/Dropdown_switcher_link.js
@@ -5,14 +5,16 @@ import Link from 'b:Link m:pseudo';
 export default declMod({ switcher : 'link' }, {
     block : 'Dropdown',
 
-    content({ tabIndex, disabled, text, opened, focused, onFocusChange }) {
+    content({ tabIndex, disabled, text, opened, focused, theme, size, onFocusChange }) {
         return [
             <Link
                 pseudo
                 key="link"
                 mix={{ block : this.block, elem : 'switcher' }}
                 ref={this._anchorRef}
                 tabIndex={tabIndex}
+                theme={theme}
+                size={size}
                 disabled={disabled}
                 onClick={this._onSwitcherClick}
                 focused={focused}

diff --git a/blocks/Icon/Icon.js b/blocks/Icon/Icon.js
@@ -1,6 +1,7 @@
 import { decl } from 'bem-react-core';
+import Stylable from 'b:Stylable';
 
-export default decl({
+export default decl([Stylable], {
     block : 'Icon',
     tag : 'span',
     attrs({ url }) {

diff --git a/blocks/Link/Link.js b/blocks/Link/Link.js
@@ -1,8 +1,9 @@
 import { decl } from 'bem-react-core';
 import PropTypes from 'prop-types';
 import warning from 'warning';
+import Stylable from 'b:Stylable';
 
-export default decl({
+export default decl([Stylable], {
     block : 'Link',
 
     willInit({ focused, disabled }) {
@@ -43,7 +44,7 @@ export default decl({
 
     mods({ disabled }) {
         const { focused, hovered } = this.state;
-        return { disabled, focused, hovered };
+        return { ...this.__base(...arguments), disabled, focused, hovered };
     },
 
     tag : 'a',

diff --git a/blocks/Link/_pseudo/Link_pseudo.js b/blocks/Link/_pseudo/Link_pseudo.js
@@ -1,23 +1,19 @@
 import { declMod } from 'bem-react-core';
 
-export default declMod(({ pseudo }) => pseudo, {
+export default declMod({ pseudo : true }, {
     block : 'Link',
 
     willInit() {
-        this.__base.apply(this, arguments);
+        this.__base(...arguments);
         this._onKeyDown = this._onKeyDown.bind(this);
     },
 
-    mods({ pseudo }) {
-        return { ...this.__base.apply(this, arguments), pseudo };
-    },
-
     tag({ url }) {
         return url? 'a' : 'span';
     },
 
     attrs({ url }) {
-        const res = this.__base.apply(this, arguments);
+        const res = this.__base(...arguments);
 
         url || (res.role = 'button');
 
@@ -29,7 +25,7 @@ export default declMod(({ pseudo }) => pseudo, {
     _onClick(e) {
         e.preventDefault();
 
-        this.__base.apply(this, arguments);
+        this.__base(...arguments);
     },
 
     _onKeyDown : function(e) {

diff --git a/blocks/Menu/Menu.js b/blocks/Menu/Menu.js
@@ -1,11 +1,12 @@
 import { decl } from 'bem-react-core';
 import PropTypes from 'prop-types';
 import warning from 'warning';
+import Stylable from 'b:Stylable';
 import KeyCodes from 'b:KeyCodes';
 
 const TIMEOUT_KEYBOARD_SEARCH = 1500;
 
-export default decl({
+export default decl([Stylable], {
     block : 'Menu',
 
     willInit({ focused, disabled }) {
@@ -59,7 +60,11 @@ export default decl({
     },
 
     mods({ disabled }) {
-        return { disabled, focused : this.state.focused };
+        return {
+            ...this.__base(...arguments),
+            disabled,
+            focused : this.state.focused
+        };
     },
 
     attrs({ tabIndex, disabled }) {

diff --git a/blocks/Menu/Item/Menu-Item.css → blocks/Menu/Menu.tests/simple.css b/blocks/Menu/Item/Menu-Item.css → blocks/Menu/Menu.tests/simple.css
diff --git a/blocks/Menu/Menu.tests/simple.js b/blocks/Menu/Menu.tests/simple.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDom from 'react-dom';
+import './simple.css';
 import Menu from 'b:Menu m:mode=radio|check|radio-check';
 import MenuItem from 'b:Menu e:Item';
 import MenuGroup from 'b:Menu e:Group';