New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@bufferapp/components
Advanced tools
@bufferapp/components - npm Package Compare versions
Comparing version 0.5.23-beta02 to 0.5.23-beta03
@@ -5,2 +5,4 @@ import React from 'react'; | ||
| const isNativeComponent = component => typeof component.type === 'string'; | ||
| class Button extends PseudoClassComponent { | ||
@@ -11,3 +13,3 @@ render() { | ||
| // string as children isn't clonable | ||
| if (React.isValidElement(children)) { | ||
| if (React.isValidElement(children) && !isNativeComponent(children)) { | ||
| hoveredChildren = React.cloneElement( | ||
@@ -14,0 +16,0 @@ children, |
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import Select from '../Select'; | ||
| import Text from '../Text'; | ||
| import { calculateStyles } from '../lib/utils'; | ||
| import PseudoClassComponent from '../PseudoClassComponent'; | ||
| import ArrowUpIcon from '../Icon/Icons/ArrowUpIcon'; | ||
| import ArrowDownIcon from '../Icon/Icons/ArrowDownIcon'; | ||
| import PseudoClassComponent from '../PseudoClassComponent'; | ||
| import { calculateStyles } from '../lib/utils'; | ||
@@ -11,60 +13,119 @@ // generate array of numbers (inclusive) | ||
| const leftPadTimeUnit = timeUnit => (timeUnit < 10 ? `0${timeUnit}` : timeUnit); | ||
| /* eslint-disable react/prop-types */ | ||
| const TopArrow = ({ visible }) => | ||
| <div | ||
| style={{ | ||
| opacity: visible ? 1 : 0, | ||
| alignSelf: 'center', | ||
| display: 'flex', | ||
| }} | ||
| > | ||
| <ArrowUpIcon size={'small'} /> | ||
| </div>; | ||
| const inputTimeStyle = { | ||
| display: 'inline-flex', | ||
| }; | ||
| const BottomArrow = ({ visible }) => | ||
| <div | ||
| style={{ | ||
| opacity: visible ? 1 : 0, | ||
| alignSelf: 'center', | ||
| display: 'flex', | ||
| }} | ||
| > | ||
| <ArrowDownIcon size={'small'} /> | ||
| </div>; | ||
| const selectStyle = ({ noStyle, marginRight = '0.25rem' }) => calculateStyles({ | ||
| const selectWrapperStyle = ({ | ||
| minimal, | ||
| marginLeft = 0, | ||
| marginRight = 0, | ||
| }) => calculateStyles({ | ||
| default: { | ||
| display: 'inline-flex', | ||
| marginRight: '0.25rem', | ||
| }, | ||
| noStyle: { | ||
| border: 0, | ||
| background: 'transparent', | ||
| marginTop: 0, | ||
| position: 'relative', | ||
| flex: 1, | ||
| marginLeft, | ||
| marginRight, | ||
| marginBottom: 0, | ||
| marginLeft: 0, | ||
| padding: 0, | ||
| WebkitAppearance: 'none', | ||
| MozAppearance: 'none', | ||
| }, | ||
| minimal: { | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| }, | ||
| }, { | ||
| noStyle, | ||
| minimal, | ||
| }); | ||
| const SelectArrows = (left = 1) => | ||
| <div> | ||
| <div | ||
| style={{ | ||
| top: 0, | ||
| left, | ||
| position: 'absolute', | ||
| }} | ||
| > | ||
| <ArrowUpIcon size={'small'} /> | ||
| </div> | ||
| <div | ||
| style={{ | ||
| bottom: -2, | ||
| left, | ||
| position: 'absolute', | ||
| }} | ||
| > | ||
| <ArrowDownIcon size={'small'} /> | ||
| </div> | ||
| const SelectWrapperStateless = ({ | ||
| children, | ||
| minimal, | ||
| marginLeft, | ||
| marginRight, | ||
| hovered, | ||
| onMouseEnter, | ||
| onMouseLeave, | ||
| }) => | ||
| <div | ||
| onMouseEnter={onMouseEnter} | ||
| onMouseLeave={onMouseLeave} | ||
| style={selectWrapperStyle({ | ||
| minimal, | ||
| marginLeft, | ||
| marginRight, | ||
| hovered, | ||
| })} | ||
| > | ||
| <TopArrow visible={hovered && minimal} /> | ||
| {children} | ||
| <BottomArrow visible={hovered && minimal} /> | ||
| </div>; | ||
| const renderAmPm = ({ | ||
| class SelectWrapper extends PseudoClassComponent { | ||
| render() { | ||
| const { children, ...rest } = this.props; | ||
| let hoveredChildren = children; | ||
| // string as children isn't clonable | ||
| if (React.isValidElement(children)) { | ||
| hoveredChildren = React.cloneElement( | ||
| children, | ||
| { hovered: this.state.hovered }, | ||
| ); | ||
| } | ||
| return ( | ||
| <SelectWrapperStateless | ||
| {...rest} | ||
| hovered={this.state.hovered} | ||
| onMouseEnter={() => this.handleMouseEnter()} | ||
| onMouseLeave={() => this.handleMouseLeave()} | ||
| > | ||
| {hoveredChildren} | ||
| </SelectWrapperStateless> | ||
| ); | ||
| } | ||
| } | ||
| const timeColonWrapperStyle = { | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| flex: 0, | ||
| marginLeft: '0.1rem', | ||
| marginRight: '0.1rem', | ||
| }; | ||
| const TimeColonWrapper = ({ | ||
| children, | ||
| }) => | ||
| <div | ||
| style={timeColonWrapperStyle} | ||
| > | ||
| {children} | ||
| </div>; | ||
| const AmPm = ({ | ||
| disabled, | ||
| noStyle, | ||
| minimal, | ||
| onChange, | ||
| submitting, | ||
| value, | ||
| hovered, | ||
| }) => | ||
| <SelectWrapper noStyle={noStyle}> | ||
| <select | ||
| <SelectWrapper minimal={minimal}> | ||
| <Select | ||
| disabled={disabled || submitting} | ||
@@ -77,29 +138,10 @@ onChange={e => onChange({ | ||
| })} | ||
| style={selectStyle({ noStyle })} | ||
| noStyle={minimal} | ||
| value={value.hours < 12 ? 'AM' : 'PM'} | ||
| > | ||
| <option value="AM">AM</option> | ||
| <option value="PM">PM</option> | ||
| </select> | ||
| { hovered && noStyle ? SelectArrows(4) : null } | ||
| options={[{ value: 'AM', name: 'AM' }, { value: 'PM', name: 'PM' }]} | ||
| centerText={minimal} | ||
| rangeSelector={!minimal} | ||
| /> | ||
| </SelectWrapper>; | ||
| const selectWrapperStyle = ({ noStyle }) => calculateStyles({ | ||
| default: { | ||
| position: 'relative', | ||
| }, | ||
| noStyle: { | ||
| padding: '0.75rem 0', | ||
| }, | ||
| }, { | ||
| noStyle, | ||
| }); | ||
| const SelectWrapper = ({ children, noStyle }) => | ||
| <div | ||
| style={selectWrapperStyle({ noStyle })} | ||
| > | ||
| {children} | ||
| </div>; | ||
| /* eslint-enable react/prop-types */ | ||
@@ -117,7 +159,21 @@ | ||
| const displayTimeColonStyle = { | ||
| marginRight: '0.25rem', | ||
| const generateHours = (select24Hours, value) => { | ||
| const timeArray = genArray( | ||
| select24Hours || value.hours < 12 ? 0 : 12, | ||
| select24Hours || value.hours > 11 ? 23 : 11, | ||
| ); | ||
| return timeArray.map((hour) => { | ||
| const displaytime = leftPadTimeUnit(displayHour(hour, select24Hours)).toString(); | ||
| return { value: hour, name: displaytime }; | ||
| }); | ||
| }; | ||
| const InputTimeStateless = ({ | ||
| const generateMinutes = () => ( | ||
| genArray(0, 59).map((min) => { | ||
| const displayMin = leftPadTimeUnit(min).toString(); | ||
| return { value: min, name: displayMin }; | ||
| }) | ||
| ); | ||
| const InputTime = ({ | ||
| disabled, | ||
@@ -131,9 +187,11 @@ input: { | ||
| }, | ||
| noStyle, | ||
| minimal, | ||
| select24Hours, | ||
| onMouseEnter, | ||
| onMouseLeave, | ||
| hovered, | ||
| displayTimeColon, | ||
| }) => { | ||
| const style = { | ||
| width: '100%', | ||
| display: 'flex', | ||
| }; | ||
| if (!value) { | ||
@@ -143,48 +201,37 @@ value = { hours: 0, minutes: 0 }; | ||
| return ( | ||
| <div | ||
| style={inputTimeStyle} | ||
| onMouseEnter={onMouseEnter} | ||
| onMouseLeave={onMouseLeave} | ||
| > | ||
| <SelectWrapper noStyle={noStyle}> | ||
| <select | ||
| <div style={style}> | ||
| <SelectWrapper minimal={minimal}> | ||
| <Select | ||
| disabled={disabled || submitting} | ||
| onChange={e => onChange({ ...value, hours: parseInt(e.target.value, 10) })} | ||
| style={selectStyle({ | ||
| noStyle, | ||
| marginRight: noStyle && !displayTimeColon ? '0.40rem' : undefined, | ||
| })} | ||
| value={value.hours} | ||
| > | ||
| {genArray( | ||
| select24Hours || value.hours < 12 ? 0 : 12, | ||
| select24Hours || value.hours > 11 ? 23 : 11, | ||
| ).map(hour => | ||
| <option | ||
| key={hour} | ||
| value={hour} | ||
| > | ||
| {leftPadTimeUnit(displayHour(hour, select24Hours))} | ||
| </option>) | ||
| } | ||
| </select> | ||
| { hovered && noStyle ? SelectArrows() : null } | ||
| options={generateHours(select24Hours, value)} | ||
| label={'Hour'} | ||
| noStyle={minimal} | ||
| centerText={minimal} | ||
| rangeSelector={!minimal} | ||
| /> | ||
| </SelectWrapper> | ||
| { displayTimeColon ? | ||
| <SelectWrapper noStyle={noStyle}> | ||
| <span style={displayTimeColonStyle}>:</span> | ||
| </SelectWrapper> | ||
| <TimeColonWrapper | ||
| minimal={minimal} | ||
| > | ||
| <Text>:</Text> | ||
| </TimeColonWrapper> | ||
| : null } | ||
| <SelectWrapper noStyle={noStyle}> | ||
| <select | ||
| <SelectWrapper | ||
| minimal={minimal} | ||
| marginLeft={displayTimeColon ? 0 : '0.25rem'} | ||
| marginRight={'0.25rem'} | ||
| > | ||
| <Select | ||
| disabled={disabled || submitting} | ||
| onChange={e => onChange({ ...value, minutes: parseInt(e.target.value, 10) })} | ||
| style={selectStyle({ noStyle })} | ||
| value={value.minutes} | ||
| > | ||
| {genArray(0, 59).map(min => | ||
| <option key={min} value={min}>{leftPadTimeUnit(min)}</option>)} | ||
| </select> | ||
| { hovered && noStyle ? SelectArrows() : null } | ||
| options={generateMinutes()} | ||
| label={'Minute'} | ||
| noStyle={minimal} | ||
| centerText={minimal} | ||
| rangeSelector={!minimal} | ||
| /> | ||
| </SelectWrapper> | ||
@@ -195,10 +242,3 @@ { | ||
| : | ||
| renderAmPm({ | ||
| disabled, | ||
| noStyle, | ||
| onChange, | ||
| submitting, | ||
| value, | ||
| hovered, | ||
| }) | ||
| AmPm({ disabled, minimal, onChange, submitting, value }) | ||
| } | ||
@@ -209,3 +249,3 @@ </div> | ||
| InputTimeStateless.propTypes = { | ||
| InputTime.propTypes = { | ||
| disabled: PropTypes.bool, | ||
@@ -225,38 +265,11 @@ input: PropTypes.shape({ | ||
| }), | ||
| noStyle: PropTypes.bool, | ||
| minimal: PropTypes.bool, | ||
| select24Hours: PropTypes.bool, | ||
| onMouseEnter: PropTypes.func, | ||
| onMouseLeave: PropTypes.func, | ||
| hovered: PropTypes.bool, | ||
| displayTimeColon: PropTypes.bool, | ||
| }; | ||
| InputTimeStateless.defaultProps = { | ||
| InputTime.defaultProps = { | ||
| meta: {}, | ||
| }; | ||
| class InputTime extends PseudoClassComponent { | ||
| render() { | ||
| const { children, ...rest } = this.props; | ||
| let hoveredChildren = children; | ||
| // string as children isn't clonable | ||
| if (React.isValidElement(children)) { | ||
| hoveredChildren = React.cloneElement( | ||
| children, | ||
| { hovered: this.state.hovered }, | ||
| ); | ||
| } | ||
| return ( | ||
| <InputTimeStateless | ||
| {...rest} | ||
| hovered={this.state.hovered} | ||
| onMouseEnter={() => this.handleMouseEnter()} | ||
| onMouseLeave={() => this.handleMouseLeave()} | ||
| > | ||
| {hoveredChildren} | ||
| </InputTimeStateless> | ||
| ); | ||
| } | ||
| } | ||
| export default InputTime; |
@@ -27,3 +27,3 @@ import React from 'react'; | ||
| )) | ||
| .add('noStyle', () => ( | ||
| .add('minimal', () => ( | ||
| <InputTime | ||
@@ -34,8 +34,7 @@ input={{ | ||
| }} | ||
| noStyle | ||
| minimal | ||
| /> | ||
| )) | ||
| .add('displayTimeColon', () => ( | ||
| .add('minimal with 24 hour selection', () => ( | ||
| <InputTime | ||
| displayTimeColon | ||
| input={{ | ||
@@ -45,11 +44,3 @@ onChange: action('on-change'), | ||
| }} | ||
| /> | ||
| )) | ||
| .add('noStyle with 24 hour selection', () => ( | ||
| <InputTime | ||
| input={{ | ||
| onChange: action('on-change'), | ||
| value: '', | ||
| }} | ||
| noStyle | ||
| minimal | ||
| select24Hours | ||
@@ -67,12 +58,2 @@ /> | ||
| )) | ||
| .add('noStyle with displayTimeColon', () => ( | ||
| <InputTime | ||
| displayTimeColon | ||
| input={{ | ||
| onChange: action('on-change'), | ||
| value: '', | ||
| }} | ||
| noStyle | ||
| /> | ||
| )) | ||
| .add('with value set', () => ( | ||
@@ -125,2 +106,21 @@ <InputTime | ||
| /> | ||
| )) | ||
| .add('displayTimeColon', () => ( | ||
| <InputTime | ||
| input={{ | ||
| onChange: action('on-change'), | ||
| value: '', | ||
| }} | ||
| displayTimeColon | ||
| /> | ||
| )) | ||
| .add('displayTimeColon minimal', () => ( | ||
| <InputTime | ||
| input={{ | ||
| onChange: action('on-change'), | ||
| value: '', | ||
| }} | ||
| displayTimeColon | ||
| minimal | ||
| /> | ||
| )); |
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import Select from '../Select'; | ||
@@ -38,21 +39,9 @@ const style = { | ||
| <div style={style}> | ||
| <select | ||
| <Select | ||
| disabled={submitting} | ||
| onChange={e => onChange({ ...value, day: e.target.value })} | ||
| style={chooseDaysStyle} | ||
| options={scheduleTypes} | ||
| value={value.day} | ||
| > | ||
| <optgroup label="Choose days"> | ||
| { | ||
| scheduleTypes.map(type => | ||
| <option | ||
| key={`type${type.value}`} | ||
| value={type.value} | ||
| > | ||
| {type.name} | ||
| </option>, | ||
| ) | ||
| } | ||
| </optgroup> | ||
| </select> | ||
| label={'choose days'} | ||
| /> | ||
| </div> | ||
@@ -59,0 +48,0 @@ ); |
@@ -5,2 +5,4 @@ import React from 'react'; | ||
| const isNativeComponent = component => typeof component.type === 'string'; | ||
| class Link extends PseudoClassComponent { | ||
@@ -11,3 +13,4 @@ render() { | ||
| // string as children isn't clonable | ||
| if (React.isValidElement(children)) { | ||
| // also don't add `hover` prop to native components | ||
| if (React.isValidElement(children) && !isNativeComponent(children)) { | ||
| hoveredChildren = React.cloneElement( | ||
@@ -14,0 +17,0 @@ children, |
@@ -29,2 +29,4 @@ import React from 'react'; | ||
| onClick, | ||
| padding, | ||
| block, | ||
| }) => { | ||
@@ -35,2 +37,3 @@ const style = calculateStyles({ | ||
| fontFamily, | ||
| padding, | ||
| }, | ||
@@ -43,2 +46,5 @@ hovered: { | ||
| }, | ||
| block: { | ||
| display: 'block', | ||
| }, | ||
| focused: focusedStyle, | ||
@@ -49,2 +55,3 @@ }, { | ||
| focused, | ||
| block, | ||
| }); | ||
@@ -80,4 +87,11 @@ | ||
| onClick: PropTypes.func, | ||
| padding: PropTypes.string, | ||
| block: PropTypes.bool, | ||
| }; | ||
| Link.defaultProps = { | ||
| padding: '0', | ||
| block: false, | ||
| }; | ||
| export default Link; |
| { | ||
| "name": "@bufferapp/components", | ||
| "version": "0.5.23-beta02", | ||
| "version": "0.5.23-beta03", | ||
| "description": "A shared set of UI Components", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -6,7 +6,4 @@ import React, { Component } from 'react'; | ||
| static propTypes = { | ||
| children: PropTypes.node, | ||
| children: PropTypes.node.isRequired, | ||
| } | ||
| static defaultProps = { | ||
| children: undefined, | ||
| }; | ||
| constructor() { | ||
@@ -13,0 +10,0 @@ super(); |
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { calculateStyles } from '../lib/utils'; | ||
| import { | ||
| transparent, | ||
| mystic, | ||
| shuttleGray, | ||
| } from '../style/color'; | ||
@@ -13,56 +15,176 @@ import { | ||
| borderWidth, | ||
| borderWidthNumber, | ||
| } from '../style/border'; | ||
| import { | ||
| tooltip, | ||
| } from '../style/zIndex'; | ||
| import ArrowDownIcon from '../Icon/Icons/ArrowDownIcon'; | ||
| import ArrowUpIcon from '../Icon/Icons/ArrowUpIcon'; | ||
| const height = 2; | ||
| const defaultIconStyle = { | ||
| position: 'absolute', | ||
| top: '0.5rem', | ||
| right: '0.5rem', | ||
| pointerEvents: 'none', | ||
| }; | ||
| const selectWrapperStyle = { | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| flexDirection: 'row', | ||
| position: 'relative', | ||
| }; | ||
| const selectStyle = { | ||
| zIndex: tooltip, | ||
| height: '2rem', | ||
| paddingRight: '0.5rem', | ||
| paddingLeft: '0.5rem', | ||
| fontSize: fontSizeSmall, | ||
| background: transparent, | ||
| border: `${borderWidth} solid ${mystic}`, | ||
| borderRadius, | ||
| appearance: 'none', | ||
| WebkitAppearance: 'none', | ||
| MozAppearance: 'none', | ||
| const RangeIcon = () => | ||
| <div | ||
| style={{ | ||
| position: 'absolute', | ||
| top: borderWidth, | ||
| right: borderWidth, | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| pointerEvents: 'none', | ||
| height: `${height - (borderWidthNumber * 2)}rem`, | ||
| backgroundColor: '#fcfcfc', | ||
| borderLeft: `${borderWidth} solid ${mystic}`, | ||
| borderRadiusTopRight: borderRadius, | ||
| borderRadiusBottomRight: borderRadius, | ||
| width: '1rem', | ||
| alignItems: 'center', | ||
| }} | ||
| > | ||
| <div | ||
| style={{ | ||
| height: `${(height / 2) - (borderWidthNumber)}rem`, | ||
| }} | ||
| > | ||
| <ArrowUpIcon size={'small'} /> | ||
| </div> | ||
| <div | ||
| style={{ | ||
| height: `${(height / 2) - (borderWidthNumber)}rem`, | ||
| }} | ||
| > | ||
| <ArrowDownIcon size={'small'} /> | ||
| </div> | ||
| </div>; | ||
| const DefaultIcon = () => | ||
| <div style={defaultIconStyle}> | ||
| <ArrowDownIcon /> | ||
| </div>; | ||
| /* eslint-disable react/prop-types */ | ||
| const SelectIcon = ({ noStyle, rangeSelector }) => { | ||
| if (noStyle) { | ||
| return null; | ||
| } else if (rangeSelector) { | ||
| return ( | ||
| <RangeIcon /> | ||
| ); | ||
| } | ||
| return ( | ||
| <DefaultIcon /> | ||
| ); | ||
| }; | ||
| /* eslint-enable react/prop-types */ | ||
| const iconStyle = { | ||
| zIndex: 0, | ||
| display: 'flex', | ||
| marginLeft: '-1.5rem', | ||
| alignItems: 'center', | ||
| const Select = ({ | ||
| options, | ||
| onChange, | ||
| disabled, | ||
| noStyle, | ||
| label, | ||
| value, | ||
| centerText, | ||
| rangeSelector, | ||
| }) => { | ||
| const selectStyle = calculateStyles({ | ||
| default: { | ||
| height: `${height}rem`, | ||
| padding: '0 1.5rem 0 0.5rem', | ||
| fontSize: fontSizeSmall, | ||
| background: transparent, | ||
| border: `${borderWidth} solid ${mystic}`, | ||
| borderRadius, | ||
| appearance: 'none', | ||
| WebkitAppearance: 'none', | ||
| MozAppearance: 'none', | ||
| width: '100%', | ||
| color: shuttleGray, | ||
| }, | ||
| noStyle: { | ||
| height: 'auto', | ||
| border: 0, | ||
| background: 'transparent', | ||
| margin: 0, | ||
| padding: 0, | ||
| }, | ||
| centerText: { | ||
| textAlignLast: 'center', | ||
| paddingLeft: 0, | ||
| }, | ||
| rangeSelector: { | ||
| paddingRight: '1rem', | ||
| }, | ||
| }, { | ||
| noStyle, | ||
| centerText, | ||
| rangeSelector, | ||
| }); | ||
| return ( | ||
| <div style={selectWrapperStyle}> | ||
| <select | ||
| style={selectStyle} | ||
| onChange={onChange} | ||
| disabled={disabled} | ||
| aria-label={label} | ||
| value={value} | ||
| > | ||
| { | ||
| options.map(option => | ||
| <option key={option.value.toString()} value={option.value}> | ||
| {option.name} | ||
| </option>, | ||
| ) | ||
| } | ||
| </select> | ||
| <SelectIcon | ||
| noStyle={noStyle} | ||
| rangeSelector={rangeSelector} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; | ||
| const Select = ({ options }) => ( | ||
| <div style={selectWrapperStyle}> | ||
| <select style={selectStyle}> | ||
| { | ||
| options.map(option => | ||
| <option key={option.toString()}> | ||
| {option} | ||
| </option>, | ||
| ) | ||
| } | ||
| </select> | ||
| <span style={iconStyle}> | ||
| <ArrowDownIcon /> | ||
| </span> | ||
| </div> | ||
| ); | ||
| Select.propTypes = { | ||
| options: PropTypes.arrayOf(PropTypes.string).isRequired, | ||
| options: PropTypes.arrayOf(PropTypes.shape({ | ||
| value: PropTypes.oneOfType([ | ||
| PropTypes.string, | ||
| PropTypes.number, | ||
| ]), | ||
| name: PropTypes.oneOfType([ | ||
| PropTypes.string, | ||
| PropTypes.number, | ||
| ]), | ||
| })).isRequired, | ||
| onChange: PropTypes.func, | ||
| disabled: PropTypes.bool, | ||
| noStyle: PropTypes.bool, | ||
| label: PropTypes.string, | ||
| value: PropTypes.oneOfType([ | ||
| PropTypes.string, | ||
| PropTypes.number, | ||
| ]), | ||
| centerText: PropTypes.bool, | ||
| rangeSelector: PropTypes.bool, | ||
| }; | ||
| Select.defaultProps = { | ||
| onChange: () => {}, | ||
| disabled: false, | ||
| noStyle: false, | ||
| label: null, | ||
| value: undefined, | ||
| centerText: false, | ||
| rangeSelector: false, | ||
| }; | ||
| export default Select; |
| import React from 'react'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import { action } from '@storybook/addon-actions'; | ||
| import { checkA11y } from 'storybook-addon-a11y'; | ||
@@ -7,7 +8,7 @@ import Select from './index'; | ||
| const options = [ | ||
| 'London', | ||
| 'New York', | ||
| 'San Francisco', | ||
| 'Tokyo', | ||
| 'Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch', // http://www.fun-with-words.com/longest_place_names.html | ||
| { name: 'London', value: 'London' }, | ||
| { name: 'New York', value: 'New York' }, | ||
| { name: 'San Francisco', value: 'San Francisco' }, | ||
| { name: 'Tokyo', value: 'Tokyo' }, | ||
| { name: 'Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch', value: 'Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch' }, // http://www.fun-with-words.com/longest_place_names.html | ||
| ]; | ||
@@ -18,3 +19,78 @@ | ||
| .add('default', () => ( | ||
| <Select options={options} /> | ||
| <Select | ||
| options={options} | ||
| onChange={action('on-change')} | ||
| /> | ||
| )) | ||
| .add('with value set', () => ( | ||
| <Select | ||
| options={options} | ||
| value={'Tokyo'} | ||
| onChange={action('on-change')} | ||
| /> | ||
| )) | ||
| .add('noStyle', () => ( | ||
| <Select | ||
| options={options} | ||
| value={'Tokyo'} | ||
| onChange={action('on-change')} | ||
| noStyle | ||
| /> | ||
| )) | ||
| .add('short numbers', () => ( | ||
| <Select | ||
| options={[{ | ||
| name: 1, | ||
| value: 1, | ||
| }, { | ||
| name: 2, | ||
| value: 2, | ||
| }]} | ||
| value={2} | ||
| onChange={action('on-change')} | ||
| /> | ||
| )) | ||
| .add('center text', () => ( | ||
| <Select | ||
| options={[{ | ||
| name: 1, | ||
| value: 1, | ||
| }, { | ||
| name: 2, | ||
| value: 2, | ||
| }]} | ||
| value={2} | ||
| onChange={action('on-change')} | ||
| centerText | ||
| noStyle | ||
| /> | ||
| )) | ||
| .add('rangeSelector', () => ( | ||
| <Select | ||
| options={[{ | ||
| name: 1, | ||
| value: 1, | ||
| }, { | ||
| name: 2, | ||
| value: 2, | ||
| }]} | ||
| value={2} | ||
| onChange={action('on-change')} | ||
| rangeSelector | ||
| /> | ||
| )) | ||
| .add('rangeSelector centerText', () => ( | ||
| <Select | ||
| options={[{ | ||
| name: 1, | ||
| value: 1, | ||
| }, { | ||
| name: 2, | ||
| value: 2, | ||
| }]} | ||
| value={2} | ||
| onChange={action('on-change')} | ||
| centerText | ||
| rangeSelector | ||
| /> | ||
| )); |
@@ -8,7 +8,7 @@ import React from 'react'; | ||
| const options = [ | ||
| 'London', | ||
| 'New York', | ||
| 'San Francisco', | ||
| 'Tokyo', | ||
| 'Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch', // http://www.fun-with-words.com/longest_place_names.html | ||
| { name: 'London', value: 'London' }, | ||
| { name: 'New York', value: 'New York' }, | ||
| { name: 'San Francisco', value: 'San Francisco' }, | ||
| { name: 'Tokyo', value: 'Tokyo' }, | ||
| { name: 'Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch', value: 'Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch' }, // http://www.fun-with-words.com/longest_place_names.html | ||
| ]; | ||
@@ -15,0 +15,0 @@ return testComponentA11y(<Select options={options} />) |
@@ -1,3 +0,3 @@ | ||
| const borderNum = 0.063; | ||
| export const borderWidth = `${borderNum}rem`; | ||
| export const borderRadius = `${borderNum * 2}rem`; | ||
| export const borderWidthNumber = 0.063; | ||
| export const borderWidth = `${borderWidthNumber}rem`; | ||
| export const borderRadius = `${borderWidthNumber * 2}rem`; |
@@ -16,2 +16,3 @@ export const curiousBlue = '#168eea'; | ||
| export const geyser = '#ced7df'; | ||
| export const fillColor = '#eaeff2'; | ||
| export const mystic = '#e6ebef'; | ||
@@ -18,0 +19,0 @@ export const nevada = '#666c72'; |
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by2.62%
2061614
- Lines of code
- increased by2.83%
7525
No dependency changes