对话框网络组件

文档和演示

安装

yarn add @dlghq/dialog-components

或者说

npm install --save @dlghq/dialog-components

用法实例

import React from 'react';
import { render } from 'react-dom';
import { Avatar } from '@dlghq/dialog-components';

const container = document.getElementById('container');

render(
  <Avatar
    title="Hipster Partycat"
    image="https://octodex.github.com/images/hipster-partycat.jpg"
  />,
  container
);

更多组件.

网络包配置

我们出版前不汇编JS & CSS代码. 您必须在您的构建管道中更新或添加网络包配置 .

yarn add babel-loader postcss-loader css-loader style-loader svg-sprite-loader
yarn add @dlghq/babel-preset-dialog @dlghq/postcss-dialog

// webpack.config.js

const fs = require('fs');
const path = require('path');

function resolve(...paths) {
  return fs.realpathSync(path.join(__dirname, ...paths));
}

const whitelist = [
  resolve('src'), // your application code
  resolve('node_modules/@dlghq/dialog-components/src'),
  resolve('node_modules/@dlghq/markdown'),
  resolve('node_modules/@dlghq/react-l10n'),
  resolve('node_modules/@dlghq/dialog-types'),
  resolve('node_modules/@dlghq/dialog-utils'),
  resolve('node_modules/@dlghq/country-codes')
];

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: whitelist,
        loader: 'babel-loader',
        options: {
          babelrc: false,
          cacheDirectory: true,
          presets: [
            [
              '@dlghq/dialog',
              {
                modules: false,
                runtime: false
              }
            ]
          ]
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: false,
              importLoaders: 1
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins() {
                return require('@dlghq/postcss-dialog')();
              }
            }
          }
        ],
        include: [
          resolve('node_modules/@dlghq/dialog-components/src/styles/global.css')
        ]
      },
      {
        test: /\.css$/,
        include: whitelist,
        exclude: [
          resolve('node_modules/@dlghq/dialog-components/src/styles/global.css')
        ],
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 1,
              localIdentName: '[name]__[local]'
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins() {
                return require('@dlghq/postcss-dialog')();
              }
            }
          }
        ]
      },
      {
        test: /\.(jpg|png|svg|gif)$/,
        exclude: resolve('node_modules/@dlghq/dialog-components/src/components/Icon/svg'),
        loader: 'file-loader'
      },
      {
        test: /\.svg$/,
        include: resolve('node_modules/@dlghq/dialog-components/src/components/Icon/svg'),
        loader: 'svg-sprite-loader'
      }
    ]
  }
};

翻译

对于一些复杂的组件,比如 AuthForm 您应该将您的组件树包起来 以 @dlghq/react-l10n Provider 组件. 在出版之前,我们生成 messages.json 捆绑,你应该传递给 Provider。 。 。 .

import React from 'react';
import { render } from 'react-dom';
import { Provider } from '@dlghq/react-l10n';
import dialogMessages from '@dlghq/dialog-components/src/messages.json';
import appMessages from './messages';

const container = document.getElementById('container');

const messages = { ...dialogMessages, ...appMessages };

render(
  <Provider messages={messages} locale={navigator.language}>
    <App />
  </Provider>,
  container
);

发展

国家预防机制:

• npm start 启动 dev 服务器
• npm run create 创建新组件
• npm test 运行测试
• npm run lint 运行线条
• npm run format 运行格式化器
• npm run build 构建图书馆
• npm run docs 构建文件
• npm run release 建立并发布到 npm 并发布到 gh 页面

许可证

阿帕奇 - 2.0