feat(component): add watermark, fullpage and exception component

CHANGELOG.zh-CN.md

@@ -25,9 +25,8 @@ timeline: true
 ## 0.0.2
 
 - 🆕 新增 `Fullpage` 组件。
-- 🆕 新增 `MonacoEditor` 组件。
-- 🆕 新增 `MirrorEditor` 组件。
 - 🆕 新增 `Exception` 组件。
+- 🆕 新增 `Watermark` 组件。
 - 🛠 使用 `@hankliu/colors` 替换 `@ant-design/colors` 组件。
 - 🛠 使用 `@hankliu/icons` 替换 `@ant-design/icons` 组件，丰富 Icon 的图标库。
 - 🐞 修复使用 `@hankliu/hankliu-ui` 还需要在项目中额外安装 `react-color` 库的问题。

components/_util/omit.ts

@@ -0,0 +1,15 @@
+// delete keys from object
+export default function omit<T extends object, K extends keyof T>(
+  obj: T,
+  keys: Array<K | string> // string 为了某些没有声明的属性被omit
+): Omit<T, K> {
+  const clone = {
+    ...obj,
+  };
+  keys.forEach((key) => {
+    if ((key as K) in clone) {
+      delete clone[key as K];
+    }
+  });
+  return clone;
+}

components/color-picker/index.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import Panel from './Panel';
-import Popover from './Popover'
+import Popover from './Popover';
 import { rgb2hex } from './util';
 import { ColorPickerProps } from './interfaces';
+export * from './interfaces';
 
 function ColorPicker(props: ColorPickerProps) {
   return <Panel {...props} />;
 }
 
-ColorPicker.Popover = Popover
-ColorPicker.rgb2hex = rgb2hex
+ColorPicker.Popover = Popover;
+ColorPicker.rgb2hex = rgb2hex;
 
 export default ColorPicker;

components/exception/demo/403.md

@@ -0,0 +1,26 @@
+---
+order: 1
+title:
+  zh-CN: 403
+  en-US: 403
+---
+
+## zh-CN
+
+你没有此页面的访问权限。
+
+## en-US
+
+you are not authorized to access this page.
+
+```jsx
+import { Exception } from '@hankliu/hankliu-ui';
+import { EExceptionCode } from '@hankliu/hankliu-ui/lib/exception';
+
+ReactDOM.render(
+  <div style={{ width: '100%', overflow: 'auto' }}>
+    <Exception code={EExceptionCode.Forbidden} />
+  </div>,
+  mountNode,
+);
+```

components/exception/demo/404.md

@@ -0,0 +1,26 @@
+---
+order: 2
+title:
+  zh-CN: 404
+  en-US: 404
+---
+
+## zh-CN
+
+此页面未找到。
+
+## en-US
+
+The page you visited does not exist.
+
+```jsx
+import { Exception } from '@hankliu/hankliu-ui';
+import { EExceptionCode } from '@hankliu/hankliu-ui/lib/exception';
+
+ReactDOM.render(
+  <div style={{ width: '100%', overflow: 'auto' }}>
+    <Exception code={EExceptionCode.NotFound} />
+  </div>,
+  mountNode,
+);
+```

components/exception/demo/500.md

@@ -0,0 +1,26 @@
+---
+order: 3
+title:
+  zh-CN: 500
+  en-US: 500
+---
+
+## zh-CN
+
+服务器发生了错误。
+
+## en-US
+
+Something went wrong on server.
+
+```jsx
+import { Exception } from '@hankliu/hankliu-ui';
+import { EExceptionCode } from '@hankliu/hankliu-ui/lib/exception';
+
+ReactDOM.render(
+  <div style={{ width: '100%', overflow: 'auto' }}>
+    <Exception code={EExceptionCode.InternalServerError} />
+  </div>,
+  mountNode,
+);
+```

components/exception/demo/basic.md

