Skip to content

Commit

Permalink
Remove autosizeinput
Browse files Browse the repository at this point in the history
  • Loading branch information
ebonow committed Jun 4, 2021
1 parent a92c09a commit 2ad9345
Show file tree
Hide file tree
Showing 6 changed files with 1,655 additions and 1,653 deletions.
1 change: 1 addition & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@ cypress/support/*
lib/*
node_modules/*
**/node_modules/*
**/magical-types/*
1 change: 1 addition & 0 deletions babel.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ module.exports = {
plugins: [
'@emotion/babel-plugin',
['@babel/plugin-proposal-class-properties', { loose: true }],
['@babel/plugin-proposal-private-methods', { loose: true }],
'@babel/plugin-transform-runtime',
],
presets: [
Expand Down
3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"@atlaskit/tooltip": "^17.1.2",
"@babel/core": "^7.12.0",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-private-methods": "^7.13.0",
"@babel/plugin-transform-runtime": "^7.12.0",
"@babel/polyfill": "^7.12.1",
"@babel/preset-env": "^7.12.0",
Expand Down Expand Up @@ -46,7 +47,6 @@
"@types/react-codesandboxer": "^3.1.0",
"@types/react-dom": "^16.9.10",
"@types/react-helmet": "^5.0.16",
"@types/react-input-autosize": "^2.2.0",
"@types/react-markings": "^1.3.0",
"@types/react-node-resolver": "^2.0.0",
"@types/react-router-dom": "^4.3.5",
Expand Down Expand Up @@ -96,7 +96,6 @@
"react-codesandboxer": "^3.1.5",
"react-dom": "^16.13.0",
"react-helmet": "^5.2.0",
"react-input-autosize": "^3.0.0",
"react-markings": "^1.3.0",
"react-router-dom": "^4.2.2",
"react-sortable-hoc": "^1.9.1",
Expand Down
2 changes: 0 additions & 2 deletions packages/react-select/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,9 @@
"@babel/runtime": "^7.12.0",
"@emotion/cache": "^11.4.0",
"@emotion/react": "^11.1.1",
"@types/react-input-autosize": "^2.2.0",
"@types/react-transition-group": "^4.4.0",
"memoize-one": "^5.0.0",
"prop-types": "^15.6.0",
"react-input-autosize": "^3.0.0",
"react-transition-group": "^4.3.0"
},
"devDependencies": {
Expand Down
64 changes: 46 additions & 18 deletions packages/react-select/src/components/Input.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/** @jsx jsx */
import { InputHTMLAttributes } from 'react';
import { jsx } from '@emotion/react';
import AutosizeInput, { AutosizeInputProps } from 'react-input-autosize';

import {
CommonPropsAndClassName,
Expand All @@ -14,7 +14,8 @@ export interface InputSpecificProps<
Option extends OptionBase = OptionBase,
IsMulti extends boolean = boolean,
Group extends GroupBase<Option> = GroupBase<Option>
> extends CommonPropsAndClassName<Option, IsMulti, Group> {
> extends InputHTMLAttributes<HTMLInputElement>,
CommonPropsAndClassName<Option, IsMulti, Group> {
/** Reference to the internal element */
innerRef?: (instance: HTMLInputElement | null) => void;
/** Set whether the input should be visible. Does not affect input size. */
Expand All @@ -23,14 +24,15 @@ export interface InputSpecificProps<
isDisabled?: boolean;
/** The ID of the form that the input belongs to */
form?: string;
/** Set className for the input element */
inputClassName?: string;
}

export type InputProps<
Option extends OptionBase = OptionBase,
IsMulti extends boolean = boolean,
Group extends GroupBase<Option> = GroupBase<Option>
> = InputSpecificProps<Option, IsMulti, Group> &
Omit<AutosizeInputProps, 'ref'>;
> = InputSpecificProps<Option, IsMulti, Group>;

export const inputCSS = <
Option extends OptionBase,
Expand All @@ -45,16 +47,39 @@ export const inputCSS = <
paddingTop: spacing.baseUnit / 2,
visibility: isDisabled ? 'hidden' : 'visible',
color: colors.neutral80,
...containerStyle,
});
const inputStyle = (isHidden: boolean) => ({
label: 'input',
background: 0,

const spacingStyle = {
gridArea: '1 / 2' as const,
font: 'inherit',
minWidth: '2px',
border: 0,
fontSize: 'inherit',
opacity: isHidden ? 0 : 1,
margin: 0,
outline: 0,
padding: 0,
};

const containerStyle = {
flex: '1 1 auto',
display: 'inline-grid',
gridTemplateColumns: '0 min-content',

'&:after': {
content: 'attr(data-value) " "' as const,
visibility: 'hidden' as const,
whiteSpace: 'nowrap' as const,
...spacingStyle,
},
};

const inputStyle = (isHidden: boolean) => ({
label: 'input',
color: 'inherit',
background: 0,
opacity: isHidden ? 0 : 1,
width: '100%',
...spacingStyle,
});

const Input = <
Expand All @@ -64,17 +89,20 @@ const Input = <
>(
props: InputProps<Option, IsMulti, Group>
) => {
const { className, cx, getStyles } = props;
const { innerRef, isDisabled, isHidden, ...innerProps } = cleanCommonProps(
props
);
const { className, cx, getStyles, value } = props;
const { innerRef, isDisabled, isHidden, inputClassName, ...innerProps } =
cleanCommonProps(props);

return (
<div css={getStyles('input', props)}>
<AutosizeInput
className={cx({ input: true }, className)}
inputRef={innerRef}
inputStyle={inputStyle(isHidden)}
<div
className={cx({ 'input-container': true }, className)}
css={getStyles('input', props)}
data-value={value || ''}
>
<input
className={cx({ input: true }, inputClassName)}
ref={innerRef}
style={inputStyle(isHidden)}
disabled={isDisabled}
{...innerProps}
/>
Expand Down
Loading

0 comments on commit 2ad9345

Please sign in to comment.