huangqiii / choerodon-frontend-specification Goto Github PK

// ./react/index.js

import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import { inject } from 'mobx-react';
import { asyncLocaleProvider, asyncRouter, nomatch } from '@choerodon/boot';
import { ModalContainer } from 'choerodon-ui/pro';

const Model = asyncRouter(() => import('./routes/model'));
const BaseTable = asyncRouter(() => import('./routes/base-table'));
const Database = asyncRouter(() => import('./routes/database'));
const Manager = asyncRouter(() => import('./routes/manager'));
const App = asyncRouter(() => import('./routes/app'));

function LowCodeIndex({ match, AppState: { currentLanguage: language } }) {
  const IntlProviderAsync = asyncLocaleProvider(language, () => import(`./locale/${language}`));
  return (
    <IntlProviderAsync>
      <div>
        <Switch>
          <Route path={`${match.url}/model`} component={Model} />
          <Route path={`${match.url}/base-table`} component={BaseTable} />
          <Route path={`${match.url}/database`} component={Database} />
          <Route path={`${match.url}/manager`} component={Manager} />
          <Route path={`${match.url}/org-model`} component={Model} />
          <Route path={`${match.url}/app`} component={App} />
          <Route path="*" component={nomatch} />
        </Switch>
        <ModalContainer />
      </div>
    </IntlProviderAsync>
  );
}

export default inject('AppState')(LowCodeIndex);

import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import { asyncRouter, nomatch } from '@choerodon/boot';

const List = asyncRouter(() => import('./list'));
const Design = asyncRouter(() => import('./design'));
const Preview = asyncRouter(() => import('./preview'));
const Publish = asyncRouter(() => import('./publish'));

export default function Index({ match }) {
  return (
    <Switch>
      <Route exact path={match.url} component={List} />
      <Route path={`${match.url}/design/:code`} component={Design} />
      <Route path={`${match.url}/preview/:code`} component={Preview} />
      <Route path={`${match.url}/publish/:code`} component={Publish} />
      <Route path="*" component={nomatch} />
    </Switch>
  );
}

import React, { createContext, useMemo, useContext, useEffect } from 'react';
import { DataSet } from 'choerodon-ui/pro';
import { inject } from 'mobx-react';
import { injectIntl } from 'react-intl';
import ModelListDataSet from './ModelListDataSet';
import XxxStore from './XxxStore';
import useXXXStore from './useXXXStore';

const Store = createContext();

export default Store;

// 也可以提供hook的方式
export function useStore() {
    return useContext(Store);
}

export const StoreProvider = injectIntl(inject('AppState')(
  (props) => {
    const { AppState: { currentMenuType: { type, id } }, intl, children } = props;
    // 使用缓存钩子，以便将来做路由缓存
    const xxxDataSet = useMemo(() => new DataSet(ModelListDataSet({ type, id, intl })), [type, id]);
    const xxxStore = useMemo(() => new XxxStore(), []);
    const xxxStore2 = useXXXStore();
    useEffect(() => {
        localStore.fetch()
    }, []);
    const value = {
      prefixCls: 'lc-model-list',
      intlPrefix: type === 'organization' ? 'organization.model.list' : 'global.model.list',
      permissions: [
        'low-code-service.model.pagedSearch',
        'low-code-service.model.createModel',
        'low-code-service.model.createBaseOnTable',
        'low-code-service.model.check',
        'low-code-service.model.update',
        'low-code-service.model.delete',
      ],
      xxxStore, //原先的store暂时可以先这样过渡，最后逐步过渡到DataSet或useLocalStore
      xxxStore2,
      xxxDataSet,
    };
    return (
      <Store.Provider value={value}>
        {props.children}
      </Store.Provider>
    );
  }
));

// low-code-service/react/routes/model/list/stores/useXXXStore.js

import { axios } from '@choerodon/boot';
import { useLocalStore } from 'mobx-react-lite';
export default function useXXXStore() {
    return useLocalStore(() =>({
        result: null,
        title: 'Click to toggle',
        done: false,
        toggle() {
          localStore.done = !localStore.done
        },
        get emoji() {
          return localStore.done ? '😜' : '🏃'
        },
        async fetch() {
           localStore.result = await axios.get('.....');
        }
    }));
}

import React from 'react';
import { StoreProvider } from './stores';
import ListView from './ListView';

export default function Index(props) {
  // 如StoreProvider需要使用路由属性，将props传递给StoreProvider, 如果为更深的组件需要使用路由属性，请使用withRouter
  return (
    <StoreProvider {...props}>
      <ListView />
    </StoreProvider>
  );
}

const intlPrefix = 'global.model.design';
const prefixCls = 'model-design';

<div className={`${prefixCls}-pull-right`}>
<FormattedMessage id={`${intlPrefix}.${designType}.header.title`} />

try {
  const res = await axios.get();
  // resolve
} catch (err) {
   // reject
}

import classNames from 'classnames';

// simple
<li className={active ? 'active' : null} />

// complex
const classString = classNames(`${prefixCls}-form-editor`, {
  dragging,
});
<li className={classString} />

export default () => {
    const style = useMemo(() => ({ color: 'red' }), []);
    // 或者  const [style] = useState(() => ({ color: 'red' }));
    const handleClick = useCallback(() => console.log('click'), []);
    return (
        <Button style={style} onClick={handleClick}>demo</Button>
    )
};

function List({ list }) {
    function handleItemClick(id) {
        // TODO
    }
    return list.map(({ id, text }) => <Card  key={id} onClick={() => handleItemClick(id) }>{text}</Card>);
    // return list.map(({ id, text }) => <Card  key={id} onClick={handleItemClick.bind(window, id)}>{text}</Card>);
}

// in Item.js

export default function Item({ text, id, onClick }) {
   const handleClick = useCallback(() => onClick(id), [id]);
   return <Card onClick={handleClick}>{text}</Card>
}

// in List.js

export default function List({ list }) {
    const handleItemClick = useCallback((id) => {
        // TODO
    },[])
    return list.map(({ id, text }) => <Item key={id} onClick={handleItemClick} id={id} text={text} />)
}

{
    dataKey: null,
    transport: {
      read: {
        url: `/lc/v1/organizations/${orgId}/view/${code}`,
        method: 'get',
      },
    },
}

import { Spin } from 'choerodon-ui/pro'

<Spin dataSet={dataSet}>
{...}
</Spin>