Гайз есть вопрос. могули я и имеет ли смысл вытащить только компонент Tree с antDesign. На данный момент используется material ui дизайн, но из за ограничений в компоненте tree рассматриваю извлечение этого компонента отдельно с ANT DESIGn
там внутри используется либа rc-tree, может её заюзать напрямую
Vladimir
Vladimir
там есть хорошие компоненты, а есть и ужасные, но хуже, что интерфейсы не совпадают с функциональность + с докой расинхрон >.<
Но все равно юзабельно
так-то я сам для пет-прожекта ант использую. Но постоянно плююсь с него
Eugen
там внутри используется либа rc-tree, может её заюзать напрямую
да там используется rc-tree но она как то странно грузится без стилей и т.д.
Вот посмотри я здесь сделал напрямую через rc-tree и через ant ( если раскомментируешь )
https://codesandbox.io/s/fervent-pine-61i7h
Vladimir
да там используется rc-tree но она как то странно грузится без стилей и т.д.
Вот посмотри я здесь сделал напрямую через rc-tree и через ant ( если раскомментируешь )
https://codesandbox.io/s/fervent-pine-61i7h
стили анта вот https://github.com/ant-design/ant-design/tree/master/components/tree/style
копипасти
Eugen
Aleksandr
Привет, посоветуйте какую-нибудь хорошую библиотеку для создания графиков, кроме d3
🐝 dmitriy
Eugene
recharts
Dmitry
так-то я сам для пет-прожекта ант использую. Но постоянно плююсь с него
А из-за чего плюетесь-то?
Dmitry
https://t.me/react_js/735323
Сколько весят эти 400к иконок?
А Бадж-цвета нельзя классами переопеределить?
Vladimir
Сколько весят эти 400к иконок?
А Бадж-цвета нельзя классами переопеределить?
все svg-иконки автоматом добавляются в бандл, 400к в несжатом виде.
Есть ужасно кривой способ обойти через вебпак-алиасы. Обещают исправить в 4 версии.
https://github.com/ant-design/ant-design/issues/12011
Бадж всегда красный. Там хардкод. Переопределить только через !important
Dmitry
Поднимаем размер бандла до 1Гб
Danila
Вообще, есть определённая проблема, как по мне. Самый полный - материал, но он очень страшный и от него тошнит уже, мелкософту не хватает компонентов, ант тяжёлый и плохо написаный, атласин только ещё более-менее, но очень специфично заточен под их интерфейсы по набору компонентов
У IBM есть очень красивый какой-то, но там тоже три с половиной компонента
Иван
Добрый день
подскажите, пожст
есть состояние:
this.state={
clickedOperators:Array(0)
}и есть такой рендеринг:
(<h3>Clicked operators ({this.state.clickedOperators.length}):</h3>)Warning:
Each child in a list should have a unique "key" prop.
Вопрос:
чтоб избежать этот варнинг, нужно что-ли длину массива хранить в отдельном состоянии ?
Danila
Добрый день
подскажите, пожст
есть состояние:
this.state={
clickedOperators:Array(0)
}и есть такой рендеринг:
(<h3>Clicked operators ({this.state.clickedOperators.length}):</h3>)Warning:
Each child in a list should have a unique "key" prop.
Вопрос:
чтоб избежать этот варнинг, нужно что-ли длину массива хранить в отдельном состоянии ?
Это не об этом варнинг, ты где-то рендеришь из массива элементы, вот у каждого изх них нужен key
Valentin
Добрый день
подскажите, пожст
есть состояние:
this.state={
clickedOperators:Array(0)
}и есть такой рендеринг:
(<h3>Clicked operators ({this.state.clickedOperators.length}):</h3>)Warning:
Each child in a list should have a unique "key" prop.
Вопрос:
чтоб избежать этот варнинг, нужно что-ли длину массива хранить в отдельном состоянии ?
Шта? Для каждого элемента добавить уникальный props.key
Vladimir
Вообще, есть определённая проблема, как по мне. Самый полный - материал, но он очень страшный и от него тошнит уже, мелкософту не хватает компонентов, ант тяжёлый и плохо написаный, атласин только ещё более-менее, но очень специфично заточен под их интерфейсы по набору компонентов
У IBM есть очень красивый какой-то, но там тоже три с половиной компонента
мне нравится semantic-ui
https://react.semantic-ui.com/
Иван
Это не об этом варнинг, ты где-то рендеришь из массива элементы, вот у каждого изх них нужен key
указывает на этот код варнинг
let block = [(<h3>Clicked cars ({this.state.clickedOperators.length}):</h3>)];
Danila
указывает на этот код варнинг
let block = [(<h3>Clicked cars ({this.state.clickedOperators.length}):</h3>)];
<h3 key="0"></h3>
Иван
все, решили, спасибо =)
Ilya
длину пустого массива.
тогда ворринг скорее всего к этому куску кода не относится от слова «совсем»
Иван
@alpatovdanila
еще раз спасибо
Ilya
указывает на этот код варнинг
let block = [(<h3>Clicked cars ({this.state.clickedOperators.length}):</h3>)];
ой, стоп… если вы в итоге выводите переменную block - то вы ее взяли в квадратные скобки - т.е. сделали массивом последующий рендер любого массива подразуемает что у каждого его элеманта будет key
Ilya
Иван
Madiyar
есть чат по nextjs в телеге?
Madiyar
никто не сталкивался с тем что при кастомном .babelrc, у nextjs перестает работать tree-shaking?
Sergei
Может кто знает как правильно clearTimout делать с хуками
useEffect(() => () => {
clearTimeout(timeoutDelay);
isMount = false;
}, [repeat]);
вот так не очищает при переходе на другой роут, этой функцией запускаю таймер
const handleTimeout = () => {
clearTimeout(timeoutDelay);
const newTimeout = setTimeout(() => {
setAllScores(false);
}, 3000);
setTimeoutDelay(newTimeout);
};
Владимир
Ребят, день добрый
Если кто работал с fullCalendar пакетом на реакте, у вас работал метод scrollToTime?
Или какой workaround вы делали для подскролла к ивенту?
Eric
Daniil
проглядел 🙂
Ruslan
Может кто знает как правильно clearTimout делать с хуками
useEffect(() => () => {
clearTimeout(timeoutDelay);
isMount = false;
}, [repeat]);
вот так не очищает при переходе на другой роут, этой функцией запускаю таймер
const handleTimeout = () => {
clearTimeout(timeoutDelay);
const newTimeout = setTimeout(() => {
setAllScores(false);
}, 3000);
setTimeoutDelay(newTimeout);
};
может тут почитать https://overreacted.io/making-setinterval-declarative-with-react-hooks/
Sergei
может тут почитать https://overreacted.io/making-setinterval-declarative-with-react-hooks/
это вообще не то, там про интервал речь, с таймаутом не прокатывает у меня такое
Ilya
Может кто знает как правильно clearTimout делать с хуками
useEffect(() => () => {
clearTimeout(timeoutDelay);
isMount = false;
}, [repeat]);
вот так не очищает при переходе на другой роут, этой функцией запускаю таймер
const handleTimeout = () => {
clearTimeout(timeoutDelay);
const newTimeout = setTimeout(() => {
setAllScores(false);
}, 3000);
setTimeoutDelay(newTimeout);
};
хендлер - в useCallback - иначе теряешь контекст на каждом рендере а соответственно и указатель на свой таймер поднятый ранее в контексте одного из предыдущих рендеров
Sergei
хендлер - в useCallback - иначе теряешь контекст на каждом рендере а соответственно и указатель на свой таймер поднятый ранее в контексте одного из предыдущих рендеров
const handleTimeout = useCallback(() => {
clearTimeout(timeoutDelay);
const newTimeout = setTimeout(() => {
setAllScores(false);
}, 3000);
setTimeoutDelay(newTimeout);
}, [timeoutDelay])
я как то не так написал? не сработало
Иван
Какая инструкция к transition в react позволит мне сделать плавное изменение размера блока при изменении контента внутри?
Иван
Просто смотрю там несколько способов - Transition, CSSTransition, SwitchTransition, TransitionGroup
Ilya
Какая инструкция к transition в react позволит мне сделать плавное изменение размера блока при изменении контента внутри?
если размеры блока расчитываются автоматически - т.е. нет абсолютно установленных и меняющихся (от и до) размеров по вектору значения которое ты меняешь - никак, никакие анимации или transition не работают на auto или content-fill
Иван
о как, печаль.
Владимир
А если получать каждый раз через ref height, width через getclientboundingrect и транзишн на maxHeight?
Владимир
От prevState.width / height до this.state.width / height
Иван
Смотрю, если не задавать значение height то свойство transition действительно никак не влияет на блок, даже если вручную менять контент внутри через браузер, жалко конечно.
Ilya
А если получать каждый раз через ref height, width через getclientboundingrect и транзишн на maxHeight?
на всякие пределеьные свойства (max|min что-то) тоже анимации и переходы делать не стоит - получите кучу артефактов в разных не особо стандартных условиях и возможно от браузера к браузеру в определенные периоды времени.
анимировать стоит только вещественные свойства - т.е. не maxHeight - а сам height
так будет правильнее и надежнее.
Владимир
Хм, всегда юзал анимацию раскрытия скрытия на maxheight(
Mikhail
на всякие пределеьные свойства (max|min что-то) тоже анимации и переходы делать не стоит - получите кучу артефактов в разных не особо стандартных условиях и возможно от браузера к браузеру в определенные периоды времени.
анимировать стоит только вещественные свойства - т.е. не maxHeight - а сам height
так будет правильнее и надежнее.
анимировать нужно только transform и opacity, в случае выше - scale3d()
Ilya
можете использовать подход, который я называю «превентивный рендер» делаете cloneElement в блоке с overflow: hidden (удобно делать в портале) и постфактум первого рендера снимаете с него размеры - свитчите на рендер уже своего искомого комопнента, таким образом, уже со второго прохода, а снятие и сохранение соотв.размеров - в любом случае инициируют перерисовку - уже выводите ваш комопнент с вещественными размерами и уже далее ими манипулируете, как душе угодно.
(стоимость - 1 рендер)
дубль компонента можно так и держать в портале (который не видно - и при изменении контента снимать с него размеры) этакая магия - на самом деле по перфомансу как правило это не накладно - ну если вы тольок не делаете Excel в браузере и эту свистопляску проварачиваете для каждой ячейки из 100500 штук.
Ilya
анимировать нужно только transform и opacity, в случае выше - scale3d()
scale - не меняет никак расчитанные движком размеры блока при монтировании и не инициирует их пересчет
Ilya
scale - не меняет никак расчитанные движком размеры блока при монтировании и не инициирует их пересчет
возмите сделайте три блока - пусть они смаунтятся - потом сделайте скейл какой ни будь (сплющите) - блока что посередине - блоки по соседству на это ни коим образом не отреагируют, для них «холст» останется прежним.
Ilya
И уже в 100й раз советую - не парить себе голову а если нужны анимации в React - берите и используйте react-spring
Ilya
https://www.react-spring.io/
Ilya
там за вас уже все порешали - и в имеративном стиле и в декларативном, и хук-АПИ уже есть, со всеми тонкостями и особенностями fibers и асинхронного рендеринга разобрались - requestAnimationFrame активно используется и т.д. и т.п.
Max
Ну всё, продал.
Nikita
Ребята, как вы оптимизируете изображения для прода? Раньше юзал галп для этого, теперь приложение делаю используя cra и вот интересно какой самый правильный способ для их оптимизации?
Ilya
Ilya
на ФФ не работает ващщще
как это не работает 🙂 сдается мне вы его не правильно готовите или у Вас FF из Windows XP 🙂
倫太郎
ну если сравнивать с ФФ из Windows XP, то да
причем тут фф для xp вообще?
или тебе лишбы накинуть?
Aleksei
причем тут фф для xp вообще?
или тебе лишбы накинуть?
мне правда ФФные девтулзы удобнее хромовских, да и накидывать ты начал первый)
к тому же, если оно криво работает в одном из мажорных браузеров, зачем его юзать?
倫太郎
мне правда ФФные девтулзы удобнее хромовских, да и накидывать ты начал первый)
к тому же, если оно криво работает в одном из мажорных браузеров, зачем его юзать?
так мажорный браузер только один, а не работает только у тебя как мы выяснили
Aleksei
так мажорный браузер только один, а не работает только у тебя как мы выяснили
ну да, а накидываю тут я