tmb-common-components

Teach My Baby 通用组件库。

Usage

1. 安装

# install dependencies
$ npm i -S tmb-common-components

2. 使用

import {
  Layout,
  Logo,
  WebTitle,
  HeadMenu,
  Workspace,
  LeftMenu,
  UserProfile,
} from 'tmb-common-components';
import {
  AppstoreOutlined,
  MailOutlined,
  PieChartOutlined,
  ContainerOutlined,
  DesktopOutlined,
} from '@ant-design/icons';

const headMenuProps = {
  containerStyle: {
    flex: 1
  },
  menuList: [
    {
      label: 'Navigation One',
      key: 'mail',
      icon: <MailOutlined />,
    },
    {
      label: 'Navigation Two',
      key: 'app',
      icon: <AppstoreOutlined />,
      disabled: true,
    },
    {
      label: 'Navigation Three',
      key: 'test',
    },
  ],
};
const workspaceProps = {
  selectedKeys: [],
  dataList: [
    {
      label: '工作空间1',
      key: 'test1',
      icon: <MailOutlined />,
    },
    {
      label: '工作空间2',
      key: 'test2',
      icon: <AppstoreOutlined />,
    },
  ],
};

const leftMenuProps = {
  items: [
    {
      key: 'Option 1',
      icon: <PieChartOutlined />,
      label: 'Option 1',
    },
    {
      key: 'Option 2',
      icon: <ContainerOutlined />,
      label: 'Option 2',
    },
    {
      key: 'Option 3',
      icon: <DesktopOutlined />,
      label: 'Option 3',
    },
  ],
};

const userProfileProps = {
  //   containerClassName,
  //   avatarIcon,
  username: '张三',
  //   logoutTitle,
  //   logoutIcon,
  //   logoutUrl,
  //   onLogout,
  //   extend,
  //   render,
  containerStyle: {
    marginLeft: '20px'
  }
};

const headComponentStyle = {
  display: 'flex',
  flexDirection: 'row',
  alignItems: 'center',
  justifyContent: 'space-between',
  width: '100%',
  height: '100%',
  padding: '0 40px',
};
const headComponentLogoStyle = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  height: '100%',
  flex: 1,
};
const headComponentAvatarStyle = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'end',
  height: '100%',
  flex: 1,
};
const props = {
  HeadComponent: (
    <div style={headComponentStyle}>
      <HeadMenu {...headMenuProps} />
      <div style={headComponentLogoStyle}>
        <WebTitle title="Teach My Baby!" />
        <Logo logo="https://tse1-mm.cn.bing.net/th/id/OIP-C.UiKYzKeI_jW0UH-sHBCORwHaEK?rs=1&pid=ImgDetMain" containerStyle={{ marginLeft: '10px'}}/>
      </div>
      <div style={headComponentAvatarStyle}>
        <Workspace {...workspaceProps} />
        <UserProfile {...userProfileProps} />
      </div>
    </div>
  ),
  LeftComponent: <LeftMenu {...leftMenuProps} />,
  ContentComponent: 'ContentComponent',
  FootComponent: 'FootComponent',
};

export default () => <Layout {...props} />;

LICENSE

MIT