@douyinfe/semi-ui 2.1.3 → 2.1.6-alpha.0

package/anchor/_story/anchor.stories.js

@@ -0,0 +1,266 @@
+import React from 'react';
+import { Anchor } from '../../index';
+
+export default {
+  title: 'Anchor',
+}
+
+const getContainer = () => {
+  const node = document.getElementById('box');
+  return node;
+};
+
+const Link = Anchor.Link;
+
+export const Size = () => (
+  <div>
+    <div>小号尺寸</div>
+    <Anchor size={'small'}>
+      <Link href="#welcome" title="welcome" />
+      <Link href="#api" title="api too much to show" />
+      <Link href="#contact" title="contact" />
+    </Anchor>
+    <br />
+    <div>默认</div>
+    <Anchor>
+      <Link href="#welcome" title="welcome" />
+      <Link href="#api" title="api too much to show" />
+      <Link href="#contact" title="contact" />
+    </Anchor>
+  </div>
+);
+
+export const Theme = () => (
+  <div>
+    <div>点击锚点查看效果</div>
+    <br />
+    <Anchor railTheme={'primary'}>
+      <Link href="#组件" title="组件" />
+      <Link href="#设计语言" title="设计语言" />
+      <Link href="#物料平台" title="物料平台" />
+      <Link href="#主题商店" title="主题商店" />
+    </Anchor>
+    <br />
+    <Anchor railTheme={'tertiary'}>
+      <Link href="#组件" title="组件" />
+      <Link href="#设计语言" title="设计语言" />
+      <Link href="#物料平台" title="物料平台" />
+      <Link href="#主题商店" title="主题商店" />
+    </Anchor>
+    <br />
+    <Anchor railTheme={'muted'}>
+      <Link href="#组件" title="组件" />
+      <Link href="#设计语言" title="设计语言" />
+      <Link href="#物料平台" title="物料平台" />
+      <Link href="#主题商店" title="主题商店" />
+    </Anchor>
+  </div>
+);
+
+export const autoCollapse = () => (
+  <div>
+    <div>Anchor 设置 autoCollapse 可以动态展示下一级锚点。</div>
+    <br />
+    <div>点击 1.Semi Design 查看效果</div>
+    <Anchor autoCollapse={true}>
+      <Link href="#Semi Design" title="1. Semi Design">
+        <Link href="#组件" title="1.1 组件">
+          <Link href="#头像" title="1.1.1 Avatar" />
+          <Link href="#按钮" title="1.1.2 Button" />
+          <Link href="#图标" title="1.1.3 Icon" />
+        </Link>
+        <Link href="#物料" title="1.2 物料" />
+        <Link href="#主题商店" title="1.3 主题商店" />
+      </Link>
+      <Link href="#设计语言" title="2. 设计语言" />
+    </Anchor>
+    <br />
+    <div>默认不进行动态折叠</div>
+    <Anchor autoCollapse={false}>
+      <Link href="#Semi Design" title="1. Semi Design">
+        <Link href="#组件" title="1.1 组件">
+          <Link href="#头像" title="1.1.1 Avatar" />
+          <Link href="#按钮" title="1.1.2 Button" />
+          <Link href="#图标" title="1.1.3 Icon" />
+        </Link>
+        <Link href="#物料" title="1.2 物料" />
+        <Link href="#主题商店" title="1.3 主题商店" />
+      </Link>
+      <Link href="#设计语言" title="2. 设计语言" />
+    </Anchor>
+  </div>
+);
+
+export const showTooltip = () => (
+  <div>
+    <div>工具提示可以在 Link 超出最大宽度时显示 Link 的文字内容</div>
+    <br />
+    <Anchor showTooltip={true}>
+      <Link href="#组件" title="组件" />
+      <Link href="#设计语言" title="设计语言" />
+      <Link href="#物料平台" title="物料平台" />
+      <Link href="#主题商店" title="主题商店" />
+      <Link
+        href="#显示工具提示"
+        title="工具提示是一个有用的工具，它可以在文字缩略时展示全部内容。"
+      />
+    </Anchor>
+    <br />
+    <div>position可以设置工具提示的位置</div>
+    <Anchor showTooltip={true} position={'right'}>
+      <Link href="#组件" title="组件" />
+      <Link href="#设计语言" title="设计语言" />
+      <Link href="#物料平台" title="物料平台" />
+      <Link href="#主题商店" title="主题商店" />
+      <Link
+        href="#工具提示位置"
+        title="工具提示是一个有用的工具，它可以在文字缩略时展示全部内容。"
+      />
+    </Anchor>
+  </div>
+);
+
+export const MaxHeight = () => (
+  <div>
+    <div>设置 maxHeight 可以控制 Anchor 的高度，滚动显示 Anchor 内容</div>
+    <br />
+    <Anchor maxHeight={'100px'}>
+      <Link href="#组件" title="组件" />
+      <Link href="#设计语言" title="设计语言" />
+      <Link href="#物料平台" title="物料平台" />
+      <Link href="#主题商店" title="主题商店" />
+      <Link
+        href="#显示工具提示"
+        title="工具提示是一个有用的工具，它可以在文字缩略时展示全部内容。"
+      />
+    </Anchor>
+  </div>
+);
+
+export const StylePosition = () => (
+  <div>
+    <Anchor
+      style={{ position: 'absolute', right: 0 }}
+      scrollMotion={false}
+      getContainer={getContainer}
+    >
+      <Link href="#welcome" title="welcome" />
+      <Link href="#api" title="api too much to show">
+        <Link href="#docs" title="docs">
+          <Link href="#doc1" title="doc1" />
+          <Link href="#doc2" title="doc2" />
+        </Link>
+      </Link>
+      <Link href="#contact" title="contact" />
+    </Anchor>
+
+    <div>设置style对象可以改变 Anchor 组件的定位方式，右边就是个 fixed 的 Anchor</div>
+    <div id="box" style={{ height: '500px', overflow: 'scroll' }}>
+      <h1 id="welcome" style={{ height: '300px' }}>
+        Welcome
+      </h1>
+      <h1 id="api" style={{ height: '300px' }}>
+        API
+      </h1>
+      <h2 id="docs" style={{ height: '200px' }}>
+        Docs
+      </h2>
+      <h3 id="doc1" style={{ height: '100px' }}>
+        Doc1
+      </h3>
+      <h3 id="doc2" style={{ height: '100px' }}>
+        Doc2
+      </h3>
+      <h1 id="contact" style={{ height: '300px' }}>
+        Contact me
+      </h1>
+    </div>
+  </div>
+);
+
+export const TargetOffset = () => (
+  <div>
+    <Anchor
+      style={{ position: 'absolute', right: 0, top: 100 }}
+      targetOffset={100}
+      scrollMotion={true}
+      getContainer={getContainer}
+    >
+      <Link href="#welcome" title="welcome" />
+      <Link href="#api" title="api too much to show">
+        <Link href="#docs" title="docs">
+          <Link href="#doc1" title="doc1" />
+          <Link href="#doc2" title="doc2" />
+        </Link>
+      </Link>
+      <Link href="#contact" title="contact" />
+    </Anchor>
+
+    <div id="box" style={{ height: '500px', overflow: 'scroll', border: '1px solid #eee' }}>
+      <div style={{ position: 'fixed', border: '1px solid red', height: 100, width: '100%' }}>
+        这是 fixed 的一段话
+      </div>
+      <h1 style={{ height: '300px' }}>whatever</h1>
+      <h1 id="welcome" style={{ height: '300px' }}>
+        Welcome
+      </h1>
+      <h1 id="api" style={{ height: '300px' }}>
+        API
+      </h1>
+      <h2 id="docs" style={{ height: '200px' }}>
+        Docs
+      </h2>
+      <h3 id="doc1" style={{ height: '100px' }}>
+        Doc1
+      </h3>
+      <h3 id="doc2" style={{ height: '100px' }}>
+        Doc2
+      </h3>
+      <h1 id="contact" style={{ height: '300px' }}>
+        Contact me
+      </h1>
+    </div>
+  </div>
+);
+
+export const FixContainerScrollBug1158 = () => (
+  <div style={{ height: '120vh' }}>
+    <div style={{ width: 500, height: 500, position: 'relative', overflowY: 'scroll' }}>
+      <Anchor
+        style={{ position: 'absolute', right: 0 }}
+        scrollMotion={true}
+        getContainer={getContainer}
+      >
+        <Link href="#welcome" title="welcome" />
+        <Link href="#api" title="api too much to show">
+          <Link href="#docs" title="docs">
+            <Link href="#doc1" title="doc1" />
+            <Link href="#doc2" title="doc2" />
+          </Link>
+        </Link>
+        <Link href="#contact" title="contact" />
+      </Anchor>
+
+      <div id="box" style={{ height: 700, overflowY: 'scroll' }}>
+        <h1 id="welcome" style={{ height: '300px' }}>
+          Welcome
+        </h1>
+        <h1 id="api" style={{ height: '300px' }}>
+          API
+        </h1>
+        <h2 id="docs" style={{ height: '200px' }}>
+          Docs
+        </h2>
+        <h3 id="doc1" style={{ height: '100px' }}>
+          Doc1
+        </h3>
+        <h3 id="doc2" style={{ height: '100px' }}>
+          Doc2
+        </h3>
+        <h1 id="contact" style={{ height: '300px' }}>
+          Contact me
+        </h1>
+      </div>
+    </div>
+  </div>
+);

