tntd 2.7.28 → 2.7.29

package/es/grid/row.js

@@ -0,0 +1,154 @@
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import classNames from 'classnames';
+import * as React from 'react';
+import { ConfigContext } from '../_util/context';
+import useFlexGapSupport from '../_util/hooks/useFlexGapSupport';
+import ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve';
+import { tuple } from '../_util/type';
+import RowContext from './RowContext';
+const RowAligns = tuple('top', 'middle', 'bottom', 'stretch');
+const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between', 'space-evenly');
+function useMergePropByScreen(oriProp, screen) {
+  const [prop, setProp] = React.useState(typeof oriProp === 'string' ? oriProp : '');
+  const clacMergeAlignOrJustify = () => {
+    if (typeof oriProp === 'string') {
+      setProp(oriProp);
+    }
+    if (typeof oriProp !== 'object') {
+      return;
+    }
+    for (let i = 0; i < responsiveArray.length; i++) {
+      const breakpoint = responsiveArray[i];
+      // if do not match, do nothing
+      if (!screen[breakpoint]) continue;
+      const curVal = oriProp[breakpoint];
+      if (curVal !== undefined) {
+        setProp(curVal);
+        return;
+      }
+    }
+  };
+  React.useEffect(() => {
+    clacMergeAlignOrJustify();
+  }, [JSON.stringify(oriProp), screen]);
+  return prop;
+}
+const Row = React.forwardRef((props, ref) => {
+  const {
+      prefixCls: customizePrefixCls = 'tnt-row',
+      justify,
+      align,
+      className,
+      style,
+      children,
+      gutter = 0,
+      wrap
+    } = props,
+    others = __rest(props, ["prefixCls", "justify", "align", "className", "style", "children", "gutter", "wrap"]);
+  const {
+    getPrefixCls,
+    direction
+  } = React.useContext(ConfigContext);
+  const [screens, setScreens] = React.useState({
+    xs: true,
+    sm: true,
+    md: true,
+    lg: true,
+    xl: true,
+    xxl: true
+  });
+  // to save screens info when responsiveObserve callback had been call
+  const [curScreens, setCurScreens] = React.useState({
+    xs: false,
+    sm: false,
+    md: false,
+    lg: false,
+    xl: false,
+    xxl: false
+  });
+  // ================================== calc reponsive data ==================================
+  const mergeAlign = useMergePropByScreen(align, curScreens);
+  const mergeJustify = useMergePropByScreen(justify, curScreens);
+  const supportFlexGap = useFlexGapSupport();
+  const gutterRef = React.useRef(gutter);
+  // ================================== Effect ==================================
+  React.useEffect(() => {
+    const token = ResponsiveObserve.subscribe(screen => {
+      setCurScreens(screen);
+      const currentGutter = gutterRef.current || 0;
+      if (!Array.isArray(currentGutter) && typeof currentGutter === 'object' || Array.isArray(currentGutter) && (typeof currentGutter[0] === 'object' || typeof currentGutter[1] === 'object')) {
+        setScreens(screen);
+      }
+    });
+    return () => ResponsiveObserve.unsubscribe(token);
+  }, []);
+  // ================================== Render ==================================
+  const getGutter = () => {
+    const results = [undefined, undefined];
+    const normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, undefined];
+    normalizedGutter.forEach((g, index) => {
+      if (typeof g === 'object') {
+        for (let i = 0; i < responsiveArray.length; i++) {
+          const breakpoint = responsiveArray[i];
+          if (screens[breakpoint] && g[breakpoint] !== undefined) {
+            results[index] = g[breakpoint];
+            break;
+          }
+        }
+      } else {
+        results[index] = g;
+      }
+    });
+    return results;
+  };
+  const prefixCls = getPrefixCls('row', customizePrefixCls);
+  const gutters = getGutter();
+  const classes = classNames(prefixCls, {
+    [`${prefixCls}-no-wrap`]: wrap === false,
+    [`${prefixCls}-${mergeJustify}`]: mergeJustify,
+    [`${prefixCls}-${mergeAlign}`]: mergeAlign,
+    [`${prefixCls}-rtl`]: direction === 'rtl'
+  }, className);
+  // Add gutter related style
+  const rowStyle = {};
+  const horizontalGutter = gutters[0] != null && gutters[0] > 0 ? gutters[0] / -2 : undefined;
+  const verticalGutter = gutters[1] != null && gutters[1] > 0 ? gutters[1] / -2 : undefined;
+  if (horizontalGutter) {
+    rowStyle.marginLeft = horizontalGutter;
+    rowStyle.marginRight = horizontalGutter;
+  }
+  if (supportFlexGap) {
+    // Set gap direct if flex gap support
+    ;
+    [, rowStyle.rowGap] = gutters;
+  } else if (verticalGutter) {
+    rowStyle.marginTop = verticalGutter;
+    rowStyle.marginBottom = verticalGutter;
+  }
+  // "gutters" is a new array in each rendering phase, it'll make 'React.useMemo' effectless.
+  // So we deconstruct "gutters" variable here.
+  const [gutterH, gutterV] = gutters;
+  const rowContext = React.useMemo(() => ({
+    gutter: [gutterH, gutterV],
+    wrap,
+    supportFlexGap
+  }), [gutterH, gutterV, wrap, supportFlexGap]);
+  return React.createElement(RowContext.Provider, {
+    value: rowContext
+  }, React.createElement("div", Object.assign({}, others, {
+    className: classes,
+    style: Object.assign(Object.assign({}, rowStyle), style),
+    ref: ref
+  }), children));
+});
+if (process.env.NODE_ENV !== 'production') {
+  Row.displayName = 'Row';
+}
+export default Row;

