feat(plasma-b2c, plasma-web): autoResize for TextArea #614

kayman233 · 2023-07-10T14:10:00Z

Добавлена возможность автоматического регулирования высоты поля ввода по длине контента внутри (параметра value) с помощью свойства autoResize.
В этом режиме можно указать крайние значения высоты поля ввода, используя свойства minAuto, maxAuto,
указав их в rem.

const [value, setValue] = React.useState('Значение');

return (
    <TextArea
        placeholder="Введите значение"
        value={value}
        onChange={(e) => {
            setValue(e.target.value);
        }}
        autoResize
        minAuto={3}
        maxAuto={5}
    />
);

🐤 Download canary assets:

color

color_asdk_ios-swift--canary.614.5553174292.swift
color_asdk_kotlin--canary.614.5553174292.kt
color_asdk_react-native--canary.614.5553174292.ts
color_asdk_xml--canary.614.5553174292.xml
color_plasma_b2c_ios-swift--canary.614.5553174292.swift
color_plasma_b2c_kotlin--canary.614.5553174292.kt
color_plasma_b2c_react-native--canary.614.5553174292.ts
color_plasma_b2c_xml--canary.614.5553174292.xml
color_sberHealth_ios-swift--canary.614.5553174292.swift
color_sberHealth_kotlin--canary.614.5553174292.kt
color_sberHealth_react-native--canary.614.5553174292.ts
color_sberHealth_xml--canary.614.5553174292.xml
color_sbermarket_business_ios-swift--canary.614.5553174292.swift
color_sbermarket_business_kotlin--canary.614.5553174292.kt
color_sbermarket_business_react-native--canary.614.5553174292.ts
color_sbermarket_business_xml--canary.614.5553174292.xml
color_sbermarket_ios-swift--canary.614.5553174292.swift
color_sbermarket_kotlin--canary.614.5553174292.kt
color_sbermarket_metro_ios-swift--canary.614.5553174292.swift
color_sbermarket_metro_kotlin--canary.614.5553174292.kt
color_sbermarket_metro_react-native--canary.614.5553174292.ts
color_sbermarket_metro_xml--canary.614.5553174292.xml
color_sbermarket_react-native--canary.614.5553174292.ts
color_sbermarket_selgros_ios-swift--canary.614.5553174292.swift
color_sbermarket_selgros_kotlin--canary.614.5553174292.kt
color_sbermarket_selgros_react-native--canary.614.5553174292.ts
color_sbermarket_selgros_xml--canary.614.5553174292.xml
color_sbermarket_wlbusiness_ios-swift--canary.614.5553174292.swift
color_sbermarket_wlbusiness_kotlin--canary.614.5553174292.kt
color_sbermarket_wlbusiness_react-native--canary.614.5553174292.ts
color_sbermarket_wlbusiness_xml--canary.614.5553174292.xml
color_sbermarket_xml--canary.614.5553174292.xml
color_sberonline_ios-swift--canary.614.5553174292.swift
color_sberonline_kotlin--canary.614.5553174292.kt
color_sberonline_react-native--canary.614.5553174292.ts
color_sberonline_xml--canary.614.5553174292.xml
color_sberprime_ios-swift--canary.614.5553174292.swift
color_sberprime_kotlin--canary.614.5553174292.kt
color_sberprime_react-native--canary.614.5553174292.ts
color_sberprime_xml--canary.614.5553174292.xml

shadow

shadow_sbermarket_react-native--canary.614.5553174292.ts

typo

typo_mage_ios-swift--canary.614.5553174292.swift
typo_mage_kotlin--canary.614.5553174292.kt
typo_mage_react-native--canary.614.5553174292.ts
typo_plasma_ios-swift--canary.614.5553174292.swift
typo_plasma_kotlin--canary.614.5553174292.kt
typo_plasma_react-native--canary.614.5553174292.ts
typo_ruler_ios-swift--canary.614.5553174292.swift
typo_ruler_kotlin--canary.614.5553174292.kt
typo_ruler_react-native--canary.614.5553174292.ts
typo_sage_ios-swift--canary.614.5553174292.swift
typo_sage_kotlin--canary.614.5553174292.kt
typo_sage_react-native--canary.614.5553174292.ts
typo_sbermarket_ios-swift--canary.614.5553174292.swift
typo_sbermarket_kotlin--canary.614.5553174292.kt
typo_sbermarket_react-native--canary.614.5553174292.ts
typo_soulmate_ios-swift--canary.614.5553174292.swift
typo_soulmate_kotlin--canary.614.5553174292.kt
typo_soulmate_react-native--canary.614.5553174292.ts

