Skip to content

Commit

Permalink
Users should be able to lock a given currency to the money input/field (
Browse files Browse the repository at this point in the history 
#2847)

* feat(money input/field): disable currency select input to fix to a single currency

* feat(money input/field): update readmes

* feat(multiline text input): improve changeset description

* feat(multiline text input): update ternary logic

---------

Co-authored-by: Ddouglasz <[email protected]>
  • Loading branch information
@ddouglasz
ddouglasz and Ddouglasz authored Jun 26, 2024
1 parent 08675d5 commit d30d6e3
Show file tree
Hide file tree
Showing 9 changed files with 100 additions and 57 deletions.
6 changes: 6 additions & 0 deletions .changeset/shy-poems-allow.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@commercetools-uikit/money-field': minor
'@commercetools-uikit/money-input': minor
---

Introduced a new property (`isCurrencyInputDisabled`) which can be used to lock the currency selector element in the component so users can't change its value.
63 changes: 32 additions & 31 deletions packages/components/fields/money-field/README.md
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions packages/components/fields/money-field/src/money-field.story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ class MoneyFieldStory extends Component {
isDisabled={boolean('isDisabled', false)}
isReadOnly={boolean('isReadOnly', false)}
isAutofocussed={boolean('isAutofocussed', false)}
isCurrencyInputDisabled={boolean('isCurrencyInputDisabled', false)}
onChange={(event) => {
action('onChange')(event);

Expand Down
5 changes: 5 additions & 0 deletions packages/components/fields/money-field/src/money-field.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,6 +215,10 @@ export type TMoneyFieldProps = {
* Shows high precision badge in case current value uses high precision.
*/
hasHighPrecisionBadge?: boolean;
/**
* Indicates that the currency input cannot be modified.
*/
isCurrencyInputDisabled?: boolean;
};

type TMoneyFieldState = Pick<TMoneyFieldProps, 'id'>;
Expand Down Expand Up @@ -314,6 +318,7 @@ class MoneyField extends Component<TMoneyFieldProps, TMoneyFieldState> {
{...filterDataAttributes(this.props)}
aria-invalid={hasError}
aria-errormessage={sequentialErrorsId}
isCurrencyInputDisabled={this.props.isCurrencyInputDisabled}
/>
<FieldErrors
id={sequentialErrorsId}
Expand Down
10 changes: 10 additions & 0 deletions packages/components/fields/money-field/src/money-field.visualroute.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,16 @@ export const component = () => (
isDisabled={true}
/>
</Spec>
<Spec label="when only the currency select input is disabled">
<MoneyField
title="Price"
horizontalConstraint={7}
value={value}
onChange={() => {}}
currencies={currencies}
isCurrencyInputDisabled={true}
/>
</Spec>
<Spec label="with description">
<MoneyField
title="Price"
Expand Down
49 changes: 25 additions & 24 deletions packages/components/inputs/money-input/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,30 +49,31 @@ export default Example;

## Properties

| Props | Type | Required | Default | Description |
| ----------------------- | ----------------------------------------------------------------------------------------------------- | :------: | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. |
| `autoComplete` | `string` | | | Used as HTML `autocomplete` property |
| `aria-invalid` | `boolean` | | | Indicate if the value entered in the input is invalid. |
| `aria-errormessage` | `string` | | | HTML ID of an element containing an error message related to the input. |
| `name` | `string` | | | The prefix used to create a HTML `name` property for the amount input field (`${name}.amount`) and the currency dropdown (`${name}.currencyCode`). |
| `value` | `Object`<br/>[See signature.](#signature-value) | ✅ | | Value of the input. Consists of the currency code and an amount. `amount` is a string representing the amount. A dot has to be used as the decimal separator. |
| `currencies` | `Array: string[]` | | `[]` | List of possible currencies. When not provided or empty, the component renders a label with the value's currency instead of a dropdown. |
| `placeholder` | `string` | | | Placeholder text for the input |
| `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Called when input is blurred |
| `onFocus` | `Function`<br/>[See signature.](#signature-onFocus) | | | Called when input is focused |
| `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant |
| `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). |
| `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content |
| `isAutofocussed` | `boolean` | | | Focus the input on initial render |
| `onChange` | `Function`<br/>[See signature.](#signature-onChange) | | | Called with the event of the input or dropdown when either the currency or the amount have changed. |
| `menuPortalTarget` | `ReactSelectProps['menuPortalTarget']` | | | Dom element to portal the currency select menu to&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
| `menuPortalZIndex` | `number` | | `1` | z-index value for the currency select menu portal&#xA;<br>&#xA;Use in conjunction with `menuPortalTarget` |
| `menuShouldBlockScroll` | `ReactSelectProps['menuShouldBlockScroll']` | | | whether the menu should block scroll while open&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
| `hasError` | `boolean` | | | Indicates that input has errors |
| `hasWarning` | `boolean` | | | Control to indicate on the input if there are selected values that are potentially invalid |
| `hasHighPrecisionBadge` | `boolean` | | | Shows high precision badge in case current value uses high precision. |
| `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. |
| Props | Type | Required | Default | Description |
| ------------------------- | ----------------------------------------------------------------------------------------------------- | :------: | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. |
| `autoComplete` | `string` | | | Used as HTML `autocomplete` property |
| `aria-invalid` | `boolean` | | | Indicate if the value entered in the input is invalid. |
| `aria-errormessage` | `string` | | | HTML ID of an element containing an error message related to the input. |
| `name` | `string` | | | The prefix used to create a HTML `name` property for the amount input field (`${name}.amount`) and the currency dropdown (`${name}.currencyCode`). |
| `value` | `Object`<br/>[See signature.](#signature-value) | ✅ | | Value of the input. Consists of the currency code and an amount. `amount` is a string representing the amount. A dot has to be used as the decimal separator. |
| `currencies` | `Array: string[]` | | `[]` | List of possible currencies. When not provided or empty, the component renders a label with the value's currency instead of a dropdown. |
| `placeholder` | `string` | | | Placeholder text for the input |
| `onBlur` | `Function`<br/>[See signature.](#signature-onBlur) | | | Called when input is blurred |
| `onFocus` | `Function`<br/>[See signature.](#signature-onFocus) | | | Called when input is focused |
| `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant |
| `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). |
| `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content |
| `isAutofocussed` | `boolean` | | | Focus the input on initial render |
| `onChange` | `Function`<br/>[See signature.](#signature-onChange) | | | Called with the event of the input or dropdown when either the currency or the amount have changed. |
| `menuPortalTarget` | `ReactSelectProps['menuPortalTarget']` | | | Dom element to portal the currency select menu to&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
| `menuPortalZIndex` | `number` | | `1` | z-index value for the currency select menu portal&#xA;<br>&#xA;Use in conjunction with `menuPortalTarget` |
| `menuShouldBlockScroll` | `ReactSelectProps['menuShouldBlockScroll']` | | | whether the menu should block scroll while open&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
| `hasError` | `boolean` | | | Indicates that input has errors |
| `hasWarning` | `boolean` | | | Control to indicate on the input if there are selected values that are potentially invalid |
| `hasHighPrecisionBadge` | `boolean` | | | Shows high precision badge in case current value uses high precision. |
| `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. |
| `isCurrencyInputDisabled` | `boolean` | | | Indicates that the currency input cannot be modified. |

## Signatures

Expand Down
4 changes: 4 additions & 0 deletions packages/components/inputs/money-input/src/money-input.story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,10 @@ class MoneyInputStory extends Component {
isDisabled={boolean('isDisabled', false)}
isReadOnly={boolean('isReadOnly', false)}
isAutofocussed={boolean('isAutofocussed', false)}
isCurrencyInputDisabled={boolean(
'isCurrencyInputDisabled',
false
)}
onChange={(event) => {
action('onChange')(event);

Expand Down
10 changes: 8 additions & 2 deletions packages/components/inputs/money-input/src/money-input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -534,6 +534,10 @@ type TMoneyInputProps = {
| 16
| 'scale'
| 'auto';
/**
* Indicates that the currency input cannot be modified.
*/
isCurrencyInputDisabled?: boolean;
};

const defaultProps: Pick<
Expand Down Expand Up @@ -805,7 +809,7 @@ const MoneyInput = (props: TMoneyInputProps) => {
inputId={MoneyInput.getCurrencyDropdownId(moneyInputId)}
name={getCurrencyDropdownName(props.name)}
value={option}
isDisabled={props.isDisabled}
isDisabled={props.isCurrencyInputDisabled || props.isDisabled}
isSearchable={false}
components={
{
Expand All @@ -818,7 +822,9 @@ const MoneyInput = (props: TMoneyInputProps) => {
Input: (ownProps) => (
<components.Input {...ownProps} readOnly={props.isReadOnly} />
),
DropdownIndicator,
DropdownIndicator: props.isCurrencyInputDisabled
? null
: DropdownIndicator,
} as ReactSelectProps['components']
}
options={options}
Expand Down
9 changes: 9 additions & 0 deletions packages/components/inputs/money-input/src/money-input.visualroute.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,15 @@ export const component = () => (
isDisabled={true}
/>
</Spec>
<Spec label="when only the currency select input is disabled">
<MoneyInput
horizontalConstraint={7}
value={value}
onChange={() => {}}
currencies={currencies}
isCurrencyInputDisabled={true}
/>
</Spec>
<Spec label="with description">
<MoneyInput
description="How much is the fish?"
Expand Down

0 comments on commit d30d6e3

Please sign in to comment.