@fle-ui/next 1.0.0-alpha.2 → 1.0.0-alpha.4

package/.antd-tools.config.js

@@ -0,0 +1,195 @@
+const fs = require('fs');
+const path = require('path');
+const defaultVars = require('./scripts/default-vars');
+const darkVars = require('./scripts/dark-vars');
+const compactVars = require('./scripts/compact-vars');
+
+function generateThemeFileContent(theme) {
+  return `const { ${theme}ThemeSingle } = require('./theme');\nconst defaultTheme = require('./default-theme');\n
+module.exports = {
+  ...defaultTheme,
+  ...${theme}ThemeSingle
+}`;
+}
+
+// We need compile additional content for antd user
+function finalizeCompile() {
+  if (fs.existsSync(path.join(__dirname, './lib'))) {
+    // Build a entry less file to dist/antd.less
+    const componentsPath = path.join(process.cwd(), 'components');
+    let componentsLessContent = '';
+    // Build components in one file: lib/style/components.less
+    fs.readdir(componentsPath, (err, files) => {
+      files.forEach(file => {
+        if (fs.existsSync(path.join(componentsPath, file, 'style', 'index.less'))) {
+          componentsLessContent += `@import "../${path.posix.join(
+            file,
+            'style',
+            'index-pure.less',
+          )}";\n`;
+        }
+      });
+      fs.writeFileSync(
+        path.join(process.cwd(), 'lib', 'style', 'components.less'),
+        componentsLessContent,
+      );
+    });
+  }
+}
+
+function buildThemeFile(theme, vars) {
+  // Build less entry file: dist/antd.${theme}.less
+  if (theme !== 'default') {
+    fs.writeFileSync(
+      path.join(process.cwd(), 'dist', `fle-ui.${theme}.less`),
+      `@import "../lib/style/${theme}.less";\n@import "../lib/style/components.less";`,
+    );
+    // eslint-disable-next-line no-console
+    console.log(`Built a entry less file to dist/fle-ui.${theme}.less`);
+  } else {
+    fs.writeFileSync(
+      path.join(process.cwd(), 'dist', `default-theme.js`),
+      `module.exports = ${JSON.stringify(vars, null, 2)};\n`,
+    );
+    return;
+  }
+
+  // Build ${theme}.js: dist/${theme}-theme.js, for less-loader
+
+  fs.writeFileSync(
+    path.join(process.cwd(), 'dist', `theme.js`),
+    `const ${theme}ThemeSingle = ${JSON.stringify(vars, null, 2)};\n`,
+    {
+      flag: 'a',
+    },
+  );
+
+  fs.writeFileSync(
+    path.join(process.cwd(), 'dist', `${theme}-theme.js`),
+    generateThemeFileContent(theme),
+  );
+
+  // eslint-disable-next-line no-console
+  console.log(`Built a ${theme} theme js file to dist/${theme}-theme.js`);
+}
+
+function finalizeDist() {
+  if (fs.existsSync(path.join(__dirname, './dist'))) {
+    // Build less entry file: dist/antd.less
+    fs.writeFileSync(
+      path.join(process.cwd(), 'dist', 'fle-ui.less'),
+      '@import "../lib/style/default.less";\n@import "../lib/style/components.less";',
+    );
+    // eslint-disable-next-line no-console
+    fs.writeFileSync(
+      path.join(process.cwd(), 'dist', 'theme.js'),
+      `const defaultTheme = require('./default-theme.js');\n`,
+    );
+    // eslint-disable-next-line no-console
+    console.log('Built a entry less file to dist/fle-ui.less');
+    buildThemeFile('default', defaultVars);
+    buildThemeFile('dark', darkVars);
+    buildThemeFile('compact', compactVars);
+    buildThemeFile('variable', {});
+    fs.writeFileSync(
+      path.join(process.cwd(), 'dist', `theme.js`),
+      `
+function getThemeVariables(options = {}) {
+  let themeVar = {
+    'hack': \`true;@import "\${require.resolve('fle-ui/lib/style/color/colorPalette.less')}";\`,
+    ...defaultTheme
+  };
+  if(options.dark) {
+    themeVar = {
+      ...themeVar,
+      ...darkThemeSingle
+    }
+  }
+  if(options.compact){
+    themeVar = {
+      ...themeVar,
+      ...compactThemeSingle
+    }
+  }
+  return themeVar;
+}
+
+module.exports = {
+  darkThemeSingle,
+  compactThemeSingle,
+  getThemeVariables
+}`,
+      {
+        flag: 'a',
+      },
+    );
+  }
+}
+
+function isComponentStyleEntry(file) {
+  return file.path.match(/style(\/|\\)index\.tsx/);
+}
+
+function needTransformStyle(content) {
+  return content.includes('../../style/index.less') || content.includes('./index.less');
+}
+
+module.exports = {
+  compile: {
+    includeLessFile: [/(\/|\\)components(\/|\\)style(\/|\\)default.less$/],
+    transformTSFile(file) {
+      if (isComponentStyleEntry(file)) {
+        let content = file.contents.toString();
+
+        if (needTransformStyle(content)) {
+          const cloneFile = file.clone();
+
+          // Origin
+          content = content.replace('../../style/index.less', '../../style/default.less');
+          cloneFile.contents = Buffer.from(content);
+
+          return cloneFile;
+        }
+      }
+    },
+    transformFile(file) {
+      if (isComponentStyleEntry(file)) {
+        const indexLessFilePath = file.path.replace('index.tsx', 'index.less');
+
+        if (fs.existsSync(indexLessFilePath)) {
+          // We put origin `index.less` file to `index-pure.less`
+          const pureFile = file.clone();
+          pureFile.contents = Buffer.from(fs.readFileSync(indexLessFilePath, 'utf8'));
+          pureFile.path = pureFile.path.replace('index.tsx', 'index-pure.less');
+
+          // Rewrite `index.less` file with `root-entry-name`
+          const indexLessFile = file.clone();
+          indexLessFile.contents = Buffer.from(
+            [
+              // Inject variable
+              '@root-entry-name: default;',
+              // Point to origin file
+              "@import './index-pure.less';",
+            ].join('\n\n'),
+          );
+          indexLessFile.path = indexLessFile.path.replace('index.tsx', 'index.less');
+
+          return [indexLessFile, pureFile];
+        }
+      }
+
+      return [];
+    },
+    lessConfig: {
+      modifyVars: {
+        'root-entry-name': 'default',
+      },
+    },
+    finalize: finalizeCompile,
+  },
+  dist: {
+    finalize: finalizeDist,
+  },
+  generateThemeFileContent,
+  bail: true,
+};

