feat: add SensitiveText

packages/design/components/SensitiveText/index.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { SensitiveText } from '.';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Tailchat/SensitiveText',
+  component: SensitiveText,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+} as ComponentMeta<typeof SensitiveText>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof SensitiveText> = (args) => (
+  <SensitiveText {...args} />
+);
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Default.args = {
+  text: 'fooooo',
+};

packages/design/components/SensitiveText/index.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { Icon } from '../Icon';
+
+interface SensitiveTextProps {
+  text: string;
+}
+export const SensitiveText: React.FC<SensitiveTextProps> = React.memo(
+  (props) => {
+    const { text } = props;
+    const [show, setShow] = useState(false);
+
+    return (
+      <span>
+        {show ? text : getMaskedText(text)}
+
+        <Icon
+          style={{ cursor: 'pointer', marginLeft: 4 }}
+          icon={show ? 'mdi:eye-outline' : 'mdi:eye-off-outline'}
+          onClick={() => setShow((before) => !before)}
+        />
+      </span>
+    );
+  }
+);
+SensitiveText.displayName = 'SensitiveText';
+
+function getMaskedText(text: string) {
+  const len = text.length;
+  if (len > 2) {
+    return `${text[0]}****${text[len - 1]}`;
+  } else if (len === 2) {
+    return `${text[0]}*`;
+  } else {
+    return '**';
+  }
+}

packages/design/components/index.ts

@@ -6,6 +6,7 @@ export { DelayTip } from './DelayTip';
 export { Highlight } from './Highlight';
 export { Icon } from './Icon';
 export { Image } from './Image';
+export { SensitiveText } from './SensitiveText';
 
 export { WebMetaForm } from './WebMetaForm';
 export {