refactor: divider

2021-05-11 16:23:49 +08:00 · 2021-05-11 16:23:49 +08:00 · 170a169f35
parent 11ffa8dfda
commit 170a169f35
5 changed files with 154 additions and 142 deletions
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@ -1,4 +1,4 @@
-import { reactive, provide, VNodeTypes, PropType, defineComponent, watch } from 'vue';
+import { reactive, provide, PropType, defineComponent, watch, ExtractPropTypes } from 'vue';
 import PropTypes from '../_util/vue-types';
 import defaultRenderEmpty, { RenderEmptyHandler } from './renderEmpty';
 import LocaleProvider, { Locale, ANT_MARK } from '../locale-provider';
@ -14,30 +14,6 @@ export interface CSPConfig {

 export { RenderEmptyHandler };

-export interface ConfigConsumerProps {
-  getTargetContainer?: () => HTMLElement;
-  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
-  rootPrefixCls?: string;
-  getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => string;
-  renderEmpty: RenderEmptyHandler;
-  transformCellText?: (tableProps: TransformCellTextProps) => any;
-  csp?: CSPConfig;
-  autoInsertSpaceInButton?: boolean;
-  input?: {
-    autoComplete?: string;
-  };
-  locale?: Locale;
-  pageHeader?: {
-    ghost: boolean;
-  };
-  direction?: 'ltr' | 'rtl';
-  space?: {
-    size?: SizeType | number;
-  };
-  virtual?: boolean;
-  dropdownMatchSelectWidth?: boolean;
-}
-
 export const configConsumerProps = [
  'getTargetContainer',
  'getPopupContainer',
@ -50,72 +26,51 @@ export const configConsumerProps = [
  'pageHeader',
 ];

-export interface ConfigProviderProps {
-  getTargetContainer?: () => HTMLElement;
-  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
-  prefixCls?: string;
-  children?: VNodeTypes;
-  renderEmpty?: RenderEmptyHandler;
-  transformCellText?: (tableProps: TransformCellTextProps) => any;
-  csp?: CSPConfig;
-  autoInsertSpaceInButton?: boolean;
-  input?: {
-    autoComplete?: string;
-  };
-  locale?: Locale;
-  pageHeader?: {
-    ghost: boolean;
-  };
-  componentSize?: SizeType;
-  direction?: 'ltr' | 'rtl';
-  space?: {
-    size?: SizeType | number;
-  };
-  virtual?: boolean;
-  dropdownMatchSelectWidth?: boolean;
-}
+export const configProviderProps = {
+  getTargetContainer: {
+    type: Function as PropType<() => HTMLElement>,
+  },
+  getPopupContainer: {
+    type: Function as PropType<(triggerNode: HTMLElement) => HTMLElement>,
+  },
+  prefixCls: String,
+  getPrefixCls: {
+    type: Function as PropType<(suffixCls?: string, customizePrefixCls?: string) => string>,
+  },
+  renderEmpty: {
+    type: Function as PropType<RenderEmptyHandler>,
+  },
+  transformCellText: {
+    type: Function as PropType<(tableProps: TransformCellTextProps) => any>,
+  },
+  csp: {
+    type: Object as PropType<CSPConfig>,
+  },
+  autoInsertSpaceInButton: PropTypes.looseBool,
+  locale: {
+    type: Object as PropType<Locale>,
+  },
+  pageHeader: {
+    type: Object as PropType<{ ghost: boolean }>,
+  },
+  componentSize: {
+    type: Object as PropType<SizeType>,
+  },
+  direction: {
+    type: String as PropType<'ltr' | 'rtl'>,
+  },
+  space: {
+    type: [String, Number] as PropType<SizeType | number>,
+  },
+  virtual: PropTypes.looseBool,
+  dropdownMatchSelectWidth: PropTypes.looseBool,
+};
+
+export type ConfigProviderProps = ExtractPropTypes<typeof configProviderProps>;

 const ConfigProvider = defineComponent({
  name: 'AConfigProvider',
-  props: {
-    getTargetContainer: {
-      type: Function as PropType<() => HTMLElement>,
-    },
-    getPopupContainer: {
-      type: Function as PropType<(triggerNode: HTMLElement) => HTMLElement>,
-    },
-    prefixCls: String,
-    getPrefixCls: {
-      type: Function as PropType<(suffixCls?: string, customizePrefixCls?: string) => string>,
-    },
-    renderEmpty: {
-      type: Function as PropType<RenderEmptyHandler>,
-    },
-    transformCellText: {
-      type: Function as PropType<(tableProps: TransformCellTextProps) => any>,
-    },
-    csp: {
-      type: Object as PropType<CSPConfig>,
-    },
-    autoInsertSpaceInButton: PropTypes.looseBool,
-    locale: {
-      type: Object as PropType<Locale>,
-    },
-    pageHeader: {
-      type: Object as PropType<{ ghost: boolean }>,
-    },
-    componentSize: {
-      type: Object as PropType<SizeType>,
-    },
-    direction: {
-      type: String as PropType<'ltr' | 'rtl'>,
-    },
-    space: {
-      type: [String, Number] as PropType<SizeType | number>,
-    },
-    virtual: PropTypes.looseBool,
-    dropdownMatchSelectWidth: PropTypes.looseBool,
-  },
+  props: configProviderProps,
  setup(props, { slots }) {
    const getPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
      const { prefixCls = 'ant' } = props;
@ -166,12 +121,13 @@ const ConfigProvider = defineComponent({
  },
 });

-export const defaultConfigProvider: ConfigConsumerProps = {
+export const defaultConfigProvider: ConfigProviderProps = {
  getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => {
    if (customizePrefixCls) return customizePrefixCls;
    return `ant-${suffixCls}`;
  },
  renderEmpty: defaultRenderEmpty,
+  direction: 'ltr',
 };

 export default withInstall(ConfigProvider);
--- a/components/divider/index.tsx
+++ b/components/divider/index.tsx
@ -1,46 +1,67 @@
 import { flattenChildren } from '../_util/props-util';
-import { computed, defineComponent, inject, PropType } from 'vue';
+import { computed, defineComponent, ExtractPropTypes, inject, PropType } from 'vue';
 import { defaultConfigProvider } from '../config-provider';
 import { withInstall } from '../_util/type';

+export const dividerProps = {
+  prefixCls: String,
+  type: {
+    type: String as PropType<'horizontal' | 'vertical' | ''>,
+    default: 'horizontal',
+  },
+  dashed: {
+    type: Boolean,
+    default: false,
+  },
+  orientation: {
+    type: String as PropType<'left' | 'right' | 'center'>,
+    default: 'center',
+  },
+  plain: {
+    type: Boolean,
+    default: false,
+  },
+};
+export type DividerProps = ExtractPropTypes<typeof dividerProps>;
+
 const Divider = defineComponent({
  name: 'ADivider',
-  props: {
-    prefixCls: String,
-    type: {
-      type: String as PropType<'horizontal' | 'vertical' | ''>,
-      default: 'horizontal',
-    },
-    dashed: {
-      type: Boolean,
-      default: false,
-    },
-    orientation: {
-      type: String as PropType<'left' | 'right' | 'center'>,
-      default: 'center',
-    },
-  },
+  props: dividerProps,
  setup(props, { slots }) {
-    const { getPrefixCls } = inject('configProvider', defaultConfigProvider);
-    const prefixCls = computed(() => getPrefixCls('divider', props.prefixCls));
+    const configProvider = inject('configProvider', defaultConfigProvider);
+    const prefixClsRef = computed(() => configProvider.getPrefixCls('divider', props.prefixCls));

    const classString = computed(() => {
-      const { type, dashed, orientation } = props;
-      const orientationPrefix = orientation.length > 0 ? '-' + orientation : orientation;
-      const prefixClsRef = prefixCls.value;
+      const { type, dashed, plain } = props;
+      const prefixCls = prefixClsRef.value;
      return {
-        [prefixClsRef]: true,
-        [`${prefixClsRef}-${type}`]: true,
-        [`${prefixClsRef}-with-text${orientationPrefix}`]: slots.default,
-        [`${prefixClsRef}-dashed`]: !!dashed,
+        [prefixCls]: true,
+        [`${prefixCls}-${type}`]: true,
+        [`${prefixCls}-dashed`]: !!dashed,
+        [`${prefixCls}-plain`]: !!plain,
+        [`${prefixCls}-rtl`]: configProvider.direction === 'rtl',
      };
    });

+    const orientationPrefix = computed(() =>
+      props.orientation.length > 0 ? '-' + props.orientation : props.orientation,
+    );
+
    return () => {
      const children = flattenChildren(slots.default?.());
      return (
-        <div class={classString.value} role="separator">
-          {children.length ? <span class={`${prefixCls.value}-inner-text`}>{children}</span> : null}
+        <div
+          class={[
+            classString.value,
+            children.length
+              ? `${prefixClsRef.value}-with-text ${prefixClsRef.value}-with-text${orientationPrefix.value}`
+              : '',
+          ]}
+          role="separator"
+        >
+          {children.length ? (
+            <span class={`${prefixClsRef.value}-inner-text`}>{children}</span>
+          ) : null}
        </div>
      );
    };
--- a/components/divider/style/index.less
+++ b/components/divider/style/index.less
@ -6,59 +6,52 @@
 .@{divider-prefix-cls} {
  .reset-component();

-  background: @border-color-split;
+  border-top: @border-width-base solid @divider-color;

-  &,  /* for compatiable */
  &-vertical {
    position: relative;
    top: -0.06em;
    display: inline-block;
-    width: 1px;
    height: 0.9em;
    margin: 0 8px;
    vertical-align: middle;
+    border-top: 0;
+    border-left: @border-width-base solid @divider-color;
  }

  &-horizontal {
-    display: block;
+    display: flex;
    clear: both;
    width: 100%;
    min-width: 100%; // Fix https://github.com/ant-design/ant-design/issues/10914
-    height: 1px;
    margin: 24px 0;
  }

-  &-horizontal&-with-text-center,
-  &-horizontal&-with-text-left,
-  &-horizontal&-with-text-right {
-    display: table;
+  &-horizontal&-with-text {
+    display: flex;
    margin: 16px 0;
    color: @heading-color;
    font-weight: 500;
    font-size: @font-size-lg;
    white-space: nowrap;
    text-align: center;
-    background: transparent;
+    border-top: 0;
+    border-top-color: @divider-color;
+
    &::before,
    &::after {
      position: relative;
      top: 50%;
-      display: table-cell;
      width: 50%;
-      border-top: 1px solid @border-color-split;
+      border-top: @border-width-base solid transparent;
+      // Chrome not accept `inherit` in `border-top`
+      border-top-color: inherit;
+      border-bottom: 0;
      transform: translateY(50%);
      content: '';
    }
  }

-  &-horizontal&-with-text-left,
-  &-horizontal&-with-text-right {
-    .@{divider-prefix-cls}-inner-text {
-      display: inline-block;
-      padding: 0 10px;
-    }
-  }
-
  &-horizontal&-with-text-left {
    &::before {
      top: 50%;
@ -90,12 +83,10 @@
    background: none;
    border-color: @divider-color;
    border-style: dashed;
-    border-width: 1px 0 0;
+    border-width: @border-width-base 0 0;
  }

-  &-horizontal&-with-text-center&-dashed,
-  &-horizontal&-with-text-left&-dashed,
-  &-horizontal&-with-text-right&-dashed {
+  &-horizontal&-with-text&-dashed {
    border-top: 0;
    &::before,
    &::after {
@ -104,6 +95,14 @@
  }

  &-vertical&-dashed {
-    border-width: 0 0 0 1px;
+    border-width: 0 0 0 @border-width-base;
+  }
+
+  &-plain&-with-text {
+    color: @text-color;
+    font-weight: normal;
+    font-size: @font-size-base;
  }
 }
+
+@import './rtl';
--- a/components/divider/style/rtl.less
+++ b/components/divider/style/rtl.less
@ -0,0 +1,36 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@divider-prefix-cls: ~'@{ant-prefix}-divider';
+
+.@{divider-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-horizontal&-with-text-left {
+    &::before {
+      .@{divider-prefix-cls}-rtl& {
+        width: 100% - @divider-orientation-margin;
+      }
+    }
+    &::after {
+      .@{divider-prefix-cls}-rtl& {
+        width: @divider-orientation-margin;
+      }
+    }
+  }
+
+  &-horizontal&-with-text-right {
+    &::before {
+      .@{divider-prefix-cls}-rtl& {
+        width: @divider-orientation-margin;
+      }
+    }
+    &::after {
+      .@{divider-prefix-cls}-rtl& {
+        width: 100% - @divider-orientation-margin;
+      }
+    }
+  }
+}
--- a/2
+++ b/2
@ -1 +1 @@
-Subproject commit 4da56dac85f43ad7a288951cbf09d860ecf93bb4
+Subproject commit 4f1ece5073f736e79c6eb22527a9a83e8c6182b3