package/.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

package/.eslintignore

@@ -0,0 +1,31 @@
+components/**/*.js
+components/**/*.jsx
+!components/*/__tests__/**/*.js
+!components/*/demo/*
+!.*.js
+~*
+# Docs templates
+site/theme/template/Color/ColorPicker.jsx
+site/theme/template/IconDisplay/*.js
+site/theme/template/IconDisplay/*.jsx
+site/theme/template/IconDisplay/fields.js
+site/theme/template/Home/**/*.jsx
+site/theme/template/utils.jsx
+site/theme/template/Layout/**/*.jsx
+site/theme/template/Layout/Footer.jsx
+site/theme/template/Content/Article.jsx
+site/theme/template/Content/EditButton.jsx
+site/theme/template/Resources/*.jsx
+site/theme/template/Resources/**/*.jsx
+site/theme/template/NotFound.jsx
+typings
+es/**/*
+lib/**/*
+node_modules
+_site
+dist
+coverage
+**/*.d.ts
+# Scripts
+scripts/previewEditor/**/*
+jest-stare

package/.fatherrc.ts

@@ -0,0 +1,4 @@
+export default {
+  esm: 'rollup',
+  cjs: 'rollup',
+};

package/.prettierignore

@@ -4,3 +4,4 @@
 package.json
 .umi
 .umi-production
+.umi-test

package/.umirc.ts

@@ -1,9 +1,6 @@
 import { defineConfig } from 'dumi';
 import { readdirSync } from 'fs';
 import { join } from 'path';
-// import componentsMenu from './componentsMenu';
-
-// console.log(componentsMenu);
 
 const headPkgList: any = [];
 // utils must build before core