📦 Published PR as canary version: Canary Versions

✨ Test out this PR locally via:

npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
# or 
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]

Salute-Eva · 2023-07-10T14:12:27Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-614/

Salute-Eva · 2023-07-10T14:23:13Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-614/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-614/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-614/web-storybook/

Salute-Eva · 2023-07-10T21:37:25Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-614/

Salute-Eva · 2023-07-10T21:46:34Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-614/

Salute-Eva · 2023-07-10T21:54:29Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-614/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-614/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-614/web-storybook/

Salute-Eva · 2023-07-10T22:05:50Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-614/

Salute-Eva · 2023-07-10T22:13:57Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-614/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-614/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-614/web-storybook/

Salute-Eva · 2023-07-11T07:30:27Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-614/

Salute-Eva · 2023-07-11T07:38:46Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-614/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-614/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-614/web-storybook/

Salute-Eva · 2023-07-11T07:44:36Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-614/

Salute-Eva · 2023-07-11T07:53:56Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-614/

Salute-Eva · 2023-07-11T08:01:08Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-614/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-614/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-614/web-storybook/

Yakutoc · 2023-07-11T09:59:27Z

@kayman233 Добавь пожалуйста короткое описание для PR?

Salute-Eva · 2023-07-13T07:42:03Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-614/

Salute-Eva · 2023-07-13T07:51:01Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-614/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-614/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-614/web-storybook/

neretin-trike · 2023-07-14T09:26:59Z

packages/plasma-hope/src/components/TextArea/useAutoResize.ts

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+
+const ROOT_FONT_SIZE = 16;


предлагаю экспортнуть эту переменную из TextArea.tsx, чтобы не следить за этими переменными в двух местах

Salute-Eva · 2023-07-14T09:43:29Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-614/

neretin-trike · 2023-07-14T09:48:50Z

packages/plasma-hope/src/components/TextArea/views/web/TextAreaWeb.tsx

+    const inputRef = useRef<HTMLTextAreaElement | null>(null);
+    const forkRef = useForkRef(inputRef, outerRef);
+
+    useAutoResize(autoResize, inputRef, value, minAuto, maxAuto);


а что думаешь на счёт выноса этого хука на уровень выше в TextArea.tsx с прокидыванием всех свойств сюда? Чтобы не дублировать эту логику в оба View, т.к. функционал по сути тот же самый

да, ты прав. Теперь в одном месте всё

Salute-Eva · 2023-07-14T09:53:15Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-614/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-614/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-614/web-storybook/

Salute-Eva · 2023-07-14T10:29:41Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-614/

Salute-Eva · 2023-07-14T10:36:07Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-614/

Salute-Eva · 2023-07-14T10:46:36Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-614/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-614/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-614/web-storybook/

Salute-Eva · 2023-08-03T13:49:50Z

kayman233 force-pushed the kayman233/text-area-autoresize.PLASMA-2032 branch from 6196c5b to 60dc603 Compare July 10, 2023 21:35

kayman233 force-pushed the kayman233/text-area-autoresize.PLASMA-2032 branch from 60dc603 to 5c69b3d Compare July 10, 2023 21:44

kayman233 force-pushed the kayman233/text-area-autoresize.PLASMA-2032 branch from 5c69b3d to eaef928 Compare July 10, 2023 22:03

kayman233 force-pushed the kayman233/text-area-autoresize.PLASMA-2032 branch from c88264d to 4e6a3be Compare July 11, 2023 07:42

kayman233 force-pushed the kayman233/text-area-autoresize.PLASMA-2032 branch from 4e6a3be to eaef928 Compare July 11, 2023 07:52

kayman233 marked this pull request as ready for review July 11, 2023 08:37

kayman233 requested review from Yeti-or, neretin-trike and Yakutoc as code owners July 11, 2023 08:37

kayman233 force-pushed the kayman233/text-area-autoresize.PLASMA-2032 branch from eaef928 to 4886021 Compare July 13, 2023 07:40

Yeti-or force-pushed the dev branch from 9e34f43 to db86601 Compare July 14, 2023 07:36

Yeti-or requested a review from LamaEats as a code owner July 14, 2023 07:36

