From ec15f83b947fb2daf4ca1a72e3af527dc89512a3 Mon Sep 17 00:00:00 2001 From: Vijay Aravamudhan Date: Fri, 15 Oct 2021 16:22:25 +0530 Subject: chore: move 'packages/forms' into 'src' (no longer an injected package) (#2079) --- packages/forms/src/input/index.tsx | 208 ------------------------------ packages/forms/src/input/scorePassword.ts | 42 ------ packages/forms/src/input/styles.ts | 102 --------------- 3 files changed, 352 deletions(-) delete mode 100644 packages/forms/src/input/index.tsx delete mode 100644 packages/forms/src/input/scorePassword.ts delete mode 100644 packages/forms/src/input/styles.ts (limited to 'packages/forms/src/input') diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx deleted file mode 100644 index 0b16fe688..000000000 --- a/packages/forms/src/input/index.tsx +++ /dev/null @@ -1,208 +0,0 @@ -import { mdiEye, mdiEyeOff } from '@mdi/js'; -import Icon from '@mdi/react'; -import classnames from 'classnames'; -import { Component, createRef, InputHTMLAttributes } from 'react'; -import injectSheet from 'react-jss'; - -import { IFormField, IWithStyle } from '../typings/generic'; - -import { Error } from '../error'; -import { Label } from '../label'; -import { Wrapper } from '../wrapper'; -import { scorePasswordFunc } from './scorePassword'; - -import styles from './styles'; - -interface IData { - [index: string]: string; -} - -interface IProps - extends InputHTMLAttributes, - IFormField, - IWithStyle { - focus?: boolean; - prefix?: string; - suffix?: string; - scorePassword?: boolean; - showPasswordToggle?: boolean; - data: IData; - inputClassName?: string; - onEnterKey?: Function; -} - -interface IState { - showPassword: boolean; - passwordScore: number; -} - -class InputComponent extends Component { - static defaultProps = { - focus: false, - onChange: () => {}, - onBlur: () => {}, - onFocus: () => {}, - scorePassword: false, - showLabel: true, - showPasswordToggle: false, - type: 'text', - disabled: false, - }; - - state = { - passwordScore: 0, - showPassword: false, - }; - - private inputRef = createRef(); - - componentDidMount() { - const { focus, data } = this.props; - - if (this.inputRef && this.inputRef.current) { - if (focus) { - this.inputRef.current.focus(); - } - - if (data) { - Object.keys(data).map( - key => (this.inputRef.current!.dataset[key] = data[key]), - ); - } - } - } - - onChange(e: React.ChangeEvent) { - const { scorePassword, onChange } = this.props; - - if (onChange) { - onChange(e); - } - - if (this.inputRef && this.inputRef.current && scorePassword) { - this.setState({ - passwordScore: scorePasswordFunc(this.inputRef.current.value), - }); - } - } - - onInputKeyPress(e: React.KeyboardEvent) { - if (e.key === 'Enter') { - const { onEnterKey } = this.props; - onEnterKey && onEnterKey(); - } - } - - render() { - const { - classes, - className, - disabled, - error, - id, - inputClassName, - label, - prefix, - scorePassword, - suffix, - showLabel, - showPasswordToggle, - type, - value, - name, - placeholder, - spellCheck, - onBlur, - onFocus, - min, - max, - step, - required, - noMargin, - } = this.props; - - const { showPassword, passwordScore } = this.state; - - const inputType = type === 'password' && showPassword ? 'text' : type; - - return ( - - - {error && } - - ); - } -} - -export const Input = injectSheet(styles)(InputComponent); diff --git a/packages/forms/src/input/scorePassword.ts b/packages/forms/src/input/scorePassword.ts deleted file mode 100644 index 59502e2b0..000000000 --- a/packages/forms/src/input/scorePassword.ts +++ /dev/null @@ -1,42 +0,0 @@ -interface ILetters { - [key: string]: number; -} - -interface IVariations { - [index: string]: boolean; - digits: boolean; - lower: boolean; - nonWords: boolean; - upper: boolean; -} - -export function scorePasswordFunc(password: string): number { - let score = 0; - if (!password) { - return score; - } - - // award every unique letter until 5 repetitions - const letters: ILetters = {}; - for (const element of password) { - letters[element] = (letters[element] || 0) + 1; - score += 5 / letters[element]; - } - - // bonus points for mixing it up - const variations: IVariations = { - digits: /\d/.test(password), - lower: /[a-z]/.test(password), - nonWords: /\W/.test(password), - upper: /[A-Z]/.test(password), - }; - - let variationCount = 0; - for (const key of Object.keys(variations)) { - variationCount += variations[key] === true ? 1 : 0; - } - - score += (variationCount - 1) * 10; - - return Math.round(score); -} diff --git a/packages/forms/src/input/styles.ts b/packages/forms/src/input/styles.ts deleted file mode 100644 index 6d56e93b3..000000000 --- a/packages/forms/src/input/styles.ts +++ /dev/null @@ -1,102 +0,0 @@ -import { Property } from 'csstype'; - -import { Theme } from '../../../theme'; - -const prefixStyles = (theme: Theme) => ({ - background: theme.inputPrefixBackground, - color: theme.inputPrefixColor, - lineHeight: `${theme.inputHeight}px`, - padding: '0 10px', - fontSize: theme.uiFontSize, -}); - -export default (theme: Theme) => ({ - label: { - '& > div': { - marginTop: 5, - }, - }, - disabled: { - opacity: theme.inputDisabledOpacity, - }, - formModifier: { - background: 'none', - border: 0, - borderLeft: theme.inputBorder, - padding: '4px 20px 0', - outline: 'none', - - '&:active': { - opacity: 0.5, - }, - - '& svg': { - fill: theme.inputModifierColor, - }, - }, - input: { - background: 'none', - border: 0, - fontSize: theme.uiFontSize, - outline: 'none', - padding: 8, - width: '100%', - color: theme.inputColor, - - '&::placeholder': { - color: theme.inputPlaceholderColor, - }, - }, - passwordScore: { - background: theme.inputScorePasswordBackground, - border: theme.inputBorder, - borderTopWidth: 0, - borderBottomLeftRadius: theme.borderRadiusSmall, - borderBottomRightRadius: theme.borderRadiusSmall, - display: 'block', - flexBasis: '100%', - height: 5, - overflow: 'hidden', - - '& meter': { - display: 'block', - height: '100%', - width: '100%', - - '&::-webkit-meter-bar': { - background: 'none', - }, - - '&::-webkit-meter-even-less-good-value': { - background: theme.brandDanger, - }, - - '&::-webkit-meter-suboptimum-value': { - background: theme.brandWarning, - }, - - '&::-webkit-meter-optimum-value': { - background: theme.brandSuccess, - }, - }, - }, - prefix: prefixStyles(theme), - suffix: prefixStyles(theme), - wrapper: { - background: theme.inputBackground, - border: theme.inputBorder, - borderRadius: theme.borderRadiusSmall, - boxSizing: 'border-box' as Property.BoxSizing, - display: 'flex', - height: theme.inputHeight, - order: 1, - width: '100%', - }, - hasPasswordScore: { - borderBottomLeftRadius: 0, - borderBottomRightRadius: 0, - }, - hasError: { - borderColor: theme.brandDanger, - }, -}); -- cgit v1.2.3-54-g00ecf