import React from 'react';
import { Box, Switch } from '@alicloudfe/components';
import Typography from '@teamix/typography';

const { Paragraph, Text } = Typography;

const App = () => {
  const [ellipsis, setEllipsis] = React.useState(true);

  return (
    <Box spacing={16}>
      <Switch
        checked={ellipsis}
        onChange={() => {
          setEllipsis(!ellipsis);
        }}
      />

      <Paragraph ellipsis={ellipsis}>
        用色主要依据色彩样式的 RGB、HSB 和 HSL来设定 RGB 是指通过R（Red：红）、G（Green：绿）、B（Blue：蓝）三个颜色通道的变化以及它们相互之间的叠加得到所需的色彩。三个通道分别有「0-255」这 256 个值，这些值分别代表着各通道的亮度层级。
      </Paragraph>

      <Paragraph ellipsis={ellipsis ? { rows: 2, expandable: true, symbol: 'more' } : false}>
        虽然 RGB 在机器表现上很友好，但并不够人性化。因为大家判断颜色，一般是通过「这是什么颜色？是不是太鲜艳了？亮了还是暗了？」这样的感官维度，而很难通过红绿蓝的亮度层级去判断。所以后来基于RGB 衍生出了 HSB 模式和 HSL 模式。 HSB 是指通过H（Hue：色相）、S（Saturation：饱和度）、B（Brightness：明度）来控制颜色。Hue（色相）的取值范围是色环上 0-360° 的圆心角度； Saturation（饱和度）与 Brightness（明度）是在 0-100% 的量占比。
      </Paragraph>

      <Text
        style={ellipsis ? { width: 100 } : undefined}
        ellipsis={ellipsis ? { tooltip: 'I am ellipsis now!' } : false}
      >
        浅色界面光源感充足，可以使用更具呼吸感的投影。
      </Text>
    </Box>
  );
};

export default App;