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

package/descriptions/_story/descriptions.stories.js

@@ -0,0 +1,95 @@
+import React from 'react';
+// import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+
+import Descriptions from '../index';
+
+export default {
+  title: 'Descriptions',
+}
+
+let data = [
+    // ShortId: '火山号',
+    // UID: 'UID',
+    { key: '火山号', value: 12000 },
+    { key: <span>1232</span>, value: 12000 },
+    { key: '粉丝', value: 3112 },
+    { key: '火力', value: 3000 },
+    { key: '剩余钻石', value: 3000 },
+    { key: '消费', value: 3000 },
+    { key: '关注', value: 3000 },
+];
+
+let data2 = [
+    // ShortId: '火山号',
+    // UID: 'UID',
+    { key: '主播类型(签约)', value: '自由（普通）主播' },
+    { key: '安全等级', value: '3级' },
+    { key: '垂类标签', value: undefined },
+    { key: '认证状态', value: '未认证' },
+    { key: '作者来源', value: '' },
+    { key: '经纪人', value: '' }
+];
+
+let data3 = [
+    // ShortId: '火山号',
+    // UID: 'UID',
+    { key: '主播类型(签约)', value: '自由（普通）主播' },
+    { key: '安全等级', value: '3级' },
+    { key: '垂类标签', value: undefined },
+    { key: '认证状态', value: '这是一个很长很长很长很长很长很长很长很长很长的值，需要自动换行显示' },
+];
+
+let data4 = [
+    // ShortId: '火山号',
+    // UID: 'UID',
+    { key: '实际用户数量', value: '1,480,000' },
+    { key: '7天留存', value: '98%' },
+    { key: '7天留存', value: '103.4M' },
+];
+
+export const DescriptionsDefault = () => (
+  <div>
+    <Descriptions data={data} />
+    <Descriptions align="justify" data={data2} />
+    <Descriptions align="left" data={data3} />
+    <Descriptions align="plain" data={data2} />
+  </div>
+);
+
+export const DescriptionsDoubleRow = () => (
+  <div>
+    <Descriptions data={data4} row size="small" />
+    <Descriptions data={data4} row />
+    <Descriptions data={data4} row size="large" />
+  </div>
+);
+
+export const DescriptionsItem = () => (
+  <div>
+    <Descriptions>
+      <Descriptions.Item itemKey="实际用户数量">1,480,000</Descriptions.Item>
+      <Descriptions.Item itemKey="7天留存">98%</Descriptions.Item>
+      <Descriptions.Item itemKey="安全等级">3级</Descriptions.Item>
+      <Descriptions.Item itemKey="垂类标签">电商</Descriptions.Item>
+      <Descriptions.Item itemKey="认证状态">未认证</Descriptions.Item>
+    </Descriptions>
+    <br />
+    <Descriptions row size="small">
+      <Descriptions.Item itemKey="实际用户数量">1,480,000</Descriptions.Item>
+      <Descriptions.Item itemKey="7天留存">98%</Descriptions.Item>
+      <Descriptions.Item itemKey="安全等级">3级</Descriptions.Item>
+      <Descriptions.Item itemKey="垂类标签">电商</Descriptions.Item>
+      <Descriptions.Item itemKey="认证状态">未认证</Descriptions.Item>
+    </Descriptions>
+    <br />
+    <Descriptions align="justify">
+      <Descriptions.Item>1,480,000</Descriptions.Item>
+      <Descriptions.Item itemKey="7天留存">98%</Descriptions.Item>
+      <Descriptions.Item itemKey="安全等级">3级</Descriptions.Item>
+      <Descriptions.Item itemKey="垂类标签">电商</Descriptions.Item>
+      <Descriptions.Item itemKey="认证状态">未认证</Descriptions.Item>
+    </Descriptions>
+    <br />
+  </div>
+);
+

package/descriptions/_story/descriptions.stories.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import Demo from './Demo';
+import { storiesOf } from '@storybook/react';
+
+const stories = storiesOf('Descriptions', module);
+stories.add('Descriptions', () => <Demo />)

