Подобрать виджеты React для стандартных элементов управления

[sadr0b0t]

Базовые виджеты для подключения к роботу уже сделаны на material-ui https://github.com/1i7/babbler-js-material-ui http://www.material-ui.com/#/

Но их не всегда достаточно. Например, их кнопки визуально не умеют находиться в нажатом состоянии (это так по плану гайдлайнов) http://www.material-ui.com/#/components/raised-button

Всё бы хорошо, но для некоторых ситуаций (например, вращать мотор, пока нажата кнопка) эффект нажатой кнопки при нажатой кнопке мышки и отжатии кнопки при отпускакии мышки остаётся очень кстати. Для таких случаев, похоже, придется добавить виджеты из других библиотек. К счастью, судя по всему, с реактом это проблемы вызвать не должно.

Хорошая подборка виджетов отсюда (ссылка умерла) http://stackoverflow.com/questions/23380903/existing-ui-libraries-to-use-with-react-js

без табов (компонент мало, на вид неплохо, аккуратно, анимации) http://jquense.github.io/react-widgets/docs/#/dropdownlist?_k=0jioca (компонент мало, на вид немного небрежно) http://nikgraf.github.io/belle/#/component/button?_k=93uo1k (компонент мало, на вид - аккуратно) http://elemental-ui.com/buttons (странные компоненты типа TeX) http://khan.github.io/react-components/ (компонент вроде не мало, но табов нет) http://jxnblk.com/rebass/ (Стиль Яндекса: компонент мало, но красиво) https://github.com/narqo/react-islands

с табами (много компонент, вид - средненький) http://grommet.github.io/docs/tabs (компонент нормально, вид - стильненько) http://www.material-ui.com/#/components/tabs (дофига компонент, есть вертикальные табы, вид - нормально, но без искры) http://react-bootstrap.github.io/components.html#navigation (еще коллекция - куча компонент, в том числе табы, типа react-bootstrap, только симпатичнее) https://reactstrap.github.io/components/tabs/ (компонент не очень много, вид - средненький, скорее спартанский) http://webrafter.com/opensource/react-foundation-apps/tabs (компонент много, вид - типа стильно, всякие анимашки) http://react-toolbox.com/#/components/tabs (компонент мало, свой стиль, не слишком симпатичный, громоздкий) http://kjda.github.io/react-topui/ (компонент довольно много, есть вертикальные табы, стиль нормальный, аккуратно-стандартно, мелкие анимашки) http://styleguide.cfapps.io/react_components_tabs.html#01_tabs_react (компонент довольно много, есть вертикальные табы, почему-то в разделе меню, стильно - плоский минимализм, неплохой) https://technologyadvice.github.io/stardust/collections/menu

еще больше вариантов UI Components https://github.com/facebook/react/wiki/Complementary-Tools#ui-components

[sadr0b0t]

интересные виджеты из 2го списка https://github.com/facebook/react/wiki/Complementary-Tools#ui-components

очень крутые индикаторы загрузки (спиннеры) http://madscript.com/halogen/ https://github.com/yuanyan/halogen

больше не поддерживается, на react-16.0 не работает https://github.com/yuanyan/halogen/issues/32 https://github.com/yuanyan/halogen/issues/36

исправленный форк https://github.com/kirillDanshin/halogenium https://kirilldanshin.github.io/halogenium/

дерево https://cdn.rawgit.com/chenglou/react-treeview/aa72ed8b9e0b31fabc09e2f8bd4084947d48bb09/demos/index.html https://github.com/chenglou/react-treeview

виджет "карусель" (переключалка карточек с точками внизу) http://neostack.com/opensource/react-slick https://github.com/akiran/react-slick

редактируемая электронная таблица, блин http://felixrieseberg.github.io/React-Spreadsheet-Component/ https://github.com/felixrieseberg/React-Spreadsheet-Component

видео-плеер для HTML5 https://video-react.github.io/ https://github.com/video-react/video-react

еще коллекция - куча компонент (в том числе, табы) типа react-bootstrap, только симпатичнее https://reactstrap.github.io/components/tabs/ https://github.com/reactstrap/reactstrap

