Unverified Commit b62cbfc9 authored by Tasso Evangelista's avatar Tasso Evangelista Committed by GitHub
Browse files

fix: Add missing ref support (#43)

* Update code snippets

* Fix eslint dependency error

* Add ref support to Button and ButtonGroup

* Add ref support for CheckBox, Icon, RadioButton, and ToggleSwitch

* Update jest-results

* Fix dependencies

* Add empty CHANGELOG
parent 42e123be
......@@ -13,12 +13,8 @@
" className,",
" ...props",
"}) {",
" return (",
" <div",
" className={useStyle(styles, '$1', {}, className)}",
" {...props}",
" />",
" );",
" const $3ClassName = useStyle(styles, '$2', {}, className);",
" return <div className={$3ClassName} {...props} />;",
"}"
],
},
......@@ -48,31 +44,40 @@
"import { storiesOf } from '@storybook/react';",
"import React from 'react';",
"",
"import { createPropsFromKnobs } from '../../helpers/storybook';",
"import { $1 } from './index';",
"",
"",
"const props = () => ({});",
"const props = createPropsFromKnobs({",
" ",
"});",
"",
"storiesOf('$2|$1', module)",
" .addDecorator(withKnobs)",
" .addDecorator(centered)",
" .addParameters({ jest: ['spec'] })",
" .add('default', () => (",
" .add('default', () =>",
" <$1 {...props()} />",
" ));"
" );"
],
},
"New component styles.scss": {
"scope": "scss",
"prefix": "fuselage-styles",
"body": [
":root {",
" --rcx-$2-color: var(--color-dark-900);",
"}",
"@import '../../helpers/mixins.scss';",
"@import '../../helpers/theme-var.scss';",
"@import '../../styles/color-palette.scss';",
"@import '../../styles/dimensions.scss';",
"@import '../../styles/typography.scss';",
"",
"\\$name: '$1';",
"",
"\\$default-theme: ();",
"",
".$1 {",
" color: var(--rcx-$2-color);",
"}"
" @include reset;",
"}",
],
},
}
{
"workbench.colorCustomizations": {
"editorWarning.foreground": "#00ff0030",
"editorError.foreground": "#ff0000ff",
"activityBar.background": "#65c89b",
"activityBar.foreground": "#15202b",
"activityBar.inactiveForeground": "#15202b99",
"activityBarBadge.background": "#945bc4",
"activityBarBadge.foreground": "#e7e7e7",
"titleBar.activeBackground": "#42b883",
"titleBar.inactiveBackground": "#42b88399",
"titleBar.activeForeground": "#15202b",
"titleBar.inactiveForeground": "#15202b99",
"statusBar.background": "#42b883",
"statusBarItem.hoverBackground": "#359268",
"statusBar.foreground": "#15202b"
},
"eslint.workingDirectories": [
{
"directory": "packages/fuselage",
......
{"numFailedTestSuites":0,"numFailedTests":0,"numPassedTestSuites":23,"numPassedTests":23,"numPendingTestSuites":0,"numPendingTests":0,"numRuntimeErrorTestSuites":0,"numTodoTests":0,"numTotalTestSuites":23,"numTotalTests":23,"openHandles":[],"snapshot":{"added":0,"didUpdate":false,"failure":false,"filesAdded":0,"filesRemoved":0,"filesUnmatched":0,"filesUpdated":0,"matched":0,"total":0,"unchecked":0,"uncheckedKeysByFile":[],"unmatched":0,"updated":0},"startTime":1565593666975,"success":true,"testResults":[{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565593669525,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Livechat.Admin/packages/fuselage/src/components/SideBar/Header/spec.js","startTime":1565593668213,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565593669639,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Livechat.Admin/packages/fuselage/src/components/SideBar/MenuItem/spec.js","startTime":1565593668333,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565593669641,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Livechat.Admin/packages/fuselage/src/components/Form/Description/spec.js","startTime":1565593668367,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565593669675,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Livechat.Admin/packages/fuselage/src/components/ButtonGroup/spec.js","startTime":1565593668313,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565593669720,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Livechat.Admin/packages/fuselage/src/components/Drawer/spec.js","startTime":1565593668330,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565593669756,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Livechat.Admin/packages/fuselage/src/components/ScrollableArea/spec.js","startTime":1565593668278,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565593669757,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Livechat.Admin/packages/fuselage/src/components/ToggleSwitch/spec.js","startTime":1565593668278,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565593669794,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Livechat.Admin/packages/fuselage/src/components/Form/Field/spec.js","startTime":1565593669544,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565593669882,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Livechat.Admin/packages/fuselage/src/components/SideBar/Menu/spec.js","startTime":1565593669668,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565593669891,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Livechat.Admin/packages/fuselage/src/components/Page/Header/spec.js","startTime":1565593669659,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565593669968,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Livechat.Admin/packages/fuselage/src/components/Page/spec.js","startTime":1565593669740,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565593670005,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Livechat.Admin/packages/fuselage/src/components/RadioButton/spec.js","startTime":1565593669805,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565593670020,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Livechat.Admin/packages/fuselage/src/components/Form/spec.js","startTime":1565593669775,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565593670024,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Livechat.Admin/packages/fuselage/src/components/TextInput/spec.js","startTime":1565593669703,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565593670040,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Livechat.Admin/packages/fuselage/src/components/Grid/spec.js","startTime":1565593669780,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565593670133,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Livechat.Admin/packages/fuselage/src/components/Form/Label/spec.js","startTime":1565593669902,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565593670156,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Livechat.Admin/packages/fuselage/src/components/SideBar/spec.js","startTime":1565593669892,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565593670196,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Livechat.Admin/packages/fuselage/src/components/CheckBox/spec.js","startTime":1565593669978,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565593670230,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Livechat.Admin/packages/fuselage/src/components/Tabs/spec.js","startTime":1565593670036,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565593670236,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Livechat.Admin/packages/fuselage/src/components/Form/Item/spec.js","startTime":1565593670049,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565593670267,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Livechat.Admin/packages/fuselage/src/components/Icon/spec.js","startTime":1565593670055,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565593670292,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Livechat.Admin/packages/fuselage/src/components/Button/spec.js","startTime":1565593670143,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565593670303,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Livechat.Admin/packages/fuselage/src/components/Tab/spec.js","startTime":1565593670055,"status":"passed","summary":""}],"wasInterrupted":false}
\ No newline at end of file
{"numFailedTestSuites":0,"numFailedTests":0,"numPassedTestSuites":23,"numPassedTests":23,"numPendingTestSuites":0,"numPendingTests":0,"numRuntimeErrorTestSuites":0,"numTodoTests":0,"numTotalTestSuites":23,"numTotalTests":23,"openHandles":[],"snapshot":{"added":0,"didUpdate":false,"failure":false,"filesAdded":0,"filesRemoved":0,"filesUnmatched":0,"filesUpdated":0,"matched":0,"total":0,"unchecked":0,"uncheckedKeysByFile":[],"unmatched":0,"updated":0},"startTime":1565753719442,"success":true,"testResults":[{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565753730200,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Drawer/spec.js","startTime":1565753724004,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565753730204,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/ToggleSwitch/spec.js","startTime":1565753724004,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565753730212,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/ButtonGroup/spec.js","startTime":1565753724004,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565753730214,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/SideBar/MenuItem/spec.js","startTime":1565753724004,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565753730214,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Form/Description/spec.js","startTime":1565753724006,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565753730218,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/ScrollableArea/spec.js","startTime":1565753724002,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565753730584,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/SideBar/Header/spec.js","startTime":1565753724004,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565753731727,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Form/Label/spec.js","startTime":1565753730234,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565753731729,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/SideBar/Menu/spec.js","startTime":1565753730250,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565753731765,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/TextInput/spec.js","startTime":1565753730292,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565753731816,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/RadioButton/spec.js","startTime":1565753730233,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565753732037,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/CheckBox/spec.js","startTime":1565753730599,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565753732264,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Page/Header/spec.js","startTime":1565753730238,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565753732271,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Button/spec.js","startTime":1565753731775,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565753732269,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Icon/spec.js","startTime":1565753731828,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565753732839,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Form/Item/spec.js","startTime":1565753731742,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565753732849,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/SideBar/spec.js","startTime":1565753731739,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565753732973,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Grid/spec.js","startTime":1565753732045,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565753733136,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Form/Field/spec.js","startTime":1565753730236,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565753733328,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Tabs/spec.js","startTime":1565753732297,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565753733590,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Page/spec.js","startTime":1565753732285,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565753733643,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Form/spec.js","startTime":1565753732307,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"renders without crashing","location":null,"status":"passed","title":"renders without crashing"}],"endTime":1565753733684,"message":"","name":"/home/tasso/Projetos/RocketChat/Rocket.Chat.Fuselage/packages/fuselage/src/components/Tab/spec.js","startTime":1565753732846,"status":"passed","summary":""}],"wasInterrupted":false}
\ No newline at end of file
......@@ -39,6 +39,7 @@
},
"devDependencies": {
"@babel/plugin-transform-runtime": "^7.5.0",
"@rocket.chat/eslint-config": "^0.4.0",
"@storybook/addon-a11y": "^5.0.11",
"@storybook/addon-actions": "^5.0.11",
"@storybook/addon-backgrounds": "^5.0.11",
......@@ -57,8 +58,9 @@
"babel-loader": "^8.0.6",
"css-vars-ponyfill": "^2.0.2",
"cssnano": "^4.1.10",
"eslint": "^6.0.1",
"eslint-plugin-react": "^7.13.0",
"eslint": "^6.1.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-react": "^7.14.3",
"final-form": "^4.16.1",
"husky": "^2.3.0",
"identity-obj-proxy": "^3.0.0",
......
......@@ -4,7 +4,7 @@ import { useStyle } from '../../hooks/styles';
import styles from './styles.scss';
export function Button({
export const Button = React.forwardRef(function Button({
as: Component = 'button',
className,
danger,
......@@ -14,7 +14,7 @@ export function Button({
small,
square,
...props
}) {
}, ref) {
const buttonClassName = useStyle(styles, 'rcx-button', {
danger,
ghost,
......@@ -24,5 +24,5 @@ export function Button({
primary,
}, className);
return <Component className={buttonClassName} {...props} />;
}
return <Component className={buttonClassName} ref={ref} {...props} />;
});
......@@ -4,20 +4,22 @@ import { useStyle } from '../../hooks/styles';
import styles from './styles.scss';
export function ButtonGroup({
export const ButtonGroup = React.forwardRef(function ButtonGroup({
align,
className,
invisible,
stretch,
vertical,
wrap,
...props
}) {
}, ref) {
const buttonGroupClassName = useStyle(styles, 'rcx-button-group', {
align,
invisible,
stretch,
vertical,
wrap,
}, className);
return <div className={buttonGroupClassName} role='group' {...props}/>;
}
return <div className={buttonGroupClassName} role='group' ref={ref} {...props}/>;
});
......@@ -27,12 +27,15 @@ storiesOf('Collections|ButtonGroup', module)
</Document>);
const props = createPropsFromKnobs({
blockStretch: false,
hidden: false,
invisible: false,
stretch: false,
vertical: false,
wrap: false,
align: [null, {
start: 'start',
end: 'end',
}],
});
const Buttons = ({ count }) => new Array(count).fill(undefined).map((_, i) =>
......
......@@ -46,4 +46,12 @@ $default-theme: (
align-items: stretch;
}
}
&--align-start {
justify-content: flex-start;
}
&--align-end {
justify-content: flex-end;
}
}
import React, { useEffect, useRef } from 'react';
import React, { forwardRef, useEffect, useRef } from 'react';
import { useStyle } from '../../hooks/styles';
import styles from './styles.scss';
import { useMergedRefs } from '../../hooks/useMergedRefs';
export function CheckBox({
export const CheckBox = forwardRef(function CheckBox({
className,
indeterminate,
invisible,
label,
...props
}) {
const ref = useRef();
}, ref) {
const innerRef = useRef();
const mergedRef = useMergedRefs(ref, innerRef);
const checkBoxWrapperClassName = useStyle(styles, 'rcx-check-box__wrapper', {
disabled: props.disabled,
invisible,
......@@ -21,14 +24,14 @@ export function CheckBox({
const checkBoxLabelClassName = useStyle(styles, 'rcx-check-box__label');
useEffect(() => {
ref.current.indeterminate = indeterminate;
innerRef.current.indeterminate = indeterminate;
}, [indeterminate]);
return <label className={checkBoxWrapperClassName} hidden={props.hidden}>
<input type='checkbox' className={checkBoxInputClassName} ref={ref} {...props} />
<input type='checkbox' className={checkBoxInputClassName} ref={mergedRef} {...props} />
<span className={checkBoxFakeClassName} />
{label && <span className={checkBoxLabelClassName}>
{label}
</span>}
</label>;
}
});
......@@ -9,12 +9,12 @@ import styles from './styles.scss';
const mapNames = Object.entries(names).reduce((map, [symbol, name]) => Object.assign(map, { [name]: symbol }), {});
export function Icon({
export const Icon = React.forwardRef(function Icon({
name,
className,
...props
}) {
}, ref) {
const iconClassName = useStyle(styles, 'rcx-icon');
return <i className={iconClassName} data-char={characters[mapNames[name]]} {...props} />;
}
return <i className={iconClassName} data-char={characters[mapNames[name]]} ref={ref} {...props} />;
});
......@@ -4,12 +4,12 @@ import { useStyle } from '../../hooks/styles';
import styles from './styles.scss';
export function RadioButton({
export const RadioButton = React.forwardRef(function RadioButton({
className,
invisible,
label,
...props
}) {
}, ref) {
const radioButtonWrapperClassName = useStyle(styles, 'rcx-radio-button__wrapper', {
disabled: props.disabled,
invisible,
......@@ -19,10 +19,10 @@ export function RadioButton({
const radioButtonLabelClassName = useStyle(styles, 'rcx-radio-button__label');
return <label className={radioButtonWrapperClassName} hidden={props.hidden}>
<input type='radio' className={radioButtonInputClassName} {...props} />
<input type='radio' className={radioButtonInputClassName} ref={ref} {...props} />
<span className={radioButtonFakeClassName} />
{label && <span className={radioButtonLabelClassName}>
{label}
</span>}
</label>;
}
});
......@@ -4,11 +4,11 @@ import { useStyle } from '../../hooks/styles';
import styles from './styles.scss';
export function ToggleSwitch({
export const ToggleSwitch = React.forwardRef(function ToggleSwitch({
className,
invisible,
...props
}) {
}, ref) {
const toggleSwitchWrapperClassName = useStyle(styles, 'rcx-toggle-switch__wrapper', {
disabled: props.disabled,
invisible,
......@@ -17,7 +17,7 @@ export function ToggleSwitch({
const toggleSwitchFakeClassName = useStyle(styles, 'rcx-toggle-switch__fake');
return <label className={toggleSwitchWrapperClassName} hidden={props.hidden}>
<input type='checkbox' className={toggleSwitchInputClassName} {...props} />
<input type='checkbox' className={toggleSwitchInputClassName} ref={ref} {...props} />
<span className={toggleSwitchFakeClassName} />
</label>;
}
});
export const useMergedRefs = (...refs) => (refValue) => {
refs.filter(Boolean).forEach((ref) => {
if (typeof ref === 'function') {
ref(refValue);
return;
}
ref.current = refValue;
});
};
......@@ -22,6 +22,9 @@
"lint": "eslint ."
},
"devDependencies": {
"@rocket.chat/eslint-config": "^0.4.0",
"eslint": "^6.1.0",
"eslint-plugin-import": "^2.18.2",
"glob": "^7.1.4",
"is-valid-identifier": "^2.0.2",
"rimraf": "^2.6.3",
......
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment