@salutejs/plasma-new-hope 0.141.0-canary.1420.10717002054.0 → 0.141.0-canary.1421.10719019658.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/TextArea/TextArea.js +2 -1
- package/cjs/components/TextArea/TextArea.js.map +1 -1
- package/cjs/components/TextField/TextField.js +7 -12
- package/cjs/components/TextField/TextField.js.map +1 -1
- package/emotion/cjs/components/TextArea/TextArea.js +3 -2
- package/emotion/cjs/components/TextField/TextField.js +8 -13
- package/emotion/cjs/examples/plasma_b2c/components/Form/Form.stories.tsx +106 -0
- package/emotion/es/components/TextArea/TextArea.js +3 -2
- package/emotion/es/components/TextField/TextField.js +8 -13
- package/emotion/es/examples/plasma_b2c/components/Form/Form.stories.tsx +106 -0
- package/es/components/TextArea/TextArea.js +2 -1
- package/es/components/TextArea/TextArea.js.map +1 -1
- package/es/components/TextField/TextField.js +7 -12
- package/es/components/TextField/TextField.js.map +1 -1
- package/package.json +5 -4
- package/styled-components/cjs/components/TextArea/TextArea.js +2 -1
- package/styled-components/cjs/components/TextField/TextField.js +7 -12
- package/styled-components/cjs/examples/plasma_b2c/components/Form/Form.stories.tsx +106 -0
- package/styled-components/es/components/TextArea/TextArea.js +2 -1
- package/styled-components/es/components/TextField/TextField.js +7 -12
- package/styled-components/es/examples/plasma_b2c/components/Form/Form.stories.tsx +106 -0
- package/types/components/TextArea/TextArea.d.ts.map +1 -1
- package/types/components/TextField/TextField.d.ts.map +1 -1
@@ -0,0 +1,106 @@
|
|
1
|
+
import { useForm } from 'react-hook-form';
|
2
|
+
import React, { useState } from 'react';
|
3
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
4
|
+
|
5
|
+
import { WithTheme } from '../../../_helpers';
|
6
|
+
import { Button } from '../Button/Button';
|
7
|
+
import { TextField } from '../TextField/TextField';
|
8
|
+
import { TextArea } from '../TextArea/TextArea'; // TextArea.tsx 120 строка, не работает из-за некорректного ref
|
9
|
+
import { Checkbox } from '../Checkbox/Checkbox';
|
10
|
+
import { Switch } from '../Switch/Switch';
|
11
|
+
import { Radiobox } from '../Radiobox/Radiobox';
|
12
|
+
import { Select } from '../Select/Select';
|
13
|
+
import { RadioGroup } from '../../../../components/Radiobox';
|
14
|
+
|
15
|
+
type StoryDropdownProps = {};
|
16
|
+
|
17
|
+
const langName = 'language';
|
18
|
+
const itemsRadiobox = [
|
19
|
+
{ langName, value: 'c', label: 'C', disabled: false },
|
20
|
+
{ langName, value: 'cpp', label: 'C++', disabled: false },
|
21
|
+
{ langName, value: 'assembly', label: 'Assembly', disabled: false },
|
22
|
+
];
|
23
|
+
|
24
|
+
const itemsSelect = [
|
25
|
+
{
|
26
|
+
value: 'north_america',
|
27
|
+
label: 'Северная Америка',
|
28
|
+
},
|
29
|
+
{
|
30
|
+
value: 'europe',
|
31
|
+
label: 'Европа',
|
32
|
+
},
|
33
|
+
{
|
34
|
+
value: 'asia',
|
35
|
+
label: 'Азия',
|
36
|
+
},
|
37
|
+
];
|
38
|
+
|
39
|
+
const FormSelect = (props) => {
|
40
|
+
const { onChange, onBlur, name, ref } = props;
|
41
|
+
const [value, setValue] = useState();
|
42
|
+
|
43
|
+
const onChangeValue = (e) => {
|
44
|
+
setValue(e);
|
45
|
+
onChange({
|
46
|
+
target: {
|
47
|
+
value: e,
|
48
|
+
name,
|
49
|
+
},
|
50
|
+
});
|
51
|
+
};
|
52
|
+
|
53
|
+
const onBlurValue = (e) => {
|
54
|
+
onBlur(e);
|
55
|
+
};
|
56
|
+
|
57
|
+
return <Select {...props} value={value} onChange={onChangeValue} onBlur={onBlurValue} name={name} ref={ref} />;
|
58
|
+
};
|
59
|
+
|
60
|
+
const DefaultForm = () => {
|
61
|
+
const { register, handleSubmit } = useForm();
|
62
|
+
const onSubmit = (data) => {
|
63
|
+
console.log(data);
|
64
|
+
};
|
65
|
+
|
66
|
+
return (
|
67
|
+
<form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
|
68
|
+
<TextField {...register('textfield')} placeholder="Textfield" />
|
69
|
+
<TextArea {...register('textarea')} placeholder="Textarea" />
|
70
|
+
<Checkbox {...register('checkbox')} label="Checkbox" />
|
71
|
+
<Switch {...register('switch')} label="Switch" labelPosition="after" />
|
72
|
+
<RadioGroup aria-labelledby="radiogroup-title-id">
|
73
|
+
<div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
|
74
|
+
Выберите язык программирования для изучения.
|
75
|
+
</div>
|
76
|
+
{itemsRadiobox.map((item) => (
|
77
|
+
<Radiobox
|
78
|
+
key={item.value}
|
79
|
+
value={item.value}
|
80
|
+
label={item.label}
|
81
|
+
disabled={item.disabled}
|
82
|
+
{...register('radiobox')}
|
83
|
+
/>
|
84
|
+
))}
|
85
|
+
</RadioGroup>
|
86
|
+
<FormSelect {...register('select')} items={itemsSelect} />
|
87
|
+
<Button type="submit">Отправить</Button>
|
88
|
+
</form>
|
89
|
+
);
|
90
|
+
};
|
91
|
+
|
92
|
+
const meta: Meta<StoryDropdownProps> = {
|
93
|
+
title: 'plasma_b2c/Form',
|
94
|
+
decorators: [WithTheme],
|
95
|
+
component: DefaultForm,
|
96
|
+
};
|
97
|
+
|
98
|
+
export default meta;
|
99
|
+
|
100
|
+
const StoryNormal = () => {
|
101
|
+
return <DefaultForm />;
|
102
|
+
};
|
103
|
+
|
104
|
+
export const Default: StoryObj<StoryDropdownProps> = {
|
105
|
+
render: () => <StoryNormal />,
|
106
|
+
};
|
@@ -119,6 +119,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
119
119
|
uncontrolledValue = _useState6[0],
|
120
120
|
setUncontrolledValue = _useState6[1];
|
121
121
|
var outerRef = innerRef && 'current' in innerRef ? innerRef : /*#__PURE__*/createRef();
|
122
|
+
var ref = innerRef !== null && innerRef !== void 0 ? innerRef : /*#__PURE__*/createRef();
|
122
123
|
var innerOptional = required ? false : optional;
|
123
124
|
var hasHelper = Boolean(leftHelper || rightHelper || helperText);
|
124
125
|
var hasOuterLabel = Boolean(label && labelPlacement === 'outer');
|
@@ -190,7 +191,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
190
191
|
hasContentRight: Boolean(contentRight),
|
191
192
|
hasHelper: hasHelper,
|
192
193
|
applyCustomWidth: applyCustomWidth,
|
193
|
-
ref:
|
194
|
+
ref: ref,
|
194
195
|
disabled: disabled,
|
195
196
|
height: autoResize ? minAuto : height,
|
196
197
|
width: width,
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "view", "size", "readOnly", "disabled", "required", "optional", "
|
1
|
+
var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "view", "size", "readOnly", "disabled", "required", "optional", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
3
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
4
4
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
@@ -49,7 +49,6 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
49
49
|
_ref$required = _ref.required,
|
50
50
|
required = _ref$required === void 0 ? false : _ref$required,
|
51
51
|
optional = _ref.optional,
|
52
|
-
outerValue = _ref.value,
|
53
52
|
values = _ref.chips,
|
54
53
|
onChange = _ref.onChange,
|
55
54
|
onChangeChips = _ref.onChangeChips,
|
@@ -65,7 +64,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
65
64
|
inputRef: inputRef,
|
66
65
|
chipsRefs: chipsRefs
|
67
66
|
};
|
68
|
-
var _useState = useState(
|
67
|
+
var _useState = useState(!!rest.value),
|
69
68
|
_useState2 = _slicedToArray(_useState, 2),
|
70
69
|
hasValue = _useState2[0],
|
71
70
|
setHasValue = _useState2[1];
|
@@ -78,23 +77,23 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
78
77
|
var labelId = safeUseId();
|
79
78
|
var helperTextId = safeUseId();
|
80
79
|
var isChipEnumeration = enumerationType === 'chip';
|
81
|
-
var isChipsVisible = isChipEnumeration &&
|
80
|
+
var isChipsVisible = isChipEnumeration && !!(chips !== null && chips !== void 0 && chips.length);
|
82
81
|
var withHasChips = isChipsVisible ? classes.hasChips : undefined;
|
83
|
-
var hasLabelValue =
|
82
|
+
var hasLabelValue = !!label;
|
84
83
|
var hasInnerLabel = size !== 'xs' && labelPlacement === 'inner' && !isChipsVisible && hasLabelValue;
|
85
84
|
var hasOuterLabel = labelPlacement === 'outer' && hasLabelValue;
|
86
|
-
var hasPlaceholder =
|
85
|
+
var hasPlaceholder = !!placeholder && !hasInnerLabel;
|
87
86
|
var innerLabelValue = hasInnerLabel || hasOuterLabel ? label : undefined;
|
88
87
|
var innerLabelPlacementValue = labelPlacement === 'inner' && !hasInnerLabel ? undefined : labelPlacement;
|
89
88
|
var innerPlaceholderValue = hasPlaceholder ? placeholder : undefined;
|
90
|
-
var placeholderShown =
|
89
|
+
var placeholderShown = !!innerPlaceholderValue && !hasValue;
|
91
90
|
var requiredPlacementClass = requiredPlacement === 'right' ? 'align-right ' : undefined;
|
92
91
|
var labelPlacementClass = innerLabelPlacementValue ? classes["".concat(innerLabelPlacementValue, "LabelPlacement")] : undefined;
|
93
92
|
var hasValueClass = hasValue ? classes.hasValue : undefined;
|
94
93
|
var wrapperWithoutLeftContent = !contentLeft && isChipsVisible ? classes.hasEmptyContentLeft : undefined;
|
95
94
|
var wrapperWithoutRightContent = !contentRight && isChipsVisible ? classes.hasEmptyContentRight : undefined;
|
96
95
|
var handleInput = function handleInput(event) {
|
97
|
-
setHasValue(
|
96
|
+
setHasValue(!!event.target.value);
|
98
97
|
};
|
99
98
|
var handleChange = function handleChange(event) {
|
100
99
|
if (disabled || readOnly) {
|
@@ -162,9 +161,6 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
162
161
|
})) || [];
|
163
162
|
setChips(newChips);
|
164
163
|
}, [isChipEnumeration, values]);
|
165
|
-
useEffect(function () {
|
166
|
-
setHasValue(Boolean(outerValue));
|
167
|
-
}, [outerValue]);
|
168
164
|
var innerOptional = Boolean(required ? false : optional);
|
169
165
|
var hasPlaceholderOptional = innerOptional && !innerLabelValue && !hasOuterLabel;
|
170
166
|
var optionalTextNode = innerOptional ? /*#__PURE__*/React.createElement(StyledOptionalText, null, Boolean(hasPlaceholderOptional ? innerPlaceholderValue : innerLabelValue) && '\xa0', optionalText) : null;
|
@@ -218,7 +214,6 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
218
214
|
})), /*#__PURE__*/React.createElement(InputContainer, null, /*#__PURE__*/React.createElement(Input, _extends({
|
219
215
|
ref: inputForkRef,
|
220
216
|
id: innerId,
|
221
|
-
value: outerValue,
|
222
217
|
"aria-labelledby": labelId,
|
223
218
|
"aria-describedby": helperTextId,
|
224
219
|
placeholder: innerPlaceholderValue,
|
@@ -0,0 +1,106 @@
|
|
1
|
+
import { useForm } from 'react-hook-form';
|
2
|
+
import React, { useState } from 'react';
|
3
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
4
|
+
|
5
|
+
import { WithTheme } from '../../../_helpers';
|
6
|
+
import { Button } from '../Button/Button';
|
7
|
+
import { TextField } from '../TextField/TextField';
|
8
|
+
import { TextArea } from '../TextArea/TextArea'; // TextArea.tsx 120 строка, не работает из-за некорректного ref
|
9
|
+
import { Checkbox } from '../Checkbox/Checkbox';
|
10
|
+
import { Switch } from '../Switch/Switch';
|
11
|
+
import { Radiobox } from '../Radiobox/Radiobox';
|
12
|
+
import { Select } from '../Select/Select';
|
13
|
+
import { RadioGroup } from '../../../../components/Radiobox';
|
14
|
+
|
15
|
+
type StoryDropdownProps = {};
|
16
|
+
|
17
|
+
const langName = 'language';
|
18
|
+
const itemsRadiobox = [
|
19
|
+
{ langName, value: 'c', label: 'C', disabled: false },
|
20
|
+
{ langName, value: 'cpp', label: 'C++', disabled: false },
|
21
|
+
{ langName, value: 'assembly', label: 'Assembly', disabled: false },
|
22
|
+
];
|
23
|
+
|
24
|
+
const itemsSelect = [
|
25
|
+
{
|
26
|
+
value: 'north_america',
|
27
|
+
label: 'Северная Америка',
|
28
|
+
},
|
29
|
+
{
|
30
|
+
value: 'europe',
|
31
|
+
label: 'Европа',
|
32
|
+
},
|
33
|
+
{
|
34
|
+
value: 'asia',
|
35
|
+
label: 'Азия',
|
36
|
+
},
|
37
|
+
];
|
38
|
+
|
39
|
+
const FormSelect = (props) => {
|
40
|
+
const { onChange, onBlur, name, ref } = props;
|
41
|
+
const [value, setValue] = useState();
|
42
|
+
|
43
|
+
const onChangeValue = (e) => {
|
44
|
+
setValue(e);
|
45
|
+
onChange({
|
46
|
+
target: {
|
47
|
+
value: e,
|
48
|
+
name,
|
49
|
+
},
|
50
|
+
});
|
51
|
+
};
|
52
|
+
|
53
|
+
const onBlurValue = (e) => {
|
54
|
+
onBlur(e);
|
55
|
+
};
|
56
|
+
|
57
|
+
return <Select {...props} value={value} onChange={onChangeValue} onBlur={onBlurValue} name={name} ref={ref} />;
|
58
|
+
};
|
59
|
+
|
60
|
+
const DefaultForm = () => {
|
61
|
+
const { register, handleSubmit } = useForm();
|
62
|
+
const onSubmit = (data) => {
|
63
|
+
console.log(data);
|
64
|
+
};
|
65
|
+
|
66
|
+
return (
|
67
|
+
<form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
|
68
|
+
<TextField {...register('textfield')} placeholder="Textfield" />
|
69
|
+
<TextArea {...register('textarea')} placeholder="Textarea" />
|
70
|
+
<Checkbox {...register('checkbox')} label="Checkbox" />
|
71
|
+
<Switch {...register('switch')} label="Switch" labelPosition="after" />
|
72
|
+
<RadioGroup aria-labelledby="radiogroup-title-id">
|
73
|
+
<div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
|
74
|
+
Выберите язык программирования для изучения.
|
75
|
+
</div>
|
76
|
+
{itemsRadiobox.map((item) => (
|
77
|
+
<Radiobox
|
78
|
+
key={item.value}
|
79
|
+
value={item.value}
|
80
|
+
label={item.label}
|
81
|
+
disabled={item.disabled}
|
82
|
+
{...register('radiobox')}
|
83
|
+
/>
|
84
|
+
))}
|
85
|
+
</RadioGroup>
|
86
|
+
<FormSelect {...register('select')} items={itemsSelect} />
|
87
|
+
<Button type="submit">Отправить</Button>
|
88
|
+
</form>
|
89
|
+
);
|
90
|
+
};
|
91
|
+
|
92
|
+
const meta: Meta<StoryDropdownProps> = {
|
93
|
+
title: 'plasma_b2c/Form',
|
94
|
+
decorators: [WithTheme],
|
95
|
+
component: DefaultForm,
|
96
|
+
};
|
97
|
+
|
98
|
+
export default meta;
|
99
|
+
|
100
|
+
const StoryNormal = () => {
|
101
|
+
return <DefaultForm />;
|
102
|
+
};
|
103
|
+
|
104
|
+
export const Default: StoryObj<StoryDropdownProps> = {
|
105
|
+
render: () => <StoryNormal />,
|
106
|
+
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAK5E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAqBrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AA+BtD,eAAO,MAAM,sBAAsB,UAAW,aAAa,WAAW,OAAO,2BA4B5E,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,UAAU,mBAAmB,EAAE,aAAa,CAAC,
|
1
|
+
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAK5E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAqBrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AA+BtD,eAAO,MAAM,sBAAsB,UAAW,aAAa,WAAW,OAAO,2BA4B5E,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,UAAU,mBAAmB,EAAE,aAAa,CAAC,8FAiL1E,CAAC;AAEP,eAAO,MAAM,cAAc;;;mBAnLQ,UAAU,mBAAmB,EAAE,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;CA2M/E,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG/C,OAAO,KAAK,EAAuC,cAAc,EAAE,MAAM,mBAAmB,CAAC;AA4B7F,eAAO,MAAM,IAAI,0CAGhB,CAAC;AAEF,eAAO,MAAM,aAAa,SAAU,UAAU,cAAc,EAAE,cAAc,CAAC,
|
1
|
+
{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG/C,OAAO,KAAK,EAAuC,cAAc,EAAE,MAAM,mBAAmB,CAAC;AA4B7F,eAAO,MAAM,IAAI,0CAGhB,CAAC;AAEF,eAAO,MAAM,aAAa,SAAU,UAAU,cAAc,EAAE,cAAc,CAAC,4FAkQxE,CAAC;AAEN,eAAO,MAAM,eAAe;;;mBApQQ,UAAU,cAAc,EAAE,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CAgS5E,CAAC"}
|