package/descriptions/descriptions-context.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export type DescriptionsAlign = 'center' | 'justify' | 'left' | 'plain';
+
+export interface DescriptionsContextValue {
+    align?: DescriptionsAlign;
+}
+
+const DescriptionsContext = React.createContext<DescriptionsContextValue>(null);
+
+export default DescriptionsContext;

package/descriptions/index.tsx

@@ -0,0 +1,82 @@
+import React, { PureComponent } from 'react';
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import { strings, cssClasses } from '@douyinfe/semi-foundation/descriptions/constants';
+import '@douyinfe/semi-foundation/descriptions/descriptions.scss';
+import { isPlainObject } from 'lodash';
+import DescriptionsContext, { DescriptionsAlign } from './descriptions-context';
+import Item from './item';
+
+export { DescriptionsItemProps } from './item';
+export type DescriptionsSize = 'small' | 'medium' | 'large';
+export interface Data {
+    [x: string]: any;
+    key?: string | number;
+    value?: (() => React.ReactNode) | React.ReactNode;
+    hidden?: boolean;
+}
+export interface DescriptionsProps {
+    align?: DescriptionsAlign;
+    row?: boolean;
+    size?: DescriptionsSize;
+    style?: React.CSSProperties;
+    className?: string;
+    data?: Data[];
+}
+
+const prefixCls = cssClasses.PREFIX;
+
+class Descriptions extends PureComponent<DescriptionsProps > {
+    static Item = Item;
+
+    static contextType = DescriptionsContext;
+
+    static propTypes = {
+        align: PropTypes.oneOf(strings.ALIGN_SET),
+        row: PropTypes.bool,
+        size: PropTypes.oneOf(strings.SIZE_SET),
+        style: PropTypes.object,
+        className: PropTypes.string,
+        data: PropTypes.arrayOf(PropTypes.shape({
+            key: PropTypes.node,
+            value: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+            hidden: PropTypes.bool,
+            className: PropTypes.string,
+            style: PropTypes.object
+        })),
+    };
+
+    static defaultProps = {
+        align: 'center',
+        row: false,
+        size: 'medium',
+        data: [] as Array<Data>,
+    };
+
+    render() {
+        const { align, row, size, className, style, children, data } = this.props;
+        const classNames = cls(prefixCls, className, {
+            [`${prefixCls}-${align}`]: !row,
+            [`${prefixCls}-double`]: row,
+            [`${prefixCls}-double-${size}`]: row,
+        });
+        const childrenList = data && data.length ?
+            data.map(item => (
+                isPlainObject(item) ? <Item key={item.key} itemKey={item.key} {...item}>{item.value}</Item> : null
+            )) :
+            children;
+        return (
+            <div className={classNames} style={style}>
+                <table>
+                    <tbody>
+                        <DescriptionsContext.Provider value={{ align }}>
+                            {childrenList}
+                        </DescriptionsContext.Provider>
+                    </tbody>
+                </table>
+            </div>
+        );
+    }
+}
+
+export default Descriptions;

package/descriptions/item.tsx

@@ -0,0 +1,63 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { cssClasses } from '@douyinfe/semi-foundation/descriptions/constants';
+import '@douyinfe/semi-foundation/descriptions/descriptions.scss';
+import DescriptionsContext from './descriptions-context';
+
+export interface DescriptionsItemProps {
+    hidden?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    itemKey: string | number;
+}
+
+const prefixCls = cssClasses.PREFIX;
+const keyCls = `${prefixCls}-key`;
+const valCls = `${prefixCls}-value`;
+
+export default class Item extends PureComponent<DescriptionsItemProps> {
+    static propTypes = {
+        itemKey: PropTypes.node,
+        hidden: PropTypes.bool,
+        className: PropTypes.string,
+        style: PropTypes.object
+    };
+
+    static contextType = DescriptionsContext;
+
+    render() {
+        const { itemKey, hidden, className, style, children } = this.props;
+        const { align } = this.context;
+        if (hidden) {
+            return null;
+        }
+        const item = align === 'plain' ?
+            (
+                <tr className={className} style={style}>
+                    <td className={`${prefixCls}-item`}>
+                        <span className={keyCls}>
+                            {`${itemKey}:`}
+                        </span>
+                        <span className={valCls}>
+                            {typeof children === 'function' ? children() : children}
+                        </span>
+                    </td>
+                </tr>
+            ) :
+            (
+                <tr className={className} style={style}>
+                    <th className={`${prefixCls}-item ${prefixCls}-item-th`}>
+                        <span className={keyCls}>
+                            {itemKey}
+                        </span>
+                    </th>
+                    <td className={`${prefixCls}-item ${prefixCls}-item-td`}>
+                        <span className={valCls}>
+                            {typeof children === 'function' ? children() : children}
+                        </span>
+                    </td>
+                </tr>
+            );
+        return item;
+    }
+}

package/dist/css/semi.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* shadow */
 /* sizing */
 /* spacing */
@@ -400,7 +399,7 @@ body, body[theme-mode=dark] .semi-always-light {
   --semi-color-link-visited: rgba(var(--semi-blue-5), 1);
   --semi-color-border: rgba(var(--semi-grey-9), .08);
   --semi-color-nav-bg: rgba(var(--semi-white), 1);
-  --semi-overlay-bg: rgba(22, 22, 26, .6);
+  --semi-color-overlay-bg: rgba(22, 22, 26, .6);
   --semi-color-fill-0: rgba(var(--semi-grey-8), .05);
   --semi-color-fill-1: rgba(var(--semi-grey-8), .09);
   --semi-color-fill-2: rgba(var(--semi-grey-8), .13);
@@ -487,7 +486,7 @@ body[theme-mode=dark], body .semi-always-dark {
   --semi-color-link-visited: rgba(var(--semi-blue-5), 1);
   --semi-color-nav-bg: rgba(35, 36, 41, 1);
   --semi-shadow-elevated: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 14px rgba(0, 0, 0, .25);
-  --semi-overlay-bg: rgba(22, 22, 26, .6);
+  --semi-color-overlay-bg: rgba(22, 22, 26, .6);
   --semi-color-fill-0: rgba(var(--semi-white), .05);
   --semi-color-fill-1: rgba(var(--semi-white), .09);
   --semi-color-fill-2: rgba(var(--semi-white), .13);
@@ -3059,12 +3058,14 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary-hover);
+  box-shadow: none;
 }
 .semi-checkbox:active .semi-checkbox-inner-display {
   background: var(--semi-color-fill-1);
 }
 .semi-checkbox:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary-active);
+  box-shadow: none;
 }
 .semi-checkbox.semi-checkbox-disabled:hover .semi-checkbox-inner-display, .semi-checkbox.semi-checkbox-disabled:active .semi-checkbox-inner-display {
   background: var(--semi-color-disabled-fill);
@@ -3072,6 +3073,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-checkbox.semi-checkbox-disabled:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display, .semi-checkbox.semi-checkbox-disabled:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary-disabled);
+  box-shadow: none;
 }
 .semi-checkbox-inner {
   position: relative;
@@ -3112,7 +3114,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-checkbox:hover.semi-checkbox-indeterminate .semi-checkbox-inner-display {
   background: var(--semi-color-primary-hover);
-  box-shadow: inset 0 0 0 1px var(--semi-color-focus-border);
+  box-shadow: none;
   color: var(--semi-color-white);
 }
 .semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
@@ -3130,6 +3132,7 @@ body[theme-mode=dark], body .semi-always-dark {
   background: var(--semi-color-primary-active);
   border-color: var(--semi-color-primary-active);
   color: var(--semi-color-white);
+  box-shadow: none;
 }
 .semi-checkbox:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary-active);
