linkmore-design 1.1.21 → 1.1.22-beta.1

package/lib/LmTable/components/DndContainer.module.css

@@ -0,0 +1,6 @@
+.dnd_table_container > div {
+  border: none !important;
+}
+.dnd_table_container ul {
+  padding: 0 !important;
+}

package/lib/LmTable/components/HeaderCol.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = HeaderCellContent;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _sortable = require("@dnd-kit/sortable");
+
+var _utilities = require("@dnd-kit/utilities");
+
+function HeaderCellContent(props) {
+  var column = props.column;
+  var _column$moveDisabled = column.moveDisabled,
+      moveDisabled = _column$moveDisabled === void 0 ? false : _column$moveDisabled,
+      _column$title = column.title,
+      title = _column$title === void 0 ? '' : _column$title;
+
+  var _useSortable = (0, _sortable.useSortable)({
+    id: title
+  }),
+      attributes = _useSortable.attributes,
+      listeners = _useSortable.listeners,
+      setNodeRef = _useSortable.setNodeRef,
+      transform = _useSortable.transform,
+      transition = _useSortable.transition;
+
+  var style = {
+    position: 'relative',
+    transform: _utilities.CSS.Translate.toString(transform),
+    transition: transition,
+    padding: '1px',
+    touchAction: 'none',
+    cursor: moveDisabled ? 'not-allowed' : 'move'
+  };
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: moveDisabled ? undefined : setNodeRef,
+    style: style
+  }, attributes, listeners), title);
+}

package/lib/LmTable/components/Item/Item.css

@@ -0,0 +1,113 @@
+@keyframes pop {
+  0% {
+    transform: scale(1);
+    box-shadow: var(--box-shadow);
+  }
+  100% {
+    transform: scale(var(--scale));
+    box-shadow: var(--box-shadow-picked-up);
+  }
+}
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.dnd_com_item_Wrapper {
+  display: flex;
+  box-sizing: border-box;
+  transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
+  transform-origin: 0 0;
+  touch-action: manipulation;
+  margin-right: 6px;
+  margin-bottom: 6px;
+}
+.dnd_com_item_Wrapper.fadeIn {
+  animation: fadeIn 500ms ease;
+}
+.dnd_com_item_Wrapper.dragOverlay {
+  --scale: 1.05;
+  --box-shadow: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05), 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
+  --box-shadow-picked-up: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05),
+      -1px 0 15px 0 rgba(1, 1, 1, 0.01),
+      0px 15px 15px 0 rgba(34, 33, 81, 0.25);
+  z-index: 999;
+}
+.dnd_com_Item {
+  position: relative;
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  padding: 6px;
+  background-color: #fff;
+  box-shadow: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05), 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
+  outline: none;
+  border-radius: calc(4px / var(--scale-x, 1));
+  box-sizing: border-box;
+  list-style: none;
+  transform-origin: 50% 50%;
+  -webkit-tap-highlight-color: transparent;
+  color: #333;
+  font-weight: 400;
+  font-size: 12px;
+  white-space: nowrap;
+  transform: scale(var(--scale, 1));
+  transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
+}
+.dnd_com_Item:focus-visible {
+  box-shadow: 0 0px 4px 1px #4c9ffe, 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05), 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
+}
+.dnd_com_Item:not(.withHandle) {
+  touch-action: manipulation;
+  cursor: grab;
+}
+.dnd_com_Item.dragging:not(.dragOverlay) {
+  opacity: var(--dragging-opacity, 0.5);
+  z-index: 0;
+}
+.dnd_com_Item.dragging:not(.dragOverlay):focus {
+  box-shadow: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05), 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
+}
+.dnd_com_Item.disabled {
+  color: #999;
+  background-color: #f1f1f1;
+  cursor: not-allowed;
+}
+.dnd_com_Item.disabled:focus {
+  box-shadow: 0 0px 4px 1px rgba(0, 0, 0, 0.1), 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05), 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
+}
+.dnd_com_Item.dragOverlay {
+  cursor: inherit;
+  /* box-shadow: 0 0px 6px 2px @focused-outline-color; */
+  animation: pop 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
+  transform: scale(var(--scale));
+  box-shadow: var(--box-shadow-picked-up);
+  opacity: 1;
+}
+.dnd_com_Item.color:before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0;
+  height: 100%;
+  width: 3px;
+  display: block;
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+  background-color: var(--color);
+}
+.dnd_com_Item:hover .dnd_com_Remove {
+  visibility: visible;
+}
+.dnd_com_Remove {
+  margin-left: 6px;
+  color: #666;
+}
+.dnd_com_Actions {
+  display: flex;
+  align-items: center;
+}

package/lib/LmTable/components/Item/Item.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { DraggableSyntheticListeners } from '@dnd-kit/core';
+import type { Transform } from '@dnd-kit/utilities';
+import './Item.less';
+export interface Props {
+    dragOverlay?: boolean;
+    color?: string;
+    disabled?: boolean;
+    dragging?: boolean;
+    handle?: boolean;
+    handleProps?: any;
+    height?: number;
+    index?: number;
+    fadeIn?: boolean;
+    transform?: Transform | null;
+    listeners?: DraggableSyntheticListeners;
+    sorting?: boolean;
+    style?: React.CSSProperties;
+    transition?: string | null;
+    wrapperStyle?: React.CSSProperties;
+    value: React.ReactNode;
+    onRemove?: () => void;
+    renderItem?: (args: {
+        dragOverlay: boolean;
+        dragging: boolean;
+        sorting: boolean;
+        index: number | undefined;
+        fadeIn: boolean;
+        listeners: DraggableSyntheticListeners;
+        ref: React.Ref<HTMLElement>;
+        style: React.CSSProperties | undefined;
+        transform: Props['transform'];
+        transition: Props['transition'];
+        value: Props['value'];
+    }) => React.ReactElement;
+}
+export declare const Item: React.MemoExoticComponent<React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>>;

package/lib/LmTable/components/Item/Item.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Item = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _components = require("./components");
+
+require("./Item.css");
+
+var __rest = void 0 && (void 0).__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;
+};
+
+var Item = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function (_a, ref) {
+  var color = _a.color,
+      dragOverlay = _a.dragOverlay,
+      dragging = _a.dragging,
+      disabled = _a.disabled,
+      fadeIn = _a.fadeIn,
+      handle = _a.handle,
+      handleProps = _a.handleProps,
+      height = _a.height,
+      index = _a.index,
+      listeners = _a.listeners,
+      onRemove = _a.onRemove,
+      renderItem = _a.renderItem,
+      sorting = _a.sorting,
+      style = _a.style,
+      transition = _a.transition,
+      transform = _a.transform,
+      value = _a.value,
+      wrapperStyle = _a.wrapperStyle,
+      props = __rest(_a, ["color", "dragOverlay", "dragging", "disabled", "fadeIn", "handle", "handleProps", "height", "index", "listeners", "onRemove", "renderItem", "sorting", "style", "transition", "transform", "value", "wrapperStyle"]);
+
+  (0, _react.useEffect)(function () {
+    if (!dragOverlay) {
+      return undefined;
+    }
+
+    document.body.style.cursor = 'grabbing';
+    return function () {
+      document.body.style.cursor = '';
+    };
+  }, [dragOverlay]);
+  return renderItem ? renderItem({
+    dragOverlay: Boolean(dragOverlay),
+    dragging: Boolean(dragging),
+    sorting: Boolean(sorting),
+    index: index,
+    fadeIn: Boolean(fadeIn),
+    listeners: listeners,
+    ref: ref,
+    style: style,
+    transform: transform,
+    transition: transition,
+    value: value
+  }) : /*#__PURE__*/_react.default.createElement("li", {
+    className: (0, _classnames.default)('dnd_com_item_Wrapper', fadeIn && 'fadeIn', sorting && 'sorting', dragOverlay && 'dragOverlay'),
+    style: Object.assign(Object.assign({}, wrapperStyle), {
+      transition: [transition, wrapperStyle === null || wrapperStyle === void 0 ? void 0 : wrapperStyle.transition].filter(Boolean).join(', '),
+      // @ts-ignore
+      '--translate-x': transform ? "".concat(Math.round(transform.x), "px") : undefined,
+      '--translate-y': transform ? "".concat(Math.round(transform.y), "px") : undefined,
+      '--scale-x': (transform === null || transform === void 0 ? void 0 : transform.scaleX) ? "".concat(transform.scaleX) : undefined,
+      '--scale-y': (transform === null || transform === void 0 ? void 0 : transform.scaleY) ? "".concat(transform.scaleY) : undefined,
+      '--index': index,
+      '--color': color
+    }),
+    ref: ref
+  }, /*#__PURE__*/_react.default.createElement("div", Object.assign({
+    className: (0, _classnames.default)('dnd_com_Item', dragging && 'dragging', handle && 'withHandle', dragOverlay && 'dragOverlay', disabled && 'disabled', color && 'color'),
+    style: style,
+    "data-cypress": "draggable-item"
+  }, !handle ? listeners : undefined, props, {
+    tabIndex: !handle ? 0 : undefined
+  }), /*#__PURE__*/_react.default.createElement("div", null, value), /*#__PURE__*/_react.default.createElement("span", {
+    className: "dnd_com_Actions"
+  }, onRemove ? /*#__PURE__*/_react.default.createElement(_components.Remove, {
+    className: "dnd_com_Remove",
+    onClick: onRemove
+  }) : // <IconFont className={styles.Remove} type="lmweb-close-circle-fill" onClick={onRemove} />
+  null, handle ? /*#__PURE__*/_react.default.createElement(_components.Handle, Object.assign({}, handleProps, listeners)) : null)));
+}));
+
+exports.Item = Item;

package/lib/LmTable/components/Item/components/Action/Action.css

@@ -0,0 +1,41 @@
+.dnd_item_actions {
+  display: flex;
+  width: 12px;
+  margin-left: 6px;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  touch-action: none;
+  cursor: var(--cursor, pointer);
+  border-radius: 5px;
+  border: none;
+  outline: none;
+  appearance: none;
+  background-color: transparent;
+  -webkit-tap-highlight-color: transparent;
+}
+@media (hover: hover) {
+  .dnd_item_actions:hover {
+    background-color: var(--action-background, rgba(0, 0, 0, 0.05));
+  }
+  .dnd_item_actions:hover svg {
+    fill: #6f7b88;
+  }
+}
+.dnd_item_actions svg {
+  flex: 0 0 auto;
+  margin: auto;
+  height: 100%;
+  overflow: visible;
+  fill: #919eab;
+}
+.dnd_item_actions:active {
+  background-color: var(--background, rgba(0, 0, 0, 0.05));
+}
+.dnd_item_actions:active svg {
+  fill: var(--fill, #788491);
+}
+.dnd_item_actions:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0), 0 0px 0px 2px #4c9ffe;
+}

package/lib/LmTable/components/Item/components/Action/Action.d.ts

@@ -0,0 +1,10 @@
+import React, { CSSProperties } from 'react';
+import './Action.less';
+export interface Props extends React.HTMLAttributes<HTMLButtonElement> {
+    active?: {
+        fill: string;
+        background: string;
+    };
+    cursor?: CSSProperties['cursor'];
+}
+export declare const Action: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;

package/lib/LmTable/components/Item/components/Action/Action.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Action = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+require("./Action.css");
+
+var __rest = void 0 && (void 0).__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;
+};
+
+var Action = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
+  var active = _a.active,
+      className = _a.className,
+      cursor = _a.cursor,
+      style = _a.style,
+      props = __rest(_a, ["active", "className", "cursor", "style"]);
+
+  return /*#__PURE__*/_react.default.createElement("button", Object.assign({
+    ref: ref
+  }, props, {
+    className: (0, _classnames.default)('dnd_item_actions', className),
+    tabIndex: 0,
+    style: Object.assign(Object.assign({}, style), {
+      cursor: cursor,
+      '--fill': active === null || active === void 0 ? void 0 : active.fill,
+      '--background': active === null || active === void 0 ? void 0 : active.background
+    })
+  }));
+});
+exports.Action = Action;

package/lib/LmTable/components/Item/components/Action/index.d.ts

@@ -0,0 +1,2 @@
+export { Action } from './Action';
+export type { Props as ActionProps } from './Action';

package/lib/LmTable/components/Item/components/Action/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Action", {
+  enumerable: true,
+  get: function get() {
+    return _Action.Action;
+  }
+});
+
+var _Action = require("./Action");

package/lib/LmTable/components/Item/components/Handle/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ActionProps } from '../Action';
+declare const Handle: React.ForwardRefExoticComponent<ActionProps & React.RefAttributes<HTMLButtonElement>>;
+export default Handle;