package/es/grid/row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.js","sourceRoot":"","sources":["../../src/grid/row.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport * as React from 'react'\nimport { ConfigContext } from '../_util/context'\nimport useFlexGapSupport from '../_util/hooks/useFlexGapSupport'\nimport type { Breakpoint, ScreenMap } from '../_util/responsiveObserve'\nimport ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve'\nimport { tuple } from '../_util/type'\nimport RowContext from './RowContext'\n\nconst RowAligns = tuple('top', 'middle', 'bottom', 'stretch')\nconst RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between', 'space-evenly')\n\ntype Responsive = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'\ntype ResponsiveLike<T> = {\n  [key in Responsive]?: T\n}\n\ntype Gap = number | undefined\nexport type Gutter = number | undefined | Partial<Record<Breakpoint, number>>\n\ntype ResponsiveAligns = ResponsiveLike<typeof RowAligns[number]>\ntype ResponsiveJustify = ResponsiveLike<typeof RowJustify[number]>\nexport interface RowProps extends React.HTMLAttributes<HTMLDivElement> {\n  gutter?: Gutter | [Gutter, Gutter]\n  align?: typeof RowAligns[number] | ResponsiveAligns\n  justify?: typeof RowJustify[number] | ResponsiveJustify\n  prefixCls?: string\n  wrap?: boolean\n}\n\nfunction useMergePropByScreen(oriProp: RowProps['align'] | RowProps['justify'], screen: ScreenMap) {\n  const [prop, setProp] = React.useState(typeof oriProp === 'string' ? oriProp : '')\n\n  const clacMergeAlignOrJustify = () => {\n    if (typeof oriProp === 'string') {\n      setProp(oriProp)\n    }\n    if (typeof oriProp !== 'object') {\n      return\n    }\n    for (let i = 0; i < responsiveArray.length; i++) {\n      const breakpoint: Breakpoint = responsiveArray[i]\n      // if do not match, do nothing\n      if (!screen[breakpoint]) continue\n      const curVal = oriProp[breakpoint]\n      if (curVal !== undefined) {\n        setProp(curVal)\n        return\n      }\n    }\n  }\n\n  React.useEffect(() => {\n    clacMergeAlignOrJustify()\n  }, [JSON.stringify(oriProp), screen])\n\n  return prop\n}\n\nconst Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {\n  const {\n    prefixCls: customizePrefixCls = 'tnt-row',\n    justify,\n    align,\n    className,\n    style,\n    children,\n    gutter = 0,\n    wrap,\n    ...others\n  } = props\n\n  const { getPrefixCls, direction } = React.useContext(ConfigContext)\n\n  const [screens, setScreens] = React.useState<ScreenMap>({\n    xs: true,\n    sm: true,\n    md: true,\n    lg: true,\n    xl: true,\n    xxl: true,\n  })\n  // to save screens info when responsiveObserve callback had been call\n  const [curScreens, setCurScreens] = React.useState<ScreenMap>({\n    xs: false,\n    sm: false,\n    md: false,\n    lg: false,\n    xl: false,\n    xxl: false,\n  })\n\n  // ================================== calc reponsive data ==================================\n  const mergeAlign = useMergePropByScreen(align, curScreens)\n\n  const mergeJustify = useMergePropByScreen(justify, curScreens)\n\n  const supportFlexGap = useFlexGapSupport()\n\n  const gutterRef = React.useRef<Gutter | [Gutter, Gutter]>(gutter)\n\n  // ================================== Effect ==================================\n  React.useEffect(() => {\n    const token = ResponsiveObserve.subscribe((screen) => {\n      setCurScreens(screen)\n      const currentGutter = gutterRef.current || 0\n      if (\n        (!Array.isArray(currentGutter) && typeof currentGutter === 'object') ||\n        (Array.isArray(currentGutter) &&\n          (typeof currentGutter[0] === 'object' || typeof currentGutter[1] === 'object'))\n      ) {\n        setScreens(screen)\n      }\n    })\n    return () => ResponsiveObserve.unsubscribe(token)\n  }, [])\n\n  // ================================== Render ==================================\n  const getGutter = (): [Gap, Gap] => {\n    const results: [Gap, Gap] = [undefined, undefined]\n    const normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, undefined]\n    normalizedGutter.forEach((g, index) => {\n      if (typeof g === 'object') {\n        for (let i = 0; i < responsiveArray.length; i++) {\n          const breakpoint: Breakpoint = responsiveArray[i]\n          if (screens[breakpoint] && g[breakpoint] !== undefined) {\n            results[index] = g[breakpoint] as number\n            break\n          }\n        }\n      } else {\n        results[index] = g\n      }\n    })\n    return results\n  }\n\n  const prefixCls = getPrefixCls('row', customizePrefixCls)\n  const gutters = getGutter()\n  const classes = classNames(\n    prefixCls,\n    {\n      [`${prefixCls}-no-wrap`]: wrap === false,\n      [`${prefixCls}-${mergeJustify}`]: mergeJustify,\n      [`${prefixCls}-${mergeAlign}`]: mergeAlign,\n      [`${prefixCls}-rtl`]: direction === 'rtl',\n    },\n    className\n  )\n\n  // Add gutter related style\n  const rowStyle: React.CSSProperties = {}\n  const horizontalGutter = gutters[0] != null && gutters[0] > 0 ? gutters[0] / -2 : undefined\n  const verticalGutter = gutters[1] != null && gutters[1] > 0 ? gutters[1] / -2 : undefined\n\n  if (horizontalGutter) {\n    rowStyle.marginLeft = horizontalGutter\n    rowStyle.marginRight = horizontalGutter\n  }\n\n  if (supportFlexGap) {\n    // Set gap direct if flex gap support\n    ;[, rowStyle.rowGap] = gutters\n  } else if (verticalGutter) {\n    rowStyle.marginTop = verticalGutter\n    rowStyle.marginBottom = verticalGutter\n  }\n\n  // \"gutters\" is a new array in each rendering phase, it'll make 'React.useMemo' effectless.\n  // So we deconstruct \"gutters\" variable here.\n  const [gutterH, gutterV] = gutters\n  const rowContext = React.useMemo(\n    () => ({ gutter: [gutterH, gutterV] as [number, number], wrap, supportFlexGap }),\n    [gutterH, gutterV, wrap, supportFlexGap]\n  )\n\n  return (\n    <RowContext.Provider value={rowContext}>\n      <div {...others} className={classes} style={{ ...rowStyle, ...style }} ref={ref}>\n        {children}\n      </div>\n    </RowContext.Provider>\n  )\n})\n\nif (process.env.NODE_ENV !== 'production') {\n  Row.displayName = 'Row'\n}\n\nexport default Row\n"]}

