From e77175a3c021035a1dcc9463b337b4cec3a16257 Mon Sep 17 00:00:00 2001 From: redallen Date: Tue, 14 Apr 2020 11:40:52 -0400 Subject: [PATCH] feat(react-inline-edit-extension): convert to TS --- .../build/copyStyles.js | 42 ---- .../build/snapshot-serializer.js | 8 - .../react-inline-edit-extension/package.json | 13 +- .../scripts/copyTS.js | 17 -- .../editableTableBody.js => Body/Body.tsx} | 114 ++++------ .../src/components/Body/index.ts | 1 + .../components/CancelButton/CancelButton.js | 18 -- .../components/CancelButton/CancelButton.tsx | 9 + .../CancelButton/{index.js => index.ts} | 0 .../components/ConfirmButton/ConfirmButton.js | 18 -- .../ConfirmButton/ConfirmButton.tsx | 9 + .../ConfirmButton/{index.js => index.ts} | 0 .../ConfirmButtons.test.js | 0 .../ConfirmButtons.tsx} | 72 ++---- .../__snapshots__/ConfirmButtons.test.js.snap | 2 - .../src/components/ConfirmButtons/index.ts | 1 + ...it.api.test.js => InlineEdit.api.test.tsx} | 3 +- ....snap => editableRowWrapper.test.tsx.snap} | 31 +-- .../src/components/InlineEdit/constants.d.ts | 7 - ...{inline-edit-css.js => inline-edit-css.ts} | 0 .../InlineEdit/editableRowWrapper.d.ts | 24 -- ...er.test.js => editableRowWrapper.test.tsx} | 11 +- ...leRowWrapper.js => editableRowWrapper.tsx} | 206 ++++++++++-------- .../InlineEdit/editableTableBody.d.ts | 29 --- .../InlineEdit/editableTableBody.tsx | 29 +++ .../src/components/InlineEdit/index.d.ts | 6 - .../src/components/InlineEdit/index.js | 4 - .../src/components/InlineEdit/index.ts | 4 + .../inlineEditFormatterFactory.d.ts | 34 --- .../formatters/inlineEditFormatterFactory.js | 21 -- .../components/InlineEdit/utils/index.d.ts | 1 - .../src/components/InlineEdit/utils/utils.js | 39 ---- .../TableTextInput/TableTextInput.d.ts | 10 - .../TableTextInput/TableTextInput.js | 50 ----- .../TableTextInput/TableTextInput.tsx | 32 +++ .../__snapshots__/TableTextInput.test.js.snap | 27 +-- .../constants.js => utils/constants.ts} | 0 .../formatters.js => utils/formatters.ts} | 0 .../index.d.ts => utils/formatters/index.ts} | 0 .../inlineEditFormatterFactory.test.js | 0 .../formatters/inlineEditFormatterFactory.ts | 59 +++++ .../utils/index.js => utils/index.ts} | 1 + .../src/utils/utils.ts | 46 ++++ .../tsconfig.gen-dts.json | 17 ++ 44 files changed, 418 insertions(+), 597 deletions(-) delete mode 100644 packages/react-inline-edit-extension/build/copyStyles.js delete mode 100644 packages/react-inline-edit-extension/build/snapshot-serializer.js delete mode 100644 packages/react-inline-edit-extension/scripts/copyTS.js rename packages/react-inline-edit-extension/src/components/{InlineEdit/editableTableBody.js => Body/Body.tsx} (57%) create mode 100644 packages/react-inline-edit-extension/src/components/Body/index.ts delete mode 100644 packages/react-inline-edit-extension/src/components/CancelButton/CancelButton.js create mode 100644 packages/react-inline-edit-extension/src/components/CancelButton/CancelButton.tsx rename packages/react-inline-edit-extension/src/components/CancelButton/{index.js => index.ts} (100%) delete mode 100644 packages/react-inline-edit-extension/src/components/ConfirmButton/ConfirmButton.js create mode 100644 packages/react-inline-edit-extension/src/components/ConfirmButton/ConfirmButton.tsx rename packages/react-inline-edit-extension/src/components/ConfirmButton/{index.js => index.ts} (100%) rename packages/react-inline-edit-extension/src/components/{InlineEdit => ConfirmButtons}/ConfirmButtons.test.js (100%) rename packages/react-inline-edit-extension/src/components/{InlineEdit/ConfirmButtons.js => ConfirmButtons/ConfirmButtons.tsx} (51%) rename packages/react-inline-edit-extension/src/components/{InlineEdit => ConfirmButtons}/__snapshots__/ConfirmButtons.test.js.snap (98%) create mode 100644 packages/react-inline-edit-extension/src/components/ConfirmButtons/index.ts rename packages/react-inline-edit-extension/src/components/InlineEdit/{InlineEdit.api.test.js => InlineEdit.api.test.tsx} (97%) rename packages/react-inline-edit-extension/src/components/InlineEdit/__snapshots__/{editableRowWrapper.test.js.snap => editableRowWrapper.test.tsx.snap} (62%) delete mode 100644 packages/react-inline-edit-extension/src/components/InlineEdit/constants.d.ts rename packages/react-inline-edit-extension/src/components/InlineEdit/css/{inline-edit-css.js => inline-edit-css.ts} (100%) delete mode 100644 packages/react-inline-edit-extension/src/components/InlineEdit/editableRowWrapper.d.ts rename packages/react-inline-edit-extension/src/components/InlineEdit/{editableRowWrapper.test.js => editableRowWrapper.test.tsx} (93%) rename packages/react-inline-edit-extension/src/components/InlineEdit/{editableRowWrapper.js => editableRowWrapper.tsx} (51%) delete mode 100644 packages/react-inline-edit-extension/src/components/InlineEdit/editableTableBody.d.ts create mode 100644 packages/react-inline-edit-extension/src/components/InlineEdit/editableTableBody.tsx delete mode 100644 packages/react-inline-edit-extension/src/components/InlineEdit/index.d.ts delete mode 100644 packages/react-inline-edit-extension/src/components/InlineEdit/index.js create mode 100644 packages/react-inline-edit-extension/src/components/InlineEdit/index.ts delete mode 100644 packages/react-inline-edit-extension/src/components/InlineEdit/utils/formatters/inlineEditFormatterFactory.d.ts delete mode 100644 packages/react-inline-edit-extension/src/components/InlineEdit/utils/formatters/inlineEditFormatterFactory.js delete mode 100644 packages/react-inline-edit-extension/src/components/InlineEdit/utils/index.d.ts delete mode 100644 packages/react-inline-edit-extension/src/components/InlineEdit/utils/utils.js delete mode 100644 packages/react-inline-edit-extension/src/components/TableTextInput/TableTextInput.d.ts delete mode 100644 packages/react-inline-edit-extension/src/components/TableTextInput/TableTextInput.js create mode 100644 packages/react-inline-edit-extension/src/components/TableTextInput/TableTextInput.tsx rename packages/react-inline-edit-extension/src/{components/InlineEdit/constants.js => utils/constants.ts} (100%) rename packages/react-inline-edit-extension/src/{components/InlineEdit/utils/formatters.js => utils/formatters.ts} (100%) rename packages/react-inline-edit-extension/src/{components/InlineEdit/utils/formatters/index.d.ts => utils/formatters/index.ts} (100%) rename packages/react-inline-edit-extension/src/{components/InlineEdit => }/utils/formatters/inlineEditFormatterFactory.test.js (100%) create mode 100644 packages/react-inline-edit-extension/src/utils/formatters/inlineEditFormatterFactory.ts rename packages/react-inline-edit-extension/src/{components/InlineEdit/utils/index.js => utils/index.ts} (65%) create mode 100644 packages/react-inline-edit-extension/src/utils/utils.ts create mode 100644 packages/react-inline-edit-extension/tsconfig.gen-dts.json diff --git a/packages/react-inline-edit-extension/build/copyStyles.js b/packages/react-inline-edit-extension/build/copyStyles.js deleted file mode 100644 index c33f095490f..00000000000 --- a/packages/react-inline-edit-extension/build/copyStyles.js +++ /dev/null @@ -1,42 +0,0 @@ -const { copySync, readFileSync, writeFileSync } = require('fs-extra'); -const { resolve, dirname, join } = require('path'); -const { parse: parseCSS, stringify: stringifyCSS } = require('css'); - -const baseCSSFilename = 'patternfly-base.css'; -const stylesDir = resolve(__dirname, '../dist/styles'); -const pfDir = dirname(require.resolve(`@patternfly/patternfly/${baseCSSFilename}`)); - -const css = readFileSync(join(pfDir, baseCSSFilename), 'utf8'); -const ast = parseCSS(css); - -const unusedSelectorRegEx = /(\.fas?|\.sr-only)/; -const unusedKeyFramesRegEx = /fa-/; -const unusedFontFamilyRegEx = /Font Awesome 5 Free/; -const ununsedFontFilesRegExt = /(fa-|\.html$|\.css$)/; - -// Core provides font awesome fonts and utlities. React does not use these -ast.stylesheet.rules = ast.stylesheet.rules.filter(rule => { - switch (rule.type) { - case 'rule': - return !rule.selectors.some(sel => unusedSelectorRegEx.test(sel)); - case 'keyframes': - return !unusedKeyFramesRegEx.test(rule.name); - case 'charset': - case 'comment': - return false; - case 'font-face': { - const fontFamilyDecl = rule.declarations.find(decl => decl.property === 'font-family'); - return !unusedFontFamilyRegEx.test(fontFamilyDecl.value); - } - default: - return true; - } -}); - -copySync(join(pfDir, 'assets/images'), join(stylesDir, 'assets/images')); -copySync(join(pfDir, 'assets/fonts'), join(stylesDir, 'assets/fonts'), { - filter(src) { - return !ununsedFontFilesRegExt.test(src); - } -}); -writeFileSync(join(stylesDir, 'base.css'), stringifyCSS(ast)); diff --git a/packages/react-inline-edit-extension/build/snapshot-serializer.js b/packages/react-inline-edit-extension/build/snapshot-serializer.js deleted file mode 100644 index 0edb3cb5b4c..00000000000 --- a/packages/react-inline-edit-extension/build/snapshot-serializer.js +++ /dev/null @@ -1,8 +0,0 @@ -const fs = require('fs'); -const { createSerializer } = require('@patternfly/react-styles/snapshot-serializer'); - -const pf4CSS = fs.readFileSync(require.resolve('@patternfly/patternfly/patternfly-base.css'), 'utf8'); - -module.exports = createSerializer({ - globalCSS: pf4CSS.match(/:root\W?\{(.|\n)*?\}/)[0] -}); diff --git a/packages/react-inline-edit-extension/package.json b/packages/react-inline-edit-extension/package.json index d67fb31ea41..91ed56c5b7e 100644 --- a/packages/react-inline-edit-extension/package.json +++ b/packages/react-inline-edit-extension/package.json @@ -41,14 +41,14 @@ "react-dom": "^15.6.2 || ^16.4.0" }, "scripts": { - "build": "yarn build:babel && node ./scripts/copyTS.js", + "build": "yarn build:babel && yarn build:types", "build:babel": "concurrently \"yarn build:babel:esm && yarn build:babel:umd\" \"yarn build:babel:cjs\"", "build:babel:cjs": "babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/js --presets=@babel/env", "build:babel:esm": "babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/esm", "build:babel:umd": "babel --source-maps --extensions \".js\" dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd", + "build:types": "tsc -p tsconfig.gen-dts.json", "clean": "rimraf dist", - "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose", - "postbuild": "node ./build/copyStyles.js" + "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose" }, "devDependencies": { "@babel/cli": "^7.0.0", @@ -61,10 +61,7 @@ "@babel/preset-react": "^7.0.0", "babel-plugin-transform-es2015-modules-umd": "^6.24.1", "babel-plugin-typescript-to-proptypes": "^0.17.1", - "css": "^2.2.3", - "fs-extra": "^6.0.1", - "glob": "^7.1.2", - "npmlog": "^4.1.2", - "rimraf": "^2.6.2" + "rimraf": "^2.6.2", + "typescript": "^3.8.3" } } diff --git a/packages/react-inline-edit-extension/scripts/copyTS.js b/packages/react-inline-edit-extension/scripts/copyTS.js deleted file mode 100644 index 7f55c3a234a..00000000000 --- a/packages/react-inline-edit-extension/scripts/copyTS.js +++ /dev/null @@ -1,17 +0,0 @@ -const path = require('path'); -const glob = require('glob'); -const fse = require('fs-extra'); -const log = require('npmlog'); - -const srcDir = path.join('./src'); -const distDir = path.join('./dist/js'); - -const files = glob.sync('**/*.d.ts', { - cwd: srcDir -}); -files.forEach(file => { - const from = path.join(srcDir, file); - const to = path.join(distDir, file); - log.info('copyTS', `${from} --> ${to}`); - fse.copySync(from, to); -}); diff --git a/packages/react-inline-edit-extension/src/components/InlineEdit/editableTableBody.js b/packages/react-inline-edit-extension/src/components/Body/Body.tsx similarity index 57% rename from packages/react-inline-edit-extension/src/components/InlineEdit/editableTableBody.js rename to packages/react-inline-edit-extension/src/components/Body/Body.tsx index 49330e463e7..b4f78e8ed20 100644 --- a/packages/react-inline-edit-extension/src/components/InlineEdit/editableTableBody.js +++ b/packages/react-inline-edit-extension/src/components/Body/Body.tsx @@ -1,29 +1,17 @@ -import React from 'react'; -import { TableContext, TableBody, isRowExpanded } from '@patternfly/react-table'; - -import PropTypes from 'prop-types'; -import { TableEditConfirmation } from './constants'; -import { showIdWarnings } from './utils/utils'; - -const propTypes = { - ...TableBody.propTypes, - editConfig: PropTypes.shape({ - editConfirmationType: PropTypes.oneOf(Object.values(TableEditConfirmation)), - onEditCellClicked: PropTypes.func, - onEditConfirmed: PropTypes.func, - onEditCanceled: PropTypes.func - }).isRequired, - /** Function that is fired when user clicks on a row if not editing. */ - onRowClick: PropTypes.func -}; - -const defaultProps = { - ...TableBody.defaultProps, - editConfig: null, - onRowClick: () => undefined -}; - -const resolveCascadeEditability = rows => { +import * as React from 'react'; +import { + TableBodyProps, + isRowExpanded, + IRowData, + IExtraRowData, + TableBody, + IRow, + IComputedData +} from '@patternfly/react-table'; +import { showIdWarnings, TableEditConfirmation } from '../../utils'; +import { IEditedCellData } from '../InlineEdit/editableTableBody'; + +const resolveCascadeEditability = (rows: ExtendedIRow[]) => { // eslint-disable-next-line no-undef const isRowExpandedIndexes = new Set( rows.map((row, idx) => (isRowExpanded(row, rows) ? idx : null)).filter(row => row !== null) @@ -56,14 +44,20 @@ const resolveCascadeEditability = rows => { } }; -const onRow = (event, row, rowProps, computedData, { onRowClick, editConfig }) => { - const { target } = event; +const onRow = ( + event: React.MouseEvent, + row: IRow, + rowProps: IExtraRowData, + computedData: IComputedData, + { onRowClick, editConfig }: InlineEditBodyProps +) => { + const target = event.target as any; const cell = target.closest('[data-key]'); // eslint-disable-next-line radix const cellNumber = parseInt(cell && cell.getAttribute('data-key'), 10); const hasCellNumber = !Number.isNaN(cellNumber); - let onEditCellClicked; + let onEditCellClicked: () => void; if (hasCellNumber && editConfig && typeof editConfig.onEditCellClicked === 'function') { // resolve closest (e.g. for dropdowns) usable id of a clicked element inside a cell @@ -75,7 +69,7 @@ const onRow = (event, row, rowProps, computedData, { onRowClick, editConfig }) = } onEditCellClicked = () => { - editConfig.onEditCellClicked(event, row, { + editConfig.onEditCellClicked(event as any, row, { ...rowProps, columnIndex: cellNumber, elementId @@ -98,13 +92,34 @@ const onRow = (event, row, rowProps, computedData, { onRowClick, editConfig }) = }, 0); }; -const Body = ({ BodyComponent, rows, editConfig, onRowClick, ...props }) => { +export interface EditConfig { + editConfirmationType?: typeof TableEditConfirmation | keyof typeof TableEditConfirmation; + onEditCellClicked?: (value: React.MouseEvent, row: IRowData, extra: IEditedCellData) => void; + onEditConfirmed?: (value: React.MouseEvent, row: IRowData, rowProps: IExtraRowData) => void; + onEditCanceled?: (value: React.MouseEvent, row: IRowData, rowProps: IExtraRowData) => void; +} + +export interface InlineEditBodyProps extends TableBodyProps { + editConfig: EditConfig; +} + +export interface BodyProps extends TableBodyProps { + BodyComponent: typeof TableBody; + editConfig: EditConfig; +} + +interface ExtendedIRow extends IRow { + editConfig: EditConfig; + isTableEditing: boolean; +} + +export const Body = ({ BodyComponent, rows = [], editConfig, onRowClick = () => {}, ...props }: BodyProps) => { const isTableEditing = rows.some(row => row.isEditing); const mappedRows = rows.map(row => ({ ...row, editConfig, isTableEditing - })); + })) as ExtendedIRow[]; resolveCascadeEditability(mappedRows); @@ -118,38 +133,3 @@ const Body = ({ BodyComponent, rows, editConfig, onRowClick, ...props }) => { /> ); }; - -Body.propTypes = { - BodyComponent: PropTypes.any.isRequired, - rows: PropTypes.array, - editConfig: PropTypes.any, - onRowClick: PropTypes.func -}; - -Body.defaultProps = { - rows: [], - editConfig: null, - onRowClick: () => undefined -}; - -export const editableTableBody = BodyComponent => { - const InlineEditBody = ({ editConfig, onRowClick, ...props }) => ( - - {({ rows, ...consumedProps }) => ( - - )} - - ); - - InlineEditBody.propTypes = propTypes; - InlineEditBody.defaultProps = defaultProps; - - return InlineEditBody; -}; diff --git a/packages/react-inline-edit-extension/src/components/Body/index.ts b/packages/react-inline-edit-extension/src/components/Body/index.ts new file mode 100644 index 00000000000..0b63ac83587 --- /dev/null +++ b/packages/react-inline-edit-extension/src/components/Body/index.ts @@ -0,0 +1 @@ +export * from './Body'; diff --git a/packages/react-inline-edit-extension/src/components/CancelButton/CancelButton.js b/packages/react-inline-edit-extension/src/components/CancelButton/CancelButton.js deleted file mode 100644 index 75656bd9a1a..00000000000 --- a/packages/react-inline-edit-extension/src/components/CancelButton/CancelButton.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import CloseIcon from '@patternfly/react-icons/dist/js/icons/close-icon'; -import { Button } from '@patternfly/react-core'; - -export const CancelButton = props => ( - -); - -CancelButton.propTypes = { - ...Button.propTypes -}; - -CancelButton.defaultProps = { - ...Button.defaultProps, - variant: 'plain' -}; diff --git a/packages/react-inline-edit-extension/src/components/CancelButton/CancelButton.tsx b/packages/react-inline-edit-extension/src/components/CancelButton/CancelButton.tsx new file mode 100644 index 00000000000..8dfbf9e148a --- /dev/null +++ b/packages/react-inline-edit-extension/src/components/CancelButton/CancelButton.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; +import CloseIcon from '@patternfly/react-icons/dist/js/icons/close-icon'; +import { Button, ButtonProps } from '@patternfly/react-core'; + +export const CancelButton: React.FunctionComponent = ({ variant = 'plain', ...props }: ButtonProps) => ( + +); diff --git a/packages/react-inline-edit-extension/src/components/CancelButton/index.js b/packages/react-inline-edit-extension/src/components/CancelButton/index.ts similarity index 100% rename from packages/react-inline-edit-extension/src/components/CancelButton/index.js rename to packages/react-inline-edit-extension/src/components/CancelButton/index.ts diff --git a/packages/react-inline-edit-extension/src/components/ConfirmButton/ConfirmButton.js b/packages/react-inline-edit-extension/src/components/ConfirmButton/ConfirmButton.js deleted file mode 100644 index a3a3de1b2cd..00000000000 --- a/packages/react-inline-edit-extension/src/components/ConfirmButton/ConfirmButton.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon'; -import { Button } from '@patternfly/react-core'; - -export const ConfirmButton = props => ( - -); - -ConfirmButton.propTypes = { - ...Button.propTypes -}; - -ConfirmButton.defaultProps = { - ...Button.defaultProps, - variant: 'primary' -}; diff --git a/packages/react-inline-edit-extension/src/components/ConfirmButton/ConfirmButton.tsx b/packages/react-inline-edit-extension/src/components/ConfirmButton/ConfirmButton.tsx new file mode 100644 index 00000000000..49c73aa3748 --- /dev/null +++ b/packages/react-inline-edit-extension/src/components/ConfirmButton/ConfirmButton.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; +import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon'; +import { Button, ButtonProps } from '@patternfly/react-core'; + +export const ConfirmButton: React.FunctionComponent = ({ variant = 'primary', ...props }: ButtonProps) => ( + +); diff --git a/packages/react-inline-edit-extension/src/components/ConfirmButton/index.js b/packages/react-inline-edit-extension/src/components/ConfirmButton/index.ts similarity index 100% rename from packages/react-inline-edit-extension/src/components/ConfirmButton/index.js rename to packages/react-inline-edit-extension/src/components/ConfirmButton/index.ts diff --git a/packages/react-inline-edit-extension/src/components/InlineEdit/ConfirmButtons.test.js b/packages/react-inline-edit-extension/src/components/ConfirmButtons/ConfirmButtons.test.js similarity index 100% rename from packages/react-inline-edit-extension/src/components/InlineEdit/ConfirmButtons.test.js rename to packages/react-inline-edit-extension/src/components/ConfirmButtons/ConfirmButtons.test.js diff --git a/packages/react-inline-edit-extension/src/components/InlineEdit/ConfirmButtons.js b/packages/react-inline-edit-extension/src/components/ConfirmButtons/ConfirmButtons.tsx similarity index 51% rename from packages/react-inline-edit-extension/src/components/InlineEdit/ConfirmButtons.js rename to packages/react-inline-edit-extension/src/components/ConfirmButtons/ConfirmButtons.tsx index 50b3339f5a3..21c5ec02238 100644 --- a/packages/react-inline-edit-extension/src/components/InlineEdit/ConfirmButtons.js +++ b/packages/react-inline-edit-extension/src/components/ConfirmButtons/ConfirmButtons.tsx @@ -1,12 +1,12 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { css } from '@patternfly/react-styles'; import { CancelButton } from '../CancelButton'; import { ConfirmButton } from '../ConfirmButton'; import '@patternfly/react-styles/css/components/Table/inline-edit.css'; -import { inlineEditStyles as styles } from './css/inline-edit-css'; +import { inlineEditStyles as styles } from '../InlineEdit/css/inline-edit-css'; +import { WindowDimensions, ClientBoundingRect } from '../../utils'; -const buttonsTopPosition = (window, rowDimensions, bold) => { +const buttonsTopPosition = (window: WindowDimensions, rowDimensions: ClientBoundingRect, bold: boolean) => { const boldShift = bold ? -1 : 0; return { bottom: window.height - rowDimensions.top - 1 + boldShift, @@ -14,7 +14,7 @@ const buttonsTopPosition = (window, rowDimensions, bold) => { }; }; -const buttonsBottomPosition = (window, rowDimensions, bold) => { +const buttonsBottomPosition = (window: WindowDimensions, rowDimensions: ClientBoundingRect, bold: boolean) => { const boldShift = bold ? -1 : 0; return { top: rowDimensions.bottom - 1 + boldShift, @@ -22,14 +22,28 @@ const buttonsBottomPosition = (window, rowDimensions, bold) => { }; }; +export interface Environment { + window: WindowDimensions; + row: ClientBoundingRect; +} + +export interface ConfirmButtonProps { + environment: Environment; + buttonsOnTop?: boolean; + boldBorder?: boolean; + messages?: { confirmButtonLabel: string; cancelButtonLabel: string }; + onConfirm?: (event: React.MouseEvent) => void; + onCancel?: (event: React.MouseEvent) => void; +} + export const ConfirmButtons = ({ - messages: { confirmButtonLabel, cancelButtonLabel }, - onConfirm, - onCancel, + messages: { confirmButtonLabel, cancelButtonLabel } = { confirmButtonLabel: 'Save', cancelButtonLabel: 'Cancel' }, + onConfirm = () => {}, + onCancel = () => {}, environment, - buttonsOnTop, - boldBorder -}) => { + buttonsOnTop = false, + boldBorder = false +}: ConfirmButtonProps) => { if (environment == null) { return null; } @@ -52,41 +66,3 @@ export const ConfirmButtons = ({ ); }; - -ConfirmButtons.defaultProps = { - onConfirm: () => undefined, - onCancel: () => undefined, - buttonsOnTop: false, - boldBorder: false, - environment: undefined, - messages: { - confirmButtonLabel: 'Save', - cancelButtonLabel: 'Cancel' - } -}; - -ConfirmButtons.propTypes = { - /** Confirm edit callback */ - onConfirm: PropTypes.func, - /** Cancel edit callback */ - onCancel: PropTypes.func, - /** Inject confirm buttons positions */ - environment: PropTypes.shape({ - window: PropTypes.shape({ - width: PropTypes.number, - height: PropTypes.number - }), - row: PropTypes.shape({ - top: PropTypes.number, - bottom: PropTypes.number, - left: PropTypes.number, - right: PropTypes.number - }) - }), - buttonsOnTop: PropTypes.bool, - boldBorder: PropTypes.bool, - messages: PropTypes.shape({ - confirmButtonLabel: PropTypes.string, - cancelButtonLabel: PropTypes.string - }) -}; diff --git a/packages/react-inline-edit-extension/src/components/InlineEdit/__snapshots__/ConfirmButtons.test.js.snap b/packages/react-inline-edit-extension/src/components/ConfirmButtons/__snapshots__/ConfirmButtons.test.js.snap similarity index 98% rename from packages/react-inline-edit-extension/src/components/InlineEdit/__snapshots__/ConfirmButtons.test.js.snap rename to packages/react-inline-edit-extension/src/components/ConfirmButtons/__snapshots__/ConfirmButtons.test.js.snap index ba079c11340..f96696eac7a 100644 --- a/packages/react-inline-edit-extension/src/components/InlineEdit/__snapshots__/ConfirmButtons.test.js.snap +++ b/packages/react-inline-edit-extension/src/components/ConfirmButtons/__snapshots__/ConfirmButtons.test.js.snap @@ -41,7 +41,6 @@ exports[`ConfirmButtons renders correctly 1`] = ` aria-label="Confirm" key="confirm" onMouseUp={[MockFunction]} - variant="primary" >