neretin-trike reviewed Jul 14, 2023

View reviewed changes

kayman233 force-pushed the kayman233/text-area-autoresize.PLASMA-2032 branch from 4886021 to c3c455d Compare July 14, 2023 09:40

neretin-trike reviewed Jul 14, 2023

View reviewed changes

kayman233 force-pushed the kayman233/text-area-autoresize.PLASMA-2032 branch from c3c455d to 39f3528 Compare July 14, 2023 10:27

neretin-trike approved these changes Jul 14, 2023

View reviewed changes

feat(plasma-b2c, plasma-web): autoResize for TextArea

f4a1134

kayman233 force-pushed the kayman233/text-area-autoresize.PLASMA-2032 branch from 39f3528 to f4a1134 Compare July 14, 2023 10:34

Yeti-or approved these changes Jul 26, 2023

View reviewed changes

Yeti-or added this pull request to the merge queue Jul 26, 2023

Merged via the queue into dev with commit b292706 Jul 26, 2023

Yeti-or deleted the kayman233/text-area-autoresize.PLASMA-2032 branch July 26, 2023 07:58

Salute-Eva added the released label Aug 3, 2023

Salute-Eva mentioned this pull request Jan 18, 2024

Release by 18.01.2024 #972

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(plasma-b2c, plasma-web): autoResize for TextArea #614

feat(plasma-b2c, plasma-web): autoResize for TextArea #614

kayman233 commented Jul 10, 2023 •

edited by Yeti-or

Loading

Salute-Eva commented Jul 10, 2023

Salute-Eva commented Jul 10, 2023

Salute-Eva commented Jul 10, 2023

Salute-Eva commented Jul 10, 2023

Salute-Eva commented Jul 10, 2023

Salute-Eva commented Jul 10, 2023

Salute-Eva commented Jul 10, 2023

Salute-Eva commented Jul 11, 2023

Salute-Eva commented Jul 11, 2023

Salute-Eva commented Jul 11, 2023

Salute-Eva commented Jul 11, 2023

Salute-Eva commented Jul 11, 2023

Yakutoc commented Jul 11, 2023

Salute-Eva commented Jul 13, 2023

Salute-Eva commented Jul 13, 2023

neretin-trike Jul 14, 2023

Salute-Eva commented Jul 14, 2023

neretin-trike Jul 14, 2023 •

edited

Loading

kayman233 Jul 14, 2023

Salute-Eva commented Jul 14, 2023

Salute-Eva commented Jul 14, 2023

Salute-Eva commented Jul 14, 2023

Salute-Eva commented Jul 14, 2023

Salute-Eva commented Aug 3, 2023

		@@ -0,0 +1,31 @@
		import { useEffect, useRef } from 'react';

		const ROOT_FONT_SIZE = 16;

feat(plasma-b2c, plasma-web): autoResize for TextArea #614

feat(plasma-b2c, plasma-web): autoResize for TextArea #614

Conversation

kayman233 commented Jul 10, 2023 • edited by Yeti-or Loading

Salute-Eva commented Jul 10, 2023

Salute-Eva commented Jul 10, 2023

Salute-Eva commented Jul 10, 2023

Salute-Eva commented Jul 10, 2023

Salute-Eva commented Jul 10, 2023

Salute-Eva commented Jul 10, 2023

Salute-Eva commented Jul 10, 2023

Salute-Eva commented Jul 11, 2023

Salute-Eva commented Jul 11, 2023

Salute-Eva commented Jul 11, 2023

Salute-Eva commented Jul 11, 2023

Salute-Eva commented Jul 11, 2023

Yakutoc commented Jul 11, 2023

Salute-Eva commented Jul 13, 2023

Salute-Eva commented Jul 13, 2023

neretin-trike Jul 14, 2023

Choose a reason for hiding this comment

Salute-Eva commented Jul 14, 2023

neretin-trike Jul 14, 2023 • edited Loading

Choose a reason for hiding this comment

kayman233 Jul 14, 2023

Choose a reason for hiding this comment

Salute-Eva commented Jul 14, 2023

Salute-Eva commented Jul 14, 2023

Salute-Eva commented Jul 14, 2023

Salute-Eva commented Jul 14, 2023

Salute-Eva commented Aug 3, 2023

kayman233 commented Jul 10, 2023 •

edited by Yeti-or

Loading

neretin-trike Jul 14, 2023 •

edited

Loading