Skip to content

Commit

Permalink
Merge pull request #1287 from skbkontur/input-1272
Browse files Browse the repository at this point in the history 
 fix(Input): fix placeholder width for masked input
  • Loading branch information
@wKich
wKich authored Mar 27, 2019
2 parents d545f4c + f664b7f commit 833208f
Show file tree
Hide file tree
Showing 9 changed files with 118 additions and 24 deletions.
7 changes: 7 additions & 0 deletions packages/react-ui-screenshot-tests/gemini/input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,13 @@ gemini.suite('Input with mask', suite => {
});
});

gemini.suite('Input with placeholder and mask', suite => {
suite
.before(renderStory('Input', 'Placeholder and Mask'))
.setCaptureElements('#test-element')
.capture('Plain');
});

gemini.suite('Input with prefix and suffix', () => {
gemini.suite('Size small', suite => {
suite
Expand Down
4 changes: 2 additions & 2 deletions packages/react-ui-screenshot-tests/gemini/screens/Input with mask/Plain/chrome.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions ...ages/react-ui-screenshot-tests/gemini/screens/Input with mask/Plain/firefox.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ...creenshot-tests/gemini/screens/Input with placeholder and mask/Plain/chrome.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ...reenshot-tests/gemini/screens/Input with placeholder and mask/Plain/firefox.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ...-screenshot-tests/gemini/screens/Input with placeholder and mask/Plain/ie11.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 8 additions & 2 deletions packages/retail-ui/components/Input/Input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,12 @@ class Input extends React.Component<InputProps, InputState> {
this.input.setSelectionRange(start, end);
}

public get isMaskVisible(): boolean {
const { mask, alwaysShowMask } = this.props;
const { focused } = this.state;
return Boolean(mask && (focused || alwaysShowMask));
}

public render(): JSX.Element {
const {
onMouseEnter,
Expand Down Expand Up @@ -255,7 +261,7 @@ class Input extends React.Component<InputProps, InputState> {
style: { textAlign: align },
ref: this.refInput,
type: 'text',
placeholder: !polyfillPlaceholder ? placeholder : undefined,
placeholder: !this.isMaskVisible && !polyfillPlaceholder ? placeholder : undefined,
disabled,
};

Expand Down Expand Up @@ -333,7 +339,7 @@ class Input extends React.Component<InputProps, InputState> {
private renderPlaceholder() {
let placeholder = null;

if (this.state.polyfillPlaceholder && this.props.placeholder && !this.props.alwaysShowMask && !this.props.value) {
if (this.state.polyfillPlaceholder && this.props.placeholder && !this.isMaskVisible && !this.props.value) {
placeholder = (
<div className={classes.placeholder} style={{ textAlign: this.props.align || 'inherit' }}>
{this.props.placeholder}
Expand Down
107 changes: 89 additions & 18 deletions packages/retail-ui/components/Input/__stories__/Input.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,24 +123,95 @@ storiesOf('Input', module)
</div>
</div>
))
.add('Input with mask', () => (
<Gapped vertical>
<p>
<span>Mask:</span> <span>+7 999 999-99-99</span>{' '}
<Input
width="150"
mask="+7 999 999-99-99"
maskChar={'_'}
placeholder="+7"
alwaysShowMask
formatChars={{ '9': '[0-9]', a: '[A-Za-z]', '*': '[A-Za-z0-9]' }}
/>
</p>
<p>
<span>Mask:</span> <span>99aa9999</span>{' '}
<Input width="150" mask="99aa9999" maskChar={'_'} placeholder="99aa9999" />
</p>
</Gapped>
.add('Placeholder and Mask', () => (
<div>
<table style={{ borderSpacing: 10 }}>
<tr>
<td />
<td>width: "auto"</td>
<td>width: 100px</td>
<td>width: 350px</td>
</tr>
<tr>
<td>placeholder</td>
<td>
<Input placeholder="1234567890 1234567890 1234567890" />
</td>
<td>
<Input width={100} placeholder="1234567890 1234567890 1234567890" />
</td>
<td>
<Input width={350} placeholder="1234567890 1234567890 1234567890" />
</td>
</tr>
<tr>
<td> mask</td>
<td>
<Input mask="********** ********** **********" maskChar={'_'} alwaysShowMask />
</td>
<td>
<Input width={100} mask="********** ********** **********" maskChar={'_'} alwaysShowMask />
</td>
<td>
<Input width={350} mask="********** ********** **********" maskChar={'_'} alwaysShowMask />
</td>
</tr>
<tr>
<td>placeholder and mask</td>
<td>
<Input
mask="********** ********** **********"
maskChar={'_'}
alwaysShowMask
placeholder="1234567890 1234567890 1234567890"
/>
</td>
<td>
<Input
width={100}
mask="********** ********** **********"
maskChar={'_'}
alwaysShowMask
placeholder="1234567890 1234567890 1234567890"
/>
</td>
<td>
<Input
width={350}
mask="********** ********** **********"
maskChar={'_'}
alwaysShowMask
placeholder="1234567890 1234567890 1234567890"
/>
</td>
</tr>
</table>
<table style={{ borderSpacing: 10 }}>
<tr>
<td />
<td>focused</td>
<td>blured</td>
</tr>
<tr>
<td>placeholder and mask</td>
<td>
<Input
autoFocus
mask="********** ********** **********"
maskChar={'_'}
placeholder="1234567890 1234567890 1234567890"
/>
</td>
<td>
<Input
mask="********** ********** **********"
maskChar={'_'}
placeholder="1234567890 1234567890 1234567890"
/>
</td>
</tr>
</table>
</div>
))
.add('Input with phone mask', () => (
<Input width="150" mask="+7 999 999-99-99" maskChar={'_'} placeholder="+7" alwaysShowMask />
Expand Down
1 change: 1 addition & 0 deletions packages/retail-ui/components/internal/MaskedInput/MaskedInput.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
font-family: kontur-mask-char, Segoe UI, Helevetica Neue; /* IE use Times New Roman as default font */
font-size: inherit;
flex: 100% 1 1;
}

.inputMask {
Expand Down

0 comments on commit 833208f

Please sign in to comment.