New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

belle

Package Overview
Dependencies
Maintainers
1
Versions
64
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

belle - npm Package Compare versions

Comparing version 0.0.32 to 0.0.33

docs/js/FormComponents.jsx
docs/js/theme/belle-with-classic-focus.js
docs/js/theme/bootstrap-3.js

151

docs/js/Base.jsx
import React from 'react';
import {Card} from 'belle';
import belle, {Card, Option, Select} from 'belle';
import bootstrap3Theme from './theme/bootstrap-3';
import belleWithClassicFocusTheme from './theme/belle-with-classic-focus';
import {RouteHandler, Link} from 'react-router';

@@ -7,2 +9,17 @@ import Column from './Column';

/**
* Updates the deepest structure while keeping the original reference of the outer objects.
*/
function updateStructure(targetObject, object) {
for (const componentName in object) {
if (object.hasOwnProperty(componentName)) {
for (const styleName in object[componentName]) {
if (object[componentName].hasOwnProperty(styleName)) {
targetObject[componentName][styleName] = object[componentName][styleName];
}
}
}
}
}
export default React.createClass({

@@ -16,2 +33,23 @@

componentWillMount() {
this.belleConfig = JSON.parse(JSON.stringify(belle.config));
this.belleStyle = JSON.parse(JSON.stringify(belle.style));
},
_onChangeTheme(info) {
if (info.value === 'bootstrap') {
updateStructure(belle.style, bootstrap3Theme.style);
updateStructure(belle.config, bootstrap3Theme.config);
} else if (info.value === 'belle-with-classic-focus') {
updateStructure(belle.style, this.belleStyle);
updateStructure(belle.style, belleWithClassicFocusTheme.style);
updateStructure(belle.config, belleWithClassicFocusTheme.config);
} else {
updateStructure(belle.style, this.belleStyle);
updateStructure(belle.config, this.belleConfig);
}
this.forceUpdate();
},
render() {

@@ -66,5 +104,108 @@ const cardContentStyle = (this.state.viewport.width <= 480) ? { padding: 20 } : {};

height="30px"
style={ { 'float': 'right', marginTop: 20 } }>
style={{ 'float': 'right', marginTop: 20 }}>
</iframe>
<div style={{ display: 'inline-block',
width: 250,
'float': 'right',
marginTop: 15,
marginRight: 15 }}>
<Select onUpdate={ this._onChangeTheme }
shouldPositionOptions={ false }
style={{
border: '1px solid #CCC',
borderRadius: 2,
color: '#333',
backgroundColor: '#fff',
padding: '3px 0px 3px 10px',
borderBottom: '1px solid #CCC',
boxSizing: 'border-box',
cursor: 'pointer',
position: 'relative',
/* overwrite bootstrap */
display: 'block',
fontSize: 14,
fontWeight: 'normal',
lineHeight: 1.42857143,
textAlign: 'left',
whiteSpace: 'nowrap',
verticalAlign: 'middle',
msTouchAction: 'manipulation',
touchAction: 'manipulation',
WebkitUserSelect: 'none',
MozUserSelect: 'none',
msUserSelect: 'none',
userSelect: 'none',
backgroundImage: 'none'
}}
focusStyle={{
border: '1px solid #6EB8D4',
/* overwrite bootstrap */
outline: 0,
outlineOffset: 0,
color: '#333',
backgroundColor: '#fff',
borderColor: '#6EB8D4'
}}
hoverStyle={{
border: '1px solid #92D6EF',
/* overwrite bootstrap */
color: '#333',
backgroundColor: '#fff',
borderColor: '#92D6EF'
}}
menuStyle={{
top: 32,
display: 'block',
listStyleType: 'none',
background: '#FFF',
padding: '6px 0',
margin: 0,
position: 'absolute',
width: '100%',
zIndex: 10000,
boxSizing: 'border-box',
borderRadius: 2,
boxShadow: '0 1px 1px rgba(0, 0, 0, 0.2)',
WebkitBoxShadow: '0 1px 1px rgba(0, 0, 0, 0.2)',
borderTop: '1px solid #f2f2f2',
border: '1px solid #f2f2f2',
left: 0,
'float': 'none',
minWidth: 0,
fontSize: 14,
textAlign: 'left',
listStyle: 'none',
backgroundColor: '#fff',
WebkitBackgroundClip: 'padding-box',
backgroundClip: 'padding-box'
}}
caretToOpenStyle={{
height: 0,
width: 0,
position: 'absolute',
top: 11,
right: 8,
borderTop: '6px solid #666',
borderLeft: '5px solid transparent',
borderRight: '5px solid transparent'
}}
caretToCloseStyle={{
height: 0,
width: 0,
position: 'absolute',
top: 11,
right: 8,
borderTop: '0px solid transparent',
borderBottom: '6px solid #666',
borderLeft: '5px solid transparent',
borderRight: '5px solid transparent'
}}>
<Option value={ "belle" } style={{ padding: 10 }}>Belle</Option>
<Option value={ "bootstrap" } style={{ padding: 10 }}>Bootstrap</Option>
<Option value={ "belle-with-classic-focus" } style={{ padding: 10 }}>Belle with classic focus behaviour</Option>
</Select>
</div>
<Link style={{ display: 'inline' }} to="app">

@@ -140,2 +281,8 @@ <h1 style={{ fontSize: 24, margin: 0, padding: '10px 0', color: '#FFF', fontFamily: '"Trebuchet MS", Helvetica, sans-serif' }}>

</ul>
<span style={ { color: '#738088' } } >Guides</span>
<ul style={ { listStyleType: 'none', paddingLeft: 0 } }>
<li>
<Link style={{ display: 'block', padding: '3px 0' }} to="guide/formComponents">Form Components</Link>
</li>
</ul>
<span style={ { color: '#738088' } } >General</span>

@@ -142,0 +289,0 @@ <ul style={ { listStyleType: 'none', paddingLeft: 0 } }>

85

docs/js/ComboBoxDocumentation.jsx

@@ -156,3 +156,5 @@ import React from 'react';

<input style={ style } />
<ul style={ menuStyle }>
<span style={ caretToCloseStyle or caretToOpenStyle } />
</span>
<ul style={ menuStyle }>
<li>

@@ -372,2 +374,22 @@ <Option />

<td style={ propertyNameStyle }>
disabledCaretToOpenStyle
</td>
</tr>
<tr>
<td style={ propertyDescriptionStyle }>
<p>
<i>Object</i>
<br />
optional
</p>
<p>
Works like React's built-in style property except that it extends
the properties from the base disabledCaretToOpenStyle.
Is applied to the Caret once the combo-box is disabled.
</p>
</td>
</tr>
<tr>
<td style={ propertyNameStyle }>
hoverStyle

@@ -492,2 +514,42 @@ </td>

<td style={ propertyNameStyle }>
caretToOpenStyle
</td>
</tr>
<tr>
<td style={ propertyDescriptionStyle }>
<p>
<i>Object</i>
<br />
optional
</p>
<p>
Works like React's built-in style property.
Manipulates the styling for the caret when the options to combo-box
are not visible.
</p>
</td>
</tr>
<tr>
<td style={ propertyNameStyle }>
caretToCloseStyle
</td>
</tr>
<tr>
<td style={ propertyDescriptionStyle }>
<p>
<i>Object</i>
<br />
optional
</p>
<p>
Works like React's built-in style property.
Manipulates the styling for the caret when the options to combo-box
are visible.
</p>
</td>
</tr>
<tr>
<td style={ propertyNameStyle }>
wrapperProps

@@ -530,2 +592,21 @@ </td>

<tr>
<td style={ propertyNameStyle }>
caretProps
</td>
</tr>
<tr>
<td style={ propertyDescriptionStyle }>
<p>
<i>Object</i>
<br />
optional
</p>
<p>
This object allows to provide any kind of valid properties for a
span tag.
</p>
</td>
</tr>
</table>

@@ -535,3 +616,3 @@

Any other property valid for an input element like
<span style={ {color: 'grey'} }> placeholder, onFocus, onBlur, onClick…</span><br />
<span style={ {color: 'grey'} }> placeholder, onFocus, onBlur…</span><br />
</p>

@@ -538,0 +619,0 @@

4

docs/js/Configuration.jsx

@@ -94,2 +94,4 @@ import React, {Component} from 'react';

focusStyle: { … },
hoverStyle: { … },
disabledHoverStyle: { … },
characterStyle: { … },

@@ -131,3 +133,3 @@ hoverCharacterStyle: { … },

shouldPositionOptions: true/false,
repositionMenu: function () {}
positionOptions: function () {}
},

@@ -134,0 +136,0 @@ toggle: {

42

docs/js/RatingDocumentation.jsx

@@ -273,2 +273,44 @@ import React from 'react';

<td style={ propertyNameStyle }>
hoverStyle
</td>
</tr>
<tr>
<td style={ propertyDescriptionStyle }>
<p>
<i>Object</i>
<br />
optional
</p>
<p>
The property is used to apply a style directly to the wrapper
applied when the component is hovered.
Works like React's built-in style property except that it extends
the properties from the base style.
</p>
</td>
</tr>
<tr>
<td style={ propertyNameStyle }>
disabledHoverStyle
</td>
</tr>
<tr>
<td style={ propertyDescriptionStyle }>
<p>
<i>Object</i>
<br />
optional
</p>
<p>
The property is used to apply a style directly to the wrapper
applied when the component is disabled and is hovered.
Works like React's built-in style property except that it extends
the properties from the base style.
</p>
</td>
</tr>
<tr>
<td style={ propertyNameStyle }>
wrapperProps

@@ -275,0 +317,0 @@ </td>

2

docs/js/routes.jsx

@@ -20,2 +20,3 @@ import React from 'react';

import ToggleDocumentation from './ToggleDocumentation';
import FormComponents from './FormComponents';

@@ -36,2 +37,3 @@ const routes = (

<Route name="component/toggle" handler={ToggleDocumentation}/>
<Route name="guide/formComponents" handler={FormComponents}/>
<Route name="configuration" handler={Configuration}/>

@@ -38,0 +40,0 @@ <Route name="philosophy" handler={Philosophy}/>

4

docs/js/SeparatorDocumentation.jsx

@@ -7,3 +7,3 @@ import React, {Component} from 'react';

<Select>
<Separator>Amerika</Separator>
<Separator>America</Separator>
<Option value="san-francisco">San Francisco</Option>

@@ -29,3 +29,3 @@ <Option value="vancouver">Vancouver</Option>

<Select>
<Separator>Amerika</Separator>
<Separator>America</Separator>
<Option value="san-francisco">San Francisco</Option>

@@ -32,0 +32,0 @@ <Option value="vancouver">Vancouver</Option>

2

docs/package.json
{
"name": "belleDocumentation",
"version": "0.0.32",
"version": "0.0.33",
"description": "Docuemtation for Belle",

@@ -5,0 +5,0 @@ "author": {

13

lib/components/Button.js

@@ -279,4 +279,2 @@ 'use strict';

var baseButtonStyle = (0, _underscore.extend)({}, baseStyle, this.props.style);
var baseFocusStyle = this.props.primary ? _styleButton2['default'].primaryFocusStyle : _styleButton2['default'].focusStyle;
var focusStyle = (0, _underscore.extend)({}, baseFocusStyle, this.props.focusStyle);

@@ -286,7 +284,5 @@ var buttonStyle = undefined;

if (this.props.primary) {
var primaryDisabledStyle = (0, _underscore.extend)({}, _styleButton2['default'].primaryDisabledStyle, this.props.disabledStyle);
buttonStyle = (0, _underscore.extend)({}, baseButtonStyle, primaryDisabledStyle);
buttonStyle = (0, _underscore.extend)({}, baseButtonStyle, _styleButton2['default'].primaryDisabledStyle, this.props.disabledStyle);
} else {
var disabledStyle = (0, _underscore.extend)({}, _styleButton2['default'].disabledStyle, this.props.disabledStyle);
buttonStyle = (0, _underscore.extend)({}, baseButtonStyle, disabledStyle);
buttonStyle = (0, _underscore.extend)({}, baseButtonStyle, _styleButton2['default'].disabledStyle, this.props.disabledStyle);
}

@@ -297,4 +293,5 @@ } else {

buttonStyle = (0, _underscore.extend)({}, baseButtonStyle, baseActiveStyle, this.props.activeStyle);
} else if (this.focused && !this.state.active && this.props.preventFocusStyleForTouchAndClick) {
buttonStyle = (0, _underscore.extend)({}, baseButtonStyle, focusStyle);
} else if (this.focused && !this.state.active && this.preventFocusStyleForTouchAndClick) {
var baseFocusStyle = this.props.primary ? _styleButton2['default'].primaryFocusStyle : _styleButton2['default'].focusStyle;
buttonStyle = (0, _underscore.extend)({}, baseButtonStyle, baseFocusStyle, this.props.focusStyle);
} else {

@@ -301,0 +298,0 @@ buttonStyle = baseButtonStyle;

67

lib/components/ComboBox.js

@@ -44,6 +44,7 @@ 'use strict';

*/
function updatePseudoClassStyle(styleId, properties) {
function updatePseudoClassStyle(styleId, caretStyleId, properties) {
var hoverStyle = (0, _underscore.extend)({}, _styleComboBox2['default'].hoverStyle, properties.hoverStyle);
var focusStyle = (0, _underscore.extend)({}, _styleComboBox2['default'].focusStyle, properties.focusStyle);
var disabledHoverStyle = (0, _underscore.extend)({}, _styleComboBox2['default'].disabledHoverStyle, properties.disabledHoverStyle);
var caretFocusStyle = (0, _underscore.extend)({}, _styleComboBox2['default'].caretFocusStyle);

@@ -63,2 +64,6 @@ var styles = [{

pseudoClass: 'focus'
}, {
id: caretStyleId,
style: caretFocusStyle,
pseudoClass: 'focus'
}];

@@ -83,2 +88,10 @@ (0, _utilsInjectStyle.injectStyles)(styles);

/**
* Returns an object with properties that are relevant for the wrapping div of
* the selected option.
*/
function sanitizeCaretProps(properties) {
return (0, _underscore.omit)(properties, ['style', 'className', 'onClick', 'tabIndex']);
}
/**
* Returns an object with properties that are relevant for the combo-box menu.

@@ -126,2 +139,3 @@ */

inputProps: sanitizeInputProps(properties),
caretProps: sanitizeCaretProps(properties.caretProps),
menuProps: sanitizeMenuProps(properties.menuProps)

@@ -184,3 +198,4 @@ };

this._styleId = 'style-id' + id;
updatePseudoClassStyle(this._styleId, this.props);
this._caretStyleId = 'caretStyle-id' + id;
updatePseudoClassStyle(this._styleId, this._caretStyleId, this.props);
}

@@ -193,2 +208,3 @@ }, {

inputProps: sanitizeInputProps(properties),
caretProps: sanitizeCaretProps(properties.caretProps),
menuProps: sanitizeMenuProps(properties.menuProps)

@@ -206,3 +222,3 @@ };

this.setState(newState);
updatePseudoClassStyle(this._styleId, properties);
updatePseudoClassStyle(this._styleId, this._caretStyleId, properties);
}

@@ -296,2 +312,16 @@ }, {

}, {
key: '_onCaretClick',
/**
* Open/ Close menu when create is clicked.
*/
value: function _onCaretClick() {
if (!this.props.disabled) {
var isOpen = !this.state.isOpen;
this.setState({
isOpen: isOpen
});
}
}
}, {
key: '_onMouseEnterAtOption',

@@ -550,21 +580,25 @@

var hint = this.props.enableHint ? this._getHint() : undefined;
var placeHolder = !hint ? this.props.placeholder : undefined;
var wrapperStyle = (0, _underscore.extend)({}, _styleComboBox2['default'].wrapperStyle, this.props.wrapperStyle);
var inputStyle = (0, _underscore.extend)({}, _styleComboBox2['default'].style, this.props.style);
var hintStyle = (0, _underscore.extend)({}, _styleComboBox2['default'].hintStyle, this.props.hintStyle);
var wrapperStyle = (0, _underscore.extend)({}, _styleComboBox2['default'].wrapperStyle, this.props.wrapperStyle);
var menuStyle = (0, _underscore.extend)({}, _styleComboBox2['default'].menuStyle, this.props.menuStyle);
var hint = this.props.enableHint ? this._getHint() : undefined;
var placeHolder = !hint ? this.props.placeholder : undefined;
var inputClassName = (0, _utilsUnionClassNames2['default'])(this.props.className, this._styleId);
var tabIndex = this.props.tabIndex ? this.props.tabIndex : '0';
// Currently there are no different hover styles for caret, like select they are probably not really needed.
if (this.props.disabled) {
inputStyle = (0, _underscore.extend)(inputStyle, _styleComboBox2['default'].disabledStyle, this.props.disabledStyle);
}
// todo: Currently there are no different hover styles for caret, like select they are probably not really needed.
var caretStyle = undefined;
if (this.props.displayCaret) {
if (this.props.disabled) {
hintStyle = (0, _underscore.extend)({}, hintStyle, _styleComboBox2['default'].caretToOpenStyle, _styleComboBox2['default'].disabledCaretToOpenStyle);
caretStyle = (0, _underscore.extend)({}, _styleComboBox2['default'].caretToOpenStyle, this.props.caretToOpenStyle, _styleComboBox2['default'].disabledCaretToOpenStyle, this.props.disabledCaretToOpenStyle);
} else if (this.state.isOpen) {
hintStyle = (0, _underscore.extend)({}, hintStyle, _styleComboBox2['default'].caretToCloseStyle);
caretStyle = (0, _underscore.extend)({}, _styleComboBox2['default'].caretToCloseStyle, this.props.caretToCloseStyle);
} else {
hintStyle = (0, _underscore.extend)({}, hintStyle, _styleComboBox2['default'].caretToOpenStyle);
caretStyle = (0, _underscore.extend)({}, _styleComboBox2['default'].caretToOpenStyle, this.props.caretToOpenStyle);
}

@@ -600,2 +634,7 @@ }

}, this.state.inputProps)),
_react2['default'].createElement('span', _extends({ style: caretStyle,
className: this._caretStyleId,
onClick: this._onCaretClick.bind(this),
tabIndex: -1
}, this.state.caretProps)),
_react2['default'].createElement(

@@ -655,2 +694,3 @@ 'ul',

menuProps: _react2['default'].PropTypes.object,
caretProps: _react2['default'].PropTypes.object,
onUpdate: _react2['default'].PropTypes.func,

@@ -662,2 +702,3 @@ tabIndex: _react2['default'].PropTypes.number,

className: _react2['default'].PropTypes.string,
caretClassName: _react2['default'].PropTypes.string,
style: _react2['default'].PropTypes.object,

@@ -668,4 +709,8 @@ wrapperStyle: _react2['default'].PropTypes.object,

focusStyle: _react2['default'].PropTypes.object,
disabledStyle: _react2['default'].PropTypes.object,
disabledHoverStyle: _react2['default'].PropTypes.object,
hoverStyle: _react2['default'].PropTypes.object,
caretToOpenStyle: _react2['default'].PropTypes.object,
caretToCloseStyle: _react2['default'].PropTypes.object,
disabledCaretToOpenStyle: _react2['default'].PropTypes.object,
maxOptions: _react2['default'].PropTypes.number,

@@ -672,0 +717,0 @@ displayCaret: _react2['default'].PropTypes.bool,

20

lib/components/Option.js

@@ -67,18 +67,14 @@ 'use strict';

value: function render() {
var defaultStyle = (0, _underscore.extend)({}, _styleOption2['default'].style, this.props.style);
var hoverStyle = (0, _underscore.extend)({}, _styleOption2['default'].hoverStyle, this.props.hoverStyle);
var selectStyle = (0, _underscore.extend)({}, _styleOption2['default'].selectStyle, this.props.selectStyle);
var disabledSelectStyle = (0, _underscore.extend)({}, _styleOption2['default'].disabledSelectStyle, this.props.disabledSelectStyle);
var optionStyle = undefined;
var styleToDisplay = undefined;
if (this.props._isDisplayedAsSelected) {
optionStyle = (0, _underscore.extend)({}, _styleOption2['default'].selectStyle, this.props.selectStyle);
if (this.props._isDisabled) {
styleToDisplay = disabledSelectStyle;
} else {
styleToDisplay = selectStyle;
optionStyle = (0, _underscore.extend)(optionStyle, _styleOption2['default'].disabledSelectStyle, this.props.disabledSelectStyle);
}
} else if (this.props._isHovered) {
styleToDisplay = hoverStyle;
} else {
styleToDisplay = defaultStyle;
optionStyle = (0, _underscore.extend)({}, _styleOption2['default'].style, this.props.style);
if (this.props._isHovered) {
optionStyle = (0, _underscore.extend)(optionStyle, _styleOption2['default'].hoverStyle, this.props.hoverStyle);
}
}

@@ -89,3 +85,3 @@

_extends({ 'data-belle-value': this.props.value,
style: styleToDisplay
style: optionStyle
}, this.state.childProps),

@@ -92,0 +88,0 @@ this.props.children

6

lib/components/Placeholder.js

@@ -67,7 +67,5 @@ 'use strict';

value: function render() {
var computedStyle = undefined;
var computedStyle = (0, _underscore.extend)({}, _stylePlaceholder2['default'].style, this.props.style);
if (this.props._isDisabled) {
computedStyle = (0, _underscore.extend)({}, _stylePlaceholder2['default'].disabledStyle, this.props.disabledStyle);
} else {
computedStyle = (0, _underscore.extend)({}, _stylePlaceholder2['default'].style, this.props.style);
computedStyle = (0, _underscore.extend)(computedStyle, _stylePlaceholder2['default'].disabledStyle, this.props.disabledStyle);
}

@@ -74,0 +72,0 @@

73

lib/components/Rating.js

@@ -48,3 +48,3 @@ 'use strict';

function sanitizeWrapperProps(properties) {
return (0, _underscore.omit)(properties, ['className', 'onKeyDown', 'onClick', 'onMouseEnter', 'onMouseMove', 'onMouseLeave', 'onMouseUp', 'onMouseDown', 'onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel', 'onBlur', 'onFocus', 'tabIndex', 'aria-label', 'aria-valuemax', 'aria-valuemin', 'aria-valuenow', 'aria-disabled', 'style', 'focusStyle', 'disabledStyle', 'characterStyle', 'activeCharacterStyle', 'hoverCharacterStyle', 'characterProps']);
return (0, _underscore.omit)(properties, ['className', 'onKeyDown', 'onMouseEnter', 'onMouseMove', 'onMouseLeave', 'onMouseUp', 'onMouseDown', 'onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel', 'onBlur', 'onFocus', 'tabIndex', 'aria-label', 'aria-valuemax', 'aria-valuemin', 'aria-valuenow', 'aria-disabled', 'style', 'focusStyle', 'disabledStyle', 'characterStyle', 'activeCharacterStyle', 'hoverCharacterStyle', 'characterProps']);
}

@@ -124,2 +124,5 @@

updatePseudoClassStyle(this.ratingWrapperStyleId, this.props, this.preventFocusStyleForTouchAndClick);
this.mouseUpOnDocumentCallback = this._onMouseUpOnDocument.bind(this);
document.addEventListener('mouseup', this.mouseUpOnDocumentCallback);
}

@@ -153,2 +156,3 @@ }, {

(0, _utilsInjectStyle.removeStyle)(this.ratingWrapperStyleId);
document.removeEventListener('mouseup', this.mouseUpOnDocumentCallback);
}

@@ -163,2 +167,10 @@ }, {

value: function _onMouseEnter(event) {
// In case the user pressed the mouse and then hovers over the rating and
// releases the mousUp should no be trigger. Only when the mouseDown starts
// inside.
// Activating inside, going out & coming back should still be possible.
if (!this.state.isActive) {
this.preventNextMouseUpTriggerUpdate = true;
}
if (!this.props.disabled) {

@@ -228,4 +240,5 @@ var value = Number(event.target.getAttribute('data-belle-value'));

value: function _onMouseDown(event) {
if (!this.props.disabled) {
if (!this.props.disabled && event.buttons === 1) {
this.setState({ isActive: true });
this.preventNextMouseUpTriggerUpdate = false;
}

@@ -244,4 +257,5 @@

value: function _onMouseUp(event) {
if (!this.props.disabled) {
this.setState({ isActive: false });
if (!this.props.disabled && !this.preventNextMouseUpTriggerUpdate) {
var value = Number(event.target.getAttribute('data-belle-value'));
this._updateComponent(value);
}

@@ -254,18 +268,12 @@

}, {
key: '_onClick',
/**
* update component when clicked
*/
value: function _onClick(event) {
if (!this.props.disabled) {
var value = Number(event.target.getAttribute('data-belle-value'));
this._updateComponent(value);
}
if (this.props.onClick) {
this.props.onClick(event);
}
key: '_onMouseUpOnDocument',
value: function _onMouseUpOnDocument() {
this.setState({ isActive: false });
}
}, {
key: '_onContextMenu',
value: function _onContextMenu() {
this.setState({ isActive: false });
}
}, {
key: '_onTouchStart',

@@ -376,3 +384,4 @@

focusedValue: undefined,
isFocus: false
isFocus: false,
isActive: false
});

@@ -410,7 +419,9 @@ }

this.setState({
focusedValue: undefined
focusedValue: undefined,
isActive: false
});
} else if ((0, _underscore.has)(this.props, 'value')) {
this.setState({
focusedValue: undefined
focusedValue: undefined,
isActive: false
});

@@ -420,2 +431,3 @@ } else {

focusedValue: undefined,
isActive: false,
value: value

@@ -575,8 +587,14 @@ });

wrapperStyle = (0, _underscore.extend)({}, wrapperStyle, _styleRatingJs2['default'].disabledStyle, this.props.disabledStyle);
if (this.state.isHover) {
wrapperStyle = (0, _underscore.extend)(wrapperStyle, _styleRatingJs2['default'].disabledHoverStyle, this.props.disabledHoverStyle);
}
} else {
if (this.state.isFocus && this.preventFocusStyleForTouchAndClick) {
wrapperStyle = (0, _underscore.extend)({}, wrapperStyle, _styleRatingJs2['default'].focusStyle, this.props.focusStyle);
}
if (this.state.isHover) {
wrapperStyle = (0, _underscore.extend)(wrapperStyle, _styleRatingJs2['default'].hoverStyle, this.props.hoverStyle);
}
}
if (this.state.isFocus && this.props.preventFocusStyleForTouchAndClick) {
wrapperStyle = (0, _underscore.extend)({}, wrapperStyle, _styleRatingJs2['default'].focusStyle, this.props.focusStyle);
}
return _react2['default'].createElement(

@@ -588,3 +606,2 @@ 'div',

onKeyDown: this._onKeyDown.bind(this),
onClick: this._onClick.bind(this),
onMouseEnter: this._onMouseEnter.bind(this),

@@ -599,2 +616,3 @@ onMouseMove: this._onMouseMove.bind(this),

onTouchCancel: this._onTouchCancel.bind(this),
onContextMenu: this._onContextMenu.bind(this),
onBlur: this._onBlur.bind(this),

@@ -647,2 +665,4 @@ onFocus: this._onFocus.bind(this),

disabledStyle: _react2['default'].PropTypes.object,
hoverStyle: _react2['default'].PropTypes.object,
disabledHoverStyle: _react2['default'].PropTypes.object,
characterStyle: _react2['default'].PropTypes.object,

@@ -663,3 +683,2 @@ activeCharacterStyle: _react2['default'].PropTypes.object,

onBlur: _react2['default'].PropTypes.func,
onClick: _react2['default'].PropTypes.func,
onKeyDown: _react2['default'].PropTypes.func

@@ -666,0 +685,0 @@ };

13

lib/components/Select.js

@@ -285,3 +285,5 @@ 'use strict';

value: function componentWillUpdate(nextProperties, nextState) {
if (nextProperties.shouldPositionOptions) {
var shouldPositionOptions = (0, _underscore.has)(nextProperties, 'shouldPositionOptions') ? nextProperties.shouldPositionOptions : _configSelect2['default'].shouldPositionOptions;
if (shouldPositionOptions) {
var menuNode = _react2['default'].findDOMNode(this.refs.menu);

@@ -303,3 +305,5 @@ this.cachedMenuScrollTop = menuNode.scrollTop;

value: function componentDidUpdate(previousProperties, previousState) {
if (this.props.shouldPositionOptions && !this.props.disabled) {
var shouldPositionOptions = (0, _underscore.has)(this.props, 'shouldPositionOptions') ? this.props.shouldPositionOptions : _configSelect2['default'].shouldPositionOptions;
if (shouldPositionOptions && !this.props.disabled) {
var menuNode = _react2['default'].findDOMNode(this.refs.menu);

@@ -309,3 +313,4 @@

if (!previousState.isOpen && this.state.isOpen) {
this.props.positionOptions(this);
var positionOptions = (0, _underscore.has)(this.props, 'positionOptions') ? this.props.positionOptions : _configSelect2['default'].positionOptions;
positionOptions(this);
// restore the old scrollTop position

@@ -859,4 +864,2 @@ } else {

Select.defaultProps = {
shouldPositionOptions: _configSelect2['default'].shouldPositionOptions,
positionOptions: _configSelect2['default'].repositionMenu,
disabled: false

@@ -863,0 +866,0 @@ };

9

lib/components/TextInput.js

@@ -239,11 +239,6 @@ 'use strict';

value: function render() {
var baseStyle = (0, _underscore.extend)({}, _styleTextInput2['default'].style, this.props.style);
var textareaStyle = (0, _underscore.extend)({}, _styleTextInput2['default'].style, this.props.style);
var textareaStyle = undefined;
if (this.props.disabled) {
var disabledStyle = (0, _underscore.extend)({}, _styleTextInput2['default'].disabledStyle, this.props.disabledStyle);
textareaStyle = (0, _underscore.extend)({}, baseStyle, disabledStyle);
} else {
textareaStyle = baseStyle;
textareaStyle = (0, _underscore.extend)(textareaStyle, _styleTextInput2['default'].disabledStyle, this.props.disabledStyle);
}

@@ -250,0 +245,0 @@

2

lib/config/select.js

@@ -44,3 +44,3 @@ 'use strict';

*/
repositionMenu: function repositionMenu(selectComponent) {
positionOptions: function positionOptions(selectComponent) {
var menuNode = _react2['default'].findDOMNode(selectComponent.refs.menu);

@@ -47,0 +47,0 @@ var menuStyle = window.getComputedStyle(menuNode, null);

15

lib/style/button.js

@@ -48,3 +48,2 @@ 'use strict';

borderTop: '1px solid #F5F5F5',
borderBottom: '1px solid #BDBDBD',
color: '#757575'

@@ -66,6 +65,3 @@ },

disabledStyle: {
background: '#EEEEEE',
color: '#C5C4C4',
borderBottom: '1px solid #BDBDBD',
borderTop: '1px solid #EEEEEE',
cursor: 'not-allowed'

@@ -75,7 +71,3 @@ },

disabledHoverStyle: {
background: '#F5F5F5',
color: '#D0D0D0',
borderBottom: '1px solid #BDBDBD',
borderTop: '1px solid #F5F5F5',
cursor: 'not-allowed'
color: '#D0D0D0'
},

@@ -125,3 +117,2 @@

borderTop: '1px solid #82D9F9',
borderBottom: '1px solid #3995B7',
color: '#FFF'

@@ -153,5 +144,3 @@ },

color: '#FFF',
borderTop: '1px solid #A7E4FB',
borderBottom: '1px solid #74B4CC',
cursor: 'not-allowed'
borderTop: '1px solid #A7E4FB'
}

@@ -158,0 +147,0 @@ };

59

lib/style/combo-box.js

@@ -53,2 +53,11 @@ 'use strict';

disabledStyle: {
borderBottom: '1px dotted #9F9F9F'
},
disabledHoverStyle: {
borderBottom: '1px dotted #92D6EF',
cursor: 'not-allowed'
},
wrapperStyle: {

@@ -77,31 +86,36 @@ outline: 0, // to avoid default focus behaviour

disabledStyle: {
borderBottom: '1px dotted #9F9F9F'
caretToOpenStyle: {
height: 0,
width: 0,
content: ' ',
position: 'absolute',
top: 15,
right: 8,
cursor: 'pointer',
borderTop: '6px solid #666',
borderLeft: '5px solid transparent',
borderRight: '5px solid transparent'
},
disabledHoverStyle: {
borderBottom: '1px dotted #92D6EF',
cursor: 'not-allowed'
caretToCloseStyle: {
height: 0,
width: 0,
content: ' ',
position: 'absolute',
top: 15,
right: 8,
cursor: 'pointer',
borderBottom: '6px solid #666',
borderLeft: '5px solid transparent',
borderRight: '5px solid transparent'
},
disabledCaretToOpenStyle: {
backgroundImage: 'url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12"><polygon points="0,0 20,0 10,12" style="fill:#ccc"></polygon></svg>\')'
caretFocusStyle: {
outline: 0
},
caretToCloseStyle: {
paddingRight: '26px',
backgroundImage: 'url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12"><polygon points="0,12 20,12 10,0" style="fill:grey"></polygon></svg>\')',
backgroundSize: '10px 6px',
backgroundPosition: 'right 10px bottom 10px',
backgroundRepeat: 'no-repeat'
disabledCaretToOpenStyle: {
borderTop: '6px solid #9F9F9F'
},
caretToOpenStyle: {
paddingRight: '26px',
backgroundImage: 'url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="12"><polygon points="0,0 20,0 10,12" style="fill:grey"></polygon></svg>\')',
backgroundSize: '10px 6px',
backgroundPosition: 'right 10px bottom 10px',
backgroundRepeat: 'no-repeat'
},
hintStyle: {

@@ -114,2 +128,3 @@

color: '#ccc',
border: 'none',

@@ -130,4 +145,2 @@ /* normalize.css v3.0.1 */

paddingBottom: '5px',
border: '0 solid #fff',
borderBottom: '1px solid #ccc',
display: 'block',

@@ -134,0 +147,0 @@ boxSizing: 'border-box',

42

lib/style/option.js

@@ -15,3 +15,3 @@ 'use strict';

To avoid any kind of flickering the user won't get feedback
for selecting the button text
for selecting the option text
*/

@@ -33,23 +33,4 @@ WebkitUserSelect: 'none',

hoverStyle: {
boxSizing: 'border-box',
background: '#F5F5F5',
color: '#444',
cursor: 'pointer',
padding: 10,
/*
To avoid any kind of flickering the user won't get feedback
for selecting the button text
*/
WebkitUserSelect: 'none',
MozUserSelect: 'none',
MsUserSelect: 'none',
userSelect: 'none',
/* This button can only be pressed */
MsTouchAction: 'manipulation',
touchAction: 'manipulation',
/*
Prevent flickering while tapping on WebKit
http://stackoverflow.com/a/3516243/837709
*/
WebkitTapHighlightColor: 'transparent'
color: '#444'
},

@@ -80,21 +61,4 @@

disabledSelectStyle: {
boxSizing: 'border-box',
color: '#9F9F9F',
padding: 0,
/*
To avoid any kind of flickering the user won't get feedback
for selecting the button text
*/
WebkitUserSelect: 'none',
MozUserSelect: 'none',
MsUserSelect: 'none',
userSelect: 'none',
/* This button can only be pressed */
MsTouchAction: 'manipulation',
touchAction: 'manipulation',
/*
Prevent flickering while tapping on WebKit
http://stackoverflow.com/a/3516243/837709
*/
WebkitTapHighlightColor: 'transparent'
padding: 0
}

@@ -101,0 +65,0 @@

20

lib/style/placeholder.js

@@ -32,22 +32,4 @@ 'use strict';

disabledStyle: {
boxSizing: 'border-box',
color: '#9F9F9F',
cursor: 'not-allowed',
padding: 0,
/*
To avoid any kind of flickering the user won't get feedback
for selecting the button text
*/
WebkitUserSelect: 'none',
MozUserSelect: 'none',
MsUserSelect: 'none',
userSelect: 'none',
/* This button can only be pressed */
MsTouchAction: 'manipulation',
touchAction: 'manipulation',
/*
Prevent flickering while tapping on WebKit
http://stackoverflow.com/a/3516243/837709
*/
WebkitTapHighlightColor: 'transparent'
cursor: 'not-allowed'
}

@@ -54,0 +36,0 @@

36

lib/style/rating.js

@@ -19,3 +19,3 @@ 'use strict';

To avoid any kind of flickering the user won't get feedback
for selecting the button text
for selecting the rating stars
*/

@@ -28,4 +28,4 @@ WebkitUserSelect: 'none',

/* This button can only be pressed */
MsTouchAction: 'manipulation',
touchAction: 'manipulation',
MsTouchAction: 'none',
touchAction: 'none',

@@ -50,14 +50,13 @@ /*

hoverStyle: {
opacity: 1
},
disabledHoverStyle: {
opacity: 0.6
},
characterStyle: {
color: '#FFCC00',
textShadow: '0px 1px 0px #DCB000',
/*
To avoid any kind of flickering the user won't get feedback
for selecting the button text
*/
WebkitUserSelect: 'none',
MozUserSelect: 'none',
MsUserSelect: 'none',
userSelect: 'none'
textShadow: '0px 1px 0px #DCB000'
},

@@ -73,12 +72,3 @@

position: 'relative',
top: 1,
/*
To avoid any kind of flickering the user won't get feedback
for selecting the button text
*/
WebkitUserSelect: 'none',
MozUserSelect: 'none',
MsUserSelect: 'none',
userSelect: 'none'
top: 1
}

@@ -85,0 +75,0 @@

24

lib/style/select.js

@@ -41,9 +41,7 @@ 'use strict';

focusStyle: {
borderBottom: '1px solid #6EB8D4',
cursor: 'pointer'
borderBottom: '1px solid #6EB8D4'
},
hoverStyle: {
borderBottom: '1px solid #92D6EF',
cursor: 'pointer'
borderBottom: '1px solid #92D6EF'
},

@@ -57,2 +55,11 @@

disabledStyle: {
borderBottom: '1px dotted #9F9F9F'
},
disabledHoverStyle: {
borderBottom: '1px dotted #92D6EF',
cursor: 'not-allowed'
},
menuStyle: {

@@ -100,11 +107,2 @@ display: 'block',

disabledStyle: {
borderBottom: '1px dotted #9F9F9F'
},
disabledHoverStyle: {
borderBottom: '1px dotted #92D6EF',
cursor: 'not-allowed'
},
disabledCaretToOpenStyle: {

@@ -111,0 +109,0 @@ borderTop: '6px solid #9F9F9F'

4

lib/style/toggle.js

@@ -68,4 +68,4 @@ 'use strict';

/* This button can only be pressed */
MsTouchAction: 'manipulation',
touchAction: 'manipulation',
MsTouchAction: 'none',
touchAction: 'none',

@@ -72,0 +72,0 @@ /*

2

package.json
{
"name": "belle",
"version": "0.0.32",
"version": "0.0.33",
"description": "Configurable React Components with great UX",

@@ -5,0 +5,0 @@ "author": {

2

tests/package.json
{
"name": "belle",
"version": "0.0.32",
"version": "0.0.33",
"description": "Tests for Belle",

@@ -5,0 +5,0 @@ "author": {

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc