Skip to content

Commit

Permalink
feat: renamed turnOffSeparators to disableGroupSeparators
Browse files Browse the repository at this point in the history 
Breaking Change: Renamed "turnOffSeparators" to "disableGroupSeparators"
  • Loading branch information
@cchanxzy
cchanxzy committed Dec 6, 2020
1 parent c545b78 commit b16f577
Show file tree
Hide file tree
Showing 7 changed files with 49 additions and 49 deletions.
50 changes: 25 additions & 25 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ import CurrencyInput from 'react-currency-input-field';

Note: the separators cannot be a number, and `decimalSeparator` must be different to `groupSeparator`.

To turn off auto adding the group separator, add `turnOffSeparators={true}`.
To turn off auto adding the group separator, add `disableGroupSeparators={true}`.

## Intl Locale Config

Expand Down Expand Up @@ -109,29 +109,29 @@ Example if `fixedDecimalLength` was 2:

## Props

| Name | Type | Default | Description |
| -------------------- | ---------- | -------------- | ------------------------------------------------------------------------ |
| allowDecimals | `boolean` | `true` | Allow decimals |
| allowNegativeValue | `boolean` | `true` | Allow user to enter negative value |
| className | `string` | | Class names |
| decimalsLimit | `number` | `2` | Limit length of decimals allowed |
| defaultValue | `number` | | Default value |
| value | `number` | | Programmatically set the value |
| disabled | `boolean` | `false` | Disabled |
| fixedDecimalLength | `number` | | Value will always have the specified length of decimals |
| id | `string` | | Component id |
| maxLength | `number` | | Maximum characters the user can enter |
| onChange | `function` | | Handle change in value |
| onBlurValue | `function` | | Handle value onBlur |
| placeholder | `string` | | Placeholder if no value |
| decimalScale | `number` | | Specify decimal scale for padding/trimming |
| prefix | `string` | | Include a prefix eg. £ or \$ |
| step | `number` | | Incremental value change on arrow down and arrow up key press |
| decimalSeparator | `string` | locale default | Separator between integer part and fractional part of value |
| groupSeparator | `string` | locale default | Separator between thousand, million and billion |
| intlConfig | `object` | | International locale config |
| turnOffAbbreviations | `boolean` | `false` | Disable abbreviations eg. 1k > 1,000, 2m > 2,000,000 |
| turnOffSeparators | `boolean` | `false` | Disable auto adding the group separator between values, eg. 1000 > 1,000 |
| Name | Type | Default | Description |
| ---------------------- | ---------- | -------------- | ------------------------------------------------------------------------ |
| allowDecimals | `boolean` | `true` | Allow decimals |
| allowNegativeValue | `boolean` | `true` | Allow user to enter negative value |
| className | `string` | | Class names |
| decimalsLimit | `number` | `2` | Limit length of decimals allowed |
| defaultValue | `number` | | Default value |
| value | `number` | | Programmatically set the value |
| disabled | `boolean` | `false` | Disabled |
| fixedDecimalLength | `number` | | Value will always have the specified length of decimals |
| id | `string` | | Component id |
| maxLength | `number` | | Maximum characters the user can enter |
| onChange | `function` | | Handle change in value |
| onBlurValue | `function` | | Handle value onBlur |
| placeholder | `string` | | Placeholder if no value |
| decimalScale | `number` | | Specify decimal scale for padding/trimming |
| prefix | `string` | | Include a prefix eg. £ or \$ |
| step | `number` | | Incremental value change on arrow down and arrow up key press |
| decimalSeparator | `string` | locale default | Separator between integer part and fractional part of value |
| groupSeparator | `string` | locale default | Separator between thousand, million and billion |
| intlConfig | `object` | | International locale config |
| turnOffAbbreviations | `boolean` | `false` | Disable abbreviations eg. 1k > 1,000, 2m > 2,000,000 |
| disableGroupSeparators | `boolean` | `false` | Disable auto adding the group separator between values, eg. 1000 > 1,000 |

## Format values for display

Expand All @@ -144,7 +144,7 @@ const formattedValue = formatValue({
value = 123456,
groupSeparator = ',',
decimalSeparator = '.',
turnOffSeparators = false,
disableGroupSeparators = false,
prefix = '$',
});
```
Expand Down
4 changes: 2 additions & 2 deletions src/components/CurrencyInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const CurrencyInput: FC<CurrencyInputProps> = forwardRef<
prefix,
intlConfig,
step,
turnOffSeparators = false,
disableGroupSeparators = false,
turnOffAbbreviations = false,
...props
}: CurrencyInputProps,
Expand Down Expand Up @@ -63,7 +63,7 @@ export const CurrencyInput: FC<CurrencyInputProps> = forwardRef<
const formatValueOptions = {
decimalSeparator,
groupSeparator,
turnOffSeparators,
disableGroupSeparators,
intlConfig,
prefix,
};
Expand Down
2 changes: 1 addition & 1 deletion src/components/CurrencyInputProps.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ export type CurrencyInputProps = Overwrite<
*
* Default = false
*/
turnOffSeparators?: boolean;
disableGroupSeparators?: boolean;

/**
* Disable abbreviations eg. 1k > 1,000, 2m > 2,000,000
Expand Down
2 changes: 1 addition & 1 deletion src/components/__tests__/CurrencyInput-separators.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ describe('<CurrencyInput /> component > separators', () => {
id={id}
name={name}
prefix="£"
turnOffSeparators={true}
disableGroupSeparators={true}
onChange={onChangeSpy}
defaultValue={10000}
/>
Expand Down
12 changes: 6 additions & 6 deletions src/components/utils/__tests__/formatValue.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,22 +48,22 @@ describe('formatValue', () => {
).toEqual('123456789');
});

it('should NOT add separator if "turnOffSeparators" is true', () => {
it('should NOT add separator if "disableGroupSeparators" is true', () => {
expect(
formatValue({
value: '1234567',
turnOffSeparators: true,
disableGroupSeparators: true,
})
).toEqual('1234567');
});

it('should NOT add separator if "turnOffSeparators" is true even if decimal and group separators specified', () => {
it('should NOT add separator if "disableGroupSeparators" is true even if decimal and group separators specified', () => {
expect(
formatValue({
value: '1234567',
decimalSeparator: '.',
groupSeparator: ',',
turnOffSeparators: true,
disableGroupSeparators: true,
})
).toEqual('1234567');
});
Expand Down Expand Up @@ -216,14 +216,14 @@ describe('formatValue', () => {
).toEqual('¥654,321-00');
});

it('should override locale if turnOffSeparators passed in', () => {
it('should override locale if disableGroupSeparators passed in', () => {
expect(
formatValue({
value: '987654321',
intlConfig: { locale: 'zh-CN', currency: 'CNY' },
decimalSeparator: '.',
groupSeparator: ',',
turnOffSeparators: true,
disableGroupSeparators: true,
})
).toEqual('¥987654321');
});
Expand Down
10 changes: 5 additions & 5 deletions src/components/utils/formatValue.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ type FormatValueOptions = {
*
* Default = false
*/
turnOffSeparators?: boolean;
disableGroupSeparators?: boolean;

/**
* Intl locale currency config
Expand Down Expand Up @@ -124,10 +124,10 @@ const replaceParts = (
prefix,
groupSeparator,
decimalSeparator,
turnOffSeparators = false,
disableGroupSeparators = false,
}: Pick<
FormatValueOptions,
'prefix' | 'groupSeparator' | 'decimalSeparator' | 'turnOffSeparators'
'prefix' | 'groupSeparator' | 'decimalSeparator' | 'disableGroupSeparators'
>
): string => {
return parts
Expand All @@ -138,13 +138,13 @@ const replaceParts = (
}

if (type === 'group') {
return !turnOffSeparators
return !disableGroupSeparators
? [...prev, groupSeparator !== undefined ? groupSeparator : value]
: prev;
}

if (type === 'decimal') {
return !turnOffSeparators
return !disableGroupSeparators
? [...prev, decimalSeparator !== undefined ? decimalSeparator : value]
: prev;
}
Expand Down
18 changes: 9 additions & 9 deletions src/examples/FormatValuesExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const FormatValuesExample: FC = () => {
const [prefix, setPrefix] = useState('$');
const [groupSeparator, setGroupSeparator] = useState(',');
const [decimalSeparator, setDecimalSeparator] = useState('.');
const [turnOffSeparators, setTurnOffSeparators] = useState(false);
const [disableGroupSeparators, setdisableGroupSeparators] = useState(false);

const handleValueChange = ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => {
setValue(value);
Expand All @@ -31,7 +31,7 @@ const FormatValuesExample: FC = () => {
const handleTurnOffSeparatorChange = ({
target: { value },
}: React.ChangeEvent<HTMLInputElement>) => {
setTurnOffSeparators(value === 'true' ? true : false);
setdisableGroupSeparators(value === 'true' ? true : false);
};

return (
Expand Down Expand Up @@ -88,26 +88,26 @@ const FormatValuesExample: FC = () => {
<div className="ml-3 custom-control custom-radio custom-control-inline">
<input
type="radio"
id="turnOffSeparatorsTrue"
id="disableGroupSeparatorsTrue"
className="custom-control-input"
value="true"
onChange={handleTurnOffSeparatorChange}
checked={turnOffSeparators}
checked={disableGroupSeparators}
/>
<label className="custom-control-label" htmlFor="turnOffSeparatorsTrue">
<label className="custom-control-label" htmlFor="disableGroupSeparatorsTrue">
True
</label>
</div>
<div className="custom-control custom-radio custom-control-inline">
<input
type="radio"
id="turnOffSeparatorsFalse"
id="disableGroupSeparatorsFalse"
className="custom-control-input"
value="false"
onChange={handleTurnOffSeparatorChange}
checked={turnOffSeparators === false}
checked={disableGroupSeparators === false}
/>
<label className="custom-control-label" htmlFor="turnOffSeparatorsFalse">
<label className="custom-control-label" htmlFor="disableGroupSeparatorsFalse">
False
</label>
</div>
Expand All @@ -120,7 +120,7 @@ const FormatValuesExample: FC = () => {
value,
groupSeparator,
decimalSeparator,
turnOffSeparators,
disableGroupSeparators,
prefix,
})}
</div>
Expand Down

0 comments on commit b16f577

Please sign in to comment.