react-interface
Advanced tools
react-interface - npm Package Compare versions
Comparing version 0.9.4-alpha.51 to 0.9.4-alpha.52
@@ -91,3 +91,4 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
| placeholderColor = _props2.placeholderColor, | ||
| rest = _objectWithoutProperties(_props2, ['value', 'placeholderColor']); | ||
| iconProps = _props2.iconProps, | ||
| rest = _objectWithoutProperties(_props2, ['value', 'placeholderColor', 'iconProps']); | ||
@@ -104,7 +105,6 @@ return ( | ||
| value && this.renderSelectedValue(), | ||
| React.createElement(Icon, { | ||
| React.createElement(Icon, _extends({ | ||
| type: 'chevron-down', | ||
| size: 20, | ||
| style: { marginLeft: 'auto', display: 'inherit' } | ||
| }) | ||
| }, iconProps)) | ||
| ) | ||
@@ -138,6 +138,13 @@ ) | ||
| borders: 1, | ||
| iconProps: { | ||
| size: 20 | ||
| }, | ||
| popoverProps: { | ||
| maxHeight: '150px', | ||
| mt: '-1px', | ||
| portal: false | ||
| portal: false, | ||
| bg: 'select.background', | ||
| color: 'select.color', | ||
| borderColor: 'select.border', | ||
| borderRadius: 0 | ||
| }, | ||
@@ -144,0 +151,0 @@ menuItemProps: { |
@@ -9,9 +9,9 @@ var _templateObject = _taggedTemplateLiteralLoose(['\n background: ', ';\n border: 1px solid ', ';\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n\n svg {\n color: ', ';\n }\n\n &:focus {\n border: 1px solid ', ';\n outline: none;\n }\n'], ['\n background: ', ';\n border: 1px solid ', ';\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n\n svg {\n color: ', ';\n }\n\n &:focus {\n border: 1px solid ', ';\n outline: none;\n }\n']); | ||
| var Wrapper = styled.div(_templateObject, function (props) { | ||
| return props.theme['select.background']; | ||
| return props.theme.colors['select.background']; | ||
| }, function (props) { | ||
| return props.theme['select.border.color']; | ||
| return props.theme.colors['select.border']; | ||
| }, space, width, borderRadius, borders, borderColor, color, function (props) { | ||
| return props.theme['select.icon.color']; | ||
| return props.theme.colors['select.icon']; | ||
| }, function (props) { | ||
| return props.theme['select.focus.border.color']; | ||
| return props.theme.colors['select.focus.border']; | ||
| }); | ||
@@ -18,0 +18,0 @@ |
@@ -1,8 +0,10 @@ | ||
| import React from "react"; | ||
| import Color from "color"; | ||
| import { withTheme } from "styled-components"; | ||
| import { Flex, Box } from "grid-styled"; | ||
| import React from 'react'; | ||
| import Color from 'color'; | ||
| import { withTheme } from 'styled-components'; | ||
| import { Flex, Box } from 'grid-styled'; | ||
| var groupColorsByName = function groupColorsByName(colors) { | ||
| return Object.keys(colors).map(function (c) { | ||
| return Object.keys(colors).filter(function (c) { | ||
| return typeof colors[c] !== 'string'; | ||
| }).map(function (c) { | ||
| return React.createElement( | ||
@@ -13,15 +15,15 @@ Box, | ||
| return React.createElement( | ||
| "div", | ||
| 'div', | ||
| { | ||
| key: p + "-" + i, | ||
| key: p + '-' + i, | ||
| style: { | ||
| background: p, | ||
| padding: 10, | ||
| color: Color(p).light() ? "#000" : "#FFF" | ||
| color: Color(p).light() ? '#000' : '#FFF' | ||
| } | ||
| }, | ||
| c + "[" + i + "]", | ||
| " (", | ||
| c + '[' + i + ']', | ||
| ' (', | ||
| p, | ||
| ")" | ||
| ')' | ||
| ); | ||
@@ -36,3 +38,3 @@ }) | ||
| Flex, | ||
| { wrap: "wrap", borderRadius: 3 }, | ||
| { wrap: 'wrap', borderRadius: 3 }, | ||
| groupColorsByName(props.theme.colors) | ||
@@ -39,0 +41,0 @@ ); |
@@ -17,3 +17,9 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
| }, sizes, { | ||
| colors: _extends({}, colors, themeColors), | ||
| colors: _extends({}, colors, themeColors, { | ||
| /* Select */ | ||
| 'select.background': colors.gray[0], | ||
| 'select.placeholder': colors.gray[5], | ||
| 'select.border': colors.gray[5], | ||
| 'select.icon': colors.gray[5] | ||
| }), | ||
@@ -31,8 +37,2 @@ /* Checkbox */ | ||
| /* Select */ | ||
| 'select.background': colors.gray[0], | ||
| 'select.placeholder.color': colors.gray[5], | ||
| 'select.border.color': colors.gray[5], | ||
| 'select.icon.color': colors.gray[5], | ||
| /* MultiSelect */ | ||
@@ -39,0 +39,0 @@ 'multiselect.background': colors.gray[0], |
@@ -113,3 +113,4 @@ 'use strict'; | ||
| placeholderColor = _props2.placeholderColor, | ||
| rest = _objectWithoutProperties(_props2, ['value', 'placeholderColor']); | ||
| iconProps = _props2.iconProps, | ||
| rest = _objectWithoutProperties(_props2, ['value', 'placeholderColor', 'iconProps']); | ||
@@ -126,7 +127,6 @@ return ( | ||
| value && this.renderSelectedValue(), | ||
| _react2.default.createElement(_Icon2.default, { | ||
| _react2.default.createElement(_Icon2.default, _extends({ | ||
| type: 'chevron-down', | ||
| size: 20, | ||
| style: { marginLeft: 'auto', display: 'inherit' } | ||
| }) | ||
| }, iconProps)) | ||
| ) | ||
@@ -160,6 +160,13 @@ ) | ||
| borders: 1, | ||
| iconProps: { | ||
| size: 20 | ||
| }, | ||
| popoverProps: { | ||
| maxHeight: '150px', | ||
| mt: '-1px', | ||
| portal: false | ||
| portal: false, | ||
| bg: 'select.background', | ||
| color: 'select.color', | ||
| borderColor: 'select.border', | ||
| borderRadius: 0 | ||
| }, | ||
@@ -166,0 +173,0 @@ menuItemProps: { |
@@ -18,9 +18,9 @@ 'use strict'; | ||
| var Wrapper = _styledComponents2.default.div(_templateObject, function (props) { | ||
| return props.theme['select.background']; | ||
| return props.theme.colors['select.background']; | ||
| }, function (props) { | ||
| return props.theme['select.border.color']; | ||
| return props.theme.colors['select.border']; | ||
| }, _styledSystem.space, _styledSystem.width, _styledSystem.borderRadius, _styledSystem.borders, _styledSystem.borderColor, _styledSystem.color, function (props) { | ||
| return props.theme['select.icon.color']; | ||
| return props.theme.colors['select.icon']; | ||
| }, function (props) { | ||
| return props.theme['select.focus.border.color']; | ||
| return props.theme.colors['select.focus.border']; | ||
| }); | ||
@@ -27,0 +27,0 @@ |
@@ -1,16 +0,16 @@ | ||
| "use strict"; | ||
| 'use strict'; | ||
| exports.__esModule = true; | ||
| var _react = require("react"); | ||
| var _react = require('react'); | ||
| var _react2 = _interopRequireDefault(_react); | ||
| var _color = require("color"); | ||
| var _color = require('color'); | ||
| var _color2 = _interopRequireDefault(_color); | ||
| var _styledComponents = require("styled-components"); | ||
| var _styledComponents = require('styled-components'); | ||
| var _gridStyled = require("grid-styled"); | ||
| var _gridStyled = require('grid-styled'); | ||
@@ -20,3 +20,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| var groupColorsByName = function groupColorsByName(colors) { | ||
| return Object.keys(colors).map(function (c) { | ||
| return Object.keys(colors).filter(function (c) { | ||
| return typeof colors[c] !== 'string'; | ||
| }).map(function (c) { | ||
| return _react2.default.createElement( | ||
@@ -27,15 +29,15 @@ _gridStyled.Box, | ||
| return _react2.default.createElement( | ||
| "div", | ||
| 'div', | ||
| { | ||
| key: p + "-" + i, | ||
| key: p + '-' + i, | ||
| style: { | ||
| background: p, | ||
| padding: 10, | ||
| color: (0, _color2.default)(p).light() ? "#000" : "#FFF" | ||
| color: (0, _color2.default)(p).light() ? '#000' : '#FFF' | ||
| } | ||
| }, | ||
| c + "[" + i + "]", | ||
| " (", | ||
| c + '[' + i + ']', | ||
| ' (', | ||
| p, | ||
| ")" | ||
| ')' | ||
| ); | ||
@@ -50,3 +52,3 @@ }) | ||
| _gridStyled.Flex, | ||
| { wrap: "wrap", borderRadius: 3 }, | ||
| { wrap: 'wrap', borderRadius: 3 }, | ||
| groupColorsByName(props.theme.colors) | ||
@@ -57,2 +59,2 @@ ); | ||
| exports.default = (0, _styledComponents.withTheme)(Theme); | ||
| module.exports = exports["default"]; | ||
| module.exports = exports['default']; |
@@ -30,3 +30,9 @@ 'use strict'; | ||
| }, _sizes2.default, { | ||
| colors: _extends({}, _colors2.default, themeColors), | ||
| colors: _extends({}, _colors2.default, themeColors, { | ||
| /* Select */ | ||
| 'select.background': _colors2.default.gray[0], | ||
| 'select.placeholder': _colors2.default.gray[5], | ||
| 'select.border': _colors2.default.gray[5], | ||
| 'select.icon': _colors2.default.gray[5] | ||
| }), | ||
@@ -44,8 +50,2 @@ /* Checkbox */ | ||
| /* Select */ | ||
| 'select.background': _colors2.default.gray[0], | ||
| 'select.placeholder.color': _colors2.default.gray[5], | ||
| 'select.border.color': _colors2.default.gray[5], | ||
| 'select.icon.color': _colors2.default.gray[5], | ||
| /* MultiSelect */ | ||
@@ -52,0 +52,0 @@ 'multiselect.background': _colors2.default.gray[0], |
| { | ||
| "name": "react-interface", | ||
| "version": "0.9.4-alpha.51", | ||
| "version": "0.9.4-alpha.52", | ||
| "description": "react-interface React component", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.21%
261498
- Lines of code
- increased by0.37%
5388