package/es/grid/style/index.js

@@ -0,0 +1,2 @@
+// import '../../style/index.less';
+import './index.less';

package/es/grid/style/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/grid/style/index.tsx"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,OAAO,cAAc,CAAA","sourcesContent":["// import '../../style/index.less';\nimport './index.less'\n"]}

package/es/grid/style/index.less

@@ -0,0 +1,124 @@
+// @import '../../style/themes/index';
+// @import '../../style/mixins/index';
+@import './mixin';
+
+// Grid system
+.@{row-prefix-cls} {
+  display: flex;
+  flex-flow: row wrap;
+  min-width: 0;
+
+  &::before,
+  &::after {
+    display: flex;
+  }
+
+  // No wrap of flex
+  &-no-wrap {
+    flex-wrap: nowrap;
+  }
+}
+
+// x轴原点
+.@{row-prefix-cls}-start {
+  justify-content: flex-start;
+}
+
+// x轴居中
+.@{row-prefix-cls}-center {
+  justify-content: center;
+}
+
+// x轴反方向
+.@{row-prefix-cls}-end {
+  justify-content: flex-end;
+}
+
+// x轴平分
+.@{row-prefix-cls}-space-between {
+  justify-content: space-between;
+}
+
+// x轴有间隔地平分
+.@{row-prefix-cls}-space-around {
+  justify-content: space-around;
+}
+
+// x轴有间隔地均分
+.@{row-prefix-cls}-space-evenly {
+  justify-content: space-evenly;
+}
+
+// 顶部对齐
+.@{row-prefix-cls}-top {
+  align-items: flex-start;
+}
+
+// 居中对齐
+.@{row-prefix-cls}-middle {
+  align-items: center;
+}
+
+// 底部对齐
+.@{row-prefix-cls}-bottom {
+  align-items: flex-end;
+}
+
+.@{col-prefix-cls} {
+  position: relative;
+  max-width: 100%;
+  // Prevent columns from collapsing when empty
+  min-height: 1px;
+}
+
+.make-grid();
+
+// Extra small grid
+//
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
+
+.make-grid(-xs);
+
+// Small grid
+//
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
+
+@media (min-width: @screen-sm-min) {
+  .make-grid(-sm);
+}
+
+// Medium grid
+//
+// Columns, offsets, pushes, and pulls for the desktop device range.
+
+@media (min-width: @screen-md-min) {
+  .make-grid(-md);
+}
+
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@media (min-width: @screen-lg-min) {
+  .make-grid(-lg);
+}
+
+// Extra Large grid
+//
+// Columns, offsets, pushes, and pulls for the full hd device range.
+
+@media (min-width: @screen-xl-min) {
+  .make-grid(-xl);
+}
+
+// Extra Extra Large grid
+//
+// Columns, offsets, pushes, and pulls for the full hd device range.
+
+@media (min-width: @screen-xxl-min) {
+  .make-grid(-xxl);
+}
+
+@import './rtl';

