From 02e7543b04300a122f02a5e7219c07054daf2727 Mon Sep 17 00:00:00 2001 From: Ellen Date: Thu, 24 Aug 2023 14:09:43 -0700 Subject: [PATCH 01/10] Add disableDelete and tooltip props --- package.json | 2 +- src/components/EditableCard.tsx | 49 +++++++++++++++++++++++---------- src/utilities/common.tsx | 12 +++++++- yarn.lock | 5 ++++ 4 files changed, 51 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 1a92195f..f93b4f64 100644 --- a/package.json +++ b/package.json @@ -150,7 +150,7 @@ "@mighty-justice/smart-bool": "^1.0.0", "@mighty-justice/utils": "1.3.6", "class-autobind-decorator": "^3.0.1", - "classnames": "^2.2.6", + "classnames": "^2.3.2", "date-fns": "^2.9.0", "flat": "^5.0.0", "http-status-codes": "^1.4.0", diff --git a/src/components/EditableCard.tsx b/src/components/EditableCard.tsx index 3cb96890..216a8e36 100644 --- a/src/components/EditableCard.tsx +++ b/src/components/EditableCard.tsx @@ -3,7 +3,7 @@ import { observer } from 'mobx-react'; import { observable } from 'mobx'; import autoBindMethods from 'class-autobind-decorator'; import { kebabCase } from 'lodash'; - +import { Tooltip } from 'antd'; import SmartBool from '@mighty-justice/smart-bool'; import ButtonToolbar from '../building-blocks/ButtonToolbar'; @@ -15,8 +15,11 @@ import Card, { ICardProps } from './Card'; import FormCard from './FormCard'; import FormDrawer from './FormDrawer'; import FormModal from './FormModal'; +import { getBtnClassName } from '../utilities'; export interface IEditableCardProps extends ICardProps, ISharedFormProps { + disabledDeleteTooltip?: string; + disableDelete?: (model: unknown) => boolean; ModalComponent: new (props: ISharedFormModalProps) => FormModal | FormDrawer; onDelete?: (model: unknown) => Promise; } @@ -29,6 +32,8 @@ class EditableCard extends Component { public static defaultProps: Partial = { ...formPropsDefaults, + disabledDeleteTooltip: '', + disableDelete: () => true, }; private async handleDelete () { @@ -55,24 +60,38 @@ class EditableCard extends Component { } private get deleteButton () { - const { isGuarded, title, onDelete, isLoading } = this.props - , classNameSuffix = this.props.classNameSuffix || kebabCase(title); + const { + classNameSuffix, + disabledDeleteTooltip, + disableDelete, + isGuarded, + isLoading, + model, + onDelete, + title, + } = this.props, + className = getBtnClassName('delete', classNameSuffix, title), + isDeleteDisabled = disableDelete && disableDelete(model); if (!onDelete) { return; } return ( - - Delete - + + + + Delete + + + ); } diff --git a/src/utilities/common.tsx b/src/utilities/common.tsx index 325743f2..ff1ca3d5 100644 --- a/src/utilities/common.tsx +++ b/src/utilities/common.tsx @@ -5,11 +5,13 @@ import { has, isArray, isObject, + isString, + kebabCase, set, some, sortBy, } from 'lodash'; - +import cx from 'classnames'; import { ColumnProps } from 'antd/es/table'; import { @@ -183,3 +185,11 @@ export function noopValidator (_rule: any, _value: any, callback: (message?: str // Useful for clearing manually-set backend validation errors callback(); } + + +export function getBtnClassName(action: string, classNameSuffix?: string, title?: React.ReactNode): string { + const prefix = `btn-${action}`; + return cx(prefix, isString(title) && `${prefix}-${kebabCase(title)}`, { + [`${prefix}-${classNameSuffix}`]: !!classNameSuffix, + }); +} diff --git a/yarn.lock b/yarn.lock index 88cbbc41..a256f956 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3969,6 +3969,11 @@ classnames@2.x, classnames@^2.2.0, classnames@^2.2.1, classnames@^2.2.3, classna resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce" integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q== +classnames@^2.3.2: + version "2.3.2" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924" + integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw== + clean-css@4.2.x, clean-css@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78" From 769168dec3678aaa9c05ad49254ef62967d0e1a0 Mon Sep 17 00:00:00 2001 From: Ellen Date: Fri, 25 Aug 2023 11:44:05 -0700 Subject: [PATCH 02/10] Add new disable button props to EditableCard components --- src/components/EditableArrayCard.tsx | 33 +++++++++++++++---------- src/components/EditableCard.tsx | 36 ++++++++++++++++++---------- 2 files changed, 43 insertions(+), 26 deletions(-) diff --git a/src/components/EditableArrayCard.tsx b/src/components/EditableArrayCard.tsx index e33f23dc..b9630474 100644 --- a/src/components/EditableArrayCard.tsx +++ b/src/components/EditableArrayCard.tsx @@ -4,7 +4,6 @@ import { observer } from 'mobx-react'; import { isEmpty, kebabCase } from 'lodash'; import autoBindMethods from 'class-autobind-decorator'; import SmartBool from '@mighty-justice/smart-bool'; - import * as Antd from 'antd'; import GuardedButton from '../building-blocks/GuardedButton'; @@ -19,6 +18,8 @@ export interface IEditableArrayCardProps extends IArrayCardProps, ISharedFormPro defaults?: object; onCreate: (model: unknown) => Promise; onDelete?: (model: unknown) => Promise; + disableAdd?: boolean; + disableAddTooltip?: string; } @autoBindMethods @@ -28,6 +29,8 @@ class EditableArrayCard extends Component { public static defaultProps: Partial = { ...formPropsDefaults, + disableAdd: true, + disableAddTooltip: 'hi', }; private async handleSaveNew (model: any) { @@ -38,21 +41,25 @@ class EditableArrayCard extends Component { } private renderAddNew () { - const { title, isLoading, isGuarded } = this.props + const { title, isLoading, isGuarded, disableAdd, disableAddTooltip } = this.props , classNameSuffix = this.props.classNameSuffix || kebabCase(title); return ( - - Add - + + + + Add + + + ); } diff --git a/src/components/EditableCard.tsx b/src/components/EditableCard.tsx index 216a8e36..86a30f57 100644 --- a/src/components/EditableCard.tsx +++ b/src/components/EditableCard.tsx @@ -20,6 +20,8 @@ import { getBtnClassName } from '../utilities'; export interface IEditableCardProps extends ICardProps, ISharedFormProps { disabledDeleteTooltip?: string; disableDelete?: (model: unknown) => boolean; + disabledEditTooltip?: string; + disableEdit?: (model: unknown) => boolean; ModalComponent: new (props: ISharedFormModalProps) => FormModal | FormDrawer; onDelete?: (model: unknown) => Promise; } @@ -34,6 +36,8 @@ class EditableCard extends Component { ...formPropsDefaults, disabledDeleteTooltip: '', disableDelete: () => true, + disabledEditTooltip: '', + disableEdit: () => true, }; private async handleDelete () { @@ -96,21 +100,26 @@ class EditableCard extends Component { } private get editButton () { - const { isLoading, title, isGuarded } = this.props - , classNameSuffix = this.props.classNameSuffix || kebabCase(title); + const { isLoading, title, isGuarded, model, disableEdit, disabledEditTooltip } = this.props + , classNameSuffix = this.props.classNameSuffix || kebabCase(title) + , isEditDisabled = disableEdit && disableEdit(model); return ( - - Edit - + + + + Edit + + + ); } @@ -118,6 +127,7 @@ class EditableCard extends Component { return ( {this.deleteButton} +
{this.editButton} ); From 847154596f75b6deb527ebdbf291c6d249010c88 Mon Sep 17 00:00:00 2001 From: Ellen Date: Fri, 25 Aug 2023 13:59:19 -0700 Subject: [PATCH 03/10] Add disable props to ArrayCard --- dist/components/EditableArrayCard.d.ts | 6 ++ dist/components/EditableCard.d.ts | 4 ++ dist/fieldsAnt.cjs.js | 81 +++++++++++++++++++------ dist/fieldsAnt.esm.js | 84 ++++++++++++++++++++------ dist/fieldsAnt.umd.js | 81 +++++++++++++++++++------ dist/utilities/common.d.ts | 1 + src/components/EditableArrayCard.tsx | 20 +++++- src/components/EditableCard.tsx | 36 +++++------ 8 files changed, 238 insertions(+), 75 deletions(-) diff --git a/dist/components/EditableArrayCard.d.ts b/dist/components/EditableArrayCard.d.ts index c0e189ed..50b5d9c2 100644 --- a/dist/components/EditableArrayCard.d.ts +++ b/dist/components/EditableArrayCard.d.ts @@ -5,6 +5,12 @@ export interface IEditableArrayCardProps extends IArrayCardProps, ISharedFormPro defaults?: object; onCreate: (model: unknown) => Promise; onDelete?: (model: unknown) => Promise; + disableAdd?: boolean; + disableAddTooltip?: string; + disableDeleteTooltip?: string; + disableDelete?: (model: unknown) => boolean; + disableEditTooltip?: string; + disableEdit?: (model: unknown) => boolean; } declare class EditableArrayCard extends Component { private isAddingNew; diff --git a/dist/components/EditableCard.d.ts b/dist/components/EditableCard.d.ts index 2c7e3849..d8ca30b6 100644 --- a/dist/components/EditableCard.d.ts +++ b/dist/components/EditableCard.d.ts @@ -4,6 +4,10 @@ import { ICardProps } from './Card'; import FormDrawer from './FormDrawer'; import FormModal from './FormModal'; export interface IEditableCardProps extends ICardProps, ISharedFormProps { + disableDeleteTooltip?: string; + disableDelete: boolean; + disableEditTooltip?: string; + disableEdit: boolean; ModalComponent: new (props: ISharedFormModalProps) => FormModal | FormDrawer; onDelete?: (model: unknown) => Promise; } diff --git a/dist/fieldsAnt.cjs.js b/dist/fieldsAnt.cjs.js index 92c7449e..3d1c7680 100644 --- a/dist/fieldsAnt.cjs.js +++ b/dist/fieldsAnt.cjs.js @@ -2278,6 +2278,10 @@ function noopValidator(_rule, _value, callback) { // Useful for clearing manually-set backend validation errors callback(); } +function getBtnClassName(action, classNameSuffix, title) { + var prefix = "btn-".concat(action); + return cx(prefix, lodash.isString(title) && "".concat(prefix, "-").concat(lodash.kebabCase(title)), _defineProperty({}, "".concat(prefix, "-").concat(classNameSuffix), !!classNameSuffix)); +} // Takes an API response and converts it to a string to string map function getFieldErrors(errors) { @@ -3618,7 +3622,12 @@ function (_Component) { value: function buttons() { return React__default.createElement(ButtonToolbar, { noSpacing: true - }, this.deleteButton, this.editButton); + }, this.deleteButton, React__default.createElement("div", { + style: { + display: 'inline-block', + width: '10px' + } + }), this.editButton); } }, { key: "render", @@ -3644,26 +3653,31 @@ function (_Component) { key: "deleteButton", get: function get() { var _this$props3 = this.props, + classNameSuffix = _this$props3.classNameSuffix, + disableDeleteTooltip = _this$props3.disableDeleteTooltip, + disableDelete = _this$props3.disableDelete, isGuarded = _this$props3.isGuarded, - title = _this$props3.title, - onDelete = _this$props3.onDelete, isLoading = _this$props3.isLoading, - classNameSuffix = this.props.classNameSuffix || lodash.kebabCase(title); + onDelete = _this$props3.onDelete, + title = _this$props3.title, + className = getBtnClassName('delete', classNameSuffix, title); if (!onDelete) { return; } - return React__default.createElement(GuardedButton, { - className: "btn-delete btn-delete-".concat(classNameSuffix), + return React__default.createElement(Antd.Tooltip, { + title: disableDelete ? disableDeleteTooltip : '' + }, React__default.createElement("span", null, React__default.createElement(GuardedButton, { + className: className, confirm: true, - disabled: isLoading || this.isDeleting.isTrue, + disabled: disableDelete || isLoading || this.isDeleting.isTrue, icon: "delete", isGuarded: isGuarded, onClick: this.handleDelete, size: "small", type: "danger" - }, "Delete"); + }, "Delete"))); } }, { key: "editButton", @@ -3672,21 +3686,30 @@ function (_Component) { isLoading = _this$props4.isLoading, title = _this$props4.title, isGuarded = _this$props4.isGuarded, + disableEdit = _this$props4.disableEdit, + disableEditTooltip = _this$props4.disableEditTooltip, classNameSuffix = this.props.classNameSuffix || lodash.kebabCase(title); - return React__default.createElement(GuardedButton, { + return React__default.createElement(Antd.Tooltip, { + title: disableEdit ? disableEditTooltip : '' + }, React__default.createElement("span", null, React__default.createElement(GuardedButton, { className: "btn-edit btn-edit-".concat(classNameSuffix), - disabled: isLoading || this.isEditing.isTrue || this.isDeleting.isTrue, + disabled: isLoading || this.isEditing.isTrue || this.isDeleting.isTrue || disableEdit, icon: "edit", isGuarded: isGuarded, onClick: this.isEditing.setTrue, size: "small", type: "primary" - }, "Edit"); + }, "Edit"))); } }]); return EditableCard; -}(React.Component), _class3$3.defaultProps = _objectSpread2({}, formPropsDefaults), _temp$9), (_descriptor$4 = _applyDecoratedDescriptor(_class2$g.prototype, "isDeleting", [mobx.observable], { +}(React.Component), _class3$3.defaultProps = _objectSpread2({}, formPropsDefaults, { + disableDeleteTooltip: '', + disableDelete: false, + disableEditTooltip: '', + disableEdit: false +}), _temp$9), (_descriptor$4 = _applyDecoratedDescriptor(_class2$g.prototype, "isDeleting", [mobx.observable], { configurable: true, enumerable: true, writable: true, @@ -3776,16 +3799,20 @@ function (_Component) { title = _this$props2.title, isLoading = _this$props2.isLoading, isGuarded = _this$props2.isGuarded, + disableAdd = _this$props2.disableAdd, + disableAddTooltip = _this$props2.disableAddTooltip, classNameSuffix = this.props.classNameSuffix || lodash.kebabCase(title); - return React__default.createElement(GuardedButton, { + return React__default.createElement(Antd.Tooltip, { + title: disableAdd ? disableAddTooltip : '' + }, React__default.createElement("span", null, React__default.createElement(GuardedButton, { className: "btn-new btn-new-".concat(classNameSuffix), - disabled: isLoading || this.isAddingNew.isTrue, + disabled: isLoading || this.isAddingNew.isTrue || disableAdd, icon: "plus", isGuarded: isGuarded, onClick: this.isAddingNew.setTrue, size: "small", type: "primary" - }, "Add"); + }, "Add"))); } }, { key: "render", @@ -3798,7 +3825,11 @@ function (_Component) { onDelete = _this$props3.onDelete, onSave = _this$props3.onSave, onSuccess = _this$props3.onSuccess, - title = _this$props3.title; + title = _this$props3.title, + disableDeleteTooltip = _this$props3.disableDeleteTooltip, + disableDelete = _this$props3.disableDelete, + disableEditTooltip = _this$props3.disableEditTooltip, + disableEdit = _this$props3.disableEdit; return React__default.createElement(Antd.Card, { title: title, extra: this.renderAddNew(), @@ -3820,6 +3851,10 @@ function (_Component) { onDelete: onDelete, onSave: onSave, onSuccess: onSuccess, + disableDeleteTooltip: disableDeleteTooltip, + disableDelete: disableDelete ? disableDelete(model) : false, + disableEditTooltip: disableEditTooltip, + disableEdit: disableEdit ? disableEdit(model) : false, title: "" }); })); @@ -3827,7 +3862,18 @@ function (_Component) { }]); return EditableArrayCard; -}(React.Component), _class3$4.defaultProps = _objectSpread2({}, formPropsDefaults), _temp$a), (_descriptor$5 = _applyDecoratedDescriptor(_class2$h.prototype, "isAddingNew", [mobx.observable], { +}(React.Component), _class3$4.defaultProps = _objectSpread2({}, formPropsDefaults, { + disableAdd: false, + disableAddTooltip: '', + disableDeleteTooltip: '', + disableDelete: function disableDelete() { + return false; + }, + disableEditTooltip: '', + disableEdit: function disableEdit() { + return false; + } +}), _temp$a), (_descriptor$5 = _applyDecoratedDescriptor(_class2$h.prototype, "isAddingNew", [mobx.observable], { configurable: true, enumerable: true, writable: true, @@ -4274,6 +4320,7 @@ exports.filterFieldSets = filterFieldSets; exports.formPropsDefaults = formPropsDefaults; exports.formatOptionSelect = formatOptionSelect; exports.formatRating = formatRating; +exports.getBtnClassName = getBtnClassName; exports.getDateFormatList = getDateFormatList; exports.getFieldSetFields = getFieldSetFields; exports.getFieldSetsFields = getFieldSetsFields; diff --git a/dist/fieldsAnt.esm.js b/dist/fieldsAnt.esm.js index ed505f23..b00d0d84 100644 --- a/dist/fieldsAnt.esm.js +++ b/dist/fieldsAnt.esm.js @@ -4,7 +4,7 @@ import autoBindMethods from 'class-autobind-decorator'; import cx from 'classnames'; import { Form as Form$1, Col, Select, Icon, Button, Tooltip, Input, Radio, Rate as Rate$1, Checkbox as Checkbox$1, DatePicker, notification, Row, Popconfirm, Divider, Card as Card$1, Drawer, Modal, List, Table as Table$1 } from 'antd'; import { toJS, observable, computed } from 'mobx'; -import { get, values, omit, debounce, uniqBy, pick, isObject, isBoolean, isArray, flatten, sortBy, has, set, some, isPlainObject, extend, mapValues, pickBy, noop, isEmpty, kebabCase } from 'lodash'; +import { get, values, omit, debounce, uniqBy, pick, isObject, isBoolean, isArray, flatten, sortBy, has, set, isString, kebabCase, some, isPlainObject, extend, mapValues, pickBy, noop, isEmpty } from 'lodash'; import SmartBool from '@mighty-justice/smart-bool'; import { toKey, inferCentury, getNameOrDefault, EMPTY_FIELD, mapBooleanToText, isValidDate, formatDate, formatEmployerIdNumber, formatMoney, formatCommaSeparatedNumber, getPercentValue, formatPercentage, getPercentDisplay, formatPhoneNumber, formatSocialSecurityNumber, parseAndPreserveNewlines, formatWebsite, formatAddressMultiline, varToLabel, getOrDefault, createDisabledContainer, createGuardedContainer, splitName } from '@mighty-justice/utils'; import moment from 'moment'; @@ -2271,6 +2271,10 @@ function noopValidator(_rule, _value, callback) { // Useful for clearing manually-set backend validation errors callback(); } +function getBtnClassName(action, classNameSuffix, title) { + var prefix = "btn-".concat(action); + return cx(prefix, isString(title) && "".concat(prefix, "-").concat(kebabCase(title)), _defineProperty({}, "".concat(prefix, "-").concat(classNameSuffix), !!classNameSuffix)); +} // Takes an API response and converts it to a string to string map function getFieldErrors(errors) { @@ -3611,7 +3615,12 @@ function (_Component) { value: function buttons() { return React.createElement(ButtonToolbar, { noSpacing: true - }, this.deleteButton, this.editButton); + }, this.deleteButton, React.createElement("div", { + style: { + display: 'inline-block', + width: '10px' + } + }), this.editButton); } }, { key: "render", @@ -3637,26 +3646,31 @@ function (_Component) { key: "deleteButton", get: function get() { var _this$props3 = this.props, + classNameSuffix = _this$props3.classNameSuffix, + disableDeleteTooltip = _this$props3.disableDeleteTooltip, + disableDelete = _this$props3.disableDelete, isGuarded = _this$props3.isGuarded, - title = _this$props3.title, - onDelete = _this$props3.onDelete, isLoading = _this$props3.isLoading, - classNameSuffix = this.props.classNameSuffix || kebabCase(title); + onDelete = _this$props3.onDelete, + title = _this$props3.title, + className = getBtnClassName('delete', classNameSuffix, title); if (!onDelete) { return; } - return React.createElement(GuardedButton, { - className: "btn-delete btn-delete-".concat(classNameSuffix), + return React.createElement(Tooltip, { + title: disableDelete ? disableDeleteTooltip : '' + }, React.createElement("span", null, React.createElement(GuardedButton, { + className: className, confirm: true, - disabled: isLoading || this.isDeleting.isTrue, + disabled: disableDelete || isLoading || this.isDeleting.isTrue, icon: "delete", isGuarded: isGuarded, onClick: this.handleDelete, size: "small", type: "danger" - }, "Delete"); + }, "Delete"))); } }, { key: "editButton", @@ -3665,21 +3679,30 @@ function (_Component) { isLoading = _this$props4.isLoading, title = _this$props4.title, isGuarded = _this$props4.isGuarded, + disableEdit = _this$props4.disableEdit, + disableEditTooltip = _this$props4.disableEditTooltip, classNameSuffix = this.props.classNameSuffix || kebabCase(title); - return React.createElement(GuardedButton, { + return React.createElement(Tooltip, { + title: disableEdit ? disableEditTooltip : '' + }, React.createElement("span", null, React.createElement(GuardedButton, { className: "btn-edit btn-edit-".concat(classNameSuffix), - disabled: isLoading || this.isEditing.isTrue || this.isDeleting.isTrue, + disabled: isLoading || this.isEditing.isTrue || this.isDeleting.isTrue || disableEdit, icon: "edit", isGuarded: isGuarded, onClick: this.isEditing.setTrue, size: "small", type: "primary" - }, "Edit"); + }, "Edit"))); } }]); return EditableCard; -}(Component), _class3$3.defaultProps = _objectSpread2({}, formPropsDefaults), _temp$9), (_descriptor$4 = _applyDecoratedDescriptor(_class2$g.prototype, "isDeleting", [observable], { +}(Component), _class3$3.defaultProps = _objectSpread2({}, formPropsDefaults, { + disableDeleteTooltip: '', + disableDelete: false, + disableEditTooltip: '', + disableEdit: false +}), _temp$9), (_descriptor$4 = _applyDecoratedDescriptor(_class2$g.prototype, "isDeleting", [observable], { configurable: true, enumerable: true, writable: true, @@ -3769,16 +3792,20 @@ function (_Component) { title = _this$props2.title, isLoading = _this$props2.isLoading, isGuarded = _this$props2.isGuarded, + disableAdd = _this$props2.disableAdd, + disableAddTooltip = _this$props2.disableAddTooltip, classNameSuffix = this.props.classNameSuffix || kebabCase(title); - return React.createElement(GuardedButton, { + return React.createElement(Tooltip, { + title: disableAdd ? disableAddTooltip : '' + }, React.createElement("span", null, React.createElement(GuardedButton, { className: "btn-new btn-new-".concat(classNameSuffix), - disabled: isLoading || this.isAddingNew.isTrue, + disabled: isLoading || this.isAddingNew.isTrue || disableAdd, icon: "plus", isGuarded: isGuarded, onClick: this.isAddingNew.setTrue, size: "small", type: "primary" - }, "Add"); + }, "Add"))); } }, { key: "render", @@ -3791,7 +3818,11 @@ function (_Component) { onDelete = _this$props3.onDelete, onSave = _this$props3.onSave, onSuccess = _this$props3.onSuccess, - title = _this$props3.title; + title = _this$props3.title, + disableDeleteTooltip = _this$props3.disableDeleteTooltip, + disableDelete = _this$props3.disableDelete, + disableEditTooltip = _this$props3.disableEditTooltip, + disableEdit = _this$props3.disableEdit; return React.createElement(Card$1, { title: title, extra: this.renderAddNew(), @@ -3813,6 +3844,10 @@ function (_Component) { onDelete: onDelete, onSave: onSave, onSuccess: onSuccess, + disableDeleteTooltip: disableDeleteTooltip, + disableDelete: disableDelete ? disableDelete(model) : false, + disableEditTooltip: disableEditTooltip, + disableEdit: disableEdit ? disableEdit(model) : false, title: "" }); })); @@ -3820,7 +3855,18 @@ function (_Component) { }]); return EditableArrayCard; -}(Component), _class3$4.defaultProps = _objectSpread2({}, formPropsDefaults), _temp$a), (_descriptor$5 = _applyDecoratedDescriptor(_class2$h.prototype, "isAddingNew", [observable], { +}(Component), _class3$4.defaultProps = _objectSpread2({}, formPropsDefaults, { + disableAdd: false, + disableAddTooltip: '', + disableDeleteTooltip: '', + disableDelete: function disableDelete() { + return false; + }, + disableEditTooltip: '', + disableEdit: function disableEdit() { + return false; + } +}), _temp$a), (_descriptor$5 = _applyDecoratedDescriptor(_class2$h.prototype, "isAddingNew", [observable], { configurable: true, enumerable: true, writable: true, @@ -4215,4 +4261,4 @@ function (_Component) { return Table; }(Component), (_applyDecoratedDescriptor(_class2$l.prototype, "columns", [computed], Object.getOwnPropertyDescriptor(_class2$l.prototype, "columns"), _class2$l.prototype), _applyDecoratedDescriptor(_class2$l.prototype, "dataSource", [computed], Object.getOwnPropertyDescriptor(_class2$l.prototype, "dataSource"), _class2$l.prototype)), _class2$l)) || _class$x) || _class$x; -export { ArrayCard, ButtonToolbar, CARD_COL_LABEL, CARD_COL_VALUE, CX_PREFIX_SEARCH_CREATE, Card, CardField, DEFAULT_DEBOUNCE_WAIT, DEFAULT_STATE_OPTION_TYPE, Date, EditableArrayCard, EditableCard, Form, FormCard, FormDrawer, FormField, FormFieldSet, FormItem, FormManager, FormModal, GuardedButton, Hidden, ID_ATTR, Info, Label, NestedFieldSet, ObjectSearch, ObjectSearchCreate, OptionSelect, OptionSelectDisplay, REGEXP_EIN, REGEXP_SSN, RadioGroup, Rate, SummaryCard, TYPES, Table, Value, backendValidation, booleanToForm, falseyToString, fieldSetsToColumns, fillInFieldConfig, fillInFieldSet, fillInFieldSets, filterFieldConfig, filterFieldConfigs, filterFieldSet, filterFieldSets, formPropsDefaults, formatOptionSelect, formatRating, getDateFormatList, getFieldSetFields, getFieldSetsFields, getOptions, getUnsortedOptions, isFieldSetSimple, isPartialFieldSetSimple, mapFieldSetFields, modelFromFieldConfigs, noopValidator, renderLabel, renderValue, setFieldSetFields }; +export { ArrayCard, ButtonToolbar, CARD_COL_LABEL, CARD_COL_VALUE, CX_PREFIX_SEARCH_CREATE, Card, CardField, DEFAULT_DEBOUNCE_WAIT, DEFAULT_STATE_OPTION_TYPE, Date, EditableArrayCard, EditableCard, Form, FormCard, FormDrawer, FormField, FormFieldSet, FormItem, FormManager, FormModal, GuardedButton, Hidden, ID_ATTR, Info, Label, NestedFieldSet, ObjectSearch, ObjectSearchCreate, OptionSelect, OptionSelectDisplay, REGEXP_EIN, REGEXP_SSN, RadioGroup, Rate, SummaryCard, TYPES, Table, Value, backendValidation, booleanToForm, falseyToString, fieldSetsToColumns, fillInFieldConfig, fillInFieldSet, fillInFieldSets, filterFieldConfig, filterFieldConfigs, filterFieldSet, filterFieldSets, formPropsDefaults, formatOptionSelect, formatRating, getBtnClassName, getDateFormatList, getFieldSetFields, getFieldSetsFields, getOptions, getUnsortedOptions, isFieldSetSimple, isPartialFieldSetSimple, mapFieldSetFields, modelFromFieldConfigs, noopValidator, renderLabel, renderValue, setFieldSetFields }; diff --git a/dist/fieldsAnt.umd.js b/dist/fieldsAnt.umd.js index 39c25aef..63b7eb75 100644 --- a/dist/fieldsAnt.umd.js +++ b/dist/fieldsAnt.umd.js @@ -2270,6 +2270,10 @@ // Useful for clearing manually-set backend validation errors callback(); } + function getBtnClassName(action, classNameSuffix, title) { + var prefix = "btn-".concat(action); + return cx(prefix, lodash.isString(title) && "".concat(prefix, "-").concat(lodash.kebabCase(title)), _defineProperty({}, "".concat(prefix, "-").concat(classNameSuffix), !!classNameSuffix)); + } // Takes an API response and converts it to a string to string map function getFieldErrors(errors) { @@ -3610,7 +3614,12 @@ value: function buttons() { return React__default.createElement(ButtonToolbar, { noSpacing: true - }, this.deleteButton, this.editButton); + }, this.deleteButton, React__default.createElement("div", { + style: { + display: 'inline-block', + width: '10px' + } + }), this.editButton); } }, { key: "render", @@ -3636,26 +3645,31 @@ key: "deleteButton", get: function get() { var _this$props3 = this.props, + classNameSuffix = _this$props3.classNameSuffix, + disableDeleteTooltip = _this$props3.disableDeleteTooltip, + disableDelete = _this$props3.disableDelete, isGuarded = _this$props3.isGuarded, - title = _this$props3.title, - onDelete = _this$props3.onDelete, isLoading = _this$props3.isLoading, - classNameSuffix = this.props.classNameSuffix || lodash.kebabCase(title); + onDelete = _this$props3.onDelete, + title = _this$props3.title, + className = getBtnClassName('delete', classNameSuffix, title); if (!onDelete) { return; } - return React__default.createElement(GuardedButton, { - className: "btn-delete btn-delete-".concat(classNameSuffix), + return React__default.createElement(Antd.Tooltip, { + title: disableDelete ? disableDeleteTooltip : '' + }, React__default.createElement("span", null, React__default.createElement(GuardedButton, { + className: className, confirm: true, - disabled: isLoading || this.isDeleting.isTrue, + disabled: disableDelete || isLoading || this.isDeleting.isTrue, icon: "delete", isGuarded: isGuarded, onClick: this.handleDelete, size: "small", type: "danger" - }, "Delete"); + }, "Delete"))); } }, { key: "editButton", @@ -3664,21 +3678,30 @@ isLoading = _this$props4.isLoading, title = _this$props4.title, isGuarded = _this$props4.isGuarded, + disableEdit = _this$props4.disableEdit, + disableEditTooltip = _this$props4.disableEditTooltip, classNameSuffix = this.props.classNameSuffix || lodash.kebabCase(title); - return React__default.createElement(GuardedButton, { + return React__default.createElement(Antd.Tooltip, { + title: disableEdit ? disableEditTooltip : '' + }, React__default.createElement("span", null, React__default.createElement(GuardedButton, { className: "btn-edit btn-edit-".concat(classNameSuffix), - disabled: isLoading || this.isEditing.isTrue || this.isDeleting.isTrue, + disabled: isLoading || this.isEditing.isTrue || this.isDeleting.isTrue || disableEdit, icon: "edit", isGuarded: isGuarded, onClick: this.isEditing.setTrue, size: "small", type: "primary" - }, "Edit"); + }, "Edit"))); } }]); return EditableCard; - }(React.Component), _class3$3.defaultProps = _objectSpread2({}, formPropsDefaults), _temp$9), (_descriptor$4 = _applyDecoratedDescriptor(_class2$g.prototype, "isDeleting", [mobx.observable], { + }(React.Component), _class3$3.defaultProps = _objectSpread2({}, formPropsDefaults, { + disableDeleteTooltip: '', + disableDelete: false, + disableEditTooltip: '', + disableEdit: false + }), _temp$9), (_descriptor$4 = _applyDecoratedDescriptor(_class2$g.prototype, "isDeleting", [mobx.observable], { configurable: true, enumerable: true, writable: true, @@ -3768,16 +3791,20 @@ title = _this$props2.title, isLoading = _this$props2.isLoading, isGuarded = _this$props2.isGuarded, + disableAdd = _this$props2.disableAdd, + disableAddTooltip = _this$props2.disableAddTooltip, classNameSuffix = this.props.classNameSuffix || lodash.kebabCase(title); - return React__default.createElement(GuardedButton, { + return React__default.createElement(Antd.Tooltip, { + title: disableAdd ? disableAddTooltip : '' + }, React__default.createElement("span", null, React__default.createElement(GuardedButton, { className: "btn-new btn-new-".concat(classNameSuffix), - disabled: isLoading || this.isAddingNew.isTrue, + disabled: isLoading || this.isAddingNew.isTrue || disableAdd, icon: "plus", isGuarded: isGuarded, onClick: this.isAddingNew.setTrue, size: "small", type: "primary" - }, "Add"); + }, "Add"))); } }, { key: "render", @@ -3790,7 +3817,11 @@ onDelete = _this$props3.onDelete, onSave = _this$props3.onSave, onSuccess = _this$props3.onSuccess, - title = _this$props3.title; + title = _this$props3.title, + disableDeleteTooltip = _this$props3.disableDeleteTooltip, + disableDelete = _this$props3.disableDelete, + disableEditTooltip = _this$props3.disableEditTooltip, + disableEdit = _this$props3.disableEdit; return React__default.createElement(Antd.Card, { title: title, extra: this.renderAddNew(), @@ -3812,6 +3843,10 @@ onDelete: onDelete, onSave: onSave, onSuccess: onSuccess, + disableDeleteTooltip: disableDeleteTooltip, + disableDelete: disableDelete ? disableDelete(model) : false, + disableEditTooltip: disableEditTooltip, + disableEdit: disableEdit ? disableEdit(model) : false, title: "" }); })); @@ -3819,7 +3854,18 @@ }]); return EditableArrayCard; - }(React.Component), _class3$4.defaultProps = _objectSpread2({}, formPropsDefaults), _temp$a), (_descriptor$5 = _applyDecoratedDescriptor(_class2$h.prototype, "isAddingNew", [mobx.observable], { + }(React.Component), _class3$4.defaultProps = _objectSpread2({}, formPropsDefaults, { + disableAdd: false, + disableAddTooltip: '', + disableDeleteTooltip: '', + disableDelete: function disableDelete() { + return false; + }, + disableEditTooltip: '', + disableEdit: function disableEdit() { + return false; + } + }), _temp$a), (_descriptor$5 = _applyDecoratedDescriptor(_class2$h.prototype, "isAddingNew", [mobx.observable], { configurable: true, enumerable: true, writable: true, @@ -4266,6 +4312,7 @@ exports.formPropsDefaults = formPropsDefaults; exports.formatOptionSelect = formatOptionSelect; exports.formatRating = formatRating; + exports.getBtnClassName = getBtnClassName; exports.getDateFormatList = getDateFormatList; exports.getFieldSetFields = getFieldSetFields; exports.getFieldSetsFields = getFieldSetsFields; diff --git a/dist/utilities/common.d.ts b/dist/utilities/common.d.ts index 90c7c4cf..95711ca4 100644 --- a/dist/utilities/common.d.ts +++ b/dist/utilities/common.d.ts @@ -22,4 +22,5 @@ declare type IColumns = Array>; export declare function fieldSetsToColumns(fieldSets: IFieldSetPartial[], tableModel?: IModel[]): IColumns; export declare function modelFromFieldConfigs(fieldConfigs: IFieldConfig[], data: IModel): IModel; export declare function noopValidator(_rule: any, _value: any, callback: (message?: string) => void): void; +export declare function getBtnClassName(action: string, classNameSuffix?: string, title?: React.ReactNode): string; export {}; diff --git a/src/components/EditableArrayCard.tsx b/src/components/EditableArrayCard.tsx index b9630474..77c8d8b9 100644 --- a/src/components/EditableArrayCard.tsx +++ b/src/components/EditableArrayCard.tsx @@ -20,6 +20,10 @@ export interface IEditableArrayCardProps extends IArrayCardProps, ISharedFormPro onDelete?: (model: unknown) => Promise; disableAdd?: boolean; disableAddTooltip?: string; + disableDeleteTooltip?: string; + disableDelete?: (model: unknown) => boolean; + disableEditTooltip?: string; + disableEdit?: (model: unknown) => boolean; } @autoBindMethods @@ -29,8 +33,12 @@ class EditableArrayCard extends Component { public static defaultProps: Partial = { ...formPropsDefaults, - disableAdd: true, - disableAddTooltip: 'hi', + disableAdd: false, + disableAddTooltip: '', + disableDeleteTooltip: '', + disableDelete: () => false, + disableEditTooltip: '', + disableEdit: () => false, }; private async handleSaveNew (model: any) { @@ -73,6 +81,10 @@ class EditableArrayCard extends Component { onSave, onSuccess, title, + disableDeleteTooltip, + disableDelete, + disableEditTooltip, + disableEdit, } = this.props; return ( @@ -100,6 +112,10 @@ class EditableArrayCard extends Component { onDelete={onDelete} onSave={onSave} onSuccess={onSuccess} + disableDeleteTooltip={disableDeleteTooltip} + disableDelete={disableDelete ? disableDelete(model) : false} + disableEditTooltip={disableEditTooltip} + disableEdit={disableEdit ? disableEdit(model) : false} title='' /> ))} diff --git a/src/components/EditableCard.tsx b/src/components/EditableCard.tsx index 86a30f57..36c686a5 100644 --- a/src/components/EditableCard.tsx +++ b/src/components/EditableCard.tsx @@ -18,10 +18,10 @@ import FormModal from './FormModal'; import { getBtnClassName } from '../utilities'; export interface IEditableCardProps extends ICardProps, ISharedFormProps { - disabledDeleteTooltip?: string; - disableDelete?: (model: unknown) => boolean; - disabledEditTooltip?: string; - disableEdit?: (model: unknown) => boolean; + disableDeleteTooltip?: string; + disableDelete: boolean; + disableEditTooltip?: string; + disableEdit: boolean; ModalComponent: new (props: ISharedFormModalProps) => FormModal | FormDrawer; onDelete?: (model: unknown) => Promise; } @@ -34,10 +34,10 @@ class EditableCard extends Component { public static defaultProps: Partial = { ...formPropsDefaults, - disabledDeleteTooltip: '', - disableDelete: () => true, - disabledEditTooltip: '', - disableEdit: () => true, + disableDeleteTooltip: '', + disableDelete: false, + disableEditTooltip: '', + disableEdit: false, }; private async handleDelete () { @@ -66,26 +66,23 @@ class EditableCard extends Component { private get deleteButton () { const { classNameSuffix, - disabledDeleteTooltip, + disableDeleteTooltip, disableDelete, isGuarded, isLoading, - model, onDelete, title, } = this.props, - className = getBtnClassName('delete', classNameSuffix, title), - isDeleteDisabled = disableDelete && disableDelete(model); - + className = getBtnClassName('delete', classNameSuffix, title); if (!onDelete) { return; } return ( - + { } private get editButton () { - const { isLoading, title, isGuarded, model, disableEdit, disabledEditTooltip } = this.props - , classNameSuffix = this.props.classNameSuffix || kebabCase(title) - , isEditDisabled = disableEdit && disableEdit(model); + const { isLoading, title, isGuarded, disableEdit, disableEditTooltip } = this.props + , classNameSuffix = this.props.classNameSuffix || kebabCase(title); return ( - + Date: Mon, 28 Aug 2023 11:18:38 -0700 Subject: [PATCH 04/10] Fix typo on the prop names --- dist/components/EditableArrayCard.d.ts | 4 ++-- src/components/EditableArrayCard.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/dist/components/EditableArrayCard.d.ts b/dist/components/EditableArrayCard.d.ts index 50b5d9c2..8ac4d8a1 100644 --- a/dist/components/EditableArrayCard.d.ts +++ b/dist/components/EditableArrayCard.d.ts @@ -8,9 +8,9 @@ export interface IEditableArrayCardProps extends IArrayCardProps, ISharedFormPro disableAdd?: boolean; disableAddTooltip?: string; disableDeleteTooltip?: string; - disableDelete?: (model: unknown) => boolean; + disableDelete?: (model: any) => boolean; disableEditTooltip?: string; - disableEdit?: (model: unknown) => boolean; + disableEdit?: (model: any) => boolean; } declare class EditableArrayCard extends Component { private isAddingNew; diff --git a/src/components/EditableArrayCard.tsx b/src/components/EditableArrayCard.tsx index 77c8d8b9..cd8be09c 100644 --- a/src/components/EditableArrayCard.tsx +++ b/src/components/EditableArrayCard.tsx @@ -21,9 +21,9 @@ export interface IEditableArrayCardProps extends IArrayCardProps, ISharedFormPro disableAdd?: boolean; disableAddTooltip?: string; disableDeleteTooltip?: string; - disableDelete?: (model: unknown) => boolean; + disableDelete?: (model: any) => boolean; disableEditTooltip?: string; - disableEdit?: (model: unknown) => boolean; + disableEdit?: (model: any) => boolean; } @autoBindMethods From bd1425f6feed49364881dae86f610b2ce4a0f7a8 Mon Sep 17 00:00:00 2001 From: Emi Katsuta Date: Mon, 28 Aug 2023 16:07:43 -0400 Subject: [PATCH 05/10] Add tests for editable array card and editable card --- src/components/EditableArrayCard.tsx | 8 +++---- src/components/EditableCard.tsx | 8 +++---- test/components/EditableArrayCard.test.ts | 29 ++++++++++++++++++++++- test/components/EditableCard.test.ts | 12 ++++++++++ 4 files changed, 48 insertions(+), 9 deletions(-) diff --git a/src/components/EditableArrayCard.tsx b/src/components/EditableArrayCard.tsx index cd8be09c..0c7d9a47 100644 --- a/src/components/EditableArrayCard.tsx +++ b/src/components/EditableArrayCard.tsx @@ -35,10 +35,10 @@ class EditableArrayCard extends Component { ...formPropsDefaults, disableAdd: false, disableAddTooltip: '', - disableDeleteTooltip: '', disableDelete: () => false, - disableEditTooltip: '', + disableDeleteTooltip: '', disableEdit: () => false, + disableEditTooltip: '', }; private async handleSaveNew (model: any) { @@ -113,9 +113,9 @@ class EditableArrayCard extends Component { onSave={onSave} onSuccess={onSuccess} disableDeleteTooltip={disableDeleteTooltip} - disableDelete={disableDelete ? disableDelete(model) : false} + disableDelete={disableDelete ? disableDelete(modelItem) : false} disableEditTooltip={disableEditTooltip} - disableEdit={disableEdit ? disableEdit(model) : false} + disableEdit={disableEdit ? disableEdit(modelItem) : false} title='' /> ))} diff --git a/src/components/EditableCard.tsx b/src/components/EditableCard.tsx index 36c686a5..2a043933 100644 --- a/src/components/EditableCard.tsx +++ b/src/components/EditableCard.tsx @@ -34,10 +34,10 @@ class EditableCard extends Component { public static defaultProps: Partial = { ...formPropsDefaults, - disableDeleteTooltip: '', disableDelete: false, - disableEditTooltip: '', + disableDeleteTooltip: '', disableEdit: false, + disableEditTooltip: '', }; private async handleDelete () { @@ -86,8 +86,8 @@ class EditableCard extends Component { icon='delete' isGuarded={isGuarded} onClick={this.handleDelete} - size="small" - type="danger" + size='small' + type='danger' > Delete diff --git a/test/components/EditableArrayCard.test.ts b/test/components/EditableArrayCard.test.ts index 782007b1..d5b06519 100644 --- a/test/components/EditableArrayCard.test.ts +++ b/test/components/EditableArrayCard.test.ts @@ -2,7 +2,7 @@ import faker from 'faker'; import { EditableArrayCard } from '../../src'; import { Tester } from '@mighty-justice/tester'; -import { fakeTextShort } from '../factories'; +import { arrayCardPropsFactory, fakeTextShort } from '../factories'; const title = faker.lorem.sentence() , model = Array(10).fill(null).map(_ => ({ @@ -59,4 +59,31 @@ describe('EditableArrayCard', () => { expect(tester.find('input#name').length).toBe(0); }); }); + + it('Can disable add', async () => { + const props = { + ...arrayCardPropsFactory.build(), + disableAdd: true, + }, + tester = await new Tester(EditableArrayCard, { props }).mount(); + + expect(tester.find('button.btn-new').props().disabled).toBe(true); + }); + + it('Can disabled delete and edit', async () => { + const permissionName = 'canUpdate' + , props = { + ...arrayCardPropsFactory.build(), + disableDelete: model => !model.permissions.includes(permissionName), + disableEdit: model => !model.permissions.includes(permissionName), + model: [{ + permissions: [], + }], + onDelete: jest.fn().mockResolvedValue({}), + }, + tester = await new Tester(EditableArrayCard, { props }).mount(); + + expect(tester.find('button.btn-delete').props().disabled).toBe(true); + expect(tester.find('button.btn-edit').props().disabled).toBe(true); + }) }); diff --git a/test/components/EditableCard.test.ts b/test/components/EditableCard.test.ts index 81f8f1c4..87f604c7 100644 --- a/test/components/EditableCard.test.ts +++ b/test/components/EditableCard.test.ts @@ -55,4 +55,16 @@ describe('EditableCard', () => { tester.click('.btn-delete .ant-popover-inner .ant-btn-primary'); expect(onDelete).toHaveBeenCalled(); }); + + it('Can disable delete and edit buttons', async () => { + const props = { + ...editableCardPropsFactory.build(), + disableDelete: true, + disableEdit: true, + }, + tester = await new Tester(EditableCard, { props }).mount(); + + expect(tester.find('button.btn-delete').props().disabled).toBe(true); + expect(tester.find('button.btn-edit').props().disabled).toBe(true); + }); }); From 1b69c8fdf6534569649e9126625615d1b387b444 Mon Sep 17 00:00:00 2001 From: Ellen Date: Tue, 29 Aug 2023 13:09:45 -0700 Subject: [PATCH 06/10] Delete the spans in the tooltip buttons --- src/components/EditableCard.tsx | 55 +++++++++++++++------------------ 1 file changed, 25 insertions(+), 30 deletions(-) diff --git a/src/components/EditableCard.tsx b/src/components/EditableCard.tsx index 2a043933..68bc7e23 100644 --- a/src/components/EditableCard.tsx +++ b/src/components/EditableCard.tsx @@ -34,10 +34,10 @@ class EditableCard extends Component { public static defaultProps: Partial = { ...formPropsDefaults, - disableDelete: false, disableDeleteTooltip: '', - disableEdit: false, + disableDelete: false, disableEditTooltip: '', + disableEdit: false, }; private async handleDelete () { @@ -78,20 +78,18 @@ class EditableCard extends Component { return ( - - - Delete - - + + Delete + ); } @@ -102,19 +100,17 @@ class EditableCard extends Component { return ( - - - Edit - - + + Edit + ); } @@ -123,7 +119,6 @@ class EditableCard extends Component { return ( {this.deleteButton} -
{this.editButton} ); From 0caabae79f7b8dbe77c2c9f3a3c0690f692471e0 Mon Sep 17 00:00:00 2001 From: Ellen Date: Tue, 29 Aug 2023 13:24:46 -0700 Subject: [PATCH 07/10] Delete the spans in the tooltip buttons --- src/components/EditableArrayCard.tsx | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/src/components/EditableArrayCard.tsx b/src/components/EditableArrayCard.tsx index 0c7d9a47..6fece805 100644 --- a/src/components/EditableArrayCard.tsx +++ b/src/components/EditableArrayCard.tsx @@ -54,19 +54,17 @@ class EditableArrayCard extends Component { return ( - - - Add - - + + Add + ); } From 7bf0be72810e5f75894d2e03522031dd21bdc3cf Mon Sep 17 00:00:00 2001 From: Ellen Date: Wed, 30 Aug 2023 10:35:07 -0700 Subject: [PATCH 08/10] v1.3.3-2 --- CHANGELOG.md | 14 +++++++++----- dist/fieldsAnt.cjs.js | 35 +++++++++++++++-------------------- dist/fieldsAnt.esm.js | 35 +++++++++++++++-------------------- dist/fieldsAnt.umd.js | 35 +++++++++++++++-------------------- package.json | 2 +- 5 files changed, 55 insertions(+), 66 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 98965037..a2b3de47 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,14 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). - allow boolean for input values [`#269`](https://github.com/mighty-justice/fields-ant/pull/269) - Revert "Infer state in address type (#230)" [`f7cdc2c`](https://github.com/mighty-justice/fields-ant/commit/f7cdc2c730260a57fdd2b538cd40134459df4144) +#### [v1.3.3-2](https://github.com/mighty-justice/fields-ant/compare/v1.3.3-1...v1.3.3-2) + +> 30 August 2023 + +- Add disable props to ArrayCard [`8471545`](https://github.com/mighty-justice/fields-ant/commit/847154596f75b6deb527ebdbf291c6d249010c88) +- Add new disable button props to EditableCard components [`769168d`](https://github.com/mighty-justice/fields-ant/commit/769168dec3678aaa9c05ad49254ef62967d0e1a0) +- Add disableDelete and tooltip props [`02e7543`](https://github.com/mighty-justice/fields-ant/commit/02e7543b04300a122f02a5e7219c07054daf2727) + #### [v1.3.3-1](https://github.com/mighty-justice/fields-ant/compare/v1.3.3...v1.3.3-1) > 19 February 2020 @@ -128,11 +136,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). > 4 September 2019 -#### [v1.0.5](https://github.com/mighty-justice/fields-ant/compare/v1.0.4...v1.0.5) - -> 4 September 2019 - -#### [v1.0.4](https://github.com/mighty-justice/fields-ant/compare/v1.0.3...v1.0.4) +#### [v1.0.5](https://github.com/mighty-justice/fields-ant/compare/v1.0.3...v1.0.5) > 4 September 2019 diff --git a/dist/fieldsAnt.cjs.js b/dist/fieldsAnt.cjs.js index 3d1c7680..a49fc684 100644 --- a/dist/fieldsAnt.cjs.js +++ b/dist/fieldsAnt.cjs.js @@ -3622,12 +3622,7 @@ function (_Component) { value: function buttons() { return React__default.createElement(ButtonToolbar, { noSpacing: true - }, this.deleteButton, React__default.createElement("div", { - style: { - display: 'inline-block', - width: '10px' - } - }), this.editButton); + }, this.deleteButton, this.editButton); } }, { key: "render", @@ -3668,7 +3663,7 @@ function (_Component) { return React__default.createElement(Antd.Tooltip, { title: disableDelete ? disableDeleteTooltip : '' - }, React__default.createElement("span", null, React__default.createElement(GuardedButton, { + }, React__default.createElement(GuardedButton, { className: className, confirm: true, disabled: disableDelete || isLoading || this.isDeleting.isTrue, @@ -3677,7 +3672,7 @@ function (_Component) { onClick: this.handleDelete, size: "small", type: "danger" - }, "Delete"))); + }, "Delete")); } }, { key: "editButton", @@ -3691,7 +3686,7 @@ function (_Component) { classNameSuffix = this.props.classNameSuffix || lodash.kebabCase(title); return React__default.createElement(Antd.Tooltip, { title: disableEdit ? disableEditTooltip : '' - }, React__default.createElement("span", null, React__default.createElement(GuardedButton, { + }, React__default.createElement(GuardedButton, { className: "btn-edit btn-edit-".concat(classNameSuffix), disabled: isLoading || this.isEditing.isTrue || this.isDeleting.isTrue || disableEdit, icon: "edit", @@ -3699,16 +3694,16 @@ function (_Component) { onClick: this.isEditing.setTrue, size: "small", type: "primary" - }, "Edit"))); + }, "Edit")); } }]); return EditableCard; }(React.Component), _class3$3.defaultProps = _objectSpread2({}, formPropsDefaults, { - disableDeleteTooltip: '', disableDelete: false, - disableEditTooltip: '', - disableEdit: false + disableDeleteTooltip: '', + disableEdit: false, + disableEditTooltip: '' }), _temp$9), (_descriptor$4 = _applyDecoratedDescriptor(_class2$g.prototype, "isDeleting", [mobx.observable], { configurable: true, enumerable: true, @@ -3804,7 +3799,7 @@ function (_Component) { classNameSuffix = this.props.classNameSuffix || lodash.kebabCase(title); return React__default.createElement(Antd.Tooltip, { title: disableAdd ? disableAddTooltip : '' - }, React__default.createElement("span", null, React__default.createElement(GuardedButton, { + }, React__default.createElement(GuardedButton, { className: "btn-new btn-new-".concat(classNameSuffix), disabled: isLoading || this.isAddingNew.isTrue || disableAdd, icon: "plus", @@ -3812,7 +3807,7 @@ function (_Component) { onClick: this.isAddingNew.setTrue, size: "small", type: "primary" - }, "Add"))); + }, "Add")); } }, { key: "render", @@ -3852,9 +3847,9 @@ function (_Component) { onSave: onSave, onSuccess: onSuccess, disableDeleteTooltip: disableDeleteTooltip, - disableDelete: disableDelete ? disableDelete(model) : false, + disableDelete: disableDelete ? disableDelete(modelItem) : false, disableEditTooltip: disableEditTooltip, - disableEdit: disableEdit ? disableEdit(model) : false, + disableEdit: disableEdit ? disableEdit(modelItem) : false, title: "" }); })); @@ -3865,14 +3860,14 @@ function (_Component) { }(React.Component), _class3$4.defaultProps = _objectSpread2({}, formPropsDefaults, { disableAdd: false, disableAddTooltip: '', - disableDeleteTooltip: '', disableDelete: function disableDelete() { return false; }, - disableEditTooltip: '', + disableDeleteTooltip: '', disableEdit: function disableEdit() { return false; - } + }, + disableEditTooltip: '' }), _temp$a), (_descriptor$5 = _applyDecoratedDescriptor(_class2$h.prototype, "isAddingNew", [mobx.observable], { configurable: true, enumerable: true, diff --git a/dist/fieldsAnt.esm.js b/dist/fieldsAnt.esm.js index b00d0d84..74333963 100644 --- a/dist/fieldsAnt.esm.js +++ b/dist/fieldsAnt.esm.js @@ -3615,12 +3615,7 @@ function (_Component) { value: function buttons() { return React.createElement(ButtonToolbar, { noSpacing: true - }, this.deleteButton, React.createElement("div", { - style: { - display: 'inline-block', - width: '10px' - } - }), this.editButton); + }, this.deleteButton, this.editButton); } }, { key: "render", @@ -3661,7 +3656,7 @@ function (_Component) { return React.createElement(Tooltip, { title: disableDelete ? disableDeleteTooltip : '' - }, React.createElement("span", null, React.createElement(GuardedButton, { + }, React.createElement(GuardedButton, { className: className, confirm: true, disabled: disableDelete || isLoading || this.isDeleting.isTrue, @@ -3670,7 +3665,7 @@ function (_Component) { onClick: this.handleDelete, size: "small", type: "danger" - }, "Delete"))); + }, "Delete")); } }, { key: "editButton", @@ -3684,7 +3679,7 @@ function (_Component) { classNameSuffix = this.props.classNameSuffix || kebabCase(title); return React.createElement(Tooltip, { title: disableEdit ? disableEditTooltip : '' - }, React.createElement("span", null, React.createElement(GuardedButton, { + }, React.createElement(GuardedButton, { className: "btn-edit btn-edit-".concat(classNameSuffix), disabled: isLoading || this.isEditing.isTrue || this.isDeleting.isTrue || disableEdit, icon: "edit", @@ -3692,16 +3687,16 @@ function (_Component) { onClick: this.isEditing.setTrue, size: "small", type: "primary" - }, "Edit"))); + }, "Edit")); } }]); return EditableCard; }(Component), _class3$3.defaultProps = _objectSpread2({}, formPropsDefaults, { - disableDeleteTooltip: '', disableDelete: false, - disableEditTooltip: '', - disableEdit: false + disableDeleteTooltip: '', + disableEdit: false, + disableEditTooltip: '' }), _temp$9), (_descriptor$4 = _applyDecoratedDescriptor(_class2$g.prototype, "isDeleting", [observable], { configurable: true, enumerable: true, @@ -3797,7 +3792,7 @@ function (_Component) { classNameSuffix = this.props.classNameSuffix || kebabCase(title); return React.createElement(Tooltip, { title: disableAdd ? disableAddTooltip : '' - }, React.createElement("span", null, React.createElement(GuardedButton, { + }, React.createElement(GuardedButton, { className: "btn-new btn-new-".concat(classNameSuffix), disabled: isLoading || this.isAddingNew.isTrue || disableAdd, icon: "plus", @@ -3805,7 +3800,7 @@ function (_Component) { onClick: this.isAddingNew.setTrue, size: "small", type: "primary" - }, "Add"))); + }, "Add")); } }, { key: "render", @@ -3845,9 +3840,9 @@ function (_Component) { onSave: onSave, onSuccess: onSuccess, disableDeleteTooltip: disableDeleteTooltip, - disableDelete: disableDelete ? disableDelete(model) : false, + disableDelete: disableDelete ? disableDelete(modelItem) : false, disableEditTooltip: disableEditTooltip, - disableEdit: disableEdit ? disableEdit(model) : false, + disableEdit: disableEdit ? disableEdit(modelItem) : false, title: "" }); })); @@ -3858,14 +3853,14 @@ function (_Component) { }(Component), _class3$4.defaultProps = _objectSpread2({}, formPropsDefaults, { disableAdd: false, disableAddTooltip: '', - disableDeleteTooltip: '', disableDelete: function disableDelete() { return false; }, - disableEditTooltip: '', + disableDeleteTooltip: '', disableEdit: function disableEdit() { return false; - } + }, + disableEditTooltip: '' }), _temp$a), (_descriptor$5 = _applyDecoratedDescriptor(_class2$h.prototype, "isAddingNew", [observable], { configurable: true, enumerable: true, diff --git a/dist/fieldsAnt.umd.js b/dist/fieldsAnt.umd.js index 63b7eb75..64701e48 100644 --- a/dist/fieldsAnt.umd.js +++ b/dist/fieldsAnt.umd.js @@ -3614,12 +3614,7 @@ value: function buttons() { return React__default.createElement(ButtonToolbar, { noSpacing: true - }, this.deleteButton, React__default.createElement("div", { - style: { - display: 'inline-block', - width: '10px' - } - }), this.editButton); + }, this.deleteButton, this.editButton); } }, { key: "render", @@ -3660,7 +3655,7 @@ return React__default.createElement(Antd.Tooltip, { title: disableDelete ? disableDeleteTooltip : '' - }, React__default.createElement("span", null, React__default.createElement(GuardedButton, { + }, React__default.createElement(GuardedButton, { className: className, confirm: true, disabled: disableDelete || isLoading || this.isDeleting.isTrue, @@ -3669,7 +3664,7 @@ onClick: this.handleDelete, size: "small", type: "danger" - }, "Delete"))); + }, "Delete")); } }, { key: "editButton", @@ -3683,7 +3678,7 @@ classNameSuffix = this.props.classNameSuffix || lodash.kebabCase(title); return React__default.createElement(Antd.Tooltip, { title: disableEdit ? disableEditTooltip : '' - }, React__default.createElement("span", null, React__default.createElement(GuardedButton, { + }, React__default.createElement(GuardedButton, { className: "btn-edit btn-edit-".concat(classNameSuffix), disabled: isLoading || this.isEditing.isTrue || this.isDeleting.isTrue || disableEdit, icon: "edit", @@ -3691,16 +3686,16 @@ onClick: this.isEditing.setTrue, size: "small", type: "primary" - }, "Edit"))); + }, "Edit")); } }]); return EditableCard; }(React.Component), _class3$3.defaultProps = _objectSpread2({}, formPropsDefaults, { - disableDeleteTooltip: '', disableDelete: false, - disableEditTooltip: '', - disableEdit: false + disableDeleteTooltip: '', + disableEdit: false, + disableEditTooltip: '' }), _temp$9), (_descriptor$4 = _applyDecoratedDescriptor(_class2$g.prototype, "isDeleting", [mobx.observable], { configurable: true, enumerable: true, @@ -3796,7 +3791,7 @@ classNameSuffix = this.props.classNameSuffix || lodash.kebabCase(title); return React__default.createElement(Antd.Tooltip, { title: disableAdd ? disableAddTooltip : '' - }, React__default.createElement("span", null, React__default.createElement(GuardedButton, { + }, React__default.createElement(GuardedButton, { className: "btn-new btn-new-".concat(classNameSuffix), disabled: isLoading || this.isAddingNew.isTrue || disableAdd, icon: "plus", @@ -3804,7 +3799,7 @@ onClick: this.isAddingNew.setTrue, size: "small", type: "primary" - }, "Add"))); + }, "Add")); } }, { key: "render", @@ -3844,9 +3839,9 @@ onSave: onSave, onSuccess: onSuccess, disableDeleteTooltip: disableDeleteTooltip, - disableDelete: disableDelete ? disableDelete(model) : false, + disableDelete: disableDelete ? disableDelete(modelItem) : false, disableEditTooltip: disableEditTooltip, - disableEdit: disableEdit ? disableEdit(model) : false, + disableEdit: disableEdit ? disableEdit(modelItem) : false, title: "" }); })); @@ -3857,14 +3852,14 @@ }(React.Component), _class3$4.defaultProps = _objectSpread2({}, formPropsDefaults, { disableAdd: false, disableAddTooltip: '', - disableDeleteTooltip: '', disableDelete: function disableDelete() { return false; }, - disableEditTooltip: '', + disableDeleteTooltip: '', disableEdit: function disableEdit() { return false; - } + }, + disableEditTooltip: '' }), _temp$a), (_descriptor$5 = _applyDecoratedDescriptor(_class2$h.prototype, "isAddingNew", [mobx.observable], { configurable: true, enumerable: true, diff --git a/package.json b/package.json index f93b4f64..7b9a0ef8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mighty-justice/fields-ant", - "version": "1.3.3-1", + "version": "1.3.3-2", "description": "Standard Ant design component interface for Field Sets", "main": "dist/fieldsAnt.cjs.js", "module": "dist/fieldsAnt.esm.js", From 15ff00222fccb483a65ef523e7367bbe55a7ce73 Mon Sep 17 00:00:00 2001 From: Ellen Date: Wed, 30 Aug 2023 10:35:18 -0700 Subject: [PATCH 09/10] Clean up --- src/components/EditableCard.tsx | 8 ++++---- src/utilities/common.tsx | 3 +-- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/EditableCard.tsx b/src/components/EditableCard.tsx index 68bc7e23..59546617 100644 --- a/src/components/EditableCard.tsx +++ b/src/components/EditableCard.tsx @@ -34,10 +34,10 @@ class EditableCard extends Component { public static defaultProps: Partial = { ...formPropsDefaults, - disableDeleteTooltip: '', disableDelete: false, - disableEditTooltip: '', + disableDeleteTooltip: '', disableEdit: false, + disableEditTooltip: '', }; private async handleDelete () { @@ -85,8 +85,8 @@ class EditableCard extends Component { icon='delete' isGuarded={isGuarded} onClick={this.handleDelete} - size="small" - type="danger" + size='small' + type='danger' > Delete diff --git a/src/utilities/common.tsx b/src/utilities/common.tsx index ff1ca3d5..56d3d880 100644 --- a/src/utilities/common.tsx +++ b/src/utilities/common.tsx @@ -186,8 +186,7 @@ export function noopValidator (_rule: any, _value: any, callback: (message?: str callback(); } - -export function getBtnClassName(action: string, classNameSuffix?: string, title?: React.ReactNode): string { +export function getBtnClassName (action: string, classNameSuffix?: string, title?: React.ReactNode): string { const prefix = `btn-${action}`; return cx(prefix, isString(title) && `${prefix}-${kebabCase(title)}`, { [`${prefix}-${classNameSuffix}`]: !!classNameSuffix, From ab3a8a8846116bc1d16cbfd0b4a2ef5deb18a942 Mon Sep 17 00:00:00 2001 From: Ellen Date: Wed, 30 Aug 2023 10:39:08 -0700 Subject: [PATCH 10/10] v1.3.3-3 --- CHANGELOG.md | 6 ++++++ package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a2b3de47..6f0ad1c2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,12 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). - allow boolean for input values [`#269`](https://github.com/mighty-justice/fields-ant/pull/269) - Revert "Infer state in address type (#230)" [`f7cdc2c`](https://github.com/mighty-justice/fields-ant/commit/f7cdc2c730260a57fdd2b538cd40134459df4144) +#### [v1.3.3-3](https://github.com/mighty-justice/fields-ant/compare/v1.3.3-2...v1.3.3-3) + +> 30 August 2023 + +- Clean up [`15ff002`](https://github.com/mighty-justice/fields-ant/commit/15ff00222fccb483a65ef523e7367bbe55a7ce73) + #### [v1.3.3-2](https://github.com/mighty-justice/fields-ant/compare/v1.3.3-1...v1.3.3-2) > 30 August 2023 diff --git a/package.json b/package.json index 7b9a0ef8..48dc985f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mighty-justice/fields-ant", - "version": "1.3.3-2", + "version": "1.3.3-3", "description": "Standard Ant design component interface for Field Sets", "main": "dist/fieldsAnt.cjs.js", "module": "dist/fieldsAnt.esm.js",