@@ -0,0 +1,79 @@
+---
+order: 0
+title: 基本
+---
+
+错误处理组件，支持自定义描述。
+
+```jsx
+import { Exception, Col, Divider, Input, Row, Select } from '@hankliu/hankliu-ui';
+import { EExceptionCode } from '@hankliu/hankliu-ui/lib/exception';
+
+
+const codeOptions = [
+  EExceptionCode.Unauthorized,
+  EExceptionCode.Forbidden,
+  EExceptionCode.NotFound,
+  EExceptionCode.InternalServerError,
+  EExceptionCode.BadGateway,
+  EExceptionCode.ServiceUnavailable,
+  EExceptionCode.GatewayTimeout,
+];
+
+const ExceptionBaseDemo = () => {
+  const [code, setCode] = React.useState<EExceptionCode>(EExceptionCode.Unauthorized);
+  const [description, setDescription] = React.useState<string>();
+
+  return (
+    <div style={{ width: "100%", overflow: 'auto' }}>
+      <Exception code={code} description={description} />
+
+      <Divider />
+
+      <Row gutter={16}>
+        <Col span={8}>
+          <Row align="middle">
+            <Col flex="80px">错误码:</Col>
+            <Col flex="1">
+              <Select
+                value={code}
+                style={{ width: '100%' }}
+                onChange={val => {
+                  setDescription(undefined);
+                  setCode(val);
+                }}
+                showSearch
+              >
+                {codeOptions.map(item => (
+                  <Select.Option key={item} value={item}>
+                    {item}
+                  </Select.Option>
+                ))}
+              </Select>
+            </Col>
+          </Row>
+        </Col>
+
+        <Col span={8}>
+          <Row align="middle">
+            <Col flex="80px">错误消息:</Col>
+            <Col flex="1">
+              <Input
+                placeholder="请输入错误消息"
+                style={{ width: '100' }}
+                value={description}
+                onChange={event => {
+                  setDescription(event.target.value);
+                }}
+                allowClear
+              />
+            </Col>
+          </Row>
+        </Col>
+      </Row>
+    </div>
+  );
+}
+
+ReactDOM.render(<ExceptionBaseDemo />, mountNode);
+```

components/exception/index.tsx

@@ -0,0 +1,14 @@
+import InnerException from '@hankliu/rc-exception/lib';
+import appendDefaultProps from '../_util/appendDefaultProps';
+
+appendDefaultProps();
+
+export * from '@hankliu/rc-exception/lib';
+
+const Exception: typeof InnerException & { displayName?: string } = InnerException;
+
+if (process.env.NODE_ENV !== 'production') {
+  Exception.displayName = 'Fullpage';
+}
+
+export default Exception;

components/exception/index.zh-CN.md

@@ -0,0 +1,26 @@
+---
+type: 反馈
+category: Components
+title: Exception
+cols: 1
+subtitle: 异常
+---
+
+一些通用的异常组件，，包含常见 `401`，`403`，`404`，`500`，`502`，`503` 等常见错误码对应的内容。
+
+## 何时使用
+
+当需要网页出现异常时使用。
+
+## API
+
+异常组件 `API` 如下所示，具体参考上面示例：
+
+> 自 `hankliu-ui@0.0.2` 版本开始提供该组件。
+
+| 参数        | 说明                    | 类型           | 默认值                         |
+| ----------- | ----------------------- | -------------- | ------------------------------ |
+| className   | 组件外层元素 Class      | string         | -                              |
+| prefixCls   | 组件外层元素 Class 前缀 | string         | hlui-exception                 |
+| code        | 错误码                  | EExceptionCode | -                              |
+| description | 错误码对应的描述        | string         | `ExceptionDescriptionEn[code]` |

components/exception/style/index.less

@@ -0,0 +1,2 @@
+@import '~@hankliu/rc-exception/assets/index.css';
+@import '../../style/themes/variable';

components/exception/style/index.tsx

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

components/fullpage/demo/basic.md

