@alfalab/core-components-password-input 6.0.0 → 6.1.0-snapshot-92b8690
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dynamic-mixins/component.d.ts +46 -0
- package/dynamic-mixins/component.js +43 -0
- package/dynamic-mixins/component.js.map +1 -0
- package/dynamic-mixins/index.css +3 -0
- package/dynamic-mixins/index.d.ts +1 -0
- package/dynamic-mixins/index.js +10 -0
- package/dynamic-mixins/index.js.map +1 -0
- package/dynamic-mixins/index.module.css.js +8 -0
- package/dynamic-mixins/index.module.css.js.map +1 -0
- package/esm/index.css +1 -1
- package/esm/index.module.css.js +1 -1
- package/esm/index.module.css.js.map +1 -1
- package/index.css +1 -1
- package/index.module.css.js +1 -1
- package/index.module.css.js.map +1 -1
- package/modern/index.css +1 -1
- package/modern/index.module.css.js +1 -1
- package/modern/index.module.css.js.map +1 -1
- package/moderncssm/index.module.css +2 -0
- package/package.json +5 -5
- package/src/index.module.css +1 -1
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { InputProps } from '@alfalab/core-components-input';
|
|
3
|
+
export declare type PasswordInputProps = Omit<InputProps, 'size'> & {
|
|
4
|
+
/**
|
|
5
|
+
* Размер компонента
|
|
6
|
+
* @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
|
|
7
|
+
*/
|
|
8
|
+
size?: Exclude<InputProps['size'], 40>;
|
|
9
|
+
/**
|
|
10
|
+
* Управление видимостью пароля (controlled)
|
|
11
|
+
*/
|
|
12
|
+
passwordVisible?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Управление текстом подсказки
|
|
15
|
+
*/
|
|
16
|
+
passwordHint?: {
|
|
17
|
+
visible: string;
|
|
18
|
+
hidden: string;
|
|
19
|
+
};
|
|
20
|
+
/**
|
|
21
|
+
* Коллбэк при изменении видимости пароля
|
|
22
|
+
*/
|
|
23
|
+
onPasswordVisibleChange?: (visible: boolean) => void;
|
|
24
|
+
};
|
|
25
|
+
export declare const PasswordInput: React.ForwardRefExoticComponent<Omit<InputProps, "size"> & {
|
|
26
|
+
/**
|
|
27
|
+
* Размер компонента
|
|
28
|
+
* @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно
|
|
29
|
+
*/
|
|
30
|
+
size?: Exclude<InputProps['size'], 40>;
|
|
31
|
+
/**
|
|
32
|
+
* Управление видимостью пароля (controlled)
|
|
33
|
+
*/
|
|
34
|
+
passwordVisible?: boolean | undefined;
|
|
35
|
+
/**
|
|
36
|
+
* Управление текстом подсказки
|
|
37
|
+
*/
|
|
38
|
+
passwordHint?: {
|
|
39
|
+
visible: string;
|
|
40
|
+
hidden: string;
|
|
41
|
+
} | undefined;
|
|
42
|
+
/**
|
|
43
|
+
* Коллбэк при изменении видимости пароля
|
|
44
|
+
*/
|
|
45
|
+
onPasswordVisibleChange?: ((visible: boolean) => void) | undefined;
|
|
46
|
+
} & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var tslib = require('tslib');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var cn = require('classnames');
|
|
8
|
+
var dynamicMixins$1 = require('@alfalab/core-components-icon-button/dynamic-mixins');
|
|
9
|
+
var dynamicMixins = require('@alfalab/core-components-input/dynamic-mixins');
|
|
10
|
+
var EyeMIcon = require('@alfalab/icons-glyph/EyeMIcon');
|
|
11
|
+
var EyeOffMIcon = require('@alfalab/icons-glyph/EyeOffMIcon');
|
|
12
|
+
var index_module = require('./index.module.css.js');
|
|
13
|
+
|
|
14
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
15
|
+
|
|
16
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
17
|
+
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
18
|
+
|
|
19
|
+
var PasswordInput = React.forwardRef(function (_a, ref) {
|
|
20
|
+
var onPasswordVisibleChange = _a.onPasswordVisibleChange, passwordVisible = _a.passwordVisible, disabled = _a.disabled, colors = _a.colors, rightAddons = _a.rightAddons, _b = _a.size, size = _b === void 0 ? 48 : _b, _c = _a.passwordHint, passwordHint = _c === void 0 ? {
|
|
21
|
+
visible: 'Скрыть',
|
|
22
|
+
hidden: 'Показать',
|
|
23
|
+
} : _c, className = _a.className, restProps = tslib.__rest(_a, ["onPasswordVisibleChange", "passwordVisible", "disabled", "colors", "rightAddons", "size", "passwordHint", "className"]);
|
|
24
|
+
var visible = passwordHint.visible, hidden = passwordHint.hidden;
|
|
25
|
+
var uncontrolled = passwordVisible === undefined;
|
|
26
|
+
var _d = React.useState(uncontrolled ? false : passwordVisible), statePasswordVisible = _d[0], setStatePasswordVisible = _d[1];
|
|
27
|
+
var handleButtonClick = React.useCallback(function () {
|
|
28
|
+
if (onPasswordVisibleChange) {
|
|
29
|
+
onPasswordVisibleChange(!passwordVisible);
|
|
30
|
+
}
|
|
31
|
+
if (uncontrolled) {
|
|
32
|
+
setStatePasswordVisible(function (prevVisible) { return !prevVisible; });
|
|
33
|
+
}
|
|
34
|
+
}, [passwordVisible, uncontrolled, onPasswordVisibleChange]);
|
|
35
|
+
var isPasswordVisible = uncontrolled ? statePasswordVisible : passwordVisible;
|
|
36
|
+
return (React__default.default.createElement(dynamicMixins.Input, tslib.__assign({}, restProps, { disabled: disabled, type: isPasswordVisible ? 'text' : 'password', size: size, ref: ref, colors: colors, className: cn__default.default(className), rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
|
|
37
|
+
rightAddons,
|
|
38
|
+
React__default.default.createElement(dynamicMixins$1.IconButton, { className: index_module.eye, colors: colors, view: 'secondary', size: 24, icon: isPasswordVisible ? EyeMIcon.EyeMIcon : EyeOffMIcon.EyeOffMIcon, onClick: handleButtonClick, disabled: disabled, title: isPasswordVisible ? visible : hidden })), inputClassName: index_module.input })));
|
|
39
|
+
});
|
|
40
|
+
PasswordInput.displayName = 'PasswordInput';
|
|
41
|
+
|
|
42
|
+
exports.PasswordInput = PasswordInput;
|
|
43
|
+
//# sourceMappingURL=component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../src/component.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useState } from 'react';\nimport cn from 'classnames';\n\nimport { IconButton } from '@alfalab/core-components-icon-button';\nimport { Input, InputProps } from '@alfalab/core-components-input';\nimport { EyeMIcon } from '@alfalab/icons-glyph/EyeMIcon';\nimport { EyeOffMIcon } from '@alfalab/icons-glyph/EyeOffMIcon';\n\nimport styles from './index.module.css';\n\nexport type PasswordInputProps = Omit<InputProps, 'size'> & {\n /**\n * Размер компонента\n * @description s, m, l, xl deprecated, используйте вместо них 48, 56, 64, 72 соответственно\n */\n size?: Exclude<InputProps['size'], 40>;\n\n /**\n * Управление видимостью пароля (controlled)\n */\n passwordVisible?: boolean;\n\n /**\n * Управление текстом подсказки\n */\n passwordHint?: {\n visible: string;\n hidden: string;\n };\n\n /**\n * Коллбэк при изменении видимости пароля\n */\n onPasswordVisibleChange?: (visible: boolean) => void;\n};\n\nexport const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n (\n {\n onPasswordVisibleChange,\n passwordVisible,\n disabled,\n colors,\n rightAddons,\n size = 48,\n passwordHint = {\n visible: 'Скрыть',\n hidden: 'Показать',\n },\n className,\n ...restProps\n },\n ref,\n ) => {\n const { visible, hidden } = passwordHint;\n const uncontrolled = passwordVisible === undefined;\n const [statePasswordVisible, setStatePasswordVisible] = useState(\n uncontrolled ? false : passwordVisible,\n );\n\n const handleButtonClick = useCallback(() => {\n if (onPasswordVisibleChange) {\n onPasswordVisibleChange(!passwordVisible);\n }\n\n if (uncontrolled) {\n setStatePasswordVisible((prevVisible) => !prevVisible);\n }\n }, [passwordVisible, uncontrolled, onPasswordVisibleChange]);\n\n const isPasswordVisible = uncontrolled ? statePasswordVisible : passwordVisible;\n\n return (\n <Input\n {...restProps}\n disabled={disabled}\n type={isPasswordVisible ? 'text' : 'password'}\n size={size}\n ref={ref}\n colors={colors}\n className={cn(className)}\n rightAddons={\n <React.Fragment>\n {rightAddons}\n <IconButton\n className={styles.eye}\n colors={colors}\n view='secondary'\n size={24}\n icon={isPasswordVisible ? EyeMIcon : EyeOffMIcon}\n onClick={handleButtonClick}\n disabled={disabled}\n title={isPasswordVisible ? visible : hidden}\n />\n </React.Fragment>\n }\n inputClassName={styles.input}\n />\n );\n },\n);\n\nPasswordInput.displayName = 'PasswordInput';\n"],"names":["forwardRef","__rest","useState","useCallback","React","Input","__assign","cn","IconButton","styles","EyeMIcon","EyeOffMIcon"],"mappings":";;;;;;;;;;;;;;;;;;IAoCa,aAAa,GAAGA,gBAAU,CACnC,UACI,EAaC,EACD,GAAG,EAAA;IAbC,IAAA,uBAAuB,GAAA,EAAA,CAAA,uBAAA,EACvB,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,EAAS,GAAA,EAAA,CAAA,IAAA,EAAT,IAAI,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EACT,EAAA,GAAA,EAAA,CAAA,YAGC,EAHD,YAAY,GAAG,EAAA,KAAA,MAAA,GAAA;AACX,QAAA,OAAO,EAAE,QAAQ;AACjB,QAAA,MAAM,EAAE,UAAU;AACrB,KAAA,GAAA,EAAA,EACD,SAAS,GAAA,EAAA,CAAA,SAAA,EACN,SAAS,GAAAC,YAAA,CAAA,EAAA,EAZhB,wHAaC,CADe;IAIR,IAAA,OAAO,GAAa,YAAY,CAAA,OAAzB,EAAE,MAAM,GAAK,YAAY,CAAA,MAAjB;AACvB,IAAA,IAAM,YAAY,GAAG,eAAe,KAAK,SAAS;AAC5C,IAAA,IAAA,KAAkDC,cAAQ,CAC5D,YAAY,GAAG,KAAK,GAAG,eAAe,CACzC,EAFM,oBAAoB,QAAA,EAAE,uBAAuB,QAEnD;IAED,IAAM,iBAAiB,GAAGC,iBAAW,CAAC,YAAA;AAClC,QAAA,IAAI,uBAAuB,EAAE;AACzB,YAAA,uBAAuB,CAAC,CAAC,eAAe,CAAC;AAC5C;AAED,QAAA,IAAI,YAAY,EAAE;YACd,uBAAuB,CAAC,UAAC,WAAW,EAAK,EAAA,OAAA,CAAC,WAAW,CAAA,EAAA,CAAC;AACzD;KACJ,EAAE,CAAC,eAAe,EAAE,YAAY,EAAE,uBAAuB,CAAC,CAAC;IAE5D,IAAM,iBAAiB,GAAG,YAAY,GAAG,oBAAoB,GAAG,eAAe;IAE/E,QACIC,qCAACC,mBAAK,EAAAC,cAAA,CAAA,EAAA,EACE,SAAS,EACb,EAAA,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,iBAAiB,GAAG,MAAM,GAAG,UAAU,EAC7C,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,SAAS,EAAEC,mBAAE,CAAC,SAAS,CAAC,EACxB,WAAW,EACPH,sBAAA,CAAA,aAAA,CAACA,sBAAK,CAAC,QAAQ,EAAA,IAAA;YACV,WAAW;AACZ,YAAAA,sBAAA,CAAA,aAAA,CAACI,0BAAU,EAAA,EACP,SAAS,EAAEC,YAAM,CAAC,GAAG,EACrB,MAAM,EAAE,MAAM,EACd,IAAI,EAAC,WAAW,EAChB,IAAI,EAAE,EAAE,EACR,IAAI,EAAE,iBAAiB,GAAGC,iBAAQ,GAAGC,uBAAW,EAChD,OAAO,EAAE,iBAAiB,EAC1B,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,iBAAiB,GAAG,OAAO,GAAG,MAAM,EAAA,CAC7C,CACW,EAErB,cAAc,EAAEF,YAAM,CAAC,KAAK,EAAA,CAAA,CAC9B;AAEV,CAAC;AAGL,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './component';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n.eye:last-child {\n height: 100%;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,KAAK,CAAC,2BAA2B,CAAC;;;;"}
|
package/esm/index.css
CHANGED
package/esm/index.module.css.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.eye:last-child {\n height: 100%;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,KAAK,CAAC,2BAA2B,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n.eye:last-child {\n height: 100%;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,KAAK,CAAC,2BAA2B,CAAC;;;;"}
|
package/index.css
CHANGED
package/index.module.css.js
CHANGED
package/index.module.css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.eye:last-child {\n height: 100%;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,KAAK,CAAC,2BAA2B,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n.eye:last-child {\n height: 100%;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,KAAK,CAAC,2BAA2B,CAAC;;;;"}
|
package/modern/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.eye:last-child {\n height: 100%;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,KAAK,CAAC,2BAA2B,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n.eye:last-child {\n height: 100%;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,KAAK,CAAC,2BAA2B,CAAC;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alfalab/core-components-password-input",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.1.0-snapshot-92b8690",
|
|
4
4
|
"description": "Input password",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
"main": "index.js",
|
|
11
11
|
"module": "./esm/index.js",
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@alfalab/core-components-icon-button": "
|
|
14
|
-
"@alfalab/core-components-input": "
|
|
13
|
+
"@alfalab/core-components-icon-button": "7.1.0-snapshot-92b8690",
|
|
14
|
+
"@alfalab/core-components-input": "16.1.0-snapshot-92b8690",
|
|
15
15
|
"@alfalab/icons-glyph": "^2.210.0",
|
|
16
16
|
"classnames": "^2.5.1",
|
|
17
17
|
"tslib": "^2.4.0"
|
|
@@ -24,6 +24,6 @@
|
|
|
24
24
|
"access": "public",
|
|
25
25
|
"directory": "dist"
|
|
26
26
|
},
|
|
27
|
-
"themesVersion": "14.
|
|
28
|
-
"varsVersion": "10.
|
|
27
|
+
"themesVersion": "14.1.0-snapshot-92b8690",
|
|
28
|
+
"varsVersion": "10.1.0-snapshot-92b8690"
|
|
29
29
|
}
|
package/src/index.module.css
CHANGED