@douyinfe/semi-ui 2.19.0-beta.0 → 2.19.0

package/anchor/index.tsx

@@ -10,10 +10,12 @@ import '@douyinfe/semi-foundation/anchor/anchor.scss';
 import { noop, debounce, throttle } from 'lodash';
 import getUuid from '@douyinfe/semi-foundation/utils/uuid';
 import { ArrayElement } from '../_base/base';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 
 const prefixCls = cssClasses.PREFIX;
 
 export { LinkProps } from './link';
+
 export interface AnchorProps {
     autoCollapse?: boolean;
     className?: string;
@@ -44,6 +46,7 @@ export interface AnchorState {
 }
 
 class Anchor extends BaseComponent<AnchorProps, AnchorState> {
+    static contextType = ConfigContext;
     static Link = Link;
     static PropTypes = {
         size: PropTypes.oneOf(strings.SIZE),
@@ -88,6 +91,7 @@ class Anchor extends BaseComponent<AnchorProps, AnchorState> {
     childMap: Record<string, Set<string>>;
     handler: () => void;
     clickHandler: () => void;
+    context: ContextValue;
 
     constructor(props: AnchorProps) {
         super(props);
@@ -96,7 +100,7 @@ class Anchor extends BaseComponent<AnchorProps, AnchorState> {
             links: [],
             clickLink: false,
             scrollHeight: '100%',
-            slideBarTop: '0'
+            slideBarTop: '0',
         };
 
         this.foundation = new AnchorFoundation(this.adapter);
@@ -107,9 +111,7 @@ class Anchor extends BaseComponent<AnchorProps, AnchorState> {
         return {
             ...super.adapter,
             addLink: value => {
-                this.setState(prevState => (
-                    { links: [...prevState.links, value] }
-                ));
+                this.setState(prevState => ({ links: [...prevState.links, value] }));
             },
             removeLink: link => {
                 this.setState(prevState => {
@@ -218,6 +220,28 @@ class Anchor extends BaseComponent<AnchorProps, AnchorState> {
         this.foundation.updateChildMap(prevState, state);
     };
 
+    renderChildren = () => {
+        const loop = (children, level = 1) => {
+            return React.Children.map(children, child => {
+                if (React.isValidElement(child)) {
+                    const childProps = {
+                        direction: this.context.direction,
+                        level,
+                        children: [],
+                    };
+                    const { children } = child.props as any;
+                    const hasChildren = children && React.Children.count(children) > 0;
+                    if (hasChildren) {
+                        childProps.children = loop(children, level + 1);
+                    }
+                    return React.cloneElement(child, childProps);
+                }
+                return null;
+            });
+        };
+        return loop(this.props.children);
+    };
+
     componentDidMount() {
         const { defaultAnchor = '' } = this.props;
         this.anchorID = getUuid('semi-anchor').replace('.', '');
@@ -286,15 +310,23 @@ class Anchor extends BaseComponent<AnchorProps, AnchorState> {
                     removeLink: this.removeLink,
                 }}
             >
-                <div role="navigation" aria-label={ ariaLabel || 'Side navigation'} className={wrapperCls} style={wrapperStyle} id={this.anchorID}>
+                <div
+                    role="navigation"
+                    aria-label={ariaLabel || 'Side navigation'}
+                    className={wrapperCls}
+                    style={wrapperStyle}
+                    id={this.anchorID}
+                >
                     <div aria-hidden className={slideCls} style={{ height: scrollHeight }}>
                         <span className={slideBarCls} style={{ top: slideBarTop }} />
                     </div>
-                    <div className={anchorWrapper} role="list">{children}</div>
+                    <div className={anchorWrapper} role="list">
+                        {this.renderChildren()}
+                    </div>
                 </div>
             </AnchorContext.Provider>
         );
     }
 }
 
-export default Anchor;
+export default Anchor;

package/anchor/link.tsx

@@ -16,6 +16,8 @@ export interface LinkProps {
     children?: ReactNode;
     style?: React.CSSProperties;
     disabled?: boolean;
+    level?: number;
+    direction?: 'ltr' | 'rtl';
 }
 
 // eslint-disable-next-line @typescript-eslint/ban-types
@@ -38,6 +40,7 @@ export default class Link extends BaseComponent<LinkProps, {}> {
     foundation: LinkFoundation;
 
     context!: AnchorContextType;
+
     constructor(props: LinkProps) {
         super(props);
         this.foundation = new LinkFoundation(this.adapter);
@@ -120,11 +123,13 @@ export default class Link extends BaseComponent<LinkProps, {}> {
         if (!this.context.autoCollapse) {
             return <div role="list">{children}</div>;
         }
-        return activeLink === href || (childMap[href] && childMap[href].has(activeLink)) ? <div role="list">{children}</div> : null;
+        return activeLink === href || (childMap[href] && childMap[href].has(activeLink)) ? (
+            <div role="list">{children}</div>
+        ) : null;
     };
 
     render() {
-        const { href, className, style, disabled = false, title } = this.props;
+        const { href, className, style, disabled = false, title, level, direction } = this.props;
         const { activeLink, showTooltip } = this.context;
         const active = activeLink === href;
         const linkCls = cls(`${prefixCls}-link`, className);
@@ -132,8 +137,12 @@ export default class Link extends BaseComponent<LinkProps, {}> {
             [`${prefixCls}-link-title-active`]: active,
             [`${prefixCls}-link-title-disabled`]: disabled,
         });
+        const paddingAttributeKey = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
         const ariaProps = {
             'aria-disabled': disabled,
+            style: {
+                [paddingAttributeKey]: 8 * level,
+            },
         };
         if (active) {
             ariaProps['aria-details'] = 'active';

package/calendar/_story/calendar.stories.js

@@ -530,7 +530,24 @@ export const EventRender  = () => <EventRenderDemo />;
 
 
 export const WeekStartsOnDemo = () => {
-    const [v, setV] = useState(0);
+    const [v, setV] = useState(6);
+    const allDayStyle = {
+      borderRadius: '3px',
+      boxSizing: 'border-box',
+      border: 'var(--semi-color-bg-1) 1px solid',
+      padding: '2px 4px',
+      backgroundColor: 'var(--semi-color-primary-light-active)',
+      height: '100%',
+      overflow: 'hidden',
+    };
+    const events = [
+      {
+        key: '0',
+        start: new Date(2022, 8, 5, 14, 45, 0),
+        end: new Date(2022, 8, 6, 6, 18, 0),
+        children: <div style={allDayStyle}>9月5日 14:45 ~ 9月6日 6:18</div>,
+      }
+    ]
     return (
         <div>
             <RadioGroup defaultValue={v} aria-label="周起始日" name="demo-radio-group-vertical" onChange={e => setV(e.target.value)}>
@@ -544,9 +561,9 @@ export const WeekStartsOnDemo = () => {
             </RadioGroup>
             <Calendar
                 mode="month"
-                weekStartsOn={v}
+                weekStartsOn={1}
+                events={events}
                 dateGridRender={(dateString, date) => {
-                    console.log(dateString);
                     if (dateString === new Date(2019, 6, 16).toString()) {
                     return (
                         <div style={{ backgroundColor: 'red', height: '100%', width: '100%' }}>123test</div>

package/dist/css/semi.css

@@ -522,6 +522,7 @@ body {
   --semi-transition_function-easeIn:ease-in;
   --semi-transition_function-easeOut:ease-out;
   --semi-transition_function-easeInIOut:ease-in-out;
+  --semi-transition_delay-none: 0ms;
   --semi-transition_delay-slowest:0ms;
   --semi-transition_delay-slower:0ms;
   --semi-transition_delay-slow:0ms;
@@ -575,8 +576,6 @@ body {
   left: 0;
   top: 0;
   height: 100%;
-  box-sizing: border-box;
-  padding: 2px 0;
 }
 .semi-anchor-slide-muted {
   display: none;
@@ -612,13 +611,6 @@ body {
   border-radius: 1px;
   content: " ";
 }
-.semi-anchor-link {
-  padding-left: 8px;
-}
-.semi-anchor-link-wrapper {
-  padding-right: 2px;
-  margin: 2px 0;
-}
 .semi-anchor-link-title {
   cursor: pointer;
   color: var(--semi-color-text-2);
@@ -639,6 +631,7 @@ body {
 }
 .semi-anchor-link-title:focus-visible {
   outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
 }
 .semi-anchor-link-title-disabled {
   color: var(--semi-color-disabled-text);
@@ -681,7 +674,6 @@ body {
 }
 .semi-rtl .semi-anchor-link,
 .semi-portal-rtl .semi-anchor-link {
-  padding-right: 8px;
   padding-left: auto;
 }