[sadr0b0t]

По кнопкам с эффектом нажатия, похоже, что самые симпатичные вот эти http://elemental-ui.com/buttons

плюс там симпатичные иконки с полезными действиями http://elemental-ui.com/glyphs

в material-ui их тоже много http://www.material-ui.com/#/components/font-icon https://material.io/icons/

[sadr0b0t]

еще

прикольные живые графики X-Y http://borisyankov.github.io/react-sparklines/ https://github.com/borisyankov/react-sparklines

сводная таблица http://orbjs.net/ https://github.com/nnajm/orb

[sadr0b0t]

Для elemental-ui http://elemental-ui.com/home

зависимости (react, react-dom и react-addons-css-transition-group нужно указывать явно)

  "dependencies": {
    "elemental": "^0.6.1",
    "react": "^15.4.0",
    "react-addons-css-transition-group": "^15.4.2",
    "react-dom": "^15.4.0"
  }

сгенерировать вручную styles.min.css (делается один раз, в проект зависимость от less можно не прописывать, если только в какие-нибудь dev-deps)

npm install less less-plugin-clean-css
./node_modules/less/bin/lessc --clean-css ./node_modules/elemental/less/elemental.less styles.min.css

прописать css в index.html прописать

    <link href="style/styles.min.css" rel="stylesheet">

после этого можно добавлять кнопки

import {Button} from 'elemental';
...
<Button size="lg" type="primary">back</Button>

и, блин, у них нет состояния disabled http://elemental-ui.com/buttons

[sadr0b0t]

еще

интересная кнопка со встроенным индикатором загрузки, может пригодиться для долгих операций https://github.com/jsdir/react-ladda https://github.com/hakimel/Ladda http://lab.hakim.se/ladda/

еще диаграммы http://demos.wijmo.com/5/React/FlexChartIntro/FlexChartIntro/

типа IDE для разработки компонентов React https://github.com/storybooks/react-storybook с плагином для компонентов material-ui https://github.com/sm-react/storybook-addon-material-ui

еще IDE/среда для тестирования или типа того https://github.com/carteb/carte-blanche

и вообще не в тему, а может пригодится Толи фреймворк, толи какие-то спец-инструменты для мобильных и веб-приложений https://onsen.io/samples/#

[sadr0b0t]

и, блин, у них нет состояния disabled http://elemental-ui.com/buttons

Все есть, они, судя по всему, используют обычную кнопку, а в документации указали только новые добавленные ими свойства.

Стили тоже можно применять

import {Button} from 'elemental';
const btnStyle = {
  margin: 12
};
...
<Button size="lg" type="primary"
                        onMouseDown={this.cmd_rr_go_x_backward}
                        onMouseUp={this.cmd_stop}
                        disabled={!connected}
                        style={btnStyle} >back</Button>

[sadr0b0t]

RaphaelJS+React - шаблон проекта https://github.com/arnemahl/react-raphael-webpack-es6 https://github.com/arnemahl/react-raphael-webpack-es6/blob/master/src/frontend/scripts/raphael/RaphaelRootComponent.js

обертка получше: https://github.com/liuhong1happy/react-raphael

сам RaphaelJS http://dmitrybaranovskiy.github.io/raphael/

[sadr0b0t]

Пишут, что Рафаэль больше не развивается, вместо него теперь Snap.SVG от того же автора https://toster.ru/q/308783

Snap.SVG http://snapsvg.io/ https://github.com/adobe-webplatform/Snap.svg

Получится ли скрестить с Ректом пока не ясно http://stackoverflow.com/questions/34635421/reactjs-component-interacting-with-snap-svg-element

Быстрый старт на русском http://htmlbook.ru/blog/kak-manipulirovat-i-animirovat-svg-cherez-snapsvg

Обзор библиотек для работы с SVG в JavaScript http://noeticforce.com/Javascript-libraries-for-svg-animation

[sadr0b0t]

react-svgpathplayer - анимация путей SVG (использует Snap.svg) http://saschwarz.github.io/react-svgpathplayer/ https://github.com/saschwarz/react-svgpathplayer