@@ -0,0 +1,114 @@
+---
+order: 0
+title: 基本
+---
+
+全屏滚动组件，支持显示面板指示点，点击面板指示点会跳转到指定单页。
+
+```jsx
+import { Fullpage, Button, Divider, Breadcrumb } from '@hankliu/hankliu-ui';
+
+const FullPageBasicDemo = () => {
+  const Options = {
+    activeClass: 'active', // the class that is appended to the sections links
+    anchors: [
+      'resume-index',
+      'resume-introduction',
+      'resume-skill',
+      'resume-experience',
+      'resume-project',
+      'resume-article',
+    ], // the anchors for each sections
+    shortcutKey: true, // use arrow keys
+    className: 'resume-properties-section-container', // the class name for the section container
+    delay: 1000, // the scroll animation speed
+    dots: true, // use dots navigatio
+    scrollBar: false, // use the browser default scrollbar
+    sectionClassName: 'resume-properties-section resume-section-container', // the section class name
+    sectionPaddingTop: '0', // the section top padding
+    sectionPaddingBottom: '0', // the section bottom padding
+    verticalAlign: false, // align the content of each section vertical
+    touchable: true,
+  };
+
+  const Items = [
+    'ResumeIndex',
+    'ResumeIntroduction',
+    'ResumeSkill',
+    'ResumeExperience',
+    'ResumeProject',
+    'ResumeArticle',
+  ];
+
+  const Colors = ['#fcba85', '#e1105e', '#e6f952', '#23d2a6', '#4414bf', '#2899aa'];
+
+  const renderResumeItem = (item, index) => {
+    const divStyled = {
+      backgroundColor: `${Colors[index]}`,
+      mixBlendMode: 'difference',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100vh',
+      boxSizing: 'border-box',
+    };
+    return <div key={item} style={divStyled}>{item}</div>;
+  };
+
+  const outStyled = {
+    height: '100vh',
+    border: '1px solid #ddd',
+    borderRadius: '2px',
+    overflowY: 'hidden',
+  };
+
+  React.useEffect(() => {
+    function reset() {
+      if (document.querySelector('body')!.style.overflow === 'hidden') {
+        document.querySelector('body')!.style.overflow = 'auto';
+      }
+      setTimeout(() => {
+        reset();
+      }, 300);
+    }
+
+    reset();
+  }, []);
+
+  const onFullScreen = () => {
+    document.querySelector('.hlui-fullpage').requestFullscreen();
+  };
+
+  return (
+    <>
+      <Breadcrumb>
+        {Items.map((item) => (<Breadcrumb.Item key={item}>{item}</Breadcrumb.Item>))}
+      </Breadcrumb>
+
+      <Divider />
+
+      <div style={outStyled}>
+        <Fullpage {...Options}>
+          {Items.map((item, index) => (
+            <Fullpage.Section
+              id={item}
+              className={item.replace(/(?!\b)([A-Z])/g, '-$1').toLowerCase()}
+              key={item}
+            >
+              {renderResumeItem(item, index)}
+            </Fullpage.Section>
+          ))}
+        </Fullpage>
+      </div>
+
+      <Divider />
+
+      <Button style={{ marginTop: '10px' }} onClick={onFullScreen}>
+        全屏
+      </Button>
+    </>
+  );
+}
+
+ReactDOM.render(<FullPageBasicDemo />, mountNode);
+```

components/fullpage/index.tsx

@@ -0,0 +1,14 @@
+import InnerFullpage from '@hankliu/rc-fullpage/lib';
+import appendDefaultProps from '../_util/appendDefaultProps';
+
+appendDefaultProps();
+
+export * from '@hankliu/rc-fullpage/lib';
+
+const Fullpage: typeof InnerFullpage & { displayName?: string } = InnerFullpage;
+
+if (process.env.NODE_ENV !== 'production') {
+  Fullpage.displayName = 'Fullpage';
+}
+
+export default Fullpage;