package/es/grid/style/mixin.less

@@ -0,0 +1,57 @@
+// @import '../../style/mixins/index';
+@tnt-prefix: tnt;
+
+@row-prefix-cls: ~'@{tnt-prefix}-row';
+@col-prefix-cls: ~'@{tnt-prefix}-col';
+
+// mixins for grid system
+// ------------------------
+
+.loop-grid-columns(@index, @class) when (@index > 0) {
+  .@{col-prefix-cls}@{class}-@{index} {
+    display: block;
+    flex: 0 0 percentage((@index / @grid-columns));
+    max-width: percentage((@index / @grid-columns));
+  }
+  .@{col-prefix-cls}@{class}-push-@{index} {
+    left: percentage((@index / @grid-columns));
+  }
+  .@{col-prefix-cls}@{class}-pull-@{index} {
+    right: percentage((@index / @grid-columns));
+  }
+  .@{col-prefix-cls}@{class}-offset-@{index} {
+    margin-left: percentage((@index / @grid-columns));
+  }
+  .@{col-prefix-cls}@{class}-order-@{index} {
+    order: @index;
+  }
+  .loop-grid-columns((@index - 1), @class);
+}
+
+.loop-grid-columns(@index, @class) when (@index = 0) {
+  .@{col-prefix-cls}@{class}-@{index} {
+    display: none;
+  }
+  .@{col-prefix-cls}-push-@{index} {
+    left: auto;
+  }
+  .@{col-prefix-cls}-pull-@{index} {
+    right: auto;
+  }
+  .@{col-prefix-cls}@{class}-push-@{index} {
+    left: auto;
+  }
+  .@{col-prefix-cls}@{class}-pull-@{index} {
+    right: auto;
+  }
+  .@{col-prefix-cls}@{class}-offset-@{index} {
+    margin-left: 0;
+  }
+  .@{col-prefix-cls}@{class}-order-@{index} {
+    order: 0;
+  }
+}
+
+.make-grid(@class: ~'') {
+  .loop-grid-columns(@grid-columns, @class);
+}