Работа с SVG напрямую в React https://www.smashingmagazine.com/2015/12/generating-svg-with-react/ https://github.com/facebook/react/issues/1657#issuecomment-167236495

[sadr0b0t]

Эта заглушка React+Raphael работает https://github.com/liuhong1happy/react-raphael

npm install --save raphael react-raphael

и пример с гитхаба - ок - рисует SVG

[sadr0b0t]

Анимация с React+SVG. Требуется, например, анимировать перемещение точки - это изменение координат X и Y у кружочка.

чел задаётся аналогичным вопросом http://stackoverflow.com/questions/35647928/transition-animation-using-react-and-svg

и сам себе отвечает http://bl.ocks.org/herrstucki/9205257

еще какая-то анимация в react-native (похоже, прям покадрово рисуют) http://browniefed.com/blog/react-native-morphing-svg-paths-with-react-art/

[sadr0b0t]

еще неплохая статья

Паттерны React https://habrahabr.ru/post/309422/

интересный момент про Function as children+Render callback

Использование функций как потомков требует дополнительного внимания с вашей стороны, чтобы можно было извлечь из них пользу.

{() => { return "hello world!»}()}

Однако, они могут придать вашим компонентам супер силу, такая техника обычно называется рендер-коллбэк. Эта мощная техника используется в таких библиотеках как ReactMotion. Когда вы применяете ее, логика рендера может управляйся из родительского компонента, вместо того, чтобы полностью передать ее самому компоненту.

[sadr0b0t]

Animated SVG charts for React https://github.com/colinmeinke/react-svg-chart

[sadr0b0t]

A simple React resizable component that comes with features that you might need. https://github.com/wongherlung/react-resizable-component http://herlaang.com/resizable.html

[sadr0b0t]

Какие-то приятные на вид штуки, которые работают с изменением размеров элемента

An event-based CSS element dimension query library with valid CSS selector syntax to change styles and allow responsive images based on element's dimensions and not window's viewport. It's exactly what we need when it comes to responsive Web Components. https://github.com/marcj/css-element-queries http://marcj.github.io/css-element-queries/

еще какой-то Полимер - очередной движок для веб-компонент или типа того Polymer is a JavaScript library that helps you create custom reusable HTML elements, and use them to build performant, maintainable apps. https://www.polymer-project.org/

Polymer vs. React: Comparing Two Front-end JavaScript Libraries https://www.upwork.com/hiring/development/polymer-vs-react/

That said, given the inherent emphasis on encapsulation in both technologies, there is no reason you can’t use Polymer and React together. When implemented properly, Web Components should behave no differently than native DOM elements. This means it’s possible to use Polymer elements in React.js as if they were a native part of the DOM. See some functionality that you like in a custom Polymer element? Simply add it to your React application. You can even wrap a React component within a Polymer element, within a larger React component—and although it’s still too soon to say whether there’s any practical application for this functionality, it illustrates the power of the component-oriented design approach.

[sadr0b0t]

Про выбор локальных файлов в Electron. Форма и загрузка файла на сервер не нужны - всё должно читаться прямо внутри страницы.

Стандартный способ - использовать тег input

<input type='file'/>

Но выглядит по-уродски, стилизовать кнопку возможности нет.

Для реакта есть парочка оберток https://github.com/captivationsoftware/react-file-input https://devarchy.com/react/library/react-file-reader-input

Но с ними было как-то лень тянуть дополнительные зависимости, плюс по умолчанию они не выглядят, как конфетки (по крайней мере, первый, у второго вообще не вижу онлайн-демо).

В итоге взял решение отсюда (1й ответ, скрытый input + стилизованная кнопка с форвардом событий от одного к другому) https://stackoverflow.com/questions/39941583/electron-open-file-from-menu

[sadr0b0t]

ReactRouter https://github.com/ReactTraining/react-router https://reacttraining.com/react-router/web/guides/philosophy https://medium.com/@BrianGrober/how-to-link-routes-in-react-da9df1c44c0c

Работа с адресной строкой из приложения на React (на электроне может не потребуется, но пригодится в браузере).