@@ -26,59 +23,9 @@ export default defineConfig({
     includes: [...tailPkgList, 'docs'],
   },
   outputPath: 'docs-dist',
-  extraBabelPlugins: [
-    [
-      'import',
-      {
-        libraryName: 'antd',
-        libraryDirectory: 'es',
-        style: true,
-      },
-    ],
-  ],
-  // @ts-ignore
   alias: {
     '@fle-ui/next': join(__dirname, 'components'),
   },
-  hash: true,
-  exportStatic: {},
-  targets: {
-    chrome: 80,
-    firefox: false,
-    safari: false,
-    edge: false,
-    ios: false,
-  },
-  webpack5: {},
-  dynamicImport: {},
-  theme: {
-    '@primary-color': '#2C68FF',
-    '@info-color': '@primary-color',
-    '@success-color': '#36C626',
-    '@warning-color': '#FFAB00',
-    '@error-color': '#F42D2D',
-    '@heading-color': '#262626',
-    '@text-color': '#4C4C4C',
-    '@text-color-secondary': '#A9A9A9',
-    '@border-color-split': '#EEEEEE',
-    '@border-radius-base': '4px',
-    '@border-color-base': '#d2d2d2',
-    '@disabled-color': '#A9A9A9',
-    '@disabled-bg': '#F1F1F1',
-    '@modal-header-bg': '#2C68FF',
-    '@modal-heading-color': '#FFFFFF',
-    '@modal-close-color': '#FFFFFF',
-    '@modal-close-color-hover': '#f2f2f2',
-    '@modal-header-padding': '13px 20px',
-    '@modal-body-padding': '20px',
-    '@modal-confirm-body-padding': '28px 28px 20px',
-    '@modal-header-close-size': '49px',
-    '@pagination-item-bg-active': '#2C68FF',
-    '@pagination-item-color-active': '#FFFFFF',
-    '@pagination-font-weight-active': '400',
-    '@table-header-cell-split-color': '#EEEEEE',
-    '@divider-color': '#EEEEEE',
-  },
   mfsu: {},
   menus: {
     '/components': [

package/README.md

@@ -1,4 +1,4 @@
-# dumi app
+# fle-ui-next
 
 ## Getting Started
 
@@ -14,7 +14,13 @@ Start the dev server,
 $ npm start
 ```
 
-Build site app,
+Build documentation,
+
+```bash
+$ npm run docs:build
+```
+
+Build library via `father-build`,
 
 ```bash
 $ npm run build

package/components/_util/ActionButton.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import Button from '../button';
+import { LegacyButtonType, ButtonProps, convertLegacyProps } from '../button/button';
+
+export interface ActionButtonProps {
+  type?: LegacyButtonType;
+  actionFn?: (...args: any[]) => any | PromiseLike<any>;
+  close: Function;
+  autoFocus?: boolean;
+  prefixCls: string;
+  buttonProps?: ButtonProps;
+  emitEvent?: boolean;
+  quitOnNullishReturnValue?: boolean;
+}
+
+function isThenable(thing?: PromiseLike<any>): boolean {
+  return !!(thing && !!thing.then);
+}
+
+const ActionButton: React.FC<ActionButtonProps> = props => {
+  const clickedRef = React.useRef<boolean>(false);
+  const ref = React.useRef<any>();
+  const [loading, setLoading] = React.useState<ButtonProps['loading']>(false);
+
+  React.useEffect(() => {
+    let timeoutId: any;
+    if (props.autoFocus) {
+      const $this = ref.current as HTMLInputElement;
+      timeoutId = setTimeout(() => $this.focus());
+    }
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, []);
+
+  const handlePromiseOnOk = (returnValueOfOnOk?: PromiseLike<any>) => {
+    const { close } = props;
+    if (!isThenable(returnValueOfOnOk)) {
+      return;
+    }
+    setLoading(true);
+    returnValueOfOnOk!.then(
+      (...args: any[]) => {
+        setLoading(false);
+        close(...args);
+        clickedRef.current = false;
+      },
+      (e: Error) => {
+        // Emit error when catch promise reject
+        // eslint-disable-next-line no-console
+        console.error(e);
+        // See: https://github.com/ant-design/ant-design/issues/6183
+        setLoading(false);
+        clickedRef.current = false;
+      },
+    );
+  };
+
+  const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    const { actionFn, close } = props;
+    if (clickedRef.current) {
+      return;
+    }
+    clickedRef.current = true;
+    if (!actionFn) {
+      close();
+      return;
+    }
+    let returnValueOfOnOk;
+    if (props.emitEvent) {
+      returnValueOfOnOk = actionFn(e);
+      if (props.quitOnNullishReturnValue && !isThenable(returnValueOfOnOk)) {
+        clickedRef.current = false;
+        close(e);
+        return;
+      }
+    } else if (actionFn.length) {
+      returnValueOfOnOk = actionFn(close);
+      // https://github.com/ant-design/ant-design/issues/23358
+      clickedRef.current = false;
+    } else {
+      returnValueOfOnOk = actionFn();
+      if (!returnValueOfOnOk) {
+        close();
+        return;
+      }
+    }
+    handlePromiseOnOk(returnValueOfOnOk);
+  };
+
+  const { type, children, prefixCls, buttonProps } = props;
+  return (
+    <Button
+      {...convertLegacyProps(type)}
+      onClick={onClick}
+      loading={loading}
+      prefixCls={prefixCls}
+      {...buttonProps}
+      ref={ref}
+    >
+      {children}
+    </Button>
+  );
+};
+
+export default ActionButton;