package/anchor/_story/anchor.stories.tsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import { Anchor } from '../../index';
+import { storiesOf } from '@storybook/react';
+
+const { Link } = Anchor;
+
+const stories = storiesOf('Anchor', module);
+
+const getContainer = () => {
+  const node = document.getElementById('box');
+  return node;
+};
+
+stories.add('不同大小', () => (
+  <div>
+    <div>小号尺寸</div>
+    <Anchor size={'small'}>
+      <Link href="#welcome" title="welcome" />
+      <Link href="#api" title="api too much to show" />
+      <Link href="#contact" title="contact" />
+    </Anchor>
+    <br />
+    <div>默认</div>
+    <Anchor>
+      <Link href="#welcome" title="welcome" />
+      <Link href="#api" title="api too much to show" />
+      <Link href="#contact" title="contact" />
+    </Anchor>
+  </div>
+));
+
+stories.add('不同主题', () => (
+  <div>
+    <div>点击锚点查看效果</div>
+    <br />
+    <Anchor railTheme={'primary'}>
+      <Link href="#组件" title="组件" />
+      <Link href="#设计语言" title="设计语言" />
+      <Link href="#物料平台" title="物料平台" />
+      <Link href="#主题商店" title="主题商店" />
+    </Anchor>
+    <br />
+    <Anchor railTheme={'tertiary'}>
+      <Link href="#组件" title="组件" />
+      <Link href="#设计语言" title="设计语言" />
+      <Link href="#物料平台" title="物料平台" />
+      <Link href="#主题商店" title="主题商店" />
+    </Anchor>
+    <br />
+    <Anchor railTheme={'muted'}>
+      <Link href="#组件" title="组件" />
+      <Link href="#设计语言" title="设计语言" />
+      <Link href="#物料平台" title="物料平台" />
+      <Link href="#主题商店" title="主题商店" />
+    </Anchor>
+  </div>
+));
+
+stories.add('动态展示', () => (
+  <div>
+    <div>Anchor 设置 autoCollapse 可以动态展示下一级锚点。</div>
+    <br />
+    <div>点击 1.Semi Design 查看效果</div>
+    <Anchor autoCollapse={true}>
+      <Link href="#Semi Design" title="1. Semi Design">
+        <Link href="#组件" title="1.1 组件">
+          <Link href="#头像" title="1.1.1 Avatar" />
+          <Link href="#按钮" title="1.1.2 Button" />
+          <Link href="#图标" title="1.1.3 Icon" />
+        </Link>
+        <Link href="#物料" title="1.2 物料" />
+        <Link href="#主题商店" title="1.3 主题商店" />
+      </Link>
+      <Link href="#设计语言" title="2. 设计语言" />
+    </Anchor>
+    <br />
+    <div>默认不进行动态折叠</div>
+    <Anchor autoCollapse={false}>
+      <Link href="#Semi Design" title="1. Semi Design">
+        <Link href="#组件" title="1.1 组件">
+          <Link href="#头像" title="1.1.1 Avatar" />
+          <Link href="#按钮" title="1.1.2 Button" />
+          <Link href="#图标" title="1.1.3 Icon" />
+        </Link>
+        <Link href="#物料" title="1.2 物料" />
+        <Link href="#主题商店" title="1.3 主题商店" />
+      </Link>
+      <Link href="#设计语言" title="2. 设计语言" />
+    </Anchor>
+  </div>
+));
+
+stories.add('工具提示', () => (
+  <div>
+    <div>工具提示可以在 Link 超出最大宽度时显示 Link 的文字内容</div>
+    <br />
+    <Anchor showTooltip={true}>
+      <Link href="#组件" title="组件" />
+      <Link href="#设计语言" title="设计语言" />
+      <Link href="#物料平台" title="物料平台" />
+      <Link href="#主题商店" title="主题商店" />
+      <Link href="#显示工具提示" title="工具提示是一个有用的工具，它可以在文字缩略时展示全部内容。" />
+    </Anchor>
+    <br />
+    <div>position可以设置工具提示的位置</div>
+    <Anchor showTooltip={true} position={'right'}>
+      <Link href="#组件" title="组件" />
+      <Link href="#设计语言" title="设计语言" />
+      <Link href="#物料平台" title="物料平台" />
+      <Link href="#主题商店" title="主题商店" />
+      <Link href="#工具提示位置" title="工具提示是一个有用的工具，它可以在文字缩略时展示全部内容。" />
+    </Anchor>
+  </div>
+));
+
+stories.add('max-height', () => (
+  <div>
+    <div>设置 maxHeight 可以控制 Anchor 的高度，滚动显示 Anchor 内容</div>
+    <br />
+    <Anchor maxHeight={'100px'}>
+      <Link href="#组件" title="组件" />
+      <Link href="#设计语言" title="设计语言" />
+      <Link href="#物料平台" title="物料平台" />
+      <Link href="#主题商店" title="主题商店" />
+      <Link href="#显示工具提示" title="工具提示是一个有用的工具，它可以在文字缩略时展示全部内容。" />
+    </Anchor>
+  </div>
+));
+
+stories.add('定位方式', () => (
+  <div>
+    <Anchor style={{ position: 'absolute', right: 0 }} scrollMotion={false} getContainer={getContainer}>
+      <Link href="#welcome" title="welcome" />
+      <Link href="#api" title="api too much to show">
+        <Link href="#docs" title="docs">
+          <Link href="#doc1" title="doc1" />
+          <Link href="#doc2" title="doc2" />
+        </Link>
+      </Link>
+      <Link href="#contact" title="contact" />
+    </Anchor>
+
+    <div>设置style对象可以改变 Anchor 组件的定位方式，右边就是个 fixed 的 Anchor</div>
+    <div id="box" style={{ height: '500px', overflow: 'scroll' }}>
+      <h1 id="welcome" style={{ height: '300px' }}>
+        Welcome
+      </h1>
+      <h1 id="api" style={{ height: '300px' }}>
+        API
+      </h1>
+      <h2 id="docs" style={{ height: '200px' }}>
+        Docs
+      </h2>
+      <h3 id="doc1" style={{ height: '100px' }}>
+        Doc1
+      </h3>
+      <h3 id="doc2" style={{ height: '100px' }}>
+        Doc2
+      </h3>
+      <h1 id="contact" style={{ height: '300px' }}>
+        Contact me
+      </h1>
+    </div>
+  </div>
+));

package/anchor/anchor-context.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import Anchor, { AnchorProps, AnchorState } from '.';
+
+export type AnchorContextType = Pick<AnchorProps, 'showTooltip' | 'position' | 'autoCollapse' | 'size'>
+& Pick<AnchorState, 'activeLink'>
+& Pick<Anchor, 'addLink' | 'removeLink' | 'childMap'>
+& {
+    onClick: Anchor['handleClick'];
+};
+
+const AnchorContext = React.createContext<AnchorContextType>(null);
+
+export default AnchorContext;