package/lib/LmTable/components/Item/components/Handle/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Action = require("../Action");
+
+var Handle = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(_Action.Action, Object.assign({
+    ref: ref,
+    cursor: "grab",
+    "data-cypress": "draggable-handle"
+  }, props), /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 20 20",
+    width: "12"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+  })));
+});
+var _default = Handle;
+exports.default = _default;

package/lib/LmTable/components/Item/components/Remove/index.d.ts

@@ -0,0 +1,2 @@
+import { ActionProps } from '../Action';
+export default function Remove(props: ActionProps): JSX.Element;

package/lib/LmTable/components/Item/components/Remove/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Remove;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Action = require("../Action");
+
+function Remove(props) {
+  return /*#__PURE__*/_react.default.createElement(_Action.Action, Object.assign({}, props, {
+    active: {
+      fill: 'rgba(255, 70, 70, 0.95)',
+      background: 'rgba(255, 70, 70, 0.1)'
+    }
+  }), /*#__PURE__*/_react.default.createElement("svg", {
+    width: "8",
+    viewBox: "0 0 22 22",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M2.99998 -0.000206962C2.7441 -0.000206962 2.48794 0.0972617 2.29294 0.292762L0.292945 2.29276C-0.0980552 2.68376 -0.0980552 3.31682 0.292945 3.70682L7.58591 10.9998L0.292945 18.2928C-0.0980552 18.6838 -0.0980552 19.3168 0.292945 19.7068L2.29294 21.7068C2.68394 22.0978 3.31701 22.0978 3.70701 21.7068L11 14.4139L18.2929 21.7068C18.6829 22.0978 19.317 22.0978 19.707 21.7068L21.707 19.7068C22.098 19.3158 22.098 18.6828 21.707 18.2928L14.414 10.9998L21.707 3.70682C22.098 3.31682 22.098 2.68276 21.707 2.29276L19.707 0.292762C19.316 -0.0982383 18.6829 -0.0982383 18.2929 0.292762L11 7.58573L3.70701 0.292762C3.51151 0.0972617 3.25585 -0.000206962 2.99998 -0.000206962Z"
+  })));
+}

package/lib/LmTable/components/Item/components/index.d.ts

@@ -0,0 +1,3 @@
+export { Action } from './Action';
+export { default as Handle } from './Handle';
+export { default as Remove } from './Remove';

package/lib/LmTable/components/Item/components/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Action", {
+  enumerable: true,
+  get: function get() {
+    return _Action.Action;
+  }
+});
+Object.defineProperty(exports, "Handle", {
+  enumerable: true,
+  get: function get() {
+    return _Handle.default;
+  }
+});
+Object.defineProperty(exports, "Remove", {
+  enumerable: true,
+  get: function get() {
+    return _Remove.default;
+  }
+});
+
+var _Action = require("./Action");
+
+var _Handle = _interopRequireDefault(require("./Handle"));
+
+var _Remove = _interopRequireDefault(require("./Remove"));

package/lib/LmTable/components/Item/index.d.ts

@@ -0,0 +1,2 @@
+export { Item } from './Item';
+export { Action, Handle, Remove } from './components';

package/lib/LmTable/components/Item/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Action", {
+  enumerable: true,
+  get: function get() {
+    return _components.Action;
+  }
+});
+Object.defineProperty(exports, "Handle", {
+  enumerable: true,
+  get: function get() {
+    return _components.Handle;
+  }
+});
+Object.defineProperty(exports, "Item", {
+  enumerable: true,
+  get: function get() {
+    return _Item.Item;
+  }
+});
+Object.defineProperty(exports, "Remove", {
+  enumerable: true,
+  get: function get() {
+    return _components.Remove;
+  }
+});
+
+var _Item = require("./Item");
+
+var _components = require("./components");

package/lib/LmTable/hooks/useDndItems.d.ts

@@ -0,0 +1,13 @@
+interface IdndItems {
+    row?: string[];
+    col?: string[];
+    tableHeader?: string[];
+}
+declare function useDndItems(props: any): {
+    dndColumns: any;
+    items: IdndItems;
+    groupRowKeys: any[];
+    groupColKeys: any[];
+    updateItems: (value: IdndItems, resume: string) => void;
+};
+export default useDndItems;