@@ -3181,10 +3184,18 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-checkbox-cardType_checked {
   background: var(--semi-color-primary-light-default);
-  border: 1px solid var(--semi-color-focus-border);
+  border: 1px solid var(--semi-color-primary);
 }
 .semi-checkbox-cardType_checked:hover {
   background: var(--semi-color-primary-light-default);
+  border-color: var(--semi-color-primary-hover);
+}
+.semi-checkbox-cardType_checked:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
+  box-shadow: none;
+}
+.semi-checkbox-cardType_checked:active {
+  background: var(--semi-color-primary-light-default);
+  border-color: var(--semi-color-primary-active);
 }
 .semi-checkbox-cardType_disabled:active {
   background: transparent;
@@ -3192,6 +3203,13 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-checkbox-cardType_disabled:hover {
   background: transparent;
 }
+.semi-checkbox-cardType_checked_disabled.semi-checkbox-cardType {
+  background: var(--semi-color-primary-light-default);
+  border: 1px solid var(--semi-color-primary-disabled);
+}
+.semi-checkbox-cardType_checked_disabled.semi-checkbox-cardType:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
+  box-shadow: none;
+}
 .semi-checkbox-indeterminate .semi-checkbox-inner-display, .semi-checkbox-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary);
   color: var(--semi-color-white);
@@ -11956,7 +11974,7 @@ body[theme-mode=dark], body .semi-always-dark {
   right: 0;
   left: 0;
   bottom: 0;
-  background-color: var(--semi-overlay-bg);
+  background-color: var(--semi-color-overlay-bg);
   height: 100%;
   z-index: 1000;
 }