package/es/grid/style/rtl.less

@@ -0,0 +1,69 @@
+// @import '../../style/themes/index';
+// @import '../../style/mixins/index';
+@import './mixin';
+
+.@{row-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+}
+
+// mixin
+.loop-grid-columns(@index, @class) when (@index > 0) {
+  .@{col-prefix-cls}@{class}-push-@{index} {
+    // reset property in RTL direction
+    &.@{col-prefix-cls}-rtl {
+      right: percentage((@index / @grid-columns));
+      left: auto;
+    }
+  }
+
+  .@{col-prefix-cls}@{class}-pull-@{index} {
+    // reset property in RTL direction
+    &.@{col-prefix-cls}-rtl {
+      right: auto;
+      left: percentage((@index / @grid-columns));
+    }
+  }
+
+  .@{col-prefix-cls}@{class}-offset-@{index} {
+    // reset property in RTL direction
+    &.@{col-prefix-cls}-rtl {
+      margin-right: percentage((@index / @grid-columns));
+      margin-left: 0;
+    }
+  }
+}
+
+.loop-grid-columns(@index, @class) when (@index = 0) {
+  .@{col-prefix-cls}-push-@{index} {
+    // reset property in RTL direction
+    &.@{col-prefix-cls}-rtl {
+      right: auto;
+    }
+  }
+
+  .@{col-prefix-cls}-pull-@{index} {
+    &.@{col-prefix-cls}-rtl {
+      left: auto;
+    }
+  }
+
+  .@{col-prefix-cls}@{class}-push-@{index} {
+    &.@{col-prefix-cls}-rtl {
+      right: auto;
+    }
+  }
+
+  .@{col-prefix-cls}@{class}-pull-@{index} {
+    &.@{col-prefix-cls}-rtl {
+      left: auto;
+    }
+  }
+
+  .@{col-prefix-cls}@{class}-offset-@{index} {
+    &.@{col-prefix-cls}-rtl {
+      margin-right: 0;
+    }
+  }
+}