Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

STSMACOM-835 avoid defaultProps in functional components #1480

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
* `<SearchAndSort>` - re-position Advanced search button when search panel does not have enough space. Refs STSMACOM-830.
* Extend `ViewMetadata` component to accept a child render function for custom rendering. Refs STSMACOM-828.
* Improve AdvancedSearch parsing algorithm to keep repeated spaces in queries. Fixes STSMACOM-837.
* Avoid deprecated `defaultProps` for functional components. Refs STSMACOM-835.

## [9.1.1] (IN PROGRESS)

Expand Down
95 changes: 49 additions & 46 deletions lib/AddressFieldGroup/AddressEdit/AddressEdit.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,63 +53,67 @@ const propTypes = {
visibleFields: PropTypes.arrayOf(PropTypes.string),
};

const defaultProps = {
fieldComponents: {
country: TextField,
addressLine1: TextField,
addressLine2: TextField,
city: TextField,
stateRegion: TextField,
zipCode: TextField,
addressType: {
component: TextField,
validate: validateAddressType,
},
const defaultFieldComponents = {
country: TextField,
addressLine1: TextField,
addressLine2: TextField,
city: TextField,
stateRegion: TextField,
zipCode: TextField,
addressType: {
component: TextField,
validate: validateAddressType,
},
headerComponent: address => (
<Field
label="Primary Address"
name="primaryAddress"
type="checkbox"
id={`PrimaryAddress---${address.id}`}
component={Checkbox}
/>
),
labelMap: {
addressType: <FormattedMessage id="stripes-smart-components.addressEdit.label.addressType" />,
addressLine1: <FormattedMessage id="stripes-smart-components.addressEdit.label.addressLine1" />,
addressLine2: <FormattedMessage id="stripes-smart-components.addressEdit.label.addressLine2" />,
stateRegion: <FormattedMessage id="stripes-smart-components.addressEdit.label.stateRegion" />,
zipCode: <FormattedMessage id="stripes-smart-components.addressEdit.label.zipCode" />,
country: <FormattedMessage id="stripes-smart-components.addressEdit.label.country" />,
city: <FormattedMessage id="stripes-smart-components.addressEdit.label.city" />,
},
visibleFields: [
'country',
'addressLine1',
'addressLine2',
'city',
'stateRegion',
'zipCode',
'addressType',
],
};

const AddressEdit = (props) => {
const defaultHeaderComponent = address => (
<Field
label="Primary Address"
name="primaryAddress"
type="checkbox"
id={`PrimaryAddress---${address.id}`}
component={Checkbox}
/>
);

const defaultLabelMap = {
addressType: <FormattedMessage id="stripes-smart-components.addressEdit.label.addressType" />,
addressLine1: <FormattedMessage id="stripes-smart-components.addressEdit.label.addressLine1" />,
addressLine2: <FormattedMessage id="stripes-smart-components.addressEdit.label.addressLine2" />,
stateRegion: <FormattedMessage id="stripes-smart-components.addressEdit.label.stateRegion" />,
zipCode: <FormattedMessage id="stripes-smart-components.addressEdit.label.zipCode" />,
country: <FormattedMessage id="stripes-smart-components.addressEdit.label.country" />,
city: <FormattedMessage id="stripes-smart-components.addressEdit.label.city" />,
};

const defaultVisibleFields = [
'country',
'addressLine1',
'addressLine2',
'city',
'stateRegion',
'zipCode',
'addressType',
];

const AddressEdit = ({
fieldComponents = defaultFieldComponents,
headerComponent = defaultHeaderComponent,
labelMap = defaultLabelMap,
visibleFields = defaultVisibleFields,
...rest
}) => {
const props = { fieldComponents, headerComponent, labelMap, visibleFields, ...rest };
const {
addressObject,
canDelete,
uiId,
handleSubmit,
handleDelete,
handleCancel,
labelMap,
visibleFields,
headerComponent,
fieldComponents
} = props;

const mergedFieldComponents = Object.assign(defaultProps.fieldComponents, fieldComponents);
const mergedFieldComponents = { ...defaultFieldComponents, ...fieldComponents };
const groupArray = [];
let rowArray = [];

Expand Down Expand Up @@ -182,7 +186,6 @@ const AddressEdit = (props) => {
};

AddressEdit.propTypes = propTypes;
AddressEdit.defaultProps = defaultProps;

export default stripesFinalForm({
navigationCheck: true,
Expand Down
20 changes: 8 additions & 12 deletions lib/AddressFieldGroup/AddressView/AddressView.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,15 @@ const propTypes = {
visibleFields: PropTypes.arrayOf(PropTypes.string),
};

const defaultProps = {
headerField: 'primaryAddress',
headerFormatter: address => (
function AddressView({
headerField = 'primaryAddress',
headerFormatter = address => (
<FormattedMessage
id={`stripes-smart-components.address.${address.primaryAddress ? 'primary' : 'alternate'}`}
/>
),
headingLevel: 5,
visibleFields: [
headingLevel = 5,
visibleFields = [
'addressType',
'addressLine1',
'addressLine2',
Expand All @@ -35,17 +35,14 @@ const defaultProps = {
'zipCode',
'country',
],
};

function AddressView(props) {
...rest
}) {
const props = { headerField, headerFormatter, headingLevel, visibleFields, ...rest };
const {
addressObject,
canEdit,
handleEdit,
headerFormatter,
headingLevel,
uiId,
visibleFields
} = props;

const defaultLabelMap = {
Expand Down Expand Up @@ -108,6 +105,5 @@ function AddressView(props) {
}

AddressView.propTypes = propTypes;
AddressView.defaultProps = defaultProps;

export default AddressView;
39 changes: 17 additions & 22 deletions lib/ChangeDueDateDialog/LoanList.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,6 @@ const propTypes = {
})
};

const defaultProps = {
allowSelection: true,
height: 400,
loans: [],
loanSelection: {},
requestCounts: {},
};

const manifest = Object.freeze({
loanPolicies: {
type: 'okapi',
Expand All @@ -44,13 +36,17 @@ const manifest = Object.freeze({
},
});

const LoanList = (props) => {
const {
loanSelection,
onToggleLoanSelection,
requestCounts,
} = props;

const LoanList = ({
alerts,
allowSelection = true,
height = 400,
loans = [],
loanSelection = {},
onToggleBulkLoanSelection,
onToggleLoanSelection,
requestCounts = {},
resources,
}) => {
const { formatMessage } = useIntl();

const visibleColumns = [
Expand All @@ -64,22 +60,22 @@ const LoanList = (props) => {
'loanListLoanPolicy',
];

if (props.allowSelection) visibleColumns.unshift('selected');
if (allowSelection) visibleColumns.unshift('selected');

const rowUpdater = (rowData) => requestCounts[rowData.itemId];

return (
<MultiColumnList
interactive={false}
height={props.height}
contentData={props.loans}
height={height}
contentData={loans}
visibleColumns={visibleColumns}
rowUpdater={rowUpdater}
columnMapping={{
selected: <Checkbox
name="selected-all"
checked={Object.values(loanSelection).includes(false) !== true}
onChange={props.onToggleBulkLoanSelection}
onChange={onToggleBulkLoanSelection}
aria-label={formatMessage({ id: 'stripes-smart-components.cddd.selectAllLoans' })}
/>,
loanListAlertDetails: <FormattedMessage id="stripes-smart-components.cddd.header.alertDetails" />,
Expand All @@ -101,7 +97,7 @@ const LoanList = (props) => {
{ loanName: get(loan, ['item', 'title']) }
)}
/>,
loanListAlertDetails: loan => props.alerts[loan.id] || '',
loanListAlertDetails: loan => alerts[loan.id] || '',
loanListTitle: loan => get(loan, ['item', 'title']),
loanListItemStatus: loan => get(loan, ['item', 'status', 'name']),
loanListCurrentDueDate:
Expand All @@ -110,7 +106,7 @@ const LoanList = (props) => {
loanListBarcode: loan => get(loan, ['item', 'barcode']),
loanListEffectiveCallNumber: loan => getEffectiveCallNumber(loan),
loanListLoanPolicy: loan => {
const policies = get(props, ['resources', 'loanPolicies', 'records', 0, 'loanPolicies'], []);
const policies = get(resources, ['loanPolicies', 'records', 0, 'loanPolicies'], []);
const policy = policies.find(p => p.id === loan.loanPolicyId) || {};
return policy.name;
},
Expand All @@ -128,7 +124,6 @@ const LoanList = (props) => {
);
};

LoanList.defaultProps = defaultProps;
LoanList.propTypes = propTypes;
LoanList.manifest = manifest;

Expand Down
7 changes: 1 addition & 6 deletions lib/ColumnManager/ColumnManager.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
import useColumnManager from './useColumnManager';
import ColumnManagerMenu from './ColumnManagerMenu';

const ColumnManager = ({ id, columnMapping, children, excludeKeys, persist, visibleColumns: visibleColumnsProp }) => {
const ColumnManager = ({ id, columnMapping = {}, children, excludeKeys = [], persist, visibleColumns: visibleColumnsProp }) => {
const prefixId = `column-manager-${id}`;

const nonToggleableColumns = useRef(excludeKeys).current;
Expand Down Expand Up @@ -45,11 +45,6 @@ const ColumnManager = ({ id, columnMapping, children, excludeKeys, persist, visi
return children(renderProps);
};

ColumnManager.defaultProps = {
columnMapping: {},
excludeKeys: [],
};

ColumnManager.propTypes = {
children: PropTypes.func.isRequired,
columnMapping: PropTypes.object.isRequired,
Expand Down
9 changes: 2 additions & 7 deletions lib/ColumnManager/ColumnManagerMenu.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import { Checkbox, MenuSection } from '@folio/stripes-components';
const ColumnManagerMenu = ({
prefix,
columnMapping,
visibleColumns,
excludeColumns,
visibleColumns = [],
excludeColumns = [],
toggleColumn,
}) => {
const intl = useIntl();
Expand Down Expand Up @@ -51,9 +51,4 @@ ColumnManagerMenu.propTypes = {
visibleColumns: PropTypes.arrayOf(PropTypes.string),
};

ColumnManagerMenu.defaultProps = {
visibleColumns: [],
excludeColumns: [],
};

export default ColumnManagerMenu;
Original file line number Diff line number Diff line change
Expand Up @@ -107,10 +107,6 @@ const propTypes = {
viewRoute: PropTypes.string.isRequired,
};

const defaultProps = {
fieldOptionsStats: null,
};

const CustomFieldsForm = ({
submitting,
viewRoute,
Expand All @@ -130,7 +126,7 @@ const CustomFieldsForm = ({
onFormReset,
saveCustomFields,
optionsStatsLoaded,
fieldOptionsStats,
fieldOptionsStats = null,
onOptionDelete,
optionsToDelete,
}) => {
Expand Down Expand Up @@ -383,7 +379,6 @@ const CustomFieldsForm = ({
};

CustomFieldsForm.propTypes = propTypes;
CustomFieldsForm.defaultProps = defaultProps;

export default stripesFinalForm({
navigationCheck: true,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,9 @@ const propTypes = {
optionsToAddLeft: PropTypes.number,
};

const defaultProps = {
optionsToAddLeft: null,
};

const AddOptionButton = ({
onClick,
optionsToAddLeft,
optionsToAddLeft = null,
}) => (
<>
{optionsToAddLeft !== null && (
Expand All @@ -42,6 +38,5 @@ const AddOptionButton = ({
);

AddOptionButton.propTypes = propTypes;
AddOptionButton.defaultProps = defaultProps;

export default AddOptionButton;
Original file line number Diff line number Diff line change
Expand Up @@ -36,20 +36,15 @@ const propTypes = {
usedOptions: PropTypes.arrayOf(PropTypes.string),
};

const defaultProps = {
isMultiSelect: false,
maxOptionsNumber: null,
};

const isLabelDuplicated = (label, allLabels) => {
return allLabels.filter(currentLabel => label === currentLabel).length > 1;
};

const OptionsField = ({
fieldNamePrefix,
maxOptionsNumber,
maxOptionsNumber = null,
changeFieldValue,
isMultiSelect,
isMultiSelect = false,
usedOptions,
optionsStatsLoaded,
onOptionDelete,
Expand Down Expand Up @@ -269,6 +264,5 @@ const OptionsField = ({
};

OptionsField.propTypes = propTypes;
OptionsField.defaultProps = defaultProps;

export default OptionsField;
Loading
Loading