@@ -13658,6 +13676,7 @@ body[theme-mode=dark], body .semi-always-dark {
   width: 100%;
   height: 100%;
   margin: 0;
+  cursor: pointer;
 }
 .semi-radio:hover .semi-radio-inner-display {
   background: var(--semi-color-fill-0);
@@ -13668,6 +13687,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-radio:hover .semi-radio-inner-checked .semi-radio-inner-display {
   background: var(--semi-color-primary-hover);
+  border-color: var(--semi-color-primary-hover);
 }
 .semi-radio:active .semi-radio-inner-display {
   background: var(--semi-color-fill-1);
@@ -13677,6 +13697,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-radio:active .semi-radio-inner-checked .semi-radio-inner-display {
   background: var(--semi-color-primary-active);
+  border-color: var(--semi-color-primary-active);
 }
 .semi-radio-buttonRadioComponent {
   padding: 4px;
@@ -13734,7 +13755,23 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-radio-cardRadioGroup_checked {
   background: var(--semi-color-primary-light-default);
-  border: 1px solid var(--semi-color-focus-border);
+  border: 1px solid var(--semi-color-primary);
+}
+.semi-radio-cardRadioGroup_checked:hover {
+  border: 1px solid var(--semi-color-primary-hover);
+}
+.semi-radio-cardRadioGroup_checked:hover .semi-radio-inner-checked .semi-radio-inner-display {
+  border-color: var(--semi-color-primary-hover);
+}
+.semi-radio-cardRadioGroup_checked:active {
+  background: var(--semi-color-primary-light-default);
+  border: 1px solid var(--semi-color-primary-active);
+}
+.semi-radio-cardRadioGroup_checked:active .semi-radio-inner-checked .semi-radio-inner-display {
+  border-color: var(--semi-color-primary-active);
+}
+.semi-radio-cardRadioGroup_checked:active .semi-radio-inner-checked:hover .semi-radio-inner-display {
+  background: var(--semi-color-primary-active);
 }
 .semi-radio-cardRadioGroup_hover {
   background: var(--semi-color-fill-0);
@@ -13742,12 +13779,23 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-radio-cardRadioGroup_disabled:active {
   background: transparent;
 }
+.semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup {
+  background: var(--semi-color-primary-light-default);
+  border: 1px solid var(--semi-color-primary-disabled);
+}
+.semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup .semi-radio-inner-checked .semi-radio-inner-display {
+  border-color: var(--semi-color-primary-disabled);
+}
+.semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup:hover .semi-radio-inner-checked .semi-radio-inner-display {
+  border-color: var(--semi-color-primary-disabled);
+}
 .semi-radio.semi-radio-disabled:hover .semi-radio-inner-display, .semi-radio.semi-radio-disabled:active .semi-radio-inner-display {
   background: var(--semi-color-disabled-fill);
   border: solid 1px var(--semi-color-border);
 }
 .semi-radio.semi-radio-disabled:hover .semi-radio-inner-checked .semi-radio-inner-display, .semi-radio.semi-radio-disabled:active .semi-radio-inner-checked .semi-radio-inner-display {
   background: var(--semi-color-primary-disabled);
+  border-color: var(--semi-color-primary-disabled);
 }
 .semi-radio-inner {
   position: absolute;
@@ -13855,10 +13903,11 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-radio-disabled .semi-radio-inner-checked .semi-radio-inner-display {
   background: var(--semi-color-primary-disabled);
-  border-color: var(--semi-color-border);
+  border-color: var(--semi-color-primary-disabled);
 }
 .semi-radio-disabled .semi-radio-inner-checked .semi-radio-inner-display:hover {
   background: var(--semi-color-primary-disabled);
+  border-color: var(--semi-color-primary-disabled);
 }
 .semi-radio-disabled .semi-radio-addon {
   color: var(--semi-color-disabled-text);
@@ -14020,6 +14069,9 @@ body[theme-mode=dark], body .semi-always-dark {
   height: 24px;
   font-size: 24px;
 }
+.semi-rating-star-wrapper {
+  position: relative;
+}
 .semi-rating-star-first, .semi-rating-star-second {
   color: var(--semi-color-fill-0);
   user-select: none;
@@ -14789,7 +14841,7 @@ body[theme-mode=dark], body .semi-always-dark {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--semi-overlay-bg);
+  background-color: var(--semi-color-overlay-bg);
 }
 .semi-sidesheet-mask-hidden {
   display: none;
@@ -16101,7 +16153,7 @@ body[theme-mode=dark], body .semi-always-dark {
   user-select: none;
 }
 .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right {
-  z-index: 1;
+  z-index: 101;
   position: sticky;
   background-color: var(--semi-color-bg-2);
 }
@@ -16215,7 +16267,7 @@ body[theme-mode=dark], body .semi-always-dark {
   background-color: var(--semi-color-fill-0);
 }
 .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left, .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right {
-  z-index: 1;
+  z-index: 101;
   position: sticky;
   background-color: var(--semi-color-bg-2);
 }
@@ -17700,6 +17752,9 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-timeline-alternate .semi-timeline-item-tail, .semi-timeline-alternate .semi-timeline-item-head, .semi-timeline-alternate .semi-timeline-item-head-custom, .semi-timeline-right .semi-timeline-item-tail, .semi-timeline-right .semi-timeline-item-head, .semi-timeline-right .semi-timeline-item-head-custom, .semi-timeline-center .semi-timeline-item-tail, .semi-timeline-center .semi-timeline-item-head, .semi-timeline-center .semi-timeline-item-head-custom {
   left: 50%;
 }
+.semi-timeline-alternate .semi-timeline-item-head.semi-timeline-item-head-custom, .semi-timeline-right .semi-timeline-item-head.semi-timeline-item-head-custom, .semi-timeline-center .semi-timeline-item-head.semi-timeline-item-head-custom {
+  margin-left: 0;
+}
 .semi-timeline-alternate .semi-timeline-item-head, .semi-timeline-right .semi-timeline-item-head, .semi-timeline-center .semi-timeline-item-head {
   margin-left: -4px;
 }
@@ -19570,7 +19625,7 @@ p.semi-typography-extended,
 .semi-upload-picture-file-card-close {
   width: 16px;
   height: 16px;
-  background-color: var(--semi-overlay-bg);
+  background-color: var(--semi-color-overlay-bg);
   position: absolute;
   top: 8px;
   right: 8px;