artalar

// @flow

import * as React from 'react';
import styled from 'styled-components';


type Props = {
  className: string,
};

artalar

Реализуйте ф-ю shallowCopy, которая будет осуществлять [не глубокое] копирование объекта сохраняя его hidden class \ structure \ shape.

Если последние определения вам не ясны, вот статья для введения https://medium.com/@bmeurer/surprising-polymorphism-in-react-applications-63015b50abc

Или видео https://youtu.be/5nmpokoRaZI

// shallowCopyWithSaveMap.js
const a = {x:1, y:2, z:3};

artalar

/* eslint-disable */

/******************************************
  ~/form/address.jsx
*/
import { service } from '~/service.js';
import { workflow } from './workflow.js';

export const Autocomplete = service.connect([workflow, 'address'])(
  ({ value, suggestions, onChange }) => (

artalar

const initCounterStore = {
  scope: {
    counter: 0,
  },
};
const initNormalizedState = {
  news: { '-1': { id: '-1', text: 'some news text' + '-1' } },
  show: ['-1'],
};
const deepState = {

artalar

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

Обычно выбирается набор "сочитающихся" цветов и ими закрашиваются разные компоненты. При этом в наборе два десятка цветов (классический вариант: primary и accent) + разнообразные тени и фоны (например). И какой и куда цвет применить - совершенно не ясно. Вдобавок всего два тона не всегда хватает и возникают новые проблемы с поиском нужной гаммы.

Но можно использовать следующий подход:

1. Не цвета пытаться впихнуть в компоненты, а к компонентам искать подходящие цвета. Т.е. для каждого компонента должна отдельно определяться цветовая гамма: полностью индивидуальная, или отнаследованная от родителя. Важно понять цель дизайна не раскидать цвета по интерфейсу, а выделить интерфейс, используя цвета.
2. Брать за основу 3 цвета: background (фон), basic (основной цвет выделения частей интерфейса), **ac

artalar

/* Example #1 */

// Store.js

// `Atom()` - create new stream
const a = Atom(0);
const b = Atom(0);

export const store = createStore({ a, b })

artalar

const getAsyncType = (type, status) => `${type}_${status}`;

export const getMasterActionCreator = type => {
  const reqType = getAsyncType(type, 'REQUEST');
  const respType = getAsyncType(type, 'SUCCESS');
  const errType = getAsyncType(type, 'ERROR');

  const masterActionCreator = params => ({ params, type });
  masterActionCreator.type = type;

artalar

import * as t from "jsdoc-runtime";

const tSqrt = t.declare.number
  // if input will not valid
  // return to last (this) workflow node
  .default(t.context.fallback(() => 0))
  // used in autotests
  .from(0)
  .to(t.int)

artalar

export const connect = selector => target => ({ children, ...props }) => {
  let updateFromParent = true;
  let cachedState = null;
  let cachedComponent = null;
  return (
    <Consumer>
      {context => {
        const state = selector(context, props);
        if (!updateFromParent && (state === cachedState || shallowCompare(state, cachedState))) {
          updateFromParent = false;

artalar

const store = {
  observedBits: {
    foo: 0b01,
    bar: 0b10
  },
  state: {
    foo: 1,
    bar: 1,
  },
  update(cb) {