React Patterns

const ResourceList = () => {
  return (
    <Root>
      <Sidecar />
      List Content
    </Root>
  );
};

// 封装所有业务逻辑，不渲染内容
const Sidecar = () => {
  const store = useRootStore();
  const { pageSize } = useStore(
    store,
    useShallow(({ pageSize }) => ({ pageSize })),
  );

  const { data, loading, error } = useQuery({
    variables: { pageSize },
  });
  useEffect(() => {
    store.setState({ data, loading, error });
  }, [data, loading, error]);
  return null;
};

// Raw State
type StoreState = {
  active: any;

  actions: {
    setActive: (active: any) => void;
  };
};

// State Wrapper
type ReactTable = {
  state: any;
  getOptions: () => any;
  setPageSize: (size: number) => void;
};

const MyList = ()=>{
  return (
    <List.Root>
      <List.Header>Header</List.Header>
      <List.Search></List.Search>
      <List.Item>1</List.Item>
      <List.Item>2</List.Item>
    </List>
  );
}

export const CurrentListTableQueryReactor = () => {
  let store = useReactTableStore();
  let { useListQuery } = useListQueryContext();
  const { data } = useListQuery();

  useEffect(() => {
    if (!data) return;
    store.getState().setOptions((prev) => ({
      ...prev,
      data: data.data,
      rowCount: data.total,
    }));
  }, [data]);

  return null;
};

import React, { ReactElement, ReactNode } from 'react';
import { mergeProps as defaultMergeProps } from '@wener/reaction';
import { isReactComponent } from '@wener/reaction';

/**
 * FlexRenderable maybe a component maybe an element
 *
 * The Component doesn't have to match the props type
 */
export type FlexRenderable<TProps> = React.ReactNode | React.ComponentType<Partial<TProps>>;

/**
 * flexRender will try to render a component or a React node
 *
 * When passing a {@link mergeProps}, will clone the element and merge the props.
 *
 * @param Comp component or react node
 * @param props props to pass to component
 * @param mergeProps merge props to pass to component
 * @see {@link https://github.com/TanStack/table/blob/af00c821b7943bc0f6d62a19b3ad514e3f315d75/packages/react-table/src/index.tsx TanStack/table}
 */
export function flexRender<TProps extends object>(
  Comp: FlexRenderable<TProps>,
  props: TProps,
  mergeProps?: ((a: TProps, b: TProps) => TProps) | true,
): ReactNode | ReactElement {
  if (!Comp) {
    return null;
  }
  if (isReactComponent<TProps>(Comp)) {
    return <Comp {...props} />;
  }
  // for mergeProps
  {
    if (mergeProps === true) {
      mergeProps = flexRender.mergeProps;
    }
    if (typeof mergeProps === 'function' && typeof Comp === 'object' && 'props' in Comp) {
      return React.cloneElement(Comp, (mergeProps as any)(Comp.props, props));
    }
  }
  // various ReactNode types
  return Comp as any;
}

flexRender.mergeProps = defaultMergeProps;

const CounterStore = createStore(0);

const Counter = () => {
  const count = useStore(CounterStore);
  return <div onClick={() => CounterStore.setState((s) => s + 1)}>{count}</div>;
};

const Button: React.FC<{ as?: any }> = ({ as: As = 'button', ...props }) => {
  return <As {...props} />;
};

const MyButton = withStyle(Button, { className: '' });

const Button = (props) => <button type='button' {...props} />;

const Node = (
  <Comp
    // render props
    render={({ isActive }) => (isActive ? 'Active' : '')}
    // props based on state
    className={{ isActive } ? 'active' : ''}
  >
    {/* render props as children */}
    {/* 函数做为子元素 - function as children */}
    {({ isActive }) => (isActive ? 'Active' : 'Inactive')}
  </Comp>
);

const Layout = ({ children }) => {
  return <div>{children}</div>;
};
Layout.Sidebar = ({ children }) => {
  return <aside>{children}</aside>;
};

const Layout = ({ sidebar, status, menu,children }) => (
  <div>
    <menu>{menu}</menu>
    <aside>{sidebar}</aside>
    <main>{children}</main>
    <footer>{status}</aside>
  </div>
);

// state = value
const MyComp = ({ state, onStateChange }) => {
  return <div></div>;
};

const MyComp: React.FC<{
  value: any;
  onChange?: (value: any) => void;
  defaultValue?: any;
}> = (props) => {
  const [value, setValue] = useControllable(props);
  return <div></div>;
};

const Comp = ({ condition }) => {
  return <>{condition ? <div>True</div> : <div>False</div>}</>;
};

interface TableHooks<T extends {id:string}>{
  // react-query
  useQuery: (opts) => UseQueryResult<T>;
  useSelected: () => T[];
}

const useTableHooks(){
  return useContext(TableHooksContext);
}

const SlotDemo = (
  <Layout>
    <Layout.Slot name='Sidebar' placement='top'>
      Menus
    </Layout.Slot>
    <Layout.Slot name='Footer' placement='right'>
      Copyright
    </Layout.Slot>
    <h3>Layout Title</h3>
    <section>Content</section>
  </Layout>
);