From 197c8aa3c0ed3b0c2016932856d913160c2b7412 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 5 Jun 2019 17:55:36 +0200 Subject: [PATCH 1/5] chore(eslint): add lint rule to disable access modifiers --- build/gulp/plugins/util/docgen.ts | 22 ++-- build/gulp/tasks/test-projects/cra/App.tsx | 2 +- .../ComponentControlsCopyLink.tsx | 18 +-- .../ComponentDoc/ComponentExamples.tsx | 14 +-- docs/src/components/CopyToClipboard.tsx | 2 +- docs/src/components/ExternalExampleLayout.tsx | 2 +- docs/src/components/Sidebar/Sidebar.tsx | 4 +- docs/src/prototypes/IconViewer/index.tsx | 2 +- .../prototypes/chatPane/chatPaneContent.tsx | 10 +- .../prototypes/chatPane/chatPaneHeader.tsx | 8 +- .../prototypes/chatPane/services/dataMock.ts | 21 ++-- .../mentions/PortalAtCursorPosition.ts | 10 +- packages/eslint-plugin/index.js | 5 + .../no-visibility-modifiers/index.js | 117 ++++++++++++++++++ packages/eslint-plugin/package.json | 10 ++ packages/internal-tooling/eslint/index.js | 7 +- packages/internal-tooling/package.json | 7 +- .../src/lib/RefStack.ts | 8 +- .../react-component-ref/src/RefForward.tsx | 2 +- .../src/components/Accordion/Accordion.tsx | 22 ++-- .../components/Accordion/AccordionContent.tsx | 2 +- .../components/Accordion/AccordionTitle.tsx | 4 +- .../src/components/Attachment/Attachment.tsx | 10 +- .../react/src/components/Button/Button.tsx | 18 +-- .../src/components/Button/ButtonGroup.tsx | 12 +- packages/react/src/components/Chat/Chat.tsx | 2 +- .../react/src/components/Chat/ChatItem.tsx | 2 +- .../react/src/components/Chat/ChatMessage.tsx | 4 +- .../src/components/Dropdown/Dropdown.tsx | 86 +++++++------ .../src/components/Dropdown/DropdownItem.tsx | 8 +- .../Dropdown/DropdownSearchInput.tsx | 10 +- .../Dropdown/DropdownSelectedItem.tsx | 10 +- packages/react/src/components/Flex/Flex.tsx | 2 +- packages/react/src/components/Form/Form.tsx | 16 +-- .../react/src/components/Form/FormField.tsx | 12 +- packages/react/src/components/Grid/Grid.tsx | 10 +- packages/react/src/components/Input/Input.tsx | 10 +- packages/react/src/components/List/List.tsx | 4 +- .../react/src/components/List/ListItem.tsx | 2 +- .../react/src/components/Menu/MenuItem.tsx | 28 ++--- packages/react/src/components/Popup/Popup.tsx | 2 +- .../src/components/Popup/PopupContent.tsx | 14 +-- .../react/src/components/Portal/Portal.tsx | 28 ++--- .../src/components/Provider/Provider.tsx | 2 +- .../src/components/RadioGroup/RadioGroup.tsx | 14 +-- .../components/RadioGroup/RadioGroupItem.tsx | 2 +- .../src/components/Reaction/Reaction.tsx | 4 +- .../src/components/Reaction/ReactionGroup.tsx | 10 +- packages/react/src/components/Tree/Tree.tsx | 2 +- .../react/src/components/Tree/TreeItem.tsx | 2 +- .../react/src/components/Tree/TreeTitle.tsx | 4 +- packages/react/src/lib/UIComponent.tsx | 10 +- .../FocusHandling/FocusContainer.ts | 33 ++--- .../accessibility/FocusZone/AutoFocusZone.tsx | 8 +- .../accessibility/FocusZone/FocusTrapZone.tsx | 38 +++--- .../lib/accessibility/FocusZone/FocusZone.tsx | 66 +++++----- .../react/test/specs/behaviors/testHelper.tsx | 26 ++-- .../specs/commonTests/stylesFunction-test.tsx | 8 +- .../test/specs/lib/FocusTrapZone-test.tsx | 6 +- yarn.lock | 60 ++++----- 60 files changed, 505 insertions(+), 379 deletions(-) create mode 100644 packages/eslint-plugin/index.js create mode 100644 packages/eslint-plugin/no-visibility-modifiers/index.js create mode 100644 packages/eslint-plugin/package.json diff --git a/build/gulp/plugins/util/docgen.ts b/build/gulp/plugins/util/docgen.ts index 1817bbe2dc..5987e8f9f6 100644 --- a/build/gulp/plugins/util/docgen.ts +++ b/build/gulp/plugins/util/docgen.ts @@ -207,15 +207,15 @@ const getComponentSymbolOfType = (type: MaybeIntersectType) => { } export class Parser { - private checker: ts.TypeChecker - private propFilter: PropFilter + checker: ts.TypeChecker + propFilter: PropFilter constructor(program: ts.Program, opts: ParserOptions) { this.checker = program.getTypeChecker() this.propFilter = defaultPropFilter } - public getComponentInfo( + getComponentInfo( symbolParam: ts.Symbol, source: ts.SourceFile, componentNameResolver: ComponentNameResolver = () => undefined, @@ -294,7 +294,7 @@ export class Parser { return null } - public extractPropsFromTypeIfStatelessComponent(type: ts.Type): ts.Symbol | null { + extractPropsFromTypeIfStatelessComponent(type: ts.Type): ts.Symbol | null { const callSignatures = type.getCallSignatures() if (callSignatures.length) { @@ -318,7 +318,7 @@ export class Parser { return null } - public extractPropsFromTypeIfStatefulComponent(type: ts.Type): ts.Symbol | null { + extractPropsFromTypeIfStatefulComponent(type: ts.Type): ts.Symbol | null { const constructSignatures = type.getConstructSignatures() if (constructSignatures.length) { @@ -338,7 +338,7 @@ export class Parser { return null } - public getPropsInfo(propsObj: ts.Symbol, defaultProps: StringIndexedObject = {}): Props { + getPropsInfo(propsObj: ts.Symbol, defaultProps: StringIndexedObject = {}): Props { if (!propsObj.valueDeclaration) { return {} } @@ -383,7 +383,7 @@ export class Parser { return result } - public findDocComment(symbol: ts.Symbol): JSDoc { + findDocComment(symbol: ts.Symbol): JSDoc { const comment = this.getFullJsDocComment(symbol) if (comment.fullComment) { return comment @@ -407,7 +407,7 @@ export class Parser { * though TypeScript has broken down the JsDoc comment into plain * text and JsDoc tags. */ - public getFullJsDocComment(symbol: ts.Symbol): JSDoc { + getFullJsDocComment(symbol: ts.Symbol): JSDoc { // in some cases this can be undefined (Pick) if (symbol.getDocumentationComment === undefined) { return defaultJSDoc @@ -441,7 +441,7 @@ export class Parser { } } - public extractDefaultPropsFromComponent(symbol: ts.Symbol, source: ts.SourceFile) { + extractDefaultPropsFromComponent(symbol: ts.Symbol, source: ts.SourceFile) { let possibleStatements = source.statements // ensure that name property is available .filter(stmt => !!(stmt as ts.ClassDeclaration).name) @@ -513,7 +513,7 @@ export class Parser { return {} } - public getLiteralValueFromPropertyAssignment(property: ts.PropertyAssignment): string | null { + getLiteralValueFromPropertyAssignment(property: ts.PropertyAssignment): string | null { let { initializer } = property // Shorthand properties, so inflect their actual value @@ -559,7 +559,7 @@ export class Parser { } } - public getPropMap(properties: ts.NodeArray): StringIndexedObject { + getPropMap(properties: ts.NodeArray): StringIndexedObject { const propMap = properties.reduce( (acc, property) => { if (ts.isSpreadAssignment(property) || !property.name) { diff --git a/build/gulp/tasks/test-projects/cra/App.tsx b/build/gulp/tasks/test-projects/cra/App.tsx index ab350e653f..ad08bca953 100644 --- a/build/gulp/tasks/test-projects/cra/App.tsx +++ b/build/gulp/tasks/test-projects/cra/App.tsx @@ -16,7 +16,7 @@ import { import * as React from 'react' class App extends React.Component { - public render() { + render() { return (
diff --git a/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCopyLink.tsx b/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCopyLink.tsx index 62ead5aa3f..9d927b1a54 100644 --- a/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCopyLink.tsx +++ b/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCopyLink.tsx @@ -3,24 +3,24 @@ import ComponentButton from './ComponentButton' import * as _ from 'lodash' export default class ComponentControlsCopyLink extends React.Component { - private mounted: boolean - private readonly btnLabel = 'Permalink' + mounted: boolean + readonly btnLabel = 'Permalink' - public state: any = {} + state: any = {} - public shouldComponentUpdate(nextProps, nextState) { + shouldComponentUpdate(nextProps, nextState) { return this.state.active !== nextState.active } - public componentDidMount() { + componentDidMount() { this.mounted = true } - public componentWillUnmount() { + componentWillUnmount() { this.mounted = false } - public render() { + render() { const { active } = this.state return ( @@ -32,7 +32,7 @@ export default class ComponentControlsCopyLink extends React.Component ) } - private handleClick = e => { + handleClick = e => { e.preventDefault() _.invoke(this.props, 'onClick', e, this.props) @@ -40,5 +40,5 @@ export default class ComponentControlsCopyLink extends React.Component setTimeout(this.resetActive, 3000) } - private resetActive = () => this.mounted && this.setState({ active: false }) + resetActive = () => this.mounted && this.setState({ active: false }) } diff --git a/docs/src/components/ComponentDoc/ComponentExamples.tsx b/docs/src/components/ComponentDoc/ComponentExamples.tsx index 64e8e04bfe..c8aa13ed32 100644 --- a/docs/src/components/ComponentDoc/ComponentExamples.tsx +++ b/docs/src/components/ComponentDoc/ComponentExamples.tsx @@ -13,11 +13,11 @@ interface ComponentExamplesProps { } export default class ComponentExamples extends React.Component { - public static propTypes = { + static propTypes = { displayName: PropTypes.string.isRequired, } - public render() { + render() { return this.renderExamples() || this.renderMissingExamples() } @@ -29,7 +29,7 @@ export default class ComponentExamples extends React.Component { + renderExamples = (): JSX.Element | null => { const { displayName } = this.props // rule #1 @@ -56,7 +56,7 @@ export default class ComponentExamples extends React.Component { + renderMissingExamples = () => { const { displayName } = this.props return this.renderElementWrappedInGrid( @@ -66,7 +66,7 @@ export default class ComponentExamples extends React.Component { + renderMissingShorthandExamples = (missingPaths: string[]) => { return this.renderElementWrappedInGrid(
Looks like we're missing examples at following paths:
@@ -75,9 +75,9 @@ export default class ComponentExamples extends React.Component + renderElementWrappedInGrid = (Element: JSX.Element) => - private getMissingExamplePaths(displayName: string, allPaths: string[]): string[] { + getMissingExamplePaths(displayName: string, allPaths: string[]): string[] { const examplesPattern = `\./${displayName}/[\\w/]+Example` const [normalExtension, shorthandExtension] = [ componentAPIs.children.fileSuffix, diff --git a/docs/src/components/CopyToClipboard.tsx b/docs/src/components/CopyToClipboard.tsx index 1f35f83a4a..260197a84b 100644 --- a/docs/src/components/CopyToClipboard.tsx +++ b/docs/src/components/CopyToClipboard.tsx @@ -16,7 +16,7 @@ class CopyToClipboard extends React.Component { + getTheme = (): ThemeInput => { const { themeName } = this.state const theme: ThemeInput = (themeName && themes[themeName]) || {} diff --git a/docs/src/components/Sidebar/Sidebar.tsx b/docs/src/components/Sidebar/Sidebar.tsx index 36ce400d27..8144930ed9 100644 --- a/docs/src/components/Sidebar/Sidebar.tsx +++ b/docs/src/components/Sidebar/Sidebar.tsx @@ -52,7 +52,7 @@ class Sidebar extends React.Component { this._searchInput = (findDOMNode(this) as any).querySelector('.ui.input input') } - private handleDocumentKeyDown = e => { + handleDocumentKeyDown = e => { const code = keyboardKey.getCode(e) const isAZ = code >= 65 && code <= 90 const hasModifier = e.altKey || e.ctrlKey || e.metaKey @@ -61,7 +61,7 @@ class Sidebar extends React.Component { if (!hasModifier && isAZ && bodyHasFocus) this._searchInput.focus() } - private handleItemClick = () => { + handleItemClick = () => { const { query } = this.state if (query) this.setState({ query: '' }) diff --git a/docs/src/prototypes/IconViewer/index.tsx b/docs/src/prototypes/IconViewer/index.tsx index cbfd305a1e..b9ca88d516 100644 --- a/docs/src/prototypes/IconViewer/index.tsx +++ b/docs/src/prototypes/IconViewer/index.tsx @@ -33,7 +33,7 @@ const renderStardustIconName = (icon, isOutline = false) => { } class IconViewerExample extends React.Component { - private readonly iconFilters = { + readonly iconFilters = { All: () => true, Exported: (icon: TeamsProcessedSvgIconSpec) => icon.exportedAs, 'Not Exported': (icon: TeamsProcessedSvgIconSpec) => !icon.exportedAs, diff --git a/docs/src/prototypes/chatPane/chatPaneContent.tsx b/docs/src/prototypes/chatPane/chatPaneContent.tsx index b555df6f08..3c4bef365b 100644 --- a/docs/src/prototypes/chatPane/chatPaneContent.tsx +++ b/docs/src/prototypes/chatPane/chatPaneContent.tsx @@ -9,7 +9,7 @@ import chatProtoStyle from './chatProtoStyle' export type ChatPaneContainerProps = Props<{ chat: ChatData }> class ChatPaneContainer extends React.PureComponent { - public render() { + render() { const { chat } = this.props const items = this.generateChatItems(chat) @@ -35,7 +35,7 @@ class ChatPaneContainer extends React.PureComponent { ) } - private generateChatItems(chat: ChatData): JSX.Element[] { + generateChatItems(chat: ChatData): JSX.Element[] { return generateChatProps(chat).map( ({ mine, gutter, message: { itemType, ...props } }, index) => { const ElementType = this.getElementType(itemType) @@ -73,7 +73,7 @@ class ChatPaneContainer extends React.PureComponent { ) } - private getElementType = (itemType: ChatItemTypes): React.ElementType => { + getElementType = (itemType: ChatItemTypes): React.ElementType => { switch (itemType) { case ChatItemTypes.message: return Chat.Message @@ -82,13 +82,13 @@ class ChatPaneContainer extends React.PureComponent { } } - private handleScrollRef(scrollRef: Scrollbars) { + handleScrollRef(scrollRef: Scrollbars) { if (scrollRef) { scrollRef.scrollToBottom() } } - private getMessagePreviewForScreenReader(props) { + getMessagePreviewForScreenReader(props) { /* Show the first 44 characters from the message, reasons: - as NVDA splits it into 2 lines if more is shown - for announcements feature, messaging team went with 44 characters but that was not based on loc issues but some UI real estate issue. */ diff --git a/docs/src/prototypes/chatPane/chatPaneHeader.tsx b/docs/src/prototypes/chatPane/chatPaneHeader.tsx index a648c37cad..c4097b4429 100644 --- a/docs/src/prototypes/chatPane/chatPaneHeader.tsx +++ b/docs/src/prototypes/chatPane/chatPaneHeader.tsx @@ -9,7 +9,7 @@ export interface ChatPaneHeaderProps { } class ChatPaneHeader extends React.PureComponent { - public render() { + render() { return ( {this.renderBanner()} @@ -19,7 +19,7 @@ class ChatPaneHeader extends React.PureComponent { ) } - private renderBanner(): React.ReactElement { + renderBanner(): React.ReactElement { return ( { ) } - private renderMainArea(): React.ReactElement { + renderMainArea(): React.ReactElement { const { chat } = this.props return ( @@ -74,7 +74,7 @@ class ChatPaneHeader extends React.PureComponent { ) } - private renderHeaderButtons(): React.ReactElement { + renderHeaderButtons(): React.ReactElement { return (
= new Map() - private chatMessages: MessageData[] = [] - public chat: ChatData + userIds: string[] = [] + usersMap: Map = new Map() + chatMessages: MessageData[] = [] + chat: ChatData + options: ChatOptions constructor( - private options: ChatOptions = { + options: ChatOptions = { userCount: ChatMock.defaultCount, msgCount: ChatMock.defaultCount, }, ) { + this.options = options + if (this.options.userCount < ChatMock.minUserCount) { throw `[ChatMock]: A chat has a minimum of ${ChatMock.minUserCount} users` } @@ -81,7 +84,7 @@ class ChatMock { } } - private getRandomUser(max: number = this.usersMap.size - 1): UserData { + getRandomUser(max: number = this.usersMap.size - 1): UserData { return this.usersMap.get(this.userIds[random.number({ max, precision: 1 })]) } } diff --git a/docs/src/prototypes/mentions/PortalAtCursorPosition.ts b/docs/src/prototypes/mentions/PortalAtCursorPosition.ts index 6469e2b5d7..7ffd064ad6 100644 --- a/docs/src/prototypes/mentions/PortalAtCursorPosition.ts +++ b/docs/src/prototypes/mentions/PortalAtCursorPosition.ts @@ -8,17 +8,17 @@ export interface PortalAtCursorPositionProps { } export class PortalAtCursorPosition extends React.Component { - private mountNodeInstance: HTMLElement = null + mountNodeInstance: HTMLElement = null static defaultProps = { mountNodeId: 'portal-at-cursor-position', } - public componentWillUnmount() { + componentWillUnmount() { this.removeMountNode() } - public render() { + render() { const { children, open } = this.props this.setupMountNode() @@ -27,7 +27,7 @@ export class PortalAtCursorPosition extends React.Component { + setupMountNode = () => { const { mountNodeId, open } = this.props if (open) { @@ -37,7 +37,7 @@ export class PortalAtCursorPosition extends React.Component { + removeMountNode = () => { if (this.mountNodeInstance) { removeElement(this.mountNodeInstance) this.mountNodeInstance = null diff --git a/packages/eslint-plugin/index.js b/packages/eslint-plugin/index.js new file mode 100644 index 0000000000..15aea70af9 --- /dev/null +++ b/packages/eslint-plugin/index.js @@ -0,0 +1,5 @@ +module.exports = { + rules: { + 'no-visibility-modifiers': require('./no-visibility-modifiers'), + }, +} diff --git a/packages/eslint-plugin/no-visibility-modifiers/index.js b/packages/eslint-plugin/no-visibility-modifiers/index.js new file mode 100644 index 0000000000..6690f5b1ca --- /dev/null +++ b/packages/eslint-plugin/no-visibility-modifiers/index.js @@ -0,0 +1,117 @@ +const util = require('@typescript-eslint/eslint-plugin/dist/util') +const { AST_NODE_TYPES, ESLintUtils } = require('@typescript-eslint/experimental-utils') + +const createRule = ESLintUtils.RuleCreator( + name => + `https://github.com/stardust-ui/react/tree/master/packages/internal-tooling/eslint/${name}.js`, +) + +module.exports = createRule({ + name: 'no-visibility-modifiers', + meta: { + type: 'problem', + docs: { + description: 'Require omit modifiers on class properties and methods', + category: 'Best Practices', + recommended: 'error', + }, + messages: { + presentModifier: 'Present accessibility modifier on {{type}} {{name}}.', + }, + schema: [], + }, + defaultOptions: [], + create(context) { + const sourceCode = context.getSourceCode() + + /** + * Generates the report for rule violations + */ + function reportIssue(messageId, nodeType, node, nodeName) { + context.report({ + node, + messageId, + data: { + type: nodeType, + name: nodeName, + }, + }) + } + + /** + * Checks if a method declaration has an accessibility modifier. + * @param methodDefinition The node representing a MethodDefinition. + */ + function checkMethodAccessibilityModifier(methodDefinition) { + let nodeType = 'method definition' + switch (methodDefinition.kind) { + case 'method': + break + case 'constructor': + break + case 'get': + case 'set': + nodeType = `${methodDefinition.kind} property accessor` + break + } + + if (util.isTypeScriptFile(context.getFilename())) { + const methodName = util.getNameFromClassMember(methodDefinition, sourceCode) + + if (!!methodDefinition.accessibility) { + reportIssue('presentModifier', nodeType, methodDefinition, methodName) + } + } + } + + /** + * Checks if property has an accessibility modifier. + * @param classProperty The node representing a ClassProperty. + */ + function checkPropertyAccessibilityModifier(classProperty) { + const nodeType = 'class property' + + if (util.isTypeScriptFile(context.getFilename())) { + const propertyName = util.getNameFromPropertyName(classProperty.key) + + if (!!classProperty.accessibility) { + reportIssue('presentModifier', nodeType, classProperty, propertyName) + } + } + } + + /** + * Checks that the parameter property has the desired accessibility modifiers set. + * @param {TSESTree.TSParameterProperty} node The node representing a Parameter Property + */ + function checkParameterPropertyAccessibilityModifier(node) { + const nodeType = 'parameter property' + + if (util.isTypeScriptFile(context.getFilename())) { + // HAS to be an identifier or assignment or TSC will throw + if ( + node.parameter.type !== AST_NODE_TYPES.Identifier && + node.parameter.type !== AST_NODE_TYPES.AssignmentPattern + ) { + return + } + + const nodeName = + node.parameter.type === AST_NODE_TYPES.Identifier + ? node.parameter.name + : // has to be an Identifier or TSC will throw an error + node.parameter.left.name + + if (!!node.accessibility) { + reportIssue('presentModifier', nodeType, node, nodeName) + } + } + } + + return { + TSParameterProperty: checkParameterPropertyAccessibilityModifier, + ClassProperty: checkPropertyAccessibilityModifier, + MethodDefinition: checkMethodAccessibilityModifier, + } + }, +}) diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json new file mode 100644 index 0000000000..30b63e6e5a --- /dev/null +++ b/packages/eslint-plugin/package.json @@ -0,0 +1,10 @@ +{ + "name": "@stardust-ui/eslint-plugin", + "version": "0.31.0", + "files": [ + "no-visibility-modifiers" + ], + "publishConfig": { + "access": "public" + } +} diff --git a/packages/internal-tooling/eslint/index.js b/packages/internal-tooling/eslint/index.js index 45593566cd..36efdf0ad4 100644 --- a/packages/internal-tooling/eslint/index.js +++ b/packages/internal-tooling/eslint/index.js @@ -1,18 +1,19 @@ module.exports = { - extends: ['airbnb', 'plugin:prettier/recommended'], + extends: ['airbnb', 'prettier'], parser: '@typescript-eslint/parser', - plugins: ['@typescript-eslint', 'jest', 'import', 'prettier', 'react-hooks'], + plugins: ['@typescript-eslint', 'jest', 'import', 'react-hooks', '@stardust-ui'], env: { browser: true, 'jest/globals': true, }, rules: { + '@stardust-ui/no-visibility-modifiers': 'error', + // False positive on arg types: // https://github.com/typescript-eslint/typescript-eslint/issues/46 '@typescript-eslint/no-unused-vars': ['error', { args: 'none' }], 'import/no-unresolved': 'off', - 'prettier/prettier': 'error', 'react/jsx-filename-extension': ['error', { extensions: ['.js', '.tsx'] }], 'no-shadow': 'off', // https://github.com/stardust-ui/react/pull/1261#pullrequestreview-231005092 'no-unused-vars': 'off', // we use @typescript-eslint/no-unused-vars instead diff --git a/packages/internal-tooling/package.json b/packages/internal-tooling/package.json index f1b80ec5d7..00753d4639 100644 --- a/packages/internal-tooling/package.json +++ b/packages/internal-tooling/package.json @@ -11,8 +11,10 @@ "@babel/preset-typescript": "^7.3.3", "@types/jest": "^24.0.11", "@types/jest-axe": "^2.2.3", - "@typescript-eslint/eslint-plugin": "^1.6.0", - "@typescript-eslint/parser": "^1.6.0", + "@typescript-eslint/eslint-plugin": "^1.9.0", + "@typescript-eslint/experimental-utils": "^1.9.0", + "@typescript-eslint/parser": "^1.9.0", + "@stardust-ui/eslint-plugin": "^0.31.0", "babel-jest": "^24.5.0", "eslint": "^5.16.0", "eslint-config-airbnb": "^17.1.0", @@ -20,7 +22,6 @@ "eslint-plugin-import": "^2.17.2", "eslint-plugin-jest": "^22.4.1", "eslint-plugin-jsx-a11y": "^6.2.1", - "eslint-plugin-prettier": "^3.0.1", "eslint-plugin-react": "^7.12.4", "eslint-plugin-react-hooks": "^1.6.0", "jest": "^24.5.0", diff --git a/packages/react-component-nesting-registry/src/lib/RefStack.ts b/packages/react-component-nesting-registry/src/lib/RefStack.ts index e2171b9769..5db5ca7f18 100644 --- a/packages/react-component-nesting-registry/src/lib/RefStack.ts +++ b/packages/react-component-nesting-registry/src/lib/RefStack.ts @@ -1,20 +1,20 @@ import { NodeRef } from '../types' export default class RefStack { - private set = new Set() + set = new Set() - public getContextRefs = (ref: NodeRef): NodeRef[] => { + getContextRefs = (ref: NodeRef): NodeRef[] => { const nodes = Array.from(this.set) const refId = nodes.indexOf(ref) return nodes.slice(refId) } - public register = (ref: NodeRef): void => { + register = (ref: NodeRef): void => { this.set.add(ref) } - public unregister = (ref: NodeRef): void => { + unregister = (ref: NodeRef): void => { this.set.delete(ref) } } diff --git a/packages/react-component-ref/src/RefForward.tsx b/packages/react-component-ref/src/RefForward.tsx index 9054431b40..b5ef757a2b 100644 --- a/packages/react-component-ref/src/RefForward.tsx +++ b/packages/react-component-ref/src/RefForward.tsx @@ -13,7 +13,7 @@ export default class RefForward extends React.Component { innerRef: customPropTypes.ref.isRequired as PropTypes.Validator>, } - private handleRefOverride = (node: HTMLElement) => { + handleRefOverride = (node: HTMLElement) => { const { children, innerRef } = this.props handleRef((children as React.ReactElement & { ref: React.Ref }).ref, node) diff --git a/packages/react/src/components/Accordion/Accordion.tsx b/packages/react/src/components/Accordion/Accordion.tsx index c787ea238d..6ba2bfabaa 100644 --- a/packages/react/src/components/Accordion/Accordion.tsx +++ b/packages/react/src/components/Accordion/Accordion.tsx @@ -125,7 +125,7 @@ class Accordion extends AutoControlledComponent, Acco renderPanelContent: PropTypes.func, } - public static defaultProps = { + static defaultProps = { accessibility: accordionBehavior, as: 'dl', } @@ -135,10 +135,10 @@ class Accordion extends AutoControlledComponent, Acco static Title = AccordionTitle static Content = AccordionContent - private focusHandler: ContainerFocusHandler = null - private itemRefs = [] - private defaultAccordionTitleId = _.uniqueId('accordion-title-') - private defaultAccordionContentId = _.uniqueId('accordion-content-') + focusHandler: ContainerFocusHandler = null + itemRefs = [] + defaultAccordionTitleId = _.uniqueId('accordion-title-') + defaultAccordionContentId = _.uniqueId('accordion-content-') actionHandlers: AccessibilityActionHandlers = { moveNext: e => { @@ -169,21 +169,21 @@ class Accordion extends AutoControlledComponent, Acco ) } - private handleNavigationFocus = (index: number) => { + handleNavigationFocus = (index: number) => { this.setState({ focusedIndex: index }, () => { const targetComponent = this.itemRefs[index] && this.itemRefs[index].current targetComponent && targetComponent.focus() }) } - private getNavigationItemsSize = () => this.props.panels.length + getNavigationItemsSize = () => this.props.panels.length getInitialAutoControlledState({ expanded, exclusive }: AccordionProps) { const alwaysActiveIndex = expanded ? 0 : -1 return { activeIndex: exclusive ? alwaysActiveIndex : [alwaysActiveIndex] } } - private computeNewIndex = (index: number): number | number[] => { + computeNewIndex = (index: number): number | number[] => { const { activeIndex } = this.state const { exclusive } = this.props @@ -198,7 +198,7 @@ class Accordion extends AutoControlledComponent, Acco : [...(activeIndex as number[]), index] } - private handleTitleOverrides = (predefinedProps: AccordionTitleProps) => ({ + handleTitleOverrides = (predefinedProps: AccordionTitleProps) => ({ onClick: (e: React.SyntheticEvent, titleProps: AccordionTitleProps) => { const { index } = titleProps const activeIndex = this.computeNewIndex(index) @@ -215,7 +215,7 @@ class Accordion extends AutoControlledComponent, Acco }, }) - private isIndexActive = (index: number): boolean => { + isIndexActive = (index: number): boolean => { const { exclusive } = this.props const { activeIndex } = this.state @@ -231,7 +231,7 @@ class Accordion extends AutoControlledComponent, Acco * @param {number} index The index of the panel. * @returns {boolean} If the panel can be set active/inactive. */ - private isIndexActionable = (index: number): boolean => { + isIndexActionable = (index: number): boolean => { if (!this.isIndexActive(index)) { return true } diff --git a/packages/react/src/components/Accordion/AccordionContent.tsx b/packages/react/src/components/Accordion/AccordionContent.tsx index ad677ea734..f238e4eb06 100644 --- a/packages/react/src/components/Accordion/AccordionContent.tsx +++ b/packages/react/src/components/Accordion/AccordionContent.tsx @@ -53,7 +53,7 @@ class AccordionContent extends UIComponent, an as: 'dd', } - private handleClick = (e: React.SyntheticEvent) => { + handleClick = (e: React.SyntheticEvent) => { _.invoke(this.props, 'onClick', e, this.props) } diff --git a/packages/react/src/components/Accordion/AccordionTitle.tsx b/packages/react/src/components/Accordion/AccordionTitle.tsx index b00a22619c..cc29b5a068 100644 --- a/packages/react/src/components/Accordion/AccordionTitle.tsx +++ b/packages/react/src/components/Accordion/AccordionTitle.tsx @@ -96,11 +96,11 @@ class AccordionTitle extends UIComponent, any> { }, } - private handleClick = (e: React.SyntheticEvent) => { + handleClick = (e: React.SyntheticEvent) => { _.invoke(this.props, 'onClick', e, this.props) } - private handleFocus = (e: React.SyntheticEvent) => { + handleFocus = (e: React.SyntheticEvent) => { e.stopPropagation() _.invoke(this.props, 'onFocus', e, this.props) } diff --git a/packages/react/src/components/Attachment/Attachment.tsx b/packages/react/src/components/Attachment/Attachment.tsx index 907ba99dc4..6dc9b6fe32 100644 --- a/packages/react/src/components/Attachment/Attachment.tsx +++ b/packages/react/src/components/Attachment/Attachment.tsx @@ -88,7 +88,7 @@ class Attachment extends UIComponent, AttachmentStat accessibility: attachmentBehavior as Accessibility, } - public state = { + state = { isFromKeyboard: false, } @@ -131,16 +131,16 @@ class Attachment extends UIComponent, AttachmentStat ) } - protected actionHandlers: AccessibilityActionHandlers = { + actionHandlers: AccessibilityActionHandlers = { performClick: event => this.performClick(event), } - private performClick = e => { + performClick = e => { e.stopPropagation() this.handleClick(e) } - private handleClick = (e: React.SyntheticEvent) => { + handleClick = (e: React.SyntheticEvent) => { const { disabled } = this.props if (disabled) { @@ -151,7 +151,7 @@ class Attachment extends UIComponent, AttachmentStat _.invoke(this.props, 'onClick', e, this.props) } - private handleFocus = (e: React.SyntheticEvent) => { + handleFocus = (e: React.SyntheticEvent) => { this.setState({ isFromKeyboard: isFromKeyboard() }) _.invoke(this.props, 'onFocus', e, this.props) diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx index 34c347cb9c..5cbe1b89c7 100644 --- a/packages/react/src/components/Button/Button.tsx +++ b/packages/react/src/components/Button/Button.tsx @@ -82,11 +82,11 @@ export interface ButtonState { class Button extends UIComponent, ButtonState> { static create: Function - public static displayName = 'Button' + static displayName = 'Button' - public static className = 'ui-button' + static className = 'ui-button' - public static propTypes = { + static propTypes = { ...commonPropTypes.createCommon({ content: 'shorthand', }), @@ -103,18 +103,18 @@ class Button extends UIComponent, ButtonState> { secondary: customPropTypes.every([customPropTypes.disallow(['primary']), PropTypes.bool]), } - public static defaultProps = { + static defaultProps = { as: 'button', accessibility: buttonBehavior as Accessibility, } static Group = ButtonGroup - public state = { + state = { isFromKeyboard: false, } - public renderComponent({ + renderComponent({ ElementType, classes, accessibility, @@ -145,7 +145,7 @@ class Button extends UIComponent, ButtonState> { ) } - public renderIcon = (variables, styles) => { + renderIcon = (variables, styles) => { const { icon, iconPosition, content } = this.props return Icon.create(icon, { @@ -157,7 +157,7 @@ class Button extends UIComponent, ButtonState> { }) } - private handleClick = (e: React.SyntheticEvent) => { + handleClick = (e: React.SyntheticEvent) => { const { disabled } = this.props if (disabled) { @@ -168,7 +168,7 @@ class Button extends UIComponent, ButtonState> { _.invoke(this.props, 'onClick', e, this.props) } - private handleFocus = (e: React.SyntheticEvent) => { + handleFocus = (e: React.SyntheticEvent) => { this.setState({ isFromKeyboard: isFromKeyboard() }) _.invoke(this.props, 'onFocus', e, this.props) diff --git a/packages/react/src/components/Button/ButtonGroup.tsx b/packages/react/src/components/Button/ButtonGroup.tsx index 59beb9a33f..14c6a44532 100644 --- a/packages/react/src/components/Button/ButtonGroup.tsx +++ b/packages/react/src/components/Button/ButtonGroup.tsx @@ -36,24 +36,24 @@ export interface ButtonGroupProps } class ButtonGroup extends UIComponent, any> { - public static create: Function + static create: Function - public static displayName = 'ButtonGroup' + static displayName = 'ButtonGroup' - public static className = 'ui-buttons' + static className = 'ui-buttons' - public static propTypes = { + static propTypes = { ...commonPropTypes.createCommon(), buttons: customPropTypes.collectionShorthand, circular: PropTypes.bool, } - public static defaultProps = { + static defaultProps = { accessibility: defaultBehavior, as: 'div', } - public renderComponent({ + renderComponent({ ElementType, classes, accessibility, diff --git a/packages/react/src/components/Chat/Chat.tsx b/packages/react/src/components/Chat/Chat.tsx index 2228dc8932..dc395da23f 100644 --- a/packages/react/src/components/Chat/Chat.tsx +++ b/packages/react/src/components/Chat/Chat.tsx @@ -56,7 +56,7 @@ class Chat extends UIComponent, any> { static Item = ChatItem static Message = ChatMessage - protected actionHandlers: AccessibilityActionHandlers = { + actionHandlers: AccessibilityActionHandlers = { focus: () => this.focusZone && this.focusZone.focus(), } diff --git a/packages/react/src/components/Chat/ChatItem.tsx b/packages/react/src/components/Chat/ChatItem.tsx index 54f3c0cf0f..0cce5f0ca5 100644 --- a/packages/react/src/components/Chat/ChatItem.tsx +++ b/packages/react/src/components/Chat/ChatItem.tsx @@ -87,7 +87,7 @@ class ChatItem extends UIComponent, any> { ) } - private renderChatItem(styles: ComponentSlotStylesPrepared) { + renderChatItem(styles: ComponentSlotStylesPrepared) { const { gutter, contentPosition } = this.props const gutterElement = gutter && diff --git a/packages/react/src/components/Chat/ChatMessage.tsx b/packages/react/src/components/Chat/ChatMessage.tsx index 0aa35a7f20..4964e517ac 100644 --- a/packages/react/src/components/Chat/ChatMessage.tsx +++ b/packages/react/src/components/Chat/ChatMessage.tsx @@ -132,12 +132,12 @@ class ChatMessage extends UIComponent, ChatMessageS reactionGroupPosition: 'start', } - public state = { + state = { focused: false, isFromKeyboard: false, } - protected actionHandlers: AccessibilityActionHandlers = { + actionHandlers: AccessibilityActionHandlers = { // prevents default FocusZone behavior, e.g., in ChatMessageBehavior, it prevents FocusZone from using arrow keys // as navigation (only Tab key should work) preventDefault: event => { diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx index ce510abb89..3996b1edb6 100644 --- a/packages/react/src/components/Dropdown/Dropdown.tsx +++ b/packages/react/src/components/Dropdown/Dropdown.tsx @@ -220,11 +220,11 @@ export interface DropdownState { } class Dropdown extends AutoControlledComponent, DropdownState> { - private buttonRef = React.createRef() - private inputRef = React.createRef() - private listRef = React.createRef() - private selectedItemsRef = React.createRef() - private containerRef = React.createRef() + buttonRef = React.createRef() + inputRef = React.createRef() + listRef = React.createRef() + selectedItemsRef = React.createRef() + containerRef = React.createRef() static displayName = 'Dropdown' @@ -388,7 +388,7 @@ class Dropdown extends AutoControlledComponent, Dropdo } } - public renderComponent({ + renderComponent({ ElementType, classes, styles, @@ -519,7 +519,7 @@ class Dropdown extends AutoControlledComponent, Dropdo ) } - private renderTriggerButton( + renderTriggerButton( styles: ComponentSlotStylesInput, rtl: boolean, getToggleButtonProps: (options?: GetToggleButtonPropsOptions) => any, @@ -571,7 +571,7 @@ class Dropdown extends AutoControlledComponent, Dropdo ) } - private renderSearchInput( + renderSearchInput( accessibilityComboboxProps: Object, rtl: boolean, highlightedIndex: number, @@ -609,7 +609,7 @@ class Dropdown extends AutoControlledComponent, Dropdo }) } - private renderItemsList( + renderItemsList( styles: ComponentSlotStylesInput, variables: ComponentVariablesInput, highlightedIndex: number, @@ -679,7 +679,7 @@ class Dropdown extends AutoControlledComponent, Dropdo ) } - private renderItems( + renderItems( styles: ComponentSlotStylesInput, variables: ComponentVariablesInput, getItemProps: (options: GetItemPropsOptions) => any, @@ -724,7 +724,7 @@ class Dropdown extends AutoControlledComponent, Dropdo ] } - private renderSelectedItems(variables, rtl: boolean) { + renderSelectedItems(variables, rtl: boolean) { const { renderSelectedItem } = this.props const value = this.state.value as ShorthandCollection @@ -749,7 +749,7 @@ class Dropdown extends AutoControlledComponent, Dropdo ) } - private handleSearchQueryChange = (searchQuery: string) => { + handleSearchQueryChange = (searchQuery: string) => { this.trySetStateAndInvokeHandler('onSearchQueryChange', null, { searchQuery, highlightedIndex: this.props.highlightFirstItemOnOpen ? 0 : null, @@ -757,7 +757,7 @@ class Dropdown extends AutoControlledComponent, Dropdo }) } - private handleDownshiftStateChanges = ( + handleDownshiftStateChanges = ( state: DownshiftState, changes: StateChangeOptions, ) => { @@ -773,7 +773,7 @@ class Dropdown extends AutoControlledComponent, Dropdo } } - private handleStateChange = (changes: StateChangeOptions) => { + handleStateChange = (changes: StateChangeOptions) => { if (changes.isOpen !== undefined && changes.isOpen !== this.state.open) { const newState = { open: changes.isOpen, highlightedIndex: this.state.highlightedIndex } @@ -799,11 +799,11 @@ class Dropdown extends AutoControlledComponent, Dropdo } } - private isSelectedItemActive = (index: number): boolean => { + isSelectedItemActive = (index: number): boolean => { return index === this.state.activeSelectedIndex } - private handleItemOverrides = ( + handleItemOverrides = ( item: ShorthandValue, index: number, getItemProps: (options: GetItemPropsOptions) => any, @@ -819,7 +819,7 @@ class Dropdown extends AutoControlledComponent, Dropdo }), }) - private handleSelectedItemOverrides = (item: ShorthandValue, rtl: boolean) => ( + handleSelectedItemOverrides = (item: ShorthandValue, rtl: boolean) => ( predefinedProps: DropdownSelectedItemProps, ) => ({ onRemove: (e: React.SyntheticEvent, dropdownSelectedItemProps: DropdownSelectedItemProps) => { @@ -837,7 +837,7 @@ class Dropdown extends AutoControlledComponent, Dropdo }, }) - private handleSearchInputOverrides = ( + handleSearchInputOverrides = ( highlightedIndex: number, rtl: boolean, selectItemAtIndex: ( @@ -923,7 +923,7 @@ class Dropdown extends AutoControlledComponent, Dropdo * Custom Tab selection logic, at least until Downshift will implement selection on blur. * Also keeps focus on multiple selection dropdown when selecting by Tab. */ - private handleTabSelection = ( + handleTabSelection = ( e: React.SyntheticEvent, highlightedIndex: number, selectItemAtIndex: (highlightedIndex: number) => void, @@ -941,7 +941,7 @@ class Dropdown extends AutoControlledComponent, Dropdo } } - private trySetLastSelectedItemAsActive = () => { + trySetLastSelectedItemAsActive = () => { if ( !this.props.multiple || (this.inputRef.current && this.inputRef.current.selectionStart !== 0) @@ -954,7 +954,7 @@ class Dropdown extends AutoControlledComponent, Dropdo } } - private tryRemoveItemFromValue = () => { + tryRemoveItemFromValue = () => { const { searchQuery, value } = this.state const { multiple } = this.props @@ -967,7 +967,7 @@ class Dropdown extends AutoControlledComponent, Dropdo } } - private handleClear = (e: React.SyntheticEvent) => { + handleClear = (e: React.SyntheticEvent) => { const { activeSelectedIndex, highlightedIndex, @@ -991,11 +991,11 @@ class Dropdown extends AutoControlledComponent, Dropdo this.tryFocusTriggerButton() } - private handleContainerClick = () => { + handleContainerClick = () => { this.tryFocusSearchInput() } - private handleTriggerButtonKeyDown = (e: React.SyntheticEvent, rtl: boolean) => { + handleTriggerButtonKeyDown = (e: React.SyntheticEvent, rtl: boolean) => { switch (keyboardKey.getCode(e)) { case keyboardKey.ArrowLeft: if (!rtl) { @@ -1012,7 +1012,7 @@ class Dropdown extends AutoControlledComponent, Dropdo } } - private handleListKeyDown = ( + handleListKeyDown = ( e: React.SyntheticEvent, highlightedIndex: number, accessibilityInputPropsKeyDown: (e) => any, @@ -1039,7 +1039,7 @@ class Dropdown extends AutoControlledComponent, Dropdo } } - private handleSelectedChange = (item: ShorthandValue) => { + handleSelectedChange = (item: ShorthandValue) => { const { items, multiple, getA11ySelectionMessage } = this.props this.trySetStateAndInvokeHandler('onSelectedChange', null, { @@ -1066,7 +1066,7 @@ class Dropdown extends AutoControlledComponent, Dropdo this.tryFocusTriggerButton() } - private handleSelectedItemKeyDown( + handleSelectedItemKeyDown( e: React.SyntheticEvent, item: ShorthandValue, predefinedProps: DropdownSelectedItemProps, @@ -1111,17 +1111,17 @@ class Dropdown extends AutoControlledComponent, Dropdo _.invoke(predefinedProps, 'onKeyDown', e, dropdownSelectedItemProps) } - private handleTriggerButtonOrListFocus = () => { + handleTriggerButtonOrListFocus = () => { this.setState({ focused: true, isFromKeyboard: isFromKeyboard() }) } - private handleTriggerButtonBlur = e => { + handleTriggerButtonBlur = e => { if (this.listRef.current !== e.relatedTarget) { this.setState({ focused: false, isFromKeyboard: isFromKeyboard() }) } } - private handleListBlur = e => { + handleListBlur = e => { if (this.buttonRef.current !== e.relatedTarget) { this.setState({ focused: false, isFromKeyboard: isFromKeyboard() }) } @@ -1133,7 +1133,7 @@ class Dropdown extends AutoControlledComponent, Dropdo * * @param {string} keystring The string the item needs to start with. It is composed by typing keys in fast succession. */ - private setHighlightedIndexOnCharKeyDown = (keyString: string): void => { + setHighlightedIndexOnCharKeyDown = (keyString: string): void => { const { highlightedIndex, filteredItemStrings, startingString } = this.state const newStartingString = `${startingString}${keyString.toLowerCase()}` let newHighlightedIndex = -1 @@ -1161,7 +1161,7 @@ class Dropdown extends AutoControlledComponent, Dropdo } } - private handleSelectedItemRemove( + handleSelectedItemRemove( e: React.SyntheticEvent, item: ShorthandValue, predefinedProps: DropdownSelectedItemProps, @@ -1174,7 +1174,7 @@ class Dropdown extends AutoControlledComponent, Dropdo _.invoke(predefinedProps, 'onRemove', e, dropdownSelectedItemProps) } - private removeItemFromValue(item?: ShorthandValue) { + removeItemFromValue(item?: ShorthandValue) { const { getA11ySelectionMessage } = this.props let value = this.state.value as ShorthandCollection let poppedItem = item @@ -1197,7 +1197,7 @@ class Dropdown extends AutoControlledComponent, Dropdo * We don't have the event object for most events coming from Downshift se we send an empty event * because we want to keep the event handling interface */ - private trySetStateAndInvokeHandler = ( + trySetStateAndInvokeHandler = ( handlerName: keyof DropdownProps, event: React.SyntheticEvent, newState: Partial, @@ -1206,13 +1206,13 @@ class Dropdown extends AutoControlledComponent, Dropdo _.invoke(this.props, handlerName, event, { ...this.props, ...newState }) } - private tryFocusTriggerButton = () => { + tryFocusTriggerButton = () => { if (!this.props.search) { this.buttonRef.current.focus() } } - private tryFocusSearchInput = () => { + tryFocusSearchInput = () => { if (this.props.search) { this.inputRef.current.focus() } @@ -1223,7 +1223,7 @@ class Dropdown extends AutoControlledComponent, Dropdo * otherwise, for single selection we convert the value with itemToString * and for multiple selection we return empty string, the values are rendered by renderSelectedItems */ - private getSelectedItemAsString = (value: ShorthandValue): string => { + getSelectedItemAsString = (value: ShorthandValue): string => { const { itemToString, multiple, placeholder } = this.props if (this.isValueEmpty(value)) { @@ -1237,13 +1237,11 @@ class Dropdown extends AutoControlledComponent, Dropdo return itemToString(value) } - private isValueEmpty = (value: ShorthandValue | ShorthandCollection) => { + isValueEmpty = (value: ShorthandValue | ShorthandCollection) => { return _.isArray(value) ? value.length < 1 : !value } - private getHighlightedIndexOnArrowKeyOpen = ( - changes: StateChangeOptions, - ): number => { + getHighlightedIndexOnArrowKeyOpen = (changes: StateChangeOptions): number => { const itemsLength = this.state.filteredItems.length switch (changes.type) { // if open by ArrowUp, index should change by -1. @@ -1265,7 +1263,7 @@ class Dropdown extends AutoControlledComponent, Dropdo } } - private getHighlightedIndexOnClose = (): number => { + getHighlightedIndexOnClose = (): number => { const { highlightFirstItemOnOpen, items, multiple, search } = this.props const { value } = this.state @@ -1287,7 +1285,7 @@ class Dropdown extends AutoControlledComponent, Dropdo * Function that sets and cleans the selection message after it has been set, * so it is not read anymore via virtual cursor. */ - private setA11ySelectionMessage = (a11ySelectionStatus: string): void => { + setA11ySelectionMessage = (a11ySelectionStatus: string): void => { clearTimeout(this.a11yStatusTimeout) this.setState({ a11ySelectionStatus }) this.a11yStatusTimeout = setTimeout(() => { @@ -1295,7 +1293,7 @@ class Dropdown extends AutoControlledComponent, Dropdo }, Dropdown.a11yStatusCleanupTime) } - private setStartingString = (startingString: string): void => { + setStartingString = (startingString: string): void => { clearTimeout(this.charKeysPressedTimeout) this.setState({ startingString }) this.charKeysPressedTimeout = setTimeout(() => { diff --git a/packages/react/src/components/Dropdown/DropdownItem.tsx b/packages/react/src/components/Dropdown/DropdownItem.tsx index 65d13f9d85..3cb823a95f 100644 --- a/packages/react/src/components/Dropdown/DropdownItem.tsx +++ b/packages/react/src/components/Dropdown/DropdownItem.tsx @@ -72,15 +72,11 @@ class DropdownItem extends UIComponent> { selected: PropTypes.bool, } - private handleClick = e => { + handleClick = e => { _.invoke(this.props, 'onClick', e, this.props) } - public renderComponent({ - classes, - styles, - unhandledProps, - }: RenderResultConfig) { + renderComponent({ classes, styles, unhandledProps }: RenderResultConfig) { const { content, header, image, accessibilityItemProps } = this.props return ( { + handleFocus = (e: React.SyntheticEvent) => { _.invoke(this.props, 'onFocus', e, this.props) } - private handleInputKeyDown = (e: React.SyntheticEvent) => { + handleInputKeyDown = (e: React.SyntheticEvent) => { _.invoke(this.props, 'onInputKeyDown', e, this.props) } - private handleInputBlur = (e: React.SyntheticEvent) => { + handleInputBlur = (e: React.SyntheticEvent) => { _.invoke(this.props, 'onInputBlur', e, this.props) } - private handleKeyUp = (e: React.SyntheticEvent) => { + handleKeyUp = (e: React.SyntheticEvent) => { _.invoke(this.props, 'onKeyUp', e, this.props) } - public renderComponent({ unhandledProps, styles }: RenderResultConfig) { + renderComponent({ unhandledProps, styles }: RenderResultConfig) { const { accessibilityComboboxProps, accessibilityInputProps, diff --git a/packages/react/src/components/Dropdown/DropdownSelectedItem.tsx b/packages/react/src/components/Dropdown/DropdownSelectedItem.tsx index 68102f9ed3..92eb982c21 100644 --- a/packages/react/src/components/Dropdown/DropdownSelectedItem.tsx +++ b/packages/react/src/components/Dropdown/DropdownSelectedItem.tsx @@ -64,7 +64,7 @@ export interface DropdownSelectedItemProps extends UIComponentProps, any> { - private itemRef = React.createRef() + itemRef = React.createRef() static displayName = 'DropdownSelectedItem' static create: Function @@ -95,15 +95,15 @@ class DropdownSelectedItem extends UIComponent { + handleClick = (e: React.SyntheticEvent) => { _.invoke(this.props, 'onClick', e, this.props) } - private handleKeyDown = (e: React.SyntheticEvent) => { + handleKeyDown = (e: React.SyntheticEvent) => { _.invoke(this.props, 'onKeyDown', e, this.props) } - private handleIconOverrides = (predefinedProps: IconProps) => ({ + handleIconOverrides = (predefinedProps: IconProps) => ({ onClick: (e: React.SyntheticEvent, iconProps: IconProps) => { e.stopPropagation() _.invoke(this.props, 'onRemove', e, this.props) @@ -118,7 +118,7 @@ class DropdownSelectedItem extends UIComponent> { as: 'div', } - public static propTypes = { + static propTypes = { ...commonPropTypes.createCommon({ accessibility: false, content: false, diff --git a/packages/react/src/components/Form/Form.tsx b/packages/react/src/components/Form/Form.tsx index 3dc3f8472d..36f27ddc5c 100644 --- a/packages/react/src/components/Form/Form.tsx +++ b/packages/react/src/components/Form/Form.tsx @@ -44,15 +44,15 @@ export interface FormProps extends UIComponentProps, ChildrenComponentProps { class Form extends UIComponent, any> { static create: Function - public static displayName = 'Form' + static displayName = 'Form' - public static className = 'ui-form' + static className = 'ui-form' static slotClassNames: FormSlotClassNames = { field: `${Form.className}__field`, } - public static propTypes = { + static propTypes = { ...commonPropTypes.createCommon({ content: false, }), @@ -61,14 +61,14 @@ class Form extends UIComponent, any> { onSubmit: PropTypes.func, } - public static defaultProps = { + static defaultProps = { accessibility: defaultBehavior, as: 'form', } - public static Field = FormField + static Field = FormField - public renderComponent({ accessibility, ElementType, classes, unhandledProps }): React.ReactNode { + renderComponent({ accessibility, ElementType, classes, unhandledProps }): React.ReactNode { const { action, children } = this.props return ( , any> { ) } - private handleSubmit = (e, ...args) => { + handleSubmit = (e, ...args) => { const { action } = this.props // Heads up! Third party libs can pass own data as first argument, we need to check that it has preventDefault() @@ -93,7 +93,7 @@ class Form extends UIComponent, any> { _.invoke(this.props, 'onSubmit', e, this.props, ...args) } - private renderFields = () => { + renderFields = () => { const { fields } = this.props return _.map(fields, field => FormField.create(field, { defaultProps: { className: Form.slotClassNames.field } }), diff --git a/packages/react/src/components/Form/FormField.tsx b/packages/react/src/components/Form/FormField.tsx index cc79bf6e9e..7465bdaa70 100644 --- a/packages/react/src/components/Form/FormField.tsx +++ b/packages/react/src/components/Form/FormField.tsx @@ -50,13 +50,13 @@ export interface FormFieldProps extends UIComponentProps, ChildrenComponentProps } class FormField extends UIComponent, any> { - public static displayName = 'FormField' + static displayName = 'FormField' - public static className = 'ui-form__field' + static className = 'ui-form__field' static create: Function - public static propTypes = { + static propTypes = { ...commonPropTypes.createCommon({ content: false, }), @@ -70,13 +70,13 @@ class FormField extends UIComponent, any> { type: PropTypes.string, } - public static defaultProps = { + static defaultProps = { accessibility: defaultBehavior, as: 'div', control: { as: Input }, } - public renderComponent({ + renderComponent({ ElementType, classes, accessibility, @@ -119,7 +119,7 @@ class FormField extends UIComponent, any> { ) } - private shouldControlAppearFirst = () => { + shouldControlAppearFirst = () => { const { type } = this.props return type && (type === 'checkbox' || type === 'radio') } diff --git a/packages/react/src/components/Grid/Grid.tsx b/packages/react/src/components/Grid/Grid.tsx index e40bfe3e2c..3c328df595 100644 --- a/packages/react/src/components/Grid/Grid.tsx +++ b/packages/react/src/components/Grid/Grid.tsx @@ -34,11 +34,11 @@ export interface GridProps } class Grid extends UIComponent, any> { - public static displayName = 'Grid' + static displayName = 'Grid' - public static className = 'ui-grid' + static className = 'ui-grid' - public static propTypes = { + static propTypes = { ...commonPropTypes.createCommon({ content: false, }), @@ -53,12 +53,12 @@ class Grid extends UIComponent, any> { rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), } - public static defaultProps: WithAsProp = { + static defaultProps: WithAsProp = { as: 'div', accessibility: defaultBehavior, } - public renderComponent({ + renderComponent({ accessibility, ElementType, classes, diff --git a/packages/react/src/components/Input/Input.tsx b/packages/react/src/components/Input/Input.tsx index b3d0d48aed..e5ba090908 100644 --- a/packages/react/src/components/Input/Input.tsx +++ b/packages/react/src/components/Input/Input.tsx @@ -88,7 +88,7 @@ export interface InputState { } class Input extends AutoControlledComponent, InputState> { - private inputRef = React.createRef() + inputRef = React.createRef() static className = 'ui-input' @@ -187,7 +187,7 @@ class Input extends AutoControlledComponent, InputState> }) } - private handleIconOverrides = predefinedProps => ({ + handleIconOverrides = predefinedProps => ({ onClick: (e: React.SyntheticEvent) => { this.handleOnClear(e) this.inputRef.current.focus() @@ -195,7 +195,7 @@ class Input extends AutoControlledComponent, InputState> }, }) - private handleChange = (e: React.SyntheticEvent) => { + handleChange = (e: React.SyntheticEvent) => { const value = _.get(e, 'target.value') _.invoke(this.props, 'onChange', e, { ...this.props, value }) @@ -203,14 +203,14 @@ class Input extends AutoControlledComponent, InputState> this.trySetState({ value }) } - private handleOnClear = (e: React.SyntheticEvent) => { + handleOnClear = (e: React.SyntheticEvent) => { if (this.props.clearable) { _.invoke(this.props, 'onChange', e, { ...this.props, value: '' }) this.trySetState({ value: '' }) } } - private computeIcon = (): ShorthandValue => { + computeIcon = (): ShorthandValue => { const { clearable, icon } = this.props const { value } = this.state diff --git a/packages/react/src/components/List/List.tsx b/packages/react/src/components/List/List.tsx index 92508a5eb7..c100814d8a 100644 --- a/packages/react/src/components/List/List.tsx +++ b/packages/react/src/components/List/List.tsx @@ -103,8 +103,8 @@ class List extends AutoControlledComponent, ListState> { // List props that are passed to each individual Item props static itemProps = ['debug', 'selectable', 'truncateContent', 'truncateHeader', 'variables'] - private focusHandler: ContainerFocusHandler = null - private itemRefs = [] + focusHandler: ContainerFocusHandler = null + itemRefs = [] actionHandlers: AccessibilityActionHandlers = { moveNext: e => { diff --git a/packages/react/src/components/List/ListItem.tsx b/packages/react/src/components/List/ListItem.tsx index c79782b258..6f2d6d1e9a 100644 --- a/packages/react/src/components/List/ListItem.tsx +++ b/packages/react/src/components/List/ListItem.tsx @@ -116,7 +116,7 @@ class ListItem extends UIComponent, ListItemState> { isFromKeyboard: false, } - protected actionHandlers: AccessibilityActionHandlers = { + actionHandlers: AccessibilityActionHandlers = { performClick: event => { this.handleClick(event) event.preventDefault() diff --git a/packages/react/src/components/Menu/MenuItem.tsx b/packages/react/src/components/Menu/MenuItem.tsx index 3ffc87ff73..edd598a5c2 100644 --- a/packages/react/src/components/Menu/MenuItem.tsx +++ b/packages/react/src/components/Menu/MenuItem.tsx @@ -189,8 +189,8 @@ class MenuItem extends AutoControlledComponent, MenuIt static autoControlledProps = ['menuOpen'] - private menuRef = React.createRef() - private itemRef = React.createRef() + menuRef = React.createRef() + itemRef = React.createRef() renderComponent({ ElementType, classes, accessibility, unhandledProps, styles }) { const { @@ -288,13 +288,13 @@ class MenuItem extends AutoControlledComponent, MenuIt return menuItemInner } - private handleWrapperBlur = e => { + handleWrapperBlur = e => { if (!this.props.inSubmenu && !e.currentTarget.contains(e.relatedTarget)) { this.trySetMenuOpen(false, e) } } - protected actionHandlers: AccessibilityActionHandlers = { + actionHandlers: AccessibilityActionHandlers = { performClick: event => !event.defaultPrevented && this.handleClick(event), openMenu: event => this.openMenu(event), closeAllMenusAndFocusNextParentItem: event => this.closeAllMenus(event), @@ -305,7 +305,7 @@ class MenuItem extends AutoControlledComponent, MenuIt }, } - private outsideClickHandler = e => { + outsideClickHandler = e => { if (!this.isSubmenuOpen()) return if ( !doesNodeContainClick(this.itemRef.current, e) && @@ -315,7 +315,7 @@ class MenuItem extends AutoControlledComponent, MenuIt } } - private performClick = e => { + performClick = e => { const { active, menu } = this.props if (menu) { @@ -331,7 +331,7 @@ class MenuItem extends AutoControlledComponent, MenuIt } } - private handleClick = (e: Event | React.SyntheticEvent) => { + handleClick = (e: Event | React.SyntheticEvent) => { const { disabled } = this.props if (disabled) { @@ -343,26 +343,26 @@ class MenuItem extends AutoControlledComponent, MenuIt _.invoke(this.props, 'onClick', e, this.props) } - private handleBlur = (e: React.SyntheticEvent) => { + handleBlur = (e: React.SyntheticEvent) => { this.setState({ isFromKeyboard: false }) _.invoke(this.props, 'onBlur', e, this.props) } - private handleFocus = (e: React.SyntheticEvent) => { + handleFocus = (e: React.SyntheticEvent) => { this.setState({ isFromKeyboard: isFromKeyboard() }) _.invoke(this.props, 'onFocus', e, this.props) } - private isSubmenuOpen = (): boolean => { + isSubmenuOpen = (): boolean => { const { menu } = this.props const { menuOpen } = this.state return !!(menu && menuOpen) } - private closeAllMenus = (e: Event) => { + closeAllMenus = (e: Event) => { if (!this.isSubmenuOpen()) { return } @@ -374,7 +374,7 @@ class MenuItem extends AutoControlledComponent, MenuIt }) } - private closeMenu = (e: Event, forceTriggerFocus?: boolean) => { + closeMenu = (e: Event, forceTriggerFocus?: boolean) => { if (!this.isSubmenuOpen()) { return } @@ -392,7 +392,7 @@ class MenuItem extends AutoControlledComponent, MenuIt } } - private openMenu = (e: Event) => { + openMenu = (e: Event) => { const { menu } = this.props const { menuOpen } = this.state if (menu && !menuOpen) { @@ -403,7 +403,7 @@ class MenuItem extends AutoControlledComponent, MenuIt } } - private trySetMenuOpen(newValue: boolean, e: Event | React.SyntheticEvent, onStateChanged?: any) { + trySetMenuOpen(newValue: boolean, e: Event | React.SyntheticEvent, onStateChanged?: any) { this.trySetState({ menuOpen: newValue }) // The reason why post-effect is not passed as callback to trySetState method // is that in 'controlled' mode the post-effect is applied before final re-rendering diff --git a/packages/react/src/components/Popup/Popup.tsx b/packages/react/src/components/Popup/Popup.tsx index 2c1a3745f4..162ec0e6af 100644 --- a/packages/react/src/components/Popup/Popup.tsx +++ b/packages/react/src/components/Popup/Popup.tsx @@ -187,7 +187,7 @@ export default class Popup extends AutoControlledComponent { this.close(e, () => _.invoke(this.triggerFocusableDomElement, 'focus')) }, diff --git a/packages/react/src/components/Popup/PopupContent.tsx b/packages/react/src/components/Popup/PopupContent.tsx index 357fe3165b..88dd7c27d7 100644 --- a/packages/react/src/components/Popup/PopupContent.tsx +++ b/packages/react/src/components/Popup/PopupContent.tsx @@ -56,12 +56,12 @@ export interface PopupContentProps } class PopupContent extends UIComponent> { - public static create: Function + static create: Function - public static displayName = 'PopupContent' - public static className = 'ui-popup__content' + static displayName = 'PopupContent' + static className = 'ui-popup__content' - public static propTypes = { + static propTypes = { ...commonPropTypes.createCommon(), placement: PropTypes.string, pointing: PropTypes.bool, @@ -74,15 +74,15 @@ class PopupContent extends UIComponent> { accessibility: defaultBehavior, } - private handleMouseEnter = e => { + handleMouseEnter = e => { _.invoke(this.props, 'onMouseEnter', e, this.props) } - private handleMouseLeave = e => { + handleMouseLeave = e => { _.invoke(this.props, 'onMouseLeave', e, this.props) } - public renderComponent({ + renderComponent({ accessibility, ElementType, classes, diff --git a/packages/react/src/components/Portal/Portal.tsx b/packages/react/src/components/Portal/Portal.tsx index a382a6ff68..0a497e127b 100644 --- a/packages/react/src/components/Portal/Portal.tsx +++ b/packages/react/src/components/Portal/Portal.tsx @@ -80,12 +80,12 @@ export interface PortalState { * A component that allows you to render children outside their parent. */ class Portal extends AutoControlledComponent { - private portalNode: HTMLElement - private triggerNode: HTMLElement + portalNode: HTMLElement + triggerNode: HTMLElement - public static autoControlledProps = ['open'] + static autoControlledProps = ['open'] - public static propTypes = { + static propTypes = { ...commonPropTypes.createCommon({ accessibility: false, animated: false, @@ -105,11 +105,11 @@ class Portal extends AutoControlledComponent { trapFocus: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]), } - public static defaultProps: PortalProps = { + static defaultProps: PortalProps = { triggerAccessibility: {}, } - public renderComponent(): React.ReactNode { + renderComponent(): React.ReactNode { return ( {this.renderPortal()} @@ -118,7 +118,7 @@ class Portal extends AutoControlledComponent { ) } - private renderPortal(): JSX.Element | undefined { + renderPortal(): JSX.Element | undefined { const { children, content, trapFocus } = this.props const { open } = this.state const contentToRender = childrenExist(children) ? children : content @@ -148,7 +148,7 @@ class Portal extends AutoControlledComponent { ) } - private renderTrigger(): JSX.Element | undefined { + renderTrigger(): JSX.Element | undefined { const { trigger, triggerAccessibility } = this.props return ( @@ -163,24 +163,24 @@ class Portal extends AutoControlledComponent { ) ) } - private handleMount = () => { + handleMount = () => { _.invoke(this.props, 'onMount', this.props) } - private handleUnmount = () => { + handleUnmount = () => { _.invoke(this.props, 'onUnmount', this.props) } - private handlePortalRef = (portalNode: HTMLElement) => { + handlePortalRef = (portalNode: HTMLElement) => { this.portalNode = portalNode } - private handleTriggerRef = (triggerNode: HTMLElement) => { + handleTriggerRef = (triggerNode: HTMLElement) => { this.triggerNode = triggerNode handleRef(this.props.triggerRef, triggerNode) } - private handleTriggerClick = (e: ReactMouseEvent, ...unhandledProps) => { + handleTriggerClick = (e: ReactMouseEvent, ...unhandledProps) => { const { trigger } = this.props _.invoke(this.props, 'onTriggerClick', e) // Call handler from parent component @@ -188,7 +188,7 @@ class Portal extends AutoControlledComponent { this.trySetState({ open: !this.state.open }) } - private handleDocumentClick = (e: MouseEvent) => { + handleDocumentClick = (e: MouseEvent) => { if ( !this.portalNode || // no portal doesNodeContainClick(this.triggerNode, e) || // event happened in trigger (delegate to trigger handlers) diff --git a/packages/react/src/components/Provider/Provider.tsx b/packages/react/src/components/Provider/Provider.tsx index b03078670a..8b1337a37e 100644 --- a/packages/react/src/components/Provider/Provider.tsx +++ b/packages/react/src/components/Provider/Provider.tsx @@ -77,7 +77,7 @@ class Provider extends React.Component> { static _topLevelFelaRenderer = undefined - private get topLevelFelaRenderer() { + get topLevelFelaRenderer() { if (!Provider._topLevelFelaRenderer) { Provider._topLevelFelaRenderer = this.props.theme.rtl ? felaRtlRenderer : felaLtrRenderer } diff --git a/packages/react/src/components/RadioGroup/RadioGroup.tsx b/packages/react/src/components/RadioGroup/RadioGroup.tsx index e81c209ac9..5d2314c956 100644 --- a/packages/react/src/components/RadioGroup/RadioGroup.tsx +++ b/packages/react/src/components/RadioGroup/RadioGroup.tsx @@ -96,16 +96,16 @@ class RadioGroup extends AutoControlledComponent, an ) } - protected actionHandlers: AccessibilityActionHandlers = { + actionHandlers: AccessibilityActionHandlers = { nextItem: event => this.setCheckedItem(event, 1), prevItem: event => this.setCheckedItem(event, -1), } - private getItemProps = (item): RadioGroupItemProps => { + getItemProps = (item): RadioGroupItemProps => { return (item as React.ReactElement).props || item } - private setCheckedItem = (event, direction) => { + setCheckedItem = (event, direction) => { const nextItem = this.findNextEnabledCheckedItem(direction) if (nextItem) { @@ -119,7 +119,7 @@ class RadioGroup extends AutoControlledComponent, an event.preventDefault() } - private findNextEnabledCheckedItem = (direction): RadioGroupItemProps => { + findNextEnabledCheckedItem = (direction): RadioGroupItemProps => { if (!this.props.items || !this.props.items.length) { return undefined } @@ -152,7 +152,7 @@ class RadioGroup extends AutoControlledComponent, an return undefined } - private handleItemOverrides = predefinedProps => ({ + handleItemOverrides = predefinedProps => ({ checked: typeof this.state.checkedValue !== 'undefined' && this.state.checkedValue === predefinedProps.value, @@ -166,7 +166,7 @@ class RadioGroup extends AutoControlledComponent, an shouldFocus: this.state.shouldFocus, }) - private renderItems = (vertical: boolean) => { + renderItems = (vertical: boolean) => { const { items } = this.props return _.map(items, item => @@ -177,7 +177,7 @@ class RadioGroup extends AutoControlledComponent, an ) } - private setCheckedValue({ + setCheckedValue({ checkedValue, shouldFocus, event, diff --git a/packages/react/src/components/RadioGroup/RadioGroupItem.tsx b/packages/react/src/components/RadioGroup/RadioGroupItem.tsx index 9a44ce4127..8b3ddebc6c 100644 --- a/packages/react/src/components/RadioGroup/RadioGroupItem.tsx +++ b/packages/react/src/components/RadioGroup/RadioGroupItem.tsx @@ -91,7 +91,7 @@ class RadioGroupItem extends AutoControlledComponent< WithAsProp, RadioGroupItemState > { - private elementRef = React.createRef() + elementRef = React.createRef() static create: Function diff --git a/packages/react/src/components/Reaction/Reaction.tsx b/packages/react/src/components/Reaction/Reaction.tsx index 2057a015fb..e6ce6a76d3 100644 --- a/packages/react/src/components/Reaction/Reaction.tsx +++ b/packages/react/src/components/Reaction/Reaction.tsx @@ -78,7 +78,7 @@ class Reaction extends UIComponent, ReactionState> { static Group = ReactionGroup - public state = { + state = { isFromKeyboard: false, } @@ -115,7 +115,7 @@ class Reaction extends UIComponent, ReactionState> { ) } - private handleFocus = (e: React.SyntheticEvent) => { + handleFocus = (e: React.SyntheticEvent) => { this.setState({ isFromKeyboard: isFromKeyboard() }) _.invoke(this.props, 'onFocus', e, this.props) } diff --git a/packages/react/src/components/Reaction/ReactionGroup.tsx b/packages/react/src/components/Reaction/ReactionGroup.tsx index 37a3b84654..e19e331353 100644 --- a/packages/react/src/components/Reaction/ReactionGroup.tsx +++ b/packages/react/src/components/Reaction/ReactionGroup.tsx @@ -34,20 +34,20 @@ export interface ReactionGroupProps class ReactionGroup extends UIComponent> { static create: Function - public static displayName = 'ReactionGroup' + static displayName = 'ReactionGroup' - public static className = 'ui-reactions' + static className = 'ui-reactions' - public static propTypes = { + static propTypes = { ...commonPropTypes.createCommon(), items: customPropTypes.collectionShorthand, } - public static defaultProps = { + static defaultProps = { accessibility: defaultBehavior, } - public renderComponent({ + renderComponent({ ElementType, classes, accessibility, diff --git a/packages/react/src/components/Tree/Tree.tsx b/packages/react/src/components/Tree/Tree.tsx index 9594452e31..a1d2772b70 100644 --- a/packages/react/src/components/Tree/Tree.tsx +++ b/packages/react/src/components/Tree/Tree.tsx @@ -83,7 +83,7 @@ class Tree extends AutoControlledComponent, TreeState> { rtlAttributes: PropTypes.func, } - public static defaultProps = { + static defaultProps = { as: 'ul', accessibility: treeBehavior, } diff --git a/packages/react/src/components/Tree/TreeItem.tsx b/packages/react/src/components/Tree/TreeItem.tsx index 4309264b8b..98024e5d39 100644 --- a/packages/react/src/components/Tree/TreeItem.tsx +++ b/packages/react/src/components/Tree/TreeItem.tsx @@ -97,7 +97,7 @@ class TreeItem extends UIComponent> { title: customPropTypes.itemShorthand, } - public static defaultProps = { + static defaultProps = { as: 'li', accessibility: defaultBehavior, } diff --git a/packages/react/src/components/Tree/TreeTitle.tsx b/packages/react/src/components/Tree/TreeTitle.tsx index 397641cddd..bb53c9242c 100644 --- a/packages/react/src/components/Tree/TreeTitle.tsx +++ b/packages/react/src/components/Tree/TreeTitle.tsx @@ -56,12 +56,12 @@ class TreeTitle extends UIComponent> { hasSubtree: PropTypes.bool, } - public static defaultProps = { + static defaultProps = { as: 'a', accessibility: treeTitleBehavior, } - protected actionHandlers: AccessibilityActionHandlers = { + actionHandlers: AccessibilityActionHandlers = { performClick: e => { e.preventDefault() this.handleClick(e) diff --git a/packages/react/src/lib/UIComponent.tsx b/packages/react/src/lib/UIComponent.tsx index 5f110d99f7..b59c3c8490 100644 --- a/packages/react/src/lib/UIComponent.tsx +++ b/packages/react/src/lib/UIComponent.tsx @@ -9,7 +9,7 @@ import { FocusZone } from './accessibility/FocusZone' // TODO @Bugaa92: deprecated by createComponent.tsx class UIComponent extends React.Component { - private readonly childClass = this.constructor as typeof UIComponent + readonly childClass = this.constructor as typeof UIComponent static defaultProps: { [key: string]: any } static displayName: string static className: string @@ -20,7 +20,7 @@ class UIComponent extends React.Component { /** Array of props to exclude from list of handled ones. */ static unhandledProps: string[] = [] - private static _handledPropsCache: string[] = undefined + static _handledPropsCache: string[] = undefined static get handledProps() { if (!this._handledPropsCache) { this._handledPropsCache = _.difference(_.keys(this.propTypes), this.unhandledProps).sort() @@ -29,8 +29,8 @@ class UIComponent extends React.Component { return this._handledPropsCache } - protected actionHandlers: AccessibilityActionHandlers - protected focusZone: FocusZone + actionHandlers: AccessibilityActionHandlers + focusZone: FocusZone constructor(props, context) { super(props, context) @@ -67,7 +67,7 @@ class UIComponent extends React.Component { ) } - private setFocusZoneRef = (focusZone: FocusZone): void => { + setFocusZoneRef = (focusZone: FocusZone): void => { this.focusZone = focusZone } } diff --git a/packages/react/src/lib/accessibility/FocusHandling/FocusContainer.ts b/packages/react/src/lib/accessibility/FocusHandling/FocusContainer.ts index 295d4b296f..524d00dda7 100644 --- a/packages/react/src/lib/accessibility/FocusHandling/FocusContainer.ts +++ b/packages/react/src/lib/accessibility/FocusHandling/FocusContainer.ts @@ -1,15 +1,18 @@ export class ContainerFocusHandler { - private focusedIndex = 0 - - constructor( - private getItemsCount: () => number, - private readonly setFocusAt: (number) => void, - private circular = false, - ) {} + focusedIndex = 0 + getItemsCount: () => number + readonly setFocusAt: (number) => void + circular = false + + constructor(getItemsCount: () => number, setFocusAt: (number) => void, circular = false) { + this.getItemsCount = getItemsCount + this.setFocusAt = setFocusAt + this.circular = circular + } - private noItems = (): boolean => this.getItemsCount() === 0 + noItems = (): boolean => this.getItemsCount() === 0 - private constrainFocusedIndex(): void { + constrainFocusedIndex(): void { const itemsCount = this.getItemsCount() if (this.focusedIndex < 0) { this.focusedIndex = this.circular ? itemsCount - 1 : 0 @@ -20,15 +23,15 @@ export class ContainerFocusHandler { } } - public getFocusedIndex(): number { + getFocusedIndex(): number { return this.focusedIndex } - public syncFocusedIndex(withCurrentIndex: number) { + syncFocusedIndex(withCurrentIndex: number) { this.focusedIndex = withCurrentIndex } - public movePrevious(): void { + movePrevious(): void { if (this.noItems()) { return } @@ -39,7 +42,7 @@ export class ContainerFocusHandler { this.setFocusAt(this.focusedIndex) } - public moveNext(): void { + moveNext(): void { if (this.noItems()) { return } @@ -50,7 +53,7 @@ export class ContainerFocusHandler { this.setFocusAt(this.focusedIndex) } - public moveFirst(): void { + moveFirst(): void { if (this.noItems()) { return } @@ -59,7 +62,7 @@ export class ContainerFocusHandler { this.setFocusAt(this.focusedIndex) } - public moveLast(): void { + moveLast(): void { if (this.noItems()) { return } diff --git a/packages/react/src/lib/accessibility/FocusZone/AutoFocusZone.tsx b/packages/react/src/lib/accessibility/FocusZone/AutoFocusZone.tsx index 673d45c94e..1f0535b74f 100644 --- a/packages/react/src/lib/accessibility/FocusZone/AutoFocusZone.tsx +++ b/packages/react/src/lib/accessibility/FocusZone/AutoFocusZone.tsx @@ -13,7 +13,7 @@ import callable from '../../callable' /** AutoFocusZone is used to focus inner element on mount. */ export class AutoFocusZone extends React.Component { - private root = React.createRef() + root = React.createRef() static propTypes = { as: customPropTypes.as, @@ -22,11 +22,11 @@ export class AutoFocusZone extends React.Component { static handledProps = _.keys(AutoFocusZone.propTypes) - public componentDidMount(): void { + componentDidMount(): void { this.findElementAndFocusAsync() } - public render(): JSX.Element { + render(): JSX.Element { const unhandledProps = getUnhandledProps( { handledProps: AutoFocusZone.handledProps }, this.props, @@ -41,7 +41,7 @@ export class AutoFocusZone extends React.Component { ) } - private findElementAndFocusAsync = () => { + findElementAndFocusAsync = () => { if (!this.root.current) return const { firstFocusableSelector } = this.props diff --git a/packages/react/src/lib/accessibility/FocusZone/FocusTrapZone.tsx b/packages/react/src/lib/accessibility/FocusZone/FocusTrapZone.tsx index 13887f748f..cc37473a7d 100644 --- a/packages/react/src/lib/accessibility/FocusZone/FocusTrapZone.tsx +++ b/packages/react/src/lib/accessibility/FocusZone/FocusTrapZone.tsx @@ -23,18 +23,18 @@ import getElementType from '../../getElementType' * and hide other elements outside of Focus Trap Zone from accessibility tree. * Pressing tab will circle focus within the inner focusable elements of the FocusTrapZone. */ export class FocusTrapZone extends React.Component { - private static _focusStack: FocusTrapZone[] = [] - private _root: { current: HTMLElement | null } = { current: null } - private _previouslyFocusedElementOutsideTrapZone: HTMLElement - private _previouslyFocusedElementInTrapZone?: HTMLElement - private windowRef = React.createRef() + static _focusStack: FocusTrapZone[] = [] + _root: { current: HTMLElement | null } = { current: null } + _previouslyFocusedElementOutsideTrapZone: HTMLElement + _previouslyFocusedElementInTrapZone?: HTMLElement + windowRef = React.createRef() - private createRef = elem => { + createRef = elem => { this._root.current = ReactDOM.findDOMNode(elem) as HTMLElement // @ts-ignore this.windowRef.current = getWindow(this._root.current) } - private shouldHandleOutsideClick = () => + shouldHandleOutsideClick = () => !this.props.isClickableOutsideFocusTrap || !this.props.focusTriggerOnOutsideClick static propTypes = { @@ -56,7 +56,7 @@ export class FocusTrapZone extends React.Component { isClickableOutsideFocusTrap: true, } - public componentDidMount(): void { + componentDidMount(): void { FocusTrapZone._focusStack.push(this) const { disableFirstFocus = false } = this.props @@ -72,7 +72,7 @@ export class FocusTrapZone extends React.Component { this._hideContentFromAccessibilityTree() } - public render(): JSX.Element { + render(): JSX.Element { const { className, forceFocusInsideTrap, ariaLabelledBy } = this.props const unhandledProps = getUnhandledProps( { handledProps: [..._.keys(FocusTrapZone.propTypes)] }, @@ -113,7 +113,7 @@ export class FocusTrapZone extends React.Component { ) } - public componentWillUnmount(): void { + componentWillUnmount(): void { const { ignoreExternalFocusing } = this.props FocusTrapZone._focusStack = FocusTrapZone._focusStack.filter((value: FocusTrapZone) => { @@ -144,7 +144,7 @@ export class FocusTrapZone extends React.Component { } } - private _findElementAndFocusAsync = () => { + _findElementAndFocusAsync = () => { if (!this._root.current) return const { focusPreviouslyFocusedInnerElement, firstFocusableSelector } = this.props @@ -178,7 +178,7 @@ export class FocusTrapZone extends React.Component { firstFocusableChild && focusAsync(firstFocusableChild) } - private _onFocusCapture = (ev: React.FocusEvent) => { + _onFocusCapture = (ev: React.FocusEvent) => { this.props.onFocusCapture && this.props.onFocusCapture(ev) if (ev.target !== ev.currentTarget) { // every time focus changes within the trap zone, remember the focused element so that @@ -187,7 +187,7 @@ export class FocusTrapZone extends React.Component { } } - private _onKeyboardHandler = (ev: React.KeyboardEvent): void => { + _onKeyboardHandler = (ev: React.KeyboardEvent): void => { this.props.onKeyDown && this.props.onKeyDown(ev) // do not propogate keyboard events outside focus trap zone @@ -221,7 +221,7 @@ export class FocusTrapZone extends React.Component { } } - private _forceFocusInTrap = (ev: Event, triggeredElement: HTMLElement) => { + _forceFocusInTrap = (ev: Event, triggeredElement: HTMLElement) => { if ( FocusTrapZone._focusStack.length && this === FocusTrapZone._focusStack[FocusTrapZone._focusStack.length - 1] @@ -234,12 +234,12 @@ export class FocusTrapZone extends React.Component { } } - private _handleOutsideFocus = (ev: FocusEvent): void => { + _handleOutsideFocus = (ev: FocusEvent): void => { const focusedElement = document.activeElement as HTMLElement focusedElement && this._forceFocusInTrap(ev, focusedElement) } - private _handleOutsideClick = (ev: MouseEvent): void => { + _handleOutsideClick = (ev: MouseEvent): void => { const clickedElement = ev.target as HTMLElement const { isClickableOutsideFocusTrap, focusTriggerOnOutsideClick } = this.props @@ -258,7 +258,7 @@ export class FocusTrapZone extends React.Component { } } - private _getPreviouslyFocusedElementOutsideTrapZone = () => { + _getPreviouslyFocusedElementOutsideTrapZone = () => { const { elementToFocusOnDismiss } = this.props let previouslyFocusedElement = this._previouslyFocusedElementOutsideTrapZone @@ -271,7 +271,7 @@ export class FocusTrapZone extends React.Component { return previouslyFocusedElement } - private _hideContentFromAccessibilityTree = () => { + _hideContentFromAccessibilityTree = () => { const bodyChildren = (document.body && document.body.children) || [] if (bodyChildren.length && !document.body.contains(this._root.current)) { @@ -299,7 +299,7 @@ export class FocusTrapZone extends React.Component { } } - private _showContentInAccessibilityTree = () => { + _showContentInAccessibilityTree = () => { const hiddenElements = document.querySelectorAll(`[${HIDDEN_FROM_ACC_TREE}="true"]`) for (let index = 0; index < hiddenElements.length; index++) { const element = hiddenElements[index] diff --git a/packages/react/src/lib/accessibility/FocusZone/FocusZone.tsx b/packages/react/src/lib/accessibility/FocusZone/FocusZone.tsx index 3e35af6357..19e09db772 100644 --- a/packages/react/src/lib/accessibility/FocusZone/FocusZone.tsx +++ b/packages/react/src/lib/accessibility/FocusZone/FocusZone.tsx @@ -74,19 +74,19 @@ export class FocusZone extends React.Component implements IFocus static displayName = 'FocusZone' static className = 'ms-FocusZone' - private _root: { current: HTMLElement | null } = { current: null } - private _id: string + _root: { current: HTMLElement | null } = { current: null } + _id: string /** The most recently focused child element. */ - private _activeElement: HTMLElement | null + _activeElement: HTMLElement | null /** The child element with tabindex=0. */ - private _defaultFocusElement: HTMLElement | null - private _focusAlignment: Point - private _isInnerZone: boolean + _defaultFocusElement: HTMLElement | null + _focusAlignment: Point + _isInnerZone: boolean /** Used to allow us to move to next focusable element even when we're focusing on a input element when pressing tab */ - private _processingTabKey: boolean + _processingTabKey: boolean - private windowElement: Window | null + windowElement: Window | null constructor(props: FocusZoneProps) { super(props) @@ -102,7 +102,7 @@ export class FocusZone extends React.Component implements IFocus this.onKeyDownCapture = this.onKeyDownCapture.bind(this) } - public componentDidMount(): void { + componentDidMount(): void { _allInstances[this._id] = this this.setRef(this) // called here to support functional components, we only need HTMLElement ref anyway @@ -132,7 +132,7 @@ export class FocusZone extends React.Component implements IFocus } } - public componentWillUnmount() { + componentWillUnmount() { delete _allInstances[this._id] if (this.windowElement) { this.windowElement.removeEventListener('keydown', this.onKeyDownCapture, true) @@ -167,7 +167,7 @@ export class FocusZone extends React.Component implements IFocus * @param {boolean} forceIntoFirstElement If true, focus will be forced into the first element, even if focus is already in the focus zone. * @returns True if focus could be set to an active element, false if no operation was taken. */ - public focus(forceIntoFirstElement: boolean = false): boolean { + focus(forceIntoFirstElement: boolean = false): boolean { if (this._root.current) { if ( !forceIntoFirstElement && @@ -206,7 +206,7 @@ export class FocusZone extends React.Component implements IFocus * Sets focus to the last tabbable item in the zone. * @returns True if focus could be set to an active element, false if no operation was taken. */ - public focusLast(): boolean { + focusLast(): boolean { if (this._root.current) { const lastChild = this._root.current && (this._root.current.lastChild as HTMLElement | null) @@ -229,7 +229,7 @@ export class FocusZone extends React.Component implements IFocus * @param {HTMLElement} element The child element within the zone to focus. * @returns True if focus could be set to an active element, false if no operation was taken. */ - public focusElement(element: HTMLElement): boolean { + focusElement(element: HTMLElement): boolean { const { shouldReceiveFocus } = this.props if (shouldReceiveFocus && !shouldReceiveFocus(element)) { @@ -248,12 +248,12 @@ export class FocusZone extends React.Component implements IFocus return false } - private setRef = (elem: React.ReactInstance): void => { + setRef = (elem: React.ReactInstance): void => { // findDOMNode needed to get correct DOM ref with react-hot-loader, see https://github.com/gaearon/react-hot-loader/issues/964 this._root.current = ReactDOM.findDOMNode(elem) as HTMLElement } - private _onFocus = (ev: React.FocusEvent): void => { + _onFocus = (ev: React.FocusEvent): void => { const { onActiveElementChanged, stopFocusPropagation, @@ -316,13 +316,13 @@ export class FocusZone extends React.Component implements IFocus /** * Handle global tab presses so that we can patch tabindexes on the fly. */ - private onKeyDownCapture(ev: KeyboardEvent) { + onKeyDownCapture(ev: KeyboardEvent) { if (keyboardKey.getCode(ev) === keyboardKey.Tab) { this.updateTabIndexes() } } - private _onMouseDown = (ev: React.MouseEvent): void => { + _onMouseDown = (ev: React.MouseEvent): void => { const { disabled } = this.props if (disabled) { @@ -351,7 +351,7 @@ export class FocusZone extends React.Component implements IFocus } } - private setActiveElement(element: HTMLElement, forceAlignemnt?: boolean): void { + setActiveElement(element: HTMLElement, forceAlignemnt?: boolean): void { const previousActiveElement = this._activeElement this._activeElement = element @@ -373,14 +373,14 @@ export class FocusZone extends React.Component implements IFocus } } - private preventDefaultWhenHandled(ev: React.KeyboardEvent): void { + preventDefaultWhenHandled(ev: React.KeyboardEvent): void { this.props.preventDefaultWhenHandled && ev.preventDefault() } /** * Handle the keystrokes. */ - private _onKeyDown = (ev: React.KeyboardEvent): boolean | undefined => { + _onKeyDown = (ev: React.KeyboardEvent): boolean | undefined => { const { direction, disabled, shouldEnterInnerZone } = this.props if (disabled) { @@ -562,14 +562,14 @@ export class FocusZone extends React.Component implements IFocus * Walk up the dom try to find a focusable element. * TODO */ - private tryInvokeClickForFocusable(onTarget: HTMLElement): boolean { + tryInvokeClickForFocusable(onTarget: HTMLElement): boolean { return false } /** * Traverse to find first child zone. */ - private getFirstInnerZone(forRootElement?: HTMLElement | null): FocusZone | null { + getFirstInnerZone(forRootElement?: HTMLElement | null): FocusZone | null { const rootElement = forRootElement || this._activeElement || this._root.current if (!rootElement) { @@ -598,7 +598,7 @@ export class FocusZone extends React.Component implements IFocus return null } - private moveFocus( + moveFocus( isForward: boolean, getDistanceFromCenter: (activeRect: ClientRect, targetRect: ClientRect) => number, ev?: Event, @@ -679,7 +679,7 @@ export class FocusZone extends React.Component implements IFocus return changedFocus } - private moveFocusDown(): boolean { + moveFocusDown(): boolean { let targetTop = -1 const leftAlignment = this._focusAlignment.left @@ -722,7 +722,7 @@ export class FocusZone extends React.Component implements IFocus return false } - private moveFocusUp(): boolean { + moveFocusUp(): boolean { let targetTop = -1 const leftAlignment = this._focusAlignment.left @@ -766,7 +766,7 @@ export class FocusZone extends React.Component implements IFocus return false } - private moveFocusLeft(): boolean { + moveFocusLeft(): boolean { if ( this.moveFocus( this.props.isRtl, @@ -805,7 +805,7 @@ export class FocusZone extends React.Component implements IFocus return false } - private moveFocusRight(): boolean { + moveFocusRight(): boolean { if ( this.moveFocus( !this.props.isRtl, @@ -844,7 +844,7 @@ export class FocusZone extends React.Component implements IFocus return false } - private setFocusAlignment(element: HTMLElement, isHorizontal?: boolean, isVertical?: boolean) { + setFocusAlignment(element: HTMLElement, isHorizontal?: boolean, isVertical?: boolean) { if ( this.props.direction === FocusZoneDirection.bidirectional && (!this._focusAlignment || isHorizontal || isVertical) @@ -867,11 +867,11 @@ export class FocusZone extends React.Component implements IFocus } } - private isImmediateDescendantOfZone(element?: HTMLElement): boolean { + isImmediateDescendantOfZone(element?: HTMLElement): boolean { return this.getOwnerZone(element) === this._root.current } - private getOwnerZone(element?: HTMLElement): HTMLElement | null { + getOwnerZone(element?: HTMLElement): HTMLElement | null { let parentElement = getParent(element as HTMLElement) while ( @@ -889,7 +889,7 @@ export class FocusZone extends React.Component implements IFocus return this._root.current } - private updateTabIndexes(onElement?: HTMLElement) { + updateTabIndexes(onElement?: HTMLElement) { let element = onElement if (!this._activeElement && this.props.defaultTabbableElement) { @@ -957,7 +957,7 @@ export class FocusZone extends React.Component implements IFocus } } - private isElementInput(element: HTMLElement): boolean { + isElementInput(element: HTMLElement): boolean { if ( element && element.tagName && @@ -968,7 +968,7 @@ export class FocusZone extends React.Component implements IFocus return false } - private shouldInputLoseFocus(element: HTMLInputElement, isForward?: boolean) { + shouldInputLoseFocus(element: HTMLInputElement, isForward?: boolean) { // If a tab was used, we want to focus on the next element. if ( !this._processingTabKey && diff --git a/packages/react/test/specs/behaviors/testHelper.tsx b/packages/react/test/specs/behaviors/testHelper.tsx index affd085f2a..99f29e7324 100644 --- a/packages/react/test/specs/behaviors/testHelper.tsx +++ b/packages/react/test/specs/behaviors/testHelper.tsx @@ -24,26 +24,26 @@ const skipSpecChecksForFiles = [ ] export class TestHelper { - private behaviors: Map = new Map() - private testDefinitions: TestDefinition[] = [] + behaviors: Map = new Map() + testDefinitions: TestDefinition[] = [] - private filteredSpecificationWithAssignedTestMethod: FilteredSpecification[] = [] + filteredSpecificationWithAssignedTestMethod: FilteredSpecification[] = [] - public addBehavior(name: string, behavior: Accessibility) { + addBehavior(name: string, behavior: Accessibility) { this.behaviors.set(name, behavior) } - public addTest(regexp: RegExp, testMethod: (arg: TestMethod) => void) { + addTest(regexp: RegExp, testMethod: (arg: TestMethod) => void) { this.testDefinitions.push({ regexp, testMethod }) } - public addTests(testDefinitions: TestDefinition[]) { + addTests(testDefinitions: TestDefinition[]) { testDefinitions.forEach(testDefinition => { this.testDefinitions.push(testDefinition) }) } - public run(behaviorMenuItems: any) { + run(behaviorMenuItems: any) { this.findRegexAndAssingCorrespondingInfoToArray(behaviorMenuItems) const groupedByBehavior = _.groupBy( @@ -65,7 +65,7 @@ export class TestHelper { }) } - public findRegexAndAssingCorrespondingInfoToArray(behaviorMenuItems: any) { + findRegexAndAssingCorrespondingInfoToArray(behaviorMenuItems: any) { behaviorMenuItems.forEach(behavior => { behavior.variations.forEach(variant => { if (!variant.specification && !variant.description) { @@ -84,7 +84,7 @@ export class TestHelper { }) } - public iterateRegexDefinitions(specLine: string, behaviorName: string) { + iterateRegexDefinitions(specLine: string, behaviorName: string) { let regexMatched = false this.testDefinitions.forEach(testDefinition => { const regex = new RegExp(testDefinition.regexp) @@ -107,7 +107,7 @@ export class TestHelper { } } - public getBehavior(behaviorName: string): Accessibility { + getBehavior(behaviorName: string): Accessibility { const baseBehaviorName = behaviorName.replace('.ts', '') const importedBehavior = this.behaviors.get(baseBehaviorName) if (!importedBehavior) { @@ -116,7 +116,7 @@ export class TestHelper { return importedBehavior } - public convertToMatchingTypeIfApplicable(stringToConvert: any): boolean | number | string { + convertToMatchingTypeIfApplicable(stringToConvert: any): boolean | number | string { if (stringToConvert === 'true') { return true } @@ -129,7 +129,7 @@ export class TestHelper { return stringToConvert } - private failSpecificationPresenceTest(behaviorFileName: string) { + failSpecificationPresenceTest(behaviorFileName: string) { test(`${behaviorFileName} : Accessibility behavior is missing specification tag.`, () => { fail( `Accessibility behavior should have specification tag. If tests are written in separate file then add behavior file name into 'skipSpecChecksForFiles'.`, @@ -137,7 +137,7 @@ export class TestHelper { }) } - private failDescriptionPresenceTest(behaviorFileName: string) { + failDescriptionPresenceTest(behaviorFileName: string) { test(`${behaviorFileName} : Accessibility behavior is missing description.`, () => { fail('Accessibility behavior should have description.') }) diff --git a/packages/react/test/specs/commonTests/stylesFunction-test.tsx b/packages/react/test/specs/commonTests/stylesFunction-test.tsx index 73e1e94692..1422e7143b 100644 --- a/packages/react/test/specs/commonTests/stylesFunction-test.tsx +++ b/packages/react/test/specs/commonTests/stylesFunction-test.tsx @@ -28,16 +28,16 @@ const testStylesForComponent = ({ expected, }: { props?: Props; state?: State; expected?: PropsAndState } = {}) => { class TestComponent extends UIComponent, State> { - public static className = testClassName - public static propTypes = { + static className = testClassName + static propTypes = { propsAttr: PropTypes.any, commonAttr: PropTypes.any, styles: PropTypes.any, } - public state = state + state = state - public renderComponent({ ElementType, classes, unhandledProps }): React.ReactNode { + renderComponent({ ElementType, classes, unhandledProps }): React.ReactNode { return } } diff --git a/packages/react/test/specs/lib/FocusTrapZone-test.tsx b/packages/react/test/specs/lib/FocusTrapZone-test.tsx index 4ba562d8d9..91ba7737ad 100644 --- a/packages/react/test/specs/lib/FocusTrapZone-test.tsx +++ b/packages/react/test/specs/lib/FocusTrapZone-test.tsx @@ -27,7 +27,7 @@ class FocusTrapZoneTestComponent extends React.Component< this.state = { isShowingFirst: true, isShowingSecond: false } } - public render() { + render() { return (
@@ -53,8 +53,8 @@ class FocusTrapZoneTestComponent extends React.Component< ) } - private _toggleFirst = () => this.setState({ isShowingFirst: !this.state.isShowingFirst }) - private _toggleSecond = () => this.setState({ isShowingSecond: !this.state.isShowingSecond }) + _toggleFirst = () => this.setState({ isShowingFirst: !this.state.isShowingFirst }) + _toggleSecond = () => this.setState({ isShowingSecond: !this.state.isShowingSecond }) } describe('FocusTrapZone', () => { diff --git a/yarn.lock b/yarn.lock index 9cd7cdef33..e8a7e3c3b5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1936,29 +1936,40 @@ resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-12.0.9.tgz#693e76a52f61a2f1e7fb48c0eef167b95ea4ffd0" integrity sha512-sCZy4SxP9rN2w30Hlmg5dtdRwgYQfYRiLo9usw8X9cxlf+H4FqM1xX7+sNH7NNKVdbXMJWqva7iyy+fxh/V7fA== -"@typescript-eslint/eslint-plugin@^1.6.0": - version "1.6.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-1.6.0.tgz#a5ff3128c692393fb16efa403ec7c8a5593dab0f" - integrity sha512-U224c29E2lo861TQZs6GSmyC0OYeRNg6bE9UVIiFBxN2MlA0nq2dCrgIVyyRbC05UOcrgf2Wk/CF2gGOPQKUSQ== +"@typescript-eslint/eslint-plugin@^1.9.0": + version "1.9.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-1.9.0.tgz#29d73006811bf2563b88891ceeff1c5ea9c8d9c6" + integrity sha512-FOgfBorxjlBGpDIw+0LaZIXRX6GEEUfzj8LXwaQIUCp+gDOvkI+1WgugJ7SmWiISqK9Vj5r8S7NDKO/LB+6X9A== dependencies: - "@typescript-eslint/parser" "1.6.0" - "@typescript-eslint/typescript-estree" "1.6.0" + "@typescript-eslint/experimental-utils" "1.9.0" + "@typescript-eslint/parser" "1.9.0" + eslint-utils "^1.3.1" + functional-red-black-tree "^1.0.1" + regexpp "^2.0.1" requireindex "^1.2.0" tsutils "^3.7.0" -"@typescript-eslint/parser@1.6.0", "@typescript-eslint/parser@^1.6.0": - version "1.6.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-1.6.0.tgz#f01189c8b90848e3b8e45a6cdad27870529d1804" - integrity sha512-VB9xmSbfafI+/kI4gUK3PfrkGmrJQfh0N4EScT1gZXSZyUxpsBirPL99EWZg9MmPG0pzq/gMtgkk7/rAHj4aQw== +"@typescript-eslint/experimental-utils@1.9.0", "@typescript-eslint/experimental-utils@^1.9.0": + version "1.9.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-1.9.0.tgz#a92777d0c92d7bc8627abd7cdb06cdbcaf2b39e8" + integrity sha512-1s2dY9XxBwtS9IlSnRIlzqILPyeMly5tz1bfAmQ84Ul687xBBve5YsH5A5EKeIcGurYYqY2w6RkHETXIwnwV0A== + dependencies: + "@typescript-eslint/typescript-estree" "1.9.0" + +"@typescript-eslint/parser@1.9.0", "@typescript-eslint/parser@^1.9.0": + version "1.9.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-1.9.0.tgz#5796cbfcb9a3a5757aeb671c1ac88d7a94a95962" + integrity sha512-CWgC1XrQ34H/+LwAU7vY5xteZDkNqeAkeidEpJnJgkKu0yqQ3ZhQ7S+dI6MX4vmmM1TKRbOrKuXc6W0fIHhdbA== dependencies: - "@typescript-eslint/typescript-estree" "1.6.0" + "@typescript-eslint/experimental-utils" "1.9.0" + "@typescript-eslint/typescript-estree" "1.9.0" eslint-scope "^4.0.0" eslint-visitor-keys "^1.0.0" -"@typescript-eslint/typescript-estree@1.6.0": - version "1.6.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-1.6.0.tgz#6cf43a07fee08b8eb52e4513b428c8cdc9751ef0" - integrity sha512-A4CanUwfaG4oXobD5y7EXbsOHjCwn8tj1RDd820etpPAjH+Icjc2K9e/DQM1Hac5zH2BSy+u6bjvvF2wwREvYA== +"@typescript-eslint/typescript-estree@1.9.0": + version "1.9.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-1.9.0.tgz#5d6d49be936e96fb0f859673480f89b070a5dd9b" + integrity sha512-7Eg0TEQpCkTsEwsl1lIzd6i7L3pJLQFWesV08dS87bNz0NeSjbL78gNAP1xCKaCejkds4PhpLnZkaAjx9SU8OA== dependencies: lodash.unescape "4.0.1" semver "5.5.0" @@ -5190,13 +5201,6 @@ eslint-plugin-jsx-a11y@^6.2.1: has "^1.0.3" jsx-ast-utils "^2.0.1" -eslint-plugin-prettier@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.0.1.tgz#19d521e3981f69dd6d14f64aec8c6a6ac6eb0b0d" - integrity sha512-/PMttrarPAY78PLvV3xfWibMOdMDl57hmlQ2XqFeA37wd+CJ7WSxV7txqjVPHi/AAFKd2lX0ZqfsOc/i5yFCSQ== - dependencies: - prettier-linter-helpers "^1.0.0" - eslint-plugin-react-hooks@^1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.6.0.tgz#348efcda8fb426399ac7b8609607c7b4025a6f5f" @@ -5637,11 +5641,6 @@ fast-deep-equal@^2.0.1: resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49" integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk= -fast-diff@^1.1.2: - version "1.2.0" - resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03" - integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w== - fast-glob@^2.0.2, fast-glob@^2.2.6: version "2.2.6" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.6.tgz#a5d5b697ec8deda468d85a74035290a025a95295" @@ -11010,13 +11009,6 @@ preserve@^0.2.0: resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b" integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks= -prettier-linter-helpers@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b" - integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w== - dependencies: - fast-diff "^1.1.2" - prettier@^1.15.3: version "1.15.3" resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.15.3.tgz#1feaac5bdd181237b54dbe65d874e02a1472786a" From 5ef3b2249f4ae86462a0a5c8aa0c9fe1cf5be4e8 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 5 Jun 2019 18:12:09 +0200 Subject: [PATCH 2/5] fix files --- packages/eslint-plugin/index.js | 7 +++++++ packages/internal-tooling/eslint/index.js | 4 +--- packages/react/src/components/Toolbar/Toolbar.tsx | 4 ++-- packages/react/src/components/Toolbar/ToolbarItem.tsx | 6 +++--- .../react/src/components/Toolbar/ToolbarRadioGroup.tsx | 2 +- 5 files changed, 14 insertions(+), 9 deletions(-) diff --git a/packages/eslint-plugin/index.js b/packages/eslint-plugin/index.js index 15aea70af9..5fbe2a5dc9 100644 --- a/packages/eslint-plugin/index.js +++ b/packages/eslint-plugin/index.js @@ -2,4 +2,11 @@ module.exports = { rules: { 'no-visibility-modifiers': require('./no-visibility-modifiers'), }, + configs: { + all: { + rules: { + '@stardust-ui/no-visibility-modifiers': 'error', + }, + }, + }, } diff --git a/packages/internal-tooling/eslint/index.js b/packages/internal-tooling/eslint/index.js index 36efdf0ad4..4b775ba32e 100644 --- a/packages/internal-tooling/eslint/index.js +++ b/packages/internal-tooling/eslint/index.js @@ -1,5 +1,5 @@ module.exports = { - extends: ['airbnb', 'prettier'], + extends: ['airbnb', 'prettier', 'plugin:@stardust-ui/all'], parser: '@typescript-eslint/parser', plugins: ['@typescript-eslint', 'jest', 'import', 'react-hooks', '@stardust-ui'], env: { @@ -7,8 +7,6 @@ module.exports = { 'jest/globals': true, }, rules: { - '@stardust-ui/no-visibility-modifiers': 'error', - // False positive on arg types: // https://github.com/typescript-eslint/typescript-eslint/issues/46 '@typescript-eslint/no-unused-vars': ['error', { args: 'none' }], diff --git a/packages/react/src/components/Toolbar/Toolbar.tsx b/packages/react/src/components/Toolbar/Toolbar.tsx index 66908e3016..27e00638b3 100644 --- a/packages/react/src/components/Toolbar/Toolbar.tsx +++ b/packages/react/src/components/Toolbar/Toolbar.tsx @@ -64,9 +64,9 @@ class Toolbar extends UIComponent, any> { }, }) - private renderItems(items, variables) { + renderItems(items, variables) { const itemOverridesFn = this.handleItemOverrides(variables) - return _.map(items, (item, index) => { + return _.map(items, item => { const kind = _.get(item, 'kind', 'item') switch (kind) { diff --git a/packages/react/src/components/Toolbar/ToolbarItem.tsx b/packages/react/src/components/Toolbar/ToolbarItem.tsx index 51d1d7a8c7..321ccc014e 100644 --- a/packages/react/src/components/Toolbar/ToolbarItem.tsx +++ b/packages/react/src/components/Toolbar/ToolbarItem.tsx @@ -103,19 +103,19 @@ class ToolbarItem extends UIComponent, ToolbarItemS ) } - private handleBlur = (e: React.SyntheticEvent) => { + handleBlur = (e: React.SyntheticEvent) => { this.setState({ isFromKeyboard: false }) _.invoke(this.props, 'onBlur', e, this.props) } - private handleFocus = (e: React.SyntheticEvent) => { + handleFocus = (e: React.SyntheticEvent) => { this.setState({ isFromKeyboard: isFromKeyboard() }) _.invoke(this.props, 'onFocus', e, this.props) } - private handleClick = (e: React.SyntheticEvent) => { + handleClick = (e: React.SyntheticEvent) => { const { disabled } = this.props if (disabled) { diff --git a/packages/react/src/components/Toolbar/ToolbarRadioGroup.tsx b/packages/react/src/components/Toolbar/ToolbarRadioGroup.tsx index c06d5e315e..67d772a689 100644 --- a/packages/react/src/components/Toolbar/ToolbarRadioGroup.tsx +++ b/packages/react/src/components/Toolbar/ToolbarRadioGroup.tsx @@ -56,7 +56,7 @@ class ToolbarRadioGroup extends UIComponent> }, }) - private renderItems(items, variables) { + renderItems(items, variables) { const itemOverridesFn = this.handleItemOverrides(variables) return _.map(items, (item, index) => { const kind = _.get(item, 'kind', 'item') From 4436a69e29c2df6edb4f3441c7c327e2805e4cd7 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 5 Jun 2019 18:14:08 +0200 Subject: [PATCH 3/5] fixes for master, final cleanup --- build/gulp/tasks/test-projects.tsx | 1 + packages/eslint-plugin/index.js | 2 +- packages/eslint-plugin/package.json | 6 +++++- .../{ => rules}/no-visibility-modifiers/index.js | 0 packages/internal-tooling/package.json | 1 - 5 files changed, 7 insertions(+), 3 deletions(-) rename packages/eslint-plugin/{ => rules}/no-visibility-modifiers/index.js (100%) diff --git a/build/gulp/tasks/test-projects.tsx b/build/gulp/tasks/test-projects.tsx index f1f2379c20..09e1648927 100644 --- a/build/gulp/tasks/test-projects.tsx +++ b/build/gulp/tasks/test-projects.tsx @@ -46,6 +46,7 @@ const packStardustPackages = async (logger: Function): Promise = const stardustPackages = lernaAliases({ sourceDirectory: false }) // We don't want to pack a package with our dev tools + delete stardustPackages['@stardust-ui/eslint-plugin'] delete stardustPackages['@stardust-ui/internal-tooling'] await Promise.all( diff --git a/packages/eslint-plugin/index.js b/packages/eslint-plugin/index.js index 5fbe2a5dc9..42f853ddd9 100644 --- a/packages/eslint-plugin/index.js +++ b/packages/eslint-plugin/index.js @@ -1,6 +1,6 @@ module.exports = { rules: { - 'no-visibility-modifiers': require('./no-visibility-modifiers'), + 'no-visibility-modifiers': require('./rules/no-visibility-modifiers'), }, configs: { all: { diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json index 30b63e6e5a..8a6d95f34b 100644 --- a/packages/eslint-plugin/package.json +++ b/packages/eslint-plugin/package.json @@ -1,8 +1,12 @@ { "name": "@stardust-ui/eslint-plugin", "version": "0.31.0", + "dependencies": { + "@typescript-eslint/eslint-plugin": "^1.9.0", + "@typescript-eslint/experimental-utils": "^1.9.0" + }, "files": [ - "no-visibility-modifiers" + "rules" ], "publishConfig": { "access": "public" diff --git a/packages/eslint-plugin/no-visibility-modifiers/index.js b/packages/eslint-plugin/rules/no-visibility-modifiers/index.js similarity index 100% rename from packages/eslint-plugin/no-visibility-modifiers/index.js rename to packages/eslint-plugin/rules/no-visibility-modifiers/index.js diff --git a/packages/internal-tooling/package.json b/packages/internal-tooling/package.json index 22955be25c..ab5237356d 100644 --- a/packages/internal-tooling/package.json +++ b/packages/internal-tooling/package.json @@ -12,7 +12,6 @@ "@types/jest": "^24.0.11", "@types/jest-axe": "^2.2.3", "@typescript-eslint/eslint-plugin": "^1.9.0", - "@typescript-eslint/experimental-utils": "^1.9.0", "@typescript-eslint/parser": "^1.9.0", "@stardust-ui/eslint-plugin": "^0.31.0", "babel-jest": "^24.5.0", From fbd482626a6663d9e3655f1fb9eed60e472a5b92 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 5 Jun 2019 18:50:54 +0200 Subject: [PATCH 4/5] apply only for .tsx files --- build/gulp/plugins/util/docgen.ts | 22 ++++++------- .../prototypes/chatPane/services/dataMock.ts | 21 +++++------- packages/eslint-plugin/index.js | 7 ---- packages/internal-tooling/eslint/index.js | 8 ++++- .../src/lib/RefStack.ts | 8 ++--- .../FocusHandling/FocusContainer.ts | 33 +++++++++---------- 6 files changed, 46 insertions(+), 53 deletions(-) diff --git a/build/gulp/plugins/util/docgen.ts b/build/gulp/plugins/util/docgen.ts index 5987e8f9f6..1817bbe2dc 100644 --- a/build/gulp/plugins/util/docgen.ts +++ b/build/gulp/plugins/util/docgen.ts @@ -207,15 +207,15 @@ const getComponentSymbolOfType = (type: MaybeIntersectType) => { } export class Parser { - checker: ts.TypeChecker - propFilter: PropFilter + private checker: ts.TypeChecker + private propFilter: PropFilter constructor(program: ts.Program, opts: ParserOptions) { this.checker = program.getTypeChecker() this.propFilter = defaultPropFilter } - getComponentInfo( + public getComponentInfo( symbolParam: ts.Symbol, source: ts.SourceFile, componentNameResolver: ComponentNameResolver = () => undefined, @@ -294,7 +294,7 @@ export class Parser { return null } - extractPropsFromTypeIfStatelessComponent(type: ts.Type): ts.Symbol | null { + public extractPropsFromTypeIfStatelessComponent(type: ts.Type): ts.Symbol | null { const callSignatures = type.getCallSignatures() if (callSignatures.length) { @@ -318,7 +318,7 @@ export class Parser { return null } - extractPropsFromTypeIfStatefulComponent(type: ts.Type): ts.Symbol | null { + public extractPropsFromTypeIfStatefulComponent(type: ts.Type): ts.Symbol | null { const constructSignatures = type.getConstructSignatures() if (constructSignatures.length) { @@ -338,7 +338,7 @@ export class Parser { return null } - getPropsInfo(propsObj: ts.Symbol, defaultProps: StringIndexedObject = {}): Props { + public getPropsInfo(propsObj: ts.Symbol, defaultProps: StringIndexedObject = {}): Props { if (!propsObj.valueDeclaration) { return {} } @@ -383,7 +383,7 @@ export class Parser { return result } - findDocComment(symbol: ts.Symbol): JSDoc { + public findDocComment(symbol: ts.Symbol): JSDoc { const comment = this.getFullJsDocComment(symbol) if (comment.fullComment) { return comment @@ -407,7 +407,7 @@ export class Parser { * though TypeScript has broken down the JsDoc comment into plain * text and JsDoc tags. */ - getFullJsDocComment(symbol: ts.Symbol): JSDoc { + public getFullJsDocComment(symbol: ts.Symbol): JSDoc { // in some cases this can be undefined (Pick) if (symbol.getDocumentationComment === undefined) { return defaultJSDoc @@ -441,7 +441,7 @@ export class Parser { } } - extractDefaultPropsFromComponent(symbol: ts.Symbol, source: ts.SourceFile) { + public extractDefaultPropsFromComponent(symbol: ts.Symbol, source: ts.SourceFile) { let possibleStatements = source.statements // ensure that name property is available .filter(stmt => !!(stmt as ts.ClassDeclaration).name) @@ -513,7 +513,7 @@ export class Parser { return {} } - getLiteralValueFromPropertyAssignment(property: ts.PropertyAssignment): string | null { + public getLiteralValueFromPropertyAssignment(property: ts.PropertyAssignment): string | null { let { initializer } = property // Shorthand properties, so inflect their actual value @@ -559,7 +559,7 @@ export class Parser { } } - getPropMap(properties: ts.NodeArray): StringIndexedObject { + public getPropMap(properties: ts.NodeArray): StringIndexedObject { const propMap = properties.reduce( (acc, property) => { if (ts.isSpreadAssignment(property) || !property.name) { diff --git a/docs/src/prototypes/chatPane/services/dataMock.ts b/docs/src/prototypes/chatPane/services/dataMock.ts index b2faf8e9a6..e24a220291 100644 --- a/docs/src/prototypes/chatPane/services/dataMock.ts +++ b/docs/src/prototypes/chatPane/services/dataMock.ts @@ -10,24 +10,21 @@ export interface ChatOptions { const userStatuses: UserStatus[] = ['Available', 'Away', 'DoNotDisturb', 'Offline'] class ChatMock { - static readonly minUserCount = 2 - static readonly defaultCount = 10 - static readonly daysAgo = 40 + private static readonly minUserCount = 2 + private static readonly defaultCount = 10 + private static readonly daysAgo = 40 - userIds: string[] = [] - usersMap: Map = new Map() - chatMessages: MessageData[] = [] - chat: ChatData - options: ChatOptions + private userIds: string[] = [] + private usersMap: Map = new Map() + private chatMessages: MessageData[] = [] + public chat: ChatData constructor( - options: ChatOptions = { + private options: ChatOptions = { userCount: ChatMock.defaultCount, msgCount: ChatMock.defaultCount, }, ) { - this.options = options - if (this.options.userCount < ChatMock.minUserCount) { throw `[ChatMock]: A chat has a minimum of ${ChatMock.minUserCount} users` } @@ -84,7 +81,7 @@ class ChatMock { } } - getRandomUser(max: number = this.usersMap.size - 1): UserData { + private getRandomUser(max: number = this.usersMap.size - 1): UserData { return this.usersMap.get(this.userIds[random.number({ max, precision: 1 })]) } } diff --git a/packages/eslint-plugin/index.js b/packages/eslint-plugin/index.js index 42f853ddd9..e66df08cbb 100644 --- a/packages/eslint-plugin/index.js +++ b/packages/eslint-plugin/index.js @@ -2,11 +2,4 @@ module.exports = { rules: { 'no-visibility-modifiers': require('./rules/no-visibility-modifiers'), }, - configs: { - all: { - rules: { - '@stardust-ui/no-visibility-modifiers': 'error', - }, - }, - }, } diff --git a/packages/internal-tooling/eslint/index.js b/packages/internal-tooling/eslint/index.js index 4b775ba32e..0e07259725 100644 --- a/packages/internal-tooling/eslint/index.js +++ b/packages/internal-tooling/eslint/index.js @@ -1,5 +1,5 @@ module.exports = { - extends: ['airbnb', 'prettier', 'plugin:@stardust-ui/all'], + extends: ['airbnb', 'prettier'], parser: '@typescript-eslint/parser', plugins: ['@typescript-eslint', 'jest', 'import', 'react-hooks', '@stardust-ui'], env: { @@ -109,6 +109,12 @@ module.exports = { 'import/no-extraneous-dependencies': 'off', }, }, + { + files: '**/*.tsx', + rules: { + '@stardust-ui/no-visibility-modifiers': 'error', + }, + }, ], settings: { 'import/resolver': { diff --git a/packages/react-component-nesting-registry/src/lib/RefStack.ts b/packages/react-component-nesting-registry/src/lib/RefStack.ts index 5db5ca7f18..e2171b9769 100644 --- a/packages/react-component-nesting-registry/src/lib/RefStack.ts +++ b/packages/react-component-nesting-registry/src/lib/RefStack.ts @@ -1,20 +1,20 @@ import { NodeRef } from '../types' export default class RefStack { - set = new Set() + private set = new Set() - getContextRefs = (ref: NodeRef): NodeRef[] => { + public getContextRefs = (ref: NodeRef): NodeRef[] => { const nodes = Array.from(this.set) const refId = nodes.indexOf(ref) return nodes.slice(refId) } - register = (ref: NodeRef): void => { + public register = (ref: NodeRef): void => { this.set.add(ref) } - unregister = (ref: NodeRef): void => { + public unregister = (ref: NodeRef): void => { this.set.delete(ref) } } diff --git a/packages/react/src/lib/accessibility/FocusHandling/FocusContainer.ts b/packages/react/src/lib/accessibility/FocusHandling/FocusContainer.ts index 524d00dda7..295d4b296f 100644 --- a/packages/react/src/lib/accessibility/FocusHandling/FocusContainer.ts +++ b/packages/react/src/lib/accessibility/FocusHandling/FocusContainer.ts @@ -1,18 +1,15 @@ export class ContainerFocusHandler { - focusedIndex = 0 - getItemsCount: () => number - readonly setFocusAt: (number) => void - circular = false - - constructor(getItemsCount: () => number, setFocusAt: (number) => void, circular = false) { - this.getItemsCount = getItemsCount - this.setFocusAt = setFocusAt - this.circular = circular - } + private focusedIndex = 0 + + constructor( + private getItemsCount: () => number, + private readonly setFocusAt: (number) => void, + private circular = false, + ) {} - noItems = (): boolean => this.getItemsCount() === 0 + private noItems = (): boolean => this.getItemsCount() === 0 - constrainFocusedIndex(): void { + private constrainFocusedIndex(): void { const itemsCount = this.getItemsCount() if (this.focusedIndex < 0) { this.focusedIndex = this.circular ? itemsCount - 1 : 0 @@ -23,15 +20,15 @@ export class ContainerFocusHandler { } } - getFocusedIndex(): number { + public getFocusedIndex(): number { return this.focusedIndex } - syncFocusedIndex(withCurrentIndex: number) { + public syncFocusedIndex(withCurrentIndex: number) { this.focusedIndex = withCurrentIndex } - movePrevious(): void { + public movePrevious(): void { if (this.noItems()) { return } @@ -42,7 +39,7 @@ export class ContainerFocusHandler { this.setFocusAt(this.focusedIndex) } - moveNext(): void { + public moveNext(): void { if (this.noItems()) { return } @@ -53,7 +50,7 @@ export class ContainerFocusHandler { this.setFocusAt(this.focusedIndex) } - moveFirst(): void { + public moveFirst(): void { if (this.noItems()) { return } @@ -62,7 +59,7 @@ export class ContainerFocusHandler { this.setFocusAt(this.focusedIndex) } - moveLast(): void { + public moveLast(): void { if (this.noItems()) { return } From e7def51646a7f43284ad8706268282ed913421c1 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 6 Jun 2019 10:17:38 +0200 Subject: [PATCH 5/5] fix review comment --- .../rules/no-visibility-modifiers/index.js | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/eslint-plugin/rules/no-visibility-modifiers/index.js b/packages/eslint-plugin/rules/no-visibility-modifiers/index.js index 6690f5b1ca..67b115c890 100644 --- a/packages/eslint-plugin/rules/no-visibility-modifiers/index.js +++ b/packages/eslint-plugin/rules/no-visibility-modifiers/index.js @@ -44,15 +44,9 @@ module.exports = createRule({ */ function checkMethodAccessibilityModifier(methodDefinition) { let nodeType = 'method definition' - switch (methodDefinition.kind) { - case 'method': - break - case 'constructor': - break - case 'get': - case 'set': - nodeType = `${methodDefinition.kind} property accessor` - break + + if (['get', 'set'].includes(methodDefinition.kind)) { + nodeType = `${methodDefinition.kind} property accessor` } if (util.isTypeScriptFile(context.getFilename())) {